yunzerwebsite/yunzerwebsiteallinone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

做几方面优化

Browse Source
This commit is contained in:
hero920103
2026-09-25 00:27:15 +08:00
parent eafa5e1cf4
commit 92403171d4
14 changed files with 2142 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform/src/components/CommonAside.vue
+143 -13
View File
@@ -1,5 +1,11 @@
<template>
<el-aside :width="width" :class="['common-aside', { 'mobile-open': isMobile && !isCollapse }]">
<el-aside
:width="width"
:class="[
'common-aside',
{ 'mobile-open': isMobile && !isCollapse, 'is-collapsed': isCollapse },
]"
>
<!-- 加载状态 -->
<div v-if="loading" class="loading-spinner">
<i class="el-icon-loading" style="font-size: 24px; color: #fff"></i>
@@ -12,8 +18,15 @@
<el-button size="small" @click="fetchMenus">重新加载</el-button>
</div>
<!-- 菜单标题：放在 el-menu 之外，避免随菜单一起滚动消失 -->
<h3 v-if="showMenu">
{{ isCollapse ? "管理" : asideTitle }}
<span class="mobile-close-btn" @click="closeMobile">✕</span>
</h3>
<!-- 菜单主体 -->
<el-menu
v-if="showMenu"
:collapse="isCollapse"
:collapse-transition="false"
:background-color="asideBgColor"
@@ -21,17 +34,12 @@
:active-text-color="activeColor"
:active-background-color="activeBgColor"
class="el-menu-vertical-demo"
popper-class="common-aside-popper"
:unique-opened="true"
:default-openeds="defaultOpeneds"
@select="handleMenuSelect"
:default-active="route.path"
>
<!-- 菜单标题 -->
<h3>
{{ isCollapse ? "管理" : asideTitle }}
<span class="mobile-close-btn" @click="closeMobile">✕</span>
</h3>
<!-- 无模块时显示提示（在首页 /home 时不显示，避免重复） -->
<el-menu-item v-if="!currentModule && route.path !== '/home'" index="/home">
<i class="fa-solid fa-house"></i>
@@ -56,6 +64,7 @@
v-else
:index="item.path || item.id.toString()"
:unique-opened="true"
teleported
>
<template #title>
<i v-if="item.icon" :class="item.icon" class="menu-icon"></i>
@@ -78,6 +87,7 @@
v-else
:index="child.path || child.id.toString()"
:unique-opened="true"
teleported
>
<template #title>
<i v-if="child.icon" :class="child.icon" class="menu-icon"></i>
@@ -109,6 +119,7 @@
v-else
:index="grandchild.path || grandchild.id.toString()"
:unique-opened="true"
teleported
>
<template #title>
<i
@@ -180,7 +191,9 @@ const errorMsg = computed(() => menuStore.error || "加载菜单失败");
const store = useAllDataStore();
const isCollapse = computed(() => store.state.isCollapse);
const width = computed(() => (store.state.isCollapse ? "64px" : "200px"));
const width = computed(() => (store.state.isCollapse ? "64px" : "220px"));
// 菜单与标题的显示条件（与加载/错误分支互斥，避免 v-else 绑定错元素）
const showMenu = computed(() => !loading.value && !hasError.value);
const asideBgColor = ref("#304156");
const asideTextColor = ref("#bfcbd9");
@@ -598,14 +611,14 @@ h3 {
}
}
// 悬浮样式
// 悬浮样式：一律用蓝色系，避免 EP 默认的深灰/黑色 hover
.el-menu-item:hover:not(.is-active),
.el-sub-menu__title:hover {
html:not(.dark) & {
background-color: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(30, 86, 210, 0.5) !important;
}
html.dark & {
background-color: rgba(60, 60, 60, 0.8) !important;
background-color: rgba(57, 115, 255, 0.45) !important;
}
color: #ffffff !important;
}
@@ -662,8 +675,8 @@ h3 {
.el-menu-item:hover:not(.is-active),
.el-sub-menu__title:hover {
background: rgba(255, 255, 255, 0.08) !important;
color: var(--el-color-primary-light-3) !important;
background: rgba(57, 115, 255, 0.45) !important;
color: #fff !important;
}
.el-sub-menu .el-menu-item.is-active {
@@ -697,6 +710,51 @@ h3 {
color: #fff;
}
// ---------------------------------------------------------------- 折叠态修复
// 1) 底部折叠按钮在折叠态会隐藏，菜单高度却仍按按钮占位减掉 128px，
// 导致收起后底部出现大片空白 → 折叠时只减掉标题区高度
.common-aside.is-collapsed :deep(.el-menu) {
height: calc(100% - 60px);
}
// 2) EP 会把 .el-menu 强制成 64px，与 el-aside 的宽度动画不同步，
// 收起瞬间内容先跳变 → 改回 100% 跟随动画
// 3) 菜单项默认左右内边距 + 图标右外边距在 64px 下使图标偏左 → 归零并居中
// 4) 64px 宽栏里的 4px 滚动条很突兀 → 折叠时隐藏（仍可滚动）
:deep(.el-menu.el-menu--collapse) {
width: 100% !important;
padding-left: 0;
padding-right: 0;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.el-menu-item,
.el-sub-menu > .el-sub-menu__title {
padding-left: 0 !important;
padding-right: 0 !important;
justify-content: center;
}
.menu-icon {
margin-right: 0;
}
.el-menu-item.is-active {
margin-left: 0;
}
}
.common-aside.is-collapsed h3 {
font-size: 15px;
padding: 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 响应式设计
@media (max-width: 768px) {
.common-aside {
@@ -742,3 +800,75 @@ h3 {
}
}
</style>
<style lang="less">
// 折叠后 hover 弹出的子菜单浮层被 teleport 到 body，scoped 样式命中不了，
// 只能用 popper-class + 全局样式配色，否则会是 Element Plus 默认的白底浮层
.common-aside-popper.el-popper {
background: #3973ff !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
box-shadow: 0 8px 24px rgba(6, 45, 163, 0.28);
.el-popper__arrow::before {
background: #3973ff !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
.el-menu {
background: transparent !important;
padding: 4px;
border-right: none;
}
// 菜单项与"还有下级"的父级标题统一配色，避免 EP 默认的深灰/黑色 hover
.el-menu-item {
color: rgba(255, 255, 255, 0.88);
border-radius: 8px;
font-size: 13px;
&:hover {
background: rgba(30, 86, 210, 0.55) !important;
color: #fff !important;
}
&.is-active {
background: rgba(30, 86, 210, 0.7) !important;
color: #fff !important;
}
}
.el-sub-menu__title {
color: rgba(255, 255, 255, 0.88);
border-radius: 8px;
background: transparent !important;
&:hover {
background: rgba(30, 86, 210, 0.55) !important;
color: #fff !important;
}
}
// 折叠态下 EP 用 ArrowRight 表示"还有下级"，但展开时会内联 rotateZ(180deg) 把箭头翻成向左；
// 浮层里的子菜单应当始终指向右（表示继续向右展开），故强制不旋转（内联样式需 !important 覆盖）
.el-sub-menu__icon-arrow {
transform: rotateZ(0deg) !important;
}
// 浮层宽度收敛，降低深层级因空间不足被 popper 翻转到左侧的概率
.el-menu {
min-width: 180px;
}
}
html.dark {
.common-aside-popper.el-popper {
background: #2d2d2d !important;
border-color: rgba(255, 255, 255, 0.1) !important;
.el-popper__arrow::before {
background: #2d2d2d !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
}
}
</style>