5.16

src/store/getters.js

@@ -0,0 +1,9 @@
+const getters = {
+  token: (state) => state.user.token,
+  isCollapse: (state) => state.user.isCollapse,
+  UserInfo: (state) => state.user.UserInfo,
+  themeConfig: (state) => state.user.themeConfig,
+  tabsMenuList: (state) => state.tabs.tabsMenuList
+};
+
+export default getters;

src/store/index.js

@@ -0,0 +1,23 @@
+import {
+  createStore
+} from "vuex";
+import user from "./modules/users";
+import tabs from './modules/tabs'
+import getters from "./getters";
+import createPersistedState from "vuex-persistedstate";
+export default createStore({
+  getters,
+  modules: {
+    user,
+    tabs
+  },
+  plugins: [
+    // 默认储存在localstorage
+    createPersistedState({
+      // 本地储存名
+      key: "user",
+      // 指定模块
+      paths: ["user"],
+    }),
+  ],
+});

src/store/modules/tabs.js

@@ -0,0 +1,69 @@
+import {
+  ElStep
+} from "element-plus";
+import router from "../../router/router.js";
+export default {
+  namespaced: true,
+  state: {
+    tabsMenuList: [{
+      title: "首页",
+      url: 'home',
+      icon: "Menu",
+      close: false,
+      checked: true
+    }]
+  },
+  mutations: {
+    addTabsMenu(state, obj) {
+
+      let titles = state.tabsMenuList.map(item => item.title).join(',')
+      if (titles.includes(obj.title)) {
+        for (let index = 0; index < state.tabsMenuList.length; index++) {
+          const element = state.tabsMenuList[index];
+          state.tabsMenuList[index].checked = false
+          if (element.title == obj.title) {
+            state.tabsMenuList[index].checked = true
+          }
+        }
+      } else {
+        state.tabsMenuList.forEach(item => {
+          item.checked = false
+        });
+        state.tabsMenuList.push(obj)
+      }
+    },
+
+    delectTagMenu(state, item) {
+      if (state.tabsMenuList.length == 0) {
+        return
+      }
+      for (let i = 0; i < state.tabsMenuList.length; i++) {
+        let ele = state.tabsMenuList[i]
+        console.log(ele)
+        if (ele == item) {
+          state.tabsMenuList[i - 1].checked = true
+          state.tabsMenuList.splice(i, 1)
+          return router.push(state.tabsMenuList[i - 1].url)
+        }
+      }
+      console.log(state.tabsMenuList)
+    }
+  },
+
+  actions: {
+
+    addTabs({
+      commit
+    }, str) {
+      console.log(str);
+      commit("addTabsMenu", str);
+    },
+    delectTag({
+      commit
+    }, val) {
+
+      commit('delectTagMenu', val)
+    }
+
+  },
+};

src/store/modules/users.js

@@ -0,0 +1,112 @@
+import router from "../../router/router.js";
+import { mix } from "../../utils/color.js";
+import { ElMessage } from "element-plus";
+
+export default {
+  namespaced: true,
+  state: {
+    UserInfo: {},
+    token: sessionStorage.getItem("token") || "",
+    isCollapse: true,
+    themeConfig: {
+      primary: "#4060c7",
+      tabColor: "#FFFFFF",
+      footColor: "#606266",
+      backgroundColor: "#FFFFFF",
+      textColor: "#00000099",
+      istags: true,
+    },
+  },
+  mutations: {
+    setToken(state, token) {
+      state.token = token;
+    },
+    setUserInfo(state, userinfo) {
+      state.UserInfo = userinfo;
+    },
+    SetIsCollapse(state, isCollapse) {
+      state.isCollapse = isCollapse;
+    },
+    setThemeConfig(state, primary) {
+      state.themeConfig.primary = primary;
+    },
+    setThemeConfigTbaColor(state, primary) {
+      state.themeConfig.tabColor = primary;
+      if (primary == "#FFFFFF") {
+        state.themeConfig.footColor = "#606266";
+      } else {
+        state.themeConfig.footColor = "#ffffff";
+      }
+    },
+    setThemeConfigMenuColor(state, primary) {
+      if (primary) {
+        state.themeConfig.backgroundColor = "#FFFFFF";
+        state.themeConfig.textColor = "#00000099";
+      } else {
+        state.themeConfig.backgroundColor = "#1d2129";
+        state.themeConfig.textColor = "#bdbdc0";
+      }
+    },
+    setThemeConfigchangeTags(state, primary) {
+      if (primary) {
+        state.themeConfig.istags = true;
+      } else {
+        state.themeConfig.istags = false;
+      }
+    },
+  },
+
+  actions: {
+    // 登录
+    // login({ commit }, userInfo) {
+    //   return new Promise((resolve, reject) => {
+    //     LoginInfo(userInfo)
+    //       .then((res) => {
+    //         console.log(res.data.data);
+    //         sessionStorage.setItem("token", res.data.data.token);
+    //         sessionStorage.setItem("UserInfo", JSON.stringify(res.data.data));
+    //         commit("setToken", res.data.data.token);
+    //         commit("setUserInfo", res.data.data);
+    //         router.replace("/");
+    //         ElMessage({
+    //           message: "登录成功",
+    //           type: "success",
+    //         });
+    //         resolve();
+    //       })
+    //       .catch((err) => {
+    //         reject(err);
+    //       });
+    //   });
+    // },
+    changeIsCollapse({ commit }, str) {
+      console.log(str);
+      commit("SetIsCollapse", str);
+    },
+
+    changeThem({ commit }, str) {
+      commit("setThemeConfig", str);
+      const pre = "--el-color-primary";
+      // 白色混合色
+      const mixWhite = "#ffffff";
+      // 黑色混合色
+      const mixBlack = "#000000";
+      const el = document.documentElement;
+      el.style.setProperty(pre, str);
+      // 这里是覆盖原有颜色的核心代码
+      for (let i = 1; i < 10; i += 1) {
+        el.style.setProperty(`${pre}-light-${i}`, mix(str, mixWhite, i * 0.1));
+      }
+      el.style.setProperty("--el-color-primary-dark", mix(str, mixBlack, 0.1));
+    },
+    changeTabColor({ commit }, val) {
+      commit("setThemeConfigTbaColor", val);
+    },
+    changeMenuColor({ commit }, val) {
+      commit("setThemeConfigMenuColor", val);
+    },
+    changeTags({ commit }, val) {
+      commit("setThemeConfigchangeTags", val);
+    },
+  },
+};