mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-05 19:41:37 +08:00
Merge pull request #112 from samulle/master
feat: add configuration for width of page content; ⭐
新增:增加页面内容宽度配置;
This commit is contained in:
commit
346c1b8a87
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-header">
|
<div :class="['page-header', layout == 'head' && pageWidth == 'fixed' ? layout : '']">
|
||||||
<div :class="['page-header-wide', layout]">
|
<div :class="['page-header-wide']">
|
||||||
<div class="breadcrumb">
|
<div class="breadcrumb">
|
||||||
<a-breadcrumb>
|
<a-breadcrumb>
|
||||||
<a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
|
<a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
|
||||||
@ -50,7 +50,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState('setting', ['layout', 'showPageTitle'])
|
...mapState('setting', ['layout', 'showPageTitle', 'pageWidth'])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,6 +1,10 @@
|
|||||||
.page-header{
|
.page-header{
|
||||||
background: @base-bg-color;
|
background: @base-bg-color;
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
|
&.head{
|
||||||
|
margin: auto;
|
||||||
|
max-width: 1400px;
|
||||||
|
}
|
||||||
.page-header-wide{
|
.page-header-wide{
|
||||||
&.head{
|
&.head{
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
@ -33,9 +33,9 @@
|
|||||||
<a-list :split="false">
|
<a-list :split="false">
|
||||||
<a-list-item>
|
<a-list-item>
|
||||||
{{$t('navigate.content.title')}}
|
{{$t('navigate.content.title')}}
|
||||||
<a-select :getPopupContainer="getPopupContainer" :dropdown-style="{zIndex: 2001}" size="small" defaultValue="1" slot="actions" style="width: 80px">
|
<a-select :getPopupContainer="getPopupContainer" :dropdown-style="{zIndex: 2001}" size="small" :defaultValue="pageWidth" @change="setPageWidth" slot="actions" style="width: 80px">
|
||||||
<a-select-option value="1">{{$t('navigate.content.fluid')}}</a-select-option>
|
<a-select-option value="fluid">{{$t('navigate.content.fluid')}}</a-select-option>
|
||||||
<a-select-option value="2">{{$t('navigate.content.fixed')}}</a-select-option>
|
<a-select-option value="fixed">{{$t('navigate.content.fixed')}}</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
<a-list-item>
|
<a-list-item>
|
||||||
@ -132,7 +132,7 @@ export default {
|
|||||||
directions() {
|
directions() {
|
||||||
return this.animates.find(item => item.name == this.animate.name).directions
|
return this.animates.find(item => item.name == this.animate.name).directions
|
||||||
},
|
},
|
||||||
...mapState('setting', ['theme', 'layout', 'animate', 'animates', 'palettes', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSideBar', 'hideSetting'])
|
...mapState('setting', ['theme', 'layout', 'animate', 'animates', 'palettes', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSideBar', 'hideSetting', 'pageWidth'])
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'animate.name': function(val) {
|
'animate.name': function(val) {
|
||||||
@ -166,7 +166,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
...mapMutations('setting', ['setTheme', 'setLayout', 'setMultiPage', 'setWeekMode',
|
...mapMutations('setting', ['setTheme', 'setLayout', 'setMultiPage', 'setWeekMode',
|
||||||
'setFixedSideBar', 'setFixedHeader', 'setAnimate', 'setHideSetting'])
|
'setFixedSideBar', 'setFixedHeader', 'setAnimate', 'setHideSetting', 'setPageWidth'])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
|
<slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
|
||||||
</page-header>
|
</page-header>
|
||||||
<div ref="page" :class="['page-content', layout]" >
|
<div ref="page" :class="['page-content', layout == 'head' ? (pageWidth == 'fixed' ? layout : '') : '']" >
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -60,7 +60,7 @@ export default {
|
|||||||
this.updatePageHeight(0)
|
this.updatePageHeight(0)
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState('setting', ['layout', 'multiPage', 'pageMinHeight']),
|
...mapState('setting', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth']),
|
||||||
pageTitle() {
|
pageTitle() {
|
||||||
let pageTitle = this.page && this.page.title
|
let pageTitle = this.page && this.page.title
|
||||||
return pageTitle === undefined ? (this.title || this.routeName) : this.$t(pageTitle)
|
return pageTitle === undefined ? (this.title || this.routeName) : this.$t(pageTitle)
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-layout-header :class="[headerTheme, 'admin-header']">
|
<a-layout-header :class="[headerTheme, 'admin-header']">
|
||||||
<div :class="['admin-header-wide', layout]">
|
<div :class="['admin-header-wide', layout == 'side' ? layout : (pageWidth == 'fixed' ? layout : '')]">
|
||||||
<router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
|
<router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
|
||||||
<img width="32" src="@/assets/img/logo.png" />
|
<img width="32" src="@/assets/img/logo.png" />
|
||||||
<h1 v-if="!isMobile">{{systemName}}</h1>
|
<h1 v-if="!isMobile">{{systemName}}</h1>
|
||||||
@ -54,7 +54,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang']),
|
...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
|
||||||
headerTheme () {
|
headerTheme () {
|
||||||
if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
|
if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
|
||||||
return 'light'
|
return 'light'
|
||||||
|
@ -20,9 +20,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.admin-header-wide{
|
.admin-header-wide{
|
||||||
|
padding-left: 24px;
|
||||||
&.head{
|
&.head{
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
&.side{
|
&.side{
|
||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
v-if="multiPage"
|
v-if="multiPage"
|
||||||
type="editable-card"
|
type="editable-card"
|
||||||
:active-key="activePage"
|
:active-key="activePage"
|
||||||
:style="`margin: -16px auto 8px; ${layout == 'head' ? 'max-width: 1400px;' : ''}`"
|
:style="`margin: -16px auto 8px; ${layout == 'head' && pageWidth == 'fixed' ? 'max-width: 1400px;' : ''}`"
|
||||||
:hide-add="true"
|
:hide-add="true"
|
||||||
@change="changePage"
|
@change="changePage"
|
||||||
@edit="editPage"
|
@edit="editPage"
|
||||||
@ -48,7 +48,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState('setting', ['multiPage', 'animate', 'layout']),
|
...mapState('setting', ['multiPage', 'animate', 'layout', 'pageWidth']),
|
||||||
menuItemList() {
|
menuItemList() {
|
||||||
return [
|
return [
|
||||||
{ key: '1', icon: 'vertical-right', text: this.$t('closeLeft') },
|
{ key: '1', icon: 'vertical-right', text: this.$t('closeLeft') },
|
||||||
|
@ -7,6 +7,7 @@ export default {
|
|||||||
namespaced: true,
|
namespaced: true,
|
||||||
state: {
|
state: {
|
||||||
isMobile: false,
|
isMobile: false,
|
||||||
|
pageWidth: 'fixed',
|
||||||
animates: ADMIN.animates,
|
animates: ADMIN.animates,
|
||||||
palettes: ADMIN.palettes,
|
palettes: ADMIN.palettes,
|
||||||
pageMinHeight: 0,
|
pageMinHeight: 0,
|
||||||
@ -82,6 +83,9 @@ export default {
|
|||||||
setAsyncRoutes(state, asyncRoutes) {
|
setAsyncRoutes(state, asyncRoutes) {
|
||||||
state.asyncRoutes = asyncRoutes
|
state.asyncRoutes = asyncRoutes
|
||||||
},
|
},
|
||||||
|
setPageWidth(state, pageWidth) {
|
||||||
|
state.pageWidth = pageWidth
|
||||||
|
},
|
||||||
setActivatedFirst(state, activatedFirst) {
|
setActivatedFirst(state, activatedFirst) {
|
||||||
state.activatedFirst = activatedFirst
|
state.activatedFirst = activatedFirst
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user