From b3a33196ecf2122d4e6634112beda8fa28af6b9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E5=BE=B7=E8=B6=85?=
 <13143889+he-dechao@user.noreply.gitee.com>
Date: Fri, 15 Aug 2025 11:50:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E5=B9=B3=E5=8F=B0=E5=88=9D?=
 =?UTF-8?q?=E6=8E=A5=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NotificationCenter/index.vue | 738 ++------------------
 1 file changed, 61 insertions(+), 677 deletions(-)

diff --git a/src/components/NotificationCenter/index.vue b/src/components/NotificationCenter/index.vue
index 7230f61..2530742 100644
--- a/src/components/NotificationCenter/index.vue
+++ b/src/components/NotificationCenter/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="notification-center">
-    <!-- 聊天信息图标 -->
+    <!-- 1. 触发按钮 -->
     <div class="notification-trigger">
-      <a-button type="text" class="notification-btn" title="聊天信息">
+      <a-button type="text" class="notification-btn" title="聊天信息" @click="openChat">
         <template #icon>
           <IconNotification />
         </template>
@@ -10,684 +10,68 @@
       </a-button>
     </div>
 
-    <!-- 消息中心弹窗 -->
-    <a-modal
-      v-model:visible="modalVisible"
-      title="消息中心"
-      width="800px"
-      :footer="false"
-      :mask-closable="true"
-      :closable="true"
-      :destroy-on-close="false"
-      :z-index="1000"
-      class="notification-modal"
-    >
-      <!-- 消息中心头部 -->
-      <div class="notification-header">
-        <div class="header-left">
-          <h3>消息中心</h3>
-          <span class="notification-count">{{ unreadCount }} 条未读</span>
-        </div>
-        <div class="header-right">
-          <a-button type="text" size="small" @click="markAllAsRead">
-            全部已读
-          </a-button>
-          <a-button type="text" size="small" @click="clearRead">
-            清空已读
-          </a-button>
-        </div>
-      </div>
-
-      <!-- 消息类型标签 -->
-      <div class="notification-tabs">
-        <a-tabs v-model:active-key="activeTab" size="small">
-          <a-tab-pane key="all" title="全部">
-            <template #title>
-              <span>全部 ({{ totalCount }})</span>
-            </template>
-          </a-tab-pane>
-          <a-tab-pane key="pending" title="待审批">
-            <template #title>
-              <span>待审批 ({{ pendingCount }})</span>
-            </template>
-          </a-tab-pane>
-          <a-tab-pane key="equipment" title="设备">
-            <template #title>
-              <span>设备 ({{ equipmentCount }})</span>
-            </template>
-          </a-tab-pane>
-          <a-tab-pane key="urgent" title="紧急">
-            <template #title>
-              <span>紧急 ({{ urgentCount }})</span>
-            </template>
-          </a-tab-pane>
-        </a-tabs>
-      </div>
-
-      <!-- 消息列表 -->
-      <div class="notification-list">
-        <div v-if="filteredNotifications.length === 0" class="empty-state">
-          <IconInfo style="font-size: 48px; color: #d9d9d9; margin-bottom: 16px;" />
-          <p>暂无消息</p>
-        </div>
-        
-        <div
-          v-for="notification in filteredNotifications"
-          :key="notification.id"
-          class="notification-item"
-          :class="{
-            'unread': !notification.read,
-            'urgent': notification.priority === 'URGENT',
-            'high': notification.priority === 'HIGH'
-          }"
-          @click="handleNotificationClick(notification)"
-        >
-          <!-- 消息图标 -->
-          <div class="notification-icon">
-            <component :is="getNotificationIcon(notification.type)" />
-          </div>
-          
-          <!-- 消息内容 -->
-          <div class="notification-content">
-            <div class="notification-title">
-              {{ notification.title }}
-              <a-tag 
-                v-if="notification.actionRequired" 
-                size="small" 
-                color="red"
-              >
-                需操作
-              </a-tag>
-              <a-tag 
-                v-if="notification.reminderType" 
-                size="small" 
-                color="blue"
-              >
-                {{ getReminderTypeText(notification.reminderType) }}
-              </a-tag>
-            </div>
-            <div class="notification-message">{{ notification.content }}</div>
-            <div class="notification-meta">
-              <span class="notification-time">{{ formatTime(notification.createTime) }}</span>
-              <span class="notification-category">{{ notification.category }}</span>
-              <span v-if="notification.source" class="notification-source">{{ notification.source }}</span>
-            </div>
-          </div>
-          
-          <!-- 消息操作 -->
-          <div class="notification-actions">
-            <a-button 
-              type="text" 
-              size="small" 
-              @click.stop="toggleReminder(notification)"
-              :title="notification.reminderTime ? '取消提醒' : '设置提醒'"
-            >
-              <IconClockCircle v-if="!notification.reminderTime" />
-              <IconClose v-else />
-            </a-button>
-            <a-button 
-              type="text" 
-              size="small" 
-              @click.stop="removeNotification(notification.id)"
-              title="删除消息"
-            >
-              <IconDelete />
-            </a-button>
-          </div>
-        </div>
-      </div>
-
-      <!-- 消息底部 -->
-      <div class="notification-footer">
-        <a-button type="text" size="small" @click="viewAllNotifications">
-          查看全部消息
-        </a-button>
-        <a-button type="text" size="small" @click="exportNotifications">
-          导出消息
-        </a-button>
-      </div>
-    </a-modal>
-
-    <!-- 提醒设置弹窗 -->
-    <a-modal
-      v-model:visible="reminderModalVisible"
-      title="设置消息提醒"
-      width="400px"
-      @ok="saveReminder"
-      @cancel="cancelReminder"
-    >
-      <a-form :model="reminderForm" layout="vertical">
-        <a-form-item label="提醒类型">
-          <a-radio-group v-model="reminderForm.type">
-            <a-radio value="IMMEDIATE">立即提醒</a-radio>
-            <a-radio value="DELAYED">延迟提醒</a-radio>
-            <a-radio value="RECURRING">重复提醒</a-radio>
-          </a-radio-group>
-        </a-form-item>
-        
-        <a-form-item v-if="reminderForm.type === 'DELAYED'" label="提醒时间">
-          <a-date-picker
-            v-model="reminderForm.time"
-            show-time
-            placeholder="选择提醒时间"
-            style="width: 100%"
-          />
-        </a-form-item>
-        
-        <a-form-item v-if="reminderForm.type === 'RECURRING'" label="重复间隔">
-          <a-input-number
-            v-model="reminderForm.interval"
-            :min="1"
-            :max="1440"
-            placeholder="间隔分钟"
-            style="width: 100%"
-          />
-        </a-form-item>
-      </a-form>
+    <!-- 2. 聊天平台弹窗 -->
+    <a-modal v-model:visible="chatVisible" title="聊天平台(注册验证码666666)" width=80% :footer="false" :mask-closable="true"
+      :destroy-on-close="false" @close="chatVisible = false">
+      <!-- 3. 嵌入 React 聊天平台 -->
+      <iframe ref="chatFrame" src="http://pms.dtyx.net:11001/" frameborder="0"
+        style="width: 100%; height: 600px; border: none;" allow="camera; microphone"></iframe>
     </a-modal>
   </div>
 </template>
 
+
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  IconNotification,
-  IconInfo,
-  IconClockCircle,
-  IconClose,
-  IconDelete,
-  IconCheckCircle,
-  IconClockCircle as IconPending,
-  IconApps,
-  IconExclamationCircle,
-  IconExclamationCircle as IconWarning,
-  IconSettings
-} from '@arco-design/web-vue/es/icon'
-import message from '@arco-design/web-vue/es/message'
-import notificationService from '@/services/notificationService'
-import websocketService from '@/services/websocketService'
+import { ref, nextTick } from 'vue'
+import { IconNotification } from '@arco-design/web-vue/es/icon'
 
-defineOptions({ name: 'NotificationCenter' })
+const chatVisible = ref(false)
+const chatFrame = ref<HTMLIFrameElement>()
+const url = ref(import.meta.env.VITE_API_BASE_URL + ":11001")
+/* 打开聊天窗口 */
+function openChat() {
+  chatVisible.value = true
 
-const router = useRouter()
-
-// 响应式数据
-const modalVisible = ref(false)
-const activeTab = ref('all')
-const reminderModalVisible = ref(false)
-const currentNotification = ref<any>(null)
-
-// 提醒表单
-const reminderForm = ref({
-  type: 'IMMEDIATE' as 'IMMEDIATE' | 'DELAYED' | 'RECURRING',
-  time: null as Date | null,
-  interval: 30
-})
-
-// 计算属性
-const notifications = computed(() => notificationService.getAllNotifications())
-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(() => {
-  const count = notificationService.pendingCount.value
-  if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
-    return count
-  }
-  return 0
-})
-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)
-
-// 过滤后的消息列表
-const filteredNotifications = computed(() => {
-  let filtered = notifications.value
-  
-  switch (activeTab.value) {
-    case 'pending':
-      filtered = filtered.filter(n => n.type === 'PENDING')
-      break
-    case 'equipment':
-      filtered = filtered.filter(n => 
-        ['EQUIPMENT_BORROW', 'EQUIPMENT_RETURN', 'EQUIPMENT_MAINTENANCE', 'EQUIPMENT_ALERT'].includes(n.type)
-      )
-      break
-    case 'urgent':
-      filtered = filtered.filter(n => n.priority === 'URGENT' || n.priority === 'HIGH')
-      break
-  }
-  
-  // 按优先级和时间排序
-  return filtered.sort((a, b) => {
-    const priorityOrder = { 'URGENT': 4, 'HIGH': 3, 'NORMAL': 2, 'LOW': 1 }
-    const aPriority = priorityOrder[a.priority || 'NORMAL'] || 2
-    const bPriority = priorityOrder[b.priority || 'NORMAL'] || 2
-    
-    if (aPriority !== bPriority) {
-      return bPriority - aPriority
-    }
-    
-    return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
-  }).slice(0, 20) // 只显示前20条
-})
-
-// 方法
-const toggleDropdown = () => {
-  console.log('打开消息中心弹窗')
-  modalVisible.value = true
+  // 如果 React 平台需要登录信息，可在 iframe 加载完成后 postMessage
+  // nextTick(() => {
+  //   // 确保 iframe 已挂载
+  //   if (chatFrame.value) {
+  //     chatFrame.value.onload = () => {
+  //       // 把当前登录用户信息发给 React
+  //       chatFrame.value?.contentWindow?.postMessage(
+  //         {
+  //           type: 'INIT_IM',
+  //           payload: {
+  //             userID: 'your-user-id',   // 换成真实 ID
+  //             token:  'your-token',     // 换成真实 token
+  //           },
+  //         },
+  //         '*'   // 生产环境可改成 React 平台的 origin
+  //       )
+  //     }
+  //   }
+  // })
 }
-
-const markAllAsRead = () => {
-  notificationService.markAllAsRead()
-  message.success('已标记所有消息为已读')
-}
-
-const clearRead = () => {
-  notificationService.clearRead()
-  message.success('已清空已读消息')
-}
-
-const handleNotificationClick = (notification: any) => {
-  console.log('点击消息:', notification)
-  
-  // 标记为已读
-  notificationService.markAsRead(notification.id)
-  
-  // 构建跳转路径
-  let targetUrl = notification.targetUrl
-  
-  // 如果没有targetUrl，根据消息类型和业务信息构建
-  if (!targetUrl) {
-    targetUrl = buildTargetUrl(notification)
-  }
-  
-  console.log('构建的目标URL:', targetUrl)
-  
-  // 如果有目标URL，跳转过去
-  if (targetUrl) {
-    try {
-      router.push(targetUrl)
-      modalVisible.value = false
-      message.success('正在跳转到相关页面...')
-    } catch (error) {
-      console.error('路由跳转失败:', error)
-      message.error('页面跳转失败，请手动导航')
-    }
-  } else {
-    console.warn('无法构建跳转路径，消息数据:', notification)
-    message.warning('该消息暂无相关操作页面')
-  }
-}
-
-// 根据消息类型构建跳转路径
-const buildTargetUrl = (notification: any): string | null => {
-  const { type, relatedId, metadata, category } = notification
-  
-  console.log('构建跳转路径，消息类型:', type, '相关ID:', relatedId, '元数据:', metadata)
-  
-  switch (type) {
-    case 'PROCUREMENT':
-    case 'PENDING':
-      // 设备采购申请 - 跳转到审批台
-      return '/asset-management/device-management/approval'
-      
-    case 'APPROVAL':
-      // 审批相关 - 跳转到审批台
-      return '/asset-management/device-management/approval'
-      
-    case 'EQUIPMENT_BORROW':
-      // 设备借用 - 跳转到设备中心
-      return '/asset-management/device-management/device-center'
-      
-    case 'EQUIPMENT_RETURN':
-      // 设备归还 - 跳转到设备中心
-      return '/asset-management/device-management/device-center'
-      
-    case 'EQUIPMENT_MAINTENANCE':
-      // 设备维护 - 跳转到设备中心
-      return '/asset-management/device-management/device-center'
-      
-    case 'EQUIPMENT_ALERT':
-      // 设备告警 - 跳转到设备中心
-      return '/asset-management/device-management/device-center'
-      
-    case 'WORKFLOW':
-      // 工作流 - 根据具体类型跳转
-      if (metadata?.workflowType === 'PROJECT') {
-        return '/project-management/project-template/project-aproval'
-      }
-      return '/asset-management/device-management/approval'
-      
-    case 'SYSTEM':
-      // 系统消息 - 通常不需要跳转
-      return null
-      
-    default:
-      // 默认跳转到审批台
-      return '/asset-management/device-management/approval'
-  }
-}
-
-const getNotificationIcon = (type: string) => {
-  const iconMap: Record<string, any> = {
-    'APPROVAL': IconCheckCircle,
-    'PENDING': IconPending,
-    'PROCUREMENT': IconApps,
-    'EQUIPMENT_BORROW': IconApps,
-    'EQUIPMENT_RETURN': IconApps,
-    'EQUIPMENT_MAINTENANCE': IconSettings,
-    'EQUIPMENT_ALERT': IconWarning,
-    'WORKFLOW': IconSettings,
-    'SYSTEM': IconExclamationCircle
-  }
-  return iconMap[type] || IconNotification
-}
-
-const getReminderTypeText = (type: string) => {
-  const typeMap: Record<string, string> = {
-    'IMMEDIATE': '立即',
-    'DELAYED': '延迟',
-    'RECURRING': '重复'
-  }
-  return typeMap[type] || type
-}
-
-const formatTime = (time: string) => {
-  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 toggleReminder = (notification: any) => {
-  if (notification.reminderTime) {
-    // 取消提醒
-    notificationService.cancelNotificationReminder(notification.id)
-    message.success('已取消提醒')
-  } else {
-    // 设置提醒
-    currentNotification.value = notification
-    reminderModalVisible.value = true
-  }
-}
-
-const saveReminder = () => {
-  if (currentNotification.value) {
-    const reminderTime = reminderForm.value.type === 'DELAYED' && reminderForm.value.time
-      ? reminderForm.value.time.toISOString()
-      : new Date().toISOString()
-    
-    notificationService.setNotificationReminder(
-      currentNotification.value.id,
-      reminderTime,
-      reminderForm.value.type as any,
-      reminderForm.value.type === 'RECURRING' ? reminderForm.value.interval : undefined
-    )
-    
-    message.success('提醒设置成功')
-    reminderModalVisible.value = false
-    resetReminderForm()
-  }
-}
-
-const cancelReminder = () => {
-  reminderModalVisible.value = false
-  resetReminderForm()
-}
-
-const resetReminderForm = () => {
-  reminderForm.value = {
-    type: 'IMMEDIATE',
-    time: null,
-    interval: 30
-  }
-  currentNotification.value = null
-}
-
-const removeNotification = (id: string) => {
-  notificationService.removeNotification(id)
-  message.success('消息已删除')
-}
-
-const viewAllNotifications = () => {
-  router.push('/notifications')
-  modalVisible.value = false
-}
-
-const exportNotifications = () => {
-  notificationService.exportNotifications()
-  message.success('消息导出成功')
-}
-
-// 监听WebSocket事件
-const setupWebSocketListeners = () => {
-  console.log('设置WebSocket监听器')
-  
-  // 监听新消息
-  websocketService.on('message', (message) => {
-    console.log('收到WebSocket消息:', message)
-    
-    // 如果消息包含通知信息，添加到通知服务
-    if (message.data && message.data.notification) {
-      console.log('处理通知消息:', message.data.notification)
-      notificationService.addNotification({
-        type: message.data.notification.type || 'SYSTEM',
-        title: message.data.notification.title || '新通知',
-        content: message.data.notification.content || '',
-        priority: message.data.notification.priority || 'NORMAL',
-        category: message.data.notification.category || '系统',
-        targetUrl: message.data.notification.targetUrl,
-        metadata: message.data.notification.metadata,
-        source: message.data.notification.source || 'WEBSOCKET'
-      })
-    }
-  })
-  
-  // 监听审批状态变更
-  websocketService.on('approvalStatusChanged', (data) => {
-    console.log('审批状态变更:', data)
-    
-    // 添加审批状态变更通知
-    if (data.type === 'SUBMITTED') {
-      notificationService.addNotification({
-        type: 'PENDING',
-        title: '新的审批申请',
-        content: `收到来自 ${data.applicantName || '申请人'} 的${data.businessType || '设备'}申请：${data.equipmentName || '未知设备'}`,
-        targetUrl: '/asset-management/device-management/approval',
-        priority: 'HIGH',
-        category: '审批申请',
-        actionRequired: true,
-        source: 'APPROVAL_SYSTEM',
-        metadata: {
-          approvalId: data.approvalId,
-          equipmentName: data.equipmentName,
-          applicantName: data.applicantName,
-          businessType: data.businessType,
-          timestamp: Date.now()
-        }
-      })
-    }
-  })
-  
-  // 监听设备状态变更
-  websocketService.on('equipmentStatusChanged', (data) => {
-    console.log('设备状态变更:', data)
-    
-    // 添加设备状态变更通知
-    notificationService.addNotification({
-      type: 'EQUIPMENT_ALERT',
-      title: '设备状态更新',
-      content: `设备"${data.equipmentName || '未知设备'}"状态已更新为：${data.newStatus}`,
-      targetUrl: '/asset-management/device-management/device-center',
-      priority: 'NORMAL',
-      category: '设备状态',
-      source: 'EQUIPMENT_SYSTEM',
-      metadata: {
-        equipmentId: data.equipmentId,
-        equipmentName: data.equipmentName,
-        oldStatus: data.oldStatus,
-        newStatus: data.newStatus,
-        timestamp: Date.now()
-      }
-    })
-  })
-  
-  // 监听采购状态变更
-  websocketService.on('procurementStatusChanged', (data) => {
-    console.log('采购状态变更:', data)
-    
-    if (data.type === 'SUBMITTED') {
-      notificationService.addNotification({
-        type: 'PROCUREMENT',
-        title: '新的采购申请',
-        content: `收到来自 ${data.applicantName || '申请人'} 的设备采购申请：${data.equipmentName || '未知设备'}`,
-        targetUrl: '/asset-management/device-management/approval',
-        priority: 'HIGH',
-        category: '设备采购',
-        actionRequired: true,
-        source: 'PROCUREMENT_SYSTEM',
-        metadata: {
-          procurementId: data.procurementId,
-          equipmentName: data.equipmentName,
-          applicantName: data.applicantName,
-          timestamp: Date.now()
-        }
-      })
-    }
-  })
-  
-  // 监听新审批申请
-  websocketService.on('newApprovalRequest', (data) => {
-    console.log('新审批申请:', data)
-    
-    notificationService.addNotification({
-      type: 'PENDING',
-      title: '新的审批申请',
-      content: `收到来自 ${data.applicantName || '申请人'} 的${data.businessType || '设备'}申请：${data.equipmentName || '未知设备'}`,
-      targetUrl: '/asset-management/device-management/approval',
-      priority: 'HIGH',
-      category: '审批申请',
-      actionRequired: true,
-      source: 'APPROVAL_SYSTEM',
-      metadata: {
-        approvalId: data.approvalId,
-        equipmentName: data.equipmentName,
-        applicantName: data.applicantName,
-        businessType: data.businessType,
-        timestamp: Date.now()
-      }
-    })
-  })
-  
-  // 监听WebSocket连接状态
-  websocketService.on('connected', () => {
-    console.log('WebSocket已连接')
-  })
-  
-  websocketService.on('disconnected', (data) => {
-    console.log('WebSocket已断开:', data)
-  })
-  
-  websocketService.on('error', (error) => {
-    console.error('WebSocket错误:', error)
-  })
-}
-
-// 清理WebSocket监听器
-const cleanupWebSocketListeners = () => {
-  console.log('清理WebSocket监听器')
-  
-  // 移除所有事件监听器
-  websocketService.off('message', () => {})
-  websocketService.off('approvalStatusChanged', () => {})
-  websocketService.off('equipmentStatusChanged', () => {})
-  websocketService.off('procurementStatusChanged', () => {})
-  websocketService.off('newApprovalRequest', () => {})
-  websocketService.off('connected', () => {})
-  websocketService.off('disconnected', () => {})
-  websocketService.off('error', () => {})
-}
-
-// 定期检查提醒
-let reminderCheckInterval: NodeJS.Timeout | null = null
-
-const startReminderCheck = () => {
-  reminderCheckInterval = setInterval(() => {
-    const reminderNotifications = notificationService.getReminderNotifications()
-    if (reminderNotifications.length > 0) {
-      // 显示提醒通知
-      reminderNotifications.forEach(notification => {
-        message.info(`${notification.title}: ${notification.content}`)
-        notificationService.markReminderProcessed(notification.id)
-      })
-    }
-  }, 60000) // 每分钟检查一次
-}
-
-// 生命周期
-onMounted(() => {
-  setupWebSocketListeners()
-  startReminderCheck()
-})
-
-onUnmounted(() => {
-  cleanupWebSocketListeners()
-  if (reminderCheckInterval) {
-    clearInterval(reminderCheckInterval)
-  }
-})
-
-// 暴露方法给父组件
-defineExpose({
-  toggleDropdown
-})
 </script>
 
 <style scoped lang="scss">
 .notification-center {
   position: relative;
   z-index: 1000;
-  
+
   .notification-trigger {
     cursor: pointer;
-    
+
     .notification-btn {
       color: var(--color-text-1);
       display: flex;
       align-items: center;
       gap: 4px;
-      
+
       &:hover {
         color: var(--color-primary);
       }
-      
+
       .notification-text {
         font-size: 14px;
         margin-left: 4px;
@@ -701,11 +85,11 @@ defineExpose({
   :deep(.arco-modal) {
     z-index: 1000 !important;
   }
-  
+
   :deep(.arco-modal-mask) {
     z-index: 999 !important;
   }
-  
+
   :deep(.arco-modal-wrapper) {
     z-index: 1000 !important;
   }
@@ -718,7 +102,7 @@ defineExpose({
   padding: 16px 0;
   border-bottom: 1px solid var(--color-border);
   margin-bottom: 16px;
-  
+
   .header-left {
     h3 {
       margin: 0 0 4px 0;
@@ -726,13 +110,13 @@ defineExpose({
       font-weight: 600;
       color: var(--color-text-1);
     }
-    
+
     .notification-count {
       font-size: 13px;
       color: var(--color-text-3);
     }
   }
-  
+
   .header-right {
     display: flex;
     gap: 8px;
@@ -741,7 +125,7 @@ defineExpose({
 
 .notification-tabs {
   margin-bottom: 16px;
-  
+
   :deep(.arco-tabs-nav) {
     margin-bottom: 0;
   }
@@ -750,13 +134,13 @@ defineExpose({
 .notification-list {
   max-height: 400px;
   overflow-y: auto;
-  
+
   .empty-state {
     text-align: center;
     padding: 40px 0;
     color: var(--color-text-3);
   }
-  
+
   .notification-item {
     display: flex;
     align-items: flex-start;
@@ -766,44 +150,44 @@ defineExpose({
     margin-bottom: 12px;
     cursor: pointer;
     transition: all 0.2s;
-    
+
     &: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);
     }
-    
+
     .notification-icon {
       margin-right: 16px;
       margin-top: 2px;
       color: var(--color-text-2);
       font-size: 18px;
     }
-    
+
     .notification-content {
       flex: 1;
       min-width: 0;
-      
+
       .notification-title {
         font-weight: 600;
         margin-bottom: 8px;
@@ -813,34 +197,34 @@ defineExpose({
         color: var(--color-text-1);
         font-size: 15px;
       }
-      
+
       .notification-message {
         font-size: 14px;
         color: var(--color-text-2);
         margin-bottom: 12px;
         line-height: 1.5;
       }
-      
+
       .notification-meta {
         display: flex;
         gap: 16px;
         font-size: 12px;
         color: var(--color-text-3);
-        
+
         .notification-time {
           color: var(--color-text-2);
           font-weight: 500;
         }
       }
     }
-    
+
     .notification-actions {
       display: flex;
       gap: 8px;
       opacity: 0;
       transition: opacity 0.2s;
     }
-    
+
     &:hover .notification-actions {
       opacity: 1;
     }