@antsoo-lib/core 3.0.0 → 3.0.1

package/src/BaseTable/index.vue

@@ -1,910 +1,910 @@
-<script lang="ts" setup>
-import { Button as AButton, Pagination, Popover, Tooltip } from '@antsoo-lib/components'
-import { QuestionCircleOutlined } from '@antsoo-lib/icons'
-import type { AnyObject } from '@antsoo-lib/shared'
-import { PRECISION } from '@antsoo-lib/shared'
-import type { env as _env } from '@antsoo-lib/utils'
-import { generateUniqueId, isNaN } from '@antsoo-lib/utils'
-import { cloneDeep } from 'lodash-es'
-import type { VxeComponentSizeType } from 'vxe-pc-ui'
-import type { VxeGridDefines, VxeGridPropTypes, VxeGridProps } from 'vxe-table'
-
-import { computed, ref } from 'vue'
-
-import { renderToolbar } from '../render/helper'
-import { useToolbarState } from '../render/state'
-import type { ToolbarConfig } from '../render/types'
-
-// Props默认值
-const props = withDefaults(defineProps<Props>(), {
-  checkbox: true,
-  radio: false,
-  drag: false,
-  height: '100%',
-  loading: false,
-  pager: true,
-  seq: false,
-  showFooter: true,
-  total: 0,
-  tree: false,
-  lToolBarCount: 4,
-  rToolBarCount: 4,
-  permissions: () => [],
-  getCommonCodeOptions: undefined,
-  hoverColor: '#E3FCF7',
-})
-
-// 抛出Emit方法（类型化）
-const emit = defineEmits<{
-  (e: 'pageChange', page: number, size: number): void
-  (e: 'pageShowSizeChange', current: number, size: number): void
-  (e: 'selectAllChangeEvent', checked: boolean, records: any[]): void
-  (
-    e: 'selectChangeEvent',
-    params: { checked: boolean; row: any; rowIndex: number; records: any[] },
-  ): void
-  (e: 'radioChangeEvent', params: { row: any; rowIndex: number; records: any }): void
-  (e: 'buttonClick', params: { button: Button; row: any; grid: any }): void
-  (e: 'sortChange', params: VxeGridDefines.SortChangeEventParams): void
-}>()
-
-const { isDev, isTest } = props.env || {}
-const showHelpText = isDev || isTest
-
-// Interface
-interface Button {
-  name?: (row: any) => string
-  permission?: string
-  event?: (row: any, controls: any, grid: any) => void
-  disabled?: (row: any, grid: any) => boolean
-  beforeCreate?: (row: any) => boolean
-  props?: AnyObject
-}
-
-interface Column {
-  type?: 'checkbox' | 'radio' | 'seq' | 'html' | 'expand' | null
-  buttons?: Button[]
-  [key: string]: any
-}
-
-interface Props {
-  // 增加一个 scope 属性，用于区分同构表格
-  scope?: string
-  // 是否开启选择器
-  checkbox?: boolean
-  // 复选框配置项
-  checkboxConfig?: AnyObject
-  // 是否开启单选框
-  radio?: boolean
-  // 单选框配置项
-  radioConfig?: AnyObject
-  // 列配置项
-  columns?: Column[]
-  // 个性化信息配置项
-  customConfig?: AnyObject
-  // 列配置信息
-  columnConfig?: AnyObject
-  // 渲染数据
-  data?: any[]
-  // 是否开启拖拽
-  drag?: boolean
-  // 表尾数据，数组-支持多行
-  footerData?: any[]
-  // 表格高度
-  height?: string
-  // 左侧工具栏
-  lToolBar?: ToolbarConfig
-  // 是否开启加载
-  loading?: boolean
-  // 个性化定制额外的列配置项，注意：若自定义配置项与默认配置项冲突，以自定义配置项为准
-  options?: Partial<VxeGridProps>
-  // 是否开启分页
-  pager?: boolean
-  // 右侧工具栏
-  rToolBar?: ToolbarConfig
-  // 行配置信息
-  rowConfig?: AnyObject
-  // 行拖拽配置项
-  rowDragConfig?: AnyObject
-  // 是否开启序号
-  seq?: boolean
-  // 是否展示表尾数据
-  showFooter?: boolean
-  // 工具栏配置
-  toolbarConfig?: AnyObject
-  // tooltip 配置项
-  tooltipConfig?: AnyObject
-  // 页码：当前加载总数据条数
-  total?: number
-  // 是否开启树状结构
-  tree?: boolean
-  // 树状结构配置项
-  treeConfig?: AnyObject
-  // 左侧工具栏显示个数
-  lToolBarCount?: number | (() => number)
-  // 右侧工具栏显示个数
-  rToolBarCount?: number | (() => number)
-  // 分页当前页（受控）
-  currentPage?: number
-  // 分页每页条数（受控）
-  pageSize?: number
-
-  // Decoupled: Permissions array
-  permissions?: string[]
-  // Decoupled: Function to get common code options
-  getCommonCodeOptions?: (type: string) => Array<{ code: string; name: string }>
-  // 悬浮背景颜色
-  hoverColor?: string | null
-  // 环境变量
-  env?: ReturnType<typeof _env>
-}
-
-// table 实例
-const basetable = ref()
-// 分页器实例
-const paginationRef = ref()
-// 当前每页数量，默认10条/页
-const currentPageSize = ref(10)
-
-// 受控分页：优先使用外部传入，否则回退默认
-const paginationCurrent = computed(() => props.currentPage ?? 1)
-const paginationPageSize = computed(() => props.pageSize ?? currentPageSize.value)
-
-// 格式化数字
-const formatNumber = (value: any, precision: number) => {
-  if (value === null || value === undefined || value === '') return ''
-  const num = Number(value)
-  if (isNaN(num)) return value
-  return num.toFixed(precision)
-}
-
-// 顶部左右侧工具栏状态实例
-const lToolBarState = useToolbarState()
-const rToolBarState = useToolbarState()
-
-// 抽出操作栏，根据是否存在buttons来判断
-const actionColumn = computed(() => {
-  return props.columns?.find((column) => column.buttons)
-})
-
-// 预过滤拥有权限的按钮，减少每行的计算量
-const permittedButtons = computed(() => {
-  const all = actionColumn.value?.buttons || []
-  return all.filter((b) => !b.permission || props.permissions.includes(b.permission))
-})
-
-// 左侧工具栏
-const lToolBarItems = computed(() => {
-  if (!props.lToolBar) return []
-  // Decoupled: Pass props.permissions
-  return renderToolbar(props.lToolBar, lToolBarState, props.lToolBarCount, props.permissions)
-})
-
-// 右侧工具栏
-const rToolBarItems = computed(() => {
-  if (!props.rToolBar) return []
-  // Decoupled: Pass props.permissions
-  return renderToolbar(props.rToolBar, rToolBarState, props.rToolBarCount, props.permissions)
-})
-
-// 树状配置
-const treeConfig = computed(() => {
-  return props.tree
-    ? {
-        treeConfig: {
-          rowField: 'id',
-          parentField: 'pid',
-          transform: true,
-          expandAll: true,
-          reserve: true,
-          ...props.treeConfig,
-        },
-      }
-    : {}
-})
-
-const tableId = computed(() => {
-  if (props.options?.id) {
-    return props.options.id
-  }
-  // 获取当前路径
-  const path = location.pathname
-  // 结合唯一标识（若有），生成唯一码
-  const rawId = `${path}::${props.scope || 'default'}`
-  return generateUniqueId(rawId)
-})
-
-const gridColumns = computed(() => handleGridColumns())
-const options = computed(() => {
-  const gridColumnsVal = gridColumns.value
-  return {
-    id: tableId.value,
-    // 表格基础尺寸
-    size: 'mini' as VxeComponentSizeType,
-    // 高度自适应
-    height: props.height,
-    // 给表头的单元格附加 className
-    headerCellClassName: 'base-columns-cell',
-    // 单元格class
-    cellClassName: 'base-columns-cell',
-    // 斑马纹
-    stripe: true,
-    // 边框
-    border: true,
-    // 内容过长时显示为省略号
-    showOverflow: true,
-    // 自动监听父元素的变化去重新调用 recalculate 方法计算样式
-    autoResize: true,
-    // 列配置
-    columns: gridColumnsVal as VxeGridPropTypes.Column[],
-    // 表格数据
-    data: props.data,
-    // 表格是否显示加载中
-    loading: props.loading,
-    // 是否显示表尾
-    showFooter: props.showFooter,
-    // 列配置信息
-    columnConfig: {
-      // 每一列启用列宽调整
-      resizable: true,
-      useKey: true,
-      ...props.columnConfig,
-    },
-    // 个性化信息配置项
-    customConfig: {
-      // 操作模式
-      mode: 'modal' as const,
-      storage: true,
-      ...props.customConfig,
-    },
-    // 复选框配置项
-    checkboxConfig: {
-      // 整行触发选择
-      trigger: 'row' as const,
-      ...props.checkboxConfig,
-    },
-    // 单选框配置项
-    radioConfig: {
-      // 整行触发选择
-      trigger: 'row' as const,
-      ...props.radioConfig,
-    },
-    // 行配置信息
-    rowConfig: {
-      keyField: 'id',
-      // 当鼠标移到行时，是否要高亮当前行
-      isHover: true,
-      // 启用列拖拽调整顺序
-      drag: props.drag,
-      useKey: true,
-      ...props.rowConfig,
-    },
-    // 行拖拽配置项
-    rowDragConfig: {
-      // 只对 tree-config 启用有效，是否允许同级行拖拽，用于树结构，启用后允许同层级之间进行拖拽
-      isPeerDrag: true,
-      ...props.rowDragConfig,
-    },
-    // 工具栏配置
-    toolbarConfig: {
-      slots: {
-        buttons: 'lToolBar',
-        tools: 'rToolBar',
-      },
-      // 自定义容器类名
-      className: 'base-table-toolbar',
-      // 最大化表格
-      zoom: true,
-      // 表格设置
-      custom: true,
-      ...props.toolbarConfig,
-    },
-    // tooltip 配置项
-    tooltipConfig: {
-      maxWidth: 200,
-      ...props.tooltipConfig,
-    },
-    // 树形结构配置项
-    ...treeConfig.value,
-    // 其他个性化定制
-    ...props.options,
-  }
-})
-
-/**
- * 控制按钮是否展示
- * @param {object} row - 当前按钮数据
- */
-function getVisibleButtons(row: any) {
-  if (!permittedButtons.value.length) return []
-  return permittedButtons.value.filter((button) => !button.beforeCreate || button.beforeCreate(row))
-}
-const rowButtonLoading = ref<Record<string, boolean>>({})
-function getButtonKey(row: any, button: any) {
-  const n = typeof button.name === 'function' ? button.name(row) : button.name
-  const id = row?.id ?? ''
-  return `${id}::${String(n)}`
-}
-function isButtonLoading(row: any, button: any) {
-  const k = getButtonKey(row, button)
-  return !!rowButtonLoading.value[k]
-}
-function handleRowButtonClick(button: any, row: any) {
-  const k = getButtonKey(row, button)
-  const controls = {
-    setLoading: (v: boolean) => {
-      rowButtonLoading.value[k] = v
-    },
-    getLoading: () => !!rowButtonLoading.value[k],
-  }
-  const fn = button.event
-  if (typeof fn === 'function') fn(row, controls, basetable.value)
-  emit('buttonClick', { button, row, grid: basetable.value })
-}
-
-/**
- * 跳转指定页码
- * @param {number} page - 页码
- */
-function goToPage(page: number) {
-  if (paginationRef.value && page >= 1) {
-    onChange(page, paginationPageSize.value)
-  }
-}
-
-/**
- * 重置分页到第一页
- */
-function resetPageNumber(): void {
-  if (paginationRef.value) {
-    onChange(1, paginationPageSize.value)
-  }
-}
-
-/**
- * 分页改变时触发
- * @param {number} page - 页码
- * @param {number} size - 每页条数
- */
-function onChange(page: number, size: number) {
-  currentPageSize.value = size
-  emit('pageChange', page, size)
-}
-
-/**
- * 分页每页条数改变时触发
- * @param {number} current - 页码
- * @param {number} size - 每页条数
- */
-function onShowSizeChange(current: number, size: number) {
-  currentPageSize.value = size
-  emit('pageShowSizeChange', current, size)
-}
-
-/**
- * 用于 type=checkbox，触发全选
- * @param {object} params - 事件参数对象
- * @param {boolean} params.checked - 复选框是否被选中
- */
-function selectAllChangeEvent({ checked }: { checked: boolean }) {
-  const $grid = basetable.value
-  if ($grid) {
-    const records = $grid.getCheckboxRecords()
-    emit('selectAllChangeEvent', checked, records)
-  }
-}
-
-/**
- * 用于 type=checkbox，触发行选择
- * @param {object} params - 事件参数对象
- * @param {boolean} params.checked - 复选框是否被选中
- * @param {object} params.row - 当前选中的行数据
- * @param {number} params.rowIndex - 当前选中的行下标
- */
-function selectChangeEvent({
-  checked,
-  row,
-  rowIndex,
-}: {
-  checked: boolean
-  row: any
-  rowIndex: number
-}) {
-  const $grid = basetable.value
-  if ($grid) {
-    const records = $grid.getCheckboxRecords()
-    emit('selectChangeEvent', {
-      checked,
-      row,
-      rowIndex,
-      records,
-    })
-  }
-}
-
-/**
- * 用于 type=radio，触发行选择
- * @param {object} params - 事件参数对象
- * @param {boolean} params.checked - 单选框是否被选中
- * @param {object} params.row - 当前选中的行数据
- * @param {number} params.rowIndex - 当前选中的行下标
- */
-function radioChangeEvent({ row, rowIndex }: { row: any; rowIndex: number }) {
-  const $grid = basetable.value
-  if ($grid) {
-    const records = $grid.getRadioRecord()
-    emit('radioChangeEvent', {
-      row,
-      rowIndex,
-      records,
-    })
-  }
-}
-
-// 处理表格列配置
-function handleGridColumns() {
-  // 找到第一个没有type属性的列索引
-  const firstNonTypeIndex = props.columns?.findIndex((c) => !c.type) ?? -1
-  // 拷贝列配置
-  const columns = cloneDeep(props.columns) || []
-  // 是否支持序号列，默认不支持
-  if (props.seq) {
-    columns.unshift({
-      type: 'seq',
-      field: 'BaseTableSeq',
-      width: 70,
-    })
-  }
-  // 是否支持复选框，默认支持。给予field字段是为了给表尾数据的【总计】文案做关联匹配。
-  if (props.checkbox) {
-    columns.unshift({
-      type: 'checkbox',
-      field: 'BaseTablePlaceholder',
-    })
-  }
-  // 是否支持单选框，默认不支持。给予field字段是为了给表尾数据的【总计】文案做关联匹配。
-  if (props.radio) {
-    columns.unshift({
-      type: 'radio',
-      field: 'BaseTablePlaceholder',
-    })
-  }
-  // 递归处理列配置
-  const processColumn = (column: Column, index: number): any => {
-    const { buttons, ...col } = column
-    // 仅当缺少 field 且不是特殊类型列时，自动补充唯一 field
-    // 避免覆盖已有配置，且不仅限于“操作”列
-    if (!col.field && !col.type) {
-      // 如果是操作列，优先用 'action'（更具语义），否则用索引生成唯一ID
-      col.field = col.title === '操作' ? 'action' : `col_${index}`
-    }
-
-    // 选择器居中时，若启用了溢出选项，会引起3px的误差
-    if (col.type === 'checkbox' || col.type === 'radio') {
-      return {
-        ...col,
-        width: 'auto',
-        align: 'center',
-        fixed: 'left',
-        showOverflow: false,
-      }
-    }
-    // 处理按钮插槽
-    if (buttons) {
-      return {
-        ...col,
-        field: 'BaseTableEditColumns',
-        slots: { default: 'buttons' },
-      }
-    }
-    // 处理 helpText
-    if (showHelpText || (col.helpText && col.helpText !== false)) {
-      if (col.type !== 'seq') {
-        col.slots = { ...col.slots, header: col.slots?.header ?? 'headerHelp' }
-        col.params = { ...col.params, helpText: col.helpText || col.field }
-      }
-    }
-
-    // 为第一个没有type属性的列添加树节点和拖拽排序功能
-    const baseColumn: any = {
-      minWidth: 80,
-      footerAlign: 'right',
-      footerClassName: 'base-table-footer-cell',
-      ...col,
-    }
-
-    // 处理 commonCode 格式化
-    if (col.commonCode) {
-      const originalFormatter = col.formatter
-      // 缓存 getCommonCodeOptions 的结果，避免每次 formatter 执行都重新获取
-      let cachedCodes: Array<{ code: string; name: string }> | null = null
-      const commonCodeType = col.commonCode
-
-      baseColumn.formatter = (value: any) => {
-        // 注意：不能用 `||`，否则当 cellValue 为 null 时会回退到整个参数对象，导致出现 [object Object]
-        const hasCellValue = value && Object.prototype.hasOwnProperty.call(value, 'cellValue')
-        const v = hasCellValue ? value.cellValue : value
-
-        // 优化：直接在 formatter 内部处理 commonCode 逻辑，避免频繁调用 getCommonCodeName
-        let name = v
-        if (v !== null && v !== undefined && commonCodeType && props.getCommonCodeOptions) {
-          if (!cachedCodes) {
-            cachedCodes = props.getCommonCodeOptions(commonCodeType)
-          }
-          if (cachedCodes) {
-            const codeItem = cachedCodes.find((item) => item.code === String(v))
-            if (codeItem) {
-              name = codeItem.name
-            }
-          }
-        }
-        name = name ?? ''
-
-        if (originalFormatter) {
-          try {
-            return originalFormatter(name)
-          } catch (e) {
-            console.warn('commonCode formatter 执行异常', e)
-          }
-        }
-        return name
-      }
-    }
-
-    // 处理 xweight/xmoney/xprice/xtaxrate/xnumber 格式化
-    // 优先级：precision > xweight > xmoney ...
-    let precision: number | undefined = col.precision
-    if (precision === undefined) {
-      if (col.xweight) precision = PRECISION.weight
-      else if (col.xmoney) precision = PRECISION.amount
-      else if (col.xprice) precision = PRECISION.price
-      else if (col.xtaxrate) precision = PRECISION.taxRate
-      else if (col.xnumber) precision = PRECISION.number
-    }
-
-    if (precision !== undefined) {
-      const originalFormatter = baseColumn.formatter || col.formatter
-      baseColumn.align = baseColumn.align || 'right' // 数字默认右对齐
-      baseColumn.formatter = (value: any) => {
-        const hasCellValue = value && Object.prototype.hasOwnProperty.call(value, 'cellValue')
-        let v = hasCellValue ? value.cellValue : value
-
-        // 如果已经有 formatter (比如 commonCode 处理过的)，先执行它
-        if (originalFormatter) {
-          try {
-            v = originalFormatter(value)
-          } catch (e) {
-            console.warn('formatter 执行异常', e)
-          }
-        }
-
-        return formatNumber(v, precision!)
-      }
-    }
-
-    if (col?.event) {
-      const oldClass = baseColumn.className || ''
-      baseColumn.className = `${oldClass} cell-events`.trim()
-    }
-
-    // 递归处理子列
-    if (baseColumn.children && baseColumn.children.length > 0) {
-      baseColumn.children = baseColumn.children.map(processColumn)
-    }
-
-    return baseColumn
-  }
-
-  // 返回处理数据
-  return columns.map((column: Column, idx: number) => {
-    const baseColumn = processColumn(column, idx)
-
-    if (idx === firstNonTypeIndex && props.tree) {
-      baseColumn.treeNode = true
-    }
-    if (idx === firstNonTypeIndex && props.drag) {
-      baseColumn.dragSort = true
-    }
-
-    return baseColumn
-  })
-}
-
-// 处理表尾数据，注意：footerData是个数组，支持多行表尾
-function handleFooterData() {
-  // 是否展示表尾
-  if (props.showFooter) {
-    // 因为表尾需要有一列占位，用于展示【总计】这个文案，默认使用复选框
-    const footerData = cloneDeep(props?.footerData ?? [])
-    return footerData.map((item) => ({
-      ...item,
-      BaseTablePlaceholder: '总计',
-    }))
-  }
-  return []
-}
-
-const footerRenderData = computed(() => handleFooterData())
-
-/**
- * 获取当前选中的复选框数据
- * @returns {Array} 选中的行数据数组
- */
-function getCheckboxRecords() {
-  const $grid = basetable.value
-  if ($grid) {
-    return $grid.getCheckboxRecords()
-  }
-  return []
-}
-
-/**
- * 获取当前选中的单选框数据
- * @returns {object | null} 选中的行数据对象，如果没有选中则返回 null
- */
-function getRadioRecord() {
-  const $grid = basetable.value
-  if ($grid) {
-    const records = $grid.getRadioRecord()
-    return records ?? null
-  }
-  return null
-}
-
-/**
- * 获取当前选中的数据（兼容复选框和单选框）
- * @returns {Array | object | null}
- * - 复选框模式：返回选中的行数据数组
- * - 单选框模式：返回选中的行数据对象，如果没有选中则返回 null
- */
-function getSelectedRecords() {
-  if (props.radio) {
-    return getRadioRecord()
-  }
-  if (props.checkbox) {
-    return getCheckboxRecords()
-  }
-  return null
-}
-
-/**
- * 获取表格实例
- */
-function getGrid(): unknown {
-  return basetable.value
-}
-
-/**
- * 递归查找列配置
- * @param columns 列数组
- * @param field 目标字段名
- * @returns 找到的列配置或 undefined
- */
-function findColumnByField(columns: Column[], field: string): Column | undefined {
-  for (const col of columns) {
-    if (col.field === field) {
-      return col
-    }
-    if (col.children && col.children.length > 0) {
-      const found = findColumnByField(col.children, field)
-      return found
-    }
-  }
-  return undefined
-}
-
-/**
- * 处理单元格点击事件
- * @param {object} params - 事件参数对象
- * @param {object} params.row - 当前点击的行
- * @param {string} params.column - 当前点击的列
- */
-function handleCellClick({ row, column }: { row: any; column: any }) {
-  // 当用户进行文本选择时，不触发点击事件
-  const selection = window.getSelection()
-  if (selection && selection.toString().length > 0) return
-
-  if (column?.className?.includes('cell-events')) {
-    const findColumn = findColumnByField(options.value.columns, column.field)
-    ;(findColumn as any)?.event?.(row, column)
-  }
-}
-
-// Expose
-defineExpose({
-  grid: basetable,
-  getAllToolBarValues: () => ({
-    lToolBar: lToolBarState.getAllValues(),
-    rToolBar: rToolBarState.getAllValues(),
-  }),
-  getLToolBarValues: () => lToolBarState.getAllValues(),
-  getRToolBarValues: () => rToolBarState.getAllValues(),
-  goToPage,
-  resetPageNumber,
-  getGrid,
-  lToolBarState,
-  rToolBarState,
-  getSelectedRecords,
-})
-</script>
-
-<template>
-  <vxe-grid
-    ref="basetable"
-    v-bind="options"
-    :footer-data="footerRenderData"
-    :style="{
-      '--vxe-ui-table-row-hover-background-color': hoverColor,
-      '--vxe-ui-table-column-hover-background-color': hoverColor,
-      '--vxe-ui-table-row-hover-striped-background-color': hoverColor,
-    }"
-    @sort-change="(params) => emit('sortChange', params)"
-    @cell-click="handleCellClick"
-    @checkbox-all="selectAllChangeEvent"
-    @checkbox-change="selectChangeEvent"
-    @radio-change="radioChangeEvent"
-  >
-    <!-- 顶部左侧工具栏配置 -->
-    <template #lToolBar>
-      <div v-if="lToolBarItems.length > 0" class="base-table-toolbar-container">
-        <component :is="item" v-for="item in lToolBarItems" :key="item.key" />
-      </div>
-    </template>
-    <!-- 顶部右侧工具栏配置 -->
-    <template #rToolBar>
-      <div v-if="rToolBarItems.length > 0" class="base-table-toolbar-container">
-        <component :is="item" v-for="item in rToolBarItems" :key="item.key" />
-      </div>
-    </template>
-    <!-- 通用表头提示插槽 -->
-    <template #headerHelp="{ column }">
-      <span>{{ column.title }}</span>
-      <Tooltip v-if="column.params?.helpText" :title="column.params.helpText">
-        <QuestionCircleOutlined class="base-table-header-help-icon" />
-      </Tooltip>
-    </template>
-    <template #buttons="{ row }">
-      <div class="base-table-buttons-container">
-        <template v-for="(button, index) in getVisibleButtons(row)" :key="button.name">
-          <AButton
-            v-if="index < 2 || getVisibleButtons(row).length <= 3"
-            type="link"
-            size="small"
-            :disabled="button.disabled?.(row, basetable)"
-            :loading="isButtonLoading(row, button)"
-            v-bind="button.props"
-            @click.stop="handleRowButtonClick(button, row)"
-          >
-            {{ typeof button.name === 'function' ? button.name(row) : button.name }}
-          </AButton>
-        </template>
-        <Popover v-if="getVisibleButtons(row).length > 3" placement="bottomRight">
-          <template #content>
-            <template v-for="button in getVisibleButtons(row).slice(2)" :key="button.name">
-              <AButton
-                style="display: block"
-                type="link"
-                size="small"
-                :disabled="button.disabled?.(row, basetable)"
-                :loading="isButtonLoading(row, button)"
-                v-bind="button.props"
-                @click.stop="handleRowButtonClick(button, row)"
-              >
-                {{ typeof button.name === 'function' ? button.name(row) : button.name }}
-              </AButton>
-            </template>
-          </template>
-          <AButton type="link" size="small"> 更多 </AButton>
-        </Popover>
-      </div>
-    </template>
-    <!-- 分页器 -->
-    <template v-if="pager" #pager>
-      <div class="base-table-pager">
-        <Pagination
-          ref="paginationRef"
-          size="small"
-          :total="total"
-          :current="paginationCurrent"
-          :page-size="paginationPageSize"
-          show-size-changer
-          show-quick-jumper
-          @change="onChange"
-          @show-size-change="onShowSizeChange"
-        />
-        <p class="base-table-pager-total">总计 {{ total }} 条数据</p>
-      </div>
-    </template>
-    <!-- 透传所有其他插槽到vxe-grid -->
-    <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
-      <template v-if="!['lToolBar', 'rToolBar', 'buttons', 'pager'].includes(String(slotName))">
-        <slot :name="String(slotName)" v-bind="slotProps" />
-      </template>
-    </template>
-  </vxe-grid>
-</template>
-
-<style lang="scss" scoped>
-.base-table-header-help-icon {
-  margin-left: 4px;
-  color: #999;
-  cursor: help;
-}
-
-:global(.base-table-toolbar) {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-:global(.base-table-toolbar .base-table-toolbar-container) {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-:global(.base-table-toolbar .vxe-tools--operate) {
-  margin-bottom: 12px;
-}
-
-:global(.base-table-toolbar .vxe-button--dropdown.size--mini),
-:global(.base-table-toolbar .vxe-button.type--button.size--mini) {
-  margin: 0 0 0 12px;
-}
-
-.base-table-buttons-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  .ant-btn {
-    padding: 0;
-    font-size: 12px;
-  }
-}
-
-:deep(.ant-popover) {
-  padding-top: 0;
-}
-
-:deep(.ant-popover-inner) {
-  padding: 0 !important;
-}
-
-:deep(.base-columns-cell) {
-  .vxe-cell {
-    padding: 8px 12px !important;
-  }
-}
-
-:deep(.base-table-footer-cell) {
-  .vxe-cell {
-    height: 40px !important;
-    padding: 8px 12px !important;
-  }
-}
-
-.base-table-pager {
-  display: flex;
-  align-items: end;
-  justify-content: space-between;
-  height: fit-content;
-  min-height: 36px;
-
-  :deep(.ant-pagination-options) {
-    .ant-select {
-      width: 100px;
-    }
-  }
-
-  .base-table-pager-total {
-    color: #262626;
-    line-height: 24px;
-  }
-}
-
-:deep(.cell-events) {
-  color: #1288fc;
-  cursor: pointer;
-}
-</style>
+<script lang="ts" setup>
+import { Button as AButton, Pagination, Popover, Tooltip } from '@antsoo-lib/components'
+import { QuestionCircleOutlined } from '@antsoo-lib/icons'
+import type { AnyObject } from '@antsoo-lib/shared'
+import { PRECISION } from '@antsoo-lib/shared'
+import type { env as _env } from '@antsoo-lib/utils'
+import { generateUniqueId, isNaN } from '@antsoo-lib/utils'
+import { cloneDeep } from 'lodash-es'
+import type { VxeComponentSizeType } from 'vxe-pc-ui'
+import type { VxeGridDefines, VxeGridPropTypes, VxeGridProps } from 'vxe-table'
+
+import { computed, ref } from 'vue'
+
+import { renderToolbar } from '../render/helper'
+import { useToolbarState } from '../render/state'
+import type { ToolbarConfig } from '../render/types'
+
+// Props默认值
+const props = withDefaults(defineProps<Props>(), {
+  checkbox: true,
+  radio: false,
+  drag: false,
+  height: '100%',
+  loading: false,
+  pager: true,
+  seq: false,
+  showFooter: true,
+  total: 0,
+  tree: false,
+  lToolBarCount: 4,
+  rToolBarCount: 4,
+  permissions: () => [],
+  getCommonCodeOptions: undefined,
+  hoverColor: '#E3FCF7',
+})
+
+// 抛出Emit方法（类型化）
+const emit = defineEmits<{
+  (e: 'pageChange', page: number, size: number): void
+  (e: 'pageShowSizeChange', current: number, size: number): void
+  (e: 'selectAllChangeEvent', checked: boolean, records: any[]): void
+  (
+    e: 'selectChangeEvent',
+    params: { checked: boolean; row: any; rowIndex: number; records: any[] },
+  ): void
+  (e: 'radioChangeEvent', params: { row: any; rowIndex: number; records: any }): void
+  (e: 'buttonClick', params: { button: Button; row: any; grid: any }): void
+  (e: 'sortChange', params: VxeGridDefines.SortChangeEventParams): void
+}>()
+
+const { isDev, isTest } = props.env || {}
+const showHelpText = isDev || isTest
+
+// Interface
+interface Button {
+  name?: (row: any) => string
+  permission?: string
+  event?: (row: any, controls: any, grid: any) => void
+  disabled?: (row: any, grid: any) => boolean
+  beforeCreate?: (row: any) => boolean
+  props?: AnyObject
+}
+
+interface Column {
+  type?: 'checkbox' | 'radio' | 'seq' | 'html' | 'expand' | null
+  buttons?: Button[]
+  [key: string]: any
+}
+
+interface Props {
+  // 增加一个 scope 属性，用于区分同构表格
+  scope?: string
+  // 是否开启选择器
+  checkbox?: boolean
+  // 复选框配置项
+  checkboxConfig?: AnyObject
+  // 是否开启单选框
+  radio?: boolean
+  // 单选框配置项
+  radioConfig?: AnyObject
+  // 列配置项
+  columns?: Column[]
+  // 个性化信息配置项
+  customConfig?: AnyObject
+  // 列配置信息
+  columnConfig?: AnyObject
+  // 渲染数据
+  data?: any[]
+  // 是否开启拖拽
+  drag?: boolean
+  // 表尾数据，数组-支持多行
+  footerData?: any[]
+  // 表格高度
+  height?: string
+  // 左侧工具栏
+  lToolBar?: ToolbarConfig
+  // 是否开启加载
+  loading?: boolean
+  // 个性化定制额外的列配置项，注意：若自定义配置项与默认配置项冲突，以自定义配置项为准
+  options?: Partial<VxeGridProps>
+  // 是否开启分页
+  pager?: boolean
+  // 右侧工具栏
+  rToolBar?: ToolbarConfig
+  // 行配置信息
+  rowConfig?: AnyObject
+  // 行拖拽配置项
+  rowDragConfig?: AnyObject
+  // 是否开启序号
+  seq?: boolean
+  // 是否展示表尾数据
+  showFooter?: boolean
+  // 工具栏配置
+  toolbarConfig?: AnyObject
+  // tooltip 配置项
+  tooltipConfig?: AnyObject
+  // 页码：当前加载总数据条数
+  total?: number
+  // 是否开启树状结构
+  tree?: boolean
+  // 树状结构配置项
+  treeConfig?: AnyObject
+  // 左侧工具栏显示个数
+  lToolBarCount?: number | (() => number)
+  // 右侧工具栏显示个数
+  rToolBarCount?: number | (() => number)
+  // 分页当前页（受控）
+  currentPage?: number
+  // 分页每页条数（受控）
+  pageSize?: number
+
+  // Decoupled: Permissions array
+  permissions?: string[]
+  // Decoupled: Function to get common code options
+  getCommonCodeOptions?: (type: string) => Array<{ code: string; name: string }>
+  // 悬浮背景颜色
+  hoverColor?: string | null
+  // 环境变量
+  env?: ReturnType<typeof _env>
+}
+
+// table 实例
+const basetable = ref()
+// 分页器实例
+const paginationRef = ref()
+// 当前每页数量，默认10条/页
+const currentPageSize = ref(10)
+
+// 受控分页：优先使用外部传入，否则回退默认
+const paginationCurrent = computed(() => props.currentPage ?? 1)
+const paginationPageSize = computed(() => props.pageSize ?? currentPageSize.value)
+
+// 格式化数字
+const formatNumber = (value: any, precision: number) => {
+  if (value === null || value === undefined || value === '') return ''
+  const num = Number(value)
+  if (isNaN(num)) return value
+  return num.toFixed(precision)
+}
+
+// 顶部左右侧工具栏状态实例
+const lToolBarState = useToolbarState()
+const rToolBarState = useToolbarState()
+
+// 抽出操作栏，根据是否存在buttons来判断
+const actionColumn = computed(() => {
+  return props.columns?.find((column) => column.buttons)
+})
+
+// 预过滤拥有权限的按钮，减少每行的计算量
+const permittedButtons = computed(() => {
+  const all = actionColumn.value?.buttons || []
+  return all.filter((b) => !b.permission || props.permissions.includes(b.permission))
+})
+
+// 左侧工具栏
+const lToolBarItems = computed(() => {
+  if (!props.lToolBar) return []
+  // Decoupled: Pass props.permissions
+  return renderToolbar(props.lToolBar, lToolBarState, props.lToolBarCount, props.permissions)
+})
+
+// 右侧工具栏
+const rToolBarItems = computed(() => {
+  if (!props.rToolBar) return []
+  // Decoupled: Pass props.permissions
+  return renderToolbar(props.rToolBar, rToolBarState, props.rToolBarCount, props.permissions)
+})
+
+// 树状配置
+const treeConfig = computed(() => {
+  return props.tree
+    ? {
+        treeConfig: {
+          rowField: 'id',
+          parentField: 'pid',
+          transform: true,
+          expandAll: true,
+          reserve: true,
+          ...props.treeConfig,
+        },
+      }
+    : {}
+})
+
+const tableId = computed(() => {
+  if (props.options?.id) {
+    return props.options.id
+  }
+  // 获取当前路径
+  const path = location.pathname
+  // 结合唯一标识（若有），生成唯一码
+  const rawId = `${path}::${props.scope || 'default'}`
+  return generateUniqueId(rawId)
+})
+
+const gridColumns = computed(() => handleGridColumns())
+const options = computed(() => {
+  const gridColumnsVal = gridColumns.value
+  return {
+    id: tableId.value,
+    // 表格基础尺寸
+    size: 'mini' as VxeComponentSizeType,
+    // 高度自适应
+    height: props.height,
+    // 给表头的单元格附加 className
+    headerCellClassName: 'base-columns-cell',
+    // 单元格class
+    cellClassName: 'base-columns-cell',
+    // 斑马纹
+    stripe: true,
+    // 边框
+    border: true,
+    // 内容过长时显示为省略号
+    showOverflow: true,
+    // 自动监听父元素的变化去重新调用 recalculate 方法计算样式
+    autoResize: true,
+    // 列配置
+    columns: gridColumnsVal as VxeGridPropTypes.Column[],
+    // 表格数据
+    data: props.data,
+    // 表格是否显示加载中
+    loading: props.loading,
+    // 是否显示表尾
+    showFooter: props.showFooter,
+    // 列配置信息
+    columnConfig: {
+      // 每一列启用列宽调整
+      resizable: true,
+      useKey: true,
+      ...props.columnConfig,
+    },
+    // 个性化信息配置项
+    customConfig: {
+      // 操作模式
+      mode: 'modal' as const,
+      storage: true,
+      ...props.customConfig,
+    },
+    // 复选框配置项
+    checkboxConfig: {
+      // 整行触发选择
+      trigger: 'row' as const,
+      ...props.checkboxConfig,
+    },
+    // 单选框配置项
+    radioConfig: {
+      // 整行触发选择
+      trigger: 'row' as const,
+      ...props.radioConfig,
+    },
+    // 行配置信息
+    rowConfig: {
+      keyField: 'id',
+      // 当鼠标移到行时，是否要高亮当前行
+      isHover: true,
+      // 启用列拖拽调整顺序
+      drag: props.drag,
+      useKey: true,
+      ...props.rowConfig,
+    },
+    // 行拖拽配置项
+    rowDragConfig: {
+      // 只对 tree-config 启用有效，是否允许同级行拖拽，用于树结构，启用后允许同层级之间进行拖拽
+      isPeerDrag: true,
+      ...props.rowDragConfig,
+    },
+    // 工具栏配置
+    toolbarConfig: {
+      slots: {
+        buttons: 'lToolBar',
+        tools: 'rToolBar',
+      },
+      // 自定义容器类名
+      className: 'base-table-toolbar',
+      // 最大化表格
+      zoom: true,
+      // 表格设置
+      custom: true,
+      ...props.toolbarConfig,
+    },
+    // tooltip 配置项
+    tooltipConfig: {
+      maxWidth: 200,
+      ...props.tooltipConfig,
+    },
+    // 树形结构配置项
+    ...treeConfig.value,
+    // 其他个性化定制
+    ...props.options,
+  }
+})
+
+/**
+ * 控制按钮是否展示
+ * @param {object} row - 当前按钮数据
+ */
+function getVisibleButtons(row: any) {
+  if (!permittedButtons.value.length) return []
+  return permittedButtons.value.filter((button) => !button.beforeCreate || button.beforeCreate(row))
+}
+const rowButtonLoading = ref<Record<string, boolean>>({})
+function getButtonKey(row: any, button: any) {
+  const n = typeof button.name === 'function' ? button.name(row) : button.name
+  const id = row?.id ?? ''
+  return `${id}::${String(n)}`
+}
+function isButtonLoading(row: any, button: any) {
+  const k = getButtonKey(row, button)
+  return !!rowButtonLoading.value[k]
+}
+function handleRowButtonClick(button: any, row: any) {
+  const k = getButtonKey(row, button)
+  const controls = {
+    setLoading: (v: boolean) => {
+      rowButtonLoading.value[k] = v
+    },
+    getLoading: () => !!rowButtonLoading.value[k],
+  }
+  const fn = button.event
+  if (typeof fn === 'function') fn(row, controls, basetable.value)
+  emit('buttonClick', { button, row, grid: basetable.value })
+}
+
+/**
+ * 跳转指定页码
+ * @param {number} page - 页码
+ */
+function goToPage(page: number) {
+  if (paginationRef.value && page >= 1) {
+    onChange(page, paginationPageSize.value)
+  }
+}
+
+/**
+ * 重置分页到第一页
+ */
+function resetPageNumber(): void {
+  if (paginationRef.value) {
+    onChange(1, paginationPageSize.value)
+  }
+}
+
+/**
+ * 分页改变时触发
+ * @param {number} page - 页码
+ * @param {number} size - 每页条数
+ */
+function onChange(page: number, size: number) {
+  currentPageSize.value = size
+  emit('pageChange', page, size)
+}
+
+/**
+ * 分页每页条数改变时触发
+ * @param {number} current - 页码
+ * @param {number} size - 每页条数
+ */
+function onShowSizeChange(current: number, size: number) {
+  currentPageSize.value = size
+  emit('pageShowSizeChange', current, size)
+}
+
+/**
+ * 用于 type=checkbox，触发全选
+ * @param {object} params - 事件参数对象
+ * @param {boolean} params.checked - 复选框是否被选中
+ */
+function selectAllChangeEvent({ checked }: { checked: boolean }) {
+  const $grid = basetable.value
+  if ($grid) {
+    const records = $grid.getCheckboxRecords()
+    emit('selectAllChangeEvent', checked, records)
+  }
+}
+
+/**
+ * 用于 type=checkbox，触发行选择
+ * @param {object} params - 事件参数对象
+ * @param {boolean} params.checked - 复选框是否被选中
+ * @param {object} params.row - 当前选中的行数据
+ * @param {number} params.rowIndex - 当前选中的行下标
+ */
+function selectChangeEvent({
+  checked,
+  row,
+  rowIndex,
+}: {
+  checked: boolean
+  row: any
+  rowIndex: number
+}) {
+  const $grid = basetable.value
+  if ($grid) {
+    const records = $grid.getCheckboxRecords()
+    emit('selectChangeEvent', {
+      checked,
+      row,
+      rowIndex,
+      records,
+    })
+  }
+}
+
+/**
+ * 用于 type=radio，触发行选择
+ * @param {object} params - 事件参数对象
+ * @param {boolean} params.checked - 单选框是否被选中
+ * @param {object} params.row - 当前选中的行数据
+ * @param {number} params.rowIndex - 当前选中的行下标
+ */
+function radioChangeEvent({ row, rowIndex }: { row: any; rowIndex: number }) {
+  const $grid = basetable.value
+  if ($grid) {
+    const records = $grid.getRadioRecord()
+    emit('radioChangeEvent', {
+      row,
+      rowIndex,
+      records,
+    })
+  }
+}
+
+// 处理表格列配置
+function handleGridColumns() {
+  // 找到第一个没有type属性的列索引
+  const firstNonTypeIndex = props.columns?.findIndex((c) => !c.type) ?? -1
+  // 拷贝列配置
+  const columns = cloneDeep(props.columns) || []
+  // 是否支持序号列，默认不支持
+  if (props.seq) {
+    columns.unshift({
+      type: 'seq',
+      field: 'BaseTableSeq',
+      width: 70,
+    })
+  }
+  // 是否支持复选框，默认支持。给予field字段是为了给表尾数据的【总计】文案做关联匹配。
+  if (props.checkbox) {
+    columns.unshift({
+      type: 'checkbox',
+      field: 'BaseTablePlaceholder',
+    })
+  }
+  // 是否支持单选框，默认不支持。给予field字段是为了给表尾数据的【总计】文案做关联匹配。
+  if (props.radio) {
+    columns.unshift({
+      type: 'radio',
+      field: 'BaseTablePlaceholder',
+    })
+  }
+  // 递归处理列配置
+  const processColumn = (column: Column, index: number): any => {
+    const { buttons, ...col } = column
+    // 仅当缺少 field 且不是特殊类型列时，自动补充唯一 field
+    // 避免覆盖已有配置，且不仅限于“操作”列
+    if (!col.field && !col.type) {
+      // 如果是操作列，优先用 'action'（更具语义），否则用索引生成唯一ID
+      col.field = col.title === '操作' ? 'action' : `col_${index}`
+    }
+
+    // 选择器居中时，若启用了溢出选项，会引起3px的误差
+    if (col.type === 'checkbox' || col.type === 'radio') {
+      return {
+        ...col,
+        width: 'auto',
+        align: 'center',
+        fixed: 'left',
+        showOverflow: false,
+      }
+    }
+    // 处理按钮插槽
+    if (buttons) {
+      return {
+        ...col,
+        field: 'BaseTableEditColumns',
+        slots: { default: 'buttons' },
+      }
+    }
+    // 处理 helpText
+    if (showHelpText || (col.helpText && col.helpText !== false)) {
+      if (col.type !== 'seq') {
+        col.slots = { ...col.slots, header: col.slots?.header ?? 'headerHelp' }
+        col.params = { ...col.params, helpText: col.helpText || col.field }
+      }
+    }
+
+    // 为第一个没有type属性的列添加树节点和拖拽排序功能
+    const baseColumn: any = {
+      minWidth: 80,
+      footerAlign: 'right',
+      footerClassName: 'base-table-footer-cell',
+      ...col,
+    }
+
+    // 处理 commonCode 格式化
+    if (col.commonCode) {
+      const originalFormatter = col.formatter
+      // 缓存 getCommonCodeOptions 的结果，避免每次 formatter 执行都重新获取
+      let cachedCodes: Array<{ code: string; name: string }> | null = null
+      const commonCodeType = col.commonCode
+
+      baseColumn.formatter = (value: any) => {
+        // 注意：不能用 `||`，否则当 cellValue 为 null 时会回退到整个参数对象，导致出现 [object Object]
+        const hasCellValue = value && Object.prototype.hasOwnProperty.call(value, 'cellValue')
+        const v = hasCellValue ? value.cellValue : value
+
+        // 优化：直接在 formatter 内部处理 commonCode 逻辑，避免频繁调用 getCommonCodeName
+        let name = v
+        if (v !== null && v !== undefined && commonCodeType && props.getCommonCodeOptions) {
+          if (!cachedCodes) {
+            cachedCodes = props.getCommonCodeOptions(commonCodeType)
+          }
+          if (cachedCodes) {
+            const codeItem = cachedCodes.find((item) => item.code === String(v))
+            if (codeItem) {
+              name = codeItem.name
+            }
+          }
+        }
+        name = name ?? ''
+
+        if (originalFormatter) {
+          try {
+            return originalFormatter(name)
+          } catch (e) {
+            console.warn('commonCode formatter 执行异常', e)
+          }
+        }
+        return name
+      }
+    }
+
+    // 处理 xweight/xmoney/xprice/xtaxrate/xnumber 格式化
+    // 优先级：precision > xweight > xmoney ...
+    let precision: number | undefined = col.precision
+    if (precision === undefined) {
+      if (col.xweight) precision = PRECISION.weight
+      else if (col.xmoney) precision = PRECISION.amount
+      else if (col.xprice) precision = PRECISION.price
+      else if (col.xtaxrate) precision = PRECISION.taxRate
+      else if (col.xnumber) precision = PRECISION.number
+    }
+
+    if (precision !== undefined) {
+      const originalFormatter = baseColumn.formatter || col.formatter
+      baseColumn.align = baseColumn.align || 'right' // 数字默认右对齐
+      baseColumn.formatter = (value: any) => {
+        const hasCellValue = value && Object.prototype.hasOwnProperty.call(value, 'cellValue')
+        let v = hasCellValue ? value.cellValue : value
+
+        // 如果已经有 formatter (比如 commonCode 处理过的)，先执行它
+        if (originalFormatter) {
+          try {
+            v = originalFormatter(value)
+          } catch (e) {
+            console.warn('formatter 执行异常', e)
+          }
+        }
+
+        return formatNumber(v, precision!)
+      }
+    }
+
+    if (col?.event) {
+      const oldClass = baseColumn.className || ''
+      baseColumn.className = `${oldClass} cell-events`.trim()
+    }
+
+    // 递归处理子列
+    if (baseColumn.children && baseColumn.children.length > 0) {
+      baseColumn.children = baseColumn.children.map(processColumn)
+    }
+
+    return baseColumn
+  }
+
+  // 返回处理数据
+  return columns.map((column: Column, idx: number) => {
+    const baseColumn = processColumn(column, idx)
+
+    if (idx === firstNonTypeIndex && props.tree) {
+      baseColumn.treeNode = true
+    }
+    if (idx === firstNonTypeIndex && props.drag) {
+      baseColumn.dragSort = true
+    }
+
+    return baseColumn
+  })
+}
+
+// 处理表尾数据，注意：footerData是个数组，支持多行表尾
+function handleFooterData() {
+  // 是否展示表尾
+  if (props.showFooter) {
+    // 因为表尾需要有一列占位，用于展示【总计】这个文案，默认使用复选框
+    const footerData = cloneDeep(props?.footerData ?? [])
+    return footerData.map((item) => ({
+      ...item,
+      BaseTablePlaceholder: '总计',
+    }))
+  }
+  return []
+}
+
+const footerRenderData = computed(() => handleFooterData())
+
+/**
+ * 获取当前选中的复选框数据
+ * @returns {Array} 选中的行数据数组
+ */
+function getCheckboxRecords() {
+  const $grid = basetable.value
+  if ($grid) {
+    return $grid.getCheckboxRecords()
+  }
+  return []
+}
+
+/**
+ * 获取当前选中的单选框数据
+ * @returns {object | null} 选中的行数据对象，如果没有选中则返回 null
+ */
+function getRadioRecord() {
+  const $grid = basetable.value
+  if ($grid) {
+    const records = $grid.getRadioRecord()
+    return records ?? null
+  }
+  return null
+}
+
+/**
+ * 获取当前选中的数据（兼容复选框和单选框）
+ * @returns {Array | object | null}
+ * - 复选框模式：返回选中的行数据数组
+ * - 单选框模式：返回选中的行数据对象，如果没有选中则返回 null
+ */
+function getSelectedRecords() {
+  if (props.radio) {
+    return getRadioRecord()
+  }
+  if (props.checkbox) {
+    return getCheckboxRecords()
+  }
+  return null
+}
+
+/**
+ * 获取表格实例
+ */
+function getGrid(): unknown {
+  return basetable.value
+}
+
+/**
+ * 递归查找列配置
+ * @param columns 列数组
+ * @param field 目标字段名
+ * @returns 找到的列配置或 undefined
+ */
+function findColumnByField(columns: Column[], field: string): Column | undefined {
+  for (const col of columns) {
+    if (col.field === field) {
+      return col
+    }
+    if (col.children && col.children.length > 0) {
+      const found = findColumnByField(col.children, field)
+      return found
+    }
+  }
+  return undefined
+}
+
+/**
+ * 处理单元格点击事件
+ * @param {object} params - 事件参数对象
+ * @param {object} params.row - 当前点击的行
+ * @param {string} params.column - 当前点击的列
+ */
+function handleCellClick({ row, column }: { row: any; column: any }) {
+  // 当用户进行文本选择时，不触发点击事件
+  const selection = window.getSelection()
+  if (selection && selection.toString().length > 0) return
+
+  if (column?.className?.includes('cell-events')) {
+    const findColumn = findColumnByField(options.value.columns, column.field)
+    ;(findColumn as any)?.event?.(row, column)
+  }
+}
+
+// Expose
+defineExpose({
+  grid: basetable,
+  getAllToolBarValues: () => ({
+    lToolBar: lToolBarState.getAllValues(),
+    rToolBar: rToolBarState.getAllValues(),
+  }),
+  getLToolBarValues: () => lToolBarState.getAllValues(),
+  getRToolBarValues: () => rToolBarState.getAllValues(),
+  goToPage,
+  resetPageNumber,
+  getGrid,
+  lToolBarState,
+  rToolBarState,
+  getSelectedRecords,
+})
+</script>
+
+<template>
+  <vxe-grid
+    ref="basetable"
+    v-bind="options"
+    :footer-data="footerRenderData"
+    :style="{
+      '--vxe-ui-table-row-hover-background-color': hoverColor,
+      '--vxe-ui-table-column-hover-background-color': hoverColor,
+      '--vxe-ui-table-row-hover-striped-background-color': hoverColor,
+    }"
+    @sort-change="(params) => emit('sortChange', params)"
+    @cell-click="handleCellClick"
+    @checkbox-all="selectAllChangeEvent"
+    @checkbox-change="selectChangeEvent"
+    @radio-change="radioChangeEvent"
+  >
+    <!-- 顶部左侧工具栏配置 -->
+    <template #lToolBar>
+      <div v-if="lToolBarItems.length > 0" class="base-table-toolbar-container">
+        <component :is="item" v-for="item in lToolBarItems" :key="item.key" />
+      </div>
+    </template>
+    <!-- 顶部右侧工具栏配置 -->
+    <template #rToolBar>
+      <div v-if="rToolBarItems.length > 0" class="base-table-toolbar-container">
+        <component :is="item" v-for="item in rToolBarItems" :key="item.key" />
+      </div>
+    </template>
+    <!-- 通用表头提示插槽 -->
+    <template #headerHelp="{ column }">
+      <span>{{ column.title }}</span>
+      <Tooltip v-if="column.params?.helpText" :title="column.params.helpText">
+        <QuestionCircleOutlined class="base-table-header-help-icon" />
+      </Tooltip>
+    </template>
+    <template #buttons="{ row }">
+      <div class="base-table-buttons-container">
+        <template v-for="(button, index) in getVisibleButtons(row)" :key="button.name">
+          <AButton
+            v-if="index < 2 || getVisibleButtons(row).length <= 3"
+            type="link"
+            size="small"
+            :disabled="button.disabled?.(row, basetable)"
+            :loading="isButtonLoading(row, button)"
+            v-bind="button.props"
+            @click.stop="handleRowButtonClick(button, row)"
+          >
+            {{ typeof button.name === 'function' ? button.name(row) : button.name }}
+          </AButton>
+        </template>
+        <Popover v-if="getVisibleButtons(row).length > 3" placement="bottomRight" :zIndex="900">
+          <template #content>
+            <template v-for="button in getVisibleButtons(row).slice(2)" :key="button.name">
+              <AButton
+                style="display: block"
+                type="link"
+                size="small"
+                :disabled="button.disabled?.(row, basetable)"
+                :loading="isButtonLoading(row, button)"
+                v-bind="button.props"
+                @click.stop="handleRowButtonClick(button, row)"
+              >
+                {{ typeof button.name === 'function' ? button.name(row) : button.name }}
+              </AButton>
+            </template>
+          </template>
+          <AButton type="link" size="small"> 更多 </AButton>
+        </Popover>
+      </div>
+    </template>
+    <!-- 分页器 -->
+    <template v-if="pager" #pager>
+      <div class="base-table-pager">
+        <Pagination
+          ref="paginationRef"
+          size="small"
+          :total="total"
+          :current="paginationCurrent"
+          :page-size="paginationPageSize"
+          show-size-changer
+          show-quick-jumper
+          @change="onChange"
+          @show-size-change="onShowSizeChange"
+        />
+        <p class="base-table-pager-total">总计 {{ total }} 条数据</p>
+      </div>
+    </template>
+    <!-- 透传所有其他插槽到vxe-grid -->
+    <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+      <template v-if="!['lToolBar', 'rToolBar', 'buttons', 'pager'].includes(String(slotName))">
+        <slot :name="String(slotName)" v-bind="slotProps" />
+      </template>
+    </template>
+  </vxe-grid>
+</template>
+
+<style lang="scss" scoped>
+.base-table-header-help-icon {
+  margin-left: 4px;
+  color: #999;
+  cursor: help;
+}
+
+:global(.base-table-toolbar) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+:global(.base-table-toolbar .base-table-toolbar-container) {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+:global(.base-table-toolbar .vxe-tools--operate) {
+  margin-bottom: 12px;
+}
+
+:global(.base-table-toolbar .vxe-button--dropdown.size--mini),
+:global(.base-table-toolbar .vxe-button.type--button.size--mini) {
+  margin: 0 0 0 12px;
+}
+
+.base-table-buttons-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .ant-btn {
+    padding: 0;
+    font-size: 12px;
+  }
+}
+
+:deep(.ant-popover) {
+  padding-top: 0;
+}
+
+:deep(.ant-popover-inner) {
+  padding: 0 !important;
+}
+
+:deep(.base-columns-cell) {
+  .vxe-cell {
+    padding: 8px 12px !important;
+  }
+}
+
+:deep(.base-table-footer-cell) {
+  .vxe-cell {
+    height: 40px !important;
+    padding: 8px 12px !important;
+  }
+}
+
+.base-table-pager {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  height: fit-content;
+  min-height: 36px;
+
+  :deep(.ant-pagination-options) {
+    .ant-select {
+      width: 100px;
+    }
+  }
+
+  .base-table-pager-total {
+    color: #262626;
+    line-height: 24px;
+  }
+}
+
+:deep(.cell-events) {
+  color: #1288fc;
+  cursor: pointer;
+}
+</style>