修改menu 主题色

package.json

@@ -33,7 +33,9 @@
     "postcss": "^8.4.38",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
+    "style-resources-loader": "^1.4.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
+    "vue-cli-plugin-style-resources-loader": "~0.1.5",
     "vue-template-compiler": "^2.6.14"
   },
   "browserslist": [

src/components/HeaderCom.vue

@@ -35,7 +35,7 @@
               size="mini"
             >
               <el-option
-                v-for="(item,index) in colorData"
+                v-for="(item, index) in colorData"
                 :key="index"
                 :label="item.lable"
                 :value="item.value"
@@ -69,10 +69,10 @@ export default {
       currentDate: "",
       currentTheme: this.$store.state.themes.theme,
       colorData: [
-        { lable: "Light", value: "light", color: "#f90" },
-        { lable: "Dark", value: "dark", color: "#1f2d3d" },
-        { lable: "Green", value: "green", color: "#008080" },
-        { lable: "Blue", value: "blue", color: "#409eff" },
+        { lable: "黄色", value: "light", color: "#82780ccf" },
+        { lable: "深色", value: "dark", color: "#607d8b" },
+        { lable: "绿色", value: "green", color: "#008080" },
+        { lable: "蓝色", value: "blue", color: "#00bcd4" },
       ],
     };
   },

src/main.js

@@ -38,22 +38,30 @@ new Vue({
   },
   watch: {
     "$store.state.themes.theme": {
-      handler(newTheme) {
-        console.log(newTheme, "newTheme");
-        this.applyTheme(newTheme);
+      handler(newTheme, oldTheme) {
+        this.applyTheme(newTheme, oldTheme);
       },
       immediate: true,
     },
   },
   methods: {
-    async applyTheme(theme) {
+    async applyTheme(theme, oldTheme) {
       const themeFile = theme || this.$store.state.themes.theme;
-      console.log(themeFile, "themeFile");
+      console.log(theme, oldTheme, "themeFile");
 
       // 动态加载新的主题样式
       try {
         // 动态导入 SCSS 文件
         const theme = await import(`@/themes/${themeFile}.scss`);
+        Vue.prototype.$primaryColor = getComputedStyle(
+          document.documentElement
+        ).getPropertyValue("--primary-color");
+        Vue.prototype.$backgroundColor = getComputedStyle(
+          document.documentElement
+        ).getPropertyValue("--background-color");
+        Vue.prototype.$textColor = getComputedStyle(
+          document.documentElement
+        ).getPropertyValue("--text-color");
 
         // 移除之前的主题样式
         let oldThemeStyle = document.getElementById("theme-style");
@@ -67,6 +75,10 @@ new Vue({
         style.type = "text/css";
         style.innerHTML = theme.default;
         document.head.appendChild(style);
+        // store.commit()
+        if (theme !== oldTheme && oldTheme !== undefined) {
+          this.$router.go(0);
+        }
       } catch (error) {
         console.error("Failed to load theme", error);
       }

src/styles/global.scss

@@ -6,6 +6,11 @@
 .el-button--text {
   color: var(--primary-color);
 }
+.el-button--default:hover {
+  border-color: var(--primary-color);
+  background-color: var(--bgopacity-color) !important;
+  color: var(--primary-color);
+}
 
 .el-menu {
   background-color: var(--background-color);
@@ -25,6 +30,18 @@
   border-color: var(--primary-color);
   color: var(--text-color);
 }
+.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  color: var(--primary-color);
+}
+.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
+  color: var(--primary-color) !important;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  // color: var(--text-color);
+}
 // .el-switch {
 //   background-color: var(--primary-color);
 //   border-color: var(--primary-color);

src/themes/blue.scss

@@ -1,9 +1,10 @@
-$primary-color: #409eff;
-$background-color: #409eff;
+$primary-color: #00bcd4;
+$background-color: #00bcd4;
 $text-color: #ffffff;
-
+$bgopacity-color: #00bbd429;
 :root {
   --primary-color: #{$primary-color};
   --background-color: #{$background-color};
   --text-color: #{$text-color};
+  --bgopacity-color: #{$bgopacity-color};
 }

src/themes/dark.scss

@@ -1,9 +1,10 @@
-$primary-color: #1f2d3d;
-$background-color: #2e2e2e;
+$primary-color: #607d8b;
+$background-color: #607d8b;
 $text-color: #ffffff;
-
+$bgopacity-color: #607d8b31;
 :root {
   --primary-color: #{$primary-color};
   --background-color: #{$background-color};
   --text-color: #{$text-color};
+  --bgopacity-color: #{$bgopacity-color};
 }

src/themes/green.scss

@@ -1,9 +1,10 @@
 $primary-color: #008080;
 $background-color: #008080;
 $text-color: #ffffff;
-
+$bgopacity-color: #00968730;
 :root {
   --primary-color: #{$primary-color};
   --background-color: #{$background-color};
   --text-color: #{$text-color};
+  --bgopacity-color: #{$bgopacity-color};
 }

src/themes/light.scss

@@ -1,9 +1,11 @@
-$primary-color: #f90;
-$background-color: #f90;
+$primary-color: #82780ccf;
+$background-color: #82780ccf;
 $text-color: #ffffff;
+$bgopacity-color: #82780c27;
 
 :root {
   --primary-color: #{$primary-color};
   --background-color: #{$background-color};
+  --bgopacity-color: #{$bgopacity-color};
   --text-color: #{$text-color};
 }

src/views/home/Index.vue

@@ -3,14 +3,13 @@
     <el-container>
       <Menu></Menu>
       <el-main>
-        <HeaderCom  @setLoding="setLoding"></HeaderCom>
+        <HeaderCom @setLoding="setLoding"></HeaderCom>
         <!-- 主体内容-->
         <transition name="slide-fade">
-        <div class="">
+          <div class="">
             <router-view />
-        </div>
-      </transition>
-
+          </div>
+        </transition>
       </el-main>
     </el-container>
   </div>

src/views/home/components/Menu.vue

@@ -41,7 +41,7 @@
       @close="handleClose"
       background-color="#eff1f3"
       text-color="#000"
-      active-text-color="#0754a1"
+      :active-text-color="activeTextColor"
       :router="true"
       :default-active="defaultActive"
       :unique-opened="true"
@@ -63,7 +63,7 @@
             v-for="child in item.children"
             v-if="child.meta?.hidden === false"
             :key="child.id"
-            :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`"
+            :index="`/home/${item.path}/${child.path}?id=${child.id}`"
           >
             <i v-if="isElPrefix(child.iconName)" class="el-icon-menu"></i>
             <i v-else class="svnIcon">
@@ -75,7 +75,7 @@
         <el-menu-item
           v-else-if="item.meta?.hidden === false"
           :key="item.id"
-          :index="`/home/${item.path}?id=${item.id}&name=${item.name}`"
+          :index="`/home/${item.path}?id=${item.id}`"
         >
           <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
           <i v-else class="svnIcon">
@@ -86,7 +86,6 @@
       </template>
     </el-menu>
     <div class="foldBox flexCenter">
-      <<<<<<< HEAD
       <span
         v-show="isCollapse"
         class="el-icon-s-unfold icon"
@@ -99,35 +98,23 @@
         @click="isCollapse = true"
         >收起</span
       >
-      =======
-      <span
-        v-show="isCollapse"
-        class="el-icon-s-unfold icon"
-        @click="isCollapse = false"
-        >展开</span
-      >
-      <span
-        v-show="!isCollapse"
-        class="el-icon-s-fold icon"
-        @click="isCollapse = true"
-        >收起</span
-      >
-      >>>>>>> origin/master
     </div>
   </el-aside>
 </template>
 
 <script>
 import { orgList } from "./mockData";
+import Vue from "vue";
 export default {
   data() {
     return {
       isCollapse: false,
       orgList: orgList,
       searchInputValue: "",
-      defaultActive: "",
+      defaultActive: this.$route.fullPath,
       activeIndex: false,
       keyObject: {},
+      activeTextColor: Vue.prototype.$backgroundColor,
       routerList: [
         {
           id: 1,
@@ -153,6 +140,7 @@ export default {
     };
   },
   created() {
+    console.log(this.defaultActive, "defaultActive", this.$route);
     this.routerList = [
       ...this.routerList,
       ...this.$store.state.auth.dynamicRouter,

vue.config.js

@@ -44,6 +44,7 @@ module.exports = {
       },
     ]);
   },
+
   css: {
     loaderOptions: {
       postcss: {
@@ -58,12 +59,13 @@ module.exports = {
       },
     },
   },
+
   devServer: {
     proxy: {
       "/api": {
         // target: "http://192.168.5.4:16200", // 石月
-        // target: "http://192.168.50.235:16200", //内网
-        target: "http://106.120.102.238:16600",//外网
+        target: "http://192.168.50.235:16200", //内网
+        // target: "http://106.120.102.238:16600", //外网
         changeOrigin: true,
         pathRewrite: {
           "^/api": "", // 需要rewrite重写的,
@@ -71,6 +73,7 @@ module.exports = {
       },
     },
   },
+
   configureWebpack: {
     resolve: {
       alias: {
@@ -86,4 +89,11 @@ module.exports = {
       minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
     },
   },
+
+  pluginOptions: {
+    'style-resources-loader': {
+      preProcessor: 'sass',
+      patterns: []
+    }
+  }
 };