style(sidebar): 优化侧边菜单样式与标识逻辑

1.  移除原有二级菜单叶子节点的小圆点样式
2.  新增子菜单标识图标组件，为有子级的菜单添加折叠箭头标识
3.  调整菜单标题渲染逻辑，统一标题样式处理
4.  修复菜单容器的定位样式问题

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 {
+.submenu-indicator {
-  content: '';
+  position: absolute;
-  display: inline-block;
+  right: 10px;
-  width: 6px;
+  top: 50%;
-  height: 6px;
+  transform: translateY(-50%);
-  border-radius: 50%;
+  display: inline-flex;
-  background: var(--current-color, #409EFF);
+  align-items: center;
-  margin-right: 8px;
+  opacity: 0.5;
-  flex-shrink: 0;
+  font-size: 12px;
-  vertical-align: middle;
+}
-}
+
+// 叶子页面无标识

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(
-        vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
+        <span slot='title' class="menu-title">
-      } else {
+          {title}
-        vnodes.push(<span slot='title'>{(title)}</span>)
+        </span>
-      }
+      )
     }
+
+    if (hasChildren) {
+      vnodes.push(
+        <span class="submenu-indicator">
+          <svg-icon icon-class="nested" />
+        </span>
+      )
+    }
+
     return vnodes
   }
 }

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>