资产详情

路由: /workspace/asset-hub/[id] · v5 单页详情(2026-09-08 蒸馏补齐) SSOT: media-asset-and-workshop.md (SSOT) §5.3 详情页布局 + §5.2 详情页响应字段

用途

单条媒体资产详情页展示完整元数据 + 主预览 + 历史版本时间线,支持编辑、删除、跨项目引用追溯。

配图占位

页面:/workspace/asset-hub/[id]

状态:左 60% 主预览(图片 / 视频 / 文档 / 音频 waveform)+ 右 40% 元数据(标题 / 类型 / 标签 / 上传时间 / 大小 / 引用次数)+ 历史版本时间线

重点区域:主预览 / 元数据 / 历史版本 / 操作按钮组(编辑 / 删除 / 移动 / 复制 publicId)

脱敏要求:隐藏人物真实信息、未授权媒体、音频样本、项目名、账号信息和任务 ID

使用前准备

资产 id 必须存在于 globalCreativeAsset / globalCharacterAppearance / globalLocationImage / globalPropImage 4 表 union 中(API /api/assets/creative/[id] 内部 union)。
详情页响应字段已展平到顶层(previewUrl、mimeType、width、height、durationMs、fileName),避免「AssetSelected?.media.url 嵌套访问 = 前端预览空白」根因。

操作步骤

进入详情页:从媒体资产中心网格单击资产卡片,跳转到 /workspace/asset-hub/[id](也可直接深链)。
查看主预览(左 60%):根据 kind 显示图片 / 视频 / 音频 / 文档预览;下载 / 复制 publicId / 编辑按钮组在预览下方。
查看元数据(右 40%):标题 + 类型 chip + 核心元数据 + 归属链 + 标签 / 描述 + 引用次数 + 历史版本时间线。
底部操作:删除 / 移动 / 导出按需触发。

布局(三栏)

1. 左 60% 主预览

按 kind 渲染:

图片(kind=IMAGE):previewUrl 直接渲染 <img>,加载失败 fallback 到 kind 文字占位。
视频(kind=VIDEO):<video controls poster={previewUrl}> 自带播放器。
音频(kind=AUDIO):音频 waveform 组件 + <audio controls>。
文档(kind=DOCUMENT):文件名 + 大小 + mimeType,无预览,显示「下载」CTA。

预览下方有操作按钮组:

下载(primary):直链下载原文件。
复制 publicId:点 → 复制到剪贴板(供生成任务引用)。
编辑:跳转到「主体工作坊」(如该资产关联主体)/ 媒体元数据编辑(纯媒体)。

2. 右 40% 元数据 + 历史版本

自上而下分块:

标题 + 类型 chip:title + kind chip(IMAGE / VIDEO / AUDIO / DOCUMENT)+ subject chip(如有)。
核心元数据:上传时间 / 大小 / mimeType / 宽 / 高 / 时长(音视频)。
归属链:无归属(全局) / sourceProjectId 关联(项目级) / canvasFolderId + canvasEpisodeId 关联(画布级);点击项目名跳到项目详情。
标签 / 描述:标签 chips + 描述文本(可编辑)。
引用次数:被多少项目 / 画布节点 / 任务引用,点击展开引用列表。
历史版本时间线:每条历史版本的缩略图 + 时间 + 用户 + 操作(回滚 / 删除);默认折叠,展开按钮显示完整历史。

3. 底部操作按钮组(整页)

删除:删除前必须解除有效引用,优先归档有历史用途的内容。
移动:跳到文件树选择目标文件夹。
导出:批量导出到本地 zip。

API 响应字段(展平到顶层)


{
  ...核心字段,
  previewUrl:   asset.selectedVersion?.media?.url ?? null,
  mimeType:     asset.selectedVersion?.media?.mimeType ?? null,
  width:        asset.selectedVersion?.media?.width ?? null,
  height:       asset.selectedVersion?.media?.height ?? null,
  durationMs:   asset.selectedVersion?.media?.durationMs ?? null,
  fileName:     asset.selectedVersion?.media?.publicId ?? null,
}

否则 AssetThumb 永远 fallback 到 kind 文字占位(根因 = 修复 2 落地前 user 反馈”资产预览空白”)。

结果与状态

选中资产后,操作(下载 / 复制 publicId / 编辑 / 删除 / 移动)即时生效,无需额外保存。
历史版本时间线默认折叠,点击「展开」按钮显示完整历史(包含每条版本的缩略图 + 时间 + 用户 + 操作)。
删除前必须解除有效引用,否则 403 + 错误提示。
最新版本不可直接删除(会破坏主引用),需先创建新版本替代。
引用次数为 Phase C 占位(显示「-」),Phase C 后端联调后接入 4 表 union 查询。

权限和限制

个人资产:只对所属账号和有权项目可见;管理员代管仍受项目作用域限制。
删除前必须解除有效引用,否则 403 + 错误提示。
历史版本不可直接删除最新一条,避免破坏主引用。

常见问题

预览空白怎么办?

99% 是 AssetSelected?.media.url 嵌套访问没展平,后端未返回 previewUrl 顶层字段。检查 /api/assets/creative/[id] 响应体(应包含顶层 previewUrl、mimeType、width、height、durationMs、fileName)。

历史版本能直接删除吗?

可以,但最新版本不可直接删除(会破坏主引用),需要先创建新版本替代。

引用次数不显示?

后端需要 union 4 表查询引用(项目级 + 画布级 + 任务级);当前为 Phase C 占位,显示「-」。