优化导览页图标与快捷入口展示

src/components/navigation/GuideMapShell.vue

@@ -170,9 +170,48 @@
         v-for="tool in tools"
         :key="tool"
         class="tool-btn"
+        :aria-label="tool"
+        :title="tool"
         @tap="handleToolClick(tool)"
       >
-        <text class="tool-label">{{ tool }}</text>
+        <svg
+          v-if="toolIconType(tool) === 'reset'"
+          class="tool-icon-svg"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path d="M5 7v5h5" />
+          <path d="M6.2 13.4A6.2 6.2 0 1 0 7.4 6.7L5 9.1" />
+        </svg>
+        <svg
+          v-else-if="toolIconType(tool) === 'top'"
+          class="tool-icon-svg"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <rect x="6" y="6" width="12" height="12" rx="2" />
+          <path d="M9 9h6v6H9z" />
+        </svg>
+        <svg
+          v-else-if="toolIconType(tool) === 'oblique'"
+          class="tool-icon-svg"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path d="M5 9.5 12 5l7 4.5-7 4.5-7-4.5Z" />
+          <path d="M5 9.5v5L12 19l7-4.5v-5" />
+          <path d="M12 14v5" />
+        </svg>
+        <svg
+          v-else-if="toolIconType(tool) === 'clear'"
+          class="tool-icon-svg"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path d="M7 7l10 10" />
+          <path d="M17 7 7 17" />
+        </svg>
+        <text v-else class="tool-label">{{ tool }}</text>
       </view>
     </view>
 
@@ -364,7 +403,7 @@ const indoorRendererRef = ref<{
   showMultiFloor?: () => Promise<void> | void
   resetCamera?: () => void
   setCameraPreset?: (preset: 'top' | 'oblique') => void
-  zoomCamera?: (direction: 'in' | 'out') => void
+  zoomCamera?: (direction: 'in' | 'out', options?: { source?: 'button' | 'gesture' }) => void
   clearSelection?: (shouldEmit?: boolean) => void
   clearRoute?: () => Promise<void> | void
   disableAutoSwitchTemporarily?: (durationMs: number) => void
@@ -477,7 +516,7 @@ const handleToolClick = (tool: string) => {
   if (props.mapType === 'indoor') {
     indoorRendererRef.value?.disableAutoSwitchTemporarily?.(10000)
 
-    if (tool === '重置') {
+    if (tool === '复位') {
       indoorRendererRef.value?.resetCamera?.()
     } else if (tool === '俯视') {
       indoorRendererRef.value?.setCameraPreset?.('top')
@@ -491,8 +530,16 @@ const handleToolClick = (tool: string) => {
   emit('toolClick', tool)
 }
 
+const toolIconType = (tool: string) => {
+  if (tool === '复位') return 'reset'
+  if (tool === '俯视') return 'top'
+  if (tool === '斜视') return 'oblique'
+  if (tool === '清除') return 'clear'
+  return 'text'
+}
+
 const handleZoomClick = (direction: 'in' | 'out') => {
-  indoorRendererRef.value?.zoomCamera?.(direction)
+  indoorRendererRef.value?.zoomCamera?.(direction, { source: 'button' })
   emit('toolClick', direction === 'in' ? '放大' : '缩小')
 }
 
@@ -892,9 +939,37 @@ defineExpose({
 }
 
 .floor-header-icon {
-  font-size: 16px;
-  line-height: 16px;
+  width: 18px;
+  height: 18px;
+  position: relative;
+  display: block;
   color: #151713;
+  font-size: 0;
+  line-height: 0;
+}
+
+.floor-header-icon::before,
+.floor-header-icon::after {
+  content: '';
+  position: absolute;
+  box-sizing: border-box;
+  border: 1.8px solid currentColor;
+  border-radius: 2px;
+}
+
+.floor-header-icon::before {
+  left: 2px;
+  top: 4px;
+  width: 12px;
+  height: 10px;
+}
+
+.floor-header-icon::after {
+  left: 5px;
+  top: 1px;
+  width: 12px;
+  height: 10px;
+  background: #ffffff;
 }
 
 .floor-header.active .floor-header-icon {
@@ -1001,6 +1076,20 @@ defineExpose({
   box-sizing: border-box;
 }
 
+.tool-btn:active {
+  background: #f6f7f4;
+  transform: translateY(1px);
+}
+
+.tool-icon-svg {
+  width: 22px;
+  height: 22px;
+  stroke: #151713;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .tool-label {
   font-size: 12px;
   line-height: 16px;