Feature(profile): add profile pages

Author: Armour

mock/users.ts

@@ -10,8 +10,8 @@ const userList: IUserData[] = [
     name: 'Super Admin',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     introduction: 'I am a super administrator',
-    email: '',
-    phone: '',
+    email: '[email protected]',
+    phone: '1234567890',
     roles: ['admin'],
   },
   {
@@ -21,8 +21,8 @@ const userList: IUserData[] = [
     name: 'Normal Editor',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     introduction: 'I am an editor',
-    email: '',
-    phone: '',
+    email: '[email protected]',
+    phone: '1234567890',
     roles: ['editor'],
   }
 ]

src/filters/index.ts

@@ -10,3 +10,8 @@ export const articleStatusFilter = (status: string) => {
   }
   return statusMap[status]
 }
+
+// Filter to uppercase the first character
+export const uppercaseFirstChar = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}

src/icons/components/education.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'education': {
+    width: 128,
+    height: 128,
+    viewBox: '0 0 128 128',
+    data: '<path pid="0" d="M88.9 119.6c-7.3 0-19.5 2.5-21.4 8.2v.1c-4.2.2-5.2 0-7 0-2-5.7-14.1-8.2-21.4-8.2H0V0h42.5C51.7 0 59.6 5.5 64 13.6 68.4 5.5 76.3 0 85.5 0H128v119.6H88.9zM60.4 24.8c0-9.7-9-16.5-17.7-16.5H7v103.1h32c7-.1 18.2.1 21.3 6.2V24.8zM121 8.2H85.3c-8.8 0-17.7 6.9-17.7 16.5v92.7c3.1-6 14.2-6.2 21.3-6h32V8.1z"/>'
+  }
+})

src/icons/components/index.ts

@@ -9,6 +9,7 @@ import './dashboard'
 import './documentation'
 import './drag'
 import './edit'
+import './education'
 import './email'
 import './example'
 import './excel'
@@ -23,6 +24,7 @@ import './hamburger'
 import './icon'
 import './international'
 import './language'
+import './like'
 import './link'
 import './list'
 import './lock'
@@ -37,6 +39,7 @@ import './qq'
 import './search'
 import './shopping'
 import './size'
+import './skill'
 import './star'
 import './tab'
 import './table'

src/icons/components/like.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'like': {
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    data: '<path pid="0" d="M12 21.6C6.4 16 1 11.3 1 7.2 1 3.4 4 2 6.3 2c1.3 0 4.1.5 5.7 4.5 1.6-4 4.5-4.5 5.7-4.5C20.3 2 23 3.6 23 7.2c0 4-5.1 8.6-11 14.4M17.7 1c-2.2 0-4.4 1-5.7 3.2A6.5 6.5 0 0 0 6.3 1C3 1 0 3.2 0 7.2c0 4.7 5.6 9.4 12 15.8 6.4-6.4 12-11.1 12-15.8 0-4-3.1-6.2-6.3-6.2"/>'
+  }
+})

src/icons/components/skill.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'skill': {
+    width: 128,
+    height: 128,
+    viewBox: '0 0 128 128',
+    data: '<path pid="0" d="M31.7 93.2H65a41 41 0 0 0 5 6.8H31.7v-6.7zm0-10.6h28.9a44.8 44.8 0 0 1-1.3-6.7H31.7v6.7zm0-17.2h27.7c.3-2.3.7-4.6 1.3-6.7h-29v6.7zm53.9 44.8v5.8c0 2.8-2.1 5.1-4.7 5.1h-70c-2.6 0-4.7-2.3-4.7-5V31.2l23.2-21v22.3H17.2v6.6h18.4V6.7h45.3c2.6 0 4.7 2.3 4.7 5v20c2-.6 4-1 6.1-1.4V11.8C91.7 5.3 87 0 81 0H31.1L0 28.1v88c0 6.4 4.9 11.7 10.8 11.7H81c6 0 10.8-5.3 10.8-11.8v-4.4c-2-.3-4.1-.7-6.1-1.4zM23.3 58.7h-8v6.7h8v-6.7zm-8 41.2h8v-6.7h-8v6.7zm8-24h-8v6.7h8V76zM113 61l-4.9-4-12.4 17.5-11.2-9.3-3.8 5.3 16 13.4 16.3-23zm15 10c0-18.6-14-33.7-31.1-33.7-17.2 0-31.2 15.2-31.2 33.8 0 18.6 14 33.8 31.2 33.8C114 104.8 128 89.6 128 71zm-6.2 0c0 15-11.2 27.2-25 27.2-13.7 0-25-12.2-25-27.1 0-15 11.3-27.1 25-27.1 13.8 0 25 12.1 25 27z"/>'
+  }
+})

src/icons/svg/education.svg

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

src/icons/svg/like.svg

@@ -61,14 +61,16 @@ export default {
     theme: 'Tema',
     clipboard: '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/icons/svg/skill.svg

@@ -61,14 +61,16 @@ export default {
     theme: '换肤',
     clipboard: '粘贴板',
     i18n: '国际化',
-    externalLink: '外链'
+    externalLink: '外链',
+    profile: '个人中心'
   },
   navbar: {
     logOut: '退出登录',
     dashboard: '首页',
     github: '项目地址',
     theme: '换肤',
-    size: '布局大小'
+    size: '布局大小',
+    profile: '个人中心'
   },
   login: {
     title: '系统登录',

src/lang/en.ts

@@ -36,6 +36,11 @@
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
+          <router-link to="/profile/">
+            <el-dropdown-item>
+              {{ $t('navbar.profile') }}
+            </el-dropdown-item>
+          </router-link>
           <router-link to="/">
             <el-dropdown-item>
               {{ $t('navbar.dashboard') }}
@@ -51,7 +56,7 @@
           </a>
           <a
             target="_blank"
-            href="https://panjiachen.github.io/vue-element-admin-site/#/"
+            href="https://armour.github.io/vue-typescript-admin-docs/"
           >
             <el-dropdown-item>Docs</el-dropdown-item>
           </a>

src/lang/es.ts

@@ -117,6 +117,24 @@ export const constantRoutes: RouteConfig[] = [
         }
       }
     ]
+  },
+  {
+    path: '/profile',
+    component: Layout,
+    redirect: '/profile/index',
+    meta: { hidden: true },
+    children: [
+      {
+        path: 'index',
+        component: () => import(/* webpackChunkName: "profile" */ '@/views/profile/index.vue'),
+        name: 'Profile',
+        meta: {
+          title: 'profile',
+          icon: 'user',
+          noCache: true
+        }
+      }
+    ]
   }
 ]
 

src/lang/zh.ts

@@ -12,6 +12,7 @@ export interface IUserState {
   avatar: string
   introduction: string
   roles: string[]
+  email: string
 }
 
 @Module({ dynamic: true, store, name: 'user' })
@@ -21,6 +22,7 @@ class User extends VuexModule implements IUserState {
   public avatar = ''
   public introduction = ''
   public roles: string[] = []
+  public email = ''
 
   @Mutation
   private SET_TOKEN(token: string) {
@@ -47,6 +49,11 @@ class User extends VuexModule implements IUserState {
     this.roles = roles
   }
 
+  @Mutation
+  private SET_EMAIL(email: string) {
+    this.email = email
+  }
+
   @Action
   public async Login(userInfo: { username: string, password: string}) {
     let { username, password } = userInfo
@@ -72,7 +79,7 @@ class User extends VuexModule implements IUserState {
     if (!data) {
       throw Error('Verification failed, please Login again.')
     }
-    const { roles, name, avatar, introduction } = data.user
+    const { roles, name, avatar, introduction, email } = data.user
     // roles must be a non-empty array
     if (!roles || roles.length <= 0) {
       throw Error('GetUserInfo: roles must be a non-null array!')
@@ -81,6 +88,7 @@ class User extends VuexModule implements IUserState {
     this.SET_NAME(name)
     this.SET_AVATAR(avatar)
     this.SET_INTRODUCTION(introduction)
+    this.SET_EMAIL(email)
   }
 
   @Action

src/layout/components/Navbar/index.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 lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { IProfile } from '../index.vue'
+
+@Component({
+  name: 'Account'
+})
+export default class extends Vue {
+  @Prop({ required: true }) private user!: IProfile
+
+  private submit() {
+    this.$message({
+      message: 'User information has been updated successfully',
+      type: 'success',
+      duration: 5 * 1000
+    })
+  }
+}
+</script>