115 lines
4.0 KiB
TypeScript
115 lines
4.0 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { Notification } from '@arco-design/web-vue'
|
|
import type { NotificationReturn } from '@arco-design/web-vue/es/notification/interface'
|
|
import type { RouteRecordNormalized } from 'vue-router'
|
|
import defaultSettings from '@/config/settings.json'
|
|
import { userPmn } from '@/api/module/user'
|
|
import { localMenuData, transformMenuToRoutes, type ServerMenuItem } from '@/router/menu-data'
|
|
import { buildTree } from '@/utils/tree'
|
|
import SafeStorage, { AppStorageKey } from "@/utils/safeStorage";
|
|
import router from '@/router'
|
|
import { AppState } from './types'
|
|
|
|
|
|
const useAppStore = defineStore('app', {
|
|
state: (): AppState => ({ ...defaultSettings }),
|
|
|
|
getters: {
|
|
appCurrentSetting(state: AppState): AppState {
|
|
return { ...state }
|
|
},
|
|
appDevice(state: AppState) {
|
|
return state.device
|
|
},
|
|
appAsyncMenus(state: AppState): RouteRecordNormalized[] {
|
|
return state.serverMenu as unknown as RouteRecordNormalized[]
|
|
},
|
|
},
|
|
|
|
actions: {
|
|
// Update app settings
|
|
updateSettings(partial: Partial<AppState>) {
|
|
// @ts-ignore-next-line
|
|
this.$patch(partial)
|
|
},
|
|
|
|
// Change theme color
|
|
toggleTheme(dark: boolean) {
|
|
if (dark) {
|
|
this.theme = 'dark'
|
|
document.body.setAttribute('arco-theme', 'dark')
|
|
} else {
|
|
this.theme = 'light'
|
|
document.body.removeAttribute('arco-theme')
|
|
}
|
|
},
|
|
toggleDevice(device: string) {
|
|
this.device = device
|
|
},
|
|
toggleMenu(value: boolean) {
|
|
this.hideMenu = value
|
|
},
|
|
async fetchServerMenuConfig() {
|
|
const userInfo = SafeStorage.get(AppStorageKey.USER_INFO) as any
|
|
let notifyInstance: NotificationReturn | null = null
|
|
try {
|
|
// 使用本地菜单数据（接口未准备好）
|
|
// TODO: 接口准备好后，取消下面的注释，使用真实接口数据
|
|
const res = await userPmn({ id: userInfo.user_id, workspace: import.meta.env.VITE_APP_WORKSPACE })
|
|
console.log('res', res)
|
|
if (res.code === 0 && res?.details?.length) {
|
|
// 使用 buildTree 将扁平数据构建为树结构
|
|
const treeResult = buildTree(res.details[0].permissions as ServerMenuItem[], {
|
|
orderKey: 'order'
|
|
})
|
|
console.log('buildTree', treeResult)
|
|
|
|
// 使用 transformMenuToRoutes 将树结构转换为路由配置
|
|
const routes = transformMenuToRoutes(treeResult.rootItems as ServerMenuItem[])
|
|
console.log('transformMenuToRoutes', routes)
|
|
|
|
// 动态注册路由
|
|
routes.forEach((route) => {
|
|
// 打印路由结构以便调试
|
|
// console.log('Registering route:', JSON.stringify(route, (key, value) => {
|
|
// if (typeof value === 'function') return '[Function]'
|
|
// return value
|
|
// }, 2))
|
|
router.addRoute(route as any)
|
|
})
|
|
|
|
this.serverMenu = routes as unknown as RouteRecordNormalized[]
|
|
} else {
|
|
// 如果接口返回数据为空，使用本地数据
|
|
// localMenuData.forEach((route) => {
|
|
// router.addRoute(route as any)
|
|
// })
|
|
// this.serverMenu = localMenuData as unknown as RouteRecordNormalized[]
|
|
}
|
|
|
|
} catch (error) {
|
|
// 接口失败时使用本地数据
|
|
console.error('fetchServerMenuConfig error:', error)
|
|
// localMenuData.forEach((route) => {
|
|
// router.addRoute(route as any)
|
|
// })
|
|
// this.serverMenu = localMenuData as unknown as RouteRecordNormalized[]
|
|
}
|
|
},
|
|
clearServerMenu() {
|
|
// 清除动态注册的路由
|
|
if (this.serverMenu && this.serverMenu.length > 0) {
|
|
this.serverMenu.forEach((route) => {
|
|
const routeName = (route as any).name
|
|
if (routeName && typeof routeName === 'string') {
|
|
router.removeRoute(routeName)
|
|
}
|
|
})
|
|
}
|
|
this.serverMenu = []
|
|
},
|
|
},
|
|
})
|
|
|
|
export default useAppStore
|