refactor: 还是恢复使用 next/tab

packages/editor-skeleton/package.json

@@ -23,11 +23,10 @@
     "@ali/lowcode-editor-core": "^0.8.15",
     "@ali/lowcode-types": "^0.8.5",
     "@ali/lowcode-utils": "^0.8.6",
-    "@alifd/next": "^1.x",
+    "@alifd/next": "^1.20.12",
     "classnames": "^2.2.6",
     "react": "^16.8.1",
-    "react-dom": "^16.8.1",
-    "react-tabs": "^3.1.1"
+    "react-dom": "^16.8.1"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.3",

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

@@ -1,12 +1,10 @@
 import React, { Component } from 'react';
-import { Breadcrumb } from '@alifd/next';
-import { Tabs, Tab, TabList, TabPanel } from 'react-tabs';
+import { Tab, Breadcrumb } from '@alifd/next';
 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 }> {
@@ -116,33 +114,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
 
     return (
       <div className="lc-settings-main">
-        <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
+        <Tab
           activeKey={activeKey}
           onChange={(tabKey) => {
             this._activeKey = tabKey;
@@ -151,10 +123,11 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
           animation={false}
           excessMode="dropdown"
           contentClassName="lc-settings-tabs-content"
+          disableKeyboard={true}
           extra={this.renderBreadcrumb()}
         >
           {tabs}
-        </Tab> */}
+        </Tab>
       </div>
     );
   }

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

@@ -345,7 +345,6 @@ body {
         display: block;
       }
       .lc-settings-tabs{
-        padding-top: 12px;
         > .next-tabs-nav-extra{
           top: 36px !important;
         }
@@ -355,20 +354,13 @@ 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: 43px;
+        top: 66px;
       }
     }
   }