feat(workbench): 插件素材与画布视觉 - 完成 Eagle 外部来源与节点可读性适配
This commit is contained in:
76
docs/design/canvas-node-visual-contrast.mdx
Normal file
76
docs/design/canvas-node-visual-contrast.mdx
Normal file
@@ -0,0 +1,76 @@
|
||||
# 画布节点可读性设计沉淀:节点与图片创作面板
|
||||
|
||||
> 范围:无限画布中的节点外壳、节点内容空态、节点标题和图片创作面板。
|
||||
> 目标:节点在浅色、深色,以及点阵/线稿/空白画布背景上都能被快速识别和操作。
|
||||
> 状态:已实现首版,浏览器回归待确认。
|
||||
|
||||
## 1. 问题定义
|
||||
|
||||
画布节点可能直接落在白色或黑色背景上。只依赖全局卡片表面会造成两个问题:
|
||||
|
||||
- 节点边界消失,空态内容看起来像画布的一部分。
|
||||
- 图片创作面板的“将使用默认模型与参数”提示、输入区和操作控件缺少稳定的表面层级。
|
||||
|
||||
这不是生成逻辑或参考图尺寸逻辑的问题,因此本次只调整视觉契约,不改变节点数据、生成参数、定位和交互流程。
|
||||
|
||||
## 2. 设计决策
|
||||
|
||||
### 2.1 节点使用画布主题 token
|
||||
|
||||
`canvasThemes`(画布主题 token)中的 `node` 语义负责节点自身的可读性:
|
||||
|
||||
- `fill`:节点主体表面。
|
||||
- `panel`:节点内部面板和空态子表面。
|
||||
- `edge`:节点与画布之间的低对比边界。
|
||||
- `shadow` / `hoverShadow`:静止与悬停时的空间层级。
|
||||
- `text` / `muted` / `faint`:正文、辅助说明和占位内容。
|
||||
|
||||
浅色和深色主题必须成对提供这些 token。节点不能回退到全局 `--card-surface`,因为它不知道当前画布背景和节点层级。
|
||||
|
||||
### 2.2 节点外壳与空态
|
||||
|
||||
`CanvasNode`(画布节点外壳)使用 `node.fill`、`node.edge` 和主题阴影。选中状态继续使用现有 active stroke,边界只用于提供识别度,不作为装饰性竖线或强调色。
|
||||
|
||||
`CanvasNodeContent`(节点内容渲染)的绘图空态在节点内部增加一个轻量子表面和图标边界,使“打开绘图”在白色和黑色背景下都能被识别;真实媒体内容不增加额外遮罩,不改变原始比例。
|
||||
|
||||
### 2.3 图片创作面板同步适配
|
||||
|
||||
`CanvasNodePromptPanel`(图片/视频/文本/音频创作面板)把面板变量绑定到同一组画布主题:
|
||||
|
||||
- 面板表面使用 `node.panel`,边界使用 `node.edge`,阴影使用 `node.shadow`。
|
||||
- 模型选择器、参考素材、放大编辑和参数折叠按钮使用 `toolbar.itemHover` 与 `toolbar.activeBg`,不再依赖只适合深色背景的白色 hover。
|
||||
- 展开编辑 Modal 使用相同的表面、边界和阴影,避免节点内面板与放大面板产生两套视觉语言。
|
||||
- “将使用默认模型与参数”仍是状态说明,不改变模型解析或生成默认值。
|
||||
|
||||
## 3. 状态与边界
|
||||
|
||||
| 状态 | 处理 | 目的 |
|
||||
| --- | --- | --- |
|
||||
| 默认 | `node.panel` + `node.edge` + `node.shadow` | 与点阵、线稿或空白背景分离 |
|
||||
| 悬停 | `hoverShadow`,控件使用 `activeBg` | 提示可操作性,不改变布局 |
|
||||
| 选中 | 沿用 active stroke | 与节点选中态保持一致 |
|
||||
| 禁用/无内容 | 沿用 `faint` 和既有空态文案 | 不伪造生成成功或配置状态 |
|
||||
| 展开编辑 | Modal 复用同一套主题 token | 保持放大编辑与节点内编辑一致 |
|
||||
|
||||
本次不调整画布背景色、节点尺寸、面板定位、参考图尺寸选项、生成参数和资源同步逻辑。
|
||||
|
||||
## 4. 实现地图
|
||||
|
||||
- `web/src/lib/canvas-theme.ts`:维护浅色/深色节点边界和阴影 token。
|
||||
- `web/src/components/canvas/canvas-node.tsx`:应用节点外壳和节点标题的主题表面。
|
||||
- `web/src/components/canvas/canvas-node-content.tsx`:应用绘图空态子表面。
|
||||
- `web/src/components/canvas/canvas-node-prompt-panel.tsx`:注入图片创作面板和放大编辑面板的主题变量。
|
||||
- `web/src/styles/globals.css`:维护面板控件 hover 与尺寸调整手柄的唯一规则。
|
||||
|
||||
## 5. 验证与待回归
|
||||
|
||||
已完成:
|
||||
|
||||
- `git diff --check` 通过。
|
||||
- Impeccable 受限扫描未发现本次新增的反模式;扫描到的渐变文字、宽高过渡和既有布局规则位于其他历史区域。
|
||||
|
||||
待确认:
|
||||
|
||||
- 浏览器中分别切换浅色/深色主题,检查图片创作面板默认、悬停、选中和展开编辑状态。
|
||||
- 在点阵、线稿和空白背景下检查节点边缘、空绘图态和“将使用默认模型与参数”的对比度。
|
||||
- 本项目按规则未自动运行 TypeScript、构建或测试;提交前只做了静态 diff 检查。
|
||||
Reference in New Issue
Block a user