feat: improve node title configuration UI

- Add Popover mode for variable picker with cursor position insertion
- Change // @title to // @CUSTOM_SCRIPT for advanced mode identification
- Add support for switching back from advanced to normal mode
- Add reset button at bottom of config modal
- Fix variable sorting to put form fields at the end
- Fix Groovy syntax converter for consecutive variables
- Add form fields support in node title strategy
- Fix advanced mode display to show "(自定义配置)" instead of raw code

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/TitleConfigModal.tsx

@@ -1,10 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Modal, Input, Alert, Button, Space, message } from 'antd';
-import { EditOutlined, CodeOutlined, RollbackOutlined } from '@ant-design/icons';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { Modal, Input, Alert, Button, Space, message, Popover, Empty } from 'antd';
+import { EditOutlined, CodeOutlined, RollbackOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
 import { GroovyVariableMapping } from '@flow-engine/flow-types';
 import { GroovyVariableService } from '@/services/groovy-variable-service';
 import { TitleSyntaxConverter } from '@/utils/title-syntax-converter';
-import { VariablePicker } from './VariablePicker';
 
 const { TextArea } = Input;
 
@@ -31,7 +30,9 @@ export const TitleConfigModal: React.FC<TitleConfigModalProps> = ({
 }) => {
   const [mode, setMode] = useState<'normal' | 'advanced'>('normal');
   const [content, setContent] = useState('');
-  const [showVariablePicker, setShowVariablePicker] = useState(false);
+  const [cursorPosition, setCursorPosition] = useState(0);
+  const [variablePickerOpen, setVariablePickerOpen] = useState(false);
+  const textareaRef = useRef<any>(null);
 
   // 标记用户是否手动修改了模式（防止 useEffect 覆盖用户操作）
   const userModifiedModeRef = useRef(false);
@@ -63,9 +64,33 @@ export const TitleConfigModal: React.FC<TitleConfigModalProps> = ({
     setMode(parsedMode);
   }, [script]);
 
-  // 插入变量
+  // 插入变量到光标位置
   const handleInsertVariable = (mapping: GroovyVariableMapping) => {
-    setContent(prev => prev + `\${${mapping.label}}`);
+    const variableText = `\${${mapping.label}}`;
+    // 使用之前保存的光标位置插入变量
+    const start = cursorPosition;
+    const newContent = content.substring(0, start) + variableText + content.substring(start);
+    setContent(newContent);
+    // 设置光标位置到插入变量之后
+    setCursorPosition(start + variableText.length);
+    // 聚焦到 textarea
+    setTimeout(() => {
+      if (textareaRef.current) {
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(start + variableText.length, start + variableText.length);
+      }
+    }, 0);
+  };
+
+  // 处理文本框变化时更新光标位置
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value);
+    setCursorPosition(e.target.selectionStart || 0);
+  };
+
+  // 处理文本框聚焦时更新光标位置
+  const handleTextareaFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    setCursorPosition(e.target.selectionStart || 0);
   };
 
   // 切换到高级模式
@@ -79,11 +104,28 @@ export const TitleConfigModal: React.FC<TitleConfigModalProps> = ({
     setMode('advanced');
   };
 
-  // 重置为普通模式
-  const handleResetToNormal = () => {
+  // 切换回普通模式
+  const handleSwitchToNormal = () => {
     userModifiedModeRef.current = true;
-    setContent('');
-    setMode('normal');
+    // 尝试解析当前高级脚本为标签表达式
+    const labelExpr = TitleSyntaxConverter.toLabelExpression(content, mappings);
+    if (labelExpr !== null) {
+      // 能解析，切换到普通模式并显示解析后的内容
+      setContent(labelExpr);
+      setMode('normal');
+    } else {
+      // 无法解析，提示用户确认
+      Modal.confirm({
+        title: '切换回普通模式',
+        content: '当前自定义代码无法解析为可视化标签表达式，切换后将丢失这些配置。是否继续？',
+        okText: '确定',
+        cancelText: '取消',
+        onOk: () => {
+          setContent('');
+          setMode('normal');
+        },
+      });
+    }
   };
 
   // 确认
@@ -157,12 +199,27 @@ export const TitleConfigModal: React.FC<TitleConfigModalProps> = ({
           <div style={sectionStyle}>
             {mode === 'normal' ? (
               <Space>
-                <Button
-                  icon={<EditOutlined />}
-                  onClick={() => setShowVariablePicker(true)}
+                <Popover
+                  content={
+                    <VariablePickerContent
+                      mappings={mappings}
+                      onSelect={handleInsertVariable}
+                    />
+                  }
+                  trigger="click"
+                  placement="bottomLeft"
+                  open={variablePickerOpen}
+                  onOpenChange={setVariablePickerOpen}
+                  overlayStyle={{ padding: 0 }}
+                  getPopupContainer={(trigger) => trigger.parentElement || document.body}
                 >
-                  插入变量
-                </Button>
+                  <Button
+                    icon={<EditOutlined />}
+                    onClick={() => setVariablePickerOpen(true)}
+                  >
+                    插入变量
+                  </Button>
+                </Popover>
                 <Button
                   icon={<CodeOutlined />}
                   onClick={handleSwitchToAdvanced}
@@ -173,9 +230,9 @@ export const TitleConfigModal: React.FC<TitleConfigModalProps> = ({
             ) : (
               <Button
                 icon={<RollbackOutlined />}
-                onClick={handleResetToNormal}
+                onClick={handleSwitchToNormal}
               >
-                重置
+                返回普通模式
               </Button>
             )}
           </div>
@@ -186,8 +243,10 @@ export const TitleConfigModal: React.FC<TitleConfigModalProps> = ({
             {mode === 'normal' ? (
               <>
                 <TextArea
+                  ref={textareaRef}
                   value={content}
-                  onChange={e => setContent(e.target.value)}
+                  onChange={handleContentChange}
+                  onFocus={handleTextareaFocus}
                   placeholder="点击上方按钮插入变量，或直接输入文字内容"
                   autoSize={{ minRows: 3, maxRows: 6 }}
                 />
@@ -197,24 +256,108 @@ export const TitleConfigModal: React.FC<TitleConfigModalProps> = ({
               </>
             ) : (
               <TextArea
+                ref={textareaRef}
                 value={content}
-                onChange={e => setContent(e.target.value)}
-                placeholder='// @TITLE\nreturn "审批：" + request.getOperatorName()'
+                onChange={handleContentChange}
+                onFocus={handleTextareaFocus}
+                placeholder='// @CUSTOM_SCRIPT\ndef run(request){\n    return "审批：" + request.getOperatorName()\n}'
                 autoSize={{ minRows: 6, maxRows: 10 }}
                 style={{ fontFamily: 'Courier New, monospace' }}
               />
             )}
           </div>
+
+          {/* 底部操作区 */}
+          <div style={footerStyle}>
+            <Button
+              danger
+              icon={<DeleteOutlined />}
+              onClick={() => {
+                Modal.confirm({
+                  title: '重置设置',
+                  content: '确定要清除所有标题配置吗？',
+                  okText: '确定',
+                  cancelText: '取消',
+                  onOk: () => {
+                    userModifiedModeRef.current = true;
+                    setContent('');
+                    setMode('normal');
+                  },
+                });
+              }}
+            >
+              重置设置
+            </Button>
+          </div>
         </div>
       </Modal>
+    </>
+  );
+};
+
+// Popover 版本的变量选择器内容
+const VariablePickerContent: React.FC<{
+  mappings: GroovyVariableMapping[];
+  onSelect: (mapping: GroovyVariableMapping) => void;
+}> = ({ mappings, onSelect }) => {
+  const [searchText, setSearchText] = useState('');
+
+  // 阻止事件冒泡，防止 Popover 关闭
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    setSearchText(e.target.value);
+  };
 
-      <VariablePicker
-        mappings={mappings}
-        onSelect={handleInsertVariable}
-        visible={showVariablePicker}
-        onClose={() => setShowVariablePicker(false)}
+  const filteredMappings = useMemo(() => {
+    if (!searchText) {
+      return mappings;
+    }
+    const lowerSearch = searchText.toLowerCase();
+    return mappings.filter(
+      m =>
+        m.label.toLowerCase().includes(lowerSearch) ||
+        m.value.toLowerCase().includes(lowerSearch)
+    );
+  }, [mappings, searchText]);
+
+  const groupedMappings = useMemo(() => {
+    return GroovyVariableService.groupByTag(filteredMappings);
+  }, [filteredMappings]);
+
+  return (
+    <div style={pickerContainerStyle} onClick={e => e.stopPropagation()}>
+      <Input
+        placeholder="搜索变量..."
+        prefix={<SearchOutlined style={{ color: '#999' }} />}
+        value={searchText}
+        onChange={handleInputChange}
+        allowClear
+        style={{ marginBottom: 8 }}
       />
-    </>
+      <div style={pickerListStyle}>
+        {groupedMappings.size === 0 ? (
+          <Empty description="未找到匹配的变量" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        ) : (
+          Array.from(groupedMappings.entries()).map(([tag, variables]) => (
+            <div key={tag}>
+              <div style={pickerGroupTitleStyle}>{tag}</div>
+              <div style={pickerItemsStyle}>
+                {variables.map(variable => (
+                  <div
+                    key={variable.label}
+                    style={pickerItemStyle}
+                    onClick={() => onSelect(variable)}
+                  >
+                    <span style={pickerItemLabelStyle}>{variable.label}</span>
+                    <span style={pickerItemValueStyle}>{variable.value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
   );
 };
 
@@ -248,3 +391,54 @@ const hintStyle: React.CSSProperties = {
   fontSize: 12,
   color: 'rgba(0, 0, 0, 0.25)',
 };
+
+const footerStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'flex-start',
+  paddingTop: 8,
+  borderTop: '1px solid #f0f0f0',
+};
+
+const pickerContainerStyle: React.CSSProperties = {
+  width: 400,
+  maxHeight: 300,
+  overflow: 'auto',
+};
+
+const pickerListStyle: React.CSSProperties = {
+  maxHeight: 250,
+  overflow: 'auto',
+};
+
+const pickerGroupTitleStyle: React.CSSProperties = {
+  fontSize: 12,
+  fontWeight: 500,
+  color: 'rgba(0, 0, 0, 0.45)',
+  padding: '8px 0 4px',
+};
+
+const pickerItemsStyle: React.CSSProperties = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: 8,
+};
+
+const pickerItemStyle: React.CSSProperties = {
+  padding: '4px 8px',
+  backgroundColor: '#f5f5f5',
+  borderRadius: 4,
+  cursor: 'pointer',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 2,
+};
+
+const pickerItemLabelStyle: React.CSSProperties = {
+  fontSize: 13,
+  color: 'rgba(0, 0, 0, 0.88)',
+};
+
+const pickerItemValueStyle: React.CSSProperties = {
+  fontSize: 11,
+  color: 'rgba(0, 0, 0, 0.45)',
+};

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/strategy/node-title.tsx

@@ -2,6 +2,8 @@ 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';
+import { useDesignContext } from '@/components/design-panel/hooks/use-design-context';
+import { WorkflowFormManager } from '@/components/design-panel/manager/form';
 import { GroovyVariableService } from '@/services/groovy-variable-service';
 import { TitleSyntaxConverter } from '@/utils/title-syntax-converter';
 import { TitleConfigModal } from './TitleConfigModal';
@@ -15,11 +17,31 @@ export const NodeTitleStrategy: React.FC = () => {
   // 使用 ref 保存 onChange 回调
   const onChangeRef = useRef<((value: string) => void) | null>(null);
 
-  // 获取表单字段（从context获取）
+  // 从 design context 获取表单字段
+  const { state } = useDesignContext();
+
+  // 获取表单字段（从 workflow form 中提取）
   const formFields = useMemo(() => {
-    // TODO: 从 design context 获取当前流程的表单字段
-    return [];
-  }, []);
+    const fields: Array<{ name: string; code: string }> = [];
+    if (!state?.workflow?.form) {
+      return fields;
+    }
+    const formManager = new WorkflowFormManager(state.workflow.form);
+    // 获取主表单字段
+    const mainFields = formManager.getFormFields(state.workflow.form.code);
+    for (const field of mainFields) {
+      fields.push({ name: field.name, code: field.code });
+    }
+    // 获取子表单字段
+    const subForms = state.workflow.form.subForms || [];
+    for (const subForm of subForms) {
+      const subFields = formManager.getFormFields(subForm.code);
+      for (const field of subFields) {
+        fields.push({ name: `${subForm.name}.${field.name}`, code: field.code });
+      }
+    }
+    return fields;
+  }, [state?.workflow?.form]);
 
   // 获取变量映射
   const mappings = GroovyVariableService.getAllMappings(formFields);
@@ -32,16 +54,12 @@ export const NodeTitleStrategy: React.FC = () => {
 
     const mode = TitleSyntaxConverter.parseMode(script);
     if (mode === 'normal') {
+      // Normal 模式：尝试解析为标签表达式
       const labelExpr = TitleSyntaxConverter.toLabelExpression(script, mappings);
-      return labelExpr || script;
-    }
-
-    // 尝试解析高级脚本
-    const labelExpr = TitleSyntaxConverter.toLabelExpression(script, mappings);
-    if (labelExpr !== null) {
-      return labelExpr;
+      return labelExpr || '（未配置）';
     }
 
+    // Advanced 模式：显示"用户自定义配置"，不显示代码
     return '（自定义配置）';
   }, [mappings]);