CQRS 基于任务的 UI 架构

Architecture

CQRS 基于任务的 UI 架构图，前端将用户意图捕获为显式命令，异步提交并进行乐观更新，当读模型同步时通过 WebSocket 接收实时确认。该模板模拟用意图驱动命令替代 CRUD 表单的现代 UI 模式，实现具有最终一致性的响应式用户体验。推荐给在 CQRS 后端上构建响应式前端的团队。

下载 .fz 文件

完整 FlowZap 代码

UI { # Task-Based UI
n1: circle label:"User Intent"
n2: rectangle label:"Render Task Form"
n3: rectangle label:"Capture User Intent as Command"
n4: rectangle label:"Submit Command"
n5: rectangle label:"Show Optimistic Update"
n6: circle label:"UI Updated"
n1.handle(right) -> n2.handle(left)
n2.handle(right) -> n3.handle(left) [label="PlaceOrder"]
n3.handle(right) -> n4.handle(left) [label="Command DTO"]
n4.handle(bottom) -> CommandAPI.n7.handle(top) [label="POST /commands"]
n4.handle(right) -> n5.handle(left) [label="Optimistic"]
n5.handle(right) -> n6.handle(left)
}
CommandAPI { # Command API
n7: rectangle label:"Deserialize Command"
n8: rectangle label:"Authorize User"
n9: diamond label:"Idempotency Check"
n10: rectangle label:"Dispatch to Handler"
n11: rectangle label:"Return 202 Accepted"
n12: rectangle label:"Return 409 Duplicate"
n7.handle(right) -> n8.handle(left)
n8.handle(right) -> n9.handle(left)
n9.handle(right) -> n10.handle(left) [label="New"]
n9.handle(bottom) -> n12.handle(top) [label="Duplicate"]
n10.handle(right) -> n11.handle(left) [label="Queued"]
n11.handle(top) -> UI.n5.handle(bottom) [label="202"]
n10.handle(bottom) -> Domain.n13.handle(top) [label="Process"]
}
Domain { # Domain Model
n13: rectangle label:"Load Aggregate"
n14: rectangle label:"Execute Business Logic"
n15: rectangle label:"Persist State Change"
n16: rectangle label:"Emit Events"
n13.handle(right) -> n14.handle(left) [label="Current State"]
n14.handle(right) -> n15.handle(left) [label="New State"]
n15.handle(right) -> n16.handle(left) [label="Committed"]
n16.handle(bottom) -> QuerySync.n17.handle(top) [label="Async"]
}
QuerySync { # Query Synchronization
n17: rectangle label:"Update Read Model"
n18: rectangle label:"Push via WebSocket"
n19: rectangle label:"Invalidate Cache"
n17.handle(right) -> n18.handle(left) [label="Real-Time"]
n18.handle(top) -> UI.n6.handle(bottom) [label="Confirmed Update"]
n17.handle(right) -> n19.handle(left)
}

为什么需要这个工作流？

Traditional CRUD forms map poorly to complex business operations—a "Place Order" action involves validation, payment, inventory, and shipping, not a simple database row update. Task-based UIs capture user intent as explicit commands, enabling optimistic updates, async processing, and real-time confirmation via WebSocket.

工作原理

Step 1: The UI renders a task form that captures user intent (e.g., "Place Order" not "Update Row").
Step 2: User intent is serialized as a command DTO and submitted to the Command API.
Step 3: The UI immediately shows an optimistic update while the command processes asynchronously.
Step 4: The Command API checks idempotency, authorizes the user, and dispatches to the domain.
Step 5: After processing, the read model is updated and a WebSocket push confirms the real state.
Step 6: Cache invalidation ensures subsequent reads reflect the latest state.

替代方案

Traditional CRUD forms are simpler but cannot express complex business intent. Polling for updates adds latency. Server-Sent Events are simpler than WebSockets for one-way updates. This template shows the full task-based UI with optimistic updates.

Key Facts

Template Name	CQRS 基于任务的 UI 架构
Category	Architecture
Steps	6 workflow steps
Format	FlowZap Code (.fz file)