@veltra/desktop 1.0.7 → 1.0.9

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

@@ -0,0 +1,76 @@
+<template>
+  <u-scroll tag="div" :class="cls.e('text')">
+    <div v-if="truncated" :class="cls.e('sheet-note')">
+      ⚠ 文件过大，仅展示前 {{ formatKb(maxBytes) }}
+    </div>
+    <pre :class="cls.e('text-pre')"><code>{{ text }}</code></pre>
+    <div v-if="loading" :class="cls.e('loading')">加载中…</div>
+  </u-scroll>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+
+import type { FileViewerItem } from '../../../types/file-viewer'
+import { UScroll } from '../../scroll'
+
+defineOptions({ name: 'FileViewerTextPreviewer' })
+
+const props = withDefaults(
+  defineProps<{
+    file: FileViewerItem
+    /** 单文件最大读取字节数（超出截断），默认 2MB */
+    maxBytes?: number
+  }>(),
+  { maxBytes: 2 * 1024 * 1024 }
+)
+
+const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
+
+const cls = bem('file-viewer')
+
+const text = shallowRef('')
+const truncated = ref(false)
+const loading = ref(true)
+
+let controller: AbortController | undefined
+
+function formatKb(bytes: number): string {
+  if (bytes >= 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+  return `${(bytes / 1024).toFixed(0)} KB`
+}
+
+async function load() {
+  controller?.abort()
+  controller = new AbortController()
+  loading.value = true
+  truncated.value = false
+  text.value = ''
+
+  try {
+    const { toArrayBuffer } = await import('../helper')
+    const buf = await toArrayBuffer(props.file.src, controller.signal)
+    const max = props.maxBytes
+    const view = max > 0 && buf.byteLength > max ? new Uint8Array(buf, 0, max) : new Uint8Array(buf)
+    truncated.value = max > 0 && buf.byteLength > max
+    text.value = new TextDecoder('utf-8', { fatal: false }).decode(view)
+  } 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()
+  text.value = ''
+})
+</script>

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

@@ -0,0 +1,72 @@
+<template>
+  <div :class="cls.e('video')">
+    <video
+      v-if="url"
+      ref="videoRef"
+      :src="url"
+      :type="file.mime"
+      controls
+      preload="metadata"
+      playsinline
+      @error="onVideoError"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
+
+import type { FileViewerItem } from '../../../types/file-viewer'
+
+defineOptions({ name: 'FileViewerVideoPreviewer' })
+
+const props = defineProps<{ file: FileViewerItem }>()
+
+const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
+
+const cls = bem('file-viewer')
+
+const url = shallowRef<string>('')
+const videoRef = useTemplateRef<HTMLVideoElement>('videoRef')
+
+let revoke: (() => void) | undefined
+let unmounting = false
+
+async function load() {
+  revoke?.()
+  const { toBlobUrl } = await import('../helper')
+  const r = toBlobUrl(props.file.src, props.file.mime)
+  url.value = r.url
+  revoke = r.revoke
+}
+
+function onVideoError(e: Event) {
+  if (unmounting) return
+  const v = e.target as HTMLVideoElement | null
+  if (!v?.src) return
+  emit('error', e)
+}
+
+watch(
+  () => props.file,
+  () => load(),
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  unmounting = true
+  const v = videoRef.value
+  if (v) {
+    v.pause()
+    v.removeAttribute('src')
+    try {
+      v.load()
+    } catch {
+      /* noop */
+    }
+  }
+  revoke?.()
+  url.value = ''
+})
+</script>

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

@@ -0,0 +1,504 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+
+@include m.b(file-viewer) {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 480px;
+  color: fn.use-var(text-color, main);
+  background: fn.use-var(bg-color, top);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid fn.use-var(border, color);
+
+  @include m.e(inner) {
+    // 内嵌模式下透明包装，直接把子节点暴露为根的 flex 子项
+    display: contents;
+  }
+
+  @include m.is(modal) {
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: clamp(16px, 3vw, 48px);
+    min-height: 0;
+    max-height: none;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    overflow: visible;
+    outline: none;
+  }
+
+  // 模态下的后代覆盖（必须用 & 自拼接，避免 m.e() 误拼为 .is-modal__xxx）
+  &.is-modal &__backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.52);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+  }
+
+  &.is-modal &__inner {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    max-width: 1440px;
+    background: fn.use-var(bg-color, top);
+    border: 1px solid fn.use-var(border, color);
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow:
+      0 24px 64px rgba(15, 23, 42, 0.32),
+      0 2px 8px rgba(15, 23, 42, 0.18);
+    z-index: 1;
+  }
+
+  @include m.e(sidebar) {
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid fn.use-var(border, color);
+    background: fn.use-var(bg-color, middle);
+    flex-shrink: 0;
+    min-width: 0;
+  }
+
+  @include m.e(sidebar-head) {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding: 18px 20px 10px;
+    color: fn.use-var(text-color, title);
+  }
+
+  @include m.e(sidebar-title) {
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  @include m.e(sidebar-count) {
+    font-size: 12px;
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(list) {
+    flex: 1;
+    min-height: 0;
+    padding: 4px 10px 16px;
+  }
+
+  @include m.e(list-empty) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 0;
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(item) {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    padding: 10px 12px;
+    margin: 2px 0;
+    border-radius: 8px;
+    cursor: pointer;
+    transition:
+      background 0.18s ease,
+      color 0.18s ease,
+      transform 0.18s ease;
+
+    &:hover {
+      background: fn.use-var(bg-color, hover);
+    }
+
+    @include m.is(active) {
+      background: color-mix(in srgb, #{fn.use-var(color, primary)} 14%, transparent);
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(item-meta) {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    gap: 2px;
+    flex: 1;
+  }
+
+  @include m.e(item-name) {
+    font-size: 13px;
+    line-height: 1.4;
+    @include m.ellipsis;
+  }
+
+  @include m.e(item-size) {
+    font-size: 11px;
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(badge) {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 28px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    color: #fff;
+    background: fn.use-var(text-color, placeholder);
+
+    @include m.em(badge, image) {
+      background: #0ea5e9;
+    }
+
+    @include m.em(badge, video) {
+      background: #ef4444;
+    }
+
+    @include m.em(badge, pdf) {
+      background: #dc2626;
+    }
+
+    @include m.em(badge, sheet) {
+      background: #16a34a;
+    }
+
+    @include m.em(badge, docx) {
+      background: #2563eb;
+    }
+
+    @include m.em(badge, text) {
+      background: #64748b;
+    }
+  }
+
+  @include m.e(stage) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  @include m.e(stage-head) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 14px 22px;
+    border-bottom: 1px solid fn.use-var(border, color);
+    background: fn.use-var(bg-color, top);
+    flex-shrink: 0;
+  }
+
+  @include m.e(stage-title) {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  @include m.e(stage-name) {
+    font-size: 14px;
+    font-weight: 600;
+    color: fn.use-var(text-color, title);
+    @include m.ellipsis;
+  }
+
+  @include m.e(stage-sub) {
+    font-size: 12px;
+    color: fn.use-var(text-color, second);
+    flex-shrink: 0;
+  }
+
+  @include m.e(stage-actions) {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  @include m.e(action) {
+    height: 30px;
+    padding: 0 14px;
+    border-radius: 6px;
+    border: 1px solid fn.use-var(border, color);
+    background: transparent;
+    color: inherit;
+    font-size: 12px;
+    cursor: pointer;
+    transition:
+      background 0.18s,
+      border-color 0.18s,
+      color 0.18s;
+
+    &:not(:disabled):hover {
+      border-color: fn.use-var(color, primary);
+      color: fn.use-var(color, primary);
+    }
+
+    &:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+
+    @include m.em(action, primary) {
+      background: fn.use-var(color, primary);
+      border-color: fn.use-var(color, primary);
+      color: #fff;
+
+      &:not(:disabled):hover {
+        color: #fff;
+        filter: brightness(1.05);
+      }
+    }
+
+    @include m.em(action, icon) {
+      width: 30px;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 4px;
+      color: fn.use-var(text-color, second);
+
+      &:not(:disabled):hover {
+        border-color: fn.use-var(color, danger);
+        color: fn.use-var(color, danger);
+      }
+    }
+  }
+
+  @include m.e(body) {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    background: fn.use-var(bg-color, bottom);
+    overflow: hidden;
+  }
+
+  @include m.e(empty) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(image) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    user-select: none;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      transition: transform 0.3s ease;
+      border-radius: 6px;
+      box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
+    }
+
+    @include m.is(actual) {
+      img {
+        max-width: none;
+        max-height: none;
+        object-fit: none;
+        cursor: zoom-out;
+      }
+    }
+  }
+
+  @include m.e(video) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #000;
+
+    video {
+      max-width: 100%;
+      max-height: 100%;
+      outline: none;
+    }
+  }
+
+  @include m.e(text) {
+    position: absolute;
+    inset: 0;
+  }
+
+  @include m.e(text-pre) {
+    margin: 0;
+    padding: 20px 24px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 12.5px;
+    line-height: 1.55;
+    white-space: pre;
+    tab-size: 2;
+    color: fn.use-var(text-color, main);
+  }
+
+  @include m.e(pdf) {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  @include m.e(pdf-viewport) {
+    width: 100%;
+    height: 100%;
+    background: fn.use-var(bg-color, middle);
+  }
+
+  @include m.e(pdf-page) {
+    margin: 16px auto;
+    background: #fff;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+  }
+
+  @include m.e(docx) {
+    position: absolute;
+    inset: 0;
+    background: fn.use-var(bg-color, middle);
+  }
+
+  @include m.e(docx-body) {
+    padding: 24px;
+
+    :deep(.u-file-viewer__docx-doc) {
+      margin: 0 auto;
+      background: #fff;
+      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+      color: #222;
+    }
+  }
+
+  @include m.e(sheet) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    background: fn.use-var(bg-color, middle);
+  }
+
+  @include m.e(sheet-note) {
+    padding: 8px 16px;
+    font-size: 12px;
+    color: fn.use-var(text-color, second);
+    background: fn.use-var(bg-color, top);
+    border-bottom: 1px solid fn.use-var(border, color);
+    flex-shrink: 0;
+  }
+
+  @include m.e(sheet-tabs) {
+    display: flex;
+    gap: 4px;
+    padding: 8px 12px;
+    border-bottom: 1px solid fn.use-var(border, color);
+    background: fn.use-var(bg-color, top);
+    flex-shrink: 0;
+    overflow-x: auto;
+  }
+
+  @include m.e(sheet-tab) {
+    flex-shrink: 0;
+    height: 28px;
+    padding: 0 12px;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    font-size: 12px;
+    cursor: pointer;
+    transition:
+      background 0.18s,
+      color 0.18s;
+
+    &:hover {
+      background: fn.use-var(bg-color, hover);
+      color: fn.use-var(text-color, main);
+    }
+
+    @include m.is(active) {
+      background: color-mix(in srgb, #{fn.use-var(color, primary)} 14%, transparent);
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(sheet-stage) {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  @include m.e(loading) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: fn.use-var(text-color, second);
+    font-size: 13px;
+    pointer-events: none;
+  }
+}
+
+.u-file-viewer-fade-enter-active,
+.u-file-viewer-fade-leave-active {
+  transition:
+    opacity 0.22s ease,
+    transform 0.22s ease;
+}
+
+.u-file-viewer-fade-enter-from,
+.u-file-viewer-fade-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+
+.u-file-viewer-modal-enter-active,
+.u-file-viewer-modal-leave-active {
+  transition: opacity 0.22s ease;
+
+  .u-file-viewer__inner {
+    transition:
+      opacity 0.24s ease,
+      transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .u-file-viewer__backdrop {
+    transition: opacity 0.22s ease;
+  }
+}
+
+.u-file-viewer-modal-enter-from,
+.u-file-viewer-modal-leave-to {
+  opacity: 1;
+
+  .u-file-viewer__inner {
+    opacity: 0;
+    transform: translateY(12px) scale(0.985);
+  }
+
+  .u-file-viewer__backdrop {
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,4 @@
+import '../empty/style'
+import '../icon/style'
+import '../scroll/style'
+import './style.scss'

package/src/components/form-item/style.scss

@@ -75,9 +75,8 @@ $root-name: form-item;
 
   @include m.e(error) {
     width: 100%;
-    --height: #{fn.use-var(font-size-main, default)};
-    height: calc(var(--height) + 4px);
-    line-height: calc(var(--height) + 2px);
+    height: calc(#{fn.use-var(font-size-main, default)} + 4px);
+    line-height: calc(#{fn.use-var(font-size-main, default)} + 2px);
     overflow: hidden;
     color: fn.use-var(text-color, main);
     font-size: fn.use-var(font-size-assist, default);

package/src/components/index.ts

@@ -139,3 +139,5 @@ export * from './tree'
 export * from './watermark'
 
 export * from './progress-nodes'
+
+export * from './file-viewer'