From 82f8d8e613670130ae67aacd80895fbf7a704bbd Mon Sep 17 00:00:00 2001
From: xkfe <xkfe0516@gmail.com>
Date: Mon, 5 Aug 2024 18:35:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E5=86=99=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 .../ProTable/components/ColSetting.vue        |   3 +-
 packages/components/ProTable/index.vue        |  10 +-
 packages/components/SearchForm/index.vue      |   4 +-
 pnpm-lock.yaml                                |  73 ++
 src/App.vue                                   | 725 +++---------------
 src/components/SettingsDrawer.vue             |  74 ++
 src/components/TableAutoRequest.vue           |  84 ++
 src/components/TableAutoSearch.vue            |  89 +++
 src/components/TableBase.vue                  | 228 ++++++
 src/element.scss                              | 127 ---
 src/main.ts                                   |   4 +-
 src/utils/color.ts                            |  66 ++
 13 files changed, 714 insertions(+), 774 deletions(-)
 create mode 100644 src/components/SettingsDrawer.vue
 create mode 100644 src/components/TableAutoRequest.vue
 create mode 100644 src/components/TableAutoSearch.vue
 create mode 100644 src/components/TableBase.vue
 create mode 100644 src/utils/color.ts

diff --git a/package.json b/package.json
index 8e1a02d..b02f427 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "@unocss/reset": "^0.61.5",
     "@vueuse/core": "^10.11.0",
+    "axios": "^1.7.3",
     "dayjs": "^1.11.12",
     "element-plus": "^2.7.7",
     "sortablejs": "^1.15.2",
diff --git a/packages/components/ProTable/components/ColSetting.vue b/packages/components/ProTable/components/ColSetting.vue
index 2f31639..effa24f 100644
--- a/packages/components/ProTable/components/ColSetting.vue
+++ b/packages/components/ProTable/components/ColSetting.vue
@@ -19,7 +19,7 @@ defineExpose({
 <template>
   <!-- 列设置 -->
   <el-drawer v-model="drawerVisible" title="列设置" size="450px">
-    <div class="card table-main">
+    <div class="table-main">
       <el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
         <el-table-column prop="label" align="center" label="列名" />
         <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
@@ -36,6 +36,7 @@ defineExpose({
         </template>
       </el-table>
     </div>
+    <template #footer />
   </el-drawer>
 </template>
 
diff --git a/packages/components/ProTable/index.vue b/packages/components/ProTable/index.vue
index 6fa293c..d723282 100644
--- a/packages/components/ProTable/index.vue
+++ b/packages/components/ProTable/index.vue
@@ -234,7 +234,7 @@ defineExpose({
   />
 
   <!-- 表格主体 -->
-  <div class="card table-main">
+  <div class="table-main">
     <!-- 表格头部 操作按钮 -->
     <div class="table-header">
       <div class="header-button-lf">
@@ -271,20 +271,20 @@ defineExpose({
           v-if="item.type && columnTypes.includes(item.type)"
           v-bind="item"
           :align="item.align ?? 'center'"
-          :reserve-selection="item.type == 'selection'"
+          :reserve-selection="item.type === 'selection'"
         >
           <template #default="scope">
             <!-- expand -->
-            <template v-if="item.type == 'expand'">
+            <template v-if="item.type === 'expand'">
               <component :is="item.render" v-bind="scope" v-if="item.render" />
               <slot v-else :name="item.type" v-bind="scope" />
             </template>
             <!-- radio -->
-            <el-radio v-if="item.type == 'radio'" v-model="radio" :label="scope.row[rowKey]">
+            <el-radio v-if="item.type === 'radio'" v-model="radio" :label="scope.row[rowKey]">
               <i />
             </el-radio>
             <!-- sort -->
-            <el-tag v-if="item.type == 'sort'" class="move">
+            <el-tag v-if="item.type === 'sort'" class="move">
               <el-icon> <DCaret /></el-icon>
             </el-tag>
           </template>
diff --git a/packages/components/SearchForm/index.vue b/packages/components/SearchForm/index.vue
index a6e2488..c84de09 100644
--- a/packages/components/SearchForm/index.vue
+++ b/packages/components/SearchForm/index.vue
@@ -65,8 +65,8 @@ const showCollapse = computed(() => {
 </script>
 
 <template>
-  <div v-if="columns.length" class="card table-search">
-    <el-form ref="formRef" :model="searchParam">
+  <div v-if="columns.length" class="table-search">
+    <el-form :model="searchParam">
       <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
         <GridItem v-for="(item, index) in columns" :key="item.prop" v-bind="getResponsive(item)" :index="index">
           <el-form-item>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3e1452..3f041e1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@vueuse/core':
         specifier: ^10.11.0
         version: 10.11.0(vue@3.4.33(typescript@5.5.4))
+      axios:
+        specifier: ^1.7.3
+        version: 1.7.3
       dayjs:
         specifier: ^1.11.12
         version: 1.11.12
@@ -1153,6 +1156,12 @@ packages:
   async-validator@4.2.5:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.7.3:
+    resolution: {integrity: sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1301,6 +1310,10 @@ packages:
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@12.1.0:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
     engines: {node: '>=18'}
@@ -1471,6 +1484,10 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   destr@2.0.3:
     resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
 
@@ -1848,10 +1865,23 @@ packages:
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
+  follow-redirects@1.15.6:
+    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   foreground-child@3.2.1:
     resolution: {integrity: sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==}
     engines: {node: '>=14'}
 
+  form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+
   fs-minipass@2.1.0:
     resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
     engines: {node: '>= 8'}
@@ -2301,6 +2331,14 @@ packages:
     resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -2619,6 +2657,9 @@ packages:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -4312,6 +4353,16 @@ snapshots:
 
   async-validator@4.2.5: {}
 
+  asynckit@0.4.0: {}
+
+  axios@1.7.3:
+    dependencies:
+      follow-redirects: 1.15.6
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   balanced-match@1.0.2: {}
 
   binary-extensions@2.3.0: {}
@@ -4471,6 +4522,10 @@ snapshots:
 
   colorette@2.0.20: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@12.1.0: {}
 
   commander@2.20.3: {}
@@ -4656,6 +4711,8 @@ snapshots:
 
   defu@6.1.4: {}
 
+  delayed-stream@1.0.0: {}
+
   destr@2.0.3: {}
 
   detect-indent@6.1.0: {}
@@ -5187,11 +5244,19 @@ snapshots:
 
   flatted@3.3.1: {}
 
+  follow-redirects@1.15.6: {}
+
   foreground-child@3.2.1:
     dependencies:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  form-data@4.0.0:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
   fs-minipass@2.1.0:
     dependencies:
       minipass: 3.3.6
@@ -5610,6 +5675,12 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   mimic-fn@2.1.0: {}
 
   mimic-fn@4.0.0: {}
@@ -5889,6 +5960,8 @@ snapshots:
       kleur: 3.0.3
       sisteransi: 1.0.5
 
+  proxy-from-env@1.1.0: {}
+
   punycode@2.3.1: {}
 
   q@1.5.1: {}
diff --git a/src/App.vue b/src/App.vue
index c52c80b..088a577 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,648 +1,63 @@
 <script setup lang="tsx">
-import { h, reactive, ref } from 'vue'
-import { ElDivider, ElMessage } from 'element-plus'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
-import En from 'element-plus/es/locale/lang/en'
-import { CirclePlus, Delete, Download, EditPen, Moon, Sunny, Upload, View } from '@element-plus/icons-vue'
+import { ref } from 'vue'
+import { Setting } from '@element-plus/icons-vue'
+import SettingsDrawer from '~/components/SettingsDrawer.vue'
+import TableBase from '~/components/TableBase.vue'
+import TableAutoRequest from '~/components/TableAutoRequest.vue'
+import TableAutoSearch from '~/components/TableAutoSearch.vue'
 
-import { isDark, toggleDark } from '~/composables'
-
-const spacer = h(ElDivider, { direction: 'vertical' })
-const language = ref('zh')
-const tableSize = ref('default')
-const paginationSmall = ref(false)
-const paginationAlign = ref('right')
-
-// GeekerTable 实例
-const geekerTableRef = ref()
-
-// 自定义渲染表头（使用tsx语法）
-function headerRender(scope) {
-  return (
-    <el-button type="primary" onClick={() => ElMessage.success('我是通过 tsx 语法渲染的表头')}>
-      {scope.column.label}
-    </el-button>
-  )
-}
-
-// 表格配置项
-const columns = reactive([
-  { type: 'selection', fixed: 'left', width: 70 },
-  { type: 'sort', label: 'Sort', width: 80 },
-  { type: 'expand', label: 'Expand', width: 85 },
-  {
-    prop: 'username',
-    label: '用户姓名',
-    search: { el: 'input', tooltip: '我是搜索提示' },
-    render: (scope) => {
-      return (
-        <el-button type="primary" link onClick={() => ElMessage.success('我是通过 tsx 语法渲染的内容')}>
-          {scope.row.username}
-        </el-button>
-      )
-    },
-  },
-  // {
-  //   prop: 'gender',
-  //   label: '性别',
-  //   // 字典数据（本地数据）
-  //   // enum: genderType,
-  //   // 字典请求不带参数
-  //   enum: getUserGender,
-  //   // 字典请求携带参数
-  //   // enum: () => getUserGender({ id: 1 }),
-  //   search: { el: 'select', props: { filterable: true } },
-  //   fieldNames: { label: 'genderLabel', value: 'genderValue' },
-  // },
-  {
-    // 多级 prop
-    prop: 'user.detail.age',
-    label: '年龄',
-    search: {
-      // 自定义 search 显示内容
-      render: ({ searchParam }) => {
-        return (
-          <div class="flx-center">
-            <el-input vModel_trim={searchParam.minAge} placeholder="最小年龄" />
-            <span class="mr10 ml10">-</span>
-            <el-input vModel_trim={searchParam.maxAge} placeholder="最大年龄" />
-          </div>
-        )
-      },
-    },
-  },
-  { prop: 'idCard', label: '身份证号', search: { el: 'input' } },
-  { prop: 'email', label: '邮箱' },
-  { prop: 'address', label: '居住地址' },
-  // {
-  //   prop: 'status',
-  //   label: '用户状态',
-  //   enum: getUserStatus,
-  //   search: { el: 'tree-select', props: { filterable: true } },
-  //   fieldNames: { label: 'userLabel', value: 'userStatus' },
-  //   render: (scope) => {
-  //     return (
-  //       <>
-  //         {BUTTONS.value.status
-  //           ? (
-  //               <el-switch
-  //                 model-value={scope.row.status}
-  //                 active-text={scope.row.status ? '启用' : '禁用'}
-  //                 active-value={1}
-  //                 inactive-value={0}
-  //                 onClick={() => changeStatus(scope.row)}
-  //               />
-  //             )
-  //           : (
-  //               <el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
-  //             )}
-  //       </>
-  //     )
-  //   },
-  // },
-  {
-    prop: 'createTime',
-    label: '创建时间',
-    headerRender,
-    width: 180,
-    search: {
-      el: 'date-picker',
-      span: 2,
-      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
-      defaultValue: ['2022-11-12 11:35:00', '2022-12-12 11:35:00'],
-    },
-  },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
-])
-const tableData = [
-  {
-    id: '862701853553853856',
-    username: '谢洋',
-    gender: 1,
-    user: {
-      detail: {
-        age: 26,
-      },
-    },
-    idCard: '862701853553853856',
-    email: 'w.ehyfupm@wwbqk.ye',
-    address: '江西省 南昌市',
-    createTime: '1990-06-18 03:52:30',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '674838268660604344',
-    username: '毛秀兰',
-    gender: 1,
-    user: {
-      detail: {
-        age: 11,
-      },
-    },
-    idCard: '674838268660604344',
-    email: 't.ernwv@gjiuaas.dm',
-    address: '云南省 文山壮族苗族自治州',
-    createTime: '2005-10-21 00:04:23',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '267012275367930335',
-    username: '叶勇',
-    gender: 1,
-    user: {
-      detail: {
-        age: 25,
-      },
-    },
-    idCard: '267012275367930335',
-    email: 'i.livfnmriig@ubghnynsgg.ae',
-    address: '江苏省 苏州市',
-    createTime: '1991-12-12 17:04:56',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '013270364275187188',
-    username: '唐明',
-    gender: 2,
-    user: {
-      detail: {
-        age: 13,
-      },
-    },
-    idCard: '013270364275187188',
-    email: 'k.meop@xdfqp.as',
-    address: '青海省 海南藏族自治州',
-    createTime: '1982-03-10 12:23:53',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '815952366584036328',
-    username: '姚军',
-    gender: 2,
-    user: {
-      detail: {
-        age: 29,
-      },
-    },
-    idCard: '815952366584036328',
-    email: 'x.kdw@gwzgpo.cn',
-    address: '香港特别行政区 新界',
-    createTime: '1993-01-23 17:31:59',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
-  },
-  {
-    id: '512188693822848867',
-    username: '谢静',
-    gender: 1,
-    user: {
-      detail: {
-        age: 23,
-      },
-    },
-    idCard: '512188693822848867',
-    email: 'q.bdr@vix.az',
-    address: '山东省 聊城市',
-    createTime: '1983-09-24 07:13:53',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRa0s.jpg',
-  },
-  {
-    id: '166570386772617124',
-    username: '常明',
-    gender: 2,
-    user: {
-      detail: {
-        age: 15,
-      },
-    },
-    idCard: '166570386772617124',
-    email: 'u.vue@bvn.gu',
-    address: '浙江省 舟山市',
-    createTime: '2001-11-13 13:46:36',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
-  },
-  {
-    id: '999376847159147665',
-    username: '林平',
-    gender: 2,
-    user: {
-      detail: {
-        age: 28,
-      },
-    },
-    idCard: '999376847159147665',
-    email: 'w.shuwdie@hiedxalb.sn',
-    address: '湖北省 荆门市',
-    createTime: '1980-11-27 17:25:15',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '271476672767295343',
-    username: '姜涛',
-    gender: 2,
-    user: {
-      detail: {
-        age: 22,
-      },
-    },
-    idCard: '271476672767295343',
-    email: 'v.jzrhkfez@ndsxzmdob.vg',
-    address: '宁夏回族自治区 固原市',
-    createTime: '2015-03-10 00:49:55',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '734812112233530676',
-    username: '董涛',
-    gender: 1,
-    user: {
-      detail: {
-        age: 21,
-      },
-    },
-    idCard: '734812112233530676',
-    email: 'i.slsndcu@vhtsspoge.re',
-    address: '天津 天津市',
-    createTime: '1995-04-02 14:45:52',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '792385419278476361',
-    username: '钱娟',
-    gender: 2,
-    user: {
-      detail: {
-        age: 12,
-      },
-    },
-    idCard: '792385419278476361',
-    email: 'v.bmvafr@qrvdoetm.sy',
-    address: '海南省 三亚市',
-    createTime: '2015-05-18 09:34:00',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
-  },
-  {
-    id: '298535758748223187',
-    username: '文军',
-    gender: 2,
-    user: {
-      detail: {
-        age: 28,
-      },
-    },
-    idCard: '298535758748223187',
-    email: 'n.prvnggje@axqxof.bh',
-    address: '安徽省 铜陵市',
-    createTime: '2018-12-27 07:23:36',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRa0s.jpg',
-  },
-  {
-    id: '137507833585171635',
-    username: '黎秀兰',
-    gender: 1,
-    user: {
-      detail: {
-        age: 29,
-      },
-    },
-    idCard: '137507833585171635',
-    email: 'q.gfwdnx@paws.lk',
-    address: '福建省 三明市',
-    createTime: '2013-04-13 16:46:57',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '754614249125517522',
-    username: '朱平',
-    gender: 2,
-    user: {
-      detail: {
-        age: 23,
-      },
-    },
-    idCard: '754614249125517522',
-    email: 'd.ytdeszbq@kgygjauupr.an',
-    address: '黑龙江省 七台河市',
-    createTime: '1987-03-19 03:02:39',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '827846452651106672',
-    username: '雷芳',
-    gender: 2,
-    user: {
-      detail: {
-        age: 27,
-      },
-    },
-    idCard: '827846452651106672',
-    email: 's.ocykfye@bmsykjvw.dm',
-    address: '湖南省 湘潭市',
-    createTime: '1971-01-22 04:25:22',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRa0s.jpg',
-  },
-  {
-    id: '424576235556553670',
-    username: '林强',
-    gender: 1,
-    user: {
-      detail: {
-        age: 10,
-      },
-    },
-    idCard: '424576235556553670',
-    email: 'd.kkfesct@juedbchnv.wf',
-    address: '海南省 海口市',
-    createTime: '1976-05-22 01:04:17',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
-  },
-  {
-    id: '678577576727849633',
-    username: '白刚',
-    gender: 1,
-    user: {
-      detail: {
-        age: 26,
-      },
-    },
-    idCard: '678577576727849633',
-    email: 'n.ljjkhuz@cnynuh.cq',
-    address: '台湾 南投县',
-    createTime: '1970-07-11 02:19:55',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '115269372615574502',
-    username: '吕强',
-    gender: 2,
-    user: {
-      detail: {
-        age: 24,
-      },
-    },
-    idCard: '115269372615574502',
-    email: 'w.pezfrbqbk@ssujimczj.kw',
-    address: '香港特别行政区 香港岛',
-    createTime: '2003-12-03 13:31:34',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
-  },
-  {
-    id: '298532675158371610',
-    username: '贾芳',
-    gender: 2,
-    user: {
-      detail: {
-        age: 24,
-      },
-    },
-    idCard: '298532675158371610',
-    email: 'p.qvjodqojn@bbukhkttxw.mq',
-    address: '浙江省 嘉兴市',
-    createTime: '1984-06-27 23:55:15',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRBHS.jpg',
-  },
-  {
-    id: '335815671264778765',
-    username: '袁勇',
-    gender: 2,
-    user: {
-      detail: {
-        age: 22,
-      },
-    },
-    idCard: '335815671264778765',
-    email: 'k.pegqed@fbfk.sl',
-    address: '浙江省 宁波市',
-    createTime: '1989-06-11 21:17:08',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRBHS.jpg',
-  },
-  {
-    id: '604426837835285863',
-    username: '沈洋',
-    gender: 2,
-    user: {
-      detail: {
-        age: 25,
-      },
-    },
-    idCard: '604426837835285863',
-    email: 'i.fosjeqy@fcpjdi.中国互联.公司',
-    address: '四川省 甘孜藏族自治州',
-    createTime: '1988-04-05 07:15:29',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '179961433332215545',
-    username: '阎杰',
-    gender: 2,
-    user: {
-      detail: {
-        age: 12,
-      },
-    },
-    idCard: '179961433332215545',
-    email: 'u.qexx@swnd.my',
-    address: '四川省 南充市',
-    createTime: '1998-01-01 13:37:33',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
-  },
-  {
-    id: '622748516824584764',
-    username: '廖芳',
-    gender: 2,
-    user: {
-      detail: {
-        age: 25,
-      },
-    },
-    idCard: '622748516824584764',
-    email: 'e.tljqkeyk@bhh.zr',
-    address: '广西壮族自治区 北海市',
-    createTime: '1978-12-20 23:34:20',
-    status: 0,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '816308492438717143',
-    username: '韩超',
-    gender: 2,
-    user: {
-      detail: {
-        age: 29,
-      },
-    },
-    idCard: '816308492438717143',
-    email: 'h.zgccujtj@thiyitxujx.ve',
-    address: '青海省 黄南藏族自治州',
-    createTime: '1988-05-06 06:44:10',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
-  {
-    id: '424374981365218259',
-    username: '阎强',
-    gender: 1,
-    user: {
-      detail: {
-        age: 30,
-      },
-    },
-    idCard: '424374981365218259',
-    email: 'm.ylgyo@kwsgokuk.gi',
-    address: '四川省 广安市',
-    createTime: '1975-09-07 23:18:19',
-    status: 1,
-    avatar: 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
-  },
+const list = [
+  { key: 'base', title: '基础表格', component: TableBase },
+  { key: 'auto-request', title: '自动请求', component: TableAutoRequest },
+  { key: 'auto-search', title: '配置搜索', component: TableAutoSearch },
+  { key: 'tree-table', title: '树形表格', component: TableBase },
+  { key: 'sort-table', title: '拖拽排序', component: TableBase },
+  { key: 'complex-table', title: '复杂表格', component: TableBase },
+  { key: 'custom-column', title: '自定义列与枚举', component: TableBase },
+  { key: 'custom-header', title: '自定义表头', component: TableBase },
 ]
 
-function onGeekerTableInstance() {
-  console.log('geekerTableRef :>> ', geekerTableRef.value)
+const selected = ref(0)
+const showSettingsDrawer = ref(false)
+function tabClick({ index }) {
+  selected.value = Number(index)
 }
 </script>
 
 <template>
   <div class="app-container">
-    <el-config-provider size="default" :locale="language ? En : zhCn">
-      <div class="card">
-        <el-space wrap :spacer="spacer">
-          <el-switch :model-value="isDark" :active-icon="Sunny" :inactive-icon="Moon" inline-prompt size="default" @change="toggleDark" />
-          <el-switch v-model="language" inline-prompt size="default">
-            <template #active-action>
-              <span class="custom-inactive-action">英</span>
-            </template>
-            <template #inactive-action>
-              <span class="custom-inactive-action">中</span>
-            </template>
-          </el-switch>
-          <el-button type="primary">
-            {{ '刷新表格' }}
-          </el-button>
-          <el-button type="primary">
-            {{ '空表格' }}
-          </el-button>
-          <el-tooltip content="请打开浏览器控制台查看打印信息">
-            <el-button type="primary" @click="onGeekerTableInstance">
-              {{ '获取组件表格实例' }}
-            </el-button>
-          </el-tooltip>
-          <div class="geeker-radio">
-            <p class="geeker-small">
-              {{ '表格大小：' }}
-            </p>
-            <el-radio-group v-model="tableSize">
-              <el-radio-button value="large">
-                large
-              </el-radio-button>
-              <el-radio-button value="default">
-                default
-              </el-radio-button>
-              <el-radio-button value="small">
-                small
-              </el-radio-button>
-            </el-radio-group>
-          </div>
-          <div class="geeker-radio">
-            <p class="geeker-small">
-              {{ '分页大小：' }}
-            </p>
-            <el-radio-group v-model="paginationSmall">
-              <el-radio-button :value="false">
-                no small
-              </el-radio-button>
-              <el-radio-button :value="true">
-                small
-              </el-radio-button>
-            </el-radio-group>
-          </div>
-          <div class="geeker-radio">
-            <p class="geeker-small">
-              {{ '分页的对齐方式：' }}
-            </p>
-            <el-radio-group v-model="paginationAlign">
-              <el-radio-button value="right">
-                right
-              </el-radio-button>
-              <el-radio-button value="center">
-                center
-              </el-radio-button>
-              <el-radio-button value="left">
-                left
-              </el-radio-button>
-            </el-radio-group>
-          </div>
-        </el-space>
-      </div>
-
-      <div class="table-content table-box">
-        <GeekerTable ref="geekerTableRef" :columns="columns" :data="tableData">
-          <!-- 表格 header 按钮 -->
-          <template #tableHeader="scope">
-            <el-button type="primary" :icon="CirclePlus">
-              新增用户
-            </el-button>
-            <el-button type="primary" :icon="Upload" plain>
-              批量添加用户
-            </el-button>
-            <el-button type="primary" :icon="Download" plain>
-              导出用户数据
-            </el-button>
-            <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected">
-              批量删除用户
-            </el-button>
-          </template>
-          <!-- usernameHeader -->
-          <template #usernameHeader="scope">
-            <el-button type="primary" @click="ElMessage.success('我是通过作用域插槽渲染的表头')">
-              {{ scope.column.label }}
-            </el-button>
-          </template>
-          <!-- createTime -->
-          <template #createTime="scope">
-            <el-button type="primary" link @click="ElMessage.success('我是通过作用域插槽渲染的内容')">
-              {{ scope.row.createTime }}
-            </el-button>
+    <el-config-provider size="default">
+      <div class="card flex-1 flex" style="position: relative;">
+        <el-tabs style="flex:1" @tab-click="tabClick">
+          <template v-for="(item, index) of list" :key="item.key">
+            <el-tab-pane :lazy="true">
+              <template #label>
+                <span>
+                  {{ item.title }}
+                </span>
+              </template>
+              <component :is="item.component" v-if="selected === index" />
+            </el-tab-pane>
           </template>
-          <!-- 表格操作 -->
-          <template #operation>
-            <el-button type="primary" link :icon="View">
-              查看
-            </el-button>
-            <el-button type="primary" link :icon="EditPen">
-              编辑
-            </el-button>
-            <el-button type="danger" link :icon="Delete">
-              删除
-            </el-button>
-          </template>
-        </GeekerTable>
+        </el-tabs>
+        <button class="setting-btn" @click="showSettingsDrawer = true">
+          <el-icon class="animate-rotate" size="21">
+            <Setting />
+          </el-icon>
+        </button>
       </div>
     </el-config-provider>
+    <div class="card footer">
+      <el-link href="https://github.com/xkfe/geeker-table" target="_blank">
+        MIT License | 2024-present © geeker-table By xkfe Technology.
+      </el-link>
+    </div>
+
+    <SettingsDrawer v-model="showSettingsDrawer" />
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 #app {
   height: 100vh;
 }
@@ -657,18 +72,54 @@ function onGeekerTableInstance() {
   display: flex;
   flex-direction: column;
 }
-
-.table-content {
+.footer {
   margin-top: 10px;
+  text-align: center;
+  padding: 12px;
+}
+.flex {
+  display: flex;
+}
+.flex-1 {
+  flex: 1;
+  overflow: hidden;
+}
+.el-tabs {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+// 360 度旋转的话
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.geeker-radio {
+.setting-btn {
+  width: 32px;
+  height: 32px;
+  padding: 4px;
   display: flex;
+  justify-content: center;
   align-items: center;
+  position: absolute;
+  right: 24px;
+  top: 24px;
+  cursor: pointer;
+  &:hover,
+  &:active {
+    background: rgba(0, 0, 0, 0.08);
+  }
+  .animate-rotate {
+    animation: rotate 2.4s linear infinite;
+  }
 }
-
-.geeker-small {
-  font-size: 14px;
-  line-height: 20px;
+:deep(.el-tabs__content),
+:deep(.el-tab-pane) {
+  height: 100%;
 }
 </style>
diff --git a/src/components/SettingsDrawer.vue b/src/components/SettingsDrawer.vue
new file mode 100644
index 0000000..e376a6b
--- /dev/null
+++ b/src/components/SettingsDrawer.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Moon, Sunny } from '@element-plus/icons-vue'
+import { isDark, toggleDark } from '~/composables'
+import { getDarkColor, getLightColor } from '~/utils/color'
+
+const drawerVisible = defineModel()
+
+// 预定义主题颜色
+const colorList = [
+  '#daa96e',
+  '#0c819f',
+  '#409eff',
+  '#27ae60',
+  '#ff5c93',
+  '#e74c3c',
+  '#fd726d',
+  '#f39c12',
+  '#9b59b6',
+]
+const DEFAULT_PRIMARY = '#409eff'
+const primary = ref(localStorage.getItem('primary') || DEFAULT_PRIMARY)
+const isGrey = ref(false)
+
+// 修改主题颜色
+function changePrimary(val: string | null) {
+  if (!val) {
+    val = DEFAULT_PRIMARY
+    ElMessage({ type: 'success', message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` })
+  }
+  // 计算主题颜色变化
+  document.documentElement.style.setProperty('--el-color-primary', val)
+  document.documentElement.style.setProperty(
+    '--el-color-primary-dark-2',
+    isDark.value ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`,
+  )
+  for (let i = 1; i <= 9; i++) {
+    const primaryColor = isDark.value ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`
+    document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor)
+  }
+  localStorage.setItem('primary', val)
+};
+
+changePrimary(localStorage.getItem('primary'))
+</script>
+
+<template>
+  <el-drawer v-model="drawerVisible" title="界面设置" size="320px">
+    <div class="theme-item">
+      <span>主题颜色</span>
+      <el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
+    </div>
+    <div class="theme-item">
+      <span>暗黑模式</span>
+      <el-switch :model-value="isDark" :active-icon="Sunny" :inactive-icon="Moon" inline-prompt @change="toggleDark" />
+    </div>
+    <div class="theme-item">
+      <span>灰色模式</span>
+      <el-switch v-model="isGrey" disabled />
+    </div>
+  </el-drawer>
+</template>
+
+<style lang="scss" scoped>
+.theme-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 5px;
+  margin-bottom: 14px;
+  font-size: 14px;
+}
+</style>
diff --git a/src/components/TableAutoRequest.vue b/src/components/TableAutoRequest.vue
new file mode 100644
index 0000000..8d3e515
--- /dev/null
+++ b/src/components/TableAutoRequest.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CirclePlus, Delete, EditPen, View } from '@element-plus/icons-vue'
+import axios from 'axios'
+
+const columns = [
+  { type: 'selection' },
+  { prop: 'username', label: '用户姓名' },
+  {
+    prop: 'gender',
+    label: '性别',
+    // 字典数据（本地数据）
+    // enum: genderType,
+    // 字典请求不带参数
+    enum: getUserGender,
+    fieldNames: { label: 'genderLabel', value: 'genderValue' },
+    // 字典请求携带参数
+    // enum: () => getUserGender({ id: 1 }),
+  },
+  { prop: 'user.detail.age', label: '年龄' },
+  { prop: 'idCard', label: '身份证号' },
+  { prop: 'email', label: '邮箱' },
+  { prop: 'address', label: '居住地址' },
+  { prop: 'status', label: '用户状态' },
+  { prop: 'createTime', label: '创建时间', sortable: true },
+  { prop: 'operation', label: '操作', width: 300 },
+]
+const loading = ref(false)
+
+async function getUserGender() {
+  const res = await axios.get('https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e/geeker/user/gender')
+  return res.data
+}
+async function getTableList(params) {
+  loading.value = true
+  try {
+    return await axios.post('https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e/geeker/user/list', params)
+  }
+  finally {
+    loading.value = false
+    console.log('finally')
+  }
+}
+
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
+function dataCallback(res) {
+  return {
+    list: res.data.list,
+    total: res.data.total,
+  }
+}
+</script>
+
+<template>
+  <div class="table-content table-box">
+    <GeekerTable :columns="columns" :request-api="getTableList" :data-callback="dataCallback">
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-button type="primary" :icon="CirclePlus">
+          新增用户
+        </el-button>
+        <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected">
+          批量删除用户
+        </el-button>
+      </template>
+      <!-- 表格操作 -->
+      <template #operation>
+        <el-button type="primary" link :icon="View">
+          查看
+        </el-button>
+        <el-button type="primary" link :icon="EditPen">
+          编辑
+        </el-button>
+        <el-button type="danger" link :icon="Delete">
+          删除
+        </el-button>
+      </template>
+    </GeekerTable>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/TableAutoSearch.vue b/src/components/TableAutoSearch.vue
new file mode 100644
index 0000000..24d6ff2
--- /dev/null
+++ b/src/components/TableAutoSearch.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CirclePlus, Delete, EditPen, View } from '@element-plus/icons-vue'
+import axios from 'axios'
+
+const columns = [
+  { prop: 'username', label: '用户姓名', search: { el: 'input', tooltip: '我是搜索提示' } },
+  {
+    prop: 'gender',
+    label: '性别',
+    // 字典数据（本地数据）
+    // enum: genderType,
+    // 字典请求不带参数
+    enum: getUserGender,
+    fieldNames: { label: 'genderLabel', value: 'genderValue' },
+    // 字典请求携带参数
+    // enum: () => getUserGender({ id: 1 }),
+    search: { el: 'select', props: { filterable: true } },
+  },
+  { prop: 'user.detail.age', label: '年龄' },
+  { prop: 'idCard', label: '身份证号', search: { el: 'input' } },
+  { prop: 'email', label: '邮箱' },
+  { prop: 'address', label: '居住地址' },
+  { prop: 'status', label: '用户状态', search: { el: 'tree-select', props: { filterable: true } } },
+  { prop: 'createTime', label: '创建时间', sortable: true, search: {
+    el: 'date-picker',
+    span: 2,
+    props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
+    defaultValue: ['2022-11-12 11:35:00', '2022-12-12 11:35:00'],
+  } },
+  { prop: 'operation', label: '操作', width: 300 },
+]
+const loading = ref(false)
+
+async function getUserGender() {
+  const res = await axios.get('https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e/geeker/user/gender')
+  return res.data
+}
+async function getTableList(params) {
+  loading.value = true
+  try {
+    return await axios.post('https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e/geeker/user/list', params)
+  }
+  finally {
+    loading.value = false
+    console.log('finally')
+  }
+}
+
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
+function dataCallback(res) {
+  return {
+    list: res.data.list,
+    total: res.data.total,
+  }
+}
+</script>
+
+<template>
+  <div class="table-content table-box">
+    <GeekerTable :columns="columns" :request-api="getTableList" :data-callback="dataCallback">
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-button type="primary" :icon="CirclePlus">
+          新增用户
+        </el-button>
+        <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected">
+          批量删除用户
+        </el-button>
+      </template>
+      <!-- 表格操作 -->
+      <template #operation>
+        <el-button type="primary" link :icon="View">
+          查看
+        </el-button>
+        <el-button type="primary" link :icon="EditPen">
+          编辑
+        </el-button>
+        <el-button type="danger" link :icon="Delete">
+          删除
+        </el-button>
+      </template>
+    </GeekerTable>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/TableBase.vue b/src/components/TableBase.vue
new file mode 100644
index 0000000..3ed6e24
--- /dev/null
+++ b/src/components/TableBase.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+
+const columns = [
+  { type: 'selection', width: 55, fixed: 'left' },
+  { prop: 'username', label: '用户姓名', width: 140, fixed: 'left' },
+  { prop: 'gender', label: '性别', width: 120 },
+  { prop: 'age', label: '年龄', width: 100 },
+  { prop: 'idCard', label: '身份证号', formatter: formattedIdCard, width: 300 },
+  { prop: 'email', label: '邮箱', width: 200 },
+  { prop: 'address', label: '居住地址', width: 200 },
+  { prop: 'status', label: '用户状态', width: 120 },
+  { prop: 'createTime', label: '创建时间', sortable: true, width: 200 },
+  { prop: 'fixedColumn', label: '固定列测试', width: 500 },
+  { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
+]
+const tableData = [
+  {
+    id: '1',
+    username: '谢洋',
+    gender: '男',
+    age: 26,
+    idCard: '862701853553853856',
+    email: 'w.ehyfupm@wwbqk.ye',
+    address: '江西省 南昌市',
+    createTime: '1990-06-18 03:52:30',
+    status: 0,
+  },
+  {
+    id: '2',
+    username: '毛秀兰',
+    gender: '女',
+    age: 11,
+    idCard: '674838268660604344',
+    email: 't.ernwv@gjiuaas.dm',
+    address: '云南省 文山壮族苗族自治州',
+    createTime: '2005-10-21 00:04:23',
+    status: 0,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '3',
+    username: '叶勇',
+    gender: '男',
+    age: 25,
+    idCard: '267012275367930335',
+    email: 'i.livfnmriig@ubghnynsgg.ae',
+    address: '江苏省 苏州市',
+    createTime: '1991-12-12 17:04:56',
+    status: 0,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '4',
+    username: '唐明',
+    gender: '男',
+    age: 13,
+    idCard: '013270364275187188',
+    email: 'k.meop@xdfqp.as',
+    address: '青海省 海南藏族自治州',
+    createTime: '1982-03-10 12:23:53',
+    status: 1,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '5',
+    username: '姚军',
+    gender: '男',
+    age: 29,
+    idCard: '815952366584036328',
+    email: 'x.kdw@gwzgpo.cn',
+    address: '香港特别行政区 新界',
+    createTime: '1993-01-23 17:31:59',
+    status: 1,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '6',
+    username: '谢静',
+    gender: '女',
+    age: 23,
+    idCard: '512188693822848867',
+    email: 'q.bdr@vix.az',
+    address: '山东省 聊城市',
+    createTime: '1983-09-24 07:13:53',
+    status: 1,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '7',
+    username: '常明',
+    gender: '男',
+    age: 15,
+    idCard: '166570386772617124',
+    email: 'u.vue@bvn.gu',
+    address: '浙江省 舟山市',
+    createTime: '2001-11-13 13:46:36',
+    status: 1,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '8',
+    username: '林平',
+    gender: '男',
+    age: 28,
+    idCard: '999376847159147665',
+    email: 'w.shuwdie@hiedxalb.sn',
+    address: '湖北省 荆门市',
+    createTime: '1980-11-27 17:25:15',
+    status: 1,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '9',
+    username: '姜涛',
+    gender: '男',
+    age: 22,
+    idCard: '271476672767295343',
+    email: 'v.jzrhkfez@ndsxzmdob.vg',
+    address: '宁夏回族自治区 固原市',
+    createTime: '2015-03-10 00:49:55',
+    status: 0,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '10',
+    username: '董涛',
+    gender: '女',
+    age: 21,
+    idCard: '734812112233530676',
+    email: 'i.slsndcu@vhtsspoge.re',
+    address: '天津 天津市',
+    createTime: '1995-04-02 14:45:52',
+    status: 0,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '11',
+    username: '钱娟',
+    gender: '女',
+    age: 12,
+    idCard: '792385419278476361',
+    email: 'v.bmvafr@qrvdoetm.sy',
+    address: '海南省 三亚市',
+    createTime: '2015-05-18 09:34:00',
+    status: 1,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '12',
+    username: '文军',
+    gender: '男',
+    age: 28,
+    idCard: '298535758748223187',
+    email: 'n.prvnggje@axqxof.bh',
+    address: '安徽省 铜陵市',
+    createTime: '2018-12-27 07:23:36',
+    status: 1,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '13',
+    username: '黎秀兰',
+    gender: '女',
+    age: 29,
+    idCard: '137507833585171635',
+    email: 'q.gfwdnx@paws.lk',
+    address: '福建省 三明市',
+    createTime: '2013-04-13 16:46:57',
+    status: 1,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '14',
+    username: '朱平',
+    gender: '男',
+    age: 23,
+    idCard: '754614249125517522',
+    email: 'd.ytdeszbq@kgygjauupr.an',
+    address: '黑龙江省 七台河市',
+    createTime: '1987-03-19 03:02:39',
+    status: 0,
+    fixedColumn: '固定列测试,撑开列宽',
+  },
+  {
+    id: '15',
+    username: '雷芳',
+    gender: '女',
+    age: 27,
+    idCard: '827846452651106672',
+    email: 's.ocykfye@bmsykjvw.dm',
+    address: '湖南省 湘潭市',
+    createTime: '1971-01-22 04:25:22',
+    status: 1,
+  },
+]
+
+/**
+ * @description 正则格式化身份证号码
+ */
+function formattedIdCard(value: string) {
+  return value.replace(/(\d{6})(\d{12})(\d{2})/, '$1**********$3')
+}
+
+function handleCurrentChange(val: typeof tableData[0]) {
+  console.group(`当前行数据-${val.username}`)
+  console.log(val)
+  console.groupEnd()
+  ElMessage.success('打开控制台查看当前行数据')
+}
+function handleSelectionChange(val: typeof tableData[0][]) {
+  console.group('选中行数据')
+  console.log(val)
+  console.log(val.map(item => item.id))
+  console.groupEnd()
+  ElMessage.success('打开控制台查看选中行数据')
+}
+</script>
+
+<template>
+  <div class="table-content table-box">
+    <GeekerTable :columns="columns" :data="tableData" :tool-button="false" stripe highlight-current-row @current-change="handleCurrentChange" @selection-change="handleSelectionChange" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/element.scss b/src/element.scss
index 549cb41..e3c9746 100644
--- a/src/element.scss
+++ b/src/element.scss
@@ -1,31 +1,3 @@
-/* 设置 notification、message 层级在 loading 之上 */
-.el-message,
-.el-notification {
-  z-index: 2070 !important;
-}
-
-/* el-alert */
-.el-alert {
-  border: 1px solid;
-}
-
-/* 当前页面最大化 css */
-.main-maximize {
-  .aside-split,
-  .el-aside,
-  .el-header,
-  .el-footer,
-  .tabs-box {
-    display: none !important;
-  }
-}
-
-/* mask image */
-.mask-image {
-  padding-right: 50px;
-  mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
-}
-
 /* custom card */
 .card {
   box-sizing: border-box;
@@ -36,46 +8,6 @@
   border-radius: 6px;
   box-shadow: 0 0 12px rgb(0 0 0 / 5%);
 }
-
-/* ProTable 不需要 card 样式（在组件内使用 ProTable 会使用到） */
-.no-card {
-  .card {
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    border-radius: 0;
-    box-shadow: none;
-  }
-  .table-search {
-    padding: 18px 0 0 !important;
-    margin-bottom: 0 !important;
-  }
-}
-
-/* content-box (常用内容盒子) */
-.content-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  .text {
-    margin: 20px 0 30px;
-    font-size: 23px;
-    font-weight: bold;
-    color: var(--el-text-color-regular);
-  }
-  .el-descriptions {
-    width: 100%;
-    padding: 40px 0 0;
-    .el-descriptions__title {
-      font-size: 18px;
-    }
-    .el-descriptions__label {
-      width: 200px;
-    }
-  }
-}
-
 /* main-box (树形表格 treeFilter 页面会使用，左右布局 flex) */
 .main-box {
   display: flex;
@@ -197,28 +129,6 @@
   }
 }
 
-/* el-table 组件大小 */
-.el-table--small {
-  .el-table__header th {
-    height: 40px !important;
-    font-size: 14px !important;
-  }
-  .el-table__row {
-    height: 40px !important;
-    font-size: 13px !important;
-  }
-}
-.el-table--large {
-  .el-table__header th {
-    height: 50px !important;
-    font-size: 16px !important;
-  }
-  .el-table__row {
-    height: 50px !important;
-    font-size: 15px !important;
-  }
-}
-
 /* el-drawer */
 .el-drawer {
   .el-drawer__header {
@@ -231,41 +141,4 @@
       color: var(--el-text-color-primary) !important;
     }
   }
-  .el-drawer__footer {
-    border-top: 1px solid var(--el-border-color-lighter);
-  }
-
-  // select 样式
-  .el-select {
-    width: 100%;
-  }
-
-  // drawer-form 中存在两列 form-item 样式
-  .drawer-multiColumn-form {
-    display: flex;
-    flex-wrap: wrap;
-    .el-form-item {
-      width: 47%;
-      &:nth-child(2n-1) {
-        margin-right: 5%;
-      }
-    }
-  }
-}
-
-/* el-dialog */
-.el-dialog {
-  padding: 0;
-  .el-dialog__header {
-    padding: 15px 20px;
-    margin: 0;
-    border-bottom: 1px solid var(--el-border-color-lighter);
-    .el-dialog__title {
-      font-size: 17px;
-    }
-  }
-  .el-dialog__body,
-  .el-dialog__footer {
-    padding: 15px 20px;
-  }
 }
diff --git a/src/main.ts b/src/main.ts
index 48f7799..9be6e42 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,13 +4,13 @@ import '@unocss/reset/tailwind.css'
 
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/src/dark/css-vars.scss'
-import 'dayjs/locale/zh-cn'
 import './element.scss'
 import './common.scss'
 import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 import GeekerTable from '../packages'
 
 const app = createApp(App)
 
-app.use(ElementPlus).use(GeekerTable).mount('#app')
+app.use(ElementPlus, { locale: zhCn }).use(GeekerTable).mount('#app')
diff --git a/src/utils/color.ts b/src/utils/color.ts
new file mode 100644
index 0000000..c71e83d
--- /dev/null
+++ b/src/utils/color.ts
@@ -0,0 +1,66 @@
+import { ElMessage } from 'element-plus'
+
+/**
+ * @description hex颜色转rgb颜色
+ * @param {string} str 颜色值字符串
+ * @returns {string} 返回处理后的颜色值
+ */
+export function hexToRgb(str: any) {
+  let hexs: any = ''
+  const reg = /^#?[0-9A-F]{6}$/i
+  if (!reg.test(str))
+    return ElMessage.warning('输入错误的hex')
+  str = str.replace('#', '')
+  hexs = str.match(/../g)
+  for (let i = 0; i < 3; i++) hexs[i] = Number.parseInt(hexs[i], 16)
+  return hexs
+}
+
+/**
+ * @description rgb颜色转Hex颜色
+ * @param {*} r 代表红色
+ * @param {*} g 代表绿色
+ * @param {*} b 代表蓝色
+ * @returns {string} 返回处理后的颜色值
+ */
+export function rgbToHex(r: any, g: any, b: any) {
+  const reg = /^\d{1,3}$/
+  if (!reg.test(r) || !reg.test(g) || !reg.test(b))
+    return ElMessage.warning('输入错误的rgb颜色值')
+  const hexs = [r.toString(16), g.toString(16), b.toString(16)]
+  for (let i = 0; i < 3; i++) {
+    if (hexs[i].length === 1)
+      hexs[i] = `0${hexs[i]}`
+  }
+  return `#${hexs.join('')}`
+}
+
+/**
+ * @description 加深颜色值
+ * @param {string} color 颜色值字符串
+ * @param {number} level 加深的程度，限0-1之间
+ * @returns {string} 返回处理后的颜色值
+ */
+export function getDarkColor(color: string, level: number) {
+  const reg = /^#?[0-9A-F]{6}$/i
+  if (!reg.test(color))
+    return ElMessage.warning('输入错误的hex颜色值')
+  const rgb = hexToRgb(color)
+  for (let i = 0; i < 3; i++) rgb[i] = Math.round(20.5 * level + rgb[i] * (1 - level))
+  return rgbToHex(rgb[0], rgb[1], rgb[2])
+}
+
+/**
+ * @description 变浅颜色值
+ * @param {string} color 颜色值字符串
+ * @param {number} level 加深的程度，限0-1之间
+ * @returns {string} 返回处理后的颜色值
+ */
+export function getLightColor(color: string, level: number) {
+  const reg = /^#?[0-9A-F]{6}$/i
+  if (!reg.test(color))
+    return ElMessage.warning('输入错误的hex颜色值')
+  const rgb = hexToRgb(color)
+  for (let i = 0; i < 3; i++) rgb[i] = Math.round(255 * level + rgb[i] * (1 - level))
+  return rgbToHex(rgb[0], rgb[1], rgb[2])
+}