[dev] update all packages and fix types

package.json

@@ -15,30 +15,30 @@
     "format": "prettier --write src/"
   },
   "devDependencies": {
-    "@element-plus/icons-vue": "^2.1.0",
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@types/node": "^18.14.2",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/tsconfig": "^0.1.3",
+    "@element-plus/icons-vue": "^2.3.1",
+    "@rushstack/eslint-patch": "^1.7.2",
+    "@types/node": "^20.11.28",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "12",
+    "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^10.9.0",
     "copy-to-clipboard": "^3.3.3",
-    "element-plus": "^2.3.1",
-    "eslint": "^8.34.0",
-    "eslint-plugin-vue": "^9.9.0",
+    "element-plus": "^2.6.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
     "html-to-image": "^1.11.11",
     "image-conversion": "^2.1.1",
-    "leancloud-storage": "^4.15.0",
+    "leancloud-storage": "^4.15.2",
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
-    "qs": "^6.11.2",
-    "sass": "^1.63.2",
-    "typescript": "~4.8.4",
-    "vite": "^4.1.4",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6",
-    "vue-tsc": "^1.2.0"
+    "prettier": "^3.2.5",
+    "qs": "^6.12.0",
+    "sass": "^1.72.0",
+    "typescript": "~5.4.2",
+    "vite": "^5.1.6",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "vue-tsc": "^2.0.6"
   }
 }

src/components/coc-card/ControlButton.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DefineComponent } from 'vue';
+import type { Component } from 'vue';
 
 import ActionButton from './ActionButton.vue';
 
 interface Props {
   label: string;
-  icon: DefineComponent;
+  icon: Component;
 }
 defineProps<Props>();
 

src/components/coc-card/WeaponSectionRow.vue

@@ -18,7 +18,7 @@ import {
 import { skillGroups } from '@/models/coc-card/skill';
 
 import { useToggle } from '@/utils/ui';
-import { usePC, usePageData } from '@/hooks/useCOCCardProviders';
+import { usePC } from '@/hooks/useCOCCardProviders';
 // @ts-ignore
 import vClickOutside from '@/directives/clickOutside';
 
@@ -41,7 +41,6 @@ interface BattleSkill {
 }
 
 const pc = usePC();
-const pageData = usePageData();
 
 function getTDClass(row: number, col: number) {
   const rowBase = row % 2 ? 0 : 1;

src/components/coc-card/WritableArea.vue

@@ -9,7 +9,7 @@ interface Props {
   maxlength?: number;
   readonly?: boolean;
 }
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   rows: 3,
   modelValue: '',
   readonly: false,

src/models/coc-card/attribute.ts

@@ -9,7 +9,7 @@ const normalAttrs: COCAttributesKey[] = ['str', 'dex', 'con', 'app', 'pow'];
 const higherAttrs: COCAttributesKey[] = ['siz', 'edu', 'int'];
 const otherAttrs: COCAttributesKey[] = ['luc'];
 
-export function generateRandomAttributes(age?: number) {
+export function generateRandomAttributes() {
   const attributes: Partial<COCAttributes> = {};
   normalAttrs.forEach((key) => {
     attributes[key] = throwDice(6, 3) * 5;
@@ -25,7 +25,7 @@ export function generateRandomAttributes(age?: number) {
 
 export function modifyAttributesByAge(
   attributes: Partial<COCAttributes>,
-  age: number
+  age: number,
 ): COCAttributes {
   let results = withDefaultAttributes(attributes);
   if (age < 15) {
@@ -75,7 +75,7 @@ export function getAttributesSum(attributes: COCAttributes) {
 }
 
 function withDefaultAttributes(
-  attributes: Partial<COCAttributes>
+  attributes: Partial<COCAttributes>,
 ): COCAttributes {
   return {
     str: 0,
@@ -94,7 +94,7 @@ function withDefaultAttributes(
 function minusAttributes(
   attributes: COCAttributes,
   keys: COCAttributesKey[],
-  total: number
+  total: number,
 ): COCAttributes {
   const results = { ...attributes };
   const sum = keys.reduce((sum, key) => sum + results[key], 0);

src/types/coc-card/skill.ts

@@ -1,14 +1,3 @@
-type SkillGroupKey =
-  | 'jiyi'
-  | 'muyu'
-  | 'waiyu'
-  | 'jiashi'
-  | 'gedou'
-  | 'sheji'
-  | 'kexue'
-  | 'shengcun'
-  | 'other';
-
 export interface Skill {
   // 技能名
   name: string;
@@ -21,17 +10,11 @@ export interface Skill {
   initPlaceholder?: string;
   // 如果是分组，则有这一项
   group?: {
-    // 分组 key
-    // key: SkillGroupKey;
     // 该分组默认显示的技能，数量为显示的行数，数字为子技能的索引，-1 不选择
     show: string[];
     // 该分组内包含的技能
     skills: ChildSkill[];
   };
-  // 暂时保留，老的结构要用
-  // num?: number;
-  // type?: string;
-  // selectValue?: SkillGroupKey;
 }
 
 export interface ChildSkill {

src/views/COCCardSections/AttributesSection.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 // components
 import PaperSection from '@/components/coc-card/PaperSection.vue';
 import WritableRow from '@/components/coc-card/WritableRow.vue';
 
 // models
-import type {
-  COCAttributesKey,
-  COCAttributes,
-} from '@/types/coc-card/character';
+import type { COCAttributesKey } from '@/types/coc-card/character';
 
 import { usePC } from '@/hooks/useCOCCardProviders';
-import { generateRandomAttributes } from '@/models/coc-card/attribute';
 
 interface Props {
   cheating?: boolean;

src/views/COCCardSections/ControlSection.vue

@@ -141,7 +141,7 @@ function actAgeGrow() {
   }
   pc.value.attributes = modifyAttributesByAge(
     pc.value.attributes,
-    Number(pc.value.age || 0)
+    Number(pc.value.age || 0),
   );
   ElMessage.success('已为您进行年龄修正！');
 }
@@ -158,7 +158,7 @@ function applyInData() {
     try {
       pc.value = data.pc;
       viewData.showingChildSkills = new Map(
-        Object.entries(data.viewData.showingChildSkills)
+        Object.entries(data.viewData.showingChildSkills),
       );
       const restKeys: (keyof COCCardViewData)[] = ['jobSkills'];
       restKeys.forEach((key) => {
@@ -180,7 +180,7 @@ function switchTotalMode() {
   ElMessage.info(
     `已切换成功率显示方式为：${
       pageData.showTotalSeparation ? '全面（普通 | 困难 | 极难）' : '极简'
-    }`
+    }`,
   );
 }
 
@@ -464,7 +464,6 @@ const cleanPreloadFn = watch(morePanelVisible, (visible) => {
 }
 
 .in-out-modal-body {
-  margin-top: -24px;
   display: flex;
   gap: 20px;
 }
@@ -476,7 +475,6 @@ const cleanPreloadFn = watch(morePanelVisible, (visible) => {
 }
 
 .reward-modal-body {
-  margin-top: -18px;
   display: grid;
   grid-template-areas:
     'text text'
@@ -490,7 +488,8 @@ const cleanPreloadFn = watch(morePanelVisible, (visible) => {
 }
 .reward-qr-container {
   width: 100%;
-  height: 100%;
+  aspect-ratio: 1/1;
+  max-width: 280px;
   justify-self: center;
 }
 .reward-qr {

src/views/SelfView.vue

@@ -23,10 +23,10 @@ const playedList = list
   .sort(
     (a, b) =>
       (b.experience?.experienceScore || 0) -
-      (a.experience?.experienceScore || 0)
+      (a.experience?.experienceScore || 0),
   )
   .sort(
-    (a, b) => (b.experience?.storyScore || 0) - (a.experience?.storyScore || 0)
+    (a, b) => (b.experience?.storyScore || 0) - (a.experience?.storyScore || 0),
   );
 </script>
 
@@ -53,8 +53,8 @@ const playedList = list
               v-if="record?.prefer"
             >
               <template
-                v-for="(_, i) in Array.from({ length: record.prefer })"
-                :key="i"
+                v-for="(_, _i) in Array.from({ length: record.prefer })"
+                :key="_i"
               >
                 <span>♡</span>
               </template>

src/views/StoryListView.vue

@@ -77,7 +77,7 @@ function sortList(list: listItem[]) {
 const list = sortList([...stories.map(getListMapper())]);
 
 const periodOptions = periodOrder.map(
-  (key) => [key, periodTexts[key]] as [Period, string]
+  (key) => [key, periodTexts[key]] as [Period, string],
 );
 const countryOptions = computed(() => {
   const countries = new Map<string, number>();
@@ -173,7 +173,7 @@ const computedList = computed(() => {
         <div class="filter-multi-values">
           <PeriodLabel
             v-for="selectedPeriod in periodOrder.filter((p) =>
-              filters.period.has(p)
+              filters.period.has(p),
             )"
             :key="selectedPeriod"
             class="period-label-filter-value"
@@ -227,8 +227,8 @@ const computedList = computed(() => {
             v-if="record?.prefer"
           >
             <template
-              v-for="(_, i) in Array.from({ length: record.prefer })"
-              :key="i"
+              v-for="(_, _i) in Array.from({ length: record.prefer })"
+              :key="_i"
             >
               <span>♡</span>
             </template>

tsconfig.json

@@ -1,17 +1,32 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // my custom
     "baseUrl": ".",
+    "types": ["element-plus/global"],
     "paths": {
-      "@/*": ["./src/*"],
-      "types": ["element-plus/global"]
+      "@/*": ["./src/*"]
     }
   },
-
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -1,8 +1,11 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "include": ["vite.config.ts", "vite.libs.config.ts"],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
   }
 }