AssetModal / MusicModal

@mbjia/components

AssetModal / MusicModal

素材和音乐选择弹窗，比 AssetManagementModal 更偏选择器场景。

AssetModal 和 MusicModal 是素材选择弹窗，比 AssetManagementModal 更偏“选择器”。

组件定位

用于从已有素材中完成选择，不负责完整素材管理。相比 AssetManagementModal，它更适合作为业务表单或编辑器中的选择器。

素材选择音乐选择最近使用

接入前确认

需要素材接口、素材类型枚举和用户素材数据。音乐弹窗会用到音乐上传、AI 匹配等业务事件。

AssetTypeEnumMediaAssetModelMusicAssetModel

接入速览

什么时候用

只需要从已有素材或音乐中完成选择，不需要完整目录管理和素材管理能力时使用。

最少必填

AssetModal 需要 type、open、onConfirm、onClose。

返回什么

AssetModal.onConfirm 返回 MediaAssetModel[]；MusicModal.onConfirm 返回音乐素材数组。

MediaAssetModelMusicAssetModel

容易漏什么

音乐弹窗涉及上传音乐和 AI 匹配事件；如果需要完整管理能力，应改用 AssetManagementModal。

适用场景

组件	适用场景
AssetModal	选择图片、视频等媒体素材
MusicModal	选择热门音乐、我的音乐、我的预设

结构预览

素材选择弹窗

全部

分组

我的预设

最近使用

搜索素材

确认选择

更偏选择器场景，左侧切换分组或预设，右侧搜索并选择素材后确认返回。

AssetModal Props

interface IAssetModal {
  type: AssetTypeEnum
  open: boolean
  uiOptions?: {
    searchTitle?: string
    searchPlaceholder?: string
  }
  onConfirm: (assets: MediaAssetModel[]) => void
  onClose: () => void
  currentAssetsLength?: number
  totalAssetsCount?: number
  initData?: any[]
  aspectRatio?: number
  showPreset?: boolean
  assetCate?: 1 | 2
  gotoLink?: string
}

字段	必填	默认值	说明
type	是	-	素材类型，如图片/视频
open	是	true	弹窗是否打开
onConfirm	是	-	确认选择
onClose	是	-	关闭
initData	否	-	初始已选素材
aspectRatio	否	-	按比例筛选
showPreset	否	true	是否显示预设
assetCate	否	2	素材分类

AssetModal 回调出参

回调	出参	说明
onConfirm	MediaAssetModel[]	确认选择后返回媒体素材数组。
onClose	无	关闭弹窗时触发。

MusicModal Props

interface IMusicModal {
  open: boolean
  onConfirm: (musics?: MusicAssetModel[]) => void
  onClose: () => void
  notClearOnOpen?: boolean
  onlyShowMyMusic?: boolean
  needShowAllCount?: boolean
  initData?: MusicAssetModel[]
  showPreset?: boolean
  max?: number
  eventBus?: typeof eventBus
}

字段	默认值	说明
open	false	弹窗是否打开
notClearOnOpen	-	打开时是否保留已选
onlyShowMyMusic	-	只显示我的音乐
showPreset	true	是否显示我的预设
max	20	最大选择数量
eventBus	全局事件总线	上传音乐等事件

MusicModal 回调出参

回调 / ref	出参	说明
onConfirm	MusicAssetModel[] | undefined	确认选择后返回音乐素材数组。
onClose	无	关闭弹窗时触发。
ref.onConfirm()	当前已选音乐	组件 ref 暴露的确认方法，可读取当前已选音乐。

相关数据结构

类型	说明	文档
AssetTypeEnum	素材类型枚举	公共数据结构
MediaAssetModel	图片/视频素材模型	公共数据结构
MusicAssetModel	音乐素材模型	公共数据结构

示例

import { AssetModal } from '@mbjia/components'
import { AssetTypeEnum } from '@mbjia/manager'

<AssetModal
  type={AssetTypeEnum.image}
  open={open}
  onClose={() => setOpen(false)}
  onConfirm={(assets) => {
    console.log(assets)
  }}
/>

事件

事件	说明
global:uploadMusic	打开音乐上传
global:everywhereUpload	在我的音乐中触发全局上传
music:ai:match	AI 匹配音乐
music:default:match	选择默认音乐

注意事项

• AssetModal 内部默认使用 MbjiaApiManager。
• 确认时会调用 reqAssetSetRecentUsage 记录最近使用。
• MusicModal 的 ref 暴露 onConfirm()，可读取当前已选音乐。