xto-fronted 0.1.1 → 0.1.3

package/src/router/index.ts

@@ -1,81 +1,71 @@
-/**
- * 路由配置
- */
-
-import { createRouter, createWebHistory } from 'vue-router'
-import { staticRoutes, errorRoute } from './staticRoutes'
-import { layoutRoute } from './dynamicRoutes'
-import { hasToken } from '@/utils/auth'
-import { useUserStore } from '@/stores/user'
-import { useMenuStore } from '@/stores/menu'
-import { useAppStore } from '@/stores/app'
-import { mockMenuData } from './dynamicRoutes'
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes: [...staticRoutes, layoutRoute, errorRoute],
-  scrollBehavior: () => ({ left: 0, top: 0 })
-})
-
-// 白名单路由
-const whiteList = ['/login', '/404', '/403']
-
-// 路由守卫
-router.beforeEach(async (to, _from, next) => {
-  const appStore = useAppStore()
-
-  // 初始化主题
-  appStore.initTheme()
-
-  // 已登录
-  if (hasToken()) {
-    if (to.path === '/login') {
-      // 已登录，跳转到首页
-      next({ path: '/' })
-    } else {
-      // 设置用户信息（如果未设置）
-      const userStore = useUserStore()
-      if (!userStore.isLoggedIn) {
-        userStore.setUserInfo({
-          id: 1,
-          username: 'admin',
-          nickname: '管理员',
-          avatar: '',
-          email: 'admin@example.com',
-          phone: '13800138000',
-          status: 1,
-          roles: ['admin'],
-          permissions: ['*'],
-          createTime: new Date().toISOString()
-        })
-
-        // 设置菜单
-        const menuStore = useMenuStore()
-        menuStore.setMenuList(mockMenuData)
-      }
-
-      // 添加缓存页面
-      if (to.name && to.meta.keepAlive) {
-        appStore.addCachedView(to.name as string)
-      }
-      next()
-    }
-  } else {
-    // 未登录
-    if (whiteList.includes(to.path)) {
-      next()
-    } else {
-      next('/login')
-    }
-  }
-})
-
-export function resetRouter() {
-  const newRouter = createRouter({
-    history: createWebHistory(),
-    routes: [...staticRoutes, layoutRoute, errorRoute]
-  })
-  ;(router as any).matcher = (newRouter as any).matcher
-}
-
+/**
+ * 路由配置
+ */
+
+import { createRouter, createWebHistory } from 'vue-router'
+import { staticRoutes, errorRoute } from './staticRoutes'
+import { layoutRoute } from './dynamicRoutes'
+import { hasToken } from '@/utils/auth'
+import { useAppStore } from '@/stores/app'
+import { useApp } from '@/composables'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [...staticRoutes, layoutRoute, errorRoute],
+  scrollBehavior: () => ({ left: 0, top: 0 })
+})
+
+// 白名单路由
+const whiteList = ['/login', '/404', '/403']
+
+// 路由守卫
+router.beforeEach(async (to, _from, next) => {
+  const appStore = useAppStore()
+
+  // 初始化主题
+  appStore.initTheme()
+
+  // 已登录
+  if (hasToken()) {
+    if (to.path === '/login') {
+      // 已登录，跳转到首页
+      next({ path: '/' })
+    } else {
+      // 初始化应用（加载用户信息和菜单）
+      const { initApp, isLoggedIn } = useApp()
+
+      if (!isLoggedIn.value) {
+        const success = await initApp()
+        if (!success) {
+          // 初始化失败，跳转登录页
+          next('/login')
+          return
+        }
+      }
+
+      // 添加缓存页面
+      if (to.name && to.meta.keepAlive) {
+        appStore.addCachedView(to.name as string)
+      }
+      next()
+    }
+  } else {
+    // 未登录
+    if (whiteList.includes(to.path)) {
+      next()
+    } else {
+      // 记录当前路径，登录后跳转
+      next({ path: '/login', query: { redirectUrl: encodeURIComponent(to.fullPath) } })
+    }
+  }
+})
+
+export function resetRouter() {
+  const newRouter = createRouter({
+    history: createWebHistory(),
+    routes: [...staticRoutes, layoutRoute, errorRoute]
+  })
+  ;(router as any).matcher = (newRouter as any).matcher
+}
+
 export default router

package/src/stores/auth.ts

@@ -1,32 +1,45 @@
-/**
- * 认证状态
- */
-
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import { getToken, clearToken, setTokenInfo, hasToken } from '@/utils/auth'
-
-export const useAuthStore = defineStore('auth', () => {
-  // 状态
-  const token = ref<string | null>(getToken())
-  const isLoggedIn = computed(() => hasToken())
-
-  // 设置 token
-  const login = (tokenInfo: { token: string; refreshToken: string; expireTime: number }) => {
-    token.value = tokenInfo.token
-    setTokenInfo(tokenInfo)
-  }
-
-  // 登出
-  const logout = () => {
-    token.value = null
-    clearToken()
-  }
-
-  return {
-    token,
-    isLoggedIn,
-    login,
-    logout
-  }
+/**
+ * 认证状态
+ */
+
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { getLoginInfo, setLoginInfo, clearToken, hasToken } from '@/utils/auth'
+import type { LoginInfo } from '@/utils/auth'
+
+export const useAuthStore = defineStore('auth', () => {
+  // 状态
+  const loginInfo = ref<LoginInfo | null>(getLoginInfo())
+  const isLoggedIn = computed(() => hasToken())
+
+  // 设置登录信息
+  const login = (data: Record<string, unknown>) => {
+    setLoginInfo(data)
+    loginInfo.value = getLoginInfo()
+  }
+
+  // 登出
+  const logout = () => {
+    loginInfo.value = null
+    clearToken()
+  }
+
+  // 获取 access token
+  const accessToken = computed(() => loginInfo.value?.accessToken || null)
+
+  // 获取 token type
+  const tokenType = computed(() => loginInfo.value?.tokenType || 'Bearer')
+
+  // 获取 code
+  const code = computed(() => loginInfo.value?.code || null)
+
+  return {
+    loginInfo,
+    isLoggedIn,
+    accessToken,
+    tokenType,
+    code,
+    login,
+    logout
+  }
 })

package/src/stores/menu.ts

@@ -1,80 +1,158 @@
-/**
- * 菜单状态
- */
-
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import type { AppRoute } from '@/types/router'
-import type { MenuItem } from '@/types/api'
-import { local } from '@/utils/storage'
-import router from '@/router'
-
-export const useMenuStore = defineStore('menu', () => {
-  // 状态
-  const menuList = ref<MenuItem[]>(local.get<MenuItem[]>('menuList') || [])
-
-  // 计算属性
-  const hasMenu = computed(() => menuList.value.length > 0)
-
-  // 设置菜单
-  const setMenuList = (menus: MenuItem[]) => {
-    menuList.value = menus
-    local.set('menuList', menus)
-  }
-
-  // 清除菜单
-  const clearMenu = () => {
-    menuList.value = []
-    local.remove('menuList')
-  }
-
-  // 生成路由
-  const generateRoutes = (menus: MenuItem[]): AppRoute[] => {
-    return menus
-      .filter(menu => !menu.hidden)
-      .map(menu => {
-        const route: AppRoute = {
-          path: menu.path,
-          name: menu.name,
-          meta: {
-            title: menu.title,
-            icon: menu.icon,
-            keepAlive: menu.keepAlive,
-            hidden: menu.hidden
-          }
-        }
-
-        if (menu.redirect) {
-          route.redirect = menu.redirect
-        }
-
-        if (menu.component) {
-          // 动态导入组件
-          route.component = () => import(`@/views/${menu.component}.vue`)
-        }
-
-        if (menu.children && menu.children.length > 0) {
-          route.children = generateRoutes(menu.children)
-        }
-
-        return route
-      })
-  }
-
-  // 添加路由
-  const addRoutes = (menus: MenuItem[]) => {
-    const routes = generateRoutes(menus)
-    routes.forEach(route => {
-      router.addRoute('Layout', route as any)
-    })
-  }
-
-  return {
-    menuList,
-    hasMenu,
-    setMenuList,
-    clearMenu,
-    generateRoutes,
-    addRoutes
-  }
+/**
+ * 菜单状态
+ */
+
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { MenuItem, RemoteMenuItem } from '@/types/api'
+import { local } from '@/utils/storage'
+
+export const useMenuStore = defineStore('menu', () => {
+  // 存储 key
+  const MENU_LIST_KEY = 'menu_list'
+  const MENU_BTN_LIST_KEY = 'menu_btn_list'
+
+  // 状态
+  const menuList = ref<MenuItem[]>(local.get<MenuItem[]>(MENU_LIST_KEY) || [])
+  const menuBtnListMap = ref<Record<string, MenuItem[]>>(local.get<Record<string, MenuItem[]>>(MENU_BTN_LIST_KEY) || {})
+
+  // 首页菜单信息
+  const indexMenu: MenuItem = {
+    code: 'home',
+    name: '首页',
+    icon: 'home',
+    closable: false,
+    default: false,
+    out: false,
+    path: '/dashboard',
+    title: '首页'
+  }
+
+  // 计算属性
+  const hasMenu = computed(() => menuList.value.length > 0)
+
+  // 获取首页地址
+  const index = computed(() => {
+    function recursion(menuList: MenuItem[]): string | null {
+      if (menuList && menuList.length > 0) {
+        for (let i = 0; i < menuList.length; i++) {
+          const menu = menuList[i]
+          if (menu.default) {
+            return menu.path
+          } else {
+            const url = recursion(menu.children || [])
+            if (url) {
+              return url
+            }
+          }
+        }
+      }
+      return null
+    }
+    const indexUrl = recursion(menuList.value)
+    return indexUrl || indexMenu.path
+  })
+
+  // 解析后端菜单数据
+  const parseMenuData = (remoteMenuList: RemoteMenuItem[], parentMenuUrl?: string) => {
+    const localMenuList: MenuItem[] = []
+
+    if (!remoteMenuList || remoteMenuList.length <= 0) {
+      return localMenuList
+    }
+
+    remoteMenuList.forEach(remoteMenu => {
+      if (remoteMenu.type === 1) {
+        // 按钮权限
+        const btn: MenuItem = {
+          code: remoteMenu.menuCode,
+          name: remoteMenu.menuName,
+          path: '',
+          title: remoteMenu.menuName
+        }
+        const parentUrl = parentMenuUrl || ''
+        let btnList = menuBtnListMap.value[parentUrl] || []
+        btnList.push(btn)
+        menuBtnListMap.value[parentUrl] = btnList
+      } else {
+        // 菜单权限
+        const children: MenuItem[] = []
+        let menuPath = remoteMenu.menuUrl
+
+        // 处理外链
+        let isOut = remoteMenu.isOut || false
+        if (!isOut && remoteMenu.menuUrl) {
+          if (remoteMenu.menuUrl.startsWith('http')) {
+            menuPath = '/iframe/' + encodeURIComponent(menuPath)
+          } else if (remoteMenu.menuUrl.startsWith('keep-alive:')) {
+            menuPath = '/iframe/keep-alive/' + encodeURIComponent(menuPath.split('keep-alive:')[1])
+          }
+        }
+
+        const menu: MenuItem = {
+          code: remoteMenu.menuCode,
+          name: remoteMenu.menuName,
+          path: menuPath,
+          icon: remoteMenu.icon,
+          closable: remoteMenu.closable,
+          default: remoteMenu.isDefault,
+          out: isOut,
+          children: children,
+          title: remoteMenu.menuName
+        }
+
+        localMenuList.push(menu)
+
+        // 递归处理子菜单
+        if (remoteMenu.children && remoteMenu.children.length > 0) {
+          const childMenus = parseMenuData(remoteMenu.children, remoteMenu.menuUrl)
+          menu.children = childMenus
+        }
+      }
+    })
+
+    return localMenuList
+  }
+
+  // 设置菜单
+  const setMenuList = (menus: MenuItem[]) => {
+    menuList.value = menus
+    local.set(MENU_LIST_KEY, menus)
+  }
+
+  // 设置菜单（从后端数据）
+  const setMenuFromRemote = (remoteMenus: RemoteMenuItem[]) => {
+    // 清除旧数据
+    clearMenu()
+
+    // 添加首页
+    menuList.value.push(indexMenu)
+
+    // 解析后端菜单
+    const parsedMenus = parseMenuData(remoteMenus)
+    menuList.value.push(...parsedMenus)
+
+    // 保存到本地存储
+    local.set(MENU_LIST_KEY, menuList.value)
+    local.set(MENU_BTN_LIST_KEY, menuBtnListMap.value)
+  }
+
+  // 清除菜单
+  const clearMenu = () => {
+    menuList.value = []
+    menuBtnListMap.value = {}
+    local.remove(MENU_LIST_KEY)
+    local.remove(MENU_BTN_LIST_KEY)
+  }
+
+  return {
+    menuList,
+    menuBtnListMap,
+    hasMenu,
+    index,
+    indexMenu,
+    setMenuList,
+    setMenuFromRemote,
+    clearMenu
+  }
 })

package/src/stores/user.ts

@@ -1,73 +1,41 @@
-/**
- * 用户状态
- */
-
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import type { UserInfo } from '@/types/api'
-import { local } from '@/utils/storage'
-
-export const useUserStore = defineStore('user', () => {
-  // 状态
-  const userInfo = ref<UserInfo | null>(local.get<UserInfo>('userInfo'))
-  const roles = ref<string[]>(local.get<string[]>('roles') || [])
-  const permissions = ref<string[]>(local.get<string[]>('permissions') || [])
-
-  // 计算属性
-  const isLoggedIn = computed(() => !!userInfo.value)
-  const username = computed(() => userInfo.value?.username || '')
-  const nickname = computed(() => userInfo.value?.nickname || '')
-  const avatar = computed(() => userInfo.value?.avatar || '')
-  const userId = computed(() => userInfo.value?.id)
-
-  // 设置用户信息
-  const setUserInfo = (info: UserInfo) => {
-    userInfo.value = info
-    roles.value = info.roles || []
-    permissions.value = info.permissions || []
-    local.set('userInfo', info)
-    local.set('roles', info.roles || [])
-    local.set('permissions', info.permissions || [])
-  }
-
-  // 清除用户信息
-  const clearUserInfo = () => {
-    userInfo.value = null
-    roles.value = []
-    permissions.value = []
-    local.remove('userInfo')
-    local.remove('roles')
-    local.remove('permissions')
-  }
-
-  // 检查权限
-  const hasPermission = (permission: string | string[]): boolean => {
-    if (Array.isArray(permission)) {
-      return permission.some(p => permissions.value.includes(p))
-    }
-    return permissions.value.includes(permission)
-  }
-
-  // 检查角色
-  const hasRole = (role: string | string[]): boolean => {
-    if (Array.isArray(role)) {
-      return role.some(r => roles.value.includes(r))
-    }
-    return roles.value.includes(role)
-  }
-
-  return {
-    userInfo,
-    roles,
-    permissions,
-    isLoggedIn,
-    username,
-    nickname,
-    avatar,
-    userId,
-    setUserInfo,
-    clearUserInfo,
-    hasPermission,
-    hasRole
-  }
+/**
+ * 用户状态
+ */
+
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { UserInfo } from '@/types/api'
+import { local } from '@/utils/storage'
+
+export const useUserStore = defineStore('user', () => {
+  // 状态
+  const userInfo = ref<UserInfo | null>(local.get<UserInfo>('user_info'))
+
+  // 计算属性
+  const isLoggedIn = computed(() => !!userInfo.value)
+  const userName = computed(() => userInfo.value?.userName || '')
+  const avatar = computed(() => userInfo.value?.avatar || '')
+  const userId = computed(() => userInfo.value?.userId)
+
+  // 设置用户信息
+  const setUserInfo = (info: UserInfo) => {
+    userInfo.value = info
+    local.set('user_info', info)
+  }
+
+  // 清除用户信息
+  const clearUserInfo = () => {
+    userInfo.value = null
+    local.remove('user_info')
+  }
+
+  return {
+    userInfo,
+    isLoggedIn,
+    userName,
+    avatar,
+    userId,
+    setUserInfo,
+    clearUserInfo
+  }
 })