fix node-title.tsx

Author: xlorne

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import {Modal} from 'antd';
+import {ScriptType,GroovyVariableMapping} from '@/components/design-editor/typings/script';
+
+
+export interface GroovyScriptModalProps {
+    open: boolean;
+    /** 脚本类型 */
+    scriptType: ScriptType;
+    /** 当前脚本 */
+    script: string;
+    /** 变量映射列表 */
+    variables: GroovyVariableMapping[];
+    /** 确认回调 */
+    onConfirm: (script: string) => void;
+    /** 取消回调 */
+    onCancel: () => void;
+    /** 弹框标题 */
+    title?: string;
+    /** 自定义内容组件（可选） */
+    content:React.ComponentType<GroovyScriptContent>;
+}
+
+
+export interface GroovyScriptContent {
+    /** 脚本类型 */
+    type: ScriptType;
+    /** 当前脚本 */
+    content: string;
+    /** 变量映射列表 */
+    variables: GroovyVariableMapping[];
+    /** 确认回调 */
+    onChange: (script: string) => void;
+}
+
+interface GroovyScriptContentComponentAction{
+    handleConfirm: () => void;
+}
+
+interface GroovyScriptContentComponentProps extends GroovyScriptModalProps{
+    actionRef:React.Ref<GroovyScriptContentComponentAction>;
+}
+
+const GroovyScriptContentComponent: React.FC<GroovyScriptContentComponentProps> = (props) => {
+    const [content, setContent] = React.useState(props.script);
+    const GroovyContent = props.content;
+
+    React.useImperativeHandle(props.actionRef,()=>{
+        return {
+            handleConfirm:() => {
+                props.onConfirm(content);
+                props.onCancel();
+            }
+        }
+    },[content]);
+
+    return (
+        <GroovyContent
+            type={props.scriptType}
+            content={content}
+            variables={props.variables}
+            onChange={setContent}
+        />
+    )
+}
+
+/**
+ * 通用脚本配置弹框
+ * 支持普通模式和高级模式切换
+ */
+export const GroovyScriptModal: React.FC<GroovyScriptModalProps> = (props) => {
+
+    const actionRef = React.useRef<GroovyScriptContentComponentAction>(null);
+
+    const handleOk = () => {
+        if (actionRef.current) {
+            actionRef.current.handleConfirm();
+        }
+    }
+
+    return (
+        <Modal
+            title={props.title}
+            open={props.open}
+            onCancel={props.onCancel}
+            onOk={handleOk}
+            width={800}
+            okText="确认"
+            cancelText="取消"
+            destroyOnHidden={true}
+        >
+            <GroovyScriptContentComponent
+                {...props}
+                actionRef={actionRef}
+            />
+        </Modal>
+    );
+};
+

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

@@ -0,0 +1,51 @@
+import React from "react";
+
+interface GroovyScriptPreviewProps {
+    value: string;
+    // 多行
+    multiline?: boolean;
+}
+
+export const GroovyScriptPreview: React.FC<GroovyScriptPreviewProps> = (props) => {
+    const value = props.value;
+
+    const multiline = props.multiline || false;
+
+    return (
+        <>
+            {multiline && (
+                <div
+                    style={{
+                        minHeight: '45px',
+                        padding: '4px 11px',
+                        border: '1px solid #d9d9d9',
+                        borderRadius: '6px 0 0 6px',
+                        backgroundColor: value ? '#fff' : '#fafafa',
+                        color: value ? 'rgba(0,0,0,0.88)' : 'rgba(0,0,0,0.25)',
+                    }}
+                >
+                    {value}
+                </div>
+            )}
+
+            {!multiline && (
+                <div
+                    style={{
+                        flex: 1,
+                        padding: '4px 11px',
+                        backgroundColor: value ? '#fff' : '#fafafa',
+                        border: '1px solid #d9d9d9',
+                        borderRadius: '6px 0 0 6px',
+                        color: value ? 'rgba(0,0,0,0.88)' : 'rgba(0,0,0,0.25)',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                    }}
+                >
+                    {value}
+                </div>
+            )}
+        </>
+
+    )
+}