blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-06 04:00:06 +08:00
Code Issues Projects Releases Wiki Activity

feat: complete layout toggle function

Browse Source
This commit is contained in:
iczer 2018-08-30 11:57:21 +08:00 committed by chenghx
parent db881e57bf
commit 2adbdc8830
5 changed files with 182 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/layout/GlobalHeader.vue
View File

@ -1,22 +1,25 @@
<template> <template>
<a-layout-header :class="[backgroundColor, 'global-header']"> <a-layout-header :class="[theme, 'global-header']">
<router-link v-if="isMobile" to="/" class="logo"> <div :class="['global-header-wide', layout]">
<img width="32" src="static/img/vue-antd-logo.png" /> <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', theme]">
</router-link> <img width="32" src="static/img/vue-antd-logo.png" />
<a-divider v-if="isMobile" type="vertical" /> <h1 v-if="!isMobile">Vue Antd Admin</h1>
<a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/> </router-link>
<div v-if="layout === 'head'" class="global-header-menu"> <a-divider v-if="isMobile" type="vertical" />
<i-menu style="height: 64px; line-height: 64px;" :theme="theme" mode="horizontal" :menuData="menuData" @select="onSelect"/> <a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
</div> <div v-if="layout === 'head'" class="global-header-menu">
<div style="float: right"> <i-menu style="height: 64px; line-height: 64px;" :theme="theme" mode="horizontal" :menuData="menuData" @select="onSelect"/>
<header-search class="header-item" /> </div>
<a-tooltip class="header-item" title="帮助文档" placement="bottom" > <div :class="['global-header-right', theme]">
<a> <header-search class="header-item" />
<a-icon type="question-circle-o" /> <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
</a> <a>
</a-tooltip> <a-icon type="question-circle-o" />
<header-notice class="header-item"/> </a>
<header-avatar class="header-item"/> </a-tooltip>
<header-notice class="header-item"/>
<header-avatar class="header-item"/>
</div>
</div> </div>
</a-layout-header> </a-layout-header>
</template> </template>
@ -48,7 +51,7 @@ export default {
ALayout, ALayout,
ALayoutSider, ALayoutSider,
ALayoutHeader}, ALayoutHeader},
props: ['collapsed', 'menuData', 'theme'], props: ['collapsed', 'menuData'],
computed: { computed: {
isMobile () { isMobile () {
return this.$store.state.setting.isMobile return this.$store.state.setting.isMobile
@ -56,8 +59,8 @@ export default {
layout () { layout () {
return this.$store.state.setting.layout return this.$store.state.setting.layout
}, },
backgroundColor () { theme () {
return this.layout === 'side' ? 'light' : this.theme return this.layout === 'side' ? 'light' : this.$store.state.setting.theme
} }
}, },
methods: { methods: {
@ -78,12 +81,10 @@ export default {
padding: 0 24px; padding: 0 24px;
cursor: pointer; cursor: pointer;
transition: color .3s; transition: color .3s;
&:hover{
color: #1890ff;
}
} }
.trigger:hover {
color: #1890ff;
}
.header-item{ .header-item{
padding: 0 12px; padding: 0 12px;
display: inline-block; display: inline-block;
@ -104,23 +105,50 @@ export default {
background: #fff; background: #fff;
} }
&.dark{ &.dark{
background-color: #001529; background: #001529;
} }
.logo { .global-header-wide{
height: 64px; &.head{
line-height: 58px; max-width: 1200px;
vertical-align: top; margin: auto;
display: inline-block; }
padding: 0 12px 0 24px; &.side{
cursor: pointer; }
font-size: 20px; .logo {
img { height: 64px;
display: inline-block; line-height: 58px;
vertical-align: middle; vertical-align: top;
display: inline-block;
padding: 0 12px 0 24px;
cursor: pointer;
font-size: 20px;
&.pc{
padding: 0 12px 0 0;
}
img {
display: inline-block;
vertical-align: middle;
}
h1{
display: inline-block;
font-size: 16px;
}
&.dark h1{
color: #fff;
}
}
.global-header-menu{
display: inline-block;
}
.global-header-right{
float: right;
&.dark{
color: #fff;
i{
color: #fff;
}
}
} }
}
.global-header-menu{
display: inline-block;
} }
} }
</style> </style>

2
src/components/layout/GlobalLayout.vue
View File

@ -11,7 +11,7 @@
<setting /> <setting />
</drawer> </drawer>
<a-layout> <a-layout>
<global-header :menuData="menuData" :theme="theme" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/> <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
<a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}"> <a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
<slot></slot> <slot></slot>
</a-layout-content> </a-layout-content>

21
src/components/layout/HeaderNotice.vue
View File

@ -33,7 +33,7 @@
</template> </template>
<span @click="fetchNotice" class="header-notice"> <span @click="fetchNotice" class="header-notice">
<a-badge count="12"> <a-badge count="12">
<a-icon style="font-size: 16px; padding: 4px" type="bell" /> <a-icon :class="['header-notice-icon', theme]" type="bell" />
</a-badge> </a-badge>
</span> </span>
</a-popover> </a-popover>
@ -60,6 +60,11 @@ export default {
loadding: false loadding: false
} }
}, },
computed: {
theme () {
return this.$store.state.setting.layout === 'side' ? 'light' : this.$store.state.setting.theme
}
},
methods: { methods: {
fetchNotice () { fetchNotice () {
if (this.loadding) { if (this.loadding) {
@ -79,9 +84,17 @@ export default {
.header-notice{ .header-notice{
display: inline-block; display: inline-block;
transition: all 0.3s; transition: all 0.3s;
& :global{ span {
span { vertical-align: initial;
vertical-align: initial; }
.header-notice-icon{
font-size: 16px;
padding: 4px;
&.dark{
color: #fff;
}
&.light{
color: rgba(0,0,0,.65);
} }
} }
} }

17
src/components/layout/PageLayout.vue
View File

@ -13,7 +13,7 @@
</div> </div>
<slot slot="extra" name="extra"></slot> <slot slot="extra" name="extra"></slot>
</page-header> </page-header>
<div ref="page" style="margin: 24px 24px 0px"> <div ref="page" :class="['page-content', layout]" >
<slot ></slot> <slot ></slot>
</div> </div>
</div> </div>
@ -31,6 +31,11 @@ export default {
breadcrumb: [] breadcrumb: []
} }
}, },
computed: {
layout () {
return this.$store.state.setting.layout
}
},
mounted () { mounted () {
this.getBreadcrumb() this.getBreadcrumb()
}, },
@ -58,5 +63,13 @@ export default {
} }
} }
} }
.page-content{
&.side{
margin: 24px 24px 0px;
}
&.head{
margin: 24px auto 0;
max-width: 1200px;
}
}
</style> </style>

146
src/components/page/PageHeader.vue
View File

@ -1,27 +1,28 @@
<template> <template>
<div class="page-header"> <div class="page-header">
<div class="breadcrumb"> <div :class="['page-header-wide', layout]">
<a-breadcrumb> <div class="breadcrumb">
<a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb"> <a-breadcrumb>
<span v-if="index === 0"><a href="#/dashboard/workplace">{{item.name}}</a></span> <a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb">
<span v-else>{{item.name}}</span> <span v-if="index === 0"><a href="#/dashboard/workplace">{{item.name}}</a></span>
</a-breadcrumb-item> <span v-else>{{item.name}}</span>
</a-breadcrumb> </a-breadcrumb-item>
</div> </a-breadcrumb>
<div class="detail"> </div>
<div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div> <div class="detail">
<div class="main"> <div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
<div class="row"> <div class="main">
<img v-if="logo" :src="logo" class="logo" /> <div class="row">
<h1 v-if="title" class="title">{{title}}</h1> <img v-if="logo" :src="logo" class="logo" />
<div class="action"><slot name="action"></slot></div> <h1 v-if="title" class="title">{{title}}</h1>
</div> <div class="action"><slot name="action"></slot></div>
<div class="row"> </div>
<div v-if="this.$slots.content" class="content"><slot name="content"></slot></div> <div class="row">
<div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div> <div v-if="this.$slots.content" class="content"><slot name="content"></slot></div>
<div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -51,6 +52,11 @@ export default {
type: String, type: String,
required: false required: false
} }
},
computed: {
layout () {
return this.$store.state.setting.layout
}
} }
} }
</script> </script>
@ -60,56 +66,64 @@ export default {
background: #fff; background: #fff;
padding: 16px 32px 0; padding: 16px 32px 0;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
.breadcrumb{ .page-header-wide{
margin-bottom: 16px; &.head{
} margin: auto;
.detail{ max-width: 1200px;
display: flex; }
.row { &.side{
}
.breadcrumb{
margin-bottom: 16px;
}
.detail{
display: flex; display: flex;
width: 100%; .row {
} display: flex;
.avatar { width: 100%;
flex: 0 1 72px;
margin:0 24px 8px 0;
& > span {
border-radius: 72px;
display: block;
width: 72px;
height: 72px;
} }
} .avatar {
.main{ flex: 0 1 72px;
width: 100%; margin:0 24px 8px 0;
flex: 0 1 auto; & > span {
.title{ border-radius: 72px;
flex: auto; display: block;
font-size: 20px; width: 72px;
font-weight: 500; height: 72px;
color: rgba(0,0,0,.85); }
margin-bottom: 16px;
} }
.logo{ .main{
width: 28px; width: 100%;
height: 28px;
border-radius: 4px;
margin-right: 16px;
}
.content{
margin-bottom: 16px;
flex: auto;
}
.extra{
flex: 0 1 auto; flex: 0 1 auto;
margin-left: 88px; .title{
min-width: 242px; flex: auto;
text-align: right; font-size: 20px;
} font-weight: 500;
.action{ color: rgba(0,0,0,.85);
margin-left: 56px; margin-bottom: 16px;
min-width: 266px; }
flex: 0 1 auto; .logo{
text-align: right; width: 28px;
height: 28px;
border-radius: 4px;
margin-right: 16px;
}
.content{
margin-bottom: 16px;
flex: auto;
}
.extra{
flex: 0 1 auto;
margin-left: 88px;
min-width: 242px;
text-align: right;
}
.action{
margin-left: 56px;
min-width: 266px;
flex: 0 1 auto;
text-align: right;
}
} }
} }
} }