{{目的地}}攻略 | {{出发城市}}出发 {{日期区间}}

# HTML 可视化攻略模板本文档定义了攻略 HTML 文件的标准模板。 ## 目录 1. [完整 HTML 模板](#完整-html-模板) 2. [样式说明](#样式说明) 3. [组件说明](#组件说明) 4. [使用方法](#使用方法) --- ## 完整 HTML 模板 ```html {{目的地}}攻略 | {{出发城市}}出发 {{日期区间}}

✈️

机票

¥{{机票总价}}

🏨

住宿

¥{{住宿总价}}

🎫

门票

¥{{门票总价}}

💰

人均

¥{{人均费用}}

✈️ 大交通方案

去程 · {{去程航班号}}

{{去程日期}} {{去程时间}} {{出发城市}}→{{目的地}}

¥{{去程价格}}/人

回程 · {{回程航班号}}

{{回程日期}} {{回程时间}} {{目的地}}→{{出发城市}}

¥{{回程价格}}/人

✅ 往返合计 ¥{{机票往返价格}}/人立即预订

📅 Day 1 · {{Day1日期}}（{{Day1周几}}）

{{Day1主题}}

{{时间1}}

✈️ {{活动标题1}}

{{活动描述1}}

{{时间2}}

🏨 入住酒店

{{酒店描述}}

{{酒店名称}} ¥{{酒店价格}}/晚

⭐ {{酒店评分}} 📍 {{酒店位置}} ✅ 有房

查看详情并预订

{{时间3}}

📍 {{景点名称}}

{{景点描述}}

✅ {{门票价格}} · {{开放时间}}

💰 费用总览（{{人数}}人合计）

✈️ 机票往返×{{人数}}	¥{{机票总价}}	{{航班说明}}
🏨 住宿{{晚数}}晚	¥{{住宿总价}}	{{酒店说明}}
🎫 景点门票×{{人数}}	¥{{门票总价}}	{{景点说明}}
🚗 当地交通	¥{{交通费用}}	打车+租车
🍜 餐饮预估	¥{{餐饮费用}}	{{天数}}天

📊 合计

¥{{总费用}}

人均 ¥{{人均费用}}

📋 与原攻略的差异说明

#	原攻略	你的版本
1	{{差异1原内容}}	{{差异1调整}}
2	{{差异2原内容}}	{{差异2调整}}

‼️ 小贴士

{{提示1}}
{{提示2}}
{{提示3}}

✈️ 预订机票 🏨 预订酒店 🖨️ 打印攻略 📷 导出图片

``` --- ## 样式说明 ### 配色方案 | 元素 | 颜色 | 用途 | |------|------|------| | 主色调 | `#667eea → #764ba2` | 头部、按钮、Day卡片头 | | 交通卡片 | `#11998e → #38ef7d` | 机票信息，绿色表示出行 | | 费用卡片 | `#f093fb → #f5576c` | 费用总览，粉红吸引注意 | | 警告提示 | `#fff3cd` | 小贴士背景 | | 成功状态 | `#d4edda` | 可用、有房 | | 警告状态 | `#fff3cd` | 需确认 | | 错误状态 | `#f8d7da` | 不可用 | ### 响应式断点 - **桌面端**：> 600px，完整布局 - **移动端**：≤ 600px，单列布局，时间线简化 ### 打印优化 - 隐藏预订按钮 - 移除阴影和渐变背景 - 优化纸张布局 --- ## 组件说明 ### 1. 头部区域 (header) 展示目的地、出行信息、原攻略来源 ### 2. 快速信息 (quick-info) 4格快速预览：机票、住宿、门票、人均费用 ### 3. 交通卡片 (transport-card) 去程和回程航班信息，含预订链接 ### 4. 每日行程 (day-card) - day-header：日期和主题 - timeline-item：时间线项目 - hotel-card：嵌入式酒店卡片 ### 5. 状态标签 (status) - `status-ok`：✅ 可用 - `status-warn`：⚠️ 需确认 - `status-error`：❌ 不可用 - `status-info`：ℹ️ 信息 ### 6. 费用总览 (budget-card) 表格形式展示各项费用和总计 ### 7. 差异对比 (diff-card) 原攻略 vs 定制版本的差异表格 ### 8. 小贴士 (tips-card) 重要提醒和建议 ### 9. 操作按钮 (actions) 预订链接和打印按钮 --- ## 使用方法 ### 生成 HTML 文件 1. 准备攻略数据（目的地、日期、费用等） 2. 替换模板中的 `{{变量}}` 占位符 3. 使用 `create_file` 工具生成文件 ### 变量占位符列表 | 变量 | 说明 | 示例 | |------|------|------| | `{{目的地}}` | 旅行目的地 | 普吉岛 | | `{{出发城市}}` | 用户出发城市 | 杭州 | | `{{日期区间}}` | 出行日期范围 | 4月4日-4月8日 | | `{{天数}}` | 总天数 | 5 | | `{{晚数}}` | 住宿晚数 | 4 | | `{{人数}}` | 出行人数 | 4 | | `{{原作者}}` | 原攻略作者 | Elaine | | `{{机票总价}}` | 机票费用 | 12,468 | | `{{住宿总价}}` | 住宿费用 | 2,001 | | `{{门票总价}}` | 门票费用 | 1,600 | | `{{人均费用}}` | 人均总费用 | 5,132 | | `{{去程航班号}}` | 去程航班 | VZ3537+VZ314 | | `{{回程航班号}}` | 回程航班 | OD543+D7306 | | `{{机票预订链接}}` | 飞猪机票链接 | https://a.feizhu.com/... | | `{{酒店预订链接}}` | 飞猪酒店链接 | https://a.feizhu.com/... | | `{{生成时间}}` | 攻略生成时间 | 2026-03-31 | ### 动态生成 Day 卡片对于每一天的行程，复制 `day-card` 组件并替换： - `{{DayN日期}}`：当天日期 - `{{DayN周几}}`：星期几 - `{{DayN主题}}`：当天主题 - 时间线项目根据实际活动增减 ### 示例代码 ```python # 生成 HTML 文件 html_content = """ ...（将所有变量替换为实际值） """ create_file( file_path="/Users/xxx/Desktop/普吉岛-攻略-2026-04-04.html", file_content=html_content ) ``` --- ## 最佳实践 1. **变量替换**：使用字符串替换或模板引擎替换所有 `{{变量}}` 2. **动态内容**：根据实际天数和活动数量动态生成 day-card 和 timeline-item 3. **链接处理**：确保所有预订链接 `jumpUrl` 正确提取 4. **状态标注**：根据验证结果使用正确的 status 类名 5. **响应式测试**：生成后在移动端和桌面端都测试一下