From e5f3559f2f73ec93e00776c7bac8fb924193d283 Mon Sep 17 00:00:00 2001
From: cp3hnu <cp3hnu@gmail.com>
Date: Thu, 12 Dec 2024 09:12:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E9=83=A8=E7=BD=B2=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F=E7=9A=84?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CreateForm/TrialConfig.tsx     |  10 +-
 .../components/ExperimentInstance/index.tsx   |   2 +-
 .../ModelDeployment/CreateVersion/index.less  |  28 ++-
 .../ModelDeployment/CreateVersion/index.tsx   | 175 ++++++++++--------
 .../ModelDeployment/ServiceInfo/index.tsx     |   4 +-
 5 files changed, 133 insertions(+), 86 deletions(-)

diff --git a/react-ui/src/pages/AutoML/components/CreateForm/TrialConfig.tsx b/react-ui/src/pages/AutoML/components/CreateForm/TrialConfig.tsx
index c9e5b61f..f0fdfa5d 100644
--- a/react-ui/src/pages/AutoML/components/CreateForm/TrialConfig.tsx
+++ b/react-ui/src/pages/AutoML/components/CreateForm/TrialConfig.tsx
@@ -1,5 +1,6 @@
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { AutoMLTaskType } from '@/enums';
+import { modalConfirm } from '@/utils/ui';
 import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import { Button, Col, Flex, Form, Input, InputNumber, Radio, Row, Select } from 'antd';
 import { classificationMetrics, regressionMetrics } from './ExecuteConfig';
@@ -72,8 +73,15 @@ function TrialConfig() {
                           shape="circle"
                           size="middle"
                           type="text"
-                          onClick={() => remove(name)}
                           icon={<MinusCircleOutlined />}
+                          onClick={() => {
+                            modalConfirm({
+                              title: '确定要删除该指标权重吗?',
+                              onOk: () => {
+                                remove(name);
+                              },
+                            });
+                          }}
                         ></Button>
                         {index === fields.length - 1 && (
                           <Button
diff --git a/react-ui/src/pages/Experiment/components/ExperimentInstance/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentInstance/index.tsx
index 1171df18..98817e9f 100644
--- a/react-ui/src/pages/Experiment/components/ExperimentInstance/index.tsx
+++ b/react-ui/src/pages/Experiment/components/ExperimentInstance/index.tsx
@@ -101,7 +101,7 @@ function ExperimentInstanceComponent({
   // 终止实验实例
   const handleTerminate = (instance: ExperimentInstance) => {
     modalConfirm({
-      title: '确定要终止这次实验运行吗？',
+      title: '确定要终止此次实验运行吗？',
       isDelete: false,
       onOk: () => {
         terminateExperimentInstance(instance);
diff --git a/react-ui/src/pages/ModelDeployment/CreateVersion/index.less b/react-ui/src/pages/ModelDeployment/CreateVersion/index.less
index 2527a233..0460788f 100644
--- a/react-ui/src/pages/ModelDeployment/CreateVersion/index.less
+++ b/react-ui/src/pages/ModelDeployment/CreateVersion/index.less
@@ -11,9 +11,31 @@
     background-color: white;
     border-radius: 10px;
 
-    &__type {
-      color: @text-color;
-      font-size: @font-size-input-lg;
+    &__env {
+      margin-bottom: 0 !important;
+
+      // 增加样式权重
+      & &__add-btn {
+        border-color: .addAlpha(@primary-color, 0.5) [];
+        box-shadow: none !important;
+        &:hover {
+          border-style: solid;
+        }
+      }
+    }
+
+    :global {
+      .ant-btn.ant-btn-icon-only .anticon {
+        font-size: 20px;
+      }
+
+      .ant-btn-variant-text:disabled {
+        color: rgba(0, 0, 0, 0.25);
+      }
+
+      .ant-btn-variant-text {
+        color: #565658;
+      }
     }
   }
 }
diff --git a/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx b/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx
index 29f8e739..41d12126 100644
--- a/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx
+++ b/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx
@@ -4,11 +4,10 @@
  * @Description: 创建服务版本
  */
 import CodeSelect from '@/components/CodeSelect';
-import KFIcon from '@/components/KFIcon';
 import PageTitle from '@/components/PageTitle';
 import ResourceSelect, {
-  requiredValidator,
   ResourceSelectorType,
+  requiredValidator,
   type ParameterInputObject,
 } from '@/components/ResourceSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
@@ -22,7 +21,7 @@ import { changePropertyName } from '@/utils';
 import { to } from '@/utils/promise';
 import SessionStorage from '@/utils/sessionStorage';
 import { modalConfirm } from '@/utils/ui';
-import { PlusOutlined } from '@ant-design/icons';
+import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { useNavigate, useParams } from '@umijs/max';
 import { App, Button, Col, Flex, Form, Input, InputNumber, Row, Select } from 'antd';
 import { omit, pick } from 'lodash';
@@ -426,82 +425,100 @@ function CreateServiceVersion() {
               </Col>
             </Row>
 
-            <Form.List name="env_variables">
-              {(fields, { add, remove }) => (
-                <>
-                  <Row gutter={8}>
-                    <Col span={10}>
-                      <Form.Item label="环境变量">
-                        {fields.length === 0 ? (
-                          <Button
-                            type="link"
-                            style={{ padding: '0' }}
-                            onClick={() => add()}
-                            disabled={disabled}
-                          >
-                            添加环境变量
-                          </Button>
-                        ) : null}
-                      </Form.Item>
-                    </Col>
-                  </Row>
-                  {fields.map(({ key, name, ...restField }) => (
-                    <Flex key={key} align="center" gap="0 8px" style={{ width: '50%' }}>
-                      <Form.Item
-                        {...restField}
-                        name={[name, 'key']}
-                        style={{ flex: 1 }}
-                        rules={[
-                          { required: true, message: '请输入变量名' },
-                          {
-                            pattern: /^[a-zA-Z_][a-zA-Z0-9_-]*$/,
-                            message:
-                              '变量名只支持字母、数字、下划线、中横线且开头必须是字母或下划线',
-                          },
-                        ]}
-                      >
-                        <Input placeholder="请输入变量名" disabled={disabled} />
-                      </Form.Item>
-                      <span style={{ marginBottom: '24px' }}>=</span>
-                      <Form.Item
-                        {...restField}
-                        name={[name, 'value']}
-                        style={{ flex: 1 }}
-                        rules={[{ required: true, message: '请输入变量值' }]}
-                      >
-                        <Input placeholder="请输入变量值" disabled={disabled} />
-                      </Form.Item>
-                      <Button
-                        type="link"
-                        style={{ marginBottom: '24px' }}
-                        icon={<KFIcon type="icon-shanchu" font={16} />}
-                        disabled={disabled}
-                        onClick={() => {
-                          modalConfirm({
-                            title: '删除',
-                            content: '是否确认要删除该环境变量?',
-                            onOk: () => {
-                              remove(name);
-                            },
-                          });
-                        }}
-                      ></Button>
-                    </Flex>
-                  ))}
-                  {fields.length > 0 ? (
-                    <Button
-                      type="link"
-                      style={{ padding: '0', margin: '-24px 0 24px' }}
-                      onClick={() => add()}
-                      icon={<PlusOutlined />}
-                      disabled={disabled}
-                    >
-                      环境变量
-                    </Button>
-                  ) : null}
-                </>
-              )}
-            </Form.List>
+            <Row gutter={8}>
+              <Col span={10}>
+                <Form.Item label="环境变量">
+                  <Form.List name="env_variables">
+                    {(fields, { add, remove }) => (
+                      <>
+                        {fields.map(({ key, name, ...restField }, index) => (
+                          <Flex key={key} align="center" gap="0 8px">
+                            <Form.Item
+                              {...restField}
+                              name={[name, 'key']}
+                              style={{ flex: 1 }}
+                              rules={[
+                                { required: true, message: '请输入变量名' },
+                                {
+                                  pattern: /^[a-zA-Z_][a-zA-Z0-9_-]*$/,
+                                  message:
+                                    '变量名只支持字母、数字、下划线、中横线且开头必须是字母或下划线',
+                                },
+                              ]}
+                            >
+                              <Input placeholder="请输入变量名" disabled={disabled} />
+                            </Form.Item>
+                            <span style={{ marginBottom: '24px' }}>=</span>
+                            <Form.Item
+                              {...restField}
+                              name={[name, 'value']}
+                              style={{ flex: 1 }}
+                              rules={[{ required: true, message: '请输入变量值' }]}
+                            >
+                              <Input placeholder="请输入变量值" disabled={disabled} />
+                            </Form.Item>
+                            <Flex
+                              style={{
+                                width: '76px',
+                                marginLeft: '10px',
+                                height: '46px',
+                                marginBottom: '24px',
+                              }}
+                              align="center"
+                            >
+                              <Button
+                                style={{
+                                  marginRight: '3px',
+                                }}
+                                shape="circle"
+                                size="middle"
+                                type="text"
+                                icon={<MinusCircleOutlined />}
+                                disabled={disabled}
+                                onClick={() => {
+                                  modalConfirm({
+                                    title: '确定要删除该环境变量吗?',
+                                    onOk: () => {
+                                      remove(name);
+                                    },
+                                  });
+                                }}
+                              ></Button>
+                              {index === fields.length - 1 && (
+                                <Button
+                                  shape="circle"
+                                  size="middle"
+                                  type="text"
+                                  disabled={disabled}
+                                  icon={<PlusCircleOutlined />}
+                                  onClick={() => add()}
+                                ></Button>
+                              )}
+                            </Flex>
+                          </Flex>
+                        ))}
+                        {fields.length === 0 && (
+                          <Form.Item className={styles['create-service-version__content__env']}>
+                            <Button
+                              className={styles['create-service-version__content__env__add-btn']}
+                              color="primary"
+                              variant="dashed"
+                              disabled={disabled}
+                              icon={<PlusOutlined />}
+                              block
+                              onClick={() => add()}
+                            >
+                              环境变量
+                            </Button>
+                          </Form.Item>
+                        )}
+                      </>
+                    )}
+                  </Form.List>
+                </Form.Item>
+              </Col>
+            </Row>
+
             <Form.Item wrapperCol={{ offset: 0, span: 16 }}>
               <Button type="primary" htmlType="submit">
                 {buttonText}
diff --git a/react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx b/react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx
index 037bbb72..9cd4ebfb 100644
--- a/react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx
+++ b/react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx
@@ -179,8 +179,8 @@ function ServiceInfo() {
   // 处理停止
   const handleServiceVersionStop = async (record: ServiceVersionData) => {
     modalConfirm({
-      title: '停止',
-      content: '是否确认停止该服务?',
+      title: '是否确认停止该服务?',
+      isDelete: false,
       onOk: () => {
         stopServiceVersion(record);
       },