固定左侧边栏与多页面仪表板布局

2026-06-05，我们将 heatmapx.com/dashboard 重建为完整的 Supabase/Vercel 风格固定侧边栏布局（作为当天发布的仪表板全量重设计的结构续篇）。

新布局

┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX                  [☀💻🌙]  [JA/EN]    │ ← 固定头部
├──────────────┬───────────────────────────────────────┤
│ 菜单          │                                       │
│ ▸ ⌂ 首页     │   首页                                │
│   ▤ 热图     │                                       │
│               │   站点 / 今日事件 / 套餐              │
│   ⌘ CLI&Skills│                                       │
│   $ 套餐&账单 │   AI 分析使用量 [████░]               │
│   ⚙ 设置     │   PV 使用量     [██░░░]               │
│               │                                       │
│ 即将上线      │   快速操作                            │
│   🧪 A/B 测试 │   [▤ 查看热图] [＋添加]              │
│   ✨ 动态 UI  │                                       │
├──────────────┤                                       │
│   退出登录    │                                       │
└──────────────┴───────────────────────────────────────┘

五个独立页面

路由	页面	内容
`/dashboard`	⌂ 首页	统计卡片（站点数 / 今日事件 / 当前套餐）、使用量进度条（AI 分析 / PV）、快速操作
`/dashboard/sites`	▤ 热图	已注册站点的表格列表，可从此处添加新站点
`/dashboard/cli`	⌘ CLI & Skills	终端 CLI 和 Claude Code Skill 的并排安装指南
`/dashboard/billing`	$ 套餐与账单	当前使用量摘要 + 完整套餐对比表（免费版 / Pro / Team / Enterprise）
`/dashboard/settings`	⚙ 设置	语言选择器（English / 日本語）——更多设置即将推出

变更内容

▤ Supabase 风格固定左侧边栏

所有五个主要导航项始终显示在左侧边栏，滚动时保持固定，可随时从任意位置跳转页面。

当前页面高亮：当前页面在菜单中有视觉强调
图标：每个菜单项都有视觉标识符
退出登录：固定在侧边栏底部，降低误触风险

⌂ 首页作为一览概览

/dashboard——登录后的第一个页面——现在设计为通过单一视图完整呈现账户状态。

显示站点数量、今日事件总数和当前套餐的统计卡片
AI 分析使用量和每月 PV 的进度条（超过 80% 变琥珀色，超过 100% 变红色）
快速操作：「查看热图」「添加站点」「升级套餐」和「CLI 设置」

⌘ 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
示例指令以英文和日文双语展示

$ 内置完整套餐对比

套餐与账单页面现在包含完整的免费版 / Pro / Team / Enterprise 对比表，可在不离开仪表板的情况下查看选项并升级。

月付 / 年付切换（默认年付；年付相较月付有显著折扣）。当前定价请参见定价页面
当前套餐以绿色「Current」徽章标注
Pro 以橙色高亮作为推荐选项
Enterprise 链接至 heatmapx@xtv.co.jp 进行直接联系

⚙ 设置中的语言选择

语言切换此前仅作为头部的两态切换提供。现在也在设置页面以显式单选选择器呈现。更改立即生效并保存在浏览器中。

即将上线

侧边栏底部的「即将上线」区域展示下一批功能：

功能	描述
🧪 A/B 测试	基于热图洞察，一键对文案和布局变更进行 A/B 测试
✨ 动态 UI	根据用户属性和行为模式自适应 UI 的个性化引擎

其他改进

固定头部：滚动页面内容时，Logo、主题切换器和语言切换保持可见
固定侧边栏：滚动时导航始终可访问
退出登录位置调整：从头部右上角移至侧边栏底部（重要但低频的操作下沉）
向后兼容：现有 /dashboard 书签会落在新首页上——无需重定向

影响范围

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

新布局