From 3bc6385bfbf3ddd9701850cf709748e09efd5f9d Mon Sep 17 00:00:00 2001
From: tiantang <yiniantt@qq.com>
Date: Sun, 2 Jul 2023 23:13:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0http=20options?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 platform/example/src/App.css                  |  9 ++-
 .../src/component/step/http/Http.module.less  | 16 +++++
 .../src/component/step/http/Options.tsx       | 68 +++++++++++++++++--
 .../example/src/component/step/http/edit.tsx  |  3 +-
 .../example/src/component/step/http/type.d.ts | 12 +++-
 5 files changed, 96 insertions(+), 12 deletions(-)

diff --git a/platform/example/src/App.css b/platform/example/src/App.css
index cda1c70..afafd28 100644
--- a/platform/example/src/App.css
+++ b/platform/example/src/App.css
@@ -1,5 +1,4 @@
-.box{
-    height: 50px;
-    width: 50px;
-    overflow: hidden;
-}
+*{
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/platform/example/src/component/step/http/Http.module.less b/platform/example/src/component/step/http/Http.module.less
index c2dcfbc..19e64fa 100644
--- a/platform/example/src/component/step/http/Http.module.less
+++ b/platform/example/src/component/step/http/Http.module.less
@@ -20,4 +20,20 @@
 }
 .HttpTab{
   margin-top: 10px;
+}
+.HttpContentFlex{
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.HttpTitle{
+  font-size: 17px;
+  font-weight: 600;
+}
+.HttpOptionFlex{
+  width: 100%;
+  padding: 0 15px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
 }
\ No newline at end of file
diff --git a/platform/example/src/component/step/http/Options.tsx b/platform/example/src/component/step/http/Options.tsx
index d64e380..ad0428f 100644
--- a/platform/example/src/component/step/http/Options.tsx
+++ b/platform/example/src/component/step/http/Options.tsx
@@ -1,10 +1,70 @@
 import {Component} from "react";
+import {Input, InputNumber, Switch} from "antd";
+import style from "./Http.module.less"
+const defaultData:OptionsData = {
+    code: "UTF-8",
+    redirect: false,
+    requestSwitch: true,
+    timeout: 5000,
+    uploadType: "HttpClient4"
+
+}
+
+class Options extends Component<HttpOptionsProps,any>{
+    constructor(props:HttpOptionsProps) {
+        super(props);
+        this.state = {
+            options:Object.assign({},defaultData,this.props.data)
+        }
+    }
 
-class Options extends Component<any,any>{
     render() {
-        return <div>
-
-                Options
+        return <div className={style.HttpContentFlex}>
+                <div className={style.HttpOptionFlex}>
+                    <div>
+                        <div className={style.HttpTitle}>内容编码</div>
+                        <p>通常用于在发送请求时对指定内容的字符集，以防止请求出现乱码或服务器无法正确处理请求</p>
+                    </div>
+                    <div>
+                        <Input value={this.state.options.code} defaultValue="UTF-8" />
+                    </div>
+                </div>
+            <div className={style.HttpOptionFlex}>
+                <div>
+                    <div className={style.HttpTitle}>上传类型</div>
+                    <p>所上传文件的文件类型</p>
+                </div>
+                <div>
+                    <Input value={this.state.options.code} defaultValue="UTF-8" />
+                </div>
+            </div>
+            <div className={style.HttpOptionFlex}>
+                <div>
+                    <div className={style.HttpTitle}>请求开关</div>
+                    <p>对POST使用multipart/from-data</p>
+                </div>
+                <div>
+                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked checked={this.state.options.requestSwitch} />
+                </div>
+            </div>
+            <div className={style.HttpOptionFlex}>
+                <div>
+                    <div className={style.HttpTitle}>超时时间</div>
+                    <p>所上传文件的文件类型</p>
+                </div>
+                <div>
+                    <InputNumber  addonAfter="ms" defaultValue={5000} value={this.state.options.timeout} />
+                </div>
+            </div>
+            <div className={style.HttpOptionFlex}>
+                <div>
+                    <div className={style.HttpTitle}>跟随重定向</div>
+                    <p>跟随重定向，会详细记录重定向的过程，可以卡电脑多个重定向的请求</p>
+                </div>
+                <div>
+                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked checked={this.state.options.redirect} />
+                </div>
+            </div>
             </div>;
     }
 }
diff --git a/platform/example/src/component/step/http/edit.tsx b/platform/example/src/component/step/http/edit.tsx
index 3bc2be8..4fa1a6f 100644
--- a/platform/example/src/component/step/http/edit.tsx
+++ b/platform/example/src/component/step/http/edit.tsx
@@ -77,8 +77,9 @@ const defaultMetod = ["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"].map(
 class HttpEditComponent extends Component<stepProps, any> {
     constructor(props: stepProps) {
         super(props);
+        const content = props.data.content||"{}"
         this.state = {
-            data:JSON.parse(props.data.content)
+            data:JSON.parse(content)
         }
     }
     updateData(){
diff --git a/platform/example/src/component/step/http/type.d.ts b/platform/example/src/component/step/http/type.d.ts
index 6dffc6a..34d8293 100644
--- a/platform/example/src/component/step/http/type.d.ts
+++ b/platform/example/src/component/step/http/type.d.ts
@@ -9,9 +9,13 @@ interface HttpMethod{
     data:allData
 }
 interface HttpChilProps{
+    data:allData
+    onchange:(data:HttpMethod)=>void
+}
+interface HttpOptionsProps{
+    data:OptionsData
     onchange:(data:HttpMethod)=>void
 }
-
 
 interface HttpData {
     host:HostData
@@ -42,7 +46,11 @@ interface ResponseData {
 
 }
 interface OptionsData {
-
+    code:string
+    uploadType:string
+    requestSwitch:boolean
+    timeout:number
+    redirect:boolean
 }
 interface ExtractData {