feat:增加if和else组件---引用问题待解决--解决qiankun无法启动的问题

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;

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;

platform/base/vite.config.ts

@@ -16,13 +16,14 @@ const alias: Record<string, string> = {
  '@': 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: {

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<Content>, 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<Content>, 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){
- // 销毁自己
+ console.log('insert')
- item.destruction()
+ // 销毁自己本身，然后创建一个新的
+ // 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:any) =>{
- const updateData = (data:string) =>{
+ props.data.data = data
- props.data.data.content = data
  drapStore.updateState()
-
  }
  const addStepDom = ()=>{
  return<AddStep className={style.woodExampleAddStepbtn} step={props.data as StepDragType<Content>}>
@@ -204,7 +245,7 @@ const CardItem = memo((props:CardItemProps) => {
  </div>
  <div className={style.woodExampleContent}>
  <div>
- {step&&(<StepComponent updateData={updateData} data={data.data} />)}
+ {step&&(<StepComponent updateData={updateData} data={data.data as any} />)}
  </div>
  <div className={style.woodExampleChildren}>
  {props.children}

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<Content>|null,item:StepDragType<Content>) => {
  if(currentDrop===null){
  drapStore.removeDrop(item)
+
  }else{
  currentDrop.children = currentDrop.children?.filter(dropItem=>dropItem.id!==item.id)
  drapStore.updateState()
  }
+ return true
  },
  [data],
  )

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<IFProps, IFState>{
+ constructor(props:IFProps) {
+ super(props);
+ this.state = {}
+ }
+ updateData(){
+ this.props.updateData({})
+ }
+ valueChange(value:number){
+ // this.setState({})
+ this.updateData()
+ }
+ render() {
+ return <div>
+
+ </div>;
+ }
+}
+
+export default IFEditComponent

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<IFInterface> = {
+ 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

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

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{
+}

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<ElseProps, ElseState>{
+ constructor(props:ElseProps) {
+ super(props);
+ this.state = {}
+ }
+ updateData(){
+ this.props.updateData({})
+ }
+ valueChange(value:number){
+ // this.setState({})
+ this.updateData()
+ }
+ render() {
+ return <div>
+
+ </div>;
+ }
+}
+
+export default ElseEditComponent

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<ElseInterface> = {
+ 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

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

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{
+}

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

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

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<LoopProps, LoopState>{
  constructor(props:LoopProps) {
@@ -13,15 +10,13 @@ class LoopEditComponent extends Component<LoopProps, LoopState>{
  this.state = {
  loop:props.data.loop
  }
- console.log(props.data)
  }
- updateData(){
+ updateData(value:number){
- this.props.updateData(JSON.stringify(this.state.data))
+ this.props.updateData({loop:value})
  }
  valueChange(value:number){
  this.setState({loop:value})
- this.updateData()
+ this.updateData(value)
- console.log(this.state.loop)
  }
  render() {
  return <div className={style.loopBody}>
@@ -33,7 +28,7 @@ class LoopEditComponent extends Component<LoopProps, LoopState>{
  <div className={style.loopContent}>
  <span>可以使用$_index变量获取当前循环的次数,次数从0开始计数</span>
  <span>
- <InputNumber addonBefore="执行次数" value={this.state.loop} onChange={(e)=>this.valueChange(e)} min={0} defaultValue={0} />
+ <InputNumber addonBefore="执行次数" value={this.state.loop} onChange={(e)=>this.valueChange(e as number)} min={0} defaultValue={0} />
  </span>
  </div>
 

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
 }

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 {

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

platform/example/src/component/type.ts

@@ -18,11 +18,10 @@ export interface StepDragType<T> {
  children?:StepDragType<T>[]
  parent:StepDragType<T>|null
  data:T
- destruction:()=>void
+ destruction:()=>boolean
 }
 // 组件内容
 export interface Content {
- content:string
  id:number
  label:string
  value:string

platform/example/src/mobx/DrapStore.ts

@@ -11,7 +11,7 @@ class DrapStore {
  @observable
  state: StepDragType<Content>[] = []
 
- treeData: Map<object, StepDragType<Content>> = new Map<object, StepDragType<Content>>()
+ treeData: WeakMap<object, StepDragType<Content>> = new Map<object, StepDragType<Content>>()
  treeListData: WeakMap<object, StepDragType<Content>[]> = new WeakMap<object, StepDragType<Content>[]>()
 
  @observable
@@ -40,6 +40,7 @@ class DrapStore {
  @action
  updateState(){
  this.setState(_.cloneDeep(this.state))
+ console.log(this.state)
  // this.setState([])
  }
  @action

platform/main/.env.development

@@ -1,3 +1,3 @@
-VUE_APP_SUB_BASE=//localhost:3000/base
+VUE_APP_SUB_BASE=//localhost:3000/base/
-VUE_APP_SUB_WORKBENCH=//localhost:3001/workbench
+VUE_APP_SUB_WORKBENCH=//localhost:3001/workbench/
 VUE_APP_SUB_HTML=//localhost:7799/

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"
  }
 }

platform/main/public/index.html

@@ -29,7 +29,7 @@
  </head>
  <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
- <div id="root"></div>
+ <div id="qkroot"></div>
  <!--
  This HTML file is a template.
  If you open it directly in the browser, you will see an empty page.

platform/main/src/app.vue

@@ -2,7 +2,7 @@
  <div class="wooder-layout">
  <div class="layout-header">
  <ul class="sub-apps">
- <li v-for="item in microApps" :class="{active: item.activeRule === current}" :key="item.name"
+ <li v-for="item in microApps.apps" :class="{active: item.activeRule === current}" :key="item.name"
  @click="goto(item)">{{ item.title }}
  </li>
  </ul>
@@ -59,7 +59,7 @@ export default {
  },
  bindCurrent() {
  const path = window.location.pathname
- if (this.microApps.findIndex(item => item.activeRule === path) >= 0) {
+ if (this.microApps.apps.findIndex(item => item.activeRule === path) >= 0) {
  this.current = path
  }
  },

platform/main/src/main.js

@@ -9,9 +9,7 @@ import 'nprogress/nprogress.css'
 import registerGlobalModule from "@quality/common/store/global-register";
 
 Vue.config.productionTip = false
-const instance = new Vue({
+
- render: h => h(App)
-}).$mount('#root')
 // 定义loader方法，loading改变时，将变量赋值给App.vue的data中的isLoading
 function loader (loading) {
  if (instance && instance.$children) {
@@ -20,15 +18,19 @@ function loader (loading) {
  }
 }
 microApps.getApps()
+console.log(microApps.apps)
 // 子应用统一由后台管理，
 // 给子应用配置加上loader方法
 const apps = microApps.apps.map(item => {
  return {
  ...item,
+ props:{},
  loader
  }
 })
-
+const instance = new Vue({
+ render: h => h(App)
+}).$mount('#qkroot')
 registerMicroApps(apps, {
  beforeLoad: app => {
  console.log('before load app.name====>>>>>', app.name)
@@ -49,5 +51,5 @@ registerMicroApps(apps, {
  }
  ]
 })
-setDefaultMountApp('/workbench')
+// setDefaultMountApp('/base')
 start()

platform/main/src/micro-app.js

@@ -2,22 +2,25 @@ import store from './store'
 
 const micro = {
  apps:[],
- getApps = ()=>{
+ getApps: ()=>{
- this.apps = microApps
+ micro.apps = microApps
  }
 }
 
 const microApps = [
  {
+
  name: 'base',
  title: '工作台',
  entry: process.env.VUE_APP_SUB_BASE,
+ container:"#subapp-viewport",
  activeRule: '/base'
  },
  {
  name: 'workbench',
  title: '工作台2',
  entry: process.env.VUE_APP_SUB_WORKBENCH,
+ container:"#subapp-viewport",
  activeRule: '/workbench'
  },
  // {

platform/main/src/page/404.vue

@@ -1,11 +1,7 @@
 <template>
-<<<<<<< HEAD
-<div>404</div>
-=======
 <div>
  404
 </div>
->>>>>>> e1b4016ac042a26a1b4336cdbc82232cf881bc40
 </template>
 
 <script>

platform/main/src/page/loading.vue

@@ -1,5 +1,4 @@
 <template>
-<<<<<<< HEAD
 <div class="main-loading">
 
  <div class="loading" v-show="isLoading">
@@ -16,16 +15,11 @@
  </div>
  <slot></slot>
  </div>
-=======
+
-<div>
- loading
-</div>
->>>>>>> e1b4016ac042a26a1b4336cdbc82232cf881bc40
 </template>
 
 <script>
 export default {
-<<<<<<< HEAD
 name: "loading",
  props:{
  isLoading:false
@@ -55,14 +49,7 @@ name: "loading",
  transform: translate(-50%,-50%);
 }
 .main-loading{
- display: inline-block;
+ width: 100%;
+ display: block;
 }
-=======
- name: "loading"
-}
-</script>
-
-<style scoped>
-
->>>>>>> e1b4016ac042a26a1b4336cdbc82232cf881bc40
 </style>

platform/main/vue.config.js

@@ -1,5 +1,6 @@
 'use strict'
 const path = require('path')
+const {name} = require("./package.json")
 // const port = process.env.port || process.env.npm_config_port || 9527 // dev port
 const port = 9527 // dev port
 const publicPath = process.env.NODE_ENV === 'production' ? "http://" + process.env.VUE_APP_HOST : '/';
@@ -10,8 +11,12 @@ module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
+
  productionSourceMap: false,
  devServer: {
+ headers:{
+ "Access-Control-Allow-Origin":"*"
+ },
  port: port,
  open: true,
  overlay: {
@@ -26,12 +31,25 @@ module.exports = {
  pathRewrite: {
  // "^/mock": "/mock"
  }
+ },
+ // 代理配置
+ '/workbench': {
+ target: 'http://121.43.42.180:13777/',
+ changeOrigin: true,
+ rewrite: path => path.replace(/^\/workbench/, '/api')
  }
  }
  },
  css: {
  sourceMap: true
  },
+ configureWebpack:{
+ output:{
+ library:`${name}-[name]`,
+ libraryTarget:"umd",
+ jsonpFunction: `webpackJsonp_${name}`
+ }
+ },
  transpileDependencies: ['common'],
  chainWebpack: config => {
  config.plugin('html')