feat(desktop/studio): Tier1 编排画布主题化 + 节点精修(产品灵魂打磨)

react-flow 此前 colorMode 写死 dark、背景/连线/控件全用库默认,换肤下不协调。改为:
- colorMode 绑定当前主题 → 控件/连线/手柄/选区自动随亮暗切换。
- Background 点阵色、MiniMap 遮罩随主题;隐藏库水印(proOptions.hideAttribution,更干净)。
- index.css 精修 react-flow:控件(细边/圆角/themed hover)、连线(中性描边+选中紫)、迷你图边框,对齐设计系统。
- TypedNode:卡面落到表面色(ink-850)、选中环用 brand 令牌(替硬编码紫)、加 hover 描边、手柄themed。
- 工具栏/调色板/检查器已用新 Button + 令牌类,自动一致。

tsc + 生产构建通过;桌面端已 HMR。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-06-25 12:47:48 +08:00
parent 94f04bd204
commit 760ca06667
3 changed files with 41 additions and 7 deletions
+31
View File
@@ -89,3 +89,34 @@ body {
}
/* 输入控件随主题(color-scheme 由 :root/.dark 设定,控件自动继承) */
/* react-flow 画布主题化:控件/连线/迷你图与设计系统对齐(colorMode 已处理大半,此处精修) */
.react-flow__controls {
box-shadow: none;
border: 1px solid rgb(var(--line));
border-radius: 8px;
overflow: hidden;
}
.react-flow__controls-button {
background: rgb(var(--ink-900));
border-bottom: 1px solid rgb(var(--line));
color: rgb(var(--slate-400));
}
.react-flow__controls-button:hover {
background: rgb(var(--ink-800));
}
.react-flow__controls-button svg {
fill: currentColor;
}
.react-flow__edge-path {
stroke: rgb(var(--slate-600));
stroke-width: 1.5;
}
.react-flow__edge.selected .react-flow__edge-path,
.react-flow__edge:focus .react-flow__edge-path {
stroke: #8b5cf6;
}
.react-flow__minimap {
border: 1px solid rgb(var(--line));
border-radius: 8px;
}