Lv, Qi fbfb820853 feat(frontend): enhance workflow visualizer layout, report page UI and add pending task doc

- Refactor WorkflowVisualizer to use rank-based grid layout for better readability of parallel tasks.
- Improve edge rendering in visualizer with highlighting logic and curved lines.
- Update ReportPage tabs styling to be more distinct and card-like.
- Implement collapsible sidebar for Workflow Status visualizer with vertical text support.
- Add formatNodeName utility for cleaner task name display.
- Fix CSS issues in index.css.
- Add documentation for pending task: adding display_name to workflow DTOs.

2025-11-28 00:30:57 +08:00

2.3 KiB

Raw Blame History

[Pending] 为工作流任务添加人类可读名称 (Display Name)

背景

目前，前端在显示任务名称时使用的是任务 ID（例如 analysis:news_analysis，或者是经过简单格式化后的 news analysis）。然而，真正的人类可读名称（例如 “新闻分析”）是定义在 AnalysisTemplate 配置中的，但这些名称并没有通过工作流事件传播到 WorkflowOrchestrator 或前端。

目标

确保前端可以在工作流可视化图表（Visualizer）和标签页（Tab Headers）中显示模板中定义的本地化/人类可读的任务名称。

需要的变更

1. Common Contracts (`services/common-contracts`)

文件: src/workflow_types.rs 或 src/messages.rs
行动: 更新 TaskNode 结构体（用于 WorkflowStateSnapshot），增加一个 display_name (Option<String>) 字段。
行动: (可选) 如果我们需要实时更新也携带名称，可以更新 WorkflowTaskEvent，虽然对于静态拓扑来说，快照（Snapshot）通常就足够了。

2. Workflow Orchestrator Service (`services/workflow-orchestrator-service`)

文件: src/dag_scheduler.rs
行动: 在通过 add_node 添加节点时，接受一个 display_name 参数。
文件: src/workflow.rs
行动: 在 build_dag 函数中，遍历 template.modules 时：
- 提取 module_config.name（例如 “新闻分析”）。
- 在创建 DAG 节点时传递这个名称。

3. Frontend (`frontend`)

文件: src/types/workflow.ts
行动: 更新 TaskNode 接口以匹配新的后端 DTO。
文件: src/components/workflow/WorkflowVisualizer.tsx & src/pages/ReportPage.tsx
行动: 如果 node.display_name 存在，则优先使用它；否则回退到使用 formatNodeName(node.id)。

替代方案 / 临时方案 (纯前端)

由于前端已经（通过 useAnalysisTemplates hook）获取了 AnalysisTemplate，我们可以：

从 URL 参数中获取当前的 templateId。
查找对应的模板定义。
创建一个映射表：module_id -> module_name。
在 ReportPage 和 WorkflowVisualizer 中使用此映射表来动态解析名称。

优先级

中等 - 能够显著改善用户体验 (UX)，但现有功能不受影响。

2.3 KiB Raw Blame History Unescape Escape