diff --git a/src/components/Workbench.vue b/src/components/Workbench.vue index 2c697f9..1d63708 100644 --- a/src/components/Workbench.vue +++ b/src/components/Workbench.vue @@ -24,8 +24,8 @@ {{ getSchemeLabel(i) }} - @@ -163,7 +163,7 @@ import { ref, computed, watch } from 'vue' import { useItineraryStore } from '../stores/itinerary' import MapView from './MapView.vue' -import { exportToMarkdown } from '../services/exportService' +import { exportToHtml } from '../services/exportHtmlService' const store = useItineraryStore() const mapView = ref(null) @@ -235,8 +235,11 @@ const toggleRoute = () => { function exportCurrentScheme() { const idx = store.activeSchemeIndex - if (idx < 0 || idx >= store.quickSchemes.length) { - // 导出当前 points 数据 + if (idx >= 0 && idx < store.quickSchemes.length) { + // 导出完整的方案数据 + exportToHtml(store.quickSchemes[idx], `${store.quickSchemes[idx].name || '行程规划'}.html`) + } else { + // 从 points 构建方案数据导出 const scheme = { name: '我的行程', route: store.points.map(p => p.name).join(' → '), @@ -252,13 +255,12 @@ function exportCurrentScheme() { driveTime: p.driveTime, schedule: p.schedule || [], foods: p.foods || [], - waypoints: p.waypoints || [] + waypoints: p.waypoints || [], + hotel: p.hotel || '' })), tips: '' } - exportToMarkdown(scheme, '我的行程.md') - } else { - exportToMarkdown(store.quickSchemes[idx], `${store.quickSchemes[idx].name || '行程规划'}.md`) + exportToHtml(scheme, '我的行程.html') } } diff --git a/src/services/exportHtmlService.js b/src/services/exportHtmlService.js new file mode 100644 index 0000000..a5a7fb4 --- /dev/null +++ b/src/services/exportHtmlService.js @@ -0,0 +1,195 @@ +// 导出可交互的 HTML 行程文件 +export function exportToHtml(scheme, filename = null) { + if (!scheme) return + + const html = generateHtml(scheme) + const blob = new Blob([html], { type: 'text/html;charset=utf-8' }) + const url = URL.createObjectURL(blob) + const link = document.createElement('a') + link.href = url + link.download = filename || `${scheme.name || '行程规划'}.html` + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + URL.revokeObjectURL(url) +} + +function generateHtml(scheme) { + const daysDetail = scheme.daysDetail || [] + const points = [] + + // 从 daysDetail 中提取站点信息 + daysDetail.forEach((day, idx) => { + points.push({ + name: day.location || `Day ${idx + 1}`, + day: `Day ${idx + 1}`, + desc: day.desc || '', + km: day.km || '—', + driveTime: day.driveTime || '—', + schedule: day.schedule || [], + foods: day.foods || [], + waypoints: day.waypoints || [], + hotel: day.hotel || '' + }) + }) + + return ` + + + + + ${scheme.name || '行程规划'} + + + +
+
+

${scheme.name || '行程规划'}

+
+ 📍 ${scheme.route || '—'} + 📅 ${scheme.days || '—'}天 + 🚗 ~${scheme.totalKm || '—'}km + 💰 ${scheme.budget || '—'} +
+
+ + ${scheme.highlights && scheme.highlights.length > 0 ? ` +
+

✨ 行程亮点

+ +
+ ` : ''} + +
+ ${points.map((p, i) => ` +
Day ${i + 1}
+ `).join('')} +
+ + ${points.map((p, i) => ` +
+
+ Day ${i + 1} + ${p.name} + ${p.km}km · 驾车${p.driveTime}h +
+ + ${p.desc ? `

${p.desc}

` : ''} + + ${p.schedule && p.schedule.length > 0 ? ` +
+

📅 日程安排

+ ${p.schedule.map(s => ` +
+
${s.time || '—'}
+
+ ${s.title || s.content || '—'} +

${s.desc || ''}

+
+
+ `).join('')} +
+ ` : ''} + + ${p.waypoints && p.waypoints.length > 0 ? ` +
+

🗺️ 途径推荐

+
+ ${p.waypoints.map(wp => ` +
${wp.icon || '📍'} ${wp.name}
+ `).join('')} +
+
+ ` : ''} + + ${p.foods && p.foods.length > 0 ? ` +
+

🍽️ 美食推荐

+
+ ${p.foods.map(f => { + const name = typeof f === 'string' ? f : (f.name || f) + const icon = typeof f === 'object' ? (f.icon || '🍜') : '🍜' + return `
${icon}${name}
` + }).join('')} +
+
+ ` : ''} + + ${p.hotel ? ` +
🏨 住宿推荐：${p.hotel}
+ ` : ''} +
+ `).join('')} + + ${scheme.tips ? ` +
+

💡 旅行贴士

+

${scheme.tips}

+
+ ` : ''} + +
由智能行程规划系统生成
+
+ + + +` +}