@veltra/desktop 1.0.9 → 1.0.11

package/dist/components/tree/use-tree-nodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tree-nodes.js","names":["TreeNode"],"sources":["../../../src/components/tree/use-tree-nodes.ts"],"sourcesContent":["import { Forest } from '@cat-kit/core'\nimport { computed, shallowRef, triggerRef, watch, type ShallowRef, type ComputedRef } from 'vue'\n\nimport type { TreeProps } from '../../types'\nimport { TreeNode } from './tree-node'\n\ninterface Options {\n  props: TreeProps\n}\n\ninterface UseTreeNodesReturned {\n  nodes: ShallowRef<TreeNode[]>\n  forest: ComputedRef<Forest<Record<string, unknown>, any>>\n  getFlattedNodes: () => void\n  nodeDict: ComputedRef<Map<string | number, TreeNode>>\n  /** 强制刷新 `nodes` 的订阅者（供字段级别变化但列表引用不变时手动触发）。 */\n  triggerNodes: () => void\n}\n\nexport function useTreeNodes(options: Options): UseTreeNodesReturned {\n  const { props } = options\n\n  // forest / nodeDict 保持为 shallowRef 而非 computed：\n  // - computed 会因为任一 prop 变化（尤其是内联 disabledNode 函数）而整棵重建，\n  //   丢失 expanded/checked/visible 等运行时状态；\n  // - 显式 watch 仅在真正影响结构的输入变化时才重建，行为可控、可测量。\n  const forestRef = shallowRef<Forest<Record<string, unknown>, any>>(\n    new Forest<Record<string, unknown>, any>({\n      data: [],\n      childrenKey: props.childrenKey ?? 'children'\n    })\n  )\n\n  const nodeDictRef = shallowRef<Map<string | number, TreeNode>>(new Map())\n\n  const nodes = shallowRef<TreeNode[]>([])\n\n  function buildForest(): Forest<Record<string, unknown>, any> {\n    const { disabledNode, expandAll = false, valueKey, labelKey } = props\n    const childrenKey = props.childrenKey ?? 'children'\n\n    function createNode(\n      data: Record<string, any>,\n      index: number,\n      depth: number,\n      parent?: TreeNode\n    ): TreeNode {\n      const node = new TreeNode({\n        data,\n        index,\n        depth,\n        parent,\n        valueKey: valueKey!,\n        labelKey: labelKey!\n      })\n      node.expanded = expandAll\n      return node\n    }\n\n    return new Forest<Record<string, unknown>, any>({\n      data: (props.data ?? []) as Record<string, unknown>[],\n      childrenKey,\n      createNode: disabledNode\n        ? (data, index, depth, _f, parent) => {\n            const node = createNode(data as Record<string, any>, index, depth, parent as TreeNode)\n            if (data) {\n              node.disabled = disabledNode(data as Record<string, any>, node) ?? false\n            }\n            return node\n          }\n        : (data, index, depth, _f, parent) =>\n            createNode(data as Record<string, any>, index, depth, parent as TreeNode)\n    })\n  }\n\n  function rebuildForest(): void {\n    const nextForest = buildForest()\n    const nextDict = new Map<string | number, TreeNode>()\n\n    // 构建森林的同时一次 DFS 同步填充字典，\n    // 避免旧版 “forest computed → nodeDict computed” 两次完整遍历。\n    nextForest.dfs((node) => {\n      nextDict.set(node.key, node)\n    })\n\n    forestRef.value = nextForest\n    nodeDictRef.value = nextDict\n\n    getFlattedNodes()\n  }\n\n  /** 按展开与可见性扁平化：仅一次 DFS。 */\n  function getFlattedNodes(): void {\n    const result: TreeNode[] = []\n    const roots = forestRef.value.roots as TreeNode[]\n\n    const stack: TreeNode[] = []\n    for (let i = roots.length - 1; i >= 0; i--) {\n      stack.push(roots[i]!)\n    }\n\n    while (stack.length) {\n      const node = stack.pop()!\n      if (!node.visible) continue\n      result.push(node)\n      if (node.expanded && node.children && node.children.length) {\n        for (let i = node.children.length - 1; i >= 0; i--) {\n          stack.push(node.children[i]!)\n        }\n      }\n    }\n\n    nodes.value = result\n  }\n\n  function triggerNodes(): void {\n    triggerRef(nodes)\n  }\n\n  watch(\n    [\n      () => props.data,\n      () => props.disabledNode,\n      () => props.childrenKey,\n      () => props.valueKey,\n      () => props.labelKey,\n      () => props.expandAll\n    ],\n    () => {\n      rebuildForest()\n    },\n    { immediate: true }\n  )\n\n  const forest = computed(() => forestRef.value)\n  const nodeDict = computed(() => nodeDictRef.value)\n\n  return { nodes, forest, getFlattedNodes, nodeDict, triggerNodes }\n}\n"],"mappings":";;;;AAmBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,UAAU;CAMlB,MAAM,YAAY,WAChB,IAAI,OAAqC;EACvC,MAAM,EAAE;EACR,aAAa,MAAM,eAAe;EACnC,CAAC,CACH;CAED,MAAM,cAAc,2BAA2C,IAAI,KAAK,CAAC;CAEzE,MAAM,QAAQ,WAAuB,EAAE,CAAC;CAExC,SAAS,cAAoD;EAC3D,MAAM,EAAE,cAAc,YAAY,OAAO,UAAU,aAAa;EAChE,MAAM,cAAc,MAAM,eAAe;EAEzC,SAAS,WACP,MACA,OACA,OACA,QACU;GACV,MAAM,OAAO,IAAIA,WAAS;IACxB;IACA;IACA;IACA;IACU;IACA;IACX,CAAC;AACF,QAAK,WAAW;AAChB,UAAO;;AAGT,SAAO,IAAI,OAAqC;GAC9C,MAAO,MAAM,QAAQ,EAAE;GACvB;GACA,YAAY,gBACP,MAAM,OAAO,OAAO,IAAI,WAAW;IAClC,MAAM,OAAO,WAAW,MAA6B,OAAO,OAAO,OAAmB;AACtF,QAAI,KACF,MAAK,WAAW,aAAa,MAA6B,KAAK,IAAI;AAErE,WAAO;QAER,MAAM,OAAO,OAAO,IAAI,WACvB,WAAW,MAA6B,OAAO,OAAO,OAAmB;GAChF,CAAC;;CAGJ,SAAS,gBAAsB;EAC7B,MAAM,aAAa,aAAa;EAChC,MAAM,2BAAW,IAAI,KAAgC;AAIrD,aAAW,KAAK,SAAS;AACvB,YAAS,IAAI,KAAK,KAAK,KAAK;IAC5B;AAEF,YAAU,QAAQ;AAClB,cAAY,QAAQ;AAEpB,mBAAiB;;;CAInB,SAAS,kBAAwB;EAC/B,MAAM,SAAqB,EAAE;EAC7B,MAAM,QAAQ,UAAU,MAAM;EAE9B,MAAM,QAAoB,EAAE;AAC5B,OAAK,IAAI,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,IACrC,OAAM,KAAK,MAAM,GAAI;AAGvB,SAAO,MAAM,QAAQ;GACnB,MAAM,OAAO,MAAM,KAAK;AACxB,OAAI,CAAC,KAAK,QAAS;AACnB,UAAO,KAAK,KAAK;AACjB,OAAI,KAAK,YAAY,KAAK,YAAY,KAAK,SAAS,OAClD,MAAK,IAAI,IAAI,KAAK,SAAS,SAAS,GAAG,KAAK,GAAG,IAC7C,OAAM,KAAK,KAAK,SAAS,GAAI;;AAKnC,QAAM,QAAQ;;CAGhB,SAAS,eAAqB;AAC5B,aAAW,MAAM;;AAGnB,OACE;QACQ,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;EACb,QACK;AACJ,iBAAe;IAEjB,EAAE,WAAW,MAAM,CACpB;AAKD,QAAO;EAAE;EAAO,QAHD,eAAe,UAAU,MAAM;EAGtB;EAAiB,UAFxB,eAAe,YAAY,MAAM;EAEC;EAAc"}
+{"version":3,"file":"use-tree-nodes.js","names":["TreeNode"],"sources":["../../../src/components/tree/use-tree-nodes.ts"],"sourcesContent":["import { Forest } from '@cat-kit/core'\nimport { computed, shallowRef, triggerRef, watch, type ShallowRef, type ComputedRef } from 'vue'\n\nimport type { TreeProps } from '../../types'\nimport { TreeNode } from './tree-node'\n\ninterface Options {\n  props: TreeProps\n}\n\ninterface UseTreeNodesReturned {\n  nodes: ShallowRef<TreeNode[]>\n  forest: ComputedRef<Forest<Record<string, unknown>, any>>\n  getFlattedNodes: () => void\n  nodeDict: ComputedRef<Map<string | number, TreeNode>>\n  /** 强制刷新 `nodes` 的订阅者（供字段级别变化但列表引用不变时手动触发）。 */\n  triggerNodes: () => void\n}\n\nexport function useTreeNodes(options: Options): UseTreeNodesReturned {\n  const { props } = options\n\n  // forest / nodeDict 保持为 shallowRef 而非 computed：\n  // - computed 会因为任一 prop 变化（尤其是内联 disabledNode 函数）而整棵重建，\n  //   丢失 expanded/checked/visible 等运行时状态；\n  // - 显式 watch 仅在真正影响结构的输入变化时才重建，行为可控、可测量。\n  const forestRef = shallowRef<Forest<Record<string, unknown>, any>>(\n    new Forest<Record<string, unknown>, any>({\n      data: [],\n      childrenKey: props.childrenKey ?? 'children'\n    })\n  )\n\n  const nodeDictRef = shallowRef<Map<string | number, TreeNode>>(new Map())\n\n  const nodes = shallowRef<TreeNode[]>([])\n\n  function buildForest(): Forest<Record<string, unknown>, any> {\n    const { disabledNode, expandAll = false, valueKey, labelKey } = props\n    const childrenKey = props.childrenKey ?? 'children'\n\n    function createNode(\n      data: Record<string, any>,\n      index: number,\n      depth: number,\n      parent?: TreeNode\n    ): TreeNode {\n      const node = new TreeNode({\n        data,\n        index,\n        depth,\n        parent,\n        valueKey: valueKey!,\n        labelKey: labelKey!\n      })\n      node.expanded = expandAll\n      return node\n    }\n\n    return new Forest<Record<string, unknown>, any>({\n      data: (props.data ?? []) as Record<string, unknown>[],\n      childrenKey,\n      createNode: disabledNode\n        ? (data, index, depth, _f, parent) => {\n            const node = createNode(data as Record<string, any>, index, depth, parent as TreeNode)\n            if (data) {\n              node.disabled = disabledNode(data as Record<string, any>, node) ?? false\n            }\n            return node\n          }\n        : (data, index, depth, _f, parent) =>\n            createNode(data as Record<string, any>, index, depth, parent as TreeNode)\n    })\n  }\n\n  function rebuildForest(): void {\n    const nextForest = buildForest()\n    const nextDict = new Map<string | number, TreeNode>()\n\n    // 构建森林的同时一次 DFS 同步填充字典，\n    // 避免旧版 “forest computed → nodeDict computed” 两次完整遍历。\n    nextForest.dfs((node) => {\n      nextDict.set(node.key, node)\n    })\n\n    forestRef.value = nextForest\n    nodeDictRef.value = nextDict\n\n    getFlattedNodes()\n  }\n\n  /** 按展开与可见性扁平化：仅一次 DFS。 */\n  function getFlattedNodes(): void {\n    const result: TreeNode[] = []\n    const roots = forestRef.value.roots as TreeNode[]\n\n    const stack: TreeNode[] = []\n    for (let i = roots.length - 1; i >= 0; i--) {\n      stack.push(roots[i]!)\n    }\n\n    while (stack.length) {\n      const node = stack.pop()!\n      if (!node.visible) continue\n      result.push(node)\n      if (node.expanded && node.children && node.children.length) {\n        for (let i = node.children.length - 1; i >= 0; i--) {\n          stack.push(node.children[i]!)\n        }\n      }\n    }\n\n    nodes.value = result\n  }\n\n  function triggerNodes(): void {\n    triggerRef(nodes)\n  }\n\n  watch(\n    [\n      () => props.data,\n      () => props.disabledNode,\n      () => props.childrenKey,\n      () => props.valueKey,\n      () => props.labelKey,\n      () => props.expandAll\n    ],\n    () => {\n      rebuildForest()\n    },\n    { immediate: true }\n  )\n\n  const forest = computed(() => forestRef.value)\n  const nodeDict = computed(() => nodeDictRef.value)\n\n  return { nodes, forest, getFlattedNodes, nodeDict, triggerNodes }\n}\n"],"mappings":";;;;AAmBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,UAAU;CAMlB,MAAM,YAAY,WAChB,IAAI,OAAqC;EACvC,MAAM,EAAE;EACR,aAAa,MAAM,eAAe;EACnC,CAAC,CACH;CAED,MAAM,cAAc,2BAA2C,IAAI,KAAK,CAAC;CAEzE,MAAM,QAAQ,WAAuB,EAAE,CAAC;CAExC,SAAS,cAAoD;EAC3D,MAAM,EAAE,cAAc,YAAY,OAAO,UAAU,aAAa;EAChE,MAAM,cAAc,MAAM,eAAe;EAEzC,SAAS,WACP,MACA,OACA,OACA,QACU;GACV,MAAM,OAAO,IAAIA,WAAS;IACxB;IACA;IACA;IACA;IACU;IACA;IACX,CAAC;AACF,QAAK,WAAW;AAChB,UAAO;;AAGT,SAAO,IAAI,OAAqC;GAC9C,MAAO,MAAM,QAAQ,EAAE;GACvB;GACA,YAAY,gBACP,MAAM,OAAO,OAAO,IAAI,WAAW;IAClC,MAAM,OAAO,WAAW,MAA6B,OAAO,OAAO,OAAmB;AACtF,QAAI,KACF,MAAK,WAAW,aAAa,MAA6B,KAAK,IAAI;AAErE,WAAO;QAER,MAAM,OAAO,OAAO,IAAI,WACvB,WAAW,MAA6B,OAAO,OAAO,OAAmB;GAChF,CAAC;;CAGJ,SAAS,gBAAsB;EAC7B,MAAM,aAAa,aAAa;EAChC,MAAM,2BAAW,IAAI,KAAgC;AAIrD,aAAW,KAAK,SAAS;AACvB,YAAS,IAAI,KAAK,KAAK,KAAK;IAC5B;AAEF,YAAU,QAAQ;AAClB,cAAY,QAAQ;AAEpB,mBAAiB;;;CAInB,SAAS,kBAAwB;EAC/B,MAAM,SAAqB,EAAE;EAC7B,MAAM,QAAQ,UAAU,MAAM;EAE9B,MAAM,QAAoB,EAAE;AAC5B,OAAK,IAAI,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,IACrC,OAAM,KAAK,MAAM,GAAI;AAGvB,SAAO,MAAM,QAAQ;GACnB,MAAM,OAAO,MAAM,KAAK;AACxB,OAAI,CAAC,KAAK,QAAS;AACnB,UAAO,KAAK,KAAK;AACjB,OAAI,KAAK,YAAY,KAAK,YAAY,KAAK,SAAS,OAClD,MAAK,IAAI,IAAI,KAAK,SAAS,SAAS,GAAG,KAAK,GAAG,IAC7C,OAAM,KAAK,KAAK,SAAS,GAAI;;AAKnC,QAAM,QAAQ;;CAGhB,SAAS,eAAqB;AAC5B,aAAW,MAAM;;AAGnB,OACE;QACQ,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;EACb,QACK;AACJ,iBAAe;IAEjB,EAAE,WAAW,MAAM,CACpB;AAKD,QAAO;EAAE;EAAO,QAHD,eAAe,UAAU,MAGlB;EAAE;EAAiB,UAFxB,eAAe,YAAY,MAEK;EAAE;EAAc"}

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -19,20 +19,20 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   change: (value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any;
   "update:text": (text?: string | undefined) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
   onClear?: (() => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
   onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
+  placeholder: string;
+  clearable: boolean;
   readonly: boolean;
   labelKey: string;
   valueKey: string;
-  placeholder: string;
-  clearable: boolean;
+  filterable: boolean;
   minWidth: string;
   expandAll: boolean;
-  filterable: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/watermark/watermark.vue.d.ts

@@ -7,8 +7,8 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<WatermarkProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<WatermarkProps> & Readonly<{}>, {
-  route: number;
   fontSize: number;
+  route: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "files": [
     "dist",
     "src"
@@ -25,13 +25,14 @@
     "check-types": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@cat-kit/core": "^1.1.1",
+    "@cat-kit/core": "^1.1.3",
     "@cat-kit/excel": "^1.0.1",
     "@codemirror/lang-java": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.41.1",
     "@embedpdf/core": "^2.14.1",
     "@embedpdf/engines": "^2.14.1",
@@ -47,22 +48,22 @@
     "@lexical/rich-text": "^0.43.0",
     "@lexical/selection": "^0.43.0",
     "@lexical/utils": "^0.43.0",
-    "@veltra/compositions": "1.0.9",
-    "@veltra/directives": "1.0.9",
-    "@veltra/icons": "1.0.9",
-    "@veltra/styles": "1.0.9",
-    "@veltra/utils": "1.0.9",
+    "@veltra/compositions": "1.0.11",
+    "@veltra/directives": "1.0.11",
+    "@veltra/icons": "1.0.11",
+    "@veltra/styles": "1.0.11",
+    "@veltra/utils": "1.0.11",
     "@visactor/vtable": "^1.26.0",
     "codemirror": "^6.0.2",
     "docx-preview": "^0.3.7",
     "lexical": "^0.43.0"
   },
   "peerDependencies": {
-    "@veltra/compositions": "1.0.9",
-    "@veltra/directives": "1.0.9",
-    "@veltra/icons": "1.0.9",
-    "@veltra/styles": "1.0.9",
-    "@veltra/utils": "1.0.9",
+    "@veltra/compositions": "1.0.11",
+    "@veltra/directives": "1.0.11",
+    "@veltra/icons": "1.0.11",
+    "@veltra/styles": "1.0.11",
+    "@veltra/utils": "1.0.11",
     "vue": "^3.5.33"
   }
 }

package/src/components/code-editor/code-editor.vue

@@ -6,6 +6,7 @@
 
 <script lang="ts" setup>
 import { EditorState } from '@codemirror/state'
+import { oneDark } from '@codemirror/theme-one-dark'
 import { tooltips } from '@codemirror/view'
 import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
 import { bem, zIndex } from '@veltra/utils'
@@ -56,6 +57,7 @@ async function renderEditor() {
 
   const extensions = [
     basicSetup,
+    oneDark,
     tooltips({
       parent: document.body
     }),

package/src/components/file-viewer/file-viewer.vue

@@ -20,15 +20,14 @@
                 v-for="f in normalizedFiles"
                 :key="f.id"
                 :class="[cls.e('item'), bem.is('active', f.id === activeId)]"
+                :title="f.name"
                 @click="activate(f.id)"
               >
-                <span :class="[cls.e('badge'), cls.em('badge', f.kind)]">
-                  {{ label(f.kind) }}
-                </span>
                 <span :class="cls.e('item-meta')">
                   <span :class="cls.e('item-name')" :title="f.name">{{ f.name }}</span>
                   <span :class="cls.e('item-size')">{{ formatBytes(f.size) }}</span>
                 </span>
+                <span :class="cls.e('item-kind')">{{ label(f.kind) }}</span>
               </li>
               <li v-if="!normalizedFiles.length" :class="cls.e('list-empty')">
                 <u-empty text="暂无文件" :size="32" />
@@ -42,27 +41,93 @@
                 <span v-if="activeFile" :class="[cls.e('badge'), cls.em('badge', activeFile.kind)]">
                   {{ label(activeFile.kind) }}
                 </span>
-                <span :class="cls.e('stage-name')">
-                  {{ activeFile?.name ?? '—' }}
-                </span>
-                <span v-if="activeFile?.size" :class="cls.e('stage-sub')">
-                  {{ formatBytes(activeFile.size) }}
+                <span :class="cls.e('stage-copy')">
+                  <span :class="cls.e('stage-name')" :title="activeFile?.name">
+                    {{ activeFile?.name ?? '—' }}
+                  </span>
+                  <span v-if="activeFile" :class="cls.e('stage-sub')">
+                    <span>{{ activeIndexLabel }}</span>
+                    <span v-if="activeFile.size">{{ formatBytes(activeFile.size) }}</span>
+                  </span>
                 </span>
               </div>
               <div :class="cls.e('stage-actions')">
-                <button :class="cls.e('action')" :disabled="!hasPrev" type="button" @click="prev">
-                  上一个
-                </button>
-                <button :class="cls.e('action')" :disabled="!hasNext" type="button" @click="next">
-                  下一个
-                </button>
+                <span :class="cls.e('action-group')">
+                  <button
+                    :class="[cls.e('action'), cls.em('action', 'icon')]"
+                    :disabled="!hasPrev"
+                    type="button"
+                    aria-label="上一个"
+                    title="上一个"
+                    @click="prev"
+                  >
+                    <u-icon :size="15">
+                      <ArrowLeft />
+                    </u-icon>
+                  </button>
+                  <button
+                    :class="[cls.e('action'), cls.em('action', 'icon')]"
+                    :disabled="!hasNext"
+                    type="button"
+                    aria-label="下一个"
+                    title="下一个"
+                    @click="next"
+                  >
+                    <u-icon :size="15">
+                      <ArrowRight />
+                    </u-icon>
+                  </button>
+                </span>
+                <span v-if="isTransformable" :class="cls.e('action-group')">
+                  <button
+                    :class="[cls.e('action'), cls.em('action', 'icon')]"
+                    :disabled="zoomOutDisabled"
+                    type="button"
+                    aria-label="缩小"
+                    title="缩小"
+                    @click="zoomOut"
+                  >
+                    <u-icon :size="15">
+                      <ZoomOut />
+                    </u-icon>
+                  </button>
+                  <span :class="cls.e('zoom-value')">{{ zoomPercent }}</span>
+                  <button
+                    :class="[cls.e('action'), cls.em('action', 'icon')]"
+                    :disabled="zoomInDisabled"
+                    type="button"
+                    aria-label="放大"
+                    title="放大"
+                    @click="zoomIn"
+                  >
+                    <u-icon :size="15">
+                      <ZoomIn />
+                    </u-icon>
+                  </button>
+                  <button
+                    :class="[cls.e('action'), cls.em('action', 'icon')]"
+                    :disabled="isTransformReset"
+                    type="button"
+                    aria-label="重置视图"
+                    title="重置视图"
+                    @click="resetTransform"
+                  >
+                    <u-icon :size="15">
+                      <Refresh />
+                    </u-icon>
+                  </button>
+                </span>
                 <button
                   v-if="downloadable && activeFile"
-                  :class="[cls.e('action'), cls.em('action', 'primary')]"
+                  :class="[cls.e('action'), cls.em('action', 'primary'), cls.em('action', 'icon')]"
                   type="button"
+                  aria-label="下载"
+                  title="下载"
                   @click="download"
                 >
-                  下载
+                  <u-icon :size="15">
+                    <Download />
+                  </u-icon>
                 </button>
                 <button
                   v-if="isModal"
@@ -80,14 +145,30 @@
             </header>
             <div :class="cls.e('body')">
               <transition name="u-file-viewer-fade" mode="out-in">
-                <component
-                  :is="PreviewerMap[activeFile.kind]"
+                <div
                   v-if="activeFile"
                   :key="activeFile.id"
-                  :file="activeFile"
-                  :max-rows="sheetMaxRows"
-                  @error="handleChildError"
-                />
+                  :class="[
+                    cls.e('viewport'),
+                    bem.is('transformable', isTransformable),
+                    bem.is('pannable', canPan),
+                    bem.is('dragging', isDragging)
+                  ]"
+                  @pointerdown="handleViewportPointerDown"
+                  @pointermove="handleViewportPointerMove"
+                  @pointerup="handleViewportPointerEnd"
+                  @pointercancel="handleViewportPointerEnd"
+                  @dblclick="handleViewportDblclick"
+                >
+                  <component
+                    :is="PreviewerMap[activeFile.kind]"
+                    :file="activeFile"
+                    :max-rows="sheetMaxRows"
+                    :class="isTransformable ? cls.e('previewer') : undefined"
+                    :style="previewerStyle"
+                    @error="handleChildError"
+                  />
+                </div>
                 <div v-else :class="cls.e('empty')">
                   <u-empty text="暂无可预览文件" />
                 </div>
@@ -101,9 +182,26 @@
 </template>
 
 <script lang="ts" setup>
-import { Close } from '@veltra/icons/normal'
+import {
+  ArrowLeft,
+  ArrowRight,
+  Close,
+  Download,
+  Refresh,
+  ZoomIn,
+  ZoomOut
+} from '@veltra/icons/normal'
 import { bem, withUnit } from '@veltra/utils'
-import { computed, defineAsyncComponent, nextTick, onBeforeUnmount, shallowRef, watch } from 'vue'
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  watch
+} from 'vue'
+import type { CSSProperties } from 'vue'
 
 import type {
   _FileViewerExposed,
@@ -136,10 +234,29 @@ const emit = defineEmits<FileViewerEmits>()
 
 const cls = bem('file-viewer')
 
+const MIN_SCALE = 0.5
+const MAX_SCALE = 3
+const SCALE_STEP = 0.25
+const TRANSFORMABLE_KINDS = new Set<FileViewerKind>(['image', 'pdf', 'docx'])
+
 const activeId = defineModel<string | undefined>('modelValue', { default: undefined })
 const openModel = defineModel<boolean | undefined>('open', { default: undefined })
 
 const rootRef = shallowRef<HTMLDivElement>()
+const scale = ref(1)
+const offsetX = ref(0)
+const offsetY = ref(0)
+const isDragging = ref(false)
+
+let dragState:
+  | {
+      pointerId: number
+      startX: number
+      startY: number
+      originX: number
+      originY: number
+    }
+  | undefined
 
 const PreviewerMap: Record<FileViewerKind, ReturnType<typeof defineAsyncComponent>> = {
   image: defineAsyncComponent(() => import('./previewers/image-previewer.vue')),
@@ -185,6 +302,33 @@ const sidebarWidthCss = computed(() => {
 /** 是否启用模态模式：只要父组件显式传入 open（含 v-model:open），即进入模态 */
 const isModal = computed(() => openModel.value !== undefined)
 
+const activeIndexLabel = computed(() =>
+  activeIndex.value >= 0 ? `${activeIndex.value + 1} / ${normalizedFiles.value.length}` : ''
+)
+
+const isTransformable = computed(
+  () => !!activeFile.value && TRANSFORMABLE_KINDS.has(activeFile.value.kind)
+)
+
+const canPan = computed(() => isTransformable.value && scale.value > 1)
+
+const zoomPercent = computed(() => `${Math.round(scale.value * 100)}%`)
+
+const zoomInDisabled = computed(() => !isTransformable.value || scale.value >= MAX_SCALE)
+
+const zoomOutDisabled = computed(() => !isTransformable.value || scale.value <= MIN_SCALE)
+
+const isTransformReset = computed(
+  () => scale.value === 1 && offsetX.value === 0 && offsetY.value === 0
+)
+
+const previewerStyle = computed<CSSProperties | undefined>(() => {
+  if (!isTransformable.value) return undefined
+  return {
+    transform: `translate3d(${offsetX.value}px, ${offsetY.value}px, 0) scale(${scale.value})`
+  }
+})
+
 function label(kind: FileViewerKind): string {
   return FILE_VIEWER_KIND_LABEL[kind]
 }
@@ -210,6 +354,83 @@ function next() {
   if (target) activate(target.id)
 }
 
+function normalizeScale(value: number): number {
+  const clamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, value))
+  return Math.round(clamped * 100) / 100
+}
+
+function setScale(value: number) {
+  scale.value = normalizeScale(value)
+  if (scale.value <= 1) {
+    offsetX.value = 0
+    offsetY.value = 0
+  }
+}
+
+function zoomIn() {
+  if (!isTransformable.value) return
+  setScale(scale.value + SCALE_STEP)
+}
+
+function zoomOut() {
+  if (!isTransformable.value) return
+  setScale(scale.value - SCALE_STEP)
+}
+
+function resetTransform() {
+  scale.value = 1
+  offsetX.value = 0
+  offsetY.value = 0
+  dragState = undefined
+  isDragging.value = false
+}
+
+function isInteractiveTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  return !!target.closest('button, a, input, textarea, select, video, [contenteditable="true"]')
+}
+
+function handleViewportPointerDown(e: PointerEvent) {
+  if (!canPan.value || e.button !== 0 || isInteractiveTarget(e.target)) return
+
+  dragState = {
+    pointerId: e.pointerId,
+    startX: e.clientX,
+    startY: e.clientY,
+    originX: offsetX.value,
+    originY: offsetY.value
+  }
+  isDragging.value = true
+  const el = e.currentTarget as HTMLElement
+  el.setPointerCapture(e.pointerId)
+  e.preventDefault()
+}
+
+function handleViewportPointerMove(e: PointerEvent) {
+  if (!dragState || dragState.pointerId !== e.pointerId) return
+  offsetX.value = dragState.originX + e.clientX - dragState.startX
+  offsetY.value = dragState.originY + e.clientY - dragState.startY
+}
+
+function handleViewportPointerEnd(e: PointerEvent) {
+  if (!dragState || dragState.pointerId !== e.pointerId) return
+  const el = e.currentTarget as HTMLElement
+  if (el.hasPointerCapture(e.pointerId)) {
+    el.releasePointerCapture(e.pointerId)
+  }
+  dragState = undefined
+  isDragging.value = false
+}
+
+function handleViewportDblclick() {
+  if (!isTransformable.value) return
+  if (scale.value === 1) {
+    setScale(2)
+  } else {
+    resetTransform()
+  }
+}
+
 async function download() {
   if (!activeFile.value) return
   try {
@@ -257,6 +478,11 @@ watch(
   { immediate: true }
 )
 
+watch(
+  () => activeFile.value?.id,
+  () => resetTransform()
+)
+
 // 模态打开时：锁定 body 滚动 + 让容器获得焦点以便接收 ESC
 let previousBodyOverflow = ''
 let isBodyLocked = false

package/src/components/file-viewer/previewers/docx-previewer.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-scroll tag="div" :class="cls.e('docx')">
+  <u-scroll tag="div" :class="cls.e('docx')" v-bind="attrs">
     <div ref="container" :class="cls.e('docx-body')" />
     <div v-if="loading" :class="cls.e('loading')">加载中…</div>
   </u-scroll>
@@ -7,18 +7,19 @@
 
 <script lang="ts" setup>
 import { bem } from '@veltra/utils'
-import { onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+import { onBeforeUnmount, ref, useAttrs, useTemplateRef, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
 import { UScroll } from '../../scroll'
 
-defineOptions({ name: 'FileViewerDocxPreviewer' })
+defineOptions({ name: 'FileViewerDocxPreviewer', inheritAttrs: false })
 
 const props = defineProps<{ file: FileViewerItem }>()
 
 const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
 
 const cls = bem('file-viewer')
+const attrs = useAttrs()
 
 const container = useTemplateRef<HTMLDivElement>('container')
 const loading = ref(true)

package/src/components/file-viewer/previewers/image-previewer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[cls.e('image'), bem.is('actual', actual)]">
+  <div :class="cls.e('image')" v-bind="attrs">
     <img
       v-if="url"
       :src="url"
@@ -7,7 +7,6 @@
       draggable="false"
       @load="loading = false"
       @error="onImgError"
-      @dblclick="actual = !actual"
     />
     <div v-if="loading" :class="cls.e('loading')">加载中…</div>
     <div v-if="failed" :class="cls.e('loading')">图片加载失败</div>
@@ -16,22 +15,22 @@
 
 <script lang="ts" setup>
 import { bem } from '@veltra/utils'
-import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+import { onBeforeUnmount, ref, shallowRef, useAttrs, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
 
-defineOptions({ name: 'FileViewerImagePreviewer' })
+defineOptions({ name: 'FileViewerImagePreviewer', inheritAttrs: false })
 
 const props = defineProps<{ file: FileViewerItem }>()
 
 const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
 
 const cls = bem('file-viewer')
+const attrs = useAttrs()
 
 const url = shallowRef<string>('')
 const loading = ref(true)
 const failed = ref(false)
-const actual = ref(false)
 
 let revoke: (() => void) | undefined
 

package/src/components/file-viewer/previewers/pdf-previewer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="cls.e('pdf')">
+  <div :class="cls.e('pdf')" v-bind="attrs">
     <div v-if="!engine || isLoading" :class="cls.e('loading')">正在加载 PDF 引擎…</div>
     <EmbedPDF v-else-if="pdfUrl" :engine="engine" :plugins="plugins" v-slot="{ activeDocumentId }">
       <DocumentContent
@@ -36,17 +36,18 @@ import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/vue'
 import { ScrollPluginPackage, Scroller } from '@embedpdf/plugin-scroll/vue'
 import { ViewportPluginPackage, Viewport } from '@embedpdf/plugin-viewport/vue'
 import { bem } from '@veltra/utils'
-import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
+import { computed, onBeforeUnmount, shallowRef, useAttrs, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
 
-defineOptions({ name: 'FileViewerPdfPreviewer' })
+defineOptions({ name: 'FileViewerPdfPreviewer', inheritAttrs: false })
 
 const props = defineProps<{ file: FileViewerItem }>()
 
 const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
 
 const cls = bem('file-viewer')
+const attrs = useAttrs()
 
 const { engine, isLoading, error } = usePdfiumEngine()