style: 全局参数样式修改

react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.less

@@ -1,20 +1,29 @@
-.form_item_block {
+.form-item {
   position: relative;
   padding-top: 40px;
   border-bottom: 1px dashed rgba(20, 49, 179, 0.12);
+
+  &__delete-button {
+    position: absolute;
+    top: 5px;
+    right: 0;
+  }
+
+  :global {
+    .anticon.anticon-question-circle {
+      margin-top: -14px;
+    }
+  }
 }
-.delete_button {
-  position: absolute;
-  top: 5px;
-  right: 0;
-}
-.add_button_form_item {
+
+.form-item-add {
   margin-top: 15px;
 
   &:first-child {
     margin-top: 0;
   }
-}
-.add_button_form_item .add_button {
-  padding: 0;
+
+  &__add-button {
+    padding: 0;
+  }
 }

react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx

@@ -55,14 +55,14 @@ const GlobalParamsDrawer = forwardRef(
         getContainer={false}
         onClose={onClose}
         open={open}
-        width={420}
+        width={520}
       >
         <Form
           name="global_params_form"
           autoComplete="off"
           form={form}
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 17 }}
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 19 }}
           initialValues={{ global_param: globalParam }}
           labelAlign="left"
         >
@@ -70,7 +70,7 @@ const GlobalParamsDrawer = forwardRef(
             {(fields, { add, remove }) => (
               <>
                 {fields.map(({ key, name, ...restField }) => (
-                  <div key={key} className={styles.form_item_block}>
+                  <div key={key} className={styles['form-item']}>
                     <Form.Item
                       {...restField}
                       name={[name, 'param_name']}
@@ -140,7 +140,7 @@ const GlobalParamsDrawer = forwardRef(
                     </Form.Item>
                     <Tooltip title="删除参数">
                       <Button
-                        className={styles.delete_button}
+                        className={styles['form-item__delete-button']}
                         type="link"
                         onClick={() => removeParameter(name, remove)}
                         icon={<DeleteOutlined />}
@@ -148,9 +148,9 @@ const GlobalParamsDrawer = forwardRef(
                     </Tooltip>
                   </div>
                 ))}
-                <Form.Item className={styles.add_button_form_item}>
+                <Form.Item className={styles['form-item-add']}>
                   <Button
-                    className={styles.add_button}
+                    className={styles['form-item-add__add-button']}
                     type="link"
                     onClick={() => add()}
                     icon={<PlusOutlined />}

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -695,8 +695,8 @@ const EditPipeline = () => {
   return (
     <div className={styles['pipeline-container']}>
       <ModelMenus onParDragEnd={onDragEnd}></ModelMenus>
-      <div className={styles['pipeline-container__content']}>
-        <div className={styles['pipeline-container__content__top']}>
+      <div className={styles['pipeline-container__workflow']}>
+        <div className={styles['pipeline-container__workflow__top']}>
           <Button
             type="default"
             icon={<KFIcon type="icon-quanjucanshu" />}
@@ -731,7 +731,7 @@ const EditPipeline = () => {
             保存并返回
           </Button>
         </div>
-        <div className={styles['pipeline-container__content__graph']} ref={graphRef}></div>
+        <div className={styles['pipeline-container__workflow__graph']} ref={graphRef}></div>
       </div>
       <Props ref={propsRef} onParentChange={formChange}></Props>
       <GlobalParamsDrawer

react-ui/src/pages/Pipeline/editPipeline/index.less

@@ -3,7 +3,7 @@
   height: 100%;
   background-color: #fff;
 
-  &__content {
+  &__workflow {
     flex: 1;
     height: 100%;
 

react-ui/src/pages/Pipeline/editPipeline/props.jsx

@@ -40,7 +40,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
 
   const afterOpenChange = () => {
     if (!open) {
-      console.log('zzzz', form.getFieldsValue());
+      // console.log('zzzzz', form.getFieldsValue());
       const control_strategy = form.getFieldValue('control_strategy');
       const in_parameters = form.getFieldValue('in_parameters');
       const out_parameters = form.getFieldValue('out_parameters');

react-ui/src/pages/Pipeline/editPipeline/utils.tsx

@@ -1,4 +1,5 @@
 import { PipelineGlobalParam } from '@/types';
+import { parseJsonText } from '@/utils';
 import { Graph, INode } from '@antv/g6';
 import { type MenuProps } from 'antd';
 
@@ -66,14 +67,3 @@ export function createMenuItems(
     ...nodes,
   ];
 }
-
-function parseJsonText(text?: string | null): any | null {
-  if (!text) {
-    return null;
-  }
-  try {
-    return JSON.parse(text);
-  } catch (error) {
-    return null;
-  }
-}

react-ui/src/utils/index.ts

@@ -14,3 +14,15 @@ export function getNameByCode(list: any[], code: any) {
   });
   return name;
 }
+
+// 解析 json 字符串
+export function parseJsonText(text?: string | null): any | null {
+  if (!text) {
+    return null;
+  }
+  try {
+    return JSON.parse(text);
+  } catch (error) {
+    return null;
+  }
+}