feat: 同步代码

.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

.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

.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

.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

.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

.gitignore

@@ -6,3 +6,4 @@ dist-ssr
 /dist*
 *-lock.*
 pnpm-debug
+stats.html

.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"

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": "3.4.15",
-    "vue-i18n": "9.8.0",
+    "vue-draggable-plus": "^0.3.5",
-    "vue-json-pretty": "^2.2.4",
+    "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/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/config-conventional": "^18.6.0",
-    "@iconify/json": "^2.2.153",
+    "@iconify/json": "^2.2.180",
-    "@intlify/unplugin-vue-i18n": "^1.5.0",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
-    "@purge-icons/generated": "^0.10.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/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/parser": "^6.21.0",
-    "@unocss/transformer-variant-group": "^0.58.0",
+    "@unocss/transformer-variant-group": "^0.58.5",
-    "@vitejs/plugin-legacy": "^5.2.0",
+    "@vitejs/plugin-legacy": "^5.3.0",
-    "@vitejs/plugin-vue": "^4.5.1",
+    "@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-define-config": "^2.1.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vue": "^9.21.1",
     "esno": "^4.0.0",
     "fs-extra": "^11.2.0",
-    "husky": "^8.0.3",
+    "husky": "^9.0.10",
-    "inquirer": "^9.2.12",
+    "inquirer": "^9.2.14",
     "less": "^4.2.0",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.2",
-    "plop": "^4.0.0",
+    "plop": "^4.0.1",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.34",
-    "postcss-html": "^1.5.0",
+    "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",
+    "rollup": "^4.9.6",
-    "stylelint": "^15.11.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "stylelint": "^16.2.1",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recommended": "^13.0.0",
+    "stylelint-config-recommended": "^14.0.0",
-    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard": "^36.0.0",
-    "stylelint-order": "^6.0.3",
+    "stylelint-order": "^6.0.4",
-    "terser": "^5.25.0",
+    "terser": "^5.27.0",
     "typescript": "5.3.3",
-    "unocss": "^0.58.0",
+    "unocss": "^0.58.5",
-    "vite": "5.0.6",
+    "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": {

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

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

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>

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 {
+.@{elNamespace}-form--inline {
-  width: 245px;
+  :deep(.el-form-item__content) {
+    & > :first-child {
+      min-width: 229.5px;
+    }
+  }
+  .@{elNamespace}-input-number {
+    // 229.5px是兼容el-input-number的最小宽度,
+    min-width: 229.5px;
+  }
 }
 </style>

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) {
+    &:hover {
       // stylelint-disable-next-line
       color: v-bind(hoverColor) !important;
     }
   }
 }
+
+.iconify {
+  &:hover {
+    // stylelint-disable-next-line
+    color: v-bind(hoverColor) !important;
+  }
+}
 </style>

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>

src/components/Menu/src/components/useRenderMenuItem.tsx

@@ -2,15 +2,13 @@ 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)
@@ -25,23 +23,17 @@ export const useRenderMenuItem = (
             !meta?.alwaysShow
           ) {
             return (
-            <ElMenuItem index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}>
+              <ElMenuItem
+                index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
+              >
                 {{
                   default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
                 }}
               </ElMenuItem>
             )
           } else {
-          const { getPrefixCls } = useDesign()
-
-          const preFixCls = getPrefixCls('menu-popper')
             return (
-            <ElSubMenu
+              <ElSubMenu index={fullPath}>
-              index={fullPath}
-              popperClass={
-                menuMode === 'vertical' ? `${preFixCls}--vertical` : `${preFixCls}--horizontal`
-              }
-            >
                 {{
                   title: () => renderMenuTitle(meta),
                   default: () => renderMenuItem(v.children!, fullPath)
@@ -55,4 +47,4 @@ export const useRenderMenuItem = (
     return {
       renderMenuItem
     }
-}
+  }

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>
     )
   }
 

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 {

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)
+  appStore.setHeaderTheme(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)
-  }
 }
 
 // 菜单主题相关
 const menuTheme = ref(appStore.getTheme.leftMenuBgColor || '')
 
 const setMenuTheme = (color: string) => {
-  const primaryColor = useCssVar('--el-color-primary', document.documentElement)
+  appStore.setMenuTheme(color)
-  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()
 }
 
 // 监听layout变化，重置一些主题色
-watch(
+// watch(
-  () => layout.value,
+//   () => layout.value,
-  (n) => {
+//   (n) => {
-    if (n === 'top' && !appStore.getIsDark) {
+//     if (n === 'top' && !appStore.getIsDark) {
-      headerTheme.value = '#fff'
+//       headerTheme.value = '#fff'
-      setHeaderTheme('#fff')
+//       setHeaderTheme('#fff')
-    } else {
+//     } else {
-      setMenuTheme(unref(menuTheme))
+//       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,7 +213,6 @@ const clear = () => {
       />
 
       <!-- 菜单主题 -->
-      <template v-if="layout !== 'top'">
       <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
       <ColorRadioPicker
         v-model="menuTheme"
@@ -268,7 +228,6 @@ const clear = () => {
         ]"
         @change="setMenuTheme"
       />
-      </template>
     </div>
 
     <!-- 界面显示 -->

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)
             }
           ]}

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
+            let isPreview = false
-            if (preview.length) {
+            isPreview =
-              isImageUrl = preview.some((item) => (item as string) === v.field)
+              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
+                  : isPreview
-                    ? renderPreview(get(data.row, v.field))
+                    ? 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
+              let isPreview = false
-              if (preview.length) {
+              isPreview =
-                isImageUrl = preview.some((item) => (item as string) === v.field)
+                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
+                    : isPreview
-                      ? renderPreview(get(data.row, v.field))
+                      ? 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)}>

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>

src/components/Table/src/components/TableActions.vue

@@ -1,36 +1,30 @@
 <script lang="tsx">
-import { defineComponent, unref, computed, PropType, watch } from 'vue'
+import { defineComponent, unref, computed, PropType, ref } from 'vue'
-import {
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, ComponentSize } from 'element-plus'
-  ElTooltip,
-  ElDropdown,
-  ElDropdownMenu,
-  ElDropdownItem,
-  ComponentSize
-  // ElPopover,
-  // ElTree
-} 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 ColumnSetting from './ColumnSetting.vue'
-// import { eachTree } from '@/utils/tree'
-
-const appStore = useAppStore()
-const sizeMap = computed(() => appStore.sizeMap)
-
-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 appStore = useAppStore()
+    const { t } = useI18n()
+    const sizeMap = computed(() => appStore.sizeMap)
+    const showSetting = ref(false)
+
     const refresh = () => {
       emit('refresh')
     }
@@ -39,50 +33,36 @@ export default defineComponent({
       emit('changSize', size)
     }
 
-    const columns = computed(() => {
+    const confirm = (columns: TableColumn[]) => {
-      return cloneDeep(props.columns).filter((v) => {
+      emit('confirm', columns)
-        // 去掉type为selection的列和expand的列
-        if (v.type !== 'selection' && v.type !== 'expand') {
-          return v
     }
-      })
-    })
 
-    watch(
+    const showColumnSetting = () => {
-      () => columns.value,
+      showSetting.value = true
-      (newColumns) => {
-        console.log('columns change：', newColumns)
-      },
-      {
-        deep: true
     }
-    )
 
     return () => (
       <>
         <div class="text-right h-28px flex items-center justify-end">
-          <ElTooltip content={t('common.refresh')} placement="top">
+          <div title="刷新" class="w-30px h-20px flex items-center justify-end" onClick={refresh}>
-            <span onClick={refresh}>
             <Icon
               icon="ant-design:sync-outlined"
               class="cursor-pointer"
               hover-color="var(--el-color-primary)"
             />
-            </span>
+          </div>
-          </ElTooltip>
 
-          <ElTooltip content={t('common.size')} placement="top">
           <ElDropdown trigger="click" onCommand={changSize}>
             {{
               default: () => {
                 return (
-                    <span>
+                  <div title="尺寸" class="w-30px h-20px flex items-center justify-end">
                     <Icon
                       icon="ant-design:column-height-outlined"
-                        class="cursor-pointer mr-8px ml-8px"
+                      class="cursor-pointer"
                       hover-color="var(--el-color-primary)"
                     />
-                    </span>
+                  </div>
                 )
               },
               dropdown: () => {
@@ -104,46 +84,20 @@ export default defineComponent({
               }
             }}
           </ElDropdown>
-          </ElTooltip>
 
-          {/* <ElTooltip content={t('common.columnSetting')} placement="top"> */}
+          <div
-          {/* <ElPopover trigger="click" placement="left">
+            title="列设置"
-            {{
+            class="w-30px h-20px flex items-center justify-end"
-              default: () => {
+            onClick={showColumnSetting}
-                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>
-                )
-              },
-              reference: () => {
-                return (
             <Icon
               icon="ant-design:setting-outlined"
               class="cursor-pointer"
-                    hoverColor="var(--el-color-primary)"
+              hover-color="var(--el-color-primary)"
             />
-                )
-              }
-            }}
-          </ElPopover> */}
-          {/* </ElTooltip> */}
           </div>
+        </div>
+        <ColumnSetting v-model={showSetting.value} columns={props.columns} onConfirm={confirm} />
       </>
     )
   }

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
+  closeCurrent(view, () => {
-  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
   })
 }
 
-// 关闭左侧
+// 去最后一个
-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)
       }
     }
   }

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>
 

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

src/hooks/web/useCrudSchemas.ts

@@ -78,8 +78,6 @@ 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,
@@ -87,12 +85,8 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
       label: schemaItem.label
     }
 
-      // 删除不必要的字段
-      delete searchSchemaItem.hidden
-
     searchSchema.push(searchSchemaItem)
   }
-  }
 
   return searchSchema
 }
@@ -127,7 +121,6 @@ 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,
@@ -135,12 +128,8 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
       label: formItem.label
     }
 
-      // 删除不必要的字段
-      delete formSchemaItem.hidden
-
     formSchema.push(formSchemaItem)
   }
-  }
 
   return formSchema
 }

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)
   }
 

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
+  }
+}

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
   )

src/layout/Layout.vue

@@ -71,8 +71,14 @@ export default defineComponent({
 
 .@{prefix-cls} {
   background-color: var(--app-content-bg-color);
-  :deep(.@{elNamespace}-scrollbar__view) {
+  .@{prefix-cls}-content-scrollbar {
+    & > :deep(.el-scrollbar__wrap) {
+      & > .@{elNamespace}-scrollbar__view {
+        display: flex;
         height: 100% !important;
+        flex-direction: column;
+      }
+    }
   }
 }
 </style>

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)]',
+      '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)]'
-      {
-        '!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
-      }
     ]"
   >
     <router-view>

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',
+          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
-          'dark:bg-[var(--el-bg-color)]'
         ]}
       >
         {layout.value !== 'top' ? (

src/main.ts

@@ -1,4 +1,6 @@
-// 引入windi css
+import 'vue/jsx'
+
+// 引入unocss
 import '@/plugins/unocss'
 
 // 导入全局的svg图标

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)
   })
 }

src/plugins/svgIcon/index.ts

@@ -1,3 +1 @@
 import 'virtual:svg-icons-register'
-
-import '@purge-icons/generated'

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

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,

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
+}

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
+}

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>

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',
       {

tsconfig.json

@@ -9,6 +9,7 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
+    "jsxImportSource": "vue",
     "lib": ["esnext", "dom"],
     "baseUrl": "./",
     "allowJs": true,

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'
 

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 })],
+  presets: [presetUno({ dark: 'class', attributify: false }), ...createPresetIcons()],
-  transformers: [transformerVariantGroup()]
+  transformers: [transformerVariantGroup()],
+  content: {
+    pipeline: {
+      include: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html|ts)($|\?)/]
+    }
+  }
 })

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,9 +40,11 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       }),
       VueJsx(),
       progress(),
-      createStyleImportPlugin({
+      env.VITE_USE_ALL_ELEMENT_PLUS_STYLE === 'false'
+        ? createStyleImportPlugin({
             resolves: [ElementPlusResolve()],
-        libs: [{
+            libs: [
+              {
                 libraryName: 'element-plus',
                 esModule: true,
                 resolveStyle: (name) => {
@@ -50,8 +53,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
                   }
                   return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
                 }
-        }]
+              }
-      }),
+            ]
+          })
+        : undefined,
       EslintPlugin({
         cache: false,
         include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
@@ -67,7 +72,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         svgoOptions: true
       }),
       PurgeIcons(),
-      viteMockServe({
+      env.VITE_USE_MOCK === 'true'
+        ? viteMockServe({
             ignore: /^\_/,
             mockPath: 'mock',
             localEnabled: !isBuild,
@@ -77,7 +83,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
 
           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: {
+      rollupOptions: {
-        compress: {
+        plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined,
-          drop_debugger: env.VITE_DROP_DEBUGGER === 'true',
+        // 拆包
-          drop_console: env.VITE_DROP_CONSOLE === 'true'
+        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': {