improvement: 添加搜索栏的样式，并到develop分支开发

src/components/ common/SearchBar.vue → src/components/common/SearchBar.vue

@@ -5,6 +5,7 @@
       :value="value"
       @input="$emit('input', $event.target.value)"
     />
+    <span class="icon">&#xe6a2;</span>
   </div>
 </template>
 
@@ -21,7 +22,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 $input-background-color: #ebf0f5;
-
 input {
   box-sizing: border-box;
   font-size: 16px;
@@ -35,6 +35,19 @@ input {
   height: 48px;
   line-height: 40px;
   padding: 0;
-  padding-left: 16px;
+  padding-left: 52px;
+}
+div {
+  position: relative;
+}
+.icon {
+  position: absolute;
+  left: 16px;
+  user-select: none;
+  cursor: pointer;
+  text-align: center;
+  font-family: 'iconfont';
+  font-size: 24px;
+  padding: 12px 0;
 }
 </style>

src/components/teacher/SlideListItem.vue

@@ -24,7 +24,7 @@ export default {
   methods: {
     handleClick() {
       this.$store.commit(INIT_BY_STATE, this.slide)
-      this.$router.push('/editor')
+      this.$router.push('/editor/' + this.slide.id)
     }
   }
 }

src/router/index.js

@@ -9,7 +9,7 @@ const routes = [{
   name: 'home',
   component: Home
 }, {
-  path: '/editor',
+  path: '/editor/:id',
   name: 'editor',
   component: () => import('../views/editor/EditorView.vue')
 }, {

src/views/Home.vue

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

src/views/editor/EditorView.vue

@@ -7,15 +7,24 @@
 
 <script>
 import EditorVue from '../../components/editor/Editor.vue'
-import { updateSlide } from '../../server/slide'
-import { DIFF } from '../../store/types/editor-types'
+import { updateSlide, getSlide } from '../../server/slide'
+import { DIFF, INIT_BY_STATE } from '../../store/types/editor-types'
 import { mapState } from 'vuex'
 
 export default {
   components: { EditorVue },
+  data() {
+    return {
+      slideId: this.$route.params.id
+    }
+  },
+  created() {
+    getSlide(this.slideId).then(res => {
+      this.$store.commit(INIT_BY_STATE, res)
+    })
+  },
   methods: {
     save() {
-      console.log(this.$store.state.editor.slideInfo)
       updateSlide(
         this.$store.state.editor.slideInfo,
         this.$store.state.editor.items

src/views/teacher/tabs/AddTab.vue

@@ -43,7 +43,7 @@ export default {
     handleSubmit() {
       createSlide(this.selectedCourseId, this.userInput).then(res => {
         this.$store.commit(INIT_BY_DEFAULT, res)
-        this.$router.push('/editor')
+        this.$router.push('/editor/' + res.id)
       })
     }
   }

src/views/teacher/tabs/SearchTab.vue

@@ -1,12 +1,33 @@
 <template>
   <div class="tab-wrapper">
-    search
+    <search-bar-vue v-model="searchKey"></search-bar-vue>
+    <div v-if="!searchKey" class="tip">
+      请输入关键字查询
+    </div>
+    <template v-else> </template>
   </div>
 </template>
 
 <script>
-export default {}
+import SearchBarVue from '@/components/common/SearchBar'
+export default {
+  data() {
+    return {
+      searchKey: ''
+    }
+  },
+  components: { SearchBarVue }
+}
 </script>
 <style lang="scss" scoped>
 @import './tab-common.scss';
+.tip {
+  color: #aabaca;
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+}
 </style>