共同设计底座
这里是设计系统规范首页。官网首页方案用于展示对外品牌与能力；工作区启动页用于开始任务与进入画布。
本规范适用于新增组件、业务模块和完整页面。浅色玻璃、科技蓝操作、深色文字、圆润轮廓与线性图标共同构成混灵画布的设计语言。信息清晰、操作可辨和状态准确优先于材质表现。
所有新模块引用共享主题、语义 Tokens 和基础组件。不同业务可以调整内容、布局与密度；颜色语义、文字层级、控件状态和交互规则保持一致。
视觉、材质与布局规则
| 维度 | 共用规则 |
|---|---|
| 颜色 | 主要操作使用科技蓝；危险操作使用错误红；成功、警告、错误和信息使用各自语义色。节点类型色用于身份，不能代替运行状态。图表使用共享分类色和阈值色。 |
| 文字 | 引用共享字体、字号、字重与行高；标题、正文、辅助说明和代码各有层级。数据采用等宽数字；单位、统计范围和时间口径明确显示。 |
| 间距与尺寸 | 以 4 px 为基础单位，采用已有间距档位。常用控件高度为 28 / 36 / 44 px；同排控件对齐。文档独立模块之间使用 32 px 间距，窄屏使用 24 px；由父容器 gap 统一控制，不叠加子模块外边距。密度由容器统一指定，不能逐个压缩字号或留白。 |
| 圆角 | 使用共享圆角档位，内层与外层结合留白匹配。操作按钮默认沿用共享胶囊；卡片文字按钮可用 .btn.rounded 引用 --radius-sm（12px），仅改变形状，保留 sm=28px、md=36px、lg=44px 尺寸与状态；图标按钮沿用圆形。输入、卡片、节点和浮层遵循各自组件变体。 |
| 表面与层级 | 卡片、控件、对话、节点和浮层使用共享表面变量；密集数据采用稳定浅色 --surface-data。不在内部反复叠加模糊、高光或背景照片。浮层复用层级规则，原生 dialog 顶层须独立核对。 |
| 连线 | 工作区与第06版官网引用 connection-tokens.css 的颜色、透明度、选中高亮及细流光参数；主线保持静态，端口使用以 80 px 为基准的局部绘制视口，不对整条线叠加 blur。主线与管口同为 2.4 px，这是几何契约，不能单独覆写线宽。输出绿色、输入蓝色表示方向；静态连线表示关系，流光表示演示光效。 |
| 信息密度 | data-density="compact|standard|comfortable"；表格最小行高 36 / 48 / 56 px，上下留白 6 / 12 / 16 px；含控件或长内容时允许增高。触屏优先舒适密度。 |
| 响应式 | 组件宽度低于 620 px 时表单转单列、工具条换行；表格在自身容器滚动。公共目录和嵌套网格的可收缩轨道使用 minmax(0,1fr)，子分区及卡片子项使用 min-width:0；标准小卡宽度受容器的 max-width:100% 约束；内部表格、图表与代码在各自容器滚动，不能以固定最小宽度撑开整个页面。工作区固定侧栏占位，悬停侧栏覆盖；右侧实际宽度不足 760 px 时切换对话／画布，首页与输入栏按自身宽度重排。工作区低于 560 px 时固定侧栏使用图标栏。断点是布局规则，不能把普通 CSS 变量当作可直接运行的媒体查询。 |
| 绘制与标签 | 雷达资料卡在自身容器不超过280px时将指标标签改为静态两列、说明面板单列，保留全部指标，仅隐藏装饰连线。WebGL与SVG装饰使用独立裁切边界；官网v7保留光带原画布位置和overscan采样域，只限制装饰父容器水平绘制，不裁切交互卡片、菜单或焦点。不能以隐藏页面溢出替代响应式适配。 |
| 动效 | 短反馈 120 ms、普通变化 180 ms、面板 260 ms、持续运行 1600 ms；复用共享曲线。动效表达状态与空间变化；尊重减少动效、减少透明度和无 blur 支持的回退。 |
交互与状态规则
默认、悬停、按下、选中、键盘焦点、禁用和加载分别表达。选中后仍有悬停与按下反馈；焦点独立可见。禁用操作不触发动作；加载时说明处理状态并防止重复提交。同一区域保留一个主要操作，删除操作采用危险语义。表单主要动作保留图标和文字的内容最小宽度，空间不足时整体换行，不能被flex压窄后使动作文字越出按钮。
数据与表单须覆盖首次为空、筛选无结果、加载中、失败、无权限、校验错误和过期数据等适用状态。失败说明原因并给出重试或恢复入口；保留条件和已输入内容，明确保存成功与本地模拟的区别。
通用可折叠侧边导航使用展开与图标栏两态，收起后保留导航图标、当前项、数量角标和账户入口；只隐藏视觉标签，不删除可访问名称。展开宽 240 px、图标栏宽 72 px，所在布局按当前宽度为导航占位；提示在悬停与键盘聚焦时显露，Esc 关闭。查看可折叠侧边导航规范。
工具导航与动态面板示例提供节点选择器、模板库、节点库三个入口，AI属于节点类型。左侧悬浮Rail在宽容器为内容面板占位、窄容器覆盖，底部Dock向上展开。节点选择器保留五类图标与标题，点击直接加入本地示例；节点库提供11个具体命名、已配置的节点，覆盖基础、系统、数据提取、AI、结果输出，系统类含ERP、CRM、MOM。节点库搜索与类型筛选按AND关系组合，计数与无结果提示同步，不提供假状态或虚构禁用项；模板库保留状态演示。图库复用资源家族的液态玻璃媒体预览卡，媒体上方标题为16–24px半粗文字、副标题与节点类型为12px，标题区和卡壳按内容自然增高。左下蓝色胶囊显示“节点 · N”，模板为3、节点库为1，节点来源保留在搜索与配置中；右下44px白色玻璃圆箭头复用 .btn.icon-only.lg.on-media，不显示操作文字，可访问名称及原生提示包含“使用＋名称”。封面只选择，独立圆箭头使用后才添加。底部模板与节点卡使用共用演示照片填满封面区，真实接入时替换为资源自己的封面，不标为实际节点或流程截图；左侧保留流程与节点配置示意。名称、类型、数量及筛选配置完整保留。底部图库最多四列，内容自然增高、内部滚动。成功添加冒泡 toolpaneluse，节点库另传 nodeType及title、summary、source、operation配置，插入示例保留这些信息。各实例的搜索、类型、选择与滚动在切换或关闭再打开后保留；生命周期、焦点与共享动效规则继续适用。全部配置与插入为本地示意，不表示已接通或执行真实业务。查看工具导航与动态面板规范。
项目、模板及资源卡片按自身内容容器宽度和最小可读卡宽自动减列，侧栏占位后也重新排布。原大封面卡、资源分类与项目预览演示保留，普通卡及资源列表封面保持16:10比例；正文和操作自然增高，不用 transform:scale 缩小整卡。新增媒体预览共享变体保持476:388内嵌媒体比例，上方标题为16–24px半粗文字、副标题为12px，标题区和外壳按内容自然增高，不固定高度；窄容器保持媒体比例，文字自然换行。左下复用蓝色 .status-label 胶囊显示整数节点数量“节点 · N”，右下动作统一为44px .btn.icon-only.lg.on-media 白色玻璃圆箭头，不显示操作文字。表面与圆形动作采用共享液态玻璃材质，预览、数量与使用按钮是兄弟元素，使用按钮的可访问名称及原生提示包含“使用＋资源名称”。资源页选择只更新所属实例，使用发出 resourcecarduse（key、label）并明确本地示例；工具图库沿用自己的 toolpaneluse 与配置适配。查看资源预览卡片规范。
运行记录的总体状态与同次运行的步骤状态必须一致：成功记录的已执行步骤显示完成，等待处理、未开始、失败和暂停归属各自对应的记录；示例与真实接入均不能同时显示整体成功与尚未完成的执行步骤。任务进度、资源用量与分类占比含义不同：进度说明完成量，用量说明容量占用，占比说明分类构成。未知进度不展示虚构百分比；变化箭头的好坏由业务含义判断。
固定节点设计预览保留完整节点规格，在具名、可Tab聚焦且焦点可见的内部区域滚动；仍可选中、切换状态和通过更多操作配置。静态预览说明及主体可访问名称不宣称拖动或方向键移动，相关操作进入完整工作区体验。画布端口未连接时显示加号；连接后显示吸附根部与呼吸光点，不再保留加号。光点仍承载原有端口按钮，输出光点可点击或拖动继续连接，输入光点用于接收；暂停光效与减少动态效果保留稳定光点。
可访问性与公共行为
修订1.1.3：独立目录保留一个H1，家族分区H2，嵌入预览的页面标题使用H3并保留视觉配方。原生disabled、fieldset及aria-disabled均阻止动作；动态隐藏/禁用及时关闭浮层。控件删除或禁用后保留可用焦点，aria-controls只指向存在的目标；旧异步响应不能覆盖输入法组合或当前数据。真实浏览器、原生键盘、触屏与读屏证据缺失时保持未验收。
菜单使用方向键、Home/End和单一Tab入口，Tab关闭菜单；Popover可用Esc关闭并恢复触发焦点；Tooltip在触发器悬停/聚焦时出现，提示本身不接受键盘焦点、不承载操作；允许指针进入阅读且可按Esc关闭。日期仅一个Tab入口，节点可用方向键移动，聊天折叠入口同步控制同一面板。画布修改与保存状态联动，保存仅限本页会话。
使用有名称的原生控件和正确的标签关系；键盘可到达操作，焦点可辨。分析组件的工具栏复用 .ds-select-field，标签与关联字段作为同一项整体换行；增强原生选择器后保留控件名称与标签关系。状态不能只靠颜色表达，须配合文字或图标；错误与字段关联，异步消息使用适当的 status / alert。
连线流光与端口呼吸不代表真实执行状态；业务运行状态须另有文字或图标反馈。拖动、缩放或尺寸调整期间暂停连线装饰；页面隐藏、离屏、手动暂停与减少动效保留静态主线及可操作端口。第06版官网的流光为有限时长触发演示。强制颜色模式使用系统色。相关源码与隔离测试不能替代浏览器中的实际视觉验收。
正文对比度目标为 4.5:1，重要图形与控件边界目标为 3:1；默认字段复用 --field-surface / --field-border，装饰白边不能代替功能边界；玻璃表面须结合实际背景验收。长文本、低高度、放大、窄屏、强制颜色和减少动效均需检查。新模块复用公共下拉、弹层定位、步骤状态、表格查询与指标读数能力。
新模块如何扩展
- 查找：先查现有组件的职责、变体与样板，确认是否已覆盖需求。
- 组合：优先使用现有组件；业务词汇、内容与数据放在业务层。
- 扩展：已有组件只缺少尺寸、密度或布局时增加受控变体，共用交互核心。
- 新增：确有新职责时定义新组件，引用共享 Tokens；具有通用价值的新样式先纳入共享体系。
- 登记与验证：补齐文档、状态和示例，确定唯一分类，完成源码与实际视觉、交互检查，并标明未验证项。
继承顺序：基础 Tokens → 语义 Tokens → 共享组件与变体 → 业务组合 → 完整页面。局部装饰与业务布局可由模块定义；公共颜色、尺寸、状态和行为不能各自另起一套。
新增组件的必填说明
修订1.1.3 · 2026-10-09。查看 本轮质量验收结果、 完整性修复报告、状态与成熟度台账 和 版本记录。当前71个公开模块、16个独立规范；文档可访问不等于完成浏览器验收。
| 项目 | 必须写清 |
|---|---|
| 用途与边界 | 解决什么问题；适用与不适用场景；与已有组件如何分工。 |
| 规范与变体 | 引用的 Tokens、尺寸、密度、材质、布局以及允许扩展的范围。 |
| 状态与行为 | 可用状态、键盘操作、焦点、错误恢复、长内容和窄屏策略。 |
| 接入与示例 | 参数、事件、数据口径、依赖顺序；可运行示例及模拟边界。 |
| 维护与验收 | 唯一分类、维护源文件、共享依赖、版本、验证证据与未验证事项。 |
规范维护依据：开发接入规范、设计语言说明。默认主题的 Tokens 导出由构建生成，不直接编辑；规范变更须同步共享实现和示例。