50 lines
1.6 KiB
Markdown
50 lines
1.6 KiB
Markdown
# T-WEB-009 模型管理界面 + 来源展示
|
||
|
||
- **状态**：done
|
||
- **依赖**：T-WEB-005
|
||
|
||
## 目标
|
||
|
||
React 管理端的模型管理页面：列表、上传、**来源信息完整展示**、VRM 优先设置、
|
||
3D 预览。
|
||
|
||
## load
|
||
|
||
```
|
||
DSH.md
|
||
contracts/rest-api.yaml # 锚点：#/paths/~1api~1models
|
||
contracts/data-models.md # 锚点：§4 Model、§4.1 VRM 优先规则
|
||
web-server/admin/src/pages/ModelsPage.tsx
|
||
web-server/admin/src/components/VrmPreview.tsx
|
||
```
|
||
|
||
## 交付物
|
||
|
||
| 路径 | 说明 |
|
||
|---|---|
|
||
| `src/pages/ModelsPage.tsx` | 模型列表 + 上传表单 + 设为默认 |
|
||
| `src/components/VrmPreview.tsx` | three.js + @pixiv/three-vrm 的 3D 预览面板 |
|
||
|
||
## 页面能力
|
||
|
||
- 表格列：预览缩略图、名称、格式（VRM 高亮徽章）、VRM 版本、是否默认、
|
||
**来源五元组**、许可、状态、操作
|
||
- **来源展示（本任务验收重点）**：整行展示 `sourceType` + `sourceName` + `author`
|
||
+ `license`，`sourceUrl` 可点击外链跳转
|
||
- 上传：`POST /api/models`（multipart `file` + 名称 + `isPrimary` + 来源五元组 +
|
||
状态），客户端校验与歌曲页一致
|
||
- 「设为默认」→ `POST /api/models/:id/primary`，成功后刷新列表以反映互斥结果
|
||
- 3D 预览：`GLTFLoader` + `VRMLoaderPlugin` 加载 `fileUrl`，
|
||
支持鼠标拖拽旋转与滚轮缩放，正确处理 VRM 0.x / 1.0 元数据差异、
|
||
未选择模型、加载失败三种状态，卸载时释放资源
|
||
|
||
## 验收
|
||
|
||
```bash
|
||
cd web-server/admin
|
||
npm run build # 必须成功
|
||
```
|
||
|
||
另由 `npm run test:smoke`（[4] 段落）验证后端确实在列表接口返回完整来源字段，
|
||
供本页面展示。
|