refactor(editor): sidebar不使用tmagic-design tabs

packages/editor/src/layouts/sidebar/Sidebar.vue

@@ -1,24 +1,23 @@
 <template>
-  <component
+  <div class="m-editor-sidebar" v-if="data.type === 'tabs' && data.items.length">
-    v-if="data.type === 'tabs' && data.items.length"
+    <div class="m-editor-sidebar-header">
-    v-model="activeTabName"
+      <div
-    class="m-editor-sidebar tmagic-design-tabs"
+        class="m-editor-sidebar-header-item"
-    v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
-    :is="tabsComponent?.component || 'el-tabs'"
-  >
-    <component
         v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
+        :key="config.$key ?? index"
-      :is="tabPaneComponent?.component || 'el-tab-pane'"
+        :class="{ 'is-active': activeTabName === config.text }"
-      :key="config.$key || index"
+        @click="activeTabName = config.text || `${index}`"
       >
-      <template #label>
-        <div :key="config.text">
         <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
         <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
       </div>
-      </template>
+    </div>
-
+    <div
+      class="m-editor-sidebar-content"
+      v-for="(config, index) in sideBarItems"
+      :key="config.$key ?? index"
+      v-show="activeTabName === config.text"
+    >
       <component v-if="config" :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
         <template
           #component-list-panel-header
@@ -71,16 +70,14 @@
           />
         </template>
       </component>
-    </component>
+    </div>
-  </component>
+  </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
-import { getConfig } from '@tmagic/design';
-
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
 import { SideBarData } from '@editor/type';
@@ -104,9 +101,6 @@ const props = withDefaults(
   },
 );
 
-const tabPaneComponent = getConfig('components')?.tabPane;
-const tabsComponent = getConfig('components')?.tabs;
-
 const activeTabName = ref(props.data?.status);
 
 const getItemConfig = (data: SideItem): SideComponent => {

packages/editor/src/theme/sidebar.scss

@@ -1,56 +1,22 @@
-.m-editor-sidebar.tmagic-design-tabs {
+.m-editor-sidebar {
+  display: flex;
   height: 100%;
 
-  .el-tabs__header,
+  .m-editor-sidebar-header {
-  .t-tabs__header {
     background: $--sidebar-heder-background-color;
-    border: 0;
     height: 100%;
-
-    .t-tabs__nav--card {
-      background-color: transparent;
-    }
-
-    .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(
-        .t-is-active
-      ):hover {
-      background-color: transparent;
-    }
-
-    &.is-left,
-    &.t-is-left {
     width: 40px;
-      margin-right: 0;
-    }
 
-    .el-tabs__nav-wrap {
+    .m-editor-sidebar-header-item {
-      margin: 0;
-    }
-
-    .el-tabs__nav {
-      border: 0;
-      border-radius: 0;
-    }
-
-    .tab-label {
-      margin-left: 2px;
-    }
-
-    .el-tabs__item.is-left,
-    .t-tabs__nav-item {
       line-height: 15px;
-      border: 0;
       height: auto;
       padding: 8px;
       color: rgb(255, 255, 255);
       box-sizing: border-box;
+      cursor: pointer;
 
-      &.is-left,
+      &.is-active {
-      &.t-is-left {
-        &.is-active,
-        &.t-is-active {
         background: $--sidebar-content-background-color;
-          border: 0;
 
         i {
           color: #353140;
@@ -60,15 +26,6 @@
           color: #353140;
         }
       }
-
-        &:first-child {
-          border-right: 0;
-        }
-      }
-    }
-
-    .t-tabs__nav-item {
-      padding: 7px;
     }
 
     i {
@@ -86,6 +43,12 @@
     }
   }
 
+  .m-editor-sidebar-content {
+    height: 100%;
+    width: calc(100% - 40px);
+    overflow: auto;
+  }
+
   .el-scrollbar {
     height: 100%;
   }
@@ -109,9 +72,4 @@
       background: rgba(0, 0, 0, 0.2);
     }
   }
-
-  .el-tabs__content,
-  .el-tab-pane {
-    height: 100%;
-  }
 }