【生活娱乐】食韵 — 怎么吃，才地道
一座城的味道，从一碗面的规矩开始。
一、Demo 简介
是什么：食韵是一个面向中华美食文化的纯前端 Web 网站，基于 Vue 3 + Vite + Tailwind CSS v4 构建，已通过 Docker 容器化部署至阿里云服务器，公网可访问。
面向谁：热爱旅行与美食的年轻人、想了解地域饮食文化的食客、以及希望"吃得地道"的外地游客。核心用户画像为 18–35 岁、对中华地方美食有好奇心、愿意为"吃对方式"花心思的人群。
主要功能：
- 美食详情页 — 以叙事化文字 + 视觉化指标呈现一道菜的地道吃法、食材搭配、口味维度（辣度 / 甜度 / 酸度三维点阵）、推荐搭配，让用户像读一篇短文一样了解一道菜。
- 美食地图 — 接入高德地图 JS API 2.0，在全国地图上标注各城市的代表美食，点击城市标记即展示该城市特色菜列表。
- 美食仓库 — 整合 20 道中华代表美食的可检索仓库，支持关键词搜索 + 地区筛选，每道菜配有图片、口味标签、地道吃法小贴士。
二、Demo 创作思路
灵感来源
中华美食浩如烟海，但互联网上的美食内容要么是探店短视频（碎片化、地域性强），要么是菜谱网站（重做法、轻文化）。真正讲"怎么吃才地道"——烤鸭要卷荷叶饼蘸甜面酱、热干面要三秒拌好边走边吃、过桥米线要先荤后素最后下米线——这些藏在街头巷尾的吃法规矩，反而散落难寻。
食韵想做的，不是再多一个菜谱库，而是一本"吃货的行路指南"。
想解决的问题
- 痛点 1：游客到一座新城市，不知道当地代表菜怎么吃才算"对"。比如点北京烤鸭只知蘸甜面酱，不知脆皮蘸白糖才是行家吃法。
- 痛点 2：现有美食内容重"做法"轻"文化"，缺少对一道菜背后故事、流派、规矩的系统梳理。
- 痛点 3：地图类美食应用普遍聚焦店铺推荐，反而让人忽略了一座城与一道菜的整体关系。
为什么做这个方向
- 文化属性强、视觉表达空间大：每道菜都有叙事、有图、有流派，适合用网站形态做精致呈现，而非短视频或纯文字。
- 技术栈可控、可独立完成：作为个人作品，纯前端 + 第三方地图 API 的组合能在不依赖后端的前提下实现完整体验。
- 数据可沉淀、可扩展：以结构化数据（foods.js）驱动内容，后续加菜、加城市、加地区都很容易，具备长期演进空间。
- 差异化清晰：不与大众点评比店铺、不与下厨房比菜谱，专注"地道吃法"这一被忽视的细分赛道。
三、Demo 体验地址
在线访问：http://8.136.20.123/
四、TRAE 实践过程
4.1 开发流程概览
本项目从立项到部署上线，全程在 TRAE IDE 中完成，主要经历以下阶段：
| 阶段 | 主要工作 | TRAE 能力使用 |
|---|---|---|
| 立项 | 设计稿还原、技术选型、项目脚手架 | TRAE 对话式开发 + 文件编辑 |
| 功能开发 | 详情页 / 地图 / 仓库三大页面 | TRAE 多轮对话、Skill 调用 |
| 数据完善 | 美食数据扩充、口味指标修正 | TRAE 联网搜索 + 知识库 |
| Bug 修复 | 高德地图鉴权、缩放限制、图片引用 | TRAE 错误诊断 + 迭代修复 |
| 部署上线 | Docker 镜像构建、服务器部署 | TRAE 计划模式 + 命令执行 |
4.2 关键开发步骤截图
4.3 关键任务对话 Session ID
以下 Session ID 对应项目开发中的关键节点，可在 TRAE 中双击对话复制验证：
-
Session ID 1：
4373194175698908:6772537ecab200a3079a850ff413cc37_6a4cdc97e92901227d594c06.6a4cdc97e92901227d594c09.6a4cdc97e92901227d594c07:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 19:01:43)— 项目初始化与四大需求实现（详情页改造、美食仓库、地图修复、文字截断修复） -
Session ID 2：
4373194175698908:4b3afce59c1df91e814d67b97a809cd0_6a4cdc97e92901227d594c06.6a4d9edfe0b5d813f2751053.6a4d9edee0b5d813f2751051:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 08:50:39)— 高德地图 API Key 修正、甜度/酸度字段重构、地图缩放限制、美食数据准确性核查与扩充 -
Session ID 3：
4373194175698908:05852a66f68ca448b9016e2f6ce0ebf1_6a4cdc97e92901227d594c06.6a4dbfd4e0b5d813f2751499.6a4dbfd4e0b5d813f2751498:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 11:11:16)— 废弃文件清理 + Docker 镜像打包 + 服务器部署
4.4 TRAE 使用心得
1. 对话式开发显著降低上下文成本：传统开发要自己翻文档、查 API、写代码、调 bug；TRAE 把这些串成一条对话，"地图缩放限制没生效"这种问题，描述一下现象，TRAE 直接定位到 minZoom/maxZoom 不是高德 JS API 2.0 的正确参数，应改用 zooms: [4, 8]，省去了大量查文档时间。
2. 计划模式（/plan）适合复杂任务：清理废弃文件 + Docker 部署这种多步骤任务，先用 /plan 让 TRAE 出完整方案，确认后再执行，避免边做边改的混乱。
3. 联网搜索 + 知识库组合确保数据准确：在完善美食数据时，让 TRAE 联网搜索验证"重庆小面辣度"、"肉夹馍是否加青椒"等细节，纠正了 7 处数据错误，比纯靠记忆靠谱得多。
4. Skill 机制拓展能力边界：通过 byted-seedream-image-generate 技能为新增美食生成配图，虽然因 API Key 问题最终回退到项目已有图片，但 TRAE 的 Skill 生态让 AI 不局限于"写代码"，而是能完成"生成素材"等创作类任务。
5. Docker 部署也能在 TRAE 里完成：从写 Dockerfile、nginx.conf、.dockerignore，到本机构建镜像、gzip 压缩、导出 tar，再到指导我登录服务器执行 docker load + docker run，全流程 TRAE 一步步带我做，对不熟悉容器化的前端开发者非常友好。