feat: support for hiding settings tabs when there is only one item (#669)

packages/editor-core/src/config.ts

@@ -100,6 +100,10 @@ const VALID_ENGINE_OPTIONS = {
     default: false,
     description: '当选中节点切换时，是否停留在相同的设置 tab 上',
   },
+  hideSettingsTabsWhenOnlyOneItem: {
+    type: 'boolean',
+    description: '是否在只有一个 item 的时候隐藏设置 tabs',
+  },
   loadingComponent: {
     type: 'ComponentType',
     default: undefined,
@@ -205,6 +209,10 @@ export interface EngineOptions {
    * 当选中节点切换时，是否停留在相同的设置 tab 上，默认值：false
    */
   stayOnTheSameSettingTab?: boolean;
+  /**
+   * 是否在只有一个 item 的时候隐藏设置 tabs，默认值：false
+   */
+  hideSettingsTabsWhenOnlyOneItem?: boolean;
   /**
    * 自定义 loading 组件
    */

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

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Tab, Breadcrumb } from '@alifd/next';
 import { Title, observer, Editor, obx, globalContext, engineConfig, makeObservable } from '@alilc/lowcode-editor-core';
 import { Node, isSettingField, SettingField, Designer } from '@alilc/lowcode-designer';
+import classNames from 'classnames';
 import { SettingsMain } from './main';
 import { SettingsPane } from './settings-pane';
 import { StageBox } from '../stage-box';
@@ -229,8 +230,12 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
     });
     const activeKey = matched ? this._activeKey : (items[0] as SettingField).name;
 
+    const className = classNames('lc-settings-main', {
+      'lc-settings-hide-tabs':
+        items.length === 1 && engineConfig.get('hideSettingsTabsWhenOnlyOneItem', false),
+    });
     return (
-      <div className="lc-settings-main">
+      <div className={className}>
         { this.renderBreadcrumb() }
         <Tab
           activeKey={activeKey}

packages/editor-skeleton/src/components/settings/style.less

@@ -150,6 +150,16 @@
   }
 }
 
+.lc-workbench .lc-workbench-body .lc-right-area .lc-settings-hide-tabs {
+  .lc-settings-tabs {
+    display: none;
+  }
+
+  .lc-settings-tabs-content {
+    top: 30px;
+  }
+}
+
 .lc-settings-pane {
   padding-bottom: 50px;
   .next-btn {