mcd-menu-stage

# 麦麦出场图鉴 报出预算和口味，让你的菜单逐个登场。 这是一个麦当劳 MCP Skill：先领取麦麦省所有当前可领优惠券，再按门店可用券、预算、人数和偏好推荐餐品，生成「猜猜我是谁？我就是——巨无霸汉堡！」式的 HTML 页面。页面使用原创餐品剪影、卡通舞台和出场动画，依次揭晓主食、小食与饮品，最后集结成完整菜单。 适合想减少选餐纠结、控制用餐预算，并把菜单趣味化展示给朋友的用户。 ## 先看效果 安装 Node.js 20 或以上，无需安装 npm 依赖。在项目目录执行： ```sh npm run demo ``` 直接用浏览器打开 [outputs/demo.html](outputs/demo.html)。支持手机布局、逐条提示、揭晓身份、菜单集结、随机顺序重播、导出 PNG 和打印。音效默认关闭，打开后播放程序合成的短旋律。系统开启减少动态效果时会关闭动画。 **演示中的单价和优惠为虚构示例，不代表麦当劳门店报价。** 插画为原创示意图。生成的 HTML 不依赖外部字体、图片、网络或构建服务，保存后可以离线打开。 ## 安装 Skill 与 MCP 1. 下载仓库，把整个目录以 `mcd-menu-stage` 为目录名放入所用客户端支持的 Skill 位置，或按客户端的本地 Skill 导入方式载入 `SKILL.md`。保留 `scripts`、`templates`、`references` 等相对路径。 2. 在 [麦当劳开放平台](https://open.mcd.cn/mcp) 申请自己的 MCP Token。 3. 按 [官方 MCP 接入文档](https://github.com/M-China/mcd-mcp-server) 配置 `https://mcp.mcd.cn`，启用 Streamable HTTP 和 Bearer 鉴权。仓库的 `mcp-config.example.json` 仅是脱敏配置；需按所用客户端的环境变量语法配置。 4. 启用连接器和 Skill。实际可用的工具与参数以服务发现结果为准。 真实 Token 保存在客户端本地，不放进仓库、菜单 JSON 或生成的 HTML。 ## 使用示例 ```text 使用麦麦出场图鉴，帮我推荐一个人的晚餐：总预算 35 元， 想吃汉堡和小食，到店外带。先领取所有当前可领优惠券， 再选择附近门店，按门店可用优惠推荐，生成猜猜我是谁的 HTML 菜单。 ``` 每次新的真实推荐，Skill 先调用 `auto-bind-coupons` 领取麦麦省当前可领券，领取成功或明确无券可领后，查询选定门店可用券和可售餐品，筛选组合、核验整单价格，再执行本地生成脚本。领取失败或结果不明时先处理失败，不跳过领券直接推荐。领到券不代表当前门店可用，也不代表可以叠加优惠，折扣以核价结果为准。 需要营养信息时可以附加需求，缺失信息会标为未知。没有有效报价时页面明确展示「待核价」；没有符合预算或需求的餐品时，仍生成 HTML，在页面中说明原因，并提示回到对应客户端调整需求。离线演示和页面重播不调用 MCP，同一轮成功领券后的改菜或重新核价不重复领券。 **客户端对话最终只返回 HTML 附件或文件链接。** 推荐物品、价格、推荐理由和无匹配原因都放在页面里，不在对话中提前揭晓。页面中的客户端名来自运行环境；无法确定时提示「当前客户端」。 页面内点击「导出 PNG」会下载一张完整菜单海报，包含全部推荐餐品（包括尚未揭晓的餐品）、数量、推荐理由、报价与预算；待核价时明确标注未知金额。无匹配结果导出原因、预算和客户端调整提示。PNG 导出在浏览器本地完成，不依赖网络，也不会再次领券或选餐。页面内不提供 HTML 导出按钮，客户端交付的文件仍是 HTML。 首次实现尚未提供真实 Token，当前只完成本地演示；详见 [MCP_INTEGRATION.md](MCP_INTEGRATION.md)。 ## 换菜品，不换模板 参考 [data/menu.example.json](data/menu.example.json) 与 [数据格式说明](references/menu-data.md)，把每次推荐结果保存为 `data/menu.json`，执行： ```sh node scripts/render-menu.mjs --data data/menu.json --out outputs/menu.html ``` 脚本校验预算及报价合计、餐品数量、来源元数据与敏感字段，嵌入本地餐品图片，生成单文件 HTML。不同菜单共用 `templates/menu-stage.html`，不需要让模型每次重写 HTML。 默认有汉堡、薯条、饮品、鸡块、卷、沙拉、甜品、咖啡与通用餐盘九种原创插画。可通过 `imageFile` 设置自己的 PNG / JPEG / WebP 图片。猜谜随机化只影响出场顺序，菜单及报价保持原数据。 另附一份「鸡块 + 咖啡」演示，使用同一个模板： ```sh node scripts/render-menu.mjs --data data/menu.snack.example.json --out outputs/snack-demo.html ``` ## 预算不足时 例如本轮查询在 1 元预算内没有匹配到可点餐品，页面显示「预算不足，暂时无法开场」，不展示空的猜谜卡，也不把超预算物品塞进推荐菜单。页面提供可复制的调整需求，用户回到当前客户端填写新预算后发送，结果仍只以 HTML 交付。 如果已核验某个可行方案的起价，页面会显示该起价和差额；否则不编造具体金额。低预算并非固定失败条件，实际可行性取决于领取后的可用优惠和真实报价。 ```sh npm run demo:low-budget ``` 打开 [outputs/low-budget-demo.html](outputs/low-budget-demo.html)。这是无匹配状态的演示，未进行实际领券或门店查询。 ## 校验 ```sh npm test ``` 测试覆盖先领券后查询的调用记录、预算与报价计算、待核价状态、数据脱敏、HTML 注入和替换菜单。浏览器交互需要打开演示文件验证。 ## 参赛材料 仓库包含 `README.md`、官方原文 `CONTEST_DECLARATION.md`、`MCP_INTEGRATION.md`、`mcp-config.example.json` 及可运行内容。提交报名之前必须接入真实 MCP 并补充实际调用记录，公开 GitHub 仓库后按官方 Issue 格式报名。`workbuddy.md` 仅在确实使用 WorkBuddy 并参加相应奖励时导出提交，不生成虚构开发记录。 本项目为独立开发的参赛作品，非麦当劳官方产品。餐品、价格、优惠和供应以官方实时结果为准；输出不构成医疗、营养或其他专业建议。