尚未选择模型
+在左侧列表点击「预览」以加载 VRM。
+加载模型中… {state.ratio !== null ? `${Math.round(state.ratio * 100)}%` : ''}
+⚠ {state.message}
+ +OpenDance Studio 管理端 · 契约 rest-api 0.1.0
+/api 与 /health：开发期由 vite 代理到
+ http://localhost:3000，生产期由 nginx 反代到 http://api:3000。
+ 请确认服务端已启动，或通过 VITE_API_BASE 指定其他基址。
+
+ 部分状态统计失败（服务不可达或鉴权失败）
: null} +{value}
+ {version.value.revision || '—'}
+ {healthValue.status}
+ {healthValue.version}
+ {Math.round(healthValue.uptimeSec ?? 0)} s
+
+ {healthValue.database?.connected ? 'connected' : 'disconnected'}
+ {healthValue.database?.server ? ` · ${healthValue.database.server}` : ''}
+
+ {healthValue.database?.migrationsPending ?? 0}
+ 最后刷新：{formatDateTime(new Date().toISOString())}
+T-WEB-009 · VRM 优先，来源五元组必填，支持 3D 预览与全局默认模型
+| 预览缩略图 | +名称 | +格式 | +VRM 版本 | +是否默认 | +来源 | +许可 | +状态 | +操作 | +
|---|---|---|---|---|---|---|---|---|
| + + | +
+ {model.name}
+
+ #{model.id} · {formatBytes(model.fileSize)} · {formatDateTime(model.updatedAt)}
+
+ |
+
+ |
+ {model.vrmVersion ?? '—'} | ++ {model.isPrimary ? ( + 默认 ★ + ) : ( + — + )} + | +
+ |
+
+ {model.license || '—'}
+ |
+
+ |
+ + + + + + | +
+ 通过 GLTFLoader + VRMLoaderPlugin 加载 fileUrl，VRM 0.x 自动执行 180° 旋转；
+ 使用 requestAnimationFrame 循环调用 vrm.update(delta)，
+ 卸载时释放渲染器、几何体、材质与贴图。
+
尚未选择模型。
+ )} ++ 确认删除模型 {deleteTarget.name}（#{deleteTarget.id}）？ +
+DELETE /api/models/{deleteTarget.id} · 服务端执行软删除。
+ + } + onConfirm={confirmDelete} + onCancel={() => setDeleteTarget(null)} + /> + ) : null} + + ); +} diff --git a/web-server/admin/src/pages/Motions.tsx b/web-server/admin/src/pages/Motions.tsx new file mode 100644 index 0000000..1371e08 --- /dev/null +++ b/web-server/admin/src/pages/Motions.tsx @@ -0,0 +1,507 @@ +import { useState, type FormEvent } from 'react'; +import { apiUrl, errorMessage } from '../api/client'; +import { + deleteMotion, + listMotions, + listSongs, + preprocessMotion, + uploadMotion, +} from '../api/endpoints'; +import type { Motion, PublishStatus, Song } from '../api/types'; +import { MOTION_FORMATS } from '../api/types'; +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'; +import { + ConfirmDialog, + Empty, + ErrorBox, + Field, + FormatBadge, + Loading, + Modal, + Notice, + Pagination, + SourceCell, + SourceFieldsForm, + StatusBadge, + type SourceFormValue, +} from '../components/ui'; + +const PAGE_SIZE = 20; +const ACCEPT_EXT = '.bvh,.fbx,.gltf,.glb,.json'; + +interface MotionFilters { + q: string; + format: string; + status: PublishStatus | ''; + page: number; +} + +interface MotionFormState extends SourceFormValue { + name: string; + songId: string; + fps: string; + autoPreprocess: boolean; + status: PublishStatus; +} + +const EMPTY_MOTION_FORM: MotionFormState = { + name: '', + songId: '', + fps: '', + autoPreprocess: true, + status: 'draft', + sourceType: '', + sourceName: '', + sourceUrl: '', + license: '', + author: '', +}; + +function validateMotionForm(form: MotionFormState): FieldErrors { + const errors: FieldErrors = {}; + requireText(form.name, 'name', '动作名称', errors, 200); + const fps = parseOptionalNumber(form.fps); + if (fps !== undefined && (!Number.isFinite(fps) || fps <= 0 || fps > 240)) { + errors.fps = '帧率需为 0–240 之间的数字'; + } + validateSourceFields(form, errors); + return errors; +} + +function PreprocessBadge({ motion }: { motion: Motion }) { + const label = PREPROCESS_LABELS[motion.preprocessState] ?? motion.preprocessState; + const title = + motion.preprocessState === 'failed' + ? motion.preprocessError ?? '预处理失败（无错误详情）' + : motion.preprocessState === 'done' + ? `关键点帧数：${motion.keypointFrames ?? '—'} · 格式：${motion.keypointFormat ?? '—'}` + : `状态：${motion.preprocessState}`; + return ( + + {label} + {motion.preprocessState === 'running' ? : null} + + ); +} + +/* ------------------------------------------------------------ 上传弹窗 */ + +function MotionUploadModal({ + songs, + songsError, + onClose, + onSaved, +}: { + songs: Song[]; + songsError: string | null; + onClose: () => void; + onSaved: (message: string) => void; +}) { + const [form, setForm] = useStateT-WEB-004/006 · 动作文件、MediaPipe33 预处理与关键点下载
+| 名称 | +关联曲目 | +格式 | +帧率 / 帧数 | +预处理状态 | +来源五元组 | +状态 | +操作 | +
|---|---|---|---|---|---|---|---|
|
+ {motion.name}
+ #{motion.id}
+ |
+ {songTitle(motion.songId)} | +
+ |
+
+ {formatNumber(motion.fps)} fps
+ {motion.frameCount ?? '—'} 帧
+ |
+
+
+ {motion.preprocessError}
+
+ ) : null}
+ |
+
+ |
+
+ |
+ + + {keypointsReady ? ( + + 下载关键点 + + ) : ( + + 下载关键点 + + )} + + | +
+ 确认删除动作 {deleteTarget.name}（#{deleteTarget.id}）？ +
+DELETE /api/motions/{deleteTarget.id} · 服务端执行软删除。
+ + } + onConfirm={confirmDelete} + onCancel={() => setDeleteTarget(null)} + /> + ) : null} +