From f1517655b9bb6d8ca22e06f3b91d6060518b2908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E5=88=BA=E8=9E=88?= <i@songe.li>
Date: Fri, 25 Oct 2024 22:09:11 +0800
Subject: [PATCH] refactor: store

---
 .github/workflows/deploy.yml        |   1 +
 package.json                        |   7 +-
 plugins/unAutoImport.ts             |   3 +-
 pnpm-lock.yaml                      |  23 +++
 src/components/ActionCard.vue       |  23 ++-
 src/components/ErrorDlg.vue         |  12 +-
 src/main.ts                         |  11 +-
 src/store.ts                        |  13 --
 src/store/global.ts                 |  13 ++
 src/store/storage.ts                | 171 ++++++++++++++++++++++
 src/utils/dialog.tsx                |  10 +-
 src/utils/export.ts                 |  36 +++--
 src/utils/fetch.ts                  |   5 +-
 src/utils/github.ts                 |   3 +-
 src/utils/import.ts                 |   6 +-
 src/utils/others.ts                 |   8 +
 src/utils/selector.ts               |  12 +-
 src/utils/snapshot.ts               |  96 ++++++++++++
 src/utils/storage.ts                | 217 ----------------------------
 src/utils/table.tsx                 |   8 +-
 src/utils/url.ts                    |  43 +++---
 src/views/ImportPage.vue            |  12 +-
 src/views/home/HomePage.vue         |  22 ++-
 src/views/snapshot/SearchCard.vue   |  28 ++--
 src/views/snapshot/SnapshotPage.vue |  22 ++-
 25 files changed, 437 insertions(+), 368 deletions(-)
 delete mode 100644 src/store.ts
 create mode 100644 src/store/global.ts
 create mode 100644 src/store/storage.ts
 create mode 100644 src/utils/snapshot.ts
 delete mode 100644 src/utils/storage.ts

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 6de64e2..65abae2 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,6 +1,7 @@
 name: deploy
 
 on:
+  workflow_dispatch:
   push:
     branches: ['main']
     paths-ignore:
diff --git a/package.json b/package.json
index 242e323..af697b1 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "naive-ui": "2.40.1",
     "normalize.css": "8.0.1",
     "p-limit": "6.1.0",
+    "pinia": "2.2.4",
     "prettier": "3.3.3",
     "qrcode": "1.5.4",
     "sass": "1.79.4",
@@ -74,10 +75,10 @@
     "vue-router": "4.4.5"
   },
   "volta": {
-    "node": "22.7.0",
-    "pnpm": "9.12.1"
+    "node": "22.10.0",
+    "pnpm": "9.12.2"
   },
-  "packageManager": "pnpm@9.12.1",
+  "packageManager": "pnpm@9.12.2",
   "simple-git-hooks": {
     "pre-commit": "pnpm exec lint-staged"
   },
diff --git a/plugins/unAutoImport.ts b/plugins/unAutoImport.ts
index f8e7d74..3e55f6c 100644
--- a/plugins/unAutoImport.ts
+++ b/plugins/unAutoImport.ts
@@ -3,6 +3,7 @@ import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import components from 'unplugin-vue-components/vite';
 import type { Plugin } from 'vite';
 import naiveComponents from './naive-components.json';
+import process from 'node:process';
 
 export const unAutoImport = (): Plugin[] => {
   return [
@@ -29,7 +30,7 @@ export const unAutoImport = (): Plugin[] => {
         globalsPropValue: 'readonly',
         filepath: '.eslintrc-auto-import.json',
       },
-      dirs: [],
+      dirs: [process.cwd() + '/src/store'],
     }),
     components({
       include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b9f5fc..e8452dd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -113,6 +113,9 @@ importers:
       p-limit:
         specifier: 6.1.0
         version: 6.1.0
+      pinia:
+        specifier: 2.2.4
+        version: 2.2.4(typescript@5.6.3)(vue@3.5.11(typescript@5.6.3))
       prettier:
         specifier: 3.3.3
         version: 3.3.3
@@ -2867,6 +2870,18 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
+  pinia@2.2.4:
+    resolution: {integrity: sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+
   pkg-types@1.1.3:
     resolution: {integrity: sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==}
 
@@ -6510,6 +6525,14 @@ snapshots:
 
   pidtree@0.6.0: {}
 
+  pinia@2.2.4(typescript@5.6.3)(vue@3.5.11(typescript@5.6.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.11(typescript@5.6.3)
+      vue-demi: 0.14.10(vue@3.5.11(typescript@5.6.3))
+    optionalDependencies:
+      typescript: 5.6.3
+
   pkg-types@1.1.3:
     dependencies:
       confbox: 0.1.7
diff --git a/src/components/ActionCard.vue b/src/components/ActionCard.vue
index 37cc0b5..ba22808 100644
--- a/src/components/ActionCard.vue
+++ b/src/components/ActionCard.vue
@@ -4,18 +4,14 @@ import { message } from '@/utils/discrete';
 import {
   exportSnapshotAsImportId,
   exportSnapshotAsJpg,
-  exportSnapshotAsJpgUrl,
+  exportSnapshotAsImageId,
   exportSnapshotAsZip,
 } from '@/utils/export';
 import { buildEmptyFn, delay } from '@/utils/others';
-import {
-  githubJpgStorage,
-  importStorage,
-  snapshotStorage,
-} from '@/utils/storage';
+import { snapshotStorage } from '@/utils/snapshot';
 import { useTask } from '@/utils/task';
 import type { Snapshot } from '@/utils/types';
-import { getImportUrl, githubUrlToSelfUrl } from '@/utils/url';
+import { getImportUrl, getImagUrl } from '@/utils/url';
 
 const props = withDefaults(
   defineProps<{
@@ -36,6 +32,7 @@ const props = withDefaults(
 );
 
 const router = useRouter();
+const { snapshotImportId, snapshotImageId } = useStorageStore();
 
 const exportJpg = useTask(async () =>
   exportSnapshotAsJpg((await snapshotStorage.getItem(props.snapshot.id))!),
@@ -53,12 +50,12 @@ const previewUrl = computed(() => {
 
 const exportJpgUrl = useTask(async () => {
   await waitShareAgree();
-  const pngUrl = await exportSnapshotAsJpgUrl(
+  const imageId = await exportSnapshotAsImageId(
     (await snapshotStorage.getItem(props.snapshot.id))!,
   );
   showTextDLg({
     title: `分享链接`,
-    content: githubUrlToSelfUrl(pngUrl),
+    content: getImagUrl(imageId),
   });
 });
 
@@ -163,8 +160,8 @@ const copy = async (content: string) => {
       </template>
       <NSpace vertical>
         <NButton
-          v-if="importStorage[snapshot.id]"
-          @click="copy(getImportUrl(importStorage[snapshot.id]))"
+          v-if="snapshotImportId[snapshot.id]"
+          @click="copy(getImportUrl(snapshotImportId[snapshot.id]))"
         >
           复制链接-快照
         </NButton>
@@ -176,8 +173,8 @@ const copy = async (content: string) => {
           生成链接-快照
         </NButton>
         <NButton
-          v-if="githubJpgStorage[snapshot.id]"
-          @click="copy(githubUrlToSelfUrl(githubJpgStorage[snapshot.id]))"
+          v-if="snapshotImageId[snapshot.id]"
+          @click="copy(getImagUrl(snapshotImageId[snapshot.id]))"
         >
           复制链接-图片
         </NButton>
diff --git a/src/components/ErrorDlg.vue b/src/components/ErrorDlg.vue
index ae47214..300fd4f 100644
--- a/src/components/ErrorDlg.vue
+++ b/src/components/ErrorDlg.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { settingsStorage } from '@/utils/storage';
-import { store } from '@/store';
+const globalStore = useGlobalStore();
+const settingsStore = useSettingsStore();
 </script>
 <template>
   <NModal
-    v-model:show="store.githubErrorDlgVisible"
+    v-model:show="globalStore.githubErrorDlgVisible"
     preset="dialog"
     title="生成分享链接失败"
     type="success"
@@ -18,7 +18,7 @@ import { store } from '@/store';
     </div>
   </NModal>
   <NModal
-    v-model:show="store.networkErrorDlgVisible"
+    v-model:show="globalStore.networkErrorDlgVisible"
     preset="dialog"
     title="访问其它域名资源失败"
     type="success"
@@ -53,7 +53,7 @@ import { store } from '@/store';
     </div>
   </NModal>
   <NModal
-    v-model:show="store.wasmErrorDlgVisible"
+    v-model:show="globalStore.wasmErrorDlgVisible"
     preset="dialog"
     title="浏览器不支持或版本过低"
     type="warning"
@@ -69,7 +69,7 @@ import { store } from '@/store';
       >
     </div>
     <div mt-10px>请使用 Chrome119/Edge119/Firefox120 或最新版本</div>
-    <NCheckbox class="mt-10px" v-model:checked="settingsStorage.ignoreWasmWarn">
+    <NCheckbox class="mt-10px" v-model:checked="settingsStore.ignoreWasmWarn">
       不关注一致性, 不再提醒
     </NCheckbox>
   </NModal>
diff --git a/src/main.ts b/src/main.ts
index c2289d3..98265ed 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,17 +4,10 @@ import App from './App.vue';
 import router from './router';
 import { commitLog } from './utils/commit';
 import root from './utils/root';
-import { dataInitTasks } from './utils/storage';
 
-let init = false;
-router.beforeEach(async (to, from, next) => {
-  if (!init) {
-    await Promise.all(dataInitTasks).catch(console.error);
-    init = true;
-  }
-  next();
-});
+const pinia = createPinia();
 const app = createApp(App);
+app.use(pinia);
 app.use(router);
 app.mount(root);
 
diff --git a/src/store.ts b/src/store.ts
deleted file mode 100644
index 130c8d7..0000000
--- a/src/store.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface GlobalStoreState {
-  networkErrorDlgVisible: boolean;
-  githubErrorDlgVisible: boolean;
-  wasmErrorDlgVisible: boolean;
-  wasmSupported?: boolean;
-}
-
-export const store = shallowReactive<GlobalStoreState>({
-  networkErrorDlgVisible: false,
-  githubErrorDlgVisible: false,
-  wasmErrorDlgVisible: false,
-  wasmSupported: undefined,
-});
diff --git a/src/store/global.ts b/src/store/global.ts
new file mode 100644
index 0000000..b94204c
--- /dev/null
+++ b/src/store/global.ts
@@ -0,0 +1,13 @@
+export const useGlobalStore = defineStore('global', () => {
+  const networkErrorDlgVisible = shallowRef(false);
+  const githubErrorDlgVisible = shallowRef(false);
+  const wasmErrorDlgVisible = shallowRef(false);
+  const wasmSupported = shallowRef<boolean>();
+
+  return {
+    networkErrorDlgVisible,
+    githubErrorDlgVisible,
+    wasmErrorDlgVisible,
+    wasmSupported,
+  };
+});
diff --git a/src/store/storage.ts b/src/store/storage.ts
new file mode 100644
index 0000000..6a49cab
--- /dev/null
+++ b/src/store/storage.ts
@@ -0,0 +1,171 @@
+import { isIntString } from '@/utils/others';
+import { getImageId, getImportId } from '@/utils/url';
+
+import localforage from 'localforage';
+import type { Reactive } from 'vue';
+
+interface InitHelper<T> {
+  waitInit: () => Promise<Reactive<T>>;
+  inited: globalThis.Ref<boolean>;
+}
+
+const useAsyncReactiveStorage = <T extends object>(
+  key: string,
+  initialValue: () => T,
+  transform?: (v: T) => T,
+) => {
+  const data = reactive(initialValue());
+  const inited = ref(false);
+  watch(data, async () => {
+    if (!inited.value) {
+      return;
+    }
+    await localforage.setItem(key, toRaw(data));
+  });
+  const task = localforage.getItem(key).then(async (r) => {
+    if (r && typeof r === 'object') {
+      if (transform) {
+        r = transform(r as T);
+      }
+      Object.assign(data, r);
+      await nextTick();
+    }
+    inited.value = true;
+  });
+  const waitInit = async () => {
+    if (!inited.value) {
+      await task;
+    }
+    return data;
+  };
+  const init: InitHelper<T> = {
+    waitInit,
+    inited,
+  };
+  return {
+    data,
+    init,
+  };
+};
+
+interface SettingsState {
+  autoUploadImport: boolean;
+  ignoreUploadWarn: boolean;
+  ignoreWasmWarn: boolean;
+}
+
+export const useSettingsStore = defineStore('settings', () => {
+  const { data, init } = useAsyncReactiveStorage<SettingsState>(
+    'settings',
+    () => ({
+      autoUploadImport: false,
+      ignoreUploadWarn: false,
+      ignoreWasmWarn: false,
+    }),
+  );
+  return {
+    ...toRefs(data),
+    ...init,
+  };
+});
+
+export const useStorageStore = defineStore('storage', () => {
+  // snapshot id -> import time
+  const snapshotImportTime = useAsyncReactiveStorage<Record<string, number>>(
+    'importTime',
+    () => ({}),
+  );
+
+  // snapshot id -> github image id
+  const snapshotImageId = useAsyncReactiveStorage<Record<string, string>>(
+    'githubJpg',
+    () => ({}),
+    (obj) => {
+      Object.keys(obj).forEach((key) => {
+        const v = obj[key];
+        if (v.startsWith('https://')) {
+          delete obj[key];
+          const imageId = getImageId(v);
+          if (imageId) {
+            obj[key] = imageId;
+          }
+        }
+      });
+      return obj;
+    },
+  );
+
+  // snapshot id -> import id
+  const snapshotImportId = useAsyncReactiveStorage<Record<string, number>>(
+    'githubZip',
+    () => ({}),
+    (obj) => {
+      // 转换旧数据
+      Object.keys(obj).forEach((key) => {
+        const v = obj[key] as unknown as string;
+        if (isIntString(v)) {
+          return;
+        }
+        const importId = getImportId(v);
+        if (importId) {
+          obj[key] = importId;
+        } else {
+          delete obj[key];
+        }
+      });
+      return obj;
+    },
+  );
+
+  //  import id -> snapshot id
+  const importSnapshotId = useAsyncReactiveStorage<Record<string, number>>(
+    'url',
+    () => ({}),
+    (obj) => {
+      // 转换旧数据
+      Object.keys(obj).forEach((key) => {
+        if (isIntString(key)) {
+          return;
+        }
+        const importId = getImportId(key);
+        if (importId) {
+          obj[importId] = obj[key];
+        }
+        delete obj[key];
+      });
+      return obj;
+    },
+  );
+
+  const data = {
+    snapshotImportTime,
+    snapshotImageId,
+    snapshotImportId,
+    importSnapshotId,
+  } as const;
+
+  const inited = computed(() => {
+    return Object.values(data).every((v) => v.init.inited);
+  });
+  const waitInit = async () => {
+    if (inited.value) return;
+    await Promise.all(Object.values(data).map((v) => v.init.waitInit()));
+  };
+
+  type Data = typeof data;
+  type NewData = {
+    [K in keyof Data]: Data[K]['data'];
+  };
+
+  const newData = Object.fromEntries(
+    Object.entries(data).map(([key, value]) => {
+      return [key, value.data];
+    }),
+  ) as NewData;
+
+  return {
+    inited,
+    waitInit,
+    ...newData,
+  };
+});
diff --git a/src/utils/dialog.tsx b/src/utils/dialog.tsx
index 80a4279..dda53ac 100644
--- a/src/utils/dialog.tsx
+++ b/src/utils/dialog.tsx
@@ -1,5 +1,4 @@
 import { dialog, message } from './discrete';
-import { settingsStorage } from './storage';
 
 export const showTextDLg = ({ title = `批量分享链接`, content = '' }) => {
   dialog.success({
@@ -39,12 +38,13 @@ export const showTextDLg = ({ title = `批量分享链接`, content = '' }) => {
 };
 
 const NoticeCheckbox = defineComponent(() => {
+  const settingsStore = useSettingsStore();
   return () => {
     return (
       <NCheckbox
-        checked={settingsStorage.ignoreUploadWarn}
+        checked={settingsStore.ignoreUploadWarn}
         onUpdateChecked={(value) => {
-          settingsStorage.ignoreUploadWarn = value;
+          settingsStore.ignoreUploadWarn = value;
         }}
         focusable={false}
       >
@@ -55,7 +55,9 @@ const NoticeCheckbox = defineComponent(() => {
 });
 
 export const waitShareAgree = async () => {
-  if (settingsStorage.ignoreUploadWarn) return;
+  const settingsStore = useSettingsStore();
+  await settingsStore.waitInit();
+  if (settingsStore.ignoreUploadWarn) return;
   return new Promise((resolve, reject) => {
     dialog.warning({
       title: '生成分享链接须知',
diff --git a/src/utils/export.ts b/src/utils/export.ts
index d3e7463..31333a6 100644
--- a/src/utils/export.ts
+++ b/src/utils/export.ts
@@ -3,14 +3,10 @@ import JSZip from 'jszip';
 import pLimit from 'p-limit';
 import { uploadAsset } from './github';
 import { delay } from './others';
-import {
-  githubJpgStorage,
-  importStorage,
-  screenshotStorage,
-  urlStorage,
-} from './storage';
+import { screenshotStorage } from './snapshot';
 import Compressor from 'compressorjs';
 import type { Snapshot } from './types';
+import { getImageId } from './url';
 
 export const snapshotAsZip = async (snapshot: Snapshot) => {
   const zip = new JSZip();
@@ -78,38 +74,44 @@ export const batchZipDownloadZip = async (snapshots: Snapshot[]) => {
   saveAs(batchZipFile, `batch-zip-${snapshots.length}.zip`);
 };
 
-export const exportSnapshotAsJpgUrl = async (snapshot: Snapshot) => {
+export const exportSnapshotAsImageId = async (snapshot: Snapshot) => {
+  const { snapshotImageId } = useStorageStore();
   return (
-    githubJpgStorage[snapshot.id] ??
+    snapshotImageId[snapshot.id] ??
     uploadAsset(
       await snapshotAsJpg(snapshot).then((r) => r.arrayBuffer()),
       'file.jpg',
     ).then((r) => {
-      githubJpgStorage[snapshot.id] = r.href;
-      return r.href;
+      const imageId = getImageId(r.href);
+      if (!imageId) {
+        throw new Error('imageId not found');
+      }
+      snapshotImageId[snapshot.id] = imageId;
+      return imageId;
     })
   );
 };
 
 export const exportSnapshotAsImportId = async (snapshot: Snapshot) => {
+  const { snapshotImportId, importSnapshotId } = useStorageStore();
   return (
-    importStorage[snapshot.id] ||
+    snapshotImportId[snapshot.id] ||
     uploadAsset(
       await snapshotAsZip(snapshot).then((r) => r.arrayBuffer()),
       'file.zip',
     ).then((r) => {
-      importStorage[snapshot.id] = r.id;
-      urlStorage[r.id] = snapshot.id;
+      snapshotImportId[snapshot.id] = r.id;
+      importSnapshotId[r.id] = snapshot.id;
       return r.id;
     })
   );
 };
 
-export const batchCreateJpgUrl = async (snapshots: Snapshot[]) => {
+export const batchCreateImageId = async (snapshots: Snapshot[]) => {
   const limit = pLimit(3);
   return (
     await Promise.allSettled(
-      snapshots.map((s) => limit(() => exportSnapshotAsJpgUrl(s))),
+      snapshots.map((s) => limit(() => exportSnapshotAsImageId(s))),
     )
   ).reduce<string[]>((p, c) => {
     if (c.status == 'fulfilled') {
@@ -136,7 +138,9 @@ export const detectSnapshot = async (importId: number | string) => {
   if (!Number.isSafeInteger(+importId)) {
     return;
   }
-  if (urlStorage[importId]) {
+  const { importSnapshotId, waitInit } = useStorageStore();
+  await waitInit();
+  if (importSnapshotId[importId]) {
     return;
   }
   await fetch(`https://detect.gkd.li/api/detectSnapshot?importId=` + importId);
diff --git a/src/utils/fetch.ts b/src/utils/fetch.ts
index 71ef276..91f3911 100644
--- a/src/utils/fetch.ts
+++ b/src/utils/fetch.ts
@@ -1,6 +1,5 @@
 import { GM_fetch, gmOk } from './gm';
 import { isAllowCorsUrl } from './url';
-import { store } from '@/store';
 
 export const enhanceFetch = async (
   input: RequestInfo | URL,
@@ -17,7 +16,7 @@ export const enhanceFetch = async (
     return GM_fetch(input, init);
   } else if (options?.proxy) {
     if (!u.href.startsWith('https://github.com/')) {
-      store.networkErrorDlgVisible = true;
+      useGlobalStore().networkErrorDlgVisible = true;
       throw new Error(`proxy is not supported`);
     }
     const proxyUrl = new URL(`https://proxy.gkd.li`);
@@ -29,7 +28,7 @@ export const enhanceFetch = async (
       body: request.body,
     });
   } else {
-    store.networkErrorDlgVisible = true;
+    useGlobalStore().networkErrorDlgVisible = true;
     throw new Error(`gm is not supported`);
   }
 };
diff --git a/src/utils/github.ts b/src/utils/github.ts
index a3c6702..da4db07 100644
--- a/src/utils/github.ts
+++ b/src/utils/github.ts
@@ -1,4 +1,3 @@
-import { store } from '@/store';
 import type { PoliciesAsset } from 'user-attachments';
 import { uploadPoliciesAssets } from 'user-attachments';
 import { enhanceFetch } from './fetch';
@@ -15,7 +14,7 @@ export const uploadAsset = async (
     fetch: enhanceFetch,
   }).catch((e) => {
     if (e instanceof Error && e.message === 'not found authenticity_token') {
-      store.githubErrorDlgVisible = true;
+      useGlobalStore().githubErrorDlgVisible = true;
     }
     throw e;
   });
diff --git a/src/utils/import.ts b/src/utils/import.ts
index 62c81f6..095b04d 100644
--- a/src/utils/import.ts
+++ b/src/utils/import.ts
@@ -4,7 +4,7 @@ import pLimit from 'p-limit';
 import { message } from './discrete';
 import { enhanceFetch } from './fetch';
 import { isZipBf } from './file_type';
-import { setSnapshot, snapshotStorage, urlStorage } from './storage';
+import { setSnapshot, snapshotStorage } from './snapshot';
 import type { Snapshot } from './types';
 import { getImportFileUrl, getImportId } from './url';
 
@@ -76,10 +76,12 @@ export const importFromNetwork = async (urls: string[] | string = []) => {
   urls = [...new Set(urls)];
   const limit = pLimit(2);
   let importNum = 0;
+  await useStorageStore().waitInit();
   const result = await Promise.allSettled(
     urls.map((url) => {
       return limit(async () => {
-        const snapshotId = urlStorage[getImportId(url) || ''];
+        const snapshotId =
+          useStorageStore().importSnapshotId[getImportId(url) || ''];
         if (snapshotId) {
           const snapshot = await snapshotStorage.getItem(snapshotId);
           if (snapshot) {
diff --git a/src/utils/others.ts b/src/utils/others.ts
index 08bf111..f48a6fc 100644
--- a/src/utils/others.ts
+++ b/src/utils/others.ts
@@ -123,3 +123,11 @@ export const filterQuery = (
   });
   return newObj;
 };
+
+export const isIntString = (v: string | number | undefined) => {
+  if (typeof v === 'number') return true;
+  return (
+    typeof v === 'string' &&
+    Array.prototype.every.call(v, (c) => '0' <= c && c <= '9')
+  );
+};
diff --git a/src/utils/selector.ts b/src/utils/selector.ts
index 2b06ea4..a14eb86 100644
--- a/src/utils/selector.ts
+++ b/src/utils/selector.ts
@@ -1,4 +1,3 @@
-import { store } from '@/store';
 import {
   Context,
   FastQuery,
@@ -24,20 +23,19 @@ import {
 import matchesInstantiate from '@gkd-kit/wasm_matches';
 import matchesWasmUrl from '@gkd-kit/wasm_matches/dist/mod.wasm?url';
 import { isRawNode } from './node';
-import { settingsStorage } from './storage';
 import type { RawNode } from './types';
 
 export const wasmLoadTask = matchesInstantiate(fetch(matchesWasmUrl))
   .then((mod) => {
     const toMatches = mod.exports.toMatches;
     updateWasmToMatches(toMatches as any);
-    store.wasmSupported = true;
+    useGlobalStore().wasmSupported = true;
     if (import.meta.env.PROD) {
       console.log('use wasm matches');
     }
   })
   .catch((e) => {
-    store.wasmSupported = false;
+    useGlobalStore().wasmSupported = false;
     console.error(e);
     if (import.meta.env.PROD) {
       console.log('use js matches');
@@ -131,9 +129,9 @@ const matchOption = new MatchOption(false, false);
 export const parseSelector = (source: string): GkdSelector => {
   const s = Selector.Companion.parse(source);
   for (const exp of s.binaryExpressions) {
-    if (exp.operator.value.key == '~=' && !store.wasmSupported) {
-      if (!settingsStorage.ignoreWasmWarn) {
-        store.wasmErrorDlgVisible = true;
+    if (exp.operator.value.key == '~=' && !useGlobalStore().wasmSupported) {
+      if (!useSettingsStore().ignoreWasmWarn) {
+        useGlobalStore().wasmErrorDlgVisible = true;
         break;
       }
     }
diff --git a/src/utils/snapshot.ts b/src/utils/snapshot.ts
new file mode 100644
index 0000000..d956f71
--- /dev/null
+++ b/src/utils/snapshot.ts
@@ -0,0 +1,96 @@
+import localforage from 'localforage';
+import type { Snapshot } from './types';
+
+const useStorage = <T>(options: LocalForageOptions = {}) => {
+  options.driver ??= localforage.INDEXEDDB;
+  const storage = localforage.createInstance(options);
+  const setItem = async (key: string | number, value: T) => {
+    return storage.setItem(key.toString(), value);
+  };
+  const getItem = async (key: string | number) => {
+    return storage.getItem<T>(key.toString());
+  };
+  const getAllItems = async (): Promise<T[]> => {
+    return Promise.all(
+      (await storage.keys()).map((k) => storage.getItem(k) as Promise<T>),
+    );
+  };
+  const removeItem = async (key: string | number) => {
+    return storage.removeItem(key.toString());
+  };
+
+  const hasItem = async (key: string | number) => {
+    const keyStr = key.toString();
+    return storage.keys().then((r) => r.includes(keyStr));
+  };
+  const keys = async () => {
+    return storage.keys();
+  };
+
+  return {
+    keys,
+    hasItem,
+    getItem,
+    setItem,
+    removeItem,
+    getAllItems,
+  };
+};
+
+export const snapshotStorage = useStorage<Snapshot>({
+  name: `snapshot`,
+  version: 1,
+});
+
+const snapshotSetItem = snapshotStorage.setItem;
+snapshotStorage.setItem = async (key, value) => {
+  const shallowValue = { ...value, nodes: [] };
+  await shallowSnapshotStorage.setItem(key, shallowValue);
+  return snapshotSetItem(key, value);
+};
+
+const snapshotRemoveItem = snapshotStorage.removeItem;
+snapshotStorage.removeItem = async (key) => {
+  const { snapshotImportTime } = useStorageStore();
+  await Promise.all([
+    snapshotRemoveItem(key),
+    shallowSnapshotStorage.removeItem(key),
+    screenshotStorage.removeItem(key),
+    snapshotImportTime[key] && delete snapshotImportTime[key],
+  ]);
+};
+
+export const shallowSnapshotStorage = useStorage<Snapshot>({
+  name: `shallowSnapshot`,
+  version: 1,
+});
+
+export const screenshotStorage = useStorage<ArrayBuffer>({
+  name: `screenshot`,
+  version: 1,
+});
+
+export const setSnapshot = async (snapshot: Snapshot, bf: ArrayBuffer) => {
+  const {
+    importSnapshotId,
+    snapshotImageId,
+    snapshotImportId,
+    snapshotImportTime,
+  } = useStorageStore();
+  Object.entries(importSnapshotId).forEach(([k, v]) => {
+    if (v == snapshot.id) {
+      delete importSnapshotId[k];
+    }
+  });
+  if (snapshotImageId[snapshot.id]) {
+    delete snapshotImageId[snapshot.id];
+  }
+  if (snapshotImportId[snapshot.id]) {
+    delete snapshotImportId[snapshot.id];
+  }
+  snapshotImportTime[snapshot.id] = Date.now();
+  await Promise.all([
+    snapshotStorage.setItem(snapshot.id, snapshot),
+    screenshotStorage.setItem(snapshot.id, bf),
+  ]);
+};
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
deleted file mode 100644
index 2c10cb8..0000000
--- a/src/utils/storage.ts
+++ /dev/null
@@ -1,217 +0,0 @@
-import localforage from 'localforage';
-import type { Snapshot } from './types';
-import { getImportId } from './url';
-
-const useStorage = <T>(options: LocalForageOptions = {}) => {
-  options.driver ??= localforage.INDEXEDDB;
-  const storage = localforage.createInstance(options);
-  const setItem = async (key: string | number, value: T) => {
-    return storage.setItem(key.toString(), value);
-  };
-  const getItem = async (key: string | number) => {
-    return storage.getItem<T>(key.toString());
-  };
-  const getAllItems = async (): Promise<T[]> => {
-    return Promise.all(
-      (await storage.keys()).map((k) => storage.getItem(k) as Promise<T>),
-    );
-  };
-  const removeItem = async (key: string | number) => {
-    return storage.removeItem(key.toString());
-  };
-
-  const hasItem = async (key: string | number) => {
-    const keyStr = key.toString();
-    return storage.keys().then((r) => r.includes(keyStr));
-  };
-  const keys = async () => {
-    return storage.keys();
-  };
-
-  return {
-    keys,
-    hasItem,
-    getItem,
-    setItem,
-    removeItem,
-    getAllItems,
-  };
-};
-
-export const dataInitTasks: Promise<void>[] = [];
-
-const useReactiveStorage = <T extends object>(
-  key: string,
-  initialValue: T,
-  transform?: (v: T) => T,
-) => {
-  const store = reactive(initialValue);
-  let storeInited = false;
-  watch(store, async () => {
-    if (!storeInited) return;
-    await localforage.setItem(key, toRaw(store));
-  });
-  const task = localforage.getItem(key).then((r) => {
-    if (r) {
-      if (transform) {
-        r = transform(r as T);
-      }
-      Object.assign(store, r);
-    }
-    storeInited = true;
-  });
-  dataInitTasks.push(task);
-  return store;
-};
-
-export const snapshotStorage = useStorage<Snapshot>({
-  name: `snapshot`,
-  version: 1,
-});
-
-const snapshotSetItem = snapshotStorage.setItem;
-snapshotStorage.setItem = async (key, value) => {
-  const shallowValue = { ...value, nodes: [] };
-  await shallowSnapshotStorage.setItem(key, shallowValue);
-  return snapshotSetItem(key, value);
-};
-
-const snapshotRemoveItem = snapshotStorage.removeItem;
-snapshotStorage.removeItem = async (key) => {
-  await Promise.all([
-    snapshotRemoveItem(key),
-    shallowSnapshotStorage.removeItem(key),
-    screenshotStorage.removeItem(key),
-    // @ts-ignore
-    importTimeStorage[key] && delete importTimeStorage[key],
-  ]);
-};
-
-export const shallowSnapshotStorage = useStorage<Snapshot>({
-  name: `shallowSnapshot`,
-  version: 1,
-});
-
-export const screenshotStorage = useStorage<ArrayBuffer>({
-  name: `screenshot`,
-  version: 1,
-});
-
-export const setSnapshot = async (snapshot: Snapshot, bf: ArrayBuffer) => {
-  Object.entries(urlStorage).forEach(([k, v]) => {
-    if (v == snapshot.id) {
-      delete urlStorage[k];
-    }
-  });
-  if (githubJpgStorage[snapshot.id]) {
-    delete githubJpgStorage[snapshot.id];
-  }
-  if (importStorage[snapshot.id]) {
-    delete importStorage[snapshot.id];
-  }
-  importTimeStorage[snapshot.id] = Date.now();
-  await Promise.all([
-    snapshotStorage.setItem(snapshot.id, snapshot),
-    screenshotStorage.setItem(snapshot.id, bf),
-  ]);
-};
-
-export const cacheStorage = useStorage({
-  name: `cache`,
-  version: 1,
-});
-
-const isIntString = (v: string | number) => {
-  if (typeof v === 'number') return true;
-  if (!v) return false;
-  return Array.prototype.every.call(v, (c) => '0' <= c && c <= '9');
-};
-
-/**
- * key: import id
- *
- * value: snapshot id
- */
-export const urlStorage = useReactiveStorage<Record<string, number>>(
-  `url`,
-  {},
-  (obj) => {
-    // 转换旧数据
-    Object.keys(obj).forEach((url) => {
-      if (isIntString(url)) {
-        return;
-      }
-      const importId = getImportId(url);
-      if (importId) {
-        obj[importId] = obj[url];
-      }
-      delete obj[url];
-    });
-    return obj;
-  },
-);
-
-export const importTimeStorage = useReactiveStorage<Record<number, number>>(
-  'importTime',
-  {},
-);
-
-export const githubJpgStorage = useReactiveStorage<Record<number, string>>(
-  `githubJpg`,
-  {},
-);
-
-/**
- * key: snapshot id
- *
- * value: import id
- */
-export const importStorage = useReactiveStorage<
-  Record<number | string, number>
->(`githubZip`, {}, (obj) => {
-  // 转换旧数据
-  Object.entries(obj).forEach(([k, _v]) => {
-    const v = _v as unknown as string;
-    if (isIntString(v)) {
-      return;
-    }
-    const n1 = getImportId(v);
-    if (n1) {
-      obj[k] = +n1;
-    } else {
-      delete obj[k];
-    }
-  });
-  return obj;
-});
-export interface SettingsState {
-  autoUploadImport: boolean;
-  ignoreUploadWarn: boolean;
-  ignoreWasmWarn: boolean;
-}
-
-export const settingsStorage = useReactiveStorage<SettingsState>('settings', {
-  autoUploadImport: false,
-  ignoreUploadWarn: false,
-  ignoreWasmWarn: false,
-});
-
-const snapshotsKey = 'snapshots-cache-version';
-const snapshotsVersion = 'v2';
-if (localStorage.getItem(snapshotsKey) !== snapshotsVersion) {
-  localStorage.setItem(snapshotsKey, snapshotsVersion);
-  Promise.all(dataInitTasks).then(async () => {
-    const r = await fetch(
-      `https://registry.npmmirror.com/@gkd-kit/assets/latest/files/assets/snapshots-${snapshotsVersion}.json`,
-    );
-    const list: { id: number; import_id: number }[] = await r.json();
-    list.forEach((item) => {
-      if (!importStorage[item.id]) {
-        importStorage[item.id] = item.import_id;
-      }
-      if (!urlStorage[item.import_id]) {
-        urlStorage[item.import_id] = item.id;
-      }
-    });
-  });
-}
diff --git a/src/utils/table.tsx b/src/utils/table.tsx
index 22f8240..b141ba7 100644
--- a/src/utils/table.tsx
+++ b/src/utils/table.tsx
@@ -3,7 +3,6 @@ import type { TableBaseColumn } from 'naive-ui/es/data-table/src/interface';
 import { vRect } from './directives';
 import { getAppInfo, getDevice } from './node';
 import { copy } from './others';
-import { importTimeStorage } from './storage';
 import type { Snapshot } from './types';
 import { withDirectives } from 'vue';
 
@@ -40,6 +39,7 @@ export const renderDevice = (row: Snapshot) => {
 };
 
 export const useSnapshotColumns = () => {
+  const { snapshotImportTime } = useStorageStore();
   const ctimeCol = shallowReactive<TableBaseColumn<Snapshot>>({
     key: `id`,
     title: `创建时间`,
@@ -60,12 +60,12 @@ export const useSnapshotColumns = () => {
     sortOrder: false,
     sorter(rowA, rowB) {
       return (
-        (importTimeStorage[rowA.id] || rowA.id) -
-        (importTimeStorage[rowB.id] || rowB.id)
+        (snapshotImportTime[rowA.id] || rowA.id) -
+        (snapshotImportTime[rowB.id] || rowB.id)
       );
     },
     render(row) {
-      return dayjs(importTimeStorage[row.id] || row.id).format(
+      return dayjs(snapshotImportTime[row.id] || row.id).format(
         'MM-DD HH:mm:ss',
       );
     },
diff --git a/src/utils/url.ts b/src/utils/url.ts
index bd30905..1706ef5 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -1,3 +1,9 @@
+export const isValidUrl = (url: string): URL | undefined => {
+  try {
+    return new URL(url);
+  } catch {}
+};
+
 const corsOkOrigins = new Set([
   location.origin,
   `https://cdn.jsdelivr.net`,
@@ -50,36 +56,25 @@ export const getImportId = (url: string) => {
   }
 };
 
+const imageUrlReg1 =
+  /^https:\/\/github\.com\/gkd-kit\/inspect\/assets\/[0-9]+\/([0-9a-z-]+)$/;
+const imageUrlReg2 =
+  /^https:\/\/github\.com\/user-attachments\/assets\/([0-9a-z-]+)$/;
+export const getImageId = (u: string) => {
+  return u.match(imageUrlReg1)?.[1] || u.match(imageUrlReg2)?.[1];
+};
+
 export const getImportUrl = (importId: number | string) => {
   return location.origin + `/i/${importId}`;
 };
+export const getImagUrl = (imageId: number | string) => {
+  return `https://e.gkd.li/${imageId}`;
+};
 
 export const getImportFileUrl = (importId: number | string) => {
   return `https://github.com/user-attachments/files/${importId}/file.zip`;
 };
 
-const githubImageUrlReg =
-  /^https:\/\/github\.com\/gkd-kit\/inspect\/assets\/([0-9]+)\/([0-9a-z-]+)$/;
-
-const assetBaseUrl = `https://github.com/user-attachments/assets/`;
-
-export const githubUrlToSelfUrl = (u: string): string => {
-  if (u.startsWith(assetBaseUrl)) {
-    return `https://e.gkd.li/` + u.substring(assetBaseUrl.length);
-  }
-  const { 1: userId, 2: imgAssetId } = u.match(githubImageUrlReg) || [];
-  if (userId && imgAssetId) {
-    return `https://m.gkd.li/${userId}/${imgAssetId}`;
-  } else {
-    console.error(
-      `github url ${u} should come from gkd-kit/inspect files/assets`,
-    );
-  }
-  return u;
-};
-
-export const isValidUrl = (url: string): URL | undefined => {
-  try {
-    return new URL(url);
-  } catch {}
+export const getImageFileUrl = (imageId: number | string) => {
+  return `https://github.com/user-attachments/assets/${imageId}`;
 };
diff --git a/src/views/ImportPage.vue b/src/views/ImportPage.vue
index 31ea954..d86ac93 100644
--- a/src/views/ImportPage.vue
+++ b/src/views/ImportPage.vue
@@ -4,7 +4,7 @@ import { detectSnapshot } from '@/utils/export';
 import { gmOk } from '@/utils/gm';
 import { importFromNetwork } from '@/utils/import';
 import { delay, filterQuery } from '@/utils/others';
-import { importStorage, snapshotStorage, urlStorage } from '@/utils/storage';
+import { snapshotStorage } from '@/utils/snapshot';
 import { getImportFileUrl, getImportId, isValidUrl } from '@/utils/url';
 
 const route = useRoute();
@@ -33,15 +33,17 @@ onMounted(async () => {
     });
     return;
   }
+  const { importSnapshotId, snapshotImportId, waitInit } = useStorageStore();
+  await waitInit();
   if (importId) {
-    const snapshotId = urlStorage[importId];
+    const snapshotId = importSnapshotId[importId];
     if (snapshotId) {
       const snapshot = await snapshotStorage.getItem(snapshotId);
       if (snapshot) {
         goToSnapshot(snapshotId);
         return;
       } else {
-        delete urlStorage[importId];
+        delete importSnapshotId[importId];
       }
     }
   }
@@ -57,8 +59,8 @@ onMounted(async () => {
       if (snapshot?.id) {
         if (importId) {
           detectSnapshot(importId);
-          urlStorage[importId] = snapshot.id;
-          importStorage[snapshot.id] = importId;
+          importSnapshotId[importId] = snapshot.id;
+          snapshotImportId[snapshot.id] = importId;
         }
         loading.value = false;
         await delay(500);
diff --git a/src/views/home/HomePage.vue b/src/views/home/HomePage.vue
index 849a3d6..210ad6b 100644
--- a/src/views/home/HomePage.vue
+++ b/src/views/home/HomePage.vue
@@ -4,26 +4,24 @@ import { toValidURL } from '@/utils/check';
 import { showTextDLg, waitShareAgree } from '@/utils/dialog';
 import { dialog } from '@/utils/discrete';
 import {
-  batchCreateJpgUrl,
+  batchCreateImageId,
   batchCreateZipUrl,
   batchJpgDownloadZip,
   batchZipDownloadZip,
 } from '@/utils/export';
 import { importFromLocal, importFromNetwork } from '@/utils/import';
 import { getAppInfo } from '@/utils/node';
-import {
-  settingsStorage,
-  shallowSnapshotStorage,
-  snapshotStorage,
-} from '@/utils/storage';
+import { shallowSnapshotStorage, snapshotStorage } from '@/utils/snapshot';
 import { renderDevice, useSnapshotColumns } from '@/utils/table';
 import { useTask } from '@/utils/task';
 import type { Snapshot } from '@/utils/types';
-import { githubUrlToSelfUrl } from '@/utils/url';
+import { getImagUrl } from '@/utils/url';
 import type { DataTableColumns, PaginationProps } from 'naive-ui';
 import type { SortState } from 'naive-ui/es/data-table/src/interface';
 import BuildShareDlg from './BuildShareDlg.vue';
 
+const settingsStore = useSettingsStore();
+
 const snapshots = shallowRef<Snapshot[]>([]);
 const loading = shallowRef(true);
 const updateSnapshots = async () => {
@@ -214,9 +212,9 @@ const batchDownloadZip = useTask(async () => {
 
 const batchShareJpgUrl = useTask(async () => {
   await waitShareAgree();
-  const pngUrls = await batchCreateJpgUrl(await checkedSnapshots());
+  const imageIds = await batchCreateImageId(await checkedSnapshots());
   showTextDLg({
-    content: pngUrls.map((s) => githubUrlToSelfUrl(s)).join(`\n`) + `\n`,
+    content: imageIds.map((s) => getImagUrl(s)).join(`\n`) + `\n`,
   });
 });
 const batchShareZipUrl = useTask(async () => {
@@ -442,16 +440,16 @@ const settingsDlgShow = shallowRef(false);
     style="width: 600px"
     @positiveClick="settingsDlgShow = false"
   >
-    <NCheckbox v-model:checked="settingsStorage.ignoreUploadWarn">
+    <NCheckbox v-model:checked="settingsStore.ignoreUploadWarn">
       关闭生成分享链接弹窗提醒
     </NCheckbox>
     <div h-1px my-10px bg="#eee"></div>
-    <NCheckbox v-model:checked="settingsStorage.ignoreWasmWarn">
+    <NCheckbox v-model:checked="settingsStore.ignoreWasmWarn">
       关闭浏览器版本正则表达式 WASM(GC) 提醒
     </NCheckbox>
     <div h-1px my-10px bg="#eee"></div>
     <div flex gap-10px>
-      <NSwitch v-model:value="settingsStorage.autoUploadImport" />
+      <NSwitch v-model:value="settingsStore.autoUploadImport" />
       <div>打开快照页面自动生成分享链接(请确保不含隐私)</div>
     </div>
   </NModal>
diff --git a/src/views/snapshot/SearchCard.vue b/src/views/snapshot/SearchCard.vue
index d92cd73..e7db963 100644
--- a/src/views/snapshot/SearchCard.vue
+++ b/src/views/snapshot/SearchCard.vue
@@ -1,20 +1,17 @@
 <script setup lang="ts">
+import DraggableCard from '@/components/DraggableCard.vue';
 import { message } from '@/utils/discrete';
 import { errorTry, errorWrap } from '@/utils/error';
 import { getAppInfo, getNodeLabel } from '@/utils/node';
 import { buildEmptyFn, copy } from '@/utils/others';
 import type { GkdSelector } from '@/utils/selector';
 import { parseSelector, wasmLoadTask } from '@/utils/selector';
-import { githubJpgStorage, importStorage } from '@/utils/storage';
+import { gkdWidth, vw } from '@/utils/size';
 import type { RawNode, Snapshot } from '@/utils/types';
-import { getImportUrl, githubUrlToSelfUrl } from '@/utils/url';
+import { getImagUrl, getImportUrl } from '@/utils/url';
+import { SelectorCheckException } from '@gkd-kit/selector';
 import dayjs from 'dayjs';
 import * as base64url from 'universal-base64url';
-import DraggableCard from '@/components/DraggableCard.vue';
-import { gkdWidth, vw } from '@/utils/size';
-import { SelectorCheckException } from '@gkd-kit/selector';
-
-const route = useRoute();
 
 const props = withDefaults(
   defineProps<{
@@ -33,6 +30,10 @@ const props = withDefaults(
   },
 );
 
+const route = useRoute();
+const { snapshotImportTime, snapshotImportId, snapshotImageId } =
+  useStorageStore();
+
 const selectorText = shallowRef(``);
 type SearchResult =
   | {
@@ -155,11 +156,8 @@ const generateRules = errorTry(
     selector: GkdSelector;
     nodes: RawNode[][];
   }) => {
-    let jpgUrl = githubJpgStorage[props.snapshot.id];
-    if (jpgUrl) {
-      jpgUrl = githubUrlToSelfUrl(jpgUrl);
-    }
-    const importId = importStorage[props.snapshot.id];
+    const imageId = snapshotImageId[props.snapshot.id];
+    const importId = snapshotImportId[props.snapshot.id];
     const zipUrl = importId ? getImportUrl(importId) : undefined;
 
     const s = result.selector;
@@ -183,7 +181,7 @@ const generateRules = errorTry(
               quickFind: quickFind || undefined,
               activityIds: props.snapshot.activityId,
               matches: s.toString(),
-              exampleUrls: jpgUrl,
+              exampleUrls: getImagUrl(imageId),
               snapshotUrls: zipUrl,
             },
           ],
@@ -196,11 +194,11 @@ const generateRules = errorTry(
 );
 const enableSearchBySelector = shallowRef(true);
 const hasZipId = computed(() => {
-  return importStorage[props.snapshot.id];
+  return snapshotImportId[props.snapshot.id];
 });
 const shareResult = (result: SearchResult) => {
   if (!hasZipId.value) return;
-  const importUrl = new URL(getImportUrl(importStorage[props.snapshot.id]));
+  const importUrl = new URL(getImportUrl(snapshotImportId[props.snapshot.id]));
   if (typeof result.selector == 'object') {
     importUrl.searchParams.set(
       'gkd',
diff --git a/src/views/snapshot/SnapshotPage.vue b/src/views/snapshot/SnapshotPage.vue
index 2304feb..54ca858 100644
--- a/src/views/snapshot/SnapshotPage.vue
+++ b/src/views/snapshot/SnapshotPage.vue
@@ -4,18 +4,13 @@ import { loadingBar, message } from '@/utils/discrete';
 import {
   detectSnapshot,
   exportSnapshotAsImportId,
-  exportSnapshotAsJpgUrl,
+  exportSnapshotAsImageId,
 } from '@/utils/export';
 import { gmOk } from '@/utils/gm';
 import { getAppInfo, listToTree } from '@/utils/node';
 import { delay } from '@/utils/others';
 import type { GkdSelector } from '@/utils/selector';
-import {
-  importStorage,
-  screenshotStorage,
-  settingsStorage,
-  snapshotStorage,
-} from '@/utils/storage';
+import { screenshotStorage, snapshotStorage } from '@/utils/snapshot';
 import type { RawNode, Snapshot } from '@/utils/types';
 import AttrCard from './AttrCard.vue';
 import MultiFocusCard from './MultiFocusCard.vue';
@@ -33,6 +28,7 @@ const AsyncTrackGraph = (() => {
 const route = useRoute();
 const router = useRouter();
 const title = useTitle();
+const settingsStore = useSettingsStore();
 
 const snapshotId = computed(() => String(route.params.snapshotId || ``));
 const showSize = computed(() => {
@@ -45,18 +41,20 @@ const showSize = computed(() => {
 
 const screenshotUrl = shallowRef(``);
 const snapshot = shallowRef<Snapshot>();
+const { snapshotImportId, waitInit } = useStorageStore();
 
 onMounted(async () => {
   if (!Number.isSafeInteger(+snapshotId.value)) {
     message.error('非法快照ID');
     return;
   }
+  await waitInit();
   const localSnapshot = await snapshotStorage.getItem(snapshotId.value);
   if (!localSnapshot) {
     loadingBar.start();
     try {
       const importId: number | null =
-        importStorage[snapshotId.value] ||
+        snapshotImportId[snapshotId.value] ||
         (await fetch(
           'https://detect.gkd.li/api/getImportId?id=' + snapshotId.value,
         ).then((r) => r.json()));
@@ -74,16 +72,16 @@ onMounted(async () => {
     return;
   }
   setTimeout(() => {
-    const importId = importStorage[localSnapshot.id];
+    const importId = snapshotImportId[localSnapshot.id];
     if (importId) {
       detectSnapshot(importId);
     }
   }, 1000);
-  if (gmOk() && settingsStorage.autoUploadImport) {
+  if (gmOk() && (await settingsStore.waitInit()).autoUploadImport) {
     // 静默生成 jpg/zip
     setTimeout(async () => {
-      exportSnapshotAsJpgUrl(localSnapshot);
-      if (!importStorage[localSnapshot.id]) {
+      exportSnapshotAsImageId(localSnapshot);
+      if (!snapshotImportId[localSnapshot.id]) {
         exportSnapshotAsImportId(
           (await snapshotStorage.getItem(snapshotId.value))!,
         );