# 系统架构全景

<div class="text-sm mt-2">

```
┌──────────────────────────────────────────────────────────────────┐
│                    Frontend (React + Vite + TypeScript)           │
│                                                                  │
│   ┌──────────┐  ┌──────────────┐  ┌──────────┐  ┌───────────┐  │
│   │ 项目画廊  │  │  工作台面板   │  │ 结果预览  │  │ 风格编辑器 │  │
│   └──────────┘  └──────────────┘  └──────────┘  └───────────┘  │
│                        │ Zustand 状态管理                         │
│                        │ react-router v7 路由                     │
└────────────────────────┼─────────────────────────────────────────┘
                         │ HTTP (REST API) + WebSocket
┌────────────────────────┼─────────────────────────────────────────┐
│                    Backend (Go + Gin + Eino)                      │
│                        │                                         │
│   ┌────────────────────▼─────────────────────────────────────┐   │
│   │              Handler Layer (Gin Router)                   │   │
│   │         JWT 中间件 · 请求校验 · 错误处理                   │   │
│   └────────────────────┬─────────────────────────────────────┘   │
│                        │                                         │
│   ┌────────────────────▼─────────────────────────────────────┐   │
│   │              Service Layer (业务逻辑)                      │   │
│   │  ┌─────────────────────────────────────────────────────┐ │   │
│   │  │         Eino compose.Graph Pipeline                  │ │   │
│   │  │  PromptOptimizer → AssetGenerator → QualitySupervisor│ │   │
│   │  │                              ↓                       │ │   │
│   │  │                        FormatAdapter                 │ │   │
│   │  └─────────────────────────────────────────────────────┘ │   │
│   │  ┌──────────┐  ┌───────────┐  ┌──────────┐              │   │
│   │  │ 项目管理  │  │ 风格系统   │  │ 用户认证  │              │   │
│   │  └──────────┘  └───────────┘  └──────────┘              │   │
│   └──────────────────────────────────────────────────────────┘   │
│                        │                                         │
│   ┌────────────────────▼─────────────────────────────────────┐   │
│   │              Data Layer (数据访问)                         │   │
│   │   GORM + SQLite        sync.Map 缓存                     │   │
│   └──────────────────────────────────────────────────────────┘   │
│                                                                  │
│   外部依赖：DeepSeek LLM · Stability AI · 七牛云 Kodo           │
└──────────────────────────────────────────────────────────────────┘
```

</div>