feat: 修改查看测试学生答案的显示效果，增加分页功能

src/components/Cards/AnswerCard.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="answer-card" @click="$emit('click')">
-    <div class="info">学生姓名：{{answer.studentName}}</div>
-    <div class="info">提交次数：{{answer.submitNumber}}</div>
-    <div class="info">最近提交：{{momentFromNow(answer.submitAt)}}</div>
-    <div class="info orange">分数：{{answer.score}}</div>
+    <div class="info grey">学生姓名：{{answer.studentName}}</div>
+    <div class="info grey">提交次数：{{answer.submitNumber}}</div>
+    <div class="info grey">最近提交：{{momentFromNow(answer.submitAt)}}</div>
+    <div class="info green">分数：{{answer.score}}</div>
   </div>
 </template>
 
@@ -23,22 +23,27 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
+
 .answer-card {
   margin: 12px 0;
   padding: 8px 12px;
-  border-radius: 12px;
-  background: $card-background;
+  border-radius: 4px;
   cursor: pointer;
-  transition: .2s;
+  transition: .3s;
+  border: 1px solid darken($card-background, 5);
+
+  &:hover {
+    background-color: $card-background;
+    box-shadow: 2px 4px 6px rgba(0, 0, 0, .05);
+  }
 }
 
 .info {
   line-height: 1.5;
   font-size: 14px;
-  color: #6a7a8a;
 }
 
-.orange {
-  color: $theme-orange;
+.grey {
+  color: #4a5a6a;
 }
 </style>

src/components/Pagination.vue

@@ -165,7 +165,7 @@ input {
   border-radius: 1000px;
   width: 34px;
   height: 34px;
-  margin: 0 8px;
+  margin: 0 6px;
 }
 
 .page-input {

src/config/server-info.js

@@ -4,7 +4,7 @@
 
 // const host = 'http://106.14.178.184:8080/seec_helper'
 // const host = 'http://192.168.3.70:18080'
-const host = process.env.NODE_ENV === 'development' ? 'http://localhost:8080' : ''
+const host = process.env.NODE_ENV === 'development' ? 'http://helper.seecoder.cn' : ''
 const wsHost = process.env.NODE_ENV === 'development' ? 'ws://localhost:8080' : 'ws://' + location.host
 
 const adminUrl = host + '/api/admin'
@@ -37,12 +37,12 @@ const useNoticeServer = postfix => postfix ? noticeUrl + postfix : noticeUrl
 
 // 题库（问题）
 // const questionUrl = host + '/api/question'
-const questionUrl = '/api/question'
+const questionUrl = host + '/api/question'
 const useQuestionServer = (postfix = '') => questionUrl + postfix
 
 // 测试
 // const quizUrl = host + '/api/quiz'
-const quizUrl = '/api/quiz'
+const quizUrl = host + '/api/quiz'
 const useQuizServer = (postfix = '') => quizUrl + postfix
 
 // 教师回复学生问题

src/views/forget-password/ForgetPassword.vue

@@ -22,6 +22,7 @@ import CInput from '@/components/Basic/CInput'
 import CButton from '@/components/Basic/CButton'
 import { resetPasswordByEmail } from '@/server/user'
 import { sendEmailCode } from '@/server/code'
+
 export default {
   components: { CButton, CInput, BackTitle },
   data () {
@@ -65,7 +66,8 @@ export default {
       }
 
       resetPasswordByEmail({ email: this.email, code: this.code, password: this.password }).then(res => {
-        this.$setInfoMessage('密码修改成功')
+        this.$setSuccessMessage('密码修改成功')
+        this.$router.push({ name: 'login' })
       }).catch(err => {
         this.$setErrorMessage(err.response.data.msg)
       })
@@ -76,11 +78,13 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/style/theme.scss";
+
 .forget-password {
   display: flex;
   min-height: 100vh;
   align-items: center;
   justify-content: center;
+
   & > div {
     flex: 1;
     max-width: 400px;

src/views/quiz/QuizDetail.vue

@@ -5,14 +5,14 @@
         {{ quizDetail.name }}
         <c-button class="delete-button" :left="12" text theme="red" @click="handleDelete" icon="close">删除测试</c-button>
       </back-title>
-      <div class="sub-title">学生提交结果列表</div>
-      <search-bar></search-bar>
+      <div class="sub-title mb-16">学生提交结果列表</div>
+      <search-bar v-model="searchKey"></search-bar>
       <pagination @change="handlePageChange" v-show="result && result.length > 0" :page="page" :size="size"
                   :total-elements="totalElements"></pagination>
-      <template v-if="quizDetail.state === QuizState.closed || quizDetail.state === QuizState.ongoing">
+      <div class="answer-card-container" v-if="quizDetail.state === QuizState.closed || quizDetail.state === QuizState.ongoing">
         <answer-card @click="handleSelectAnswer(answer)" v-for="answer of result" :key="answer.studentId"
                      :answer="answer"></answer-card>
-      </template>
+      </div>
     </div>
     <div class="quiz">
       <div class="sub-title">学生答案：{{showStudentName ? showStudentName : '[ 未选择 ]'}}</div>
@@ -32,6 +32,7 @@ import AnswerCard from '@/components/Cards/AnswerCard'
 import CButton from '@/components/Basic/CButton'
 import Pagination from '@/components/Pagination'
 import SearchBar from '@/components/Basic/SearchBar'
+import debounce from '@/utils/debounce'
 
 export default {
   name: 'QuizDetail',
@@ -41,6 +42,7 @@ export default {
       page: 1,
       size: 12,
       totalElements: 1,
+      searchKey: '',
 
       quizDetail: createDefaultQuiz(),
       result: [],
@@ -49,12 +51,21 @@ export default {
       showSubmitAt: '',
       showAnswers: [],
 
-      QuizState
+      QuizState,
+      debounceSearch: debounce(() => {
+        this.page = 1
+        this.fetchQuizStudentAnswers({})
+      }, 500)
     }
   },
   created () {
     this.fetchQuizDetail()
-    this.fetchQuizStudentAnswers({ page: 1 })
+    this.fetchQuizStudentAnswers({})
+  },
+  watch: {
+    searchKey () {
+      this.debounceSearch()
+    }
   },
   methods: {
     fetchQuizDetail () {
@@ -65,9 +76,10 @@ export default {
     },
     fetchQuizStudentAnswers ({ page = this.page }) {
       const { quizId } = this.$route.params
-      getQuizStudentAnswers({ quizId: quizId })
+      getQuizStudentAnswers({ quizId: quizId, page, size: this.size, key: this.searchKey })
         .then(res => {
           this.result = res.data
+          this.totalElements = res.page.totalElements
         })
         .catch(err => { this.$setErrorMessage(err.response.data.msg) })
     },
@@ -89,7 +101,8 @@ export default {
       }
     },
     handlePageChange ({ page }) {
-
+      this.page = page
+      this.fetchQuizStudentAnswers({ page })
     }
   }
 }
@@ -97,7 +110,7 @@ export default {
 
 <style lang="scss" scoped>
 .quiz-detail {
-  max-width: 1000px;
+  max-width: 1100px;
   margin: 0 auto;
   padding: 64px 24px;
 }
@@ -106,6 +119,17 @@ export default {
   float: right;
 }
 
+.answer-card-container {
+  margin: 32px 0;
+  column-width: 150px;
+  column-gap: 12px;
+
+  .answer-card {
+    margin: 0 0 12px 0;
+    break-inside: avoid;
+  }
+}
+
 @media (max-width: 800px) {
 
 }
@@ -121,9 +145,12 @@ export default {
     flex: 1;
   }
   .quiz {
+    margin: -32px 0;
     width: 100px;
-    padding: 0 12px;
+    padding: 32px 24px 32px 12px;
     flex: 1;
+    max-height: calc(100vh - 128px);
+    overflow: auto;
   }
 }
 

src/views/quiz/components/QuizDetailFactory.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="quiz-detail-factory">
     <div class="info">
       <template v-if="quizDetail.state === QuizState.closed">
         <template v-if="!isEmpty(score) || !isEmpty(submitAt)">
@@ -23,7 +23,9 @@
             {{ answers[question.id].correct ? 'check' : 'close' }}
           </c-icon>
           <div v-if="answers[question.id]">
-            {{answers[question.id].answer}}
+            {{typeof answers[question.id].answer === 'boolean'
+              ? answers[question.id].answer ? '对' : '错'
+              : answers[question.id].answer}}
           </div>
         </template>
       </div>