🌍 旅游攻略制作器 · Travel Planner

一个纯静态、零依赖的旅游攻略制作 Web 应用。打开即用，数据保存在浏览器本地存储中，刷新不丢失。

---

✨ 功能特性

📋 攻略管理

功能	说明
新建攻略	填写目的地、旅行日期、每日行程、景点、美食、住宿、交通、预算、注意事项
编辑攻略	随时修改已有攻略的任意字段
查看详情	模态弹窗展示攻略完整信息，排版清晰
删除攻略	二次确认弹窗，防止误删
搜索排序	按目的地搜索，支持最新/最早/名称三种排序

🎨 交互与体验

• 响应式设计 — 适配手机、平板、桌面端
• 卡片式布局 — 12 种渐变色封面，可自定义风格
• 动态行程编辑器 — 自由增删天数，每天可增删多个活动（时间 + 描述 + 地点）
• 键盘快捷键 — Ctrl + N 快速新建、Esc 关闭弹窗
• Toast 提示 — 操作结果即时反馈
• 数据持久化 — 基于 localStorage，关闭浏览器数据不丢失

---

🛠 技术栈

层	技术
结构	HTML5
样式	CSS3（CSS 变量、Grid、Flexbox、动画）
逻辑	原生 JavaScript（ES6+）
存储	localStorage
依赖	零外部依赖，无框架、无库、无构建工具

---

🚀 使用方式

1. 双击 travel-planner.html 在浏览器中打开
2. 点击 「➕ 新建攻略」 开始制作第一条攻略
3. 填写目的地、日期、行程等信息后保存
4. 攻略卡片将出现在首页，可随时查看、编辑、删除

无需安装 Node.js、无需启动服务器、无需任何配置。

---

📁 文件结构

.
└── travel-planner.html    # 唯一文件，包含 HTML + CSS + JS（内联）

---

📖 攻略数据字段

字段	类型	说明
destination	文本	目的地名称（必填）
startDate / endDate	日期	旅行起止日期
itinerary	数组	每日行程，每天包含多个活动（时间、描述、地点）
attractions	文本	景点推荐
foodRecommendations	文本	美食推荐
accommodation	文本	住宿安排
transportation	文本	交通信息
budgetTotal	数字	预算总额（元）
budgetBreakdown	文本	预算明细
notes	文本	注意事项
coverGradient	CSS	卡片封面渐变风格

---

⌨️ 快捷键

快捷键	操作
Ctrl + N	新建攻略
Esc	关闭弹窗 / 取消删除确认

---

🔒 数据安全

所有攻略数据存储在浏览器的 localStorage 中，不会上传到任何服务器。如需备份，可导出 localStorage 中的数据。如需重置，清除浏览器站点数据即可。

---

📄 许可

MIT License — 自由使用、修改、分发。

---

如果你觉得有用，欢迎 ⭐ Star 或分享给朋友！