Trip Planner 0→1

装备清单 / 行李清单单独一个

，便于出发前最后核对。

---

Phase 6 —— 交互式网页（index.html）

模板：references/templates/index-skeleton.html

核心能力：

• 顶部进度条：N / 总数、百分比、渐变条
• 地图：Leaflet + OpenStreetMap（免费无 Key），标出住宿/景点/餐厅/机场，点击弹出信息
• Todo 勾选：点击切换 done，done 自动沉底（flying 动画 → DocumentFragment 重排）
• 同步徽章：右下角小圆点 + 文字 已保存 / 已同步到云端 / 离线
• 暗色主题：低亮屏下不刺眼，户外强光下也清晰

关键 CSS（Todo 沉底动画）：

.todo-item {
  transition: background .2s, opacity .3s, transform .3s;
  /* ⚠️ 不要用 transition: all，会让 hover 卡顿 */
}
.todo-item.flying { opacity: 0.35; transform: scale(0.98); }

关键 JS（勾选沉底）：

todoItems.forEach(item => {
  item.addEventListener('click', () => {
    const willBeDone = !item.classList.contains('done');
    item.classList.toggle('done');
    saveTodos();
    const ul = item.parentElement;
    if (willBeDone) {
      item.classList.add('flying');
      setTimeout(() => { ul.appendChild(item); item.classList.remove('flying'); }, 220);
    } else {
      const firstDone = ul.querySelector('.todo-item.done');
      item.classList.add('flying');
      setTimeout(() => {
        if (firstDone && firstDone !== item) ul.insertBefore(item, firstDone);
        else ul.appendChild(item);
        item.classList.remove('flying');
      }, 180);
    }
  });
});

完整可拷贝代码：references/templates/todo-sync.js。

---

Phase 7 —— 数据同步

默认策略（0 服务器成本）：localStorage + URL 分享，够 95% 场景用。

跨设备同步可选方案（按集成难度从易到难）：

方案 A：localStorage 本地存储（默认）

• 所有勾选状态存浏览器本地
• 无服务端、无账号、无限制
• 局限：不同设备状态独立

方案 B：GitHub Gist（零服务器，需 GitHub 账号）

• 把勾选状态 POST 到一个 public Gist
• 用 Personal Access Token（只需 gist 权限）
• 代码模板见 references/templates/todo-sync.js 的 Gist 变体

方案 C：JSONBin.io / jsonbin.io（零服务器，免费 1 万次/月）

• 注册后拿 X-Master-Key
• REST API 非常简单：GET /b/ + PUT /b/
• 代码模板见 references/templates/todo-sync.js

方案 D：自建轻量同步服务

• 任何能跑 Node / Python / Go 的 VPS
• 40 行代码搞定（示例见 references/self-host-sync.md）
• 推荐配 Cloudflare Tunnel / Cloudflare Workers，免公网暴露

方案 E：Cloudflare Workers KV（推荐，零运维）

• 免费额度：10 万次读 + 1 千次写/天
• 浏览器直调 Workers URL，无 CORS 烦恼
• 示例代码见 references/cloudflare-workers-sync.md

选型建议：

| 场景 | 推荐 | |------|------| | 一个人出行 | A（localStorage） | | 两人共享，不想折腾 | C（JSONBin.io） | | 已有 GitHub 账号 | B（Gist） | | 有 Cloudflare 账号 + 想免运维 | E（Workers KV） | | 有自己的 VPS | D（自建） |

---

Phase 8 —— 部署 & 预览

8.1 本地预览

# 原生 Python 临时 server
python3 -m http.server 8000
或 Node
npx serve .

8.2 静态托管（推荐平台）

| 平台 | 特点 | 自定义域名 | |------|------|-----------| | Cloudflare Pages | 免费无限流量，CI/CD 自动部署 | ✅ | | Vercel | Next.js 友好，预览 URL 丰富 | ✅ | | Netlify | 表单 / 函数开箱即用 | ✅ | | GitHub Pages | 公开仓库免费 | ✅ | | 自己 VPS + nginx | 完全控制 | ✅ |

8.3 分享注意事项

• URL 加缓存破坏参数：?v=20260501，避免用户看到旧版本
• 微信分享：直接发 URL，不要发 HTML 文件（iOS 微信不渲染 HTML 附件）
• 敏感信息脱敏：对外分享的攻略不要暴露酒店确认号、信用卡尾号、订单号等

---

✅ 最终交付物检查清单

完整一份攻略应包含：

• [ ] 行程_v.md 行程书（必须）
• [ ] index.html 指挥页（必须）
• [ ] icons/ SVG 图标集（可选，Lucide / Heroicons）
• [ ] 酒店比价 md
• [ ] 地图 KML / HTML 路线图（如果自驾）
• [ ] Day by Day 大图指南 / 登机日流程页（可选）
• [ ] 部署 URL + 缓存破坏参数
• [ ] 同行者跨设备访问测试

---

🔴 常见坑

1. 直接做，不要反复问"要不要我帮你…" —— 在获得基本信息后就推进，缺啥再单点问 2. Todo 动词要对齐行李 —— 用副说明标注"对应行李清单：XX"，否则打包时易漏 3. 动画不要 transition: all —— 改成显式 transition: background, opacity, transform，否则 hover 卡顿 4. DocumentFragment 重排 —— 批量移动 DOM 用 fragment.appendChild 避免多次 reflow 5. 同步 key 不要重名 —— 不同攻略用不同 roomId，否则互相覆盖 6. 作息偏好要确认 —— 用户可能是早鸟也可能是夜猫，早于其自然醒时间的活动必须明确标注原因 7. Plan B 不是装饰 —— 关键节点（跨岛渡轮、鲸鲨配额、跨国航班转乘）必须写备胎 8. 脱敏 —— 对外分享不暴露确认号 / 信用卡尾号 / 订单号等

---

📚 参考文件

• references/workflow-checklist.md —— 8 个 Phase 的 DoD 检查清单
• references/research-prompts.md —— 小红书 / WebSearch 提示词模板库
• references/templates/itinerary-template.md —— 行程 Markdown 骨架
• references/templates/index-skeleton.html —— 交互式网页骨架
• references/templates/todo-sync.js —— Todo 同步完整 JS（含 localStorage / Gist / JSONBin 三种后端）
• references/cloudflare-workers-sync.md —— Cloudflare Workers KV 同步服务示例
• references/self-host-sync.md —— 自建 40 行同步服务示例

---

_Built 2026-04-24. 沉淀自一次完整的东南亚自由行攻略制作实践。_