# CodeMirror Variable Input

基于 CodeMirror 6 的变量输入组件，提供更强大的编辑体验和自动补全功能。

## ✨ 特性

- ✅ **语法高亮**：使用 CodeMirror 的 JavaScript 语法高亮
- ✅ **智能补全**：输入 `${` 自动提示可用变量
- ✅ **变量信息**：显示变量来源节点和字段名称
- ✅ **快捷键支持**：完整的编辑器快捷键（Ctrl+Z 撤销、Ctrl+Y 重做等）
- ✅ **括号匹配**：自动匹配和高亮括号
- ✅ **单行/多行模式**：支持 input 和 textarea 两种变体
- ✅ **主题切换**：支持 light 和 dark 主题
- ✅ **轻量级**：核心体积约 200KB（gzip 后约 60KB）

## 📦 使用方法

### 基础用法

```tsx
import CodeMirrorVariableInput from '@/components/CodeMirrorVariableInput';

<CodeMirrorVariableInput
  value={value}
  onChange={setValue}
  allNodes={allNodes}
  allEdges={allEdges}
  currentNodeId={currentNodeId}
  placeholder="输入变量或表达式"
/>
```

### 在 SelectOrVariableInput 中使用

SelectOrVariableInput 已经集成了 CodeMirror，默认启用：

```tsx
<SelectOrVariableInput
  value={value}
  onChange={onChange}
  options={options}
  allNodes={allNodes}
  allEdges={allEdges}
  currentNodeId={currentNodeId}
  editor="codemirror"  // 使用 CodeMirror（默认）
/>
```

如果需要使用旧版 VariableInput：

```tsx
<SelectOrVariableInput
  editor="legacy"  // 使用旧版 VariableInput
  // ... 其他 props
/>
```

## 🎮 Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `value` | `string` | `''` | 输入值 |
| `onChange` | `(value: string) => void` | - | 值变化回调 |
| `allNodes` | `FlowNode[]` | - | 所有节点（用于收集变量） |
| `allEdges` | `FlowEdge[]` | - | 所有连线 |
| `currentNodeId` | `string` | - | 当前节点ID |
| `formFields` | `FormField[]` | `[]` | 表单字段 |
| `variant` | `'input' \| 'textarea'` | `'input'` | 渲染模式 |
| `rows` | `number` | `3` | textarea 行数 |
| `theme` | `'light' \| 'dark'` | `'light'` | 主题 |
| `placeholder` | `string` | `''` | 占位文本 |
| `disabled` | `boolean` | `false` | 是否禁用 |

## 🎯 自动补全

### 触发补全

输入 `${` 会自动触发变量补全：

```
用户输入: ${
        ↓
显示补全列表:
  - ${jenkins.buildNumber}
  - ${jenkins.buildUrl}
  - ${applicationName}
  - ...
```

### 补全信息

每个补全项显示：
- **Label**: 完整变量表达式（如 `${jenkins.buildNumber}`）
- **Info**: 来源节点和字段名（如 `Jenkins构建 - buildNumber`）

### 快捷键

- `↓` / `↑`: 选择补全项
- `Enter`: 应用当前选中的补全
- `Esc`: 关闭补全列表

## 🔄 迁移指南

### 从 VariableInput 迁移

#### 1. 直接替换（推荐）

在 SelectOrVariableInput 中，默认已使用 CodeMirror：

```diff
  <SelectOrVariableInput
    value={value}
    onChange={onChange}
    // ... 其他 props
+   // editor="codemirror" 是默认值，无需显式指定
  />
```

#### 2. 单独使用

如果你直接使用 VariableInput，可以替换为 CodeMirrorVariableInput：

```diff
- import VariableInput from '@/components/VariableInput';
+ import CodeMirrorVariableInput from '@/components/CodeMirrorVariableInput';

- <VariableInput
+ <CodeMirrorVariableInput
    value={value}
    onChange={onChange}
    allNodes={allNodes}
    allEdges={allEdges}
    currentNodeId={currentNodeId}
  />
```

## 🎨 样式定制

CodeMirror 使用 CSS 变量与你的主题系统集成：

- `--border`: 边框颜色
- `--ring`: 焦点环颜色
- `--radius`: 圆角大小
- `--foreground`: 文本颜色
- `--muted-foreground`: 占位符颜色

## 🐛 已知问题

### 1. 外部值同步

当外部 `value` 变化时，编辑器会更新内容。但如果用户正在输入，可能会导致光标跳动。

**解决方案**: 使用 `internalValue` 状态管理（已在 SelectOrVariableInput 中实现）

### 2. 变量列表更新

变量列表更新时不会重新创建编辑器，使用 ref 存储最新变量。

## 📈 性能对比

| 特性 | VariableInput | CodeMirrorVariableInput |
|------|---------------|------------------------|
| 体积 | ~5KB | ~60KB (gzip) |
| 语法高亮 | ❌ | ✅ |
| 快捷键 | 有限 | 完整 |
| 扩展性 | 低 | 高 |
| 性能 | 优秀 | 良好 |

## 🚀 未来计划

- [ ] 支持表达式验证
- [ ] 支持代码折叠
- [ ] 支持类型提示
- [ ] 支持自定义语法高亮规则
- [ ] 支持代码片段（Snippets）

## 📝 License

MIT

