chore(editor): 优化页面tab体验

packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="m-editor-page-bar" ref="pageBar">
     <slot name="prepend"></slot>
-
+    <div v-if="length" class="m-editor-page-bar-items" ref="itemsContainer">
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
-      <Icon :icon="ArrowLeftBold"></Icon>
-    </div>
-
-    <div v-if="length" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
       <slot></slot>
     </div>
 
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
+    <div
+      v-if="canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-left-icon"
+      @click="scroll('left')"
+    >
+      <Icon :icon="ArrowLeftBold"></Icon>
+    </div>
+
+    <div
+      v-if="canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-right-icon"
+      @click="scroll('right')"
+    >
       <Icon :icon="ArrowRightBold"></Icon>
     </div>
   </div>
@@ -80,18 +87,18 @@ onBeforeUnmount(() => {
 let translateLeft = 0;
 
 const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
-  if (!itemsContainer.value) return;
+  if (!itemsContainer.value || !canScroll.value) return;
 
   const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
 
   if (type === 'left') {
-    translateLeft += 100;
+    translateLeft += 200;
 
     if (translateLeft > 0) {
       translateLeft = 0;
     }
   } else if (type === 'right') {
-    translateLeft -= 100;
+    translateLeft -= 200;
 
     if (-translateLeft > maxScrollLeft) {
       translateLeft = -maxScrollLeft;
@@ -110,11 +117,13 @@ watch(
   (length = 0, preLength = 0) => {
     setTimeout(() => {
       setCanScroll();
-      if (length < preLength) {
+      nextTick(() => {
-        scroll('start');
+        if (length < preLength || preLength === 0) {
-      } else {
+          scroll('start');
-        scroll('end');
+        } else {
-      }
+          scroll('end');
+        }
+      });
       if (length > 1) {
         const el = document.querySelector('.m-editor-page-bar-items') as HTMLElement;
         let beforeDragList: Id[] = [];

packages/editor/src/layouts/page-bar/PageList.vue

@@ -18,6 +18,7 @@
             :data="{
               type: 'button',
               text: item.devconfig?.tabName || item.name || item.id,
+              className: item.id === page?.id ? 'active' : '',
               handler: () => switchPage(item.id),
             }"
             :key="index"
@@ -55,6 +56,7 @@ const uiService = services?.uiService;
 const editorService = services?.editorService;
 
 const showPageListButton = computed(() => uiService?.get('showPageListButton'));
+const page = computed(() => editorService?.get('page'));
 const switchPage = (id: Id) => {
   editorService?.select(id);
 };

packages/editor/src/theme/page-bar.scss

@@ -6,13 +6,6 @@
   user-select: none;
 }
 
-.m-editor-page-bar-item-icon {
-  .icon-active {
-    font-weight: bold;
-    color: $--theme-color;
-  }
-}
-
 .m-editor-page-list-item {
   display: flex;
   width: 100%;
@@ -64,6 +57,11 @@
     &-icon {
       position: relative;
       z-index: 1;
+
+      .icon-active {
+        font-weight: bold;
+        color: $--theme-color;
+      }
     }
 
     &-title {
@@ -72,6 +70,18 @@
       white-space: nowrap;
       overflow: hidden;
     }
+
+    &-left-icon,
+    &-right-icon {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+    }
+
+    &-left-icon {
+      right: 34px;
+    }
   }
 }
 
@@ -85,14 +95,19 @@
     transition: all 0.2s ease 0s;
     padding: 5px 14px;
 
-    .el-button--text,
+    .tmagic-design-button {
-    i {
       color: $--font-color;
     }
 
     &:hover {
       background-color: $--hover-color;
     }
+
+    &.active {
+      .tmagic-design-button {
+        color: $--theme-color;
+      }
+    }
   }
 }