From 5f99d2481aae27cda65537290a03bd4b4d85f546 Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Sat, 30 May 2026 23:13:23 +0800
Subject: [PATCH] style: optimize gen2D deck layout, animations, and visual
 hierarchy

- style-keys.md: add v-clicks to 3x2 grid for staggered animation
- eino-graph.md: two-column layout (code left, Items right)
- eino-deep-dive.md: two-column layout for both slides, code+Items side-by-side
- async-deep-dive.md: two-column layout for both slides, SVG integrated
- harness.md: two-column layout for slide 1 (code left, Items right)
- request-journey.md: two-column layout for journey steps
- data-model.md: add v-clicks to grid items, increase diagram height
- architecture/pipeline/prompt-agent: increase SVG max-height for better visibility
---
 decks/gen2D/pages/architecture.md    |  4 ++--
 decks/gen2D/pages/async-deep-dive.md | 24 +++++++++++++++----
 decks/gen2D/pages/data-model.md      |  6 ++++-
 decks/gen2D/pages/eino-deep-dive.md  | 22 ++++++++++++++---
 decks/gen2D/pages/eino-graph.md      | 10 +++++++-
 decks/gen2D/pages/harness.md         | 20 +++++++++-------
 decks/gen2D/pages/pipeline.md        |  4 ++--
 decks/gen2D/pages/prompt-agent.md    |  2 +-
 decks/gen2D/pages/request-journey.md | 36 ++++++++++++++++++++--------
 decks/gen2D/pages/style-keys.md      |  6 ++++-
 10 files changed, 101 insertions(+), 33 deletions(-)

diff --git a/decks/gen2D/pages/architecture.md b/decks/gen2D/pages/architecture.md
index 6fabe36..a3eddbf 100644
--- a/decks/gen2D/pages/architecture.md
+++ b/decks/gen2D/pages/architecture.md
@@ -1,7 +1,7 @@
 # 系统架构全景
 
-<div class="mt-2 flex justify-center">
-  <img src="../public/architecture.svg" class="w-full max-h-[450px] object-contain" />
+<div class="flex justify-center">
+  <img src="../public/architecture.svg" class="w-full max-h-[480px] object-contain" />
 </div>
 
 <!--
diff --git a/decks/gen2D/pages/async-deep-dive.md b/decks/gen2D/pages/async-deep-dive.md
index 944e5be..8d3d2f5 100644
--- a/decks/gen2D/pages/async-deep-dive.md
+++ b/decks/gen2D/pages/async-deep-dive.md
@@ -2,7 +2,9 @@
 
 FIFO 串行执行，信号驱动调度
 
-<div class="mt-2">
+<div class="grid grid-cols-2 gap-4 mt-2">
+
+<div>
 
 ```go {1-6|8-12|all}
 type TaskQueue struct {
@@ -22,6 +24,8 @@ func (q *TaskQueue) Enqueue(job *TaskJob) {
 
 </div>
 
+<div class="flex flex-col justify-center">
+
 <v-clicks>
 
 <Item title="Enqueue → run() → processNext() 流程">
@@ -34,13 +38,19 @@ func (q *TaskQueue) Enqueue(job *TaskJob) {
 
 </v-clicks>
 
+</div>
+
+</div>
+
 ---
 
 # 进度推送与 WebSocket
 
 Context 注入 + 多通道推送
 
-<div class="mt-2">
+<div class="grid grid-cols-2 gap-4 mt-2">
+
+<div>
 
 ```go {1-3|5-8|all}
 func WithProgressReporter(ctx context.Context, r ProgressReporter) context.Context {
@@ -52,8 +62,14 @@ reporter := GetProgressReporter(ctx)
 reporter.Report(Progress{Stage: "prompt", Percent: 25})
 ```
 
+<div class="flex justify-center mt-2">
+  <img src="../public/async-task.svg" class="w-full max-h-[160px] object-contain" />
 </div>
 
+</div>
+
+<div class="flex flex-col justify-center">
+
 <v-clicks>
 
 <Item title="进度阶段划分">
@@ -66,6 +82,6 @@ reporter.Report(Progress{Stage: "prompt", Percent: 25})
 
 </v-clicks>
 
-<div class="flex justify-center mt-2">
-  <img src="../public/async-task.svg" class="w-full max-h-[180px] object-contain" />
+</div>
+
 </div>
diff --git a/decks/gen2D/pages/data-model.md b/decks/gen2D/pages/data-model.md
index 7254275..1c6486b 100644
--- a/decks/gen2D/pages/data-model.md
+++ b/decks/gen2D/pages/data-model.md
@@ -3,11 +3,13 @@
 四表结构，清晰的实体关系
 
 <div class="flex justify-center">
-  <img src="../public/data-model.svg" class="w-full max-h-[220px] object-contain" />
+  <img src="../public/data-model.svg" class="w-full max-h-[240px] object-contain" />
 </div>
 
 <div class="grid grid-cols-2 gap-4 mt-2">
 
+<v-clicks>
+
 <Item title="👤 USER + PROJECT">
 用户：`id`(base62)、`username`、`password_hash`(bcrypt)
 工程：`id`、`user_id`、`name`
@@ -19,4 +21,6 @@
 素材：`file_url`、`metadata`
 </Item>
 
+</v-clicks>
+
 </div>
diff --git a/decks/gen2D/pages/eino-deep-dive.md b/decks/gen2D/pages/eino-deep-dive.md
index 223ac71..69a5889 100644
--- a/decks/gen2D/pages/eino-deep-dive.md
+++ b/decks/gen2D/pages/eino-deep-dive.md
@@ -2,7 +2,9 @@
 
 有向图构建与本地状态管理
 
-<div class="mt-2">
+<div class="grid grid-cols-2 gap-4 mt-2">
+
+<div>
 
 ```go {1-5|7-11|all}
 g := compose.NewGraph[PipelineInput, PipelineOutput](
@@ -19,6 +21,8 @@ g.AddLambdaNode(nodePromptOptimizer, &compose.Lambda{
 
 </div>
 
+<div class="flex flex-col justify-center">
+
 <v-clicks>
 
 <Item title="WithGenLocalState — 隔离的执行上下文">
@@ -31,13 +35,19 @@ PreHandler 从全局 State 提取当前节点所需字段；PostHandler 将节
 
 </v-clicks>
 
+</div>
+
+</div>
+
 ---
 
 # Eino Graph 深入 — 分支路由与重试
 
 QualitySupervisor 驱动的条件分支
 
-<div class="mt-2">
+<div class="grid grid-cols-2 gap-4 mt-2">
+
+<div>
 
 ```go {1-10|all}
 g.AddBranch(nodeQualitySupervisor, compose.NewGraphBranch(
@@ -59,6 +69,8 @@ g.AddBranch(nodeQualitySupervisor, compose.NewGraphBranch(
 
 </div>
 
+<div class="flex flex-col justify-center">
+
 <v-clicks>
 
 <Item title="路由逻辑">
@@ -72,5 +84,9 @@ g.AddBranch(nodeQualitySupervisor, compose.NewGraphBranch(
 </v-clicks>
 
 <div class="flex justify-center mt-2">
-  <img src="../public/pipeline-detail.svg" class="w-full max-h-[200px] object-contain" />
+  <img src="../public/pipeline-detail.svg" class="w-full max-h-[160px] object-contain" />
+</div>
+
+</div>
+
 </div>
diff --git a/decks/gen2D/pages/eino-graph.md b/decks/gen2D/pages/eino-graph.md
index 23fd14e..d1c37e4 100644
--- a/decks/gen2D/pages/eino-graph.md
+++ b/decks/gen2D/pages/eino-graph.md
@@ -1,6 +1,8 @@
 # Eino 管线编排 — compose.Graph
 
-<div class="mt-2">
+<div class="grid grid-cols-2 gap-4 mt-2">
+
+<div>
 
 ```go {all|1-4|6-10|all}
 type PipelineInput struct {
@@ -22,6 +24,8 @@ type PipelineOutput struct {
 
 </div>
 
+<div class="flex flex-col justify-center">
+
 <v-clicks>
 
 <Item title="graph.Build() — 构建管线">
@@ -33,3 +37,7 @@ type PipelineOutput struct {
 </Item>
 
 </v-clicks>
+
+</div>
+
+</div>
diff --git a/decks/gen2D/pages/harness.md b/decks/gen2D/pages/harness.md
index 1f28820..bdf3464 100644
--- a/decks/gen2D/pages/harness.md
+++ b/decks/gen2D/pages/harness.md
@@ -2,15 +2,9 @@
 
 多层一致性确保输出可控
 
-<v-clicks>
+<div class="grid grid-cols-2 gap-4 mt-2">
 
-<Item title="风格一致性 — 合并策略">
-Project Style（基底）+ Task Override（覆盖）→ `mergeStyle()` 逐键合并。工程风格定义全局基调，任务风格按需微调，互不干扰。
-</Item>
-
-</v-clicks>
-
-<div class="mt-2">
+<div>
 
 ```go
 func mergeStyle(projectStyle, taskStyle map[string]string) map[string]string {
@@ -23,8 +17,14 @@ func mergeStyle(projectStyle, taskStyle map[string]string) map[string]string {
 
 </div>
 
+<div class="flex flex-col justify-center">
+
 <v-clicks>
 
+<Item title="风格一致性 — 合并策略">
+Project Style（基底）+ Task Override（覆盖）→ `mergeStyle()` 逐键合并。工程风格定义全局基调，任务风格按需微调，互不干扰。
+</Item>
+
 <Item title="管线一致性 — Eino Graph 保证">
 Graph 强制拓扑顺序执行，State 每次调用独立生成。节点无状态，数据经 State 中转，避免并发污染。
 </Item>
@@ -35,6 +35,10 @@ QualitySupervisor 自动质检，不合格重试（最多 3 次），超限降
 
 </v-clicks>
 
+</div>
+
+</div>
+
 ---
 
 # 一致性保障 — 数据与部署
diff --git a/decks/gen2D/pages/pipeline.md b/decks/gen2D/pages/pipeline.md
index 1d8d877..0e157fb 100644
--- a/decks/gen2D/pages/pipeline.md
+++ b/decks/gen2D/pages/pipeline.md
@@ -22,6 +22,6 @@
 
 </v-clicks>
 
-<div class="mt-2 flex justify-center">
-  <img src="../public/pipeline.svg" class="w-full max-h-[140px] object-contain" />
+<div class="flex justify-center mt-2">
+  <img src="../public/pipeline.svg" class="w-full max-h-[160px] object-contain" />
 </div>
diff --git a/decks/gen2D/pages/prompt-agent.md b/decks/gen2D/pages/prompt-agent.md
index 1069819..f9e84c4 100644
--- a/decks/gen2D/pages/prompt-agent.md
+++ b/decks/gen2D/pages/prompt-agent.md
@@ -19,5 +19,5 @@ Eino Chain 驱动的智能提示词生成
 </v-clicks>
 
 <div class="flex justify-center mt-2">
-  <img src="../public/prompt-agent.svg" class="w-full max-h-[140px] object-contain" />
+  <img src="../public/prompt-agent.svg" class="w-full max-h-[160px] object-contain" />
 </div>
diff --git a/decks/gen2D/pages/request-journey.md b/decks/gen2D/pages/request-journey.md
index e925ff7..98eb34b 100644
--- a/decks/gen2D/pages/request-journey.md
+++ b/decks/gen2D/pages/request-journey.md
@@ -10,26 +10,42 @@ POST /api/v1/generate  {prompt: "像素风骑士", assetType: "sprite", style: {
 
 </div>
 
+<div class="grid grid-cols-2 gap-4 mt-2">
+
+<div>
+
 <v-clicks>
 
 <Item title="① Middleware 层（~1ms）">
-JWT 认证 → 解析 userID → 用户级限流检查（Redis Lua）→ 全局限流检查 → 放行
+JWT 认证 → 解析 userID → 用户级限流（Redis Lua）→ 全局限流 → 放行
 </Item>
 
 <Item title="② Handler 层（~5ms）">
-参数绑定 + 校验 → 去重检查 `hash(prompt+type+params)` → 创建 Task（DB 写入）→ 入队 TaskQueue → 返回 `taskId`
-</Item>
-
-<Item title="③ Pipeline 执行（~30s）">
-goroutine 取出任务 → PromptOptimizer（风格合并 + LLM）→ AssetGenerator（文生图 API）→ QualitySupervisor（视觉模型质检，可能重试）→ FormatAdapter（精灵表拆分 + GIF）
-</Item>
-
-<Item title="④ 收尾（~2s）">
-上传素材到七牛云 Kodo → 写入 Asset 表 → 更新 Task status=completed → WebSocket 推送完成通知
+参数校验 → 去重检查 → 创建 Task（DB 写入）→ 入队 TaskQueue → 返回 `taskId`
 </Item>
 
 </v-clicks>
 
+</div>
+
+<div>
+
+<v-clicks>
+
+<Item title="③ Pipeline 执行（~30s）">
+goroutine 取任务 → PromptOptimizer → AssetGenerator → QualitySupervisor（可能重试）→ FormatAdapter（精灵表 + GIF）
+</Item>
+
+<Item title="④ 收尾（~2s）">
+上传七牛云 Kodo → 写入 Asset 表 → 更新 Task 完成 → WebSocket 推送
+</Item>
+
+</v-clicks>
+
+</div>
+
+</div>
+
 <div v-click class="mt-2 text-center text-gray-400 text-sm">
   全程异步：前端拿到 taskId 后通过 WebSocket 实时监听进度变化
 </div>
diff --git a/decks/gen2D/pages/style-keys.md b/decks/gen2D/pages/style-keys.md
index fb34508..8c608f7 100644
--- a/decks/gen2D/pages/style-keys.md
+++ b/decks/gen2D/pages/style-keys.md
@@ -4,6 +4,8 @@
 
 <div class="grid grid-cols-3 gap-4 mt-4">
 
+<v-clicks>
+
 <Item title="🎨 美术风格 artStyle">
 pixel（像素）、cartoon（卡通）、vector（矢量）、realistic（写实）、flat（扁平）、anime（动漫）
 </Item>
@@ -28,8 +30,10 @@ bright（明亮）、dramatic（戏剧）、neon（霓虹）、soft（柔光）
 cheerful（欢快）、dark（暗黑）、epic（史诗）、calm（宁静）、mysterious（神秘）、playful（活泼）
 </Item>
 
+</v-clicks>
+
 </div>
 
-<div class="mt-4 text-sm text-gray-400">
+<div v-click class="mt-4 text-sm text-gray-400">
   支持自定义标签：<code>custom:</code> 前缀的键值对会被自动提取到提示词中
 </div>