# AM Downloader 交互界面 (UI) 重构与优化文档

## 1. 概述与背景
`am-downloader` 原先的 `index.html` 采用单页平铺逻辑，随着多用户鉴权、积分兑换、用户级 WebDAV 与管理员后台的引入，旧版界面存在层级分散、导航冗余、缺乏现代感与移动端适配生硬等问题。

本项目已完成系统级的前端现代化重构，并保持对后端原有 API 契约和前端 DOM 事件完全兼容，目前已在运行中的 Docker 容器环境（端口 `9540`）热更新上线生效。

---

## 2. 视觉设计系统规范

### 2.1 配色与质感（Modern Dark Glassmorphism）
- **深色基底**：主背景采用 `#080c14`，配合双色极光渐变暗影（翡翠绿 `#10b981` 与天蓝 `#38bdf8`），提升流媒体科技质感。
- **毛玻璃面板**：卡片与导航栏统一采用 `rgba(17, 26, 42, 0.75)` 配以 `backdrop-filter: blur(16px)`，边框引入半透明微发光分割线（`rgba(255, 255, 255, 0.08)`）。
- **字体与层级**：接入 `Plus Jakarta Sans` 作为主要无衬线英文字体，`JetBrains Mono` 作为代码、卡密与音质参数等宽字体。

---

## 3. 核心功能与架构重构细节

### 3.1 导航体系净化与精简
1. **移除顶部及移动端独立「设置」按钮**：
   - 彻底移除了原先顶栏导航与移动端底栏的独立「设置」入口。
   - 所有系统运行配置统一纳管在管理员后台内部，避免入口碎片化。
2. **下载按钮去除角标数字**：
   - 移除桌面端导航与移动端底栏「下载」按钮后方突兀的数字徽章（Badge），保持导航栏整体视觉纯粹和谐。
   - 保留 DOM 节点以保证后台任务轮询更新逻辑的向后兼容，不报错不中断。

### 3.2 管理控制台（Admin Center）全面重构
1. **分段式选项卡（Segmented Tabs）**：
   - 废弃原有的“点击磁贴切换子面板再返回”繁琐交互，重构为顶部毛玻璃分段 Tab 栏：
     - `👥 用户管理`
     - `◎ 积分账本`
     - `◇ 卡密批次`
     - `≡ 审计日志`
     - `⚙️ 全局设置`（由原“纳管设置”更名，系统 API、下载存储策略、全局 WebDAV 完整收拢在此）
   - Tab 切换平滑无刷新，记忆当前选中状态。

2. **抽屉详情交互（Slide-over Drawer）**：
   - 用户详情不再替换整页或跳转离开当前列表。
   - 点击任意用户的「查看详情」时，桌面端由右侧平滑滑出毛玻璃抽屉面板，移动端自适应为底部滑起抽屉（Bottom Sheet）。
   - 抽屉内置：账号角色与状态、密码重置、账号启停、积分增减与实时流水。
   - 配合磨砂半透明背景遮罩（Backdrop），点击空白处或「✕ 关闭」按钮即可无缝收起，列表浏览上下文不丢失。

---

## 4. 兼容性与上线记录
- **DOM 契约兼容**：保留所有核心配置 ID（`amApi`、`downloadDir`、`localFilePolicy`、`defaultQuality`、`davUrl` 等）以及事件回调机制。
- **上线状态**：最新代码已提交 Git（分支 `master`），并同步热更新至运行中的 `am-downloader` 容器内 `/app/index.html`。