feat: add Mock Data for Workplace page

src/components/dashboard/WorkPlace.vue

@@ -39,14 +39,12 @@
               </a-card-grid>
             </div>
           </a-card>
-          <a-card title="动态" :bordered="false">
+          <a-card :loading="loading" title="动态" :bordered="false">
             <a-list>
-              <a-list-item :key="n" v-for="n in 6">
+              <a-list-item :key="index" v-for="(item, index) in activities">
                 <a-list-item-meta>
-                  <a-avatar slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+                  <a-avatar slot="avatar" :src="item.user.avatar" />
-                  <div slot="title">
+                  <div slot="title" v-html="item.template" />
-                    曲丽丽 在 <a>高逼格设计天团</a> 新建项目 <a>六月迭代</a>
-                  </div>
                   <div slot="description">9小时前</div>
                 </a-list-item-meta>
               </a-list-item>
@@ -70,15 +68,17 @@
               <radar />
             </div>
           </a-card>
-          <a-card title="团队" :bordered="false">
+          <a-card :loading="loading" title="团队" :bordered="false">
-            <a-row>
+            <div class="members">
-              <a-col :span="12" v-for="n in 5" :key="n">
+              <a-row>
-                <a class="member">
+                <a-col :span="12" v-for="(item, index) in teams" :key="index">
-                  <a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+                  <a>
-                  <span>程序员日常</span>
+                    <a-avatar size="small" :src="item.avatar" />
-                </a>
+                    <span class="member">{{item.name}}</span>
-              </a-col>
+                  </a>
-            </a-row>
+                </a-col>
+              </a-row>
+            </div>
           </a-card>
         </a-col>
       </a-row>
@@ -126,12 +126,16 @@ export default {
     return {
       currUser: {},
       projects: [],
-      loading: true
+      loading: true,
+      activities: [],
+      teams: []
     }
   },
   mounted () {
     this.currentUser()
     this.getProjectList()
+    this.getActivites()
+    this.getTeams()
   },
   methods: {
     currentUser () {
@@ -150,6 +154,22 @@ export default {
         this.projects = res.data
         this.loading = false
       })
+    },
+    getActivites () {
+      this.$axios({
+        method: 'get',
+        url: '/work/activity'
+      }).then(res => {
+        this.activities = res.data
+      })
+    },
+    getTeams () {
+      this.$axios({
+        method: 'get',
+        url: '/work/team'
+      }).then(res => {
+        this.teams = res.data
+      })
     }
   }
 }
@@ -217,14 +237,27 @@ export default {
       width: 25%;
     }
   }
-  .member{
+  .members {
-    display: block;
+    a {
-    margin: 12px 0;
+      display: block;
-    line-height: 24px;
+      margin: 12px 0;
-    height: 24px;
+      line-height: 24px;
-    overflow: hidden;
+      height: 24px;
-    text-overflow: ellipsis;
+      .member {
-    word-break: break-all;
+        font-size: 14px;
-    white-space: nowrap;
+        color: rgba(0,0,0,.65);
+        line-height: 24px;
+        max-width: 100px;
+        vertical-align: top;
+        margin-left: 12px;
+        transition: all 0.3s;
+        display: inline-block;
+      }
+      &:hover {
+        span {
+          color: #1890ff;
+        }
+      }
+    }
   }
 </style>

src/mock/common/activityData.js

@@ -0,0 +1,32 @@
+import {users, groups} from './index'
+
+const events = [
+  {
+    type: 0,
+    event: '八月迭代'
+  },
+  {
+    type: 1,
+    event: '留言'
+  },
+  {
+    type: 2,
+    event: '项目进展'
+  }
+]
+
+const activities = users.map((user, index) => {
+  return {
+    user: Object.assign({}, user, {group: groups[user.groupId]}),
+    activity: events[index % events.length],
+    template: ''
+  }
+})
+
+const templates = [
+  (user, activity) => { return `${user.name} 在 <a >${user.group}</a> 新建项目 <a>${activity.event}</a>` },
+  (user, activity) => { return `${user.name} 在 <a >${user.group}</a> 发布了 <a>${activity.event}</a>` },
+  (user, activity) => { return `${user.name} 将 <a >${activity.event}</a> 更新至已发布状态` }
+]
+
+export {activities, templates}

src/mock/common/index.js

@@ -31,4 +31,46 @@ const logos = [
 
 const admins = ['ICZER', 'JACK', 'LUIS', 'DAVID']
 
-export {logos, sayings, positions, avatars, admins}
+const groups = ['高逼格设计天团', '中二少女团', '科学搬砖组', '骗你学计算机', '程序员日常']
+
+const users = [
+  {
+    name: '曲丽丽',
+    avatar: avatars[0],
+    groupId: 0
+  },
+  {
+    name: '付晓晓',
+    avatar: avatars[1],
+    groupId: 0
+  },
+  {
+    name: '林东东',
+    avatar: avatars[2],
+    groupId: 1
+  },
+  {
+    name: '周星星',
+    avatar: avatars[3],
+    groupId: 2
+  },
+  {
+    name: '朱偏右',
+    avatar: avatars[4],
+    groupId: 3
+  },
+  {
+    name: '勒个',
+    avatar: avatars[5],
+    groupId: 4
+  }
+]
+
+const teams = groups.map((item, index) => {
+  return {
+    name: item,
+    avatar: avatars[index]
+  }
+})
+
+export {logos, sayings, positions, avatars, admins, groups, users, teams}

src/mock/index.js

@@ -2,6 +2,7 @@ import Mock from 'mockjs'
 import '@/mock/user/current'
 import '@/mock/project'
 import '@/mock/user/login'
+import '@/mock/workplace'
 
 // 设置全局延时
 Mock.setup({

src/mock/workplace/index.js

@@ -0,0 +1,15 @@
+import Mock from 'mockjs'
+import {activities, templates} from '../common/activityData'
+import {teams} from '../../mock/common'
+
+activities.forEach(item => {
+  item.template = templates[item.activity.type](item.user, item.activity)
+})
+
+Mock.mock('/work/activity', 'get', () => {
+  return activities
+})
+
+Mock.mock('/work/team', 'get', () => {
+  return teams
+})