@blueking/bklog-search-input-bar

日志检索输入条的原生 Web Component。提供 UI / 语句 / AI 三种模式，不依赖 Vue。

安装

npm install @blueking/bklog-search-input-bar

语句模式需要 CodeMirror 6，按下面版本安装（与本包开发依赖一致）。仅用 UI / AI 时可跳过。

npm install \
  [email protected] \
  @codemirror/[email protected] \
  @codemirror/[email protected] \
  @codemirror/[email protected] \
  @codemirror/[email protected] \
  @codemirror/[email protected]

| 包 | 版本 | | --- | --- | | codemirror | 6.0.1 | | @codemirror/state | 6.6.0 | | @codemirror/view | 6.42.1 | | @codemirror/language | 6.10.2 | | @codemirror/autocomplete | 6.18.6 | | @codemirror/lang-sql | 6.7.1 |

import '@blueking/bklog-search-input-bar/style.css';
import { createSearchInputBar } from '@blueking/bklog-search-input-bar';

快速开始

services 为必填。其余项均可省略。

import '@blueking/bklog-search-input-bar/style.css';
import { createSearchInputBar } from '@blueking/bklog-search-input-bar';

const host = document.querySelector('#search-bar')!;

const favorites = document.createElement('div');
favorites.dataset.slot = 'tool-favorites';
favorites.innerHTML = '<span class="bklog-sib-icon bklog-star-line"></span>';
host.append(favorites);

const bar = createSearchInputBar(host, {
  mode: 'ui',
  platform: 'default',
  enableModes: { ui: true, sql: true, ai: true },
  services: {
    getFields: () => [
      { field_name: 'log', field_alias: '日志', field_type: 'text' },
    ],
    requestFieldValues: async () => ({ aggs_items: [] }),
    convertUiToSql: async () => ({ querystring: '' }),
    requestAiQuery: async (text) => ({
      queryString: `log:"${text}"`,
      parseResult: 'SUCCESS',
    }),
  },
});

bar.on('search', (detail) => {
  console.log(detail.mode, detail.value);
});

Custom Element：

<bklog-search-input-bar id="bar"></bklog-search-input-bar>
<script type="module">
  import '@blueking/bklog-search-input-bar/style.css';
  import { registerSearchInputBar } from '@blueking/bklog-search-input-bar';
  registerSearchInputBar();
  const el = document.getElementById('bar');
  el.setOptions({ services: { /* 同上 */ } });
  el.addEventListener('search', (e) => console.log(e.detail));
</script>

插槽节点必须在 createSearchInputBar / connectedCallback 之前挂到 host 上（data-slot 或 slot 属性）。组件会把节点投影进内部容器。

外观 platform

只支持 default | trace。default 使用原日志平台（log-platform）边框与圆角；旧值 log-platform 会按 default 处理。

// 日志平台完整（显式打开设置 / 收藏 / AI）
createSearchInputBar(host, {
  platform: 'default',
  mode: 'ui',
  enableModes: { ui: true, sql: true, ai: true },
  showIpSelector: false,
  toolbar: {
    showCopy: true,
    enableDefaultCopy: true,
    showClear: true,
    showSettings: true,
    showFavorites: true,
    showInspect: false,
    showAiMode: true,
    showQueryButton: true,
  },
  services,
});

// Trace 嵌入
createSearchInputBar(host, {
  platform: 'trace',
  mode: 'sql',
  enableModes: { ui: false, sql: true, ai: false },
  toolbar: {
    showSettings: false,
    showFavorites: false,
    showAiMode: false,
    showInspect: false,
  },
  services,
});

更多配置可在本地 Demo 中交互调整，并查看 / 复制当前源码。

可配置项 SearchInputBarOptions

| 字段 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | services | SearchInputBarServices | 必填 | 字段、值联想、UI→SQL、AI 解析等宿主能力 | | mode | 'ui' \| 'sql' \| 'ai' | 'ui' | 当前模式。若对应 enableModes 为 false，会落到第一个可用模式 | | enableModes | { ui?, sql?, ai? } | 全部 true | 控制左侧 Toggle、Tab 切 AI、AI 药丸是否出现 | | platform | 'default' \| 'trace' | 'default' | 外观。default 为日志平台样式（原 log-platform）；trace 为 Trace 嵌入 | | className | string | '' | 追加到最外层 .bklog-sib-root 的 class，setOptions 可替换；不会覆盖内置 bklog-sib-root / --default / --trace | | uiValue | UiQueryItem[] | [] | UI 模式条件列表 | | sqlValue | string | '' | 语句模式查询串 | | aiFilterList | string[] | [] | AI 模式已选条件芯片 | | aiQueryResult | AiQueryResult \| null | null | AI 解析结果，驱动横幅与回填语句 | | isAiLoading | boolean | false | AI 解析中：进度条 + 禁用 Tab 切换 | | disabled | boolean | false | 禁用输入 | | loading | boolean | false | 与 Custom Element 属性同步；检索条内部不另绘遮罩 | | searching | boolean | false | 查询中：查询钮切为暂停图标、隐藏「查询」文案 | | queryDisabled | boolean | false | 禁用查询钮 | | queryDisabledReason | string | '' | 查询钮 title | | toolbar | ToolbarOptions | 见下表 | 工具栏显隐 | | showIpSelector | boolean | false | 为 true 时 UI 字段列表末尾追加「IP目标」；setOptions 可按数据源动态开关 | | commonFilter | CommonFilterState | 见下表 | focused 控制设置按钮激活态与容器描边；筛选面板由宿主实现 | | sqlMode | SqlModeOptions | 见下表 | 语句模式专属 | | placeholders | PlaceholderOptions | 回落到 localeTexts | 分模式占位文案，优先于 localeTexts | | localeTexts | Record<string, string> | 见文案表 | 界面文案 | | indexSetId | string \| number | undefined | 传给 requestAiQuery 的上下文 |

运行时更新：

bar.setOptions({
  searching: true,
  toolbar: { showCopy: false },
  placeholders: { ui: '请输入关键字' },
});

setOptions 对 toolbar / enableModes / sqlMode / placeholders / commonFilter 做浅合并，不会丢掉未传入的子字段。showIpSelector 为顶层布尔，传入即覆盖。

toolbar

每项工具 = showXxx 开关 + 可选具名插槽。showXxx=false 不渲染；为 true 时有插槽内容则覆盖默认实现。

| 字段 | 默认 | 说明 | | --- | --- | --- | | showCopy | true | 复制按钮（插槽 tool-copy）。点击发 copy-click | | enableDefaultCopy | true | 是否执行内置复制（写剪贴板 + 弹出「复制成功」）。false 时点击只抛 copy-click | | showClear | true | 清空（插槽 tool-clear）。点击发 clear-click，随后仍会清空并发 clear | | showSettings | false | 常用查询设置（插槽 tool-query-setting）。点击发 setting-click，不打开内置面板 | | showFavorites | false | 收藏（默认星标，插槽 tool-favorites 可覆盖）。点击发 favorites-click | | showInspect | false | 语法校验叹号（插槽 tool-inspect）。点击发 inspect-click | | showAiMode | false | AI 模式入口（插槽 tool-ai 仅覆盖样式）。点击发 ai-click 并切到 AI 模式 | | showQueryButton | true | 外置「查询」钮。点击发 query-click，随后仍会发 search / cancel |

sqlMode

| 字段 | 默认 | 说明 | | --- | --- | --- | | enableFavoriteSuggestions | true | 语句联想面板底部收藏列表 | | sqlSyntaxUrl | 按 cookie blueking_language 解析的正式文档地址 | 「查询语法」外链；传空串仍回落到默认地址 |

placeholders

均会同步回 localeTexts 对应 key，供各模式读取。

| 字段 | 对应文案 key | 说明 | | --- | --- | --- | | ui | uiPlaceholder | UI 空输入占位（data-attr-txt，不是 input[placeholder]） | | sql | sqlPlaceholderIdle | 语句模式未聚焦 | | sqlFocus | sqlPlaceholderFocus | 语句模式聚焦 / 键入 | | sqlIdleAi | sqlPlaceholderIdleAi | 未聚焦且启用 AI | | sqlFocusAi | sqlPlaceholderFocusAi | 聚焦且启用 AI；{shortcut} 替换为 CMD/Ctrl | | ai | aiPlaceholder | AI textarea placeholder |

commonFilter

| 字段 | 默认 | 说明 | | --- | --- | --- | | focused | false | 设置按钮是否激活（.is-focused），容器加 set-border；不在组件内因点击而切换，由宿主 setOptions 更新 | | selectedFields | [] | 保留给宿主；组件不再渲染常驻筛选面板 | | addition | [] | 保留给宿主；组件不再渲染常驻筛选条件 |

UiQueryItem

| 字段 | 说明 | | --- | --- | | field | 字段名；全文检索为 * | | operator | 前端运算符（如 contains match phrase、=、exists） | | value | 值列表 | | relation | 多值关系 AND / OR | | isInclude | 通配包含方向 | | field_type | 字段类型 | | hidden_values | 隐藏值 | | disabled | 禁用该条件 | | showAll | 展开全部值 | | isCommonFixed | 是否来自常驻筛选 | | is_focus_input | 打开面板时聚焦输入 |

services

| 方法 | 必填 | 说明 | | --- | --- | --- | | getFields() | 是 | 返回 FieldInfo[]。决定 UI 字段列表、运算符、全文检索项 | | requestFieldValues({ field, query, size, field_type? }) | 是 | 值联想。包内 300ms 防抖、同参共用进行中请求、同字段只保留最新一次；不做结果缓存。flattened / 非 keyword 带 query 不发请求 | | convertUiToSql(addition) | 是 | UI→语句。切模式且 UI 条件非空时调用 | | requestAiQuery(text, ctx) | AI 需要 | 自然语言解析。未注入时 AI 入口会告警 | | getFieldTypeMap() | 否 | 字段类型图标色 / 文案 | | getOperatorDictionary() | 否 | 运算符展示名 | | getFavoriteSqlSuggestions(keyword) | 否 | 语句收藏联想。点击项发 favorite-click，并回写语句检索 |

requestAiQuery 的 ctx：{ fieldsJson, indexSetId, keyword }。

返回 AiQueryResult：

| 字段 | 说明 | | --- | --- | | parseResult | 'SUCCESS' \| 'PARTIAL_SUCCESS' \| 'FAILED'。未通过结构校验时宿主应返回 FAILED，不要降级展示 | | queryString | 校验后的查询语句；成功时回填 sqlValue | | explain | 仅作宿主日志 / 横幅字段，UI 不渲染原始模型文本 | | startTime / endTime | 可选时间范围 |

FieldInfo.field_operator 控制该字段可用运算符；缺省时组件走内置映射。

文案 localeTexts

未传入的 key 使用默认中文。

| key | 默认 | | --- | --- | | uiMode | UI 模式 | | sqlMode | 语句模式 | | aiMode | AI 模式 | | search | 查询 | | pause | 暂停 | | copy | 复制 | | clear | 清空 | | favorites | 收藏 | | inspect | 语法校验 | | settings | 常用查询设置 | | settingsTitle | 设置筛选 | | ipTarget | IP目标 | | availableList | 待选列表 | | fixedFilter | 常驻筛选 | | addAll | 全部添加 | | clearAll | 清空 | | confirm | 确定 | | cancel | 取消 | | searchKeyword | 请输入关键字 | | emptySearch | 搜索为空 | | uiPlaceholder | / 唤起，输入检索内容（Tab 可切换为 AI 模式） | | sqlPlaceholder / sqlPlaceholderIdle | / 唤起， 输入检索内容 | | sqlPlaceholderIdleAi | / 唤起， 输入检索内容（Tab 可切换为 AI 模式） | | sqlPlaceholderFocus | / 唤起， 输入检索内容 | | sqlPlaceholderFocusAi | 可输入自然语言，{shortcut} + Enter 触发 AI 解析 | | sqlDirectRetrieve | 直接检索 | | sqlMoveCursor | 移动光标 | | sqlAiParse | AI 解析 | | sqlSyntaxLink | 查询语法 | | sqlLoading | 加载中... | | sqlFavoriteTitlePrefix | 联想到以下 | | sqlFavoriteTitleSuffix | 个收藏 | | sqlFavoriteEmpty | 暂无匹配的收藏项 | | sqlFavoriteType | 检索语句 | | aiPlaceholder | 用自然语言描述你的查询条件，Enter 执行 | | tabToAi | Tab 切换 AI 模式 | | missingConvert | 未注入 convertUiToSql，无法完成转换 | | missingAi | 未注入 requestAiQuery，无法执行 AI 解析 | | convertWarn | UI 转语句失败，已切换到语句模式 | | copied | 已复制 | | copySuccess | 复制成功 |

插槽

在 host 上放子节点，用 data-slot 或 slot 指定名称。投影发生在组件创建时。

| 名称 | 位置 | 说明 | | --- | --- | --- | | tool-inspect | 工具栏 | 覆盖默认语法校验图标；需 toolbar.showInspect=true | | tool-copy | 工具栏 | 覆盖默认复制图标 | | tool-clear | 工具栏 | 覆盖默认清空图标 | | tool-query-setting | 工具栏 | 覆盖默认常用查询设置图标 | | tool-favorites | 工具栏 | 覆盖默认星标；需 showFavorites=true | | tool-ai | 工具栏 | 仅自定义 AI 按钮样式；点击与模式切换仍由组件处理 | | custom-placeholder | UI / 语句空输入区 | 自定义占位内容，叠在默认 placeholder 上 |

<div id="search-bar">
  <div data-slot="tool-favorites" title="收藏"><span class="bklog-sib-icon bklog-star-line"></span></div>
  <div data-slot="tool-ai"><!-- 可选：自定义 AI 样式 --></div>
  <div data-slot="custom-placeholder">场景：错误日志</div>
</div>

空容器（:empty）不占位；对应 showXxx=false 时整项隐藏。

事件

命令式实例用 bar.on(name, handler)，返回取消订阅函数。同时也在 host 上 dispatchEvent(CustomEvent)，detail 为载荷，bubbles: true。Custom Element 用 addEventListener。

| 事件 | detail | 何时触发 | | --- | --- | --- | | update:mode | SearchMode | 模式变化 | | update:uiValue | UiQueryItem[] | UI 条件变化 | | update:sqlValue | string | 语句变化（含 AI 回填） | | update:aiFilterList | string[] | AI 芯片变化 | | search | { mode, value } | 点击查询 / 提交 | | mode-change | { from, to, convertedKeyword? } | 模式切换；UI→SQL 成功时带转换后的语句 | | clear | void | 清空完成后 | | clear-click | { event } | 点击清空 | | copy | { text } | 点击复制时同步抛出（兼容） | | copy-click | { event, text } | 点击复制。text 为当前检索内容；enableDefaultCopy=true 时组件会写入剪贴板并弹出「复制成功」 | | cancel | void | 取消（Esc 收起等） | | ip-selector-click | { event } | 点击「IP目标」字段 / 已有 IP 条件 / 确定；宿主打开 IP 选择器 | | setting-click | { active, event } | 点击设置。active 为当前激活态，组件不自动切换 | | inspect-click | { event } | 点击语法校验 | | favorites-click | { event } | 点击工具栏收藏 | | ai-click | { event } | 点击 AI 模式入口（随后切到 AI） | | query-click | { event, addition, keyword, mode } | 点击查询 / 暂停。mode 为 ui \| sql（AI 按 sql）；addition 为当前 UI 条件，keyword 为当前语句。随后发 search 或 cancel | | favorite-click | { event } | 语句联想面板底部收藏项点击 | | text-to-query | { text, source: 'ui' \| 'sql' \| 'ai' } | 发起 AI 解析前 | | ai-result | AiQueryResult | AI 返回；清空结果时为 {} | | height-change | number | 根节点高度变化（含 ResizeObserver） | | popup-change | { isShow } | UI / 语句联想面板显隐 |

const off = bar.on('search', ({ mode, value }) => {
  if (mode === 'ui') {
    // value: UiQueryItem[]
  } else {
    // value: string
  }
});
off();

AI 结果必须先做字段校验再 emit：parseResult === 'SUCCESS' 且 queryString 可用才进入检索；FAILED 只展示失败态，不把原始模型输出写进输入框。

实例方法

| 方法 | 说明 | | --- | --- | | el | 根节点 .bklog-sib-root | | setOptions(patch) | 合并更新配置 | | setMode(mode) | 切模式；UI→SQL 且有条件时走 convertUiToSql | | setValue({ uiValue?, sqlValue? }) | 写入值并触发对应 update:* | | getValue() | { mode, uiValue, sqlValue, aiFilterList } | | addValue(item) | UI 模式追加一条条件 | | getRect() | 根节点 DOMRect | | focus() | 聚焦当前模式输入区 | | destroy() | 卸载 | | on(type, listener) | 订阅事件，返回取消函数 |

Custom Element bklog-search-input-bar 透传上述方法（除 el / on：事件走 DOM）。

可观察属性：mode、disabled、searching、loading。

键盘

| 按键 | 行为 | | --- | --- | | Tab | 在检索条焦点内、未按修饰键时，UI/SQL ↔ AI。enableModes.ai === false 或 isAiLoading 时不响应 | | Enter / ⌘+Enter | 各模式提交查询（语句 / AI 见面板快捷键提示） | | Esc | 收起联想面板 |

样式

import '@blueking/bklog-search-input-bar/style.css';

图标字体另可按需（font-family: bklog-sib，与主站 bklog 隔离）：

import '@blueking/bklog-search-input-bar/icons.css';

插槽或宿主自绘图标用 bklog-sib-icon + glyph 类（如 bklog-star-line），不要用主站 bklog-icon。

高度 token：输入区最小 48px、最大 135px（INPUT_MIN_HEIGHT / INPUT_MAX_HEIGHT）。

导出

常用：createSearchInputBar、createSearchBar、registerSearchInputBar、BklogSearchInputBarElement、TAG_NAME、mergeOptions、运算符转换函数与常量。类型从包入口导出。