feat(ui): 完善弹幕详情全格式导出、来源操作与内容筛选 (huangxd-#433)

- 支持选择后端全部弹幕格式导出，正确处理 JSON、XML 与二进制响应
- 自动和手动匹配结果均透传并展示来源地址，提供复制与打开操作
- 增加弹幕内容关键词搜索，并可与滚动、顶部、底部类型筛选组合使用
- 将首次加载及每次加载更多数量从 100 调整为 500
- 补充桌面端与移动端响应式布局，避免控件挤压和横向溢出

Author: lilixu3

danmu_api/apis/dandan-api.js

@@ -2057,7 +2057,8 @@ export async function matchAnime(url, req, clientIp) {
           "type": resAnime.type,
           "typeDescription": resAnime.typeDescription,
           "shift": 0,
-          "imageUrl": resAnime.imageUrl
+          "imageUrl": resAnime.imageUrl,
+          "url": resEpisode.url || ""
         })
       ]
     }

danmu_api/models/dandan-model.js

@@ -82,7 +82,7 @@ class Link {
 // =====================
 export class AnimeMatch {
   constructor({ episodeId = 10001, animeId = 111, animeTitle = "", episodeTitle = "",
-                type = "", typeDescription = "", shift = 1, imageUrl = "" } = {}) {
+                type = "", typeDescription = "", shift = 1, imageUrl = "", url = "" } = {}) {
     // ---- 类型检查 ----
     validateType(episodeId, "number");
     validateType(animeId, "number");
@@ -92,9 +92,10 @@ export class AnimeMatch {
     validateType(typeDescription, "string");
     validateType(shift, "number");
     validateType(imageUrl, "string");
+    validateType(url, "string");
 
     // 直接解构并赋值给 this
-    Object.assign(this, { episodeId, animeId, animeTitle, episodeTitle, type, typeDescription, shift, imageUrl });
+    Object.assign(this, { episodeId, animeId, animeTitle, episodeTitle, type, typeDescription, shift, imageUrl, url });
   }
 
   // ---- 静态方法：从 JSON 创建 User 对象 ----

danmu_api/ui/README.md

@@ -82,7 +82,7 @@ UI 系统需要通过在 URL 中添加 TOKEN 来访问，以确保安全性：
 - 手动匹配测试：搜索动漫 → 选择番剧 → 选择剧集 → 获取弹幕
 - 弹幕统计：弹幕数、时长、高能时刻、平均密度、匹配时长、类型分布
 - 弹幕热力图：按时间段可视化弹幕密度分布
-- 弹幕列表：支持全部/滚动/顶部/底部过滤，显示颜色和类型标签，懒加载每次100条
+- 弹幕列表：支持全部/滚动/顶部/底部过滤，显示颜色和类型标签，首次加载及每次加载更多500条
 - 导出功能：支持导出JSON和XML格式弹幕文件
 - 时长处理：优先请求 `/api/v2/comment/:commentId?format=json&duration=true` 返回的 `videoDuration`，没有真实时长时再回退到尾部裁剪算法
 - 视图导航优化：搜索结果/剧集详情/弹幕详情逐级切换，带返回按钮和加载动画

danmu_api/ui/css/components.css.js

@@ -1832,6 +1832,25 @@ body.modal-open {
 
 .danmu-filter-tabs::-webkit-scrollbar { display: none; }
 
+.danmu-list-tools {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+}
+
+.danmu-search {
+    flex: 1 1 260px;
+    min-width: 0;
+    max-width: 420px;
+}
+
+.danmu-search-status {
+    color: var(--theme-muted);
+    font-size: 12px;
+    white-space: nowrap;
+}
+
 .danmu-filter-tab {
     flex: 0 0 auto;
     display: inline-flex;
@@ -2034,6 +2053,109 @@ body.modal-open {
     display: flex;
     gap: 6px;
     margin-left: auto;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.danmu-export-select {
+    background-color: var(--theme-panel-strong);
+    color: var(--theme-text);
+    border: 1px solid var(--theme-border);
+    border-radius: var(--app-radius-btn);
+    padding: 5px 12px;
+    font-size: 12px;
+    line-height: 1.4;
+    max-width: 220px;
+    cursor: pointer;
+}
+
+.danmu-export-select:hover {
+    border-color: var(--theme-accent);
+}
+
+.danmu-export-select:focus-visible {
+    outline: 2px solid var(--theme-accent);
+    outline-offset: 2px;
+}
+
+.danmu-source-url {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 14px;
+    padding: 9px 10px;
+    border: 1px solid var(--theme-border);
+    border-radius: var(--app-radius-card-sm);
+    background: var(--theme-panel-bg);
+}
+
+.danmu-source-url-label {
+    color: var(--theme-muted);
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.danmu-source-url-value {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--theme-text);
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    user-select: text;
+}
+
+.danmu-source-url-actions {
+    display: flex;
+    gap: 6px;
+}
+
+.danmu-source-url-actions .btn {
+    flex: 0 0 auto;
+    white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+    .danmu-list-tools {
+        flex-wrap: wrap;
+    }
+
+    .preview-search.danmu-search {
+        order: 0;
+        flex: 1 1 100%;
+        width: 100%;
+        max-width: none;
+    }
+
+    .danmu-search-status {
+        order: 1;
+        margin-left: auto;
+    }
+
+    .danmu-export-btns {
+        flex: 1 1 0;
+        min-width: 0;
+        flex-wrap: nowrap;
+    }
+
+    .danmu-export-select {
+        flex: 1 1 160px;
+        max-width: none;
+        min-width: 0;
+    }
+
+    .danmu-export-btns .btn {
+        flex: 0 0 auto;
+        white-space: nowrap;
+    }
+
+    .danmu-result-toolbar .btn-back {
+        flex: 0 0 auto;
+        white-space: nowrap;
+    }
 }
 
 /* ============ 颜色池配置 ============ */