@veltra/desktop 1.0.8 → 1.0.9

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

@@ -0,0 +1,311 @@
+<template>
+  <Teleport to="body" :disabled="!isModal">
+    <transition :name="isModal ? 'u-file-viewer-modal' : ''">
+      <div
+        v-if="!isModal || openModel"
+        :class="[cls.b, bem.is('modal', isModal)]"
+        :tabindex="isModal ? -1 : undefined"
+        ref="rootRef"
+        @mousedown.self="handleBackdropMousedown"
+      >
+        <div v-if="isModal" :class="cls.e('backdrop')" @mousedown.self="handleBackdropMousedown" />
+        <div :class="cls.e('inner')">
+          <aside v-if="showSidebar" :class="cls.e('sidebar')" :style="{ width: sidebarWidthCss }">
+            <header :class="cls.e('sidebar-head')">
+              <span :class="cls.e('sidebar-title')">文件</span>
+              <span :class="cls.e('sidebar-count')">{{ normalizedFiles.length }}</span>
+            </header>
+            <u-scroll tag="ul" :class="cls.e('list')">
+              <li
+                v-for="f in normalizedFiles"
+                :key="f.id"
+                :class="[cls.e('item'), bem.is('active', f.id === activeId)]"
+                @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>
+              </li>
+              <li v-if="!normalizedFiles.length" :class="cls.e('list-empty')">
+                <u-empty text="暂无文件" :size="32" />
+              </li>
+            </u-scroll>
+          </aside>
+
+          <section :class="cls.e('stage')">
+            <header :class="cls.e('stage-head')">
+              <div :class="cls.e('stage-title')">
+                <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>
+              </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>
+                <button
+                  v-if="downloadable && activeFile"
+                  :class="[cls.e('action'), cls.em('action', 'primary')]"
+                  type="button"
+                  @click="download"
+                >
+                  下载
+                </button>
+                <button
+                  v-if="isModal"
+                  :class="[cls.e('action'), cls.em('action', 'icon')]"
+                  type="button"
+                  aria-label="关闭预览"
+                  title="关闭"
+                  @click="handleClose"
+                >
+                  <u-icon :size="16">
+                    <Close />
+                  </u-icon>
+                </button>
+              </div>
+            </header>
+            <div :class="cls.e('body')">
+              <transition name="u-file-viewer-fade" mode="out-in">
+                <component
+                  :is="PreviewerMap[activeFile.kind]"
+                  v-if="activeFile"
+                  :key="activeFile.id"
+                  :file="activeFile"
+                  :max-rows="sheetMaxRows"
+                  @error="handleChildError"
+                />
+                <div v-else :class="cls.e('empty')">
+                  <u-empty text="暂无可预览文件" />
+                </div>
+              </transition>
+            </div>
+          </section>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { Close } from '@veltra/icons/normal'
+import { bem, withUnit } from '@veltra/utils'
+import { computed, defineAsyncComponent, nextTick, onBeforeUnmount, shallowRef, watch } from 'vue'
+
+import type {
+  _FileViewerExposed,
+  FileViewerEmits,
+  FileViewerItem,
+  FileViewerKind,
+  FileViewerProps
+} from '../../types/file-viewer'
+import { UEmpty } from '../empty'
+import { UIcon } from '../icon'
+import { UScroll } from '../scroll'
+import { FILE_VIEWER_KIND_LABEL, downloadFile, formatBytes, inferKind } from './helper'
+
+defineOptions({
+  name: 'FileViewer',
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<FileViewerProps>(), {
+  modelValue: undefined,
+  sidebarWidth: '280px',
+  sheetMaxRows: 50_000,
+  downloadable: true,
+  open: undefined,
+  closeOnClickBackdrop: true,
+  closeOnEsc: true
+})
+
+const emit = defineEmits<FileViewerEmits>()
+
+const cls = bem('file-viewer')
+
+const activeId = defineModel<string | undefined>('modelValue', { default: undefined })
+const openModel = defineModel<boolean | undefined>('open', { default: undefined })
+
+const rootRef = shallowRef<HTMLDivElement>()
+
+const PreviewerMap: Record<FileViewerKind, ReturnType<typeof defineAsyncComponent>> = {
+  image: defineAsyncComponent(() => import('./previewers/image-previewer.vue')),
+  video: defineAsyncComponent(() => import('./previewers/video-previewer.vue')),
+  pdf: defineAsyncComponent(() => import('./previewers/pdf-previewer.vue')),
+  sheet: defineAsyncComponent(() => import('./previewers/sheet-previewer.vue')),
+  docx: defineAsyncComponent(() => import('./previewers/docx-previewer.vue')),
+  text: defineAsyncComponent(() => import('./previewers/text-previewer.vue'))
+}
+
+interface NormalizedFile extends FileViewerItem {
+  id: string
+  kind: FileViewerKind
+}
+
+const normalizedFiles = computed<NormalizedFile[]>(() =>
+  props.files.map((f, i) => ({
+    ...f,
+    id: f.id ?? `file-${i}`,
+    kind: inferKind(f.name, f.kind)
+  }))
+)
+
+const activeFile = computed<NormalizedFile | undefined>(() =>
+  normalizedFiles.value.find((f) => f.id === activeId.value)
+)
+
+const activeIndex = computed(() => normalizedFiles.value.findIndex((f) => f.id === activeId.value))
+
+const hasPrev = computed(() => activeIndex.value > 0)
+const hasNext = computed(
+  () => activeIndex.value >= 0 && activeIndex.value < normalizedFiles.value.length - 1
+)
+
+const showSidebar = computed(() => props.sidebarWidth !== false && props.sidebarWidth !== 0)
+
+const sidebarWidthCss = computed(() => {
+  const w = props.sidebarWidth
+  if (w === false || w === 0) return undefined
+  return withUnit(w ?? '280px', 'px')
+})
+
+/** 是否启用模态模式：只要父组件显式传入 open（含 v-model:open），即进入模态 */
+const isModal = computed(() => openModel.value !== undefined)
+
+function label(kind: FileViewerKind): string {
+  return FILE_VIEWER_KIND_LABEL[kind]
+}
+
+function activate(id: string) {
+  if (activeId.value === id) return
+  activeId.value = id
+  const f = normalizedFiles.value.find((x) => x.id === id)
+  if (f) emit('change', f)
+}
+
+function prev() {
+  const i = activeIndex.value
+  if (i <= 0) return
+  const target = normalizedFiles.value[i - 1]
+  if (target) activate(target.id)
+}
+
+function next() {
+  const i = activeIndex.value
+  if (i < 0 || i >= normalizedFiles.value.length - 1) return
+  const target = normalizedFiles.value[i + 1]
+  if (target) activate(target.id)
+}
+
+async function download() {
+  if (!activeFile.value) return
+  try {
+    await downloadFile(activeFile.value)
+  } catch (err) {
+    emit('error', { file: activeFile.value, error: err })
+  }
+}
+
+function handleChildError(err: unknown) {
+  if (!activeFile.value) return
+  emit('error', { file: activeFile.value, error: err })
+}
+
+function handleClose() {
+  if (!isModal.value) return
+  openModel.value = false
+}
+
+function handleWindowKeydown(e: KeyboardEvent) {
+  if (e.key !== 'Escape') return
+  if (!isModal.value || !openModel.value) return
+  if (props.closeOnEsc === false) return
+  e.stopPropagation()
+  handleClose()
+}
+
+function handleBackdropMousedown() {
+  if (!isModal.value) return
+  if (props.closeOnClickBackdrop === false) return
+  handleClose()
+}
+
+watch(
+  normalizedFiles,
+  (files) => {
+    if (!files.length) {
+      activeId.value = undefined
+      return
+    }
+    if (!activeId.value || !files.some((f) => f.id === activeId.value)) {
+      activeId.value = files[0]!.id
+    }
+  },
+  { immediate: true }
+)
+
+// 模态打开时：锁定 body 滚动 + 让容器获得焦点以便接收 ESC
+let previousBodyOverflow = ''
+let isBodyLocked = false
+
+function lockBody() {
+  if (isBodyLocked || typeof document === 'undefined') return
+  previousBodyOverflow = document.body.style.overflow
+  document.body.style.overflow = 'hidden'
+  isBodyLocked = true
+}
+
+function unlockBody() {
+  if (!isBodyLocked || typeof document === 'undefined') return
+  document.body.style.overflow = previousBodyOverflow
+  isBodyLocked = false
+}
+
+watch(
+  [isModal, openModel],
+  ([modal, open]) => {
+    if (modal && open) {
+      lockBody()
+      nextTick(() => {
+        rootRef.value?.focus()
+      })
+      if (typeof window !== 'undefined') {
+        window.addEventListener('keydown', handleWindowKeydown, true)
+      }
+    } else {
+      unlockBody()
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('keydown', handleWindowKeydown, true)
+      }
+    }
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  unlockBody()
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('keydown', handleWindowKeydown, true)
+  }
+})
+
+defineExpose<_FileViewerExposed>({
+  activeId,
+  activate,
+  next,
+  prev
+})
+</script>

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>