From 7440706e2ea0e8a7f0d65067f29bc21bee48c067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Thu, 11 Jun 2026 15:31:23 +0800
Subject: [PATCH] =?UTF-8?q?style(sidebar):=20=E4=BC=98=E5=8C=96=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E8=8F=9C=E5=8D=95=E6=A0=B7=E5=BC=8F=E4=B8=8E=E6=A0=87?=
 =?UTF-8?q?=E8=AF=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  移除原有二级菜单叶子节点的小圆点样式
2.  新增子菜单标识图标组件，为有子级的菜单添加折叠箭头标识
3.  调整菜单标题渲染逻辑，统一标题样式处理
4.  修复菜单容器的定位样式问题
---
 klp-ui/src/assets/styles/sidebar.scss         | 26 ++++++++++---------
 klp-ui/src/layout/components/Sidebar/Item.vue | 25 +++++++++++++-----
 .../layout/components/Sidebar/SidebarItem.vue |  4 +--
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/klp-ui/src/assets/styles/sidebar.scss b/klp-ui/src/assets/styles/sidebar.scss
index 7572de21..b7d564e6 100644
--- a/klp-ui/src/assets/styles/sidebar.scss
+++ b/klp-ui/src/assets/styles/sidebar.scss
@@ -93,6 +93,7 @@
       // 明确默认状态样式（关键修复）
       background: transparent !important;
       box-shadow: none !important;
+      position: relative;
 
       overflow: hidden !important;
       text-overflow: ellipsis !important;
@@ -305,15 +306,16 @@
   margin: 0 4px;
 }
 
-// 二级菜单叶子页面小圆点
-.el-menu-item.is-page-item::before {
-  content: '';
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--current-color, #409EFF);
-  margin-right: 8px;
-  flex-shrink: 0;
-  vertical-align: middle;
-}
\ No newline at end of file
+// 子菜单标识图标
+.submenu-indicator {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.5;
+  font-size: 12px;
+}
+
+// 叶子页面无标识
\ No newline at end of file
diff --git a/klp-ui/src/layout/components/Sidebar/Item.vue b/klp-ui/src/layout/components/Sidebar/Item.vue
index be3285df..acf39df6 100644
--- a/klp-ui/src/layout/components/Sidebar/Item.vue
+++ b/klp-ui/src/layout/components/Sidebar/Item.vue
@@ -10,10 +10,14 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    hasChildren: {
+      type: Boolean,
+      default: false
     }
   },
   render(h, context) {
-    const { icon, title } = context.props
+    const { icon, title, hasChildren } = context.props
     const vnodes = []
 
     if (icon) {
@@ -21,12 +25,21 @@ export default {
     }
 
     if (title) {
-      if (title.length > 5) {
-        vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
-      } else {
-        vnodes.push(<span slot='title'>{(title)}</span>)
-      }
+      vnodes.push(
+        <span slot='title' class="menu-title">
+          {title}
+        </span>
+      )
     }
+
+    if (hasChildren) {
+      vnodes.push(
+        <span class="submenu-indicator">
+          <svg-icon icon-class="nested" />
+        </span>
+      )
+    }
+
     return vnodes
   }
 }
diff --git a/klp-ui/src/layout/components/Sidebar/SidebarItem.vue b/klp-ui/src/layout/components/Sidebar/SidebarItem.vue
index 44e7eca1..10813cd0 100644
--- a/klp-ui/src/layout/components/Sidebar/SidebarItem.vue
+++ b/klp-ui/src/layout/components/Sidebar/SidebarItem.vue
@@ -4,13 +4,13 @@
       <template v-if="hasVisibleChild">
         <app-link :to="subMenuRoute">
           <el-menu-item :index="basePath" :class="{'submenu-title-noDropdown':!isNest}">
-            <item :icon="item.meta && item.meta.icon" :title="item.meta && item.meta.title" />
+            <item :icon="item.meta && item.meta.icon" :title="item.meta && item.meta.title" :has-children="true" />
           </el-menu-item>
         </app-link>
       </template>
       <template v-else>
         <app-link :to="selfRoute">
-          <el-menu-item :index="basePath" :class="{'submenu-title-noDropdown':!isNest, 'is-page-item': true}">
+          <el-menu-item :index="basePath" :class="{'submenu-title-noDropdown':!isNest}">
             <item :icon="item.meta && item.meta.icon" :title="item.meta && item.meta.title" />
           </el-menu-item>
         </app-link>