@lvetechs/create-app 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvetechs/create-app",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "快速创建 Vue 3 / React 18 项目的脚手架工具",
   "type": "module",
   "bin": {

package/templates/react/.env

@@ -1,3 +1,3 @@
-# 基础环境变量
-VITE_APP_TITLE=My React App
-VITE_APP_BASE_API=/api
+# 基础环境变量
+VITE_APP_TITLE=My React App
+VITE_APP_BASE_API=/api

package/templates/react/.env.development

@@ -1,3 +1,3 @@
-# 开发环境
-VITE_APP_TITLE=My React App (Dev)
-VITE_APP_BASE_API=/api
+# 开发环境
+VITE_APP_TITLE=My React App (Dev)
+VITE_APP_BASE_API=/api

package/templates/react/.env.production

@@ -1,3 +1,3 @@
-# 生产环境
-VITE_APP_TITLE=My React App
-VITE_APP_BASE_API=https://api.example.com
+# 生产环境
+VITE_APP_TITLE=My React App
+VITE_APP_BASE_API=https://api.example.com

package/templates/react/package.json

@@ -20,7 +20,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@lvetechs/ui-lib": "^1.1.6",
+    "@lvetechs/ui-lib": "^1.1.7",
     "@types/node": "^25.2.3",
     "@types/nprogress": "^0.2.3",
     "@types/react": "^18.3.1",

package/templates/react/pnpm-lock.yaml

@@ -34,8 +34,8 @@ importers:
         version: 4.5.7(@types/react@18.3.28)(react@18.3.1)
     devDependencies:
       '@lvetechs/ui-lib':
-        specifier: ^1.1.6
-        version: 1.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.5.28(typescript@5.9.3))
+        specifier: ^1.1.7
+        version: 1.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.5.28(typescript@5.9.3))
       '@types/node':
         specifier: ^25.2.3
         version: 25.2.3
@@ -371,8 +371,8 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@lvetechs/ui-lib@1.1.6':
-    resolution: {integrity: sha512-bFRfKcmhVN3UuA3skrEiwZs+u6ij0PhvT/QfPU1edfSjP55TjXaH6USysHLoRZnMibvAcrWCveTzmEppLCh6ew==}
+  '@lvetechs/ui-lib@1.1.7':
+    resolution: {integrity: sha512-BH3QmLcLxK9A7C5mAs/pLovO9ZJ2MBlxjJhdMCElxMn935OQ0TXhrVmHI39asST5xAmTNeSyDMXLVuS3eNuu6w==}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
@@ -2005,7 +2005,7 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@lvetechs/ui-lib@1.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.5.28(typescript@5.9.3))':
+  '@lvetechs/ui-lib@1.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       lucide-react: 0.563.0(react@18.3.1)
       react: 18.3.1

package/templates/react/src/hooks/useForm.ts

@@ -0,0 +1,77 @@
+import { useState, useCallback, ChangeEvent, FormEvent } from 'react'
+
+export type FormErrors<T> = Partial<Record<keyof T, string>>
+
+export interface UseFormOptions<T> {
+  /** 初始表单值 */
+  initialValues: T
+  /** 校验函数（可选） */
+  validate?: (values: T) => FormErrors<T>
+  /** 提交成功回调（可选） */
+  onSubmit?: (values: T) => void | Promise<void>
+}
+
+/**
+ * 通用表单 Hook 示例
+ *
+ * - 管理表单值 values
+ * - 简单错误提示 errors
+ * - 提供 handleChange / handleSubmit / reset
+ */
+export function useForm<T extends Record<string, any>>({
+  initialValues,
+  validate,
+  onSubmit
+}: UseFormOptions<T>) {
+  const [values, setValues] = useState<T>(initialValues)
+  const [errors, setErrors] = useState<FormErrors<T>>({})
+  const [submitting, setSubmitting] = useState(false)
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const { name, value } = e.target
+      setValues((prev) => ({
+        ...prev,
+        [name]: value
+      }))
+    },
+    []
+  )
+
+  const reset = useCallback(() => {
+    setValues(initialValues)
+    setErrors({})
+  }, [initialValues])
+
+  const handleSubmit = useCallback(
+    async () => {
+      if (validate) {
+        const nextErrors = validate(values)
+        setErrors(nextErrors)
+        const hasError = Object.values(nextErrors).some(Boolean)
+        if (hasError) return false;  
+      }
+
+      if (!onSubmit) return
+      try {
+        setSubmitting(true)
+        await onSubmit(values)
+      } finally {
+        setSubmitting(false)
+      }
+    },
+    [onSubmit, validate, values]
+  )
+
+  return {
+    values,
+    errors,
+    submitting,
+    handleChange,
+    handleSubmit,
+    reset,
+    setValues,
+    setErrors
+  }
+}
+

package/templates/react/src/layouts/menuConfig.ts

@@ -24,49 +24,19 @@ export const menuRoutes: MenuItem[] = [
   {
     path: '/home',
     title: '首页',
-    icon: '🏠'
+    icon: ''
   },
   {
     path: '/system',
     title: '系统管理',
-    icon: '⚙️',
+    icon: '',
     children: [
       {
         path: '/system/user',
         title: '用户管理',
-        icon: '👤'
+        icon: ''
       },
-      {
-        path: '/system/role',
-        title: '角色管理',
-        icon: '🔑'
-      },
-      {
-        path: '/system/menu',
-        title: '菜单管理',
-        icon: '📋'
-      },
-      {
-        path: '/system/log',
-        title: '日志管理',
-        icon: '📝',
-        children: [
-          {
-            path: '/system/log/operation',
-            title: '操作日志'
-          },
-          {
-            path: '/system/log/login',
-            title: '登录日志'
-          }
-        ]
-      }
     ]
-  },
-  {
-    path: '/about',
-    title: '关于',
-    icon: 'ℹ️'
   }
 ]
 

package/templates/react/src/router/index.tsx

@@ -7,22 +7,10 @@ const DefaultLayout = lazy(() => import('@/layouts/DefaultLayout'))
 
 // ==================== Layout 内页面 ====================
 const Home = lazy(() => import('@/views/home'))
-const About = lazy(() => import('@/views/about'))
 
 // 系统管理 (多级路由)
 const SystemUser = lazy(() => import('@/views/system/user'))
 const SystemUserDetail = lazy(() => import('@/views/system/user/detail'))
-const SystemRole = lazy(() => import('@/views/system/role'))
-const SystemMenu = lazy(() => import('@/views/system/menu'))
-const OperationLog = lazy(() => import('@/views/system/log/operation'))
-const LoginLog = lazy(() => import('@/views/system/log/login'))
-
-// ==================== 独立页面 (无 Layout) ====================
-const Login = lazy(() => import('@/views/login'))
-const Register = lazy(() => import('@/views/register'))
-const ResultSuccess = lazy(() => import('@/views/result/success'))
-const ResultFail = lazy(() => import('@/views/result/fail'))
-const DataScreen = lazy(() => import('@/views/screen'))
 
 // ==================== 错误页 ====================
 const Forbidden = lazy(() => import('@/views/error/403'))
@@ -63,39 +51,12 @@ export const routes: RouteObject[] = [
         children: [
           { index: true, element: <Navigate to="/system/user" replace /> },
           { path: 'user', element: lazyLoad(SystemUser) },
-          { path: 'role', element: lazyLoad(SystemRole) },
-          { path: 'menu', element: lazyLoad(SystemMenu) },
-          // 三级路由: 系统管理 > 日志管理
-          {
-            path: 'log',
-            children: [
-              { index: true, element: <Navigate to="/system/log/operation" replace /> },
-              { path: 'operation', element: lazyLoad(OperationLog) },
-              { path: 'login', element: lazyLoad(LoginLog) }
-            ]
-          }
         ]
       },
-      // 关于
-      { path: 'about', element: lazyLoad(About) },
       // 详情页 (Layout 内但菜单隐藏)
       { path: 'user/detail/:id', element: lazyLoad(SystemUserDetail) }
     ]
   },
-
-  // ==================== 独立页面 (无 Layout) ====================
-  { path: '/login', element: lazyLoad(Login) },
-  { path: '/register', element: lazyLoad(Register) },
-  {
-    path: '/result',
-    children: [
-      { index: true, element: <Navigate to="/result/success" replace /> },
-      { path: 'success', element: lazyLoad(ResultSuccess) },
-      { path: 'fail', element: lazyLoad(ResultFail) }
-    ]
-  },
-  { path: '/screen', element: lazyLoad(DataScreen) },
-
   // ==================== 错误页 ====================
   { path: '/403', element: lazyLoad(Forbidden) },
   { path: '*', element: lazyLoad(NotFound) }

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

@@ -1,30 +1,168 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
+export interface AppError {
+  id: string
+  message: string
+  code?: string
+  timestamp: number
+  type?: 'error' | 'warning' | 'info' | 'success'
+}
+
 interface AppState {
+  /** 侧边栏是否收起 */
   sidebarCollapsed: boolean
+  /** 主题 */
   theme: 'light' | 'dark'
+  /** 语言 */
   language: string
+
+  /** 全局加载状态（是否存在任何加载任务） */
+  loading: boolean
+  /** 加载文案 */
+  loadingText: string
+  /** 加载任务栈，支持多个并发任务 */
+  loadingStack: string[]
+
+  /** 全局错误 / 提示列表 */
+  errors: AppError[]
+
+  // ========== 计算相关（通过方法计算，而不是状态字段） ==========
+  /** 是否有加载任务 */
+  getIsLoading: () => boolean
+  /** 未处理错误数量（error 类型） */
+  getUnhandledErrorCount: () => number
+
+  // ========== 基础设置 ==========
   toggleSidebar: () => void
+  setSidebarCollapsed: (collapsed: boolean) => void
   setTheme: (val: 'light' | 'dark') => void
+  toggleTheme: () => void
   setLanguage: (val: string) => void
+
+  // ========== 加载状态管理 ==========
+  startLoading: (taskId?: string, text?: string) => string
+  stopLoading: (taskId?: string) => void
+
+  // ========== 错误管理 ==========
+  addError: (message: string, code?: string, type?: AppError['type']) => string
+  removeError: (id: string) => void
+  clearErrors: () => void
+  clearErrorsByType: (type: AppError['type']) => void
+  getErrorsByType: (type: AppError['type']) => AppError[]
+
+  /** 简单的全局消息（内部用 addError 存一份，可配合全局提示组件展示） */
+  showMessage: (message: string, type?: 'success' | 'error' | 'warning' | 'info') => void
 }
 
 export const useAppStore = create<AppState>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       sidebarCollapsed: false,
       theme: 'light',
       language: 'zh-CN',
 
+      loading: false,
+      loadingText: '加载中...',
+      loadingStack: [],
+
+      errors: [],
+
+      // 计算相关
+      getIsLoading: () => get().loadingStack.length > 0,
+      getUnhandledErrorCount: () =>
+        get().errors.filter((e) => !e.type || e.type === 'error').length,
+
+      // 基础设置
       toggleSidebar: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
 
+      setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
+
       setTheme: (val) => {
-        document.documentElement.setAttribute('data-theme', val)
+        if (typeof document !== 'undefined') {
+          document.documentElement.setAttribute('data-theme', val)
+        }
         set({ theme: val })
       },
 
-      setLanguage: (val) => set({ language: val })
+      toggleTheme: () =>
+        set((state) => {
+          const next = state.theme === 'light' ? 'dark' : 'light'
+          if (typeof document !== 'undefined') {
+            document.documentElement.setAttribute('data-theme', next)
+          }
+          return { theme: next }
+        }),
+
+      setLanguage: (val) => set({ language: val }),
+
+      // 加载状态管理
+      startLoading: (taskId, text) => {
+        const id =
+          taskId || `loading-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+        set((state) => ({
+          loading: true,
+          loadingText: text || state.loadingText,
+          loadingStack: [...state.loadingStack, id]
+        }))
+        return id
+      },
+
+      stopLoading: (taskId) =>
+        set((state) => {
+          const stack = [...state.loadingStack]
+          if (taskId) {
+            const index = stack.indexOf(taskId)
+            if (index > -1) stack.splice(index, 1)
+          } else {
+            stack.pop()
+          }
+          return {
+            loading: stack.length > 0,
+            loadingText: stack.length > 0 ? state.loadingText : '加载中...',
+            loadingStack: stack
+          }
+        }),
+
+      // 错误管理
+      addError: (message, code, type = 'error') => {
+        const error: AppError = {
+          id: `error-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+          message,
+          code,
+          timestamp: Date.now(),
+          type
+        }
+
+        set((state) => {
+          const next = [error, ...state.errors]
+          // 最多保留 10 条
+          if (next.length > 10) {
+            next.length = 10
+          }
+          return { errors: next }
+        })
+
+        return error.id
+      },
+
+      removeError: (id) =>
+        set((state) => ({
+          errors: state.errors.filter((e) => e.id !== id)
+        })),
+
+      clearErrors: () => set({ errors: [] }),
+
+      clearErrorsByType: (type) =>
+        set((state) => ({
+          errors: state.errors.filter((e) => e.type !== type)
+        })),
+
+      getErrorsByType: (type) => get().errors.filter((e) => e.type === type),
+
+      showMessage: (message, type = 'info') => {
+        get().addError(message, undefined, type)
+      }
     }),
     {
       name: 'app-store',

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

@@ -0,0 +1,128 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+export type NotificationType = 'info' | 'success' | 'warning' | 'error'
+
+export interface NotificationItem {
+  id: string
+  title: string
+  content: string
+  type: NotificationType
+  read: boolean
+  timestamp: number
+  category?: string
+  actionUrl?: string
+}
+
+interface NotificationState {
+  notifications: NotificationItem[]
+
+  // 计算相关（通过方法计算）
+  getUnreadCount: () => number
+  getNotificationsByType: (type: NotificationType) => NotificationItem[]
+  getNotificationsByCategory: (category: string) => NotificationItem[]
+
+  // 基本操作
+  addNotification: (
+    notification: Omit<NotificationItem, 'id' | 'read' | 'timestamp'>
+  ) => string
+  markAsRead: (id: string) => void
+  markAllAsRead: () => void
+  markCategoryAsRead: (category: string) => void
+  removeNotification: (id: string) => void
+  removeReadNotifications: () => void
+  clearAll: () => void
+
+  // 示例数据
+  initSampleData: () => void
+}
+
+export const useNotificationStore = create<NotificationState>()(
+  persist(
+    (set, get) => ({
+      notifications: [],
+
+      getUnreadCount: () => get().notifications.filter((n) => !n.read).length,
+
+      getNotificationsByType: (type) =>
+        get().notifications.filter((n) => n.type === type),
+
+      getNotificationsByCategory: (category) =>
+        get().notifications.filter((n) => n.category === category),
+
+      addNotification: (notification) => {
+        const newNotification: NotificationItem = {
+          ...notification,
+          id: `notif-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+          read: false,
+          timestamp: Date.now()
+        }
+        set((state) => ({
+          notifications: [newNotification, ...state.notifications]
+        }))
+        return newNotification.id
+      },
+
+      markAsRead: (id) =>
+        set((state) => ({
+          notifications: state.notifications.map((n) =>
+            n.id === id ? { ...n, read: true } : n
+          )
+        })),
+
+      markAllAsRead: () =>
+        set((state) => ({
+          notifications: state.notifications.map((n) => ({ ...n, read: true }))
+        })),
+
+      markCategoryAsRead: (category) =>
+        set((state) => ({
+          notifications: state.notifications.map((n) =>
+            n.category === category ? { ...n, read: true } : n
+          )
+        })),
+
+      removeNotification: (id) =>
+        set((state) => ({
+          notifications: state.notifications.filter((n) => n.id !== id)
+        })),
+
+      removeReadNotifications: () =>
+        set((state) => ({
+          notifications: state.notifications.filter((n) => !n.read)
+        })),
+
+      clearAll: () => set({ notifications: [] }),
+
+      initSampleData: () => {
+        if (get().notifications.length > 0) return
+        const add = get().addNotification
+        add({
+          title: '系统通知',
+          content: '欢迎使用本系统！',
+          type: 'info',
+          category: '系统'
+        })
+        add({
+          title: '订单提醒',
+          content: '您有新的订单待处理',
+          type: 'warning',
+          category: '订单'
+        })
+        add({
+          title: '操作成功',
+          content: '数据保存成功',
+          type: 'success',
+          category: '操作'
+        })
+      }
+    }),
+    {
+      name: 'notification-store',
+      partialize: (state) => ({
+        notifications: state.notifications
+      })
+    }
+  )
+)
+