@veltra/desktop 1.7.12 → 1.7.15

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'
 }
 

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

@@ -0,0 +1,216 @@
+<template>
+  <div :class="cls.e('ofd')">
+    <div ref="scroll" :class="cls.e('ofd-scroll')">
+      <div
+        v-for="(page, i) in pages"
+        :key="i"
+        :data-index="i"
+        :class="cls.e('ofd-page')"
+        :style="{
+          width: page.widthPx * zoomLevel + 'px',
+          height: page.heightPx * zoomLevel + 'px'
+        }"
+      >
+        <div v-if="page.svg" :class="cls.e('ofd-page-body')" v-html="page.svg" />
+      </div>
+      <div v-if="!pages.length && !loading" :class="cls.e('empty')">
+        <u-empty text="该文件没有可预览的页面" :size="32" />
+      </div>
+    </div>
+    <div v-if="loading" :class="cls.e('loading')">正在解析 OFD…</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+
+import type { FileViewerItem } from '../../../types/file-viewer'
+import { UEmpty } from '../../empty'
+import { toArrayBuffer } from '../helper'
+
+defineOptions({ name: 'UFileViewerOfdPreviewer' })
+
+/** 仅类型查询；运行时动态 import 按需加载，构建时随 alwaysBundle 内联进 dist */
+type OfdCoreModule = typeof import('@veltra/ofd-core')
+type OfdContainer = import('@veltra/ofd-core').OfdContainer
+type OfdZip = import('@veltra/ofd-core').OfdZip
+
+/** OFD 毫米 → CSS 像素（96dpi），与内核 SVG 输出的换算一致 */
+const PX_PER_MM = 96 / 25.4
+
+const MIN_ZOOM = 0.5
+const MAX_ZOOM = 3
+/** 每次缩放固定增减 10%，对齐 pdf 缩放配置 */
+const ZOOM_STEP = 0.1
+/** 可视区上下各预渲染一个视口高度的页 */
+const RENDER_MARGIN = '100% 0px'
+
+interface OfdPageView {
+  docIndex: number
+  pageIndex: number
+  /** 页面基准尺寸（缩放 1 时），毫米按 96dpi 换算为像素 */
+  widthPx: number
+  heightPx: number
+  /** null = 未渲染；'' = 已尝试但渲染失败，不再重试 */
+  svg: string | null
+}
+
+const props = defineProps<{ file: FileViewerItem }>()
+
+const emit = defineEmits<{
+  (e: 'error', err: unknown): void
+  (e: 'zoom-change', level: number): void
+}>()
+
+const cls = bem('file-viewer')
+const scrollEl = useTemplateRef<HTMLDivElement>('scroll')
+const loading = ref(true)
+const pages = ref<OfdPageView[]>([])
+const zoomLevel = ref(1)
+
+let controller: AbortController | undefined
+/** 递增 token：防止切文件后旧解析/渲染结果落地 */
+let loadToken = 0
+let ofdCore: OfdCoreModule | undefined
+let observer: IntersectionObserver | undefined
+let activeZip: OfdZip | undefined
+let activeContainer: OfdContainer | undefined
+/** 已进入渲染流程（进行中或已完成）的页，防止滚动重复触发 */
+const scheduledPages = new Set<number>()
+
+// ---- 缩放：作用于页面容器尺寸，滚动高度随之自适应 ----
+
+function clampZoom(value: number): number {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Math.round(value * 100) / 100))
+}
+
+function setZoom(value: number) {
+  const next = clampZoom(value)
+  if (zoomLevel.value === next) return
+  zoomLevel.value = next
+  emit('zoom-change', next)
+}
+
+function zoomIn() {
+  setZoom(zoomLevel.value + ZOOM_STEP)
+}
+
+function zoomOut() {
+  setZoom(zoomLevel.value - ZOOM_STEP)
+}
+
+function resetZoom() {
+  setZoom(1)
+}
+
+defineExpose({ zoomIn, zoomOut, resetZoom })
+
+// ---- 解析与懒渲染 ----
+
+/** 动态加载 ofd-core chunk；首次加载后缓存模块复用 */
+async function resolveOfdCore(): Promise<OfdCoreModule> {
+  const mod = ofdCore ?? (await import('@veltra/ofd-core'))
+  ofdCore = mod
+  return mod
+}
+
+function teardownRender() {
+  observer?.disconnect()
+  observer = undefined
+  activeZip = undefined
+  activeContainer = undefined
+  scheduledPages.clear()
+}
+
+function observePages() {
+  const root = scrollEl.value
+  if (!root || typeof IntersectionObserver === 'undefined') return
+  observer = new IntersectionObserver(
+    (entries) => {
+      const token = loadToken
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue
+        observer?.unobserve(entry.target)
+        const index = Number((entry.target as HTMLElement).dataset.index)
+        if (Number.isNaN(index) || scheduledPages.has(index)) continue
+        scheduledPages.add(index)
+        void renderPage(index, token)
+      }
+    },
+    { root, rootMargin: RENDER_MARGIN }
+  )
+  for (const el of root.querySelectorAll<HTMLElement>('[data-index]')) {
+    observer.observe(el)
+  }
+}
+
+/** 渲染单页 SVG；失败置空串避免滚动时反复重试同一页 */
+async function renderPage(index: number, token: number) {
+  const page = pages.value[index]
+  const core = ofdCore
+  if (!page || page.svg !== null || !core || !activeZip || !activeContainer) return
+  try {
+    const svg = await core.pageToSvg(activeZip, activeContainer, page.docIndex, page.pageIndex)
+    if (token !== loadToken) return
+    pages.value[index] = { ...page, svg }
+  } catch (err) {
+    if (token !== loadToken) return
+    pages.value[index] = { ...page, svg: '' }
+    emit('error', err)
+  }
+}
+
+async function load() {
+  const token = ++loadToken
+  controller?.abort()
+  controller = new AbortController()
+  teardownRender()
+  loading.value = true
+  pages.value = []
+
+  try {
+    const core = await resolveOfdCore()
+    if (token !== loadToken) return
+
+    const buf = await toArrayBuffer(props.file.src, controller.signal)
+    if (token !== loadToken) return
+    const zip = core.openOfdZip(new Uint8Array(buf))
+    const container = await core.parseOfdContainer(zip)
+    if (token !== loadToken) return
+
+    activeZip = zip
+    activeContainer = container
+    // 未声明尺寸时按 A4 兜底，与内核 pageToSvg 的兜底一致
+    pages.value = container.docs.flatMap((doc, docIndex) =>
+      doc.pages.map((page) => {
+        const size = page.size ?? doc.pageSize ?? { width: 210, height: 297 }
+        return {
+          docIndex,
+          pageIndex: page.index,
+          widthPx: Math.round(size.width * PX_PER_MM),
+          heightPx: Math.round(size.height * PX_PER_MM),
+          svg: null
+        }
+      })
+    )
+    await nextTick()
+    if (token !== loadToken) return
+    observePages()
+  } catch (err) {
+    if (token !== loadToken) return
+    if ((err as { name?: string })?.name === 'AbortError') return
+    emit('error', err)
+  } finally {
+    if (token === loadToken) loading.value = false
+  }
+}
+
+watch(() => props.file, load, { immediate: true })
+
+onBeforeUnmount(() => {
+  controller?.abort()
+  teardownRender()
+  pages.value = []
+})
+</script>

package/src/components/file-viewer/style.scss

@@ -302,6 +302,12 @@
     --u-file-viewer-kind-bg: rgba(100, 116, 139, 0.1);
   }
 
+  @include m.em(badge, ofd) {
+    --u-file-viewer-kind: #7c3aed;
+    --u-file-viewer-kind-border: rgba(124, 58, 237, 0.28);
+    --u-file-viewer-kind-bg: rgba(124, 58, 237, 0.1);
+  }
+
   @include m.e(stage) {
     display: flex;
     flex: 1;
@@ -686,6 +692,33 @@
       0 0 0 1px rgba(255, 255, 255, 0.04);
   }
 
+  @include m.e(ofd) {
+    position: absolute;
+    inset: 0;
+  }
+
+  @include m.e(ofd-scroll) {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+
+  @include m.e(ofd-page) {
+    margin: 24px auto;
+    background: #fff;
+    box-shadow: var(--u-file-viewer-page-shadow);
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.is-modal &__ofd-page {
+    margin: clamp(24px, 3vw, 44px) auto;
+  }
+
   @include m.e(docx) {
     position: absolute;
     inset: 0;

package/src/components/table/__test__/column-style.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+
+import { ColumnNode } from '../node/col'
+
+describe('ColumnNode column styles', () => {
+  it('headerAlign 未指定时回退到 align', () => {
+    const column = new ColumnNode({ key: 'a', name: 'A', align: 'center' }, 0, 0)
+
+    expect(column.headerAlign).toBe('center')
+  })
+
+  it('headerAlign 显式指定时优先于 align', () => {
+    const column = new ColumnNode(
+      { key: 'a', name: 'A', align: 'center', headerAlign: 'right' },
+      0,
+      0
+    )
+
+    expect(column.headerAlign).toBe('right')
+  })
+
+  it('headerCellStyle 未指定 headerStyle 时回退到 style', () => {
+    const column = new ColumnNode(
+      { key: 'a', name: 'A', style: { color: 'red', fontSize: 14 } },
+      0,
+      0
+    )
+
+    expect(column.cellStyle).toEqual({ color: 'red', fontSize: '14px' })
+    expect(column.headerCellStyle).toEqual({ color: 'red', fontSize: '14px' })
+  })
+
+  it('headerCellStyle 显式指定 headerStyle 时优先于 style', () => {
+    const column = new ColumnNode(
+      {
+        key: 'a',
+        name: 'A',
+        style: { color: 'red', fontSize: 12 },
+        headerStyle: { color: 'blue', fontSize: 16 }
+      },
+      0,
+      0
+    )
+
+    expect(column.cellStyle).toEqual({ color: 'red', fontSize: '12px' })
+    expect(column.headerCellStyle).toEqual({ color: 'blue', fontSize: '16px' })
+  })
+
+  it('fontSize 数字转为 px，字符串原样保留', () => {
+    const column = new ColumnNode({ key: 'a', name: 'A', style: { fontSize: 18 } }, 0, 0)
+    const columnWithUnit = new ColumnNode(
+      { key: 'b', name: 'B', style: { fontSize: '1.2rem' } },
+      0,
+      0
+    )
+
+    expect(column.cellStyle).toEqual({ fontSize: '18px' })
+    expect(columnWithUnit.cellStyle).toEqual({ fontSize: '1.2rem' })
+  })
+
+  it('未配置样式时 getter 返回 undefined', () => {
+    const column = new ColumnNode({ key: 'a', name: 'A' }, 0, 0)
+
+    expect(column.cellStyle).toBeUndefined()
+    expect(column.headerCellStyle).toBeUndefined()
+  })
+})

package/src/components/table/node/col.ts

@@ -1,7 +1,26 @@
 import { TreeNode } from '@cat-kit/core'
+import { withUnit } from '@veltra/utils'
 import { isReactive, reactive, shallowReactive } from 'vue'
 
-import type { TableColumn, TableColumnAlign } from '../../../types'
+import type { TableColumn, TableColumnAlign, TableColumnStyle } from '../../../types'
+
+function normalizeColumnStyle(style?: TableColumnStyle): Record<string, string> | undefined {
+  if (!style) return undefined
+
+  const result: Record<string, string> = {}
+
+  if (style.color !== undefined) {
+    result.color = style.color
+  }
+  if (style.fontSize !== undefined) {
+    const fontSize = withUnit(style.fontSize, 'px')
+    if (fontSize !== undefined) {
+      result.fontSize = fontSize
+    }
+  }
+
+  return Object.keys(result).length ? result : undefined
+}
 
 export class ColumnNode extends TreeNode<TableColumn, ColumnNode> {
   declare children?: ColumnNode[] | undefined
@@ -44,6 +63,16 @@ export class ColumnNode extends TreeNode<TableColumn, ColumnNode> {
     this.data.headerAlign = val
   }
 
+  /** 表体/表尾单元格样式 */
+  get cellStyle(): Record<string, string> | undefined {
+    return normalizeColumnStyle(this.data.style)
+  }
+
+  /** 表头单元格样式 */
+  get headerCellStyle(): Record<string, string> | undefined {
+    return normalizeColumnStyle(this.data.headerStyle ?? this.data.style)
+  }
+
   /** 宽度 */
   get width(): number | undefined {
     const width = this.data.width ?? this.derived.allocatedWidth

package/src/components/table/table-cell.vue

@@ -24,13 +24,18 @@ defineOptions({ name: 'UTableCell' })
  * 父组件 `TableRow` 已经持有注入上下文，直接把 `cellClass` 传下来即可；
  * 这里变成「完全受控」的纯渲染单元。
  */
-const { left, right } = defineProps<{
+const { left, right, cellStyle } = defineProps<{
   cellClass: string
   left?: number
   right?: number
+  cellStyle?: Record<string, string>
   rowspan?: number
   colspan?: number
 }>()
 
-const style = computed(() => ({ left: withUnit(left, 'px'), right: withUnit(right, 'px') }))
+const style = computed(() => ({
+  ...cellStyle,
+  left: withUnit(left, 'px'),
+  right: withUnit(right, 'px')
+}))
 </script>

package/src/components/table/table-foot.vue

@@ -5,6 +5,7 @@
         v-if="leafColumns[0]"
         :class="getCellClass(leafColumns[0])"
         :style="{
+          ...leafColumns[0].cellStyle,
           right: withUnit(leafColumns[0].style.right, 'px'),
           left: withUnit(leafColumns[0].style.left, 'px')
         }"
@@ -16,6 +17,7 @@
         :class="getCellClass(column)"
         :key="column.key"
         :style="{
+          ...column.cellStyle,
           right: withUnit(column.style.right, 'px'),
           left: withUnit(column.style.left, 'px')
         }"

package/src/components/table/table-head.tsx

@@ -26,6 +26,7 @@ const TableHead: DefineComponent = defineComponent({
                 colspan={column.leafs}
                 rowspan={column.children?.length ? undefined : headers.value.length - headerIndex}
                 style={{
+                  ...column.headerCellStyle,
                   left: withUnit(column.style.left, 'px'),
                   right: withUnit(column.style.right, 'px')
                 }}

package/src/components/table/table-row.tsx

@@ -99,6 +99,7 @@ export const UTableRow: DefineComponent<{ row: ITableRow; index: number }> = def
               cellClass={getCellClass(_expandColumn)}
               left={_expandColumn.style.left}
               right={_expandColumn.style.right}
+              cellStyle={_expandColumn.cellStyle}
               key={row.uid + _expandColumn.key}
               {...tableProps.mergeCell?.(expandCtx)}
             >
@@ -156,6 +157,7 @@ export const UTableRow: DefineComponent<{ row: ITableRow; index: number }> = def
                 cellClass={getCellClass(column)}
                 left={column.style.left}
                 right={column.style.right}
+                cellStyle={column.cellStyle}
                 key={row.uid + column.key}
                 // @ts-ignore
                 onClick={(e) => handleCellClick(row, column, e)}