From 5bbe94728e048f01ff0b82228990ed313894b200 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Fri, 19 Jun 2020 17:43:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=8D=E5=88=86=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chart/Trend.vue                  |  1 -
 src/components/page/PageHeader.vue              |  2 +-
 src/components/setting/Setting.vue              |  6 +++++-
 .../transition/PageToggleTransition.vue         |  8 ++++----
 src/layouts/GlobalHeader.vue                    |  1 +
 src/layouts/GlobalLayout.vue                    | 17 ++---------------
 src/layouts/MenuView.vue                        |  4 ++--
 src/layouts/PageLayout.vue                      |  4 ++--
 src/pages/dashboard/Analysis.vue                | 14 +++++++-------
 src/pages/list/search/ApplicationList.vue       |  5 +++--
 src/pages/list/search/ProjectList.vue           |  3 ++-
 src/store/modules/setting.js                    |  6 +++++-
 12 files changed, 34 insertions(+), 37 deletions(-)

diff --git a/src/components/chart/Trend.vue b/src/components/chart/Trend.vue
index ca6482a..2274afd 100644
--- a/src/components/chart/Trend.vue
+++ b/src/components/chart/Trend.vue
@@ -66,7 +66,6 @@ export default {
   .chart-trend{
     display: inline-block;
     font-size: 14px;
-    line-height: 22px;
     .chart-trend-icon{
       font-size: 12px;
       &.up{
diff --git a/src/components/page/PageHeader.vue b/src/components/page/PageHeader.vue
index d583778..bb62215 100644
--- a/src/components/page/PageHeader.vue
+++ b/src/components/page/PageHeader.vue
@@ -104,7 +104,7 @@ export default {
             margin-right: 16px;
           }
           .content{
-            margin-bottom: 16px;
+            /*margin-bottom: 16px;*/
             flex: auto;
           }
           .extra{
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index dd20ba3..d0811bc 100644
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@@ -116,7 +116,11 @@ export default {
     onColorChange (values, colors) {
       if (colors.length > 0) {
         let closeMessage = this.$message.info(`您选择了主题色 ${colors}, 正在切换...`)
-        themeUtil.changeThemeColor(colors[0]).then(closeMessage)
+        let _this = this
+        themeUtil.changeThemeColor(colors[0]).then(() => {
+          _this.$store.commit('setting/setThemeColor', colors[0])
+          closeMessage()
+        })
       }
     },
     setTheme (values) {
diff --git a/src/components/transition/PageToggleTransition.vue b/src/components/transition/PageToggleTransition.vue
index feaa9fd..d8bc902 100644
--- a/src/components/transition/PageToggleTransition.vue
+++ b/src/components/transition/PageToggleTransition.vue
@@ -75,13 +75,13 @@
 <style lang="less">
   .page-toggle-enter-active{
     position: absolute !important;
-    animation-duration: 0.6s !important;
-    width: calc(100%);
+    animation-duration: 0.8s !important;
+    width: calc(100%) !important;
   }
   .page-toggle-leave-active{
     position: absolute !important;
-    animation-duration: 0.6s !important;
-    width: calc(100%);
+    animation-duration: 0.8s !important;
+    width: calc(100%) !important;
   }
   .page-toggle-enter{
   }
diff --git a/src/layouts/GlobalHeader.vue b/src/layouts/GlobalHeader.vue
index 795920f..796d724 100644
--- a/src/layouts/GlobalHeader.vue
+++ b/src/layouts/GlobalHeader.vue
@@ -85,6 +85,7 @@ export default {
     padding: 0 12px 0 0;
     -webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
     box-shadow: 0 1px 4px rgba(0,21,41,.08);
+    z-index: 99;
     position: relative;
     &.light{
       background: #fff;
diff --git a/src/layouts/GlobalLayout.vue b/src/layouts/GlobalLayout.vue
index 1b023d5..78eb406 100644
--- a/src/layouts/GlobalLayout.vue
+++ b/src/layouts/GlobalLayout.vue
@@ -30,6 +30,7 @@ import GlobalFooter from './GlobalFooter'
 import Drawer from '../components/tool/Drawer'
 import SiderMenu from '../components/menu/SiderMenu'
 import Setting from '../components/setting/Setting'
+import {mapState} from 'vuex'
 
 const minHeight = window.innerHeight - 64 - 24 - 122
 
@@ -52,21 +53,7 @@ export default {
     }
   },
   computed: {
-    isMobile () {
-      return this.$store.state.setting.isMobile
-    },
-    theme () {
-      return this.$store.state.setting.theme
-    },
-    layout () {
-      return this.$store.state.setting.layout
-    },
-    linkList () {
-      return this.$store.state.setting.footerLinks
-    },
-    copyright () {
-      return this.$store.state.setting.copyright
-    }
+    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright']),
   },
   methods: {
     toggleCollapse () {
diff --git a/src/layouts/MenuView.vue b/src/layouts/MenuView.vue
index 1e5c9ec..c2a2bef 100644
--- a/src/layouts/MenuView.vue
+++ b/src/layouts/MenuView.vue
@@ -5,7 +5,7 @@
         @contextmenu.native="e => onContextmenu(e)"
         v-if="multiPage"
         :active-key="activePage"
-        style="margin-top: -8px; margin-bottom: 8px"
+        :style="`margin: -16px auto 8px; ${layout == 'head' ? 'max-width: 1400px;' : ''}`"
         :hide-add="true"
         type="editable-card"
         @change="changePage"
@@ -48,7 +48,7 @@ export default {
     }
   },
   computed: {
-    ...mapState('setting', ['multiPage', 'animate'])
+    ...mapState('setting', ['multiPage', 'animate', 'layout'])
   },
   created () {
     this.pageList.push(this.$route)
diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
index df1c3ac..200b07f 100644
--- a/src/layouts/PageLayout.vue
+++ b/src/layouts/PageLayout.vue
@@ -5,7 +5,7 @@
       <slot slot="content" name="headerContent"></slot>
       <div slot="content" v-if="!this.$slots.headerContent && desc">
         <p style="font-size: 14px;line-height: 1.5;color: rgba(0,0,0,.65)">{{desc}}</p>
-        <div class="link">
+        <div v-if="this.linkList" class="link">
           <template  v-for="(link, index) in linkList">
             <a :key="index" :href="link.href"><a-icon :type="link.icon" />{{link.title}}</a>
           </template>
@@ -54,7 +54,7 @@ export default {
     margin: -24px -24px 0;
   }
   .link{
-    margin-top: 16px;
+    /*margin-top: 16px;*/
     line-height: 24px;
     a{
       font-size: 14px;
diff --git a/src/pages/dashboard/Analysis.vue b/src/pages/dashboard/Analysis.vue
index bd02476..24512fb 100644
--- a/src/pages/dashboard/Analysis.vue
+++ b/src/pages/dashboard/Analysis.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
-    <a-row style="margin: 0 -12px">
-      <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
+  <div class="analysis">
+    <a-row :gutter="24">
+      <a-col :sm="24" :md="12" :xl="6">
         <chart-card title="总销售额" total="￥ 189,345">
           <a-tooltip title="指标说明" slot="action">
             <a-icon type="info-circle-o" />
@@ -13,7 +13,7 @@
           <div slot="footer">日均销售额<span> ￥234.56</span></div>
         </chart-card>
       </a-col>
-      <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
+      <a-col :sm="24" :md="12" :xl="6">
         <chart-card title="总销售额" total="￥ 189,345">
           <a-tooltip title="指标说明" slot="action">
             <a-icon type="info-circle-o" />
@@ -24,7 +24,7 @@
           <div slot="footer">日访问量<span> 123,4</span></div>
         </chart-card>
       </a-col>
-      <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
+      <a-col :sm="24" :md="12" :xl="6">
         <chart-card title="总销售额" total="￥ 189,345">
           <a-tooltip title="指标说明" slot="action">
             <a-icon type="info-circle-o" />
@@ -35,7 +35,7 @@
           <div slot="footer">转化率 <span>60%</span></div>
         </chart-card>
       </a-col>
-      <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
+      <a-col :sm="24" :md="12" :xl="6">
         <chart-card title="运营活动效果" total="73%">
           <a-tooltip title="指标说明" slot="action">
             <a-icon type="info-circle-o" />
@@ -50,7 +50,7 @@
         </chart-card>
       </a-col>
     </a-row>
-    <a-card :bordered="false" :body-style="{padding: '24px'}">
+    <a-card style="margin-top: 24px" :bordered="false" :body-style="{padding: '24px'}">
       <div class="salesCard">
         <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
           <div class="extra-wrap" slot="tabBarExtraContent">
diff --git a/src/pages/list/search/ApplicationList.vue b/src/pages/list/search/ApplicationList.vue
index 9bde7ed..3fbf290 100644
--- a/src/pages/list/search/ApplicationList.vue
+++ b/src/pages/list/search/ApplicationList.vue
@@ -2,9 +2,10 @@
   <div>
     <search-form />
     <a-list
-      :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }"
+      :grid="{gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1}"
+      style="margin: 0 -8px"
     >
-      <a-list-item style="padding: 0 12px" :key="n" v-for="n in 12">
+      <a-list-item :key="n" v-for="n in 12" style="padding: 0 8px">
         <a-card>
           <a-card-meta title="Angular">
             <a-avatar slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" size="small" />
diff --git a/src/pages/list/search/ProjectList.vue b/src/pages/list/search/ProjectList.vue
index 080dff2..1e34262 100644
--- a/src/pages/list/search/ProjectList.vue
+++ b/src/pages/list/search/ProjectList.vue
@@ -3,8 +3,9 @@
     <search-form />
     <a-list
       :grid='{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }'
+      style="margin: 0 -8px"
     >
-      <a-list-item :key="n" v-for="n in 8" style="padding: 0 12px">
+      <a-list-item :key="n" v-for="n in 8" style="padding: 0 8px">
         <a-card>
           <img slot="cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png" height="154"/>
           <a-card-meta title="Ant Design">
diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js
index a433e37..0d27d7c 100644
--- a/src/store/modules/setting.js
+++ b/src/store/modules/setting.js
@@ -1,9 +1,10 @@
-import {footerLinks, animates} from '@/config'
+import {footerLinks, animates, themeColor} from '@/config'
 export default {
   namespaced: true,
   state: {
     isMobile: false,
     theme: 'dark',
+    themeColor,
     layout: 'side',
     systemName: 'Vue Antd Admin',
     copyright: '2018 ICZER 工作室出品',
@@ -30,6 +31,9 @@ export default {
     },
     setAnimate (state, animate) {
       state.animate = animate
+    },
+    setThemeColor (state, color) {
+      state.themeColor = color
     }
   }
 }