工作流界面设计
设计图：workflow-winui-concept-v1.png
使用 imagegen 技能与内置 image_gen 工具生成，类型为 ui-mockup。生成后依据设计图的工作区布局实现原生 WinUI 控件。
实际界面与验收
以上截图来自 WinUI 客户端的实际渲染，使用独立测试数据与未登录会话，不包含用户的真实工作流或账号。画布内节点保持原有样式；节点库、工具栏、属性面板与输出区依据设计图重新排版。窄窗口自动收起导航栏，属性面板改为可开关的浮层。
2026-10-11 验收：Windows x64 Release 编译零警告、零错误；16 项界面与交互检查全部通过，覆盖深浅主题、宽窄布局、节点搜索、重命名持久化、输出折叠、缩放、鼠标平移、40 次图形/代码切换、账号头像同步、网页自动化和隐藏窗口执行。
实现约定
- 沿用现有 NavigationView、登录用户和头像同步机制。
- 顶部保留一个新建入口；工作流选择与重命名、保存、校验、运行和停止形成紧凑工具栏。
- 节点库包含功能分类、图标、插件来源、搜索和真实数量。颜色使用 WinUI 的主题文字强调色。
- 图形与 C# 代码使用分段按钮，保留两种编辑内容及已有的串行诊断处理。
- 画布内节点、端口、连线继续沿用既有实现。缩放状态和适应画布按钮停靠在画布下角。
- 属性面板展示节点来源、输入参数及执行设置。窄窗口采用可收起的浮层。
- 运行输出与诊断停靠在画布和属性面板下方；数量、空状态、清空输出和折叠按钮使用真实状态。
- 页面中的标题、示例用户、节点与日志仅作为设计图示意，软件展示实际工作流与账号数据。
- 所有页面面板、文字和控件使用 WinUI ThemeResource，适配深色、浅色与高对比主题。
最终生成提示词
工具模式：内置 image_gen；不使用 CLI/API 回退。
Use case: ui-mockup.
Asset type: a high fidelity Windows 11 WinUI 3 desktop application UI design reference for implementing an existing C# workflow editor named XFEWorkflow.
Primary request: Create one polished, practical, front-on 1920x1200-style landscape design screenshot of the Chinese XFEWorkflow workflow editing page. Use authentic native WinUI Fluent Design: matte charcoal Mica shell, subtle one-pixel separators, modest 8px corners, Segoe UI and Microsoft YaHei typography, restrained user system accent warm coral for selected controls and primary Run action, Fluent outline icons, realistic density. It should look like a finished desktop engineering app.
Layout:
- Keep a standard expanded Windows NavigationView on the far left, with a hamburger, selected 工作流 row with slim accent indicator, then 内置浏览器, 插件, 插件 Space, 运行记录, 凭据与输入, 日志. Bottom user avatar and username XFEstudio, then 设置. Preserve native NavigationView styling, no invented web sidebar.
- Native title bar at top: application icon, XFEWorkflow, and a signed-in avatar/name XFEstudio toward the right; minimize/maximize/close controls at far right.
- Main content starts with 工作流 in 26px semibold with a quiet single-line subtitle 编排你的自动化任务. On the right a modest + 新建工作流 button.
- Compact workflow command strip underneath: a dropdown showing AI 消息通知, a small rename icon, and aligned 保存, 校验, a primary accent 运行 button with play icon, 停止 and an ellipsis. Do not create separate new-graph and new-code buttons.
- Large unified editor workspace underneath, occupying most of the page. Left node library about 230px wide: header 节点库, small node count, search field 搜索节点或插件, then functional group headers 流程, 逻辑控制, 网络与服务. Neat draggable palette rows with small square Fluent icon, node name, plugin label in theme-aware coral text. Example rows 开始 / 内置节点, 结束 / 内置节点, 条件分支 / 内置节点, 遍历集合 / 内置节点, HTTP 请求 / 插件 · HTTP, AI 对话 / 插件 · AI, 企微通知 / 插件 · 企业微信. Only library rows get this new organization.
- Center editor is the largest region, bordered, with a compact top toolbar: adjacent rounded segmented buttons 图形化 and </> C# 代码 (graph selected), breadcrumb 主图, undo/redo, and a property-panel toggle. Canvas shows a large dark blue charcoal grid and a centered simple automation graph 开始 → HTTP 请求 → AI 对话 → 企微通知 → 结束 arranged across two neat rows. CRITICAL preserve established in-canvas card styling: rectangular dark blue-gray cards with slightly rounded corners, dark slate header, white node title, subdued small capability ID, blue execution ports and connectors, green data ports. Do not redesign the cards into colorful icons, pictorial illustrations, or light cards. Keep their standard existing engineering-editor aesthetic.
- Right inspector about 280px wide: 节点属性 header and small close button, selected HTTP 请求 title, plugin attribution, labeled native WinUI fields 名称, 请求地址, 请求方法 GET dropdown, 超时（秒） with 30, 重试次数 with 0; compact helpful explanations. No colorful marketing cards.
- Docked bottom output below canvas and inspector, not underneath the entire navigation: tabs 运行输出 and 诊断 with count badges, a small few readable monospaced log rows with time and restrained success color. Footer status 已保存, 节点 5, subtle zoom controls - 85% + and fit icon near lower canvas edge.
Composition: coherent 8px spacing, excellent hierarchy, comfortably readable Simplified Chinese labels exactly as given, ample useful canvas area, no giant empty header, no redundant always-visible workflow name input, no circular radio controls, no scrollbars on canvas, no orange entire panels, no gradients or neon, no browser chrome, no laptop/desk photo, no annotations outside the app, no promotional text. Native controls and all UI must be realistically implementable in WinUI. This is an implementation reference, not a marketing poster.