1059 lines
47 KiB
Markdown
1059 lines
47 KiB
Markdown
# 老妈厨房 iOS 26 UI 设计方案
|
||
|
||
> 版本: 1.1 | 日期: 2026-04-09 | 设计语言: Liquid Glass (iOS 26)
|
||
>
|
||
> 本文档是项目 UI 改造的完整规范，任何开发者（含 AI Coder）必须按此方案执行。
|
||
> 修改 UI 前必须先阅读本文档，确保风格统一。
|
||
|
||
---
|
||
|
||
## 目录
|
||
|
||
1. [设计语言：Liquid Glass 核心特征](#一设计语言liquid-glass-核心特征--flutter-实现)
|
||
2. [设计令牌：颜色/圆角/间距/毛玻璃/字体](#二设计令牌-design-tokens)
|
||
3. [页面架构：4Tab 新方案 + 全局布局](#三页面架构总览)
|
||
4. [页面布局：7个页面纯文本演示 + 操作逻辑](#四各页面纯文本布局演示)
|
||
5. [导航流程图：页面间跳转关系](#五页面导航流程图)
|
||
6. [组件规范：6个 Liquid Glass 组件](#六liquid-glass-组件规范)
|
||
7. [改进对比：现有问题 vs iOS 26 改进](#七关键改进点对比现有设计)
|
||
8. [暗色模式：暗色参数适配](#八暗色模式适配)
|
||
9. [响应式：手机/平板/横屏适配](#九响应式适配)
|
||
10. [实施计划：4阶段改造路线](#十实施计划)
|
||
|
||
---
|
||
|
||
## 一、设计语言：Liquid Glass 核心特征 + Flutter 实现
|
||
|
||
iOS 26 的 **Liquid Glass（液态玻璃）** 是苹果自 iOS 7 扁平化以来最大的视觉变革，
|
||
灵感源自 Vision Pro 的空间交互界面。
|
||
|
||
### 1.1 五大核心特征
|
||
|
||
| # | 特征 | 说明 | Flutter 实现方式 |
|
||
|---|------|------|-----------------|
|
||
| 1 | **半透明毛玻璃** | 界面元素具备玻璃质感，内容透过可见 | `BackdropFilter` + `ImageFilter.blur(sigmaX: 20, sigmaY: 20)` |
|
||
| 2 | **动态光效/折射** | 元素随交互呈现光泽变化 | 渐变边框 + `Shimmer` 动画 |
|
||
| 3 | **深度层次感** | 多层叠加创造空间感 | 多层 `Container` + `BoxShadow` |
|
||
| 4 | **圆角同心设计** | 控件圆角匹配硬件圆角，嵌套时递减 | 统一 `BorderRadius` 体系（见设计令牌） |
|
||
| 5 | **内容聚焦** | 透明控件悬浮于内容之上，内容为王 | `Stack` + 半透明 `Positioned` |
|
||
|
||
### 1.2 与现有代码的映射
|
||
|
||
```
|
||
现有代码 → iOS 26 改造方向
|
||
─────────────────────────────────────────────────────
|
||
TapLiquidGlassNavigation (已有) → 保留，升级为 GlassNavBar
|
||
FloatingCupertinoTabBar (已有) → 废弃，统一用 GlassNavBar
|
||
BottomBarStyle.edge/floating (已有) → 废弃 edge，统一 floating
|
||
ThemeService.primaryColor (#2196F3) → 改为 iOS 蓝 #007AFF
|
||
ThemeService.secondaryColor (#FF9800) → 改为 iOS 橙 #FF9500
|
||
```
|
||
|
||
### 1.3 设计原则
|
||
|
||
```
|
||
1. 内容为王 — 透明控件不遮挡内容，让菜谱图片和文字成为主角
|
||
2. 一致性 — 所有页面使用统一的毛玻璃参数、圆角、间距
|
||
3. 深度感 — 通过多层叠加和投影创造空间层次
|
||
4. 流畅性 — 所有状态切换使用 250ms-350ms 的弹性动画
|
||
5. 可达性 — 触摸目标不小于 44px，文字不小于 11px
|
||
```
|
||
|
||
---
|
||
|
||
## 二、设计令牌 (Design Tokens)
|
||
|
||
> 所有页面必须基于此令牌，禁止硬编码颜色、间距、圆角。
|
||
> 若令牌中无所需值，需先在此处添加再使用。
|
||
|
||
### 2.1 颜色体系
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 主色系 │
|
||
│ 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: #1C1C1E (主文字) │
|
||
│ text2: #8E8E93 (副文字) │
|
||
│ text3: #C7C7CC (占位文字) │
|
||
│ │
|
||
│ 功能色 │
|
||
│ red: #FF3B30 (删除/退出) │
|
||
│ orange: #FF9500 (热门/推荐) │
|
||
│ green: #34C759 (成功/在线) │
|
||
└─────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2.2 圆角体系
|
||
|
||
```
|
||
radius-sm: 8px → 标签/Chip/小按钮
|
||
radius-md: 12px → 卡片/输入框/列表项
|
||
radius-lg: 20px → 大卡片/弹窗/搜索栏
|
||
radius-xl: 28px → 底栏/全屏容器/分段选择器
|
||
radius-full: 999px → 圆形头像/胶囊按钮
|
||
|
||
圆角同心规则（嵌套时内层比外层小 4-8px）:
|
||
外层 radius-xl(28) → 内层 radius-lg(20)
|
||
外层 radius-lg(20) → 内层 radius-md(12)
|
||
外层 radius-md(12) → 内层 radius-sm(8)
|
||
```
|
||
|
||
### 2.3 间距体系 (4的倍数)
|
||
|
||
```
|
||
space-1: 4px → 图标与文字间距
|
||
space-2: 8px → 紧凑元素间距
|
||
space-3: 12px → 列表项间距
|
||
space-4: 16px → 页面边距/卡片内边距
|
||
space-5: 20px → 区块间距
|
||
space-6: 24px → 大区块间距
|
||
space-7: 32px → 页面顶部间距
|
||
```
|
||
|
||
### 2.4 毛玻璃参数
|
||
|
||
```
|
||
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)
|
||
```
|
||
|
||
### 2.5 字体体系
|
||
|
||
```
|
||
font-xs: 11px → 标签/徽章
|
||
font-sm: 12px → 副文字/统计数字
|
||
font-md: 14px → 正文/列表项
|
||
font-lg: 16px → 标题/按钮
|
||
font-xl: 18px → 大标题
|
||
font-xxl: 22px → 页面主标题
|
||
```
|
||
|
||
### 2.6 阴影体系
|
||
|
||
```
|
||
shadow-sm: 0 1px 3px rgba(0,0,0,0.04) → 轻微浮起
|
||
shadow-md: 0 4px 12px rgba(0,0,0,0.06) → 卡片标准
|
||
shadow-lg: 0 8px 24px rgba(0,0,0,0.08) → 弹窗/浮层
|
||
```
|
||
|
||
### 2.7 动画体系
|
||
|
||
```
|
||
duration-fast: 150ms → 按钮点击/开关
|
||
duration-normal: 250ms → 页面切换/分段选择
|
||
duration-slow: 350ms → 弹窗/底栏展开
|
||
curve: Curves.easeInOutCubic
|
||
```
|
||
|
||
---
|
||
|
||
## 三、页面架构总览
|
||
|
||
### 3.1 Tab 结构（新方案 vs 现有）
|
||
|
||
```
|
||
现有 4Tab: 新 4Tab:
|
||
───────────────── ─────────────────
|
||
Tab0: 🏠 首页 Tab0: 🏠 首页 (信息流)
|
||
Tab1: 🛒 购物车 (实为收藏) Tab1: ❤️ 收藏
|
||
Tab2: 🕐 足迹 Tab2: 🔍 发现 (新增聚合页)
|
||
Tab3: 👤 个人中心 Tab3: 👤 我的 (简化设置)
|
||
```
|
||
|
||
**变更说明：**
|
||
- Tab1：「购物车」更名为「收藏」，图标改为 ❤️，语义更准确
|
||
- Tab2：「足迹」替换为「发现」，聚合搜索/分类/功能入口
|
||
- Tab3：「个人中心」简化为「我的」，去掉子Tab，改为纯设置列表
|
||
- 足迹功能移入「我的」设置列表中作为子页面
|
||
|
||
### 3.2 全局布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ App Shell (全局) │
|
||
│ │
|
||
│ ┌───────────────────────────────────────┐ │
|
||
│ │ ⚠️ 离线横幅 (OfflineBanner) │ │ ← 仅离线时显示
|
||
│ ├───────────────────────────────────────┤ │
|
||
│ │ │ │
|
||
│ │ Page Content Area │ │
|
||
│ │ (IndexedStack 切换) │ │
|
||
│ │ │ │
|
||
│ │ Tab0: 首页 Tab1: 收藏 │ │
|
||
│ │ Tab2: 发现 Tab3: 我的 │ │
|
||
│ │ │ │
|
||
│ ├───────────────────────────────────────┤ │
|
||
│ │ 🫧 Liquid Glass 底部导航栏 🫧 │ │
|
||
│ │ 🏠首页 ❤️收藏 🔍发现 👤我的 │ │
|
||
│ └───────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3.3 导航栏规范
|
||
|
||
```
|
||
所有页面统一使用 CupertinoPageScaffold + CupertinoNavigationBar
|
||
|
||
导航栏样式:
|
||
- 背景: 毛玻璃效果 (blur: 20, opacity: 0.72)
|
||
- 中间标题: font-xl (18px) + text1 色
|
||
- 左侧: 返回箭头 (子页面) 或 无 (Tab页)
|
||
- 右侧: 功能按钮 (图标 22px)
|
||
|
||
子页面导航栏:
|
||
- 左侧: CupertinoIcons.back (自动带返回手势)
|
||
- 右侧: 按需放置操作按钮
|
||
```
|
||
|
||
---
|
||
|
||
## 四、各页面纯文本布局演示
|
||
|
||
### 4.1 Tab0：首页（Home）
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 🍳 老妈厨房 🔔 👤 │ ← Liquid Glass 导航栏
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🔍 搜索菜谱、食材... │ │ ← 毛玻璃搜索栏
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 推荐 │ 最新 │ 热门 │ 个性 │ ← 分段选择器
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ ┌──────┐ │ │
|
||
│ │ │ 🖼️ │ 红烧排骨 │ │ ← 信息流卡片
|
||
│ │ │ │ 家常菜 · 👁 1.2k │ │
|
||
│ │ └──────┘ ❤️ 128 ⭐ 56 │ │
|
||
│ ├─────────────────────────────┤ │
|
||
│ │ ┌──────┐ │ │
|
||
│ │ │ 🖼️ │ 番茄炒蛋 │ │
|
||
│ │ │ │ 快手菜 · 👁 890 │ │
|
||
│ │ └──────┘ ❤️ 96 ⭐ 42 │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ↓ 下拉刷新 · ↑ 上拉加载更多 │
|
||
│ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**操作逻辑：**
|
||
|
||
| 操作 | 行为 | 动画 |
|
||
|------|------|------|
|
||
| 下拉 | 刷新当前信息流 | 刷新指示器旋转 |
|
||
| 上拉 | 加载更多（无限滚动） | 底部加载指示器 |
|
||
| 点击卡片 | 进入菜谱详情 | 右滑入 |
|
||
| 点击 ❤️ | 点赞 | 红心放大缩回 + 数字+1 |
|
||
| 点击 ⭐ | 推荐 | 星星旋转 + 数字+1 |
|
||
| 点击 🔔 | 通知列表 | 右滑入 |
|
||
| 分段切换 | 切换推荐/最新/热门/个性化 | 滑块平滑移动 250ms |
|
||
| 点击搜索栏 | 展开搜索页面 | 底部上滑 |
|
||
|
||
---
|
||
|
||
### 4.2 Tab1：收藏（Favorites）
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ❤️ 我的收藏 🗑️ 清空 │ ← Liquid Glass 导航栏
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ ┌──────┐ │ │
|
||
│ │ │ 🖼️ │ 红烧排骨 │ │ ← 收藏项
|
||
│ │ │ │ 家常菜 · 👁 1.2k │ │
|
||
│ │ └──────┘ ❤️ │ │
|
||
│ ├─────────────────────────────┤ │
|
||
│ │ ┌──────┐ │ │
|
||
│ │ │ 🖼️ │ 宫保鸡丁 │ │
|
||
│ │ │ │ 川菜 · 👁 2.3k │ │
|
||
│ │ └──────┘ ❤️ │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ─── 空状态 ─── │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ ❤️ │ │
|
||
│ │ 收藏夹是空的 │ │
|
||
│ │ 去首页发现美味吧 → │ │
|
||
│ │ │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 共 12 个菜谱 [清空收藏] │ │ ← 底部操作栏
|
||
│ └─────────────────────────────┘ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**操作逻辑：**
|
||
|
||
| 操作 | 行为 | 动画 |
|
||
|------|------|------|
|
||
| 左滑卡片 | 出现删除按钮 | 红色背景滑出 |
|
||
| 点击 ❤️ | 取消收藏 | 弹出确认对话框 |
|
||
| 点击「清空收藏」 | 弹出确认对话框 | 从底部弹出 |
|
||
| 空状态点击「去首页」 | 切换到首页 Tab | Tab切换动画 |
|
||
| 点击卡片 | 进入菜谱详情 | 右滑入 |
|
||
| 下拉 | 刷新收藏列表 | 刷新指示器 |
|
||
|
||
---
|
||
|
||
### 4.3 Tab2：发现（Discover）— 新增页面
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 🔍 发现 │ ← Liquid Glass 导航栏
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🔍 搜索菜谱、食材、标签... │ │ ← 毛玻璃搜索栏
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ 🏷️ 热门标签 │ ← 横向滚动区
|
||
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
|
||
│ │家常│ │快手│ │川菜│ │粤菜│ → │
|
||
│ └────┘ └────┘ └────┘ └────┘ │
|
||
│ │
|
||
│ 🎲 今天吃什么 │ ← 入口卡片（毛玻璃）
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🎰 不知道吃什么？ │ │
|
||
│ │ 让我来帮你选！ → │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ 🔥 热门排行 │ ← 入口卡片（毛玻璃）
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🥇 红烧排骨 👁 1.2k │ │
|
||
│ │ 🥈 宫保鸡丁 👁 890 │ │
|
||
│ │ 🥉 番茄炒蛋 👁 756 │ │
|
||
│ │ 查看完整排行 → │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ 📂 分类浏览 │ ← 2列网格
|
||
│ ┌──────┐ ┌──────┐ │
|
||
│ │ 🍳 │ │ 🥘 │ │
|
||
│ │家常菜 │ │快手菜 │ │
|
||
│ ├──────┤ ├──────┤ │
|
||
│ │ 🌶️ │ │ 🍜 │ │
|
||
│ │ 川菜 │ │ 粤菜 │ │
|
||
│ └──────┘ └──────┘ │
|
||
│ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**操作逻辑：**
|
||
|
||
| 操作 | 行为 | 动画 |
|
||
|------|------|------|
|
||
| 点击搜索栏 | 展开搜索页面 | 底部上滑 |
|
||
| 输入搜索 | 实时搜索结果列表 | 列表淡入 |
|
||
| 点击标签 | 筛选对应分类菜谱 | 标签高亮 + 列表刷新 |
|
||
| 点击「今天吃什么」 | 跳转 WhatToEatPage | 右滑入 |
|
||
| 点击「热门排行」 | 跳转 HotPage | 右滑入 |
|
||
| 点击排行项 | 进入菜谱详情 | 右滑入 |
|
||
| 点击分类卡片 | 进入分类菜谱列表 | 右滑入 |
|
||
| 下拉 | 刷新页面数据 | 刷新指示器 |
|
||
|
||
---
|
||
|
||
### 4.4 Tab3：我的（Profile）
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 👤 我的 │ ← Liquid Glass 导航栏
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ ┌────┐ │ │ ← 用户卡片（毛玻璃）
|
||
│ │ │ 👤 │ 美食爱好者 │ │
|
||
│ │ └────┘ user@example.com │ │
|
||
│ │ [编辑资料] [个性化] │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 📊 我的统计 │ │ ← 统计卡片
|
||
│ │ ┌────┐ ┌────┐ ┌────┐ │ │
|
||
│ │ │ 12 │ │ 56 │ │ 8 │ │ │
|
||
│ │ │收藏│ │浏览│ │点赞│ │ │
|
||
│ │ └────┘ └────┘ └────┘ │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │ ← iOS Settings 风格分组1
|
||
│ │ 🎲 今天吃什么 → │ │
|
||
│ │ ───────────────────────── │ │
|
||
│ │ 🔥 热门排行 → │ │
|
||
│ │ ───────────────────────── │ │
|
||
│ │ 👣 浏览足迹 → │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │ ← iOS Settings 风格分组2
|
||
│ │ ❤️ 口味偏好 → │ │
|
||
│ │ ───────────────────────── │ │
|
||
│ │ 🎨 个性化设置 → │ │
|
||
│ │ ───────────────────────── │ │
|
||
│ │ 🌓 主题设置 → │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │ ← iOS Settings 风格分组3
|
||
│ │ 🚪 退出登录 │ │ ← 红色文字居中
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**操作逻辑：**
|
||
|
||
| 操作 | 行为 | 动画 |
|
||
|------|------|------|
|
||
| 点击用户卡片 | 登录/编辑资料 | 右滑入 |
|
||
| 点击「个性化」 | 个性化设置页 | 右滑入 |
|
||
| 点击统计数字 | 查看详情列表 | 右滑入 |
|
||
| 点击功能项 | 跳转对应页面 | 右滑入 |
|
||
| 退出登录 | 确认对话框（红色警告） | 从底部弹出 |
|
||
|
||
---
|
||
|
||
### 4.5 🎲 今天吃什么（WhatToEat）
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ← 今天吃什么 🍽️ │ ← 返回导航
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🎲 随机 │ 🧠 智能 │ │ ← 分段选择器
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ │ │ ← 结果卡片（毛玻璃）
|
||
│ │ 🤔 │ │
|
||
│ │ 不知道吃什么？ │ │
|
||
│ │ │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🎲 开始选择 │ │ ← 主按钮（主题色）
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ 候选菜谱 (6) │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🍳 红烧排骨 ✅ │ │ ← 选中高亮
|
||
│ ├─────────────────────────────┤ │
|
||
│ │ 🥘 宫保鸡丁 │ │
|
||
│ ├─────────────────────────────┤ │
|
||
│ │ 🍜 番茄炒蛋 │ │
|
||
│ └─────────────────────────────┘ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**操作逻辑：**
|
||
|
||
| 操作 | 行为 | 动画 |
|
||
|------|------|------|
|
||
| 切换模式 | 随机 ↔ 智能 | 分段滑块移动 |
|
||
| 点击「开始选择」 | 转盘动画 → 显示结果 | 快速轮播 → 减速 → 停止 |
|
||
| 点击候选项 | 直接选中该项 | 项高亮 + 弹跳 |
|
||
| 选中后点击 | 查看菜谱详情 | 右滑入 |
|
||
| 再次点击按钮 | 重新选择 | 转盘重新旋转 |
|
||
|
||
---
|
||
|
||
### 4.6 🔥 热门排行（HotRanking）
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ← 🔥 热门排行 │
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 今日 │ 本月 │ 累计 │ │ ← 分段选择器
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🥇 红烧排骨 👁 1.2k │ │ ← 前三名特殊样式
|
||
│ ├─────────────────────────────┤ │ (金色背景 + 加粗)
|
||
│ │ 🥈 宫保鸡丁 👁 890 │ │
|
||
│ ├─────────────────────────────┤ │
|
||
│ │ 🥉 番茄炒蛋 👁 756 │ │
|
||
│ ├─────────────────────────────┤ │
|
||
│ │ 4 麻婆豆腐 👁 634 │ │ ← 普通样式
|
||
│ ├─────────────────────────────┤ │
|
||
│ │ 5 糖醋里脊 👁 521 │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ ↓ 下拉刷新 │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**操作逻辑：**
|
||
|
||
| 操作 | 行为 | 动画 |
|
||
|------|------|------|
|
||
| 切换时间段 | 今日/本月/累计 | 分段滑块移动 |
|
||
| 点击排行项 | 进入菜谱详情 | 右滑入 |
|
||
| 下拉 | 刷新排行数据 | 刷新指示器 |
|
||
|
||
---
|
||
|
||
### 4.7 🫧 Liquid Glass 底部导航栏
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ │
|
||
│ 🏠 ❤️ 🔍 👤 │ ← 图标
|
||
│ 首页 收藏 发现 我的 │ ← 文字
|
||
│ │
|
||
│ ╔═══════════════════════════════╗ │ ← 毛玻璃胶囊
|
||
│ ║ 半透明 + 模糊 + 圆角28px ║ │
|
||
│ ╚═══════════════════════════════╝ │
|
||
└─────────────────────────────────────┘
|
||
|
||
选中项:
|
||
图标: 28px + primary色 + 轻微弹跳
|
||
文字: font-sm + primary色 + FontWeight.w600
|
||
指示器: 底部小圆点 4px + primary色
|
||
|
||
未选中项:
|
||
图标: 24px + text2色
|
||
文字: font-sm + text2色 + FontWeight.w400
|
||
|
||
胶囊参数:
|
||
height: 64px
|
||
borderRadius: 36px (radius-xl+8)
|
||
padding: bottom 16px, left/right 28px
|
||
blur: 20px
|
||
opacity: 0.72
|
||
```
|
||
|
||
---
|
||
|
||
## 五、页面导航流程图
|
||
|
||
```
|
||
┌──────────┐
|
||
│ 启动页 │
|
||
└────┬─────┘
|
||
│
|
||
┌────▼─────┐
|
||
│ 主Tab页 │
|
||
└────┬─────┘
|
||
│
|
||
┌───────┬───────┼───────┬────────┐
|
||
│ │ │ │ │
|
||
┌────▼──┐ ┌──▼───┐ ┌▼────┐ ┌▼─────┐ │
|
||
│Tab0 │ │Tab1 │ │Tab2 │ │Tab3 │ │
|
||
│首页 │ │收藏 │ │发现 │ │我的 │ │
|
||
│信息流 │ │列表 │ │聚合 │ │设置 │ │
|
||
└───┬───┘ └──┬───┘ └──┬──┘ └──┬───┘ │
|
||
│ │ │ │ │
|
||
│ │ ┌───▼───┐ │ │
|
||
│ │ │搜索页 │ │ │
|
||
│ │ └───────┘ │ │
|
||
│ │ │ │
|
||
│ │ ┌───▼────┐ │ │
|
||
│ │ │今天吃 │ │ │
|
||
│ │ │什么🎲 │ │ │
|
||
│ │ └────────┘ │ │
|
||
│ │ │ │
|
||
│ │ ┌───▼────┐ │ │
|
||
│ │ │热门排行│ │ │
|
||
│ │ │🔥 │ │ │
|
||
│ │ └────────┘ │ │
|
||
│ │ │ │
|
||
│ │ ┌───▼────┐ │ │
|
||
│ │ │分类列表│ │ │
|
||
│ │ └────────┘ │ │
|
||
│ │ │ │
|
||
┌───▼────────▼────────────────▼──┐ │
|
||
│ 菜谱详情页 │ │
|
||
│ (从任何卡片/列表项进入) │ │
|
||
└────────────────────────────────┘ │
|
||
│
|
||
┌──────────────▼──┐
|
||
│ 我的 子页面 │
|
||
│ ├ 口味偏好 ❤️ │
|
||
│ ├ 个性化 🎨 │
|
||
│ ├ 主题 🌓 │
|
||
│ └ 浏览足迹 👣 │
|
||
└─────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 六、Liquid Glass 组件规范
|
||
|
||
### 6.1 毛玻璃容器 (GlassContainer)
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||
│ ▓ 内容透过毛玻璃可见 ▓ │
|
||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||
└─────────────────────────────────────┘
|
||
|
||
参数:
|
||
blur: 20.0 模糊半径
|
||
opacity: 0.45 背景透明度 (0.45-0.72)
|
||
borderRadius: 20 圆角 (radius-lg)
|
||
border: 0.5px 半透明白色边框
|
||
shadow: shadow-md 标准投影
|
||
padding: space-4 (16px)
|
||
|
||
Flutter 实现:
|
||
ClipRRect(
|
||
borderRadius: BorderRadius.circular(20),
|
||
child: BackdropFilter(
|
||
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
||
child: Container(
|
||
padding: EdgeInsets.all(16),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white.withOpacity(0.45),
|
||
borderRadius: BorderRadius.circular(20),
|
||
border: Border.all(
|
||
color: Colors.white.withOpacity(0.3),
|
||
width: 0.5,
|
||
),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.black.withOpacity(0.06),
|
||
blurRadius: 12,
|
||
offset: Offset(0, 4),
|
||
),
|
||
],
|
||
),
|
||
child: child,
|
||
),
|
||
),
|
||
)
|
||
|
||
使用场景:
|
||
- 发现页入口卡片
|
||
- 我的页用户卡片
|
||
- 今天吃什么结果卡片
|
||
```
|
||
|
||
### 6.2 分段选择器 (GlassSegmentedControl)
|
||
|
||
```
|
||
┌────────┬────────┬────────┐
|
||
│ 选中 │ 未选 │ 未选 │
|
||
│ (白底) │ (透明) │ (透明) │
|
||
└────────┴────────┴────────┘
|
||
|
||
参数:
|
||
borderRadius: 12px (radius-md)
|
||
height: 36px
|
||
padding: 4px (容器内边距)
|
||
选中背景: 白色 + shadow-sm
|
||
选中文字: primary色 + FontWeight.w600
|
||
未选文字: text2色 + FontWeight.w400
|
||
动画: 250ms easeInOutCubic
|
||
|
||
Flutter 实现:
|
||
Container(
|
||
padding: EdgeInsets.all(4),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white.withOpacity(0.3),
|
||
borderRadius: BorderRadius.circular(12),
|
||
),
|
||
child: Row(children: segments.map((s) => AnimatedContainer(
|
||
duration: Duration(milliseconds: 250),
|
||
curve: Curves.easeInOutCubic,
|
||
decoration: BoxDecoration(
|
||
color: isSelected ? Colors.white : Colors.transparent,
|
||
borderRadius: BorderRadius.circular(8),
|
||
boxShadow: isSelected ? [shadow-sm] : [],
|
||
),
|
||
child: Text(s.label, style: TextStyle(
|
||
color: isSelected ? primary : text2,
|
||
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
|
||
)),
|
||
)).toList()),
|
||
)
|
||
|
||
使用场景:
|
||
- 首页信息流类型切换 (推荐/最新/热门/个性)
|
||
- 今天吃什么模式切换 (随机/智能)
|
||
- 热门排行时间段切换 (今日/本月/累计)
|
||
```
|
||
|
||
### 6.3 搜索栏 (GlassSearchBar)
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ 🔍 搜索菜谱... │
|
||
└─────────────────────────────────┘
|
||
|
||
参数:
|
||
height: 40px
|
||
borderRadius: 12px (radius-md)
|
||
padding: 12px horizontal
|
||
背景: glass (rgba(255,255,255,0.45))
|
||
图标: CupertinoIcons.search, 18px, text3色
|
||
占位符: text3色, font-md
|
||
输入文字: text1色, font-md
|
||
|
||
Flutter 实现:
|
||
ClipRRect(
|
||
borderRadius: BorderRadius.circular(12),
|
||
child: BackdropFilter(
|
||
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
||
child: Container(
|
||
height: 40,
|
||
padding: EdgeInsets.symmetric(horizontal: 12),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white.withOpacity(0.45),
|
||
borderRadius: BorderRadius.circular(12),
|
||
),
|
||
child: Row(children: [
|
||
Icon(CupertinoIcons.search, size: 18, color: text3),
|
||
SizedBox(width: 8),
|
||
Text('搜索菜谱...', style: TextStyle(color: text3, fontSize: 14)),
|
||
]),
|
||
),
|
||
),
|
||
)
|
||
|
||
使用场景:
|
||
- 首页顶部搜索栏
|
||
- 发现页顶部搜索栏
|
||
```
|
||
|
||
### 6.4 信息流卡片 (GlassFeedCard)
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🖼️ 图片区域 │ │ ← 16:9 比例
|
||
│ │ (顶部圆角16) │ │ 圆角 radius-lg
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ 标题 🏷️标签 │ ← 标题 font-lg + text1
|
||
│ │ 标签 radius-sm + primaryLight底
|
||
│ 简介文字... │ ← font-sm + text2 + 2行截断
|
||
│ │
|
||
│ 👁 1.2k ❤️ 128 ⭐ 56 🔥 78 │ ← 互动栏 font-sm + text2
|
||
└─────────────────────────────────┘
|
||
|
||
参数:
|
||
borderRadius: 16px (radius-lg)
|
||
背景: card (#FFFFFF)
|
||
shadow: shadow-md
|
||
图片区: 16:9 比例 + 顶部圆角
|
||
内边距: space-4 (16px)
|
||
标签: primaryLight底 + primary色文字 + radius-sm
|
||
互动栏: 图标16px + 数字 + 水平排列
|
||
|
||
使用场景:
|
||
- 首页信息流列表
|
||
- 搜索结果列表
|
||
- 分类菜谱列表
|
||
```
|
||
|
||
### 6.5 设置列表项 (GlassSettingsTile)
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ 🎨 个性化设置 → │
|
||
└─────────────────────────────────┘
|
||
|
||
参数:
|
||
height: 48px (最小)
|
||
padding: 14px vertical + 16px horizontal
|
||
图标: 20px + primary色
|
||
标题: font-md + text1色
|
||
箭头: 16px + text3色 (CupertinoIcons.chevron_forward)
|
||
分隔线: 0.5px + text3色 10%透明度
|
||
背景: card (#FFFFFF)
|
||
borderRadius: 分组容器 radius-lg (20px)
|
||
|
||
分组样式:
|
||
┌─────────────────────────────┐
|
||
│ 项1 → │ ← 无顶部分隔线
|
||
│ ───────────────────────── │ ← 分隔线 (缩进16px)
|
||
│ 项2 → │
|
||
│ ───────────────────────── │
|
||
│ 项3 → │ ← 无底部分隔线
|
||
└─────────────────────────────┘
|
||
分组间距: space-6 (24px)
|
||
|
||
使用场景:
|
||
- 我的页功能列表
|
||
- 设置页选项列表
|
||
```
|
||
|
||
### 6.6 底部导航栏 (GlassNavBar)
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ │
|
||
│ 🏠 ❤️ 🔍 👤 │
|
||
│ 首页 收藏 发现 我的 │
|
||
│ │
|
||
│ ╔═══════════════════════════════╗ │
|
||
│ ║ 半透明 + 模糊 + 圆角36px ║ │
|
||
│ ╚═══════════════════════════════╝ │
|
||
└─────────────────────────────────────┘
|
||
|
||
参数:
|
||
height: 64px
|
||
borderRadius: 36px
|
||
padding: bottom 16px, left/right 28px
|
||
blur: 20px
|
||
opacity: 0.72
|
||
背景: primary色 + opacity
|
||
shadow: 0 6px 12px rgba(0,0,0,0.08)
|
||
|
||
选中项:
|
||
图标: 28px + primary色
|
||
文字: font-sm (12px) + primary色 + w600
|
||
指示器: 底部圆点 4px + primary色
|
||
|
||
未选中项:
|
||
图标: 24px + text2色 65%透明度
|
||
文字: font-sm (12px) + text2色 + w400
|
||
|
||
Flutter 实现: (基于现有 TapLiquidGlassNavigation 升级)
|
||
- 添加文字标签
|
||
- 添加选中指示器
|
||
- 更新图标为: home/heart/search/person
|
||
- 更新颜色为 iOS 系统色
|
||
|
||
使用场景:
|
||
- 全局底部导航 (MainTabView)
|
||
```
|
||
|
||
---
|
||
|
||
## 七、关键改进点（对比现有设计）
|
||
|
||
| # | 现有问题 | iOS 26 改进 | 涉及文件 |
|
||
|---|---------|------------|---------|
|
||
| 1 | 底栏 edge/floating 两种风格 | 统一为 Liquid Glass 胶囊底栏，废弃 edge | `main_tab_view.dart` |
|
||
| 2 | Tab1 名为「购物车」实为收藏 | 改名为「收藏 ❤️」，图标改为 heart | `main_tab_view.dart`, `tap_liquid_glass_nav.dart` |
|
||
| 3 | 缺少「发现」页 | 新增发现页聚合搜索/分类/功能入口 | 新建 `discover_page.dart` |
|
||
| 4 | Tab2「足迹」独立占Tab | 足迹移入「我的」子页面，Tab2改为发现 | `main_tab_view.dart`, `profile_page.dart` |
|
||
| 5 | 个人中心有子Tab切换 | 去掉子Tab，改为纯设置列表 | `profile_page.dart` |
|
||
| 6 | 搜索栏位置不固定 | 首页/发现页顶部固定搜索栏 | `home_page.dart` |
|
||
| 7 | 卡片样式不统一 | 统一 GlassFeedCard 组件 | 新建 `glass_feed_card.dart` |
|
||
| 8 | 缺少分类浏览入口 | 发现页增加分类网格 | `discover_page.dart` |
|
||
| 9 | 主色 #2196F3 不够 iOS | 改为 iOS 蓝 #007AFF | `theme_service.dart` |
|
||
| 10 | 导航栏样式不统一 | 全部使用毛玻璃导航栏 | 所有页面 |
|
||
|
||
---
|
||
|
||
## 八、暗色模式适配
|
||
|
||
Liquid Glass 在暗色模式下效果更佳，参数调整如下：
|
||
|
||
### 8.1 暗色颜色映射
|
||
|
||
```
|
||
亮色 → 暗色
|
||
──────────────────────────────────────────
|
||
primary: #007AFF → #0A84FF (iOS 暗色蓝)
|
||
secondary: #FF9500 → #FF9F0A (iOS 暗色橙)
|
||
background: #F2F2F7 → #000000 (纯黑)
|
||
card: #FFFFFF → #1C1C1E (深灰)
|
||
cardAlpha: rgba(255,255,255,0.72) → rgba(28,28,30,0.72)
|
||
text1: #1C1C1E → #FFFFFF
|
||
text2: #8E8E93 → #8E8E93 (不变)
|
||
text3: #C7C7CC → #48484A
|
||
red: #FF3B30 → #FF453A
|
||
green: #34C759 → #30D158
|
||
```
|
||
|
||
### 8.2 暗色毛玻璃参数
|
||
|
||
```
|
||
亮色 → 暗色
|
||
──────────────────────────────────────────
|
||
glass: rgba(255,255,255,0.45) → rgba(28,28,30,0.45)
|
||
glassBorder: rgba(255,255,255,0.3) → rgba(255,255,255,0.15)
|
||
glassShadow: rgba(0,0,0,0.06) → rgba(0,0,0,0.3)
|
||
blur: 20px → 25px (暗色下模糊略强)
|
||
```
|
||
|
||
### 8.3 暗色特殊处理
|
||
|
||
```
|
||
- 分段选择器选中背景: #2C2C2E (暗色卡片色)
|
||
- 搜索栏背景: rgba(28,28,30,0.45)
|
||
- 底栏背景: primary色暗色 + 0.72透明度
|
||
- 前三名排行: 金色背景改为深金色 rgba(255,204,0,0.15)
|
||
- 设置列表分组: #1C1C1E 背景
|
||
```
|
||
|
||
---
|
||
|
||
## 九、响应式适配
|
||
|
||
### 9.1 断点定义
|
||
|
||
```
|
||
手机: 360px – 640px → 单列布局
|
||
折叠屏: 600px – 900px → 自动双列
|
||
平板: 768px – 1024px → 双列布局
|
||
桌面: 1280px+ → 多列布局
|
||
```
|
||
|
||
### 9.2 各页面响应式规则
|
||
|
||
```
|
||
首页信息流:
|
||
手机: 单列卡片全宽
|
||
平板: 双列卡片
|
||
桌面: 三列卡片
|
||
|
||
发现页:
|
||
手机: 分类网格 2列
|
||
平板: 分类网格 3列
|
||
桌面: 分类网格 4列
|
||
|
||
收藏页:
|
||
手机: 单列列表
|
||
平板: 双列网格
|
||
桌面: 三列网格
|
||
|
||
我的页:
|
||
手机: 全宽设置列表
|
||
平板: 居中 max-width: 600px
|
||
桌面: 居中 max-width: 600px
|
||
```
|
||
|
||
### 9.3 底栏响应式
|
||
|
||
```
|
||
手机: 胶囊底栏 left/right 28px
|
||
平板: 胶囊底栏 left/right 48px
|
||
桌面: 可选侧边导航栏替代底栏
|
||
```
|
||
|
||
---
|
||
|
||
## 十、实施计划
|
||
|
||
### 阶段一：基础设施（设计令牌 + 组件库）
|
||
|
||
> 优先级: P0 | 预计涉及文件: 8个
|
||
|
||
| # | 任务 | 涉及文件 | 状态 |
|
||
|---|------|---------|------|
|
||
| 1 | 创建 `DesignTokens` 类 | 新建 `config/design_tokens.dart` | ✅ |
|
||
| 2 | 创建 `GlassContainer` 组件 | 新建 `widgets/glass/glass_container.dart` | ✅ |
|
||
| 3 | 创建 `GlassSegmentedControl` 组件 | 新建 `widgets/glass/glass_segmented_control.dart` | ✅ |
|
||
| 4 | 创建 `GlassSearchBar` 组件 | 新建 `widgets/glass/glass_search_bar.dart` | ✅ |
|
||
| 5 | 创建 `GlassFeedCard` 组件 | 新建 `widgets/glass/glass_feed_card.dart` | ✅ |
|
||
| 6 | 创建 `GlassSettingsTile` 组件 | 新建 `widgets/glass/glass_settings_tile.dart` | ✅ |
|
||
| 7 | 升级 `GlassNavBar` 组件 | 新建 `widgets/glass/glass_nav_bar.dart` | ✅ |
|
||
| 8 | 更新 `ThemeService` 适配新令牌 | 修改 `services/ui/theme_service.dart` | ✅ |
|
||
|
||
### 阶段二：Tab 结构重构
|
||
|
||
> 优先级: P0 | 预计涉及文件: 4个
|
||
|
||
| # | 任务 | 涉及文件 | 状态 |
|
||
|---|------|---------|------|
|
||
| 1 | 修改 `MainTabView` 4Tab 新方案 | 修改 `widgets/navigation/main_tab_view.dart` | ✅ |
|
||
| 2 | 废弃 edge 样式，统一 floating | 修改 `main_tab_view.dart` | ✅ |
|
||
| 3 | 更新导航图标和标签 | 新建 `widgets/glass/glass_nav_bar.dart` | ✅ |
|
||
| 4 | 更新路由和导航控制器 | 修改 `routes/app_routes.dart` | ✅ |
|
||
|
||
### 阶段三：页面改造
|
||
|
||
> 优先级: P1 | 预计涉及文件: 6个
|
||
|
||
| # | 任务 | 涉及文件 | 状态 |
|
||
|---|------|---------|------|
|
||
| 1 | 首页改造：搜索栏 + 分段选择器 + 信息流卡片 | 修改 `pages/home_page.dart` | ✅ |
|
||
| 2 | 收藏页改造：统一卡片样式 | 新建 `pages/favorites/favorites_page.dart` | ✅ |
|
||
| 3 | 新增发现页 | 新建 `pages/discover/discover_page.dart` | ✅ |
|
||
| 4 | 我的页改造：GlassSegmentedControl | 修改 `pages/profile_page.dart` | ✅ |
|
||
| 5 | 今天吃什么页升级 | 修改 `pages/what_to_eat/what_to_eat_page.dart` | ✅ |
|
||
| 6 | 热门排行页升级 | 修改 `pages/hot/hot_page.dart` | ✅ |
|
||
|
||
### 阶段四：细节打磨
|
||
|
||
> 优先级: P2 | 预计涉及文件: 多个
|
||
|
||
| # | 任务 | 状态 |
|
||
|---|------|------|
|
||
| 1 | 暗色模式全面适配 | ✅ |
|
||
| 2 | 动画效果优化（点赞/推荐/切换） | ✅ |
|
||
| 3 | 响应式布局测试（手机/平板/横屏） | ✅ |
|
||
| 4 | 性能优化（毛玻璃渲染优化） | ⬜ |
|
||
| 5 | 无障碍适配（语义标签/对比度） | ⬜ |
|
||
|
||
---
|
||
|
||
## 附录：文件结构规划
|
||
|
||
```
|
||
lib/src/
|
||
├── config/
|
||
│ └── design_tokens.dart ← 设计令牌 (新增)
|
||
├── widgets/
|
||
│ ├── glass/ ← Liquid Glass 组件 (新增目录)
|
||
│ │ ├── glass_container.dart
|
||
│ │ ├── glass_segmented_control.dart
|
||
│ │ ├── glass_search_bar.dart
|
||
│ │ ├── glass_feed_card.dart
|
||
│ │ ├── glass_settings_tile.dart
|
||
│ │ └── glass_nav_bar.dart
|
||
│ ├── base/
|
||
│ │ └── tap_liquid_glass_nav.dart ← 升级为 glass_nav_bar
|
||
│ ├── states/
|
||
│ │ ├── offline_banner.dart
|
||
│ │ ├── empty_state.dart
|
||
│ │ └── error_state.dart
|
||
│ └── navigation/
|
||
│ └── main_tab_view.dart ← 重构 4Tab
|
||
├── pages/
|
||
│ ├── home_page.dart ← Tab0 首页 (改造)
|
||
│ ├── favorites/ ← Tab1 收藏 (重命名 cart→favorites)
|
||
│ │ └── favorites_page.dart
|
||
│ ├── discover/ ← Tab2 发现 (新增)
|
||
│ │ └── discover_page.dart
|
||
│ ├── profile_page.dart ← Tab3 我的 (改造)
|
||
│ ├── what_to_eat/
|
||
│ │ └── what_to_eat_page.dart ← 升级
|
||
│ ├── hot/
|
||
│ │ └── hot_page.dart ← 升级
|
||
│ └── settings/
|
||
│ ├── preference_page.dart
|
||
│ ├── personalization_page.dart
|
||
│ └── theme_demo_page.dart
|
||
└── services/
|
||
└── ui/
|
||
└── theme_service.dart ← 适配新令牌
|
||
```
|
||
|
||
---
|
||
|
||
## 变更记录
|
||
|
||
| 日期 | 版本 | 变更内容 |
|
||
|------|------|---------|
|
||
| 2026-04-09 | 1.1 | 重写完整文档：增加目录、设计原则、动画规范、暗色模式详细参数、响应式规则、实施计划状态追踪 |
|
||
| 2026-04-09 | 1.0 | 初始版本：基础设计方案 |
|