feat: 🎸 layout布局重构中

This commit is contained in:
chenkl 2020-12-18 17:34:17 +08:00
parent 29d9c98860
commit bd24b92acb
10 changed files with 364 additions and 174 deletions

View File

@ -1,13 +1,13 @@
<template>
<router-link class="app-logo" to="/">
<router-link class="app-logo" to="/" :class="{'app-logo--Top': layout !== 'Classic'}">
<img :src="require('@/assets/img/logo.png')">
<div v-if="show" class="sidebar-title">{{ title }}</div>
</router-link>
</template>
<script lang="ts">
import { defineComponent, ref, watch, PropType } from 'vue'
import config from '_p/index/config'
import { defineComponent, ref, watch, PropType, computed } from 'vue'
import { appStore } from '_p/index/store/modules/app'
export default defineComponent({
name: 'Logo',
@ -19,21 +19,28 @@ export default defineComponent({
},
setup(props) {
const show = ref<boolean>(true)
const title = computed(() => appStore.title)
const layout = computed(() => appStore.layout)
watch(
() => props.collapsed,
(collapsed: boolean) => {
if (!collapsed) {
setTimeout(() => {
show.value = !collapsed
}, 400)
if (layout.value !== 'Classic') {
show.value = true
} else {
show.value = !collapsed
if (!collapsed) {
setTimeout(() => {
show.value = !collapsed
}, 400)
} else {
show.value = !collapsed
}
}
}
)
return {
show,
title: config.title
title,
layout
}
}
})
@ -44,7 +51,7 @@ export default defineComponent({
display: flex;
align-items: center;
cursor: pointer;
height: @topSilderHeight;
height: @topSiderHeight;
width: 100%;
background-color: @menuBg;
img {
@ -59,7 +66,22 @@ export default defineComponent({
margin-left: 12px;
}
.sidebar-title {
color: #fff;
color: @menuActiveText;
}
}
.app-logo--Top {
width: auto;
background-color: @topMenuBg;
transition: background 0.2s;
padding: 0 5px;
&:hover {
background: #f6f6f6;
}
img {
margin-left: 0;
}
.sidebar-title {
color: @topMenuText;
}
}
</style>

View File

@ -1,111 +0,0 @@
<template>
<el-scrollbar
ref="scrollContainer"
class="scroll-container"
@wheel="handleScroll"
>
<slot />
</el-scrollbar>
</template>
<script lang="ts">
import { defineComponent, ref, unref, nextTick } from 'vue'
import { useScrollTo } from '@/hooks/useScrollTo'
const tagAndTagSpacing = 4 // tagAndTagSpacing
export default defineComponent({
name: 'ScrollPane',
setup() {
const scrollContainer = ref<HTMLElement | null>(null)
function handleScroll(e: any): void {
const eventDelta: number = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper: any = (unref(scrollContainer) as any).$.wrap
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
}
function moveToTarget(currentTag: any) {
const $container: any = (unref(scrollContainer) as any).$el
const $containerWidth: number = $container.offsetWidth
const $scrollWrapper: any = (unref(scrollContainer) as any).$.wrap
const tagList = (unref(scrollContainer) as any).$parent.$parent.tagRefs
let firstTag: any = null
let lastTag: any = null
// find first tag and last tag
if (tagList.length > 0) {
firstTag = tagList[0]
lastTag = tagList[tagList.length - 1]
}
if (firstTag === currentTag) {
$scrollWrapper.scrollLeft = 0
} else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
} else {
// find preTag and nextTag
const currentIndex: number = tagList.findIndex((item: any) => item === currentTag)
const prevTag = tagList[currentIndex - 1]
const nextTag = tagList[currentIndex + 1]
// the tag's offsetLeft after of nextTag
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
// the tag's offsetLeft before of prevTag
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
nextTick(() => {
const { start } = useScrollTo({
el: $scrollWrapper,
position: 'scrollLeft',
to: afterNextTagOffsetLeft - $containerWidth,
duration: 500
})
start()
})
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
nextTick(() => {
const { start } = useScrollTo({
el: $scrollWrapper,
position: 'scrollLeft',
to: beforePrevTagOffsetLeft,
duration: 500
})
start()
})
}
}
}
function moveTo(to: number) {
const $scrollWrapper: any = (unref(scrollContainer) as any).$.wrap
nextTick(() => {
const { start } = useScrollTo({
el: $scrollWrapper,
position: 'scrollLeft',
to: $scrollWrapper.scrollLeft + to,
duration: 500
})
start()
})
}
return {
handleScroll,
scrollContainer,
moveToTarget,
moveTo
}
}
})
</script>
<style lang="less">
.scroll-container {
white-space: nowrap;
position: relative;
overflow: hidden;
width: 100%;
}
</style>

View File

@ -38,15 +38,15 @@
</div>
<div class="setting__title">界面显示</div>
<div class="setting__item">
<div v-if="layout !== 'Top'" class="setting__item">
<span>顶部操作栏</span>
<el-switch v-model="navbar" @change="setNavbar" />
</div>
<div class="setting__item">
<div v-if="layout !== 'Top'" class="setting__item">
<span>侧边栏缩收</span>
<el-switch v-model="hamburger" @change="setHamburger" />
</div>
<div class="setting__item">
<div v-if="layout !== 'Top'" class="setting__item">
<span>面包屑</span>
<el-switch v-model="breadcrumb" @change="setBreadcrumb" />
</div>
@ -79,6 +79,7 @@ export default defineComponent({
function setLayout(mode: 'Classic' | 'LeftTop' | 'Top' | 'Test') {
if (mode === layout.value) return
appStore.SetLayout(mode)
appStore.SetCollapsed(false)
}
// const fixedNavbar = ref<boolean>(appStore.fixedNavbar)

View File

@ -1,5 +1,5 @@
<template>
<div v-if="!item.meta?.hidden">
<template v-if="!item.meta?.hidden">
<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.meta?.alwaysShow">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown': !isNest}">
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
@ -9,7 +9,13 @@
</el-menu-item>
</template>
<el-submenu v-else popper-class="nest-popper-menu" :index="resolvePath(item.path)">
<el-submenu
v-else
:popper-class="layout !== 'Top'
? 'nest-popper-menu'
: 'top-popper-menu'"
:index="resolvePath(item.path)"
>
<template #title>
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template>
@ -18,11 +24,11 @@
:key="child.path"
:is-nest="true"
:item="child"
:layout="layout"
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-submenu>
</div>
</template>
</template>
<script lang="ts">
@ -47,6 +53,10 @@ export default defineComponent({
basePath: {
type: String as PropType<string>,
default: ''
},
layout: {
type: String as PropType<string>,
default: 'Classic'
}
},
setup(props) {

View File

@ -1,17 +1,21 @@
<template>
<div :class="{'has-logo': showLogo}" class="sidebar-container">
<div
:class="{'has-logo': showLogo && layout === 'Classic', 'sidebar-container--Top': layout === 'Top'}"
class="sidebar-container"
>
<el-scrollbar>
<el-menu
:default-active="activeMenu"
:collapse="collapsed"
:unique-opened="false"
mode="vertical"
:mode="mode"
@select="selectMenu"
>
<sider-item
v-for="route in routers"
:key="route.path"
:item="route"
:layout="layout"
:base-path="route.path"
/>
</el-menu>
@ -20,17 +24,28 @@
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { defineComponent, computed, PropType } from 'vue'
import { useRouter } from 'vue-router'
import { permissionStore } from '_p/index/store/modules/permission'
import { appStore } from '_p/index/store/modules/app'
import type { RouteRecordRaw, RouteLocationNormalizedLoaded } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import SiderItem from './SiderItem.vue'
import variables from '@/styles/variables.less'
import { isExternal } from '@/utils/validate'
export default defineComponent({
name: 'Sider',
components: { SiderItem },
props: {
layout: {
type: String as PropType<string>,
default: 'Classic'
},
mode: {
type: String as PropType<'horizontal' | 'vertical'>,
default: 'vertical'
}
},
setup() {
const { currentRoute, push } = useRouter()
const routers = computed((): RouteRecordRaw[] => {
@ -73,19 +88,38 @@ export default defineComponent({
@{deep}(.svg-icon) {
margin-right: 16px;
}
@{deep}(.el-scrollbar) {
width: 100%;
height: 100%;
.el-scrollbar__wrap {
overflow: scroll;
overflow-x: hidden;
.el-menu {
width: 100%;
border: none;
}
}
}
}
.has-logo {
height: calc(~"100% - @{topSilderHeight}");
height: calc(~"100% - @{topSiderHeight}");
}
@{deep}(.el-scrollbar) {
width: 100%;
height: 100%;
.el-scrollbar__wrap {
overflow: scroll;
overflow-x: hidden;
.el-menu {
width: 100%;
border: none;
.sidebar-container--Top {
@{deep}(.el-scrollbar) {
width: 100%;
height: 100%;
.el-scrollbar__wrap {
overflow: scroll;
overflow-x: hidden;
.el-scrollbar__view {
height: @topSiderHeight;
}
.el-menu {
width: auto;
height: 100%;
border: none;
}
}
}
}

View File

@ -158,7 +158,7 @@ export default defineComponent({
})
}
async function closeAllTags(view: RouteLocationNormalizedLoaded) {
async function closeAllTags() {
const views: any = await tagsViewStore.delAllViews()
// console.log(affixTags.value.some(tag => tag.path === view.path))
// if (affixTags.value.some(tag => tag.path === view.path)) {
@ -300,9 +300,9 @@ export default defineComponent({
margin-right: 23px;
}
&.active {
background-color: #304156;
background-color: @tagActiveBg;
color: #fff;
border-color: #304156;
border-color: @tagActiveBg;
&::before {
content: '';
background: #fff;
@ -322,9 +322,7 @@ export default defineComponent({
line-height: 16px;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
margin-left: 5px;
&:before {
transform: scale(.6);
display: inline-block;
}
&:hover {

View File

@ -1,12 +1,39 @@
<template>
<div :class="classObj" class="app__wrap">
<div class="sidebar__wrap" :class="{'sidebar__wrap--collapsed': collapsed}">
<!-- Classic -->
<div
v-if="layout === 'Classic' || layout === 'LeftTop'"
class="sidebar__wrap"
:class="{'sidebar__wrap--collapsed': collapsed}"
>
<logo
v-if="showLogo"
v-if="showLogo && layout === 'Classic'"
:collapsed="collapsed"
/>
<sider />
<sider :layout="layout" mode="vertical" />
</div>
<!-- Classic -->
<!-- Top -->
<div v-if="layout !== 'Classic'" class="sidebar__wrap--Top">
<div>
<logo
v-if="showLogo"
:collapsed="collapsed"
/>
</div>
<div v-if="layout === 'Top'" class="sidebar__item--Top">
<sider :layout="layout" mode="horizontal" />
</div>
<div>
<div v-if="showScreenfull || showUserInfo" class="navbar__wrap--right">
<screenfull v-if="showScreenfull" class="hover-container screenfull-container" />
<user-info v-if="showUserInfo" class="hover-container user-container" />
</div>
</div>
</div>
<!-- Top -->
<div
class="main__wrap"
:class="{
@ -29,7 +56,7 @@
}"
>
<div
v-if="showNavbar"
v-if="showNavbar && layout !== 'Top'"
class="navbar__wrap"
>
<hamburger
@ -102,6 +129,7 @@ export default defineComponent({
},
setup() {
const drawer = ref<boolean>(false)
const layout = computed(() => appStore.layout)
const collapsed = computed(() => appStore.collapsed)
const showLogo = computed(() => appStore.showLogo)
const showTags = computed(() => appStore.showTags)
@ -116,7 +144,7 @@ export default defineComponent({
const classObj = computed(() => {
const obj = {}
obj[`app__wrap--${appStore.layout}`] = true
obj[`app__wrap--${layout.value}`] = true
return obj
})
@ -131,6 +159,7 @@ export default defineComponent({
return {
drawer,
classObj,
layout,
collapsed,
showLogo,
showTags,
@ -199,6 +228,7 @@ export default defineComponent({
height: 100%;
line-height: @navbarHeight + 5px;
padding: 0 5px;
text-align: center;
&:hover {
background: #f6f6f6;
}
@ -260,6 +290,87 @@ export default defineComponent({
}
}
//
.app__wrap--Top,
.app__wrap--LeftTop {
.sidebar__wrap--Top {
height: @topSiderHeight;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
background-color: @topMenuBg;
position: relative;
&:after {
content: "";
width: 100%;
height: 1px;
border-top: 1px solid #d8dce5;
position: absolute;
bottom: 0;
left: 0;
}
.sidebar__item--Top(2) {
flex: 1;
margin: 0 50px;
}
.navbar__wrap--right {
display: flex;
align-items: center;
height: @topSiderHeight;
@{deep}(.hover-container) {
transition: background 0.2s;
height: 100%;
line-height: @topSiderHeight;
padding: 0 5px;
text-align: center;
&:hover {
background: #f6f6f6;
}
}
}
}
.header__wrap--fixed {
position: fixed !important;
width: 100% !important;
top: @topSiderHeight !important;
left: 0 !important;
z-index: 200;
}
.main__wrap {
width: 100%;
left: 0;
height: calc(~"100% - @{topSiderHeight}");
top: @topSiderHeight;
}
.main__wrap--fixed--all,
.main__wrap--fixed--tags {
margin-top: @navbarHeight !important;
height: calc(~"100% - @{navbarHeight}") !important;
}
}
.app__wrap--LeftTop {
.sidebar__wrap {
top: @topSiderHeight;
left: 0;
height: calc(~"100% - @{topSiderHeight}");
}
.header__wrap {
}
.main__wrap {
width: calc(~"100% - @{menuWidth}");
left: @menuWidth;
height: calc(~"100% - @{topSiderHeight}");
top: @topSiderHeight;
}
.main__wrap--collapsed {
width: calc(~"100% - @{menuMinWidth}");
left: @menuMinWidth;
}
}
//
.setting__wrap {
position: fixed;

View File

@ -2,18 +2,19 @@ import store from '../index'
import { VuexModule, getModule, Module, Mutation, Action } from 'vuex-module-decorators'
export interface AppState {
collapsed: boolean
showTags: boolean
showLogo: boolean
showNavbar: boolean
fixedHeader: boolean
// fixedTags: boolean
// fixedNavbar: boolean
layout: string
showBreadcrumb: boolean
showHamburger: boolean
showScreenfull: boolean
showUserInfo: boolean
collapsed: Boolean
showTags: Boolean
showLogo: Boolean
showNavbar: Boolean
fixedHeader: Boolean
// fixedTags: Boolean
// fixedNavbar: Boolean
layout: String
showBreadcrumb: Boolean
showHamburger: Boolean
showScreenfull: Boolean
showUserInfo: Boolean
title: String
}
@Module({ dynamic: true, namespaced: true, store, name: 'app' })
@ -30,6 +31,7 @@ class App extends VuexModule implements AppState {
public showHamburger = true // 是否显示侧边栏缩收按钮
public showScreenfull = true // 是否全屏按钮
public showUserInfo = true // 是否显示用户头像
public title = 'vue-antdv-admin' // 标题
@Mutation
private SET_COLLAPSED(collapsed: boolean): void {
@ -79,6 +81,10 @@ class App extends VuexModule implements AppState {
private SET_USERINFO(showUserInfo: boolean): void {
this.showUserInfo = showUserInfo
}
@Mutation
private SET_TITLE(title: string): void {
this.title = title
}
@Action
public SetCollapsed(collapsed: boolean): void {
@ -128,6 +134,10 @@ class App extends VuexModule implements AppState {
public SetUserInfo(showUserInfo: boolean): void {
this.SET_USERINFO(showUserInfo)
}
@Action
public SetTitle(title: string): void {
this.SET_TITLE(title)
}
}
export const appStore = getModule<App>(App)

View File

@ -1,4 +1,5 @@
.app__wrap--Classic {
.app__wrap--Classic,
.app__wrap--LeftTop {
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
}
@ -14,6 +15,26 @@
color: @menuText !important;
}
}
.is-opened {
.el-menu-item,
.el-submenu {
background-color: @subMenuBg !important;
}
.is-active {
color: @menuActiveText !important;
background-color: @subMenuHover !important;
&>.el-submenu__title {
color: @menuActiveText !important;
}
}
.is-opened,
.el-menu {
background-color: @subMenuBg !important;
.el-submenu__title {
background-color: @subMenuBg !important;
}
}
}
.is-active {
color: @menuActiveText !important;
@ -22,11 +43,6 @@
color: @menuActiveText !important;
}
}
.is-opened {
.el-menu-item {
background-color: @subMenuBg !important;
}
}
.nest-menu {
background-color: @subMenuBg !important;
@ -47,7 +63,7 @@
}
.el-menu-item:hover {
color: @subMenuActiveText !important;
background-color: @subMenuHover !important;
// background-color: @subMenuHover !important;
}
}
.el-menu--collapse {
@ -106,3 +122,91 @@
}
}
}
.app__wrap--Top {
.sidebar-container {
background: @topMenuBg;
.el-menu {
background-color: @topMenuBg !important;
.el-menu-item,
.el-submenu__title {
color: @topMenuText !important;
background-color: @topMenuBg !important;
i {
color: @topMenuText !important;
}
}
.is-active {
color: @topMenuActiveText !important;
&>.el-submenu__title {
color: @topMenuActiveText !important;
}
}
.is-opened {
.el-menu-item {
background-color: @subMenuBg !important;
}
}
.nest-menu {
background-color: @subMenuBg !important;
.el-submenu>.el-submenu__title {
background-color: @subMenuBg !important;
}
.is-active {
background-color: @subMenuHover !important;
}
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
color: @topSMenuActiveText !important;
}
}
.el-menu-item:hover {
color: @topMenuActiveText !important;
}
}
}
}
.top-popper-menu {
background: @topMenuBg;
.el-menu {
background-color: @topMenuBg !important;
.el-menu-item,
.el-submenu__title {
color: @topMenuText !important;
background-color: @topMenuBg !important;
}
.is-active {
color: @topMenuActiveText !important;
// background-color: @subMenuHover !important;
&>.el-submenu__title {
color: @topMenuActiveText !important;
}
}
.nest-menu {
.is-active {
// background-color: @subMenuHover !important;
}
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: @topMenuBg !important;
color: @topSMenuHover !important;
}
}
.el-menu-item:hover {
color: @topSMenuHover !important;
// background-color: @subMenuHover !important;
}
}
}

View File

@ -12,14 +12,25 @@
@menuWidth: 200px;
@menuMinWidth: 64px;
// topSilder
@topSilderHeight: 50px;
// topSider
@topSiderHeight: 60px; // 最低60pxelement的最小高度。
@topMenuText: #303133;
@topMenuActiveText: #2d8cf0;
@topMenuActiveBg: #fff;
@topMenuBg: #fff;
@topSubMenuBg: #1f2d3d;
@topSMenuHover: #2d8cf0;
@topSMenuActiveText: #2d8cf0;
// navbar
@navbarHeight: 40px;
// tagsView
@tagsViewHeight: 40px;
@tagActiveBg: #304156;
// content
@contentBg: #fff;