diff --git a/src/filters/index.js b/src/filters/index.js
index 051000c1..f6a28488 100644
--- a/src/filters/index.js
+++ b/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)
+}
diff --git a/src/icons/svg/education.svg b/src/icons/svg/education.svg
new file mode 100644
index 00000000..7bfb01d1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/svg/guide 2.svg b/src/icons/svg/guide 2.svg
deleted file mode 100644
index d053bd73..00000000
--- a/src/icons/svg/guide 2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg"><path d="M11.576 547.9l282.848 126.404 409.285-383.26 137.057-128.341L361.234 714.22l362.77 146.362c8.742 3.327 18.733-1.33 21.855-10.644v-.666L999.985.374 10.327 514.636c-8.742 4.657-11.864 15.302-8.117 24.616 2.497 3.991 5.62 7.318 9.366 8.648zM360.61 999.626l141.112-161.663-141.112-61.206v222.869z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/skill.svg b/src/icons/svg/skill.svg
new file mode 100644
index 00000000..a3b73121
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lang/en.js b/src/lang/en.js
index 426d3d26..ae221ba8 100644
--- a/src/lang/en.js
+++ b/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'
},
diff --git a/src/lang/es.js b/src/lang/es.js
index 50b96037..8187bfe7 100755
--- a/src/lang/es.js
+++ b/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',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 2055c5ab..dee804d2 100644
--- a/src/lang/zh.js
+++ b/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: '布局大小'
},
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 51972166..9d5c6658 100644
--- a/src/layout/components/Navbar.vue
+++ b/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') }}
diff --git a/src/router/index.js b/src/router/index.js
index 34afd5c5..d1dfda90 100644
--- a/src/router/index.js
+++ b/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 }
+ }
+ ]
}
]
diff --git a/src/views/profile/components/Account.vue b/src/views/profile/components/Account.vue
new file mode 100644
index 00000000..9f2e3865
--- /dev/null
+++ b/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>
diff --git a/src/views/profile/components/Activity.vue b/src/views/profile/components/Activity.vue
new file mode 100644
index 00000000..dd5db3a5
--- /dev/null
+++ b/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>
diff --git a/src/views/profile/components/Timeline.vue b/src/views/profile/components/Timeline.vue
new file mode 100644
index 00000000..ba90b3d2
--- /dev/null
+++ b/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>
diff --git a/src/views/profile/components/UserCard.vue b/src/views/profile/components/UserCard.vue
new file mode 100644
index 00000000..a8d27513
--- /dev/null
+++ b/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>
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
new file mode 100644
index 00000000..e54bc718
--- /dev/null
+++ b/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>