feat: 优化 GiTable（同步 GiDemo 更新）

2025-09-09 20:57:17 +08:00 · 2025-03-18 21:34:58 +08:00
parent 348c497876
commit eaabe47546
23 changed files with 199 additions and 125 deletions
--- a/src/components/GiTable/index.ts
+++ b/src/components/GiTable/index.ts
@@ -0,0 +1,4 @@
+import GiTable from './src/GiTable.vue'
+
+export { GiTable }
+export default GiTable
--- a/src/components/GiTable/src/GiTable.vue
+++ b/src/components/GiTable/src/GiTable.vue
@@ -17,18 +17,18 @@
      <a-space wrap class="gi-table__toolbar-right" :size="[8, 8]">
        <slot name="toolbar-right"></slot>
        <a-tooltip content="刷新">
-          <a-button v-if="showRefreshBtn" @click="refresh">
+          <a-button v-if="showRefreshBtn" @click="handleRefresh">
            <template #icon><icon-refresh /></template>
          </a-button>
        </a-tooltip>
-        <a-dropdown v-if="showSizeBtn" @select="handleSelect">
+        <a-dropdown v-if="showSizeBtn" @select="handleSizeChange">
          <a-tooltip content="尺寸">
            <a-button>
              <template #icon><icon-table-size style="width: 14px; height: 14px" /></template>
            </a-button>
          </a-tooltip>
          <template #content>
-            <a-doption v-for="item in sizeList" :key="item.value" :value="item.value" :active="item.value === size">
+            <a-doption v-for="item in TABLE_SIZE_OPTIONS" :key="item.value" :value="item.value" :active="item.value === size">
              {{ item.label }}
            </a-doption>
          </template>
@@ -63,7 +63,7 @@
          </template>
        </a-popover>
        <a-tooltip content="全屏">
-          <a-button v-if="showFullscreenBtn" @click="isFullscreen = !isFullscreen">
+          <a-button v-if="showFullscreenBtn" @click="toggleFullscreen">
            <template #icon>
              <icon-fullscreen v-if="!isFullscreen" />
              <icon-fullscreen-exit v-else />
@@ -75,20 +75,21 @@
    <a-row class="gi-table__toolbar-bottom">
      <slot name="toolbar-bottom"></slot>
    </a-row>
-    <div class="gi-table__body" :class="`gi-table__body-pagination-${attrs['page-position']}`">
+    <div class="gi-table__body" :class="`gi-table__body-pagination-${tableProps['page-position']}`">
      <div class="gi-table__container">
        <a-table
          ref="tableRef"
+          v-bind="tableProps"
          :stripe="stripe"
          :size="size"
-          column-resizable
          :bordered="{ cell: isBordered }"
-          v-bind="{ ...attrs, columns: _columns }"
+          :columns="visibleColumns"
          :scrollbar="true"
          :data="data"
+          column-resizable
        >
-          <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
-            <slot :key="key" :name="key" v-bind="scoped"></slot>
+          <template v-for="key in Object.keys(slots)" :key="key" #[key]="scope">
+            <slot :key="key" :name="key" v-bind="scope" />
          </template>
        </a-table>
      </div>
@@ -97,21 +98,27 @@
 </template>

 <script setup lang="ts" generic="T extends TableData">
+import { computed, ref, watch } from 'vue'
 import type { DropdownInstance, TableColumnData, TableData, TableInstance } from '@arco-design/web-vue'
 import { VueDraggable } from 'vue-draggable-plus'
+import { omit } from 'lodash-es'
+import type { TableProps } from './type'

-defineOptions({ name: 'GiTable', inheritAttrs: false })
+defineOptions({ name: 'GiTable' })
+
+// Props 默认值
 const props = withDefaults(defineProps<Props>(), {
  title: '',
+  disabledColumnKeys: () => [],
  data: () => [],
-  disabledTools: () => [], // 禁止显示的工具
-  disabledColumnKeys: () => [], // 禁止控制显示隐藏的列
 })

+/** Emits 类型定义 */
 const emit = defineEmits<{
  (e: 'refresh'): void
 }>()

+/** Slots 类型定义 */
 defineSlots<{
  'th': (props: { column: TableColumnData }) => void
  'thead': () => void
@@ -135,98 +142,127 @@ defineSlots<{
  [propsName: string]: (props: { key: string, record: T, column: TableColumnData, rowIndex: number }) => void
 }>()

-const attrs = useAttrs()
-const slots = useSlots()
-
-interface Props {
+/** Props 类型定义 */
+interface Props extends TableProps {
+  /** 表格标题 */
  title?: string
-  data: T[]
-  disabledTools?: string[]
+  /** 禁止控制显示隐藏的列 */
  disabledColumnKeys?: string[]
+  /** 禁止显示的工具 */
+  disabledTools?: string[]
+  /** 表格数据 */
+  data: T[]
 }

-const tableRef = ref<TableInstance | null>(null)
+const slots = useSlots()
+
+/** 表格属性计算 */
+const tableProps = computed(() => omit(props, ['title', 'disabledColumnKeys']))
+
+/** 组件状态 */
+const tableRef = useTemplateRef('tableRef')
 const stripe = ref(false)
-const size = ref<TableInstance['size']>('medium')
+const size = ref<TableInstance['size']>('large')
 const isBordered = ref(false)
 const isFullscreen = ref(false)

-interface SizeItem { label: string, value: TableInstance['size'] }
-const sizeList: SizeItem[] = [
-  { label: '紧凑', value: 'small' },
-  { label: '默认', value: 'medium' },
-]
+/** 表格尺寸选项 */
+const TABLE_SIZE_OPTIONS = [
+  { label: '迷你', value: 'mini' },
+  { label: '小型', value: 'small' },
+  { label: '中等', value: 'medium' },
+  { label: '大型', value: 'large' },
+] as const

-const handleSelect: DropdownInstance['onSelect'] = (value) => {
+/** 处理表格尺寸变更 */
+const handleSizeChange: DropdownInstance['onSelect'] = (value) => {
+  if (value) {
    size.value = value as TableInstance['size']
  }
+}

-const refresh = () => {
+/** 处理表格刷新 */
+const handleRefresh = () => {
  emit('refresh')
 }

-const showRefreshBtn = computed(() => !props.disabledTools.includes('refresh'))
-const showSizeBtn = computed(() => !props.disabledTools.includes('size'))
-const showFullscreenBtn = computed(() => !props.disabledTools.includes('fullscreen'))
-const showSettingColumnBtn = computed(
-  () => !props.disabledTools.includes('setting') && attrs?.columns && (attrs?.columns as TableColumnData[])?.length,
-)
-interface SettingColumnItem { title: string, key: string, show: boolean, disabled: boolean }
+/** 切换全屏状态 */
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value
+}
+
+const showRefreshBtn = computed(() => !props.disabledTools?.includes('refresh'))
+const showSizeBtn = computed(() => !props.disabledTools?.includes('size'))
+const showFullscreenBtn = computed(() => !props.disabledTools?.includes('fullscreen'))
+/** 列设置相关逻辑 */
+const showSettingColumnBtn = computed(() => {
+  const columns = props.columns as TableColumnData[] | undefined
+  return Boolean(columns?.length)
+})
+
+/** 列设置项类型 */
+interface SettingColumnItem {
+  /** 列标题 */
+  title: string
+  /** 列标识 */
+  key: string
+  /** 是否显示 */
+  show: boolean
+  /** 是否禁用 */
+  disabled: boolean
+}
+
 const settingColumnList = ref<SettingColumnItem[]>([])

-// 重置配置列
+/** 重置列设置 */
 const resetSettingColumns = () => {
+  if (!props.columns) {
    settingColumnList.value = []
-  if (attrs.columns) {
-    const arr = attrs.columns as TableColumnData[]
-    arr.forEach((item) => {
-      settingColumnList.value.push({
-        key: item.dataIndex || (typeof item.title === 'string' ? item.title : ''),
-        title: typeof item.title === 'string' ? item.title : '',
-        show: item.show ?? true,
-        disabled: props.disabledColumnKeys.includes(
-          item.dataIndex || (typeof item.title === 'string' ? item.title : ''),
-        ),
-      })
-    })
-  }
+    return
  }

+  const columns = props.columns as TableColumnData[]
+  settingColumnList.value = columns.map((column) => {
+    const key = column.dataIndex || (typeof column.title === 'string' ? column.title : '')
+    return {
+      key,
+      title: typeof column.title === 'string' ? column.title : '',
+      show: column.show ?? true,
+      disabled: props.disabledColumnKeys.includes(key),
+    }
+  })
+}
+
+/** 监听属性变化，重置列设置 */
 watch(
-  () => attrs,
-  () => {
-    resetSettingColumns()
-  },
+  () => props.columns,
+  () => resetSettingColumns(),
  { immediate: true },
 )

-// 排序和过滤可显示的列数据
-const _columns = computed(() => {
-  if (!attrs.columns) return []
-  const arr = attrs.columns as TableColumnData[]
-  // 显示的dataIndex
-  const showDataIndexs = settingColumnList.value
-    .filter((i) => i.show)
-    .map((i) => i.key || (typeof i.title === 'string' ? i.title : ''))
-  // 显示的columns数据
-  const filterColumns = arr.filter((i) =>
-    showDataIndexs.includes(i.dataIndex || (typeof i.title === 'string' ? i.title : '')),
+/** 计算显示的列 */
+const visibleColumns = computed(() => {
+  if (!props.columns) return []
+
+  const columns = props.columns as TableColumnData[]
+  const columnMap = new Map(
+    columns.map((col) => [
+      col.dataIndex || (typeof col.title === 'string' ? col.title : ''),
+      col,
+    ]),
  )
-  const sortedColumns: TableColumnData[] = []
-  settingColumnList.value.forEach((i) => {
-    filterColumns.forEach((j) => {
-      if (i.key === (j.dataIndex || j.title)) {
-        sortedColumns.push(j)
-      }
-    })
-  })
-  return sortedColumns
+
+  // 按照设置列表的顺序返回可见列
+  return settingColumnList.value
+    .filter((item) => item.show)
+    .map((item) => columnMap.get(item.key))
+    .filter(Boolean) as TableColumnData[]
 })

 defineExpose({ tableRef })
 </script>

-<style scoped lang="scss">
+<style lang="scss" scoped>
 .gi-table {
  flex: 1;
  display: flex;
--- a/src/components/GiTable/src/type.ts
+++ b/src/components/GiTable/src/type.ts
@@ -0,0 +1,41 @@
+import type { TableInstance } from '@arco-design/web-vue'
+
+export interface TableProps {
+  columns?: TableInstance['$props']['columns']
+  data?: TableInstance['$props']['data']
+  bordered?: TableInstance['$props']['bordered']
+  hoverable?: TableInstance['$props']['hoverable']
+  stripe?: TableInstance['$props']['stripe']
+  size?: TableInstance['$props']['size']
+  tableLayoutFixed?: TableInstance['$props']['tableLayoutFixed']
+  loading?: TableInstance['$props']['loading']
+  rowSelection?: TableInstance['$props']['rowSelection']
+  expandable?: TableInstance['$props']['expandable']
+  scroll?: TableInstance['$props']['scroll']
+  pagination?: TableInstance['$props']['pagination']
+  pagePosition?: TableInstance['$props']['pagePosition']
+  indentSize?: TableInstance['$props']['indentSize']
+  rowKey?: TableInstance['$props']['rowKey']
+  showHeader?: TableInstance['$props']['showHeader']
+  virtualListProps?: TableInstance['$props']['virtualListProps']
+  spanMethod?: TableInstance['$props']['spanMethod']
+  spanAll?: TableInstance['$props']['spanAll']
+  loadMore?: TableInstance['$props']['loadMore']
+  filterIconAlignLeft?: TableInstance['$props']['filterIconAlignLeft']
+  hideExpandButtonOnEmpty?: TableInstance['$props']['hideExpandButtonOnEmpty']
+  rowClass?: TableInstance['$props']['rowClass']
+  draggable?: TableInstance['$props']['draggable']
+  rowNumber?: TableInstance['$props']['rowNumber']
+  columnResizable?: TableInstance['$props']['columnResizable']
+  summary?: TableInstance['$props']['summary']
+  summaryText?: TableInstance['$props']['summaryText']
+  summarySpanMethod?: TableInstance['$props']['summarySpanMethod']
+  selectedKeys?: TableInstance['$props']['selectedKeys']
+  defaultSelectedKeys?: TableInstance['$props']['defaultSelectedKeys']
+  expandedKeys?: TableInstance['$props']['expandedKeys']
+  defaultExpandedKeys?: TableInstance['$props']['defaultExpandedKeys']
+  defaultExpandAllRows?: TableInstance['$props']['defaultExpandAllRows']
+  stickyHeader?: TableInstance['$props']['stickyHeader']
+  scrollbar?: TableInstance['$props']['scrollbar']
+  showEmptyTree?: TableInstance['$props']['showEmptyTree']
+}
--- a/src/components/GiTable/type.ts
+++ b/src/components/GiTable/type.ts
@@ -1,5 +0,0 @@
-import type { TableColumnData } from '@arco-design/web-vue'
-
-export interface TableInstanceColumns extends TableColumnData {
-  show?: boolean
-}
--- a/src/components/UserSelect/index.vue
+++ b/src/components/UserSelect/index.vue
@@ -75,9 +75,9 @@
 </template>

 <script setup lang="ts">
-import type { TreeNodeData } from '@arco-design/web-vue'
+import type { TableInstance, TreeNodeData } from '@arco-design/web-vue'
+
 import { type UserQuery, type UserResp, listAllUser, listUser } from '@/apis'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { type Options, useTable } from '@/hooks'
 import { useDept } from '@/hooks/app'
 import { isMobile } from '@/utils'
@@ -110,7 +110,7 @@ const { tableData: dataList, loading, pagination, search } = useTable(
 )

 // 表格列定义
-const listColumns: TableInstanceColumns[] = [
+const listColumns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -38,7 +38,7 @@ declare module 'vue' {
    GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
    GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
    GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
-    GiTable: typeof import('./../components/GiTable/index.vue')['default']
+    GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
    GiTag: typeof import('./../components/GiTag/index.tsx')['default']
    GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
    HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
--- a/src/views/code/generator/GenConfigDrawer.vue
+++ b/src/views/code/generator/GenConfigDrawer.vue
@@ -123,7 +123,6 @@ import { Message } from '@arco-design/web-vue'
 import { useWindowSize } from '@vueuse/core'
 import { type FieldConfigResp, type GeneratorConfigResp, getGenConfig, listFieldConfig, listFieldConfigDict, saveGenConfig } from '@/apis/code/generator'
 import type { LabelValueState } from '@/types/global'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { type ColumnItem, GiForm } from '@/components/GiForm'
 import { useResetReactive } from '@/hooks'
 import { useDict } from '@/hooks/app'
@@ -222,7 +221,7 @@ const getDataList = async (tableName: string, requireSync: boolean) => {
 }

 // Table 字段配置
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  { title: '名称', slotName: 'fieldName' },
  { title: '类型', slotName: 'fieldType' },
  { title: '描述', slotName: 'comment', width: 170 },
--- a/src/views/code/generator/index.vue
+++ b/src/views/code/generator/index.vue
@@ -61,10 +61,10 @@
 </template>

 <script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
 import { Message } from '@arco-design/web-vue'
 import GenConfigDrawer from './GenConfigDrawer.vue'
 import { downloadCode, generateCode, listGenConfig } from '@/apis/code/generator'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { isMobile } from '@/utils'

@@ -84,7 +84,7 @@ const {
  selectAll,
  search,
 } = useTable((page) => listGenConfig({ ...queryForm, ...page }), { immediate: true, formatResult: (data) => data.map((i) => ({ ...i, disabled: !i.createTime })) })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/monitor/log/login/index.vue
+++ b/src/views/monitor/log/login/index.vue
@@ -46,8 +46,8 @@

 <script setup lang="ts">
 import dayjs from 'dayjs'
+import type { TableInstance } from '@arco-design/web-vue'
 import { type LogQuery, exportLoginLog, listLog } from '@/apis/monitor'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import DateRangePicker from '@/components/DateRangePicker/index.vue'
 import { useDownload, useTable } from '@/hooks'

@@ -69,7 +69,7 @@ const {
  search,
 } = useTable((page) => listLog({ ...queryForm, ...page }), { immediate: true })

-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/monitor/log/operation/index.vue
+++ b/src/views/monitor/log/operation/index.vue
@@ -57,9 +57,9 @@

 <script setup lang="ts">
 import dayjs from 'dayjs'
+import type { TableInstance } from '@arco-design/web-vue'
 import OperationLogDetailDrawer from './OperationLogDetailDrawer.vue'
 import { type LogQuery, type LogResp, exportOperationLog, listLog } from '@/apis/monitor'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import DateRangePicker from '@/components/DateRangePicker/index.vue'
 import { useDownload, useTable } from '@/hooks'
 import has from '@/utils/has'
@@ -80,7 +80,7 @@ const {
  pagination,
  search,
 } = useTable((page) => listLog({ ...queryForm, ...page }), { immediate: true })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -44,9 +44,9 @@
 </template>

 <script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
 import { Message } from '@arco-design/web-vue'
 import { type OnlineUserQuery, kickout, listOnlineUser } from '@/apis/monitor'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import DateRangePicker from '@/components/DateRangePicker/index.vue'
 import { useUserStore } from '@/stores'
 import { useTable } from '@/hooks'
@@ -68,7 +68,7 @@ const {
  pagination,
  search,
 } = useTable((page) => listOnlineUser({ ...queryForm, ...page }), { immediate: true })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/open/app/index.vue
+++ b/src/views/open/app/index.vue
@@ -86,6 +86,7 @@
 </template>

 <script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import AppAddModal from './AppAddModal.vue'
 import AppDetailDrawer from './AppDetailDrawer.vue'
@@ -98,7 +99,6 @@ import {
  listApp,
  resetAppSecret,
 } from '@/apis/open/app'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useDownload, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
@@ -116,7 +116,7 @@ const {
  search,
  handleDelete,
 } = useTable((page) => listApp({ ...queryForm, ...page }), { immediate: true })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/schedule/job/index.vue
+++ b/src/views/schedule/job/index.vue
@@ -79,12 +79,12 @@
 </template>

 <script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
 import { Message } from '@arco-design/web-vue'
 import { useRouter } from 'vue-router'
 import JobAddModal from './JobAddModal.vue'
 import JobDetailDrawer from './JobDetailDrawer.vue'
 import { type JobQuery, type JobResp, deleteJob, listGroup, listJob, triggerJob, updateJobStatus } from '@/apis/schedule'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'
 import { isMobile, parseCron } from '@/utils'
@@ -105,7 +105,7 @@ const {
  search,
  handleDelete,
 } = useTable((page) => listJob({ ...queryForm, ...page }), { immediate: false })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/schedule/log/index.vue
+++ b/src/views/schedule/log/index.vue
@@ -65,12 +65,12 @@
 </template>

 <script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
 import { Message } from '@arco-design/web-vue'
 import { useRoute } from 'vue-router'
 import dayjs from 'dayjs'
 import LogDetailDrawer from './LogDetailDrawer.vue'
 import { type JobLogQuery, type JobLogResp, listGroup, listJobLog, retryJob, stopJob } from '@/apis/schedule'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'
 import { isMobile } from '@/utils'
@@ -93,7 +93,7 @@ const {
  loading,
  search,
 } = useTable((page) => listJobLog({ ...queryForm, ...page }), { immediate: false })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/setting/message/index.vue
+++ b/src/views/setting/message/index.vue
@@ -63,9 +63,9 @@
 </template>

 <script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import { type MessageQuery, deleteMessage, listMessage, readMessage } from '@/apis'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'

@@ -88,7 +88,7 @@ const {
  handleDelete,
 } = useTable((page) => listMessage({ ...queryForm, ...page }), { immediate: true })

-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/system/client/index.vue
+++ b/src/views/system/client/index.vue
@@ -63,10 +63,10 @@

 <script setup lang="tsx">
 import type { LabelValue } from '@arco-design/web-vue/es/tree-select/interface'
+import type { TableInstance } from '@arco-design/web-vue'
 import ClientAddModal from './ClientAddModal.vue'
 import ClientDetailDrawer from './ClientDetailDrawer.vue'
 import { type ClientQuery, type ClientResp, deleteClient, listClient } from '@/apis/system/client'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { DisEnableStatusList } from '@/constant/common'
 import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'
@@ -105,7 +105,7 @@ const {
  search,
  handleDelete,
 } = useTable((page) => listClient({ ...queryForm, ...page }), { immediate: true })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -95,9 +95,9 @@
 <script setup lang="ts">
 import 'vue3-tree-org/lib/vue3-tree-org.css'
 import { Vue3TreeOrg } from 'vue3-tree-org'
+import type { TableInstance } from '@arco-design/web-vue'
 import DeptAddModal from './DeptAddModal.vue'
 import { type DeptQuery, type DeptResp, deleteDept, exportDept, listDept } from '@/apis/system/dept'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import type GiTable from '@/components/GiTable/index.vue'
 import { useDownload, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
@@ -158,7 +158,7 @@ const dataList = computed(() => {
  return searchData(name.value)
 })

-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  { title: '名称', dataIndex: 'name', minWidth: 170, ellipsis: true, tooltip: true },
  { title: '状态', dataIndex: 'status', slotName: 'status', align: 'center' },
  { title: '排序', dataIndex: 'sort', align: 'center', show: false },
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -65,11 +65,11 @@
 </template>

 <script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import DictTree from './tree/index.vue'
 import DictItemAddModal from './DictItemAddModal.vue'
 import { type DictItemQuery, type DictItemResp, clearDictCache, deleteDictItem, listDictItem } from '@/apis/system/dict'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
@@ -88,7 +88,7 @@ const {
  search,
  handleDelete,
 } = useTable((page) => listDictItem({ ...queryForm, ...page }), { immediate: false })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -90,10 +90,10 @@
 </template>

 <script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import MenuAddModal from './MenuAddModal.vue'
 import { type MenuQuery, type MenuResp, clearMenuCache, deleteMenu, listMenu } from '@/apis/system/menu'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import type GiTable from '@/components/GiTable/index.vue'
 import { useTable } from '@/hooks'
 import { isMobile } from '@/utils'
@@ -138,7 +138,7 @@ const dataList = computed(() => {
  return searchData(title.value)
 })

-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  { title: '菜单标题', dataIndex: 'title', slotName: 'title', width: 170, fixed: !isMobile() ? 'left' : undefined },
  { title: '类型', dataIndex: 'type', slotName: 'type', align: 'center' },
  { title: '状态', dataIndex: 'status', slotName: 'status', align: 'center' },
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -51,8 +51,8 @@
 </template>

 <script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
 import { type NoticeQuery, type NoticeResp, deleteNotice, listNotice } from '@/apis/system'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'
 import { isMobile } from '@/utils'
@@ -74,7 +74,7 @@ const {
  search,
  handleDelete,
 } = useTable((page) => listNotice({ ...queryForm, ...page }), { immediate: true })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/system/role/components/Permission.vue
+++ b/src/views/system/role/components/Permission.vue
@@ -58,7 +58,6 @@
 import { nextTick, ref } from 'vue'
 import { Message, type TableInstance } from '@arco-design/web-vue'
 import { type MenuResp, listMenu } from '@/apis/system/menu'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { isMobile } from '@/utils'
 import type GiTable from '@/components/GiTable/index.vue'
 import { useTable } from '@/hooks'
@@ -166,7 +165,7 @@ const {
  },
 })

-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  { title: '菜单', dataIndex: 'title', slotName: 'title', width: 170, fixed: !isMobile() ? 'left' : undefined },
  { title: '权限', dataIndex: 'permissions', slotName: 'permissions' },
 ]
--- a/src/views/system/role/components/RoleUser.vue
+++ b/src/views/system/role/components/RoleUser.vue
@@ -61,11 +61,11 @@
 </template>

 <script lang='tsx' setup>
+import type { TableInstance } from '@arco-design/web-vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import RoleAssignModal from '../RoleAssignModal.vue'
 import { useResetReactive, useTable } from '@/hooks'
 import { type RoleUserQuery, type RoleUserResp, listRoleUser, unassignFromUsers } from '@/apis/system/role'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'

@@ -90,7 +90,7 @@ const {
  selectAll,
  handleDelete,
 } = useTable((page) => listRoleUser(props.roleId, { ...queryForm, ...page }), { immediate: false })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -90,6 +90,7 @@
 </template>

 <script setup lang="ts">
+import type { TableInstance } from '@arco-design/web-vue'
 import DeptTree from './dept/index.vue'
 import UserAddDrawer from './UserAddDrawer.vue'
 import UserImportDrawer from './UserImportDrawer.vue'
@@ -97,7 +98,6 @@ import UserDetailDrawer from './UserDetailDrawer.vue'
 import UserResetPwdModal from './UserResetPwdModal.vue'
 import UserUpdateRoleModal from './UserUpdateRoleModal.vue'
 import { type UserResp, deleteUser, exportUser, listUser } from '@/apis/system/user'
-import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { DisEnableStatusList } from '@/constant/common'
 import { useDownload, useResetReactive, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
@@ -150,7 +150,7 @@ const {
  search,
  handleDelete,
 } = useTable((page) => listUser({ ...queryForm, ...page }), { immediate: false })
-const columns: TableInstanceColumns[] = [
+const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 66,