feat(editor): 支持控制pagebar中新增按钮显隐

Tencent · Sep 6, 2022 · 3e024d2 · 3e024d2
1 parent bdd544e
commit 3e024d2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -124,6 +124,8 @@ export interface UiState {
   showRule: boolean;
   /** 用于控制该属性配置表单内组件的尺寸 */
   propsPanelSize: 'large' | 'default' | 'small';
+  /** 是否显示新增页面按钮 */
+  showAddPageButton: boolean;
 }
 
 export interface EditorNodeInfo {