初始化

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 };

src/store/modules/asyncRoute.ts

@@ -0,0 +1,125 @@
+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 { generateDynamicRoutes } from '@/router/generator';
+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[];
+  routersAdded: any[];
+  keepAliveComponents: string[];
+  isDynamicRouteAdded: 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,
+    routersAdded: [],
+    keepAliveComponents: [],
+    // Whether the route has been dynamically added
+    isDynamicRouteAdded: false,
+  }),
+  getters: {
+    getMenus(): RouteRecordRaw[] {
+      return this.menus;
+    },
+    getIsDynamicRouteAdded(): boolean {
+      return this.isDynamicRouteAdded;
+    },
+  },
+  actions: {
+    getRouters() {
+      return toRaw(this.routersAdded);
+    },
+    setDynamicRouteAdded(added: boolean) {
+      this.isDynamicRouteAdded = added;
+    },
+    // 设置动态路由
+    setRouters(routers: RouteRecordRaw[]) {
+      this.routersAdded = routers;
+      this.routers = constantRouter.concat(routers);
+    },
+    setMenus(menus: RouteRecordRaw[]) {
+      // 设置动态路由
+      this.menus = menus;
+    },
+    setKeepAliveComponents(compNames: string[]) {
+      // 设置需要缓存的组件
+      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 { permissionMode } = useProjectSetting();
+      if (unref(permissionMode) === 'BACK') {
+        // 动态获取菜单
+        try {
+          accessedRouters = await generateDynamicRoutes();
+        } 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 useAsyncRoute() {
+  return useAsyncRouteStore(store);
+}

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 useDesignSetting() {
+  return useDesignSettingStore(store);
+}

src/store/modules/projectSetting.ts

@@ -0,0 +1,91 @@
+import { defineStore } from 'pinia';
+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.crumbsSetting;
+    },
+    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;
+    },
+  },
+});

src/store/modules/screenLock.ts

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

src/store/modules/tabsView.ts

@@ -0,0 +1,72 @@
+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: RouteItem[]) {
+      // 初始化标签页
+      this.tabsList = routes;
+    },
+    addTab(route: RouteItem): 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: RouteItem) {
+      // 关闭左侧
+      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: RouteItem) {
+      // 关闭右侧
+      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: RouteItem) {
+      // 关闭其他
+      this.tabsList = this.tabsList.filter(
+        (item) => item.fullPath == route.fullPath || (item?.meta?.affix ?? false)
+      );
+    },
+    closeCurrentTab(route: RouteItem) {
+      // 关闭当前页
+      const index = this.tabsList.findIndex((item) => item.fullPath == route.fullPath);
+      this.tabsList.splice(index, 1);
+    },
+    closeAllTabs() {
+      // 关闭全部
+      this.tabsList = retainAffixRoute(this.tabsList);
+    },
+  },
+});

src/store/modules/user.ts

@@ -0,0 +1,110 @@
+import { defineStore } from 'pinia';
+import { store } from '@/store';
+import { ACCESS_TOKEN, CURRENT_USER, IS_SCREENLOCKED } from '@/store/mutation-types';
+import { ResultEnum } from '@/enums/httpEnum';
+
+import { getUserInfo as getUserInfoApi, login } from '@/api/system/user';
+import { storage } from '@/utils/Storage';
+
+export type UserInfoType = {
+  // TODO: add your own data
+  username: string;
+  email: string;
+};
+
+export interface IUserState {
+  token: string;
+  username: string;
+  welcome: string;
+  avatar: string;
+  permissions: any[];
+  info: UserInfoType;
+}
+
+export const useUserStore = defineStore({
+  id: 'app-user',
+  state: (): IUserState => ({
+    token: storage.get(ACCESS_TOKEN, ''),
+    username: '',
+    welcome: '',
+    avatar: '',
+    permissions: [],
+    info: storage.get(CURRENT_USER, {}),
+  }),
+  getters: {
+    getToken(): string {
+      return this.token;
+    },
+    getAvatar(): string {
+      return this.avatar;
+    },
+    getNickname(): string {
+      return this.username;
+    },
+    getPermissions(): [any][] {
+      return this.permissions;
+    },
+    getUserInfo(): UserInfoType {
+      return this.info;
+    },
+  },
+  actions: {
+    setToken(token: string) {
+      this.token = token;
+    },
+    setAvatar(avatar: string) {
+      this.avatar = avatar;
+    },
+    setPermissions(permissions) {
+      this.permissions = permissions;
+    },
+    setUserInfo(info: UserInfoType) {
+      this.info = info;
+    },
+    // 登录
+    async login(params: any) {
+      const response = await login(params);
+      const { code, data } = response;
+      if (code === ResultEnum.SUCCESS) {
+        const ex = data.tokenTimeout || 7 * 24 * 60 * 60;
+        storage.set(ACCESS_TOKEN, data.token, ex);
+        storage.set(CURRENT_USER, data, ex);
+        storage.set(IS_SCREENLOCKED, false);
+        this.setToken(data.token);
+        this.setUserInfo({
+          username: data.username,
+          email: '',
+        });
+      }
+      return response;
+    },
+
+    // 获取用户信息
+    async getInfo() {
+      const data = await getUserInfoApi();
+      const { result } = data;
+      if (result.permissions && result.permissions.length) {
+        const permissionsList = result.permissions;
+        this.setPermissions(permissionsList);
+        this.setUserInfo(result);
+      } else {
+        throw new Error('getInfo: permissionsList must be a non-null array !');
+      }
+      this.setAvatar(result.avatar);
+      return result;
+    },
+
+    // 登出
+    async logout() {
+      this.setPermissions([]);
+      this.setUserInfo({ username: '', email: '' });
+      storage.remove(ACCESS_TOKEN);
+      storage.remove(CURRENT_USER);
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useUser() {
+  return useUserStore(store);
+}

src/store/mutation-types.ts

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

src/store/types.ts

@@ -0,0 +1,12 @@
+import { IAsyncRouteState } from '@/store/modules/asyncRoute';
+import { IUserState } from '@/store/modules/user';
+import { IScreenLockState } from '@/store/modules/screenLock';
+import { ITabsViewState } from '@/store/modules/tabsView';
+
+export interface IStore {
+  asyncRoute: IAsyncRouteState;
+  user: IUserState;
+  screenLock: IScreenLockState;
+  tabsView: ITabsViewState;
+  count: number;
+}