Imporve user page ztl

src/assets/css/basic.css

@@ -63,26 +63,36 @@ h3::before {
     content: "# ";
 }
 
-.markdown-container h1 {
+.markdown-container h1,
+.cm-header-1 {
     font-size: 30px;
 }
 
-.markdown-container h2 {
+.markdown-container h2,
+.cm-header-2 {
     font-size: 23px;
 }
 
-.markdown-container h3 {
+.markdown-container h3,
+.cm-header-3 {
     font-size: 18px;
 }
 
-.markdown-container h4 {
+.markdown-container h4,
+.cm-header-4 {
     font-size: 17px;
 }
 
-.markdown-container h5 {
+.markdown-container h5,
+.cm-header-5 {
     font-size: 14px;
 }
 
+.cm-header,
+.cm-strong {
+    font-weight: 400 !important;
+}
+
 body {
     color: #606266;
 }

src/components/problem/content.vue

@@ -94,7 +94,6 @@ export default {
         .get(apiurl('/problem/' + String(this.$route.params.id)))
         .then(res => {
           let data = res.data.res;
-          console.log(data);
           this.title = data.title;
           this.pid = data.pid;
           this.allowHTML = data.allow_html;

src/components/problem/edit.vue

@@ -26,13 +26,9 @@ export default {
   methods: {
     loadproblem() {
       this.$axios
-        .get(apiurl('/problem/content'), {
-          params: {
-            pid: this.$route.params.id
-          }
-        })
+        .get(apiurl('/problem/' + String(this.$route.params.id)))
         .then(res => {
-          let data = res.data;
+          let data = res.data.res;
           this.title = data.title;
           this.mdContent = data.description;
         })

src/components/problem/submit.vue

@@ -118,7 +118,10 @@ export default {
           }
           this.buttonLoading = false;
         });
-    }
+    },
+  },
+  mounted() {
+    this.lang_num = String(this.$store.state.user.userlang);
   }
 };
 </script>

src/components/user/content.vue

@@ -4,20 +4,51 @@
       <el-card shadow="never">
         <el-avatar shape="square" icon="el-icon-user-solid" :size="400"></el-avatar>
       </el-card>
+      <el-card class="item">
+        <div slot="header" class="clearfix"><i class="el-icon-setting" /> Tool Bar</div>
+        <el-button v-if="ismine" type="primary">Edit</el-button>
+        <el-button @click="$router.go(-1);">Back</el-button>
+      </el-card>
     </div>
     <div id="info">
-      <el-card shadow="never">
-        <div slot="header" class="clearfix"><i class="el-icon-user" /> User Name</div>
-        {{username}}
-      </el-card>
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-card shadow="never">
+            <div slot="header" class="clearfix"><i class="el-icon-user" /> User Name</div>
+            {{username}}
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never">
+            <div slot="header" class="clearfix"><i class="el-icon-warning-outline" /> User ID</div>
+            {{userid}}
+          </el-card>
+        </el-col>
+      </el-row>
       <el-card shadow="never" class="item">
         <div slot="header" class="clearfix"><i class="el-icon-message" /> Email</div>
         {{email}}
       </el-card>
-      <el-card shadow="never" class="item">
-        <div slot="header" class="clearfix"><i class="el-icon-check" /> Sloved</div>
-        {{solved}} Problems
-      </el-card>
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-card shadow="never" class="item">
+            <div slot="header" class="clearfix"><i class="el-icon-check" /> Sloved</div>
+            {{solved}} Problems
+          </el-card>
+        </el-col>
+        <el-col :span="8">
+          <el-card shadow="never" class="item">
+            <div slot="header" class="clearfix"><i class="el-icon-upload2" /> Submited</div>
+            {{submit}} Problems
+          </el-card>
+        </el-col>
+        <el-col :span="8">
+          <el-card shadow="never" class="item">
+            <div slot="header" class="clearfix"><i class="el-icon-finished" /> AC Rate</div>
+            <el-progress :text-inside="true" :stroke-width="24" :percentage="rate" status="success" :color="ACRateColorMode"></el-progress>
+          </el-card>
+        </el-col>
+      </el-row>
       <el-card shadow="never" class="item">
         <div slot="header" class="clearfix"><i class="el-icon-chat-line-square" /> Introduction</div>
         <MarkdownContainer v-if="introduction" :content="introduction"/>
@@ -34,9 +65,14 @@ export default {
   name: 'UserHomepage',
   data() {
     return {
-      username: '',
-      email: '',
-      introduction: null
+      username: '-',
+      userid: '-',
+      email: '-',
+      introduction: null,
+      solved: '-',
+      submit: '-',
+      rate: '-',
+      ismine: false
     };
   },
   methods: {
@@ -46,9 +82,20 @@ export default {
         .then(res => {
           let data = res.data.res;
           this.username = data.username;
+          this.userid = data.id;
           this.email = data.email;
           this.introduction = data.introduction;
           this.solved = data.solved;
+          this.submit = data.submit_time;
+          if (this.solved == 0) {
+            this.rate = 100;
+          } else {
+            this.rate = (this.solved * 100.0) / this.submit;
+            this.rate = this.rate.toFixed(2);
+          }
+          if (this.userid == String(this.$store.state.user.userid)) {
+            this.ismine = true;
+          }
         })
         .catch(err => {
           if(err.request.status === 404) {
@@ -57,6 +104,16 @@ export default {
             this.$SegmentMessage.error(this, 'Unkown error');
           }
         });
+    },
+    ACRateColorMode(percentage) {
+      if (percentage < 20) {
+        return '#F56C6C';
+      } else if (percentage < 30) {
+        return '#E6A23C';
+      } else if (percentage < 50) {
+        return '#67C23A';
+      }
+      return '#409EFF';
     }
   },
   mounted() {

src/components/user/login.vue

@@ -65,6 +65,13 @@ export default {
           password: this.ldata.password
         })
         .then(res => {
+          this.$axios
+            .get(apiurl('/account/' + res.data.res.id))
+            .then(detail => {
+              this.$store.commit('userLang', {
+                lang: detail.data.res.lang
+              });
+            });
           this.$store.commit('userLogin', {
             username: this.ldata.username,
             userid: res.data.res.id

src/components/user/register.vue

@@ -69,18 +69,19 @@ export default {
       rules: {
         username: [
           { required: true, message: 'Input your username', trigger: 'blur' },
-          { max: 10, message: 'No more than 10 characters', trigger: 'blur' },
+          { max: 150, message: 'No more than 150 characters', trigger: 'blur' },
           { validator: validateUsername, trigger: 'blur'}
         ],
         password: [
           { required: true, message: 'Input your password', trigger: 'blur' },
-          { min: 6, message: 'Password must be more than 6 characters', trigger: 'blur' }
+          { min: 6, message: 'No less than 6 characters', trigger: 'blur' }
         ],
         passwdrepeat: [
           { required: true, message: 'Repeat your password', trigger: 'blur' },
           { validator: validatePasswd, trigger: 'blur' },
         ],
         email: [
+          { required: true, message: 'Input your email', trigger: 'blur' },
           { validator: validateEmail, trigger: 'blur'}
         ]
       },

src/store/user.js

@@ -3,6 +3,7 @@ const userstore = {
     authenticated: localStorage.getItem('user-authenticated') || false,
     username: localStorage.getItem('user-username') || null,
     userid: localStorage.getItem('user-userid') || null,
+    userlang: localStorage.getItem('user-userlang') || null,
     showlogin: false,
     showregister: false,
     showlogout: false
@@ -12,16 +13,23 @@ const userstore = {
       state.authenticated = true;
       state.userid = data.userid;
       state.username = data.username;
-
+      
       localStorage.setItem('user-authenticated', true);
       localStorage.setItem('user-username', data.username);
       localStorage.setItem('user-userid', data.userid);
     },
+    userLang(state, data) {
+      state.userlang = data.lang;
+
+      localStorage.setItem('user-userlang', data.lang); 
+    },
     userLogout(state) {
       state.authenticated = false;
       state.userid = null;
       state.username = null;
+      state.userlang = null;
 
+      localStorage.removeItem('user-userlang'); 
       localStorage.removeItem('user-authenticated');
       localStorage.removeItem('user-userid');
       localStorage.removeItem('user-username');