@antsoo-lib/core 0.0.0 → 1.0.0

package/src/BaseTable/index.vue

@@ -0,0 +1,881 @@
+<script lang="ts" setup>
+import { 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 { env, generateUniqueId, isNaN } from '@antsoo-lib/utils'
+import { cloneDeep } from 'lodash-es'
+import type { VxeComponentSizeType } from 'vxe-pc-ui'
+import type { VxeGridPropTypes, VxeGridProps } from 'vxe-table'
+
+import { computed, ref } from 'vue'
+
+import { renderToolbar, useToolbarState } from './utils'
+import type { ToolbarConfig } from './utils'
+
+// 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,
+})
+// 抛出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
+}>()
+const { isDev, isTest } = 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 }>
+}
+
+// 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 || []
+  // Decoupled: Use props.permissions
+  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, currentPageSize.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): any => {
+    const { buttons, ...col } = column
+    // 选择器居中时，若启用了溢出选项，会引起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 = {
+      width: 'auto',
+      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)
+
+    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
+}
+
+/**
+ * 递归查找列配置
+ * @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,
+  lToolBarState,
+  rToolBarState,
+  getSelectedRecords,
+})
+</script>
+
+<template>
+  <vxe-grid
+    ref="basetable"
+    v-bind="options"
+    :footer-data="footerRenderData"
+    :style="{
+      '--vxe-ui-table-row-hover-background-color': '#E3FCF7',
+      '--vxe-ui-table-column-hover-background-color': '#E3FCF7',
+      '--vxe-ui-table-row-hover-striped-background-color': '#E3FCF7',
+    }"
+    @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="handleRowButtonClick(button, row)"
+          >
+            {{ typeof button.name === 'function' ? button.name(row) : button.name }}
+          </AButton>
+        </template>
+        <APopover 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="handleRowButtonClick(button, row)"
+              >
+                {{ typeof button.name === 'function' ? button.name(row) : button.name }}
+              </AButton>
+            </template>
+          </template>
+          <AButton type="link" size="small"> 更多 </AButton>
+        </APopover>
+      </div>
+    </template>
+    <!-- 分页器 -->
+    <template v-if="pager" #pager>
+      <div class="base-table-pager">
+        <APagination
+          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;
+}
+
+:deep(.base-table-toolbar) {
+  padding-top: 0;
+  padding-bottom: 0;
+
+  .base-table-toolbar-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+
+  .vxe-tools--operate {
+    margin-bottom: 12px;
+  }
+
+  .vxe-button--dropdown.size--mini,
+  .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;
+}
+
+/* 斑马纹行悬浮背景颜色 */
+:deep(.vxe-table--body .vxe-body--row.row--stripe.row--hover) {
+  background-color: red !important;
+}
+</style>