From 9eb1356c4e5dafae6a2a438a19a1316f06fc6ac1 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Tue, 9 Jan 2024 14:25:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=8C=E6=AD=A5master?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |   2 +-
 package.json                                  |  69 ++++----
 .../src/components/useRenderMenuTitle.tsx     |   8 +-
 src/components/Table/src/Table.vue            |  57 +++---
 .../Table/src/components/ColumnSetting.vue    | 165 ++++++++++++++++++
 .../Table/src/components/TableActions.vue     | 156 ++++++-----------
 src/constants/index.ts                        |   5 +
 src/hooks/web/useCrudSchemas.ts               |  10 +-
 src/main.ts                                   |   4 +-
 src/store/modules/locale.ts                   |   2 +-
 tsconfig.json                                 |   1 +
 11 files changed, 310 insertions(+), 169 deletions(-)
 create mode 100644 src/components/Table/src/components/ColumnSetting.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8bafd70..ad7ff14 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,7 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "prettier.enable": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "[vue]": {
     "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
diff --git a/package.json b/package.json
index 8b7dc95..b4ae570 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-element-plus-admin",
-  "version": "2.0.0",
+  "version": "2.5.5",
   "description": "一套基于vue3、element-plus、typesScript、vite4的后台集成方案。",
   "author": "Archer <502431556@qq.com>",
   "private": false,
@@ -29,59 +29,60 @@
     "@faker-js/faker": "^8.3.1",
     "@iconify/iconify": "^3.1.1",
     "@iconify/vue": "^4.1.1",
-    "@vueuse/core": "^10.7.0",
+    "@vueuse/core": "^10.7.1",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
-    "axios": "^1.6.2",
+    "axios": "^1.6.5",
     "cropperjs": "^1.6.1",
     "dayjs": "^1.11.10",
     "driver.js": "^1.3.1",
     "echarts": "^5.4.3",
     "echarts-wordcloud": "^2.1.0",
-    "element-plus": "^2.4.3",
+    "element-plus": "^2.4.4",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.2.0",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "url": "^0.11.3",
-    "vue": "3.3.10",
-    "vue-i18n": "9.8.0",
-    "vue-json-pretty": "^2.2.4",
+    "vue": "3.4.6",
+    "vue-draggable-plus": "^0.3.4",
+    "vue-i18n": "9.9.0",
+    "vue-json-pretty": "^2.3.0",
     "vue-router": "^4.2.5",
     "vue-types": "^5.1.1",
-    "xgplayer": "^3.0.10"
+    "xgplayer": "^3.0.11"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
-    "@iconify/json": "^2.2.153",
-    "@intlify/unplugin-vue-i18n": "^1.5.0",
+    "@commitlint/cli": "^18.4.4",
+    "@commitlint/config-conventional": "^18.4.4",
+    "@iconify/json": "^2.2.166",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^9.0.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.10.3",
+    "@types/node": "^20.10.7",
     "@types/nprogress": "^0.2.3",
     "@types/qrcode": "^1.5.5",
-    "@types/qs": "^6.9.10",
+    "@types/qs": "^6.9.11",
     "@types/sortablejs": "^1.15.7",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
-    "@unocss/transformer-variant-group": "^0.58.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "@unocss/transformer-variant-group": "^0.58.3",
     "@vitejs/plugin-legacy": "^5.2.0",
-    "@vitejs/plugin-vue": "^4.5.1",
+    "@vitejs/plugin-vue": "^5.0.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.16",
     "chalk": "^5.3.0",
     "consola": "^3.2.3",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-define-config": "^2.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-define-config": "^2.1.0",
+    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-vue": "^9.19.2",
     "esno": "^4.0.0",
     "fs-extra": "^11.2.0",
@@ -89,23 +90,23 @@
     "inquirer": "^9.2.12",
     "less": "^4.2.0",
     "lint-staged": "^15.2.0",
-    "plop": "^4.0.0",
-    "postcss": "^8.4.32",
+    "plop": "^4.0.1",
+    "postcss": "^8.4.33",
     "postcss-html": "^1.5.0",
     "postcss-less": "^6.0.0",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
     "rimraf": "^5.0.5",
-    "rollup": "^4.6.1",
+    "rollup": "^4.9.4",
     "rollup-plugin-visualizer": "^5.12.0",
-    "stylelint": "^15.11.0",
+    "stylelint": "^16.1.0",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recommended": "^13.0.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-order": "^6.0.3",
-    "terser": "^5.25.0",
+    "stylelint-config-recommended": "^14.0.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-order": "^6.0.4",
+    "terser": "^5.26.0",
     "typescript": "5.3.3",
-    "unocss": "^0.58.0",
-    "vite": "5.0.6",
+    "unocss": "^0.58.3",
+    "vite": "5.0.11",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-mock": "^2.9.6",
@@ -113,7 +114,7 @@
     "vite-plugin-purge-icons": "^0.10.0",
     "vite-plugin-style-import": "2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.27"
   },
   "packageManager": "pnpm@8.1.0",
   "engines": {
diff --git a/src/components/Menu/src/components/useRenderMenuTitle.tsx b/src/components/Menu/src/components/useRenderMenuTitle.tsx
index 6f7caff..8941d9d 100644
--- a/src/components/Menu/src/components/useRenderMenuTitle.tsx
+++ b/src/components/Menu/src/components/useRenderMenuTitle.tsx
@@ -10,10 +10,14 @@ export const useRenderMenuTitle = () => {
     return icon ? (
       <>
         <Icon icon={meta.icon}></Icon>
-        <span class="v-menu__title">{t(title as string)}</span>
+        <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
+          {t(title as string)}
+        </span>
       </>
     ) : (
-      <span class="v-menu__title">{t(title as string)}</span>
+      <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {t(title as string)}
+      </span>
     )
   }
 
diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index 4eec3fc..ca7a9d4 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -17,7 +17,6 @@ import { set, get } from 'lodash-es'
 import { CSSProperties } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
 import TableActions from './components/TableActions.vue'
-import { isImgPath } from '@/utils/is'
 import { createVideoViewer } from '@/components/VideoPlayer'
 import { Icon } from '@/components/Icon'
 import { BaseButton } from '@/components/Button'
@@ -59,8 +58,13 @@ export default defineComponent({
       type: Array as PropType<Recordable[]>,
       default: () => []
     },
-    // 是否自动预览
-    preview: {
+    // 图片自动预览字段数组
+    imagePreview: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    // 视频自动预览字段数组
+    videoPreview: {
       type: Array as PropType<string[]>,
       default: () => []
     },
@@ -275,6 +279,10 @@ export default defineComponent({
       setProps({ size })
     }
 
+    const confirmSetColumn = (columns: TableColumn[]) => {
+      setProps({ columns })
+    }
+
     expose({
       setProps,
       setColumn,
@@ -335,7 +343,8 @@ export default defineComponent({
     })
 
     const renderTreeTableColumn = (columnsChildren: TableColumn[]) => {
-      const { align, headerAlign, showOverflowTooltip, preview } = unref(getProps)
+      const { align, headerAlign, showOverflowTooltip, imagePreview, videoPreview } =
+        unref(getProps)
       return columnsChildren.map((v) => {
         if (v.hidden) return null
         const props = { ...v } as any
@@ -346,10 +355,10 @@ export default defineComponent({
         const slots = {
           default: (...args: any[]) => {
             const data = args[0]
-            let isImageUrl = false
-            if (preview.length) {
-              isImageUrl = preview.some((item) => (item as string) === v.field)
-            }
+            let isPreview = false
+            isPreview =
+              imagePreview.some((item) => (item as string) === v.field) ||
+              videoPreview.some((item) => (item as string) === v.field)
 
             return children && children.length
               ? renderTreeTableColumn(children)
@@ -357,8 +366,8 @@ export default defineComponent({
                 ? props.slots.default(...args)
                 : v?.formatter
                   ? v?.formatter?.(data.row, data.column, get(data.row, v.field), data.$index)
-                  : isImageUrl
-                    ? renderPreview(get(data.row, v.field))
+                  : isPreview
+                    ? renderPreview(get(data.row, v.field), v.field)
                     : get(data.row, v.field)
           }
         }
@@ -380,10 +389,11 @@ export default defineComponent({
       })
     }
 
-    const renderPreview = (url: string) => {
+    const renderPreview = (url: string, field: string) => {
+      const { imagePreview, videoPreview } = unref(getProps)
       return (
         <div class="flex items-center">
-          {isImgPath(url) ? (
+          {imagePreview.includes(field) ? (
             <ElImage
               src={url}
               fit="cover"
@@ -392,7 +402,7 @@ export default defineComponent({
               preview-src-list={[url]}
               preview-teleported
             />
-          ) : (
+          ) : videoPreview.includes(field) ? (
             <BaseButton
               type="primary"
               icon={<Icon icon="ep:video-play" />}
@@ -404,7 +414,7 @@ export default defineComponent({
             >
               预览
             </BaseButton>
-          )}
+          ) : null}
         </div>
       )
     }
@@ -419,7 +429,8 @@ export default defineComponent({
         headerAlign,
         showOverflowTooltip,
         reserveSelection,
-        preview
+        imagePreview,
+        videoPreview
       } = unref(getProps)
 
       return (columnsChildren || columns).map((v) => {
@@ -434,6 +445,7 @@ export default defineComponent({
               align={v.align || align}
               headerAlign={v.headerAlign || headerAlign}
               label={v.label}
+              fixed={v.fixed}
               width="65px"
             ></ElTableColumn>
           )
@@ -458,10 +470,10 @@ export default defineComponent({
             default: (...args: any[]) => {
               const data = args[0]
 
-              let isImageUrl = false
-              if (preview.length) {
-                isImageUrl = preview.some((item) => (item as string) === v.field)
-              }
+              let isPreview = false
+              isPreview =
+                imagePreview.some((item) => (item as string) === v.field) ||
+                videoPreview.some((item) => (item as string) === v.field)
 
               return children && children.length
                 ? renderTreeTableColumn(children)
@@ -469,8 +481,8 @@ export default defineComponent({
                   ? props.slots.default(...args)
                   : v?.formatter
                     ? v?.formatter?.(data.row, data.column, get(data.row, v.field), data.$index)
-                    : isImageUrl
-                      ? renderPreview(get(data.row, v.field))
+                    : isPreview
+                      ? renderPreview(get(data.row, v.field), v.field)
                       : get(data.row, v.field)
             }
           }
@@ -543,11 +555,12 @@ export default defineComponent({
             </div>
           ) : (
             <>
-              {unref(getProps).showAction ? (
+              {unref(getProps).showAction && !unref(getProps).customContent ? (
                 <TableActions
                   columns={unref(getProps).columns}
                   onChangSize={changSize}
                   onRefresh={refresh}
+                  onConfirm={confirmSetColumn}
                 />
               ) : null}
               <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
diff --git a/src/components/Table/src/components/ColumnSetting.vue b/src/components/Table/src/components/ColumnSetting.vue
new file mode 100644
index 0000000..5d40b7b
--- /dev/null
+++ b/src/components/Table/src/components/ColumnSetting.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import {
+  ElDrawer,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElText,
+  ElRadioButton,
+  ElRadioGroup
+} from 'element-plus'
+import { TableColumn } from '../types'
+import { PropType, ref, watch, unref } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { DEFAULT_FILTER_COLUMN } from '@/constants'
+import { VueDraggable } from 'vue-draggable-plus'
+
+const modelValue = defineModel<boolean>()
+
+const props = defineProps({
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['confirm'])
+
+const oldColumns = ref<TableColumn[]>()
+
+const settingColumns = ref<TableColumn[]>()
+
+// 存储不要的列
+const hiddenColumns = ref<TableColumn[]>([])
+
+const defaultCheckColumns = ref<string[]>([])
+const checkColumns = ref<string[]>([])
+
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const handleCheckAllChange = (val: boolean) => {
+  checkColumns.value = val ? unref(defaultCheckColumns) : []
+  isIndeterminate.value = false
+}
+
+const handleCheckedColumnsChange = (value: string[]) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === unref(defaultCheckColumns)?.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < unref(defaultCheckColumns)?.length
+}
+
+const confirm = () => {
+  const newColumns = cloneDeep(unref(settingColumns))?.map((item) => {
+    const fixed = unref(settingColumns)?.find((col) => col.field === item.field)?.fixed
+    item.hidden = !!!unref(checkColumns)?.includes(item.field)
+    item.fixed = fixed ? fixed : undefined
+    return item
+  })
+  emit('confirm', [...unref(hiddenColumns), ...(newColumns || [])])
+  modelValue.value = false
+}
+
+const restore = () => {
+  initColumns([...unref(hiddenColumns), ...(unref(oldColumns) || [])], true)
+}
+
+const initColumns = (columns: TableColumn[], isReStore = false) => {
+  const newColumns = columns?.filter((item) => {
+    if (!isReStore) {
+      item.fixed = item.fixed !== void 0 ? item.fixed : undefined
+    }
+    return (item.type && !DEFAULT_FILTER_COLUMN.includes(item.type)) || !item.type
+  })
+  if (!unref(oldColumns)) {
+    oldColumns.value = cloneDeep(newColumns)
+  }
+  settingColumns.value = cloneDeep(newColumns)
+
+  hiddenColumns.value = cloneDeep(
+    columns?.filter((item) => item.type && DEFAULT_FILTER_COLUMN.includes(item.type))
+  )
+
+  defaultCheckColumns.value = unref(settingColumns)?.map((item) => item.field) || []
+  checkColumns.value =
+    unref(settingColumns)
+      ?.filter((item) => !item.hidden)
+      ?.map((item) => item.field) || []
+
+  if (unref(checkColumns)?.length === unref(defaultCheckColumns)?.length) {
+    checkAll.value = true
+    isIndeterminate.value = false
+  }
+}
+
+watch(
+  () => props.columns,
+  (columns) => {
+    initColumns(columns)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<template>
+  <ElDrawer v-model="modelValue" title="列设置" size="350px">
+    <div>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center justify-between">
+          <ElCheckbox
+            v-model="checkAll"
+            :indeterminate="isIndeterminate"
+            @change="handleCheckAllChange"
+          />
+          <ElText class="ml-8px!">{{ checkColumns.length }} / {{ settingColumns?.length }}</ElText>
+        </div>
+        <ElText>固定 / 排序</ElText>
+      </div>
+      <div v-if="settingColumns?.length">
+        <VueDraggable
+          v-model="settingColumns"
+          target=".el-checkbox-group"
+          handle=".handle"
+          :animation="150"
+        >
+          <ElCheckboxGroup
+            ref="draggableWrap"
+            v-model="checkColumns"
+            @change="handleCheckedColumnsChange"
+          >
+            <div
+              v-for="item in settingColumns"
+              :key="item.field"
+              class="flex items-center justify-between mt-12px"
+            >
+              <ElCheckbox :label="item.field">
+                {{ item.label }}
+              </ElCheckbox>
+              <div class="flex items-center">
+                <ElRadioGroup size="small" v-model="item.fixed">
+                  <ElRadioButton label="left">
+                    <Icon icon="ep:arrow-left" />
+                  </ElRadioButton>
+                  <ElRadioButton :label="undefined">
+                    <Icon icon="ep:close" />
+                  </ElRadioButton>
+                  <ElRadioButton label="right">
+                    <Icon icon="ep:arrow-right" />
+                  </ElRadioButton>
+                </ElRadioGroup>
+
+                <div class="ml-12px cursor-move handle"><Icon icon="ep:rank" /></div>
+              </div>
+            </div>
+          </ElCheckboxGroup>
+        </VueDraggable>
+      </div>
+    </div>
+    <template #footer>
+      <div>
+        <BaseButton @click="restore">还原</BaseButton>
+        <BaseButton type="primary" @click="confirm">确定</BaseButton>
+      </div>
+    </template>
+  </ElDrawer>
+</template>
diff --git a/src/components/Table/src/components/TableActions.vue b/src/components/Table/src/components/TableActions.vue
index 0b7f2ca..2eaab32 100644
--- a/src/components/Table/src/components/TableActions.vue
+++ b/src/components/Table/src/components/TableActions.vue
@@ -1,20 +1,11 @@
 <script lang="tsx">
-import { defineComponent, unref, computed, PropType, watch } from 'vue'
-import {
-  ElTooltip,
-  ElDropdown,
-  ElDropdownMenu,
-  ElDropdownItem,
-  ComponentSize
-  // ElPopover,
-  // ElTree
-} from 'element-plus'
+import { defineComponent, unref, computed, PropType, ref } from 'vue'
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, ComponentSize } from 'element-plus'
 import { Icon } from '@/components/Icon'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useAppStore } from '@/store/modules/app'
 import { TableColumn } from '../types'
-import { cloneDeep } from 'lodash-es'
-// import { eachTree } from '@/utils/tree'
+import ColumnSetting from './ColumnSetting.vue'
 
 const appStore = useAppStore()
 const sizeMap = computed(() => appStore.sizeMap)
@@ -23,14 +14,19 @@ const { t } = useI18n()
 
 export default defineComponent({
   name: 'TableActions',
+  components: {
+    ColumnSetting
+  },
   props: {
     columns: {
       type: Array as PropType<TableColumn[]>,
       default: () => []
     }
   },
-  emits: ['refresh', 'changSize'],
+  emits: ['refresh', 'changSize', 'confirm'],
   setup(props, { emit }) {
+    const showSetting = ref(false)
+
     const refresh = () => {
       emit('refresh')
     }
@@ -39,111 +35,71 @@ export default defineComponent({
       emit('changSize', size)
     }
 
-    const columns = computed(() => {
-      return cloneDeep(props.columns).filter((v) => {
-        // 去掉type为selection的列和expand的列
-        if (v.type !== 'selection' && v.type !== 'expand') {
-          return v
-        }
-      })
-    })
+    const confirm = (columns: TableColumn[]) => {
+      emit('confirm', columns)
+    }
 
-    watch(
-      () => columns.value,
-      (newColumns) => {
-        console.log('columns change：', newColumns)
-      },
-      {
-        deep: true
-      }
-    )
+    const showColumnSetting = () => {
+      showSetting.value = true
+    }
 
     return () => (
       <>
         <div class="text-right h-28px flex items-center justify-end">
-          <ElTooltip content={t('common.refresh')} placement="top">
-            <span onClick={refresh}>
-              <Icon
-                icon="ant-design:sync-outlined"
-                class="cursor-pointer"
-                hover-color="var(--el-color-primary)"
-              />
-            </span>
-          </ElTooltip>
+          <div title="刷新" class="w-30px h-20px flex items-center justify-end" onClick={refresh}>
+            <Icon
+              icon="ant-design:sync-outlined"
+              class="cursor-pointer"
+              hover-color="var(--el-color-primary)"
+            />
+          </div>
 
-          <ElTooltip content={t('common.size')} placement="top">
-            <ElDropdown trigger="click" onCommand={changSize}>
-              {{
-                default: () => {
-                  return (
-                    <span>
-                      <Icon
-                        icon="ant-design:column-height-outlined"
-                        class="cursor-pointer mr-8px ml-8px"
-                        hover-color="var(--el-color-primary)"
-                      />
-                    </span>
-                  )
-                },
-                dropdown: () => {
-                  return (
-                    <ElDropdownMenu>
-                      {{
-                        default: () => {
-                          return unref(sizeMap).map((v) => {
-                            return (
-                              <ElDropdownItem key={v} command={v}>
-                                {t(`size.${v}`)}
-                              </ElDropdownItem>
-                            )
-                          })
-                        }
-                      }}
-                    </ElDropdownMenu>
-                  )
-                }
-              }}
-            </ElDropdown>
-          </ElTooltip>
-
-          {/* <ElTooltip content={t('common.columnSetting')} placement="top"> */}
-          {/* <ElPopover trigger="click" placement="left">
+          <ElDropdown trigger="click" onCommand={changSize}>
             {{
               default: () => {
                 return (
-                  <div>
-                    <ElTree
-                      data={unref(columns)}
-                      show-checkbox
-                      default-checked-keys={unref(defaultCheckeds)}
-                      draggable
-                      node-key="field"
-                      allow-drop={(_draggingNode: any, _dropNode: any, type: string) => {
-                        if (type === 'inner') {
-                          return false
-                        } else {
-                          return true
-                        }
-                      }}
-                      onNode-drag-end={onNodeDragEnd}
-                      onCheck-change={onCheckChange}
+                  <div title="尺寸" class="w-30px h-20px flex items-center justify-end">
+                    <Icon
+                      icon="ant-design:column-height-outlined"
+                      class="cursor-pointer"
+                      hover-color="var(--el-color-primary)"
                     />
                   </div>
                 )
               },
-              reference: () => {
+              dropdown: () => {
                 return (
-                  <Icon
-                    icon="ant-design:setting-outlined"
-                    class="cursor-pointer"
-                    hoverColor="var(--el-color-primary)"
-                  />
+                  <ElDropdownMenu>
+                    {{
+                      default: () => {
+                        return unref(sizeMap).map((v) => {
+                          return (
+                            <ElDropdownItem key={v} command={v}>
+                              {t(`size.${v}`)}
+                            </ElDropdownItem>
+                          )
+                        })
+                      }
+                    }}
+                  </ElDropdownMenu>
                 )
               }
             }}
-          </ElPopover> */}
-          {/* </ElTooltip> */}
+          </ElDropdown>
+
+          <div
+            title="列设置"
+            class="w-30px h-20px flex items-center justify-end"
+            onClick={showColumnSetting}
+          >
+            <Icon
+              icon="ant-design:setting-outlined"
+              class="cursor-pointer"
+              hover-color="var(--el-color-primary)"
+            />
+          </div>
         </div>
+        <ColumnSetting v-model={showSetting.value} columns={props.columns} onConfirm={confirm} />
       </>
     )
   }
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 6f676aa..4dc2db2 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -22,3 +22,8 @@ export const NO_REDIRECT_WHITE_LIST = ['/login']
  * 不重置路由白名单
  */
 export const NO_RESET_WHITE_LIST = ['Redirect', 'Login', 'NoFind', 'Root']
+
+/**
+ * 表格默认过滤列设置字段
+ */
+export const DEFAULT_FILTER_COLUMN = ['expand', 'selection']
diff --git a/src/hooks/web/useCrudSchemas.ts b/src/hooks/web/useCrudSchemas.ts
index 99eb38a..e1cd7ec 100644
--- a/src/hooks/web/useCrudSchemas.ts
+++ b/src/hooks/web/useCrudSchemas.ts
@@ -79,7 +79,7 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
   for (let i = 0; i < length; i++) {
     const schemaItem = crudSchema[i]
     // 判断是否隐藏
-    if (!schemaItem?.search?.hidden) {
+    if (!schemaItem?.search?.remove) {
       const searchSchemaItem = {
         component: schemaItem?.search?.component || 'Input',
         ...schemaItem.search,
@@ -87,9 +87,6 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
         label: schemaItem.label
       }
 
-      // 删除不必要的字段
-      delete searchSchemaItem.hidden
-
       searchSchema.push(searchSchemaItem)
     }
   }
@@ -127,7 +124,7 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
   for (let i = 0; i < length; i++) {
     const formItem = crudSchema[i]
     // 判断是否隐藏
-    if (!formItem?.form?.hidden) {
+    if (!formItem?.form?.remove) {
       const formSchemaItem = {
         component: formItem?.form?.component || 'Input',
         ...formItem.form,
@@ -135,9 +132,6 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
         label: formItem.label
       }
 
-      // 删除不必要的字段
-      delete formSchemaItem.hidden
-
       formSchema.push(formSchemaItem)
     }
   }
diff --git a/src/main.ts b/src/main.ts
index f708dad..35febb7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,6 @@
-// 引入windi css
+import 'vue/jsx'
+
+// 引入unocss
 import '@/plugins/unocss'
 
 // 导入全局的svg图标
diff --git a/src/store/modules/locale.ts b/src/store/modules/locale.ts
index eba3172..8d2ba35 100644
--- a/src/store/modules/locale.ts
+++ b/src/store/modules/locale.ts
@@ -5,7 +5,7 @@ import en from 'element-plus/es/locale/lang/en'
 import { useStorage } from '@/hooks/web/useStorage'
 import { LocaleDropdownType } from '@/components/LocaleDropdown'
 
-const { getStorage, setStorage } = useStorage()
+const { getStorage, setStorage } = useStorage('localStorage')
 
 const elLocaleMap = {
   'zh-CN': zhCn,
diff --git a/tsconfig.json b/tsconfig.json
index a53c906..fe67772 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
+    "jsxImportSource": "vue",
     "lib": ["esnext", "dom"],
     "baseUrl": "./",
     "allowJs": true,