@lvetechs/create-app 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvetechs/create-app",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "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/App.tsx

@@ -1,9 +1,15 @@
 import { useRoutes } from 'react-router-dom'
 import { routes } from './router'
+import { ToastProvider } from '@/components/Toast'
 
 function App() {
   const element = useRoutes(routes)
-  return <>{element}</>
+  return (
+    <>
+      {element}
+      <ToastProvider />
+    </>
+  )
 }
 
 export default App

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

@@ -0,0 +1,43 @@
+import { http } from '@/utils/request'
+import type { NotificationItem } from '@/stores/notification'
+
+/** 获取通知列表参数 */
+export interface GetNotificationsParams {
+  page?: number
+  pageSize?: number
+  type?: NotificationItem['type']
+  category?: string
+  unreadOnly?: boolean
+}
+
+/** 获取通知列表响应 */
+export interface GetNotificationsResult {
+  list: NotificationItem[]
+  total: number
+  unreadCount: number
+}
+
+/** 获取通知列表 */
+export function getNotificationsApi(params?: GetNotificationsParams) {
+  return http.get<GetNotificationsResult>('/notification/list', { params })
+}
+
+/** 标记通知为已读 */
+export function markNotificationReadApi(id: string) {
+  return http.post(`/notification/${id}/read`)
+}
+
+/** 批量标记为已读 */
+export function markAllReadApi() {
+  return http.post('/notification/read-all')
+}
+
+/** 删除通知 */
+export function deleteNotificationApi(id: string) {
+  return http.delete(`/notification/${id}`)
+}
+
+/** 获取未读数量 */
+export function getUnreadCountApi() {
+  return http.get<{ count: number }>('/notification/unread-count')
+}

package/templates/react/src/components/NotificationButton/index.tsx

@@ -0,0 +1,219 @@
+import { useState, useEffect, useRef } from 'react'
+import { useNotificationStore } from '@/stores/notification'
+import { getNotificationsApi, markNotificationReadApi, markAllReadApi } from '@/api/notification'
+import { toast } from '@/components/Toast'
+import type { NotificationItem } from '@/stores/notification'
+
+export default function NotificationButton() {
+  const [showDropdown, setShowDropdown] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const { notifications, addNotification, markAsRead, markAllAsRead, getUnreadCount } =
+    useNotificationStore()
+
+  const unreadCount = getUnreadCount()
+
+  // 点击外部关闭下拉菜单
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShowDropdown(false)
+      }
+    }
+
+    if (showDropdown) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [showDropdown])
+
+  // 获取最新消息
+  const fetchNotifications = async () => {
+    try {
+      const response = await getNotificationsApi({ unreadOnly: false, pageSize: 20 })
+      if (response.data) {
+        // 将新消息添加到 store（实际项目中可能需要去重逻辑）
+        response.data.list.forEach((item) => {
+          // 检查是否已存在
+          const exists = notifications.find((n) => n.id === item.id)
+          if (!exists) {
+            addNotification({
+              title: item.title,
+              content: item.content,
+              type: item.type,
+              category: item.category,
+              actionUrl: item.actionUrl
+            })
+          }
+        })
+        toast.success(`获取到 ${response.data.list.length} 条消息`)
+      }
+    } catch (error) {
+      console.error('获取消息失败:', error)
+      toast.error('获取消息失败')
+    }
+  }
+
+  // 标记为已读
+  const handleMarkAsRead = async (id: string) => {
+    try {
+      await markNotificationReadApi(id)
+      markAsRead(id)
+      toast.success('已标记为已读')
+    } catch (error) {
+      console.error('标记已读失败:', error)
+      toast.error('标记已读失败')
+    }
+  }
+
+  // 全部标记为已读
+  const handleMarkAllRead = async () => {
+    try {
+      await markAllReadApi()
+      markAllAsRead()
+      toast.success('已全部标记为已读')
+    } catch (error) {
+      console.error('全部标记已读失败:', error)
+      toast.error('全部标记已读失败')
+    }
+  }
+
+  // 格式化时间
+  const formatTime = (timestamp: number) => {
+    const now = Date.now()
+    const diff = now - timestamp
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(diff / 3600000)
+    const days = Math.floor(diff / 86400000)
+
+    if (minutes < 1) return '刚刚'
+    if (minutes < 60) return `${minutes}分钟前`
+    if (hours < 24) return `${hours}小时前`
+    if (days < 7) return `${days}天前`
+    return new Date(timestamp).toLocaleDateString()
+  }
+
+  const typeIcons = {
+    info: 'ℹ️',
+    success: '✓',
+    warning: '⚠️',
+    error: '✕'
+  }
+
+  const typeColors = {
+    info: 'text-blue-500',
+    success: 'text-green-500',
+    warning: 'text-yellow-500',
+    error: 'text-red-500'
+  }
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        className="relative flex items-center justify-center w-10 h-10 rounded-lg border border-slate-200 hover:border-indigo-500 hover:text-indigo-500 transition-colors"
+        onClick={() => {
+          setShowDropdown(!showDropdown)
+          // if (!showDropdown) {
+          //   fetchNotifications()
+          // }
+        }}
+        title="消息通知"
+      >
+        <span className="text-lg">🔔</span>
+        {unreadCount > 0 && (
+          <span className="absolute -top-1 -right-1 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-xs font-bold text-white bg-red-500 rounded-full">
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
+        )}
+      </button>
+
+      {showDropdown && (
+        <div className="absolute right-0 top-12 w-80 bg-white rounded-lg shadow-lg border border-slate-200 z-50 max-h-[500px] flex flex-col">
+          {/* 头部 */}
+          <div className="flex items-center justify-between p-4 border-b border-slate-200">
+            <h3 className="font-semibold text-slate-700">消息通知</h3>
+            <div className="flex gap-2">
+              {/* <button
+                className="text-xs text-indigo-600 hover:text-indigo-700"
+                onClick={fetchNotifications}
+              >
+                刷新
+              </button> */}
+              {unreadCount > 0 && (
+                <button
+                  className="text-xs text-indigo-600 hover:text-indigo-700"
+                  onClick={handleMarkAllRead}
+                >
+                  全部已读
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* 消息列表 */}
+          <div className="flex-1 overflow-y-auto">
+            {notifications.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-slate-400">
+                <span className="text-4xl mb-2"></span>
+                <p className="text-sm">暂无消息</p>
+              </div>
+            ) : (
+              <div className="divide-y divide-slate-100">
+                {notifications.map((item: NotificationItem) => (
+                  <div
+                    key={item.id}
+                    className={`p-3 hover:bg-slate-50 cursor-pointer transition-colors ${
+                      !item.read ? 'bg-blue-50' : ''
+                    }`}
+                    onClick={() => !item.read && handleMarkAsRead(item.id)}
+                  >
+                    <div className="flex items-start gap-2">
+                      <span className={`text-lg ${typeColors[item.type]}`}>
+                        {typeIcons[item.type]}
+                      </span>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center justify-between mb-1">
+                          <h4 className="font-medium text-sm text-slate-700 truncate">
+                            {item.title}
+                          </h4>
+                          {!item.read && (
+                            <span className="flex-shrink-0 w-2 h-2 bg-blue-500 rounded-full ml-2"></span>
+                          )}
+                        </div>
+                        <p className="text-xs text-slate-500 line-clamp-2 mb-1">
+                          {item.content}
+                        </p>
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs text-slate-400">{formatTime(item.timestamp)}</span>
+                          {item.category && (
+                            <span className="text-xs text-slate-400 bg-slate-100 px-2 py-0.5 rounded">
+                              {item.category}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* 底部 */}
+          {notifications.length > 0 && (
+            <div className="p-2 border-t border-slate-200 text-center">
+              <button
+                className="text-xs text-slate-500 hover:text-indigo-600"
+                onClick={() => {
+                  // 可以跳转到消息中心页面
+                  console.log('查看全部消息')
+                }}
+              >
+                查看全部消息
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/templates/react/src/components/Toast/index.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+export interface ToastItem {
+  id: string
+  message: string
+  type: ToastType
+  duration?: number
+}
+
+interface ToastProps {
+  toast: ToastItem
+  onClose: (id: string) => void
+}
+
+function ToastItem({ toast, onClose }: ToastProps) {
+  useEffect(() => {
+    if (toast.duration && toast.duration > 0) {
+      const timer = setTimeout(() => {
+        onClose(toast.id)
+      }, toast.duration)
+      return () => clearTimeout(timer)
+    }
+  }, [toast.id, toast.duration, onClose])
+
+  const icons = {
+    success: '✓',
+    error: '✕',
+    warning: '⚠',
+    info: 'ℹ'
+  }
+
+  const colors = {
+    success: 'bg-green-500',
+    error: 'bg-red-500',
+    warning: 'bg-yellow-500',
+    info: 'bg-blue-500'
+  }
+
+  return (
+    <div
+      className={`flex items-center gap-3 rounded-lg ${colors[toast.type]} px-4 py-3 text-white shadow-lg transition-all animate-in slide-in-from-top-5`}
+      onClick={() => onClose(toast.id)}
+    >
+      <span className="text-lg">{icons[toast.type]}</span>
+      <span className="flex-1 text-sm">{toast.message}</span>
+      <button
+        className="ml-2 text-white opacity-70 hover:opacity-100"
+        onClick={(e) => {
+          e.stopPropagation()
+          onClose(toast.id)
+        }}
+      >
+        ✕
+      </button>
+    </div>
+  )
+}
+
+interface ToastContainerProps {
+  toasts: ToastItem[]
+  onClose: (id: string) => void
+}
+
+function ToastContainer({ toasts, onClose }: ToastContainerProps) {
+  if (toasts.length === 0) return null
+
+  return createPortal(
+    <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-2">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onClose={onClose} />
+      ))}
+    </div>,
+    document.body
+  )
+}
+
+// Toast 管理器
+class ToastManager {
+  private toasts: ToastItem[] = []
+  private listeners: Array<(toasts: ToastItem[]) => void> = []
+
+  private notify() {
+    this.listeners.forEach((listener) => listener([...this.toasts]))
+  }
+
+  subscribe(listener: (toasts: ToastItem[]) => void) {
+    this.listeners.push(listener)
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener)
+    }
+  }
+
+  show(message: string, type: ToastType = 'info', duration = 3000) {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+    const toast: ToastItem = { id, message, type, duration }
+    this.toasts.push(toast)
+    this.notify()
+    return id
+  }
+
+  close(id: string) {
+    this.toasts = this.toasts.filter((t) => t.id !== id)
+    this.notify()
+  }
+
+  success(message: string, duration?: number) {
+    return this.show(message, 'success', duration)
+  }
+
+  error(message: string, duration?: number) {
+    return this.show(message, 'error', duration)
+  }
+
+  warning(message: string, duration?: number) {
+    return this.show(message, 'warning', duration)
+  }
+
+  info(message: string, duration?: number) {
+    return this.show(message, 'info', duration)
+  }
+
+  getToasts() {
+    return [...this.toasts]
+  }
+}
+
+export const toastManager = new ToastManager()
+
+// Toast 容器组件（需要在 App 中引入）
+export function ToastProvider() {
+  const [toasts, setToasts] = useState<ToastItem[]>([])
+
+  useEffect(() => {
+    const unsubscribe = toastManager.subscribe(setToasts)
+    return unsubscribe
+  }, [])
+
+  return <ToastContainer toasts={toasts} onClose={(id) => toastManager.close(id)} />
+}
+
+// 便捷方法
+export const toast = {
+  success: (message: string, duration?: number) => toastManager.success(message, duration),
+  error: (message: string, duration?: number) => toastManager.error(message, duration),
+  warning: (message: string, duration?: number) => toastManager.warning(message, duration),
+  info: (message: string, duration?: number) => toastManager.info(message, duration)
+}

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

@@ -0,0 +1,77 @@
+import { useState, useCallback, ChangeEvent } 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
+      }
+
+      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/DefaultLayout.tsx

@@ -7,6 +7,7 @@ import { Outlet } from 'react-router-dom'
 import { useAppStore } from '@/stores/app'
 import SidebarMenu from './components/SidebarMenu'
 import { menuRoutes } from './menuConfig'
+import NotificationButton from '@/components/NotificationButton'
 
 export default function DefaultLayout() {
   const { sidebarCollapsed, toggleSidebar, theme, setTheme } = useAppStore()
@@ -24,6 +25,7 @@ export default function DefaultLayout() {
           </button>
         </div>
         <div className="header-right">
+          <NotificationButton />
           <button
             className="theme-btn"
             onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}

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: 'ℹ️'
   }
 ]