@veltra/desktop 1.0.8 → 1.0.9

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/index.ts

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

package/src/components/multi-select/multi-select-option.vue

@@ -5,7 +5,7 @@
     @mousedown="handleMousedown"
     @mouseup="handleMouseup"
     @mouseleave="handleMouseleave"
-    :ref="measureElement"
+    :ref="measureRef"
   >
     <u-checkbox
       :class="checkboxClass"
@@ -30,13 +30,26 @@ defineOptions({
   name: 'MultiSelectOption'
 })
 
-const { disabled = false, checked } = defineProps<{
+const props = defineProps<{
   option: Record<string, any>
   disabled?: boolean
   checked: boolean
-  measureElement?: (el: any) => void
+  /**
+   * 虚拟项索引：对应 `options` 数组中的绝对位置。
+   * 非虚拟模式下可省略；虚拟模式下必须传入，否则元素卸载时 Virtualizer 无法及时解绑，
+   * 会因为 ResizeObserver 对脱离 DOM 的元素回调 size=0 而污染尺寸缓存。
+   */
+  index?: number
+  measureElement?: (index: number, el: Element | null) => void
 }>()
 
+const { disabled = false, checked } = props
+
+function measureRef(el: unknown) {
+  if (typeof props.index !== 'number' || !props.measureElement) return
+  props.measureElement(props.index, el as Element | null)
+}
+
 const emit = defineEmits<{
   (e: 'check', checked: boolean): void
 }>()

package/src/components/multi-select/multi-select.vue

@@ -74,13 +74,16 @@
       </div>
 
       <!-- 多选列表 -->
+      <!--
+        虚拟化启用时内容容器 height 由 useVirtualizer 命令式写入；
+        模板不再绑定 totalSize，避免尺寸变化引起重渲染。
+      -->
       <u-scroll
         tag="ul"
         :class="[cls.e('options')]"
         ref="scrollRef"
         v-if="options.length"
         :content-class="[cls.e('options-wrap'), bem.is('virtual', virtualEnabled)]"
-        :content-style="{ height: virtualEnabled ? withUnit(totalHeight, 'px') : undefined }"
       >
         <template v-if="virtualEnabled">
           <u-multi-select-option
@@ -91,7 +94,7 @@
             :style="{ transform: `translateY(${offset}px)` }"
             @check="handleCheck(option, $event)"
             :checked="checkedSet.has(option)"
-            :data-index="index"
+            :index="index"
             :measure-element="measureElement"
           >
             <slot v-bind="{ option, index }">
@@ -137,9 +140,9 @@
 
 <script lang="ts" setup>
 import { o as chainObj } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useVirtual } from '@veltra/compositions'
+import { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
 import { ArrowDown, Close, Search } from '@veltra/icons/normal'
-import { bem, FORM_EMPTY_CONTENT, withUnit } from '@veltra/utils'
+import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { computed, shallowRef, shallowReactive, watch, provide } from 'vue'
 
 import type {
@@ -209,30 +212,35 @@ const allOptions = computed(() => {
   return [...createdOptions.value, ...rawAllOptions.value]
 })
 
-const { totalHeight, virtualList, virtualEnabled, measureElement } = useVirtual({
-  virtualThreshold: 80,
+const virtualEnabled = computed(() => options.value.length > 80)
+
+const { virtualizer, items } = useVirtualizer({
   estimateSize: () => 40,
   count: computed(() => options.value.length),
-  scrollEl: computed(() => scrollRef.value?.containerRef ?? null)
+  scrollEl: () => scrollRef.value?.containerRef ?? null,
+  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null)
 })
 
 const virtualOptions = computed(() => {
   const { valueKey, labelKey } = props
   const _options = options.value
-  return virtualList.value.map((v) => {
+  return items.value.map((v) => {
     const option = _options[v.index]!
     const val = chainObj(option).get(valueKey)
     return {
       option,
       index: v.index,
       val,
-      key: v.key,
+      key: v.index,
       offset: v.start,
       label: chainObj(option).get(labelKey)
     }
   })
 })
 
+const measureElement: (index: number, el: Element | null) => void = (index, el) =>
+  virtualizer.measureElement(index, el)
+
 const filterable = computed(() => {
   return props.filterable || props.creatable || typeof props.options === 'function'
 })

package/src/components/palette/di.ts

@@ -1,4 +1,4 @@
-import type { Updater } from '@veltra/compositions'
+import type { UserAction } from '@veltra/compositions'
 import type { BEM } from '@veltra/utils'
 import type { InjectionKey, Ref, ComputedRef } from 'vue'
 
@@ -14,8 +14,10 @@ export const PaletteDIKey: InjectionKey<{
   RGB: ComputedRef<PaletteRGB>
   /** 透明度 */
   alpha: Ref<number>
-  /** 更新器 */
-  updater: Updater
+  /** 将函数包装为用户动作（阻断 modelValue 回流副作用） */
+  userAction: UserAction
+  /** 当前是否处于用户动作期间 */
+  isUserActive: () => boolean
   /** 更新色调 */
   updateHue: (deg: number) => void
   /** 更新调色盘透明度 */

package/src/components/palette/palette-alpha.vue

@@ -16,7 +16,7 @@ defineOptions({
   name: 'PaletteAlpha'
 })
 
-const { cls, updateAlpha, hueRGB, alpha, updater } = inject(PaletteDIKey)!
+const { cls, updateAlpha, hueRGB, alpha, userAction, isUserActive } = inject(PaletteDIKey)!
 
 const alphaRef = shallowRef<HTMLElement>()
 
@@ -34,12 +34,10 @@ function getAlphaWidth() {
   rangeX[1] = alphaWidth
 }
 
-function updateOffsetX(offsetX: number) {
-  updater.updateAndLock(() => {
-    alphaThumbTransformX.value = offsetX
-    updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0)
-  })
-}
+const updateOffsetX = userAction((offsetX: number) => {
+  alphaThumbTransformX.value = offsetX
+  updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0)
+})
 
 const alphaDragger = useDrag({
   target: alphaRef,
@@ -73,9 +71,8 @@ onMounted(() => {
 watch(
   alpha,
   (newAlphaValue) => {
-    updater.update(() => {
-      alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0
-    })
+    if (isUserActive()) return
+    alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0
   },
   { flush: 'post' }
 )

package/src/components/palette/palette-hue.vue

@@ -15,7 +15,7 @@ defineOptions({
   name: 'PaletteHue'
 })
 
-const { cls, updateHue, HSV, updater } = inject(PaletteDIKey)!
+const { cls, updateHue, HSV, userAction } = inject(PaletteDIKey)!
 
 const hueRef = shallowRef<HTMLElement>()
 
@@ -33,12 +33,10 @@ function getSliderWidth() {
   rangeX[1] = sliderWidth
 }
 
-function updateOffsetX(offsetX: number) {
-  updater.updateAndLock(() => {
-    transformX.value = offsetX
-    updateHue(Math.round((offsetX / sliderWidth) * 360))
-  })
-}
+const updateOffsetX = userAction((offsetX: number) => {
+  transformX.value = offsetX
+  updateHue(Math.round((offsetX / sliderWidth) * 360))
+})
 
 const sliderDragger = useDrag({
   target: hueRef,