fix:解决组件循环依赖

platform/example/src/component/AddStep.tsx

@@ -1,15 +1,17 @@
 import {Dropdown, MenuProps, Space} from "antd";
 import style from "@/component/layout/css/header.module.less";
 import {DownOutlined} from "@ant-design/icons";
-import {menus, stepList, stepMap} from "@/component/step";
+import {stepMap} from "@/component/step";
 import drapStore from "@/mobx/DrapStore";
+import Menus from "@/component/step/menus";
 
-console.log(stepList)
+// console.log(stepList)
-const items: MenuProps['items'] = [...menus];
+const items: MenuProps['items'] = [...Menus];
 
 const onClick: MenuProps['onClick'] = ({ key }) => {
  // 给容器添加组件
  // message.info(`Click on item ${key}`);
+ console.log(stepMap)
  const component = stepMap[key];
  console.log(key,component)
  drapStore.addChildren(null,component.defaultDataFunc())

platform/example/src/component/CardItem.tsx

@@ -7,6 +7,7 @@ import {stepMap} from "@/component/step";
 import lodash from "lodash"
 // import AddStep from "./AddStep";
 import {DownOutlined} from "@ant-design/icons";
+import AddStep from "@/component/AddStep";
 let id = 0
 export const getDropStoreId = (type?:string) =>{
  const DropStore = {
@@ -174,19 +175,20 @@ const CardItem = memo((props:CardItemProps) => {
  }),
  }),[data])
  const step = stepMap[data.mold]
- const StepComponent = step&&step.Menu.component;
+ const StepComponent = step&&step.component;
 
  const updateData = (data:string) =>{
  props.data.data.content = data
  drapStore.updateState()
 
  }
- // const addStepDom = ()=>{
+ const addStepDom = ()=>{
- // return <AddStep >
+ return<AddStep >
- // <span>新增步骤</span>
+ <span>新增步骤</span>
- // <DownOutlined />
+ <DownOutlined />
- // </AddStep>
+ </AddStep>
- // }
+
+ }
  return (
  <div className={style.woodExampleBody}>
  <div ref={(node) => drag(drop(node))} >
@@ -206,7 +208,7 @@ const CardItem = memo((props:CardItemProps) => {
  {props.children}
  {props.data.type===StepDragEnum.CONTAINER&&(<div ref={(node)=>childrenDrop(node)} className={style.woodExampleChildren}>
  拖动到此处或者
- {/*{addStepDom()}*/}
+ {addStepDom()}
  </div>)}
 
 

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

@@ -34,6 +34,7 @@ class HttpEditComponent extends Component<stepProps, State> {
  const content = Object.assign({
  url:urlDefaultData
  },props.data)
+ console.log(1)
  this.state = {
  data:content
  }

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

@@ -2,7 +2,7 @@ import {Content, StepDragEnum, StepDragType} from "@/component/type";
 import {getDropStoreId} from "@/component/CardItem";
 import HttpEditComponent from "./Edit"
 import {StepComponentExport} from "@/component/step";
-const name = "HttpStepComponent"
+const name = "HTTP"
 const tagStore = getDropStoreId("http")
 interface HttpInterface extends Content{
 
@@ -32,6 +32,7 @@ const defaultDataFunc = () =>{
  originalIndex:store.id,
  children:[],
  parent:null,
+ destruction:()=>{},
  data:data
  }
  return defaultData
@@ -40,16 +41,11 @@ const defaultDataFunc = () =>{
 
 
 
-const headerStepOption = {
 
-}
 const exportData:StepComponentExport = {
- Menu:{
+
- label:"HTTP",
+ key:"HTTP",
- key:name,
+ component:HttpEditComponent,
- options:headerStepOption,
- component:HttpEditComponent
- },
  defaultDataFunc
 }
 export default exportData

platform/example/src/component/step/http/menu.ts

@@ -0,0 +1,11 @@
+import {MenuItem} from "@/component/step";
+const name = "HTTP"
+const headerStepOption = {
+
+}
+const menu:MenuItem = {
+ label:"HTTP",
+ key:name,
+ options:headerStepOption
+}
+export default menu

platform/example/src/component/step/index.ts

@@ -1,20 +1,19 @@
-import HttpStepComponent from "./http"
+import Http from "./http"
-import LoopEditComponent from "./loop"
+import Loop from "./loop"
 import {ComponentClass} from "react"
 import {Content, StepDragType} from "@/component/type";
 import {stepProps} from "@/component/step/type";
 
 
-interface Menu {
+export interface MenuItem {
  label: string
  key: string
  options: {}
- component: ComponentClass<stepProps,any>
 }
 
 export interface StepComponentExport {
- Menu: Menu
+ key: string
-
+ component: ComponentClass<stepProps,any>
  defaultDataFunc: () => StepDragType<Content>
 }
 
@@ -23,15 +22,16 @@ interface stepMapType {
 }
 
 export const stepList = [
- HttpStepComponent,
+ Http,
- LoopEditComponent
+ Loop
 ]
-export const menus:Menu[] = stepList.map(step=>step.Menu)
+// export const menus:Menu[] = stepList.map(step=>step.Menu)
 
 export const stepMap: stepMapType = {}
 stepList.forEach(step => {
- stepMap[step.Menu.key] = step
+ stepMap[step.key] = step
 })
+console.log(stepMap)
 export default {
  stepList,
  stepMap

platform/example/src/component/step/loop/index.tsx

@@ -5,7 +5,7 @@ import {StepComponentExport} from "@/component/step";
 import HttpEditComponent from "@/component/step/http/Edit";
 import LoopEditComponent from "@/component/step/loop/Edit";
 const tagStore = getDropStoreId("loop")
-const name = "LoopStepComponent"
+const name = "Loop"
 const LoopData:LoopInterface = {
  content: "",
  id:0,
@@ -36,16 +36,10 @@ const defaultDataFunc = () =>{
  }
  return defaultData
 }
-const LoopStepOption = {
 
-}
 const exportData:StepComponentExport = {
- Menu:{
+ key:"LOOP",
- label:"LOOP",
+ component:LoopEditComponent,
- key:name,
- options:LoopStepOption,
- component:LoopEditComponent
- },
  defaultDataFunc
 }
 export default exportData

platform/example/src/component/step/loop/menu.ts

@@ -0,0 +1,9 @@
+const name = "LOOP"
+const LoopStepOption = {}
+const menu = {
+ label: "LOOP",
+ key: name,
+ options: LoopStepOption
+
+}
+export default menu

platform/example/src/component/step/menus.ts

@@ -0,0 +1,9 @@
+import loopMenu from "@/component/step/loop/menu";
+import httpMenu from "@/component/step/http/menu";
+
+const Menus = [
+ loopMenu,
+ httpMenu
+]
+
+export default Menus

platform/example/src/mobx/DrapStore.ts

@@ -65,7 +65,7 @@ class DrapStore {
  }
  @action
  addChildren(drop: StepDragType<Content>|null, dropNew: StepDragType<Content>) {
- console.log(drop)
+ console.log(drop,dropNew)
  if(drop===null){
  this.state.push(dropNew)
  this.updateState()