test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-12-04 21:18:16 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

优化侧边栏宽度计算

Browse Source
This commit is contained in:
hooray 2021-12-09 09:50:35 +08:00
parent 5a79f120e4
commit 0d7fa150f0
9 changed files with 52 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/App.vue
View File

@ -1,10 +1,35 @@
<template>
<RouterView />
<RouterView
:style="{
'--g-main-sidebar-actual-width': mainSidebarActualWidth,
'--g-sub-sidebar-actual-width': subSidebarActualWidth
}"
/>
</template>
<script setup>
const store = useStore()
// 侧边栏主导航当前实际宽度
const mainSidebarActualWidth = computed(() => {
let actualWidth = getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width')
actualWidth = parseInt(actualWidth)
if (['head', 'single'].includes(store.state.settings.menuMode)) {
actualWidth = 0
}
return `${actualWidth}px`
})
// 侧边栏次导航当前实际宽度
const subSidebarActualWidth = computed(() => {
let actualWidth = getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width')
actualWidth = parseInt(actualWidth)
if (store.state.settings.sidebarCollapse) {
actualWidth = 64
}
return `${actualWidth}px`
})
watch(() => store.state.settings.mode, () => {
if (store.state.settings.mode === 'pc') {
store.commit('settings/updateThemeSetting', {
@ -20,39 +45,25 @@ watch(() => store.state.settings.mode, () => {
immediate: true
})
watch([
() => store.state.settings.menuMode,
() => store.state.settings.sidebarCollapse
], () => setMenuMode(), {
watch(() => store.state.settings.menuMode, () => {
document.body.setAttribute('data-menu-mode', store.state.settings.menuMode)
}, {
immediate: true
})
function setMenuMode() {
document.body.removeAttribute('data-sidebar-no-collapse')
document.body.removeAttribute('data-sidebar-collapse')
if (store.state.settings.sidebarCollapse) {
document.body.setAttribute('data-sidebar-collapse', '')
} else {
document.body.setAttribute('data-sidebar-no-collapse', '')
}
document.body.setAttribute('data-menu-mode', store.state.settings.menuMode)
}
watch([
() => store.state.settings.enableDynamicTitle,
() => store.state.settings.title
], () => setDocumentTitle(), {
immediate: true
})
function setDocumentTitle() {
], () => {
if (store.state.settings.enableDynamicTitle && store.state.settings.title) {
let title = store.state.settings.title
document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
} else {
document.title = import.meta.env.VITE_APP_TITLE
}
}
}, {
immediate: true
})
onMounted(() => {
window.onresize = () => {

28
src/assets/styles/globals.scss
View File

@ -40,32 +40,8 @@ body {
position: fixed;
left: 50%;
right: 0;
width: calc(100% - #{$g-main-sidebar-width} - #{$g-sub-sidebar-width});
}
[data-sidebar-no-collapse] {
[data-fixed-calc-width] {
transform: translateX(-50%) translateX(division($g-main-sidebar-width, 2)) translateX(division($g-sub-sidebar-width, 2));
}
&[data-menu-mode="head"],
&[data-menu-mode="single"] {
[data-fixed-calc-width] {
width: calc(100% - #{$g-sub-sidebar-width});
transform: translateX(-50%) translateX(division($g-sub-sidebar-width, 2));
}
}
}
[data-sidebar-collapse] {
[data-fixed-calc-width] {
width: calc(100% - #{$g-main-sidebar-width} - 64px);
transform: translateX(-50%) translateX(division($g-main-sidebar-width, 2)) translateX(32px);
}
&[data-menu-mode="head"],
&[data-menu-mode="single"] {
[data-fixed-calc-width] {
width: calc(100% - 64px);
transform: translateX(-50%) translateX(32px);
}
}
width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
}
[data-mode="mobile"] {
[data-fixed-calc-width] {

10
src/assets/styles/resources/layout.scss
View File

@ -4,10 +4,14 @@
$g-header-width: 100%;
// 头部高度
$g-header-height: 70px;
// 侧边栏宽度
$g-main-sidebar-width: 70px;
$g-sub-sidebar-width: 220px;
// 侧边栏Logo高度
$g-sidebar-logo-height: 50px;
// 顶部导航栏高度
$g-topbar-height: 50px;
// 全局变量
:root {
// 侧边栏宽度
--g-main-sidebar-width: 70px;
--g-sub-sidebar-width: 220px;
}

1
src/components/SvgIcon/index.vue
View File

@ -2,7 +2,6 @@
<el-icon v-if="name.indexOf('el-icon-') === 0 || name.indexOf('ElIcon') === 0" class="svg-icon" :style="transformStyle">
<Component :is="name" />
</el-icon>
<i v-else-if="name.indexOf('ri-') === 0" class="svg-icon" :style="transformStyle" :class="name" />
<svg v-else class="svg-icon" :style="transformStyle" aria-hidden="true">
<use :xlink:href="`#icon-${name}`" />
</svg>

4
src/layout/components/MainSidebar/index.vue
View File

@ -32,7 +32,7 @@ const switchMenu = inject('switchMenu')
transition: 0.3s;
}
.main-sidebar-enter-from {
transform: translateX(-#{$g-main-sidebar-width});
transform: translateX(calc(var(--g-main-sidebar-width) * -1));
}
.main-sidebar-container {
overflow-x: hidden;
@ -47,7 +47,7 @@ const switchMenu = inject('switchMenu')
position: relative;
z-index: 1;
width: $g-main-sidebar-width;
width: var(--g-main-sidebar-width);
color: $g-main-sidebar-menu-color;
background-color: $g-main-sidebar-bg;
.sidebar-logo {

2
src/layout/components/Search/index.vue
View File

@ -289,7 +289,6 @@ function scrollTo(offsetTop) {
background-color: #dbe7f8;
.icon {
[class^="el-icon-"],
[class^="ri-"],
.svg-icon {
color: #409eff;
transform: scale(1.2);
@ -310,7 +309,6 @@ function scrollTo(offsetTop) {
flex: 0 0 66px;
text-align: center;
[class^="el-icon-"],
[class^="ri-"],
.svg-icon {
color: #999;
font-size: 20px;

2
src/layout/components/SubSidebar/index.vue
View File

@ -57,7 +57,7 @@ function onSidebarScroll(e) {
display: none;
}
width: $g-sub-sidebar-width;
width: var(--g-sub-sidebar-width);
position: absolute;
left: 0;
top: 0;

2
src/layout/components/ThemeSetting/index.vue
View File

@ -42,7 +42,7 @@
<div class="label">
保持展开一个
<el-tooltip content="开启该功能后，侧边栏只保持一个子菜单的展开" placement="top" :append-to-body="false">
<svg-icon name="ri-question-line" />
<svg-icon name="el-icon-question-filled" />
</el-tooltip>
</div>
<el-switch v-model="sidebarUniqueOpened" />

65
src/layout/index.vue
View File

@ -95,78 +95,23 @@ function switchMenu(index) {
</script>
<style lang="scss" scoped>
// 侧边栏未折叠
[data-sidebar-no-collapse] {
.sidebar-container {
width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
}
.main-container {
margin-left: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
}
// 没有主侧边栏
&[data-menu-mode="head"],
&[data-menu-mode="single"] {
.sidebar-container {
width: $g-sub-sidebar-width;
}
.main-container {
margin-left: $g-sub-sidebar-width;
}
}
}
// 侧边栏折叠
[data-sidebar-collapse] {
.sidebar-container {
width: calc(#{$g-main-sidebar-width} + 64px);
}
.main-container {
margin-left: calc(#{$g-main-sidebar-width} + 64px);
}
// 没有主侧边栏
&[data-menu-mode="head"],
&[data-menu-mode="single"] {
.sidebar-container {
width: 64px;
}
.main-container {
margin-left: 64px;
}
}
}
[data-mode="mobile"] {
.sidebar-container {
width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
transform: translateX(-#{$g-main-sidebar-width}) translateX(-#{$g-sub-sidebar-width});
transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
&.show {
transform: translateX(0);
}
}
.main-container {
margin-left: 0;
}
&[data-menu-mode="head"] {
.sidebar-container {
width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
transform: translateX(-#{$g-main-sidebar-width}) translateX(-#{$g-sub-sidebar-width});
&.show {
transform: translateX(0);
}
}
.main-container {
margin-left: 0;
}
margin-left: 0 !important;
}
&[data-menu-mode="single"] {
.sidebar-container {
width: $g-sub-sidebar-width;
transform: translateX(-#{$g-sub-sidebar-width});
transform: translateX(calc(var(--g-main-sidebar-width) * -1));
&.show {
transform: translateX(0);
}
}
.main-container {
margin-left: 0;
}
}
}
.layout {
@ -190,6 +135,7 @@ function switchMenu(index) {
bottom: 0;
display: flex;
transition: transform 0.3s;
width: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
}
.sidebar-mask {
position: fixed;
@ -210,7 +156,7 @@ function switchMenu(index) {
}
}
.main-sidebar-container + .sub-sidebar-container {
left: $g-main-sidebar-width;
left: var(--g-main-sidebar-width);
}
.main-container {
display: flex;
@ -219,6 +165,7 @@ function switchMenu(index) {
transition: margin-left 0.3s;
background-color: $g-main-bg;
box-shadow: 1px 0 0 0 darken($g-main-bg, 10);
margin-left: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
.topbar-container {
top: 0;
z-index: 998;