From fb20f8a3ea2e172f66d34b71f706a7f51552bff2 Mon Sep 17 00:00:00 2001
From: Sunwuyuan <sun@wuyuan.dev>
Date: Sun, 23 Nov 2025 17:08:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=B8=8D=E9=9C=80=E8=A6=81?=
 =?UTF-8?q?=E7=9A=84=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/socket-events-test.vue | 435 -------------------------------
 src/pages/urgent-test.vue        | 391 ---------------------------
 2 files changed, 826 deletions(-)
 delete mode 100644 src/pages/socket-events-test.vue
 delete mode 100644 src/pages/urgent-test.vue

diff --git a/src/pages/socket-events-test.vue b/src/pages/socket-events-test.vue
deleted file mode 100644
index 5aabe50..0000000
--- a/src/pages/socket-events-test.vue
+++ /dev/null
@@ -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>
diff --git a/src/pages/urgent-test.vue b/src/pages/urgent-test.vue
deleted file mode 100644
index 6bd2235..0000000
--- a/src/pages/urgent-test.vue
+++ /dev/null
@@ -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>