feat(editor): 选中页面后页面列表自动滚动到选中项

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

@@ -1,6 +1,10 @@
 <template>
   <div class="m-editor-page-bar-tabs">
-    <PageBarScrollContainer :page-bar-sort-options="pageBarSortOptions" :length="list.length">
+    <PageBarScrollContainer
+      ref="pageBarScrollContainer"
+      :page-bar-sort-options="pageBarSortOptions"
+      :length="list.length"
+    >
       <template #prepend>
         <slot name="page-bar-add-button"><AddButton></AddButton></slot>
 
@@ -13,8 +17,9 @@
       <div
         v-for="item in list"
         class="m-editor-page-bar-item"
+        ref="pageBarItems"
         :key="item.id"
-        :page-id="item.id"
+        :data-page-id="item.id"
         :class="{ active: page?.id === item.id }"
         @click="switchPage(item.id)"
       >
@@ -63,7 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { type Id, type MPage, type MPageFragment, NodeType } from '@tmagic/core';
@@ -138,4 +143,42 @@ const copy = (node: MPage | MPageFragment) => {
 const remove = (node: MPage | MPageFragment) => {
   editorService?.remove(node);
 };
+
+const pageBarScrollContainer = ref<InstanceType<typeof PageBarScrollContainer>>();
+const pageBarItems = ref<HTMLDivElement[]>();
+watch(page, (page) => {
+  if (
+    !page ||
+    !pageBarScrollContainer.value?.itemsContainerWidth ||
+    !pageBarItems.value ||
+    pageBarItems.value.length < 2
+  ) {
+    return;
+  }
+
+  const firstItem = pageBarItems.value[0];
+  const lastItem = pageBarItems.value[pageBarItems.value.length - 1];
+
+  if (page.id === firstItem.dataset.pageId) {
+    pageBarScrollContainer.value.scroll('start');
+  } else if (page.id === lastItem.dataset.pageId) {
+    pageBarScrollContainer.value.scroll('end');
+  } else {
+    const pageItem = pageBarItems.value.find((item) => item.dataset.pageId === page.id);
+    if (!pageItem) {
+      return;
+    }
+
+    const pageItemRect = pageItem.getBoundingClientRect();
+    const offsetLeft = pageItemRect.left - firstItem.getBoundingClientRect().left;
+    const { itemsContainerWidth } = pageBarScrollContainer.value;
+
+    const left = itemsContainerWidth - offsetLeft - pageItemRect.width;
+
+    const translateLeft = pageBarScrollContainer.value.getTranslateLeft();
+    if (offsetLeft + translateLeft < 0 || offsetLeft + pageItemRect.width > itemsContainerWidth - translateLeft) {
+      pageBarScrollContainer.value.scrollTo(left);
+    }
+  }
+});
 </script>

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

@@ -92,22 +92,29 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
   const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
 
   if (type === 'left') {
-    translateLeft += 200;
-
-    if (translateLeft > 0) {
-      translateLeft = 0;
-    }
+    scrollTo(translateLeft + 200);
   } else if (type === 'right') {
-    translateLeft -= 200;
-
-    if (-translateLeft > maxScrollLeft) {
-      translateLeft = -maxScrollLeft;
-    }
+    scrollTo(translateLeft - 200);
   } else if (type === 'start') {
-    translateLeft = 0;
+    scrollTo(0);
   } else if (type === 'end') {
-    translateLeft = -maxScrollLeft;
+    scrollTo(-maxScrollLeft);
   }
+};
+
+const scrollTo = (value: number) => {
+  if (!itemsContainer.value || !canScroll.value) return;
+  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+
+  if (value >= 0) {
+    value = 0;
+  }
+
+  if (-value > maxScrollLeft) {
+    value = -maxScrollLeft;
+  }
+
+  translateLeft = value;
 
   itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
@@ -159,4 +166,13 @@ watch(
     immediate: true,
   },
 );
+
+defineExpose({
+  itemsContainerWidth,
+  scroll,
+  scrollTo,
+  getTranslateLeft() {
+    return translateLeft;
+  },
+});
 </script>

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

@@ -57,7 +57,7 @@ const editorService = services?.editorService;
 
 const showPageListButton = computed(() => uiService?.get('showPageListButton'));
 const page = computed(() => editorService?.get('page'));
-const switchPage = (id: Id) => {
-  editorService?.select(id);
+const switchPage = async (id: Id) => {
+  await editorService?.select(id);
 };
 </script>