diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss index 363092a..3e432c7 100644 --- a/src/assets/styles/element-ui.scss +++ b/src/assets/styles/element-ui.scss @@ -89,4 +89,16 @@ > .el-submenu__title .el-submenu__icon-arrow { display: none; -} \ No newline at end of file +} +// 隐藏 el-scrollbar 内部的原生滚动条(全局样式会把 6px 原生滚动条染成灰色, +// overflow: scroll 的 .el-scrollbar__wrap 因此常驻显示一条滚动槽),滚动功能不受影响。 +.el-scrollbar__wrap { + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + } +} diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index b746118..ca5a4aa 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -78,6 +78,24 @@ transition: filter 0.2s ease; } + .menu-item-inner { + display: inline-flex; + align-items: center; + min-width: 0; + } + + .menu-item-inner.is-root { + width: 100%; + justify-content: center; + gap: 10px; + } + + .menu-item-inner.is-root .svg-icon, + .menu-item-inner.is-root .menu-icon-img, + .menu-item-inner.is-root .menu-icon-placeholder { + margin-right: 0; + } + .el-menu-item.is-active .menu-icon-img, .el-submenu.is-active > .el-submenu__title .menu-icon-img { filter: none; @@ -111,6 +129,18 @@ white-space: nowrap !important; } + // Center the first-level icon/text group inside the narrower sidebar. + .el-menu > div > a > .submenu-title-noDropdown, + .el-menu > div > .el-submenu > .el-submenu__title { + display: flex !important; + align-items: center; + justify-content: center; + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + box-sizing: border-box; + } + // menu hover .submenu-title-noDropdown, .el-submenu__title { @@ -142,6 +172,16 @@ } } + .sidebarWide.openSidebar { + .main-container { + margin-left: $base-sidebar-wide-width; + } + + .sidebar-container { + width: $base-sidebar-wide-width !important; + } + } + .hideSidebar { .sidebar-container { width: 54px !important; diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index ca4ec8d..4f61977 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -40,7 +40,8 @@ $base-sub-menu-background:#000c17; $base-sub-menu-hover:#001528; */ -$base-sidebar-width: 200px; +$base-sidebar-width: 160px; +$base-sidebar-wide-width: 200px; // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index 187368c..2746d6e 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -57,7 +57,7 @@ export default { } .app-main.hasTagsView { - /* 126 = navbar + subbar + module title = 50 + 36 + 40 */ + /* 130 = navbar + subbar + tags view = 50 + 40 + 40 */ height: calc(100vh - 130px); min-height: 0; } diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index 30e71f6..f41760b 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -79,7 +79,13 @@ export default { vnodes.push({(title)}) } } - return vnodes + return h( + "span", + { + class: ["menu-item-inner", { "is-nest": isNest, "is-root": !isNest }], + }, + vnodes + ) } } diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index e5e8a10..f037fd0 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -139,6 +139,26 @@ export default { isCollapse() { return !this.sidebar.opened; }, + hasNestedMenus() { + return this.displayedRoutes.some(route => this.hasVisibleNestedMenu(route)); + }, + }, + watch: { + hasNestedMenus: { + immediate: true, + handler(hasNestedMenus) { + this.$emit("menu-depth-change", hasNestedMenus); + }, + }, + }, + methods: { + hasVisibleNestedMenu(route) { + const visibleChildren = (route.children || []).filter(child => !child.hidden); + if (route.alwaysShow || visibleChildren.length > 1) { + return true; + } + return visibleChildren.some(child => this.hasVisibleNestedMenu(child)); + }, } }; diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue index bb753a1..f935b33 100644 --- a/src/layout/components/TagsView/ScrollPane.vue +++ b/src/layout/components/TagsView/ScrollPane.vue @@ -83,8 +83,9 @@ export default { overflow: hidden; width: 100%; ::v-deep { + // 超出时不显示横向滚动条,仍可通过鼠标滚轮横向滚动查看更多页签。 .el-scrollbar__bar { - bottom: 0px; + display: none; } .el-scrollbar__wrap { height: 49px; diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 591aa2d..18d0ea4 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -1,6 +1,5 @@