AiSearch

@mbjia/components

AiSearch

AI 搜索输入框，用于素材管理中的智能检索。

AI 搜索输入框，用于素材管理中的智能检索。

组件定位

用于素材库中的智能检索入口，支持搜索范围、搜索类型、关键词/标签输入，并通过回调触发搜索。

素材检索标签输入AI 搜索

接入前确认

依赖业务事件、搜索选项、素材列表刷新逻辑。它不是普通 Input，内部使用富文本/标签输入能力。

eventBusonSearch素材列表

接入速览

什么时候用

素材库需要按搜索范围、AI 类型、关键词或标签做智能检索时使用。

最少必填

afterOptions、SearchPlaceHolder，以及真正执行业务搜索的 onSearch。

返回什么

onSearch 返回 searchType、searchRange、searchValue，部分场景附带目录和业务参数。

服务接口事件协议

容易漏什么

它不是普通输入框；标签输入、清空、外部重置和搜索激活状态都依赖组件内部事件。

适用场景

适合素材库页面中按镜头、字幕等 AI 类型搜索素材。组件依赖业务事件、@mbjia/utils AI 搜索常量和 Umi。

效果预览

AI 搜索栏

用于素材库中按范围、类型和关键词发起智能检索。

搜索流程

输入关键词/标签→选择搜索范围→选择搜索类型→触发 onSearch

创建 AI 搜索任务→提交任务→轮询结果→更新素材列表

Props

type Options = { label: string; value: string }[]

interface PropsType {
  beforeOptions?: Options
  afterOptions: Options
  eventBus?: any
  afterOptionsFilter?: number[]
  SearchPlaceHolder: string
  onSearch?: (params: {
    searchType: string
    searchRange: string
    searchValue: string
  }) => void
  response?: boolean
  notAiSearchPlaceholder?: string
  isToplevelFolder?: boolean
  organize_id?: number
  organize_type?: number
}

实际 onSearch 还可能带：

{
  otherParams?: Record<string, any>
  dirId?: string
}

回调出参

回调	出参	说明
onSearch	{ searchType; searchRange; searchValue }	触发搜索时返回搜索类型、范围和输入值。
onSearch	otherParams?: Record<string, any>	部分场景会附加额外业务参数。
onSearch	dirId?: string	当前目录搜索时可能携带目录 id。

数据类型

type Options = { label: string; value: string }[]

字段	类型	说明
label	string	选项展示文本。
value	string	选项值。

事件

事件	方向	说明
AiSearch:searchActive	emit	搜索框激活
AiSearch:searchInActive	emit	搜索框失焦且无搜索值
global:showCurrentFolderAllAsset	emit/on	展示当前目录全部素材
global:searchAll	on	外部触发全量搜索
aiSearch:restAllData	on	重置搜索
AiSearch:searchTypeChange	emit/on	搜索类型变化

注意事项

• beforeOptions 会根据个人用户/OEM 过滤部分范围。
• afterOptionsFilter 是下标数组，会从 afterOptions 中筛选可选项。
• 组件内部不是普通 input，而是使用富文本/标签输入能力。

InputTextAndTags

富文本标签输入组件。支持普通文本、# 触发标签搜索、标签删除、字数统计、清空按钮和键盘选择标签。

const inputRef = useRef<HTMLDivElement>(null)

<InputTextAndTags
  ref={inputRef}
  value="夏季穿搭 #连衣裙"
  placeholders={['输入画面描述', '输入标签']}
  maxLength={100}
  markNumber
  onChange={(editor) => {
    console.log(editor.innerText)
  }}
  onChangeAfter={(editor) => {
    search(editor.innerText)
  }}
/>

Props：

字段	类型	必填	默认值	说明
separator	string	否	'#'	触发标签搜索的分隔符。
useTag	boolean	否	true	是否启用标签搜索。
markNumber	boolean	否	undefined	是否展示字数。
placeholders	string[] | undefined	是	undefined	占位文案。
maxLength	number	否	Infinity	最大输入长度。
tagsOffset	{ left: number; top: number }	否	{ left: 0, top: 5 }	标签浮层位置偏移。
closeIconWidth	number	否	20	标签关闭区域宽度。
className	string	否	''	自定义 class。
wrap	boolean	否	true	文案是否允许换行。
value	string	否	''	输入内容。
innerShowNumber	boolean	否	true	是否在输入框内部显示字数。
disabled	boolean	否	false	是否禁用。
showClear	boolean	否	!wrap	是否展示清空按钮。
deleteTagIds	string[]	否	-	需要删除的标签 id。
willRemoveEventId	string	否	''	需要暴露删除事件时使用的事件 id。
notAutoRunOnChangeAfterFun	boolean	否	false	是否禁止自动触发 onChangeAfter。
organize_id	number	否	-	团队标签搜索组织 id。
organize_type	number	否	-	团队标签搜索组织类型。

回调：

回调	出参	说明
onChange	HTMLDivElement	输入内容变化时触发，返回编辑器 DOM。
onChangeAfter	HTMLDivElement	输入稳定后触发，返回编辑器 DOM。
onClear	无	点击清空按钮时触发。
onKeyDown	React.KeyboardEvent	键盘按下时触发。

Ref 暴露：

条件	返回结构	说明
未传 willRemoveEventId	{ targetEle: HTMLDivElement | null }	返回编辑器 DOM。
传入 willRemoveEventId	{ upEvent: Function; eventId: string }	返回标签失焦处理函数和事件 id。

依赖接口：

接口	用途
getAssetTags	根据输入搜索标签。
getRecentAssetTags	获取最近标签，源码中存在相关逻辑。

AICreateScript

AI 生成/改写脚本弹窗。打开后根据 topic 自动创建任务，轮询任务状态，成功后用 ScriptInfo 展示脚本分镜，点击“使用该脚本”返回 VeScriptInfo。

<AICreateScript
  open={open}
  topic="夏季连衣裙种草视频"
  required="突出面料和上身效果"
  language="中文"
  onClose={() => setOpen(false)}
  onUse={(info) => useScriptInfo(info)}
  onError={() => openVip()}
/>

Props：

字段	类型	必填	默认值	说明
topic	string	是	-	生成主题。源码会清理零宽字符和多余空白后展示标题。
id	string	否	-	作品 id；改写时必需。
required	string	否	-	内容创作要求。
language	string	否	-	目标语言展示值。
language_key	string	否	-	目标语言 key。
subtitles	string[]	否	-	字幕列表，当前源码未直接使用。
labels	string[]	否	-	标签列表，当前源码未直接使用。
isRepeat	boolean	否	-	是否走 AI 改写流程。
open	boolean	是	-	弹窗是否打开。
onClose	() => void	是	-	关闭弹窗。
onUse	(info: VeScriptInfo) => void	是	-	点击“使用该脚本”时返回解析后的脚本信息。
onError	() => void	否	-	AI 生成次数不足时点击升级会员触发。

任务状态：

interface AiTaskRes {
  task_id: number
  id?: number
  status: number // 2 生成中，1 完成，大于 2 失败
  steps?: number
  product_id?: number
  script_data?: any
  uid?: number
}

依赖接口：

接口	用途
aiGenerateScriptV2	创建 AI 生成脚本任务。
aiRewriteScript	创建 AI 改写脚本任务。
aiGetTaskStatus	轮询任务状态。