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> <!DOCTYPE html>
<html> <html lang="zh-CN">
<head> <head>
<meta charset="utf-8"> <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 { .status-col {
.cell { .cell {
padding: 0 10px; padding: 0 10px;
@ -55,6 +48,14 @@
vertical-align: middle; 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) { @media screen and (max-width: 500px) {
.el-message { .el-message {
min-width: 300px !important; min-width: 300px !important;

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

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

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

@ -1,33 +1,45 @@
#app { #app {
.main-container { .layout-sidebar__container {
min-height: 100%; transition: width 0.28s ease;
transition: margin-left 0.28s; background-color: var(--base-menu-background);
margin-left: var(--base-sidebar-width); height: 100%;
position: relative; 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边距 // 展开sidebar状态设置svg-icon边距
.openSidebar .layout-sidebar__container .svg-icon { .openSidebar {
.layout-sidebar__container .svg-icon {
margin-right: 10px; margin-right: 10px;
} }
.openSidebar .scrollbar-wrapper:not(.el-menu--collapse) {
width: var(--base-sidebar-width);
} }
// 隐藏侧边栏样式
.hideSidebar { .hideSidebar {
.main-container { .el-aside {
margin-left: var(--base-sidebar-left); --el-aside-width: 60px;
} }
// 隐藏箭头
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
}
}
.el-sub-menu { .el-sub-menu {
overflow: hidden; overflow: hidden;
@ -47,7 +59,7 @@
.el-sub-menu { .el-sub-menu {
& > .el-sub-menu__title { & > .el-sub-menu__title {
& > span { & > span {
height: 0; height: 3000px;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
@ -66,6 +78,7 @@
.layout-sidebar__container { .layout-sidebar__container {
transition: transform 0.28s; transition: transform 0.28s;
position: fixed;
} }
&.hideSidebar { &.hideSidebar {
@ -74,7 +87,6 @@
} }
} }
} }
} }
// when menu collapsed // when menu collapsed

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

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

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

@ -33,6 +33,7 @@ const toggleClick = () => {
vertical-align: middle; vertical-align: middle;
width: 20px; width: 20px;
height: 20px; height: 20px;
fill: var(--base-color-white);
} }
.hamburger.is-active { .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> </span>
</div> </div>
<div class="drawer-item"> <!-- <div class="drawer-item">
<span>{{ $t('layout.fixed') }} Header</span> <span>{{ $t('layout.fixed') }} Header</span>
<span class="comp-style"> <span class="comp-style">
<el-switch v-model="fixedHeader" class="drawer-switch" /> <el-switch v-model="fixedHeader" class="drawer-switch" />
</span> </span>
</div> </div> -->
<div class="drawer-item"> <div class="drawer-item">
<span>{{ $t('layout.show') }} Logo</span> <span>{{ $t('layout.show') }} Logo</span>

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

@ -1,29 +1,30 @@
<template> <template>
<div v-if="!item.hidden"> <template v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow"> <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)"> <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)" /> <svg-icon :name="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
<template v-if="onlyOneChild.meta.titleKey" #title> <template v-if="onlyOneChild.meta.titleKey" #title>
<span>{{ $t(onlyOneChild.meta.titleKey) }}</span> {{ $t(onlyOneChild.meta.titleKey) }}
</template> </template>
<template v-else-if="onlyOneChild.meta.title" #title> <template v-else-if="onlyOneChild.meta.title" #title>
<span>{{ onlyOneChild.meta.title }}</span> {{ onlyOneChild.meta.title }}
</template> </template>
</el-menu-item> </el-menu-item>
</app-link> </app-link>
</template> </template>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)">
<template v-slot:title> <template #title>
<svg-icon :name="item.meta && item.meta.icon" /> <svg-icon :name="item.meta && item.meta.icon" />
<span v-if="item.meta && item.meta.titleKey">{{ $t(item.meta.titleKey) }}</span> <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> <span v-else-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
</template> </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> </el-sub-menu>
</div> </template>
</template> </template>
<script setup> <script setup>

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

@ -1,5 +1,5 @@
<template> <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" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper"> <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" /> <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</div> </el-aside>
</template> </template>
<script setup> <script setup>
@ -43,38 +43,4 @@ const activeMenu = computed(() => {
<style lang="scss"> <style lang="scss">
@import '@/assets/styles/variables.module.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> </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 Navbar } from './Navbar'
export { default as Settings } from './Settings' export { default as Settings } from './Settings'
export { default as TagsView } from './TagsView/index.vue' export { default as TagsView } from './TagsView/index.vue'

87
src/layout/index.vue
View File

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

6
src/views/login.vue
View File

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