feat: 新增前端脚本模块

- 新增 Groovy 脚本类型定义 (groovy-script.ts)
- 新增脚本服务层 (groovy-syntax-converter, groovy-variable-service)
- 新增脚本适配器 (TitleAdapter 等)
- 新增测试文件

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

Author: xlorne

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/script-config-modal.tsx

@@ -0,0 +1,262 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Modal, Input, Alert, Button, Space, message } from 'antd';
+import { EditOutlined, CodeOutlined } from '@ant-design/icons';
+import { GroovyVariableMapping } from '@flow-engine/flow-types';
+import { ScriptType } from '@/components/design-editor/typings/groovy-script';
+import { groovySyntaxConverter } from '@/components/design-editor/script/service/groovy-syntax-converter';
+import { ScriptEditor } from './script-editor';
+
+const { TextArea } = Input;
+
+export interface ScriptConfigModalProps {
+  /** 脚本类型 */
+  scriptType: ScriptType;
+  /** 当前脚本 */
+  script: string;
+  /** 变量映射列表 */
+  variables: GroovyVariableMapping[];
+  /** 确认回调 */
+  onConfirm: (script: string) => void;
+  /** 取消回调 */
+  onCancel: () => void;
+  /** 弹框标题 */
+  title?: string;
+}
+
+/**
+ * 通用脚本配置弹框
+ * 支持普通模式和高级模式切换
+ */
+export const ScriptConfigModal: React.FC<ScriptConfigModalProps> = ({
+  scriptType,
+  script,
+  variables,
+  onConfirm,
+  onCancel,
+  title = '脚本配置',
+}) => {
+  const [mode, setMode] = useState<'normal' | 'advanced'>('normal');
+  const [content, setContent] = useState('');
+  const [cursorPosition, setCursorPosition] = useState(0);
+  const [variablePickerOpen, setVariablePickerOpen] = useState(false);
+  const textareaRef = useRef<any>(null);
+  const userModifiedModeRef = useRef(false);
+
+  useEffect(() => {
+    if (userModifiedModeRef.current) {
+      return;
+    }
+
+    const isAdvanced = groovySyntaxConverter.isAdvancedMode(script);
+    const parsedMode = isAdvanced ? 'advanced' : 'normal';
+
+    if (parsedMode === 'normal') {
+      const labelExpr = groovySyntaxConverter.toExpression(scriptType, script, variables);
+      setContent(labelExpr || '');
+    } else {
+      setContent(script);
+    }
+
+    setMode(parsedMode);
+  }, [script]);
+
+  // 切换到高级模式
+  const handleSwitchToAdvanced = () => {
+    const groovyScript = groovySyntaxConverter.toScript(scriptType, content, variables);
+    setContent(groovyScript);
+    setMode('advanced');
+    userModifiedModeRef.current = true;
+  };
+
+  // 切换到普通模式
+  const handleSwitchToNormal = () => {
+    const labelExpr = groovySyntaxConverter.toExpression(scriptType, content, variables);
+    if (labelExpr === null) {
+      message.error('当前脚本无法转换为可视化表达式，请检查语法');
+      return;
+    }
+    setContent(labelExpr);
+    setMode('normal');
+    userModifiedModeRef.current = true;
+  };
+
+  // 确认
+  const handleConfirm = () => {
+    if (mode === 'normal') {
+      const groovyScript = groovySyntaxConverter.toScript(scriptType, content, variables);
+      onConfirm(groovyScript);
+    } else {
+      onConfirm(content);
+    }
+  };
+
+  // 插入变量
+  const handleInsertVariable = (mapping: GroovyVariableMapping) => {
+    const variableText = `\${${mapping.label}}`;
+    const start = cursorPosition;
+    const newContent = content.substring(0, start) + variableText + content.substring(start);
+    setContent(newContent);
+    setCursorPosition(start + variableText.length);
+    setVariablePickerOpen(false);
+
+    setTimeout(() => {
+      if (textareaRef.current) {
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(start + variableText.length, start + variableText.length);
+      }
+    }, 0);
+  };
+
+  // 预览
+  const handlePreview = () => {
+    if (mode === 'normal') {
+      const groovyScript = groovySyntaxConverter.toScript(scriptType, content, variables);
+      const labelExpr = groovySyntaxConverter.toExpression(scriptType, groovyScript, variables);
+      message.info(labelExpr || '预览: ' + groovyScript);
+    } else {
+      message.info('预览: ' + content);
+    }
+  };
+
+  // 变量选择器
+  const renderVariablePicker = () => {
+    if (!variablePickerOpen) {
+      return null;
+    }
+
+    // 按 tag 分组
+    const groups = new Map<string, GroovyVariableMapping[]>();
+    for (const v of variables) {
+      const group = groups.get(v.tag) || [];
+      group.push(v);
+      groups.set(v.tag, group);
+    }
+
+    return (
+      <div style={{
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        right: 0,
+        maxHeight: '200px',
+        overflowY: 'auto',
+        background: '#fff',
+        border: '1px solid #d9d9d9',
+        borderRadius: '6px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+        zIndex: 10,
+        padding: '8px',
+      }}>
+        {Array.from(groups.entries()).map(([tag, vars]) => (
+          <div key={tag}>
+            <div style={{ fontWeight: 500, marginBottom: '4px', color: '#666' }}>{tag}</div>
+            {vars.map(v => (
+              <div
+                key={v.label}
+                onClick={() => {
+                  handleInsertVariable(v);
+                  setVariablePickerOpen(false);
+                }}
+                style={{
+                  padding: '4px 8px',
+                  cursor: 'pointer',
+                  borderRadius: '4px',
+                }}
+                onMouseEnter={e => e.currentTarget.style.background = '#f5f5f5'}
+                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+              >
+                <div>{v.label}</div>
+                <div style={{ fontSize: '12px', color: '#999' }}>{v.value}</div>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <Modal
+      title={title}
+      open={true}
+      onCancel={onCancel}
+      onOk={handleConfirm}
+      width={700}
+      okText="确认"
+      cancelText="取消"
+    >
+      <div className="script-config-modal">
+        {/* 模式切换 */}
+        <div style={{ marginBottom: '16px' }}>
+          <Space>
+            <Button
+              type={mode === 'normal' ? 'primary' : 'default'}
+              icon={<EditOutlined />}
+              onClick={handleSwitchToNormal}
+              disabled={mode === 'normal'}
+            >
+              普通模式
+            </Button>
+            <Button
+              type={mode === 'advanced' ? 'primary' : 'default'}
+              icon={<CodeOutlined />}
+              onClick={handleSwitchToAdvanced}
+              disabled={mode === 'advanced'}
+            >
+              高级模式
+            </Button>
+          </Space>
+        </div>
+
+        {/* 编辑器区域 */}
+        {mode === 'normal' ? (
+          <div style={{ position: 'relative' }}>
+            <TextArea
+              ref={textareaRef}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              onSelect={(e: any) => setCursorPosition(e.target.selectionStart)}
+              placeholder="请输入表达式，可以使用 ${变量名} 插入变量"
+              rows={4}
+            />
+            <div style={{ marginTop: '8px' }}>
+              <Button
+                type="link"
+                onClick={() => setVariablePickerOpen(!variablePickerOpen)}
+                style={{ padding: 0 }}
+              >
+                插入变量
+              </Button>
+              {renderVariablePicker()}
+              <Button
+                type="link"
+                onClick={handlePreview}
+                style={{ marginLeft: '8px' }}
+              >
+                预览
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div>
+            <Alert
+              message="高级模式说明"
+              description="在高级模式下，您可以自由编写 Groovy 脚本。保存后再打开将无法转换回普通模式。"
+              type="warning"
+              showIcon
+              style={{ marginBottom: '16px' }}
+            />
+            <ScriptEditor
+              scriptType={scriptType}
+              script={content}
+              variables={variables}
+              onChange={setContent}
+            />
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default ScriptConfigModal;

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

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { GroovyVariableMapping } from '@flow-engine/flow-types';
+import { ScriptType } from '@/components/design-editor/typings/groovy-script';
+
+interface ScriptEditorProps {
+  /** 脚本类型 */
+  scriptType: ScriptType;
+  /** 当前脚本内容 */
+  script: string;
+  /** 变量映射列表 */
+  variables: GroovyVariableMapping[];
+  /** 脚本变更回调 */
+  onChange: (script: string) => void;
+  /** 是否只读 */
+  readonly?: boolean;
+}
+
+/**
+ * 高级脚本编辑器组件
+ * 支持自由编辑 Groovy 脚本
+ */
+export function ScriptEditor(props: ScriptEditorProps) {
+  const { script, onChange, readonly = false, variables } = props;
+
+  const handleChange = (value: string) => {
+    if (!readonly) {
+      onChange(value);
+    }
+  };
+
+  return (
+    <div className="script-editor">
+      <textarea
+        className="script-editor-textarea"
+        value={script}
+        onChange={(e) => handleChange(e.target.value)}
+        readOnly={readonly}
+        placeholder="请输入 Groovy 脚本..."
+        rows={10}
+      />
+    </div>
+  );
+}
+
+export default ScriptEditor;

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/scripts/components/variable-picker.module.less

@@ -0,0 +1,62 @@
+.variablePicker {
+  :global {
+    .ant-modal-body {
+      max-height: 500px;
+      overflow-y: auto;
+    }
+  }
+}
+
+.searchWrapper {
+  margin-bottom: 16px;
+}
+
+.variableList {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.variableGroup {
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.groupTitle {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 8px;
+  padding-left: 8px;
+}
+
+.variableItems {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.variableItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+}
+
+.variableLabel {
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.variableValue {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  font-family: 'Courier New', monospace;
+}