xto-fronted 0.1.2 → 0.1.3

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,145 @@
+/**
+ * 应用状态
+ */
+
+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 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 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 {
+    isDark,
+    theme,
+    layout,
+    isCollapsed,
+    showTabs,
+    showFooter,
+    showBreadcrumb,
+    primaryColor,
+    cachedViews,
+    themeClass,
+    toggleTheme,
+    toggleCollapse,
+    setTheme,
+    setLayout,
+    toggleTabs,
+    toggleFooter,
+    toggleBreadcrumb,
+    setPrimaryColor,
+    addCachedView,
+    removeCachedView,
+    clearCachedViews,
+    initTheme
+  }
+})

package/src/stores/auth.ts

@@ -0,0 +1,45 @@
+/**
+ * 认证状态
+ */
+
+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/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,158 @@
+/**
+ * 菜单状态
+ */
+
+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

@@ -0,0 +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>('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
+  }
+})

package/src/types/api.d.ts

@@ -0,0 +1,103 @@
+/**
+ * API 通用类型定义
+ */
+
+// 基础响应
+export interface ApiResponse<T = unknown> {
+  code: number
+  data: T
+  message: string
+}
+
+// 分页请求参数
+export interface PageParams {
+  page: number
+  pageSize: number
+  [key: string]: unknown
+}
+
+// 分页响应
+export interface PageResponse<T> {
+  list: T[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+// 用户信息（来自后端）
+export interface UserInfo {
+  uId: string
+  appId: string
+  userId: string
+  userName: string
+  departmentName?: string
+  email?: string
+  mobilePhone?: string
+  positionName?: string
+  avatar?: string
+  workNo?: string
+}
+
+// 登录请求
+export interface LoginParams {
+  uid: string
+  password: string
+}
+
+// 登录响应
+export interface LoginResult {
+  access_token: string
+  refresh_token: string
+  expires_time: string
+  refresh_time: string
+  token_type: string
+  code: string
+}
+
+// 后端菜单项
+export interface RemoteMenuItem {
+  menuCode: string
+  menuName: string
+  menuUrl: string
+  icon?: string
+  closable?: boolean
+  isDefault?: boolean
+  isOut?: boolean
+  type: number // 0: 菜单, 1: 按钮
+  children?: RemoteMenuItem[]
+}
+
+// 前端菜单项
+export interface MenuItem {
+  code: string
+  name: string
+  path: string
+  component?: string
+  redirect?: string
+  icon?: string
+  title: string
+  hidden?: boolean
+  keepAlive?: boolean
+  affix?: boolean
+  default?: boolean
+  out?: boolean
+  closable?: boolean
+  children?: MenuItem[]
+}
+
+// 按钮权限
+export interface ButtonPermission {
+  code: string
+}
+
+// 角色信息
+export interface RoleInfo {
+  id: number | string
+  name: string
+  code: string
+  description?: string
+  status: number
+  permissions: string[]
+  createTime?: string
+  updateTime?: string
+}

package/src/types/global.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 全局类型定义
+ */
+
+// 通用对象类型
+export type AnyObject = Record<string, unknown>
+
+// 通用函数类型
+export type AnyFunction = (...args: unknown[]) => unknown
+
+// 值类型
+export type ValueOf<T> = T[keyof T]
+
+// 可空类型
+export type Nullable<T> = T | null
+
+// 可选类型
+export type Optional<T> = T | undefined
+
+// 深度可选
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
+}
+
+// 深度必需
+export type DeepRequired<T> = {
+  [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : T[P]
+}
+
+// 深度只读
+export type DeepReadonly<T> = {
+  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P]
+}
+
+// 提取数组元素类型
+export type ArrayElement<T> = T extends readonly (infer E)[] ? E : never
+
+// 提取 Promise 值类型
+export type Awaited<T> = T extends Promise<infer U> ? U : T
+
+// 排除 null 和 undefined
+export type NonNullable<T> = T extends null | undefined ? never : T
+
+// 枚举值类型
+export type EnumValue<T extends Record<string, string | number>> = T[keyof T]

package/src/types/router.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 路由类型定义
+ */
+
+import 'vue-router'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    // 页面标题
+    title?: string
+    // 图标
+    icon?: string
+    // 是否隐藏菜单
+    hidden?: boolean
+    // 是否缓存页面
+    keepAlive?: boolean
+    // 是否固定在 tabs 中
+    affix?: boolean
+    // 权限标识
+    permissions?: string[]
+    // 角色标识
+    roles?: string[]
+    // 面包屑
+    breadcrumb?: boolean
+    // 当前激活菜单
+    activeMenu?: string
+  }
+}
+
+// 路由项
+export interface AppRoute {
+  path: string
+  name?: string
+  redirect?: string
+  component?: () => Promise<unknown>
+  meta?: RouteMeta
+  children?: AppRoute[]
+}
+
+// 动态路由
+export interface DynamicRoute {
+  path: string
+  name: string
+  component: string
+  redirect?: string
+  meta?: RouteMeta
+  children?: DynamicRoute[]
+}