@veltra/desktop 1.0.8 → 1.0.10

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

@@ -24,7 +24,7 @@ defineOptions({
   name: 'PaletteSV'
 })
 
-const { cls, hueRGB, HSV, updateSV, updater } = inject(PaletteDIKey)!
+const { cls, hueRGB, HSV, updateSV, userAction } = inject(PaletteDIKey)!
 
 const svRef = shallowRef<HTMLDivElement>()
 
@@ -58,21 +58,19 @@ const svThumbStyle = computed(() => {
   }
 })
 
-function updateThumb(offsetX: number, offsetY: number) {
-  updater.updateAndLock(() => {
-    transform.x = offsetX
-    transform.y = offsetY
+const updateThumb = userAction((offsetX: number, offsetY: number) => {
+  transform.x = offsetX
+  transform.y = offsetY
 
-    // 根据画布位置计算饱和度和亮度
-    // 水平方向表示饱和度，从左到右饱和度逐渐增高
-    // 垂直方向表示亮度，上亮下暗
-    const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))
-    const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))
+  // 根据画布位置计算饱和度和亮度
+  // 水平方向表示饱和度，从左到右饱和度逐渐增高
+  // 垂直方向表示亮度，上亮下暗
+  const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))
+  const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))
 
-    // 更新饱和度和亮度
-    updateSV({ s, v })
-  })
-}
+  // 更新饱和度和亮度
+  updateSV({ s, v })
+})
 
 const svDragger = useDrag({
   target: svRef,

package/src/components/palette/palette.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'
+import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
 import { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'
 
@@ -61,7 +61,7 @@ const { HSV, alpha, ...rest } = useHSV()
 
 const color = defineModel<string>()
 const RGB = computed(() => HSV2RGB(HSV))
-const updater = useUpdateLock()
+const { userAction, isUserActive } = useUserAction()
 
 watch([alpha, RGB], ([alpha, RGB]) => {
   color.value = `#${RGB2HEX(RGB, alpha)}`
@@ -69,13 +69,11 @@ watch([alpha, RGB], ([alpha, RGB]) => {
 
 const visible = shallowRef(false)
 
-function handleClear() {
-  updater.updateAndLock(() => {
-    color.value = ''
-    rest.updateAlpha(1)
-    visible.value = false
-  })
-}
+const handleClear = userAction(() => {
+  color.value = ''
+  rest.updateAlpha(1)
+  visible.value = false
+})
 
 const paletteSVRef = useTemplateRef('palette-sv')
 const paletteHueRef = useTemplateRef('palette-hue')
@@ -85,18 +83,17 @@ watch(
   color,
   (color) => {
     if (!color) return
+    if (isUserActive()) return
+
+    const { RGB, alpha } = HEX2RGBA(color)
+    const hsv = RGB2HSV(RGB)
+    rest.updateHue(hsv.h)
+    rest.updateSV({ s: hsv.s, v: hsv.v })
+    rest.updateAlpha(alpha)
 
-    updater.update(() => {
-      const { RGB, alpha } = HEX2RGBA(color)
-      const hsv = RGB2HSV(RGB)
-      rest.updateHue(hsv.h)
-      rest.updateSV({ s: hsv.s, v: hsv.v })
-      rest.updateAlpha(alpha)
-
-      paletteSVRef.value?.init()
-      paletteHueRef.value?.init()
-      paletteAlphaRef.value?.init()
-    })
+    paletteSVRef.value?.init()
+    paletteHueRef.value?.init()
+    paletteAlphaRef.value?.init()
   },
   { immediate: true }
 )
@@ -106,7 +103,8 @@ provide(PaletteDIKey, {
   HSV,
   RGB,
   alpha,
-  updater,
+  userAction,
+  isUserActive,
   ...rest
 })
 </script>

package/src/components/progress/progress.vue

@@ -78,7 +78,7 @@ const className = computed(() => {
 
 /** 描边 */
 const stroke = computed(() => {
-  return `var(--color-${type.value})`
+  return `var(--u-color-${type.value})`
 })
 
 const r = 44

package/src/components/select/select.vue

@@ -50,7 +50,10 @@
         </u-input>
       </div>
 
-      <!-- 单选列表 -->
+      <!--
+        单选列表。虚拟化启用时，内容容器 height 由 useVirtualizer 命令式写入；
+        此处 content-style 仅承担 grid 相关样式，避免 height 变化触发模板重渲染。
+      -->
       <u-scroll
         v-if="options.length"
         tag="ul"
@@ -62,7 +65,6 @@
           bem.is('grid', !!grid)
         ]"
         :content-style="{
-          height: virtualEnabled ? withUnit(totalHeight, 'px') : undefined,
           gridTemplateColumns: grid ? `repeat(${grid.cols}, minmax(0px, 1fr))` : undefined,
           gridGap: grid ? withUnit(grid.gap, 'px') : undefined
         }"
@@ -76,7 +78,7 @@
             :key="key"
             :style="{ transform: `translateY(${offset}px)` }"
             :data-index="index"
-            :ref="measureElement"
+            :ref="(el) => measureElement(index, el as Element | null)"
           >
             <slot v-bind="{ option, index }">
               {{ label }}
@@ -113,7 +115,7 @@
 
 <script lang="ts" setup>
 import { o } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useVirtual } from '@veltra/compositions'
+import { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
 import { vFocus } from '@veltra/directives'
 import { ArrowDown, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'
@@ -212,40 +214,40 @@ watch(
   { immediate: true }
 )
 
-const {
-  virtualList,
-  totalHeight,
-  virtualEnabled: _virtualEnabled,
-  scrollTo,
-  measureElement
-} = useVirtual({
+const baseVirtualEnabled = computed(() => options.value.length > 80)
+const virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid)
+
+const { virtualizer, items } = useVirtualizer({
   count: computed(() => options.value.length),
-  virtualThreshold: 80,
-  scrollEl: computed(() => scrollRef.value?.containerRef ?? null),
+  scrollEl: () => scrollRef.value?.containerRef ?? null,
+  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),
   gap: 4,
   estimateSize: () => 40
 })
 
-const virtualEnabled = computed(() => {
-  return _virtualEnabled.value && !props.grid
-})
-
 const virtualOptions = computed(() => {
   const _options = options.value
   const { labelKey, valueKey } = props
-  return virtualList.value.map((item) => {
+  return items.value.map((item) => {
     const option = _options[item.index]!
     return {
       option,
       index: item.index,
       label: o(option).get(labelKey),
       val: o(option).get(valueKey),
-      key: item.key,
+      key: item.index,
       offset: item.start
     }
   })
 })
 
+const measureElement: (index: number, el: Element | null) => void = (index, el) =>
+  virtualizer.measureElement(index, el)
+
+function scrollTo(index: number): void {
+  virtualizer.scrollToIndex(index, { align: 'center' })
+}
+
 watch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {
   if (!scroll || !props.modelValue) return
 

package/src/components/slider/slider-thumb.vue

@@ -2,7 +2,7 @@
   <div ref="thumb" :class="cls.e('thumb')" :style></div>
 </template>
 <script lang="ts" setup>
-import { useDrag, useUpdateLock } from '@veltra/compositions'
+import { useDrag, useUserAction } from '@veltra/compositions'
 import { computed, inject, useTemplateRef, watch } from 'vue'
 
 import { sliderContextKey } from './di'
@@ -30,7 +30,7 @@ const style = computed(() => {
   }
 })
 
-const { updateAndLock, update } = useUpdateLock()
+const { userAction, isUserActive } = useUserAction()
 
 function updateModel(offset: number) {
   offset = getOffsetByStep(offset)
@@ -41,19 +41,15 @@ function updateModel(offset: number) {
 const dragger = useDrag({
   target: computed(() => (disabled.value ? null : thumbRef.value)),
 
-  onDrag({ offsetX, offsetY }) {
-    updateAndLock(() => {
-      updateModel(sliderProps.vertical ? offsetY : offsetX)
-    })
-  },
+  onDrag: userAction(({ offsetX, offsetY }) => {
+    updateModel(sliderProps.vertical ? offsetY : offsetX)
+  }),
   rangeX: range,
   rangeY: range,
-  onDragEnd({ offsetX, offsetY }) {
-    updateAndLock(() => {
-      const offset = updateModel(sliderProps.vertical ? offsetY : offsetX)
-      updateDragger(offset)
-    })
-  }
+  onDragEnd: userAction(({ offsetX, offsetY }) => {
+    const offset = updateModel(sliderProps.vertical ? offsetY : offsetX)
+    updateDragger(offset)
+  })
 })
 
 function updateDragger(offset: number) {
@@ -67,7 +63,8 @@ function updateDragger(offset: number) {
 watch(
   () => props.modelValue,
   (offset) => {
-    update(() => updateDragger(offset))
+    if (isUserActive()) return
+    updateDragger(offset)
   }
 )
 </script>

package/src/components/slider/slider.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup generic="T extends number | [number, number]">
-import { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'
+import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
 import { computed, provide, watch } from 'vue'
 
@@ -87,21 +87,20 @@ const barStyles = computed(() => {
   }
 })
 
-const { updateAndLock, update } = useUpdateLock()
+const { userAction, isUserActive } = useUserAction()
 
 watch(
   [sliderSize, ...['modelValue', 'range', 'max', 'min', 'vertical'].map((k) => () => props[k])],
   ([size, value, range]) => {
-    update(() => {
-      if (value === undefined || size === 0) return
-
-      if (range) {
-        offset1.value = value2SliderOffset((value as [number, number])[0])
-        offset2.value = value2SliderOffset((value as [number, number])[1])
-      } else {
-        offset1.value = value2SliderOffset(value as number)
-      }
-    })
+    if (isUserActive()) return
+    if (value === undefined || size === 0) return
+
+    if (range) {
+      offset1.value = value2SliderOffset((value as [number, number])[0])
+      offset2.value = value2SliderOffset((value as [number, number])[1])
+    } else {
+      offset1.value = value2SliderOffset(value as number)
+    }
   },
   { immediate: true }
 )
@@ -115,15 +114,16 @@ const ticks = computed(() => {
   return [...Array.from({ length: tickLength }, (_, i) => i * offsetPercent), 100]
 })
 
-watch([offset1, offset2], (v) => {
-  updateAndLock(() => {
+watch(
+  [offset1, offset2],
+  userAction((v) => {
     if (props.range) {
       emit('update:modelValue', v.map(sliderOffset2Value).sort() as T)
     } else {
       emit('update:modelValue', sliderOffset2Value(v[0]) as T)
     }
   })
-})
+)
 
 function handleClickSlider(e: MouseEvent) {
   if (disabled.value || props.range) return

package/src/components/table/di.ts

@@ -1,6 +1,6 @@
-import type { VirtualReturned } from '@veltra/compositions'
+import type { VirtualItem } from '@veltra/compositions'
 import type { BEM } from '@veltra/utils'
-import type { InjectionKey, ShallowRef, Slots } from 'vue'
+import type { ComputedRef, InjectionKey, ShallowRef, Slots } from 'vue'
 
 import type {
   TableProps,
@@ -14,47 +14,62 @@ import type {
 import type { ColumnNode } from './node/col'
 import type { ColumnConfig } from './use-columns'
 
-export const TableDIKey: InjectionKey<
-  {
-    /** 表格属性 */
-    tableProps: TableProps
-    /** 表格插槽 */
-    tableSlots: Slots
-    /** 类 */
-    cls: BEM<'table'>
-    /** 行 */
-    rows: ShallowRef<TableRow[]>
-    /** 选中行 */
-    checkedRows: ShallowRef<Set<TableRow>>
-    /** 结构化列 */
-    columnConfig: ColumnConfig
-    /** 事件处理方法 */
-    handleRowClick: (row: TableRow, ev: MouseEvent) => void
-    /** 单元格点击 */
-    handleCellClick: (row: TableRow, column: TableColumn, ev: MouseEvent) => void
-    /** 表格列插槽node */
-    getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn
-    /** 展开行插槽node */
-    getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn
-    /** 表头插槽node */
-    getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn
-
-    /** 展开/隐藏子节点 */
-    toggleTreeRowExpand: (row: TableRow) => void
-
-    /** 获取单元格的类 */
-    getCellClass: (column: ColumnNode) => string
-
-    /** 获取表头单元格的类 */
-    getHeaderCellClass: (column: ColumnNode) => string
-
-    /** 获取单元格上下文 */
-    getCellCtx: (
-      row: TableRow,
-      column: ColumnNode
-    ) => TableColumnSlotsScope | TableColumnRenderContext
-  } & VirtualReturned
-> = Symbol('TableDIKey')
+export const TableDIKey: InjectionKey<{
+  /** 表格属性 */
+  tableProps: TableProps
+  /** 表格插槽 */
+  tableSlots: Slots
+  /** 类 */
+  cls: BEM<'table'>
+  /** 行 */
+  rows: ShallowRef<TableRow[]>
+  /** 选中行 */
+  checkedRows: ShallowRef<Set<TableRow>>
+  /** 结构化列 */
+  columnConfig: ColumnConfig
+  /** 事件处理方法 */
+  handleRowClick: (row: TableRow, ev: MouseEvent) => void
+  /** 单元格点击 */
+  handleCellClick: (row: TableRow, column: TableColumn, ev: MouseEvent) => void
+  /** 表格列插槽node */
+  getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn
+  /** 展开行插槽node */
+  getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn
+  /** 表头插槽node */
+  getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn
+
+  /** 展开/隐藏子节点 */
+  toggleTreeRowExpand: (row: TableRow) => void
+
+  /** 获取单元格的类 */
+  getCellClass: (column: ColumnNode) => string
+
+  /** 获取表头单元格的类 */
+  getHeaderCellClass: (column: ColumnNode) => string
+
+  /** 获取单元格上下文 */
+  getCellCtx: (
+    row: TableRow,
+    column: ColumnNode
+  ) => TableColumnSlotsScope | TableColumnRenderContext
+
+  /**
+   * 当前渲染窗口的虚拟项列表。
+   *
+   * 由 `useVirtualizer` 拆分出的 `items` shallowRef：仅在底层 `items`
+   * 引用变化时才更新，`isScrolling` / 纯尺寸变化不会导致此 ref 更新。
+   */
+  virtualList: ShallowRef<VirtualItem[]>
+  /** 是否启用虚拟列表 */
+  virtualEnabled: ComputedRef<boolean>
+  /**
+   * 测量行元素尺寸（参数顺序与底层 `Virtualizer.measureElement` 一致）。
+   *
+   * 元素卸载（`el === null`）时会从底层解绑，避免被移除的 `<tr>` 继续触发
+   * size=0 测量回调。
+   */
+  measureElement: (index: number, el: Element | null) => void
+}> = Symbol('TableDIKey')
 
 export const TableResizeKey: InjectionKey<{
   handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void

package/src/components/table/node/row.ts

@@ -28,7 +28,16 @@ export class TableRowNode<Data extends Record<string, any> = Record<string, any>
   /** 是否选中 */
   checked = false
 
-  uid: number | string
+  /**
+   * 行的稳定唯一标识。
+   *
+   * E2 不变式：`uid` 在单个 `TableRowNode` 实例的生命周期内不可变更。
+   * `useVirtualizer` 的 `getItemKey: i => rows[i].uid` 依赖该不变式来复用测量缓存；
+   * 若 uid 在运行时变更，虚拟列表的尺寸表会错配导致滚动抖动。
+   * 当前代码路径（`createRow` / `copy`）始终为每个新节点分配一次 uid，
+   * 所以该不变式天然成立；此处使用 `readonly` 做编译期锁定。
+   */
+  readonly uid: number | string
 
   override children?: TableRowNode<Data>[] = undefined
 

package/src/components/table/table-body.vue

@@ -1,20 +1,15 @@
 <template>
-  <tbody :class="cls.e('body')" ref="bodyRef">
+  <tbody :class="bodyCls">
     <template v-for="{ row, index, stripeIndex } of tableRows" :key="row.uid">
-      <UExpandTableRow v-if="row.isExpandRow" :row="row" :data-index="index" />
-      <UTableRow
-        v-else
-        :row="row"
-        :data-index="index"
-        :class="[bem.is('current', row.isCurrent), getStripeCls(stripeIndex)]"
-      />
+      <UExpandTableRow v-if="row.isExpandRow" :row="row" :index="index" />
+      <UTableRow v-else :row="row" :index="index" :class="getStripeCls(stripeIndex)" />
     </template>
 
     <!-- 空 -->
-    <tr v-if="!rows.length" :class="cls.e('row')">
+    <tr v-if="!rows.length" :class="emptyRowCls">
       <td :colspan="leafColumns.length">
         <slot name="empty">
-          <UEmpty :class="cls.e('empty')" />
+          <UEmpty :class="emptyCls" />
         </slot>
       </td>
     </tr>
@@ -24,8 +19,8 @@
 </template>
 
 <script lang="ts" setup>
-import { bem, setStyles } from '@veltra/utils'
-import { computed, inject, shallowRef, watch } from 'vue'
+import { bem } from '@veltra/utils'
+import { computed, inject } from 'vue'
 
 import { UEmpty } from '../empty'
 import { TableDIKey } from './di'
@@ -38,9 +33,26 @@ defineOptions({
 const { cls, rows, virtualList, columnConfig, tableProps, virtualEnabled } = inject(TableDIKey)!
 const { leafColumns } = columnConfig
 
-const getStripeCls = computed(() => {
-  return tableProps.stripe ? (index: number) => bem.is('stripe', index % 2 === 1) : () => ''
-})
+// A1 的同族优化：把 body / empty / empty-row 等静态 class 一次性取出，
+// 避免每次 render 触发 `cls.e` 的字符串拼接。
+const bodyCls = cls.e('body')
+const emptyRowCls = cls.e('row')
+const emptyCls = cls.e('empty')
+
+/**
+ * C1：stripe class 查找表。
+ *
+ * `bem.is('stripe', true) === 'is-stripe'`，`bem.is('stripe', false) === ''`。
+ * 两种输出是全局常量，无需每次调用 `bem.is`；按奇偶直接查表即可。
+ * 非 stripe 模式下两个位置均返回空串。
+ */
+const STRIPE_CLS_ON: readonly [string, string] = [bem.is('stripe', false), bem.is('stripe', true)]
+const STRIPE_CLS_OFF: readonly [string, string] = ['', '']
+
+const stripeTable = computed<readonly [string, string]>(() =>
+  tableProps.stripe ? STRIPE_CLS_ON : STRIPE_CLS_OFF
+)
+const getStripeCls = (index: number): string => stripeTable.value[index & 1]!
 
 const tableRows = computed(() => {
   if (!virtualEnabled.value) {
@@ -53,7 +65,7 @@ const tableRows = computed(() => {
     })
   }
 
-  // 虚拟列表
+  // 虚拟列表：仅渲染可视窗口内的行，位置由 table.vue 中的 before/after 占位 tbody 撑开
   return virtualList.value.map((item) => {
     return {
       row: rows.value[item.index]!,
@@ -62,21 +74,4 @@ const tableRows = computed(() => {
     }
   })
 })
-
-const bodyRef = shallowRef<HTMLElement>()
-
-function setBodyTransform(transformY: number) {
-  bodyRef.value &&
-    setStyles(bodyRef.value, {
-      transform: `translate3d(0, ${transformY}px, 0)`
-    })
-}
-
-watch(virtualList, (list) => {
-  setBodyTransform(list[0]?.start ?? 0)
-})
-
-defineExpose({
-  setBodyTransform
-})
 </script>

package/src/components/table/table-cell.vue

@@ -1,7 +1,7 @@
 <template>
   <td
-    :class="getCellClass(column)"
-    :style="{ left: withUnit(left, 'px'), right: withUnit(right, 'px') }"
+    :class="cellClass"
+    :style="style"
     :rowspan="rowspan"
     :colspan="colspan"
     v-if="rowspan !== 0 && colspan !== 0"
@@ -12,22 +12,30 @@
 
 <script lang="ts" setup>
 import { withUnit } from '@veltra/utils'
-import { inject } from 'vue'
-
-import { TableDIKey } from './di'
-import type { ColumnNode } from './node/col'
+import { computed } from 'vue'
 
 defineOptions({
   name: 'TableCell'
 })
 
-const { column } = defineProps<{
-  column: ColumnNode
+/**
+ * B2: TableCell 去 inject 化。
+ *
+ * 原先每个可见单元格都会执行 `inject(TableDIKey)` 并在模板中调用 `getCellClass(column)`，
+ * 在 30 列场景下每次滚动每行产生 30 次 inject / 30 次类名拼接。
+ * 父组件 `TableRow` 已经持有注入上下文，直接把 `cellClass` 传下来即可；
+ * 这里变成「完全受控」的纯渲染单元。
+ */
+const { left, right } = defineProps<{
+  cellClass: string
   left?: number
   right?: number
   rowspan?: number
   colspan?: number
 }>()
 
-const { getCellClass } = inject(TableDIKey)!
+const style = computed(() => ({
+  left: withUnit(left, 'px'),
+  right: withUnit(right, 'px')
+}))
 </script>