# LogQL Editor

面向阿里云 SLS、腾讯云 CLS、火山云 TLS、华为云 LTS、百度云 BLS 的日志查询语言编辑器，统一支持「检索语句 | 分析语句（SQL）」两段式语法。

## 功能特性

- 多云厂商统一编辑体验
- 两段式语法支持：检索语句 `|` 分析语句（SQL）
- 检索关键词自动补全、SQL 关键字/函数补全
- 变量 `${name}` 补全
- 字段名/字段值异步补全（可自定义数据源）
- 各厂商内置字段按 vendor 预配置
- 多尺寸 / 浅色深色主题 / 只读禁用模式

## 使用方法

```tsx
import { LogQLMonacoEditor } from '@fc-components/monaco-editor';

function MyComponent() {
  const [value, setValue] = React.useState(
    'level:ERROR AND host:${host} | SELECT count(*) AS c FROM log GROUP BY level',
  );

  return (
    <LogQLMonacoEditor
      vendor="sls"
      theme="light"
      value={value}
      onChange={setValue}
      enableAutocomplete
      language="zh_CN"
      historyKey="my-logql-query-history"
      variables={['host', 'env', 'service']}
      fetchFieldNames={async ({ section }) => {
        return ['level', 'service', 'host', 'status'];
      }}
      fetchFieldValues={async (fieldName) => {
        if (fieldName === 'level') return ['ERROR', 'WARN', 'INFO'];
        return [];
      }}
    />
  );
}
```

## Props

| 参数               | 类型                                                           | 默认值      | 说明                                    |
| ------------------ | -------------------------------------------------------------- | ----------- | --------------------------------------- |
| `vendor`           | `'sls' \| 'cls' \| 'tls' \| 'lts' \| 'bls'`                   | -           | 云厂商                                   |
| `size`             | `'small' \| 'middle' \| 'large'`                               | `'middle'`  | 编辑器尺寸                              |
| `theme`            | `'light' \| 'dark'`                                            | `'light'`   | 主题                                    |
| `value`            | `string`                                                       | `''`        | 编辑器内容                              |
| `placeholder`      | `string`                                                       | -           | 占位符文本                              |
| `enableAutocomplete`| `boolean`                                                     | `true`      | 启用代码补全                            |
| `readOnly`         | `boolean`                                                      | `false`     | 只读模式                                |
| `disabled`         | `boolean`                                                      | `false`     | 禁用编辑                                |
| `variables`        | `string[]`                                                     | -           | 变量名称列表（不含 `$`）                |
| `language`         | `'zh_CN' \| 'en_US'`                                           | `'zh_CN'`   | 内置补全文案语言                        |
| `historyKey`       | `string`                                                       | -           | 本地历史记录缓存 key；传入后启用历史记录 |
| `maxHeight`        | `number \| string`                                             | -           | 最大高度                                |
| `fontSize`         | `number`                                                       | -           | 字体大小                                |
| `onChange`         | `(value: string) => void`                                      | -           | 内容变化回调                            |
| `onEnter`          | `(value: string) => void`                                      | -           | Enter 键触发（无建议窗口时）            |
| `onBlur`           | `(value: string) => void`                                      | -           | 编辑器失焦回调                          |
| `onFocus`          | `(value: string) => void`                                      | -           | 编辑器聚焦回调                          |
| `editorDidMount`   | `(editor) => void`                                             | -           | 编辑器挂载完成回调                      |
| `fetchFieldNames`  | `(ctx: LogQLFieldCompletionContext) => Promise<string[]>`      | -           | 异步获取字段名                          |
| `fetchFieldValues` | `(fieldName: string, ctx: LogQLFieldCompletionContext) => Promise<string[]>` | - | 异步获取字段值                     |

## 厂商配置

各厂商内置了对应的检索关键词和 SQL 函数：
- **SLS** — 阿里云日志服务
- **CLS** — 腾讯云日志服务
- **TLS** — 火山引擎日志服务
- **LTS** — 华为云日志服务
- **BLS** — 百度云日志服务

## 补全行为说明

- 输入 `$` 立即唤起变量补全，选中后回填为 `${name}`
- `AND` / `OR` / `NOT` 大小写不敏感，补全统一使用大写
- 在 `key:` 或 `key=` 之后自动唤起字段值补全
- 带空格/特殊字符的值自动加双引号
- 各厂商内置字段（如 `__source__`、`__path__`）已预配置
- 配置 `historyKey` 后，回车或失焦会保存非空查询；检索输入为空并开始输入时，历史查询会置顶展示（按使用次数取前 10 条）

## 高级用法

`LogQLEditor` 还导出了 `parse`、`locate` 和 `getVendorConfig`，可用于自定义 UI（如自己实现建议弹窗）：

```ts
import { parse, locate, getVendorConfig } from '@fc-components/monaco-editor';
```