diff --git a/packages/designer/src/builtin-simulator/bem-tools/borders.less b/packages/designer/src/builtin-simulator/bem-tools/borders.less
index 511bae9c2..93ed2c1db 100644
--- a/packages/designer/src/builtin-simulator/bem-tools/borders.less
+++ b/packages/designer/src/builtin-simulator/bem-tools/borders.less
@@ -45,6 +45,27 @@
     }
   }
 
+    &.lc-resize-box {
+      border-width: 0;
+      z-index: 1;
+      cursor: ew-resize;
+      pointer-events: auto;
+      align-items: center;
+      justify-content: center;
+      display: flex;
+
+      &:after {
+        content: "";
+        display: block;
+        height: calc(100% - 20px);
+        min-height: 50%;
+        width: 4px;
+        background: #738397;
+        border-radius: 2px;
+        // animation: flashing 1.5s infinite linear;
+      }
+    }
+
   &&-hovering {
     z-index: 1;
     border-style: dashed;
diff --git a/packages/designer/src/builtin-simulator/bem-tools/box-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/box-resizing.tsx
new file mode 100644
index 000000000..471ce326d
--- /dev/null
+++ b/packages/designer/src/builtin-simulator/bem-tools/box-resizing.tsx
@@ -0,0 +1,345 @@
+import { Component, Fragment } from 'react';
+
+// import Bus from '../../../../core/bus';
+// import DragResizeEngine from '../../../../core/dragResizeEngine';
+// import OverlayCore from '../../../../core/overlay';
+import { observer, computed, Tip } from '@ali/lowcode-editor-core';
+import classNames from 'classnames';
+import { SimulatorContext } from '../context';
+import { BuiltinSimulatorHost } from '../host';
+import { OffsetObserver } from '../../designer';
+
+@observer
+export default class BoxResizing extends Component {
+  static contextType = SimulatorContext;
+
+  get host(): BuiltinSimulatorHost {
+    return this.context;
+  }
+
+  get dragging(): boolean {
+    return this.host.designer.dragon.dragging;
+  }
+
+  @computed get selecting() {
+    const doc = this.host.document;
+    if (doc.suspensed) {
+      return null;
+    }
+    const selection = doc.selection;
+    return this.dragging ? selection.getTopNodes() : selection.getNodes();
+  }
+
+  private hoveringLine: any;
+  private hoveringCapture: any;
+  private willDetach: () => any;
+  private willUnbind: () => any;
+  private handler: any;
+  //   private bus: Bus;
+
+  private outline: any;
+  private outlineRight: any;
+  private outlineLeft: any;
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  componentWillMount() {
+    // this.hoveringLine = OverlayCore.getHoveringLine();
+    // this.hoveringCapture = OverlayCore.getHoveringCapture();
+    // this.willDetach = this.hoveringLine.onSync(() => this.forceUpdate());
+    // this.bus = new Bus();
+  }
+
+  // componentDidMount() {
+  //   // this.hoveringCapture.setBoundary(this.outline);
+  //   this.willBind();
+
+  //   const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => {
+  //     const proto = node.getPrototype();
+  //     if (proto && proto.options && typeof proto.options.onResize === 'function') {
+  //       proto.options.onResize(e, direction, node, moveX, moveY);
+  //     }
+  //   };
+
+  //   const resizeStart = (e: MouseEvent, direction: string, node: any) => {
+  //     const proto = node.getPrototype();
+  //     if (proto && proto.options && typeof proto.options.onResizeStart === 'function') {
+  //       proto.options.onResizeStart(e, direction, node);
+  //     }
+  //   };
+
+  //   const resizeEnd = (e: MouseEvent, direction: string, node: any) => {
+  //     const proto = node.getPrototype();
+  //     if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') {
+  //       proto.options.onResizeEnd(e, direction, node);
+  //     }
+  //   };
+
+  //   // DragResizeEngine.onResize(resize);
+  //   // DragResizeEngine.onResizeStart(resizeStart);
+  //   // DragResizeEngine.onResizeEnd(resizeEnd);
+  // }
+
+  // componentDidUpdate() {
+  //   this.hoveringCapture.setBoundary(this.outline);
+  //   this.willBind();
+  // }
+
+  // componentWillUnmount() {
+  //   this.hoveringCapture.setBoundary(null);
+  //   if (this.willDetach) {
+  //     this.willDetach();
+  //   }
+  //   if (this.willUnbind) {
+  //     this.willUnbind();
+  //   }
+  // }
+
+  // willBind() {
+  //   if (this.willUnbind) {
+  //     this.willUnbind();
+  //   }
+
+  //   if (!this.outlineRight && !this.outlineLeft) {
+  //     return;
+  //   }
+
+  //   const unBind: any[] = [];
+  //   unBind
+  //     .push
+  //     //   DragResizeEngine.from(this.outlineRight, 'e', () => {
+  //     //     if (!this.hoveringLine.hasOutline()) {
+  //     //       return null;
+  //     //     }
+  //     //     return this.hoveringLine.getCurrentNode();
+  //     //   }),
+  //     ();
+  //   unBind
+  //     .push
+  //     //   DragResizeEngine.from(this.outlineLeft, 'w', () => {
+  //     //     if (!this.hoveringLine.hasOutline()) {
+  //     //       return null;
+  //     //     }
+  //     //     return this.hoveringLine.getCurrentNode();
+  //     //   }),
+  //     ();
+
+  //   this.willUnbind = () => {
+  //     if (unBind && unBind.length > 0) {
+  //       unBind.forEach((item) => {
+  //         item();
+  //       });
+  //     }
+  //     this.willUnbind = null;
+  //   };
+  // }
+
+  render() {
+    const selecting = this.selecting;
+    if (!selecting || selecting.length < 1) {
+      // DIRTY FIX, recore has a bug!
+      return <Fragment />;
+    }
+
+    return (
+      <Fragment>
+        {selecting.map((node) => (
+          <BoxResizingForNode key={node.id} node={node} />
+        ))}
+      </Fragment>
+    );
+  }
+
+  // render() {
+  //   const node = this.selecting;
+  //   console.log(selecting, 'selecting');
+  //   if (!selecting || selecting.length < 1) {
+  //     // DIRTY FIX, recore has a bug!
+  //     return <Fragment />;
+  //   }
+  //   // if (!this.hoveringLine.hasOutline()) {
+  //   //   return null;
+  //   // }
+
+  //   // const page = node.getPage();
+  //   const bounds = 2;
+  //   // page.getBounds();
+  //   const st = 2;
+  //   // page.getScrollTop();
+  //   const rect = node.getRect();
+
+  //   if (!rect || !bounds) {
+  //     return null;
+  //   }
+
+  //   const proto = node.componentMeta;
+  //   console.log('proto', proto);
+  //   const triggerVisible: any = {
+  //     w: true,
+  //     e: true,
+  //   };
+  //   // if (proto && proto.options && typeof proto.options.canResizing === 'boolean') {
+  //   //   triggerVisible = {
+  //   //     e: proto.options.canResizing,
+  //   //     w: proto.options.canResizing,
+  //   //     n: proto.options.canResizing,
+  //   //     s: proto.options.canResizing,
+  //   //   };
+  //   // } else if (proto && proto.options && typeof proto.options.canResizing === 'function') {
+  //   //   triggerVisible = {
+  //   //     e: proto.options.canResizing(node, 'e'),
+  //   //     w: proto.options.canResizing(node, 'w'),
+  //   //     n: proto.options.canResizing(node, 'n'),
+  //   //     s: proto.options.canResizing(node, 's'),
+  //   //   };
+  //   // }
+
+  //   return (
+  //     <Fragment>
+  //       {selecting.map((node) => (
+  //         <BoxResizingForNode key={node.id} node={node} />
+  //       ))}
+  //     </Fragment>
+  //   );
+
+  //   // return (
+  //   //   <div
+  //   //     ref={(ref) => {
+  //   //       this.outline = ref;
+  //   //     }}
+  //   //   >
+  //   //     {triggerVisible.w && (
+  //   //       <div
+  //   //         ref={(ref) => {
+  //   //           this.outlineLeft = ref;
+  //   //         }}
+  //   //         className="engine-outline engine-resize-outline"
+  //   //         style={{
+  //   //           height: rect.height,
+  //   //           transform: `translate(${rect.left - bounds.left - 10}px, ${rect.top + st - bounds.top}px)`,
+  //   //           width: 20,
+  //   //         }}
+  //   //       />
+  //   //     )}
+  //   //     {triggerVisible.e && (
+  //   //       <div
+  //   //         ref={(ref) => {
+  //   //           this.outlineRight = ref;
+  //   //         }}
+  //   //         className="engine-outline engine-resize-outline"
+  //   //         style={{
+  //   //           height: rect.height,
+  //   //           transform: `translate(${rect.left - bounds.left + rect.width - 10}px, ${rect.top + st - bounds.top}px)`,
+  //   //           width: 20,
+  //   //         }}
+  //   //       />
+  //   //     )}
+  //   //   </div>
+  //   // );
+  // }
+}
+
+@observer
+export class BoxResizingForNode extends Component<{ node: Node }> {
+  static contextType = SimulatorContext;
+
+  get host(): BuiltinSimulatorHost {
+    return this.context;
+  }
+
+  get dragging(): boolean {
+    return this.host.designer.dragon.dragging;
+  }
+
+  @computed get instances() {
+    return this.host.getComponentInstances(this.props.node);
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    const { instances } = this;
+    const { node } = this.props;
+    const designer = this.host.designer;
+
+    if (!instances || instances.length < 1) {
+      return null;
+    }
+    return (
+      <Fragment key={node.id}>
+        {instances.map((instance) => {
+          const observed = designer.createOffsetObserver({
+            node,
+            instance,
+          });
+          if (!observed) {
+            return null;
+          }
+          return <BoxResizingInstance key={observed.id} dragging={this.dragging} observed={observed} />;
+        })}
+      </Fragment>
+    );
+  }
+}
+
+@observer
+export class BoxResizingInstance extends Component<{
+  observed: OffsetObserver;
+  highlight?: boolean;
+  dragging?: boolean;
+}> {
+  componentWillUnmount() {
+    this.props.observed.purge();
+  }
+
+  render() {
+    const { observed, highlight, dragging } = this.props;
+    if (!observed.hasOffset) {
+      return null;
+    }
+
+    const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed;
+    console.log(offsetHeight, offsetLeft, offsetTop, offsetWidth);
+    const triggerVisible = {
+      w: true,
+      e: true,
+    };
+
+    const className = classNames('lc-borders lc-resize-box');
+
+    return (
+      <div>
+        {triggerVisible.w && (
+          <div
+            className={className}
+            style={{
+              height: offsetHeight,
+              transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
+              width: 20,
+            }}
+          />
+        )}
+        {triggerVisible.e && (
+          <div
+            className={className}
+            style={{
+              height: offsetHeight,
+              transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
+              width: 20,
+            }}
+          />
+        )}
+      </div>
+    );
+
+    // return (
+    //   <div className={className} style={style}>
+    //     {!dragging && <Toolbar observed={observed} />}
+    //   </div>
+    // );
+  }
+}
diff --git a/packages/designer/src/builtin-simulator/bem-tools/index.tsx b/packages/designer/src/builtin-simulator/bem-tools/index.tsx
index 0ad81c8c4..d89b5fc65 100644
--- a/packages/designer/src/builtin-simulator/bem-tools/index.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/index.tsx
@@ -4,6 +4,7 @@ import { BorderHovering } from './border-hovering';
 import { SimulatorContext } from '../context';
 import { BuiltinSimulatorHost } from '../host';
 import { BorderSelecting } from './border-selecting';
+import BoxResizing from './box-resizing';
 import { InsertionView } from './insertion';
 import './bem-tools.less';
 import './borders.less';
@@ -24,6 +25,7 @@ export class BemTools extends Component {
         <BorderHovering key="hovering" />
         <BorderSelecting key="selecting" />
         <InsertionView key="insertion" />
+        <BoxResizing key="resizing" />
       </div>
     );
   }