# @cloudcare/codemirror-dql

> 基于 [CodeMirror 6](https://codemirror.net/6/) 构建的 DQL 编辑器插件，提供完整的语法高亮、自动补全、函数提示、字段查询、语法检查能力，适用于指标查询、日志检索、埋点分析等场景。

---

## ✨ 功能特点

- ✅ 支持 DQL 语法的高亮渲染（亮色/暗色主题）
- ✅ 自动补全字段、函数、数据源、指标索引等
- ✅ 实时语法校验（linter）
- ✅ 可扩展的远程补全接口（继承 `DQLClient`）
- ✅ 与 CodeMirror 插件生态完全兼容

---

## 📦 安装

```bash
npm install @cloudcare/codemirror-dql
```

依赖 CodeMirror 6 相关核心模块（如果尚未安装）：

```bash
npm install @codemirror/state @codemirror/view @codemirror/language
```

---

## 🚀 快速上手

### 初始化编辑器（基础语法高亮）

```ts
import { EditorView, basicSetup } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { DQLExtension, baseTheme, dqlHighlighter } from '@cloudcare/codemirror-dql';
import { syntaxHighlighting } from '@codemirror/language';

const dql = new DQLExtension();

const state = EditorState.create({
  doc: 'L::re(`.*`):(*)',
  extensions: [basicSetup, baseTheme, dql.asExtension(), syntaxHighlighting(dqlHighlighter)],
});

new EditorView({
  state,
  parent: document.getElementById('editor')!,
});
```

---

## ⚙️ 启用自动补全 & linter

```ts
const dql = new DQLExtension().activateCompletion(true).activateLinter(true).setComplete(new MyCustomDQLClient());
```

---

## 🧩 自定义补全：实现 `DQLClient`

```ts
import { DQLClient, Matcher } from '@cloudcare/codemirror-dql';

class MyCustomDQLClient extends DQLClient {
  getIndexs(): Promise<string[]> {
    return Promise.resolve(['default', 'index-a']);
  }

  getSourceList(namespace: string): Promise<string[]> {
    return Promise.resolve(['source1', 'source2']);
  }

  getFields(namespace: string): Promise<any[]> {
    return Promise.resolve([
      { name: 'host', type: 'string', info: '主机名' },
      { name: 'status', type: 'number', info: '状态码' },
    ]);
  }

  showFunctions(): Promise<any[]> {
    return Promise.resolve([
      { name: 'show_field_key()', info: '展示字段列表' },
      { name: 'show_measurement()', info: '展示指标名称' },
    ]);
  }
}
```

---

## 🎨 支持主题

```ts
import { dqlHighlighter, darkDqlHighlighter, lightTheme, darkTheme } from '@cloudcare/codemirror-dql';

const themeExtensions = [syntaxHighlighting(darkDqlHighlighter), darkTheme];
```

---

## 📦 TypeScript 类型支持

插件提供完整类型定义：

```ts
interface FieldNameData {
  name: string;
  type: string;
  info: string;
}

interface Matcher {
  name: string;
  type: string;
  value?: string;
}
```

---

## 📚 示例：Vue 中使用

```vue
<template>
  <div ref="editor" style="height: 200px; border: 1px solid #ccc;"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { DQLExtension, baseTheme, dqlHighlighter } from '@cloudcare/codemirror-dql';
import { syntaxHighlighting } from '@codemirror/language';

export default defineComponent({
  setup() {
    const editor = ref();

    onMounted(() => {
      const dql = new DQLExtension().activateCompletion(true).activateLinter(true);

      const state = EditorState.create({
        doc: '',
        extensions: [baseTheme, dql.asExtension(), syntaxHighlighting(dqlHighlighter)],
      });

      new EditorView({
        state,
        parent: editor.value,
      });
    });

    return { editor };
  },
});
</script>
```