src.diff

diff --git a/src/App.vue b/src/App.vue
index f49320a..26ff8ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,10 @@
 import { dateZhCN, zhCN, type GlobalThemeOverrides } from 'naive-ui';
 import { RouterView } from 'vue-router';
 import ErrorDlg from './components/ErrorDlg.vue';
+import DialogContainer from './components/DialogContainer.vue';
 import { ScrollbarWrapper } from './utils/others';
 import { debounce } from 'lodash-es';
+import { useTheme } from './composables/plus/useTheme';
 
 const themeOverrides: GlobalThemeOverrides = {
   common: {
@@ -19,16 +21,20 @@ const freeActiveElement = debounce(() => {
 useEventListener('click', () => {
   freeActiveElement();
 });
+
+const { appTheme } = useTheme();
 </script>
 <template>
   <NConfigProvider
     abstract
     :locale="zhCN"
     :dateLocale="dateZhCN"
+    :theme="appTheme"
     :themeOverrides="themeOverrides"
   >
     <ErrorDlg />
     <RouterView />
+    <DialogContainer />
   </NConfigProvider>
   <ScrollbarWrapper />
 </template>
diff --git a/src/assets/svg/CacheSub.svg b/src/assets/svg/CacheSub.svg
new file mode 100644
index 0000000..dd5ffab
--- /dev/null
+++ b/src/assets/svg/CacheSub.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1771832105264" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="70551" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M930.773333 366.08h49.066667v-142.506667c0-40.32-32.853333-73.386667-73.386667-73.386666H118.613333c-40.32 0-73.386667 32.853333-73.386666 73.386666v142.506667h49.066666c17.706667 0 32.64 12.8 33.493334 28.373333 0.426667 8.32-2.56 16.213333-8.106667 22.186667-5.76 5.973333-13.44 9.386667-21.76 9.386667H45.226667v373.546666c0 40.32 32.853333 73.386667 73.386666 73.386667h136.32v-153.386667h80.64v153.386667H906.666667c40.32 0 73.386667-32.853333 73.386666-73.386667V426.026667h-52.693333c-8.32 0-16-3.413333-21.76-9.386667s-8.533333-13.866667-8.106667-22.186667c0.64-15.573333 15.786667-28.373333 33.28-28.373333z m-71.68 94.72c15.146667 15.786667 35.2 26.026667 56.746667 28.586667v310.186666c0 5.12-4.266667 9.386667-9.386667 9.386667h-60.373333v-143.786667h-64v143.786667h-45.013333v-143.786667h-64v143.786667h-45.013334v-143.786667h-64v143.786667h-45.013333v-143.786667h-64v143.786667h-55.893333v-153.386667H190.933333v153.386667H118.613333c-5.12 0-9.386667-4.266667-9.386666-9.386667V489.386667c21.546667-2.56 41.813333-12.8 56.746666-28.586667 17.92-18.773333 27.093333-43.52 25.6-69.76-2.346667-45.013333-37.546667-81.28-82.56-87.893333v-79.573334c0-5.12 4.266667-9.386667 9.386667-9.386666H906.666667c5.12 0 9.386667 4.266667 9.386666 9.386666v79.573334c-45.013333 6.613333-80 42.88-82.56 87.893333a93.013333 93.013333 0 0 0 25.6 69.76z" p-id="70552"></path><path d="M261.12 499.2h501.76v-201.6H261.12v201.6z m64-137.6h373.76v73.6H325.12v-73.6z" p-id="70553"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Connect.svg b/src/assets/svg/Connect.svg
new file mode 100644
index 0000000..863ba2d
--- /dev/null
+++ b/src/assets/svg/Connect.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1771792788434" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" p-id="59843" data-darkreader-inline-fill=""
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+    <path d="M357.416807 548.994566l306.228473 0 0-76.54535-306.228473 0L357.416807 548.994566zM200.461079 510.692215c0-88.038102 68.861344-156.953681 156.955728-156.953681l114.842585 0 0-72.729441-114.842585 0c-126.337383 0-229.6821 103.34574-229.6821 229.683123 0 126.335337 103.344716 229.683123 229.6821 229.683123l114.842585 0 0-72.728418-114.842585 0C269.322423 667.647943 200.461079 598.678128 200.461079 510.692215M663.64528 281.009092l-114.842585 0 0 72.729441 114.842585 0c88.034009 0 156.898423 68.915579 156.898423 156.953681 0 87.98489-68.863391 156.954705-156.898423 156.954705l-114.842585 0 0 72.728418 114.842585 0c126.33636 0 229.683123-103.347786 229.683123-229.683123C893.32738 384.354831 789.98164 281.009092 663.64528 281.009092" p-id="59844"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/Down-all.svg b/src/assets/svg/Down-all.svg
new file mode 100644
index 0000000..aeb0c69
--- /dev/null
+++ b/src/assets/svg/Down-all.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1771831800269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4684" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M865.3 506.3V184.1c0-64.8-52.7-117.5-117.5-117.5H281c-64.8 0-117.5 52.7-117.5 117.5v322.2c-46.4 5.8-82.4 45.5-82.4 93.5v257.8c0 52 42.3 94.2 94.2 94.2h678.2c52 0 94.2-42.3 94.2-94.2V599.8c0-47.9-36-87.6-82.4-93.5zM233.5 184.1c0-26.2 21.3-47.5 47.5-47.5h466.8c26.2 0 47.5 21.3 47.5 47.5v321.5H669.9v87.6c0 3.3-2.7 6-6 6H365c-3.3 0-6-2.7-6-6v-87.6H233.5V184.1z m644.2 673.6c0 13.4-10.9 24.2-24.2 24.2H175.3c-13.4 0-24.2-10.9-24.2-24.2V599.8c0-13.4 10.9-24.2 24.2-24.2H289v17.6c0 41.9 34.1 76 76 76h298.8c41.9 0 76-34.1 76-76v-17.6h113.6c13.4 0 24.2 10.9 24.2 24.2v257.9z" p-id="4685"></path><path d="M513.2 520.3l140.6-140.6-49.5-49.5-57.3 57.4V194.5h-70v190.6l-54.9-54.9-49.5 49.5 91.1 91.1z" p-id="4686"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/Exe-Sel.svg b/src/assets/svg/Exe-Sel.svg
new file mode 100644
index 0000000..af39eb5
--- /dev/null
+++ b/src/assets/svg/Exe-Sel.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 1024 1024" width="200" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <!-- 主体 -->
+  <g fill="currentColor"
+     stroke="currentColor"
+     stroke-width="12.6"
+     stroke-linejoin="round"
+     stroke-linecap="round">
+
+    <path d="M723.1 482.1L443.6 320.6c-5.6-3.3-11.5-4.7-17.3-4.7-18.1 0-34.8 14.5-34.8 34.8v322.8c0 20.3 16.6 34.8 34.8 34.8 5.8 0 11.7-1.5 17.3-4.7l279.5-161.4c23.1-13.4 23.1-46.8 0-60.1zM431.5 664.2V359.8L695.2 512 431.5 664.2z"/>
+
+    <path d="M938.1 650.7C952.3 607 960 560.4 960 512c0-247.4-200.6-448-448-448S64 264.6 64 512s200.6 448 448 448c51.5 0 100.9-8.7 146.9-24.7 34.7 29 79.4 46.4 128.1 46.4 110.5 0 200-89.5 200-200 0-50-18.4-95.9-48.9-131zM512 916c-54.6 0-107.5-10.7-157.2-31.7-48.1-20.3-91.3-49.5-128.4-86.6s-66.3-80.3-86.6-128.4C118.7 619.5 108 566.6 108 512s10.7-107.5 31.7-157.2c20.3-48.1 49.5-91.3 86.6-128.4s80.3-66.3 128.4-86.6C404.5 118.7 457.4 108 512 108s107.5 10.7 157.2 31.7c48.1 20.3 91.3 49.5 128.4 86.6s66.3 80.3 86.6 128.4C905.3 404.5 916 457.4 916 512c0 36.3-4.7 71.8-14 106.1-32.5-22.9-72.1-36.3-114.9-36.3-110.5 0-200 89.5-200 200 0 44.1 14.3 84.9 38.5 118C588.9 910.6 550.9 916 512 916z m385.3-23.9c-29.5 29.5-68.6 45.7-110.3 45.7-28.8 0-56.3-7.7-80.3-22.2-10.8-6.5-20.8-14.4-30-23.5-2.6-2.6-5-5.2-7.4-7.9-24.8-28.4-38.3-64.4-38.3-102.4 0-41.7 16.2-80.8 45.7-110.3s68.6-45.7 110.3-45.7c37 0 72.1 12.8 100.1 36.4 3.5 2.9 6.9 6 10.2 9.3 8.4 8.4 15.7 17.6 21.9 27.4 15.5 24.6 23.8 53.1 23.8 82.9 0 41.7-16.2 80.8-45.7 110.3z"/>
+
+  </g>
+
+  <!-- 右下角控制条（变细） -->
+  <g fill="currentColor"
+     stroke="currentColor"
+     stroke-width="8"
+     stroke-linejoin="round"
+     stroke-linecap="round">
+
+    <path d="M753.1 704.4v-27.6c0-8.3-6.7-15-15-15s-15 6.7-15 15v27.6c-17.5 6.2-30 22.8-30 42.4s12.5 36.3 30 42.4v97.6c0 8.3 6.7 15 15 15s15-6.7 15-15v-97.6c17.5-6.2 30-22.8 30-42.4s-12.5-36.3-30-42.4z m-15 57.4c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.8 15-15 15zM851 774.4v-97.6c0-8.3-6.7-15-15-15s-15 6.7-15 15v97.6c-17.5 6.2-30 22.8-30 42.4s12.5 36.3 30 42.4v27.6c0 8.3 6.7 15 15 15s15-6.7 15-15v-27.6c17.5-6.2 30-22.8 30-42.4s-12.5-36.3-30-42.4z m-15 57.4c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z"/>
+
+  </g>
+
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/Photo-edit.svg b/src/assets/svg/Photo-edit.svg
new file mode 100644
index 0000000..3ba2439
--- /dev/null
+++ b/src/assets/svg/Photo-edit.svg
@@ -0,0 +1,9 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="170 170 680 680"
+  width="24"
+  height="24"
+  fill="currentColor"
+>
+  <path d="M430.933333 610.133333l115.2-145.066666 72.533334 98.133333c34.133333-21.333333 68.266667-34.133333 106.666666-34.133333 8.533333 0 21.333333 0 34.133334 4.266666v-298.666666C755.2 200.533333 725.333333 170.666667 691.2 170.666667H234.666667C200.533333 170.666667 170.666667 200.533333 170.666667 234.666667v456.533333c0 34.133333 29.866667 64 64 64h294.4c-4.266667-8.533333-4.266667-21.333333-4.266667-34.133333 0-21.333333 4.266667-46.933333 12.8-64H234.666667L349.866667 512l81.066666 98.133333zM593.066667 793.6V853.333333h55.466666l153.6-153.6-59.733333-59.733333zM849.066667 631.466667L810.666667 597.333333c-8.533333-8.533333-17.066667-8.533333-21.333334 0l-29.866666 29.866667 59.733333 59.733333 29.866667-29.866666c4.266667-8.533333 4.266667-17.066667 0-25.6z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/Snapshot.svg b/src/assets/svg/Snapshot.svg
new file mode 100644
index 0000000..feb3c71
--- /dev/null
+++ b/src/assets/svg/Snapshot.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 1024 1024"
+     xmlns="http://www.w3.org/2000/svg"
+     width="200"
+     height="200"
+     fill="currentColor">
+  <path d="M128 650.688a32 32 0 0 1 31.488 26.24l0.512 5.76v170.624c0 4.736 3.072 8.704 7.296 10.176l3.392 0.512h170.624a32 32 0 0 1 5.76 63.488l-5.76 0.512H170.688a74.688 74.688 0 0 1-74.24-66.56l-0.448-8.128v-170.624a32 32 0 0 1 32-32z m768 0a32 32 0 0 1 31.488 26.24l0.512 5.76v170.624c0 38.528-29.12 70.208-66.56 74.24l-8.128 0.448h-170.624a32 32 0 0 1-5.76-63.488l5.76-0.512h170.624a10.688 10.688 0 0 0 10.176-7.296l0.512-3.392v-170.624a32 32 0 0 1 32-32zM576 288a32 32 0 0 1 26.624 14.272l33.152 49.728h110.912a32 32 0 0 1 31.488 26.24l0.512 5.76v320a32 32 0 0 1-32 32H277.312a32 32 0 0 1-32-32V384a32 32 0 0 1 32-32h110.848l33.216-49.728a32 32 0 0 1 20.288-13.632L448 288z m-17.152 64H465.088l-33.152 49.728a32 32 0 0 1-20.288 13.632l-6.336 0.64h-96v256h405.312v-256h-96a32 32 0 0 1-22.592-9.344l-3.968-4.928-33.216-49.728zM512 437.312a96 96 0 1 1 0 192 96 96 0 0 1 0-192z m0 64a32 32 0 1 0 0 64 32 32 0 0 0 0-64zM341.312 96a32 32 0 0 1 5.76 63.488l-5.76 0.512H170.688a10.688 10.688 0 0 0-10.176 7.296l-0.512 3.392v170.624a32 32 0 0 1-63.488 5.76l-0.512-5.76V170.688c0-38.528 29.12-70.208 66.56-74.24l8.128-0.448h170.624z m512 0c38.528 0 70.208 29.12 74.24 66.56l0.448 8.128v170.624a32 32 0 0 1-63.488 5.76l-0.512-5.76V170.688a10.688 10.688 0 0 0-7.296-10.176l-3.392-0.512h-170.624a32 32 0 0 1-5.76-63.488l5.76-0.512h170.624z"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/ActionCard.vue b/src/components/ActionCard.vue
index 3849688..ea25121 100644
--- a/src/components/ActionCard.vue
+++ b/src/components/ActionCard.vue
@@ -11,6 +11,10 @@ import { buildEmptyFn, delay } from '@/utils/others';
 import { snapshotStorage } from '@/utils/snapshot';
 import { useTask } from '@/utils/task';
 import { getImportUrl, getImagUrl } from '@/utils/url';
+import {
+  getCustomDomainImportUrl,
+  getOfficialImportUrl,
+} from '@/utils/plus/url';
 
 const props = withDefaults(
   defineProps<{
@@ -31,7 +35,7 @@ const props = withDefaults(
 );
 
 const router = useRouter();
-const { snapshotImportId, snapshotImageId } = useStorageStore();
+const { settingsStore, snapshotImportId, snapshotImageId } = useStorageStore();
 
 const exportJpg = useTask(async () => exportSnapshotAsImage(props.snapshot));
 const exportZip = useTask(async () => exportSnapshotAsZip(props.snapshot));
@@ -57,7 +61,11 @@ const exportZipUrl = useTask(async () => {
   const importId = await exportSnapshotAsImportId(props.snapshot);
   showTextDLg({
     title: `分享链接`,
-    content: location.origin + `/i/${importId}`,
+    content: settingsStore.shareUseOfficialImportDomain
+      ? getOfficialImportUrl(importId)
+      : getImportUrl(importId),
+    extraContent: getCustomDomainImportUrl(importId),
+    quickPick: true,
   });
 });
 
@@ -70,7 +78,9 @@ const deleteSnapshot = async () => {
 const snapshotImportUrl = computed(() => {
   const t = snapshotImportId[props.snapshot.id];
   if (!t) return '';
-  return getImportUrl(t);
+  return settingsStore.shareUseOfficialImportDomain
+    ? getOfficialImportUrl(t)
+    : getImportUrl(t);
 });
 const snapshotImageUrl = computed(() => {
   const t = snapshotImageId[props.snapshot.id];
diff --git a/src/components/BodyScrollbar.vue b/src/components/BodyScrollbar.vue
index 0178405..37a50de 100644
--- a/src/components/BodyScrollbar.vue
+++ b/src/components/BodyScrollbar.vue
@@ -123,12 +123,11 @@ const bodyHoverd = useElementHover(document.body);
         w-full
         rounded-4px
         transition-colors
-        bg="#9093994c"
-        hover:bg="#9093997f"
+        class="BodyScrollbar-bar"
         :style="yStyle"
         :class="{
-          'bg-#9093997f': yDragging,
-          'bg-#0000!': !bodyHoverd,
+          'is-dragging': yDragging,
+          'is-hidden': !bodyHoverd && !yDragging,
         }"
         @click.stop
       />
@@ -150,12 +149,11 @@ const bodyHoverd = useElementHover(document.body);
         h-full
         rounded-4px
         transition-colors
-        bg="#9093994c"
-        hover:bg="#9093997f"
+        class="BodyScrollbar-bar"
         :style="xStyle"
         :class="{
-          'bg-#9093997f': xDragging,
-          'bg-#0000!': !bodyHoverd,
+          'is-dragging': xDragging,
+          'is-hidden': !bodyHoverd && !xDragging,
         }"
         @click.stop
       />
@@ -169,4 +167,16 @@ body:not(.mobile)::-webkit-scrollbar {
 html:not(.mobile) {
   scrollbar-width: none;
 }
+.BodyScrollbar-bar {
+  background-color: var(--scrollbar-thumb-color);
+}
+.BodyScrollbar-bar:hover {
+  background-color: var(--scrollbar-thumb-hover-color);
+}
+.BodyScrollbar-bar.is-dragging {
+  background-color: var(--scrollbar-thumb-active-color);
+}
+.BodyScrollbar-bar.is-hidden {
+  background-color: var(--scrollbar-thumb-hidden-color);
+}
 </style>
diff --git a/src/components/DeviceControlTools.vue b/src/components/DeviceControlTools.vue
new file mode 100644
index 0000000..68ba555
--- /dev/null
+++ b/src/components/DeviceControlTools.vue
@@ -0,0 +1,399 @@
+<script setup lang="ts">
+import DraggableCard from '@/components/DraggableCard.vue';
+import { useDeviceControlTools } from '@/composables/plus/useDeviceControlTools';
+import type { TooltipProps, TreeProps, TreeOption } from 'naive-ui';
+import { h } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    iconSize?: string;
+    tooltipPlacement?: TooltipProps['placement'];
+  }>(),
+  { iconSize: 'var(--app-icon-size)', tooltipPlacement: 'right' },
+);
+
+const {
+  showSubsModel,
+  subsText,
+  parsedCandidates,
+  selectedCandidateKeys,
+  selectAllCandidates,
+  clearCandidateSelection,
+  invertCandidateSelection,
+  parseCandidates,
+  updateSubs,
+  showSelectorModel,
+  actionOptions,
+  clickAction,
+  execSelector,
+} = useDeviceControlTools();
+
+type CandidateTreeOption = {
+  key: string;
+  label: string;
+  children?: CandidateTreeOption[];
+  checkboxDisabled?: boolean;
+};
+
+const candidateTreeOptions = computed<CandidateTreeOption[]>(() => {
+  const appRoot: CandidateTreeOption = {
+    key: '__branch__:apps',
+    label: 'Apps',
+    children: [],
+  };
+  const globalRoot: CandidateTreeOption = {
+    key: '__branch__:global',
+    label: 'GlobalGroups',
+    checkboxDisabled: true,
+    children: [],
+  };
+  const categoryRoot: CandidateTreeOption = {
+    key: '__branch__:categories',
+    label: 'Categories',
+    checkboxDisabled: true,
+    children: [],
+  };
+  const appMap = new Map<string, CandidateTreeOption>();
+
+  const normalizeLeafLabel = (text: string) => {
+    if (text.startsWith('AppGroup: ')) {
+      const idx = text.indexOf(' / ');
+      return idx >= 0 ? text.substring(idx + 3) : text;
+    }
+    return text;
+  };
+
+  parsedCandidates.value.forEach((item) => {
+    if (item.kind === 'app') {
+      const app = item.payload.apps?.[0];
+      const appId = app?.id || '(unknown)';
+      const appName = app?.name || appId;
+      const appKey = `__branch__:app:${appId}`;
+      let appNode = appMap.get(appKey);
+      if (!appNode) {
+        appNode = {
+          key: appKey,
+          label: `${appName} (${appId})`,
+          children: [],
+        };
+        appMap.set(appKey, appNode);
+        appRoot.children!.push(appNode);
+      }
+      appNode.children!.push({
+        key: item.key,
+        label: normalizeLeafLabel(item.label),
+      });
+      return;
+    }
+    if (item.kind === 'globalGroup') {
+      globalRoot.children!.push({
+        key: item.key,
+        label: item.label.replace(/^GlobalGroup:\s*/, ''),
+      });
+      return;
+    }
+    categoryRoot.children!.push({
+      key: item.key,
+      label: item.label.replace(/^Category:\s*/, ''),
+    });
+  });
+
+  return [appRoot, globalRoot, categoryRoot].filter(
+    (node) => (node.children || []).length > 0,
+  );
+});
+
+const candidateTreeBranchToLeaves = computed(() => {
+  const map = new Map<string, string[]>();
+  const walk = (node: CandidateTreeOption): string[] => {
+    if (!node.children?.length) return [node.key];
+    const leaves = node.children.flatMap((child) => walk(child));
+    map.set(node.key, leaves);
+    return leaves;
+  };
+  candidateTreeOptions.value.forEach((node) => {
+    walk(node);
+  });
+  return map;
+});
+
+const candidateLeafKeySet = computed(
+  () => new Set(parsedCandidates.value.map((item) => item.key)),
+);
+
+const toggleLeafByLabelClick = (key: string) => {
+  if (!candidateLeafKeySet.value.has(key)) return;
+  const next = new Set(selectedCandidateKeys.value);
+  if (next.has(key)) next.delete(key);
+  else next.add(key);
+  selectedCandidateKeys.value = [...next];
+};
+
+const candidateTreeNodeProps: NonNullable<TreeProps['nodeProps']> = (info) => {
+  const option = info.option as TreeOption;
+  if (Array.isArray(option.children) && option.children.length) return {};
+  const key = String(option.key ?? '');
+  if (!key) return {};
+  return {
+    onClick: (e: MouseEvent) => {
+      e.stopPropagation();
+      toggleLeafByLabelClick(key);
+    },
+  };
+};
+
+const onCandidateTreeChecked = (keys: Array<string | number>) => {
+  const allow = new Set(parsedCandidates.value.map((item) => item.key));
+  const selected = new Set<string>();
+  keys.forEach((key) => {
+    if (typeof key !== 'string') return;
+    if (allow.has(key)) {
+      selected.add(key);
+      return;
+    }
+    const leafKeys = candidateTreeBranchToLeaves.value.get(key) || [];
+    leafKeys.forEach((leaf) => {
+      if (allow.has(leaf)) selected.add(leaf);
+    });
+  });
+  selectedCandidateKeys.value = [...selected];
+};
+
+const subsPlaceholder = `
+示例-单个应用的规则:
+{
+  id: 'cn.dxy.clinmaster',
+  name: '临床决策',
+  groups: [
+    {
+      key: 1,
+      name: '示例',
+      rules: [
+        {
+          fastQuery: true,
+          activityIds: 'cn.dxy.clinmaster.home.MainActivity',
+          matches:
+            '@[vid="iv_close"] -2 [text="立即更新"]',
+          snapshotUrls: 'https://i.gkd.li/i/25459821',
+        },
+      ],
+    },
+  ],
+}
+`.trim();
+</script>
+
+<template>
+  <NTooltip :placement="props.tooltipPlacement">
+    <template #trigger>
+      <NButton
+        text
+        :style="{ '--n-icon-size': props.iconSize, '--svg-h': props.iconSize }"
+        @click="showSubsModel = !showSubsModel"
+      >
+        <template #icon>
+          <SvgIcon name="CacheSub" style="color: var(--icon-contrast-color)" />
+        </template>
+      </NButton>
+    </template>
+    修改内存订阅
+  </NTooltip>
+  <NTooltip :placement="props.tooltipPlacement">
+    <template #trigger>
+      <NButton
+        text
+        :style="{ '--n-icon-size': props.iconSize, '--svg-h': props.iconSize }"
+        @click="showSelectorModel = !showSelectorModel"
+      >
+        <template #icon>
+          <SvgIcon name="Exe-Sel" style="color: var(--icon-contrast-color)" />
+        </template>
+      </NButton>
+    </template>
+    执行选择器
+  </NTooltip>
+
+  <DraggableCard
+    v-slot="{ onRef }"
+    :initialValue="{ top: 84, left: 120 }"
+    class="box-shadow-dim window-anim"
+    :show="showSubsModel"
+  >
+    <NCard
+      size="small"
+      closable
+      class="floating-panel"
+      style="width: min(720px, 80vw); max-height: 73vh"
+      :content-style="{ overflow: 'auto' }"
+      @close="showSubsModel = false"
+    >
+      <template #header>
+        <div :ref="onRef" flex items-center cursor-move>
+          <SvgIcon
+            name="CacheSub"
+            class="mr-6px"
+            style="color: var(--accent-success-color)"
+          />
+          <span>修改内存订阅</span>
+          <div flex-1 />
+        </div>
+      </template>
+      <NInput
+        v-model:value="subsText"
+        :disabled="updateSubs.loading"
+        type="textarea"
+        class="gkd_code"
+        :autosize="{ minRows: 16, maxRows: 22 }"
+        :placeholder="subsPlaceholder"
+        aria-label="订阅文本输入框"
+      />
+      <NAlert mt-10px type="info" title="导入说明">
+        1.点击“解析”可自动清洗非法 TS/残缺文本并识别多条规则 2.若无
+        app头,快照审查页会自动补全 3.支持 TS转JSON5 语法格式
+      </NAlert>
+      <NCard
+        v-if="parsedCandidates.length"
+        mt-10px
+        size="small"
+        :bordered="true"
+        title="解析结果（树形可选导入）"
+      >
+        <div mb-8px flex justify-end gap-8px>
+          <NButton size="tiny" tertiary @click="selectAllCandidates"
+            >全选</NButton
+          >
+          <NButton size="tiny" tertiary @click="invertCandidateSelection"
+            >反选</NButton
+          >
+          <NButton size="tiny" tertiary @click="clearCandidateSelection"
+            >清空</NButton
+          >
+        </div>
+        <NTree
+          block-line
+          checkable
+          cascade
+          expand-on-click
+          :render-label="
+            ({ option }) =>
+              option.children?.length
+                ? option.label
+                : h(
+                    'span',
+                    {
+                      style: { cursor: 'pointer' },
+                      onClick: (e: MouseEvent) => {
+                        e.stopPropagation();
+                        toggleLeafByLabelClick(String(option.key));
+                      },
+                    },
+                    option.label as string,
+                  )
+          "
+          :node-props="candidateTreeNodeProps"
+          :data="candidateTreeOptions"
+          :checked-keys="selectedCandidateKeys"
+          @update:checkedKeys="onCandidateTreeChecked"
+        />
+      </NCard>
+      <div
+        :class="{
+          'mt-10px': parsedCandidates.length,
+          'mt-5px': !parsedCandidates.length,
+        }"
+        flex
+        justify-end
+        gap-8px
+      >
+        <NButton @click="showSubsModel = false">取消</NButton>
+        <NButton
+          :loading="parseCandidates.loading"
+          :disabled="updateSubs.loading"
+          @click="parseCandidates.invoke"
+        >
+          解析
+        </NButton>
+        <NButton
+          type="primary"
+          :loading="updateSubs.loading"
+          @click="updateSubs.invoke"
+        >
+          确认导入
+        </NButton>
+      </div>
+    </NCard>
+  </DraggableCard>
+
+  <DraggableCard
+    v-slot="{ onRef }"
+    :initialValue="{ top: 120, left: 180 }"
+    class="box-shadow-dim window-anim"
+    :show="showSelectorModel"
+  >
+    <NCard
+      size="small"
+      closable
+      class="floating-panel"
+      style="width: min(720px, 90vw)"
+      :content-style="{ maxHeight: '70vh', overflow: 'auto' }"
+      @close="showSelectorModel = false"
+    >
+      <template #header>
+        <div :ref="onRef" flex items-center cursor-move>
+          <SvgIcon
+            name="Exe-Sel"
+            class="mr-6px"
+            style="color: var(--accent-success-color)"
+          />
+          <span>执行选择器</span>
+          <div flex-1 />
+        </div>
+      </template>
+      <NInput
+        v-model:value="clickAction.selector"
+        :disabled="execSelector.loading"
+        type="textarea"
+        class="gkd_code"
+        :autosize="{ minRows: 4, maxRows: 10 }"
+        placeholder="请输入合法选择器"
+        aria-label="选择器输入框"
+      />
+      <div h-15px />
+      <NSpace>
+        <NCheckbox v-model:checked="clickAction.quickFind">快速查询</NCheckbox>
+        <a
+          href="https://gkd.li/api/interfaces/RawCommonProps.html#quickfind"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          查找说明
+        </a>
+      </NSpace>
+      <div h-10px />
+      <div flex gap-10px flex-items-center>
+        <NSelect
+          v-model:value="clickAction.action"
+          :options="actionOptions"
+          class="w-150px"
+        />
+        <a
+          href="https://gkd.li/api/interfaces/RawRuleProps#action"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          操作说明
+        </a>
+      </div>
+      <div mt-10px flex justify-end gap-8px>
+        <NButton @click="showSelectorModel = false">取消</NButton>
+        <NButton
+          type="primary"
+          :loading="execSelector.loading"
+          @click="execSelector.invoke"
+        >
+          确认
+        </NButton>
+      </div>
+    </NCard>
+  </DraggableCard>
+</template>
diff --git a/src/components/DialogContainer.vue b/src/components/DialogContainer.vue
new file mode 100644
index 0000000..7750a86
--- /dev/null
+++ b/src/components/DialogContainer.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="dialog-container">
+    <!-- 分享链接弹窗 -->
+    <NModal
+      v-if="dialogState.shareLink.visible"
+      v-model:show="dialogState.shareLink.visible"
+      :draggable="true"
+      :show-mask="false"
+      :block-scroll="false"
+      :auto-focus="false"
+      :trap-focus="false"
+      :mask-closable="false"
+      :close-on-esc="true"
+      class="snapshot-floating-panel"
+      :width="400"
+    >
+      <template #header>
+        <div class="n-modal-header">
+          <div class="n-modal-title">
+            {{ dialogState.shareLink.options.title }}
+          </div>
+          <div class="n-modal-header__right">
+            <NButton text @click="close('shareLink')">
+              <SvgIcon name="close" />
+            </NButton>
+          </div>
+        </div>
+      </template>
+      <div class="p-10px">
+        <div class="mb-8px">
+          <div class="text-sm text-muted mb-4px">官方域名链接</div>
+          <NInput :value="officialUrl" readonly class="gkd_code" />
+          <NButton text size="small" class="mt-4px" @click="copy(officialUrl)">
+            复制链接
+          </NButton>
+        </div>
+        <div v-if="currentOriginUrl" class="mb-8px">
+          <div class="text-sm text-muted mb-4px">自定义域链接</div>
+          <NInput :value="currentOriginUrl" readonly class="gkd_code" />
+          <NButton
+            text
+            size="small"
+            class="mt-4px"
+            @click="copy(currentOriginUrl)"
+          >
+            复制链接
+          </NButton>
+        </div>
+        <div v-if="dialogState.shareLink.options.quickPick" class="mt-12px">
+          <NButton type="primary" block @click="copy(officialUrl)">
+            快速复制官方链接
+          </NButton>
+        </div>
+      </div>
+    </NModal>
+
+    <!-- 风险提示弹窗 -->
+    <NModal
+      v-if="dialogState.riskNotice.visible"
+      v-model:show="dialogState.riskNotice.visible"
+      :draggable="true"
+      :show-mask="true"
+      :block-scroll="true"
+      :auto-focus="true"
+      :trap-focus="true"
+      :mask-closable="false"
+      :close-on-esc="false"
+      class="snapshot-floating-panel"
+      :width="400"
+    >
+      <template #header>
+        <div class="n-modal-header">
+          <div class="n-modal-title">生成分享链接须知</div>
+        </div>
+      </template>
+      <div class="p-10px">
+        <div class="mb-8px">
+          所有快照上传分享链接均为公开链接，任何人均可访问。
+        </div>
+        <div class="mb-12px">
+          请确保快照不包含隐私信息，请勿分享任何敏感信息。
+        </div>
+        <NCheckbox v-model:checked="ignoreWarn" class="mb-12px">
+          不再提醒
+        </NCheckbox>
+        <div class="flex justify-end gap-8px">
+          <NButton @click="rejectRiskNotice">取消分享</NButton>
+          <NButton type="primary" @click="acceptRiskNotice">继续上传</NButton>
+        </div>
+      </div>
+    </NModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { message } from '@/utils/discrete';
+import SvgIcon from './SvgIcon.vue';
+import { getImportId } from '@/utils/url';
+import { settingsStore } from '@/store/storage';
+import { useDialogStore } from '@/store/dialog';
+import { NModal, NButton, NInput, NCheckbox } from 'naive-ui';
+
+const dialogStore = useDialogStore();
+const dialogState = computed(() => dialogStore.state);
+
+const officialUrl = computed(() => {
+  const options = dialogState.value.shareLink.options;
+  const content = options.content || '';
+  const extraContent = options.extraContent || '';
+  const importId = getImportId(content) || getImportId(extraContent);
+  return importId ? `https://i.gkd.li/i/${importId}` : content;
+});
+
+const currentOriginUrl = computed(() => {
+  const options = dialogState.value.shareLink.options;
+  const content = options.content || '';
+  const extraContent = options.extraContent || '';
+  const importId = getImportId(content) || getImportId(extraContent);
+  return options.extraContent
+    ? options.extraContent
+    : importId
+      ? `${window.location.origin}/i/${importId}`
+      : content;
+});
+
+const ignoreWarn = computed({
+  get: () => settingsStore.ignoreUploadWarn,
+  set: (value) => {
+    settingsStore.ignoreUploadWarn = value;
+  },
+});
+
+const close = (dialogName: string) => {
+  dialogStore.close(dialogName);
+};
+
+const copy = async (text: string) => {
+  if (!text) return;
+  try {
+    await navigator.clipboard.writeText(text);
+    message.success('复制成功');
+  } catch {
+    message.error('复制失败');
+  }
+};
+
+const acceptRiskNotice = () => {
+  dialogStore.resolve('riskNotice', true);
+};
+
+const rejectRiskNotice = () => {
+  dialogStore.reject('riskNotice', 'cancel');
+};
+</script>
+
+<style scoped>
+.dialog-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.dialog-container > * {
+  pointer-events: auto;
+}
+
+.text-muted {
+  color: var(--text-muted-color);
+}
+
+/* 确保可拖拽区域样式正确 */
+.n-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  cursor: move;
+}
+
+.n-modal-title {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.n-modal-header__right {
+  flex-shrink: 0;
+}
+
+/* 确保弹窗可见 */
+.snapshot-floating-panel {
+  z-index: 10000;
+}
+</style>
diff --git a/src/components/SelectorText.vue b/src/components/SelectorText.vue
index e743e46..4794d98 100644
--- a/src/components/SelectorText.vue
+++ b/src/components/SelectorText.vue
@@ -119,47 +119,47 @@ const getDataValue = (str: string) => {
 </template>
 <style>
 [data-name~='Unknown'] {
-  background-color: red;
+  background-color: var(--selector-unknown-bg-color);
 }
 [data-name~='PropertySegment'] {
-  color: blueviolet;
+  color: var(--selector-property-color);
 }
 [data-name~='PropertySegment'] [data-name='String'][data-value='@'] {
-  color: rgb(98, 55, 138);
+  color: var(--selector-property-prefix-color);
 }
 [data-name~='ConnectOperator'] {
-  color: green;
+  color: var(--selector-connect-operator-color);
 }
 [data-name~='ConnectExpression'] {
-  color: cadetblue;
+  color: var(--selector-connect-expression-color);
 }
 [data-name~='ValueExpression'] {
-  color: green;
+  color: var(--selector-value-expression-color);
 }
 [data-name~='ValueExpression'][data-name~='LiteralExpression'] {
-  color: steelblue;
+  color: var(--selector-value-literal-color);
 }
 [data-name~='CompareOperator'] {
-  color: mediumblue;
+  color: var(--selector-compare-operator-color);
 }
 [data-name~='LogicalOperator'] {
-  color: darkgreen;
+  color: var(--selector-logical-operator-color);
 }
 [data-name~='SelectorLogicalOperator'] {
-  color: darkgreen;
+  color: var(--selector-logical-operator-color);
 }
 [data-name='String'][data-value=')'],
 [data-name='String'][data-value='('] {
-  color: #b392f0;
+  color: var(--selector-string-bracket-color);
 }
 [data-name='String'][data-value=']'],
 [data-name='String'][data-value='['] {
-  color: #b392f0;
+  color: var(--selector-string-bracket-color);
 }
 [data-name='String'][data-value=','] {
-  color: #5e418c;
+  color: var(--selector-string-comma-color);
 }
 [data-name='String'][data-value='.'] {
-  color: #b392f0;
+  color: var(--selector-string-bracket-color);
 }
 </style>
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
new file mode 100644
index 0000000..8dceb01
--- /dev/null
+++ b/src/components/SettingsModal.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { showTextDLg } from '@/utils/dialog';
+import { normalizeOriginText } from '@/utils/plus/url';
+import { message } from '@/utils/discrete';
+import {
+  screenshotStorage,
+  shallowSnapshotStorage,
+  snapshotStorage,
+} from '@/utils/snapshot';
+
+const props = defineProps<{
+  show: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void;
+}>();
+
+const {
+  settingsStore,
+  snapshotViewedTime,
+  snapshotImportTime,
+  snapshotImageId,
+  snapshotImportId,
+  importSnapshotId,
+} = useStorageStore();
+const showDebugMenu = ref(false);
+
+const updateCustomDomain = () => {
+  settingsStore.shareCustomImportDomain = normalizeOriginText(
+    settingsStore.shareCustomImportDomain,
+  );
+};
+
+const triggerDebugShareDialog = () => {
+  showTextDLg({
+    title: '调试 - 链接复制窗口',
+    content: 'https://i.gkd.li/i/123456',
+    extraContent: `${window.location.origin}/i/123456`,
+    extraTitle: '当前域链接',
+  });
+};
+
+const clearRecord = (record: Record<string, any>) => {
+  Object.keys(record).forEach((k) => {
+    delete record[k];
+  });
+};
+const clearStorage = async (
+  storage: Pick<typeof snapshotStorage, 'keys' | 'removeItem'>,
+) => {
+  const keys = await storage.keys();
+  await Promise.all(keys.map((k) => storage.removeItem(k)));
+};
+const clearIndexCache = async (showMessage = true) => {
+  clearRecord(snapshotViewedTime);
+  clearRecord(snapshotImportTime);
+  clearRecord(snapshotImageId);
+  clearRecord(snapshotImportId);
+  clearRecord(importSnapshotId);
+  if (showMessage) {
+    message.success('已清理索引缓存');
+  }
+};
+const clearSnapshots = async () => {
+  await Promise.all([
+    clearStorage(snapshotStorage),
+    clearStorage(shallowSnapshotStorage),
+    clearStorage(screenshotStorage),
+  ]);
+  await clearIndexCache(false);
+  message.success('已清理快照数据');
+};
+const resetAllLocal = () => {
+  localStorage.removeItem('settings');
+  message.success('已重置设置，正在刷新');
+  setTimeout(() => {
+    location.reload();
+  }, 300);
+};
+</script>
+
+<template>
+  <NModal
+    :show="props.show"
+    preset="dialog"
+    title="设置"
+    :showIcon="false"
+    positiveText="关闭"
+    style="width: 620px"
+    class="settings-modal"
+    @update:show="emit('update:show', $event)"
+    @positiveClick="emit('update:show', false)"
+  >
+    <template #header>
+      <div flex items-center>
+        <SvgIcon
+          name="settings"
+          class="mr-6px"
+          style="color: var(--accent-success-color)"
+        />
+        <span>设置</span>
+        <div flex-1 />
+      </div>
+    </template>
+    <div class="settings-layout">
+      <div class="settings-section">
+        <div class="settings-title">分享与导入</div>
+        <div class="settings-row">
+          <NSwitch v-model:value="settingsStore.autoUploadImport" />
+          <div>打开快照页面自动生成分享链接（请确保不含隐私）</div>
+        </div>
+        <div class="settings-row">
+          <NSwitch v-model:value="settingsStore.shareUseOfficialImportDomain" />
+          <div>分享快照链接默认复制官方域名 i.gkd.li</div>
+        </div>
+        <div class="settings-row">
+          <div class="w-120px">自定义分享域</div>
+          <NInput
+            v-model:value="settingsStore.shareCustomImportDomain"
+            placeholder="https://li.chenge.eu.org"
+            class="w-320px"
+            @blur="updateCustomDomain"
+          />
+        </div>
+        <div class="settings-row">
+          <NCheckbox v-model:checked="settingsStore.ignoreUploadWarn">
+            关闭生成分享链接弹窗提醒
+          </NCheckbox>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="settings-title">性能与显示</div>
+        <div class="settings-row">
+          <NSwitch v-model:value="settingsStore.lowMemoryMode" />
+          <div>低内存模式（限制预览缓存、减少动画、降低实时更新开销）</div>
+        </div>
+        <div class="settings-row">
+          <NSwitch v-model:value="settingsStore.autoExpandSnapshots" />
+          <div>自动展开快照</div>
+        </div>
+        <div class="settings-row">
+          <NSwitch v-model:value="settingsStore.randomFocusNodeColorOnOpen" />
+          <div>每次打开随机节点高亮颜色（中等亮度）</div>
+        </div>
+        <div class="settings-row">
+          <NCheckbox v-model:checked="settingsStore.ignoreWasmWarn">
+            关闭浏览器版本正则表达式 WASM(GC) 提醒
+          </NCheckbox>
+        </div>
+        <div class="settings-row">
+          <NCheckbox v-model:checked="settingsStore.filterRandomVidQf">
+            过滤由三个随机字符组成的伪快查节点（如 [vid="k4p"]）
+          </NCheckbox>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="settings-title">主题模式</div>
+        <NRadioGroup v-model:value="settingsStore.themeMode">
+          <NSpace>
+            <NRadio value="auto">自动</NRadio>
+            <NRadio value="light">强制日间</NRadio>
+            <NRadio value="dark">强制夜间</NRadio>
+          </NSpace>
+        </NRadioGroup>
+      </div>
+
+      <div class="settings-section">
+        <div class="settings-row settings-debug">
+          <div
+            class="text-12px"
+            :style="{
+              color: settingsStore.debugMode
+                ? 'var(--accent-danger-color)'
+                : 'var(--text-muted-color)',
+            }"
+          >
+            调试模式
+          </div>
+          <NSwitch
+            v-model:value="settingsStore.debugMode"
+            size="small"
+            @update:value="
+              (value) => {
+                if (!value) showDebugMenu = false;
+              }
+            "
+          />
+        </div>
+        <div v-if="settingsStore.debugMode" mt-8px>
+          <NButton
+            text
+            size="tiny"
+            :type="showDebugMenu ? 'error' : 'default'"
+            @click="showDebugMenu = !showDebugMenu"
+          >
+            {{ showDebugMenu ? '隐藏调试菜单' : '展开调试菜单' }}
+          </NButton>
+          <NCard
+            v-if="showDebugMenu"
+            embedded
+            size="small"
+            class="mt-8px"
+            style="border-radius: 8px"
+          >
+            <NSpace vertical size="small">
+              <div class="text-12px opacity-65">预留后续调试工具入口</div>
+              <div flex items-center gap-10px>
+                <span>选中节点高亮颜色:</span>
+                <NColorPicker
+                  v-model:value="settingsStore.focusNodeColor"
+                  :modes="['rgb']"
+                  size="small"
+                />
+              </div>
+              <div flex gap-8px flex-wrap>
+                <NButton
+                  size="small"
+                  secondary
+                  @click="() => clearIndexCache()"
+                >
+                  清理索引缓存
+                </NButton>
+                <NButton
+                  size="small"
+                  secondary
+                  type="warning"
+                  @click="clearSnapshots"
+                >
+                  清理快照数据
+                </NButton>
+                <NButton
+                  size="small"
+                  secondary
+                  type="error"
+                  @click="resetAllLocal"
+                >
+                  重置本地设置
+                </NButton>
+              </div>
+              <NButton
+                size="small"
+                secondary
+                type="error"
+                @click="triggerDebugShareDialog"
+              >
+                触发链接弹窗测试
+              </NButton>
+            </NSpace>
+          </NCard>
+        </div>
+      </div>
+    </div>
+  </NModal>
+</template>
diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
index fc98144..eb66c4e 100644
--- a/src/components/SvgIcon.vue
+++ b/src/components/SvgIcon.vue
@@ -5,9 +5,13 @@ const svgElMap = computedAsync(
 );
 </script>
 <script setup lang="ts">
-const props = defineProps<{
-  name: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    name: string;
+    strokeWidth?: string; // 新增的 strokeWidth 属性
+  }>(),
+  {},
+);
 
 const svgEl = computed(() => svgElMap.value[props.name]);
 const actualEl = shallowRef<SVGSVGElement>();
@@ -15,7 +19,7 @@ watchEffect(() => {
   const s = svgEl.value;
   const a = actualEl.value;
   if (!s || !a) return;
-  a.replaceChildren(...s.cloneNode(true).childNodes);
+  a.replaceChildren(...Array.from(s.cloneNode(true).childNodes));
 });
 </script>
 <template>
@@ -24,17 +28,17 @@ watchEffect(() => {
     ref="actualEl"
     class="SvgIcon"
     :name="name"
-    :viewBox="svgEl.getAttribute('viewBox') ?? undefined"
-    :fill="svgEl.getAttribute('fill') ?? undefined"
+    :viewBox="svgEl.getAttributeNS(null, 'viewBox') || undefined"
+    :style="{ '--svg-stroke-width': strokeWidth }"
   ></svg>
 </template>
 <style>
 .SvgIcon {
   display: block;
   overflow: hidden;
-  height: var(--svg-h, 1em);
-}
-.SvgIcon:not([fill]) {
+  height: var(--svg-h, var(--n-icon-size, var(--app-icon-size, 1em)));
+  width: var(--svg-w, var(--n-icon-size, var(--app-icon-size, 1em)));
   fill: currentColor;
+  stroke-width: var(--svg-stroke-width);
 }
 </style>
diff --git a/src/components/TrackCard.vue b/src/components/TrackCard.vue
index 402ff8f..e7864f1 100644
--- a/src/components/TrackCard.vue
+++ b/src/components/TrackCard.vue
@@ -1,18 +1,21 @@
-<script lang="ts">
-const TrackGraphLoader = () => import('@/components/TrackGraph.vue');
-const TrackGraph = defineAsyncComponent({
-  loader: TrackGraphLoader,
-  delay: 0,
-});
-setTimeout(TrackGraphLoader, 3000);
-</script>
 <script setup lang="ts">
+import { computed, shallowRef, defineAsyncComponent } from 'vue';
 import SelectorText from '@/components/SelectorText.vue';
-import { buildEmptyFn, colorList } from '@/utils/others';
+import SvgIcon from '@/components/SvgIcon.vue';
+import { NButton, NScrollbar } from 'naive-ui';
+import { buildEmptyFn } from '@/utils/others';
 import { type ResolvedSelector } from '@/utils/selector';
 import type { AstNode, QueryResult } from '@gkd-kit/selector';
 import { UnitSelectorExpression } from '@gkd-kit/selector';
 import type { StyleValue } from 'vue';
+import { useTheme } from '@/composables/plus/useTheme';
+
+const TrackGraphLoader = () => import('@/components/TrackGraph.vue');
+const TrackGraph = defineAsyncComponent({
+  loader: TrackGraphLoader,
+  delay: 0,
+});
+setTimeout(TrackGraphLoader, 3000);
 
 const props = withDefaults(
   defineProps<{
@@ -43,6 +46,7 @@ const filterUnitResults = shallowRef<QueryResult.UnitResult<RawNode>[]>([]);
 watchEffect(() => {
   filterUnitResults.value = showUnitResults.value;
 });
+
 const switchUnitResult = (unitResult: QueryResult.UnitResult<RawNode>) => {
   if (filterUnitResults.value.includes(unitResult)) {
     filterUnitResults.value = filterUnitResults.value.filter(
@@ -61,12 +65,30 @@ const getNodeStyle = (node: AstNode<any>): StyleValue => {
     !node.outChildren.some((v) => v.value instanceof UnitSelectorExpression)
   ) {
     return {
-      outline: '1px solid #00F',
+      outline: '1px solid var(--track-card-outline-color)',
     };
   }
   return '';
 };
+
+const { themeTokens } = useTheme();
+
+const palette = computed(() => {
+  return themeTokens.value.palette.length
+    ? themeTokens.value.palette
+    : [themeTokens.value.graphEdgeFallbackStroke];
+});
+
+const themeColors = computed(() => {
+  return {
+    text: 'var(--text-color)',
+    lightBg: 'var(--bg-color-light)',
+    border: 'var(--border-color)',
+    hoverBg: 'var(--bg-color-hover)',
+  };
+});
 </script>
+
 <template>
   <div
     class="TrackCard"
@@ -81,12 +103,15 @@ const getNodeStyle = (node: AstNode<any>): StyleValue => {
     <div flex justify-between items-center class="[--svg-h:24px]">
       <div flex items-center gap-4px>
         <SvgIcon name="path" />
-        <div text="20px/28px" font-bold>选择器路径视图</div>
+        <div text="20px/28px" font-bold :style="{ color: themeColors.text }">
+          选择器路径视图
+        </div>
       </div>
       <NButton text @click="onClose">
         <SvgIcon name="close" />
       </NButton>
     </div>
+
     <div flex-1 flex gap-12px overflow-hidden>
       <div self-stretch flex="[2]">
         <TrackGraph
@@ -96,21 +121,37 @@ const getNodeStyle = (node: AstNode<any>): StyleValue => {
           :showUnitResults="showUnitResults"
           :filterUnitResults="filterUnitResults"
           class="h-[calc(100%-2px)] b-1px b-solid"
+          :style="{ borderColor: themeColors.border }"
         />
+
         <div relative pointer-events-none z-1>
-          <div absolute left-8px bottom-8px text="14px/14px #6C6E71">
+          <div
+            absolute
+            left-8px
+            bottom-8px
+            text="14px/14px"
+            style="color: var(--track-card-text-color)"
+          >
             *为简化视图已隐藏无关节点
           </div>
         </div>
       </div>
+
       <NScrollbar class="self-stretch flex-1 text-20px leading-28px gkd_code">
-        <div mb-24px break-all px-4px py-2px bg="#eee">
+        <div
+          mb-24px
+          break-all
+          px-4px
+          py-2px
+          style="background-color: var(--track-card-bg-color)"
+        >
           <SelectorText
             :source="selector.source"
             :node="selector.ast"
             :getNodeStyle="getNodeStyle"
           />
         </div>
+
         <div flex flex-col gap-12px>
           <div v-if="singleUnitResults.length" flex gap-8px>
             <div
@@ -121,7 +162,7 @@ const getNodeStyle = (node: AstNode<any>): StyleValue => {
               py-2px
               b-1px
               b-solid
-              b="#ccc"
+              style="border-color: var(--track-card-border-color)"
             >
               <SelectorText
                 :source="selector.source"
@@ -129,6 +170,7 @@ const getNodeStyle = (node: AstNode<any>): StyleValue => {
               />
             </div>
           </div>
+
           <div
             v-for="(unitResult, i) in showUnitResults"
             :key="i"
@@ -140,9 +182,9 @@ const getNodeStyle = (node: AstNode<any>): StyleValue => {
             b-solid
             transition-colors
             :style="{
-              borderColor: colorList[i % colorList.length],
+              borderColor: palette[i % palette.length],
               backgroundColor: filterUnitResults.includes(unitResult)
-                ? '#eee'
+                ? 'var(--track-card-bg-color)'
                 : undefined,
             }"
             @click="switchUnitResult(unitResult)"
@@ -152,7 +194,7 @@ const getNodeStyle = (node: AstNode<any>): StyleValue => {
               align-middle
               size-20px
               :style="{
-                backgroundColor: colorList[i % colorList.length],
+                backgroundColor: palette[i % palette.length],
               }"
             />
             <span pl-4px />
diff --git a/src/components/TrackGraph.vue b/src/components/TrackGraph.vue
index bda8323..424c42b 100644
--- a/src/components/TrackGraph.vue
+++ b/src/components/TrackGraph.vue
@@ -7,6 +7,10 @@ import type { EdgeData, TreeData } from '@antv/g6';
 import { Graph, treeToGraphData } from '@antv/g6';
 import { QueryPath, QueryResult } from '@gkd-kit/selector';
 import { uniqBy } from 'lodash-es';
+// --- Plus 注入开始 ---
+import { OperatorEdge } from '@/utils/plus/g6';
+import { useTheme } from '@/composables/plus/useTheme';
+// --- Plus 注入结束 ---
 
 const props = withDefaults(
   defineProps<{
@@ -19,6 +23,10 @@ const props = withDefaults(
 );
 
 const el = shallowRef<HTMLElement>();
+// --- Plus 状态 ---
+const graphError = shallowRef('');
+const { themeTokens } = useTheme();
+// ----------------
 
 const getNode = (id: string | number): RawNode => {
   return props.nodes[id as number];
@@ -105,7 +113,12 @@ const edgeCtx = computed<EdgeContext>(() => {
   });
   const edgeList = groupList.flatMap((v) => v.edgeGroup);
   const getLabel = (edge: EdgeData): string => {
-    return edgePathMap[edge.id!].formatConnectOffset;
+    // Plus 增强: 增加 try-catch 防止 selector formatConnectOffset 报错导致白屏
+    try {
+      return edgePathMap[edge.id!].formatConnectOffset;
+    } catch {
+      return edgePathMap[edge.id!].connectWrapper.segment.operator.key || '';
+    }
   };
   const getGroupIndex = (edge: EdgeData): number => {
     return groupList.findIndex((v) =>
@@ -116,7 +129,9 @@ const edgeCtx = computed<EdgeContext>(() => {
     const i = props.showUnitResults.indexOf(
       groupList[getGroupIndex(edge)].result,
     );
-    return colorList[i % colorList.length];
+    // Plus 增强: 优先从主题获取颜色，否则回退官方颜色
+    const palette = themeTokens.value.palette || colorList;
+    return palette[i % palette.length];
   };
   const getCurveOffset = (edge: EdgeData): number => {
     const direction =
@@ -161,28 +176,36 @@ const getDistance = (
 };
 
 const getEdgeDistance = (g: Graph, d: EdgeData): number => {
-  const n1 = g.getNodeData(d.source);
-  const n2 = g.getNodeData(d.target);
+  const n1 = g.getNodeData(d.source as string);
+  const n2 = g.getNodeData(d.target as string);
   return getDistance(
-    n1.style?.x || 0,
-    n1.style?.y || 0,
-    n2.style?.x || 0,
-    n2.style?.y || 0,
+    Number(n1.style?.x) || 0,
+    Number(n1.style?.y) || 0,
+    Number(n2.style?.x) || 0,
+    Number(n2.style?.y) || 0,
   );
 };
 
 const numReg = /\d+/;
 
 const graphRef = shallowRef<Graph>();
+
 onUnmounted(() => {
   if (graphRef.value) {
     graphRef.value.destroy();
   }
 });
+
 watch(el, async () => {
-  if (!el.value) {
-    return;
+  if (!el.value) return;
+
+  // Plus 修复: 重绘前销毁旧实例，防止内存泄漏或 canvas 叠加
+  if (graphRef.value) {
+    graphRef.value.destroy();
+    graphRef.value = undefined;
   }
+  graphError.value = '';
+
   const graph = new Graph({
     container: el.value,
     data: treeGraphData.value,
@@ -202,21 +225,30 @@ watch(el, async () => {
         return {
           size: hasChildren(node) ? 4 : 1,
           direction: hasChildren(node) ? 'down' : undefined,
-          fill: hasChildren(node) ? '#767C82' : '#E3E3E3',
+          // Plus 主题注入
+          fill: hasChildren(node)
+            ? themeTokens.value.graphNodeFill || '#767C82'
+            : themeTokens.value.graphLeafFill || '#E3E3E3',
           pointerEvents: 'none',
           labelPlacement: 'right',
           labelText: treeCtx.value.getLabel(node),
+          labelFill: themeTokens.value.graphLabelColor, // Plus
           labelOffsetX: 2,
           labelFontWeight: qf && !placeholdered ? 'bold' : undefined,
           labelOpacity: placeholdered ? 0.5 : undefined,
           labelPointerEvents: 'none',
-          labelStroke: isTarget ? '#0FF' : undefined,
+          labelStroke: isTarget
+            ? themeTokens.value.graphTargetLabelStroke || '#0FF'
+            : undefined,
         };
       },
     },
     edge: {
       type(d) {
-        return isCurveEdge(d) ? AntQuadratic.tyoe : 'polyline';
+        // Plus 优先使用 OperatorEdge
+        return isCurveEdge(d)
+          ? OperatorEdge.type || AntQuadratic.type
+          : 'polyline';
       },
       style(d) {
         if (isCurveEdge(d)) {
@@ -232,10 +264,12 @@ watch(el, async () => {
             endArrowOpacity: 0.5,
             endArrowPointerEvents: 'none',
             labelText,
-            labelFill: '#F00',
+            // Plus 主题注入
+            labelFill: themeTokens.value.graphEdgeLabelColor || '#F00',
             labelFontSize: hasNum ? (distance < 50 ? 8 : 12) : 12,
             labelBackground: true,
-            labelBackgroundStroke: '#FF00FF',
+            labelBackgroundStroke:
+              themeTokens.value.graphEdgeLabelBgStroke || '#FF00FF',
             labelPadding: hasNum ? [0, 1, -2, 0] : [0, 0, -1, 0],
             labelBackgroundLineWidth: 1,
             labelBackgroundRadius: 2,
@@ -246,10 +280,8 @@ watch(el, async () => {
           };
         }
         return {
-          router: {
-            type: 'orth',
-          },
-          stroke: '#E3E3E3',
+          router: { type: 'orth' },
+          stroke: themeTokens.value.graphEdgeStroke || '#E3E3E3', // Plus
           pointerEvents: 'none',
         };
       },
@@ -262,8 +294,15 @@ watch(el, async () => {
     },
     behaviors: ['drag-canvas', 'zoom-canvas'],
   });
-  await graph.render();
-  graphRef.value = graph;
+
+  try {
+    await graph.render();
+    graphRef.value = graph;
+  } catch (e: any) {
+    // Plus 错误处理
+    graphError.value = e?.message || '渲染失败';
+    console.error('TrackGraph Render Error:', e);
+  }
 });
 
 const showEdgeList = computed(() => {
@@ -280,26 +319,68 @@ watch(
   [graphRef, showEdgeList],
   async ([graph, newEdgeList], [_, oldEdgeList]) => {
     if (!graph) return;
-    if (newEdgeList !== oldEdgeList) {
-      const removeEdgeList = oldEdgeList.filter(
-        (v) => !newEdgeList.some((e) => e.id === v.id),
-      );
-      const addEdgeList = newEdgeList.filter(
-        (v) => !oldEdgeList.some((e) => e.id === v.id),
-      );
-      if (!removeEdgeList.length && !addEdgeList.length) {
-        return;
+    try {
+      if (newEdgeList !== oldEdgeList) {
+        const removeEdgeList = (oldEdgeList || []).filter(
+          (v) => !newEdgeList.some((e) => e.id === v.id),
+        );
+        const addEdgeList = newEdgeList.filter(
+          (v) => !(oldEdgeList || []).some((e) => e.id === v.id),
+        );
+        if (!removeEdgeList.length && !addEdgeList.length) {
+          return;
+        }
+        graph.removeEdgeData(removeEdgeList.map((v) => v.id!));
+        await graph.draw();
+        graph.addEdgeData(addEdgeList);
+      } else {
+        graph.addEdgeData(newEdgeList);
       }
-      graph.removeEdgeData(removeEdgeList.map((v) => v.id!));
       await graph.draw();
-      graph.addEdgeData(addEdgeList);
-    } else {
-      graph.addEdgeData(newEdgeList);
+    } catch (e: any) {
+      graphError.value = e?.message || '更新失败';
     }
-    await graph.draw();
   },
 );
 </script>
+
 <template>
-  <div ref="el" class="TrackGraph" />
+  <div class="TrackGraphWrap">
+    <div ref="el" class="TrackGraph" />
+    <div v-if="graphError" class="TrackGraphError">
+      {{ graphError }}
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.TrackGraphWrap {
+  position: relative;
+  height: 100%;
+  /* 使用 grid 保持布局稳定，方便未来扩展 */
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.TrackGraph {
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+}
+
+.TrackGraphError {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 5;
+  max-width: min(80%, 460px);
+  padding: 6px 10px;
+  border: 1px solid var(--accent-danger-color, #ff4d4f);
+  border-radius: 6px;
+  background: var(--surface-raised-color, #fff);
+  color: var(--accent-danger-color, #ff4d4f);
+  font-size: 12px;
+  line-height: 1.35;
+  pointer-events: none;
+}
+</style>
diff --git a/src/components/plus/device/DeviceSnapshotGroups.vue b/src/components/plus/device/DeviceSnapshotGroups.vue
new file mode 100644
index 0000000..cdd105e
--- /dev/null
+++ b/src/components/plus/device/DeviceSnapshotGroups.vue
@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import { computed, toRef } from 'vue';
+import SvgIcon from '@/components/SvgIcon.vue';
+import { useDevicePlus } from '@/composables/plus/useDevicePlus';
+import { getAppInfo } from '@/utils/node';
+
+const props = defineProps<{
+  snapshots: Snapshot[];
+  checkedRowKeys: number[];
+  refreshSnapshots: () => Promise<void>;
+}>();
+
+const emit = defineEmits<{
+  'update:checkedRowKeys': [value: number[]];
+}>();
+
+const checkedRowKeysModel = computed({
+  get: () => props.checkedRowKeys,
+  set: (value: number[]) => emit('update:checkedRowKeys', value),
+});
+
+const {
+  groupedSnapshots,
+  expandedPackageNames,
+  expandedActivityNames,
+  checkedSet,
+  snapshotViewedTime,
+  batchDelete,
+  previewUrlMap,
+  previewLoadingMap,
+  previewErrorMap,
+  previewSnapshot,
+  downloadSnapshotZip,
+  downloadSnapshotImage,
+  shareSnapshotZipUrl,
+  shareSnapshotImageUrl,
+  deleteSnapshot,
+  ensurePreview,
+  getGroupSnapshotIds,
+  getActivitySnapshotIds,
+  getCheckedStats,
+  setCheckedByIds,
+  toggleChecked,
+  getItemAppName,
+  getItemDeviceText,
+  getItemShortTimeText,
+  getItemCreateTimeText,
+  getItemImportTimeText,
+} = useDevicePlus({
+  snapshots: toRef(props, 'snapshots'),
+  checkedRowKeys: checkedRowKeysModel,
+  refreshSnapshots: props.refreshSnapshots,
+});
+</script>
+
+<template>
+  <div class="plus-device-content">
+    <div
+      v-if="checkedRowKeysModel.length"
+      class="plus-device-batch-bar surface-card"
+    >
+      <NButton
+        type="error"
+        size="small"
+        :loading="batchDelete.loading"
+        @click="batchDelete.invoke"
+      >
+        批量删除
+      </NButton>
+      <span class="plus-device-batch-text">
+        已选中 {{ checkedRowKeysModel.length }} 个快照
+      </span>
+    </div>
+
+    <div v-if="!groupedSnapshots.length" py-40px text-center opacity-70>
+      暂无快照
+    </div>
+    <NCollapse
+      v-else
+      v-model:expandedNames="expandedPackageNames"
+      :accordion="false"
+    >
+      <NCollapseItem
+        v-for="group in groupedSnapshots"
+        :key="group.packageName"
+        :name="group.packageName"
+      >
+        <template #header>
+          <div flex items-center gap-8px>
+            <NCheckbox
+              :checked="getCheckedStats(getGroupSnapshotIds(group)).checked"
+              :indeterminate="
+                getCheckedStats(getGroupSnapshotIds(group)).indeterminate
+              "
+              @click.stop
+              @update:checked="
+                setCheckedByIds(getGroupSnapshotIds(group), $event)
+              "
+            />
+            <NTag type="info" size="small">包名</NTag>
+            <code>{{ `${group.appName} (${group.packageName})` }}</code>
+            <NTag size="small">{{ group.activities.length }} Activities</NTag>
+          </div>
+        </template>
+        <NCollapse
+          v-model:expandedNames="expandedActivityNames"
+          :accordion="false"
+        >
+          <NCollapseItem
+            v-for="activity in group.activities"
+            :key="`${group.packageName}::${activity.activityId}`"
+            :name="`${group.packageName}::${activity.activityId}`"
+          >
+            <template #header>
+              <div flex items-center gap-8px>
+                <NCheckbox
+                  :checked="
+                    getCheckedStats(getActivitySnapshotIds(activity)).checked
+                  "
+                  :indeterminate="
+                    getCheckedStats(getActivitySnapshotIds(activity))
+                      .indeterminate
+                  "
+                  @click.stop
+                  @update:checked="
+                    setCheckedByIds(getActivitySnapshotIds(activity), $event)
+                  "
+                />
+                <NTag type="success" size="small">Activity</NTag>
+                <code>{{ activity.activityId }}</code>
+                <NTag size="small"
+                  >{{ activity.snapshots.length }} snapshots</NTag
+                >
+              </div>
+            </template>
+            <NSpace vertical :size="6">
+              <div
+                v-for="item in activity.snapshots"
+                :key="item.id"
+                class="rounded-8px border border-solid px-10px py-6px transition-colors"
+                :class="[
+                  snapshotViewedTime[item.id]
+                    ? 'snapshot-row-viewed'
+                    : 'surface-card',
+                ]"
+              >
+                <div flex items-start gap-10px flex-wrap>
+                  <NCheckbox
+                    :checked="checkedSet.has(item.id)"
+                    @update:checked="toggleChecked(item.id, $event)"
+                  />
+                  <NPopover
+                    trigger="hover"
+                    placement="right-start"
+                    :flip="true"
+                    :shift="true"
+                    @update:show="
+                      if ($event) {
+                        ensurePreview(item.id);
+                      }
+                    "
+                  >
+                    <template #trigger>
+                      <div
+                        class="min-w-0 inline-flex max-w-full cursor-default select-text flex-col"
+                        @mouseenter="ensurePreview(item.id)"
+                      >
+                        <div flex items-center gap-6px leading-18px>
+                          <NTag size="small" type="warning">
+                            {{ getItemShortTimeText(item) }}
+                          </NTag>
+                          <NTag size="small">
+                            {{ getItemImportTimeText(item) }}
+                          </NTag>
+                          <NTag
+                            v-if="snapshotViewedTime[item.id]"
+                            size="small"
+                            type="success"
+                          >
+                            已查看
+                          </NTag>
+                          <span class="truncate font-600">
+                            {{ getItemAppName(item) }}
+                          </span>
+                        </div>
+                        <div text-12px mt-2px class="font-600">
+                          界面ID: {{ item.activityId || '(unknown)' }}
+                        </div>
+                        <div mt-4px text-12px class="opacity-75">
+                          <span>
+                            创建时间:
+                            {{ getItemCreateTimeText(item) }}
+                          </span>
+                          <span class="mx-6px opacity-45">|</span>
+                          <span>
+                            导入时间: {{ getItemImportTimeText(item) }}
+                          </span>
+                        </div>
+                        <div mt-2px text-12px class="opacity-70">
+                          <span>设备: {{ getItemDeviceText(item) }}</span>
+                          <span class="mx-6px opacity-45">|</span>
+                          <span>应用ID: {{ item.appId }}</span>
+                          <span class="mx-6px opacity-45">|</span>
+                          <span>
+                            版本代码:
+                            {{ getAppInfo(item).versionCode }}
+                          </span>
+                          <span class="mx-6px opacity-45">|</span>
+                          <span>
+                            版本号:
+                            {{ getAppInfo(item).versionName || 'unknown' }}
+                          </span>
+                        </div>
+                      </div>
+                    </template>
+                    <div class="inline-block w-fit max-w-90vw">
+                      <img
+                        v-if="previewUrlMap[item.id]"
+                        :src="previewUrlMap[item.id]"
+                        class="block h-auto w-auto max-h-320px max-w-80vw rounded-6px"
+                        alt="preview"
+                      />
+                      <div v-else py-20px text-center opacity-70>
+                        {{
+                          previewErrorMap[item.id] ||
+                          (previewLoadingMap[item.id]
+                            ? '预览加载中...'
+                            : '暂无预览')
+                        }}
+                      </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>
+                  <NPopover>
+                    <template #trigger>
+                      <NButton text>
+                        <template #icon><SvgIcon name="export" /></template>
+                      </NButton>
+                    </template>
+                    <NSpace vertical>
+                      <NButton
+                        :loading="downloadSnapshotZip.loading[item.id]"
+                        @click="downloadSnapshotZip.invoke(item)"
+                      >
+                        下载-快照
+                      </NButton>
+                      <NButton
+                        :loading="downloadSnapshotImage.loading[item.id]"
+                        @click="downloadSnapshotImage.invoke(item)"
+                      >
+                        下载-图片
+                      </NButton>
+                    </NSpace>
+                  </NPopover>
+                  <NPopover>
+                    <template #trigger>
+                      <NButton text>
+                        <template #icon><SvgIcon name="share" /></template>
+                      </NButton>
+                    </template>
+                    <NSpace vertical>
+                      <NButton
+                        :loading="shareSnapshotZipUrl.loading[item.id]"
+                        @click="shareSnapshotZipUrl.invoke(item)"
+                      >
+                        生成链接-快照
+                      </NButton>
+                      <NButton
+                        :loading="shareSnapshotImageUrl.loading[item.id]"
+                        @click="shareSnapshotImageUrl.invoke(item)"
+                      >
+                        生成链接-图片
+                      </NButton>
+                    </NSpace>
+                  </NPopover>
+                  <NTooltip>
+                    <template #trigger>
+                      <span class="inline-flex">
+                        <NButton
+                          text
+                          type="error"
+                          :loading="deleteSnapshot.loading[item.id]"
+                          @click="deleteSnapshot.invoke(item)"
+                        >
+                          <template #icon><SvgIcon name="delete" /></template>
+                        </NButton>
+                      </span>
+                    </template>
+                    删除快照
+                  </NTooltip>
+                </div>
+              </div>
+            </NSpace>
+          </NCollapseItem>
+        </NCollapse>
+      </NCollapseItem>
+    </NCollapse>
+  </div>
+</template>
+
+<style scoped>
+.plus-device-content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 6px;
+}
+
+.plus-device-batch-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+}
+
+.plus-device-batch-text {
+  font-size: 12px;
+  opacity: 0.8;
+}
+</style>
diff --git a/src/components/plus/home/HomeSnapshotGroups.vue b/src/components/plus/home/HomeSnapshotGroups.vue
new file mode 100644
index 0000000..047ba7f
--- /dev/null
+++ b/src/components/plus/home/HomeSnapshotGroups.vue
@@ -0,0 +1,408 @@
+<script setup lang="ts">
+import { computed, toRef } from 'vue';
+import ActionCard from '@/components/ActionCard.vue';
+import DeviceControlTools from '@/components/DeviceControlTools.vue';
+import SvgIcon from '@/components/SvgIcon.vue';
+import { useHomePlus } from '@/composables/plus/useHomePlus';
+
+const props = defineProps<{
+  snapshots: Snapshot[];
+  checkedRowKeys: number[];
+  loading: boolean;
+  updateSnapshots: () => Promise<void>;
+}>();
+
+const emit = defineEmits<{
+  'update:checkedRowKeys': [value: number[]];
+}>();
+
+const checkedRowKeysModel = computed({
+  get: () => props.checkedRowKeys,
+  set: (value: number[]) => emit('update:checkedRowKeys', value),
+});
+
+const {
+  groupedSnapshots,
+  lowMemoryMode,
+  snapshotDisplayLimit,
+  expandedPackageNames,
+  expandedActivityNames,
+  checkedSet,
+  allFilteredSnapshotIds,
+  allFilteredCheckedStats,
+  groupRemarkModal,
+  snapshotViewedTime,
+  previewUrlMap,
+  previewLoadingMap,
+  previewErrorMap,
+  ensurePreview,
+  getVisibleSnapshots,
+  showMoreSnapshots,
+  isActivityFullyShown,
+  getActivitySnapshotIds,
+  getGroupSnapshotIds,
+  getGroupCheckedStats,
+  getActivityCheckedStats,
+  setCheckedByIds,
+  toggleChecked,
+  getGroupRemark,
+  getPackageRemarkKey,
+  getActivityRemarkKey,
+  openGroupRemarkModal,
+  saveGroupRemark,
+  goToSnapshot,
+  getItemShortTimeText,
+  getItemCreateTimeText,
+  getItemImportTimeText,
+  getItemDeviceText,
+  getItemAppName,
+} = useHomePlus({
+  snapshots: toRef(props, 'snapshots'),
+  checkedRowKeys: checkedRowKeysModel,
+});
+</script>
+
+<template>
+  <div class="plus-home-content">
+    <div class="plus-home-toolbar surface-card">
+      <NCheckbox
+        v-if="allFilteredSnapshotIds.length"
+        :checked="allFilteredCheckedStats.checked"
+        :indeterminate="allFilteredCheckedStats.indeterminate"
+        @update:checked="setCheckedByIds(allFilteredSnapshotIds, $event)"
+      >
+        {{ `全选当前结果 (${allFilteredSnapshotIds.length})` }}
+      </NCheckbox>
+      <div class="plus-home-toolbar-spacer" />
+      <DeviceControlTools icon-size="20px" />
+    </div>
+
+    <NSpin :show="loading" class="h-full">
+      <div
+        v-if="!loading && !groupedSnapshots.length"
+        py-40px
+        text-center
+        opacity-70
+      >
+        未找到匹配快照
+      </div>
+      <NCollapse
+        v-else
+        v-model:expandedNames="expandedPackageNames"
+        :accordion="false"
+        :displayDirective="lowMemoryMode ? 'if' : 'show'"
+      >
+        <NCollapseItem
+          v-for="group in groupedSnapshots"
+          :key="group.packageName"
+          :name="group.packageName"
+        >
+          <template #header>
+            <div flex items-center gap-8px>
+              <NCheckbox
+                :checked="getGroupCheckedStats(group.packageName).checked"
+                :indeterminate="
+                  getGroupCheckedStats(group.packageName).indeterminate
+                "
+                @click.stop
+                @update:checked="
+                  setCheckedByIds(getGroupSnapshotIds(group), $event)
+                "
+              />
+              <NTag type="info" size="small">应用</NTag>
+              <code>{{ `${group.appName} (${group.packageName})` }}</code>
+              <NTag size="small">{{ group.activities.length }} 个界面</NTag>
+              <NTag
+                v-if="getGroupRemark(getPackageRemarkKey(group.packageName))"
+                size="small"
+                class="max-w-240px"
+              >
+                {{ getGroupRemark(getPackageRemarkKey(group.packageName)) }}
+              </NTag>
+              <NButton
+                text
+                size="tiny"
+                @click.stop="
+                  openGroupRemarkModal(
+                    getPackageRemarkKey(group.packageName),
+                    `应用备注: ${group.packageName}`,
+                  )
+                "
+              >
+                备注
+              </NButton>
+            </div>
+          </template>
+          <NCollapse
+            v-model:expandedNames="expandedActivityNames"
+            :accordion="false"
+            :displayDirective="lowMemoryMode ? 'if' : 'show'"
+          >
+            <NCollapseItem
+              v-for="activity in group.activities"
+              :key="`${group.packageName}::${activity.activityId}`"
+              :name="`${group.packageName}::${activity.activityId}`"
+            >
+              <template #header>
+                <div flex items-center gap-8px>
+                  <NCheckbox
+                    :checked="
+                      getActivityCheckedStats(
+                        group.packageName,
+                        activity.activityId,
+                      ).checked
+                    "
+                    :indeterminate="
+                      getActivityCheckedStats(
+                        group.packageName,
+                        activity.activityId,
+                      ).indeterminate
+                    "
+                    @click.stop
+                    @update:checked="
+                      setCheckedByIds(getActivitySnapshotIds(activity), $event)
+                    "
+                  />
+                  <NTag type="success" size="small">Activity</NTag>
+                  <code>{{ activity.activityId }}</code>
+                  <NTag size="small"
+                    >{{ activity.snapshots.length }} 个快照</NTag
+                  >
+                  <NTag
+                    v-if="
+                      getGroupRemark(
+                        getActivityRemarkKey(
+                          group.packageName,
+                          activity.activityId,
+                        ),
+                      )
+                    "
+                    size="small"
+                    class="max-w-240px"
+                  >
+                    {{
+                      getGroupRemark(
+                        getActivityRemarkKey(
+                          group.packageName,
+                          activity.activityId,
+                        ),
+                      )
+                    }}
+                  </NTag>
+                  <NButton
+                    text
+                    size="tiny"
+                    @click.stop="
+                      openGroupRemarkModal(
+                        getActivityRemarkKey(
+                          group.packageName,
+                          activity.activityId,
+                        ),
+                        `界面备注: ${activity.activityId}`,
+                      )
+                    "
+                  >
+                    备注
+                  </NButton>
+                </div>
+              </template>
+              <NSpace vertical :size="6">
+                <div
+                  v-for="item in getVisibleSnapshots(
+                    group.packageName,
+                    activity,
+                  )"
+                  :key="item.id"
+                  class="rounded-8px border border-solid px-10px py-6px transition-colors"
+                  :class="[
+                    snapshotViewedTime[item.id]
+                      ? 'snapshot-row-viewed'
+                      : 'surface-card',
+                  ]"
+                >
+                  <div flex items-start gap-10px flex-wrap>
+                    <NCheckbox
+                      :checked="checkedSet.has(item.id)"
+                      @update:checked="toggleChecked(item.id, $event)"
+                    />
+                    <NPopover
+                      trigger="hover"
+                      placement="right-start"
+                      :flip="true"
+                      :shift="true"
+                      @update:show="
+                        if ($event) {
+                          ensurePreview(item.id);
+                        }
+                      "
+                    >
+                      <template #trigger>
+                        <div
+                          class="min-w-0 inline-flex max-w-full cursor-default select-text flex-col"
+                          @mouseenter="ensurePreview(item.id)"
+                        >
+                          <div flex items-center gap-6px leading-18px>
+                            <NTag size="small" type="warning">
+                              {{ getItemShortTimeText(item) }}
+                            </NTag>
+                            <NTag
+                              v-if="snapshotViewedTime[item.id]"
+                              size="small"
+                              type="success"
+                            >
+                              已查看
+                            </NTag>
+                            <span class="truncate font-600">
+                              {{ getItemAppName(item) }}
+                            </span>
+                          </div>
+                          <div text-12px mt-2px class="font-600">
+                            界面ID: {{ item.activityId || '(unknown)' }}
+                          </div>
+                          <div
+                            text-11px
+                            opacity-65
+                            leading-18px
+                            flex
+                            flex-wrap
+                            gap-x-10px
+                          >
+                            <span mr-10px>
+                              创建:
+                              {{ getItemCreateTimeText(item) }}
+                            </span>
+                            <span>
+                              导入:
+                              {{ getItemImportTimeText(item) }}
+                            </span>
+                          </div>
+                          <div
+                            text-11px
+                            opacity-65
+                            leading-18px
+                            flex
+                            flex-wrap
+                            gap-x-10px
+                          >
+                            <span mr-10px>
+                              设备:
+                              {{ getItemDeviceText(item) }}
+                            </span>
+                            <span mr-10px>应用ID: {{ item.appId }}</span>
+                            <span mr-10px>
+                              版本代码:
+                              {{ item.appInfo?.versionCode }}
+                            </span>
+                            <span>
+                              版本号:
+                              {{ item.appInfo?.versionName || 'unknown' }}
+                            </span>
+                          </div>
+                        </div>
+                      </template>
+                      <div class="inline-block w-fit max-w-90vw">
+                        <img
+                          v-if="previewUrlMap[item.id]"
+                          :src="previewUrlMap[item.id]"
+                          class="block h-auto w-auto max-h-320px max-w-80vw rounded-6px"
+                          alt="preview"
+                        />
+                        <div v-else py-20px text-center opacity-70>
+                          {{
+                            previewErrorMap[item.id] ||
+                            (previewLoadingMap[item.id]
+                              ? '预览加载中...'
+                              : '暂无预览')
+                          }}
+                        </div>
+                      </div>
+                    </NPopover>
+                    <NButton
+                      text
+                      size="small"
+                      class="ml-auto shrink-0"
+                      @click="goToSnapshot(item.id)"
+                    >
+                      <template #icon><SvgIcon name="code" /></template>
+                    </NButton>
+                    <ActionCard
+                      :snapshot="item"
+                      :showPreview="false"
+                      :onDelete="updateSnapshots"
+                    />
+                  </div>
+                </div>
+                <div
+                  v-if="
+                    activity.snapshots.length > snapshotDisplayLimit &&
+                    !isActivityFullyShown(
+                      group.packageName,
+                      activity.activityId,
+                    )
+                  "
+                  class="text-center py-6px"
+                >
+                  <NButton
+                    quaternary
+                    size="small"
+                    @click="
+                      showMoreSnapshots(group.packageName, activity.activityId)
+                    "
+                  >
+                    {{
+                      `显示更多（剩余 ${activity.snapshots.length - snapshotDisplayLimit} 条）`
+                    }}
+                  </NButton>
+                </div>
+              </NSpace>
+            </NCollapseItem>
+          </NCollapse>
+        </NCollapseItem>
+      </NCollapse>
+    </NSpin>
+
+    <NModal
+      :show="groupRemarkModal.show"
+      preset="dialog"
+      :title="groupRemarkModal.title || '分组备注'"
+      :showIcon="false"
+      positiveText="保存"
+      negativeText="取消"
+      @positiveClick="saveGroupRemark"
+      @negativeClick="groupRemarkModal.show = false"
+      @close="groupRemarkModal.show = false"
+    >
+      <NInput
+        v-model:value="groupRemarkModal.value"
+        type="textarea"
+        maxlength="160"
+        show-count
+        :autosize="{ minRows: 3, maxRows: 6 }"
+        placeholder="请输入备注"
+      />
+    </NModal>
+  </div>
+</template>
+
+<style scoped>
+.plus-home-content {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.plus-home-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+}
+
+.plus-home-toolbar-spacer {
+  flex: 1;
+}
+</style>
diff --git a/src/components/plus/snapshot/AttrNameCell.vue b/src/components/plus/snapshot/AttrNameCell.vue
new file mode 100644
index 0000000..1c4ab01
--- /dev/null
+++ b/src/components/plus/snapshot/AttrNameCell.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue';
+
+type AttrTip = {
+  desc: string;
+  type: 'info' | 'quickFind';
+};
+
+defineProps<{
+  name: string;
+  explain: string;
+  tip?: AttrTip;
+}>();
+</script>
+
+<template>
+  <div flex justify-between items-center gap-4px>
+    <NTooltip
+      :delay="300"
+      placement="top-start"
+      :show-arrow="true"
+      :keep-alive-on-hover="true"
+    >
+      <template #trigger>
+        <span>{{ name }}</span>
+      </template>
+      <div class="p-2px">
+        <div>{{ explain }}</div>
+      </div>
+    </NTooltip>
+    <NTooltip
+      v-if="tip"
+      :delay="300"
+      placement="top-start"
+      :show-arrow="true"
+      :keep-alive-on-hover="true"
+    >
+      <template #trigger>
+        <NIcon
+          size="14"
+          :style="{
+            color:
+              tip.type === 'quickFind'
+                ? 'var(--quickfind-color)'
+                : 'var(--info-color)',
+          }"
+          class="cursor-help transition-all hover:scale-110"
+          @click.stop
+        >
+          <SvgIcon v-if="tip.type === 'info'" name="info" />
+          <SvgIcon
+            v-else-if="tip.type === 'quickFind'"
+            name="ok"
+            class="quickfind-icon"
+          />
+        </NIcon>
+      </template>
+      <div class="p-2px">
+        <div>{{ tip.desc }}</div>
+      </div>
+    </NTooltip>
+  </div>
+</template>
diff --git a/src/components/plus/snapshot/AttrValueCell.vue b/src/components/plus/snapshot/AttrValueCell.vue
new file mode 100644
index 0000000..d5db4cd
--- /dev/null
+++ b/src/components/plus/snapshot/AttrValueCell.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = defineProps<{
+  name: string;
+  desc?: string | null;
+  isNull: boolean;
+}>();
+
+const displayDesc = computed(() => {
+  if (
+    props.desc === null ||
+    props.desc === undefined ||
+    props.desc === 'undefined'
+  ) {
+    return '--';
+  }
+  return props.desc;
+});
+</script>
+
+<template>
+  <NEllipsis
+    class="w-[calc(var(--gkd-w)*0.12)]"
+    :class="{
+      'text-left direction-rtl': name == 'id',
+      'opacity-50': isNull,
+    }"
+  >
+    {{ displayDesc }}
+  </NEllipsis>
+</template>
diff --git a/src/components/plus/snapshot/FastQueryIndicator.vue b/src/components/plus/snapshot/FastQueryIndicator.vue
new file mode 100644
index 0000000..4396965
--- /dev/null
+++ b/src/components/plus/snapshot/FastQueryIndicator.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { FastQueryMeta } from '@/composables/plus/useFastQueryIndicator';
+
+const props = withDefaults(
+  defineProps<{
+    meta?: FastQueryMeta | null;
+  }>(),
+  {
+    meta: null,
+  },
+);
+
+const indicatorColor = computed(() => {
+  if (!props.meta) return '';
+  if (!props.meta.support) return '#ef4444';
+  return props.meta.local ? '#facc15' : '#22c55e';
+});
+
+const indicatorText = computed(() => {
+  if (!props.meta) return '';
+  if (!props.meta.support) return '不满足快查';
+  return props.meta.local ? '局部快速查询' : '支持快速查询';
+});
+</script>
+
+<template>
+  <NTooltip
+    v-if="meta"
+    trigger="hover"
+    placement="top"
+    class="fast-query-indicator-wrap"
+  >
+    <template #trigger>
+      <SvgIcon
+        :name="meta.support ? 'ok' : 'warn'"
+        class="fast-query-indicator"
+        :style="{
+          color: indicatorColor,
+          '--svg-w': '16px',
+          '--svg-h': '16px',
+        }"
+      />
+    </template>
+    {{ indicatorText }}
+  </NTooltip>
+</template>
+
+<style scoped>
+.fast-query-indicator-wrap {
+  display: inline-flex;
+  align-items: center;
+}
+</style>
diff --git a/src/components/plus/snapshot/PrivacyBlurEditor.vue b/src/components/plus/snapshot/PrivacyBlurEditor.vue
new file mode 100644
index 0000000..c0f1829
--- /dev/null
+++ b/src/components/plus/snapshot/PrivacyBlurEditor.vue
@@ -0,0 +1,762 @@
+<script setup lang="ts">
+type ToolMode = 'select' | 'brush' | 'blur' | 'rect' | 'text';
+type Point = { x: number; y: number };
+
+type StrokeObj = {
+  id: string;
+  kind: 'stroke';
+  mode: 'brush' | 'blur';
+  size: number;
+  color: string;
+  points: Point[];
+};
+type RectObj = {
+  id: string;
+  kind: 'rect';
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  color: string;
+  lineWidth: number;
+};
+type TextObj = {
+  id: string;
+  kind: 'text';
+  x: number;
+  y: number;
+  text: string;
+  color: string;
+  fontSize: number;
+};
+type DrawObj = StrokeObj | RectObj | TextObj;
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean;
+    src?: string;
+    hostImage?: HTMLImageElement;
+  }>(),
+  { src: '' },
+);
+
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void;
+  (e: 'apply', value: string): void;
+  (e: 'reset'): void;
+}>();
+
+const drawCanvasRef = shallowRef<HTMLCanvasElement>();
+const textInputRef = shallowRef<HTMLTextAreaElement>();
+const imageRef = shallowRef<HTMLImageElement>();
+const blurDisplayRef = shallowRef<HTMLCanvasElement>();
+
+const stageRect = shallowRef({ left: 0, top: 0, width: 0, height: 0 });
+const drawW = computed(() => Math.max(1, Math.round(stageRect.value.width)));
+const drawH = computed(() => Math.max(1, Math.round(stageRect.value.height)));
+const naturalW = shallowRef(0);
+const naturalH = shallowRef(0);
+
+const toolMode = shallowRef<ToolMode>('blur');
+const brushSize = shallowRef(12);
+const blurSize = shallowRef(20);
+const rectWidth = shallowRef(2);
+const textSize = shallowRef(16);
+const brushColor = shallowRef('#6ee7ff');
+const textColor = shallowRef('#ffffff');
+
+const objects = shallowRef<DrawObj[]>([]);
+const selectedId = shallowRef<string>();
+const undoStack = shallowRef<DrawObj[][]>([]);
+const redoStack = shallowRef<DrawObj[][]>([]);
+
+const drawing = shallowRef(false);
+const currentStroke = shallowRef<StrokeObj>();
+const rectStart = shallowRef<Point>();
+const rectCurrent = shallowRef<Point>();
+const dragStart = shallowRef<Point>();
+const dragOrigin = shallowRef<DrawObj>();
+const textDraft = shallowRef<{ x: number; y: number; value: string }>();
+let rafId = 0;
+
+const cursorStyle = computed(() => {
+  if (toolMode.value === 'text') return 'text';
+  if (toolMode.value === 'select') return 'move';
+  return 'crosshair';
+});
+
+const toolbarStyle = computed(() => {
+  const gap = 8;
+  const w = 228;
+  const left = Math.min(
+    window.innerWidth - w - 8,
+    Math.max(8, stageRect.value.left + stageRect.value.width + gap),
+  );
+  const top = Math.min(
+    Math.max(8, stageRect.value.top),
+    Math.max(8, window.innerHeight - 320),
+  );
+  return {
+    left: `${left}px`,
+    top: `${top}px`,
+    width: `${w}px`,
+  };
+});
+
+const uid = () => `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+const cloneObjects = (v: DrawObj[]) => structuredClone(v);
+const close = () => emit('update:show', false);
+
+const syncStageFromHost = () => {
+  const img = props.hostImage;
+  if (!img) return;
+  const rect = img.getBoundingClientRect();
+  if (rect.width <= 1 || rect.height <= 1) return;
+  const oldW = drawW.value;
+  const oldH = drawH.value;
+  stageRect.value = {
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+  };
+  if (drawCanvasRef.value && (oldW !== drawW.value || oldH !== drawH.value)) {
+    drawCanvasRef.value.width = drawW.value;
+    drawCanvasRef.value.height = drawH.value;
+    rebuildBlurDisplay();
+    renderDrawing();
+  }
+};
+
+const startSyncLoop = () => {
+  cancelAnimationFrame(rafId);
+  const tick = () => {
+    if (!props.show) return;
+    syncStageFromHost();
+    rafId = requestAnimationFrame(tick);
+  };
+  rafId = requestAnimationFrame(tick);
+};
+
+const stopSyncLoop = () => {
+  cancelAnimationFrame(rafId);
+};
+
+const getCanvasPoint = (ev: PointerEvent) => {
+  const c = drawCanvasRef.value;
+  if (!c) return { x: 0, y: 0 };
+  const rect = c.getBoundingClientRect();
+  return {
+    x: Math.max(0, Math.min(rect.width, ev.clientX - rect.left)),
+    y: Math.max(0, Math.min(rect.height, ev.clientY - rect.top)),
+  };
+};
+
+const pushUndo = () => {
+  undoStack.value = [
+    ...undoStack.value.slice(-29),
+    cloneObjects(objects.value),
+  ];
+  redoStack.value = [];
+};
+
+const undo = () => {
+  if (!undoStack.value.length) return;
+  const prev = undoStack.value[undoStack.value.length - 1];
+  undoStack.value = undoStack.value.slice(0, -1);
+  redoStack.value = [
+    ...redoStack.value.slice(-29),
+    cloneObjects(objects.value),
+  ];
+  objects.value = cloneObjects(prev);
+  selectedId.value = undefined;
+  renderDrawing();
+};
+
+const redo = () => {
+  if (!redoStack.value.length) return;
+  const next = redoStack.value[redoStack.value.length - 1];
+  redoStack.value = redoStack.value.slice(0, -1);
+  undoStack.value = [
+    ...undoStack.value.slice(-29),
+    cloneObjects(objects.value),
+  ];
+  objects.value = cloneObjects(next);
+  selectedId.value = undefined;
+  renderDrawing();
+};
+
+const normalizeRect = (a: Point, b: Point) => ({
+  x: Math.min(a.x, b.x),
+  y: Math.min(a.y, b.y),
+  w: Math.abs(a.x - b.x),
+  h: Math.abs(a.y - b.y),
+});
+
+const distToSegment = (p: Point, a: Point, b: Point) => {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const len2 = dx * dx + dy * dy;
+  if (!len2) return Math.hypot(p.x - a.x, p.y - a.y);
+  const t = Math.max(
+    0,
+    Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / len2),
+  );
+  const qx = a.x + t * dx;
+  const qy = a.y + t * dy;
+  return Math.hypot(p.x - qx, p.y - qy);
+};
+
+const hitTest = (p: Point) => {
+  const list = [...objects.value].reverse();
+  for (const obj of list) {
+    if (obj.kind === 'rect') {
+      if (
+        p.x >= obj.x - 6 &&
+        p.x <= obj.x + obj.w + 6 &&
+        p.y >= obj.y - 6 &&
+        p.y <= obj.y + obj.h + 6
+      ) {
+        return obj.id;
+      }
+      continue;
+    }
+    if (obj.kind === 'text') {
+      const w = obj.text.length * obj.fontSize * 0.62 + 8;
+      const h = obj.fontSize * 1.4;
+      if (
+        p.x >= obj.x - 4 &&
+        p.x <= obj.x + w &&
+        p.y >= obj.y - h &&
+        p.y <= obj.y + 4
+      ) {
+        return obj.id;
+      }
+      continue;
+    }
+    const r = obj.size / 2 + 5;
+    for (let i = 1; i < obj.points.length; i++) {
+      if (distToSegment(p, obj.points[i - 1], obj.points[i]) <= r)
+        return obj.id;
+    }
+  }
+  return undefined;
+};
+
+const drawStrokePath = (
+  ctx: CanvasRenderingContext2D,
+  points: Point[],
+  lineWidth: number,
+  color: string,
+) => {
+  if (!points.length) return;
+  ctx.save();
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth;
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
+  ctx.stroke();
+  ctx.restore();
+};
+
+const createGaussianBlurCanvas = (
+  source: CanvasImageSource,
+  width: number,
+  height: number,
+  radius: number,
+) => {
+  const c = document.createElement('canvas');
+  c.width = width;
+  c.height = height;
+  const ctx = c.getContext('2d');
+  if (!ctx) return c;
+  ctx.filter = `blur(${radius}px)`;
+  ctx.drawImage(source, 0, 0, width, height);
+  ctx.filter = 'none';
+  return c;
+};
+
+const rebuildBlurDisplay = () => {
+  const img = imageRef.value;
+  if (!img) return;
+  blurDisplayRef.value = createGaussianBlurCanvas(
+    img,
+    drawW.value,
+    drawH.value,
+    blurSize.value,
+  );
+};
+
+const drawObjects = (
+  ctx: CanvasRenderingContext2D,
+  list: DrawObj[],
+  ratio: number,
+  withSelection: boolean,
+) => {
+  const blurStrokes = list.filter(
+    (o): o is StrokeObj => o.kind === 'stroke' && o.mode === 'blur',
+  );
+  if (blurStrokes.length) {
+    const w = Math.max(1, Math.round(drawW.value * ratio));
+    const h = Math.max(1, Math.round(drawH.value * ratio));
+    const blurMask = document.createElement('canvas');
+    blurMask.width = w;
+    blurMask.height = h;
+    const mctx = blurMask.getContext('2d');
+    if (mctx) {
+      blurStrokes.forEach((s) =>
+        drawStrokePath(
+          mctx,
+          s.points.map((p) => ({ x: p.x * ratio, y: p.y * ratio })),
+          s.size * ratio,
+          '#fff',
+        ),
+      );
+      const blurSource =
+        ratio === 1 && blurDisplayRef.value
+          ? blurDisplayRef.value
+          : createGaussianBlurCanvas(
+              imageRef.value as CanvasImageSource,
+              w,
+              h,
+              blurSize.value * ratio,
+            );
+      const layer = document.createElement('canvas');
+      layer.width = w;
+      layer.height = h;
+      const lctx = layer.getContext('2d');
+      if (lctx) {
+        lctx.drawImage(blurSource, 0, 0, w, h);
+        lctx.globalCompositeOperation = 'destination-in';
+        lctx.drawImage(blurMask, 0, 0);
+        lctx.globalCompositeOperation = 'source-over';
+        ctx.drawImage(layer, 0, 0);
+      }
+    }
+  }
+
+  list.forEach((obj) => {
+    if (obj.kind === 'stroke' && obj.mode === 'brush') {
+      drawStrokePath(
+        ctx,
+        obj.points.map((p) => ({ x: p.x * ratio, y: p.y * ratio })),
+        obj.size * ratio,
+        obj.color,
+      );
+      if (withSelection && selectedId.value === obj.id) {
+        drawStrokePath(
+          ctx,
+          obj.points.map((p) => ({ x: p.x * ratio, y: p.y * ratio })),
+          obj.size * ratio + 2,
+          '#ffffffaa',
+        );
+      }
+      return;
+    }
+    if (obj.kind === 'rect') {
+      ctx.save();
+      ctx.strokeStyle = obj.color;
+      ctx.lineWidth = obj.lineWidth * ratio;
+      ctx.strokeRect(
+        obj.x * ratio,
+        obj.y * ratio,
+        obj.w * ratio,
+        obj.h * ratio,
+      );
+      if (withSelection && selectedId.value === obj.id) {
+        ctx.setLineDash([5, 4]);
+        ctx.strokeStyle = '#ffffffcc';
+        ctx.lineWidth = 1;
+        ctx.strokeRect(
+          obj.x * ratio,
+          obj.y * ratio,
+          obj.w * ratio,
+          obj.h * ratio,
+        );
+      }
+      ctx.restore();
+      return;
+    }
+    if (obj.kind === 'text') {
+      ctx.save();
+      ctx.fillStyle = obj.color;
+      ctx.font = `${obj.fontSize * ratio}px sans-serif`;
+      ctx.textBaseline = 'alphabetic';
+      ctx.fillText(obj.text, obj.x * ratio, obj.y * ratio);
+      if (withSelection && selectedId.value === obj.id) {
+        const width = ctx.measureText(obj.text).width;
+        const height = obj.fontSize * ratio;
+        ctx.setLineDash([5, 3]);
+        ctx.strokeStyle = '#ffffffcc';
+        ctx.strokeRect(
+          obj.x * ratio - 2,
+          obj.y * ratio - height,
+          width + 4,
+          height + 4,
+        );
+      }
+      ctx.restore();
+    }
+  });
+};
+
+const renderDrawing = () => {
+  const c = drawCanvasRef.value;
+  if (!c) return;
+  const ctx = c.getContext('2d');
+  if (!ctx) return;
+  ctx.clearRect(0, 0, c.width, c.height);
+  drawObjects(ctx, objects.value, 1, true);
+  if (
+    drawing.value &&
+    toolMode.value === 'rect' &&
+    rectStart.value &&
+    rectCurrent.value
+  ) {
+    const r = normalizeRect(rectStart.value, rectCurrent.value);
+    ctx.save();
+    ctx.setLineDash([6, 4]);
+    ctx.strokeStyle = '#3f8cff';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(r.x, r.y, r.w, r.h);
+    ctx.restore();
+  }
+};
+
+const initEditor = async () => {
+  if (!props.show || !props.src) return;
+  const img = new Image();
+  img.src = props.src;
+  await new Promise<void>((resolve, reject) => {
+    img.onload = () => resolve();
+    img.onerror = () => reject(new Error('图片加载失败'));
+  });
+  imageRef.value = img;
+  naturalW.value = img.naturalWidth;
+  naturalH.value = img.naturalHeight;
+  objects.value = [];
+  selectedId.value = undefined;
+  undoStack.value = [];
+  redoStack.value = [];
+  textDraft.value = undefined;
+  syncStageFromHost();
+  await nextTick();
+  if (drawCanvasRef.value) {
+    drawCanvasRef.value.width = drawW.value;
+    drawCanvasRef.value.height = drawH.value;
+  }
+  rebuildBlurDisplay();
+  renderDrawing();
+  startSyncLoop();
+};
+
+const commitTextDraft = () => {
+  const d = textDraft.value;
+  if (!d) return;
+  const text = d.value.trim();
+  if (text) {
+    pushUndo();
+    objects.value = [
+      ...objects.value,
+      {
+        id: uid(),
+        kind: 'text',
+        x: d.x,
+        y: d.y,
+        text,
+        color: textColor.value,
+        fontSize: textSize.value,
+      },
+    ];
+  }
+  textDraft.value = undefined;
+  renderDrawing();
+};
+
+const cancelTextDraft = () => {
+  textDraft.value = undefined;
+  renderDrawing();
+};
+
+const onPointerDown = (ev: PointerEvent) => {
+  if (textDraft.value) return;
+  const p = getCanvasPoint(ev);
+  drawing.value = true;
+  (ev.target as HTMLElement).setPointerCapture?.(ev.pointerId);
+
+  if (toolMode.value === 'text') {
+    drawing.value = false;
+    textDraft.value = { x: p.x, y: p.y, value: '' };
+    nextTick(() => textInputRef.value?.focus());
+    return;
+  }
+  if (toolMode.value === 'select') {
+    const id = hitTest(p);
+    selectedId.value = id;
+    if (id) {
+      pushUndo();
+      dragStart.value = p;
+      dragOrigin.value = cloneObjects(objects.value).find((o) => o.id === id);
+    }
+    renderDrawing();
+    return;
+  }
+
+  pushUndo();
+  selectedId.value = undefined;
+
+  if (toolMode.value === 'rect') {
+    rectStart.value = p;
+    rectCurrent.value = p;
+    renderDrawing();
+    return;
+  }
+
+  const mode = toolMode.value === 'brush' ? 'brush' : 'blur';
+  const stroke: StrokeObj = {
+    id: uid(),
+    kind: 'stroke',
+    mode,
+    size: brushSize.value,
+    color: brushColor.value,
+    points: [p],
+  };
+  currentStroke.value = stroke;
+  objects.value = [...objects.value, stroke];
+  renderDrawing();
+};
+
+const onPointerMove = (ev: PointerEvent) => {
+  if (!drawing.value) return;
+  const p = getCanvasPoint(ev);
+
+  if (
+    toolMode.value === 'select' &&
+    selectedId.value &&
+    dragStart.value &&
+    dragOrigin.value
+  ) {
+    const dx = p.x - dragStart.value.x;
+    const dy = p.y - dragStart.value.y;
+    objects.value = objects.value.map((o) => {
+      if (o.id !== selectedId.value) return o;
+      const origin = dragOrigin.value!;
+      if (origin.kind === 'stroke' && o.kind === 'stroke') {
+        return {
+          ...o,
+          points: origin.points.map((pt) => ({ x: pt.x + dx, y: pt.y + dy })),
+        };
+      }
+      if (origin.kind === 'rect' && o.kind === 'rect')
+        return { ...o, x: origin.x + dx, y: origin.y + dy };
+      if (origin.kind === 'text' && o.kind === 'text')
+        return { ...o, x: origin.x + dx, y: origin.y + dy };
+      return o;
+    });
+    renderDrawing();
+    return;
+  }
+
+  if (toolMode.value === 'rect') {
+    rectCurrent.value = p;
+    renderDrawing();
+    return;
+  }
+
+  if (currentStroke.value) {
+    currentStroke.value.points.push(p);
+    objects.value = [...objects.value];
+    renderDrawing();
+  }
+};
+
+const onPointerUp = (ev: PointerEvent) => {
+  if (toolMode.value === 'rect' && rectStart.value && rectCurrent.value) {
+    const r = normalizeRect(rectStart.value, rectCurrent.value);
+    if (r.w > 2 && r.h > 2) {
+      objects.value = [
+        ...objects.value,
+        {
+          id: uid(),
+          kind: 'rect',
+          x: r.x,
+          y: r.y,
+          w: r.w,
+          h: r.h,
+          color: '#ffe066',
+          lineWidth: rectWidth.value,
+        },
+      ];
+    } else {
+      undoStack.value = undoStack.value.slice(0, -1);
+    }
+  }
+  drawing.value = false;
+  currentStroke.value = undefined;
+  rectStart.value = undefined;
+  rectCurrent.value = undefined;
+  dragStart.value = undefined;
+  dragOrigin.value = undefined;
+  renderDrawing();
+  (ev.target as HTMLElement).releasePointerCapture?.(ev.pointerId);
+};
+
+const onKeydown = (ev: KeyboardEvent) => {
+  if (!props.show) return;
+  if (ev.ctrlKey && ev.key.toLowerCase() === 'z') {
+    ev.preventDefault();
+    undo();
+    return;
+  }
+  if (ev.key.toLowerCase() === 'b') toolMode.value = 'brush';
+  if (ev.key.toLowerCase() === 't') toolMode.value = 'text';
+};
+
+const finish = () => {
+  const img = imageRef.value;
+  if (!img || !drawW.value) return;
+  const result = document.createElement('canvas');
+  result.width = naturalW.value;
+  result.height = naturalH.value;
+  const ctx = result.getContext('2d');
+  if (!ctx) return;
+  ctx.drawImage(img, 0, 0, result.width, result.height);
+  const ratio = naturalW.value / drawW.value;
+  drawObjects(ctx, objects.value, ratio, false);
+  emit('apply', result.toDataURL('image/png'));
+  close();
+};
+
+watch(
+  () => [props.show, props.src] as const,
+  ([show]) => {
+    if (show) initEditor().catch(() => undefined);
+    else {
+      textDraft.value = undefined;
+      stopSyncLoop();
+    }
+  },
+  { immediate: true },
+);
+
+watch(blurSize, () => {
+  if (!props.show) return;
+  rebuildBlurDisplay();
+  renderDrawing();
+});
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) window.addEventListener('keydown', onKeydown);
+    else window.removeEventListener('keydown', onKeydown);
+  },
+  { immediate: true },
+);
+
+onScopeDispose(() => {
+  window.removeEventListener('keydown', onKeydown);
+  stopSyncLoop();
+});
+</script>
+
+<template>
+  <div v-if="show && src" class="fixed inset-0 z-40 pointer-events-none">
+    <canvas
+      ref="drawCanvasRef"
+      class="absolute z-2 pointer-events-auto"
+      :style="{
+        left: `${stageRect.left}px`,
+        top: `${stageRect.top}px`,
+        width: `${stageRect.width}px`,
+        height: `${stageRect.height}px`,
+        cursor: cursorStyle,
+      }"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @pointerleave="onPointerUp"
+    />
+    <textarea
+      v-if="textDraft"
+      ref="textInputRef"
+      v-model="textDraft.value"
+      rows="2"
+      class="absolute z-5 pointer-events-auto min-w-120px max-w-220px bg-black/65 text-white border border-solid rounded-6px px-6px py-4px outline-none resize"
+      :style="{
+        left: `${stageRect.left + textDraft.x}px`,
+        top: `${stageRect.top + textDraft.y - textSize}px`,
+        fontSize: `${textSize}px`,
+        borderColor: 'var(--n-border-color)',
+      }"
+      @blur="commitTextDraft"
+      @keydown.enter.exact.prevent="commitTextDraft"
+      @keydown.esc.prevent="cancelTextDraft"
+    />
+
+    <div
+      class="absolute z-6 pointer-events-auto max-h-[calc(100vh-40px)] overflow-auto rounded-10px px-8px py-8px flex flex-col gap-8px text-12px text-white"
+      :style="toolbarStyle"
+      style="
+        background: color-mix(in srgb, #000 60%, transparent);
+        backdrop-filter: blur(6px);
+      "
+    >
+      <div class="grid grid-cols-2 gap-6px">
+        <NButton
+          size="small"
+          :type="toolMode === 'select' ? 'primary' : 'default'"
+          @click="toolMode = 'select'"
+          >选择</NButton
+        >
+        <NButton
+          size="small"
+          :type="toolMode === 'brush' ? 'primary' : 'default'"
+          @click="toolMode = 'brush'"
+          >画笔</NButton
+        >
+        <NButton
+          size="small"
+          :type="toolMode === 'blur' ? 'primary' : 'default'"
+          @click="toolMode = 'blur'"
+          >高斯</NButton
+        >
+        <NButton
+          size="small"
+          :type="toolMode === 'rect' ? 'primary' : 'default'"
+          @click="toolMode = 'rect'"
+          >矩形</NButton
+        >
+        <NButton
+          size="small"
+          :type="toolMode === 'text' ? 'primary' : 'default'"
+          @click="toolMode = 'text'"
+          >文本</NButton
+        >
+        <NButton size="small" quaternary @click="undo">撤销</NButton>
+        <NButton size="small" quaternary @click="redo">重做</NButton>
+        <NButton size="small" quaternary @click="emit('reset')">还原</NButton>
+      </div>
+
+      <div class="opacity-85">笔刷</div>
+      <NSlider v-model:value="brushSize" :min="4" :max="40" :step="1" />
+      <div class="opacity-85">模糊强度</div>
+      <NSlider v-model:value="blurSize" :min="8" :max="48" :step="1" />
+      <div class="opacity-85">矩形线宽</div>
+      <NSlider v-model:value="rectWidth" :min="1" :max="8" :step="1" />
+      <div class="opacity-85">文字大小</div>
+      <NSlider v-model:value="textSize" :min="10" :max="40" :step="1" />
+
+      <div class="opacity-70 whitespace-nowrap">B 画笔 / T 文本 / Ctrl+Z</div>
+      <div class="mt-4px flex gap-6px">
+        <NButton size="small" class="flex-1" @click="close">关闭</NButton>
+        <NButton size="small" type="primary" class="flex-1" @click="finish"
+          >完成</NButton
+        >
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/plus/snapshot/SelectorSyntaxPreview.vue b/src/components/plus/snapshot/SelectorSyntaxPreview.vue
new file mode 100644
index 0000000..c76b06e
--- /dev/null
+++ b/src/components/plus/snapshot/SelectorSyntaxPreview.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import SelectorText from '@/components/SelectorText.vue';
+import type { AstNode } from '@gkd-kit/selector';
+import type { SelectorSyntaxErrorState } from '@/composables/plus/useSearchCardPlus';
+
+defineProps<{
+  enableSearchBySelector: boolean;
+  syntaxText: string;
+  syntaxAst?: AstNode<any>;
+  syntaxError?: SelectorSyntaxErrorState;
+}>();
+</script>
+
+<template>
+  <div
+    v-if="enableSearchBySelector && syntaxText"
+    mt-6px
+    mb-8px
+    p-4px
+    gkd_code
+    transition-colors
+    class="selector-ast-view"
+    :class="syntaxError ? 'selector-ast-view-error' : ''"
+  >
+    <div v-if="syntaxAst" overflow-x-scroll scrollbar-hidden>
+      <SelectorText :source="syntaxText" :node="syntaxAst" />
+    </div>
+    <span v-else-if="syntaxError" whitespace-pre-wrap>
+      <span v-if="syntaxError.headText">{{ syntaxError.headText }}</span>
+      <span bg-red relative>
+        <span v-if="syntaxError.errorText">{{ syntaxError.errorText }}</span>
+        <span v-else pl-20px />
+        <div
+          absolute
+          left-0
+          right-0
+          top--12px
+          flex
+          flex-col
+          items-center
+          animate-bounce
+          pointer-events-none
+        >
+          <SvgIcon name="arrow" class="selector-error-arrow" />
+        </div>
+      </span>
+      <span v-if="syntaxError.tailText">{{ syntaxError.tailText }}</span>
+    </span>
+  </div>
+  <div
+    v-if="syntaxError && !syntaxError.isEof"
+    p-4px
+    gkd_code
+    class="selector-error-box"
+  >
+    {{ syntaxError.message }}
+  </div>
+</template>
diff --git a/src/components/plus/snapshot/SelectorTestCard.vue b/src/components/plus/snapshot/SelectorTestCard.vue
new file mode 100644
index 0000000..b54b7c3
--- /dev/null
+++ b/src/components/plus/snapshot/SelectorTestCard.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import DraggableCard from '@/components/DraggableCard.vue';
+import SelectorText from '@/components/SelectorText.vue';
+import { buildEmptyFn } from '@/utils/others';
+import { gkdWidth, vw } from '@/utils/size';
+import {
+  AstNode,
+  GkdException,
+  Selector,
+  SyntaxException,
+} from '@gkd-kit/selector';
+
+withDefaults(
+  defineProps<{
+    show: boolean;
+    onUpdateShow?: (data: boolean) => void;
+  }>(),
+  {
+    onUpdateShow: buildEmptyFn,
+  },
+);
+
+const inputText = shallowRef('');
+const lazyText = useDebounce(inputText, 300);
+const text = computed(() => {
+  return (inputText.value && lazyText.value).trim();
+});
+
+const result = computed(() => {
+  if (!text.value) return;
+  try {
+    return Selector.Companion.parseAst(text.value);
+  } catch (e) {
+    return e as GkdException;
+  }
+});
+
+const ast = computed(() => {
+  if (result.value instanceof AstNode) {
+    return result.value;
+  }
+  return undefined;
+});
+
+const error = computed(() => {
+  const e = result.value;
+  const t = text.value;
+  if (e instanceof SyntaxException) {
+    return {
+      headText: t.substring(0, e.index),
+      errorText: t.substring(e.index, e.index + 1),
+      tailText: t.substring(e.index + 1),
+      message: e.outMessage,
+    };
+  }
+  return undefined;
+});
+</script>
+
+<template>
+  <DraggableCard
+    v-slot="{ onRef }"
+    :initialValue="{
+      top: 40,
+      right: Math.max(315, 12 * vw + 135),
+      width: Math.max(520, gkdWidth * 0.35),
+    }"
+    :minWidth="360"
+    sizeDraggable
+    class="box-shadow-dim snapshot-window window-anim"
+    :show="show"
+  >
+    <div
+      class="snapshot-floating-panel"
+      b-1px
+      b-solid
+      b-gray-200
+      rounded-12px
+      p-8px
+    >
+      <div flex m-b-4px pr-4px>
+        <div>测试选择器</div>
+        <div :ref="onRef" flex-1 cursor-move />
+        <NButton text title="最小化" @click="onUpdateShow(!show)">
+          <template #icon>
+            <SvgIcon name="minus" />
+          </template>
+        </NButton>
+      </div>
+      <NInput
+        v-model:value="inputText"
+        type="textarea"
+        placeholder="请输入选择器 语法高亮/错误解析"
+        class="gkd_code py-4px"
+        :autosize="{
+          minRows: 3,
+          maxRows: 8,
+        }"
+      />
+      <div h-10px />
+      <div
+        max-w-full
+        mb-8px
+        p-4px
+        gkd_code
+        transition-colors
+        class="selector-ast-view"
+        :class="error ? `selector-ast-view-error` : ``"
+      >
+        <div v-if="ast" overflow-x-scroll scrollbar-hidden>
+          <SelectorText :source="text" :node="ast" />
+        </div>
+        <span v-else-if="error" whitespace-pre-wrap>
+          <span v-if="error.headText">{{ error.headText }}</span>
+          <span bg-red relative>
+            <span v-if="error.errorText">{{ error.errorText }}</span>
+            <span v-else pl-20px />
+            <div
+              absolute
+              left-0
+              right-0
+              top--12px
+              flex
+              flex-col
+              items-center
+              animate-bounce
+              pointer-events-none
+            >
+              <SvgIcon name="arrow" class="selector-error-arrow" />
+            </div>
+          </span>
+          <span v-if="error.tailText">{{ error.tailText }}</span>
+        </span>
+      </div>
+      <div v-if="error" p-4px gkd_code class="selector-error-box">
+        {{ error.message }}
+      </div>
+    </div>
+  </DraggableCard>
+</template>
diff --git a/src/composables/plus/useDeviceControlTools.ts b/src/composables/plus/useDeviceControlTools.ts
new file mode 100644
index 0000000..f39b0f7
--- /dev/null
+++ b/src/composables/plus/useDeviceControlTools.ts
@@ -0,0 +1,218 @@
+import { useDeviceApi } from '@/utils/api';
+import { message } from '@/utils/discrete';
+import {
+  mergeSubscriptionPayload,
+  normalizeSubscriptionImportText,
+  parseSubscriptionImportText,
+  type SnapshotAppHeader,
+  type SubscriptionCandidate,
+} from '@/utils/plus/subscriptionImport';
+import { getAppInfo } from '@/utils/node';
+import { snapshotStorage } from '@/utils/snapshot';
+import { useTask } from '@/utils/task';
+
+export const useDeviceControlTools = () => {
+  const { api, origin } = useDeviceApi();
+  const route = useRoute();
+  const deviceLink = useStorage('device_link', '');
+
+  watchEffect(() => {
+    origin.value = deviceLink.value || undefined;
+  });
+
+  const ensureDeviceConnected = () => {
+    if (!origin.value) {
+      message.error('未连接设备，请先在 /device 页面连接设备');
+      throw new Error('未连接设备，请先在 /device 页面连接设备');
+    }
+  };
+
+  const showSubsModel = shallowRef(false);
+  const subsText = shallowRef('');
+  const parsedCandidates = shallowRef<SubscriptionCandidate[]>([]);
+  const selectedCandidateKeys = shallowRef<string[]>([]);
+  const parsedFingerprint = shallowRef('');
+
+  const candidateOptions = computed(() =>
+    parsedCandidates.value.map((item) => ({
+      label: item.label,
+      value: item.key,
+    })),
+  );
+
+  const selectAllCandidates = () => {
+    selectedCandidateKeys.value = parsedCandidates.value.map(
+      (item) => item.key,
+    );
+  };
+
+  const clearCandidateSelection = () => {
+    selectedCandidateKeys.value = [];
+  };
+
+  const invertCandidateSelection = () => {
+    const selectedSet = new Set(selectedCandidateKeys.value);
+    selectedCandidateKeys.value = parsedCandidates.value
+      .map((item) => item.key)
+      .filter((key) => !selectedSet.has(key));
+  };
+
+  watch(
+    () => subsText.value,
+    () => {
+      parsedCandidates.value = [];
+      selectedCandidateKeys.value = [];
+      parsedFingerprint.value = '';
+    },
+  );
+
+  const getSnapshotAppHeader = async (): Promise<SnapshotAppHeader> => {
+    if (route.path.startsWith('/device')) {
+      throw new Error(
+        '当前在 /device 页面，无法自动补全 app 头，请在快照页面操作',
+      );
+    }
+    if (!route.path.startsWith('/snapshot')) {
+      throw new Error(
+        '缺少 app 头规则：请在快照页面打开后再导入，或手动补全 app.id',
+      );
+    }
+    const snapshotId = Number(route.params.snapshotId);
+    if (!Number.isSafeInteger(snapshotId) || snapshotId <= 0) {
+      throw new Error('当前快照信息无效，无法补全 app 头');
+    }
+    const snapshot = await snapshotStorage.getItem(snapshotId);
+    if (!snapshot) {
+      throw new Error('未找到当前快照数据，无法补全 app 头');
+    }
+    const app = getAppInfo(snapshot);
+    if (!app.id) {
+      throw new Error('当前快照缺少 app.id，无法补全 app 头');
+    }
+    return { id: app.id, name: app.name || app.id };
+  };
+
+  const parseCandidatesCore = async () => {
+    try {
+      const { normalizedText, candidates } = await parseSubscriptionImportText(
+        subsText.value,
+        getSnapshotAppHeader,
+      );
+      parsedCandidates.value = candidates;
+      selectedCandidateKeys.value = [];
+      parsedFingerprint.value = normalizedText;
+      if (candidates.length > 1) {
+        message.info(
+          `已解析 ${candidates.length} 项，请勾选后再次点击“确认导入”`,
+        );
+      }
+      return true;
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : '规则解析失败');
+      return false;
+    }
+  };
+
+  const parseCandidates = useTask(async () => {
+    await parseCandidatesCore();
+  });
+
+  const updateSubs = useTask(async () => {
+    ensureDeviceConnected();
+
+    const normalizedText = normalizeSubscriptionImportText(subsText.value);
+    if (!normalizedText) {
+      message.error('请输入订阅文本');
+      return;
+    }
+
+    const needParse =
+      parsedFingerprint.value !== normalizedText ||
+      parsedCandidates.value.length === 0;
+    if (needParse) {
+      const parsedOk = await parseCandidatesCore();
+      if (!parsedOk) return;
+      if (parsedCandidates.value.length > 1) return;
+    }
+
+    const selected = parsedCandidates.value.filter((item) =>
+      selectedCandidateKeys.value.includes(item.key),
+    );
+    if (!selected.length) {
+      message.error('请至少选择一项后再导入');
+      return;
+    }
+
+    const payload = mergeSubscriptionPayload(selected);
+    if (
+      !payload.apps?.length &&
+      !payload.globalGroups?.length &&
+      !payload.categories?.length
+    ) {
+      message.error('没有可导入内容');
+      return;
+    }
+
+    await api.updateSubscription(payload);
+    message.success(`导入成功，共 ${selected.length} 项`);
+    parsedCandidates.value = [];
+    selectedCandidateKeys.value = [];
+    parsedFingerprint.value = '';
+    subsText.value = '';
+  });
+
+  const showSelectorModel = shallowRef(false);
+  const actionOptions: { value?: string; label: string }[] = [
+    { label: '仅查询', value: '' },
+    { value: 'click', label: 'click' },
+    { value: 'clickNode', label: 'clickNode' },
+    { value: 'clickCenter', label: 'clickCenter' },
+    { value: 'back', label: 'back' },
+    { value: 'longClick', label: 'longClick' },
+    { value: 'longClickNode', label: 'longClickNode' },
+    { value: 'longClickCenter', label: 'longClickCenter' },
+  ];
+  const clickAction = shallowReactive({
+    selector: '',
+    action: 'click',
+    quickFind: false,
+  });
+  const execSelector = useTask(async () => {
+    ensureDeviceConnected();
+    const { quickFind, ...payload } = clickAction;
+    const result = await api.execSelector({
+      ...payload,
+      fastQuery: quickFind,
+    });
+    if (result.message) {
+      message.success(`操作成功: ${result.message}`);
+      return;
+    }
+    if (result.action) {
+      if (result.result) {
+        message.success(`操作成功: ${result.action}`);
+      } else {
+        message.error(`操作失败: ${result.action}`);
+      }
+    } else if (result.result) {
+      message.success('查询成功');
+    }
+  });
+
+  return {
+    showSubsModel,
+    subsText,
+    parsedCandidates,
+    selectedCandidateKeys,
+    candidateOptions,
+    selectAllCandidates,
+    clearCandidateSelection,
+    invertCandidateSelection,
+    parseCandidates,
+    updateSubs,
+    showSelectorModel,
+    actionOptions,
+    clickAction,
+    execSelector,
+  };
+};
diff --git a/src/composables/plus/useDevicePlus.ts b/src/composables/plus/useDevicePlus.ts
new file mode 100644
index 0000000..e541db1
--- /dev/null
+++ b/src/composables/plus/useDevicePlus.ts
@@ -0,0 +1,311 @@
+import { useStorage } from '@vueuse/core';
+import dayjs from 'dayjs';
+import { computed, shallowRef, toValue, watch, watchEffect } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { usePreviewCache } from '@/composables/plus/usePreviewCache';
+import { useDeviceApi } from '@/utils/api';
+import { showTextDLg, waitShareAgree } from '@/utils/dialog';
+import { dialog, message } from '@/utils/discrete';
+import {
+  exportSnapshotAsImage,
+  exportSnapshotAsImageId,
+  exportSnapshotAsImportId,
+  exportSnapshotAsZip,
+} from '@/utils/export';
+import { getAppInfo, getDevice } from '@/utils/node';
+import { buildGroupedSnapshots } from '@/utils/plus/snapshotGroup';
+import { screenshotStorage, snapshotStorage } from '@/utils/snapshot';
+import { useBatchTask, useTask } from '@/utils/task';
+import { getImagUrl, getImportUrl } from '@/utils/url';
+import {
+  getCustomDomainImportUrl,
+  getOfficialImportUrl,
+} from '@/utils/plus/url';
+
+interface UseDevicePlusOptions {
+  snapshots: MaybeRefOrGetter<Snapshot[]>;
+  checkedRowKeys: Ref<number[]>;
+  refreshSnapshots: () => Promise<void>;
+}
+
+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', '');
+  const { api, origin } = useDeviceApi();
+
+  watchEffect(() => {
+    origin.value = deviceLink.value || undefined;
+  });
+
+  const groupedSnapshots = computed(() =>
+    buildGroupedSnapshots(toValue(options.snapshots), snapshotImportTime),
+  );
+
+  const checkedSet = computed(() => new Set(options.checkedRowKeys.value));
+
+  const getGroupSnapshotIds = (group: SnapshotGroup) => {
+    return group.activities.flatMap((activity) =>
+      activity.snapshots.map((snapshot) => snapshot.id),
+    );
+  };
+
+  const getActivitySnapshotIds = (activity: SnapshotActivity) => {
+    return activity.snapshots.map((snapshot) => snapshot.id);
+  };
+
+  const getCheckedStats = (ids: number[]) => {
+    const checkedIds = checkedSet.value;
+    const checkedCount = ids.filter((id) => checkedIds.has(id)).length;
+    return {
+      checked: checkedCount > 0 && checkedCount === ids.length,
+      indeterminate: checkedCount > 0 && checkedCount < ids.length,
+    };
+  };
+
+  const setCheckedByIds = (ids: number[], checked: boolean) => {
+    if (checked) {
+      const next = new Set(options.checkedRowKeys.value);
+      ids.forEach((id) => next.add(id));
+      options.checkedRowKeys.value = [...next];
+      return;
+    }
+    const idSet = new Set(ids);
+    options.checkedRowKeys.value = options.checkedRowKeys.value.filter(
+      (id) => !idSet.has(id),
+    );
+  };
+
+  const toggleChecked = (id: number, checked: boolean) => {
+    if (checked) {
+      if (!checkedSet.value.has(id)) {
+        options.checkedRowKeys.value = [...options.checkedRowKeys.value, id];
+      }
+      return;
+    }
+    options.checkedRowKeys.value = options.checkedRowKeys.value.filter(
+      (key) => key !== id,
+    );
+  };
+
+  const ensureSnapshotStored = async (row: Snapshot) => {
+    if (!(await snapshotStorage.hasItem(row.id))) {
+      await snapshotStorage.setItem(
+        row.id,
+        await api.getSnapshot({ id: row.id }),
+      );
+    }
+  };
+
+  const ensureScreenshotStored = async (row: Snapshot) => {
+    if (!(await screenshotStorage.hasItem(row.id))) {
+      await screenshotStorage.setItem(
+        row.id,
+        await api.getScreenshot({ id: row.id }),
+      );
+    }
+  };
+
+  const ensureLocalSnapshotData = async (row: Snapshot) => {
+    await Promise.all([ensureSnapshotStored(row), ensureScreenshotStored(row)]);
+  };
+
+  const getItemAppName = (item: Snapshot) =>
+    getAppInfo(item).name || item.appId || '(unknown)';
+  const getItemDeviceText = (item: Snapshot) =>
+    `${getDevice(item).manufacturer} Android ${getDevice(item).release || ''}`;
+  const getItemShortTimeText = (item: Snapshot) =>
+    dayjs(item.id).format('MM-DD HH:mm:ss');
+  const getItemCreateTimeText = (item: Snapshot) =>
+    dayjs(item.id).format('YYYY-MM-DD HH:mm:ss');
+  const getItemImportTimeText = (item: Snapshot) =>
+    dayjs(snapshotImportTime[item.id] || item.id).format('YYYY-MM-DD HH:mm:ss');
+
+  const previewCacheLimit = computed(() =>
+    settingsStore.lowMemoryMode ? 6 : 24,
+  );
+  const { previewUrlMap, previewLoadingMap, previewErrorMap, ensurePreview } =
+    usePreviewCache({
+      getScreenshot: async (id) => {
+        const local = await screenshotStorage.getItem(id);
+        return local || (await api.getScreenshot({ id }));
+      },
+      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);
+      await exportSnapshotAsZip(row);
+    },
+    (row) => row.id,
+  );
+
+  const downloadSnapshotImage = useBatchTask(
+    async (row: Snapshot) => {
+      await ensureScreenshotStored(row);
+      await exportSnapshotAsImage(row);
+    },
+    (row) => row.id,
+  );
+
+  const shareSnapshotZipUrl = useBatchTask(
+    async (row: Snapshot) => {
+      await waitShareAgree();
+      await ensureLocalSnapshotData(row);
+      const importId = await exportSnapshotAsImportId(row);
+      showTextDLg({
+        title: '分享链接',
+        content: settingsStore.shareUseOfficialImportDomain
+          ? getOfficialImportUrl(importId)
+          : getImportUrl(importId),
+        extraContent: getCustomDomainImportUrl(importId),
+      });
+    },
+    (row) => row.id,
+  );
+
+  const shareSnapshotImageUrl = useBatchTask(
+    async (row: Snapshot) => {
+      await waitShareAgree();
+      await ensureScreenshotStored(row);
+      const imageId = await exportSnapshotAsImageId(row);
+      showTextDLg({
+        title: '分享链接',
+        content: getImagUrl(imageId),
+      });
+    },
+    (row) => row.id,
+  );
+
+  const deleteSnapshot = useBatchTask(
+    async (row: Snapshot) => {
+      await new Promise((resolve, reject) => {
+        dialog.warning({
+          title: '删除',
+          content: '是否删除此快照？',
+          negativeText: '取消',
+          positiveText: '确认',
+          onClose: reject,
+          onEsc: reject,
+          onMaskClick: reject,
+          onNegativeClick: reject,
+          onPositiveClick: resolve,
+        });
+      });
+
+      await api.deleteSnapshot({ id: row.id });
+      await snapshotStorage.removeItem(row.id);
+      await screenshotStorage.removeItem(row.id);
+      message.success('快照删除成功');
+      await options.refreshSnapshots();
+      options.checkedRowKeys.value = options.checkedRowKeys.value.filter(
+        (id) => id !== row.id,
+      );
+    },
+    (row) => row.id,
+  );
+
+  const batchDelete = useTask(async () => {
+    await new Promise((resolve, reject) => {
+      dialog.warning({
+        title: '删除',
+        content: `是否批量删除 ${options.checkedRowKeys.value.length} 个快照`,
+        negativeText: '取消',
+        positiveText: '确认',
+        onClose: reject,
+        onEsc: reject,
+        onMaskClick: reject,
+        onNegativeClick: reject,
+        onPositiveClick: resolve,
+      });
+    });
+
+    await Promise.all(
+      options.checkedRowKeys.value.map((id) => api.deleteSnapshot({ id })),
+    );
+    await Promise.all(
+      options.checkedRowKeys.value.map((id) =>
+        Promise.all([
+          snapshotStorage.removeItem(id),
+          screenshotStorage.removeItem(id),
+        ]),
+      ),
+    );
+    message.success(`成功删除 ${options.checkedRowKeys.value.length} 个快照`);
+    options.checkedRowKeys.value = [];
+    await options.refreshSnapshots();
+  });
+
+  const expandedPackageNames = shallowRef<(string | number)[]>([]);
+  const expandedActivityNames = shallowRef<(string | number)[]>([]);
+
+  watch(
+    [groupedSnapshots, () => settingsStore.autoExpandSnapshots],
+    ([groups, autoExpand]) => {
+      if (!autoExpand) {
+        expandedPackageNames.value = [];
+        expandedActivityNames.value = [];
+        return;
+      }
+      expandedPackageNames.value = groups
+        .slice(0, 5)
+        .map((group) => group.packageName);
+      expandedActivityNames.value = groups
+        .slice(0, 5)
+        .flatMap((group) =>
+          group.activities
+            .slice(0, 4)
+            .map((activity) => `${group.packageName}::${activity.activityId}`),
+        );
+    },
+    { immediate: true },
+  );
+
+  return {
+    groupedSnapshots,
+    expandedPackageNames,
+    expandedActivityNames,
+    checkedSet,
+    snapshotViewedTime,
+    batchDelete,
+    previewUrlMap,
+    previewLoadingMap,
+    previewErrorMap,
+    previewSnapshot,
+    downloadSnapshotZip,
+    downloadSnapshotImage,
+    shareSnapshotZipUrl,
+    shareSnapshotImageUrl,
+    deleteSnapshot,
+    ensurePreview,
+    getGroupSnapshotIds,
+    getActivitySnapshotIds,
+    getCheckedStats,
+    setCheckedByIds,
+    toggleChecked,
+    getItemAppName,
+    getItemDeviceText,
+    getItemShortTimeText,
+    getItemCreateTimeText,
+    getItemImportTimeText,
+  };
+}
diff --git a/src/composables/plus/useDeviceSnapshotData.ts b/src/composables/plus/useDeviceSnapshotData.ts
new file mode 100644
index 0000000..a200d65
--- /dev/null
+++ b/src/composables/plus/useDeviceSnapshotData.ts
@@ -0,0 +1,122 @@
+import { useStorage } from '@vueuse/core';
+import { computed, onMounted, shallowRef, watch } from 'vue';
+import type { ComputedRef, ShallowRef } from 'vue';
+import { useDeviceApi } from '@/utils/api';
+import { message } from '@/utils/discrete';
+import { errorWrap } from '@/utils/error';
+import { delay } from '@/utils/others';
+import { useTask } from '@/utils/task';
+
+type DeviceApiContext = ReturnType<typeof useDeviceApi>;
+interface UseDeviceSnapshotDataReturn {
+  api: DeviceApiContext['api'];
+  origin: DeviceApiContext['origin'];
+  serverInfo: DeviceApiContext['serverInfo'];
+  link: ReturnType<typeof useStorage<string>>;
+  connect: {
+    readonly loading: boolean;
+    invoke: () => Promise<void>;
+  };
+  serverTitle: ComputedRef<string>;
+  snapshots: ShallowRef<Snapshot[]>;
+  refreshSnapshots: () => Promise<void>;
+  normalizeDeviceUrl: (input: string) => string | null;
+}
+
+export function useDeviceSnapshotData(): UseDeviceSnapshotDataReturn {
+  const { api, origin, serverInfo } = useDeviceApi();
+  const link = useStorage('device_link', '');
+  const snapshots = shallowRef<Snapshot[]>([]);
+
+  const normalizeDeviceUrl = (input: string): string | null => {
+    const raw = input.trim();
+    if (!raw) return null;
+    const withProtocol = /^https?:\/\//i.test(raw) ? raw : `http://${raw}`;
+    return errorWrap(
+      () => {
+        const url = new URL(withProtocol);
+        if (!url.port) url.port = '8888';
+        return url.origin;
+      },
+      () => null,
+    );
+  };
+
+  const connect = useTask(async () => {
+    const normalized = normalizeDeviceUrl(link.value);
+    if (!normalized) {
+      message.error('非法设备地址');
+      return;
+    }
+    origin.value = normalized;
+    link.value = normalized;
+    latestSnapshotRun++;
+    serverInfo.value = undefined as any;
+    snapshots.value = [];
+    try {
+      serverInfo.value = await api.getServerInfo();
+    } catch (e: any) {
+      serverInfo.value = undefined as any;
+      snapshots.value = [];
+      message.error(e?.message || '连接设备失败');
+      throw e;
+    }
+  });
+
+  const serverTitle = computed(() => {
+    if (!serverInfo.value) return '未连接设备';
+    const d = serverInfo.value.device;
+    const g = serverInfo.value.gkdAppInfo;
+    return `${d.manufacturer} Android${d.release} - GKD${g?.versionName ?? '未知版本'}`;
+  });
+
+  onMounted(async () => {
+    await delay(500);
+    if (normalizeDeviceUrl(link.value)) {
+      connect.invoke();
+    }
+  });
+
+  let latestSnapshotRun = 0;
+  const refreshSnapshots = async () => {
+    const runId = ++latestSnapshotRun;
+    if (!serverInfo.value) return;
+    const result = await api.getSnapshots();
+    result.sort((a, b) => b.id - a.id);
+    if (runId !== latestSnapshotRun) return;
+    snapshots.value = result;
+  };
+
+  let currentRun = 0;
+  watch(
+    serverInfo,
+    async (value, _oldValue, onInvalidate) => {
+      const run = ++currentRun;
+      let cancelled = false;
+      onInvalidate(() => {
+        cancelled = true;
+      });
+      document.title = serverTitle.value;
+      if (!value) {
+        latestSnapshotRun++;
+        snapshots.value = [];
+        return;
+      }
+      await refreshSnapshots();
+      if (cancelled || run !== currentRun) return;
+    },
+    { immediate: true },
+  );
+
+  return {
+    api,
+    origin,
+    serverInfo,
+    link,
+    connect,
+    serverTitle,
+    snapshots,
+    refreshSnapshots,
+    normalizeDeviceUrl,
+  };
+}
diff --git a/src/composables/plus/useFastQueryIndicator.ts b/src/composables/plus/useFastQueryIndicator.ts
new file mode 100644
index 0000000..e1313c3
--- /dev/null
+++ b/src/composables/plus/useFastQueryIndicator.ts
@@ -0,0 +1,60 @@
+import { FastQuery } from '@gkd-kit/selector';
+
+export type FastQueryMeta = { support: boolean; local: boolean };
+
+export const getFastQuerySupport = (result: SearchResult): boolean => {
+  if (!result.gkd || !result.selector.fastQueryList.length) return false;
+  const { fastQueryList } = result.selector;
+
+  const resultsArray = Array.isArray(result.results)
+    ? result.results
+    : Array.from(
+        result.results as unknown as Iterable<{
+          context: { toArray: () => RawNode[] };
+        }>,
+      );
+
+  const canFastQueryNode = (node: RawNode) => {
+    const idOk =
+      (node.quickFind || node.idQf) &&
+      node.attr.id &&
+      fastQueryList.some(
+        (query) =>
+          query instanceof FastQuery.Id && query.acceptText(node.attr.id!),
+      );
+    const vidOk =
+      (node.quickFind || node.idQf) &&
+      node.attr.vid &&
+      fastQueryList.some(
+        (query) =>
+          query instanceof FastQuery.Vid && query.acceptText(node.attr.vid!),
+      );
+    const textOk =
+      (node.quickFind || node.textQf) &&
+      node.attr.text &&
+      fastQueryList.some(
+        (query) =>
+          query instanceof FastQuery.Text && query.acceptText(node.attr.text!),
+      );
+    return idOk || vidOk || textOk;
+  };
+
+  return resultsArray.some((r) =>
+    r.context.toArray().some((node) => canFastQueryNode(node)),
+  );
+};
+
+export const isLocalFastQuery = (result: SearchResult): boolean => {
+  if (!result.gkd) return false;
+  return result.selector.source.includes('<<');
+};
+
+export const buildFastQueryMeta = (
+  result: SearchResult,
+): FastQueryMeta | null => {
+  if (!result.gkd) return null;
+  return {
+    support: getFastQuerySupport(result),
+    local: isLocalFastQuery(result),
+  };
+};
diff --git a/src/composables/plus/useHomePlus.ts b/src/composables/plus/useHomePlus.ts
new file mode 100644
index 0000000..2d080be
--- /dev/null
+++ b/src/composables/plus/useHomePlus.ts
@@ -0,0 +1,253 @@
+import dayjs from 'dayjs';
+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';
+
+interface UseHomePlusOptions {
+  snapshots: MaybeRefOrGetter<Snapshot[]>;
+  checkedRowKeys: Ref<number[]>;
+}
+
+export function useHomePlus(options: UseHomePlusOptions) {
+  const route = useRoute();
+  const router = useRouter();
+  const { settingsStore, snapshotImportTime, snapshotViewedTime } =
+    useStorageStore();
+
+  const snapshotDisplayLimit = 50;
+  const expandedActivitySnapshotKeys = shallowRef<string[]>([]);
+  const getActivityDisplayKey = (packageName: string, activityId: string) =>
+    `${packageName}::${activityId}`;
+  const isActivityFullyShown = (packageName: string, activityId: string) =>
+    expandedActivitySnapshotKeys.value.includes(
+      getActivityDisplayKey(packageName, activityId),
+    );
+  const showMoreSnapshots = (packageName: string, activityId: string) => {
+    const key = getActivityDisplayKey(packageName, activityId);
+    if (!expandedActivitySnapshotKeys.value.includes(key)) {
+      expandedActivitySnapshotKeys.value = [
+        ...expandedActivitySnapshotKeys.value,
+        key,
+      ];
+    }
+  };
+
+  const groupedSnapshots = computed(() =>
+    buildGroupedSnapshots(toValue(options.snapshots), snapshotImportTime),
+  );
+
+  const getVisibleSnapshots = (
+    packageName: string,
+    activity: { activityId: string; snapshots: Snapshot[] },
+  ) => {
+    if (
+      isActivityFullyShown(packageName, activity.activityId) ||
+      activity.snapshots.length <= snapshotDisplayLimit
+    ) {
+      return activity.snapshots;
+    }
+    return activity.snapshots.slice(0, snapshotDisplayLimit);
+  };
+
+  const expandedPackageNames = shallowRef<(string | number)[]>([]);
+  const expandedActivityNames = shallowRef<(string | number)[]>([]);
+  watch(
+    [groupedSnapshots, () => settingsStore.autoExpandSnapshots],
+    ([groups, autoExpand]) => {
+      if (!autoExpand) {
+        expandedPackageNames.value = [];
+        expandedActivityNames.value = [];
+        return;
+      }
+      expandedPackageNames.value = groups.slice(0, 4).map((g) => g.packageName);
+      expandedActivityNames.value = groups
+        .slice(0, 4)
+        .flatMap((group) =>
+          group.activities
+            .slice(0, 3)
+            .map((activity) => `${group.packageName}::${activity.activityId}`),
+        );
+    },
+    { immediate: true },
+  );
+
+  const checkedSet = computed(() => new Set(options.checkedRowKeys.value));
+  const allFilteredSnapshotIds = computed(() =>
+    toValue(options.snapshots).map((snapshot) => snapshot.id),
+  );
+  const getActivitySnapshotIds = (activity: { snapshots: Snapshot[] }) =>
+    activity.snapshots.map((snapshot) => snapshot.id);
+  const getGroupSnapshotIds = (group: {
+    activities: Array<{ snapshots: Snapshot[] }>;
+  }) =>
+    group.activities.flatMap((activity) => getActivitySnapshotIds(activity));
+
+  const getCheckedStats = (ids: number[]) => {
+    if (!ids.length) return { checked: false, indeterminate: false };
+    let checkedCount = 0;
+    ids.forEach((id) => {
+      if (checkedSet.value.has(id)) checkedCount++;
+    });
+    return {
+      checked: checkedCount === ids.length,
+      indeterminate: checkedCount > 0 && checkedCount < ids.length,
+    };
+  };
+
+  const allFilteredCheckedStats = computed(() =>
+    getCheckedStats(allFilteredSnapshotIds.value),
+  );
+  const groupCheckedStatsMap = computed(() => {
+    const map = new Map<string, { checked: boolean; indeterminate: boolean }>();
+    groupedSnapshots.value.forEach((group) => {
+      map.set(group.packageName, getCheckedStats(getGroupSnapshotIds(group)));
+    });
+    return map;
+  });
+  const activityCheckedStatsMap = computed(() => {
+    const map = new Map<string, { checked: boolean; indeterminate: boolean }>();
+    groupedSnapshots.value.forEach((group) => {
+      group.activities.forEach((activity) => {
+        map.set(
+          `${group.packageName}::${activity.activityId}`,
+          getCheckedStats(getActivitySnapshotIds(activity)),
+        );
+      });
+    });
+    return map;
+  });
+
+  const getGroupCheckedStats = (packageName: string) =>
+    groupCheckedStatsMap.value.get(packageName) ?? {
+      checked: false,
+      indeterminate: false,
+    };
+  const getActivityCheckedStats = (packageName: string, activityId: string) =>
+    activityCheckedStatsMap.value.get(`${packageName}::${activityId}`) ?? {
+      checked: false,
+      indeterminate: false,
+    };
+
+  const setCheckedByIds = (ids: number[], checked: boolean) => {
+    if (checked) {
+      const next = new Set(options.checkedRowKeys.value);
+      ids.forEach((id) => next.add(id));
+      options.checkedRowKeys.value = [...next];
+      return;
+    }
+    const idSet = new Set(ids);
+    options.checkedRowKeys.value = options.checkedRowKeys.value.filter(
+      (id) => !idSet.has(id),
+    );
+  };
+
+  const toggleChecked = (id: number, checked: boolean) => {
+    if (checked) {
+      if (!checkedSet.value.has(id)) {
+        options.checkedRowKeys.value = [...options.checkedRowKeys.value, id];
+      }
+      return;
+    }
+    options.checkedRowKeys.value = options.checkedRowKeys.value.filter(
+      (key) => key !== id,
+    );
+  };
+
+  const groupRemarkModal = shallowReactive({
+    show: false,
+    key: '',
+    title: '',
+    value: '',
+  });
+  const ensureGroupRemarks = () => {
+    if (!settingsStore.groupRemarks) settingsStore.groupRemarks = {};
+    return settingsStore.groupRemarks;
+  };
+  const getGroupRemark = (key: string) =>
+    (ensureGroupRemarks()[key] || '').trim();
+  const getPackageRemarkKey = (packageName: string) => `package:${packageName}`;
+  const getActivityRemarkKey = (packageName: string, activityId: string) =>
+    `activity:${packageName}::${activityId}`;
+  const openGroupRemarkModal = (key: string, title: string) => {
+    groupRemarkModal.show = true;
+    groupRemarkModal.key = key;
+    groupRemarkModal.title = title;
+    groupRemarkModal.value = getGroupRemark(key);
+  };
+  const saveGroupRemark = () => {
+    const key = groupRemarkModal.key;
+    if (!key) return;
+    const value = groupRemarkModal.value.trim();
+    if (value) ensureGroupRemarks()[key] = value;
+    else delete ensureGroupRemarks()[key];
+    groupRemarkModal.show = false;
+  };
+
+  const previewCacheLimit = computed(() =>
+    settingsStore.lowMemoryMode ? 6 : 24,
+  );
+  const { previewUrlMap, previewLoadingMap, previewErrorMap, ensurePreview } =
+    usePreviewCache({
+      getScreenshot: (id) => screenshotStorage.getItem(id),
+      cacheLimit: previewCacheLimit,
+    });
+
+  const goToSnapshot = (snapshotId: number) => {
+    snapshotViewedTime[snapshotId] = Date.now();
+    router.push({
+      name: 'snapshot',
+      params: { snapshotId },
+      query: filterQuery(route.query, ['str', 'gkd']),
+    });
+  };
+
+  const getItemShortTimeText = (item: Snapshot) =>
+    dayjs(item.id).format('MM-DD HH:mm:ss');
+  const getItemCreateTimeText = (item: Snapshot) =>
+    dayjs(item.id).format('YYYY-MM-DD HH:mm:ss');
+  const getItemImportTimeText = (item: Snapshot) =>
+    dayjs(snapshotImportTime[item.id] || item.id).format('YYYY-MM-DD HH:mm:ss');
+  const getItemDeviceText = (item: Snapshot) =>
+    `${getDevice(item).manufacturer} Android ${getDevice(item).release || ''}`;
+
+  return {
+    groupedSnapshots,
+    lowMemoryMode: computed(() => settingsStore.lowMemoryMode),
+    snapshotDisplayLimit,
+    expandedPackageNames,
+    expandedActivityNames,
+    checkedSet,
+    allFilteredSnapshotIds,
+    allFilteredCheckedStats,
+    groupRemarkModal,
+    snapshotViewedTime,
+    previewUrlMap,
+    previewLoadingMap,
+    previewErrorMap,
+    ensurePreview,
+    getVisibleSnapshots,
+    showMoreSnapshots,
+    isActivityFullyShown,
+    getActivitySnapshotIds,
+    getGroupSnapshotIds,
+    getGroupCheckedStats,
+    getActivityCheckedStats,
+    setCheckedByIds,
+    toggleChecked,
+    getGroupRemark,
+    getPackageRemarkKey,
+    getActivityRemarkKey,
+    openGroupRemarkModal,
+    saveGroupRemark,
+    goToSnapshot,
+    getItemShortTimeText,
+    getItemCreateTimeText,
+    getItemImportTimeText,
+    getItemDeviceText,
+    getItemAppName: (item: Snapshot) => getAppInfo(item).name || item.appId,
+  };
+}
diff --git a/src/composables/plus/useHomeSnapshotData.ts b/src/composables/plus/useHomeSnapshotData.ts
new file mode 100644
index 0000000..f605110
--- /dev/null
+++ b/src/composables/plus/useHomeSnapshotData.ts
@@ -0,0 +1,63 @@
+import { computed, onMounted, shallowReactive, shallowRef } from 'vue';
+import { getAppInfo } from '@/utils/node';
+import { buildGroupedSnapshots } from '@/utils/plus/snapshotGroup';
+import { shallowSnapshotStorage } from '@/utils/snapshot';
+
+export function useHomeSnapshotData(
+  snapshotImportTime: Record<number, number>,
+) {
+  const snapshots = shallowRef<Snapshot[]>([]);
+  const loading = shallowRef(true);
+
+  const updateSnapshots = async () => {
+    try {
+      loading.value = true;
+      const items = await shallowSnapshotStorage.getAllItems();
+      items.sort((a, b) => {
+        const at = snapshotImportTime[a.id] ?? a.id;
+        const bt = snapshotImportTime[b.id] ?? b.id;
+        if (bt !== at) return bt - at;
+        return b.id - a.id;
+      });
+      snapshots.value = items;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const filterOption = shallowReactive({
+    query: '',
+    actualQuery: '',
+    updateQuery: () => {
+      filterOption.actualQuery = filterOption.query.trim();
+    },
+  });
+
+  const filteredSnapshots = computed(() => {
+    const query = filterOption.actualQuery;
+    return snapshots.value.filter((s) => {
+      if (!query) return true;
+      return (
+        (getAppInfo(s).name || '').includes(query) ||
+        (s.appId || '').includes(query) ||
+        (s.appInfo?.id || '').includes(query) ||
+        (s.activityId || '').includes(query)
+      );
+    });
+  });
+
+  const groupedSnapshots = computed(() =>
+    buildGroupedSnapshots(filteredSnapshots.value, snapshotImportTime),
+  );
+
+  onMounted(updateSnapshots);
+
+  return {
+    snapshots,
+    loading,
+    updateSnapshots,
+    filterOption,
+    filteredSnapshots,
+    groupedSnapshots,
+  };
+}
diff --git a/src/composables/plus/usePreviewCache.ts b/src/composables/plus/usePreviewCache.ts
new file mode 100644
index 0000000..a85d9e7
--- /dev/null
+++ b/src/composables/plus/usePreviewCache.ts
@@ -0,0 +1,81 @@
+import type { ComputedRef } from 'vue';
+import { onBeforeUnmount, shallowReactive, shallowRef, watch } from 'vue';
+
+type PreviewRaw = Blob | ArrayBuffer | null;
+
+interface UsePreviewCacheOptions {
+  getScreenshot: (id: number) => Promise<PreviewRaw>;
+  cacheLimit: ComputedRef<number>;
+  emptyErrorText?: string;
+  loadErrorText?: string;
+}
+
+export const usePreviewCache = (options: UsePreviewCacheOptions) => {
+  const previewUrlMap = shallowReactive<Record<number, string>>({});
+  const previewLoadingMap = shallowReactive<Record<number, boolean>>({});
+  const previewErrorMap = shallowReactive<Record<number, string>>({});
+  const previewOrder = shallowRef<number[]>([]);
+
+  const clearPreviewById = (id: number) => {
+    const url = previewUrlMap[id];
+    if (url) {
+      URL.revokeObjectURL(url);
+      delete previewUrlMap[id];
+    }
+    delete previewErrorMap[id];
+    previewLoadingMap[id] = false;
+    previewOrder.value = previewOrder.value.filter((v) => v != id);
+  };
+
+  const evictOverflow = () => {
+    while (previewOrder.value.length > options.cacheLimit.value) {
+      const removeId = previewOrder.value[0];
+      if (typeof removeId == 'number') clearPreviewById(removeId);
+      else break;
+    }
+  };
+
+  const clearPreviewCache = () => {
+    Object.keys(previewUrlMap).forEach((id) => clearPreviewById(Number(id)));
+  };
+
+  const ensurePreview = async (id: number) => {
+    if (previewUrlMap[id] || previewLoadingMap[id]) return;
+    previewErrorMap[id] = '';
+    previewLoadingMap[id] = true;
+    try {
+      const raw = await options.getScreenshot(id);
+      if (!raw) {
+        previewErrorMap[id] = options.emptyErrorText || '暂无预览图';
+        return;
+      }
+      const blob =
+        raw instanceof Blob
+          ? raw
+          : new Blob([raw as ArrayBuffer], { type: 'image/png' });
+      previewUrlMap[id] = URL.createObjectURL(blob);
+      previewOrder.value = [...previewOrder.value.filter((v) => v != id), id];
+      evictOverflow();
+    } catch {
+      previewErrorMap[id] = options.loadErrorText || '预览加载失败';
+    } finally {
+      previewLoadingMap[id] = false;
+    }
+  };
+
+  watch(
+    () => options.cacheLimit.value,
+    () => {
+      evictOverflow();
+    },
+  );
+
+  onBeforeUnmount(clearPreviewCache);
+
+  return {
+    previewUrlMap,
+    previewLoadingMap,
+    previewErrorMap,
+    ensurePreview,
+  };
+};
diff --git a/src/composables/plus/useSearchCardPlus.ts b/src/composables/plus/useSearchCardPlus.ts
new file mode 100644
index 0000000..fbb57fd
--- /dev/null
+++ b/src/composables/plus/useSearchCardPlus.ts
@@ -0,0 +1,107 @@
+import { computed } from 'vue';
+import type { Ref } from 'vue';
+import {
+  AstNode,
+  GkdException,
+  Selector,
+  SyntaxException,
+} from '@gkd-kit/selector';
+import { getImportUrl } from '@/utils/url';
+import { getOfficialImportUrl } from '@/utils/plus/url';
+
+export interface SelectorSyntaxErrorState {
+  isEof: boolean;
+  headText: string;
+  errorText: string;
+  tailText: string;
+  message: string;
+}
+
+interface UseSearchCardPlusOptions {
+  searchText: Ref<string>;
+  enableSearchBySelector: Ref<boolean>;
+}
+
+export function useSearchCardPlus(options: UseSearchCardPlusOptions) {
+  const { settingsStore } = useStorageStore();
+  const searchTextLazy = useDebounce(options.searchText, 220);
+
+  const selectorSyntaxText = computed(() => {
+    if (!options.enableSearchBySelector.value) return '';
+    return searchTextLazy.value.trim();
+  });
+
+  const selectorSyntaxResult = computed(() => {
+    const text = selectorSyntaxText.value;
+    if (!text) return;
+    try {
+      return Selector.Companion.parseAst(text);
+    } catch (e) {
+      return e as GkdException;
+    }
+  });
+
+  const selectorSyntaxAst = computed(() => {
+    if (selectorSyntaxResult.value instanceof AstNode) {
+      return selectorSyntaxResult.value;
+    }
+    return undefined;
+  });
+
+  const selectorSyntaxError = computed<SelectorSyntaxErrorState | undefined>(
+    () => {
+      const result = selectorSyntaxResult.value;
+      const text = selectorSyntaxText.value;
+      if (result instanceof SyntaxException) {
+        const hasErrorChar = result.index < text.length;
+        const eofLike =
+          !hasErrorChar || /expect\s+eof/i.test(result.outMessage || '');
+        return {
+          isEof: eofLike,
+          headText: text.substring(0, result.index),
+          errorText: hasErrorChar
+            ? text.substring(result.index, result.index + 1)
+            : '',
+          tailText: hasErrorChar ? text.substring(result.index + 1) : '',
+          message: result.outMessage,
+        };
+      }
+      if (result && !(result instanceof AstNode)) {
+        const msg =
+          typeof (result as any).outMessage == 'string'
+            ? (result as any).outMessage
+            : typeof (result as any).message == 'string'
+              ? (result as any).message
+              : '';
+        return {
+          isEof: /expect\s+eof/i.test(msg),
+          headText: '',
+          errorText: '',
+          tailText: '',
+          message: msg,
+        };
+      }
+      return undefined;
+    },
+  );
+
+  const handleTextareaKeyDown = (event: KeyboardEvent, submit: () => void) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  };
+
+  const resolveImportUrl = (importId: string | number) =>
+    settingsStore.shareUseOfficialImportDomain
+      ? getOfficialImportUrl(String(importId))
+      : getImportUrl(String(importId));
+
+  return {
+    selectorSyntaxText,
+    selectorSyntaxAst,
+    selectorSyntaxError,
+    handleTextareaKeyDown,
+    resolveImportUrl,
+  };
+}
diff --git a/src/composables/plus/useSnapshotPlus.ts b/src/composables/plus/useSnapshotPlus.ts
new file mode 100644
index 0000000..b7ce4ea
--- /dev/null
+++ b/src/composables/plus/useSnapshotPlus.ts
@@ -0,0 +1,64 @@
+import { watchEffect, onScopeDispose, shallowRef, type Ref } from 'vue';
+import { useStorage } from '@vueuse/core';
+import { loadingBar } from '@/utils/discrete';
+import { useSnapshotStore } from '@/views/plus/snapshot/snapshot';
+
+/**
+ * Snapshot Plus 面板显示状态接口
+ */
+export interface SnapshotPlusState {
+  searchShow: Ref<boolean>;
+  ruleShow: Ref<boolean>;
+  attrShow: Ref<boolean>;
+  settingsDlgShow: Ref<boolean>;
+  openSettings: () => void;
+  onTrackDialogClosed: () => void;
+}
+
+export type UseSnapshotPlusResult = ReturnType<typeof useSnapshotStore> &
+  SnapshotPlusState;
+
+export const useSnapshotPlus = (): UseSnapshotPlusResult => {
+  // 1. 获取官方 Store 实例
+  const snapshotStore = useSnapshotStore();
+
+  // 2. 联动加载条逻辑
+  watchEffect(() => {
+    if (snapshotStore.loading.value) loadingBar.start();
+    else loadingBar.finish();
+  });
+
+  onScopeDispose(() => {
+    loadingBar.finish();
+  });
+
+  // 3. Plus 专属持久化状态
+  const searchShow = useStorage(
+    'snapshotPlus:searchShow',
+    true,
+    sessionStorage,
+  );
+  const ruleShow = useStorage('snapshotPlus:ruleShow', false, sessionStorage);
+  const attrShow = useStorage('snapshotPlus:attrShow', true, sessionStorage);
+  const settingsDlgShow = shallowRef(false);
+
+  const openSettings = () => {
+    settingsDlgShow.value = true;
+  };
+
+  const onTrackDialogClosed = () => {
+    snapshotStore.trackData.value = undefined;
+  };
+
+  return {
+    // 转发官方 Store 内容（保持扁平化以便视图直接读取）
+    ...snapshotStore,
+    // 注入 Plus 逻辑
+    searchShow,
+    ruleShow,
+    attrShow,
+    settingsDlgShow,
+    openSettings,
+    onTrackDialogClosed,
+  };
+};
diff --git a/src/composables/plus/useTheme.ts b/src/composables/plus/useTheme.ts
new file mode 100644
index 0000000..31d304b
--- /dev/null
+++ b/src/composables/plus/useTheme.ts
@@ -0,0 +1,92 @@
+import { createSharedComposable, useNow } from '@vueuse/core';
+import { darkTheme } from 'naive-ui';
+import dayjs from 'dayjs';
+import { discreteAppTheme } from '@/theme';
+
+export const useTheme = createSharedComposable(() => {
+  const { settingsStore } = useStorageStore();
+  const prefersDark = usePreferredDark();
+  const now = useNow({ interval: 1000 * 60 }); // 每一分钟更新一次
+
+  const isInDarkModeWindow = computed(() => {
+    const start = dayjs(settingsStore.darkModeStart, 'HH:mm');
+    const end = dayjs(settingsStore.darkModeEnd, 'HH:mm');
+    const nowDayjs = dayjs(now.value);
+    if (start.isAfter(end)) {
+      // 跨天了
+      return nowDayjs.isAfter(start) || nowDayjs.isBefore(end);
+    } else {
+      return nowDayjs.isAfter(start) && nowDayjs.isBefore(end);
+    }
+  });
+
+  const isDarkModeActive = computed(() => {
+    if (settingsStore.themeMode === 'dark') return true;
+    if (settingsStore.themeMode === 'light') return false;
+    return isInDarkModeWindow.value || prefersDark.value;
+  });
+
+  const appTheme = computed(() => (isDarkModeActive.value ? darkTheme : null));
+
+  watch(
+    appTheme,
+    () => {
+      discreteAppTheme.value = appTheme.value;
+    },
+    { immediate: true },
+  );
+
+  const themeTokens = shallowRef({
+    graphNodeFill: '',
+    graphLeafFill: '',
+    graphLabelColor: '',
+    graphTargetLabelStroke: '',
+    graphEdgeStroke: '',
+    graphEdgeFallbackStroke: '',
+    graphEdgeLabelColor: '',
+    graphEdgeLabelBgStroke: '',
+    palette: [] as string[],
+  });
+
+  const readThemeTokens = () => {
+    if (typeof document === 'undefined') return;
+    const styles = getComputedStyle(document.documentElement);
+    const read = (name: string) => styles.getPropertyValue(name).trim();
+    const palette: string[] = [];
+    for (let i = 1; i <= 16; i++) {
+      const v = read(`--palette-${i}`);
+      if (v) palette.push(v);
+    }
+    themeTokens.value = {
+      graphNodeFill: read('--graph-node-fill'),
+      graphLeafFill: read('--graph-leaf-fill'),
+      graphLabelColor: read('--graph-label-color'),
+      graphTargetLabelStroke: read('--graph-target-label-stroke'),
+      graphEdgeStroke: read('--graph-edge-stroke'),
+      graphEdgeFallbackStroke: read('--graph-edge-fallback-stroke'),
+      graphEdgeLabelColor: read('--graph-edge-label-color'),
+      graphEdgeLabelBgStroke: read('--graph-edge-label-bg-stroke'),
+      palette,
+    };
+  };
+
+  watch(
+    [() => settingsStore.lowMemoryMode, () => isDarkModeActive.value],
+    ([lowMemoryMode, darkModeActive]) => {
+      if (typeof document === 'undefined') return;
+      const root = document.documentElement;
+      root.classList.toggle('low-memory-mode', lowMemoryMode);
+      root.classList.toggle('dark-mode-active', darkModeActive);
+      root.dataset.theme = darkModeActive ? 'dark' : 'light';
+      root.style.colorScheme = darkModeActive ? 'dark' : 'light';
+    },
+    { immediate: true, flush: 'sync' },
+  );
+  watch(isDarkModeActive, readThemeTokens, { immediate: true, flush: 'post' });
+
+  return {
+    appTheme,
+    isDarkModeActive,
+    themeTokens,
+  };
+});
diff --git a/src/composables/plus/useWindowQuickFind.ts b/src/composables/plus/useWindowQuickFind.ts
new file mode 100644
index 0000000..3907bcf
--- /dev/null
+++ b/src/composables/plus/useWindowQuickFind.ts
@@ -0,0 +1,36 @@
+import { computed, type ShallowRef } from 'vue';
+import { getNodeQf } from '@/utils/node';
+
+interface QuickFindMeta {
+  self: boolean;
+  has: boolean;
+}
+
+export const useWindowQuickFind = (rootNode: ShallowRef<RawNode>) => {
+  const metaMap = computed(() => {
+    const root = rootNode.value;
+    if (!root) return new Map<number, QuickFindMeta>();
+
+    const map = new Map<number, QuickFindMeta>();
+    const walk = (node: RawNode): QuickFindMeta => {
+      const self = getNodeQf(node);
+      let has = self;
+      for (const child of node.children) {
+        if (walk(child).has) has = true;
+      }
+      const meta = { self, has };
+      map.set(node.id, meta);
+      return meta;
+    };
+    walk(root);
+    return map;
+  });
+
+  const getNodeQuickFindMeta = (node: RawNode) => {
+    return metaMap.value.get(node.id);
+  };
+
+  return {
+    getNodeQuickFindMeta,
+  };
+};
diff --git a/src/composables/plus/usesnapshot.ts b/src/composables/plus/usesnapshot.ts
new file mode 100644
index 0000000..d453d54
--- /dev/null
+++ b/src/composables/plus/usesnapshot.ts
@@ -0,0 +1,3 @@
+import { useSnapshotPlus } from '@/composables/plus/useSnapshotPlus';
+
+export const usesnapshot = useSnapshotPlus;
diff --git a/src/composables/useArrayBufferObjectUrl.ts b/src/composables/useArrayBufferObjectUrl.ts
new file mode 100644
index 0000000..9e72ca6
--- /dev/null
+++ b/src/composables/useArrayBufferObjectUrl.ts
@@ -0,0 +1,36 @@
+import { onScopeDispose, readonly, shallowRef, watch, type Ref } from 'vue';
+
+export const useArrayBufferObjectUrl = (
+  source: Ref<ArrayBuffer | undefined>,
+  mimeType = 'image/png',
+) => {
+  const url = shallowRef<string>();
+
+  const revoke = () => {
+    if (url.value?.startsWith('blob:')) {
+      URL.revokeObjectURL(url.value);
+    }
+    url.value = undefined;
+  };
+
+  watch(
+    source,
+    (value) => {
+      revoke();
+      if (!value) return;
+      url.value = URL.createObjectURL(
+        new Blob([value], {
+          type: mimeType,
+        }),
+      );
+    },
+    { immediate: true },
+  );
+
+  onScopeDispose(revoke);
+
+  return {
+    url: readonly(url),
+    revoke,
+  };
+};
diff --git a/src/locales/index.ts b/src/locales/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/locales/lang/zh-CN.ts b/src/locales/lang/zh-CN.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/router.ts b/src/router.ts
index 063b360..ebd2320 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -28,14 +28,14 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      component: recordModule(() => import('@/views/home/HomePage.vue')),
+      component: recordModule(() => import('@/views/plus/home/HomePage.vue')),
       meta: { title: '首页' },
     },
     {
       path: '/snapshot/:snapshotId',
       name: 'snapshot',
       component: recordModule(
-        () => import('@/views/snapshot/SnapshotPage.vue'),
+        () => import('@/views/plus/snapshot/SnapshotPage.vue'),
       ),
       meta: { title: '快照' },
     },
@@ -48,6 +48,10 @@ const router = createRouter({
       path: '/i/:github_asset_id',
       redirect: redirectImport,
     },
+    {
+      path: '/:github_asset_id(\\d+)',
+      redirect: redirectImport,
+    },
     {
       path: '/import',
       redirect(to) {
@@ -63,27 +67,26 @@ const router = createRouter({
     },
     {
       path: '/device',
-      component: recordModule(() => import('@/views/DevicePage.vue')),
-      beforeEnter(to, _, next) {
+      component: recordModule(() => import('@/views/plus/DevicePage.vue')),
+      beforeEnter(to) {
         const u = toValidURL(String(to.query.url));
         if (u) {
           localStorage.setItem('device_link', u.origin);
           const query = { ...to.query };
           delete query.url;
-          return next({ ...to, query });
+          return { ...to, query };
         }
-        next();
       },
       meta: { title: '连接设备' },
     },
     {
       path: '/selector',
-      component: recordModule(() => import('@/views/SelectorPage.vue')),
+      component: recordModule(() => import('@/views/plus/SelectorPage.vue')),
       meta: { title: '选择器' },
     },
     {
       path: '/svg',
-      component: recordModule(() => import('@/views/SvgPage.vue')),
+      component: recordModule(() => import('@/views/plus/SvgPage.vue')),
       meta: { title: 'SVG' },
     },
     {
diff --git a/src/store/dialog.ts b/src/store/dialog.ts
new file mode 100644
index 0000000..236552e
--- /dev/null
+++ b/src/store/dialog.ts
@@ -0,0 +1,107 @@
+import { shallowReactive } from 'vue';
+import { createGlobalState } from '@vueuse/core';
+
+interface DialogOptions {
+  title?: string;
+  content?: string;
+  extraContent?: string;
+  extraTitle?: string;
+  quickPick?: boolean;
+  [key: string]: any;
+}
+
+interface DialogState {
+  visible: boolean;
+  options: DialogOptions;
+}
+
+export interface DialogStoreState {
+  shareLink: DialogState;
+  riskNotice: DialogState;
+  [key: string]: DialogState;
+}
+
+export const useDialogStore = createGlobalState(() => {
+  const callbacks = new Map<
+    string,
+    { resolve: (value: any) => void; reject: (reason?: any) => void }
+  >();
+
+  const state = shallowReactive<DialogStoreState>({
+    shareLink: {
+      visible: false,
+      options: {
+        title: '批量分享链接',
+        content: '',
+        extraContent: '',
+        extraTitle: '自定义域链接',
+        quickPick: false,
+      },
+    },
+    riskNotice: {
+      visible: false,
+      options: {},
+    },
+  });
+
+  const open = (dialogName: string, options: DialogOptions = {}) => {
+    if (!state[dialogName]) {
+      state[dialogName] = {
+        visible: false,
+        options: {},
+      };
+    }
+
+    state[dialogName].options = { ...state[dialogName].options, ...options };
+    state[dialogName].visible = true;
+
+    // 返回 Promise 以便调用者可以等待用户操作
+    return new Promise((resolve, reject) => {
+      callbacks.set(dialogName, { resolve, reject });
+    });
+  };
+
+  const close = (dialogName: string) => {
+    if (state[dialogName]) {
+      // 确保异步链路闭环，防止内存泄漏
+      const callback = callbacks.get(dialogName);
+      if (callback) {
+        callback.reject('cancel');
+        callbacks.delete(dialogName);
+      }
+      state[dialogName].visible = false;
+    }
+  };
+
+  const resolve = (dialogName: string, value: any) => {
+    const callback = callbacks.get(dialogName);
+    if (callback) {
+      callback.resolve(value);
+      callbacks.delete(dialogName);
+    }
+    // 自动关闭
+    if (state[dialogName]) {
+      state[dialogName].visible = false;
+    }
+  };
+
+  const reject = (dialogName: string, reason?: any) => {
+    const callback = callbacks.get(dialogName);
+    if (callback) {
+      callback.reject(reason);
+      callbacks.delete(dialogName);
+    }
+    // 自动关闭
+    if (state[dialogName]) {
+      state[dialogName].visible = false;
+    }
+  };
+
+  return {
+    state,
+    open,
+    close,
+    resolve,
+    reject,
+  };
+});
diff --git a/src/store/storage.ts b/src/store/storage.ts
index a867dd2..dd94aa1 100644
--- a/src/store/storage.ts
+++ b/src/store/storage.ts
@@ -26,10 +26,14 @@ const useReactiveStorage = <T extends object>(
   const initData = str
     ? tryRun(() => getter(JSON.parse(str)), fallback)
     : fallback();
-  const data = shallowReactive(initData);
-  watch(data, () => {
-    localStorage.setItem(key, JSON.stringify(toRaw(data)));
-  });
+  const data = reactive(initData);
+  watch(
+    data,
+    () => {
+      localStorage.setItem(key, JSON.stringify(toRaw(data)));
+    },
+    { deep: true },
+  );
   return data as T;
 };
 
@@ -53,9 +57,54 @@ export const settingsStore = useReactiveStorage<SettingsStore>(
     ignoreUploadWarn: false,
     ignoreWasmWarn: false,
     maxShowNodeSize: 2000,
+    lowMemoryMode: false,
+    themeMode: 'auto',
+    darkModeStart: '18:00',
+    darkModeEnd: '06:00',
+    autoExpandSnapshots: false,
+    groupRemarks: {},
+    shareUseOfficialImportDomain: true,
+    shareCustomImportDomain: '',
+    locale: 'zh',
+    debugMode: false,
+    showDebugTools: false,
+    focusNodeColor: undefined,
+    randomFocusNodeColorOnOpen: false,
+    filterRandomVidQf: true,
   }),
 );
 
+if (settingsStore.focusNodeColor === 'rgb(0, 220, 255)') {
+  settingsStore.focusNodeColor = undefined;
+}
+
+// 类型规范化：确保focusNodeColor是字符串类型
+if (typeof settingsStore.focusNodeColor !== 'string') {
+  settingsStore.focusNodeColor = undefined;
+}
+
+if (!settingsStore.darkModeStart) settingsStore.darkModeStart = '18:00';
+if (!settingsStore.darkModeEnd) settingsStore.darkModeEnd = '06:00';
+if (typeof settingsStore.shareUseOfficialImportDomain != 'boolean')
+  settingsStore.shareUseOfficialImportDomain = true;
+if (typeof settingsStore.shareCustomImportDomain != 'string')
+  settingsStore.shareCustomImportDomain = '';
+if (typeof settingsStore.debugMode != 'boolean')
+  settingsStore.debugMode = false;
+if (typeof settingsStore.showDebugTools != 'boolean')
+  settingsStore.showDebugTools = false;
+
+if (typeof settingsStore.randomFocusNodeColorOnOpen != 'boolean')
+  settingsStore.randomFocusNodeColorOnOpen = false;
+
+if (typeof settingsStore.filterRandomVidQf != 'boolean')
+  settingsStore.filterRandomVidQf = true;
+
+// snapshot id -> last viewed time
+export const snapshotViewedTime = await useReactiveIndexedDB<
+  Record<number, number>
+>('snapshotViewedTime', () => ({}));
+
 // snapshot id -> import time
 export const snapshotImportTime = await useReactiveIndexedDB<
   Record<string, number>
@@ -132,6 +181,7 @@ export const importSnapshotId = await useReactiveIndexedDB<
 export const useStorageStore = () => ({
   settingsStore,
   snapshotImportTime,
+  snapshotViewedTime,
   snapshotImageId,
   snapshotImportId,
   importSnapshotId,
diff --git a/src/style/atom.scss b/src/style/atom.scss
index 7037d2d..5c12ceb 100644
--- a/src/style/atom.scss
+++ b/src/style/atom.scss
@@ -17,14 +17,12 @@
     0 6px 16px 0 rgba(0, 0, 0, 0.08),
     0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
-@media (prefers-color-scheme: dark) {
-  .box-shadow-dim,
-  [box-shadow-dim] {
-    box-shadow:
-      0 3px 6px -4px rgba(0, 0, 0, 0.24),
-      0 6px 12px 0 rgba(0, 0, 0, 0.16),
-      0 9px 18px 8px rgba(0, 0, 0, 0.1);
-  }
+html.dark-mode-active .box-shadow-dim,
+html.dark-mode-active [box-shadow-dim] {
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.24),
+    0 6px 12px 0 rgba(0, 0, 0, 0.16),
+    0 9px 18px 8px rgba(0, 0, 0, 0.1);
 }
 
 .scrollbar-hidden,
@@ -34,3 +32,9 @@
     display: none;
   }
 }
+
+.low-memory-mode * {
+  animation-duration: 0s !important;
+  transition-duration: 0s !important;
+  scroll-behavior: auto !important;
+}
diff --git a/src/style/index.scss b/src/style/index.scss
index 928df15..0fe6ce6 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -7,8 +7,314 @@ html {
   height: var(--win-h);
 }
 
+body {
+  background-color: var(--app-bg-color);
+  color: var(--app-text-color);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
 .page-size,
 [page-size] {
   width: var(--gkd-w);
   height: var(--gkd-h);
 }
+
+.device-top-icon {
+  color: var(--device-top-icon-color);
+}
+.device-top-icon:hover {
+  color: var(--device-top-icon-hover-color);
+}
+
+.surface-card {
+  background-color: var(--surface-card-bg-color);
+  border-color: var(--surface-card-border-color);
+}
+
+.snapshot-floating-panel {
+  background-color: var(--panel-bg-color);
+  color: var(--panel-text-color);
+  border: 1px solid var(--panel-border-color) !important;
+  box-shadow: 0 4px 16px var(--panel-shadow-color);
+  border-radius: 12px;
+  overflow: hidden;
+  background-clip: padding-box;
+  opacity: 0.95;
+  transition: opacity 0.2s ease;
+}
+.snapshot-floating-panel:hover {
+  opacity: 1;
+}
+html.dark-mode-active .snapshot-floating-panel,
+html.dark-mode-active .snapshot-floating-panel--passthrough {
+  background-color: var(--panel-bg-color) !important;
+  color: var(--panel-text-color) !important;
+  border-color: var(--panel-border-color) !important;
+  box-shadow: 0 6px 18px var(--panel-shadow-color);
+}
+html.dark-mode-active .snapshot-floating-panel .n-input,
+html.dark-mode-active .snapshot-floating-panel .n-input__input-el,
+html.dark-mode-active .snapshot-floating-panel .n-input__textarea-el {
+  background-color: var(--snapshot-input-bg-color) !important;
+  color: var(--snapshot-input-text-color) !important;
+}
+html.dark-mode-active .snapshot-floating-panel .n-input__border {
+  border-color: var(--snapshot-input-border-color) !important;
+}
+html.dark-mode-active .snapshot-floating-panel .n-button--tertiary-type {
+  color: var(--snapshot-tertiary-text-color) !important;
+}
+html.dark-mode-active .snapshot-floating-panel .n-button--success-type {
+  color: var(--snapshot-success-text-color) !important;
+}
+html.dark-mode-active .snapshot-floating-panel .n-text {
+  color: var(--snapshot-text-color) !important;
+}
+
+.floating-panel {
+  border-radius: 12px !important;
+  border: 1px solid var(--panel-border-color);
+  box-shadow: 0 4px 16px var(--panel-shadow-color);
+  background-color: var(--panel-bg-color);
+  overflow: hidden;
+}
+html.dark-mode-active .floating-panel {
+  background-color: var(--panel-bg-color) !important;
+  border-color: var(--panel-border-color) !important;
+  box-shadow: 0 6px 18px var(--panel-shadow-color);
+}
+.floating-panel .n-button,
+.floating-panel .n-input,
+.floating-panel .n-textarea,
+.floating-panel .n-select,
+.floating-panel .n-checkbox,
+.floating-panel .n-radio,
+.floating-panel .n-switch,
+.floating-panel .n-input__inner {
+  border-radius: 6px !important;
+}
+
+.quickfind-icon {
+  color: var(--quickfind-color);
+}
+
+.snapshot-token {
+  background-color: var(--token-bg-color);
+  color: var(--token-text-color);
+}
+
+.snapshot-row-viewed {
+  background-color: var(--row-viewed-bg-color);
+  border-color: var(--row-viewed-border-color);
+}
+
+.mini-hover-image {
+  background-color: var(--mini-hover-image-bg-color);
+}
+
+.mini-hover-token {
+  background: var(--mini-hover-token-bg);
+  color: var(--mini-hover-token-color);
+  border: 1px solid var(--mini-hover-token-border-color);
+  border-radius: 3px;
+  backdrop-filter: blur(5px) saturate(1.25);
+  -webkit-backdrop-filter: blur(5px) saturate(1.25);
+  box-shadow: var(--mini-hover-token-shadow);
+  text-shadow: var(--mini-hover-token-text-shadow);
+}
+
+.overlap-pos-token {
+  padding: 0 2px;
+  border-radius: 4px;
+  background-color: var(--overlap-pos-token-bg-color);
+  color: var(--overlap-pos-token-color);
+}
+
+.selector-ast-view {
+  background-color: var(--selector-ast-bg-color);
+  color: var(--selector-ast-color);
+}
+
+.selector-ast-view-error {
+  background-color: var(--selector-ast-error-bg-color);
+}
+
+.selector-error-box {
+  background-color: var(--selector-error-box-bg-color);
+  color: var(--selector-error-box-color);
+}
+
+.selector-error-arrow {
+  color: var(--selector-error-arrow-color);
+}
+
+html.dark-mode-active .snapshot-floating-panel .n-dialog {
+  background-color: var(--snapshot-dialog-bg-color) !important;
+}
+
+html.dark-mode-active .n-dialog.snapshot-floating-panel {
+  background-color: var(--snapshot-dialog-bg-color) !important;
+  color: var(--snapshot-dialog-text-color) !important;
+}
+
+html.dark-mode-active .snapshot-floating-panel .n-dialog__title {
+  color: var(--snapshot-dialog-title-color) !important;
+}
+
+html.dark-mode-active .snapshot-floating-panel .n-checkbox .n-checkbox__label {
+  color: var(--snapshot-dialog-checkbox-label-color) !important;
+}
+
+html.dark-mode-active .snapshot-token {
+  background-color: var(--token-bg-color) !important;
+  color: var(--token-text-color) !important;
+}
+
+html.dark-mode-active .snapshot-row-viewed {
+  background-color: var(--row-viewed-bg-color) !important;
+  border-color: var(--row-viewed-border-color) !important;
+}
+
+.snapshot-page .n-button {
+  --n-icon-size: var(--app-icon-size);
+}
+
+.snapshot-sidebar {
+  width: calc(var(--app-icon-size) + 16px);
+  --n-icon-size: var(--app-icon-size);
+  --svg-h: var(--app-icon-size);
+}
+.snapshot-sidebar .SvgIcon {
+  width: var(--app-icon-size) !important;
+  height: var(--app-icon-size) !important;
+}
+
+.home-topbar-icons {
+  --n-icon-size: var(--app-icon-size);
+  --svg-h: var(--app-icon-size);
+}
+.home-topbar-icons .SvgIcon {
+  width: var(--app-icon-size) !important;
+  height: var(--app-icon-size) !important;
+}
+
+.snapshot-page .n-card,
+.snapshot-page .n-modal,
+.snapshot-page .n-dialog,
+.snapshot-page .TrackCard,
+.snapshot-page .snapshot-floating-panel,
+.snapshot-window,
+.snapshot-window .n-card,
+.snapshot-window .n-modal,
+.snapshot-window .n-dialog,
+.snapshot-window .TrackCard,
+.snapshot-window .snapshot-floating-panel {
+  border-radius: 12px;
+}
+
+.snapshot-page .n-button,
+.snapshot-page .n-input,
+.snapshot-page .n-textarea,
+.snapshot-page .n-select,
+.snapshot-page .n-checkbox,
+.snapshot-page .n-radio,
+.snapshot-page .n-switch,
+.snapshot-page .n-input__inner,
+.snapshot-window .n-button,
+.snapshot-window .n-input,
+.snapshot-window .n-textarea,
+.snapshot-window .n-select,
+.snapshot-window .n-checkbox,
+.snapshot-window .n-radio,
+.snapshot-window .n-switch,
+.snapshot-window .n-input__inner {
+  border-radius: 6px !important;
+}
+
+.snapshot-page .gkd_code,
+.snapshot-page code,
+.snapshot-page a,
+.snapshot-page .snapshot-token,
+.snapshot-page .selector-ast-view,
+.snapshot-page .selector-error-box,
+.snapshot-page .selector-error-arrow,
+.snapshot-page .TrackCard .gkd_code,
+.snapshot-page .TrackCard code,
+.snapshot-window .gkd_code,
+.snapshot-window code,
+.snapshot-window a,
+.snapshot-window .snapshot-token,
+.snapshot-window .selector-ast-view,
+.snapshot-window .selector-error-box,
+.snapshot-window .selector-error-arrow,
+.snapshot-window .TrackCard .gkd_code,
+.snapshot-window .TrackCard code {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+  letter-spacing: -0.02em;
+}
+
+.snapshot-page .n-tree {
+  --n-line-width: 1px;
+  --n-line-color: var(--tree-line-color);
+}
+html.dark-mode-active .snapshot-page .n-tree {
+  --n-line-color: var(--tree-line-color);
+}
+
+.snapshot-window .n-card {
+  border: 1px solid var(--snapshot-card-border-color);
+  box-shadow: 0 4px 16px var(--snapshot-card-shadow-color);
+  opacity: 0.95;
+  transition: opacity 0.2s ease;
+}
+.snapshot-window .n-card:hover {
+  opacity: 1;
+}
+
+.window-anim {
+  animation: window-pop 180ms ease-out;
+}
+@keyframes window-pop {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+.settings-modal .settings-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.settings-modal .n-dialog {
+  border-radius: 12px;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
+}
+.settings-modal .settings-section {
+  padding: 12px;
+  border: 1px solid var(--settings-section-border-color);
+  border-radius: 12px;
+  background: var(--settings-section-bg-color);
+}
+.settings-modal .settings-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.settings-modal .settings-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 8px 0;
+}
+.settings-modal .settings-debug {
+  justify-content: space-between;
+}
+html.dark-mode-active .settings-modal .settings-section {
+  background: var(--settings-section-bg-color);
+  border-color: var(--settings-section-border-color);
+}
diff --git a/src/style/var.scss b/src/style/var.scss
index 609ec1c..a40f824 100644
--- a/src/style/var.scss
+++ b/src/style/var.scss
@@ -1,4 +1,229 @@
 :root {
   --gkd-w: max(1200px, 100vw);
   --gkd-h: max(700px, 100vh);
+  --app-icon-size: 24px;
+  --app-bg-color: #ffffff;
+  --app-text-color: #111111;
+  --panel-bg-color: #ffffff;
+  --panel-text-color: inherit;
+  --panel-border-color: rgba(128, 128, 128, 0.15);
+  --panel-shadow-color: rgba(0, 0, 0, 0.1);
+  --quickfind-color: #22c55e;
+  --info-color: #3b82f6;
+  --token-bg-color: #eeeeee;
+  --token-text-color: inherit;
+  --row-viewed-bg-color: #ecfdf3;
+  --row-viewed-border-color: #bbf7d0;
+  --tree-line-color: rgba(60, 60, 60, 0.5);
+  --settings-section-bg-color: rgba(255, 255, 255, 0.7);
+  --settings-section-border-color: rgba(128, 128, 128, 0.15);
+  --focus-node-color: rgb(0, 220, 255);
+  --device-top-icon-color: #0f172a;
+  --device-top-icon-hover-color: #0b1220;
+  --mini-hover-image-bg-color: #ffffff;
+  --mini-hover-token-bg: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.9),
+    rgba(255, 255, 255, 0.72)
+  );
+  --mini-hover-token-color: #0b1220;
+  --mini-hover-token-border-color: rgba(15, 23, 42, 0.34);
+  --mini-hover-token-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
+    0 1px 4px rgba(0, 0, 0, 0.28);
+  --mini-hover-token-text-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.85),
+    0 0 1px rgba(0, 0, 0, 0.95);
+  --overlap-pos-token-bg-color: #eef1f7;
+  --overlap-pos-token-color: #1f2937;
+  --selector-ast-bg-color: #d4d4d8;
+  --selector-ast-color: #111111;
+  --selector-ast-error-bg-color: #fecaca;
+  --selector-error-box-bg-color: #fca5a5;
+  --selector-error-box-color: #111111;
+  --selector-error-arrow-color: #1f2937;
+  --snapshot-card-border-color: rgba(128, 128, 128, 0.15);
+  --snapshot-card-shadow-color: rgba(0, 0, 0, 0.1);
+  --accent-success-color: #22c55e;
+  --accent-danger-color: #d03050;
+  --text-muted-color: #999999;
+  --divider-color: #efeff5;
+  --surface-card-bg-color: #ffffff;
+  --surface-card-border-color: #efeff5;
+  --icon-contrast-color: #0f172a;
+  --scrollbar-thumb-color: rgba(144, 147, 153, 0.3);
+  --scrollbar-thumb-hover-color: rgba(144, 147, 153, 0.5);
+  --scrollbar-thumb-active-color: rgba(144, 147, 153, 0.6);
+  --scrollbar-thumb-hidden-color: transparent;
+  --svg-page-card-bg-color: #f9f9f9;
+  --svg-page-icon-color: #575bca;
+  --graph-node-fill: #767c82;
+  --graph-leaf-fill: #e3e3e3;
+  --graph-label-color: #1b1f24;
+  --graph-target-label-stroke: #00ffff;
+  --graph-edge-stroke: #e3e3e3;
+  --graph-edge-fallback-stroke: #ff7fff;
+  --graph-edge-label-color: #ff0000;
+  --graph-edge-label-bg-stroke: #ff00ff;
+  --track-card-outline-color: #0000ff;
+  --track-card-text-color: #6c6e71;
+  --track-card-bg-color: #eeeeee;
+  --track-card-border-color: #cccccc;
+  --selector-unknown-bg-color: #ff0000;
+  --selector-property-color: #8a2be2;
+  --selector-property-prefix-color: rgb(98, 55, 138);
+  --selector-connect-operator-color: #008000;
+  --selector-connect-expression-color: #5f9ea0;
+  --selector-value-expression-color: #008000;
+  --selector-value-literal-color: #4682b4;
+  --selector-compare-operator-color: #0000cd;
+  --selector-logical-operator-color: #006400;
+  --selector-string-bracket-color: #b392f0;
+  --selector-string-comma-color: #5e418c;
+  --screenshot-card-bg-color: rgba(255, 255, 255, 0.56);
+  --screenshot-card-text-color: #000000;
+  --screenshot-card-text-color-dark: #ffffff;
+  --screenshot-focus-border-color: #3b82f6;
+  --screenshot-focus-border-inner-color: #ef4444;
+  --mini-hover-cross-color: #ffffff;
+  --mini-hover-border-color: #4f46e5;
+  --snapshot-input-bg-color: #ffffff;
+  --snapshot-input-text-color: #111111;
+  --snapshot-input-border-color: rgba(15, 23, 42, 0.2);
+  --snapshot-tertiary-text-color: #374151;
+  --snapshot-success-text-color: #16a34a;
+  --snapshot-text-color: #374151;
+  --snapshot-dialog-bg-color: #ffffff;
+  --snapshot-dialog-text-color: #111111;
+  --snapshot-dialog-title-color: #0f172a;
+  --snapshot-dialog-checkbox-label-color: #111111;
+  --palette-1: #ff00ff;
+  --palette-2: #18821c;
+  --palette-3: #00ff00;
+  --palette-4: #007fff;
+  --palette-5: #ff7f00;
+  --palette-6: #7fbf7f;
+  --palette-7: #4e01bf;
+  --palette-8: #b80836;
+  --palette-9: #d67ffd;
+  --palette-10: #00ffff;
+  --palette-11: #fafe43;
+  --palette-12: #00ff7f;
+  --palette-13: #215b8f;
+  --palette-14: #bd667c;
+  --palette-15: #84f7f8;
+  --palette-16: #8dfa01;
+}
+
+html.dark-mode-active {
+  --app-bg-color: #121217;
+  --app-text-color: #e8e8ee;
+  --panel-bg-color: #161821;
+  --panel-text-color: #e8e8ee;
+  --panel-border-color: rgba(226, 232, 240, 0.16);
+  --panel-shadow-color: rgba(0, 0, 0, 0.45);
+  --quickfind-color: #22c55e;
+  --info-color: #60a5fa;
+  --token-bg-color: #2d3340;
+  --token-text-color: #e7eaf3;
+  --row-viewed-bg-color: #203229;
+  --row-viewed-border-color: #355746;
+  --tree-line-color: rgba(232, 232, 238, 0.25);
+  --settings-section-bg-color: rgba(23, 25, 32, 0.9);
+  --settings-section-border-color: rgba(226, 232, 240, 0.16);
+  --device-top-icon-color: #cfeee0;
+  --device-top-icon-hover-color: #a7e7c4;
+  --mini-hover-image-bg-color: #1b1b22;
+  --mini-hover-token-bg: linear-gradient(
+    180deg,
+    rgba(12, 16, 24, 0.94),
+    rgba(18, 23, 32, 0.84)
+  );
+  --mini-hover-token-color: #f8fbff;
+  --mini-hover-token-border-color: rgba(226, 232, 240, 0.42);
+  --mini-hover-token-shadow:
+    0 0 0 1px rgba(15, 23, 42, 0.5) inset,
+    0 1px 5px rgba(0, 0, 0, 0.62);
+  --mini-hover-token-text-shadow:
+    0 1px 2px rgba(0, 0, 0, 1),
+    0 0 1px rgba(0, 0, 0, 1);
+  --overlap-pos-token-bg-color: #2d3340;
+  --overlap-pos-token-color: #e7eaf3;
+  --selector-ast-bg-color: #2d3340;
+  --selector-ast-color: #e7eaf3;
+  --selector-ast-error-bg-color: #5a1f26;
+  --selector-error-box-bg-color: #4a1e24;
+  --selector-error-box-color: #ffdede;
+  --selector-error-arrow-color: #f4c2c2;
+  --snapshot-card-border-color: rgba(226, 232, 240, 0.16);
+  --snapshot-card-shadow-color: rgba(0, 0, 0, 0.45);
+  --accent-success-color: #22c55e;
+  --accent-danger-color: #d03050;
+  --text-muted-color: #9ca3af;
+  --divider-color: #373744;
+  --surface-card-bg-color: #1b1b22;
+  --surface-card-border-color: #373744;
+  --icon-contrast-color: #ffffff;
+  --scrollbar-thumb-color: rgba(148, 163, 184, 0.35);
+  --scrollbar-thumb-hover-color: rgba(148, 163, 184, 0.55);
+  --scrollbar-thumb-active-color: rgba(148, 163, 184, 0.7);
+  --scrollbar-thumb-hidden-color: transparent;
+  --svg-page-card-bg-color: #1b1b22;
+  --svg-page-icon-color: #a5b4fc;
+  --graph-node-fill: #6b7280;
+  --graph-leaf-fill: #374151;
+  --graph-label-color: #e8e8ee;
+  --graph-target-label-stroke: #337dff;
+  --graph-edge-stroke: #374151;
+  --graph-edge-fallback-stroke: #ff7fff;
+  --graph-edge-label-color: #ff7b7b;
+  --graph-edge-label-bg-stroke: #ff00ff;
+  --track-card-outline-color: #93c5fd;
+  --track-card-text-color: #9ca3af;
+  --track-card-bg-color: #2d3340;
+  --track-card-border-color: #4b5563;
+  --selector-unknown-bg-color: #ff6b6b;
+  --selector-property-color: #c084fc;
+  --selector-property-prefix-color: #b794f4;
+  --selector-connect-operator-color: #34d399;
+  --selector-connect-expression-color: #67e8f9;
+  --selector-value-expression-color: #34d399;
+  --selector-value-literal-color: #93c5fd;
+  --selector-compare-operator-color: #60a5fa;
+  --selector-logical-operator-color: #22c55e;
+  --selector-string-bracket-color: #d8b4fe;
+  --selector-string-comma-color: #c4b5fd;
+  --screenshot-card-bg-color: rgba(17, 24, 39, 0.56);
+  --screenshot-card-text-color: #f9fafb;
+  --screenshot-card-text-color-dark: #f9fafb;
+  --screenshot-focus-border-color: #60a5fa;
+  --screenshot-focus-border-inner-color: #f87171;
+  --mini-hover-cross-color: #ffffff;
+  --mini-hover-border-color: #6366f1;
+  --snapshot-input-bg-color: #1b1f2a;
+  --snapshot-input-text-color: #e8e8ee;
+  --snapshot-input-border-color: rgba(226, 232, 240, 0.2);
+  --snapshot-tertiary-text-color: #d9dee7;
+  --snapshot-success-text-color: #13c67b;
+  --snapshot-text-color: #d9dee7;
+  --snapshot-dialog-bg-color: #161821;
+  --snapshot-dialog-text-color: #e8e8ee;
+  --snapshot-dialog-title-color: #f4f6ff;
+  --snapshot-dialog-checkbox-label-color: #e8e8ee;
+  --palette-1: #ff00ff;
+  --palette-2: #18821c;
+  --palette-3: #00ff00;
+  --palette-4: #007fff;
+  --palette-5: #ff7f00;
+  --palette-6: #7fbf7f;
+  --palette-7: #4e01bf;
+  --palette-8: #b80836;
+  --palette-9: #d67ffd;
+  --palette-10: #00ffff;
+  --palette-11: #fafe43;
+  --palette-12: #00ff7f;
+  --palette-13: #215b8f;
+  --palette-14: #bd667c;
+  --palette-15: #84f7f8;
+  --palette-16: #8dfa01;
 }
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 0000000..8ea71a8
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,4 @@
+import { shallowRef } from 'vue';
+import type { GlobalTheme } from 'naive-ui';
+
+export const discreteAppTheme = shallowRef<GlobalTheme | null>(null);
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 5a2d938..411fbb1 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -51,6 +51,13 @@ interface RawAttr {
   desc?: string;
   descLen?: number;
   isClickable: boolean;
+  clickable?: boolean;
+  focusable?: boolean;
+  checkable?: boolean;
+  checked?: boolean;
+  editable?: boolean;
+  longClickable?: boolean;
+  visibleToUser?: boolean;
   childCount: number;
   index: number;
   depth: number;
@@ -137,6 +144,7 @@ interface SelectorSearchResult {
   nodes: RawNode[];
   results: import('@gkd-kit/selector').QueryResult<RawNode>[];
 }
+
 interface StringSearchResult {
   gkd: false;
   key: number;
diff --git a/src/types/plus/index.d.ts b/src/types/plus/index.d.ts
new file mode 100644
index 0000000..04909c3
--- /dev/null
+++ b/src/types/plus/index.d.ts
@@ -0,0 +1,48 @@
+import '@gkd-kit/selector';
+
+type FastQueryIndicatorMeta = {
+  support: boolean;
+  local: boolean;
+};
+
+declare module '@gkd-kit/selector' {
+  // The generic parameter comes from the upstream declaration we are merging.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface QueryPath<T> {
+    // Keep the selector path formatting hook in the Plus layer so base typings
+    // stay close to upstream.
+    formatConnectOffset: string;
+    operator?: {
+      key: string;
+    };
+  }
+}
+
+declare global {
+  interface SelectorSearchResult {
+    fastQueryMeta?: FastQueryIndicatorMeta | null;
+  }
+
+  interface StringSearchResult {
+    fastQueryMeta?: FastQueryIndicatorMeta | null;
+  }
+
+  interface SettingsStore {
+    lowMemoryMode: boolean;
+    themeMode: 'auto' | 'light' | 'dark';
+    darkModeStart: string;
+    darkModeEnd: string;
+    autoExpandSnapshots: boolean;
+    groupRemarks: Record<string, string>;
+    shareUseOfficialImportDomain: boolean;
+    shareCustomImportDomain: string;
+    locale: 'zh' | 'en';
+    debugMode?: boolean;
+    showDebugTools?: boolean;
+    focusNodeColor?: string;
+    randomFocusNodeColorOnOpen: boolean;
+    filterRandomVidQf: boolean;
+  }
+}
+
+export {};
diff --git a/src/utils/api.ts b/src/utils/api.ts
index dbb4f50..59ca89a 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -6,6 +6,11 @@ interface Reqid {
   id: number;
 }
 
+interface RpcError {
+  __error: boolean;
+  message: string;
+}
+
 export const useDeviceApi = (initOrigin?: string) => {
   const origin = shallowRef(initOrigin);
   const serverInfo = shallowRef<ServerInfo>();
diff --git a/src/utils/dialog.tsx b/src/utils/dialog.tsx
index 499df02..05acf23 100644
--- a/src/utils/dialog.tsx
+++ b/src/utils/dialog.tsx
@@ -1,75 +1,275 @@
-import { dialog, message } from './discrete';
+/* eslint-disable vue/multi-word-component-names */
+import { message, modal, dialog as discreteDialog } from './discrete';
+import ConnectSvg from '@/assets/svg/Connect.svg';
+import { getImportId } from './url';
+import { settingsStore } from '@/store/storage';
+import { defineComponent, h, computed } from 'vue';
+import {
+  NConfigProvider,
+  NCard,
+  NSpace,
+  NButton,
+  NInput,
+  NGrid,
+  NGi,
+  NCheckbox,
+} from 'naive-ui';
+import { discreteAppTheme } from '@/theme';
 
-export const showTextDLg = ({ title = `批量分享链接`, content = '' }) => {
-  dialog.success({
-    title,
-    style: {
-      width: `800px`,
-    },
-    content() {
-      return (
-        <NInput
-          type="textarea"
-          autosize={{
-            minRows: 8,
-            maxRows: 16,
+const ShareDialogContent = defineComponent({
+  props: {
+    title: { type: String, default: '批量分享链接' },
+    officialUrl: { type: String, required: true },
+    currentOriginUrl: { type: String, required: true },
+    extraTitle: { type: String, default: '自定义域链接' },
+    quickPick: { type: Boolean, default: false },
+    onClose: { type: Function, required: true },
+  },
+  setup(props) {
+    // 鲁棒性判定：只要 discreteAppTheme.value 存在，即视为深色模式
+    const isDark = computed(() => {
+      const _isDark = !!discreteAppTheme.value;
+      console.log('[DialogDebug] 响应式状态:', _isDark ? '深色' : '亮色');
+      return _isDark;
+    });
+
+    const copyText = async (text: string) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        message.success('复制成功');
+      } catch {
+        message.error('复制失败');
+      }
+    };
+
+    return () => (
+      <NConfigProvider theme={discreteAppTheme.value}>
+        <NCard
+          class="snapshot-floating-panel snapshot-floating-panel--passthrough"
+          size="small"
+          style={{
+            width: props.quickPick ? '520px' : '500px',
+            overflow: 'hidden',
+            backgroundColor: isDark.value ? '#18181c' : '#ffffff',
+            transition: 'background-color 0.3s ease',
           }}
-          inputProps={{
-            style: `white-space: nowrap;`,
-            class: `gkd_code`,
+        >
+          {{
+            header: () => (
+              <NSpace
+                class="n-draggable"
+                align="center"
+                justify="space-between"
+                style={{ width: '100%', cursor: 'move' }}
+              >
+                <NSpace align="center" size={8}>
+                  <div
+                    style={{
+                      width: '30px',
+                      height: '30px',
+                      filter: isDark.value ? 'invert(100%)' : 'none',
+                      transition: 'filter 0.3s ease',
+                    }}
+                  >
+                    <img
+                      src={ConnectSvg}
+                      style={{ width: '100%', height: '100%' }}
+                    />
+                  </div>
+                  <span
+                    style={{
+                      fontWeight: '500',
+                      color: isDark.value ? '#ffffff' : 'inherit',
+                    }}
+                  >
+                    {props.title}
+                  </span>
+                </NSpace>
+                <NButton
+                  text
+                  style={{ fontSize: '20px' }}
+                  onClick={() => props.onClose()}
+                >
+                  {' '}
+                  ×{' '}
+                </NButton>
+              </NSpace>
+            ),
+            default: () => (
+              <NSpace vertical size={10}>
+                <div class="flex flex-col gap-1">
+                  <div
+                    class="text-11px opacity-40 ml-1"
+                    style={{ color: 'var(--n-text-color-disabled)' }}
+                  >
+                    {' '}
+                    官方域 (i.gkd.li){' '}
+                  </div>
+                  <NInput
+                    type="textarea"
+                    autosize={{ minRows: 2, maxRows: 3 }}
+                    inputProps={{
+                      class: 'gkd_code',
+                      readonly: 'true',
+                      style: 'white-space: pre; font-size: 13px; padding: 6px;',
+                    }}
+                    value={props.officialUrl}
+                  />
+                </div>
+                <div class="flex flex-col gap-1">
+                  <div
+                    class="text-11px opacity-40 ml-1"
+                    style={{ color: 'var(--n-text-color-disabled)' }}
+                  >
+                    {' '}
+                    {props.extraTitle}{' '}
+                  </div>
+                  <NInput
+                    type="textarea"
+                    autosize={{ minRows: 2, maxRows: 3 }}
+                    inputProps={{
+                      class: 'gkd_code',
+                      readonly: 'true',
+                      style: 'white-space: pre; font-size: 13px; padding: 6px;',
+                    }}
+                    value={props.currentOriginUrl}
+                  />
+                </div>
+              </NSpace>
+            ),
+            footer: () => (
+              <NGrid cols={2} xGap={12}>
+                <NGi>
+                  <NButton
+                    block
+                    style={{
+                      borderRadius: '7px',
+                      fontWeight: 600,
+                      // 【修正核心】：只要是选中的 success 状态，强制白色并加 !important
+                      color: !settingsStore.shareUseOfficialImportDomain
+                        ? '#ffffff !important'
+                        : isDark.value
+                          ? '#ffffff'
+                          : '#000000',
+                    }}
+                    type={
+                      !settingsStore.shareUseOfficialImportDomain
+                        ? 'success'
+                        : 'tertiary'
+                    }
+                    onClick={() => {
+                      settingsStore.shareUseOfficialImportDomain = false;
+                      void copyText(props.currentOriginUrl);
+                      if (props.quickPick)
+                        setTimeout(() => props.onClose(), 220);
+                    }}
+                  >
+                    {' '}
+                    当前域链接{' '}
+                  </NButton>
+                </NGi>
+                <NGi>
+                  <NButton
+                    block
+                    style={{
+                      borderRadius: '7px',
+                      fontWeight: 600,
+                      // 【修正核心】：只要是选中的 success 状态，强制白色并加 !important
+                      color: settingsStore.shareUseOfficialImportDomain
+                        ? '#ffffff !important'
+                        : isDark.value
+                          ? '#ffffff'
+                          : '#000000',
+                    }}
+                    type={
+                      settingsStore.shareUseOfficialImportDomain
+                        ? 'success'
+                        : 'tertiary'
+                    }
+                    onClick={() => {
+                      settingsStore.shareUseOfficialImportDomain = true;
+                      void copyText(props.officialUrl);
+                      if (props.quickPick)
+                        setTimeout(() => props.onClose(), 220);
+                    }}
+                  >
+                    {' '}
+                    官方链接{' '}
+                  </NButton>
+                </NGi>
+              </NGrid>
+            ),
           }}
-          value={content}
-        />
-      );
-    },
-    positiveText: `复制`,
-    onPositiveClick() {
-      navigator.clipboard
-        .writeText(content)
-        .then(() => {
-          message.success(`复制成功`);
-        })
-        .catch(() => {
-          message.success(`复制失败`);
-        });
-      return false;
-    },
+        </NCard>
+      </NConfigProvider>
+    );
+  },
+});
+
+export const showTextDLg = (
+  params: {
+    content?: string;
+    extraContent?: string;
+    title?: string;
+    extraTitle?: string;
+    quickPick?: boolean;
+  } = {},
+) => {
+  const { content = '', extraContent = '' } = params;
+  const importId = getImportId(content) || getImportId(extraContent);
+  const officialUrl = importId ? `https://i.gkd.li/i/${importId}` : content;
+  const currentOriginUrl =
+    extraContent ||
+    (importId ? `${window.location.origin}/i/${importId}` : content);
+
+  let reactiveModal: any = null;
+  const close = () => reactiveModal?.destroy();
+
+  reactiveModal = modal.create({
+    draggable: true,
+    showMask: false,
+    maskClosable: false,
+    closeOnEsc: true,
+    render: () =>
+      h(ShareDialogContent, {
+        ...params,
+        officialUrl,
+        currentOriginUrl,
+        onClose: close,
+      }),
   });
 };
 
-const NoticeCheckbox = defineComponent(() => {
-  return () => {
-    return (
-      <NCheckbox
-        checked={settingsStore.ignoreUploadWarn}
-        onUpdateChecked={(value) => {
-          settingsStore.ignoreUploadWarn = value;
-        }}
-        focusable={false}
-      >
-        不再提醒
-      </NCheckbox>
-    );
-  };
+const ShareNoticeCheckbox = defineComponent(() => {
+  return () => (
+    <NCheckbox
+      checked={settingsStore.ignoreUploadWarn}
+      onUpdateChecked={(val: boolean) => {
+        settingsStore.ignoreUploadWarn = val;
+      }}
+      focusable={false}
+    >
+      {' '}
+      不再提醒{' '}
+    </NCheckbox>
+  );
 });
 
 export const waitShareAgree = async () => {
   if (settingsStore.ignoreUploadWarn) return;
   return new Promise((resolve, reject) => {
-    dialog.warning({
+    discreteDialog.warning({
+      class: 'snapshot-floating-panel',
       title: '生成分享链接须知',
       content() {
         return (
-          <div>
+          <div class="snapshot-floating-panel">
             <div>所有快照上传分享链接均为公开链接，任何人均可访问。</div>
             <div>请确保快照不包含隐私信息，请勿分享任何敏感信息。</div>
-            <NoticeCheckbox class="mt-10px" />
+            <ShareNoticeCheckbox class="mt-10px" />
           </div>
         );
       },
-      closable: false,
-      closeOnEsc: false,
-      maskClosable: false,
       positiveText: '继续上传',
       negativeText: '取消分享',
       onPositiveClick: resolve,
diff --git a/src/utils/discrete.ts b/src/utils/discrete.ts
index 411e5ef..ce2abe9 100644
--- a/src/utils/discrete.ts
+++ b/src/utils/discrete.ts
@@ -1,8 +1,15 @@
-import { createDiscreteApi } from 'naive-ui';
+import { createDiscreteApi, type ConfigProviderProps } from 'naive-ui';
+import { computed } from 'vue';
+import { discreteAppTheme } from '@/theme';
 
-const { message, dialog, loadingBar } = createDiscreteApi([
-  'message',
-  'dialog',
-  'loadingBar',
-]);
-export { message, dialog, loadingBar };
+const configProviderProps = computed<ConfigProviderProps>(() => ({
+  theme: discreteAppTheme.value,
+}));
+
+const { message, dialog, loadingBar, modal } = createDiscreteApi(
+  ['message', 'dialog', 'loadingBar', 'modal'],
+  {
+    configProviderProps,
+  },
+);
+export { message, dialog, loadingBar, modal };
diff --git a/src/utils/g6.ts b/src/utils/g6.ts
index 31a4e14..bcc946f 100644
--- a/src/utils/g6.ts
+++ b/src/utils/g6.ts
@@ -1,18 +1,36 @@
 import { ExtensionCategory, Quadratic, register } from '@antv/g6';
 
+/**
+ * 蚂蚁线动画曲线边
+ */
 export class AntQuadratic extends Quadratic {
-  static tyoe = 'ant-quadratic';
+  static type = 'ant-quadratic';
   static lineDashGap = 5;
+
   onCreate() {
-    this.shapeMap.key.animate(
-      [{ lineDashOffset: AntQuadratic.lineDashGap * 2 }, { lineDashOffset: 0 }],
-      {
-        duration: 500,
-        iterations: Infinity,
-        delay: 0,
-      },
-    );
+    this.updateAnimation();
+  }
+
+  onUpdate() {
+    this.updateAnimation();
+  }
+
+  private updateAnimation() {
+    const shape = this.shapeMap.key;
+    if (shape) {
+      shape.animate(
+        [
+          { lineDashOffset: AntQuadratic.lineDashGap * 2 },
+          { lineDashOffset: 0 },
+        ],
+        {
+          duration: 500,
+          iterations: Infinity,
+          delay: 0,
+        },
+      );
+    }
   }
 }
 
-register(ExtensionCategory.EDGE, AntQuadratic.tyoe, AntQuadratic, true);
+register(ExtensionCategory.EDGE, AntQuadratic.type, AntQuadratic);
diff --git a/src/utils/node.ts b/src/utils/node.ts
index fdec040..b9a6605 100644
--- a/src/utils/node.ts
+++ b/src/utils/node.ts
@@ -1,3 +1,5 @@
+import { settingsStore } from '@/store/storage';
+
 // 获取元素id最后一个.后面的内容
 const getShortName = (fullName: string): string => {
   let lstIndex = fullName.lastIndexOf('.');
@@ -38,16 +40,17 @@ export const getNodeSelectorText = (
       );
     }
   }
+  const index = curNode.attr.index ?? 0;
   if (isFirst) {
     return [
       '@' + getShortName(curNode.attr.name),
-      getNodeSelectorText(curNode.parent, false, curNode.attr.index + 1),
+      getNodeSelectorText(curNode.parent, false, index + 1),
     ].join(' ');
   }
   return [
     getConnectOperator('<', lastIndex),
     getShortName(curNode.attr.name),
-    getNodeSelectorText(curNode.parent, false, curNode.attr.index + 1),
+    getNodeSelectorText(curNode.parent, false, index + 1),
   ].join(' ');
 };
 
@@ -66,8 +69,8 @@ export const listToTree = (nodes: RawNode[]) => {
       },
     });
     node.attr.depth = (node.parent?.attr?.depth ?? -1) + 1;
-    node.attr._id ??= node.id;
-    node.attr._pid ??= node.pid;
+    (node.attr as any)._id ??= node.id;
+    (node.attr as any)._pid ??= node.pid;
   });
   return nodes[0];
 };
@@ -158,34 +161,8 @@ const getNodeArea = (node: RawNode) => {
   return w * h;
 };
 
-export function* traverseNode(node: RawNode, skipKeys: number[] = []) {
-  const stack: RawNode[] = [];
-  stack.push(node);
-  while (stack.length > 0) {
-    const top = stack.pop()!;
-    if (skipKeys.includes(top.id)) {
-      continue;
-    }
-    yield top;
-    stack.push(...[...top.children].reverse());
-  }
-}
-
-export const getImageSize = async (src: string) => {
-  return new Promise<SizeExt>((res, rej) => {
-    const img = new Image();
-    img.onload = () => {
-      res({
-        height: img.naturalHeight,
-        width: img.naturalWidth,
-      });
-    };
-    img.onerror = rej;
-    img.src = src;
-  });
-};
 const getSafeName = (node: RawNode) => {
-  const c = node.attr.childCount;
+  const c = node.attr.childCount ?? 0;
   return (node.attr.name || `🐔` + (c > 1 ? `` : ` [${c}]`)).split('.').at(-1)!;
 };
 const getLabelSuffix = (node: RawNode) => {
@@ -278,9 +255,12 @@ export const isRawNode = (node: any): node is RawNode => {
 };
 
 export const getNodeStyle = (node: RawNode, focusNode?: RawNode) => {
-  const qf = Boolean(node.idQf || node.textQf || node.quickFind);
+  const qf = getNodeQf(node);
   const fontWeight = qf ? 'bold' : undefined;
-  const color = node.id === focusNode?.id ? '#00F' : undefined;
+  const color =
+    node.id === focusNode?.id
+      ? settingsStore.focusNodeColor || 'var(--focus-node-color)'
+      : undefined;
   return {
     fontWeight,
     color,
@@ -416,6 +396,19 @@ export const getTrackTreeContext = (
   };
 };
 
+// 检查是否为随机生成的三个字符的 vid
+const isRandomVid = (vid: string): boolean => {
+  // 匹配由三个随机字符组成的 vid（字母和数字的组合）
+  return /^[a-zA-Z0-9]{3}$/.test(vid);
+};
+
 export const getNodeQf = (node: RawNode): boolean => {
+  // 检查是否启用了过滤随机 vid 的功能
+  if (settingsStore.filterRandomVidQf) {
+    // 如果是 idQf 且 vid 是随机生成的三个字符，则不认为是快查节点
+    if (node.idQf && node.attr.vid && isRandomVid(node.attr.vid)) {
+      return false;
+    }
+  }
   return Boolean(node.idQf || node.textQf || node.quickFind);
 };
diff --git a/src/utils/plus/clock.ts b/src/utils/plus/clock.ts
new file mode 100644
index 0000000..16f9acd
--- /dev/null
+++ b/src/utils/plus/clock.ts
@@ -0,0 +1,45 @@
+export const parseClock = (value: string | null | undefined): number | null => {
+  if (!value) return null;
+  const [hourText = '', minuteText = ''] = value.split(':');
+  const hour = Number(hourText);
+  const minute = Number(minuteText);
+  if (
+    !Number.isInteger(hour) ||
+    !Number.isInteger(minute) ||
+    hour < 0 ||
+    hour > 23 ||
+    minute < 0 ||
+    minute > 59
+  ) {
+    return null;
+  }
+  return hour * 60 + minute;
+};
+
+export const normalizeClock = (
+  value: string | null | undefined,
+): number | null => {
+  return parseClock(value?.trim() || null);
+};
+
+export const formatClock = (minutes: number): string => {
+  const hour = Math.floor(minutes / 60);
+  const minute = minutes % 60;
+  return `${hour.toString().padStart(2, '0')}:${minute
+    .toString()
+    .padStart(2, '0')}`;
+};
+
+export const isInDarkRange = (
+  currentMinutes: number,
+  startMinutes: number,
+  endMinutes: number,
+): boolean => {
+  // start==end is treated as a full-day dark window.
+  const FULL_DAY_DARK = true;
+  if (startMinutes === endMinutes) return FULL_DAY_DARK;
+  if (startMinutes < endMinutes) {
+    return currentMinutes >= startMinutes && currentMinutes < endMinutes;
+  }
+  return currentMinutes >= startMinutes || currentMinutes < endMinutes;
+};
diff --git a/src/utils/plus/dialogService.ts b/src/utils/plus/dialogService.ts
new file mode 100644
index 0000000..c36be72
--- /dev/null
+++ b/src/utils/plus/dialogService.ts
@@ -0,0 +1,89 @@
+import { useDialogStore, type DialogStoreState } from '@/store/dialog';
+import { settingsStore } from '@/store/storage';
+
+export class DialogService {
+  private static instance: DialogService;
+  private dialogStore: ReturnType<typeof useDialogStore>;
+
+  private constructor() {
+    // 在构造函数中初始化dialogStore，确保响应式系统已初始化
+    this.dialogStore = useDialogStore();
+    console.log('[DialogService] 初始化完成，dialogStore:', this.dialogStore);
+  }
+
+  public static getInstance(): DialogService {
+    if (!DialogService.instance) {
+      DialogService.instance = new DialogService();
+    }
+    return DialogService.instance;
+  }
+
+  /**
+   * 打开分享链接弹窗
+   */
+  public async openShareLink(options: {
+    title?: string;
+    content?: string;
+    extraContent?: string;
+    extraTitle?: string;
+    quickPick?: boolean;
+  }) {
+    console.log('[DialogService] 打开分享链接弹窗:', options);
+    const result = this.dialogStore.open('shareLink', options);
+    console.log('[DialogService] 弹窗状态:', this.dialogStore.state.shareLink);
+    return result;
+  }
+
+  /**
+   * 打开风险提示弹窗
+   */
+  public async openRiskNotice() {
+    console.log('[DialogService] 打开风险提示弹窗');
+    const result = this.dialogStore.open('riskNotice');
+    console.log('[DialogService] 弹窗状态:', this.dialogStore.state.riskNotice);
+    return result;
+  }
+
+  /**
+   * 等待用户确认分享
+   */
+  public async waitShareAgree() {
+    // 检查是否忽略警告
+    if (settingsStore.ignoreUploadWarn) {
+      console.log('[DialogService] 跳过分享警告：用户已设置忽略');
+      return;
+    }
+    console.log('[DialogService] 显示分享警告弹窗');
+    try {
+      await this.openRiskNotice();
+      console.log('[DialogService] 用户确认分享');
+    } catch (error) {
+      console.log('[DialogService] 用户取消分享:', error);
+      // 重新抛出错误，让调用者知道用户取消了操作
+      throw error;
+    }
+  }
+
+  /**
+   * 调试接口：获取当前弹窗状态
+   */
+  public getState(): DialogStoreState {
+    const state = this.dialogStore.state;
+    console.log('[DialogService] 当前弹窗状态:', state);
+    return state;
+  }
+
+  /**
+   * 调试接口：重置所有弹窗状态
+   */
+  public resetState() {
+    console.log('[DialogService] 重置所有弹窗状态');
+    Object.keys(this.dialogStore.state).forEach((key) => {
+      this.dialogStore.state[key].visible = false;
+      this.dialogStore.state[key].options = {};
+    });
+  }
+}
+
+// 导出单例
+export const dialogService = DialogService.getInstance();
diff --git a/src/utils/plus/g6.ts b/src/utils/plus/g6.ts
new file mode 100644
index 0000000..24396ef
--- /dev/null
+++ b/src/utils/plus/g6.ts
@@ -0,0 +1,116 @@
+import { ExtensionCategory, register } from '@antv/g6';
+import type { EdgeData, Node } from '@antv/g6';
+import { AntQuadratic } from '@/utils/g6';
+
+/**
+ * 操作符边类型（Plus 增强）。
+ * 继承自官方 AntQuadratic，实现自定义图标绘制。
+ */
+export class OperatorEdge extends AntQuadratic {
+  /**
+   * Plus 侧统一使用标准命名 `type`。
+   * 说明：官方 `AntQuadratic` 当前同样使用 `type`，这里保持一致并避免沿用历史 typo 命名。
+   */
+  static type = 'operator-edge';
+
+  onCreate() {
+    super.onCreate();
+    this.drawOperatorIcon();
+  }
+
+  onUpdate() {
+    super.onUpdate();
+    this.drawOperatorIcon();
+  }
+
+  onLayoutEnd() {
+    this.drawOperatorIcon();
+  }
+
+  private drawOperatorIcon() {
+    const attr: EdgeAttributes = this.attributes as EdgeAttributes;
+    const operatorKeyFromAttr = attr.operatorKey || attr.data?.operatorKey;
+    const operatorKey =
+      operatorKeyFromAttr ||
+      getOperatorKeyFromEdgeData(
+        this.context.model.getEdgeData().find((edge) => edge.id === this.id),
+      );
+
+    if (!operatorKey) return;
+
+    const keyShape = this.shapeMap.key;
+    if (!keyShape) return;
+
+    // --- 修复 ESLint no-useless-assignment ---
+    // 不再赋初始值 0，而是直接在 try-catch 结构中定义
+    let centerX: number;
+    let centerY: number;
+
+    try {
+      const bbox = keyShape.getBBox();
+      centerX = (bbox.left + bbox.right) / 2;
+      centerY = (bbox.top + bbox.bottom) / 2;
+    } catch {
+      const sourceNode: Node = this.sourceNode;
+      const targetNode: Node = this.targetNode;
+      const sourcePos = sourceNode.getPosition();
+      const targetPos = targetNode.getPosition();
+      centerX = (sourcePos[0] + targetPos[0]) / 2;
+      centerY = (sourcePos[1] + targetPos[1]) / 2;
+    }
+
+    if (isNaN(centerX) || isNaN(centerY)) return;
+
+    // --- 修复 ESLint no-useless-assignment ---
+    // 使用变量直接获取 switch 的结果，不赋初始空值
+    const iconPath = (() => {
+      switch (operatorKey) {
+        case '->':
+          return 'M 0 -4 L 8 0 L 0 4 Z';
+        case '-':
+          return 'M -4 0 L 4 0';
+        case '+':
+          return 'M -4 0 L 4 0';
+        case '~':
+          return 'M -4 0 Q 0 -3 4 0';
+        default:
+          return null;
+      }
+    })();
+
+    if (!iconPath) return;
+
+    this.upsert(
+      'operator-icon',
+      'path',
+      {
+        path: iconPath,
+        stroke: attr.stroke || '#888',
+        fill: attr.stroke || '#888',
+        lineWidth: 1,
+        transform: `translate(${centerX}, ${centerY}) scale(1.1)`,
+        zIndex: 10,
+      },
+      this,
+    );
+  }
+}
+
+register(ExtensionCategory.EDGE, OperatorEdge.type, OperatorEdge);
+
+interface EdgeAttributes {
+  operatorKey?: string;
+  stroke?: string;
+  data?: {
+    operatorKey?: string;
+  };
+}
+
+const getOperatorKeyFromEdgeData = (edge: EdgeData | undefined) => {
+  if (!edge || !('data' in edge)) return undefined;
+  const data = edge.data;
+  if (!data || typeof data !== 'object') return undefined;
+  if (!('operatorKey' in data)) return undefined;
+  const key = data.operatorKey;
+  return typeof key === 'string' ? key : undefined;
+};
diff --git a/src/utils/plus/json.ts b/src/utils/plus/json.ts
new file mode 100644
index 0000000..09924a3
--- /dev/null
+++ b/src/utils/plus/json.ts
@@ -0,0 +1,214 @@
+import JSON5 from 'json5';
+
+/**
+ * 第一步：基础噪音清理
+ * 处理 Markdown 代码块、BOM、行号、Diff 符号、import 语句等
+ */
+const stripNoise = (rawText: string): string => {
+  let text = rawText.trim();
+
+  // 1. 移除 Markdown 代码块包裹 (```javascript ... ```)
+  text = text
+    .replace(/^\s*```[a-zA-Z0-9_-]*\s*\n?/, '')
+    .replace(/\n?\s*```\s*$/g, '');
+
+  // 2. 移除 Unicode BOM 头
+  text = text.replace(/^\uFEFF/, '');
+
+  // 3. 逐行清理：移除行首数字编号 (如 "1 | ") 或 Diff 符号 (如 "+ ")
+  const lines = text.split(/\r?\n/);
+  text = lines
+    .map((line) => line.replace(/^\s*(\d+\s*[|:]|[+-])\s/, ''))
+    .join('\n');
+
+  // 4. 移除所有的 import 语句
+  text = text.replace(/(?:^|\n)\s*import\s+[^;]+;\s*/g, '');
+
+  return text.trim();
+};
+
+/**
+ * 第二步：全量结构提取引擎
+ * 核心逻辑：循环扫描文本，识别并提取所有独立的 {对象}、[数组] 或 defineGkdApp(参数)
+ */
+const extractAllJsonBlocks = (text: string): string[] => {
+  const blocks: string[] = [];
+  let i = 0;
+
+  while (i < text.length) {
+    const nextBrace = text.indexOf('{', i);
+    const nextBracket = text.indexOf('[', i);
+    const nextFn = text.indexOf('defineGkdApp', i);
+
+    const indices = [nextBrace, nextBracket, nextFn].filter(
+      (idx) => idx !== -1,
+    );
+    if (indices.length === 0) break;
+
+    let start = Math.min(...indices);
+    let openChar = text[start];
+
+    // 解决 "Assigned value is not used" 警告：直接声明不赋初始空值
+    let closeChar: string;
+
+    // 处理函数调用情况
+    if (openChar === 'd') {
+      const parenStart = text.indexOf('(', start);
+      if (parenStart === -1) {
+        i = start + 12; // 跳过关键字继续寻找
+        continue;
+      }
+      start = parenStart;
+      openChar = '(';
+      closeChar = ')';
+    } else {
+      closeChar = openChar === '{' ? '}' : ']';
+    }
+
+    let depth = 0;
+    let inStr = false;
+    let strChar = '';
+    let escaped = false;
+    let found = false;
+
+    for (let j = start; j < text.length; j++) {
+      const char = text[j];
+
+      // 处理字符串内部逻辑，防止括号干扰
+      if (inStr) {
+        if (escaped) {
+          escaped = false;
+        } else if (char === '\\') {
+          escaped = true;
+        } else if (char === strChar) {
+          inStr = false;
+        }
+        continue;
+      }
+
+      if (char === '"' || char === "'" || char === '`') {
+        inStr = true;
+        strChar = char;
+        continue;
+      }
+
+      // 括号深度计数
+      if (char === openChar) {
+        depth++;
+      } else if (char === closeChar) {
+        depth--;
+        if (depth === 0) {
+          // 提取闭合结构内部的内容
+          let content = text.substring(start, j + 1);
+          // 如果是函数调用提取的内容，剥离最外层的 ()
+          if (openChar === '(') {
+            content = content.substring(1, content.length - 1).trim();
+          }
+          if (content) blocks.push(content);
+          i = j + 1;
+          found = true;
+          break;
+        }
+      }
+    }
+
+    if (!found) i = start + 1;
+  }
+  return blocks;
+};
+
+/**
+ * 第三步：清洗具体的块内容
+ * 擦除 TS 特有的类型断言、导出语句等
+ */
+const cleanBlockSyntax = (text: string): string => {
+  return (
+    text
+      .replace(/^\s*export\s+default\s+/, '')
+      .replace(/^\s*(const|let|var)\s+\w+\s*=\s*/, '')
+      // 移除 TS 断言，如 as const, as any, as AppConfig[]
+      .replace(/\s+as\s+const\b/g, '')
+      .replace(/\s+as\s+[A-Za-z_$][A-Za-z0-9_$<>[\]]*/g, '')
+      // 去除闭合前多余逗号
+      .replace(/,\s*([}\]])/g, '$1')
+      // 去除行尾孤立逗号
+      .replace(/,\s*$/g, '')
+      .trim()
+  );
+};
+
+const repairCommonBrokenTail = (text: string): string => {
+  return (
+    text
+      // 清理常见“残缺复制”尾巴
+      .replace(/}\s*,\s*]\s*,\s*}\s*,?\s*$/g, '}]}')
+      .replace(/]\s*,\s*}\s*,?\s*$/g, ']}')
+      .replace(/}\s*,?\s*$/g, '}')
+      .trim()
+  );
+};
+
+/**
+ * 松散 JSON 文本规范化
+ */
+export function normalizeLooseJsonLikeText(text: string): string {
+  return stripNoise(text);
+}
+
+/**
+ * 暴露给外部的终极容错解析器
+ */
+export function tryParseJSON5Tolerant(rawText: string): {
+  value?: any;
+  error?: Error;
+} {
+  if (!rawText || !rawText.trim()) {
+    return { error: new Error('输入内容为空') };
+  }
+
+  try {
+    // 1. 预处理噪音
+    const noisyText = repairCommonBrokenTail(stripNoise(rawText));
+
+    // 2. 提取所有可能的 JSON/TS 对象块
+    const blocks = extractAllJsonBlocks(noisyText);
+
+    if (blocks.length === 0) {
+      return { error: new Error('未能从文本中识别出任何有效的规则结构') };
+    }
+
+    const results: any[] = [];
+    let lastError: Error | null = null;
+
+    // 3. 遍历并解析所有提取到的块
+    for (const block of blocks) {
+      try {
+        const cleaned = cleanBlockSyntax(block);
+        const parsed = JSON5.parse(cleaned);
+
+        // 如果解析结果是数组，平铺存入结果集
+        if (Array.isArray(parsed)) {
+          results.push(...parsed);
+        } else if (parsed && typeof parsed === 'object') {
+          results.push(parsed);
+        }
+      } catch (e: any) {
+        lastError = e;
+      }
+    }
+
+    // 4. 最终结果汇总
+    if (results.length === 0) {
+      return {
+        error: new Error(
+          `解析失败: ${lastError?.message || '语法错误'}。请检查括号、逗号是否完整。`,
+        ),
+      };
+    }
+
+    // 返回单对象或对象数组
+    return { value: results.length === 1 ? results[0] : results };
+  } catch (globalError: any) {
+    return { error: new Error(`解析发生未知错误: ${globalError.message}`) };
+  }
+}
diff --git a/src/utils/plus/ruleTest.ts b/src/utils/plus/ruleTest.ts
new file mode 100644
index 0000000..86894d3
--- /dev/null
+++ b/src/utils/plus/ruleTest.ts
@@ -0,0 +1,666 @@
+import { tryParseJSON5Tolerant } from '@/utils/plus/json';
+import { parseSelector } from '@/utils/selector';
+
+export interface ResolvedData {
+  matches?: string[];
+  anyMatches?: string[];
+  excludeMatches?: string[];
+  excludeAllMatches?: string[];
+  activityIds?: string[];
+  snapshotUrls?: string[];
+  excludeSnapshotUrls?: string[];
+  fastQuery?: boolean;
+  resetMatch?: 'activity' | 'match' | 'app';
+  actionMaximum?: number;
+  preKeys?: number[];
+  [k: string]: unknown;
+}
+
+export type ValidateStage = 'json' | 'structure' | 'selector' | 'execute';
+
+export type RuleCheckResultSuccess = {
+  success: true;
+  node: RawNode;
+  matched: {
+    matches?: { selector: string; nodes: RawNode[] }[];
+    anyMatches?: { selector: string; nodes: RawNode[] }[];
+    excludeMatches?: { selector: string; nodes: RawNode[] }[];
+    excludeAllMatches?: { selector: string; nodes: RawNode[] }[];
+  };
+  meta?: {
+    expandedActivityIds?: string[];
+    usedFastQuery?: boolean;
+    matchedRuleKey?: number;
+  };
+};
+
+export type RuleCheckResultFailure = {
+  success: false;
+  error: string;
+  stage: ValidateStage;
+  field?: string;
+  index?: number;
+  node?: RawNode;
+  start?: number;
+  end?: number;
+  line?: number;
+  column?: number;
+};
+
+export type RuleCheckResult = RuleCheckResultSuccess | RuleCheckResultFailure;
+
+type RuleCandidate = {
+  rule: unknown;
+  key?: number;
+};
+
+export const RULE_PREVIEW_CONTEXT_CHARS = 120;
+
+const toArray = (v: unknown): string[] | undefined => {
+  if (v === undefined || v === null) return [];
+  if (typeof v === 'string') return [v];
+  if (Array.isArray(v) && v.every((s) => typeof s === 'string')) {
+    return [...v];
+  }
+  return undefined;
+};
+
+const isObj = (v: unknown): v is Record<string, unknown> =>
+  typeof v === 'object' && v !== null && !Array.isArray(v);
+
+const collectRuleCandidates = (input: unknown): RuleCandidate[] => {
+  const out: RuleCandidate[] = [];
+  const pushRule = (rule: unknown) => {
+    if (!isObj(rule)) return;
+    out.push({
+      rule,
+      key: Number.isInteger(rule.key) ? (rule.key as number) : undefined,
+    });
+  };
+  const fromGroup = (group: unknown) => {
+    if (!isObj(group)) return;
+    if (Array.isArray(group.rules)) group.rules.forEach(pushRule);
+  };
+  const fromApp = (app: unknown) => {
+    if (!isObj(app)) return;
+    if (Array.isArray(app.groups)) app.groups.forEach(fromGroup);
+  };
+
+  if (Array.isArray(input)) {
+    input.forEach((item) => {
+      if (!isObj(item)) return;
+      if (Array.isArray(item.rules)) {
+        item.rules.forEach(pushRule);
+        return;
+      }
+      if (Array.isArray(item.groups)) {
+        item.groups.forEach(fromGroup);
+        return;
+      }
+      if (Array.isArray(item.apps)) {
+        item.apps.forEach(fromApp);
+        return;
+      }
+      pushRule(item);
+    });
+    return out;
+  }
+
+  if (isObj(input)) {
+    if (Array.isArray(input.rules)) {
+      input.rules.forEach(pushRule);
+      return out;
+    }
+    if (Array.isArray(input.groups)) {
+      input.groups.forEach(fromGroup);
+      return out;
+    }
+    if (Array.isArray(input.apps)) {
+      input.apps.forEach(fromApp);
+      return out;
+    }
+    pushRule(input);
+  }
+
+  return out;
+};
+
+const indexToLineCol = (
+  text: string,
+  index: number,
+): { line: number; column: number } => {
+  const normalizedIndex = Math.max(0, index);
+  const upto = text.slice(0, normalizedIndex);
+  const lines = upto.split('\n');
+  return {
+    line: lines.length,
+    column: lines[lines.length - 1].length + 1,
+  };
+};
+
+const findFirstOccurrence = (rawText: string, needle: string): number => {
+  if (!needle) return -1;
+  let idx = rawText.indexOf(needle);
+  if (idx >= 0) return idx;
+  idx = rawText.indexOf(`"${needle}"`);
+  if (idx >= 0) return idx + 1;
+  idx = rawText.indexOf(`'${needle}'`);
+  if (idx >= 0) return idx + 1;
+  return rawText.indexOf(needle.replace(/"/g, '\\"'));
+};
+
+const expandActivityIds = (
+  arr: string[] | undefined,
+  appId?: string,
+): string[] => {
+  if (!arr) return [];
+  if (!appId) return [...arr];
+  return arr.map((id) => (id.startsWith('.') ? `${appId}${id}` : id));
+};
+
+const isActivityMatched = (
+  currentActivityId: string,
+  normalizedActivityId: string,
+): boolean => {
+  if (!normalizedActivityId) return false;
+  if (currentActivityId.startsWith(normalizedActivityId)) return true;
+  if (normalizedActivityId.startsWith('.')) {
+    return currentActivityId.endsWith(normalizedActivityId);
+  }
+  return false;
+};
+
+const validateAndNormalizeRuleCandidate = (
+  obj: unknown,
+): { success: true; rule: ResolvedData } | RuleCheckResultFailure => {
+  if (!isObj(obj)) {
+    return {
+      success: false,
+      error: '非法格式: 规则不是对象',
+      stage: 'structure',
+    };
+  }
+
+  const normalizeStringOrArrayField = (fieldName: string) => {
+    if (!(fieldName in obj)) return undefined;
+    const arr = toArray(obj[fieldName]);
+    if (arr === undefined) {
+      throw new Error(`非法字段: ${fieldName} 必须为字符串或字符串数组`);
+    }
+    return arr;
+  };
+
+  try {
+    const result: ResolvedData = {};
+
+    if ('fastQuery' in obj) {
+      if (typeof obj.fastQuery !== 'boolean') {
+        return {
+          success: false,
+          error: '非法字段: fastQuery 必须为 boolean',
+          stage: 'structure',
+          field: 'fastQuery',
+        };
+      }
+      result.fastQuery = obj.fastQuery;
+    }
+
+    if ('resetMatch' in obj) {
+      const v = obj.resetMatch;
+      if (!(v === 'activity' || v === 'match' || v === 'app')) {
+        return {
+          success: false,
+          error: "非法字段: resetMatch 必须为 'activity' | 'match' | 'app'",
+          stage: 'structure',
+          field: 'resetMatch',
+        };
+      }
+      result.resetMatch = v;
+    }
+
+    if ('actionMaximum' in obj) {
+      const v = obj.actionMaximum;
+      if (!(Number.isInteger(v) && v >= 0)) {
+        return {
+          success: false,
+          error: '非法字段: actionMaximum 必须为非负整数',
+          stage: 'structure',
+          field: 'actionMaximum',
+        };
+      }
+      result.actionMaximum = v;
+    }
+
+    if ('preKeys' in obj) {
+      if (
+        !Array.isArray(obj.preKeys) ||
+        !obj.preKeys.every((n) => Number.isInteger(n))
+      ) {
+        return {
+          success: false,
+          error: '非法字段: preKeys 必须为整数数组',
+          stage: 'structure',
+          field: 'preKeys',
+        };
+      }
+      result.preKeys = [...obj.preKeys];
+    }
+
+    try {
+      const act = normalizeStringOrArrayField('activityIds');
+      if (act !== undefined) result.activityIds = act;
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        stage: 'structure',
+        field: 'activityIds',
+      };
+    }
+
+    const urlFields = ['snapshotUrls', 'excludeSnapshotUrls', 'exampleUrls'];
+    for (const field of urlFields) {
+      try {
+        const arr = normalizeStringOrArrayField(field);
+        if (arr !== undefined) result[field] = arr;
+      } catch (error) {
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : String(error),
+          stage: 'structure',
+          field,
+        };
+      }
+    }
+
+    const selectorFields = [
+      'matches',
+      'anyMatches',
+      'excludeMatches',
+      'excludeAllMatches',
+    ] as const;
+    for (const field of selectorFields) {
+      try {
+        const arr = normalizeStringOrArrayField(field);
+        if (arr !== undefined) {
+          result[field] = arr;
+        }
+      } catch (error) {
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : String(error),
+          stage: 'structure',
+          field,
+        };
+      }
+    }
+
+    const hasMatches = (result.matches?.length ?? 0) > 0;
+    const hasAnyMatches = (result.anyMatches?.length ?? 0) > 0;
+
+    if (!hasMatches && !hasAnyMatches) {
+      return {
+        success: false,
+        error: '非法规则: matches 和 anyMatches 至少存在一个',
+        stage: 'structure',
+      };
+    }
+
+    for (const field of selectorFields) {
+      const arr = result[field];
+      if (!arr) continue;
+      for (let i = 0; i < arr.length; i++) {
+        try {
+          parseSelector(arr[i]);
+        } catch (error) {
+          const message =
+            error instanceof Error ? error.message : String(error);
+          return {
+            success: false,
+            error: `非法选择器: ${field}[${i}] 错误: ${message}`,
+            stage: 'selector',
+            field,
+            index: i,
+          };
+        }
+      }
+    }
+
+    return { success: true, rule: result };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error),
+      stage: 'structure',
+    };
+  }
+};
+
+const checkRule = (
+  obj: ResolvedData,
+  root: RawNode | undefined,
+  options?: {
+    appId?: string;
+    currentActivityId?: string;
+    simulatedPreKeys?: number[];
+    ignoreActivityCheck?: boolean;
+  },
+): RuleCheckResult => {
+  if (!root) {
+    return {
+      success: false,
+      error: '当前无可用 rootNode',
+      stage: 'execute',
+    };
+  }
+
+  const expanded = expandActivityIds(obj.activityIds ?? [], options?.appId);
+  if (
+    !options?.ignoreActivityCheck &&
+    expanded.length > 0 &&
+    options?.currentActivityId
+  ) {
+    const matched = expanded.some((aid) =>
+      isActivityMatched(options.currentActivityId!, aid),
+    );
+    if (!matched) {
+      return {
+        success: false,
+        error: 'activityIds 未匹配当前界面',
+        stage: 'execute',
+        field: 'activityIds',
+      };
+    }
+  }
+
+  const simulatedPreKeys = options?.simulatedPreKeys ?? [];
+  if (
+    Array.isArray(obj.preKeys) &&
+    obj.preKeys.length &&
+    simulatedPreKeys.length
+  ) {
+    const unmet = obj.preKeys.some((k) => !simulatedPreKeys.includes(k));
+    if (unmet) {
+      return {
+        success: false,
+        error: 'preKeys 未满足',
+        stage: 'execute',
+        field: 'preKeys',
+      };
+    }
+  }
+
+  const resolveSelectorsToNodes = (selectors?: string[]) => {
+    if (!selectors?.length) return [] as RawNode[][];
+    return selectors
+      .map((selector) => parseSelector(selector))
+      .map((resolved) => resolved.querySelfOrSelectorAll(root));
+  };
+
+  const excludeArr = obj.excludeMatches ?? [];
+  if (excludeArr.length) {
+    const excludeResults = resolveSelectorsToNodes(excludeArr);
+    const index = excludeResults.findIndex((nodes) => nodes.length > 0);
+    if (index >= 0) {
+      return {
+        success: false,
+        error: `excludeMatches[${index}] 命中（规则被排除）`,
+        stage: 'execute',
+        field: 'excludeMatches',
+        index,
+        node: excludeResults[index]?.[0],
+      };
+    }
+  }
+
+  const excludeAllArr = obj.excludeAllMatches ?? [];
+  if (excludeAllArr.length) {
+    const excludeAllResults = resolveSelectorsToNodes(excludeAllArr);
+    const allMatched =
+      excludeAllResults.length > 0 &&
+      excludeAllResults.every((nodes) => nodes.length > 0);
+    if (allMatched) {
+      return {
+        success: false,
+        error: 'excludeAllMatches 全部命中（规则被排除）',
+        stage: 'execute',
+        field: 'excludeAllMatches',
+        node: excludeAllResults.find((nodes) => nodes.length > 0)?.[0],
+      };
+    }
+  }
+
+  const matchesArr = obj.matches ?? [];
+  const matchesResults = resolveSelectorsToNodes(matchesArr);
+  const anyArr = obj.anyMatches ?? [];
+  const anyResults = resolveSelectorsToNodes(anyArr);
+
+  if (matchesArr.length) {
+    const notIndex = matchesResults.findIndex((nodes) => nodes.length === 0);
+    if (notIndex >= 0) {
+      const anyHitIndex = matchesResults.findIndex(
+        (nodes, index) => index !== notIndex && nodes.length > 0,
+      );
+      if (anyHitIndex >= 0) {
+        return {
+          success: false,
+          error: `matches[${notIndex}] 未命中，但 matches[${anyHitIndex}] 可命中（建议改用 anyMatches 语义）`,
+          stage: 'execute',
+          field: 'matches',
+          index: notIndex,
+          node: matchesResults[anyHitIndex]?.[0],
+        };
+      }
+      const anyHitIndex2 = anyResults.findIndex((nodes) => nodes.length > 0);
+      if (anyHitIndex2 >= 0) {
+        return {
+          success: false,
+          error: `matches[${notIndex}] 未命中，但 anyMatches[${anyHitIndex2}] 可命中（建议改用 anyMatches 语义）`,
+          stage: 'execute',
+          field: 'matches',
+          index: notIndex,
+          node: anyResults[anyHitIndex2]?.[0],
+        };
+      }
+      return {
+        success: false,
+        error: `无法匹配: matches[${notIndex}] 查找结果为空`,
+        stage: 'execute',
+        field: 'matches',
+        index: notIndex,
+      };
+    }
+    const lastNodes = matchesResults.at(-1) ?? [];
+    return {
+      success: true,
+      node: lastNodes[0],
+      matched: {
+        matches: matchesArr.map((selector, index) => ({
+          selector,
+          nodes: matchesResults[index],
+        })),
+      },
+      meta: {
+        expandedActivityIds: expanded,
+        usedFastQuery: !!obj.fastQuery,
+      },
+    };
+  }
+
+  if (anyArr.length) {
+    if (anyResults.every((nodes) => nodes.length === 0)) {
+      return {
+        success: false,
+        error: '无法匹配: anyMatches 查找结果为空',
+        stage: 'execute',
+        field: 'anyMatches',
+      };
+    }
+    for (let i = 0; i < anyResults.length; i++) {
+      const nodes = anyResults[i];
+      if (nodes.length > 0) {
+        return {
+          success: true,
+          node: nodes[0],
+          matched: { anyMatches: [{ selector: anyArr[i], nodes }] },
+          meta: {
+            expandedActivityIds: expanded,
+            usedFastQuery: !!obj.fastQuery,
+          },
+        };
+      }
+    }
+  }
+
+  return {
+    success: false,
+    error: '规则无有效匹配选择器',
+    stage: 'execute',
+  };
+};
+
+const getCandidateFieldValue = (
+  rule: unknown,
+  field: string,
+): string | string[] | undefined => {
+  if (!isObj(rule) || !(field in rule)) return undefined;
+  const value = rule[field];
+  if (typeof value === 'string') return value;
+  if (Array.isArray(value) && value.every((item) => typeof item === 'string')) {
+    return value;
+  }
+  return undefined;
+};
+
+export const evaluateRuleText = (
+  rawText: string,
+  options: {
+    rootNode?: RawNode;
+    appId?: string;
+    currentActivityId?: string;
+    simulatedPreKeys?: number[];
+    ignoreActivityCheck?: boolean;
+  },
+): RuleCheckResult | null => {
+  if (!rawText) return null;
+  const rawNormalized = rawText.replace(/\r\n?/g, '\n');
+  const parsedAttempt = tryParseJSON5Tolerant(rawNormalized);
+
+  if (parsedAttempt.error) {
+    const msg = parsedAttempt.error.message ?? String(parsedAttempt.error);
+    let idx: number | undefined;
+    const posMatch =
+      /position\s+(\d+)/i.exec(msg) || /at position\s+(\d+)/i.exec(msg);
+    if (posMatch) {
+      idx = parseInt(posMatch[1], 10);
+    } else {
+      const lcMatch =
+        /line\s+(\d+)[,:\s]+column\s+(\d+)/i.exec(msg) ||
+        /line\s+(\d+)\s+column\s+(\d+)/i.exec(msg);
+      if (lcMatch) {
+        const line = parseInt(lcMatch[1], 10);
+        const column = parseInt(lcMatch[2], 10);
+        const lines = rawNormalized.split('\n');
+        let acc = 0;
+        const safeLine = Math.max(1, Math.min(line, lines.length));
+        for (let i = 0; i < safeLine - 1; i++) {
+          acc += lines[i].length + 1;
+        }
+        idx = acc + Math.max(0, column - 1);
+      }
+    }
+    if (idx === undefined || Number.isNaN(idx)) idx = 0;
+    const { line, column } = indexToLineCol(rawNormalized, idx);
+    return {
+      success: false,
+      error: `解析失败: ${msg}`,
+      stage: 'json',
+      start: Math.max(0, idx),
+      end: Math.min(rawNormalized.length, idx + 1),
+      line,
+      column,
+    };
+  }
+
+  const candidates = collectRuleCandidates(parsedAttempt.value);
+  if (!candidates.length) {
+    return {
+      success: false,
+      error:
+        '未识别到可测试规则（请提供 rule 或包含 rules/groups/apps 的结构）',
+      stage: 'structure',
+      line: 1,
+      column: 1,
+      start: 0,
+      end: Math.min(rawNormalized.length, 20),
+    };
+  }
+
+  let firstFailure: RuleCheckResultFailure | null = null;
+  for (const candidate of candidates) {
+    const validated = validateAndNormalizeRuleCandidate(candidate.rule);
+    if (!validated.success) {
+      firstFailure ??= validated;
+      continue;
+    }
+    const executed = checkRule(validated.rule, options.rootNode, options);
+    if (executed.success) {
+      return {
+        ...executed,
+        meta: {
+          ...executed.meta,
+          matchedRuleKey: candidate.key,
+        },
+      };
+    }
+    firstFailure ??= executed;
+  }
+
+  if (!firstFailure) {
+    return {
+      success: false,
+      error: '规则测试失败（未命中任何候选规则）',
+      stage: 'execute',
+    };
+  }
+
+  let start = 0;
+  let end = Math.min(200, rawNormalized.length);
+  let line = 1;
+  let column = 1;
+
+  if (
+    firstFailure.stage === 'selector' &&
+    firstFailure.field &&
+    firstFailure.index !== undefined
+  ) {
+    const fieldValue = getCandidateFieldValue(
+      candidates[0]?.rule,
+      firstFailure.field,
+    );
+    const selectorString = Array.isArray(fieldValue)
+      ? fieldValue[firstFailure.index]
+      : firstFailure.index === 0
+        ? fieldValue
+        : undefined;
+    if (selectorString) {
+      const pos = findFirstOccurrence(rawNormalized, selectorString);
+      start = pos >= 0 ? pos : 0;
+      end =
+        pos >= 0
+          ? pos + selectorString.length
+          : Math.min(rawNormalized.length, start + 10);
+      ({ line, column } = indexToLineCol(rawNormalized, start));
+    }
+  } else if (firstFailure.stage === 'structure' && firstFailure.field) {
+    const pos = findFirstOccurrence(rawNormalized, firstFailure.field);
+    start = pos >= 0 ? Math.max(0, pos - 10) : 0;
+    end =
+      pos >= 0
+        ? Math.min(rawNormalized.length, pos + firstFailure.field.length + 10)
+        : Math.min(rawNormalized.length, start + 20);
+    ({ line, column } = indexToLineCol(rawNormalized, start));
+  }
+
+  return { ...firstFailure, start, end, line, column };
+};
diff --git a/src/utils/plus/selector.ts b/src/utils/plus/selector.ts
new file mode 100644
index 0000000..3b001ee
--- /dev/null
+++ b/src/utils/plus/selector.ts
@@ -0,0 +1,10 @@
+/**
+ * 连接操作符图标映射（Plus 增强）。
+ * UI 约定：'+' 与 '-' 统一使用 'minus' 图标，避免在当前图标集中引入额外的 plus 图标样式分歧。
+ */
+export const connectOperatorIcons: Record<string, string> = {
+  '->': 'arrow',
+  '-': 'minus',
+  '+': 'minus',
+  '~': 'minus',
+};
diff --git a/src/utils/plus/snapshot.ts b/src/utils/plus/snapshot.ts
new file mode 100644
index 0000000..95c3b23
--- /dev/null
+++ b/src/utils/plus/snapshot.ts
@@ -0,0 +1,23 @@
+/**
+ * 规范化快照基础字段，兼容缺失 appId/activityId 的历史数据。
+ *
+ * 注意：该函数会“原地修改”传入的 `snapshot` 对象（非纯函数）。
+ * 被修改字段：
+ * - `snapshot.appId`
+ * - `snapshot.appInfo.id`（当 `appInfo` 存在且 `id` 为空时）
+ * - `snapshot.activityId`
+ *
+ * @param snapshot 待规范化的快照对象（会被直接修改）
+ * @returns 返回同一个已被规范化的 `snapshot` 引用
+ */
+export const normalizeSnapshotMeta = (snapshot: Snapshot) => {
+  const appId = snapshot.appId || snapshot.appInfo?.id || '';
+  snapshot.appId = appId;
+  if (snapshot.appInfo && !snapshot.appInfo.id) {
+    snapshot.appInfo.id = appId;
+  }
+  if (!snapshot.activityId) {
+    snapshot.activityId = '(unknown)';
+  }
+  return snapshot;
+};
diff --git a/src/utils/plus/snapshotGroup.ts b/src/utils/plus/snapshotGroup.ts
new file mode 100644
index 0000000..4f27ca5
--- /dev/null
+++ b/src/utils/plus/snapshotGroup.ts
@@ -0,0 +1,51 @@
+import { getAppInfo } from '@/utils/node';
+
+export interface SnapshotActivityGroup {
+  activityId: string;
+  snapshots: Snapshot[];
+}
+
+export interface SnapshotPackageGroup {
+  packageName: string;
+  appName: string;
+  activities: SnapshotActivityGroup[];
+}
+
+export const buildGroupedSnapshots = (
+  snapshots: Snapshot[],
+  snapshotImportTimeMap: Record<number, number>,
+): SnapshotPackageGroup[] => {
+  const packageMap = new Map<string, Map<string, Snapshot[]>>();
+  for (const snapshot of snapshots) {
+    const packageName = snapshot.appId || snapshot.appInfo?.id || '(unknown)';
+    const activityId = snapshot.activityId || '(unknown)';
+    if (!packageMap.has(packageName)) {
+      packageMap.set(packageName, new Map());
+    }
+    const activityMap = packageMap.get(packageName)!;
+    const list = activityMap.get(activityId) || [];
+    list.push(snapshot);
+    activityMap.set(activityId, list);
+  }
+
+  return [...packageMap.entries()]
+    .map(([packageName, activityMap]) => ({
+      packageName,
+      appName:
+        [...activityMap.values()]
+          .flat()
+          .map((s) => getAppInfo(s).name)
+          .find(Boolean) || packageName,
+      activities: [...activityMap.entries()]
+        .map(([activityId, items]) => ({
+          activityId,
+          snapshots: [...items].sort(
+            (a, b) =>
+              (snapshotImportTimeMap[b.id] || b.id) -
+              (snapshotImportTimeMap[a.id] || a.id),
+          ),
+        }))
+        .sort((a, b) => b.snapshots.length - a.snapshots.length),
+    }))
+    .sort((a, b) => b.activities.length - a.activities.length);
+};
diff --git a/src/utils/plus/subscriptionImport.ts b/src/utils/plus/subscriptionImport.ts
new file mode 100644
index 0000000..c98c6f6
--- /dev/null
+++ b/src/utils/plus/subscriptionImport.ts
@@ -0,0 +1,286 @@
+import {
+  normalizeLooseJsonLikeText,
+  tryParseJSON5Tolerant,
+} from '@/utils/plus/json';
+
+export type RuleGroupLike = Record<string, unknown> & {
+  key: number;
+  name?: string;
+  rules?: unknown[];
+};
+
+export type RuleAppLike = Record<string, unknown> & {
+  id: string;
+  name?: string;
+  groups?: RuleGroupLike[];
+};
+
+export type SubscriptionPayload = {
+  categories?: unknown[];
+  globalGroups?: RuleGroupLike[];
+  apps?: RuleAppLike[];
+};
+
+export type CandidateKind = 'app' | 'globalGroup' | 'category';
+
+export interface SubscriptionCandidate {
+  key: string;
+  label: string;
+  kind: CandidateKind;
+  payload: SubscriptionPayload;
+}
+
+export interface SnapshotAppHeader {
+  id: string;
+  name: string;
+}
+
+const isObj = (v: unknown): v is Record<string, unknown> =>
+  typeof v === 'object' && v != null;
+
+export const isRuleGroupLike = (v: unknown): v is RuleGroupLike =>
+  isObj(v) && typeof v.key === 'number';
+
+export const isRuleAppLike = (v: unknown): v is RuleAppLike =>
+  isObj(v) && typeof v.id === 'string';
+
+const isSubscriptionLike = (v: unknown): v is SubscriptionPayload =>
+  isObj(v) &&
+  (Array.isArray(v.categories) ||
+    Array.isArray(v.globalGroups) ||
+    Array.isArray(v.apps));
+
+const normalizeLabel = (text: unknown, fallback: string) =>
+  String(text || '').trim() || fallback;
+
+const createAppPayload = (
+  appHeader: SnapshotAppHeader,
+  groups: RuleGroupLike[],
+): SubscriptionPayload => ({
+  apps: [
+    {
+      id: appHeader.id,
+      name: appHeader.name,
+      groups,
+    },
+  ],
+});
+
+const appendAppCandidates = (
+  candidates: SubscriptionCandidate[],
+  app: RuleAppLike,
+  prefix: string,
+) => {
+  const appName = normalizeLabel(app.name, app.id);
+  const groups = (Array.isArray(app.groups) ? app.groups : []).filter(
+    isRuleGroupLike,
+  );
+  if (groups.length) {
+    groups.forEach((group, idx) => {
+      candidates.push({
+        key: `${prefix}:app:${app.id}:group:${group.key}:${idx}`,
+        kind: 'app',
+        label: `AppGroup: ${appName} / ${normalizeLabel(group.name, `key=${group.key}`)}`,
+        payload: {
+          apps: [
+            {
+              ...app,
+              groups: [group],
+            },
+          ],
+        },
+      });
+    });
+    return;
+  }
+  candidates.push({
+    key: `${prefix}:app:${app.id}`,
+    kind: 'app',
+    label: `App: ${appName} (${app.id})`,
+    payload: { apps: [app] },
+  });
+};
+
+const appendFromSubscription = (
+  candidates: SubscriptionCandidate[],
+  payload: SubscriptionPayload,
+  prefix: string,
+) => {
+  (payload.apps || []).forEach((app, idx) => {
+    if (!isRuleAppLike(app)) return;
+    appendAppCandidates(candidates, app, `${prefix}:${idx}`);
+  });
+  (payload.globalGroups || []).forEach((group, idx) => {
+    if (!isRuleGroupLike(group)) return;
+    candidates.push({
+      key: `${prefix}:group:${idx}:${group.key}`,
+      kind: 'globalGroup',
+      label: `GlobalGroup: ${normalizeLabel(group.name, `key=${group.key}`)}`,
+      payload: { globalGroups: [group] },
+    });
+  });
+  (payload.categories || []).forEach((category, idx) => {
+    const cName = isObj(category)
+      ? normalizeLabel(category.name, String(category.key || `#${idx + 1}`))
+      : `#${idx + 1}`;
+    candidates.push({
+      key: `${prefix}:category:${idx}`,
+      kind: 'category',
+      label: `Category: ${cName}`,
+      payload: { categories: [category] },
+    });
+  });
+};
+
+export const normalizeSubscriptionImportText = (text: string) =>
+  normalizeLooseJsonLikeText(text.trim());
+
+/**
+ * Build import candidates from a loose JSON/TS-like input.
+ * This keeps parsing decisions in a neutral helper so the composable can focus
+ * on view state, messages and API coordination.
+ */
+export const buildSubscriptionCandidates = async (
+  data: unknown,
+  getSnapshotAppHeader: () => Promise<SnapshotAppHeader>,
+): Promise<SubscriptionCandidate[]> => {
+  const candidates: SubscriptionCandidate[] = [];
+
+  if (isSubscriptionLike(data)) {
+    appendFromSubscription(candidates, data, 'root');
+    return candidates;
+  }
+
+  if (isRuleAppLike(data)) {
+    appendAppCandidates(candidates, data, 'root');
+    return candidates;
+  }
+
+  if (isRuleGroupLike(data)) {
+    const appHeader = await getSnapshotAppHeader();
+    candidates.push({
+      key: `root:auto-app-group:${data.key}`,
+      kind: 'app',
+      label: `App(auto): ${appHeader.name} / Group(${normalizeLabel(data.name, `key=${data.key}`)})`,
+      payload: createAppPayload(appHeader, [data]),
+    });
+    return candidates;
+  }
+
+  if (Array.isArray(data) && data.length) {
+    if (data.every((item) => isRuleAppLike(item))) {
+      data.forEach((app, idx) => {
+        appendAppCandidates(candidates, app, `root:${idx}`);
+      });
+      return candidates;
+    }
+    if (data.every((item) => isRuleGroupLike(item))) {
+      const appHeader = await getSnapshotAppHeader();
+      data.forEach((group) => {
+        candidates.push({
+          key: `root:auto-app-group:${group.key}`,
+          kind: 'app',
+          label: `App(auto): ${appHeader.name} / Group(${normalizeLabel(group.name, `key=${group.key}`)})`,
+          payload: createAppPayload(appHeader, [group]),
+        });
+      });
+      return candidates;
+    }
+    for (const [idx, item] of data.entries()) {
+      if (isSubscriptionLike(item)) {
+        appendFromSubscription(candidates, item, `list-${idx}`);
+        continue;
+      }
+      if (isRuleAppLike(item)) {
+        appendAppCandidates(candidates, item, `list-${idx}`);
+        continue;
+      }
+      if (isRuleGroupLike(item)) {
+        candidates.push({
+          key: `list-${idx}:group:${item.key}`,
+          kind: 'globalGroup',
+          label: `GlobalGroup: ${normalizeLabel(item.name, `key=${item.key}`)}`,
+          payload: { globalGroups: [item] },
+        });
+      }
+    }
+    return candidates;
+  }
+
+  if (isObj(data) && Array.isArray(data.groups) && !('id' in data)) {
+    const appHeader = await getSnapshotAppHeader();
+    data.groups.forEach((group) => {
+      if (!isRuleGroupLike(group)) return;
+      candidates.push({
+        key: `root:auto-app-group:${group.key}`,
+        kind: 'app',
+        label: `App(auto): ${appHeader.name} / Group(${normalizeLabel(group.name, `key=${group.key}`)})`,
+        payload: createAppPayload(appHeader, [group]),
+      });
+    });
+  }
+
+  return candidates;
+};
+
+export const mergeSubscriptionPayload = (
+  candidates: SubscriptionCandidate[],
+): SubscriptionPayload => {
+  const result: SubscriptionPayload = {};
+  const appMap = new Map<string, RuleAppLike>();
+  const globalGroups: RuleGroupLike[] = [];
+  const categories: unknown[] = [];
+
+  candidates.forEach((item) => {
+    (item.payload.globalGroups || []).forEach((group) => {
+      if (isRuleGroupLike(group)) globalGroups.push(group);
+    });
+    (item.payload.categories || []).forEach((category) => {
+      categories.push(category);
+    });
+    (item.payload.apps || []).forEach((app) => {
+      if (!isRuleAppLike(app)) return;
+      const prev = appMap.get(app.id);
+      if (!prev) {
+        appMap.set(app.id, {
+          ...app,
+          groups: Array.isArray(app.groups) ? [...app.groups] : [],
+        });
+        return;
+      }
+      const groups = Array.isArray(app.groups) ? app.groups : [];
+      prev.groups = [...(prev.groups || []), ...groups];
+    });
+  });
+
+  const apps = [...appMap.values()];
+  if (apps.length) result.apps = apps;
+  if (globalGroups.length) result.globalGroups = globalGroups;
+  if (categories.length) result.categories = categories;
+  return result;
+};
+
+export const parseSubscriptionImportText = async (
+  rawText: string,
+  getSnapshotAppHeader: () => Promise<SnapshotAppHeader>,
+) => {
+  const normalizedText = normalizeSubscriptionImportText(rawText);
+  const parsed = tryParseJSON5Tolerant(normalizedText);
+  if (parsed.error) {
+    throw parsed.error;
+  }
+  if (parsed.value == null) {
+    throw new Error('无法识别的订阅文本');
+  }
+  const candidates = await buildSubscriptionCandidates(
+    parsed.value,
+    getSnapshotAppHeader,
+  );
+  if (!candidates.length) {
+    throw new Error('无法识别的订阅文本');
+  }
+  return {
+    normalizedText,
+    candidates,
+  };
+};
diff --git a/src/utils/plus/url.ts b/src/utils/plus/url.ts
new file mode 100644
index 0000000..51aa2fc
--- /dev/null
+++ b/src/utils/plus/url.ts
@@ -0,0 +1,61 @@
+import { settingsStore } from '@/store/storage';
+
+/**
+ * 校验 URL 字符串，合法时返回 URL 实例。
+ */
+export const isValidUrl = (url: string): URL | undefined => {
+  try {
+    return new URL(url);
+  } catch {}
+};
+
+/**
+ * 基于当前站点 origin 生成导入页链接。
+ */
+export const getImportUrl = (importId: number | string) => {
+  return location.origin + `/i/${importId}`;
+};
+
+/**
+ * 官方快照导入页地址。
+ */
+export const getOfficialImportUrl = (importId: number | string) => {
+  return `https://i.gkd.li/i/${importId}`;
+};
+
+/**
+ * 规范化 Origin 输入，仅返回 origin 部分。
+ */
+export const normalizeOriginText = (originText: string) => {
+  const text = originText.trim();
+  if (!text) return '';
+  const u = isValidUrl(text);
+  if (!u) return '';
+  if (u.protocol !== 'http:' && u.protocol !== 'https:') return '';
+  return u.origin;
+};
+
+/**
+ * 使用指定 origin 生成导入页链接。
+ */
+export const getImportUrlByOrigin = (
+  originText: string,
+  importId: number | string,
+) => {
+  const origin = normalizeOriginText(originText);
+  if (!origin) return '';
+  return `${origin}/i/${importId}`;
+};
+
+/**
+ * 生成自定义域名导入链接；与主链接同域时返回空字符串避免重复显示。
+ */
+export const getCustomDomainImportUrl = (importId: number | string) => {
+  const custom = normalizeOriginText(settingsStore.shareCustomImportDomain);
+  if (!custom) return '';
+  const primary = settingsStore.shareUseOfficialImportDomain
+    ? getOfficialImportUrl(importId)
+    : getImportUrl(importId);
+  if (new URL(primary).origin == custom) return '';
+  return `${custom}/i/${importId}`;
+};
diff --git a/src/utils/snapshot.ts b/src/utils/snapshot.ts
index b19e39d..64c92ad 100644
--- a/src/utils/snapshot.ts
+++ b/src/utils/snapshot.ts
@@ -1,4 +1,5 @@
 import localforage from 'localforage';
+import { normalizeSnapshotMeta } from '@/utils/plus/snapshot';
 
 const useStorage = <T>(options: LocalForageOptions = {}) => {
   options.driver ??= localforage.INDEXEDDB;
@@ -69,6 +70,7 @@ export const screenshotStorage = useStorage<ArrayBuffer>({
 });
 
 export const setSnapshot = async (snapshot: Snapshot, bf: ArrayBuffer) => {
+  normalizeSnapshotMeta(snapshot);
   Object.entries(importSnapshotId).forEach(([k, v]) => {
     if (v == snapshot.id) {
       delete importSnapshotId[k];
diff --git a/src/utils/svg.ts b/src/utils/svg.ts
index 54b7da7..787574e 100644
--- a/src/utils/svg.ts
+++ b/src/utils/svg.ts
@@ -5,10 +5,14 @@ const modules = import.meta.glob<string>('@/assets/svg/*.svg', {
 });
 
 export default Object.fromEntries(
-  Object.entries(modules).map(([k, v]) => {
-    const name = k.split('/').at(-1)!.split('.')[0];
-    const t = document.createElement('template');
-    t.innerHTML = v;
-    return [name, t.content.firstChild as SVGSymbolElement];
-  }),
+  Object.entries(modules)
+    .map(([k, v]) => {
+      const name = k.split('/').at(-1)!.split('.')[0];
+      const t = document.createElement('template');
+      t.innerHTML = v;
+      const el = t.content.firstElementChild as SVGSVGElement | null;
+      if (!el) return null;
+      return [name, el] as const;
+    })
+    .filter((item): item is readonly [string, SVGSVGElement] => !!item),
 );
diff --git a/src/utils/task.ts b/src/utils/task.ts
index 8029e5c..d14f165 100644
--- a/src/utils/task.ts
+++ b/src/utils/task.ts
@@ -1,5 +1,14 @@
 import { delay } from './others';
 
+type PrimitiveType =
+  | string
+  | number
+  | boolean
+  | bigint
+  | symbol
+  | null
+  | undefined;
+
 export const useTask = <T extends (...args: any[]) => Promise<void>>(
   fn: T,
   miniInterval = 0,
diff --git a/src/views/DevicePage.vue b/src/views/DevicePage.vue
index f77214c..4723db9 100644
--- a/src/views/DevicePage.vue
+++ b/src/views/DevicePage.vue
@@ -11,12 +11,11 @@ import type { DataTableColumns, PaginationProps } from 'naive-ui';
 import type { SortState } from 'naive-ui/es/data-table/src/interface';
 import pLimit from 'p-limit';
 import JSON5 from 'json5';
-import SvgIcon from '@/components/SvgIcon.vue';
-import { dialog } from '@/utils/discrete';
 
 const router = useRouter();
 const { api, origin, serverInfo } = useDeviceApi();
 const link = useStorage(`device_link`, ``);
+const snapshots = shallowRef<Snapshot[]>([]);
 const connect = useTask(async () => {
   if (!link.value) return;
   origin.value = errorWrap(
@@ -24,15 +23,34 @@ const connect = useTask(async () => {
     () => `非法设备地址`,
   ).origin;
   link.value = origin.value;
-  serverInfo.value = await api.getServerInfo();
+  serverInfo.value = undefined;
+  snapshots.value = [];
+  try {
+    serverInfo.value = await api.getServerInfo();
+  } catch (e) {
+    serverInfo.value = undefined;
+    snapshots.value = [];
+    throw e;
+  }
 });
 
 const serverTitle = computed(() => {
   if (!serverInfo.value) return '未连接设备';
   const d = serverInfo.value.device;
   const g = serverInfo.value.gkdAppInfo;
-  return `${d.manufacturer} Android${d.release} - GKD${g.versionName}`;
+  return `${d.manufacturer} Android${d.release} - GKD${g?.versionName ?? '未知版本'}`;
 });
+const showSubsModel = shallowRef(false);
+const subsText = shallowRef(``);
+
+let latestSnapshotRun = 0;
+const refreshSnapshots = async () => {
+  const runId = ++latestSnapshotRun;
+  const result = await api.getSnapshots();
+  if (runId !== latestSnapshotRun) return;
+  result.sort((a, b) => b.id - a.id);
+  snapshots.value = result;
+};
 
 onMounted(async () => {
   await delay(500);
@@ -41,15 +59,36 @@ onMounted(async () => {
   }
 });
 
-const snapshots = shallowRef<Snapshot[]>([]);
-watchEffect(async () => {
-  if (!serverInfo.value) return;
-  document.title = serverTitle.value;
-  const result = await api.getSnapshots();
-  result.sort((a, b) => b.id - a.id);
-  snapshots.value = result;
-  subsText.value = '';
-});
+watch(
+  serverInfo,
+  async (info, _prev, onInvalidate) => {
+    let invalidated = false;
+    onInvalidate(() => {
+      invalidated = true;
+      latestSnapshotRun++;
+    });
+    if (!info) {
+      latestSnapshotRun++;
+      subsText.value = '';
+      snapshots.value = [];
+      document.title = '未连接设备';
+      return;
+    }
+    document.title = serverTitle.value;
+    try {
+      await refreshSnapshots();
+      if (!invalidated) {
+        subsText.value = '';
+      }
+    } catch (error) {
+      if (!invalidated) {
+        snapshots.value = [];
+        message.error(error instanceof Error ? error.message : '刷新快照失败');
+      }
+    }
+  },
+  { immediate: true },
+);
 
 const captureSnapshot = useTask(async () => {
   const snapshot = await api.captureSnapshot();
@@ -57,9 +96,7 @@ const captureSnapshot = useTask(async () => {
   await snapshotStorage.setItem(snapshot.id, snapshot);
   await screenshotStorage.setItem(snapshot.id, screenshot);
   message.success(`捕获并保存快照成功`);
-  const result = await api.getSnapshots();
-  result.sort((a, b) => b.id - a.id);
-  snapshots.value = result;
+  await refreshSnapshots();
 });
 const downloadAllSnapshot = useTask(async () => {
   const snapshotIds = (await api.getSnapshots()).map((s) => s.id);
@@ -123,6 +160,8 @@ const previewSnapshot = useBatchTask(
         name: 'snapshot',
         params: { snapshotId: row.id },
       }).href,
+      '_blank',
+      'noopener,noreferrer',
     );
   },
   (r) => r.id,
@@ -139,7 +178,7 @@ const columns: DataTableColumns<Snapshot> = [
     key: `actions`,
     title: `操作`,
     fixed: 'right',
-    width: `180px`, // 搞宽点要不然装不下
+    width: `120px`,
     render(row) {
       return (
         <NSpace size="small">
@@ -150,49 +189,12 @@ const columns: DataTableColumns<Snapshot> = [
           >
             查看
           </NButton>
-          <NButton
-            size="small"
-            type="error"
-            secondary
-            loading={deleteSnapshot.loading[row.id]}
-            onClick={() => deleteSnapshot.invoke(row)}
-          >
-            {{
-              icon: () => <SvgIcon name="delete" />,
-              default: () => '删除',
-            }}
-          </NButton>
         </NSpace>
       );
     },
   },
 ];
 
-const deleteSnapshot = useBatchTask(
-  async (row: Snapshot) => {
-    const confirmed = await new Promise<boolean>((res) => {
-      dialog.warning({
-        title: '删除快照',
-        content: `是否确认删除快照 ID: ${row.id}？此操作不可恢复。`,
-        positiveText: '确认删除',
-        negativeText: '取消',
-        onPositiveClick: () => res(true),
-        onNegativeClick: () => res(false),
-        onClose: () => res(false),
-      });
-    });
-    if (!confirmed) return;
-    await api.deleteSnapshot({ id: row.id });
-    await Promise.all([
-      snapshotStorage.removeItem(row.id),
-      screenshotStorage.removeItem(row.id),
-    ]);
-    snapshots.value = snapshots.value.filter((s) => s.id !== row.id);
-    message.success('删除成功');
-  },
-  (r) => r.id,
-);
-
 const pagination = shallowReactive<PaginationProps>({
   page: 1,
   pageSize: 50,
@@ -208,8 +210,9 @@ const pagination = shallowReactive<PaginationProps>({
 });
 watch(pagination, resetColWidth);
 
-const showSubsModel = shallowRef(false);
-const subsText = shallowRef(``);
+const openSubsModal = () => {
+  showSubsModel.value = true;
+};
 const updateSubs = useTask(async () => {
   const data = errorWrap(() => JSON5.parse(subsText.value.trim()));
   if (!data) return;
@@ -239,6 +242,9 @@ const updateSubs = useTask(async () => {
 });
 
 const showSelectorModel = shallowRef(false);
+const openSelectorModal = () => {
+  showSelectorModel.value = true;
+};
 
 const actionOptions: {
   value?: string;
@@ -456,32 +462,52 @@ const placeholder = `
         </div>
       </NInputGroup>
       <template v-if="serverInfo">
-        <NButton
-          :loading="captureSnapshot.loading"
-          @click="captureSnapshot.invoke"
+        <slot
+          name="server-actions"
+          :captureSnapshot="captureSnapshot"
+          :downloadAllSnapshot="downloadAllSnapshot"
+          :showSubsModel="showSubsModel"
+          :showSelectorModel="showSelectorModel"
+          :openSubsModal="openSubsModal"
+          :openSelectorModal="openSelectorModal"
         >
-          捕获快照
-        </NButton>
-        <NButton
-          :loading="downloadAllSnapshot.loading"
-          @click="downloadAllSnapshot.invoke"
-        >
-          下载所有快照
-        </NButton>
-        <NButton @click="showSubsModel = true"> 修改内存订阅 </NButton>
-        <NButton @click="showSelectorModel = true"> 执行选择器 </NButton>
+          <NButton
+            :loading="captureSnapshot.loading"
+            @click="captureSnapshot.invoke"
+          >
+            捕获快照
+          </NButton>
+          <NButton
+            :loading="downloadAllSnapshot.loading"
+            @click="downloadAllSnapshot.invoke"
+          >
+            下载所有快照
+          </NButton>
+          <NButton @click="openSubsModal"> 修改内存订阅 </NButton>
+          <NButton @click="openSelectorModal"> 执行选择器 </NButton>
+        </slot>
       </template>
     </div>
-    <NDataTable
-      striped
-      flex-height
-      :data="snapshots"
+    <slot
+      name="content"
+      :snapshots="snapshots"
       :columns="columns"
       :pagination="pagination"
-      size="small"
-      class="flex-1"
-      :scrollX="1200"
-      @update:sorter="handleSorterChange"
-    />
+      :handleSorterChange="handleSorterChange"
+      :refreshSnapshots="refreshSnapshots"
+    >
+      <NDataTable
+        striped
+        flex-height
+        :data="snapshots"
+        :columns="columns"
+        :pagination="pagination"
+        size="small"
+        class="flex-1"
+        :scrollX="1200"
+        @update:sorter="handleSorterChange"
+      />
+    </slot>
   </div>
+  <slot name="extra-modals" />
 </template>
diff --git a/src/views/home/HomePage.vue b/src/views/home/HomePage.vue
index fa915bc..90132a6 100644
--- a/src/views/home/HomePage.vue
+++ b/src/views/home/HomePage.vue
@@ -25,9 +25,12 @@ const snapshots = shallowRef<Snapshot[]>([]);
 const loading = shallowRef(true);
 const updateSnapshots = async () => {
   loading.value = true;
-  snapshots.value = (await shallowSnapshotStorage.getAllItems()).reverse();
-  checkedRowKeys.value = [];
-  loading.value = false;
+  try {
+    snapshots.value = (await shallowSnapshotStorage.getAllItems()).reverse();
+    checkedRowKeys.value = [];
+  } finally {
+    loading.value = false;
+  }
 };
 onMounted(updateSnapshots);
 const filterOption = shallowReactive({
@@ -171,6 +174,12 @@ const handleSorterChange = (sorter: SortState) => {
 mtimeCol.sortOrder = `descend`;
 const showImportModal = shallowRef(false);
 const textImportValue = shallowRef(``);
+const openImportModal = () => {
+  showImportModal.value = true;
+};
+const openImportLocal = (files?: File[]) => {
+  importLocal.invoke(files);
+};
 const importNetwork = useTask(async () => {
   const urls = textImportValue.value
     .trim()
@@ -256,8 +265,14 @@ const batchShareZipUrl = useTask(async () => {
 });
 
 const settingsDlgShow = shallowRef(false);
+const openSettings = () => {
+  settingsDlgShow.value = true;
+};
 
 const inputImportRef = shallowRef();
+const setCheckedRowKeys = (keys: number[]) => {
+  checkedRowKeys.value = keys;
+};
 </script>
 <template>
   <div flex flex-col p-10px gap-10px page-size>
@@ -324,114 +339,137 @@ const inputImportRef = shallowRef();
         </template>
       </NSpace>
       <div flex-1 />
-      <div flex gap-24px items-center pr-8px class="[--svg-h:24px]">
-        <NTooltip>
-          <template #trigger>
-            <NButton text @click="settingsDlgShow = true">
-              <SvgIcon name="settings" />
-            </NButton>
-          </template>
-          设置
-        </NTooltip>
-        <NTooltip>
-          <template #trigger>
-            <RouterLink flex to="/selector">
-              <NButton text>
-                <SvgIcon name="terminal" />
+      <slot
+        name="toolbar-right"
+        :settingsDlgShow="settingsDlgShow"
+        :importLocal="importLocal"
+        :importNetwork="importNetwork"
+        :showImportModal="showImportModal"
+        :openSettings="openSettings"
+        :openImportLocal="openImportLocal"
+        :openImportModal="openImportModal"
+      >
+        <div flex gap-24px items-center pr-8px class="[--svg-h:24px]">
+          <NTooltip>
+            <template #trigger>
+              <NButton text @click="openSettings">
+                <SvgIcon name="settings" />
               </NButton>
-            </RouterLink>
-          </template>
-          测试选择器
-        </NTooltip>
-        <NPopover>
-          <template #trigger>
-            <NButton text>
-              <SvgIcon name="import" />
-            </NButton>
-          </template>
-          <NSpace vertical>
-            <NTooltip placement="left">
-              <template #trigger>
-                <NButton
-                  :loading="importLocal.loading"
-                  @click="importLocal.invoke()"
-                >
-                  导入本地文件
-                </NButton>
-              </template>
-              <div class="whitespace-nowrap">支持拖拽文件到页面任意位置</div>
-            </NTooltip>
-            <NTooltip placement="left">
-              <template #trigger>
-                <NButton
-                  :loading="importNetwork.loading"
-                  @click="showImportModal = true"
-                >
-                  导入网络文件
+            </template>
+            设置
+          </NTooltip>
+          <NTooltip>
+            <template #trigger>
+              <RouterLink flex to="/selector">
+                <NButton text>
+                  <SvgIcon name="terminal" />
                 </NButton>
-              </template>
-              <div class="whitespace-nowrap">
-                支持任意位置粘贴(Ctrl+V)文本触发导入
-              </div>
-            </NTooltip>
-          </NSpace>
-        </NPopover>
-        <NTooltip>
-          <template #trigger>
-            <RouterLink flex to="/device">
-              <NButton text>
-                <SvgIcon name="device" />
-              </NButton>
-            </RouterLink>
-          </template>
-          连接设备
-        </NTooltip>
-        <NTooltip>
-          <template #trigger>
-            <a
-              flex
-              href="https://github.com/orgs/gkd-kit/discussions"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <NButton text>
-                <SvgIcon name="discussion" />
-              </NButton>
-            </a>
-          </template>
-          讨论交流
-        </NTooltip>
-        <NTooltip>
-          <template #trigger>
-            <a
-              flex
-              href="https://github.com/gkd-kit/inspect"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+              </RouterLink>
+            </template>
+            测试选择器
+          </NTooltip>
+          <NPopover>
+            <template #trigger>
               <NButton text>
-                <SvgIcon name="github" />
+                <SvgIcon name="import" />
               </NButton>
-            </a>
-          </template>
-          Github
-        </NTooltip>
-      </div>
+            </template>
+            <NSpace vertical>
+              <NTooltip placement="left">
+                <template #trigger>
+                  <NButton
+                    :loading="importLocal.loading"
+                    @click="importLocal.invoke()"
+                  >
+                    导入本地文件
+                  </NButton>
+                </template>
+                <div class="whitespace-nowrap">支持拖拽文件到页面任意位置</div>
+              </NTooltip>
+              <NTooltip placement="left">
+                <template #trigger>
+                  <NButton
+                    :loading="importNetwork.loading"
+                    @click="openImportModal"
+                  >
+                    导入网络文件
+                  </NButton>
+                </template>
+                <div class="whitespace-nowrap">
+                  支持任意位置粘贴(Ctrl+V)文本触发导入
+                </div>
+              </NTooltip>
+            </NSpace>
+          </NPopover>
+          <NTooltip>
+            <template #trigger>
+              <RouterLink flex to="/device">
+                <NButton text>
+                  <SvgIcon name="device" />
+                </NButton>
+              </RouterLink>
+            </template>
+            连接设备
+          </NTooltip>
+          <NTooltip>
+            <template #trigger>
+              <a
+                flex
+                href="https://github.com/orgs/gkd-kit/discussions"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <NButton text>
+                  <SvgIcon name="discussion" />
+                </NButton>
+              </a>
+            </template>
+            讨论交流
+          </NTooltip>
+          <NTooltip>
+            <template #trigger>
+              <a
+                flex
+                href="https://github.com/gkd-kit/inspect"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <NButton text>
+                  <SvgIcon name="github" />
+                </NButton>
+              </a>
+            </template>
+            Github
+          </NTooltip>
+        </div>
+      </slot>
     </div>
-    <NDataTable
-      v-model:checkedRowKeys="checkedRowKeys"
-      striped
-      virtualScroll
-      :data="filterSnapshots"
+    <slot
+      name="content"
+      :checkedRowKeys="checkedRowKeys"
+      :setCheckedRowKeys="setCheckedRowKeys"
+      :filterSnapshots="filterSnapshots"
+      :filterOption="filterOption"
       :columns="columns"
-      :scrollX="1800"
-      :rowKey="(r:Snapshot)=>r.id"
-      size="small"
-      class="flex-1"
-      flex-height
       :loading="loading"
-      @update:sorter="handleSorterChange"
-    />
+      :handleSorterChange="handleSorterChange"
+      :updateSnapshots="updateSnapshots"
+    >
+      <NDataTable
+        v-model:checkedRowKeys="checkedRowKeys"
+        striped
+        virtualScroll
+        :data="filterSnapshots"
+        :columns="columns"
+        :scrollX="1800"
+        :rowKey="(r: Snapshot) => r.id"
+        size="small"
+        class="flex-1"
+        flex-height
+        :loading="loading"
+        @update:sorter="handleSorterChange"
+      />
+    </slot>
   </div>
   <NModal
     :show="showImportModal"
@@ -491,4 +529,5 @@ const inputImportRef = shallowRef();
       <div>打开快照页面自动生成分享链接(请确保不含隐私)</div>
     </div>
   </NModal>
+  <slot name="extra-modals" />
 </template>
diff --git a/src/views/plus/DevicePage.vue b/src/views/plus/DevicePage.vue
new file mode 100644
index 0000000..e795aa8
--- /dev/null
+++ b/src/views/plus/DevicePage.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import SettingsModal from '@/components/SettingsModal.vue';
+import DeviceControlTools from '@/components/DeviceControlTools.vue';
+import DeviceSnapshotGroups from '@/components/plus/device/DeviceSnapshotGroups.vue';
+import SvgIcon from '@/components/SvgIcon.vue';
+import BaseDevicePage from '@/views/DevicePage.vue';
+
+const settingsDlgShow = shallowRef(false);
+const checkedRowKeys = shallowRef<number[]>([]);
+</script>
+
+<template>
+  <BaseDevicePage>
+    <template #server-actions="{ captureSnapshot, downloadAllSnapshot }">
+      <NTooltip>
+        <template #trigger>
+          <NButton
+            text
+            style="--n-icon-size: var(--app-icon-size)"
+            class="device-top-icon"
+            :loading="captureSnapshot.loading"
+            @click="captureSnapshot.invoke"
+          >
+            <SvgIcon name="Snapshot" />
+          </NButton>
+        </template>
+        捕获快照
+      </NTooltip>
+
+      <DeviceControlTools />
+
+      <NTooltip>
+        <template #trigger>
+          <NButton
+            text
+            style="--n-icon-size: var(--app-icon-size)"
+            class="device-top-icon"
+            :loading="downloadAllSnapshot.loading"
+            @click="downloadAllSnapshot.invoke"
+          >
+            <SvgIcon name="Down-all" />
+          </NButton>
+        </template>
+        下载所有快照
+      </NTooltip>
+
+      <template v-if="checkedRowKeys.length">
+        <div h-full flex flex-items-center text-12px opacity-80>
+          已选中 {{ checkedRowKeys.length }} 个快照
+        </div>
+      </template>
+
+      <NTooltip>
+        <template #trigger>
+          <NButton
+            text
+            style="--n-icon-size: var(--app-icon-size)"
+            class="device-top-icon"
+            @click="settingsDlgShow = true"
+          >
+            <SvgIcon name="settings" />
+          </NButton>
+        </template>
+        设置
+      </NTooltip>
+    </template>
+
+    <template #content="{ snapshots, refreshSnapshots }">
+      <DeviceSnapshotGroups
+        v-model:checked-row-keys="checkedRowKeys"
+        :snapshots="snapshots"
+        :refresh-snapshots="refreshSnapshots"
+      />
+    </template>
+  </BaseDevicePage>
+
+  <SettingsModal v-model:show="settingsDlgShow" />
+</template>
diff --git a/src/views/plus/SelectorPage.vue b/src/views/plus/SelectorPage.vue
new file mode 100644
index 0000000..6d3dafa
--- /dev/null
+++ b/src/views/plus/SelectorPage.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import BaseSelectorPage from '@/views/SelectorPage.vue';
+</script>
+
+<template>
+  <BaseSelectorPage />
+</template>
diff --git a/src/views/plus/SvgPage.vue b/src/views/plus/SvgPage.vue
new file mode 100644
index 0000000..069128b
--- /dev/null
+++ b/src/views/plus/SvgPage.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import BaseSvgPage from '@/views/SvgPage.vue';
+</script>
+
+<template>
+  <BaseSvgPage />
+</template>
diff --git a/src/views/plus/home/HomePage.vue b/src/views/plus/home/HomePage.vue
new file mode 100644
index 0000000..e5d601f
--- /dev/null
+++ b/src/views/plus/home/HomePage.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import HomeSnapshotGroups from '@/components/plus/home/HomeSnapshotGroups.vue';
+import BaseHomePage from '@/views/home/HomePage.vue';
+</script>
+
+<template>
+  <BaseHomePage>
+    <template
+      #content="{
+        checkedRowKeys,
+        setCheckedRowKeys,
+        filterSnapshots,
+        loading,
+        updateSnapshots,
+      }"
+    >
+      <HomeSnapshotGroups
+        :checked-row-keys="checkedRowKeys"
+        :snapshots="filterSnapshots"
+        :loading="loading"
+        :update-snapshots="updateSnapshots"
+        @update:checkedRowKeys="setCheckedRowKeys"
+      />
+    </template>
+  </BaseHomePage>
+</template>
diff --git a/src/views/plus/snapshot/AttrCard.vue b/src/views/plus/snapshot/AttrCard.vue
new file mode 100644
index 0000000..a97ab10
--- /dev/null
+++ b/src/views/plus/snapshot/AttrCard.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import DraggableCard from '@/components/DraggableCard.vue';
+import { getNodeSelectorText } from '@/utils/node';
+import { buildEmptyFn, copy } from '@/utils/others';
+import { useSnapshotStore } from './snapshot';
+import AttrNameCell from '@/components/plus/snapshot/AttrNameCell.vue';
+import AttrValueCell from '@/components/plus/snapshot/AttrValueCell.vue';
+
+withDefaults(
+  defineProps<{
+    show: boolean;
+    onUpdateShow?: (data: boolean) => void;
+  }>(),
+  {
+    onUpdateShow: buildEmptyFn,
+  },
+);
+
+const { focusNode } = useSnapshotStore();
+
+type AttrTipMap = Record<
+  string,
+  { desc: string; type: 'info' | 'quickFind'; show?: boolean }
+>;
+
+const attrTip = computed<AttrTipMap>(() => {
+  const node = focusNode.value;
+  if (!node) return {};
+  return {
+    _id: {
+      desc: `虚拟属性(真机不可用):生成快照访问节点顺序`,
+      type: 'info',
+      show: true,
+    },
+    _pid: {
+      desc: `虚拟属性(真机不可用):父节点的 _id`,
+      type: 'info',
+      show: true,
+    },
+    _selector: {
+      desc: `自动生成的选择器, 点击“_selector”可直接复制内容, 用于定位`,
+      type: 'info',
+      show: true,
+    },
+    depth: {
+      desc: `使用此属性在某些应用上可能造成无限节点错误`,
+      type: 'info',
+      show: true,
+    },
+    id: {
+      desc: `可快速查找`,
+      type: 'quickFind',
+      show: Boolean((node.quickFind || node.idQf) && node.attr.id),
+    },
+    vid: {
+      desc: `可快速查找`,
+      type: 'quickFind',
+      show: Boolean((node.quickFind || node.idQf) && node.attr.vid),
+    },
+    text: {
+      desc: `可快速查找`,
+      type: 'quickFind',
+      show: Boolean((node.quickFind || node.textQf) && node.attr.text),
+    },
+  } as AttrTipMap;
+});
+
+const lenAttrNames = [`text`, `desc`];
+const attrs = computed(() => {
+  if (!focusNode.value) return [];
+  return Object.entries(focusNode.value.attr)
+    .map(([name, value]) => {
+      const attr = {
+        name,
+        value,
+        desc: JSON.stringify(value),
+        tip: attrTip.value[name]?.show ? attrTip.value[name] : undefined,
+      };
+      if (lenAttrNames.includes(name)) {
+        return [
+          attr,
+          {
+            name: name + `.length`,
+            value: (value as string)?.length ?? null,
+            desc: JSON.stringify((value as string)?.length ?? null),
+            tip: undefined,
+          },
+        ];
+      }
+      return attr;
+    })
+    .flat();
+});
+
+const selectText = computed(() => {
+  if (!focusNode.value) return '';
+  return getNodeSelectorText(focusNode.value);
+});
+
+const attrExplainMap: Record<string, string> = {
+  id: '控件资源 ID(R.id.xxx)',
+  vid: '虚拟 ID,用于区分同类动态控件',
+  name: '控件类名(如 TextView、ImageView)',
+  text: '控件显示文本内容',
+  textLen: 'text 的字符数量',
+  desc: '无障碍描述(content-desc)',
+  descLen: 'desc 的字符数量',
+  isClickable: '控件是否可点击',
+  clickable: '控件是否可点击',
+  focusable: '控件是否可获取焦点',
+  checkable: '控件是否可勾选',
+  checked: '控件是否已勾选',
+  editable: '控件是否可编辑',
+  longClickable: '控件是否支持长按',
+  visibleToUser: '控件是否对用户可见',
+  childCount: '子节点数量',
+  index: '在父节点中的位置序号',
+  depth: '在控件树中的层级深度',
+  left: '左边界坐标(像素)',
+  top: '上边界坐标(像素)',
+  right: '右边界坐标(像素)',
+  bottom: '下边界坐标(像素)',
+  width: '控件宽度(像素)',
+  height: '控件高度(像素)',
+  _id: '快照遍历序号',
+  _pid: '父节点的遍历序号',
+  'text.length': 'text 字段长度',
+  'desc.length': 'desc 字段长度',
+  _selector: '自动生成的选择器表达式',
+};
+
+const getAttrExplain = (name: string) => {
+  return (
+    attrExplainMap[name] || '该属性用于描述节点特征，可结合其他字段一起定位。'
+  );
+};
+
+// 提取类名简写，例如从 "android.view.View" 中提取 "View"
+const getClassNameShort = (fullClassName: string): string => {
+  if (!fullClassName) return fullClassName;
+  const parts = fullClassName.split('.');
+  return parts[parts.length - 1] || fullClassName;
+};
+
+// 处理属性点击事件
+const handleAttrClick = (attr: any) => {
+  if (attr.name === 'name' && typeof attr.value === 'string') {
+    // 对于 name 属性，只复制类名简写本身
+    const shortClassName = getClassNameShort(attr.value);
+    copy(shortClassName);
+  } else {
+    // 其他属性保持原有逻辑
+    copy(`${attr.name}=${attr.desc}`);
+  }
+};
+</script>
+
+<template>
+  <DraggableCard
+    v-slot="{ onRef }"
+    :initialValue="{ top: 40, right: 10 }"
+    class="box-shadow-dim snapshot-window window-anim"
+    :show="show && Boolean(focusNode)"
+  >
+    <div class="snapshot-floating-panel relative p-8px">
+      <div absolute top-0 right-0 pt-4px pr-8px>
+        <NButton text title="最小化" @click="onUpdateShow(!show)">
+          <template #icon>
+            <SvgIcon name="minus" />
+          </template>
+        </NButton>
+      </div>
+      <NTable
+        v-if="focusNode"
+        size="small"
+        striped
+        :singleLine="false"
+        class="gkd_code"
+        :themeOverrides="{
+          thPaddingSmall: '1px 3px',
+          tdPaddingSmall: '0px 3px',
+        }"
+      >
+        <thead>
+          <tr :ref="onRef" cursor-move>
+            <th>Name</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <NTbody>
+          <NTr v-for="attrx in attrs" :key="attrx.name">
+            <NTd @click="handleAttrClick(attrx)">
+              <AttrNameCell
+                :name="attrx.name"
+                :explain="getAttrExplain(attrx.name)"
+                :tip="attrx.tip"
+              />
+            </NTd>
+            <NTd>
+              <AttrValueCell
+                :name="attrx.name"
+                :desc="attrx.desc"
+                :isNull="attrx.value === null"
+              />
+            </NTd>
+          </NTr>
+          <NTr>
+            <NTd colspan="2">
+              <div flex items-center h-24px px-2px>
+                <NTooltip>
+                  <template #trigger>
+                    <NButton text @click="copy(selectText)">
+                      <template #icon>
+                        <NIcon size="20">
+                          <SvgIcon name="path" />
+                        </NIcon>
+                      </template>
+                    </NButton>
+                  </template>
+                  <div max-w-500px>
+                    {{ selectText }}
+                  </div>
+                </NTooltip>
+              </div>
+            </NTd>
+          </NTr>
+        </NTbody>
+      </NTable>
+    </div>
+  </DraggableCard>
+</template>
diff --git a/src/views/plus/snapshot/MiniHoverImg.vue b/src/views/plus/snapshot/MiniHoverImg.vue
new file mode 100644
index 0000000..99a25a1
--- /dev/null
+++ b/src/views/plus/snapshot/MiniHoverImg.vue
@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { useSharedSnapshotHoverImg, useSnapshotStore } from './snapshot';
+
+const { screenshotUrl } = useSnapshotStore();
+const {
+  imgHover,
+  imgBounding,
+  hoverPositionStyle,
+  boxHoverPosition,
+  hoverPosition,
+  boxHoverPerPosition,
+} = useSharedSnapshotHoverImg();
+</script>
+
+<template>
+  <!-- Teleport 需要单独一个组件否则 hmr 错误 -->
+  <Teleport v-if="screenshotUrl" to="body">
+    <!-- 渲染在外部防止被遮挡 -->
+    <div
+      v-show="imgHover"
+      class="MiniHoverImg"
+      :style="{
+        left: imgBounding.right.value + 4 + 'px',
+        top: imgBounding.top.value + 'px',
+      }"
+      pointer-events-none
+      fixed
+      overflow-hidden
+      z-2
+      bg-white
+      h-200px
+      w-200px
+      border-1px
+      border-indigo-600
+      border-dashed
+    >
+      <img
+        :src="screenshotUrl"
+        :style="hoverPositionStyle"
+        object-contain
+        absolute
+        left-0
+        top-0
+        class="max-w-none!"
+      />
+      <div
+        absolute
+        left-2px
+        top-2px
+        p-1px
+        z-1
+        text-13px
+        class="leading-[1] bg-[rgba(256,256,256,0.7)] text-black"
+      >
+        {{ `${hoverPosition.ox.toFixed(0)}, ${hoverPosition.oy.toFixed(0)}` }}
+      </div>
+      <div
+        v-if="boxHoverPosition"
+        absolute
+        left-2px
+        bottom-2px
+        p-1px
+        z-1
+        text-12px
+        class="leading-[1] bg-[rgba(256,256,256,0.7)] text-black"
+        flex
+        flex-col
+        flex-items-center
+      >
+        <div>{{ boxHoverPosition.top.toFixed(0) }}</div>
+        <div>
+          {{
+            boxHoverPosition.left.toFixed(0) +
+            ', ' +
+            boxHoverPosition.right.toFixed(0)
+          }}
+        </div>
+        <div>{{ boxHoverPosition.bottom.toFixed(0) }}</div>
+      </div>
+      <div
+        v-if="boxHoverPerPosition"
+        absolute
+        right-2px
+        bottom-2px
+        p-1px
+        z-1
+        text-12px
+        class="leading-[1] bg-[rgba(256,256,256,0.7)] text-black"
+        flex
+        flex-col
+        flex-items-center
+      >
+        <div>{{ boxHoverPerPosition.top }}</div>
+        <div>
+          {{ boxHoverPerPosition.left + ', ' + boxHoverPerPosition.right }}
+        </div>
+        <div>{{ boxHoverPerPosition.bottom }}</div>
+      </div>
+      <div
+        class="top-[calc(50%-1px)] bg-[length:10px_1px]"
+        absolute
+        left-0
+        right-0
+        h-1px
+        bg-repeat-x
+        mix-blend-difference
+        style="
+          background-image: linear-gradient(
+            to left,
+            transparent 0%,
+            transparent 50%,
+            #fff 50%,
+            #fff 100%
+          );
+          background-position-x: 1.5px;
+        "
+      />
+      <div
+        class="left-[calc(50%-1px)] bg-[length:1px_10px]"
+        absolute
+        top-0
+        bottom-0
+        w-1px
+        bg-repeat-y
+        mix-blend-difference
+        style="
+          background-image: linear-gradient(
+            to top,
+            transparent 0%,
+            transparent 50%,
+            #fff 50%,
+            #fff 100%
+          );
+          background-position-y: 1.5px;
+        "
+      />
+    </div>
+  </Teleport>
+</template>
diff --git a/src/views/plus/snapshot/OverlapCard.vue b/src/views/plus/snapshot/OverlapCard.vue
new file mode 100644
index 0000000..dac9678
--- /dev/null
+++ b/src/views/plus/snapshot/OverlapCard.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import DraggableCard from '@/components/DraggableCard.vue';
+import { getNodeLabel, getNodeStyle } from '@/utils/node';
+import { useSnapshotStore } from './snapshot';
+
+const { focusNode, overlapNodes, focusPosition, updateFocusNode } =
+  useSnapshotStore();
+const _1vw = document.documentElement.scrollWidth / 100;
+const left = _1vw * 25.5;
+</script>
+
+<template>
+  <DraggableCard
+    v-slot="{ onRef }"
+    :initialValue="{ top: 215, left }"
+    class="box-shadow-dim w-420px"
+    :show="Boolean(overlapNodes && focusPosition)"
+  >
+    <NCard
+      v-if="overlapNodes && focusPosition"
+      size="small"
+      closable
+      @close="overlapNodes = undefined"
+    >
+      <template #header>
+        <div :ref="onRef" cursor-move>
+          位置
+          <span class="overlap-pos-badge" bg="#eee" px-2px>{{
+            `${focusPosition.x.toFixed(0)},${focusPosition.y.toFixed(0)}`
+          }}</span>
+          存在 {{ overlapNodes.length }} 个层叠节点
+        </div>
+      </template>
+      <NSpace
+        style="max-height: 400px; overflow-y: scroll; padding-bottom: 10px"
+        class="scrollbar-hidden"
+      >
+        <NButton
+          v-for="resultNode in overlapNodes"
+          :key="resultNode.id"
+          size="small"
+          :style="getNodeStyle(resultNode, focusNode)"
+          @click="updateFocusNode(resultNode)"
+        >
+          {{ getNodeLabel(resultNode) }}
+        </NButton>
+      </NSpace>
+    </NCard>
+  </DraggableCard>
+</template>
+
+<style scoped>
+.overlap-pos-badge {
+  color: #111827;
+  border-radius: 4px;
+}
+
+:global(html.dark-mode-active .overlap-pos-badge) {
+  background-color: #2b2f36;
+  color: #f9fafb;
+}
+</style>
diff --git a/src/views/plus/snapshot/RuleCard.vue b/src/views/plus/snapshot/RuleCard.vue
new file mode 100644
index 0000000..277a2d5
--- /dev/null
+++ b/src/views/plus/snapshot/RuleCard.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import DraggableCard from '@/components/DraggableCard.vue';
+import { getNodeLabel, getNodeStyle } from '@/utils/node';
+import { buildEmptyFn } from '@/utils/others';
+import {
+  evaluateRuleText,
+  RULE_PREVIEW_CONTEXT_CHARS,
+  type RuleCheckResult,
+  type RuleCheckResultFailure,
+} from '@/utils/plus/ruleTest';
+import { gkdWidth, vw } from '@/utils/size';
+import type { ShallowRef } from 'vue';
+import { useSnapshotStore } from './snapshot';
+
+withDefaults(
+  defineProps<{
+    show: boolean;
+    onUpdateShow?: (data: boolean) => void;
+  }>(),
+  {
+    onUpdateShow: buildEmptyFn,
+  },
+);
+
+const snapshotStore = useSnapshotStore();
+const { rootNode, focusNode } = snapshotStore;
+const snapshot = snapshotStore.snapshot as ShallowRef<Snapshot | undefined>;
+
+const text = shallowRef('');
+const lazyText = refDebounced(text, 500);
+const parsedRuleResult = computed<RuleCheckResult | null>(() =>
+  evaluateRuleText(lazyText.value, {
+    rootNode: rootNode.value,
+    appId: snapshot.value?.appId,
+    currentActivityId: snapshot.value?.activityId,
+    simulatedPreKeys: [],
+    ignoreActivityCheck: false,
+  }),
+);
+
+/* -------------------------
+   视图辅助
+   ------------------------- */
+
+const diagnostics = computed<RuleCheckResultFailure | null>(() => {
+  const result = parsedRuleResult.value;
+  if (
+    result &&
+    !result.success &&
+    (result.stage === 'json' ||
+      result.stage === 'structure' ||
+      result.stage === 'selector')
+  ) {
+    return result as RuleCheckResultFailure;
+  }
+  return null;
+});
+
+const errorText = computed(() => {
+  if (parsedRuleResult.value && !parsedRuleResult.value.success) {
+    return parsedRuleResult.value.error ?? '';
+  }
+  return '';
+});
+
+const matchedRuleKeyText = computed(() => {
+  const result = parsedRuleResult.value;
+  if (!result || !result.success) return '';
+  const key = result.meta?.matchedRuleKey;
+  return Number.isInteger(key) ? `命中规则 key=${key}` : '';
+});
+
+const errorPreview = computed(() => {
+  const d = diagnostics.value;
+  if (!d) return null;
+  const raw = lazyText.value ? lazyText.value.replace(/\r\n?/g, '\n') : '';
+  const start = Math.max(0, d.start ?? 0);
+  const end = Math.min(raw.length, d.end ?? start);
+  const preStart = Math.max(0, start - RULE_PREVIEW_CONTEXT_CHARS);
+  const postEnd = Math.min(raw.length, end + RULE_PREVIEW_CONTEXT_CHARS);
+
+  let head = raw.slice(preStart, start);
+  const err = raw.slice(start, end) || ' ';
+  let tail = raw.slice(end, postEnd);
+
+  if (preStart > 0) head = '...' + head;
+  if (postEnd < raw.length) tail = tail + '...';
+
+  return { head, err, tail };
+});
+</script>
+
+<template>
+  <DraggableCard
+    v-slot="{ onRef }"
+    :initialValue="{
+      top: 40,
+      right: Math.max(315, 12 * vw + 135),
+      width: Math.max(480, gkdWidth * 0.3),
+    }"
+    :minWidth="300"
+    sizeDraggable
+    class="box-shadow-dim snapshot-window window-anim"
+    :show="show"
+  >
+    <div
+      class="snapshot-floating-panel"
+      b-1px
+      b-solid
+      b-gray-200
+      rounded-12px
+      p-8px
+    >
+      <div flex m-b-4px pr-4px>
+        <SvgIcon
+          name="test"
+          class="mr-6px"
+          style="color: var(--accent-success-color)"
+        />
+        <div>测试规则 GKD引擎模拟器</div>
+        <div :ref="onRef" flex-1 cursor-move />
+        <NButton text title="最小化" @click="onUpdateShow(!show)">
+          <template #icon><SvgIcon name="minus" /></template>
+        </NButton>
+      </div>
+
+      <NInput
+        v-model:value="text"
+        type="textarea"
+        placeholder="请输入单个规则测试（支持 JSON5，允许 string 或 string[]，会自动 normalize）"
+        size="small"
+        class="gkd_code m-b-4px"
+        :autosize="{ minRows: 10, maxRows: 20 }"
+      />
+
+      <div
+        v-if="errorPreview"
+        mt-6px
+        mb-8px
+        p-4px
+        gkd_code
+        transition-colors
+        class="selector-ast-view selector-ast-view-error"
+      >
+        <span whitespace-pre-wrap>
+          <span v-if="errorPreview.head">{{ errorPreview.head }}</span>
+          <span bg-red relative>
+            <span v-if="errorPreview.err" class="rc-error">{{
+              errorPreview.err
+            }}</span>
+            <span v-else pl-20px class="rc-error" />
+            <div
+              absolute
+              left-0
+              right-0
+              top--12px
+              flex
+              flex-col
+              items-center
+              animate-bounce
+              pointer-events-none
+            >
+              <SvgIcon name="arrow" class="selector-error-arrow" />
+            </div>
+          </span>
+          <span v-if="errorPreview.tail">{{ errorPreview.tail }}</span>
+        </span>
+      </div>
+
+      <div min-h-24px mt-4px>
+        <!-- 规则成功命中 -->
+        <div v-if="parsedRuleResult && parsedRuleResult.success">
+          <div flex items-center gap-4px>
+            <NTag type="success" size="small" round>规则命中</NTag>
+            <NButton
+              size="small"
+              :style="getNodeStyle(parsedRuleResult.node, focusNode)"
+              @click="snapshotStore.updateFocusNode(parsedRuleResult.node)"
+            >
+              {{ getNodeLabel(parsedRuleResult.node) }}
+            </NButton>
+          </div>
+          <!-- 显示命中详情 -->
+          <div
+            v-if="parsedRuleResult.matched"
+            mt-4px
+            pl-4px
+            border-l-2
+            border-gray-200
+          >
+            <div
+              v-for="(matchInfo, type) in parsedRuleResult.matched"
+              :key="type"
+              mb-2px
+            >
+              <div flex items-center gap-2px>
+                <NTag
+                  :type="type.includes('exclude') ? 'warning' : 'info'"
+                  size="small"
+                  round
+                  >{{ type }} 命中</NTag
+                >
+                <span text-12px opacity-70
+                  >{{ (matchInfo || []).length }}个选择器</span
+                >
+              </div>
+              <div
+                v-for="(item, index) in matchInfo"
+                :key="index"
+                ml-4px
+                mt-1px
+              >
+                <NTooltip trigger="hover">
+                  <template #trigger>
+                    <div text-12px gkd_code>
+                      {{ index }}: {{ item.selector }}
+                    </div>
+                  </template>
+                  <div max-w-400px whitespace-pre-wrap>{{ item.selector }}</div>
+                </NTooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 规则未命中但有可命中的选择器 -->
+        <div
+          v-else-if="
+            parsedRuleResult &&
+            !parsedRuleResult.success &&
+            parsedRuleResult.node &&
+            parsedRuleResult.error.includes('可命中')
+          "
+        >
+          <div color-red whitespace-pre>{{ errorText }}</div>
+          <div flex items-center gap-4px mt-2px>
+            <NTag type="warning" size="small" round
+              >建议改用 anyMatches 语义</NTag
+            >
+            <NButton
+              size="small"
+              :style="getNodeStyle(parsedRuleResult.node, focusNode)"
+              @click="snapshotStore.updateFocusNode(parsedRuleResult.node)"
+            >
+              {{ getNodeLabel(parsedRuleResult.node) }}
+            </NButton>
+          </div>
+        </div>
+
+        <!-- 规则因 excludeMatches 而未命中 -->
+        <div
+          v-else-if="
+            parsedRuleResult &&
+            !parsedRuleResult.success &&
+            parsedRuleResult.node &&
+            parsedRuleResult.field &&
+            parsedRuleResult.field.includes('exclude')
+          "
+        >
+          <div color-red whitespace-pre>{{ errorText }}</div>
+          <div flex items-center gap-4px mt-2px>
+            <NTag type="warning" size="small" round
+              >{{ parsedRuleResult.field }} 排除命中</NTag
+            >
+            <NButton
+              size="small"
+              :style="getNodeStyle(parsedRuleResult.node, focusNode)"
+              @click="snapshotStore.updateFocusNode(parsedRuleResult.node)"
+            >
+              {{ getNodeLabel(parsedRuleResult.node) }}
+            </NButton>
+          </div>
+        </div>
+
+        <!-- 规则完全未命中 -->
+        <div v-else-if="parsedRuleResult && !parsedRuleResult.success">
+          <div color-red whitespace-pre>{{ errorText }}</div>
+          <template v-if="diagnostics">
+            <br />
+            <span text-11px opacity-70>
+              行 {{ diagnostics.line }} ｜ 列 {{ diagnostics.column }} ｜ 阶段:
+              {{ diagnostics.stage }}
+            </span>
+          </template>
+        </div>
+
+        <!-- 显示规则 key -->
+        <div v-if="matchedRuleKeyText" mt-4px text-12px opacity-75>
+          {{ matchedRuleKeyText }}
+        </div>
+      </div>
+    </div>
+  </DraggableCard>
+</template>
+
+<style scoped>
+.selector-ast-view {
+  max-height: 160px;
+  overflow: auto;
+  border-radius: 6px;
+  color: var(--text-primary, inherit);
+}
+
+.selector-ast-view-error {
+  background: var(--selector-ast-error-bg-color2, rgba(255, 240, 240, 0.9));
+  border: 1px solid rgba(255, 80, 80, 0.12);
+}
+
+.selector-error-arrow {
+  color: var(--accent-error-color, #ff6666);
+}
+
+.selector-ast-view .rc-error,
+.selector-ast-view-error .rc-error {
+  background: rgba(255, 90, 90, 0.12);
+  border-bottom: 2px solid rgba(255, 60, 60, 0.9);
+  padding: 0 2px;
+  border-radius: 3px;
+}
+
+:global(html.dark-mode-active .selector-ast-view-error) {
+  background: var(--selector-ast-error-bg-color2, rgba(40, 40, 40, 0.6));
+  border: 1px solid rgba(255, 80, 80, 0.16);
+}
+</style>
diff --git a/src/views/plus/snapshot/ScreenshotCard.vue b/src/views/plus/snapshot/ScreenshotCard.vue
new file mode 100644
index 0000000..ec070db
--- /dev/null
+++ b/src/views/plus/snapshot/ScreenshotCard.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import dayjs from 'dayjs';
+import PrivacyBlurEditor from '@/components/plus/snapshot/PrivacyBlurEditor.vue';
+import MiniHoverImg from './MiniHoverImg.vue';
+import { useSharedSnapshotHoverImg, useSnapshotStore } from './snapshot';
+
+const {
+  snapshot,
+  displayScreenshotUrl,
+  blurEditorShow,
+  applyBlurredScreenshot,
+  resetBlurredScreenshot,
+  showRegenerateTip,
+  dismissRegenerateTip,
+} = useSnapshotStore();
+const { clickImg, imgHover, imgMove, imgLoadTime, positionStyle, imgRef } =
+  useSharedSnapshotHoverImg();
+</script>
+
+<template>
+  <div
+    v-if="snapshot && displayScreenshotUrl"
+    flex
+    flex-col
+    relative
+    h-full
+    p-2px
+    overflow-hidden
+  >
+    <img
+      ref="imgRef"
+      :src="displayScreenshotUrl"
+      cursor-crosshair
+      object-contain
+      h-full
+      class="max-w-[calc(var(--gkd-w)*0.35)]"
+      @click="clickImg"
+      @mouseover="imgHover = true"
+      @mouseleave="imgHover = false"
+      @mousemove="imgMove"
+      @load="imgLoadTime = true"
+    />
+    <div pointer-events-none absolute left-2px top-2px size="[calc(100%-4px)]">
+      <div
+        :style="positionStyle"
+        absolute
+        transition-all-300
+        b-1px
+        b-solid
+        style="border-color: var(--screenshot-focus-border-color)"
+      >
+        <div
+          absolute
+          left-0
+          top-0
+          bottom-0
+          right-0
+          b-solid
+          b-1px
+          style="border-color: var(--screenshot-focus-border-inner-color)"
+        />
+      </div>
+    </div>
+    <div
+      absolute
+      z-4
+      left-4px
+      top-4px
+      text-12px
+      leading="100%"
+      flex
+      gap-4px
+      items-center
+    >
+      <div
+        py-1px
+        px-2px
+        style="
+          background-color: var(--screenshot-card-bg-color);
+          color: var(--screenshot-card-text-color);
+        "
+        title="尺寸"
+      >
+        {{ `${snapshot.screenWidth}x${snapshot.screenHeight}` }}
+      </div>
+      <div
+        py-1px
+        px-2px
+        style="
+          background-color: var(--screenshot-card-bg-color);
+          color: var(--screenshot-card-text-color);
+        "
+        title="创建时间"
+      >
+        {{ dayjs(snapshot.id).format('YYYY-MM-DD HH:mm:ss') }}
+      </div>
+    </div>
+    <MiniHoverImg v-if="imgRef" />
+    <PrivacyBlurEditor
+      :show="blurEditorShow"
+      :src="displayScreenshotUrl"
+      :host-image="imgRef"
+      @update:show="blurEditorShow = $event"
+      @apply="applyBlurredScreenshot"
+      @reset="resetBlurredScreenshot"
+    />
+
+    <NAlert
+      v-if="showRegenerateTip"
+      type="warning"
+      size="small"
+      closable
+      class="absolute left-4px right-4px top-4px z-12"
+      style="--n-border-radius: 10px"
+      @close="dismissRegenerateTip"
+    >
+      图片已编辑：如你之前已经生成过链接，请重新生成链接后再分享。
+    </NAlert>
+  </div>
+</template>
diff --git a/src/views/plus/snapshot/SearchCard.vue b/src/views/plus/snapshot/SearchCard.vue
new file mode 100644
index 0000000..a32075a
--- /dev/null
+++ b/src/views/plus/snapshot/SearchCard.vue
@@ -0,0 +1,492 @@
+<script setup lang="ts">
+import DraggableCard from '@/components/DraggableCard.vue';
+import SelectorText from '@/components/SelectorText.vue';
+import FastQueryIndicator from '@/components/plus/snapshot/FastQueryIndicator.vue';
+import SelectorSyntaxPreview from '@/components/plus/snapshot/SelectorSyntaxPreview.vue';
+import { useSearchCardPlus } from '@/composables/plus/useSearchCardPlus';
+import { message } from '@/utils/discrete';
+import { errorTry, errorWrap } from '@/utils/error';
+import { getAppInfo, getNodeLabel, getNodeStyle } from '@/utils/node';
+import { buildEmptyFn, copy } from '@/utils/others';
+import { parseSelector, wasmLoadTask } from '@/utils/selector';
+import { gkdWidth, vw } from '@/utils/size';
+import { getImagUrl } from '@/utils/url';
+import { FastQuery, GkdException, type QueryResult } from '@gkd-kit/selector';
+import dayjs from 'dayjs';
+import * as base64url from 'universal-base64url';
+import type { ShallowRef } from 'vue';
+import JSON5 from 'json5';
+import { useSnapshotStore } from './snapshot';
+import { buildFastQueryMeta } from '@/composables/plus/useFastQueryIndicator';
+
+withDefaults(
+  defineProps<{
+    show: boolean;
+    onUpdateShow?: (data: boolean) => void;
+  }>(),
+  {
+    onUpdateShow: buildEmptyFn,
+  },
+);
+
+const route = useRoute();
+const { snapshotImportId, snapshotImageId } = useStorageStore();
+
+const snapshotStore = useSnapshotStore();
+const snapshot = snapshotStore.snapshot as ShallowRef<Snapshot>;
+const rootNode = snapshotStore.rootNode as ShallowRef<RawNode>;
+const { focusNode, updateFocusNode } = snapshotStore;
+
+const searchText = shallowRef(``);
+const selectorResults = shallowReactive<SearchResult[]>([]);
+const expandedKeys = shallowRef<number[]>([]);
+const enableSearchBySelector = shallowRef(true);
+const {
+  selectorSyntaxText,
+  selectorSyntaxAst,
+  selectorSyntaxError,
+  handleTextareaKeyDown,
+  resolveImportUrl,
+} = useSearchCardPlus({
+  searchText,
+  enableSearchBySelector,
+});
+
+const searchSelector = (text: string, skipDuplicateCheck: boolean = false) => {
+  if (!rootNode.value) {
+    message.error('当前无可用节点树, 请尝试刷新页面');
+    return;
+  }
+  const selector = errorWrap(
+    () => parseSelector(text),
+    (e) => {
+      if (typeof e == 'string') return e;
+      if (e instanceof GkdException) return `非法选择器:` + e.outMessage;
+      return `非法选择器:` + (e instanceof Error ? e.message : e);
+    },
+  );
+  if (
+    !skipDuplicateCheck &&
+    selectorResults.find(
+      (s) =>
+        typeof s.selector == 'object' &&
+        s.selector.toString() == selector.toString(),
+    )
+  ) {
+    message.warning(`不可重复选择`);
+    return;
+  }
+
+  const results = selector.querySelfOrSelectorAllContext(rootNode.value);
+  // 修正 1: 将 QueryResult 转换为真正的数组以适配 TS 和后续的 map 操作
+  const resultsArray = Array.from<QueryResult<RawNode>>(results);
+
+  if (resultsArray.length == 0) {
+    message.success(`没有选择到节点`);
+    return;
+  }
+  message.success(`选择到 ${resultsArray.length} 个节点`);
+  const result: SelectorSearchResult = {
+    selector,
+    nodes: resultsArray.map((r) => r.target),
+    results: resultsArray,
+    key: Date.now(),
+    gkd: true,
+  };
+  result.fastQueryMeta = buildFastQueryMeta(result);
+  selectorResults.unshift(result);
+  return resultsArray.length;
+};
+
+const searchString = (text: string) => {
+  if (!rootNode.value) {
+    message.error('当前无可用节点树');
+    return;
+  }
+  if (
+    selectorResults.find(
+      (s) => typeof s.selector == 'string' && s.selector.toString() == text,
+    )
+  ) {
+    message.warning(`不可重复搜索`);
+    return;
+  }
+  const results: RawNode[] = [];
+  const stack: RawNode[] = [rootNode.value];
+  while (stack.length > 0) {
+    const n = stack.pop()!;
+    if (getNodeLabel(n).includes(text)) {
+      results.push(n);
+    }
+    stack.push(...[...n.children].reverse());
+  }
+  if (results.length == 0) {
+    message.success(`没有搜索到节点`);
+    return;
+  }
+  message.success(`搜索到 ${results.length} 个节点`);
+  selectorResults.unshift({
+    gkd: false,
+    selector: text,
+    nodes: results,
+    key: Date.now(),
+    fastQueryMeta: null,
+  });
+  return results.length;
+};
+
+const refreshExpandedKeys = () => {
+  const newResult = selectorResults[0];
+  const newNode = newResult.nodes[0];
+  if (!Array.isArray(newNode)) {
+    updateFocusNode(newNode);
+  } else if (typeof newResult.selector == 'object') {
+    updateFocusNode(newNode);
+  }
+  const allKeys = new Set(selectorResults.map((s) => s.key));
+  const newKeys = expandedKeys.value.filter((k) => allKeys.has(k));
+  newKeys.push(newResult.key);
+  expandedKeys.value = newKeys;
+};
+
+const searchBySelector = errorTry(() => {
+  const text = searchText.value.trim();
+  if (!text) return;
+  if (enableSearchBySelector.value) {
+    if (!searchSelector(text)) return;
+  } else {
+    if (!searchString(text)) return;
+  }
+  refreshExpandedKeys();
+});
+
+onMounted(async () => {
+  await wasmLoadTask;
+  let count = 0;
+
+  const toArray = (param: unknown): string[] => {
+    if (Array.isArray(param)) {
+      return param.filter((item): item is string => typeof item === 'string');
+    }
+    if (typeof param === 'string') {
+      return [param];
+    }
+    return [];
+  };
+
+  const gkdParams = toArray(route.query.gkd);
+  const uniqueGkdParams = [...new Set(gkdParams)];
+  for (const item of uniqueGkdParams) {
+    try {
+      const decoded = base64url.decode(item);
+      count += searchSelector(decoded, true) || 0;
+    } catch (e) {
+      // 忽略非法 Base64
+      console.warn('Invalid gkd parameter:', item, e);
+    }
+  }
+
+  const strParams = toArray(route.query.str);
+  const uniqueStrParams = [...new Set(strParams)];
+  for (const item of uniqueStrParams) {
+    count += searchString(item) || 0;
+  }
+
+  if (count > 0) {
+    refreshExpandedKeys();
+  }
+});
+
+const generateRules = errorTry(async (result: SelectorSearchResult) => {
+  if (!snapshot.value) {
+    message.error('当前无可用快照数据');
+    return;
+  }
+  const imageId = snapshotImageId[snapshot.value.id];
+  const importId = snapshotImportId[snapshot.value.id];
+  const snapshotUrls = importId ? resolveImportUrl(importId) : undefined;
+  const exampleUrls = imageId ? getImagUrl(imageId) : undefined;
+
+  const s = result.selector;
+  // 修正 2: 显式类型转换以修复 .map 报错
+  // 使用 Array.from 配合 unknown 转换，这是最符合 TS 规范的绕过方式
+  const t = result.results[0]?.context.toArray().at(-1);
+  if (!t) {
+    message.error('无法提取选择器路径信息');
+    return;
+  }
+
+  const fastQuery = [
+    (t.quickFind ?? t.idQf) &&
+      t.attr.id &&
+      s.fastQueryList.some(
+        (v) => v instanceof FastQuery.Id && v.acceptText(t.attr.id!),
+      ),
+    (t.quickFind ?? t.idQf) &&
+      t.attr.vid &&
+      s.fastQueryList.some(
+        (v) => v instanceof FastQuery.Vid && v.acceptText(t.attr.vid!),
+      ),
+    (t.quickFind ?? t.textQf) &&
+      t.attr.text &&
+      s.fastQueryList.some(
+        (v) => v instanceof FastQuery.Text && v.acceptText(t.attr.text!),
+      ),
+  ].some(Boolean);
+  const rule = {
+    id: snapshot.value.appId,
+    name: getAppInfo(snapshot.value).name,
+    groups: [
+      {
+        key: 1,
+        name: `[ChangeMe]规则名称-${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
+        desc: `[ChangeMe]本规则由GKD网页端审查工具生成`,
+        rules: [
+          {
+            fastQuery: fastQuery || undefined,
+            activityIds: snapshot.value.activityId,
+            matches: s.toString(),
+            exampleUrls,
+            snapshotUrls,
+          },
+        ],
+      },
+    ],
+  };
+
+  copy(JSON5.stringify(rule, undefined, 2));
+});
+
+const hasZipId = computed(() => {
+  if (!snapshot.value) return false;
+  return snapshotImportId[snapshot.value.id];
+});
+
+const shareResult = (result: SearchResult) => {
+  if (!hasZipId.value || !snapshot.value) return;
+  const importUrl = new URL(
+    resolveImportUrl(snapshotImportId[snapshot.value.id]),
+  );
+  if (typeof result.selector == 'object') {
+    importUrl.searchParams.set(
+      'gkd',
+      base64url.encode(result.selector.toString()),
+    );
+  } else {
+    importUrl.searchParams.set('str', result.selector.toString());
+  }
+  copy(importUrl.toString());
+};
+</script>
+
+<template>
+  <DraggableCard
+    v-slot="{ onRef }"
+    :initialValue="{
+      top: 40,
+      right: Math.max(348, 12 * vw + 135),
+      width: Math.max(480, gkdWidth * 0.3),
+    }"
+    :minWidth="300"
+    sizeDraggable
+    class="box-shadow-dim snapshot-window window-anim"
+    :show="show"
+  >
+    <div
+      class="snapshot-floating-panel"
+      b-1px
+      b-solid
+      b-gray-200
+      rounded-12px
+      p-8px
+    >
+      <div flex m-b-4px pr-4px>
+        <NRadioGroup v-model:value="enableSearchBySelector">
+          <NSpace>
+            <NRadio :value="false"> 字符搜索 </NRadio>
+            <NRadio :value="true"> 选择器查询 </NRadio>
+          </NSpace>
+        </NRadioGroup>
+        <div :ref="onRef" flex-1 cursor-move />
+        <NButton text title="最小化" @click="onUpdateShow(!show)">
+          <template #icon>
+            <SvgIcon name="minus" />
+          </template>
+        </NButton>
+      </div>
+      <NInputGroup>
+        <NInput
+          v-model:value="searchText"
+          type="textarea"
+          :placeholder="enableSearchBySelector ? `请输入选择器` : `请输入字符`"
+          :autosize="{ minRows: 1, maxRows: 6 }"
+          :inputProps="{ class: 'selector-textarea' }"
+          @keydown="handleTextareaKeyDown($event, searchBySelector)"
+        />
+        <NButton @click="searchBySelector">
+          <template #icon>
+            <SvgIcon name="search" />
+          </template>
+        </NButton>
+      </NInputGroup>
+      <SelectorSyntaxPreview
+        :enable-search-by-selector="enableSearchBySelector"
+        :syntax-text="selectorSyntaxText"
+        :syntax-ast="selectorSyntaxAst"
+        :syntax-error="selectorSyntaxError"
+      />
+      <div p-5px />
+      <NCollapse v-model:expandedNames="expandedKeys">
+        <NCollapseItem
+          v-for="(result, index) in selectorResults"
+          :key="result.key"
+          :name="result.key"
+        >
+          <template #header>
+            <div class="selector-header">
+              <span
+                v-if="result.nodes.length > 1"
+                underline
+                leading-20px
+                decoration-1
+                m-r-4px
+                gkd_code
+                title="查询数量"
+              >
+                {{ result.nodes.length }}
+              </span>
+              <span
+                break-all
+                px-4px
+                leading-20px
+                class="snapshot-token"
+                gkd_code
+                :title="result.gkd ? `选择器` : `搜索字符`"
+              >
+                <SelectorText
+                  v-if="result.gkd"
+                  :node="result.selector.ast"
+                  :source="result.selector.source"
+                />
+                <template v-else>{{ result.selector }}</template>
+              </span>
+              <span pl-4px />
+            </div>
+          </template>
+          <template #header-extra>
+            <NButtonGroup>
+              <NButton
+                v-if="result.gkd && result.selector.canCopy"
+                size="small"
+                title="复制规则"
+                @click.stop="generateRules(result as SelectorSearchResult)"
+              >
+                <template #icon>
+                  <SvgIcon name="copy" />
+                </template>
+              </NButton>
+              <NButton
+                v-if="hasZipId"
+                size="small"
+                :title="result.gkd ? `复制查询链接` : `复制搜索链接`"
+                @click.stop="shareResult(result)"
+              >
+                <template #icon>
+                  <SvgIcon name="share" />
+                </template>
+              </NButton>
+              <NButton
+                size="small"
+                title="删除记录"
+                @click.stop="selectorResults.splice(index, 1)"
+              >
+                <template #icon>
+                  <SvgIcon name="delete" />
+                </template>
+              </NButton>
+            </NButtonGroup>
+          </template>
+          <NScrollbar xScrollable style="max-height: 400px">
+            <div flex gap-8px flex-wrap>
+              <template
+                v-if="!result.gkd || result.selector.connectKeys.length === 0"
+              >
+                <span
+                  v-for="resultNode in result.nodes"
+                  :key="resultNode.id"
+                  class="node-fastquery-wrap"
+                >
+                  <NButton
+                    size="small"
+                    :style="getNodeStyle(resultNode, focusNode)"
+                    @click="updateFocusNode(resultNode)"
+                  >
+                    <span>{{ getNodeLabel(resultNode) }}</span>
+                  </NButton>
+                  <FastQueryIndicator :meta="result.fastQueryMeta ?? null" />
+                </span>
+              </template>
+              <template v-else>
+                <span
+                  v-for="(resultNode, i) in result.nodes"
+                  :key="i"
+                  class="node-fastquery-wrap"
+                >
+                  <NButtonGroup>
+                    <NButton
+                      size="small"
+                      @click="
+                        snapshotStore.showTrack(
+                          result.selector,
+                          result.results[i],
+                        )
+                      "
+                    >
+                      <NIcon>
+                        <SvgIcon name="path" />
+                      </NIcon>
+                    </NButton>
+                    <NButton
+                      size="small"
+                      :style="getNodeStyle(resultNode, focusNode)"
+                      @click="updateFocusNode(resultNode)"
+                    >
+                      <span>{{ getNodeLabel(resultNode) }}</span>
+                    </NButton>
+                  </NButtonGroup>
+                  <FastQueryIndicator :meta="result.fastQueryMeta ?? null" />
+                </span>
+              </template>
+            </div>
+            <div un="h-10px" />
+          </NScrollbar>
+        </NCollapseItem>
+      </NCollapse>
+    </div>
+  </DraggableCard>
+</template>
+
+<style scoped>
+:deep(.selector-textarea) {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  resize: none;
+}
+
+.selector-header {
+  display: flex;
+  align-items: center;
+}
+
+.node-fastquery-wrap {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 6px;
+}
+
+.fast-query-indicator-wrap {
+  display: inline-flex;
+  align-items: center;
+}
+</style>
diff --git a/src/views/plus/snapshot/SnapshotPage.vue b/src/views/plus/snapshot/SnapshotPage.vue
new file mode 100644
index 0000000..85e6956
--- /dev/null
+++ b/src/views/plus/snapshot/SnapshotPage.vue
@@ -0,0 +1,194 @@
+<script lang="ts" setup>
+import BaseSnapshotPage from '@/views/snapshot/SnapshotPage.vue';
+import DeviceControlTools from '@/components/DeviceControlTools.vue';
+import FullScreenDialog from '@/components/FullScreenDialog.vue';
+import SettingsModal from '@/components/SettingsModal.vue';
+import TrackCard from '@/components/TrackCard.vue';
+import { usesnapshot } from '@/composables/plus/usesnapshot';
+import AttrCard from './AttrCard.vue';
+import OverlapCard from './OverlapCard.vue';
+import RuleCard from './RuleCard.vue';
+import ScreenshotCard from './ScreenshotCard.vue';
+import SearchCard from './SearchCard.vue';
+import WindowCard from './WindowCard.vue';
+
+const {
+  snapshot,
+  trackData,
+  trackShow,
+  searchShow,
+  ruleShow,
+  attrShow,
+  settingsDlgShow,
+  openSettings,
+  onTrackDialogClosed,
+  openBlurEditor,
+} = usesnapshot();
+</script>
+
+<template>
+  <BaseSnapshotPage>
+    <template #sidebar>
+      <div py-12px flex flex-col items-center gap-16px class="snapshot-sidebar">
+        <NTooltip placement="right">
+          <template #trigger>
+            <NButton text>
+              <RouterLink to="/"><SvgIcon name="home" /></RouterLink>
+            </NButton>
+          </template>
+          回到首页
+        </NTooltip>
+        <NTooltip placement="right">
+          <template #trigger>
+            <RouterLink to="/device">
+              <NButton text><SvgIcon name="device" /></NButton>
+            </RouterLink>
+          </template>
+          连接设备
+        </NTooltip>
+        <NTooltip placement="right">
+          <template #trigger>
+            <NButton text @click="openSettings">
+              <SvgIcon name="settings" />
+            </NButton>
+          </template>
+          设置
+        </NTooltip>
+        <div />
+        <NTooltip placement="right">
+          <template #trigger>
+            <NButton text @click="searchShow = !searchShow">
+              <SvgIcon name="search-list" />
+            </NButton>
+          </template>
+          搜索面板
+        </NTooltip>
+        <DeviceControlTools />
+        <NTooltip placement="right">
+          <template #trigger>
+            <NButton text @click="attrShow = !attrShow">
+              <SvgIcon name="prop" />
+            </NButton>
+          </template>
+          属性面板
+        </NTooltip>
+        <NTooltip placement="right">
+          <template #trigger>
+            <NButton text @click="ruleShow = !ruleShow">
+              <SvgIcon name="test" />
+            </NButton>
+          </template>
+          测试规则
+        </NTooltip>
+        <NTooltip placement="right">
+          <template #trigger>
+            <NButton text @click="openBlurEditor">
+              <SvgIcon name="Photo-edit" />
+            </NButton>
+          </template>
+          编辑图片
+        </NTooltip>
+        <div />
+        <NTooltip placement="right">
+          <template #trigger>
+            <a
+              flex
+              justify-center
+              href="https://github.com/orgs/gkd-kit/discussions"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <NButton text><SvgIcon name="discussion" /></NButton>
+            </a>
+          </template>
+          讨论交流
+        </NTooltip>
+        <NTooltip placement="right">
+          <template #trigger>
+            <a
+              flex
+              justify-center
+              href="https://gkd.li/guide/snapshot#share-note"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <NButton text><SvgIcon name="warn" /></NButton>
+            </a>
+          </template>
+          分享须知
+        </NTooltip>
+      </div>
+    </template>
+
+    <template #screenshot-card>
+      <ScreenshotCard v-if="snapshot" />
+    </template>
+    <template #window-card>
+      <WindowCard v-if="snapshot" class="flex-1" />
+    </template>
+
+    <template #search-card>
+      <SearchCard
+        v-if="snapshot"
+        :show="searchShow"
+        @updateShow="searchShow = $event"
+      />
+    </template>
+    <template #rule-card>
+      <RuleCard
+        v-if="snapshot"
+        :show="ruleShow"
+        @updateShow="ruleShow = $event"
+      />
+    </template>
+    <template #attr-card>
+      <AttrCard
+        v-if="snapshot"
+        :show="attrShow"
+        @updateShow="attrShow = $event"
+      />
+    </template>
+    <template #overlap-card>
+      <OverlapCard v-if="snapshot" />
+    </template>
+
+    <template #track-dialog>
+      <FullScreenDialog v-model:show="trackShow" @closed="onTrackDialogClosed">
+        <TrackCard
+          v-if="trackData"
+          class="snapshot-floating-panel snapshot-window window-anim"
+          v-bind="trackData"
+          @close="trackShow = false"
+        />
+      </FullScreenDialog>
+    </template>
+
+    <template #extra-modals>
+      <SettingsModal v-model:show="settingsDlgShow" />
+    </template>
+  </BaseSnapshotPage>
+</template>
+
+<style scoped>
+.snapshot-page {
+  min-width: 0;
+}
+
+@media (max-width: 900px) {
+  .snapshot-page {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .snapshot-sidebar {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    padding: 8px 10px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-bottom: 1px solid var(--n-border-color);
+  }
+}
+</style>
diff --git a/src/views/plus/snapshot/WindowCard.vue b/src/views/plus/snapshot/WindowCard.vue
new file mode 100644
index 0000000..d6046b8
--- /dev/null
+++ b/src/views/plus/snapshot/WindowCard.vue
@@ -0,0 +1,304 @@
+<script setup lang="tsx">
+import ActionCard from '@/components/ActionCard.vue';
+import GapList from '@/components/GapList';
+import { message } from '@/utils/discrete';
+import {
+  getAppInfo,
+  getDevice,
+  getGkdAppInfo,
+  getNodeLabel,
+  getNodeStyle,
+} from '@/utils/node';
+import { copy, delay } from '@/utils/others';
+import type { TreeInst } from 'naive-ui';
+import type { HTMLAttributes, ShallowRef } from 'vue';
+import { h } from 'vue';
+import SvgIcon from '@/components/SvgIcon.vue';
+import { useWindowQuickFind } from '@/composables/plus/useWindowQuickFind';
+import { useSnapshotStore } from './snapshot';
+
+const router = useRouter();
+
+const snapshotStore = useSnapshotStore();
+const { updateFocusNode, focusNode, focusTime } = snapshotStore;
+const snapshot = snapshotStore.snapshot as ShallowRef<Snapshot>;
+const rootNode = snapshotStore.rootNode as ShallowRef<RawNode>;
+const { getNodeQuickFindMeta } = useWindowQuickFind(rootNode);
+
+let lastClickId = Number.NaN;
+const expandedKeys = shallowRef<number[]>([]);
+const selectedKeys = shallowRef<number[]>([]);
+watch([() => focusNode.value, () => focusTime.value], async () => {
+  if (!focusNode.value) return;
+  const key = focusNode.value.id;
+  nextTick().then(async () => {
+    await delay(300);
+    if (key === focusNode.value?.id) {
+      if (lastClickId === key) {
+        // 当点击节点树中的节点时, 不滚动
+        lastClickId = Number.NaN;
+        return;
+      }
+      selectedKeys.value = [key];
+      treeRef.value?.scrollTo({ key, behavior: 'smooth', debounce: true });
+    }
+  });
+  let parent = focusNode.value.parent;
+  if (!parent) {
+    return;
+  }
+  const s = new Set(expandedKeys.value);
+  while (parent) {
+    s.add(parent.id);
+    parent = parent.parent;
+  }
+  if (
+    s.size == expandedKeys.value.length &&
+    expandedKeys.value.every((v) => s.has(v))
+  ) {
+    return;
+  }
+  expandedKeys.value = [...s];
+});
+
+const treeRef = shallowRef<TreeInst>();
+
+const treeFilter = (pattern: string, node: RawNode) => {
+  return node.id === focusNode.value?.id;
+};
+const treeNodeProps = (info: {
+  option: RawNode;
+}): HTMLAttributes & Record<string, unknown> => {
+  const style = getNodeStyle(info.option, focusNode.value);
+  return {
+    onClick: () => {
+      lastClickId = info.option.id;
+      updateFocusNode(info.option);
+    },
+    style: {
+      '--n-node-text-color': style.color,
+      ...style,
+    },
+    class: 'whitespace-nowrap',
+    'data-node-id': String(info.option.id),
+  };
+};
+
+const renderLabel = (info: {
+  option: RawNode;
+  checked: boolean;
+  selected: boolean;
+}) => {
+  const label = getNodeLabel(info.option);
+  const meta = getNodeQuickFindMeta(info.option);
+  if (!meta?.has) {
+    return label;
+  }
+  const labelNode = h(
+    'span',
+    {
+      style: meta.self
+        ? // 在部分字体下 700 不明显，这里用轻微描边增强“加粗可见性”
+          'font-weight:700 !important;text-shadow:0.2px 0 currentColor,-0.2px 0 currentColor;'
+        : undefined,
+    },
+    label,
+  );
+  return h(
+    'span',
+    {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+      },
+    },
+    [
+      labelNode,
+      h(SvgIcon, {
+        name: 'ok',
+        class: 'quickfind-icon',
+        style: {
+          marginLeft: '4px',
+          width: '14px',
+          height: '14px',
+          opacity: meta.self ? '1' : '0.4',
+        },
+      }),
+    ],
+  );
+};
+
+const deviceName = computed(() => {
+  // 1. 如果没有快照，返回空字符串或占位符
+  if (!snapshot.value) return '';
+  const device = getDevice(snapshot.value);
+  return `${device.manufacturer} Android ${device.release || ''}`;
+});
+
+const isSystem = computed(() => {
+  // 2. 增加可选链 ?. 防御，防止 snapshot 为空时调用 getAppInfo 崩溃
+  if (!snapshot.value) return false;
+  return getAppInfo(snapshot.value)?.isSystem ?? false;
+});
+
+const activityId = computed(() => {
+  // 3. 这里的 snapshot.value.activityId 在初始状态下会直接报错
+  const snap = snapshot.value;
+  if (!snap) return '';
+
+  const v = snap.activityId;
+  const appId = snap.appId;
+  if (!v || !appId) return '';
+
+  if (v.startsWith(appId) && v[appId.length] === '.') {
+    return v.substring(appId.length);
+  }
+  return v;
+});
+
+const onDelete = async () => {
+  message.success(`删除成功,即将回到首页`);
+  await delay(2000);
+  router.replace({
+    path: `/`,
+  });
+};
+const gkdVersionName = computed(() => {
+  if (!snapshot.value) return undefined;
+  const v = getGkdAppInfo(snapshot.value).versionName;
+  return v ? `GKD@${v}` : undefined;
+});
+const appVersionCodeText = computed(() => {
+  if (!snapshot.value) return '';
+  const versionCode = getAppInfo(snapshot.value)?.versionCode;
+  return versionCode == null ? '' : String(versionCode);
+});
+</script>
+
+<template>
+  <div flex flex-col overflow-hidden>
+    <div flex items-center px-8px>
+      <GapList class="flex flex-wrap items-center gap-8px gkd_code">
+        <template #gap>
+          <div w-1px bg-gray h-12px />
+        </template>
+        <NTooltip>
+          <template #trigger>
+            <div @click="copy(deviceName)">
+              {{ deviceName }}
+            </div>
+          </template>
+          设备名称
+        </NTooltip>
+
+        <NTooltip>
+          <template #trigger>
+            <div
+              :class="{
+                'opacity-50': !gkdVersionName,
+              }"
+            >
+              {{ gkdVersionName || 'null' }}
+            </div>
+          </template>
+          GKD 版本
+        </NTooltip>
+
+        <div flex items-center gap-2px max-w-120px>
+          <NTooltip v-if="isSystem && snapshot">
+            <template #trigger>
+              <SvgIcon
+                name="system"
+                style="--svg-h: 16px; --svg-w: 16px"
+                class="text-yellow-600"
+              />
+            </template>
+            {{ `${getAppInfo(snapshot).name} 是一个系统应用` }}
+          </NTooltip>
+          <NTooltip>
+            <template #trigger>
+              <div v-if="snapshot" @click="copy(getAppInfo(snapshot).name)">
+                {{ getAppInfo(snapshot).name }}
+              </div>
+              <div v-else>-</div>
+            </template>
+            应用名称
+          </NTooltip>
+        </div>
+
+        <NTooltip>
+          <template #trigger>
+            <div
+              v-if="snapshot"
+              @click="copy(getAppInfo(snapshot).versionName)"
+            >
+              {{ getAppInfo(snapshot).versionName }}
+            </div>
+            <div v-else>-</div>
+          </template>
+          版本名称
+        </NTooltip>
+
+        <NTooltip>
+          <template #trigger>
+            <div v-if="snapshot" @click="copy(appVersionCodeText)">
+              {{ appVersionCodeText || '-' }}
+            </div>
+            <div v-else>-</div>
+          </template>
+          版本代码
+        </NTooltip>
+
+        <NTooltip>
+          <template #trigger>
+            <div v-if="snapshot" @click="copy(snapshot.appId)">
+              {{ snapshot.appId }}
+            </div>
+            <div v-else>-</div>
+          </template>
+          应用ID
+        </NTooltip>
+
+        <NTooltip>
+          <template #trigger>
+            <div
+              :class="{
+                'opacity-50': !activityId,
+              }"
+              @click="copy(activityId)"
+            >
+              {{ activityId || 'null' }}
+            </div>
+          </template>
+          界面ID
+        </NTooltip>
+      </GapList>
+      <div flex-1 />
+      <ActionCard
+        v-if="snapshot"
+        class="ml-8px"
+        :snapshot="snapshot"
+        :showPreview="false"
+        @delete="onDelete"
+      />
+    </div>
+    <div h-1px mt-4px bg="#efeff5" />
+    <div flex-1 min-h-0>
+      <NTree
+        v-if="rootNode"
+        ref="treeRef"
+        v-model:expandedKeys="expandedKeys"
+        v-model:selectedKeys="selectedKeys"
+        class="h-full"
+        virtualScroll
+        showLine
+        blockLine
+        keyField="id"
+        :data="[rootNode as any]"
+        :filter="(treeFilter as any)"
+        :nodeProps="(treeNodeProps as any)"
+        :renderLabel="(renderLabel as any)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/plus/snapshot/snapshot.ts b/src/views/plus/snapshot/snapshot.ts
new file mode 100644
index 0000000..1a17b94
--- /dev/null
+++ b/src/views/plus/snapshot/snapshot.ts
@@ -0,0 +1,455 @@
+import {
+  detectSnapshot,
+  exportSnapshotAsImageId,
+  exportSnapshotAsImportId,
+} from '@/utils/export';
+import { useArrayBufferObjectUrl } from '@/composables/useArrayBufferObjectUrl';
+import { gmOk } from '@/utils/gm';
+import { findNodesByXy, getAppInfo, listToTree } from '@/utils/node';
+import { toFixedNumber, toInteger } from '@/utils/others';
+import type { ResolvedSelector } from '@/utils/selector';
+import { screenshotStorage, snapshotStorage } from '@/utils/snapshot';
+import { useTask } from '@/utils/task';
+import type { QueryResult } from '@gkd-kit/selector';
+
+if (import.meta.hot) {
+  import.meta.hot.accept(() => {
+    location.reload();
+  });
+}
+
+const getRemoteImportId = async (id: number): Promise<number> => {
+  return fetch('https://detect.gkd.li/api/getImportId?id=' + id)
+    .then((r) => r.json())
+    .catch(() => 0);
+};
+
+export const useSnapshotStore = createSharedComposable(() => {
+  const route = useRoute();
+  const router = useRouter();
+  const {
+    snapshotViewedTime,
+    snapshotImportId,
+    snapshotImageId,
+    importSnapshotId,
+    settingsStore,
+  } = useStorageStore();
+  const randomizeFocusColor = () => {
+    const hue = Math.floor(Math.random() * 360);
+    const saturation = 58;
+    const lightness = 52;
+    const c = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);
+    const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+    const m = lightness / 100 - c / 2;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (hue < 60) {
+      r = c;
+      g = x;
+    } else if (hue < 120) {
+      r = x;
+      g = c;
+    } else if (hue < 180) {
+      g = c;
+      b = x;
+    } else if (hue < 240) {
+      g = x;
+      b = c;
+    } else if (hue < 300) {
+      r = x;
+      b = c;
+    } else {
+      r = c;
+      b = x;
+    }
+    const to255 = (v: number) => Math.round((v + m) * 255);
+    settingsStore.focusNodeColor = `rgb(${to255(r)}, ${to255(g)}, ${to255(b)})`;
+  };
+
+  const snapshotId = shallowRef<number>();
+  watchImmediate(
+    () => route.params.snapshotId,
+    (v) => {
+      snapshotId.value = toInteger(v);
+    },
+  );
+  watchImmediate(
+    () => snapshotId.value,
+    (v) => {
+      if (v && settingsStore.randomFocusNodeColorOnOpen) {
+        randomizeFocusColor();
+      }
+    },
+  );
+  const importId = computed(() => {
+    if (snapshotId.value) return snapshotImportId[snapshotId.value];
+    return undefined;
+  });
+  const imageId = computed(() => {
+    if (snapshotId.value) return snapshotImageId[snapshotId.value];
+    return undefined;
+  });
+  const snapshot = shallowRef<Snapshot>();
+  watchEffect(() => {
+    if (snapshot.value) {
+      document.title =
+        '快照-' + (getAppInfo(snapshot.value).name || snapshot.value.appId);
+    }
+  });
+  const screenshot = shallowRef<ArrayBuffer>();
+  const { url: screenshotUrl } = useArrayBufferObjectUrl(screenshot);
+  const maskedScreenshotUrl = shallowRef<string>();
+  const showRegenerateTip = shallowRef(false);
+  const revokeMaskedScreenshotUrl = () => {
+    if (maskedScreenshotUrl.value?.startsWith('blob:')) {
+      URL.revokeObjectURL(maskedScreenshotUrl.value);
+    }
+  };
+  const resetBlurredScreenshot = () => {
+    revokeMaskedScreenshotUrl();
+    maskedScreenshotUrl.value = undefined;
+    showRegenerateTip.value = false;
+  };
+  const invalidateShareLinks = () => {
+    if (!snapshotId.value) return;
+    const sid = snapshotId.value;
+    Object.entries(importSnapshotId).forEach(([k, v]) => {
+      if (v === sid) delete importSnapshotId[k];
+    });
+    if (snapshotImageId[sid]) delete snapshotImageId[sid];
+    if (snapshotImportId[sid]) delete snapshotImportId[sid];
+  };
+  const applyBlurredScreenshot = async (url: string) => {
+    revokeMaskedScreenshotUrl();
+    maskedScreenshotUrl.value = url;
+    if (snapshotId.value) {
+      try {
+        const editedBuffer = await fetch(url).then((r) => r.arrayBuffer());
+        await screenshotStorage.setItem(snapshotId.value, editedBuffer);
+        screenshot.value = editedBuffer;
+        // 持久化成功后切回底层截图，避免临时 URL 生命周期问题
+        resetBlurredScreenshot();
+      } catch {
+        // 转存失败时，保留当前遮罩预览，至少保证用户可见结果
+      }
+    }
+    invalidateShareLinks();
+    showRegenerateTip.value = true;
+  };
+  const dismissRegenerateTip = () => {
+    showRegenerateTip.value = false;
+  };
+  const displayScreenshotUrl = computed(
+    () => maskedScreenshotUrl.value || screenshotUrl.value,
+  );
+  watch(
+    () => screenshotUrl.value,
+    () => {
+      resetBlurredScreenshot();
+    },
+  );
+  onScopeDispose(() => {
+    resetBlurredScreenshot();
+  });
+  const redirected = shallowRef(false);
+  const update = useTask(async (id: number | undefined) => {
+    redirected.value = false;
+    if (!id) {
+      snapshot.value = undefined;
+      screenshot.value = undefined;
+      return;
+    }
+    await Promise.all([
+      snapshotStorage.getItem(id).then((r) => {
+        snapshot.value = r || undefined;
+      }),
+      screenshotStorage.getItem(id).then((r) => {
+        screenshot.value = r || undefined;
+      }),
+    ]);
+    if (!snapshot.value) {
+      const remoteImportId =
+        snapshotImportId[id] || (await getRemoteImportId(id));
+      if (remoteImportId && Number.isSafeInteger(remoteImportId)) {
+        redirected.value = true;
+        router.replace({
+          path: '/i/' + remoteImportId,
+          query: route.query,
+        });
+        return;
+      }
+    }
+    if (snapshot.value?.id) {
+      snapshotViewedTime[snapshot.value.id] = Date.now();
+    }
+  });
+  const loading = computed(() => update.loading);
+  watchImmediate(() => snapshotId.value, update.invoke);
+  watchEffect(() => {
+    if (
+      importId.value &&
+      !importSnapshotId[importId.value] &&
+      snapshotId.value
+    ) {
+      fetch(
+        `https://detect.gkd.li/api/detectSnapshot?importId=` + importId.value,
+      );
+    }
+  });
+  const autoUpload = computed(() => {
+    return gmOk() && settingsStore.autoUploadImport;
+  });
+  watchEffect(() => {
+    if (autoUpload.value && snapshot.value && !imageId.value) {
+      exportSnapshotAsImageId(snapshot.value);
+    }
+    if (autoUpload.value && snapshot.value && !importId.value) {
+      exportSnapshotAsImportId(snapshot.value);
+    }
+    if (autoUpload.value && snapshot.value && importId.value) {
+      detectSnapshot(snapshot.value.id, importId.value);
+    }
+  });
+  const nodes = computed(() => {
+    if (snapshot.value) {
+      if (snapshot.value.nodes.length <= settingsStore.maxShowNodeSize) {
+        return structuredClone(snapshot.value.nodes);
+      } else {
+        return structuredClone(
+          snapshot.value.nodes.slice(0, settingsStore.maxShowNodeSize),
+        );
+      }
+    }
+    return [];
+  });
+  const rootNode = computed(() => {
+    if (nodes.value.length) {
+      return listToTree(nodes.value);
+    }
+    return undefined;
+  });
+  const missNodeSize = computed(() => {
+    if (snapshot.value) {
+      return snapshot.value.nodes.length - settingsStore.maxShowNodeSize;
+    }
+    return 0;
+  });
+  const focusNode = shallowRef<RawNode>();
+  const focusTime = shallowRef(0);
+  const focusPosition = shallowRef<Position>();
+  const overlapNodes = shallowRef<RawNode[]>();
+  const updateFocusNode = async (node: RawNode) => {
+    focusNode.value = node;
+    focusTime.value = Date.now();
+    await nextTick();
+    if (overlapNodes.value && !overlapNodes.value.includes(node)) {
+      focusPosition.value = undefined;
+      overlapNodes.value = undefined;
+    }
+  };
+  watchEffect(() => {
+    if (rootNode.value) {
+      updateFocusNode(rootNode.value);
+    }
+  });
+  const updatePosition = (position: Position) => {
+    focusPosition.value = position;
+    const resultNodes = findNodesByXy(nodes.value, focusPosition.value);
+    if (resultNodes.length) {
+      updateFocusNode(resultNodes[0]);
+    }
+    if (resultNodes.length > 1) {
+      overlapNodes.value = resultNodes;
+    } else {
+      overlapNodes.value = undefined;
+    }
+  };
+
+  const trackShow = shallowRef(false);
+  const trackData = shallowRef<TrackCardProps>();
+  const blurEditorShow = shallowRef(false);
+  const openBlurEditor = () => {
+    if (!displayScreenshotUrl.value) return;
+    blurEditorShow.value = true;
+  };
+  const closeBlurEditor = () => {
+    blurEditorShow.value = false;
+  };
+  const showTrack = (
+    selector: ResolvedSelector,
+    result: QueryResult<RawNode>,
+  ) => {
+    trackShow.value = true;
+    trackData.value = {
+      selector,
+      nodes: nodes.value,
+      queryResult: result,
+    };
+  };
+
+  return {
+    snapshotId,
+    snapshot,
+    rootNode,
+    screenshotUrl,
+    maskedScreenshotUrl,
+    displayScreenshotUrl,
+    showRegenerateTip,
+    loading,
+    redirected,
+    importId,
+    imageId,
+    focusNode,
+    updateFocusNode,
+    focusTime,
+    overlapNodes,
+    missNodeSize,
+    focusPosition,
+    updatePosition,
+    trackData,
+    trackShow,
+    showTrack,
+    blurEditorShow,
+    openBlurEditor,
+    closeBlurEditor,
+    applyBlurredScreenshot,
+    resetBlurredScreenshot,
+    dismissRegenerateTip,
+  };
+});
+
+export const useSharedSnapshotHoverImg = createSharedComposable(() => {
+  const { updatePosition, focusNode } = useSnapshotStore();
+
+  const imgRef = shallowRef<HTMLImageElement>();
+  const imgBounding = useElementBounding(imgRef);
+  const imgLoadTime = shallowRef(false);
+
+  const clickImg = (ev: MouseEvent) => {
+    const img = imgRef.value;
+    if (!img) {
+      return;
+    }
+
+    const imgRect = img.getBoundingClientRect();
+
+    const innerHeight = (imgRect.width / img.naturalWidth) * img.naturalHeight;
+    const offsetTop = (imgRect.height - innerHeight) / 2;
+
+    const x = ((ev.clientX - imgRect.left) / imgRect.width) * img.naturalWidth;
+    const y =
+      ((ev.clientY - imgRect.top - offsetTop) / innerHeight) *
+      img.naturalHeight;
+
+    updatePosition({ x, y });
+  };
+
+  const percent = (n: number) => {
+    return `${n * 100}%`;
+  };
+
+  const imgSize = useElementSize(imgRef);
+
+  const positionStyle = computed(() => {
+    const img = imgRef.value;
+
+    const attr = focusNode.value?.attr;
+    if (!focusNode.value || !img || !attr || !imgLoadTime.value) {
+      return ``;
+    }
+    const imgWidth = imgSize.width.value;
+    const imgHeight = imgSize.height.value;
+    const innerHeight = (imgWidth / img.naturalWidth) * img.naturalHeight;
+    return {
+      left: `calc(${percent(attr.left / img.naturalWidth)} - 2px)`,
+      width: `calc(${percent(
+        (attr.right - attr.left) / img.naturalWidth,
+      )} + 2px)`,
+
+      top: `calc(${percent(
+        ((attr.top / img.naturalHeight) * innerHeight +
+          (imgHeight - innerHeight) / 2) /
+          imgHeight,
+      )} - 2px)`,
+      height: `calc(${percent(
+        (((attr.bottom - attr.top) / img.naturalHeight) * innerHeight) /
+          imgHeight,
+      )} + 2px)`,
+    };
+  });
+  const imgHover = shallowRef(false);
+  const hoverPosition = shallowRef({ ox: 0, oy: 0 });
+  const boxHoverPosition = computed(() => {
+    const attr = focusNode.value?.attr;
+    if (!attr) {
+      return;
+    }
+    const { ox, oy } = hoverPosition.value;
+    return {
+      left: ox - attr.left,
+      right: attr.right - ox,
+      top: oy - attr.top,
+      bottom: attr.bottom - oy,
+    };
+  });
+  const boxHoverPerPosition = computed(() => {
+    const attr = focusNode.value?.attr;
+    if (!attr || !boxHoverPosition.value) {
+      return;
+    }
+    if (attr.width <= 0 || attr.height <= 0) {
+      return;
+    }
+    const { bottom, left, right, top } = boxHoverPosition.value;
+    return {
+      left: toFixedNumber(left / (right + left), 3),
+      right: toFixedNumber(right / (right + left), 3),
+      top: toFixedNumber(top / (top + bottom), 3),
+      bottom: toFixedNumber(bottom / (top + bottom), 3),
+    };
+  });
+  const hoverBgImgWidth = 1000;
+  const hoverPositionStyle = shallowRef({
+    left: '0',
+    top: '0',
+    width: hoverBgImgWidth + 'px',
+  });
+
+  const imgMove = (ev: MouseEvent) => {
+    const img = imgRef.value;
+    if (!img) return;
+    const imgRect = img.getBoundingClientRect();
+
+    const innerHeight = (imgRect.width / img.naturalWidth) * img.naturalHeight;
+    const offsetTop = (imgRect.height - innerHeight) / 2;
+
+    const ox = ((ev.clientX - imgRect.left) / imgRect.width) * img.naturalWidth;
+    const oy =
+      ((ev.clientY - imgRect.top - offsetTop) / innerHeight) *
+      img.naturalHeight;
+    hoverPosition.value = { ox, oy };
+    hoverPositionStyle.value = {
+      left:
+        (-(ox - 0.1 * img.naturalWidth) / img.naturalWidth) * hoverBgImgWidth +
+        'px',
+      top:
+        (-(oy - 0.1 * img.naturalWidth) / img.naturalWidth) * hoverBgImgWidth +
+        'px',
+      width: hoverBgImgWidth + 'px',
+    };
+  };
+  return {
+    imgRef,
+    imgBounding,
+    clickImg,
+    positionStyle,
+    imgHover,
+    imgMove,
+    hoverPositionStyle,
+    boxHoverPerPosition,
+    imgLoadTime,
+    hoverPosition,
+    boxHoverPosition,
+  };
+});
diff --git a/src/views/snapshot/SearchCard.vue b/src/views/snapshot/SearchCard.vue
index 3e18aa6..d8be1e3 100644
--- a/src/views/snapshot/SearchCard.vue
+++ b/src/views/snapshot/SearchCard.vue
@@ -37,7 +37,11 @@ const searchText = shallowRef(``);
 
 const selectorResults = shallowReactive<SearchResult[]>([]);
 const expandedKeys = shallowRef<number[]>([]);
-const searchSelector = (text: string) => {
+const searchSelector = (text: string, skipDuplicateCheck: boolean = false) => {
+  if (!rootNode.value) {
+    message.error('当前无可用节点树, 请尝试刷新页面');
+    return;
+  }
   const selector = errorWrap(
     () => parseSelector(text),
     (e) => {
@@ -51,6 +55,7 @@ const searchSelector = (text: string) => {
     },
   );
   if (
+    !skipDuplicateCheck &&
     selectorResults.find(
       (s) =>
         typeof s.selector == 'object' &&
@@ -134,12 +139,35 @@ const searchBySelector = errorTry(() => {
 onMounted(async () => {
   await wasmLoadTask;
   let count = 0;
-  if (route.query.gkd) {
-    count += searchSelector(base64url.decode(route.query.gkd as string)) || 0;
+
+  const toArray = (param: any): string[] => {
+    if (Array.isArray(param)) {
+      return param.filter((item) => typeof item === 'string');
+    }
+    if (typeof param === 'string') {
+      return [param];
+    }
+    return [];
+  };
+
+  const gkdParams = toArray(route.query.gkd);
+  const uniqueGkdParams = [...new Set(gkdParams)];
+  for (const item of uniqueGkdParams) {
+    try {
+      const decoded = base64url.decode(item);
+      count += searchSelector(decoded, true) || 0;
+    } catch (e) {
+      // 忽略非法 Base64
+      console.warn('Invalid gkd parameter:', item, e);
+    }
   }
-  if (route.query.str) {
-    count += searchString(route.query.str as string) || 0;
+
+  const strParams = toArray(route.query.str);
+  const uniqueStrParams = [...new Set(strParams)];
+  for (const item of uniqueStrParams) {
+    count += searchString(item) || 0;
   }
+
   if (count > 0) {
     refreshExpandedKeys();
   }
diff --git a/src/views/snapshot/SnapshotPage.vue b/src/views/snapshot/SnapshotPage.vue
index 7f98260..30dab83 100644
--- a/src/views/snapshot/SnapshotPage.vue
+++ b/src/views/snapshot/SnapshotPage.vue
@@ -31,123 +31,174 @@ const clickSettings = () => {
 </script>
 <template>
   <template v-if="snapshot && rootNode">
-    <div page-size flex gap-5px>
-      <div
-        w-40px
-        py-12px
-        flex
-        flex-col
-        items-center
-        gap-16px
-        class="[--svg-h:24px]"
+    <div page-size flex gap-5px class="snapshot-page">
+      <slot
+        name="sidebar"
+        :searchShow="searchShow"
+        :ruleShow="ruleShow"
+        :attrShow="attrShow"
+        :toggleSearch="() => (searchShow = !searchShow)"
+        :toggleRule="() => (ruleShow = !ruleShow)"
+        :toggleAttr="() => (attrShow = !attrShow)"
+        :openSettings="clickSettings"
       >
-        <NTooltip placement="right">
-          <template #trigger>
-            <NButton text>
-              <RouterLink to="/">
-                <SvgIcon name="home" />
-              </RouterLink>
-            </NButton>
-          </template>
-          回到首页
-        </NTooltip>
-        <NTooltip placement="right">
-          <template #trigger>
-            <NButton text @click="clickSettings">
-              <SvgIcon name="settings" />
-            </NButton>
-          </template>
-          设置
-        </NTooltip>
-        <div />
-        <NTooltip placement="right">
-          <template #trigger>
-            <NButton text @click="searchShow = !searchShow">
-              <SvgIcon name="search-list" />
-            </NButton>
-          </template>
-          搜索面板
-        </NTooltip>
-        <NTooltip placement="right">
-          <template #trigger>
-            <NButton text @click="attrShow = !attrShow">
-              <SvgIcon name="prop" />
-            </NButton>
-          </template>
-          属性面板
-        </NTooltip>
-        <NTooltip placement="right">
-          <template #trigger>
-            <NButton text @click="ruleShow = !ruleShow">
-              <SvgIcon name="test" />
-            </NButton>
-          </template>
-          测试规则
-        </NTooltip>
-        <div />
-        <NTooltip placement="right">
-          <template #trigger>
-            <a
-              flex
-              justify-center
-              href="https://github.com/orgs/gkd-kit/discussions"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+        <div
+          w-40px
+          py-12px
+          flex
+          flex-col
+          items-center
+          gap-16px
+          class="snapshot-sidebar [--svg-h:24px]"
+        >
+          <NTooltip placement="right">
+            <template #trigger>
               <NButton text>
-                <SvgIcon name="discussion" />
+                <RouterLink to="/">
+                  <SvgIcon name="home" />
+                </RouterLink>
               </NButton>
-            </a>
-          </template>
-          讨论交流
-        </NTooltip>
-        <NTooltip placement="right">
-          <template #trigger>
-            <a
-              flex
-              justify-center
-              href="https://gkd.li/guide/snapshot#share-note"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <NButton text>
-                <SvgIcon name="warn" />
+            </template>
+            回到首页
+          </NTooltip>
+          <NTooltip placement="right">
+            <template #trigger>
+              <NButton text @click="clickSettings">
+                <SvgIcon name="settings" />
+              </NButton>
+            </template>
+            设置
+          </NTooltip>
+          <div />
+          <NTooltip placement="right">
+            <template #trigger>
+              <NButton text @click="searchShow = !searchShow">
+                <SvgIcon name="search-list" />
+              </NButton>
+            </template>
+            搜索面板
+          </NTooltip>
+          <NTooltip placement="right">
+            <template #trigger>
+              <NButton text @click="attrShow = !attrShow">
+                <SvgIcon name="prop" />
               </NButton>
-            </a>
-          </template>
-          分享须知
-        </NTooltip>
-      </div>
-      <ScreenshotCard />
-      <WindowCard class="flex-1" />
+            </template>
+            属性面板
+          </NTooltip>
+          <NTooltip placement="right">
+            <template #trigger>
+              <NButton text @click="ruleShow = !ruleShow">
+                <SvgIcon name="test" />
+              </NButton>
+            </template>
+            测试规则
+          </NTooltip>
+          <div />
+          <NTooltip placement="right">
+            <template #trigger>
+              <a
+                flex
+                justify-center
+                href="https://github.com/orgs/gkd-kit/discussions"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <NButton text>
+                  <SvgIcon name="discussion" />
+                </NButton>
+              </a>
+            </template>
+            讨论交流
+          </NTooltip>
+          <NTooltip placement="right">
+            <template #trigger>
+              <a
+                flex
+                justify-center
+                href="https://gkd.li/guide/snapshot#share-note"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <NButton text>
+                  <SvgIcon name="warn" />
+                </NButton>
+              </a>
+            </template>
+            分享须知
+          </NTooltip>
+        </div>
+      </slot>
+      <slot name="screenshot-card">
+        <ScreenshotCard />
+      </slot>
+      <slot name="window-card">
+        <WindowCard class="flex-1" />
+      </slot>
     </div>
 
-    <SearchCard :show="searchShow" @updateShow="searchShow = $event" />
-    <RuleCard :show="ruleShow" @updateShow="ruleShow = $event" />
-    <AttrCard :show="attrShow" @updateShow="attrShow = $event" />
-    <OverlapCard />
-    <FullScreenDialog v-model:show="trackShow" @closed="trackData = undefined">
-      <TrackCard
-        v-if="trackData"
-        class="bg-white"
-        v-bind="trackData"
-        @close="trackShow = false"
-      />
-    </FullScreenDialog>
+    <slot
+      name="search-card"
+      :show="searchShow"
+      :updateShow="(v: boolean) => (searchShow = v)"
+    >
+      <SearchCard :show="searchShow" @updateShow="searchShow = $event" />
+    </slot>
+    <slot
+      name="rule-card"
+      :show="ruleShow"
+      :updateShow="(v: boolean) => (ruleShow = v)"
+    >
+      <RuleCard :show="ruleShow" @updateShow="ruleShow = $event" />
+    </slot>
+    <slot
+      name="attr-card"
+      :show="attrShow"
+      :updateShow="(v: boolean) => (attrShow = v)"
+    >
+      <AttrCard :show="attrShow" @updateShow="attrShow = $event" />
+    </slot>
+    <slot name="overlap-card">
+      <OverlapCard />
+    </slot>
+    <slot
+      name="track-dialog"
+      :trackShow="trackShow"
+      :trackData="trackData"
+      :closeTrack="() => (trackShow = false)"
+      :clearTrack="() => (trackData = undefined)"
+    >
+      <FullScreenDialog
+        v-model:show="trackShow"
+        @closed="trackData = undefined"
+      >
+        <TrackCard
+          v-if="trackData"
+          class="bg-white"
+          v-bind="trackData"
+          @close="trackShow = false"
+        />
+      </FullScreenDialog>
+    </slot>
+    <slot name="extra-modals" />
   </template>
-  <div v-else-if="!loading && !redirected" page-size flex flex-col items-center>
-    <div mt-160px>
+  <div
+    v-else-if="!loading && !redirected"
+    page-size
+    pt-80px
+    flex
+    flex-col
+    items-center
+    justify-center
+  >
+    <div mb-8px>
       <span>快照数据缺失，</span>
       <a
         href="https://gkd.li/guide/snapshot#share-note"
         target="_blank"
         referrerpolicy="no-referrer"
-        color-blue
-        transition-colors
-        hover="color-[rgb(from_currentColor_r_g_b_/_50%)]"
+        >分享须知</a
       >
-        查看分享须知
-      </a>
     </div>
   </div>
 </template>
diff --git a/src/views/snapshot/WindowCard.vue b/src/views/snapshot/WindowCard.vue
index 482832d..747008d 100644
--- a/src/views/snapshot/WindowCard.vue
+++ b/src/views/snapshot/WindowCard.vue
@@ -1,4 +1,5 @@
 <script setup lang="tsx">
+// ... 保持 import 不变 ...
 import ActionCard from '@/components/ActionCard.vue';
 import GapList from '@/components/GapList';
 import { message } from '@/utils/discrete';
@@ -11,11 +12,17 @@ import {
 } from '@/utils/node';
 import { copy, delay } from '@/utils/others';
 import type { TreeInst } from 'naive-ui';
-import type { HTMLAttributes, ShallowRef } from 'vue';
+import type { HTMLAttributes, ShallowRef, VNode } from 'vue';
 import { useSnapshotStore } from './snapshot';
 
-const router = useRouter();
+const slots = defineSlots<{
+  renderLabel?: (props: {
+    option: RawNode;
+    label: string | VNode;
+  }) => VNode | string;
+}>();
 
+const router = useRouter();
 const snapshotStore = useSnapshotStore();
 const { updateFocusNode, focusNode, focusTime } = snapshotStore;
 const snapshot = snapshotStore.snapshot as ShallowRef<Snapshot>;
@@ -24,7 +31,9 @@ const rootNode = snapshotStore.rootNode as ShallowRef<RawNode>;
 let lastClickId = Number.NaN;
 const expandedKeys = shallowRef<number[]>([]);
 const selectedKeys = shallowRef<number[]>([]);
-const treeContainer = useTemplateRef('treeContainerRef');
+const treeRef = shallowRef<TreeInst>();
+
+// --- 逻辑部分保持现状，已足够健壮 ---
 watch([() => focusNode.value, () => focusTime.value], async () => {
   if (!focusNode.value) return;
   const key = focusNode.value.id;
@@ -32,30 +41,15 @@ watch([() => focusNode.value, () => focusTime.value], async () => {
     await delay(300);
     if (key === focusNode.value?.id) {
       if (lastClickId === key) {
-        // 当点击节点树中的节点时, 不滚动
         lastClickId = Number.NaN;
         return;
       }
       selectedKeys.value = [key];
-      if (!treeContainer.value) return;
-      const nodeRef = treeContainer.value.querySelector(
-        `[data-node-id="${key}"]`,
-      );
-      if (nodeRef) {
-        nodeRef.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-        });
-      } else {
-        await delay(300);
-        treeRef.value?.scrollTo({ key, behavior: 'smooth', debounce: true });
-      }
+      treeRef.value?.scrollTo({ key, behavior: 'smooth', debounce: true });
     }
   });
   let parent = focusNode.value.parent;
-  if (!parent) {
-    return;
-  }
+  if (!parent) return;
   const s = new Set(expandedKeys.value);
   while (parent) {
     s.add(parent.id);
@@ -64,17 +58,14 @@ watch([() => focusNode.value, () => focusTime.value], async () => {
   if (
     s.size == expandedKeys.value.length &&
     expandedKeys.value.every((v) => s.has(v))
-  ) {
+  )
     return;
-  }
   expandedKeys.value = [...s];
 });
 
-const treeRef = shallowRef<TreeInst>();
+const treeFilter = (pattern: string, node: RawNode) =>
+  node.id === focusNode.value?.id;
 
-const treeFilter = (pattern: string, node: RawNode) => {
-  return node.id === focusNode.value?.id;
-};
 const treeNodeProps = (info: {
   option: RawNode;
 }): HTMLAttributes & Record<string, unknown> => {
@@ -84,55 +75,54 @@ const treeNodeProps = (info: {
       lastClickId = info.option.id;
       updateFocusNode(info.option);
     },
-    style: {
-      '--n-node-text-color': style.color,
-      ...style,
-    },
+    style: { '--n-node-text-color': style.color, ...style },
     class: 'whitespace-nowrap',
     'data-node-id': String(info.option.id),
   };
 };
 
-const renderLabel = (info: {
-  option: RawNode;
-  checked: boolean;
-  selected: boolean;
-}) => {
-  return getNodeLabel(info.option);
+const renderLabel = (info: { option: RawNode }) => {
+  const label = getNodeLabel(info.option);
+  if (slots.renderLabel)
+    return slots.renderLabel({ option: info.option, label });
+  return label;
 };
 
+// --- 计算属性优化：提取 app 为内部变量，减少重复计算 ---
+const app = computed(() =>
+  snapshot.value ? getAppInfo(snapshot.value) : null,
+);
+
 const deviceName = computed(() => {
-  return `${getDevice(snapshot.value).manufacturer} Android ${getDevice(snapshot.value).release || ``}`;
+  if (!snapshot.value) return '';
+  const device = getDevice(snapshot.value);
+  return `${device.manufacturer} Android ${device.release || ''}`;
 });
 
-const isSystem = computed(() => {
-  return getAppInfo(snapshot.value).isSystem;
-});
 const activityId = computed(() => {
-  const v = snapshot.value.activityId;
-  const appId = snapshot.value.appId;
+  if (!snapshot.value) return '';
+  const { activityId: v, appId } = snapshot.value;
   if (!v || !appId) return '';
-  if (v.startsWith(appId) && v[appId.length] === '.') {
-    return v.substring(appId.length);
-  }
-  return v;
+  return v.startsWith(appId) && v[appId.length] === '.'
+    ? v.substring(appId.length)
+    : v;
 });
 
-const onDelete = async () => {
-  message.success(`删除成功,即将回到首页`);
-  await delay(2000);
-  router.replace({
-    path: `/`,
-  });
-};
 const gkdVersionName = computed(() => {
+  if (!snapshot.value) return undefined;
   const v = getGkdAppInfo(snapshot.value).versionName;
   return v ? `GKD@${v}` : undefined;
 });
+
+const onDelete = async () => {
+  message.success(`删除成功,即将回到首页`);
+  await delay(2000);
+  router.replace({ path: `/` });
+};
 </script>
 
 <template>
-  <div flex flex-col overflow-hidden>
+  <div v-if="snapshot" flex flex-col overflow-hidden>
     <div flex items-center px-8px>
       <GapList class="flex flex-wrap items-center gap-8px gkd_code">
         <template #gap>
@@ -149,11 +139,7 @@ const gkdVersionName = computed(() => {
 
         <NTooltip>
           <template #trigger>
-            <div
-              :class="{
-                'opacity-50': !gkdVersionName,
-              }"
-            >
+            <div :class="{ 'opacity-50': !gkdVersionName }">
               {{ gkdVersionName || 'null' }}
             </div>
           </template>
@@ -161,16 +147,21 @@ const gkdVersionName = computed(() => {
         </NTooltip>
 
         <div flex items-center gap-2px max-w-120px>
-          <NTooltip v-if="isSystem">
+          <NTooltip v-if="app?.isSystem">
             <template #trigger>
-              <SvgIcon name="system" />
+              <SvgIcon
+                name="system"
+                style="--svg-h: 16px; --svg-w: 16px"
+                class="text-yellow-600"
+              />
             </template>
-            {{ `${getAppInfo(snapshot).name} 是一个系统应用` }}
+            {{ `${app.name} 是一个系统应用` }}
           </NTooltip>
+
           <NTooltip>
             <template #trigger>
-              <div @click="copy(getAppInfo(snapshot).name)">
-                {{ getAppInfo(snapshot).name }}
+              <div @click="copy(app?.name || '')">
+                {{ app?.name || '-' }}
               </div>
             </template>
             应用名称
@@ -179,8 +170,8 @@ const gkdVersionName = computed(() => {
 
         <NTooltip>
           <template #trigger>
-            <div @click="copy(getAppInfo(snapshot).versionName)">
-              {{ getAppInfo(snapshot).versionName }}
+            <div @click="copy(app?.versionName || '')">
+              {{ app?.versionName || '-' }}
             </div>
           </template>
           版本名称
@@ -188,8 +179,8 @@ const gkdVersionName = computed(() => {
 
         <NTooltip>
           <template #trigger>
-            <div @click="copy(getAppInfo(snapshot).versionCode.toString())">
-              {{ getAppInfo(snapshot).versionCode }}
+            <div @click="copy(app?.versionCode?.toString() || '')">
+              {{ app?.versionCode || '-' }}
             </div>
           </template>
           版本代码
@@ -207,9 +198,7 @@ const gkdVersionName = computed(() => {
         <NTooltip>
           <template #trigger>
             <div
-              :class="{
-                'opacity-50': !activityId,
-              }"
+              :class="{ 'opacity-50': !activityId }"
               @click="copy(activityId)"
             >
               {{ activityId || 'null' }}
@@ -218,6 +207,7 @@ const gkdVersionName = computed(() => {
           界面ID
         </NTooltip>
       </GapList>
+
       <div flex-1 />
       <ActionCard
         class="ml-8px"
@@ -226,9 +216,11 @@ const gkdVersionName = computed(() => {
         @delete="onDelete"
       />
     </div>
+
     <div h-1px mt-4px bg="#efeff5" />
-    <div ref="treeContainerRef" flex-1 min-h-0>
+    <div flex-1 min-h-0>
       <NTree
+        v-if="rootNode"
         ref="treeRef"
         v-model:expandedKeys="expandedKeys"
         v-model:selectedKeys="selectedKeys"
@@ -244,4 +236,7 @@ const gkdVersionName = computed(() => {
       />
     </div>
   </div>
+  <div v-else flex-1 flex items-center justify-center>
+    <NEmpty description="加载中..." />
+  </div>
 </template>
diff --git a/src/views/snapshot/snapshot.ts b/src/views/snapshot/snapshot.ts
index 6ff1249..6c1ca6a 100644
--- a/src/views/snapshot/snapshot.ts
+++ b/src/views/snapshot/snapshot.ts
@@ -3,6 +3,7 @@ import {
   exportSnapshotAsImageId,
   exportSnapshotAsImportId,
 } from '@/utils/export';
+import { useArrayBufferObjectUrl } from '@/composables/useArrayBufferObjectUrl';
 import { gmOk } from '@/utils/gm';
 import { findNodesByXy, getAppInfo, listToTree } from '@/utils/node';
 import { toFixedNumber, toInteger } from '@/utils/others';
@@ -50,16 +51,7 @@ export const useSnapshotStore = createSharedComposable(() => {
     }
   });
   const screenshot = shallowRef<ArrayBuffer>();
-  const screenshotUrl = computed(() => {
-    if (screenshot.value) {
-      return URL.createObjectURL(
-        new Blob([screenshot.value], {
-          type: 'image/png',
-        }),
-      );
-    }
-    return undefined;
-  });
+  const { url: screenshotUrl } = useArrayBufferObjectUrl(screenshot);
   const redirected = shallowRef(false);
   const update = useTask(async (id: number | undefined) => {
     redirected.value = false;