(shenyu-dashboard) branch master updated: Optimize the layout of RequestRuleHandle (#448)

[dengliming]

This is an automated email from the ASF dual-hosted git repository.

dengliming pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shenyu-dashboard.git


The following commit(s) were added to refs/heads/master by this push:
     new 3b337c64 Optimize the layout of RequestRuleHandle (#448)
3b337c64 is described below

commit 3b337c64b740e8238b26e6685c9eda02eff97770
Author: Kerwin Bryant <kerwin...@qq.com>
AuthorDate: Sun Apr 7 22:17:58 2024 +0800

    Optimize the layout of RequestRuleHandle (#448)
---
 .../Plugin/PluginRuleHandle/RequestRuleHandle.js   | 27 ++++++++++------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/routes/Plugin/PluginRuleHandle/RequestRuleHandle.js 
b/src/routes/Plugin/PluginRuleHandle/RequestRuleHandle.js
index c6f4fa7b..b0257e9c 100644
--- a/src/routes/Plugin/PluginRuleHandle/RequestRuleHandle.js
+++ b/src/routes/Plugin/PluginRuleHandle/RequestRuleHandle.js
@@ -412,24 +412,21 @@ export default class RequestRuleHandle extends Component {
     } = this.state;
     const { form } = this.props;
     const { getFieldDecorator } = form;
+    const rowStyle = { display: "flex", alignItems: "center" };
     return (
-      <div className={styles.handleWrap} style={{ padding: "0px 40px" }}>
-        <div className={styles.header}>
-          <h3 style={{ width: 60, marginTop: 10 }}>
-            {getIntlContent("SHENYU.COMMON.DEAL")}:{" "}
-          </h3>
-        </div>
-        <Tabs
-          style={{ marginLeft: 10 }}
-          defaultActiveKey={currentType}
-          onChange={this.handleTabChange}
-        >
+      <FormItem
+        label={getIntlContent("SHENYU.COMMON.DEAL")}
+        labelCol={{ span: 3 }}
+        wrapperCol={{ span: 21 }}
+        className={styles.rootFormItem}
+      >
+        <Tabs defaultActiveKey={currentType} onChange={this.handleTabChange}>
           <TabPane tab="Params" key="parameter">
             {parameterList &&
               parameterList.length > 0 &&
               parameterList.map((row, rowIndex) => {
                 return (
-                  <Row gutter={24} key={rowIndex}>
+                  <Row gutter={24} key={rowIndex} style={rowStyle}>
                     {row.map((field, i) => {
                       let rules = [];
                       let placeholder = field.fieldLabel;
@@ -509,7 +506,7 @@ export default class RequestRuleHandle extends Component {
               headerList.length > 0 &&
               headerList.map((row, rowIndex) => {
                 return (
-                  <Row gutter={24} key={rowIndex}>
+                  <Row gutter={24} key={rowIndex} style={rowStyle}>
                     {row.map((field, i) => {
                       let rules = [];
                       let placeholder = field.fieldLabel;
@@ -589,7 +586,7 @@ export default class RequestRuleHandle extends Component {
               cookieList.length > 0 &&
               cookieList.map((row, rowIndex) => {
                 return (
-                  <Row gutter={24} key={rowIndex}>
+                  <Row gutter={24} key={rowIndex} style={rowStyle}>
                     {row.map((field, i) => {
                       let rules = [];
                       let placeholder = field.fieldLabel;
@@ -665,7 +662,7 @@ export default class RequestRuleHandle extends Component {
               })}
           </TabPane>
         </Tabs>
-      </div>
+      </FormItem>
     );
   }
 }