Files

T

wonder 8ac039ef38 docs: 添加全局/后端/前端架构图生成提示词

新增三个多模态 AI 架构图提示词文件，分别对应全局系统架构、
后端分层与管线、前端组件树与数据流的可视图生成。

2026-05-25 20:52:59 +08:00

6.7 KiB

Raw Blame History

前端架构图 — 文生图提示词

你是一位前端架构可视化专家。请根据以下描述，生成一张 gen2d 前端架构详图，风格：现代前端技术文档风格，深色主题，组件树 + 数据流 + 路由三重展示。

标题

gen2d Frontend Architecture (Vite + React + TypeScript + zustand)

整体布局

分为三个主要区域，从左到右排列：

左区：路由与页面层 (Router & Pages)

Router 入口

react-router-dom v6 (BrowserRouter, SPA 模式)
ProtectedRoute 守卫组件 (检查 token，未登录重定向 /login)

页面路由表

用路由匹配图展示：

/                     → HomePage      (项目画廊)
/login                → LoginPage     (登录)
/register             → RegisterPage  (注册)
/projects/:projectId  → ProjectDetailPage (三栏工作台)
/projects/:projectId/tasks/:taskId → ResultPage (素材预览)

页面层级关系

App
 └─ Layout (Navbar + Outlet + ToastContainer)
     ├─ HomePage
     │   ├─ ProjectCard (画廊卡片) × N
     │   └─ CreateProjectModal (新建弹窗)
     ├─ ProjectDetailPage (三栏 CSS Grid)
     │   ├─ [左栏 260px] ProjectConfigPanel
     │   ├─ [中间 1fr]  GenerateForm + ProgressBar
     │   └─ [右栏 320px] TaskListPanel
     └─ ResultPage
         └─ AssetPreview

中区：状态管理 & 数据流 (State Management)

zustand Stores (7 个)

用 7 个卡片网格展示，每个卡片包含 Store 名称、核心状态字段、主要 Action：

Store	核心 State	主要 Actions	消费组件
auth	user, token, isAuthenticated	login, register, logout	Layout, ProtectedRoute, LoginPage
projectList	projects[], loading	loadProjects, createProject, deleteProject	HomePage
project	projectId, name, style, draftStyle, draftName, hasUnsavedChanges	loadProject, startEditing, updateDraft, commitDraft, discardDraft	ProjectConfigPanel, ProjectDetailPage
task	prompt, assetType, taskStyle, params, enableAI, optimizedPrompt	setters, runOptimize, reset	GenerateForm
generation	taskId, stage, progress, status, retryCount, assets[], error	submit, reset	ProgressBar, GenerateForm, ResultPage
theme	mode (light/dark)	toggle	Layout (全局主题切换)
toast	toasts[]	addToast, removeToast	ToastContainer

数据流方向

在组件和 Store 之间画出单向数据流箭头：

组件 → Store：dispatch action (用户交互)
Store → 组件：useStore selector 订阅，自动重渲染
Store → API：调用 api/ 封装层
API → Store：响应数据写入 state

风格编辑流程 (Draft/Commit 模式)

用一个小流程图展示：

startEditing() → copy style → draftStyle
    ↓
updateDraft(key, value) → draftStyle 变更 → hasUnsavedChanges = true
    ↓
┌─ commitDraft() → PUT /api/v1/projects/:id/style → style = draftStyle → hasUnsavedChanges = false
└─ discardDraft() → draftStyle = style → hasUnsavedChanges = false

右区：组件树 & 交互流程 (Components & Interactions)

组件依赖树

Layout
├── Navbar (logo + 导航 + 用户菜单)
└── ToastContainer
    └── ToastItem × N

HomePage
├── ProjectCard (缩略图 + 名称 + 任务数 + 最近活动)
└── CreateProjectModal
    ├── StyleSelector (预设风格 pill 按钮)
    └── CustomTagsEditor (添加/删除自定义标签)

ProjectDetailPage (CSS Grid: 260px 1fr 320px)
├── [左栏] ProjectConfigPanel
│   ├── 工程名 (可编辑 input)
│   ├── StyleSelector (全量风格编辑)
│   ├── CustomTagsEditor
│   └── 保存/取消 按钮 (hasUnsavedChanges 控制)
├── [中间] 生成区域
│   ├── GenerateForm
│   │   ├── 素材类型选择 (sprite / background / ui / animation)
│   │   ├── StyleSelector (任务覆盖，仅记录差异)
│   │   ├── PromptEditor (文本输入)
│   │   ├── 技术参数 (分辨率 / 帧数 / 格式)
│   │   └── 提交按钮 + AI 优化按钮
│   └── ProgressBar (提交后显示)
│       └── 四阶段进度条 (prompt_builder → asset_generator → quality_supervisor → format_adapter)
└── [右栏] TaskListPanel
    ├── StatusBadge (状态标签: pending/running/completed/failed)
    ├── TaskItem × N (点击跳转 ResultPage)
    └── 自动刷新 (15s 间隔)

ResultPage
└── AssetPreview
    ├── 图片预览 (带帧信息标注)
    ├── 元数据展示 (分辨率/帧数/方向数/格式)
    └── 下载按钮 (GET /api/v1/assets/download?key=...)

生成任务交互流程 (时序简化)

User → GenerateForm (填写 prompt + 选择类型 + 参数) → [提交]
  → POST /api/v1/generate → taskId
  → generation store: status=running
  → ProgressBar 显示
  → 轮询 GET /api/v1/tasks/:taskId (每 1.5s)
  → 更新 stage + progress
  → status=completed
  → GET /api/v1/tasks/:taskId/assets
  → 显示 "查看结果" → 跳转 ResultPage

API 封装层结构 (api/)

在底部用一个窄条展示：

api/
├── client.ts    — fetch 封装 (统一错误处理, JSON 解包, Bearer Token 注入)
├── auth.ts      — login(), register()
├── project.ts   — listProjects(), createProject(), getProject(), updateProject(), deleteProject()
├── generate.ts  — submitGenerate(), getTask(), getTaskAssets()
├── prompt.ts    — optimizePrompt(), extractTags()
├── mock.ts      — 多工程 Mock 数据 (开发用)
└── types.ts     — Project, Task, Asset, User 等类型定义

色彩与排版指南

背景：深色 (#1a1a2e 或 #0f172a)
左区 (Router)：紫色调 (#8B5CF6 / #7C3AED)，紫色边框
中区 (State)：青色调 (#06B6D4 / #0891B2)，青色边框
右区 (Components)：绿色调 (#10B981 / #059669)，绿色边框
API 层：橙色调 (#F59E0B)
组件框：半透明背景 + 彩色左边框
箭头：白色或浅灰 (#94A3B8)，实线 = 同步，虚线 = 异步
文字：白色为主 (#F8FAFC)，次要文字浅灰 (#94A3B8)
Store 卡片：微亮边框，内部字段用等宽字体
所有框使用圆角 (border-radius: 6px)
区域标题用较大的加粗字体 + 左侧色条

附加约束

所有组件名、Store 名、文件名与代码库保持一致
中文用于辅助标注（括号内），英文为主要标注
避免拥挤，分区之间留白充分
画面比例 16:9 或更宽，适合横屏展示
不要使用 3D 效果

6.7 KiB Raw Blame History Unescape Escape