0. 先和大家打个招呼吧 
-
你是谁： 张米娅，互联网公司财务总监；
-
你是怎么用 TRAE 把 Demo 做出来的： 每次逛博物馆或者遗迹/古建，脑子里就会浮现他所处的时代、他的行程、他背后的创作者以及中国文明是如何一步步走到这里……这些浪漫又复杂的问题。有了TRAE的配合，我只需要将自己天马行空的联想告诉他，一步步交流，就实现了这个需要很多程序员和文博爱好者数月时间的作品，可以帮到更多历史爱好者或者正在学习的人，即使不身临其境，也可以感受中华文明在时间和空间上的宏伟壮丽
1. Demo 简介
是什么： 一个单文件 HTML 网页应用，以全屏可交互地图为核心，将时间轴、文化节点、地理图层、文物传播路线、人口迁移和 AI 讲解员整合在同一时空界面中，用于探索中国文明传播脉络。
面向谁： 中学生研学、文化旅行者、博物馆观众——需要把历史、地理、考古、文物放在同一张图上理解的用户。
主要功能：
-
17 时期可拖动时间轴 — 从史前到明清，拖动时间轴或点击朝代按钮，地图自动切换文化节点、丝路路线、朝代疆域和人口迁移方向
-
5 层可叠加地图图层 — 朝代疆域、地理（山脉/河流/沙漠/绿洲/森林/平原）、文物传播波纹、丝绸之路（陆上+海上）、人口迁移，可任意组合开关
-
8 个可点击文化节点 — 红山、良渚、安阳、长安/西安、洛阳、敦煌、泉州、杭州，点击后展示地理解释、文物证据和可信度标注
-
5 类文物时间线 — 陶器、玉器、青铜器、佛教造像、瓷器，按朝代排列代表馆藏，呈现器物形态传播链
-
AI 讲解员 — 基于当前地图上下文（时期、节点、图层）生成解释型导览，支持预设问题一键切换，也可自由输入问题（接入智谱 GLM 时实时生成，未接入时使用已审核知识库离线答案）
-
2 分钟引导体验 — 打开即触发 5 步 Spotlight 引导：选身份 → 切换时期 → 点文化节点 → 查看 AI 讲解 → 生成探索结论，评审者无需摸索
2. Demo 创作思路
灵感来源： 我一直觉得现有历史地图工具（CHGIS、历史地图 App）只能回答"某个朝代的疆域在哪里"，但不能回答"文明怎样从 A 走到 B"。文物不是孤立藏品——红山玉龙的形态为什么和良渚玉琮有关联？安阳为什么成为商代都城？丝绸之路流动的到底是人还是物？这些问题需要一个把时间、地理、文物和人口迁移放在一起看的工具。
想解决的问题：
-
学生学历史缺代入感——课本上朝代是表格，地图是静态，文物是图片，三者互不关联
-
旅行者不理解城市文脉——到西安只知道"这里是古都"，但不知道地理条件、丝路交通和文物证据如何共同塑造这座城市
-
博物馆观众看完展品就忘——单件展品无法展示文化传播的轨迹，参观体验碎片化
为什么做这个方向： "文化传播可视化"这个切入点在现有产品中很少。CHGIS 是 GIS 工具，中华珍宝馆是文物数据库，搜韵是诗词检索——没有一款产品把"地图+时间轴+文物形态+AI讲解"串成一条可交互的体验链。我选择单文件 HTML 作为 Demo 形态，是因为它可以直接在浏览器中打开、无需部署、评审零门槛体验。
3. Demo 体验地址
shanhe-wenmai-upload-package-20260713-ai-fix.zip (178.3 KB)
使用说明：解压后用浏览器直接打开 shanhe-wenmai-demo-v2.html 即可体验。页面加载 1.5 秒后会自动启动 2 分钟引导体验，也可点击 Hero 区"开始 2 分钟引导体验"按钮重新触发。
4. TRAE 实践过程
整个 Demo 从创意到完成全部使用 TRAE Work 完成。以下是开发流程：
第一步：确定产品形态和核心交互
向 TRAE 描述了"中国文明传播时空地图"的创意，包括时间轴、地图图层、文化节点和 AI 讲解员。TRAE 帮助设计了全屏 SVG 地图布局、铜绿/丹砂红/河蓝配色方案，以及基于现代中国版图的文化节点定位。
第二步：实现地图和时间轴核心功能
TRAE 生成了完整的单文件 HTML 应用，包含 SVG 中国版图轮廓、17 个历史时期数据结构、可拖动时间轴、5 层可切换地图图层（朝代/地理/文物/丝路/人口迁移）和 8 个文化节点的点击交互。
第三步：增加文物时间线和 AI 讲解模块
扩展了 5 大类 30 件文物数据（陶器、玉器、青铜器、佛教造像、瓷器），按朝代排列成传播时间线。AI 讲解员模块支持 4 个预设问题一键切换，同时接入智谱 GLM API 支持自由提问，API 不可用时自动降级到已审核知识库离线答案。
第四步：打磨体验闭环
增加了 3 种用户身份入口（学生/旅行者/博物馆观众）、2 分钟 Spotlight 引导浮层（5 步自动引导）、地图缩放拖拽、可折叠图例、可信度标注系统。地图轮廓从抽象线条迭代为可辨认的现代中国版图，并标注新疆、西藏、内蒙古等地理参考。
关键步骤截图：
截图 1：项目结构与管理 — TRAE Work 中管理山河文脉项目，展示任务列表和产物文件（shanhe-wenmai-demo.html、shanhe-wenmai-douyin-promo.html、shanhe-wenmai-demo-v2.html）。
截图 2：AI API 模块开发 — 通过自然语言指令"两个问题均选择A方案"驱动 TRAE 实现 API 调用、上下文构建、回答解析和打字机效果，右侧浏览器同步预览更新后的 Demo。
截图 3：创意方向迭代 — 从"城市文化资料地图"迭代为"文明传播与地理变迁的时空模拟器"，TRAE 帮助重新定位核心方向并同步更新 Demo 预览。
关键任务 Session ID：
-
Session 1（7/10 地图与核心功能开发）：
1888294971913962:e6d74785a5e4736c8174473f4268cbab_6a4ef53e3d67c3e589d6af38.6a50cdbc3d67c3e589d6b184.6a50cdbc3d67c3e589d6b182:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/10 18:47:24) -
Session 2（7/12 AI API 接入与引导优化）：
1888294971913962:7e183e81b2c09d2bd15b5bfbf7ebb013_6a4ef53e3d67c3e589d6af38.6a5387243d67c3e589d6b5e4.6a5387243d67c3e589d6b5e2:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/12 20:23:00) -
Session 3（7/12 Spotlight 引导与体验打磨）：
1888294971913962:cfa687a4370c011a5e9ba1d456dac3bf_6a4ef53e3d67c3e589d6af38.6a538a2b3d67c3e589d6b675.6a538a2b3d67c3e589d6b673:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/12 20:35:55)
开发心得：
这个项目最大的挑战是"单文件承载复杂度"——3000+ 行的 HTML/CSS/JS 要同时包含 SVG 地图、17 个时期数据、30 件文物数据、API 调用和引导系统。TRAE 在这方面非常高效：每次我描述清楚需求（比如"地图轮廓要能看出新疆和西藏的位置"），它就能精准定位到需要修改的代码区域并生成改动，而不是重写整个文件。从抽象的绿色边框到可辨认的现代版图，迭代了 3 轮就达到了满意的效果。AI 讲解模块也是类似——先搭预设答案框架，再接入 API，最后加打字机效果和离线降级，每一步都是通过自然语言描述需求来推进的。重点强调，TRAE的模型生成图片非常优秀，是同类模型中的佼佼者。
附：报名帖链接
【需要操作：粘贴你已通过审核的报名帖链接。打开 https://forum.trae.cn/c/38-category/39-category/39 找到你的报名帖，复制浏览器地址栏 URL 粘贴到这里】
