产品需求文档（PRD）

奶茶健康榜单 App — React Native (Expo) 移动端 MVP

一、产品概述

1.1 产品定位

1.2 为什么做移动端 App？

1.3 目标用户

二、MVP 功能范围

2.1 功能优先级矩阵

三、核心用户故事

3.1 MVP 用户故事（V1 必须实现）

验收标准：

• 首页展示至少 4 个榜单分类（低卡、低糖、低咖啡因、无植脂末）
• 每个榜单展示 Top 20 饮品，包含品牌名、饮品名、关键指标值、健康评分
• 支持切换榜单类型，切换时有流畅过渡动画
• 列表支持下拉刷新

验收标准：

• 展示健康评分（0-100 分，颜色分级：绿/黄/红）
• 营养数据一目了然：热量、含糖量、咖啡因、脂肪、蛋白质
• 风险标签突出显示（如：含植脂末、高咖啡因、高糖）
• 每项数据附带"这意味着什么"的通俗解读（如：含糖量 45g ≈ 9 块方糖）
• 标注数据来源（官方公示 / 第三方检测 / 估算值）和更新时间

验收标准：

• 品牌列表展示品牌 Logo、已收录饮品数量、数据透明度评级
• 品牌详情页列出该品牌所有已收录饮品，按健康评分排序
• 品牌页顶部展示该品牌的数据公开程度概览

验收标准：

• 支持中文搜索 + 拼音首字母搜索
• 实时搜索建议（输入即展示匹配结果）
• 无结果时显示友好提示 + 相似推荐

验收标准：

• 提供 5-8 张知识卡片，覆盖核心成分科普
• 每张卡片 150 字以内，配合直观图标
• 单品详情页中的专业术语可点击跳转到对应知识卡片

四、App 信息架构（IA）

4.1 Tab 导航结构

Bottom Tab Navigation (4 个主 Tab)
├── [1] 首页 Home
│   ├── 搜索栏（全局搜索入口）
│   ├── 今日推荐卡片
│   ├── 榜单快捷入口（横向滑动卡片）
│   │   ├── 低卡榜
│   │   ├── 低糖榜
│   │   ├── 低咖啡因榜
│   │   └── 无植脂末榜
│   └── 最新收录饮品
│
├── [2] 榜单 Rankings
│   ├── 榜单分类 Tab（顶部横向 Tab 切换）
│   └── 饮品排行列表（可排序）
│       └── → 点击进入：单品详情页
│
├── [3] 品牌 Brands
│   ├── 品牌网格列表（Logo + 名称 + 收录数）
│   └── → 点击进入：品牌详情页
│       └── 该品牌所有饮品列表
│           └── → 点击进入：单品详情页
│
└── [4] 发现 Discover
    ├── 健康知识卡片列表
    ├── 行业动态（标准更新、品牌公示变化等）
    └── [V2] 对比工具入口

4.2 App 页面流程图

启动 App
  ↓
首页（默认展示低卡榜 Top 5 + 推荐 + 搜索入口）
  ├── 点击搜索 → 搜索结果页 → 单品详情页
  ├── 点击榜单卡片 → 榜单 Tab（定位到对应分类）
  ├── 点击饮品卡片 → 单品详情页
  │    ├── 查看营养数据 + 风险标签
  │    ├── 点击成分术语 → 知识卡片弹窗
  │    ├── [V2] 点击"对比" → 对比页
  │    └── [V2] 点击"分享" → 生成分享卡片
  └── 点击品牌 → 品牌详情页 → 单品详情页

五、核心页面原型描述

5.1 首页 Home

5.2 单品详情页 DrinkDetail

5.3 榜单页 Rankings

5.4 品牌页 Brands

5.5 发现页 Discover

六、数据模型

6.1 核心数据结构（源自 CTO 评审，针对 App 扩展）

// 饮品 Drink
{
  id: string,              // 唯一标识 "heytea-duoduo-grape"
  brand_id: string,        // 关联品牌
  name: string,            // 饮品名称 "多肉葡萄"
  category: enum,          // 纯茶 | 奶茶 | 果茶 | 咖啡 | 酸奶

  // 营养数据
  calories: number,        // 热量 kcal
  sugar_g: number,         // 含糖量 g
  caffeine_mg: number,     // 咖啡因 mg（可选）
  protein_g: number,       // 蛋白质 g（可选）
  fat_g: number,           // 脂肪 g（可选）
  carbs_g: number,         // 碳水化合物 g（可选）
  trans_fat_g: number,     // 反式脂肪酸 g（可选）

  // 属性标签
  uses_real_milk: boolean | null,  // 是否使用纯奶
  uses_creamer: boolean | null,    // 是否含植脂末
  has_real_tea: boolean | null,    // 是否使用真茶
  sugar_options: string[],         // 可选糖度 ["正常","少糖","半糖","少少糖","不加糖"]

  // 规格
  size_ml: number,         // 杯量 ml
  size_label: string,      // "中杯" | "大杯"
  price_yuan: number,      // 价格 元

  // 评分与标签
  health_score: number,    // 健康评分 0-100（算法计算）
  risk_tags: string[],     // ["高糖","含植脂末","高咖啡因"]

  // 数据来源
  source_type: enum,       // official | third_party | estimated
  source_name: string,     // "喜茶GO小程序" | "上海消保委2024测评"
  updated_at: string,      // ISO 日期

  // App 专用
  thumbnail_url: string,   // 饮品缩略图 URL（可选）
}

// 品牌 Brand
{
  id: string,              // "heytea"
  name: string,            // "喜茶"
  name_en: string,         // "HEYTEA"
  logo_url: string,        // 品牌 Logo
  transparency_tier: number, // 数据透明度 1(最透明) / 2 / 3
  data_summary: string,    // "已公开全线产品营养成分，含第三方检测报告"
  drink_count: number,     // 已收录饮品数量
}

// 知识卡片 KnowledgeCard
{
  id: string,
  title: string,           // "植脂末到底是什么？"
  summary: string,         // 150字以内摘要
  icon: string,            // 图标标识
  related_risk_tags: string[], // 关联的风险标签
}

6.2 健康评分算法（V1 简化版）

七、数据采集策略

7.1 MVP 数据范围（基于营养数据调研报告）

MVP 目标：首批 2 个品牌 40 款产品上线，总计收录 5-8 个品牌 100+ 款产品。

7.2 数据存储方案（CTO 评审建议）

八、技术方案

8.1 技术选型

8.2 项目目录结构

tea-rank-app/
├── app/                     # Expo Router 文件路由
│   ├── (tabs)/              # Tab 导航布局
│   │   ├── index.tsx        # 首页 Home
│   │   ├── rankings.tsx     # 榜单页
│   │   ├── brands.tsx       # 品牌页
│   │   └── discover.tsx     # 发现页
│   ├── drink/[id].tsx       # 单品详情页
│   ├── brand/[id].tsx       # 品牌详情页
│   └── search.tsx           # 搜索页
├── components/              # 可复用组件
│   ├── DrinkCard.tsx        # 饮品列表卡片
│   ├── HealthScore.tsx      # 健康评分圆环
│   ├── RiskTag.tsx          # 风险标签
│   ├── NutritionBar.tsx     # 营养数据进度条
│   └── KnowledgeCard.tsx    # 知识卡片
├── data/                    # 静态数据（MVP）
│   ├── drinks.json          # 饮品数据
│   ├── brands.json          # 品牌数据
│   └── knowledge.json       # 知识卡片内容
├── utils/
│   ├── healthScore.ts       # 健康评分算法
│   └── search.ts            # 搜索配置
├── stores/
│   └── appStore.ts          # Zustand 全局状态
└── assets/                  # 图片、字体等静态资源

8.3 关键技术决策

九、UI/UX 设计规范

9.1 设计原则

1. 3 秒原则：用户打开 App 后 3 秒内能看到有价值的信息
2. 色彩即信息：红黄绿色彩分级贯穿全 App，降低认知负担
3. 数据可信赖：每一条数据都标注来源，不让用户猜
4. 移动原生：大按钮、滑动交互、底部导航，符合手机操作习惯

9.2 色彩体系

9.3 组件规范

十、非功能需求

十一、MVP 开发路线图

十二、后续版本规划

十三、风险与应对策略

十四、MVP 验收标准

十五、成功指标（上线后 30 天）