feature[profile]: add profile page (#1953)

src/filters/index.js

@@ -58,3 +58,11 @@ export function numberFormatter(num, digits) {
 export function toThousandFilter(num) {
   return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
 }
+
+/**
+ * Upper case first char
+ * @param {String} string
+ */
+export function uppercaseFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}

src/icons/svg/education.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M88.883 119.565c-7.284 0-19.434 2.495-21.333 8.25v.127c-4.232.13-5.222 0-7.108 0-1.895-5.76-14.045-8.256-21.333-8.256H0V0h42.523c9.179 0 17.109 5.47 21.47 13.551C68.352 5.475 76.295 0 85.478 0H128v119.57l-39.113-.005h-.004zM60.442 24.763c0-9.651-8.978-16.507-17.777-16.507H7.108V111.43H39.11c7.054-.14 18.177.082 21.333 6.12v-4.628c-.134-5.722-.004-13.522 0-13.832V27.413l.004-2.655-.004.005zm60.442-16.517h-35.55c-8.802 0-17.78 6.856-17.78 16.493v74.259c.004.32.138 8.115 0 13.813v4.627c3.155-6.022 14.279-6.26 21.333-6.114h32V8.25l-.003-.005z"/></svg>

src/icons/svg/skill.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M31.652 93.206h33.401c1.44 2.418 3.077 4.663 4.93 6.692h-38.33v-6.692zm0-10.586h28.914a44.8 44.8 0 0 1-1.264-6.688h-27.65v6.688zm0-17.27H59.39c.288-2.286.714-4.532 1.34-6.687H31.65v6.687h.003zm53.913 44.84v5.85c0 2.798-2.095 5.075-4.667 5.075h-70.07c-2.576 0-4.663-2.277-4.663-5.075V31.26l23.22-20.96v22.25H17.16v6.688h18.39V6.688h45.348c2.576 0 4.667 2.277 4.667 5.066v20.009c1.987-.675 4.053-1.128 6.17-1.445v-18.56C91.738 5.28 86.874 0 80.902 0H31.15L0 28.118v87.917c0 6.48 4.859 11.759 10.832 11.759h70.07c5.974 0 10.837-5.27 10.837-11.759v-4.41c-2.117-.312-4.183-.765-6.17-1.435h-.004zM23.279 58.667h-7.96v6.688h7.96v-6.688zm-7.956 41.23h7.96v-6.691h-7.96v6.692zm7.956-23.96h-7.96v6.687h7.96v-6.688zm89.718-15.042l-4.896-4.07-12.447 17.613-11.19-9.305-3.762 5.311 16.091 13.38 16.204-22.929zM128 70.978c0-18.632-13.97-33.782-31.147-33.782-17.168 0-31.135 15.155-31.135 33.782 0 18.628 13.97 33.783 31.135 33.783 17.172 0 31.143-15.15 31.143-33.783H128zm-6.17 0c0 14.933-11.203 27.1-24.981 27.1-13.77 0-24.987-12.158-24.987-27.1 0-14.941 11.195-27.099 24.987-27.099 13.778 0 24.982 12.158 24.982 27.1z"/></svg>

src/lang/en.js

@@ -61,12 +61,14 @@ export default {
     theme: 'Theme',
     clipboardDemo: 'Clipboard',
     i18n: 'I18n',
-    externalLink: 'External Link'
+    externalLink: 'External Link',
+    profile: 'Profile'
   },
   navbar: {
-    logOut: 'Log Out',
     dashboard: 'Dashboard',
     github: 'Github',
+    logOut: 'Log Out',
+    profile: 'Profile',
     theme: 'Theme',
     size: 'Global Size'
   },

src/lang/es.js

@@ -61,14 +61,16 @@ export default {
     theme: 'Tema',
     clipboardDemo: 'Clipboard',
     i18n: 'I18n',
-    externalLink: 'Enlace externo'
+    externalLink: 'Enlace externo',
+    profile: 'Profile'
   },
   navbar: {
     logOut: 'Salir',
     dashboard: 'Panel de control',
     github: 'Github',
     theme: 'Tema',
-    size: 'Tamaño global'
+    size: 'Tamaño global',
+    profile: 'Profile'
   },
   login: {
     title: 'Formulario de acceso',

src/lang/zh.js

@@ -61,12 +61,14 @@ export default {
     theme: '换肤',
     clipboardDemo: 'Clipboard',
     i18n: '国际化',
-    externalLink: '外链'
+    externalLink: '外链',
+    profile: '个人中心'
   },
   navbar: {
-    logOut: '退出登录',
     dashboard: '首页',
     github: '项目地址',
+    logOut: '退出登录',
+    profile: '个人中心',
     theme: '换肤',
     size: '布局大小'
   },

src/layout/components/Navbar.vue

@@ -26,6 +26,11 @@
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
+          <router-link to="/profile/index">
+            <el-dropdown-item>
+              {{ $t('navbar.profile') }}
+            </el-dropdown-item>
+          </router-link>
           <router-link to="/">
             <el-dropdown-item>
               {{ $t('navbar.dashboard') }}

src/router/index.js

@@ -107,6 +107,20 @@ export const constantRoutes = [
         meta: { title: 'guide', icon: 'guide', noCache: true }
       }
     ]
+  },
+  {
+    path: '/profile',
+    component: Layout,
+    redirect: '/profile/index',
+    hidden: true,
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/profile/index'),
+        name: 'Profile',
+        meta: { title: 'profile', icon: 'user', noCache: true }
+      }
+    ]
   }
 ]
 

src/views/profile/components/Account.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-form>
+    <el-form-item label="Name">
+      <el-input v-model.trim="user.name" />
+    </el-form-item>
+    <el-form-item label="Email">
+      <el-input v-model.trim="user.email" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submit">Update</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  props: {
+    user: {
+      type: Object,
+      default: () => {
+        return {
+          name: '',
+          email: ''
+        }
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$message({
+        message: 'User information has been updated successfully',
+        type: 'success',
+        duration: 5 * 1000
+      })
+    }
+  }
+}
+</script>

src/views/profile/components/Activity.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="user-activity">
+    <div class="post">
+      <div class="user-block">
+        <img class="img-circle" :src="'https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg'+avatarPrefix">
+        <span class="username text-muted">Iron Man</span>
+        <span class="description">Shared publicly - 7:30 PM today</span>
+      </div>
+      <p>
+        Lorem ipsum represents a long-held tradition for designers,
+        typographers and the like. Some people hate it and argue for
+        its demise, but others ignore the hate as they create awesome
+        tools to help create filler text for everyone from bacon lovers
+        to Charlie Sheen fans.
+      </p>
+      <ul class="list-inline">
+        <li>
+          <span class="link-black text-sm">
+            <i class="el-icon-share" />
+            Share
+          </span>
+        </li>
+        <li>
+          <span class="link-black text-sm">
+            <svg-icon icon-class="like" />
+            Like
+          </span>
+        </li>
+      </ul>
+    </div>
+    <div class="post">
+      <div class="user-block">
+        <img class="img-circle" :src="'https://wpimg.wallstcn.com/9e2a5d0a-bd5b-457f-ac8e-86554616c87b.jpg'+avatarPrefix">
+        <span class="username text-muted">Captain American</span>
+        <span class="description">Sent you a message - yesterday</span>
+      </div>
+      <p>
+        Lorem ipsum represents a long-held tradition for designers,
+        typographers and the like. Some people hate it and argue for
+        its demise, but others ignore the hate as they create awesome
+        tools to help create filler text for everyone from bacon lovers
+        to Charlie Sheen fans.
+      </p>
+      <ul class="list-inline">
+        <li>
+          <span class="link-black text-sm">
+            <i class="el-icon-share" />
+            Share
+          </span>
+        </li>
+        <li>
+          <span class="link-black text-sm">
+            <svg-icon icon-class="like" />
+            Like
+          </span>
+        </li>
+      </ul>
+    </div>
+    <div class="post">
+      <div class="user-block">
+        <img class="img-circle" :src="'https://wpimg.wallstcn.com/fb57f689-e1ab-443c-af12-8d4066e202e2.jpg'+avatarPrefix">
+        <span class="username">Spider Man</span>
+        <span class="description">Posted 4 photos - 2 days ago</span>
+      </div>
+      <div class="user-images">
+        <el-carousel :interval="6000" type="card" height="220px">
+          <el-carousel-item v-for="item in carouselImages" :key="item">
+            <img :src="item+carouselPrefix" class="image">
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+      <ul class="list-inline">
+        <li><span class="link-black text-sm"><i class="el-icon-share" /> Share</span></li>
+        <li>
+          <span class="link-black text-sm">
+            <svg-icon icon-class="like" /> Like</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+const avatarPrefix = '?imageView2/1/w/80/h/80'
+const carouselPrefix = '?imageView2/2/h/440'
+
+export default {
+  data() {
+    return {
+      carouselImages: [
+        'https://wpimg.wallstcn.com/9679ffb0-9e0b-4451-9916-e21992218054.jpg',
+        'https://wpimg.wallstcn.com/bcce3734-0837-4b9f-9261-351ef384f75a.jpg',
+        'https://wpimg.wallstcn.com/d1d7b033-d75e-4cd6-ae39-fcd5f1c0a7c5.jpg',
+        'https://wpimg.wallstcn.com/50530061-851b-4ca5-9dc5-2fead928a939.jpg'
+      ],
+      avatarPrefix,
+      carouselPrefix
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-activity {
+  .user-block {
+
+    .username,
+    .description {
+      display: block;
+      margin-left: 50px;
+      padding: 2px 0;
+    }
+
+    .username{
+      font-size: 16px;
+      color: #000;
+    }
+
+    :after {
+      clear: both;
+    }
+
+    .img-circle {
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      float: left;
+    }
+
+    span {
+      font-weight: 500;
+      font-size: 12px;
+    }
+  }
+
+  .post {
+    font-size: 14px;
+    border-bottom: 1px solid #d2d6de;
+    margin-bottom: 15px;
+    padding-bottom: 15px;
+    color: #666;
+
+    .image {
+      width: 100%;
+      height: 100%;
+
+    }
+
+    .user-images {
+      padding-top: 20px;
+    }
+  }
+
+  .list-inline {
+    padding-left: 0;
+    margin-left: -5px;
+    list-style: none;
+
+    li {
+      display: inline-block;
+      padding-right: 5px;
+      padding-left: 5px;
+      font-size: 13px;
+    }
+
+    .link-black {
+
+      &:hover,
+      &:focus {
+        color: #999;
+      }
+    }
+  }
+
+}
+
+.box-center {
+  margin: 0 auto;
+  display: table;
+}
+
+.text-muted {
+  color: #777;
+}
+</style>

src/views/profile/components/Timeline.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="block">
+    <el-timeline>
+      <el-timeline-item v-for="(item,index) of timeline" :key="index" :timestamp="item.timestamp" placement="top">
+        <el-card>
+          <h4>{{ item.title }}</h4>
+          <p>{{ item.content }}</p>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      timeline: [
+        {
+          timestamp: '2019/4/20',
+          title: 'Update Github template',
+          content: 'PanJiaChen committed 2019/4/20 20:46'
+        },
+        {
+          timestamp: '2019/4/21',
+          title: 'Update Github template',
+          content: 'PanJiaChen committed 2019/4/21 20:46'
+        },
+        {
+          timestamp: '2019/4/22',
+          title: 'Build Template',
+          content: 'PanJiaChen committed 2019/4/22 20:46'
+        },
+        {
+          timestamp: '2019/4/23',
+          title: 'Release New Version',
+          content: 'PanJiaChen committed 2019/4/23 20:46'
+        }
+      ]
+    }
+  }
+}
+</script>

src/views/profile/components/UserCard.vue

@@ -0,0 +1,134 @@
+<template>
+  <el-card>
+    <div slot="header" class="clearfix">
+      <span>About me</span>
+    </div>
+
+    <div class="user-profile">
+      <div class="box-center">
+        <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
+          <div>Hello</div>
+          {{ user.role }}
+        </pan-thumb>
+      </div>
+      <div class="box-center">
+        <div class="user-name text-center">{{ user.name }}</div>
+        <div class="user-role text-center text-muted">{{ user.role | uppercaseFirst }}</div>
+      </div>
+    </div>
+
+    <div class="user-bio">
+      <div class="user-education user-bio-section">
+        <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>Education</span></div>
+        <div class="user-bio-section-body">
+          <div class="text-muted">
+            JS in Computer Science from the University of Technology
+          </div>
+        </div>
+      </div>
+
+      <div class="user-skills user-bio-section">
+        <div class="user-bio-section-header"><svg-icon icon-class="skill" /><span>Skills</span></div>
+        <div class="user-bio-section-body">
+          <div class="progress-item">
+            <span>Vue</span>
+            <el-progress :percentage="70" />
+          </div>
+          <div class="progress-item">
+            <span>JavaScript</span>
+            <el-progress :percentage="18" />
+          </div>
+          <div class="progress-item">
+            <span>Css</span>
+            <el-progress :percentage="12" />
+          </div>
+          <div class="progress-item">
+            <span>ESLint</span>
+            <el-progress :percentage="100" status="success" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import PanThumb from '@/components/PanThumb'
+
+export default {
+  components: { PanThumb },
+  props: {
+    user: {
+      type: Object,
+      default: () => {
+        return {
+          name: '',
+          email: '',
+          avatar: '',
+          roles: ''
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ .box-center {
+   margin: 0 auto;
+   display: table;
+ }
+
+ .text-muted {
+   color: #777;
+ }
+
+ .user-profile {
+   .user-name {
+     font-weight: bold;
+   }
+
+   .box-center {
+     padding-top: 10px;
+   }
+
+   .user-role {
+     padding-top: 10px;
+     font-weight: 400;
+     font-size: 14px;
+   }
+
+   .box-social {
+     padding-top: 30px;
+
+     .el-table {
+       border-top: 1px solid #dfe6ec;
+     }
+   }
+
+   .user-follow {
+     padding-top: 20px;
+   }
+ }
+
+ .user-bio {
+   margin-top: 20px;
+   color: #606266;
+
+   span {
+     padding-left: 4px;
+   }
+
+   .user-bio-section {
+     font-size: 14px;
+     padding: 15px 0;
+
+     .user-bio-section-header {
+       border-bottom: 1px solid #dfe6ec;
+       padding-bottom: 10px;
+       margin-bottom: 10px;
+       font-weight: bold;
+     }
+   }
+ }
+</style>

src/views/profile/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="app-container">
+    <div v-if="user">
+      <el-row :gutter="20">
+
+        <el-col :span="6">
+          <user-card :user="user" />
+        </el-col>
+
+        <el-col :span="18">
+          <el-card>
+
+            <el-tabs v-model="activeTab">
+              <el-tab-pane label="Activity" name="activity">
+                <activity />
+              </el-tab-pane>
+              <el-tab-pane label="Timeline" name="timeline">
+                <timeline />
+              </el-tab-pane>
+              <el-tab-pane label="Account" name="account">
+                <account :user="user" />
+              </el-tab-pane>
+            </el-tabs>
+
+          </el-card>
+        </el-col>
+
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import UserCard from './components/UserCard'
+import Activity from './components/Activity'
+import Timeline from './components/Timeline'
+import Account from './components/Account'
+
+export default {
+  name: 'Profile',
+  components: { UserCard, Activity, Timeline, Account },
+  data() {
+    return {
+      user: {},
+      activeTab: 'activity'
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'avatar',
+      'roles'
+    ])
+  },
+  created() {
+    this.getUser()
+  },
+  methods: {
+    getUser() {
+      this.user = {
+        name: this.name,
+        role: this.roles.join(' | '),
+        email: 'admin@test.com',
+        avatar: this.avatar
+      }
+    }
+  }
+}
+</script>