From 8d69da77023be82e094e5411a27ee6c19af18eee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Wed, 8 Jan 2025 11:31:36 +0800
Subject: [PATCH] feat: Break long menu items into multiple lines (#7665)

---
 frontend/src/layout/components/Sidebar/index.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index f0d9ddb54..62cef3da0 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -18,6 +18,7 @@
                 :collapse-transition="false"
                 :unique-opened="true"
                 @select="handleMenuClick"
+                class="custom-menu"
             >
                 <SubItem :menuList="routerMenus" />
                 <el-menu-item :index="''">
@@ -168,7 +169,7 @@ const search = async () => {
             rstMenuList.push(menuItem);
         } else {
             menuItem.children.forEach((child: any) => {
-                if (child.hidden == undefined || child.hidden == false) {
+                if (!child.hidden) {
                     menuChildren.push(child);
                 }
             });
@@ -193,6 +194,13 @@ onMounted(() => {
 <style lang="scss">
 @import './index.scss';
 
+.custom-menu .el-menu-item {
+    white-space: normal !important;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    line-height: normal;
+}
+
 .sidebar-container {
     position: relative;
     display: flex;