ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

TREK仪表盘小部件:自定义卡片与紧凑列表两种视图

TREK仪表盘小部件:自定义卡片与紧凑列表两种视图 TREK仪表盘小部件自定义卡片与紧凑列表两种视图【免费下载链接】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 是一款自托管旅行规划器它的My Trips 仪表盘/dashboard是所有行程的控制中心。仪表盘支持卡片网格与紧凑列表两种视图一键切换并提供货币换算、时区时钟、收藏列表、即将预订等可自定义的仪表盘小部件Widgets。本文带你快速上手这两种视图的切换方式、Spotlight 行程卡的玩法以及如何按设备自由开关侧边栏小部件。一键切换卡片网格 vs 紧凑列表打开仪表盘后在列表区右上方的工具栏里有一个视图切换按钮网格/列表图标点一下即可在两种模式间来回切换视图适合场景特点网格卡片行程不多、想看封面图大图卡片 顶部 Spotlight 行程卡视觉冲击强列表紧凑行程多、想快速扫视单列紧凑行日期与统计并排展示一屏看更多你的选择会保存在浏览器的localStorage键名trek_dashboard_view中下次打开自动生效无需重复设置。切换逻辑见 useDashboard.ts列表视图的紧凑样式定义在 dashboard.css。卡片网格视图Spotlight 行程卡 统计行 Spotlight聚光行程卡网格视图会把最重要的一趟行程提升为顶部全宽的大卡片设计成一张**登机牌Boarding Pass**风格优先展示进行中的行程若没有则展示最近即将出发的那趟卡片上显示同行人头像Buddies、出发/结束日期、倒计时天数、目的地数量状态徽章自动区分Live进行中、Today、Tomorrow、Up Next、Recent手机上该卡以 Hero 形式置顶显示 四块旅行统计磁贴行程卡下方还有一排 Atlas 统计卡已访问国家数含国旗预览、总行程数、累计旅行天数、飞行距离还会换算成绕地球赤道几圈。每块磁贴都可以单独显示或隐藏见下文。 智能排序规则两种视图共用同一套排序① 进行中的行程 → ② 即将出发按开始日期升序→ ③ 已结束按开始日期降序。工具栏左侧的Planned / Archived / Completed筛选器可切换显示范围归档行程则收在页面底部的折叠区。紧凑列表视图一眼扫完所有行程切换到列表视图后所有行程包括 Spotlight 那趟都以统一的紧凑行呈现左侧窄幅封面图 右侧日期与天数/地点/同行人统计一屏能容纳的行程数量成倍增加适合行程党每行依然保留编辑、复制、归档、删除四个行内操作按钮窄屏下列表行会自动退化为卡片样式保证移动端可读性桌面端卡片操作按钮是悬停才显示保持画面干净移动端则常驻显示方便点按。右侧小部件栏4 个旅行必备工具宽屏下仪表盘右侧有一列吸顶小部件按需开关Currency货币换算— 输入金额即可实时换算支持 162 种货币数据来自 Frankfurter 汇率接口点击刷新图标获取最新汇率Collections收藏列表— 展示你保存地点列表的彩色徽章封面图 地点数点击直达列表源码见 CollectionsWidget.tsxTimezones时区时钟— 同时显示多个城市当前时间内置 18 个预设城市也支持输入任意 IANA 时区如America/DenverUpcoming Reservations即将预订— 按日期列出未来航班、酒店、餐厅预订点击跳转对应行程 小部件还能被插件扩展第三方插件可以以widget类型注入侧边栏或 Hero 区域让仪表盘随你的工作流继续生长。 手机上怎么找它们移动端不显示侧边栏改为页面顶部的Quick Actions快捷按钮——点 Currency 或 Timezone 按钮小部件会以底部弹层Bottom Sheet打开功能完全一致。自定义仪表盘按设备独立开关小部件打开Settings → Appearance在Dashboard widgets区域可以分别在桌面端和移动端两套布局下独立开关每个小部件桌面端Hero 下方 4 块统计磁贴 右侧边栏主开关 4 个小部件嵌套开关移动端Hero 下方统计 页面底部小部件设置保存在你的账号上换设备登录后依然生效关掉边栏主开关后仪表盘会自动居中显示注意依赖 Addon 的小部件如 Collections还需要管理员先启用对应 Addon个人开关之外还有一道全局闸门。快速上手清单 ✅打开/dashboard确认默认是卡片网格视图点击工具栏切换按钮试试紧凑列表感受信息密度差异点击工具栏的齿轮设置图标按需关掉不需要的侧边栏小部件进入Settings → Appearance为桌面/手机分别定制一套小部件布局悬停任意行程卡片体验编辑 / 复制 / 归档 / 删除快捷操作延伸阅读官方文档wiki/My-Trips-Dashboard.md、wiki/Dashboard-Widgets.md外观与显示设置wiki/Appearance-Settings.md仪表盘页面源码DashboardPage.tsx选对视图、调好小部件你的 TREK 仪表盘就会变成出发前最顺手的驾驶舱 ✈️【免费下载链接】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),仅供参考
返回列表