@lvetechs/create-app 1.0.4 → 1.0.6

package/templates/vue/src/stores/app.ts

@@ -1,33 +1,164 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+
+export interface AppError {
+  id: string
+  message: string
+  code?: string
+  timestamp: number
+  type?: 'error' | 'warning' | 'info'
+}
 
 export const useAppStore = defineStore(
   'app',
   () => {
+    // 基础配置
     const sidebarCollapsed = ref(false)
     const theme = ref<'light' | 'dark'>('light')
     const language = ref('zh-CN')
 
+    // 加载状态
+    const loading = ref(false)
+    const loadingText = ref('加载中...')
+    const loadingStack = ref<string[]>([]) // 支持多个并发加载任务
+
+    // 错误处理
+    const errors = ref<AppError[]>([])
+    const maxErrorCount = 10 // 最多保留的错误数量
+
+    // 计算属性：是否有加载任务
+    const isLoading = computed(() => loadingStack.value.length > 0)
+
+    // 计算属性：未处理的错误数量
+    const unhandledErrorCount = computed(() => {
+      return errors.value.filter((e) => e.type === 'error').length
+    })
+
+    // 侧边栏控制
     function toggleSidebar() {
       sidebarCollapsed.value = !sidebarCollapsed.value
     }
 
+    function setSidebarCollapsed(collapsed: boolean) {
+      sidebarCollapsed.value = collapsed
+    }
+
+    // 主题控制
     function setTheme(val: 'light' | 'dark') {
       theme.value = val
       document.documentElement.setAttribute('data-theme', val)
     }
 
+    function toggleTheme() {
+      setTheme(theme.value === 'light' ? 'dark' : 'light')
+    }
+
+    // 语言控制
     function setLanguage(val: string) {
       language.value = val
     }
 
+    // 加载状态管理
+    function startLoading(taskId?: string, text?: string) {
+      const id = taskId || `loading-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+      loadingStack.value.push(id)
+      if (text) {
+        loadingText.value = text
+      }
+      loading.value = true
+      return id
+    }
+
+    function stopLoading(taskId?: string) {
+      if (taskId) {
+        const index = loadingStack.value.indexOf(taskId)
+        if (index > -1) {
+          loadingStack.value.splice(index, 1)
+        }
+      } else {
+        loadingStack.value.pop()
+      }
+
+      if (loadingStack.value.length === 0) {
+        loading.value = false
+        loadingText.value = '加载中...'
+      }
+    }
+
+    // 错误处理
+    function addError(
+      message: string,
+      code?: string,
+      type: AppError['type'] = 'error'
+    ) {
+      const error: AppError = {
+        id: `error-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        message,
+        code,
+        timestamp: Date.now(),
+        type
+      }
+      errors.value.unshift(error)
+
+      // 限制错误数量
+      if (errors.value.length > maxErrorCount) {
+        errors.value = errors.value.slice(0, maxErrorCount)
+      }
+
+      return error.id
+    }
+
+    function removeError(id: string) {
+      const index = errors.value.findIndex((e) => e.id === id)
+      if (index > -1) {
+        errors.value.splice(index, 1)
+      }
+    }
+
+    function clearErrors() {
+      errors.value = []
+    }
+
+    function clearErrorsByType(type: AppError['type']) {
+      errors.value = errors.value.filter((e) => e.type !== type)
+    }
+
+    // 获取指定类型的错误
+    function getErrorsByType(type: AppError['type']): AppError[] {
+      return errors.value.filter((e) => e.type === type)
+    }
+
+    // 全局提示（简化版，实际项目中可以使用更完善的 toast 组件）
+    function showMessage(message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') {
+      addError(message, undefined, type)
+    }
+
     return {
+      // 状态
       sidebarCollapsed,
       theme,
       language,
+      loading,
+      loadingText,
+      loadingStack,
+      errors,
+      // 计算属性
+      isLoading,
+      unhandledErrorCount,
+      // 方法
       toggleSidebar,
+      setSidebarCollapsed,
       setTheme,
-      setLanguage
+      toggleTheme,
+      setLanguage,
+      startLoading,
+      stopLoading,
+      addError,
+      removeError,
+      clearErrors,
+      clearErrorsByType,
+      getErrorsByType,
+      showMessage
     }
   },
   {

package/templates/vue/src/stores/notification.ts

@@ -0,0 +1,189 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export type NotificationType = 'info' | 'success' | 'warning' | 'error'
+
+export interface Notification {
+  id: string
+  title: string
+  content: string
+  type: NotificationType
+  read: boolean
+  timestamp: number
+  category?: string
+  actionUrl?: string
+}
+
+export const useNotificationStore = defineStore(
+  'notification',
+  () => {
+    // 通知列表
+    const notifications = ref<Notification[]>([])
+
+    // 计算属性：未读数量
+    const unreadCount = computed(() => {
+      return notifications.value.filter((n) => !n.read).length
+    })
+
+    // 计算属性：按类型分组的通知
+    const notificationsByType = computed(() => {
+      const grouped: Record<NotificationType, Notification[]> = {
+        info: [],
+        success: [],
+        warning: [],
+        error: []
+      }
+      notifications.value.forEach((notification) => {
+        grouped[notification.type].push(notification)
+      })
+      return grouped
+    })
+
+    // 计算属性：按分类分组的通知
+    const notificationsByCategory = computed(() => {
+      const grouped: Record<string, Notification[]> = {}
+      notifications.value.forEach((notification) => {
+        const category = notification.category || '其他'
+        if (!grouped[category]) {
+          grouped[category] = []
+        }
+        grouped[category].push(notification)
+      })
+      return grouped
+    })
+
+    // 添加通知
+    function addNotification(notification: Omit<Notification, 'id' | 'read' | 'timestamp'>) {
+      const newNotification: Notification = {
+        ...notification,
+        id: `notif-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        read: false,
+        timestamp: Date.now()
+      }
+      notifications.value.unshift(newNotification) // 新通知添加到顶部
+      return newNotification.id
+    }
+
+    // 标记为已读
+    function markAsRead(id: string) {
+      const notification = notifications.value.find((n) => n.id === id)
+      if (notification) {
+        notification.read = true
+      }
+    }
+
+    // 批量标记为已读
+    function markAllAsRead() {
+      notifications.value.forEach((notification) => {
+        notification.read = true
+      })
+    }
+
+    // 标记分类为已读
+    function markCategoryAsRead(category: string) {
+      notifications.value.forEach((notification) => {
+        if (notification.category === category) {
+          notification.read = true
+        }
+      })
+    }
+
+    // 删除通知
+    function removeNotification(id: string) {
+      const index = notifications.value.findIndex((n) => n.id === id)
+      if (index > -1) {
+        notifications.value.splice(index, 1)
+      }
+    }
+
+    // 批量删除已读通知
+    function removeReadNotifications() {
+      notifications.value = notifications.value.filter((n) => !n.read)
+    }
+
+    // 清空所有通知
+    function clearAll() {
+      notifications.value = []
+    }
+
+    // 获取未读通知
+    function getUnreadNotifications(): Notification[] {
+      return notifications.value.filter((n) => !n.read)
+    }
+
+    // 获取指定类型的通知
+    function getNotificationsByType(type: NotificationType): Notification[] {
+      return notifications.value.filter((n) => n.type === type)
+    }
+
+    // 获取指定分类的通知
+    function getNotificationsByCategory(category: string): Notification[] {
+      return notifications.value.filter((n) => n.category === category)
+    }
+
+    // 初始化示例数据
+    function initSampleData() {
+      if (notifications.value.length === 0) {
+        addNotification({
+          title: '系统通知',
+          content: '欢迎使用本系统！',
+          type: 'info',
+          category: '系统'
+        })
+      }
+    }
+
+    // 从 API 获取消息
+    async function fetchNotifications() {
+      try {
+        // 动态导入避免循环依赖
+        const { getNotificationsApi } = await import('@/api/notification')
+        const response = await getNotificationsApi({ unreadOnly: false, pageSize: 20 })
+        if (response.data) {
+          // 合并新消息（实际项目中需要去重逻辑）
+          const existingIds = new Set(notifications.value.map((n) => n.id))
+          response.data.list.forEach((item) => {
+            if (!existingIds.has(item.id)) {
+              addNotification({
+                title: item.title,
+                content: item.content,
+                type: item.type,
+                category: item.category,
+                actionUrl: item.actionUrl
+              })
+            }
+          })
+        }
+      } catch (error) {
+        console.error('获取消息失败:', error)
+        // 如果 API 失败，使用示例数据
+        initSampleData()
+      }
+    }
+
+    return {
+      notifications,
+      unreadCount,
+      notificationsByType,
+      notificationsByCategory,
+      addNotification,
+      markAsRead,
+      markAllAsRead,
+      markCategoryAsRead,
+      removeNotification,
+      removeReadNotifications,
+      clearAll,
+      getUnreadNotifications,
+      getNotificationsByType,
+      getNotificationsByCategory,
+      initSampleData,
+      fetchNotifications
+    }
+  },
+  {
+    persist: {
+      key: 'notification-store',
+      paths: ['notifications']
+    }
+  }
+)

package/templates/vue/src/stores/permission.ts

@@ -0,0 +1,184 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { useUserStore } from './user'
+
+export type Permission = string
+export type Role = string
+
+export interface PermissionConfig {
+  // 权限标识
+  permission: Permission
+  // 权限名称
+  name: string
+  // 权限描述
+  description?: string
+  // 所属模块
+  module?: string
+}
+
+export interface RoleConfig {
+  // 角色标识
+  role: Role
+  // 角色名称
+  name: string
+  // 角色描述
+  description?: string
+  // 角色拥有的权限列表
+  permissions: Permission[]
+}
+
+export const usePermissionStore = defineStore(
+  'permission',
+  () => {
+    // 所有权限配置
+    const allPermissions = ref<PermissionConfig[]>([
+      { permission: 'user:view', name: '查看用户', module: '用户管理' },
+      { permission: 'user:create', name: '创建用户', module: '用户管理' },
+      { permission: 'user:edit', name: '编辑用户', module: '用户管理' },
+      { permission: 'user:delete', name: '删除用户', module: '用户管理' },
+      { permission: 'role:view', name: '查看角色', module: '角色管理' },
+      { permission: 'role:create', name: '创建角色', module: '角色管理' },
+      { permission: 'role:edit', name: '编辑角色', module: '角色管理' },
+      { permission: 'role:delete', name: '删除角色', module: '角色管理' },
+      { permission: 'system:config', name: '系统配置', module: '系统管理' },
+      { permission: 'system:log', name: '查看日志', module: '系统管理' }
+    ])
+
+    // 所有角色配置
+    const allRoles = ref<RoleConfig[]>([
+      {
+        role: 'admin',
+        name: '超级管理员',
+        description: '拥有所有权限',
+        permissions: ['user:view', 'user:create', 'user:edit', 'user:delete', 'role:view', 'role:create', 'role:edit', 'role:delete', 'system:config', 'system:log']
+      },
+      {
+        role: 'editor',
+        name: '编辑',
+        description: '可以查看和编辑内容',
+        permissions: ['user:view', 'user:create', 'user:edit', 'role:view']
+      },
+      {
+        role: 'viewer',
+        name: '只读',
+        description: '只能查看内容',
+        permissions: ['user:view', 'role:view']
+      }
+    ])
+
+    // 当前用户拥有的权限（从 user store 获取）
+    const userPermissions = computed(() => {
+      const userStore = useUserStore()
+      if (!userStore.userInfo) return []
+
+      const userRoles = userStore.userInfo.roles || []
+      const permissions: Permission[] = []
+
+      // 根据用户角色获取所有权限
+      userRoles.forEach((role) => {
+        const roleConfig = allRoles.value.find((r) => r.role === role)
+        if (roleConfig) {
+          permissions.push(...roleConfig.permissions)
+        }
+      })
+
+      // 去重
+      return Array.from(new Set(permissions))
+    })
+
+    // 检查是否有指定权限
+    function hasPermission(permission: Permission): boolean {
+      return userPermissions.value.includes(permission)
+    }
+
+    // 检查是否有任意一个权限
+    function hasAnyPermission(permissions: Permission[]): boolean {
+      return permissions.some((p) => hasPermission(p))
+    }
+
+    // 检查是否有所有权限
+    function hasAllPermissions(permissions: Permission[]): boolean {
+      return permissions.every((p) => hasPermission(p))
+    }
+
+    // 检查是否有指定角色
+    function hasRole(role: Role): boolean {
+      const userStore = useUserStore()
+      if (!userStore.userInfo) return false
+      return userStore.userInfo.roles?.includes(role) || false
+    }
+
+    // 检查是否有任意一个角色
+    function hasAnyRole(roles: Role[]): boolean {
+      return roles.some((r) => hasRole(r))
+    }
+
+    // 获取角色配置
+    function getRoleConfig(role: Role): RoleConfig | undefined {
+      return allRoles.value.find((r) => r.role === role)
+    }
+
+    // 获取权限配置
+    function getPermissionConfig(permission: Permission): PermissionConfig | undefined {
+      return allPermissions.value.find((p) => p.permission === permission)
+    }
+
+    // 按模块分组权限
+    const permissionsByModule = computed(() => {
+      const grouped: Record<string, PermissionConfig[]> = {}
+      allPermissions.value.forEach((permission) => {
+        const module = permission.module || '其他'
+        if (!grouped[module]) {
+          grouped[module] = []
+        }
+        grouped[module].push(permission)
+      })
+      return grouped
+    })
+
+    // 添加权限配置
+    function addPermission(permission: PermissionConfig) {
+      if (!allPermissions.value.find((p) => p.permission === permission.permission)) {
+        allPermissions.value.push(permission)
+      }
+    }
+
+    // 添加角色配置
+    function addRole(role: RoleConfig) {
+      if (!allRoles.value.find((r) => r.role === role.role)) {
+        allRoles.value.push(role)
+      }
+    }
+
+    // 更新角色权限
+    function updateRolePermissions(role: Role, permissions: Permission[]) {
+      const roleConfig = allRoles.value.find((r) => r.role === role)
+      if (roleConfig) {
+        roleConfig.permissions = permissions
+      }
+    }
+
+    return {
+      allPermissions,
+      allRoles,
+      userPermissions,
+      permissionsByModule,
+      hasPermission,
+      hasAnyPermission,
+      hasAllPermissions,
+      hasRole,
+      hasAnyRole,
+      getRoleConfig,
+      getPermissionConfig,
+      addPermission,
+      addRole,
+      updateRolePermissions
+    }
+  },
+  {
+    persist: {
+      key: 'permission-store',
+      paths: ['allPermissions', 'allRoles']
+    }
+  }
+)

package/templates/vue/src/stores/user.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
+import { usePermissionStore } from './permission'
 
 export interface UserInfo {
   id: number
@@ -7,6 +8,10 @@ export interface UserInfo {
   nickname: string
   avatar: string
   roles: string[]
+  email?: string
+  phone?: string
+  department?: string
+  lastLoginTime?: number
 }
 
 export const useUserStore = defineStore(
@@ -14,35 +19,137 @@ export const useUserStore = defineStore(
   () => {
     const token = ref<string>('')
     const userInfo = ref<UserInfo | null>(null)
+    const loginHistory = ref<Array<{ time: number; ip: string; location?: string }>>([])
 
     const isLoggedIn = computed(() => !!token.value)
 
+    // 计算属性：用户显示名称
+    const displayName = computed(() => {
+      return userInfo.value?.nickname || userInfo.value?.username || '未登录'
+    })
+
+    // 计算属性：用户头像
+    const avatar = computed(() => {
+      return userInfo.value?.avatar || '/default-avatar.png'
+    })
+
+    // 计算属性：是否是管理员
+    const isAdmin = computed(() => {
+      return userInfo.value?.roles?.includes('admin') || false
+    })
+
     function setToken(val: string) {
       token.value = val
     }
 
     function setUserInfo(info: UserInfo) {
       userInfo.value = info
+      // 更新最后登录时间
+      if (userInfo.value) {
+        userInfo.value.lastLoginTime = Date.now()
+      }
+    }
+
+    // 更新用户信息（部分更新）
+    function updateUserInfo(updates: Partial<UserInfo>) {
+      if (userInfo.value) {
+        userInfo.value = { ...userInfo.value, ...updates }
+      }
+    }
+
+    // 添加登录历史记录
+    function addLoginHistory(ip: string, location?: string) {
+      loginHistory.value.unshift({
+        time: Date.now(),
+        ip,
+        location
+      })
+      // 只保留最近 10 条记录
+      if (loginHistory.value.length > 10) {
+        loginHistory.value = loginHistory.value.slice(0, 10)
+      }
+    }
+
+    // 检查用户是否有指定权限（通过 permission store）
+    function hasPermission(permission: string): boolean {
+      const permissionStore = usePermissionStore()
+      return permissionStore.hasPermission(permission)
+    }
+
+    // 检查用户是否有指定角色
+    function hasRole(role: string): boolean {
+      return userInfo.value?.roles?.includes(role) || false
+    }
+
+    // 添加角色
+    function addRole(role: string) {
+      if (userInfo.value && !userInfo.value.roles.includes(role)) {
+        userInfo.value.roles.push(role)
+      }
+    }
+
+    // 移除角色
+    function removeRole(role: string) {
+      if (userInfo.value) {
+        userInfo.value.roles = userInfo.value.roles.filter((r) => r !== role)
+      }
     }
 
     function logout() {
       token.value = ''
       userInfo.value = null
+      // 清空登录历史（可选，根据需求决定）
+      // loginHistory.value = []
+    }
+
+    // 模拟登录
+    async function login(username: string, _password: string) {
+      // 这里应该是实际的 API 调用
+      // 模拟异步登录
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      // 模拟登录成功
+      const mockUserInfo: UserInfo = {
+        id: 1,
+        username,
+        nickname: username === 'admin' ? '管理员' : '普通用户',
+        avatar: '/avatar.png',
+        roles: username === 'admin' ? ['admin'] : ['viewer'],
+        email: `${username}@example.com`,
+        lastLoginTime: Date.now()
+      }
+
+      setToken('mock-token-' + Date.now())
+      setUserInfo(mockUserInfo)
+      addLoginHistory('192.168.1.100', '本地')
+
+      return mockUserInfo
     }
 
     return {
       token,
       userInfo,
+      loginHistory,
       isLoggedIn,
+      displayName,
+      avatar,
+      isAdmin,
       setToken,
       setUserInfo,
-      logout
+      updateUserInfo,
+      addLoginHistory,
+      hasPermission,
+      hasRole,
+      addRole,
+      removeRole,
+      logout,
+      login
     }
   },
   {
     persist: {
       key: 'user-store',
-      paths: ['token']
+      paths: ['token', 'userInfo', 'loginHistory']
     }
   }
 )