xto-fronted 0.2.5 → 0.2.7

package/src/stores/user.ts

@@ -0,0 +1,73 @@
+/**
+ * 用户状态
+ */
+
+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
+  }
+})

package/src/style.css

@@ -0,0 +1,11 @@
+/**
+ * xto-fronted 样式入口
+ * 组件样式已包含在各自的 Vue 组件中（scoped）
+ */
+
+/* 全局样式变量（可选） */
+:root {
+  --bg-color: #ffffff;
+  --bg-color-page: #f5f7fa;
+  --color-border-lighter: #e4e7ed;
+}

package/src/types/api.d.ts

@@ -0,0 +1,84 @@
+/**
+ * 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 {
+  id: number | string
+  username: string
+  nickname: string
+  avatar?: string
+  email?: string
+  phone?: string
+  status: number
+  roles: string[]
+  permissions: string[]
+  createTime?: string
+  updateTime?: string
+}
+
+// 登录请求
+export interface LoginParams {
+  username: string
+  password: string
+  captcha?: string
+}
+
+// 登录响应
+export interface LoginResult {
+  token: string
+  refreshToken: string
+  expireTime: number
+  user: UserInfo
+}
+
+// 菜单项
+export interface MenuItem {
+  id: number | string
+  name: string
+  path: string
+  component?: string
+  redirect?: string
+  icon?: string
+  title: string
+  hidden?: boolean
+  keepAlive?: boolean
+  affix?: boolean
+  order?: number
+  parentId?: number | string | null
+  children?: MenuItem[]
+}
+
+// 角色信息
+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[]
+}

package/src/types/xto.d.ts

@@ -0,0 +1,149 @@
+declare module '@xto/core' {
+  export const version: string
+  export function install(app: any): void
+}
+
+declare module '@xto/core/es/index/index.mjs' {
+  export * from '@xto/core'
+}
+
+declare module '@xto/core/es/theme/index.mjs' {
+  export const theme: any
+}
+
+declare module '@xto/core/es/hooks/index.mjs' {
+  export const hooks: any
+}
+
+declare module '@xto/core/es/utils/index.mjs' {
+  export const utils: any
+}
+
+declare module '@xto/base' {
+  import { DefineComponent } from 'vue'
+  export const Button: DefineComponent<any, any, any>
+  export const Loading: DefineComponent<any, any, any>
+  export const Icon: DefineComponent<any, any, any>
+  export const Avatar: DefineComponent<any, any, any>
+  export const Badge: DefineComponent<any, any, any>
+  export const Tag: DefineComponent<any, any, any>
+  export const Divider: DefineComponent<any, any, any>
+  export const Space: DefineComponent<any, any, any>
+}
+
+declare module '@xto/base/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/form' {
+  import { DefineComponent } from 'vue'
+  export const Input: DefineComponent<any, any, any>
+  export const InputNumber: DefineComponent<any, any, any>
+  export const Select: DefineComponent<any, any, any>
+  export const Checkbox: DefineComponent<any, any, any>
+  export const Radio: DefineComponent<any, any, any>
+  export const Switch: DefineComponent<any, any, any>
+  export const DatePicker: DefineComponent<any, any, any>
+  export const Form: DefineComponent<any, any, any>
+  export const FormItem: DefineComponent<any, any, any>
+  export const Upload: DefineComponent<any, any, any>
+  export const FormRule: any
+}
+
+declare module '@xto/form/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/data' {
+  import { DefineComponent } from 'vue'
+  export const Table: DefineComponent<any, any, any>
+  export const Pagination: DefineComponent<any, any, any>
+  export const Tree: DefineComponent<any, any, any>
+  export const TreeNode: DefineComponent<any, any, any>
+  export const List: DefineComponent<any, any, any>
+  export const Card: DefineComponent<any, any, any>
+  export const Descriptions: DefineComponent<any, any, any>
+  export const Tag: DefineComponent<any, any, any>
+  export const Progress: DefineComponent<any, any, any>
+}
+
+declare module '@xto/data/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/feedback' {
+  import { DefineComponent } from 'vue'
+  export const Message: {
+    success: (msg: string) => void
+    error: (msg: string) => void
+    warning: (msg: string) => void
+    info: (msg: string) => void
+  }
+  export const Notification: {
+    success: (options: any) => void
+    error: (options: any) => void
+    warning: (options: any) => void
+    info: (options: any) => void
+  }
+  export const Modal: DefineComponent<any, any, any>
+  export const Drawer: DefineComponent<any, any, any>
+  export const Popconfirm: DefineComponent<any, any, any>
+  export const Tooltip: DefineComponent<any, any, any>
+  export const Popover: DefineComponent<any, any, any>
+}
+
+declare module '@xto/feedback/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/navigation' {
+  import { DefineComponent } from 'vue'
+  export const Menu: DefineComponent<any, any, any>
+  export const MenuItem: DefineComponent<any, any, any>
+  export const SubMenu: DefineComponent<any, any, any>
+  export const Tabs: DefineComponent<any, any, any>
+  export const TabPane: DefineComponent<any, any, any>
+  export const Breadcrumb: DefineComponent<any, any, any>
+  export const BreadcrumbItem: DefineComponent<any, any, any>
+  export const Dropdown: DefineComponent<any, any, any>
+  export const DropdownMenu: DefineComponent<any, any, any>
+  export const DropdownItem: DefineComponent<any, any, any>
+}
+
+declare module '@xto/navigation/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/layout' {
+  import { DefineComponent } from 'vue'
+  export const Layout: DefineComponent<any, any, any>
+  export const Header: DefineComponent<any, any, any>
+  export const Sider: DefineComponent<any, any, any>
+  export const Content: DefineComponent<any, any, any>
+  export const Footer: DefineComponent<any, any, any>
+  export const Container: DefineComponent<any, any, any>
+}
+
+declare module '@xto/layout/es/style.css' {
+  const content: string
+  export default content
+}
+
+declare module '@xto/business' {
+  import { DefineComponent } from 'vue'
+  export const LoginForm: DefineComponent<any, any, any>
+  export const RegisterForm: DefineComponent<any, any, any>
+  export const SearchResult: DefineComponent<any, any, any>
+  export const Comment: DefineComponent<any, any, any>
+  export const Statistic: DefineComponent<any, any, any>
+}
+
+declare module '@xto/business/es/style.css' {
+  const content: string
+  export default content
+}

package/src/utils/auth.ts

@@ -0,0 +1,62 @@
+/**
+ * Token 管理
+ */
+
+import { local } from './storage'
+
+const TOKEN_KEY = 'token'
+const REFRESH_TOKEN_KEY = 'refresh_token'
+const TOKEN_EXPIRE_KEY = 'token_expire'
+
+export interface TokenInfo {
+  token: string
+  refreshToken: string
+  expireTime: number
+}
+
+export const getToken = (): string | null => {
+  return local.get<string>(TOKEN_KEY)
+}
+
+export const setToken = (token: string): void => {
+  local.set(TOKEN_KEY, token)
+}
+
+export const getRefreshToken = (): string | null => {
+  return local.get<string>(REFRESH_TOKEN_KEY)
+}
+
+export const setRefreshToken = (refreshToken: string): void => {
+  local.set(REFRESH_TOKEN_KEY, refreshToken)
+}
+
+export const getTokenExpire = (): number | null => {
+  return local.get<number>(TOKEN_EXPIRE_KEY)
+}
+
+export const setTokenExpire = (expireTime: number): void => {
+  local.set(TOKEN_EXPIRE_KEY, expireTime)
+}
+
+export const setTokenInfo = (info: TokenInfo): void => {
+  setToken(info.token)
+  setRefreshToken(info.refreshToken)
+  setTokenExpire(info.expireTime)
+}
+
+export const clearToken = (): void => {
+  local.remove(TOKEN_KEY)
+  local.remove(REFRESH_TOKEN_KEY)
+  local.remove(TOKEN_EXPIRE_KEY)
+}
+
+export const isTokenExpired = (): boolean => {
+  const expireTime = getTokenExpire()
+  if (!expireTime) return true
+  return Date.now() > expireTime
+}
+
+export const hasToken = (): boolean => {
+  const token = getToken()
+  return !!token && !isTokenExpired()
+}

package/src/utils/permission.ts

@@ -0,0 +1,42 @@
+/**
+ * 权限工具函数
+ */
+
+import { useUserStore } from '@/stores/user'
+
+/**
+ * 检查是否有权限
+ * @param permission 权限标识
+ */
+export function hasPermission(permission: string | string[]): boolean {
+  const userStore = useUserStore()
+  const permissions = userStore.permissions
+
+  if (Array.isArray(permission)) {
+    return permission.some(p => permissions.includes(p))
+  }
+
+  return permissions.includes(permission)
+}
+
+/**
+ * 检查是否有角色
+ * @param role 角色标识
+ */
+export function hasRole(role: string | string[]): boolean {
+  const userStore = useUserStore()
+  const roles = userStore.roles
+
+  if (Array.isArray(role)) {
+    return role.some(r => roles.includes(r))
+  }
+
+  return roles.includes(role)
+}
+
+/**
+ * 检查是否是管理员
+ */
+export function isAdmin(): boolean {
+  return hasRole('admin')
+}

package/src/utils/request.ts

@@ -0,0 +1,124 @@
+/**
+ * Axios 请求封装
+ */
+
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import { getToken, clearToken } from './auth'
+import { Message } from '@xto/feedback'
+
+// 响应数据接口（Euler 框架 Result 格式）
+export interface ApiResponse<T = unknown> {
+  code: number
+  data: T
+  message: string
+}
+
+// 分页参数（Euler 框架格式）
+export interface PageParams {
+  pageNo: number
+  pageSize: number
+}
+
+// 分页响应（Euler 框架格式）
+export interface PageResponse<T> {
+  records: T[]
+  total: number
+}
+
+// 创建 axios 实例
+const createRequest = (): AxiosInstance => {
+  const instance = axios.create({
+    baseURL: import.meta.env.VITE_API_BASE_URL,
+    timeout: 30000,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+
+  // 请求拦截器
+  instance.interceptors.request.use(
+    (config: InternalAxiosRequestConfig) => {
+      const token = getToken()
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`
+      }
+      return config
+    },
+    (error) => {
+      return Promise.reject(error)
+    }
+  )
+
+  // 响应拦截器
+  instance.interceptors.response.use(
+    (response: AxiosResponse<ApiResponse>) => {
+      const { data } = response
+
+      // Euler 框架返回 Result 包装格式，成功时直接返回 data 中的实际数据
+      if (data.code === 200 || data.code === 0) {
+        return data.data as any
+      }
+
+      // 业务错误
+      Message.error(data.message || '请求失败')
+      return Promise.reject(new Error(data.message || '请求失败'))
+    },
+    (error) => {
+      const { response } = error
+
+      if (response) {
+        switch (response.status) {
+          case 401:
+            Message.error('登录已过期，请重新登录')
+            clearToken()
+            window.location.href = '/login'
+            break
+          case 403:
+            Message.error('没有权限访问')
+            break
+          case 404:
+            Message.error('请求资源不存在')
+            break
+          case 500:
+            Message.error('服务器错误')
+            break
+          default:
+            Message.error(response.data?.message || '请求失败')
+        }
+      } else {
+        Message.error('网络连接失败')
+      }
+
+      return Promise.reject(error)
+    }
+  )
+
+  return instance
+}
+
+const request = createRequest()
+
+// 请求方法 - 直接返回实际数据，无需手动解包
+export const http = {
+  get<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return request.get(url, config)
+  },
+
+  post<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    return request.post(url, data, config)
+  },
+
+  put<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    return request.put(url, data, config)
+  },
+
+  patch<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    return request.patch(url, data, config)
+  },
+
+  delete<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return request.delete(url, config)
+  }
+}
+
+export default request

package/src/utils/storage.ts

@@ -0,0 +1,63 @@
+/**
+ * 本地存储封装
+ */
+
+const prefix = 'xto_'
+
+interface StorageWrapper {
+  get<T>(key: string): T | null
+  set(key: string, value: unknown): void
+  remove(key: string): void
+  clear(): void
+}
+
+const createStorage = (storage: globalThis.Storage): StorageWrapper => {
+  return {
+    get<T>(key: string): T | null {
+      const value = storage.getItem(prefix + key)
+      if (!value) return null
+      try {
+        return JSON.parse(value) as T
+      } catch {
+        return value as unknown as T
+      }
+    },
+    set(key: string, value: unknown): void {
+      if (value === null || value === undefined) {
+        storage.removeItem(prefix + key)
+        return
+      }
+      const stringValue = typeof value === 'string' ? value : JSON.stringify(value)
+      storage.setItem(prefix + key, stringValue)
+    },
+    remove(key: string): void {
+      storage.removeItem(prefix + key)
+    },
+    clear(): void {
+      const keys = Object.keys(storage)
+      keys.forEach(key => {
+        if (key.startsWith(prefix)) {
+          storage.removeItem(key)
+        }
+      })
+    }
+  }
+}
+
+export const localStorageUtil = createStorage(window.localStorage)
+export const sessionStorageUtil = createStorage(window.sessionStorage)
+
+// 快捷方法
+export const local = {
+  get: localStorageUtil.get,
+  set: localStorageUtil.set,
+  remove: localStorageUtil.remove,
+  clear: localStorageUtil.clear
+}
+
+export const session = {
+  get: sessionStorageUtil.get,
+  set: sessionStorageUtil.set,
+  remove: sessionStorageUtil.remove,
+  clear: sessionStorageUtil.clear
+}