chore: fix conflicts

2026-01-13 01:21:58 +00:00 · 2021-07-29 14:03:12 +08:00 · 2021-07-29 14:03:12 +08:00 · 9f051c62ed
commit 9f051c62ed
parent 81a2814f57 20b697b99f
46 changed files with 388 additions and 225 deletions
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@ -1,3 +1,6 @@
 module.exports = {
  extends: 'stylelint-config-ali',
+  rules: {
+    "selector-max-id": 2
+  }
 };
--- a/README.md
+++ b/README.md
@ -1,33 +1,39 @@
 ## Ali Lowcode Engine（阿里低代码引擎）

-## 开发
+整体文档：https://yuque.antfin.com/ali-lowcode/docs/dzfn58

-#### 创建新包
+## 引擎效果预览

- `./scripts/create.sh <package-name>`
+下载并启动 demo 项目

-#### 运行示例
+```
+git clone git@gitlab.alibaba-inc.com:ali-lowcode/lowcode-editor-demo.git
+cd lowcode-editor-demo
+tnpm install && tnpm start
+```

- `npm run setup`
- `npm start`
+## 开发调试

-#### 开发提交
+```
+tnpm run setup
+tnpm start
+```

- `git add <your-files>`
- `git commit -a "feat: xxx"`
+启动引擎后，需要将 demo 项目中的引擎 CDN 地址代理到本地地址。

-## 发布
+更多参考：https://yuque.antfin.com/ali-lowcode/docs/vi8i9n

- `npm run pub`
+## 研发协作规范（Code of Conduct）

-## 注意
+具体流程请参考：https://yuque.antfin.com/ali-lowcode/docs/tk90n5

- `packages` 工程里一些开发时公共依赖（比如：`typescript`、`ava` 等）会放到工程顶层
- 工程里的 `.md`、`test/` 等文件修改不会产生新的发布
- 当工程里存在多个 ts 文件的目录时，最终产生的文件会按文件夹形式放到 `lib` 下
+issue 地址：http://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/issues

-## 包权限管理
+## 引擎 Changelog

- `npm owner ls @ali/<pkg> --registry http://registry.npm.alibaba-inc.com`
- `npm owner add <user> @ali/<pkg> --registry http://registry.npm.alibaba-inc.com`
- `npm owner rm <user> @ali/<pkg> --registry http://registry.npm.alibaba-inc.com`
+参考：https://yuque.antfin.com/ali-lowcode/docs/idext1
+
+## 更多信息
+
+- 低代码物料研发脚手架 - [vdev](https://yuque.antfin.com/uipaas/help/isqc0g)
+- 低代码孵化器 - [UIPaaS](https://yuque.antfin.com/uipaas/help/overview)
--- a/lerna.json
+++ b/lerna.json
@ -1,6 +1,6 @@
 {
  "lerna": "2.11.0",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "npmClient": "tnpm",
  "registry": "http://registry.npm.alibaba-inc.com",
  "useWorkspaces": true,
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-designer",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "Designer for Ali LowCode Engine",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -14,13 +14,12 @@
  },
  "license": "MIT",
  "dependencies": {
-    "@ali/lowcode-editor-core": "1.0.58",
-    "@ali/lowcode-types": "1.0.58",
-    "@ali/lowcode-utils": "1.0.58",
+    "@ali/lowcode-editor-core": "1.0.60",
+    "@ali/lowcode-types": "1.0.60",
+    "@ali/lowcode-utils": "1.0.60",
    "classnames": "^2.2.6",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
-    "event": "^1.0.0",
    "react": "^16",
    "react-dom": "^16.7.0",
    "zen-logger": "^1.1.0"
--- a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx
@ -1,8 +1,11 @@
 import { Component, Fragment, PureComponent } from 'react';
 import classNames from 'classnames';
 import { computed, observer, Title } from '@ali/lowcode-editor-core';
-import { BuiltinSimulatorHost } from '../host';
 import { TitleContent } from '@ali/lowcode-types';
+import { getClosestNode } from '@ali/lowcode-utils';
+
+import { BuiltinSimulatorHost } from '../host';
+

 export class BorderDetectingInstance extends PureComponent<{
  title: TitleContent;
@ -10,9 +13,10 @@ export class BorderDetectingInstance extends PureComponent<{
  scale: number;
  scrollX: number;
  scrollY: number;
+  isLocked?: boolean;
 }> {
  render() {
-    const { title, rect, scale, scrollX, scrollY } = this.props;
+    const { title, rect, scale, scrollX, scrollY, isLocked } = this.props;
    if (!rect) {
      return null;
    }
@ -32,6 +36,9 @@ export class BorderDetectingInstance extends PureComponent<{
    return (
      <div className={className} style={style}>
        <Title title={title} className="lc-borders-title" />
+        {
+          isLocked ? (<Title title="已锁定" className="lc-borders-status" />) : null
+        }
      </div>
    );
  }
@ -74,15 +81,21 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> {
    const { host } = this.props;
    const { current } = this;

+
    const canHoverHook = current?.componentMeta.getMetadata()?.experimental?.callbacks?.onHoverHook;
    const canHover = (canHoverHook && typeof canHoverHook === 'function') ? canHoverHook(current) : true;

+
    if (!canHover || !current || host.viewport.scrolling || host.liveEditing.editing) {
      return null;
    }

    // rootNode, hover whole viewport
-    const focusNode = current.document.focusNode;
+    const focusNode = current.document.focusNode!;
+
+    if (!focusNode.contains(current)) {
+      return null;
+    }

    if (current.contains(focusNode)) {
      const bounds = host.viewport.bounds;
@ -96,8 +109,25 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> {
          rect={new DOMRect(0, 0, bounds.width, bounds.height)}
        />
      );
-    } else if (!focusNode.contains(current)) {
-      return null;
+    }
+
+    const lockedNode = getClosestNode(current, (n) => {
+      return n?.getExtraProp('isLocked')?.getValue() === true;
+    });
+    if (lockedNode && lockedNode.getId() !== current.getId()) {
+      // 选中父节锁定的节点
+      return (
+        <BorderDetectingInstance
+          key="line-h"
+          title={current.title}
+          scale={this.scale}
+          scrollX={this.scrollX}
+          scrollY={this.scrollY}
+          // @ts-ignore
+          rect={host.computeComponentInstanceRect(host.getComponentInstances(lockedNode)[0], lockedNode.componentMeta.rootSelector)}
+          isLocked={lockedNode?.getId() !== current.getId()}
+        />
+      );
    }

    const instances = host.getComponentInstances(current);
--- a/packages/designer/src/builtin-simulator/bem-tools/borders.less
+++ b/packages/designer/src/builtin-simulator/bem-tools/borders.less
@ -11,10 +11,13 @@
  will-change: transform, width, height;
  overflow: visible;
  & > &-title {
-    position: absolute;
    color: var(--color-brand-light);
-    top: 0;
-    left: 0;
+    transform: translateY(-100%);
+    font-weight: lighter;
+  }
+  & > &-status {
+    margin-left: 5px;
+    color: #3c3c3c;
    transform: translateY(-100%);
    font-weight: lighter;
  }
--- a/packages/designer/src/builtin-simulator/host.ts
+++ b/packages/designer/src/builtin-simulator/host.ts
@ -30,6 +30,7 @@ import {
  isFormEvent,
  hasOwnProperty,
  UtilsMetadata,
+  getClosestNode,
 } from '@ali/lowcode-utils';
 import {
  DragObjectType,
@ -463,7 +464,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
  }

  setupRendererChannel() {
-    const editor = this.designer.editor;
+    const { editor } = this.designer;
    editor.on('node.innerProp.change', ({ node, prop, oldValue, newValue }) => {
      // 在 Node 初始化阶段的属性变更都跳过
      if (!node.isInited) return;
@ -546,71 +547,20 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
        if (!node) {
          return;
        }
-        const isRGLNode = node?.getParent()?.isRGLContainer;
        const rglNode = node?.getParent();
+        const isRGLNode = rglNode?.isRGLContainer;
        if (isRGLNode) {
          // 如果拖拽的是磁铁块的右下角handle，则直接跳过
          if (downEvent.target.classList.contains('react-resizable-handle')) return;
+          // 禁止多选
          isMulti = false;
          designer.dragon.emitter.emit('rgl.switch', {
            action: 'start',
            rglNode,
          });
-          const judgeEnterOtherRGL = (e: MouseEvent) => {
-            const _nodeInst = this.getNodeInstanceFromElement(e.target as Element);
-            const _node = _nodeInst?.node;
-            if (!_node) return { status: false };
-            const { isRGL: _isRGL, rglNode: _rglNode } = _node.getRGL();
-            const status = !!(
-              _isRGL &&
-              _rglNode?.id !== rglNode?.id &&
-              _rglNode?.getParent() !== node &&
-              _node !== nodeInst?.node
-            );
-            return { status, rglNode: _rglNode };
-          };
-          const move = (e: MouseEvent) => {
-            if (!isShaken(downEvent, e)) {
-              if (nodeInst.instance && nodeInst.instance.style) {
-                nodeInst.instance.style.pointerEvents = 'none';
-              }
-            }
-            const { status, rglNode: _rglNode } = judgeEnterOtherRGL(e);
-            if (status) {
-              designer.dragon.emitter.emit('rgl.add.placeholder', {
-                rglNode: _rglNode,
-                node,
-                event: e,
-                fromRglNode: rglNode,
-              });
-            } else {
-              designer.dragon.emitter.emit('rgl.remove.placeholder');
-            }
-          };
-          const over = (e: MouseEvent) => {
-            const { status, rglNode: _rglNode } = judgeEnterOtherRGL(e);
-            if (status) {
-              designer.dragon.emitter.emit('rgl.drop', {
-                rglNode: _rglNode,
-                node,
-                fromRglNode: rglNode,
-              });
-            }
-            designer.dragon.emitter.emit('rgl.remove.placeholder');
-            if (nodeInst.instance && nodeInst.instance.style) {
-              nodeInst.instance.style.pointerEvents = '';
-            }
-            designer.dragon.emitter.emit('rgl.switch', {
-              action: 'end',
-              rglNode,
-            });
-            doc.removeEventListener('mouseup', over, true);
-            doc.removeEventListener('mousemove', move, true);
-          };
-          doc.addEventListener('mouseup', over, true);
-          doc.addEventListener('mousemove', move, true);
        } else {
          // stop response document focus event
+          // 禁止原生拖拽
          downEvent.stopPropagation();
          downEvent.preventDefault();
        }
@ -621,6 +571,11 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
        const isLeftButton = downEvent.which === 1 || downEvent.button === 0;
        const checkSelect = (e: MouseEvent) => {
          doc.removeEventListener('mouseup', checkSelect, true);
+          // 取消移动;
+          designer.dragon.emitter.emit('rgl.switch', {
+            action: 'end',
+            rglNode,
+          });
          // 鼠标是否移动 ? - 鼠标抖动应该也需要支持选中事件，偶尔点击不能选中，磁帖块移除shaken检测
          if (!isShaken(downEvent, e) || isRGLNode) {
            let { id } = node;
@ -667,16 +622,14 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
          } else {
            // will clear current selection & select dragment in dragstart
          }
-          if (!isRGLNode) {
-            designer.dragon.boost(
-              {
-                type: DragObjectType.Node,
-                nodes,
-              },
-              downEvent,
-              true,
-            );
-          }
+          designer.dragon.boost(
+            {
+              type: DragObjectType.Node,
+              nodes,
+            },
+            downEvent,
+            isRGLNode ? rglNode : undefined,
+          );
          if (ignoreUpSelected) {
            // multi select mode has add selected, should return
            return;
@ -1265,7 +1218,11 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
    }
    const dropContainer = this.getDropContainer(e);
    const canDropIn = dropContainer?.container?.componentMeta?.prototype?.options?.canDropIn;
-
+    const lockedNode = getClosestNode(dropContainer?.container as Node, (node) => {
+      return node?.getExtraProp('isLocked')?.getValue() === true;
+    });
+    // const isLocked = dropContainer?.container?.getExtraProp('isLocked')?.getValue();
+    if (lockedNode) return null;
    if (
      !dropContainer ||
      canDropIn === false ||
@ -1337,8 +1294,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
      const inst = instances
        ? instances.length > 1
          ? instances.find(
-              (_inst) =>
-                this.getClosestNodeInstance(_inst, container.id)?.instance === containerInstance,
+              (_inst) => this.getClosestNodeInstance(_inst, container.id)?.instance === containerInstance,
            )
          : instances[0]
        : null;
--- a/packages/designer/src/builtin-simulator/utils/clickable.ts
+++ b/packages/designer/src/builtin-simulator/utils/clickable.ts
@ -1,3 +1,4 @@
+import { getClosestNode } from '@ali/lowcode-utils';
 import { Node } from '../../document';

 /**
@ -13,8 +14,14 @@ export const getClosestClickableNode = (
  // 执行 onClickHook 来判断当前节点是否可点击
  while (node) {
    const onClickHook = node.componentMeta?.getMetadata()?.experimental?.callbacks?.onClickHook;
-    const canClick =
+    const lockedNode = getClosestNode(node, (n) => {
+      return n?.getExtraProp('isLocked')?.getValue() === true;
+    });
+    let canClick =
      onClickHook && typeof onClickHook === 'function' ? onClickHook(event, node) : true;
+    if (lockedNode && lockedNode.getId() !== node.getId()) {
+      canClick = false;
+    }
    if (canClick) {
      break;
    }
--- a/packages/designer/src/component-meta.ts
+++ b/packages/designer/src/component-meta.ts
@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import {
  ComponentMetadata,
  NpmInfo,
@ -12,18 +13,13 @@ import {
  LiveTextEditingConfig,
  FieldConfig,
 } from '@ali/lowcode-types';
-import { computed } from '@ali/lowcode-editor-core';
+import { computed, engineConfig } from '@ali/lowcode-editor-core';
+import EventEmitter from 'events';
+
 import { isNode, Node, ParentalNode } from './document';
 import { Designer } from './designer';
 import { intlNode } from './locale';
-import { IconContainer } from './icons/container';
-import { IconPage } from './icons/page';
-import { IconComponent } from './icons/component';
-import { IconRemove } from './icons/remove';
-import { IconClone } from './icons/clone';
-import { ReactElement } from 'react';
-import { IconHidden } from './icons/hidden';
-import EventEmitter from 'events';
+import { IconLock, IconUnlock, IconContainer, IconPage, IconComponent, IconRemove, IconClone, IconHidden } from './icons';

 function ensureAList(list?: string | string[]): string[] | null {
  if (!list) {
@ -148,6 +144,7 @@ export class ComponentMeta {
    // if _title is TitleConfig  get _title.icon
    return (
      this._transformedMetadata?.icon ||
+      // eslint-disable-next-line
      (this.componentName === 'Page' ? IconPage : this.isContainer ? IconContainer : IconComponent)
    );
  }
@ -262,7 +259,7 @@ export class ComponentMeta {
    // eslint-disable-next-line prefer-const
    let { disableBehaviors, actions } = this._transformedMetadata?.configure.component || {};
    const disabled =
-      ensureAList(disableBehaviors) || (this.isRootComponent(false) ? ['copy', 'remove'] : null);
+      ensureAList(disableBehaviors) || (this.isRootComponent(false) ? ['copy', 'remove', 'lock', 'unlock'] : null);
    actions = builtinComponentActions.concat(
      this.designer.getGlobalComponentActions() || [],
      actions || [],
@ -471,6 +468,36 @@ const builtinComponentActions: ComponentAction[] = [
    },
    important: true,
  },
+  {
+    name: 'lock',
+    content: {
+      icon: IconUnlock, // 解锁icon
+      title: intlNode('lock'),
+      action(node: Node) {
+        node.getExtraProp('isLocked', true)?.setValue(true);
+      },
+    },
+    condition: (node: Node) => {
+      const isLocked = node.getExtraProp('isLocked')?.getValue();
+      return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && isLocked !== true);
+    },
+    important: true,
+  },
+  {
+    name: 'unlock',
+    content: {
+      icon: IconLock, // 锁定icon
+      title: intlNode('unlock'),
+      action(node: Node) {
+        node.getExtraProp('isLocked', true)?.setValue(false);
+      },
+    },
+    condition: (node: Node) => {
+      const isLocked = node.getExtraProp('isLocked')?.getValue();
+      return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && isLocked === true);
+    },
+    important: true,
+  },
 ];

 export function removeBuiltinComponentAction(name: string) {
@ -484,11 +511,11 @@ export function addBuiltinComponentAction(action: ComponentAction) {
 }

 export function modifyBuiltinComponentAction(
-  actionName,
+  actionName: string,
  handle: (action: ComponentAction) => void,
 ) {
  const builtinAction = builtinComponentActions.find((action) => action.name === actionName);
  if (builtinAction) {
    handle(builtinAction);
  }
-}
+}
--- a/packages/designer/src/designer/dragon.ts
+++ b/packages/designer/src/designer/dragon.ts
@ -247,7 +247,7 @@ export class Dragon {
   * @param dragObject 拖拽对象
   * @param boostEvent 拖拽初始时事件
   */
-  boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent, isFromRGLNode?: boolean) {
+  boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: Node) {
    const { designer } = this;
    const masterSensors = this.getMasterSensors();
    const handleEvents = makeEventsHandler(boostEvent, masterSensors);
@ -318,14 +318,31 @@ export class Dragon {
        return;
      }
      lastArrive = e;
+
+      const { isRGL, rglNode } = getRGL(e);
      const locateEvent = createLocateEvent(e);
      const sensor = chooseSensor(locateEvent);
-      const { isRGL, rglNode } = getRGL(e);
+
      if (isRGL) {
+        // 禁止被拖拽元素的阻断
+        const nodeInst = dragObject.nodes[0].getDOMNode();
+        if (nodeInst && nodeInst.style) {
+          this.nodeInstPointerEvents = true;
+          nodeInst.style.pointerEvents = 'none';
+        }
+        // 原生拖拽
+        this.emitter.emit('rgl.sleeping', false);
+        if (fromRglNode && fromRglNode.id === rglNode.id) {
+          designer.clearLocation();
+          this.clearState();
+          this.emitter.emit('drag', locateEvent);
+          return;
+        }
        this._canDrop = !!sensor?.locate(locateEvent);
        if (this._canDrop) {
          this.emitter.emit('rgl.add.placeholder', {
            rglNode,
+            fromRglNode,
            node: locateEvent.dragObject.nodes[0],
            event: e,
          });
@ -337,6 +354,7 @@ export class Dragon {
      } else {
        this._canDrop = false;
        this.emitter.emit('rgl.remove.placeholder');
+        this.emitter.emit('rgl.sleeping', true);
      }
      if (sensor) {
        sensor.fixEvent(locateEvent);
@ -397,6 +415,15 @@ export class Dragon {

    // end-tail drag process
    const over = (e?: any) => {
+      // 禁止被拖拽元素的阻断
+      if (this.nodeInstPointerEvents) {
+        const nodeInst = dragObject.nodes[0].getDOMNode();
+        if (nodeInst && nodeInst.style) {
+          nodeInst.style.pointerEvents = '';
+        }
+        this.nodeInstPointerEvents = false;
+      }
+
      // 发送drop事件
      if (e) {
        const { isRGL, rglNode } = getRGL(e);
@ -414,6 +441,9 @@ export class Dragon {
        }
      }

+      // 移除磁帖占位消息
+      this.emitter.emit('rgl.remove.placeholder');
+
      /* istanbul ignore next */
      if (e && isDragEvent(e)) {
        e.preventDefault();
--- a/packages/designer/src/icons/index.ts
+++ b/packages/designer/src/icons/index.ts
@ -0,0 +1,10 @@
+export * from './lock';
+export * from './hidden';
+export * from './remove';
+export * from './setting';
+export * from './component';
+export * from './clone';
+export * from './page';
+export * from './container';
+export * from './unlock';
+
--- a/packages/designer/src/icons/lock.tsx
+++ b/packages/designer/src/icons/lock.tsx
@ -0,0 +1,11 @@
+import { SVGIcon, IconProps } from '@ali/lowcode-utils';
+
+export function IconLock(props: IconProps) {
+  return (
+    <SVGIcon viewBox="0 0 1024 1024" {...props}>
+      <path d="M704 480v-160c0-105.6-86.4-192-192-192s-192 86.4-192 192v160H160v416h704V480h-160z m-320-160c0-70.4 57.6-128 128-128s128 57.6 128 128v160h-256v-160z m416 512H224v-288h576v288z" fill="#ffffff" p-id="2680" />
+      <path d="M480 768h64v-160h-64z" fill="#ffffff" p-id="2681" />
+    </SVGIcon>
+  );
+}
+IconLock.displayName = 'IconLock';
--- a/packages/designer/src/icons/unlock.tsx
+++ b/packages/designer/src/icons/unlock.tsx
@ -0,0 +1,11 @@
+import { SVGIcon, IconProps } from '@ali/lowcode-utils';
+
+export function IconUnlock(props: IconProps) {
+  return (
+    <SVGIcon viewBox="0 0 1024 1024" {...props}>
+      <path d="M384 480v-160c0-70.4 57.6-128 128-128s128 57.6 128 128v64h64v-64c0-105.6-86.4-192-192-192s-192 86.4-192 192v160H160v416h704V480H384z m416 352H224v-288h576v288z" fill="#ffffff" p-id="2813" />
+      <path d="M416 736h192v-64h-192z" fill="#ffffff" p-id="2814" />
+    </SVGIcon>
+  );
+}
+IconUnlock.displayName = 'IconUnlock';
--- a/packages/designer/src/locale/en-US.json
+++ b/packages/designer/src/locale/en-US.json
@ -2,6 +2,8 @@
  "copy": "Copy",
  "remove": "Remove",
  "hide": "Hide",
+  "lock": "Lock",
+  "unlock": "Unlock",
  "Condition Group": "Condition Group",
  "No opened document": "No opened document, open some document to editing"
 }
--- a/packages/designer/src/locale/zh-CN.json
+++ b/packages/designer/src/locale/zh-CN.json
@ -2,6 +2,8 @@
  "copy": "复制",
  "remove": "删除",
  "hide": "隐藏",
+  "lock": "锁定",
+  "unlock": "解锁",
  "Condition Group": "条件组",
  "No opened document": "没有打开的页面，请选择页面打开编辑"
 }
--- a/packages/designer/tests/utils/misc.ts
+++ b/packages/designer/tests/utils/misc.ts
@ -17,7 +17,7 @@ export function set(obj: any, path: any, val: any) {
 }

 export function delay(ms) {
-  return new Promise(resove => setTimeout(resove, ms));
+  return new Promise(resolve => setTimeout(resolve, ms));
 }

 export function delayObxTick() {
--- a/packages/editor-core/package.json
+++ b/packages/editor-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-editor-core",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "Core Api for Ali lowCode engine",
  "license": "MIT",
  "main": "lib/index.js",
@ -13,8 +13,8 @@
    "build": "build-scripts build --skip-demo"
  },
  "dependencies": {
-    "@ali/lowcode-types": "1.0.58",
-    "@ali/lowcode-utils": "1.0.58",
+    "@ali/lowcode-types": "1.0.60",
+    "@ali/lowcode-utils": "1.0.60",
    "@alifd/next": "^1.19.16",
    "@recore/obx": "^1.0.9",
    "@recore/obx-react": "^1.0.8",
--- a/packages/editor-core/src/config.ts
+++ b/packages/editor-core/src/config.ts
@ -51,6 +51,10 @@ export interface EngineOptions {
   * 禁止默认的设置器，默认值：false
   */
  disableDefaultSetters: boolean;
+  /**
+   * 打开画布的锁定操作，默认值：false
+   */
+  enableCanvasLock: boolean;
  /**
   * Vision-polyfill settings
   */
--- a/packages/editor-core/src/editor.ts
+++ b/packages/editor-core/src/editor.ts
@ -10,10 +10,28 @@ import {
 import { globalLocale } from './intl';
 import * as utils from './utils';
 import { obx } from './utils';
-// import { tipHandler } from './widgets/tip/tip-handler';

 EventEmitter.defaultMaxListeners = 100;

+export declare interface Editor {
+  addListener(event: string | symbol, listener: (...args: any[]) => void): this;
+  on(event: string | symbol, listener: (...args: any[]) => void): this;
+  once(event: string | symbol, listener: (...args: any[]) => void): this;
+  removeListener(event: string | symbol, listener: (...args: any[]) => void): this;
+  off(event: string | symbol, listener: (...args: any[]) => void): this;
+  removeAllListeners(event?: string | symbol): this;
+  setMaxListeners(n: number): this;
+  getMaxListeners(): number;
+  listeners(event: string | symbol): Function[];
+  rawListeners(event: string | symbol): Function[];
+  emit(event: string | symbol, ...args: any[]): boolean;
+  listenerCount(type: string | symbol): number;
+  // Added in Node 6...
+  prependListener(event: string | symbol, listener: (...args: any[]) => void): this;
+  prependOnceListener(event: string | symbol, listener: (...args: any[]) => void): this;
+  eventNames(): Array<string | symbol>;
+}
+
 export class Editor extends EventEmitter implements IEditor {
  /**
   * Ioc Container
@ -87,7 +105,6 @@ export class Editor extends EventEmitter implements IEditor {
    try {
      await init(this);
      // 注册快捷键
-      // registShortCuts(shortCuts, this);
      // 注册 hooks
      this.registerHooks(hooks);
      this.emit('editor.afterInit');
@ -104,7 +121,6 @@ export class Editor extends EventEmitter implements IEditor {
    }
    try {
      const { lifeCycles = {} } = this.config;
-      // unRegistShortCuts(shortCuts);

      this.unregisterHooks();

@ -141,11 +157,11 @@ export class Editor extends EventEmitter implements IEditor {
  };

  private waits = new Map<
-  KeyType,
-  Array<{
-    once?: boolean;
-    resolve:(data: any) => void;
-  }>
+    KeyType,
+    Array<{
+      once?: boolean;
+      resolve: (data: any) => void;
+    }>
  >();

  private notifyGot(key: KeyType) {
--- a/packages/editor-preset-general/package.json
+++ b/packages/editor-preset-general/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-editor-preset-general",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "Ali General Editor Preset",
  "main": "lib/index.js",
  "private": true,
@ -14,12 +14,12 @@
  },
  "license": "MIT",
  "dependencies": {
-    "@ali/lowcode-editor-core": "1.0.58",
-    "@ali/lowcode-editor-skeleton": "1.0.58",
-    "@ali/lowcode-plugin-designer": "1.0.58",
-    "@ali/lowcode-plugin-outline-pane": "1.0.58",
-    "@ali/lowcode-types": "1.0.58",
-    "@ali/lowcode-utils": "1.0.58",
+    "@ali/lowcode-editor-core": "1.0.60",
+    "@ali/lowcode-editor-skeleton": "1.0.60",
+    "@ali/lowcode-plugin-designer": "1.0.60",
+    "@ali/lowcode-plugin-outline-pane": "1.0.60",
+    "@ali/lowcode-types": "1.0.60",
+    "@ali/lowcode-utils": "1.0.60",
    "@alifd/next": "^1.19.12",
    "@alife/theme-lowcode-dark": "^0.1.0",
    "@alife/theme-lowcode-light": "^0.1.0",
@ -29,7 +29,6 @@
  "devDependencies": {
    "@ali/lowcode-editor-setters": "^1.0.22",
    "@alib/build-scripts": "^0.1.18",
-    "@types/events": "^3.0.0",
    "@types/react": "^16.8.3",
    "@types/react-dom": "^16.8.2",
    "build-plugin-fusion": "^0.1.0",
--- a/packages/editor-skeleton/package.json
+++ b/packages/editor-skeleton/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-editor-skeleton",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "alibaba lowcode editor skeleton",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -17,15 +17,14 @@
    "editor"
  ],
  "dependencies": {
-    "@ali/lowcode-designer": "1.0.58",
-    "@ali/lowcode-editor-core": "1.0.58",
-    "@ali/lowcode-types": "1.0.58",
-    "@ali/lowcode-utils": "1.0.58",
+    "@ali/lowcode-designer": "1.0.60",
+    "@ali/lowcode-editor-core": "1.0.60",
+    "@ali/lowcode-types": "1.0.60",
+    "@ali/lowcode-utils": "1.0.60",
    "@ali/ve-icons": "latest",
    "@ali/ve-less-variables": "^2.0.0",
    "@alifd/next": "^1.20.12",
    "classnames": "^2.2.6",
-    "events": "^3.2.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1"
  },
--- a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx
+++ b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx
@ -123,6 +123,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any

  render() {
    const { settings } = this.main;
+    const editor = globalContext.get(Editor);
    if (!settings) {
      // 未选中节点，提示选中 或者 显示根节点设置
      return (
@ -145,7 +146,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
    }

    if (!settings.isSameComponent) {
-      // todo: future support 获取设置项交集编辑
+      // TODO: future support 获取设置项交集编辑
      return (
        <div className="lc-settings-main">
          <div className="lc-settings-notice">
@ -184,7 +185,19 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
        matched = true;
      }
      return (
-        <Tab.Item className="lc-settings-tab-item" title={<Title title={field.title} />} key={field.name}>
+        <Tab.Item
+          className="lc-settings-tab-item"
+          title={<Title title={field.title} />}
+          key={field.name}
+          onClick={
+            () => {
+              editor?.emit('skeleton.settingsPane.change', {
+                name: field.name,
+                title: field.title,
+              });
+            }
+          }
+        >
          <SkeletonContext.Consumer>
            {(skeleton) => {
              if (skeleton) {
--- a/packages/editor-skeleton/src/transducers/addon-combine.ts
+++ b/packages/editor-skeleton/src/transducers/addon-combine.ts
@ -211,11 +211,11 @@ export default function (metadata: TransformedComponentMetadata): TransformedCom

          setValue(field: SettingTarget, eventData) {
            const { eventDataList, eventList } = eventData;
-            eventList.map((item) => {
+            Array.isArray(eventList) && eventList.map((item) => {
              field.parent.clearPropValue(item.name);
              return item;
            });
-            eventDataList.map((item) => {
+            Array.isArray(eventDataList) && eventDataList.map((item) => {
              field.parent.setPropValue(item.name, {
                type: 'JSFunction',
                // 需要传下入参
--- a/packages/engine/package.json
+++ b/packages/engine/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-engine",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "Universal API for AliLowCode engine",
  "main": "lib/engine-core.js",
  "module": "es/engine-core.js",
@ -18,14 +18,14 @@
  },
  "license": "MIT",
  "dependencies": {
-    "@ali/lowcode-designer": "1.0.58",
-    "@ali/lowcode-editor-core": "1.0.58",
+    "@ali/lowcode-designer": "1.0.60",
+    "@ali/lowcode-editor-core": "1.0.60",
    "@ali/lowcode-editor-setters": "1.0.30",
-    "@ali/lowcode-editor-skeleton": "1.0.58",
+    "@ali/lowcode-editor-skeleton": "1.0.60",
    "@ali/lowcode-engine-ext": "^1.0.0",
-    "@ali/lowcode-plugin-designer": "1.0.58",
-    "@ali/lowcode-plugin-outline-pane": "1.0.58",
-    "@ali/lowcode-utils": "1.0.58",
+    "@ali/lowcode-plugin-designer": "1.0.60",
+    "@ali/lowcode-plugin-outline-pane": "1.0.60",
+    "@ali/lowcode-utils": "1.0.60",
    "@ali/ve-i18n-util": "^2.0.0",
    "@ali/ve-icons": "^4.1.9",
    "@ali/ve-less-variables": "2.0.3",
@ -46,7 +46,6 @@
    "@ali/lowcode-test-mate": "^1.0.1",
    "@alib/build-scripts": "^0.1.18",
    "@types/domready": "^1.0.0",
-    "@types/events": "^3.0.0",
    "@types/react": "^16.8.3",
    "@types/react-dom": "^16.8.2",
    "build-plugin-fusion": "0.1.17-beta.0",
--- a/packages/engine/src/engine-core.ts
+++ b/packages/engine/src/engine-core.ts
@ -178,7 +178,6 @@ export async function init(container?: Element, options?: EngineOptions) {
    }
  }
  engineContainer.id = 'engine';
-
  engineConfig.setConfig(engineOptions as any);

  await plugins.init();
--- a/packages/ignitor/package.json
+++ b/packages/ignitor/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-ignitor",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "点火器，bootstrap lce project",
  "main": "lib/index.js",
  "private": true,
@ -39,7 +39,6 @@
  },
  "devDependencies": {
    "@alib/build-scripts": "^0.1.18",
-    "@types/events": "^3.0.0",
    "@types/react": "^16.8.3",
    "@types/react-dom": "^16.8.2",
    "@types/streamsaver": "^2.0.0",
--- a/packages/plugin-designer/package.json
+++ b/packages/plugin-designer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-plugin-designer",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "alibaba lowcode editor designer plugin",
  "files": [
    "es",
@ -18,7 +18,7 @@
  ],
  "author": "xiayang.xy",
  "dependencies": {
-    "@ali/lowcode-editor-core": "1.0.58",
+    "@ali/lowcode-editor-core": "1.0.60",
    "react": "^16.8.1",
    "react-dom": "^16.8.1"
  },
--- a/packages/plugin-outline-pane/package.json
+++ b/packages/plugin-outline-pane/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-plugin-outline-pane",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "Outline pane for Ali lowCode engine",
  "files": [
    "es",
@ -12,10 +12,10 @@
    "build": "build-scripts build --skip-demo"
  },
  "dependencies": {
-    "@ali/lowcode-designer": "1.0.58",
-    "@ali/lowcode-editor-core": "1.0.58",
-    "@ali/lowcode-types": "1.0.58",
-    "@ali/lowcode-utils": "1.0.58",
+    "@ali/lowcode-designer": "1.0.60",
+    "@ali/lowcode-editor-core": "1.0.60",
+    "@ali/lowcode-types": "1.0.60",
+    "@ali/lowcode-utils": "1.0.60",
    "@alifd/next": "^1.19.16",
    "classnames": "^2.2.6",
    "react": "^16",
--- a/packages/plugin-outline-pane/src/icons/index.ts
+++ b/packages/plugin-outline-pane/src/icons/index.ts
@ -0,0 +1,2 @@
+export * from './lock';
+export * from './unlock';
--- a/packages/plugin-outline-pane/src/tree-node.ts
+++ b/packages/plugin-outline-pane/src/tree-node.ts
@ -12,6 +12,7 @@ export default class TreeNode {
   * 是否可以展开
   */
  @computed get expandable(): boolean {
+    if (this.locked) return false;
    return this.hasChildren() || this.hasSlots() || this.dropDetail?.index != null;
  }

@ -86,14 +87,14 @@ export default class TreeNode {
  }

  @computed get locked(): boolean {
-    return this.node.getExtraProp('locked', false)?.getValue() === true;
+    return this.node.getExtraProp('isLocked', false)?.getValue() === true;
  }

  setLocked(flag: boolean) {
    if (flag) {
-      this.node.getExtraProp('locked', true)?.setValue(true);
+      this.node.getExtraProp('isLocked', true)?.setValue(true);
    } else {
-      this.node.getExtraProp('locked', false)?.remove();
+      this.node.getExtraProp('isLocked', false)?.remove();
    }
  }

@ -140,7 +141,7 @@ export default class TreeNode {
    return this.node.componentMeta.icon;
  }

-  @computed get parent() {
+  @computed get parent(): TreeNode | null {
    const { parent } = this.node;
    if (parent) {
      return this.tree.getTreeNode(parent);
--- a/packages/plugin-outline-pane/src/tree.ts
+++ b/packages/plugin-outline-pane/src/tree.ts
@ -8,7 +8,7 @@ export class Tree {
  readonly id: string;

  @computed get root(): TreeNode {
-    return this.getTreeNode(this.document.focusNode);
+    return this.getTreeNode(this.document.focusNode!);
  }

  constructor(readonly document: DocumentModel) {
--- a/packages/plugin-outline-pane/src/views/tree-title.tsx
+++ b/packages/plugin-outline-pane/src/views/tree-title.tsx
@ -1,6 +1,8 @@
 import { Component, KeyboardEvent, FocusEvent, Fragment } from 'react';
 import classNames from 'classnames';
-import { observer, Title, Tip, globalContext, Editor } from '@ali/lowcode-editor-core';
+import { observer, Title, Tip, globalContext, Editor, engineConfig } from '@ali/lowcode-editor-core';
+import { createIcon } from '@ali/lowcode-utils';
+
 import { IconArrowRight } from '../icons/arrow-right';
 import { IconEyeClose } from '../icons/eye-close';
 import { intl, intlNode } from '../locale';
@ -10,7 +12,8 @@ import { IconCond } from '../icons/cond';
 import { IconLoop } from '../icons/loop';
 import { IconRadioActive } from '../icons/radio-active';
 import { IconRadio } from '../icons/radio';
-import { createIcon } from '@ali/lowcode-utils';
+import { IconLock, IconUnlock } from '../icons';
+

 function emitOutlineEvent(type: string, treeNode: TreeNode, rest?: Record<string, unknown>) {
  const editor = globalContext.get(Editor);
@ -83,6 +86,7 @@ export default class TreeTitle extends Component<{
    const isCNode = !treeNode.isRoot();
    const { node } = treeNode;
    const isNodeParent = node.isParental();
+    const isContainer = node.isContainer();
    let style: any;
    if (isCNode) {
      const { depth } = treeNode;
@ -164,34 +168,34 @@ export default class TreeTitle extends Component<{
          )}
        </div>
        {isCNode && isNodeParent && !isModal && <HideBtn treeNode={treeNode} />}
-        {/* isCNode && isNodeParent && <LockBtn treeNode={treeNode} /> */}
+        {engineConfig.get('enableCanvasLock', false) && isContainer && isCNode && isNodeParent && <LockBtn treeNode={treeNode} />}
      </div>
    );
  }
 }

-// @observer
-// class LockBtn extends Component<{ treeNode: TreeNode }> {
-//   shouldComponentUpdate() {
-//     return false;
-//   }
+@observer
+class LockBtn extends Component<{ treeNode: TreeNode }> {
+  shouldComponentUpdate() {
+    return false;
+  }

-//   render() {
-//     const { treeNode } = this.props;
-//     return (
-//       <div
-//         className="tree-node-lock-btn"
-//         onClick={(e) => {
-//           e.stopPropagation();
-//           treeNode.setLocked(!treeNode.locked);
-//         }}
-//       >
-//         {treeNode.locked ? <IconLock /> : <IconUnlock />}
-//         <Tip>{treeNode.locked ? intl('Unlock') : intl('Lock')}</Tip>
-//       </div>
-//     );
-//   }
-// }
+  render() {
+    const { treeNode } = this.props;
+    return (
+      <div
+        className="tree-node-lock-btn"
+        onClick={(e) => {
+          e.stopPropagation();
+          treeNode.setLocked(!treeNode.locked);
+        }}
+      >
+        {treeNode.locked ? <IconLock /> : <IconUnlock />}
+        <Tip>{treeNode.locked ? intl('Unlock') : intl('Lock')}</Tip>
+      </div>
+    );
+  }
+}

@observer
 class HideBtn extends Component<{ treeNode: TreeNode }> {
@ -217,6 +221,7 @@ class HideBtn extends Component<{ treeNode: TreeNode }> {
  }
 }

+
@observer
 class ExpandBtn extends Component<{ treeNode: TreeNode }> {
  shouldComponentUpdate() {
--- a/packages/rax-renderer/package.json
+++ b/packages/rax-renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-rax-renderer",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "Rax renderer for Ali lowCode engine",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -30,8 +30,8 @@
    "build": "build-scripts build"
  },
  "dependencies": {
-    "@ali/lowcode-renderer-core": "1.0.58",
-    "@ali/lowcode-utils": "1.0.58",
+    "@ali/lowcode-renderer-core": "1.0.60",
+    "@ali/lowcode-utils": "1.0.60",
    "rax-find-dom-node": "^1.0.1"
  },
  "devDependencies": {
--- a/packages/rax-simulator-renderer/package.json
+++ b/packages/rax-simulator-renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-rax-simulator-renderer",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "rax simulator renderer for alibaba lowcode designer",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -11,10 +11,10 @@
    "cloud-build": "build-scripts build --skip-demo"
  },
  "dependencies": {
-    "@ali/lowcode-designer": "1.0.58",
-    "@ali/lowcode-rax-renderer": "1.0.58",
-    "@ali/lowcode-types": "1.0.58",
-    "@ali/lowcode-utils": "1.0.58",
+    "@ali/lowcode-designer": "1.0.60",
+    "@ali/lowcode-rax-renderer": "1.0.60",
+    "@ali/lowcode-types": "1.0.60",
+    "@ali/lowcode-utils": "1.0.60",
    "@ali/recore-rax": "^1.2.4",
    "@ali/vu-css-style": "^1.0.2",
    "@recore/obx": "^1.0.8",
@ -55,6 +55,6 @@
  "publishConfig": {
    "registry": "https://registry.npm.alibaba-inc.com"
  },
-  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-rax-simulator-renderer@1.0.55/build/index.html",
+  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-rax-simulator-renderer@1.0.59/build/index.html",
  "gitHead": "3bfd7df92985ec6c9d2ccb8ba95d7b0829fa2b1d"
 }
--- a/packages/react-renderer/package.json
+++ b/packages/react-renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-react-renderer",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "react renderer for ali lowcode engine",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -23,7 +23,7 @@
    "react"
  ],
  "dependencies": {
-    "@ali/lowcode-renderer-core": "1.0.58",
+    "@ali/lowcode-renderer-core": "1.0.60",
    "@alifd/next": "^1.21.16"
  },
  "devDependencies": {
--- a/packages/react-simulator-renderer/package.json
+++ b/packages/react-simulator-renderer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-react-simulator-renderer",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "react simulator renderer for alibaba lowcode designer",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -13,10 +13,10 @@
    "cloud-build": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --skip-demo"
  },
  "dependencies": {
-    "@ali/lowcode-designer": "1.0.58",
-    "@ali/lowcode-react-renderer": "1.0.58",
-    "@ali/lowcode-types": "1.0.58",
-    "@ali/lowcode-utils": "1.0.58",
+    "@ali/lowcode-designer": "1.0.60",
+    "@ali/lowcode-react-renderer": "1.0.60",
+    "@ali/lowcode-types": "1.0.60",
+    "@ali/lowcode-utils": "1.0.60",
    "@ali/vu-css-style": "^1.0.2",
    "@recore/obx": "^1.0.8",
    "@recore/obx-react": "^1.0.7",
--- a/packages/react-simulator-renderer/src/renderer-view.tsx
+++ b/packages/react-simulator-renderer/src/renderer-view.tsx
@ -1,10 +1,12 @@
+import { ReactInstance, Fragment, Component, createElement } from 'react';
+import { Router, Route, Switch } from 'react-router';
+import cn from 'classnames';
 import { Node } from '@ali/lowcode-designer';
 import LowCodeRenderer from '@ali/lowcode-react-renderer';
-import { ReactInstance, Fragment, Component, createElement } from 'react';
 import { observer } from '@recore/obx-react';
-import { isFromVC } from '@ali/lowcode-utils';
+import { isFromVC, getClosestNode } from '@ali/lowcode-utils';
 import { SimulatorRendererContainer, DocumentInstance } from './renderer';
-import { Router, Route, Switch } from 'react-router';
+
 import './renderer.less';

 const DEFAULT_SIMULATOR_LOCALE = 'zh-CN';
@ -171,9 +173,16 @@ class Renderer extends Component<{
            (children == null || (Array.isArray(children) && !children.length)) &&
            (!viewProps.style || Object.keys(viewProps.style).length === 0)
          ) {
+            let defaultPlaceholder = '拖拽组件或模板到这里';
+            const lockedNode = getClosestNode(leaf, (node) => {
+              return node?.getExtraProp('isLocked')?.getValue() === true;
+            });
+            if (lockedNode) {
+              defaultPlaceholder = '锁定元素及子元素无法编辑';
+            }
            children = (
-              <div className="lc-container-placeholder" style={viewProps.placeholderStyle}>
-                {viewProps.placeholder || '拖拽组件或模板到这里'}
+              <div className={cn('lc-container-placeholder', { 'lc-container-locked': !!lockedNode })} style={viewProps.placeholderStyle}>
+                {viewProps.placeholder || defaultPlaceholder}
              </div>
            );
          }
--- a/packages/react-simulator-renderer/src/renderer.less
+++ b/packages/react-simulator-renderer/src/renderer.less
@ -65,6 +65,10 @@ html.engine-cursor-ew-resize, html.engine-cursor-ew-resize * {
  align-items: center;
  justify-content: center;
  font-size: 14px;
+
+  &.lc-container-locked {
+    background: #eccfcf;
+  }
 }

 body.engine-document {
@ -87,3 +91,5 @@ body.engine-document {
 #app {
  height: 100vh;
 }
+
+
--- a/packages/renderer-core/package.json
+++ b/packages/renderer-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-renderer-core",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "renderer core",
  "license": "MIT",
  "main": "lib/index.js",
@ -19,7 +19,6 @@
    "@ali/lowcode-datasource-engine": "^1.0.22",
    "classnames": "^2.2.6",
    "debug": "^4.1.1",
-    "events": "^3.0.0",
    "fetch-jsonp": "^1.1.3",
    "intl-messageformat": "^9.3.1",
    "jsonuri": "^2.1.2",
--- a/packages/renderer-core/src/renderer/base.tsx
+++ b/packages/renderer-core/src/renderer/base.tsx
@ -462,6 +462,7 @@ export default function baseRenererFactory() {
        // 对于可以获取到ref的组件做特殊处理
        if (!acceptsRef(Comp)) {
          Comp = compWrapper(Comp);
+          components[schema.componentName] = Comp;
        }
        otherProps.ref = (ref: any) => {
          this.$(props.fieldId || props.ref, ref); // 收集ref
--- a/packages/types/package.json
+++ b/packages/types/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-types",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "Types for Ali lowCode engine",
  "files": [
    "es",
--- a/packages/types/src/schema.ts
+++ b/packages/types/src/schema.ts
@ -22,6 +22,7 @@ export interface NodeSchema {
  loop?: CompositeValue; // 循环数据
  loopArgs?: [string, string]; // 循环迭代对象、索引名称 ["item", "index"]
  children?: NodeData | NodeData[]; // 子节点
+  isLocked?: boolean; // 是否锁定

  // ------- future support -----
  conditionGroup?: string;
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-utils",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "Utils for Ali lowCode engine",
  "files": [
    "es",
@ -12,7 +12,7 @@
    "build": "build-scripts build --skip-demo"
  },
  "dependencies": {
-    "@ali/lowcode-types": "1.0.58",
+    "@ali/lowcode-types": "1.0.60",
    "@ali/ve-inline-tip": "^3.0.2",
    "@alifd/next": "^1.19.16",
    "lodash.get": "^4.4.2",
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@ -22,3 +22,4 @@ export * from './build-components';
 export * from './appHelper';
 export * from './misc';
 export * from './schema';
+export * from './node-helper';
--- a/packages/utils/src/node-helper.ts
+++ b/packages/utils/src/node-helper.ts
@ -0,0 +1,14 @@
+// 仅使用类型
+import { Node } from '@ali/lowcode-designer';
+
+export const getClosestNode = (node: Node, until: (node: Node) => boolean): Node | undefined => {
+  if (!node) {
+    return undefined;
+  }
+  if (until(node)) {
+    return node;
+  } else {
+    // @ts-ignore
+    return getClosestNode(node.getParent(), until);
+  }
+};
--- a/packages/vision-polyfill/package.json
+++ b/packages/vision-polyfill/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ali/lowcode-vision-polyfill",
-  "version": "1.0.58",
+  "version": "1.0.60",
  "description": "Vision Polyfill for Ali lowCode engine",
  "main": "lib/index.js",
  "private": true,
@ -18,10 +18,10 @@
  },
  "license": "MIT",
  "dependencies": {
-    "@ali/lowcode-designer": "1.0.58",
-    "@ali/lowcode-editor-core": "1.0.58",
-    "@ali/lowcode-editor-skeleton": "1.0.58",
-    "@ali/lowcode-utils": "1.0.58",
+    "@ali/lowcode-designer": "1.0.60",
+    "@ali/lowcode-editor-core": "1.0.60",
+    "@ali/lowcode-editor-skeleton": "1.0.60",
+    "@ali/lowcode-utils": "1.0.60",
    "@ali/ve-i18n-util": "^2.0.0",
    "@ali/ve-icons": "^4.1.9",
    "@ali/ve-less-variables": "2.0.3",
@ -42,7 +42,6 @@
    "@ali/lowcode-test-mate": "^1.0.1",
    "@alib/build-scripts": "^0.1.18",
    "@types/domready": "^1.0.0",
-    "@types/events": "^3.0.0",
    "@types/react": "^16.8.3",
    "@types/react-dom": "^16.8.2",
    "build-plugin-fusion": "0.1.17-beta.0",