refactor: 优化主题色 (#842)

* refactor: 优化主题色

* chore: 移除`yellow`金色主题配色

* perf: 优化左侧菜单的右边框，使其不再突兀

* style: 所有层级的子菜单字体大小跟顶级菜单保持一致都是`14px`

* chore: 默认亮白色`light`主题配色，并按照感官调整主题色顺序

* fix: 修复亮白主题配色，切换暗色主题后再切回亮色主题时，无法恢复之前的亮白主题配色

* style: 统一亮白主题配色下顶部菜单和混合菜单的`logo`和右侧操作功能颜色

public/platform-config.json

@@ -7,7 +7,7 @@
   "KeepAlive": true,
   "Locale": "zh",
   "Layout": "vertical",
-  "Theme": "default",
+  "Theme": "light",
   "DarkMode": false,
   "Grey": false,
   "Weak": false,

src/layout/components/panel/index.vue

@@ -120,7 +120,7 @@ onBeforeUnmount(() => {
   right: 0;
   z-index: 40000;
   width: 100%;
-  max-width: 300px;
+  max-width: 280px;
   height: 100vh;
   box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);

src/layout/components/setting/index.vue

@@ -194,7 +194,8 @@ function setLayoutModel(layout: string) {
     theme: layoutTheme.value.theme,
     darkMode: $storage.layout?.darkMode,
     sidebarStatus: $storage.layout?.sidebarStatus,
-    epThemeColor: $storage.layout?.epThemeColor
+    epThemeColor: $storage.layout?.epThemeColor,
+    themeColor: layoutTheme.value.theme
   };
   useAppStoreHook().setLayout(layout);
 }
@@ -411,7 +412,7 @@ onBeforeMount(() => {
     cursor: pointer;
     border-radius: 4px;
 
-    &:nth-child(2) {
+    &:nth-child(1) {
       border: 1px solid #ddd;
     }
   }

src/layout/components/sidebar/leftCollapse.vue

@@ -66,6 +66,6 @@ const toggleClick = () => {
   width: 100%;
   height: 40px;
   line-height: 40px;
-  box-shadow: 0 0 6px -2px var(--el-color-primary);
+  box-shadow: 0 0 6px -3px var(--el-color-primary);
 }
 </style>

src/layout/hooks/useDataThemeChange.ts

@@ -18,24 +18,22 @@ import {
 export function useDataThemeChange() {
   const { layoutTheme, layout } = useLayout();
   const themeColors = ref<Array<themeColorsType>>([
-    /* 道奇蓝（默认） */
-    { color: "#1b2a47", themeColor: "default" },
     /* 亮白色 */
     { color: "#ffffff", themeColor: "light" },
+    /* 道奇蓝 */
+    { color: "#1b2a47", themeColor: "default" },
+    /* 深紫罗兰色 */
+    { color: "#722ed1", themeColor: "saucePurple" },
+    /* 深粉色 */
+    { color: "#eb2f96", themeColor: "pink" },
     /* 猩红色 */
     { color: "#f5222d", themeColor: "dusk" },
     /* 橙红色 */
     { color: "#fa541c", themeColor: "volcano" },
-    /* 金色 */
-    { color: "#fadb14", themeColor: "yellow" },
     /* 绿宝石 */
     { color: "#13c2c2", themeColor: "mingQing" },
     /* 酸橙绿 */
-    { color: "#52c41a", themeColor: "auroraGreen" },
-    /* 深粉色 */
-    { color: "#eb2f96", themeColor: "pink" },
-    /* 深紫罗兰色 */
-    { color: "#722ed1", themeColor: "saucePurple" }
+    { color: "#52c41a", themeColor: "auroraGreen" }
   ]);
 
   const { $storage } = useGlobal<GlobalPropertiesApi>();
@@ -50,17 +48,23 @@ export function useDataThemeChange() {
   }
 
   /** 设置导航主题色 */
-  function setLayoutThemeColor(theme = getConfig().Theme ?? "default") {
+  function setLayoutThemeColor(
+    theme = getConfig().Theme ?? "light",
+    isClick = true
+  ) {
     layoutTheme.value.theme = theme;
     toggleTheme({
       scopeName: `layout-theme-${theme}`
     });
+    // 如果非isClick，保留之前的themeColor
+    const storageThemeColor = $storage.layout.themeColor;
     $storage.layout = {
       layout: layout.value,
       theme,
       darkMode: dataTheme.value,
       sidebarStatus: $storage.layout?.sidebarStatus,
-      epThemeColor: $storage.layout?.epThemeColor
+      epThemeColor: $storage.layout?.epThemeColor,
+      themeColor: isClick ? theme : storageThemeColor
     };
 
     if (theme === "default" || theme === "light") {
@@ -93,14 +97,17 @@ export function useDataThemeChange() {
   /** 亮色、暗色整体风格切换 */
   function dataThemeChange() {
     if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
-      setLayoutThemeColor("default");
+      setLayoutThemeColor("default", false);
     } else {
-      setLayoutThemeColor(useEpThemeStoreHook().epTheme);
+      setLayoutThemeColor(useEpThemeStoreHook().epTheme, false);
     }
 
     if (dataTheme.value) {
       document.documentElement.classList.add("dark");
     } else {
+      if ($storage.layout.themeColor === "light") {
+        setLayoutThemeColor("light", false);
+      }
       document.documentElement.classList.remove("dark");
     }
   }

src/layout/hooks/useLayout.ts

@@ -24,10 +24,11 @@ export function useLayout() {
     if (!$storage.layout) {
       $storage.layout = {
         layout: $config?.Layout ?? "vertical",
-        theme: $config?.Theme ?? "default",
+        theme: $config?.Theme ?? "light",
         darkMode: $config?.DarkMode ?? false,
         sidebarStatus: $config?.SidebarStatus ?? true,
-        epThemeColor: $config?.EpThemeColor ?? "#409EFF"
+        epThemeColor: $config?.EpThemeColor ?? "#409EFF",
+        themeColor: $config?.Theme ?? "light"
       };
     }
     /** 灰色模式、色弱模式、隐藏标签页 */

src/layout/index.vue

@@ -68,7 +68,8 @@ function setTheme(layoutModel: string) {
     theme: $storage.layout?.theme,
     darkMode: $storage.layout?.darkMode,
     sidebarStatus: $storage.layout?.sidebarStatus,
-    epThemeColor: $storage.layout?.epThemeColor
+    epThemeColor: $storage.layout?.epThemeColor,
+    themeColor: $storage.layout?.themeColor
   };
 }
 

src/layout/theme/index.ts

@@ -6,6 +6,19 @@ import type { multipleScopeVarsOptions } from "@pureadmin/theme";
 
 /** 预设主题色 */
 const themeColors = {
+  /* 亮白色 */
+  light: {
+    subMenuActiveText: "#000000d9",
+    menuBg: "#fff",
+    menuHover: "#e0ebf6",
+    subMenuBg: "#fff",
+    subMenuActiveBg: "#e0ebf6",
+    menuText: "rgb(0 0 0 / 60%)",
+    sidebarLogo: "#fff",
+    menuTitleHover: "#000",
+    menuActiveBefore: "#4091f7"
+  },
+  /* 道奇蓝 */
   default: {
     subMenuActiveText: "#fff",
     menuBg: "#001529",
@@ -17,17 +30,31 @@ const themeColors = {
     menuTitleHover: "#fff",
     menuActiveBefore: "#4091f7"
   },
-  light: {
-    subMenuActiveText: "#409eff",
-    menuBg: "#fff",
-    menuHover: "#e0ebf6",
-    subMenuBg: "#fff",
-    subMenuActiveBg: "#e0ebf6",
+  /* 深紫罗兰色 */
+  saucePurple: {
+    subMenuActiveText: "#fff",
+    menuBg: "#130824",
+    menuHover: "#693ac9",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#693ac9",
     menuText: "#7a80b4",
-    sidebarLogo: "#fff",
-    menuTitleHover: "#000",
-    menuActiveBefore: "#4091f7"
+    sidebarLogo: "#1f0c38",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#693ac9"
   },
+  /* 深粉色 */
+  pink: {
+    subMenuActiveText: "#fff",
+    menuBg: "#28081a",
+    menuHover: "#d84493",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#d84493",
+    menuText: "#7a80b4",
+    sidebarLogo: "#3f0d29",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#d84493"
+  },
+  /* 猩红色 */
   dusk: {
     subMenuActiveText: "#fff",
     menuBg: "#2a0608",
@@ -39,6 +66,7 @@ const themeColors = {
     menuTitleHover: "#fff",
     menuActiveBefore: "#e13c39"
   },
+  /* 橙红色 */
   volcano: {
     subMenuActiveText: "#fff",
     menuBg: "#2b0e05",
@@ -50,17 +78,7 @@ const themeColors = {
     menuTitleHover: "#fff",
     menuActiveBefore: "#e85f33"
   },
-  yellow: {
-    subMenuActiveText: "#d25f00",
-    menuBg: "#2b2503",
-    menuHover: "#f6da4d",
-    subMenuBg: "#0f0603",
-    subMenuActiveBg: "#f6da4d",
-    menuText: "rgb(254 254 254 / 65%)",
-    sidebarLogo: "#443b05",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#f6da4d"
-  },
+  /* 绿宝石 */
   mingQing: {
     subMenuActiveText: "#fff",
     menuBg: "#032121",
@@ -72,6 +90,7 @@ const themeColors = {
     menuTitleHover: "#fff",
     menuActiveBefore: "#59bfc1"
   },
+  /* 酸橙绿 */
   auroraGreen: {
     subMenuActiveText: "#fff",
     menuBg: "#0b1e15",
@@ -82,28 +101,6 @@ const themeColors = {
     sidebarLogo: "#112f21",
     menuTitleHover: "#fff",
     menuActiveBefore: "#60ac80"
-  },
-  pink: {
-    subMenuActiveText: "#fff",
-    menuBg: "#28081a",
-    menuHover: "#d84493",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#d84493",
-    menuText: "#7a80b4",
-    sidebarLogo: "#3f0d29",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#d84493"
-  },
-  saucePurple: {
-    subMenuActiveText: "#fff",
-    menuBg: "#130824",
-    menuHover: "#693ac9",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#693ac9",
-    menuText: "#7a80b4",
-    sidebarLogo: "#1f0c38",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#693ac9"
   }
 };
 

src/store/modules/epTheme.ts

@@ -23,8 +23,6 @@ export const useEpThemeStore = defineStore({
     fill(state) {
       if (state.epTheme === "light") {
         return "#409eff";
-      } else if (state.epTheme === "yellow") {
-        return "#d25f00";
       } else {
         return "#fff";
       }

src/style/sidebar.scss

@@ -83,7 +83,7 @@
     overflow: hidden;
     font-size: 0;
     background: $menuBg;
-    box-shadow: 0 0 1px #888;
+    border-right: 1px solid var(--pure-border-color);
 
     /* 展开动画 */
     transition: width var(--pure-transition-duration);
@@ -193,7 +193,7 @@
     .el-menu .el-menu--inline .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
-      font-size: 12px;
+      font-size: 14px;
       background-color: $subMenuBg !important;
     }
 
@@ -247,7 +247,7 @@
 
       .el-menu-item {
         span {
-          font-size: 12px;
+          font-size: 14px;
         }
       }
     }
@@ -270,7 +270,7 @@
     /* 子菜单中还有子菜单 */
     .el-menu .el-sub-menu__title {
       min-width: $sideBarWidth !important;
-      font-size: 12px;
+      font-size: 14px;
       background-color: $subMenuBg !important;
     }
 
@@ -333,7 +333,7 @@
         background-color: $subMenuBg;
 
         span {
-          font-size: 12px;
+          font-size: 14px;
         }
       }
 
@@ -351,7 +351,7 @@
     /* 子菜单中还有子菜单 */
     .el-menu .el-sub-menu__title {
       min-width: $sideBarWidth !important;
-      font-size: 12px;
+      font-size: 14px;
       background-color: $subMenuBg !important;
 
       &:hover {

src/utils/responsive.ts

@@ -15,11 +15,13 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
       // layout模式以及主题
       layout: Storage.getData("layout", nameSpace) ?? {
         layout: config.Layout ?? "vertical",
-        theme: config.Theme ?? "default",
+        theme: config.Theme ?? "light",
         darkMode: config.DarkMode ?? false,
         sidebarStatus: config.SidebarStatus ?? true,
-        epThemeColor: config.EpThemeColor ?? "#409EFF"
+        epThemeColor: config.EpThemeColor ?? "#409EFF",
+        themeColor: config.Theme ?? "light" // 主题色（对应项目配置中的主题色，与theme不同的是它不会受到亮色、暗色整体风格切换的影响，只会在手动点击主题色时改变）
       },
+      // 项目配置-界面显示
       configure: Storage.getData("configure", nameSpace) ?? {
         grey: config.Grey ?? false,
         weak: config.Weak ?? false,

types/global.d.ts

@@ -1,11 +1,4 @@
-import type {
-  VNode,
-  FunctionalComponent,
-  PropType as VuePropType,
-  ComponentPublicInstance
-} from "vue";
 import type { ECharts } from "echarts";
-import type { IconifyIcon } from "@iconify/vue";
 import type { TableColumns } from "@pureadmin/table";
 
 /**
@@ -129,6 +122,7 @@ declare global {
     hideFooter?: boolean;
     sidebarStatus?: boolean;
     epThemeColor?: string;
+    themeColor?: string;
     showLogo?: boolean;
     showModel?: string;
     mapConfigure?: {
@@ -155,6 +149,7 @@ declare global {
       darkMode?: boolean;
       sidebarStatus?: boolean;
       epThemeColor?: string;
+      themeColor?: string;
     };
     configure: {
       grey?: boolean;

types/router.d.ts

@@ -1,6 +1,7 @@
 // 全局路由类型声明
 
-import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
+import type { RouteComponent, RouteLocationNormalized } from "vue-router";
+import type { FunctionalComponent } from "vue";
 
 declare global {
   interface ToRouteType extends RouteLocationNormalized {