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 @@