调整室外导览面板视觉规范

src/components/navigation/OutdoorNavigationPanel.vue

@@ -14,7 +14,7 @@
 
     <view v-if="isCollapsed" class="panel-collapsed" @tap="expandPanel">
       <view class="panel-collapsed-copy">
-        <text class="panel-title">室外导航</text>
+        <text class="panel-title">室外导览</text>
         <text class="panel-summary">{{ collapsedSummary }}</text>
       </view>
       <view class="panel-expand">
@@ -25,7 +25,7 @@
     <template v-else>
       <view class="panel-header">
         <view class="panel-title-group">
-          <text class="panel-title">室外导航</text>
+          <text class="panel-title">室外导览</text>
           <text v-if="routeSummary" class="panel-summary">{{ routeSummary }}</text>
         </view>
         <view class="panel-actions">
@@ -46,7 +46,9 @@
             :class="{ active: effectiveStartMode === 'gps' }"
             @tap="handleGpsStart"
           >
-            <text class="start-btn-icon">📍</text>
+            <view class="start-btn-icon icon-gps">
+              <view class="icon-gps-dot"></view>
+            </view>
             <text class="start-btn-text">GPS定位</text>
           </view>
           <view
@@ -54,7 +56,9 @@
             :class="{ active: effectiveStartMode === 'manual' }"
             @tap="handleManualStart"
           >
-            <text class="start-btn-icon">✏️</text>
+            <view class="start-btn-icon icon-manual">
+              <view class="icon-manual-line"></view>
+            </view>
             <text class="start-btn-text">手动选择</text>
           </view>
         </view>
@@ -102,10 +106,10 @@
             v-for="mode in travelModes"
             :key="mode.type"
             class="travel-mode-item"
-            :class="{ active: selectedTravelMode === mode.type }"
+            :class="[{ active: selectedTravelMode === mode.type }, `mode-${mode.type}`]"
             @tap="handleTravelModeChange(mode.type)"
           >
-            <text class="travel-mode-icon">{{ mode.icon }}</text>
+            <view class="travel-mode-icon"></view>
             <text class="travel-mode-label">{{ mode.label }}</text>
           </view>
         </view>
@@ -240,7 +244,7 @@ const collapsedSummary = computed(() => {
   if (effectiveStartMode.value === 'gps') {
     return '使用 GPS 定位'
   }
-  return '室外导航到博物馆'
+  return '室外导览到馆'
 })
 
 const formatStartPointName = () => {
@@ -405,29 +409,29 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
 <style scoped lang="scss">
 .outdoor-nav-panel {
   position: absolute;
-  left: 12px;
-  right: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 30px);
-  padding: 10px 14px 14px;
+  left: 15px;
+  right: 15px;
+  bottom: calc(env(safe-area-inset-bottom) + 24px);
+  padding: 12px 15px 15px;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.97);
-  border: 1px solid #e5e6de;
-  border-radius: 8px;
-  box-shadow: 0 10px 24px rgba(36, 49, 42, 0.12);
+  background: var(--museum-bg-surface);
+  border: 1px solid #d9d9d9;
+  border-radius: var(--radius-card);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   z-index: 1003;
 }
 
 .outdoor-nav-panel.collapsed {
-  padding: 8px 10px 10px;
+  padding: 10px 12px 12px;
 }
 
 .panel-handle {
   width: 38px;
   height: 4px;
-  margin: 0 auto 10px;
-  background: #d8dbd2;
+  margin: 0 auto 12px;
+  background: #d9d9d9;
   border-radius: 999px;
 }
 
@@ -449,12 +453,12 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
 .panel-expand {
   flex: 0 0 auto;
   height: 30px;
-  padding: 0 10px;
+  padding: 0 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #151713;
-  border-radius: 8px;
+  background: #000000;
+  border-radius: var(--radius-button);
 }
 
 .panel-expand-text {
@@ -479,16 +483,16 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
 }
 
 .panel-title {
-  font-size: 17px;
-  line-height: 24px;
-  font-weight: 700;
-  color: #151713;
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 500;
+  color: var(--museum-text-primary);
 }
 
 .panel-summary {
   font-size: 12px;
   line-height: 18px;
-  color: #696962;
+  color: var(--museum-text-tertiary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -508,20 +512,20 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  background: #f5f7f2;
-  border: 1px solid #e4e5df;
-  border-radius: 8px;
+  background: var(--museum-bg-surface);
+  border: 1px solid #d9d9d9;
+  border-radius: var(--radius-button);
 }
 
 .panel-light-action-text {
   font-size: 12px;
   line-height: 16px;
   font-weight: 500;
-  color: #545861;
+  color: var(--museum-text-secondary);
 }
 
 .start-point-section {
-  margin-top: 14px;
+  margin-top: 16px;
 }
 
 .section-label {
@@ -532,12 +536,12 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
   font-size: 13px;
   line-height: 18px;
   font-weight: 600;
-  color: #545861;
+  color: var(--museum-text-secondary);
 }
 
 .start-point-buttons {
   display: flex;
-  gap: 8px;
+  gap: 10px;
 }
 
 .start-btn {
@@ -548,26 +552,97 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
   justify-content: center;
   gap: 6px;
   box-sizing: border-box;
-  background: #f6f7f4;
-  border: 1px solid #e5e6de;
-  border-radius: 8px;
+  background: var(--museum-bg-surface);
+  border: 1px solid #d9d9d9;
+  border-radius: var(--radius-button);
   transition: all 0.2s;
 }
 
 .start-btn.active {
-  background: #151713;
-  border-color: #151713;
+  background: #000000;
+  border-color: #000000;
 }
 
 .start-btn-icon {
-  font-size: 16px;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--museum-text-primary);
+  box-sizing: border-box;
+}
+
+.start-btn.active .start-btn-icon {
+  color: var(--museum-accent);
+}
+
+.icon-gps {
+  border: 1.8px solid currentColor;
+  border-radius: 50%;
+}
+
+.icon-gps::before,
+.icon-gps::after {
+  content: '';
+  position: absolute;
+  background: currentColor;
+}
+
+.icon-gps::before {
+  left: 8px;
+  top: -4px;
+  width: 1.8px;
+  height: 24px;
+}
+
+.icon-gps::after {
+  left: -4px;
+  top: 8px;
+  width: 24px;
+  height: 1.8px;
+}
+
+.icon-gps-dot {
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+  border-radius: 50%;
+}
+
+.icon-manual {
+  border-left: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+}
+
+.icon-manual::before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  width: 7px;
+  height: 7px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+}
+
+.icon-manual-line {
+  position: absolute;
+  left: 3px;
+  bottom: 5px;
+  width: 15px;
+  height: 2px;
+  background: currentColor;
 }
 
 .start-btn-text {
   font-size: 14px;
   line-height: 20px;
   font-weight: 500;
-  color: #151713;
+  color: var(--museum-text-primary);
 }
 
 .start-btn.active .start-btn-text {
@@ -577,15 +652,15 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
 .start-hint {
   margin-top: 8px;
   padding: 10px 12px;
-  background: #f9fafb;
-  border: 1px solid #ecede7;
-  border-radius: 6px;
+  background: var(--museum-bg-light);
+  border: 1px solid var(--museum-border-light);
+  border-radius: var(--radius-button);
 }
 
 .start-hint-text {
   font-size: 12px;
   line-height: 17px;
-  color: #8b8b84;
+  color: var(--museum-text-disabled);
 }
 
 .start-search-container {
@@ -603,9 +678,10 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
   height: 40px;
   padding: 0 12px;
   font-size: 14px;
-  background: #ffffff;
-  border: 1px solid #e4e5df;
-  border-radius: 8px;
+  color: var(--museum-text-primary);
+  background: var(--museum-bg-cream);
+  border: 1px solid #adb0b4;
+  border-radius: var(--radius-button);
   box-sizing: border-box;
 }
 
@@ -619,20 +695,20 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
 
 .loading-text {
   font-size: 12px;
-  color: #8b8b84;
+  color: var(--museum-text-disabled);
 }
 
 .start-search-results {
   margin-top: 8px;
-  background: #ffffff;
-  border: 1px solid #e4e5df;
-  border-radius: 8px;
+  background: var(--museum-bg-surface);
+  border: 1px solid #d9d9d9;
+  border-radius: var(--radius-button);
   overflow: hidden;
 }
 
 .search-result-item {
   padding: 12px;
-  border-bottom: 1px solid #f0f1ee;
+  border-bottom: 1px solid #d9d9d9;
   cursor: pointer;
 }
 
@@ -644,14 +720,14 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
   display: block;
   font-size: 14px;
   font-weight: 500;
-  color: #151713;
+  color: var(--museum-text-primary);
   margin-bottom: 4px;
 }
 
 .result-address {
   display: block;
   font-size: 12px;
-  color: #8b8b84;
+  color: var(--museum-text-disabled);
 }
 
 .start-point-display {
@@ -661,9 +737,9 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
   display: flex;
   align-items: center;
   gap: 10px;
-  background: #f6f7f4;
-  border: 1px solid #e5e6de;
-  border-radius: 8px;
+  background: var(--museum-bg-light);
+  border: 1px solid #d9d9d9;
+  border-radius: var(--radius-button);
 }
 
 .point-dot {
@@ -677,7 +753,7 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
 }
 
 .point-dot.start {
-  background: #1fbf6b;
+  background: #2c854f;
 }
 
 .point-name {
@@ -685,7 +761,7 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;
-  color: #1f2329;
+  color: var(--museum-text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -698,27 +774,27 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #ffffff;
-  border: 1px solid #d7dad3;
-  border-radius: 6px;
+  background: var(--museum-bg-surface);
+  border: 1px solid #d9d9d9;
+  border-radius: var(--radius-button);
 }
 
 .point-change-text {
   font-size: 12px;
   line-height: 16px;
   font-weight: 500;
-  color: #545861;
+  color: var(--museum-text-secondary);
 }
 
 .travel-mode-section {
-  margin-top: 14px;
+  margin-top: 16px;
 }
 
 .travel-mode-list {
   margin-top: 8px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 8px;
+  gap: 10px;
 }
 
 .travel-mode-item {
@@ -729,26 +805,97 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
   justify-content: center;
   gap: 4px;
   box-sizing: border-box;
-  background: #f6f7f4;
-  border: 1px solid #e5e6de;
-  border-radius: 8px;
+  background: var(--museum-bg-surface);
+  border: 1px solid #d9d9d9;
+  border-radius: var(--radius-button);
   transition: all 0.2s;
 }
 
 .travel-mode-item.active {
-  background: #151713;
-  border-color: #151713;
+  background: #000000;
+  border-color: #000000;
 }
 
 .travel-mode-icon {
-  font-size: 18px;
+  position: relative;
+  width: 22px;
+  height: 18px;
+  color: var(--museum-text-primary);
+  box-sizing: border-box;
+}
+
+.travel-mode-item.active .travel-mode-icon {
+  color: var(--museum-accent);
+}
+
+.mode-walking .travel-mode-icon::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  top: 0;
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+  border-radius: 50%;
+}
+
+.mode-walking .travel-mode-icon::after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 7px;
+  width: 10px;
+  height: 10px;
+  border-left: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: skewX(-18deg);
+}
+
+.mode-driving .travel-mode-icon {
+  border: 2px solid currentColor;
+  border-radius: 4px 4px 3px 3px;
+}
+
+.mode-driving .travel-mode-icon::before,
+.mode-driving .travel-mode-icon::after {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  width: 5px;
+  height: 5px;
+  background: currentColor;
+  border-radius: 50%;
+}
+
+.mode-driving .travel-mode-icon::before {
+  left: 2px;
+}
+
+.mode-driving .travel-mode-icon::after {
+  right: 2px;
+}
+
+.mode-transit .travel-mode-icon {
+  border: 2px solid currentColor;
+  border-radius: 3px;
+}
+
+.mode-transit .travel-mode-icon::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  right: 4px;
+  top: 4px;
+  height: 5px;
+  border-top: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
 }
 
 .travel-mode-label {
   font-size: 12px;
   line-height: 16px;
   font-weight: 500;
-  color: #151713;
+  color: var(--museum-text-primary);
 }
 
 .travel-mode-item.active .travel-mode-label {
@@ -763,11 +910,11 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
 .panel-status-text {
   font-size: 12px;
   line-height: 18px;
-  color: #696962;
+  color: var(--museum-text-tertiary);
 }
 
 .panel-status-text.error {
-  color: #b44b42;
+  color: #e73333;
 }
 
 .action-buttons {
@@ -782,24 +929,25 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
+  border-radius: var(--radius-button);
   transition: all 0.2s;
 }
 
 .nav-btn.primary {
   flex: 2;
-  background: #151713;
+  background: #000000;
 }
 
 .nav-btn.secondary {
   flex: 1;
-  background: #f6f7f4;
-  border: 1px solid #e5e6de;
+  background: var(--museum-bg-surface);
+  border: 1px solid #000000;
 }
 
 .nav-btn.disabled {
-  background: #d8dbd2;
-  border-color: #d8dbd2;
+  background: #000000;
+  border-color: #000000;
+  opacity: 0.45;
 }
 
 .nav-btn-text {
@@ -810,11 +958,11 @@ const handlePanelMouseEnd = (event: MouseEvent) => {
 }
 
 .nav-btn.secondary .nav-btn-text {
-  color: #545861;
+  color: var(--museum-text-primary);
 }
 
 .nav-btn.disabled .nav-btn-text {
-  color: #8b8b84;
+  color: var(--museum-accent);
 }
 
 .manual-select-hint {