fix: theme (#281)

* fix: theme

src/layout/theme/index.ts

@@ -1,6 +1,10 @@
+import { EpThemeColor } from "../../../public/serverConfig.json";
+
+// 将vxe默认主题色和ep默认主题色保持一致
+const vxeColor = EpThemeColor;
 const themeColors = {
   default: {
-    color: "#409EFF",
+    vxeColor,
     subMenuActiveText: "#fff",
     menuBg: "#001529",
     menuHover: "#4091f7",
@@ -13,7 +17,7 @@ const themeColors = {
     menuActiveBefore: "#4091f7"
   },
   light: {
-    color: "#409EFF",
+    vxeColor,
     subMenuActiveText: "#409eff",
     menuBg: "#fff",
     menuHover: "#e0ebf6",
@@ -26,7 +30,7 @@ const themeColors = {
     menuActiveBefore: "#4091f7"
   },
   dusk: {
-    color: "#f5222d",
+    vxeColor: "#f5222d",
     subMenuActiveText: "#fff",
     menuBg: "#2a0608",
     menuHover: "#e13c39",
@@ -39,7 +43,7 @@ const themeColors = {
     menuActiveBefore: "#e13c39"
   },
   volcano: {
-    color: "#fa541c",
+    vxeColor: "#fa541c",
     subMenuActiveText: "#fff",
     menuBg: "#2b0e05",
     menuHover: "#e85f33",
@@ -52,7 +56,7 @@ const themeColors = {
     menuActiveBefore: "#e85f33"
   },
   yellow: {
-    color: "#fadb14",
+    vxeColor: "#fadb14",
     subMenuActiveText: "#d25f00",
     menuBg: "#2b2503",
     menuHover: "#f6da4d",
@@ -65,7 +69,7 @@ const themeColors = {
     menuActiveBefore: "#f6da4d"
   },
   mingQing: {
-    color: "#13c2c2",
+    vxeColor: "#13c2c2",
     subMenuActiveText: "#fff",
     menuBg: "#032121",
     menuHover: "#59bfc1",
@@ -78,7 +82,7 @@ const themeColors = {
     menuActiveBefore: "#59bfc1"
   },
   auroraGreen: {
-    color: "#52c41a",
+    vxeColor: "#52c41a",
     subMenuActiveText: "#fff",
     menuBg: "#0b1e15",
     menuHover: "#60ac80",
@@ -91,7 +95,7 @@ const themeColors = {
     menuActiveBefore: "#60ac80"
   },
   pink: {
-    color: "#eb2f96",
+    vxeColor: "#eb2f96",
     subMenuActiveText: "#fff",
     menuBg: "#28081a",
     menuHover: "#d84493",
@@ -104,7 +108,7 @@ const themeColors = {
     menuActiveBefore: "#d84493"
   },
   saucePurple: {
-    color: "#722ed1",
+    vxeColor: "#722ed1",
     subMenuActiveText: "#fff",
     menuBg: "#130824",
     menuHover: "#693ac9",
@@ -120,7 +124,6 @@ const themeColors = {
 
 type MultipleScopeVarsItem = {
   scopeName: string;
-  path: string;
   varsContent: string;
 };
 
@@ -129,7 +132,19 @@ export function genScssMultipleScopeVars(): 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;`
+      varsContent: `
+        $vxe-primary-color: ${themeColors[key].vxeColor} !default;
+        $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;

src/store/modules/epTheme.ts

@@ -28,7 +28,7 @@ export const useEpThemeStore = defineStore({
     }
   },
   actions: {
-    setEpThemeColor(newColor) {
+    setEpThemeColor(newColor: string): void {
       const layout = storageLocal.getItem("responsive-layout");
       this.epTheme = layout?.theme;
       this.epThemeColor = newColor;