@veltra/desktop 1.0.7 → 1.0.9

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

@@ -0,0 +1,193 @@
+import type { FileViewerItem, FileViewerKind } from '../../types/file-viewer'
+
+const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg', 'avif', 'ico'])
+
+const VIDEO_EXTS = new Set(['mp4', 'webm', 'mov', 'm4v', 'ogv', 'mkv'])
+
+const SHEET_EXTS = new Set(['xlsx', 'xlsm', 'xlsb', 'csv'])
+
+const TEXT_EXTS = new Set([
+  'txt',
+  'log',
+  'md',
+  'markdown',
+  'json',
+  'yml',
+  'yaml',
+  'xml',
+  'js',
+  'ts',
+  'tsx',
+  'jsx',
+  'css',
+  'scss',
+  'sass',
+  'less',
+  'html',
+  'htm',
+  'ini',
+  'toml',
+  'sh',
+  'bash',
+  'zsh',
+  'env',
+  'sql'
+])
+
+export function getExtension(name: string): string {
+  const idx = name.lastIndexOf('.')
+  return idx === -1 ? '' : name.slice(idx + 1).toLowerCase()
+}
+
+export function inferKind(name: string, explicit?: FileViewerKind): FileViewerKind {
+  if (explicit) return explicit
+  const ext = getExtension(name)
+  if (IMAGE_EXTS.has(ext)) return 'image'
+  if (VIDEO_EXTS.has(ext)) return 'video'
+  if (ext === 'pdf') return 'pdf'
+  if (SHEET_EXTS.has(ext)) return 'sheet'
+  if (ext === 'docx') return 'docx'
+  if (TEXT_EXTS.has(ext)) return 'text'
+  return 'text'
+}
+
+export const FILE_VIEWER_KIND_LABEL: Record<FileViewerKind, string> = {
+  image: 'IMG',
+  video: 'MP4',
+  pdf: 'PDF',
+  sheet: 'XLS',
+  docx: 'DOC',
+  text: 'TXT'
+}
+
+/** 规范化数据源为 ArrayBuffer，可被 AbortController 中断（仅 URL fetch 场景生效） */
+export async function toArrayBuffer(
+  src: FileViewerItem['src'],
+  signal?: AbortSignal
+): Promise<ArrayBuffer> {
+  if (typeof src === 'string') {
+    const res = await fetch(src, { signal })
+    if (!res.ok) {
+      throw new Error(`Fetch failed: ${res.status} ${res.statusText}`)
+    }
+    return await res.arrayBuffer()
+  }
+  if (src instanceof ArrayBuffer) return src
+  if (src instanceof Uint8Array) {
+    // 复制底层以切断共享引用，防止外部修改影响预览
+    return src.slice().buffer as ArrayBuffer
+  }
+  // File/Blob
+  return await src.arrayBuffer()
+}
+
+/** 返回用于 <img> / <video> 等标签 src 的 URL；二进制会创建 ObjectURL 并返回 revoke 钩子 */
+export function toBlobUrl(
+  src: FileViewerItem['src'],
+  mime?: string
+): { url: string; revoke: () => void } {
+  if (typeof src === 'string') {
+    return { url: src, revoke: () => {} }
+  }
+  let blob: Blob
+  if (src instanceof Blob) {
+    blob = src
+  } else if (src instanceof ArrayBuffer) {
+    blob = new Blob([src], { type: mime ?? 'application/octet-stream' })
+  } else {
+    // Uint8Array: 复制到新的 ArrayBuffer，避免与外部共享底层
+    const copy = new Uint8Array(src.byteLength)
+    copy.set(src)
+    blob = new Blob([copy.buffer], { type: mime ?? 'application/octet-stream' })
+  }
+  const url = URL.createObjectURL(blob)
+  return { url, revoke: () => URL.revokeObjectURL(url) }
+}
+
+/**
+ * RFC-4180 子集 CSV 解析：支持 "" 转义、\r\n 与 \n 换行、, 分隔。
+ * 为性能起见采用状态机而非 split。
+ */
+export function parseCsv(text: string): string[][] {
+  const rows: string[][] = []
+  let row: string[] = []
+  let field = ''
+  let inQuotes = false
+  const len = text.length
+
+  for (let i = 0; i < len; i++) {
+    const ch = text[i]
+
+    if (inQuotes) {
+      if (ch === '"') {
+        if (text[i + 1] === '"') {
+          field += '"'
+          i++
+        } else {
+          inQuotes = false
+        }
+      } else {
+        field += ch
+      }
+      continue
+    }
+
+    if (ch === '"') {
+      inQuotes = true
+    } else if (ch === ',') {
+      row.push(field)
+      field = ''
+    } else if (ch === '\n') {
+      row.push(field)
+      rows.push(row)
+      row = []
+      field = ''
+    } else if (ch === '\r') {
+      // swallow CR; LF will commit the row
+    } else {
+      field += ch
+    }
+  }
+
+  // 最后一行
+  if (field.length > 0 || row.length > 0) {
+    row.push(field)
+    rows.push(row)
+  }
+  return rows
+}
+
+export function formatBytes(bytes?: number): string {
+  if (bytes === undefined || bytes === null || Number.isNaN(bytes)) return '-'
+  if (bytes < 1024) return `${bytes} B`
+  const units = ['KB', 'MB', 'GB', 'TB']
+  let v = bytes / 1024
+  let i = 0
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024
+    i++
+  }
+  return `${v.toFixed(v >= 10 ? 0 : 1)} ${units[i]}`
+}
+
+/** 触发浏览器下载 */
+export async function downloadFile(file: FileViewerItem): Promise<void> {
+  let href: string
+  let revoke: (() => void) | undefined
+  if (typeof file.src === 'string') {
+    href = file.src
+  } else {
+    const url = toBlobUrl(file.src, file.mime)
+    href = url.url
+    revoke = url.revoke
+  }
+  const a = document.createElement('a')
+  a.href = href
+  a.download = file.name
+  a.rel = 'noopener'
+  a.style.display = 'none'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  if (revoke) setTimeout(revoke, 4000)
+}

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

@@ -0,0 +1 @@
+export { default as UFileViewer } from './file-viewer.vue'

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

@@ -0,0 +1,78 @@
+<template>
+  <u-scroll tag="div" :class="cls.e('docx')">
+    <div ref="container" :class="cls.e('docx-body')" />
+    <div v-if="loading" :class="cls.e('loading')">加载中…</div>
+  </u-scroll>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+
+import type { FileViewerItem } from '../../../types/file-viewer'
+import { UScroll } from '../../scroll'
+
+defineOptions({ name: 'FileViewerDocxPreviewer' })
+
+const props = defineProps<{ file: FileViewerItem }>()
+
+const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
+
+const cls = bem('file-viewer')
+
+const container = useTemplateRef<HTMLDivElement>('container')
+const loading = ref(true)
+
+let controller: AbortController | undefined
+
+async function load() {
+  controller?.abort()
+  controller = new AbortController()
+  const signal = controller.signal
+  loading.value = true
+
+  try {
+    const [{ toArrayBuffer }, docx] = await Promise.all([
+      import('../helper'),
+      import('docx-preview')
+    ])
+
+    const buf = await toArrayBuffer(props.file.src, signal)
+    if (signal.aborted) return
+    const el = container.value
+    if (!el) return
+    el.innerHTML = ''
+
+    await docx.renderAsync(buf, el, undefined, {
+      className: 'u-file-viewer__docx-doc',
+      inWrapper: true,
+      ignoreWidth: false,
+      ignoreHeight: false,
+      ignoreFonts: false,
+      breakPages: true,
+      experimental: false,
+      useBase64URL: false,
+      renderChanges: false,
+      renderHeaders: true,
+      renderFooters: true,
+      renderFootnotes: true
+    })
+  } catch (err) {
+    if ((err as { name?: string })?.name === 'AbortError') return
+    emit('error', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => props.file,
+  () => load(),
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  controller?.abort()
+  if (container.value) container.value.innerHTML = ''
+})
+</script>

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

@@ -0,0 +1,64 @@
+<template>
+  <div :class="[cls.e('image'), bem.is('actual', actual)]">
+    <img
+      v-if="url"
+      :src="url"
+      :alt="file.name"
+      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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+
+import type { FileViewerItem } from '../../../types/file-viewer'
+
+defineOptions({ name: 'FileViewerImagePreviewer' })
+
+const props = defineProps<{ file: FileViewerItem }>()
+
+const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
+
+const cls = bem('file-viewer')
+
+const url = shallowRef<string>('')
+const loading = ref(true)
+const failed = ref(false)
+const actual = ref(false)
+
+let revoke: (() => void) | undefined
+
+async function load() {
+  loading.value = true
+  failed.value = false
+  revoke?.()
+  const { toBlobUrl } = await import('../helper')
+  const r = toBlobUrl(props.file.src, props.file.mime)
+  url.value = r.url
+  revoke = r.revoke
+}
+
+function onImgError(e: Event) {
+  loading.value = false
+  failed.value = true
+  emit('error', e)
+}
+
+watch(
+  () => props.file,
+  () => load(),
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  revoke?.()
+  url.value = ''
+})
+</script>

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

@@ -0,0 +1,90 @@
+<template>
+  <div :class="cls.e('pdf')">
+    <div v-if="!engine || isLoading" :class="cls.e('loading')">正在加载 PDF 引擎…</div>
+    <EmbedPDF v-else-if="pdfUrl" :engine="engine" :plugins="plugins" v-slot="{ activeDocumentId }">
+      <DocumentContent
+        v-if="activeDocumentId"
+        :document-id="activeDocumentId"
+        v-slot="{ isLoaded }"
+      >
+        <Viewport v-if="isLoaded" :document-id="activeDocumentId" :class="cls.e('pdf-viewport')">
+          <Scroller :document-id="activeDocumentId">
+            <template #default="{ page }">
+              <div
+                :class="cls.e('pdf-page')"
+                :style="{ width: page.width + 'px', height: page.height + 'px' }"
+              >
+                <RenderLayer :document-id="activeDocumentId" :page-index="page.pageIndex" />
+              </div>
+            </template>
+          </Scroller>
+        </Viewport>
+      </DocumentContent>
+    </EmbedPDF>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { createPluginRegistration } from '@embedpdf/core'
+import { EmbedPDF } from '@embedpdf/core/vue'
+import { usePdfiumEngine } from '@embedpdf/engines/vue'
+import {
+  DocumentContent,
+  DocumentManagerPluginPackage
+} from '@embedpdf/plugin-document-manager/vue'
+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 type { FileViewerItem } from '../../../types/file-viewer'
+
+defineOptions({ name: 'FileViewerPdfPreviewer' })
+
+const props = defineProps<{ file: FileViewerItem }>()
+
+const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
+
+const cls = bem('file-viewer')
+
+const { engine, isLoading, error } = usePdfiumEngine()
+
+const pdfUrl = shallowRef<string>('')
+let revoke: (() => void) | undefined
+
+async function load() {
+  revoke?.()
+  const { toBlobUrl } = await import('../helper')
+  const r = toBlobUrl(props.file.src, props.file.mime ?? 'application/pdf')
+  pdfUrl.value = r.url
+  revoke = r.revoke
+}
+
+const plugins = computed(() => {
+  if (!pdfUrl.value) return []
+  return [
+    createPluginRegistration(DocumentManagerPluginPackage, {
+      initialDocuments: [{ url: pdfUrl.value }]
+    }),
+    createPluginRegistration(ViewportPluginPackage),
+    createPluginRegistration(ScrollPluginPackage),
+    createPluginRegistration(RenderPluginPackage)
+  ]
+})
+
+watch(
+  () => props.file,
+  () => load(),
+  { immediate: true }
+)
+
+watch(error, (err) => {
+  if (err) emit('error', err)
+})
+
+onBeforeUnmount(() => {
+  revoke?.()
+  pdfUrl.value = ''
+})
+</script>

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

@@ -0,0 +1,210 @@
+<template>
+  <div :class="cls.e('sheet')">
+    <div v-if="truncated" :class="cls.e('sheet-note')">
+      仅展示前 {{ renderedRows.toLocaleString() }} 行（共 {{ totalRows.toLocaleString() }} 行）
+    </div>
+    <div v-if="sheets.length > 1" :class="cls.e('sheet-tabs')">
+      <button
+        v-for="(s, i) in sheets"
+        :key="s.name"
+        :class="[cls.e('sheet-tab'), bem.is('active', i === activeSheetIndex)]"
+        @click="activeSheetIndex = i"
+      >
+        {{ s.name }}
+      </button>
+    </div>
+    <div ref="container" :class="cls.e('sheet-stage')" />
+    <div v-if="loading" :class="cls.e('loading')">加载中…</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { onBeforeUnmount, ref, shallowRef, useTemplateRef, watch } from 'vue'
+
+import type { FileViewerItem } from '../../../types/file-viewer'
+
+defineOptions({ name: 'FileViewerSheetPreviewer' })
+
+const props = withDefaults(
+  defineProps<{
+    file: FileViewerItem
+    maxRows?: number
+  }>(),
+  { maxRows: 50_000 }
+)
+
+const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
+
+const cls = bem('file-viewer')
+
+const container = useTemplateRef<HTMLDivElement>('container')
+const loading = ref(true)
+const truncated = ref(false)
+const totalRows = ref(0)
+const renderedRows = ref(0)
+
+interface SheetData {
+  name: string
+  headers: string[]
+  rows: string[][]
+  totalCount: number
+}
+
+const sheets = shallowRef<SheetData[]>([])
+const activeSheetIndex = ref(0)
+
+let controller: AbortController | undefined
+let instance: { release?: () => void; resize?: () => void } | undefined
+let resizeObserver: ResizeObserver | undefined
+
+async function load() {
+  controller?.abort()
+  controller = new AbortController()
+  const signal = controller.signal
+  loading.value = true
+  sheets.value = []
+  activeSheetIndex.value = 0
+
+  try {
+    const ext = props.file.name.slice(props.file.name.lastIndexOf('.') + 1).toLowerCase()
+    const { toArrayBuffer, parseCsv } = await import('../helper')
+    const buf = await toArrayBuffer(props.file.src, signal)
+    if (signal.aborted) return
+
+    if (ext === 'csv') {
+      const text = new TextDecoder('utf-8', { fatal: false }).decode(buf)
+      const parsed = parseCsv(text).filter((row) => row.some((c) => c.length > 0))
+      const headers = parsed[0] ?? []
+      const rows = parsed.slice(1)
+      sheets.value = [
+        {
+          name: props.file.name,
+          headers: headers.map((h, i) => String(h) || `Column ${i + 1}`),
+          rows,
+          totalCount: rows.length
+        }
+      ]
+    } else {
+      const { readWorkbook } = await import('@cat-kit/excel')
+      const workbook = await readWorkbook(new Uint8Array(buf))
+      if (signal.aborted) return
+      sheets.value = workbook.worksheets.map((ws) => {
+        const wsRows = ws.getRows()
+        const firstRow = wsRows[0]
+        const headers = firstRow ? firstRow.toValues().map((v) => cellToString(v)) : []
+        const rows = wsRows.slice(1).map((r) => r.toValues().map(cellToString))
+        return {
+          name: ws.name,
+          headers: headers.map((h, i) => h || `Column ${i + 1}`),
+          rows,
+          totalCount: rows.length
+        }
+      })
+    }
+
+    await renderActive()
+  } catch (err) {
+    if ((err as { name?: string })?.name === 'AbortError') return
+    emit('error', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function cellToString(v: unknown): string {
+  if (v === null || v === undefined) return ''
+  if (typeof v === 'string') return v
+  if (typeof v === 'number' || typeof v === 'boolean') return String(v)
+  if (v instanceof Date) return v.toLocaleString()
+  if (typeof v === 'object' && v !== null && 'formula' in v) {
+    const f = v as { formula: string; result?: unknown }
+    if (f.result !== undefined && f.result !== null) return cellToString(f.result)
+    return `=${f.formula}`
+  }
+  return String(v)
+}
+
+async function renderActive() {
+  const sheet = sheets.value[activeSheetIndex.value]
+  if (!sheet || !container.value) return
+
+  releaseInstance()
+
+  const limit = props.maxRows > 0 ? Math.min(props.maxRows, sheet.rows.length) : sheet.rows.length
+  totalRows.value = sheet.totalCount
+  renderedRows.value = limit
+  truncated.value = props.maxRows > 0 && sheet.rows.length > props.maxRows
+
+  const columns = sheet.headers.map((h, i) => ({
+    field: 'c' + i,
+    title: h,
+    width: 'auto' as const
+  }))
+
+  const records: Record<string, string>[] = []
+  for (let i = 0; i < limit; i++) {
+    const row = sheet.rows[i]
+    if (!row) continue
+    const record: Record<string, string> = {}
+    for (let j = 0; j < columns.length; j++) {
+      record['c' + j] = row[j] ?? ''
+    }
+    records.push(record)
+  }
+
+  const VTable = await import('@visactor/vtable')
+  if (!container.value) return
+
+  instance = new VTable.ListTable(container.value, {
+    records,
+    columns,
+    widthMode: 'standard',
+    heightMode: 'standard',
+    defaultRowHeight: 32,
+    defaultHeaderRowHeight: 36,
+    autoFillWidth: true,
+    frozenColCount: 0,
+    theme: (VTable.themes.ARCO ?? VTable.themes.DEFAULT).extends({
+      defaultStyle: {
+        borderLineWidth: 1
+      }
+    })
+  })
+}
+
+function releaseInstance() {
+  if (instance && typeof instance.release === 'function') {
+    try {
+      instance.release()
+    } catch {
+      /* noop */
+    }
+  }
+  instance = undefined
+}
+
+watch(
+  () => props.file,
+  () => load(),
+  { immediate: true }
+)
+
+watch(activeSheetIndex, () => renderActive())
+
+watch(container, (el) => {
+  resizeObserver?.disconnect()
+  if (!el) return
+  resizeObserver = new ResizeObserver(() => {
+    instance?.resize?.()
+  })
+  resizeObserver.observe(el)
+})
+
+onBeforeUnmount(() => {
+  controller?.abort()
+  resizeObserver?.disconnect()
+  releaseInstance()
+  sheets.value = []
+})
+</script>