@veltra/desktop 1.1.12 → 1.1.14

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

@@ -78,7 +78,7 @@
                     </u-icon>
                   </button>
                 </span>
-                <span v-if="isTransformable" :class="cls.e('action-group')">
+                <span v-if="isZoomable" :class="cls.e('action-group')">
                   <button
                     :class="[cls.e('action'), cls.em('action', 'icon')]"
                     :disabled="zoomOutDisabled"
@@ -154,19 +154,22 @@
                     bem.is('pannable', canPan),
                     bem.is('dragging', isDragging)
                   ]"
-                  @pointerdown="handleViewportPointerDown"
-                  @pointermove="handleViewportPointerMove"
-                  @pointerup="handleViewportPointerEnd"
-                  @pointercancel="handleViewportPointerEnd"
+                  @pointerdown.capture="handleViewportPointerDown"
+                  @pointermove.capture="handleViewportPointerMove"
+                  @pointerup.capture="handleViewportPointerEnd"
+                  @pointercancel.capture="handleViewportPointerEnd"
+                  @wheel="handleViewportWheel"
                   @dblclick="handleViewportDblclick"
                 >
                   <component
                     :is="PreviewerMap[activeFile.kind]"
+                    ref="previewerRef"
                     :file="activeFile"
                     :max-rows="sheetMaxRows"
                     :class="isTransformable ? cls.e('previewer') : undefined"
                     :style="previewerStyle"
                     @error="handleChildError"
+                    @zoom-change="handlePdfZoomChange"
                   />
                 </div>
                 <div v-else :class="cls.e('empty')">
@@ -236,14 +239,24 @@ const cls = bem('file-viewer')
 
 const MIN_SCALE = 0.5
 const MAX_SCALE = 3
-const SCALE_STEP = 0.25
-const TRANSFORMABLE_KINDS = new Set<FileViewerKind>(['image', 'pdf', 'docx'])
+/** 每次缩放固定增减 10% */
+const SCALE_STEP = 0.1
+/** 使用 CSS transform 缩放的类型（PDF 由 EmbedPDF zoom 插件处理） */
+const TRANSFORMABLE_KINDS = new Set<FileViewerKind>(['image'])
+/** 工具栏显示缩放控件的类型 */
+const ZOOMABLE_KINDS = new Set<FileViewerKind>(['image', 'pdf'])
 
 const activeId = defineModel<string | undefined>('modelValue', { default: undefined })
 const openModel = defineModel<boolean | undefined>('open', { default: undefined })
 
 const rootRef = shallowRef<HTMLDivElement>()
+const previewerRef = shallowRef<{
+  zoomIn?: () => void
+  zoomOut?: () => void
+  resetZoom?: () => void
+}>()
 const scale = ref(1)
+const pdfZoomLevel = ref(1)
 const offsetX = ref(0)
 const offsetY = ref(0)
 const isDragging = ref(false)
@@ -310,17 +323,26 @@ const isTransformable = computed(
   () => !!activeFile.value && TRANSFORMABLE_KINDS.has(activeFile.value.kind)
 )
 
+const isZoomable = computed(() => !!activeFile.value && ZOOMABLE_KINDS.has(activeFile.value.kind))
+
+const isPdfActive = computed(() => activeFile.value?.kind === 'pdf')
+
 const canPan = computed(() => isTransformable.value && scale.value > 1)
 
-const zoomPercent = computed(() => `${Math.round(scale.value * 100)}%`)
+const displayZoomLevel = computed(() => (isPdfActive.value ? pdfZoomLevel.value : scale.value))
 
-const zoomInDisabled = computed(() => !isTransformable.value || scale.value >= MAX_SCALE)
+const zoomPercent = computed(() => `${Math.round(displayZoomLevel.value * 100)}%`)
 
-const zoomOutDisabled = computed(() => !isTransformable.value || scale.value <= MIN_SCALE)
+const zoomInDisabled = computed(() => !isZoomable.value || displayZoomLevel.value >= MAX_SCALE)
 
-const isTransformReset = computed(
-  () => scale.value === 1 && offsetX.value === 0 && offsetY.value === 0
-)
+const zoomOutDisabled = computed(() => !isZoomable.value || displayZoomLevel.value <= MIN_SCALE)
+
+const isTransformReset = computed(() => {
+  if (isPdfActive.value) {
+    return Math.abs(pdfZoomLevel.value - 1) < 0.02
+  }
+  return scale.value === 1 && offsetX.value === 0 && offsetY.value === 0
+})
 
 const previewerStyle = computed<CSSProperties | undefined>(() => {
   if (!isTransformable.value) return undefined
@@ -368,16 +390,29 @@ function setScale(value: number) {
 }
 
 function zoomIn() {
-  if (!isTransformable.value) return
+  if (!isZoomable.value) return
+  if (isPdfActive.value) {
+    previewerRef.value?.zoomIn?.()
+    return
+  }
   setScale(scale.value + SCALE_STEP)
 }
 
 function zoomOut() {
-  if (!isTransformable.value) return
+  if (!isZoomable.value) return
+  if (isPdfActive.value) {
+    previewerRef.value?.zoomOut?.()
+    return
+  }
   setScale(scale.value - SCALE_STEP)
 }
 
 function resetTransform() {
+  if (isPdfActive.value) {
+    previewerRef.value?.resetZoom?.()
+    pdfZoomLevel.value = 1
+    return
+  }
   scale.value = 1
   offsetX.value = 0
   offsetY.value = 0
@@ -385,6 +420,23 @@ function resetTransform() {
   isDragging.value = false
 }
 
+function handlePdfZoomChange(level: number) {
+  pdfZoomLevel.value = level
+}
+
+function isZoomWheel(e: WheelEvent): boolean {
+  return e.ctrlKey || e.metaKey
+}
+
+function handleViewportWheel(e: WheelEvent) {
+  if (!activeFile.value || activeFile.value.kind !== 'image') return
+  if (!isZoomWheel(e)) return
+  if (isInteractiveTarget(e.target)) return
+  e.preventDefault()
+  const delta = e.deltaY > 0 ? -SCALE_STEP : SCALE_STEP
+  setScale(scale.value + delta)
+}
+
 function isInteractiveTarget(target: EventTarget | null): boolean {
   if (!(target instanceof HTMLElement)) return false
   return !!target.closest('button, a, input, textarea, select, video, [contenteditable="true"]')
@@ -423,6 +475,7 @@ function handleViewportPointerEnd(e: PointerEvent) {
 }
 
 function handleViewportDblclick() {
+  if (isPdfActive.value) return
   if (!isTransformable.value) return
   if (scale.value === 1) {
     setScale(2)
@@ -480,7 +533,11 @@ watch(
 
 watch(
   () => activeFile.value?.id,
-  () => resetTransform()
+  async () => {
+    pdfZoomLevel.value = 1
+    await nextTick()
+    resetTransform()
+  }
 )
 
 // 模态打开时：锁定 body 滚动 + 让容器获得焦点以便接收 ESC

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

@@ -5,6 +5,7 @@
       :src="url"
       :alt="file.name"
       draggable="false"
+      @dragstart.prevent
       @load="loading = false"
       @error="onImgError"
     />

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

@@ -2,22 +2,31 @@
   <div :class="cls.e('pdf')" v-bind="attrs">
     <div v-if="!engine || isLoading" :class="cls.e('loading')">正在加载 PDF 引擎…</div>
     <EmbedPDF v-else-if="pdfUrl" :engine="engine" :plugins="plugins" v-slot="{ activeDocumentId }">
+      <PdfZoomBridge
+        v-if="activeDocumentId"
+        :document-id="activeDocumentId"
+        @zoom-change="onZoomChange"
+      />
       <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>
+          <PdfViewportScroll>
+            <ZoomGestureWrapper :document-id="activeDocumentId" :enable-wheel="true">
+              <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>
+            </ZoomGestureWrapper>
+          </PdfViewportScroll>
         </Viewport>
       </DocumentContent>
     </EmbedPDF>
@@ -35,17 +44,28 @@ import {
 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 {
+  ZoomGestureWrapper,
+  ZoomMode,
+  ZoomPluginPackage,
+  type ZoomScope
+} from '@embedpdf/plugin-zoom/vue'
 import { bem } from '@veltra/utils'
 import { computed, onBeforeUnmount, shallowRef, useAttrs, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
 import { toBlobUrl } from '../helper'
+import PdfViewportScroll from './pdf-viewport-scroll.vue'
+import PdfZoomBridge from './pdf-zoom-bridge.vue'
 
 defineOptions({ name: 'FileViewerPdfPreviewer', inheritAttrs: false })
 
 const props = defineProps<{ file: FileViewerItem }>()
 
-const emit = defineEmits<{ (e: 'error', err: unknown): void }>()
+const emit = defineEmits<{
+  (e: 'error', err: unknown): void
+  (e: 'zoom-change', level: number): void
+}>()
 
 const cls = bem('file-viewer')
 const attrs = useAttrs()
@@ -55,6 +75,9 @@ const { engine, isLoading, error } = usePdfiumEngine()
 const pdfUrl = shallowRef<string>('')
 let revoke: (() => void) | undefined
 
+/** 当前文档的 zoom API（由 PdfZoomBridge 注入） */
+let zoomScope: ZoomScope | null = null
+
 function load() {
   revoke?.()
   const r = toBlobUrl(props.file.src, props.file.mime ?? 'application/pdf')
@@ -68,12 +91,35 @@ const plugins = computed(() => {
     createPluginRegistration(DocumentManagerPluginPackage, {
       initialDocuments: [{ url: pdfUrl.value }]
     }),
-    createPluginRegistration(ViewportPluginPackage),
-    createPluginRegistration(ScrollPluginPackage),
-    createPluginRegistration(RenderPluginPackage)
+    createPluginRegistration(ViewportPluginPackage, { viewportGap: 0 }),
+    createPluginRegistration(ScrollPluginPackage, { defaultBufferSize: 2 }),
+    createPluginRegistration(RenderPluginPackage),
+    createPluginRegistration(ZoomPluginPackage, {
+      defaultZoomLevel: ZoomMode.FitPage,
+      minZoom: 0.5,
+      maxZoom: 3,
+      zoomStep: 0.1
+    })
   ]
 })
 
+function onZoomChange(payload: { level: number; scope: ZoomScope | null }) {
+  zoomScope = payload.scope
+  emit('zoom-change', payload.level)
+}
+
+function zoomIn() {
+  zoomScope?.zoomIn()
+}
+
+function zoomOut() {
+  zoomScope?.zoomOut()
+}
+
+function resetZoom() {
+  zoomScope?.requestZoom(ZoomMode.FitPage)
+}
+
 watch(
   () => props.file,
   () => load(),
@@ -87,5 +133,12 @@ watch(error, (err) => {
 onBeforeUnmount(() => {
   revoke?.()
   pdfUrl.value = ''
+  zoomScope = null
+})
+
+defineExpose({
+  zoomIn,
+  zoomOut,
+  resetZoom
 })
 </script>

package/src/components/file-viewer/previewers/pdf-viewport-scroll.vue

@@ -0,0 +1,112 @@
+<template>
+  <!-- EmbedPDF Viewport 自带滚动；u-scroll 仅同步自定义滚动条 -->
+  <u-scroll :target="viewportEl">
+    <slot />
+  </u-scroll>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onBeforeUnmount, type Ref, watch } from 'vue'
+
+import { UScroll } from '../../scroll'
+
+defineOptions({ name: 'FileViewerPdfViewportScroll' })
+
+/** EmbedPDF Viewport 向子树注入的滚动容器 ref */
+const VIEWPORT_ELEMENT_KEY = 'viewport-element'
+
+const viewportRef = inject<Ref<HTMLDivElement | null>>(VIEWPORT_ELEMENT_KEY)
+const viewportEl = computed(() => viewportRef?.value ?? null)
+
+let panState:
+  | {
+      pointerId: number
+      startX: number
+      startY: number
+      scrollLeft: number
+      scrollTop: number
+    }
+  | undefined
+
+function isInteractiveTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  return !!target.closest(
+    'button, a, input, textarea, select, video, [contenteditable="true"], .u-scroll__bar-x, .u-scroll__bar-y'
+  )
+}
+
+function handlePointerDown(e: PointerEvent) {
+  if (e.button !== 0 || isInteractiveTarget(e.target)) return
+
+  const el = viewportEl.value
+  if (!el) return
+
+  panState = {
+    pointerId: e.pointerId,
+    startX: e.clientX,
+    startY: e.clientY,
+    scrollLeft: el.scrollLeft,
+    scrollTop: el.scrollTop
+  }
+  el.classList.add('is-panning')
+  el.setPointerCapture(e.pointerId)
+  e.preventDefault()
+}
+
+function handlePointerMove(e: PointerEvent) {
+  if (!panState || panState.pointerId !== e.pointerId) return
+
+  const el = viewportEl.value
+  if (!el) return
+
+  el.scrollLeft = panState.scrollLeft - (e.clientX - panState.startX)
+  el.scrollTop = panState.scrollTop - (e.clientY - panState.startY)
+}
+
+function endPan(e: PointerEvent) {
+  if (!panState || panState.pointerId !== e.pointerId) return
+
+  const el = viewportEl.value
+  if (el?.hasPointerCapture(e.pointerId)) {
+    el.releasePointerCapture(e.pointerId)
+  }
+  el?.classList.remove('is-panning')
+  panState = undefined
+}
+
+let detachPan: (() => void) | undefined
+
+watch(
+  viewportEl,
+  (el, _, onCleanup) => {
+    detachPan?.()
+    detachPan = undefined
+    if (!el) return
+
+    el.addEventListener('pointerdown', handlePointerDown, { capture: true })
+    el.addEventListener('pointermove', handlePointerMove, { capture: true })
+    el.addEventListener('pointerup', endPan, { capture: true })
+    el.addEventListener('pointercancel', endPan, { capture: true })
+
+    detachPan = () => {
+      el.removeEventListener('pointerdown', handlePointerDown, { capture: true })
+      el.removeEventListener('pointermove', handlePointerMove, { capture: true })
+      el.removeEventListener('pointerup', endPan, { capture: true })
+      el.removeEventListener('pointercancel', endPan, { capture: true })
+      el.classList.remove('is-panning')
+      panState = undefined
+    }
+
+    onCleanup(() => {
+      detachPan?.()
+      detachPan = undefined
+    })
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  detachPan?.()
+  detachPan = undefined
+})
+</script>

package/src/components/file-viewer/previewers/pdf-zoom-bridge.vue

@@ -0,0 +1,33 @@
+<template>
+  <span hidden aria-hidden="true" />
+</template>
+
+<script lang="ts" setup>
+import { useZoom, ZoomMode, type ZoomScope } from '@embedpdf/plugin-zoom/vue'
+import { watch } from 'vue'
+
+defineOptions({ name: 'FileViewerPdfZoomBridge' })
+
+const props = defineProps<{ documentId: string }>()
+
+const emit = defineEmits<{
+  (e: 'zoom-change', payload: { level: number; scope: ZoomScope | null }): void
+}>()
+
+const { provides: zoom, state } = useZoom(() => props.documentId)
+
+watch(
+  [zoom, () => state.value.currentZoomLevel],
+  () => {
+    emit('zoom-change', {
+      level: state.value.currentZoomLevel,
+      scope: zoom.value
+    })
+  },
+  { immediate: true }
+)
+
+defineExpose({
+  resetZoom: () => zoom.value?.requestZoom(ZoomMode.FitPage)
+})
+</script>

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

@@ -547,7 +547,6 @@
 
   &__viewport.is-dragging &__previewer {
     transition: none;
-    pointer-events: none;
   }
 
   @include m.e(empty) {
@@ -638,9 +637,25 @@
   }
 
   @include m.e(pdf-viewport) {
+    position: relative;
     width: 100%;
     height: 100%;
     background: transparent;
+    cursor: grab;
+
+    &.is-panning {
+      cursor: grabbing;
+      user-select: none;
+    }
+
+    // 隐藏原生滚动条，由 PdfViewportScroll 通过 u-scroll target 挂载自定义滚动条
+    scrollbar-width: none;
+    scrollbar-color: transparent transparent;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
   }
 
   @include m.e(pdf-page) {