ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/layout/sectionLayout/index.vue

@@ -0,0 +1,1200 @@
+<script setup>
+import { computed, ref, watch, provide, onMounted, reactive } from 'vue';
+import { Delete } from '@element-plus/icons-vue'
+import { useMagicKeys } from '@vueuse/core'
+import { ElMessage } from 'element-plus';
+
+import { getDragGroup, removeDragGroup } from './section';
+import useComponentContext, { groupBoxContext } from '../../../hooks/useComponentContext';
+// import VueDrag from './components/vueDrag/index.vue'
+import MergeBox from './components/MergeBox.vue'
+import { MiddlewareComponentDes as ComponentMiddleware } from '@ibsp-component-lib'
+import { Section } from './section'
+
+import { useContextmenu } from '@/components/nextui/Contextmenu';
+import { DesignComponent } from '@models/useComponentModel';
+import useComponentStore from '@/stores/useComponentStore';
+import { emitGlobalEvent } from '@/models/useGlobalEvents';
+import useCommand from '@/models/command';
+import DragNode from '@/components/nextui/DragNode';
+import { historyStackModel } from '@/models/useHistoryStackModel';
+
+const props = defineProps({
+  component: {
+    type: Object,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  propsValues: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+
+props.component.init()
+const commands = useCommand();
+const sectionInstance = new Section(props.component, props.page)
+const componentStore = useComponentStore();
+const mergeBoxRef = ref(null)
+const isCtrl = ref(false)
+let isDragCtrl = false
+const copyMove = reactive({
+  x: 0,
+  y: 0
+})
+let isCtrlCreated = ref(false)
+let sectionMousedownFun = new Set()
+const parentSectionMousedown = (fun) => {
+  sectionMousedownFun.add(fun)
+}
+let isSelect = false
+provide('parentSectionMousedown', parentSectionMousedown)
+
+// #region --------
+const allComponentsChildren = computed(() => {
+  return componentStore.queryComponentDataTreePlat(props.component)
+})
+const componentChildren = computed(() => {
+  return componentStore.queryComponentChildrenData(props.component.id);
+})
+const selectActiveComponents = computed(() => {
+  return allComponentsChildren.value.filter(item => item.selectActive)
+})
+
+
+// #endregion ------
+
+
+// 清除所有组件的选择状态
+const clearComponentsSectionActive = () => {
+  for (let index = 0, len = allComponentsChildren.value.length; index < len; index++) {
+    const element = allComponentsChildren.value[index];
+    element.selectActive = false
+  }
+}
+
+const onDrop = (e) => {
+  const componentSource = e.dataTransfer.getData('componentSource');
+  const source = JSON.parse(componentSource)
+  const configComponent = props.page.getConfigComponent({ source })
+  if (!source || !configComponent) return
+  if (configComponent.id === props.component.componentMetaId) {
+    ElMessage({
+      message: '自由布局容器禁止嵌套',
+      type: 'warning'
+    })
+    return
+  }
+  let w = 300
+  let h = 200
+  if (typeof configComponent?.position?.w === 'number') {
+    w = configComponent.position.w
+  }
+  if (typeof configComponent?.position?.h === 'number') {
+    h = configComponent.position.h
+  }
+  const activeComponent = allComponentsChildren.value.find(item => item.active && item.type === 'layout-group') || props.component
+  const component = new DesignComponent(configComponent, {
+    parentId: activeComponent.id,
+    page: props.page,
+    component: {
+      position: {
+        x: e.offsetX,
+        y: e.offsetY,
+        w,
+        h
+      },
+      baseStyle: {
+        position: 'absolute'
+      }
+    }
+  });
+  component.parentSectionId = props.component.id
+  component.click(component)
+}
+
+
+/** 判断是否框选 */
+const isSelectEComponents = (item, targetPosition) => {
+  return !(
+    item.y >
+    targetPosition.height + targetPosition.top ||
+    item.x >
+    targetPosition.left + targetPosition.width ||
+    targetPosition.top > item.y + item.h ||
+    targetPosition.left > item.x + item.w
+  );
+};
+
+// 关闭选择框
+const mergerBoxClose = () => {
+  console.log('mergerBoxClose');
+  mergeBoxRef.value.close()
+}
+
+
+// 点击容器
+const onClickSection = (e) => {
+  // console.log('onClickSection');
+  // props.component.click()
+}
+
+
+// 移动框选
+const onDragMoveBox = (position) => {
+  // if (isCtrl.value) {
+
+  // }
+  componentChildren.value.forEach((item) => {
+    const isSelect = isSelectEComponents(item.position, position)
+    item.selectActive = isSelect
+  })
+
+}
+
+// 框选结束
+const onDragDropBox = (components) => {
+  const activeComponents = components || componentChildren.value.filter(component => component.selectActive)
+  if (activeComponents.length < 2) {
+    mergeBoxRef.value.close()
+    activeComponents.forEach(item => {
+      item.selectActive = false
+    })
+    return
+  }
+  isSelect = true
+  const position = mergeBoxRef.value.position
+  /** 框选计算最大/小位置 */
+  const left = Math.min(...activeComponents.map(item => item.position.x))
+  const top = Math.min(...activeComponents.map(item => item.position.y))
+  position.left = left
+  position.top = top
+  position.width = Math.max(...activeComponents.map(item => item.position.x + item.position.w)) - left
+  position.height = Math.max(...activeComponents.map(item => item.position.y + item.position.h)) - top
+
+
+  componentStore.setSelections(activeComponents, mergeBoxRef.value.position)
+
+  setTimeout(() => {
+    if (componentStore.activeComponent?.active) {
+      componentStore.activeComponent.active = false
+    }
+  }, 10);
+
+}
+
+// 框选开始
+const onDragStartBox = () => {
+  componentStore.setSelections([])
+}
+/** 组合 */
+const onGroupBox = () => {
+  onDragDropBox()
+  const activeComponents = componentStore.selections
+  if (activeComponents.length < 2) {
+    return
+  }
+  const position = mergeBoxRef.value.position
+  const groupConfig = props.page.localComponents.common['section-layout-group']
+  const parentId = activeComponents[0].parentId
+  const groupComponent = new DesignComponent(groupConfig, {
+    parentId: parentId,
+    component: {
+      position: {
+        x: position.left,
+        y: position.top,
+        w: position.width,
+        h: position.height
+      }
+    },
+    isPageInit: true,
+    page: props.page
+  })
+  historyStackModel.push({
+    actionType: historyStackModel.actionType.MergeGroup,
+    label: `添加${groupComponent.name}`,
+    changes: {
+      id: groupComponent.id,
+      index: componentStore.componentData.findIndex(item => item.id === groupComponent.id),
+      component: JSON.parse(JSON.stringify(groupComponent.generatePreviewData())),
+      children: activeComponents.map(item => {
+        return {
+          id: item.id,
+          updateValue: [
+            {
+              prop: 'parentId',
+              oldValue: item.parentId,
+              value: groupComponent.id
+            }
+          ]
+        }
+      })
+    }
+  })
+  groupComponent._activeGroup = true
+  groupComponent.parentSectionId = props.component.id
+  activeComponents.forEach(item => {
+    item.parentId = groupComponent.id
+    item.selectActive = false
+    item.parentSectionId = props.component.id
+  })
+  componentStore.setSelections([])
+  setTimeout(() => {
+    groupComponent.click(groupComponent)
+  }, 10);
+  mergeBoxRef.value.close()
+}
+
+const targetType = ['group', 'section']
+// 容器按下
+const onMousedownSection = (e) => {
+  if (e.button === 0 && targetType.includes(e.target.dataset?.type)) {
+    // 如果是选择状态  就关闭框选
+    if (isSelect) {
+      setTimeout(() => {
+        mergerBoxClose()
+      }, 100);
+      isSelect = false
+    }
+    // 清除页面所有组件的选择状态, 并且关闭框选
+    clearComponentsSectionActive()
+    props.component.click(props.component)
+  }
+  sectionMousedownFun.forEach(fun => fun?.())
+}
+
+// 组件点击
+const onClickComponent = (item) => {
+  console.log('onClickComponent');
+  item.click(item)
+}
+
+// 创建一个复制组件
+let ctrlCreateComponent = null
+const createCopyComponents = (item, x, y) => {
+  const resComponent = props.page.generateComponentPreviewData(
+    componentStore.queryComponentDataTreePlat(item)
+  )
+  const [fist, more] = resComponent
+  const labelChildren = componentChildren.value.filter(i => i.label === item.label)
+  ctrlCreateComponent = new DesignComponent(props.page.getConfigComponent({ component: item }), {
+    parentId: item.parentId,
+    component: {
+      ...fist,
+      position: {
+        ...fist.position,
+        x,
+        y
+      },
+      id: null,
+      name: item.label + labelChildren.length
+    },
+    page: props.page
+  });
+  ctrlCreateComponent.parentSectionId = item.parentSectionId
+  ctrlCreateComponent.click(ctrlCreateComponent)
+}
+let isDragCtrlTime = null
+// 组件拖拽中
+const onComponentsDragging = (item, dragData, dragDom) => {
+  emitGlobalEvent('nodeChangeSize', null, dragDom)
+  if (isCtrl.value) {
+    if (isDragCtrl) {
+      return
+    }
+    isDragCtrlTime = setTimeout(() => {
+      isDragCtrl = true
+      clearTimeout(isDragCtrlTime)
+    }, 100);
+  }
+}
+
+// 组件大小改变
+const onComponentsResizing = (item, sizeData) => {
+  const { width, height, left, top } = sizeData
+  item.position.x = left
+  item.position.y = top
+  item.position.w = width
+  item.position.h = height
+  emitGlobalEvent('nodeChangeSize', item)
+}
+let startPosition = null
+const onComponentsResizingStart = (item) => {
+  startPosition = { ...item.position }
+}
+const onComponentsResinEnd = (item) => {
+  historyStackModel.push({
+    actionType: historyStackModel.actionType.ResizeComponent,
+    label: `调整${item.name}大小`,
+    changes: {
+      id: item.id,
+      index: componentStore.componentData.findIndex((itemC) => itemC.id === item.id),
+      component: JSON.parse(JSON.stringify(item.generatePreviewData())),
+      prop: 'position',
+      value: { ...item.position },
+      oldValue: startPosition
+    }
+
+  })
+}
+
+// 组件开始拖拽
+const onDragStartComponent = (item) => {
+  if (item.componentMetaId === 'section-layout-group') {
+    // 触发给下面的组合框选
+    getDragGroup(item.id).start(item.position)
+  }
+  isCtrlCreated.value = false
+  return true
+}
+
+// 组件拖拽结束
+const onDragstop = (item) => {
+  // 拖拽结束也触发给下面的组合
+  if (item.componentMetaId === 'section-layout-group') {
+    getDragGroup(item.id).drop(item.position)
+  }
+  // 如果创建有复制组件, 就替换位置
+  if (ctrlCreateComponent) {
+    let tempX = item.position.x
+    let tempY = item.position.y
+    item.position.x = ctrlCreateComponent.position.x
+    item.position.y = ctrlCreateComponent.position.y
+    ctrlCreateComponent.position.x = tempX
+    ctrlCreateComponent.position.y = tempY
+    setTimeout(() => {
+      ctrlCreateComponent.click(ctrlCreateComponent)
+      ctrlCreateComponent = null
+    }, 10);
+  }
+}
+
+
+// 组件按下事件
+const onMousedownComponent = (e, item) => {
+  console.log('onMousedownComponent');
+  // if (e.target.dataset?.type === 'section-layout-group') {
+  //   onMousedownSection(e)
+  //   return
+  // }
+  if (e.button === 0) {
+    // 如果按住ctrl后，选择大于2个就触发框选
+    if (isCtrl.value) {
+      item.selectActive = !item.selectActive
+      if (componentChildren.value.filter(item => item.selectActive)?.length >= 2) {
+        onDragDropBox()
+      } else {
+        // 否则关闭框选
+        mergeBoxRef.value.close()
+      }
+    } else {
+      // 没有ctrl就清除所有选择状态
+      componentChildren.value.forEach(child => {
+        child.selectActive = false
+      })
+      item.selectActive = true
+    }
+  }
+
+}
+
+// 辅助线
+const vLine = ref([])
+const hLine = ref([])
+const dLine = ref(null)
+const getRefLineParams = (params) => {
+  const { x: h, y: v, d } = params
+  vLine.value = v
+  hLine.value = h
+  dLine.value = d
+  // dLine.value = d;
+}
+
+
+// 自由布局的一些属性
+const dragProps = computed(() => {
+  if (props.propsValues.grid) {
+    return {
+      grid: props.propsValues.grid,
+      gridSize: props.propsValues.gridSize,
+      lockAspectRatio: props.propsValues.lockAspectRatio,
+      isConflictCheck: props.propsValues.preventOverlap,
+      snap: props.propsValues.alignLine,
+      snapTolerance: props.propsValues.gridSize || props.propsValues.snapTolerance,
+      dragLineNum: props.propsValues.dragLineNum
+    }
+  }
+  return {
+    grid: props.propsValues.grid,
+    gridSize: props.propsValues.gridSize,
+    lockAspectRatio: props.propsValues.lockAspectRatio,
+    isConflictCheck: props.propsValues.preventOverlap,
+    snap: props.propsValues.alignLine,
+    snapTolerance: props.propsValues.snapTolerance,
+    dragLineNum: props.propsValues.dragLineNum
+  }
+})
+
+// 自由布局的一些动态样式
+const sectionStyle = computed(() => {
+  const base = {
+    overflow: props.propsValues.overflow
+  }
+  const parent = componentStore.queryComponentParent(props.component.id)
+  if (parent?.componentMetaId === 'section-layout') {
+    base.top = 0
+    base.left = 0
+  }
+  if (!props.propsValues.grid) {
+    return base
+  }
+  const size = props.propsValues.gridSize
+  const str = `linear-gradient(-90deg, var(--theme-border-color) 1px, transparent 1px) 0% 0% / ${size}px ${size}px, linear-gradient(var(--theme-border-color) 1px, transparent 1px) 0% 0% / ${size}px ${size}px`
+  return {
+    ...base,
+    background: str
+  }
+})
+
+// 删除组件
+const onClickDelComponent = (item) => {
+  commands.execute('deleteComponent', item)
+}
+
+onMounted(() => {
+  const { Ctrl } = useMagicKeys()
+  watch(Ctrl, (val) => {
+    isCtrl.value = val
+  })
+})
+
+
+// 组件右键
+const onContextmenuComponent = (e, item) => {
+  // 组合框选右键
+  if (selectActiveComponents.value.length > 1) {
+    useContextmenu(groupBoxContext()).show(i => {
+      i.value(item, props.page)
+    })
+    return
+  }
+  // 组合右键
+  item.click()
+  useContextmenu(useComponentContext(item, props.page)).show((i) => {
+    i.value(item, props.page)
+  })
+}
+
+let isCtrlCreate = false
+// #region 拖拽多选
+const moveMergeBox = () => {
+
+  let prveX = 0
+  let prveY = 0
+  let zoom = 1
+  let left = 0
+  let top = 0
+  let right = 0
+  let bottom = 0
+  let moveComponents = []
+  let minLeft = 0
+  let minTop = 0
+  let maxRight = 0
+  let maxBottom = 0
+  let startX = 0
+  let startY = 0
+  let boundaryX = 0
+  let boundaryY = 0
+  let boundaryWidth = 0
+  let boundaryHeight = 0
+  let startMergeX = 0
+  let startMergeY = 0
+  let startComponents = []
+  let startComponentsPositions = []
+  const onDragMoveMergeBox = (e) => {
+
+
+    const clientX = e.clientX
+    const clientY = e.clientY
+
+    // 唐经理说不要这个功能 ！。。。
+    // if (clientX <= boundaryX || clientY <= boundaryY || clientX >= boundaryX + boundaryWidth || clientY >= boundaryY + boundaryHeight) {
+    //   onDragDropMergeBox(e, true)
+    //   setTimeout(() => {
+    //     if (clientX <= boundaryX) {
+    //       mergeBoxRef.value.position.left = 0
+    //     }
+    //     if (clientY <= boundaryY) {
+    //       mergeBoxRef.value.position.top = 0
+    //     }
+    //     if (clientX >= boundaryX + boundaryWidth) {
+    //       mergeBoxRef.value.position.left = maxRight - mergeBoxRef.value.position.width
+    //     }
+    //     if (clientY >= boundaryY + boundaryHeight) {
+    //       mergeBoxRef.value.position.top = maxBottom - mergeBoxRef.value.position.height
+    //     }
+
+    //   }, 10);
+    //   prveX = boundaryX
+    //   prveY = boundaryY
+    //   return
+    // }
+
+
+    let moveX = (clientX - prveX) / zoom
+    let moveY = (clientY - prveY) / zoom
+
+
+    if (isCtrl.value && !isCtrlCreate && (clientX - startX > 10 || clientY - startY > 10)) {
+      isCtrlCreate = true
+      const data = selectActiveComponents.value.map(item => props.page.generateComponentPreviewData(componentStore.queryComponentDataTreePlat(item)))
+      const parentId = data[0]?.[0]?.parentId
+      commands.execute('component.create', data, parentId || props.component.id, true)
+      return
+    }
+
+    mergeBoxRef.value.position.left += moveX
+    mergeBoxRef.value.position.top += moveY
+
+    // if (mergeBoxRef.value.position.left + mergeBoxRef.value.position.width >= maxRight) {
+    //   mergeBoxRef.value.position.left = maxRight - mergeBoxRef.value.position.width
+    //   moveX = 0
+    // } else if (mergeBoxRef.value.position.left <= 0) {
+    //   mergeBoxRef.value.position.left = 0
+    //   moveX = 0
+    // }
+
+    // if (mergeBoxRef.value.position.top + mergeBoxRef.value.position.height >= maxBottom) {
+    //   mergeBoxRef.value.position.top = maxBottom - mergeBoxRef.value.position.height
+    //   moveY = 0
+    // } else if (mergeBoxRef.value.position.top <= 0) {
+    //   mergeBoxRef.value.position.top = 0
+    //   moveY = 0
+    // }
+
+    prveX = clientX
+    prveY = clientY
+
+    for (const item of moveComponents) {
+      item.position.x += moveX
+      item.position.y += moveY
+    }
+
+  }
+  const onDragDropMergeBox = (e, isBeyond = false) => {
+    document.removeEventListener('mousemove', onDragMoveMergeBox)
+    // if (!isBeyond) {
+    //   return
+    // }
+    // moveComponents.forEach(item=>{
+    //   item.position.x = startComponents[item.id].left + mergeBoxRef.value.position.left
+    //   item.position.y = startComponents[item.id].top + mergeBoxRef.value.position.top
+    // })
+    // moveComponents = []
+    isCtrlCreate = false
+    if (!startComponentsPositions.length) {
+      return
+    }
+    historyStackModel.push({
+      actionType: historyStackModel.actionType.MoveComponent,
+      label: '移动组件位置',
+      changes: moveComponents.map((item, index) => ({
+        id: item.id,
+        oldValue: startComponentsPositions[index],
+        value: { ...item.position },
+        prop: 'position'
+      }))
+    })
+    startComponentsPositions = []
+
+  }
+
+  return (e) => {
+    if (e?.target.className === 'ibsp-section-merge-box' && e.button === 0) {
+      onMousedownSection(e)
+      componentChildren.value.forEach(item => {
+        item.selectActive = false
+      })
+      return
+    }
+    if (componentStore.activeComponent?.active) {
+      componentStore.activeComponent.active = false
+    }
+    prveX = e.clientX
+    prveY = e.clientY
+    startX = prveX
+    startY = prveY
+    startMergeX = mergeBoxRef.value.position.left
+    startMergeY = mergeBoxRef.value.position.top
+    zoom = props.page.canvasZoom
+    const rect = props.component.boundingClientRect
+    left = rect.left
+    top = rect.top
+    right = rect.right
+    bottom = rect.bottom
+    maxRight = rect.width / zoom
+    maxBottom = rect.height / zoom
+    boundaryX = rect.left
+    boundaryY = rect.top
+    boundaryWidth = rect.width
+    boundaryHeight = rect.height
+
+    moveComponents = selectActiveComponents.value.flatMap(item => componentStore.queryComponentDataTreePlat(item))
+
+    // startComponents = moveComponents.reduce((acc, item)=>{
+    //   acc[item.id] = {
+    //     left: item.position.x - startMergeX,
+    //     top: item.position.y - startMergeY,
+    //   }
+    //   return acc
+    // }, {})
+    startComponentsPositions = moveComponents.map(item => ({ ...item.position }))
+    document.addEventListener('mousemove', onDragMoveMergeBox)
+    document.addEventListener('mouseup', onDragDropMergeBox)
+  }
+
+}
+const onMousedownMergeBox = moveMergeBox()
+// document.addEventListener('mousedown', (e:MouseEvent)=>{
+//   //
+// })
+// #endregion
+
+
+commands.register('group.create', onGroupBox)
+commands.register('group.remove.drag', removeDragGroup)
+commands.register('group.mark.close', mergerBoxClose)
+const sectionMethods = {
+  parentSectionMousedown,
+  onDragDropBox,
+  onGroupBox,
+  mergerBoxClose,
+  onMousedownSection,
+  createCopyComponents
+}
+
+// ///////---------------------------------------------------------////////
+const onComponentDragEnd = (item, dragData) => {
+  // 如果按住ctrl就复制组件
+  const { left, top } = dragData
+  const x = Math.round(left)
+  const y = Math.round(top)
+  if (isDragCtrl) {
+    createCopyComponents(item, x, y)
+    isDragCtrl = false
+  } else {
+    item.position.x = x;
+    item.position.y = y;
+  }
+  emitGlobalEvent('nodeChangePosition', item)
+}
+
+const onClickComponentMark = (e, item) => {
+  // item.click(item)
+  // console.log('onClickComponentMark');
+
+}
+
+let selectActiveList = []
+const onMousedownComponentMark = (e, item) => {
+  if (e.button === 0) {
+    item.click(item)
+    // 如果按住ctrl后，选择大于2个就触发框选
+    if (isCtrl.value) {
+      item.selectActive = !item.selectActive
+      if (componentChildren.value.filter(item => item.selectActive)?.length >= 2) {
+        onDragDropBox()
+      } else {
+        // 否则关闭框选
+        mergeBoxRef.value.close()
+      }
+    } else {
+      // 没有ctrl就清除所有选择状态
+      componentChildren.value.forEach(child => {
+        child.selectActive = false
+      })
+      item.selectActive = true
+    }
+  }
+}
+
+const onClickMergeBox = (e, item) => {
+  console.log('onClickMergeBox');
+  if (e.button === 0) {
+    if (isCtrl.value) {
+      if (item.selectActive) {
+        item.selectActive = false
+      }
+      if (componentChildren.value.filter(item => item.selectActive)?.length >= 2) {
+        onDragDropBox()
+      } else {
+        // 否则关闭框选
+        mergeBoxRef.value.close()
+      }
+    } else {
+      // 没有ctrl就清除所有选择状态
+      componentChildren.value.forEach(child => {
+        child.selectActive = false
+      })
+      mergeBoxRef.value.close()
+      item.selectActive = true
+      setTimeout(() => {
+        item.click(item)
+      }, 10);
+    }
+
+  }
+}
+const onMousedownMergerComponent = (e, item) => {
+}
+
+const onContextmenuComponentMark = (item) => {
+  item.click(item)
+  useContextmenu(useComponentContext(item, props.page)).show((i) => {
+    i.value?.(item, props.page)
+  })
+}
+
+
+</script>
+
+<template>
+  <section :id="component.id" :style="{
+    ...component.getComponentStyles(),
+    ...sectionStyle
+  }" class="section-layout" :class="{
+      'active': component.active
+    }" @dragenter.stop="null" @dragleave.stop="null" @dragover.prevent="() => { }" @drop.stop.prevent="onDrop"
+    @click.stop="onClickSection" data-type="section" @mousedown.prevent="onMousedownSection">
+    <template v-for="(item) in componentChildren" :key="item.id">
+      <template v-if="item.componentMetaId === 'section-layout-group'">
+        <ComponentMiddleware :component="item" :page="page" :style="{
+          position: 'absolute',
+          userSelect: 'none',
+          top: 0,
+          left: 0
+        }" v-show="item.show" :dragProps="dragProps" :disableClick="true" :selected="true" :isCtrl="isCtrl"
+          :sectionMethods="sectionMethods" @refLineChange="getRefLineParams" />
+      </template>
+      <DragNode v-else :w="item.position.w" :x="item.position.x" :y="item.position.y" :h="item.position.h"
+        :zoom="page.canvasZoom" :parentSelected="true" :parent="true" :selected="true" :use-resize="item.active"
+        :useDistance="dragProps.dragLineNum" :snapTolerance="dragProps.snapTolerance" :useGrid="dragProps.grid"
+        :grid-h="dragProps.gridSize" :grid-w="dragProps.gridSize" :useRefLine="dragProps.snap" v-show="item.show"
+        :class="{
+          'ibsp-section-drag-node': true,
+          'ibsp-section-drag-item': true,
+          'active': item.active,
+          'select-active': item.selectActive
+        }" @dragEnd="(dragData) => {
+            onComponentDragEnd(item, dragData);
+          }
+          " @drag="(dragData, dragDom) => onComponentsDragging(item, dragData, dragDom)" @refLineChange="getRefLineParams"
+        @resize="(sizeData) => onComponentsResizing(item, sizeData)" @resize-end="onComponentsResinEnd(item)"
+        @resize-start="onComponentsResizingStart(item)">
+        <div class="component-tools" v-show="item.active" :style="{
+          fontSize: 12 / page.canvasZoom + 'px'
+        }" draggable="false">
+          <span class="name">{{ item.name }}</span>
+          <el-icon @click="onClickDelComponent(item)">
+            <Delete />
+          </el-icon>
+        </div>
+        <ComponentMiddleware :component="item" :page="page" :style="{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          userSelect: 'none',
+          top: 0,
+          left: 0
+        }" :disableContextMenu="true" :onDragDropBox="onDragDropBox" :isCtrl="isCtrl" :disableClick="true"
+          :parentPropsValues="propsValues" :sectionInstance="sectionInstance" @refLineChange="getRefLineParams" />
+        <i class="section-component-mark" @click.stop="(e) => onClickComponentMark(e, item)"
+          @mousedown="(e) => onMousedownComponentMark(e, item)" @refLineChange="getRefLineParams"
+          @contextmenu.stop.prevent="onContextmenuComponentMark(item)" data-type="component-mark" :style="{
+            width: item.position.w + 'px',
+            height: item.position.h + 'px',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: item.dialog ? 200 : item.position.z + 1
+          }" />
+      </DragNode>
+
+    </template>
+    <!--辅助线-->
+    <span v-for="(item, i) in vLine" :key="i"
+      :style="{ left: item.left + 'px', top: item.top + 'px', height: item.len + 'px' }" class="ref-line v-line">
+    </span>
+    <span v-for="(item, i) in hLine" :key="i"
+      :style="{ top: item.top + 'px', left: item.left + 'px', width: item.len + 'px' }" class="ref-line h-line">
+    </span>
+    <template v-if="dLine">
+      <span v-if="dLine.x"
+        :style="{ top: dLine.x.top + 'px', left: dLine.x.left + 'px', width: dLine.x.len + 'px', background: 'red' }"
+        class="ref-line h-line num-h-line" v-show="dLine.x.len > 0">
+        <span class="line-h-num" :style="{
+          fontSize: 14 / page.canvasZoom + 'px',
+        }">
+          {{ dLine.x.len }}
+        </span>
+      </span>
+      <span v-if="dLine.y"
+        :style="{ top: dLine.y.top + 'px', left: dLine.y.left + 'px', height: dLine.y.len + 'px', background: 'red' }"
+        class="ref-line v-line num-v-line" v-show="dLine.y.len > 0">
+        <span class="line-v-num" :style="{
+          fontSize: 14 / page.canvasZoom + 'px',
+        }">
+          {{ dLine.y.len }}
+        </span>
+      </span>
+    </template>
+    <!--辅助线END-->
+    <MergeBox ref="mergeBoxRef" :component="component" @dargStart="onDragStartBox" @group="onGroupBox"
+      @darg-drop="() => onDragDropBox()" :zoom="page.canvasZoom" :page="page" :isCtrl="isCtrl" @click="onClickMergeBox"
+      @onMouseDownComponent="onMousedownMergerComponent" @mousedown.stop="onMousedownMergeBox"
+      :selectComponents="componentStore.selections" @darg-move="onDragMoveBox" />
+  </section>
+</template>
+
+<style lang="less" scoped>
+.section-layout {
+  flex: 1;
+  padding: var(--container-padding) !important;
+  outline-style: dashed;
+  outline-width: var(--container-border-width);
+  gap: var(--container-padding);
+  position: relative;
+  outline-color: #848282;
+
+  * {
+    user-select: none;
+  }
+
+  :deep(*) {
+    user-select: none;
+  }
+
+  .ibsp-section-drag-item {
+    cursor: move;
+  }
+
+  .active {
+    outline: 1px solid var(--theme-gl-bg);
+  }
+
+  .ref-line {
+    user-select: none;
+
+    &.num-h-line {
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        top: -4px;
+        width: 1px;
+        height: 9px;
+        background: #ff0000;
+      }
+
+      &::after {
+        right: 0;
+      }
+
+      &::before {
+        left: 0;
+      }
+    }
+
+    &.num-v-line {
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        left: -4px;
+        width: 9px;
+        height: 1px;
+        background: #ff0000;
+      }
+
+      &::after {
+        bottom: 0;
+      }
+
+      &::before {
+        top: 0;
+      }
+    }
+  }
+
+  :deep(.component-tools),
+  :deep(.group-tools) {
+    background-color: var(--theme-gl-bg);
+    color: var(--theme-gl-color);
+    padding: 2px 5px;
+    position: absolute;
+    transform: translateY(-100%);
+    left: -1px;
+    width: max-content;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    z-index: -1;
+    border-radius: 2px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    cursor: move;
+    // 禁止拖拽
+
+    .el-icon {
+      margin-left: 5px;
+      cursor: pointer;
+    }
+
+  }
+
+
+  :deep(>.layout-container) {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+  }
+
+  :deep(.ibsp-section-drag-item) {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .component-mark {
+      position: absolute;
+      top: 0;
+      left: 0;
+      ;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      cursor: move;
+    }
+
+
+    &.ibsp-section-drag-item-active {
+      outline: 1px solid var(--theme-gl-bg);
+    }
+
+    &.section-dragging {
+
+      cursor: grabbing !important;
+
+      .component-mark,
+      .section-layout-group {
+        cursor: grabbing !important;
+      }
+
+    }
+
+    &.group-drag-item {
+      pointer-events: none;
+
+      >.section-layout-group {
+        pointer-events: none;
+
+        >* {
+          pointer-events: all;
+        }
+      }
+    }
+
+    &.select-active {
+      border: 1px solid var(--theme-gl-bg) !important;
+
+    }
+
+    &:not(.active, .active-group) {
+      &.select-active {
+        border: 2px solid var(--theme-gl-bg) !important;
+      }
+
+    }
+
+    &.active-group {
+      outline: 1px solid var(--theme-gl-bg);
+      pointer-events: none;
+
+      >.section-layout-group {
+        pointer-events: none;
+
+        >* {
+          pointer-events: all;
+        }
+      }
+
+    }
+  }
+
+  &.active {
+    // border: 1px solid var(--theme-gl-bg);
+    // border-color: var(--theme-gl-bg) !important;
+    outline: 2px solid #F77234;
+    gap: var(--container-padding);
+    z-index: 9;
+
+    &.is-hover {
+      outline-color: #F77234;
+      outline-width: 2px;
+      outline-style: solid;
+      z-index: 10;
+    }
+  }
+}
+</style>
+<style>
+.next-ui-drag-box {
+  cursor: grabbing;
+}
+
+.vdr {
+  touch-action: none;
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed #d6d6d6;
+}
+
+.handle {
+  box-sizing: border-box;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #ffffff;
+  border: 1px solid var(--theme-gl-bg);
+  box-shadow: 0 0 2px var(--theme-gl-bg);
+  border-radius: 2px;
+}
+
+.handle-tl {
+  top: -5px;
+  left: -5px;
+  cursor: nw-resize;
+}
+
+.handle-tm {
+  top: -5px;
+  left: calc(50% - 4px);
+  /*margin-left: -5px;*/
+  cursor: n-resize;
+}
+
+.handle-tr {
+  top: -5px;
+  right: -5px;
+  cursor: ne-resize;
+}
+
+.handle-ml {
+  top: calc(50% - 4px);
+  /*margin-top: -5px;*/
+  left: -5px;
+  cursor: w-resize;
+}
+
+.handle-mr {
+  top: calc(50% - 4px);
+  /*margin-top: -5px;*/
+  right: -5px;
+  cursor: e-resize;
+}
+
+.handle-bl {
+  bottom: -5px;
+  left: -5px;
+  cursor: sw-resize;
+}
+
+.handle-bm {
+  bottom: -5px;
+  left: calc(50% - 4px);
+  /*margin-left: -5px;*/
+  cursor: s-resize;
+}
+
+.handle-br {
+  bottom: -5px;
+  right: -5px;
+  cursor: se-resize;
+}
+
+/*旋转handle*/
+.handle-rot {
+  top: 0;
+  left: 50%;
+  margin-top: -20px;
+  margin-left: -1px;
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  cursor: grab;
+  transform: translate(-50%, 0);
+}
+
+.handle-rot:before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  width: 0;
+  height: 7px;
+  border-left: 1px solid #000000;
+  transform: translate(-50%, 0);
+}
+
+.ref-line {
+  position: absolute;
+  background-color: var(--theme-gl-bg);
+  z-index: 9999;
+
+}
+
+.ref-line .line-h-num {
+  color: var(--theme-font-color);
+  display: block;
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.ref-line .line-v-num {
+  color: var(--theme-font-color);
+  display: block;
+  position: absolute;
+  top: 50%;
+  ;
+  left: -10px;
+  ;
+  transform: translateY(-50%);
+}
+
+.v-line {
+  width: 1px;
+
+}
+
+.h-line {
+  height: 1px;
+}
+
+@media only screen and (max-width: 768px) {
+  [class*="handle-"]:before {
+    content: '';
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    top: -10px;
+    position: absolute;
+  }
+}
+</style>