refactor: store

.github/workflows/deploy.yml

@@ -1,6 +1,7 @@
 name: deploy
 
 on:
+  workflow_dispatch:
   push:
     branches: ['main']
     paths-ignore:

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": "[email protected].1",
+  "packageManager": "[email protected].2",
   "simple-git-hooks": {
     "pre-commit": "pnpm exec lint-staged"
   },

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/],

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>

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>

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);
 

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,
+  };
+});