后端工作流自动化流程编排低代码【免费下载链接】elsa-coreThe Workflow Engine for .NET项目地址https://gitcode.com/gh_mirrors/el/elsa-core点击查看免费下载导读本文基于 doc/studio/design/system.mdStatus: Approved baseline2026-09-01 更新系统讲解 Elsa Studio 的界面设计系统它是一套专门为“配置、诊断、运维工作流基础设施”而生的技术管理界面规范核心设计语言是“明确的运维上下文explicit operational context”。你将学到四个已批准落地的参考模式——连接工作区Connection Workspace、密钥详情工作区Secret Detail Workspace、运营仪表盘Operational Dashboard与状态机编排StateMachine Authoring——以及它们的 MudBlazor 组件选型、间距节奏、语义色板和可在仓库源码中逐行验证的实现细节。设计方向让“有效状态”与“持久化记录”永远可分Elsa Studio 是供人员配置、诊断和操作工作流基础设施的技术管理工作台。界面的气质应该是“冷静、精确、运维可信”密度足够支撑专家工作同时让状态、来源和可用操作一目了然。涉及的领域概念包括配置、部署、运行时状态、校验、诊断、生命周期、密钥secrets、修订版本revisions以及“有效记录effective”与“持久化记录persisted”的区别。签名级设计模式是明确的运维上下文当展示的数据可能来自多个来源时界面必须区分“当前生效的来源effective source”与“正在查看的记录record”。持久化记录的状态绝不允许看起来像在描述一条部署自有的有效记录。这一点在源码中有直接印证。连接编辑页 Edit.razor 中EffectiveSourceLabel的计算逻辑严格区分四种情形第 399-401 行被遮蔽Shadowed且配置自有的记录显示 “Database”数据库覆盖为有效源被遮蔽且非配置自有的显示 “Deployment”未遮蔽时按IsConfigurationOwned分别显示 “Deployment” 或 “Database”。对应地OutcomeStatusLabel第 402-413 行则区分Archived、Needs attention、Available for sign-in、Not available for sign-in、Ready to activate与Draft — not available六种语义状态并映射到Color.Default / Error / Success / Warning / Info第 414-425 行——这正是设计文档“颜色只用于表达语义不用于装饰”的落地。设计基础MudBlazor 优先CSS 兜底设计系统确立了四条基础原则优先使用 MudBlazor 组件与主题令牌theme tokens仅当组合与响应式工具类无法表达所需行为时才添加自定义 CSS保留 Elsa 既有的字体排印与图标族颜色只用于传达品牌、状态、警告、成功与破坏性意图不做装饰性使用对高级与运维关注点偏好渐进式披露progressive disclosure。调色板语义即颜色统一使用配置好的 MudBlazor 主题而非硬编码颜色PrimaryElsa 导航、选中态与常规主操作Info部署自有或解释性上下文Success有效与校验通过的状态Warning已启用但未生效、被遮蔽或需要关注的状态Error破坏性操作与校验失败Default/neutral结构、非激活态、元数据与边框。深度与表面管理界面只用“边框”分层管理类界面采用borders-only仅边框的深度策略页面画布使用主题背景工作区与摘要表面MudPaper Outlinedtrue提示MudBlazor 语义化 alert 表面避免装饰性阴影、嵌套卡片堆叠与剧烈的表面层级变化分隔线divider只在职责或操作严重度变化处使用。间距4px 基准 8px 主节奏以 MudBlazor 的 4px 单位为实现基准采用 8px 主节奏与如下刻度间距用途4px图标或微文本微调8px相关内联控件、紧凑堆叠间隙12px8px 过紧时的普通字段或页面堆叠间隔16px卡片内边距、移动端面板内缩、标准网格槽宽24px桌面工作区内缩与主要分隔32px独立页面区块之间需要时的分隔内边距保持对称除非内容本身要求不对称不要让网格或表单控件贴到 outlined 工作区边界上。模式一Connection Workspace连接工作区批准的参考方案为 2026-07-29 选定的 Concept 2 “Connection Workspace”其完整实现位于 Edit.razor。页面构成复杂连接编辑使用MudContainer MaxWidthMaxWidth.Large返回操作以自然宽度呈现并align-self-start源码第 19 行Classalign-self-start连接身份与持久化运维上下文集中在一个紧凑的 outlined 头部中源码第 30-52 行标题 元信息 Effective:/OutcomeStatus状态 chips允许头部状态 chips 与操作换行而不互相碰撞MudStack Rowtrue WrapWrap.Wrap全局来源或遮蔽警示放在标签栏上方使其跨任务保持可见源码第 53-105 行在MudTabs之前渲染MudAlert处理“被遮蔽”“配置自有只读”两类情形并提供Make this Database record effective、Create full Database override、Manage existing Database record等行动按钮。标签Tabs分隔为General / Provider / Provisioning / Diagnostics对应设计文档中的 Configuration、Provisioning linking、DiagnosticsKeepPanelsAlivetrue让自定义编辑器保留瞬态状态源码第 110 行共享面板容器使用TabPanelsClasspa-4 pa-sm-6窄屏 16pxsm 断点以上 24px 响应式内缩源码第 113 行两栏布局使用MudGrid Spacing416px 槽宽所有标签体共享同一内缩不只给初始激活的标签加 padding。信息层级Configuration 拥有提供方设置与“校验后保存”动作Provisioning 拥有用户创建、身份匹配与角色分配源码ConnectionPolicyEditor组件第 177-184 行Diagnostics 拥有测试、预览、校验结果与生命周期动作源码第 190-302 行含ConnectionOperations、校验错误/警告清单、Lifecycle 面板辅助性 “At a glance” 表面可概括有效来源、记录来源、有效性、配置策略与最近测试但保持次要地位。运维状态显式标注有效来源Effective: Deployment/Effective: Databasechips被遮蔽记录的生命周期与有效性以 “Stored” 前缀标注测试信息标注为存储记录数据配置自有的记录只读不得宣传不可用的生命周期动作测试ConfigurationOwnedConnection_IsClearlyReadOnly断言了这一点见 ConnectionEditorTests.cs草稿连接省略仅持久化才有的诊断与生命周期状态IsNew时仅渲染 General 与 Provisioning 标签第 188 行条件破坏性生命周期动作与常规配置分离Lifecycle 面板中Disable、Archive、Restore as disabled使用Color.Erroroutlined 按钮。行动号召CTA每个任务只保留一条清晰的主路径新建连接时提供 “Save as draft” 与主色 “Save and activate”已有连接按激活条件提供 “Save changes” / “Activate” / “Check and activate” / “Retry activation”源码第 305-351 行当动作是切换标签而非保存时标签要如实说明如 “Review provider settings”源码第 504-512 行ProviderRepairActionLabel可切换到 “Review secret binding”信息型 callout 中解释性文案堆叠在动作上方并留 8px 间隙不要把按钮直接附加在句尾。模式二Secret Detail Workspace密钥详情工作区批准的参考方案为 2026-07-30 实现的 Secrets 详情页完整代码见 Secret.razor。该模式适用于“不可变身份 可编辑元数据 生命周期上下文 敏感操作”组合的详情页。页面构成MudContainer MaxWidthMaxWidth.LargeMudStack Spacing3且py-4源码第 73-74 行返回按钮align-self-start源码第 75-80 行资源图标、显示名、技术名、状态、类型、存储与版本集中在紧凑 outlined 头部源码第 97-124 行MudAvatar ColorColor.PrimaryMudChip系列Status/TypeName/StoreName/Version主色只用于资源身份与常规动作success/warning/error 保留给生命周期语义技术标识符可能很长使用等宽字体.secret-technical-name的font-family: ui-monospace, ...overflow-wrap: anywhere源码第 24-28 行头部 chips 可换行。任务分离Overview 与 Rotation 任务风险/认知负荷不同使用 outlined 标签工作区Overview 承载身份、描述、元数据与生命周期摘要Rotation 承载凭据替换与可选过期KeepPanelsAlivetrueTabPanelsClasspa-4 pa-sm-6保证表单瞬态值跨任务导航保留、每个面板收到相同响应式内缩源码第 127-132 行MudGrid Spacing4桌面 8/4 主-辅分栏窄屏单列堆叠源码第 134-135 行md8与md4。运维上下文提供唯一的次要 “At a glance” outlined 表面状态、当前版本、存储、过期源码第 211-233 行在表单之前解释轮换结果绝不暗示存储的密钥值可以被取回或显示源码第 266-268 行Elsa Studio never displays the stored secret value.Rotation 面板输入框为InputType.Password变更控件与评估动作所需的当前版本、过期上下文配对“Current version: VersionText” 与 “Rotate secret” 主按钮同行源码第 311-318 行常规轮换保持视觉主位但封闭在自己的任务内。破坏性动作直接命名动作“Revoke secret”避免泛化的 “Danger zone” 标题源码第 239 行标题为Revoke secret与常规变更按任务、间距和错误语义边框而非装饰性背景分离——.secret-danger-panel用color-mix混入 30% 错误色生成边框源码第 54-56 行在破坏性按钮正上方解释运维后果源码第 241-243 行Revocation changes the secrets lifecycle state and may interrupt workflows that depend on it.按钮保持自然宽度并需要确认后才执行。响应式与主题行为窄屏下元数据列、支撑上下文、日期/时间控件与动作组堆叠且无横向滚动.secret-data-grid在max-width: 40rem时切换为单列源码第 62-70 行短动作标签单行保留技术名与状态 chips 允许换行全部使用主题令牌与 outlined 表面使同一结构在浅色/深色模式下无需页面级颜色覆盖即可工作需在桌面与移动宽度下分别验证 Overview 与 Rotation包括长技术名、焦点顺序、时间禁用先于日期的行为Disabled(_rotationExpiresDate null)源码第 306 行与语义生命周期颜色。模式三Operational Dashboard运营仪表盘批准的参考方案为 2026-07-31 选定、2026-08-01 实现的 Concept C “Health Timeline”。应用于同时包含当前健康度、时序行为、近期工作、优先级发现与诊断的运营总览页。实现分散于 Elsa.Studio.Workflows.Dashboard 与 Elsa.Studio.Dashboard 两个模块。阅读顺序页面组织顺序为健康 → 趋势 → 近期活动与关注 → 诊断对应运维人员从“定位”到“调查、下钻”的顺序不要把矮的空态面板放在无关控件的长堆叠旁——行高不得在另一列制造无法解释的空白执行趋势保持全宽便于时间与结果序列对比图表高度有界安静的数据不得产生大块空卡片。运维健康条主工作流指标放在一个全宽 outlined 表面中命名为 “Operational health”而非六个互不相连的卡片DashboardWorkflowMetricsWidget.razor 第 16-18 行宽屏六个内联指标格Running、Completed、Faulted、Suspended、Avg duration、Needs attention由安静的主题令牌分隔线隔开随空间减小换行为三列、两列、一列dashboard-operational-health-metrics的响应式布局保留语义图标、数值、区间说明RangeCaptionLast hour / Last 7 days / Last 24 hours、可访问标签AriaLabel ${Label}: {Value}. {Caption}以及有意义指标的直接导航DashboardNavigationTargetMapper.ForMetric(running|faulted|suspended)success/warning/error/info 只用于运维含义中性零状态保持 default除非零本身传达健康含义如metrics.Faulted 0 ? Color.Error : Color.Default第 10 行。活动与支撑上下文桌面 8/4 分栏近期工作流活动为主needs-attention 发现与工作流热点为支撑栏窄屏按此顺序堆叠诊断渲染为桌面两个等宽 outlined 面板、窄屏单列堆叠诊断源计数、stale/error 信号与 drill-through 动作保持紧凑不在仪表盘上显示原始日志内容DashboardNeedsAttention.razor 用MudList按优先级排序、最多取 8 条每项仅消息 严重度 chip 下钻链接。组件构成使用语义区域Metrics、Trend、Activity、Findings、支撑面板与诊断外壳shell拥有组合贡献模块保留各自的数据加载与内部状态演进外壳时保留遗留 widget 区域及其默认 DOM 契约仅当某区域显式请求时才添加布局包装专用趋势区域排在遗留主面板之前保证扩展兼容性不会破坏“健康→趋势”的层级。视觉方向保留 Elsa 技术化、冷静、borders-only 的表面语言与既有排印/图标族全仪表盘使用 MudBlazor 4px 基准与 8px 主节奏批准的原型为紧凑健康账本、下部全宽执行时间线、8/4 活动行与成对诊断避免装饰性渐变、阴影、营销化处理和过大的空面板。应避免的默认做法Defaults to Avoid应避免替代方案一屏不间断的设置表单任务导向标签同时保留编辑器状态来源/状态语义含糊的徽章使用 effective-versus-stored 的明确措辞标签内容贴边edge-to-edge共享响应式面板内缩普通设置页面套用仪表盘式卡片网格一个主表单 必要的支撑表面为间距写一次性 CSS优先使用 MudBlazor 间距与响应式工具类模式四StateMachine Authoring状态机编排状态机编排使用生命周期叙事lifecycle story作为主编辑面而不是把序列化定义暴露为主编辑对象。实现位于 src/studio/modules/Elsa.Studio.Workflows/DiagramDesigners/StateMachines。状态检查器自上而下阅读为ON ENTRY → ACTIVE → ON EXITStateMachineStateInspector.razor转换检查器自上而下阅读为WHEN → ONLY IF → THEN → TOStateMachineTransitionInspector.razor活动槽activity slot对 empty、configured、malformed、read-only 四种状态共用一张语义卡片原始 JSON 只是 “View definition” 下的修复证据永远不是默认编辑器StateMachineActivitySlot.razor空槽解释执行行为并提供一个直接添加动作 拖放已配置槽提供 Open、Replace、Clear未识别或格式错误malformed的定义在作者明确替换或清空之前必须保留破坏性状态/转换动作分离在详情与校验之下状态标识Initial、Current、Terminal使用文本徽章呈现不依赖颜色。上下文相关活动选择器Contextual activity picker打开宽幅命令面板对话框标题点名目标槽位StateMachineActivityPickerDialog.razor用WHEN、THEN、ON ENTRY、ON EXIT强化执行上下文并附一句简短时序说明搜索保持置顶可搜索名称、类型、类别与描述使用紧凑的 Suggested、Recent、All 与类别过滤器并带结果计数选择一行只更新详情面板不得变更工作流仅通过显式 Add 动作、Enter 或有意的双击提交对动作与生命周期槽推荐 Sequence 作为多活动组合路径但不要将其呈现为单独的巨型广告牌窄屏下过滤器折叠为横向条、详情堆叠在结果下方并保留键盘可访问的原生按钮。诊断内容规范Diagnostics Content诊断只包含可操作信息什么失败或面临风险、为什么发生、操作员接下来能做什么状态摘要与诊断详情必须使用同一个权威结果绝不允许显示 Diagnostics 视图无法解释的 valid/invalid 徽章源码中CurrentRevisionIsValid/Invalid直接由_connection.Validity驱动Edit.razor省略实现元数据如管理契约与后端版本除非它直接影响兼容性或建议动作支持类元数据放在渐进式披露之后或导出中成功结果保持简洁关联标识符correlation id等排障元数据作为次要、可复制的细节呈现而非主内容。评审清单Review Checklist设计文档要求每个按此系统实现的界面在交付前完成如下检查检查桌面与窄屏布局激活每一个标签不要只校验默认标签确认面板内边距能扛住 MudGrid 负槽宽negative gutters确认文本动作不会塌进相邻散文确认 read-only、draft、shadowed、archived、loading、validation-error 与 empty 状态确认自定义编辑器实例能在标签导航间存活这正是KeepPanelsAlivetrue的验收标准运行相关 bUnit 测试与完整模块测试套件。仓库中已有对应的 bUnit 测试作为验收模板例如 ConnectionEditorTests.cs 中的ConfigurationOwnedConnection_IsClearlyReadOnly、GenericEditor_UsesTheOutlinedDenseMudBlazorFieldTreatment等用例验证了“配置自有连接明确只读”“所有表单字段统一使用 Outlined Dense 处理”等设计约束。结语把设计系统当作可执行的约定Elsa Studio 的这套设计系统不是抽象的视觉偏好而是一组可对照源码验收的工程约定每个参考模式都对应仓库中已实现的真实页面连接编辑、密钥详情、运营仪表盘、状态机编排每条规范都可通过 bUnit 测试或 Razor 标记逐行验证。对希望扩展 Elsa Studio 的开发者而言遵循本规范意味着始终以 MudBlazor 组件与主题令牌为第一选择、用 effective-versus-stored 的明确语言呈现多源数据、用 borders-only 表面保持管理界面的冷静与可读性并在交付前跑通 Review Checklist 中的每一项。完整的设计基线文档见 doc/studio/design/system.md。赞分享后端工作流自动化流程编排低代码【免费下载链接】elsa-coreThe Workflow Engine for .NET项目地址https://gitcode.com/gh_mirrors/el/elsa-core点击查看免费下载相关推荐Sim 工作区 Settings 页面开发规范SettingsPanel 组件化架构与设计系统实践Sim 工作区 Settings 页面开发规范SettingsPanel 组件化架构与设计系统实践 本指南基于 Sim 开源仓库中的开发规范文档 .claud人工智能AI AgentAgent 工作流工作流自动化AI 应用后端前端桌面应用CLINginx UI 产品设计规范解读面向运维真实性的 WebUI 设计原则与工程实践Nginx UI 产品设计规范解读面向运维真实性的 WebUI 设计原则与工程实践 本篇文章以 Nginx UI 仓库内的产品设计文档 PRODUCT.md后端前端运维MCP 服务FinBERT预训练完全指南如何用320亿Token训练金融语言模型FinBERT预训练完全指南如何用320亿Token训练金融语言模型 FinBERT预训练完全指南为您揭秘如何利用320亿Token构建专业金融语言模型。作为人工智能大模型NLP预训练微调RAG金融科技上一篇Windows 安卓驱动一键搞定ADB Fastboot 安装工具保姆级教程下一篇.NET 日构建尝鲜指南在 runtime 仓库中通过 Dogfooding 消费每日构建的运行时与 SDK创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考