[coc-card] 修复自动保存的bug

masquevil · Sep 10, 2024 · 543416c · 543416c
1 parent 86a00ba
commit 543416c
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 73 deletions.
diff --git a/src/apps/coc-card/AppView.vue b/src/apps/coc-card/AppView.vue
@@ -43,6 +43,7 @@ const suggestion = useSuggestion(pcRef, {
 });
 
 useAutoSave(pcRef, {
+  viewData,
   pageData,
 });
 

diff --git a/src/apps/coc-card/components/SkillTable.vue b/src/apps/coc-card/components/SkillTable.vue
@@ -36,6 +36,7 @@ interface TableRowData {
   points: SkillPoint;
   total: number;
   totalSeparation: [number, number, number]; // 100/50/20
+  showTotal: boolean;
   // child skill info
   childSkillData?: {
     name: string;
@@ -72,6 +73,7 @@ function getTableData(data: SkillGroups, suggestion?: Suggestion) {
           points,
           total,
           totalSeparation: [total, ~~(total / 2), ~~(total / 5)],
+          showTotal: total > 0 && (total !== init || total === points.b),
           ...(isGroupStart
             ? {
                 isGroupStart,
@@ -91,7 +93,7 @@ function getTableData(data: SkillGroups, suggestion?: Suggestion) {
           groupRow.groupSize! += length - 1;
           added = skill.group.show.map((placeName, childIndex) => {
             const childSkillName =
-              viewData?.showingChildSkills.get(skill.name)?.[childIndex] ?? placeName;
+              viewData?.showingChildSkills[skill.name]?.[childIndex] ?? placeName;
             const childSkill = skill.group?.skills.find(({ name }) => name === childSkillName);
             let init = childSkill?.init ?? rowData.init;
             const skillKey: COCPCSkill = [skill.name, childSkillName, childIndex];
@@ -112,6 +114,7 @@ function getTableData(data: SkillGroups, suggestion?: Suggestion) {
               points,
               total,
               totalSeparation: [total, ~~(total / 2), ~~(total / 5)],
+              showTotal: total > 0 && (total !== init || total === points.b),
               // child skill info
               childSkillData: {
                 name: childSkillName,
@@ -171,8 +174,8 @@ function updateSkillPoint(
 }
 
 function getTotal(points: SkillPoint, init: number) {
-  const { p = 0, i = 0, g = 0 } = points;
-  return init + Number(p) + Number(i) + Number(g);
+  const { b, p = 0, i = 0, g = 0 } = points;
+  return (b ?? init) + Number(p) + Number(i) + Number(g);
 }
 </script>
 
@@ -338,7 +341,7 @@ function getTotal(points: SkillPoint, init: number) {
               {{ sep }}
             </span>
           </span>
-          <span v-else-if="row.total !== row.init">{{ row.total }}</span>
+          <span v-else-if="row.showTotal">{{ row.total }}</span>
         </td>
       </tr>
     </tbody>

diff --git a/src/apps/coc-card/components/SkillTdLabel.vue b/src/apps/coc-card/components/SkillTdLabel.vue
@@ -29,14 +29,12 @@ interface Emits {
 const emit = defineEmits<Emits>();
 
 const isOptionsShowing = ref(false);
-const currentData = computed(() =>
-  viewData?.showingChildSkills.get(props.skillName),
-);
+const currentData = computed(() => viewData?.showingChildSkills[props.skillName]);
 const existedData = computed(() => {
   if (['母语', '外语'].includes(props.skillName)) {
     return [
-      ...(viewData?.showingChildSkills.get('母语') || []),
-      ...(viewData?.showingChildSkills.get('外语') || []),
+      ...(viewData?.showingChildSkills['母语'] || []),
+      ...(viewData?.showingChildSkills['外语'] || []),
     ];
   }
   return currentData.value;
@@ -52,25 +50,17 @@ const isProSkill = computed(() => {
     }
     // 二级技能
     const [skillName, _, childSkillPlace] = skillInfo;
-    return (
-      skillName === props.skillName &&
-      childSkillPlace === props.childSkillData?.place
-    );
+    return skillName === props.skillName && childSkillPlace === props.childSkillData?.place;
   });
 });
 
 function updateCurrentData(value: string) {
   if (!props.childSkillData || !currentData.value) return;
   // update pro data
   if (isProSkill.value && pc) {
-    const skillInfo = pc.value.proSkills.find(
-      ([skillName, _, childSkillPlace]) => {
-        return (
-          skillName === props.skillName &&
-          childSkillPlace === props.childSkillData?.place
-        );
-      },
-    );
+    const skillInfo = pc.value.proSkills.find(([skillName, _, childSkillPlace]) => {
+      return skillName === props.skillName && childSkillPlace === props.childSkillData?.place;
+    });
     if (skillInfo && typeof skillInfo !== 'string') {
       skillInfo[1] = value;
     }
@@ -89,20 +79,13 @@ function changeProSkill(value: boolean) {
   if (value) {
     let skillInfo: COCPCSkill = props.skillName;
     if (props.childSkillData)
-      skillInfo = [
-        props.skillName,
-        props.childSkillData.name,
-        props.childSkillData.place,
-      ];
+      skillInfo = [props.skillName, props.childSkillData.name, props.childSkillData.place];
     pc.value.proSkills.push(skillInfo);
   } else {
     pc.value.proSkills = pc.value.proSkills.filter((skillInfo) => {
       if (!props.childSkillData) return skillInfo !== props.skillName;
       const [skillName, _, childSkillPlace] = skillInfo;
-      return (
-        skillName !== props.skillName ||
-        childSkillPlace !== props.childSkillData.place
-      );
+      return skillName !== props.skillName || childSkillPlace !== props.childSkillData.place;
     });
   }
 }
@@ -143,9 +126,7 @@ function changeProSkill(value: boolean) {
             :key="childSkill.name"
             class="child-skill-option"
             :class="{
-              'child-skill-option-existed': existedData?.includes(
-                childSkill.name,
-              ),
+              'child-skill-option-existed': existedData?.includes(childSkill.name),
             }"
             @click="selectChildSkill(childSkill)"
           >

diff --git a/src/apps/coc-card/hooks/useAppLs.ts b/src/apps/coc-card/hooks/useAppLs.ts
@@ -2,19 +2,21 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 
 import { LSApp } from '@/types/ls';
 import type { COCPlayerCharacter } from '../types/character';
+import type { COCCardViewData } from '../types/viewData';
 
 interface Store {
   showTotalSeparation?: boolean;
   autoSaved?: {
     pc: COCPlayerCharacter;
+    viewData: COCCardViewData;
     lastModified: number; // number of date
   };
 }
 
 const ls = useLocalStorage<Store>({
   app: LSApp.COCCard,
   versionChecker() {
-    return 1;
+    return 1.1;
   },
 });
 

diff --git a/src/apps/coc-card/hooks/useAutoSave.ts b/src/apps/coc-card/hooks/useAutoSave.ts
@@ -4,6 +4,7 @@ import { ElMessageBox } from 'element-plus';
 
 import type { COCPlayerCharacter } from '../types/character';
 import type { PageData } from '../types/pageData';
+import type { COCCardViewData } from '../types/viewData';
 
 import useZhTimeAgo from '@/hooks/useZhTimeAgo';
 import useAppLs from './useAppLs';
@@ -13,19 +14,21 @@ const ls = useAppLs();
 export default function useAutoSave(
   pcRef: Ref<COCPlayerCharacter>,
   options: {
+    viewData: COCCardViewData;
     pageData: PageData;
   },
 ) {
   const autoSaved = ls.getItem('autoSaved');
-  const { lastModified, pc: savedPC } = autoSaved || {};
+  const { lastModified, pc: savedPC, viewData: savedViewData } = autoSaved || {};
   const { timeAgo } = useZhTimeAgo(lastModified || Date.now());
-  const { pageData } = options;
+  const { viewData, pageData } = options;
 
   watch(
-    () => pcRef.value,
+    () => [pcRef.value, viewData],
     () => {
       ls.setItem('autoSaved', {
         pc: pcRef.value,
+        viewData,
         lastModified: Date.now(),
       });
     },
@@ -51,6 +54,13 @@ export default function useAutoSave(
       ElMessageBox.confirm(vnode, '检测到编辑过的人物卡', { showClose: false }).then(() => {
         pageData.importing = true;
         pcRef.value = savedPC!;
+        // TODO: 提取成 util
+        if (savedViewData) {
+          Object.keys(savedViewData).forEach((key) => {
+            const k = key as keyof COCCardViewData;
+            viewData[k] = savedViewData[k] as any;
+          });
+        }
         nextTick(() => {
           pageData.importing = false;
         });

diff --git a/src/apps/coc-card/models/skill.ts b/src/apps/coc-card/models/skill.ts
@@ -5,10 +5,7 @@ import type { COCPlayerCharacter, SkillPoint } from '../types/character';
 import type { COCCardViewData } from '../types/viewData';
 
 import { skills, skillNameAlias } from '../constants/skill';
-import {
-  skillGroups as groups,
-  skillGroupOrder,
-} from '../constants/skillGroup';
+import { skillGroups as groups, skillGroupOrder } from '../constants/skillGroup';
 
 function getFormattedSkillGroups({
   skills,
@@ -43,19 +40,16 @@ export const skillGroups = getFormattedSkillGroups({
   groupOrder: skillGroupOrder,
 });
 
-export const dynamicInitFormulas: Record<
-  string,
-  (pc: COCPlayerCharacter) => number
-> = {
+export const dynamicInitFormulas: Record<string, (pc: COCPlayerCharacter) => number> = {
   母语: (pc) => pc.attributes.edu || 0,
   闪避: (pc) => Math.floor((pc.attributes.dex || 0) / 2),
 };
 
 export function resetShowingChildSkills(viewData?: COCCardViewData) {
-  const map = new Map<string, string[]>();
+  const map: Record<string, string[]> = {};
   skills.forEach((skill) => {
     if (!skill.group) return;
-    map.set(skill.name, [...skill.group.show]);
+    map[skill.name] = [...skill.group.show];
   });
   if (viewData) {
     viewData.showingChildSkills = map;
@@ -67,10 +61,7 @@ export function resetShowingChildSkills(viewData?: COCCardViewData) {
 // 第一部分——属性：力量60str60敏捷60dex60……
 // 第二部分——衍生属性：hp12体力12mp12魔法12san60理智60san值60
 // 第三部分——技能：母语60英语60日语40汽车驾驶25……
-export function getDiceMaidStString(
-  pc: COCPlayerCharacter,
-  viewData: COCCardViewData,
-) {
+export function getDiceMaidStString(pc: COCPlayerCharacter, viewData: COCCardViewData) {
   const { attributes, deriveAttributes, skillPoints } = pc;
   const {
     str = 0,
@@ -100,22 +91,17 @@ export function getDiceMaidStString(
     let childSkillPosition: number | undefined;
     if (Array.isArray(fullName)) {
       [skillName, , childSkillPosition] = fullName;
-      childSkillName =
-        viewData.showingChildSkills.get(skillName)?.[childSkillPosition];
+      childSkillName = viewData.showingChildSkills[skillName]?.[childSkillPosition];
     } else {
       skillName = fullName;
     }
-    const mapKey = childSkillName
-      ? `${skillName}-${childSkillName}`
-      : skillName;
+    const mapKey = childSkillName ? `${skillName}-${childSkillName}` : skillName;
     pcPointsMap[mapKey] = skillPoint;
   });
 
   skills.forEach((skill) => {
     const { name, init, group } = skill;
-    let realInit = dynamicInitFormulas[name]
-      ? dynamicInitFormulas[name](pc)
-      : init;
+    let realInit = dynamicInitFormulas[name] ? dynamicInitFormulas[name](pc) : init;
     const displayName = name.includes('Ω') ? name.slice(0, -1) : name;
 
     if (!group) {
@@ -137,14 +123,12 @@ export function getDiceMaidStString(
     } else {
       let total = 0;
       // viewData
-      viewData.showingChildSkills.get(name)?.forEach((childSkillName) => {
+      viewData.showingChildSkills[name]?.forEach((childSkillName) => {
         if (!childSkillName) return;
         const mapKey = `${name}-${childSkillName}`;
         const point = pcPointsMap[mapKey];
         if (name) {
-          realInit =
-            skill.group?.skills.find((s) => s.name === childSkillName)?.init ||
-            realInit;
+          realInit = skill.group?.skills.find((s) => s.name === childSkillName)?.init || realInit;
         }
         if (point) {
           const { b = name ? realInit : 0, p = 0, i = 0, g = 0 } = point;

diff --git a/src/apps/coc-card/sections/ControlSection.vue b/src/apps/coc-card/sections/ControlSection.vue
@@ -65,15 +65,15 @@ const pageData = usePageData();
 
 const inData = ref('');
 const outData = computed(() => {
-  const showingChildSkills: Record<string, string[]> = {};
-  viewData?.showingChildSkills.forEach((value, key) => {
-    showingChildSkills[key] = value;
-  });
+  // const showingChildSkills: Record<string, string[]> = {};
+  // viewData?.showingChildSkills.forEach((value, key) => {
+  //   showingChildSkills[key] = value;
+  // });
   const json = JSON.stringify({
     pc: pc?.value,
     viewData: {
       ...viewData,
-      showingChildSkills,
+      // showingChildSkills,
     },
   });
   const str = LZString.compressToEncodedURIComponent(json);
@@ -201,10 +201,9 @@ function applyInData() {
   if (data && data.viewData && data.pc && viewData && pc) {
     try {
       pc.value = data.pc;
-      viewData.showingChildSkills = new Map(Object.entries(data.viewData.showingChildSkills));
-      const restKeys: (keyof COCCardViewData)[] = ['jobSkills', 'skillLimits'];
-      restKeys.forEach((key) => {
-        viewData[key] = data.viewData[key];
+      Object.keys(data.viewData).forEach((key) => {
+        const k = key as keyof COCCardViewData;
+        viewData[k] = data.viewData[k];
       });
       ElMessage.success('已成功导入');
       inOutModalVisible.value = false;

diff --git a/src/apps/coc-card/types/viewData.ts b/src/apps/coc-card/types/viewData.ts
@@ -1,7 +1,7 @@
 import type { JobSkills } from './job';
 
 export interface COCCardViewData {
-  showingChildSkills: Map<string, string[]>;
+  showingChildSkills: Record<string, string[]>;
   jobSkills?: JobSkills;
   skillLimits: {
     pro: number;
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,6 +43,7 @@ const suggestion = useSuggestion(pcRef, { @@
     });
     useAutoSave(pcRef, {
+      viewData,
       pageData,
     });
@@ Expand Down @@