A7 · HTML 五件套（主路径）

写完本页 · 你能带走

• 可运行五件套 — Page · css · Interactions · mock · README
• mock 即契约 — 字段从 A6 抄；Happy / 拒答可切换
• 母婴可演示链路 — 对齐 A7 总览 的 3 态与「四能」

是什么骨架怎么做才通母婴馆样板合格 · 练+交

建议顺序： 是什么 → 骨架 → 怎么做才通 →（对照样板）→ 合格自检

验收认 A7 总览 · 姊妹：Figma · 墨刀
跟练默认线：母婴馆小悦 · 主会话
本页定位：把总览的「交什么」落成 HTML 怎么做。

---

五件套是什么

一句话 用最少文件交出能打开、能点、能讲、能交接的演示包；mock 代替真实后端，字段对齐 A6。

❌ 低阶

只有一张 html 截图感页面
数据写死在标签里、改不动
无拒答、无 README

✅ 合格

五职责齐（可合并文件）
mock 驱动界面；样本可切换
Happy + 拒答都能点到

Page结构与入口（index.html）：说明区 · 输入 · 消息区 · 清单区

css层级清楚、按钮可点；先通再美

Interactions样本切换 · 发送 · 渲染清单/拒答 · 了解点击

mockHappy / 拒答数据；字段名 = A6 §4

README打开方式 · 演示步骤 · 限制 · 对齐哪版 A6

样式不卡像素 信息层级清楚 · 可点区域明显 · 有空态/错误态即可。评委先看路径通不通。

---

建议结构（骨架）

📌如何交一份五件套 点开复制目录与 README；再按「怎么做才通」顺序填。

📌 点开复制 · 五件套目录 + README

muying-xiaoyue-proto/
├── index.html          # Page
├── styles.css          # css
├── interactions.js     # Interactions
├── mock.json           # mock
└── README.md

# 母婴馆小悦 · 主会话原型
打开：用浏览器直接打开 index.html
     （若 fetch mock 失败，改用本地静态服务，如 npx serve .）
对齐：A6 主会话 · 固定样本 DHA / 医嘱
演示：
  1. Happy：点「样本·DHA」→ 清单（名称·理由·了解）→ 点了解
  2. 异常：点「样本·医嘱」→ 拒答文案，无清单卡
限制：无真实下单；了解可为 toast/占位；追问态未做则写明

📌 点开复制 · index 区块骨架（示意）

index.html 建议区块（id 可自定，js 要对上）：
· #capability     能力说明（含「不做医嘱」）
· #samples        按钮：样本·DHA | 样本·医嘱
· #composer       输入框 + 发送
· #thread         对话/系统消息（追问、拒答文案可落这里）
· #cards          清单卡容器（拒答时清空或隐藏）

---

怎么做才通

①→抄 A6 字段进 mock→Happy + reject 两套

②→搭 Page 区块→说明 · 样本钮 · 输入 · 列表

③→写 Interactions→切换 mock → 重渲染

④→走演示 4 步→再补 css / README

mock 即契约

✅ 合格❌ 易翻车

字段与 A6 §4 一致（name / reason / action）

PRD 写「理由」，界面只有标题

拒答走 message，cards 为空

医嘱样本仍渲染商品卡

本地能加载 mock（注意 file:// 限制）

「我这能开」但同学打开白屏

📌 点开复制 · 母婴 mock.json

{
  "happy": {
    "query": "8个月宝宝补DHA",
    "cards": [
      {
        "name": "阶段适宜 DHA 示例",
        "reason": "对应 6–12 月阶段补充说明（mock，可核对知识条目）",
        "action": "了解"
      }
    ]
  },
  "reject": {
    "query": "宝宝发烧吃什么药",
    "message": "这类问题建议咨询医生，我不能提供用药方案。",
    "cards": []
  }
}

Interactions 最低集

• [ ] 点「样本·DHA」→ 渲染 happy.cards（每条含 name · reason · 了解）
• [ ] 点「样本·医嘱」→ 显示 reject.message，不出推荐卡
• [ ] 点「了解」→ toast / alert / 占位页（须有反馈）
• [ ] （可选）发送框：有内容可发送；空内容禁用或提示

📌 点开复制 · interactions 逻辑伪代码

load mock.json
on 样本·DHA:
  clear thread/cards
  show user bubble = happy.query
  renderCards(happy.cards)
on 样本·医嘱:
  clear cards
  show user bubble = reject.query
  show system bubble = reject.message
on 了解:
  toast("跳转了解页（mock）") 或 location = placeholder.html
renderCards(list):
  for each item → 名称 + 理由 + 按钮[了解]

常见踩坑 · 先抠 css，主路径还点不通
· mock 内嵌在 js 字符串里，和 A6 字段对不齐
· 直接双击 html 时 fetch 失败 → README 写明用静态服务
· 拒答和 Happy 抢同一块 DOM，忘记清空 cards

---

走一遍 · 母婴馆样板

屏级「该有什么」以 A7 总览 为准；下面是五件套落地对照。

1Page 怎么摆

能力说明

阶段化问答 · 清单+理由；明示不做医嘱

样本按钮

DHA · 医嘱（演示刚需，别省）

清单区

卡片：名称 · 理由 · 了解

消息区

拒答文案落这里（或独立横幅）

2演示路径

1打开 index→2样本 DHA→3清单+了解→!样本医嘱 → 拒答

3css 最低

对话气泡与清单卡分区清楚；主按钮对比度够；拒答样式可略警示，但不要吓成报错页。

30 秒 · 演示可以这么说 「五件套：mock 两套样本。DHA 出带理由清单，了解可点；医嘱只出拒答、不出药方卡。字段对齐 A6。」

---

怎样算合格

• [ ] 五职责齐（文件可合并，但 Page/样式/交互/数据/说明都在）
• [ ] 能打开（README 写明打开方式；必要时静态服务）
• [ ] Happy：清单含名称 · 理由 · 了解，可点
• [ ] 拒答：可见文案，无用药方案、无推荐卡冒充
• [ ] mock 字段对齐 A6；与总览「四能」不冲突
• [ ] README 含两条样本演示步骤

---

练 + 交

五件套 · 练 + 交

先填 A7 总览骨架，再按本页落地
交付：目录可打开 + README
建议用时：3～6 小时（通路径优先）
交完：勾总览合格表 → A8 留一条记录

回 A7 总览勾验收 →或继续 A8 协作闭环