@veltra/desktop 1.0.0

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

@@ -0,0 +1,255 @@
+import { Forest, dfs, last } from '@cat-kit/core'
+import { ArrowRight } from '@veltra/icons/normal'
+import { type BEM } from '@veltra/utils'
+import { computed, createVNode, shallowRef, watch, type ComputedRef, type ShallowRef } from 'vue'
+
+import type { TableColumn, TableProps } from '../../types'
+import { UButton } from '../button'
+import { UIcon } from '../icon'
+import { ColumnNode } from './node/col'
+
+/**
+ * 定义表格列
+ * @param columns 表格列
+ */
+export function defineTableColumns(
+  columns: TableColumn[],
+  commonProps?: Partial<Pick<TableColumn, 'align' | 'minWidth'>>
+): TableColumn[] {
+  columns.forEach((col) => {
+    dfs(col, (node) => {
+      for (const key in commonProps) {
+        if (node[key] !== undefined) continue
+        node[key] = commonProps[key]
+      }
+    })
+  })
+  return columns
+}
+
+export interface ColumnConfig {
+  /** 表头 */
+  headers: ComputedRef<ColumnNode[][]>
+
+  /**
+   *  body列, 在body中使用
+   */
+  columns: ShallowRef<ColumnNode[]>
+
+  /** 所有叶子列 */
+  leafColumns: ShallowRef<ColumnNode[]>
+
+  /** 第一列 */
+  expandColumn: ShallowRef<ColumnNode | undefined>
+}
+
+interface Options {
+  props: TableProps
+  cls: BEM<'table'>
+  /** 创建复选框 */
+  createCheckColumn: () => TableColumn
+  createSelectColumn: () => TableColumn
+  toggleAllTreeRowExpand: () => void
+}
+
+export function useColumns(options: Options): ColumnConfig {
+  const { props, createCheckColumn, createSelectColumn, toggleAllTreeRowExpand, cls } = options
+
+  /** 前置列 */
+  const preColumns = computed<TableColumn[]>(() => {
+    const { selectable, checkable, showIndex } = props
+
+    const columns: TableColumn[] = []
+
+    if (selectable) {
+      columns.push(createSelectColumn())
+    } else if (checkable) {
+      columns.push(createCheckColumn())
+    }
+    if (showIndex) {
+      columns.push({
+        key: '__index__',
+        name: '#',
+        resizable: false,
+        width: 60,
+        minWidth: 60,
+        align: 'center',
+        fixed: 'left',
+        render({ row }) {
+          return row.index + 1
+        }
+      })
+    }
+
+    return columns
+  })
+
+  const columnForest = shallowRef<Forest<TableColumn, any>>()
+
+  const renderExpandAll = () =>
+    createVNode(
+      UButton,
+      {
+        text: true,
+        title: '展开或收起全部',
+        class: cls.e('expand-all'),
+        type: 'primary',
+        size: 'small',
+        circle: true,
+        onClick: (e) => {
+          e.stopPropagation()
+          toggleAllTreeRowExpand()
+        }
+      },
+      () => [createVNode(UIcon, undefined, () => [createVNode(ArrowRight)])]
+    )
+
+  watch(
+    [preColumns, () => props.columns, () => props.tree, () => props.expandable],
+    ([preColumns, columns, tree, expandable]) => {
+      /** 固定到左侧的列 */
+      const fixedOnLeft: TableColumn[] = [...preColumns]
+      /** 未固定的列 */
+      const unfixed: TableColumn[] = []
+      /** 固定到右侧的列 */
+      const fixedOnRight: TableColumn[] = []
+
+      columns?.forEach((column) => {
+        if (!column.fixed || column.children) {
+          column.fixed = undefined
+          return unfixed.push(column)
+        }
+        if (column.fixed === 'left') {
+          fixedOnLeft.push(column)
+        } else {
+          fixedOnRight.push(column)
+        }
+      })
+
+      if (last(fixedOnLeft)) {
+        last(fixedOnLeft)!.isLastFixed = true
+      }
+      if (fixedOnRight[0]) {
+        fixedOnRight[0].isFirstFixed = true
+      }
+
+      const sortedColumns = [...fixedOnLeft, ...unfixed, ...fixedOnRight]
+      // 操作时避免改变原数据
+      const firstColumn = { ...sortedColumns[0] } as TableColumn
+      sortedColumns[0] = firstColumn
+
+      // 树形表格需要给第一列添加展开按钮
+      // 因此要重新设置第一列的宽度和对齐方式
+      if ((!!tree || expandable) && firstColumn) {
+        firstColumn.align = 'left'
+        firstColumn.width = firstColumn.width ? firstColumn.width + 60 : undefined
+
+        const oldNameRender = firstColumn.nameRender
+
+        firstColumn.nameRender = oldNameRender
+          ? (ctx) => {
+              const oldNodes = oldNameRender!(ctx)
+              return [renderExpandAll(), ...(Array.isArray(oldNodes) ? oldNodes : [oldNodes])]
+            }
+          : () => {
+              return [renderExpandAll(), firstColumn.name]
+            }
+      }
+
+      const result = new Forest<TableColumn, any>({
+        data: sortedColumns,
+        createNode(data, index, depth, _f, parent) {
+          return new ColumnNode(data, index, depth, parent)
+        }
+      })
+
+      columnForest.value = result
+    },
+    { immediate: true }
+  )
+
+  const headers = computed(() => {
+    const headers: ColumnNode[][] = []
+    const forest = columnForest.value
+    if (!forest) return headers
+
+    // Forest.bfs 对每个根单独 BFS，按 depth 拼行会把后续根节点错放到深层，且根节点无 parent，
+    // 回溯 leafs 时会读到 undefined。这里从所有根一次性层序遍历，与多列表头布局一致。
+    const queue: ColumnNode[] = [...forest.roots]
+    while (queue.length > 0) {
+      const size = queue.length
+      const layer: ColumnNode[] = []
+      for (let i = 0; i < size; i++) {
+        const node = queue.shift()!
+        layer.push(node)
+        const ch = node.children
+        if (ch?.length) {
+          for (const c of ch) {
+            queue.push(c)
+          }
+        }
+      }
+      headers.push(layer)
+    }
+
+    // 从叶子节点开始回溯计算每个节点的累计叶子节点数量，叶子节点数量代表表头的宽度
+    for (let i = headers.length - 1; i > 0; i--) {
+      const header = headers[i]!
+
+      header.forEach((node) => {
+        const parent = node.parent
+        if (!parent) return
+        if (parent.leafs !== undefined) return
+        parent.leafs = parent.children!.reduce((sum, node) => {
+          return sum + (node.leafs ?? 1)
+        }, 0)
+      })
+    }
+
+    return headers
+  })
+
+  /** 除展开按钮之外的列 */
+  const columns = shallowRef<ColumnNode[]>([])
+
+  /** 所有叶子节点 */
+  const leafColumns = shallowRef<ColumnNode[]>([])
+
+  const expandColumn = shallowRef<ColumnNode>()
+
+  // 监听列的变化
+  watch(
+    [columnForest, () => props.tree, () => props.expandable],
+    ([forest, tree, expandable]) => {
+      const _columns: ColumnNode[] = []
+
+      forest?.dfs((node) => {
+        if (node.isLeaf) {
+          _columns.push(node)
+        }
+      })
+
+      leafColumns.value = _columns
+
+      if (tree || expandable) {
+        expandColumn.value = _columns[0]
+        columns.value = _columns.slice(1)
+      } else {
+        columns.value = _columns
+        expandColumn.value = undefined
+      }
+    },
+    { immediate: true }
+  )
+
+  return {
+    /** 第一列 */
+    expandColumn,
+    /** 所有列 */
+    leafColumns,
+    /** 列 */
+    columns,
+    /** 表格头的分层展示 */
+    headers
+  }
+}

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

@@ -0,0 +1,36 @@
+import { debounce } from '@cat-kit/core'
+import { type ShallowRef, ref } from 'vue'
+
+import type { ScrollPosition } from '../../types'
+
+interface UseColumnFixedReturned {
+  leftFixed: ShallowRef<boolean>
+  rightFixed: ShallowRef<boolean>
+  handleScroll: (e: Required<ScrollPosition>) => void
+}
+
+/**
+ * 固定列
+ * @returns
+ */
+export function useFixedColumns(): UseColumnFixedReturned {
+  const leftFixed = ref(false)
+  const rightFixed = ref(false)
+
+  const handleScroll = debounce((e: Required<ScrollPosition>) => {
+    if (e.x > 0) {
+      leftFixed.value = true
+    } else {
+      leftFixed.value = false
+    }
+
+    // 精度修正
+    if (e.cw + e.x + 1 >= e.sw) {
+      rightFixed.value = false
+    } else {
+      rightFixed.value = true
+    }
+  }, 50)
+
+  return { leftFixed, rightFixed, handleScroll }
+}

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

@@ -0,0 +1,242 @@
+import { Forest, o } from '@cat-kit/core'
+import { useModel } from '@veltra/compositions'
+import { shallowRef, watch, type ShallowRef } from 'vue'
+
+import type { TableColumn, TableEmits, TableProps, TableRow } from '../../types'
+import { TableRowNode } from './node/row'
+
+interface Options {
+  props: TableProps
+  emit: TableEmits
+}
+
+interface UseRowsReturned {
+  /** 所有的行森林（树形数据） */
+  rowForest: ShallowRef<Forest<Record<string, unknown>, any> | undefined>
+  /** 当前可见的展平行列表 */
+  rows: ShallowRef<TableRowNode[]>
+  /** 切换树形行节点的展开/折叠 */
+  toggleTreeRowExpand: (node: TableRow) => void
+  /** 是否全部展开 */
+  allExpanded: ShallowRef<boolean>
+  /** 切换全部展开/折叠 */
+  toggleAllTreeRowExpand: () => void
+  /** 行点击处理 */
+  handleRowClick: (row: TableRow, e: MouseEvent) => void
+  /** 单元格点击处理 */
+  handleCellClick: (row: TableRow, column: TableColumn, e: MouseEvent) => void
+  /** 根据原始数据对象获取对应的 TableRow */
+  getRowByData: (data: Record<string, any>) => TableRow | undefined
+}
+
+export function useRows(options: Options): UseRowsReturned {
+  const { props, emit } = options
+
+  // --- 状态定义 ---
+
+  /** 所有可见的行 */
+  const rows = shallowRef<TableRowNode[]>([])
+  /** 数据行， 不包括展开和折叠的行 */
+  const dataRows = shallowRef<TableRowNode[]>([])
+  /** 行森林（数据结构树） */
+  const rowForest = shallowRef<Forest<Record<string, unknown>, any>>()
+  /** 树形节点是否全部展开 */
+  const allExpanded = shallowRef(props.defaultExpandAll ?? false)
+
+  /** 当前高亮的行 */
+  const currentRow = useModel({
+    props,
+    emit,
+    propName: 'current',
+    shallow: true,
+    local: () => !!props.highlightCurrent
+  })
+
+  // --- 行字典维护 (性能优化) ---
+
+  /**
+   * 用于优化增删改时的性能。
+   * 原理：Vue 的组件在属性发生改变时会重新渲染，通过 WeakMap 缓存 data -> TableRow 的映射，
+   * 可以在数据更新时复用已有的 TableRowNode 实例，避免重复创建和 DOM 抖动。
+   */
+  let rowDicts = new WeakMap<Record<string, any>, TableRowNode>()
+  let tempRowDicts: null | WeakMap<Record<string, any>, TableRowNode> = null
+  let uidSeed = 0
+
+  /** 获取行唯一标识 */
+  const getRowUID = props.rowKey
+    ? (rowData: Record<string, any>) => rowData && o(rowData).get(props.rowKey!)
+    : () => uidSeed++
+
+  /** 创建或复用 TableRow 实例 */
+  const createRow = (
+    data: Record<string, any>,
+    index: number,
+    depth = 0,
+    parent?: TableRowNode
+  ) => {
+    const existRow = data ? rowDicts.get(data) : undefined
+    if (existRow) {
+      existRow.index = index
+      existRow.depth = depth
+      existRow.parent = parent
+      return existRow
+    }
+    return new TableRowNode({ data, index, depth, parent, uid: getRowUID(data) })
+  }
+
+  // --- 行处理逻辑 ---
+
+  /** 处理常规扁平列表 */
+  function getDataRows(data: Record<string, any>[]): TableRowNode[] {
+    let i = data.length
+    const result = Array.from({ length: i }) as TableRowNode[]
+    tempRowDicts = new WeakMap()
+
+    while (i--) {
+      const dataItem = data[i]!
+      const row = createRow(dataItem, i)
+      result[i] = row
+      tempRowDicts.set(dataItem, row)
+    }
+
+    rowDicts = tempRowDicts
+    tempRowDicts = null
+    return result
+  }
+
+  function expandDataRows(): void {
+    const result: TableRowNode[] = []
+    let i = -1
+    while (++i < dataRows.value.length) {
+      const row = dataRows.value[i]!
+      result.push(row)
+      if (row.expanded) {
+        result.push(row.copy())
+      }
+    }
+    rows.value = result
+  }
+
+  /** 处理树形森林结构 */
+  function getRowForest(data: Record<string, any>[]): Forest<Record<string, unknown>, any> {
+    tempRowDicts = new WeakMap()
+    const childrenKey = typeof props.tree === 'string' ? props.tree : 'children'
+    const ret = new Forest<Record<string, unknown>, any>({
+      data,
+      childrenKey,
+      createNode(val, index, depth, _forest, parent) {
+        const row = createRow(val, index, depth, parent)
+        if (props.defaultExpandAll) {
+          row.expanded = true
+        }
+        val && tempRowDicts!.set(val, row)
+        return row
+      }
+    })
+
+    rowDicts = tempRowDicts
+    tempRowDicts = null
+    return ret
+  }
+
+  /** 展平树形结构为可见行列表 */
+  function updateFlattedRows(): void {
+    if (!rowForest.value) return
+    rows.value = rowForest.value.flattenVisible((n) => n.expanded)
+  }
+
+  // --- 副作用监听 ---
+
+  // 监听当前行切换，维护 isCurrent 状态
+  watch(
+    () => currentRow.value,
+    (row, oldRow) => {
+      if (oldRow) oldRow.isCurrent = false
+      if (row) row.isCurrent = true
+    }
+  )
+
+  // 同步状态给外部
+  watch(rows, (rows) => emit('update:rows', rows))
+  watch(rowForest, (forest) => emit('update:forest', forest))
+
+  // 核心：监听原始数据变化，重新构建行列表或树
+  watch(
+    [() => props.data, () => props.tree, () => props.defaultExpandAll],
+    ([data, tree]) => {
+      if (!data?.length) {
+        rows.value = []
+        rowDicts = new WeakMap()
+        rowForest.value = undefined
+        return
+      }
+
+      if (!tree) {
+        rowForest.value = undefined
+        dataRows.value = getDataRows(data)
+        rows.value = dataRows.value
+      } else {
+        dataRows.value = []
+        rowForest.value = getRowForest(data)
+        updateFlattedRows()
+      }
+    },
+    { immediate: true }
+  )
+
+  // --- 交互方法 ---
+
+  function toggleTreeRowExpand(node: TableRow): void {
+    node.expanded = !node.expanded
+
+    if (props.tree) {
+      return updateFlattedRows()
+    }
+    if (props.expandable) {
+      expandDataRows()
+    }
+  }
+
+  function toggleAllTreeRowExpand(): void {
+    allExpanded.value = !allExpanded.value
+    if (props.tree) {
+      rowForest.value?.dfs((node) => {
+        node.expanded = allExpanded.value
+      })
+      updateFlattedRows()
+      return
+    }
+    if (props.expandable) {
+      dataRows.value.forEach((row) => {
+        row.expanded = allExpanded.value
+      })
+      expandDataRows()
+      return
+    }
+  }
+
+  function handleRowClick(row: TableRow, e: MouseEvent): void {
+    currentRow.value = currentRow.value === row ? undefined : row
+    emit('row-click', row, e)
+  }
+
+  function handleCellClick(row: TableRow, column: TableColumn, e: MouseEvent): void {
+    emit('cell-click', row, column, e)
+  }
+
+  function getRowByData(data: Record<string, any>): TableRow | undefined {
+    return rowDicts.get(data)
+  }
+
+  return {
+    rowForest,
+    rows,
+    allExpanded,
+    toggleTreeRowExpand,
+    toggleAllTreeRowExpand,
+    handleRowClick,
+    handleCellClick,
+    getRowByData
+  }
+}

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

@@ -0,0 +1,154 @@
+import { o } from '@cat-kit/core'
+import { bem, type BEM } from '@veltra/utils'
+import { useSlots, type Ref } from 'vue'
+
+import type {
+  TableColumnRenderContext,
+  TableColumnSlotsScope,
+  TableProps,
+  TableRow,
+  RenderReturn,
+  TableRowSlotsScope
+} from '../../types'
+import type { ColumnNode } from './node/col'
+
+interface Options {
+  props: TableProps
+  cls: BEM<'table'>
+  leftFixed: Ref<boolean>
+  rightFixed: Ref<boolean>
+}
+
+interface UseTableReturn {
+  getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn
+  getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn
+  getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn
+  getCellClass: (column: ColumnNode) => string
+  getHeaderCellClass: (column: ColumnNode) => string
+  getCellCtx: (
+    row: TableRow,
+    column: ColumnNode
+  ) => TableColumnSlotsScope | TableColumnRenderContext
+}
+
+export function useTable(options: Options): UseTableReturn {
+  const { props, cls, leftFixed, rightFixed } = options
+
+  const slots = useSlots()
+
+  const getColumnSlotsNode = (
+    ctx: TableColumnSlotsScope | TableColumnRenderContext
+  ): RenderReturn => {
+    const column = ctx.column.data
+
+    const { render, key } = column
+
+    if (render) return render(ctx)
+
+    const slotsRender = props.slots?.[`column:${key}`] ?? slots[`column:${key}`]
+
+    if (slotsRender) return slotsRender(ctx)
+
+    return ctx.val
+  }
+
+  const getHeaderSlotsNode = (ctx: { column: ColumnNode }): RenderReturn => {
+    const column = ctx.column.data
+    const { nameRender, key } = column
+
+    if (nameRender) return nameRender(ctx)
+
+    const slotsRender = props.slots?.[`header:${key}`] ?? slots[`header:${key}`]
+
+    if (slotsRender) return slotsRender(ctx)
+
+    return column.name
+  }
+
+  const getExpandRowSlotsNode = (ctx: TableRowSlotsScope): RenderReturn => {
+    const slotsRender = props.slots?.['row:expand'] ?? slots['row:expand']
+
+    if (slotsRender) return slotsRender(ctx)
+    return null
+  }
+
+  const cellCls = cls.e('cell')
+
+  const getCommonClassName = (column: ColumnNode): string => {
+    const classList: string[] = [cellCls]
+
+    leftFixed.value && column.isLastFixed && classList.push(bem.is('last-fixed'))
+
+    rightFixed.value && column.isFirstFixed && classList.push(bem.is('first-fixed'))
+
+    if (column.fixed) {
+      classList.push(bem.is('fixed-' + column.fixed))
+    }
+    return classList.join(' ')
+  }
+
+  const getCellClass = (column: ColumnNode): string => {
+    return getCommonClassName(column) + ` ${bem.is(column.align)}`
+  }
+
+  const getHeaderCellClass = (column: ColumnNode): string => {
+    return getCommonClassName(column) + ` ${bem.is(column.headerAlign)}`
+  }
+
+  const getCellCtx = (
+    row: TableRow,
+    column: ColumnNode
+  ): TableColumnSlotsScope | TableColumnRenderContext => {
+    const rowData = row.data
+    const val = column.key ? o(rowData).get(column.key) : undefined
+
+    const ctx = {
+      row,
+      column,
+      rowData,
+      val,
+      model: {
+        modelValue: val,
+        'onUpdate:modelValue': (val: any) => {
+          rowData[column.key] = val
+        }
+      }
+    }
+
+    return ctx
+  }
+
+  return {
+    /**
+     * 获取列插槽VNode
+     * @param ctx 列渲染上下文
+     */
+    getColumnSlotsNode,
+    /**
+     * 获取表头插槽VNode
+     * @param ctx 表头渲染上下文
+     */
+    getHeaderSlotsNode,
+    /**
+     * 获取展开行插槽VNode
+     * @param ctx 展开行渲染上下文
+     */
+    getExpandRowSlotsNode,
+    /**
+     * 获取单元格类名
+     * @param column 列
+     */
+    getCellClass,
+    /**
+     * 获取表头单元格类名
+     * @param column 列
+     */
+    getHeaderCellClass,
+    /**
+     * 获取单元格上下文
+     * @param row 行
+     * @param column 列
+     */
+    getCellCtx
+  }
+}

package/src/components/table-editor/index.ts

@@ -0,0 +1 @@
+export { default as UTableEditor } from './table-editor.vue'

package/src/components/table-editor/style.scss

@@ -0,0 +1,22 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: table-editor;
+
+@include m.b($root-name) {
+  @include m.bem(table, body) {
+    @include m.bem(table, cell) {
+      padding: 2px;
+
+      [class^='u-input'] {
+        box-shadow: none;
+      }
+
+      & > [class^='u-'] {
+        box-shadow: none;
+      }
+    }
+  }
+}

package/src/components/table-editor/style.ts

@@ -0,0 +1,3 @@
+import '../table/style'
+import '../button/style'
+import './style.scss'