Skip to content

refactor(site): 节点主色统一从 CSS 变量读取,消除双数据源 - #8

Merged
Coolgiserz merged 1 commit into
mainfrom
fix/node-color-single-source
Sep 6, 2026
Merged

Coolgiserz merged 1 commit into
mainfrom
fix/node-color-single-source

Conversation

@Coolgiserz

Copy link
Copy Markdown
Owner

右栏图注用 var(--gold) 等 CSS 变量着色,而 vis-network 节点此前硬编码 '#f5b301' —— 这是两份独立定义。当前值恰好一致,但任改其一都会导致图注
与图谱颜色对不上,属于迟早漂移的设计缺陷。改为 JS 从 CSS 变量读取。

  • 新增 cssVar():getComputedStyle 读取 + trim + fallback
  • fallback 保留原色值:CSS 未加载时(Pages 资源 404)不会退回 vis-network 默认蓝,避免「所有节点一个色」这种更难排查的现象
  • border 色与顶层类型特殊色 '#2f9e54' 仍硬编码:图注不描述边框,CSS 里 也没有对应变量,为其新增变量反而增加维护面

注:本次改动不声称修复了「图注与实际颜色不一致」的报告现象——静态分析
(节点数据 / groupColors / CSS 变量 / 线上内容 / 运行时覆盖 / graphOptions) 九项均未复现该问题,需实机渲染或截图才能定位。本次只是消除双数据源隐患。

验证(Node 模拟,输入取自真实构建产物 site/assets/index.css 的变量值):

  • 五个 group 主色与对应 CSS 变量逐一相等
  • 五色互不相同(无串位)
  • CSS 变量全部缺失时 fallback 五项均生效
  • 返回值带前导/尾随空格时 trim 正常(浏览器常见行为)

右栏图注用 var(--gold) 等 CSS 变量着色,而 vis-network 节点此前硬编码
'#f5b301' —— 这是两份独立定义。当前值恰好一致,但任改其一都会导致图注
与图谱颜色对不上,属于迟早漂移的设计缺陷。改为 JS 从 CSS 变量读取。

- 新增 cssVar():getComputedStyle 读取 + trim + fallback
- fallback 保留原色值:CSS 未加载时(Pages 资源 404)不会退回
  vis-network 默认蓝,避免「所有节点一个色」这种更难排查的现象
- border 色与顶层类型特殊色 '#2f9e54' 仍硬编码:图注不描述边框,CSS 里
  也没有对应变量,为其新增变量反而增加维护面

注:本次改动不声称修复了「图注与实际颜色不一致」的报告现象——静态分析
(节点数据 / groupColors / CSS 变量 / 线上内容 / 运行时覆盖 / graphOptions)
九项均未复现该问题,需实机渲染或截图才能定位。本次只是消除双数据源隐患。

验证(Node 模拟,输入取自真实构建产物 site/assets/index.css 的变量值):
- 五个 group 主色与对应 CSS 变量逐一相等
- 五色互不相同(无串位)
- CSS 变量全部缺失时 fallback 五项均生效
- 返回值带前导/尾随空格时 trim 正常(浏览器常见行为)
@Coolgiserz
Coolgiserz merged commit 8c120dd into main Sep 6, 2026
1 check passed
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