xto-fronted 0.2.6 → 0.2.8

package/src/router/dynamicRoutes.ts

@@ -0,0 +1,163 @@
+/**
+ * 动态路由模板
+ */
+
+import type { RouteRecordRaw } from 'vue-router'
+
+// 布局路由（包含默认子路由）
+export const layoutRoute: RouteRecordRaw = {
+  path: '/',
+  name: 'Layout',
+  component: () => import('@/components/Layout/index.vue'),
+  redirect: '/dashboard',
+  children: [
+    {
+      path: '/dashboard',
+      name: 'Dashboard',
+      component: () => import('@/views/dashboard/index.vue'),
+      meta: {
+        title: '仪表盘',
+        icon: 'dashboard',
+        keepAlive: true,
+        affix: true
+      }
+    },
+    {
+      path: '/system/user',
+      name: 'SystemUser',
+      component: () => import('@/views/system/user/index.vue'),
+      meta: {
+        title: '用户管理',
+        icon: 'user',
+        keepAlive: true
+      }
+    },
+    {
+      path: '/system/role',
+      name: 'SystemRole',
+      component: () => import('@/views/system/role/index.vue'),
+      meta: {
+        title: '角色管理',
+        icon: 'role',
+        keepAlive: true
+      }
+    },
+    {
+      path: '/system/menu',
+      name: 'SystemMenu',
+      component: () => import('@/views/system/menu/index.vue'),
+      meta: {
+        title: '菜单管理',
+        icon: 'menu',
+        keepAlive: true
+      }
+    }
+  ]
+}
+
+// 默认路由（用于开发，后续由后端返回）
+export const defaultDynamicRoutes: RouteRecordRaw[] = [
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: () => import('@/views/dashboard/index.vue'),
+    meta: {
+      title: '仪表盘',
+      icon: 'dashboard',
+      keepAlive: true,
+      affix: true
+    }
+  },
+  {
+    path: '/system',
+    name: 'System',
+    redirect: '/system/user',
+    meta: {
+      title: '系统管理',
+      icon: 'setting'
+    },
+    children: [
+      {
+        path: 'user',
+        name: 'SystemUser',
+        component: () => import('@/views/system/user/index.vue'),
+        meta: {
+          title: '用户管理',
+          icon: 'user',
+          keepAlive: true
+        }
+      },
+      {
+        path: 'role',
+        name: 'SystemRole',
+        component: () => import('@/views/system/role/index.vue'),
+        meta: {
+          title: '角色管理',
+          icon: 'role',
+          keepAlive: true
+        }
+      },
+      {
+        path: 'menu',
+        name: 'SystemMenu',
+        component: () => import('@/views/system/menu/index.vue'),
+        meta: {
+          title: '菜单管理',
+          icon: 'menu',
+          keepAlive: true
+        }
+      }
+    ]
+  }
+]
+
+// Mock 菜单数据
+export const mockMenuData = [
+  {
+    id: 1,
+    name: 'Dashboard',
+    path: '/dashboard',
+    component: 'dashboard/index',
+    icon: 'dashboard',
+    title: '仪表盘',
+    keepAlive: true,
+    affix: true
+  },
+  {
+    id: 2,
+    name: 'System',
+    path: '/system',
+    redirect: '/system/user',
+    icon: 'setting',
+    title: '系统管理',
+    children: [
+      {
+        id: 21,
+        name: 'SystemUser',
+        path: '/system/user',
+        component: 'system/user/index',
+        icon: 'user',
+        title: '用户管理',
+        keepAlive: true
+      },
+      {
+        id: 22,
+        name: 'SystemRole',
+        path: '/system/role',
+        component: 'system/role/index',
+        icon: 'role',
+        title: '角色管理',
+        keepAlive: true
+      },
+      {
+        id: 23,
+        name: 'SystemMenu',
+        path: '/system/menu',
+        component: 'system/menu/index',
+        icon: 'menu',
+        title: '菜单管理',
+        keepAlive: true
+      }
+    ]
+  }
+]

package/src/router/index.ts

@@ -0,0 +1,81 @@
+/**
+ * 路由配置
+ */
+
+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
+}
+
+export default router

package/src/router/layoutRoute.ts

@@ -0,0 +1,45 @@
+/**
+ * 布局路由工厂函数
+ */
+
+import { createRouter as vueCreateRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw, Router } from 'vue-router'
+import Layout from '@/components/Layout/index.vue'
+
+interface LayoutRouteOptions {
+  indexPath?: string
+}
+
+/**
+ * 创建布局路由
+ * @param children 子路由配置
+ * @param options 配置选项
+ * @returns 布局路由配置
+ */
+export function createLayoutRoute(
+  children: RouteRecordRaw[],
+  options: LayoutRouteOptions = {}
+): RouteRecordRaw {
+  const indexPath = options.indexPath || '/dashboard'
+
+  return {
+    path: '/',
+    name: 'Layout',
+    component: Layout,
+    redirect: indexPath,
+    children
+  }
+}
+
+/**
+ * 创建路由实例
+ * @param routes 路由配置数组
+ * @returns 路由实例
+ */
+export function createRouter(routes: RouteRecordRaw[]): Router {
+  return vueCreateRouter({
+    history: createWebHistory(),
+    routes,
+    scrollBehavior: () => ({ left: 0, top: 0 })
+  })
+}

package/src/router/staticRoutes.ts

@@ -0,0 +1,43 @@
+/**
+ * 静态路由
+ */
+
+import type { RouteRecordRaw } from 'vue-router'
+
+export const staticRoutes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login/index.vue'),
+    meta: {
+      title: '登录',
+      hidden: true
+    }
+  },
+  {
+    path: '/404',
+    name: 'NotFound',
+    component: () => import('@/views/error/404.vue'),
+    meta: {
+      title: '404',
+      hidden: true
+    }
+  },
+  {
+    path: '/403',
+    name: 'Forbidden',
+    component: () => import('@/views/error/403.vue'),
+    meta: {
+      title: '403',
+      hidden: true
+    }
+  }
+]
+
+export const errorRoute: RouteRecordRaw = {
+  path: '/:pathMatch(.*)*',
+  redirect: '/404',
+  meta: {
+    hidden: true
+  }
+}

package/src/stores/app.ts

@@ -0,0 +1,163 @@
+/**
+ * 应用状态
+ */
+
+import { defineStore } from 'pinia'
+import { ref, computed, watch } from 'vue'
+import { local } from '@/utils/storage'
+
+export type ThemeMode = 'light' | 'dark'
+export type LayoutMode = 'sidebar' | 'top' | 'mix'
+
+export const useAppStore = defineStore('app', () => {
+  // 状态
+  const appName = ref<string>(local.get<string>('appName') || 'XTO App')
+  const indexPath = ref<string>(local.get<string>('indexPath') || '/dashboard')
+  const isDark = ref<boolean>(local.get<boolean>('isDark') || false)
+  const theme = ref<ThemeMode>(local.get<ThemeMode>('theme') || 'light')
+  const layout = ref<LayoutMode>(local.get<LayoutMode>('layout') || 'sidebar')
+  const isCollapsed = ref<boolean>(local.get<boolean>('isCollapsed') || false)
+  const showTabs = ref<boolean>(local.get<boolean>('showTabs') ?? true)
+  const showFooter = ref<boolean>(local.get<boolean>('showFooter') ?? true)
+  const showBreadcrumb = ref<boolean>(local.get<boolean>('showBreadcrumb') ?? true)
+  const primaryColor = ref<string>(local.get<string>('primaryColor') || '#409eff')
+  const cachedViews = ref<string[]>([])
+
+  // 计算属性
+  const themeClass = computed(() => (isDark.value ? 'dark' : 'light'))
+
+  // 设置应用名称
+  const setAppName = (name: string) => {
+    appName.value = name
+    local.set('appName', name)
+  }
+
+  // 设置默认首页路径
+  const setIndexPath = (path: string) => {
+    indexPath.value = path
+    local.set('indexPath', path)
+  }
+
+  // 切换主题
+  const toggleTheme = () => {
+    isDark.value = !isDark.value
+    theme.value = isDark.value ? 'dark' : 'light'
+    updateTheme()
+  }
+
+  // 设置主题
+  const setTheme = (mode: ThemeMode) => {
+    theme.value = mode
+    isDark.value = mode === 'dark'
+    updateTheme()
+  }
+
+  // 更新主题
+  const updateTheme = () => {
+    const html = document.documentElement
+    if (isDark.value) {
+      html.classList.add('dark')
+    } else {
+      html.classList.remove('dark')
+    }
+    local.set('isDark', isDark.value)
+    local.set('theme', theme.value)
+  }
+
+  // 切换菜单折叠
+  const toggleCollapse = () => {
+    isCollapsed.value = !isCollapsed.value
+    local.set('isCollapsed', isCollapsed.value)
+  }
+
+  // 设置布局
+  const setLayout = (mode: LayoutMode) => {
+    layout.value = mode
+    local.set('layout', mode)
+  }
+
+  // 切换标签页
+  const toggleTabs = () => {
+    showTabs.value = !showTabs.value
+    local.set('showTabs', showTabs.value)
+  }
+
+  // 切换底部
+  const toggleFooter = () => {
+    showFooter.value = !showFooter.value
+    local.set('showFooter', showFooter.value)
+  }
+
+  // 切换面包屑
+  const toggleBreadcrumb = () => {
+    showBreadcrumb.value = !showBreadcrumb.value
+    local.set('showBreadcrumb', showBreadcrumb.value)
+  }
+
+  // 设置主题色
+  const setPrimaryColor = (color: string) => {
+    primaryColor.value = color
+    document.documentElement.style.setProperty('--color-primary', color)
+    local.set('primaryColor', color)
+  }
+
+  // 添加缓存页面
+  const addCachedView = (name: string) => {
+    if (!cachedViews.value.includes(name)) {
+      cachedViews.value.push(name)
+    }
+  }
+
+  // 移除缓存页面
+  const removeCachedView = (name: string) => {
+    const index = cachedViews.value.indexOf(name)
+    if (index > -1) {
+      cachedViews.value.splice(index, 1)
+    }
+  }
+
+  // 清除缓存页面
+  const clearCachedViews = () => {
+    cachedViews.value = []
+  }
+
+  // 初始化主题
+  const initTheme = () => {
+    updateTheme()
+    if (primaryColor.value !== '#409eff') {
+      document.documentElement.style.setProperty('--color-primary', primaryColor.value)
+    }
+  }
+
+  // 监听主题变化
+  watch(isDark, updateTheme)
+
+  return {
+    appName,
+    indexPath,
+    isDark,
+    theme,
+    layout,
+    isCollapsed,
+    showTabs,
+    showFooter,
+    showBreadcrumb,
+    primaryColor,
+    cachedViews,
+    themeClass,
+    setAppName,
+    setIndexPath,
+    toggleTheme,
+    toggleCollapse,
+    setTheme,
+    setLayout,
+    toggleTabs,
+    toggleFooter,
+    toggleBreadcrumb,
+    setPrimaryColor,
+    addCachedView,
+    removeCachedView,
+    clearCachedViews,
+    initTheme
+  }
+})

package/src/stores/auth.ts

@@ -0,0 +1,66 @@
+/**
+ * 认证状态
+ */
+
+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())
+
+  // 应用配置
+  const baseUrl = ref<string>('')
+  const appId = ref<string>('')
+  const clientId = ref<string>('')
+  const loginPath = ref<string>('/login')
+
+  // 设置 token
+  const login = (tokenInfo: { token: string; refreshToken: string; expireTime: number }) => {
+    token.value = tokenInfo.token
+    setTokenInfo(tokenInfo)
+  }
+
+  // 登出
+  const logout = () => {
+    token.value = null
+    clearToken()
+  }
+
+  // 设置 API 基础路径
+  const setBaseUrl = (url: string) => {
+    baseUrl.value = url
+  }
+
+  // 设置应用 ID
+  const setAppId = (id: string) => {
+    appId.value = id
+  }
+
+  // 设置客户端 ID
+  const setClientId = (id: string) => {
+    clientId.value = id
+  }
+
+  // 设置登录页路径
+  const setLoginPath = (path: string) => {
+    loginPath.value = path
+  }
+
+  return {
+    token,
+    isLoggedIn,
+    baseUrl,
+    appId,
+    clientId,
+    loginPath,
+    login,
+    logout,
+    setBaseUrl,
+    setAppId,
+    setClientId,
+    setLoginPath
+  }
+})

package/src/stores/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Pinia Store 入口
+ */
+
+import { createPinia } from 'pinia'
+
+const pinia = createPinia()
+
+export default pinia
+
+// 导出所有 stores
+export * from './user'
+export * from './auth'
+export * from './menu'
+export * from './app'

package/src/stores/menu.ts

@@ -0,0 +1,80 @@
+/**
+ * 菜单状态
+ */
+
+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
+  }
+})