tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: 布局问题修复和登陆样式优化

Browse Source
This commit is contained in:
Ray.Hao
2025-05-27 16:15:30 +08:00
parent 264961ce08
commit bdfec03e9b
6 changed files with 115 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/layouts/components/Menu/BasicMenu.vue
View File

@@ -37,7 +37,6 @@
</template>
<script lang="ts" setup>
import { ref, computed, watch, PropType } from "vue";
import { useRoute } from "vue-router";
import path from "path-browserify";
import type { MenuInstance } from "element-plus";

8
src/layouts/components/Menu/MixTopMenu.vue
View File

@@ -21,13 +21,17 @@
@select="handleMenuSelect"
>
<el-menu-item v-for="menuItem in processedTopMenus" :key="menuItem.path" :index="menuItem.path">
<MenuItemTitle v-if="menuItem.meta" :icon="menuItem.meta.icon" :title="menuItem.meta.title" />
<MenuItemContent
v-if="menuItem.meta"
:icon="menuItem.meta.icon"
:title="menuItem.meta.title"
/>
</el-menu-item>
</el-menu>
</template>
<script lang="ts" setup>
import MenuItemTitle from "./components/MenuItemTitle.vue";
import MenuItemContent from "./components/MenuItemContent.vue";
defineOptions({
name: "MixTopMenu",

7
src/layouts/components/Menu/components/MenuItem.vue
View File

@@ -22,7 +22,8 @@
:index="resolvePath(onlyOneChild.path)"
:class="{ 'submenu-title-noDropdown': !isNest }"
>
<MenuItemTitle
<MenuItemContent
v-if="onlyOneChild.meta"
:icon="onlyOneChild.meta.icon || item.meta?.icon"
:title="onlyOneChild.meta.title"
/>
@@ -33,7 +34,7 @@
<!--【非叶子节点】显示含多个子节点的父菜单，或始终显示的单子节点 -->
<el-sub-menu v-else :index="resolvePath(item.path)" teleported>
<template #title>
<MenuItemTitle v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
<MenuItemContent v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
</template>
<MenuItem
@@ -48,7 +49,7 @@
</template>
<script setup lang="ts">
import MenuItemTitle from "./MenuItemTitle.vue";
import MenuItemContent from "./MenuItemContent.vue";
defineOptions({
name: "MenuItem",

47
src/layouts/components/Menu/components/MenuItemTitle.vue → src/layouts/components/Menu/components/MenuItemContent.vue
View File

@@ -34,52 +34,7 @@ const iconComponent = computed(() => props.icon?.replace("el-icon-", ""));
width: 18px;
height: 18px;
margin-right: 5px;
font-size: 18px;
color: currentcolor;
}
.el-icon {
width: 18px !important;
height: 18px !important;
color: currentcolor;
}
[class^="i-svg:"] {
width: 18px;
height: 18px;
color: currentcolor !important;
}
// 收缩状态下的样式优化
.hideSidebar {
.el-sub-menu,
.el-menu-item {
// 确保菜单项内容居中
display: flex !important;
align-items: center !important;
justify-content: center !important;
.menu-icon {
width: 20px;
height: 20px;
margin: 0 auto;
}
.el-icon {
width: 20px !important;
height: 20px !important;
margin: 0 auto;
}
[class^="i-svg:"] {
width: 20px;
height: 20px;
margin: 0 auto;
}
// 隐藏文字标题
.menu-title {
display: none;
}
}
}
</style>

61
src/styles/index.scss
View File

@@ -10,6 +10,67 @@
background-color: var(--el-color-primary);
}
// 混合布局左侧菜单的hover样式
.layout-mix .layout__sidebar--left .el-menu {
.el-menu-item {
&:hover {
// 极简白主题：使用浅灰色背景
background-color: var(--el-fill-color-light) !important;
}
}
.el-sub-menu__title {
&:hover {
// 极简白主题：使用浅灰色背景
background-color: var(--el-fill-color-light) !important;
}
}
}
// 深色主题或深蓝色侧边栏配色下的左侧菜单hover样式
html.dark .layout-mix .layout__sidebar--left .el-menu,
html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
.el-menu-item {
&:hover {
// 深色背景：使用CSS变量
background-color: var(--menu-hover) !important;
}
}
.el-sub-menu__title {
&:hover {
// 深色背景：使用CSS变量
background-color: var(--menu-hover) !important;
}
}
}
// 窄屏时隐藏菜单文字，只显示图标
.hideSidebar {
// Top布局和Mix布局的水平菜单
&.layout-top .layout__header .el-menu--horizontal,
&.layout-mix .layout__header .el-menu--horizontal {
.el-menu-item,
.el-sub-menu__title {
.menu-title,
span:not([class*="i-svg"]):not(.el-icon) {
display: none !important;
}
}
}
// Mix布局的左侧菜单
&.layout-mix .layout__sidebar--left .el-menu {
.el-menu-item,
.el-sub-menu__title {
.menu-title,
span:not([class*="i-svg"]):not(.el-icon) {
display: none !important;
}
}
}
}
// 全局搜索区域样式
.search-container {
padding: 18px 16px 0;

59
src/views/login/components/Login.vue
View File

@@ -86,22 +86,26 @@
</div>
<!-- 第三方登录 -->
<el-divider>
<el-text size="small">{{ t("login.otherLoginMethods") }}</el-text>
</el-divider>
<div class="flex-center gap-x-5 w-full text-[var(--el-text-color-secondary)]">
<CommonWrapper>
<div text-20px class="i-svg:wechat" />
</CommonWrapper>
<CommonWrapper>
<div text-20px cursor-pointer class="i-svg:qq" />
</CommonWrapper>
<CommonWrapper>
<div text-20px cursor-pointer class="i-svg:github" />
</CommonWrapper>
<CommonWrapper>
<div text-20px cursor-pointer class="i-svg:gitee" />
</CommonWrapper>
<div class="third-party-login">
<div class="divider-container">
<div class="divider-line"></div>
<span class="divider-text">{{ t("login.otherLoginMethods") }}</span>
<div class="divider-line"></div>
</div>
<div class="flex-center gap-x-5 w-full text-[var(--el-text-color-secondary)]">
<CommonWrapper>
<div text-20px class="i-svg:wechat" />
</CommonWrapper>
<CommonWrapper>
<div text-20px cursor-pointer class="i-svg:qq" />
</CommonWrapper>
<CommonWrapper>
<div text-20px cursor-pointer class="i-svg:github" />
</CommonWrapper>
<CommonWrapper>
<div text-20px cursor-pointer class="i-svg:gitee" />
</CommonWrapper>
</div>
</div>
</div>
</template>
@@ -257,3 +261,26 @@ function toOtherForm(type: "register" | "resetPwd") {
emit("update:modelValue", type);
}
</script>
<style lang="scss" scoped>
.third-party-login {
.divider-container {
display: flex;
align-items: center;
margin: 20px 0;
.divider-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, var(--el-border-color-light), transparent);
}
.divider-text {
padding: 0 16px;
font-size: 12px;
color: var(--el-text-color-regular);
white-space: nowrap;
}
}
}
</style>