From f44837850e0a7069979c74536163759faa3b3691 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Tue, 21 Nov 2023 19:09:32 +0100
Subject: [PATCH 1/4] Improved Documentation

---
 client/packages/lowcoder-comps/package.json | 2 +-
 client/packages/lowcoder/index.html         | 2 +-
 client/packages/lowcoder/package.json       | 1 -
 client/packages/lowcoder/src/app-env.d.ts   | 2 +-
 client/yarn.lock                            | 8 --------
 5 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
index f07a3e2f4..0fb29c955 100644
--- a/client/packages/lowcoder-comps/package.json
+++ b/client/packages/lowcoder-comps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "license": "MIT",
   "dependencies": {
diff --git a/client/packages/lowcoder/index.html b/client/packages/lowcoder/index.html
index 2a45e2639..6b1afd54d 100644
--- a/client/packages/lowcoder/index.html
+++ b/client/packages/lowcoder/index.html
@@ -9,7 +9,7 @@
     <meta
       lang="en"
       name="description"
-      content="A developer-friendly open-source low code platform to build internal apps within minutes."
+      content="Lowcoder | rapid App & VideoMeeting builder for everyone."
     />
     <meta name="theme-color" content="#000000" />
     <style>
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index 3f9dc3541..c7be751f6 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -104,7 +104,6 @@
     "ua-parser-js": "^1.0.33",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.0",
-    "weixin-js-sdk": "^1.6.0",
     "xlsx": "^0.18.5"
   },
   "scripts": {
diff --git a/client/packages/lowcoder/src/app-env.d.ts b/client/packages/lowcoder/src/app-env.d.ts
index 92184884d..2b02bb616 100644
--- a/client/packages/lowcoder/src/app-env.d.ts
+++ b/client/packages/lowcoder/src/app-env.d.ts
@@ -42,4 +42,4 @@ declare var REACT_APP_BUNDLE_TYPE: "sdk" | "app";
 declare var REACT_APP_DISABLE_JS_SANDBOX: string;
 declare var REACT_APP_BUNDLE_BUILTIN_PLUGIN: string;
 
-declare module "weixin-js-sdk";
+// declare module "weixin-js-sdk";
diff --git a/client/yarn.lock b/client/yarn.lock
index 2a05e158b..f3ac1c385 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -12092,7 +12092,6 @@ __metadata:
     vite-plugin-svgr: ^2.2.2
     vite-tsconfig-paths: ^3.6.0
     web-vitals: ^2.1.0
-    weixin-js-sdk: ^1.6.0
     xlsx: ^0.18.5
   languageName: unknown
   linkType: soft
@@ -18916,13 +18915,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"weixin-js-sdk@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "weixin-js-sdk@npm:1.6.0"
-  checksum: 274755aaad99dff7a4bedc009798b1d37638c575df221988d05e5e776be9e8399369e374653848da8d16a6d940751482736ac7c88289cd349d39d556dbbf1b69
-  languageName: node
-  linkType: hard
-
 "whatwg-encoding@npm:^1.0.1, whatwg-encoding@npm:^1.0.5":
   version: 1.0.5
   resolution: "whatwg-encoding@npm:1.0.5"

From 1d8fe4028c0c4e2168e6276a920762825da88802 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Sat, 25 Nov 2023 20:44:25 +0100
Subject: [PATCH 2/4] Introducing Layout / Logic Mode

---
 .../src/components/Section.tsx                |   1 +
 .../src/i18n/design/locales/en.ts             |   1 +
 .../src/icons/icon-ShowLayout.svg             |  20 +++
 .../lowcoder-design/src/icons/index.ts        |   1 +
 client/packages/lowcoder/index.html           |  13 +-
 .../src/comps/comps/buttonComp/buttonComp.tsx |  34 +++--
 .../comps/comps/buttonComp/dropdownComp.tsx   |  36 +++--
 .../src/comps/comps/buttonComp/linkComp.tsx   |  32 +++--
 .../comps/comps/buttonComp/scannerComp.tsx    |  31 +++--
 .../comps/buttonComp/toggleButtonComp.tsx     |  63 +++++----
 .../comps/comps/commentComp/commentComp.tsx   | 125 ++++++++++-------
 .../comps/containerComp/containerComp.tsx     |  22 ++-
 .../comps/containerComp/containerView.tsx     |   2 +-
 .../src/comps/comps/customComp/customComp.tsx |  20 ++-
 .../src/comps/comps/dateComp/dateComp.tsx     | 127 +++++++++++-------
 .../src/comps/comps/dateComp/dateCompUtil.ts  |   3 +-
 .../comps/comps/dateComp/dateRangeUIView.tsx  |  11 ++
 .../src/comps/comps/dateComp/dateUIView.tsx   |   3 +
 .../src/comps/comps/dateComp/timeComp.tsx     | 125 ++++++++++-------
 .../comps/comps/dateComp/timeRangeUIView.tsx  |  11 ++
 .../src/comps/comps/dateComp/timeUIView.tsx   |   3 +
 .../src/comps/comps/fileComp/fileComp.tsx     |  77 ++++++-----
 .../src/comps/comps/formComp/formComp.tsx     |  46 +++++--
 .../lowcoder/src/comps/comps/textComp.tsx     |  10 +-
 .../comps/comps/textInputComp/inputComp.tsx   |  39 +++---
 .../comps/comps/textInputComp/mentionComp.tsx |  67 ++++-----
 .../comps/textInputComp/passwordComp.tsx      |  45 ++++---
 .../comps/textInputComp/textAreaComp.tsx      |  34 +++--
 .../comps/controls/styleControlConstants.tsx  |   2 +-
 .../lowcoder/src/comps/editorState.tsx        |  12 +-
 .../packages/lowcoder/src/i18n/locales/en.ts  |  15 ++-
 .../lowcoder/src/pages/common/header.tsx      |  39 +++++-
 .../src/pages/editor/editorSkeletonView.tsx   |   5 +-
 .../lowcoder/src/pages/editor/editorView.tsx  |  33 ++++-
 .../lowcoder/src/util/localStorageUtil.ts     |  17 +++
 35 files changed, 727 insertions(+), 398 deletions(-)
 create mode 100644 client/packages/lowcoder-design/src/icons/icon-ShowLayout.svg

diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
index da58f9588..e1c019bde 100644
--- a/client/packages/lowcoder-design/src/components/Section.tsx
+++ b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -142,5 +142,6 @@ export const sectionNames = {
   validation: trans("prop.validation"),
   layout: trans("prop.layout"),
   style: trans("prop.style"),
+  data: trans("prop.data"),
   meetings : trans("prop.meetings"), // added by Falk Wolsky
 };
diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
index 59e045b55..c6fa81f69 100644
--- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
+++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
@@ -24,6 +24,7 @@ export const en = {
     layout: "Layout",
     style: "Style",
     meetings : "Meeting Settings",
+    data: "Data",
   },
   passwordInput: {
     label: "Password:",
diff --git a/client/packages/lowcoder-design/src/icons/icon-ShowLayout.svg b/client/packages/lowcoder-design/src/icons/icon-ShowLayout.svg
new file mode 100644
index 000000000..c47960aba
--- /dev/null
+++ b/client/packages/lowcoder-design/src/icons/icon-ShowLayout.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#DDDDDD;stroke-width:1.5;}
+	.st1{display:none;fill:none;stroke:#DDDDDD;stroke-width:1.5;stroke-linecap:square;}
+	.st2{display:none;fill:none;stroke:#DDDDDD;stroke-width:1.5;stroke-linecap:round;}
+	.st3{fill:none;stroke:#DDDDDD;stroke-width:1.5;stroke-linecap:round;}
+</style>
+<g>
+	<path class="st0" d="M7.8,5.8h12.5c1.1,0,2,0.9,2,2v12.5c0,1.1-0.9,2-2,2H7.8c-1.1,0-2-0.9-2-2V7.8C5.8,6.6,6.6,5.8,7.8,5.8z"/>
+	<line class="st1" x1="6" y1="16" x2="21" y2="16"/>
+	<line class="st2" x1="9.5" y1="19" x2="11.5" y2="19"/>
+	<line class="st3" x1="8.9" y1="8.5" x2="11.9" y2="8.5"/>
+	<path class="st3" d="M9.8,10.5h8.4c0.6,0,1,0.4,1,1V13c0,0.6-0.4,1-1,1H9.8c-0.6,0-1-0.4-1-1v-1.5C8.8,10.9,9.3,10.5,9.8,10.5z"/>
+	<path class="st3" d="M9.8,16H12c0.6,0,1,0.4,1,1v1.5c0,0.6-0.4,1-1,1H9.8c-0.6,0-1-0.4-1-1V17C8.8,16.5,9.3,16,9.8,16z"/>
+	<path class="st3" d="M16,16h2.2c0.6,0,1,0.4,1,1v1.5c0,0.6-0.4,1-1,1H16c-0.6,0-1-0.4-1-1V17C15,16.5,15.4,16,16,16z"/>
+</g>
+</svg>
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
index 4be847768..61c1679f8 100644
--- a/client/packages/lowcoder-design/src/icons/index.ts
+++ b/client/packages/lowcoder-design/src/icons/index.ts
@@ -64,6 +64,7 @@ export { ReactComponent as WarningWhiteIcon } from "./icon-warning-white.svg";
 export { ReactComponent as WarningIcon } from "./icon-warning.svg";
 export { ReactComponent as WidthDragIcon } from "./icon-widthDrag.svg";
 export { ReactComponent as ManyCheckboxIcon } from "./manyCheckbox.svg";
+export { ReactComponent as Layout } from "./icon-ShowLayout.svg";
 export { ReactComponent as Left } from "./icon-ShowLeft.svg";
 export { ReactComponent as Middle } from "./icon-ShowMiddle.svg";
 export { ReactComponent as Right } from "./icon-ShowRight.svg";
diff --git a/client/packages/lowcoder/index.html b/client/packages/lowcoder/index.html
index 6b1afd54d..c83e225aa 100644
--- a/client/packages/lowcoder/index.html
+++ b/client/packages/lowcoder/index.html
@@ -2,16 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover"
-    />
-    <meta
-      lang="en"
-      name="description"
-      content="Lowcoder | rapid App & VideoMeeting builder for everyone."
-    />
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover"/>
+    <meta lang="en" name="description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
     <meta name="theme-color" content="#000000" />
+    <meta property="iframely:title" content="Lowcoder" />
+    <meta property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
     <style>
       html,
       body {
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index c554a733a..6e02a5ea3 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -24,6 +24,8 @@ import {
 } from "./buttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 
+import React, { useContext } from "react";
+
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
   margin-right: 4px;
@@ -161,24 +163,30 @@ const ButtonTmpComp = (function () {
           {children.text.propertyView({ label: trans("text") })}
         </Section>
 
-        <Section name={sectionNames.interaction}>
-          {children.type.propertyView({ label: trans("prop.type"), radioButton: true })}
-          {isDefault(children.type.getView())
-            ? [
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.interaction}>
+            {children.type.propertyView({ label: trans("prop.type"), radioButton: true })}
+            {isDefault(children.type.getView())
+              ? [
                 children.onEvent.getPropertyView(),
                 disabledPropertyView(children),
+                hiddenPropertyView(children),
                 loadingPropertyView(children),
               ]
-            : children.form.getPropertyView()}
-        </Section>
-
-        <Section name={sectionNames.layout}>
-          {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
-          {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-          {hiddenPropertyView(children)}
-        </Section>
+              : children.form.getPropertyView()}
+            </Section>
+          </>
+        )}
 
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <>
+            <Section name={sectionNames.layout}>
+              {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
+              {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+            </Section>
+            <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+          </>
+        )}
       </>
     ))
     .setExposeMethodConfigs(buttonRefMethods)
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index 7fd38f31b..9b153b83f 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -7,7 +7,8 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { Section, sectionNames } from "lowcoder-design";
 import { trans } from "i18n";
-import React, { ReactElement } from "react";
+import React, { ReactElement, useContext } from "react";
+import { EditorContext } from "comps/editorState";
 import styled from "styled-components";
 import { ButtonEventHandlerControl } from "../../controls/eventHandlerControl";
 import { DropdownOptionControl } from "../../controls/optionsControl";
@@ -19,16 +20,16 @@ import {
   getButtonStyle,
 } from "./buttonCompConstants";
 
+
 const DropdownButton = styled(Dropdown.Button)`
   width: 100%;
-
   .ant-btn-group {
     width: 100%;
   }
 `;
 
 const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
-  width: calc(100% - 32px);
+  width: calc(100%);
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-right: 0;
   .ant-btn {
@@ -66,7 +67,7 @@ const DropdownTmpComp = (function () {
     options: DropdownOptionControl,
     disabled: BoolCodeControl,
     onEvent: ButtonEventHandlerControl,
-    style: withDefault(ButtonStyleControl, { background: "#FFFFFF" }),
+    style: ButtonStyleControl,
   };
   return new UICompBuilder(childrenMap, (props) => {
     const hasIcon =
@@ -92,7 +93,6 @@ const DropdownTmpComp = (function () {
 
     return (
       <ButtonCompWrapper disabled={props.disabled}>
-        {console.log("props,", props)}
         {props.onlyMenu ? (
           <Dropdown
             disabled={props.disabled}
@@ -131,18 +131,26 @@ const DropdownTmpComp = (function () {
       <>
         <Section name={sectionNames.basic}>
           {children.options.propertyView({})}
-          {children.text.propertyView({ label: trans("text") })}
-          {children.onlyMenu.propertyView({ label: trans("dropdown.onlyMenu") })}
-        </Section>
-
-        <Section name={sectionNames.interaction}>
-          {disabledPropertyView(children)}
-          {!children.onlyMenu.getView() && children.onEvent.getPropertyView()}
         </Section>
 
-        <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.interaction}>
+              {!children.onlyMenu.getView() && children.onEvent.getPropertyView()}
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+            </Section>
+          </>
+        )}
 
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <>
+            <Section name={sectionNames.layout}>
+              {children.text.propertyView({ label: trans("label") })}
+              {children.onlyMenu.propertyView({ label: trans("dropdown.onlyMenu") })}
+            </Section>
+            <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+          </>
+        )}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index 7d753f43f..863be656b 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -20,8 +20,11 @@ import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 
+import { EditorContext } from "comps/editorState";
+import React, { useContext } from "react";
+
 const Link = styled(Button)<{ $style: LinkStyleType }>`
-  ${(props) => `color: ${props.$style.text};margin: ${props.$style.margin}; padding: ${props.$style.padding};`}
+  ${(props) => `color: ${props.$style.text}; margin: ${props.$style.margin}; padding: ${props.$style.padding};`}
   &.ant-btn {
     display: inline-flex;
     align-items: center;
@@ -93,19 +96,22 @@ const LinkTmpComp = (function () {
             {children.text.propertyView({ label: trans("text") })}
           </Section>
 
-          <Section name={sectionNames.interaction}>
-            {children.onEvent.getPropertyView()}
-            {disabledPropertyView(children)}
-            {loadingPropertyView(children)}
-          </Section>
-
-          <Section name={sectionNames.layout}>
-            {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
-            {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-            {hiddenPropertyView(children)}
-          </Section>
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <><Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+              {loadingPropertyView(children)}
+            </Section>
+            <Section name={sectionNames.advanced}>
+              {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
+              {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+            </Section></>
+          )}
 
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+        )}
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 14d3dbbca..991bf807f 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -15,11 +15,12 @@ import styled from "styled-components";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import React, { Suspense, useEffect, useRef, useState } from "react";
+import React, { Suspense, useEffect, useRef, useState, useContext } from "react";
 import { arrayStringExposingStateControl } from "comps/controls/codeStateControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { ItemType } from "antd/lib/menu/hooks/useItems";
 import { RefControl } from "comps/controls/refControl";
+import { EditorContext } from "comps/editorState"; 
 
 const Error = styled.div`
   color: #f5222d;
@@ -212,20 +213,26 @@ const ScannerTmpComp = (function () {
         <>
           <Section name={sectionNames.basic}>
             {children.text.propertyView({ label: trans("text") })}
-            {children.continuous.propertyView({ label: trans("scanner.continuous") })}
-            {children.continuous.getView() &&
-              children.uniqueData.propertyView({ label: trans("scanner.uniqueData") })}
-            {children.maskClosable.propertyView({ label: trans("scanner.maskClosable") })}
-          </Section>
-
-          <Section name={sectionNames.interaction}>
-            {children.onEvent.getPropertyView()}
-            {disabledPropertyView(children)}
           </Section>
 
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <><Section name={sectionNames.interaction}>
+                {children.onEvent.getPropertyView()}
+                {disabledPropertyView(children)}
+                {hiddenPropertyView(children)}
+              </Section>
+              <Section name={sectionNames.advanced}>
+              {children.continuous.propertyView({ label: trans("scanner.continuous") })}
+              {children.continuous.getView() &&
+              children.uniqueData.propertyView({ label: trans("scanner.uniqueData") })}
+              {children.maskClosable.propertyView({ label: trans("scanner.maskClosable") })}
+            </Section>
+            </>
+          )}
 
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+          )}
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index 7603ee9c8..f9e479581 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -19,6 +19,8 @@ import { ToggleButtonStyle } from "comps/controls/styleControlConstants";
 import { styleControl } from "comps/controls/styleControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
+import React, { useContext } from "react";
+import { EditorContext } from "comps/editorState"; 
 
 const IconWrapper = styled.div`
   display: flex;
@@ -90,38 +92,43 @@ const ToggleTmpComp = (function () {
             label: trans("prop.defaultValue"),
             tooltip: trans("toggleButton.valueDesc"),
           })}
-          {children.showText.propertyView({ label: trans("toggleButton.showText") })}
-          {children.showText.getView() &&
-            children.trueText.propertyView({ label: trans("toggleButton.trueLabel") })}
-          {children.showText.getView() &&
-            children.falseText.propertyView({ label: trans("toggleButton.falseLabel") })}
         </Section>
 
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-          {disabledPropertyView(children)}
-          {loadingPropertyView(children)}
-        </Section>
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+              {loadingPropertyView(children)}
+            </Section>
+            <Section name={sectionNames.advanced}>
+              {children.showText.propertyView({ label: trans("toggleButton.showText") })}
+              {children.showText.getView() && 
+                children.trueText.propertyView({ label: trans("toggleButton.trueLabel") })}
+              {children.showText.getView() &&
+                children.falseText.propertyView({ label: trans("toggleButton.falseLabel") })}
+              {children.trueIcon.propertyView({ label: trans("toggleButton.trueIconLabel") })}
+              {children.falseIcon.propertyView({ label: trans("toggleButton.falseIconLabel") })}
+              {children.showText.getView() &&
+                children.iconPosition.propertyView({
+                  label: trans("toggleButton.iconPosition"),
+                  radioButton: true,
+              })}
+              {children.alignment.propertyView({
+                label: trans("toggleButton.alignment"),
+                radioButton: true,
+              })}
+            </Section>
+          </>
+        )}
 
-        <Section name={sectionNames.layout}>
-          {children.trueIcon.propertyView({ label: trans("toggleButton.trueIconLabel") })}
-          {children.falseIcon.propertyView({ label: trans("toggleButton.falseIconLabel") })}
-          {children.showText.getView() &&
-            children.iconPosition.propertyView({
-              label: trans("toggleButton.iconPosition"),
-              radioButton: true,
-            })}
-          {children.alignment.propertyView({
-            label: trans("toggleButton.alignment"),
-            radioButton: true,
-          })}
-          {hiddenPropertyView(children)}
-        </Section>
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.style}>
+            {children.showBorder.propertyView({ label: trans("toggleButton.showBorder") })}
+            {children.style.getPropertyView()}
+          </Section></>
+        )}
 
-        <Section name={sectionNames.style}>
-          {children.showBorder.propertyView({ label: trans("toggleButton.showBorder") })}
-          {children.style.getPropertyView()}
-        </Section>
       </>
     ))
     .setExposeMethodConfigs(buttonRefMethods)
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
index 74168ec9e..609b8f70d 100644
--- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -1,25 +1,24 @@
-import React, { useEffect, useState, useRef } from "react";
-// 渲染组件到编辑器
+import React, { useEffect, useState, useRef, useContext } from "react";
+// Render the component to the editor
 import {
   changeChildAction,
   CompAction,
   RecordConstructorToView,
 } from "lowcoder-core";
-// 文字国际化转换api
+// Text internationalisation conversion api
 import { trans } from "i18n";
-// 右侧属性栏总框架
+// General frame of the right property bar
 import { UICompBuilder, withDefault } from "../../generators";
-// 右侧属性子框架
+// Right-side attribute subframe
 import { Section, sectionNames } from "lowcoder-design";
-// 指示组件是否隐藏的开关
+// Switch indicating whether the component is hidden or not
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
-// 右侧属性开关
-
+// Right property switch
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl"; //样式输入框
 import { jsonValueExposingStateControl } from "comps/controls/codeStateControl";
 import { jsonControl, StringControl } from "comps/controls/codeControl";
-// 事件控制
+// Event Control
 import {
   clickEvent,
   submitEvent,
@@ -28,15 +27,17 @@ import {
   mentionEvent,
 } from "comps/controls/eventHandlerControl";
 
-// 引入样式
+import { EditorContext } from "comps/editorState";
+
+// Introducing styles
 import {
   CommentStyle,
   heightCalculator,
   widthCalculator,
 } from "comps/controls/styleControlConstants";
-// 初始化暴露值
+// Initialise exposed values
 import { stateComp, valueComp } from "comps/generators/simpleGenerators";
-// 组件对外暴露属性的api
+// The component's api for exposing properties externally
 import {
   NameConfig,
   NameConfigHidden,
@@ -57,11 +58,19 @@ import VirtualList, { ListRef } from "rc-virtual-list";
 import _ from "lodash";
 import relativeTime from "dayjs/plugin/relativeTime";
 import dayjs from "dayjs";
-import "dayjs/locale/zh-cn";
+// import "dayjs/locale/zh-cn";
 import { getInitialsAndColorCode } from "util/stringUtils";
 import { CloseOutlined } from "@ant-design/icons";
 dayjs.extend(relativeTime);
-dayjs.locale("zh-cn");
+// dayjs.locale("zh-cn");
+
+// TODO: Fixed header
+// TODO: scroll area only for messages - but not including commend input and button
+// TODO: free positioning of the comment input and button (eventually to adapt from Container component?)
+// TODO: extens styling for chat messages
+// TODO: add reactions to messages
+// TODO: add attachments to messages
+// TODO: add replies to messages
 
 const EventOptions = [
   clickEvent,
@@ -114,12 +123,12 @@ const CommentCompBase = (
     deleteAble,
   } = props;
   type PrefixType = "@" | keyof typeof mentionList;
-  // 用于保存整合后的提及列表
+  // Used to save the consolidated list of mentions
   const [MentionListData, setMentionList] = useState<typeof mentionList>([]);
   const [commentListData, setCommentListData] = useState<commentDataTYPE[]>([]);
   const [prefix, setPrefix] = useState<PrefixType>("@");
   const [context, setContext] = useState<string>("");
-  // 将评论列表与原提及列表中的名字进行整合
+  // Integrate the comment list with the names in the original mention list
   const mergeAllMentionList = (mentionList: any) => {
     setMentionList(
       _.merge(mentionList, {
@@ -152,16 +161,16 @@ const CommentCompBase = (
     }, 50);
   }, [commentListData]);
 
-  // 获取提及搜索关键字
+  // Get mentions of search keywords
   const onSearch = (_: string, newPrefix: PrefixType) => {
     setPrefix(newPrefix);
   };
-  // 生成评论头像
+  // Generate comment avatars
   const generateCommentAvatar = (item: commentDataTYPE) => {
     return (
       <Avatar
         onClick={() => props.onEvent("click")}
-        // 如果有头像，则不设置背景色，如果displayName不为空，则使用getInitialsAndColorCode调用displayName
+        // If there is an avatar, no background colour is set, and if displayName is not null, displayName is called using getInitialsAndColorCode
         style={{
           backgroundColor: item?.user?.avatar
             ? ""
@@ -359,40 +368,52 @@ let CommentBasicComp = (function () {
           {children.title.propertyView({
             label: trans("comment.title"),
           })}
-          {children.value.propertyView({
-            label: trans("comment.value"),
-            tooltip: CommentDataTooltip,
-            placeholder: "[]",
-          })}
-          {children.userInfo.propertyView({
-            label: trans("comment.userInfo"),
-            tooltip: CommentUserDataTooltip,
-          })}
-          {children.mentionList.propertyView({
-            label: trans("comment.mentionList"),
-            tooltip: trans("comment.mentionListDec"),
-          })}
-          {children.sendCommentAble.propertyView({
-            label: trans("comment.showSendButton"),
-          })}
-          {children.sendCommentAble.getView() &&
-            children.buttonText.propertyView({
-              label: trans("comment.buttonTextDec"),
-            })}
-          {children.placeholder.propertyView({
-            label: trans("comment.placeholderDec"),
-          })}
-          {children.deleteAble.propertyView({
-            label: trans("comment.deleteAble"),
-          })}
-        </Section>
-        <Section name={sectionNames.layout}>
-          {children.onEvent.getPropertyView()}
-          {hiddenPropertyView(children)}
-        </Section>
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
         </Section>
+
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <>
+          <Section name={sectionNames.data}>
+            {children.value.propertyView({
+              label: trans("comment.value"),
+              tooltip: CommentDataTooltip,
+              placeholder: "[]",
+            })}
+            {children.userInfo.propertyView({
+              label: trans("comment.userInfo"),
+              tooltip: CommentUserDataTooltip,
+            })}
+            {children.mentionList.propertyView({
+              label: trans("comment.mentionList"),
+              tooltip: trans("comment.mentionListDec"),
+            })}
+          </Section>
+          <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {hiddenPropertyView(children)}
+              {children.sendCommentAble.propertyView({
+                label: trans("comment.showSendButton"),
+              })}
+              {children.deleteAble.propertyView({
+                label: trans("comment.deleteAble"),
+              })}
+            </Section>
+          </>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.layout}>
+            {children.sendCommentAble.getView() &&
+              children.buttonText.propertyView({
+                label: trans("comment.buttonTextDec"),
+              })}
+            {children.placeholder.propertyView({
+              label: trans("comment.placeholderDec"),
+            })}
+          </Section><Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section></>
+        )}
+
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
index e2b85b9c5..94113e4a1 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
@@ -14,6 +14,8 @@ import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUt
 import { trans } from "i18n";
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
+import React, { useContext } from "react";
+import { EditorContext } from "comps/editorState";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
@@ -29,17 +31,23 @@ export const ContainerBaseComp = (function () {
     .setPropertyViewFn((children) => {
       return (
         <>
-          <Section name={sectionNames.interaction}>{disabledPropertyView(children)}</Section>
-          <Section name={sectionNames.layout}>
-            {children.container.getPropertyView()}
-            {hiddenPropertyView(children)}
-          </Section>
-          <Section name={sectionNames.style}>{children.container.stylePropertyView()}</Section>
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.interaction}>
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+            </Section>
+          )}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <><Section name={sectionNames.layout}>
+              {children.container.getPropertyView()}
+            </Section><Section name={sectionNames.style}>{children.container.stylePropertyView()}</Section></>
+          )}
         </>
       );
     })
     .build();
-})();
+})(); 
 
 // Compatible with old data
 function convertOldContainerParams(params: CompParams<any>) {
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
index 990eb4782..81ae2efb7 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -389,7 +389,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
         setRowHeight(nextRowHeight);
       }
     },
-    [
+    [ defaultGrid,
       currentRowCount,
       currentRowHeight,
       isRowCountLocked,
diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
index 4f31d0374..85721545f 100644
--- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -5,12 +5,17 @@ import { jsonObjectStateControl } from "comps/controls/codeStateControl";
 import { UICompBuilder, withDefault } from "comps/generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useContext } from "react";
 import styled from "styled-components";
 import { getPromiseAfterDispatch } from "util/promiseUtils";
 import { EventData, EventTypeEnum } from "./types";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
+import { EditorContext } from "comps/editorState";
+
+// TODO: eventually to embedd in container so we have styling?
+// TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
+// TODO: use modern version of ANTd
 
 const defaultModel = {
   name: "{{currentUser.name}}",
@@ -218,11 +223,14 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
   .setPropertyViewFn((children) => {
     return (
       <>
-        <Section name={sectionNames.basic}>
-          {children.model.propertyView({ label: trans("data") })}
-          {children.code.propertyView({ label: trans("code"), language: "html" })}
-        </Section>
-        <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.interaction}>
+              {children.model.propertyView({ label: trans("data") })}
+              {children.code.propertyView({ label: trans("code"), language: "html" })}
+              {hiddenPropertyView(children)}
+            </Section>
+          </>
+        )}  
       </>
     );
   })
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index 6568e8a3c..635d4fae3 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -37,7 +37,7 @@ import {
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useContext } from "react";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { Section, sectionNames } from "components/Section";
@@ -48,6 +48,8 @@ import { RefControl } from "comps/controls/refControl";
 import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
 import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
 
+import { EditorContext } from "comps/editorState";
+
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
 const validationChildren = {
@@ -60,6 +62,7 @@ const validationChildren = {
 };
 const commonChildren = {
   label: LabelControl,
+  placeholder: withDefault(StringControl, trans("date.placeholder")),
   format: StringControl,
   disabled: BoolCodeControl,
   onEvent: eventHandlerControl(EventOptions),
@@ -76,7 +79,7 @@ const commonChildren = {
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 
 const datePickerProps = (props: RecordConstructorToView<typeof commonChildren>) =>
-  _.pick(props, "format", "showTime", "use12Hours", "hourStep", "minuteStep", "secondStep");
+  _.pick(props, "format", "showTime", "use12Hours", "hourStep", "minuteStep", "secondStep", "placeholder");
 
 const timeFields = (children: CommonChildrenType, isMobile?: boolean) => [
   children.showTime.propertyView({ label: trans("date.showTime") }),
@@ -151,6 +154,7 @@ export type DateCompViewProps = Pick<
   $style: DateTimeStyleType;
   disabledTime: () => ReturnType<typeof disabledTime>;
   suffixIcon: ReactNode;
+  placeholder?: string | [string, string];
 };
 
 export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
@@ -170,6 +174,7 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
         {...datePickerProps(props)}
         minDate={props.minDate}
         maxDate={props.maxDate}
+        placeholder={props.placeholder}
         value={time.isValid() ? time : null}
         onChange={(time) => {
           handleDateChange(
@@ -199,37 +204,50 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
           {children.value.propertyView({
             label: trans("prop.defaultValue"),
             placeholder: "2022-04-07 21:39:59",
-            tooltip: trans("date.formatTip"),
+            tooltip: trans("date.formatTip")
           })}
-          {formatPropertyView({ children })}
-          {timeFields(children, isMobile)}
         </Section>
 
         <FormDataPropertyView {...children} />
 
-        {children.label.getPropertyView()}
-
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-          {disabledPropertyView(children)}
-        </Section>
-
-        <Section name={sectionNames.validation}>
-          {requiredPropertyView(children)}
-          {dateValidationFields(children)}
-          {timeValidationFields(children)}
-          {children.customRule.propertyView({})}
-        </Section>
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.validation}>
+              {requiredPropertyView(children)}
+              {dateValidationFields(children)}
+              {timeValidationFields(children)}
+              {children.customRule.propertyView({})}
+            </Section>
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+            </Section>
+          </>
+        )}
 
         {/*{commonAdvanceSection(children, children.dateType.value === "date")}*/}
-        {!isMobile && commonAdvanceSection(children)}
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()}
 
-        <Section name={sectionNames.layout}>
-          {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-          {hiddenPropertyView(children)}
-        </Section>
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.layout}>
+            {formatPropertyView({ children })}
+            {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
+          </Section>
+        )}
+        
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+           <><Section name={sectionNames.advanced}>
+            {timeFields(children, isMobile)}
+            {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+          </Section></>
+        )}
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)}
 
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+        )}
       </>
     );
   })
@@ -263,6 +281,7 @@ export const dateRangeControl = (function () {
         end={end.isValid() ? end : null}
         minDate={props.minDate}
         maxDate={props.maxDate}
+        placeholder={[props.placeholder, props.placeholder]}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         onChange={(start, end) => {
           props.start.onChange(
@@ -314,32 +333,46 @@ export const dateRangeControl = (function () {
               placeholder: "2022-04-07 21:39:59",
               tooltip: trans("date.formatTip"),
             })}
-            {formatPropertyView({ children })}
-            {timeFields(children, isMobile)}
-          </Section>
-
-          {children.label.getPropertyView()}
-
-          <Section name={sectionNames.interaction}>
-            {children.onEvent.getPropertyView()}
-            {disabledPropertyView(children)}
           </Section>
 
-          <Section name={sectionNames.validation}>
-            {requiredPropertyView(children)}
-            {dateValidationFields(children)}
-            {timeValidationFields(children)}
-            {children.customRule.propertyView({})}
-          </Section>
-
-          {commonAdvanceSection(children)}
-
-          <Section name={sectionNames.layout}>
-            {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-            {hiddenPropertyView(children)}
-          </Section>
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <><Section name={sectionNames.validation}>
+                {requiredPropertyView(children)}
+                {dateValidationFields(children)}
+                {timeValidationFields(children)}
+                {children.customRule.propertyView({})}
+              </Section>
+              <Section name={sectionNames.interaction}>
+                {children.onEvent.getPropertyView()}
+                {disabledPropertyView(children)}
+                {hiddenPropertyView(children)}
+              </Section>
+            </>
+          )}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.layout}>
+              {formatPropertyView({ children })}
+              {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
+            </Section>
+          )}
+          
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <><Section name={sectionNames.advanced}>
+              {timeFields(children, isMobile)}
+              {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+            </Section></>
+          )}
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+          )}
 
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
index 467570d48..2c265ecd8 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
@@ -100,7 +100,8 @@ export const getStyle = (style: DateTimeStyleType) => {
       }
 
       .ant-picker-clear {
-        inset-inline-end: 18px
+        inset-inline-end: 1px;
+        font-size: 16px;
       }
 
       .ant-picker-clear:hover {
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
index 27184dd6a..b07a1af2c 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
@@ -23,6 +23,7 @@ const DateRangeMobileUIView = React.lazy(() =>
 export interface DateRangeUIViewProps extends DateCompViewProps {
   start: dayjs.Dayjs | null;
   end: dayjs.Dayjs | null;
+  placeholder?: string | [string, string];
   onChange: (start?: dayjs.Dayjs | null, end?: dayjs.Dayjs | null) => void;
   onPanelChange: (value: any, mode: [string, string]) => void;
 }
@@ -30,6 +31,15 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
 export const DateRangeUIView = (props: DateRangeUIViewProps) => {
   const editorState = useContext(EditorContext);
 
+  // Extract or compute the placeholder values
+  let placeholders: [string, string];
+  if (Array.isArray(props.placeholder)) {
+    placeholders = props.placeholder;
+  } else {
+    // Use the same placeholder for both start and end if it's a single string
+    placeholders = [props.placeholder || 'Start Date', props.placeholder || 'End Date'];
+  }
+
   return useUIView(
     <DateRangeMobileUIView {...props} />,
     <RangePickerStyled
@@ -42,6 +52,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
       }}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
+      placeholder={placeholders}
     />
   );
 };
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
index 34e28be69..ef8ef0840 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
@@ -27,6 +27,8 @@ const DateMobileUIView = React.lazy(() =>
 export const DateUIView = (props: DataUIViewProps) => {
   const editorState = useContext(EditorContext);
 
+  const placeholder = Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder;
+
   return useUIView(
     <DateMobileUIView {...props} />,
     <DatePickerStyled
@@ -35,6 +37,7 @@ export const DateUIView = (props: DataUIViewProps) => {
       disabledDate={(current) => disabledDate(current, props.minDate, props.maxDate)}
       picker={"date"}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
+      placeholder={placeholder}
     />
   );
 };
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
index 3f6d58408..382d3733f 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -40,7 +40,7 @@ import {
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { TIME_FORMAT, TimeParser } from "util/dateTimeUtils";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useContext } from "react";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { Section, sectionNames } from "components/Section";
@@ -51,6 +51,8 @@ import { RefControl } from "comps/controls/refControl";
 import { CommonPickerMethods } from "antd/lib/date-picker/generatePicker/interface";
 import { TimePickerProps } from "antd";
 
+import { EditorContext } from "comps/editorState";
+
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
 const validationChildren = {
@@ -62,6 +64,7 @@ const validationChildren = {
 
 const commonChildren = {
   label: LabelControl,
+  placeholder: withDefault(StringControl, trans("time.placeholder")),
   format: StringControl,
   disabled: BoolCodeControl,
   onEvent: eventHandlerControl(EventOptions),
@@ -77,12 +80,12 @@ const commonChildren = {
 };
 
 const timePickerComps = (props: RecordConstructorToView<typeof commonChildren>) =>
-  _.pick(props, "format", "use12Hours", "minuteStep", "secondStep");
+  _.pick(props, "format", "use12Hours", "minuteStep", "secondStep", "placeholder");
 
-const commonBasicSection = (children: RecordConstructorToComp<typeof commonChildren>) => [
+/* const commonBasicSection = (children: RecordConstructorToComp<typeof commonChildren>) => [
   formatPropertyView({ children }),
   children.use12Hours.propertyView({ label: trans("prop.use12Hours") }),
-];
+]; */
 
 const commonAdvanceSection = (children: RecordConstructorToComp<typeof commonChildren>) => [
   hourStepPropertyView(children),
@@ -130,6 +133,7 @@ export type TimeCompViewProps = Pick<
   $style: DateTimeStyleType;
   disabledTime: () => ReturnType<typeof disabledTime>;
   suffixIcon?: ReactNode | false;
+  placeholder?: string | [string, string];
 };
 
 export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
@@ -152,6 +156,7 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
         hourStep={props.hourStep as hourStepType}
         minuteStep={props.minuteStep as minuteStepType}
         secondStep={props.secondStep as secondStepType}
+        placeholder={props.placeholder}
         onChange={(time) => {
           handleDateChange(
             time && time.isValid() ? time.format(TIME_FORMAT) : "",
@@ -174,31 +179,46 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
           label: trans("prop.defaultValue"),
           tooltip: trans("time.formatTip"),
         })}
-        {commonBasicSection(children)}
+        
       </Section>
-      <FormDataPropertyView {...children} />
-      {children.label.getPropertyView()}
 
-      <Section name={sectionNames.interaction}>
-        {children.onEvent.getPropertyView()}
-        {disabledPropertyView(children)}
-      </Section>
+      <FormDataPropertyView {...children} />
 
-      <Section name={sectionNames.validation}>
-        {requiredPropertyView(children)}
-        {minTimePropertyView(children)}
-        {maxTimePropertyView(children)}
-        {children.customRule.propertyView({})}
-      </Section>
+      {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        <><Section name={sectionNames.validation}>
+          {requiredPropertyView(children)}
+          {minTimePropertyView(children)}
+          {maxTimePropertyView(children)}
+          {children.customRule.propertyView({})}
+        </Section>
+        <Section name={sectionNames.interaction}>
+          {children.onEvent.getPropertyView()}
+          {disabledPropertyView(children)}
+          {hiddenPropertyView(children)}
+        </Section></>
+      )}
 
-      <Section name={sectionNames.advanced}>{commonAdvanceSection(children)}</Section>
+      {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()}
+      {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        <Section name={sectionNames.layout}>
+          {children.format.propertyView({ label: trans("time.format") })}
+          {children.placeholder.propertyView({ label: trans("time.placeholderText") })}
+        </Section>
+      )}
 
-      <Section name={sectionNames.layout}>
-        {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-        {hiddenPropertyView(children)}
-      </Section>
+      {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        <Section name={sectionNames.advanced}>
+          {commonAdvanceSection(children)}
+          {children.use12Hours.propertyView({ label: trans("prop.use12Hours") })}
+          {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+        </Section>
+      )}
 
-      <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+      {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        <Section name={sectionNames.style}>
+          {children.style.getPropertyView()}
+        </Section>
+      )}
     </>
   ))
   .setExposeMethodConfigs(dateRefMethods)
@@ -233,6 +253,7 @@ export const timeRangeControl = (function () {
         hourStep={props.hourStep as hourStepType}
         minuteStep={props.minuteStep as minuteStepType}
         secondStep={props.secondStep as secondStepType}
+        placeholder={[props.placeholder, props.placeholder]}
         onChange={(start, end) => {
           props.start.onChange(start && start.isValid() ? start.format(TIME_FORMAT) : "");
           props.end.onChange(end && end.isValid() ? end.format(TIME_FORMAT) : "");
@@ -269,31 +290,43 @@ export const timeRangeControl = (function () {
             label: trans("time.end"),
             tooltip: trans("time.formatTip"),
           })}
-          {commonBasicSection(children)}
-        </Section>
-
-        {children.label.getPropertyView()}
-
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-          {disabledPropertyView(children)}
-        </Section>
-
-        <Section name={sectionNames.validation}>
-          {requiredPropertyView(children)}
-          {minTimePropertyView(children)}
-          {maxTimePropertyView(children)}
-          {children.customRule.propertyView({})}
-        </Section>
-
-        <Section name={sectionNames.advanced}>{commonAdvanceSection(children)}</Section>
-
-        <Section name={sectionNames.layout}>
-          {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-          {hiddenPropertyView(children)}
         </Section>
 
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.validation}>
+            {requiredPropertyView(children)}
+            {minTimePropertyView(children)}
+            {maxTimePropertyView(children)}
+            {children.customRule.propertyView({})}
+          </Section>
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {disabledPropertyView(children)}
+            {hiddenPropertyView(children)}
+          </Section></>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && children.label.getPropertyView()}
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.layout}>
+            {children.format.propertyView({ label: trans("time.format") })}
+            {children.placeholder.propertyView({ label: trans("time.placeholderText") })}
+          </Section>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.advanced}>
+            {commonAdvanceSection(children)}
+            {children.use12Hours.propertyView({ label: trans("prop.use12Hours") })}
+            {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+          </Section>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+        )}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
index b3ca6428b..1a34ecf4e 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
@@ -23,12 +23,22 @@ const TimeRangeMobileUIView = React.lazy(() =>
 export interface TimeRangeUIViewProps extends TimeCompViewProps {
   start: dayjs.Dayjs | null;
   end: dayjs.Dayjs | null;
+  placeholder?: string | [string, string];
   onChange: (start?: dayjs.Dayjs | null, end?: dayjs.Dayjs | null) => void;
 }
 
 export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
   const editorState = useContext(EditorContext);
 
+  // Extract or compute the placeholder values
+  let placeholders: [string, string];
+  if (Array.isArray(props.placeholder)) {
+    placeholders = props.placeholder;
+  } else {
+    // Use the same placeholder for both start and end if it's a single string
+    placeholders = [props.placeholder || 'Start Date', props.placeholder || 'End Date'];
+  }
+
   return useUIView(
     <TimeRangeMobileUIView {...props} />,
     <RangePickerStyled
@@ -41,6 +51,7 @@ export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
       }}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
+      placeholder={placeholders}
     />
   );
 };
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
index fc9e140ef..e7933da91 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
@@ -26,6 +26,8 @@ export interface TimeUIViewProps extends TimeCompViewProps {
 export const TimeUIView = (props: TimeUIViewProps) => {
   const editorState = useContext(EditorContext);
 
+  const placeholder = Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder;
+
   return useUIView(
     <TimeMobileUIView {...props} />,
     <TimePickerStyled
@@ -33,6 +35,7 @@ export const TimeUIView = (props: TimeUIViewProps) => {
       ref={props.viewRef}
       hideDisabledOptions
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
+      placeholder={placeholder}
     />
   );
 };
diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
index 33552d333..b206f2a15 100644
--- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -40,6 +40,9 @@ import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generat
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { messageInstance } from "lowcoder-design";
 
+import React, { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const FileSizeControl = codeControl((value) => {
   if (typeof value === "number") {
     return value;
@@ -370,47 +373,49 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => (
         {children.text.propertyView({
           label: trans("text"),
         })}
-        {children.fileType.propertyView({
-          label: trans("file.fileType"),
-          placeholder: '[".png"]',
-          tooltip: (
-            <>
-              {trans("file.reference")}{" "}
-              <a href={trans("file.fileTypeTooltipUrl")} target="_blank" rel="noreferrer">
-                {trans("file.fileTypeTooltip")}
-              </a>
-            </>
-          ),
-        })}
         {children.uploadType.propertyView({ label: trans("file.uploadType") })}
-        {children.showUploadList.propertyView({ label: trans("file.showUploadList") })}
-        {children.parseFiles.propertyView({
-          label: trans("file.parseFiles"),
-          tooltip: ParseFileTooltip,
-          placement: "right",
-        })}
       </Section>
 
       <FormDataPropertyView {...children} />
 
-      <Section name={sectionNames.interaction}>
-        {children.onEvent.getPropertyView()}
-        {disabledPropertyView(children)}
-      </Section>
-
-      <Section name={sectionNames.validation}>
-        {children.uploadType.getView() !== "single" &&
-          children.maxFiles.propertyView({ label: trans("file.maxFiles") })}
-        {commonValidationFields(children)}
-      </Section>
-
-      <Section name={sectionNames.layout}>
-        {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
-        {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-        {hiddenPropertyView(children)}
-      </Section>
-
-      <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+      {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        <><Section name={sectionNames.validation}>
+          {children.uploadType.getView() !== "single" && children.maxFiles.propertyView({ label: trans("file.maxFiles") })}
+          {commonValidationFields(children)}
+        </Section>
+        <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {disabledPropertyView(children)}
+            {hiddenPropertyView(children)}
+          </Section>
+          <Section name={sectionNames.advanced}>
+              {children.fileType.propertyView({
+              label: trans("file.fileType"),
+              placeholder: '[".png"]',
+              tooltip: (
+                <>
+                  {trans("file.reference")}{" "}
+                  <a href={trans("file.fileTypeTooltipUrl")} target="_blank" rel="noreferrer">
+                    {trans("file.fileTypeTooltip")}
+                  </a>
+                </>
+              ),
+            })}
+            {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
+            {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+            {children.showUploadList.propertyView({ label: trans("file.showUploadList") })}
+            {children.parseFiles.propertyView({
+              label: trans("file.parseFiles"),
+              tooltip: ParseFileTooltip,
+              placement: "right",
+            })}
+          </Section>
+        </>
+      )}
+
+      {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+      )}
     </>
   ))
   .build();
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
index 6d62c097f..28f0af0f4 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
@@ -185,20 +185,42 @@ const FormBaseComp = (function () {
       return (
         <>
           <Section name={sectionNames.basic}>
-            {false && children.initialData.propertyView({ label: trans("formComp.initialData") })}
             {children.resetAfterSubmit.propertyView({ label: trans("formComp.resetAfterSubmit") })}
           </Section>
-          <Section name={sectionNames.interaction}>
-            {children.onEvent.getPropertyView()}
-            {disabledPropertyView(children)}
-            {children.disableSubmit.propertyView({ label: trans("formComp.disableSubmit") })}
-            {loadingPropertyView(children)}
-          </Section>
-          <Section name={sectionNames.layout}>
-            {children.container.getPropertyView()}
-            {hiddenPropertyView(children)}
-          </Section>
-          <Section name={sectionNames.style}>{children.container.stylePropertyView()}</Section>
+
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <><Section name={sectionNames.interaction}>
+                {children.onEvent.getPropertyView()}
+                {disabledPropertyView(children)}
+                {children.disableSubmit.propertyView({ label: trans("formComp.disableSubmit") })}
+                {hiddenPropertyView(children)}
+                {loadingPropertyView(children)}
+              </Section>
+            </>
+          )}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <>
+              <Section name={sectionNames.layout}>
+                {children.container.getPropertyView()}
+              </Section>
+            </>
+          )}
+
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.advanced}>
+              {children.initialData.propertyView({ label: trans("formComp.initialData") })}
+            </Section>
+          )}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <>
+              <Section name={sectionNames.style}>
+                {children.container.stylePropertyView()}
+              </Section>
+            </>
+          )}
+          
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 8af381780..628678551 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -18,6 +18,10 @@ import { alignWithJustifyControl } from "comps/controls/alignControl";
 import { MarginControl } from "../controls/marginControl";
 import { PaddingControl } from "../controls/paddingControl";
 
+import React, { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
+
 const getStyle = (style: TextStyleType) => {
   return css`
     border-radius: 4px;
@@ -103,7 +107,9 @@ const VerticalAlignmentOptions = [
   { label: <AlignBottom />, value: "flex-end" },
 ] as const;
 
-let TextTmpComp = (function () {
+
+let TextTmpComp = (function () {  
+
   const childrenMap = {
     text: stringExposingStateControl(
       "text",
@@ -136,6 +142,7 @@ let TextTmpComp = (function () {
     .setPropertyViewFn((children) => {
       return (
         <>
+        {useContext(EditorContext).editorModeStatus === "layout" && (
           <Section name={sectionNames.basic}>
             {children.type.propertyView({
               label: trans("value"),
@@ -144,6 +151,7 @@ let TextTmpComp = (function () {
             })}
             {children.text.propertyView({})}
           </Section>
+        )}
 
           <Section name={sectionNames.layout}>
             {children.autoHeight.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index c0d27312c..6028c7a1e 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -31,6 +31,9 @@ import { hasIcon } from "comps/utils";
 import { InputRef } from "antd";
 import { RefControl } from "comps/controls/refControl";
 
+import React, { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 /**
  * Input Comp
  */
@@ -73,23 +76,27 @@ export const InputComp = new UICompBuilder(childrenMap, (props) => {
       <>
         <TextInputBasicSection {...children} />
         <FormDataPropertyView {...children} />
-        {children.label.getPropertyView()}
-
-        <TextInputInteractionSection {...children} />
-
-        <Section name={sectionNames.advanced}>
-          {children.showCount.propertyView({ label: trans("prop.showCount") })}
-          {allowClearPropertyView(children)}
-          {readOnlyPropertyView(children)}
-          {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
-          {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-        </Section>
-
-        <TextInputValidationSection {...children} />
-
-        <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
 
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        {useContext(EditorContext).editorModeStatus === "layout" && (
+          children.label.getPropertyView()
+        )}
+        
+        {useContext(EditorContext).editorModeStatus !== "layout" && (
+          <><TextInputInteractionSection {...children} />
+          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+          <Section name={sectionNames.advanced}>
+            {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
+            {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+            {children.showCount.propertyView({ label: trans("prop.showCount") })}
+            {allowClearPropertyView(children)}
+            {readOnlyPropertyView(children)}
+          </Section>
+          <TextInputValidationSection {...children} />
+          </>
+        )}
+        {useContext(EditorContext).editorModeStatus === "layout" && (
+          <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+        )}
       </>
     );
   })
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index 9184ce39d..9a4eabe9b 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -43,7 +43,6 @@ import {
   textInputValidate,
 } from "../textInputComp/textInputConstants";
 import { jsonControl } from "@lowcoder-ee/comps/controls/codeControl";
-// 事件控制
 import {
   submitEvent,
   eventHandlerControl,
@@ -53,6 +52,9 @@ import {
   changeEvent
 } from "comps/controls/eventHandlerControl";
 
+import React, { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
 }>`
@@ -99,8 +101,7 @@ let MentionTmpComp = (function () {
     const [activationFlag, setActivationFlag] = useState(false);
     const [prefix, setPrefix] = useState<PrefixType>("@");
     type PrefixType = "@" | keyof typeof mentionList;
-
-    // 获取提及搜索关键字
+    
     const onSearch = (_: string, newPrefix: PrefixType) => {
       setPrefix(newPrefix);
     };
@@ -204,44 +205,46 @@ let MentionTmpComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
-          {children.mentionList.propertyView({
-            label: trans("mention.mentionList"),
-          })}
           {children.value.propertyView({ label: trans("prop.defaultValue") })}
           {children.placeholder.propertyView({
             label: trans("prop.placeholder"),
           })}
+          {useContext(EditorContext).editorModeStatus !== "layout" && (
+            children.mentionList.propertyView({
+              label: trans("mention.mentionList"),
+            })
+          )}
         </Section>
         <FormDataPropertyView {...children} />
-        {children.label.getPropertyView()}
 
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-          {disabledPropertyView(children)}
-        </Section>
+        {useContext(EditorContext).editorModeStatus === "layout" && (
+          children.label.getPropertyView()
+        )}
 
-        <Section name={sectionNames.advanced}>
-          {readOnlyPropertyView(children)}
-        </Section>
+        {useContext(EditorContext).editorModeStatus !== "layout" && (
+        <><Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {disabledPropertyView(children)}
+          </Section>
+          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+          <Section name={sectionNames.advanced}>
+              {readOnlyPropertyView(children)}
+            </Section><Section name={sectionNames.validation}>
+              {requiredPropertyView(children)}
+              {children.validationType.propertyView({
+                label: trans("prop.textType"),
+              })}
+              {minLengthPropertyView(children)}
+              {maxLengthPropertyView(children)}
+              {children.customRule.propertyView({})}
+            </Section></>
+        )}
 
-        <Section name={sectionNames.validation}>
-          {requiredPropertyView(children)}
-          {children.validationType.propertyView({
-            label: trans("prop.textType"),
-          })}
-          {minLengthPropertyView(children)}
-          {maxLengthPropertyView(children)}
-          {children.customRule.propertyView({})}
-        </Section>
-
-        <Section name={sectionNames.layout}>
-          {children.autoHeight.getPropertyView()}
-          {hiddenPropertyView(children)}
-        </Section>
-
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
-        </Section>
+      {useContext(EditorContext).editorModeStatus === "layout" && (
+        <><Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section></>
+      )}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 93d707169..66275bea4 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -37,6 +37,8 @@ import { trans } from "i18n";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
+import React, { useContext } from "react";
+import { EditorContext } from "comps/editorState";
 
 const PasswordStyle = styled(Input.Password)<{
   $style: InputLikeStyleType;
@@ -76,29 +78,32 @@ const PasswordTmpComp = (function () {
         <>
           <TextInputBasicSection {...children} />
           <FormDataPropertyView {...children} />
-          {children.label.getPropertyView()}
 
-          <TextInputInteractionSection {...children} />
+          {useContext(EditorContext).editorModeStatus === "layout" && (
+            children.label.getPropertyView()
+          )}
 
-          <Section name={sectionNames.advanced}>
-            {children.visibilityToggle.propertyView({
-              label: trans("password.visibilityToggle"),
-            })}
-            {readOnlyPropertyView(children)}
-            {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
-          </Section>
+          {useContext(EditorContext).editorModeStatus !== "layout" && (
+            <><TextInputInteractionSection {...children} />
+            <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+            <Section name={sectionNames.advanced}>
+              {children.visibilityToggle.propertyView({
+                label: trans("password.visibilityToggle"),
+              })}
+              {readOnlyPropertyView(children)}
+              {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
+            </Section><Section name={sectionNames.validation}>
+                {requiredPropertyView(children)}
+                {regexPropertyView(children)}
+                {minLengthPropertyView(children)}
+                {maxLengthPropertyView(children)}
+                {children.customRule.propertyView({})}
+            </Section></>
+          )}
 
-          <Section name={sectionNames.validation}>
-            {requiredPropertyView(children)}
-            {regexPropertyView(children)}
-            {minLengthPropertyView(children)}
-            {maxLengthPropertyView(children)}
-            {children.customRule.propertyView({})}
-          </Section>
-
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+          {useContext(EditorContext).editorModeStatus === "layout" && (
+            <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+          )}
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index 3e1f97359..80c8c5900 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -33,6 +33,9 @@ import { RefControl } from "comps/controls/refControl";
 import { TextAreaRef } from "antd/lib/input/TextArea";
 import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
 
+import React, { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const TextAreaStyled = styled(TextArea)<{
   $style: InputLikeStyleType;
 }>`
@@ -88,23 +91,26 @@ let TextAreaTmpComp = (function () {
       <>
         <TextInputBasicSection {...children} />
         <FormDataPropertyView {...children} />
-        {children.label.getPropertyView()}
-
-        <TextInputInteractionSection {...children} />
-
-        <Section name={sectionNames.advanced}>
-          {allowClearPropertyView(children)}
-          {readOnlyPropertyView(children)}
-        </Section>
 
-        <TextInputValidationSection {...children} />
+        {useContext(EditorContext).editorModeStatus === "layout" && (
+          children.label.getPropertyView()
+        )}
 
-        <Section name={sectionNames.layout}>
-          {children.autoHeight.getPropertyView()}
-          {hiddenPropertyView(children)}
-        </Section>
+        {useContext(EditorContext).editorModeStatus !== "layout" && (
+          <><TextInputInteractionSection {...children} />
+          <Section name={sectionNames.layout}>
+            {children.autoHeight.getPropertyView()}
+            {hiddenPropertyView(children)}
+          </Section>
+          <Section name={sectionNames.advanced}>
+            {allowClearPropertyView(children)}
+            {readOnlyPropertyView(children)}
+          </Section><TextInputValidationSection {...children} /></>
+        )}
 
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        {useContext(EditorContext).editorModeStatus === "layout" && (
+          <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+        )}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 58b706771..f79fa03d2 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -908,7 +908,7 @@ export const CommentStyle = [
   {
     name: "background",
     label: trans("style.background"),
-    depTheme: "canvas",
+    depTheme: "primarySurface",
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
diff --git a/client/packages/lowcoder/src/comps/editorState.tsx b/client/packages/lowcoder/src/comps/editorState.tsx
index f69ffde52..603f68e95 100644
--- a/client/packages/lowcoder/src/comps/editorState.tsx
+++ b/client/packages/lowcoder/src/comps/editorState.tsx
@@ -13,6 +13,7 @@ import { NameAndExposingInfo } from "./utils/exposingTypes";
 import { checkName } from "./utils/rename";
 import { trans } from "i18n";
 import { UiLayoutType } from "./comps/uiComp";
+import { getEditorModeStatus } from "util/localStorageUtil";
 
 type RootComp = InstanceType<typeof RootCompTmp>;
 
@@ -41,6 +42,7 @@ export class EditorState {
   readonly rootComp: RootComp;
   readonly showPropertyPane: boolean = false;
   readonly selectedCompNames: Set<string> = new Set();
+  readonly editorModeStatus: string = "";
   readonly isDragging: boolean = false;
   readonly draggingCompType: string = "button";
   readonly forceShowGrid: boolean = false; // show grid lines
@@ -54,10 +56,14 @@ export class EditorState {
 
   constructor(
     rootComp: RootComp,
-    setEditorState: (fn: (editorState: EditorState) => EditorState) => void
+    setEditorState: (fn: (editorState: EditorState) => EditorState) => void,
+    initialEditorModeStatus: string = getEditorModeStatus()
   ) {
     this.rootComp = rootComp;
     this.setEditorState = setEditorState;
+    this.editorModeStatus = initialEditorModeStatus;
+
+    console.log("initialEditorModeStatus,", initialEditorModeStatus);
   }
 
   /**
@@ -311,6 +317,10 @@ export class EditorState {
     return this.getAppSettingsComp().getView();
   }
 
+  setEditorModeStatus(newEditorModeStatus: string) {
+    this.changeState({ editorModeStatus: newEditorModeStatus });
+  }
+
   setDragging(dragging: boolean) {
     if (this.isDragging === dragging) {
       return;
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index cd946d31b..dc04e5f43 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -151,6 +151,7 @@ export const en = {
     style: "Style",
     inputs: "Inputs",
     meta: "Meta data",
+    data: "Data",
     hide: "Hidden",
     loading: "Loading",
     disabled: "Disabled",
@@ -178,7 +179,7 @@ export const en = {
     manual: "Manual",
     map: "Mapped",
     json: "JSON",
-    use12Hours: "Use 12-hours",
+    use12Hours: "Use 12-hours for Time Selector",
     hourStep: "Hour step",
     minuteStep: "Minute step",
     secondStep: "Second step",
@@ -1105,6 +1106,7 @@ export const en = {
     clearAllDesc: "Clear all",
     resetAllDesc: "Reset all",
     placeholder: "Select date",
+    placeholderText: "Placeholder",
     startDate: "Start date",
     endDate: "End date",
   },
@@ -1112,7 +1114,9 @@ export const en = {
     start: "Start time",
     end: "End time",
     formatTip: "Support:\n" + "HH:mm:ss\nTimestamp",
+    format: "Format",
     placeholder: "Select Time",
+    placeholderText: "Placeholder",
     startTime: "Start time",
     endTime: "End time",
   },
@@ -1144,7 +1148,7 @@ export const en = {
     errTip: "Please use this component under https or localhost",
   },
   dropdown: {
-    onlyMenu: "Only menu",
+    onlyMenu: "Display with Label only",
     textDesc: "Text currently displayed on button",
   },
   textShow: {
@@ -2076,6 +2080,9 @@ export const en = {
     preview: "Preview",
     editError: "History preview mode, no operation is supported.",
     clone: "Clone",
+    editorMode_layout: "Layout",
+    editorMode_logic: "Logic",
+    editorMode_both: "Both",
   },
   userAuth: {
     registerByEmail: "Sign up",
@@ -2657,7 +2664,7 @@ export const en = {
     placeholderDec: "placeholder",
     buttonTextDec: "button title",
     buttonText: "comment",
-    mentionList: "mention list data",
+    mentionList: "Mention list data",
     mentionListDec: "key-Mention keywords;value-Mention list data",
     userInfo: "user info",
     dateErr: "date error",
@@ -2674,7 +2681,7 @@ export const en = {
     helpcreatedAt: "create date",
   },
   mention: {
-    mentionList: "mention list",
+    mentionList: "Mention list data",
   },
   autoComplete: {
     value: "auto complete value",
diff --git a/client/packages/lowcoder/src/pages/common/header.tsx b/client/packages/lowcoder/src/pages/common/header.tsx
index 0b481fa1b..0b80f0b73 100644
--- a/client/packages/lowcoder/src/pages/common/header.tsx
+++ b/client/packages/lowcoder/src/pages/common/header.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, Skeleton } from "antd";
+import { Dropdown, Skeleton, Radio, RadioChangeEvent } from "antd";
 import LayoutHeader from "components/layout/Header";
 import { SHARE_TITLE } from "constants/apiConstants";
 import { AppTypeEnum } from "constants/applicationConstants";
@@ -9,6 +9,7 @@ import {
   CustomModal,
   DropdownMenu,
   EditText,
+  Layout,
   Left,
   Middle,
   ModuleIcon,
@@ -39,6 +40,8 @@ import { HeaderStartDropdown } from "./headerStartDropdown";
 import { AppPermissionDialog } from "../../components/PermissionDialog/AppPermissionDialog";
 import { getBrandingConfig } from "../../redux/selectors/configSelectors";
 import { messageInstance } from "lowcoder-design";
+import { EditorContext } from  "../../comps/editorState";
+
 
 const StyledLink = styled.a`
   display: flex;
@@ -66,6 +69,9 @@ const IconCss = css<{ $show: boolean }>`
 
   cursor: pointer;
 `;
+const LayoutIcon = styled(Layout)`
+  ${IconCss}
+`;
 const LeftIcon = styled(Left)`
   ${IconCss}
 `;
@@ -265,14 +271,21 @@ function HeaderProfile(props: { user: User }) {
 
 export type PanelStatus = { left: boolean; bottom: boolean; right: boolean };
 export type TogglePanel = (panel?: keyof PanelStatus) => void;
+export type EditorModeStatus = "layout" | "logic" | "both";
+export type ToggleEditorModeStatus = (editorModeStatus?: EditorModeStatus) => void;
+
 type HeaderProps = {
-  togglePanel: TogglePanel;
   panelStatus: PanelStatus;
+  togglePanel: TogglePanel;
+  editorModeStatus: EditorModeStatus;
+  toggleEditorModeStatus: ToggleEditorModeStatus;
 };
 
 // header in editor page
 export default function Header(props: HeaderProps) {
+  const editorState = useContext(EditorContext);
   const { togglePanel } = props;
+  const { toggleEditorModeStatus } = props;
   const { left, bottom, right } = props.panelStatus;
   const user = useSelector(getUser);
   const application = useSelector(currentApplication);
@@ -287,6 +300,17 @@ export default function Header(props: HeaderProps) {
 
   const isModule = appType === AppTypeEnum.Module;
 
+  const editorModeOptions = [
+    { label: trans("header.editorMode_layout"), key: "editorModeSelector_layout", value: "layout" },
+    { label: trans("header.editorMode_logic"), key: "editorModeSelector_logic", value: "logic" },
+    { label: trans("header.editorMode_both"), key: "editorModeSelector_both", value: "both" },
+  ];
+  
+  const onEditorStateValueChange = ({ target: { value } }: RadioChangeEvent) => {
+    toggleEditorModeStatus(value);
+    editorState.setEditorModeStatus(value);
+  };
+  
   const headerStart = (
     <>
       <StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
@@ -323,8 +347,17 @@ export default function Header(props: HeaderProps) {
     </>
   );
 
+  // key={option.key}
+
   const headerMiddle = (
-    <>
+    <> 
+      <Radio.Group onChange={onEditorStateValueChange} value={props.editorModeStatus} optionType="button" buttonStyle="solid" size="small">
+        {editorModeOptions.map((option) => (
+          <Radio.Button key={option.key} value={option.value}>
+            {option.label}
+          </Radio.Button>
+        ))}
+      </Radio.Group>
       <IconRadius>
         <LeftIcon onClick={() => togglePanel("left")} $show={left} />
       </IconRadius>
diff --git a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
index 8cb20293a..e1a1766ad 100644
--- a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
@@ -7,7 +7,7 @@ import {
   LeftPanel,
   MiddlePanel,
 } from "pages/common/styledComponent";
-import { getPanelStatus, getPanelStyle } from "util/localStorageUtil";
+import { getPanelStatus, getEditorModeStatus, getPanelStyle } from "util/localStorageUtil";
 import { BottomSkeleton } from "pages/editor/bottom/BottomContent";
 import RightPanel from "pages/editor/right/RightPanel";
 import _ from "lodash";
@@ -46,6 +46,7 @@ export const EditorLoadingSpin = (props: { height?: string | number }) => {
 
 export default function EditorSkeletonView() {
   const panelStatus = getPanelStatus();
+  const editorModeStatus = getEditorModeStatus();
   const panelStyle = getPanelStyle();
   const isUserViewMode = useUserViewMode();
   const isTemplate = useTemplateViewMode();
@@ -57,7 +58,7 @@ export default function EditorSkeletonView() {
   return (
     <>
       <Height100Div>
-        <Header panelStatus={panelStatus} togglePanel={_.noop} />
+        <Header panelStatus={panelStatus} togglePanel={_.noop} editorModeStatus={editorModeStatus} toggleEditorModeStatus={_.noop} />
         <Body>
           <SiderStyled />
           {panelStatus.left && (
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index 07f8d5aeb..a63c2ad2f 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -10,7 +10,7 @@ import { trans } from "i18n";
 import { draggingUtils } from "layout";
 import { LeftPreloadIcon, LeftSettingIcon, LeftStateIcon, ScrollBar } from "lowcoder-design";
 import { useTemplateViewMode } from "util/hooks";
-import Header, { PanelStatus, TogglePanel } from "pages/common/header";
+import Header, { PanelStatus, TogglePanel, EditorModeStatus, ToggleEditorModeStatus } from "pages/common/header";
 import { HelpDropdown } from "pages/common/help";
 import { PreviewHeader } from "pages/common/previewHeader";
 import {
@@ -29,7 +29,7 @@ import {
 import RightPanel from "pages/editor/right/RightPanel";
 import EditorTutorials from "pages/tutorials/editorTutorials";
 import { editorContentClassName, UserGuideLocationState } from "pages/tutorials/tutorialsConstant";
-import React, { useCallback, useContext, useLayoutEffect, useMemo, useState } from "react";
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { Helmet } from "react-helmet";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
@@ -38,7 +38,7 @@ import { currentApplication } from "redux/selectors/applicationSelector";
 import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector";
 import styled from "styled-components";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
-import { DefaultPanelStatus, getPanelStatus, savePanelStatus } from "util/localStorageUtil";
+import { DefaultPanelStatus, getPanelStatus, savePanelStatus, DefaultEditorModeStatus, getEditorModeStatus, saveEditorModeStatus } from "util/localStorageUtil";
 import Bottom from "./bottom/BottomPanel";
 import { LeftContent } from "./LeftContent";
 import { isAggregationApp } from "util/appUtils";
@@ -179,6 +179,7 @@ const items = [
   },
 ];
 
+
 function EditorView(props: EditorViewProps) {
   const { uiComp } = props;
   const editorState = useContext(EditorContext);
@@ -199,8 +200,9 @@ function EditorView(props: EditorViewProps) {
   const [panelStatus, setPanelStatus] = useState(() => {
     return showNewUserGuide ? DefaultPanelStatus : getPanelStatus();
   });
-  const [prePanelStatus, setPrePanelStatus] = useState<PanelStatus>(DefaultPanelStatus);
 
+  const [prePanelStatus, setPrePanelStatus] = useState<PanelStatus>(DefaultPanelStatus);
+  
   const togglePanel: TogglePanel = useCallback(
     (key) => {
       let newPanelStatus;
@@ -221,6 +223,23 @@ function EditorView(props: EditorViewProps) {
     [panelStatus, prePanelStatus]
   );
 
+
+  // added by Falk Wolsky to support a Layout and Logic Mode in Lowcoder
+  const [editorModeStatus, setEditorModeStatus] = useState(() => {
+    return showNewUserGuide ? DefaultEditorModeStatus : getEditorModeStatus();
+  });
+  
+  const toggleEditorModeStatus: ToggleEditorModeStatus = useCallback( (value) => {
+
+      setEditorModeStatus(value ? value : "both" as EditorModeStatus);
+      saveEditorModeStatus(value ? value : "both" as EditorModeStatus);
+        
+    },
+    [editorModeStatus]
+  );
+
+
+  
   const onCompDrag = useCallback(
     (dragCompKey: string) => {
       editorState.setDraggingCompType(dragCompKey);
@@ -310,7 +329,7 @@ function EditorView(props: EditorViewProps) {
         draggingUtils.clearData();
       }}
     >
-      <Header togglePanel={togglePanel} panelStatus={panelStatus} />
+      <Header togglePanel={togglePanel} panelStatus={panelStatus} toggleEditorModeStatus={toggleEditorModeStatus} editorModeStatus={editorModeStatus}  />
       <Helmet>{application && <title>Codestin Search App</title>}</Helmet>
       {showNewUserGuide && <EditorTutorials />}
       <EditorGlobalHotKeys
@@ -343,7 +362,7 @@ function EditorView(props: EditorViewProps) {
             </Sider>
           </SiderWrapper>
 
-          {panelStatus.left && (
+          {panelStatus.left && editorModeStatus !== "layout" && (
             <LeftPanel>
               {menuKey === SiderKey.State && <LeftContent uiComp={uiComp} />}
               {menuKey === SiderKey.Setting && (
@@ -382,7 +401,7 @@ function EditorView(props: EditorViewProps) {
                 </EditorContainerWithViewMode>
               </EditorHotKeys>
             </EditorWrapper>
-            {panelStatus.bottom && <Bottom />}
+            {panelStatus.bottom && editorModeStatus !== "layout" && <Bottom />}
           </MiddlePanel>
           {showRight && (
             <RightPanel
diff --git a/client/packages/lowcoder/src/util/localStorageUtil.ts b/client/packages/lowcoder/src/util/localStorageUtil.ts
index d917c14dc..2d06ddd20 100644
--- a/client/packages/lowcoder/src/util/localStorageUtil.ts
+++ b/client/packages/lowcoder/src/util/localStorageUtil.ts
@@ -1,4 +1,5 @@
 import { PanelStatus } from "pages/common/header";
+import { EditorModeStatus } from "pages/common/header";
 import log from "loglevel";
 import { JSONValue } from "util/jsonTypes";
 
@@ -17,6 +18,8 @@ export const DefaultPanelStatus: PanelStatus = {
   bottom: true,
   right: true,
 };
+
+
 const DefaultPanelStyle: PanelStyle = {
   bottom: {
     h: 285,
@@ -39,6 +42,20 @@ export function getPanelStatus(): PanelStatus {
   return { ...DefaultPanelStatus, ...JSON.parse(str) };
 }
 
+
+export function saveEditorModeStatus(editorModeStatus: EditorModeStatus) {
+  localStorage.setItem("editor_mode_status", editorModeStatus);
+}
+
+export const DefaultEditorModeStatus: EditorModeStatus = "both"; 
+export function getEditorModeStatus(): EditorModeStatus {
+  const str = localStorage.getItem("editor_mode_status");
+  if (!str) {
+    return DefaultEditorModeStatus;
+  }
+  return str as EditorModeStatus;
+}
+
 export function savePanelStyle(panelStyle: PanelStyle) {
   localStorage.setItem("editor_panel_style", JSON.stringify(panelStyle));
 }

From b814ce2829e123bea6514f4ae993945915e5a929 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Sat, 25 Nov 2023 22:05:50 +0100
Subject: [PATCH 3/4] Introducing Layout / Logic Mode

---
 .../comps/comps/jsonComp/jsonEditorComp.tsx   | 23 ++++++---
 .../comps/comps/jsonComp/jsonExplorerComp.tsx | 33 ++++++++----
 .../comps/comps/jsonComp/jsonLottieComp.tsx   | 50 ++++++++++---------
 .../packages/lowcoder/src/i18n/locales/en.ts  |  4 +-
 4 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
index 60f46fe5a..6fde88e77 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
@@ -12,7 +12,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
 import { JsonEditorStyle } from "comps/controls/styleControlConstants";
 import { styleControl } from "comps/controls/styleControl";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useContext } from "react";
 import {
   EditorState,
   EditorView,
@@ -20,6 +20,7 @@ import {
 } from "base/codeEditor/codeMirror";
 import { useExtensions } from "base/codeEditor/extensions";
 import { getJsonFormatter } from "base/codeEditor/autoFormat";
+import { EditorContext } from "comps/editorState";
 
 /**
  * JsonEditor Comp
@@ -124,13 +125,23 @@ let JsonEditorTmpComp = (function () {
       return (
         <>
           <Section name={sectionNames.basic}>
-            {children.value.propertyView({ label: trans("prop.defaultValue") })}
+            {children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
           </Section>
+
           <FormDataPropertyView {...children} />
-          {children.label.getPropertyView()}
-          <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {hiddenPropertyView(children)}
+            </Section>
+          )}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )}
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+          )}
+
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
index 50babe510..6d11c9f67 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
@@ -9,6 +9,8 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeControl";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
+import { EditorContext } from "comps/editorState";
+import { useContext } from "react";
 
 /**
  * JsonExplorer Comp
@@ -64,20 +66,29 @@ let JsonExplorerTmpComp = (function () {
       return (
         <>
           <Section name={sectionNames.basic}>
-            {children.value.propertyView({
-              label: trans("data"),
-            })}
-            {children.indent.propertyView({ label: trans("jsonExplorer.indent") })}
-            {children.expandToggle.propertyView({ label: trans("jsonExplorer.expandToggle") })}
+            {children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
           </Section>
 
-          <Section name={sectionNames.style}>
-            {children.theme.propertyView({
-              label: trans("jsonExplorer.theme"),
-            })}
-          </Section>
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.interaction}>
+              {hiddenPropertyView(children)}
+              {children.expandToggle.propertyView({ label: trans("jsonExplorer.expandToggle") })}
+            </Section>
+          )}
+
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.advanced}>
+              {children.indent.propertyView({ label: trans("jsonExplorer.indent") })}
+            </Section>
+          )}
 
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.style}>
+              {children.theme.propertyView({
+                label: trans("jsonExplorer.theme"),
+              })}
+            </Section>
+          )}
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
index faf49602b..d3e6dcd72 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -10,7 +10,7 @@ import { styleControl } from "comps/controls/styleControl";
 import { LottieStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { Section, sectionNames } from "lowcoder-design";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useContext } from "react";  
 import { UICompBuilder, withDefault } from "../../generators";
 import {
   NameConfig,
@@ -18,6 +18,8 @@ import {
   withExposingConfigs,
 } from "../../generators/withExposing";
 import { defaultLottie } from "./jsonConstants";
+import { EditorContext } from "comps/editorState";
+
 /**
  * JsonLottie Comp
  */
@@ -87,7 +89,7 @@ let JsonLottieTmpComp = (function () {
     speed: dropdownControl(speedOptions, "1"),
     width: withDefault(NumberControl, 100),
     height: withDefault(NumberControl, 100),
-    backgroundColor: styleControl(LottieStyle),
+    container: styleControl(LottieStyle),
     animationStart: dropdownControl(animationStartOptions, "auto"),
     loop: dropdownControl(loopOptions, "single"),
     keepLastFrame: BoolControl.DEFAULT_TRUE,
@@ -95,15 +97,15 @@ let JsonLottieTmpComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return (
       <div style={{
-        padding: `${props.backgroundColor.margin}`,
+        padding: `${props.container.margin}`,
       }}>
         <div
           style={{
             height: "100%",
             display: "flex",
             justifyContent: "center",
-            backgroundColor: `${props.backgroundColor.background}`,
-            padding: `${props.backgroundColor.padding}`
+            backgroundColor: `${props.container.background}`,
+            padding: `${props.container.padding}`
           }}
         >
           <Player
@@ -134,25 +136,27 @@ let JsonLottieTmpComp = (function () {
             {children.value.propertyView({
               label: trans("jsonLottie.lottieJson"),
             })}
-            {children.speed.propertyView({
-              label: trans("jsonLottie.speed"),
-            })}
-            {children.loop.propertyView({
-              label: trans("jsonLottie.loop"),
-            })}
-            {children.animationStart.propertyView({
-              label: trans("jsonLottie.animationStart"),
-            })}
-            {children.keepLastFrame.propertyView({
-              label: trans("jsonLottie.keepLastFrame"),
-            })}
-          </Section>
-          <Section name={sectionNames.style}>
-            {children.backgroundColor.getPropertyView()}
-          </Section>
-          <Section name={sectionNames.layout}>
-            {hiddenPropertyView(children)}
           </Section>
+
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <><Section name={sectionNames.interaction}>
+                {children.speed.propertyView({ label: trans("jsonLottie.speed")})}
+                {children.loop.propertyView({ label: trans("jsonLottie.loop")})}
+                {children.animationStart.propertyView({ label: trans("jsonLottie.animationStart")})}
+                {children.keepLastFrame.propertyView({ label: trans("jsonLottie.keepLastFrame")})}
+                {hiddenPropertyView(children)}
+              </Section>
+            </>
+          )}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <>
+              <Section name={sectionNames.style}>
+                {children.container.getPropertyView()}
+              </Section>
+            </>
+          )}
+
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index dc04e5f43..c5e52c10b 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1346,9 +1346,9 @@ export const en = {
   },
   jsonExplorer: {
     indent: "Indent",
-    expandToggle: "Expand toggle",
+    expandToggle: "Expand JSON Tree",
     theme: "Theme",
-    valueDesc: "Current json Data",
+    valueDesc: "Current JSON Data",
     default: "Default",
     defaultDark: "Default dark",
     neutralLight: "Neutral light",

From 0e2a9fd04777fba62536d4ec0c8ee03096792cea Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Mon, 27 Nov 2023 22:35:52 +0100
Subject: [PATCH 4/4] Introducing Layout / Logic Mode step 2

---
 client/packages/lowcoder-comps/package.json   |   2 +-
 .../jsonSchemaFormComp/jsonSchemaFormComp.tsx | 144 ++++++++++-----
 .../listViewComp/listViewPropertyView.tsx     |  24 ++-
 .../src/comps/comps/mediaComp/audioComp.tsx   |  22 ++-
 .../src/comps/comps/mediaComp/videoComp.tsx   |  80 ++++++---
 .../comps/comps/meetingComp/controlButton.tsx |  56 +++---
 .../videoMeetingControllerComp.tsx            | 105 ++++++-----
 .../meetingComp/videoMeetingStreamComp.tsx    | 154 ++++------------
 .../meetingComp/videoSharingStreamComp.tsx    | 165 ++++--------------
 .../src/comps/comps/navComp/navComp.tsx       |  44 +++--
 .../comps/numberInputComp/numberInputComp.tsx |  70 +++++---
 .../numberInputComp/sliderCompConstants.tsx   |  34 ++--
 .../src/comps/comps/remoteComp/loaders.tsx    |  11 +-
 .../responsiveLayout/responsiveLayout.tsx     |  94 +++++-----
 .../selectInputComp/cascaderContants.tsx      |  36 ++--
 .../selectInputComp/radioCompConstants.tsx    |  54 +++---
 .../selectInputComp/segmentedControl.tsx      |  29 ++-
 .../selectInputComp/selectCompConstants.tsx   |  40 +++--
 .../packages/lowcoder/src/i18n/locales/en.ts  |  10 +-
 .../packages/lowcoder/src/i18n/locales/zh.ts  |   2 +-
 20 files changed, 600 insertions(+), 576 deletions(-)

diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
index 0fb29c955..a0202200c 100644
--- a/client/packages/lowcoder-comps/package.json
+++ b/client/packages/lowcoder-comps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "license": "MIT",
   "dependencies": {
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index 0f8e6e767..a3d46fe2a 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -24,6 +24,9 @@ import ErrorBoundary from "./errorBoundary";
 import { Theme } from "@rjsf/antd";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 Theme.widgets.DateWidget = DateWidget(false);
 Theme.widgets.DateTimeWidget = DateWidget(true);
 const Form = withTheme(Theme);
@@ -106,7 +109,7 @@ function convertData(schema?: JSONSchema7, data?: any) {
   }
 }
 
-// FIXME: translate more other errors
+// TODO: translate more other errors
 // refer to ajv-i18n, https://github.com/ajv-validator/ajv-i18n/blob/master/messages/index.js
 // https://github.com/ajv-validator/ajv/tree/6a671057ea6aae690b5967ee26a0ddf8452c6297#Validation-keywords
 // JSON schema refer to https://json-schema.org/understanding-json-schema/reference/
@@ -225,52 +228,105 @@ let FormBasicComp = (function () {
     .setPropertyViewFn((children) => {
       return (
         <>
-          <Section name={sectionNames.basic}>
-            {children.resetAfterSubmit.propertyView({
-              label: trans("jsonSchemaForm.resetAfterSubmit"),
-            })}
-            {children.schema.propertyView({
-              label: trans("jsonSchemaForm.jsonSchema"),
-              tooltip: (
-                <>
-                  {trans("jsonSchemaForm.schemaTooltip") + " "}
-                  <a
-                    href={"http://json-schema.org/learn/getting-started-step-by-step"}
-                    target={"_blank"}
-                    rel="noreferrer"
-                  >
-                    JSON schema
-                  </a>
-                </>
-              ),
-            })}
-            {children.uiSchema.propertyView({
-              label: trans("jsonSchemaForm.uiSchema"),
-              tooltip: (
-                <>
-                  {trans("jsonSchemaForm.schemaTooltip") + " "}
-                  <a
-                    href={
-                      "https://jsonforms.io/docs/uischema"
-                    }
-                    target={"_blank"}
-                    rel="noreferrer"
-                  >
-                    UI schema
-                  </a>
-                </>
-              ),
-            })}
-            {children.data.propertyView({
-              label: trans("jsonSchemaForm.defaultData"),
-            })}
-          </Section>
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.basic}>
+              
+              {children.schema.propertyView({
+                label: (
+                  <>
+                    {trans("jsonSchemaForm.jsonSchema") + " ("}
+                    <a
+                      href={"http://json-schema.org/learn/getting-started-step-by-step"}
+                      target={"_blank"}
+                      rel="noreferrer"
+                    >
+                      Docs 1
+                    </a>
+                    {", "}
+                    <a
+                      href={"https://jsonforms.io/examples/basic"}
+                      target={"_blank"}
+                      rel="noreferrer"
+                    >
+                      Docs 2
+                    </a>
+                    {")"}
+                  </>
+                ),
+                tooltip: (
+                  <>
+                    {trans("jsonSchemaForm.schemaTooltip") + " "}
+                    <a
+                      href={"http://json-schema.org/learn/getting-started-step-by-step"}
+                      target={"_blank"}
+                      rel="noreferrer"
+                    >
+                      JSON schema
+                    </a>
+                  </>
+                ),
+              })}
+              {children.uiSchema.propertyView({
+                label: (
+                  <>
+                    {trans("jsonSchemaForm.uiSchema") + " ("}
+                    <a
+                      href={"https://jsonforms.io/docs/uischema"}
+                      target={"_blank"}
+                      rel="noreferrer"
+                    >
+                      Docs 1
+                    </a>
+                    {", "}
+                    <a
+                      href={"https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema"}
+                      target={"_blank"}
+                      rel="noreferrer"
+                    >
+                      Docs 2
+                    </a>
+                    {")"}
+                  </> 
+                ),
+                tooltip: (
+                  <>
+                    {trans("jsonSchemaForm.schemaTooltip") + " "}
+                    <a
+                      href={
+                        "https://jsonforms.io/docs/uischema"
+                      }
+                      target={"_blank"}
+                      rel="noreferrer"
+                    >
+                      UI schema
+                    </a>
+                  </>
+                ),
+              })}
+              {children.data.propertyView({
+                label: trans("jsonSchemaForm.defaultData"),
+              })}
+            </Section>
+          )}
 
-          <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {hiddenPropertyView(children)}
+              {children.resetAfterSubmit.propertyView({
+                label: trans("jsonSchemaForm.resetAfterSubmit"),
+              })}
+            </Section>
+          )}
 
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <>
+              <Section name={sectionNames.style}>
+                {children.style.getPropertyView()}
+              </Section>
+            </>
+          )}
 
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
index d9c712dbb..d76aaaa4e 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
@@ -2,6 +2,8 @@ import { trans, transToNode } from "i18n";
 import { Section, sectionNames } from "lowcoder-design";
 import { ListViewImplComp } from "./listViewComp";
 import { ListCompType } from "./listViewUtils";
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
 
 type Props = {
   comp: InstanceType<typeof ListViewImplComp>;
@@ -43,12 +45,22 @@ export function listPropertyView(compType: ListCompType) {
             }),
           })}
         </Section>
-        <Section name={trans("prop.pagination")}>
-          {comp.children.pagination.getPropertyView()}
-        </Section>
-        <Section name={sectionNames.layout}>{children.autoHeight.getPropertyView()}</Section>
-        {/* <Section name={sectionNames.style}>{children.showBorder.propertyView({ label: "" })}</Section> */}
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={trans("prop.pagination")}>
+            {comp.children.pagination.getPropertyView()}
+          </Section>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.layout}>
+              {children.autoHeight.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section></>
+        )}
+   
       </>
     );
   };
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
index 4c9ce8e10..0774ecfee 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
@@ -13,6 +13,8 @@ import { withDefault } from "../../generators/simpleGenerators";
 import { trans } from "i18n";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
 
 const Container = styled.div`
   height: 100%;
@@ -74,17 +76,21 @@ let AudioBasicComp = (function () {
             {children.src.propertyView({
               label: trans("audio.src"),
             })}
-            {children.autoPlay.propertyView({
-              label: trans("audio.autoPlay"),
-            })}
-            {children.loop.propertyView({
-              label: trans("audio.loop"),
-            })}
           </Section>
 
-          <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {hiddenPropertyView(children)}
+              {children.autoPlay.propertyView({
+                label: trans("audio.autoPlay"),
+              })}
+              {children.loop.propertyView({
+                label: trans("audio.loop"),
+              })}
+            </Section>
+          )}
 
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index a97d34014..b3c6b6aee 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -6,7 +6,7 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generat
 import { RecordConstructorToView } from "lowcoder-core";
 import { useRef, useState } from "react";
 import { styleControl } from "comps/controls/styleControl";
-import { ImageStyle } from "comps/controls/styleControlConstants";
+import { ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
 import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
 import { Container, playIcon } from "lowcoder-design";
@@ -17,6 +17,10 @@ import { Video } from "lowcoder-design";
 import ReactPlayer from "react-player";
 import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+import styled, { css } from "styled-components";
+
 const EventOptions = [
   { label: trans("video.play"), value: "play", description: trans("video.playDesc") },
   { label: trans("video.pause"), value: "pause", description: trans("video.pauseDesc") },
@@ -24,12 +28,25 @@ const EventOptions = [
   { label: trans("video.ended"), value: "ended", description: trans("video.endedDesc") },
 ] as const;
 
+/* const StyledContainer = styled.div.attrs(props => ({
+  style: props.style ? getStyle(props.style) : {}
+}))``;
+
+const getStyle = (style: ImageStyleType) => {
+  return {
+    border: `1px solid ${style.border}`,
+    radius: style.radius,
+    margin: style.margin,
+    padding: style.padding,
+  };
+}; */
+
 const ContainerVideo = (props: RecordConstructorToView<typeof childrenMap>) => {
   const videoRef = useRef<ReactPlayer | null>(null);
   let [posterClicked, setPosterClicked] = useState(false);
   return (
     <Container ref={props.containerRef}>
-      <Video
+      <Video 
         config={{
           file: {
             forceVideo: true,
@@ -84,7 +101,7 @@ const childrenMap = {
   duration: numberExposingStateControl("duration"),
   ...mediaCommonChildren,
 };
-
+ 
 let VideoBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return <ContainerVideo {...props} />;
@@ -96,34 +113,41 @@ let VideoBasicComp = (function () {
             {children.src.propertyView({
               label: trans("video.src"),
             })}
-            {children.poster.propertyView({
-              label: trans("video.poster"),
-              tooltip: trans("video.posterTooltip"),
-            })}
-            {children.autoPlay.propertyView({
-              label: trans("video.autoPlay"),
-              tooltip: trans("video.autoPlayTooltip"),
-            })}
-            {children.loop.propertyView({
-              label: trans("video.loop"),
-            })}
-            {children.controls.propertyView({
-              label: trans("video.controls"),
-              tooltip: trans("video.controlsTooltip"),
-            })}
-            {children.volume.propertyView({
-              label: trans("video.volume"),
-              tooltip: trans("video.volumeTooltip"),
-            })}
-            {children.playbackRate.propertyView({
-              label: trans("video.playbackRate"),
-              tooltip: trans("video.playbackRateTooltip"),
-            })}
           </Section>
 
-          <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+
+            <><Section name={sectionNames.interaction}>
+                {children.onEvent.getPropertyView()}
+                {hiddenPropertyView(children)}
+              </Section>
+              <Section name={sectionNames.advanced}>
+                {children.poster.propertyView({
+                  label: trans("video.poster"),
+                  tooltip: trans("video.posterTooltip"),
+                })}
+                {children.volume.propertyView({
+                  label: trans("video.volume"),
+                  tooltip: trans("video.volumeTooltip"),
+                })}
+                {children.playbackRate.propertyView({
+                  label: trans("video.playbackRate"),
+                  tooltip: trans("video.playbackRateTooltip"),
+                })}
+                {children.autoPlay.propertyView({
+                  label: trans("video.autoPlay"),
+                  tooltip: trans("video.autoPlayTooltip"),
+                })}
+                {children.loop.propertyView({
+                  label: trans("video.loop"),
+                })}
+                {children.controls.propertyView({
+                  label: trans("video.controls"),
+                  tooltip: trans("video.controlsTooltip"),
+                })}
 
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+              </Section></>
+          )}
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index b6034a6db..b77266fb5 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -41,6 +41,8 @@ import {
 import { useEffect, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 
+import { useContext } from "react";
+
 const Container = styled.div<{ $style: any }>`
   height: 100%;
   width: 100%;
@@ -286,37 +288,35 @@ let ButtonTmpComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
-          {children.autoHeight.getPropertyView()}
-        </Section>
-        <Section name={sectionNames.interaction}>
-          {children.type.propertyView({
-            label: trans("prop.type"),
-            radioButton: true,
-          })}
-          {isDefault(children.type.getView())
-            ? [
-                children.onEvent.getPropertyView(),
-                disabledPropertyView(children),
-                loadingPropertyView(children),
-              ]
-            : children.form.getPropertyView()}
-        </Section>
-
-        <Section name={sectionNames.layout}>
           {children.prefixIcon.propertyView({
-            label: trans("button.prefixIcon"),
-          })}
-          {children.iconSize.propertyView({
-            label: trans("meeting.iconSize"),
-          })}
-          {hiddenPropertyView(children)}
-        </Section>
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
-          {children.aspectRatio.propertyView({
-            label: "Video Aspect Ratio",
+            label: trans("button.icon"),
           })}
         </Section>
+
+
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {disabledPropertyView(children)}
+            {hiddenPropertyView(children)}
+            {loadingPropertyView(children)}
+          </Section>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.layout}>
+              {children.autoHeight.getPropertyView()}
+              {children.iconSize.propertyView({
+                label: trans("button.iconSize"),
+              })}
+            </Section>
+            <Section name={sectionNames.style}>
+                {children.style.getPropertyView()}
+                {children.aspectRatio.propertyView({
+                  label: trans("style.aspectRatio"),
+                })}
+            </Section></>
+        )}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
index be45aede9..612f6f090 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
@@ -43,6 +43,9 @@ import { NameConfig, withExposingConfigs } from "../../generators/withExposing";
 
 import { v4 as uuidv4 } from "uuid";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 // import axios from "axios";
 
 import AgoraRTC, {
@@ -219,7 +222,7 @@ const rtmInit = async (appId: any, uid: any, token: any, channel: any) => {
 };
 
 export const meetingControllerChildren = {
-  visible: withDefault(BooleanStateControl, "visible"),
+  visible: withDefault(BooleanStateControl, "false"),
   onEvent: eventHandlerControl(EventOptions),
   width: StringControl,
   height: StringControl,
@@ -559,55 +562,63 @@ let MTComp = (function () {
   )
     .setPropertyViewFn((children) => (
       <>
-        <Section name={sectionNames.basic}>
-          {children.placement.propertyView({
-            label: trans("drawer.placement"),
-            radioButton: true,
-          })}
-          {["top", "bottom"].includes(children.placement.getView())
-            ? children.autoHeight.getPropertyView()
-            : children.width.propertyView({
-                label: trans("drawer.width"),
-                tooltip: trans("drawer.widthTooltip"),
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.meetings}>
+              {children.appId.propertyView({
+                label: trans("meeting.appid"),
+              })}
+              {children.meetingName.propertyView({
+                label: trans("meeting.meetingName"),
+              })}
+              {children.localUserID.propertyView({
+                label: trans("meeting.localUserID"),
+              })}
+              {children.rtmToken.propertyView({
+                label: trans("meeting.rtmToken"),
+              })}
+              {children.rtcToken.propertyView({
+                label: trans("meeting.rtcToken"),
+              })}
+            </Section>
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+            </Section>
+          </>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.layout}>
+            {children.placement.propertyView({
+              label: trans("drawer.placement"),
+              radioButton: true,
+            })}
+            {["top", "bottom"].includes(children.placement.getView())
+              ? children.autoHeight.getPropertyView()
+              : children.width.propertyView({
+                  label: trans("drawer.width"),
+                  tooltip: trans("drawer.widthTooltip"),
+                  placeholder: DEFAULT_SIZE + "",
+                })}
+            {!children.autoHeight.getView() &&
+              ["top", "bottom"].includes(children.placement.getView()) &&
+              children.height.propertyView({
+                label: trans("drawer.height"),
+                tooltip: trans("drawer.heightTooltip"),
                 placeholder: DEFAULT_SIZE + "",
               })}
-          {!children.autoHeight.getView() &&
-            ["top", "bottom"].includes(children.placement.getView()) &&
-            children.height.propertyView({
-              label: trans("drawer.height"),
-              tooltip: trans("drawer.heightTooltip"),
-              placeholder: DEFAULT_SIZE + "",
+            {children.maskClosable.propertyView({
+              label: trans("prop.maskClosable"),
             })}
-          {children.maskClosable.propertyView({
-            label: trans("prop.maskClosable"),
-          })}
-          {children.showMask.propertyView({
-            label: trans("prop.showMask"),
-          })}
-        </Section>
-        <Section name={sectionNames.meetings}>
-          {children.appId.propertyView({
-            label: trans("meeting.appid"),
-          })}
-          {children.meetingName.propertyView({
-            label: trans("meeting.meetingName"),
-          })}
-          {children.localUserID.propertyView({
-            label: trans("meeting.localUserID"),
-          })}
-          {children.rtmToken.propertyView({
-            label: trans("meeting.rtmToken"),
-          })}
-          {children.rtcToken.propertyView({
-            label: trans("meeting.rtcToken"),
-          })}
-        </Section>
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-        </Section>
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
-        </Section>
+            {children.showMask.propertyView({
+              label: trans("prop.showMask"),
+            })}
+          </Section>
+
+          <Section name={sectionNames.style}>
+            
+            {children.style.getPropertyView()}
+          </Section></>
+        )}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
index fe868117a..1510d66e2 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
@@ -1,15 +1,10 @@
 import { BoolCodeControl } from "comps/controls/codeControl";
-import { dropdownControl } from "comps/controls/dropdownControl";
-// import { IconControl } from "comps/controls/iconControl";
-import { CompNameContext, EditorContext, EditorState } from "comps/editorState";
+import { EditorContext } from "comps/editorState";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import ReactResizeDetector from "react-resize-detector";
-// import _ from "lodash";
+
 import {
-  CommonBlueLabel,
-  controlItem,
-  Dropdown,
   Section,
   sectionNames,
 } from "lowcoder-design";
@@ -21,8 +16,6 @@ import {
   NameConfig,
   withExposingConfigs,
 } from "../../generators/withExposing";
-import { IForm } from "../formComp/formDataConstants";
-import { SimpleNameComp } from "../simpleNameComp";
 import { ButtonStyleControl } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef, useState } from "react";
@@ -41,20 +34,7 @@ import {
 } from "@lowcoder-ee/index.sdk";
 import { BoolShareVideoControl } from "./meetingControlerUtils";
 
-const FormLabel = styled(CommonBlueLabel)`
-  font-size: 13px;
-  margin-right: 4px;
-`;
-
-function getFormOptions(editorState: EditorState) {
-  return editorState
-    .uiCompInfoList()
-    .filter((info) => info.type === "form")
-    .map((info) => ({
-      label: info.name,
-      value: info.name,
-    }));
-}
+import { useContext } from "react";
 
 const VideoContainer = styled.video`
   height: 100%;
@@ -64,94 +44,19 @@ const VideoContainer = styled.video`
   justify-content: space-around;
 `;
 
-function getForm(editorState: EditorState, formName: string) {
-  const comp = editorState?.getUICompByName(formName);
-  if (comp && comp.children.compType.getView() === "form") {
-    return comp.children.comp as unknown as IForm;
-  }
-}
-
-function getFormEventHandlerPropertyView(
-  editorState: EditorState,
-  formName: string
-) {
-  const form = getForm(editorState, formName);
-  if (!form) {
-    return undefined;
-  }
-
-  return (
-    <CompNameContext.Provider value={formName}>
-      {form.onEventPropertyView(
-        <>
-          <FormLabel
-            onClick={() =>
-              editorState.setSelectedCompNames(
-                new Set([formName]),
-                "rightPanel"
-              )
-            }
-          >
-            {formName}
-          </FormLabel>
-          {trans("button.formButtonEvent")}
-        </>
-      )}
-    </CompNameContext.Provider>
-  );
-}
-
-class SelectFormControl extends SimpleNameComp {
-  override getPropertyView() {
-    const label = trans("button.formToSubmit");
-    return controlItem(
-      { filterText: label },
-      <EditorContext.Consumer>
-        {(editorState) => (
-          <>
-            <Dropdown
-              label={label}
-              value={this.value}
-              options={getFormOptions(editorState)}
-              onChange={(value) => this.dispatchChangeValueAction(value)}
-              allowClear={true}
-            />
-            {getFormEventHandlerPropertyView(editorState, this.value)}
-          </>
-        )}
-      </EditorContext.Consumer>
-    );
-  }
-}
-
-const typeOptions = [
-  {
-    label: trans("button.default"),
-    value: "",
-  },
-  {
-    label: trans("button.submit"),
-    value: "submit",
-  },
-] as const;
-
 export const meetingStreamChildren = {
-  autoHeight: withDefault(AutoHeightControl, "fixed"),
+  autoHeight: withDefault(AutoHeightControl, "auto"),
   profilePadding: withDefault(StringControl, "0px"),
   profileBorderRadius: withDefault(StringControl, "0px"),
   videoAspectRatio: withDefault(StringControl, "1 / 1"),
-  type: dropdownControl(typeOptions, ""),
   onEvent: MeetingEventHandlerControl,
   disabled: BoolCodeControl,
   loading: BoolCodeControl,
-  form: SelectFormControl,
-  // prefixIcon: IconControl,
-  // suffixIcon: IconControl,
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
-  userId: stringExposingStateControl(""),
+  userId: withDefault(stringExposingStateControl(""), "{{meeting1.localUser}}"),
   profileImageUrl: withDefault(StringStateControl, "https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose"),
-  noVideoText: stringExposingStateControl("No Video"),
+  noVideoText: stringExposingStateControl(trans("meeting.noVideo")),
 };
 
 let VideoCompBuilder = (function (props) {
@@ -301,31 +206,38 @@ let VideoCompBuilder = (function (props) {
       <>
         <Section name={sectionNames.basic}>
           {children.userId.propertyView({ label: trans("meeting.videoId") })}
-          {children.autoHeight.getPropertyView()}
+          
           {children.profileImageUrl.propertyView({
             label: trans("meeting.profileImageUrl"),
-            placeholder: "https://via.placeholder.com/120",
+            placeholder: "https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose",
           })}
         </Section>
 
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-        </Section>
-        <Section name={sectionNames.layout}>
-          {hiddenPropertyView(children)}
-        </Section>
-        <Section name={sectionNames.style}>
-          {children.profilePadding.propertyView({
-            label: "Profile Image Padding",
-          })}
-          {children.profileBorderRadius.propertyView({
-            label: "Profile Image Border Radius",
-          })}
-          {children.videoAspectRatio.propertyView({
-            label: "Video Aspect Ratio",
-          })}
-          {children.style.getPropertyView()}
-        </Section>
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {hiddenPropertyView(children)}
+          </Section>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.layout}>
+              {children.autoHeight.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.style}>
+              {children.profilePadding.propertyView({
+                label: "Profile Image Padding",
+              })}
+              {children.profileBorderRadius.propertyView({
+                label: "Profile Image Border Radius",
+              })}
+              {children.videoAspectRatio.propertyView({
+                label: "Video Aspect Ratio",
+              })}
+              {children.style.getPropertyView()}
+            </Section>
+          </>
+        )}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
index 424d04853..acd4f95f6 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
@@ -1,15 +1,9 @@
 import { BoolCodeControl } from "comps/controls/codeControl";
-import { dropdownControl } from "comps/controls/dropdownControl";
-// import { IconControl } from "comps/controls/iconControl";
-import { CompNameContext, EditorContext, EditorState } from "comps/editorState";
+import { EditorContext } from "comps/editorState";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import ReactResizeDetector from "react-resize-detector";
-// import _ from "lodash";
 import {
-  CommonBlueLabel,
-  controlItem,
-  Dropdown,
   Section,
   sectionNames,
 } from "lowcoder-design";
@@ -21,8 +15,6 @@ import {
   NameConfig,
   withExposingConfigs,
 } from "../../generators/withExposing";
-import { IForm } from "../formComp/formDataConstants";
-import { SimpleNameComp } from "../simpleNameComp";
 import { ButtonStyleControl } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef, useState } from "react";
@@ -35,26 +27,12 @@ import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
 import {
   MeetingEventHandlerControl,
   StringControl,
-  StringStateControl,
   hiddenPropertyView,
   stringExposingStateControl,
 } from "@lowcoder-ee/index.sdk";
 import { BoolShareVideoControl } from "./meetingControlerUtils";
 
-const FormLabel = styled(CommonBlueLabel)`
-  font-size: 13px;
-  margin-right: 4px;
-`;
-
-function getFormOptions(editorState: EditorState) {
-  return editorState
-    .uiCompInfoList()
-    .filter((info) => info.type === "form")
-    .map((info) => ({
-      label: info.name,
-      value: info.name,
-    }));
-}
+import { useContext } from "react";
 
 const VideoContainer = styled.video`
   height: 100%;
@@ -64,97 +42,18 @@ const VideoContainer = styled.video`
   justify-content: space-around;
 `;
 
-function getForm(editorState: EditorState, formName: string) {
-  const comp = editorState?.getUICompByName(formName);
-  if (comp && comp.children.compType.getView() === "form") {
-    return comp.children.comp as unknown as IForm;
-  }
-}
-
-function getFormEventHandlerPropertyView(
-  editorState: EditorState,
-  formName: string
-) {
-  const form = getForm(editorState, formName);
-  if (!form) {
-    return undefined;
-  }
-
-  return (
-    <CompNameContext.Provider value={formName}>
-      {form.onEventPropertyView(
-        <>
-          <FormLabel
-            onClick={() =>
-              editorState.setSelectedCompNames(
-                new Set([formName]),
-                "rightPanel"
-              )
-            }
-          >
-            {formName}
-          </FormLabel>
-          {trans("button.formButtonEvent")}
-        </>
-      )}
-    </CompNameContext.Provider>
-  );
-}
-
-class SelectFormControl extends SimpleNameComp {
-  override getPropertyView() {
-    const label = trans("button.formToSubmit");
-    return controlItem(
-      { filterText: label },
-      <EditorContext.Consumer>
-        {(editorState) => (
-          <>
-            <Dropdown
-              label={label}
-              value={this.value}
-              options={getFormOptions(editorState)}
-              onChange={(value) => this.dispatchChangeValueAction(value)}
-              allowClear={true}
-            />
-            {getFormEventHandlerPropertyView(editorState, this.value)}
-          </>
-        )}
-      </EditorContext.Consumer>
-    );
-  }
-}
-
-const typeOptions = [
-  {
-    label: trans("button.default"),
-    value: "",
-  },
-  {
-    label: trans("button.submit"),
-    value: "submit",
-  },
-] as const;
-
 export const meetingStreamChildren = {
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   profilePadding: withDefault(StringControl, "0px"),
   profileBorderRadius: withDefault(StringControl, "0px"),
-  videoAspectRatio: withDefault(StringControl, "1 / 1"),
-  type: dropdownControl(typeOptions, ""),
+  videoAspectRatio: withDefault(StringControl, ""),
   onEvent: MeetingEventHandlerControl,
   disabled: BoolCodeControl,
   loading: BoolCodeControl,
-  form: SelectFormControl,
-  // prefixIcon: IconControl,
-  // suffixIcon: IconControl,
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
-  userId: stringExposingStateControl(""),
-  profileImageUrl: withDefault(
-    StringStateControl,
-    "https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose"
-  ),
-  noVideoText: stringExposingStateControl("No Video"),
+  userId: withDefault(stringExposingStateControl(""), "{{meeting1.localUser}}"),
+  noVideoText: stringExposingStateControl(trans("meeting.noVideo")),
 };
 
 let SharingCompBuilder = (function (props) {
@@ -271,7 +170,7 @@ let SharingCompBuilder = (function (props) {
               ) : (
                 <></>
               )}
-              <div
+              {/* <div
                 style={{
                   flexDirection: "column",
                   alignItems: "center",
@@ -290,7 +189,7 @@ let SharingCompBuilder = (function (props) {
                   src={props.profileImageUrl.value}
                 />
                 <p style={{ margin: "0" }}>{userName ?? ""}</p>
-              </div>
+              </div> */}
             </div>
           </ReactResizeDetector>
         )}
@@ -301,31 +200,33 @@ let SharingCompBuilder = (function (props) {
       <>
         <Section name={sectionNames.basic}>
           {children.userId.propertyView({ label: trans("meeting.videoId") })}
-          {children.autoHeight.getPropertyView()}
-          {children.profileImageUrl.propertyView({
-            label: trans("meeting.profileImageUrl"),
-            placeholder: "https://via.placeholder.com/120",
-          })}
         </Section>
 
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-        </Section>
-        <Section name={sectionNames.layout}>
-          {hiddenPropertyView(children)}
-        </Section>
-        <Section name={sectionNames.style}>
-          {children.profilePadding.propertyView({
-            label: "Profile Image Padding",
-          })}
-          {children.profileBorderRadius.propertyView({
-            label: "Profile Image Border Radius",
-          })}
-          {children.videoAspectRatio.propertyView({
-            label: "Video Aspect Ratio",
-          })}
-          {children.style.getPropertyView()}
-        </Section>
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {hiddenPropertyView(children)}
+          </Section>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.layout}>
+              {children.autoHeight.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.style}>
+              {children.profilePadding.propertyView({
+                label: "Profile Image Padding",
+              })}
+              {children.profileBorderRadius.propertyView({
+                label: "Profile Image Border Radius",
+              })}
+              {children.videoAspectRatio.propertyView({
+                label: "Video Aspect Ratio",
+              })}
+              {children.style.getPropertyView()}
+            </Section>
+          </>
+        )}
       </>
     ))
     .build();
@@ -339,7 +240,5 @@ SharingCompBuilder = class extends SharingCompBuilder {
 
 export const VideoSharingStreamComp = withExposingConfigs(SharingCompBuilder, [
   new NameConfig("loading", trans("button.loadingDesc")),
-  new NameConfig("profileImageUrl", trans("meeting.profileImageUrl")),
-
   ...CommonNameConfig,
 ]);
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
index 43652f9f5..0d9a599c3 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -15,6 +15,9 @@ import { NavigationStyle } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 type IProps = {
   justify: boolean;
   bgColor: string;
@@ -189,19 +192,38 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
   .setPropertyViewFn((children) => {
     return (
       <>
-        <Section name={trans("prop.logo")}>
-          {children.logoUrl.propertyView({ label: trans("navigation.logoURL") })}
-          {children.logoUrl.getView() && children.logoEvent.propertyView({ inline: true })}
-        </Section>
-        <Section name={trans("menu")}>
+        <Section name={sectionNames.basic}>
           {menuPropertyView(children.items)}
-          {children.horizontalAlignment.propertyView({
-            label: trans("navigation.horizontalAlignment"),
-            radioButton: true,
-          })}
         </Section>
-        <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.interaction}>
+            {hiddenPropertyView(children)}
+          </Section>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.layout}>
+            {children.horizontalAlignment.propertyView({
+              label: trans("navigation.horizontalAlignment"),
+              radioButton: true,
+            })}
+            {hiddenPropertyView(children)}
+          </Section>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.advanced}>
+            {children.logoUrl.propertyView({ label: trans("navigation.logoURL") })}
+            {children.logoUrl.getView() && children.logoEvent.propertyView({ inline: true })}
+          </Section>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (  
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+        )}
       </>
     );
   })
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 4935e2d1d..03d66d4df 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -50,6 +50,9 @@ import {
   setSelectionRangeMethod,
 } from "comps/utils/methodUtils";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const getStyle = (style: InputLikeStyleType) => {
   return css`
     border-radius: ${style.radius};
@@ -363,39 +366,48 @@ const NumberInputTmpComp = (function () {
           {children.value.propertyView({ label: trans("prop.defaultValue") })}
           {placeholderPropertyView(children)}
           {children.formatter.propertyView({ label: trans("numberInput.formatter") })}
-          {children.precision.propertyView({ label: trans("numberInput.precision") })}
-          {children.allowNull.propertyView({ label: trans("numberInput.allowNull") })}
-          {children.thousandsSeparator.propertyView({
-            label: trans("numberInput.thousandsSeparator"),
-          })}
-          {children.controls.propertyView({ label: trans("numberInput.controls") })}
         </Section>
 
         <FormDataPropertyView {...children} />
 
-        {children.label.getPropertyView()}
-
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-          {disabledPropertyView(children)}
-        </Section>
-
-        <Section name={sectionNames.advanced}>
-          {children.step.propertyView({ label: trans("numberInput.step") })}
-          {readOnlyPropertyView(children)}
-          {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
-        </Section>
-
-        <Section name={sectionNames.validation}>
-          {requiredPropertyView(children)}
-          {children.min.propertyView({ label: trans("prop.minimum") })}
-          {children.max.propertyView({ label: trans("prop.maximum") })}
-          {children.customRule.propertyView({})}
-        </Section>
-
-        <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <><Section name={sectionNames.validation}>
+            {requiredPropertyView(children)}
+            {children.min.propertyView({ label: trans("prop.minimum") })}
+            {children.max.propertyView({ label: trans("prop.maximum") })}
+            {children.customRule.propertyView({})}
+          </Section>
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {disabledPropertyView(children)}
+            {hiddenPropertyView(children)}
+          </Section>
+          </>
+        )}
+ 
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( 
+          children.label.getPropertyView()
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.advanced}>
+            {children.step.propertyView({ label: trans("numberInput.step") })}
+            {children.precision.propertyView({ label: trans("numberInput.precision") })}
+            {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
+            {children.allowNull.propertyView({ label: trans("numberInput.allowNull") })}
+            {children.thousandsSeparator.propertyView({
+              label: trans("numberInput.thousandsSeparator"),
+            })}
+            {children.controls.propertyView({ label: trans("numberInput.controls") })}
+            {readOnlyPropertyView(children)}
+          </Section>
+        )}
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+        )}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index a19c3f958..dddfe0ccc 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -13,6 +13,9 @@ import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUt
 import { IconControl } from "comps/controls/iconControl";
 import { trans } from "i18n";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const getStyle = (style: SliderStyleType) => {
   return css`
     &.ant-slider:not(.ant-slider-disabled) {
@@ -72,19 +75,28 @@ export const SliderPropertyView = (
   children: RecordConstructorToComp<typeof SliderChildren & { hidden: typeof BoolCodeControl }>
 ) => (
   <>
-    {children.label.getPropertyView()}
 
-    <Section name={sectionNames.interaction}>
-      {children.onEvent.getPropertyView()}
-      {disabledPropertyView(children)}
-    </Section>
+    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <Section name={sectionNames.interaction}>
+        {children.onEvent.getPropertyView()}
+        {disabledPropertyView(children)}
+        {hiddenPropertyView(children)}
+      </Section>
+    )}
 
-    <Section name={sectionNames.layout}>
-      {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
-      {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-      {hiddenPropertyView(children)}
-    </Section>
+    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      children.label.getPropertyView()
+    )}
 
-    <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <><Section name={sectionNames.layout}>
+          {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
+          {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+        </Section>
+        <Section name={sectionNames.style}>
+          {children.style.getPropertyView()}
+        </Section>
+      </>
+    )}
   </>
 );
diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx
index dc1b4bc0e..24038fb45 100644
--- a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx
+++ b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx
@@ -4,24 +4,19 @@ import { CompConstructor } from "lowcoder-core";
 import { RemoteCompInfo, RemoteCompLoader, RemoteCompSource } from "types/remoteComp";
 
 async function npmLoader(remoteInfo: RemoteCompInfo): Promise<CompConstructor | null> {
-  // log.info("load npm plugin:", remoteInfo);
   const { packageName, packageVersion = "latest", compName } = remoteInfo;
   const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${packageVersion}/index.js`;
-  console.log("Entry", entry);
+  // console.log("Entry", entry);
   try {
     const module = await import(/* webpackIgnore: true */ entry);
-    // let module = moduleGlobe;
-    // if (packageName !== "openblocks-comps-workmeet") {
-    //   module = await import(entry);
-    // }
-    console.log("Entry 1", module);
+    // console.log("Entry 1", module);
     const comp = module.default?.[compName];
     if (!comp) {
       throw new Error(trans("npm.compNotFound", { compName }));
     }
     return comp;
   } catch (e) {
-    console.log("eeeee", e);
+    console.log("Error during remote component loading", e);
     throw new Error(trans("npm.compNotFound", { compName }));
   }
 }
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index d0519a21a..b9026144b 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -34,6 +34,9 @@ import { messageInstance } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { NumberControl } from "comps/controls/codeControl";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const RowWrapper = styled(Row)<{$style: ResponsiveLayoutRowStyleType}>`
   height: 100%;
   border: 1px solid ${(props) => props.$style.border};
@@ -183,49 +186,56 @@ export const ResponsiveLayoutBaseComp = (function () {
               title: trans("responsiveLayout.column"),
               newOptionLabel: "Column",
             })}
-            {children.autoHeight.getPropertyView()}
-          </Section>
-          <Section name={trans("responsiveLayout.rowLayout")}>
-            {children.rowBreak.propertyView({
-              label: trans("responsiveLayout.rowBreak")
-            })}
-            {controlItem({}, (
-              <div style={{marginTop: '8px'}}>
-                {trans("responsiveLayout.columnsPerRow")}
-              </div>
-            ))}
-            {children.columnPerRowLG.propertyView({
-              label: trans("responsiveLayout.desktop")
-            })}
-            {children.columnPerRowMD.propertyView({
-              label: trans("responsiveLayout.tablet")
-            })}
-            {children.columnPerRowSM.propertyView({
-              label: trans("responsiveLayout.mobile")
-            })}
-          </Section>
-          <Section name={trans("responsiveLayout.columnsLayout")}>
-            {children.matchColumnsHeight.propertyView({
-              label: trans("responsiveLayout.matchColumnsHeight")
-            })}
-            {controlItem({}, (
-              <div style={{marginTop: '8px'}}>
-                {trans("responsiveLayout.columnsSpacing")}
-              </div>
-            ))}
-            {children.horizontalSpacing.propertyView({
-              label: trans("responsiveLayout.horizontal")
-            })}
-            {children.verticalSpacing.propertyView({
-              label: trans("responsiveLayout.vertical")
-            })}
-          </Section>
-          <Section name={trans("responsiveLayout.rowStyle")}>
-            {children.rowStyle.getPropertyView()}
-          </Section>
-          <Section name={trans("responsiveLayout.columnStyle")}>
-            {children.columnStyle.getPropertyView()}
           </Section>
+
+          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <>
+            <Section name={sectionNames.layout}>
+              {children.autoHeight.getPropertyView()}
+            </Section>
+            <Section name={trans("responsiveLayout.rowLayout")}>
+              {children.rowBreak.propertyView({
+                label: trans("responsiveLayout.rowBreak")
+              })}
+              {controlItem({}, (
+                <div style={{ marginTop: '8px' }}>
+                  {trans("responsiveLayout.columnsPerRow")}
+                </div>
+              ))}
+              {children.columnPerRowLG.propertyView({
+                label: trans("responsiveLayout.desktop")
+              })}
+              {children.columnPerRowMD.propertyView({
+                label: trans("responsiveLayout.tablet")
+              })}
+              {children.columnPerRowSM.propertyView({
+                label: trans("responsiveLayout.mobile")
+              })}
+            </Section>
+            <Section name={trans("responsiveLayout.columnsLayout")}>
+              {children.matchColumnsHeight.propertyView({
+                label: trans("responsiveLayout.matchColumnsHeight")
+              })}
+              {controlItem({}, (
+                <div style={{ marginTop: '8px' }}>
+                  {trans("responsiveLayout.columnsSpacing")}
+                </div>
+              ))}
+              {children.horizontalSpacing.propertyView({
+                label: trans("responsiveLayout.horizontal")
+              })}
+              {children.verticalSpacing.propertyView({
+                label: trans("responsiveLayout.vertical")
+              })}
+            </Section>
+            <Section name={trans("responsiveLayout.rowStyle")}>
+              {children.rowStyle.getPropertyView()}
+            </Section>
+            <Section name={trans("responsiveLayout.columnStyle")}>
+              {children.columnStyle.getPropertyView()}
+            </Section>
+            </>
+          )}
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
index 679abf1b0..1a631e2eb 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
@@ -21,6 +21,9 @@ import { CascaderRef } from "antd/lib/cascader";
 import { MarginControl } from "../../controls/marginControl";	
 import { PaddingControl } from "../../controls/paddingControl";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 export const defaultDataSource = JSON.stringify(i18nObjs.cascader, null, " ");
 
 export const CascaderChildren = {
@@ -48,20 +51,29 @@ export const CascaderPropertyView = (
       {placeholderPropertyView(children)}
     </Section>
 
-    {children.label.getPropertyView()}
-
-    <Section name={sectionNames.interaction}>
-      {children.onEvent.getPropertyView()}
-      {disabledPropertyView(children)}
-    </Section>
+    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <Section name={sectionNames.interaction}>
+        {children.onEvent.getPropertyView()}
+        {disabledPropertyView(children)}
+        {hiddenPropertyView(children)}
+      </Section>
+    )}
 
-    <Section name={sectionNames.advanced}>
-      {allowClearPropertyView(children)}
-      {showSearchPropertyView(children)}
-    </Section>
+    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      children.label.getPropertyView()
+    )}
 
-    <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <Section name={sectionNames.advanced}>
+        {allowClearPropertyView(children)}
+        {showSearchPropertyView(children)}
+      </Section>
+    )}
 
-    <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <Section name={sectionNames.style}>
+        {children.style.getPropertyView()}
+      </Section>
+    )}
   </>
 );
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
index e4a77f74a..f84180dd0 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
@@ -20,6 +20,9 @@ import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUt
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 export const RadioLayoutOptions = [
   { label: trans("radio.horizontal"), value: "horizontal" },
   { label: trans("radio.vertical"), value: "vertical" },
@@ -54,29 +57,38 @@ export const RadioPropertyView = (
       {children.options.propertyView({})}
       {children.value.propertyView({ label: trans("prop.defaultValue") })}
     </Section>
-    <FormDataPropertyView {...children} />
-    {children.label.getPropertyView()}
 
-    <Section name={sectionNames.interaction}>
-      {children.onEvent.getPropertyView()}
-      {disabledPropertyView(children)}
-    </Section>
+    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <><SelectInputValidationSection {...children} />
+      <FormDataPropertyView {...children} />
+      <Section name={sectionNames.interaction}>
+        {children.onEvent.getPropertyView()}
+        {disabledPropertyView(children)}
+        {hiddenPropertyView(children)}
+      </Section></>
+    )}
 
-    <SelectInputValidationSection {...children} />
+    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <Section name={sectionNames.layout}>
+        {children.layout.propertyView({
+          label: trans("radio.options"),
+          tooltip: (
+            <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+              <div>{trans("radio.horizontalTooltip")}</div>
+              <div>{trans("radio.verticalTooltip")}</div>
+              <div>{trans("radio.autoColumnsTooltip")}</div>
+            </div>
+          ),
+        })}
+      </Section>
+    )}
 
-    <Section name={sectionNames.layout}>
-      {children.layout.propertyView({
-        label: trans("radio.options"),
-        tooltip: (
-          <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-            <div>{trans("radio.horizontalTooltip")}</div>
-            <div>{trans("radio.verticalTooltip")}</div>
-            <div>{trans("radio.autoColumnsTooltip")}</div>
-          </div>
-        ),
-      })}
-      {hiddenPropertyView(children)}
-    </Section>
-    <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( 
+      children.label.getPropertyView() 
+    )}
+
+    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+    )}
   </>
 );
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
index 694fbdeb1..b1ee2e2bb 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -23,6 +23,9 @@ import { trans } from "i18n";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const getStyle = (style: SegmentStyleType) => {
   return css`
     &.ant-segmented:not(.ant-segmented-disabled) {
@@ -108,18 +111,26 @@ const SegmentedControlBasicComp = (function () {
           {children.options.propertyView({})}
           {children.value.propertyView({ label: trans("prop.defaultValue") })}
         </Section>
-        <FormDataPropertyView {...children} />
-        {children.label.getPropertyView()}
 
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-          {disabledPropertyView(children)}
-        </Section>
+        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <><SelectInputValidationSection {...children} />
+          <FormDataPropertyView {...children} />
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {disabledPropertyView(children)}
+            {hiddenPropertyView(children)}
+          </Section></>
+        )}
 
-        <SelectInputValidationSection {...children} />
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          children.label.getPropertyView()
+        )}
 
-        <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+        )}
       </>
     ))
     .setExposeMethodConfigs(selectDivRefMethods)
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index f58339f91..d458c67e6 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -51,6 +51,9 @@ import { BaseSelectRef } from "rc-select";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 export const getStyle = (
   style: SelectStyleType | MultiSelectStyleType | CascaderStyleType | TreeSelectStyleType
 ) => {
@@ -272,23 +275,34 @@ export const SelectPropertyView = (
       {children.value.propertyView({ label: trans("prop.defaultValue") })}
       {placeholderPropertyView(children)}
     </Section>
-    <FormDataPropertyView {...children} />
-    {children.label.getPropertyView()}
 
-    <Section name={sectionNames.interaction}>
-      {children.onEvent.getPropertyView()}
-      {disabledPropertyView(children)}
-    </Section>
+    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <><>
+        <SelectInputValidationSection {...children} />
+        <FormDataPropertyView {...children} />
+      </><Section name={sectionNames.interaction}>
+          {children.onEvent.getPropertyView()}
+          {disabledPropertyView(children)}
+          {hiddenPropertyView(children)}
+        </Section></>
+    )}
 
-    <Section name={sectionNames.advanced}>
-      {allowClearPropertyView(children)}
-      {showSearchPropertyView(children)}
-    </Section>
+    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      children.label.getPropertyView()
+    )}
 
-    <SelectInputValidationSection {...children} />
+    {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <Section name={sectionNames.advanced}>
+        {allowClearPropertyView(children)}
+        {showSearchPropertyView(children)}
+      </Section>
+    )}
 
-    <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-    <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+      <Section name={sectionNames.style}>
+        {children.style.getPropertyView()}
+      </Section>
+    )}
   </>
 );
 
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index c5e52c10b..72f4de9be 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -362,6 +362,7 @@ export const en = {
     containerfooterpadding: "Footer Padding",
     containerbodypadding: "Body Padding",
     minWidth: "Minimum Width",
+    aspectRatio: "Aspect Ratio",
   },
   export: {
     hiddenDesc: "If true, the component is hidden",
@@ -1052,7 +1053,7 @@ export const en = {
       "The auto column layout automatically rearranges the order as space permits and displays as multiple columns",
   },
   cascader: {
-    options: "Structure",
+    options: "Data",
   },
   selectInput: {
     valueDesc: "Currently selected value",
@@ -1123,6 +1124,8 @@ export const en = {
   button: {
     prefixIcon: "Prefix icon",
     suffixIcon: "Suffix icon",
+    icon: "Icon",
+    iconSize: "Icon size",
     button: "Button",
     formToSubmit: "Form to submit",
     default: "Default",
@@ -1358,7 +1361,7 @@ export const en = {
   },
   audio: {
     src: "Audio URL",
-    defaultSrcUrl: "https://cdn-files.lowcoder.cloud/canon-excerpt.mp3",
+    defaultSrcUrl: "https://cdn.pixabay.com/audio/2023/07/06/audio_e12e5bea9d.mp3",
     autoPlay: "Autoplay",
     loop: "Loop",
     srcDesc: "Current audio URL",
@@ -1450,6 +1453,7 @@ export const en = {
     height: "Drawer height",
   },
   meeting: {
+
     logLevel: "Agora SDK Log Level",
     placement: "Meeting placement",
     meeting: "Meeting Settings",
@@ -1473,7 +1477,7 @@ export const en = {
     userName: "Host User Name",
     rtmToken: "Agora RTM Token",
     rtcToken: "Agora RTC Token",
-    videoCompText: "No video Text",
+    noVideo: "No video",
     profileImageUrl: "Profile Image Url",
     right: "Right",
     bottom: "Bottom",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
index 6b97f4805..9dc5f575a 100644
--- a/client/packages/lowcoder/src/i18n/locales/zh.ts
+++ b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1281,7 +1281,7 @@ jsonExplorer: {
 },
 audio: {
     src: "音频链接",
-    defaultSrcUrl: "https://cdn-files.lowcoder.cloud/canon-excerpt.mp3",
+    defaultSrcUrl: "https://cdn.pixabay.com/audio/2023/07/06/audio_e12e5bea9d.mp3",
     autoPlay: "自动播放",
     loop: "循环播放",
     srcDesc: "当前音频链接",