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

Write Preview
Loading…
Cancel
Save