From 47e4236392b97f59f13784485d7a7665dffed21d Mon Sep 17 00:00:00 2001
From: Lxy <windsdreaming@163.com>
Date: Mon, 8 Jun 2026 00:22:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=86=E4=BA=AB?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .data/trip-planner.db-wal    | Bin 4128272 -> 4128272 bytes
 src/views/SharedPlanView.vue | 429 ++++++++++++++++-------------------
 2 files changed, 192 insertions(+), 237 deletions(-)

diff --git a/.data/trip-planner.db-wal b/.data/trip-planner.db-wal
index e5184c06057bc1ca6d7f6f53a9a95c46ede5ed91..7ac90c29ca18064a18413965ccc12325dc843fee 100644
GIT binary patch
delta 355
zcmZw7Jxc;{0KnlpPrb{|x5_Lv-_EjEUn<SC#3}j$*3b}rkU-=QH>PtRqvQq=S{>X2
zw;-HCbgTw{kc-gpY)|X=M{c1ZWMLDEunUK9zN*7vASOxDRo-^ju3vw|pC9_Y&dbff
zdh4p1F59idt@^Dj9;G(A_dmUl=g0Bi`Rtg}NaL|NKhD2n8oGuhxUdWzZg}8@4}Pp*
z6>A7!9YJhh6Cs2V!4{&3A&vx+Fp$DFc96y{_OOow9O4KWWRXK2$2h?$3Mk?XC7h#-
N3NCPI8G7|=G6RLkV8H+Y

delta 331
zcmYkxJ4-@w0ETfdrN=zSb2P2&Vx?vmEsxqwQ&*w2MbN#)4-kal@DD{W&gS6Wnu2)t
zCc%&3kW0|oY*3GzFZ`DGF@EP(0}WvnHenYlVpTYX&gnGZwy>0~Vm$U+<>&e9dwZ7b
zn2o&jrv_D$w%o_1uaES@{lNULW$aqFSCtg0{FG4MhT+dqeQ`}*JW5lSCAhE#H)Je+
z4^(LI!iRPE5x@pEv4tSEv4dUgA%uM#;1FR%5XBK<IK~N1afUb&IL8H&(2+tK8C>ED
U*SNtgvdG~Mc@#`tF3x`b0lG$8j{pDw

diff --git a/src/views/SharedPlanView.vue b/src/views/SharedPlanView.vue
index da7f38c..da8d382 100644
--- a/src/views/SharedPlanView.vue
+++ b/src/views/SharedPlanView.vue
@@ -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>
-    </nav>
+      <button class="wb-copy-btn" @click="copyShareLink">📋 复制链接</button>
+    </div>
 
-    <!-- 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>