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

做几方面优化

Browse Source
This commit is contained in:
hero920103 committed 2026-09-25 00:27:15 +08:00
1 parent eafa5e1cf4
commit 92403171d4
14 files changed
+2142 -258
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

backend/src/components/CommonAside.vue
+136 -12
View File
@@ -1,5 +1,8 @@
<template>
<el-aside :width="width" class="common-aside">
<el-aside
:width="width"
:class="['common-aside', { 'is-collapsed': isCollapse }]"
>
<!-- 加载状态 -->
<div v-if="loading" class="loading-spinner">
<i class="el-icon-loading" style="font-size: 24px; color: #fff"></i>
@@ -12,9 +15,12 @@
<el-button size="small" @click="fetchMenus">重新加载</el-button>
</div>
<!-- 菜单标题：放在 el-menu 之外，避免随菜单一起滚动消失 -->
<h3 v-if="showMenu">{{ isCollapse ? "管理" : asideTitle }}</h3>
<!-- 菜单主体 -->
<el-menu
v-else
v-if="showMenu"
:collapse="isCollapse"
:collapse-transition="false"
:background-color="asideBgColor"
@@ -22,13 +28,11 @@
:active-text-color="activeColor"
:active-background-color="activeBgColor"
class="el-menu-vertical-demo"
popper-class="common-aside-popper"
:unique-opened="true"
@select="handleMenuSelect"
:default-active="route.path"
>
<!-- 菜单标题 -->
<h3>{{ isCollapse ? "管理" : asideTitle }}</h3>
<!-- 无模块时显示提示 -->
<el-menu-item v-if="!currentModule" index="/home">
<i class="fa-solid fa-house"></i>
@@ -55,6 +59,7 @@
v-else
:index="item.path || item.id.toString()"
:unique-opened="true"
teleported
:class="{ 'is-locked': item.locked }"
>
<template #title>
@@ -81,6 +86,7 @@
v-else
:index="child.path || child.id.toString()"
:unique-opened="true"
teleported
:class="{ 'is-locked': child.locked }"
>
<template #title>
@@ -116,6 +122,7 @@
v-else
:index="grandchild.path || grandchild.id.toString()"
:unique-opened="true"
teleported
:class="{ 'is-locked': grandchild.locked }"
>
<template #title>
@@ -177,7 +184,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 && list.value.length === 0));
const asideBgColor = ref("#304156");
const asideTextColor = ref("#bfcbd9");
@@ -508,7 +517,8 @@ h3 {
// 菜单样式
:deep(.el-menu) {
border-right: none;
height: calc(100% - 80px);
// 标题已移到 el-menu 之外，这里只减掉标题区高度
height: calc(100% - 60px);
overflow-y: auto;
overflow-x: hidden;
padding: 16px 8px;
@@ -577,14 +587,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;
}
@@ -649,12 +659,54 @@ 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;
}
}
}
// ---------------------------------------------------------------- 折叠态修复
// 折叠（isCollapse）时 Element Plus 有一套自己的布局，下面逐条修正显示问题：
// 1) EP 会把 .el-menu 强制成 64px，而 el-aside 的宽度有 0.3s 动画，
// 两者不同步会导致收起瞬间菜单内容先跳变、右侧露出空白 → 改回 100% 跟随动画
// 2) 菜单项保留默认左右内边距 + 图标右外边距，在 64px 宽下图标会偏左 → 归零并居中
// 3) 激活项的 -3px 左移补偿在折叠态会把图标顶偏 → 折叠时取消
// 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;
}
}
// 折叠后标题区收紧，避免 64px 下文字贴边
.common-aside.is-collapsed h3 {
font-size: 15px;
padding: 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 响应式设计
// 注意：手机端（≤768px）侧栏的抽屉式布局由 Main.vue 统一控制（fixed 定位 + transform 动画），
// 此处不要再对 .common-aside 设置 width，避免覆盖父级布局逻辑。
@@ -664,3 +716,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>