From 2731609526d92093bfdccd660c96fbacc6f3d006 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 13 May 2022 17:40:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8D=87=E7=BA=A7element-plus2.2.0?=
 =?UTF-8?q?=E5=90=8E,sidebar=E5=8A=A8=E6=80=81=E5=8F=98=E5=8C=96=E5=90=8E,?=
 =?UTF-8?q?=E9=A1=BA=E5=BA=8F=E4=B8=8D=E5=AF=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/layouts/sidebar/Sidebar.vue    | 65 ++++--------------
 .../editor/src/layouts/sidebar/TabPane.vue    | 68 +++++++++++++++++++
 packages/editor/src/services/editor.ts        |  2 +-
 3 files changed, 82 insertions(+), 53 deletions(-)
 create mode 100644 packages/editor/src/layouts/sidebar/TabPane.vue

diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index 4872353f..bb727cf2 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -1,36 +1,26 @@
 <template>
-  <el-tabs v-if="data.type === 'tabs'" class="m-editor-sidebar" v-model="activeTabName" type="card" tab-position="left">
-    <el-tab-pane v-for="item in items" :key="item.text" :name="item.text">
-      <template #label>
-        <div :key="item.text">
-          <m-icon v-if="item.icon" :icon="item.icon"></m-icon>
-          <div v-if="item.text" class="magic-editor-tab-panel-title">{{ item.text }}</div>
-        </div>
-      </template>
-
-      <component :is="item.component" v-bind="item.props || {}" v-on="item.listeners || {}">
-        <template #layer-node-content="{ data, node }" v-if="item.slots?.layerNodeContent">
-          <component :is="item.slots.layerNodeContent" :data="data" :node="node" />
-        </template>
-      </component>
-    </el-tab-pane>
+  <el-tabs
+    v-if="data.type === 'tabs' && data.items.length"
+    class="m-editor-sidebar"
+    v-model="activeTabName"
+    type="card"
+    tab-position="left"
+  >
+    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item"></tab-pane>
   </el-tabs>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue';
-import { Coin, Files } from '@element-plus/icons';
+import { defineComponent, PropType, ref, watch } from 'vue';
 
-import MIcon from '@editor/components/Icon.vue';
-import { SideBarData, SideComponent } from '@editor/type';
+import { SideBarData } from '@editor/type';
 
-import ComponentListPanel from './ComponentListPanel.vue';
-import LayerPanel from './LayerPanel.vue';
+import TabPane from './TabPane.vue';
 
 export default defineComponent({
-  name: 'm-sidebar',
+  components: { TabPane },
 
-  components: { MIcon },
+  name: 'm-sidebar',
 
   props: {
     data: {
@@ -51,35 +41,6 @@ export default defineComponent({
 
     return {
       activeTabName,
-
-      items: computed<SideComponent[] | Record<string, any>[]>(() =>
-        props.data?.items.map((item) => {
-          if (typeof item !== 'string') {
-            return item;
-          }
-
-          switch (item) {
-            case 'component-list':
-              return {
-                type: 'component',
-                icon: Coin,
-                text: '组件',
-                component: ComponentListPanel,
-                slots: {},
-              };
-            case 'layer':
-              return {
-                type: 'component',
-                icon: Files,
-                text: '已选组件',
-                component: LayerPanel,
-                slots: {},
-              };
-            default:
-              return {};
-          }
-        }),
-      ),
     };
   },
 });
diff --git a/packages/editor/src/layouts/sidebar/TabPane.vue b/packages/editor/src/layouts/sidebar/TabPane.vue
new file mode 100644
index 00000000..43a950da
--- /dev/null
+++ b/packages/editor/src/layouts/sidebar/TabPane.vue
@@ -0,0 +1,68 @@
+<template>
+  <el-tab-pane v-if="config" :name="config.text">
+    <template #label>
+      <div :key="config.text">
+        <m-icon v-if="config.icon" :icon="config.icon"></m-icon>
+        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+      </div>
+    </template>
+
+    <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
+      <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">
+        <component :is="config.slots?.layerNodeContent" :data="data" :node="node" />
+      </template>
+    </component>
+  </el-tab-pane>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import { Coin, Files } from '@element-plus/icons';
+
+import MIcon from '@editor/components/Icon.vue';
+import { SideComponent, SideItem } from '@editor/type';
+
+import ComponentListPanel from './ComponentListPanel.vue';
+import LayerPanel from './LayerPanel.vue';
+
+export default defineComponent({
+  components: { MIcon },
+
+  props: {
+    data: {
+      type: Object as PropType<SideItem>,
+    },
+  },
+
+  setup(props) {
+    return {
+      config: computed<SideComponent | undefined>(() => {
+        if (typeof props.data !== 'string') {
+          return props.data;
+        }
+
+        switch (props.data) {
+          case 'component-list':
+            return {
+              type: 'component',
+              icon: Coin,
+              text: '组件',
+              component: ComponentListPanel,
+              slots: {},
+            };
+          case 'layer':
+            return {
+              type: 'component',
+              icon: Files,
+              text: '已选组件',
+              component: LayerPanel,
+              slots: {},
+            };
+          default:
+            return undefined;
+        }
+      }),
+    };
+  },
+});
+</script>
diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
index 97b1416c..bf19c8e8 100644
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@@ -291,7 +291,7 @@ class Editor extends BaseService {
     await this.select(newNode);
 
     this.addModifiedNodeId(newNode.id);
-    if (type !== NodeType.PAGE) {
+    if (!isPage) {
       this.pushHistoryState();
     }