From 8174af441367b7096e028f0d44b46281a2d868ba Mon Sep 17 00:00:00 2001 From: tiantang Date: Sun, 23 Jul 2023 17:29:56 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0if=E5=92=8Celse=E7=BB=84?= =?UTF-8?q?=E4=BB=B6---=E5=BC=95=E7=94=A8=E9=97=AE=E9=A2=98=E5=BE=85?= =?UTF-8?q?=E8=A7=A3=E5=86=B3--=E8=A7=A3=E5=86=B3qiankun=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E5=90=AF=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../base/src/views/system/message-Login.vue | 2 - .../base/src/views/system/page-register.vue | 2 - platform/base/vite.config.ts | 4 +- platform/example/src/component/CardItem.tsx | 67 +- platform/example/src/component/DragList.tsx | 4 +- .../example/src/component/step/IF/Edit.tsx | 23 + .../src/component/step/IF/IF.module.less | 0 .../example/src/component/step/IF/index.tsx | 45 + .../example/src/component/step/IF/menu.ts | 9 + .../example/src/component/step/IF/type.d.ts | 15 + .../example/src/component/step/else/Edit.tsx | 23 + .../src/component/step/else/else.module.less | 0 .../example/src/component/step/else/index.tsx | 44 + .../example/src/component/step/else/menu.ts | 9 + .../example/src/component/step/else/type.d.ts | 15 + .../example/src/component/step/http/index.tsx | 2 +- platform/example/src/component/step/index.ts | 8 +- .../example/src/component/step/loop/Edit.tsx | 13 +- .../example/src/component/step/loop/index.tsx | 3 +- .../example/src/component/step/loop/type.d.ts | 2 +- platform/example/src/component/step/menus.ts | 6 +- platform/example/src/component/type.ts | 3 +- platform/example/src/mobx/DrapStore.ts | 3 +- platform/main/.env.development | 4 +- platform/main/package.json | 9 +- platform/main/public/index.html | 2 +- platform/main/src/app.vue | 4 +- platform/main/src/main.js | 12 +- platform/main/src/micro-app.js | 7 +- platform/main/src/page/404.vue | 4 - platform/main/src/page/loading.vue | 21 +- platform/main/vue.config.js | 18 + pnpm-lock.yaml | 6684 +++++++++++------ 33 files changed, 4782 insertions(+), 2285 deletions(-) create mode 100644 platform/example/src/component/step/IF/Edit.tsx create mode 100644 platform/example/src/component/step/IF/IF.module.less create mode 100644 platform/example/src/component/step/IF/index.tsx create mode 100644 platform/example/src/component/step/IF/menu.ts create mode 100644 platform/example/src/component/step/IF/type.d.ts create mode 100644 platform/example/src/component/step/else/Edit.tsx create mode 100644 platform/example/src/component/step/else/else.module.less create mode 100644 platform/example/src/component/step/else/index.tsx create mode 100644 platform/example/src/component/step/else/menu.ts create mode 100644 platform/example/src/component/step/else/type.d.ts diff --git a/platform/base/src/views/system/message-Login.vue b/platform/base/src/views/system/message-Login.vue index 44f190e..d77dd91 100644 --- a/platform/base/src/views/system/message-Login.vue +++ b/platform/base/src/views/system/message-Login.vue @@ -216,8 +216,6 @@ export default defineComponent({ transition: all 1s; } .submit-btn { - min-width: 50px; - width: 50px; outline: none; margin: 0 auto; padding: 12px 30px; diff --git a/platform/base/src/views/system/page-register.vue b/platform/base/src/views/system/page-register.vue index e26f41e..b6d7f85 100644 --- a/platform/base/src/views/system/page-register.vue +++ b/platform/base/src/views/system/page-register.vue @@ -253,8 +253,6 @@ export default defineComponent({ transition: all 1s; } .submit-btn { - min-width: 50px; - width: 50px; outline: none; margin: 0 auto; padding: 12px 30px; diff --git a/platform/base/vite.config.ts b/platform/base/vite.config.ts index 65e2d25..b2c9828 100644 --- a/platform/base/vite.config.ts +++ b/platform/base/vite.config.ts @@ -16,13 +16,14 @@ const alias: Record = { '@': pathResolve('src'), 'api': pathResolve('src/api'), 'views': pathResolve('src/views'), - 'compoents': pathResolve('src/compoents'), + 'components': pathResolve('src/components'), } // https://vitejs.dev/config/ export default ({command}: ConfigEnv): UserConfigExport => { const prodMock = true return { + base: "/base", css:{ devSourcemap:true @@ -50,6 +51,7 @@ export default ({command}: ConfigEnv): UserConfigExport => { } }, build: { + assetsInlineLimit:8*1024, rollupOptions: { output: { manualChunks: { diff --git a/platform/example/src/component/CardItem.tsx b/platform/example/src/component/CardItem.tsx index cd38395..5aa87a4 100644 --- a/platform/example/src/component/CardItem.tsx +++ b/platform/example/src/component/CardItem.tsx @@ -76,7 +76,7 @@ const CardItem = memo((props:CardItemProps) => { if(childrenFind(droppedId)){ return; } - // 跨组件移动--移除自身 + // 跨组件移动--移除自身 deleteCard(props.parent,props.data) }, @@ -86,7 +86,7 @@ const CardItem = memo((props:CardItemProps) => { // 父级是否存在 const childrenFind = (id:string)=>{ // @ts-ignore - if(Array.isArray(props.parent.children)){ + if(props.parent&&Array.isArray(props.parent.children)){ // @ts-ignore for (let i = 0; i < props.parent.children?.length; i++) { // @ts-ignore @@ -97,6 +97,20 @@ const CardItem = memo((props:CardItemProps) => { } return false } + // 同级是否存在 + const dataFind = (id:string)=>{ + // @ts-ignore + if(props.data&&Array.isArray(props.data.children)){ + // @ts-ignore + for (let i = 0; i < props.data.children?.length; i++) { + // @ts-ignore + if(props.data.children[i].id===id){ + return true + } + } + } + return false + } const [{isOver,canDrop,isOverCurrent}, drop] = useDrop( () => ({ accept: StepType.CARD, @@ -133,12 +147,24 @@ const CardItem = memo((props:CardItemProps) => { drop:(item:StepDragType, monitor)=>{ const { id: currentId,tag } = item if(tag===props.data.tag) return + // 相同组件不允许移动 + if(props.tag===tag){ + return + } + // 如果是根组件，不移除自身 + if(props.parent===null){ + return; + } + // 子组件不移除 + if(childrenFind(currentId)){ + return; + } let { index: overIndex } = findCard(id,item) - console.log(overIndex,id,tag,Propstag,item) if(positionRef.current === 'bottom') overIndex += 1 if(tag!==Propstag&&overIndex===-1){ const newItem = { ...item, id: String(new Date().getTime()) } console.log(data, props.data, props.data===props.parent) + console.log('insert') insertCard(props.parent,overIndex, newItem) } positionRef.current = null @@ -152,16 +178,34 @@ const CardItem = memo((props:CardItemProps) => { drop:(item:StepDragType, monitor)=>{ const isOver = monitor.isOver({ shallow: false }) const { tag } = item; + if(props.tag===tag){ + return + } + console.log(item) + // 子组件不移除 + // if(childrenFind(item.id)){ + // return; + // } + // 同级组件不移除 + if(isOver){ console.log(item,monitor,data.tag,data) + if(dataFind(item.id)){ + return; + } // @ts-ignore const newItem = { ...item, id: String(new Date().getTime()) } if(tag!==Propstag){ - // 销毁自己 - item.destruction() + console.log('insert') + // 销毁自己本身，然后创建一个新的 + // deleteCard(props.parent,props.data) const newItem = lodash.cloneDeep(item) - newItem.id = String(new Date().getTime()) - childrenCreate(newItem) + // 删除成功才添加 + if(item.destruction()){ + newItem.id = String(new Date().getTime()) + childrenCreate(newItem) + } + } return } @@ -175,13 +219,10 @@ const CardItem = memo((props:CardItemProps) => { }), }),[data]) const step = stepMap[data.mold] - console.log(step,stepMap,data.mold) const StepComponent = step&&step.component; - - const updateData = (data:string) =>{ - props.data.data.content = data + const updateData = (data:any) =>{ + props.data.data = data drapStore.updateState() - } const addStepDom = ()=>{ return}> @@ -204,7 +245,7 @@ const CardItem = memo((props:CardItemProps) => {
- {step&&()} + {step&&()}
{props.children} diff --git a/platform/example/src/component/DragList.tsx b/platform/example/src/component/DragList.tsx index aaaf0f7..233e637 100644 --- a/platform/example/src/component/DragList.tsx +++ b/platform/example/src/component/DragList.tsx @@ -20,7 +20,7 @@ const DragList = ({data,parent}:DragListProps) => { if(!e.tag){ e.tag = tagStore.tag } - e.destruction = () => deleteCard(null,e) + e.destruction = () => deleteCard(parent,e) }) // 在当前位置插入模块 const insertCard = useCallback( @@ -34,10 +34,12 @@ const DragList = ({data,parent}:DragListProps) => { (currentDrop:StepDragType|null,item:StepDragType) => { if(currentDrop===null){ drapStore.removeDrop(item) + }else{ currentDrop.children = currentDrop.children?.filter(dropItem=>dropItem.id!==item.id) drapStore.updateState() } + return true }, [data], ) diff --git a/platform/example/src/component/step/IF/Edit.tsx b/platform/example/src/component/step/IF/Edit.tsx new file mode 100644 index 0000000..f2f2aec --- /dev/null +++ b/platform/example/src/component/step/IF/Edit.tsx @@ -0,0 +1,23 @@ +import {Component} from "react"; +import {IFProps, IFState} from "@/component/step/IF/type"; + +class IFEditComponent extends Component{ + constructor(props:IFProps) { + super(props); + this.state = {} + } + updateData(){ + this.props.updateData({}) + } + valueChange(value:number){ + // this.setState({}) + this.updateData() + } + render() { + return
+ +
; + } +} + +export default IFEditComponent diff --git a/platform/example/src/component/step/IF/IF.module.less b/platform/example/src/component/step/IF/IF.module.less new file mode 100644 index 0000000..e69de29 diff --git a/platform/example/src/component/step/IF/index.tsx b/platform/example/src/component/step/IF/index.tsx new file mode 100644 index 0000000..430b927 --- /dev/null +++ b/platform/example/src/component/step/IF/index.tsx @@ -0,0 +1,45 @@ +import {StepDragEnum, StepDragType} from "@/component/type"; +import {IFInterface} from "@/component/step/IF/type"; +import {getDropStoreId} from "@/component/CardItem"; +import {StepComponentExport} from "@/component/step"; +import HttpEditComponent from "@/component/step/http/Edit"; +import IFEditComponent from "@/component/step/IF/Edit"; +const tagStore = getDropStoreId("IF") +const name = "IF" +const IFData:IFInterface = { + id:0, + label:"循环组件", + remark:"", + color:"#7eabbe", + tag:"IF", + value:"" +} + +const defaultDataFunc = () =>{ + + const data = {...IFData} + + const store = tagStore() + data.id = store.id + // data.mold = name + const defaultData:StepDragType = { + mold:name, + type:StepDragEnum.CONTAINER, + tag:store.tag, + id:String(store.id), + index:store.id, + originalIndex:store.id, + children:[], + parent:null, + data:data, + destruction:()=>false + } + return defaultData +} + +const exportData:StepComponentExport = { + key:"IF", + component:IFEditComponent, + defaultDataFunc +} +export default exportData diff --git a/platform/example/src/component/step/IF/menu.ts b/platform/example/src/component/step/IF/menu.ts new file mode 100644 index 0000000..1dcf591 --- /dev/null +++ b/platform/example/src/component/step/IF/menu.ts @@ -0,0 +1,9 @@ +const name = "IF" +const IFStepOption = {} +const menu = { + label: "IF", + key: name, + options: IFStepOption + +} +export default menu \ No newline at end of file diff --git a/platform/example/src/component/step/IF/type.d.ts b/platform/example/src/component/step/IF/type.d.ts new file mode 100644 index 0000000..acc1acf --- /dev/null +++ b/platform/example/src/component/step/IF/type.d.ts @@ -0,0 +1,15 @@ +import {Content, StepDragEnum, StepDragType} from "@/component/type"; +import {HttpData} from "@/component/step/http/type"; + + +interface IFData extends IFInterface{ + +} +interface IFProps { + updateData:(data:IFState)=>void + data:IFData +} +interface IFState { +} +interface IFInterface extends Content{ +} diff --git a/platform/example/src/component/step/else/Edit.tsx b/platform/example/src/component/step/else/Edit.tsx new file mode 100644 index 0000000..ada85cf --- /dev/null +++ b/platform/example/src/component/step/else/Edit.tsx @@ -0,0 +1,23 @@ +import {Component} from "react"; +import {ElseProps, ElseState} from "@/component/step/Else/type"; + +class ElseEditComponent extends Component{ + constructor(props:ElseProps) { + super(props); + this.state = {} + } + updateData(){ + this.props.updateData({}) + } + valueChange(value:number){ + // this.setState({}) + this.updateData() + } + render() { + return
+ +
; + } +} + +export default ElseEditComponent diff --git a/platform/example/src/component/step/else/else.module.less b/platform/example/src/component/step/else/else.module.less new file mode 100644 index 0000000..e69de29 diff --git a/platform/example/src/component/step/else/index.tsx b/platform/example/src/component/step/else/index.tsx new file mode 100644 index 0000000..80d04dd --- /dev/null +++ b/platform/example/src/component/step/else/index.tsx @@ -0,0 +1,44 @@ +import {StepDragEnum, StepDragType} from "@/component/type"; +import {getDropStoreId} from "@/component/CardItem"; +import {StepComponentExport} from "@/component/step"; +import ElseEditComponent from "@/component/step/else/Edit"; +import {ElseInterface} from "@/component/step/else/type"; +const tagStore = getDropStoreId("loop") +const name = "ELSE" +const ELSEData:ElseInterface = { + id:0, + label:"ELSE组件", + remark:"", + color:"#7eabbe", + tag:"ELSE", + value:"", +} + +const defaultDataFunc = () =>{ + + const data = {...ELSEData} + + const store = tagStore() + data.id = store.id + // data.mold = name + const defaultData:StepDragType = { + mold:name, + type:StepDragEnum.CONTAINER, + tag:store.tag, + id:String(store.id), + index:store.id, + originalIndex:store.id, + children:[], + parent:null, + data:data, + destruction:()=>false + } + return defaultData +} + +const exportData:StepComponentExport = { + key:"ELSE", + component:ElseEditComponent, + defaultDataFunc +} +export default exportData diff --git a/platform/example/src/component/step/else/menu.ts b/platform/example/src/component/step/else/menu.ts new file mode 100644 index 0000000..c285345 --- /dev/null +++ b/platform/example/src/component/step/else/menu.ts @@ -0,0 +1,9 @@ +const name = "ELSE" +const ElseStepOption = {} +const menu = { + label: "ELSE", + key: name, + options: ElseStepOption + +} +export default menu \ No newline at end of file diff --git a/platform/example/src/component/step/else/type.d.ts b/platform/example/src/component/step/else/type.d.ts new file mode 100644 index 0000000..45f9c6a --- /dev/null +++ b/platform/example/src/component/step/else/type.d.ts @@ -0,0 +1,15 @@ +import {Content, StepDragEnum, StepDragType} from "@/component/type"; + + + +interface ElseData extends ElseInterface{ + +} +interface ElseProps { + updateData:(data:ElseState)=>void + data:ElseData +} +interface ElseState { +} +interface ElseInterface extends Content{ +} diff --git a/platform/example/src/component/step/http/index.tsx b/platform/example/src/component/step/http/index.tsx index a2185b4..a3027a0 100644 --- a/platform/example/src/component/step/http/index.tsx +++ b/platform/example/src/component/step/http/index.tsx @@ -32,7 +32,7 @@ const defaultDataFunc = () =>{ originalIndex:store.id, children:[], parent:null, - destruction:()=>{}, + destruction:()=>false, data:data } return defaultData diff --git a/platform/example/src/component/step/index.ts b/platform/example/src/component/step/index.ts index 4585019..934aa72 100644 --- a/platform/example/src/component/step/index.ts +++ b/platform/example/src/component/step/index.ts @@ -1,5 +1,7 @@ import Http from "./http" import Loop from "./loop" +import IF from "./IF" +import ELSE from "./else" import {ComponentClass} from "react" import {Content, StepDragType} from "@/component/type"; import {stepProps} from "@/component/step/type"; @@ -23,7 +25,9 @@ interface stepMapType { export const stepList = [ Http, - Loop + Loop, + IF, + ELSE ] // export const menus:Menu[] = stepList.map(step=>step.Menu) @@ -31,7 +35,7 @@ export const stepMap: stepMapType = {} stepList.forEach(step => { stepMap[step.key] = step }) -console.log(stepMap) +console.log(stepMap,stepList) export default { stepList, stepMap diff --git a/platform/example/src/component/step/loop/Edit.tsx b/platform/example/src/component/step/loop/Edit.tsx index 1f6bb65..a5395f8 100644 --- a/platform/example/src/component/step/loop/Edit.tsx +++ b/platform/example/src/component/step/loop/Edit.tsx @@ -3,9 +3,6 @@ import {LoopProps, LoopState} from "@/component/step/loop/type"; import {InputNumber} from "antd"; import style from "./loop.module.less" import {InfoCircleOutlined} from "@ant-design/icons"; -interface Interface { - -} class LoopEditComponent extends Component{ constructor(props:LoopProps) { @@ -13,15 +10,13 @@ class LoopEditComponent extends Component{ this.state = { loop:props.data.loop } - console.log(props.data) } - updateData(){ - this.props.updateData(JSON.stringify(this.state.data)) + updateData(value:number){ + this.props.updateData({loop:value}) } valueChange(value:number){ this.setState({loop:value}) - this.updateData() - console.log(this.state.loop) + this.updateData(value) } render() { return
@@ -33,7 +28,7 @@ class LoopEditComponent extends Component{
可以使用$_index变量获取当前循环的次数,次数从0开始计数 - this.valueChange(e)} min={0} defaultValue={0} /> + this.valueChange(e as number)} min={0} defaultValue={0} />
diff --git a/platform/example/src/component/step/loop/index.tsx b/platform/example/src/component/step/loop/index.tsx index 9c8615f..7cdfeb1 100644 --- a/platform/example/src/component/step/loop/index.tsx +++ b/platform/example/src/component/step/loop/index.tsx @@ -7,7 +7,6 @@ import LoopEditComponent from "@/component/step/loop/Edit"; const tagStore = getDropStoreId("loop") const name = "LOOP" const LoopData:LoopInterface = { - content: "", id:0, label:"循环组件", remark:"", @@ -34,7 +33,7 @@ const defaultDataFunc = () =>{ children:[], parent:null, data:data, - destruction:()=>{} + destruction:()=>false } return defaultData } diff --git a/platform/example/src/component/step/loop/type.d.ts b/platform/example/src/component/step/loop/type.d.ts index 97fe31c..5ff7dde 100644 --- a/platform/example/src/component/step/loop/type.d.ts +++ b/platform/example/src/component/step/loop/type.d.ts @@ -6,7 +6,7 @@ interface LoopData extends LoopInterface{ } interface LoopProps { - updateData:(data:string)=>void + updateData:(data:LoopState)=>void data:LoopData } interface LoopState { diff --git a/platform/example/src/component/step/menus.ts b/platform/example/src/component/step/menus.ts index fa5a33f..0dc7636 100644 --- a/platform/example/src/component/step/menus.ts +++ b/platform/example/src/component/step/menus.ts @@ -1,9 +1,13 @@ import loopMenu from "@/component/step/loop/menu"; import httpMenu from "@/component/step/http/menu"; +import IfMenu from "@/component/step/IF/menu"; +import ELSEMenu from "@/component/step/else/menu"; const Menus = [ loopMenu, - httpMenu + httpMenu, + ELSEMenu, + IfMenu ] export default Menus \ No newline at end of file diff --git a/platform/example/src/component/type.ts b/platform/example/src/component/type.ts index ec750d3..ba57852 100644 --- a/platform/example/src/component/type.ts +++ b/platform/example/src/component/type.ts @@ -18,11 +18,10 @@ export interface StepDragType { children?:StepDragType[] parent:StepDragType|null data:T - destruction:()=>void + destruction:()=>boolean } // 组件内容 export interface Content { - content:string id:number label:string value:string diff --git a/platform/example/src/mobx/DrapStore.ts b/platform/example/src/mobx/DrapStore.ts index 39b072c..528c3f2 100644 --- a/platform/example/src/mobx/DrapStore.ts +++ b/platform/example/src/mobx/DrapStore.ts @@ -11,7 +11,7 @@ class DrapStore { @observable state: StepDragType[] = [] - treeData: Map> = new Map>() + treeData: WeakMap> = new Map>() treeListData: WeakMap[]> = new WeakMap[]>() @observable @@ -40,6 +40,7 @@ class DrapStore { @action updateState(){ this.setState(_.cloneDeep(this.state)) + console.log(this.state) // this.setState([]) } @action diff --git a/platform/main/.env.development b/platform/main/.env.development index ad52bc5..aa6ae93 100644 --- a/platform/main/.env.development +++ b/platform/main/.env.development @@ -1,3 +1,3 @@ -VUE_APP_SUB_BASE=//localhost:3000/base -VUE_APP_SUB_WORKBENCH=//localhost:3001/workbench +VUE_APP_SUB_BASE=//localhost:3000/base/ +VUE_APP_SUB_WORKBENCH=//localhost:3001/workbench/ VUE_APP_SUB_HTML=//localhost:7799/ diff --git a/platform/main/package.json b/platform/main/package.json index a035443..a321124 100644 --- a/platform/main/package.json +++ b/platform/main/package.json @@ -12,15 +12,18 @@ "dependencies": { "@quality/common": "workspace:^1.0.0", "core-js": "^3.6.5", - "nprogress": "^0.2.0", - "qiankun": "^2.0.22", "less": "^4.1.2", "less-loader": "^7.2.1", + "nprogress": "^0.2.0", + "qiankun": "^2.0.22", "vue": "^2.6.14" }, "devDependencies": { + "@vue/cli-plugin-babel": "4.4.4", + "@vue/cli-plugin-unit-jest": "4.4.4", + "@vue/cli-service": "4.4.4", "svg-sprite-loader": "^6.0.11", - "@vue/cli-service": "4.5.0", + "script-ext-html-webpack-plugin": "2.1.3", "vue-template-compiler": "^2.6.14" } } diff --git a/platform/main/public/index.html b/platform/main/public/index.html index 0de2cb1..48a3efa 100644 --- a/platform/main/public/index.html +++ b/platform/main/public/index.html @@ -29,7 +29,7 @@ -
+