'debug:调试代码编辑器'

platform/example/package.json

@@ -35,6 +35,7 @@
  "mobx": "^6.9.0",
  "mobx-react": "^7.6.0",
  "mobx-react-lite": "^3.4.3",
+ "monaco-editor": "^0.40.0",
  "qs": "^6.11.0",
  "react": "^16.14.0",
  "react-beautiful-dnd": "^13.0.0",
@@ -46,12 +47,14 @@
  "react-dom": "^16.14.0",
  "react-draft-wysiwyg": "^1.14.5",
  "react-loadable": "^5.5.0",
+ "react-monaco-editor": "^0.53.0",
  "react-router-dom": "^5.1.2",
  "react-scripts": "3.4.1",
  "react-transition-group": "^4.4.1",
  "redux-thunk": "^2.3.0",
  "tslib": "^2.6.0",
- "typescript": "~4.2.3"
+ "typescript": "~4.2.3",
+ "vite-plugin-monaco-editor": "^1.1.0"
  },
  "devDependencies": {
  "@types/lodash": "^4.14.195",

platform/example/src/component/step/http/Body.tsx

@@ -0,0 +1,47 @@
+import React, {ChangeEvent, Component} from "react";
+import {Input, InputNumber, Switch} from "antd";
+import style from "./Http.module.less"
+import MonacoEditor from 'react-monaco-editor';
+// 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"
+// import "monaco-editor/min/vs/language/css/cssWorker"
+class Body extends Component<HttpProps<BodyData>,HttpState<BodyData>>{
+ constructor(props:HttpProps<BodyData>) {
+ super(props);
+ this.state = {
+ options:Object.assign({},this.props.data)
+ }
+ }
+ editorDidMount(editor, monaco) {
+ console.log('editorDidMount', editor);
+ editor.focus();
+ }
+ onChange(newValue, e) {
+ console.log('onChange', newValue, e);
+ }
+ render() {
+ const options = {
+ selectOnLineNumbers: true,
+ language:"javascript",
+ theme:"vs-dark"
+ };
+ const code = this.state.options.code
+ return <div >
+ body
+ <div>
+ <MonacoEditor
+ width="800"
+ height="600"
+ language="javascript"
+ theme="vs-dark"
+ value={code}
+ options={options}
+ onChange={this.onChange}
+ editorDidMount={this.editorDidMount}
+ />
+ </div>
+ </div>;
+ }
+}
+export default Body

platform/example/src/component/step/http/Host.tsx

@@ -1,22 +1,50 @@
-import {Component} from "react";
+import {ChangeEvent, Component} from "react";
-import {Input} from "antd";
+import {Input, InputNumber} from "antd";
 import style from "./Http.module.less"
 
-class Host extends Component<any,any>{
+class Host extends Component<HttpProps<HostData>,HttpState<HostData>>{
+ constructor(props:HttpProps<HostData>) {
+ super(props);
+ this.state = {
+ options:Object.assign({},this.props.data)
+ }
+ }
+ domChange(e:ChangeEvent<HTMLInputElement>,key:string){
+ const value = e.target.value
+ const options = this.state.options
+ options[key] =value
+ this.setState({options:Object.assign({},{...this.state.options},options)})
+ this.change()
+ }
+ valueChange(value:string|number|boolean,key:string){
+ const options = this.state.options
+ options[key] =value
+ this.setState({options:Object.assign({},{...this.state.options},options)})
+ this.change()
+ }
+ change(){
+ this.props.onchange("options",this.state.options)
+ }
  render() {
  return <div>
  <div className={style.HttpFLex}>
  <span className={style.HttpLabel}>协议</span>
- <span className={style.HttpFLex1}><Input placeholder="" /></span>
+ <span className={style.HttpFLex1}><Input value={this.state.options.agreement} onChange={(e)=>this.domChange(e,"agreement")} placeholder="" /></span>
 
  </div>
  <div className={style.HttpFLex}>
  <span className={style.HttpLabel}>主机</span>
- <span className={style.HttpFLex1}><Input placeholder="" /></span>
+ <span className={style.HttpFLex1}><Input value={this.state.options.host} onChange={(e)=>this.domChange(e,"host")} placeholder="" /></span>
  </div>
  <div className={style.HttpFLex}>
  <span className={style.HttpLabel}>端口</span>
- <span className={style.HttpFLex1}><Input placeholder="" /></span>
+ <span className={style.HttpFLex1} style={{width:"100%"}}>
+ <InputNumber
+ style={{width:"100%"}}
+ value={this.state.options.port}
+ onChange={(e)=>this.valueChange(e,"port")} placeholder="" />
+
+ </span>
  </div>
 
  </div>;

platform/example/src/component/step/http/Options.tsx

@@ -10,14 +10,14 @@ const defaultData:OptionsData = {
 
 }
 
-class Options extends Component<HttpOptionsProps,any>{
+class Options extends Component<HttpProps<OptionsData>,HttpState<OptionsData>>{
- constructor(props:HttpOptionsProps) {
+ constructor(props:HttpProps<OptionsData>) {
  super(props);
  this.state = {
  options:Object.assign({},defaultData,this.props.data)
  }
  }
- domChange(e:ChangeEvent<HTMLInputElement>,key:string){
+ domChange(e:ChangeEvent<HTMLInputElement>,key:OptionsDataType){
  const value = e.target.value
  const options = this.state.options
  options[key] =value

platform/example/src/component/step/http/edit.tsx

@@ -11,6 +11,7 @@ import Extract from "@/component/step/http/Extract";
 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";
 
 interface State {
  data:HttpData
@@ -53,7 +54,7 @@ class HttpEditComponent extends Component<stepProps, State> {
  key: 'Host',
  label: `Host`,
  closable: false,
- children: <Host/>,
+ children: <Host data={this.state.data.host} onchange={this.onChange} />,
  },
  {
  key: 'Headers',
@@ -66,6 +67,11 @@ class HttpEditComponent extends Component<stepProps, State> {
  label: `Params`,
  closable: false,
  children: <Params/>,
+ },{
+ key: 'Body',
+ label: `Body`,
+ closable: false,
+ children: <Body data={this.state.data.body} onchange={this.onChange}/>,
  }, {
  key: 'Path',
  label: `Path`,
@@ -125,7 +131,7 @@ class HttpEditComponent extends Component<stepProps, State> {
  return (<div>
  {this.HttpMetod()}
  <div className={style.HttpTab}>
- <Tabs defaultActiveKey="Options" type="editable-card" items={this.items()} onChange={this.tabChange}/>
+ <Tabs defaultActiveKey="Body" type="editable-card" items={this.items()} onChange={this.tabChange}/>
  </div>
  </div>)
  }

platform/example/src/component/step/http/type.d.ts

@@ -12,9 +12,12 @@ interface HttpChilProps{
  data:allData
  onchange:(data:HttpMethod)=>void
 }
-interface HttpOptionsProps{
+interface HttpProps<T extends allData>{
- data:OptionsData
+ data:T
- onchange:(key:string,data:HttpMethod)=>void
+ onchange:(key:string,data:T)=>void
+}
+interface HttpState<T extends allData>{
+ options:T
 }
 
 interface HttpData {
@@ -26,11 +29,19 @@ interface HttpData {
  check:CheckData
  options:OptionsData
  extract:ExtractData
+ body:BodyData
  [key:string]:allData
 }
 interface HostData {
-
+ agreement:string
+ port:number
+ host:string
 }
+type HostDataType = keyof HostData
+interface BodyData {
+ code:string
+}
+type BodyDataType = keyof BodyData
 interface CheckData {
 
 }
@@ -46,13 +57,15 @@ interface BeforeRequestData {
 interface ResponseData {
 
 }
-interface OptionsData {
+
+type OptionsData = {
  code:string
  uploadType:string
  requestSwitch:boolean
  timeout:number
  redirect:boolean
 }
+type OptionsDataType = keyof OptionsData
 interface ExtractData {
 
 }

platform/example/vite.config.ts

@@ -6,6 +6,7 @@ import React from '@vitejs/plugin-react'
 import qiankun from "vite-plugin-qiankun"
 // @ts-ignore
 import path, {resolve} from 'path'
+import monacoEditorPlugin from "vite-plugin-monaco-editor"
 
 const pathResolve = (dir: string): any => {
  return resolve(__dirname, dir)
@@ -52,6 +53,9 @@ export default ({command}: ConfigEnv): UserConfigExport => {
  }
  },
  plugins: [
+ monacoEditorPlugin({
+ languageWorkers:["json","typescript","editorWorkerService"],
+ }),
  React({
  babel: {
  plugins: [