perf: 同步完整版代码

2022-04-06 13:42:49 +08:00
parent 53e19f7971
commit bc8a0f3b35
23 changed files with 496 additions and 400 deletions
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -9,7 +9,6 @@ import {
  useCssModule,
  getCurrentInstance
 } from "vue";
-import rgbHex from "rgb-hex";
 import { find } from "lodash-unified";
 import { getConfig } from "/@/config";
 import { useRouter } from "vue-router";
@@ -40,23 +39,23 @@ const instanceConfig =

 let themeColors = ref<Array<themeColorsType>>([
  // 道奇蓝（默认）
-  { rgb: "27, 42, 71", themeColor: "default" },
+  { color: "#1b2a47", themeColor: "default" },
  // 亮白色
-  { rgb: "255, 255, 255", themeColor: "light" },
+  { color: "#ffffff", themeColor: "light" },
  // 猩红色
-  { rgb: "245, 34, 45", themeColor: "dusk" },
+  { color: "#f5222d", themeColor: "dusk" },
  // 橙红色
-  { rgb: "250, 84, 28", themeColor: "volcano" },
+  { color: "#fa541c", themeColor: "volcano" },
  // 金色
-  { rgb: "250, 219, 20", themeColor: "yellow" },
+  { color: "#fadb14", themeColor: "yellow" },
  // 绿宝石
-  { rgb: "19, 194, 194", themeColor: "mingQing" },
+  { color: "#13c2c2", themeColor: "mingQing" },
  // 酸橙绿
-  { rgb: "82, 196, 26", themeColor: "auroraGreen" },
+  { color: "#52c41a", themeColor: "auroraGreen" },
  // 深粉色
-  { rgb: "235, 47, 150", themeColor: "pink" },
+  { color: "#eb2f96", themeColor: "pink" },
  // 深紫罗兰色
-  { rgb: "114, 46, 209", themeColor: "saucePurple" }
+  { color: "#722ed1", themeColor: "saucePurple" }
 ]);

 const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
@@ -97,8 +96,8 @@ const settings = reactive({
 });

 const getThemeColorStyle = computed(() => {
-  return rgb => {
-    return { background: `rgb(${rgb})` };
+  return color => {
+    return { background: color };
  };
 });

@@ -261,8 +260,7 @@ function setLayoutThemeColor(theme: string) {
    setEpThemeColor(getConfig().EpThemeColor);
  } else {
    const colors = find(themeColors.value, { themeColor: theme });
-    const color = "#" + rgbHex(colors.rgb);
-    setEpThemeColor(color);
+    setEpThemeColor(colors.color);
  }
 }

@@ -359,7 +357,7 @@ nextTick(() => {
      <li
        v-for="(item, index) in themeColors"
        :key="index"
-        :style="getThemeColorStyle(item.rgb)"
+        :style="getThemeColorStyle(item.color)"
        @click="setLayoutThemeColor(item.themeColor)"
      >
        <el-icon
--- a/src/layout/hooks/nav.ts
+++ b/src/layout/hooks/nav.ts
@@ -3,10 +3,10 @@ import { router } from "/@/router";
 import { getConfig } from "/@/config";
 import { emitter } from "/@/utils/mitt";
 import { routeMetaType } from "../types";
+import { remainingPaths } from "/@/router";
 import { transformI18n } from "/@/plugins/i18n";
 import { storageSession } from "/@/utils/storage";
 import { useAppStoreHook } from "/@/store/modules/app";
-import { remainingPaths } from "/@/router/modules/index";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";

 export function useNav() {
--- a/src/layout/theme/auroraGreen-vars.scss
+++ b/src/layout/theme/auroraGreen-vars.scss
@@ -1,11 +0,0 @@
-/* 酸橙绿 */
-$subMenuActiveText: #fff;
-$menuBg: #0b1e15;
-$menuHover: #60ac80;
-$subMenuBg: #000;
-$subMenuActiveBg: #60ac80;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #112f21;
-$menuTitleHover: #fff;
-$menuActiveBefore: #60ac80;
--- a/src/layout/theme/default-vars.scss
+++ b/src/layout/theme/default-vars.scss
@@ -1,29 +0,0 @@
-/**
- * 道奇蓝（默认）
- * 此scss变量文件作为multipleScopeVars去编译时，会自动移除!default以达到变量提升
- * 同时此scss变量文件作为默认主题变量文件，被其他.scss通过 @import 时，必需 !default
-*/
-
-/* 菜单选中后字体样式 */
-$subMenuActiveText: #fff !default;
-
-/* 菜单背景 */
-$menuBg: #001529 !default;
-
-/* 鼠标覆盖到菜单时的背景 */
-$menuHover: #4091f7 !default;
-
-/* 子菜单背景 */
-$subMenuBg: #0f0303 !default;
-
-/* 有无子集的激活菜单背景 */
-$subMenuActiveBg: #4091f7 !default;
-$navTextColor: #fff !default;
-$menuText: rgb(254 254 254 / 65%) !default;
-
-/* logo背景颜色 */
-$sidebarLogo: #002140 !default;
-
-/* 鼠标覆盖到菜单时的字体颜色 */
-$menuTitleHover: #fff !default;
-$menuActiveBefore: #4091f7 !default;
--- a/src/layout/theme/dusk-vars.scss
+++ b/src/layout/theme/dusk-vars.scss
@@ -1,11 +0,0 @@
-/* 猩红色 */
-$subMenuActiveText: #fff;
-$menuBg: #2a0608;
-$menuHover: #e13c39;
-$subMenuBg: #000;
-$subMenuActiveBg: #e13c39;
-$navTextColor: red;
-$menuText: rgb(254 254 254 / 65.1%);
-$sidebarLogo: #42090c;
-$menuTitleHover: #fff;
-$menuActiveBefore: #e13c39;
--- a/src/layout/theme/index.ts
+++ b/src/layout/theme/index.ts
@@ -0,0 +1,136 @@
+const themeColors = {
+  default: {
+    color: "#409EFF",
+    subMenuActiveText: "#fff",
+    menuBg: "#001529",
+    menuHover: "#4091f7",
+    subMenuBg: "#0f0303",
+    subMenuActiveBg: "#4091f7",
+    navTextColor: "#fff",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#002140",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#4091f7"
+  },
+  light: {
+    color: "#409EFF",
+    subMenuActiveText: "#409eff",
+    menuBg: "#fff",
+    menuHover: "#e0ebf6",
+    subMenuBg: "#fff",
+    subMenuActiveBg: "#e0ebf6",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#fff",
+    menuTitleHover: "#000",
+    menuActiveBefore: "#4091f7"
+  },
+  dusk: {
+    color: "#f5222d",
+    subMenuActiveText: "#fff",
+    menuBg: "#2a0608",
+    menuHover: "#e13c39",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#e13c39",
+    navTextColor: "#red",
+    menuText: "rgb(254 254 254 / 65.1%)",
+    sidebarLogo: "#42090c",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#e13c39"
+  },
+  volcano: {
+    color: "#fa541c",
+    subMenuActiveText: "#fff",
+    menuBg: "#2b0e05",
+    menuHover: "#e85f33",
+    subMenuBg: "#0f0603",
+    subMenuActiveBg: "#e85f33",
+    navTextColor: "#fff",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#441708",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#e85f33"
+  },
+  yellow: {
+    color: "#fadb14",
+    subMenuActiveText: "#d25f00",
+    menuBg: "#2b2503",
+    menuHover: "#f6da4d",
+    subMenuBg: "#0f0603",
+    subMenuActiveBg: "#f6da4d",
+    navTextColor: "#fff",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#443b05",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#f6da4d"
+  },
+  mingQing: {
+    color: "#13c2c2",
+    subMenuActiveText: "#fff",
+    menuBg: "#032121",
+    menuHover: "#59bfc1",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#59bfc1",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#053434",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#59bfc1"
+  },
+  auroraGreen: {
+    color: "#52c41a",
+    subMenuActiveText: "#fff",
+    menuBg: "#0b1e15",
+    menuHover: "#60ac80",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#60ac80",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#112f21",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#60ac80"
+  },
+  pink: {
+    color: "#eb2f96",
+    subMenuActiveText: "#fff",
+    menuBg: "#28081a",
+    menuHover: "#d84493",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#d84493",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#3f0d29",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#d84493"
+  },
+  saucePurple: {
+    color: "#722ed1",
+    subMenuActiveText: "#fff",
+    menuBg: "#130824",
+    menuHover: "#693ac9",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#693ac9",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#1f0c38",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#693ac9"
+  }
+};
+
+type MultipleScopeVarsItem = {
+  scopeName: string;
+  path: string;
+  varsContent: string;
+};
+
+export function genScssMultipleScopeVars(): MultipleScopeVarsItem[] {
+  const result = [] as MultipleScopeVarsItem[];
+  Object.keys(themeColors).forEach(key => {
+    result.push({
+      scopeName: `layout-theme-${key}`,
+      varsContent: `$primary-color: ${themeColors[key].color} !default;$vxe-primary-color: $primary-color;$subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;$menuBg: ${themeColors[key].menuBg} !default;$menuHover: ${themeColors[key].menuHover} !default;$subMenuBg: ${themeColors[key].subMenuBg} !default;$subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;$navTextColor: ${themeColors[key].navTextColor} !default;$menuText: ${themeColors[key].menuText} !default;$sidebarLogo: ${themeColors[key].sidebarLogo} !default;$menuTitleHover: ${themeColors[key].menuTitleHover} !default;$menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;`
+    } as MultipleScopeVarsItem);
+  });
+  return result;
+}
--- a/src/layout/theme/light-vars.scss
+++ b/src/layout/theme/light-vars.scss
@@ -1,11 +0,0 @@
-/* 亮白色 */
-$subMenuActiveText: #409eff;
-$menuBg: #fff;
-$menuHover: #e0ebf6;
-$subMenuBg: #fff;
-$subMenuActiveBg: #e0ebf6;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #fff;
-$menuTitleHover: #000;
-$menuActiveBefore: #4091f7;
--- a/src/layout/theme/mingQing-vars.scss
+++ b/src/layout/theme/mingQing-vars.scss
@@ -1,11 +0,0 @@
-/* 绿宝石 */
-$subMenuActiveText: #fff;
-$menuBg: #032121;
-$menuHover: #59bfc1;
-$subMenuBg: #000;
-$subMenuActiveBg: #59bfc1;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #053434;
-$menuTitleHover: #fff;
-$menuActiveBefore: #59bfc1;
--- a/src/layout/theme/pink-vars.scss
+++ b/src/layout/theme/pink-vars.scss
@@ -1,11 +0,0 @@
-/* 深粉色 */
-$subMenuActiveText: #fff;
-$menuBg: #28081a;
-$menuHover: #d84493;
-$subMenuBg: #000;
-$subMenuActiveBg: #d84493;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #3f0d29;
-$menuTitleHover: #fff;
-$menuActiveBefore: #d84493;
--- a/src/layout/theme/saucePurple-vars.scss
+++ b/src/layout/theme/saucePurple-vars.scss
@@ -1,11 +0,0 @@
-/* 深紫罗兰色 */
-$subMenuActiveText: #fff;
-$menuBg: #130824;
-$menuHover: #693ac9;
-$subMenuBg: #000;
-$subMenuActiveBg: #693ac9;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #1f0c38;
-$menuTitleHover: #fff;
-$menuActiveBefore: #693ac9;
--- a/src/layout/theme/volcano-vars.scss
+++ b/src/layout/theme/volcano-vars.scss
@@ -1,11 +0,0 @@
-/* 橙红色 */
-$subMenuActiveText: #fff;
-$menuBg: #2b0e05;
-$menuHover: #e85f33;
-$subMenuBg: #0f0603;
-$subMenuActiveBg: #e85f33;
-$navTextColor: #fff;
-$menuText: rgb(254 254 254 / 65%);
-$sidebarLogo: #441708;
-$menuTitleHover: #fff;
-$menuActiveBefore: #e85f33;
--- a/src/layout/theme/yellow-vars.scss
+++ b/src/layout/theme/yellow-vars.scss
@@ -1,11 +0,0 @@
-/* 金色 */
-$subMenuActiveText: #d25f00;
-$menuBg: #2b2503;
-$menuHover: #f6da4d;
-$subMenuBg: #0f0603;
-$subMenuActiveBg: #f6da4d;
-$navTextColor: #fff;
-$menuText: rgb(254 254 254 / 65%);
-$sidebarLogo: #443b05;
-$menuTitleHover: #fff;
-$menuActiveBefore: #f6da4d;
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -79,7 +79,7 @@ export type childrenType = {
 };

 export type themeColorsType = {
-  rgb: string;
+  color: string;
  themeColor: string;
 };

--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,22 +3,53 @@ import { getConfig } from "/@/config";
 import { toRouteType } from "./types";
 import { openLink } from "/@/utils/link";
 import NProgress from "/@/utils/progress";
-import { constantRoutes } from "./modules";
 import { findIndex } from "lodash-unified";
 import { transformI18n } from "/@/plugins/i18n";
-import remainingRouter from "./modules/remaining";
 import { storageSession } from "/@/utils/storage";
+import { buildHierarchyTree } from "/@/utils/tree";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
-import { Router, RouteMeta, createRouter, RouteRecordName } from "vue-router";
 import {
+  Router,
+  RouteMeta,
+  createRouter,
+  RouteRecordRaw,
+  RouteComponent,
+  RouteRecordName
+} from "vue-router";
+import {
+  ascending,
  initRouter,
  getHistoryMode,
  getParentPaths,
  findRouteByPath,
-  handleAliveRoute
+  handleAliveRoute,
+  formatTwoStageRoutes,
+  formatFlatteningRoutes
 } from "./utils";

+import homeRouter from "./modules/home";
+import errorRouter from "./modules/error";
+import remainingRouter from "./modules/remaining";
+
+// 原始静态路由（未做任何处理）
+const routes = [homeRouter, errorRouter];
+
+// 导出处理后的静态路由（三级及以上的路由全部拍成二级）
+export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
+  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+);
+
+// 用于渲染菜单，保持原始层级
+export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
+  ...remainingRouter
+);
+
+// 不参与菜单的路由
+export const remainingPaths = Object.keys(remainingRouter).map(v => {
+  return remainingRouter[v].path;
+});
+
 // 创建路由实例
 export const router: Router = createRouter({
  history: getHistoryMode(),
--- a/src/router/modules/index.ts
+++ b/src/router/modules/index.ts
@@ -1,30 +0,0 @@
-// 静态路由
-import homeRouter from "./home";
-import errorRouter from "./error";
-import remainingRouter from "./remaining";
-import { RouteRecordRaw, RouteComponent } from "vue-router";
-
-import {
-  ascending,
-  formatTwoStageRoutes,
-  formatFlatteningRoutes
-} from "../utils";
-import { buildHierarchyTree } from "/@/utils/tree";
-
-// 原始静态路由（未做任何处理）
-const routes = [homeRouter, errorRouter];
-
-// 导出处理后的静态路由（三级及以上的路由全部拍成二级）
-export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
-  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
-);
-
-// 用于渲染菜单，保持原始层级
-export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
-  ...remainingRouter
-);
-
-// 不参与菜单的路由
-export const remainingPaths = Object.keys(remainingRouter).map(v => {
-  return remainingRouter[v].path;
-});
--- a/src/store/modules/multiTags.ts
+++ b/src/store/modules/multiTags.ts
@@ -89,7 +89,13 @@ export const useMultiTagsStore = defineStore({
          }
          break;
        case "splice":
-          this.multiTags.splice(position?.startIndex, position?.length);
+          if (!position) {
+            const index = this.multiTags.findIndex(v => v.path === value);
+            if (index === -1) return;
+            this.multiTags.splice(index, 1);
+          } else {
+            this.multiTags.splice(position?.startIndex, position?.length);
+          }
          this.tagsCache(this.multiTags);
          return this.multiTags;
        case "slice":
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -1,9 +1,9 @@
 import { defineStore } from "pinia";
 import { store } from "/@/store";
 import { cacheType } from "./types";
+import { constantMenus } from "/@/router";
 import { cloneDeep } from "lodash-unified";
 import { RouteConfigs } from "/@/layout/types";
-import { constantMenus } from "/@/router/modules";
 import { ascending, filterTree } from "/@/router/utils";

 export const usePermissionStore = defineStore({
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@@ -42,9 +42,10 @@
 }

 /* 动态改变cssvar 用于主题切换 https://github.com/element-plus/element-plus/issues/4856#issuecomment-1000174357 */
-.el-button--primary {
-  --el-button-active-bg-color: var(--el-color-primary-active) !important;
-  --el-button-active-border-color: var(--el-color-primary-active) !important;
+.el-button--primary,
+.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;
 }

 /* button--primary plain */
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -1,5 +1,3 @@
-@import "../layout/theme/default-vars.scss";
-
@mixin merge-style(
  /* vertical模式下主体内容距离网页文档左侧的距离 */ $sideBarWidth
 ) {
--- a/src/utils/tree.ts
+++ b/src/utils/tree.ts
@@ -65,3 +65,55 @@ export function buildHierarchyTree(menuTree, pathList = []) {
  }
  return menuTree;
 }
+
+/**
+ * 广度优先遍历算法，找当前节点
+ * @param {Array} tree 原始树，数组
+ * @param {Number|String} uniqueId 唯一uniqueId
+ * @return {Object} node
+ */
+export function getNodeByUniqueId(menuTree, uniqueId) {
+  if (!Array.isArray(menuTree)) {
+    console.warn("menuTree must be an array");
+    return;
+  }
+  if (!menuTree || menuTree.length === 0) return;
+  const item = menuTree.find(node => node.uniqueId === uniqueId);
+  if (item) return item;
+  const childrenList = menuTree
+    .filter(node => node.children)
+    .map(i => i.children)
+    .flat(1);
+  return getNodeByUniqueId(childrenList, uniqueId);
+}
+
+/**
+ * 向当前唯一uniqueId节点追加字段
+ * @param {Array} {menuTree 菜单树}
+ * @param {Number|String} uniqueId 唯一uniqueId
+ * @param {Object} fields 唯一uniqueId
+ * @return {menuTree} 追加字段后的树
+ */
+export function appendFieldByUniqueId(
+  menuTree: Array<any>,
+  uniqueId: Number | String,
+  fields: Object
+) {
+  if (!Array.isArray(menuTree)) {
+    console.warn("menuTree must be an array");
+    return;
+  }
+  if (!menuTree || menuTree.length === 0) return {};
+  for (const node of menuTree) {
+    const hasChildren = node.children && node.children.length > 0;
+    if (
+      node.uniqueId === uniqueId &&
+      Object.prototype.toString.call(fields) === "[object Object]"
+    )
+      Object.assign(node, fields);
+    if (hasChildren) {
+      appendFieldByUniqueId(node.children, uniqueId, fields);
+    }
+  }
+  return menuTree;
+}