优化来馆面板收起入口

src/components/navigation/ArrivalPanel.vue

@@ -1,23 +1,35 @@
 <template>
   <view
-    v-if="visible"
+    v-if="visible && !isCollapsed"
     class="arrival-scrim"
-    @tap="emit('close')"
+    @tap="collapsePanel"
   ></view>
   <view
     v-if="visible"
     class="arrival-panel"
+    :class="{ collapsed: isCollapsed }"
     @tap.stop
   >
-    <view class="arrival-handle"></view>
+    <view v-if="isCollapsed" class="arrival-collapsed" @tap="expandPanel">
+      <view class="arrival-collapsed-copy">
+        <text class="arrival-collapsed-title">来馆</text>
+        <text class="arrival-collapsed-summary">公交 / 地铁 / 停车</text>
+      </view>
+      <view class="arrival-collapsed-action">
+        <text class="arrival-collapsed-action-text">展开</text>
+      </view>
+    </view>
+
+    <template v-else>
+    <view class="arrival-handle" @tap="collapsePanel"></view>
 
     <view class="arrival-header">
       <view class="arrival-title-group">
         <text class="arrival-kicker">来馆</text>
         <text class="arrival-title">选择第三方地图检索目标</text>
       </view>
-      <view class="arrival-close" @tap="emit('close')">
-        <text class="arrival-close-text">×</text>
+      <view class="arrival-collapse" @tap="collapsePanel">
+        <text class="arrival-collapse-text">收起</text>
       </view>
     </view>
 
@@ -76,6 +88,7 @@
         <text class="arrival-target-action">选择地图</text>
       </view>
     </view>
+    </template>
   </view>
 
   <view
@@ -128,12 +141,14 @@ import {
 
 const props = withDefaults(defineProps<{
   visible?: boolean
+  defaultCollapsed?: boolean
 }>(), {
-  visible: false
+  visible: false,
+  defaultCollapsed: false
 })
 
 const emit = defineEmits<{
-  close: []
+  collapsedChange: [collapsed: boolean]
 }>()
 
 const venueTargets = computed(() => ARRIVAL_VENUE_TARGETS)
@@ -141,11 +156,22 @@ const transitTargets = computed(() => ARRIVAL_TRANSIT_TARGETS)
 const realtimeTargets = computed(() => ARRIVAL_REALTIME_TARGETS)
 const mapProviders = computed(() => THIRD_PARTY_MAP_PROVIDERS)
 const selectedTarget = ref<ArrivalSearchTarget | null>(null)
+const isCollapsed = ref(false)
 
 const handleTargetSelect = (target: ArrivalSearchTarget) => {
   selectedTarget.value = target
 }
 
+const collapsePanel = () => {
+  isCollapsed.value = true
+  emit('collapsedChange', true)
+}
+
+const expandPanel = () => {
+  isCollapsed.value = false
+  emit('collapsedChange', false)
+}
+
 const closeProviderSheet = () => {
   selectedTarget.value = null
 }
@@ -163,11 +189,20 @@ const handleProviderSelect = (provider: ThirdPartyMapProviderOption) => {
 watch(
   () => props.visible,
   (visible) => {
-    if (!visible) {
+    if (visible) {
+      isCollapsed.value = props.defaultCollapsed
+      emit('collapsedChange', props.defaultCollapsed)
+    } else {
       selectedTarget.value = null
+      isCollapsed.value = false
+      emit('collapsedChange', false)
     }
   }
 )
+
+defineExpose({
+  expandPanel
+})
 </script>
 
 <style scoped lang="scss">
@@ -195,6 +230,67 @@ watch(
   transform: translateX(-50%);
 }
 
+.arrival-panel.collapsed {
+  bottom: calc(env(safe-area-inset-bottom) + 92px);
+  max-height: none;
+  padding: 0;
+  overflow: visible;
+}
+
+.arrival-collapsed {
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 10px 10px 14px;
+  box-sizing: border-box;
+}
+
+.arrival-collapsed-copy {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.arrival-collapsed-title {
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 700;
+  color: #262421;
+}
+
+.arrival-collapsed-summary {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 17px;
+  color: #696962;
+}
+
+.arrival-collapsed-action {
+  height: 34px;
+  min-width: 56px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  box-sizing: border-box;
+  background: #262421;
+  border-radius: 8px;
+}
+
+.arrival-collapsed-action-text {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 600;
+  color: #e0e100;
+}
+
 .arrival-handle {
   width: 38px;
   height: 4px;
@@ -230,20 +326,23 @@ watch(
   color: #262421;
 }
 
-.arrival-close {
-  width: 32px;
-  height: 32px;
+.arrival-collapse {
   flex-shrink: 0;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  border: 1px solid #d7d9cf;
   border-radius: 8px;
-  background: #f3f3f3;
+  background: #ffffff;
 }
 
-.arrival-close-text {
-  font-size: 22px;
-  line-height: 26px;
+.arrival-collapse-text {
+  font-size: 12px;
+  line-height: 17px;
+  font-weight: 600;
   color: #424754;
 }