@veltra/desktop 1.1.12 → 1.1.14

package/src/components/scroll/scroll.vue

@@ -1,23 +1,35 @@
 <template>
   <div :class="className" :style="style" ref="scrollRef">
-    <div
-      ref="containerRef"
-      :class="[cls.e('container'), containerClass]"
-      @scroll.passive="handleScroll"
-      :style="containerStyle"
-    >
-      <component
-        ref="contentRef"
-        :style="contentStyle"
-        :class="[cls.e('content'), contentClass]"
-        :is="tag"
+    <template v-if="!isExternal">
+      <div
+        ref="containerRef"
+        :class="[cls.e('container'), containerClass]"
+        @scroll.passive="handleScroll"
+        :style="containerStyle"
       >
-        <slot />
-      </component>
-    </div>
-
-    <u-scroll-bar type="y" :class="cls.e('bar-y')" @drag="handleDragY" ref="barY" />
-    <u-scroll-bar type="x" :class="cls.e('bar-x')" @drag="handleDragX" ref="barX" />
+        <component
+          ref="contentRef"
+          :style="contentStyle"
+          :class="[cls.e('content'), contentClass]"
+          :is="tag"
+        >
+          <slot />
+        </component>
+      </div>
+
+      <u-scroll-bar type="y" :class="cls.e('bar-y')" @drag="handleDragY" ref="barY" />
+      <u-scroll-bar type="x" :class="cls.e('bar-x')" @drag="handleDragX" ref="barX" />
+    </template>
+
+    <template v-else>
+      <slot />
+      <Teleport v-if="externalTarget" :to="externalTarget">
+        <div ref="overlayRef" :class="cls.e('overlay')">
+          <u-scroll-bar type="y" :class="cls.e('bar-y')" @drag="handleDragY" ref="barY" />
+          <u-scroll-bar type="x" :class="cls.e('bar-x')" @drag="handleDragX" ref="barX" />
+        </div>
+      </Teleport>
+    </template>
   </div>
 </template>
 
@@ -25,7 +37,15 @@
 import { debounce } from '@cat-kit/core'
 import { useResizeObserver } from '@veltra/compositions'
 import { bem, withUnit } from '@veltra/utils'
-import { type CSSProperties, computed, provide, shallowRef } from 'vue'
+import {
+  type CSSProperties,
+  computed,
+  onBeforeUnmount,
+  provide,
+  shallowRef,
+  toValue,
+  watch
+} from 'vue'
 
 import type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'
 import { ScrollDIKey } from './di'
@@ -49,24 +69,26 @@ defineSlots<{
 }>()
 
 const cls = bem('scroll')
+
+const isExternal = computed(() => props.target !== undefined)
+
+const externalTarget = computed(() => (isExternal.value ? toValue(props.target) : null))
+
 const className = computed(() => {
-  return [cls.b, bem.is('always', props.always)]
+  return [cls.b, bem.is('always', props.always), bem.is('external', isExternal.value)]
 })
 
-// 样式-------------------------------------------------------------
 const style = computed<CSSProperties>(() => {
+  if (isExternal.value) return {}
   return {
     height: withUnit(props.height, 'px')
   }
 })
 
-// 模板引用------------------------------------------------
-/** 内容引用 */
 const contentRef = shallowRef<HTMLElement>()
-/** 滚动根元素引用 */
 const scrollRef = shallowRef<HTMLElement>()
-/** 容器引用 */
 const containerRef = shallowRef<HTMLElement>()
+const overlayRef = shallowRef<HTMLElement>()
 const barX = shallowRef<InstanceType<typeof UScrollBar>>()
 const barY = shallowRef<InstanceType<typeof UScrollBar>>()
 const minSize = 20
@@ -76,40 +98,28 @@ const trackSize = {
   height: 0
 }
 
-useResizeObserver({
-  targets: [contentRef, scrollRef],
-  onResize: (entries) => {
-    if (entries.length && scrollRef.value) {
-      const { clientHeight, clientWidth } = scrollRef.value
-
-      trackSize.width = clientWidth
-      trackSize.height = clientHeight
+function getScrollContainer(): HTMLElement | undefined {
+  if (isExternal.value) {
+    return externalTarget.value ?? undefined
+  }
+  return containerRef.value
+}
 
-      barX.value?.setTrackSize(trackSize.width)
-      barY.value?.setTrackSize(trackSize.height)
-      updateBar()
+function syncTrackSize() {
+  const container = getScrollContainer()
+  if (!container) return
 
-      emit(
-        'resize',
-        entries.map((entry) => entry.target as HTMLElement)
-      )
-    }
-  }
-})
+  trackSize.width = container.clientWidth
+  trackSize.height = container.clientHeight
+  barX.value?.setTrackSize(trackSize.width)
+  barY.value?.setTrackSize(trackSize.height)
+}
 
-// 更新滚动条
 const updateBar = () => {
-  if (!containerRef.value) return
-
-  const {
-    scrollHeight,
-    clientHeight,
-    scrollTop,
+  const container = getScrollContainer()
+  if (!container) return
 
-    scrollWidth,
-    clientWidth,
-    scrollLeft
-  } = containerRef.value
+  const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container
 
   emit('scroll', {
     x: scrollLeft,
@@ -122,9 +132,7 @@ const updateBar = () => {
 
   if (scrollHeight !== clientHeight) {
     const barYHeight = Math.max((clientHeight / scrollHeight) * trackSize.height, minSize)
-
     const barYTop = (scrollTop / (scrollHeight - clientHeight)) * (trackSize.height - barYHeight)
-
     barY.value?.update(barYHeight, barYTop)
   } else {
     barY.value?.update(0, 0)
@@ -132,21 +140,18 @@ const updateBar = () => {
 
   if (scrollWidth !== clientWidth) {
     const barXWidth = Math.max((clientWidth / scrollWidth) * trackSize.width, minSize)
-
     const barXLeft = (scrollLeft / (scrollWidth - clientWidth)) * (trackSize.width - barXWidth)
-
     barX.value?.update(barXWidth, barXLeft)
   } else {
     barX.value?.update(0, 0)
   }
 }
 
-// 滚动条拖拽
 const handleDragX = debounce(
   (offset: number, size: number) => {
-    const container = containerRef.value!
+    const container = getScrollContainer()
+    if (!container) return
     const { clientWidth, scrollWidth } = container
-
     container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)
   },
   props.dragDebounce ?? 0,
@@ -155,7 +160,8 @@ const handleDragX = debounce(
 
 const handleDragY = debounce(
   (offset: number, size: number) => {
-    const container = containerRef.value!
+    const container = getScrollContainer()
+    if (!container) return
     const { clientHeight, scrollHeight } = container
     container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)
   },
@@ -163,28 +169,61 @@ const handleDragY = debounce(
   false
 )
 
-// 滚动事件
-const handleScroll = (e) => {
+const handleScroll = () => {
   updateBar()
 }
 
-// 滚动至------------------------------------------------
+useResizeObserver({
+  targets: [contentRef, scrollRef, () => externalTarget.value ?? null],
+  onResize: (entries) => {
+    syncTrackSize()
+    updateBar()
+    if (entries.length) {
+      emit(
+        'resize',
+        entries.map((entry) => entry.target as HTMLElement)
+      )
+    }
+  }
+})
+
+let detachExternalScroll: (() => void) | undefined
+
+watch(
+  externalTarget,
+  (el, _, onCleanup) => {
+    detachExternalScroll?.()
+    detachExternalScroll = undefined
+    if (!el || !isExternal.value) return
+
+    const onScroll = () => updateBar()
+    el.addEventListener('scroll', onScroll, { passive: true })
+    detachExternalScroll = () => el.removeEventListener('scroll', onScroll)
+    syncTrackSize()
+    updateBar()
+
+    onCleanup(() => {
+      detachExternalScroll?.()
+      detachExternalScroll = undefined
+    })
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  detachExternalScroll?.()
+})
+
 const scrollToLeft = (left: number) => {
-  const container = containerRef.value
+  const container = getScrollContainer()
   if (!container) return
-
-  container.scrollTo({
-    left
-  })
+  container.scrollTo({ left })
 }
 
 const scrollToTop = (top: number) => {
-  const container = containerRef.value
+  const container = getScrollContainer()
   if (!container) return
-
-  container.scrollTo({
-    top
-  })
+  container.scrollTo({ top })
 }
 
 const scrollTo = (position: ScrollPosition) => {
@@ -196,10 +235,20 @@ provide(ScrollDIKey, {
   cls
 })
 
+const activeContainerRef = shallowRef<HTMLElement>()
+
+watch(
+  [isExternal, externalTarget, containerRef],
+  () => {
+    activeContainerRef.value = getScrollContainer()
+  },
+  { immediate: true }
+)
+
 const exposed: _ScrollExposed = {
   el: scrollRef,
   contentRef,
-  containerRef,
+  containerRef: activeContainerRef,
   scrollTo,
   update: updateBar
 }

package/src/components/scroll/style.scss

@@ -12,6 +12,28 @@ $root-name: scroll;
   overflow: hidden;
   scroll-behavior: auto;
 
+  @include m.is(external) {
+    display: contents;
+  }
+
+  @include m.e(overlay) {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 2;
+
+    @include m.bem($root-name, (bar-x, bar-y)) {
+      pointer-events: auto;
+    }
+
+    &:hover > {
+      @include m.bem($root-name, (bar-x, bar-y)) {
+        opacity: 1;
+      }
+    }
+  }
+
   // 滚动容器
   @include m.e(container) {
     overflow: auto;

package/src/types/scroll.ts

@@ -1,5 +1,5 @@
 import type { DeconstructValue } from '@veltra/utils'
-import type { CSSProperties, ShallowRef } from 'vue'
+import type { CSSProperties, MaybeRefOrGetter, ShallowRef } from 'vue'
 
 export type ScrollPosition = {
   /** 横向位置 */
@@ -53,6 +53,12 @@ export interface ScrollProps {
 
   /** 拖拽防抖时间 */
   dragDebounce?: number
+
+  /**
+   * 外部滚动容器（如 EmbedPDF Viewport）。
+   * 提供时仅渲染自定义滚动条并同步该元素的滚动，不创建内部滚动容器。
+   */
+  target?: MaybeRefOrGetter<HTMLElement | null | undefined>
 }
 
 export interface ScrollEmits {