停止拖拽方框：通过 VPasCode 和 AI 聊天机器人生成 C4 图表

@startuml OnlineBanking_Context
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title 系统上下文：在线银行平台

Person(customer, "银行客户", "查看账户、转账、支付账单")
Person(admin, "后台管理员", "管理用户、监控交易")

System(banking, "在线银行平台", "通过 Web 和移动设备提供互联网银行服务")

System_Ext(coreLegacy, "核心银行主机", "处理交易、维护总账")
System_Ext(email, "电子邮件服务", "发送通知和账单")
System_Ext(oauth, "OAuth2 提供商", "处理身份和认证")

Rel(customer, banking, "使用", "HTTPS/WebSocket")
Rel(admin, banking, "管理", "HTTPS")
Rel(banking, coreLegacy, "读取/写入", "REST/SOAP")
Rel(banking, email, "发送警报", "SMTP/API")
Rel(banking, oauth, "认证", "OIDC")

@enduml

@startuml OnlineBanking_Containers
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title 容器图：在线银行平台

Person(customer, "银行客户")

System_Boundary(banking, "在线银行平台") {
    Container(webapp, "Web 应用", "React + Node.js", "用于基于浏览器的银行服务的单页应用")
    Container(mobile, "移动应用", "Flutter", "iOS/Android 原生体验")
    Container(api, "API 网关", "Kong", "路由请求、限流、认证验证")
    Container(service, "账户服务", ".NET 8", "账户与余额的业务逻辑")
    Container(cache, "会话缓存", "Redis", "存储 JWT 令牌与会话状态")
    ContainerDb(db, "账户数据库", "PostgreSQL", "客户账户、余额、交易")
    ContainerQueue(events, "事件总线", "RabbitMQ", "异步交易通知")
}

System_Ext(oauth, "OAuth2 提供商")
System_Ext(legacy, "核心银行主机")

Rel(customer, webapp, "使用", "HTTPS")
Rel(customer, mobile, "使用", "HTTPS")
Rel(webapp, api, "调用", "REST/JSON")
Rel(mobile, api, "调用", "REST/JSON")
Rel(api, oauth, "验证令牌", "OIDC")
Rel(api, service, "路由至", "gRPC")
Rel(service, cache, "读取/写入会话", "TCP")
Rel(service, db, "查询", "SQL/TCP")
Rel(service, events, "发布", "AMQP")
Rel(service, legacy, "同步总账", "SOAP")

@enduml

@startuml AccountService_Components
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

title 组件图：账户服务 (.NET 8)

Container(api, "API 网关", "Kong")
ContainerDb(db, "账户数据库", "PostgreSQL")
ContainerQueue(events, "事件总线", "RabbitMQ")

Component(auth, "认证中间件", "ASP.NET 过滤器", "验证 JWT，提取用户上下文")
Component(controller, "AccountController", "ASP.NET API", "/accounts 的 REST 端点")
Component(domain, "AccountDomainService", "C# 类库", "余额计算、转账规则")
Component(repo, "AccountRepository", "EF Core", "数据访问、查询优化")
Component(publisher, "EventPublisher", "MassTransit", "发布 TransactionCompleted 事件")

Rel(api, auth, "传递请求")
Rel(auth, controller, "转发已认证请求")
Rel(controller, domain, "调用业务逻辑")
Rel(domain, repo, "查询/持久化")
Rel(repo, db, "执行 SQL")
Rel(domain, publisher, "发出领域事件")
Rel(publisher, events, "发布", "AMQP")

@enduml

# GitHub Action 示例片段
- name: 渲染 C4 图表
  run: |
    vp-cli render -i docs/architecture/c4/*.puml 
                  -o docs/architecture/output/ 
                  -f svg --c4-layout auto