feat(login): 添加租户名称获取功能并优化前端布局
- 在登录控制器中注入租户服务并获取租户名称信息 - 添加租户名称到登录响应结果中 - 更新样式变量定义侧边栏宽度和Logo高度 - 重构公告面板组件统一公告通知显示逻辑 - 简化公告类型图标和样式映射关系 - 更新侧边栏为垂直菜单布局并添加折叠功能 - 优化Logo组件显示租户名称和系统标题 - 调整导航栏布局结构和响应式样式 - 重构主应用容器样式和标签页显示逻辑
This commit is contained in:
@@ -1,50 +1,49 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{ 'has-logo': showLogo }"
|
||||
class="sidebar-wrapper"
|
||||
:class="[
|
||||
'sidebar-wrapper',
|
||||
{ 'has-logo': showLogo },
|
||||
{ 'is-collapse': isCollapse }
|
||||
]"
|
||||
:style="{
|
||||
backgroundColor:
|
||||
sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,
|
||||
}"
|
||||
>
|
||||
<!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
|
||||
<div class="menu-container">
|
||||
<div class="menu-scrollbar">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="
|
||||
sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground
|
||||
"
|
||||
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||
:unique-opened="true"
|
||||
:active-text-color="theme"
|
||||
:collapse-transition="false"
|
||||
mode="horizontal"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
<navbar @setLayout="setLayout" class="navbar-container" />
|
||||
<settings ref="settingRef" />
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar class="sidebar-scrollbar">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="
|
||||
sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground
|
||||
"
|
||||
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||
:unique-opened="true"
|
||||
:active-text-color="theme"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Logo from './Logo';
|
||||
import SidebarItem from './SidebarItem';
|
||||
import variables from '@/assets/styles/variables.module.scss';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import usePermissionStore from '@/store/modules/permission';
|
||||
import {computed, ref} from 'vue';
|
||||
import {computed} from 'vue';
|
||||
import {useRoute} from 'vue-router';
|
||||
import {Navbar, Settings} from '@/layout/components';
|
||||
|
||||
const route = useRoute();
|
||||
const appStore = useAppStore();
|
||||
@@ -65,134 +64,122 @@ const activeMenu = computed(() => {
|
||||
}
|
||||
return path;
|
||||
});
|
||||
const settingRef = ref(null);
|
||||
function setLayout() {
|
||||
settingRef.value.openSetting();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/styles/variables.module.scss';
|
||||
|
||||
.sidebar-wrapper {
|
||||
width: $sideBarWidth;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
flex: 1;
|
||||
height: 50px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-scrollbar {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--horizontal {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
border-bottom: none !important;
|
||||
background-color: transparent !important;
|
||||
min-width: auto;
|
||||
flex-wrap: nowrap;
|
||||
height: 50px;
|
||||
|
||||
& > .el-menu-item,
|
||||
& > .el-sub-menu {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
color: #fff;
|
||||
padding: 0 15px !important;
|
||||
font-size: 14px;
|
||||
min-width: 120px !important;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.svg-icon) {
|
||||
margin-right: 8px !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__title) {
|
||||
padding-right: 25px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__icon-arrow) {
|
||||
right: 8px !important;
|
||||
}
|
||||
|
||||
:deep(.menu-title) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
transition: width 0.28s;
|
||||
flex-shrink: 0;
|
||||
height: 50px;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
/* 响应式处理 */
|
||||
@media (max-width: 768px) {
|
||||
.menu-container {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
&.is-collapse {
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
.el-menu--horizontal {
|
||||
& > .el-menu-item,
|
||||
& > .el-sub-menu {
|
||||
padding: 0 12px !important;
|
||||
min-width: 80px !important;
|
||||
font-size: 12px;
|
||||
.mobile & {
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.28s;
|
||||
}
|
||||
|
||||
.is-collapse.mobile & {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.has-logo {
|
||||
.sidebar-scrollbar {
|
||||
height: calc(100% - #{$logoHeight});
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-scrollbar {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.sidebar-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sidebar-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item),
|
||||
:deep(.el-sub-menu__title) {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
&.is-active {
|
||||
background-color: var(--current-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu) {
|
||||
.el-menu-item {
|
||||
min-width: $sideBarWidth !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
> .el-sub-menu__title {
|
||||
color: var(--current-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.el-menu--horizontal {
|
||||
& > .el-menu-item,
|
||||
& > .el-sub-menu {
|
||||
padding: 0 8px !important;
|
||||
min-width: 60px !important;
|
||||
font-size: 11px;
|
||||
:deep(.el-menu--collapse) {
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
padding: 0 20px !important;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
&.is-opened {
|
||||
> .el-sub-menu__title .el-icon-arrow-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user