refactor: 整理组件文件，提取tag样式，整理moment调用，修改课程、课件card样式

src/App.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import GlobalMessage from '@/components/GlobalMessage'
+import GlobalMessage from '@/components/Basic/GlobalMessage'
 
 export default {
   components: { GlobalMessage },

src/common-style.scss

@@ -27,19 +27,6 @@
   }
 }
 
-.tag {
-  display: inline-block;
-  position: relative;
-  background-color: lighten($theme-blue, 30);
-  color: $theme-blue;
-  font-size: 12px;
-  padding: 2px 8px;
-  margin-left: 4px;
-  border-radius: 8px;
-  vertical-align: middle;
-  bottom: 2px;
-}
-
 .full-width {
   width: 100%;
 }

src/components/Basic/CTag.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="c-tag" :class="classList">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    theme: {
+      type: String,
+      default: 'normal'
+    }
+  },
+  computed: {
+    classList () {
+      return [this.theme ? 'c-tag--' + this.theme : '']
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/style/theme.scss';
+
+div {
+  display: inline-block;
+  padding: 4px;
+  border-radius: 4px;
+  margin-left: 4px;
+  font-size: 14px;
+  line-height: 1;
+  vertical-align: middle;
+  position: relative;
+  bottom: 2px;
+}
+
+@mixin theme($name, $color, $backgroundColor) {
+  .c-tag--#{$name} {
+    color: $color;
+    background: $backgroundColor;
+  }
+}
+
+@include theme(blue, $theme-blue, $theme-blue-transparent)
+@include theme(green, $theme-green, $theme-green-transparent)
+@include theme(orange, $theme-orange, $theme-orange-transparent)
+@include theme(red, $theme-red, $theme-red-transparent)
+@include theme(normal, $icon-normal-color, $theme-background-grey)
+</style>

src/components/CourseCard.vue → src/components/Cards/CourseCard.vue

@@ -4,8 +4,8 @@
       <c-icon theme="orange" :left="-2" :right="6" :size="18">book</c-icon>
       {{course.name || '暂无课程名称'}}
     </div>
-    <div class="course-card-bio">{{course.bio || '暂无课程简介'}}</div>
-<!--    <div class="course-card-teacher">{{course.teacherName}}</div>-->
+    <div v-if="!hideBio"  class="course-card-bio">{{course.bio || '暂无课程简介'}}</div>
+    <div v-if="!hideTeacher"  class="course-card-teacher">{{course.teacherName}}</div>
   </div>
 </template>
 
@@ -14,7 +14,23 @@ import CIcon from '@/components/Basic/CIcon'
 
 export default {
   components: { CIcon },
-  props: ['index', 'clickHandler', 'course'],
+  props: {
+    clickHandler: {
+      type: Function,
+      default: () => {}
+    },
+    course: {
+      type: Object
+    },
+    hideTeacher: {
+      type: Boolean,
+      default: false
+    },
+    hideBio: {
+      type: Boolean,
+      default: false
+    }
+  },
   methods: {
     handleClick () {
       this.clickHandler(this.course)

src/components/Cards/SlideCard.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="slide-card" title="点击查看课件" @click="handleClick(123)">
+    <div class="slide-card-title">
+      <c-icon theme="blue" :right="4" bold :size="16">slideshow</c-icon>
+      {{ slide.name }}
+      <c-tag :theme="tagTheme" v-if="!hideState">{{slideStateTranslation[slide.state]}}</c-tag>
+    </div>
+    <div v-if="!hideUpdateTime" class="slide-card-time">最近更新：{{ updateTime }}</div>
+    <div v-if="!hideCourse" class="slide-card-course">所属课程：{{ slide.courseName }}</div>
+    <div v-if="!hideTeacher" class="slide-card-teacher">教师：{{ slide.teacherName }}</div>
+  </div>
+</template>
+
+<script>
+import slideStateTranslation from '@/server/enums/slide-state-translation'
+import CIcon from '@/components/Basic/CIcon'
+import CTag from '@/components/Basic/CTag'
+import momentFromNow from '@/utils/moment-from-now'
+
+export default {
+  components: { CIcon, CTag },
+  props: {
+    clickHandler: {
+      type: Function,
+      default: () => {}
+    },
+    slide: {
+      type: Object
+    },
+    hideState: {
+      type: Boolean,
+      default: false
+    },
+    hideTeacher: {
+      type: Boolean,
+      default: false
+    },
+    hideCourse: {
+      type: Boolean,
+      default: false
+    },
+    hideUpdateTime: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      slideStateTranslation
+    }
+  },
+  computed: {
+    updateTime () {
+      return momentFromNow(this.slide.updateAt)
+    },
+    tagTheme () {
+      if (this.slide.state === 'IN_CLASS') {
+        return 'green'
+      } else if (this.slide.state === 'DRAFT') {
+        return 'red'
+      } else if (this.slide.state === 'BEFORE_CLASS' || this.slide.state === 'FINISH') {
+        return 'orange'
+      } else {
+        return 'blue'
+      }
+    }
+  },
+  methods: {
+    handleClick () {
+      this.clickHandler(this.slide)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/style/theme.scss';
+
+.slide-card {
+  padding: 6px 8px 6px 16px;
+  border-radius: 12px;
+  // border-left: 4px solid $input-background-color;
+  background-color: $card-background;
+  transition: .2s;
+  cursor: pointer;
+
+  &:hover {
+    background-color: darken($card-background, 5);
+    // border-left: 4px solid $theme-blue;
+  }
+}
+
+.slide-card-title {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  margin-bottom: 4px;
+  line-height: 1.9;
+}
+
+.slide-card-time, .slide-card-course {
+  font-size: 14px;
+  color: #6a7a8a;
+  margin-bottom: 4px;
+}
+
+.slide-card-teacher {
+  font-size: 14px;
+  color: #6a7a8a;
+}
+
+.c-icon {
+  transform: scale(1.2);
+}
+</style>

src/components/CourseDetail.vue → src/components/Details/CourseDetail.vue

@@ -27,6 +27,7 @@
 
 <script>
 import { getCourseCode } from '@/server/course'
+import momentFromNow from '@/utils/moment-from-now'
 
 export default {
   props: ['course', 'showCode'],
@@ -46,7 +47,7 @@ export default {
   },
   computed: {
     createTime () {
-      return this.$moment(this.course.createAt).fromNow()
+      return momentFromNow(this.course.createAt)
     }
   }
 }

src/components/SlideDetail.vue → src/components/Details/SlideDetail.vue

@@ -29,6 +29,7 @@
 
 <script>
 import slideStateTranslation from '@/server/enums/slide-state-translation'
+import momentFromNow from '@/utils/moment-from-now'
 
 export default {
   props: ['slide'],
@@ -39,10 +40,10 @@ export default {
   },
   computed: {
     updateTime () {
-      return this.$moment(this.slide.updateAt).fromNow()
+      return momentFromNow(this.slide.updateAt)
     },
     createTime () {
-      return this.$moment(this.slide.createAt).fromNow()
+      return momentFromNow(this.slide.createAt)
     }
   }
 }

src/components/CComment.vue → src/components/Discussion/CComment.vue

@@ -33,8 +33,9 @@
 import { mapState } from 'vuex'
 import { createReply, removeReply } from '@/server/reply'
 import { removeComment, topComment, unTopComment } from '@/server/comment'
-import CommentToolBar from '@/components/CommentToolBar'
+import CommentToolBar from '@/components/Discussion/CommentToolBar'
 import CIcon from '@/components/Basic/CIcon'
+import momentFromNow from '@/utils/moment-from-now'
 
 export default {
   components: { CIcon, CommentToolBar },
@@ -49,10 +50,10 @@ export default {
       userInfo: state => state.main.userInfo
     }),
     createTime () {
-      return this.$moment(this.comment.createAt).fromNow()
+      return momentFromNow(this.comment.createAt)
     },
     replyTime () {
-      return this.$moment(this.comment.reply.createAt).fromNow()
+      return momentFromNow(this.comment.reply.createAt)
     },
     role () {
       if (this.comment.userType === 'TEACHER') {

src/components/DiscussionArea.vue → src/components/Discussion/DiscussionArea.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script>
-import CComment from '@/components/CComment'
-import WriteNewComment from '@/components/WriteNewComment'
+import CComment from '@/components/Discussion/CComment'
+import WriteNewComment from '@/components/Discussion/WriteNewComment'
 import { mapState } from 'vuex'
 import { createComment, getComments } from '@/server/comment'
 import WebsocketPublisher from '@/server/websocket/ws'

src/components/DiscussionTypeBar.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="discussion-type-bar">
-    <button
-      v-for="button of buttons"
-      :key="button.value"
-      :class="mode === button.value ? 'active' : ''"
-      @click="changeMode(button.value)"
-    >{{ button.name }}
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ['defaultMode'],
-  data () {
-    return {
-      mode: this.defaultMode || 'comment',
-      buttons: [
-        {
-          value: 'comment',
-          name: '讨论'
-        },
-        {
-          value: 'question',
-          name: '问答'
-        }
-      ]
-    }
-  },
-  methods: {
-    changeMode (value) {
-      this.mode = value
-      this.$emit('change-mode', this.mode)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "~@/style/theme.scss";
-.discussion-type-bar {
-  margin: 0 -2px;
-  padding: 0 2px;
-  box-sizing: border-box;
-  display: flex;
-  background: $theme-blue-transparent;
-  border-radius: 12px;
-}
-
-button {
-  background: transparent;
-  margin: 4px 2px;
-  border: none;
-  outline: none;
-  display: block;
-  flex: 1;
-  color: #3a4a5a;
-  padding: 8px 12px;
-  border-radius: 8px;
-  transition: .2s;
-  &:hover {
-    background: rgba(255,255,255,.5);
-  }
-}
-
-.active {
-  background: white;
-  &:hover {
-    background: white;
-  }
-}
-</style>

src/components/SlideCard.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="slide-card" :class="small ? 'small-card' : ''" title="点击查看课件" @click="handleClick(123)">
-    <div class="slide-card-title">
-      <c-icon theme="blue" :left="-2"  :right="4" bold :size="22">slideshow</c-icon>
-      {{ slide.name }}
-      <span class="tag">{{slideStateTranslation[slide.state]}}</span>
-    </div>
-    <div class="slide-card-time">最近更新：{{ updateTime }}</div>
-    <div class="slide-card-course">所属课程：{{ slide.courseName }}</div>
-    <div class="slide-card-teacher">教师：{{ slide.teacherName }}</div>
-  </div>
-</template>
-
-<script>
-import slideStateTranslation from '@/server/enums/slide-state-translation'
-import CIcon from '@/components/Basic/CIcon'
-
-export default {
-  components: { CIcon },
-  props: ['index', 'clickHandler', 'slide', 'small'],
-  data () {
-    return {
-      slideStateTranslation
-    }
-  },
-  computed: {
-    updateTime () {
-      return this.$moment(this.slide.updateAt).fromNow()
-    }
-  },
-  methods: {
-    handleClick () {
-      this.clickHandler(this.slide)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/style/theme.scss';
-
-.slide-card {
-  padding: 6px 8px 6px 16px;
-  border-left: 4px solid $input-background-color;
-  // background-color: $card-background;
-  transition: .2s;
-  cursor: pointer;
-
-  &:hover {
-    background-color: $input-background-color;
-    border-left: 4px solid $theme-blue;
-  }
-}
-
-.small-card {
-  .slide-card-course {
-    display: none;
-  }
-}
-
-.slide-card-title {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  margin-bottom: 4px;
-  line-height: 1.9;
-}
-
-.slide-card-time, .slide-card-course {
-  font-size: 14px;
-  color: #6a7a8a;
-  margin-bottom: 4px;
-}
-
-.slide-card-teacher {
-  font-size: 14px;
-  color: #6a7a8a;
-}
-</style>

src/views/Home.vue

@@ -13,7 +13,7 @@
 
 <script>
 import CButton from '@/components/Basic/CButton'
-import Background from '@/components/Background'
+import Background from '@/components/Layouts/Background'
 
 export default {
   components: { CButton, Background },

src/views/login/Login.vue

@@ -22,7 +22,7 @@
 <script>
 import CInput from '@/components/Basic/CInput'
 import CButton from '@/components/Basic/CButton'
-import Background from '@/components/Background'
+import Background from '@/components/Layouts/Background'
 import { loginByEmail } from '@/server/user'
 import { SET_USER_INFO } from '@/store/types/main-types'
 

src/views/reader/PdfReader.vue

@@ -15,7 +15,7 @@
 import PdfViewer from '@/components/PDF/PdfViewer'
 import { mapState } from 'vuex'
 import BackTitle from '@/components/Basic/BackTitle'
-import DiscussionArea from '@/components/DiscussionArea'
+import DiscussionArea from '@/components/Discussion/DiscussionArea'
 import { getSlideUrl } from '@/server/slide'
 import { RESET, SET_SRC } from '@/store/types/pdf-types'
 

src/views/register/Register.vue

@@ -61,7 +61,7 @@
 <script>
 import CInput from '@/components/Basic/CInput'
 import CButton from '@/components/Basic/CButton'
-import Background from '@/components/Background'
+import Background from '@/components/Layouts/Background'
 import { sendEmailCode, sendPhoneCode } from '@/server/code'
 import { register } from '@/server/user'
 import CIcon from '@/components/Basic/CIcon'

src/views/student/components/JoinCourse.vue

@@ -10,13 +10,13 @@
 </template>
 
 <script>
-import TabSideComponent from '@/components/TabSideComponent'
+import TabSideComponent from '@/components/Layouts/TabSideComponent'
 import CInput from '@/components/Basic/CInput'
 import CButton from '@/components/Basic/CButton'
 import BackTitle from '@/components/Basic/BackTitle'
 import { mapState } from 'vuex'
 import { chooseCourse } from '@/server/course'
-import CourseDetail from '@/components/CourseDetail'
+import CourseDetail from '@/components/Details/CourseDetail'
 
 export default {
   components: { CourseDetail, BackTitle, CButton, CInput, TabSideComponent },

src/views/student/components/StudentCourseDetail.vue

@@ -8,13 +8,14 @@
 </template>
 
 <script>
-import TabSideComponent from '@/components/TabSideComponent'
+import TabSideComponent from '@/components/Layouts/TabSideComponent'
 import CButton from '@/components/Basic/CButton'
 import BackTitle from '@/components/Basic/BackTitle'
 import { mapState } from 'vuex'
 import { quitCourse } from '@/server/course'
-import CourseDetail from '@/components/CourseDetail'
+import CourseDetail from '@/components/Details/CourseDetail'
 import { RESET_COURSE } from '@/store/types/main-types'
+import momentFromNow from '@/utils/moment-from-now'
 
 export default {
   components: { CourseDetail, BackTitle, CButton, TabSideComponent },
@@ -28,7 +29,7 @@ export default {
       course: state => state.main.courseInfo
     }),
     createTime () {
-      return this.$moment(this.course.createAt).fromNow()
+      return momentFromNow(this.course.createAt)
     }
   },
   methods: {

src/views/student/components/StudentCourseSlides.vue

@@ -9,16 +9,16 @@
       <div class="no-content-warning-tip">本课程尚无课件～</div>
     </div>
     <template v-for="slide of slides">
-      <slide-card :key="slide.id" small="true" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
+      <slide-card :key="slide.id" hide-course :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
     </template>
     <c-button class="full-width secondary mt-16" @click="handleToManager">管理课程</c-button>
   </tab-side-component>
 </template>
 
 <script>
-import TabSideComponent from '@/components/TabSideComponent'
+import TabSideComponent from '@/components/Layouts/TabSideComponent'
 import BackTitle from '@/components/Basic/BackTitle'
-import SlideCard from '@/components/SlideCard'
+import SlideCard from '@/components/Cards/SlideCard'
 import CButton from '@/components/Basic/CButton'
 import { studentGetSlidesByCourse } from '@/server/slide'
 import { SET_SLIDE_INFO } from '@/store/types/pdf-types'

src/views/student/components/StudentSlideDetail.vue

@@ -13,10 +13,10 @@
 </template>
 
 <script>
-import TabSideComponent from '@/components/TabSideComponent'
+import TabSideComponent from '@/components/Layouts/TabSideComponent'
 import CButton from '@/components/Basic/CButton'
 import BackTitle from '@/components/Basic/BackTitle'
-import SlideDetail from '@/components/SlideDetail'
+import SlideDetail from '@/components/Details/SlideDetail'
 import { mapState } from 'vuex'
 import { getSlideUrl } from '@/server/slide'
 import { SET_SRC } from '@/store/types/pdf-types'

src/views/student/tabs/StudentCoursesManager.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import CourseCard from '@/components/CourseCard'
+import CourseCard from '@/components/Cards/CourseCard'
 import SearchBar from '@/components/Basic/SearchBar'
 import { getCourses, studentGetCourses } from '@/server/course'
 import { SET_COURSE } from '@/store/types/main-types'

src/views/student/tabs/StudentExplore.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import CourseCard from '@/components/CourseCard'
+import CourseCard from '@/components/Cards/CourseCard'
 import { studentGetCourses } from '@/server/course'
 import CButton from '@/components/Basic/CButton'
 import { SET_COURSE } from '@/store/types/main-types'

src/views/student/tabs/StudentPersonal.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="tab">
-    <h1 class="title">个人信息设置 <span class="tag">学生</span></h1>
+    <h1 class="title">
+      个人信息设置
+      <c-tag theme="blue">学生</c-tag>
+    </h1>
     <div class="sub-title">修改姓名</div>
     <c-input :placeholder="'目前资料中的姓名：' + userInfo.name" class="mb-16" v-model="newName"></c-input>
     <c-button class="warning full-width mb-32" @click="handleModifyName">确认修改姓名</c-button>
@@ -24,9 +27,10 @@ import CInput from '@/components/Basic/CInput'
 import { sendEmailCode } from '@/server/code'
 import { logout, modifyUser, resetPasswordByEmail } from '@/server/user'
 import { mapState } from 'vuex'
+import CTag from '@/components/Basic/CTag'
 
 export default {
-  components: { CInput, CButton },
+  components: { CTag, CInput, CButton },
   data () {
     return {
       emailButtonContent: '发送验证码',

src/views/student/tabs/StudentQuiz.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="tab">
-    <h1 class="title">课程测验 <span class="tag">学生</span></h1>
+    <h1 class="title">
+      课程测验
+      <c-tag>学生</c-tag>
+    </h1>
     <div class="sub-title">待完成的测验</div>
     <div class="no-content-warning">
       测验功能预计将于 2 月底上线
@@ -13,7 +16,10 @@
 </template>
 
 <script>
-export default {}
+import CTag from '@/components/Basic/CTag'
+export default {
+  components: { CTag }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/teacher/components/CreateNewCourse.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import TabSideComponent from '@/components/TabSideComponent'
+import TabSideComponent from '@/components/Layouts/TabSideComponent'
 import CInput from '@/components/Basic/CInput'
 import CButton from '@/components/Basic/CButton'
 import BackTitle from '@/components/Basic/BackTitle'

src/views/teacher/components/TeacherCourseDetail.vue

@@ -13,13 +13,14 @@
 </template>
 
 <script>
-import TabSideComponent from '@/components/TabSideComponent'
+import TabSideComponent from '@/components/Layouts/TabSideComponent'
 import CInput from '@/components/Basic/CInput'
 import CButton from '@/components/Basic/CButton'
 import BackTitle from '@/components/Basic/BackTitle'
 import { mapState } from 'vuex'
 import { modifyCourse, removeCourse } from '@/server/course'
-import CourseDetail from '@/components/CourseDetail'
+import CourseDetail from '@/components/Details/CourseDetail'
+import momentFromNow from '@/utils/moment-from-now'
 
 export default {
   components: { CourseDetail, BackTitle, CButton, CInput, TabSideComponent },
@@ -33,7 +34,7 @@ export default {
       course: state => state.main.courseInfo
     }),
     createTime () {
-      return this.$moment(this.course.createAt).fromNow()
+      return momentFromNow(this.course.createAt)
     }
   },
   methods: {

src/views/teacher/components/TeacherCourseSlides.vue

@@ -10,16 +10,16 @@
       <c-button class="full-width secondary" @click="handleToCreateCourse">去创建课件</c-button>
     </div>
     <template v-for="slide of slides">
-      <slide-card :key="slide.id" small="true" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
+      <slide-card :key="slide.id" hide-course :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
     </template>
     <c-button class="full-width secondary mt-16" @click="handleToManager">管理本课程</c-button>
   </tab-side-component>
 </template>
 
 <script>
-import TabSideComponent from '@/components/TabSideComponent'
+import TabSideComponent from '@/components/Layouts/TabSideComponent'
 import BackTitle from '@/components/Basic/BackTitle'
-import SlideCard from '@/components/SlideCard'
+import SlideCard from '@/components/Cards/SlideCard'
 import CButton from '@/components/Basic/CButton'
 import { teacherGetSlidesByCourse } from '@/server/slide'
 import { SET_SLIDE_INFO } from '@/store/types/pdf-types'

src/views/teacher/components/TeacherSlideDetail.vue

@@ -29,16 +29,16 @@
 </template>
 
 <script>
-import TabSideComponent from '@/components/TabSideComponent'
+import TabSideComponent from '@/components/Layouts/TabSideComponent'
 import CButton from '@/components/Basic/CButton'
 import BackTitle from '@/components/Basic/BackTitle'
 import { mapState } from 'vuex'
 import { getSlideUrl, modifySlide, modifySlideState, removeSlide } from '@/server/slide'
 import { SET_SLIDE_INFO, SET_SRC } from '@/store/types/pdf-types'
-import SlideDetail from '@/components/SlideDetail'
+import SlideDetail from '@/components/Details/SlideDetail'
 import slideStateTranslation from '@/server/enums/slide-state-translation'
 import CInput from '@/components/Basic/CInput'
-import SlideStateBar from '@/components/SlideStateBar'
+import SlideStateBar from '@/components/Details/SlideStateBar'
 
 export default {
   components: { CInput, BackTitle, CButton, TabSideComponent, SlideDetail, SlideStateBar },

src/views/teacher/tabs/CreateSlide.vue

@@ -17,7 +17,9 @@
       v-model="slideName"
       placeholder="请勿与同课程课件重名"
     />
-    <div class="sub-title">课件文件 <span class="tag">目前支持 PDF 格式</span></div>
+    <div class="sub-title">课件文件
+      <c-tag theme="green">目前支持 PDF 格式</c-tag>
+    </div>
     <file-uploader accept="application/pdf" class="mb-24" @change="handleFileChanged"/>
 <!--    <label class="draft-checkbox">-->
 <!--      <input type="checkbox">-->
@@ -38,9 +40,10 @@ import CButton from '@/components/Basic/CButton'
 import FileUploader from '@/components/Basic/FileUploader'
 import { teacherGetCourses } from '@/server/course'
 import { createSlide } from '@/server/slide'
+import CTag from '@/components/Basic/CTag'
 
 export default {
-  components: { FileUploader, CButton, CInput },
+  components: { CTag, FileUploader, CButton, CInput },
   data () {
     return {
       courses: [],

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -10,7 +10,7 @@
         <div class="no-content-warning-tip">你还没有过开设课程～</div>
       </div>
       <template v-for="(course, index) of courses">
-        <course-card :key="course.id" :course="course" :index="index + 1"
+        <course-card hide-teacher :key="course.id" :course="course" :index="index + 1"
                      :clickHandler="handleCourseCardClick"></course-card>
       </template>
       <c-button @click="handleCreateNewCourse" class="full-width secondary">新建课程</c-button>
@@ -21,7 +21,7 @@
 
 <script>
 import CButton from '@/components/Basic/CButton'
-import CourseCard from '@/components/CourseCard'
+import CourseCard from '@/components/Cards/CourseCard'
 import { teacherGetCourses } from '@/server/course'
 import { SET_COURSE } from '@/store/types/main-types'
 

src/views/teacher/tabs/TeacherExplore.vue

@@ -12,7 +12,7 @@
           <div class="no-content-warning-tip">无最近编辑记录～</div>
         </div>
         <template v-for="slide of slides">
-          <slide-card :key="slide.id" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
+          <slide-card hide-course hide-teacher :key="slide.id" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
         </template>
         <br>
       </section>
@@ -27,7 +27,7 @@
         </div>
         <template v-for="(course, index) of courses">
           <course-card :key="course.id" :course="course" :index="index + 1"
-                       :clickHandler="handleCourseCardClick"></course-card>
+                       hide-teacher :clickHandler="handleCourseCardClick"></course-card>
         </template>
       </section>
     </div>
@@ -36,8 +36,8 @@
 </template>
 
 <script>
-import SlideCard from '@/components/SlideCard'
-import CourseCard from '@/components/CourseCard'
+import SlideCard from '@/components/Cards/SlideCard'
+import CourseCard from '@/components/Cards/CourseCard'
 import { teacherGetSlides } from '@/server/slide'
 import { teacherGetCourses } from '@/server/course'
 import CButton from '@/components/Basic/CButton'

src/views/teacher/tabs/TeacherPersonal.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="tab">
-    <h1 class="title">个人信息设置 <span class="tag">教师</span></h1>
+    <h1 class="title">
+      个人信息设置
+      <c-tag theme="blue">教师</c-tag>
+    </h1>
     <c-button class="full-width secondary mb-24" @click="handleToQuestions">题库设置</c-button>
     <div class="sub-title">修改姓名</div>
     <c-input :placeholder="'目前资料中的姓名：' + userInfo.name" class="mb-16" v-model="newName"></c-input>
@@ -25,9 +28,10 @@ import CInput from '@/components/Basic/CInput'
 import { sendEmailCode } from '@/server/code'
 import { logout, modifyUser, resetPasswordByEmail } from '@/server/user'
 import { mapState } from 'vuex'
+import CTag from '@/components/Basic/CTag'
 
 export default {
-  components: { CInput, CButton },
+  components: { CTag, CInput, CButton },
   data () {
     return {
       emailButtonContent: '发送验证码',