+ 角色 +
+
+
+
+
+
+ {error ? (
+ + {error} +
+ ) : charactersPage === null ? ( +正在建立资产索引…
+ ) : ( + <> +
+ {characters.map((character) => {
+ const name = characterName(character)
+ const outfit = character.outfits[0]
+ const actionCount = character.outfits.reduce((sum, item) => sum + item.actions.length, 0)
+ return (
+
+
+ )
+}
+
+function EmptyState() {
return (
-
+ {outfit?.previewUrl ? (
+ 
+ ) : (
+
+
+
+ 暂无造型预览
+
+
+ )}
+
+
+
+ )
+ })}
+
+
+
+
+
+ {name}
+{outfit?.name ?? '尚未创建造型'}
+
+ {character.outfits.length} 套造型
+ ·
+ {actionCount} 个动作
+
+ 资产库
-本次只提交模块划分与接口，页面实现进后续 PR。
-
+
)
}
diff --git a/frontend/src/pages/character-detail/index.test.tsx b/frontend/src/pages/character-detail/index.test.tsx
new file mode 100644
index 0000000..993724e
--- /dev/null
+++ b/frontend/src/pages/character-detail/index.test.tsx
@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { MemoryRouter } from 'react-router'
+
+import { AppRoutes } from '@/app'
+import { createProjectAssetsBackend } from '@/test/project-assets-backend'
+
+afterEach(() => {
+ cleanup()
+ vi.unstubAllEnvs()
+ vi.unstubAllGlobals()
+})
+
+function renderCharacter(characterId: string) {
+ const backend = createProjectAssetsBackend()
+ vi.stubEnv('VITE_API_BASE_URL', 'https://api.windup.test')
+ vi.stubGlobal('fetch', backend.fetch)
+ return render(
+ 这个项目还没有角色
+角色会在创建工作流确认后进入这里。
++ {error} +
+ ) + } + if (!character) return正在读取角色资产…
+ + const name = characterName(character) + const selectedOutfit = + character.outfits.find((outfit) => outfit.id === selectedOutfitId) ?? + character.outfits[0] ?? + null + + return ( +
+
+
+ {character.outfits.length === 0 || !selectedOutfit ? (
+
+
+ 返回资产库
+
+
+ + {name} +
+选择动作卡片查看完整帧序列。
+
+ {selectedOutfit ? (
+
+ ) : null}
+
+
+
+
+ + 导出能力待 PR #97 合并并完成资产字段接线 +
+
+
+ ) : (
+ <>
+ 这个角色还没有造型
+
+
+
+ {outfit.previewUrl ? (
+
+ ) : (
+
+
+
+ 暂无造型预览
+
+
+ )}
+
+
+ + {outfit.name} +
+ {outfit.description ? ( +{outfit.description}
+ ) : null} ++ {outfit.actions.length} 个动作 +
+
+
+
+ {outfit.actions.length === 0 ? (
+ + 动作与帧 +
+
+ 点击卡片展开完整帧
+
+
+
+
+ ) : (
+ <>
+ 这个造型还没有动作
+生成并保存动作后会显示在这里。
+
+ {outfit.actions.map((action, index) => {
+ const expanded = selectedAction?.id === action.id
+ const previewFrame = orderedFrames(action)[0]
+ return (
+
+
+
+ )
+ })}
+
+
+ {selectedAction ? (
+
+
+
+
+
+
+ {selectedAction.name}
+ + {actionTypeLabel(selectedAction.type)} + ++ {selectedAction.fps} FPS · {selectedAction.frameCount} 帧 ·{' '} + {selectedAction.loop ? '循环播放' : '单次播放'} +
+
+
+
+
+ 动作模板后端未提供
++ {characterName(character)} / {outfit.name} / {selectedAction.name} +
+
+
+ -
+ {orderedFrames(selectedAction).map((frame) => (
+
-
+ ++
+
+ #{String(frame.index + 1).padStart(2, '0')} + + {frame.durationMs === null + ? `按 ${selectedAction.fps} FPS` + : `${frame.durationMs} ms`} + ++
+ ))}
+
+ {error} +
+ ) + } + if (!project) return正在读取项目…
+ + const constraints = [ + ['视角', CHARACTER_PERSPECTIVE[project.perspective]], + ['朝向', DIRECTIONAL_MOVEMENT[project.directionalMovement]], + ['尺寸', `${project.spriteSize.width} × ${project.spriteSize.height}`], + ['画风', project.gameStyle ?? '尚未设定'], + ] + return ( -项目详情
-本次只提交模块划分与接口，页面实现进后续 PR。
-
+
+
+
)
}
diff --git a/frontend/src/pages/projects/index.test.tsx b/frontend/src/pages/projects/index.test.tsx
new file mode 100644
index 0000000..6136953
--- /dev/null
+++ b/frontend/src/pages/projects/index.test.tsx
@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { MemoryRouter } from 'react-router'
+
+import { AppRoutes } from '@/app'
+import { createProjectAssetsBackend } from '@/test/project-assets-backend'
+
+afterEach(() => {
+ cleanup()
+ vi.unstubAllEnvs()
+ vi.unstubAllGlobals()
+})
+
+function installBackend() {
+ const backend = createProjectAssetsBackend()
+ vi.stubEnv('VITE_API_BASE_URL', 'https://api.windup.test')
+ vi.stubGlobal('fetch', backend.fetch)
+ return backend
+}
+
+describe('ProjectsPage', () => {
+ it('renders backend Projects as the first browsing level', async () => {
+ installBackend()
+ const { container } = render(
+
+
+
+
+ 项目列表
-本次只提交模块划分与接口，页面实现进后续 PR。
+
+
+
+ + 项目中心 +
++ 项目隔离角色资产与生成规格；先选项目，再管理其资产。 +
++ {error} +
+ ) : projectsPage === null ? ( +正在读取项目…
+ ) : projectsPage.total === 0 ? ( +
+
+ ) : (
+ 还没有项目
+完成新建项目流程后，项目会显示在这里。
+
+ {projectsPage.items.map((project, index) => (
+ setDeleteTarget(project)}
+ />
+ ))}
+
+ )}
+ {projectsPage ? (
+
+
+
+
+ + {project.name} +
+更新于 {updatedAt}
+-
+
- 视角 / 朝向 +
- + {CHARACTER_PERSPECTIVE[project.perspective]} ·{' '} + {DIRECTIONAL_MOVEMENT[project.directionalMovement]} + +
- 精灵尺寸 +
- + {project.spriteSize.width} × {project.spriteSize.height} + +
- 画风约束 +
- + {project.gameStyle ?? '尚未设定'} + +
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/shared/ui/index.ts b/frontend/src/shared/ui/index.ts
index dab9f90..8aeaf70 100644
--- a/frontend/src/shared/ui/index.ts
+++ b/frontend/src/shared/ui/index.ts
@@ -1,2 +1,4 @@
export { PageContainer } from './page-container'
export type { PageContainerProps } from './page-container'
+export { Pagination } from './pagination'
+export type { PaginationProps } from './pagination'
diff --git a/frontend/src/shared/ui/pagination.tsx b/frontend/src/shared/ui/pagination.tsx
new file mode 100644
index 0000000..59c7ba3
--- /dev/null
+++ b/frontend/src/shared/ui/pagination.tsx
@@ -0,0 +1,45 @@
+export interface PaginationProps {
+ page: number
+ pageSize: number
+ total: number
+ disabled?: boolean
+ onPageChange: (page: number) => void
+}
+
+/** 后端分页列表共用的最小翻页控件，不解释具体业务项。 */
+export function Pagination({
+ page,
+ pageSize,
+ total,
+ disabled = false,
+ onPageChange,
+}: PaginationProps) {
+ const totalPages = Math.max(1, Math.ceil(total / pageSize))
+ if (totalPages === 1) return null
+
+ return (
+
+ )
+}
diff --git a/frontend/src/test/project-assets-backend.ts b/frontend/src/test/project-assets-backend.ts
new file mode 100644
index 0000000..3931365
--- /dev/null
+++ b/frontend/src/test/project-assets-backend.ts
@@ -0,0 +1,227 @@
+const projectDtos = [
+ {
+ id: 42,
+ user_id: 7,
+ workflow_id: null,
+ project_name: '点灯人 · MVP',
+ character_perspective: 1,
+ directional_movement: 2,
+ sprite_width: 64,
+ sprite_height: 64,
+ game_style: '低饱和像素绘本',
+ sprite_sample_url: null,
+ create_at: '2026-08-01T08:00:00Z',
+ update_at: '2026-08-04T10:30:00Z',
+ },
+ {
+ id: 99,
+ user_id: 7,
+ workflow_id: null,
+ project_name: '空白海岸',
+ character_perspective: 2,
+ directional_movement: 3,
+ sprite_width: 128,
+ sprite_height: 128,
+ game_style: null,
+ sprite_sample_url: null,
+ create_at: '2026-08-02T08:00:00Z',
+ update_at: '2026-08-03T09:00:00Z',
+ },
+]
+
+const characterDtos = [
+ {
+ id: 51,
+ project_id: 42,
+ name: '轻装信使',
+ description: '负责远途投递的年轻信使',
+ reference_image_url: 'https://cdn.windup.test/messenger-reference.png',
+ character_data: {
+ version: 1,
+ outfits: [
+ {
+ id: 'outfit-default',
+ name: '常态造型',
+ description: '旅行装束',
+ preview_url: 'https://cdn.windup.test/messenger-outfit.png',
+ actions: [
+ {
+ id: 'idle',
+ type: 'idle',
+ name: '呼吸待机',
+ loop: true,
+ fps: 8,
+ frame_count: 2,
+ frames: [
+ {
+ index: 0,
+ image_url: 'https://cdn.windup.test/idle-01.png',
+ duration_ms: null,
+ },
+ {
+ index: 1,
+ image_url: 'https://cdn.windup.test/idle-02.png',
+ duration_ms: 125,
+ },
+ ],
+ },
+ {
+ id: 'walk',
+ type: 'walk',
+ name: '行走',
+ loop: true,
+ fps: 10,
+ frame_count: 3,
+ frames: [
+ {
+ index: 2,
+ image_url: 'https://cdn.windup.test/walk-03.png',
+ duration_ms: 100,
+ },
+ {
+ index: 0,
+ image_url: 'https://cdn.windup.test/walk-01.png',
+ duration_ms: null,
+ },
+ {
+ index: 1,
+ image_url: 'https://cdn.windup.test/walk-02.png',
+ duration_ms: 100,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ status: 1,
+ },
+ {
+ id: 52,
+ project_id: 42,
+ name: '待定角色',
+ description: null,
+ reference_image_url: null,
+ character_data: {
+ version: 1,
+ outfits: [
+ {
+ id: 'outfit-draft',
+ name: '未命名造型',
+ description: null,
+ preview_url: null,
+ actions: [],
+ },
+ ],
+ },
+ status: 1,
+ },
+]
+
+function response(data: unknown, message = 'success') {
+ return new Response(JSON.stringify({ code: 200, message, data }), {
+ headers: { 'content-type': 'application/json' },
+ })
+}
+
+function listResponse(data: unknown[], page: number, pageSize: number, total: number) {
+ return new Response(
+ JSON.stringify({
+ code: 200,
+ message: 'success',
+ data,
+ total,
+ page,
+ page_size: pageSize,
+ }),
+ { headers: { 'content-type': 'application/json' } },
+ )
+}
+
+/** 测试环境中的 HTTP 服务替身；生产代码和生产包不会导入这里。 */
+export interface ProjectAssetsBackendOptions {
+ projectCount?: number
+ characterCount?: number
+}
+
+function projectFixtures(count: number) {
+ const fixtures = structuredClone(projectDtos.slice(0, count))
+ for (let index = fixtures.length; index < count; index += 1) {
+ fixtures.push({
+ ...structuredClone(projectDtos[0]),
+ id: 1_000 + index,
+ project_name: `分页项目 ${index + 1}`,
+ })
+ }
+ return fixtures
+}
+
+function characterFixtures(count: number) {
+ const fixtures = structuredClone(characterDtos.slice(0, count))
+ for (let index = fixtures.length; index < count; index += 1) {
+ fixtures.push({
+ ...structuredClone(characterDtos[0]),
+ id: 2_000 + index,
+ name: `分页角色 ${index + 1}`,
+ })
+ }
+ return fixtures
+}
+
+export function createProjectAssetsBackend({
+ projectCount = projectDtos.length,
+ characterCount = characterDtos.length,
+}: ProjectAssetsBackendOptions = {}) {
+ let projects = projectFixtures(projectCount)
+ const characters = characterFixtures(characterCount)
+ const requests: Request[] = []
+
+ const fetch: typeof globalThis.fetch = async (input, init) => {
+ const request = new Request(input, init)
+ requests.push(request.clone())
+ const url = new URL(request.url)
+
+ if (request.method === 'GET' && url.pathname === '/projects') {
+ const page = Number(url.searchParams.get('page') ?? 1)
+ const pageSize = Number(url.searchParams.get('page_size') ?? 20)
+ const start = (page - 1) * pageSize
+ return listResponse(projects.slice(start, start + pageSize), page, pageSize, projects.length)
+ }
+
+ if (url.pathname.startsWith('/projects/')) {
+ const projectId = Number(url.pathname.split('/').at(-1))
+ const project = projects.find((item) => item.id === projectId)
+ if (request.method === 'GET' && project) return response(project)
+ if (request.method === 'DELETE' && project) {
+ projects = projects.filter((item) => item.id !== projectId)
+ return response(null, '删除成功')
+ }
+ return new Response(JSON.stringify({ code: 404, message: '项目不存在', data: null }))
+ }
+
+ if (request.method === 'GET' && url.pathname === '/characters') {
+ const projectId = Number(url.searchParams.get('project_id'))
+ const page = Number(url.searchParams.get('page') ?? 1)
+ const pageSize = Number(url.searchParams.get('page_size') ?? 20)
+ const projectCharacters = characters.filter((item) => item.project_id === projectId)
+ const start = (page - 1) * pageSize
+ return listResponse(
+ projectCharacters.slice(start, start + pageSize),
+ page,
+ pageSize,
+ projectCharacters.length,
+ )
+ }
+
+ if (request.method === 'GET' && url.pathname.startsWith('/characters/')) {
+ const characterId = Number(url.pathname.split('/').at(-1))
+ const character = characters.find((item) => item.id === characterId)
+ if (character) return response(character)
+ return new Response(JSON.stringify({ code: 404, message: '角色不存在', data: null }))
+ }
+
+ throw new Error(`测试后端未处理 ${request.method} ${url.pathname}`)
+ }
+
+ return { fetch, requests }
+}
删除“{project.name}”？
++ 删除后无法恢复这条项目记录。请先确认项目下资产已经妥善处理。 +
+
+
+
+
+