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

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

src/data/DanmakuClients/BaseDanmakuClient.ts

@@ -152,8 +152,8 @@ export default abstract class BaseDanmakuClient {
       console.warn(`[${this.type}] 弹幕客户端未被启动, 忽略停止操作`);
     }
     // 注意: 清空所有事件监听器
-    this.eventsAsModel = this.createEmptyEventModelListeners();
-    this.eventsRaw = this.createEmptyRawEventlisteners();
+    //this.eventsAsModel = this.createEmptyEventModelListeners();
+    //this.eventsRaw = this.createEmptyRawEventlisteners();
   }
 
   /**

src/data/DanmakuClients/DirectClient.ts

@@ -53,9 +53,8 @@ export default class DirectClient extends BaseDanmakuClient {
     }
   }
   public onDanmaku(command: any): void {
-    const data = command.data;
-    const info = data.info;
-    this.eventsRaw?.danmaku?.forEach((d) => { d(data, command); });
+    const info = command.info;
+    this.eventsRaw?.danmaku?.forEach((d) => { d(info, command); });
     this.eventsAsModel.danmaku?.forEach((d) => {
       d(
         {
@@ -89,7 +88,7 @@ export default class DirectClient extends BaseDanmakuClient {
           name: data.uname,
           uid: data.uid,
           msg: data.giftName,
-          price: data.giftId,
+          price: data.price / 1000,
           num: data.num,
           time: Date.now(),
           guard_level: data.guard_level,
@@ -171,7 +170,7 @@ export default class DirectClient extends BaseDanmakuClient {
           fans_medal_level: data.fans_medal?.medal_level || 0,
           fans_medal_name: data.fans_medal?.medal_name || '',
           fans_medal_wearing_status: false,
-          uface: getUserAvatarUrl(data.uid),
+          uface: AVATAR_URL + data.uid,
           open_id: '',
           ouid: GuidUtils.numToGuid(data.uid)
         },

src/data/UpdateNote.ts

@@ -4,6 +4,23 @@ import { VNode } from "vue";
 import { FETCH_API } from "./constants";
 
 export const updateNotes: updateNoteType[] = [
+  {
+    ver: 3,
+    date: '2025.4.15',
+    items: [
+      {
+        type: 'new',
+        title: 'Tauri 客户端新增弹幕机功能',
+        content: [
+          [
+            'Tauri 客户端新增弹幕机功能, 可以在自己电脑上显示弹幕礼物等. ',
+            '客户端需更新至0.1.2版本, 重启客户端后会自动更新',
+            () => h(NImage, { src: 'https://pan.suki.club/d/vtsuru/imgur/81d76a89-96b8-44e9-be79-6caaa5741f64.png', width: 200 }),
+          ]
+        ],
+      },
+    ]
+  },
   {
     ver: 2,
     date: '2025.4.8',