From d93a2913cc005d34043b91ef4534ef64f30a67d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8A=9B=E7=9A=93?= <lihao.ylh@alibaba-inc.com>
Date: Thu, 11 Jun 2020 10:31:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A6=81=E6=AD=A2=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=8B=89=E5=88=B0=20Page=20=E7=9A=84=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E5=AD=90=E8=8A=82=E7=82=B9,=20=E4=BB=A5=E5=8F=8A=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2=20tab=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../designer/src/builtin-simulator/host.ts    |  2 +-
 packages/editor-skeleton/package.json         |  3 +-
 .../settings/settings-primary-pane.tsx        | 34 +++++++++++++++++--
 .../src/layouts/workbench.less                | 10 +++++-
 4 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts
index bc5b70e1c..eea50ca60 100644
--- a/packages/designer/src/builtin-simulator/host.ts
+++ b/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;
     }
 
diff --git a/packages/editor-skeleton/package.json b/packages/editor-skeleton/package.json
index 013703f02..350426d18 100644
--- a/packages/editor-skeleton/package.json
+++ b/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",
diff --git a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx
index c146ffb5d..24e59296d 100644
--- a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx
+++ b/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>
     );
   }
diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less
index deec754a1..4ec024cb1 100644
--- a/packages/editor-skeleton/src/layouts/workbench.less
+++ b/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;
       }
     }
   }