Fixed bug

Added CardList

src/components/layout/LayoutBaseView.vue

@@ -1,18 +1,18 @@
 <template>
   <layout-main>
-    <route-view/>
+    <page-view />
   </layout-main>
 </template>
 
 <script>
   import LayoutMain from './LayoutMain'
-  import RouteView from './RouteView'
+  import PageView from './PageView'
 
   export default {
     name: "GlobalView",
     components: {
       LayoutMain,
-      RouteView
+      PageView
     }
   }
 </script>

src/components/layout/PageHeader.vue

@@ -135,7 +135,9 @@
           line-height: 28px;
           font-weight: 500;
           color: rgba(0,0,0,.85);
-          margin-bottom: 12px;
+          margin-bottom: 16px;
+          flex: auto;
+
         }
         .logo {
           width: 28px;
@@ -160,6 +162,9 @@
           min-width: 266px;
           flex: 0 1 auto;
           text-align: right;
+          &:empty {
+            display: none;
+          }
         }
       }
     }

src/components/layout/PageLayout.vue

@@ -5,18 +5,18 @@
             <slot slot="action" name="action"></slot>
             <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>
+                <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p>
                 <div class="link">
                     <template  v-for="(link, index) in linkList">
                         <a :key="index" :href="link.href">
-                          <a-icon :type="link.icon" />{{ link.title }}
+                          <a-icon :type="link.icon" /><span>{{ link.title }}</span>
                         </a>
                     </template>
                 </div>
             </div>
             <slot slot="extra" name="extra"></slot>
         </page-header>
-        <div ref="content" class="content">
+        <div class="content">
             <slot></slot>
         </div>
     </div>
@@ -34,8 +34,31 @@
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
     .content {
         margin: 24px 24px 0;
+
+      .link {
+        margin-top: 16px;
+
+        a {
+          margin-right: 32px;
+          height: 24px;
+          line-height: 24px;
+          display: inline-block;
+
+          i {
+            font-size: 24px;
+            margin-right: 8px;
+            vertical-align: middle;
+          }
+          span {
+            height: 24px;
+            line-height: 24px;
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+      }
     }
 </style>

src/components/layout/PageView.vue

@@ -1,10 +1,10 @@
 <template>
-    <page-layout :desc="desc" :title="getTitle" :link-list="linkList">
+    <page-layout :desc="description" :title="getTitle" :link-list="linkList">
         <div slot="extra" class="extra-img">
             <img :src="extraImage"/>
         </div>
         <!-- keep-alive  -->
-        <route-view></route-view>
+        <route-view ref="content"></route-view>
     </page-layout>
 </template>
 
@@ -21,7 +21,7 @@
     data () {
       return {
         title: '',
-        desc: '',
+        description: '',
         linkList: [],
         extraImage: ''
       }
@@ -42,12 +42,11 @@
     methods: {
       getPageHeaderInfo () {
         // eslint-disable-next-line
-        console.log('route title:', this.$route.meta.title)
-
         this.title = this.$route.meta.title
-        const content = this.$refs.content
+        // 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
+        const content = this.$refs.content.$children[0]
         if (content) {
-          this.desc = content.desc
+          this.description = content.description
           this.linkList = content.linkList
           this.extraImage = content.extraImage
         }

src/router/index.js

@@ -47,7 +47,7 @@ export const asyncRouterMap = [
     path: '/dashboard',
     component: Layout,
     name: 'dashboard',
-    redirect: '/dashboard/analysis',
+    redirect: '/dashboard/workplace',
     meta: { title: '仪表盘', icon: 'dashboard' },
     children: [
       {
@@ -102,7 +102,6 @@ export const asyncRouterMap = [
     component: LayoutBase,
     name: 'list',
     redirect: '/list/query-list',
-    hidden: true,
     meta: { title: '列表页', icon: 'table' },
     children: [
       {
@@ -120,7 +119,7 @@ export const asyncRouterMap = [
       {
         path: '/list/card',
         name: 'CardList',
-        component: () => import('../views/list/TableList'),
+        component: () => import('../views/list/CardList'),
         meta: { title: '卡片列表' }
       },
       {

src/views/dashboard/Workplace.vue

@@ -47,8 +47,13 @@
               <a-list-item :key="index" v-for="(item, index) in activities">
                 <a-list-item-meta>
                   <a-avatar slot="avatar" :src="item.user.avatar" />
-                  <div slot="title" v-html="item.template" />
-                  <div slot="description">9小时前</div>
+                  <div slot="title">
+                    <span>{{ item.user.nickname }}</span>&nbsp;
+                    在&nbsp;<a href="#">{{ item.project.name }}</a>&nbsp;
+                    <span>{{ item.project.action }}</span>&nbsp;
+                    <a href="#">{{ item.project.event }}</a>
+                  </div>
+                  <div slot="description">{{ item.time }}</div>
                 </a-list-item-meta>
               </a-list-item>
             </a-list>
@@ -169,6 +174,8 @@
     },
     mounted() {
       this.getProjects()
+      this.getActivity()
+      this.getTeams()
       this.initRadar()
     },
     methods: {
@@ -180,6 +187,18 @@
             this.loading = false
           })
       },
+      getActivity() {
+        this.$http.get('/workplace/activity')
+          .then(res => {
+            this.activities = res.result
+          })
+      },
+      getTeams() {
+        this.$http.get('/workplace/teams')
+          .then(res => {
+            this.teams = res.result
+          })
+      },
       initRadar() {
         const dv = new DataSet.View().source(this.axisData)
 
@@ -190,8 +209,6 @@
           value: 'score'
         })
 
-        console.log('dv.rows', dv.rows)
-
         this.radarData = dv.rows
       }
     }

src/views/list/CardList.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="card-list" ref="content">
+    <a-list
+      :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
+      :dataSource="dataSource"
+    >
+      <a-list-item slot="renderItem" slot-scope="item, index">
+        <template v-if="item === null">
+          <a-button class="new-btn" type="dashed">
+            <a-icon type="plus"/>
+            新增产品
+          </a-button>
+        </template>
+        <template v-else>
+          <a-card :hoverable="true">
+            <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 class="meta-content" slot="description">{{item.content}}</div>
+            </a-card-meta>
+            <ul class="ant-card-actions" slot="actions">
+              <li><a>操作一</a></li>
+              <li><a>操作二</a></li>
+            </ul>
+          </a-card>
+        </template>
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+
+<script>
+
+  const dataSource = []
+  dataSource.push(null)
+  for (let i = 0; i < 11; i++) {
+    dataSource.push({
+      title: 'Alipay',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
+      content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
+    })
+  }
+
+
+  export default {
+    name: "CardList",
+    data () {
+      return {
+        description: '段落示意：蚂蚁金服务设计平台 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
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 48px;
+  }
+
+  .ant-card-actions {
+    background: #f7f9fa;
+    li {
+      float: left;
+      text-align: center;
+      margin: 12px 0;
+      color: rgba(0, 0, 0, 0.45);
+      width: 50%;
+
+      &:not(:last-child) {
+        border-right: 1px solid #e8e8e8;
+      }
+
+      a {
+        color: rgba(0, 0, 0, .45);
+        line-height: 22px;
+        display: inline-block;
+        width: 100%;
+        &:hover {
+          color: #1890ff;
+        }
+      }
+    }
+  }
+
+  .new-btn {
+    background-color: #fff;
+    border-radius: 2px;
+    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>