@veltra/desktop 1.0.7 → 1.0.9

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>

package/src/components/table/table-row.tsx

@@ -1,7 +1,6 @@
 import { ArrowRight } from '@veltra/icons/normal'
-import { bem } from '@veltra/utils'
-import { defineComponent, type DefineComponent, type VNodeRef } from 'vue'
-import { inject } from 'vue'
+import { defineComponent, type DefineComponent } from 'vue'
+import { inject, onUnmounted } from 'vue'
 import type { JSX } from 'vue/jsx-runtime'
 
 import type { TableRow as ITableRow } from '../../types'
@@ -10,14 +9,40 @@ import { UIcon } from '../icon'
 import { TableDIKey } from './di'
 import UTabelCell from './table-cell.vue'
 
-export const UTableRow: DefineComponent<{ row: ITableRow }> = defineComponent({
+/**
+ * A3：行修饰类组合静态查找表。
+ *
+ * 位模式：bit2 = isCurrent, bit1 = checked, bit0 = expanded。
+ * 与 `bem.is('...')` 对于 `'current' | 'checked' | 'expanded'` 的输出完全等价，
+ * 直接从 index 读字符串，消除每行渲染期间的字符串拼接和 3 次 bem.is 调用。
+ *
+ * 放在模块顶层使所有 TableRow 实例共享一份引用（不会随 setup 重建）。
+ */
+const ROW_MOD_CLASS: readonly string[] = [
+  '',
+  'is-expanded',
+  'is-checked',
+  'is-checked is-expanded',
+  'is-current',
+  'is-current is-expanded',
+  'is-current is-checked',
+  'is-current is-checked is-expanded'
+] as const
+
+function rowModCls(row: ITableRow): string {
+  const i = (row.isCurrent ? 4 : 0) | (row.checked ? 2 : 0) | (row.expanded ? 1 : 0)
+  return ROW_MOD_CLASS[i]!
+}
+
+export const UTableRow: DefineComponent<{ row: ITableRow; index: number }> = defineComponent({
   name: 'TableRow',
 
-  props: ['row'],
+  props: {
+    row: { type: Object as () => ITableRow, required: true },
+    index: { type: Number, required: true }
+  },
 
   setup(props) {
-    const { row } = props
-
     const {
       cls,
       columnConfig,
@@ -27,12 +52,39 @@ export const UTableRow: DefineComponent<{ row: ITableRow }> = defineComponent({
       handleRowClick,
       handleCellClick,
       tableProps,
-      measureElement
+      measureElement,
+      getCellClass
     } = inject(TableDIKey)!
 
+    // A1：把 cls.e('row') / cls.e('expand-toggle') 等静态字符串提升到 setup 一次性计算，
+    // 避免每次 render 重新走 `cls.e` 拼接。
+    const rowBaseCls = cls.e('row')
+    const expandToggleCls = cls.e('expand-toggle')
+    const expandSpaceCls = cls.e('expand-space')
+
+    // A2：measureRef 按 index 缓存闭包。
+    // 行虚拟化下，同一 TableRow 实例的 props.index 大多稳定，但在虚拟化重排或展开行切换时
+    // 仍会发生变化；把 (index) → refFn 缓存起来，既保证引用稳定（利于 Vue 的 ref diff），
+    // 又避免在未来可能的"同实例跨 index 复用"情形下重复分配闭包。
+    const measureRefCache = new Map<number, (el: unknown) => void>()
+    const getMeasureRef = (index: number): ((el: unknown) => void) => {
+      let ref = measureRefCache.get(index)
+      if (ref === undefined) {
+        ref = (el: unknown) => {
+          measureElement(index, el as Element | null)
+        }
+        measureRefCache.set(index, ref)
+      }
+      return ref
+    }
+    onUnmounted(() => {
+      measureRefCache.clear()
+    })
+
     const { columns, expandColumn } = columnConfig
 
     return () => {
+      const { row } = props
       const _expandColumn = expandColumn.value
 
       let expandCell: JSX.Element | null = null
@@ -44,7 +96,7 @@ export const UTableRow: DefineComponent<{ row: ITableRow }> = defineComponent({
           const marginLeft = tableProps.tree ? (row.depth - 1) * 14 : 0
           expandCell = (
             <UTabelCell
-              column={_expandColumn}
+              cellClass={getCellClass(_expandColumn)}
               left={_expandColumn.style.left}
               right={_expandColumn.style.right}
               key={row.uid + _expandColumn.key}
@@ -53,7 +105,7 @@ export const UTableRow: DefineComponent<{ row: ITableRow }> = defineComponent({
               {!row.isLeaf || (tableProps.expandable && !row.isExpandRow) ? (
                 <UButton
                   text
-                  class={cls.e('expand-toggle')}
+                  class={expandToggleCls}
                   type='primary'
                   size='small'
                   circle
@@ -68,7 +120,7 @@ export const UTableRow: DefineComponent<{ row: ITableRow }> = defineComponent({
                   </UIcon>
                 </UButton>
               ) : (
-                <i class={cls.e('expand-space')} style={`margin-left: ${marginLeft}px`}></i>
+                <i class={expandSpaceCls} style={`margin-left: ${marginLeft}px`}></i>
               )}
 
               {getColumnSlotsNode(expandCtx)}
@@ -77,11 +129,15 @@ export const UTableRow: DefineComponent<{ row: ITableRow }> = defineComponent({
         }
       }
 
+      // A3：行 class 由 base + 3-bit 组合查找产出，避免 Vue 的 class 数组归一化开销。
+      const mod = rowModCls(row)
+      const rowCls = mod ? rowBaseCls + ' ' + mod : rowBaseCls
+
       return (
         <tr
-          class={[cls.e('row'), bem.is('expanded', row.expanded), bem.is('checked', row.checked)]}
+          class={rowCls}
           onClick={(e) => handleRowClick(row, e)}
-          ref={measureElement as VNodeRef}
+          ref={getMeasureRef(props.index)}
           key={row.uid}
         >
           {expandCell}
@@ -97,7 +153,7 @@ export const UTableRow: DefineComponent<{ row: ITableRow }> = defineComponent({
 
             return (
               <UTabelCell
-                column={column}
+                cellClass={getCellClass(column)}
                 left={column.style.left}
                 right={column.style.right}
                 key={row.uid + column.key}
@@ -117,11 +173,21 @@ export const UTableRow: DefineComponent<{ row: ITableRow }> = defineComponent({
 
 export const UExpandTableRow = defineComponent({
   name: 'ExpandTableRow',
-  props: ['row'],
+  props: {
+    row: { type: Object as () => ITableRow, required: true },
+    index: { type: Number, required: true }
+  },
   setup(props) {
     const { getExpandRowSlotsNode, cls, measureElement, columnConfig } = inject(TableDIKey)!
     const { leafColumns } = columnConfig
 
+    const rowBaseCls = cls.e('row')
+    const cellCls = cls.e('cell')
+
+    const measureRef = (el: unknown) => {
+      measureElement(props.index, el as Element | null)
+    }
+
     return () => {
       const { row } = props
       const node = getExpandRowSlotsNode({
@@ -131,8 +197,8 @@ export const UExpandTableRow = defineComponent({
         rowData: row.data
       })
       return (
-        <tr class={cls.e('row')} ref={measureElement as VNodeRef}>
-          <td colspan={leafColumns.value.length} class={cls.e('cell')}>
+        <tr class={rowBaseCls} ref={measureRef}>
+          <td colspan={leafColumns.value.length} class={cellCls}>
             {node}
           </td>
         </tr>

package/src/components/table/table.vue

@@ -11,6 +11,7 @@
     :content-class="cls.e('content')"
     @scroll="handleScroll"
   >
+    {{ console.log(1) }}
     <table :class="cls.e('wrap')">
       <colgroup ref="colgroupRef">
         <col
@@ -25,7 +26,18 @@
       </colgroup>
       <UTableHead />
 
-      <u-table-body ref="tableBody">
+      <!--
+        虚拟滚动上占位：替代 tbody transform，避免 table-layout: fixed 下列宽抖动。
+        高度由 useVirtualizer 命令式写入 `style.height`，不经过模板响应式绑定，
+        因此滚动窗口变化不会引起表格模板重渲染。
+      -->
+      <tbody v-if="virtualEnabled" aria-hidden="true">
+        <tr ref="beforeSpacerRef">
+          <td :colspan="leafColumns.length" style="padding: 0; border: none"></td>
+        </tr>
+      </tbody>
+
+      <u-table-body>
         <slot name="body" :columns="leafColumns" :rows="rows" />
 
         <template #empty v-if="slots.empty">
@@ -33,8 +45,12 @@
         </template>
       </u-table-body>
 
-      <!-- 占用空间，用来撑开表格高度 -->
-      <tbody v-if="virtualEnabled" ref="spaceRef" :style="{ width: '1px' }"></tbody>
+      <!-- 虚拟滚动下占位（高度由 useVirtualizer 命令式写入） -->
+      <tbody v-if="virtualEnabled" aria-hidden="true">
+        <tr ref="afterSpacerRef">
+          <td :colspan="leafColumns.length" style="padding: 0; border: none"></td>
+        </tr>
+      </tbody>
 
       <u-table-foot ref="tableFoot">
         <slot name="foot" :columns="leafColumns" :rows="rows" />
@@ -50,9 +66,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useFallbackProps, useVirtual } from '@veltra/compositions'
-import { bem, setStyles, withUnit } from '@veltra/utils'
-import { computed, nextTick, provide, shallowRef, toRef, useTemplateRef, watch } from 'vue'
+import { useFallbackProps, useVirtualizer } from '@veltra/compositions'
+import { bem, withUnit } from '@veltra/utils'
+import { computed, provide, shallowRef, toRef, useTemplateRef, watch } from 'vue'
 
 import type {
   TableProps,
@@ -102,7 +118,16 @@ const cls = bem('table')
 
 const { size } = useFallbackProps([props], { size: 'default' as ComponentSize })
 
-// 行
+const scrollRef = shallowRef<ScrollExposed>()
+
+// 占位 tr 的 DOM 句柄；交给 useVirtualizer 直接命令式写 style.height。
+const beforeSpacerRef = useTemplateRef<HTMLElement>('beforeSpacerRef')
+const afterSpacerRef = useTemplateRef<HTMLElement>('afterSpacerRef')
+
+// 行（useRows / useFixedColumns 需要 isScrolling，而虚拟化 hook 又依赖 rows.length；
+// 先用中继占位，下方 isScrolling 到位后 watch 回灌）。
+const isScrollingRelay = shallowRef(false)
+
 const {
   rows,
   toggleTreeRowExpand,
@@ -112,13 +137,11 @@ const {
   handleRowClick,
   handleCellClick,
   getRowByData
-} = useRows({ props, emit })
+} = useRows({ props, emit, isScrolling: isScrollingRelay })
 
-// 选中
 const { createCheckColumn, createSelectColumn, clearChecked, clearSelected, checkedRows } =
   useCheck({ size, props, rows, rowForest, emit, cls })
 
-// 列
 const columnConfig = useColumns({
   props,
   createCheckColumn,
@@ -129,9 +152,10 @@ const columnConfig = useColumns({
 
 const { leafColumns } = columnConfig
 
-const { handleScroll, leftFixed, rightFixed } = useFixedColumns()
+const { handleScroll, leftFixed, rightFixed } = useFixedColumns({
+  isScrolling: isScrollingRelay
+})
 
-// 在表格中提供的通用方法和属性
 const {
   getColumnSlotsNode,
   getExpandRowSlotsNode,
@@ -141,49 +165,51 @@ const {
   getHeaderCellClass
 } = useTable({ props, cls, leftFixed, rightFixed })
 
-const scrollRef = shallowRef<ScrollExposed>()
-
 const { showResizeLine, resizeLineRef, colgroupRef } = useColResize({ scrollRef, leafColumns })
 
-const virtualCtx = useVirtual({
+const { virtualizer, items, isScrolling } = useVirtualizer({
   count: computed(() => rows.value.length),
-  scrollEl: computed(() => scrollRef.value?.containerRef ?? null),
-  estimateSize: () => 52,
-  virtualThreshold: toRef(props, 'virtualThreshold')
+  scrollEl: () => scrollRef.value?.containerRef ?? null,
+  beforeEl: beforeSpacerRef,
+  afterEl: afterSpacerRef,
+  estimateSize: () => 41,
+  // 注意：getItemKey 在构造期一次性写入底层 Virtualizer；闭包每次读的是当前 rows.value，
+  // rows 引用整体替换后 key 仍有效（无需再 setOptions）。
+  getItemKey: (i) => rows.value[i]?.uid ?? i
 })
 
-const { virtualList, totalHeight, virtualEnabled } = virtualCtx
-
-const spaceHeight = computed(() => {
-  if (virtualList.value.length) {
-    return (
-      totalHeight.value -
-      virtualList.value[virtualList.value.length - 1]!.end +
-      virtualList.value[0]!.start
-    )
-  }
-  return totalHeight.value
+const virtualEnabled = computed(() => {
+  const t = props.virtualThreshold
+  return t ? rows.value.length > t : true
 })
 
-const spaceRef = shallowRef<HTMLElement>()
+// 把虚拟化 isScrolling 回灌到中继，供 useRows / useFixedColumns 读取。
+watch(isScrolling, (v) => {
+  isScrollingRelay.value = v
+})
 
-watch(
-  spaceHeight,
-  (spaceHeight) => {
-    nextTick(() => {
-      spaceRef.value &&
-        setStyles(spaceRef.value, { height: spaceHeight ? `${spaceHeight}px` : undefined })
-    })
-  },
-  { immediate: true }
-)
+/**
+ * E1：数据替换时的条件置顶。
+ *
+ * 旧实现无差别地 `scrollTo({ y: 0 })`，在「行内增删 / 排序 / 单行更新」等
+ * 场景会把用户当前阅读位置跳走；仅在「翻页 / 显著数据集替换」时才需要复位。
+ *
+ * 判定阈值：|Δlen| / max(newLen, oldLen) ≥ 0.5，即行数变化量超过更大侧的一半时视为显著变化。
+ * 选择 0.5 是因为典型的分页/搜索场景会带来 50% 以上的行数差（通常完全替换数据集），
+ * 而行内追加 / 删除个位数通常只带来 <5% 的变化；两者区分度足够宽。
+ */
+const LENGTH_DELTA_RATIO_TO_RESET_SCROLL = 0.5
 
-const tableBodyRef = useTemplateRef('tableBody')
 watch(
   () => props.data,
-  () => {
-    tableBodyRef.value?.setBodyTransform(0)
-    scrollRef.value?.scrollTo({ y: 0 })
+  (next, prev) => {
+    const nextLen = next?.length ?? 0
+    const prevLen = prev?.length ?? 0
+    const denom = Math.max(nextLen, prevLen, 1)
+    const ratio = Math.abs(nextLen - prevLen) / denom
+    if (ratio >= LENGTH_DELTA_RATIO_TO_RESET_SCROLL) {
+      scrollRef.value?.scrollTo({ y: 0 })
+    }
   }
 )
 
@@ -206,7 +232,9 @@ provide(TableDIKey, {
   getHeaderCellClass,
   // tipRef,
   toggleTreeRowExpand,
-  ...virtualCtx
+  virtualList: items,
+  virtualEnabled,
+  measureElement: (index, el) => virtualizer.measureElement(index, el)
 })
 
 const tableFootRef = useTemplateRef('tableFoot')

package/src/components/table/use-fixed-columns.ts

@@ -1,5 +1,5 @@
 import { debounce } from '@cat-kit/core'
-import { type ShallowRef, ref } from 'vue'
+import { type ShallowRef, type Ref, ref, watch } from 'vue'
 
 import type { ScrollPosition } from '../../types'
 
@@ -9,28 +9,62 @@ interface UseColumnFixedReturned {
   handleScroll: (e: Required<ScrollPosition>) => void
 }
 
+interface Options {
+  /**
+   * D1：滚动中 (`true`) 暂缓 `leftFixed` / `rightFixed` 的切换，滚动结束后
+   * 一次性补算。
+   *
+   * 背景：固定列的阴影是通过在 cell 上切换 `is-last-fixed` / `is-first-fixed`
+   * 等 class 实现的，这些 class 会穿透到 `useTable.getCellClass` 的缓存键，
+   * 任何一次切换都会让全表的单元格类名失效重算。滚动本身并不需要实时更新阴影，
+   * 因此把切换推迟到 `isScrolling` 归零时做一次即可。
+   *
+   * 未传入时退化到旧行为（实时切换）。
+   */
+  isScrolling?: Ref<boolean>
+}
+
 /**
  * 固定列
  * @returns
  */
-export function useFixedColumns(): UseColumnFixedReturned {
+export function useFixedColumns(options: Options = {}): UseColumnFixedReturned {
+  const { isScrolling } = options
+
   const leftFixed = ref(false)
   const rightFixed = ref(false)
 
+  let pendingLeft: boolean | null = null
+  let pendingRight: boolean | null = null
+
+  const applyImmediate = (nextLeft: boolean, nextRight: boolean): void => {
+    if (nextLeft !== leftFixed.value) leftFixed.value = nextLeft
+    if (nextRight !== rightFixed.value) rightFixed.value = nextRight
+    pendingLeft = null
+    pendingRight = null
+  }
+
   const handleScroll = debounce((e: Required<ScrollPosition>) => {
-    if (e.x > 0) {
-      leftFixed.value = true
-    } else {
-      leftFixed.value = false
-    }
+    const nextLeft = e.x > 0
+    // 精度修正：浏览器滚动条最后 1px 的误差
+    const nextRight = !(e.cw + e.x + 1 >= e.sw)
 
-    // 精度修正
-    if (e.cw + e.x + 1 >= e.sw) {
-      rightFixed.value = false
-    } else {
-      rightFixed.value = true
+    if (isScrolling?.value) {
+      pendingLeft = nextLeft
+      pendingRight = nextRight
+      return
     }
+
+    applyImmediate(nextLeft, nextRight)
   }, 50)
 
+  if (isScrolling) {
+    watch(isScrolling, (v) => {
+      if (v) return
+      if (pendingLeft === null && pendingRight === null) return
+      applyImmediate(pendingLeft ?? leftFixed.value, pendingRight ?? rightFixed.value)
+    })
+  }
+
   return { leftFixed, rightFixed, handleScroll }
 }

package/src/components/table/use-rows.ts

@@ -1,6 +1,6 @@
 import { Forest, o } from '@cat-kit/core'
 import { useModel } from '@veltra/compositions'
-import { shallowRef, watch, type ShallowRef } from 'vue'
+import { shallowRef, watch, type Ref, type ShallowRef } from 'vue'
 
 import type { TableColumn, TableEmits, TableProps, TableRow } from '../../types'
 import { TableRowNode } from './node/row'
@@ -8,6 +8,14 @@ import { TableRowNode } from './node/row'
 interface Options {
   props: TableProps
   emit: TableEmits
+  /**
+   * D2：滚动中 (`true`) 跳过 `currentRow` 高亮写入。
+   *
+   * 行点击处理会通过 `currentRow` watcher 把 `isCurrent` 切换到新行 / 旧行上，
+   * 触发对应 `<tr>` 的 class 重绘。在滚动期间 (移动端/触控板惯性滚动常见)
+   * 意外点击不应改变高亮，因此直接跳过；滚动结束后的正常点击仍会生效。
+   */
+  isScrolling?: Ref<boolean>
 }
 
 interface UseRowsReturned {
@@ -30,7 +38,7 @@ interface UseRowsReturned {
 }
 
 export function useRows(options: Options): UseRowsReturned {
-  const { props, emit } = options
+  const { props, emit, isScrolling } = options
 
   // --- 状态定义 ---
 
@@ -217,7 +225,10 @@ export function useRows(options: Options): UseRowsReturned {
   }
 
   function handleRowClick(row: TableRow, e: MouseEvent): void {
-    currentRow.value = currentRow.value === row ? undefined : row
+    // D2：滚动中的点击（多为惯性滚动误触）不应改变 currentRow 高亮。
+    if (!isScrolling?.value) {
+      currentRow.value = currentRow.value === row ? undefined : row
+    }
     emit('row-click', row, e)
   }
 

package/src/components/table/use-table.ts

@@ -1,6 +1,6 @@
 import { o } from '@cat-kit/core'
 import { bem, type BEM } from '@veltra/utils'
-import { useSlots, type Ref } from 'vue'
+import { useSlots, watch, type Ref } from 'vue'
 
 import type {
   TableColumnRenderContext,
@@ -87,12 +87,36 @@ export function useTable(options: Options): UseTableReturn {
     return classList.join(' ')
   }
 
+  /**
+   * B1: 单元格类名按 ColumnNode 身份缓存。
+   *
+   * 对同一列，类名只取决于 (column.fixed, column.isLastFixed, column.isFirstFixed,
+   * column.align, leftFixed, rightFixed)。其中前四个绑定在 ColumnNode 实例上，
+   * 后两个在 leftFixed/rightFixed 变化时失效缓存即可。用 WeakMap 以 ColumnNode
+   * 为键可避免字符串 key 的拼接/哈希开销，且列树重建时节点随 GC 自动释放。
+   */
+  let cellClassCache = new WeakMap<ColumnNode, string>()
+  let headerCellClassCache = new WeakMap<ColumnNode, string>()
+
+  watch([leftFixed, rightFixed], () => {
+    cellClassCache = new WeakMap()
+    headerCellClassCache = new WeakMap()
+  })
+
   const getCellClass = (column: ColumnNode): string => {
-    return getCommonClassName(column) + ` ${bem.is(column.align)}`
+    const cached = cellClassCache.get(column)
+    if (cached !== undefined) return cached
+    const result = getCommonClassName(column) + ` ${bem.is(column.align)}`
+    cellClassCache.set(column, result)
+    return result
   }
 
   const getHeaderCellClass = (column: ColumnNode): string => {
-    return getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`
+    const cached = headerCellClassCache.get(column)
+    if (cached !== undefined) return cached
+    const result = getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`
+    headerCellClassCache.set(column, result)
+    return result
   }
 
   const getCellCtx = (

package/src/components/tabs/index.ts

@@ -1 +1,3 @@
 export { default as UTabs } from './tabs.vue'
+export { default as UTabsHorizontal } from './tabs-horizontal.vue'
+export { default as UTabsVertical } from './tabs-vertical.vue'