fix: 升级element-plus2.2.0后,sidebar动态变化后,顺序不对

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 {};
-          }
-        }),
-      ),
     };
   },
 });

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>

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();
     }