diff --git a/packages/canvas/src/components/container/CanvasAction.vue b/packages/canvas/src/components/container/CanvasAction.vue
index 17f3c666e1..5008e1c468 100644
--- a/packages/canvas/src/components/container/CanvasAction.vue
+++ b/packages/canvas/src/components/container/CanvasAction.vue
@@ -36,7 +36,7 @@
       <div class="drag-resize resize-bottom-left" @mousedown.stop="onMousedown($event, 'start', 'end')"></div>
       <div class="drag-resize resize-bottom-right" @mousedown.stop="onMousedown($event, 'end', 'end')"></div>
     </template>
-    <div v-if="showAction" class="corner-mark-right" :style="fixStyle">
+    <div v-if="showAction" ref="optionRef" class="corner-mark-right" :style="fixStyle">
       <template v-if="!isModal">
         <div v-if="showToParent" title="选择父级">
           <icon-chevron-left @click.stop="selectParent"></icon-chevron-left>
@@ -74,7 +74,7 @@
   </div>
 </template>
 <script>
-import { watchPostEffect, ref, watch, computed } from 'vue'
+import { watchPostEffect, ref, watch, computed, nextTick } from 'vue'
 import {
   IconDel,
   IconSetting,
@@ -95,7 +95,7 @@ import {
   dragStart,
   getCurrentElement
 } from './container'
-import { useResource } from '@opentiny/tiny-engine-controller'
+import { useLayout, useResource } from '@opentiny/tiny-engine-controller'
 import { Popover } from '@opentiny/vue'
 import shortCutPopover from './shortCutPopover.vue'
 
@@ -103,8 +103,6 @@ import shortCutPopover from './shortCutPopover.vue'
 const OPTION_BAR_HEIGHT = 24
 // 标签高度
 const LABEL_HEIGHT = 24
-// 操作条最大宽度
-const MAX_OPTION_WIDTH = 110
 
 // 画布右边滚动条宽度
 const SCROLL_BAR_WIDTH = 8
@@ -112,6 +110,11 @@ const SCROLL_BAR_WIDTH = 8
 // 当工具操作条和标签高度并排显示时，需要的间距 6px
 const OPTION_SPACE = 6
 
+// 选中框的边框宽度
+const SELECTION_BORDER_WIDTH = 2
+
+const STYLE_UNSET = 'unset'
+
 export default {
   components: {
     IconDel: IconDel(),
@@ -204,6 +207,7 @@ export default {
       return config?.configure?.isModal
     })
 
+    const optionRef = ref(null)
     const fixStyle = ref('')
 
     let showPopover = ref(false)
@@ -265,45 +269,188 @@ export default {
     const labelRef = ref(null)
     const labelStyle = ref('')
 
-    const bottomPanelHeight = ref(0)
-    const topToolbarHeight = ref(0)
+    const positions = {
+      LEFT: 'left',
+      RIGHT: 'right',
+      TOP: 'top',
+      BOTTOM: 'bottom',
+      isHorizontal(position) {
+        return [this.LEFT, this.RIGHT].includes(position)
+      },
+      isVertical(position) {
+        return [this.TOP, this.BOTTOM].includes(position)
+      }
+    }
+
+    class Align {
+      alignLeft = false
+      horizontalValue = 0
+      alignTop = false
+      verticalValue = 0
+
+      constructor({ alignLeft, horizontalValue, alignTop, verticalValue }) {
+        this.alignLeft = alignLeft
+        this.horizontalValue = horizontalValue
+        this.alignTop = alignTop
+        this.verticalValue = verticalValue
+      }
+
+      align(position, value = 0) {
+        if (positions.isHorizontal(position)) {
+          this.alignLeft = position === positions.LEFT
+          this.horizontalValue = value
+          return this
+        }
+        if (positions.isVertical(position)) {
+          this.alignTop = position === positions.TOP
+          this.horizontalValue = value
+          return this
+        }
+        return this
+      }
+
+      toStyleValue() {
+        const styleObj = {}
+
+        if (this.alignLeft) {
+          styleObj.left = this.horizontalValue
+          styleObj.right = STYLE_UNSET
+        } else {
+          styleObj.right = this.horizontalValue
+          styleObj.left = STYLE_UNSET
+        }
+
+        if (this.alignTop) {
+          styleObj.top = this.verticalValue
+          styleObj.bottom = STYLE_UNSET
+        } else {
+          styleObj.bottom = this.verticalValue
+          styleObj.top = STYLE_UNSET
+        }
 
-    watchPostEffect(() => {
-      if (!bottomPanelHeight.value) {
-        bottomPanelHeight.value = document.querySelector('#tiny-bottom-panel')?.offsetHeight
+        return this.styleObj2Str(styleObj)
       }
-      if (!topToolbarHeight.value) {
-        topToolbarHeight.value = document.querySelector('.tiny-engine-toolbar')?.offsetHeight
+
+      styleObj2Str = (styleObj) => {
+        return Object.entries(styleObj)
+          .map(([key, value]) => {
+            const num = Number(value)
+
+            if (Number.isNaN(num)) {
+              return `${key}:${value}`
+            }
+
+            const val = positions.isHorizontal(key) ? num - SELECTION_BORDER_WIDTH : num
+            return `${key}:${val}px`
+          })
+          .join(';')
       }
+    }
 
-      const { left, top, width, height } = props.selectState
+    const getStyleValues = (selectState, siteCanvasWidth, siteCanvasHeight) => {
+      const { left, top, width, height, doc } = selectState
+      const labelRect = labelRef.value.getBoundingClientRect()
+      const optionRect = optionRef.value.getBoundingClientRect()
+      // 标签宽度和工具操作条宽度之和加上间距
+      const fullRectWidth = labelRect.width + optionRect.width + OPTION_SPACE
 
       // 是否 将label 标签放置到底部，判断 top 距离
-      const isLabelAtBottom = top <= topToolbarHeight.value + LABEL_HEIGHT
+      const isLabelAtBottom = top <= LABEL_HEIGHT
+      const labelAlign = new Align({
+        alignLeft: true,
+        horizontalValue: 0,
+        alignTop: !isLabelAtBottom,
+        verticalValue: -LABEL_HEIGHT
+      })
+
       // 是否将操作栏放置到底部，判断当前选中组件底部与页面底部的距离。
-      const isOptionAtBottom = window.innerHeight - top - height - bottomPanelHeight.value > OPTION_BAR_HEIGHT
+      const isOptionAtBottom = siteCanvasHeight - top - height > OPTION_BAR_HEIGHT
+      const optionAlign = new Align({
+        alignLeft: false,
+        horizontalValue: 0,
+        alignTop: !isOptionAtBottom,
+        verticalValue: -OPTION_BAR_HEIGHT
+      })
+
+      const scrollBarWidth = doc.documentElement.scrollHeight > doc.documentElement.clientHeight ? SCROLL_BAR_WIDTH : 0
 
-      // 选中组件需要最小的宽度，如果小于这个最小宽度，label 和 option 组件可能会重叠遮挡，labelRef.value.clientWidth：label 的宽度
-      const minWidth = MAX_OPTION_WIDTH + labelRef.value?.clientWidth || 0
-      let translateXDis = 0
+      if (width < fullRectWidth) {
+        // 选中框宽度小于标签宽度和工具操作条宽度之和加上间距
 
-      const siteCanvas = document.querySelector('.site-canvas')
-      const right = siteCanvas.getBoundingClientRect().right
-      // 判断是否偏右，偏右且重叠的话，需要移动 label 的位移，不能移动 option 的位移，否则有可能被遮挡
-      const isOverRight = right <= left + width + SCROLL_BAR_WIDTH
+        // 如果labe宽度大于选中框宽度，并且label右侧已经超出画布，则label对齐右侧
+        const isLabelAlignRight = labelRect.width > width && left + labelRect.width + scrollBarWidth > siteCanvasWidth
+        if (isLabelAlignRight) {
+          labelAlign.align(positions.RIGHT)
+        }
 
-      // 如果选中组件宽度小于最小宽度要求，则需要位移
-      if (width < minWidth) {
-        translateXDis = MAX_OPTION_WIDTH - width + (labelRef.value?.clientWidth || 0) + OPTION_SPACE
+        // 如果option宽度大于选中框宽度，并且option左侧已经超出画布，则option对齐左侧
+        const isOptionAlignLeft = optionRect.width > width && left + width - optionRect.width < 0
+        if (isOptionAlignLeft) {
+          optionAlign.align(positions.LEFT)
+        }
+
+        if (isLabelAtBottom === isOptionAtBottom) {
+          // 标签框和工具操作框都在顶部或者都在底部
+
+          if (left + fullRectWidth < siteCanvasWidth) {
+            // 都放在左侧
+            labelAlign.align(positions.LEFT)
+            optionAlign.align(positions.LEFT, labelRect.width + OPTION_SPACE)
+          } else {
+            // 都放在右侧
+            optionAlign.align(positions.RIGHT)
+            labelAlign.align(positions.RIGHT, optionRect.width + OPTION_SPACE)
+          }
+        }
+      } else {
+        if (left < 0) {
+          labelAlign.align(positions.LEFT, Math.min(-left, width - fullRectWidth))
+        }
+
+        if (left + width + scrollBarWidth > siteCanvasWidth) {
+          optionAlign.align(
+            positions.RIGHT,
+            Math.min(left + width + scrollBarWidth - siteCanvasWidth, width - fullRectWidth)
+          )
+        }
+      }
+
+      return {
+        labelStyleValue: labelAlign.toStyleValue(),
+        optionStyleValue: optionAlign.toStyleValue()
       }
+    }
+
+    watchPostEffect(async () => {
+      let { left } = props.selectState
+      const { top, width, height, doc } = props.selectState
 
-      labelStyle.value = `top: unset; ${isLabelAtBottom ? 'bottom' : 'top'}: -${LABEL_HEIGHT}px; ${
-        isOverRight && isLabelAtBottom === isOptionAtBottom && `left: -${translateXDis}px;`
-      }`
+      // nextTick后ref才能获取到元素。需要把监听的依赖放在await之前，否则无法监听变化
+      await nextTick()
 
-      fixStyle.value = `
-        ${translateXDis && !isOverRight ? `transform: translateX(${translateXDis}px);` : ''}
-        ${isOptionAtBottom ? 'bottom' : 'top'}: -${OPTION_BAR_HEIGHT}px;`
+      if (labelRef.value && !optionRef.value) {
+        // 选中body的情况
+        labelStyle.value = `left: 0; right: unset; top: unset; bottom: 0`
+        return
+      }
+
+      if (!labelRef.value || !optionRef.value) {
+        return
+      }
+
+      const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
+      const scale = useLayout().getScale()
+
+      left -= ((1 - scale) / 2) * siteCanvasRect.width
+
+      const { labelStyleValue, optionStyleValue } = getStyleValues(
+        { left, top, width, height, doc },
+        siteCanvasRect.width * scale,
+        siteCanvasRect.height
+      )
+
+      labelStyle.value = labelStyleValue
+      fixStyle.value = optionStyleValue
     })
 
     return {
@@ -313,6 +460,7 @@ export default {
       copy,
       hide,
       selectParent,
+      optionRef,
       fixStyle,
       showAction,
       showPopover,
@@ -329,7 +477,7 @@ export default {
 
 <style lang="less">
 .canvas-rect {
-  position: fixed;
+  position: absolute;
   box-sizing: border-box;
   pointer-events: none;
   border: 1px solid var(--ti-lowcode-canvas-rect-border-color);
@@ -454,7 +602,6 @@ export default {
     display: flex;
     align-items: center;
     position: absolute;
-    right: -1px;
     height: 24px;
     padding: 0 4px;
     color: var(--ti-lowcode-canvas-corner-mark-right-color);
@@ -479,7 +626,6 @@ export default {
     .corner-mark-left {
       white-space: nowrap;
       pointer-events: all;
-      left: -2px;
       color: var(--ti-lowcode-canvas-select-corner-mark-left-color);
       background: var(--ti-lowcode-canvas-select-corner-mark-left-bg-color);
       svg {
diff --git a/packages/canvas/src/components/container/CanvasContainer.vue b/packages/canvas/src/components/container/CanvasContainer.vue
index 626887f4fc..46d290b81a 100644
--- a/packages/canvas/src/components/container/CanvasContainer.vue
+++ b/packages/canvas/src/components/container/CanvasContainer.vue
@@ -123,8 +123,30 @@ export default {
         const doc = iframe.value.contentDocument
         const win = iframe.value.contentWindow
 
+        let isScrolling = false
+
         // 以下是内部iframe监听的事件
         win.addEventListener('mousedown', (event) => {
+          // html元素使用scroll和mouseup事件处理
+          if (event.target === doc.documentElement) {
+            isScrolling = false
+            return
+          }
+
+          insertPosition.value = false
+          setCurrentNode(event)
+          target.value = event.target
+        })
+
+        win.addEventListener('scroll', () => {
+          isScrolling = true
+        })
+
+        win.addEventListener('mouseup', (event) => {
+          if (event.target !== doc.documentElement || isScrolling) {
+            return
+          }
+
           insertPosition.value = false
           setCurrentNode(event)
           target.value = event.target
@@ -194,7 +216,9 @@ export default {
 
     onMounted(() => run(iframe))
     onUnmounted(() => {
-      removeHostkeyEvent(iframe.value.contentDocument)
+      if (iframe.value?.contentDocument) {
+        removeHostkeyEvent(iframe.value.contentDocument)
+      }
       window.removeEventListener('message', updateI18n, false)
     })
 
diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
index e946ad5bb5..a2d43fe245 100644
--- a/packages/canvas/src/components/container/container.js
+++ b/packages/canvas/src/components/container/container.js
@@ -51,6 +51,28 @@ export const canvasState = shallowReactive({
   loopId: null
 })
 
+export const getRenderer = () => canvasState.renderer
+
+export const getController = () => canvasState.controller
+
+export const getDocument = () => canvasState.iframe.contentDocument
+
+export const getWindow = () => canvasState.iframe.contentWindow
+
+export const getCurrent = () => {
+  return {
+    schema: canvasState.current,
+    parent: canvasState.parent,
+    loopId: canvasState.loopId
+  }
+}
+
+export const getGlobalState = () => getRenderer().getGlobalState()
+
+export const getNode = (id, parent) => getRenderer()?.getNode(id, parent)
+
+export const getSchema = () => getRenderer()?.getSchema()
+
 export const getContext = () => {
   return getRenderer().getContext()
 }
@@ -77,7 +99,8 @@ const initialLineState = {
   left: 0,
   position: '',
   id: '',
-  config: null
+  config: null,
+  doc: null
 }
 
 // 选中画布中元素时的状态
@@ -95,6 +118,43 @@ export const lineState = reactive({
   ...initialLineState
 })
 
+export const clearHover = () => {
+  Object.assign(hoverState, initialRectState, { slot: null })
+}
+
+export const clearSelect = () => {
+  canvasState.current = null
+  canvasState.parent = null
+  Object.assign(selectState, initialRectState)
+  // 临时借用 remote 事件出发 currentSchema 更新
+  canvasState?.emit?.('remove')
+}
+
+const smoothScroll = {
+  timmer: null,
+  /**
+   *
+   * @param {*} up 方向
+   * @param {*} step 每次滚动距离
+   * @param {*} time 滚动延时（不得大于系统滚动时长，否则可能出现卡顿效果）
+   */
+  start(up, step = 40, time = 100) {
+    const dom = getDocument().documentElement
+    const fn = () => {
+      const top = up ? dom.scrollTop + step : dom.scrollTop - step
+
+      dom.scrollTo({ top, behavior: 'smooth' })
+      this.timmer = setTimeout(fn, time)
+    }
+
+    this.timmer || fn()
+  },
+  stop() {
+    clearTimeout(this.timmer)
+    this.timmer = null
+  }
+}
+
 export const dragStart = (
   data,
   element,
@@ -146,6 +206,12 @@ export const getElement = (element) => {
   if (element === element.ownerDocument.body) {
     return element
   }
+
+  // 如果当前元素是画布的html，返回画布的body
+  if (element === element.ownerDocument.documentElement) {
+    return element.ownerDocument.body
+  }
+
   if (!element || element.nodeType !== 1) {
     return undefined
   }
@@ -159,6 +225,23 @@ export const getElement = (element) => {
   return undefined
 }
 
+const getRect = (element) => {
+  if (element === getDocument().body) {
+    const { innerWidth: width, innerHeight: height } = getWindow()
+    return {
+      left: 0,
+      top: 0,
+      right: width,
+      bottom: height,
+      width,
+      height,
+      x: 0,
+      y: 0
+    }
+  }
+  return element.getBoundingClientRect()
+}
+
 const inserAfter = ({ parent, node, data }) => {
   const parentChildren = parent.children
   const index = parentChildren.indexOf(node)
@@ -215,110 +298,221 @@ export const removeNodeById = (id) => {
   canvasState.emit('remove')
 }
 
-export const insertNode = (node, position = POSITION.IN, select = true) => {
-  if (!node.parent) {
-    insertInner({ node: canvasState.schema, data: node.data }, position)
-  } else {
-    switch (position) {
-      case POSITION.TOP:
-      case POSITION.LEFT:
-        insertBefore(node)
-        break
-      case POSITION.BOTTOM:
-      case POSITION.RIGHT:
-        inserAfter(node)
-        break
-      case POSITION.IN:
-        insertInner(node)
-        break
-      default:
-        insertInner(node)
-        break
+export const querySelectById = (id) => {
+  let selector = `[${NODE_UID}="${id}"]`
+  const doc = canvasState.iframe.contentDocument
+  let element = doc.querySelector(selector)
+  const loopId = element?.getAttribute('loop-id')
+  if (element && loopId) {
+    const currentLoopId = getCurrent().loopId
+    selector = `[${NODE_UID}="${id}"][${NODE_LOOP}="${currentLoopId}"]`
+    element = doc.querySelector(selector)
+  }
+  return element
+}
+
+export const getCurrentElement = () => querySelectById(getCurrent().schema?.id)
+
+// 滚动页面后，目标元素与页面边界至少保留的边距
+const SCROLL_MARGIN = 15
+
+export const scrollToNode = (element) => {
+  if (element) {
+    const container = getDocument().documentElement
+    const { clientWidth, clientHeight } = container
+    const { x, y, width, height } = element.getBoundingClientRect()
+    const option = {}
+
+    if (x < 0) {
+      option.left = container.scrollLeft + x - SCROLL_MARGIN
+    } else if (x > clientWidth) {
+      option.left = x + width - clientWidth + SCROLL_MARGIN
+    }
+
+    if (y < 0) {
+      option.top = container.scrollTop + y - SCROLL_MARGIN
+    } else if (y > clientHeight) {
+      option.top = y + height - clientHeight + SCROLL_MARGIN
+    }
+
+    if (typeof option.left === 'number' || typeof option.top === 'number') {
+      container.scrollTo(option)
     }
   }
 
-  select && setTimeout(() => selectNode(node.data.id))
+  return nextTick()
+}
+const setSelectRect = (element) => {
+  element = element || getDocument().body
 
-  getController().addHistory()
+  const { left, height, top, width } = getRect(element)
+  const { x, y } = getOffset(element)
+  const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
+  const componentName = getCurrent().schema?.componentName || ''
+  const scale = useLayout().getScale()
+  clearHover()
+  Object.assign(selectState, {
+    width: width * scale,
+    height: height * scale,
+    top: top * scale + y - siteCanvasRect.y,
+    left: left * scale + x - siteCanvasRect.x,
+    componentName,
+    doc: getDocument()
+  })
 }
 
-export const addComponent = (data, position) => {
-  const { schema, parent } = getCurrent()
+export const updateRect = (id) => {
+  id = (typeof id === 'string' && id) || getCurrent().schema?.id
+  clearHover()
 
-  insertNode({ node: schema, parent, data }, position)
+  if (id) {
+    setTimeout(() => setSelectRect(querySelectById(id)))
+  } else {
+    // 如果选中的是body，不清除选中框
+    if (!selectState.componentName && selectState.width > 0) {
+      return
+    }
+    clearSelect()
+  }
 }
 
-export const copyNode = (id) => {
-  if (!id) {
-    return
+export const getConfigure = (targetName) => {
+  const material = getController().getMaterial(targetName)
+
+  // 这里如果是区块插槽，则返回标识为容器的对象
+  if (targetName === 'Template') {
+    return {
+      isContainer: true
+    }
   }
-  const { node, parent } = getNode(id, true)
 
-  inserAfter({ parent, node, data: copyObject(node) })
-  getController().addHistory()
+  return material?.content?.configure || material.configure || {}
 }
 
-export const onMouseUp = ({ target }) => {
-  const { draging, data } = dragState
-  const { position } = lineState
-  const absolute = canvasState.type === 'absolute'
-  const sourceId = data?.id
-  const lineId = lineState.id
-  const allowInsert = position !== POSITION.FORBID
+/**
+ * 是否允许插入
+ * @param {*} configure 当前放置目标的 configure，比如getConfigure(componentName)
+ * @param {*} data 当前插入目标的schame数据
+ * @returns
+ */
+export const allowInsert = (configure = hoverState.configure || {}, data = dragState.data || {}) => {
+  const { nestingRule = {} } = configure
+  const { childWhitelist = [], descendantBlacklist = [] } = nestingRule
 
-  if (draging && allowInsert) {
-    const { parent, node } = getNode(lineId, true) || {} // target
-    const targetNode = { parent, node, data: toRaw(data) }
+  // 要插入的父节点必须是容器
+  if (!configure.isContainer) {
+    return false
+  }
 
-    if (sourceId) {
-      // 内部拖拽
-      if (sourceId !== lineId && !absolute) {
-        removeNode(getNode(sourceId, true))
-        insertNode(targetNode, position)
-      }
-    } else {
-      // 从外部拖拽进来的无ID，insert
-      if (absolute) {
-        targetNode.node = getSchema()
-        data.props = data.props || {}
-        data.props.style = {
-          position: 'absolute',
-          top: dragState.mouse.y + 'px',
-          left: dragState.mouse.x + 'px'
-        }
-      }
+  let flag = true
+  // 白名单
+  flag = childWhitelist.length ? childWhitelist.includes(data?.componentName) : true
 
-      insertNode(targetNode, position)
-    }
+  // 黑名单
+  if (descendantBlacklist.length) {
+    flag = !descendantBlacklist.includes(data?.componentName)
   }
 
-  // 重置拖拽状态
-  dragEnd()
+  return flag
 }
 
-const smoothScroll = {
-  timmer: null,
-  /**
-   *
-   * @param {*} up 方向
-   * @param {*} step 每次滚动距离
-   * @param {*} time 滚动延时（不得大于系统滚动时长，否则可能出现卡顿效果）
-   */
-  start(up, step = 40, time = 100) {
-    const dom = getDocument().documentElement
-    const fn = () => {
-      const top = up ? dom.scrollTop + step : dom.scrollTop - step
+// 获取位置信息，返回状态
+const lineAbs = 20
+const getPosLine = (rect, configure) => {
+  const mousePos = dragState.mouse
+  const yAbs = Math.min(lineAbs, rect.height / 3)
+  const xAbs = Math.min(lineAbs, rect.width / 3)
+  let type
 
-      dom.scrollTo({ top, behavior: 'smooth' })
-      this.timmer = setTimeout(fn, time)
+  if (mousePos.y < rect.top + yAbs) {
+    type = POSITION.TOP
+  } else if (mousePos.y > rect.bottom - yAbs) {
+    type = POSITION.BOTTOM
+  } else if (mousePos.x < rect.left + xAbs) {
+    type = POSITION.LEFT
+  } else if (mousePos.x > rect.right - xAbs) {
+    type = POSITION.RIGHT
+  } else if (configure.isContainer) {
+    type = allowInsert() ? POSITION.IN : POSITION.FORBID
+  } else {
+    type = POSITION.BOTTOM
+  }
+
+  return { type }
+}
+
+const isBodyEl = (element) => element.nodeName === 'BODY'
+
+const setHoverRect = (element, data) => {
+  if (!element) {
+    return clearHover()
+  }
+  const componentName = element.getAttribute(NODE_TAG)
+  const id = element.getAttribute(NODE_UID)
+  const configure = getConfigure(componentName)
+  const rect = getRect(element)
+  const { left, height, top, width } = rect
+  const { x, y } = getOffset(element)
+  const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
+  const scale = useLayout().getScale()
+
+  hoverState.configure = configure
+
+  if (data) {
+    let childEle = null
+    lineState.id = id
+    lineState.configure = configure
+    const rectType = isBodyEl(element) ? POSITION.IN : getPosLine(rect, configure).type
+
+    // 如果拖拽经过的元素是body或者是带有容器属性的盒子，并且在元素内部插入,则需要特殊处理
+    if ((isBodyEl(element) || configure?.isContainer) && rectType === POSITION.IN) {
+      const { node } = isBodyEl(element) ? { node: getSchema() } : getNode(id, true) || {}
+      const children = node?.children || []
+      if (children.length > 0) {
+        // 如果容器盒子有子节点，则以最后一个子节点为拖拽参照物
+        const lastNode = children[children.length - 1]
+        childEle = querySelectById(lastNode.id)
+        const childComponentName = element.getAttribute(childEle)
+        const Childconfigure = getConfigure(childComponentName)
+        lineState.id = lastNode.id
+        lineState.configure = Childconfigure
+      }
     }
 
-    this.timmer || fn()
-  },
-  stop() {
-    clearTimeout(this.timmer)
-    this.timmer = null
+    // 如果容器盒子有子元素
+    if (childEle) {
+      const childRect = getRect(childEle)
+      const { left, height, top, width } = childRect
+      const { x, y } = getOffset(childEle)
+      Object.assign(lineState, {
+        width: width * scale,
+        height: height * scale,
+        top: top * scale + y - siteCanvasRect.y,
+        left: left * scale + x - siteCanvasRect.x,
+        position: canvasState.type === 'absolute' || getPosLine(childRect, lineState.configure).type
+      })
+    } else {
+      Object.assign(lineState, {
+        width: width * scale,
+        height: height * scale,
+        top: top * scale + y - siteCanvasRect.y,
+        left: left * scale + x - siteCanvasRect.x,
+        position: canvasState.type === 'absolute' || getPosLine(rect, configure).type
+      })
+    }
+
+    useLayout().closePlugin()
   }
+
+  // 设置元素hover状态
+  Object.assign(hoverState, {
+    width: width * scale,
+    height: height * scale,
+    top: top * scale + y - siteCanvasRect.y,
+    left: left * scale + x - siteCanvasRect.x,
+    componentName
+  })
+  return undefined
 }
 
 // 绝对布局
@@ -402,43 +596,6 @@ export const dragMove = (event, isHover) => {
   }
 }
 
-export const clearHover = () => {
-  Object.assign(hoverState, initialRectState, { slot: null })
-}
-
-export const clearSelect = () => {
-  canvasState.current = null
-  canvasState.parent = null
-  Object.assign(selectState, initialRectState)
-  // 临时借用 remote 事件出发 currentSchema 更新
-  canvasState?.emit?.('remove')
-}
-
-export const querySelectById = (id, type = '') => {
-  let selector = `[${NODE_UID}="${id}"]`
-  const doc = canvasState.iframe.contentDocument
-  let element = doc.querySelector(selector)
-  const loopId = element?.getAttribute('loop-id')
-  if (element && loopId) {
-    const currentLoopId = getCurrent().loopId
-    selector = `[${NODE_UID}="${id}"][${NODE_LOOP}="${currentLoopId}"]`
-    element = doc.querySelector(selector)
-  }
-  return element
-}
-
-export const getCurrentElement = () => querySelectById(getCurrent().schema?.id)
-
-export const updateRect = (id) => {
-  id = (typeof id === 'string' && id) || getCurrent().schema?.id
-  clearHover()
-
-  if (id) {
-    setTimeout(() => setSelectRect(querySelectById(id)))
-  } else {
-    clearSelect()
-  }
-}
 // type == clickTree, 为点击大纲; type == loop-id=xxx ,为点击循环数据
 export const selectNode = async (id, type) => {
   if (type && type.indexOf('loop-id') > -1) {
@@ -468,174 +625,85 @@ export const hoverNode = (id, data) => {
   element && setHoverRect(element, data)
 }
 
-export const scrollToNode = (element) => {
-  if (element) {
-    const container = getDocument().documentElement
-    const h = container?.clientHeight
-    const { y, height } = element.getBoundingClientRect()
-
-    if (y < 0) {
-      container.scrollTo({ top: container.scrollTop + y - 15 })
-    } else if (y > h) {
-      container.scrollTo({ top: y + height - h + 15 })
+export const insertNode = (node, position = POSITION.IN, select = true) => {
+  if (!node.parent) {
+    insertInner({ node: canvasState.schema, data: node.data }, position)
+  } else {
+    switch (position) {
+      case POSITION.TOP:
+      case POSITION.LEFT:
+        insertBefore(node)
+        break
+      case POSITION.BOTTOM:
+      case POSITION.RIGHT:
+        inserAfter(node)
+        break
+      case POSITION.IN:
+        insertInner(node)
+        break
+      default:
+        insertInner(node)
+        break
     }
   }
 
-  return nextTick()
-}
-const setSelectRect = (element) => {
-  element = element || getDocument().body
+  select && setTimeout(() => selectNode(node.data.id))
 
-  const { left, height, top, width } = element.getBoundingClientRect()
-  const { x, y } = getOffset(element)
-  const componentName = getCurrent().schema?.componentName || ''
-  const scale = useLayout().getScale()
-  clearHover()
-  Object.assign(selectState, {
-    width: width * scale,
-    height: height * scale,
-    top: top * scale + y,
-    left: left * scale + x,
-    componentName
-  })
+  getController().addHistory()
 }
 
-const isBodyEl = (element) => element.nodeName === 'BODY'
-
-const setHoverRect = (element, data) => {
-  if (!element) {
-    return clearHover()
-  }
-  const componentName = element.getAttribute(NODE_TAG)
-  const id = element.getAttribute(NODE_UID)
-  const configure = getConfigure(componentName)
-  const rect = element.getBoundingClientRect()
-  const { left, height, top, width } = rect
-  const { x, y } = getOffset(element)
-  const scale = useLayout().getScale()
-
-  hoverState.configure = configure
-
-  if (data) {
-    let childEle = null
-    lineState.id = id
-    lineState.configure = configure
-    const rectType = isBodyEl(element) ? POSITION.IN : getPosLine(rect, configure).type
-
-    // 如果拖拽经过的元素是body或者是带有容器属性的盒子，并且在元素内部插入,则需要特殊处理
-    if ((isBodyEl(element) || configure?.isContainer) && rectType === POSITION.IN) {
-      const { node } = isBodyEl(element) ? { node: getSchema() } : getNode(id, true) || {}
-      const children = node?.children || []
-      if (children.length > 0) {
-        // 如果容器盒子有子节点，则以最后一个子节点为拖拽参照物
-        const lastNode = children[children.length - 1]
-        childEle = querySelectById(lastNode.id)
-        const childComponentName = element.getAttribute(childEle)
-        const Childconfigure = getConfigure(childComponentName)
-        lineState.id = lastNode.id
-        lineState.configure = Childconfigure
-      }
-    }
-
-    // 如果容器盒子有子元素
-    if (childEle) {
-      const childRect = childEle.getBoundingClientRect()
-      const { left, height, top, width } = childRect
-      const { x, y } = getOffset(childEle)
-      Object.assign(lineState, {
-        width: width * scale,
-        height: height * scale,
-        top: top * scale + y,
-        left: left * scale + x,
-        position: canvasState.type === 'absolute' || getPosLine(childRect, lineState.configure).type
-      })
-    } else {
-      Object.assign(lineState, {
-        width: width * scale,
-        height: height * scale,
-        top: top * scale + y,
-        left: left * scale + x,
-        position: canvasState.type === 'absolute' || getPosLine(rect, configure).type
-      })
-    }
-
-    useLayout().closePlugin()
-  }
+export const addComponent = (data, position) => {
+  const { schema, parent } = getCurrent()
 
-  // 设置元素hover状态
-  Object.assign(hoverState, {
-    width: width * scale,
-    height: height * scale,
-    top: top * scale + y,
-    left: left * scale + x,
-    componentName
-  })
-  return undefined
+  insertNode({ node: schema, parent, data }, position)
 }
 
-/**
- * 是否允许插入
- * @param {*} configure 当前放置目标的 configure，比如getConfigure(componentName)
- * @param {*} data 当前插入目标的schame数据
- * @returns
- */
-export const allowInsert = (configure = hoverState.configure || {}, data = dragState.data || {}) => {
-  const { nestingRule = {} } = configure
-  const { childWhitelist = [], descendantBlacklist = [] } = nestingRule
-
-  // 要插入的父节点必须是容器
-  if (!configure.isContainer) {
-    return false
-  }
-
-  let flag = true
-  // 白名单
-  flag = childWhitelist.length ? childWhitelist.includes(data?.componentName) : true
-
-  // 黑名单
-  if (descendantBlacklist.length) {
-    flag = !descendantBlacklist.includes(data?.componentName)
+export const copyNode = (id) => {
+  if (!id) {
+    return
   }
+  const { node, parent } = getNode(id, true)
 
-  return flag
+  inserAfter({ parent, node, data: copyObject(node) })
+  getController().addHistory()
 }
 
-export const getConfigure = (targetName) => {
-  const material = getController().getMaterial(targetName)
-
-  // 这里如果是区块插槽，则返回标识为容器的对象
-  if (targetName === 'Template') {
-    return {
-      isContainer: true
-    }
-  }
+export const onMouseUp = () => {
+  const { draging, data } = dragState
+  const { position } = lineState
+  const absolute = canvasState.type === 'absolute'
+  const sourceId = data?.id
+  const lineId = lineState.id
+  const allowInsert = position !== POSITION.FORBID
 
-  return material?.content?.configure || material.configure || {}
-}
+  if (draging && allowInsert) {
+    const { parent, node } = getNode(lineId, true) || {} // target
+    const targetNode = { parent, node, data: toRaw(data) }
 
-// 获取位置信息，返回状态
-const lineAbs = 20
-const getPosLine = (rect, configure) => {
-  const mousePos = dragState.mouse
-  const yAbs = Math.min(lineAbs, rect.height / 3)
-  const xAbs = Math.min(lineAbs, rect.width / 3)
-  let type
+    if (sourceId) {
+      // 内部拖拽
+      if (sourceId !== lineId && !absolute) {
+        removeNode(getNode(sourceId, true))
+        insertNode(targetNode, position)
+      }
+    } else {
+      // 从外部拖拽进来的无ID，insert
+      if (absolute) {
+        targetNode.node = getSchema()
+        data.props = data.props || {}
+        data.props.style = {
+          position: 'absolute',
+          top: dragState.mouse.y + 'px',
+          left: dragState.mouse.x + 'px'
+        }
+      }
 
-  if (mousePos.y < rect.top + yAbs) {
-    type = POSITION.TOP
-  } else if (mousePos.y > rect.bottom - yAbs) {
-    type = POSITION.BOTTOM
-  } else if (mousePos.x < rect.left + xAbs) {
-    type = POSITION.LEFT
-  } else if (mousePos.x > rect.right - xAbs) {
-    type = POSITION.RIGHT
-  } else if (configure.isContainer) {
-    type = allowInsert() ? POSITION.IN : POSITION.FORBID
-  } else {
-    type = POSITION.BOTTOM
+      insertNode(targetNode, position)
+    }
   }
 
-  return { type }
+  // 重置拖拽状态
+  dragEnd()
 }
 
 export const setPageCss = (css = '') => {
@@ -701,26 +769,6 @@ export const setGlobalState = (state) => {
   getRenderer().setGlobalState(state)
 }
 
-export const getGlobalState = () => getRenderer().getGlobalState()
-
-export const getRenderer = () => canvasState.renderer
-
-export const getController = () => canvasState.controller
-
-export const getNode = (id, parent) => getRenderer()?.getNode(id, parent)
-
-export const getDocument = () => canvasState.iframe.contentDocument
-
-export const getWindow = () => canvasState.iframe.contentWindow
-
-export const getCurrent = () => {
-  return {
-    schema: canvasState.current,
-    parent: canvasState.parent,
-    loopId: canvasState.loopId
-  }
-}
-
 export const getNodePath = (id, nodes = []) => {
   const { parent, node } = getNode(id, true) || {}
 
@@ -743,8 +791,6 @@ export const setSchema = async (schema) => {
   return canvasState.schema
 }
 
-export const getSchema = () => getRenderer()?.getSchema()
-
 export const setConfigure = (configure) => {
   getRenderer().setConfigure(configure)
 }
diff --git a/packages/design-core/src/DesignCanvas.vue b/packages/design-core/src/DesignCanvas.vue
index d76bee21c5..21dcb7afa6 100644
--- a/packages/design-core/src/DesignCanvas.vue
+++ b/packages/design-core/src/DesignCanvas.vue
@@ -175,6 +175,7 @@ export default {
     height: calc(100% - var(--base-bottom-panel-height, 30px) - 36px);
     background: var(--ti-lowcode-breadcrumb-hover-bg);
     position: absolute;
+    overflow: hidden;
     margin: 18px 0;
   }
 }