alpha
/
trip-planner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复分享页面的问题

Browse Source
refactor
Lxy 6 days ago
parent 9f24d1fb94
commit 47e4236392
2 changed files with 192 additions and 237 deletions
Show Stats Download Patch File Download Diff File

BIN
.data/trip-planner.db-wal
View File

Binary file not shown.

429
src/views/SharedPlanView.vue
Unescape View File

@ -1,93 +1,80 @@
<template> <template>
<div class="shared-plan-view"> <div class="shared-plan-view">
<!-- Top Navigation Bar --> <!-- Top bar (same as workbench) -->
<nav class="top-bar"> <div class="wb-top">
<div class="brand"><span class="icon"></span> 智能行程规划</div> <div class="wb-plan-selector">
<div class="top-bar-right"> <span class="shared-badge">👁️ 只读模式 · {{ sharedData?.planName || '行程' }}</span>
<span class="shared-badge">👁️ 只读模式</span> </div>
<button class="home-btn" @click="$router.push('/')">返回首页</button> <button class="wb-copy-btn" @click="copyShareLink">📋 复制链接</button>
</div> </div>
</nav>
<!-- Loading State --> <!-- Loading -->
<div v-if="loading" class="loading-container"> <div v-if="loading" class="loading-container">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
<p>加载分享行程中...</p> <p>加载分享行程中...</p>
</div> </div>
<!-- Error State --> <!-- Error -->
<div v-else-if="error" class="error-container"> <div v-else-if="error" class="error-container">
<div class="error-icon">❌</div> <div class="error-icon">❌</div>
<h2>分享链接无效</h2> <h2>分享链接无效</h2>
<p>{{ error }}</p> <p>{{ error }}</p>
<button class="btn-primary" @click="$router.push('/')">返回首页</button>
</div>
<!-- Shared Workbench -->
<div v-else-if="sharedData" class="shared-workbench">
<!-- Share Info Banner -->
<div class="share-banner">
<div class="share-info">
<span class="share-icon">🔗</span>
<div>
<div class="share-title">{{ sharedData.planName }}</div>
<div class="share-meta">
<span>分享者：{{ sharedData.creator || '匿名用户' }}</span>
<span>·</span>
<span>{{ formatDate(sharedData.createdAt) }}</span>
<span>·</span>
<span>{{ sharedData.views }} 次查看</span>
</div>
</div>
</div>
<button class="btn-copy" @click="copyShareLink">📋 复制链接</button>
</div> </div>
<!-- Workbench Content (Read-only) --> <!-- Workbench (read-only) -->
<div v-else-if="sharedData" class="workbench">
<div class="wb-wrap"> <div class="wb-wrap">
<!-- Left: Timeline --> <!-- Left: Timeline -->
<div class="wb-left"> <div class="wb-left">
<div class="wl-title">📋 行程时间线</div> <div class="wl-title">📋 行程时间线</div>
<div <div
v-for="(point, idx) in sharedData.data.points" v-for="(point, idx) in store.points"
:key="point.id || idx" :key="point.id"
:class="['wl-item', { active: idx === currentStep }]" :class="['wl-item', { active: idx === store.currentStep }]"
@click="currentStep = idx" @click="goToStep(idx)"
> >
<div class="wl-dot"></div> <div class="wl-dot"></div>
<div> <div>
<div class="wl-name">{{ point.icon || '📍' }} {{ point.name }}</div> <div class="wl-name">{{ point.icon }} {{ point.name }}</div>
<div class="wl-day">{{ point.day || `Day ${idx + 1}` }} · {{ point.km || '—' }}</div> <div class="wl-day">{{ point.day }} · {{ point.km }}</div>
</div> </div>
</div> </div>
<div class="wl-nav"> <div class="wl-nav">
<button class="prev" :disabled="currentStep <= 0" @click="currentStep--">← 上一站</button> <button class="prev" :disabled="store.currentStep <= 0" @click="goToStep(store.currentStep - 1)">← 上一站</button>
<button class="next" :disabled="currentStep >= sharedData.data.points.length - 1" @click="currentStep++">下一站 →</button> <button class="next" :disabled="store.currentStep >= store.points.length - 1" @click="goToStep(store.currentStep + 1)">下一站 →</button>
</div> </div>
</div> </div>
<!-- Middle: Detail Panel --> <!-- Middle: Detail -->
<div class="wb-mid"> <div class="wb-mid">
<template v-if="currentPoint"> <template v-if="point">
<div class="wm-hero" v-if="currentPoint.heroImage || currentPoint.images?.[0]"> <div class="wm-hero" v-if="point.heroImage">
<img :src="currentPoint.heroImage || currentPoint.images[0]" :alt="currentPoint.name" @error="handleImageError" /> <img :src="point.heroImage" :alt="point.name" @error="handleImageError" />
<div class="wm-ov"> <div class="wm-ov">
<div class="wm-title">{{ currentPoint.name }}</div> <h3>{{ point.icon }} {{ point.name }}</h3>
<div class="wm-sub">{{ currentPoint.day || `Day ${currentStep + 1}` }}</div> <p>{{ point.desc }}</p>
</div> </div>
</div> </div>
<div class="wm-stats"> <div v-if="point.gallery && point.gallery.length > 0" class="wm-gallery">
<div class="wm-stat"><div class="ws-val">{{ currentPoint.km || '—' }}</div><div class="ws-lbl">行驶里程</div></div> <h4>📸 风景照片</h4>
<div class="wm-stat"><div class="ws-val">{{ currentPoint.driveTime || '—' }}</div><div class="ws-lbl">驾驶时间</div></div> <div class="gallery-grid">
<div class="wm-stat"><div class="ws-val">{{ currentPoint.day || `Day ${currentStep + 1}` }}</div><div class="ws-lbl">第几天</div></div> <div v-for="(img, i) in point.gallery" :key="i" class="gallery-item">
<img :src="img.url" :alt="img.title" @error="handleGalleryImageError" />
<div class="gallery-caption">{{ img.title }}</div>
</div>
</div>
</div> </div>
<div v-if="currentPoint.desc" class="wm-sec"><p class="wm-desc">{{ currentPoint.desc }}</p></div> <div class="wm-stats">
<div class="wm-stat"><div class="ws-val">{{ point.km || '—' }}</div><div class="ws-lbl">行驶里程</div></div>
<div class="wm-stat"><div class="ws-val">{{ point.driveTime || '—' }}</div><div class="ws-lbl">驾驶时间</div></div>
<div class="wm-stat"><div class="ws-val">{{ point.day }}</div><div class="ws-lbl">第几天</div></div>
</div>
<div v-if="currentPoint.schedule?.length" class="wm-sec"> <div v-if="point.schedule?.length" class="wm-sec">
<h4>📅 行程安排</h4> <h4>📅 行程安排</h4>
<div v-for="(s, i) in currentPoint.schedule" :key="i" class="wm-si"> <div v-for="(s, i) in point.schedule" :key="i" class="wm-si">
<span class="si-time">{{ s.time }}</span> <span class="si-time">{{ s.time }}</span>
<div class="si-content"> <div class="si-content">
<div class="si-title">{{ s.title || s.content }}</div> <div class="si-title">{{ s.title || s.content }}</div>
@ -96,11 +83,11 @@
</div> </div>
</div> </div>
<div v-if="currentPoint.foods?.length" class="wm-sec"> <div v-if="point.foods?.length" class="wm-sec">
<h4>🍽️ 美食推荐</h4> <h4>🍽️ 美食推荐</h4>
<div class="foods-grid"> <div class="foods-grid">
<div v-for="(f, i) in currentPoint.foods" :key="i" class="food-item"> <div v-for="(f, i) in point.foods" :key="i" class="food-item">
<div class="food-icon">{{ f.icon || '🍜' }}</div> <div class="food-icon">{{ f.icon }}</div>
<div class="food-info"> <div class="food-info">
<div class="food-name">{{ f.name }}</div> <div class="food-name">{{ f.name }}</div>
<div v-if="f.desc" class="food-desc">{{ f.desc }}</div> <div v-if="f.desc" class="food-desc">{{ f.desc }}</div>
@ -109,11 +96,11 @@
</div> </div>
</div> </div>
<div v-if="currentPoint.waypoints?.length" class="wm-sec"> <div v-if="point.waypoints?.length" class="wm-sec">
<h4>🗺️ 途径推荐</h4> <h4>🗺️ 途径推荐</h4>
<div class="waypoint-list"> <div class="waypoint-list">
<div v-for="(wp, i) in currentPoint.waypoints" :key="i" class="waypoint-item"> <div v-for="(wp, i) in point.waypoints" :key="i" class="waypoint-item">
<div class="wp-icon">{{ wp.icon || '📍' }}</div> <div class="wp-icon">{{ wp.icon }}</div>
<div class="wp-info"> <div class="wp-info">
<div class="wp-name">{{ wp.name }}</div> <div class="wp-name">{{ wp.name }}</div>
<div v-if="wp.desc" class="wp-desc">{{ wp.desc }}</div> <div v-if="wp.desc" class="wp-desc">{{ wp.desc }}</div>
@ -122,21 +109,20 @@
</div> </div>
</div> </div>
<div v-if="currentPoint.hotel" class="wm-sec"> <div class="wm-sec" v-if="point.hotel">
<h4>🏨 住宿推荐</h4> <h4>🏨 住宿推荐</h4>
<div class="hotel-info">{{ currentPoint.hotel }}</div> <div class="hotel-info">{{ point.hotel }}</div>
</div> </div>
<div class="wm-sec" v-if="point.tips">
<div v-if="currentPoint.tips" class="wm-sec">
<h4>💡 注意事项</h4> <h4>💡 注意事项</h4>
<div class="wm-tips">{{ currentPoint.tips }}</div> <div class="wm-tips">{{ point.tips }}</div>
</div> </div>
</template> </template>
</div> </div>
<!-- Right: Map --> <!-- Right: Map -->
<div class="wb-right"> <div class="wb-right">
<MapView ref="mapRef" /> <MapView ref="mapView" />
</div> </div>
</div> </div>
</div> </div>
@ -144,24 +130,20 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import MapView from '../components/MapView.vue' import MapView from '../components/MapView.vue'
import { useItineraryStore } from '../stores/itinerary' import { useItineraryStore } from '../stores/itinerary'
const route = useRoute() const route = useRoute()
const store = useItineraryStore() const store = useItineraryStore()
const mapRef = ref(null) const mapView = ref(null)
const loading = ref(true) const loading = ref(true)
const error = ref(null) const error = ref(null)
const sharedData = ref(null) const sharedData = ref(null)
const currentStep = ref(0)
const currentPoint = computed(() => { const point = computed(() => store.currentPoint)
if (!sharedData.value?.data?.points) return null
return sharedData.value.data.points[currentStep.value] || null
})
onMounted(async () => { onMounted(async () => {
const shareCode = route.params.shareCode const shareCode = route.params.shareCode
@ -182,7 +164,6 @@ onMounted(async () => {
sharedData.value = data sharedData.value = data
// 加载行程数据到 store（只读模式）
if (data.data?.points) { if (data.data?.points) {
store.loadFromAI(data.data) store.loadFromAI(data.data)
store.setPhase('workbench') store.setPhase('workbench')
@ -196,22 +177,37 @@ onMounted(async () => {
}) })
function handleImageError(e) { function handleImageError(e) {
e.target.src = 'https://picsum.photos/800/400?random=fallback' e.target.parentElement.style.background = 'linear-gradient(135deg, #6c5ce7, #a29bfe)'
e.target.style.display = 'none'
} }
function formatDate(dateStr) { function handleGalleryImageError(e) {
const date = new Date(dateStr) e.target.parentElement.style.display = 'none'
return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
} }
function copyShareLink() { function copyShareLink() {
const url = window.location.href navigator.clipboard.writeText(window.location.href).then(() => {
navigator.clipboard.writeText(url).then(() => { alert('链接已复制')
alert('分享链接已复制到剪贴板')
}).catch(() => { }).catch(() => {
alert('复制失败，请手动复制链接') alert('复制失败')
}) })
} }
// 点击时间线/导航时，地图联动
function goToStep(idx) {
store.setCurrentStep(idx)
}
// 监听 currentStep 变化，通知地图
watch(() => store.currentStep, (newIdx, oldIdx) => {
if (mapView.value && oldIdx !== undefined) {
mapView.value.updateMarkers()
const center = store.points[newIdx]
if (center?.lat && center?.lng) {
mapView.value.flyTo(center.lat, center.lng, 10)
}
}
})
</script> </script>
<style scoped> <style scoped>
@ -220,58 +216,50 @@ function copyShareLink() {
background: #f5f7fa; background: #f5f7fa;
} }
.top-bar { /* Top bar - same as workbench */
.wb-top {
height: 60px; height: 60px;
background: #fff; background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 24px; padding: 0 16px;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 1000; z-index: 100;
} }
.brand { .wb-plan-selector {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
font-size: 17px;
font-weight: 700;
color: #2d3436;
}
.top-bar-right {
display: flex;
align-items: center;
gap: 12px;
} }
.shared-badge { .shared-badge {
background: #ffe0e0; background: #f0e6ff;
color: #d63031; color: #6c5ce7;
padding: 6px 12px; padding: 6px 16px;
border-radius: 20px; border-radius: 8px;
font-size: 12px; font-size: 13px;
font-weight: 600; font-weight: 600;
} }
.home-btn { .wb-copy-btn {
padding: 8px 16px; padding: 8px 16px;
border-radius: 6px; border-radius: 8px;
font-size: 13px; font-size: 13px;
font-weight: 600;
cursor: pointer; cursor: pointer;
border: 1.5px solid #6c5ce7; border: 2px solid #6c5ce7;
background: #fff; background: #fff;
color: #6c5ce7; color: #6c5ce7;
transition: all 0.2s; transition: all 0.2s;
font-weight: 500;
} }
.home-btn:hover { .wb-copy-btn:hover {
background: #6c5ce7; background: #6c5ce7;
color: #fff; color: #fff;
} }
@ -316,95 +304,29 @@ function copyShareLink() {
.error-container p { .error-container p {
color: #636e72; color: #636e72;
margin-bottom: 24px;
}
.btn-primary {
background: #6c5ce7;
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: opacity 0.2s;
}
.btn-primary:hover {
opacity: 0.9;
}
/* Share Banner */
.share-banner {
background: linear-gradient(135deg, #e8e4ff, #d4c8ff);
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 60px;
} }
.share-info { /* Workbench - exact same styles */
display: flex; .workbench {
align-items: center;
gap: 12px;
}
.share-icon {
font-size: 24px;
}
.share-title {
font-size: 16px;
font-weight: 700;
color: #2d3436;
}
.share-meta {
font-size: 12px;
color: #636e72;
display: flex;
gap: 6px;
margin-top: 2px;
}
.btn-copy {
background: #fff;
border: 2px solid #6c5ce7;
color: #6c5ce7;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-copy:hover {
background: #6c5ce7;
color: #fff;
}
/* Workbench */
.shared-workbench {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - 60px); height: 100vh;
} }
.wb-wrap { .wb-wrap {
flex: 1; display: grid;
display: flex; grid-template-columns: 220px 300px 1fr;
overflow: hidden; gap: 14px;
height: calc(100vh - 74px);
padding: 74px 16px 16px;
} }
/* Left Timeline */ /* Left sidebar */
.wb-left { .wb-left {
width: 220px; background: #2d3436;
background: #1b4332; border-radius: 12px;
color: #fff; color: #dfe6e9;
padding: 16px; padding: 14px;
overflow-y: auto; overflow-y: auto;
flex-shrink: 0; flex-shrink: 0;
} }
@ -412,60 +334,62 @@ function copyShareLink() {
.wl-title { .wl-title {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
margin-bottom: 16px; margin-bottom: 14px;
padding-bottom: 12px; padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} }
.wl-item { .wl-item {
display: flex; display: flex;
gap: 10px; gap: 10px;
padding: 10px 8px; padding: 10px;
border-radius: 6px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
margin-bottom: 4px; margin-bottom: 6px;
} }
.wl-item:hover { .wl-item:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08);
} }
.wl-item.active { .wl-item.active {
background: rgba(255, 255, 255, 0.2); background: rgba(108, 92, 231, 0.25);
box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.5);
} }
.wl-dot { .wl-dot {
width: 10px; width: 8px;
height: 10px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: #40916c; background: #6c5ce7;
margin-top: 4px; margin-top: 5px;
flex-shrink: 0; flex-shrink: 0;
} }
.wl-item.active .wl-dot { .wl-item.active .wl-dot {
background: #95d5b2; background: #a29bfe;
box-shadow: 0 0 0 3px rgba(149, 213, 178, 0.3); box-shadow: 0 0 0 3px rgba(162, 155, 254, 0.3);
} }
.wl-name { .wl-name {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #dfe6e9;
} }
.wl-day { .wl-day {
font-size: 11px; font-size: 11px;
color: #95d5b2; color: #b2bec3;
margin-top: 2px; margin-top: 2px;
} }
.wl-nav { .wl-nav {
display: flex; display: flex;
gap: 8px; gap: 6px;
margin-top: 16px; margin-top: 12px;
padding-top: 12px; padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1);
} }
.wl-nav button { .wl-nav button {
@ -473,34 +397,35 @@ function copyShareLink() {
padding: 8px; padding: 8px;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background: rgba(255, 255, 255, 0.15); background: rgba(108, 92, 231, 0.3);
color: #fff; color: #dfe6e9;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
} }
.wl-nav button:hover:not(:disabled) { .wl-nav button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.25); background: rgba(108, 92, 231, 0.5);
} }
.wl-nav button:disabled { .wl-nav button:disabled {
opacity: 0.4; opacity: 0.3;
cursor: not-allowed; cursor: not-allowed;
} }
/* Middle Detail */ /* Middle detail */
.wb-mid { .wb-mid {
width: 340px;
background: #fff; background: #fff;
border-radius: 12px;
overflow-y: auto; overflow-y: auto;
flex-shrink: 0; flex-shrink: 0;
} }
.wm-hero { .wm-hero {
position: relative; position: relative;
height: 180px; height: 140px;
overflow: hidden; overflow: hidden;
border-radius: 12px 12px 0 0;
} }
.wm-hero img { .wm-hero img {
@ -514,26 +439,66 @@ function copyShareLink() {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
padding: 16px; padding: 12px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
color: #fff; color: #fff;
} }
.wm-title { .wm-ov h3 {
font-size: 18px; margin: 0;
font-weight: 700; font-size: 16px;
} }
.wm-sub { .wm-ov p {
font-size: 12px; margin: 4px 0 0;
font-size: 11px;
opacity: 0.9; opacity: 0.9;
margin-top: 2px; }
.wm-gallery {
padding: 12px;
border-bottom: 1px solid #f0f0f0;
}
.wm-gallery h4 {
font-size: 13px;
margin: 0 0 8px;
}
.gallery-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.gallery-item {
position: relative;
border-radius: 6px;
overflow: hidden;
aspect-ratio: 4/3;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 4px 6px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 10px;
} }
.wm-stats { .wm-stats {
display: flex; display: flex;
padding: 16px; padding: 12px;
gap: 12px; gap: 8px;
background: #f8f9ff; background: #f8f9ff;
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;
} }
@ -556,21 +521,14 @@ function copyShareLink() {
} }
.wm-sec { .wm-sec {
padding: 16px; padding: 14px;
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;
} }
.wm-sec h4 { .wm-sec h4 {
font-size: 14px; font-size: 14px;
font-weight: 700; margin: 0 0 10px;
color: #2d3436; color: #2d3436;
margin-bottom: 12px;
}
.wm-desc {
font-size: 13px;
color: #636e72;
line-height: 1.6;
} }
.wm-si { .wm-si {
@ -585,13 +543,11 @@ function copyShareLink() {
color: #6c5ce7; color: #6c5ce7;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
min-width: 40px;
} }
.si-title { .si-title {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #2d3436;
} }
.si-desc { .si-desc {
@ -603,12 +559,12 @@ function copyShareLink() {
.foods-grid { .foods-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 10px; gap: 8px;
} }
.food-item { .food-item {
background: #f8f9ff; background: #f8f9ff;
padding: 10px; padding: 8px;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
gap: 8px; gap: 8px;
@ -621,7 +577,6 @@ function copyShareLink() {
.food-name { .food-name {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: #2d3436;
} }
.food-desc { .food-desc {
@ -651,7 +606,6 @@ function copyShareLink() {
.wp-name { .wp-name {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #2d3436;
} }
.wp-desc { .wp-desc {
@ -671,14 +625,15 @@ function copyShareLink() {
color: #636e72; color: #636e72;
line-height: 1.6; line-height: 1.6;
background: #fff8e1; background: #fff8e1;
padding: 12px; padding: 10px;
border-radius: 8px; border-radius: 8px;
border-left: 3px solid #f4a261; border-left: 3px solid #f4a261;
} }
/* Right Map */ /* Right map */
.wb-right { .wb-right {
flex: 1; border-radius: 12px;
overflow: hidden;
position: relative; position: relative;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save