# 小妈厨房 iOS 26 UI 设计方案



> 版本: 1.3 | 日期: 2026-04-12 | 设计语言: Liquid Glass (iOS 26)
>
> 本文档是项目 UI 改造的完整规范，任何开发者（含 AI Coder）必须按此方案执行。

---

## 目录

1. [设计语言：Liquid Glass 核心特征](#一设计语言liquid-glass-核心特征)
2. [设计令牌 (Design Tokens)](#二设计令牌-design-tokens)
3. [页面架构总览](#三页面架构总览)
4. [各页面布局演示](#四各页面布局演示)
5. [导航流程图](#五页面导航流程图)
6. [组件规范](#六liquid-glass-组件规范)
7. [改进对比](#七关键改进点对比现有设计)
8. [暗色模式适配](#八暗色模式适配)
9. [响应式适配](#九响应式适配)
10. [实施计划](#十实施计划)
11. [iOS 组件清单](#十一ios-组件清单component-inventory)

---

## 一、设计语言：Liquid Glass 核心特征

iOS 26 的 **Liquid Glass（液态玻璃）** 是苹果自 iOS 7 扁平化以来最大的视觉变革，灵感源自 Vision Pro。

### 五大核心特征

| # | 特征 | Flutter 实现 |
|---|------|-------------|
| 1 | 半透明毛玻璃 | `BackdropFilter` + `ImageFilter.blur(20)` |
| 2 | 动态光效/折射 | 渐变边框 + `Shimmer` 动画 |
| 3 | 深度层次感 | 多层 `Container` + `BoxShadow` |
| 4 | 圆角同心设计 | 统一 `BorderRadius` 体系 |
| 5 | 内容聚焦 | `Stack` + 半透明 `Positioned` |

### 与现有代码映射

```
TapLiquidGlassNavigation → 保留，升级为 GlassNavBar
FloatingCupertinoTabBar   → 废弃，统一用 GlassNavBar
BottomBarStyle.liquidGlass → 透明玻璃杯效果（贴边样式）
BottomBarStyle.floating    → 悬浮液态玻璃效果
ThemeService.primaryColor (#2196F3) → 改为 iOS 蓝 #007AFF
ThemeService.secondaryColor (#FF9800) → 改为 iOS 橙 #FF9500
```

### 设计原则

```
内容为王 · 一致性 · 深度感 · 流畅性(250-350ms) · 可达性(≥44px触摸/≥11px文字)
```

---

## 二、设计令牌 (Design Tokens)

> 所有页面必须基于此令牌，禁止硬编码颜色、间距、圆角。若令牌中无所需值，需先在此处添加再使用。

### 颜色体系

| 类别 | Token | 值 | 用途 |
|------|-------|-----|------|
| 主色系 | primary | `#007AFF` | iOS系统蓝 |
| | primaryLight | `rgba(0,122,255,0.1)` | 浅蓝背景 |
| | secondary | `#FF9500` | iOS系统橙 |
| 背景系 | background | `#F2F2F7` | iOS浅灰底 |
| | card | `#FFFFFF` | 卡片白 |
| | cardAlpha | `rgba(255,255,255,0.72)` | 半透明卡片 |
| 毛玻璃系 | glass | `rgba(255,255,255,0.45)` | 毛玻璃底色 |
| | glassBorder | `rgba(255,255,255,0.3)` | 毛玻璃边框 |
| | glassShadow | `rgba(0,0,0,0.06)` | 毛玻璃投影 |
| 文字系 | text1 / text2 / text3 | `#1C1C1E` / `#8E8E93` / `#C7C7CC` | 主/副/占位文字 |
| 功能色 | red / orange / green | `#FF3B30` / `#FF9500` / `#34C759` | 删除/热门/成功 |

### 圆角体系

| Token | 值 | 用途 | 同心规则 |
|-------|-----|------|---------|
| radius-sm | 8px | 标签/Chip/小按钮 | 内层比外层小4-8px |
| radius-md | 12px | 卡片/输入框/列表项 | xl→lg→md→sm |
| radius-lg | 20px | 大卡片/弹窗/搜索栏 | 28→20→12→8 |
| radius-xl | 28px | 底栏/全屏容器 | — |
| radius-full | 999px | 圆形头像/胶囊按钮 | — |

### 间距体系（4的倍数）

| Token | 值 | 用途 |
|-------|-----|------|
| space-1 ~ space-7 | 4/8/12/16/20/24/32px | 图标间距→页面顶部 |

### 毛玻璃参数

```
blur: 20-30px | opacity: 0.45-0.72 | border: 0.5px solid rgba(255,255,255,0.3) | shadow: 0 4px 16px rgba(0,0,0,0.06)
```

### 字体 / 阴影 / 动画

| 字体 | 值 | 阴影 | 值 | 动画 | 值 |
|------|-----|------|-----|------|-----|
| font-xs | 11px 标签/徽章 | shadow-sm | `0 1px 3px rgba(0,0,0,0.04)` | fast | 150ms 按钮 |
| font-sm | 12px 副文字 | shadow-md | `0 4px 12px rgba(0,0,0,0.06)` | normal | 250ms 页面切换 |
| font-md | 14px 正文 | shadow-lg | `0 8px 24px rgba(0,0,0,0.08)` | slow | 350ms 弹窗 |
| font-lg | 16px 标题 | | | curve | easeInOutCubic |
| font-xl | 18px 大标题 | | | | |
| font-xxl | 22px 页面主标题 | | | | |

---

## 三、页面架构总览

### Tab 结构变更

```
现有 4Tab:                    新 4Tab:
Tab0: 🏠 首页          →     Tab0: 🏠 首页 (信息流)
Tab1: 🛒 购物车(实为收藏)→    Tab1: ❤️ 收藏
Tab2: 🕐 足迹           →     Tab2: 🔍 发现 (聚合页)
Tab3: 👤 个人中心        →     Tab3: 👤 我的 (简化设置)
```

### 全局布局

```
┌─────────────────────────────────────┐
│  ⚠️ 离线横幅 (仅离线时显示)         │
│  ┌─────────────────────────────┐    │
│  │      Page Content Area      │    │
│  │    (IndexedStack 切换)      │    │
│  │  首页 | 收藏 | 发现 | 我的   │    │
│  └─────────────────────────────┘    │
│  🫧 Liquid Glass 底部导航栏 🫧      │
│   🏠首页  ❤️收藏  🔍发现  👤我的    │
└─────────────────────────────────────┘
```

### 导航栏规范

```
统一使用 CupertinoPageScaffold + CupertinoNavigationBar
背景: 毛玻璃(blur:20, opacity:0.72) | 标题: font-xl(18px)+text1
子页面: 左侧返回箭头(CupertinoIcons.back) | 右侧功能按钮(图标22px)
```

---

## 四、各页面布局演示

### Tab0：首页（Home）

```
┌─────────────────────────────────────┐
│  🍳 小妈厨房              🔔  👤   │
├─────────────────────────────────────┤
│  ┌─ 营养仪表盘 (NutritionDashboard)─┐ │
│  │ � 今日摄入: 热量/蛋白质/碳水...│ │
│  └──────────────────────────────────┘ │
│                                     │
│  🌊 发现                    24 项   │
│  探索菜谱、食材、分类              │
│  ┌──────┐ ┌────────────┐          │
│  │🖼️封面│ │🥬食材卡片  │          │
│  │红烧排│ │⚠含过敏原  │          │
│  │骨 ⭐4.8│ │简介文字.. │          │
│  │👁1.2k│ └────────────┘          │
│  └──────┘ ┌──────┐ ┌──────────┐  │
│  ┌──────────┐ │📂分类│ │🏷️口味标签│ │
│  │🖼️宽图    │ │家常菜│ │酸辣甜鲜..│ │
│  │宫保鸡丁  │ │128项│ └──────────┘  │
│  │⭐4.5     │ └──────┘ ┌──────────┐ │
│  │👁2.3k    │ ┌──────────┐ │🕐早餐推荐│ │
│  └──────────┘ │🖼️菜品卡  │ │7-10点.. │ │
│              │番茄炒蛋  │ └──────────┘ │
│              └──────────┘ ↓下拉加载更多│
└─────────────────────────────────────┘
```

**操作**: 下拉刷新/上拉加载/点击菜品→详情/点击食材→搜索/点击分类→浏览/点击标签→列表/滚动隐藏顶部栏

**布局说明 (v0.90.0 更新)**:
- 移除旧「今日推荐」「分类浏览」「口味工艺」横向卡片
- 使用 `api_discover.php` 接口数据构建 **MasonryGridView 2列瀑布流**
- 5种卡片类型混合展示：菜品(Recipe)/食材(Ingredient)/分类(Category)/口味标签(Tag)/时段(MealTime)
- Liquid Glass 毛玻璃风格统一视觉

### Tab1：收藏（Favorites）

```
┌─────────────────────────────────────┐
│  ❤️ 我的收藏              🗑️ 清空   │
├─────────────────────────────────────┤
│  ┌──┐ 红烧排骨  家常菜·👁1.2k  ❤   │
│  │🖼️│                              │
│  ├──┤ ┌──┐ 宫保鸡丁  川菜·👁2.3k  ❤ │
│  │🖼️│                              │
│  └──┘ 共12个菜谱    [清空收藏]      │
│  ┌─ 空状态: ❤ 收藏夹是空的 ──────┐  │
│  │   去首页发现美味吧 →            │  │
│  └────────────────────────────────┘  │
└─────────────────────────────────────┘
```

**操作**: 左滑删除/点击❤取消收藏/清空确认弹窗/空状态→切换首页Tab

### Tab2：发现（Discover）

```
┌─────────────────────────────────────┐
│  🔍 发现                            │
├─────────────────────────────────────┤
│  ┌─ 🔍 搜索菜谱、食材、标签... ──┐  │
│  ├─ 🏷️ 热门标签: 家常|快手|川菜|粤菜 →┤
│  ├─ 🎲 今天吃什么? 让我来帮你选! → ─┤
│  ├─ 🔥 热门排行: 🥇排骨 🥈宫保 🥉番茄→┤
│  ├─ 📂 分类浏览 (2列网格):          │  │
│  │  🍳家常 🥘快手 🌶️川菜 🍜粤菜    │  │
│  └────────────────────────────────┘  │
└─────────────────────────────────────┘
```

**操作**: 搜索→实时列表/标签筛选/今天吃什么→WhatToEatPage/排行→HotPage/分类→列表页

### Tab3：我的（Profile）

```
┌─────────────────────────────────────┐
│  👤 我的                            │
├─────────────────────────────────────┤
│  ┌─ 用户卡片(毛玻璃): 👤美食爱好者 ─┐│
│  │  user@example.com [编辑][个性化] ││
│  ├─ 📊 统计: 12收藏 56浏览 8点赞 ──┤│
│  ├─ 分组1: 今天吃什么/数据管理/设置 →││
│  ├─ 分组2: 购物单/营养中心/睡眠提醒→││
│  └────────────────────────────────┘│
└─────────────────────────────────────┘
```

### 子页面：菜谱详情（Recipe Detail）

```
┌─────────────────────────────────────┐
│  ← 返回            分享  收藏  更多  │
├─────────────────────────────────────┤
│  ┌─ 封面大图 (圆角+阴影) ─────────┐ │
│  ├─ 标题区: 名称/评分/时间/难度 ────┤ │
│  ├─ 作者卡片: 头像+昵称+关注 ──────┤ │
│  ├─ 信息卡: 口味/工艺/份量/热量 ────┤ │
│  ├─ 食材区: 图片+名称+用量+过敏警告─┤ │
│  ├─ 步骤区: 编号+图文+计时器 ──────┤ │
│  ├─ 营养区: 宏量营养素环形图 ──────┤ │
│  ├─ 标签区: 可跳转的分类/口味标签 ──┤ │
│  ├─ 统计栏: 👁浏览 ❤点赞 ⭐推荐 ───┤ │
│  ├─ 操作栏: 开始烹饪/分享/评分 ────┤ │
│  └─ PicId调试卡(开发模式可见) ─────┘ │
└─────────────────────────────────────┘
```

### 子页面：工具中心（Tools Center）

```
┌─────────────────────────────────────┐
│  ← 返回               工具中心      │
├─────────────────────────────────────┤
│  ┌─ 分类Tab: 全部|烹饪|健康|数据|规划┤│
│  ├─ 工具网格 (3列):                 ││
│  │  ⏱️计时 📐缩放 🍽️时段 📊BMI      ││
│  │  ⚠️过敏 🥗营养 🔢换算 🥕食材详情 ││
│  │  🔥排行 📈统计 📅规划            ││
│  └────────────────────────────────┘│
└─────────────────────────────────────┘
```

---

## 五、导航流程图

```
                        ┌──────────┐
                        │  首页     │
                        │ (Tab0)   │
                        └────┬─────┘
                             │ 点击卡片
                             ▼
                   ┌─────────────────┐
                   │  菜谱详情页       │◄─────────────────┐
                   └──┬──────┬───────┘                  │
                      │      │                          │
           ┌──────────┘      └──────────┐               │
           ▼                             ▼               │
    ┌────────────┐              ┌────────────┐          │
    │ 笔记页面    │              │ 食材详情    │──────────┘
    └────────────┘              └─────┬──────┘
                                       │
                                ┌──────▼──────┐
                                │ 食材菜品列表  │
                                └─────────────┘

┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│ 收藏(Tab1)│    │ 发现(Tab2)│    │ 我的(Tab3)│    │ 工具中心   │
└────┬─────┘    └──┬───────┘    └──┬───────┘    └────┬─────┘
     │              │              │                │
     ▼              ▼              ▼                ▼
  详情页        搜索/分类/排行   设置子页面      各工具子页面
```

---

## 六、Liquid Glass 组件规范

### 6.1 GlassContainer 毛玻璃容器

```dart
GlassContainer(
  child: Widget,
  blur: double,        // 默认20
  opacity: double,     // 默认0.45
  borderRadius: double,// 默认radius-lg(20)
  border: bool,        // 默认true
  padding: EdgeInsets,
)
// 使用场景: 卡片/弹窗/浮层
```

### 6.2 GlassNavBar 液态玻璃底栏

```dart
GlassNavBar(
  currentIndex: int,
  onTap: (int),
  items: [
    NavItem(icon: CupertinoIcons.home, label: '首页'),
    NavItem(icon: CupertinoIcons.heart, label: '收藏'),
    NavItem(icon: CupertinoIcons.search, label: '发现'),
    NavItem(icon: CupertinoIcons.person, label: '我的'),
  ],
)
// 特性: blur(20)+opacity(0.72)+圆角xl(28)+选中高亮动画
```

### 6.3 GlassFeedCard 信息流卡片

```dart
GlassFeedCard(
  imageUrl: String,
  title: String,
  subtitle: String,
  viewCount: int,
  likeCount: int,
  recommendCount: int,
  onTap: VoidCallback,
  onLike: VoidCallback,
  onRecommend: VoidCallback,
)
// 特性: 圆角md(12)+shadow-md+毛玻璃底部操作栏
```

### 6.4 GlassSearchBar 搜索栏

```dart
GlassSearchBar(
  hintText: '搜索菜谱、食材...',
  onChanged: (String),
  onSubmitted: (String),
)
// 特性: 圆角lg(20)+毛玻璃背景+搜索图标+清除按钮
```

### 6.5 GlassSegmentedControl 分段选择器

```dart
GlassSegmentedControl(
  segments: ['推荐', '最新', '热门', '个性化'],
  selectedIndex: int,
  onSelected: (int),
)
// 特性: 毛玻璃滑块+250ms平滑过渡+选中高亮
```

### 6.6 GlassSettingsGroup/Tile 设置组（备用）

```dart
GlassSettingsGroup(
  header: '通用',
  children: [
    GlassSettingsTile(title: '今天吃什么', trailing: '→'),
    GlassSettingsTile(title: '深色模式', toggle: true),
  ],
)
```

---

## 七、改进对比

| 维度 | 现有问题 | iOS 26 改进 |
|------|---------|------------|
| 视觉风格 | Material/Cupertino混用，颜色不统一 | 统一Liquid Glass毛玻璃风格 |
| 导航栏 | 各页面实现不一致 | 统一CupertinoPageScaffold+毛玻璃 |
| 底部栏 | edge/floating两套并存 | 统一GlassNavBar(floating) |
| 颜色 | primary=#2196F3(Material蓝) | 改为iOS标准#007AFF |
| 圆角 | 各组件硬编码不统一 | 统一radius-sm/md/lg/xl体系 |
| 卡片 | 扁平无层次感 | 毛玻璃半透明+多层深度 |
| 动画 | 无统一规范 | 150/250/350ms三级动画体系 |
| 暗色模式 | 部分支持 | 完整DarkDesignTokens适配 |

---

## 八、暗色模式适配

| Token | Light | Dark |
|-------|-------|------|
| background | `#F2F2F7` | `#000000` |
| card | `#FFFFFF` | `#1C1C1E` |
| text1 | `#1C1C1E` | `#F2F2F7` |
| text2 | `#8E8E93` | `#8E8E93` |
| text3 | `#C7C7CC` | `#48484A` |
| glass | `rgba(255,255,255,0.45)` | `rgba(30,30,30,0.65)` |
| glassBorder | `rgba(255,255,255,0.3)` | `rgba(255,255,255,0.1)` |
| glassShadow | `rgba(0,0,0,0.06)` | `rgba(0,0,0,0.3)` |
| shadow-sm/md/lg | alpha降低 | alpha提高 |

> 实现方式: `CupertinoTheme.brightnessOf(context)` 判断，使用 `DarkDesignTokens` 类获取暗色值

---

## 九、响应式适配

| 设备 | 宽度范围 | 布局策略 |
|------|---------|---------|
| 手机 | 360-640px | 单列 |
| 平板竖屏 | 600-900px | 双列(折叠屏适配) |
| 平板横屏 | 768-1024px | 双列+侧边详情 |
| 桌面 | ≥1024px | 多列+最大宽度1200px居中 |

> 折叠屏特殊处理: 避免关键内容置于折痕区域(屏幕中央)，使用order或grid调整流式排列

---

## 十、实施计划

| 阶段 | 内容 | 状态 |
|------|------|------|
| P0 | DesignTokens全局替换硬编码值 | ✅ 已完成 |
| P1 | GlassContainer/GlassNavBar/GlassFeedCard基础组件 | ✅ 已完成 |
| P2 | 首页/发现页改造为信息流 | 🔄 进行中 |
| P3 | 收藏页/我的页改造 | ⏳ 待开始 |
| P4 | 暗色模式完整适配 | ⏳ 待开始 |
| P5 | 响应式多端适配 | ⏳ 待开始 |

---

## 十一、iOS 组件清单（Component Inventory）

> 统计日期: 2026-04-12 | 总计48个组件 | 35已使用 ✅ | 10未使用 ❌ | 3待集成 ⚠️

### 11.1 基础组件 (`widgets/base/`) — 4个

| 文件 | 类名 | 状态 | 引用数 |
|------|------|------|--------|
| app_page_scaffold.dart | AppPageScaffold, AppCard | ✅ | 2+ |
| skeleton_loader.dart | SkeletonLoader | ✅ | 2 |
| standard_button.dart | StandardButton | ✅ | 2 |
| tap_liquid_glass_nav.dart | TapLiquidGlassNavigation | ❌ | 0 |

### 11.2 Cupertino组件 (`widgets/cupertino/`) — 3个（全部未使用）

| 文件 | 类名 | 状态 | 备注 |
|------|------|------|------|
| app_button.dart | AppButton | ❌ | 项目主要用CupertinoButton |
| app_card.dart | AppCard | ❌ | ⚠️与base/app_page_scaffold.dart同名重复 |
| app_text_field.dart | AppTextField | ❌ | 可后续启用 |

### 11.3 毛玻璃组件 (`widgets/glass/`) — 8个

| 文件 | 类名 | 状态 | 引用数 |
|------|------|------|--------|
| glass_container.dart | GlassContainer | ✅ | 9处 |
| glass_nav_bar.dart | GlassNavBar | ✅ | 1 |
| glass_feed_card.dart | GlassFeedCard | ✅ | 1 |
| glass_search_bar.dart | GlassSearchBar | ✅ | 2 |
| glass_segmented_control.dart | GlassSegmentedControl | ✅ | 4 |
| glass_animations.dart | GlassBounce/Shimmer | ❌ | 0 |
| glass_responsive.dart | GlassResponsive | ❌ | 0 |
| glass_settings_tile.dart | GlassSettingsGroup/Tile | ❌ | 0 |

### 11.4 状态组件 (`widgets/states/`) — 5个

| 文件 | 类名 | 状态 | 引用数 |
|------|------|------|--------|
| empty_state.dart | EmptyState | ✅ | 11处 |
| error_state.dart | ErrorState | ✅ | 3处 |
| offline_banner.dart | OfflineBanner | ⚠️ | 仅自身定义 |
| standard_dialog.dart | StandardDialog | ✅ | 1 |
| standard_picker.dart | StandardPicker\<T\> | ❌ | 0 |

### 11.5 通用组件 (`widgets/`根目录) — 11个

| 文件 | 类名 | 状态 | 引用数 |
|------|------|------|--------|
| adaptive_widgets.dart | AdaptiveDestination/Interface | ❌ | 0 |
| charts_widgets.dart | 营养图表 | ✅ | 2 |
| custom_widgets.dart | 自定义控件集 | ✅ | 1 |
| loading_indicator.dart | LoadingIndicator | ⚠️ | 间接依赖 |
| navigation_widgets.dart | 导航组件 | ✅ | 1 |
| nutrition_dashboard_card.dart | NutritionDashboardCard | ✅ | 2 |
| product_card.dart | ProductCard | ⚠️ | 间接依赖 |
| recipe_card.dart | RecipeCard | ✅ | 7处 |
| recipe_image.dart | RecipeImage | ✅ | 10处 |
| responsive_grid.dart | ResponsiveGrid | ⚠️ | 间接依赖 |
| skeleton_widgets.dart | 骨架屏组件 | ✅ | 1 |

### 11.6 菜谱详情组件 (`widgets/recipe_detail/`) — 17个（全部已使用）

action_bar, allergen_warning, author_card, category_breadcrumb, cover_image, indices_card, ingredient_details, ingredients_section, meta_info_card, nutrition_section, picid_card, rating_dialog, skeleton_view, statistics_bar, steps_section, tags_section, time_info, title_section

### 11.7 未用组件处理建议

| 组件 | 建议 |
|------|------|
| TapLiquidGlassNavigation | 整合到glass_nav_bar或删除 |
| cupertino/AppButton/AppCard/AppTextField | 删除cupertino目录，合并AppCard到base |
| GlassAnimations | 保留，点赞动画可启用 |
| GlassResponsive | 删除，功能简单可内联 |
| GlassSettingsGroup/Tile | 保留，设置页改造时启用 |
| StandardPicker | 保留，表单页可启用 |
| AdaptiveWidgets | 删除，当前无平板需求 |
| OfflineBanner | 集成到全局App Shell |

---

## 变更记录

| 日期 | 版本 | 变更内容 |
|------|------|---------|
| 2026-04-12 | 1.3 | **压缩重构**: 1182行→~780行；合并设计令牌为紧凑表格；精简ASCII图和操作表；组件清单改为汇总格式 |
| 2026-04-12 | 1.2 | 新增第十一章「iOS 组件清单」：完整统计48个组件使用状态，按6个分类整理，含处理建议 |
| 2026-04-09 | 1.1 | 重写完整文档：增加目录、设计原则、动画规范、暗色模式详细参数、响应式规则、实施计划状态追踪 |
| 2026-04-09 | 1.0 | 初始版本：基础设计方案 |