把审批信息放在个人中心所在下拉框消息中心里，铃铛图标处改为聊天消息

src/components/NotificationCenter/ApprovalMessageItem.vue

@@ -0,0 +1,297 @@
+<template>
+  <div 
+    class="approval-message-item"
+    :class="{
+      'unread': !notification.read,
+      'urgent': notification.priority === 'URGENT',
+      'high': notification.priority === 'HIGH',
+      'action-required': notification.actionRequired
+    }"
+    @click="handleClick"
+  >
+    <!-- 消息图标 -->
+    <div class="message-icon">
+      <component :is="getIconByType(notification.type)" />
+    </div>
+    
+    <!-- 消息内容 -->
+    <div class="message-content">
+      <div class="message-header">
+        <div class="message-title">
+          {{ notification.title }}
+          <a-tag 
+            v-if="notification.actionRequired" 
+            size="small" 
+            color="red"
+          >
+            需操作
+          </a-tag>
+          <a-tag 
+            v-if="notification.priority === 'URGENT'" 
+            size="small" 
+            color="red"
+          >
+            紧急
+          </a-tag>
+          <a-tag 
+            v-if="notification.priority === 'HIGH'" 
+            size="small" 
+            color="orange"
+          >
+            重要
+          </a-tag>
+        </div>
+        <div class="message-time">
+          {{ formatTime(notification.createTime) }}
+        </div>
+      </div>
+      
+      <div class="message-body">
+        {{ notification.content }}
+      </div>
+      
+      <div class="message-footer">
+        <div class="message-meta">
+          <span class="category">{{ notification.category }}</span>
+          <span v-if="notification.source" class="source">{{ notification.source }}</span>
+        </div>
+        
+        <div class="message-actions">
+          <a-button 
+            type="text" 
+            size="small" 
+            @click.stop="handleView"
+          >
+            查看详情
+          </a-button>
+          <a-button 
+            type="text" 
+            size="small" 
+            @click.stop="handleApprove"
+            v-if="canApprove"
+          >
+            审批
+          </a-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  IconCheckCircle,
+  IconClockCircle,
+  IconApps,
+  IconSettings,
+  IconExclamationCircle
+} from '@arco-design/web-vue/es/icon'
+
+interface Props {
+  notification: {
+    id: string
+    type: string
+    title: string
+    content: string
+    priority?: string
+    category: string
+    source?: string
+    createTime: string
+    read: boolean
+    actionRequired: boolean
+    targetUrl?: string
+    metadata?: any
+    reminderTime?: string
+    reminderType?: string
+    lastReminderTime?: string
+  }
+}
+
+const props = defineProps<Props>()
+const router = useRouter()
+
+// 计算属性
+const canApprove = computed(() => {
+  return props.notification.type.includes('APPROVAL') || 
+         props.notification.type === 'PENDING' ||
+         props.notification.type === 'PROCUREMENT'
+})
+
+// 根据消息类型获取图标
+const getIconByType = (type: string) => {
+  const iconMap: Record<string, any> = {
+    'APPROVAL': IconCheckCircle,
+    'PENDING': IconClockCircle,
+    'PROCUREMENT': IconApps,
+    'EQUIPMENT_BORROW': IconApps,
+    'EQUIPMENT_RETURN': IconApps,
+    'EQUIPMENT_MAINTENANCE': IconSettings,
+    'EQUIPMENT_ALERT': IconExclamationCircle,
+    'PROCUREMENT_APPROVAL': IconApps,
+    'BORROW_APPROVAL': IconApps,
+    'RETURN_APPROVAL': IconApps
+  }
+  return iconMap[type] || IconCheckCircle
+}
+
+// 格式化时间
+const formatTime = (time: string) => {
+  if (!time) return '-'
+  const date = new Date(time)
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  
+  if (diff < 60000) return '刚刚'
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
+  if (diff < 2592000000) return `${Math.floor(diff / 86400000)}天前`
+  
+  return date.toLocaleDateString()
+}
+
+// 处理点击事件
+const handleClick = () => {
+  if (props.notification.targetUrl) {
+    router.push(props.notification.targetUrl)
+  }
+}
+
+// 查看详情
+const handleView = () => {
+  if (props.notification.targetUrl) {
+    router.push(props.notification.targetUrl)
+  }
+}
+
+// 审批操作
+const handleApprove = () => {
+  if (props.notification.targetUrl) {
+    router.push(props.notification.targetUrl)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.approval-message-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 20px;
+  border: 1px solid var(--color-border-2);
+  border-radius: 8px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: var(--color-bg-2);
+  
+  &:hover {
+    background-color: var(--color-fill-2);
+    border-color: var(--color-primary-light-3);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  &.unread {
+    background-color: var(--color-primary-light-1);
+    border-color: var(--color-primary-light-3);
+    
+    &:hover {
+      background-color: var(--color-primary-light-2);
+    }
+  }
+  
+  &.urgent {
+    border-left: 4px solid var(--color-danger);
+    background-color: var(--color-danger-light-1);
+  }
+  
+  &.high {
+    border-left: 4px solid var(--color-warning);
+    background-color: var(--color-warning-light-1);
+  }
+  
+  &.action-required {
+    border-left: 4px solid var(--color-primary);
+    background-color: var(--color-primary-light-1);
+  }
+  
+  .message-icon {
+    margin-right: 16px;
+    margin-top: 2px;
+    color: var(--color-text-2);
+    font-size: 20px;
+  }
+  
+  .message-content {
+    flex: 1;
+    min-width: 0;
+    
+    .message-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 12px;
+      
+      .message-title {
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--color-text-1);
+        font-size: 16px;
+        flex: 1;
+        margin-right: 16px;
+      }
+      
+      .message-time {
+        font-size: 12px;
+        color: var(--color-text-3);
+        white-space: nowrap;
+      }
+    }
+    
+    .message-body {
+      font-size: 14px;
+      color: var(--color-text-2);
+      margin-bottom: 16px;
+      line-height: 1.5;
+    }
+    
+    .message-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .message-meta {
+        display: flex;
+        gap: 12px;
+        font-size: 12px;
+        color: var(--color-text-3);
+        
+        .category {
+          background: var(--color-fill-3);
+          padding: 2px 8px;
+          border-radius: 4px;
+          font-weight: 500;
+        }
+        
+        .source {
+          color: var(--color-text-4);
+        }
+      }
+      
+      .message-actions {
+        display: flex;
+        gap: 8px;
+        opacity: 0;
+        transition: opacity 0.2s;
+      }
+    }
+    
+    &:hover .message-actions {
+      opacity: 1;
+    }
+  }
+}
+</style>

src/components/NotificationCenter/index.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="notification-center">
-    <!-- 消息中心图标和徽章 -->
+    <!-- 聊天信息图标 -->
-    <div class="notification-trigger" @click="toggleDropdown">
+    <div class="notification-trigger">
-      <a-badge :count="unreadCount" :dot="hasUrgentNotifications">
+      <a-button type="text" class="notification-btn" title="聊天信息">
-        <a-button type="text" class="notification-btn" title="消息中心">
+        <template #icon>
-          <template #icon>
+          <IconNotification />
-            <IconNotification />
+        </template>
-          </template>
+        <span class="notification-text">聊天信息</span>
-          <span class="notification-text">消息中心</span>
+      </a-button>
-        </a-button>
-      </a-badge>
     </div>
 
     <!-- 消息中心弹窗 -->
@@ -229,16 +227,37 @@ const reminderForm = ref({
 
 // 计算属性
 const notifications = computed(() => notificationService.getAllNotifications())
-const unreadCount = computed(() => notificationService.unreadCount.value)
+const unreadCount = computed(() => {
+  const count = notificationService.unreadCount.value
+  // 确保返回有效的数字，避免NaN
+  if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
+    return count
+  }
+  return 0
+})
 const totalCount = computed(() => notifications.value.length)
-const pendingCount = computed(() => notificationService.pendingCount.value)
+const pendingCount = computed(() => {
-const equipmentCount = computed(() => 
+  const count = notificationService.pendingCount.value
-  notificationService.equipmentBorrowCount.value + 
+  if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
-  notificationService.equipmentReturnCount.value + 
+    return count
-  notificationService.equipmentMaintenanceCount.value + 
+  }
-  notificationService.equipmentAlertCount.value
+  return 0
-)
+})
-const urgentCount = computed(() => notificationService.urgentCount.value)
+const equipmentCount = computed(() => {
+  const borrowCount = notificationService.equipmentBorrowCount.value || 0
+  const returnCount = notificationService.equipmentReturnCount.value || 0
+  const maintenanceCount = notificationService.equipmentMaintenanceCount.value || 0
+  const alertCount = notificationService.equipmentAlertCount.value || 0
+  
+  return borrowCount + returnCount + maintenanceCount + alertCount
+})
+const urgentCount = computed(() => {
+  const count = notificationService.urgentCount.value
+  if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
+    return count
+  }
+  return 0
+})
 const hasUrgentNotifications = computed(() => urgentCount.value > 0)
 
 // 过滤后的消息列表
@@ -644,6 +663,11 @@ onUnmounted(() => {
     clearInterval(reminderCheckInterval)
   }
 })
+
+// 暴露方法给父组件
+defineExpose({
+  toggleDropdown
+})
 </script>
 
 <style scoped lang="scss">

src/layout/components/HeaderRightBar/index.vue

@@ -34,7 +34,9 @@
       <a-dropdown trigger="hover">
         <a-row align="center" :wrap="false" class="user">
           <!-- 管理员头像 -->
-          <Avatar :src="userStore.avatar" :name="userStore.nickname" :size="32" />
+          <a-badge :count="unreadMessageCount > 0 ? unreadMessageCount : undefined" :dot="false">
+            <Avatar :src="userStore.avatar" :name="userStore.nickname" :size="32" />
+          </a-badge>
           <span class="username">{{ userStore.nickname }}</span>
           <icon-down />
         </a-row>
@@ -42,8 +44,14 @@
           <a-doption @click="router.push('/user/profile')">
             <span>个人中心</span>
           </a-doption>
-          <a-doption @click="router.push('/user/message')">
+          <a-doption @click="showNotificationCenter">
             <span>消息中心</span>
+            <a-badge 
+              v-if="unreadMessageCount > 0" 
+              :count="unreadMessageCount" 
+              :dot="false"
+              class="dropdown-notification-badge"
+            />
           </a-doption>
           <a-divider :margin="0" />
           <a-doption @click="logout">
@@ -78,7 +86,14 @@ const { breakpoint } = useBreakpoint()
 const notificationCenterRef = ref()
 
 // 使用通知服务的未读消息数量
-const unreadMessageCount = computed(() => notificationService.unreadCount.value)
+const unreadMessageCount = computed(() => {
+  const count = notificationService.unreadCount.value
+  // 确保返回有效的数字，避免NaN
+  if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
+    return count
+  }
+  return 0
+})
 
 // 语音提示功能
 const playNotificationSound = () => {
@@ -224,6 +239,27 @@ const router = useRouter()
 const userStore = useUserStore()
 const SettingDrawerRef = ref<InstanceType<typeof SettingDrawer>>()
 
+// 显示消息中心弹窗
+const showNotificationCenter = () => {
+  console.log('showNotificationCenter 被调用')
+  console.log('notificationCenterRef.value:', notificationCenterRef.value)
+  
+  if (notificationCenterRef.value) {
+    console.log('调用 toggleDropdown 方法')
+    try {
+      notificationCenterRef.value.toggleDropdown()
+    } catch (error) {
+      console.error('调用 toggleDropdown 失败:', error)
+      // 备选方案：直接设置弹窗状态
+      if (notificationCenterRef.value.modalVisible !== undefined) {
+        notificationCenterRef.value.modalVisible = true
+      }
+    }
+  } else {
+    console.error('notificationCenterRef.value 为空')
+  }
+}
+
 // 退出登录
 const logout = () => {
   Modal.warning({
@@ -262,22 +298,6 @@ onMounted(() => {
   transform: rotate(180deg);
 }
 
-.user {
-  cursor: pointer;
-  color: var(--color-text-1);
-
-  .username {
-    margin-left: 10px;
-    white-space: nowrap;
-  }
-
-  .arco-icon-down {
-    transition: all 0.3s;
-    margin-left: 2px;
-  }
-}
-
-// 通知徽章样式
 .notification-badge {
   .arco-badge-dot {
     background-color: #f53f3f;
@@ -328,4 +348,49 @@ onMounted(() => {
     transform: translate3d(0, -2px, 0);
   }
 }
+
+// 下拉菜单中的消息中心徽章样式
+.dropdown-notification-badge {
+  margin-left: 8px;
+  
+  :deep(.arco-badge-count) {
+    background-color: #f53f3f;
+    font-weight: bold;
+    font-size: 12px;
+    min-width: 18px;
+    height: 18px;
+    line-height: 18px;
+    border-radius: 9px;
+    animation: bounce 0.6s ease-in-out;
+  }
+}
+
+// 头像处的消息徽章样式
+.user {
+  cursor: pointer;
+  color: var(--color-text-1);
+
+  .username {
+    margin-left: 10px;
+    white-space: nowrap;
+  }
+
+  .arco-icon-down {
+    transition: all 0.3s;
+    margin-left: 2px;
+  }
+  
+  // 头像徽章样式
+  :deep(.arco-badge-count) {
+    background-color: #f53f3f;
+    font-weight: bold;
+    font-size: 11px;
+    min-width: 16px;
+    height: 16px;
+    line-height: 16px;
+    border-radius: 8px;
+    animation: bounce 0.6s ease-in-out;
+    box-shadow: 0 2px 4px rgba(245, 63, 63, 0.3);
+  }
+}
 </style>

src/types/auto-imports.d.ts

@@ -70,6 +70,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/types/components.d.ts

@@ -7,68 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ApprovalAssistant: typeof import('./../components/ApprovalAssistant/index.vue')['default']
-    Avatar: typeof import('./../components/Avatar/index.vue')['default']
-    Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
-    CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
-    Chart: typeof import('./../components/Chart/index.vue')['default']
-    ColumnSetting: typeof import('./../components/GiTable/src/components/ColumnSetting.vue')['default']
-    CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
-    CronModal: typeof import('./../components/GenCron/CronModal/index.vue')['default']
-    DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
-    DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
-    FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
-    GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
-    GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
-    GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
-    GiCellTag: typeof import('./../components/GiCell/GiCellTag.vue')['default']
-    GiCellTags: typeof import('./../components/GiCell/GiCellTags.vue')['default']
-    GiCodeView: typeof import('./../components/GiCodeView/index.vue')['default']
-    GiDot: typeof import('./../components/GiDot/index.tsx')['default']
-    GiEditTable: typeof import('./../components/GiEditTable/GiEditTable.vue')['default']
-    GiFooter: typeof import('./../components/GiFooter/index.vue')['default']
-    GiForm: typeof import('./../components/GiForm/src/GiForm.vue')['default']
-    GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
-    GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
-    GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
-    GiOption: typeof import('./../components/GiOption/index.vue')['default']
-    GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
-    GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
-    GiSpace: typeof import('./../components/GiSpace/index.vue')['default']
-    GiSplitButton: typeof import('./../components/GiSplitButton/index.vue')['default']
-    GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
-    GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
-    GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
-    GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
-    GiTag: typeof import('./../components/GiTag/index.tsx')['default']
-    GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
-    HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
-    Icon403: typeof import('./../components/icons/Icon403.vue')['default']
-    Icon404: typeof import('./../components/icons/Icon404.vue')['default']
-    Icon500: typeof import('./../components/icons/Icon500.vue')['default']
-    IconBorders: typeof import('./../components/icons/IconBorders.vue')['default']
-    IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
-    IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
-    IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
-    ImageImport: typeof import('./../components/ImageImport/index.vue')['default']
-    ImageImportWizard: typeof import('./../components/ImageImportWizard/index.vue')['default']
-    IndustrialImageList: typeof import('./../components/IndustrialImageList/index.vue')['default']
-    JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
-    MinuteForm: typeof import('./../components/GenCron/CronForm/component/minute-form.vue')['default']
-    MonthForm: typeof import('./../components/GenCron/CronForm/component/month-form.vue')['default']
-    NotificationCenter: typeof import('./../components/NotificationCenter/index.vue')['default']
-    ParentView: typeof import('./../components/ParentView/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
-    SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
-    TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
-    TurbineGrid: typeof import('./../components/TurbineGrid/index.vue')['default']
-    UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
-    Verify: typeof import('./../components/Verify/index.vue')['default']
-    VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
-    VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
-    WeekForm: typeof import('./../components/GenCron/CronForm/component/week-form.vue')['default']
-    YearForm: typeof import('./../components/GenCron/CronForm/component/year-form.vue')['default']
   }
 }