50 lines
3.1 KiB
Markdown
50 lines
3.1 KiB
Markdown
# 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`。
|