固定左側邊欄與多頁儀表板佈局

2026-06-05，我們以完整的 Supabase/Vercel 風格固定側邊欄佈局重建了 heatmapx.com/dashboard（這是當天發布的完整儀表板重設計的結構性後續）。

新佈局

┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX                  [☀💻🌙]  [JA/EN]    │ ← sticky header
├──────────────┬───────────────────────────────────────┤
│ MENU          │                                       │
│ ▸ ⌂ Home      │   Home                                │
│   ▤ Heatmaps  │                                       │
│               │   Sites / Today's Events / Plan       │
│   ⌘ CLI&Skills│                                       │
│   $ Plan&Billing│  AI Analysis Usage [████░]          │
│   ⚙ Settings  │   PV Usage         [██░░░]            │
│               │                                       │
│ COMING SOON   │   Quick Actions                       │
│   🧪 A/B Tests │   [▤ View Heatmaps] [＋Add]          │
│   ✨ Dynamic UI│                                       │
├──────────────┤                                       │
│   Log out     │                                       │
└──────────────┴───────────────────────────────────────┘

五個獨立頁面

路由	頁面	內容
`/dashboard`	⌂ Home	統計卡片（網站數 / 今日事件 / 當前方案）、用量進度條（AI 分析 / PV）、快速操作
`/dashboard/sites`	▤ Heatmaps	已新增網站的表格列表。從此處新增網站
`/dashboard/cli`	⌘ CLI & Skills	終端機 CLI 和 Claude Code Skill 的並排安裝指南
`/dashboard/billing`	$ Plan & Billing	當前用量摘要 + 完整方案比較表（Free / Pro / Team / Enterprise）
`/dashboard/settings`	⚙ Settings	語言選擇器（English / 日本語）——更多設定即將推出

變更內容

▤ Supabase 風格固定左側邊欄

五個主要導航項目始終可見於左側邊欄，在捲動時固定，讓你可以從任何地方跳轉至其他頁面。

當前頁面高亮：選單中的當前頁面會有視覺強調
圖示：每個選單項目都有視覺識別符號
登出：固定在側邊欄底部，降低誤觸風險

⌂ Home 作為一覽式概覽

/dashboard——登入後的第一個畫面——現在設計為在單一視圖中呈現帳戶狀態的完整概況。

顯示網站數量、今日事件總數和當前方案的統計卡片
AI 分析用量和每月 PV 的進度條（超過 80% 時琥珀色，超過 100% 時紅色）
快速操作：「View Heatmaps」、「Add Site」、「Upgrade」和「CLI Setup」

⌘ CLI 與 Skills 並排呈現

使用 HeatMapX 的兩種方式——終端機 CLI 和 Claude Code Skill——在雙欄佈局的單一頁面上均有說明文件。

CLI：從 npm install -g heatmapx 到 heatmapx analyze 的逐步說明
Claude Code Skill：使用 /plugin install heatmapx-skill@xtv-llc/heatmapx-cli 安裝，並直接從對話中呼叫 HeatMapX
範例指令以英文和日文同時顯示

$ 內建完整方案比較

Plan & Billing 頁面現在包含完整的 Free / Pro / Team / Enterprise 比較表，讓你可以在不離開儀表板的情況下查看選項並升級。

月付 / 年付切換（預設年付；年付相比月付有顯著折扣）。目前定價請參見定價頁面
當前方案標有綠色「Current」徽章
Pro 以橙色高亮作為推薦選項
Enterprise 連結至 heatmapx@xtv.co.jp 以進行直接聯繫

⚙ Settings 中的語言選擇

語言切換此前僅作為 header 中的雙狀態切換提供。現在也在 Settings 中以明確的單選選擇器呈現。變更即時生效並儲存在瀏覽器中。

即將推出

側邊欄底部的「Coming Soon」區塊預告了即將推出的功能：

功能	說明
🧪 A/B Tests	根據熱圖洞察，對文案和佈局變更進行一鍵 A/B 測試
✨ Dynamic UI	根據用戶屬性和行為模式調整 UI 的個人化引擎

其他改進

Sticky header：Logo、主題切換器和語言切換在捲動時保持可見
Sticky 側邊欄：捲動頁面內容時，導航始終可存取
登出已移位：從 header 右上角移至側邊欄底部（重要但低頻的操作下移）
向後相容：現有的 /dashboard 書籤仍會落在新的 Home 畫面——無需重定向

影響範圍

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

新佈局