Merge branch 'master' into add-user-edit-ztl

Author: ZTL-UwU

src/App.vue

@@ -7,8 +7,8 @@
       </div>
     </div>
     <Footer />
-    <UserLogin></UserLogin>
-    <UserRegister></UserRegister>
+    <UserLogin v-if="$store.state.user.showlogin"></UserLogin>
+    <UserRegister v-if="$store.state.user.showregister"></UserRegister>
   </div>
 </template>
 

src/components/lib/AjaxTable.vue

@@ -5,7 +5,6 @@
     </el-table>
     <el-pagination
       :page-size="this.limit"
-      :total="this.total"
       background
       layout="prev, pager, next, jumper, total"
       @current-change="this.onPageChange"

src/components/lib/captcha.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="captcha">
-    <el-input v-model="captcha_answer" placeholder="Solve Captcha"></el-input>
+    <el-input v-model="captcha_answer"></el-input>
     <img class="captcha-img" v-if="loaded" @click="refresh_captcha();" :src="img_url" />
   </div>
 </template>

src/components/lib/tag.vue

@@ -0,0 +1,67 @@
+<template>
+  <span :v-if="showTag" class="seg-tag" :style="style">
+    <i :v-if="icon" :class="'el-icon-' + icon_detail"></i>{{content}}
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'SegmentTag',
+  props: {
+    content: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: Boolean,
+      default: false
+    },
+    icon_detail: String,
+    border: {
+      type: Boolean,
+      default: true
+    },
+    color: {
+      type: String,
+      default: '#606266'
+    },
+    border_color: {
+      type: String,
+      default: '#E4E7ED'
+    },
+    background_color: {
+      type: String,
+      default: 'rgb (244, 255, 255)'
+    }
+  },
+  data() {
+    return {
+      style: '',
+      showTag: false
+    };
+  },
+  mounted() {
+    this.style = 'color: ' + this.color + '; background-color: ' + this.background_color + ';';
+    if(this.border) {
+      this.style += 'border-color: '+ this.border_color + ';';
+    }
+    this.showTag = true;
+  }
+};
+</script>
+
+<style scoped>
+.seg-tag {
+    display: inline-block;
+    height: 32px;
+    padding: 0 10px;
+    line-height: 30px;
+    font-size: 12px;
+    font-weight: 500;
+    border-width: 1px;
+    border-style: solid;
+    box-sizing: border-box;
+    white-space: nowrap;
+    margin: 3px;
+}
+</style>

src/components/problem/content.vue

@@ -65,6 +65,23 @@
             <el-divider class="divider">Memery</el-divider>
             <div class="tool-content">{{memery}} MB</div>
           </el-card>
+          <el-card shadow="never" class="margin-top">
+            <div class="margin-bottom">
+              <i class="el-icon-collection-tag" />
+              Tags
+              <div v-if="showTag" @click="showTag = false" id="tag-button"><i class="el-icon-arrow-up" />Hide tags</div>
+              <div v-if="!showTag" @click="showTag = true" id="tag-button"><i class="el-icon-arrow-down" />Show tags</div>
+            </div>
+            <div class="tags" v-if="showTag">
+              <SegmentTag
+                v-for="item in rendertags"
+                :key="item.content"
+                :border_color="item.color"
+                :content="item.content"
+                >
+              </SegmentTag>
+            </div>
+          </el-card>
         </div>
       </div>
     </div>
@@ -75,6 +92,7 @@
 import timeFormat from './../../methods/time';
 import apiurl from './../../apiurl';
 import MarkdownContainer from './../lib/MarkdownContainer.vue';
+import SegmentTag from './../lib/tag.vue';
 
 export default {
   name: 'ProblemView',
@@ -90,10 +108,29 @@ export default {
       time: '-',
       memery: '-',
       timeAdd: 'Unknown',
-      problemLoading: true
+      tags: [],
+      rendertags: [],
+      problemLoading: true,
+      showTag: false
     };
   },
   methods: {
+    render_tags() {
+      for(let i = 0; i < this.tags.length; i += 1) {
+        this.$axios
+          .get(apiurl('/problem/tag/' + this.tags[i]))
+          .then(res => {
+            let data = res.data;
+            this.rendertags.push({
+              color: data.res.color,
+              content: data.res.content
+            });
+          })
+          .catch(() => {
+
+          });
+      } 
+    },
     loadproblem() {
       this.$axios
         .get(apiurl('/problem/' + String(this.$route.params.id)))
@@ -107,7 +144,9 @@ export default {
           this.time = data.time_limit;
           this.hidden = !data.enabled;
           this.timeAdd = timeFormat(data.date_added);
+          this.tags = data.tags;
           this.problemLoading = false;
+          this.render_tags();
         })
         .catch(err => {
           if(err.request.status === 404) {
@@ -127,7 +166,8 @@ export default {
     this.loadproblem();
   },
   components: {
-    MarkdownContainer
+    MarkdownContainer,
+    SegmentTag
   }
 };
 </script>
@@ -146,6 +186,10 @@ export default {
     margin-top: 20px;
 }
 
+.margin-bottom {
+    margin-bottom: 15px;
+}
+
 @media only screen and (max-width: 700px) {
     #pannel {
         z-index: 1000;
@@ -193,11 +237,13 @@ export default {
     border: 1px solid #e4e7ed;
 }
 
-#full-screen-button {
+#full-screen-button,
+#tag-button {
     float: right;
 }
 
-#full-screen-button:hover {
+#full-screen-button:hover,
+#tag-button:hover {
     cursor: pointer;
 }
 

src/components/problem/edit.vue

@@ -43,8 +43,7 @@ export default {
     submit() {
       this.buttonLoading = true;
       this.$axios
-        .patch(apiurl('/problem/content'), {
-          pid: Number(this.$route.params.id),
+        .patch(apiurl('/problem/' + this.$route.params.id), {
           title: this.title,
           description: this.mdContent
         })