更新websocket功能

resources/admin/src/layouts/components/userbar.vue

@@ -8,27 +8,76 @@
 		</a-tooltip>
 
 		<!-- 消息通知 -->
-		<a-dropdown :trigger="['click']" placement="bottomRight">
+		<a-dropdown v-model:open="messageVisible" :trigger="['click']" placement="bottomRight">
 			<a-badge :count="messageCount" :offset="[-5, 5]">
 				<a-button type="text" class="action-btn">
 					<BellOutlined />
 				</a-button>
 			</a-badge>
 			<template #overlay>
-				<a-card class="dropdown-card" :title="$t('common.messages')" :bordered="false">
-					<template #extra>
-						<a @click="clearMessages">{{ $t('common.clearAll') }}</a>
+				<a-card class="dropdown-card" :bordered="false">
+					<template #title>
+						<div class="message-header">
+							<span>{{ $t('common.messages') }}</span>
+							<a-space size="small">
+								<a-button v-if="messageCount > 0" type="link" size="small" @click="markAllAsRead">
+									{{ $t('common.markAllAsRead') }}
+								</a-button>
+								<a-button type="link" size="small" @click="clearMessages">
+									{{ $t('common.clearAll') }}
+								</a-button>
+							</a-space>
+						</div>
 					</template>
+
+					<!-- 消息类型筛选 -->
+					<div class="message-tabs">
+						<a-tabs v-model:activeKey="currentMessageType" size="small" @change="changeMessageType">
+							<a-tab-pane key="all" :tab="$t('common.all')" />
+							<a-tab-pane key="notification" :tab="$t('common.notification')" />
+							<a-tab-pane key="task" :tab="$t('common.task')" />
+							<a-tab-pane key="warning" :tab="$t('common.warning')" />
+						</a-tabs>
+					</div>
+
 					<div class="message-list">
-						<div v-for="msg in messages" :key="msg.id" class="message-item" :class="{ unread: !msg.read }">
+						<div
+							v-for="msg in messages"
+							:key="msg.id"
+							class="message-item"
+							:class="{ unread: !msg.read }"
+							@click="handleMessageRead(msg)"
+						>
 							<div class="message-content">
 								<div class="message-title">{{ msg.title }}</div>
-								<div class="message-time">{{ msg.time }}</div>
+								<div class="message-content-text">{{ msg.content }}</div>
+								<div class="message-time">{{ messageStore.formatMessageTime(msg.timestamp) }}</div>
 							</div>
 							<a-badge v-if="!msg.read" dot />
+							<a-button
+								type="text"
+								size="small"
+								danger
+								class="delete-btn"
+								@click.stop="handleDeleteMessage(msg.id)"
+							>
+								<DeleteOutlined />
+							</a-button>
 						</div>
 						<a-empty v-if="messages.length === 0" :description="$t('common.noMessages')" />
 					</div>
+
+					<!-- 分页 -->
+					<div v-if="messagesTotal > messagesPageSize" class="message-pagination">
+						<a-pagination
+							v-model:current="messagesPage"
+							v-model:pageSize="messagesPageSize"
+							:total="messagesTotal"
+							size="small"
+							:show-size-changer="false"
+							@change="handleMessagePageChange"
+						/>
+					</div>
 				</a-card>
 			</template>
 		</a-dropdown>
@@ -111,6 +160,7 @@ import { useRouter } from 'vue-router'
 import { message, Modal } from 'ant-design-vue'
 import { useUserStore } from '@/stores/modules/user'
 import { useI18nStore } from '@/stores/modules/i18n'
+import { useMessageStore, MessageType } from '@/stores/modules/message'
 import { DownOutlined, UserOutlined, LogoutOutlined, FullscreenOutlined, FullscreenExitOutlined, BellOutlined, CheckSquareOutlined, GlobalOutlined, SearchOutlined, SettingOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 import { useI18n } from 'vue-i18n'
 import search from './search.vue'
@@ -125,20 +175,37 @@ const { t } = useI18n()
 const router = useRouter()
 const userStore = useUserStore()
 const i18nStore = useI18nStore()
+const messageStore = useMessageStore()
 
 const isFullscreen = ref(false)
 const searchVisible = ref(false)
 const taskVisible = ref(false)
+const messageVisible = ref(false)
+const currentMessageType = ref('all')
+const messagesPage = ref(1)
+const messagesPageSize = ref(10)
 
-// 消息数据
-const messages = ref([
-	{ id: 1, title: '系统通知：新版本已发布', time: '10分钟前', read: false },
-	{ id: 2, title: '任务提醒：请完成待审核的用户', time: '30分钟前', read: false },
-	{ id: 3, title: '安全警告：检测到异常登录', time: '1小时前', read: true },
-	{ id: 4, title: '数据备份已完成', time: '2小时前', read: true },
-])
+// 从 store 获取消息数据
+const messages = computed(() => {
+	const result = messageStore.getMessages({
+		page: messagesPage.value,
+		pageSize: messagesPageSize.value,
+		type: currentMessageType.value === 'all' ? null : currentMessageType.value
+	})
+	return result.list
+})
 
-const messageCount = computed(() => messages.value.filter((m) => !m.read).length)
+// 消息总数（用于分页）
+const messagesTotal = computed(() => {
+	return messageStore.getMessages({
+		page: messagesPage.value,
+		pageSize: messagesPageSize.value,
+		type: currentMessageType.value === 'all' ? null : currentMessageType.value
+	}).total
+})
+
+// 未读消息数量
+const messageCount = computed(() => messageStore.unreadCount)
 
 // 任务数据
 const tasks = ref([
@@ -180,8 +247,45 @@ const showSearch = () => {
 
 // 清除消息
 const clearMessages = () => {
-	messages.value = []
-	message.success(t('common.cleared'))
+	Modal.confirm({
+		title: t('common.confirmClear'),
+		content: t('common.confirmClearMessages'),
+		okText: t('common.confirm'),
+		cancelText: t('common.cancel'),
+		onOk: () => {
+			messageStore.clearAll()
+			message.success(t('common.cleared'))
+		},
+	})
+}
+
+// 标记消息为已读
+const handleMessageRead = (msg) => {
+	if (!msg.read) {
+		messageStore.markAsRead(msg.id)
+	}
+}
+
+// 标记所有消息为已读
+const markAllAsRead = () => {
+	messageStore.markAllAsRead()
+	message.success(t('common.markedAsRead'))
+}
+
+// 删除消息
+const handleDeleteMessage = (msgId) => {
+	messageStore.removeMessage(msgId)
+}
+
+// 切换消息类型
+const changeMessageType = (type) => {
+	currentMessageType.value = type
+	messagesPage.value = 1
+}
+
+// 分页变化
+const handleMessagePageChange = (page) => {
+	messagesPage.value = page
 }
 
 // 显示任务抽屉
@@ -318,26 +422,145 @@ const handleLogout = () => {
 	}
 
 	.dropdown-card {
-		width: 320px;
-		max-height: 400px;
-		overflow: auto;
+		width: 380px;
+		max-height: 500px;
+		display: flex;
+		flex-direction: column;
 
 		:deep(.ant-card-head) {
-			padding: 12px 16px;
+			padding: 8px 16px;
 			min-height: auto;
+			border-bottom: 1px solid #f0f0f0;
+
+			.ant-card-head-title {
+				padding: 0;
+				width: 100%;
+			}
 		}
 
 		:deep(.ant-card-body) {
-			padding: 12px 16px;
-			max-height: 320px;
-			overflow-y: auto;
+			padding: 0;
+			flex: 1;
+			overflow: hidden;
+			display: flex;
+			flex-direction: column;
 		}
 	}
 
-	.message-list,
-	.task-list {
+	.message-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		font-size: 14px;
+		font-weight: 500;
+	}
 
-		.message-item,
+	.message-tabs {
+		padding: 8px 16px;
+		border-bottom: 1px solid #f0f0f0;
+
+		:deep(.ant-tabs) {
+			.ant-tabs-nav {
+				margin-bottom: 0;
+			}
+
+			.ant-tabs-tab {
+				padding: 4px 8px;
+				margin: 0 8px;
+				font-size: 13px;
+			}
+		}
+	}
+
+	.message-list {
+		flex: 1;
+		overflow-y: auto;
+		padding: 8px 0;
+
+		.message-item {
+			padding: 12px 16px;
+			border-bottom: 1px solid #f0f0f0;
+			position: relative;
+			cursor: pointer;
+			transition: background-color 0.2s;
+
+			&:hover {
+				background-color: #f5f5f5;
+			}
+
+			&:last-child {
+				border-bottom: none;
+			}
+
+			&.unread {
+				background-color: rgba(24, 144, 255, 0.04);
+				padding-left: 12px;
+				margin-left: 4px;
+				border-radius: 4px;
+				border-left: 3px solid #1890ff;
+
+				&:hover {
+					background-color: rgba(24, 144, 255, 0.08);
+				}
+			}
+		}
+
+		.message-content {
+			flex: 1;
+			margin-right: 24px;
+
+			.message-title {
+				font-size: 14px;
+				color: #333;
+				font-weight: 500;
+				margin-bottom: 4px;
+				line-height: 1.4;
+			}
+
+			.message-content-text {
+				font-size: 13px;
+				color: #666;
+				margin-bottom: 6px;
+				line-height: 1.4;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+			}
+
+			.message-time {
+				font-size: 12px;
+				color: #999;
+			}
+		}
+
+		.delete-btn {
+			position: absolute;
+			top: 12px;
+			right: 12px;
+			opacity: 0;
+			transition: opacity 0.2s;
+
+			&:hover {
+				opacity: 1 !important;
+			}
+		}
+
+		.message-item:hover .delete-btn {
+			opacity: 1;
+		}
+	}
+
+	.message-pagination {
+		padding: 8px 16px;
+		border-top: 1px solid #f0f0f0;
+		display: flex;
+		justify-content: center;
+	}
+
+	.task-list {
 		.task-item {
 			padding: 10px 0;
 			border-bottom: 1px solid #f0f0f0;
@@ -347,30 +570,7 @@ const handleLogout = () => {
 				border-bottom: none;
 			}
 
-			&.unread {
-				background-color: rgba(24, 144, 255, 0.04);
-				padding: 10px;
-				margin: 0 -10px;
-				border-radius: 4px;
-			}
-		}
-
-		.message-content {
-			.message-title {
-				font-size: 14px;
-				color: #333;
-				margin-bottom: 4px;
-				line-height: 1.4;
-			}
-
-			.message-time {
-				font-size: 12px;
-				color: #999;
-			}
-		}
-
-		.task-item {
-			.completed {
+			&.completed {
 				text-decoration: line-through;
 				color: #999;
 			}