@veltra/desktop 1.0.7 → 1.0.9

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-nodes/style.scss

@@ -5,13 +5,8 @@
 $root-name: progress-nodes;
 
 @include m.b($root-name) {
-  // CSS 变量定义
-  --checked-color: #{fn.use-var(color, primary)};
-  --node-color: #{fn.use-var(text-color, placeholder)};
-  --dot-size: 14px;
-
   position: relative;
-  color: var(--node-color);
+  color: #{fn.use-var(text-color, placeholder)};
   overflow: auto;
   cursor: default;
 
@@ -28,13 +23,6 @@ $root-name: progress-nodes;
     cursor: grabbing;
   }
 
-  // 颜色类型变体
-  @each $type in vars.$color-types {
-    @include m.m($type) {
-      --checked-color: #{fn.use-var(color, $type)};
-    }
-  }
-
   // 列表容器
   @include m.e(list) {
     position: relative;
@@ -82,8 +70,8 @@ $root-name: progress-nodes;
   // 节点圆点
   @include m.e(dot) {
     position: relative;
-    width: var(--dot-size);
-    height: var(--dot-size);
+    width: 14px;
+    height: 14px;
     border: 2px solid currentColor;
     border-radius: 50%;
     background-color: fn.use-var(bg-color, top);
@@ -107,18 +95,36 @@ $root-name: progress-nodes;
     @include m.ellipsis;
   }
 
-  // checked 状态 - 圆点填充 colorType 颜色
   @include m.bem($root-name, item) {
     @include m.is(checked) {
-      color: var(--checked-color);
+      color: #{fn.use-var(color, primary)};
 
       @include m.bem($root-name, dot) {
-        background-color: var(--checked-color);
-        border-color: var(--checked-color);
+        background-color: #{fn.use-var(color, primary)};
+        border-color: #{fn.use-var(color, primary)};
       }
 
       @include m.bem($root-name, label) {
-        color: var(--checked-color);
+        color: #{fn.use-var(color, primary)};
+      }
+    }
+  }
+
+  @each $type in vars.$color-types {
+    @include m.m($type) {
+      @include m.bem($root-name, item) {
+        @include m.is(checked) {
+          color: #{fn.use-var(color, $type)};
+
+          @include m.bem($root-name, dot) {
+            background-color: #{fn.use-var(color, $type)};
+            border-color: #{fn.use-var(color, $type)};
+          }
+
+          @include m.bem($root-name, label) {
+            color: #{fn.use-var(color, $type)};
+          }
+        }
       }
     }
   }
@@ -164,10 +170,10 @@ $root-name: progress-nodes;
 
   @include m.e(link) {
     // 宽度需要跨越当前 item 的右 padding + 下一个 item 的左 padding
-    width: calc(100% - var(--dot-size) + 24px);
+    width: calc(100% - 14px + 24px);
     height: 0;
     border-width: 1px 0 0 0;
-    left: calc(50% + var(--dot-size) / 2);
+    left: calc(50% + 14px / 2);
     top: 50%;
     transform: translateY(-50%);
   }

package/src/components/radio/style.scss

@@ -4,10 +4,6 @@
 
 $root-name: radio;
 @include m.b($root-name) {
-  @include m.dark() {
-    --u-radio-border: #595959;
-  }
-
   cursor: pointer;
   vertical-align: middle;
   user-select: none;

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/select/style.scss

@@ -3,18 +3,6 @@
 
 $root-name: select;
 @include m.b($root-name) {
-  --u-menu-hover-bg: rgba(148, 163, 184, 0.12);
-  --u-menu-hover-color: #{fn.use-var(text-color, title)};
-  --u-menu-active-bg: rgba(59, 130, 246, 0.12);
-  --u-menu-active-color: var(--u-color-primary-dark-1);
-
-  @include m.dark() {
-    --u-menu-hover-bg: rgba(148, 163, 184, 0.14);
-    --u-menu-hover-color: #{fn.use-var(text-color, title)};
-    --u-menu-active-bg: rgba(96, 165, 250, 0.2);
-    --u-menu-active-color: #{fn.use-var(text-color, white)};
-  }
-
   width: 100%;
 
   @include m.e(content-filter) {

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/steps/style.scss

@@ -10,13 +10,20 @@ $root-name: steps;
   padding: 0;
   margin: 0;
 
-  /** 颜色变量 */
   @each $type in vars.$color-types {
     @include m.em(finished, $type) {
-      --finished-color: #{fn.use-var(color, $type)};
+      @include m.e(item) {
+        @include m.is(finished) {
+          color: fn.use-var(color, $type);
+        }
+      }
     }
     @include m.em(current, $type) {
-      --current-color: #{fn.use-var(color, $type)};
+      @include m.e(item) {
+        @include m.is(current) {
+          color: fn.use-var(color, $type);
+        }
+      }
     }
   }
 
@@ -24,13 +31,6 @@ $root-name: steps;
   @include m.e(item) {
     font-weight: 600;
     color: fn.use-var(text-color, placeholder);
-
-    @include m.is(finished) {
-      color: var(--finished-color);
-    }
-    @include m.is(current) {
-      color: var(--current-color);
-    }
   }
 
   @include m.e(node) {

package/src/components/switch/style.scss

@@ -4,10 +4,6 @@
 
 $root-name: switch;
 @include m.b($root-name) {
-  --u-switch-height-small: 18px;
-  --u-switch-height-default: 20px;
-  --u-switch-height-large: 24px;
-
   display: inline-flex;
   align-items: center;
   cursor: pointer;

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,
@@ -53,7 +53,24 @@ export const TableDIKey: InjectionKey<
       row: TableRow,
       column: ColumnNode
     ) => TableColumnSlotsScope | TableColumnRenderContext
-  } & VirtualReturned
+
+    /**
+     * 当前渲染窗口的虚拟项列表。
+     *
+     * 由 `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<{

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/style.scss

@@ -14,32 +14,6 @@ $root-name: table;
 }
 
 @include m.b($root-name) {
-  --u-table-border-color: #e9e9e9;
-  --u-table-header-bg: #f4f5f7;
-  --u-table-header-color: #{fn.use-var(text-color, title)};
-  --u-table-stripe-bg: #f8fafc;
-  --u-table-stripe-color: inherit;
-  --u-table-hover-bg: #{fn.use-var(bg-color, hover)};
-  --u-table-hover-color: inherit;
-  --u-table-current-bg: #{fn.use-var(bg-color, hover)};
-  --u-table-current-color: inherit;
-  --u-table-checked-bg: var(--u-color-primary-light-9);
-  --u-table-checked-color: inherit;
-
-  @include m.dark() {
-    --u-table-border-color: #404040;
-    --u-table-header-bg: #2a2a2a;
-    --u-table-header-color: #{fn.use-var(text-color, main)};
-    --u-table-stripe-bg: #2a2a2a;
-    --u-table-stripe-color: #{fn.use-var(text-color, main)};
-    --u-table-hover-bg: #333333;
-    --u-table-hover-color: #{fn.use-var(text-color, title)};
-    --u-table-current-bg: #{fn.use-var(bg-color, hover)};
-    --u-table-current-color: inherit;
-    --u-table-checked-bg: var(--u-color-primary-dark-1);
-    --u-table-checked-color: inherit;
-  }
-
   width: 100%;
   position: relative;
   border: 1px solid var(--u-table-border-color);

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>