feat: 同步代码

2024-02-22 17:35:05 +08:00 · 2024-02-07 11:07:41 +08:00 · 2024-01-31 14:23:10 +08:00 · 2024-01-29 08:52:17 +08:00 · 2024-01-29 08:50:16 +08:00 · 2024-01-21 15:09:34 +08:00
45 changed files with 887 additions and 531 deletions
--- a/.env.base
+++ b/.env.base
@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=development
+VITE_NODE_ENV=development

 # 接口前缀
 VITE_API_BASE_PATH=
@ -9,3 +9,12 @@ VITE_BASE_PATH=/

 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=true
+
+# 是否开启mock
+VITE_USE_MOCK=true
+
+# 是否使用在线图标
+VITE_USE_ONLINE_ICON=true
--- a/.env.dev
+++ b/.env.dev
@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production

 # 接口前缀
 VITE_API_BASE_PATH=
@ -21,3 +21,18 @@ VITE_OUT_DIR=dist-dev

 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否包分析
+VITE_USE_BUNDLE_ANALYZER=false
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
+
+# 是否开启mock
+VITE_USE_MOCK=true
+
+# 是否切割css
+VITE_USE_CSS_SPLIT=true
+
+# 是否使用在线图标
+VITE_USE_ONLINE_ICON=true
--- a/.env.gitee
+++ b/.env.gitee
@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production

 # 接口前缀
 VITE_API_BASE_PATH=
@ -21,3 +21,18 @@ VITE_OUT_DIR=dist-pro

 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否包分析
+VITE_USE_BUNDLE_ANALYZER=false
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
+
+# 是否开启mock
+VITE_USE_MOCK=true
+
+# 是否切割css
+VITE_USE_CSS_SPLIT=true
+
+# 是否使用在线图标
+VITE_USE_ONLINE_ICON=true
--- a/.env.pro
+++ b/.env.pro
@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production

 # 接口前缀
 VITE_API_BASE_PATH=
@ -21,3 +21,18 @@ VITE_OUT_DIR=dist-pro

 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否包分析
+VITE_USE_BUNDLE_ANALYZER=true
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
+
+# 是否开启mock
+VITE_USE_MOCK=true
+
+# 是否切割css
+VITE_USE_CSS_SPLIT=true
+
+# 是否使用在线图标
+VITE_USE_ONLINE_ICON=true
--- a/.env.test
+++ b/.env.test
@ -1,8 +1,8 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production

 # 接口前缀
-VITE_API_BASE_PATH=test
+VITE_API_BASE_PATH=

 # 打包路径
 VITE_BASE_PATH=/dist-test/
@ -21,3 +21,18 @@ VITE_OUT_DIR=dist-test

 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否包分析
+VITE_USE_BUNDLE_ANALYZER=false
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
+
+# 是否开启mock
+VITE_USE_MOCK=true
+
+# 是否切割css
+VITE_USE_CSS_SPLIT=false
+
+# 是否使用在线图标
+VITE_USE_ONLINE_ICON=true
--- a/.gitignore
+++ b/.gitignore
@ -6,3 +6,4 @@ dist-ssr
 /dist*
 *-lock.*
 pnpm-debug
+stats.html
--- 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"
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vue-element-plus-admin",
-  "version": "2.0.0",
+  "version": "2.5.6",
  "description": "一套基于vue3、element-plus、typesScript、vite4的后台集成方案。",
  "author": "Archer <502431556@qq.com>",
  "private": false,
@ -11,7 +11,7 @@
    "build:pro": "pnpm vite build --mode pro",
    "build:gitee": "pnpm vite build --mode gitee",
    "build:dev": "pnpm vite build --mode dev",
-    "build:test": "pnpm run ts:check && vite build --mode test",
+    "build:test": "pnpm vite build --mode test",
    "serve:pro": "pnpm vite preview --mode pro",
    "serve:dev": "pnpm vite preview --mode dev",
    "serve:test": "pnpm vite preview --mode test",
@ -26,94 +26,95 @@
    "p": "plop"
  },
  "dependencies": {
-    "@faker-js/faker": "^8.3.1",
+    "@faker-js/faker": "^8.4.0",
    "@iconify/iconify": "^3.1.1",
    "@iconify/vue": "^4.1.1",
-    "@vueuse/core": "^10.7.0",
+    "@vueuse/core": "^10.7.2",
    "@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.7",
    "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.5.5",
    "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.15",
+    "vue-draggable-plus": "^0.3.5",
+    "vue-i18n": "9.9.1",
+    "vue-json-pretty": "^2.3.0",
    "vue-router": "^4.2.5",
    "vue-types": "^5.1.1",
-    "xgplayer": "^3.0.10"
+    "xgplayer": "^3.0.12"
  },
  "devDependencies": {
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
-    "@iconify/json": "^2.2.153",
-    "@intlify/unplugin-vue-i18n": "^1.5.0",
-    "@purge-icons/generated": "^0.10.0",
+    "@commitlint/cli": "^18.6.0",
+    "@commitlint/config-conventional": "^18.6.0",
+    "@iconify/json": "^2.2.180",
+    "@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.11.16",
    "@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",
-    "@vitejs/plugin-legacy": "^5.2.0",
-    "@vitejs/plugin-vue": "^4.5.1",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@unocss/transformer-variant-group": "^0.58.5",
+    "@vitejs/plugin-legacy": "^5.3.0",
+    "@vitejs/plugin-vue": "^5.0.3",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
    "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-plugin-vue": "^9.19.2",
+    "eslint-define-config": "^2.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.21.1",
    "esno": "^4.0.0",
    "fs-extra": "^11.2.0",
-    "husky": "^8.0.3",
-    "inquirer": "^9.2.12",
+    "husky": "^9.0.10",
+    "inquirer": "^9.2.14",
    "less": "^4.2.0",
-    "lint-staged": "^15.2.0",
-    "plop": "^4.0.0",
-    "postcss": "^8.4.32",
-    "postcss-html": "^1.5.0",
+    "lint-staged": "^15.2.2",
+    "plop": "^4.0.1",
+    "postcss": "^8.4.34",
+    "postcss-html": "^1.6.0",
    "postcss-less": "^6.0.0",
-    "prettier": "^3.1.0",
+    "prettier": "^3.2.5",
    "rimraf": "^5.0.5",
-    "rollup": "^4.6.1",
-    "stylelint": "^15.11.0",
+    "rollup": "^4.9.6",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "stylelint": "^16.2.1",
    "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.27.0",
    "typescript": "5.3.3",
-    "unocss": "^0.58.0",
-    "vite": "5.0.6",
+    "unocss": "^0.58.5",
+    "vite": "5.0.12",
    "vite-plugin-ejs": "^1.7.0",
    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-mock": "2.9.6",
    "vite-plugin-progress": "^0.0.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": {
--- a/src/App.vue
+++ b/src/App.vue
@ -2,9 +2,7 @@
 import { computed } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { ConfigGlobal } from '@/components/ConfigGlobal'
-import { isDark } from '@/utils/is'
 import { useDesign } from '@/hooks/web/useDesign'
-import { useStorage } from '@/hooks/web/useStorage'

 const { getPrefixCls } = useDesign()

@ -16,19 +14,7 @@ const currentSize = computed(() => appStore.getCurrentSize)

 const greyMode = computed(() => appStore.getGreyMode)

-const { getStorage } = useStorage()
-
-// 根据浏览器当前主题设置系统主题色
-const setDefaultTheme = () => {
-  if (getStorage('isDark') !== null) {
-    appStore.setIsDark(getStorage('isDark'))
-    return
-  }
-  const isDarkTheme = isDark()
-  appStore.setIsDark(isDarkTheme)
-}
-
-setDefaultTheme()
+appStore.initTheme()
 </script>

 <template>
--- a/src/axios/config.ts
+++ b/src/axios/config.ts
@ -1,8 +1,9 @@
 import { AxiosResponse, InternalAxiosRequestConfig } from './types'
 import { ElMessage } from 'element-plus'
 import qs from 'qs'
-import { SUCCESS_CODE } from '@/constants'
+import { SUCCESS_CODE, TRANSFORM_REQUEST_DATA } from '@/constants'
 import { useUserStoreWithOut } from '@/store/modules/user'
+import { objToFormData } from '@/utils'

 const defaultRequestInterceptors = (config: InternalAxiosRequestConfig) => {
  if (
@ -10,6 +11,12 @@ const defaultRequestInterceptors = (config: InternalAxiosRequestConfig) => {
    config.headers['Content-Type'] === 'application/x-www-form-urlencoded'
  ) {
    config.data = qs.stringify(config.data)
+  } else if (
+    TRANSFORM_REQUEST_DATA &&
+    config.method === 'post' &&
+    config.headers['Content-Type'] === 'multipart/form-data'
+  ) {
+    config.data = objToFormData(config.data)
  }
  if (config.method === 'get' && config.params) {
    let url = config.url as string
--- a/src/components/Footer/src/Footer.vue
+++ b/src/components/Footer/src/Footer.vue
@ -15,7 +15,7 @@ const title = computed(() => appStore.getTitle)
 <template>
  <div
    :class="prefixCls"
-    class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-content-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
+    class="shrink-0 text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-content-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
  >
    Copyright ©2021-present {{ title }}
  </div>
--- a/src/components/Form/src/Form.vue
+++ b/src/components/Form/src/Form.vue
@ -230,7 +230,7 @@ export default defineComponent({
      const { schema = [], isCol } = unref(getProps)

      return schema
-        .filter((v) => !v.remove)
+        .filter((v) => !v.remove && !v.hidden)
        .map((item) => {
          // 如果是 Divider 组件，需要自己占用一行
          const isDivider = item.component === 'Divider'
@ -406,7 +406,15 @@ export default defineComponent({
  margin-left: 0 !important;
 }

-.@{elNamespace}-form--inline .@{elNamespace}-input {
-  width: 245px;
+.@{elNamespace}-form--inline {
+  :deep(.el-form-item__content) {
+    & > :first-child {
+      min-width: 229.5px;
+    }
+  }
+  .@{elNamespace}-input-number {
+    // 229.5px是兼容el-input-number的最小宽度,
+    min-width: 229.5px;
+  }
 }
 </style>
--- a/src/components/Icon/src/Icon.vue
+++ b/src/components/Icon/src/Icon.vue
@ -25,6 +25,11 @@ const symbolId = computed(() => {
  return unref(isLocal) ? `#icon-${props.icon.split('svg-icon:')[1]}` : props.icon
 })

+// 是否使用在线图标
+const isUseOnline = computed(() => {
+  return import.meta.env.VITE_USE_ONLINE_ICON === 'true'
+})
+
 const getIconifyStyle = computed(() => {
  const { color, size } = props
  return {
@ -40,7 +45,10 @@ const getIconifyStyle = computed(() => {
      <use :xlink:href="symbolId" />
    </svg>

-    <Icon v-else :icon="icon" :style="getIconifyStyle" />
+    <template v-else>
+      <Icon v-if="isUseOnline" :icon="icon" :style="getIconifyStyle" />
+      <div v-else :class="`${icon} iconify`" :style="getIconifyStyle"></div>
+    </template>
  </ElIcon>
 </template>

@ -49,11 +57,18 @@ const getIconifyStyle = computed(() => {

 .@{prefix-cls},
 .iconify {
-  &:hover {
-    :deep(svg) {
+  :deep(svg) {
+    &:hover {
      // stylelint-disable-next-line
      color: v-bind(hoverColor) !important;
    }
  }
 }
+
+.iconify {
+  &:hover {
+    // stylelint-disable-next-line
+    color: v-bind(hoverColor) !important;
+  }
+}
 </style>
--- a/src/components/Menu/src/Menu.vue
+++ b/src/components/Menu/src/Menu.vue
@ -89,11 +89,16 @@ export default defineComponent({
          backgroundColor="var(--left-menu-bg-color)"
          textColor="var(--left-menu-text-color)"
          activeTextColor="var(--left-menu-text-active-color)"
+          popperClass={
+            unref(menuMode) === 'vertical'
+              ? `${prefixCls}-popper--vertical`
+              : `${prefixCls}-popper--horizontal`
+          }
          onSelect={menuSelect}
        >
          {{
            default: () => {
-              const { renderMenuItem } = useRenderMenuItem(unref(menuMode))
+              const { renderMenuItem } = useRenderMenuItem()
              return renderMenuItem(unref(routers))
            }
          }}
@ -123,30 +128,10 @@ export default defineComponent({
 <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-menu';

-// .is-active--after {
-//   position: absolute;
-//   top: 0;
-//   right: 0;
-//   width: 4px;
-//   height: 100%;
-//   background-color: var(--el-color-primary);
-//   content: '';
-// }
-
 .@{prefix-cls} {
  position: relative;
  transition: width var(--transition-time-02);

-  // &:after {
-  //   position: absolute;
-  //   top: 0;
-  //   right: 0;
-  //   height: 100%;
-  //   width: 1px;
-  //   background-color: var(--el-border-color);
-  //   content: '';
-  // }
-
  :deep(.@{elNamespace}-menu) {
    width: 100% !important;
    border-right: none;
@ -155,7 +140,6 @@ export default defineComponent({
    .is-active {
      & > .@{elNamespace}-sub-menu__title {
        color: var(--left-menu-text-active-color) !important;
-        // background-color: var(--left-menu-bg-color) !important;
      }
    }

@ -180,10 +164,6 @@ export default defineComponent({

    .@{elNamespace}-menu-item.is-active {
      position: relative;
-
-      // &:after {
-      //   .is-active--after;
-      // }
    }

    // 设置子菜单的背景颜色
@ -203,16 +183,11 @@ export default defineComponent({
    & > .is-active > .@{elNamespace}-sub-menu__title {
      position: relative;
      background-color: var(--left-menu-collapse-bg-active-color) !important;
-
-      // &:after {
-      //   .is-active--after;
-      // }
    }
  }

  // 折叠动画的时候，就需要把文字给隐藏掉
  :deep(.horizontal-collapse-transition) {
-    // transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
    .@{prefix-cls}__title {
      display: none;
    }
@ -254,23 +229,12 @@ export default defineComponent({
 <style lang="less">
@prefix-cls: ~'@{namespace}-menu-popper';

-// .is-active--after {
-//   position: absolute;
-//   top: 0;
-//   right: 0;
-//   width: 4px;
-//   height: 100%;
-//   background-color: var(--el-color-primary);
-//   content: '';
-// }
-
 .@{prefix-cls}--vertical,
 .@{prefix-cls}--horizontal {
  // 设置选中时子标题的颜色
  .is-active {
    & > .el-sub-menu__title {
      color: var(--left-menu-text-active-color) !important;
-      // background-color: var(--left-menu-bg-color) !important;
    }
  }

@ -291,10 +255,6 @@ export default defineComponent({
    &:hover {
      background-color: var(--left-menu-bg-active-color) !important;
    }
-
-    // &:after {
-    //   .is-active--after;
-    // }
  }
 }
 </style>
--- a/src/components/Menu/src/components/useRenderMenuItem.tsx
+++ b/src/components/Menu/src/components/useRenderMenuItem.tsx
@ -2,57 +2,49 @@ import { ElSubMenu, ElMenuItem } from 'element-plus'
 import { hasOneShowingChild } from '../helper'
 import { isUrl } from '@/utils/is'
 import { useRenderMenuTitle } from './useRenderMenuTitle'
-import { useDesign } from '@/hooks/web/useDesign'
 import { pathResolve } from '@/utils/routerHelper'

 const { renderMenuTitle } = useRenderMenuTitle()

-export const useRenderMenuItem = (
+export const useRenderMenuItem = () =>
  // allRouters: AppRouteRecordRaw[] = [],
-  menuMode: 'vertical' | 'horizontal'
-) => {
-  const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
-    return routers
-      .filter((v) => !v.meta?.hidden)
-      .map((v) => {
-        const meta = v.meta ?? {}
-        const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
-        const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
+  {
+    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
+      return routers
+        .filter((v) => !v.meta?.hidden)
+        .map((v) => {
+          const meta = v.meta ?? {}
+          const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
+          const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')

-        if (
-          oneShowingChild &&
-          (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
-          !meta?.alwaysShow
-        ) {
-          return (
-            <ElMenuItem index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}>
-              {{
-                default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
-              }}
-            </ElMenuItem>
-          )
-        } else {
-          const { getPrefixCls } = useDesign()
+          if (
+            oneShowingChild &&
+            (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
+            !meta?.alwaysShow
+          ) {
+            return (
+              <ElMenuItem
+                index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
+              >
+                {{
+                  default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
+                }}
+              </ElMenuItem>
+            )
+          } else {
+            return (
+              <ElSubMenu index={fullPath}>
+                {{
+                  title: () => renderMenuTitle(meta),
+                  default: () => renderMenuItem(v.children!, fullPath)
+                }}
+              </ElSubMenu>
+            )
+          }
+        })
+    }

-          const preFixCls = getPrefixCls('menu-popper')
-          return (
-            <ElSubMenu
-              index={fullPath}
-              popperClass={
-                menuMode === 'vertical' ? `${preFixCls}--vertical` : `${preFixCls}--horizontal`
-              }
-            >
-              {{
-                title: () => renderMenuTitle(meta),
-                default: () => renderMenuItem(v.children!, fullPath)
-              }}
-            </ElSubMenu>
-          )
-        }
-      })
+    return {
+      renderMenuItem
+    }
  }
-
-  return {
-    renderMenuItem
-  }
-}
--- 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>
    )
  }

--- a/src/components/Menu/src/helper.ts
+++ b/src/components/Menu/src/helper.ts
@ -1,4 +1,3 @@
-import type { RouteMeta } from 'vue-router'
 import { ref, unref } from 'vue'
 import { findPath } from '@/utils/tree'

@ -21,7 +20,7 @@ export const hasOneShowingChild = (
  const onlyOneChild = ref<OnlyOneChildType>()

  const showingChildren = children.filter((v) => {
-    const meta = (v.meta ?? {}) as RouteMeta
+    const meta = v.meta ?? {}
    if (meta.hidden) {
      return false
    } else {
--- a/src/components/Setting/src/Setting.vue
+++ b/src/components/Setting/src/Setting.vue
@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { ElDrawer, ElDivider, ElMessage } from 'element-plus'
-import { ref, unref, computed, watch } from 'vue'
+import { ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
-import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
 import { useCssVar } from '@vueuse/core'
 import { useAppStore } from '@/store/modules/app'
-import { trim, setCssVar } from '@/utils'
+import { trim, setCssVar, getCssVar } from '@/utils'
 import ColorRadioPicker from './components/ColorRadioPicker.vue'
 import InterfaceDisplay from './components/InterfaceDisplay.vue'
 import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
@ -24,8 +23,6 @@ const appStore = useAppStore()

 const { t } = useI18n()

-const layout = computed(() => appStore.getLayout)
-
 const drawer = ref(false)

 // 主题色相关
@ -42,70 +39,28 @@ const setSystemTheme = (color: string) => {
 const headerTheme = ref(appStore.getTheme.topHeaderBgColor || '')

 const setHeaderTheme = (color: string) => {
-  const isDarkColor = colorIsDark(color)
-  const textColor = isDarkColor ? '#fff' : 'inherit'
-  const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
-  const topToolBorderColor = isDarkColor ? color : '#eee'
-  setCssVar('--top-header-bg-color', color)
-  setCssVar('--top-header-text-color', textColor)
-  setCssVar('--top-header-hover-color', textHoverColor)
-  appStore.setTheme({
-    topHeaderBgColor: color,
-    topHeaderTextColor: textColor,
-    topHeaderHoverColor: textHoverColor,
-    topToolBorderColor
-  })
-  if (unref(layout) === 'top') {
-    setMenuTheme(color)
-  }
+  appStore.setHeaderTheme(color)
 }

 // 菜单主题相关
 const menuTheme = ref(appStore.getTheme.leftMenuBgColor || '')

 const setMenuTheme = (color: string) => {
-  const primaryColor = useCssVar('--el-color-primary', document.documentElement)
-  const isDarkColor = colorIsDark(color)
-  const theme: Recordable = {
-    // 左侧菜单边框颜色
-    leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee',
-    // 左侧菜单背景颜色
-    leftMenuBgColor: color,
-    // 左侧菜单浅色背景颜色
-    leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color,
-    // 左侧菜单选中背景颜色
-    leftMenuBgActiveColor: isDarkColor
-      ? 'var(--el-color-primary)'
-      : hexToRGB(unref(primaryColor), 0.1),
-    // 左侧菜单收起选中背景颜色
-    leftMenuCollapseBgActiveColor: isDarkColor
-      ? 'var(--el-color-primary)'
-      : hexToRGB(unref(primaryColor), 0.1),
-    // 左侧菜单字体颜色
-    leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
-    // 左侧菜单选中字体颜色
-    leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
-    // logo字体颜色
-    logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
-    // logo边框颜色
-    logoBorderColor: isDarkColor ? color : '#eee'
-  }
-  appStore.setTheme(theme)
-  appStore.setCssVarTheme()
+  appStore.setMenuTheme(color)
 }

 // 监听layout变化，重置一些主题色
-watch(
-  () => layout.value,
-  (n) => {
-    if (n === 'top' && !appStore.getIsDark) {
-      headerTheme.value = '#fff'
-      setHeaderTheme('#fff')
-    } else {
-      setMenuTheme(unref(menuTheme))
-    }
-  }
-)
+// watch(
+//   () => layout.value,
+//   (n) => {
+//     if (n === 'top' && !appStore.getIsDark) {
+//       headerTheme.value = '#fff'
+//       setHeaderTheme('#fff')
+//     } else {
+//       setMenuTheme(unref(menuTheme))
+//     }
+//   }
+// )

 // 拷贝
 const copyConfig = async () => {
@ -192,6 +147,12 @@ const clear = () => {
  storageClear()
  window.location.reload()
 }
+
+const themeChange = () => {
+  const color = getCssVar('--el-bg-color')
+  setMenuTheme(color)
+  setHeaderTheme(color)
+}
 </script>

 <template>
@ -211,7 +172,7 @@ const clear = () => {
    <div class="text-center">
      <!-- 主题 -->
      <ElDivider>{{ t('setting.theme') }}</ElDivider>
-      <ThemeSwitch />
+      <ThemeSwitch @change="themeChange" />

      <!-- 布局 -->
      <ElDivider>{{ t('setting.layout') }}</ElDivider>
@ -252,23 +213,21 @@ const clear = () => {
      />

      <!-- 菜单主题 -->
-      <template v-if="layout !== 'top'">
-        <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
-        <ColorRadioPicker
-          v-model="menuTheme"
-          :schema="[
-            '#fff',
-            '#001529',
-            '#212121',
-            '#273352',
-            '#191b24',
-            '#383f45',
-            '#001628',
-            '#344058'
-          ]"
-          @change="setMenuTheme"
-        />
-      </template>
+      <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
+      <ColorRadioPicker
+        v-model="menuTheme"
+        :schema="[
+          '#fff',
+          '#001529',
+          '#212121',
+          '#273352',
+          '#191b24',
+          '#383f45',
+          '#001628',
+          '#344058'
+        ]"
+        @change="setMenuTheme"
+      />
    </div>

    <!-- 界面显示 -->
--- a/src/components/TabMenu/src/TabMenu.vue
+++ b/src/components/TabMenu/src/TabMenu.vue
@ -85,6 +85,9 @@ export default defineComponent({
        } else {
          showTitle.value = !collapse
        }
+      },
+      {
+        immediate: true
      }
    )

@ -197,11 +200,12 @@ export default defineComponent({
        </div>
        <Menu
          class={[
-            '!absolute top-0',
+            '!absolute top-0 z-3000',
            {
              '!left-[var(--tab-menu-min-width)]': unref(collapse),
              '!left-[var(--tab-menu-max-width)]': !unref(collapse),
-              '!w-[calc(var(--left-menu-max-width)+1px)]': unref(showMenu) || unref(fixedMenu),
+              '!w-[var(--left-menu-max-width)] border-r-1 border-r-solid border-[var(--el-border-color)]':
+                unref(showMenu) || unref(fixedMenu),
              '!w-0': !unref(showMenu) && !unref(fixedMenu)
            }
          ]}
--- 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,
@ -331,11 +339,13 @@ export default defineComponent({
      const bindValue: Recordable = { ...attrs, ...unref(getProps) }
      delete bindValue.columns
      delete bindValue.data
+      delete bindValue.align
      return bindValue
    })

    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 +356,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 +367,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 +390,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 +403,7 @@ export default defineComponent({
              preview-src-list={[url]}
              preview-teleported
            />
-          ) : (
+          ) : videoPreview.includes(field) ? (
            <BaseButton
              type="primary"
              icon={<Icon icon="ep:video-play" />}
@ -404,7 +415,7 @@ export default defineComponent({
            >
              预览
            </BaseButton>
-          )}
+          ) : null}
        </div>
      )
    }
@ -419,7 +430,8 @@ export default defineComponent({
        headerAlign,
        showOverflowTooltip,
        reserveSelection,
-        preview
+        imagePreview,
+        videoPreview
      } = unref(getProps)

      return (columnsChildren || columns).map((v) => {
@ -434,6 +446,7 @@ export default defineComponent({
              align={v.align || align}
              headerAlign={v.headerAlign || headerAlign}
              label={v.label}
+              fixed={v.fixed}
              width="65px"
            ></ElTableColumn>
          )
@ -458,10 +471,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 +482,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 +556,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)}>
--- a/src/components/Table/src/components/ColumnSetting.vue
+++ b/src/components/Table/src/components/ColumnSetting.vue
@ -0,0 +1,166 @@
+<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)?.length) {
+    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,
+    deep: 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>
--- a/src/components/Table/src/components/TableActions.vue
+++ b/src/components/Table/src/components/TableActions.vue
@ -1,36 +1,30 @@
 <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'
-
-const appStore = useAppStore()
-const sizeMap = computed(() => appStore.sizeMap)
-
-const { t } = useI18n()
+import ColumnSetting from './ColumnSetting.vue'

 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 appStore = useAppStore()
+    const { t } = useI18n()
+    const sizeMap = computed(() => appStore.sizeMap)
+    const showSetting = ref(false)
+
    const refresh = () => {
      emit('refresh')
    }
@ -39,111 +33,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} />
      </>
    )
  }
--- a/src/components/TagsView/src/TagsView.vue
+++ b/src/components/TagsView/src/TagsView.vue
@ -12,6 +12,8 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { useTemplateRefsList } from '@vueuse/core'
 import { ElScrollbar } from 'element-plus'
 import { useScrollTo } from '@/hooks/event/useScrollTo'
+import { useTagsView } from '@/hooks/web/useTagsView'
+import { cloneDeep } from 'lodash-es'

 const { getPrefixCls } = useDesign()

@ -19,7 +21,9 @@ const prefixCls = getPrefixCls('tags-view')

 const { t } = useI18n()

-const { currentRoute, push, replace } = useRouter()
+const { currentRoute, push } = useRouter()
+
+const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTagsView()

 const permissionStore = usePermissionStore()

@ -31,6 +35,10 @@ const visitedViews = computed(() => tagsViewStore.getVisitedViews)

 const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])

+const selectedTag = computed(() => tagsViewStore.getSelectedTag)
+
+const setSelectTag = tagsViewStore.setSelectedTag
+
 const appStore = useAppStore()

 const tagsViewIcon = computed(() => appStore.getTagsViewIcon)
@ -43,66 +51,30 @@ const initTags = () => {
  for (const tag of unref(affixTagArr)) {
    // Must have tag name
    if (tag.name) {
-      tagsViewStore.addVisitedView(tag)
+      tagsViewStore.addVisitedView(cloneDeep(tag))
    }
  }
 }

-const selectedTag = ref<RouteLocationNormalizedLoaded>()
-
 // 新增tag
 const addTags = () => {
  const { name } = unref(currentRoute)
  if (name) {
-    selectedTag.value = unref(currentRoute)
+    setSelectTag(unref(currentRoute))
    tagsViewStore.addView(unref(currentRoute))
  }
-  return false
 }

 // 关闭选中的tag
 const closeSelectedTag = (view: RouteLocationNormalizedLoaded) => {
-  if (view?.meta?.affix) return
-  tagsViewStore.delView(view)
-  if (isActive(view)) {
-    toLastView()
-  }
-}
-
-// 关闭全部
-const closeAllTags = () => {
-  tagsViewStore.delAllViews()
-  toLastView()
-}
-
-// 关闭其它
-const closeOthersTags = () => {
-  tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
-}
-
-// 重新加载
-const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
-  if (!view) return
-  tagsViewStore.delCachedView()
-  const { path, query } = view
-  await nextTick()
-  replace({
-    path: '/redirect' + path,
-    query: query
+  closeCurrent(view, () => {
+    if (isActive(view)) {
+      toLastView()
+    }
  })
 }

-// 关闭左侧
-const closeLeftTags = () => {
-  tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
-}
-
-// 关闭右侧
-const closeRightTags = () => {
-  tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
-}
-
-// 跳转到最后一个
+// 去最后一个
 const toLastView = () => {
  const visitedViews = tagsViewStore.getVisitedViews
  const latestView = visitedViews.slice(-1)[0]
@ -121,6 +93,33 @@ const toLastView = () => {
  }
 }

+// 关闭全部
+const closeAllTags = () => {
+  closeAll(() => {
+    toLastView()
+  })
+}
+
+// 关闭其它
+const closeOthersTags = () => {
+  closeOther()
+}
+
+// 重新加载
+const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
+  refreshPage(view)
+}
+
+// 关闭左侧
+const closeLeftTags = () => {
+  closeLeft()
+}
+
+// 关闭右侧
+const closeRightTags = () => {
+  closeRight()
+}
+
 // 滚动到选中的tag
 const moveToCurrentTag = async () => {
  await nextTick()
@ -211,13 +210,14 @@ const isActive = (route: RouteLocationNormalizedLoaded): boolean => {
 // 所有右键菜单组件的元素
 const itemRefs = useTemplateRefsList<ComponentRef<typeof ContextMenu & ContextMenuExpose>>()

-// 右键菜单装填改变的时候
+// 右键菜单状态改变的时候
 const visibleChange = (visible: boolean, tagItem: RouteLocationNormalizedLoaded) => {
  if (visible) {
    for (const v of unref(itemRefs)) {
      const elDropdownMenuRef = v.elDropdownMenuRef
      if (tagItem.fullPath !== v.tagItem.fullPath) {
        elDropdownMenuRef?.handleClose()
+        setSelectTag(tagItem)
      }
    }
  }
--- a/src/components/ThemeSwitch/src/ThemeSwitch.vue
+++ b/src/components/ThemeSwitch/src/ThemeSwitch.vue
@ -7,6 +7,8 @@ import { useDesign } from '@/hooks/web/useDesign'

 const { getPrefixCls } = useDesign()

+const emit = defineEmits(['change'])
+
 const prefixCls = getPrefixCls('theme-switch')

 const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
@ -23,6 +25,7 @@ const blackColor = 'var(--el-color-black)'

 const themeChange = (val: boolean) => {
  appStore.setIsDark(val)
+  emit('change', val)
 }
 </script>

--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@ -6,7 +6,7 @@ export const SUCCESS_CODE = 0
 /**
 * 请求contentType
 */
-export const CONTENT_TYPE = 'application/json'
+export const CONTENT_TYPE: AxiosContentType = 'application/json'

 /**
 * 请求超时时间
@ -22,3 +22,13 @@ export const NO_REDIRECT_WHITE_LIST = ['/login']
 * 不重置路由白名单
 */
 export const NO_RESET_WHITE_LIST = ['Redirect', 'Login', 'NoFind', 'Root']
+
+/**
+ * 表格默认过滤列设置字段
+ */
+export const DEFAULT_FILTER_COLUMN = ['expand', 'selection']
+
+/**
+ * 是否根据headers->content-type自动转换数据格式
+ */
+export const TRANSFORM_REQUEST_DATA = true
--- a/src/hooks/web/useCrudSchemas.ts
+++ b/src/hooks/web/useCrudSchemas.ts
@ -78,20 +78,14 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {

  for (let i = 0; i < length; i++) {
    const schemaItem = crudSchema[i]
-    // 判断是否隐藏
-    if (!schemaItem?.search?.hidden) {
-      const searchSchemaItem = {
-        component: schemaItem?.search?.component || 'Input',
-        ...schemaItem.search,
-        field: schemaItem.field,
-        label: schemaItem.label
-      }
-
-      // 删除不必要的字段
-      delete searchSchemaItem.hidden
-
-      searchSchema.push(searchSchemaItem)
+    const searchSchemaItem = {
+      component: schemaItem?.search?.component || 'Input',
+      ...schemaItem.search,
+      field: schemaItem.field,
+      label: schemaItem.label
    }
+
+    searchSchema.push(searchSchemaItem)
  }

  return searchSchema
@ -127,19 +121,14 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
  for (let i = 0; i < length; i++) {
    const formItem = crudSchema[i]
    // 判断是否隐藏
-    if (!formItem?.form?.hidden) {
-      const formSchemaItem = {
-        component: formItem?.form?.component || 'Input',
-        ...formItem.form,
-        field: formItem.field,
-        label: formItem.label
-      }
-
-      // 删除不必要的字段
-      delete formSchemaItem.hidden
-
-      formSchema.push(formSchemaItem)
+    const formSchemaItem = {
+      component: formItem?.form?.component || 'Input',
+      ...formItem.form,
+      field: formItem.field,
+      label: formItem.label
    }
+
+    formSchema.push(formSchemaItem)
  }

  return formSchema
--- a/src/hooks/web/usePageLoading.ts
+++ b/src/hooks/web/usePageLoading.ts
@ -1,13 +1,13 @@
 import { useAppStoreWithOut } from '@/store/modules/app'

-const appStore = useAppStoreWithOut()
-
 export const usePageLoading = () => {
  const loadStart = () => {
+    const appStore = useAppStoreWithOut()
    appStore.setPageLoading(true)
  }

  const loadDone = () => {
+    const appStore = useAppStoreWithOut()
    appStore.setPageLoading(false)
  }

--- a/src/hooks/web/useTagsView.ts
+++ b/src/hooks/web/useTagsView.ts
@ -0,0 +1,63 @@
+import { useTagsViewStoreWithOut } from '@/store/modules/tagsView'
+import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router'
+import { computed, nextTick, unref } from 'vue'
+
+export const useTagsView = () => {
+  const tagsViewStore = useTagsViewStoreWithOut()
+
+  const { replace, currentRoute } = useRouter()
+
+  const selectedTag = computed(() => tagsViewStore.getSelectedTag)
+
+  const closeAll = (callback?: Fn) => {
+    tagsViewStore.delAllViews()
+    callback?.()
+  }
+
+  const closeLeft = (callback?: Fn) => {
+    tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+    callback?.()
+  }
+
+  const closeRight = (callback?: Fn) => {
+    tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+    callback?.()
+  }
+
+  const closeOther = (callback?: Fn) => {
+    tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+    callback?.()
+  }
+
+  const closeCurrent = (view?: RouteLocationNormalizedLoaded, callback?: Fn) => {
+    if (view?.meta?.affix) return
+    tagsViewStore.delView(view || unref(currentRoute))
+
+    callback?.()
+  }
+
+  const refreshPage = async (view?: RouteLocationNormalizedLoaded, callback?: Fn) => {
+    tagsViewStore.delCachedView()
+    const { path, query } = view || unref(currentRoute)
+    await nextTick()
+    replace({
+      path: '/redirect' + path,
+      query: query
+    })
+    callback?.()
+  }
+
+  const setTitle = (title: string, path?: string) => {
+    tagsViewStore.setTitle(title, path)
+  }
+
+  return {
+    closeAll,
+    closeLeft,
+    closeRight,
+    closeOther,
+    closeCurrent,
+    refreshPage,
+    setTitle
+  }
+}
--- a/src/hooks/web/useTitle.ts
+++ b/src/hooks/web/useTitle.ts
@ -3,10 +3,10 @@ import { isString } from '@/utils/is'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { useI18n } from '@/hooks/web/useI18n'

-const appStore = useAppStoreWithOut()
-
 export const useTitle = (newTitle?: string) => {
  const { t } = useI18n()
+  const appStore = useAppStoreWithOut()
+
  const title = ref(
    newTitle ? `${appStore.getTitle} - ${t(newTitle as string)}` : appStore.getTitle
  )
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@ -71,8 +71,14 @@ export default defineComponent({

 .@{prefix-cls} {
  background-color: var(--app-content-bg-color);
-  :deep(.@{elNamespace}-scrollbar__view) {
-    height: 100% !important;
+  .@{prefix-cls}-content-scrollbar {
+    & > :deep(.el-scrollbar__wrap) {
+      & > .@{elNamespace}-scrollbar__view {
+        display: flex;
+        height: 100% !important;
+        flex-direction: column;
+      }
+    }
  }
 }
 </style>
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@ -6,10 +6,6 @@ import { computed } from 'vue'

 const appStore = useAppStore()

-const layout = computed(() => appStore.getLayout)
-
-const fixedHeader = computed(() => appStore.getFixedHeader)
-
 const footer = computed(() => appStore.getFooter)

 const tagsViewStore = useTagsViewStore()
@ -17,39 +13,12 @@ const tagsViewStore = useTagsViewStore()
 const getCaches = computed((): string[] => {
  return tagsViewStore.getCachedViews
 })
-
-const tagsView = computed(() => appStore.getTagsView)
 </script>

 <template>
  <section
    :class="[
-      'p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
-      {
-        '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
-          (fixedHeader &&
-            (layout === 'classic' || layout === 'topLeft' || layout === 'top') &&
-            footer) ||
-          (!tagsView && layout === 'top' && footer),
-
-        '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height))]':
-          tagsView && layout === 'top' && footer,
-
-        '!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--top-tool-height)-var(--app-footer-height))]':
-          !fixedHeader && layout === 'classic' && footer,
-
-        '!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
-          !fixedHeader && layout === 'topLeft' && footer,
-
-        // '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height)-var(--top-tool-height))]':
-        //   !fixedHeader && layout === 'top' && footer,
-
-        '!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding))]':
-          fixedHeader && layout === 'cutMenu' && footer,
-
-        '!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding)-var(--tags-view-height))]':
-          !fixedHeader && layout === 'cutMenu' && footer
-      }
+      'flex-1 p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]'
    ]"
  >
    <router-view>
--- a/src/layout/components/ToolHeader.vue
+++ b/src/layout/components/ToolHeader.vue
@ -41,8 +41,7 @@ export default defineComponent({
        id={`${variables.namespace}-tool-header`}
        class={[
          prefixCls,
-          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
-          'dark:bg-[var(--el-bg-color)]'
+          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
        ]}
      >
        {layout.value !== 'top' ? (
--- a/src/main.ts
+++ b/src/main.ts
@ -1,4 +1,6 @@
-// 引入windi css
+import 'vue/jsx'
+
+// 引入unocss
 import '@/plugins/unocss'

 // 导入全局的svg图标
--- a/src/plugins/elementPlus/index.ts
+++ b/src/plugins/elementPlus/index.ts
@ -12,7 +12,13 @@ export const setupElementPlus = (app: App<Element>) => {
    app.use(plugin)
  })

+  // 为了开发环境启动更快，一次性引入所有样式
+  if (import.meta.env.VITE_USE_ALL_ELEMENT_PLUS_STYLE === 'true') {
+    import('element-plus/dist/index.css')
+    return
+  }
+
  components.forEach((component) => {
-    app.component(component.name, component)
+    app.component(component.name!, component)
  })
 }
--- a/src/plugins/svgIcon/index.ts
+++ b/src/plugins/svgIcon/index.ts
@ -1,3 +1 @@
 import 'virtual:svg-icons-register'
-
-import '@purge-icons/generated'
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@ -2,6 +2,10 @@ import { defineStore } from 'pinia'
 import { store } from '../index'
 import { setCssVar, humpToUnderline } from '@/utils'
 import { ElMessage, ComponentSize } from 'element-plus'
+import { colorIsDark, hexToRGB, lighten, mix } from '@/utils/color'
+import { unref } from 'vue'
+import { useCssVar } from '@vueuse/core'
+import { useDark } from '@vueuse/core'

 interface AppState {
  breadcrumb: boolean
@ -239,6 +243,7 @@ export const useAppStore = defineStore('app', {
        document.documentElement.classList.add('light')
        document.documentElement.classList.remove('dark')
      }
+      this.setPrimaryLight()
    },
    setCurrentSize(currentSize: ComponentSize) {
      this.currentSize = currentSize
@ -253,9 +258,76 @@ export const useAppStore = defineStore('app', {
      for (const key in this.theme) {
        setCssVar(`--${humpToUnderline(key)}`, this.theme[key])
      }
+      this.setPrimaryLight()
    },
    setFooter(footer: boolean) {
      this.footer = footer
+    },
+    setPrimaryLight() {
+      if (this.theme.elColorPrimary) {
+        const elColorPrimary = this.theme.elColorPrimary
+        const color = this.isDark ? '#000000' : '#ffffff'
+        const lightList = [3, 5, 7, 8, 9]
+        lightList.forEach((v) => {
+          setCssVar(`--el-color-primary-light-${v}`, mix(color, elColorPrimary, v / 10))
+        })
+        setCssVar(`--el-color-primary-dark-2`, mix(color, elColorPrimary, 0.2))
+      }
+    },
+    setMenuTheme(color: string) {
+      const primaryColor = useCssVar('--el-color-primary', document.documentElement)
+      const isDarkColor = colorIsDark(color)
+      const theme: Recordable = {
+        // 左侧菜单边框颜色
+        leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee',
+        // 左侧菜单背景颜色
+        leftMenuBgColor: color,
+        // 左侧菜单浅色背景颜色
+        leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color,
+        // 左侧菜单选中背景颜色
+        leftMenuBgActiveColor: isDarkColor
+          ? 'var(--el-color-primary)'
+          : hexToRGB(unref(primaryColor), 0.1),
+        // 左侧菜单收起选中背景颜色
+        leftMenuCollapseBgActiveColor: isDarkColor
+          ? 'var(--el-color-primary)'
+          : hexToRGB(unref(primaryColor), 0.1),
+        // 左侧菜单字体颜色
+        leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
+        // 左侧菜单选中字体颜色
+        leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
+        // logo字体颜色
+        logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
+        // logo边框颜色
+        logoBorderColor: isDarkColor ? color : '#eee'
+      }
+      this.setTheme(theme)
+      this.setCssVarTheme()
+    },
+    setHeaderTheme(color: string) {
+      const isDarkColor = colorIsDark(color)
+      const textColor = isDarkColor ? '#fff' : 'inherit'
+      const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
+      const topToolBorderColor = isDarkColor ? color : '#eee'
+      setCssVar('--top-header-bg-color', color)
+      setCssVar('--top-header-text-color', textColor)
+      setCssVar('--top-header-hover-color', textHoverColor)
+      this.setTheme({
+        topHeaderBgColor: color,
+        topHeaderTextColor: textColor,
+        topHeaderHoverColor: textHoverColor,
+        topToolBorderColor
+      })
+      if (this.getLayout === 'top') {
+        this.setMenuTheme(color)
+      }
+    },
+    initTheme() {
+      const isDark = useDark({
+        valueDark: 'dark',
+        valueLight: 'light'
+      })
+      isDark.value = this.getIsDark
    }
  },
  persist: true
--- 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,
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@ -151,3 +151,22 @@ const subtractLight = (color: string, amount: number) => {
  const c = cc < 0 ? 0 : cc
  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
 }
+
+/**
+ * Mixes two colors.
+ *
+ * @param {string} color1 - The first color, should be a 6-digit hexadecimal color code starting with `#`.
+ * @param {string} color2 - The second color, should be a 6-digit hexadecimal color code starting with `#`.
+ * @param {number} [weight=0.5] - The weight of color1 in the mix, should be a number between 0 and 1, where 0 represents 100% of color2, and 1 represents 100% of color1.
+ * @returns {string} The mixed color, a 6-digit hexadecimal color code starting with `#`.
+ */
+export const mix = (color1: string, color2: string, weight: number = 0.5): string => {
+  let color = '#'
+  for (let i = 0; i <= 2; i++) {
+    const c1 = parseInt(color1.substring(1 + i * 2, 3 + i * 2), 16)
+    const c2 = parseInt(color2.substring(1 + i * 2, 3 + i * 2), 16)
+    const c = Math.round(c1 * weight + c2 * (1 - weight))
+    color += c.toString(16).padStart(2, '0')
+  }
+  return color
+}
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -47,6 +47,10 @@ export const setCssVar = (prop: string, val: any, dom = document.documentElement
  dom.style.setProperty(prop, val)
 }

+export const getCssVar = (prop: string, dom = document.documentElement) => {
+  return getComputedStyle(dom).getPropertyValue(prop)
+}
+
 /**
 * 查找数组对象的某个下标
 * @param {Array} ary 查找的数组
@ -122,3 +126,14 @@ export function toAnyString() {
 export function firstUpperCase(str: string) {
  return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
 }
+
+/**
+ * 把对象转为formData
+ */
+export function objToFormData(obj: Recordable) {
+  const formData = new FormData()
+  Object.keys(obj).forEach((key) => {
+    formData.append(key, obj[key])
+  })
+  return formData
+}
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@ -3,7 +3,7 @@ import { LoginForm, RegisterForm } from './components'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { useI18n } from '@/hooks/web/useI18n'
-import { underlineToHump } from '@/utils'
+import { getCssVar, underlineToHump } from '@/utils'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { ref } from 'vue'
@ -26,6 +26,12 @@ const toRegister = () => {
 const toLogin = () => {
  isLogin.value = true
 }
+
+const themeChange = () => {
+  const color = getCssVar('--el-bg-color')
+  appStore.setMenuTheme(color)
+  appStore.setHeaderTheme(color)
+}
 </script>

 <template>
@ -66,7 +72,7 @@ const toLogin = () => {
            </div>

            <div class="flex justify-end items-center space-x-10px">
-              <ThemeSwitch />
+              <ThemeSwitch @change="themeChange" />
              <LocaleDropdown class="lt-xl:text-white dark:text-white" />
            </div>
          </div>
--- a/stylelint.config.js
+++ b/stylelint.config.js
@ -20,12 +20,8 @@ module.exports = {
    'function-no-unknown': null,
    'no-empty-source': null,
    'named-grid-areas-no-invalid': null,
-    'unicode-bom': 'never',
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
-    'declaration-colon-space-after': 'always-single-line',
-    'declaration-colon-space-before': 'never',
-    'declaration-block-trailing-semicolon': null,
    'rule-empty-line-before': [
      'always',
      {
--- a/tsconfig.json
+++ b/tsconfig.json
@ -9,6 +9,7 @@
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
+    "jsxImportSource": "vue",
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "allowJs": true,
--- a/types/global.d.ts
+++ b/types/global.d.ts
@ -30,6 +30,7 @@ declare global {
    | 'application/json'
    | 'application/x-www-form-urlencoded'
    | 'multipart/form-data'
+    | 'text/plain'

  declare type AxiosMethod = 'get' | 'post' | 'delete' | 'put'

--- a/uno.config.ts
+++ b/uno.config.ts
@ -1,9 +1,49 @@
-import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
+import { defineConfig, toEscapedSelector as e, presetUno, presetIcons } from 'unocss'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
+import { loadEnv } from 'vite'
+
+const root = process.cwd()
+
+const createPresetIcons = () => {
+  const isBuild = !!process.argv[4]
+  let env = {} as any
+  if (!isBuild) {
+    env = loadEnv(process.argv[3], root)
+  } else {
+    env = loadEnv(process.argv[4], root)
+  }
+  // @ts-ignore
+  if (env.VITE_USE_ONLINE_ICON === 'true') {
+    return []
+  } else {
+    return [
+      presetIcons({
+        prefix: ''
+        // 由于默认加载的是所有的图标，启动会非常慢，可以在这里去加载需要的图标，确保启动速度
+        // collections: {
+        //   carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
+        //   mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
+        //   logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
+        // }
+      })
+    ]
+  }
+}

 export default defineConfig({
  // ...UnoCSS options
  rules: [
+    [
+      /^overflow-ellipsis$/,
+      ([], { rawSelector }) => {
+        const selector = e(rawSelector)
+        return `
+${selector} {
+  text-overflow: ellipsis;
+}
+`
+      }
+    ],
    [
      /^custom-hover$/,
      ([], { rawSelector }) => {
@ -100,6 +140,11 @@ ${selector}:after {
      }
    ]
  ],
-  presets: [presetUno({ dark: 'class', attributify: false })],
-  transformers: [transformerVariantGroup()]
+  presets: [presetUno({ dark: 'class', attributify: false }), ...createPresetIcons()],
+  transformers: [transformerVariantGroup()],
+  content: {
+    pipeline: {
+      include: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html|ts)($|\?)/]
+    }
+  }
 })
--- a/vite.config.ts
+++ b/vite.config.ts
@ -12,6 +12,7 @@ import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
 import UnoCSS from 'unocss/vite'
+import { visualizer } from 'rollup-plugin-visualizer'

 // https://vitejs.dev/config/
 const root = process.cwd()
@ -39,19 +40,23 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
      }),
      VueJsx(),
      progress(),
-      createStyleImportPlugin({
-        resolves: [ElementPlusResolve()],
-        libs: [{
-          libraryName: 'element-plus',
-          esModule: true,
-          resolveStyle: (name) => {
-            if (name === 'click-outside') {
-              return ''
-            }
-            return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
-          }
-        }]
-      }),
+      env.VITE_USE_ALL_ELEMENT_PLUS_STYLE === 'false'
+        ? createStyleImportPlugin({
+            resolves: [ElementPlusResolve()],
+            libs: [
+              {
+                libraryName: 'element-plus',
+                esModule: true,
+                resolveStyle: (name) => {
+                  if (name === 'click-outside') {
+                    return ''
+                  }
+                  return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
+                }
+              }
+            ]
+          })
+        : undefined,
      EslintPlugin({
        cache: false,
        include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
@ -67,17 +72,19 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
        svgoOptions: true
      }),
      PurgeIcons(),
-      viteMockServe({
-        ignore: /^\_/,
-        mockPath: 'mock',
-        localEnabled: !isBuild,
-        prodEnabled: isBuild,
-        injectCode: `
+      env.VITE_USE_MOCK === 'true'
+        ? viteMockServe({
+            ignore: /^\_/,
+            mockPath: 'mock',
+            localEnabled: !isBuild,
+            prodEnabled: isBuild,
+            injectCode: `
          import { setupProdMockServer } from '../mock/_createProductionServer'

          setupProdMockServer()
          `
-      }),
+          })
+        : undefined,
      ViteEjsPlugin({
        title: env.VITE_APP_TITLE
      }),
@ -106,20 +113,30 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
        }
      ]
    },
+    esbuild: {
+      pure: env.VITE_DROP_CONSOLE === 'true' ? ['console.log'] : undefined,
+      drop: env.VITE_DROP_DEBUGGER === 'true' ? ['debugger'] : undefined
+    },
    build: {
-      minify: 'terser',
+      target: 'es2015',
      outDir: env.VITE_OUT_DIR || 'dist',
-      sourcemap: env.VITE_SOURCEMAP === 'true' ? 'inline' : false,
+      sourcemap: env.VITE_SOURCEMAP === 'true',
      // brotliSize: false,
-      terserOptions: {
-        compress: {
-          drop_debugger: env.VITE_DROP_DEBUGGER === 'true',
-          drop_console: env.VITE_DROP_CONSOLE === 'true'
+      rollupOptions: {
+        plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined,
+        // 拆包
+        output: {
+          manualChunks: {
+            'vue-chunks': ['vue', 'vue-router', 'pinia', 'vue-i18n'],
+            'element-plus': ['element-plus'],
+            'wang-editor': ['@wangeditor/editor', '@wangeditor/editor-for-vue']
+          }
        }
-      }
+      },
+      cssCodeSplit: !(env.VITE_USE_CSS_SPLIT === 'false')
    },
    server: {
-      port: 4000,
+      port: 3005,
      proxy: {
        // 选项写法
        '/api': {
Author	SHA1	Message	Date
kailong321200875	9caa008551	feat: 同步代码	2024-02-22 17:35:05 +08:00
kailong321200875	7c18060e18	feat: 同步代码	2024-02-07 11:07:41 +08:00
kailong321200875	4891f49b7d	feat: 同步代码	2024-01-31 14:23:10 +08:00
kailong321200875	07ca222ee0	mod: 解决冲突	2024-01-29 08:52:17 +08:00
kailong321200875	bfda9f6485	feat: 同步代码	2024-01-29 08:50:16 +08:00
kailong321200875	67a202fef3	feat: 同步代码	2024-01-21 15:09:34 +08:00
kailong321200875	48c5c9af8a	feat: 同步代码	2024-01-18 16:13:14 +08:00
kailong321200875	1af33d8a7e	feat: 同步master	2024-01-16 11:20:49 +08:00
kailong321200875	9eb1356c4e	feat: 同步master	2024-01-09 14:25:23 +08:00
kailong321200875	6a83d08309	feat: 同步master代码	2024-01-03 10:39:42 +08:00