Merge pull request #119 from segment-oj:add-avatar-component

[feature] Add avatar component

Author: ZTL-UwU

src/components/page/navbar.vue

@@ -16,30 +16,28 @@
         </el-menu-item>
         <el-menu-item index="/" class="webkit-box">
           <i class="el-icon-s-home" />
-          <div class="lable"> Home</div>
+          <div class="label"> Home</div>
         </el-menu-item>
         <el-menu-item index="/problem/list" class="webkit-box">
           <i class="el-icon-s-order" /> 
-          <div class="lable"> Problem List</div>
+          <div class="label"> Problem List</div>
         </el-menu-item>
         <el-menu-item index="/status/list" class="webkit-box">
           <i class="el-icon-s-marketing" /> 
-          <div class="lable"> Status List</div>
+          <div class="label"> Status List</div>
         </el-menu-item>
         <el-submenu index="1">
           <template slot="title">
             <i class="el-icon-s-help" />
-            <span class="lable"> Apps</span>
+            <span class="label"> Apps</span>
           </template>
           <el-menu-item index="/app/editor">
             Code Editor
           </el-menu-item>
         </el-submenu>
         <el-submenu index="2" id="user">
           <template slot="title">
-              <el-avatar shape="square">
-                <img src="./../../assets/icon/SOJ-thick-white-background.png" />
-              </el-avatar>
+            <UserAvatar />
           </template>
           <div v-if="this.$store.state.user.authenticated">
             <el-menu-item :index="'/account/' + $store.state.user.userid">
@@ -60,6 +58,7 @@
 
 <script>
 import UserLogout from './../user/logout.vue';
+import UserAvatar from './../user/avatar.vue';
 
 export default {
   name: 'NavBar',
@@ -69,14 +68,15 @@ export default {
     };
   },
   components: {
-    UserLogout
+    UserLogout,
+    UserAvatar
   }
 };
 </script>
 
 <style scoped>
 @media only screen and (max-width: 500px) {
-    .lable {
+    .label {
         display: none;
     }
 }

src/components/user/avatar.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-avatar :shape="this.shape" :size="this.size">
+    <img v-if="this.imgsrc" :src="this.imgsrc" alt="picture" />
+    <img v-else src="./../../assets/icon/SOJ-thick-white-background.png">
+  </el-avatar>
+</template>
+
+<script>
+export default {
+  name: 'UserAvatar',
+  props: {
+    imgsrc: {
+      type: String,
+    }, size: {
+      type: Number,
+    }, shape: {
+      type: String,
+      default: 'square'
+    }
+  }
+};
+</script>

src/components/user/content.vue

@@ -2,9 +2,7 @@
   <div id="user-content">
     <div id="tool">
       <el-card shadow="never">
-        <el-avatar shape="square" :size="this.avatarWidth">
-          <img src="./../../assets/icon/SOJ-thick-white-background.png" />
-        </el-avatar>
+        <UserAvatar shape="square" :size="this.avatarWidth" />
       </el-card>
     </div>
 
@@ -29,6 +27,7 @@ import apiurl from './../../apiurl';
 import userInfo from './information.vue';
 import userEdit from './edit.vue';
 import userSecure from './secure.vue';
+import UserAvatar from './avatar.vue';
 
 export default {
   name: 'UserHomepage',
@@ -72,7 +71,8 @@ export default {
   components: {
     userInfo,
     userEdit,
-    userSecure
+    userSecure,
+    UserAvatar
   }
 };
 </script>