Merge branch 'preset-vision/0.9.0' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into preset-vision/0.9.0

packages/designer/src/builtin-simulator/host.ts

@@ -753,7 +753,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     this.sensing = true;
     this.scroller.scrolling(e);
     const dropContainer = this.getDropContainer(e);
-    if (!dropContainer) {
+    if (!dropContainer || dropContainer.container?.componentName === 'Page') {
       return null;
     }
 

packages/editor-skeleton/package.json

@@ -26,7 +26,8 @@
     "@alifd/next": "^1.x",
     "classnames": "^2.2.6",
     "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react-dom": "^16.8.1",
+    "react-tabs": "^3.1.1"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.3",

packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
-import { Tab, Breadcrumb } from '@alifd/next';
+import { Breadcrumb } from '@alifd/next';
+import { Tabs, Tab, TabList, TabPanel } from 'react-tabs';
 import { Title, observer, Editor, obx } from '@ali/lowcode-editor-core';
 import { Node, isSettingField, SettingField } from '@ali/lowcode-designer';
 import { SettingsMain } from './main';
 import { SettingsPane } from './settings-pane';
 import { createIcon } from '@ali/lowcode-utils';
+import 'react-tabs/style/react-tabs.css';
 
 @observer
 export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
@@ -114,7 +116,33 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
 
     return (
       <div className="lc-settings-main">
-        <Tab
+        <Tabs
+          selectedKey={activeKey}
+          onSelect={(tabKey) => {
+            this._activeKey = tabKey;
+          }}
+          className="lc-settings-tabs"
+        >
+          <TabList>
+            {
+              (items as SettingField[]).map((field) => {
+                return <Tab><Title title={field.title} /></Tab>
+              })
+            }
+          </TabList>
+
+          {
+            (items as SettingField[]).map((field) => {
+              return (
+                <TabPanel className="lc-settings-tabs-content">
+                  { this.renderBreadcrumb() }
+                  <SettingsPane target={field} key={field.id} />
+                </TabPanel>
+              )
+            })
+          }
+        </Tabs>
+        {/* <Tab
           activeKey={activeKey}
           onChange={(tabKey) => {
             this._activeKey = tabKey;
@@ -126,7 +154,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
           extra={this.renderBreadcrumb()}
         >
           {tabs}
-        </Tab>
+        </Tab> */}
       </div>
     );
   }

packages/editor-skeleton/src/layouts/workbench.less

@@ -345,6 +345,7 @@ body {
         display: block;
       }
       .lc-settings-tabs{
+        padding-top: 12px;
         > .next-tabs-nav-extra{
           top: 36px !important;
         }
@@ -354,13 +355,20 @@ body {
             line-height: 12px;
           }
         }
+        > ul {
+          padding-left: 8px;
+          border-bottom: 1px solid #ddd !important;
+          li.react-tabs__tab--selected {
+            border-color: #ddd !important;
+          }
+        }
         .lc-title{
           color: inherit;
           line-height: inherit !important;
         }
       }
       .lc-settings-tabs-content{
-        top: 66px;
+        top: 43px;
       }
     }
   }