监控台｜数据看板（免费版）

设计意图

数据看板的敌人是颜色过多。这套主题只允许一个高亮色，其余全部是灰阶，数字用等宽字体保证位数对齐，卡片间距统一 12px，一屏能塞下 12 个指标而不显拥挤。

这套主题的名字叫「监控台」，核心关键词是信息密度。它把视觉重心放在冷灰底 + 单一高亮这一组关系上，其余元素一律退让。换句话说，它不是在「加设计」，而是在有意识地做减法。

三个关键取舍

第一，颜色只留两组。 一组是背景与文字的强对比，一组是唯一强调色。所有需要区分层级的地方，优先用字重和间距解决，而不是再引入一个新颜色。这样做的代价是首屏看起来偏「素」，收益是无论你往里放什么内容，界面都不会失控。

第二，间距系统是 4 的倍数。 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64，只有这八个数。所有组件的内外边距都必须从这里面取值。这一条看起来死板，实际效果是全站节奏统一——你不会遇到「这里很松，那里很挤」的问题。

第三，移动端先设计。 桌面端的留白容易骗人，手机上才是真实考验。这套主题先在 375px 宽度下把标题、正文、图片、按钮全部排一遍，确认不溢出、不换行错位，再往桌面端放大。放大只是加留白，不改结构。

技术实现

主题引擎把配置拆成「色板 + 排版 + 布局 + 特效」四组，全部通过 CSS 变量下发。切换主题时不需要重新构建，只需要替换一组变量值，页面即时生效。

// 主题配置的核心结构（节选自 packages/shared/src/theme-engine.ts）
export interface ThemePalette {
  bgBase: string;
  bgSurface: string;
  inkStrong: string;
  inkBase: string;
  lineBase: string;
  accent: string;
}

export function applyTheme(palette: ThemePalette): void {
  const root = document.documentElement;
  // ⚠️ 值必须是「裸 RGB 通道串」，消费端统一用 rgb(var(--theme-x)) 包起来
  root.style.setProperty('--theme-bg-base', hexToChannels(palette.bgBase));
  root.style.setProperty('--theme-ink-base', hexToChannels(palette.inkBase));
  root.style.setProperty('--theme-accent', hexToChannels(palette.accent));
}

上面这段代码有一个容易忽略的细节：写入的必须是裸通道串（形如 15 23 42），而不是 #0F172A。因为消费端统一写成 rgb(var(--theme-bg-base))，如果它写的是完整十六进制颜色，整条声明会在计算值阶段被判为非法，然后静默失效——背景消失、文字看不见，但控制台一声不响。

/* 正确的消费方式：变量 + 通道串 + rgb() 包裹 */
.card {
  background-color: rgb(var(--theme-bg-surface, 250 250 250));
  border: 1px solid rgb(var(--theme-line-base, 229 231 235));
  color: rgb(var(--theme-ink-base, 15 23 42));
}