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

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

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "bunx --bun vite",
     "build": "vite build",
-    "lint": "vite lint"
+    "lint": "vite lint",
+    "knip": "knip"
   },
   "dependencies": {
     "@antfu/ni": "^24.3.0",
@@ -53,6 +54,7 @@
     "mitt": "^3.0.1",
     "monaco-editor": "^0.52.2",
     "music-metadata-browser": "^2.5.11",
+    "nanoid": "^5.1.5",
     "oxlint": "^0.16.2",
     "peerjs": "^1.5.4",
     "pinia": "^3.0.1",
@@ -83,6 +85,7 @@
     "@types/bun": "^1.2.5",
     "@types/eslint": "^9.6.1",
     "@types/file-saver": "^2.0.7",
+    "@types/node": "^22.14.1",
     "@types/obs-studio": "^2.17.2",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/parser": "^8.27.0",
@@ -93,9 +96,10 @@
     "eslint": "^9.23.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-vue": "^10.0.0",
+    "knip": "^5.50.4",
     "naive-ui": "^2.41.0",
     "stylus": "^0.64.0",
-    "typescript": "^5.8.2",
+    "typescript": "^5.8.3",
     "vue-vine": "^0.3.19"
   }
 }