82 lines
3.4 KiB
Markdown
82 lines
3.4 KiB
Markdown
|
# 全局架构图 — 文生图提示词
|
|||
|
|
|
|||
|
|
你是一位技术架构可视化专家。请根据以下描述，生成一张 **gen2d 全局系统架构图**，风格：**简洁现代的技术架构图，深色背景，使用清晰的方框和箭头表示组件与数据流**。
|
|||
|
|
|
|||
|
|
## 标题
|
|||
|
|
|
|||
|
|
gen2d 系统架构总览
|
|||
|
|
|
|||
|
|
## 技术栈标注（顶部或底部小字）
|
|||
|
|
|
|||
|
|
Go + Gin + Eino / Vite + React + TypeScript + zustand / SQLite / 七牛云 Kodo
|
|||
|
|
|
|||
|
|
## 架构层次（自上而下）
|
|||
|
|
|
|||
|
|
### 第一层：前端层 (Frontend)
|
|||
|
|
|
|||
|
|
放置一个圆角矩形框，标题为 **Frontend (Vite + React + TypeScript)**，内部包含：
|
|||
|
|
|
|||
|
|
- **Pages (页面层)**：Login, Register, HomePage, ProjectDetailPage, ResultPage，以上下文无关方式排列
|
|||
|
|
- **State & Router (横跨栏)**：
|
|||
|
|
- 左侧标注 **react-router-dom v6** (SPA Routing)
|
|||
|
|
- 右侧标注 **zustand** (7 stores: auth, project, projectList, task, generation, theme, toast)
|
|||
|
|
- **Components (组件层)**：StyleSelector, CustomTagsEditor, PromptEditor, GenerateForm, ProgressBar, AssetPreview
|
|||
|
|
|
|||
|
|
在 Frontend 框内用水平虚线或分组分隔三个子层（页面 → 路由/状态 → 组件），展示分层关系。
|
|||
|
|
|
|||
|
|
### 第二层：通信层
|
|||
|
|
|
|||
|
|
在 Frontend 和 Backend 之间画一个横向箭头带，标注：
|
|||
|
|
|
|||
|
|
- **HTTP REST /api/v1/***（实线）
|
|||
|
|
- **WebSocket /api/v1/tasks/:taskId/ws**（虚线）
|
|||
|
|
- 旁边小字标注 "JWT Bearer Token 认证"
|
|||
|
|
|
|||
|
|
### 第三层：后端层 (Backend)
|
|||
|
|
|
|||
|
|
放置一个圆角矩形框，标题为 **Backend (Go + Gin + Eino)**，内部自左向右分三层：
|
|||
|
|
|
|||
|
|
#### 3a. Handler 层 (最左)
|
|||
|
|
- Gin Router 入口
|
|||
|
|
- 薄层：参数绑定 + 校验 + 调用 Service
|
|||
|
|
- 关键 Handler：health, auth, project, generate, prompt, storage
|
|||
|
|
|
|||
|
|
#### 3b. Service 层 (中间，核心)
|
|||
|
|
- 标题：**Eino compose.Graph (管线编排)**
|
|||
|
|
- 四个节点从上到下，箭头连接：
|
|||
|
|
1. **PromptOptimizer** (提示词优化 + 风格合并)
|
|||
|
|
2. **AssetGenerator** (AI 推理 API 调用)
|
|||
|
|
3. **QualitySupervisor** (视觉模型质检)
|
|||
|
|
4. **FormatAdapter** (格式转换 + spritesheet 打包)
|
|||
|
|
- 在第 3 步右侧标注分支逻辑：pass → FormatAdapter；fail → 回到 PromptOptimizer (最多 3 次)
|
|||
|
|
- 在管线框下方放置 **中间件栏**：Logger (slog), JWT Auth, Panic Recovery
|
|||
|
|
|
|||
|
|
#### 3c. Model 层 (最右)
|
|||
|
|
- 数据模型：PipelineInput, PipelineState, PipelineOutput
|
|||
|
|
|
|||
|
|
### 第四层：数据与基础设施层 (底部)
|
|||
|
|
|
|||
|
|
放置三个并排的框：
|
|||
|
|
|
|||
|
|
1. **SQLite** — 标注 5 张表：user, project, project_style, task, asset；附带 ER 关系简写 "1→N cascade"
|
|||
|
|
2. **七牛云 Kodo (对象存储)** — 标注存储路径 `${user}/${project}/${task}/output/` 和 CDN URL 签名访问
|
|||
|
|
3. **LLM API (外部)** — 标注 OpenAI 兼容接口 `/v1/images/generations` 和 Chat Completions
|
|||
|
|
|
|||
|
|
在前端和后端之间画出与这三个组件的连线，标注数据流方向。
|
|||
|
|
|
|||
|
|
## 色彩建议
|
|||
|
|
|
|||
|
|
- **Frontend 区域**：蓝紫色调 (#4A90D9 或类似)
|
|||
|
|
- **Backend 区域**：青绿色调 (#00B4AB 或类似)
|
|||
|
|
- **管线节点**：用不同深浅区分四个阶段
|
|||
|
|
- **数据层**：灰色调 (#6B7280 或类似)
|
|||
|
|
- **外部服务**：橙色 (#F59E0B 或类似)
|
|||
|
|
- **箭头**：实线 = 同步调用，虚线 = 异步/回调
|
|||
|
|
|
|||
|
|
## 附加约束
|
|||
|
|
|
|||
|
|
- 不要使用过于花哨的 3D 效果或阴影
|
|||
|
|
- 文字要清晰可读，字体大小不小于图中主体元素的 1/20
|
|||
|
|
- 请用英文标注组件名称（与代码库一致），中文可用于辅助说明
|
|||
|
|
- 整体比例适合 16:9 宽屏展示
|