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({(title)}) - } else { - vnodes.push({(title)}) - } + vnodes.push( + + {title} + + ) } + + if (hasChildren) { + vnodes.push( + + + + ) + } + 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 @@