update activities data

mock/api.js

@@ -176,7 +176,15 @@ export const getActivities = [
       name: '林东东',
       avatar: imgMap.a,
     },
-    action: '在 [高逼格设计天团](http://github.com/) 新建项目 [六月迭代](http://github.com/)',
+    group: {
+      name: '高逼格设计天团',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '六月迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
   },
   {
     id: 'trend-2',
@@ -185,7 +193,15 @@ export const getActivities = [
       name: '付小小',
       avatar: imgMap.c,
     },
-    action: '在 [高逼格设计天团](http://github.com/) 新建项目 [六月迭代](http://github.com/)',
+    group: {
+      name: '高逼格设计天团',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '六月迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
   },
   {
     id: 'trend-3',
@@ -194,7 +210,15 @@ export const getActivities = [
       name: '曲丽丽',
       avatar: imgMap.b,
     },
-    action: '在 [中二少女团](http://github.com/) 新建项目 [六月迭代](http://github.com/)',
+    group: {
+      name: '中二少女团',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '六月迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
   },
   {
     id: 'trend-4',
@@ -203,7 +227,11 @@ export const getActivities = [
       name: '周星星',
       avatar: imgMap.c,
     },
-    action: '在 [5 月日常迭代](http://github.com/) 更新至已发布状态',
+    project: {
+      name: '5 月日常迭代',
+      link: 'http://github.com/',
+    },
+    template: '将 @{project} 更新至已发布状态',
   },
   {
     id: 'trend-5',
@@ -212,7 +240,15 @@ export const getActivities = [
       name: '朱偏右',
       avatar: imgMap.a,
     },
-    action: '在 [工程效能](http://github.com/) 发布了 [留言](http://github.com/)',
+    project: {
+      name: '工程效能',
+      link: 'http://github.com/',
+    },
+    comment: {
+      name: '留言',
+      link: 'http://github.com/',
+    },
+    template: '在 @{project} 发布了 @{comment}',
   },
   {
     id: 'trend-6',
@@ -221,7 +257,15 @@ export const getActivities = [
       name: '乐哥',
       avatar: imgMap.d,
     },
-    action: '在 [程序员日常](http://github.com/) 新建项目 [品牌迭代](http://github.com/)',
+    group: {
+      name: '程序员日常',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '品牌迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
   },
 ];
 

src/routes/Dashboard/Workplace.js

@@ -96,10 +96,43 @@ export default class Workplace extends PureComponent {
     });
   }
 
+  renderActivities() {
+    const {
+      activities: { list },
+    } = this.props;
+    return list.map((item) => {
+      const events = item.template.split(/@\{([^{}]*)\}/gi).map((key) => {
+        if (item[key]) {
+          return <a href={item[key].link} key={item[key].name}>{item[key].name}</a>;
+        }
+        return key;
+      });
+      return (
+        <List.Item key={item.id}>
+          <List.Item.Meta
+            avatar={<Avatar src={item.user.avatar} />}
+            title={
+              <span>
+                <a className={styles.username}>{item.user.name}</a>
+                &nbsp;
+                <span className={styles.event}>{events}</span>
+              </span>
+            }
+            description={
+              <span className={styles.datetime} title={item.updatedAt}>
+                {moment(item.updatedAt).fromNow()}
+              </span>
+            }
+          />
+        </List.Item>
+      );
+    });
+  }
+
   render() {
     const {
       project: { loading: projectLoading, notice },
-      activities: { loading: activitiesLoading, list: activitiesList },
+      activities: { loading: activitiesLoading },
       chart: { radarData },
     } = this.props;
 
@@ -183,29 +216,7 @@ export default class Workplace extends PureComponent {
             >
               <List loading={activitiesLoading} size="large">
                 <div className={styles.activitiesList}>
-                  {
-                    activitiesList.map(item => (
-                      <List.Item key={item.id}>
-                        <List.Item.Meta
-                          avatar={<Avatar src={item.user.avatar} />}
-                          title={
-                            <span>
-                              <a className={styles.username}>{item.user.name}</a>
-                              &nbsp;
-                              <span className={styles.operation}>
-                                在 <a>xx</a> 新建了项目 <a>xxxx</a>
-                              </span>
-                            </span>
-                          }
-                          description={
-                            <span className={styles.datetime} title={item.updatedAt}>
-                              {moment(item.updatedAt).fromNow()}
-                            </span>
-                          }
-                        />
-                      </List.Item>
-                    ))
-                  }
+                  {this.renderActivities()}
                 </div>
               </List>
             </Card>

src/routes/Dashboard/Workplace.less

@@ -6,7 +6,7 @@
   .username {
     color: @text-color;
   }
-  .operation {
+  .event {
     font-weight: normal;
   }
 }