[dev] 重构文件结构，引入ls库

README.md

@@ -15,7 +15,7 @@
 
 https://masquevil.github.io/trpg-saikou/#/coc-card
 
-![截图](./public/coc-card-eg.png)
+![截图](./src/assets/images/readme-preview/coc-card.png)
 
 1. 生成正反面图片，方便打印
 2. 可以打印空白卡线下车卡
@@ -25,7 +25,7 @@ https://masquevil.github.io/trpg-saikou/#/coc-card
 
 ### 记录工具
 
-![example](./public/example.png)
+![example](./src/assets/images/readme-preview/record.png)
 
 1. 需拉取本仓库代码后本地使用
 2. 记录自己 TRPG 打卡记录、评价、想玩程度

src/assets/base.scss

@@ -30,6 +30,11 @@
   --color-link-active: hsl(240, 30%, 40%);
   --color-placeholder: #b2b2b2;
 
+  --color-section-header-bg: #1d1e1f;
+  --color-section-bg: #262727;
+  --color-section-border: #414243;
+  --color-section-shadow: rgba(90, 98, 131, 0.6);
+
   // controls
   --color-control-bg: #3a3a3a;
   --color-control-bg-hover: #444;

src/hooks/useLocalStorage.ts

@@ -0,0 +1,69 @@
+import { useStorage, RemovableRef } from '@vueuse/core';
+
+import { LSNamespace, LSApp } from '@/types/ls';
+
+interface LocalStorageOptions<Store> {
+  namespace?: LSNamespace;
+  app: LSApp;
+  defaults?: Store;
+  versionChecker?: (storedVersion: number, storeRef: RemovableRef<Store>) => number;
+}
+
+export default function useLocalStorage<Store extends object>(options: LocalStorageOptions<Store>) {
+  const {
+    namespace = LSNamespace.SoxFE,
+    app,
+    versionChecker = (_, storeRef) => {
+      storeRef.value = null;
+      return -1;
+    },
+    defaults = {} as Store,
+  } = options;
+  const storage = window.localStorage;
+
+  const baseKey = `${namespace}#${app}`;
+  const versionCheckerKey = `${baseKey}##versionChecker`;
+
+  const store = useStorage<Store>(baseKey, defaults, storage, {
+    mergeDefaults: true,
+  });
+
+  const versionStore = useStorage<Record<string, number>>(versionCheckerKey, {}, storage);
+  const storedVersion = versionStore.value[baseKey];
+  const currentVersion = versionChecker(storedVersion, store);
+  versionStore.value[baseKey] = currentVersion;
+
+  function listItems() {
+    return store.value;
+  }
+
+  function countItems() {
+    return Object.keys(listItems()).length;
+  }
+
+  function getItem<K extends keyof Store>(key: K) {
+    return store.value[key];
+  }
+
+  function setItem<K extends keyof Store>(key: K, value: Store[K]) {
+    store.value[key] = value;
+  }
+
+  function removeItem(key: keyof Store) {
+    delete store.value[key];
+  }
+
+  function clear() {
+    store.value = null;
+  }
+
+  return {
+    store,
+    listItems,
+    countItems,
+    getItem,
+    setItem,
+    removeItem,
+    clear,
+  };
+}

src/local/experiences.example.ts

@@ -1,5 +1,5 @@
-import StoryNames from '../types/name';
-import type { Experience } from '../types/experience';
+import StoryNames from '../pages/record/types/name';
+import type { Experience } from '../pages/record/types/experience';
 
 const myExperiences: Experience[] = [
   [StoryNames.湖之仆从, 3, 3, '示例：体验好，KP好，PL好，模组好！'],

src/local/record.example.ts

@@ -1,5 +1,5 @@
-import StoryNames from '../types/name';
-import type { Record } from '../types/record';
+import StoryNames from '../pages/record/types/name';
+import type { Record } from '../pages/record/types/record';
 
 const myUserData: Record[] = [
   [StoryNames.湖之仆从, 1, true],

src/views/COCCardView.vue → src/pages/coc-card/AppView.vue

@@ -2,19 +2,19 @@
 import { reactive, provide, ref } from 'vue';
 import qs from 'qs';
 
-import { createPC } from '@/models/coc-card/character';
-import { createViewData } from '@/models/coc-card/viewData';
+import { createPC } from './models/character';
+import { createViewData } from './models/viewData';
 
-import type { COCPlayerCharacter } from '@/types/coc-card/character';
-import type { COCCardViewData } from '@/types/coc-card/viewData';
-import type { PageData } from '@/types/coc-card/pageData';
+import type { COCPlayerCharacter } from './types/character';
+import type { COCCardViewData } from './types/viewData';
+import type { PageData } from './types/pageData';
 
-import useDerives from '@/hooks/useDerives';
-import useSuggestion from '@/hooks/useSuggestion';
+import useDerives from './hooks/useDerives';
+import useSuggestion from './hooks/useSuggestion';
 
-import ControlSection from './COCCardSections/ControlSection.vue';
-import PaperFront from './COCCardSections/PaperFront.vue';
-import PaperBack from './COCCardSections/PaperBack.vue';
+import ControlSection from './sections/ControlSection.vue';
+import PaperFront from './PaperFront.vue';
+import PaperBack from './PaperBack.vue';
 
 const qsObject = qs.parse(location.search.slice(1));
 const pcRef = ref<COCPlayerCharacter>(createPC());

src/views/COCCardSections/PaperBack.vue → src/pages/coc-card/PaperBack.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { VNodeRef } from 'vue';
 
-import PaperLayout from './PaperLayout.vue';
-import StorySection from './StorySection.vue';
-import AssetsSection from './AssetsSection.vue';
-import ItemSection from './ItemSection.vue';
-import MythosSection from './MythosSection.vue';
-import FriendSection from './FriendSection.vue';
-import ExperienceSection from './ExperienceSection.vue';
+import PaperLayout from './layouts/PaperLayout.vue';
+import StorySection from './sections/StorySection.vue';
+import AssetsSection from './sections/AssetsSection.vue';
+import ItemSection from './sections/ItemSection.vue';
+import MythosSection from './sections/MythosSection.vue';
+import FriendSection from './sections/FriendSection.vue';
+import ExperienceSection from './sections/ExperienceSection.vue';
 
 interface Props {
   setRef?: VNodeRef;

src/views/COCCardSections/PaperFront.vue → src/pages/coc-card/PaperFront.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import type { VNodeRef } from 'vue';
 
-import PaperLayout from './PaperLayout.vue';
-import InvestigatorSection from './InvestigatorSection.vue';
-import AttributesSection from './AttributesSection.vue';
-import LuckSection from './LuckSection.vue';
-import AvatarSection from './AvatarSection.vue';
-import DeriveSections from './DeriveSections.vue';
-import HintSection from './HintSection.vue';
-import SkillSection from './SkillSection.vue';
-import WeaponSection from './WeaponSection.vue';
-import BattleSection from './BattleSection.vue';
-import CopyrightSection from './CopyrightSection.vue';
+import PaperLayout from './layouts/PaperLayout.vue';
+import InvestigatorSection from './sections/InvestigatorSection.vue';
+import AttributesSection from './sections/AttributesSection.vue';
+import LuckSection from './sections/LuckSection.vue';
+import AvatarSection from './sections/AvatarSection.vue';
+import DeriveSections from './sections/DeriveSections.vue';
+import HintSection from './sections/HintSection.vue';
+import SkillSection from './sections/SkillSection.vue';
+import WeaponSection from './sections/WeaponSection.vue';
+import BattleSection from './sections/BattleSection.vue';
+import CopyrightSection from './sections/CopyrightSection.vue';
 
 interface Props {
   setRef?: VNodeRef;

src/components/coc-card/AvatarModalContent.vue → src/pages/coc-card/components/AvatarModalContent.vue

@@ -2,9 +2,9 @@
 import { computed, ref } from 'vue';
 import { Refresh } from '@element-plus/icons-vue';
 
-import { initSdAvatars, getSuggestImages } from '@/models/coc-card/sdAvatar';
-import { usePC } from '@/hooks/useCOCCardProviders';
-import type { SdImageData } from '@/types/coc-card/sdAvatar';
+import { initSdAvatars, getSuggestImages } from '../models/sdAvatar';
+import { usePC } from '../hooks/useProviders';
+import type { SdImageData } from '../types/sdAvatar';
 
 import ActionButton from './ActionButton.vue';
 import UploadAvatarButtonWrapper from './UploadAvatarButtonWrapper.vue';
@@ -24,7 +24,7 @@ const poolSDImageIndex = ref(0);
 const showingSDImages = computed(() => {
   return sdImages.value.slice(
     poolSDImageIndex.value,
-    poolSDImageIndex.value + 6
+    poolSDImageIndex.value + 6,
   );
 });
 

src/components/coc-card/DownloaderItem.vue → src/pages/coc-card/components/DownloaderItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 
-import ControlDialog from '@/components/coc-card/ControlDialog.vue';
+import ControlDialog from '../components/ControlDialog.vue';
 import { downloadImage } from '@/utils/image';
 
 interface Props {

src/components/coc-card/FlattenTree.vue → src/pages/coc-card/components/FlattenTree.vue

@@ -2,7 +2,7 @@
 import type {
   FlattenTreeData,
   FlattenTreeDataItem as Item,
-} from '@/types/coc-card/flattenTree';
+} from '../types/flattenTree';
 interface Props {
   tree: FlattenTreeData;
 }

src/components/coc-card/JobList.vue → src/pages/coc-card/components/JobList.vue

@@ -3,11 +3,11 @@ import { computed, ref } from 'vue';
 import { Upload } from '@element-plus/icons-vue';
 
 // models
-import formattedJobs, { getProPointByJobAndAttrs } from '@/models/coc-card/job';
-import { getJobSuggestion } from '@/models/coc-card/suggestion';
+import formattedJobs, { getProPointByJobAndAttrs } from '../models/job';
+import { getJobSuggestion } from '../models/suggestion';
 import LA, { LAEventID, FeatureNames } from '@/plugins/51la';
 
-import { usePC } from '@/hooks/useCOCCardProviders';
+import { usePC } from '../hooks/useProviders';
 
 interface Props {
   label?: string;

src/components/coc-card/QunSection.vue → src/pages/coc-card/components/QunSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import groupQrWechat from '@/assets/group-qr-wechat.jpg';
+import groupQrWechat from '../assets/group-qr-wechat.jpg';
 </script>
 
 <template>

src/components/coc-card/SkillTable.vue → src/pages/coc-card/components/SkillTable.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { ChildSkill } from '@/types/coc-card/skill';
-import type { SkillGroup, SkillGroups } from '@/types/coc-card/formattedSkill';
-import type { COCPCSkill, SkillPoint } from '@/types/coc-card/character';
-import type { Suggestion } from '@/types/coc-card/suggestion';
-import { dynamicInitFormulas } from '@/models/coc-card/skill';
-import { usePC, useViewData, usePageData } from '@/hooks/useCOCCardProviders';
+import type { ChildSkill } from '../types/skill';
+import type { SkillGroup, SkillGroups } from '../types/formattedSkill';
+import type { COCPCSkill, SkillPoint } from '../types/character';
+import type { Suggestion } from '../types/suggestion';
+import { dynamicInitFormulas } from '../models/skill';
+import { usePC, useViewData, usePageData } from '../hooks/useProviders';
 
 import SkillTdLabel from './SkillTdLabel.vue';
 import SkillTdInput from './SkillTdInput.vue';

src/components/coc-card/SkillTdInput.vue → src/pages/coc-card/components/SkillTdInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SoxCheckbox from '../sox/SoxCheckbox.vue';
+import SoxCheckbox from '@/components/SoxCheckbox.vue';
 import BaseTdInput from './BaseTdInput.vue';
 
 interface Props {

src/components/coc-card/SkillTdLabel.vue → src/pages/coc-card/components/SkillTdLabel.vue

@@ -2,12 +2,12 @@
 import { ref, inject, computed } from 'vue';
 // @ts-ignore
 import vClickOutside from '@/directives/clickOutside';
-import { usePC } from '@/hooks/useCOCCardProviders';
-import type { ChildSkill } from '@/types/coc-card/skill';
-import type { COCCardViewData } from '@/types/coc-card/viewData';
-import type { COCPCSkill } from '@/types/coc-card/character';
+import { usePC } from '../hooks/useProviders';
+import type { ChildSkill } from '../types/skill';
+import type { COCCardViewData } from '../types/viewData';
+import type { COCPCSkill } from '../types/character';
 
-import SoxCheckbox from '../sox/SoxCheckbox.vue';
+import SoxCheckbox from '@/components/SoxCheckbox.vue';
 
 interface Props {
   skillName: string;
@@ -30,7 +30,7 @@ const emit = defineEmits<Emits>();
 
 const isOptionsShowing = ref(false);
 const currentData = computed(() =>
-  viewData?.showingChildSkills.get(props.skillName)
+  viewData?.showingChildSkills.get(props.skillName),
 );
 const existedData = computed(() => {
   if (['母语', '外语'].includes(props.skillName)) {
@@ -69,7 +69,7 @@ function updateCurrentData(value: string) {
           skillName === props.skillName &&
           childSkillPlace === props.childSkillData?.place
         );
-      }
+      },
     );
     if (skillInfo && typeof skillInfo !== 'string') {
       skillInfo[1] = value;
@@ -144,7 +144,7 @@ function changeProSkill(value: boolean) {
             class="child-skill-option"
             :class="{
               'child-skill-option-existed': existedData?.includes(
-                childSkill.name
+                childSkill.name,
               ),
             }"
             @click="selectChildSkill(childSkill)"

src/components/coc-card/UploadAvatarButtonWrapper.vue → src/pages/coc-card/components/UploadAvatarButtonWrapper.vue

@@ -7,7 +7,7 @@ import {
 } from 'image-conversion';
 
 import { getImageSize } from '@/utils/image';
-import { usePC } from '@/hooks/useCOCCardProviders';
+import { usePC } from '../hooks/useProviders';
 
 interface Props {
   id?: string;

src/components/coc-card/WeaponList.vue → src/pages/coc-card/components/WeaponList.vue

@@ -4,15 +4,11 @@ import { Upload } from '@element-plus/icons-vue';
 import { ClickOutside } from 'element-plus';
 
 // models
-import {
-  weapons,
-  weaponGroups,
-  weaponGroupOrders,
-} from '@/models/coc-card/weapon';
-import type { Weapon } from '@/types/coc-card/weapon';
+import { weapons, weaponGroups, weaponGroupOrders } from '../models/weapon';
+import type { Weapon } from '../types/weapon';
 import LA, { LAEventID, FeatureNames } from '@/plugins/51la';
 
-import { usePC } from '@/hooks/useCOCCardProviders';
+import { usePC } from '../hooks/useProviders';
 
 interface Props {
   label?: string;

src/components/coc-card/WeaponSectionRow.vue → src/pages/coc-card/components/WeaponSectionRow.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import SoxCheckbox from '@/components/sox/SoxCheckbox.vue';
-import BaseTdInput from '@/components/coc-card/BaseTdInput.vue';
-import BaseTdSelect from '@/components/coc-card/BaseTdSelect.vue';
-import FlattenTree from '@/components/coc-card/FlattenTree.vue';
+import SoxCheckbox from '@/components/SoxCheckbox.vue';
+import BaseTdInput from '../components/BaseTdInput.vue';
+import BaseTdSelect from '../components/BaseTdSelect.vue';
+import FlattenTree from '../components/FlattenTree.vue';
 
-import type { Weapon } from '@/types/coc-card/weapon';
-import type { FlattenTreeData } from '@/types/coc-card/flattenTree';
+import type { Weapon } from '../types/weapon';
+import type { FlattenTreeData } from '../types/flattenTree';
 
 import {
   createWeapon,
   weapons,
   weaponGroups,
   weaponGroupOrders,
-} from '@/models/coc-card/weapon';
-import { skillGroups } from '@/models/coc-card/skill';
+} from '../models/weapon';
+import { skillGroups } from '../models/skill';
 import LA, { LAEventID, FeatureNames } from '@/plugins/51la';
 
 import { useToggle } from '@/utils/ui';
-import { usePC } from '@/hooks/useCOCCardProviders';
+import { usePC } from '../hooks/useProviders';
 // @ts-ignore
 import vClickOutside from '@/directives/clickOutside';
 

src/components/coc-card/WritableArea.vue → src/pages/coc-card/components/WritableArea.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { usePageData } from '@/hooks/useCOCCardProviders';
+import { usePageData } from '../hooks/useProviders';
 
 interface Props {
   label: string;