f9666d4aa3
- 全局字体统一(Outfit/DM Sans), 头部/按钮/Toast规范化 - 故事详情页: Genie Suck吸入动画(标题+卡片一起缩小模糊消失) - 书架页: bookPop弹出+粒子效果(三段式动画完整链路) - 音乐页面: 心情卡片emoji换Material图标+彩色圆块横排布局 - 音乐页面: 进度条胶囊宽度对齐, 播放按钮位置修复, 间距均匀化 - 音乐播放: 接入just_audio, 支持播放暂停进度拖拽自动切歌 - 新增: iOS风格毛玻璃Toast, 渐变背景组件, 通知页面 - 阶段总结文档更新 Co-authored-by: Cursor <cursoragent@cursor.com>
91 lines
3.3 KiB
Markdown
91 lines
3.3 KiB
Markdown
# 阶段总结：UI 规范化与按钮/头部统一
|
||
|
||
> **日期**：2026-02-07
|
||
> **范围**：全 App UI 一致性审计与修复
|
||
|
||
---
|
||
|
||
## 一、书架页面优化
|
||
|
||
### 改动
|
||
- **书架高度**：56% → 64% 屏幕高
|
||
- **布局**：`padEnds: true` → `false`，整体左移，右侧虚线框文字完全露出
|
||
- **解锁新书架动画**：从两组文字改为一组，丝滑从 peek 位置滑到中心
|
||
- 锁图标大小 `lerpDouble(20, 32, t)` 连续插值
|
||
- 文字从竖排变横排
|
||
- **创作新故事按钮**：上移，离底部菜单栏更远
|
||
|
||
---
|
||
|
||
## 二、头部样式统一（12 个文件）
|
||
|
||
### 统一规范
|
||
| 属性 | 旧值（不一致） | 新值（统一） |
|
||
|------|------|------|
|
||
| 返回按钮尺寸 | 44×44 | **40×40** |
|
||
| 返回按钮圆角 | 14/20/22 | **12** |
|
||
| 返回按钮背景透明度 | 0.25/0.45 | **0.6** |
|
||
| 返回按钮边框 | 有/无 | **无** |
|
||
| 图标类型 | arrow_back | **arrow_back_ios_new** |
|
||
| 图标大小 | 20 | **18** |
|
||
| 标题字号 | 18/20 | **17** |
|
||
| 标题字重 | w700 | **w600** |
|
||
| 标题颜色 | #374151 | **#1F2937** |
|
||
|
||
### 涉及文件
|
||
- `design_tokens.dart` — 公共变量调整
|
||
- 7 个 profile 页面 — notification, settings_sub, guide_feeding, help, agent_manage, profile_info, settings
|
||
- 3 个硬编码页面 — music_creation, story_detail, profile/settings
|
||
- `settings_sub_pages.dart` — 新增 AnimatedGradientBackground
|
||
|
||
---
|
||
|
||
## 三、主按钮统一为 GradientButton 组件
|
||
|
||
### 统一规范
|
||
| 属性 | 值 |
|
||
|------|------|
|
||
| 组件 | `GradientButton`（统一入口） |
|
||
| 光泽效果 | 顶部白色渐变 15% → 透明 |
|
||
| 点击反馈 | InkWell 涟漪 |
|
||
| 字体 | DM Sans, 17px, w600, 白色 |
|
||
| 圆角 | height/2（胶囊形） |
|
||
|
||
### 改动文件
|
||
| 文件 | 按钮 | 改动 |
|
||
|------|------|------|
|
||
| `device_control_page.dart` | + 创作新故事 | 手写 Container → GradientButton |
|
||
| `bluetooth_page.dart` | 连接设备 | 手写 Container → GradientButton |
|
||
| `music_creation_page.dart` | 生成音乐 🎵 | 手写 → GradientButton |
|
||
| `music_creation_page.dart` | 立即试听 | 手写 → GradientButton |
|
||
| `glass_dialog.dart` | 确定（单按钮） | 手写 → GradientButton |
|
||
| `glass_dialog.dart` | 确定（双按钮） | 手写 → GradientButton |
|
||
| `login_page.dart` | 同意并继续 | 手写 → GradientButton |
|
||
| `login_page.dart` | 立即登录 | 手写 → GradientButton |
|
||
| `gradient_button.dart` | 默认高度 | 50 → 48 |
|
||
| `gradient_button.dart` | plush 字号 | 18/w700 → 17/w600（统一） |
|
||
| `story_detail_page.dart` | 所有按钮高度 | 46 → 48 |
|
||
| `story_detail_page.dart` | 次级按钮圆角 | 23/25 → 24 |
|
||
|
||
### 保持特殊实现的按钮
|
||
- `home_page.dart` — "立即连接"：有 shine 扫光动画，但已包含光泽+涟漪+正确字体
|
||
|
||
### 不需要改的小型按钮
|
||
- profile_info 的"保存"/"确定" — 头部/picker 内小按钮
|
||
- help_page 的"查看 →" — 卡片内导航小按钮
|
||
|
||
---
|
||
|
||
## 四、全局 Toast 系统
|
||
|
||
- 提取 `ios_toast.dart` — iOS 风格毛玻璃 toast
|
||
- 全 App 替换 SnackBar 为 `AppToast.show()`
|
||
- 支持 `isError` 参数区分成功/错误样式
|
||
|
||
---
|
||
|
||
## 五、其他修复
|
||
- WiFi 配置页返回白屏 → 改为 `context.go('/home')`
|
||
- 产品选择页卡片渐隐效果 → per-card Opacity 方案
|
||
- C 盘清理 → 释放 ~9.5GB + AVD 迁移至 D 盘
|