Appearance
AiSearch
@mbjia/components
AiSearch
AI 搜索输入框,用于素材管理中的智能检索。
AI 搜索输入框,用于素材管理中的智能检索。
组件定位
用于素材库中的智能检索入口,支持搜索范围、搜索类型、关键词/标签输入,并通过回调触发搜索。
素材检索标签输入AI 搜索
接入前确认
依赖业务事件、搜索选项、素材列表刷新逻辑。它不是普通 Input,内部使用富文本/标签输入能力。
eventBusonSearch素材列表
接入速览
什么时候用
素材库需要按搜索范围、AI 类型、关键词或标签做智能检索时使用。
最少必填
afterOptions、SearchPlaceHolder,以及真正执行业务搜索的 onSearch。
容易漏什么
它不是普通输入框;标签输入、清空、外部重置和搜索激活状态都依赖组件内部事件。
适用场景
适合素材库页面中按镜头、字幕等 AI 类型搜索素材。组件依赖业务事件、@mbjia/utils AI 搜索常量和 Umi。
效果预览
搜索流程
输入关键词/标签→选择搜索范围→选择搜索类型→触发 onSearch
创建 AI 搜索任务→提交任务→轮询结果→更新素材列表
Props
ts
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 还可能带:
ts
{
otherParams?: Record<string, any>
dirId?: string
}回调出参
| 回调 | 出参 | 说明 |
|---|---|---|
onSearch | { searchType; searchRange; searchValue } | 触发搜索时返回搜索类型、范围和输入值。 |
onSearch | otherParams?: Record<string, any> | 部分场景会附加额外业务参数。 |
onSearch | dirId?: string | 当前目录搜索时可能携带目录 id。 |
数据类型
ts
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
富文本标签输入组件。支持普通文本、# 触发标签搜索、标签删除、字数统计、清空按钮和键盘选择标签。
tsx
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。
tsx
<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 生成次数不足时点击升级会员触发。 |
任务状态:
ts
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 | 轮询任务状态。 |