# PromQL Editor

基于 Monaco Editor 和 `monaco-promql` 的 PromQL 查询编辑器组件。

## 功能特性

- PromQL 语法高亮
- 智能代码补全（指标名、标签名/值、函数、变量）
- 异步 DataProvider 驱动补全数据
- 查询语法校验
- 支持浅色/深色主题
- 支持多尺寸（small, middle, large）
- 只读和禁用模式
- Enter 键快捷执行回调
- Shift+Enter 换行

## 使用方法

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

function MyComponent() {
  const [value, setValue] = React.useState('');

  return (
    <PromQLMonacoEditor
      value={value}
      onChange={setValue}
      theme="light"
      apiPrefix="/api/v1"
      request={(resource, options) =>
        fetch(resource, {
          method: 'Get',
          headers: { Authorization: `Bearer ${token}` },
        })
      }
    />
  );
}
```

## Props

| 参数                         | 类型                                      | 默认值    | 说明                           |
| ---------------------------- | ----------------------------------------- | --------- | ------------------------------ |
| `size`                       | `'small' \| 'middle' \| 'large'`          | `'middle'`| 编辑器尺寸                     |
| `theme`                      | `'light' \| 'dark'`                       | `'light'` | 主题                           |
| `value`                      | `string`                                  | `''`      | 编辑器内容                     |
| `placeholder`                | `string`                                  | `-`       | 占位符文本                     |
| `enableAutocomplete`         | `boolean`                                 | `true`    | 启用代码补全                   |
| `enableRequests`             | `boolean`                                 | `true`    | 允许 DataProvider 发送网络请求  |
| `durationVariablesCompletion`| `boolean`                                 | -         | 启用 `$__interval` 等变量补全   |
| `readOnly`                   | `boolean`                                 | `false`   | 只读模式                       |
| `disabled`                   | `boolean`                                 | `false`   | 禁用编辑                       |
| `interpolateString`          | `(query: string) => string`               | -         | 查询字符串变量插值             |
| `url`                        | `string`                                  | -         | Prometheus API 地址            |
| `lookbackInterval`           | `number`                                  | -         | 指标数据回溯时间（秒）         |
| `variablesNames`             | `string[]`                                | -         | 变量名称列表（如 `['$job']`）   |
| `apiPrefix`                  | `string`                                  | -         | API 前缀                       |
| `httpMethod`                 | `'POST' \| 'GET'`                         | -         | 请求方法                       |
| `request`                    | `(input, init?) => Promise<Response>`     | -         | 自定义 fetch 函数              |
| `httpErrorHandler`           | `(error) => void`                         | -         | HTTP 错误处理                  |
| `onChange`                   | `(value: string) => void`                 | -         | 内容变化回调                   |
| `onEnter`                    | `(value: string) => void`                 | -         | Enter 键触发（无建议窗口时）   |
| `onBlur`                     | `(value: string) => void`                 | -         | 编辑器失焦回调                 |
| `editorDidMount`             | `(editor) => void`                        | -         | 编辑器挂载完成回调             |