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

This commit is contained in:
Tuan Duong 2019-04-25 16:45:46 +07:00 committed by 花裤衩
parent f9f51986e6
commit c58e2078bc
13 changed files with 511 additions and 6 deletions

View File

@ -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)
}

View File

@ -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>

After

Width:  |  Height:  |  Size: 627 B

1
src/icons/svg/skill.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -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'
},

View File

@ -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',

View File

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

View File

@ -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') }}

View File

@ -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 }
}
]
}
]

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>