优化PageLayout布局、PageHeader增加logo

src/components/dashboard/WorkPlace.vue

@@ -1,13 +1,8 @@
 <template>
-  <page-layout>
+  <page-layout :avatar="currUser.avatar">
-    <div slot="desc" class="desc">
+    <div slot="headerContent" class="content">
-      <div class="avatar">
+      <div class="title">{{currUser.timefix}}，{{currUser.name}}，{{currUser.welcome}}</div>
-        <a-avatar size="large" shape="circle" :src="currUser.avatar" />
+      <div>{{currUser.position}}</div>
-      </div>
-      <div class="content">
-        <div class="title">{{currUser.timefix}}，{{currUser.name}}，{{currUser.welcome}}</div>
-        <div>{{currUser.position}}</div>
-      </div>
     </div>
     <div slot="extra">
       <a-row>
@@ -25,22 +20,24 @@
     <div>
       <a-row style="margin: 0 -12px">
         <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
-          <a-card style="margin-bottom: 24px;" :bordered="false" title="进行中的项目" :body-style="{padding: 0}">
+          <a-card :loading="loading" style="margin-bottom: 24px;" :bordered="false" title="进行中的项目" :body-style="{padding: 0}">
             <a slot="extra">全部项目</a>
-            <a-card-grid :key="i" v-for="(item, i) in projects">
+            <div>
-              <a-card :bordered="false" :body-style="{padding: 0}">
+              <a-card-grid :key="i" v-for="(item, i) in projects">
-                <a-card-meta :description="item.desc">
+                <a-card :bordered="false" :body-style="{padding: 0}">
-                  <div slot="title" class="card-title">
+                  <a-card-meta :description="item.desc">
-                    <a-avatar size="small" :src="item.logo" />
+                    <div slot="title" class="card-title">
-                    <a>Alipay</a>
+                      <a-avatar size="small" :src="item.logo" />
+                      <a>Alipay</a>
+                    </div>
+                  </a-card-meta>
+                  <div class="project-item">
+                    <a href="/#/">科学搬砖组</a>
+                    <span class="datetime">9小时前</span>
                   </div>
-                </a-card-meta>
+                </a-card>
-                <div class="project-item">
+              </a-card-grid>
-                  <a href="/#/">科学搬砖组</a>
+            </div>
-                  <span class="datetime">9小时前</span>
-                </div>
-              </a-card>
-            </a-card-grid>
           </a-card>
           <a-card title="动态" :bordered="false">
             <a-list>
@@ -52,7 +49,6 @@
                   </div>
                   <div slot="description">9小时前</div>
                 </a-list-item-meta>
-
               </a-list-item>
             </a-list>
           </a-card>
@@ -129,7 +125,8 @@ export default {
   data () {
     return {
       currUser: {},
-      projects: []
+      projects: [],
+      loading: true
     }
   },
   mounted () {
@@ -151,6 +148,7 @@ export default {
         url: '/project'
       }).then(res => {
         this.projects = res.data
+        this.loading = false
       })
     }
   }
@@ -158,30 +156,18 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .desc{
+  .content {
-    display: flex;
+    position: relative;
-    .avatar {
+    top: 4px;
-      flex: 0 1 72px;
+    flex: 1 1 auto;
-      margin-bottom: 8px;
+    color: rgba(0, 0, 0, 0.45);
-      & > span {
+    line-height: 22px;
-        border-radius: 72px;
+    margin-left: 24px;
-        display: block;
+    .title {
-        width: 72px;
+      font-size: 20px;
-        height: 72px;
+      line-height: 28px;
-      }
+      font-weight: 500;
-    }
+      margin-bottom: 12px;
-    .content {
-      position: relative;
-      top: 4px;
-      flex: 1 1 auto;
-      color: rgba(0, 0, 0, 0.45);
-      line-height: 22px;
-      .title {
-        font-size: 20px;
-        line-height: 28px;
-        font-weight: 500;
-        margin-bottom: 12px;
-      }
     }
   }
   .card-title {

src/components/layout/PageLayout.vue

@@ -1,17 +1,16 @@
 <template>
   <div style="margin: -24px -24px 0px">
-    <page-header :breadcrumb="breadcrumb" :title="title">
+    <page-header :breadcrumb="breadcrumb" :title="title" :logo="avatar">
-      <div slot="content">
+      <slot slot="content" name="headerContent"></slot>
-        <template v-if="this.$slots.desc">
+      <div slot="content" v-if="!this.$slots.headerContent">
-          <slot name="desc"></slot>
+        <p style="font-size: 14px;line-height: 1.5;color: rgba(0,0,0,.65)">{{desc}}</p>
-        </template>
+        <div class="link">
-        <template v-else>
+          <template  v-for="(link, index) in linkList">
-          {{desc}}
+            <a :key="index" :href="link.href"><a-icon :type="link.icon" />{{link.title}}</a>
-        </template>
+          </template>
-      </div>
+        </div>
-      <div slot="extra">
-        <slot name="extra"></slot>
       </div>
+      <slot slot="extra" name="extra"></slot>
     </page-header>
     <div ref="page" style="margin: 24px 24px 0px">
       <slot ></slot>
@@ -21,10 +20,11 @@
 
 <script>
 import PageHeader from '../page/PageHeader'
+import AIcon from 'vue-antd-ui/es/icon/icon'
 export default {
   name: 'PageLayout',
-  components: {PageHeader},
+  components: {AIcon, PageHeader},
-  props: ['desc', 'title'],
+  props: ['desc', 'title', 'avatar', 'linkList', 'extraImage'],
   data () {
     return {
       breadcrumb: []
@@ -33,7 +33,7 @@ export default {
   mounted () {
     this.getBreadcrumb()
   },
-  beforeUpdate () {
+  updated () {
     this.getBreadcrumb()
   },
   methods: {
@@ -44,6 +44,18 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+  .link{
+    margin-top: 16px;
+    line-height: 24px;
+    a{
+      font-size: 14px;
+      margin-right: 32px;
+      i{
+        font-size: 22px;
+        margin-right: 8px;
+      }
+    }
+  }
 
 </style>

src/components/layout/PageView.vue

@@ -1,5 +1,8 @@
 <template>
-  <page-layout :desc="desc">
+  <page-layout :desc="desc" :title="title" :linkList="linkList">
+    <div slot="extra" class="extraImg">
+      <img :src="extraImage"/>
+    </div>
     <router-view  ref="page"/>
   </page-layout>
 </template>
@@ -13,24 +16,36 @@ export default {
   data () {
     return {
       title: '',
-      desc: ''
+      desc: '',
+      linkList: [],
+      extraImage: ''
     }
   },
   mounted () {
     this.getPageHeaderInfo()
   },
-  beforeUpdate () {
+  updated () {
     this.getPageHeaderInfo()
   },
   methods: {
     getPageHeaderInfo () {
       this.title = this.$route.name
-      this.desc = this.$refs.page.desc
+      const page = this.$refs.page
+      this.desc = page.desc
+      this.linkList = page.linkList
+      this.extraImage = page.extraImage
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
-
+  .extraImg{
+    margin-top: -60px;
+    text-align: center;
+    width: 195px;
+    img{
+      width: 100%;
+    }
+  }
 </style>

src/components/list/CardList.vue

@@ -52,6 +52,13 @@ export default {
   components: {AIcon, AButton, AAvatar, ACardMeta, ACard, AListItem, AList},
   data () {
     return {
+      desc: '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。',
+      linkList: [
+        {icon: 'rocket', href: '/#/', title: '快速开始'},
+        {icon: 'info-circle-o', href: '/#/', title: '产品简介'},
+        {icon: 'file-text', href: '/#/', title: '产品文档'}
+      ],
+      extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
       dataSource
     }
   }

src/components/list/SearchLayout.vue

@@ -5,7 +5,7 @@
           <a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
         </div>
         <div style="padding: 0 24px">
-          <a-tabs tabBarStyle="margin: 0">
+          <a-tabs :tabBarStyle="{margin: 0}">
             <a-tab-pane tab="文章" key="1"></a-tab-pane>
             <a-tab-pane tab="应用" key="2"></a-tab-pane>
             <a-tab-pane tab="项目" key="3"></a-tab-pane>

src/components/page/PageHeader.vue

@@ -7,20 +7,30 @@
       </a-breadcrumb>
     </div>
     <div class="detail">
-      <h1 v-if="title" class="title">{{title}}</h1>
+      <div v-if="logo" class="logo"><a-avatar :src="logo" /></div>
-      <div class="content"><slot name="content"></slot></div>
+      <div class="main">
-      <div class="extra"><slot name="extra"></slot></div>
+        <div class="row">
+          <h1 v-if="title" class="title">{{title}}</h1>
+          <div class="action"><slot name="action"></slot></div>
+        </div>
+        <div class="row">
+          <div class="content"><slot name="content"></slot></div>
+          <div class="extra"><slot name="extra"></slot></div>
+        </div>
+      </div>
+
     </div>
   </div>
 </template>
 
 <script>
 import ABreadcrumb from 'vue-antd-ui/es/breadcrumb'
+import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
 
 const ABreadcrumbItem = ABreadcrumb.Item
 export default {
   name: 'PageHeader',
-  components: {ABreadcrumbItem, ABreadcrumb},
+  components: {AAvatar, ABreadcrumbItem, ABreadcrumb},
   props: {
     title: {
       type: String,
@@ -29,6 +39,10 @@ export default {
     breadcrumb: {
       type: Array,
       required: false
+    },
+    logo: {
+      type: String,
+      required: false
     }
   }
 }
@@ -44,21 +58,44 @@ export default {
     }
     .detail{
       display: flex;
-      .title{
+      .row {
-        font-size: 20px;
+        display: flex;
-        font-weight: 500;
+        width: 100%;
-        color: rgba(0,0,0,.85);
       }
-      .content{
+      .logo {
-        margin-bottom: 16px;
+        flex: 0 1 72px;
-        flex: auto;
+        margin-bottom: 8px;
+        & > span {
+          border-radius: 72px;
+          display: block;
+          width: 72px;
+          height: 72px;
+        }
       }
-      .extra
+      .main{
-      {
+        width: 100%;
         flex: 0 1 auto;
-        margin-left: 88px;
+        .title{
-        min-width: 450px;
+          flex: auto;
-        float: right;
+          font-size: 20px;
+          font-weight: 500;
+          color: rgba(0,0,0,.85);
+        }
+        .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;
+        }
       }
     }
   }

src/router/index.js

@@ -18,7 +18,6 @@ import CardList from '@/components/list/CardList'
 import SearchLayout from '@/components/list/SearchLayout'
 import ArticleList from '@/components/list/ArticleList'
 import WorkPlace from '@/components/dashboard/WorkPlace'
-import Radar from '@/components/chart/Radar'
 
 Vue.use(Router)
 
@@ -85,19 +84,19 @@ export default new Router({
         },
         {
           path: '/list/primary',
-          name: '标准表格',
+          name: '标准列表',
           component: StandardList,
           icon: 'none'
         },
         {
           path: '/list/card',
-          name: '卡片表格',
+          name: '卡片列表',
           component: CardList,
           icon: 'none'
         },
         {
           path: '/list/search',
-          name: '搜索表格',
+          name: '搜索列表',
           component: SearchLayout,
           icon: 'none',
           children: [