refactor: 优化主题色 (#842)

* refactor: 优化主题色

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

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

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

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

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

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

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"
       };
     }
     /** 灰色模式、色弱模式、隐藏标签页 */