From eb9e882634c1487ee378dbef05e0948fa10369c6 Mon Sep 17 00:00:00 2001
From: cp3hnu <cp3hnu@gmail.com>
Date: Tue, 25 Mar 2025 16:47:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AddExperimentModal/index.tsx   | 14 ++---
 .../components/ViewParamsModal/index.less     | 33 +++---------
 .../components/ViewParamsModal/index.tsx      | 50 +++++++++++++----
 .../components/GlobalParamsDrawer/index.tsx   | 54 ++++++++++---------
 4 files changed, 85 insertions(+), 66 deletions(-)

diff --git a/react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx b/react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx
index edcab5a2..710a4df4 100644
--- a/react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx
+++ b/react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx
@@ -3,7 +3,7 @@ import editExperimentIcon from '@/assets/img/edit-experiment.png';
 import KFModal from '@/components/KFModal';
 import { type PipelineGlobalParam } from '@/types';
 import { to } from '@/utils/promise';
-import { Button, Form, Input, Radio, Select, type FormRule } from 'antd';
+import { Button, Form, Input, Radio, Select, Typography, type FormRule } from 'antd';
 import { useState } from 'react';
 import styles from './index.less';
 
@@ -63,13 +63,14 @@ export const getParamRules = (paramType: number, required: boolean = false): For
 };
 
 // 根据参数设置 label
-export const getParamType = (param: PipelineGlobalParam): string => {
+export const getParamLabel = (param: PipelineGlobalParam): React.ReactNode => {
   const paramTypes: Readonly<Record<number, string>> = {
     1: '字符串',
     2: '整型',
     3: '布尔类型',
   };
-  return param.param_name + `（${paramTypes[param.param_type]}）`;
+  const label = param.param_name + `（${paramTypes[param.param_type]}）`;
+  return <Typography.Text ellipsis={{ tooltip: label }}>{label}</Typography.Text>;
 };
 
 function AddExperimentModal({
@@ -99,8 +100,8 @@ function AddExperimentModal({
   };
 
   const paramLayout = {
-    labelCol: { span: 8 },
-    wrapperCol: { span: 16 },
+    labelCol: { span: 6 },
+    wrapperCol: { span: 18 },
   };
 
   // 除了流水线选择发生变化
@@ -157,7 +158,6 @@ function AddExperimentModal({
         form={form}
         {...layout}
         labelAlign="left"
-        labelWrap
       >
         <Form.Item
           label="实验名称"
@@ -215,7 +215,7 @@ function AddExperimentModal({
                       {...restField}
                       {...paramLayout}
                       key={key}
-                      label={getParamType(globalParam[name])}
+                      label={getParamLabel(globalParam[name])}
                       name={[name, 'param_value']}
                       rules={getParamRules(globalParam[name]['param_type'], true)}
                     >
diff --git a/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less
index a2b0ded5..06c5a4f0 100644
--- a/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less
+++ b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less
@@ -1,31 +1,14 @@
-.params_container {
-  max-height: 230px;
-  padding: 15px 15px 0;
+.params-container {
+  max-height: calc(100vh - 300px);
+  padding: 24px 24px 0;
   overflow-y: auto;
   border: 1px solid #e6e6e6;
   border-radius: 8px;
-
-  &_line {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-
-    &_label {
-      width: 180px;
-      color: @text-color;
-      font-size: 15px;
-    }
-    &_value {
-      flex: 1;
-      width: 100px;
-      margin-left: 15px;
-      padding: 10px 20px;
-      color: @text-color;
-      font-size: @font-size;
-      line-height: 20px;
-      background: #f6f6f6;
-      border: 1px solid #e0e0e1;
-      border-radius: 4px;
+}
+.params-empty {
+  :global {
+    .kf-empty__image {
+      width: 300px;
     }
   }
 }
diff --git a/react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx
index f860135a..8bd49817 100644
--- a/react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx
+++ b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx
@@ -4,9 +4,11 @@
  * @Description: 查看实验使用的参数
  */
 import parameterImg from '@/assets/img/modal-parameter.png';
+import KFEmpty, { EmptyType } from '@/components/KFEmpty';
 import KFModal from '@/components/KFModal';
 import { type PipelineGlobalParam } from '@/types';
-import { getParamType } from '../AddExperimentModal';
+import { Form } from 'antd';
+import { getParamComponent, getParamLabel } from '../AddExperimentModal';
 import styles from './index.less';
 
 type ParamsModalProps = {
@@ -26,14 +28,44 @@ function ParamsModal({ open, onCancel, globalParam = [] }: ParamsModalProps) {
       cancelButtonProps={{ style: { display: 'none' } }}
       width={825}
     >
-      <div className={styles.params_container}>
-        {globalParam?.map((item) => (
-          <div key={item.param_name} className={styles.params_container_line}>
-            <span className={styles.params_container_line_label}>{getParamType(item)}</span>
-            <span className={styles.params_container_line_value}>{item.param_value}</span>
-          </div>
-        ))}
-      </div>
+      {Array.isArray(globalParam) && globalParam.length > 0 ? (
+        <div className={styles['params-container']}>
+          <Form
+            name="view_params_form"
+            labelCol={{ span: 6 }}
+            wrapperCol={{ span: 18 }}
+            initialValues={{ global_param: globalParam }}
+            labelAlign="left"
+            disabled
+          >
+            <Form.List name="global_param">
+              {(fields) =>
+                fields.map(({ key, name, ...restField }) => (
+                  <Form.Item
+                    {...restField}
+                    key={key}
+                    name={[name, 'param_value']}
+                    label={getParamLabel(globalParam[name])}
+                  >
+                    {getParamComponent(
+                      globalParam[name]['param_type'],
+                      globalParam[name]['is_sensitive'],
+                    )}
+                  </Form.Item>
+                ))
+              }
+            </Form.List>
+          </Form>
+        </div>
+      ) : (
+        <KFEmpty
+          className={styles['params-empty']}
+          type={EmptyType.NoData}
+          title="暂无数据"
+          content="该流水线没有设置全局参数"
+          hasFooter={false}
+        />
+      )}
     </KFModal>
   );
 }
diff --git a/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx
index 65833bf7..669f21aa 100644
--- a/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx
+++ b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx
@@ -136,31 +136,35 @@ const GlobalParamsDrawer = forwardRef(
                         cur.global_param?.[name]?.param_type
                       }
                     >
-                      {({ getFieldValue }) => (
-                        <Form.Item
-                          {...restField}
-                          name={[name, 'param_value']}
-                          label="值"
-                          rules={getParamRules(
-                            getFieldValue(['global_param', name, 'param_type']),
-                            true,
-                          )}
-                        >
-                          {getParamComponent(getFieldValue(['global_param', name, 'param_type']))}
-                        </Form.Item>
-                      )}
-                    </Form.Item>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'is_sensitive']}
-                      label="脱敏显示"
-                      rules={[{ required: true, message: '请选择' }]}
-                      tooltip="展示关联的流水线的参数，脱敏的参数以xxxx展示"
-                    >
-                      <Radio.Group>
-                        <Radio value={1}>是</Radio>
-                        <Radio value={0}>否</Radio>
-                      </Radio.Group>
+                      {({ getFieldValue }) => {
+                        const type = getFieldValue(['global_param', name, 'param_type']);
+                        return (
+                          <>
+                            <Form.Item
+                              {...restField}
+                              name={[name, 'param_value']}
+                              label="值"
+                              rules={getParamRules(type, true)}
+                            >
+                              {getParamComponent(type)}
+                            </Form.Item>
+                            {type !== 3 && (
+                              <Form.Item
+                                {...restField}
+                                name={[name, 'is_sensitive']}
+                                label="脱敏显示"
+                                rules={[{ required: true, message: '请选择' }]}
+                                tooltip="展示关联的流水线的参数，脱敏的参数以xxxx展示"
+                              >
+                                <Radio.Group>
+                                  <Radio value={1}>是</Radio>
+                                  <Radio value={0}>否</Radio>
+                                </Radio.Group>
+                              </Form.Item>
+                            )}
+                          </>
+                        );
+                      }}
                     </Form.Item>
                     <Tooltip title="删除参数">
                       <Button