韩国旅游行程助手开源项目

旅游出行场景：面向自由行与情侣出游人群，覆盖行程规划、每日景点打卡、行李与备忘管理、境外货币记账与预算统计、目的地攻略指南及出行卡片分享，一站式互动行程工具。

韩国首尔×釜山八日情侣浪漫行程互动网页：八日行程按天切换浏览，含每日时间轴、高光玩法、美食推荐与路线示意图；支持景点一键打卡与进度统计、行李打包清单与出行备忘、韩元/人民币双向汇率换算与记账预算统计；内置必备App、交通卡、贴士与紧急联络等出行指南，提供美食探店与买手店心愿单收藏备注，并可生成专属杂志风出行卡片一键保存分享。所有互动数据云端实时保存，多设备同步不丢失。

技术栈：TypeScript · React 18 · Vite · Tailwind CSS · shadcn/ui（Radix）· React Router · next-themes · motion · sonner · Supabase（PostgreSQL + RLS）· Canvas API · SVG
分层架构：
静态数据层 itinerary.ts / guides.ts（8日行程、攻略、心愿单数据）
服务层 tripApi.ts（Supabase 读写封装：键值 upsert / 明细表 CRUD）
状态层 TripDataContext（全局 Context：打卡/清单/记账/收藏/汇率预算）
视图层 Hero · 行程 · 清单 · 记账 · 指南 · 心愿单 · 卡片导出（7 模块）
数据策略：整键 JSONB（打卡/收藏等低结构数据）+ 关系明细表（记账/备忘需排序分页的数据）混合存储。

三、实现亮点
免登录云端持久化：公开共享页无登录即可使用，RLS 策略开放匿名读写，所有勾选、记账、收藏实时上云，换设备不丢数据
乐观更新 + 回滚 + 防抖：勾选即时反馈，800ms 防抖批量落库，失败自动回滚并提示，兼顾流畅与省请求
Canvas 动态卡片导出：离屏绘制 900×1200 杂志风 PNG，打卡数、收藏数、开销统计实时入图，一键下载分享
手写 SVG 路线图：波形虚线路径 + 可点击站点，与当日详情联动，非通用地图组件可比的定制表达
完整设计系统：语义化色彩令牌、明暗双主题、响应式适配（桌面侧栏导航 + 移动端抽屉）
四、实现难点
无登录共享状态一致性：多人同时编辑时的写入冲突，采用整键 upsert + 乐观回滚策略规避
高频交互的网络压力：连续勾选/改汇率会打爆