feat

src/components/data-table/index.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="data-table">
+    <!-- 工具栏 -->
+    <a-row v-if="showToolbar" style="margin-bottom: 16px">
+      <a-col :span="12">
+        <a-space>
+          <slot name="toolbar-left" />
+        </a-space>
+      </a-col>
+      <a-col :span="12" style="display: flex; align-items: center; justify-content: end">
+        <slot name="toolbar-right" />
+        <a-button v-if="showDownload" @click="handleDownload">
+          <template #icon>
+            <icon-download />
+          </template>
+          {{ downloadButtonText }}
+        </a-button>
+        <a-tooltip v-if="showRefresh" :content="refreshTooltipText">
+          <div class="action-icon" @click="handleRefresh"><icon-refresh size="18" /></div>
+        </a-tooltip>
+        <a-dropdown v-if="showDensity" @select="handleSelectDensity">
+          <a-tooltip :content="densityTooltipText">
+            <div class="action-icon"><icon-line-height size="18" /></div>
+          </a-tooltip>
+          <template #content>
+            <a-doption v-for="item in densityList" :key="item.value" :value="item.value" :class="{ active: item.value === size }">
+              <span>{{ item.name }}</span>
+            </a-doption>
+          </template>
+        </a-dropdown>
+        <a-tooltip v-if="showColumnSetting" :content="columnSettingTooltipText">
+          <a-popover trigger="click" position="bl" @popup-visible-change="popupVisibleChange">
+            <div class="action-icon"><icon-settings size="18" /></div>
+            <template #content>
+              <div ref="columnSettingRef" class="column-setting-container">
+                <div v-for="(item, idx) in showColumns" :key="item.dataIndex" class="setting">
+                  <div style="margin-right: 4px; cursor: move">
+                    <icon-drag-arrow />
+                  </div>
+                  <div>
+                    <a-checkbox v-model="item.checked" @change="handleChange($event, item, idx)"></a-checkbox>
+                  </div>
+                  <div class="title">
+                    {{ item.title === '#' ? '序列号' : item.title }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </a-popover>
+        </a-tooltip>
+      </a-col>
+    </a-row>
+
+    <!-- 表格 -->
+    <a-table
+      row-key="id"
+      :loading="loading"
+      :pagination="pagination"
+      :columns="cloneColumns"
+      :data="data"
+      :bordered="bordered"
+      :size="size"
+      @page-change="onPageChange"
+    >
+      <!-- 动态插槽：根据 columns 的 slotName 动态渲染 -->
+      <template v-for="col in slotColumns" :key="col.dataIndex" #[String(col.slotName)]="slotProps">
+        <slot :name="col.slotName" v-bind="slotProps" />
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch, nextTick, onUnmounted, PropType } from 'vue'
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
+import cloneDeep from 'lodash/cloneDeep'
+import Sortable from 'sortablejs'
+
+type SizeProps = 'mini' | 'small' | 'medium' | 'large'
+type Column = TableColumnData & { checked?: boolean }
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+  columns: {
+    type: Array as PropType<TableColumnData[]>,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Object as PropType<{
+      current: number
+      pageSize: number
+      total?: number
+    }>,
+    default: () => ({
+      current: 1,
+      pageSize: 20,
+    }),
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+  showDownload: {
+    type: Boolean,
+    default: true,
+  },
+  showRefresh: {
+    type: Boolean,
+    default: true,
+  },
+  showDensity: {
+    type: Boolean,
+    default: true,
+  },
+  showColumnSetting: {
+    type: Boolean,
+    default: true,
+  },
+  downloadButtonText: {
+    type: String,
+    default: '下载',
+  },
+  refreshTooltipText: {
+    type: String,
+    default: '刷新',
+  },
+  densityTooltipText: {
+    type: String,
+    default: '密度',
+  },
+  columnSettingTooltipText: {
+    type: String,
+    default: '列设置',
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'page-change', current: number): void
+  (e: 'refresh'): void
+  (e: 'download'): void
+  (e: 'density-change', size: SizeProps): void
+  (e: 'column-change', columns: TableColumnData[]): void
+}>()
+
+const size = ref<SizeProps>('medium')
+const cloneColumns = ref<Column[]>([])
+const showColumns = ref<Column[]>([])
+const columnSettingRef = ref<HTMLElement | null>(null)
+
+// Sortable 实例缓存
+let sortableInstance: Sortable | null = null
+
+// 密度列表
+const densityList = [
+  { name: '迷你', value: 'mini' as SizeProps },
+  { name: '偏小', value: 'small' as SizeProps },
+  { name: '中等', value: 'medium' as SizeProps },
+  { name: '偏大', value: 'large' as SizeProps },
+]
+
+// 计算需要插槽的列（只在 columns 变化时重新计算）
+const slotColumns = computed(() => {
+  return props.columns.filter(col => col.slotName)
+})
+
+const onPageChange = (current: number) => {
+  emit('page-change', current)
+}
+
+const handleRefresh = () => {
+  emit('refresh')
+}
+
+const handleDownload = () => {
+  emit('download')
+}
+
+const handleSelectDensity = (val: string | number | Record<string, any> | undefined) => {
+  size.value = val as SizeProps
+  emit('density-change', size.value)
+}
+
+const handleChange = (checked: boolean | (string | boolean | number)[], column: Column, index: number) => {
+  if (!checked) {
+    cloneColumns.value = showColumns.value.filter((item) => item.dataIndex !== column.dataIndex)
+  } else {
+    cloneColumns.value.splice(index, 0, column)
+  }
+  emit('column-change', cloneColumns.value)
+}
+
+const exchangeArray = <T extends Array<any>>(array: T, beforeIdx: number, newIdx: number): T => {
+  if (beforeIdx > -1 && newIdx > -1 && beforeIdx !== newIdx) {
+    const temp = array[beforeIdx]
+    array.splice(beforeIdx, 1)
+    array.splice(newIdx, 0, temp)
+  }
+  return array
+}
+
+const popupVisibleChange = (val: boolean) => {
+  if (val) {
+    nextTick(() => {
+      if (columnSettingRef.value && !sortableInstance) {
+        sortableInstance = new Sortable(columnSettingRef.value, {
+          animation: 150,
+          onEnd(e: any) {
+            const { oldIndex, newIndex } = e
+            if (oldIndex !== undefined && newIndex !== undefined) {
+              exchangeArray(cloneColumns.value, oldIndex, newIndex)
+              exchangeArray(showColumns.value, oldIndex, newIndex)
+              emit('column-change', cloneColumns.value)
+            }
+          },
+        })
+      }
+    })
+  }
+}
+
+// 初始化列配置
+const initColumns = () => {
+  const cols = props.columns.map(item => ({
+    ...item,
+    checked: true,
+  }))
+  cloneColumns.value = cols
+  showColumns.value = cloneDeep(cols)
+}
+
+// 监听列配置变化
+watch(
+  () => props.columns,
+  (val, oldVal) => {
+    if (val !== oldVal || cloneColumns.value.length === 0) {
+      initColumns()
+    }
+  },
+  { immediate: true }
+)
+
+// 组件卸载时销毁 Sortable 实例
+onUnmounted(() => {
+  if (sortableInstance) {
+    sortableInstance.destroy()
+    sortableInstance = null
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DataTable',
+}
+</script>
+
+<style scoped lang="less">
+.data-table {
+  :deep(.arco-table-th) {
+    &:last-child {
+      .arco-table-th-item-title {
+        margin-left: 16px;
+      }
+    }
+  }
+}
+.action-icon {
+  margin-left: 12px;
+  cursor: pointer;
+}
+.active {
+  color: #0960bd;
+  background-color: #e3f4fc;
+}
+.column-setting-container {
+  max-height: 300px;
+  overflow-y: auto;
+}
+.setting {
+  display: flex;
+  align-items: center;
+  width: 200px;
+  .title {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+}
+</style>

src/components/index.ts

@@ -5,6 +5,9 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { App } from 'vue'
 import Breadcrumb from './breadcrumb/index.vue'
 import Chart from './chart/index.vue'
+import SearchForm from './search-form/index.vue'
+import DataTable from './data-table/index.vue'
+import SearchTable from './search-table/index.vue'
 
 // Manually introduce ECharts modules to reduce packing size
 
@@ -25,5 +28,8 @@ export default {
   install(Vue: App) {
     Vue.component('Chart', Chart)
     Vue.component('Breadcrumb', Breadcrumb)
+    Vue.component('SearchForm', SearchForm)
+    Vue.component('DataTable', DataTable)
+    Vue.component('SearchTable', SearchTable)
   },
 }

src/components/menu/index.vue

@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
 import type { RouteMeta } from 'vue-router'
 import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
 import useMenuTree from './use-menu-tree'
+import { COMMON_ICONS } from '@/views/ops/pages/system-settings/menu-management/menuIcons'
 
 export default defineComponent({
   emit: ['collapse'],
@@ -85,12 +86,28 @@ export default defineComponent({
       if (appStore.device === 'desktop') appStore.updateSettings({ menuCollapse: val })
     }
 
+    // 获取图标组件 - 支持 Arco Design 图标和 @tabler/icons-vue
+    const getIconComponent = (iconName: string) => {
+      if (!iconName) return null
+      
+      // 检查是否是 Tabler 图标（不以 'icon-' 开头）
+      if (!iconName.startsWith('icon-')) {
+        const IconComponent = COMMON_ICONS[iconName]
+        if (IconComponent) {
+          return () => h(IconComponent, { size: 18 })
+        }
+      }
+      
+      // 回退到 Arco Design 图标
+      return () => h(compile(`<${iconName}/>`))
+    }
+
     const renderSubMenu = () => {
       function travel(_route: RouteRecordRaw[], nodes = []) {
         if (_route) {
           _route.forEach((element) => {
             // This is demo, modify nodes as needed
-            const icon = element?.meta?.icon ? () => h(compile(`<${element?.meta?.icon}/>`)) : null
+            const icon = element?.meta?.icon ? getIconComponent(element?.meta?.icon as string) : null
             const node =
               element?.children && element?.children.length !== 0 ? (
                 <a-sub-menu

src/components/search-form/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <a-row>
+    <a-col :flex="1">
+      <a-form
+        :model="localModel"
+        :label-col-props="{ span: 6 }"
+        :wrapper-col-props="{ span: 18 }"
+        label-align="left"
+      >
+        <a-row :gutter="16">
+          <a-col v-for="item in formItems" :key="item.field" :span="item.span || 8">
+            <a-form-item :field="item.field" :label="item.label">
+              <!-- 输入框 -->
+              <a-input
+                v-if="item.type === 'input'"
+                v-model="localModel[item.field]"
+                :placeholder="item.placeholder"
+                allow-clear
+              />
+              <!-- 选择框 -->
+              <a-select
+                v-else-if="item.type === 'select'"
+                v-model="localModel[item.field]"
+                :options="item.options"
+                :placeholder="item.placeholder || '请选择'"
+                allow-clear
+              />
+              <!-- 日期范围选择器 -->
+              <a-range-picker
+                v-else-if="item.type === 'dateRange'"
+                v-model="localModel[item.field]"
+                style="width: 100%"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-col>
+    <a-divider v-if="showButtons" style="height: 84px" direction="vertical" />
+    <a-col v-if="showButtons" :flex="'86px'" style="text-align: right">
+      <a-space direction="vertical" :size="18">
+        <a-button type="primary" @click="handleSearch">
+          <template #icon>
+            <icon-search />
+          </template>
+          {{ searchButtonText }}
+        </a-button>
+        <a-button @click="handleReset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          {{ resetButtonText }}
+        </a-button>
+      </a-space>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup>
+import { PropType, reactive, watch } from 'vue'
+import type { FormItem } from './types'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+  formItems: {
+    type: Array as PropType<FormItem[]>,
+    default: () => [],
+  },
+  showButtons: {
+    type: Boolean,
+    default: true,
+  },
+  searchButtonText: {
+    type: String,
+    default: '查询',
+  },
+  resetButtonText: {
+    type: String,
+    default: '重置',
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Record<string, any>): void
+  (e: 'search'): void
+  (e: 'reset'): void
+}>()
+
+// 使用本地响应式副本，避免直接修改 props
+const localModel = reactive<Record<string, any>>({})
+
+// 初始化本地模型
+const initLocalModel = () => {
+  Object.keys(localModel).forEach(key => delete localModel[key])
+  Object.assign(localModel, props.modelValue)
+}
+
+// 监听外部值变化
+watch(
+  () => props.modelValue,
+  (val) => {
+    Object.keys(localModel).forEach(key => delete localModel[key])
+    Object.assign(localModel, val)
+  },
+  { immediate: true, deep: true }
+)
+
+// 监听本地值变化，同步到外部
+watch(
+  localModel,
+  (val) => {
+    emit('update:modelValue', { ...val })
+  },
+  { deep: true }
+)
+
+const handleSearch = () => {
+  emit('search')
+}
+
+const handleReset = () => {
+  emit('reset')
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SearchForm',
+}
+</script>
+
+<style scoped lang="less">
+</style>

src/components/search-form/types.ts

@@ -0,0 +1,10 @@
+import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface'
+
+export interface FormItem {
+  field: string
+  label: string
+  type: 'input' | 'select' | 'dateRange' | 'slot'
+  span?: number
+  placeholder?: string
+  options?: SelectOptionData[]
+}

src/components/search-table/index.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="search-table-container">
+    <a-card class="general-card" :title="title">
+      <!-- 搜索表单 -->
+      <SearchForm
+        :model-value="formModel"
+        :form-items="formItems"
+        :show-buttons="showSearchButtons"
+        :search-button-text="searchButtonText"
+        :reset-button-text="resetButtonText"
+        @update:model-value="handleFormModelUpdate"
+        @search="handleSearch"
+        @reset="handleReset"
+      />
+
+      <a-divider style="margin-top: 0" />
+
+      <!-- 数据表格 -->
+      <DataTable
+        :data="data"
+        :columns="columns"
+        :loading="loading"
+        :pagination="pagination"
+        :bordered="bordered"
+        :show-toolbar="showToolbar"
+        :show-download="showDownload"
+        :show-refresh="showRefresh"
+        :show-density="showDensity"
+        :show-column-setting="showColumnSetting"
+        :download-button-text="downloadButtonText"
+        :refresh-tooltip-text="refreshTooltipText"
+        :density-tooltip-text="densityTooltipText"
+        :column-setting-tooltip-text="columnSettingTooltipText"
+        @page-change="handlePageChange"
+        @refresh="handleRefresh"
+        @download="handleDownload"
+        @density-change="handleDensityChange"
+        @column-change="handleColumnChange"
+      >
+        <template #toolbar-left>
+          <slot name="toolbar-left" />
+        </template>
+        <template #toolbar-right>
+          <slot name="toolbar-right" />
+        </template>
+        <!-- 动态插槽透传 -->
+        <template v-for="col in slotColumns" :key="col.dataIndex" #[String(col.slotName)]="slotProps">
+          <slot :name="col.slotName" v-bind="slotProps" />
+        </template>
+      </DataTable>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
+import SearchForm from '../search-form/index.vue'
+import type { FormItem } from '../search-form/types'
+import DataTable from '../data-table/index.vue'
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
+
+type SizeProps = 'mini' | 'small' | 'medium' | 'large'
+
+const props = defineProps({
+  // 表单相关
+  formModel: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+  formItems: {
+    type: Array as PropType<FormItem[]>,
+    default: () => [],
+  },
+  showSearchButtons: {
+    type: Boolean,
+    default: true,
+  },
+  searchButtonText: {
+    type: String,
+    default: '查询',
+  },
+  resetButtonText: {
+    type: String,
+    default: '重置',
+  },
+  // 表格相关
+  data: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+  columns: {
+    type: Array as PropType<TableColumnData[]>,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Object as PropType<{
+      current: number
+      pageSize: number
+      total?: number
+    }>,
+    default: () => ({
+      current: 1,
+      pageSize: 20,
+    }),
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  // 工具栏相关
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+  showDownload: {
+    type: Boolean,
+    default: true,
+  },
+  showRefresh: {
+    type: Boolean,
+    default: true,
+  },
+  showDensity: {
+    type: Boolean,
+    default: true,
+  },
+  showColumnSetting: {
+    type: Boolean,
+    default: true,
+  },
+  // 文本配置
+  title: {
+    type: String,
+    default: '',
+  },
+  downloadButtonText: {
+    type: String,
+    default: '下载',
+  },
+  refreshTooltipText: {
+    type: String,
+    default: '刷新',
+  },
+  densityTooltipText: {
+    type: String,
+    default: '密度',
+  },
+  columnSettingTooltipText: {
+    type: String,
+    default: '列设置',
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'update:formModel', value: Record<string, any>): void
+  (e: 'search'): void
+  (e: 'reset'): void
+  (e: 'page-change', current: number): void
+  (e: 'refresh'): void
+  (e: 'download'): void
+  (e: 'density-change', size: SizeProps): void
+  (e: 'column-change', columns: TableColumnData[]): void
+}>()
+
+// 计算需要插槽的列（动态插槽透传）
+const slotColumns = computed(() => {
+  return props.columns.filter(col => col.slotName)
+})
+
+const handleFormModelUpdate = (value: Record<string, any>) => {
+  emit('update:formModel', value)
+}
+
+const handleSearch = () => {
+  emit('search')
+}
+
+const handleReset = () => {
+  emit('reset')
+}
+
+const handlePageChange = (current: number) => {
+  emit('page-change', current)
+}
+
+const handleRefresh = () => {
+  emit('refresh')
+}
+
+const handleDownload = () => {
+  emit('download')
+}
+
+const handleDensityChange = (size: SizeProps) => {
+  emit('density-change', size)
+}
+
+const handleColumnChange = (columns: TableColumnData[]) => {
+  emit('column-change', columns)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SearchTable',
+}
+</script>
+
+<style scoped lang="less">
+.search-table-container {
+  padding: 0 20px 20px 20px;
+}
+</style>