fix(ui): UI 细节与响应式优化 (#440)

* fix(ui): 七项细节打磨 + 两项响应式优化

- 配置错误 banner 迁移至主题变量，支持暗浅色切换
- custom-alert 访问方式前换行，长 URL 添加 word-break 防溢出
- applyInputFeedback 移除 focus() 避免快捷填充时视点跳转
- map-remove-btn hover rotate→translateY，修复删除按钮旋转
- 手动匹配收藏按钮移至搜索按钮左侧
- episode-item flex 布局+hover 背景+左边框 accent，改善辨识度
- 弹幕词库新增 @wade6716，「大家陪你看」→「弹幕陪你看」
- 响应式：搜索栏手机端输入独占上行、收藏搜索下行
- 响应式：剧集按钮三段宽度 PC:120px、平板:160px、手机:100px

* fix(ui): 关闭移动端点按高亮以避免默认蓝色闪现

根因：移动端点击任意可点元素出现的蓝色方框/闪现来自浏览器默认的 -webkit-tap-highlight-color（点按高亮），属 WebKit/Blink 触摸专属机制，PC 端不触发，故表现为仅手机端出现。项目此前未设置该属性，一直沿用 UA 默认蓝色高亮。

该高亮并非无障碍焦点轮廓：键盘焦点由项目既有 :focus-visible 规则提供，仅键盘聚焦生效、鼠标/触摸点按不触发，PC 与手机行为一致；移除点按高亮不会损害键盘导航。

修复：在全局重置的 * 选择器中加入 -webkit-tap-highlight-color: transparent，一次性覆盖所有可点元素。按钮自身已具备 :active 按压反馈（.btn:active / .btn-primary:active / .nav-btn:active / .number-btn:active），触摸按压反馈保留。

* fix(ui): 修复 customAlert 使用 innerHTML 导致的 XSS 漏洞

customAlert 此前通过 messageElement.innerHTML = message.replace(/\n/g, '<br>') 渲染提示消息，会执行 message 中的任意 HTML。其调用方大量拼接不可信内容（error.message、接口返回的 result.message、配置校验 message 等），上游或代理响应若含 <script> 或 <img onerror> 即触发 XSS，可窃取管理页 ADMIN_TOKEN 与 localStorage。

修复方式：改用 messageElement.textContent = message 使 HTML 转义为纯文本；换行需求由 #custom-alert-message 元素的 white-space: pre-line 经 CSS 渲染，与原有 <br> 视觉一致。该元素同时被 customConfirm 复用，两者行为统一。

枚举全部 customAlert/customConfirm 调用点确认：仅含换行符的两条消息（访问方式提示、导入失败项）依赖换行，其余消息均不含换行符，pre-line 对其渲染与 white-space: normal 完全一致，不对其它文字造成负面影响。

* fix: 修复跳转输入框占位符居中、窄屏溢出与字号对齐

手动匹配测试与推送弹幕测试的跳转工具：修复「输入集数」输入框的视觉问题。

- ui/css/components.css.js：.jump-episode-input 新增 max-width:100% 与 min-width:0，使极窄屏下输入框可收缩而不顶出视图；text-align:center 使占位符「输入集数」水平居中。
- 新增 .jump-to-episode > span { font-size:13px }，将「跳转到第」「集」提示文字与输入框字号统一（原继承浏览器默认 16px），整行视觉真正对齐。
- 该 input 类仅挂在两个跳转输入框上，text-align 不影响其他文字或容器。

* fix: 统一跳转输入框提示文字字号实现整行视觉对齐

ui/css/components.css.js：补充 .jump-to-episode > span { font-size:13px }，将「跳转到第」「集」提示文字与输入框字号统一（原继承浏览器默认 16px），整行视觉真正居中。仅此一处规则，其他跳转框改动已在 e5b2c90 推送。

* fix(ui): 最近数据面板分页展示、标题换行与封面防盗链修复

- 最近数据改为分页渲染，默认展示 5 条，底部加载更多按钮逐步展开
- 番剧标题去除单行省略，改为换行完整显示
- 封面由 background-image 改为 img 并加 referrerpolicy="no-referrer" 规避源站防盗链
- 封面 URL 经 escapeHtml 转义以防 XSS

* fix(ui): 子源标题换行与最近数据面板 XSS 修复

- 被合并子源标题去除单行省略，与主标题一致换行完整显示
- 番剧标题、来源名、剧集链接标题统一经 escapeHtml 转义，修复 innerHTML 注入
- 快捷填入按钮由内联 onclick 改为 data-* 属性 + 事件委托，修复 onclick JS 注入

Author: wan0ge

danmu_api/ui/css/base.css.js

@@ -7,6 +7,7 @@ export const baseCssContent = /* css */ `
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent; /* 消除移动端点击时的蓝色框 */
 }
 
 :root {
@@ -403,4 +404,4 @@ body::before {
         font-size: 17px;
     }
 }
-`;
+`;

danmu_api/ui/css/components.css.js

@@ -969,6 +969,44 @@ body.modal-open {
     font-size: 13px;
 }
 
+.error-config-banner {
+    background: var(--theme-panel-strong);
+    border: 1px solid var(--theme-border);
+    padding: 15px;
+    border-radius: var(--app-radius-card-sm);
+    margin-bottom: 20px;
+}
+
+.error-config-title {
+    color: var(--theme-accent);
+    margin-top: 0;
+    font-size: 16px;
+}
+
+.error-config-text {
+    color: var(--theme-muted);
+    margin-bottom: 10px;
+    font-size: 14px;
+}
+
+.error-config-banner input {
+    padding: 8px 10px;
+    border: 1px solid var(--theme-border);
+    border-radius: 8px;
+    background: var(--theme-input-bg);
+    color: var(--theme-text);
+}
+
+.error-config-banner code {
+    background: var(--theme-panel-bg);
+    border: 1px solid var(--theme-border);
+    border-radius: 4px;
+    padding: 0.1em 0.35em;
+    font-size: 0.85em;
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    word-break: break-all;
+}
+
 .close-btn {
     background: var(--theme-panel-strong);
     border: none;
@@ -1955,6 +1993,32 @@ body.modal-open {
     font-weight: 600;
 }
 
+.episode-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    border-radius: 8px;
+    gap: 16px;
+    transition: background 0.15s;
+}
+
+.episode-item:hover {
+    background: var(--theme-panel-bg);
+    box-shadow: inset 3px 0 0 var(--theme-accent);
+}
+
+.episode-item-content {
+    min-width: 0;
+    font-size: 14px;
+    color: var(--theme-text);
+}
+
+.episode-item .btn {
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
 .danmu-mode-scroll { background: rgba(94, 196, 219, 0.15); color: #3aafc8; }
 .danmu-mode-top { background: rgba(224, 112, 122, 0.15); color: #d4626c; }
 .danmu-mode-bottom { background: rgba(82, 166, 125, 0.15); color: #459670; }
@@ -1987,12 +2051,19 @@ body.modal-open {
     border: 1px solid var(--theme-border);
 }
 
+.jump-to-episode > span {
+    font-size: 13px;
+}
+
 .jump-episode-input {
     padding: 7px 12px;
     width: 110px;
+    max-width: 100%;
+    min-width: 0;
     border: 1px solid var(--theme-border);
     border-radius: var(--app-radius-input);
     font-size: 13px;
+    text-align: center;
     background: var(--theme-input-bg);
     color: var(--theme-text);
 }
@@ -2522,6 +2593,11 @@ body[data-theme$="-dark"] .heatmap-bar {
     gap: 10px;
 }
 
+.recent-data-load-more {
+    width: 100%;
+    margin-top: 10px;
+}
+
 .anime-cache-card {
     background: var(--theme-container-bg);
     border: 1px solid var(--theme-border);
@@ -2545,8 +2621,7 @@ body[data-theme$="-dark"] .heatmap-bar {
     width: 56px;
     height: 76px;
     border-radius: 8px;
-    background-size: cover;
-    background-position: center;
+    object-fit: cover;
     background-color: var(--theme-panel-strong);
     flex-shrink: 0;
 }
@@ -2561,9 +2636,7 @@ body[data-theme$="-dark"] .heatmap-bar {
     font-weight: 700;
     color: var(--theme-text);
     margin-bottom: 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow-wrap: break-word;
 }
 
 .anime-cache-meta {
@@ -2593,8 +2666,7 @@ body[data-theme$="-dark"] .heatmap-bar {
     width: 36px;
     height: 48px;
     border-radius: 6px;
-    background-size: cover;
-    background-position: center;
+    object-fit: cover;
     background-color: var(--theme-panel-strong);
     flex-shrink: 0;
 }
@@ -2608,9 +2680,7 @@ body[data-theme$="-dark"] .heatmap-bar {
     font-size: 12px;
     font-weight: 600;
     color: var(--theme-text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow-wrap: break-word;
 }
 
 .anime-cache-child-actions {

danmu_api/ui/css/forms.css.js

@@ -540,7 +540,7 @@ input:checked + .slider:before {
     transition: transform 0.22s var(--app-ease-smooth);
 }
 .map-remove-btn:hover {
-    transform: rotate(90deg);
+    transform: translateY(-1px);
 }
 
 .map-item-template {

danmu_api/ui/css/responsive.css.js

@@ -238,4 +238,48 @@ export const responsiveCssContent = /* css */ `
         border-radius: 16px;
     }
 }
+
+.search-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 5px;
+    flex-wrap: wrap;
+}
+
+/* 手机端：输入框独占第一行，收藏和搜索按钮并排 */
+@media (max-width: 500px) {
+    .search-actions input {
+        flex-basis: 100%;
+        min-width: 100%;
+        order: 1;
+    }
+    .search-actions .favorite-action-btn {
+        flex: 1;
+        order: 2;
+    }
+    .search-actions #manual-search-btn {
+        flex: 1;
+        order: 3;
+    }
+}
+
+/* 剧集操作按钮：PC 窄 120px、平板适中 160px、手机窄 100px */
+.episode-item .btn,
+.jump-episode-btn {
+    max-width: 120px;
+}
+
+@media (min-width: 501px) and (max-width: 768px) {
+    .episode-item .btn,
+    .jump-episode-btn {
+        max-width: 160px;
+    }
+}
+
+@media (max-width: 500px) {
+    .episode-item .btn,
+    .jump-episode-btn {
+        max-width: 100px;
+    }
+}
 `;

danmu_api/ui/js/main.js

@@ -8,7 +8,7 @@ function createCustomAlert() {
     }
 
     // 创建弹窗HTML元素
-    const alertHTML = '<div class="modal" id="custom-alert-overlay"><div class="modal-content" id="custom-alert-content"><div class="modal-header"><h3 id="custom-alert-title">提示</h3><button class="close-btn" id="custom-alert-close">&times;</button></div><div class="modal-body"><p id="custom-alert-message"></p></div><div class="modal-footer"><button class="btn btn-primary" id="custom-alert-confirm">确定</button></div></div></div>';
+    const alertHTML = '<div class="modal" id="custom-alert-overlay"><div class="modal-content" id="custom-alert-content"><div class="modal-header"><h3 id="custom-alert-title">提示</h3><button class="close-btn" id="custom-alert-close">&times;</button></div><div class="modal-body"><p id="custom-alert-message" style="word-break: break-all; white-space: pre-line;"></p></div><div class="modal-footer"><button class="btn btn-primary" id="custom-alert-confirm">确定</button></div></div></div>';
 
     // 添加到body
     document.body.insertAdjacentHTML('beforeend', alertHTML);
@@ -49,7 +49,7 @@ function customAlert(message, title = '提示') {
 
     // 设置标题和消息
     titleElement.textContent = title;
-    messageElement.textContent = message;
+    messageElement.textContent = message; // 使用 textContent 避免 message 中的 HTML 被解析执行；换行由元素 CSS white-space: pre-line 渲染
 
     // 显示弹窗
     overlay.classList.add('active');
@@ -717,9 +717,9 @@ const DANMAKU_DICT = [
     '@huangxd-', '@wan0ge', '@woleigedouer', '@Wo254992', '@lilixu3',
     '@Celestials316', '@dyphire', '@piaoyizy', '@xiaoQQya', '@liixing',
     '@goodcommunication', '@Mr-Quin', '@chason-zhao', '@DemoJameson',
-    '@rinnein', '@Lampon', '@zcw199604', 'Mashiro',
+    '@rinnein', '@Lampon', '@zcw199604', 'Mashiro', '@wade6716',
     '请合理使用', '公益服务请适当调高缓存避免滥用',
-    '有弹幕才有氛围~', '大家陪你看', 'LogVar可能会倒闭但绝对不会变质',
+    '有弹幕才有氛围~', '弹幕陪你看', 'LogVar可能会倒闭但绝对不会变质',
 ];
 
 // 共享弹幕发射间隔 0.5~1.5s