perf: 代码冗余&逻辑错误&测试脚本

package.json

@@ -11,6 +11,11 @@
     "build-only": "vite build",
     "test": "vitest",
     "test:run": "vitest run",
+    "test:watch": "vitest watch",
+    "test:coverage": "vitest run --coverage",
+    "test:report": "vitest run --reporter=junit --reporter=verbose",
+    "test:ui": "vitest --ui",
+    "test:debug": "vitest run --inspect-brk",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint --cache --fix .",
     "format": "prettier --cache --write --ignore-unknown .",

src/components/ActionCard.vue

@@ -105,13 +105,18 @@ const copy = async (content: string) => {
 </script>
 <template>
   <div flex gap-16px>
-    <a v-if="showPreview" flex target="_blank" :href="previewUrl">
-      <NButton text title="查看">
-        <template #icon>
-          <SvgIcon name="code" />
-        </template>
-      </NButton>
-    </a>
+    <NTooltip v-if="showPreview">
+      <template #trigger>
+        <a flex target="_blank" rel="noopener noreferrer" :href="previewUrl">
+          <NButton text>
+            <template #icon>
+              <SvgIcon name="code" />
+            </template>
+          </NButton>
+        </a>
+      </template>
+      查看
+    </NTooltip>
 
     <NPopover v-if="showExport">
       <template #trigger>

src/components/plus/device/DeviceSnapshotGroups.vue

@@ -8,6 +8,10 @@ const props = defineProps<{
   snapshots: Snapshot[];
   checkedRowKeys: number[];
   refreshSnapshots: () => Promise<void>;
+  previewSnapshot: {
+    loading: Record<number, boolean | undefined>;
+    invoke: (row: Snapshot) => unknown;
+  };
 }>();
 
 const emit = defineEmits<{
@@ -26,15 +30,14 @@ const {
   checkedSet,
   snapshotViewedTime,
   batchDelete,
+  deleteSnapshot,
   previewUrlMap,
   previewLoadingMap,
   previewErrorMap,
-  previewSnapshot,
   downloadSnapshotZip,
   downloadSnapshotImage,
   shareSnapshotZipUrl,
   shareSnapshotImageUrl,
-  deleteSnapshot,
   ensurePreview,
   getGroupSnapshotIds,
   getActivitySnapshotIds,
@@ -230,15 +233,21 @@ const {
                       </div>
                     </div>
                   </NPopover>
-                  <NButton
-                    text
-                    size="small"
-                    class="ml-auto shrink-0"
-                    :loading="previewSnapshot.loading[item.id]"
-                    @click="previewSnapshot.invoke(item)"
-                  >
-                    <template #icon><SvgIcon name="code" /></template>
-                  </NButton>
+                  <NTooltip>
+                    <template #trigger>
+                      <span class="ml-auto inline-flex shrink-0">
+                        <NButton
+                          text
+                          size="small"
+                          :loading="props.previewSnapshot.loading[item.id]"
+                          @click="props.previewSnapshot.invoke(item)"
+                        >
+                          <template #icon><SvgIcon name="code" /></template>
+                        </NButton>
+                      </span>
+                    </template>
+                    查看
+                  </NTooltip>
                   <NPopover>
                     <template #trigger>
                       <NButton text>

src/components/plus/home/HomeSnapshotGroups.vue

@@ -2,7 +2,6 @@
 import { computed, toRef } from 'vue';
 import ActionCard from '@/components/ActionCard.vue';
 import DeviceControlTools from '@/components/plus/device/DeviceControlTools.vue';
-import SvgIcon from '@/components/SvgIcon.vue';
 import { useHomePlus } from '@/composables/plus/useHomePlus';
 
 const props = defineProps<{
@@ -50,7 +49,6 @@ const {
   getActivityRemarkKey,
   openGroupRemarkModal,
   saveGroupRemark,
-  goToSnapshot,
   getItemShortTimeText,
   getItemCreateTimeText,
   getItemImportTimeText,
@@ -317,17 +315,9 @@ const {
                         </div>
                       </div>
                     </NPopover>
-                    <NButton
-                      text
-                      size="small"
-                      class="ml-auto shrink-0"
-                      @click="goToSnapshot(item.id)"
-                    >
-                      <template #icon><SvgIcon name="code" /></template>
-                    </NButton>
                     <ActionCard
+                      class="ml-auto shrink-0"
                       :snapshot="item"
-                      :showPreview="false"
                       :onDelete="updateSnapshots"
                     />
                   </div>

src/composables/plus/useDevicePlus.ts

@@ -32,7 +32,6 @@ export function useDevicePlus(options: UseDevicePlusOptions) {
   type SnapshotGroup = ReturnType<typeof buildGroupedSnapshots>[number];
   type SnapshotActivity = SnapshotGroup['activities'][number];
 
-  const router = useRouter();
   const { settingsStore, snapshotImportTime, snapshotViewedTime } =
     useStorageStore();
   const deviceLink = useStorage('device_link', '');
@@ -137,20 +136,6 @@ export function useDevicePlus(options: UseDevicePlusOptions) {
       cacheLimit: previewCacheLimit,
     });
 
-  const previewSnapshot = useBatchTask(
-    async (row: Snapshot) => {
-      await ensureLocalSnapshotData(row);
-      snapshotViewedTime[row.id] = Date.now();
-      window.open(
-        router.resolve({
-          name: 'snapshot',
-          params: { snapshotId: row.id },
-        }).href,
-      );
-    },
-    (row) => row.id,
-  );
-
   const downloadSnapshotZip = useBatchTask(
     async (row: Snapshot) => {
       await ensureLocalSnapshotData(row);
@@ -198,30 +183,29 @@ export function useDevicePlus(options: UseDevicePlusOptions) {
 
   const deleteSnapshot = useBatchTask(
     async (row: Snapshot) => {
-      await new Promise((resolve, reject) => {
+      const confirmed = await new Promise<boolean>((res) => {
         dialog.warning({
-          title: '删除',
-          content: '是否删除此快照？',
+          title: '删除快照',
+          content: `是否确认删除快照 ID: ${row.id}？此操作不可恢复。`,
+          positiveText: '确认删除',
           negativeText: '取消',
-          positiveText: '确认',
-          onClose: reject,
-          onEsc: reject,
-          onMaskClick: reject,
-          onNegativeClick: reject,
-          onPositiveClick: resolve,
+          onPositiveClick: () => res(true),
+          onNegativeClick: () => res(false),
+          onClose: () => res(false),
         });
       });
-
+      if (!confirmed) return;
       await api.deleteSnapshot({ id: row.id });
-      await snapshotStorage.removeItem(row.id);
-      await screenshotStorage.removeItem(row.id);
-      message.success('快照删除成功');
-      await options.refreshSnapshots();
+      await Promise.all([
+        snapshotStorage.removeItem(row.id),
+        screenshotStorage.removeItem(row.id),
+      ]);
       options.checkedRowKeys.value = options.checkedRowKeys.value.filter(
         (id) => id !== row.id,
       );
+      message.success('删除成功');
     },
-    (row) => row.id,
+    (r) => r.id,
   );
 
   const batchDelete = useTask(async () => {
@@ -287,15 +271,14 @@ export function useDevicePlus(options: UseDevicePlusOptions) {
     checkedSet,
     snapshotViewedTime,
     batchDelete,
+    deleteSnapshot,
     previewUrlMap,
     previewLoadingMap,
     previewErrorMap,
-    previewSnapshot,
     downloadSnapshotZip,
     downloadSnapshotImage,
     shareSnapshotZipUrl,
     shareSnapshotImageUrl,
-    deleteSnapshot,
     ensurePreview,
     getGroupSnapshotIds,
     getActivitySnapshotIds,

src/composables/plus/useHomePlus.ts

@@ -3,7 +3,6 @@ import { computed, shallowReactive, shallowRef, toValue, watch } from 'vue';
 import type { MaybeRefOrGetter, Ref } from 'vue';
 import { usePreviewCache } from '@/composables/plus/usePreviewCache';
 import { getAppInfo, getDevice } from '@/utils/node';
-import { filterQuery } from '@/utils/others';
 import { buildGroupedSnapshots } from '@/utils/plus/snapshotGroup';
 import { screenshotStorage } from '@/utils/snapshot';
 
@@ -13,8 +12,6 @@ interface UseHomePlusOptions {
 }
 
 export function useHomePlus(options: UseHomePlusOptions) {
-  const route = useRoute();
-  const router = useRouter();
   const { settingsStore, snapshotImportTime, snapshotViewedTime } =
     useStorageStore();
 
@@ -196,17 +193,6 @@ export function useHomePlus(options: UseHomePlusOptions) {
       cacheLimit: previewCacheLimit,
     });
 
-  const goToSnapshot = (snapshotId: number) => {
-    snapshotViewedTime[snapshotId] = Date.now();
-    window.open(
-      router.resolve({
-        name: 'snapshot',
-        params: { snapshotId },
-        query: filterQuery(route.query, ['str', 'gkd']),
-      }).href,
-    );
-  };
-
   const getItemShortTimeText = (item: Snapshot) =>
     dayjs(item.id).format('MM-DD HH:mm:ss');
   const getItemCreateTimeText = (item: Snapshot) =>
@@ -245,7 +231,6 @@ export function useHomePlus(options: UseHomePlusOptions) {
     getActivityRemarkKey,
     openGroupRemarkModal,
     saveGroupRemark,
-    goToSnapshot,
     getItemShortTimeText,
     getItemCreateTimeText,
     getItemImportTimeText,

src/router.ts

@@ -97,12 +97,12 @@ const router = createRouter({
     },
     {
       path: '/selector',
-      component: recordModule(() => import('@/views/plus/SelectorPage.vue')),
+      component: recordModule(() => import('@/views/SelectorPage.vue')),
       meta: { title: '选择器' },
     },
     {
       path: '/svg',
-      component: recordModule(() => import('@/views/plus/SvgPage.vue')),
+      component: recordModule(() => import('@/views/SvgPage.vue')),
       meta: { title: 'SVG' },
     },
     {