@veltra/desktop 1.7.13 → 1.7.15

package/src/components/batch-edit/__test__/batch-edit.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { createApp, h, nextTick, reactive, ref } from 'vue'
 
 import { UInput } from '../../input'
@@ -6,7 +6,13 @@ import { USelect } from '../../select'
 import { defineTableColumns } from '../../table'
 import { UBatchEdit } from '../index'
 
-function mountBatchEdit() {
+interface MountOptions {
+  props?: Record<string, any>
+  /** 给「名称」输入框附加校验规则 */
+  labelRules?: Record<string, any>
+}
+
+function mountBatchEdit(options: MountOptions = {}) {
   const host = document.createElement('div')
   document.body.appendChild(host)
 
@@ -42,11 +48,12 @@ function mountBatchEdit() {
           columns,
           model,
           rowKey: 'id',
-          quickEdit: true
+          quickEdit: true,
+          ...options.props
         },
         {
           form: () => [
-            h(UInput, { field: 'label', label: '名称' }),
+            h(UInput, { field: 'label', label: '名称', rules: options.labelRules }),
             h(USelect, {
               field: 'behavior',
               label: '行为',
@@ -197,3 +204,183 @@ describe('UBatchEdit quick-edit 切换编辑行', () => {
     unmount()
   })
 })
+
+function queryDialog() {
+  return document.body.querySelector<HTMLElement>('.u-batch-edit__form-dialog')
+}
+
+/** 等弹框（teleport 到 body）的进入 / 离开过渡走完 */
+async function flushDialog() {
+  await nextTick()
+  await nextTick()
+  await new Promise((resolve) => setTimeout(resolve, 20))
+  await nextTick()
+}
+
+function clickEl(el: HTMLElement) {
+  el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+}
+
+function setInputValue(input: HTMLInputElement, value: string) {
+  input.value = value
+  input.dispatchEvent(
+    new InputEvent('input', { bubbles: true, data: value, inputType: 'insertText' })
+  )
+}
+
+function querySaveButton(dialog: HTMLElement) {
+  return dialog.querySelector<HTMLElement>('.u-batch-edit__form-actions button[title="保存"]')
+}
+
+function queryCancelButton(dialog: HTMLElement) {
+  return [...dialog.querySelectorAll<HTMLElement>('.u-batch-edit__form-actions button')].find(
+    (btn) => btn.textContent?.includes('取消')
+  )
+}
+
+describe('UBatchEdit formMode', () => {
+  it('默认（不传 formMode）仍渲染右侧面板，不出现弹框', async () => {
+    const { host, unmount } = mountBatchEdit()
+
+    await clickRow(host, 0)
+    const aside = host.querySelector<HTMLElement>('.u-batch-edit__form')
+    expect(aside).toBeTruthy()
+    expect(aside!.style.display).not.toBe('none')
+    expect(queryDialog()).toBeNull()
+
+    unmount()
+  })
+
+  it('formMode="dialog" 时不渲染右列，触发编辑后以弹框打开表单', async () => {
+    const { host, model, unmount } = mountBatchEdit({
+      props: { formMode: 'dialog', quickEdit: false }
+    })
+
+    expect(host.querySelector('.u-batch-edit__form')).toBeNull()
+    expect(queryDialog()).toBeNull()
+
+    await clickRow(host, 0)
+    await flushDialog()
+
+    const dialog = queryDialog()
+    expect(dialog).toBeTruthy()
+    // 表格占满整行，右列不再渲染
+    expect(host.querySelector('.u-batch-edit__form')).toBeNull()
+    // 弹框内复用原表单头部 / 表单体 / 底部操作区
+    expect(dialog!.querySelector('.u-batch-edit__form-header')).toBeTruthy()
+    expect(dialog!.querySelector('.u-batch-edit__form-body')).toBeTruthy()
+    expect(dialog!.querySelector('.u-batch-edit__form-actions')).toBeTruthy()
+    // 编辑行已回显
+    expect(model.label).toBe('存草稿')
+
+    unmount()
+  })
+
+  it('弹框内保存走校验与 saveMethod，成功后关闭弹框', async () => {
+    const saveMethod = vi.fn()
+    const { host, data, unmount } = mountBatchEdit({
+      props: { formMode: 'dialog', quickEdit: false, saveMethod },
+      labelRules: { required: true }
+    })
+
+    // 打开新增弹框
+    clickEl(host.querySelector<HTMLElement>('.u-batch-edit__add-btn')!)
+    await flushDialog()
+    expect(queryDialog()).toBeTruthy()
+
+    // 必填校验失败：不调用 saveMethod，弹框保持打开
+    clickEl(querySaveButton(queryDialog()!)!)
+    await flushDialog()
+    expect(saveMethod).not.toHaveBeenCalled()
+    expect(queryDialog()).toBeTruthy()
+
+    // 填写后保存：走 saveMethod 并插入数据，成功后关闭弹框
+    setInputValue(queryDialog()!.querySelector<HTMLInputElement>('.u-input input')!, '新名称')
+    await nextTick()
+    await nextTick()
+    clickEl(querySaveButton(queryDialog()!)!)
+    await flushDialog()
+
+    expect(saveMethod).toHaveBeenCalledTimes(1)
+    expect(saveMethod.mock.calls[0]![0]).toMatchObject({ label: '新名称' })
+    expect(saveMethod.mock.calls[0]![1]).toBe('create')
+    expect(data.value).toHaveLength(3)
+    expect(data.value[2]).toMatchObject({ label: '新名称' })
+    expect(queryDialog()).toBeNull()
+
+    unmount()
+  })
+
+  it('弹框内取消 / 关闭按钮 / 遮罩点击均不保存，且 model 恢复初始值', async () => {
+    const saveMethod = vi.fn()
+    const { host, data, model, unmount } = mountBatchEdit({
+      props: { formMode: 'dialog', quickEdit: false, saveMethod }
+    })
+
+    // 编辑第 1 行后取消
+    await clickRow(host, 0)
+    await flushDialog()
+    setInputValue(queryDialog()!.querySelector<HTMLInputElement>('.u-input input')!, '改过的名称')
+    await nextTick()
+    await nextTick()
+    clickEl(queryCancelButton(queryDialog()!)!)
+    await flushDialog()
+
+    expect(saveMethod).not.toHaveBeenCalled()
+    expect(data.value[0]).toMatchObject({ label: '存草稿' })
+    // model 恢复初始快照，而不是残留上一行数据
+    expect(model.label).toBe('')
+    expect(model.submitType).toBeUndefined()
+    expect(queryDialog()).toBeNull()
+
+    // 取消后再新增：表单应为初始值（快照不被上一行污染）
+    clickEl(host.querySelector<HTMLElement>('.u-batch-edit__add-btn')!)
+    await flushDialog()
+    expect(queryDialog()!.querySelector<HTMLInputElement>('.u-input input')!.value).toBe('')
+
+    // 表单头部的关闭按钮同样不保存
+    setInputValue(queryDialog()!.querySelector<HTMLInputElement>('.u-input input')!, '随便写')
+    await nextTick()
+    await nextTick()
+    clickEl(queryDialog()!.querySelector<HTMLElement>('.u-batch-edit__form-close')!)
+    await flushDialog()
+    expect(saveMethod).not.toHaveBeenCalled()
+    expect(model.label).toBe('')
+    expect(data.value).toHaveLength(2)
+    expect(queryDialog()).toBeNull()
+
+    // 弹框自身关闭交互（点击遮罩）也不保存
+    await clickRow(host, 1)
+    await flushDialog()
+    setInputValue(queryDialog()!.querySelector<HTMLInputElement>('.u-input input')!, '改过的名称')
+    await nextTick()
+    await nextTick()
+    document
+      .querySelector<HTMLElement>('.u-dialog__overlay')!
+      .dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }))
+    await flushDialog()
+
+    expect(saveMethod).not.toHaveBeenCalled()
+    expect(data.value[1]).toMatchObject({ label: '调接口' })
+    expect(model.label).toBe('')
+    expect(queryDialog()).toBeNull()
+
+    unmount()
+  })
+})
+
+describe('UBatchEdit 属性透传', () => {
+  it('style / class 等非 props 属性透传到根布局元素（组件为片段根，需手动继承）', async () => {
+    const { host, unmount } = mountBatchEdit({
+      props: { style: 'height: 500px', class: 'custom-batch-edit' }
+    })
+    await nextTick()
+
+    const root = host.querySelector<HTMLElement>('.u-batch-edit')
+    expect(root).toBeTruthy()
+    expect(root!.classList.contains('custom-batch-edit')).toBe(true)
+    expect(root!.style.height).toBe('500px')
+
+    unmount()
+  })
+})

package/src/components/batch-edit/batch-edit-form.vue

@@ -1,6 +1,11 @@
 <template>
-  <!-- 表单常驻挂载（快照只在挂载时对传入的 model 拍一次），仅用 v-show 控制显隐 -->
-  <aside :class="cls.e('form')" v-if="!!props.model" v-show="state.formVisible">
+  <!-- 面板模式：表单常驻挂载（快照只在挂载时对传入的 model 拍一次），仅用 v-show 控制显隐；
+       弹框模式：表单随弹框挂载 / 卸载，model 初始快照由 use-edit-state 维护 -->
+  <aside
+    :class="[cls.e('form'), bem.is('dialog', props.formMode === 'dialog')]"
+    v-if="!!props.model"
+    v-show="state.formVisible"
+  >
     <header :class="cls.e('form-header')">
       <span :class="[cls.e('form-icon'), bem.is(state.formActionType)]">
         <u-icon>
@@ -48,7 +53,7 @@
       <span :class="cls.e('form-hint')">
         <template v-if="props.readonly"> 只读模式 </template>
 
-        <span :class="{ [bem.is('concealed')]: !focused }">
+        <span :class="{ [bem.is('concealed')]: !shortcutActive }">
           <template v-if="!(state.formActionType === 'update' && props.quickEdit)">
             <u-kbd>Ctrl + S</u-kbd> 保存 ·
           </template>
@@ -86,6 +91,7 @@ import { UKbd } from '../kbd'
 import { UScroll } from '../scroll'
 import { BatchEditDIKey } from './di'
 import { FORM_ACTION_HEADER_MAP } from './form-action-header'
+import { useDialogEffect } from './use-dialog-effect'
 
 defineOptions({ name: 'UBatchEditForm' })
 
@@ -96,6 +102,14 @@ const { cls, props, state, handleClose, handleSave, staticFeatures, dynamicFeatu
 
 const focused = toRef(batchEditCtx, 'focused')
 
+// 弹框模式下，弹框自身关闭（遮罩点击 / 右上角关闭）时同步走 handleClose，不保存
+useDialogEffect({ closeForm: handleClose })
+
+/** 快捷键提示是否可见：面板模式随聚焦显隐；弹框模式弹框打开期间快捷键始终可用 */
+const shortcutActive = computed(() => {
+  return props.formMode === 'dialog' ? state.formVisible : focused.value
+})
+
 const formComponentRef = shallowRef<FormExposed>()
 
 defineExpose<_FormExposed>({

package/src/components/batch-edit/batch-edit-list.vue

@@ -98,7 +98,8 @@ const tableProps = computed(() => {
     'saveMethod',
     'features',
     'mode',
-    'beforeCreate'
+    'beforeCreate',
+    'formMode'
   ])
 })
 

package/src/components/batch-edit/batch-edit.vue

@@ -9,15 +9,29 @@
     @focusin="handleFocusIn"
     @focusout="handleFocusOut"
     @keydown.capture="handleKeydown"
+    v-bind="$attrs"
   >
     <!-- 编辑列表 -->
     <BatchEditList :slots="slots" />
 
     <!-- 编辑表单 -->
-    <BatchEditForm ref="form" v-slot="scoped">
+    <BatchEditForm v-if="props.formMode === 'panel'" ref="form" v-slot="scoped">
       <slot name="form" v-bind="scoped" />
     </BatchEditForm>
   </u-layout>
+
+  <!-- 弹框模式：表单经 UDialog 呈现（teleport 到 body），快捷键监听落在弹框上，Esc 与弹框自带的 keyup.esc 去重 -->
+  <u-dialog
+    v-if="props.formMode === 'dialog'"
+    v-model="state.formVisible"
+    :class="cls.e('form-dialog')"
+    @keydown.capture="handleKeydown"
+    @keyup.esc.stop
+  >
+    <BatchEditForm ref="form" v-slot="scoped">
+      <slot name="form" v-bind="scoped" />
+    </BatchEditForm>
+  </u-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -25,6 +39,7 @@ import { bem } from '@veltra/utils'
 import { computed, provide, useTemplateRef } from 'vue'
 
 import type { BatchEditEmits, BatchEditProps, BatchEditSlots, FormExposed } from '../../types'
+import { UDialog } from '../dialog'
 import { ULayout } from '../layout'
 import BatchEditForm from './batch-edit-form.vue'
 import BatchEditList from './batch-edit-list.vue'
@@ -34,9 +49,12 @@ import { useFeatures } from './use-features'
 import { useHandlers } from './use-handlers'
 import { useShortcutKey } from './use-shortcut-key'
 
-defineOptions({ name: 'UBatchEdit' })
+defineOptions({ name: 'UBatchEdit', inheritAttrs: false })
 
-const props = withDefaults(defineProps<BatchEditProps>(), { cols: () => ['1fr', '420px'] })
+const props = withDefaults(defineProps<BatchEditProps>(), {
+  cols: () => ['1fr', '420px'],
+  formMode: 'panel'
+})
 
 const emit = defineEmits<BatchEditEmits>()
 
@@ -61,7 +79,7 @@ const { handleFocusIn, handleFocusOut, handleKeydown, focused } = useShortcutKey
 })
 
 const cols = computed(() => {
-  return state.formVisible ? props.cols : undefined
+  return props.formMode === 'panel' && state.formVisible ? props.cols : undefined
 })
 
 provide(BatchEditDIKey, {

package/src/components/batch-edit/style.scss

@@ -52,6 +52,14 @@ $root-name: batch-edit;
     overflow: hidden;
     isolation: isolate;
     min-height: 0;
+
+    // 弹框模式：背景 / 圆角 / 阴影由弹框外壳提供，表单只保留内部布局并限高滚动
+    @include m.is(dialog) {
+      max-height: min(600px, 80vh);
+      background-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+    }
   }
 
   @include m.e(form-header) {
@@ -171,3 +179,15 @@ $root-name: batch-edit;
     flex-shrink: 0;
   }
 }
+
+// ---------- 弹框模式 ----------
+// 弹框 teleport 到 body，不在 .u-batch-edit 内，样式置于顶层
+#{fn.bem(batch-edit, form-dialog)} {
+  width: 560px;
+  max-width: calc(100vw - 32px);
+
+  // 表单自带头部（图标 / 标题 / 关闭按钮），弹框头部不再展示
+  #{fn.bem(dialog, header)} {
+    display: none;
+  }
+}

package/src/components/batch-edit/style.ts

@@ -1,5 +1,6 @@
 import '../action/style'
 import '../button/style'
+import '../dialog/style'
 import '../form/style'
 import '../icon/style'
 import '../layout/style'

package/src/components/batch-edit/use-dialog-effect.ts

@@ -10,12 +10,18 @@ interface Options {
 /**
  * 在表单上的副作用。
  * 包括：关闭表单
+ *
+ * sync 触发：弹框关闭会随即卸载表单组件，默认 pre 时序下 watcher 可能随组件卸载被丢弃
  */
 export function useDialogEffect(options: Options) {
   const dialogCtx = inject(DialogDIKey, undefined)
   if (!dialogCtx) return
 
-  watch(dialogCtx.visible, (visible) => {
-    !visible && options.closeForm?.()
-  })
+  watch(
+    dialogCtx.visible,
+    (visible) => {
+      !visible && options.closeForm?.()
+    },
+    { flush: 'sync' }
+  )
 }

package/src/components/batch-edit/use-edit-state.ts

@@ -1,4 +1,4 @@
-import { o } from '@cat-kit/core'
+import { copy, o } from '@cat-kit/core'
 import { nextTick, shallowReactive, shallowRef, watch, type ShallowRef } from 'vue'
 
 import type { BatchEditProps, BatchEditStates, FormExposed } from '../../types'
@@ -24,9 +24,37 @@ export function useEditState(options: Options) {
   /** 是否正在以编程方式重置/回显表单，此期间禁止 quick-edit 回写行数据 */
   const syncing = shallowRef(false)
 
+  /**
+   * model 初始快照。
+   * 面板模式由常驻挂载的 UForm 自行维护快照；dialog 模式表单随弹框卸载，
+   * UForm 快照会在每次打开时按已回显的 model 重拍，故这里单独保留一份供恢复
+   */
+  const initialModel = shallowRef<Record<string, any>>()
+
+  watch(
+    () => props.model,
+    (model) => {
+      initialModel.value = props.formMode === 'dialog' && model ? copy(model) : undefined
+    },
+    { immediate: true }
+  )
+
+  /** 重置表单数据到 model 初始快照 */
+  function resetModel() {
+    if (props.formMode !== 'dialog') {
+      formRef.value?.reset()
+      return
+    }
+
+    formRef.value?.clearValidate()
+    if (!props.model || !initialModel.value) return
+    for (const key of Object.keys(initialModel.value)) {
+      o(props.model).set(key, copy(initialModel.value[key]))
+    }
+  }
+
   function resetState() {
-    // 表单常驻挂载，重置即恢复到 model 初始快照
-    formRef.value?.reset()
+    resetModel()
 
     if (state.row) {
       state.row.isCurrent = false
@@ -47,7 +75,7 @@ export function useEditState(options: Options) {
       // 先重置回 model 初始快照，再同步回显行数据。
       // 同一 tick 内的连续写入会被表单字段 watcher 合并，
       // 重置产生的默认值不会触发 field:update 回写行数据
-      formRef.value?.reset()
+      resetModel()
 
       if (row) {
         if (props.model) {

package/src/components/batch-edit/use-handlers.ts

@@ -170,6 +170,12 @@ export function useHandlers(options: Options): EditReturned {
       }
       insert(item)
 
+      // 弹框模式保存成功即关闭，不走面板的连续新增
+      if (props.formMode === 'dialog') {
+        resetState()
+        return
+      }
+
       // 推进插入点，便于连续新增；并重置表单到初始默认值
       const next = last(state.indexPath) + 1
       state.indexPath = [...state.indexPath.slice(0, -1), next]
@@ -190,6 +196,10 @@ export function useHandlers(options: Options): EditReturned {
       Object.keys(item).forEach((key) => {
         o(row.data).set(key, o(item).get(key))
       })
+
+    if (props.formMode === 'dialog') {
+      resetState()
+    }
   })
 
   const handleDelete = runWithLoading(async (row: TableRow) => {

package/src/components/batch-edit/use-shortcut-key.ts

@@ -38,12 +38,16 @@ export function useShortcutKey(options: Options) {
   }
 
   /**
-   * 键盘快捷键（仅组件获焦时生效）：
+   * 键盘快捷键：
    * - Esc          关闭表单
    * - ⌘/Ctrl + S   保存（快速编辑模式下编辑行时除外）
+   *
+   * 面板模式仅组件获焦时生效；弹框模式表单被 teleport 到 body，
+   * 组件聚焦状态覆盖不到，改为弹框打开期间生效
    */
   function handleKeydown(e: KeyboardEvent) {
-    if (!focused.value) return
+    const active = props.formMode === 'dialog' ? state.formVisible : focused.value
+    if (!active) return
     if (props.readonly && e.key !== 'Escape') return
 
     if (e.key === 'Escape') return runEscape(e)

package/src/components/file-viewer/__test__/helper.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+
+import { FILE_VIEWER_KIND_LABEL, inferKind } from '../helper'
+
+describe('file-viewer helper', () => {
+  it('.ofd 按 OFD 类别识别，不落入 text 兜底', () => {
+    expect(inferKind('invoice.ofd')).toBe('ofd')
+  })
+
+  it('OFD 类别的展示标签为 OFD', () => {
+    expect(FILE_VIEWER_KIND_LABEL.ofd).toBe('OFD')
+  })
+})

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

@@ -169,7 +169,7 @@
                     :class="isTransformable ? cls.e('previewer') : undefined"
                     :style="previewerStyle"
                     @error="handleChildError"
-                    @zoom-change="handlePdfZoomChange"
+                    @zoom-change="handlePreviewerZoomChange"
                   />
                 </div>
                 <div v-else :class="cls.e('empty')">
@@ -238,10 +238,12 @@ const MIN_SCALE = 0.5
 const MAX_SCALE = 3
 /** 每次缩放固定增减 10% */
 const SCALE_STEP = 0.1
-/** 使用 CSS transform 缩放的类型（PDF 由 EmbedPDF zoom 插件处理） */
+/** 使用 CSS transform 缩放的类型（PDF / OFD 由各自 previewer 内部缩放） */
 const TRANSFORMABLE_KINDS = new Set<FileViewerKind>(['image'])
 /** 工具栏显示缩放控件的类型 */
-const ZOOMABLE_KINDS = new Set<FileViewerKind>(['image', 'pdf'])
+const ZOOMABLE_KINDS = new Set<FileViewerKind>(['image', 'pdf', 'ofd'])
+/** 缩放由 previewer 内部实现、组件只透传命令并回显级别的类型 */
+const DELEGATED_ZOOM_KINDS = new Set<FileViewerKind>(['pdf', 'ofd'])
 
 const activeId = defineModel<string | undefined>('modelValue', { default: undefined })
 const openModel = defineModel<boolean | undefined>('open', { default: undefined })
@@ -253,7 +255,7 @@ const previewerRef = shallowRef<{
   resetZoom?: () => void
 }>()
 const scale = ref(1)
-const pdfZoomLevel = ref(1)
+const previewerZoomLevel = ref(1)
 const offsetX = ref(0)
 const offsetY = ref(0)
 const isDragging = ref(false)
@@ -268,6 +270,7 @@ const PreviewerMap: Record<FileViewerKind, ReturnType<typeof defineAsyncComponen
   pdf: defineAsyncComponent(() => import('./previewers/pdf-previewer.vue')),
   sheet: defineAsyncComponent(() => import('./previewers/sheet-previewer.vue')),
   docx: defineAsyncComponent(() => import('./previewers/docx-previewer.vue')),
+  ofd: defineAsyncComponent(() => import('./previewers/ofd-previewer.vue')),
   text: defineAsyncComponent(() => import('./previewers/text-previewer.vue'))
 }
 
@@ -312,11 +315,15 @@ const isTransformable = computed(
 
 const isZoomable = computed(() => !!activeFile.value && ZOOMABLE_KINDS.has(activeFile.value.kind))
 
-const isPdfActive = computed(() => activeFile.value?.kind === 'pdf')
+const isDelegatedZoom = computed(
+  () => !!activeFile.value && DELEGATED_ZOOM_KINDS.has(activeFile.value.kind)
+)
 
 const canPan = computed(() => isTransformable.value && scale.value > 1)
 
-const displayZoomLevel = computed(() => (isPdfActive.value ? pdfZoomLevel.value : scale.value))
+const displayZoomLevel = computed(() =>
+  isDelegatedZoom.value ? previewerZoomLevel.value : scale.value
+)
 
 const zoomPercent = computed(() => `${Math.round(displayZoomLevel.value * 100)}%`)
 
@@ -325,8 +332,8 @@ const zoomInDisabled = computed(() => !isZoomable.value || displayZoomLevel.valu
 const zoomOutDisabled = computed(() => !isZoomable.value || displayZoomLevel.value <= MIN_SCALE)
 
 const isTransformReset = computed(() => {
-  if (isPdfActive.value) {
-    return Math.abs(pdfZoomLevel.value - 1) < 0.02
+  if (isDelegatedZoom.value) {
+    return Math.abs(previewerZoomLevel.value - 1) < 0.02
   }
   return scale.value === 1 && offsetX.value === 0 && offsetY.value === 0
 })
@@ -378,7 +385,7 @@ function setScale(value: number) {
 
 function zoomIn() {
   if (!isZoomable.value) return
-  if (isPdfActive.value) {
+  if (isDelegatedZoom.value) {
     previewerRef.value?.zoomIn?.()
     return
   }
@@ -387,7 +394,7 @@ function zoomIn() {
 
 function zoomOut() {
   if (!isZoomable.value) return
-  if (isPdfActive.value) {
+  if (isDelegatedZoom.value) {
     previewerRef.value?.zoomOut?.()
     return
   }
@@ -395,9 +402,9 @@ function zoomOut() {
 }
 
 function resetTransform() {
-  if (isPdfActive.value) {
+  if (isDelegatedZoom.value) {
     previewerRef.value?.resetZoom?.()
-    pdfZoomLevel.value = 1
+    previewerZoomLevel.value = 1
     return
   }
   scale.value = 1
@@ -407,8 +414,8 @@ function resetTransform() {
   isDragging.value = false
 }
 
-function handlePdfZoomChange(level: number) {
-  pdfZoomLevel.value = level
+function handlePreviewerZoomChange(level: number) {
+  previewerZoomLevel.value = level
 }
 
 function isZoomWheel(e: WheelEvent): boolean {
@@ -462,7 +469,7 @@ function handleViewportPointerEnd(e: PointerEvent) {
 }
 
 function handleViewportDblclick() {
-  if (isPdfActive.value) return
+  if (isDelegatedZoom.value) return
   if (!isTransformable.value) return
   if (scale.value === 1) {
     setScale(2)
@@ -521,7 +528,7 @@ watch(
 watch(
   () => activeFile.value?.id,
   async () => {
-    pdfZoomLevel.value = 1
+    previewerZoomLevel.value = 1
     await nextTick()
     resetTransform()
   }

package/src/components/file-viewer/helper.ts

@@ -47,6 +47,7 @@ export function inferKind(name: string, explicit?: FileViewerKind): FileViewerKi
   if (ext === 'pdf') return 'pdf'
   if (SHEET_EXTS.has(ext)) return 'sheet'
   if (ext === 'docx') return 'docx'
+  if (ext === 'ofd') return 'ofd'
   if (TEXT_EXTS.has(ext)) return 'text'
   return 'text'
 }
@@ -57,6 +58,7 @@ export const FILE_VIEWER_KIND_LABEL: Record<FileViewerKind, string> = {
   pdf: 'PDF',
   sheet: 'XLS',
   docx: 'DOC',
+  ofd: 'OFD',
   text: 'TXT'
 }