fix: 修正界面下方按钮消失的问题

src/components/Basic/FullScreenForm.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="full-screen-form">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FullScreenForm'
+}
+</script>
+
+<style lang="scss" scoped>
+.full-screen-form {
+  display: flex;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+}
+</style>

src/router/index.js

@@ -1,184 +1,26 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import teacher from '@/router/teacher'
+import student from '@/router/student'
+import main from '@/router/main'
+import quiz from '@/router/quiz'
+import pdf from '@/router/pdf'
 
 Vue.use(VueRouter)
 
-const routes = [{
-  path: '/',
-  name: 'home',
-  component: Home
-}, {
-  path: '/login',
-  name: 'login',
-  component: () => import(/* webpackChunkName: "main" */ '../views/login/Login.vue')
-}, {
-  path: '/register',
-  name: 'register',
-  component: () => import(/* webpackChunkName: "main" */ '../views/register/Register.vue')
-}, {
-  path: '/forget-password',
-  name: 'forget-password',
-  component: () => import(/* webpackChunkName: "main" */ '../views/forget-password/ForgetPassword.vue')
-}, {
-  meta: { roles: ['teacher', 'student'] },
-  path: '/pdf-reader',
-  name: 'pdf-reader',
-  component: () => import(/* webpackChunkName: "pdf-reader" */ '../views/reader/PdfReader.vue')
-}, {
-  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',
-  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/CreateQuiz.vue')
-}, {
-  meta: { roles: ['teacher'] },
-  path: '/quiz-detail/:quizId',
-  name: 'quiz-detail',
-  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/QuizDetail.vue')
-}, {
-  meta: { roles: ['teacher'] },
-  path: '/quiz-detail/:quizId/edit',
-  name: 'edit-quiz',
-  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/EditQuiz.vue')
-}, {
-  meta: { roles: ['student'] },
-  path: '/quiz/:slideId',
-  name: 'quiz',
-  component: () => import(/* webpackChunkName: "student-quiz" */ '../views/quiz/QuizView.vue')
-}, {
-  meta: { roles: ['teacher'] },
-  path: '/questions',
-  name: 'questions',
-  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/Questions.vue')
-}, {
-  meta: { roles: ['teacher'] },
-  path: '/questions/:questionId',
-  name: 'question-detail',
-  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/QuestionDetail.vue')
-}, {
-  meta: { roles: ['teacher'] },
-  path: '/questions/:questionId/edit',
-  name: 'edit-question',
-  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/EditQuestion.vue')
-}, {
-  meta: { roles: ['teacher'] },
-  path: '/create-question',
-  name: 'create-question',
-  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/CreateQuestion.vue')
-}, {
-  meta: { roles: ['student'] },
-  path: '/student/quiz/:quizId/do-quiz',
-  name: 'student-do-quiz',
-  component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentDoQuiz.vue')
-}, {
-  meta: { roles: ['student'] },
-  path: '/student/quiz/:quizId',
-  name: 'student-quiz-detail',
-  component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentQuizDetail.vue')
-}, {
-  meta: { roles: ['teacher'] },
-  path: '/teacher',
-  name: 'teacher',
-  redirect: '/teacher/explore',
-  component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/TeacherHome.vue'),
-  children: [{
-    path: 'explore',
-    name: 'teacher-explore',
-    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/TeacherExplore.vue'),
-    children: [{
-      path: 'course-slides/:courseId',
-      name: 'teacher-course-slides',
-      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherCourseSlides.vue')
-    }, {
-      path: 'slide-detail/:slideId',
-      name: 'teacher-explore-slide-detail',
-      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherSlideDetail.vue')
-    }, {
-      path: 'course-file-detail/:courseFileId',
-      name: 'teacher-explore-course-file-detail',
-      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherCourseFileDetail.vue')
-    }]
-  }, {
-    path: 'create-slide',
-    name: 'create-slide',
-    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/CreateSlide.vue')
-  }, {
-    path: 'courses',
-    name: 'teacher-courses',
-    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/TeacherCoursesManager.vue'),
-    children: [{
-      path: 'create-new',
-      name: 'create-new-course',
-      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/CreateNewCourse.vue')
-    }, {
-      path: 'course-detail/:courseId',
-      name: 'teacher-course-detail',
-      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherCourseDetail.vue')
-    }]
-  }, {
-    path: 'discussion',
-    name: 'teacher-discussion',
-    component: () => import(/* webpackChunkName: "teacher" */ '../views/shared/Discussion.vue')
-  }, {
-    path: 'personal',
-    name: 'teacher-personal',
-    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/TeacherPersonal.vue')
-  }]
-}, {
-  meta: { roles: ['student'] },
-  path: '/student',
-  name: 'student',
-  redirect: '/student/explore',
-  component: () => import(/* webpackChunkName: "student" */ '../views/student/StudentHome.vue'),
-  children: [{
-    path: 'explore',
-    name: 'student-explore',
-    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentExplore.vue'),
-    children: [{
-      path: 'course-slides/:courseId',
-      name: 'student-course-slides',
-      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentCourseSlides.vue')
-    }, {
-      path: 'slide-detail/:slideId',
-      name: 'student-explore-slide-detail',
-      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentSlideDetail.vue')
-    }, {
-      path: 'course-file-detail/:courseFileId',
-      name: 'student-explore-course-file-detail',
-      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentCourseFileDetail.vue')
-    }]
-  }, {
-    path: 'quiz',
-    name: 'student-quiz',
-    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentQuiz.vue')
-  }, {
-    path: 'courses',
-    name: 'student-courses',
-    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentCoursesManager.vue'),
-    children: [{
-      path: 'join-course/:courseId',
-      name: 'join-course',
-      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/JoinCourse.vue')
-    }, {
-      path: 'course-detail/:courseId',
-      name: 'student-course-detail',
-      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentCourseDetail.vue')
-    }]
-  }, {
-    path: 'discussion',
-    name: 'student-discussion',
-    component: () => import(/* webpackChunkName: "student" */ '../views/shared/Discussion.vue')
-  }, {
-    path: 'personal',
-    name: 'student-personal',
-    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentPersonal.vue')
-  }]
-}]
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home
+  },
+  ...main,
+  ...quiz,
+  ...pdf,
+  ...teacher,
+  ...student
+]
 
 const router = new VueRouter({
   mode: 'hash',

src/router/main.js

@@ -0,0 +1,13 @@
+export default [{
+  path: '/login',
+  name: 'login',
+  component: () => import(/* webpackChunkName: "main" */ '../views/login/Login.vue')
+}, {
+  path: '/register',
+  name: 'register',
+  component: () => import(/* webpackChunkName: "main" */ '../views/register/Register.vue')
+}, {
+  path: '/forget-password',
+  name: 'forget-password',
+  component: () => import(/* webpackChunkName: "main" */ '../views/forget-password/ForgetPassword.vue')
+}]

src/router/pdf.js

@@ -0,0 +1,8 @@
+export default [
+  {
+    meta: { roles: ['teacher', 'student'] },
+    path: '/pdf-reader',
+    name: 'pdf-reader',
+    component: () => import(/* webpackChunkName: "pdf-reader" */ '../views/reader/PdfReader.vue')
+  }
+]

src/router/quiz.js

@@ -0,0 +1,57 @@
+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',
+  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/CreateQuiz.vue')
+}, {
+  meta: { roles: ['teacher'] },
+  path: '/quiz-detail/:quizId',
+  name: 'quiz-detail',
+  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/QuizDetail.vue')
+}, {
+  meta: { roles: ['teacher'] },
+  path: '/quiz-detail/:quizId/edit',
+  name: 'edit-quiz',
+  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/EditQuiz.vue')
+}, {
+  meta: { roles: ['student'] },
+  path: '/quiz/:slideId',
+  name: 'quiz',
+  component: () => import(/* webpackChunkName: "student-quiz" */ '../views/quiz/QuizView.vue')
+}, {
+  meta: { roles: ['teacher'] },
+  path: '/questions',
+  name: 'questions',
+  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/Questions.vue')
+}, {
+  meta: { roles: ['teacher'] },
+  path: '/questions/:questionId',
+  name: 'question-detail',
+  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/QuestionDetail.vue')
+}, {
+  meta: { roles: ['teacher'] },
+  path: '/questions/:questionId/edit',
+  name: 'edit-question',
+  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/EditQuestion.vue')
+}, {
+  meta: { roles: ['teacher'] },
+  path: '/create-question',
+  name: 'create-question',
+  component: () => import(/* webpackChunkName: "teacher-quiz" */ '../views/quiz/CreateQuestion.vue')
+}, {
+  meta: { roles: ['student'] },
+  path: '/student/quiz/:quizId/do-quiz',
+  name: 'student-do-quiz',
+  component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentDoQuiz.vue')
+}, {
+  meta: { roles: ['student'] },
+  path: '/student/quiz/:quizId',
+  name: 'student-quiz-detail',
+  component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentQuizDetail.vue')
+}
+]

src/router/student.js

@@ -0,0 +1,50 @@
+export default [{
+  meta: { roles: ['student'] },
+  path: '/student',
+  name: 'student',
+  redirect: '/student/explore',
+  component: () => import(/* webpackChunkName: "student" */ '../views/student/StudentHome.vue'),
+  children: [{
+    path: 'explore',
+    name: 'student-explore',
+    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentExplore.vue'),
+    children: [{
+      path: 'course-slides/:courseId',
+      name: 'student-course-slides',
+      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentCourseSlides.vue')
+    }, {
+      path: 'slide-detail/:slideId',
+      name: 'student-explore-slide-detail',
+      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentSlideDetail.vue')
+    }, {
+      path: 'course-file-detail/:courseFileId',
+      name: 'student-explore-course-file-detail',
+      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentCourseFileDetail.vue')
+    }]
+  }, {
+    path: 'quiz',
+    name: 'student-quiz',
+    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentQuiz.vue')
+  }, {
+    path: 'courses',
+    name: 'student-courses',
+    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentCoursesManager.vue'),
+    children: [{
+      path: 'join-course/:courseId',
+      name: 'join-course',
+      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/JoinCourse.vue')
+    }, {
+      path: 'course-detail/:courseId',
+      name: 'student-course-detail',
+      component: () => import(/* webpackChunkName: "student" */ '../views/student/components/StudentCourseDetail.vue')
+    }]
+  }, {
+    path: 'discussion',
+    name: 'student-discussion',
+    component: () => import(/* webpackChunkName: "student" */ '../views/shared/Discussion.vue')
+  }, {
+    path: 'personal',
+    name: 'student-personal',
+    component: () => import(/* webpackChunkName: "student" */ '../views/student/tabs/StudentPersonal.vue')
+  }]
+}]

src/router/teacher.js

@@ -0,0 +1,58 @@
+export default [{
+  meta: { roles: ['teacher'] },
+  path: '/teacher',
+  name: 'teacher',
+  redirect: '/teacher/explore',
+  component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/TeacherHome.vue'),
+  children: [{
+    // 教师主页
+    path: 'explore',
+    name: 'teacher-explore',
+    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/TeacherExplore.vue'),
+    children: [{
+      // 课程下的的课件列表
+      path: 'course-slides/:courseId',
+      name: 'teacher-course-slides',
+      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherCourseSlides.vue')
+    }, {
+      // 课件详情
+      path: 'slide-detail/:slideId',
+      name: 'teacher-explore-slide-detail',
+      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherSlideDetail.vue')
+    }, {
+      // 附件详情
+      path: 'course-file-detail/:courseFileId',
+      name: 'teacher-explore-course-file-detail',
+      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherCourseFileDetail.vue')
+    }]
+  }, {
+    // 教师创建幻灯片
+    path: 'create-slide',
+    name: 'create-slide',
+    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/CreateSlide.vue')
+  }, {
+    // 教师幻灯片管理
+    path: 'courses',
+    name: 'teacher-courses',
+    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/TeacherCoursesManager.vue'),
+    children: [{
+      path: 'create-new',
+      name: 'create-new-course',
+      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/CreateNewCourse.vue')
+    }, {
+      path: 'course-detail/:courseId',
+      name: 'teacher-course-detail',
+      component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/components/TeacherCourseDetail.vue')
+    }]
+  }, {
+    // 教师讨论区页面
+    path: 'discussion',
+    name: 'teacher-discussion',
+    component: () => import(/* webpackChunkName: "teacher" */ '../views/shared/Discussion.vue')
+  }, {
+    // 教师个人主页
+    path: 'personal',
+    name: 'teacher-personal',
+    component: () => import(/* webpackChunkName: "teacher" */ '../views/teacher/tabs/TeacherPersonal.vue')
+  }]
+}]

src/views/shared/UserHomeLayout.vue

@@ -29,6 +29,7 @@
           :key="tab.name"
           @click="handleIconButtonClick(tab.name)"
         >
+          {{tab.icon}}
         </icon-button>
       </template>
     </div>

src/views/teacher/components/TeacherCourseDetail.vue

@@ -15,6 +15,10 @@
       <c-input placeholder="修改不会影响已选学生" v-model="newCode"/>
       <c-button text theme="green" icon="check">确认</c-button>
     </div>
+    <full-screen-form v-if="showNoticeForm">
+      lorem
+    </full-screen-form>
+    <c-button theme="green" @click="showNoticeForm = true">插槽</c-button>
     <c-button icon="list" theme="blue" block class="mb-16" @click="handleCheckSlideList">课件列表</c-button>
     <c-button icon="delete" theme="red" block @click="handleDeleteCourse">删除课程</c-button>
   </tab-side-component>
@@ -30,13 +34,15 @@ import { modifyCourse, removeCourse } from '@/server/course'
 import CourseDetail from '@/components/Details/CourseDetail'
 import momentFromNow from '@/utils/moment-from-now'
 import ShowTransition from '@/animations/ShowTransition'
+import FullScreenForm from '@/components/Basic/FullScreenForm'
 
 export default {
-  components: { CourseDetail, BackTitle, CButton, CInput, TabSideComponent, ShowTransition },
+  components: { FullScreenForm, CourseDetail, BackTitle, CButton, CInput, TabSideComponent, ShowTransition },
   data () {
     return {
       newCode: '',
-      showMore: true
+      showMore: true,
+      showNoticeForm: false
     }
   },
   computed: {