数据统计插件文档
样式修改指南
数据统计插件的 CSS 变量自定义和修改指南
变量分类
1. 区域表面（Section Surface）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--halo-data-statistics-section-surface | 主要区域背景色 | #ffffff | #111827 |
--halo-data-statistics-section-border | 主要区域边框色 | #dde3f5 | #1f2937 |
--halo-data-statistics-section-shadow | 主要区域阴影 | 0 4px 12px rgba(15, 23, 42, 0.05) | 0 6px 20px rgba(8, 47, 73, 0.35) |
2. 文本颜色（Text Colors）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--halo-data-statistics-title-color | 标题颜色 | #1b2559 | #e2e8f0 |
--halo-data-statistics-subtitle-color | 副标题颜色 | #5b647c | #94a3b8 |
--halo-data-statistics-text-primary | 主要文本颜色 | #1b2559 | #e2e8f0 |
--halo-data-statistics-text-secondary | 次要文本颜色 | #516079 | #cbd5f5 |
--halo-data-statistics-text-muted | 弱化文本颜色 | #5b647c | #94a3b8 |
--halo-data-statistics-time-text | 时间文本颜色 | #334155 | #cbd5f5 |
3. 徽章（Badge）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--halo-data-statistics-badge-bg | 徽章背景色 | #e8edff | rgba(37, 99, 235, 0.2) |
--halo-data-statistics-badge-text | 徽章文字颜色 | #2563eb | #93c5fd |
4. 卡片（Card）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--halo-data-statistics-card-surface | 卡片背景色 | #f6f8ff | #18223a |
--halo-data-statistics-card-border | 卡片边框色 | #dbe1fb | #25304a |
--halo-data-statistics-card-shadow | 卡片阴影 | none | none |
--halo-data-statistics-card-hover-border | 卡片悬停边框色 | #c2cbff | #3b4d75 |
--halo-data-statistics-card-hover-shadow | 卡片悬停阴影 | 0 6px 16px rgba(37, 99, 235, 0.1) | 0 6px 20px rgba(8, 47, 73, 0.45) |
--halo-data-statistics-card-icon-bg | 卡片图标背景色 | #e9efff | #1f2d4a |
--halo-data-statistics-card-icon-color | 卡片图标颜色 | #2563eb | #93c5fd |
5. 数字和标签（Numbers & Labels）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--halo-data-statistics-number-color | 数字颜色 | #1d4ed8 | #93c5fd |
--halo-data-statistics-label-color | 标签颜色 | #516079 | #cbd5f5 |
6. 活动区域（Activity）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--halo-data-statistics-activity-surface | 活动区域背景色 | #ffffff | #111827 |
--halo-data-statistics-activity-border | 活动区域边框色 | #dde3f5 | #1f2937 |
--halo-data-statistics-activity-shadow | 活动区域阴影 | 0 4px 12px rgba(15, 23, 42, 0.05) | 0 6px 20px rgba(8, 47, 73, 0.35) |
7. 指标（Metrics）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--halo-data-statistics-metric-surface | 指标背景色 | #f6f8ff | #18223a |
--halo-data-statistics-metric-border | 指标边框色 | #dbe1fb | #25304a |
--halo-data-statistics-metric-icon-bg | 指标图标背景色 | #e9efff | #1f2d4a |
--halo-data-statistics-metric-icon-color | 指标图标颜色 | #2563eb | #93c5fd |
--halo-data-statistics-metric-value-color | 指标数值颜色 | #1d4ed8 | #93c5fd |
--halo-data-statistics-metric-label-color | 指标标签颜色 | #516079 | #cbd5f5 |
8. 列表（List）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--halo-data-statistics-list-item-border | 列表项边框色 | #e1e7fb | #25304a |
9. 滚动条（Scrollbar）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--halo-data-statistics-scrollbar-thumb | 滚动条滑块颜色 | rgba(148, 163, 184, 0.4) | rgba(148, 163, 184, 0.45) |
--halo-data-statistics-scrollbar-thumb-hover | 滚动条滑块悬停颜色 | rgba(148, 163, 184, 0.65) | rgba(148, 163, 184, 0.65) |
10. 提示框（Tooltip）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--halo-data-statistics-tooltip-bg | 提示框背景色 | rgba(15, 23, 42, 0.85) | rgba(241, 245, 249, 0.9) |
--halo-data-statistics-tooltip-text | 提示框文字颜色 | #f8fafc | #0f172a |
图表统计变量说明
变量命名规则
所有变量以 --chartboard- 开头，后跟功能描述。
变量分类
1. 基础表面（Surface）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--chartboard-surface | 图表板背景色 | #ffffff | rgba(17, 24, 39, 0.92) |
--chartboard-border | 图表板边框色 | rgba(226, 232, 240, 0.8) | rgba(59, 130, 246, 0.18) |
--chartboard-shadow | 图表板阴影 | 0 10px 30px -20px rgba(15, 23, 42, 0.15) | 0 20px 40px -28px rgba(30, 64, 175, 0.35) |
2. 文本颜色（Text Colors）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--chartboard-title-color | 标题颜色 | #1f2937 | #e2e8f0 |
--chartboard-subtitle-color | 副标题颜色 | #6b7280 | #94a3b8 |
--chartboard-text-primary | 主要文本颜色 | #1f2937 | #e2e8f0 |
--chartboard-text-secondary | 次要文本颜色 | #4b5563 | #cbd5f5 |
--chartboard-text-muted | 弱化文本颜色 | #6b7280 | #9ca3af |
3. 卡片（Card）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--chartboard-card-bg | 卡片背景（支持渐变） | linear-gradient(...) | linear-gradient(...) |
--chartboard-card-border | 卡片边框色 | rgba(226, 232, 240, 0.8) | rgba(59, 130, 246, 0.25) |
--chartboard-card-shadow | 卡片阴影 | inset 0 1px 0 rgba(255, 255, 255, 0.6) | inset 0 1px 0 rgba(59, 130, 246, 0.12) |
--chartboard-card-hover-shadow | 卡片悬停阴影 | 0 12px 24px rgba(0, 0, 0, 0.1), ... | 0 12px 24px rgba(0, 0, 0, 0.3), ... |
4. 状态颜色（Status Colors）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--chartboard-loading-bg | 加载状态背景色 | rgba(241, 245, 249, 0.6) | rgba(30, 41, 59, 0.9) |
--chartboard-loading-border | 加载状态边框色 | rgba(148, 163, 184, 0.25) | rgba(59, 130, 246, 0.25) |
--chartboard-error-bg | 错误状态背景色 | rgba(254, 226, 226, 0.6) | rgba(248, 113, 113, 0.15) |
--chartboard-error-border | 错误状态边框色 | rgba(248, 113, 113, 0.45) | rgba(248, 113, 113, 0.35) |
--chartboard-error-color | 错误文字颜色 | #dc2626 | #fecaca |
5. 热力图（Heatmap）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--chartboard-heatmap-cell-bg | 热力图单元格背景色 | #e5e7eb | rgba(148, 163, 184, 0.25) |
--chartboard-heatmap-level-1 | 热力图等级1颜色 | #bfdbfe | rgba(191, 219, 254, 0.35) |
--chartboard-heatmap-level-2 | 热力图等级2颜色 | #93c5fd | rgba(147, 197, 253, 0.55) |
--chartboard-heatmap-level-3 | 热力图等级3颜色 | #60a5fa | rgba(96, 165, 250, 0.75) |
--chartboard-heatmap-level-4 | 热力图等级4颜色 | #2563eb | rgba(37, 99, 235, 0.85) |
--chartboard-heatmap-hover-shadow | 热力图悬停阴影 | rgba(37, 99, 235, 0.2) | rgba(37, 99, 235, 0.3) |
--chartboard-heatmap-cell-width | 热力图单元格宽度 | 14px | 14px |
--chartboard-heatmap-cell | 热力图单元格尺寸 | 12px | 12px |
6. 热力图提示框（Heatmap Tooltip）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--chartboard-heatmap-tooltip-bg | 提示框背景色 | #ffffff | rgba(15, 23, 42, 0.92) |
--chartboard-heatmap-tooltip-border | 提示框边框色 | rgba(148, 163, 184, 0.25) | rgba(148, 163, 184, 0.25) |
--chartboard-heatmap-tooltip-shadow | 提示框阴影 | 0 12px 24px rgba(15, 23, 42, 0.15) | 0 16px 28px rgba(15, 23, 42, 0.45) |
--chartboard-heatmap-tooltip-text | 提示框文字颜色 | #1f2937 | #e2e8f0 |
--chartboard-heatmap-tooltip-strong | 提示框强调文字颜色 | #111827 | #f8fafc |
--chartboard-heatmap-tooltip-span | 提示框普通文字颜色 | #4b5563 | #cbd5f5 |
7. 图例（Legend）
| 变量名 | 说明 | 默认值（亮色） | 默认值（暗色） |
|---|---|---|---|
--chartboard-legend-color | 图例文字颜色 | #4b5563 | #cbd5f5 |
--chartboard-legend-value-color | 图例数值颜色 | #6b7280 | #94a3b8 |
修改建议
- 同时修改亮色和暗色主题，确保两个主题的变量都更新
阴影格式
阴影值使用 CSS box-shadow 语法：
/* 格式：x偏移 y偏移 模糊半径 扩散半径 颜色 */
--halo-data-statistics-section-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);