悬停以后行程卡片跑位了，折叠屏旅行图鉴如何保存地图视口

折叠屏从展开态切到悬停态旅行地图通常会从左右并排改成上下分区。第一版把选中站点和地图偏移都留在页面局部窗口一变化白崖灯塔的标记又回到默认位置右侧行程卡也跟着跳回第一天。折叠屏旅行图鉴的界面有 DAY 1DAY 3、雾港车站到落日营地的时间线以及可缩放的路线画布。这里最需要保住的是“正在看哪一天、选中哪个站点、地图停在哪儿”而不是某一种布局的像素位置。把行程和视口拆成两份状态行程选择属于业务状态视口属于交互状态。它们都应该跨布局保留但各自的保存规则不同。exportinterfaceTripStop{id:stringdayId:stringtitle:stringtime:stringcoordinate:{x:number,y:number}}exportinterfaceMapViewport{scale:numberoffsetX:numberoffsetY:number}exportinterfaceTripWorkspace{selectedDayId:stringselectedStopId:stringviewport:MapViewport posture:compact|halfFolded|expanded}站点坐标是地图坐标不随窗口宽度变化。offsetX与offsetY保存用户平移后的画布位置折叠屏改变姿态时布局只改变地图容器大小不重置这份视口状态。点击站点时不要按数组下标保存时间线可能按日期过滤也可能把已完成站点收起。用selectedStop: number会让“第二项”在过滤后指向另一处地点。exportclassTripController{privatestops:TripStop[][]workspace:TripWorkspace{selectedDayId:day-1,selectedStopId:,viewport:{scale:1,offsetX:0,offsetY:0},posture:expanded}selectStop(stopId:string):boolean{conststopthis.stops.find((item:TripStop)item.idstopId)if(!stop)returnfalsethis.workspace.selectedStopIdstop.idthis.workspace.selectedDayIdstop.dayIdreturntrue}visibleStops():TripStop[]{returnthis.stops.filter((item:TripStop)item.dayIdthis.workspace.selectedDayId)}}ForEach同样传入stop.id作为键。站点列表重新排序后正在探索的橙色标记仍落在同一个地点。姿态变化只重排区域悬停态不该创建第二份地图组件状态。页面根据姿态决定时间线和地图的排列方向控制器始终使用同一个workspace。BuildertripBody(){if(this.workspace.postureexpanded){Row({space:18}){this.stopTimeline(this.visibleStops())this.mapPanel(this.workspace.viewport)}.height(100%)}else{Column({space:14}){this.mapPanel(this.workspace.viewport)this.stopTimeline(this.visibleStops())}.height(100%)}}地图组件不读取selectedDay的数组位置只根据selectedStopId高亮目标。时间线放到下半屏时白崖灯塔仍保持原来的选中状态。手势坐标需要换算回地图坐标缩放后的拖动距离不能直接写入偏移。将屏幕位移除以缩放倍数再更新视口放大后手指移动 20 像素才不会让地图飞出很远。functionclamp(value:number,min:number,max:number):number{returnMath.max(min,Math.min(max,value))}exportfunctionpan(viewport:MapViewport,dx:number,dy:number):MapViewport{return{...viewport,offsetX:viewport.offsetXdx/viewport.scale,offsetY:viewport.offsetYdy/viewport.scale}}exportfunctionzoomAt(viewport:MapViewport,focusX:number,focusY:number,nextScale:number):MapViewport{constscaleclamp(nextScale,0.7,2.6)constmapX(focusX-viewport.offsetX)/viewport.scaleconstmapY(focusY-viewport.offsetY)/viewport.scalereturn{scale,offsetX:focusX-mapX*scale,offsetY:focusY-mapY*scale}}zoomAt让手势焦点停在原处。无论用户在展开态还是悬停态调整地图视觉上都像在同一张地图上继续操作。交通凭证与行程选择分离页面中的登乘凭证开关只决定凭证是否展开不应覆盖当前站点。恢复页面时单独保存这类短暂状态即可。exportinterfaceTripSnapshot{selectedDayId:stringselectedStopId:stringviewport:MapViewport passOpen:boolean}exportfunctionrestore(snapshot:TripSnapshot,stops:TripStop[]):TripWorkspace{constselectedstops.some((item:TripStop)item.idsnapshot.selectedStopId)return{selectedDayId:selected?snapshot.selectedDayId:day-1,selectedStopId:selected?snapshot.selectedStopId:(stops[0]?.id??),viewport:snapshot.viewport,posture:expanded}}当前旅行数据为本地行程。后续接入地图服务或折叠状态接口时接口层只负责提供坐标和姿态变化行程选择、视口换算与恢复逻辑继续由本地状态层处理。卡片无论移到上半屏还是侧栏都不会失去用户刚才看到的位置。