style: 全局参数样式修改

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

@@ -27,7 +27,7 @@ function PropsLabel({ title, menuItems, onClick }: PropsLabelProps) {
         menu={{
           items: menuItems,
           onClick: handleItemClick,
-          triggerSubMenuAction: 'click',
+          triggerSubMenuAction: 'hover',
         }}
         trigger={['click']}
         placement="topRight"

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

@@ -198,7 +198,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
       afterOpenChange={afterOpenChange}
       open={open}
       width={520}
-      className={styles.editPipelineProps}
+      className={styles['pipeline-drawer']}
     >
       <Form
         name="form"
@@ -215,7 +215,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
         }}
         autoComplete="off"
       >
-        <div className={styles.editPipelinePropsContent}>
+        <div className={styles['pipeline-drawer__title']}>
           <SubAreaTitle image="/assets/images/static-message.png" title="基本信息"></SubAreaTitle>
         </div>
         <Form.Item
@@ -242,20 +242,21 @@ const Props = forwardRef(({ onParentChange }, ref) => {
         >
           <Input disabled />
         </Form.Item>
-        <div className={styles.editPipelinePropsContent}>
+        <div className={styles['pipeline-drawer__title']}>
           <SubAreaTitle image="/assets/images/duty-message.png" title="任务信息"></SubAreaTitle>
         </div>
         <Form.Item label="镜像" required>
-          <div className={styles['ref-row']}>
+          <div className={styles['pipeline-drawer__ref-row']}>
             <Form.Item name="image" noStyle rules={[{ required: true, message: '请输入镜像' }]}>
               <Input placeholder="请输入或选择镜像" allowClear />
             </Form.Item>
             <Form.Item noStyle>
               <Button
                 type="link"
+                size="small"
                 icon={getSelectBtnIcon({ item_type: 'image' })}
                 onClick={() => selectResource('image', { item_type: 'image' })}
-                className={styles['select-button']}
+                className={styles['pipeline-drawer__ref-row__select-button']}
               >
                 选择镜像
               </Button>
@@ -368,7 +369,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
             <Input placeholder={item.value.label} allowClear />
           </Form.Item>
         ))}
-        <div className={styles.editPipelinePropsContent}>
+        <div className={styles['pipeline-drawer__title']}>
           <SubAreaTitle image="/assets/images/duty-message.png" title="输入参数"></SubAreaTitle>
         </div>
         {inParametersList.map((item) => (
@@ -388,7 +389,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
             }
             required={item.value.require ? true : false}
           >
-            <div className={styles['ref-row']}>
+            <div className={styles['pipeline-drawer__ref-row']}>
               <Form.Item
                 name={['in_parameters', item.key]}
                 noStyle
@@ -408,10 +409,11 @@ const Props = forwardRef(({ onParentChange }, ref) => {
               {item.value.type === 'ref' && (
                 <Form.Item noStyle>
                   <Button
+                    size="small"
                     type="link"
                     icon={getSelectBtnIcon(item.value)}
                     onClick={() => selectResource(['in_parameters', item.key], item.value)}
-                    className={styles['select-button']}
+                    className={styles['pipeline-drawer__ref-row__select-button']}
                   >
                     {item.value.label}
                   </Button>
@@ -420,7 +422,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
             </div>
           </Form.Item>
         ))}
-        <div className={styles.editPipelinePropsContent}>
+        <div className={styles['pipeline-drawer__title']}>
           <SubAreaTitle image="/assets/images/duty-message.png" title="输出参数"></SubAreaTitle>
         </div>
         {outParametersList.map((item) => (

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

@@ -1,4 +1,4 @@
-.editPipelineProps {
+.pipeline-drawer {
   :global {
     label {
       width: 100%;
@@ -8,29 +8,30 @@
       }
     }
   }
-}
 
-.editPipelinePropsContent {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 43px;
-  margin-bottom: 20px;
-  padding: 0 24px;
-  color: @text-color;
-  font-size: @font-size;
-  background: #f8fbff;
-}
-.ref-row {
-  display: flex;
-  align-items: center;
+  &__title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 43px;
+    margin-bottom: 20px;
+    padding: 0 24px;
+    color: @text-color;
+    font-size: @font-size;
+    background: #f8fbff;
+  }
+
+  &__ref-row {
+    display: flex;
+    align-items: center;
+  }
 
-  .select-button {
+  &__select-button {
     display: flex;
     flex: none;
     align-items: center;
     justify-content: flex-start;
-    width: 100px;
+    // width: 100px;
     margin-left: 10px;
     padding-right: 0;
     padding-left: 0;