feat: 教师主页样式初始化

src/components/editor/EditableItem.vue

@@ -131,16 +131,18 @@ export default {
             break
 
           case 'ArrowUp':
-            e.preventDefault()
-            this.$store.commit(SET_FOCUS_BEFORE, {
-              focusId: this.item.id
+            this.handleRangeChanged(() => {
+              this.$store.commit(SET_FOCUS_BEFORE, {
+                focusId: this.item.id
+              })
             })
-            break
 
+            break
           case 'ArrowDown':
-            e.preventDefault()
-            this.$store.commit(SET_FOCUS_AFTER, {
-              focusId: this.item.id
+            this.handleRangeChanged(() => {
+              this.$store.commit(SET_FOCUS_AFTER, {
+                focusId: this.item.id
+              })
             })
             break
 
@@ -190,6 +192,20 @@ export default {
           diff: { focusId: this.item.id, offset }
         })
       }
+    },
+    handleRangeChanged(cb) {
+      let range = window.getSelection().getRangeAt(0)
+      const firstOffset = range.startOffset
+      console.log(range)
+
+      this.$nextTick(() => {
+        range = window.getSelection().getRangeAt(0)
+        const nextOffset = range.startOffset
+        console.log(range)
+        if (firstOffset === nextOffset) {
+          cb()
+        }
+      })
     }
   }
 }

src/components/teacher/SlideListItem.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="slide-list-item-container">
+    <div class="content">
+      <div class="title">编程基础 I - 基础与抽象</div>
+      <div>最后编辑时间：2020.01.03 14:22</div>
+      <div>所属课程：软件工程与计算 I</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.slide-list-item-container {
+  margin: 16px 0;
+}
+.content > div {
+  color: gray;
+  margin: 4px 0;
+  font-size: 14px;
+}
+.content .title {
+  font-size: 1.2em;
+  font-weight: bold;
+  margin: 8px 0;
+
+  color: #555;
+}
+</style>

src/router/index.js

@@ -16,6 +16,10 @@ const routes = [{
   path: '/typography',
   name: 'typography',
   component: () => import('../prototype/typography.vue')
+}, {
+  path: '/teacher',
+  name: 'teacher',
+  component: () => import('../views/teacher/TeacherHomeView.vue')
 }]
 
 const router = new VueRouter({

src/utils/default-placeholder.js

@@ -1,14 +1,14 @@
 const defaultPlaceholder = {}
-defaultPlaceholder.div = '未编辑正文项'
-defaultPlaceholder.h1 = '未编辑标题'
-defaultPlaceholder.h2 = '未编辑标题'
-defaultPlaceholder.h3 = '未编辑小标题'
-defaultPlaceholder.h4 = '未编辑小标题'
-defaultPlaceholder.h5 = '未编辑小标题'
-defaultPlaceholder.h6 = '未编辑小标题'
-defaultPlaceholder.blockquote = '未编辑引用项'
-defaultPlaceholder.ol = '未编辑有序列表'
-defaultPlaceholder.ul = '未编辑无序列表'
-defaultPlaceholder.slideBreak = '(分页符)'
+defaultPlaceholder.div = '正文'
+defaultPlaceholder.h1 = '标题'
+defaultPlaceholder.h2 = '标题'
+defaultPlaceholder.h3 = '小标题'
+defaultPlaceholder.h4 = '小标题'
+defaultPlaceholder.h5 = '小标题'
+defaultPlaceholder.h6 = '小标题'
+defaultPlaceholder.blockquote = '引用'
+defaultPlaceholder.ol = '有序列表项'
+defaultPlaceholder.ul = '无序列表项'
+defaultPlaceholder.slideBreak = '== 分页符 =='
 
 export default defaultPlaceholder

src/views/Home.vue

@@ -2,7 +2,8 @@
   <div>
     调试链接：<br />
     1. <router-link to="/editor">编辑器</router-link> 2.
-    <router-link to="/typography">排版布局原型</router-link>
+    <router-link to="/typography">排版布局原型</router-link>3.
+    <router-link to="/teacher">教师主页</router-link>
   </div>
 </template>
 

src/views/teacher/TeacherHomeView.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="container">
+    <div class="catalog">
+      <section>
+        <h1>开始上课</h1>
+        <slide-list-item-vue></slide-list-item-vue>
+      </section>
+      <section>
+        <h1>编辑历史</h1>
+        <slide-list-item-vue></slide-list-item-vue>
+        <slide-list-item-vue></slide-list-item-vue>
+        <slide-list-item-vue></slide-list-item-vue>
+      </section>
+      <section>
+        <h1>我的课程</h1>
+        <slide-list-item-vue></slide-list-item-vue>
+      </section>
+    </div>
+    <div class="gap"></div>
+    <div class="preview"></div>
+  </div>
+</template>
+
+<script>
+import SlideListItemVue from '../../components/teacher/SlideListItem.vue'
+export default {
+  components: { SlideListItemVue }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  display: flex;
+  min-height: 100vh;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  padding: 8vh 8vw;
+
+  &::after {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    right: -60vmax;
+    bottom: -60vmax;
+    width: 150vmax;
+    height: 150vmax;
+    border-radius: 40vmax;
+    background: radial-gradient(
+      #76aee666 0%,
+      transparent 70%,
+      transparent 100%
+    );
+  }
+}
+.catalog {
+  max-height: 84vh;
+  overflow: auto;
+  width: 100%;
+  flex: 1;
+
+  h1 {
+    margin: 0;
+    font-size: 30px;
+  }
+
+  section {
+    margin-bottom: 56px;
+    padding: 0;
+  }
+}
+.preview {
+  width: 100%;
+  flex: 2;
+  background: white;
+  border-radius: 12px;
+}
+
+.gap {
+  width: 2vw;
+}
+</style>