foucui 1.0.1

package/components/QiuTable/types.ts

@@ -0,0 +1,413 @@
+/** QiuTable 列配置（props.columns） */
+export interface QiuTableColumnConfig {
+  /** 列标题（同 title，优先 label） */
+  label?: string
+  /** vxe 别名，与 label 等价 */
+  title?: string
+  prop?: string
+  field?: string
+  /** 固定列宽；与 minWidth 同时存在时以 width 为准 */
+  width?: string | number
+  /** 最小列宽；未设 width 时作为弹性列下限，并可参与剩余宽度分配 */
+  minWidth?: string | number
+  /** 最大列宽；拖拽与自适应时的上限 */
+  maxWidth?: string | number
+  fixed?: boolean | 'left' | 'right'
+  sortable?: boolean | string
+  /** 开启筛选；未传 filters 时按当前列数据自动生成选项 */
+  filterable?: boolean
+  align?: 'left' | 'center' | 'right'
+  footerAlign?: 'left' | 'center' | 'right'
+  /**
+   * 编辑器类型（与 type 二选一，优先 editor）
+   * switch | select | input | number | date | datetime | text
+   */
+  editor?: 'switch' | 'select' | 'input' | 'number' | 'date' | 'datetime' | 'time' | 'text'
+  /**
+   * 完整编辑渲染对象（优先于 editor / type）
+   * 对齐 vxe editRender：{ name, props, options, events, attrs, enabled }
+   */
+  editRender?: string | QiuTableEditRender
+  /**
+   * selection/index/seq，或编辑器类型别名
+   */
+  type?: string
+  editorProps?: Record<string, any>
+  options?: { label: string; value: any }[]
+  slot?: string
+  formatter?: (row: any, column: QiuTableColumnConfig, cellValue: any) => string
+  editable?: boolean
+  filters?: { text: string; value: any }[]
+  filterMethod?: (value: any, row: any, column: QiuTableColumnConfig) => boolean
+  treeNode?: boolean
+  dragSort?: boolean
+  showOverflowTooltip?: boolean
+  className?: string
+  headerClassName?: string
+  footerClassName?: string
+  headerAlign?: 'left' | 'center' | 'right'
+  /** 多级表头子列（父子列自动合并表头单元格） */
+  children?: QiuTableColumnConfig[]
+  /** 表尾格式化 */
+  footerFormatter?: (params: {
+    column: QiuTableColumnConfig
+    items: any[]
+    data: any[]
+    rowIndex: number
+  }) => string
+  /** 快捷聚合：sum | avg | count（配合 showFooter） */
+  aggFunc?: 'sum' | 'avg' | 'count'
+  resizable?: boolean
+  /** 全局 formats 名称，或列内 formatter 优先 */
+  format?: string
+  /** 全局 renderer 名称 */
+  cellRender?: string | { name: string; props?: Record<string, any> }
+  /** 自定义列面板中是否默认可见 */
+  visible?: boolean
+  /** 透传业务参数 */
+  params?: Record<string, any>
+}
+
+/** 列 editRender 完整对象 */
+export interface QiuTableEditRender {
+  /** 内置：input/select/number/date/datetime/time/switch/text；或 QiuTableEditRenderer 注册名 */
+  name: string
+  props?: Record<string, any>
+  options?: { label: string; value: any }[]
+  attrs?: Record<string, any>
+  events?: Record<string, (...args: any[]) => void>
+  /** false 时禁用编辑 */
+  enabled?: boolean
+  autofocus?: string | boolean
+}
+
+/** @deprecated 使用 QiuTableColumnConfig */
+export type QiuTableColumn = QiuTableColumnConfig
+
+export interface QiuTableRegisteredColumn {
+  id: symbol
+  props: Record<string, any>
+  slots: {
+    default?: (scope: QiuTableCellScope) => any
+    header?: (scope: QiuTableHeaderScope) => any
+  }
+}
+
+export interface QiuTableCellScope {
+  row: any
+  column: QiuTableColumnConfig
+  $index: number
+  cellValue: any
+  level?: number
+}
+
+export interface QiuTableHeaderScope {
+  column: QiuTableColumnConfig
+}
+
+export interface QiuTableFlatRow {
+  row: any
+  level: number
+  hasChildren: boolean
+  expanded: boolean
+  flatIndex: number
+}
+
+export interface QiuTableRegisterContext {
+  register: (col: QiuTableRegisteredColumn) => void
+  unregister: (id: symbol) => void
+  update: (col: QiuTableRegisteredColumn) => void
+}
+
+export interface QiuTableEditConfig {
+  trigger?: 'click' | 'dblclick' | 'manual' | 'always'
+  mode?: 'cell' | 'row'
+  showIcon?: boolean
+  /** 点击表格外自动清除编辑态，默认 true */
+  autoClear?: boolean
+}
+
+export interface QiuTableSortConfig {
+  /** true：不本地排序，仅抛 sort-change */
+  remote?: boolean
+  multiple?: boolean
+  chronological?: boolean
+  defaultSort?:
+    | { field?: string; prop?: string; order?: 'asc' | 'desc' | null }
+    | { field?: string; prop?: string; order?: 'asc' | 'desc' | null }[]
+  trigger?: 'default' | 'cell'
+}
+
+export interface QiuTableRadioConfig {
+  highlight?: boolean
+  checkRowKey?: string | number
+  strict?: boolean
+  trigger?: 'default' | 'row' | 'cell'
+}
+
+export interface QiuTableExpandConfig {
+  expandAll?: boolean
+  accordion?: boolean
+  lazy?: boolean
+  labelField?: string
+}
+
+export interface QiuTableColumnDragConfig {
+  enabled?: boolean
+  showIcon?: boolean
+}
+
+export interface QiuTableKeepSourceConfig {
+  enabled?: boolean
+}
+
+export interface QiuTableFilterConfig {
+  /** true：不本地过滤，仅抛 filter-change */
+  remote?: boolean
+}
+
+export interface QiuTableRowConfig {
+  /** 点击高亮当前行，默认 true */
+  isCurrent?: boolean
+  /** 鼠标悬停高亮，默认 true */
+  isHover?: boolean
+  /** vxe 别名 → isHover */
+  highlightHoverRow?: boolean
+  /** vxe 别名 → isCurrent */
+  highlightCurrentRow?: boolean
+  height?: number
+  keyField?: string
+}
+
+/** 键盘行为（对齐 vxe keyboardConfig） */
+export interface QiuTableKeyboardConfig {
+  /** ↑↓ 移动当前行 / 活动单元格，默认 true */
+  isArrow?: boolean
+  /** Enter 进入编辑，默认 true（需 editable） */
+  isEnter?: boolean
+  /** Esc 退出编辑，默认 true */
+  isEsc?: boolean
+  /** Tab 横向移动单元格，默认 false */
+  isTab?: boolean
+  /** Ctrl+Z / Ctrl+Y 撤销重做，默认 true（需 historyConfig 开启） */
+  isUndo?: boolean
+  /** 编辑时方向键是否仍导航，默认 false */
+  isEdit?: boolean
+}
+
+/** 剪贴板（对齐 vxe clipboardConfig） */
+export interface QiuTableClipboardConfig {
+  /** Ctrl+C 复制选区，默认 true */
+  isCopy?: boolean
+  /** Ctrl+X 剪切，默认 true */
+  isCut?: boolean
+  /** Ctrl+V 粘贴，默认 true */
+  isPaste?: boolean
+}
+
+/** 溢出提示（对齐 vxe tooltipConfig） */
+export interface QiuTableTooltipConfig {
+  /** 全局开启溢出 tooltip，默认 true */
+  showAll?: boolean
+  /** 主题：light | dark */
+  theme?: 'light' | 'dark'
+  /** 进入延迟 ms */
+  enterDelay?: number
+  /** 离开延迟 ms */
+  leaveDelay?: number
+  /** 自定义内容；返回 null 则不显示 */
+  contentMethod?: (params: {
+    row: any
+    column: QiuTableColumnConfig
+    cellValue: any
+  }) => string | null | undefined
+}
+
+/** 导出配置对象（对齐 vxe exportConfig） */
+export interface QiuTableExportConfig {
+  filename?: string
+  /** 默认格式 */
+  type?: 'csv' | 'xls' | 'xlsx'
+  sheetName?: string
+  /** 导出模式：当前页 / 全部 / 选中 / 指定页码范围 */
+  mode?: 'current' | 'all' | 'selected' | 'range'
+  modes?: Array<'current' | 'all' | 'selected' | 'range'>
+  /** 范围导出起始页（从 1 开始，mode=range 时有效） */
+  startPage?: number
+  /** 范围导出结束页（从 1 开始，mode=range 时有效） */
+  endPage?: number
+  /** 打开导出前 */
+  beforeExportMethod?: (params: { options: QiuTableExportConfig }) => void | boolean | Promise<void | boolean>
+  /** 导出后 */
+  afterExportMethod?: (params: { options: QiuTableExportConfig }) => void
+  /** 列过滤 */
+  columnFilterMethod?: (params: { column: QiuTableColumnConfig }) => boolean
+}
+
+/** 自定义工具栏工具 */
+export interface QiuTableToolbarTool {
+  /** 唯一名称 */
+  name: string
+  /** 渲染组件；传入组件对象 */
+  component?: any
+  /** 透传给组件的 props */
+  props?: Record<string, any>
+  /** 位置：left | center | right，默认 right */
+  position?: 'left' | 'center' | 'right'
+  /** 排序权重 */
+  order?: number
+}
+
+/** 工具栏配置对象（对齐 vxe toolbarConfig） */
+export interface QiuTableToolbarConfig {
+  enabled?: boolean
+  /** 刷新按钮，默认 true */
+  refresh?: boolean
+  /** 导出按钮，默认 true */
+  export?: boolean
+  /** 导入按钮，默认 false */
+  import?: boolean
+  /** 打印按钮，默认 false */
+  print?: boolean
+  /** 列自定义按钮，默认 true */
+  custom?: boolean
+  /** 全屏按钮，默认 true */
+  zoom?: boolean
+  /** Excel 复制按钮，默认 false */
+  copy?: boolean
+  /** 内置工具按钮的位置，默认 right */
+  toolsPlacement?: 'left' | 'center' | 'right'
+  /** 自定义工具插件 */
+  customTools?: QiuTableToolbarTool[]
+}
+
+/** 编辑历史（undo/redo） */
+export interface QiuTableHistoryConfig {
+  /** 默认 false；设 true 或配合 keyboardConfig.isUndo */
+  enabled?: boolean
+  /** 栈深度，默认 50 */
+  size?: number
+}
+
+/** 解析行 hover 是否开启 */
+export function resolveRowHover(cfg?: QiuTableRowConfig): boolean {
+  if (!cfg) return true
+  if (cfg.isHover !== undefined) return cfg.isHover !== false
+  if (cfg.highlightHoverRow !== undefined) return !!cfg.highlightHoverRow
+  return true
+}
+
+/** 解析当前行高亮是否开启 */
+export function resolveRowCurrent(cfg?: QiuTableRowConfig): boolean {
+  if (!cfg) return true
+  if (cfg.isCurrent !== undefined) return cfg.isCurrent !== false
+  if (cfg.highlightCurrentRow !== undefined) return !!cfg.highlightCurrentRow
+  return true
+}
+
+/** 解析列 editRender 对象 */
+export function resolveEditRender(
+  col: Pick<QiuTableColumnConfig, 'editRender' | 'editor' | 'type' | 'editorProps' | 'options'>
+): QiuTableEditRender | undefined {
+  if (col.editRender) {
+    if (typeof col.editRender === 'string') {
+      return { name: col.editRender, props: col.editorProps, options: col.options }
+    }
+    return {
+      ...col.editRender,
+      props: { ...(col.editorProps || {}), ...(col.editRender.props || {}) },
+      options: col.editRender.options || col.options,
+    }
+  }
+  const name = col.editor || (col.type && QIU_EDITOR_TYPES.has(col.type) ? col.type : undefined)
+  if (!name) return undefined
+  return { name, props: col.editorProps, options: col.options }
+}
+
+export interface QiuTableColumnConfigExtra {
+  resizable?: boolean
+  /** 未指定列宽时的默认最小宽 */
+  minWidth?: number
+  /** 默认最大宽 */
+  maxWidth?: number
+  /** 默认固定宽 */
+  width?: number
+}
+
+export interface QiuTableMergeCell {
+  row: number
+  col: number
+  rowspan: number
+  colspan: number
+}
+
+export type QiuTableSpanMethod = (params: {
+  row: any
+  column: QiuTableColumnConfig
+  rowIndex: number
+  columnIndex: number
+  data: any[]
+}) =>
+  | { rowspan: number; colspan: number }
+  | [number, number]
+  | number[]
+  | null
+  | undefined
+
+export interface QiuTablePagerConfig {
+  enabled?: boolean
+  currentPage?: number
+  pageSize?: number
+  pageSizes?: number[]
+  total?: number
+  layouts?: string[]
+  background?: boolean
+  small?: boolean
+}
+
+export interface QiuTableFooterMethodParams {
+  columns: QiuTableColumnConfig[]
+  data: any[]
+}
+
+export type QiuTableFooterMethod = (params: QiuTableFooterMethodParams) => string[][]
+
+export interface QiuTableHeaderCell {
+  column: QiuTableColumnConfig & { _key: string }
+  label: string
+  colspan: number
+  rowspan: number
+  isLeaf: boolean
+  colIndex: number
+}
+
+export const QIU_TABLE_REGISTER_KEY = Symbol('qiuTableRegister')
+
+export const QIU_EDITOR_TYPES = new Set([
+  'switch',
+  'select',
+  'input',
+  'number',
+  'date',
+  'datetime',
+  'time',
+  'text',
+])
+
+export const QIU_SPECIAL_COL_TYPES = new Set(['selection', 'checkbox', 'index', 'seq', 'radio', 'expand'])
+
+export function resolveColumnEditor(
+  col: Pick<QiuTableColumnConfig, 'editor' | 'type' | 'editRender'>
+): QiuTableColumnConfig['editor'] | string | undefined {
+  const er = resolveEditRender(col)
+  if (er?.enabled === false) return undefined
+  if (er?.name) {
+    if (QIU_EDITOR_TYPES.has(er.name)) return er.name as QiuTableColumnConfig['editor']
+    return er.name
+  }
+  return undefined
+}
+
+export function resolveColumnProp(col: QiuTableColumnConfig): string | undefined {
+  return col.prop || col.field
+}

package/components/QiuTable/useArea.ts

@@ -0,0 +1,202 @@
+import { computed, ref, type Ref } from 'vue'
+import type { QiuTableColumnConfig } from './types'
+import { resolveColumnProp } from './types'
+
+export type QiuTableCellPos = {
+  rowId: string
+  /** 叶子列 prop / field */
+  prop: string
+  rowIndex: number
+  colIndex: number
+}
+
+/**
+ * 键盘/剪贴板活动单元格与矩形选区
+ */
+export function useTableArea(opts: {
+  getRows: () => any[]
+  getColumns: () => (QiuTableColumnConfig & { _key: string })[]
+  getRowId: (row: any) => string
+}) {
+  const activeCell = ref<QiuTableCellPos | null>(null)
+  /** 选区对角（与 activeCell 组成矩形） */
+  const areaEnd = ref<QiuTableCellPos | null>(null)
+
+  const leafProps = () =>
+    opts
+      .getColumns()
+      .map((c) => resolveColumnProp(c))
+      .filter(Boolean) as string[]
+
+  const findPos = (rowId: string, prop: string): QiuTableCellPos | null => {
+    const rows = opts.getRows()
+    const props = leafProps()
+    const rowIndex = rows.findIndex((r) => opts.getRowId(r) === rowId)
+    const colIndex = props.indexOf(prop)
+    if (rowIndex < 0 || colIndex < 0) return null
+    return { rowId, prop, rowIndex, colIndex }
+  }
+
+  const setActive = (row: any, col: QiuTableColumnConfig, extend = false) => {
+    const prop = resolveColumnProp(col)
+    if (!prop) return
+    const pos = findPos(opts.getRowId(row), prop)
+    if (!pos) return
+    if (extend && activeCell.value) {
+      areaEnd.value = pos
+    } else {
+      activeCell.value = pos
+      areaEnd.value = null
+    }
+  }
+
+  const clearArea = () => {
+    activeCell.value = null
+    areaEnd.value = null
+  }
+
+  const areaBounds = computed(() => {
+    const a = activeCell.value
+    if (!a) return null
+    const b = areaEnd.value || a
+    return {
+      r0: Math.min(a.rowIndex, b.rowIndex),
+      r1: Math.max(a.rowIndex, b.rowIndex),
+      c0: Math.min(a.colIndex, b.colIndex),
+      c1: Math.max(a.colIndex, b.colIndex),
+    }
+  })
+
+  const isCellInArea = (row: any, col: QiuTableColumnConfig) => {
+    const bounds = areaBounds.value
+    if (!bounds) {
+      const a = activeCell.value
+      if (!a) return false
+      return opts.getRowId(row) === a.rowId && resolveColumnProp(col) === a.prop
+    }
+    const rows = opts.getRows()
+    const props = leafProps()
+    const ri = rows.findIndex((r) => opts.getRowId(r) === opts.getRowId(row))
+    const ci = props.indexOf(resolveColumnProp(col) || '')
+    if (ri < 0 || ci < 0) return false
+    return ri >= bounds.r0 && ri <= bounds.r1 && ci >= bounds.c0 && ci <= bounds.c1
+  }
+
+  const isActiveCell = (row: any, col: QiuTableColumnConfig) => {
+    const a = activeCell.value
+    if (!a) return false
+    return opts.getRowId(row) === a.rowId && resolveColumnProp(col) === a.prop
+  }
+
+  const moveActive = (dRow: number, dCol: number, extend = false) => {
+    const rows = opts.getRows()
+    const propsList = leafProps()
+    if (!rows.length || !propsList.length) return null
+    const base = (extend ? areaEnd.value : null) || activeCell.value
+    let ri = base?.rowIndex ?? 0
+    let ci = base?.colIndex ?? 0
+    if (base) {
+      ri = Math.max(0, Math.min(rows.length - 1, ri + dRow))
+      ci = Math.max(0, Math.min(propsList.length - 1, ci + dCol))
+    } else {
+      // 无活动格：落在起点（下/右从 0，上/左从末尾）
+      ri = dRow < 0 ? rows.length - 1 : 0
+      ci = dCol < 0 ? propsList.length - 1 : 0
+    }
+    const row = rows[ri]
+    const prop = propsList[ci]
+    const pos: QiuTableCellPos = {
+      rowId: opts.getRowId(row),
+      prop,
+      rowIndex: ri,
+      colIndex: ci,
+    }
+    if (extend && activeCell.value) {
+      areaEnd.value = pos
+    } else {
+      activeCell.value = pos
+      areaEnd.value = null
+    }
+    return { row, prop, pos }
+  }
+
+  /** 选区 TSV */
+  const buildTsv = (formatCell: (row: any, prop: string) => string) => {
+    const bounds = areaBounds.value
+    const rows = opts.getRows()
+    const props = leafProps()
+    if (!bounds) {
+      const a = activeCell.value
+      if (!a) return ''
+      return formatCell(rows[a.rowIndex], a.prop)
+    }
+    const lines: string[] = []
+    for (let r = bounds.r0; r <= bounds.r1; r++) {
+      const cells: string[] = []
+      for (let c = bounds.c0; c <= bounds.c1; c++) {
+        const v = formatCell(rows[r], props[c])
+        cells.push(String(v ?? '').replace(/\t/g, ' ').replace(/\r?\n/g, ' '))
+      }
+      lines.push(cells.join('\t'))
+    }
+    return lines.join('\n')
+  }
+
+  /** 从活动格起粘贴 TSV */
+  const pasteTsv = (
+    text: string,
+    apply: (row: any, prop: string, value: string) => void
+  ) => {
+    const a = activeCell.value
+    if (!a) return
+    const rows = opts.getRows()
+    const props = leafProps()
+    const matrix = text
+      .replace(/\r\n/g, '\n')
+      .replace(/\r/g, '\n')
+      .split('\n')
+      .filter((line, i, arr) => !(i === arr.length - 1 && line === ''))
+      .map((line) => line.split('\t'))
+    for (let r = 0; r < matrix.length; r++) {
+      const row = rows[a.rowIndex + r]
+      if (!row) break
+      for (let c = 0; c < matrix[r].length; c++) {
+        const prop = props[a.colIndex + c]
+        if (!prop) break
+        apply(row, prop, matrix[r][c])
+      }
+    }
+  }
+
+  const clearAreaValues = (apply: (row: any, prop: string, value: string) => void) => {
+    const bounds = areaBounds.value
+    const rows = opts.getRows()
+    const props = leafProps()
+    if (!bounds) {
+      const a = activeCell.value
+      if (!a) return
+      apply(rows[a.rowIndex], a.prop, '')
+      return
+    }
+    for (let r = bounds.r0; r <= bounds.r1; r++) {
+      for (let c = bounds.c0; c <= bounds.c1; c++) {
+        apply(rows[r], props[c], '')
+      }
+    }
+  }
+
+  return {
+    activeCell: activeCell as Ref<QiuTableCellPos | null>,
+    areaEnd,
+    areaBounds,
+    setActive,
+    clearArea,
+    isCellInArea,
+    isActiveCell,
+    moveActive,
+    buildTsv,
+    pasteTsv,
+    clearAreaValues,
+    findPos,
+  }
+}