diff --git a/UI_REDESIGN.md b/UI_REDESIGN.md index a2ae10f..e05672d 100644 --- a/UI_REDESIGN.md +++ b/UI_REDESIGN.md @@ -47,3 +47,32 @@ ## 4. 兼容性与上线记录 - **DOM 契约兼容**:保留所有核心配置 ID(`amApi`、`downloadDir`、`localFilePolicy`、`defaultQuality`、`davUrl` 等)以及事件回调机制。 - **上线状态**:最新代码已提交 Git(分支 `master`),并同步热更新至运行中的 `am-downloader` 容器内 `/app/index.html`。 + +--- + +## 5. 交互与细节修复记录(2026-09-17) + +### 5.1 移动端底部导航栏贴底优化 +- **改动说明**:解决移动端底栏浮岛胶囊式设计(悬空 `12px` 且带圆角)在滚动时产生的文字从缝隙穿插、视觉割裂问题。 +- **调整实现**: + - 改为全宽贴底原生 TabBar 布局(`left: 0; right: 0; bottom: 0; border-radius: 0;`)。 + - 顶部微弱边框隔离(`border-top: 1px solid var(--border-subtle)`),四周无多余外边框。 + - 适配安全区域与深色毛玻璃(`padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(8, 12, 20, 0.95); backdrop-filter: blur(20px);`)。 + +### 5.2 全局接口与弹窗提示中文语义化 +- **改动说明**:解决兑换失败、加入队列失败时直接将后端原始错误 JSON(如 `["error""code already used or unavailable"]`)弹给用户的粗糙体验。 +- **调整实现**: + - 在底层封装统一错误解析器 `parseErrorMsg(msg)`,自动解包后端返回的 JSON 结构。 + - 建立错误语义字典映射: + - `code already used or unavailable` → **该兑换码已被使用或已失效** + - `record not found` → **兑换码不存在,请核对后重试** + - `insufficient credits` → **积分不足,请先兑换或充值积分** + - `code expired` → **该兑换码已过期** + - `user disabled` → **账户已被禁用,无法执行此操作** + - `only failed tasks can be retried` → **只有失败的任务才支持重试** + - 其他校验项(用户名/密码规则、金额非零等)同步完成中文友好化。 + +### 5.3 用户管理抽屉积分调整事件委托审核 +- **问题根因**:原代码在为 `detailAdd` 与 `detailSub` 绑定 `onclick` 后,通过 `innerHTML += ...` 追加积分流水,导致整个容器内 DOM 被全量重构,先前绑定的监听器失效。 +- **修复方案与审核**:通过 `document.createElement('div')` + `appendChild(ledger)` 实现流水平行追加,既保留了已渲染节点的事件监听,又保证了 DOM 结构与 ID 契约完整无副作用。 +