From 5350c9050ceb40a222e5535805bf6703083b20e6 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 31 Mar 2022 15:32:25 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E4=BF=AE=E5=A4=8Dpagebar?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E8=B6=85=E9=95=BF=E6=8D=A2=E8=A1=8C=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/layouts/workspace/PageBar.vue | 10 +++++++---
 packages/editor/src/theme/page-bar.scss           |  8 ++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/layouts/workspace/PageBar.vue b/packages/editor/src/layouts/workspace/PageBar.vue
index d34265f7..559a40aa 100644
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ b/packages/editor/src/layouts/workspace/PageBar.vue
@@ -11,9 +11,13 @@
         :class="{ active: page?.id === item.id }"
         @click="switchPage(item)"
       >
-        <slot name="page-bar-title" :page="item">
-          <span>{{ item.name }}</span>
-        </slot>
+        <div class="m-editor-page-bar-title">
+          <slot name="page-bar-title" :page="item">
+            <el-tooltip effect="dark" placement="top-start" :content="item.name">
+              <span>{{ item.name }}</span>
+            </el-tooltip>
+          </slot>
+        </div>
 
         <el-popover placement="top" :width="160" trigger="hover">
           <div>
diff --git a/packages/editor/src/theme/page-bar.scss b/packages/editor/src/theme/page-bar.scss
index d44f0514..886498e2 100644
--- a/packages/editor/src/theme/page-bar.scss
+++ b/packages/editor/src/theme/page-bar.scss
@@ -10,6 +10,7 @@
   color: $--font-color;
   border-top: 1px solid $--border-color;
   z-index: 2;
+  overflow: hidden;
 
   .m-editor-page-bar-item {
     padding: 0 10px;
@@ -27,5 +28,12 @@
         cursor: pointer;
       }
     }
+
+    .m-editor-page-bar-title {
+      max-width: 150px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
   }
 }