From 7a47315bc1bae70cc76778587aeb22511a361a06 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 22 Nov 2024 17:45:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E9=80=89=E4=B8=AD=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=90=8E=E9=A1=B5=E9=9D=A2=E5=88=97=E8=A1=A8=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E6=BB=9A=E5=8A=A8=E5=88=B0=E9=80=89=E4=B8=AD=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/layouts/page-bar/PageBar.vue   | 49 +++++++++++++++++--
 .../page-bar/PageBarScrollContainer.vue       | 40 ++++++++++-----
 .../editor/src/layouts/page-bar/PageList.vue  |  4 +-
 3 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/packages/editor/src/layouts/page-bar/PageBar.vue b/packages/editor/src/layouts/page-bar/PageBar.vue
index a1e306a4..26976389 100644
--- a/packages/editor/src/layouts/page-bar/PageBar.vue
+++ b/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>
diff --git a/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue b/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
index 0e442e17..97999edd 100644
--- a/packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue
+++ b/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>
diff --git a/packages/editor/src/layouts/page-bar/PageList.vue b/packages/editor/src/layouts/page-bar/PageList.vue
index 50cc53b3..2a3c2fa7 100644
--- a/packages/editor/src/layouts/page-bar/PageList.vue
+++ b/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>