From eacb1e6475cb737e6eb538cb7676ba615755f9fa Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 31 Aug 2023 16:36:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor(editor):=20sidebar=E4=B8=8D=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8tmagic-design=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/layouts/sidebar/Sidebar.vue    | 46 +++++------
 packages/editor/src/theme/sidebar.scss        | 78 +++++--------------
 2 files changed, 38 insertions(+), 86 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index a0d9a759..50a79ee9 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -1,24 +1,23 @@
 <template>
-  <component
-    v-if="data.type === 'tabs' && data.items.length"
-    v-model="activeTabName"
-    class="m-editor-sidebar tmagic-design-tabs"
-    v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
-    :is="tabsComponent?.component || 'el-tabs'"
-  >
-    <component
+  <div class="m-editor-sidebar" v-if="data.type === 'tabs' && data.items.length">
+    <div class="m-editor-sidebar-header">
+      <div
+        class="m-editor-sidebar-header-item"
+        v-for="(config, index) in sideBarItems"
+        :key="config.$key ?? index"
+        :class="{ 'is-active': activeTabName === config.text }"
+        @click="activeTabName = config.text || `${index}`"
+      >
+        <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
+        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+      </div>
+    </div>
+    <div
+      class="m-editor-sidebar-content"
       v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
-      :is="tabPaneComponent?.component || 'el-tab-pane'"
-      :key="config.$key || index"
+      :key="config.$key ?? index"
+      v-show="activeTabName === config.text"
     >
-      <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>
-
       <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>
-  </component>
+    </div>
+  </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 => {
diff --git a/packages/editor/src/theme/sidebar.scss b/packages/editor/src/theme/sidebar.scss
index 57ba4df7..08131823 100644
--- a/packages/editor/src/theme/sidebar.scss
+++ b/packages/editor/src/theme/sidebar.scss
@@ -1,76 +1,33 @@
-.m-editor-sidebar.tmagic-design-tabs {
+.m-editor-sidebar {
+  display: flex;
   height: 100%;
 
-  .el-tabs__header,
-  .t-tabs__header {
+  .m-editor-sidebar-header {
     background: $--sidebar-heder-background-color;
-    border: 0;
     height: 100%;
+    width: 40px;
 
-    .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 {
-      margin: 0;
-    }
-
-    .el-tabs__nav {
-      border: 0;
-      border-radius: 0;
-    }
-
-    .tab-label {
-      margin-left: 2px;
-    }
-
-    .el-tabs__item.is-left,
-    .t-tabs__nav-item {
+    .m-editor-sidebar-header-item {
       line-height: 15px;
-      border: 0;
       height: auto;
       padding: 8px;
       color: rgb(255, 255, 255);
       box-sizing: border-box;
+      cursor: pointer;
 
-      &.is-left,
-      &.t-is-left {
-        &.is-active,
-        &.t-is-active {
-          background: $--sidebar-content-background-color;
-          border: 0;
+      &.is-active {
+        background: $--sidebar-content-background-color;
 
-          i {
-            color: #353140;
-          }
-
-          .magic-editor-tab-panel-title {
-            color: #353140;
-          }
+        i {
+          color: #353140;
         }
 
-        &:first-child {
-          border-right: 0;
+        .magic-editor-tab-panel-title {
+          color: #353140;
         }
       }
     }
 
-    .t-tabs__nav-item {
-      padding: 7px;
-    }
-
     i {
       font-size: 25px;
       color: rgba(255, 255, 255, 0.6);
@@ -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%;
-  }
 }