+
📋 为你生成了 {{ schemes.length }} 个方案
- 🚗 {{ scheme.km }}
- ⏱️ {{ scheme.driveTime }}
+ 🚗 ~{{ scheme.totalKm }}km
+ ⏱️ {{ scheme.totalDriveTime }}h
+ 📅 {{ scheme.days }}天
💰 {{ scheme.budget }}
{{ h }}
-
-
🗺️ {{ routePreview(i) }}
+
+ 🗺️ {{ scheme.route }}
-
选择此方案 →
+
选择此方案进入工作台 →
@@ -80,44 +102,14 @@
@@ -171,16 +204,8 @@ const selectScheme = (index) => {
color: #fff;
}
-.chat-header h1 {
- margin: 0 0 8px;
- font-size: 24px;
-}
-
-.chat-header p {
- margin: 0;
- opacity: 0.8;
- font-size: 14px;
-}
+.chat-header h1 { margin: 0 0 8px; font-size: 24px; }
+.chat-header p { margin: 0; opacity: 0.8; font-size: 14px; }
.chat-messages {
flex: 1;
@@ -194,7 +219,7 @@ const selectScheme = (index) => {
.message {
display: flex;
gap: 12px;
- max-width: 80%;
+ max-width: 85%;
}
.message.bot { align-self: flex-start; }
@@ -218,7 +243,7 @@ const selectScheme = (index) => {
padding: 12px 16px;
border-radius: 16px;
font-size: 14px;
- line-height: 1.5;
+ line-height: 1.6;
}
.message.bot .bubble {
@@ -233,6 +258,68 @@ const selectScheme = (index) => {
border-bottom-right-radius: 4px;
}
+.example {
+ opacity: 0.8;
+ font-size: 13px;
+}
+
+/* Thinking process */
+.thinking-process {
+ margin-bottom: 10px;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.thinking-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ background: #f8f9fa;
+ cursor: pointer;
+ font-size: 13px;
+ color: #666;
+ user-select: none;
+}
+
+.thinking-header:hover { background: #f0f0f0; }
+
+.thinking-toggle {
+ margin-left: auto;
+ font-size: 12px;
+ color: #999;
+}
+
+.thinking-content {
+ padding: 12px;
+ font-size: 13px;
+ color: #555;
+ line-height: 1.6;
+ max-height: 200px;
+ overflow-y: auto;
+ background: #fafafa;
+}
+
+.thinking-process:not(.expanded) .thinking-content {
+ display: none;
+}
+
+/* Error hint */
+.error-hint {
+ margin-top: 8px;
+ padding: 8px 12px;
+ background: #fff3cd;
+ border-radius: 6px;
+ font-size: 12px;
+ color: #856404;
+}
+
+.message-content {
+ white-space: pre-wrap;
+}
+
+/* Loading */
.thinking {
display: flex;
align-items: center;
@@ -255,6 +342,7 @@ const selectScheme = (index) => {
40% { opacity: 1; transform: scale(1); }
}
+/* Input */
.chat-input-area {
display: flex;
gap: 8px;
@@ -274,6 +362,7 @@ const selectScheme = (index) => {
}
.chat-input-area input:focus { border-color: #2a9d8f; }
+.chat-input-area input:disabled { background: #f5f5f5; cursor: not-allowed; }
.chat-input-area button {
padding: 12px 24px;
@@ -299,6 +388,8 @@ const selectScheme = (index) => {
border-radius: 16px;
padding: 20px;
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
+ max-height: 60vh;
+ overflow-y: auto;
}
.scheme-cards h3 {
@@ -350,8 +441,9 @@ const selectScheme = (index) => {
}
.card-stats {
- display: flex;
- gap: 12px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 4px;
margin-bottom: 8px;
font-size: 12px;
color: #666;
@@ -372,7 +464,7 @@ const selectScheme = (index) => {
font-size: 11px;
}
-.card-mini-map {
+.card-route {
font-size: 11px;
color: #888;
margin-bottom: 12px;
@@ -396,4 +488,10 @@ const selectScheme = (index) => {
transform: translateY(20px);
opacity: 0;
}
+
+@media (max-width: 900px) {
+ .cards-grid {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/services/aiService.js b/src/services/aiService.js
new file mode 100644
index 0000000..21ae1b7
--- /dev/null
+++ b/src/services/aiService.js
@@ -0,0 +1,140 @@
+const SYSTEM_PROMPT = `你是一个专业的旅行规划助手。你需要根据用户的需求规划行程。
+
+## 重要：输出格式
+你必须直接输出 JSON，不要包含任何 markdown 代码块标记（如 \`\`\`json），不要在 JSON 前后添加任何额外文字。
+
+JSON 格式如下：
+{
+ "thinking": "你的思考过程",
+ "schemes": [
+ {
+ "name": "方案名称",
+ "route": "路线描述",
+ "days": 4,
+ "totalKm": 1200,
+ "totalDriveTime": 12,
+ "budget": "¥3000",
+ "highlights": ["亮点1", "亮点2"],
+ "points": [
+ {
+ "name": "地点名称",
+ "lat": 25.04,
+ "lng": 102.71,
+ "day": "Day 1",
+ "badge": "START",
+ "icon": "🏙️",
+ "desc": "简短描述",
+ "km": "0km",
+ "driveTime": "—",
+ "schedule": [{"time": "上午", "content": "行程"}],
+ "foods": ["美食"],
+ "hotel": "住宿",
+ "tips": "注意事项"
+ }
+ ]
+ }
+ ]
+}
+
+注意：
+1. points 第一个用 START badge，中间用 D1/D2，最后一个用 END
+2. lat/lng 必须是真实中国地理坐标
+3. 至少 2 个方案，最多 3 个
+4. 直接输出 JSON，不要其他内容`
+
+export async function chatWithAI(userMessage, onThinking = null) {
+ const response = await fetch('/api/chat', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ messages: [
+ { role: 'system', content: SYSTEM_PROMPT },
+ { role: 'user', content: userMessage }
+ ],
+ stream: true
+ })
+ })
+
+ if (!response.ok) {
+ const error = await response.json().catch(() => ({}))
+ throw new Error(error.error?.message || `API 请求失败: ${response.status}`)
+ }
+
+ const reader = response.body.getReader()
+ const decoder = new TextDecoder()
+ let fullContent = ''
+ let buffer = ''
+
+ while (true) {
+ const { done, value } = await reader.read()
+ if (done) break
+
+ buffer += decoder.decode(value, { stream: true })
+ const lines = buffer.split('\n')
+ buffer = lines.pop() || ''
+
+ for (const line of lines) {
+ const trimmed = line.trim()
+ if (!trimmed || !trimmed.startsWith('data:')) continue
+
+ const data = trimmed.slice(5).trim()
+ if (data === '[DONE]') break
+
+ try {
+ const parsed = JSON.parse(data)
+ const chunk = parsed.choices?.[0]?.delta?.content || ''
+ if (chunk) {
+ fullContent += chunk
+ if (onThinking) onThinking(fullContent)
+ }
+ } catch (e) {
+ // Skip malformed JSON chunks
+ }
+ }
+ }
+
+ return parseAIResponse(fullContent)
+}
+
+function parseAIResponse(content) {
+ // Remove markdown code block markers if present
+ let cleaned = content.trim()
+
+ // Remove ```json ... ``` or ``` ... ```
+ const codeBlockMatch = cleaned.match(/```(?:json)?\s*([\s\S]*?)```/)
+ if (codeBlockMatch) {
+ cleaned = codeBlockMatch[1].trim()
+ }
+
+ // Remove any
... tags
+ cleaned = cleaned.replace(/
[\s\S]*?<\/thinking>/g, '').trim()
+
+ // Try to find JSON object
+ // Find the first { and last } to extract the JSON
+ const firstBrace = cleaned.indexOf('{')
+ const lastBrace = cleaned.lastIndexOf('}')
+
+ if (firstBrace === -1 || lastBrace === -1 || lastBrace <= firstBrace) {
+ throw new Error('AI 未返回有效的 JSON 数据')
+ }
+
+ const jsonStr = cleaned.substring(firstBrace, lastBrace + 1)
+
+ try {
+ const parsed = JSON.parse(jsonStr)
+
+ // Validate required fields
+ if (!parsed.schemes || !Array.isArray(parsed.schemes) || parsed.schemes.length === 0) {
+ throw new Error('AI 返回结果缺少 schemes')
+ }
+
+ return parsed
+ } catch (e) {
+ if (e.message.includes('缺少 schemes')) throw e
+ console.error('JSON parse error:', e)
+ console.error('Raw content:', cleaned.substring(0, 200))
+ throw new Error('AI 返回的 JSON 格式有误，请重试')
+ }
+}
diff --git a/src/services/geoService.js b/src/services/geoService.js
new file mode 100644
index 0000000..f75b7d8
--- /dev/null
+++ b/src/services/geoService.js
@@ -0,0 +1,77 @@
+// Geocoding service using OpenStreetMap Nominatim
+const NOMINATIM_BASE = 'https://nominatim.openstreetmap.org'
+
+export async function geocode(placeName) {
+ const url = `${NOMINATIM_BASE}/search?q=${encodeURIComponent(placeName + ', China')}&format=json&limit=1`
+ try {
+ const response = await fetch(url, {
+ headers: { 'User-Agent': 'TripPlanner/1.0' }
+ })
+ const data = await response.json()
+ if (data.length > 0) {
+ return {
+ lat: parseFloat(data[0].lat),
+ lng: parseFloat(data[0].lon),
+ displayName: data[0].display_name
+ }
+ }
+ return null
+ } catch (e) {
+ console.warn('Geocoding failed:', e)
+ return null
+ }
+}
+
+export async function geocodeBatch(placeNames) {
+ const results = {}
+ for (const name of placeNames) {
+ const result = await geocode(name)
+ if (result) {
+ results[name] = result
+ }
+ // Small delay to respect Nominatim rate limiting (1 req/s)
+ await new Promise(r => setTimeout(r, 1100))
+ }
+ return results
+}
+
+// Known Chinese tourist destinations with coordinates (fallback cache)
+const KNOWN_PLACES = {
+ '昆明': { lat: 25.04, lng: 102.71 },
+ '大理': { lat: 25.69, lng: 100.26 },
+ '丽江': { lat: 26.87, lng: 100.23 },
+ '香格里拉': { lat: 27.83, lng: 99.70 },
+ '普者黑': { lat: 24.12, lng: 104.12 },
+ '坝美': { lat: 24.08, lng: 104.65 },
+ '西双版纳': { lat: 22.00, lng: 100.80 },
+ '腾冲': { lat: 25.02, lng: 98.50 },
+ '建水': { lat: 23.62, lng: 102.82 },
+ '元阳': { lat: 23.22, lng: 102.83 },
+ '抚仙湖': { lat: 24.55, lng: 102.93 },
+ '弥勒': { lat: 24.41, lng: 103.41 },
+ '沙溪': { lat: 26.32, lng: 99.85 },
+ '泸沽湖': { lat: 27.72, lng: 100.82 },
+ '成都': { lat: 30.57, lng: 104.07 },
+ '重庆': { lat: 29.56, lng: 106.55 },
+ '贵阳': { lat: 26.65, lng: 106.63 },
+ '桂林': { lat: 25.27, lng: 110.29 },
+ '阳朔': { lat: 24.78, lng: 110.49 },
+ '杭州': { lat: 30.25, lng: 120.16 },
+ '乌镇': { lat: 30.75, lng: 120.48 },
+ '苏州': { lat: 31.30, lng: 120.58 },
+ '北京': { lat: 39.90, lng: 116.40 },
+ '上海': { lat: 31.23, lng: 121.47 },
+ '西安': { lat: 34.34, lng: 108.94 },
+ '拉萨': { lat: 29.65, lng: 91.14 },
+ '张家界': { lat: 29.12, lng: 110.48 },
+ '九寨沟': { lat: 33.26, lng: 103.92 },
+ '厦门': { lat: 24.48, lng: 118.09 },
+ '青岛': { lat: 36.07, lng: 120.38 },
+ '巍山': { lat: 25.23, lng: 100.30 },
+ '蒙自': { lat: 23.37, lng: 103.38 },
+ '丘北': { lat: 24.05, lng: 104.18 },
+}
+
+export function getKnownPlace(name) {
+ return KNOWN_PLACES[name] || null
+}
diff --git a/src/stores/itinerary.js b/src/stores/itinerary.js
index 785bc7c..5c53a61 100644
--- a/src/stores/itinerary.js
+++ b/src/stores/itinerary.js
@@ -4,7 +4,7 @@ import { sampleItinerary, replacementPool } from '../data/sampleData'
import { getMultiRoute, detectDetour } from '../services/routeService'
export const useItineraryStore = defineStore('itinerary', () => {
- const phase = ref('workbench')
+ const phase = ref('chat')
const mode = ref('preview')
const points = ref(JSON.parse(JSON.stringify(sampleItinerary.points)))
const currentStep = ref(0)
@@ -176,6 +176,43 @@ export const useItineraryStore = defineStore('itinerary', () => {
hoveredReplacement.value = opt
}
+ function loadFromAI(scheme) {
+ const icons = ['🏙️', '🌿', '🏘️', '🏔️', '🏯', '💧', '🌾', '⛰️', '🏖️', '🛕', '🌸', '🏝️', '✈️']
+ const points = scheme.points.map((p, i) => ({
+ id: 'p_' + Date.now() + '_' + i,
+ name: p.name,
+ lat: p.lat,
+ lng: p.lng,
+ day: p.day || `Day ${i}`,
+ badge: p.badge || (i === 0 ? 'START' : (i === scheme.points.length - 1 ? 'END' : `D${i}`)),
+ km: p.km || (i === 0 ? '0km' : `${Math.round(Math.random() * 300 + 50)}km`),
+ driveTime: p.driveTime || (i === 0 ? '—' : `${Math.round(Math.random() * 5 + 1)}h`),
+ desc: p.desc || '',
+ icon: p.icon || icons[i % icons.length],
+ images: p.images || [
+ `https://picsum.photos/400/300?random=${Date.now() + i * 3}`,
+ `https://picsum.photos/400/300?random=${Date.now() + i * 3 + 1}`
+ ],
+ heroImage: p.heroImage || `https://picsum.photos/800/400?random=${Date.now() + i * 3 + 2}`,
+ schedule: p.schedule || [
+ { time: '上午', content: '抵达目的地，开始探索' },
+ { time: '下午', content: '游览主要景点' },
+ { time: '晚上', content: '品尝当地美食' }
+ ],
+ foods: p.foods || ['当地特色美食'],
+ hotel: p.hotel || '推荐酒店',
+ tips: p.tips || '注意安全，提前预订'
+ }))
+
+ points.value = points
+ currentStep.value = 0
+ routeSegments.value = []
+ showOptimizationAlert.value = false
+ showReplacementPanel.value = false
+ selectedForReplace.value = null
+ hoveredReplacement.value = null
+ }
+
return {
phase, mode, points, currentStep, selectedForReplace, showReplacementPanel,
showOptimizationAlert, optimizationMessage, isFetchingRoutes, routeSegments, detourWarnings,
@@ -183,7 +220,7 @@ export const useItineraryStore = defineStore('itinerary', () => {
setPhase, setMode, setCurrentStep, nextStep, prevStep,
deletePoint, insertPoint, replacePoint, reorderPoints, resetToSample,
fetchRealRoutes, checkRouteOptimization, autoOptimizeRoute, dismissOptimization,
- setHoveredReplacement
+ setHoveredReplacement, loadFromAI
}
})
diff --git a/src/stores/settings.js b/src/stores/settings.js
index 6a88d52..ce27a4b 100644
--- a/src/stores/settings.js
+++ b/src/stores/settings.js
@@ -1,60 +1,67 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
-const STORAGE_KEY = 'trip_planner_ai_config'
-
-const DEFAULT_CONFIG = {
- provider: 'aliyun',
- apiKey: '',
- model: 'qwen-plus',
- baseUrl: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
- temperature: 0.7,
- maxTokens: 2000
-}
-
-const ALIYUN_MODELS = [
- { value: 'qwen-turbo', label: 'Qwen-Turbo（快速）', desc: '速度快，成本低，适合简单对话' },
- { value: 'qwen-plus', label: 'Qwen-Plus（均衡）', desc: '速度与质量平衡，推荐使用' },
- { value: 'qwen-max', label: 'Qwen-Max（高质量）', desc: '复杂推理，质量最高' },
- { value: 'qwen-max-latest', label: 'Qwen-Max-Latest', desc: '最新版本，能力最强' },
- { value: 'qwen-long', label: 'Qwen-Long（长文本）', desc: '支持超长上下文（100万token）' }
-]
-
export const useSettingsStore = defineStore('settings', () => {
- const config = ref(loadConfig())
+ const config = ref({
+ provider: 'aliyun',
+ apiKey: '',
+ model: 'qwen3.6-plus',
+ baseUrl: 'https://coding.dashscope.aliyuncs.com/v1',
+ temperature: 0.7,
+ maxTokens: 8000
+ })
const isConfigured = computed(() => !!config.value.apiKey)
const isTesting = ref(false)
const testResult = ref(null)
- const showConfigPage = ref(false)
-
- function loadConfig() {
+
+ const ALIYUN_MODELS = [
+ { value: 'qwen-turbo', label: 'Qwen-Turbo（快速）', desc: '速度快，成本低，适合简单对话' },
+ { value: 'qwen-plus', label: 'Qwen-Plus（均衡）', desc: '速度与质量平衡，推荐使用' },
+ { value: 'qwen-max', label: 'Qwen-Max（高质量）', desc: '复杂推理，质量最高' },
+ { value: 'qwen-max-latest', label: 'Qwen-Max-Latest', desc: '最新版本，能力最强' },
+ { value: 'qwen-long', label: 'Qwen-Long（长文本）', desc: '支持超长上下文（100万token）' }
+ ]
+
+ // Load config from server
+ async function loadConfig() {
try {
- const saved = localStorage.getItem(STORAGE_KEY)
- if (saved) return { ...DEFAULT_CONFIG, ...JSON.parse(saved) }
+ const response = await fetch('/api/config')
+ const data = await response.json()
+ config.value = { ...config.value, ...data }
} catch (e) {
- console.warn('Failed to load config:', e)
+ console.warn('Failed to load config from server:', e)
}
- return { ...DEFAULT_CONFIG }
}
-
- function saveConfig() {
+
+ function updateConfig(updates) {
+ config.value = { ...config.value, ...updates }
+ saveConfig()
+ }
+
+ async function saveConfig() {
try {
- localStorage.setItem(STORAGE_KEY, JSON.stringify(config.value))
+ await fetch('/api/config', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(config.value)
+ })
} catch (e) {
console.warn('Failed to save config:', e)
}
}
-
- function updateConfig(updates) {
- config.value = { ...config.value, ...updates }
- saveConfig()
- }
-
+
function resetConfig() {
- config.value = { ...DEFAULT_CONFIG, apiKey: '' }
+ config.value = {
+ provider: 'aliyun',
+ apiKey: '',
+ model: 'qwen3.6-plus',
+ baseUrl: 'https://coding.dashscope.aliyuncs.com/v1',
+ temperature: 0.7,
+ maxTokens: 8000
+ }
saveConfig()
}
-
+
async function testConnection() {
isTesting.value = true
testResult.value = null
@@ -64,31 +71,26 @@ export const useSettingsStore = defineStore('settings', () => {
isTesting.value = false
return false
}
-
+
try {
- const response = await fetch(`${config.value.baseUrl}/chat/completions`, {
+ const response = await fetch('/api/config/test', {
method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- 'Authorization': `Bearer ${config.value.apiKey}`
- },
+ headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
+ apiKey: config.value.apiKey,
model: config.value.model,
- messages: [{ role: 'user', content: '你好，请回复OK' }],
- max_tokens: 10
+ baseUrl: config.value.baseUrl
})
})
-
+
const data = await response.json()
+ testResult.value = data
- if (response.ok && data.choices) {
- testResult.value = { success: true, message: `连接成功！模型: ${data.model || config.value.model}` }
+ if (data.success) {
saveConfig()
- return true
- } else {
- testResult.value = { success: false, message: data.error?.message || '连接失败' }
- return false
}
+
+ return data.success
} catch (error) {
testResult.value = { success: false, message: `网络错误: ${error.message}` }
return false
@@ -96,9 +98,9 @@ export const useSettingsStore = defineStore('settings', () => {
isTesting.value = false
}
}
-
+
return {
- config, isConfigured, isTesting, testResult, showConfigPage, ALIYUN_MODELS,
- updateConfig, resetConfig, testConnection
+ config, isConfigured, isTesting, testResult, ALIYUN_MODELS,
+ loadConfig, updateConfig, saveConfig, resetConfig, testConnection
}
})
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index 6880a57..4035eb9 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -62,6 +62,17 @@
{{ model.desc }}