From 1a8067cfb8c0221bdf09b12f89ca49b5c656df16 Mon Sep 17 00:00:00 2001
From: Bowen <mr_lbw@outlook.com>
Date: Wed, 3 Oct 2018 11:24:09 +0800
Subject: [PATCH] feat: basic layout in workspace activities

---
 src/components/Workspace/Activities.vue     |  47 ++++++++
 src/components/Workspace/ActivitiesItem.vue | 115 ++++++++++++++++++++
 src/view/Workspace.vue                      |   7 +-
 3 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Workspace/Activities.vue
 create mode 100644 src/components/Workspace/ActivitiesItem.vue

diff --git a/src/components/Workspace/Activities.vue b/src/components/Workspace/Activities.vue
new file mode 100644
index 0000000..03fc9b6
--- /dev/null
+++ b/src/components/Workspace/Activities.vue
@@ -0,0 +1,47 @@
+<template>
+  <el-card class="workspace__activities">
+    <header
+      class="workspace__activities__header"
+      slot="header"
+    >{{title}}</header>
+    <activities-item></activities-item>
+  </el-card>
+</template>
+
+<script>
+import ActivitiesItem from 'COMPONENTS/Workspace/ActivitiesItem'
+
+export default {
+  props: {
+    activities: {
+      type: Array,
+      default () {
+        return [
+          {
+            name: 'Bowen'
+          }
+        ]
+      }
+    },
+    title: {
+      type: String,
+      default: '活动'
+    }
+  },
+
+  components: {
+    ActivitiesItem
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+
+.workspace
+  &__activities
+    margin-top: 24px
+
+// reset
+/deep/ .el-card__body
+  padding: 0 24px 8px !important
+</style>
diff --git a/src/components/Workspace/ActivitiesItem.vue b/src/components/Workspace/ActivitiesItem.vue
new file mode 100644
index 0000000..08c2b1c
--- /dev/null
+++ b/src/components/Workspace/ActivitiesItem.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="activity__item">
+    <span class="activity__item__avatar-wrapper">
+      <img
+        ref="avatar"
+        src="~STATIC/user.png"
+        alt="user-avatar"
+        class="activity__item__avatar"
+      >
+    </span>
+    <div class="activity__item__content">
+      <h4
+        class="activity__item__content-title"
+      >{{user.name}}&nbsp;{{createActivity}}</h4>
+      <time class="activity__item__update">4 小时前</time>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    user: {
+      type: Object,
+      default () {
+        return {
+          name: 'Bowen',
+          avatar: ''
+        }
+      }
+    },
+    updateAt: {
+      type: Date | Number,
+      default () {
+        return +new Date()
+      }
+    },
+    group: {
+      type: Object,
+      default () {
+        return {
+          name: 'Github',
+          link: 'https://github.com/lbwa'
+        }
+      }
+    },
+    project: {
+      type: Object,
+      default () {
+        return {
+          name: 'Vue Design Pro',
+          link: 'https://github.com/lbwa/vue-design-pro'
+        }
+      }
+    },
+    comment: {
+      type: Object,
+      default () {
+        return {
+          name: 'comments',
+          link: 'https://github.com/lbwa/vue-design-pro'
+        }
+      }
+    },
+    template: {
+      type: String,
+      default: '在 @{group} 新建项目 @{project}'
+    }
+  },
+
+  computed: {
+    createActivity () {
+      // return a new string, this.template should be immutable.
+      return this.template.replace(/@\{([^{}]*)\}/gi, key => {
+        if (key === '@{group}') return this.group.name
+        if (key === '@{project}') return this.project.name
+        if (key === '@{comment}') return this.comment.name
+      })
+    }
+  },
+
+  mounted () {
+    if (this.user.avatar) this.$refs.avatar.src = this.user.avatar
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+.activity
+  &__item
+    padding: 16px 0
+
+    &__avatar-wrapper
+      display: inline-block
+      margin-right: 16px
+      height: 32px
+      width: 32px
+      vertical-align: top
+
+    &__avatar
+      width: 32px
+      height: 32px
+
+    &__content
+      display: inline-block
+
+    &__content-title
+      margin: 0 0 4px 0
+      line-height: 22px
+      color: rgba(0,0,0,.65)
+      font-weight: 400
+
+    &__update
+      color: rgba(0,0,0,.25)
+</style>
diff --git a/src/view/Workspace.vue b/src/view/Workspace.vue
index a0cd9a1..e2a047a 100644
--- a/src/view/Workspace.vue
+++ b/src/view/Workspace.vue
@@ -7,6 +7,7 @@
         :xs="24" :sm="24" :md="24" :lg="16" :xl="16"
       >
         <workspace-projects :projects="projects"></workspace-projects>
+        <workspace-activities></workspace-activities>
       </el-col>
       <el-col
         class="workspace__navigator__wrapper"
@@ -16,6 +17,8 @@
           :tags="tags"
           :navigators="navigators"
         ></workspace-navigator>
+        <!-- xx指数模块 -->
+        <!-- 团队模块 -->
       </el-col>
     </el-row>
   </el-main>
@@ -25,6 +28,7 @@
 import WorkspaceHeader from 'COMPONENTS/Workspace/Header'
 import WorkspaceProjects from 'COMPONENTS/Workspace/Projects'
 import WorkspaceNavigator from 'COMPONENTS/Workspace/Navigator'
+import WorkspaceActivities from 'COMPONENTS/Workspace/Activities'
 import { mapState, mapActions } from 'vuex'
 
 export default {
@@ -87,7 +91,8 @@ export default {
   components: {
     WorkspaceHeader,
     WorkspaceProjects,
-    WorkspaceNavigator
+    WorkspaceNavigator,
+    WorkspaceActivities
   }
 }
 </script>