仪表板全量重设计——浅色/深色模式与信息密度提升

2026-06-05，我们发布了 HeatMapX 仪表板（heatmapx.com/dashboard）的全量重设计。可见性和可用性均有显著提升。

变更内容

☀ 三档主题：浅色 / 深色 / 跟随系统

头部右上角新增三档切换——「☀ 浅色」「💻 跟随系统」「🌙 深色」。

• 跟随系统（默认）：自动跟随系统外观设置。在 macOS 设置为「自动」时，夜间无需手动操作即可切换为深色。
• 手动覆盖：随时固定为浅色或深色，偏好保存在浏览器中。
• 防止了初始加载时的未样式化内容闪烁（FOUC），刷新后立即渲染正确主题。

▤ 已注册站点重设计为表格列表

之前的两列卡片网格已替换为单行表格布局，在注册多个站点时可扫描性大幅提升。

• 所有行的列垂直对齐，可一眼对比状态和事件数
• 站点名称、URL、API key 和追踪标签均紧凑地显示在同一行
• 设置详情折叠在「▸ 设置信息」下（展开后可复制 API key 和追踪标签）
• 过长的名称和 URL 自动截断并显示「…」，布局永不错乱

＋「添加站点」按钮移至区块标题旁

「已注册站点」标题旁新增了一个紧凑的「＋ 添加站点」按钮，无需滚动即可添加新站点（列表底部的原有按钮同样保留）。

◐ 统一 GitHub 风格扁平化设计

色彩方案已简化，视觉噪音大幅减少。

• 页面背景：中性灰（#f5f5f5），与 Linear、Supabase 等现代 SaaS 产品的视觉基调一致
• 卡片：白色底色 + 细边框，无阴影，6px 圆角
• 橙色作为唯一品牌强调色（此前：蓝、绿、紫、琥珀混用）
• 语义状态色保留：绿色（正常）/ 琥珀色（警告）/ 红色（错误）

前后对比

方面	之前	之后
色彩主题	固定深色仪表板	三档：浅色 / 深色 / 跟随系统
布局	两列卡片网格（信息密度低）	单列表格列表（列垂直对齐）
站点展示	垂直堆叠，占用大量空间	一个站点 = 一行 + 可折叠详情
添加按钮	仅在页面底部	标题旁和底部各一个
品牌色	蓝 / 绿 / 紫 / 琥珀混用	统一橙色单强调轴

其他改进

• 站点名称和 URL 长度限制：名称最多 60 字符 / URL 最多 512 字符，防止布局错乱。
• 更新添加站点占位文本：将 15 种支持语言中的 e.g. in-gol / https://in-gol.com 替换为 e.g. My site / https://example.com。
• 引导弹窗：到达仪表板后 1 秒淡入，缓解「突然弹出」的突兀感。
• 代码片段：追踪标签和 CLI 指令展示已从深色背景更新为浅灰色标签样式，与浅色主题协调一致。

影响范围

本次发布仅限 UI/UX——计量逻辑、数据结构和 API 均未变更。现有嵌入的追踪标签继续正常工作，无需任何操作。