| .. | ||
| index.tsx | ||
| README.md | ||
| types.ts | ||
CodeMirror Variable Input
基于 CodeMirror 6 的变量输入组件，提供更强大的编辑体验和自动补全功能。
✨ 特性
- ✅ 语法高亮：使用 CodeMirror 的 JavaScript 语法高亮
- ✅ 智能补全：输入
${自动提示可用变量 - ✅ 变量信息：显示变量来源节点和字段名称
- ✅ 快捷键支持：完整的编辑器快捷键（Ctrl+Z 撤销、Ctrl+Y 重做等）
- ✅ 括号匹配：自动匹配和高亮括号
- ✅ 单行/多行模式：支持 input 和 textarea 两种变体
- ✅ 主题切换：支持 light 和 dark 主题
- ✅ 轻量级：核心体积约 200KB（gzip 后约 60KB）
📦 使用方法
基础用法
import CodeMirrorVariableInput from '@/components/CodeMirrorVariableInput';
<CodeMirrorVariableInput
value={value}
onChange={setValue}
allNodes={allNodes}
allEdges={allEdges}
currentNodeId={currentNodeId}
placeholder="输入变量或表达式"
/>
在 SelectOrVariableInput 中使用
SelectOrVariableInput 已经集成了 CodeMirror，默认启用：
<SelectOrVariableInput
value={value}
onChange={onChange}
options={options}
allNodes={allNodes}
allEdges={allEdges}
currentNodeId={currentNodeId}
editor="codemirror" // 使用 CodeMirror（默认）
/>
如果需要使用旧版 VariableInput：
<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：
<SelectOrVariableInput
value={value}
onChange={onChange}
// ... 其他 props
+ // editor="codemirror" 是默认值，无需显式指定
/>
2. 单独使用
如果你直接使用 VariableInput，可以替换为 CodeMirrorVariableInput：
- 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