initHeader

frontend/src/stores/constant.ts

@@ -0,0 +1,16 @@
+
+// pinia中auth store的key
+export  const  AUTH_STORE_KEY = "cn-auth";
+
+// pinia中global store的key
+export  const  GLOBAL_STORE_KEY = "cn-global";
+
+// pinia中keepAlive store的key
+export  const  KEEP_ALIVE_STORE_KEY = "cn-keepAlive";
+
+// pinia中tabs store的key
+export  const  TABS_STORE_KEY = "cn-tabs";
+
+// pinia中user store的key
+export  const  USER_STORE_KEY = "cn-user";
+

frontend/src/stores/helper/persist.ts

@@ -0,0 +1,19 @@
+import { PersistedStateOptions } from "pinia-plugin-persistedstate";
+
+/**
+ * @description pinia 持久化参数配置
+ * @param {String} key 存储到持久化的 name
+ * @param {Array} paths 需要持久化的 state name
+ * @return persist
+ * */
+const piniaPersistConfig = (key: string, paths?: string[]) => {
+  const persist: PersistedStateOptions = {
+    key,
+    storage: localStorage,
+    // storage: sessionStorage,
+    paths
+  };
+  return persist;
+};
+
+export default piniaPersistConfig;

frontend/src/stores/index.ts

@@ -1,3 +1,8 @@
-import { createPinia } from 'pinia'
-const pinia = createPinia()
-export default pinia
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+// pinia persist
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+
+export default pinia;

frontend/src/stores/interface/index.ts

@@ -18,7 +18,6 @@ export interface GlobalState {
   headerInverted: boolean;
   isCollapse: boolean;
   accordion: boolean;
-  watermark: boolean;
   breadcrumb: boolean;
   breadcrumbIcon: boolean;
   tabs: boolean;

frontend/src/stores/modules/auth.ts

@@ -0,0 +1,45 @@
+import {defineStore} from "pinia";
+import {AuthState} from "@/stores/interface";
+import {getAuthButtonListApi, getAuthMenuListApi} from "@/api/modules/login";
+import {getFlatMenuList, getShowMenuList, getAllBreadcrumbList} from "@/utils";
+import {AUTH_STORE_KEY} from "@/stores/constant";
+
+export const useAuthStore = defineStore({
+  id: AUTH_STORE_KEY,
+  state: (): AuthState => ({
+    // 按钮权限列表
+    authButtonList: {},
+    // 菜单权限列表
+    authMenuList: [],
+    // 当前页面的 router name，用来做按钮权限筛选
+    routeName: ""
+  }),
+  getters: {
+    // 按钮权限列表
+    authButtonListGet: state => state.authButtonList,
+    // 菜单权限列表 ==> 这里的菜单没有经过任何处理
+    authMenuListGet: state => state.authMenuList,
+    // 菜单权限列表 ==> 左侧菜单栏渲染，需要剔除 isHide == true
+    showMenuListGet: state => getShowMenuList(state.authMenuList),
+    // 菜单权限列表 ==> 扁平化之后的一维数组菜单，主要用来添加动态路由
+    flatMenuListGet: state => getFlatMenuList(state.authMenuList),
+    // 递归处理后的所有面包屑导航列表
+    breadcrumbListGet: state => getAllBreadcrumbList(state.authMenuList)
+  },
+  actions: {
+    // Get AuthButtonList
+    async getAuthButtonList() {
+      const {data} = await getAuthButtonListApi();
+      this.authButtonList = data;
+    },
+    // Get AuthMenuList
+    async getAuthMenuList() {
+      const {data} = await getAuthMenuListApi();
+      this.authMenuList = data;
+    },
+    // Set RouteName
+    async setRouteName(name: string) {
+      this.routeName = name;
+    }
+  }
+});

frontend/src/stores/modules/global.ts

@@ -0,0 +1,54 @@
+import { defineStore } from "pinia";
+import { GlobalState } from "@/stores/interface";
+import { DEFAULT_PRIMARY } from "@/config";
+import piniaPersistConfig from "@/stores/helper/persist";
+import {GLOBAL_STORE_KEY} from "@/stores/constant";
+
+export const useGlobalStore = defineStore({
+  id: GLOBAL_STORE_KEY,
+  // 修改默认值之后，需清除 localStorage 数据
+  state: (): GlobalState => ({
+    // 布局模式 (纵向：vertical | 经典：classic | 横向：transverse | 分栏：columns)
+    layout: "transverse",
+    // element 组件大小
+    assemblySize: "default",
+    // 当前系统语言
+    language: null,
+    // 当前页面是否全屏
+    maximize: false,
+    // 主题颜色
+    primary: DEFAULT_PRIMARY,
+    // 深色模式
+    isDark: false,
+    // 灰色模式
+    isGrey: false,
+    // 色弱模式
+    isWeak: false,
+    // 侧边栏反转
+    asideInverted: false,
+    // 头部反转
+    headerInverted: false,
+    // 折叠菜单
+    isCollapse: false,
+    // 菜单手风琴
+    accordion: true,
+    // 面包屑导航
+    breadcrumb: true,
+    // 面包屑导航图标
+    breadcrumbIcon: true,
+    // 标签页
+    tabs: true,
+    // 标签页图标
+    tabsIcon: true,
+    // 页脚
+    footer: false
+  }),
+  getters: {},
+  actions: {
+    // Set GlobalState
+    setGlobalState(...args: ObjToKeyValArray<GlobalState>) {
+      this.$patch({ [args[0]]: args[1] });
+    }
+  },
+  persist: piniaPersistConfig(GLOBAL_STORE_KEY)
+});

frontend/src/stores/modules/keepAlive.ts

@@ -0,0 +1,24 @@
+import {defineStore} from "pinia";
+import {KeepAliveState} from "@/stores/interface";
+import {KEEP_ALIVE_STORE_KEY} from '@/stores/constant'
+
+export const useKeepAliveStore = defineStore({
+  id: KEEP_ALIVE_STORE_KEY,
+  state: (): KeepAliveState => ({
+    keepAliveName: []
+  }),
+  actions: {
+    // Add KeepAliveName
+    async addKeepAliveName(name: string) {
+      !this.keepAliveName.includes(name) && this.keepAliveName.push(name);
+    },
+    // Remove KeepAliveName
+    async removeKeepAliveName(name: string) {
+      this.keepAliveName = this.keepAliveName.filter(item => item !== name);
+    },
+    // Set KeepAliveName
+    async setKeepAliveName(keepAliveName: string[] = []) {
+      this.keepAliveName = keepAliveName;
+    }
+  }
+});

frontend/src/stores/modules/tabs.ts

@@ -0,0 +1,75 @@
+import router from "@/routers";
+import { defineStore } from "pinia";
+import { getUrlWithParams } from "@/utils";
+import { useKeepAliveStore } from "./keepAlive";
+import { TabsState, TabsMenuProps } from "@/stores/interface";
+import piniaPersistConfig from "@/stores/helper/persist";
+import {TABS_STORE_KEY} from "@/stores/constant";
+
+const keepAliveStore = useKeepAliveStore();
+
+export const useTabsStore = defineStore({
+  id: TABS_STORE_KEY,
+  state: (): TabsState => ({
+    tabsMenuList: []
+  }),
+  actions: {
+    // Add Tabs
+    async addTabs(tabItem: TabsMenuProps) {
+      if (this.tabsMenuList.every(item => item.path !== tabItem.path)) {
+        this.tabsMenuList.push(tabItem);
+      }
+      if (!keepAliveStore.keepAliveName.includes(tabItem.name) && tabItem.isKeepAlive) {
+        keepAliveStore.addKeepAliveName(tabItem.name);
+      }
+    },
+    // Remove Tabs
+    async removeTabs(tabPath: string, isCurrent: boolean = true) {
+      if (isCurrent) {
+        this.tabsMenuList.forEach((item, index) => {
+          if (item.path !== tabPath) return;
+          const nextTab = this.tabsMenuList[index + 1] || this.tabsMenuList[index - 1];
+          if (!nextTab) return;
+          router.push(nextTab.path);
+        });
+      }
+      this.tabsMenuList = this.tabsMenuList.filter(item => item.path !== tabPath);
+      // remove keepalive
+      const tabItem = this.tabsMenuList.find(item => item.path === tabPath);
+      tabItem?.isKeepAlive && keepAliveStore.removeKeepAliveName(tabItem.name);
+    },
+    // Close Tabs On Side
+    async closeTabsOnSide(path: string, type: "left" | "right") {
+      const currentIndex = this.tabsMenuList.findIndex(item => item.path === path);
+      if (currentIndex !== -1) {
+        const range = type === "left" ? [0, currentIndex] : [currentIndex + 1, this.tabsMenuList.length];
+        this.tabsMenuList = this.tabsMenuList.filter((item, index) => {
+          return index < range[0] || index >= range[1] || !item.close;
+        });
+      }
+      // set keepalive
+      const KeepAliveList = this.tabsMenuList.filter(item => item.isKeepAlive);
+      keepAliveStore.setKeepAliveName(KeepAliveList.map(item => item.name));
+    },
+    // Close MultipleTab
+    async closeMultipleTab(tabsMenuValue?: string) {
+      this.tabsMenuList = this.tabsMenuList.filter(item => {
+        return item.path === tabsMenuValue || !item.close;
+      });
+      // set keepalive
+      const KeepAliveList = this.tabsMenuList.filter(item => item.isKeepAlive);
+      keepAliveStore.setKeepAliveName(KeepAliveList.map(item => item.name));
+    },
+    // Set Tabs
+    async setTabs(tabsMenuList: TabsMenuProps[]) {
+      this.tabsMenuList = tabsMenuList;
+    },
+    // Set Tabs Title
+    async setTabsTitle(title: string) {
+      this.tabsMenuList.forEach(item => {
+        if (item.path == getUrlWithParams()) item.title = title;
+      });
+    }
+  }
+  // persist: piniaPersistConfig(TABS_STORE_KEY)
+});

frontend/src/stores/modules/user.ts

@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+import { UserState } from "@/stores/interface";
+import piniaPersistConfig from "@/stores/helper/persist";
+import {USER_STORE_KEY} from "@/stores/constant";
+
+export const useUserStore = defineStore({
+  id: USER_STORE_KEY,
+  state: (): UserState => ({
+    token: "",
+    userInfo: { name: "admin" }
+  }),
+  getters: {},
+  actions: {
+    // Set Token
+    setToken(token: string) {
+      this.token = token;
+    },
+    // Set setUserInfo
+    setUserInfo(userInfo: UserState["userInfo"]) {
+      this.userInfo = userInfo;
+    }
+  },
+  persist: piniaPersistConfig(USER_STORE_KEY)
+});

frontend/src/stores/modules/user/index.ts

@@ -1,83 +0,0 @@
-import { defineStore } from 'pinia'
-import { USER_INFO } from '@/constants/storeKey'
-import { TOKEN_PREFIX } from '@/constants/user'
-import type { UserInfo } from '@/types/user'
-import { getUserById } from '@/api/user'
-import { createPersistedState } from 'pinia-plugin-persistedstate'
-
-export const useUserInfoStore = defineStore('userInfo', {
-  // 行为
-  actions: {
-    dataFill(state: UserInfo) {
-      this.$state = { ...this.$state, ...state }
-    },
-    async initUserInfo() {
-      this.dataFill(await getUserById())
-    },
-    removeToken() {
-      this.access_token = ''
-      this.refresh_token = ''
-    },
-    setToken(token: string, type: 'auth' | 'refresh') {
-      const field = type == 'auth' ? 'token' : 'refresh_token'
-      this[field] = token
-    },
-    getToken(type: 'auth' | 'refresh' = 'auth') {
-      if (type === 'auth') {
-        if (this.access_token) {
-          return `${TOKEN_PREFIX}${this.access_token}`
-        } else {
-          return ''
-        }
-      } else {
-        return this.refresh_token
-      }
-    },
-  },
-  // 状态
-  state: (): UserInfo => {
-    return {
-      access_token: '',
-      refresh_token: '',
-      expires_in: 0,
-      scope: '',
-      nickname: '',
-      userType: 0,
-      deptIndex: '',
-      userIndex: '',
-      client_id: '',
-      headSculpture: '',
-      jti: '',
-      name: '',
-      deptId: '',
-      phone: '',
-      email: '',
-      limitIpStart: '',
-      limitIpEnd: '',
-      limitTime: '',
-      casualUser: 0,
-      type: 0,
-      smsNotice: 0,
-      emailNotice: 0,
-      role: [],
-      devCode: '',
-      id: '',
-      loginName: '',
-      state: 0,
-      registerTime: '',
-      loginTime: '',
-      deptName: '',
-      areaId: '',
-      areaName: '',
-      deptLevel: 0,
-      roleList: [],
-      roleCode: [],
-    }
-  },
-  plugins: [
-    createPersistedState({
-      key: USER_INFO,
-      storage: window.localStorage
-    }),
-  ],
-})