AssetManagementModal

@mbjia/components

AssetManagementModal

素材管理/选择弹窗，支持选择、替换、管理、混剪等模式。

素材管理/选择弹窗，支持选择、替换、管理、混剪等模式。

组件定位

用于模板加业务中的素材管理和素材选择，覆盖目录、搜索、上传、选择、替换和管理能力。

素材管理素材选择上传入口

接入前确认

需要登录态、素材接口权限、@mbjia/manager 的 ApiManager；开启上传时还需要全局上传能力。

ApiManagereventBusEveryWhereUpload

接入速览

什么时候用

需要在模板加业务里完成素材管理、素材选择、替换素材、上传入口或混剪素材选择时使用。

最少必填

open、mode、baseApiManager。选择模式通常还要传 onConfirm 和 onClose。

返回什么

onConfirm 返回选中素材数据；常见形态是素材模型数组。字段结构见素材数据结构。

MediaAssetModelAssetManagementModel

容易漏什么

上传、目录刷新和 AI 搜索依赖事件总线；开启上传时页面还要接入 EveryWhereUpload。

事件协议全局上传

适用场景

适合模板加业务项目中选择、替换、管理素材。它依赖 @mbjia/manager 的 ApiManager，并会调用素材、目录、用户权限、上传等业务接口。

不适合普通无业务接口项目直接使用。

结构预览

素材管理弹窗

个人素材

团队素材

目录树

回收站

搜索素材 / AI 搜索

上传素材

左侧管理目录与素材来源，右侧提供搜索、AI 搜索、上传、素材列表和批量操作。

流程预览

打开弹窗→读取用户与权限→ApiManager 加载目录→加载素材列表

用户操作分支

选择/替换素材→onConfirm上传素材→EveryWhereUpload→刷新列表搜索/AI 搜索管理目录或删除素材

引入

import { AssetManagementModal } from '@mbjia/components'
import { MbjiaApiManager } from '@mbjia/manager'

const apiManager = new MbjiaApiManager()

基础用法

<AssetManagementModal
  open={open}
  mode="select"
  baseApiManager={apiManager}
  onClose={() => setOpen(false)}
  onConfirm={(assets) => {
    console.log('已选素材', assets)
  }}
/>

Props

type IAssetManagementModal<BaseApiManager extends ApiManager> = {
  open: boolean
  mode: 'replace' | 'select' | 'manage' | 'mix-cut'
  onClose?: (urls?: string[]) => void
  onConfirm?: Function
  onPhoneUpload?: () => void
  onNameUpdate?: () => void
  replaceOne?: boolean
  totalImageCount?: number
  currReplacedCount?: number
  currSelectedCount?: number
  useTranscodingAsset?: boolean
  tabList?: TabItemType<BaseApiManager>[]
  baseApiManager: BaseApiManager
  useManagement?: boolean
  useDoubleClick?: boolean
  useCreateFolder?: boolean
  useSelectAfterUpload?: boolean
  eCommerceType?: 'doudian' | 'taobao' | 'lightApplication' | null
  zIndex?: number
  dirId?: string | number
  assetOptions?: any[]
  addedAssets?: string[]
  setVideoAssetLog?: () => void
  getVideoAssetLog?: () => void
  okText?: string
  SearchBarAiSearchAfterOptionsFilter?: number[]
  tooManyAssetNotice?: string
  keepFolder?: boolean
}

字段	必填	默认值	说明
open	是	-	弹窗是否打开
mode	否	'replace'	工作模式
baseApiManager	是	-	素材数据源管理器
onClose	否	-	关闭回调
onConfirm	否	-	确认回调
replaceOne	否	false	是否只替换一个素材
useTranscodingAsset	否	true	上传后是否等待转码
useCreateFolder	否	true	是否允许创建目录
useDoubleClick	否	true	是否双击选择
useManagement	否	true	是否显示管理能力
useSelectAfterUpload	否	false	上传后是否自动选中
eCommerceType	否	-	电商素材来源类型
keepFolder	否	false	返回时是否保留文件夹结构

回调出参

回调	出参	说明
onClose	urls?: string[]	关闭弹窗时触发。部分模式下可能带素材 url 列表。
onConfirm	选中素材数据	点击确认或双击选择后触发。具体结构通常是素材模型数组，接入时按业务模式确认。
onPhoneUpload	无	手机上传入口回调。
onNameUpdate	无	素材名称更新后的回调。
setVideoAssetLog	无	设置视频素材日志。
getVideoAssetLog	无	获取视频素材日志。

相关数据结构

类型	说明	文档
AssetManagementModel	素材管理模型	公共数据结构
MediaAssetModel	图片/视频素材模型	公共数据结构
FolderModel	目录模型	公共数据结构
IAssetSearch	素材搜索参数	公共数据结构

事件协议

组件内部会通过事件总线和其他流程通信：

事件	方向	说明
global:everywhereUpload	emit	触发全局上传
global:deleteAsset	emit	删除素材
global:mediaSplittingFlow	emit	打开素材拆条
global:setMainContentOfMaterial	emit	设置主商品素材
global:freshFolderList	on	刷新目录
some-asset-upload-success	on	上传成功后刷新
global:showCurrentFolderAllAsset	emit/on	显示当前目录全部素材

完整事件列表见 事件协议。

前置条件

• 已配置 @mbjia/services 请求环境。
• 已有用户登录态和权限数据。
• 使用 @mbjia/manager 提供的 ApiManager。
• 如果开启上传，需要接入 EveryWhereUpload 和 upload-manager。

使用限制

• baseApiManager 必须提供 getDirList 和 getAssetList。
• 如果使用电商模式，需要传入对应 eCommerceType 并确保服务接口可用。
• 组件会读写业务缓存和事件总线，多个素材弹窗同时存在时要注意状态互相影响。