init

src/store/index.js

@@ -0,0 +1,18 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:26:15
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+export function setupStore(app) {
+  const pinia = createPinia()
+  pinia.use(piniaPluginPersistedstate)
+  app.use(pinia)
+}
+
+export * from './modules'

src/store/modules/app.js

@@ -0,0 +1,37 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:31
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+import { useDark } from '@vueuse/core'
+import settings from '@/settings'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    collapsed: false,
+    isDark: useDark(),
+    layout: settings.defaultLayout,
+  }),
+  actions: {
+    switchCollapsed() {
+      this.collapsed = !this.collapsed
+    },
+    setCollapsed(b) {
+      this.collapsed = b
+    },
+    toggleDark() {
+      this.isDark = !this.isDark
+    },
+    setDeaultLayout(v) {
+      this.layout = v
+    },
+  },
+  persist: {
+    paths: ['layout', 'collapsed'],
+    storage: localStorage,
+  },
+})

src/store/modules/auth.js

@@ -0,0 +1,54 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:39
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+import { useUserStore, usePermissionStore, useTabStore } from '@/store'
+import { resetRouter, router } from '@/router'
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    accessToken: undefined,
+  }),
+  actions: {
+    setToken({ accessToken }) {
+      this.accessToken = accessToken
+    },
+    resetToken() {
+      this.$reset()
+    },
+    toLogin() {
+      const currentRoute = unref(router.currentRoute)
+      router.replace({
+        path: '/login',
+        query: currentRoute.query,
+      })
+    },
+    resetLoginState() {
+      const { resetUser } = useUserStore()
+      const { resetPermission } = usePermissionStore()
+      const { resetTabs } = useTabStore()
+      // 重置用户
+      resetUser()
+      // 重置权限
+      resetPermission()
+      // 重置Tabs
+      resetTabs()
+      // 重置路由
+      resetRouter()
+      // 重置token
+      this.resetToken()
+    },
+    async logout() {
+      this.resetLoginState()
+      this.toLogin()
+    },
+  },
+  persist: {
+    key: 'vue-naivue-admin_auth',
+  },
+})

src/store/modules/index.js

@@ -0,0 +1,5 @@
+export * from './app'
+export * from './auth'
+export * from './permission'
+export * from './tab'
+export * from './user'

src/store/modules/permission.js

@@ -0,0 +1,80 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:47
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+import { isExternal } from '@/utils'
+import { basePermissions } from '@/settings'
+import api from '@/api'
+
+const routeComponents = import.meta.glob('@/views/**/*.vue')
+
+export const usePermissionStore = defineStore('permission', {
+  state: () => ({
+    menus: [],
+    accessRoutes: [],
+    asyncPermissions: [],
+  }),
+  getters: {
+    permissions() {
+      return basePermissions.concat(this.asyncPermissions)
+    },
+  },
+  actions: {
+    async initPermissions() {
+      const { data } = (await api.getRolePermissions()) || []
+      this.asyncPermissions = data
+      this.menus = this.permissions
+        .filter((item) => item.type === 'MENU')
+        .map((item) => this.getMenuItem(item))
+        .filter((item) => !!item)
+        .sort((a, b) => a.order - b.order)
+    },
+    getMenuItem(item, parent) {
+      const route = this.generateRoute(item, item.show ? null : parent?.key)
+      if (item.enable && route.path && !isExternal(route.path)) this.accessRoutes.push(route)
+      if (!item.show) return null
+      const menuItem = {
+        label: route.meta.title,
+        key: route.name,
+        path: route.path,
+        icon: () => h('i', { class: `${route.meta.icon}?mask text-16` }),
+        order: item.order ?? 0,
+      }
+      const children = item.children?.filter((item) => item.type === 'MENU') || []
+      if (children.length) {
+        menuItem.children = children
+          .map((child) => this.getMenuItem(child, menuItem))
+          .filter((item) => !!item)
+          .sort((a, b) => a.order - b.order)
+        if (!menuItem.children.length) delete menuItem.children
+      }
+      return menuItem
+    },
+    generateRoute(item, parentKey) {
+      return {
+        name: item.code,
+        path: item.path,
+        redirect: item.redirect,
+        component: routeComponents[item.component] || undefined,
+        meta: {
+          icon: item.icon,
+          title: item.name,
+          layout: item.layout || 'default',
+          keepAlive: !!item.keepAlive,
+          parentKey,
+          btns: item.children
+            ?.filter((item) => item.type === 'BUTTON')
+            .map((item) => ({ code: item.code, name: item.name })),
+        },
+      }
+    },
+    resetPermission() {
+      this.$reset()
+    },
+  },
+})

src/store/modules/tab.js

@@ -0,0 +1,91 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:52
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+import { router } from '@/router'
+
+export const useTabStore = defineStore('tab', {
+  state: () => ({
+    tabs: [],
+    activeTab: '',
+    reloading: false,
+  }),
+  getters: {
+    activeIndex() {
+      return this.tabs.findIndex((item) => item.path === this.activeTab)
+    },
+  },
+  actions: {
+    async setActiveTab(path) {
+      await nextTick() // tab栏dom更新完再设置激活，让tab栏定位到新增的tab上生效
+      this.activeTab = path
+    },
+    setTabs(tabs) {
+      this.tabs = tabs
+    },
+    addTab(tab = {}) {
+      const findIndex = this.tabs.findIndex((item) => item.path === tab.path)
+      if (findIndex !== -1) {
+        this.tabs.splice(findIndex, 1, tab)
+      } else {
+        this.setTabs([...this.tabs, tab])
+      }
+      this.setActiveTab(tab.path)
+    },
+    async reloadTab(path, keepAlive) {
+      const findItem = this.tabs.find((item) => item.path === path)
+      if (!findItem) return
+      // 更新key可让keepAlive失效
+      if (keepAlive) findItem.keepAlive = false
+      $loadingBar.start()
+      this.reloading = true
+      await nextTick()
+      this.reloading = false
+      findItem.keepAlive = !!keepAlive
+      setTimeout(() => {
+        document.documentElement.scrollTo({ left: 0, top: 0 })
+        $loadingBar.finish()
+      }, 100)
+    },
+    async removeTab(path) {
+      this.setTabs(this.tabs.filter((tab) => tab.path !== path))
+      if (path === this.activeTab) {
+        router.push(this.tabs[this.tabs.length - 1].path)
+      }
+    },
+    removeOther(curPath = this.activeTab) {
+      this.setTabs(this.tabs.filter((tab) => tab.path === curPath))
+      if (curPath !== this.activeTab) {
+        router.push(this.tabs[this.tabs.length - 1].path)
+      }
+    },
+    removeLeft(curPath) {
+      const curIndex = this.tabs.findIndex((item) => item.path === curPath)
+      const filterTabs = this.tabs.filter((item, index) => index >= curIndex)
+      this.setTabs(filterTabs)
+      if (!filterTabs.find((item) => item.path === this.activeTab)) {
+        router.push(filterTabs[filterTabs.length - 1].path)
+      }
+    },
+    removeRight(curPath) {
+      const curIndex = this.tabs.findIndex((item) => item.path === curPath)
+      const filterTabs = this.tabs.filter((item, index) => index <= curIndex)
+      this.setTabs(filterTabs)
+      if (!filterTabs.find((item) => item.path === this.activeTab.value)) {
+        router.push(filterTabs[filterTabs.length - 1].path)
+      }
+    },
+    resetTabs() {
+      this.$reset()
+    },
+  },
+  persist: {
+    paths: ['tabs'],
+    storage: sessionStorage,
+  },
+})

src/store/modules/user.js

@@ -0,0 +1,69 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2023/12/05 21:25:59
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+import api from '@/api'
+import { useAuthStore } from '@/store'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    userInfo: null,
+  }),
+  getters: {
+    userId() {
+      return this.userInfo?.id
+    },
+    username() {
+      return this.userInfo?.username
+    },
+    nickName() {
+      return this.userInfo?.nickName
+    },
+    avatar() {
+      return this.userInfo?.avatar
+    },
+    currentRole() {
+      return this.userInfo?.currentRole || {}
+    },
+    roles() {
+      return this.userInfo?.roles || []
+    },
+  },
+  actions: {
+    async getUserInfo() {
+      try {
+        const res = await api.getUser()
+        const { id, username, profile, roles, currentRole } = res.data || {}
+        this.userInfo = {
+          id,
+          username,
+          avatar: profile?.avatar,
+          nickName: profile?.nickName,
+          gender: profile?.gender,
+          address: profile?.address,
+          email: profile?.email,
+          roles,
+          currentRole,
+        }
+        return Promise.resolve(res.data)
+      } catch (error) {
+        return Promise.reject(error)
+      }
+    },
+    async switchCurrentRole(roleCode) {
+      const { data } = await api.switchCurrentRole(roleCode)
+      const authStore = useAuthStore()
+      authStore.resetLoginState()
+      await nextTick()
+      authStore.setToken(data)
+    },
+    resetUser() {
+      this.$reset()
+    },
+  },
+})