@lvetechs/create-app 1.0.5 → 1.0.6

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, ChangeEvent, FormEvent } from 'react'
+import { useState, useCallback, ChangeEvent } from 'react'
 
 export type FormErrors<T> = Partial<Record<keyof T, string>>
 
@@ -49,7 +49,7 @@ export function useForm<T extends Record<string, any>>({
         const nextErrors = validate(values)
         setErrors(nextErrors)
         const hasError = Object.values(nextErrors).some(Boolean)
-        if (hasError) return false;  
+        if (hasError) return
       }
 
       if (!onSubmit) return

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/stores/notification.ts

@@ -35,6 +35,9 @@ interface NotificationState {
 
   // 示例数据
   initSampleData: () => void
+
+  // API 相关
+  fetchNotifications: () => Promise<void>
 }
 
 export const useNotificationStore = create<NotificationState>()(
@@ -103,18 +106,33 @@ export const useNotificationStore = create<NotificationState>()(
           type: 'info',
           category: '系统'
         })
-        add({
-          title: '订单提醒',
-          content: '您有新的订单待处理',
-          type: 'warning',
-          category: '订单'
-        })
-        add({
-          title: '操作成功',
-          content: '数据保存成功',
-          type: 'success',
-          category: '操作'
-        })
+      },
+
+      fetchNotifications: async () => {
+        try {
+          // 动态导入避免循环依赖
+          const { getNotificationsApi } = await import('@/api/notification')
+          const response = await getNotificationsApi({ unreadOnly: false, pageSize: 20 })
+          if (response.data) {
+            // 合并新消息（实际项目中需要去重逻辑）
+            const existingIds = new Set(get().notifications.map((n) => n.id))
+            response.data.list.forEach((item) => {
+              if (!existingIds.has(item.id)) {
+                get().addNotification({
+                  title: item.title,
+                  content: item.content,
+                  type: item.type,
+                  category: item.category,
+                  actionUrl: item.actionUrl
+                })
+              }
+            })
+          }
+        } catch (error) {
+          console.error('获取消息失败:', error)
+          // 如果 API 失败，使用示例数据
+          get().initSampleData()
+        }
       }
     }),
     {

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

@@ -138,16 +138,6 @@ export const usePermissionStore = create<PermissionState>()(
       getPermissionConfig: (permission) =>
         get().allPermissions.find((p) => p.permission === permission),
 
-      getPermissionsByModule: () => {
-        const grouped: Record<string, PermissionConfig[]> = {}
-        get().allPermissions.forEach((permission) => {
-          const module = permission.module || '其他'
-          if (!grouped[module]) grouped[module] = []
-          grouped[module].push(permission)
-        })
-        return grouped
-      },
-
       addPermission: (permission) =>
         set((state) => {
           if (state.allPermissions.some((p) => p.permission === permission.permission)) {

package/templates/vue/src/App.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+  import Toast from '@/components/Toast/index.vue'
 </script>
 
 <template>
   <router-view />
+  <Toast />
 </template>
 
 <style scoped>

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

@@ -0,0 +1,43 @@
+import { http } from '@/utils/request'
+import type { Notification } from '@/stores/notification'
+
+/** 获取通知列表参数 */
+export interface GetNotificationsParams {
+  page?: number
+  pageSize?: number
+  type?: Notification['type']
+  category?: string
+  unreadOnly?: boolean
+}
+
+/** 获取通知列表响应 */
+export interface GetNotificationsResult {
+  list: Notification[]
+  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/vue/src/components/NotificationButton/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="relative" ref="dropdownRef">
+    <button
+      class="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"
+      @click="toggleDropdown"
+      title="消息通知"
+    >
+      <span class="text-lg">🔔</span>
+      <span
+        v-if="notificationStore.unreadCount > 0"
+        class="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"
+      >
+        {{ notificationStore.unreadCount > 99 ? '99+' : notificationStore.unreadCount }}
+      </span>
+    </button>
+
+    <Transition name="fade">
+      <div
+        v-if="showDropdown"
+        class="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 class="flex items-center justify-between p-4 border-b border-slate-200">
+          <h3 class="font-semibold text-slate-700">消息通知</h3>
+          <div class="flex gap-2">
+            <button
+              class="text-xs text-indigo-600 hover:text-indigo-700"
+              @click="fetchNotifications"
+            >
+              刷新
+            </button>
+            <!-- <button
+              v-if="notificationStore.unreadCount > 0"
+              class="text-xs text-indigo-600 hover:text-indigo-700"
+              @click="handleMarkAllRead"
+            >
+              全部已读
+            </button> -->
+          </div>
+        </div>
+
+        <!-- 消息列表 -->
+        <div class="flex-1 overflow-y-auto">
+          <div v-if="notificationStore.notifications.length === 0" class="flex flex-col items-center justify-center py-8 text-slate-400">
+            <span class="text-4xl mb-2"></span>
+            <p class="text-sm">暂无消息</p>
+          </div>
+          <div v-else class="divide-y divide-slate-100">
+            <div
+              v-for="item in notificationStore.notifications"
+              :key="item.id"
+              :class="[
+                'p-3 hover:bg-slate-50 cursor-pointer transition-colors',
+                !item.read ? 'bg-blue-50' : ''
+              ]"
+              @click="!item.read && handleMarkAsRead(item.id)"
+            >
+              <div class="flex items-start gap-2">
+                <span :class="['text-lg', typeColors[item.type]]">
+                  {{ typeIcons[item.type] }}
+                </span>
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center justify-between mb-1">
+                    <h4 class="font-medium text-sm text-slate-700 truncate">
+                      {{ item.title }}
+                    </h4>
+                    <span
+                      v-if="!item.read"
+                      class="flex-shrink-0 w-2 h-2 bg-blue-500 rounded-full ml-2"
+                    ></span>
+                  </div>
+                  <p class="text-xs text-slate-500 line-clamp-2 mb-1">
+                    {{ item.content }}
+                  </p>
+                  <div class="flex items-center justify-between">
+                    <span class="text-xs text-slate-400">{{ formatTime(item.timestamp) }}</span>
+                    <span
+                      v-if="item.category"
+                      class="text-xs text-slate-400 bg-slate-100 px-2 py-0.5 rounded"
+                    >
+                      {{ item.category }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 底部 -->
+        <!-- <div v-if="notificationStore.notifications.length > 0" class="p-2 border-t border-slate-200 text-center">
+          <button
+            class="text-xs text-slate-500 hover:text-indigo-600"
+            @click="() => console.log('查看全部消息')"
+          >
+            查看全部消息
+          </button>
+        </div> -->
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from 'vue'
+  import { useNotificationStore } from '@/stores/notification'
+  import { getNotificationsApi, markNotificationReadApi, markAllReadApi } from '@/api/notification'
+  import type { Notification } from '@/stores/notification'
+
+  const notificationStore = useNotificationStore()
+  const showDropdown = ref(false)
+  const dropdownRef = ref<HTMLElement>()
+
+  const typeIcons = {
+    info: 'ℹ️',
+    success: '✓',
+    warning: '⚠️',
+    error: '✕'
+  }
+
+  const typeColors = {
+    info: 'text-blue-500',
+    success: 'text-green-500',
+    warning: 'text-yellow-500',
+    error: 'text-red-500'
+  }
+
+  function toggleDropdown() {
+    showDropdown.value = !showDropdown.value
+    // if (showDropdown.value) {
+    //   fetchNotifications()
+    // }
+  }
+
+  // 获取最新消息
+  async function fetchNotifications() {
+    try {
+      const response = await getNotificationsApi({ unreadOnly: false, pageSize: 20 })
+      if (response.data) {
+        // 将新消息添加到 store（实际项目中可能需要去重逻辑）
+        const existingIds = new Set(notificationStore.notifications.map((n) => n.id))
+        response.data.list.forEach((item) => {
+          if (!existingIds.has(item.id)) {
+            notificationStore.addNotification({
+              title: item.title,
+              content: item.content,
+              type: item.type,
+              category: item.category,
+              actionUrl: item.actionUrl
+            })
+          }
+        })
+        if ((window as any).$toast) {
+          ;(window as any).$toast.success(`获取到 ${response.data.list.length} 条消息`)
+        }
+      }
+    } catch (error) {
+      console.error('获取消息失败:', error)
+      if ((window as any).$toast) {
+        ;(window as any).$toast.error('获取消息失败')
+      }
+      // 如果 API 失败，使用示例数据
+      notificationStore.initSampleData()
+    }
+  }
+
+  // 标记为已读
+  async function handleMarkAsRead(id: string) {
+    try {
+      await markNotificationReadApi(id)
+      notificationStore.markAsRead(id)
+      if ((window as any).$toast) {
+        ;(window as any).$toast.success('已标记为已读')
+      }
+    } catch (error) {
+      console.error('标记已读失败:', error)
+      if ((window as any).$toast) {
+        ;(window as any).$toast.error('标记已读失败')
+      }
+    }
+  }
+
+  // 全部标记为已读
+  async function handleMarkAllRead() {
+    try {
+      await markAllReadApi()
+      notificationStore.markAllAsRead()
+      if ((window as any).$toast) {
+        ;(window as any).$toast.success('已全部标记为已读')
+      }
+    } catch (error) {
+      console.error('全部标记已读失败:', error)
+      if ((window as any).$toast) {
+        ;(window as any).$toast.error('全部标记已读失败')
+      }
+    }
+  }
+
+  // 格式化时间
+  function 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()
+  }
+
+  // 点击外部关闭下拉菜单
+  function handleClickOutside(event: MouseEvent) {
+    if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+      showDropdown.value = false
+    }
+  }
+
+  onMounted(() => {
+    document.addEventListener('mousedown', handleClickOutside)
+    // 初始化时获取一次消息
+    // fetchNotifications()
+  })
+
+  onUnmounted(() => {
+    document.removeEventListener('mousedown', handleClickOutside)
+  })
+</script>
+
+<style scoped lang="scss">
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.2s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+</style>

package/templates/vue/src/components/Toast/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <Teleport to="body">
+    <TransitionGroup
+      name="toast"
+      tag="div"
+      class="fixed top-4 right-4 z-[9999] flex flex-col gap-2"
+    >
+      <div
+        v-for="toast in toasts"
+        :key="toast.id"
+        :class="[
+          'flex items-center gap-3 rounded-lg px-4 py-3 text-white shadow-lg transition-all cursor-pointer',
+          toastColors[toast.type]
+        ]"
+        @click="closeToast(toast.id)"
+      >
+        <span class="text-lg">{{ toastIcons[toast.type] }}</span>
+        <span class="flex-1 text-sm">{{ toast.message }}</span>
+        <button
+          class="ml-2 text-white opacity-70 hover:opacity-100"
+          @click.stop="closeToast(toast.id)"
+        >
+          ✕
+        </button>
+      </div>
+    </TransitionGroup>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from 'vue'
+
+  export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+  export interface ToastItem {
+    id: string
+    message: string
+    type: ToastType
+    duration?: number
+  }
+
+  const toasts = ref<ToastItem[]>([])
+
+  const toastIcons = {
+    success: '✓',
+    error: '✕',
+    warning: '⚠',
+    info: 'ℹ'
+  }
+
+  const toastColors = {
+    success: 'bg-green-500',
+    error: 'bg-red-500',
+    warning: 'bg-yellow-500',
+    info: 'bg-blue-500'
+  }
+
+  const timers = new Map<string, NodeJS.Timeout>()
+
+  function closeToast(id: string) {
+    const index = toasts.value.findIndex((t) => t.id === id)
+    if (index > -1) {
+      toasts.value.splice(index, 1)
+      const timer = timers.get(id)
+      if (timer) {
+        clearTimeout(timer)
+        timers.delete(id)
+      }
+    }
+  }
+
+  function showToast(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 }
+    toasts.value.push(toast)
+
+    if (duration && duration > 0) {
+      const timer = setTimeout(() => {
+        closeToast(id)
+      }, duration)
+      timers.set(id, timer)
+    }
+
+    return id
+  }
+
+  // 暴露方法给全局使用
+  const toast = {
+    success: (message: string, duration?: number) => showToast(message, 'success', duration),
+    error: (message: string, duration?: number) => showToast(message, 'error', duration),
+    warning: (message: string, duration?: number) => showToast(message, 'warning', duration),
+    info: (message: string, duration?: number) => showToast(message, 'info', duration)
+  }
+
+  // 挂载到全局
+  onMounted(() => {
+    ;(window as any).$toast = toast
+  })
+
+  onUnmounted(() => {
+    timers.forEach((timer) => clearTimeout(timer))
+    timers.clear()
+  })
+
+  defineExpose({ toast })
+</script>
+
+<style scoped lang="scss">
+  .toast-enter-active {
+    transition: all 0.3s ease-out;
+  }
+
+  .toast-leave-active {
+    transition: all 0.2s ease-in;
+  }
+
+  .toast-enter-from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  .toast-leave-to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+</style>

package/templates/vue/src/components.d.ts

@@ -7,8 +7,10 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    NotificationButton: typeof import('./components/NotificationButton/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./components/SvgIcon.vue')['default']
+    Toast: typeof import('./components/Toast/index.vue')['default']
   }
 }

package/templates/vue/src/layouts/DefaultLayout.vue

@@ -2,6 +2,7 @@
   import { useAppStore } from '@/stores/app'
   import SidebarMenu from './components/SidebarMenu.vue'
   import { menuRoutes } from './menuConfig'
+  import NotificationButton from '@/components/NotificationButton/index.vue'
   const title = computed(() => import.meta.env.VITE_APP_TITLE)
   const appStore = useAppStore()
 </script>
@@ -19,6 +20,7 @@
         </button>
       </div>
       <div class="header-right">
+        <NotificationButton />
         <button
           class="theme-btn"
           @click="appStore.setTheme(appStore.theme === 'light' ? 'dark' : 'light')"

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

@@ -130,18 +130,34 @@ export const useNotificationStore = defineStore(
           type: 'info',
           category: '系统'
         })
-        addNotification({
-          title: '订单提醒',
-          content: '您有新的订单待处理',
-          type: 'warning',
-          category: '订单'
-        })
-        addNotification({
-          title: '操作成功',
-          content: '数据保存成功',
-          type: 'success',
-          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()
       }
     }
 
@@ -160,7 +176,8 @@ export const useNotificationStore = defineStore(
       getUnreadNotifications,
       getNotificationsByType,
       getNotificationsByCategory,
-      initSampleData
+      initSampleData,
+      fetchNotifications
     }
   },
   {