Merge pull request #47 from codingapi/dev

Dev

Author: xlorne

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

@@ -0,0 +1,87 @@
+import {ScriptType,GroovyVariableMapping} from '@/components/design-editor/typings/script';
+import {Button, Input, Space} from 'antd';
+import React from "react";
+import {GroovyScriptContent} from "@/components/design-editor/node-components/scripts/components/groovy-script-modal";
+import {
+    NodeTitleGroovyConvertor
+} from "@/components/design-editor/node-components/scripts/services/convertor/node-title";
+import { DeleteOutlined } from "@ant-design/icons";
+import {
+    GroovyScriptConverterContext
+} from "@/components/design-editor/node-components/scripts/services/convertor/utils";
+
+const {TextArea} = Input;
+
+interface ScriptEditorProps {
+    /** 脚本类型 */
+    type: ScriptType;
+    /** 当前脚本内容 */
+    script: string;
+    /** 变量映射列表 */
+    variables: GroovyVariableMapping[];
+    /** 脚本变更回调 */
+    onChange: (script: string) => void;
+    /** 是否只读 */
+    readonly?: boolean;
+}
+
+/**
+ * 高级脚本编辑器组件
+ * 支持自由编辑 Groovy 脚本
+ */
+export const ScriptEditor:React.FC<ScriptEditorProps> = (props: ScriptEditorProps)=> {
+    const {script, onChange, readonly = false, variables} = props;
+
+    const handleChange = (value: string) => {
+        if (!readonly) {
+            onChange(value);
+        }
+    };
+
+    return (
+        <TextArea
+            value={script}
+            onChange={(e) => handleChange(e.target.value)}
+            readOnly={readonly}
+            style={{ fontFamily: 'Courier New, monospace' }}
+            placeholder="请输入 Groovy 脚本..."
+            autoSize={{ minRows: 6, maxRows: 10 }}
+        />
+    );
+}
+
+
+export const AdvancedScriptEditor: React.FC<GroovyScriptContent> = (props) => {
+
+    const groovyScriptConvertor = GroovyScriptConverterContext.getInstance().createConverter(props.type, props.content, props.variables);
+
+    if(groovyScriptConvertor) {
+
+        return (
+            <div>
+                自定义脚本
+                <ScriptEditor
+                    type={props.type}
+                    script={props.content}
+                    variables={props.variables}
+                    onChange={props.onChange}
+                />
+                <Space
+                    style={{
+                        marginTop: 8
+                    }}
+                >
+                    <Button
+                        icon={<DeleteOutlined/>}
+                        danger={true}
+                        onClick={() => {
+                            props.onChange(groovyScriptConvertor.getDefaultScript());
+                        }}
+                    >
+                        重置配置
+                    </Button>
+                </Space>
+            </div>
+        )
+    }
+}

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,59 @@
+import React from "react";
+import {GroovyVariableMapping, ScriptType} from "@/components/design-editor/typings/script";
+import {
+    GroovyScriptConverterContext
+} from "@/components/design-editor/node-components/scripts/services/convertor/utils";
+
+interface GroovyScriptPreviewProps {
+    script: string;
+    variables: GroovyVariableMapping[];
+    type: ScriptType;
+    // 多行
+    multiline?: boolean;
+}
+
+export const GroovyScriptPreview: React.FC<GroovyScriptPreviewProps> = (props) => {
+    const groovyScriptConvertor = GroovyScriptConverterContext.getInstance().createConverter(props.type, props.script, props.variables);
+
+    const multiline = props.multiline || false;
+
+    const value = groovyScriptConvertor?.toExpression() || '';
+
+    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>
+            )}
+        </>
+
+    )
+}