企业官网建设流程全解析

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

TREK 是一款自托管旅行规划器，它的My Trips 仪表盘（/dashboard）是所有行程的控制中心。仪表盘支持卡片网格与紧凑列表两种视图一键切换，并提供货币换算、时区时钟、收藏列表、即将预订等可自定义的仪表盘小部件（Widgets）。本文带你快速上手这两种视图的切换方式、Spotlight 行程卡的玩法，以及如何按设备自由开关侧边栏小部件。

一键切换：卡片网格 vs 紧凑列表

打开仪表盘后，在列表区右上方的工具栏里有一个视图切换按钮（网格/列表图标），点一下即可在两种模式间来回切换：

你的选择会保存在浏览器的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 个旅行必备工具

宽屏下，仪表盘右侧有一列吸顶小部件，按需开关：

1. Currency（货币换算）— 输入金额即可实时换算，支持 162 种货币，数据来自 Frankfurter 汇率接口，点击刷新图标获取最新汇率
2. Collections（收藏列表）— 展示你保存地点列表的彩色徽章（封面图 + 地点数），点击直达列表，源码见 CollectionsWidget.tsx
3. Timezones（时区时钟）— 同时显示多个城市当前时间，内置 18 个预设城市，也支持输入任意 IANA 时区（如America/Denver）
4. Upcoming Reservations（即将预订）— 按日期列出未来航班、酒店、餐厅预订，点击跳转对应行程

💡 小部件还能被插件扩展：第三方插件可以以widget类型注入侧边栏或 Hero 区域，让仪表盘随你的工作流继续生长。

📱 手机上怎么找它们？移动端不显示侧边栏，改为页面顶部的Quick Actions快捷按钮——点 Currency 或 Timezone 按钮，小部件会以底部弹层（Bottom Sheet）打开，功能完全一致。

自定义仪表盘：按设备独立开关小部件

打开Settings → Appearance，在Dashboard widgets区域可以分别在桌面端和移动端两套布局下独立开关每个小部件：

• 桌面端：Hero 下方 4 块统计磁贴 + 右侧边栏（主开关 + 4 个小部件嵌套开关）
• 移动端：Hero 下方统计 + 页面底部小部件
• 设置保存在你的账号上，换设备登录后依然生效；关掉边栏主开关后，仪表盘会自动居中显示

注意：依赖 Addon 的小部件（如 Collections）还需要管理员先启用对应 Addon，个人开关之外还有一道全局闸门。

快速上手清单 ✅

1. 打开/dashboard，确认默认是卡片网格视图
2. 点击工具栏切换按钮，试试紧凑列表，感受信息密度差异
3. 点击工具栏的齿轮（设置）图标，按需关掉不需要的侧边栏小部件
4. 进入Settings → Appearance，为桌面/手机分别定制一套小部件布局
5. 悬停任意行程卡片，体验编辑 / 复制 / 归档 / 删除快捷操作

延伸阅读

• 官方文档：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