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

按《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
@@ -1,4 +1,5 @@
import { BadRequestException, Injectable, Logger, NotFoundException } from '@nestjs/common';
import { renderMotionThumbnail } from '../motions/motion-thumbnail';
import { InjectRepository } from '@nestjs/typeorm';
import { mkdtemp, readFile, rm } from 'node:fs/promises';
import { tmpdir } from 'node:os';
@@ -63,6 +64,26 @@ export class PreprocessService {
motion.keypointFormat = KEYPOINT_FORMAT;
motion.keypointAssetId = stored.asset.id;
// 骨架缩略图(T-WEB-014):动作管理列表展示;失败只记 warning,不影响预处理结果
try {
const thumbnail = renderMotionThumbnail(result.frames);
if (thumbnail) {
const storedThumb = await this.storage.persistBuffer(
AssetKind.MotionThumbnail,
thumbnail,
`motion-${motion.id}-thumb.png`,
'image/png',
);
motion.thumbnailAssetId = storedThumb.asset.id;
} else {
this.logger.warn(`动作 #${motion.id} 缩略图未生成(关键点不可用)`);
}
} catch (error) {
this.logger.warn(
`动作 #${motion.id} 缩略图生成失败:${error instanceof Error ? error.message : String(error)}`,
);
}
motion.keypointFrames = result.frames.length;
motion.fps = result.fps;
motion.frameCount = result.frames.length;