# 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 越界问题。