feat: 添加运行、打包信息, 使用`lodash-unified`替换`lodash-es`, `lodash-unified`支持`ESM`

build/info.ts

@@ -0,0 +1,85 @@
+import { readdir, stat } from "fs";
+import type { Plugin } from "vite";
+import dayjs, { Dayjs } from "dayjs";
+import { sum } from "lodash-unified";
+import duration from "dayjs/plugin/duration";
+import { green, blue, bold } from "picocolors";
+dayjs.extend(duration);
+
+const staticPath = "dist";
+const fileListTotal: number[] = [];
+
+const recursiveDirectory = (folder: string, callback: Function): void => {
+  readdir(folder, (err, files: string[]) => {
+    if (err) throw err;
+    let count = 0;
+    const checkEnd = () => {
+      ++count == files.length && callback();
+    };
+    files.forEach((item: string) => {
+      stat(folder + "/" + item, async (err, stats) => {
+        if (err) throw err;
+        if (stats.isFile()) {
+          fileListTotal.push(stats.size);
+          checkEnd();
+        } else if (stats.isDirectory()) {
+          recursiveDirectory(`${staticPath}/${item}/`, checkEnd);
+        }
+      });
+    });
+    files.length === 0 && callback();
+  });
+};
+
+const formatBytes = (a: number, b?: number): string => {
+  if (0 == a) return "0 Bytes";
+  const c = 1024,
+    d = b || 2,
+    e = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
+    f = Math.floor(Math.log(a) / Math.log(c));
+  return parseFloat((a / Math.pow(c, f)).toFixed(d)) + " " + e[f];
+};
+
+export function viteBuildInfo(): Plugin {
+  let config: { command: string };
+  let startTime: Dayjs;
+  let endTime: Dayjs;
+  return {
+    name: "vite:buildInfo",
+    configResolved(resolvedConfig: { command: string }) {
+      config = resolvedConfig;
+    },
+    buildStart() {
+      console.log(
+        bold(
+          green(
+            `👏欢迎使用${blue(
+              "[vue-pure-admin]"
+            )}，如果您感觉不错，记得点击后面链接给个star哦💖 https://github.com/xiaoxian521/vue-pure-admin`
+          )
+        )
+      );
+      if (config.command === "build") {
+        startTime = dayjs(new Date());
+      }
+    },
+    closeBundle() {
+      if (config.command === "build") {
+        endTime = dayjs(new Date());
+        recursiveDirectory(staticPath, () => {
+          console.log(
+            bold(
+              green(
+                `恭喜打包完成🎉（总用时${dayjs
+                  .duration(endTime.diff(startTime))
+                  .format("mm分ss秒")}，打包后的大小为${formatBytes(
+                  sum(fileListTotal)
+                )}）`
+              )
+            )
+          );
+        });
+      }
+    }
+  };
+}

build/plugins.ts

@@ -1,4 +1,5 @@
 import vue from "@vitejs/plugin-vue";
+import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
 import legacy from "@vitejs/plugin-legacy";
 import vueJsx from "@vitejs/plugin-vue-jsx";
@@ -21,6 +22,7 @@ export function getPluginsList(command, VITE_LEGACY) {
     WindiCSS(),
     // 线上环境删除console
     removeConsole(),
+    viteBuildInfo(),
     // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
     liveReload(["src/layout/**/*", "src/router/**/*"]),
     // 自定义主题

package.json

@@ -40,10 +40,11 @@
     "dayjs": "^1.10.7",
     "driver.js": "^0.9.8",
     "echarts": "^5.3.0",
-    "element-plus": "^2.0.2",
+    "element-plus": "^2.0.3",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",
     "lodash-es": "^4.17.21",
+    "lodash-unified": "^1.0.2",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
@@ -75,6 +76,7 @@
     "@iconify/vue": "^3.1.3",
     "@types/element-resize-detector": "1.1.3",
     "@types/js-cookie": "^3.0.1",
+    "@types/lodash-es": "^4.17.6",
     "@types/mockjs": "1.0.3",
     "@types/node": "14.14.14",
     "@types/nprogress": "0.2.0",
@@ -95,6 +97,7 @@
     "font-awesome": "^4.7.0",
     "husky": "^7.0.4",
     "lint-staged": "11.1.2",
+    "picocolors": "^1.0.0",
     "postcss": "^8.4.6",
     "postcss-html": "^1.3.0",
     "postcss-import": "14.0.0",
@@ -102,7 +105,7 @@
     "prettier": "^2.5.1",
     "pretty-quick": "3.1.1",
     "rimraf": "3.0.2",
-    "rollup-plugin-visualizer": "^5.5.4",
+    "rollup-plugin-visualizer": "^5.6.0",
     "sass": "^1.49.7",
     "sass-loader": "^12.4.0",
     "stylelint": "^14.3.0",

pnpm-lock.yaml

@@ -14,6 +14,7 @@ specifiers:
   "@logicflow/extension": 0.7.1
   "@types/element-resize-detector": 1.1.3
   "@types/js-cookie": ^3.0.1
+  "@types/lodash-es": ^4.17.6
   "@types/mockjs": 1.0.3
   "@types/node": 14.14.14
   "@types/nprogress": 0.2.0
@@ -38,7 +39,7 @@ specifiers:
   dayjs: ^1.10.7
   driver.js: ^0.9.8
   echarts: ^5.3.0
-  element-plus: ^2.0.2
+  element-plus: ^2.0.3
   element-resize-detector: ^1.2.3
   eslint: ^8.8.0
   eslint-plugin-prettier: ^4.0.0
@@ -48,10 +49,12 @@ specifiers:
   js-cookie: ^3.0.1
   lint-staged: 11.1.2
   lodash-es: ^4.17.21
+  lodash-unified: ^1.0.2
   mitt: ^3.0.0
   mockjs: ^1.1.0
   nprogress: ^0.2.0
   path: ^0.12.7
+  picocolors: ^1.0.0
   pinia: ^2.0.11
   postcss: ^8.4.6
   postcss-html: ^1.3.0
@@ -64,7 +67,7 @@ specifiers:
   responsive-storage: ^1.0.11
   rgb-hex: ^4.0.0
   rimraf: 3.0.2
-  rollup-plugin-visualizer: ^5.5.4
+  rollup-plugin-visualizer: ^5.6.0
   sass: ^1.49.7
   sass-loader: ^12.4.0
   stylelint: ^14.3.0
@@ -111,10 +114,11 @@ dependencies:
   dayjs: 1.10.7
   driver.js: 0.9.8
   echarts: 5.3.0
-  element-plus: 2.0.2_vue@3.2.31
+  element-plus: 2.0.3_1a412d14def5ff5ca1122000e4bee666
   element-resize-detector: 1.2.4
   js-cookie: 3.0.1
   lodash-es: 4.17.21
+  lodash-unified: 1.0.2_f567d1d3c0c6a67669f03af7a1aa4dad
   mitt: 3.0.0
   mockjs: 1.1.0
   nprogress: 0.2.0
@@ -146,6 +150,7 @@ devDependencies:
   "@iconify/vue": 3.1.3_vue@3.2.31
   "@types/element-resize-detector": 1.1.3
   "@types/js-cookie": 3.0.1
+  "@types/lodash-es": 4.17.6
   "@types/mockjs": 1.0.3
   "@types/node": 14.14.14
   "@types/nprogress": 0.2.0
@@ -166,6 +171,7 @@ devDependencies:
   font-awesome: 4.7.0
   husky: 7.0.4
   lint-staged: 11.1.2
+  picocolors: 1.0.0
   postcss: 8.4.6
   postcss-html: 1.3.0
   postcss-import: 14.0.0_postcss@8.4.6
@@ -173,7 +179,7 @@ devDependencies:
   prettier: 2.5.1
   pretty-quick: 3.1.1_prettier@2.5.1
   rimraf: 3.0.2
-  rollup-plugin-visualizer: 5.5.4
+  rollup-plugin-visualizer: 5.6.0
   sass: 1.49.7
   sass-loader: 12.4.0_sass@1.49.7
   stylelint: 14.5.0
@@ -1175,6 +1181,22 @@ packages:
       }
     dev: true
 
+  /@types/lodash-es/4.17.6:
+    resolution:
+      {
+        integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==
+      }
+    dependencies:
+      "@types/lodash": 4.14.179
+    dev: true
+
+  /@types/lodash/4.14.179:
+    resolution:
+      {
+        integrity: sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==
+      }
+    dev: true
+
   /@types/minimatch/3.0.5:
     resolution:
       {
@@ -2964,10 +2986,10 @@ packages:
       }
     dev: true
 
-  /element-plus/2.0.2_vue@3.2.31:
+  /element-plus/2.0.3_1a412d14def5ff5ca1122000e4bee666:
     resolution:
       {
-        integrity: sha512-URjC0HwwiqtlLxqTmHXQ31WXrdAq4ChWyyn52OcQs3PRsnMPfahGVq2AWnfzzlzlhVeI5lY3HQiuB1zDathS+g==
+        integrity: sha512-k+b4V4sGmgOpOYjrAWyp0k+N1mVaIZQ9LpbXWvmJNzE+j21DYOe9m1zGn5mFDPgeLOZcUS7QzzwYAommhwFj0g==
       }
     peerDependencies:
       vue: ^3.2.0
@@ -2980,7 +3002,7 @@ packages:
       dayjs: 1.10.7
       lodash: 4.17.21
       lodash-es: 4.17.21
-      lodash-unified: 1.0.1_lodash-es@4.17.21+lodash@4.17.21
+      lodash-unified: 1.0.2_da03a4540fbd16bbaafbb96724306afd
       memoize-one: 6.0.0
       normalize-wheel-es: 1.1.1
       vue: 3.2.31
@@ -4652,20 +4674,35 @@ packages:
       }
     dev: false
 
-  /lodash-unified/1.0.1_lodash-es@4.17.21+lodash@4.17.21:
+  /lodash-unified/1.0.2_da03a4540fbd16bbaafbb96724306afd:
     resolution:
       {
-        integrity: sha512-Py+twfpWn+2dFQWCuGcp21WiQRwZwnm1cyE3piSt/VtBVKVyxlR58WgOVRzXtmdmDRGJKH8F8GPaA29WK/yK8g==
+        integrity: sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==
       }
     peerDependencies:
       "@types/lodash-es": "*"
       lodash: "*"
       lodash-es: "*"
     dependencies:
+      "@types/lodash-es": 4.17.6
       lodash: 4.17.21
       lodash-es: 4.17.21
     dev: false
 
+  /lodash-unified/1.0.2_f567d1d3c0c6a67669f03af7a1aa4dad:
+    resolution:
+      {
+        integrity: sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==
+      }
+    peerDependencies:
+      "@types/lodash-es": "*"
+      lodash: "*"
+      lodash-es: "*"
+    dependencies:
+      "@types/lodash-es": 4.17.6
+      lodash-es: 4.17.21
+    dev: false
+
   /lodash.get/4.4.2:
     resolution: { integrity: sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk= }
     dev: true
@@ -6147,10 +6184,10 @@ packages:
       glob: 7.2.0
     dev: true
 
-  /rollup-plugin-visualizer/5.5.4:
+  /rollup-plugin-visualizer/5.6.0:
     resolution:
       {
-        integrity: sha512-CJQFUuZ75S1daGEkk62UH7lL6UFCoP86Sn/iz4gXBdamdwFeD5nPGCHHXfXCrly/wNgQOYTH7cdcxk4+OG3Xjw==
+        integrity: sha512-CKcc8GTUZjC+LsMytU8ocRr/cGZIfMR7+mdy4YnlyetlmIl/dM8BMnOEpD4JPIGt+ZVW7Db9ZtSsbgyeBH3uTA==
       }
     engines: { node: ">=12" }
     hasBin: true

src/layout/components/setting/index.vue

@@ -10,7 +10,7 @@ import {
   getCurrentInstance
 } from "vue";
 import rgbHex from "rgb-hex";
-import { find } from "lodash-es";
+import { find } from "lodash-unified";
 import { getConfig } from "/@/config";
 import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";

src/layout/components/sidebar/breadCrumb.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import { isEqual } from "lodash-es";
+import { isEqual } from "lodash-unified";
 import { transformI18n } from "/@/plugins/i18n";
 import { getParentPaths, findRouteByPath } from "/@/router/utils";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";

src/layout/components/tag/index.vue

@@ -21,10 +21,10 @@ import closeRight from "/@/assets/svg/close_right.svg?component";
 
 import { emitter } from "/@/utils/mitt";
 import { $t as t } from "/@/plugins/i18n";
-import { isEqual, isEmpty } from "lodash-es";
 import { transformI18n } from "/@/plugins/i18n";
 import { storageLocal } from "/@/utils/storage";
 import { useRoute, useRouter } from "vue-router";
+import { isEqual, isEmpty } from "lodash-unified";
 import { RouteConfigs, tagsViewsType } from "../../types";
 import { useSettingStoreHook } from "/@/store/modules/settings";
 import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";

src/plugins/i18n/index.ts

@@ -1,6 +1,6 @@
 // 多组件库的国际化和本地项目国际化兼容
 import { App } from "vue";
-import { set } from "lodash-es";
+import { set } from "lodash-unified";
 import { createI18n } from "vue-i18n";
 import { localesConfigs } from "./config";
 import { storageLocal } from "/@/utils/storage";

src/router/index.ts

@@ -2,8 +2,8 @@ import { toRouteType } from "./types";
 import { openLink } from "/@/utils/link";
 import NProgress from "/@/utils/progress";
 import { constantRoutes } from "./modules";
-import { split, findIndex } from "lodash-es";
 import { transformI18n } from "/@/plugins/i18n";
+import { split, findIndex } from "lodash-unified";
 import remainingRouter from "./modules/remaining";
 import { storageSession } from "/@/utils/storage";
 import { Title } from "../../public/serverConfig.json";

src/store/modules/multiTags.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { store } from "/@/store";
-import { isEqual } from "lodash-es";
+import { isEqual } from "lodash-unified";
 import { storageLocal } from "/@/utils/storage";
 import { multiType, positionType } from "./types";
 

src/store/modules/permission.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { store } from "/@/store";
 import { cacheType } from "./types";
-import { cloneDeep } from "lodash-es";
+import { cloneDeep } from "lodash-unified";
 import { RouteConfigs } from "/@/layout/types";
 import { constantMenus } from "/@/router/modules";
 import { ascending, filterTree } from "/@/router/utils";

src/style/element-plus.scss

@@ -38,25 +38,14 @@
 
 /* 动态改变cssvar 用于主题切换 https://github.com/element-plus/element-plus/issues/4856#issuecomment-1000174357 */
 .el-button--primary {
-  --el-button-bg-color: var(--el-color-primary) !important;
-  --el-button-border-color: var(--el-color-primary) !important;
-  --el-button-hover-bg-color: var(--el-color-primary-light-2) !important;
-  --el-button-hover-border-color: var(--el-color-primary-light-2) !important;
   --el-button-active-bg-color: var(--el-color-primary-active) !important;
   --el-button-active-border-color: var(--el-color-primary-active) !important;
 }
 
 /* button--primary plain */
 .el-button--primary.is-plain {
-  --el-button-bg-color: var(--el-color-primary-light-9) !important;
-  --el-button-border-color: var(--el-color-primary-light-6) !important;
-  --el-button-hover-bg-color: var(--el-color-primary-light-1) !important;
-  --el-button-hover-border-color: var(--el-color-primary) !important;
   --el-button-active-bg-color: var(--el-color-primary) !important;
   --el-button-active-border-color: var(--el-color-primary) !important;
-  --el-button-text-color: var(--el-color-primary) !important;
-  --el-button-hover-text-color: var(--el-color-white) !important;
-  --el-button-active-text-color: var(--el-color-white) !important;
 }
 
 /* nprogress适配ep的primary */

src/views/system/dict/index.vue

@@ -5,11 +5,11 @@ export default {
 </script>
 
 <script setup lang="ts">
-import Config from "./config.vue";
-import { reactive, ref, unref, nextTick } from "vue";
 import XEUtils from "xe-utils";
-import { cloneDeep } from "lodash-es";
+import Config from "./config.vue";
+import { cloneDeep } from "lodash-unified";
 import { templateRef } from "@vueuse/core";
+import { reactive, ref, unref, nextTick } from "vue";
 import { useCopyToClipboard } from "/@/utils/useCopyToClipboard";
 import {
   VXETable,