zijunchiang/opendance-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 17 Wiki Activity

feat(motions): 动作预览——骨架缩略图 + 管理端 3D 回放（契约 data-models 0.6.0）

Browse Source 
按《DSH 开发文档 v1.6》4.11（T-WEB-014，用户标注「重要」）：

服务端：
- 抽出公共 PNG 编码器 src/common/png.ts（模型缩略图改为复用，零原生依赖不变）
- 新增 src/motions/motion-thumbnail.ts：关键点序列 -> 正视图骨架 PNG
  （复用 33 点 PARENT_TABLE 连线，包围盒按整段计算，低置信度点不画）
- motions 增 thumbnail_asset_id（迁移 AddMotionThumbnail）+ AssetKind.MotionThumbnail
- /preprocess 生成缩略图并落库，失败只记 warning；MotionDto 增 thumbnailUrl（契约 0.6.0）

管理端：
- 新增 MotionPreview：懒加载 NDJSON -> 骨架线框 + 关节实例球体
  支持播放/暂停、上一帧/下一帧、时间轴拖动、0.25x-2x 变速、循环
  叠加帧号/当前时间/总时长，按整段包围盒自动取景
  three.js 单独分包（lazy + Suspense），主包 241 kB 不涨
- 动作列表新增 40px 骨架缩略图列（点击开预览）+ 预览按钮 + 内联预览面板
- 新增 admin/src/lib/keypoint-sequence.ts 与 lib/skeleton-topology.ts

测试：新增 8 项；规模 18 文件 / 237 项。版本 0.5.0。
This commit is contained in:
opendance
2026-09-17 00:21:09 +08:00
parent 9eae6f3e43
commit aad60cbd2e
25 changed files with 1158 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-server/admin/package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "opendance-admin",
"private": true,
"version": "0.4.0",
"version": "0.5.0",
"type": "module",
"description": "OpenDance Studio 管理端（React + TypeScript + Vite）",
"scripts": {
web-server/admin/src/api/types.ts
+2
View File
@@ -102,6 +102,8 @@ export interface Motion extends SourceFields {
durationMs: number | null;
keypointFormat: string | null;
keypointUrl: string | null;
/** 骨架缩略图（预处理时生成；T-WEB-014） */
thumbnailUrl: string | null;
keypointFrames: number | null;
preprocessState: PreprocessState;
preprocessError: string | null;
web-server/admin/src/components/MotionPreview.tsx
+370
View File
@@ -0,0 +1,370 @@
/**
* 动作预览：关键点序列 3D 回放（T-WEB-014）。
*
* 只用 three.js 的核心能力（LineSegments + InstancedMesh），不依赖 three-vrm：
* * 骨架：按 `skeleton-topology.ts` 的骨段建 LineSegments，逐帧写 position；
* * 关节：InstancedMesh 球体，逐帧写实例矩阵（低置信度点缩放为 0 隐藏）；
* * 交互：播放 / 暂停 / 逐帧 / 时间轴拖动 / 变速 / 循环；
* * 数据：`GET /api/motions/:id/keypoints`（NDJSON，懒加载，切换动作时取消旧请求）。
*/
import { useEffect, useMemo, useRef, useState } from 'react';
import * as THREE from 'three';
import { apiUrl } from '../api/client';
import {
BONE_SEGMENTS,
FACE_POINT_LIMIT,
KEYPOINT_NAMES,
VIRTUAL_PELVIS,
VIRTUAL_SHOULDER_CENTER,
} from '../lib/skeleton-topology';
import { type ParsedKeypointSequence, parseKeypointNdjson, sequenceBounds } from '../lib/keypoint-sequence';
import { useAsync } from '../lib/useAsync';
import { ErrorBox, Loading } from './ui';
const SPEEDS = [0.25, 0.5, 1, 2] as const;
const MIN_VISIBILITY = 0.3;
interface MotionPreviewProps {
motionId: number;
/** 画布高度（px） */
height?: number;
}
/** 把预览需要的骨架几何一次性建好，之后每帧只更新 buffer */
function buildSkeletonObject(): {
group: THREE.Group;
bones: THREE.LineSegments;
joints: THREE.InstancedMesh;
/** 每个关节实例对应的关键点索引 */
jointIndices: number[];
} {
const group = new THREE.Group();
// 只画身体骨段（面部五官太密，缩略图/预览都不画）
const segments = BONE_SEGMENTS.filter(
([child, parent]) => child >= FACE_POINT_LIMIT && parent >= FACE_POINT_LIMIT,
);
const bonePositions = new Float32Array(segments.length * 2 * 3);
const boneGeometry = new THREE.BufferGeometry();
boneGeometry.setAttribute('position', new THREE.BufferAttribute(bonePositions, 3));
const bones = new THREE.LineSegments(
boneGeometry,
new THREE.LineBasicMaterial({ color: 0x60a5fa, linewidth: 2 }),
);
bones.frustumCulled = false;
group.add(bones);
const jointIndices: number[] = [];
for (let index = FACE_POINT_LIMIT; index < KEYPOINT_NAMES.length; index += 1) jointIndices.push(index);
const jointGeometry = new THREE.SphereGeometry(0.035, 10, 8);
const jointMaterial = new THREE.MeshStandardMaterial({ color: 0xf8fafc, roughness: 0.6, metalness: 0 });
const joints = new THREE.InstancedMesh(jointGeometry, jointMaterial, jointIndices.length);
joints.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
joints.frustumCulled = false;
group.add(joints);
return { group, bones, joints, jointIndices };
}
export function MotionPreview({ motionId, height = 360 }: MotionPreviewProps): JSX.Element {
const mountRef = useRef<HTMLDivElement | null>(null);
const sequenceRef = useRef<ParsedKeypointSequence | null>(null);
const cursorRef = useRef(0);
const playingRef = useRef(true);
const speedRef = useRef(1);
const loopRef = useRef(true);
const [playing, setPlaying] = useState(true);
const [speed, setSpeed] = useState(1);
const [loop, setLoop] = useState(true);
const [cursor, setCursor] = useState(0);
const state = useAsync(
() =>
fetch(apiUrl(`/api/motions/${motionId}/keypoints`))
.then((response) => {
if (!response.ok) throw new Error(`关键点下载失败：HTTP ${response.status}`);
return response.text();
})
.then((text) => parseKeypointNdjson(text)),
[motionId],
);
const summary = useMemo(() => {
if (!state.data) return null;
const { frames, frameIntervalMs } = state.data;
if (frames.length === 0) return null;
return { count: frames.length, interval: frameIntervalMs };
}, [state]);
useEffect(() => {
sequenceRef.current = state.data ?? null;
cursorRef.current = 0;
setCursor(0);
}, [state]);
useEffect(() => {
playingRef.current = playing;
}, [playing]);
useEffect(() => {
speedRef.current = speed;
}, [speed]);
useEffect(() => {
loopRef.current = loop;
}, [loop]);
useEffect(() => {
const mount = mountRef.current;
if (!mount) return;
const width = Math.max(1, mount.clientWidth);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x181a20);
const camera = new THREE.PerspectiveCamera(38, width / height, 0.01, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
renderer.setSize(width, height, false);
mount.appendChild(renderer.domElement);
scene.add(new THREE.AmbientLight(0xffffff, 1.1));
const key = new THREE.DirectionalLight(0xffffff, 1.6);
key.position.set(1, 2, 2);
scene.add(key);
const rim = new THREE.DirectionalLight(0x88bbff, 0.8);
rim.position.set(-1.5, 1, -1.5);
scene.add(rim);
const { group, bones, joints, jointIndices } = buildSkeletonObject();
scene.add(group);
// 网格地面（帮助判断朝向与高度）
const grid = new THREE.GridHelper(4, 8, 0x334155, 0x1f2937);
grid.position.y = -1;
scene.add(grid);
const resize = (): void => {
const nextWidth = Math.max(1, mount.clientWidth);
camera.aspect = nextWidth / height;
camera.updateProjectionMatrix();
renderer.setSize(nextWidth, height, false);
};
const observer = new ResizeObserver(resize);
observer.observe(mount);
const clock = new THREE.Clock();
let raf = 0;
let elapsed = 0;
let lastRendered = -1;
const applyFrame = (sequence: ParsedKeypointSequence, index: number): void => {
const frame = sequence.frames[Math.min(sequence.frames.length - 1, Math.max(0, index))];
if (!frame) return;
const { positions, visibility } = frame;
// 骨段：虚拟关节用实际点替代（骨盆=左右髋中点，肩中心=左右肩中点）
const pointAt = (index2: number, out: THREE.Vector3): THREE.Vector3 => {
if (index2 === VIRTUAL_PELVIS) {
out.set(
(positions[23 * 3] + positions[24 * 3]) / 2,
(positions[23 * 3 + 1] + positions[24 * 3 + 1]) / 2,
(positions[23 * 3 + 2] + positions[24 * 3 + 2]) / 2,
);
return out;
}
if (index2 === VIRTUAL_SHOULDER_CENTER) {
out.set(
(positions[11 * 3] + positions[12 * 3]) / 2,
(positions[11 * 3 + 1] + positions[12 * 3 + 1]) / 2,
(positions[11 * 3 + 2] + positions[12 * 3 + 2]) / 2,
);
return out;
}
out.set(positions[index2 * 3], positions[index2 * 3 + 1], positions[index2 * 3 + 2]);
return out;
};
const attr = bones.geometry.getAttribute('position') as THREE.BufferAttribute;
const array = attr.array as Float32Array;
const scratchA = new THREE.Vector3();
const scratchB = new THREE.Vector3();
const segments = BONE_SEGMENTS.filter(
([child, parent]) => child >= FACE_POINT_LIMIT && parent >= FACE_POINT_LIMIT,
);
for (let index2 = 0; index2 < segments.length; index2 += 1) {
const [child, parent] = segments[index2];
pointAt(child, scratchA);
pointAt(parent, scratchB);
array[index2 * 6] = scratchA.x;
array[index2 * 6 + 1] = scratchA.y;
array[index2 * 6 + 2] = scratchA.z;
array[index2 * 6 + 3] = scratchB.x;
array[index2 * 6 + 4] = scratchB.y;
array[index2 * 6 + 5] = scratchB.z;
}
attr.needsUpdate = true;
const matrix = new THREE.Matrix4();
const scale = new THREE.Vector3();
const zero = new THREE.Vector3(0, 0, 0);
const position = new THREE.Vector3();
const quaternion = new THREE.Quaternion();
for (let slot = 0; slot < jointIndices.length; slot += 1) {
const pointIndex = jointIndices[slot];
const visible = visibility[pointIndex] >= MIN_VISIBILITY;
position.set(
positions[pointIndex * 3],
positions[pointIndex * 3 + 1],
positions[pointIndex * 3 + 2],
);
scale.setScalar(visible ? 1 : 0);
if (!visible) position.copy(zero);
matrix.compose(position, quaternion, scale);
joints.setMatrixAt(slot, matrix);
}
joints.instanceMatrix.needsUpdate = true;
};
const tick = (): void => {
raf = requestAnimationFrame(tick);
const delta = clock.getDelta();
const sequence = sequenceRef.current;
if (sequence && sequence.frames.length > 0) {
if (playingRef.current) {
elapsed += delta * 1000 * speedRef.current;
const step = sequence.frameIntervalMs > 0 ? sequence.frameIntervalMs : 1000 / 30;
let next = cursorRef.current + elapsed / step;
elapsed = 0;
if (next >= sequence.frames.length) {
if (loopRef.current) {
next %= sequence.frames.length;
} else {
next = sequence.frames.length - 1;
playingRef.current = false;
setPlaying(false);
}
}
cursorRef.current = next;
const integer = Math.floor(next);
if (integer !== lastRendered) {
lastRendered = integer;
setCursor(integer);
}
}
applyFrame(sequence, Math.floor(cursorRef.current));
// 相机跟随包围盒（取整段包围盒，避免逐帧抖动）
if (sequence.frames.length > 0 && !mount.dataset.framed) {
const bounds = sequenceBounds(sequence.frames);
if (bounds) {
const center = new THREE.Vector3(
(bounds.min[0] + bounds.max[0]) / 2,
(bounds.min[1] + bounds.max[1]) / 2,
(bounds.min[2] + bounds.max[2]) / 2,
);
const size = Math.max(
bounds.max[0] - bounds.min[0],
bounds.max[1] - bounds.min[1],
bounds.max[2] - bounds.min[2],
0.5,
);
group.position.set(-center.x, -center.y, -center.z);
camera.position.set(0.6 * size, 0.7 * size, 2.6 * size);
camera.lookAt(0, 0, 0);
mount.dataset.framed = '1';
}
}
}
renderer.render(scene, camera);
};
raf = requestAnimationFrame(tick);
return () => {
cancelAnimationFrame(raf);
observer.disconnect();
renderer.dispose();
bones.geometry.dispose();
(bones.material as THREE.Material).dispose();
joints.geometry.dispose();
(joints.material as THREE.Material).dispose();
if (renderer.domElement.parentNode === mount) mount.removeChild(renderer.domElement);
delete mount.dataset.framed;
};
}, [height, motionId]);
if (state.loading) return <Loading text="正在加载关键点序列…" />;
if (state.error) {
return <ErrorBox message={state.error} onRetry={state.reload} />;
}
if (!summary) {
return (
<div className="banner banner-warn" role="status">
<strong>该动作还没有关键点序列</strong>
<span>先执行「预处理」（POST /api/motions/:id/preprocess）后再预览。</span>
</div>
);
}
const total = summary.count;
const currentTimeMs = Math.round((cursor * summary.interval) / 1000 * 1000) / 1000;
return (
<div className="motion-preview">
<div className="motion-preview-canvas" ref={mountRef} style={{ height }} />
<div className="motion-preview-bar">
<button type="button" className="btn btn-ghost" onClick={() => setPlaying((value) => !value)}>
{playing ? '暂停' : '播放'}
</button>
<button
type="button"
className="btn btn-ghost"
onClick={() => {
setPlaying(false);
cursorRef.current = Math.max(0, Math.floor(cursorRef.current) - 1);
setCursor(Math.floor(cursorRef.current));
}}
>
上一帧
</button>
<button
type="button"
className="btn btn-ghost"
onClick={() => {
setPlaying(false);
cursorRef.current = Math.min(total - 1, Math.floor(cursorRef.current) + 1);
setCursor(Math.floor(cursorRef.current));
}}
>
下一帧
</button>
<input
type="range"
min={0}
max={Math.max(0, total - 1)}
value={cursor}
onChange={(event) => {
setPlaying(false);
const next = Number(event.target.value);
cursorRef.current = next;
setCursor(next);
}}
aria-label="时间轴"
/>
<span className="mono small">
第 {cursor + 1}/{total} 帧 · {currentTimeMs.toFixed(2)}s · {(total * summary.interval / 1000).toFixed(2)}s
</span>
<label className="motion-preview-speed">
速度
<select value={speed} onChange={(event) => setSpeed(Number(event.target.value))}>
{SPEEDS.map((value) => (
<option key={value} value={value}>
{value}x
</option>
))}
</select>
</label>
<label className="motion-preview-speed">
<input type="checkbox" checked={loop} onChange={(event) => setLoop(event.target.checked)} />
循环
</label>
</div>
</div>
);
}
web-server/admin/src/lib/keypoint-sequence.ts
+117
View File
@@ -0,0 +1,117 @@
/**
* 关键点序列（NDJSON）解析与回放辅助（T-WEB-014）。
*
* 数据来源：`GET /api/motions/:id/keypoints`，每行一帧：
* `{"frame":0,"timeMs":0,"points":[[x,y,z,visibility] x 33],"angles":[...9]}`
*
* 解析后转成**扁平 Float32Array**：33 点 x 3 轴 + 33 个置信度，
* 供 three.js 逐帧更新（避免每帧创建对象数组导致 GC 抖动）。
*/
export interface ParsedKeypointFrame {
/** 服务端帧号 */
frame: number;
timeMs: number;
/** 长度 33*3：[x,y,z] x 33（与 contracts/skeleton-topology.md §1 顺序一致） */
positions: Float32Array;
/** 长度 33 的置信度 */
visibility: Float32Array;
/** 9 个关节角余弦（DTW 输入，预览不用但保留） */
angles: number[];
}
export interface ParsedKeypointSequence {
frames: ParsedKeypointFrame[];
/** 平均帧间隔（毫秒）；用于播放速度 */
frameIntervalMs: number;
durationMs: number;
}
const POINT_COUNT = 33;
function toNumber(value: unknown, fallback = 0): number {
return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
}
/** 解析一行；结构不合法返回 null（跳过该行而不是整段失败） */
function parseLine(line: string): ParsedKeypointFrame | null {
let raw: unknown;
try {
raw = JSON.parse(line);
} catch {
return null;
}
if (!raw || typeof raw !== 'object') return null;
const obj = raw as { frame?: unknown; timeMs?: unknown; points?: unknown; angles?: unknown };
if (!Array.isArray(obj.points) || obj.points.length === 0) return null;
const count = Math.min(POINT_COUNT, obj.points.length);
const positions = new Float32Array(POINT_COUNT * 3);
const visibility = new Float32Array(POINT_COUNT);
for (let index = 0; index < count; index += 1) {
const point = obj.points[index];
if (!Array.isArray(point)) continue;
positions[index * 3] = toNumber(point[0]);
positions[index * 3 + 1] = toNumber(point[1]);
positions[index * 3 + 2] = toNumber(point[2]);
visibility[index] = toNumber(point[3], 1);
}
return {
frame: toNumber(obj.frame),
timeMs: toNumber(obj.timeMs),
positions,
visibility,
angles: Array.isArray(obj.angles) ? obj.angles.map((value) => toNumber(value)) : [],
};
}
/**
* 解析 NDJSON；空串 / 全部非法时返回 `frames: []`（调用方给"无数据"提示，不抛错）。
*/
export function parseKeypointNdjson(text: string): ParsedKeypointSequence {
const frames: ParsedKeypointFrame[] = [];
for (const line of text.split(/\r?\n/)) {
if (line.trim().length === 0) continue;
const frame = parseLine(line);
if (frame) frames.push(frame);
}
let interval = 1000 / 30;
if (frames.length >= 2) {
const first = frames[0].timeMs;
const last = frames[frames.length - 1].timeMs;
const span = last - first;
if (span > 0) interval = span / (frames.length - 1);
}
const durationMs = frames.length > 0 ? frames[frames.length - 1].timeMs + interval : 0;
return { frames, frameIntervalMs: interval, durationMs };
}
/** 计算整段（或指定帧）的包围盒，用于自动取景；返回 null 表示没有可用点 */
export function sequenceBounds(
frames: readonly ParsedKeypointFrame[],
minVisibility = 0.3,
): { min: [number, number, number]; max: [number, number, number] } | null {
let minX = Number.POSITIVE_INFINITY;
let minY = Number.POSITIVE_INFINITY;
let minZ = Number.POSITIVE_INFINITY;
let maxX = Number.NEGATIVE_INFINITY;
let maxY = Number.NEGATIVE_INFINITY;
let maxZ = Number.NEGATIVE_INFINITY;
let seen = 0;
for (const frame of frames) {
for (let index = 0; index < POINT_COUNT; index += 1) {
if (frame.visibility[index] < minVisibility) continue;
const x = frame.positions[index * 3];
const y = frame.positions[index * 3 + 1];
const z = frame.positions[index * 3 + 2];
if (x < minX) minX = x;
if (y < minY) minY = y;
if (z < minZ) minZ = z;
if (x > maxX) maxX = x;
if (y > maxY) maxY = y;
if (z > maxZ) maxZ = z;
seen += 1;
}
}
if (seen === 0) return null;
return { min: [minX, minY, minZ], max: [maxX, maxY, maxZ] };
}
web-server/admin/src/lib/skeleton-topology.ts
+109
View File
@@ -0,0 +1,109 @@
/**
* MediaPipe Pose 33 点拓扑（管理端预览用）。
*
* 与 `contracts/skeleton-topology.md` §1/§3 一致：
* * 33 个关键点的语义顺序；
* * 父节点表（`parent[i]`，33/34 是虚拟关节 —— 骨盆/肩中心，绘制时归到 0/nose 之外单独处理）。
* 服务端权威实现在 `web-server/src/preprocess/mediapipe33.ts`（含测试断言的一致性检查）。
* 这里只保留预览绘制需要的两份最小数据，避免把服务端代码打进前端包。
*/
export const KEYPOINT_NAMES: readonly string[] = [
'nose',
'left_eye_inner',
'left_eye',
'left_eye_outer',
'right_eye_inner',
'right_eye',
'right_eye_outer',
'left_ear',
'right_ear',
'mouth_left',
'mouth_right',
'left_shoulder',
'right_shoulder',
'left_elbow',
'right_elbow',
'left_wrist',
'right_wrist',
'left_pinky',
'right_pinky',
'left_index',
'right_index',
'left_thumb',
'right_thumb',
'left_hip',
'right_hip',
'left_knee',
'right_knee',
'left_ankle',
'right_ankle',
'left_heel',
'right_heel',
'left_foot_index',
'right_foot_index',
];
/** 虚拟关节索引（不在 33 点内，仅用于层级） */
export const VIRTUAL_PELVIS = 33;
export const VIRTUAL_SHOULDER_CENTER = 34;
/** `parent[i]`：-1 表示世界根；33/34 表示虚拟关节 */
export const PARENT_TABLE: readonly number[] = [
VIRTUAL_SHOULDER_CENTER, // 0 nose
0, // 1 left_eye_inner
0, // 2 left_eye
0, // 3 left_eye_outer
0, // 4 right_eye_inner
0, // 5 right_eye
0, // 6 right_eye_outer
3, // 7 left_ear
6, // 8 right_ear
0, // 9 mouth_left
0, // 10 mouth_right
VIRTUAL_SHOULDER_CENTER, // 11 left_shoulder
VIRTUAL_SHOULDER_CENTER, // 12 right_shoulder
11, // 13 left_elbow
12, // 14 right_elbow
13, // 15 left_wrist
14, // 16 right_wrist
15, // 17 left_pinky
16, // 18 right_pinky
15, // 19 left_index
16, // 20 right_index
15, // 21 left_thumb
16, // 22 right_thumb
VIRTUAL_PELVIS, // 23 left_hip
VIRTUAL_PELVIS, // 24 right_hip
23, // 25 left_knee
24, // 26 right_knee
25, // 27 left_ankle
26, // 28 right_ankle
27, // 29 left_heel
28, // 30 right_heel
27, // 31 left_foot_index
28, // 32 right_foot_index
];
/** 绘制用骨段：把父表展开成 [子, 父] 对（虚拟关节映射到鼻/肩线的实际点） */
export const BONE_SEGMENTS: ReadonlyArray<readonly [number, number]> = (() => {
const out: Array<readonly [number, number]> = [];
for (let index = 0; index < PARENT_TABLE.length; index += 1) {
const parent = PARENT_TABLE[index];
if (parent === -1) continue;
if (parent === VIRTUAL_PELVIS) {
// 骨盆虚拟点：用左右髋的中点表示，绘制时由渲染器按帧计算，这里先挂到左髋
out.push([index, 23]);
continue;
}
if (parent === VIRTUAL_SHOULDER_CENTER) {
out.push([index, 11]);
continue;
}
out.push([index, parent]);
}
return out;
})();
/** 需要忽略的绘制段（面部五官连线太密，预览里只会糊成一团） */
export const FACE_POINT_LIMIT = 11;
web-server/admin/src/pages/Motions.tsx
+64 -1
View File
@@ -1,4 +1,4 @@
import { useState, type FormEvent } from 'react';
import { lazy, Suspense, useState, type FormEvent } from 'react';
import { apiUrl, errorMessage } from '../api/client';
import {
deleteMotion,
@@ -13,6 +13,10 @@ import { formatNumber } from '../lib/format';
import { MOTION_FORMAT_LABELS, PREPROCESS_LABELS, STATUS_OPTIONS } from '../lib/labels';
import { hasErrors, parseOptionalNumber, requireText, validateSourceFields, type FieldErrors } from '../lib/validation';
import { useAsync } from '../lib/useAsync';
const MotionPreview = lazy(async () => {
const module = await import('../components/MotionPreview');
return { default: module.MotionPreview };
});
import {
ConfirmDialog,
Empty,
@@ -228,6 +232,7 @@ export function MotionsPage() {
const [filters, setFilters] = useState<MotionFilters>({ q: '', format: '', status: '', page: 1 });
const [qInput, setQInput] = useState('');
const [uploadOpen, setUploadOpen] = useState(false);
const [previewId, setPreviewId] = useState<number | null>(null);
const [deleteTarget, setDeleteTarget] = useState<Motion | null>(null);
const [busyId, setBusyId] = useState<number | null>(null);
const [deleting, setDeleting] = useState(false);
@@ -383,6 +388,8 @@ export function MotionsPage() {
<table className="table">
<thead>
<tr>
<th>预览</th>
<th>名称</th>
<th>关联曲目</th>
<th>格式</th>
@@ -398,6 +405,31 @@ export function MotionsPage() {
const keypointsReady = motion.preprocessState === 'done';
return (
<tr key={motion.id}>
<td>
{motion.thumbnailUrl ? (
<img
className="thumb-40 thumb-clickable"
src={motion.thumbnailUrl}
alt={`${motion.name} 首帧骨架`}
title="预处理时生成的骨架缩略图（点击预览）"
onClick={() => setPreviewId(previewId === motion.id ? null : motion.id)}
/>
) : (
<span className="muted small" title="预处理后生成">—</span>
)}
</td>
<td>
<div className="cell-title">{motion.name}</div>
<div className="muted small">#{motion.id}</div>
@@ -425,6 +457,23 @@ export function MotionsPage() {
<StatusBadge status={motion.status} />
</td>
<td className="col-actions">
<button
type="button"
className="link-btn"
disabled={!keypointsReady}
onClick={() => setPreviewId(previewId === motion.id ? null : motion.id)}
title={keypointsReady ? '关键点 3D 回放（播放 / 逐帧 / 时间轴 / 变速 / 循环）' : '预处理完成后才可预览'}
>
{previewId === motion.id ? '收起预览' : '预览'}
</button>
<button
type="button"
className="link-btn"
@@ -473,6 +522,20 @@ export function MotionsPage() {
onChange={(page) => setFilters((previous) => ({ ...previous, page }))}
/>
) : null}
{previewId !== null ? (
<div className="panel-body motion-preview-panel">
<header className="panel-head">
<h3>动作预览 #{previewId}</h3>
<button type="button" className="link-btn" onClick={() => setPreviewId(null)}>
关闭
</button>
</header>
<Suspense fallback={<Loading text="正在加载 3D 预览…" />}>
<MotionPreview motionId={previewId} />
</Suspense>
</div>
) : null}
</section>
{uploadOpen ? (
web-server/admin/src/styles.css
+46
View File
@@ -1493,3 +1493,49 @@ textarea {
.bone-children {
margin-left: auto;
}
/* ---- 动作预览（T-WEB-014） ---- */
.thumb-40 {
width: 40px;
height: 40px;
border-radius: 4px;
background: #181a20;
object-fit: cover;
}
.thumb-clickable {
cursor: pointer;
border: 1px solid var(--border);
}
.motion-preview-panel {
margin-top: 12px;
}
.motion-preview-canvas {
width: 100%;
border-radius: var(--radius-sm);
overflow: hidden;
background: #181a20;
}
.motion-preview-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 8px 4px 2px;
}
.motion-preview-bar input[type='range'] {
flex: 1 1 220px;
min-width: 160px;
}
.motion-preview-speed {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-mute);
}