2.9 KiB
2.9 KiB
Airhub 迁移进度与 UI 还原度报告 📊
本文档记录了从 Web 原型到 Flutter 原生 App 的转换进度，并标记了目前存在的差异点。
1. 页面转换状态 (Conversion Status)
| 页面名称 | 状态 | 转换类型 | 备注 |
|---|---|---|---|
| 登录页 (Login) | ✅ 已完成 | Flutter Native | 使用 login_mascot.png |
| 产品选择 (Switch Product) | ✅ 已完成 | Flutter Native | 支持多梯度背景 |
| 配网流程 (WiFi/Bluetooth) | ✅ 已完成 | Flutter Native | |
| 设备控制主页 (Home) | ✅ 已完成 | Flutter Native | 包括卡皮巴拉动效 |
| 故事书架 (Story Library) | ✅ 已完成 | Flutter Native | 已实现书架网格 |
| 故事生成器 (Generator) | ⚠️ 待优化 | Flutter Native | UI 逻辑已转换，但样式需调优 |
| 生成等待页 (Loading) | ✅ 已完成 | Flutter Native | 新增：全屏显示 |
| 故事详情页 (Detail) | ✅ 已完成 | Flutter Native | 新增：全屏显示，支持朗读/生成模式 |
| 设置页 (Settings) | ✅ 已完成 | Flutter Native | 级联弹窗已实现 |
| 个人中心 (Profile) | ❌ 未转换 | Web Asset | profile.html |
| 收藏/分享列表 | ❌ 未转换 | Web Asset | collection-list.html 等 |
| 喂养指南/帮助 | ❌ 未转换 | Web Asset | guide-feeding.html 等 |
2. 视觉还原 Gap (1:1 UI Gaps)
🔴 核心色调差异 (Color Mismatch)
- 页面底色:
- Web 规范：
#FDF9F3(暖沙色)。 - 当前 Flutter：部分页面（如首页）仍在使用
Colors.white或淡紫渐变。
- Web 规范：
- 按钮渐变:
- Web 规范：
linear-gradient(135deg, #ECCFA8, #C99672)(温暖杏褐)。 - 当前 Flutter：生成器按钮多使用
0xFF8B5CF6(紫色)，未完全遵循“毛绒机芯”专属色。
- Web 规范：
- 标题文字:
- Web 规范：
#4B2404(黑巧棕)。 - 当前 Flutter：多使用
#1F2937(深灰)。
- Web 规范：
🟡 尺寸与边距 (Metrics)
- Header 高度:
- Web：
calc(env(safe-area-inset-top) + 48px)。 - Flutter：目前使用固定的
padding + 10dp，在不同刘海屏下可能存在对齐偏差。
- Web：
- 圆角一致性: Web 广泛使用
24px/28px圆角，Flutter 部分组件（如按钮）可能使用了默认的16px。
🟠 动效与交互 (Interaction)
- 书架上架动画:
- 原因：之前受曲线越界报错影响临时禁用。
- 目标：实现 Scale + Fade 的稳定进入效果。
- 反馈震动: 尚未集成 Haptic Feedback。
3. 后续修复计划
- 全局色值同步: 提取
AppColors类，强制从design_system.md注入 hex。 - 按钮样式统一: 为“开始生成”等关键按钮应用杏褐色渐变。
- 二级页面转换: 逐步迁移
Profile和Help等静态/低交互页面。 - 动效修复: 重新上线书架“飞入”动画，并解决 Opacity 越界问题。