mirror of
https://github.com/ZeroCatDev/Classworks.git
synced 2025-12-07 21:13:11 +00:00
删除不需要的文件
This commit is contained in:
Sunwuyuan
parent
6c990bd8e4
commit
fb20f8a3ea
@ -1,435 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-container fluid>
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-card>
|
|
||||||
<v-card-title>
|
|
||||||
<v-icon class="mr-2">mdi-transit-connection-variant</v-icon>
|
|
||||||
Socket.IO 新事件系统测试
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<p class="text-body-2 mb-4">
|
|
||||||
此页面用于测试新的通用事件转发系统，支持聊天、KV变化等各种事件类型。
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- 连接状态 -->
|
|
||||||
<v-alert
|
|
||||||
:type="connected ? 'success' : 'error'"
|
|
||||||
:text="`连接状态: ${connected ? '已连接' : '未连接'} | Socket ID: ${socketId || '-'}`"
|
|
||||||
class="mb-4"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 发送测试事件 -->
|
|
||||||
<v-card outlined class="mb-4">
|
|
||||||
<v-card-title class="text-h6">发送测试事件</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-select
|
|
||||||
v-model="testEventType"
|
|
||||||
:items="eventTypes"
|
|
||||||
label="事件类型"
|
|
||||||
outlined
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-text-field
|
|
||||||
v-model="testContent"
|
|
||||||
label="事件内容"
|
|
||||||
outlined
|
|
||||||
placeholder="输入测试内容"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<v-btn
|
|
||||||
:disabled="!testEventType || !testContent.trim()"
|
|
||||||
color="primary"
|
|
||||||
@click="sendTestEvent"
|
|
||||||
>
|
|
||||||
<v-icon start>mdi-send</v-icon>
|
|
||||||
发送测试事件
|
|
||||||
</v-btn>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<!-- 事件统计 -->
|
|
||||||
<v-row class="mb-4">
|
|
||||||
<v-col cols="12" md="3">
|
|
||||||
<v-card color="primary" dark>
|
|
||||||
<v-card-text>
|
|
||||||
<div class="text-h4">{{ eventStats.total }}</div>
|
|
||||||
<div>总事件数</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" md="3">
|
|
||||||
<v-card color="success" dark>
|
|
||||||
<v-card-text>
|
|
||||||
<div class="text-h4">{{ eventStats.chat }}</div>
|
|
||||||
<div>聊天事件</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" md="3">
|
|
||||||
<v-card color="info" dark>
|
|
||||||
<v-card-text>
|
|
||||||
<div class="text-h4">{{ eventStats.kvChanged }}</div>
|
|
||||||
<div>KV变化事件</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" md="3">
|
|
||||||
<v-card color="warning" dark>
|
|
||||||
<v-card-text>
|
|
||||||
<div class="text-h4">{{ eventStats.other }}</div>
|
|
||||||
<div>其他事件</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- 实时事件日志 -->
|
|
||||||
<v-card outlined>
|
|
||||||
<v-card-title>
|
|
||||||
实时事件日志
|
|
||||||
<v-spacer/>
|
|
||||||
<v-btn
|
|
||||||
size="small"
|
|
||||||
variant="text"
|
|
||||||
@click="clearEvents"
|
|
||||||
>
|
|
||||||
<v-icon>mdi-delete</v-icon>
|
|
||||||
清空
|
|
||||||
</v-btn>
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<div class="event-log">
|
|
||||||
<div
|
|
||||||
v-for="(event, index) in recentEvents"
|
|
||||||
:key="index"
|
|
||||||
class="event-item mb-3"
|
|
||||||
>
|
|
||||||
<v-card
|
|
||||||
:color="getEventColor(event.type)"
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
<v-card-text class="pa-3">
|
|
||||||
<div class="d-flex align-center mb-2">
|
|
||||||
<v-chip
|
|
||||||
:color="getEventColor(event.type)"
|
|
||||||
size="small"
|
|
||||||
variant="flat"
|
|
||||||
>
|
|
||||||
{{ event.type }}
|
|
||||||
</v-chip>
|
|
||||||
<v-spacer/>
|
|
||||||
<span class="text-caption">{{ formatTime(event.timestamp) }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="event.senderInfo" class="mb-2">
|
|
||||||
<strong>发送者:</strong> {{ formatDeviceInfo(event.senderInfo) }}
|
|
||||||
<v-chip
|
|
||||||
v-if="isRealtimeEvent(event)"
|
|
||||||
color="purple"
|
|
||||||
size="x-small"
|
|
||||||
class="ml-2"
|
|
||||||
>
|
|
||||||
实时同步
|
|
||||||
</v-chip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-2">
|
|
||||||
<strong>内容:</strong>
|
|
||||||
</div>
|
|
||||||
<pre class="text-caption">{{ JSON.stringify(event.content, null, 2) }}</pre>
|
|
||||||
|
|
||||||
<div v-if="event.eventId" class="text-caption mt-2 text-grey">
|
|
||||||
事件ID: {{ event.eventId }}
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="recentEvents.length === 0" class="text-center text-grey pa-4">
|
|
||||||
暂无事件
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue'
|
|
||||||
import { getSocket, on as socketOn, joinToken } from '@/utils/socketClient'
|
|
||||||
import {
|
|
||||||
sendEvent,
|
|
||||||
DeviceEventTypes,
|
|
||||||
formatDeviceInfo,
|
|
||||||
isRealtimeEvent,
|
|
||||||
createDeviceEventHandler,
|
|
||||||
sendChatMessage
|
|
||||||
} from '@/utils/deviceEvents'
|
|
||||||
import { getSetting } from '@/utils/settings'
|
|
||||||
|
|
||||||
// 响应式数据
|
|
||||||
const connected = ref(false)
|
|
||||||
const socketId = ref('')
|
|
||||||
const testEventType = ref('chat')
|
|
||||||
const testContent = ref('')
|
|
||||||
const recentEvents = ref([])
|
|
||||||
|
|
||||||
// 事件统计
|
|
||||||
const eventStats = reactive({
|
|
||||||
total: 0,
|
|
||||||
chat: 0,
|
|
||||||
kvChanged: 0,
|
|
||||||
other: 0
|
|
||||||
})
|
|
||||||
|
|
||||||
// 事件类型选项
|
|
||||||
const eventTypes = [
|
|
||||||
{ title: '聊天消息', value: 'chat' },
|
|
||||||
{ title: 'KV变化', value: 'kv-key-changed' },
|
|
||||||
{ title: '自定义事件', value: 'custom-event' }
|
|
||||||
]
|
|
||||||
|
|
||||||
// 清理函数
|
|
||||||
let cleanupFunctions = []
|
|
||||||
|
|
||||||
// 计算属性
|
|
||||||
const formattedEvents = computed(() => {
|
|
||||||
return recentEvents.value.map(event => ({
|
|
||||||
...event,
|
|
||||||
formattedTime: formatTime(event.timestamp),
|
|
||||||
formattedSender: event.senderInfo ? formatDeviceInfo(event.senderInfo) : '未知'
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
|
|
||||||
// 方法
|
|
||||||
function sendTestEvent() {
|
|
||||||
if (!testEventType.value || !testContent.value.trim()) return
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (testEventType.value === 'chat') {
|
|
||||||
// 使用专门的聊天发送函数
|
|
||||||
sendChatMessage(testContent.value)
|
|
||||||
} else {
|
|
||||||
// 使用通用事件发送
|
|
||||||
const content = testEventType.value === 'kv-key-changed' ?
|
|
||||||
{
|
|
||||||
key: 'test-key',
|
|
||||||
action: 'upsert',
|
|
||||||
value: testContent.value
|
|
||||||
} :
|
|
||||||
{ message: testContent.value }
|
|
||||||
|
|
||||||
sendEvent(testEventType.value, content)
|
|
||||||
}
|
|
||||||
|
|
||||||
testContent.value = ''
|
|
||||||
} catch (error) {
|
|
||||||
console.error('发送测试事件失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addEvent(eventData) {
|
|
||||||
recentEvents.value.unshift(eventData)
|
|
||||||
|
|
||||||
// 更新统计
|
|
||||||
eventStats.total++
|
|
||||||
if (eventData.type === DeviceEventTypes.CHAT) {
|
|
||||||
eventStats.chat++
|
|
||||||
} else if (eventData.type === DeviceEventTypes.KV_KEY_CHANGED) {
|
|
||||||
eventStats.kvChanged++
|
|
||||||
} else {
|
|
||||||
eventStats.other++
|
|
||||||
}
|
|
||||||
|
|
||||||
// 限制事件数量
|
|
||||||
if (recentEvents.value.length > 50) {
|
|
||||||
recentEvents.value = recentEvents.value.slice(0, 50)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearEvents() {
|
|
||||||
recentEvents.value = []
|
|
||||||
eventStats.total = 0
|
|
||||||
eventStats.chat = 0
|
|
||||||
eventStats.kvChanged = 0
|
|
||||||
eventStats.other = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
function getEventColor(eventType) {
|
|
||||||
switch (eventType) {
|
|
||||||
case DeviceEventTypes.CHAT:
|
|
||||||
return 'success'
|
|
||||||
case DeviceEventTypes.KV_KEY_CHANGED:
|
|
||||||
return 'info'
|
|
||||||
default:
|
|
||||||
return 'warning'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatTime(timestamp) {
|
|
||||||
try {
|
|
||||||
const date = new Date(timestamp)
|
|
||||||
return date.toLocaleTimeString('zh-CN', {
|
|
||||||
hour12: false,
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
second: '2-digit'
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
return timestamp
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 组件生命周期
|
|
||||||
onMounted(() => {
|
|
||||||
// 初始化 socket 连接
|
|
||||||
const socket = getSocket()
|
|
||||||
connected.value = socket.connected
|
|
||||||
socketId.value = socket.id || ''
|
|
||||||
|
|
||||||
// 监听连接状态
|
|
||||||
socket.on('connect', () => {
|
|
||||||
connected.value = true
|
|
||||||
socketId.value = socket.id || ''
|
|
||||||
})
|
|
||||||
|
|
||||||
socket.on('disconnect', () => {
|
|
||||||
connected.value = false
|
|
||||||
socketId.value = ''
|
|
||||||
})
|
|
||||||
|
|
||||||
// 自动加入 token 频道
|
|
||||||
const token = getSetting('server.kvToken')
|
|
||||||
if (token) {
|
|
||||||
joinToken(token)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听旧格式事件（兼容性）
|
|
||||||
const offLegacyChat = socketOn('chat:message', (msg) => {
|
|
||||||
addEvent({
|
|
||||||
type: 'chat:message',
|
|
||||||
content: msg,
|
|
||||||
timestamp: msg.at || new Date().toISOString(),
|
|
||||||
senderId: msg.senderId,
|
|
||||||
uuid: msg.uuid,
|
|
||||||
eventId: `legacy-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听新的直接聊天事件
|
|
||||||
const offDirectChat = socketOn('chat', (eventData) => {
|
|
||||||
if (eventData && eventData.content) {
|
|
||||||
addEvent({
|
|
||||||
type: 'chat',
|
|
||||||
content: eventData.content,
|
|
||||||
timestamp: eventData.timestamp,
|
|
||||||
eventId: eventData.eventId,
|
|
||||||
senderId: eventData.senderId,
|
|
||||||
senderInfo: eventData.senderInfo
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const offLegacyKv = socketOn('kv-key-changed', (eventData) => {
|
|
||||||
// 新格式：直接事件数据
|
|
||||||
if (eventData.content && eventData.timestamp) {
|
|
||||||
addEvent({
|
|
||||||
type: 'kv-key-changed',
|
|
||||||
content: eventData.content,
|
|
||||||
timestamp: eventData.timestamp,
|
|
||||||
eventId: eventData.eventId,
|
|
||||||
senderId: eventData.senderId,
|
|
||||||
senderInfo: eventData.senderInfo
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
// 旧格式：兼容处理
|
|
||||||
addEvent({
|
|
||||||
type: 'kv-key-changed',
|
|
||||||
content: eventData,
|
|
||||||
timestamp: eventData.updatedAt || new Date().toISOString(),
|
|
||||||
uuid: eventData.uuid,
|
|
||||||
eventId: `legacy-kv-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听新格式设备事件
|
|
||||||
const deviceEventHandler = createDeviceEventHandler({
|
|
||||||
onChat: (chatMsg, originalEvent) => {
|
|
||||||
addEvent(originalEvent)
|
|
||||||
},
|
|
||||||
onKvChanged: (kvMsg, originalEvent) => {
|
|
||||||
addEvent(originalEvent)
|
|
||||||
},
|
|
||||||
onOtherEvent: (eventData) => {
|
|
||||||
addEvent(eventData)
|
|
||||||
},
|
|
||||||
enableLegacySupport: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const offDeviceEvent = socketOn('device-event', deviceEventHandler)
|
|
||||||
|
|
||||||
// 保存清理函数
|
|
||||||
cleanupFunctions = [
|
|
||||||
offLegacyChat,
|
|
||||||
offDirectChat,
|
|
||||||
offLegacyKv,
|
|
||||||
offDeviceEvent
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
// 清理所有事件监听器
|
|
||||||
try {
|
|
||||||
cleanupFunctions.forEach(cleanup => {
|
|
||||||
try {
|
|
||||||
if (typeof cleanup === 'function') {
|
|
||||||
cleanup()
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('事件监听器清理失败:', error)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.error('组件清理失败:', error)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空数据
|
|
||||||
cleanupFunctions = []
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.event-log {
|
|
||||||
max-height: 600px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-item {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-item:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
background: rgba(0,0,0,0.05);
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-all;
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,391 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="urgent-test-page">
|
|
||||||
<v-container>
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-card>
|
|
||||||
<v-card-title>
|
|
||||||
<v-icon class="mr-2">
|
|
||||||
mdi-alert-octagon
|
|
||||||
</v-icon>
|
|
||||||
紧急通知测试页面
|
|
||||||
</v-card-title>
|
|
||||||
|
|
||||||
<v-card-text>
|
|
||||||
<v-form>
|
|
||||||
<v-row>
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="6"
|
|
||||||
>
|
|
||||||
<v-switch
|
|
||||||
v-model="notificationForm.isUrgent"
|
|
||||||
label="加急通知"
|
|
||||||
color="red"
|
|
||||||
inset
|
|
||||||
>
|
|
||||||
<template #prepend>
|
|
||||||
<v-icon :color="notificationForm.isUrgent ? 'red' : 'grey'">
|
|
||||||
{{ notificationForm.isUrgent ? 'mdi-alert-circle' : 'mdi-information' }}
|
|
||||||
</v-icon>
|
|
||||||
</template>
|
|
||||||
</v-switch>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-textarea
|
|
||||||
v-model="notificationForm.message"
|
|
||||||
label="通知内容"
|
|
||||||
outlined
|
|
||||||
rows="3"
|
|
||||||
placeholder="请输入紧急通知的内容..."
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-form>
|
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<v-card-actions class="px-6 pb-6">
|
|
||||||
<v-btn
|
|
||||||
:color="notificationForm.isUrgent ? 'red' : 'blue'"
|
|
||||||
:disabled="!notificationForm.message.trim()"
|
|
||||||
:loading="sending"
|
|
||||||
size="large"
|
|
||||||
variant="elevated"
|
|
||||||
@click="sendNotification"
|
|
||||||
>
|
|
||||||
<v-icon left>
|
|
||||||
{{ notificationForm.isUrgent ? 'mdi-alert-circle' : 'mdi-information' }}
|
|
||||||
</v-icon>
|
|
||||||
{{ notificationForm.isUrgent ? '发送紧急通知' : '发送通知' }}
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
<v-spacer />
|
|
||||||
|
|
||||||
<v-btn
|
|
||||||
color="grey"
|
|
||||||
variant="outlined"
|
|
||||||
@click="resetForm"
|
|
||||||
>
|
|
||||||
重置表单
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- 消息发送历史 -->
|
|
||||||
<v-row class="mt-4">
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-card>
|
|
||||||
<v-card-title>
|
|
||||||
<v-icon class="mr-2">
|
|
||||||
mdi-history
|
|
||||||
</v-icon>
|
|
||||||
消息记录
|
|
||||||
<v-spacer />
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<div
|
|
||||||
v-if="sentMessages.length === 0"
|
|
||||||
class="text-center text-grey py-8"
|
|
||||||
>
|
|
||||||
<v-icon
|
|
||||||
size="64"
|
|
||||||
color="grey-lighten-2"
|
|
||||||
>
|
|
||||||
mdi-message-outline
|
|
||||||
</v-icon>
|
|
||||||
<div class="mt-2">
|
|
||||||
暂无发送记录
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<v-row v-else>
|
|
||||||
<v-col
|
|
||||||
v-for="message in sentMessages.slice().reverse()"
|
|
||||||
:key="message.id"
|
|
||||||
cols="12"
|
|
||||||
md="6"
|
|
||||||
lg="4"
|
|
||||||
>
|
|
||||||
<!-- 主消息卡片 -->
|
|
||||||
<v-card
|
|
||||||
:color="getMainCardColor(message.receipts)"
|
|
||||||
class="mb-2"
|
|
||||||
>
|
|
||||||
<v-card-text>
|
|
||||||
<div class="d-flex align-center mb-2">
|
|
||||||
<span class="font-weight-medium">
|
|
||||||
{{ message.isUrgent ? '紧急通知' : '普通通知' }}
|
|
||||||
</span>
|
|
||||||
<v-spacer />
|
|
||||||
<span class="text-caption font-weight-medium">
|
|
||||||
{{ getReceiptStatus(message.receipts) }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="text-body-2 mb-3"
|
|
||||||
style="max-height: 60px; overflow: hidden;"
|
|
||||||
>
|
|
||||||
{{ message.message }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-caption">
|
|
||||||
<div>发送时间：{{ formatTime(message.timestamp) }}</div>
|
|
||||||
<div>事件ID：{{ message.id }}</div>
|
|
||||||
<div>通知ID：{{ message.notificationId }}</div>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<!-- 设备回执小卡片 -->
|
|
||||||
<div v-if="hasAnyReceipts(message.receipts)">
|
|
||||||
<!-- 已读设备 -->
|
|
||||||
<v-card
|
|
||||||
v-for="device in message.receipts.read"
|
|
||||||
:key="`${device.senderId}-read`"
|
|
||||||
color="success"
|
|
||||||
class="mb-1"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<v-card-text class="pa-2">
|
|
||||||
<div class="align-center">
|
|
||||||
|
|
||||||
<span class="text-body-2 font-weight-medium">{{ device.deviceName }} </span>
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
{{ device.deviceType }}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="text-caption mt-1">
|
|
||||||
已读于 {{ formatDeviceTime(device.timestamp) }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<!-- 已显示设备（排除已读的设备） -->
|
|
||||||
<v-card
|
|
||||||
v-for="device in getDisplayedOnlyDevices(message.receipts)"
|
|
||||||
:key="`${device.senderId}-displayed`"
|
|
||||||
color="info-lighten-4"
|
|
||||||
variant="outlined"
|
|
||||||
class="mb-1"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<v-card-text class="pa-2">
|
|
||||||
<div class="align-center">
|
|
||||||
|
|
||||||
<span class="text-body-2 font-weight-medium">{{ device.deviceName }}</span>
|
|
||||||
<v-spacer />
|
|
||||||
<span class="text-caption text-grey">
|
|
||||||
{{ device.deviceType }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-caption text-grey mt-1">
|
|
||||||
已显示于 {{ formatDeviceTime(device.timestamp) }}
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
|
|
||||||
<ChatWidget />
|
|
||||||
<EventSender ref="eventSender" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ChatWidget from '@/components/ChatWidget.vue'
|
|
||||||
import EventSender from '@/components/EventSender.vue'
|
|
||||||
import { on as socketOn } from '@/utils/socketClient'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UrgentNotificationTest',
|
|
||||||
components: {
|
|
||||||
ChatWidget,
|
|
||||||
EventSender
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sending: false,
|
|
||||||
notificationForm: {
|
|
||||||
isUrgent: false,
|
|
||||||
message: ''
|
|
||||||
},
|
|
||||||
sentMessages: [],
|
|
||||||
receiptCleanup: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.setupEventListeners()
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
this.cleanup()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
generateNotificationId() {
|
|
||||||
// 生成32位随机字符串
|
|
||||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
|
|
||||||
let result = ''
|
|
||||||
for (let i = 0; i < 32; i++) {
|
|
||||||
result += chars.charAt(Math.floor(Math.random() * chars.length))
|
|
||||||
}
|
|
||||||
return result
|
|
||||||
},
|
|
||||||
|
|
||||||
async sendNotification() {
|
|
||||||
if (!this.notificationForm.message.trim()) return
|
|
||||||
|
|
||||||
this.sending = true
|
|
||||||
try {
|
|
||||||
// 生成32位随机通知ID
|
|
||||||
const notificationId = this.generateNotificationId()
|
|
||||||
|
|
||||||
const result = await this.$refs.eventSender.sendNotification(
|
|
||||||
this.notificationForm.message,
|
|
||||||
this.notificationForm.isUrgent,
|
|
||||||
[],
|
|
||||||
{ deviceName: '测试设备', deviceType: 'system', isReadOnly: false },
|
|
||||||
notificationId
|
|
||||||
)
|
|
||||||
|
|
||||||
const eventId = result?.eventId || `msg-${Date.now()}`
|
|
||||||
|
|
||||||
this.sentMessages.push({
|
|
||||||
id: eventId,
|
|
||||||
notificationId: notificationId,
|
|
||||||
message: this.notificationForm.message,
|
|
||||||
isUrgent: this.notificationForm.isUrgent,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
receipts: {
|
|
||||||
displayed: [],
|
|
||||||
read: []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log('通知已发送，事件ID:', eventId, '通知ID:', notificationId)
|
|
||||||
this.resetForm()
|
|
||||||
} catch (error) {
|
|
||||||
console.error('发送通知失败:', error)
|
|
||||||
} finally {
|
|
||||||
this.sending = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
resetForm() {
|
|
||||||
this.notificationForm = {
|
|
||||||
isUrgent: false,
|
|
||||||
message: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setupEventListeners() {
|
|
||||||
// 监听显示回执
|
|
||||||
const cleanup1 = socketOn('notification-displayed', (data) => {
|
|
||||||
console.log('收到显示回执:', data)
|
|
||||||
this.updateReceipt(data, 'displayed')
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听已读回执
|
|
||||||
const cleanup2 = socketOn('notification-read', (data) => {
|
|
||||||
console.log('收到已读回执:', data)
|
|
||||||
this.updateReceipt(data, 'read')
|
|
||||||
})
|
|
||||||
|
|
||||||
this.receiptCleanup.push(cleanup1, cleanup2)
|
|
||||||
},
|
|
||||||
|
|
||||||
updateReceipt(data, type) {
|
|
||||||
const originalEventId = data.originalEventId
|
|
||||||
const notificationId = data.notificationId || data.content?.notificationId
|
|
||||||
|
|
||||||
if (!originalEventId && !notificationId) return
|
|
||||||
|
|
||||||
const message = this.sentMessages.find(msg =>
|
|
||||||
msg.id === originalEventId ||
|
|
||||||
msg.notificationId === notificationId
|
|
||||||
)
|
|
||||||
if (message) {
|
|
||||||
// 使用 senderInfo 中的设备信息，并包含 senderId
|
|
||||||
const deviceInfo = {
|
|
||||||
senderId: data.senderId || 'unknown-sender',
|
|
||||||
deviceName: data.senderInfo?.deviceName || data.deviceInfo?.deviceName || '未知设备',
|
|
||||||
deviceType: data.senderInfo?.deviceType || data.deviceInfo?.deviceType || 'unknown',
|
|
||||||
timestamp: new Date().toISOString()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 避免重复添加相同设备（按 senderId 判断）
|
|
||||||
const exists = message.receipts[type].find(item =>
|
|
||||||
item.senderId === deviceInfo.senderId
|
|
||||||
)
|
|
||||||
|
|
||||||
if (!exists) {
|
|
||||||
message.receipts[type].push(deviceInfo)
|
|
||||||
console.log(`更新${type}回执:`, message.id, deviceInfo)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
cleanup() {
|
|
||||||
this.receiptCleanup.forEach(cleanup => cleanup())
|
|
||||||
this.receiptCleanup = []
|
|
||||||
},
|
|
||||||
|
|
||||||
formatTime(timestamp) {
|
|
||||||
return new Date(timestamp).toLocaleString('zh-CN')
|
|
||||||
},
|
|
||||||
|
|
||||||
getReceiptStatus(receipts) {
|
|
||||||
if (receipts.read.length > 0) return '已读'
|
|
||||||
if (receipts.displayed.length > 0) return '已显示'
|
|
||||||
return '已发送'
|
|
||||||
},
|
|
||||||
|
|
||||||
getReceiptColor(receipts) {
|
|
||||||
if (receipts.read.length > 0) return 'success'
|
|
||||||
if (receipts.displayed.length > 0) return 'info'
|
|
||||||
return 'grey'
|
|
||||||
},
|
|
||||||
|
|
||||||
formatDeviceTime(timestamp) {
|
|
||||||
return new Date(timestamp).toLocaleTimeString('zh-CN')
|
|
||||||
},
|
|
||||||
|
|
||||||
getMainCardColor(receipts) {
|
|
||||||
// 优先显示已读状态（绿色），其次是已显示状态（蓝色）
|
|
||||||
if (receipts.read.length > 0) return 'success'
|
|
||||||
if (receipts.displayed.length > 0) return 'info'
|
|
||||||
return 'grey'
|
|
||||||
},
|
|
||||||
|
|
||||||
hasAnyReceipts(receipts) {
|
|
||||||
return receipts.read.length > 0 || receipts.displayed.length > 0
|
|
||||||
},
|
|
||||||
|
|
||||||
getDisplayedOnlyDevices(receipts) {
|
|
||||||
// 返回只显示未读的设备（按 senderId 排除已读的设备）
|
|
||||||
const readSenderIds = receipts.read.map(device => device.senderId)
|
|
||||||
return receipts.displayed.filter(device =>
|
|
||||||
!readSenderIds.includes(device.senderId)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.gap-1 {
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-history-card .v-chip {
|
|
||||||
margin: 1px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user