feat(workflow-editor): add real WorkflowRun canvas

frontend/API_CONTRACT.md

@@ -47,12 +47,13 @@ Character
 
 前端只映射后端真实字段：
 
-- Character：`id`、`project_id`、`name`、`description`、`reference_image_url`、`character_data.version`、`status`
+- Character：`id`、`project_id`、`workflow_run_id`、`name`、`description`、`reference_image_url`、`character_data.version`、`status`
 - Outfit：`id`、`name`、`description`、`preview_url`、`actions`
 - Action：`id`、`type`、`name`、`loop`、`fps`、`frame_count`、`frames`
 - Frame：`index`、`image_url`、`duration_ms`
 
 Outfit、Action、Frame 没有独立端点。`outfit.characterId` 与 `action.outfitId` 仅由嵌套关系推导；修改任一子项时通过 `PATCH Character` 提交完整 `character_data`。
+创建 Character 时必须传入 `workflow_run_id`；编辑器也只读取与当前 WorkflowRun 绑定的角色，不能从同项目角色中按顺序猜测。
 
 ## 二、本轮明确不实现
 

frontend/package.json

@@ -14,6 +14,7 @@
     "typecheck": "tsc -b"
   },
   "dependencies": {
+    "@xyflow/react": "^12.11.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-router": "^8.3.0"

frontend/src/app/app.tsx

@@ -1,3 +1,4 @@
+import { lazy, Suspense } from 'react'
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router'
 
 import { AssetLibraryPage } from '@/pages/asset-library'
@@ -9,10 +10,13 @@ import { ProjectDetailPage } from '@/pages/project-detail'
 import { ProjectCreatePage } from '@/pages/project-create'
 import { ProjectsPage } from '@/pages/projects'
 import { QuickStartPage } from '@/pages/quick-start'
-import { WorkflowEditorPage } from '@/pages/workflow-editor'
 import { ProtectedRoute } from '@/features/auth-guard'
 import { AppShellRoute } from './layout'
 
+const WorkflowEditorPage = lazy(() =>
+  import('@/pages/workflow-editor').then(({ WorkflowEditorPage: Page }) => ({ default: Page })),
+)
+
 /**
  * 路由表与全局外壳。
  * 页面自己获取所需数据，不再由 app 层构造服务后逐层传入。
@@ -27,6 +31,14 @@ export function App() {
   )
 }
 
+function LazyWorkflowEditorPage() {
+  return (
+    <Suspense fallback={<div aria-label="正在加载工作流编辑器" />}>
+      <WorkflowEditorPage />
+    </Suspense>
+  )
+}
+
 /** 路由声明独立导出，测试用 MemoryRouter 验证直达地址。 */
 export function AppRoutes() {
   return (
@@ -38,8 +50,8 @@ export function AppRoutes() {
           <Route path="/quick-start/:runId" element={<QuickStartPage />} />
           <Route path="/projects" element={<ProjectsPage />} />
           <Route path="/projects/new" element={<ProjectCreatePage />} />
-          <Route path="/workflow-editor/:runId" element={<WorkflowEditorPage />} />
-          <Route path="/workflow-editor/:runId/:stage" element={<WorkflowEditorPage />} />
+          <Route path="/workflow-editor/:runId" element={<LazyWorkflowEditorPage />} />
+          <Route path="/workflow-editor/:runId/:stage" element={<LazyWorkflowEditorPage />} />
           <Route path="/playtest/:characterId/:outfitId" element={<PlaytestPage />} />
         </Route>
         <Route path="*" element={<NotFoundPage />} />