feat: 修改通知样式，修改transition有时不够高的问题，左上角添加主页按钮，登录输入密码后回车直接调用登录功能，添加教师查看所有quiz的按钮（todo）

src/animations/ShowTransition.vue

@@ -31,14 +31,14 @@ export default {
   }
   100% {
     opacity: 1;
-    max-height: 200px;
+    max-height: 300px;
   }
 }
 
 @keyframes hide {
   0% {
     opacity: 1;
-    max-height: 200px;
+    max-height: 300px;
   }
   50% {
     opacity: 0;

src/common-style.scss

@@ -78,6 +78,10 @@
   margin-bottom: 32px;
 }
 
+.mt-6 {
+  margin-top: 6px;
+}
+
 .mt-8 {
   margin-top: 8px;
 }

src/components/Cards/NoticeCard.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="notice-card" @click="showMore = !showMore">
-    <div class="notice-card-title" :class="showMore ? 'cancel-bottom-radius' : null">
-      <c-icon>notifications</c-icon>
+  <div class="notice-card">
+    <div class="notice-card-title" @click="showMore = !showMore" :class="showMore ? 'cancel-bottom-radius' : null">
+      <c-icon color="orange">notifications</c-icon>
       课程公告：{{notice.title}}
       <c-icon bold class="more-icon">{{showMore ? 'expand_less' : 'expand_more'}}</c-icon>
     </div>
     <show-transition>
       <div v-if="showMore" class="notice-card-info">
-        {{notice.content}}
+        <pre>{{notice.content}}</pre>
       </div>
     </show-transition>
     <show-transition-small>
@@ -57,29 +57,28 @@ export default {
   margin: 8px 0;
   border-radius: 12px;
   transition: .2s;
-  cursor: pointer;
-  background: $theme-green-transparent;
+  background: lighten($card-background, 2);
 }
 
 .notice-card-title {
-  background-color: $theme-green;
+  background-color: darken($card-background, 3);
   border-radius: 12px;
   font-size: 14px;
-  color: white;
+  color: #2a3a4a;
   padding: 8px 12px;
+  cursor: pointer;
 
   .c-icon {
     transform-origin: top;
     transform: scale(1.25);
-    color: white;
   }
 }
 
 .notice-card-info {
   font-size: 13px;
-  color: #839a91;
+  color: #4a5a6a;
   line-height: 1.7;
-  margin: 6px 12px;
+  margin: 0 12px;
 }
 
 .notice-card-time {
@@ -92,7 +91,8 @@ export default {
 
   .c-button {
     padding: 4px 12px;
-    background: rgba(255, 255, 255, .8);
+    background: white;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
 
     &:hover {
       background: white;
@@ -108,4 +108,9 @@ export default {
   display: inline-block;
   float: right;
 }
+
+pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
 </style>

src/enums/slide-state-translation.js

@@ -2,8 +2,8 @@ import slideState from '@/enums/slide-state'
 
 export default {
   [slideState.draft]: '草稿',
-  [slideState.beforeClass]: '未上课',
+  [slideState.beforeClass]: '课前',
   [slideState.inClass]: '课堂中',
-  [slideState.afterClass]: '已上课',
-  [slideState.finish]: '测验结束'
+  [slideState.afterClass]: '课后',
+  [slideState.finish]: '课后测验结束'
 }

src/router/quiz.js

@@ -8,6 +8,11 @@ export default [{
   path: '/quiz-detail/:quizId',
   name: 'quiz-detail',
   component: () => import(/* webpackChunkName: "teacher-quiz" */ '@/views/quiz/QuizDetail.vue')
+}, {
+  meta: { roles: ['teacher'] },
+  path: '/all-quiz',
+  name: 'all-quiz',
+  component: () => import(/* webpackChunkName: "teacher-quiz" */ '@/views/quiz/TeacherCheckAllQuiz.vue')
 }, {
   meta: { roles: ['teacher'] },
   path: '/quiz-detail/:quizId/edit',

src/utils/state-color.js

@@ -1,9 +1,11 @@
+import slideState from '@/enums/slide-state'
+
 export default function stateColor(state) {
-  if (state === 'IN_CLASS') {
+  if (state === slideState.inClass) {
     return 'green'
-  } else if (state === 'DRAFT') {
+  } else if (state === slideState.draft) {
     return 'red'
-  } else if (state === 'BEFORE_CLASS' || state === 'FINISH') {
+  } else if (state === slideState.beforeClass) {
     return 'orange'
   } else {
     return 'blue'

src/views/login/Login.vue

@@ -9,7 +9,7 @@
       <section class="tip mb-24">
         <div>邮箱要求是国内教育邮箱（即以 edu.cn 结尾）</div>
       </section>
-      <c-input class="mb-24" placeholder="密码" type="password" v-model="password"></c-input>
+      <c-input class="mb-24" placeholder="密码" type="password" v-model="password" @keydown.native="handleEnterKey"></c-input>
       <div class="button-area">
         <c-button standout theme="blue" @click="handleSubmit" :no-click-warn="!formChecked()">登录</c-button>
         <c-button theme="blue" @click="handleToRegister">去注册</c-button>
@@ -77,6 +77,11 @@ export default {
           .catch(err => { this.$setErrorMessage(err.response.data.msg) })
       }
     },
+    handleEnterKey (e) {
+      if (e.key === 'Enter') {
+        this.handleSubmit()
+      }
+    },
     handleToRegister () {
       this.$router.push({ name: 'register' })
     }

src/views/quiz/TeacherCheckAllQuiz.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    // 在这里查看各个状态的所有测试，等待后端添加 api
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TeacherCheckAllQuiz'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/quiz/components/QuizStatistic.vue

@@ -9,8 +9,8 @@
       分数分布
     </div>
     <div>
-      <la-polar fill-container v-if="statistic" :data="submitTimesValues"  :width="180" :height="180">
-        <la-pie show-label label-prop="name" show-value :font-size="12" prop="pv"></la-pie>
+      <la-polar fill-container v-if="statistic" :data="submitTimesValues"  :width="200" :height="200">
+        <la-pie show-label label-prop="name" :font-size="12" prop="pv"></la-pie>
       </la-polar>
       提交次数分布
     </div>

src/views/shared/UserHomeLayout.vue

@@ -33,6 +33,7 @@
         </icon-button>
       </template>
     </div>
+    <c-button class="home" text @click="handleToHome" icon="home">主页</c-button>
     <c-button class="exit" text @click="handleLogout" icon="exit_to_app">注销</c-button>
   </div>
 </template>
@@ -74,6 +75,9 @@ export default {
     handleIconButtonClick (name) {
       this.$router.push(`/${this.role}/${name}`)
     },
+    handleToHome () {
+      this.$router.push(`/${this.role}`)
+    },
     handleLogout () {
       logout()
       this.$setSuccessMessage('您已退出登录')
@@ -167,17 +171,24 @@ export default {
   }
 }
 
-.exit {
+.exit, .home {
   z-index: 4;
   cursor: pointer;
   position: absolute;
   top: 10px;
-  right: 10px;
   display: flex;
   align-items: center;
   color: #6a7a8a;
 }
 
+.exit {
+  right: 10px;
+}
+
+.home {
+  left: 10px;
+}
+
 @supports (not(backdrop-filter: saturate(180%) blur(15px))) {
   .menu-container-small {
     background: rgb(255, 255, 255);

src/views/student/components/StudentCourseSlides.vue

@@ -28,13 +28,13 @@
                    :notice="notice">
       </notice-card>
     </template>
-    <div v-for="slide of slides" class="mt-8" :key="'slide-' + slide.id">
+    <div v-for="slide of slides" class="mt-6" :key="'slide-' + slide.id">
       <slide-card :hide-course="!showMore" :hide-teacher="!showMore"
                   :slide="slide" :hide-update-time="!showMore"
                   :click-handler="handleSlideCardClick"></slide-card>
     </div>
     <template v-for="courseFile of courseFiles">
-      <course-file-card :key="'file-' + courseFile.id" :hide-time="!showMore" :click-handler="handleCourseFileCardClick"
+      <course-file-card class="mt-6" :key="'file-' + courseFile.id" :hide-time="!showMore" :click-handler="handleCourseFileCardClick"
                         :courseFile="courseFile">
       </course-file-card>
     </template>

src/views/teacher/components/TeacherCourseSlides.vue

@@ -32,12 +32,12 @@
       <div class="no-content-warning-tip">本课程尚无课件～</div>
       <c-button block theme="blue" @click="handleToCreateCourse">去创建课件</c-button>
     </div>
-    <div v-for="slide of slides" class="mt-8" :key="slide.id">
+    <div v-for="slide of slides" class="mt-6" :key="slide.id">
       <slide-card :hide-teacher="!showMore" :hide-course="!showMore" :hide-update-time="!showMore"
                   :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
     </div>
     <template v-for="courseFile of courseFiles">
-      <course-file-card :key="'file-' + courseFile.id" :hide-time="!showMore" :click-handler="handleCourseFileCardClick"
+      <course-file-card class="mt-6" :key="'file-' + courseFile.id" :hide-time="!showMore" :click-handler="handleCourseFileCardClick"
                   :courseFile="courseFile">
       </course-file-card>
     </template>

src/views/teacher/tabs/TeacherExplore.vue

@@ -4,18 +4,24 @@
       <h1 class="title">
         我的主页
         <c-button :theme="showActions ? 'orange' : 'normal'" :left="8" text icon="settings"
-                  @click="showActions = !showActions">设置 & 题库
+                  @click="showActions = !showActions">设置
         </c-button>
       </h1>
       <tab-actions :if-condition="showActions">
-        <router-link :to="{name: 'questions'}">
-          <c-button :right="8" theme="green" icon="assignment">题库设置</c-button>
-        </router-link>
-        <c-button theme="blue" :icon="showMore ? 'unfold_less' : 'unfold_more'" @click="showMore = !showMore">
+        <c-button theme="green" :icon="showMore ? 'unfold_less' : 'unfold_more'" @click="showMore = !showMore">
           {{showMore ? '收起' : '展开'}}详情
         </c-button>
       </tab-actions>
       <!--      <search-bar></search-bar>-->
+      <section class="mb-24">
+        <h1 class="sub-title">我的测试</h1>
+        <router-link :to="{ name: 'all-quiz'}">
+          <c-button theme="green" icon="edit">所有测试</c-button>
+        </router-link>
+        <router-link :to="{name: 'questions'}">
+          <c-button :left="8" theme="blue" icon="assignment">题库设置</c-button>
+        </router-link>
+      </section>
       <section class="mb-24">
         <h1 class="sub-title">最近编辑</h1>
         <div class="no-content-warning" v-if="slides === null">