niuma-ui 1.0.0 → 1.0.2

package/src/composables/useRsTableColumnLayout.ts

@@ -0,0 +1,320 @@
+/**
+ * RsTable 列布局：拉满补宽、渲染列宽、fixed/overflow/前缀 lead 样式。
+ *
+ * 性能约定：
+ * - `emptyFillExtras` 使用冻结空对象恒等，避免无补宽时 renderColumnWidths 复制整表
+ * - 列 style Map 一次遍历构建，模板热路径按 key O(1) 取用
+ */
+
+import { computed, type ComputedRef, type Ref } from 'vue'
+import { measureRsTablePrefixWidth, RS_TABLE_PREFIX_COL_WIDTH } from './useRsTableColumnVirtual'
+import {
+  fixedCellStyle,
+  parseColumnWidth,
+  resolveColumnStyle,
+  resolveFixedColumnStyles,
+  type RsTableColumn,
+  type RsTableRowData,
+} from '../components/table-utils'
+
+/** ComputedRef / Ref / getter 均可 */
+type Source<T> = ComputedRef<T> | Ref<T> | (() => T)
+
+function read<T>(source: Source<T>): T {
+  if (typeof source === 'function') return (source as () => T)()
+  return (source as Ref<T> | ComputedRef<T>).value
+}
+
+/** 无补宽时的共享空对象（恒等比较，避免无意义拷贝） */
+const EMPTY_FILL_EXTRAS: Record<string, number> = Object.freeze({})
+
+export interface UseRsTableColumnLayoutOptions<T extends RsTableRowData> {
+  displayColumns: Source<RsTableColumn<T>[]>
+  effectiveColumnWidths: Source<Record<string, number>>
+  measuredViewportWidth: Source<number>
+  tableMinWidth: Source<string | undefined>
+  resizable: Source<boolean>
+  columnLayout: Source<'auto' | 'fixed'>
+  useStableColumnWidths: Source<boolean>
+  isColumnResizing: Source<boolean>
+  virtualColumnsEnabled: Source<boolean>
+  scrollX: Source<number | string | undefined>
+  showRowDragHandle: Source<boolean>
+  detailExpandable: Source<boolean>
+  showSelectColumn: Source<boolean>
+  showEditGutterColumn: Source<boolean>
+  showIndexColumn: Source<boolean>
+  showRowStatusColumn: Source<boolean>
+  resolvedGutterWidth: Source<number>
+  resolvedIndexWidth: Source<number>
+  dragColumnOffset: Source<number>
+  expandColumnOffset: Source<number>
+  selectColumnOffset: Source<number>
+  /** 拖拽会话快照列宽；非空表示正在/刚进入 resize paint */
+  resizePaintWidths: Source<Record<string, number> | null>
+}
+
+/**
+ * 列布局与样式缓存。
+ */
+export function useRsTableColumnLayout<T extends RsTableRowData>(
+  options: UseRsTableColumnLayoutOptions<T>,
+) {
+  const PREFIX = RS_TABLE_PREFIX_COL_WIDTH
+
+  /** 前缀列总宽（不含 status；status 在部分合计里另加） */
+  function measurePrefixColumnWidth(): number {
+    return measureRsTablePrefixWidth({
+      showRowDragHandle: read(options.showRowDragHandle),
+      detailExpandable: read(options.detailExpandable),
+      showSelectColumn: read(options.showSelectColumn),
+      showEditGutterColumn: read(options.showEditGutterColumn),
+      showIndexColumn: read(options.showIndexColumn),
+      gutterWidth: read(options.resolvedGutterWidth),
+      indexWidth: read(options.resolvedIndexWidth),
+    })
+  }
+
+  /** resizable 且列宽稳定时，或拖拽会话中：表格内容最小宽度 = 各列宽度之和 */
+  const resizableTableWidth = computed(() => {
+    if (!read(options.resizable)) return undefined
+    if (
+      !read(options.resizePaintWidths) &&
+      read(options.columnLayout) === 'auto' &&
+      !read(options.useStableColumnWidths)
+    ) {
+      return undefined
+    }
+    let sum = measurePrefixColumnWidth()
+    const widths = read(options.effectiveColumnWidths)
+    for (const col of read(options.displayColumns)) {
+      sum += widths[col.key] ?? parseColumnWidth(col.width ?? col.minWidth)
+    }
+    return `${sum}px`
+  })
+
+  const useFixedColumnLayout = computed(
+    () => read(options.useStableColumnWidths) || read(options.isColumnResizing),
+  )
+
+  /**
+   * 列总宽不足视口时，把剩余像素均分到数据列（前缀列不动）。
+   * 列虚拟开启时不做拉满，避免与横向切片打架。
+   */
+  const columnFillExtras = computed((): Record<string, number> => {
+    if (read(options.isColumnResizing)) return EMPTY_FILL_EXTRAS
+    if (!useFixedColumnLayout.value) return EMPTY_FILL_EXTRAS
+    if (read(options.virtualColumnsEnabled)) return EMPTY_FILL_EXTRAS
+    const viewportW = read(options.measuredViewportWidth)
+    if (viewportW <= 0) return EMPTY_FILL_EXTRAS
+    const cols = read(options.displayColumns)
+    if (cols.length === 0) return EMPTY_FILL_EXTRAS
+
+    let sum = measurePrefixColumnWidth()
+    if (read(options.showRowStatusColumn)) sum += PREFIX.status
+    const widths = read(options.effectiveColumnWidths)
+    for (const col of cols) {
+      sum += widths[col.key] ?? parseColumnWidth(col.width ?? col.minWidth)
+    }
+    const excess = Math.floor(viewportW - sum) - 1
+    if (excess <= 0) return EMPTY_FILL_EXTRAS
+
+    const extras: Record<string, number> = {}
+    const base = Math.floor(excess / cols.length)
+    let rem = excess - base * cols.length
+    for (const col of cols) {
+      extras[col.key] = base + (rem > 0 ? 1 : 0)
+      if (rem > 0) rem -= 1
+    }
+    return extras
+  })
+
+  /** 渲染用列宽 = 持久化/拖拽列宽 + 拉满补宽；无补宽时直接返回 base 引用 */
+  const renderColumnWidths = computed(() => {
+    const extras = columnFillExtras.value
+    const base = read(options.effectiveColumnWidths)
+    if (extras === EMPTY_FILL_EXTRAS) return base
+    const next: Record<string, number> = { ...base }
+    for (const col of read(options.displayColumns)) {
+      const extra = extras[col.key]
+      if (!extra) continue
+      const cur = next[col.key] ?? parseColumnWidth(col.width ?? col.minWidth)
+      next[col.key] = cur + extra
+    }
+    return next
+  })
+
+  const tableInlineStyle = computed(() => {
+    if (read(options.isColumnResizing)) return undefined
+    if (read(options.resizable)) {
+      if (read(options.columnLayout) === 'auto' && !read(options.useStableColumnWidths)) {
+        const minW = read(options.tableMinWidth)
+        return minW ? { width: '100%', minWidth: minW } : { width: '100%' }
+      }
+      const width = resizableTableWidth.value
+      if (!width) return undefined
+      return { width: '100%', minWidth: read(options.tableMinWidth) ?? width }
+    }
+    const minW = read(options.tableMinWidth)
+    return minW ? { minWidth: minW } : undefined
+  })
+
+  function estimateRequiredTableWidth(): number {
+    let sum = measurePrefixColumnWidth()
+    if (read(options.showRowStatusColumn)) sum += PREFIX.status
+    const widths = read(options.effectiveColumnWidths)
+    for (const col of read(options.displayColumns)) {
+      const stored = widths[col.key]
+      if (typeof stored === 'number') {
+        sum += stored
+        continue
+      }
+      if (typeof col.width === 'number') {
+        sum += col.width
+        continue
+      }
+      if (col.minWidth !== undefined) {
+        sum += typeof col.minWidth === 'number' ? col.minWidth : parseColumnWidth(col.minWidth, 0)
+      }
+    }
+    return sum
+  }
+
+  /** 仅当列宽确需超过容器时开启横向滚动 */
+  const overflowXEnabled = computed(() => {
+    if (read(options.virtualColumnsEnabled)) return true
+    const scrollX = read(options.scrollX)
+    if (scrollX != null && scrollX !== '') return true
+    const viewportW = read(options.measuredViewportWidth)
+    if (viewportW <= 0) return false
+    if (useFixedColumnLayout.value) {
+      const raw = resizableTableWidth.value
+      const sum = raw ? Number.parseInt(raw, 10) : estimateRequiredTableWidth()
+      return Number.isFinite(sum) && sum > viewportW
+    }
+    return estimateRequiredTableWidth() > viewportW
+  })
+
+  function resolvedDataColumnWidth(key: string, fallback?: number | string): number {
+    const stored = renderColumnWidths.value[key]
+    if (typeof stored === 'number') return stored
+    return parseColumnWidth(fallback)
+  }
+
+  const fixedColumnStyles = computed(() =>
+    resolveFixedColumnStyles(read(options.displayColumns), renderColumnWidths.value, {
+      selectable: read(options.showSelectColumn),
+      showIndex: read(options.showIndexColumn),
+      showEditGutter: read(options.showEditGutterColumn),
+      gutterWidth: read(options.resolvedGutterWidth),
+      indexWidth: read(options.resolvedIndexWidth),
+      expandable: read(options.detailExpandable),
+      rowDraggable: read(options.showRowDragHandle),
+    }),
+  )
+
+  /**
+   * 一次遍历同时构建 body/header 列样式 Map，避免两遍 resolveColumnStyle。
+   */
+  const columnStyleMaps = computed(() => {
+    const body = new Map<string, Record<string, string> | undefined>()
+    const header = new Map<string, Record<string, string> | undefined>()
+    const widths = renderColumnWidths.value
+    const fixed = fixedColumnStyles.value
+    for (const col of read(options.displayColumns)) {
+      const base = resolveColumnStyle(col, widths) ?? {}
+      const bodyFixed = fixedCellStyle(fixed.get(col.key))
+      const headerFixed = fixedCellStyle(fixed.get(col.key), { header: true })
+      let bodyMerged: Record<string, string> | undefined
+      let headerMerged: Record<string, string> | undefined
+      if (bodyFixed) bodyMerged = { ...base, ...bodyFixed }
+      else if (Object.keys(base).length) bodyMerged = base
+      if (headerFixed) headerMerged = { ...base, ...headerFixed }
+      else if (Object.keys(base).length) headerMerged = base
+      body.set(col.key, bodyMerged)
+      header.set(col.key, headerMerged)
+    }
+    return { body, header }
+  })
+
+  const columnStyleMap = computed(() => columnStyleMaps.value.body)
+  const columnHeaderStyleMap = computed(() => columnStyleMaps.value.header)
+
+  /** td 静态 class Map：列配置不变时复用 */
+  const columnTdClassMap = computed<Map<string, string[]>>(() => {
+    const map = new Map<string, string[]>()
+    for (const col of read(options.displayColumns)) {
+      const classes: string[] = [`rs-table__cell--${col.align ?? 'left'}`]
+      if (col.ellipsis) classes.push('rs-table__td--ellipsis')
+      if (col.fixed) classes.push('rs-table__cell--fixed')
+      map.set(col.key, classes)
+    }
+    return map
+  })
+
+  const dragLeadStyle = computed(() => fixedCellStyle({ fixed: 'left', left: 0 }) ?? {})
+  const expandLeadStyle = computed(
+    () => fixedCellStyle({ fixed: 'left', left: read(options.dragColumnOffset) }) ?? {},
+  )
+  const selectLeadStyle = computed(
+    () => fixedCellStyle({ fixed: 'left', left: read(options.expandColumnOffset) }) ?? {},
+  )
+  const indexLeadStyle = computed(
+    () => fixedCellStyle({ fixed: 'left', left: read(options.selectColumnOffset) }) ?? {},
+  )
+  const gutterLeadStyle = computed(
+    () => fixedCellStyle({ fixed: 'left', left: read(options.selectColumnOffset) }) ?? {},
+  )
+  const dragLeadHeaderStyle = computed(
+    () => fixedCellStyle({ fixed: 'left', left: 0 }, { header: true }) ?? {},
+  )
+  const expandLeadHeaderStyle = computed(
+    () =>
+      fixedCellStyle({ fixed: 'left', left: read(options.dragColumnOffset) }, { header: true }) ?? {},
+  )
+  const selectLeadHeaderStyle = computed(
+    () =>
+      fixedCellStyle({ fixed: 'left', left: read(options.expandColumnOffset) }, { header: true }) ??
+      {},
+  )
+  const indexLeadHeaderStyle = computed(
+    () =>
+      fixedCellStyle({ fixed: 'left', left: read(options.selectColumnOffset) }, { header: true }) ??
+      {},
+  )
+  const gutterLeadHeaderStyle = computed(
+    () =>
+      fixedCellStyle({ fixed: 'left', left: read(options.selectColumnOffset) }, { header: true }) ??
+      {},
+  )
+
+  return {
+    EMPTY_FILL_EXTRAS,
+    measurePrefixColumnWidth,
+    resizableTableWidth,
+    useFixedColumnLayout,
+    columnFillExtras,
+    renderColumnWidths,
+    tableInlineStyle,
+    overflowXEnabled,
+    resolvedDataColumnWidth,
+    fixedColumnStyles,
+    columnStyleMap,
+    columnHeaderStyleMap,
+    columnTdClassMap,
+    dragLeadStyle,
+    expandLeadStyle,
+    selectLeadStyle,
+    indexLeadStyle,
+    gutterLeadStyle,
+    dragLeadHeaderStyle,
+    expandLeadHeaderStyle,
+    selectLeadHeaderStyle,
+    indexLeadHeaderStyle,
+    gutterLeadHeaderStyle,
+  }
+}
+
+export type RsTableColumnLayoutApi<T extends RsTableRowData> = ReturnType<
+  typeof useRsTableColumnLayout<T>
+>

package/src/composables/useRsTableColumnResize.ts

@@ -0,0 +1,244 @@
+/**
+ * RsTable 列宽拖拽：mousemove 走 DOM 直写，避免整表 Vue 重渲。
+ *
+ * 性能关键：
+ * - 会话开始时缓存 col/th 元素与基准总宽，RAF 内不再 querySelector 全表
+ * - 拖拽中只更新变化列宽度 + table 总宽（O(1)），不重写其它列
+ * - activeDragWidths 为非响应式 plain object，禁止写入 reactive
+ */
+
+import { nextTick, onUnmounted, ref, type ComputedRef, type Ref } from 'vue'
+import { clampColumnWidth, parseColumnWidth, type RsTableColumn, type RsTableRowData } from '../components/table-utils'
+
+function read<T>(source: ComputedRef<T> | (() => T) | Ref<T>): T {
+  if (typeof source === 'function') return (source as () => T)()
+  return (source as Ref<T> | ComputedRef<T>).value
+}
+
+export interface UseRsTableColumnResizeOptions<T extends RsTableRowData> {
+  resizable: ComputedRef<boolean> | (() => boolean)
+  minColumnWidth: ComputedRef<number | undefined> | (() => number | undefined)
+  maxColumnWidth: ComputedRef<number | undefined> | (() => number | undefined)
+  displayColumns: ComputedRef<RsTableColumn<T>[]> | (() => RsTableColumn<T>[])
+  resolvedColumnWidths: {
+    get: () => Record<string, number>
+    set: (value: Record<string, number>) => void
+  }
+  /** 前缀列总宽（px），用于 DOM 直写时的 table 总宽 */
+  measurePrefixColumnWidth: () => number
+  tableMinWidth: ComputedRef<string | undefined> | (() => string | undefined)
+  onColumnResize: (key: string, width: number) => void
+}
+
+interface ResizeSession {
+  key: string
+  startX: number
+  startWidth: number
+  currentWidth: number
+  domSnapshot: Record<string, number>
+  /** 会话基准总宽（前缀 + 各列快照），便于 O(1) 更新 table.width */
+  baseTableWidth: number
+  colEls: Map<string, HTMLTableColElement>
+  thEls: Map<string, HTMLTableCellElement>
+}
+
+/**
+ * 列宽拖拽会话。
+ */
+export function useRsTableColumnResize<T extends RsTableRowData>(
+  options: UseRsTableColumnResizeOptions<T>,
+) {
+  const tableRef = ref<HTMLTableElement | null>(null)
+  const isColumnResizing = ref(false)
+  /** 拖拽会话中的列宽快照（仅首帧写入一次，供 colgroup 初始渲染） */
+  const resizePaintWidths = ref<Record<string, number> | null>(null)
+
+  let session: ResizeSession | null = null
+  /** 非响应式：mousemove 高频更新不得触发 Vue */
+  let activeDragWidths: Record<string, number> | null = null
+  let resizeRafId = 0
+  let latestResizeClientX = 0
+  let resizeMoved = false
+
+  function cacheColumnElements(table: HTMLTableElement): {
+    colEls: Map<string, HTMLTableColElement>
+    thEls: Map<string, HTMLTableCellElement>
+  } {
+    const colEls = new Map<string, HTMLTableColElement>()
+    const thEls = new Map<string, HTMLTableCellElement>()
+    for (const col of table.querySelectorAll<HTMLTableColElement>('colgroup col[data-col-key]')) {
+      const key = col.dataset.colKey
+      if (key) colEls.set(key, col)
+    }
+    for (const th of table.querySelectorAll<HTMLTableCellElement>('thead th[data-col-key]')) {
+      const key = th.dataset.colKey
+      if (key) thEls.set(key, th)
+    }
+    return { colEls, thEls }
+  }
+
+  /** 会话开始：一次性写满所有列宽到 DOM */
+  function paintAllColumnWidths(table: HTMLTableElement, widths: Record<string, number>, cache: {
+    colEls: Map<string, HTMLTableColElement>
+    thEls: Map<string, HTMLTableCellElement>
+  }): number {
+    let sum = options.measurePrefixColumnWidth()
+    for (const column of read(options.displayColumns)) {
+      const width = widths[column.key] ?? parseColumnWidth(column.width ?? column.minWidth)
+      const col = cache.colEls.get(column.key)
+      if (col) col.style.width = `${width}px`
+      const th = cache.thEls.get(column.key)
+      if (th) th.style.width = `${width}px`
+      sum += width
+    }
+    table.style.width = `${sum}px`
+    const minWidth = read(options.tableMinWidth)
+    if (minWidth) table.style.minWidth = minWidth
+    return sum
+  }
+
+  /** 确保 colgroup 元素已缓存；fixed 布局首帧可能尚未挂上，失败则返回 false */
+  function ensureSessionDomCache(): boolean {
+    if (!session || !tableRef.value || !activeDragWidths) return false
+    if (session.colEls.size > 0) return true
+    const cache = cacheColumnElements(tableRef.value)
+    if (cache.colEls.size === 0) return false
+    session.colEls = cache.colEls
+    session.thEls = cache.thEls
+    session.baseTableWidth = paintAllColumnWidths(tableRef.value, activeDragWidths, cache)
+    return true
+  }
+
+  /** RAF 热路径：只改变化列 + 总宽；缓存未就绪时先全量写一次 */
+  function paintChangedColumnWidth(width: number): void {
+    if (!session || !tableRef.value) return
+    if (!ensureSessionDomCache()) return
+    const { key, colEls, thEls, baseTableWidth, startWidth } = session
+    const col = colEls.get(key)
+    if (col) col.style.width = `${width}px`
+    const th = thEls.get(key)
+    if (th) th.style.width = `${width}px`
+    tableRef.value.style.width = `${baseTableWidth - startWidth + width}px`
+  }
+
+  function beginResizeSession(): void {
+    if (!session || isColumnResizing.value || !tableRef.value) return
+    isColumnResizing.value = true
+    activeDragWidths = { ...session.domSnapshot }
+    resizePaintWidths.value = { ...activeDragWidths }
+    // colgroup 依赖 fixed 布局重渲；先同步尝试，再 nextTick 兜底（避免 RAF 抢跑打空）
+    if (!ensureSessionDomCache()) {
+      void nextTick(() => {
+        ensureSessionDomCache()
+      })
+    }
+  }
+
+  function onResizeMove(event: MouseEvent): void {
+    if (!session) return
+    latestResizeClientX = event.clientX
+    if (!resizeMoved && Math.abs(latestResizeClientX - session.startX) < 1) return
+    if (!resizeMoved) {
+      resizeMoved = true
+      beginResizeSession()
+    }
+    if (resizeRafId !== 0) return
+    resizeRafId = requestAnimationFrame(() => {
+      resizeRafId = 0
+      if (!session || !activeDragWidths) return
+      const nextWidth = clampColumnWidth(
+        session.startWidth + latestResizeClientX - session.startX,
+        read(options.minColumnWidth),
+        read(options.maxColumnWidth),
+      )
+      if (nextWidth === session.currentWidth) return
+      session.currentWidth = nextWidth
+      activeDragWidths[session.key] = nextWidth
+      paintChangedColumnWidth(nextWidth)
+    })
+  }
+
+  function stopResize(): void {
+    if (session && resizeMoved) {
+      const finalWidth = clampColumnWidth(
+        session.startWidth + latestResizeClientX - session.startX,
+        read(options.minColumnWidth),
+        read(options.maxColumnWidth),
+      )
+      if (finalWidth !== session.startWidth) {
+        const merged = { ...session.domSnapshot, [session.key]: finalWidth }
+        options.resolvedColumnWidths.set(merged)
+        options.onColumnResize(session.key, finalWidth)
+      }
+    }
+    if (tableRef.value) {
+      tableRef.value.style.width = ''
+      tableRef.value.style.minWidth = ''
+      for (const th of tableRef.value.querySelectorAll<HTMLTableCellElement>('thead th[data-col-key]')) {
+        th.style.width = ''
+      }
+    }
+    isColumnResizing.value = false
+    resizePaintWidths.value = null
+    activeDragWidths = null
+    session = null
+    resizeMoved = false
+    if (resizeRafId !== 0) {
+      cancelAnimationFrame(resizeRafId)
+      resizeRafId = 0
+    }
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+    document.removeEventListener('mousemove', onResizeMove)
+    document.removeEventListener('mouseup', stopResize, { capture: true })
+  }
+
+  function onResizeStart(key: string, event: MouseEvent): void {
+    if (!read(options.resizable)) return
+
+    const thEl = (event.currentTarget as HTMLElement).closest('th') as HTMLTableCellElement | null
+    if (!thEl) return
+    const tableEl = thEl.closest('table') as HTMLTableElement | null
+    if (!tableEl) return
+
+    const dataThs = Array.from(
+      tableEl.querySelectorAll<HTMLTableCellElement>('thead th[data-col-key]'),
+    )
+    const domSnapshot: Record<string, number> = {}
+    for (const th of dataThs) {
+      domSnapshot[th.dataset.colKey!] = th.offsetWidth
+    }
+
+    const startWidth = domSnapshot[key] ?? thEl.offsetWidth
+    latestResizeClientX = event.clientX
+    resizeMoved = false
+    session = {
+      key,
+      startX: event.clientX,
+      startWidth,
+      currentWidth: startWidth,
+      domSnapshot,
+      baseTableWidth: 0,
+      colEls: new Map(),
+      thEls: new Map(),
+    }
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+    document.addEventListener('mousemove', onResizeMove)
+    document.addEventListener('mouseup', stopResize, { capture: true })
+  }
+
+  onUnmounted(() => {
+    stopResize()
+  })
+
+  return {
+    tableRef,
+    isColumnResizing,
+    resizePaintWidths,
+    onResizeStart,
+    stopResize,
+  }
+}
+
+export type RsTableColumnResizeApi = ReturnType<typeof useRsTableColumnResize>