@lvetechs/create-app 1.0.4 → 1.0.6

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/auto-imports.d.ts

@@ -144,6 +144,7 @@ declare global {
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
+  const useCartStore: typeof import('./stores/cart')['useCartStore']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
   const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
@@ -213,6 +214,7 @@ declare global {
   const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
   const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
   const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNotificationStore: typeof import('./stores/notification')['useNotificationStore']
   const useNow: typeof import('@vueuse/core')['useNow']
   const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
   const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
@@ -223,6 +225,7 @@ declare global {
   const useParentElement: typeof import('@vueuse/core')['useParentElement']
   const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
   const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePermissionStore: typeof import('./stores/permission')['usePermissionStore']
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
@@ -523,6 +526,7 @@ declare module 'vue' {
     readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
     readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
     readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
+    readonly useNotificationStore: UnwrapRef<typeof import('./stores/notification')['useNotificationStore']>
     readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
     readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
     readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
@@ -533,6 +537,7 @@ declare module 'vue' {
     readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
     readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePermissionStore: UnwrapRef<typeof import('./stores/permission')['usePermissionStore']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
     readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>

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/layouts/menuConfig.ts

@@ -25,49 +25,19 @@ export const menuRoutes: MenuItem[] = [
   {
     path: '/home',
     title: '首页',
-    icon: '🏠'
+    icon: ''
   },
   {
     path: '/system',
     title: '系统管理',
-    icon: '⚙️',
+    icon: '',
     children: [
       {
         path: '/system/user',
         title: '用户管理',
-        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: '登录日志'
-          }
-        ]
+        icon: ''
       }
     ]
-  },
-  {
-    path: '/about',
-    title: '关于',
-    icon: 'ℹ️'
   }
 ]
 

package/templates/vue/src/router/index.ts

@@ -32,7 +32,7 @@ const layoutRoutes: RouteRecordRaw = {
       path: 'home',
       name: 'Home',
       component: () => import('@/views/home/index.vue'),
-      meta: { title: '首页', icon: '🏠', requireAuth: true }
+      meta: { title: '首页', icon: '', requireAuth: true }
     },
 
     // ---------- 系统管理 (多级路由示例) ----------
@@ -40,58 +40,17 @@ const layoutRoutes: RouteRecordRaw = {
       path: 'system',
       name: 'System',
       redirect: '/system/user',
-      meta: { title: '系统管理', icon: '⚙️' },
+      meta: { title: '系统管理', icon: '' },
       children: [
         {
           path: 'user',
           name: 'SystemUser',
           component: () => import('@/views/system/user/index.vue'),
-          meta: { title: '用户管理', icon: '👤', requireAuth: true }
-        },
-        {
-          path: 'role',
-          name: 'SystemRole',
-          component: () => import('@/views/system/role/index.vue'),
-          meta: { title: '角色管理', icon: '🔑', requireAuth: true }
-        },
-        {
-          path: 'menu',
-          name: 'SystemMenu',
-          component: () => import('@/views/system/menu/index.vue'),
-          meta: { title: '菜单管理', icon: '📋', requireAuth: true }
-        },
-        // 三级路由示例: 系统管理 > 日志管理 > 操作日志 / 登录日志
-        {
-          path: 'log',
-          name: 'SystemLog',
-          redirect: '/system/log/operation',
-          meta: { title: '日志管理', icon: '📝' },
-          children: [
-            {
-              path: 'operation',
-              name: 'OperationLog',
-              component: () => import('@/views/system/log/operation.vue'),
-              meta: { title: '操作日志', requireAuth: true }
-            },
-            {
-              path: 'login',
-              name: 'LoginLog',
-              component: () => import('@/views/system/log/login.vue'),
-              meta: { title: '登录日志', requireAuth: true }
-            }
-          ]
+          meta: { title: '用户管理', icon: '', requireAuth: true }
         }
       ]
     },
 
-    // ---------- 关于页 ----------
-    {
-      path: 'about',
-      name: 'About',
-      component: () => import('@/views/about/index.vue'),
-      meta: { title: '关于', icon: 'ℹ️' }
-    },
-
     // ---------- 详情页 (Layout 内但菜单隐藏) ----------
     {
       path: 'user/detail/:id',
@@ -102,49 +61,6 @@ const layoutRoutes: RouteRecordRaw = {
   ]
 }
 
-// ==================== 独立页面 (无 Layout) ====================
-const standaloneRoutes: RouteRecordRaw[] = [
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import('@/views/login/index.vue'),
-    meta: { title: '登录' }
-  },
-  {
-    path: '/register',
-    name: 'Register',
-    component: () => import('@/views/register/index.vue'),
-    meta: { title: '注册' }
-  },
-  // 独立结果页 (不带侧边栏，全屏展示)
-  {
-    path: '/result',
-    name: 'Result',
-    redirect: '/result/success',
-    children: [
-      {
-        path: 'success',
-        name: 'ResultSuccess',
-        component: () => import('@/views/result/success.vue'),
-        meta: { title: '操作成功' }
-      },
-      {
-        path: 'fail',
-        name: 'ResultFail',
-        component: () => import('@/views/result/fail.vue'),
-        meta: { title: '操作失败' }
-      }
-    ]
-  },
-  // 独立大屏页面示例
-  {
-    path: '/screen',
-    name: 'DataScreen',
-    component: () => import('@/views/screen/index.vue'),
-    meta: { title: '数据大屏' }
-  }
-]
-
 // ==================== 错误页 ====================
 const errorRoutes: RouteRecordRaw[] = [
   {
@@ -164,7 +80,6 @@ const errorRoutes: RouteRecordRaw[] = [
 // ==================== 合并所有路由 ====================
 const routes: RouteRecordRaw[] = [
   layoutRoutes,
-  ...standaloneRoutes,
   ...errorRoutes
 ]