v2.0

web/src/store/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import { createPinia } from 'pinia';
+
+const store = createPinia();
+
+export function setupStore(app: App<Element>) {
+  app.use(store);
+}
+
+export { store };

web/src/store/modules/asyncRoute.ts

@@ -0,0 +1,127 @@
+import { toRaw, unref } from 'vue';
+import { defineStore } from 'pinia';
+import { RouteRecordRaw } from 'vue-router';
+import { store } from '@/store';
+import { asyncRoutes, constantRouter } from '@/router/index';
+import { generatorDynamicRouter, removeHiddenMenus } from '@/router/generator-routers';
+import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+
+interface TreeHelperConfig {
+  id: string;
+  children: string;
+  pid: string;
+}
+
+const DEFAULT_CONFIG: TreeHelperConfig = {
+  id: 'id',
+  children: 'children',
+  pid: 'pid',
+};
+
+const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config);
+
+export interface IAsyncRouteState {
+  menus: RouteRecordRaw[];
+  routers: any[];
+  addRouters: any[];
+  keepAliveComponents: string[];
+  isDynamicAddedRoute: boolean;
+}
+
+function filter<T = any>(
+  tree: T[],
+  func: (n: T) => boolean,
+  config: Partial<TreeHelperConfig> = {}
+): T[] {
+  config = getConfig(config);
+  const children = config.children as string;
+
+  function listFilter(list: T[]) {
+    return list
+      .map((node: any) => ({ ...node }))
+      .filter((node) => {
+        node[children] = node[children] && listFilter(node[children]);
+        return func(node) || (node[children] && node[children].length);
+      });
+  }
+
+  return listFilter(tree);
+}
+
+export const useAsyncRouteStore = defineStore({
+  id: 'app-async-route',
+  state: (): IAsyncRouteState => ({
+    menus: [],
+    routers: constantRouter,
+    addRouters: [],
+    keepAliveComponents: [],
+    // Whether the route has been dynamically added
+    isDynamicAddedRoute: false,
+  }),
+  getters: {
+    getMenus(): RouteRecordRaw[] {
+      return this.menus;
+    },
+    getIsDynamicAddedRoute(): boolean {
+      return this.isDynamicAddedRoute;
+    },
+  },
+  actions: {
+    getRouters() {
+      return toRaw(this.addRouters);
+    },
+    setDynamicAddedRoute(added: boolean) {
+      this.isDynamicAddedRoute = added;
+    },
+    // 设置动态路由
+    setRouters(routers) {
+      this.addRouters = routers;
+      this.routers = constantRouter.concat(routers);
+    },
+    setMenus(menus) {
+      // 设置动态路由
+      this.menus = menus;
+    },
+    setKeepAliveComponents(compNames) {
+      // 设置需要缓存的组件
+      this.keepAliveComponents = compNames;
+    },
+    async generateRoutes(data) {
+      let accessedRouters;
+      const permissionsList = data.permissions || [];
+      const routeFilter = (route) => {
+        const { meta } = route;
+        const { permissions } = meta || {};
+        if (!permissions) return true;
+        return permissionsList.some((item) => permissions.includes(item.value));
+      };
+      const { getPermissionMode } = useProjectSetting();
+      const permissionMode = unref(getPermissionMode);
+      if (permissionMode === 'BACK') {
+        // 动态获取菜单
+        try {
+          accessedRouters = await generatorDynamicRouter();
+        } catch (error) {
+          console.log(error);
+        }
+      } else {
+        try {
+          //过滤账户是否拥有某一个权限，并将菜单从加载列表移除
+          accessedRouters = filter(asyncRoutes, routeFilter);
+        } catch (error) {
+          console.log(error);
+        }
+      }
+      accessedRouters = accessedRouters.filter(routeFilter);
+
+      this.setRouters(accessedRouters);
+      this.setMenus(accessedRouters);
+      return toRaw(accessedRouters);
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useAsyncRouteStoreWidthOut() {
+  return useAsyncRouteStore(store);
+}

web/src/store/modules/designSetting.ts

@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia';
+import { store } from '@/store';
+import designSetting from '@/settings/designSetting';
+
+const { darkTheme, appTheme, appThemeList } = designSetting;
+
+interface DesignSettingState {
+  //深色主题
+  darkTheme: boolean;
+  //系统风格
+  appTheme: string;
+  //系统内置风格
+  appThemeList: string[];
+}
+
+export const useDesignSettingStore = defineStore({
+  id: 'app-design-setting',
+  state: (): DesignSettingState => ({
+    darkTheme,
+    appTheme,
+    appThemeList,
+  }),
+  getters: {
+    getDarkTheme(): boolean {
+      return this.darkTheme;
+    },
+    getAppTheme(): string {
+      return this.appTheme;
+    },
+    getAppThemeList(): string[] {
+      return this.appThemeList;
+    },
+  },
+  actions: {},
+});
+
+// Need to be used outside the setup
+export function useDesignSettingWithOut() {
+  return useDesignSettingStore(store);
+}

web/src/store/modules/index.ts

@@ -0,0 +1,19 @@
+const allModules = import.meta.globEager('./*/index.ts');
+const modules = {} as any;
+Object.keys(allModules).forEach((path) => {
+  const fileName = path.split('/')[1];
+  modules[fileName] = allModules[path][fileName] || allModules[path].default || allModules[path];
+});
+
+// export default modules
+import asyncRoute from './async-route';
+import user from './user';
+import tabsView from './tabs-view';
+import lockscreen from './lockscreen';
+
+export default {
+  asyncRoute,
+  user,
+  tabsView,
+  lockscreen,
+};

web/src/store/modules/lockscreen.ts

@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia';
+import { IS_LOCKSCREEN } from '@/store/mutation-types';
+import { storage } from '@/utils/Storage';
+
+// 长时间不操作默认锁屏时间
+const initTime = 60 * 60;
+
+const isLock = storage.get(IS_LOCKSCREEN, false);
+
+export type ILockscreenState = {
+  isLock: boolean; // 是否锁屏
+  lockTime: number;
+};
+
+export const useLockscreenStore = defineStore({
+  id: 'app-lockscreen',
+  state: (): ILockscreenState => ({
+    isLock: isLock === true, // 是否锁屏
+    lockTime: isLock == 'true' ? initTime : 0,
+  }),
+  getters: {},
+  actions: {
+    setLock(payload) {
+      this.isLock = payload;
+      storage.set(IS_LOCKSCREEN, this.isLock);
+    },
+    setLockTime(payload = initTime) {
+      this.lockTime = payload;
+    },
+  },
+});

web/src/store/modules/notification.ts

@@ -0,0 +1,51 @@
+import { defineStore } from 'pinia';
+import { store } from '@/store';
+
+export interface INotificationStore {
+  messages: any[];
+}
+
+export const notificationStore = defineStore({
+  id: 'notificationStore',
+  state: (): INotificationStore => ({
+    messages: [],
+  }),
+  getters: {
+    getMessages(): [any][] {
+      return this.messages;
+    },
+  },
+  actions: {
+    setMessages(messages) {
+      this.messages = messages;
+    },
+    addMessages(message) {
+      message = JSON.parse(message);
+      console.log('message:' + JSON.stringify(message));
+      if (
+        message.event !== undefined &&
+        message.event === 'notice' &&
+        message.data !== undefined &&
+        message.data !== ''
+      ) {
+        this.messages.unshift({
+          title: message.data.title,
+          description: message.data.type == 1 ? '通知' : '公告',
+          content: message.data.content,
+          meta: message.data.updatedAt,
+        });
+      }
+      // 数据最大提醒条数，超出进行清理
+      const limit = 10;
+      if (this.messages.length > limit) {
+        const sub = this.messages.length - limit;
+        this.messages.splice(this.messages.length - sub);
+      }
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function notificationStoreWidthOut() {
+  return notificationStore(store);
+}

web/src/store/modules/projectSetting.ts

@@ -0,0 +1,97 @@
+import { defineStore } from 'pinia';
+import { store } from '@/store';
+import projectSetting from '@/settings/projectSetting';
+import type { IheaderSetting, ImenuSetting, ImultiTabsSetting, IcrumbsSetting } from '/#/config';
+
+const {
+  navMode,
+  navTheme,
+  isMobile,
+  headerSetting,
+  showFooter,
+  menuSetting,
+  multiTabsSetting,
+  crumbsSetting,
+  permissionMode,
+  isPageAnimate,
+  pageAnimateType,
+} = projectSetting;
+
+interface ProjectSettingState {
+  navMode: string; //导航模式
+  navTheme: string; //导航风格
+  headerSetting: IheaderSetting; //顶部设置
+  showFooter: boolean; //页脚
+  menuSetting: ImenuSetting; //多标签
+  multiTabsSetting: ImultiTabsSetting; //多标签
+  crumbsSetting: IcrumbsSetting; //面包屑
+  permissionMode: string; //权限模式
+  isPageAnimate: boolean; //是否开启路由动画
+  pageAnimateType: string; //路由动画类型
+  isMobile: boolean; // 是否处于移动端模式
+}
+
+export const useProjectSettingStore = defineStore({
+  id: 'app-project-setting',
+  state: (): ProjectSettingState => ({
+    navMode: navMode,
+    navTheme,
+    isMobile,
+    headerSetting,
+    showFooter,
+    menuSetting,
+    multiTabsSetting,
+    crumbsSetting,
+    permissionMode,
+    isPageAnimate,
+    pageAnimateType,
+  }),
+  getters: {
+    getNavMode(): string {
+      return this.navMode;
+    },
+    getNavTheme(): string {
+      return this.navTheme;
+    },
+    getIsMobile(): boolean {
+      return this.isMobile;
+    },
+    getHeaderSetting(): object {
+      return this.headerSetting;
+    },
+    getShowFooter(): boolean {
+      return this.showFooter;
+    },
+    getMenuSetting(): object {
+      return this.menuSetting;
+    },
+    getMultiTabsSetting(): object {
+      return this.multiTabsSetting;
+    },
+    getCrumbsSetting(): object {
+      return this.multiTabsSetting;
+    },
+    getPermissionMode(): string {
+      return this.permissionMode;
+    },
+    getIsPageAnimate(): boolean {
+      return this.isPageAnimate;
+    },
+    getPageAnimateType(): string {
+      return this.pageAnimateType;
+    },
+  },
+  actions: {
+    setNavTheme(value: string): void {
+      this.navTheme = value;
+    },
+    setIsMobile(value: boolean): void {
+      this.isMobile = value;
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useProjectSettingStoreWithOut() {
+  return useProjectSettingStore(store);
+}

web/src/store/modules/tabsView.ts

@@ -0,0 +1,71 @@
+import { defineStore } from 'pinia';
+import { RouteLocationNormalized } from 'vue-router';
+
+// 不需要出现在标签页中的路由
+const whiteList = ['Redirect', 'login'];
+
+export type RouteItem = Partial<RouteLocationNormalized> & {
+  fullPath: string;
+  path: string;
+  name: string;
+  hash: string;
+  meta: object;
+  params: object;
+  query: object;
+};
+
+export type ITabsViewState = {
+  tabsList: RouteItem[]; // 标签页
+};
+
+//保留固定路由
+function retainAffixRoute(list: any[]) {
+  return list.filter((item) => item?.meta?.affix ?? false);
+}
+
+export const useTabsViewStore = defineStore({
+  id: 'app-tabs-view',
+  state: (): ITabsViewState => ({
+    tabsList: [],
+  }),
+  getters: {},
+  actions: {
+    initTabs(routes) {
+      // 初始化标签页
+      this.tabsList = routes;
+    },
+    addTabs(route): boolean {
+      // 添加标签页
+      if (whiteList.includes(route.name)) return false;
+      const isExists = this.tabsList.some((item) => item.fullPath == route.fullPath);
+      if (!isExists) {
+        this.tabsList.push(route);
+      }
+      return true;
+    },
+    closeLeftTabs(route) {
+      // 关闭左侧
+      const index = this.tabsList.findIndex((item) => item.fullPath == route.fullPath);
+      this.tabsList = this.tabsList.filter((item, i) => i >= index || (item?.meta?.affix ?? false));
+    },
+    closeRightTabs(route) {
+      // 关闭右侧
+      const index = this.tabsList.findIndex((item) => item.fullPath == route.fullPath);
+      this.tabsList = this.tabsList.filter((item, i) => i <= index || (item?.meta?.affix ?? false));
+    },
+    closeOtherTabs(route) {
+      // 关闭其他
+      this.tabsList = this.tabsList.filter((item) => item.fullPath == route.fullPath || (item?.meta?.affix ?? false));
+    },
+    closeCurrentTab(route) {
+      // 关闭当前页
+      const index = this.tabsList.findIndex((item) => item.fullPath == route.fullPath);
+      this.tabsList.splice(index, 1);
+    },
+    closeAllTabs() {
+      // 关闭全部
+      console.log(retainAffixRoute(this.tabsList));
+      this.tabsList = retainAffixRoute(this.tabsList);
+    },
+  },
+});

web/src/store/modules/user.ts

@@ -0,0 +1,139 @@
+import { defineStore } from 'pinia';
+import { createStorage, storage } from '@/utils/Storage';
+import { store } from '@/store';
+import { ACCESS_TOKEN, CURRENT_CONFIG, CURRENT_USER, IS_LOCKSCREEN } from '@/store/mutation-types';
+import { ResultEnum } from '@/enums/httpEnum';
+import { getConfig, getUserInfo, login } from '@/api/system/user';
+
+const Storage = createStorage({ storage: localStorage });
+
+export interface IUserState {
+  token: string;
+  username: string;
+  welcome: string;
+  avatar: string;
+  permissions: any[];
+  info: any;
+  config: any;
+}
+
+export const useUserStore = defineStore({
+  id: 'app-member',
+  state: (): IUserState => ({
+    token: Storage.get(ACCESS_TOKEN, ''),
+    username: '',
+    welcome: '',
+    avatar: '',
+    permissions: [],
+    info: Storage.get(CURRENT_USER, {}),
+    config: Storage.get(CURRENT_CONFIG, {}),
+  }),
+  getters: {
+    getToken(): string {
+      return this.token;
+    },
+    getAvatar(): string {
+      return this.avatar;
+    },
+    getNickname(): string {
+      return this.username;
+    },
+    getPermissions(): [any][] {
+      return this.permissions;
+    },
+    getUserInfo(): object {
+      return this.info;
+    },
+    getConfig(): object {
+      return this.config;
+    },
+  },
+  actions: {
+    setToken(token: string) {
+      this.token = token;
+    },
+    setAvatar(avatar: string) {
+      this.avatar = avatar;
+    },
+    setPermissions(permissions) {
+      this.permissions = permissions;
+    },
+    setUserInfo(info) {
+      this.info = info;
+    },
+    setConfig(config) {
+      this.config = config;
+    },
+    // 登录
+    async login(userInfo) {
+      try {
+        const response = await login(userInfo);
+        const { data, code } = response;
+        console.log('data:' + JSON.stringify(data));
+        if (code === ResultEnum.SUCCESS) {
+          const ex = 7 * 24 * 60 * 60 * 1000;
+          storage.set(ACCESS_TOKEN, data.token, ex);
+          storage.set(CURRENT_USER, data, ex);
+          storage.set(IS_LOCKSCREEN, false);
+          this.setToken(data.token);
+          this.setUserInfo(data);
+        }
+        return Promise.resolve(response);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+
+    // 获取用户信息
+    GetInfo() {
+      const that = this;
+      return new Promise((resolve, reject) => {
+        getUserInfo()
+          .then((res) => {
+            const result = res;
+            if (result.permissions && result.permissions.length) {
+              const permissionsList = result.permissions;
+              that.setPermissions(permissionsList);
+              that.setUserInfo(result);
+            } else {
+              reject(new Error('getInfo: permissionsList must be a non-null array !'));
+            }
+            that.setAvatar(result.avatar);
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    // 获取用户信息
+    GetConfig() {
+      const that = this;
+      return new Promise((resolve, reject) => {
+        getConfig()
+          .then((res) => {
+            const result = res;
+            that.setConfig(result);
+            storage.set(CURRENT_CONFIG, result);
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    // 登出
+    async logout() {
+      this.setPermissions([]);
+      this.setUserInfo('');
+      storage.remove(ACCESS_TOKEN);
+      storage.remove(CURRENT_USER);
+      return Promise.resolve('');
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useUserStoreWidthOut() {
+  return useUserStore(store);
+}

web/src/store/mutation-types.ts

@@ -0,0 +1,5 @@
+export const ACCESS_TOKEN = 'ACCESS-TOKEN'; // 用户token
+export const CURRENT_USER = 'CURRENT-USER'; // 当前用户信息
+export const CURRENT_CONFIG = 'CURRENT-CONFIG'; // 当前用户信息
+export const IS_LOCKSCREEN = 'IS-LOCKSCREEN'; // 是否锁屏
+export const TABS_ROUTES = 'TABS-ROUTES'; // 标签页

web/src/store/types.ts

@@ -0,0 +1,14 @@
+import { IAsyncRouteState } from '@/store/modules/asyncRoute';
+import { IUserState } from '@/store/modules/user';
+import { ILockscreenState } from '@/store/modules/lockscreen';
+import { ITabsViewState } from '@/store/modules/tabsView';
+import { INotificationStore } from '@/store/modules/notification';
+
+export interface IStore {
+  asyncRoute: IAsyncRouteState;
+  user: IUserState;
+  lockscreen: ILockscreenState;
+  tabsView: ITabsViewState;
+  notification: INotificationStore;
+  count: number;
+}