Files
kitchen/docs/dev/PAGE_STRUCTURE_ANALYSIS.md
2026-04-17 07:00:26 +08:00

55 KiB
Raw Blame History

📱 APP 页面结构分析

创建: 2026-04-13 | 用途: 页面结构可视化 + 跳转关系 + 美观/功能问题分析 + 改进建议 跳转图例: [→ 页面名] = Get.toNamed跳转, [⇥ Tab切换] = 底部Tab切换, [↑ 返回] = Get.back/Get.until


🏗️ 全局导航图

                        ┌─────────────┐
                        │  MainTabView │
                        └──────┬──────┘
              ┌────────┬───────┼───────┬────────┐
              ⇥        ⇥       ⇥       ⇥
          ┌───┴──┐ ┌───┴──┐ ┌─┴──┐ ┌──┴──┐
          │🏠首页│ │🔍发现│ │🛠️工具│ │👤我的│
          └──┬───┘ └──┬───┘ └─┬──┘ └──┬──┘
             │        │       │       │
    ┌────────┼────────┼───────┼───────┼────────────┐
    │        │        │       │       │            │
    ↓        ↓        ↓       ↓       ↓            ↓
 [→搜索]  [→详情]  [→分类]  [→计时]  [→收藏]    [→数据]
 [→详情]  [→标签]  [→标签]  [→换算]  [→足迹]    [→营养]
 [→分类]  [→热门]  [→吃什么] [→BMI]  [→笔记]    [→设置]
 [→标签]  [→搜索]          [→缩放]  [→购物]    [→反馈]
 [→高级]  [→详情]          [→过敏]  [→聊天]    [→就寝]
                                  [→时段]
                                  [→食材]
                                  [→菜单]

🏠 首页 (HomePage)

┌─────────────────────────────┐
│  HomeAppBar (双层)           │
│  ┌───────────────────────┐  │
│  │ 🍳 小妈厨房    🔔     │  │ ← 固定顶栏
│  └───────────────────────┘  │
│  ┌───────────────────────┐  │
│  │ 🔍 搜索框  [→搜索页]   │  │ ← 可折叠副栏,点击跳转
│  └───────────────────────┘  │
├─────────────────────────────┤
│                             │
│  ┌─────────────────────┐   │
│  │ 📊 营养追踪仪表盘    │   │ ← NutritionDashboardCard
│  │  热量/蛋白质/碳水/脂肪 │   │   [→营养中心页]
│  └─────────────────────┘   │
│                             │
│  ┌──┐ ┌──┐ ┌──┐ ┌──┐     │
│  │📖│ │🥬│ │📂│ │👅│     │ ← Discover瀑布流
│  │菜│ │食│ │分│ │标│     │   (MasonryGridView 2列)
│  │品│ │材│ │类│ │签│     │
│  │ ↓│ │ ↓│ │ ↓│ │ ↓│     │
│  └──┘ └──┘ └──┘ └──┘     │
│  ┌──┐ ┌──┐                 │
│  │🍳│ │🕐│                 │
│  │工│ │时│                 │
│  │艺│ │段│                 │
│  └──┘ └──┘                 │
│                             │
│  🔄 刷新加载更多  35/80     │
│  ═══════════░░░░░░░░       │ ← 进度条
│  最后更新: 5分钟前          │
│                             │
└─────────────────────────────┘

<EFBFBD> 页面视图文件

  • lib/src/pages/home/home_page.dart(主页面)
  • lib/src/pages/home/home_recommended.dart(瀑布流推荐)

<EFBFBD> 跳转关系

触发元素 跳转方式 目标页面 路由 传参
搜索框 Get.toNamed 搜索页 /search keyword
菜品卡片 Get.toNamed 菜品详情页 /recipe-detail id
食材卡片 Get.toNamed 搜索页 /search keyword=食材名
分类卡片 Get.toNamed 分类浏览页 /category-browse category, title
口味标签 Get.toNamed 标签菜谱列表 /tag-recipe-list tagName, tagId, tagType=taste
工艺标签 Get.toNamed 标签菜谱列表 /tag-recipe-list tagName, tagId, tagType=cooking
时段卡片 Get.toNamed 搜索页 /search keyword=时段名
营养仪表盘 Get.toNamed 营养中心 /nutrition -

🎨 美观问题

# 问题 严重度 建议
1 营养仪表盘与瀑布流风格不统一仪表盘偏Material风格 🟡 统一为Liquid Glass卡片风格
2 瀑布流卡片间距不够精致,部分卡片高度差异过大 🟡 调整MasonryGridView crossAxisSpacing/mainAxisSpacing
3 搜索框折叠动画与滚动不够丝滑 🟢 使用AnimationController替代AnimatedSlide
4 底部刷新按钮区域视觉过重,占用空间大 🟡 精简为小按钮+进度文字

功能缺失

# 功能 优先级 说明
1 下拉刷新 P2 当前只有底部刷新按钮,缺少下拉手势
2 个性化推荐 P3 瀑布流为随机数据,未基于用户偏好
3 卡片长按菜单 P3 长按卡片可收藏/分享/不感兴趣

🔍 发现页 (DiscoverPage)

┌─────────────────────────────┐
│  发现                       │
│  ┌───────────────────────┐  │
│  │ 🔍 搜索框  [→搜索页]   │  │ ← GlassSearchBar点击跳转
│  └───────────────────────┘  │
│                             │
│  ┌───────────────────────┐  │
│  │📖推荐│🔥热门│🎲吃什么  │  │ ← GlassSegmentedControl
│  └───────────────────────┘  │
│                             │
│  ── 推荐 Tab ──             │
│  ┌───────────────────────┐  │
│  │📖菜谱│🥬食材│👅口味│🍳工艺│  │ ← 4段子分类
│  └───────────────────────┘  │
│  ┌──┐ ┌──┐ ┌──┐           │
│  │分类│ │分类│ │分类│         │ ← 分类/标签网格
│  │ ↓│  │ ↓│  │ ↓│          │
│  └──┘ └──┘ └──┘           │
│                             │
│  ── 热门 Tab ──             │
│  [→热门排行页]              │ ← 嵌入HotPage
│                             │
│  ── 今天吃什么 Tab ──       │
│  [→今天吃什么页]            │ ← 嵌入WhatToEatPage
│                             │
└─────────────────────────────┘

📄 页面视图文件

  • lib/src/pages/discover/discover_page.dart(主页面)
  • lib/src/pages/discover/hot_page.dart热门排行Tab

🔗 跳转关系

触发元素 跳转方式 目标页面 路由 传参
搜索框 Get.toNamed 搜索页 /search -
菜谱分类卡片 Get.toNamed 分类浏览页 /category-browse category, title
食材分类卡片 Get.toNamed 分类浏览页 /category-browse category, title, isIngredient=true
口味标签 Get.toNamed 标签菜谱列表 /tag-recipe-list tagName, tagId, tagType=taste
工艺标签 Get.toNamed 标签菜谱列表 /tag-recipe-list tagName, tagId, tagType=cooking
热门Tab 嵌入页面 热门排行页 /hot -
吃什么Tab 嵌入页面 今天吃什么 /what-to-eat -
热门菜谱卡片 Get.toNamed 菜品详情页 /recipe-detail id

🎨 美观问题

# 问题 严重度 建议
1 推荐4段子分类(菜谱/食材/口味/工艺)切换无过渡动画 🟡 添加AnimatedSwitcher或PageView
2 分类网格卡片样式单调,缺少图标/封面图 🟡 分类卡片增加emoji图标或渐变色背景
3 热门排行榜列表项间距过密 🟢 增加列表项间距
4 "今天吃什么"页面视觉冲击力不足 🟡 大卡片+动画翻转效果

功能缺失

# 功能 优先级 说明
1 搜索历史 P2 搜索框点击后无历史记录展示
2 热门排行榜分时段 P3 日榜/周榜/月榜切换
3 今天吃什么筛选条件 P2 可按口味/难度/时间筛选随机推荐

🔍 搜索页 (SearchPage)

┌─────────────────────────────┐
│  ← [↑返回] 🔍 搜索框  ⚙️   │ ← ⚙️ [→高级搜索页]
├─────────────────────────────┤
│                             │
│  ── 空状态 ──               │
│  🔥 热门搜索               │
│  ┌────┐┌────┐┌────┐       │
│  │红烧肉││鸡汤││蛋糕│       │ ← 点击 [→搜索页] 自动搜索
│  └────┘└────┘└────┘       │
│                             │
│  ── 搜索结果 ──             │
│  📖菜谱(5)│🥬食材(3)│👅口味│ ← 动态Tab
│                             │
│  ┌─────────────────────┐   │
│  │ 🖼️  红烧肉          │   │ ← 菜谱卡片 [→详情页]
│  │     ⭐4.5  👁1.2k   │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🥬 鸡蛋  分类:蛋类   │   │ ← 食材卡片 [→食材详情]
│  │    📖 128个菜谱      │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 👅 咸鲜  56道菜谱    │   │ ← 标签卡片 [→标签列表]
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘

<EFBFBD> 页面视图文件

  • lib/src/pages/home/search_page.dart(主页面)
  • lib/src/controllers/search_controller.dart(搜索控制器)

<EFBFBD> 跳转关系

触发元素 跳转方式 目标页面 路由 传参
← 返回 Get.back 上一个页面 - -
⚙️ 高级搜索 Get.toNamed 高级搜索页 /advanced-search -
热门搜索词 本页搜索 本页 - keyword
菜谱结果卡片 Get.toNamed 菜品详情页 /recipe-detail id
食材结果卡片 Get.toNamed 食材详情页 /tools/ingredient ingredientId, ingredientName
口味标签结果 Get.toNamed 标签菜谱列表 /tag-recipe-list tagName, tagId, tagType=taste
工艺标签结果 Get.toNamed 标签菜谱列表 /tag-recipe-list tagName, tagId, tagType=cooking

🎨 美观问题

# 问题 严重度 建议
1 热门搜索标签样式过于朴素 🟡 使用毛玻璃胶囊标签+渐变色
2 搜索结果卡片间距不统一 🟢 统一使用DesignTokens.space3
3 Tab切换无滑动指示器 🟡 添加下划线滑动动画

功能缺失

# 功能 优先级 说明
1 搜索历史记录 P2 本地保存最近搜索词
2 搜索建议/自动补全 P3 输入时实时显示建议
3 搜索结果分页加载 P2 当前一次加载20条无分页

⚙️ 高级搜索页 (AdvancedSearchPage)

┌─────────────────────────────┐
│  ← [↑返回]  高级搜索        │
├─────────────────────────────┤
│                             │
│  📂 菜谱分类                │
│  ┌──┐┌──┐┌──┐┌──┐         │
│  │家常││川菜││粤菜││湘菜│     │
│  └──┘└──┘└──┘└──┘         │
│                             │
│  <20> 口味标签                │
│  ┌──┐┌──┐┌──┐┌──┐         │
│  │咸鲜││酱香││麻辣││清淡│     │
│  └──┘└──┘└──┘└──┘         │
│                             │
│  🍳 工艺标签                │
│  ┌──┐┌──┐┌──┐┌──┐         │
│  │红烧│ │清蒸│ │炒│ │炖│     │
│  └──┘ └──┘ └──┘ └──┘     │
│                             │
│  🕐 用餐时段                │
│  ┌──┐┌──┐┌──┐             │
│  │早餐│ │午餐│ │晚餐│         │
│  └──┘└──┘└──┘             │
│                             │
│  ┌─────────────────────┐   │
│  │   🔍 搜索            │   │ ← [↑返回搜索页] 执行筛选
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │   🔄 重置            │   │
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘

📄 页面视图文件

  • lib/src/pages/home/advanced_search_page.dart(主页面)
  • lib/src/repositories/recipe_repository.dart(数据源)

🔗 跳转关系

触发元素 跳转方式 目标页面 路由 传参
← 返回 Get.back 搜索页 - -
🔍 搜索按钮 Get.back + 搜索页刷新 搜索页 /search tasteName/cookingName/categoryId

<EFBFBD><EFBFBD> 菜品详情页 (RecipeDetailPage)

┌─────────────────────────────┐
│  ← [↑返回]  菜谱详情        │
├─────────────────────────────┤
│  ┌─────────────────────┐   │
│  │                     │   │
│  │   🖼️ 封面大图       │   │ ← RecipeCoverImage
│  │        ⭐ 4.5       │   │ ← 评分徽章
│  │                     │   │
│  └─────────────────────┘   │
│                             │
│  📝 红烧肉                  │ ← RecipeTitleSection
│  📂 家常菜 > 红烧           │ ← [→分类浏览页] 非末级可点击
│                             │
│  👁1.2k  ❤56  ⭐4.5  💬0  │ ← RecipeStatisticsBar
│                             │
│  🏷️ 咸鲜 > 酱香 > 下饭菜   │ ← [→标签列表页] 标签可点击
│                             │
│  ┌─────────────────────┐   │
│  │ ⏱️ 30分  📊 中等    │   │ ← RecipeTimeInfo
│  │ 👤 2人份            │   │
│  └─────────────────────┘   │
│                             │
│  ── 🥬 食材 ──             │
│  ┌─────────────────────┐   │
│  │ 主料: 五花肉500g  [→食材]│ ← 食材名可点击
│  │ 辅料: 生抽/老抽/糖 [→食材]│
│  └─────────────────────┘   │
│                             │
│  ── 👨‍🍳 步骤 ──             │
│  ┌─────────────────────┐   │
│  │ Step 1: 切肉...     │   │ ← RecipeStepsSection
│  │ Step 2: 煎炒...     │   │
│  │ Step 3: 炖煮...     │   │
│  └─────────────────────┘   │
│                             │
│  ── 📊 营养 ──             │
│  ┌─────────────────────┐   │
│  │ 热量: 380kcal       │   │ ← RecipeNutritionSection
│  │ 蛋白质/碳水/脂肪     │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ❤️ 点赞  ⭐ 评分  📤分享│ ← RecipeActionBar
│  │         📝 笔记      │   │   [→笔记页]
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘

<EFBFBD> 页面视图文件

  • lib/src/pages/home/recipe_detail_page.dart(主页面)
  • lib/src/widgets/recipe_detail/recipe_statistics_bar.dart(统计栏组件)

<EFBFBD> 跳转关系

触发元素 跳转方式 目标页面 路由 传参
← 返回 Get.back 上一个页面 - -
分类面包屑 Get.toNamed 分类浏览页 /category-browse category, title
口味/工艺标签 Get.toNamed 标签菜谱列表 /tag-recipe-list tagName, tagId, tagType
食材名称 Get.toNamed 食材详情页 /tools/ingredient ingredientId, ingredientName
📝 笔记按钮 Get.toNamed 烹饪笔记页 /cooking-note recipeId, recipeTitle, recipeInfo
📤 分享按钮 系统分享 iOS Share Sheet - -
❤️ 点赞按钮 API调用 本页更新 - -
评分按钮 API调用 本页弹窗 - -

🎨 美观问题

# 问题 严重度 建议
1 封面图与标题之间缺少视觉过渡 🟡 封面图底部添加渐变遮罩
2 步骤区域纯文字,缺少步骤图 🟡 支持显示步骤配图(如有)
3 食材区域排版过于紧凑 🟢 增加主料/辅料分组间距
4 底部操作栏与内容区无分隔 🟡 添加毛玻璃分隔条
5 营养数据纯文字展示,缺少可视化 🟡 添加环形图/进度条展示占比

功能缺失

# 功能 优先级 说明
1 🔗 相关菜谱推荐 P2 详情页底部推荐相似菜品
2 📝 烹饪模式 P2 全屏步骤+计时器+防息屏
3 💬 评论列表 P3 展示用户评论(需后端)
4 ⚠️ 过敏原警示 P2 食材含过敏原时显示警告
5 📱 二维码海报 P3 生成菜谱分享图

🛠️ 工具中心 (ToolsCenterPage)

┌─────────────────────────────┐
│  🛠️ 工具箱                  │
│  ┌───────────────────────┐  │
│  │ 🔍 搜索工具            │  │
│  └───────────────────────┘  │
│                             │
│  ── 🍳 烹饪助手 ──         │
│  ┌──┐ ┌──┐                 │  ← GridView 2列布局
│  │⏱️│ │📝│                 │
│  │计时│ │笔记│               │
│  │ ↓│  │ ↓│                │
│  │使用│ │使用│  ← 新增"使用工具"按钮
│  └──┘ └──┘                 │
│                             │
│  ── 📋 规划管理 ──         │
│  ┌──┐ ┌──┐                 │
│  │📅│ │🛒│                 │
│  │菜单│ │购物│               │
│  └──┘ └──┘                 │
│                             │
│  ── 🏥 健康工具 ──         │
│  ┌──┐ ┌──┐                 │
│  │BMI│ │🌙│                 │
│  │计算│ │就寝│               │
│  └──┘ └──┘                 │
│                             │
│  ── 🏷️ 热门标签 ──         │
│  ┌────┐┌────┐┌────┐       │
│  │咸鲜 ││酱香 ││清淡 │       │ ← [→标签列表页]
│  └────┘└────┘└────┘       │
│                             │
└─────────────────────────────┘

📄 页面视图文件

  • lib/src/pages/tools/tools_center_page.dart(主页面)
  • lib/src/widgets/glass/glass_container.dart(毛玻璃卡片)

🔗 跳转关系

触发元素 跳转方式 目标页面 路由 传参
⏱️ 烹饪计时 Get.toNamed 烹饪计时器 /cooking-timer -
📝 烹饪笔记 Get.toNamed 烹饪笔记页 /cooking-note recipeId, recipeTitle
🧮 用量换算 Get.toNamed 单位换算页 /unit-converter -
📅 每周菜单 Get.toNamed 菜单规划页 /tools/weekly-menu -
🛒 购物清单 Get.toNamed 购物清单页 /shopping-list -
⚖️ 份量缩放 Get.toNamed 份量缩放页 /serving-scaler ingredients, servings
BMI计算 Get.toNamed BMI计算器 /bmi-calculator -
🌙 就寝提醒 Get.toNamed 就寝提醒页 /profile/bedtime-reminder -
热门标签 Get.toNamed 标签菜谱列表 /tag-recipe-list tagName, tagId, tagType
🎮 使用工具按钮 Get.toNamed 工具功能页 工具对应路由 -

🎨 美观问题

# 问题 严重度 建议
1 工具图标+文字卡片样式过于简单 🟡 增加渐变背景或毛玻璃效果
2 分组标题缺少视觉层次 🟢 添加分组图标和分割线
3 热门标签区域与工具卡片风格不一致 🟡 统一为毛玻璃胶囊样式

功能缺失

# 功能 优先级 说明
1 用餐时段推荐 P2 eating_times.json数据已有缺页面入口
2 过敏原检测器增强 P2 当前仅展示,缺智能过滤
3 工具使用统计 P3 展示常用工具排行

👤 我的 (ProfilePage)

┌─────────────────────────────┐
│  我的                       │
│  ┌───────────────────────┐  │
│  │ 🏠 首页 │ ⚙️ 更多    │  │ ← GlassSegmentedControl
│  └───────────────────────┘  │
│                             │
│  ── 首页 Tab ──             │
│  ┌───────────────────────┐  │
│  │ 🧑 用户头像            │  │
│  │ 美食爱好者             │  │
│  │ ⭐ Lv.5 烹饪达人      │  │
│  └───────────────────────┘  │
│                             │
│  ┌──┐┌──┐┌──┐┌──┐         │
│  │❤️││👀││📝││🛒│         │ ← 功能入口
│  │收藏││足迹││笔记││购物│         │
│  │ ↓│ │ ↓│ │ ↓│ │ ↓│      │
│  └──┘└──┘└──┘└──┘         │
│                             │
│  ┌──┐┌──┐┌──┐┌──┐         │
│  │⏱️│ │🔄│ │📊│ │⚖️│         │ ← 工具快捷
│  │计时│ │换算│ │BMI│ │缩放│         │
│  │ ↓│  │ ↓│  │ ↓│  │ ↓│    │
│  └──┘ └──┘ └──┘ └──┘     │
│                             │
│  ── 更多 Tab ──             │
│  ┌───────────────────────┐  │
│  │ 📊 数据管理中心  [→]   │  │
│  │ 🎨 个性化设置    [→]   │  │
│  │ 🗑️ 缓存管理     [→]   │  │
│  │ 🌙 就寝提醒     [→]   │  │
│  │ 📋 营养中心     [→]   │  │
│  │ 💬 意见反馈     [→]   │  │
│  └───────────────────────┘  │
│                             │
└─────────────────────────────┘

<EFBFBD> 页面视图文件

  • lib/src/pages/profile/profile_page.dart(主页面)
  • lib/src/pages/profile/profile_home.dart首页Tab

<EFBFBD> 跳转关系

触发元素 跳转方式 目标页面 路由 传参
❤️ 收藏 Get.toNamed 收藏页 /favorites -
👀 足迹 Get.toNamed 浏览记录页 /footprints -
📝 笔记 Get.toNamed 烹饪笔记页 /cooking-note -
🛒 购物 Get.toNamed 购物清单页 /shopping-list -
⏱️ 计时 Get.toNamed 烹饪计时器 /cooking-timer -
🔄 换算 Get.toNamed 单位换算页 /unit-converter -
📊 BMI Get.toNamed BMI计算器 /bmi-calculator -
⚖️ 缩放 Get.toNamed 份量缩放页 /serving-scaler -
📊 数据中心 Get.toNamed 数据管理中心 /data-center -
🎨 个性化 Get.toNamed 个性化设置 /personalization -
🗑️ 缓存 Get.toNamed 缓存管理页 内页 -
🌙 就寝 Get.toNamed 就寝提醒 /profile/bedtime-reminder -
📋 营养 Get.toNamed 营养中心 /nutrition -
💬 反馈 Get.toNamed 意见反馈 /chat -
❤️ 迷你卡片 Get.toNamed 迷你卡片页 /mini-card -

🎨 美观问题

# 问题 严重度 建议
1 用户头像区域过于简单,无背景装饰 🟡 添加渐变背景+装饰元素
2 功能入口图标样式不统一 🟡 统一为圆形图标+渐变背景
3 设置列表项缺少图标 🟢 每项添加对应emoji图标

功能缺失

# 功能 优先级 说明
1 用户等级系统 P3 浏览/收藏/评论获得经验值
2 成就徽章 P3 烹饪达人/美食家等徽章
3 数据导出 P3 导出收藏/浏览记录

❤️ 收藏页 (FavoritesPage)

┌─────────────────────────────┐
│  ← [↑返回]  我的收藏        │
├─────────────────────────────┤
│                             │
│  ┌──┐ ┌──┐                 │  ← GridView 2列布局
│  │🖼️│ │🖼️│                 │
│  │菜│ │菜│                 │
│  │品│ │品│                 │
│  │1│  │2│                  │
│  └──┘ └──┘                 │
│  ┌──┐ ┌──┐                 │
│  │🖼️│ │🖼️│                 │
│  │菜│ │菜│                 │
│  │品│ │品│                 │
│  │3│  │4│                  │
│  └──┘ └──┘                 │
│                             │
└─────────────────────────────┘

📄 页面视图文件

  • lib/src/pages/profile/social/favorites_page.dart(主页面)

🔗 跳转关系

触发元素 跳转方式 目标页面 路由 传参
← 返回 Get.back 上一个页面 - -
菜品卡片 Get.toNamed 菜品详情页 /recipe-detail id

🎨 美观问题

# 问题 严重度 建议
1 空收藏状态缺少引导 🟡 添加"去发现美食"按钮引导用户

功能缺失

# 功能 优先级 说明
1 收藏分组 P3 按分类/标签分组管理收藏
2 收藏排序 P3 按收藏时间/评分排序

📋 关于页面 (AboutPage)

┌─────────────────────────────┐
│  ← [↑返回]  关于            │
├─────────────────────────────┤
│                             │
│  ┌───────────────────────┐  │
│  │     🍳 小妈厨房        │  │
│  │     Version 0.92.4    │  │
│  └───────────────────────┘  │
│                             │
│  ── 应用信息 ──            │
│  ┌───────────────────────┐  │
│  │ 📱 应用版本    0.92.4  │  │
│  │ 📅 更新日期    2026-04 │  │
│  │ 🏷️ 构建版本    92      │  │
│  └───────────────────────┘  │
│                             │
│  ── 联系我们 ──            │
│  ┌───────────────────────┐  │
│  │ 💬 用户反馈    [→]    │  │ ← [→意见反馈页]
│  │ ⭐ 评价应用    [→]    │  │
│  │ 📧 联系邮箱    [→]    │  │
│  └───────────────────────┘  │
│                             │
│  ── 法律信息 ──            │
│  ┌───────────────────────┐  │
│  │ 📜 用户协议    [→]    │  │
│  │ 🔒 隐私政策    [→]    │  │
│  └───────────────────────┘  │
│                             │
└─────────────────────────────┘

📄 页面视图文件

  • lib/src/pages/profile/about_page.dart(主页面)

🔗 跳转关系

触发元素 跳转方式 目标页面 路由 传参
← 返回 Get.back 上一个页面 - -
💬 用户反馈 Get.toNamed 意见反馈页 /chat -
评价应用 打开应用商店 App Store - -
📧 联系邮箱 打开邮件客户端 Mail App - -
📜 用户协议 Get.toNamed 用户协议页 /user-agreement -
🔒 隐私政策 Get.toNamed 隐私政策页 /privacy-policy -

🎨 美观问题

# 问题 严重度 建议
1 应用图标区域可增加动画效果 🟢 添加呼吸动画或渐变效果

功能缺失

# 功能 优先级 说明
1 检查更新 P2 检测新版本并提示更新
2 更新日志 P3 展示版本更新内容

🥬 食材详情页 (IngredientDetailPage)

┌─────────────────────────────┐
│  ← [↑返回]  食材详情        │
├─────────────────────────────┤
│  ┌─────────────────────┐   │
│  │   🖼️ 食材图片        │   │
│  └─────────────────────┘   │
│                             │
│  🥚 鸡蛋                    │
│  📂 分类: 蛋类              │
│                             │
│  ── 📖 相关菜谱 ──         │
│  ┌──┐ ┌──┐ ┌──┐           │
│  │菜│ │菜│ │菜│           │ ← [→菜品详情页]
│  └──┘ └──┘ └──┘           │
│                             │
│  ┌─────────────────────┐   │
│  │    🏠 返回首页       │   │ ← Get.until((route) => route.isFirst)
│  └─────────────────────┘   │
└─────────────────────────────┘

📄 页面视图文件

  • lib/src/pages/tools/ingredient_detail_page.dart(主页面)
  • lib/src/controllers/ingredient_controller.dart(食材控制器)

🔗 跳转关系

触发元素 跳转方式 目标页面 路由 传参
← 返回 Get.back 上一个页面 - -
相关菜谱卡片 Get.toNamed 菜品详情页 /recipe-detail id
<EFBFBD> 返回首页 Get.until((route) => route.isFirst) 首页(Tab0) - -

<EFBFBD><EFBFBD> 美观问题

# 问题 严重度 建议
1 食材信息区域过于简单 🟡 添加营养成分摘要/季节性/选购建议
2 相关菜谱卡片样式与首页不一致 🟡 统一卡片样式

功能缺失

# 功能 优先级 说明
1 食材营养详情 P2 展示食材营养成分数据
2 食材替代建议 P3 缺少该食材时的替代品推荐
3 过敏原关联 P2 关联数据管理中心的过敏原设置

📂 分类浏览页 (CategoryBrowsePage)

┌─────────────────────────────┐
│  ← [↑返回]  📂 家常菜       │
├─────────────────────────────┤
│  ┌──┐ ┌──┐ ┌──┐           │
│  │红烧│ │炖菜│ │炒菜│       │ ← 子分类网格 [→分类浏览页(递归)]
│  └──┘ └──┘ └──┘           │
│                             │
│  ── 菜谱列表 ──             │
│  ┌─────────────────────┐   │
│  │ 🖼️ 红烧肉  ⭐4.5    │   │ ← [→菜品详情页]
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🖼️ 炖排骨  ⭐4.2    │   │ ← [→菜品详情页]
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘

<EFBFBD> 页面视图文件

  • lib/src/pages/discover/category_browse_page.dart(主页面)
  • lib/src/controllers/category_controller.dart(分类控制器)

<EFBFBD> 跳转关系

触发元素 跳转方式 目标页面 路由 传参
← 返回 Get.back 上一个页面 - -
子分类卡片 Get.toNamed 分类浏览页(递归) /category-browse category, title
菜谱卡片 Get.toNamed 菜品详情页 /recipe-detail id

🎨 美观问题

# 问题 严重度 建议
1 子分类网格与菜谱列表之间缺少视觉分隔 🟢 添加分组标题
2 菜谱列表卡片样式单调 🟡 添加封面图+评分+浏览量

功能缺失

# 功能 优先级 说明
1 分页加载 P2 当前一次加载,无分页
2 排序筛选 P3 按评分/浏览量/最新排序

🏷️ 标签菜谱列表 (TagRecipeListPage)

┌─────────────────────────────┐
│  ← [↑返回]  👅 咸鲜         │
├─────────────────────────────┤
│  ┌─────────────────────┐   │
│  │ 🖼️ 红烧肉  ⭐4.5    │   │ ← [→菜品详情页]
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🖼️ 清蒸鱼  ⭐4.3    │   │ ← [→菜品详情页]
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘

📄 页面视图文件

  • lib/src/pages/home/tag_recipe_list_page.dart(主页面)
  • lib/src/controllers/tag_controller.dart(标签控制器)

🔗 跳转关系

触发元素 跳转方式 目标页面 路由 传参
← 返回 Get.back 上一个页面 - -
菜谱卡片 Get.toNamed 菜品详情页 /recipe-detail id

🎨 美观问题

# 问题 严重度 建议
1 页面顶部缺少标签说明/统计 🟡 添加"共XX道菜"统计
2 列表卡片样式与首页瀑布流不统一 🟡 可考虑使用小瀑布流布局

功能缺失

# 功能 优先级 说明
1 分页加载 P2 当前无分页
2 排序筛选 P3 按评分/浏览量排序

🔥 热门排行页 (HotPage)

┌─────────────────────────────┐
│  🔥 热门排行                │
│  <20>菜谱│🥬食材│👅口味│🍳工艺  │ ← Tab切换
│                             │
│  🥇 红烧肉  ❤️ 2.3k  [→详情]│
│  🥈 牛肉面  ❤️ 1.8k  [→详情]│
│  🥉 凉拌菜  ❤️ 1.5k  [→详情]│
│  4. 宫保鸡丁 ❤️ 1.2k [→详情]│
│  5. 糖醋排骨 ❤️ 1.1k [→详情]│
│                             │
└─────────────────────────────┘

<EFBFBD> 页面视图文件

  • lib/src/pages/discover/hot_page.dart(主页面)
  • lib/src/controllers/hot_controller.dart(热门控制器)

<EFBFBD> 跳转关系

触发元素 跳转方式 目标页面 路由 传参
排行菜谱卡片 Get.toNamed 菜品详情页 /recipe-detail id
排行食材卡片 Get.toNamed 食材详情页 /tools/ingredient ingredientId, ingredientName
排行标签 Get.toNamed 标签菜谱列表 /tag-recipe-list tagName, tagId, tagType

🎨 美观问题

# 问题 严重度 建议
1 排行榜前三名缺少视觉突出 🟡 前三名使用金银铜色+大号排名
2 列表项样式过于简单 🟡 添加封面缩略图+评分星级

🎲 今天吃什么 (WhatToEatPage)

┌─────────────────────────────┐
│  🎲 今天吃什么              │
│                             │
│  ┌─────────────────────┐   │
│  │                     │   │
│  │   🖼️ 推荐菜谱大卡    │   │ ← [→菜品详情页]
│  │   红烧肉             │   │
│  │   ⭐4.5  👁1.2k     │   │
│  │                     │   │
│  └─────────────────────┘   │
│                             │
│  ┌────────┐ ┌────────┐    │
│  │ 🔄换一个│ │ 📖看详情│    │ ← 换一个=刷新, 看详情=[→详情]
│  └────────┘ └────────┘    │
│                             │
└─────────────────────────────┘

📄 页面视图文件

  • lib/src/pages/discover/what_to_eat_page.dart(主页面)
  • lib/src/controllers/what_to_eat_controller.dart(推荐控制器)

🔗 跳转关系

触发元素 跳转方式 目标页面 路由 传参
📖 看详情 Get.toNamed 菜品详情页 /recipe-detail id
🔄 换一个 本页刷新 本页 - -

🃏 迷你卡片页 (MiniCardPage)

┌─────────────────────────────┐
│  ← 返回    迷你卡片    🔍   │ ← CupertinoNavigationBar
├─────────────────────────────┤
│ [全部][素菜][荤菜][水产]... │ ← 横向分类标签
├─────────────────────────────┤
│                             │
│  ┌─────────────────────┐    │
│  │ 🃏分类  ❤️ ⭐ 📤     │    │ ← 液态玻璃顶部操作栏
│  │                     │    │
│  │    [菜品图片]        │    │ ← _MiniCardImageView 独立组件
│  │                     │    │
│  │ ┌─────────────────┐ │    │ ← 液态玻璃底部信息区
│  │ │ 菜名             │ │    │
│  │ │ 🏷️ 分类  详情 →  │ │    │
│  │ └─────────────────┘ │    │
│  └─────────────────────┘    │
│                             │
│  ┌─────────────────────┐    │
│  │ 👎 │ ❤️ │ ⭐ │ ↩️  │    │ ← 底部操作按钮
│  └─────────────────────┘    │
│                             │
│  ████████░░░░  12/341       │ ← 进度条
│                             │
└─────────────────────────────┘

全屏图片查看器(点击卡片触发):
┌─────────────────────────────┐
│  ✕              1/341  📤❤️ │ ← 液态玻璃顶栏
│                             │
│                             │
│    [全屏菜品图片]            │ ← PageView 左右滑动
│                             │
│                             │
│ ┌─────────────────────────┐ │ ← 液态玻璃底部信息
│ │ 菜名                     │ │
│ │ 🏷️ 分类 · 描述   详情 → │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

首页瀑布流迷你卡片横幅:
┌─────────────────────────────┐
│ 🃏 迷你卡片                  │ ← 液态玻璃标签
│                             │
│    [全宽菜品图片]            │ ← MiniCardDiscoverCard
│                             │
│ ┌─────────────────────────┐ │ ← 液态玻璃底部
│ │ 菜名  🏷️分类    查看 →  │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

网格视图模式:
┌──────┐ ┌──────┐ ┌──────┐
│[图片]│ │[图片]│ │[图片]│
│菜名  │ │菜名  │ │菜名  │
│分类  │ │分类  │ │分类  │
└──────┘ └──────┘ └──────┘

📄 页面文件

  • lib/src/pages/discover/mini_card_page.dart — 主页面+全屏查看器+图片组件
  • lib/src/models/mini_card_model.dart — 数据模型
  • lib/src/services/data/mini_card_service.dart — 数据服务(缓存优先)
  • lib/src/widgets/discover/mini_card_discover_card.dart — 瀑布流横幅组件

🔗 跳转关系

触发元素 跳转方式 目标页面 路由 传参
个人中心迷你卡片 Get.toNamed 迷你卡片页 /mini-card -
首页瀑布流横幅 Get.toNamed 迷你卡片页 /mini-card initialRecipeId
卡片点击 全屏查看器 本页弹窗 - -
详情按钮 Get.toNamed 菜品详情页 /recipe-detail id
搜索结果点击 本页跳转 本页定位 - index

🎨 功能特性

# 功能 说明 状态
1 🃏 左右滑动 拖拽>80px触发滑动动画效果
2 ❤️ 喜欢/不喜欢 持久化到SharedPreferences
3 收藏 与全局收藏系统联动
4 🔍 搜索 搜索菜品名称,点击跳转定位
5 📂 分类筛选 11个分类横向滚动标签
6 📱 网格视图 卡片/网格双视图切换
7 💾 本地缓存 5-10条记录不含图片
8 🗑️ 缓存管理 缓存管理页可清理
9 📊 进度条 显示浏览进度
10 🏠 瀑布流嵌入 首页1:20比例插入迷你卡片横幅
11 🖼️ 图片独立组件 _MiniCardImageView 文本在图片内底部
12 🪟 液态玻璃 顶部操作栏+底部信息区 GlassContainer
13 📱 全屏查看器 PageView+异步预加载5张相邻图片
14 📤 分享 share_plus 分享菜品信息+图片URL
15 💾 缓存优先 查看过卡片存入缓存,先显示缓存
16 🔗 路由参数 initialRecipeId 从首页跳转指定卡片

📊 全局美观问题汇总

优先级 问题 影响页面 建议 状态
🟡 毛玻璃效果使用不一致 全局 统一GlassCard组件所有卡片使用相同毛玻璃参数 已统一
🟡 卡片圆角不统一 全局 统一使用DesignTokens.radiusMd/Lg 已统一(89处)
🟡 颜色使用偶尔硬编码 全局 严格使用DesignTokens颜色变量 已统一(20处)
🟡 空状态页面缺少插画 多个页面 设计统一的空状态插画+文案 已增强(GlassCard包裹)
🟡 加载状态不统一 全局 统一骨架屏样式和动画 已增强(LoadingIndicator)
🟢 页面转场动画单调 全局 添加iOS风格滑入动画 🔴待开发

📊 全局功能缺失汇总

优先级 功能 影响页面 说明 状态
P1 下拉刷新 首页/发现 缺少下拉手势刷新 🔴待开发
P2 搜索历史 搜索页 无本地搜索记录 🔴待开发
P2 分页加载 多个列表页 分类浏览/标签列表无分页 🔴待开发
P2 相关推荐 详情页 缺少相关菜谱推荐 v0.92.0
P2 烹饪模式 详情页 全屏步骤+计时器 🔴待开发
P2 过敏原警示 详情页 食材含过敏原时警告 v0.92.0
P2 营养可视化 详情页 环形图/进度条展示营养占比 v0.92.0
P3 排序筛选 列表页 按评分/浏览量/最新排序 🔴待开发
P3 评论系统 详情页 需后端支持 🔴需后端
P3 用户等级 个人中心 经验值+等级+徽章 🔴需后端

🔌 API能力分析可增加功能

基于 APP_GUIDE.md(v2.9.0) 和 API_DOC.md(v3.2.0) 全面分析2026-04-13 更新

📊 已使用API接口一览

接口文件 Repository 已用act 状态
api.php RecipeRepository list/detail/full/ingredients/ingredient_detail/search/categories/tags/stats/unified_list/unified_detail/unified_search/unified_hot/query/mini
api_action.php ActionRepository like/rate/view/ip_status
api_feed.php FeedRepository recommend/latest/hot/prefetch
api_filter.php RecipeRepository+SearchController recipe_main_categories/taste_tags/cooking_tags/filter_recipes/global_search/meal_times/recipe_sub_categories/ingredient_main_categories/ingredient_sub_categories/category_tags/filter_ingredients/ingredient_recipes
api_hot.php HotRepository(→stats_full.php?act=hot) hot(sort=view/like/rate)
api_what_to_eat.php WhatToEatRepository filter_apply/detail/filter_steps
api_discover.php DiscoverRepository 随机数据
api_check_duplicate.php RecipeRepository check_title/check_ingredient/check_step/check_content/check_all v0.92.0
stats_full.php StatsRepository online/request/hot/stats
静态数据 部分使用 eating_times.json()/nutrition_types.json()/gmy.json() v0.92.0

📊 未使用API接口一览

以下接口在v0.92.0版本已大部分实现,仅保留少量待开发接口

接口 act/参数 文档描述 当前状态
api.php?act=unified_list&type=ingredient unified_list&type=ingredient 统一格式食材列表 🔴待开发
api.php?act=unified_detail&type=ingredient unified_detail&type=ingredient 统一格式食材详情 🔴待开发
api.php?act=unified_hot&type=ingredient unified_hot&type=ingredient 统一格式食材热门 🔴待开发

🟢 已有API可直接开发P2优先级

以下功能在v0.92.0版本已全部实现

🟡 需组合API开发P3优先级

# 功能 所需API 页面位置 开发复杂度 状态
1 🧠 智能推荐 api_feed.php?act=recommend + api_filter.php?act=filter_recipes + gmy.json + 用户偏好设置 首页 🔴待开发
2 📅 每日菜单规划 api_what_to_eat.php?act=filter_apply × 3次 + eating_times.json 工具中心 🔴待开发
3 📱 二维码海报 api.php?act=detail code字段 + qr_flutter库 菜品详情页 🔴待开发
4 🔗 社交分享增强 api.php?act=detail code字段 + api_hot.php statistics 菜品详情页 🔴待开发
5 🏋️ 健身餐推荐 api_filter.php?act=filter_recipes nutrition_min/max + nutrition_types.json 工具中心/发现页 v0.92.0
6 📋 过敏原报告 api.php?act=full allergens + gmy.json 菜品详情页 v0.92.0
7 🥗 食材营养详情 api.php?act=ingredient_detail + nutrition_types.json 食材详情页 v0.92.0
8 🔄 食材替代建议 api_filter.php?act=filter_recipes ingredient参数 + gmy.json 食材详情页 v0.92.0
9 📈 营养目标追踪 api.php?act=full nutrition × 多菜谱 + nutrition_types.json 营养中心 v0.92.0
10 🏷️ 统一格式输出 api.php?act=unified_list/detail/search/hot type=ingredient 食材相关页面 🔴待开发

🔴 需后端新开发API

# 功能 建议接口 优先级 开发建议 说明
1 👤 用户注册登录 api_user.php P1 暂不开发 需要用户认证体系,当前阶段不涉及
2 💾 收藏云端同步 api_favorite.php P1 CRUD接口 当前收藏仅本地存储,需云端同步支持多设备
3 💬 评论系统 api_comment.php P2 CRUD+分页 互动功能,需防刷+审核机制
4 🔔 消息推送 api_message.php P2 推送+站内信 后续可能使用邮箱实现
5 📜 浏览历史同步 api_history.php P2 CRUD+分页 当前仅本地存储,需云端同步
6 📝 菜谱上传 api_recipe.php P2 表单提交+图片上传 UGC内容需审核流程
7 🔄 相关菜谱推荐 api.php?act=related&id= P2 基于分类+标签+食材相似度 详情页底部推荐相似菜品,可基于同分类+同标签实现
8 🔍 搜索建议/补全 api.php?act=suggest&keyword= P3 前缀匹配+热门词 输入时实时建议,需后端建立搜索索引
9 📊 用户营养目标 api_nutrition.php P3 CRUD+每日统计 每日营养摄入目标追踪,需用户系统
10 🏆 用户成就系统 api_achievement.php P3 经验值+等级+徽章 需用户系统支撑
11 📝 烹饪笔记同步 api_note.php P2 CRUD+分页 当前笔记仅本地Hive存储需云端同步
12 🛒 购物清单同步 api_shopping.php P2 CRUD 当前购物清单仅本地存储
13 每周菜单存储 api_menu.php P2 CRUD+日期范围 当前菜单规划功能无持久化

🎯 推荐开发路线图

第一阶段快速见效利用已有API1-2天/功能)

顺序 功能 价值 工作量
1 🏆 评分排行榜 热门页增加评分排序 极小(改sort参数)
2 🌐 IP状态显示 评分前显示剩余次数 极小(已有方法)
3 🔍 排除筛选 高级搜索增加排除选项 小(增加UI+参数)
4 🕐 用餐时段推荐 根据时间智能推荐 小(新页面+API)
5 ⚠️ 过敏原警示 详情页安全提醒 小(展示已有字段)

第二阶段体验提升组合API3-5天/功能)

顺序 功能 价值 工作量
6 📊 营养可视化 详情页环形图展示 中(可视化组件)
7 🏷️ 分类标签联动 筛选体验提升 中(联动逻辑)
8 🥗 食材分类浏览 食材浏览体验完善 中(新页面)
9 🎲 筛选步骤引导 "吃什么"体验优化 中(步骤UI)
10 📱 迷你信息加载 列表页性能优化 中(改造加载逻辑)

第三阶段:深度功能(需后端配合或复杂逻辑)

顺序 功能 价值 工作量
11 📅 每日菜单规划 菜单规划工具 大(新页面+逻辑)
12 🏋️ 健身餐推荐 健康饮食功能 大(营养目标+筛选)
13 🧠 智能推荐 个性化推荐 大(推荐算法)
14 🔄 相关菜谱推荐 详情页推荐 需后端开发API

📋 已完成功能记录

2026-04-13 更新

阶段 功能 涉及文件
三十二 主题色全局生效修复 DesignTokens.dynamicPrimary替换(59文件439处)
三十三 全局UI统一 圆角89处+颜色20处+EmptyState+LoadingIndicator
三十四 食材详情本地缓存 IngredientModel.toJson+RecipeRepository缓存+CacheManagePage食材管理