更新0.1.1版本

src/store/modules/asyncRoute.ts

@@ -0,0 +1,131 @@
+import { toRaw, unref } from 'vue'
+import { defineStore } from 'pinia'
+import { RouteRecordRaw } from 'vue-router'
+import { store } from '@/store'
+import { createStorage } from '@/utils/Storage'
+import { asyncRoutes, constantRouter } from '@/router/index'
+import { generatorDynamicRouter } from '@/router/generator-routers'
+import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
+
+const Storage = createStorage({ storage: localStorage })
+
+
+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);
+
+interface AsyncRouteState {
+  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: (): AsyncRouteState => ({
+    menus: [],
+    routers: constantRouter,
+    addRouters: [],
+    keepAliveComponents: [],
+    // Whether the route has been dynamically added
+    isDynamicAddedRoute: false,
+  }),
+  getters: {
+    getMenus(state: AsyncRouteState): 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 roleList = data.roles || []
+      const routeFilter = (route) => {
+        const { meta } = route;
+        const { permission } = meta || {};
+        if (!permission) return true;
+        return roleList.some((role) => permission.includes(role.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, ...constantRouter], 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);
+}

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

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

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
+    }
+  }
+})

src/store/modules/projectSetting.ts

@@ -0,0 +1,75 @@
+import { defineStore } from 'pinia'
+import { store } from "@/store"
+import projectSetting from '@/settings/projectSetting'
+
+const {
+  navMode,
+  navTheme,
+  headerSetting,
+  showFooter,
+  menuSetting,
+  multiTabsSetting,
+  crumbsSetting,
+  permissionMode
+} = projectSetting
+
+interface ProjectSettingState {
+  navMode: string,//导航模式
+  navTheme: string,//导航风格
+  headerSetting: object,//顶部设置
+  showFooter: boolean, //页脚
+  menuSetting: object, //多标签
+  multiTabsSetting: object,//多标签
+  crumbsSetting: object,//面包屑
+  permissionMode: string//权限模式
+}
+
+export const useProjectSettingStore = defineStore({
+  id: 'app-project-setting',
+  state: (): ProjectSettingState => ({
+    navMode: navMode,
+    navTheme,
+    headerSetting,
+    showFooter,
+    menuSetting,
+    multiTabsSetting,
+    crumbsSetting,
+    permissionMode
+  }),
+  getters: {
+    getNavMode(): string {
+      return this.navMode;
+    },
+    getNavTheme(): string {
+      return this.navTheme;
+    },
+    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
+    }
+  },
+  actions: {
+    setNavTheme(value: string): void {
+      this.navTheme = value
+    },
+  }
+})
+
+// Need to be used outside the setup
+export function useProjectSettingStoreWithOut() {
+  return useProjectSettingStore(store);
+}

src/store/modules/tabsView.ts

@@ -0,0 +1,62 @@
+import { defineStore } from 'pinia'
+import { RouteLocationNormalized } from 'vue-router'
+import { TABS_ROUTES } from '../mutation-types'
+
+// 不需要出现在标签页中的路由
+const whiteList = ['Redirect', 'login']
+
+export type RouteItem = Partial<RouteLocationNormalized> & {
+  fullPath: string
+  name: string
+}
+
+export type ITabsViewState = {
+  tabsList: RouteItem[] // 标签页
+}
+
+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.splice(0, index)
+    },
+    closeRightTabs(route) {
+      // 关闭右侧
+      const index = this.tabsList.findIndex((item) => item.fullPath == route.fullPath)
+      this.tabsList.splice(index + 1)
+    },
+    closeOtherTabs(route) {
+      // 关闭其他
+      this.tabsList = this.tabsList.filter((item) => item.fullPath == route.fullPath)
+    },
+    closeCurrentTab(route) {
+      // 关闭当前页
+      const index = this.tabsList.findIndex((item) => item.fullPath == route.fullPath)
+      this.tabsList.splice(index, 1)
+    },
+    closeAllTabs() {
+      // 关闭全部
+      this.tabsList = []
+      localStorage.removeItem(TABS_ROUTES)
+    }
+  }
+})

src/store/modules/user.ts

@@ -0,0 +1,114 @@
+import { defineStore } from 'pinia'
+import { createStorage } from '@/utils/Storage'
+import { store } from '@/store'
+import { ACCESS_TOKEN, CURRENT_USER, IS_LOCKSCREEN } from '@/store/mutation-types'
+import { ResultEnum } from '@/enums/httpEnum'
+const Storage = createStorage({ storage: localStorage })
+import { getUserInfo, login } from '@/api/system/user'
+import { storage } from '@/utils/Storage'
+
+interface UserState {
+  token: string
+  username: string
+  welcome: string
+  avatar: string
+  roles: any[]
+  info: any
+}
+
+export const useUserStore = defineStore({
+  id: 'app-user',
+  state: (): UserState => ({
+    token: Storage.get(ACCESS_TOKEN, ''),
+    username: '',
+    welcome: '',
+    avatar: '',
+    roles: [],
+    info: Storage.get(CURRENT_USER, {})
+  }),
+  getters: {
+    getToken(): string {
+      return this.token
+    },
+    getAvatar(): string {
+      return this.avatar
+    },
+    getNickname(): string {
+      return this.username
+    },
+    getRoles(): [any][] {
+      return this.roles
+    },
+    getUserInfo(): object {
+      return this.info
+    }
+  },
+  actions: {
+    setToken(token: string) {
+      this.token = token
+    },
+    setAvatar(avatar: string) {
+      this.avatar = avatar
+    },
+    setRoles(roles) {
+      this.roles = roles
+    },
+    setUserInfo(info) {
+      this.info = info
+    },
+    // 登录
+    async login(userInfo) {
+      try {
+        const response = await login(userInfo)
+        const { result, code, message } = response
+        if (code === ResultEnum.SUCCESS) {
+          const ex = 7 * 24 * 60 * 60 * 1000
+          storage.set(ACCESS_TOKEN, result.token, ex)
+          storage.set(CURRENT_USER, result, ex)
+          storage.set(IS_LOCKSCREEN, false)
+          this.setToken(result.token)
+          this.setUserInfo(result)
+        }
+        return Promise.resolve(response)
+      } catch (e) {
+        return Promise.reject(e)
+      }
+    },
+
+    // 获取用户信息
+    GetInfo() {
+      let that = this;
+      return new Promise((resolve, reject) => {
+        getUserInfo().then((res) => {
+          const result = res
+          if (result.roles && result.roles.length) {
+            const roles = result.roles
+            that.setRoles(roles)
+            that.setUserInfo(result)
+          } else {
+            reject(new Error('getInfo: roles must be a non-null array !'))
+          }
+          that.setAvatar(result.avatar)
+          resolve(res)
+        })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+
+    // 登出
+    async logout() {
+      this.setRoles([])
+      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);
+}