From 3e024d21edca7dc3bcc00b8aae23b231ee8e1a54 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 6 Sep 2022 16:26:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=94=AF=E6=8C=81=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6pagebar=E4=B8=AD=E6=96=B0=E5=A2=9E=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=98=BE=E9=9A=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/layouts/workspace/PageBar.vue     |  2 +-
 .../layouts/workspace/PageBarScrollContainer.vue | 16 +++++++++++++---
 packages/editor/src/services/ui.ts               |  1 +
 packages/editor/src/type.ts                      |  2 ++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/layouts/workspace/PageBar.vue b/packages/editor/src/layouts/workspace/PageBar.vue
index d1b7600c..2a4175a5 100644
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ b/packages/editor/src/layouts/workspace/PageBar.vue
@@ -38,7 +38,7 @@
         </div>
         <template #reference>
           <el-icon class="m-editor-page-bar-menu-icon">
-            <caret-bottom></caret-bottom>
+            <CaretBottom></CaretBottom>
           </el-icon>
         </template>
       </el-popover>
diff --git a/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue b/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
index 67451f78..78a8b404 100644
--- a/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
+++ b/packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="m-editor-page-bar" ref="pageBar">
-    <div id="m-editor-page-bar-add-icon" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="addPage">
+    <div
+      v-if="showAddPageButton"
+      id="m-editor-page-bar-add-icon"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+      @click="addPage"
+    >
       <el-icon><plus></plus></el-icon>
     </div>
+    <div v-else style="width: 21px"></div>
     <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
       <el-icon><arrow-left-bold></arrow-left-bold></el-icon>
     </div>
@@ -26,13 +32,17 @@ import { generatePageNameByApp } from '../../utils/editor';
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
+const uiService = services?.uiService;
 
 const pageBar = ref<HTMLDivElement>();
 const itemsContainer = ref<HTMLDivElement>();
 const pageBarWidth = ref(0);
 const canScroll = ref(false);
 
-const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
+const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
+
+// 减去新增、左移、右移三个按钮的宽度
+const itemsContainerWidth = computed(() => pageBarWidth.value - 35 * 2 - (showAddPageButton.value ? 35 : 21));
 
 let translateLeft = 0;
 const resizeObserver = new ResizeObserver((entries) => {
@@ -46,7 +56,7 @@ const resizeObserver = new ResizeObserver((entries) => {
 
 const setCanScroll = () => {
   if (itemsContainer.value) {
-    canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+    canScroll.value = itemsContainer.value.scrollWidth > itemsContainerWidth.value;
   }
 };
 
diff --git a/packages/editor/src/services/ui.ts b/packages/editor/src/services/ui.ts
index 63c1be99..14fdfdc2 100644
--- a/packages/editor/src/services/ui.ts
+++ b/packages/editor/src/services/ui.ts
@@ -54,6 +54,7 @@ const state = reactive<UiState>({
   showGuides: true,
   showRule: true,
   propsPanelSize: 'small',
+  showAddPageButton: true,
 });
 
 class Ui extends BaseService {
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index c944686e..86308ed2 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -124,6 +124,8 @@ export interface UiState {
   showRule: boolean;
   /** 用于控制该属性配置表单内组件的尺寸 */
   propsPanelSize: 'large' | 'default' | 'small';
+  /** 是否显示新增页面按钮 */
+  showAddPageButton: boolean;
 }
 
 export interface EditorNodeInfo {