儀表板重設計——淺色/深色模式與改善資訊密度

2026-06-05，我們對 HeatMapX 儀表板（heatmapx.com/dashboard）進行了全面重設計。可見性和可用性均大幅提升。

變更內容

☀ 三向主題：淺色 / 深色 / 系統

Header 右上角新增了三向切換——「☀ 淺色」、「💻 系統」、「🌙 深色」。

• 系統（預設）：自動跟隨作業系統外觀設定。在 macOS 設定為「自動」時，夜間無需手動操作即可切換至深色。
• 手動覆蓋：你可以隨時固定為淺色或深色。偏好設定儲存在瀏覽器中。
• 初次載入時的未樣式化內容閃爍（FOUC）問題已防止，重新載入時正確主題會立即呈現。

▤ 已新增網站改為表格列表呈現

原本的雙欄卡片格已替換為單行表格佈局，當你有多個網站時，可瀏覽性大幅提升。

• 所有列的欄位垂直對齊，讓你一眼就能比較狀態和事件計數
• 網站名稱、URL、API key 和追蹤標籤全部緊湊地顯示在單行中
• 設定詳情收合在「▸ Setup info」下（展開即可複製 API key 和追蹤標籤）
• 長名稱和 URL 自動以「…」截斷，佈局永遠不會破版

＋「新增網站」按鈕移至標題旁

「Registered Sites」標題旁現在有一個緊湊的「＋ Add site」按鈕，讓你無需捲動即可新增網站（列表底部的原始按鈕依然保留）。

◐ 統一 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。
• Onboarding 模態視窗：進入儀表板 1 秒後淡入，緩和了突然彈出的感覺。
• 程式碼片段：追蹤標籤和 CLI 指令的顯示方式已從深色背景更新為淺灰色膠囊樣式，與淺色主題協調一致。

影響範圍

本次發布僅涉及 UI/UX——量測邏輯、資料結構和 API 均未變更。現有的嵌入式追蹤標籤繼續正常運作。