544 lines
23 KiB
Markdown
544 lines
23 KiB
Markdown
# 小妈厨房 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)─┐ │
|
||
│ │ <20> 今日摄入: 热量/蛋白质/碳水...│ │
|
||
│ └──────────────────────────────────┘ │
|
||
│ │
|
||
│ 🌊 发现 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 | 初始版本：基础设计方案 |
|