diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts
index 0de4a9224..f892f7dd8 100644
--- a/packages/designer/src/component-meta.ts
+++ b/packages/designer/src/component-meta.ts
@@ -20,6 +20,7 @@ import { IconComponent } from './icons/component';
 import { IconRemove } from './icons/remove';
 import { IconClone } from './icons/clone';
 import { ReactElement } from 'react';
+import { IconHidden } from './icons/hidden';
 
 function ensureAList(list?: string | string[]): string[] | null {
   if (!list) {
@@ -341,6 +342,20 @@ const builtinComponentActions: ComponentAction[] = [
     },
     important: true,
   },
+  {
+    name: 'hide',
+    content: {
+      icon: IconHidden,
+      title: intlNode('hide'),
+      action(node: Node) {
+        node.getExtraProp('hidden', true)?.setValue(true);
+      },
+    },
+    condition: (node: Node) => {
+      return node.componentMeta.isModal;
+    },
+    important: true,
+  },
 ];
 
 export function removeBuiltinComponentAction(name: string) {
diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts
index a8d469309..1aae13208 100644
--- a/packages/designer/src/document/node/node.ts
+++ b/packages/designer/src/document/node/node.ts
@@ -358,7 +358,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
 
   @computed hasCondition() {
     const v = this.getExtraProp('condition', false)?.getValue();
-    return v != null && v !== '';
+    return v != null && v !== '' && v !== true;
   }
 
   @computed hasLoop() {
diff --git a/packages/designer/src/locale/en-US.json b/packages/designer/src/locale/en-US.json
index 69eb61330..d895e4aba 100644
--- a/packages/designer/src/locale/en-US.json
+++ b/packages/designer/src/locale/en-US.json
@@ -1,6 +1,7 @@
 {
   "copy": "Copy",
   "remove": "Remove",
+  "hide": "Hide",
   "Condition Group": "Condition Group",
   "No opened document": "No opened document, open some document to editing"
 }
diff --git a/packages/designer/src/locale/zh-CN.json b/packages/designer/src/locale/zh-CN.json
index cafba4f51..dc57f75ff 100644
--- a/packages/designer/src/locale/zh-CN.json
+++ b/packages/designer/src/locale/zh-CN.json
@@ -1,6 +1,7 @@
 {
   "copy": "复制",
   "remove": "删除",
+  "hide": "隐藏",
   "Condition Group": "条件组",
   "No opened document": "没有打开的页面，请选择页面打开编辑"
 }
diff --git a/packages/editor-skeleton/src/layouts/top-area.tsx b/packages/editor-skeleton/src/layouts/top-area.tsx
index 2b8535117..94b78654f 100644
--- a/packages/editor-skeleton/src/layouts/top-area.tsx
+++ b/packages/editor-skeleton/src/layouts/top-area.tsx
@@ -4,23 +4,23 @@ import { observer } from '@ali/lowcode-editor-core';
 import Area from '../area';
 
 @observer
-export default class TopArea extends Component<{ area: Area }> {
+export default class TopArea extends Component<{ area: Area, itemClassName?: string }> {
   render() {
-    const { area } = this.props;
+    const { area, itemClassName } = this.props;
     return (
       <div className={classNames("lc-top-area", {
         'lc-area-visible': area.visible
       })}>
-        <Contents area={area} />
+        <Contents area={area} itemClassName={itemClassName} />
       </div>
     );
   }
 }
 
 @observer
-class Contents extends Component<{ area: Area }> {
+class Contents extends Component<{ area: Area, itemClassName?: string }> {
   render() {
-    const { area } = this.props;
+    const { area, itemClassName } = this.props;
     const left: any[] = [];
     const center: any[] = [];
     const right: any[] = [];
@@ -29,12 +29,17 @@ class Contents extends Component<{ area: Area }> {
       const index2 = b.config?.index || 0;
       return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
     }).forEach(item => {
+      const content = (
+        <div className={itemClassName || ''}>
+          {item.content}
+        </div>
+      );
       if (item.align === 'center') {
-        center.push(item.content);
+        center.push(content);
       } else if (item.align === 'left') {
-        left.push(item.content);
+        left.push(content);
       } else {
-        right.push(item.content);
+        right.push(content);
       }
     });
     return (
diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less
index 4efca072d..a6f3a9359 100644
--- a/packages/editor-skeleton/src/layouts/workbench.less
+++ b/packages/editor-skeleton/src/layouts/workbench.less
@@ -185,12 +185,12 @@ body {
     display: flex;
     margin-bottom: 2px;
     padding: 8px;
-    .lc-top-area-left{}
+
     .lc-top-area-center{
       flex: 1;
       display: flex;
-      justify-content: flex-end;
-      margin-right: 8px;
+      justify-content: center;
+      margin: 0 8px;
     }
     .lc-top-area-right{
       display: flex;
@@ -268,6 +268,13 @@ body {
         .lc-title{
           padding: 12px;
           flex-direction: column;
+          width: 46px;
+          height: 46px;
+
+          svg {
+            fill: var(--color-icon-normal,rgba(31,56,88,.4));
+          }
+
           &.has-tip{
             cursor: pointer;
           }
@@ -324,6 +331,7 @@ body {
       flex: 1;
       display: flex;
       flex-direction: column;
+      z-index: 10;
       .lc-toolbar {
         height: var(--toolbar-height);
         background-color: var(--color-pane-background);
diff --git a/packages/editor-skeleton/src/layouts/workbench.tsx b/packages/editor-skeleton/src/layouts/workbench.tsx
index af50045c4..06f0b5055 100644
--- a/packages/editor-skeleton/src/layouts/workbench.tsx
+++ b/packages/editor-skeleton/src/layouts/workbench.tsx
@@ -13,16 +13,16 @@ import RightArea from './right-area';
 import './workbench.less';
 
 @observer
-export class Workbench extends Component<{ skeleton: Skeleton, className?: string }> {
+export class Workbench extends Component<{ skeleton: Skeleton, className?: string, topAreaItemClassName?: string }> {
   shouldComponentUpdate() {
     return false;
   }
 
   render() {
-    const { skeleton, className } = this.props;
+    const { skeleton, className, topAreaItemClassName } = this.props;
     return (
       <div className={classNames('lc-workbench', className)}>
-        <TopArea area={skeleton.topArea} />
+        <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} />
         <div className="lc-workbench-body">
           <LeftArea area={skeleton.leftArea} />
           <LeftFloatPane area={skeleton.leftFloatArea} />
diff --git a/packages/editor-skeleton/src/transducers/addon-combine.ts b/packages/editor-skeleton/src/transducers/addon-combine.ts
index c0ee2a480..d9d2b0161 100644
--- a/packages/editor-skeleton/src/transducers/addon-combine.ts
+++ b/packages/editor-skeleton/src/transducers/addon-combine.ts
@@ -46,7 +46,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
   const supportedLifecycles =
     events.supportedLifecycles ||
     (isRoot
-      ? [
+      ? /*[
           {
             description: '初始化时',
             name: 'constructor',
@@ -63,7 +63,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
             description: '卸载时',
             name: 'componentWillUnmount',
           },
-        ]
+        ]*/ null
       : null);
   if (supportedLifecycles) {
     eventsDefinition.push({
@@ -81,6 +81,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
   }
   //  通用设置
   const propsGroup = props || [];
+  /*
   propsGroup.push({
     name: '#generals',
     title: { type: 'i18n', 'zh-CN': '通用', 'en-US': 'General' },
@@ -101,14 +102,14 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
         title: 'Ref',
         setter: 'StringSetter',
       },
-      /*
       {
         name: '!more',
         title: '更多',
         setter: 'PropertiesSetter',
-      },*/
+      },
     ],
   });
+  */
   const combined: FieldConfig[] = [
     {
       title: { type: 'i18n', 'zh-CN': '属性', 'en-US': 'Props' },
@@ -182,8 +183,12 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
       items: [
         {
           name: '___condition',
-          title: { type: 'i18n', 'zh-CN': '条件显示', 'en-US': 'Condition' },
-          setter: 'ExpressionSetter',
+          title: { type: 'i18n', 'zh-CN': '是否渲染', 'en-US': 'Condition' },
+          setter: [{
+            componentName: 'BoolSetter',
+          }, {
+            componentName: 'VariableSetter'
+          }],
         },
         {
           name: '#loop',
@@ -192,27 +197,14 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
             {
               name: '___loop',
               title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' },
-              setter: {
-                componentName: 'MixinSetter',
+              setter: [{
+                componentName: 'JsonSetter',
                 props: {
-                  // TODO:
-                  setters: [
-                    {
-                      componentName: 'JSONSetter',
-                      props: {
-                        mode: 'popup',
-                        placeholder: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data' },
-                      },
-                    },
-                    {
-                      componentName: 'ExpressionSetter',
-                      props: {
-                        placeholder: { type: 'i18n', 'zh-CN': '绑定数据', 'en-US': 'Bind Data' },
-                      },
-                    },
-                  ],
+                  label: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data'},
                 },
-              },
+              }, {
+                componentName: 'VariableSetter'
+              }],
             },
             {
               name: '___loopArgs.0',
@@ -236,8 +228,12 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
             },
             {
               name: 'key',
-              title: 'Key',
-              setter: 'ExpressionSetter',
+              title: '循环 Key',
+              setter: [{
+                componentName: 'StringSetter',
+              }, {
+                componentName: 'VariableSetter'
+              }],
             },
           ],
         },
diff --git a/packages/editor-skeleton/src/widget/widget-container.ts b/packages/editor-skeleton/src/widget/widget-container.ts
index 268f5fcfb..522648301 100644
--- a/packages/editor-skeleton/src/widget/widget-container.ts
+++ b/packages/editor-skeleton/src/widget/widget-container.ts
@@ -39,7 +39,7 @@ export default class WidgetContainer<T extends WidgetItem = any, G extends Widge
     if (nameOrItem && typeof nameOrItem === 'string') {
       item = this.get(nameOrItem);
     }
-    if (!isActiveable(nameOrItem)) {
+    if (!isActiveable(item)) {
       item = null;
     }
 
@@ -63,7 +63,7 @@ export default class WidgetContainer<T extends WidgetItem = any, G extends Widge
     if (nameOrItem && typeof nameOrItem === 'string') {
       item = this.get(nameOrItem);
     }
-    if (!isActiveable(nameOrItem)) {
+    if (!isActiveable(item)) {
       item = null;
     }
     if (this._current === item) {
diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx
index 3d7c6b373..507712f42 100644
--- a/packages/plugin-outline-pane/src/views/tree-title.tsx
+++ b/packages/plugin-outline-pane/src/views/tree-title.tsx
@@ -126,7 +126,7 @@ export default class TreeTitle extends Component<{
           )}
         </div>
         {isCNode && isNodeParent && <HideBtn treeNode={treeNode} />}
-        {isCNode && isNodeParent && <LockBtn treeNode={treeNode} />}
+        {/*isCNode && isNodeParent && <LockBtn treeNode={treeNode} />*/}
       </div>
     );
   }
diff --git a/packages/react-renderer/src/engine/base.jsx b/packages/react-renderer/src/engine/base.jsx
index 6bf45fe3f..742c24574 100644
--- a/packages/react-renderer/src/engine/base.jsx
+++ b/packages/react-renderer/src/engine/base.jsx
@@ -228,6 +228,11 @@ export default class BaseEngine extends PureComponent {
 
     let Comp = components[schema.componentName] || Div;
 
+    console.info('node schema', schema, engine.props);
+    if (schema.hidden) {
+      return null;
+    }
+
     if (schema.loop !== undefined) {
       return this.__createLoopVirtualDom(
         {
diff --git a/packages/react-simulator-renderer/package.json b/packages/react-simulator-renderer/package.json
index d031eb62c..b62d92110 100644
--- a/packages/react-simulator-renderer/package.json
+++ b/packages/react-simulator-renderer/package.json
@@ -21,6 +21,7 @@
     "@recore/obx-react": "^1.0.7",
     "classnames": "^2.2.6",
     "react": "^16",
+    "@ali/vu-css-style": "^1.0.2",
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx
index e964c2be9..f8ad8c747 100644
--- a/packages/react-simulator-renderer/src/renderer-view.tsx
+++ b/packages/react-simulator-renderer/src/renderer-view.tsx
@@ -1,9 +1,11 @@
 import LowCodeRenderer from '@ali/lowcode-react-renderer';
+import { isObject } from 'lodash';
 import { ReactInstance, Fragment, Component, createElement } from 'react';
 import { observer } from '@recore/obx-react';
 import { SimulatorRenderer } from './renderer';
 import { host } from './host';
 import './renderer.less';
+import { toCss } from '@ali/vu-css-style';
 
 // patch cloneElement avoid lost keyProps
 const originCloneElement = window.React.cloneElement;
@@ -84,6 +86,10 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
           const { __id, __desingMode, ...viewProps } = props;
           viewProps.componentId = __id;
           viewProps._leaf = host.document.getNode(__id);
+
+          // FIXME: 此处未来使用propsReducer方式处理
+          this.createNodeStyleSheet(viewProps);
+
           return createElement(
             Component,
             viewProps,
@@ -99,4 +105,28 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
       />
     );
   }
+  createNodeStyleSheet(props: any) {
+    if (props && props.fieldId) {
+      let styleProp = props.__style__;
+
+      if (isObject(styleProp)) {
+        styleProp = toCss(styleProp);
+      }
+
+      if (typeof styleProp === 'string') {
+        const s = document.createElement('style');
+        const cssId = '_style_pesudo_' + props.fieldId;
+        const cssClass = '_css_pesudo_' + props.fieldId;
+
+        props.className = cssClass;
+        s.setAttribute('type', 'text/css');
+        s.setAttribute('id', cssId);
+        document.getElementsByTagName('head')[0].appendChild(s);
+
+        s.appendChild(document.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
+
+        return s;
+      }
+    }
+  }
 }
diff --git a/packages/vision-preset/src/editor.ts b/packages/vision-preset/src/editor.ts
index 5c064a3b0..1b9a21263 100644
--- a/packages/vision-preset/src/editor.ts
+++ b/packages/vision-preset/src/editor.ts
@@ -2,17 +2,14 @@ import { isJSBlock, isJSSlot } from '@ali/lowcode-types';
 import { isPlainObject } from '@ali/lowcode-utils';
 import { globalContext, Editor } from '@ali/lowcode-editor-core';
 import { Designer, TransformStage, addBuiltinComponentAction } from '@ali/lowcode-designer';
-import { registerSetters } from '@ali/lowcode-setters';
-// import Outline from '@ali/lowcode-plugin-outline-pane';
+// import { registerSetters } from '@ali/lowcode-setters';
+import Outline from '@ali/lowcode-plugin-outline-pane';
 
 import DesignerPlugin from '@ali/lowcode-plugin-designer';
 import { Skeleton, SettingsPrimaryPane } from '@ali/lowcode-editor-skeleton';
 
-import Preview from '@ali/lowcode-plugin-sample-preview';
-// import SourceEditor from '@ali/lowcode-plugin-source-editor';
 import { i18nReducer } from './i18n-reducer';
 import { InstanceNodeSelector } from './components';
-import { Divider } from '@alifd/next';
 
 export const editor = new Editor();
 globalContext.register(editor, Editor);
@@ -81,24 +78,14 @@ skeleton.add({
   type: 'Panel',
   content: SettingsPrimaryPane,
 });
-// skeleton.add({
-//   area: 'leftArea',
-//   name: 'outlinePane',
-//   type: 'PanelDock',
-//   content: Outline,
-//   panelProps: {
-//     area: 'leftFixedArea',
-//   },
-// });
-
 skeleton.add({
-  area: 'topArea',
-  type: 'Dock',
-  name: 'preview',
-  props: {
-    align: 'right',
+  area: 'leftArea',
+  name: 'outlinePane',
+  type: 'PanelDock',
+  content: Outline,
+  panelProps: {
+    area: 'leftFixedArea',
   },
-  content: Preview,
 });
 
 // skeleton.add({
diff --git a/packages/vision-preset/src/index.ts b/packages/vision-preset/src/index.ts
index b3eaa9b01..23dbe607a 100644
--- a/packages/vision-preset/src/index.ts
+++ b/packages/vision-preset/src/index.ts
@@ -44,6 +44,7 @@ function init(container?: Element) {
     createElement(Workbench, {
       skeleton,
       className: 'engine-main',
+      topAreaItemClassName: 'engine-actionitem',
     }),
     container,
   );
diff --git a/packages/vision-preset/src/panes.ts b/packages/vision-preset/src/panes.ts
index 3604e6186..4630e2f1a 100644
--- a/packages/vision-preset/src/panes.ts
+++ b/packages/vision-preset/src/panes.ts
@@ -98,6 +98,7 @@ function upgradeConfig(config: OldPaneConfig): IWidgetBaseConfig & { area: strin
         newConfig.content = contents.map(({ title, content, tip }) => {
           return {
             type: "Panel",
+            name: title,
             content,
             props: {
               title,
diff --git a/packages/vision-preset/src/vision.less b/packages/vision-preset/src/vision.less
index d0c17fcc0..7c04b0955 100644
--- a/packages/vision-preset/src/vision.less
+++ b/packages/vision-preset/src/vision.less
@@ -92,7 +92,8 @@ html.engine-blur #engine {
   .next-checkbox-group,.next-date-picker,.next-input,.next-month-picker,
   .next-number-picker,.next-radio-group,.next-range,.next-range-picker,
   .next-rating,.next-select,.next-switch,.next-time-picker,.next-upload,
-  .next-year-picker {
+  .next-year-picker,
+  .next-breadcrumb-item,.next-calendar-header,.next-calendar-table {
     pointer-events: auto !important;
   }
 }