需求 1:系统确定以 GLB / VRM 为模型主力格式
- 服务端新增支持库:
- model-inspector.ts:解析 GLB/VRM 的面数、顶点、材质、贴图、形变目标、
**骨骼树(名称/层级/是否蒙皮/humanoid 映射/子节点数)**、humanoid 覆盖率与可驱动性
- model-thumbnail.ts:**纯 TS 软件光栅化**(z-buffer + Lambert + 完整蒙皮矩阵)
生成 512×512 PNG 缩略图,零原生依赖、不装 headless-gl
- vrm-writer.ts:GLB → VRM 1.0(写入 VRMC_vrm 扩展与 humanoid 映射)
- gltf-packer.ts:glTF(.gltf + .bin + 贴图)→ 单文件 GLB
- humanoid 候选表与 Godot 客户端 humanoid_map.gd **逐字对齐**,并有单测断言两边一致
(服务端判定的"可驱动" = 客户端实际能否驱动)
需求 2:模型管理
- .glb / .vrm / .gltf **直接导入**(不重编码,GLB 含 VRM 扩展会自动识别为 VRM)
- .pmx / .fbx 服务端转换:assimp → .glb →(失败)→ .gltf 后自行打包成 GLB
→(MODEL_CONVERT_FORMAT=vrm 时)补 VRMC_vrm 产出 VRM 1.0;每步 assimp info 回读校验
- .zip **自动搜索包内可用模型**:.vrm → .glb → .gltf(直接导入)优先,
其次 .pmx → .fbx(转换);同优先级内按"指名字 → 目录最浅 → 文件最大"
- 入库后自动分析(models.stats)与生成缩略图(models.thumbnail_asset_id),
失败均不阻断入库;管理端列表显示小缩略图、预览放开到 vrm/glb/gltf
需求 3:审核功能
- 上传的模型状态**一律 pending**(不再自动发布、不再自动设默认)
- 审核界面新增模型面板:体积、面数、顶点、材质、贴图、骨骼、形变目标等指标,
humanoid 覆盖进度、可驱动性结论(缺哪些必需骨骼)、warnings,以及
**骨骼详细预览**(层级缩进、蒙皮/Humanoid 徽章、子节点数、搜索保留祖先链、
仅看蒙皮、限高滚动 + 只渲染前 400 行)
- 审核通过可带 setPrimary=true 一并设为默认模型(此时才写源码种子);
POST /api/models/:id/primary 仅允许 published(否则 409)
- scripts/import-default-model.mjs 改为"上传 → 审核通过 + 设默认"流程
其它:
- models 新增 stats 列(迁移 AddModelStats1789460000000,已在真实库执行)
- 契约升至 rest-api/data-models/model-formats 0.4.0、database 0.3.0(另两库已同步)
- 版本号 0.1.0 → 0.2.0(package.json ×2 + lockfile + project.yaml)
- 文档:README.txt / DSH.md / project.yaml / tasks 005·007·010 全面更新;
顶层开发书更新为 v1.4
验证:168 项单测通过(10 文件);契约 6 项与 29 条路由一致;typecheck/build 通过;
真实端到端:MMD 压缩包 → GLB + 分析(面数 9071/骨骼 238/humanoid 0-22) + 缩略图(15KB PNG);
GLB 直接导入 sha256 与源文件一致;审核通过后 defaultModelId 由 VRM 变为该模型
OpenDance Studio 管理端(opendance-admin)
基于 React 18 + TypeScript + Vite 的管理后台,对接 web-server 的 NestJS API。
接口契约以 ../contracts/rest-api.yaml(rest-api 0.1.0)为准,
字段语义见 ../contracts/data-models.md。
界面语言为简体中文;无任何 UI 组件框架,全部样式集中在 src/styles.css。
快速开始
npm install # 或 pnpm install
npm run dev # 开发服务器 http://localhost:5173
npm run build # 生产构建(tsc -b && vite build)→ dist/
npm run preview # 本地预览 dist/
npm run typecheck # 只做类型检查(tsc --noEmit)
管理端请求的是同源的
/api/**与/health,不含任何硬编码域名。
开发代理(dev proxy)
vite.config.ts 已把 /api 与 /health 代理到 http://localhost:3000:
server: {
port: 5173,
proxy: {
'/api': { target: 'http://localhost:3000', changeOrigin: true },
'/health': { target: 'http://localhost:3000', changeOrigin: true },
},
}
因此本地只需先启动服务端,再 npm run dev 即可,无需配置 CORS。
VITE_API_BASE
src/api/client.ts 的基址取自:
const BASE_URL = import.meta.env.VITE_API_BASE ?? '';
-
不设置(默认,空串):同源请求 —— 开发期走上面的 vite 代理,生产期走 nginx 反代。推荐。
-
设置:例如服务端在另一台机器上:
# .env.local(不要提交) VITE_API_BASE=http://192.168.1.10:3000此时浏览器会直接跨域请求该地址,需要服务端开启 CORS。 构建期注入:
VITE_API_BASE=https://api.example.com npm run build。
生产构建与部署
npm run build # 产物在 dist/
vite.config.ts 使用 base: './',产物使用相对路径引用,可挂在任意子路径下。
生产部署(业务服务自带管理端,不需要反代托管静态文件)
构建产物 dist/ 会被安装到 $APP_DIR/admin,并由 NestJS 服务自身托管
(含 SPA 深链接回退)。因此反向代理只需要把请求整体转发到后端端口即可,
不需要在代理层再配置静态站点或 try_files。
# 仓库根目录,一键部署后端(含管理端)
bash deploy/install.sh
- 后端通过
ADMIN_DIR定位管理端产物,默认../admin - 反代配置样例:
deploy/proxy/nginx.conf.example(nginx)、deploy/proxy/web.config.example(IIS) - 完整说明:
deploy/proxy/README.md
目录结构
src/
main.tsx 入口(BrowserRouter)
App.tsx 路由表
styles.css 全部样式
api/
client.ts fetch 封装(ApiError / 分页 / multipart)
types.ts 契约类型(与 rest-api.yaml 一一对应)
endpoints.ts 契约端点封装
components/
Layout.tsx 左侧导航骨架
ui.tsx 通用组件(表格/弹窗/分页/来源五元组展示与表单…)
VrmPreview.tsx three + @pixiv/three-vrm 的 3D 预览(懒加载分包)
lib/
labels.ts 枚举中文文案
format.ts 时间/字节/时长格式化
validation.ts 客户端校验(来源五元组等)
useAsync.ts 加载/错误/重试 hook
pages/
Dashboard.tsx 概览
Songs.tsx 歌曲管理 T-WEB-008
Models.tsx 模型管理 T-WEB-009
Motions.tsx 动作管理 T-WEB-004/006
Reviews.tsx 审核 T-WEB-007
页面与任务对照
| 路由 | 说明 | 任务 |
|---|---|---|
/ |
概览:三类资产按状态计数、契约版本与目录指纹、健康检查、API 不可达告警 | — |
/songs |
歌曲管理:分页/搜索/筛选、来源五元组必填、音频上传、软删除 | T-WEB-008 |
/models |
模型管理:VRM 优先、来源五元组完整展示、设为默认、3D 预览 | T-WEB-009 |
/motions |
动作管理:上传、预处理、关键点 NDJSON 下载 | T-WEB-004/006 |
/reviews |
审核:待审列表 + 审核流水,通过/驳回(驳回必填意见) | T-WEB-007 |
所有页面都显式处理加载中 / 空数据 / 请求失败三种状态,请求失败不会白屏。
3D 预览说明
src/components/VrmPreview.tsx:GLTFLoader + VRMLoaderPlugin(来自 @pixiv/three-vrm),
- 依据
vrm.meta.metaVersion区分 VRM 0.x / 1.0,0.x 自动执行VRMUtils.rotateVRM0; - 自实现鼠标拖拽旋转与滚轮缩放(未引入 OrbitControls);
requestAnimationFrame循环内调用vrm.update(delta),并按包围盒自动取景;- 卸载时取消 RAF、断开 ResizeObserver、释放 renderer / geometry / material / texture;
- 无 WebGL 上下文时降级为错误提示,不会让页面崩溃。
three + @pixiv/three-vrm(约 750 kB)通过 React.lazy 单独分包,仅进入模型页时加载。