6.8 KiB
6.8 KiB
Airhub 开发进度存档 🔖
用途:每次对话结束前 / 做完一个阶段后更新此文件。 新对话开始时,AI 先读此文件恢复上下文。
最后更新:2026-02-08 (第七次对话)
当前阶段:HTML → Flutter 迁移 & UI 还原
总体目标
将所有 HTML 原型页面 1:1 还原为 Flutter 原生代码,使 App 脱离 WebView 依赖。
本次完成的工作(第三次对话,2026-02-06)
1. 全局字体修复(最重要)
- 把全项目所有
fontFamily: 'Inter'替换为正确字体 - PRD 规范:标题用 Outfit,正文用 DM Sans,Logo 用 Press Start 2P
- 修改了
app_theme.dart:设置 DM Sans 为全局默认字体,Outfit 用于 heading styles - 修改了
design_tokens.dart:AppTextStyles 全部改为 GoogleFonts 调用 - 修改了
gradient_button.dart:按钮文字改 DM Sans - 修改了所有页面文件(共 15+ 个文件),零 Inter 残留
2. 逐页 UI 对齐 HTML 原版
- settings_page.dart:标题字号 18→16,Slider 激活色紫色→暖橙 #FFB088
- bluetooth_page.dart:标题字号 18→17,设备名字号 24→20
- wifi_config_page.dart:标题字号 18→17
- home_page.dart:Mascot 尺寸 280→320px,添加 translateX(5%) 偏移
- device_control_page.dart:Mascot 阴影色紫→粉,导航栏阴影色紫→中性灰
- login_page.dart(两个版本):Logo 字号 26→28
- product_selection_page.dart:标题字体改 Outfit
- glass_dialog.dart:对话框标题改 Outfit
- story files:清除所有 Inter 引用
3. 编译验证通过
- 用
flutter run -d web-server --web-port=8080编译成功 - 浏览器预览所有页面确认正常
第四次对话完成的工作(2026-02-07)
修复音乐播放功能
- 问题:音乐页面按播放键只有黑胶唱片旋转动画,完全没有接入 just_audio 播放器
- 根因:
music_creation_page.dart没有导入just_audio,没有创建AudioPlayer,_togglePlay()只改 UI 状态不播放音频 - 修复内容:
- 导入
just_audio并创建AudioPlayer实例 initState中初始化播放器 + 监听 position/duration/playerState 三条流_togglePlay()现在真正调用play()/pause()_playTrack()加载对应 asset 并播放- 进度条双向绑定:拖拽时 seek,播放时实时更新
- 播完自动切下一首(循环播放列表)
- 错误处理 + 语音气泡提示
- 导入
- MP3 文件:9 首歌已在
assets/www/music/,pubspec.yaml 已声明,播放列表用了前 4 首
第五次对话完成的工作(2026-02-07)
UI 规范化 & 按钮/头部统一
- 书架页面优化:高度、布局、解锁动画丝滑化
- 头部统一:12 个文件统一为标准头部样式(40×40按钮、圆角12、arrow_back_ios_new、17px标题)
- 主按钮统一:9 个手写按钮改为 GradientButton 组件(光泽+涟漪+DM Sans)
- GradientButton 规范化:默认高度50→48,plush字号18→17统一
- 次级按钮规范化:统一高度48、圆角24
- 全局 Toast:SnackBar → iOS 风格 AppToast
- 新增文档:
flutter_style_guide.md(Flutter 专属样式规范) - 阶段总结:
阶段总结/phase5_ui_standardization.md - 详见
阶段总结/phase5_ui_standardization.md
故事详情页修复
- loading 页传完整故事内容(不再是占位符)
- 5 个书架故事补全 content 字段(不再显示 null)
- "重写"按钮改为跳转 loading 页重新生成
- 内容卡片加圆角和边距,头部 padding 加大
- footer 去掉多余白色底板
- content 兜底逻辑:无内容时自动用默认故事
第六次对话完成的工作(2026-02-08)
故事保存"精灵吸入"动画(Genie Suck)
- 实现位置:
story_detail_page.dart - 动画效果:点击"保存故事"后,故事卡片执行三段式吸入动画
- Phase 1(0→15%):卡片轻微放大到 1.05("蓄力"张力感)
- Phase 2(15%→100%):卡片极速缩小到 0.05、向下移动、模糊 + 淡出
- 缓动曲线:cubic-bezier(0.6, -0.28, 0.735, 0.045)(带回弹的快速吸入)
- 底部按钮:动画开始时 300ms 渐隐 + 禁用点击
- 总时长:0.8s,动画完成后自动 pop('saved') → 触发书架页 bookPop + 粒子效果
- 三段式完整链路:Genie Suck(故事页)→ bookPop(书架页)→ sparkle 粒子(书架页)
- 编译验证:web-server 编译通过,无 lint 错误
第七次对话完成的工作(2026-02-08)
音乐页心情卡片 UI 全面重做
- 卡片风格:回归玻璃拟态,每张卡片均匀铺一层淡主题色(不再用左白右彩的丑渐变)
- 边框优化:去掉彩色粗描边,默认极淡主题色边框,选中才加深
- 图标简化:去掉 40x40 色块方框,改为裸图标 + 主题色着色,更干净
- 选中态:右上角 8px 主题色圆点指示器 + 卡片颜色加深 + 阴影发光
- 标题字号:从 13px 回到 14px,对应 HTML 原版
- 自由创作:恢复白底玻璃质感,与心情卡片明确区分
- 盲盒惊喜:换紫色调(#D4A0E8)+ 颜色更浓 + 斜扫柔光动画(3s 循环)
歌词可读性优化
- 歌词文字不透明度从 0.75 提到 0.92
- 字号从 11px 提到 12px
- 歌词区域加暗色圆形遮罩,解决纹路干扰
选中态交互修复
- 生成完成后自动清除
_selectedMoodIndex,不再残留选中状态
正在做的
- 下一步待定
重复登录页说明
lib/features/auth/presentation/pages/login_page.dart— 路由使用,带 Riverpod 认证lib/pages/login_page.dart— 完整 UI 实现,作为参考保留- 后续需要把 pages/ 版本的完整 UI 合并到 auth 版本
三步走计划
- ✅ 修已转换页面的 UI 差异(本次完成)
- 🔄 构建音乐创作页面(进行中)
- ⬜ 转换剩余 WebView 页面(Profile、收藏、帮助等)
开发环境备忘
- 预览方式:
flutter run -d web-server --web-port=PORT,用 Cursor 内置浏览器看 - 镜像源:需设
PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL为国内源 - Android 模拟器:已装好,VTX 已开,但编译慢,非最终验收不用
- Flutter web-server 当前运行在端口 8080
关键文件索引
| 文件 | 说明 |
|---|---|
PRD.md |
产品需求文档 |
design_system.md |
视觉设计规范 |
airhub_app/migration_report.md |
HTML→Flutter 迁移进度 & UI 差异 |
music-creation.html |
音乐创作页面 HTML 原版 |
阶段总结/task.md |
"我的"模块任务清单 |
阶段总结/phase_summary.md |
音乐电台功能阶段总结 |
阶段总结/session_progress.md |
👈 就是本文件,开发进度存档 |