wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化ui布局

Browse Source
This commit is contained in:
不做码农 2022-05-17 20:32:26 +08:00
parent e02233a8cb
commit 3de857a16b
13 changed files with 137 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">

15
src/assets/styles/element-ui.scss
View File

@ -28,13 +28,6 @@
}
}
.fixed-width {
.el-button--mini {
padding: 7px 10px;
width: 60px;
}
}
.status-col {
.cell {
padding: 0 10px;
@ -55,6 +48,14 @@
vertical-align: middle;
}
.el-header {
--el-header-padding: 0 0px !important;
--el-header-height: 50px !important;
}
// el 2.2.0 text button
.el-button.is-text {
color: var(--el-color-primary) !important;
}
@media screen and (max-width: 500px) {
.el-message {
min-width: 300px !important;

19
src/assets/styles/index.scss
View File

@ -7,10 +7,6 @@
@import './waves.scss';
@import './black.scss';
label {
font-weight: 700;
}
html,
body,
#app {
@ -97,22 +93,18 @@ div:focus {
}
}
//main-container全局样式
.app-container {
padding: 20px;
}
.text-center {
text-align: center;
}
.link-type,
.link-type:focus {
color: #337ab7;
color: var(--el-color-primary);
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
// color: rgb(32, 160, 255);
opacity: 0.3;
}
}
@ -270,3 +262,8 @@ div:focus {
.table-td-thumb {
width: 56px;
}
.flex-center {
flex-direction: column;
overflow: hidden;
}

56
src/assets/styles/sidebar.scss
View File

@ -1,33 +1,45 @@
#app {
.main-container {
min-height: 100%;
transition: margin-left 0.28s;
margin-left: var(--base-sidebar-width);
.layout-sidebar__container {
transition: width 0.28s ease;
background-color: var(--base-menu-background);
height: 100%;
position: relative;
font-size: 0px;
z-index: 1001;
display: flex;
flex-direction: column;
-webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
.scrollbar-wrapper {
overflow-x: hidden;
}
.el-scrollbar {
flex: 1;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
// 去掉el-menu边框
.el-menu {
border: none;
}
}
// 展开sidebar状态设置svg-icon边距
.openSidebar .layout-sidebar__container .svg-icon {
.openSidebar {
.layout-sidebar__container .svg-icon {
margin-right: 10px;
}
.openSidebar .scrollbar-wrapper:not(.el-menu--collapse) {
width: var(--base-sidebar-width);
}
// 隐藏侧边栏样式
.hideSidebar {
.main-container {
margin-left: var(--base-sidebar-left);
.el-aside {
--el-aside-width: 60px;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
}
}
// 隐藏箭头
.el-sub-menu {
overflow: hidden;
@ -47,7 +59,7 @@
.el-sub-menu {
& > .el-sub-menu__title {
& > span {
height: 0;
height: 3000px;
width: 0;
overflow: hidden;
visibility: hidden;
@ -66,6 +78,7 @@
.layout-sidebar__container {
transition: transform 0.28s;
position: fixed;
}
&.hideSidebar {
@ -74,7 +87,6 @@
}
}
}
}
// when menu collapsed

4
src/assets/styles/variables.module.scss
View File

@ -14,8 +14,10 @@ $panGreen: #30b08f;
--base-logo-title-color: #ffffff;
--base-topBar-background: #ffffff;
--base-topBar-color: #5a5e66;
--base-sidebar-width: 200px;
--base-sidebar-width: 220px;
--base-sidebar-left: 64px;
--el-aside-width: 220px;
}
/***默认主题颜色配置***/
[data-theme='theme-light'] {

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

@ -33,6 +33,7 @@ const toggleClick = () => {
vertical-align: middle;
width: 20px;
height: 20px;
fill: var(--base-color-white);
}
.hamburger.is-active {

54
src/layout/components/AppMain.vue
View File

@ -1,54 +0,0 @@
<template>
<section class="app-main">
<router-view v-slot="{ Component, route }" :key="route.path">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<component :is="Component" :key="route.path"/>
</keep-alive>
</transition>
</router-view>
</section>
</template>
<script setup>
let store = useStore()
const route = useRoute()
store.dispatch('tagsView/addCachedView', route)
const cachedViews = computed(() => {
return store.state.tagsView.cachedViews
})
</script>
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
width: 100%;
position: relative;
overflow: hidden;
}
.fixed-header + .app-main {
padding-top: 50px;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
}
.fixed-header + .app-main {
padding-top: 84px;
}
}
</style>
<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
.fixed-header {
// padding-right: 17px;
}
}
</style>

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

@ -47,12 +47,12 @@
</span>
</div>
<div class="drawer-item">
<!-- <div class="drawer-item">
<span>{{ $t('layout.fixed') }} Header</span>
<span class="comp-style">
<el-switch v-model="fixedHeader" class="drawer-switch" />
</span>
</div>
</div> -->
<div class="drawer-item">
<span>{{ $t('layout.show') }} Logo</span>

17
src/layout/components/Sidebar/SidebarItem.vue
View File

@ -1,29 +1,30 @@
<template>
<div v-if="!item.hidden">
<template v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
<el-menu-item :index="resolvePath(onlyOneChild.path)">
<svg-icon :name="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
<template v-if="onlyOneChild.meta.titleKey" #title>
<span>{{ $t(onlyOneChild.meta.titleKey) }}</span>
{{ $t(onlyOneChild.meta.titleKey) }}
</template>
<template v-else-if="onlyOneChild.meta.title" #title>
<span>{{ onlyOneChild.meta.title }}</span>
{{ onlyOneChild.meta.title }}
</template>
</el-menu-item>
</app-link>
</template>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template v-slot:title>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)">
<template #title>
<svg-icon :name="item.meta && item.meta.icon" />
<span v-if="item.meta && item.meta.titleKey">{{ $t(item.meta.titleKey) }}</span>
<span v-else-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
</template>
<sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" />
<sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" />
</el-sub-menu>
</div>
</template>
</template>
<script setup>

38
src/layout/components/Sidebar/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div :data-theme="sideTheme" class="layout-sidebar__container" :class="{ 'has-logo': showLogo }">
<el-aside :data-theme="sideTheme" class="layout-sidebar__container" :class="{ 'has-logo': showLogo }">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
@ -14,7 +14,7 @@
<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
</el-menu>
</el-scrollbar>
</div>
</el-aside>
</template>
<script setup>
@ -43,38 +43,4 @@ const activeMenu = computed(() => {
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.layout-sidebar__container {
transition: width 0.28s;
background-color: var(--base-menu-background);
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
-webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
.scrollbar-wrapper {
overflow-x: hidden;
}
.el-scrollbar {
flex: 1;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
// 去掉el-menu边框
.el-menu {
border: none;
}
.el-sub-menu .el-menu-item {
padding-right: 0 !important;
}
}
</style>

2
src/layout/components/index.js
View File

@ -1,4 +1,4 @@
export { default as AppMain } from './AppMain'
// export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Settings } from './Settings'
export { default as TagsView } from './TagsView/index.vue'

87
src/layout/index.vue
View File

@ -1,36 +1,50 @@
<template>
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
<el-container :class="classObj" class="app-layout" :style="{ '--current-color': theme }">
<!-- 移动端打开菜单遮罩 -->
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" v-if="!sidebar.hide" />
<div class="main-container" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }">
<div :class="{ 'fixed-header': fixedHeader }">
<sidebar v-if="!sidebar.hide" />
<el-container class="main-container flex-center" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }">
<el-header :class="{ 'fixed-header': fixedHeader }">
<navbar @setLayout="setLayout" />
<tags-view v-if="needTagsView" />
</div>
<app-main />
</el-header>
<el-main class="app-main">
<router-view v-slot="{ Component, route }" :key="route.path">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<component :is="Component" :key="route.path" />
</keep-alive>
</transition>
</router-view>
</el-main>
<settings ref="settingRef" />
</div>
</div>
</el-container>
</el-container>
</template>
<script setup>
import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components'
import { Navbar, Settings, TagsView } from './components'
import defaultSettings from '@/settings'
const store = useStore()
const theme = computed(() => store.state.settings.theme)
const sideTheme = computed(() => store.state.settings.sideTheme)
// const sideTheme = computed(() => store.state.settings.sideTheme)
const sidebar = computed(() => store.state.app.sidebar)
const device = computed(() => store.state.app.device)
const needTagsView = computed(() => store.state.settings.tagsView)
const fixedHeader = computed(() => store.state.settings.fixedHeader)
const route = useRoute()
store.dispatch('tagsView/addCachedView', route)
const cachedViews = computed(() => {
return store.state.tagsView.cachedViews
})
const classObj = computed(() => ({
hideSidebar: !sidebar.value.opened,
openSidebar: sidebar.value.opened,
withoutAnimation: sidebar.value.withoutAnimation,
mobile: device.value === 'mobile',
}))
@ -63,17 +77,28 @@ function setLayout() {
@import '@/assets/styles/mixin.scss';
@import '@/assets/styles/variables.module.scss';
.app-wrapper {
@include clearfix;
.main-container {
min-height: 100%;
width: 100%;
flex-direction: column;
position: relative;
}
.app-layout {
@include clearfix;
// position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
flex: 1;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
// 移动端打开菜单背景遮罩
.drawer-bg {
background: rgba(0, 0, 0, 0.3);
width: 100%;
@ -82,20 +107,36 @@ function setLayout() {
position: absolute;
z-index: 999;
}
// 固定header
.fixed-header {
position: fixed;
top: 0;
right: 0;
position: sticky;
position: -webkit-sticky;
z-index: 9;
width: calc(100% - var(--base-sidebar-width));
transition: width 0.28s;
}
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
.mobile .fixed-header {
width: 100%;
}
.app-main {
/* 50= navbar 50 */
// min-height: calc(100vh - 50px);
width: 100%;
position: relative;
height: 100%;
}
.el-header {
--el-header-padding: 0 0px !important;
--el-header-height: 50px !important;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
}
.el-header {
--el-header-height: 84px !important;
}
}
</style>

6
src/views/login.vue
View File

@ -19,8 +19,7 @@
size="large"
auto-complete="off"
:placeholder="$t('login.password')"
@keyup.enter="handleLogin"
>
@keyup.enter="handleLogin">
<template #prefix>
<svg-icon name="password" class="el-input__icon input-icon" />
</template>
@ -33,8 +32,7 @@
auto-complete="off"
:placeholder="$t('login.captcha')"
style="width: 63%"
@keyup.enter="handleLogin"
>
@keyup.enter="handleLogin">
<template #prefix>
<svg-icon name="validCode" class="el-input__icon input-icon" />
</template>