From 90180fc913ee8c02ff9e374db7d3029bd4f31d3e Mon Sep 17 00:00:00 2001
From: tiantang <yiniantt@qq.com>
Date: Tue, 11 Jul 2023 23:07:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:http=E5=8F=82=E6=95=B0=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 platform/example/src/App.tsx                  | 79 ++++++++++++++++++-
 .../example/src/component/step/http/Body.tsx  | 12 ++-
 .../example/src/component/step/http/Check.tsx | 59 +++++++-------
 .../src/component/step/http/Extract.tsx       | 40 ++++++----
 .../src/component/step/http/Headers.tsx       | 13 ++-
 .../example/src/component/step/http/Host.tsx  |  2 +
 .../src/component/step/http/Options.tsx       |  4 +-
 .../src/component/step/http/Params.tsx        | 52 ++++++------
 .../example/src/component/step/http/edit.tsx  | 32 +++++---
 .../example/src/component/step/http/type.d.ts | 29 +++++--
 platform/example/src/component/step/type.d.ts |  5 +-
 11 files changed, 233 insertions(+), 94 deletions(-)

diff --git a/platform/example/src/App.tsx b/platform/example/src/App.tsx
index 409fd30..9253adc 100644
--- a/platform/example/src/App.tsx
+++ b/platform/example/src/App.tsx
@@ -21,9 +21,82 @@ const TmpDndList: StepDragType<Content>[] = [
     }
 })
 const dndList = [
-    {id: 1, label: "组件1", value: "组件1",},
-    {id: 2, label: "组件2", value: "组件2"},
-    {id: 3, label: "组件3", value: "组件3"},
+    {id: 1,
+        label: "组件1",
+        value: "组件1",
+        header:[],
+        params:[],
+        extract:[],
+        body:{
+            code:"string",
+            contentype:"string"
+        },
+        host:{
+            agreement:"string",
+            port:111,
+            host:"string"
+        },
+        url:{
+            path:"",
+            method:"GET"
+        },
+        options:{
+            code:"string",
+            uploadType:"string",
+            requestSwitch:true,
+            timeout:5000,
+            redirect:true
+        }
+    },
+    {id: 2,
+        label: "组件2",
+        value: "组件2",
+        header:[],
+        body:{
+            code:"string",
+            contentype:"string"
+        },
+        host:{
+            agreement:"string",
+            port:111,
+            host:"string"
+        },
+        url:{
+            path:"",
+            method:"GET"
+        },
+        options:{
+            code:"string",
+            uploadType:"string",
+            requestSwitch:true,
+            timeout:5000,
+            redirect:true
+        }},
+    {id: 3,
+        label: "组件3",
+        value: "组件3",
+        header:[],
+        body:{
+            code:"string",
+            contentype:"string"
+        },
+        host:{
+            agreement:"string",
+            port:111,
+            host:"string"
+        },
+        url:{
+            path:"",
+            method:"GET"
+        },
+        options:{
+            code:"string",
+            uploadType:"string",
+            requestSwitch:true,
+            timeout:5000,
+            redirect:true
+        }
+    },
 ].map((item: any, index) => {
     let content: Content = {...item}
     content.label = content.label += Math.random()
diff --git a/platform/example/src/component/step/http/Body.tsx b/platform/example/src/component/step/http/Body.tsx
index 9d3d8fb..731b6f5 100644
--- a/platform/example/src/component/step/http/Body.tsx
+++ b/platform/example/src/component/step/http/Body.tsx
@@ -2,6 +2,7 @@ import React, {ChangeEvent, Component} from "react";
 import {Input, InputNumber, Select, Switch} from "antd";
 import style from "./Http.module.less"
 import MonacoEditor from 'react-monaco-editor';
+import {BodyData, HttpProps, HttpState} from "@/component/step/http/type";
 // import "monaco-editor/min/vs/editor/editor.main.css"
 // import scheme from  "monaco-editor/min/vs/basic-languages/scheme/scheme"
 // import js from  "monaco-editor/min/vs/basic-languages/javascript/javascript"
@@ -502,11 +503,16 @@ class Body extends Component<HttpProps<BodyData>,HttpState<BodyData>>{
         }
     }
     editorDidMount(editor, monaco) {
-        console.log('editorDidMount', editor);
         editor.focus();
     }
+    dataChange(){
+        this.props.onchange("body",this.state.options)
+    }
     onChange(newValue, e) {
-        console.log('onChange', newValue, e);
+        const state = this.state
+        state.options.code = newValue
+        this.setState(state);
+        this.dataChange()
     }
      handleChange (value:string){
         console.log(value)
@@ -538,7 +544,7 @@ class Body extends Component<HttpProps<BodyData>,HttpState<BodyData>>{
                     theme="vs-dark"
                     value={code}
                     options={options}
-                    onChange={this.onChange}
+                    onChange={(newValue, e)=>this.onChange(newValue, e)}
                     editorDidMount={this.editorDidMount}
                 />
             </div>
diff --git a/platform/example/src/component/step/http/Check.tsx b/platform/example/src/component/step/http/Check.tsx
index 1c3fe2d..9850952 100644
--- a/platform/example/src/component/step/http/Check.tsx
+++ b/platform/example/src/component/step/http/Check.tsx
@@ -3,6 +3,7 @@ import {Dropdown, Form, Input, InputRef, LabeledValue, MenuProps, Select, Space,
 import {FormInstance} from "antd/es/form";
 import style from "@/component/step/http/Http.module.less";
 import {PlusOutlined} from "@ant-design/icons";
+import {CheckData, CheckDataType, HeaderData, HttpProps} from "@/component/step/http/type";
 
 type EditableTableProps = Parameters<typeof Table>[0];
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
@@ -12,24 +13,19 @@ interface EditableRowProps {
     index: number;
 }
 
-type HandleSave = (record: DataType) => void;
+type HandleSave = (record: CheckDataType) => void;
 
 interface EditableCellProps {
     title: React.ReactNode;
     editable: boolean;
     children: React.ReactNode;
-    dataIndex: keyof DataType;
-    record: DataType;
+    dataIndex: keyof CheckDataType;
+    record: CheckDataType;
     handleSave: HandleSave
 
 }
 
-interface DataType {
-    key: number
-    obj: React.Key
-    condition: CheckEnum
-    check: string
-}
+
 
 enum SelectAddEnum {
     ADD,
@@ -132,7 +128,6 @@ const EditableCell: React.FC<EditableCellProps> = ({
             </div>
         );
     }
-    console.log(children)
     return <td {...restProps}>{childNode}</td>;
 };
 
@@ -150,22 +145,26 @@ const addSelectItem: MenuProps['items'] = [
         ),
     }
 ]
-
-const Check = () => {
-    const [dataSource, setDataSource] = useState<DataType[]>([
-        {
-            key: 0,
-            condition: CheckEnum.lessEqual,
-            check: '',
-            obj: '',
-        },
-    ]);
+const defaultData = [
+    {
+        key: 0,
+        condition: CheckEnum.lessEqual,
+        check: '',
+        obj: '',
+    },
+]
+const Check = (props:HttpProps<CheckDataType[]>) => {
+    const data = props?.data||defaultData
+    const [dataSource, setDataSource] = useState<CheckDataType[]>(data);
 
     const [count, setCount] = useState(1);
-
+    const dataChange = ()=>{
+        props.onchange("header",dataSource)
+    }
     const handleDelete = (key: React.Key) => {
         const newData = dataSource.filter((item) => item.key !== key);
         setDataSource(newData);
+        dataChange()
     };
     // 用户操作
     const TitleSelectClick: MenuProps['onClick'] = ({key}) => {
@@ -180,16 +179,14 @@ const Check = () => {
             default:
                 break
         }
-        console.log(key)
     }
     const funcChange = (key: number, value: number) => {
-        console.log(key, value)
         const data = dataSource[Number(key)]
-        console.log(data)
         data.condition = Number(value)
         handleSave(data)
+        dataChange()
     }
-    const paramsRender = (type: CheckEnum, value: DataType, handleSave: HandleSave) => {
+    const paramsRender = (type: CheckEnum, value: CheckDataType, handleSave: HandleSave) => {
         return <div>123123</div>
     }
     const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
@@ -203,7 +200,7 @@ const Check = () => {
             title: '检查条件',
             dataIndex: 'condition',
             width: "200px",
-            render: (_, record:DataType) => {
+            render: (_, record:CheckDataType) => {
                 return (<div>
                     <Select
                         defaultValue={String(CheckEnum.absent)}
@@ -239,7 +236,7 @@ const Check = () => {
 
             },
             dataIndex: 'index',
-            render: (_, record: DataType) =>
+            render: (_, record: CheckDataType) =>
                 dataSource.length >= 1 ? (
                     <span className={style.HttpHandleAdd} onClick={() => handleDelete(record.key)}>删除</span>
                 ) : null,
@@ -247,7 +244,7 @@ const Check = () => {
     ];
 
     const handleAdd = () => {
-        const newData: DataType = {
+        const newData: CheckDataType = {
             key: count,
             obj: '0',
             condition: CheckEnum.absent,
@@ -255,9 +252,10 @@ const Check = () => {
         };
         setDataSource([...dataSource, newData]);
         setCount(count + 1);
+        dataChange()
     };
 
-    const handleSave = (row: DataType) => {
+    const handleSave = (row: CheckDataType) => {
         const newData = [...dataSource];
         const index = newData.findIndex((item) => row.key === item.key);
         const item = newData[index];
@@ -266,6 +264,7 @@ const Check = () => {
             ...row,
         });
         setDataSource(newData);
+        dataChange()
     };
 
     const components = {
@@ -281,7 +280,7 @@ const Check = () => {
         }
         return {
             ...col,
-            onCell: (record: DataType) => ({
+            onCell: (record: CheckDataType) => ({
                 record,
                 editable: col.editable,
                 dataIndex: col.dataIndex,
diff --git a/platform/example/src/component/step/http/Extract.tsx b/platform/example/src/component/step/http/Extract.tsx
index dfc659c..203a282 100644
--- a/platform/example/src/component/step/http/Extract.tsx
+++ b/platform/example/src/component/step/http/Extract.tsx
@@ -4,6 +4,7 @@ import type {LabeledValue} from 'antd';
 import {Dropdown, Form, Input, InputRef, MenuProps, Select, Space, Table} from "antd";
 import {PlusOutlined} from "@ant-design/icons";
 import {FormInstance} from "antd/es/form";
+import {ExtractData, HeaderData, HttpProps} from "@/component/step/http/type";
 
 type EditableTableProps = Parameters<typeof Table>[0];
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
@@ -144,28 +145,33 @@ const addSelectItem: MenuProps['items'] = [
         ),
     }
 ]
-
-const Extract = () =>{
-    const [dataSource, setDataSource] = useState<DataType[]>([
-        {
-            key:0,
-            var: '0',
-            func: FuncEnum.JSON,
-            handle:{
-                data:"",
-                expression:"",
-                mate:"",
-            },
-            params: '',
+const defaultData:DataType[] = [
+    {
+        key:0,
+        var: '0',
+        func: FuncEnum.JSON,
+        handle:{
+            data:"",
+            expression:"",
+            mate:"",
         },
-    ]);
+        params: '',
+    },
+]
+const Extract = (props:HttpProps<DataType[]>) =>{
+    const data = props?.data||defaultData
+    const [dataSource, setDataSource] = useState<DataType[]>(data);
 
     const [count, setCount] = useState(2);
 
     const handleDelete = (key: React.Key) => {
         const newData = dataSource.filter((item) => item.key !== key);
         setDataSource(newData);
+        ExtractdataChange()
     };
+    const ExtractdataChange = ()=>{
+        props.onchange("extract",dataSource)
+    }
     // 用户操作
     const TitleSelectClick: MenuProps['onClick'] = ({key}) => {
         const SelectKey = Number(key)
@@ -186,19 +192,23 @@ const Extract = () =>{
         const data = dataSource[Number(key)]
         data.func = Number(value)
         handleSave(data)
+        ExtractdataChange()
     }
     const paramsRender=(type:FuncEnum,value:DataType,handleSave:HandleSave) =>{
         const dataChange = (data:ChangeEvent<HTMLInputElement>)=>{
             value.handle.data = data.target.value
             handleSave(value)
+            ExtractdataChange()
         }
         const expressionChange = (data:ChangeEvent<HTMLInputElement>)=>{
             value.handle.expression = data.target.value
             handleSave(value)
+            ExtractdataChange()
         }
         const mateChange = (data:ChangeEvent<HTMLInputElement>)=>{
             value.handle.mate = data.target.value
             handleSave(value)
+            ExtractdataChange()
         }
         switch (Number(type)) {
             case FuncEnum.ALL:
@@ -314,6 +324,7 @@ const Extract = () =>{
         };
         setDataSource([...dataSource, newData]);
         setCount(count + 1);
+        ExtractdataChange()
     };
 
     const handleSave = (row: DataType) => {
@@ -325,6 +336,7 @@ const Extract = () =>{
             ...row,
         });
         setDataSource(newData);
+        ExtractdataChange
     };
 
     const components = {
diff --git a/platform/example/src/component/step/http/Headers.tsx b/platform/example/src/component/step/http/Headers.tsx
index a34f787..329255e 100644
--- a/platform/example/src/component/step/http/Headers.tsx
+++ b/platform/example/src/component/step/http/Headers.tsx
@@ -130,8 +130,9 @@ const addSelectItem: MenuProps['items'] = [
 
 
 
-const Headers = (props:HttpProps<HeaderData>) => {
-    const [dataSource, setDataSource] = useState<HeaderDataType[]>(props.data.data);
+const Headers = (props:HttpProps<HeaderDataType[]>) => {
+    const data = props?.data||[]
+    const [dataSource, setDataSource] = useState<HeaderDataType[]>(data);
 
     const [count, setCount] = useState(2);
     const [isModalOpen, setIsModalOpen] = useState(false);
@@ -190,16 +191,19 @@ const Headers = (props:HttpProps<HeaderData>) => {
         setIsModalOpen(false);
         setParamsImport("")
         setQueryString("")
+        dataChange()
     };
 
     const handleCancel = () => {
         setIsModalOpen(false);
         setParamsImport("")
         setQueryString("")
+        dataChange()
     };
     const handleDelete = (key: React.Key) => {
         const newData = dataSource.filter((item) => item.key !== key);
         setDataSource(newData);
+        dataChange()
     };
     // 用户操作
     const TitleSelectClick: MenuProps['onClick'] = ({key}) => {
@@ -263,6 +267,7 @@ const Headers = (props:HttpProps<HeaderData>) => {
         };
         setDataSource([...dataSource, newData]);
         setCount(count + 1);
+        dataChange()
     };
     // 保存
     const handleSave = (row: HeaderDataType) => {
@@ -274,6 +279,7 @@ const Headers = (props:HttpProps<HeaderData>) => {
             ...row,
         });
         setDataSource(newData);
+        dataChange()
     };
 
     const components = {
@@ -334,6 +340,9 @@ logactid=1234567890&showTab=10000&opType=showpv&mod=superman%3Alib&submod=index&
             </div>,
         },
     ];
+    const dataChange = ()=>{
+        props.onchange("header",dataSource)
+    }
     const onImportChange = (key: string) => {
         console.log(key)
     }
diff --git a/platform/example/src/component/step/http/Host.tsx b/platform/example/src/component/step/http/Host.tsx
index a9694b6..3dbc733 100644
--- a/platform/example/src/component/step/http/Host.tsx
+++ b/platform/example/src/component/step/http/Host.tsx
@@ -1,6 +1,7 @@
 import {ChangeEvent, Component} from "react";
 import {Input, InputNumber} from "antd";
 import style from "./Http.module.less"
+import {HostData, HttpProps, HttpState} from "@/component/step/http/type";
 
 class Host extends Component<HttpProps<HostData>,HttpState<HostData>>{
     constructor(props:HttpProps<HostData>) {
@@ -8,6 +9,7 @@ class Host extends Component<HttpProps<HostData>,HttpState<HostData>>{
         this.state = {
             options:Object.assign({},this.props.data)
         }
+        console.log(this.state.options)
     }
     domChange(e:ChangeEvent<HTMLInputElement>,key:string){
         const value = e.target.value
diff --git a/platform/example/src/component/step/http/Options.tsx b/platform/example/src/component/step/http/Options.tsx
index 2dd1381..2d5164d 100644
--- a/platform/example/src/component/step/http/Options.tsx
+++ b/platform/example/src/component/step/http/Options.tsx
@@ -1,6 +1,7 @@
 import {ChangeEvent, Component} from "react";
 import {Input, InputNumber, Switch} from "antd";
 import style from "./Http.module.less"
+import {HttpProps, HttpState, OptionsData, OptionsDataType} from "./type";
 const defaultData:OptionsData = {
     code: "UTF-8",
     redirect: false,
@@ -17,6 +18,7 @@ class Options extends Component<HttpProps<OptionsData>,HttpState<OptionsData>>{
             options:Object.assign({},defaultData,this.props.data)
         }
     }
+
     domChange(e:ChangeEvent<HTMLInputElement>,key:OptionsDataType){
         const value = e.target.value
         const options = this.state.options
@@ -77,7 +79,7 @@ class Options extends Component<HttpProps<OptionsData>,HttpState<OptionsData>>{
                     <p>跟随重定向，会详细记录重定向的过程，可以卡电脑多个重定向的请求</p>
                 </div>
                 <div>
-                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked checked={this.state.options.redirect} />
+                    <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(e)=>this.valueChange(e,"redirect")} defaultChecked checked={this.state.options.redirect} />
                 </div>
             </div>
             </div>;
diff --git a/platform/example/src/component/step/http/Params.tsx b/platform/example/src/component/step/http/Params.tsx
index 5adc69f..4c704aa 100644
--- a/platform/example/src/component/step/http/Params.tsx
+++ b/platform/example/src/component/step/http/Params.tsx
@@ -5,6 +5,7 @@ import type {FormInstance} from 'antd/es/form';
 import style from "./Http.module.less"
 import {DownOutlined, PlusOutlined} from "@ant-design/icons";
 import TextArea from "antd/es/input/TextArea";
+import {HeaderData, HttpProps, ParamsData, ParamsDataType, ParamsDict} from "@/component/step/http/type";
 
 const EditableContext = React.createContext<FormInstance<any> | null>(null);
 
@@ -22,11 +23,7 @@ interface EditableRowProps {
 
 type EditableTableProps = Parameters<typeof Table>[0];
 
-interface DataType {
-    key: React.Key;
-    name: string;
-    value: string;
-}
+
 
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
 
@@ -129,19 +126,21 @@ const addSelectItem: MenuProps['items'] = [
         ),
     }
 ]
-const Params: React.FC = () => {
-    const [dataSource, setDataSource] = useState<DataType[]>([
-        {
-            key: '0',
-            name: '',
-            value: '',
-        },
-        {
-            key: '1',
-            name: '',
-            value: '',
-        },
-    ]);
+const defaultData = [
+    {
+        key: '0',
+        name: '',
+        value: '',
+    },
+    {
+        key: '1',
+        name: '',
+        value: '',
+    },
+]
+const Params = (props:HttpProps<ParamsDataType[]>) => {
+    const data = props?.data||defaultData
+    const [dataSource, setDataSource] = useState<ParamsDataType[]>(data);
 
     const [count, setCount] = useState(2);
     // 弹框 params
@@ -152,6 +151,7 @@ const Params: React.FC = () => {
     const handleDelete = (key: React.Key) => {
         const newData = dataSource.filter((item) => item.key !== key);
         setDataSource(newData);
+        dataChange()
     };
     // 用户操作
     const TitleSelectClick: MenuProps['onClick'] = ({key}) => {
@@ -207,18 +207,19 @@ const Params: React.FC = () => {
     ];
 
     const handleAdd = () => {
-        const newData: DataType = {
+        const newData: ParamsDataType = {
             key: count,
             name: ``,
             value: ``,
         };
         setDataSource([...dataSource, newData]);
         setCount(count + 1);
+        dataChange()
     };
     const showModal = () => {
         setIsModalOpen(true);
     };
-    const handleSave = (row: DataType) => {
+    const handleSave = (row: ParamsDataType) => {
         const newData = [...dataSource];
         const index = newData.findIndex((item) => row.key === item.key);
         const item = newData[index];
@@ -227,6 +228,7 @@ const Params: React.FC = () => {
             ...row,
         });
         setDataSource(newData);
+        dataChange()
     };
 
     const components = {
@@ -242,7 +244,7 @@ const Params: React.FC = () => {
         }
         return {
             ...col,
-            onCell: (record: DataType) => ({
+            onCell: (record: ParamsDataType) => ({
                 record,
                 editable: col.editable,
                 dataIndex: col.dataIndex,
@@ -256,8 +258,6 @@ const Params: React.FC = () => {
         const QueryDict:ParamsDict = {}
         const paramsDict:ParamsDict = {}
         const QueryValue = QueryString.split("&")
-        console.log(QueryString)
-        console.log(paramsImport)
         const paramsValue = paramsImport.split("\n")
         let key = Number(dataSource[dataSource.length - 1].key)
         paramsValue.forEach(params => {
@@ -299,12 +299,16 @@ const Params: React.FC = () => {
         setIsModalOpen(false);
         setParamsImport("")
         setQueryString("")
+        dataChange()
     };
-
+    const dataChange = ()=>{
+        props.onchange("params",dataSource)
+    }
     const handleCancel = () => {
         setIsModalOpen(false);
         setParamsImport("")
         setQueryString("")
+        dataChange()
     };
     const importplaceholder = `请粘贴如下格式信息
 Accept:*/*
diff --git a/platform/example/src/component/step/http/edit.tsx b/platform/example/src/component/step/http/edit.tsx
index a9b1b2b..db05629 100644
--- a/platform/example/src/component/step/http/edit.tsx
+++ b/platform/example/src/component/step/http/edit.tsx
@@ -1,4 +1,4 @@
-import React, {Component} from "react";
+import React, {ChangeEvent, Component} from "react";
 import {Input, Select, Space, Tabs, TabsProps} from "antd";
 import Heads from "./Headers"
 import Host from "./Host"
@@ -12,6 +12,7 @@ import Options from "@/component/step/http/Options";
 import style from "@/component/step/http/Http.module.less";
 import {stepProps} from "@/component/step/type";
 import Body from "./Body";
+import {allData, HttpData, OptionsDataType} from "@/component/step/http/type";
 
 interface State {
     data:HttpData
@@ -27,18 +28,23 @@ const defaultMetod = ["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"].map(
 class HttpEditComponent extends Component<stepProps, State> {
     constructor(props: stepProps) {
         super(props);
-        const content = props.data.content||"{}"
+        const content = props.data
+        console.log(props.data)
         this.state = {
-            data:JSON.parse(content)
+            data:content
         }
+        console.log(this.state.data)
     }
     updateData(){
         this.props.updateData(JSON.stringify(this.state.data))
     }
     handleChange(value:string){
         console.log(value)
+        const state = this.state
+        state.data.url.method = value
+        this.setState(state)
     }
-    onChange = (key:string,data: allData) => {
+    onChange = (key:keyof HttpData,data: allData) => {
         console.log(key,data);
         const state = this.state.data
         state[key] = data
@@ -47,7 +53,6 @@ class HttpEditComponent extends Component<stepProps, State> {
         console.log(this.state.data)
     };
 
-
     items = (): TabsProps['items'] =>{
         return [
             {
@@ -66,7 +71,7 @@ class HttpEditComponent extends Component<stepProps, State> {
                 key: 'Params',
                 label: `Params`,
                 closable: false,
-                children: <Params/>,
+                children: <Params data={this.state.data.params} onchange={this.onChange}/>,
             },{
                 key: 'Body',
                 label: `Body`,
@@ -76,7 +81,7 @@ class HttpEditComponent extends Component<stepProps, State> {
                 key: 'Path',
                 label: `Path`,
                 closable: false,
-                children: <Path/>,
+                children: <Path data={this.state.data.path} onchange={this.onChange}/>,
             }, {
                 key: 'BeforeRequest',
                 label: `请求预处理`,
@@ -91,12 +96,12 @@ class HttpEditComponent extends Component<stepProps, State> {
                 key: 'Check',
                 label: `校验`,
                 closable: false,
-                children: <Check/>,
+                children: <Check data={this.state.data.check} onchange={this.onChange}/>,
             }, {
                 key: 'Extract',
                 label: `提取`,
                 closable: false,
-                children: <Extract/>,
+                children: <Extract data={this.state.data.extract} onchange={this.onChange}/>,
             }, {
                 key: 'Options',
                 label: `选项`,
@@ -108,6 +113,12 @@ class HttpEditComponent extends Component<stepProps, State> {
     tabChange = (key:string) =>{
         console.log(key)
     }
+    domChange(e:ChangeEvent<HTMLInputElement>,key:OptionsDataType){
+        const value = e.target.value
+        const state = this.state
+        state.data.url.path = value
+        this.setState(state)
+    }
     HttpMetod(){
          return (
              <div>
@@ -116,13 +127,14 @@ class HttpEditComponent extends Component<stepProps, State> {
                      <Space wrap>
                          <Select
                              defaultValue="GET"
+                             value={this.state.data.url.method}
                              style={{ width: 120 }}
                              onChange={this.handleChange}
                              options={defaultMetod}
                          />
                      </Space>
                      <span className={style.HttpLabel}>路径</span>
-                     <span className={style.HttpFLex1}><Input placeholder="" /></span>
+                     <span className={style.HttpFLex1}><Input onChange={(e)=>this.domChange(e,"code")} value={this.state.data.url.path} placeholder="" /></span>
                  </div>
              </div>
          )
diff --git a/platform/example/src/component/step/http/type.d.ts b/platform/example/src/component/step/http/type.d.ts
index 0ef8032..2530d05 100644
--- a/platform/example/src/component/step/http/type.d.ts
+++ b/platform/example/src/component/step/http/type.d.ts
@@ -34,8 +34,15 @@ interface HttpData {
     options:OptionsData
     extract:ExtractData
     body:BodyData
-    [key:string]:allData
+    path:PathData
+    url:UrlData
+    // [key:string]:allData
 }
+interface UrlData {
+    method:string
+    path:string
+}
+
 interface HostData {
     agreement:string
     port:number
@@ -48,7 +55,7 @@ type BodyData ={
 }
 type BodyDataType = keyof  BodyData
 interface CheckData {
-
+    data:CheckDataType[]
 }
 interface HeaderDataType {
     key: React.Key;
@@ -58,14 +65,20 @@ interface HeaderDataType {
 interface HeaderData {
     data:HeaderDataType[]
 }
-interface ParamsData {
-
+interface ParamsDataType{
+    key: React.Key;
+    name: string;
+    value: string;
 }
+type ParamsData = ParamsDataType[]
 interface BeforeRequestData {
 
 }
 interface ResponseData {
 
+}
+interface PathData {
+
 }
 
 type OptionsData = {
@@ -76,8 +89,14 @@ type OptionsData = {
     redirect:boolean
 }
 type OptionsDataType = keyof OptionsData
+interface CheckDataType {
+    key: number
+    obj: React.Key
+    condition: CheckEnum
+    check: string
+}
 interface ExtractData {
-
+    data:DataType[]
 }
 
 interface childrenProps {
diff --git a/platform/example/src/component/step/type.d.ts b/platform/example/src/component/step/type.d.ts
index d516dad..3a89e8e 100644
--- a/platform/example/src/component/step/type.d.ts
+++ b/platform/example/src/component/step/type.d.ts
@@ -1,8 +1,9 @@
-import {Content} from "@/component/type";
+import {Content, StepDragType} from "@/component/type";
+import {HttpData} from "@/component/step/http/type";
 
 export interface stepProps {
     updateData:(data:string)=>void
-    data:Content
+    data:HttpData
 }
 export interface stepState {
     data:string