57 lines
2.9 KiB
Markdown
57 lines
2.9 KiB
Markdown
# 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 规范：`linear-gradient(135deg, #ECCFA8, #C99672)` (温暖杏褐)。
|
||
* 当前 Flutter：生成器按钮多使用 `0xFF8B5CF6` (紫色)，未完全遵循“毛绒机芯”专属色。
|
||
* **标题文字**:
|
||
* Web 规范：`#4B2404` (黑巧棕)。
|
||
* 当前 Flutter：多使用 `#1F2937` (深灰)。
|
||
|
||
### 🟡 尺寸与边距 (Metrics)
|
||
* **Header 高度**:
|
||
* Web：`calc(env(safe-area-inset-top) + 48px)`。
|
||
* Flutter：目前使用固定的 `padding + 10dp`，在不同刘海屏下可能存在对齐偏差。
|
||
* **圆角一致性**: Web 广泛使用 `24px/28px` 圆角，Flutter 部分组件（如按钮）可能使用了默认的 `16px`。
|
||
|
||
### 🟠 动效与交互 (Interaction)
|
||
* **书架上架动画**:
|
||
* 原因：之前受曲线越界报错影响临时禁用。
|
||
* 目标：实现 Scale + Fade 的稳定进入效果。
|
||
* **反馈震动**: 尚未集成 Haptic Feedback。
|
||
|
||
---
|
||
|
||
## 3. 后续修复计划
|
||
|
||
1. **全局色值同步**: 提取 `AppColors` 类，强制从 `design_system.md` 注入 hex。
|
||
2. **按钮样式统一**: 为“开始生成”等关键按钮应用杏褐色渐变。
|
||
3. **二级页面转换**: 逐步迁移 `Profile` 和 `Help` 等静态/低交互页面。
|
||
4. **动效修复**: 重新上线书架“飞入”动画，并解决 Opacity 越界问题。
|