Skip to content

style(dashboard): 收窄并统一仪表板模块间垂直间距至 12px#254

Merged
ThreeFish-AI merged 1 commit into
feature/1.x.xfrom
ThreeFish-AI/unify-module-gaps
May 27, 2026
Merged

style(dashboard): 收窄并统一仪表板模块间垂直间距至 12px#254
ThreeFish-AI merged 1 commit into
feature/1.x.xfrom
ThreeFish-AI/unify-module-gaps

Conversation

@ThreeFish-AI

Copy link
Copy Markdown
Owner

概要

将仪表板各功能模块之间的垂直间距统一收窄至 12px,并以单一 CSS 变量 --gap-section 作为权威间距源(Single Source of Truth),消除散落在样式与行内属性中的魔法数字,提升后续维度调优的可维护性与视觉一致性。

背景与动机

仪表板此前模块间距值散乱(24px / 16px / 12px / 5px 并存),既造成视觉上「松紧不一」的割裂感,也增加了未来微调时的修改面与回归风险。本次将「模块间」(inter-module) 间距收敛为单一变量,使整页节奏一致、改动可一处生效。

变更内容

  • 新增 CSS 变量:在 :root 中引入 --gap-section: 12px,作为模块间垂直间距的唯一权威源。
  • 替换硬编码间距:以 var(--gap-section) 替换以下选择器中的 margin-bottom
    • .kpi-grid(24px → 12px)
    • .charts-grid / .charts-grid-2(16px → 12px)
    • .time-range-bar(24px → 12px)
    • .model-calling-card(5px → 12px)
  • 抽取行内样式:新增 .model-token-card class,替换 Token 用量 卡片上的 style=\"margin-bottom:12px\" 行内属性,与同级模块对齐管理方式。

实现说明

  • 正交分解:本次仅收敛「模块间」间距,刻意保留 .card-title.detail-identity-row#chart-tooltip-title 等「组件内部」(intra-component) 的 margin,避免越界改动影响卡片自身排版。
  • 范围克制:纯 CSS / HTML class 调整,未触碰任何 JS 渲染逻辑、数据流或图表 API,回归风险极低。
  • 影响面:仅 src/coding/proxy/server/dashboard.py 单文件,+10 / -6。

🤖 Generated with Claude Code
Co-Authored-By: Aurelius Huangthreefish.ai@gmail.com

- 新增 CSS 变量 --gap-section: 12px 作为模块间距单一事实源
- 将 .time-range-bar / .kpi-grid / .model-calling-card / .charts-grid /
  .charts-grid-2 / .model-token-card 的 margin-bottom 统一指向该变量
- 消除底部 Token 用量卡片的 inline style,改用语义化 class

🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist)
Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
@ThreeFish-AI ThreeFish-AI merged commit 47f4851 into feature/1.x.x May 27, 2026
6 checks passed
@ThreeFish-AI ThreeFish-AI deleted the ThreeFish-AI/unify-module-gaps branch May 27, 2026 12:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant