feat: 实现 Groovy 代码编辑器并统一脚本参数名称

- 新增 GroovyCodeEditor 组件，基于 CodeMirror 6 实现
- 替换 PythonCodeEditor 为专用的 Groovy 代码编辑器
- 添加 CodeMirror 相关依赖
- 修复脚本参数名称不一致问题，将 operator/session 统一为 request

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: xlorne

flow-engine-framework/src/main/java/com/codingapi/flow/script/node/OperatorMatchScript.java

@@ -13,7 +13,7 @@ public class OperatorMatchScript {
 
     public static final String SCRIPT_ANY = """
             // @SCRIPT_TITLE 任意用户 
-            def run(operator){
+            def run(request){
                 return true
             }
             """;

flow-engine-framework/src/main/java/com/codingapi/flow/script/node/SubProcessScript.java

@@ -15,8 +15,8 @@ public class SubProcessScript {
 
     public static final String SCRIPT_DEFAULT = """
             // @SCRIPT_TITLE 创建当前流程 
-            def run(session){ 
-                return session.toCreateRequest() 
+            def run(request){ 
+                return request.toCreateRequest() 
             }
             """;
 

flow-engine-framework/src/main/java/com/codingapi/flow/script/node/TriggerScript.java

@@ -13,7 +13,7 @@ public class TriggerScript {
 
     public static final String SCRIPT_DEFAULT = """
             // @SCRIPT_TITLE 示例触发节点（打印触发日志） 
-            def run(session){ 
+            def run(request){ 
                 print('hello trigger node.'); 
             }
             """;

frontend/docs/plans/2026-03-03-groovy-code-editor-design.md

@@ -0,0 +1,85 @@
+# GroovyCodeEditor 设计方案
+
+## 概述
+
+为 Flow Engine 工作流设计器创建一个专门的 Groovy 代码编辑器组件，用于替代当前使用的 PythonCodeEditor。
+
+## 背景
+
+当前 `ScriptEditor` 组件使用 `@flowgram.ai/form-materials` 中的 `PythonCodeEditor` 来编辑 Groovy 脚本，这存在以下问题：
+1. 编辑器语言标识不正确（显示 Python 而非 Groovy）
+2. 语法高亮不匹配（Python 语法与 Groovy 有差异）
+
+## 技术选型
+
+基于 **CodeMirror 6** 实现，理由：
+- 项目中已安装相关依赖（@codemirror/* 系列）
+- 社区成熟，支持扩展
+- 与现有 @flowgram.ai/coze-editor 技术栈一致
+
+### 依赖
+
+- `@codemirror/view` - 核心视图
+- `@codemirror/state` - 状态管理
+- `@codemirror/lang-java` - Java 语法支持（Groovy 与 Java 语法高度兼容）
+- `@codemirror/theme-one-dark` - 深色主题
+
+## 组件接口
+
+```typescript
+interface GroovyCodeEditorProps {
+  /** 当前脚本内容 */
+  value: string;
+  /** 是否只读 */
+  readonly?: boolean;
+  /** 内容变更回调 */
+  onChange?: (value: string) => void;
+  /** 占位符 */
+  placeholder?: string;
+  /** 主题 */
+  theme?: 'dark' | 'light';
+  /** 编辑器选项 */
+  options?: {
+    fontSize?: number;
+    minHeight?: number;
+    maxHeight?: number;
+  };
+}
+```
+
+## 文件结构
+
+```
+packages/flow-pc/flow-pc-design/src/components/script/components/
+├── groovy-code-editor.tsx    # 新增：Groovy 代码编辑器
+└── advanced-script-editor.tsx  # 修改：替换 PythonCodeEditor
+```
+
+## 实现要点
+
+### 1. 语法高亮
+使用 `@codemirror/lang-java` 实现 Groovy 语法高亮，该语言包与 Groovy 兼容性较好。
+
+### 2. 主题支持
+- 深色主题：使用 `@codemirror/theme-one-dark`
+- 浅色主题：使用默认浅色主题
+
+### 3. 样式适配
+- 编辑器容器样式与现有设计系统一致
+- 支持最小/最大高度限制
+- 自定义字体大小
+
+## 测试计划
+
+1. 单元测试：验证组件渲染、props 传递
+2. 手动测试：
+   - 验证 Groovy 代码语法高亮效果
+   - 验证主题切换功能
+   - 验证只读模式
+   - 验证与其他组件的集成
+
+## 替代方案
+
+如后续需要更完善的 Groovy 支持，可考虑：
+1. 基于 @codemirror/language 自定义 Groovy 语法高亮
+2. 添加 Groovy 特定关键字和内置函数自动补全

frontend/packages/flow-pc/flow-pc-design/package.json

@@ -23,9 +23,11 @@
   },
   "dependencies": {
     "@ant-design/icons": "~6.1.0",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
     "@flow-engine/flow-core": "workspace:*",
-    "@flow-engine/flow-types": "workspace:*",
     "@flow-engine/flow-pc-ui": "workspace:*",
+    "@flow-engine/flow-types": "workspace:*",
     "@flowgram.ai/export-plugin": "1.0.7",
     "@flowgram.ai/fixed-layout-editor": "1.0.7",
     "@flowgram.ai/fixed-semi-materials": "1.0.7",

frontend/packages/flow-pc/flow-pc-design/src/components/script/components/advanced-script-editor.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import {GroovyScriptContent} from "@/components/script/components/groovy-script-modal";
 import {MenuUnfoldOutlined, ReloadOutlined} from "@ant-design/icons";
 import {GroovyVariableMapping, ScriptType} from "@/components/script/typings";
-import {PythonCodeEditor} from "@flowgram.ai/form-materials";
+import {GroovyCodeEditor} from './groovy-code-editor';
 import {GroovyScriptConvertorUtil} from "@/components/script/utils/convertor";
 
 interface ScriptEditorProps {
@@ -38,7 +38,7 @@ export const ScriptEditor: React.FC<ScriptEditorProps> = (props: ScriptEditorPro
     };
 
     return (
-        <PythonCodeEditor
+        <GroovyCodeEditor
             value={script}
             readonly={readonly}
             onChange={handleChange}

frontend/packages/flow-pc/flow-pc-design/src/components/script/components/groovy-code-editor.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useRef } from 'react';
+import { EditorState } from '@codemirror/state';
+import { EditorView, keymap, placeholder as cmPlaceholder, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine } from '@codemirror/view';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { indentOnInput, bracketMatching, foldGutter, foldKeymap } from '@codemirror/language';
+import { java } from '@codemirror/lang-java';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { syntaxHighlighting, defaultHighlightStyle, HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+interface GroovyCodeEditorProps {
+  value: string;
+  readonly?: boolean;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  theme?: 'dark' | 'light';
+  options?: {
+    fontSize?: number;
+    minHeight?: number;
+    maxHeight?: number;
+  };
+}
+
+const darkHighlightStyle = HighlightStyle.define([
+  { tag: tags.keyword, color: '#c678dd' },
+  { tag: tags.operator, color: '#56b6c2' },
+  { tag: tags.variableName, color: '#e5c07b' },
+  { tag: tags.string, color: '#98c379' },
+  { tag: tags.comment, color: '#5c6370', fontStyle: 'italic' },
+  { tag: tags.number, color: '#d19a66' },
+  { tag: tags.bool, color: '#d19a66' },
+  { tag: tags.null, color: '#d19a66' },
+  { tag: tags.propertyName, color: '#e06c75' },
+  { tag: tags.function(tags.variableName), color: '#61afef' },
+  { tag: tags.definition(tags.variableName), color: '#e5c07b' },
+  { tag: tags.typeName, color: '#e5c07b' },
+  { tag: tags.className, color: '#e5c07b' },
+  { tag: tags.annotation, color: '#d19a66' },
+]);
+
+export const GroovyCodeEditor: React.FC<GroovyCodeEditorProps> = (props) => {
+  const {
+    value,
+    readonly = false,
+    onChange,
+    placeholder = '请输入 Groovy 脚本...',
+    theme = 'dark',
+    options = {}
+  } = props;
+
+  const editorRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+
+  const { fontSize = 14, minHeight = 300, maxHeight = 300 } = options;
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    const extensions = [
+      lineNumbers(),
+      highlightActiveLineGutter(),
+      highlightSpecialChars(),
+      history(),
+      foldGutter(),
+      drawSelection(),
+      dropCursor(),
+      EditorState.allowMultipleSelections.of(true),
+      indentOnInput(),
+      bracketMatching(),
+      rectangularSelection(),
+      crosshairCursor(),
+      highlightActiveLine(),
+      keymap.of([
+        ...defaultKeymap,
+        ...historyKeymap,
+        ...foldKeymap,
+        indentWithTab,
+      ]),
+      java(),
+      cmPlaceholder(placeholder),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged && onChange) {
+          onChange(update.state.doc.toString());
+        }
+      }),
+      EditorView.theme({
+        '&': {
+          fontSize: `${fontSize}px`,
+          minHeight: `${minHeight}px`,
+          maxHeight: `${maxHeight}px`,
+        },
+        '.cm-scroller': {
+          overflow: 'auto',
+        },
+        '.cm-content': {
+          fontFamily: 'monospace',
+        },
+      }),
+    ];
+
+    if (theme === 'dark') {
+      extensions.push(oneDark);
+      extensions.push(syntaxHighlighting(darkHighlightStyle));
+    } else {
+      extensions.push(syntaxHighlighting(defaultHighlightStyle));
+    }
+
+    if (readonly) {
+      extensions.push(EditorState.readOnly.of(true));
+    }
+
+    const state = EditorState.create({
+      doc: value,
+      extensions,
+    });
+
+    const view = new EditorView({
+      state,
+      parent: editorRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+    };
+  }, [theme, fontSize, minHeight, maxHeight, placeholder, readonly]);
+
+  useEffect(() => {
+    if (viewRef.current && value !== viewRef.current.state.doc.toString()) {
+      viewRef.current.dispatch({
+        changes: {
+          from: 0,
+          to: viewRef.current.state.doc.length,
+          insert: value,
+        },
+      });
+    }
+  }, [value]);
+
+  return <div ref={editorRef} style={{ border: '1px solid #434343', borderRadius: 6, overflow: 'hidden' }} />;
+};