feat: 修正细化一系列测试相关的界面

src/components/Basic/CInput.vue

@@ -18,7 +18,7 @@ export default {
     event: 'input'
   },
   props: {
-    value: String,
+    value: [String, Number],
     placeholder: String,
     textarea: Boolean,
     type: String,

src/components/Cards/AnswerCard.vue

@@ -0,0 +1,44 @@
+<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>
+</template>
+
+<script>
+import momentFromNow from '@/utils/moment-from-now'
+
+export default {
+  name: 'AnswerCard',
+  props: {
+    answer: Object
+  },
+  methods: {
+    momentFromNow
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/style/theme.scss';
+.answer-card {
+  margin: 12px 0;
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: $card-background;
+  cursor: pointer;
+  transition: .2s;
+}
+
+.info {
+  line-height: 1.5;
+  font-size: 14px;
+  color: #6a7a8a;
+}
+
+.orange {
+  color: $theme-orange;
+}
+</style>

src/components/Cards/QuizCard.vue

@@ -2,14 +2,14 @@
   <div class="quiz-card" :to="navPath">
     <div class="quiz-card-title" @click="showMore = !showMore"
          :class="showMore ? 'quiz-card-title--active' : null">
-      <c-icon :theme="quiz.state === QuizState.ongoing ? 'green' : 'orange'" :left="-2" :right="6" :size="18" bold>
+      <c-icon :theme="stateAction.theme" :left="-2" :right="6" :size="18" bold>
         {{showMore ? 'expand_more' : 'keyboard_arrow_right'}}
       </c-icon>
       {{quiz.name || '暂无课程名称'}}
       <div class="spacer"></div>
       <router-link :to="navPath">
         <c-button theme="green" :standout="showMore" icon="arrow_forward">
-          {{quiz.state === QuizState.ongoing ? '开始做题' : '查看详情'}}
+          {{stateAction.action}}
         </c-button>
       </router-link>
     </div>
@@ -18,8 +18,9 @@
     </show-transition-small>
     <show-transition-small>
       <div v-if="showMore" class="quiz-card-row"
-           :class="quiz.state === QuizState.ongoing ? 'green' : 'orange'"
-      >测试状态：{{ QuizStateNaming[quiz.state] }}</div>
+           :class="stateAction.theme"
+      >测试状态：{{ QuizStateNaming[quiz.state] }}
+      </div>
     </show-transition-small>
     <show-transition-small>
       <div v-if="showMore" class="quiz-card-row">最大提交次数：{{ quiz.maxSubmitTime }}</div>
@@ -53,8 +54,28 @@ export default {
       type: Object,
       default: () => ({})
     },
+    isTeacher: Boolean,
     showMoreDefault: Boolean
   },
+  computed: {
+    stateAction () {
+      if (this.quiz.state === QuizState.notStart) {
+        if (this.isTeacher) {
+          return { action: '编辑题目', theme: 'orange' }
+        } else {
+          return { action: '尚未开题', theme: 'orange' }
+        }
+      } else if (this.quiz.state === QuizState.notStart) {
+        if (!this.isTeacher) {
+          return { action: '开始做题', theme: 'green' }
+        } else {
+          return { action: '查看详情', theme: 'green' }
+        }
+      } else {
+        return { action: '查看详情', theme: 'red' }
+      }
+    }
+  },
   data () {
     return {
       showMore: this.showMoreDefault,
@@ -125,7 +146,17 @@ export default {
 .green {
   color: $theme-green;
 }
+
 .orange {
   color: $theme-orange;
 }
+
+.blue {
+  color: $theme-blue;
+}
+
+.red {
+  color: $theme-red;
+}
+
 </style>

src/router/quiz.js

@@ -1,9 +1,4 @@
 export default [{
-  meta: { roles: ['teacher'] },
-  path: '/quiz-setting/:slideId',
-  name: 'teacher-quiz-setting',
-  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/TeacherQuizSetting.vue')
-}, {
   meta: { roles: ['teacher'] },
   path: '/quiz-setting/:slideId/create-quiz',
   name: 'teacher-quiz-create',

src/router/teacher.js

@@ -24,6 +24,11 @@ export default [{
       path: 'course-file-detail/:courseFileId',
       name: 'teacher-explore-course-file-detail',
       component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherCourseFileDetail.vue')
+    }, {
+      // 测试详情
+      path: '/quiz-setting/:slideId',
+      name: 'teacher-quiz-setting',
+      component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/teacher/components/TeacherQuizSetting.vue')
     }]
   }, {
     // 教师创建幻灯片

src/server/quiz.js

@@ -10,14 +10,14 @@ export function teacherGetQuizzes ({ slideId, key = '', page = 1, size = 200, so
 }
 
 // 学生获取测试列表
-export function studentGetQuizzes ({ slideId, key = '', page = 1, size = 20, sort = '' }) {
+export function studentGetQuizzes ({ slideId, key = '', page = 1, size = 100, sort = '' }) {
   const params = generateSearchParams({ key, page, size, sort })
   return axios.get(useQuizServer('/student/slide/' + slideId), { params })
     .then(res => res.data)
 }
 
 // 学生根据状态获取测试列表
-export function studentGetQuizzesByState ({ state, key = '', page = 1, size = 20, sort = '' }) {
+export function studentGetQuizzesByState ({ state, key = '', page = 1, size = 100, sort = '' }) {
   const params = generateSearchParams({ key, page, size, sort })
   params.append('state', state)
   return axios.get(useQuizServer('/student'), { params })
@@ -65,7 +65,7 @@ export function submitQuizStudentAnswer ({ quizId, answers = [] }) {
 }
 
 // 老师获取某一测试学生的作答列表
-export function getQuizStudentAnswers ({ quizId, key = '', page = 1, size = 20, sort = '' }) {
+export function getQuizStudentAnswers ({ quizId, key = '', page = 1, size = 1000, sort = '' }) {
   const params = generateSearchParams({ key, sort, size, page })
   return axios
     .get(useQuizServer(`/${quizId}/student-answers`), {

src/views/quiz/QuizDetail.vue

@@ -1,30 +1,51 @@
 <template>
   <div class="quiz-detail">
-    <back-title>{{ quizDetail.name }}</back-title>
-    <quiz-result v-if="quizDetail.state === QuizState.closed" :quiz-id="$route.params.quizId"/>
-    <quiz-detail-factory :quiz-detail="quizDetail"/>
+    <div class="info">
+      <back-title>{{ quizDetail.name }}</back-title>
+      <div class="sub-title">学生提交结果列表</div>
+      <template 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 class="quiz">
+      <div class="sub-title">学生答案：{{showStudentName ? showStudentName : '[ 未选择 ]'}}</div>
+      <quiz-detail-factory :quiz-detail="quizDetail" :score="showScore"
+                           :submit-at="showSubmitAt" :answers="showAnswers"/>
+    </div>
   </div>
 </template>
 
 <script>
 import { createDefaultQuiz } from '@/views/quiz/utils/default'
 import BackTitle from '@/components/Basic/BackTitle'
-import QuizDetailFactory from '@/views/quiz/components/QuizDetailFactory'
-import QuizResult from '@/views/quiz/components/QuizResult'
 import { QuizState } from '@/server/enums/quiz-state'
-import { getOneQuiz } from '@/server/quiz'
+import { getOneQuiz, getQuizStudentAnswers } from '@/server/quiz'
+import QuizDetailFactory from '@/views/quiz/components/QuizDetailFactory'
+import AnswerCard from '@/components/Cards/AnswerCard'
 
 export default {
   name: 'QuizDetail',
-  components: { QuizResult, QuizDetailFactory, BackTitle },
+  components: { AnswerCard, QuizDetailFactory, BackTitle },
   data () {
     return {
       quizDetail: createDefaultQuiz(),
+      result: [],
+      showStudentName: '',
+      showScore: '',
+      showSubmitAt: '',
+      showAnswers: [],
       QuizState
     }
   },
-  mounted () {
+  created () {
     this.fetchQuizDetail()
+    const { quizId } = this.$route.params
+    getQuizStudentAnswers({ quizId: quizId })
+      .then(res => {
+        this.result = res.data
+      })
+      .catch(err => { this.$setErrorMessage(err.response.data.msg) })
   },
   methods: {
     fetchQuizDetail () {
@@ -32,6 +53,12 @@ export default {
       getOneQuiz({ quizId })
         .then(res => (this.quizDetail = res))
         .catch(err => this.$setErrorMessage(err.response.data.msg))
+    },
+    handleSelectAnswer (answer) {
+      this.showScore = answer.score
+      this.showSubmitAt = answer.submitAt
+      this.showAnswers = answer.answers
+      this.showStudentName = answer.studentName
     }
   }
 }
@@ -39,8 +66,30 @@ export default {
 
 <style lang="scss" scoped>
 .quiz-detail {
-  max-width: 700px;
+  max-width: 1000px;
   margin: 0 auto;
   padding: 64px 24px;
 }
+
+@media (max-width: 800px) {
+
+}
+
+@media (min-width: 800px) {
+  .quiz-detail {
+    display: flex;
+    align-items: flex-start;
+  }
+  .info {
+    width: 100px;
+    padding: 0 24px;
+    flex: 1;
+  }
+  .quiz {
+    width: 100px;
+    padding: 0 12px;
+    flex: 1;
+  }
+}
+
 </style>

src/views/quiz/TeacherQuizSetting.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="teacher-quiz-setting">
-    <back-title>{{slideInfo ? slideInfo.name + '的所有测试' : '加载中...'}}</back-title>
-    <router-link :to="{ name:'teacher-quiz-create', params: { slideId: this.slideId }}">
-      <c-button theme="green" icon="add">新增测试</c-button>
-    </router-link>
-    <router-link to="/questions">
-      <c-button theme="blue" :left="12" icon="assignment">题库管理</c-button>
-    </router-link>
-    <div v-if="quizList === null" class="no-content-warning">加载中...</div>
-    <div v-for="item in quizList" :key="item.id" class="mt-24 quiz-card"
-         :class="item.state === QuizState.ongoing ? 'quiz-card-ongoing' : ''">
-      <div class="content">
-        <div class="content-title">{{ item.name }}</div>
-        <div class="content-info">测试时间：{{ SlideStateTranslation[item.quizTime] }}</div>
-        <div class="content-info">测试状态：{{ QuizStateNaming[item.state] }}</div>
-      </div>
-      <div class="actions">
-        <router-link :to="{ name: 'quiz-detail', params: { quizId: item.id }}">
-          <c-button no-bold theme="green" icon="more">详情</c-button>
-        </router-link>
-        <router-link :to="{ name: 'edit-quiz', params: { quizId: item.id }}">
-          <c-button theme="blue" icon="edit">编辑</c-button>
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import BackTitle from '@/components/Basic/BackTitle'
-import SlideStateTranslation from '@/server/enums/slide-state-translation'
-import { QuizStateNaming, QuizState } from '@/server/enums/quiz-state'
-import { getSlideInfo } from '@/server/slide'
-import CButton from '@/components/Basic/CButton'
-import { teacherGetQuizzes } from '@/server/quiz'
-
-export default {
-  name: 'TeacherQuizSetting',
-  components: { CButton, BackTitle },
-  data () {
-    return {
-      quizList: null,
-      slideInfo: null,
-
-      SlideStateTranslation,
-      QuizStateNaming,
-      QuizState
-    }
-  },
-  computed: {
-    slideId () {
-      return this.$route.params.slideId
-    }
-  },
-  created () {
-    getSlideInfo({ slideId: this.slideId }).then(res => {
-      this.slideInfo = res
-    }).catch(err => {
-      this.$setErrorMessage(err.response.data.msg)
-    })
-    this.fetchQuiz()
-  },
-  methods: {
-    fetchQuiz () {
-      const { slideId } = this.$route.params
-      teacherGetQuizzes({ slideId, size: 2000, sort: 'createAt,desc' })
-        .then(res => (this.quizList = res.data))
-        .catch(err => this.$setErrorMessage(err.response.data.msg))
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "~@/style/theme.scss";
-.teacher-quiz-setting {
-  max-width: 575px;
-  margin: 0 auto;
-  padding: 64px 24px;
-}
-
-.quiz-card {
-  font-size: 14px;
-  border: 1px solid #cadaea;
-  border-radius: 6px;
-  padding: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .content {
-    div {
-      margin: 8px 0;
-    }
-
-    .content-title {
-      font-size: 16px;
-    }
-
-    .content-info {
-      color: #7a8a9a;
-    }
-  }
-
-  .actions {
-    .c-button {
-      display: flex;
-      margin: 8px;
-    }
-  }
-
-  &-ongoing {
-    background-color: lighten($theme-green-transparent, 25);
-  }
-}
-</style>

src/views/quiz/components/QuizDetailFactory.vue

@@ -1,29 +1,33 @@
 <template>
   <div>
-    <template v-if="quizDetail.state === QuizState.closed">
-      <template v-if="!isEmpty(result.score) && !isEmpty(result.submitAt)">
-        <div class="quiz-info-standout">测试得分：{{result.score}} 分</div>
-        <div class="quiz-info-standout">最后提交时间：{{momentFromNow(result.submitAt)}}</div>
+    <div class="info">
+      <template v-if="quizDetail.state === QuizState.closed">
+        <template v-if="!isEmpty(score) || !isEmpty(submitAt)">
+          <div class="quiz-info-standout">测试得分：{{score}} 分</div>
+          <div class="quiz-info-standout">最后提交时间：{{momentFromNow(submitAt)}}</div>
+        </template>
       </template>
-      <template v-else>
-        <div class="no-content-warning">您未提交过答案</div>
-      </template>
-    </template>
-    <div class="quiz-info-standout">测试时间：{{ QuizTypeNaming[quizDetail.type] }}</div>
-    <div class="quiz-info-standout">测试状态：{{ QuizStateNaming[quizDetail.state] }}</div>
-    <div class="quiz-info">所属课件：{{ quizDetail.slideName }}</div>
-    <div class="quiz-info">提交次数限制：{{ quizDetail.maxSubmitTime }}</div>
-    <div class="quiz-info">发布时间：{{ momentFromNow(quizDetail.createAt) }}</div>
+      <div class="quiz-info-standout">测试时间：{{ QuizTypeNaming[quizDetail.type] }}</div>
+      <div class="quiz-info-standout">测试状态：{{ QuizStateNaming[quizDetail.state] }}</div>
+      <div class="quiz-info">所属课件：{{ quizDetail.slideName }}</div>
+      <div class="quiz-info">提交次数限制：{{ quizDetail.maxSubmitTime }}</div>
+      <div class="quiz-info">发布时间：{{ momentFromNow(quizDetail.createAt) }}</div>
+    </div>
     <div v-if="questions===null" class="no-content-warning">加载中...</div>
-    <div v-else class="mt-32 mb-32" :key="item.id" v-for="(item, index) in questions">
+    <div v-else class="mt-32 mb-32" :key="question.id" v-for="(question, index) in questions">
       <div class="index">题号：{{ index + 1 }}
-        <c-icon v-if="!isEmpty(answers[item.id])" bold :size="20" :left="16" :right="12"
-                :theme="item.answer.match(answers[item.id]) ? 'green' : 'red'">
-          {{ item.answer.match(answers[item.id]) ? 'check' : 'close' }}
-        </c-icon>
-        你的回答：{{answers[item.id]}}
+        <template v-if="answers">
+          <c-icon v-if="!isEmpty(answers[question.id])" bold :size="20" :left="16"
+                  :right="12"
+                  :theme="question.answer.match(answers[question.id]) ? 'green' : 'red'">
+            {{ question.answer.match(answers[question.id]) ? 'check' : 'close' }}
+          </c-icon>
+          <div v-if="answers[question.id]">
+            {{answers[question.id]}}
+          </div>
+        </template>
       </div>
-      <question-detail-factory :question="item"/>
+      <question-detail-factory :question="question"/>
     </div>
   </div>
 </template>
@@ -34,11 +38,10 @@ import QuestionKind from '@/server/enums/question-kind'
 import { QuizStateNaming, QuizState } from '@/server/enums/quiz-state'
 import QuestionDetailFactory from '@/views/quiz/components/QuestionDetailFactory'
 import { isEmpty } from '@/utils/types'
-import CIcon from '@/components/Basic/CIcon'
 import { QuizTypeNaming } from '@/server/enums/quiz-type'
 import momentFromNow from '@/utils/moment-from-now'
 import { getQuestionsOfQuiz } from '@/server/question'
-import { getOneQuizStudentAnswer } from '@/server/quiz'
+import CIcon from '@/components/Basic/CIcon'
 
 export default {
   components: { CIcon, QuestionDetailFactory },
@@ -46,14 +49,14 @@ export default {
     quizDetail: {
       type: Object,
       default: createDefaultQuiz
-    }
+    },
+    score: [Number, String],
+    submitAt: String,
+    answers: [Object, Array]
   },
   data () {
     return {
       questions: null,
-      answers: {},
-      result: {},
-
       QuizTypeNaming,
       QuestionKind,
       QuizState,
@@ -73,10 +76,6 @@ export default {
     getQuestionsOfQuiz({ quizId }).then(res => {
       this.questions = res
     }).catch(err => { this.$setErrorMessage(err.response.data.msg) })
-    getOneQuizStudentAnswer({ quizId }).then(res => {
-      this.answers = res ? res.answers ? res.answers : {} : {}
-      this.result = res || {}
-    }).catch(err => { this.$setErrorMessage(err.response.data.msg) })
   },
   methods: {
     isEmpty,
@@ -97,6 +96,12 @@ export default {
   }
 }
 
+.info {
+  background: #f7f7f7;
+  padding: 8px;
+  margin: 0 -8px;
+}
+
 .index {
   display: flex;
   align-items: center;

src/views/quiz/components/QuizEditor.vue

@@ -88,13 +88,6 @@ export default {
       QuizTypeNaming
     }
   },
-  mounted() {
-    getQuestionsOfQuiz({ quizId: this.quiz.id }).then(res => {
-      this.selectedQuestions = res
-    }).catch(err =>
-      this.$setErrorMessage(err.response.data.msg)
-    )
-  },
   computed: {
     selectItems () {
       return Object.keys(this.QuizTypeNaming).map(key => ({
@@ -106,9 +99,13 @@ export default {
   watch: {
     initQuiz: {
       immediate: true,
-      handler ({ id, name, type, maxSubmitTime, questions = [] } = {}) {
+      handler ({ id, name, type, maxSubmitTime } = {}) {
         this.quiz = { id, name, type, maxSubmitTime }
-        this.selectedQuestions = questions
+        id && getQuestionsOfQuiz({ quizId: id }).then(res => {
+          this.selectedQuestions = res
+        }).catch(err =>
+          this.$setErrorMessage(err.response.data.msg)
+        )
       }
     }
   },

src/views/quiz/components/QuizResult.vue

@@ -1,32 +0,0 @@
-<template>
-  <div>平均分：{{ result.average }}</div>
-</template>
-
-<script>
-import { getQuizResult } from '@/server/quiz-backup'
-
-export default {
-  name: 'QuizResult',
-  props: {
-    quizId: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      result: {}
-    }
-  },
-  watch: {
-    quizId: {
-      immediate: true,
-      handler(id) {
-        getQuizResult(id)
-          .then(res => (this.result = res))
-          .catch(err => this.$setErrorMessage(err.response.data.msg))
-      }
-    }
-  }
-}
-</script>

src/views/student/components/StudentQuizDetail.vue

@@ -4,7 +4,13 @@
     <router-link v-if="quiz.state === QuizState.ongoing" :to="{ name: 'student-do-quiz', params: { quizId: quiz.id}}">
       <c-button class="mb-16" theme="green" icon="edit">开始做题</c-button>
     </router-link>
-    <quiz-detail-factory :quiz-detail="quiz"/>
+    <template v-if="studentAnswer">
+      <quiz-detail-factory v-if="quiz" :quiz-detail="quiz" :score="studentAnswer.score" :answers="studentAnswer.answers"
+                           :submit-at="studentAnswer.submitAt"/>
+    </template>
+    <template v-else>
+      <quiz-detail-factory v-if="quiz" :quiz-detail="quiz"/>
+    </template>
   </div>
 </template>
 
@@ -14,7 +20,7 @@ import QuizDetailFactory from '@/views/quiz/components/QuizDetailFactory'
 import { QuizState } from '@/server/enums/quiz-state'
 import { createDefaultQuiz } from '@/views/quiz/utils/default'
 import CButton from '@/components/Basic/CButton'
-import { getOneQuiz } from '@/server/quiz'
+import { getOneQuiz, getOneQuizStudentAnswer } from '@/server/quiz'
 
 export default {
   name: 'StudentQuizDetail',
@@ -22,6 +28,7 @@ export default {
   data () {
     return {
       quiz: createDefaultQuiz(),
+      studentAnswer: {},
 
       QuizState
     }
@@ -35,7 +42,11 @@ export default {
     }
   },
   mounted () {
+    const { quizId } = this.$route.params
     this.fetchQuizDetail()
+    getOneQuizStudentAnswer({ quizId }).then(res => {
+      this.studentAnswer = Object.assign({}, this.studentAnswer, res)
+    }).catch(err => { this.$setErrorMessage(err.response.data.msg) })
   },
   methods: {
     fetchQuizDetail () {

src/views/teacher/components/EditNotice.vue

@@ -31,7 +31,6 @@ export default {
   mounted () {
     if (this.noticeId !== 0) {
       getNoticeByNoticeId({ noticeId: this.noticeId }).then(res => {
-        console.log(res)
         this.title = res.title
         this.content = res.content
       })

src/views/teacher/components/TeacherQuizSetting.vue

@@ -0,0 +1,83 @@
+<template>
+  <tab-side-component class="teacher-quiz-setting">
+    <back-title>
+      测试列表
+      <c-button :theme="showActions ? 'orange' : 'normal'" :left="8" text icon="settings"
+                @click="showActions = !showActions">设置
+      </c-button>
+    </back-title>
+    <tab-actions :if-condition="showActions">
+      <router-link :to="{ name:'teacher-quiz-create', params: { slideId: this.slideId }}">
+        <c-button theme="green" icon="add">新增测试</c-button>
+      </router-link>
+      <router-link :to="{ name: 'questions' }">
+        <c-button theme="blue" :left="12" icon="assignment">题库管理</c-button>
+      </router-link>
+    </tab-actions>
+    <div class="mb-16">课件：{{slideInfo ? slideInfo.name : '加载中...'}}</div>
+    <div v-if="quizList === null" class="no-content-warning">加载中...</div>
+    <quiz-card is-teacher :key="quiz.id" v-for="quiz in quizList" :quiz="quiz" :nav-path="navPath(quiz)"></quiz-card>
+  </tab-side-component>
+</template>
+
+<script>
+import BackTitle from '@/components/Basic/BackTitle'
+import SlideStateTranslation from '@/server/enums/slide-state-translation'
+import { QuizStateNaming, QuizState } from '@/server/enums/quiz-state'
+import { getSlideInfo } from '@/server/slide'
+import CButton from '@/components/Basic/CButton'
+import { teacherGetQuizzes } from '@/server/quiz'
+import { QuizTypeNaming } from '@/server/enums/quiz-type'
+import TabSideComponent from '@/components/Layouts/TabSideComponent'
+import QuizCard from '@/components/Cards/QuizCard'
+import TabActions from '@/components/Layouts/TabActions'
+
+export default {
+  name: 'TeacherQuizSetting',
+  components: { TabActions, QuizCard, TabSideComponent, CButton, BackTitle },
+  data () {
+    return {
+      quizList: null,
+      slideInfo: null,
+      showActions: true,
+
+      SlideStateTranslation,
+      QuizStateNaming,
+      QuizState,
+      QuizTypeNaming
+    }
+  },
+  computed: {
+    slideId () {
+      return this.$route.params.slideId
+    }
+  },
+  created () {
+    getSlideInfo({ slideId: this.slideId }).then(res => {
+      this.slideInfo = res
+    }).catch(err => {
+      this.$setErrorMessage(err.response.data.msg)
+    })
+    this.fetchQuiz()
+  },
+  methods: {
+    fetchQuiz () {
+      const { slideId } = this.$route.params
+      teacherGetQuizzes({ slideId, size: 2000, sort: 'createAt,desc' })
+        .then(res => (this.quizList = res.data))
+        .catch(err => this.$setErrorMessage(err.response.data.msg))
+    },
+    navPath (quiz) {
+      if (quiz.state === QuizState.notStart) {
+        return { name: 'edit-quiz', params: { quizId: quiz.id } }
+      } else {
+        return { name: 'quiz-detail', params: { quizId: quiz.id } }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/style/theme.scss";
+</style>

src/views/teacher/components/TeacherSlideDetail.vue

@@ -10,6 +10,7 @@
     <show-transition>
       <slide-detail v-if="showMore" :slide="slide"></slide-detail>
     </show-transition>
+    <div class="mb-24"><strong class="">{{slide.name}}</strong></div>
     <c-button block theme="blue" standout class="mb-12" @click="handleReadSlide" icon="play_arrow" no-bold>浏览课件
     </c-button>
     <a :href="slideUrl">
@@ -69,7 +70,7 @@ export default {
       slideStateTranslation,
       newSlideName: '',
       showMore: false,
-      showSettings: false
+      showSettings: true
     }
   },
   computed: {