refactor: 重新整理主页布局文件，添加响应式附加信息组件，为后续再加一栏作准备

src/components/TabSideComponent.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="tab-side-component" :class="deviceSize ? deviceSize : 'small'">
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      deviceSize: ''
+    }
+  },
+  mounted () {
+    this.resizeHandler()
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.resizeHandler)
+  },
+  methods: {
+    resizeHandler () {
+      if (window.innerWidth < 900) {
+        this.deviceSize = 'small'
+      } else {
+        this.deviceSize = 'large'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tab-side-component {
+  box-sizing: border-box;
+}
+
+.content {
+  max-height: 90vh;
+  overflow: auto;
+}
+
+.small {
+  z-index: 3;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  width: 100%;
+  padding: 24px;
+  align-items: center;
+  backdrop-filter: saturate(180%) blur(15px);
+  background: rgba(255, 255, 255, 0.7);
+}
+
+@media (min-width: 600px) {
+  .small {
+    padding: 64px 10vw;
+  }
+}
+
+.large {
+  width: 340px;
+  min-height: 350px;
+}
+</style>

src/router/index.js

@@ -28,7 +28,12 @@ const routes = [{
   }, {
     path: 'courses',
     name: 'teacher-courses',
-    component: () => import('../views/teacher/tabs/TeacherCoursesManager.vue')
+    component: () => import('../views/teacher/tabs/TeacherCoursesManager.vue'),
+    children: [{
+      path: 'create-new',
+      name: 'create-new-course',
+      component: () => import('../views/teacher/components/CreateNewCourse.vue')
+    }]
   }, {
     path: 'discussion',
     name: 'teacher-discussion',

src/views/shared/UserHomeLayout.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="main-container">
-    <div class="menu-container">
-      <div class="tab-container-large">
+  <div class="user-home-layout">
+    <div class="main-container">
+      <div class="menu-container-large">
         <template v-for="tab of tabs">
           <tab-icon-button
             :active="currentRouteName.match(tab.name)"
@@ -13,17 +13,12 @@
           </tab-icon-button>
         </template>
       </div>
-      <div class="view-container">
-        <transition name="fade" mode="out-in">
-          <router-view/>
-        </transition>
+      <div class="tab-container">
+        <router-view/>
       </div>
     </div>
-    <div class="preview-container">
-      <slot name="preview"></slot>
-    </div>
 
-    <div class="tab-container-small">
+    <div class="menu-container-small">
       <template v-for="tab of tabs">
         <tab-icon-button
           :active="currentRouteName.match(tab.name)"
@@ -42,20 +37,35 @@ import TabIconButton from '@/components/TabIconButton'
 
 export default {
   components: { TabIconButton },
-  props: ['tabs'],
+  props: ['tabs', 'role'],
   data () {
     return {
       currentRouteName: this.$route.name
     }
   },
+  mounted () {
+    this.resizeHandler()
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.resizeHandler)
+  },
   watch: {
     $route () {
-      this.currentRouteName = this.$route.name
+      console.log(this.$route)
+      this.currentRouteName = this.$route.path
     }
   },
   methods: {
+    resizeHandler () {
+      if (window.innerWidth < 900) {
+        this.componentType = 'full-screen-component'
+      } else {
+        this.componentType = 'tab-side-component'
+      }
+    },
     handleIconButtonClick (name) {
-      this.$router.push(name)
+      this.$router.push(`/${this.role}/${name}`)
     }
   }
 }
@@ -64,7 +74,7 @@ export default {
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
 
-.main-container {
+.user-home-layout {
   height: 100vh;
   width: 100%;
   display: flex;
@@ -72,7 +82,7 @@ export default {
   justify-content: center;
 }
 
-.menu-container {
+.main-container {
   display: flex;
   width: 100%;
   margin: 0 auto;
@@ -81,7 +91,7 @@ export default {
 
 // 大屏幕情况
 @media (min-width: 600px) {
-  .tab-container-large {
+  .menu-container-large {
     padding: 24px 18px;
     display: flex;
     flex-direction: column;
@@ -93,32 +103,25 @@ export default {
     }
   }
 
-  .view-container {
+  .tab-container {
     display: flex;
     align-items: center;
     padding: 24px 18px;
-    max-width: 460px;
+    max-width: 800px;
   }
 
-  .tab-container-small {
+  .menu-container-small {
     display: none;
   }
 }
 
-.tab {
-  min-height: 350px;
-  padding: 40px;
-  width: 320px;
-  flex: 1;
-}
-
 // 小屏幕情况
 @media (max-width: 599px) {
-  .tab-container-large {
+  .menu-container-large {
     display: none;
   }
 
-  .view-container {
+  .tab-container {
     box-sizing: border-box;
     height: calc(100vh - 54px);
     padding: 48px 24px;
@@ -127,12 +130,12 @@ export default {
     max-width: 460px;
   }
 
-  .main-container {
+  .user-home-layout {
     justify-content: unset;
     min-height: calc(100vh - 54px);
   }
 
-  .tab-container-small {
+  .menu-container-small {
     z-index: 2;
     backdrop-filter: saturate(180%) blur(20px);
     background: rgba(255, 255, 255, 0.8);
@@ -147,9 +150,8 @@ export default {
     justify-content: space-around;
   }
   .tab {
-    width: unset;
+    min-width: unset;
     padding: unset;
   }
 }
-
 </style>

src/views/teacher/TeacherHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <user-home-layout :tabs="tabs">
+  <user-home-layout :tabs="tabs" role="teacher">
     <template v-slot:preview></template>
   </user-home-layout>
 </template>

src/views/teacher/components/CreateNewCourse.vue

@@ -0,0 +1,17 @@
+<template>
+  <tab-side-component>
+    <h1 class="title">新建课程</h1>
+  </tab-side-component>
+</template>
+
+<script>
+import TabSideComponent from '@/components/TabSideComponent'
+
+export default {
+  components: { TabSideComponent }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/teacher/tabs/CreateSlide.vue

@@ -61,6 +61,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
+@import "tab-common";
 
 select {
   box-sizing: border-box;

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -1,19 +1,30 @@
 <template>
-  <div class="tab">
-    <h1 class="title">课程管理</h1>
-    <div class="sub-title">我的课程</div>
-    <div class="no-content-warning">您还没有设置相关课程喔～</div>
-    <c-button>新建课程</c-button>
+  <div class="tab complex-tab">
+    <div class="left">
+      <h1 class="title">课程管理</h1>
+      <div class="sub-title">我的课程</div>
+      <div class="no-content-warning">您还没有设置相关课程喔～</div>
+      <c-button @click.native="handleCreateNewCourse">新建课程</c-button>
+    </div>
+    <transition name="fade" mode="in-out">
+      <router-view/>
+    </transition>
   </div>
 </template>
 
 <script>
 import CButton from '@/components/CButton'
+
 export default {
-  components: { CButton }
+  components: { CButton },
+  methods: {
+    handleCreateNewCourse () {
+      this.$router.push('/teacher/courses/create-new')
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-
+@import "tab-common";
 </style>

src/views/teacher/tabs/TeacherDiscussion.vue

@@ -18,6 +18,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "tab-common";
+
 .tip {
   font-weight: bold;
   color: #7a8a9a;

src/views/teacher/tabs/TeacherExplore.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="tab">
+    <h1 class="title">我的主页</h1>
     <search-bar></search-bar>
     <section>
       <h1 class="sub-title">最近浏览</h1>
@@ -27,6 +28,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "tab-common";
+
+.title {
+  margin-bottom: 16px;
+}
 .search-bar {
   margin-bottom: 16px;
 }

src/views/teacher/tabs/TeacherPersonal.vue

@@ -11,4 +11,5 @@ export default {}
 
 <style lang="scss" scoped>
 @import "~@/style/theme.scss";
+@import "tab-common";
 </style>

src/views/teacher/tabs/tab-common.scss

@@ -0,0 +1,19 @@
+.tab {
+  min-height: 350px;
+  padding: 40px;
+  flex: 1;
+  min-width: 320px;
+  max-width: 720px;
+}
+
+.complex-tab {
+  display: flex;
+  align-items: center;
+}
+
+.left {
+  width: 320px;
+  min-height: 350px;
+  max-height: 90vh;
+  overflow: auto;
+}