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

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

src/client/data/initialize.ts

@@ -20,6 +20,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { check } from '@tauri-apps/plugin-updater';
 import { relaunch } from '@tauri-apps/plugin-process';
 import { useDanmakuWindow } from "../store/useDanmakuWindow";
+import { getAllWebviewWindows } from "@tauri-apps/api/webviewWindow";
 
 const accountInfo = useAccount();
 
@@ -117,6 +118,23 @@ export async function initAll(isOnBoot: boolean) {
 
   appWindow.setMinSize(new PhysicalSize(720, 480));
 
+  getAllWebviewWindows().then(async (windows) => {
+    const w = windows.find((win) => win.label === 'danmaku-window')
+    if (w) {
+      const useWindow = useDanmakuWindow();
+      useWindow.init();
+
+      if ((useWindow.emojiData?.updateAt ?? 0) < Date.now() - 1000 * 60 * 60 * 24) {
+        await useWindow.getEmojiData();
+      }
+      if (await w.isVisible()) {
+        //useWindow.isDanmakuWindowOpen = true;
+
+        console.log('弹幕窗口已打开');
+      }
+    }
+  });
+
   // 监听f12事件
   if (!isDev) {
     window.addEventListener('keydown', (event) => {
@@ -135,7 +153,7 @@ export function OnClientUnmounted() {
   }
 
   tray.close();
-  useDanmakuWindow().closeWindow()
+  //useDanmakuWindow().closeWindow();
 }
 
 async function checkUpdate() {