尧图网页设计 
TREK 行程规划器Trip Planner完全指南三栏可调布局、标签页体系与移动端适配【免费下载链接】TREKA self-hosted travel/trip planner with real-time collaboration, interactive maps, PWA support, SSO, budgets, packing lists, and more.项目地址: https://gitcode.com/GitHub_Trending/nomad22/TREKTREK 的行程规划器Trip Planner是构建整个行程的主工作区创建旅程后自动打开或在仪表盘点击任意旅程卡片随时进入。本文以 TREK 仓库中的 Trip-Planner-Overview.md 为主线结合 TripPlannerPage.tsx、useTripPlanner.ts、useResizablePanels.ts、usePlannerHistory.ts 等源码系统讲解规划器的三栏布局、标签页体系、移动端形态、撤销机制、启动闪屏等核心机制帮助你掌握这一核心工作区的全部使用与实现细节。布局桌面端三栏可调工作区规划器在桌面端使用三栏可缩放布局three-pane resizable layout结构如下┌─────────────────┬──────────────────────────┬──────────────────┐ │ Day Plan │ │ Places │ │ Sidebar │ Interactive │ Sidebar │ │ (left) │ Map │ (right) │ │ │ (center) │ │ └─────────────────┴──────────────────────────┴──────────────────┘左侧栏Day Plan——展示天数列表、已分配的景点、笔记与交通条目可通过面板折叠按钮收起中央——交互式地图渲染所有景点标记与每日路线右侧栏Places——景点列表提供搜索、分类筛选与批量操作同样可折叠。侧栏拖拽手柄与宽度记忆每个侧栏内边缘都带有一个拖拽手柄用于调整宽度。实现上对应 useResizablePanels.ts左右侧栏的宽度受MIN_SIDEBAR 200与MAX_SIDEBAR 520像素钳制默认宽度分别为340px与300px拖拽过程中实时把宽度写入localStorage键名sidebarLeftWidth/sidebarRightWidth下次打开同一浏览器时自动恢复上次的宽度偏好折叠状态同样被保存折叠后中央地图获得完整画幅折叠按钮以半透明胶囊形式吸附在对应侧边源码见 TripPlannerPage.tsx 左侧栏折叠按钮实现。在页面装配层左右侧栏分别渲染DayPlanSidebar与PlacesSidebar中央为MapViewAuto地图组件三者由页面级状态统一驱动选中天、选中景点、折叠状态等均来自useTripPlannerhook详见 useTripPlanner.ts。Day Detail 覆盖层当你打开某一天时一个Day Detail 覆盖层Day Detail overlay会从中央面板上方滑入集中展示当日天气、当日笔记、预订摘要与住宿区块accommodation block。它支持最小化而不关闭——对应页面中DayDetailPanel组件的collapsed状态TripPlannerPage.tsx方便你一边看地图一边参考当日信息。标签页体系规划器的功能中枢标签栏位于主导航栏正下方固定高度 44px使用SlidingTabs组件渲染。七个核心标签如下标签说明Plan规划上文所述的三栏地图视图始终可见不可被插件替换Transports交通航班、火车、汽车、邮轮与巴士Reservations预订酒店、餐厅、活动、导览及其他预订Lists清单打包清单与待办清单Costs费用支出追踪、分摊与结算Files文件收据、票据等文档管理器Collab协作实时聊天、共享笔记与投票管理员注意Lists、Costs、Files与Collab标签仅在对应 addon 启用时出现详见 Admin-Addons。源码层面的标签门控与持久化从 useTripPlanner.ts 可以看到标签列表并不是写死的Addon 门控enabledAddons状态初始化为{ packing: true, budget: true, documents: true, collab: false }随后通过addonsApi.enabled()拉取服务端配置只有对应 addon 启用时listenLists、finanzplanCosts、dateienFiles、collab标签才会被拼进TRIP_TABS插件可替换核心标签trip-page类型插件可以声明replaces来替换除plan外的核心标签也可以声明position决定自己标签的插入位置useTripPlanner.ts按旅程持久化当前激活标签保存在sessionStorage的trip-tab-tripId键下useTripPlanner.ts因此在多个旅程之间切换时会保留你在每个旅程中的最后位置若保存的标签已失效如插件被卸载或 addon 被禁用会自动回退到plan视图标签内的子标签Lists 标签内部的 packing/todo 子标签同样写入sessionStorage键trip-lists-subtab-tripId见 TripPlannerPage.tsx。值得留意的是sessionStorage的持久化粒度是“每个旅程一份”这与localStorage中“全局一份”的侧栏宽度、按天展开状态day-expanded-tripId形成互补共同保证工作区状态在多标签会话中不丢失。移动端布局全屏覆盖层而非并排侧栏在宽度小于 768px 的屏幕上两个侧栏不再并排显示而是改为地图上方出现两个悬浮按钮Plan规划——以全屏覆盖层打开 Day Plan 侧栏Places景点——以全屏覆盖层打开 Places 侧栏。点击覆盖层外部区域或使用关闭按钮即可返回地图。源码中的移动端判定基于window.matchMedia((max-width: 767px))useTripPlanner.ts与文档描述的 768px 断点一致移动端按钮与覆盖层通过 React Portal 渲染到document.body以规避 Leaflet 地图触摸事件对手势的拦截TripPlannerPage.tsx。另外仓库还区分了宽度驱动的移动端判定isMobile与指针驱动的触摸判定isTouch平板是宽触摸设备两者不可混为一谈。触摸设备上 Day Plan 侧栏禁用拖拽排序拖拽会劫持触摸滚动手势改为箭头按钮排序——这正是 ipad-scroll-1432.spec.ts 端到端测试覆盖的场景。撤销机制短期操作历史环规划器会追踪最近的操作——添加景点、分配天数、重新排序、移除分配等——保存在一个**短期的撤销环undo ring**中。当存在可撤销操作时Undo 按钮会出现在 Day Plan 侧栏顶部的工具栏中悬停时以 tooltip 显示最近一次操作的名称点击即可逆转该操作。实现位于 usePlannerHistory.ts默认最多保留30 条撤销记录maxEntries 30pushUndo(label, undoFn)把带有中文标签的撤销函数压入栈顶undo()弹出并执行栈顶函数。从 DayPlanSidebar.tsx 可以看到多种操作都注册了对应的撤销动作例如跨天移动景点后撤销可恢复原顺序与原order_index路线优化Optimize后撤销可恢复优化前的景点顺序锁定/解锁景点、拖拽重排reorder均可一键撤销。这种“操作标签 逆操作函数”的设计使撤销不依赖对每次变更做全量快照内存开销可控同时悬停提示能准确告诉用户“上一步做了什么”。启动闪屏数据与照片预取的等待页首次打开旅程时会先出现一个简短的加载屏幕期间完成规划器数据与景点照片的获取。该闪屏展示旅程标题与加载动画当数据就绪且照片的宽限期grace period结束后规划器工作区才出现。对应的渲染逻辑在 TripPlannerPage.tsxisLoading || !splashDone成立时显示加载页——包括明暗主题对应的trek-loading动图、旅程标题、trip.loadingPhotos文案与三枚脉冲圆点动画。值得注意的实现细节是照片抓取在闪屏期间就已启动useTripPlanner.ts对没有image_url的景点按google_place_id/osm_id/ 坐标构造缓存键并发起fetchPhoto从而在地图挂载时照片缓存已就绪避免进入工作区后出现大量空位。快速上手常见任务入口任务入口添加与搜索景点Places-and-Search组织天数与笔记Day-Plans-and-Notes地图功能与路线Map-Features天气预报Weather-Forecasts预订与订票Reservations-and-Bookings相关页面Places-and-SearchDay-Plans-and-NotesMap-FeaturesWeather-ForecastsReservations-and-BookingsAdmin-Addons总结TREK 行程规划器以“左侧天数计划 中央交互地图 右侧景点列表”的三栏可调布局为骨架通过标签页体系Plan / Transports / Reservations / Lists / Costs / Files / Collab串联全部旅程功能并用sessionStorage按旅程记忆标签位置、用localStorage记忆侧栏宽度与天数展开状态。移动端在 768px 断点切换为全屏覆盖层交互撤销环默认保留 30 条操作启动闪屏在数据与照片预取完成后自动过渡——整套机制在 TripPlannerPage.tsx 与 useTripPlanner.ts 中有完整可读的源码实现。【免费下载链接】TREKA self-hosted travel/trip planner with real-time collaboration, interactive maps, PWA support, SSO, budgets, packing lists, and more.项目地址: https://gitcode.com/GitHub_Trending/nomad22/TREK创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TREK 行程规划器（Trip Planner）完全指南：三栏可调布局、标签页体系与移动端适配
TREK 行程规划器Trip Planner完全指南三栏可调布局、标签页体系与移动端适配【免费下载链接】TREKA self-hosted travel/trip planner with real-time collaboration, interactive maps, PWA support, SSO, budgets, packing lists, and more.项目地址: https://gitcode.com/GitHub_Trending/nomad22/TREKTREK 的行程规划器Trip Planner是构建整个行程的主工作区创建旅程后自动打开或在仪表盘点击任意旅程卡片随时进入。本文以 TREK 仓库中的 Trip-Planner-Overview.md 为主线结合 TripPlannerPage.tsx、useTripPlanner.ts、useResizablePanels.ts、usePlannerHistory.ts 等源码系统讲解规划器的三栏布局、标签页体系、移动端形态、撤销机制、启动闪屏等核心机制帮助你掌握这一核心工作区的全部使用与实现细节。布局桌面端三栏可调工作区规划器在桌面端使用三栏可缩放布局three-pane resizable layout结构如下┌─────────────────┬──────────────────────────┬──────────────────┐ │ Day Plan │ │ Places │ │ Sidebar │ Interactive │ Sidebar │ │ (left) │ Map │ (right) │ │ │ (center) │ │ └─────────────────┴──────────────────────────┴──────────────────┘左侧栏Day Plan——展示天数列表、已分配的景点、笔记与交通条目可通过面板折叠按钮收起中央——交互式地图渲染所有景点标记与每日路线右侧栏Places——景点列表提供搜索、分类筛选与批量操作同样可折叠。侧栏拖拽手柄与宽度记忆每个侧栏内边缘都带有一个拖拽手柄用于调整宽度。实现上对应 useResizablePanels.ts左右侧栏的宽度受MIN_SIDEBAR 200与MAX_SIDEBAR 520像素钳制默认宽度分别为340px与300px拖拽过程中实时把宽度写入localStorage键名sidebarLeftWidth/sidebarRightWidth下次打开同一浏览器时自动恢复上次的宽度偏好折叠状态同样被保存折叠后中央地图获得完整画幅折叠按钮以半透明胶囊形式吸附在对应侧边源码见 TripPlannerPage.tsx 左侧栏折叠按钮实现。在页面装配层左右侧栏分别渲染DayPlanSidebar与PlacesSidebar中央为MapViewAuto地图组件三者由页面级状态统一驱动选中天、选中景点、折叠状态等均来自useTripPlannerhook详见 useTripPlanner.ts。Day Detail 覆盖层当你打开某一天时一个Day Detail 覆盖层Day Detail overlay会从中央面板上方滑入集中展示当日天气、当日笔记、预订摘要与住宿区块accommodation block。它支持最小化而不关闭——对应页面中DayDetailPanel组件的collapsed状态TripPlannerPage.tsx方便你一边看地图一边参考当日信息。标签页体系规划器的功能中枢标签栏位于主导航栏正下方固定高度 44px使用SlidingTabs组件渲染。七个核心标签如下标签说明Plan规划上文所述的三栏地图视图始终可见不可被插件替换Transports交通航班、火车、汽车、邮轮与巴士Reservations预订酒店、餐厅、活动、导览及其他预订Lists清单打包清单与待办清单Costs费用支出追踪、分摊与结算Files文件收据、票据等文档管理器Collab协作实时聊天、共享笔记与投票管理员注意Lists、Costs、Files与Collab标签仅在对应 addon 启用时出现详见 Admin-Addons。源码层面的标签门控与持久化从 useTripPlanner.ts 可以看到标签列表并不是写死的Addon 门控enabledAddons状态初始化为{ packing: true, budget: true, documents: true, collab: false }随后通过addonsApi.enabled()拉取服务端配置只有对应 addon 启用时listenLists、finanzplanCosts、dateienFiles、collab标签才会被拼进TRIP_TABS插件可替换核心标签trip-page类型插件可以声明replaces来替换除plan外的核心标签也可以声明position决定自己标签的插入位置useTripPlanner.ts按旅程持久化当前激活标签保存在sessionStorage的trip-tab-tripId键下useTripPlanner.ts因此在多个旅程之间切换时会保留你在每个旅程中的最后位置若保存的标签已失效如插件被卸载或 addon 被禁用会自动回退到plan视图标签内的子标签Lists 标签内部的 packing/todo 子标签同样写入sessionStorage键trip-lists-subtab-tripId见 TripPlannerPage.tsx。值得留意的是sessionStorage的持久化粒度是“每个旅程一份”这与localStorage中“全局一份”的侧栏宽度、按天展开状态day-expanded-tripId形成互补共同保证工作区状态在多标签会话中不丢失。移动端布局全屏覆盖层而非并排侧栏在宽度小于 768px 的屏幕上两个侧栏不再并排显示而是改为地图上方出现两个悬浮按钮Plan规划——以全屏覆盖层打开 Day Plan 侧栏Places景点——以全屏覆盖层打开 Places 侧栏。点击覆盖层外部区域或使用关闭按钮即可返回地图。源码中的移动端判定基于window.matchMedia((max-width: 767px))useTripPlanner.ts与文档描述的 768px 断点一致移动端按钮与覆盖层通过 React Portal 渲染到document.body以规避 Leaflet 地图触摸事件对手势的拦截TripPlannerPage.tsx。另外仓库还区分了宽度驱动的移动端判定isMobile与指针驱动的触摸判定isTouch平板是宽触摸设备两者不可混为一谈。触摸设备上 Day Plan 侧栏禁用拖拽排序拖拽会劫持触摸滚动手势改为箭头按钮排序——这正是 ipad-scroll-1432.spec.ts 端到端测试覆盖的场景。撤销机制短期操作历史环规划器会追踪最近的操作——添加景点、分配天数、重新排序、移除分配等——保存在一个**短期的撤销环undo ring**中。当存在可撤销操作时Undo 按钮会出现在 Day Plan 侧栏顶部的工具栏中悬停时以 tooltip 显示最近一次操作的名称点击即可逆转该操作。实现位于 usePlannerHistory.ts默认最多保留30 条撤销记录maxEntries 30pushUndo(label, undoFn)把带有中文标签的撤销函数压入栈顶undo()弹出并执行栈顶函数。从 DayPlanSidebar.tsx 可以看到多种操作都注册了对应的撤销动作例如跨天移动景点后撤销可恢复原顺序与原order_index路线优化Optimize后撤销可恢复优化前的景点顺序锁定/解锁景点、拖拽重排reorder均可一键撤销。这种“操作标签 逆操作函数”的设计使撤销不依赖对每次变更做全量快照内存开销可控同时悬停提示能准确告诉用户“上一步做了什么”。启动闪屏数据与照片预取的等待页首次打开旅程时会先出现一个简短的加载屏幕期间完成规划器数据与景点照片的获取。该闪屏展示旅程标题与加载动画当数据就绪且照片的宽限期grace period结束后规划器工作区才出现。对应的渲染逻辑在 TripPlannerPage.tsxisLoading || !splashDone成立时显示加载页——包括明暗主题对应的trek-loading动图、旅程标题、trip.loadingPhotos文案与三枚脉冲圆点动画。值得注意的实现细节是照片抓取在闪屏期间就已启动useTripPlanner.ts对没有image_url的景点按google_place_id/osm_id/ 坐标构造缓存键并发起fetchPhoto从而在地图挂载时照片缓存已就绪避免进入工作区后出现大量空位。快速上手常见任务入口任务入口添加与搜索景点Places-and-Search组织天数与笔记Day-Plans-and-Notes地图功能与路线Map-Features天气预报Weather-Forecasts预订与订票Reservations-and-Bookings相关页面Places-and-SearchDay-Plans-and-NotesMap-FeaturesWeather-ForecastsReservations-and-BookingsAdmin-Addons总结TREK 行程规划器以“左侧天数计划 中央交互地图 右侧景点列表”的三栏可调布局为骨架通过标签页体系Plan / Transports / Reservations / Lists / Costs / Files / Collab串联全部旅程功能并用sessionStorage按旅程记忆标签位置、用localStorage记忆侧栏宽度与天数展开状态。移动端在 768px 断点切换为全屏覆盖层交互撤销环默认保留 30 条操作启动闪屏在数据与照片预取完成后自动过渡——整套机制在 TripPlannerPage.tsx 与 useTripPlanner.ts 中有完整可读的源码实现。【免费下载链接】TREKA self-hosted travel/trip planner with real-time collaboration, interactive maps, PWA support, SSO, budgets, packing lists, and more.项目地址: https://gitcode.com/GitHub_Trending/nomad22/TREK创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考