add changeTheme

package-lock.json

@@ -1710,6 +1710,16 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1616431251047&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1736,6 +1746,53 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1752,6 +1809,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz",
@@ -1768,6 +1835,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.2.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+          "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -13554,87 +13633,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.2.0",
-      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.2.0.tgz",
-      "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995384030&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
-          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1618561008172&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-pdf": {
       "version": "4.2.0",
       "resolved": "https://registry.npm.taobao.org/vue-pdf/download/vue-pdf-4.2.0.tgz",

src/App.vue

@@ -1,11 +1,13 @@
 <template>
-  <div id="app" v-loading="$store.state.loading"
-    element-loading-text="拼命加载中"
+  <div id="app" :class="'mainTheme-' + $store.state.themeName" v-loading="$store.state.loading" element-loading-text="拼命加载中"
     element-loading-spinner="el-icon-loading">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <style lang="scss">
-  @import "@assets/css/base.scss";
+@import '@assets/css/base.scss';
 </style>
+<style lang="scss" scoped>
+@import '@assets/css/theme.scss';
+</style>

src/assets/css/theme.scss

@@ -0,0 +1,11 @@
+// 主题1 (light)
+#app.mainTheme-light{
+  transition: .2s;
+  background:#fff;
+}
+
+// 主题1 (dark)
+#app.mainTheme-dark{
+  transition: .2s;
+  background:#000;
+}

src/components/common/menu.vue

@@ -1,17 +1,15 @@
 <template>
-  <el-menu v-if="menuIndex !== undefined" :default-active="menuIndex"
-    background-color="#545c64"
-    text-color="#fff"
+  <el-menu v-if="menuIndex !== undefined" :default-active="menuIndex" background-color="#545c64" text-color="#fff"
     active-text-color="#ffd04b" class="el-menu-demo" mode="horizontal">
     <template v-for="(item, i) in menu">
-      <el-menu-item :key="i" v-if="item.children.length === 0" :index="(i+1)+''" @click="menuC(item.url)">{{item.name}}</el-menu-item>
+      <el-menu-item :key="i" v-if="item.children.length === 0" :index="(i+1)+''" @click="menuC(item)">{{item.name}}</el-menu-item>
       <menuZj :key="i" v-else :obj="item" :fIndex="(i+1)+''"></menuZj>
     </template>
   </el-menu>
   <el-submenu v-else :index="fIndex" :popper-append-to-body="false">
     <template slot="title">{{obj.name}}</template>
     <template v-for="(item, i) in obj.children">
-      <el-menu-item :key="i" v-if="item.children.length === 0" :index="fIndex+'-'+(i+1)" @click="menuC(item.url)">{{item.name}}</el-menu-item>
+      <el-menu-item :key="i" v-if="item.children.length === 0" :index="fIndex+'-'+(i+1)" @click="menuC(item)">{{item.name}}</el-menu-item>
       <menuZj :key="i" v-else :obj="item" :fIndex="fIndex+'-'+(i+1)"></menuZj>
     </template>
   </el-submenu>
@@ -21,35 +19,35 @@
 
 export default {
   name: "menuZj",
-  data() {
+  data () {
     return {
     }
   },
-  props:{
+  props: {
     menuIndex: String, // 菜单默认选中项
     menu: Array, // 菜单数据
     obj: Object, // 菜单对象
     fIndex: String, // 父元素的index值
   },
-  created() {
+  mounted () {
     this.init();
   },
   methods: {
-
     //初始化
-    init() {
-      
-    },
+    init () { },
     // 菜单点击跳转
-    menuC(url) {
-      this.$router.push({
-        path: url
-      });
+    menuC (item) {
+      if (item.type === 'changeTheme') {
+        this.$store.commit('changeTheme', item.url);
+        console.log(222, this.$store); return
+      } else {
+        this.$router.push({
+          path: item.url
+        });
+      }
+
     }
   }
 }
-
 </script>
 
-<style lang="scss" scoped>
-</style>

src/jsonData/menu.json

@@ -360,6 +360,31 @@
           "children": []
         }
       ]
+    },
+    {
+      "name": "设置",
+      "url": null,
+      "children": [
+        {
+          "noRouter": true,
+          "name": "更改主题",
+          "url": null,
+          "children": [
+            {
+              "type": "changeTheme",
+              "name": "亮色",
+              "url": "light",
+              "children": []
+            },
+            {
+              "type": "changeTheme",
+              "name": "暗色",
+              "url": "dark",
+              "children": []
+            }
+          ]
+        }
+      ]
     }
   ]
 }

src/store/getters.js

@@ -1,6 +1,7 @@
 const getters = {
   token: state => state.user.token,  //建立token的快捷访问   user 是因为index.js中导入的时候名称定义为user
   submitDDTag: state => state.submitDDTag,
-  loading:state =>state.loading,
+  loading: state => state.loading,
+  themeName: state => state.themeName,
 }
 export default getters

src/store/index.js

@@ -5,20 +5,24 @@ import user from './modules/user'
 Vue.use(Vuex)
 
 const state = {
-  submitDDTag: false,   //提交 - 防抖动 - 针对快速请求问题的拦截机制
-  loading: false,   //全局 - 加载中....
+  submitDDTag: false, // 提交 - 防抖动 - 针对快速请求问题的拦截机制
+  loading: false, // 全局 - 加载中....
+  themeName: 'light' // 默认主题
 };
 //改变状态的方法
 const mutations = {
-  openSubmitDDTag(state, tag) {
+  openSubmitDDTag (state, tag) {
     state.submitDDTag = tag;
   },
-  loadingStore(state, tag) {
+  loadingStore (state, tag) {
     state.loading = tag;
   },
+  changeTheme (state, tag) {
+    state.themeName = tag;
+  },
 };
 var vuexStore = new Vuex.Store({
-  module:{
+  module: {
     user//调用this['user/login']()  引用 ...mapActions(['user/login']),
   },
   getters,

src/store/modules/user.js

@@ -1,9 +1,9 @@
-import {getToken,setToken,removeToken} from '@/utils/auth'
+import { getToken, setToken, removeToken } from '@/utils/auth'
 const state = {
-  token:getToken //设置token为共享状态   初始化vuex的时候 就先从缓存中读取
+  token: getToken //设置token为共享状态   初始化vuex的时候 就先从缓存中读取
 }
 const mutations = {
-  REMOVE_TOKEN(state){
+  REMOVE_TOKEN (state) {
     state.token = null//将vuex的数据置空
     removeToken()//同步到缓存
   },
@@ -20,11 +20,11 @@ const mutations = {
   },
 }
 const actions = {
-  async login(context,data){
+  async login (context, data) {
     const result = await login(data)
-    if(result.data.sucess){
+    if (result.data.sucess) {
       //调用vuex中setToken方法
-      context.commit('setToken',result.data.data)
+      context.commit('setToken', result.data.data)
     }
   }
 }