feat: 重构弹幕组件和工具以改进结构和性能

- 更新 `useWebFetcher.ts`：将事件监听器从 `onEvent` 更改为 `on`，并修改了断开连接处理逻辑，增加了 30 秒后自动重连的功能。
- 增强 `MessageRender.vue`：为 `paidMessages` 使用 v-model，并将生命周期钩子更新为 `beforeUnmount`。
- 引入新组件 `ClientDanmakuItem.vue`：用于渲染具有卡片和文本样式的弹幕条目。
- 创建 `BaseDanmakuItem.vue`：封装弹幕条目的通用逻辑，包括表情符号解析和显示逻辑。
- 添加 `CardStyleDanmakuItem.vue` 和 `TextStyleDanmakuItem.vue`：用于实现不同显示样式的弹幕消息。
- 开发 `danmakuUtils.ts`：提供用于弹幕条目属性和样式的工具函数。
- 改进弹幕组件的 CSS 样式：确保外观统一和响应式布局。

src/store/useDanmakuClient.ts

@@ -173,8 +173,10 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
    */
   async function initClient(client: BaseDanmakuClient) { // 返回 Promise<boolean> 表示最终是否成功
     // 防止重复初始化或在非等待状态下初始化
-    if (isInitializing || state.value !== 'waiting') {
-      console.warn(`[DanmakuClient] 初始化尝试被阻止。 isInitializing: ${isInitializing}, state: ${state.value}`);
+    if (isInitializing) {
+      while (isInitializing) {
+        await new Promise((resolve) => setTimeout(resolve, 100)); // 等待初始化完成
+      }
       return useDanmakuClient(); // 如果已连接，则视为“成功”
     }
 
@@ -217,7 +219,7 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
           authInfo.value = danmakuClient.value instanceof OpenLiveClient ? danmakuClient.value.roomAuthInfo : undefined;
           state.value = 'connected';
           // 将 Store 中存储的监听器 (来自 onEvent) 附加到新连接的客户端的 eventsAsModel
-          console.log('[DanmakuClient] 初始化成功。');
+          console.log('[DanmakuClient] 初始化成功');
           connectSuccess = true;
           return true; // 连接成功, 退出重试循环
         } else {
@@ -293,7 +295,7 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
 
     if (danmakuClient.value) {
       await disposeClientInstance(danmakuClient.value);
-      danmakuClient.value = undefined; // 解除对旧客户端实例的引用
+      //danmakuClient.value = undefined; // 保留, 用户再次获取event
     }
     state.value = 'waiting'; // 重置状态为等待
     authInfo.value = undefined; // 清理认证信息

src/store/useWebFetcher.ts

@@ -186,11 +186,10 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
         return { success: false, message: '未提供弹幕客户端认证信息' };
       }
       await client.initDirect(directConnectInfo);
-      return { success: true, message: '弹幕客户端已启动' };
     }
 
     // 监听所有事件，用于处理和转发
-    client?.onEvent('all', onGetDanmakus);
+    client?.on('all', onGetDanmakus);
 
     if (client.connected) {
       console.log(prefix.value + '弹幕客户端连接成功, 开始监听弹幕');
@@ -262,7 +261,12 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
     connection.on('Disconnect', (reason: unknown) => {
       console.log(prefix.value + '被服务器断开连接: ' + reason);
       disconnectedByServer = true; // 标记是服务器主动断开
-      Stop(); // 服务器要求断开，调用 Stop 清理所有资源
+      window.$message.error(`被服务器要求断开连接: ${reason}, 为保证可用性, 30秒后将自动重启`);
+      //Stop(); // 服务器要求断开，调用 Stop 清理所有资源
+      setTimeout(() => {
+        console.log(prefix.value + '尝试重启...');
+        connectSignalR(); // 30秒后尝试重启
+      }, 30 * 1000); // 30秒后自动重启
     });
     connection.on('Request', async (url: string, method: string, body: string, useCookie: boolean) => onRequest(url, method, body, useCookie));
     connection.on('Notification', (type: string, data: any) => { onReceivedNotification(type, data); });