VPS Monitor 改造记：Token 用量 + 访问分析 + GA 风格 UI

第 3 页：GA 风格 UI 改造

设计目标

对齐 Google Analytics 的设计哲学：极致降噪、数据优先、结构清晰。

图表主题文件 chart-theme.ts

// GA-style chart theme: unified tokens for all recharts usage

export const CHART_COLORS = [
  "var(--chart-1)",
  "var(--chart-2)",
  "var(--chart-3)",
  "var(--chart-4)",
  "var(--chart-5)",
  "var(--chart-6)",
  "var(--chart-7)",
  "var(--chart-8)",
];

export const gridProps = {
  strokeDasharray: "3 3",
  stroke: "var(--chart-grid)",
  vertical: false as const,
};

export const axisProps = {
  tick: { fontSize: 10, fill: "var(--chart-axis)" },
  tickLine: false as const,
  axisLine: false as const,
};

export const tooltipStyle = {
  contentStyle: {
    background: "var(--card)",
    border: "1px solid var(--card-border)",
    borderRadius: 8,
    fontSize: 11,
    padding: "6px 10px",
    boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
  },
  labelStyle: { color: "var(--muted-foreground)", fontSize: 10, marginBottom: 2 },
  itemStyle: { fontSize: 11 },
};

配色变量（globals.css）

:root {
  /* Base (infographic flat) */
  --background: #f7f8fa;
  --foreground: #1a1d21;
  --card: #ffffff;
  --border: #e4e7ec;
  --muted: #f1f3f5;
  --muted-foreground: #6b7280;

  --primary: #3b5bdb;
  --primary-foreground: #ffffff;
  --destructive: #e03131;
  --success: #2f9e44;
  --warning: #e8590c;
  --info: #1971c2;

  /* Infographic flat palette */
  --chart-1: #4A90D9;
  --chart-2: #50BFA5;
  --chart-3: #F5A623;
  --chart-4: #D96A6A;
  --chart-5: #9B7EDE;
  --chart-6: #5BC0DE;
  --chart-7: #E8A5C0;
  --chart-8: #7A8B99;
  --chart-grid: #eef0f2;
  --chart-axis: #9aa3ad;

  --card-border: #e4e7ec;
  --card-hover-border: #c9cfd6;
}

Badge 修复（浅底深字）

const badgeVariants = {
  default:     "bg-[#e7f0fc] text-[#1e5ba8]",
  secondary:   "bg-[#f1f3f5] text-[#4b5563]",
  success:     "bg-[#e6f6ec] text-[#1e7d3a]",
  warning:     "bg-[#fdf1e3] text-[#a8500a]",
  destructive: "bg-[#fdeaea] text-[#b02525]",
  info:        "bg-[#e7f0fc] text-[#1e5ba8]",
  outline:     "border border-[var(--border)] text-[var(--foreground)] bg-transparent",
};