perf: 同步完整版代码

.env.staging

@@ -0,0 +1,14 @@
+# 预发布也需要生产环境的行为
+# https://cn.vitejs.dev/guide/env-and-mode.html#modes
+NODE_ENV=production
+
+VITE_PUBLIC_PATH = /
+
+# 线上环境路由历史模式
+VITE_ROUTER_HISTORY = "hash"
+
+# 线上环境后端地址
+VITE_PROXY_DOMAIN_REAL = ""
+
+# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
+VITE_LEGACY = false

build/plugins.ts

@@ -7,7 +7,7 @@ import vueJsx from "@vitejs/plugin-vue-jsx";
 import WindiCSS from "vite-plugin-windicss";
 import { viteMockServe } from "vite-plugin-mock";
 import VueI18n from "@intlify/vite-plugin-vue-i18n";
-import ElementPlus from "unplugin-element-plus/vite";
+// import ElementPlus from "unplugin-element-plus/vite";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import themePreprocessorPlugin from "@pureadmin/theme";
@@ -34,25 +34,19 @@ export function getPluginsList(command, VITE_LEGACY) {
     themePreprocessorPlugin({
       scss: {
         multipleScopeVars: genScssMultipleScopeVars(),
-        // 默认取 multipleScopeVars[0].scopeName
-        defaultScopeName: "",
         // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
         extract: true,
-        // 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
-        outputDir: "",
         // 会选取defaultScopeName对应的主题css文件在html添加link
         themeLinkTagId: "head",
         // "head"||"head-prepend" || "body" ||"body-prepend"
         themeLinkTagInjectTo: "head",
         // 是否对抽取的css文件内对应scopeName的权重类名移除
-        removeCssScopeName: false,
-        // 可以自定义css文件名称的函数
-        customThemeCssFileName: scopeName => scopeName
+        removeCssScopeName: false
       }
     }),
     // svg组件化支持
     svgLoader(),
-    ElementPlus({}),
+    // ElementPlus({}),
     // mock支持
     viteMockServe({
       mockPath: "mock",

package.json

@@ -6,6 +6,7 @@
     "dev": "cross-env --max_old_space_size=4096 vite",
     "serve": "pnpm dev",
     "build": "rimraf dist && cross-env vite build",
+    "build:staging": "rimraf dist && cross-env vite build --mode staging",
     "report": "rimraf dist && cross-env vite build",
     "preview": "vite preview",
     "preview:build": "pnpm build && vite preview",
@@ -27,14 +28,14 @@
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.0",
     "@pureadmin/components": "^1.0.6",
-    "@vueuse/core": "^8.2.6",
+    "@vueuse/core": "^8.3.1",
     "@vueuse/motion": "^2.0.0-beta.12",
-    "@vueuse/shared": "^8.2.6",
+    "@vueuse/shared": "^8.3.1",
     "animate.css": "^4.1.1",
     "axios": "^0.26.1",
     "css-color-function": "^1.3.3",
     "dayjs": "^1.11.0",
-    "element-plus": "^2.1.9",
+    "element-plus": "^2.1.10",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
@@ -62,8 +63,8 @@
     "@iconify-icons/fa-solid": "^1.2.2",
     "@iconify-icons/ri": "^1.2.1",
     "@iconify/vue": "^3.2.0",
-    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
-    "@pureadmin/theme": "^0.0.1",
+    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
+    "@pureadmin/theme": "^1.1.0",
     "@types/element-resize-detector": "1.1.3",
     "@types/js-cookie": "^3.0.1",
     "@types/lodash": "^4.14.180",
@@ -79,7 +80,7 @@
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.5",
     "cross-env": "7.0.3",
     "eslint": "^8.8.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -96,7 +97,7 @@
     "rimraf": "3.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.49.9",
+    "sass": "^1.50.1",
     "stylelint": "^14.3.0",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
@@ -104,11 +105,9 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^4.6.3",
-    "unplugin-element-plus": "^0.4.0",
     "vite": "^2.9.5",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-remove-console": "^0.0.7",
-    "vite-plugin-style-import": "1.4.1",
     "vite-plugin-windicss": "^1.8.4",
     "vite-svg-loader": "2.2.0",
     "vue-eslint-parser": "^8.2.0",

src/layout/components/sidebar/sidebarItem.vue

@@ -148,7 +148,7 @@ function resolvePath(routePath) {
       :class="{ 'submenu-title-noDropdown': !isNest }"
       :style="getNoDropdownStyle"
     >
-      <div class="el-icon" v-show="props.item.meta.icon">
+      <div class="sub-menu-icon" v-show="props.item.meta.icon">
         <component
           :is="
             useRenderIcon(
@@ -216,10 +216,7 @@ function resolvePath(routePath) {
     popper-append-to-body
   >
     <template #title>
-      <div
-        v-show="props.item.meta.icon"
-        :class="['el-icon', props.item.meta.icon]"
-      >
+      <div v-show="props.item.meta.icon" class="sub-menu-icon">
         <component
           :is="useRenderIcon(props.item.meta && props.item.meta.icon)"
         />

src/main.ts

@@ -1,15 +1,16 @@
 import App from "./App.vue";
 import router from "./router";
 import { setupStore } from "/@/store";
+import ElementPlus from "element-plus";
 import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { useI18n } from "../src/plugins/i18n";
 import { MotionPlugin } from "@vueuse/motion";
-import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";
 
 import "animate.css";
 import "virtual:windi.css";
+import "element-plus/dist/index.css";
 // 导入公共样式
 import "./style/index.scss";
 import "@pureadmin/components/dist/index.css";
@@ -41,6 +42,6 @@ getServerConfig(app).then(async config => {
   await router.isReady();
   injectResponsiveStorage(app, config);
   setupStore(app);
-  app.use(MotionPlugin).use(useI18n).use(useElementPlus);
+  app.use(MotionPlugin).use(useI18n).use(ElementPlus);
   app.mount("#app");
 });

src/style/element-plus.scss

@@ -53,12 +53,6 @@
   --el-button-active-border-color: var(--el-color-primary) !important;
 }
 
-/* button--primary plain */
-.el-button--primary.is-plain {
-  --el-button-active-bg-color: var(--el-color-primary) !important;
-  --el-button-active-border-color: var(--el-color-primary) !important;
-}
-
 /* nprogress适配ep的primary */
 #nprogress {
   & .bar {

src/style/sidebar.scss

@@ -14,10 +14,19 @@
     }
   }
 
+  .sub-menu-icon {
+    vertical-align: middle;
+    margin-right: 5px;
+    font-size: 18px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .main-container {
     height: 100vh;
     min-height: 100%;
-    transition: margin-left 0.28s;
+    transition: margin-left 0.1s;
     margin-left: $sideBarWidth;
     position: relative;
     background: #f0f2f5;
@@ -29,7 +38,7 @@
     right: 0;
     z-index: 998;
     width: calc(100% - 210px);
-    transition: width 0.28s;
+    transition: width 0.1s;
   }
 
   .main-hidden {
@@ -49,7 +58,7 @@
   }
 
   .sidebar-container {
-    transition: width 0.28s;
+    transition: width 0.1s;
     width: $sideBarWidth !important;
     background: $menuBg;
     height: 100%;
@@ -489,8 +498,8 @@
     > .el-sub-menu__title::before {
     position: absolute;
     top: 0;
-    left: 0;
-    width: 3px;
+    left: 2px;
+    width: 2px;
     height: 100%;
     background-color: $menuActiveBefore;
     content: "";
@@ -503,7 +512,7 @@
   .el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
     position: absolute;
     top: 0;
-    width: 3px;
+    width: 2px;
     height: 100%;
     background-color: $menuActiveBefore;
     content: "";
@@ -527,7 +536,7 @@
   .mobile {
     .fixed-header {
       width: 100% !important;
-      transition: width 0.28s;
+      transition: width 0.1s;
     }
 
     .main-container {
@@ -535,7 +544,7 @@
     }
 
     .sidebar-container {
-      transition: transform 0.28s;
+      transition: transform 0.1s;
       width: $sideBarWidth;
     }
 
@@ -572,7 +581,7 @@ body[layout="vertical"] {
   .hideSidebar {
     .fixed-header {
       width: calc(100% - 54px);
-      transition: width 0.28s;
+      transition: width 0.1s;
     }
 
     .sidebar-container {
@@ -606,17 +615,25 @@ body[layout="vertical"] {
         }
       }
 
+      .submenu-title-noDropdown {
+        background: transparent !important;
+      }
+
       /* 有无子菜单 */
       .el-sub-menu__title,
       .el-menu-item [class^="el-icon"] {
-        right: 5px;
+        right: 2px;
       }
 
-      .submenu-title-noDropdown {
-        background: transparent !important;
+      .el-menu-tooltip__trigger {
+        padding: 0 18px;
       }
     }
   }
+
+  .sub-menu-icon {
+    width: 24px;
+  }
 }
 
 body[layout="horizontal"] {
@@ -640,7 +657,7 @@ body[layout="mix"] {
   .hideSidebar {
     .fixed-header {
       width: calc(100% - 54px);
-      transition: width 0.28s;
+      transition: width 0.1s;
     }
 
     .sidebar-container {

src/utils/debounce/index.ts

@@ -1,12 +1,39 @@
+import { unref } from "vue";
+import type { Ref } from "vue";
+
+type FunctionArgs<Args extends any[] = any[], Return = void> = (
+  ...args: Args
+) => Return;
+
+type MaybeRef<T> = T | Ref<T>;
+
 // 延迟函数
 export const delay = (timeout: number) =>
   new Promise(resolve => setTimeout(resolve, timeout));
 
-// 防抖函数
-export const debounce = (fn: () => Fn, timeout: number) => {
+/**
+ * 防抖函数
+ * @param fn 函数
+ * @param timeout 延迟时间
+ * @param immediate 是否立即执行
+ * @returns
+ */
+export const debounce = <T extends FunctionArgs>(
+  fn: T,
+  timeout: MaybeRef<number> = 200,
+  immediate = false
+) => {
   let timmer: TimeoutHandle;
+  const wait = unref(timeout);
   return () => {
-    timmer ? clearTimeout(timmer) : null;
-    timmer = setTimeout(fn, timeout);
+    timmer && clearTimeout(timmer);
+    if (immediate) {
+      if (!timmer) {
+        fn();
+      }
+      timmer = setTimeout(() => (timmer = null), wait);
+    } else {
+      timmer = setTimeout(fn, wait);
+    }
   };
 };

vite.config.ts

@@ -78,22 +78,14 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
     },
     plugins: getPluginsList(command, VITE_LEGACY),
     optimizeDeps: {
-      include: [
-        "pinia",
-        "vue-i18n",
-        "lodash-es",
-        "@vueuse/core",
-        "@iconify/vue",
-        "element-plus/lib/locale/lang/en",
-        "element-plus/lib/locale/lang/zh-cn"
-      ],
+      include: ["pinia", "vue-i18n", "lodash-es", "@vueuse/core"],
       exclude: ["@pureadmin/theme/dist/browser-utils"]
     },
     build: {
       sourcemap: false,
       brotliSize: false,
       // 消除打包大小超过500kb警告
-      chunkSizeWarningLimit: 2000
+      chunkSizeWarningLimit: 4000
     },
     define: {
       __INTLIFY_PROD_DEVTOOLS__: false,