fix: properly generate and parse Groovy script format for node title

- Fix toGroovySyntax to generate complete function format: def run(request){// @title\nreturn ...}
- Fix toLabelExpression to parse new function wrapper format
- Fix isAdvancedMode to correctly identify new script format with // @title and def run() wrapper
- Simplify node-title component to avoid render loop issues

The backend expects the full Groovy function format, not just the return statement.
This fix ensures the title script is correctly saved and loaded from backend.

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/strategy/node-title.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState, useCallback } from 'react';
 import { Form, Button, Space } from 'antd';
 import { EditOutlined } from '@ant-design/icons';
 import { Field, FieldRenderProps } from '@flowgram.ai/fixed-layout-editor';
@@ -11,9 +11,8 @@ import { TitleConfigModal } from './TitleConfigModal';
  */
 export const NodeTitleStrategy: React.FC = () => {
   const [showConfigModal, setShowConfigModal] = useState(false);
-  const [currentScript, setCurrentScript] = useState('');
-  const [displayScript, setDisplayScript] = useState('');
-  // 使用 ref 保存 onChange 回调，以便在弹框确认后更新编辑器状态
+  const [modalScript, setModalScript] = useState('');
+  // 使用 ref 保存 onChange 回调
   const onChangeRef = useRef<((value: string) => void) | null>(null);
 
   // 获取表单字段（从context获取）
@@ -26,7 +25,7 @@ export const NodeTitleStrategy: React.FC = () => {
   const mappings = GroovyVariableService.getAllMappings(formFields);
 
   // 渲染预览内容
-  const renderPreview = (script: string) => {
+  const renderPreview = useCallback((script: string) => {
     if (!script) {
       return '（未配置）';
     }
@@ -44,23 +43,20 @@ export const NodeTitleStrategy: React.FC = () => {
     }
 
     return '（自定义配置）';
-  };
+  }, [mappings]);
 
-  const handleOpenConfig = () => {
-    // 使用当前显示的脚本值
-    setCurrentScript(displayScript);
+  const handleOpenConfig = (currentValue: string) => {
+    setModalScript(currentValue || '');
     setShowConfigModal(true);
   };
 
-  const handleConfirm = (script: string) => {
-    // 更新显示的脚本值
-    setDisplayScript(script);
-    // 关键修复：调用 onChange 回调更新编辑器状态
+  const handleConfirm = useCallback((script: string) => {
+    // 调用 onChange 回调更新编辑器状态
     if (onChangeRef.current) {
       onChangeRef.current(script);
     }
     setShowConfigModal(false);
-  };
+  }, []);
 
   return (
     <>
@@ -73,11 +69,6 @@ export const NodeTitleStrategy: React.FC = () => {
               // 保存 onChange 回调到 ref
               onChangeRef.current = onChange;
 
-              // 更新显示的脚本值（当编辑器状态改变时）
-              if (value !== displayScript) {
-                setDisplayScript(value || '');
-              }
-
               return (
                 <Space.Compact style={{ width: '100%' }}>
                   <div
@@ -93,11 +84,11 @@ export const NodeTitleStrategy: React.FC = () => {
                       textOverflow: 'ellipsis',
                     }}
                   >
-                    {renderPreview(value)}
+                    {renderPreview(value || '')}
                   </div>
                   <Button
                     icon={<EditOutlined />}
-                    onClick={handleOpenConfig}
+                    onClick={() => handleOpenConfig(value || '')}
                     style={{ borderRadius: '0 6px 6px 0' }}
                   >
                     编辑
@@ -111,7 +102,7 @@ export const NodeTitleStrategy: React.FC = () => {
 
       {showConfigModal && (
         <TitleConfigModal
-          script={currentScript}
+          script={modalScript}
           formFields={formFields}
           onConfirm={handleConfirm}
           onCancel={() => setShowConfigModal(false)}

frontend/packages/flow-pc/flow-pc-design/src/services/groovy-variable-service.ts

@@ -134,9 +134,14 @@ export class GroovyVariableService {
 
   /**
    * 检查是否为高级模式（无法解析回可视化）
-   * 通过检测 // @TITLE 注释
+   * 通过检测完整的 def run(request){// @TITLE ...} 格式
    */
   static isAdvancedMode(script: string): boolean {
-    return script.includes('// @TITLE');
+    // 检查是否包含 // @TITLE 注释
+    if (!script.includes('// @TITLE')) {
+      return false;
+    }
+    // 检查是否有完整的函数包装 def run(request){...}
+    return /def\s+run\s*\(\s*request\s*\)\s*\{[\s\S]*\/\/\s*@TITLE[\s\S]*\}/.test(script);
   }
 }

frontend/packages/flow-pc/flow-pc-design/src/utils/title-syntax-converter.ts

@@ -69,8 +69,9 @@ export class TitleSyntaxConverter {
       groovyExpression = parts.join(' + ');
     }
 
-    // 添加 return 和标题注释
-    return `${TITLE_COMMENT}\nreturn ${groovyExpression}`;
+    // 添加 return 和标题注释，包装成完整的Groovy函数
+    // 后端期望格式: def run(request){// @TITLE\nreturn "..."}
+    return `def run(request){\n${TITLE_COMMENT}\nreturn ${groovyExpression}\n}`;
   }
 
   /**
@@ -100,6 +101,13 @@ export class TitleSyntaxConverter {
         return null; // 无法解析
       }
 
+      // 移除函数包装 def run(request){...}
+      // 提取函数体内容
+      const funcMatch = result.match(/def\s+run\s*\([^)]*\)\s*\{([\s\S]*)\}/);
+      if (funcMatch) {
+        result = funcMatch[1];
+      }
+
       // 移除 @TITLE 注释
       result = result.replace(TITLE_COMMENT, '').trim();
 
@@ -129,16 +137,11 @@ export class TitleSyntaxConverter {
         placeholders++;
       }
 
-      // 现在处理字符串拼接，移除引号和 +
-      // 移除所有 " + " (带空格的字符串拼接)
-      result = result.replace(/\s*\+\s*/g, '');
-
-      // 移除引号，但保留占位符
-      result = result.replace(/^"([^"]*)"$/g, '$1'); // 单独的字符串
-      result = result.replace(/^"([^"]*)"(.*)"$/g, '$1$2'); // 开头的引号
-      result = result.replace(/^(.*?)"([^"]*)"$/g, '$1$2'); // 结尾的引号
+      // 处理字符串拼接：移除引号之间的 + 连接符
+      // 使用更精确的正则来处理 "text" + expr + "text" 格式
+      result = result.replace(/"([^"]*)"\s*\+\s*/g, '$1');  // "text" +  -> text
+      result = result.replace(/\s*\+\s*"([^"]*)"/g, '$1');  //  + "text" -> text
 
-      // 还有一些情况需要处理，让我们用更简单的方法
       // 移除所有剩余的引号
       result = result.replace(/"/g, '');