# SQL Editor

这是一个基于 Monaco Editor 和 `monaco-sql-languages` 的 SQL 编辑器组件。

## 功能特性

- ✨ 完整的 SQL 语法高亮
- 🎯 智能代码补全（关键字、函数等）
- ✅ SQL 语法验证（括号、引号匹配等）
- 🎨 支持浅色和深色主题
- 📏 支持不同尺寸（small, middle, large）
- ♿ 只读和禁用模式
- 🎹 快捷键支持（Ctrl+Enter 执行）

## 使用方法

### 基本用法

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

function MyComponent() {
  const [sql, setSql] = React.useState('SELECT * FROM users;');

  return (
    <div style={{ height: '400px' }}>
      <SqlMonacoEditor value={sql} onChange={setSql} placeholder='Enter SQL query...' />
    </div>
  );
}
```

### 完整示例

```tsx
import React, { useState } from 'react';
import { SqlMonacoEditor } from '@fc-components/monaco-editor';

function SqlQueryBuilder() {
  const [sql, setSql] = useState('');
  const [result, setResult] = useState<any>(null);

  const handleChange = (value: string) => {
    setSql(value);
  };

  const handleExecute = (value: string) => {
    console.log('执行 SQL:', value);
    // 发送到后端执行
  };

  const handleBlur = (value: string) => {
    console.log('SQL 失焦:', value);
  };

  return (
    <div>
      <div style={{ height: '300px', border: '1px solid #ccc', marginBottom: '20px' }}>
        <SqlMonacoEditor
          size='large'
          theme='light'
          value={sql}
          placeholder='输入 SQL 查询...'
          enableAutocomplete={true}
          onChange={handleChange}
          onEnter={handleExecute}
          onBlur={handleBlur}
        />
      </div>
      {result && (
        <div>
          <h3>查询结果:</h3>
          <pre>{JSON.stringify(result, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default SqlQueryBuilder;
```

## Props

| 参数                 | 类型                           | 默认值   | 说明                   |
| -------------------- | ------------------------------ | -------- | ---------------------- |
| `size`               | 'small' \| 'middle' \| 'large' | 'middle' | 编辑器尺寸             |
| `theme`              | 'light' \| 'dark'              | 'light'  | 主题                   |
| `value`              | string                         | ''       | 编辑器内容             |
| `placeholder`        | string                         | -        | 占位符文本             |
| `enableAutocomplete` | boolean                        | true     | 启用代码补全           |
| `readOnly`           | boolean                        | false    | 只读模式               |
| `disabled`           | boolean                        | false    | 禁用编辑               |
| `onChange`           | (value: string) => void        | -        | 内容变化回调           |
| `onEnter`            | (value: string) => void        | -        | Ctrl+Enter 时触发      |
| `onBlur`             | (value: string) => void        | -        | 编辑器失焦时触发       |
| `editorDidMount`     | (editor) => void               | -        | 编辑器挂载完成后的回调 |

## 快捷键

- **Ctrl+Enter** 或 **Cmd+Enter**: 触发 `onEnter` 事件（通常用于执行查询）
- **Ctrl+Z** 或 **Cmd+Z**: 撤销
- **Ctrl+Y** 或 **Cmd+Y**: 重做
- **Ctrl+F** 或 **Cmd+F**: 查找
- **Ctrl+H** 或 **Cmd+H**: 查找替换
- **Ctrl+L**: 选中当前行

## 支持的 SQL 关键字

包括 SELECT, FROM, WHERE, JOIN, GROUP BY, ORDER BY, INSERT, UPDATE, DELETE, CREATE, DROP 等。

## 支持的 SQL 函数

- 聚合函数: COUNT, SUM, AVG, MIN, MAX
- 字符串函数: UPPER, LOWER, LENGTH, SUBSTRING, TRIM, CONCAT
- 数值函数: ROUND, ABS
- 日期函数: DATE, NOW, YEAR, MONTH, DAY
- 其他函数: COALESCE, NULLIF, IFNULL

## 验证

编辑器会自动检测以下 SQL 语法问题：

- 未闭合的单引号、双引号和反引号
- 未匹配的括号
- 其他基本的语法问题

## 主题定制

如需自定义主题，可以添加 CSS 规则覆盖默认样式：

```css
.sql-light {
  /* 浅色主题样式 */
}

.sql-dark {
  /* 深色主题样式 */
}
```