ChowBox/ui.md at master

Files

王鹏 802b4ba229 fix: 修复 VoiceController Map.of 兼容性 + ExploreController 参数不匹配

- VoiceController: Map.of() -> Collections.singletonMap() 兼容 Java 8
- ExploreController: 补齐 takeoutService.roll() 缺失的 taste/priceRange/allergies 参数

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-05-08 20:02:27 +08:00

7.5 KiB

Raw Permalink Blame History

下面以线框描述+关键标注的方式呈现“吃啥盲盒”核心页面的UI草图。整体采用活力橙+暖黄主色调，圆角卡片、盲盒机质感、轻拟物图标，营造“开盒惊喜”的氛围。

1. 盲盒大厅（首页）

┌──────────────────────────┐
│  上午 11:30      📍 定位  │  <-- 状态栏/定位按钮
├──────────────────────────┤
│                          │
│    🎁  今天吃啥？        │  <-- 大标题，圆体
│       开个盲盒          │
│                          │
│  ┌─ 外卖盲盒 ────────┐  │
│  │ 🛵                │  │
│  │  开个外卖盒       │  │  <-- 主按钮，带微动效
│  │  随机高质量外卖   │  │
│  └──────────────────┘  │
│  ┌─ 冰箱盲盒 ────────┐  │
│  │ 🥬                │  │
│  │  开个冰箱盒       │  │
│  │  有啥食材做啥菜   │  │
│  └──────────────────┘  │
│  ┌─ 探店盲盒 ────────┐  │
│  │ 🍜                │  │
│  │  开个附近盒       │  │
│  │  发现隐藏好店     │  │
│  └──────────────────┘  │
│                          │
│  “今天宜尝试酸辣口味”   │  <-- 每日一言
└──────────────────────────┘

说明：三个入口设计成盲盒机器视觉卡片，点击后触发开盒动效。上角定位按钮可手动切换位置。

2. 外卖盲盒结果页

┌──────────────────────────┐
│ ← 返回        📤 分享   │
├──────────────────────────┤
│    🎉 你抽到的外卖是…   │
│                          │
│  ┌────────────────────┐  │
│  │     [商家头图]     │  │
│  │   🌟 4.8 月销999+ │  │
│  │   川味小厨         │  │
│  │   ¥32/人 · 1.2km  │  │
│  │   30-40分钟送达    │  │
│  │   “水煮鱼绝了！”  │  │
│  │  [招牌菜1][2][3]  │  │
│  └────────────────────┘  │
│                          │
│  ┌─ 去美团下单 ──────┐  │
│  └────────────────────┘  │
│  🔄 再开一个            │  <-- 换一家
└──────────────────────────┘

说明：商家信息卡片居中，招牌菜可横滑。吸底按钮为主操作，弱化“换一家”防止无限循环。

3. 冰箱盲盒-食材录入页

┌──────────────────────────┐
│ 冰箱里有什么？          │
│                          │
│  ┌──────────────────┐   │
│  │ 🔍 输入食材名称  │   │  <-- 输入框，带语音icon
│  └──────────────────┘   │
│  常用：🥚鸡蛋 🍅西红柿 🥩鸡胸 🧅洋葱 │
│        ➕ 自定义        │
│                          │
│  📦 我的常备调料       │
│  ✔️油 ✔️盐 ✔️酱油 ✔️醋    │
│  ✔️料酒 ✔️生抽   ➕添加  │
│                          │
│  ┌─── 开盒做饭！───┐   │
│  └──────────────────┘   │
└──────────────────────────┘

说明：标签化快速输入，可语音录入。常备调料默认勾选，减少重复输入。按钮文案呼应“开盒”。

4. 冰箱盲盒-菜谱推荐列表

┌──────────────────────────┐
│ 为你找到3个菜谱         │
│                          │
│ ┌─ 菜谱卡片 ────────┐   │
│ │ 西红柿炒蛋   匹配度95%│  │
│ │ 🥬 缺：小葱          │  │
│ └──────────────────┘   │
│ ┌─ 菜谱卡片 ────────┐   │
│ │ 鸡肉沙拉     匹配度80%│  │
│ │ 🥬 缺：生菜、沙拉酱 │  │
│ └──────────────────┘   │
│ ┌─ 菜谱卡片 ────────┐   │
│ │ 煎鸡胸       匹配度90%│  │
│ │ 🥬 缺：黑胡椒        │  │
│ └──────────────────┘   │
│                          │
│ 🔄 换一批菜谱          │
└──────────────────────────┘

说明：卡片突出匹配度，用绿色高亮匹配，黄色标注缺失食材。优先展示全匹配菜谱。

5. 菜谱详情页

┌──────────────────────────┐
│ [成品图]        ⭐难度2  │
│ 西红柿炒蛋     ⏱ 10分钟 │
├──────────────────────────┤
│ 🥚 用料                 │
│ 鸡蛋2个 西红柿2个 盐 糖 │
│ 小葱(家里缺) → 加入购物单│
│                          │
│ 📝 步骤                 │
│ 1. 鸡蛋打散，加盐搅匀   │
│ 2. 西红柿切块备用       │
│ 3. 热油炒蛋，盛出       │
│ 4. 炒西红柿出汁…        │
│                          │
│ 🔖 计时器  📋 购物清单  │
└──────────────────────────┘

说明：用料缺货高亮并支持一键加入购物清单。步骤清晰，可内置简单计时器。

6. 探店盲盒结果页

┌──────────────────────────┐
│ 🎊 附近发现一家宝藏店   │
│                          │
│  ┌────────────────────┐  │
│  │   [店铺头图]       │  │
│  │  🏮 藏巷·居酒屋   │  │
│  │  ⭐4.6 · 2.3km    │  │
│  │  人均 ¥120        │  │
│  │  “三文鱼厚切超满足”│  │
│  │  🥘 招牌：鹅肝寿司 │  │
│  └────────────────────┘  │
│                          │
│  ┌── 导航过去 ───────┐  │
│  └────────────────────┘  │
│  🗺 查看详细点评       │
│  🔄 再开一个           │
└──────────────────────────┘

说明：强调推荐语和招牌菜，导航为主要操作，跳转外部地图；可查看详情跳大众点评。

全局元素

颜色：背景米白(#FFFBF4)，主色橙(#FF6A3D)，文字深灰(#333)，高亮绿(#4CAF50)
圆角：卡片16px，按钮24px
字体：微信默认中文字体(苹方/雅黑)，标题加粗，大小16-20px
图标：线性+面性结合，盲盒/食材使用自定义插画风
错误兜底：定位失败时显示“手动选择位置”，无商家时显示“附近喵星人占领了，换片区域试试？”

7.5 KiB Raw Permalink Blame History Unescape Escape