{outfit.name}
+{outfit.actions.length} 个动作
+ + 进入预览台 + +
+
+ 
+ Windup
+
+
+
+ {workspace.title}
+ {workspace.detail}
+
+
+
+
+
+ Windup
+
+
+
+ {workspace.title}
+ {workspace.detail}
+
+ 页面内容
+
-
- {children}
+ {/* workflow-editor 有自己的 studio-bar，不显示全局 header */}
+ {!isWorkflowWorkspace &&
+ {children}
+
)
}
diff --git a/frontend/src/architecture-boundaries.test.ts b/frontend/src/architecture-boundaries.test.ts
new file mode 100644
index 0000000..6551173
--- /dev/null
+++ b/frontend/src/architecture-boundaries.test.ts
@@ -0,0 +1,51 @@
+import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs'
+import { join, relative } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+const SRC = join(process.cwd(), 'src')
+
+function sourceFiles(root: string): string[] {
+ return readdirSync(root).flatMap((name) => {
+ const path = join(root, name)
+ return statSync(path).isDirectory() ? sourceFiles(path) : /\.(ts|tsx)$/.test(name) ? [path] : []
+ })
+}
+
+describe('frontend architecture boundaries', () => {
+ it('keeps removed duplicate models and page-local workflow state out of the tree', () => {
+ const removed = [
+ 'app/adapters/index.ts',
+ 'entities/task/index.ts',
+ 'entities/action-template/index.ts',
+ 'pages/workflow-editor/state.ts',
+ 'pages/workflow-editor/types.ts',
+ ]
+
+ expect(removed.filter((path) => existsSync(join(SRC, path)))).toEqual([])
+ })
+
+ it('keeps shared independent from Windup business layers', () => {
+ const violations = sourceFiles(join(SRC, 'shared')).filter((path) => {
+ const source = readFileSync(path, 'utf8')
+ return /from ['"]@\/(app|pages|features|entities)\b/.test(source)
+ })
+
+ expect(violations.map((path) => relative(SRC, path))).toEqual([])
+ })
+
+ it('keeps transport calls behind shared api and entity adapters', () => {
+ const violations = sourceFiles(join(SRC, 'pages')).filter((path) =>
+ /\bfetch\s*\(/.test(readFileSync(path, 'utf8')),
+ )
+
+ expect(violations.map((path) => relative(SRC, path))).toEqual([])
+ })
+
+ it('keeps reusable features independent from page implementations', () => {
+ const violations = sourceFiles(join(SRC, 'features')).filter((path) =>
+ /from ['"]@\/pages\b/.test(readFileSync(path, 'utf8')),
+ )
+
+ expect(violations.map((path) => relative(SRC, path))).toEqual([])
+ })
+})
diff --git a/frontend/src/entities/action-template/index.ts b/frontend/src/entities/action-template/index.ts
deleted file mode 100644
index 2dafa39..0000000
--- a/frontend/src/entities/action-template/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-interface ActionTemplateBase {
- id: string
- name: string
- prompt: string
-}
-
-/** 系统内置模板没有项目归属；项目自定义模板必须携带所属 Project ID。 */
-export type ActionTemplate = ActionTemplateBase &
- ({ scope: 'system'; projectId: null } | { scope: 'project'; projectId: string })
-
-/** ActionTemplate 对应的一组后端接口。 */
-export interface ActionTemplateApis {
- listAvailable(projectId: string): PromiseGAME ASSETS
+资产导出
+逐帧原图、Sprite Sheet 与动画 JSON
+-
+
- 动作方向 +
- {plan.length} 组 +
- 逐帧原图 +
- + {plan.reduce((total, item) => total + item.frames.length, 0)} 张 + +
- 每行上限 +
- 8 帧 +
+ 当前核验存在 {qualityIssueCount} 项质量问题，仍可导出 +
+ ) : null} + + {state.status === 'working' ? ( ++ {PHASE_LABELS[state.phase]} +
+ ) : state.status === 'failure' ? ( ++ 导出失败，可重试 +
+ ) : state.status === 'success' ? ( +
+
+ ) : null}
+
+
+ {plan.length === 0 ? 下载完成
+ {state.incomplete ? ( ++ 导出不完整，缺失图片已保留透明占位 +
+ ) : null} +没有可导出的已确认动作
: null} +资产库
-本次只提交模块划分与接口，页面实现进后续 PR。
+ASSET LIBRARY
+资产库
+项目中已经发布的角色、造型和动作。
+ {error && ( ++ {error} +
+ )} + {!error && characters.length === 0 && ( ++ 这个项目还没有已发布资产。 +
+ )} +
+ {characters.flatMap((character) =>
+ character.outfits.map((outfit) => (
+
+ {outfit.characterTemplateUrl && (
+ 
+ )}
+
+ )),
+ )}
+
+ HISTORY +
+历史记录
+已完成和进行中的创作记录。
+
+
+ )}
+
+ {completedRuns.length > 0 && (
+ 进行中
+
+ {activeRuns.map((run) => (
+
+
+
+ )}
+
+ {runs.length === 0 && (
+ 已完成
+
+ {completedRuns.map((run) => (
+
+
+
+ )}
+ 还没有创作记录。
+ + 开始创作 + +
+
+ {statusLabel}
+
+ )
+}
diff --git a/frontend/src/pages/home/choice-card.test.tsx b/frontend/src/pages/home/choice-card.test.tsx
new file mode 100644
index 0000000..6ea4e8e
--- /dev/null
+++ b/frontend/src/pages/home/choice-card.test.tsx
@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { MemoryRouter } from 'react-router'
+
+import { HomeChoiceCard } from './choice-card'
+
+afterEach(cleanup)
+
+describe('HomeChoiceCard', () => {
+ it('只根据输入渲染一个可导航入口', () => {
+ render(
+ + RUN {run.id.slice(0, 8)} +
++ {run.prompt || `项目 ${run.projectId.slice(0, 8)}`} +
++ {passedCount} / {totalCount} 步骤完成 +
+{title}
-本次只提交模块划分与接口，页面实现进后续 PR。
-
+
+
+
+
+
)
}
diff --git a/frontend/src/pages/playtest/README.md b/frontend/src/pages/playtest/README.md
new file mode 100644
index 0000000..44624f2
--- /dev/null
+++ b/frontend/src/pages/playtest/README.md
@@ -0,0 +1,133 @@
+# Playtest
+
+Playtest 是角色动画的只读调试和核验界面。它既能直接操控角色验证 idle、walk、jump
+之间的响应，也能逐帧查看动作、时长与位移，并在不改变角色素材的前提下记录当前会话的
+整体核验结论。
+
+## 入口
+
+- **Demo：`/playtest/demo`**。直接使用明确标注的少年开发 fixture，方便独立查看 idle 和
+ walk 动作。
+- **正式：`/playtest/:characterId/:outfitId`**。需要由应用提供 `PlaytestPageApis.characters.get`；
+ 页面只读取指定角色，再从中选择对应 Outfit。
+
+正式入口未配置角色接口时，页面会明确显示“Playtest 角色接口尚未配置”。它不会加载或回退到
+Demo 少年数据。
+
+## 数据与只读边界
+
+Demo 数据来自 `public/playtest-fixtures/boy/` 的已提取少年帧，以及
+`testing/demo-character.ts` 中的开发 fixture。素材来源和用途说明见该目录的 `SOURCE.md`。
+
+Playtest 不修改角色、造型、动作、帧、工作流或版本。核验结论和逐帧问题都只保留在当前页面，
+不写入本地存储或后端；#70 目前没有独立核验接口，因此此处不猜测持久化合同。
+
+#70 的 `Action` 只提供一组 `frames`，Playtest 在页面适配器中把它映射为 `default` 方向，
+不会把多方向结构加回 Character 实体。实体的 `rootMotion` 表示相对动作首帧的绝对位置；
+播放器使用前会换算为相邻帧增量，避免重复累计。
+
+## 统一工作台
+
+页面只有一套 `PlaybackController`。动作列表、方向选择、统一舞台、播放控制、时间线，
+以及右侧“帧检查 / 问题记录 / 资产导出”三个页签共同读取当前动作、方向和帧。键盘、按钮或
+时间线改变帧后，舞台与右侧工具会同步更新，不存在隐藏的第二套状态。
+
+- 左侧动作栏展开宽度为 190px，也可收起为窄条；三栏在宽屏共用相同高度和底边，右侧长内容
+ 在栏内滚动，不再向下撑出额外空白。
+- 按住 A/D 时继续播放当前已选中的动作；仅当当前动作为 `walk` 时才设置镜像方向（A 面向左，
+ D 面向右）。松开后，若按键前处于暂停状态则恢复暂停，原本正在播放则继续播放。
+- 没有选中动作时，A/D 不执行任何操作。
+- ← / → 才是当前序列的上一帧 / 下一帧控制，长按时可连续切帧。
+- W 选择首个包含有效帧的 jump 动作并从首帧播放。
+- S 选择首个包含有效帧的 crouch 动作并从首帧播放。
+- jump/crouch 缺失时，W/S 不改变当前动作，也不会用其他动作图片冒充。
+
+当前 Demo 少年包含 idle 和 walk，不包含 jump 或 crouch，因此界面会明确显示“未提供跳跃
+动作”和“未提供下蹲动作”。以后正式 Character 提供对应动作后，同一套控制器会自动启用
+W/S。
+
+## 播放与核验
+
+- 初始为暂停；切换动作、方向或手动选择帧时暂停。
+- 每帧的 `durationMs` 优先；未提供有效时长时才按动作 FPS 计算显示与播放间隔。
+- 关闭循环时，播放停留在末帧；开启循环时，末帧会回到首帧。
+- 舞台始终只渲染当前帧角色，不叠加上一帧、下一帧或其他动作的角色虚影。
+- 有横向根位移的角色到达舞台左右边界后会自动掉头并继续播放。边界按舞台和角色的实际显示
+ 宽度计算；窗口尺寸改变后会重新钳制。自动掉头不显示文字，也不触发额外播报。
+
+## 逐帧自动审核依据
+
+逐帧审核会在浏览器中读取每张图片的 Alpha 像素，提供只读的几何检查依据。Alpha 大于
+24 的像素视为候选前景；算法按八邻域过滤小于 `max(4 像素, 最大连通区域的 0.2%)` 的
+孤立噪点，同时始终保留最大主体。
+
+右侧分别展示三类位移，不能混为一个数：
+
+- **画面内额外漂移**：过滤噪点后，相邻帧透明像素质心的变化；自动连续性判断只使用它。
+- **预期根位移增量**：当前帧的 `rootMotion`；它是本次自动播放帧推进应累加的增量，y 正值
+ 表示向上。
+- **合成预览位移**：播放器按每次自动播放推进累计根位移后的最终位置；它用于解释播放效果，
+ 不重复参与自动异常判断。
+
+自动审核会输出带问题代码、严重程度和帧位置的结构化结果，覆盖图片不可用、空白主体、画布
+尺寸、边缘裁切、覆盖率、相邻重复帧、位移突变、脚底/高度/面积变化，以及画面位移与根位移
+方向矛盾。重复帧依据主体边界内归一化的 8×8 Alpha/亮度指纹判断，避免小型精灵被整张透明
+画布稀释；位移异常同时使用序列中位数、MAD 和按动作设置的绝对上限，避免整段异常素材用
+自身均值掩盖问题。
+
+阈值按动作类别解释：idle 严格检查脚底和高度，walk 允许周期变化，jump 允许离地，crouch
+允许主体高度下降，attack/custom 使用更宽的序列离群范围。画布规格从当前序列中出现次数最多
+的可读尺寸推断；脚底、高度、位移、边缘留白和方向判断阈值以原 256 px 规则为校准基线，按
+推断画布尺度换算。主体覆盖率、轮廓面积变化和指纹距离本身已经归一化，继续使用比例阈值。
+因此整组一致的 512×512 等素材不会被误判为画布错误，混入不同尺寸的帧仍会被标记。
+
+这些结果只能发现位置、缩放、背景和轮廓突变，不能判断变脸、人体结构、动作语义或服装
+细节。图片加载失败、完全透明、Canvas 不可用或跨域像素受限时会明确显示“无法计算”，不会
+伪造为 0。检查结果不会修改 Frame、Character 或核验结论；当前 Action 尚无明确循环
+合同，因此不计算循环首尾接缝。
+
+## 人工问题记录
+
+“问题记录”页签把自动发现和人工标记分开显示。用户可以为当前动作、方向和帧选择问题类型、
+补充说明，并修改或删除人工记录。人工问题只保存在当前 React 会话，刷新后清空，不写入
+localStorage、Character、Frame 或后端。“核验通过 / 发现问题”的总体结论也只保存在当前
+React 会话，且不会被逐帧问题自动改变。
+
+## 游戏资产导出
+
+“资产导出”页签只导出包含帧的动作序列。单个 ZIP 中只有：
+
+1. 保留原 MIME/扩展名的逐帧原图；
+2. 每个“动作 × 方向”一张 PNG Sprite Sheet；
+3. 与每张 Sprite Sheet 对应的 `animation.json`。
+
+Sprite Sheet 每行最多 8 帧，不缩放原图；不同尺寸使用序列最大宽高作为单元格并居中。图片
+加载失败时仍生成资产包：对应单元格保持透明，JSON 标记 `available: false`，页面提示导出
+不完整。已有自动或人工问题时，导出页会先提示问题数量但不阻断导出。切换右侧页签不会卸载
+进行中的导出，因此不能通过切换页签并发启动第二份任务。ZIP 不包含 manifest、审核结果、
+核验结论或开发说明。打包采用同一导出文件内的标准无压缩 ZIP 封装，不新增运行时依赖。
+
+## 键盘控制
+
+| 按键 | 操作 |
+| ---------- | ------------------------------------------------ |
+| A | 按住时继续播放当前动作（walk 时面向左）；松开后恢复原播放状态 |
+| D | 按住时继续播放当前动作（walk 时面向右）；松开后恢复原播放状态 |
+| W | 有 jump 动作时从首帧播放；缺少时不改变当前状态 |
+| S | 有 crouch 动作时从首帧播放；缺少时不改变当前状态 |
+| Space | 播放或暂停当前动作 |
+| ← / → | 当前序列上一帧 / 下一帧，可长按连续切帧 |
+| Home / End | 当前序列首帧 / 尾帧 |
+| L | 切换循环 |
+
+焦点位于按钮、输入框、文本区域、选择器或可编辑文本区域时，Playtest 不拦截键盘控制。
+长按 Space、L、W 或 S 不会重复触发；A、D、方向键、Home 和 End 保持可连续触发。
+
+## 视觉参考
+
+三栏信息布局只参考 `live-demo-ui-components/animation-workbench.tsx` 的视觉层次。统一舞台保留
+旧工程的网格、地面线和透明背景视觉。`rootMotion` 是逐帧位移增量，只在自动播放实际推进
+时累计；它为 `null` 或零时角色原地播放。向左/向右镜像、位移累计、时间线和检查器均由同一
+`PlaybackController` 驱动，不使用前端写死的行走速度、重力或跳跃高度。Playtest 不导入 Cocos
+运行时、旧 iframe 或微信小程序适配；当前导出只生成通用逐帧、Sprite Sheet 与 JSON，不生成
+Cocos 或小程序工程。
diff --git a/frontend/src/pages/playtest/demo-page.tsx b/frontend/src/pages/playtest/demo-page.tsx
new file mode 100644
index 0000000..9bc227b
--- /dev/null
+++ b/frontend/src/pages/playtest/demo-page.tsx
@@ -0,0 +1,61 @@
+import { useMemo } from 'react'
+import { useLocation } from 'react-router'
+
+import type { Character } from '@/entities/character'
+import {
+ PLAYTEST_DEMO_CHARACTER,
+ PLAYTEST_DEMO_CHARACTER_ID,
+ PLAYTEST_DEMO_ACTION_ID,
+ PLAYTEST_DEMO_OUTFIT_ID,
+} from './testing/demo-character'
+import { PlaytestWorkbench } from './workbench'
+
+interface DemoPageState {
+ characterImageUrl?: string
+}
+
+/**
+ * 开发预览入口。
+ *
+ * 当从 Quick Start 导出时，location.state 携带 characterImageUrl，
+ * 用选中的角色图覆盖 demo 角色的母版和 base frame。
+ */
+export function PlaytestDemoPage() {
+ const location = useLocation()
+ const state = location.state as DemoPageState | null
+ const characterImageUrl = state?.characterImageUrl
+
+ const character = useMemo(
+ () =>
+ characterImageUrl
+ ? overrideCharacterImage(PLAYTEST_DEMO_CHARACTER, characterImageUrl)
+ : PLAYTEST_DEMO_CHARACTER,
+ [characterImageUrl],
+ )
+
+ return (
+
+
+
+
+
+ 让你的角色，
+
+
+
+ + 2D CHARACTER PRODUCTION WORKFLOW +
+
+ 让你的角色，
+
+ 真正登场。
+
+ + 从一句设定，到可检查、可修正、能进入游戏项目的 2D 动作资产。Windup + 把角色创作收拢在同一条制作线上。 +
+-
+ {[
+ ['01', '确认角色', '设定与母版'],
+ ['02', '生成动作', '首帧与动画'],
+ ['03', '检查交付', '审核与核验'],
+ ].map(([index, label, detail]) => (
+
- + {index} + {label} + {detail} + + ))} +
+
+
+
+
+
+
+
+
+
+ + CHOOSE A STARTING POINT +
++ 选择一个起点 +
++ 快速开始负责连续创作，项目工作台适合逐步掌控。 +
+
+
+ 核验台
-本次只提交模块划分与接口，页面实现进后续 PR。
-{children}
+ACCEPTANCE
+本次核验
+{statusText(inspectionStatus)}
+仅保存在当前页面，不写入后端
+
+
+
+
+
+ 当前动作没有可播放的帧
+
+ ) : imageFailed ? (
+
+ 当前帧图片加载失败
+
+ ) : (
+
+
+
+
+
+ QUALITY ISSUES
+问题记录
+仅保留在当前 Playtest 会话
+
+
+
+ 自动发现
+ {automaticFindings.length === 0 ? ( +当前序列没有自动问题
+ ) : ( +-
+ {automaticFindings.map((finding, index) => (
+
-
+ + {finding.message} + 自动 ++ + {finding.frameIndex === null ? '整段序列' : `第 ${finding.frameIndex + 1} 帧`} + +
+ ))}
+
+
+ ${hasInput ? '' : ''}
+
+ ${meta.eyebrow}
+
+ `
+}
+
+export function WorkflowCanvas({
+ controller,
+ run,
+ unavailableReason,
+ onStepAction,
+}: WorkflowCanvasProps) {
+ const rootRef = useRef(null)
+ const revision = getCurrentRevision(run)
+
+ // 连线只表达 WorkflowStep 的先后关系，不再作为第二套业务状态门控按钮。
+ useEffect(() => {
+ if (!revision) return
+ controller.renderWires()
+ }, [controller, revision])
+
+ // 绑定交互事件
+ useEffect(() => {
+ if (!rootRef.current || !revision) return
+ controller.attach(rootRef.current)
+ const root = rootRef.current
+ const form = root.querySelector('#characterSetupForm')
+ const handleSetupSubmit = (event: Event) => {
+ event.preventDefault()
+ const description = new FormData(form!).get('description')
+ if (typeof description === 'string' && description.trim()) {
+ onStepAction?.('character-setup', 'submit', { description: description.trim() })
+ }
+ }
+ form?.addEventListener('submit', handleSetupSubmit)
+
+ const candidateButtons = Array.from(
+ root.querySelectorAll('[data-select-candidate]'),
+ )
+ const confirmCandidate = root.querySelector('[data-confirm-candidate]')
+ const selectCandidate = (event: Event) => {
+ candidateButtons.forEach((button) => button.classList.remove('is-selected'))
+ const selected = event.currentTarget as HTMLButtonElement
+ selected.classList.add('is-selected')
+ if (confirmCandidate) {
+ confirmCandidate.dataset.candidateUrl = selected.dataset.candidateUrl
+ confirmCandidate.disabled = false
+ }
+ }
+ candidateButtons.forEach((button) => button.addEventListener('click', selectCandidate))
+ const handleCandidateConfirm = () => {
+ const selectedImageUrl = confirmCandidate?.dataset.candidateUrl
+ if (selectedImageUrl) onStepAction?.('template-candidate', 'confirm', { selectedImageUrl })
+ }
+ confirmCandidate?.addEventListener('click', handleCandidateConfirm)
+
+ const approveReview = root.querySelector('[data-confirm-review]')
+ const handleReviewApprove = () => onStepAction?.('review', 'approve')
+ approveReview?.addEventListener('click', handleReviewApprove)
+
+ return () => {
+ form?.removeEventListener('submit', handleSetupSubmit)
+ candidateButtons.forEach((button) => button.removeEventListener('click', selectCandidate))
+ confirmCandidate?.removeEventListener('click', handleCandidateConfirm)
+ approveReview?.removeEventListener('click', handleReviewApprove)
+ controller.detach()
+ }
+ }, [controller, revision, onStepAction])
+
+ if (!revision) {
+ return (
+
+
+ )
+ }
+
+ const visibleSteps = revision.steps.filter((step, index) => {
+ if (step.status !== 'locked') return true
+ return index <= 1 // 只显示前两步（character-setup 和 character-template）
+ })
+
+ return (
+
+
+ 标记当前帧{actionName === null ? '' : ` · ${actionName} #${frameIndex + 1}`} +
+ + + + + ` + } else if (isPassed) { + bodyHtml = ` +角色设定${statusLabel}
+ 已提交角色设定
+ ` + } else { + bodyHtml = `角色设定${statusLabel}
`
+ }
+ break
+
+ case 'character-template':
+ if (isActive) {
+ bodyHtml = `
+ 生成角色图生成中…
+ ${Array.from(
+ { length: 81 },
+ (_, i) => {
+ const x = (i % 9) - 4,
+ y = Math.floor(i / 9) - 4
+ const ring = Math.max(Math.abs(x), Math.abs(y))
+ return ``
+ },
+ ).join('')}
+ 正在生成 6 张候选母版…
+ `
+ } else if (isPassed) {
+ bodyHtml = `
+ 生成角色图${statusLabel}
+ 角色图已生成，下一步确认候选。
+ ` + } else { + bodyHtml = `生成角色图${statusLabel}
`
+ }
+ break
+
+ case 'template-candidate':
+ if (isActive) {
+ const templateStep = getCurrentRevision(run)?.steps.find(
+ (item) => item.type === 'character-template',
+ )
+ const candidates =
+ templateStep?.type === 'character-template' ? (templateStep.output?.images ?? []) : []
+ bodyHtml = `
+ 确认候选${statusLabel}
+ 从候选中选择一张作为身份母版。
+
+ ${candidates.map((candidate, index) => ``).join('')}
+
+ ${candidates.length > 0 ? '' : '生成结果中没有可用候选。
'} + ` + } else if (isPassed) { + bodyHtml = ` +确认候选${statusLabel}
+ 已确认身份母版。
+ ` + } else { + bodyHtml = `确认候选${statusLabel}
`
+ }
+ break
+
+ case 'action-generation':
+ if (isActive) {
+ bodyHtml = `
+ 动作生成生成中…
+
+
+ ${Array.from({ length: 16 }, (_, i) => `${String(i + 1).padStart(2, '0')}`).join('')}
+
+ `
+ } else if (isPassed) {
+ const frames = step.type === 'action-generation' ? (step.output?.frames ?? []) : []
+ bodyHtml = `
+ 动作生成${statusLabel}
+
+ ${frames.map((frame, i) => `})
${String(i + 1).padStart(2, '0')}`).join('')}
+
+ 动作帧已生成，进入审核。
+ ` + } else { + bodyHtml = `动作生成${statusLabel}
`
+ }
+ break
+
+ case 'review': {
+ const publishReady = canPublishToPlaytest(run)
+
+ if (isActive) {
+ bodyHtml = `
+ 审核${statusLabel}
+ 检查所有动作是否符合预期。
+ + ` + } else if (isPassed) { + bodyHtml = ` +审核已完成
+ 全部完成！
+ + ` + } else { + bodyHtml = `审核${statusLabel}
`
+ }
+ break
+ }
+
+ default:
+ bodyHtml = `${meta.title}${statusLabel}
`
+ }
+ }
+
+ const hasInput = step.type !== 'character-setup'
+ const hasOutput = step.type !== 'review'
+ const outputEnabled = isPassed || isActive
+
+ return `
+ ${meta.title}
+ +${bodyHtml}
+ ${hasInput ? `` : ''}
+ ${hasOutput ? `` : ''}
+
+
+
+
+ 无法加载工作流
+ 找不到当前版本
+
+
+
+
+
+ )
+}
+
+function getHintText(revision: WorkflowRevision): string {
+ const activeStep = revision.steps.find((s) => s.status === 'active')
+ if (!activeStep) return '所有步骤已完成'
+ const meta = NODE_TITLES[activeStep.type]
+ return meta ? `当前：${meta.title}` : `当前：${activeStep.type}`
+}
diff --git a/frontend/src/pages/workflow-editor/workflow-editor.css b/frontend/src/pages/workflow-editor/workflow-editor.css
new file mode 100644
index 0000000..a1c699c
--- /dev/null
+++ b/frontend/src/pages/workflow-editor/workflow-editor.css
@@ -0,0 +1,918 @@
+/* 工作流编辑器样式 */
+:root {
+ --wf-white: #dfe3df;
+ --wf-ink: #171817;
+ --wf-muted: #747973;
+ --wf-line: #e2e3de;
+ --wf-accent: #263f2d;
+ --wf-accent-soft: #e4ebe2;
+}
+
+.workflow-app {
+ min-height: 100vh;
+ background: var(--wf-white);
+}
+
+/* Studio Bar */
+.studio-bar {
+ position: sticky;
+ z-index: 20;
+ top: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 52px;
+ padding: 0 clamp(16px, 3vw, 48px);
+ border-bottom: 1px solid rgba(31, 43, 34, 0.1);
+ background: rgba(223, 227, 223, 0.88);
+ backdrop-filter: blur(18px);
+}
+.studio-bar__left,
+.studio-bar__right {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+.studio-bar__brand {
+ display: inline-flex;
+ gap: 8px;
+ align-items: center;
+ color: var(--wf-ink);
+ text-decoration: none;
+}
+.studio-bar__brand .product-brand__mark {
+ display: block;
+ width: 28px;
+ height: 28px;
+ background: var(--wf-ink);
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%231b1b1b'/%3E%3Cpath d='M16 5 27 16 16 27 5 16Z' fill='%23ff6b35'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23fff4e8'/%3E%3C/svg%3E")
+ center/contain no-repeat;
+ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%231b1b1b'/%3E%3Cpath d='M16 5 27 16 16 27 5 16Z' fill='%23ff6b35'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23fff4e8'/%3E%3C/svg%3E")
+ center/contain no-repeat;
+}
+.studio-bar__brand b {
+ font-family: Georgia, 'Times New Roman', serif;
+ font-size: 16px;
+ font-weight: 700;
+}
+.studio-bar__project {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ padding-left: 12px;
+ border-left: 1px solid var(--wf-line);
+}
+.studio-bar__project b {
+ font-size: 12px;
+ font-weight: 600;
+}
+.studio-bar__project small {
+ font-size: 10px;
+ color: var(--wf-muted);
+}
+.studio-bar__nav {
+ display: flex;
+ gap: 4px;
+}
+.studio-bar__nav a {
+ display: inline-flex;
+ min-height: 32px;
+ align-items: center;
+ padding: 0 10px;
+ border-radius: 8px;
+ color: #5e635d;
+ font-size: 11px;
+ font-weight: 600;
+ text-decoration: none;
+}
+.studio-bar__nav a:hover {
+ background: rgba(255, 255, 255, 0.6);
+}
+.studio-bar__nav a.is-active {
+ color: var(--wf-accent);
+ background: var(--wf-accent-soft);
+}
+.studio-bar__actions {
+ display: flex;
+ gap: 4px;
+}
+.studio-bar__actions button {
+ min-height: 32px;
+ padding: 0 10px;
+ border: 1px solid var(--wf-line);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.6);
+ font-size: 11px;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+/* Production Canvas */
+.production-canvas-workspace {
+ height: calc(100svh - 52px);
+ min-height: 660px;
+ overflow: hidden;
+ background: var(--wf-white);
+}
+
+/* Project Setup */
+.project-setup {
+ display: grid;
+ width: 100%;
+ min-height: 100%;
+ place-items: center;
+ padding: 40px;
+ background:
+ radial-gradient(circle at 78% 18%, rgba(88, 111, 94, 0.08), transparent 28%),
+ linear-gradient(150deg, #f8f7f3, #ecece7 74%);
+}
+.project-setup__form {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+ max-width: 560px;
+ width: 100%;
+}
+.project-setup__form-head {
+ grid-column: 1 / -1;
+}
+.project-setup__form-head h2 {
+ margin: 0;
+ font:
+ 500 32px/1.1 Georgia,
+ 'Songti SC',
+ serif;
+}
+.project-setup__wide {
+ grid-column: 1 / -1;
+}
+.project-setup__form label {
+ display: grid;
+ gap: 6px;
+}
+.project-setup__form label span {
+ font-size: 11px;
+ font-weight: 600;
+}
+.project-setup__form input,
+.project-setup__form select,
+.project-setup__form textarea {
+ padding: 10px 12px;
+ border: 1px solid rgba(27, 38, 30, 0.15);
+ border-radius: 10px;
+ background: rgba(255, 255, 255, 0.7);
+ font-size: 13px;
+ font-family: inherit;
+}
+.project-setup__form footer {
+ grid-column: 1 / -1;
+ display: flex;
+ justify-content: flex-end;
+ padding-top: 8px;
+}
+.button--primary {
+ padding: 12px 24px;
+ border: 1px solid var(--wf-accent);
+ border-radius: 12px;
+ background: var(--wf-accent);
+ color: #f2f5f1;
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+}
+.button--primary:hover {
+ background: #1d3025;
+}
+
+/* Setup Messages */
+.setup-notice {
+ margin: 12px 40px;
+ padding: 12px 16px;
+ border: 1px solid #c7a967;
+ border-radius: 12px;
+ background: #f4eddc;
+ color: #67552e;
+ font-size: 13px;
+}
+.setup-error {
+ margin: 12px 40px;
+ padding: 12px 16px;
+ border-radius: 12px;
+ background: #311b19;
+ color: #ffd3cc;
+ font-size: 13px;
+}
+.setup-loading {
+ margin: 12px 40px;
+ color: #687069;
+ font-size: 13px;
+}
+
+/* Error View */
+.error-view {
+ padding: 80px 40px;
+}
+.error-view .overline {
+ font-family: ui-monospace, monospace;
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.16em;
+ color: #687069;
+}
+.error-view h1 {
+ margin: 16px 0 12px;
+ font:
+ 500 40px/1.1 Georgia,
+ 'Songti SC',
+ serif;
+}
+.error-view p {
+ color: #687069;
+ font-size: 14px;
+}
+
+/* Studio Mode Gateway */
+.studio-mode-gateway {
+ position: relative;
+ display: grid;
+ width: 100%;
+ min-height: 100%;
+ grid-template-rows: auto 1fr auto;
+ gap: 34px;
+ padding: 112px clamp(30px, 6vw, 104px) 42px;
+ overflow: hidden;
+ background:
+ radial-gradient(circle at 78% 18%, rgba(88, 111, 94, 0.08), transparent 28%),
+ linear-gradient(150deg, #f8f7f3, #ecece7 74%);
+ animation: studio-mode-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+@keyframes studio-mode-enter {
+ from {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.studio-mode-gateway::before {
+ position: absolute;
+ inset: 0;
+ content: '';
+ opacity: 0.28;
+ background-image: radial-gradient(circle, rgba(27, 31, 28, 0.24) 1px, transparent 1.2px);
+ background-size: 24px 24px;
+ pointer-events: none;
+}
+.studio-mode-gateway > * {
+ position: relative;
+ z-index: 1;
+}
+.studio-mode-gateway__header {
+ display: grid;
+ max-width: 720px;
+ gap: 11px;
+}
+.studio-mode-gateway__header .overline {
+ color: #6e756f;
+ font: 700 8px/1 monospace;
+ letter-spacing: 0.18em;
+}
+.studio-mode-gateway__header h1 {
+ margin: 0;
+ font:
+ 500 clamp(34px, 4.2vw, 62px)/1.04 Georgia,
+ 'Songti SC',
+ serif;
+ letter-spacing: -0.035em;
+}
+.studio-mode-gateway__header p {
+ max-width: 610px;
+ margin: 0;
+ color: #666b67;
+ font-size: 12px;
+ line-height: 1.75;
+}
+.studio-mode-gateway__choices {
+ display: grid;
+ min-height: 360px;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 18px;
+}
+.studio-mode-card {
+ position: relative;
+ display: grid;
+ min-height: 100%;
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto 1fr auto;
+ gap: 24px 30px;
+ padding: clamp(26px, 3.5vw, 52px);
+ overflow: hidden;
+ border: 1px solid rgba(20, 20, 20, 0.12);
+ border-radius: 24px;
+ color: #1a1b1a;
+ background: rgba(250, 250, 247, 0.78);
+ box-shadow:
+ 0 26px 64px rgba(28, 35, 30, 0.09),
+ inset 0 1px rgba(255, 255, 255, 0.72);
+ text-align: left;
+ cursor: pointer;
+ transition:
+ border-color 240ms ease,
+ box-shadow 240ms ease,
+ transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
+ text-decoration: none;
+}
+.studio-mode-card:hover {
+ border-color: rgba(40, 69, 48, 0.36);
+ box-shadow:
+ 0 34px 80px rgba(25, 36, 28, 0.15),
+ inset 0 1px #fff;
+ transform: translateY(-6px);
+}
+.studio-mode-card__eyebrow {
+ font: 700 9px/1 monospace;
+ letter-spacing: 0.14em;
+ color: var(--wf-muted);
+ text-transform: uppercase;
+}
+.studio-mode-card__index {
+ font:
+ 500 48px/1 Georgia,
+ serif;
+ color: rgba(23, 24, 23, 0.08);
+}
+.studio-mode-card__copy {
+ display: grid;
+ gap: 8px;
+ align-content: start;
+}
+.studio-mode-card__copy small {
+ font: 700 8px/1 monospace;
+ letter-spacing: 0.14em;
+ color: var(--wf-muted);
+}
+.studio-mode-card__copy b {
+ font:
+ 500 20px/1.2 Georgia,
+ 'Songti SC',
+ serif;
+ color: var(--wf-ink);
+}
+.studio-mode-card__copy p {
+ margin: 0;
+ font-size: 12px;
+ color: #666b67;
+ line-height: 1.6;
+}
+.studio-mode-card__action {
+ align-self: end;
+ font:
+ 600 12px/1 system-ui,
+ sans-serif;
+ color: var(--wf-accent);
+}
+.studio-mode-gateway__note {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ padding: 12px 0;
+ border-top: 1px solid rgba(20, 20, 20, 0.08);
+ color: #666b67;
+ font-size: 11px;
+}
+.studio-mode-gateway__note i {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background: rgba(38, 63, 45, 0.08);
+}
+.studio-mode-gateway__note b {
+ display: block;
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--wf-ink);
+}
+.studio-mode-gateway__note small {
+ font-size: 10px;
+}
+
+/* Node Graph */
+.node-graph-workspace {
+ position: relative;
+ height: 100%;
+ overflow: hidden;
+}
+.node-canvas {
+ position: absolute;
+ inset: 0;
+ overflow: hidden;
+ cursor: grab;
+ touch-action: none;
+ user-select: none;
+ background-color: var(--wf-white);
+ background-image: radial-gradient(circle, rgba(46, 62, 50, 0.18) 1px, transparent 1.25px);
+ background-size: 21px 21px;
+}
+.node-canvas.is-panning {
+ cursor: grabbing;
+}
+.node-surface {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 3000px;
+ height: 1000px;
+ transform-origin: 0 0;
+ will-change: transform;
+}
+.node-wires {
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ width: 3000px;
+ height: 1000px;
+ overflow: visible;
+ pointer-events: none;
+}
+.node-wire {
+ fill: none;
+ stroke-width: 3;
+ stroke: #69866f;
+ vector-effect: non-scaling-stroke;
+ filter: drop-shadow(0 2px 2px rgba(38, 55, 43, 0.18));
+}
+.node-wire.is-suggested {
+ stroke: #b8b4aa;
+ stroke-dasharray: 7 6;
+ opacity: 0.5;
+}
+
+/* Graph Node */
+.graph-node {
+ position: absolute;
+ z-index: 3;
+ width: 292px;
+ overflow: visible;
+ border: 1px solid rgba(27, 38, 30, 0.2);
+ border-radius: 12px;
+ background: rgba(249, 250, 247, 0.98);
+ box-shadow: 0 14px 36px rgba(30, 39, 32, 0.13);
+ cursor: default;
+}
+.graph-node.has-input {
+ border-color: rgba(66, 99, 75, 0.48);
+}
+.graph-node.is-dragging {
+ z-index: 8;
+ box-shadow: 0 23px 54px rgba(26, 37, 29, 0.2);
+}
+.graph-node > header {
+ display: flex;
+ min-height: 48px;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ padding: 8px 12px;
+ border-radius: 11px 11px 0 0;
+ color: #f2f5f1;
+ background: #26352b;
+ cursor: move;
+ user-select: none;
+}
+.graph-node > header span {
+ display: grid;
+ gap: 2px;
+}
+.graph-node > header small {
+ color: #aebcb1;
+ font-size: 6px;
+ font-weight: 800;
+ letter-spacing: 0.12em;
+}
+.graph-node > header h2 {
+ margin: 0;
+ font-size: 10px;
+ font-weight: 720;
+}
+.graph-node > header > i {
+ display: flex;
+ gap: 3px;
+}
+.graph-node > header > i b {
+ width: 3px;
+ height: 3px;
+ border-radius: 50%;
+ background: #89998c;
+}
+.graph-node__body {
+ display: grid;
+ gap: 10px;
+ padding: 13px;
+}
+
+/* Graph Port */
+.graph-port {
+ position: absolute;
+ top: 50%;
+ width: 12px;
+ height: 12px;
+ border: 3px solid #8fa292;
+ border-radius: 50%;
+ background: #f2f4f0;
+ transform: translateY(-50%);
+ cursor: pointer;
+ z-index: 5;
+}
+.graph-port--input {
+ left: -6px;
+}
+.graph-port--output {
+ right: -6px;
+}
+.graph-port[data-enabled='false'] {
+ border-color: #c8c2b7;
+ background: #ece9e1;
+ cursor: not-allowed;
+}
+.graph-port[data-enabled='true']:hover {
+ transform: translateY(-50%) scale(1.3);
+ border-color: var(--wf-accent);
+ background: var(--wf-accent-soft);
+}
+
+/* Node Status */
+.node-status {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ padding: 6px 10px;
+ border-radius: 6px;
+ background: rgba(27, 38, 30, 0.04);
+}
+.node-status span {
+ font-size: 8px;
+ color: #5a5f5a;
+}
+.node-status b {
+ font-size: 8px;
+ font-weight: 700;
+}
+.node-status--active b {
+ color: var(--wf-accent);
+}
+.node-status--passed b {
+ color: #3d6b4a;
+}
+.node-status--failed b {
+ color: #8b332a;
+}
+
+/* Node API Notice */
+.node-api-notice {
+ display: grid;
+ gap: 8px;
+ padding: 10px;
+ border: 1px dashed #c7a967;
+ border-radius: 8px;
+ background: #f4eddc;
+}
+.node-api-notice p {
+ margin: 0;
+ font-size: 10px;
+ color: #67552e;
+ line-height: 1.5;
+}
+
+/* Node Desc */
+.node-desc {
+ margin: 0;
+ font-size: 10px;
+ color: #5a5f5a;
+ line-height: 1.5;
+}
+
+/* Node Action */
+.node-action {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ padding: 8px 12px;
+ border: 1px solid var(--wf-accent);
+ border-radius: 8px;
+ background: var(--wf-accent);
+ color: #f2f5f1;
+ font-size: 10px;
+ font-weight: 700;
+ cursor: pointer;
+ text-decoration: none;
+ text-align: left;
+}
+.node-action:hover {
+ background: #1d3025;
+}
+.node-action strong {
+ font-size: 11px;
+}
+.node-action small {
+ font-size: 9px;
+ opacity: 0.8;
+}
+.node-action--secondary {
+ background: transparent;
+ color: var(--wf-accent);
+}
+.node-action--secondary:hover {
+ background: var(--wf-accent-soft);
+}
+.node-action.is-disabled,
+.node-action[aria-disabled='true'] {
+ opacity: 0.4;
+ cursor: not-allowed;
+ pointer-events: none;
+}
+
+/* Node Action List */
+.node-action-list {
+ display: grid;
+ gap: 6px;
+}
+.node-action-option {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ padding: 10px 12px;
+ border: 1px solid rgba(27, 38, 30, 0.15);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.6);
+ cursor: pointer;
+ text-align: left;
+}
+.node-action-option:hover {
+ border-color: rgba(38, 63, 45, 0.3);
+ background: rgba(255, 255, 255, 0.9);
+}
+.node-action-option strong {
+ font-size: 11px;
+ font-weight: 600;
+}
+.node-action-option small {
+ font-size: 9px;
+ color: var(--wf-muted);
+}
+
+/* Node Candidate List */
+.node-candidate-list {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 6px;
+}
+.node-candidate {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 10px 8px;
+ border: 1px solid rgba(27, 38, 30, 0.15);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.6);
+ cursor: pointer;
+}
+.node-candidate:hover {
+ border-color: rgba(38, 63, 45, 0.3);
+ background: rgba(255, 255, 255, 0.9);
+}
+.node-candidate small {
+ font-size: 9px;
+ font-weight: 600;
+}
+
+/* Node Export Options */
+.node-export-options {
+ display: grid;
+ gap: 8px;
+}
+
+/* Node Canvas Hint */
+.node-canvas-hint {
+ position: absolute;
+ bottom: 16px;
+ left: 50%;
+ z-index: 10;
+ display: flex;
+ min-height: 44px;
+ padding: 8px 16px;
+ transform: translateX(-50%);
+ border: 1px solid rgba(31, 43, 34, 0.1);
+ border-radius: 12px;
+ background: rgba(249, 250, 247, 0.88);
+ backdrop-filter: blur(18px);
+}
+.node-canvas-hint__copy {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+.node-canvas-hint__copy b {
+ font-size: 11px;
+ font-weight: 600;
+}
+.node-canvas-hint__copy > span {
+ font-size: 10px;
+ color: var(--wf-muted);
+}
+
+/* Node Zoom */
+.node-zoom {
+ position: absolute;
+ bottom: 16px;
+ right: 16px;
+ z-index: 10;
+ display: flex;
+ gap: 4px;
+ align-items: center;
+ padding: 4px;
+ border: 1px solid rgba(31, 43, 34, 0.1);
+ border-radius: 10px;
+ background: rgba(249, 250, 247, 0.88);
+}
+.node-zoom button {
+ display: grid;
+ width: 28px;
+ height: 28px;
+ place-items: center;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
+ font-size: 14px;
+ cursor: pointer;
+}
+.node-zoom button:hover {
+ background: rgba(255, 255, 255, 0.8);
+}
+.node-zoom output {
+ min-width: 36px;
+ text-align: center;
+ font-family: ui-monospace, monospace;
+ font-size: 10px;
+}
+
+/* Node Generation Dots — 9×9 grid with ring-based animation */
+.node-generation__dots {
+ display: grid;
+ grid-template-columns: repeat(9, 6px);
+ gap: 2px;
+ justify-content: center;
+ padding: 8px;
+}
+.node-generation__dots i {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: rgba(38, 63, 45, 0.08);
+}
+.node-generation__dots i.dot-ring-0 {
+ background: var(--wf-accent);
+ animation: dot-pulse 1.2s ease infinite;
+}
+.node-generation__dots i.dot-ring-1 {
+ background: rgba(38, 63, 45, 0.25);
+ animation: dot-pulse 1.2s ease 0.1s infinite;
+}
+.node-generation__dots i.dot-ring-2 {
+ background: rgba(38, 63, 45, 0.15);
+ animation: dot-pulse 1.2s ease 0.2s infinite;
+}
+@keyframes dot-pulse {
+ 0%,
+ 100% {
+ opacity: 0.3;
+ transform: scale(0.8);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1.2);
+ }
+}
+
+/* Node Frame Strip — per-frame arrival */
+.node-frame-strip {
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
+ gap: 4px;
+}
+.node-frame-strip span {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2px;
+}
+.node-frame-strip span small {
+ font-size: 7px;
+ color: var(--wf-muted);
+}
+.node-frame-strip .is-arrived {
+ animation: frame-arrive 0.4s ease;
+}
+.node-frame-strip .is-pending i {
+ display: block;
+ width: 28px;
+ height: 28px;
+ border-radius: 4px;
+ background: rgba(27, 38, 30, 0.06);
+ animation: frame-pending 1.5s ease infinite;
+}
+@keyframes frame-arrive {
+ from {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+@keyframes frame-pending {
+ 0%,
+ 100% {
+ opacity: 0.2;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+}
+
+/* Node Connect Surface — click-to-confirm overlay */
+.graph-node__connect-surface {
+ display: none;
+ position: absolute;
+ inset: 0;
+ z-index: 10;
+ border: 2px dashed var(--wf-accent);
+ border-radius: 12px;
+ background: rgba(38, 63, 45, 0.06);
+ cursor: pointer;
+ place-items: center;
+}
+.graph-node.is-waiting-connection .graph-node__connect-surface {
+ display: grid;
+}
+.graph-node__connect-surface span {
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--wf-accent);
+}
+
+/* Node Running State */
+.graph-node.is-running {
+ box-shadow:
+ 0 0 0 2px rgba(87, 121, 96, 0.18),
+ 0 18px 48px rgba(30, 45, 34, 0.18);
+}
+
+/* Connection Flash Animation */
+.graph-node.is-connection-committed {
+ animation: connection-flash 0.9s ease;
+}
+@keyframes connection-flash {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(38, 63, 45, 0.3);
+ }
+ 50% {
+ box-shadow: 0 0 0 8px rgba(38, 63, 45, 0.15);
+ }
+ 100% {
+ box-shadow: 0 14px 36px rgba(30, 39, 32, 0.13);
+ }
+}
+
+/* Wire Draw Animation */
+.node-wire.is-new {
+ animation: wire-draw 0.6s ease forwards;
+ stroke-dasharray: 1;
+ stroke-dashoffset: 1;
+}
+@keyframes wire-draw {
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+
+/* Port Highlight */
+.graph-port.is-connectable {
+ border-color: var(--wf-accent);
+ background: var(--wf-accent-soft);
+ box-shadow: 0 0 0 3px rgba(38, 63, 45, 0.15);
+ animation: port-pulse 1s ease infinite;
+}
+@keyframes port-pulse {
+ 0%,
+ 100% {
+ box-shadow: 0 0 0 3px rgba(38, 63, 45, 0.15);
+ }
+ 50% {
+ box-shadow: 0 0 0 6px rgba(38, 63, 45, 0.08);
+ }
+}
diff --git a/frontend/src/shared/README.md b/frontend/src/shared/README.md
index 1b3dddd..4d62b42 100644
--- a/frontend/src/shared/README.md
+++ b/frontend/src/shared/README.md
@@ -8,6 +8,7 @@
## 现有内容
+- `api/` —— 通用 HTTP 请求、信封解包与传输错误；不认识任何业务 DTO。
- `pagination/` —— 与传输协议无关的分页请求与结果形状。
## 后续允许放入
diff --git a/frontend/src/shared/api/http-client.ts b/frontend/src/shared/api/http-client.ts
new file mode 100644
index 0000000..f610a3e
--- /dev/null
+++ b/frontend/src/shared/api/http-client.ts
@@ -0,0 +1,89 @@
+const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? 'http://127.0.0.1:8000'
+
+interface ApiEnvelope {
+ code: number
+ message: string
+ data: T
+}
+
+export class ApiError extends Error {
+ /** HTTP 状态码。 */
+ readonly status: number
+ /** 业务码（与 HTTP 状态码分离）。 */
+ readonly code: number
+
+ constructor(status: number, code: number, message: string) {
+ super(message)
+ this.name = 'ApiError'
+ this.status = status
+ this.code = code
+ }
+}
+
+export async function request(path: string, init?: RequestInit): Promise {
+ const url = `${BASE_URL}${path}`
+ const headers = new Headers(init?.headers)
+
+ if (!headers.has('Content-Type') && !(init?.body instanceof FormData)) {
+ headers.set('Content-Type', 'application/json')
+ }
+
+ const response = await fetch(url, { ...init, headers })
+
+ if (!response.ok) {
+ let code = response.status
+ let message = response.statusText
+ try {
+ const body = (await response.json()) as Partial>
+ if (body.code !== undefined) code = body.code
+ if (body.message) message = body.message
+ } catch {
+ // 响应体不是 JSON，保留默认错误信息
+ }
+ throw new ApiError(response.status, code, message)
+ }
+
+ let envelope: ApiEnvelope
+ try {
+ envelope = (await response.json()) as ApiEnvelope
+ } catch {
+ throw new ApiError(response.status, response.status, '响应格式错误，无法解析 JSON')
+ }
+ if (envelope.data === null || envelope.data === undefined) {
+ throw new ApiError(
+ response.status,
+ envelope.code ?? response.status,
+ envelope.message || '服务端未返回数据',
+ )
+ }
+ return envelope.data
+}
+
+export function get(path: string): Promise {
+ return request(path)
+}
+
+export function post(path: string, body: unknown): Promise {
+ return request(path, {
+ method: 'POST',
+ body: JSON.stringify(body),
+ })
+}
+
+export function patch(path: string, body: unknown): Promise {
+ return request(path, {
+ method: 'PATCH',
+ body: JSON.stringify(body),
+ })
+}
+
+export function del(path: string): Promise {
+ return request(path, { method: 'DELETE' })
+}
+
+export function upload(path: string, formData: FormData): Promise {
+ return request(path, {
+ method: 'POST',
+ body: formData,
+ })
+}
diff --git a/frontend/src/shared/api/index.ts b/frontend/src/shared/api/index.ts
new file mode 100644
index 0000000..e693e20
--- /dev/null
+++ b/frontend/src/shared/api/index.ts
@@ -0,0 +1,2 @@
+/** 通用 HTTP 能力。这里只处理传输协议，不包含项目、角色等业务映射。 */
+export { ApiError, del, get, patch, post, request, upload } from './http-client'
diff --git a/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json b/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json
new file mode 100644
index 0000000..1bec57d
--- /dev/null
+++ b/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json
@@ -0,0 +1 @@
+{"version":"4.1.10","results":[[":frontend/src/pages/playtest/workbench/analysis/sequence-evidence.test.ts",{"duration":11.368200000000002,"failed":false}],[":frontend/src/pages/playtest/workbench/analysis/frame-geometry.test.ts",{"duration":15.456199999999967,"failed":false}],[":frontend/src/pages/playtest/workbench/playback/playback-state.test.ts",{"duration":7.5692000000000235,"failed":false}],[":frontend/src/pages/playtest/playtest-boundaries.test.ts",{"duration":43.97460000000001,"failed":false}],[":frontend/src/pages/playtest/workbench/model/create-preview-model.test.ts",{"duration":4.972399999999993,"failed":false}],[":frontend/src/pages/playtest/testing/demo-character.test.ts",{"duration":6.655599999999993,"failed":false}],[":frontend/src/pages/playtest/workbench/audit/audit-session.test.ts",{"duration":4.1259000000000015,"failed":false}]]}
\ No newline at end of file