优化page布局；

新增工作台Workplace；
更新vue-antd-ui版本：1.0.1；

package.json

@@ -18,7 +18,7 @@
     "moment": "^2.22.2",
     "viser-vue": "^2.2.5",
     "vue": "^2.5.2",
-    "vue-antd-ui": "^1.0.0",
+    "vue-antd-ui": "^1.0.1",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

src/components/dashboard/WorkPlace.vue

@@ -0,0 +1,212 @@
+<template>
+  <page-layout>
+    <div slot="desc" class="desc">
+      <div class="avatar">
+        <a-avatar size="large" shape="circle" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+      </div>
+      <div class="content">
+        <div class="title">早安，ICZER，祝你开心每一天！</div>
+        <div>交互专家 | 蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</div>
+      </div>
+    </div>
+    <div slot="extra">
+      <a-row>
+        <a-col :sm="8" :xs="24">
+          <head-info title="项目数" content="56" :bordered="true"/>
+        </a-col>
+        <a-col :sm="8" :xs="24">
+          <head-info title="团队内排名" content="8/24" :bordered="true"/>
+        </a-col>
+        <a-col :sm="8" :xs="24">
+          <head-info title="项目访问" content="2,223"/>
+        </a-col>
+      </a-row>
+    </div>
+    <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 slot="extra">全部项目</a>
+            <a-card-grid :key="n" v-for="n in 6">
+              <a-card :bordered="false" :body-style="{padding: 0}">
+                <a-card-meta description="那是一种内在的东西，他们到达不了，也无法触及的">
+                  <div slot="title" class="card-title">
+                    <a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" />
+                    <a>Alipay</a>
+                  </div>
+                </a-card-meta>
+                <div class="project-item">
+                  <a href="/#/">科学搬砖组</a>
+                  <span class="datetime">9小时前</span>
+                </div>
+              </a-card>
+            </a-card-grid>
+          </a-card>
+          <a-card title="动态" :bordered="false">
+            <a-list>
+              <a-list-item :key="n" v-for="n in 6">
+                <a-list-item-meta>
+                  <a-avatar slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+                  <div slot="title">
+                    曲丽丽 在 <a>高逼格设计天团</a> 新建项目 <a>六月迭代</a>
+                  </div>
+                  <div slot="description">9小时前</div>
+                </a-list-item-meta>
+
+              </a-list-item>
+            </a-list>
+          </a-card>
+        </a-col>
+        <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
+          <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
+            <div class="item-group">
+              <a>操作一</a>
+              <a>操作二</a>
+              <a>操作三</a>
+              <a>操作四</a>
+              <a>操作五</a>
+              <a>操作六</a>
+              <a-button size="small" type="primary" ghost icon="plus">添加</a-button>
+            </div>
+          </a-card>
+          <a-card title="XX指数" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
+            <div style="min-height: 400px;"></div>
+          </a-card>
+          <a-card title="团队" :bordered="false">
+            <a-row>
+              <a-col :span="12" v-for="n in 5" :key="n">
+                <a class="member">
+                  <a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+                  <span>程序员日常</span>
+                </a>
+              </a-col>
+            </a-row>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </page-layout>
+</template>
+
+<script>
+import PageHeader from '../page/PageHeader'
+import PageLayout from '../layout/PageLayout'
+import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
+import HeadInfo from '../tool/HeadInfo'
+import ARow from 'vue-antd-ui/es/grid/Row'
+import ACol from 'vue-antd-ui/es/grid/Col'
+import ACard from 'vue-antd-ui/es/card/Card'
+import ACardGrid from 'vue-antd-ui/es/card/Grid'
+import ACardMeta from 'vue-antd-ui/es/card/Meta'
+import AList from 'vue-antd-ui/es/list/index'
+import AListItem from 'vue-antd-ui/es/list/Item'
+import AButton from 'vue-antd-ui/es/button/button'
+import AIcon from 'vue-antd-ui/es/icon/icon'
+
+const AListItemMeta = AListItem.Meta
+
+export default {
+  name: 'WorkPlace',
+  components: {
+    AIcon,
+    AButton,
+    AListItemMeta,
+    AListItem,
+    AList,
+    ACardMeta,
+    ACardGrid,
+    ACard,
+    ACol,
+    ARow,
+    HeadInfo,
+    AAvatar,
+    PageLayout,
+    PageHeader}
+}
+</script>
+
+<style lang="less" scoped>
+  .desc{
+    display: flex;
+    .avatar {
+      flex: 0 1 72px;
+      margin-bottom: 8px;
+      & > span {
+        border-radius: 72px;
+        display: block;
+        width: 72px;
+        height: 72px;
+      }
+    }
+    .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 {
+    font-size: 0;
+    a {
+      color: rgba(0, 0, 0, 0.85);
+      margin-left: 12px;
+      line-height: 24px;
+      height: 24px;
+      display: inline-block;
+      vertical-align: top;
+      font-size: 14px;
+      &:hover {
+        color: #1890ff;
+      }
+    }
+  }
+  .project-item {
+    display: flex;
+    margin-top: 8px;
+    overflow: hidden;
+    font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+    a {
+      color: rgba(0, 0, 0, 0.45);
+      display: inline-block;
+      flex: 1 1 0;
+      &:hover {
+        color: #1890ff;
+      }
+    }
+    .datetime {
+      color: rgba(0, 0, 0, 0.25);
+      flex: 0 0 auto;
+      float: right;
+    }
+  }
+  .item-group{
+    padding: 20px 0 8px 24px;
+    font-size: 0;
+    a{
+      color: rgba(0, 0, 0, 0.65);
+      display: inline-block;
+      font-size: 14px;
+      margin-bottom: 13px;
+      width: 25%;
+    }
+  }
+  .member{
+    display: block;
+    margin: 12px 0;
+    line-height: 24px;
+    height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+  }
+</style>

src/components/layout/PageLayout.vue

@@ -1,10 +1,20 @@
 <template>
   <div style="margin: -24px -24px 0px">
     <page-header :breadcrumb="breadcrumb" :title="title">
-      <div slot="content">{{desc}}</div>
+      <div slot="content">
+        <template v-if="this.$slots.desc">
+          <slot name="desc"></slot>
+        </template>
+        <template v-else>
+          {{desc}}
+        </template>
+      </div>
+      <div slot="extra">
+        <slot name="extra"></slot>
+      </div>
     </page-header>
-    <div style="margin: 24px 24px 0px">
+    <div ref="page" style="margin: 24px 24px 0px">
-      <router-view  ref="page"/>
+      <slot ></slot>
     </div>
   </div>
 </template>
@@ -14,24 +24,21 @@ import PageHeader from '../page/PageHeader'
 export default {
   name: 'PageLayout',
   components: {PageHeader},
+  props: ['desc', 'title'],
   data () {
     return {
-      title: '',
+      breadcrumb: []
-      breadcrumb: [],
-      desc: ''
     }
   },
   mounted () {
-    this.getPageHeaderInfo()
+    this.getBreadcrumb()
   },
   beforeUpdate () {
-    this.getPageHeaderInfo()
+    this.getBreadcrumb()
   },
   methods: {
-    getPageHeaderInfo () {
+    getBreadcrumb () {
-      this.title = this.$route.name
       this.breadcrumb = this.$route.matched
-      this.desc = this.$refs.page.desc
     }
   }
 }

src/components/layout/PageView.vue

@@ -0,0 +1,36 @@
+<template>
+  <page-layout :desc="desc">
+    <router-view  ref="page"/>
+  </page-layout>
+</template>
+
+<script>
+import PageHeader from '../page/PageHeader'
+import PageLayout from './PageLayout'
+export default {
+  name: 'PageView',
+  components: {PageLayout, PageHeader},
+  data () {
+    return {
+      title: '',
+      desc: ''
+    }
+  },
+  mounted () {
+    this.getPageHeaderInfo()
+  },
+  beforeUpdate () {
+    this.getPageHeaderInfo()
+  },
+  methods: {
+    getPageHeaderInfo () {
+      this.title = this.$route.name
+      this.desc = this.$refs.page.desc
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/layout/RouteView.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: 'RouterLayout'
+  name: 'RouteView'
 }
 </script>
 

src/components/list/CardList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div >
+  <div class="card-list">
     <a-list
       :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
       :dataSource="dataSource"
@@ -12,9 +12,10 @@
         </template>
         <template v-else>
           <a-card :hoverable="true">
-            <a-card-meta :title="item.title" :description="item.content">
+            <a-card-meta >
+              <div style="margin-bottom: 3px" slot="title">{{item.title}}</div>
               <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large" />
-              <div slot="description">{{item.content}}</div>
+              <div class="meta-content" slot="description">{{item.content}}</div>
             </a-card-meta>
             <ul class="ant-card-actions" slot="actions">
               <li><a >操作一</a></li>
@@ -37,15 +38,15 @@ import AButton from 'vue-antd-ui/es/button/button'
 import AIcon from 'vue-antd-ui/es/icon/icon'
 
 const dataSource = []
-
+dataSource.push(null)
-for (let i = 0; i < 11  ; i++) {
+for (let i = 0; i < 11; i++) {
   dataSource.push({
     title: 'Alipay',
     avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
     content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
   })
 }
-dataSource.push(null)
+
 export default {
   name: 'CardList',
   components: {AIcon, AButton, AAvatar, ACardMeta, ACard, AListItem, AList},
@@ -91,4 +92,14 @@ export default {
     width: 100%;
     height: 188px;
   }
+  .meta-content{
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    height: 64px;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
 </style>

src/components/page/PageHeader.vue

@@ -9,6 +9,7 @@
     <div class="detail">
       <h1 v-if="title" class="title">{{title}}</h1>
       <div class="content"><slot name="content"></slot></div>
+      <div class="extra"><slot name="extra"></slot></div>
     </div>
   </div>
 </template>
@@ -41,13 +42,24 @@ export default {
     .breadcrumb{
       margin-bottom: 16px;
     }
-    .title{
+    .detail{
-      font-size: 20px;
+      display: flex;
-      font-weight: 500;
+      .title{
-      color: rgba(0,0,0,.85);
+        font-size: 20px;
-    }
+        font-weight: 500;
-    .content{
+        color: rgba(0,0,0,.85);
-      margin-bottom: 16px;
+      }
+      .content{
+        margin-bottom: 16px;
+        flex: auto;
+      }
+      .extra
+      {
+        flex: 0 1 auto;
+        margin-left: 88px;
+        min-width: 450px;
+        float: right;
+      }
     }
   }
 </style>

src/components/tool/HeadInfo.vue

@@ -17,6 +17,7 @@ export default {
   .head-info{
     position: relative;
     text-align: center;
+    padding: 0 32px;
   span{
     color: rgba(0,0,0,.45);
     display: inline-block;

src/router/index.js

@@ -5,7 +5,8 @@ import Exception from '@/components/exception/Exception'
 import NotFound from '@/components/exception/404'
 import NotPermit from '@/components/exception/403'
 import ServerError from '@/components/exception/500'
-import PageLayout from '@/components/layout/PageLayout'
+import PageView from '@/components/layout/PageView'
+import RouteView from '@/components/layout/RouteView'
 import BasicForm from '@/components/form/BasicForm'
 import StepForm from '@/components/form/stepForm/StepForm'
 import AdvancedForm from '@/components/form/advancedForm/AdvancedForm'
@@ -16,21 +17,37 @@ import StandardList from '@/components/list/StandardList'
 import CardList from '@/components/list/CardList'
 import SearchLayout from '@/components/list/SearchLayout'
 import ArticleList from '@/components/list/ArticleList'
+import WorkPlace from '@/components/dashboard/WorkPlace'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
-      path: '/dashboard',
+      path: '/',
-      name: 'Dashboard',
+      name: 'dashboard',
-      component: Dashboard,
+      component: RouteView,
-      icon: 'dashboard'
+      icon: 'dashboard',
+      children: [
+        {
+          path: '/workplace',
+          name: '工作台',
+          component: WorkPlace,
+          alias: '/',
+          icon: 'none'
+        },
+        {
+          path: '/dashboard',
+          name: '分析页',
+          component: Dashboard,
+          icon: 'none'
+        }
+      ]
     },
     {
       path: '/form',
       name: '表单页',
-      component: PageLayout,
+      component: PageView,
       icon: 'form',
       children: [
         {
@@ -56,7 +73,7 @@ export default new Router({
     {
       path: '/list',
       name: '列表页',
-      component: PageLayout,
+      component: PageView,
       icon: 'table',
       children: [
         {
@@ -97,7 +114,7 @@ export default new Router({
       path: '/detail',
       name: '详情页',
       icon: 'profile',
-      component: PageLayout,
+      component: PageView,
       children: [
         {
           path: '/detail/basic',
@@ -117,7 +134,7 @@ export default new Router({
       path: '/result',
       name: '结果页',
       icon: 'check-circle-o',
-      component: PageLayout,
+      component: PageView,
       children: [
         {
           path: '/result/success',

yarn.lock

@@ -8027,9 +8027,9 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-vue-antd-ui@^1.0.0:
+vue-antd-ui@^1.0.1:
-  version "1.0.0"
+  version "1.0.1"
-  resolved "http://registry.npm.taobao.org/vue-antd-ui/download/vue-antd-ui-1.0.0.tgz#b7fd61c3b3c9f3334f313a34a28e58e5a0e3ff8d"
+  resolved "http://registry.npm.taobao.org/vue-antd-ui/download/vue-antd-ui-1.0.1.tgz#ac45c1121137b742a112cbfafa32444dc001d8b9"
   dependencies:
     add-dom-event-listener "^1.0.2"
     array-tree-filter "^2.1.0"