修复楼层多层切换状态同步
This commit is contained in:
@@ -126,15 +126,11 @@
|
||||
<text class="layer-mode-label">{{ layerModeActionLabel }}</text>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
<view
|
||||
v-if="showIndoorRightControls && showFloor"
|
||||
class="floor-switcher"
|
||||
:class="`side-${floorSide}`"
|
||||
:style="floorSwitcherStyle"
|
||||
scroll-y
|
||||
:show-scrollbar="false"
|
||||
:scroll-into-view="activeFloorScrollIntoView"
|
||||
:scroll-with-animation="true"
|
||||
>
|
||||
<view
|
||||
v-if="showFloorHeader"
|
||||
@@ -143,24 +139,33 @@
|
||||
@tap.stop="handleFloorHeaderTap"
|
||||
>
|
||||
<text class="floor-header-icon">▱</text>
|
||||
<text class="floor-header-label">楼层</text>
|
||||
<text class="floor-header-label">{{ layerModeActionLabel }}</text>
|
||||
</view>
|
||||
<view
|
||||
v-for="floor in floorItems"
|
||||
:id="floor.scrollId"
|
||||
:key="floor.id"
|
||||
class="floor-item"
|
||||
:class="{
|
||||
active: activeFloorId === floor.id && layerMode !== 'multi',
|
||||
pending: loadingFloorId === floor.id,
|
||||
failed: failedFloorId === floor.id,
|
||||
disabled: isFloorSwitchDisabled(floor.id)
|
||||
}"
|
||||
@tap.stop="handleFloorChange(floor)"
|
||||
<scroll-view
|
||||
class="floor-list"
|
||||
:style="floorListStyle"
|
||||
scroll-y
|
||||
:show-scrollbar="false"
|
||||
:scroll-into-view="activeFloorScrollIntoView"
|
||||
:scroll-with-animation="true"
|
||||
>
|
||||
<text class="floor-label">{{ floor.label }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view
|
||||
v-for="floor in floorItems"
|
||||
:id="floor.scrollId"
|
||||
:key="floor.id"
|
||||
class="floor-item"
|
||||
:class="{
|
||||
active: activeFloorId === floor.id,
|
||||
pending: loadingFloorId === floor.id,
|
||||
failed: failedFloorId === floor.id,
|
||||
disabled: isFloorSwitchDisabled(floor.id)
|
||||
}"
|
||||
@tap.stop="handleFloorChange(floor)"
|
||||
>
|
||||
<text class="floor-label">{{ floor.label }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view v-if="showZoomControls" class="zoom-controls" :style="zoomControlsStyle">
|
||||
<view class="zoom-btn" @tap="handleZoomClick('in')">
|
||||
@@ -506,8 +511,13 @@ const searchFieldStyle = computed(() => ({
|
||||
}))
|
||||
|
||||
const floorSwitcherStyle = computed(() => ({
|
||||
...(props.floorBottom ? { bottom: props.floorBottom } : { top: props.floorTop }),
|
||||
...(props.floorMaxHeight ? { maxHeight: props.floorMaxHeight } : {})
|
||||
...(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(() => ({
|
||||
@@ -682,7 +692,7 @@ const handleLayerModeToggle = () => {
|
||||
}
|
||||
|
||||
const handleFloorHeaderTap = () => {
|
||||
handleLayerModeChange('multi')
|
||||
handleLayerModeChange(props.layerMode === 'multi' ? 'single' : 'multi')
|
||||
}
|
||||
|
||||
const handleToolClick = (tool: string) => {
|
||||
@@ -1064,13 +1074,9 @@ defineExpose({
|
||||
position: absolute;
|
||||
width: 46px;
|
||||
height: auto;
|
||||
max-height: calc(100vh - 260px);
|
||||
padding: 1px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
touch-action: pan-y;
|
||||
overflow: hidden;
|
||||
scrollbar-width: none;
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
border: 1px solid #dde5df;
|
||||
@@ -1083,6 +1089,19 @@ defineExpose({
|
||||
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;
|
||||
}
|
||||
|
||||
.floor-switcher.side-right {
|
||||
right: 16px;
|
||||
}
|
||||
@@ -1092,9 +1111,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.floor-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
padding: 7px 4px 6px;
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user