优化馆内楼层切换展示

2026-07-04 18:50:08 +08:00
parent e813660aea
commit 5a61357f63
2 changed files with 63 additions and 96 deletions
--- a/src/components/map/FloorSwitcher.vue
+++ b/src/components/map/FloorSwitcher.vue
@@ -1,6 +1,12 @@
 <template>
  <view class="floor-switcher">
-    <view class="floor-list">
+    <view
+      class="floor-list"
+      :class="{
+        compact: floors.length >= 8,
+        dense: floors.length >= 10
+      }"
+    >
      <view
        v-for="floor in floors"
        :key="floor.id"
@@ -70,22 +76,33 @@ const handleFloorTap = (floorId: string) => {
 .floor-list {
  display: flex;
  flex-direction: column;
-  gap: 6px;
+  gap: 4px;
  background-color: rgba(26, 26, 46, 0.9);
-  border-radius: 12px;
-  padding: 8px;
+  border-radius: 10px;
+  padding: 6px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: visible;
+}
+
+.floor-list.compact {
+  gap: 3px;
+  padding: 5px;
+}
+
+.floor-list.dense {
+  gap: 2px;
+  padding: 4px;
 }

 .floor-item {
-  width: 52px;
-  height: 48px;
+  width: 46px;
+  height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
-  gap: 4px;
+  gap: 3px;
  background-color: transparent;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -97,16 +114,27 @@ const handleFloorTap = (floorId: string) => {
  }
 }

+.floor-list.compact .floor-item {
+  width: 44px;
+  height: 30px;
+}
+
+.floor-list.dense .floor-item {
+  width: 42px;
+  height: 28px;
+}
+
 .floor-indicator {
-  width: 24px;
-  height: 3px;
+  width: 20px;
+  height: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  transition: all 0.3s ease;
 }

 .floor-label {
-  font-size: 14px;
+  font-size: 12px;
+  line-height: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
@@ -117,7 +145,7 @@ const handleFloorTap = (floorId: string) => {
  background-color: rgba(224, 225, 0, 0.15);
  
  .floor-indicator {
-    width: 32px;
+    width: 28px;
    background-color: #E0E100;
    box-shadow: 0 0 8px rgba(224, 225, 0, 0.5);
  }
@@ -143,8 +171,8 @@ const handleFloorTap = (floorId: string) => {

 // 3D 视角指示器
 .view-indicator {
-  width: 52px;
-  height: 28px;
+  width: 46px;
+  height: 24px;
  background: linear-gradient(135deg, #E0E100 0%, #c4c400 100%);
  border-radius: 6px;
  display: flex;
@@ -153,7 +181,7 @@ const handleFloorTap = (floorId: string) => {
  box-shadow: 0 2px 8px rgba(224, 225, 0, 0.4);
  
  .view-icon {
-    font-size: 12px;
+    font-size: 11px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.5px;
--- a/src/components/navigation/GuideMapShell.vue
+++ b/src/components/navigation/GuideMapShell.vue
@@ -141,17 +141,11 @@
        <text class="floor-header-icon">▱</text>
        <text class="floor-header-label">{{ layerModeActionLabel }}</text>
      </view>
-      <scroll-view
+      <view
        class="floor-list"
-        :style="floorListStyle"
-        scroll-y
-        :show-scrollbar="false"
-        :scroll-into-view="activeFloorScrollIntoView"
-        :scroll-with-animation="true"
      >
        <view
          v-for="floor in floorItems"
-          :id="floor.scrollId"
          :key="floor.id"
          class="floor-item"
          :class="{
@@ -164,7 +158,7 @@
        >
          <text class="floor-label">{{ floor.label }}</text>
        </view>
-      </scroll-view>
+      </view>
    </view>

    <view v-if="showZoomControls" class="zoom-controls" :style="zoomControlsStyle">
@@ -437,11 +431,7 @@ const indoorRendererRef = ref<{
 } | null>(null)

 const indoorFloors = computed(() => props.floors.filter((floor) => isIndoorNavigableFloor(floor)))
-const createFloorScrollId = (floorId: string) => `guide-floor-${floorId.replace(/[^a-zA-Z0-9_-]/g, '-')}`
-const floorItems = computed(() => indoorFloors.value.map((floor) => ({
-  ...floor,
-  scrollId: createFloorScrollId(floor.id)
-})))
+const floorItems = computed(() => indoorFloors.value)
 // #ifdef H5
 const effectiveIndoorModelSource = computed(() => props.indoorModelSource)
 // #endif
@@ -461,7 +451,6 @@ const activeFloorId = computed(() => {
  ))
  return normalizedFloor?.id || normalizedFloorId
 })
-const activeFloorScrollIntoView = ref('')
 const requestedFloorId = ref('')
 const requestedFloorLabel = ref('')
 const loadingFloorId = ref('')
@@ -469,38 +458,8 @@ const renderedFloorId = ref(activeFloorId.value)
 const activeFloorSwitchRequestSeq = ref(0)
 const renderedFloorSwitchRequestSeq = ref(0)
 const failedFloorId = ref('')
-let suppressFloorAutoScrollForFloorId = ''
 let floorSwitchRequestSeq = 0

-const syncActiveFloorScroll = () => {
-  if (props.mapType !== 'indoor' || props.indoorView === 'overview' || props.layerMode === 'multi') {
-    activeFloorScrollIntoView.value = ''
-    return
-  }
-
-  if (activeFloorId.value === suppressFloorAutoScrollForFloorId) {
-    activeFloorScrollIntoView.value = ''
-    suppressFloorAutoScrollForFloorId = ''
-    return
-  }
-  suppressFloorAutoScrollForFloorId = ''
-
-  const matchedFloor = floorItems.value.find((floor) => floor.id === activeFloorId.value)
-  activeFloorScrollIntoView.value = matchedFloor?.scrollId || ''
-}
-
-watch(
-  () => [
-    activeFloorId.value,
-    props.indoorView,
-    props.layerMode,
-    props.mapType,
-    floorItems.value.map((floor) => floor.id).join('|')
-  ],
-  syncActiveFloorScroll,
-  { immediate: true }
-)
-
 const searchFieldStyle = computed(() => ({
  top: props.searchTop
 }))
@@ -509,12 +468,6 @@ const floorSwitcherStyle = computed(() => ({
  ...(props.floorBottom ? { bottom: props.floorBottom } : { top: props.floorTop })
 }))

-const floorListStyle = computed(() => ({
-  ...(props.floorMaxHeight
-    ? { maxHeight: props.showFloorHeader ? `calc(${props.floorMaxHeight} - 50px)` : props.floorMaxHeight }
-    : {})
-}))
-
 const layerModeToggleStyle = computed(() => ({
  top: props.layerModeToggleTop
 }))
@@ -606,8 +559,6 @@ const handleFloorChange = (floor: { id: string; label: string }) => {
  const requestSeq = ++floorSwitchRequestSeq
  activeFloorSwitchRequestSeq.value = requestSeq
  failedFloorId.value = ''
-  suppressFloorAutoScrollForFloorId = floorId
-  activeFloorScrollIntoView.value = ''
  indoorRendererRef.value?.disableAutoSwitchTemporarily?.(10000)
  emit('floorRequest', {
    floorId,
@@ -1067,12 +1018,11 @@ defineExpose({

 .floor-switcher {
  position: absolute;
-  width: 46px;
+  width: 44px;
  height: auto;
  padding: 1px;
  box-sizing: border-box;
  overflow: hidden;
-  scrollbar-width: none;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid #dde5df;
  border-radius: 8px;
@@ -1080,21 +1030,10 @@ defineExpose({
  z-index: 35;
 }

-.floor-switcher::-webkit-scrollbar {
-  display: none;
-}
-
 .floor-list {
-  max-height: calc(100vh - 310px);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-  touch-action: pan-y;
-  scrollbar-width: none;
-}
-
-.floor-list::-webkit-scrollbar {
-  display: none;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
 }

 .floor-switcher.side-right {
@@ -1107,8 +1046,8 @@ defineExpose({

 .floor-header {
  position: relative;
-  min-height: 50px;
-  padding: 7px 4px 6px;
+  min-height: 38px;
+  padding: 5px 4px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -1134,8 +1073,8 @@ defineExpose({
 }

 .floor-header-icon {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
  position: relative;
  display: block;
  color: #151713;
@@ -1155,15 +1094,15 @@ defineExpose({
 .floor-header-icon::before {
  left: 2px;
  top: 4px;
-  width: 12px;
-  height: 10px;
+  width: 11px;
+  height: 9px;
 }

 .floor-header-icon::after {
  left: 5px;
  top: 1px;
-  width: 12px;
-  height: 10px;
+  width: 11px;
+  height: 9px;
  background: #ffffff;
 }

@@ -1172,8 +1111,8 @@ defineExpose({
 }

 .floor-header-label {
-  font-size: 11px;
-  line-height: 14px;
+  font-size: 10px;
+  line-height: 12px;
  color: #545861;
 }

@@ -1210,7 +1149,7 @@ defineExpose({

 .floor-item {
  position: relative;
-  height: 36px;
+  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -1247,7 +1186,7 @@ defineExpose({
 .floor-item.pending::before {
  content: '';
  position: absolute;
-  inset: 7px;
+  inset: 5px;
  border: 1px solid rgba(224, 225, 0, 0.9);
  border-radius: 6px;
 }
@@ -1262,8 +1201,8 @@ defineExpose({
 }

 .floor-label {
-  font-size: 13px;
-  line-height: 18px;
+  font-size: 12px;
+  line-height: 16px;
  font-weight: 500;
  color: #545861;
 }