途连 TuLink — 全球旅行连接平台
1. Demo 简介
途连 TuLink 是一款面向出境旅行者的全球旅行连接 Web App，解决出境游三大痛点：连不上 WiFi、不知道去哪、找不到地陪。
核心用户：出境自由行旅客，尤其是首次前往陌生国家的年轻旅行者。
核心功能：
- WiFi 共享 — 地图标记全球城市免费 WiFi 热点，点击查看密码并一键复制；用户可贡献新 WiFi，数据持久化到 localStorage
- 探店推荐 — 当地人推荐的店铺与景点，含评分、真实评价、WiFi 关联信息；支持按名称搜索、收藏
- AI 智能行程 — 选择心情（美食/文化/休闲）+ 时长，调用火山引擎方舟大模型生成个性化时段化行程；时间轴卡片 + 地图路线连线 + 点击 flyTo 导航；AI 失败时静默降级到预写样例，绝不白屏
- 地陪预约 — 浏览本地向导主页（头像/专长/简介/价格/可约时段/评价），选时段确认，mock 成功并写入「我的旅程」
2. Demo 创作思路
灵感来源：出境旅行三痛 — 每次出国都面临：落地连不上 WiFi 查不了地图；攻略太多不知道去哪；想找当地人带路却无从下手。
想解决的问题：用一个轻量 Web App 把「找 WiFi → 探店 → 规划行程 → 预约地陪」串成一条完整体验链路。
方向判断：轻量可体验 > 重架构。AI 行程是招牌时刻，用真实大模型调用体现技术力；其余功能用种子数据 + mock 实现。
技术亮点：
- 液态玻璃（glassmorphism）视觉系统，暗色主题 + 品牌渐变点缀
- MapLibre GL JS 地图，标记层 + GeoJSON 路线连线 + flyTo 联动
- AI 行程走 serverless 代理，ARK_API_KEY 仅服务端，JSON mode 结构化输出，12s 超时 + 三重降级
- Zustand + localStorage 零后端持久化
- Framer Motion 页面切换 / 卡片入场动画
3. Demo 体验地址
线上链接：https://tulink-demo.vercel.app
演示视频：见 GitHub 仓库根目录 tulink-demo-video.webm（移动设备模式录制，覆盖全流程）
GitHub 仓库：https://github.com/changeworldBT/tulink-demo
4. 关键步骤截图
5. TRAE 实践过程
整个 Demo 在 TRAE IDE 中完成，分 5 个 Phase：
Phase 0 — 空壳搭建（Session 1）：Next.js 14 项目，MapLibre 地图，液态玻璃视觉系统，Zustand store
Phase 1 — 核心功能（Session 2）：WiFi 标记层，探店联动，地陪列表，4城种子数据（38 WiFi + 21 店铺 + 11 地陪）
Phase 2 — 增强模块（Session 3）：地陪预约全流程，AI 智能行程（serverless 代理+方舟大模型+JSON mode+三重降级），地图路线连线，搜索功能，Framer Motion 全局动画
Phase 3 — 精修与提交（Session 4）：Hero 精修（SVG 世界地图+城市脉冲），首运行引导，数据精修（Unsplash 照片），Vercel 部署
Phase 4 — 测试修复（Session 5）：功能测试+4个Bug修复（Hero入口逻辑/新手引导/PlaceDetail关闭/AI关闭回地图），20项测试清单全部通过，演示视频录制
6. TRAE Session IDs
- Session 1（2026/7/6 21:52）：00f83c34021940470d8b19ec2a1735e3
- Session 2（2026/7/6 22:49）：44dba0b872857002f88120a3d9a67550
- Session 3（2026/7/6 23:28）：f6afae089b350fdb34aabf3173ca8b95
- Session 4（2026/7/8 21:16）：cea1d93f0f0f83894fabf2a24110fc21
- Session 5（2026/7/9 11:41）：ef2ffa363c04bd3641b979ef678e398c
7. Made with TRAE
本项目从需求规划、代码编写、Bug 修复到构建验证，全程在 TRAE IDE 中完成。TRAE 的 AI 对话式开发大幅提升了从设计到实现的效率。
途连 TuLink · Made with TRAE