refactor: 将所有icon提取到一个iconMap文件中，以便后续管理、修改

src/components/FileUploader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="c-input">
     <label>
-      <span>&#xe6c8; 点击选取文件上传</span>
+      <span>{{iconMap.upload}} 点击选取文件上传</span>
       <input
         type="file"
         :placeholder="placeholder"
@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import iconMap from '@/utils/icon-map'
 export default {
   model: {
     prop: 'value',
@@ -21,6 +22,11 @@ export default {
   props: {
     value: String,
     placeholder: String
+  },
+  data () {
+    return {
+      iconMap: iconMap
+    }
   }
 }
 </script>

src/components/GlobalMessage.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="message-wrapper">
+    <div class="message">
+      <div class="icon warning">{{iconfontMap['error']}}</div>
+      自动保存成功！
+    </div>
+  </div>
+
+</template>
+
+<script>
+import iconfontMap from '@/utils/iconfont-map'
+
+export default {
+  data () {
+    return {
+      iconfontMap: iconfontMap
+    }
+  },
+  computed: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.message-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.icon {
+  font-family: 'iconfont', sans-serif;
+  padding-right: 8px;
+  font-size: 1.4em;
+  line-height: 0;
+  user-select: none;
+}
+
+.warning {
+  color: darkorange;
+}
+
+.message {
+  color: #2a3a4a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 20px;
+  z-index: 2;
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0 auto;
+  padding: 8px 10px;
+  border-radius: 100px;
+  backdrop-filter: saturate(180%) blur(20px);
+  background: rgba(230, 230, 230, 0.6);
+}
+</style>

src/components/PDF/PdfController.vue

@@ -14,15 +14,7 @@
 
 <script>
 import Icon from '@/components/Icon'
-
-const iconMap = {
-  'mark_border': '\ue678',
-  'mark': '\ue677',
-  'screen_shot': '\ue6e5',
-  'next': '\ue7da',
-  'previous': '\ue813',
-  'discussion': '\ue610'
-}
+import iconMap from '@/utils/icon-map'
 
 export default {
   components: { Icon },

src/components/PDF/PdfViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <pdf ref="pdf" :src="src" :page="page"></pdf>
+    <pdf ref="pdf" :src="src" :page="page" :class="fullSize ? 'full-size': ''"></pdf>
     <pdf-controller
       @change-discussion-show-state="handleChangeDiscussionShowState"
       @previous="handlePrevious"
@@ -15,10 +15,16 @@ import Pdf from '@/components/PDF/Pdf'
 import PdfController from '@/components/PDF/PdfController'
 export default {
   components: { PdfController, Pdf },
-  props: ['src'],
+  props: ['src', 'discussion'],
   data () {
     return {
-      page: 1
+      page: 1,
+      fullSize: !this.discussion
+    }
+  },
+  watch: {
+    discussion (newValue) {
+      this.fullSize = !newValue
     }
   },
   methods: {
@@ -34,7 +40,6 @@ export default {
       this.page++
     },
     handleScreenShot () {
-      console.log(this.$refs.pdf)
       this.$refs.pdf.getScreenShot()
     }
   }
@@ -42,7 +47,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.pdf-controller{
-  position: absolute;
-}
 </style>

src/components/SearchBar.vue

@@ -8,11 +8,12 @@
         @input="$emit('input', $event.target.value)"
       />
     </label>
-    <span class="icon">&#xe6a2;</span>
+    <span class="icon">{{iconMap.search}}</span>
   </div>
 </template>
 
 <script>
+import iconMap from '@/utils/icon-map'
 export default {
   model: {
     prop: 'value',
@@ -20,6 +21,11 @@ export default {
   },
   props: {
     value: String
+  },
+  data () {
+    return {
+      iconMap: iconMap
+    }
   }
 }
 </script>

src/router/index.js

@@ -71,7 +71,7 @@ const routes = [{
 }]
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: process.env.BASE_URL,
   routes
 })

src/utils/icon-map.js

@@ -0,0 +1,18 @@
+const iconMap = {
+  'mark_border': '\ue678',
+  'mark': '\ue677',
+  'screen_shot': '\ue6e5',
+  'next': '\ue7da',
+  'previous': '\ue813',
+  'discussion': '\ue610',
+  'error': '\ue686',
+  'info': '\ue68e',
+  'explore': '\ue684',
+  'courses': '\ue67d',
+  'add': '\ue71b',
+  'personal': '\ue790',
+  'search': '\ue6a2',
+  'upload': '\ue6c8'
+}
+
+export default iconMap

src/views/reader/PdfReader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pdf-reader">
+  <div class="pdf-reader" :discussion="showDiscussion">
     <div class="pdf-wrapper">
       <pdf-viewer
         :src="src"
@@ -59,7 +59,6 @@ export default {
   },
   methods: {
     handleChangeDiscussionShowState (state) {
-      console.log(state)
       this.showDiscussion = state
     }
   }
@@ -80,7 +79,7 @@ export default {
 }
 
 .discussion-wrapper {
-  margin-top: 70px;
+  margin-top: 16px;
   box-sizing: border-box;
   overflow: auto;
   min-width: 350px;

src/views/shared/UserHomeLayout.vue

@@ -8,6 +8,7 @@
             :tab="tab"
             :key="tab.unicode"
             @click.native="handleIconButtonClick(tab.name)"
+            :title="tab.title"
           >
           </tab-icon-button>
         </template>

src/views/teacher/TeacherHome.vue

@@ -6,6 +6,7 @@
 
 <script>
 import UserHomeLayout from '@/views/shared/UserHomeLayout'
+import iconMap from '@/utils/icon-map'
 
 export default {
   components: { UserHomeLayout },
@@ -14,23 +15,28 @@ export default {
       tabs: [
         {
           name: 'explore',
-          unicode: '\ue684'
+          unicode: iconMap.explore,
+          title: '所有课程课件'
         },
         {
           name: 'courses',
-          unicode: '\ue67d'
+          unicode: iconMap.courses,
+          title: '管理课程'
         },
         {
           name: 'create-slide',
-          unicode: '\ue71b'
+          unicode: iconMap.add,
+          title: '新建幻灯片'
         },
         {
           name: 'discussion',
-          unicode: '\ue610'
+          unicode: iconMap.discussion,
+          title: '讨论区消息通知'
         },
         {
           name: 'personal',
-          unicode: '\ue790'
+          unicode: iconMap.personal,
+          title: '个人中心'
         }
       ]
     }

src/views/teacher/tabs/TeacherDiscussion.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="tab">
     <h1 class="title">讨论区消息通知</h1>
-    <div class="tip"><span>&#xe610;</span> 您有 <span>{{2}}</span> 个问题待回答</div>
-<!--    <div class="sub-title">新帖子</div>-->
+    <div class="tip"><span>{{iconMap.discussion}}</span> 您有 <span>{{2}}</span> 个问题待回答</div>
   </div>
 </template>
 
 <script>
-export default {}
+import iconMap from '@/utils/icon-map'
+
+export default {
+  data () {
+    return {
+      iconMap: iconMap
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -15,6 +22,7 @@ export default {}
   font-weight: bold;
   color: #7a8a9a;
   margin-bottom: 16px;
+
   & > span {
     font-family: 'iconfont', sans-serif;
     color: #ffc33b;