zyc/rtc_prd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
rtc_prd/阶段总结/phase5_ui_standardization.md
seaislee1209 f9666d4aa3 feat: UI规范化 + 故事吸入动画 + 音乐页面优化 
- 全局字体统一(Outfit/DM Sans), 头部/按钮/Toast规范化
- 故事详情页: Genie Suck吸入动画(标题+卡片一起缩小模糊消失)
- 书架页: bookPop弹出+粒子效果(三段式动画完整链路)
- 音乐页面: 心情卡片emoji换Material图标+彩色圆块横排布局
- 音乐页面: 进度条胶囊宽度对齐, 播放按钮位置修复, 间距均匀化
- 音乐播放: 接入just_audio, 支持播放暂停进度拖拽自动切歌
- 新增: iOS风格毛玻璃Toast, 渐变背景组件, 通知页面
- 阶段总结文档更新

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 19:34:53 +08:00

3.3 KiB
Raw Permalink Blame History

阶段总结：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 盘