feat: 抽离样式文件，item样式更新

src/App.vue

@@ -9,6 +9,7 @@
 <script>
 import Message from '@/components/Message'
 import GlobalForm from '@/components/GlobalForm'
+
 export default {
   components: { Message, GlobalForm }
 }
@@ -24,11 +25,11 @@ body {
 <style lang="scss">
 @font-face {
   font-family: 'iconfont';  /* project id 1598214 */
-  src: url('//at.alicdn.com/t/font_1598214_ps1btaikhd.eot');
-  src: url('//at.alicdn.com/t/font_1598214_ps1btaikhd.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1598214_ps1btaikhd.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1598214_ps1btaikhd.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1598214_ps1btaikhd.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1598214_ps1btaikhd.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.eot');
+  src: url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.svg#iconfont') format('svg');
 }
 </style>

src/common/slide/editing-item.scss

@@ -0,0 +1,32 @@
+@import "./item.scss";
+
+* [contenteditable] {
+  cursor: text;
+  outline: none;
+
+  //&:hover {
+  //  background: #fafcfe;
+  //}
+  //
+  //&:focus {
+  //  background: #f9fafc;
+  //}
+
+  &::selection {
+    background-color: #ddeeff;
+  }
+
+  &:empty:before {
+    content: attr(placeholder);
+    color: #bbb;
+  }
+}
+
+.slideBreak {
+  color: lightblue;
+
+  &:empty:before {
+    content: attr(placeholder);
+    color: lightblue;
+  }
+}

src/common/slide/item.scss

@@ -1,49 +1,39 @@
+@import './../reset.scss';
 @import './../theme.scss';
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
-  width: 100%;
+  line-height: 2;
 }
 
-
 h1 {
   font-size: 2em;
-  margin: 1em 0 0.35em 0;
 }
 
 h2 {
   font-size: 1.8em;
-  margin: 1em 0 0.3em 0;
 }
 
 h3 {
   font-size: 1.5em;
-  margin: .5em 0 0.2em 0;
 }
 
 h4 {
   font-size: 1.35em;
-  margin: .5em 0 0.2em 0;
 }
 
 h5 {
   font-size: 1.2em;
-  margin: .25em 0 0.1em 0;
 }
 
 h6 {
   font-size: 1.1em;
-  margin: .25em 0 0.1em 0;
 }
 
 p,
 div {
-  margin: 0.44em 0;
+  padding: 2px 0;
+  line-height: 1.8;
 }
 
 li {
@@ -138,5 +128,5 @@ code {
   overflow: auto;
   padding: 0 0.19em;
   font-size: 0.8em;
-  font-weight: blod;
-}
+  font-weight: bold;
+}

src/common/slide/slide.scss

@@ -3,18 +3,16 @@ $slide-width: 1100px;
 .slide {
   box-sizing: border-box;
   text-align: justify;
-  margin: 0 auto;
   outline: none;
   max-width: $slide-width;
 
   line-height: 1.6;
 
   font-size: 24px;
+}
 
-
-  @media (min-width: 900px) {
-    .slide {
-      padding: 0 10vw;
-    }
+@media (min-width: 900px) {
+  .slide {
+    padding: 0 4vw;
   }
 }

src/store/modules/editor.js

@@ -8,6 +8,7 @@ import {
   SET_FOCUS_BEFORE,
   SET_FOCUS_AFTER,
   USE_FOCUS,
+  SET_HOVER,
   DIFF
 } from '../types/editor-types'
 
@@ -17,7 +18,8 @@ export default {
   state: {
     slideInfo: null,
     items: [],
-    focus: null
+    focus: null,
+    hover: null
   },
 
   mutations: {
@@ -125,6 +127,9 @@ export default {
     [USE_FOCUS] (state, payload) {
       state.focus = null
     },
+    [SET_HOVER] (state, payload) {
+      state.hover = payload.frontendId
+    },
     [DIFF] (state, payload) {
       const getIdByFrontendId = frontendId => {
         const item = payload.items.filter(item => item.frontendId === frontendId)[0]

src/store/types/editor-types.js

@@ -7,5 +7,6 @@ export const SET_FOCUS = 'setFocus'
 export const SET_FOCUS_BEFORE = 'setFocusBefore'
 export const SET_FOCUS_AFTER = 'setFocusAfter'
 export const USE_FOCUS = 'useFocus'
+export const SET_HOVER = 'setHover'
 
 export const DIFF = 'diff'

src/utils/iconfont-map.js

@@ -0,0 +1,14 @@
+const iconfontMap = {}
+iconfontMap.div = '\ue737'
+iconfontMap.h1 = '\ue61c'
+iconfontMap.h2 = '\ue61a'
+iconfontMap.h3 = '\ue61d'
+iconfontMap.h4 = '\ue61f'
+iconfontMap.h5 = '\ue61b'
+iconfontMap.h6 = '\ue61e'
+iconfontMap.blockquote = '\ue7f7'
+iconfontMap.olli = '\ue7f8'
+iconfontMap.ulli = '\ue7fa'
+iconfontMap.slideBreak = '\ue673'
+
+export default iconfontMap

src/views/editor/components/EditableItem.vue

@@ -1,18 +1,28 @@
 <template>
-  <component
-    ref="element"
-    :is="showInfo.tagName"
-    :id="item.frontendId"
-    @compositionstart.stop="handleCompositionStart"
-    @compositionend.stop="handleCompositionEnd"
-    @input.stop="handleInput"
-    @keydown.stop="handleKeyDown"
-    contenteditable
-    v-html="showInfo.content"
-    :class="showInfo.className"
-    :placeholder="showInfo.placeholder"
+  <div
+    class="reset-div item-container"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
-  </component>
+    <div
+      class="item-menu"
+      :class="className"
+    >{{iconfontMap[type]}}</div>
+    <component
+      ref="element"
+      :is="showInfo.tagName"
+      :id="item.frontendId"
+      @compositionstart.stop="handleCompositionStart"
+      @compositionend.stop="handleCompositionEnd"
+      @input.stop="handleInput"
+      @keydown.stop="handleKeyDown"
+      contenteditable
+      v-html="showInfo.content"
+      :class="showInfo.className"
+      :placeholder="showInfo.placeholder"
+    >
+    </component>
+  </div>
 </template>
 
 <script>
@@ -22,11 +32,13 @@ import {
   DELETE_ITEM,
   SET_FOCUS_AFTER,
   SET_FOCUS_BEFORE,
-  SET_FOCUS
+  SET_FOCUS, SET_HOVER
 } from '@/store/types/editor-types'
 import defaultPlaceholder from '@/utils/default-placeholder'
 import defaultMarkdownFragment from '@/utils/default-markdown-fragment'
 import { matchType, generateShowInfo } from '@/utils/item-common'
+import iconfontMap from '@/utils/iconfont-map'
+import { mapState } from 'vuex'
 
 export default {
   name: 'editable-item',
@@ -35,7 +47,8 @@ export default {
     return {
       isCompositionStarted: false,
       range: null,
-      type: 'div'
+      type: 'div',
+      iconfontMap: iconfontMap
     }
   },
   mounted () {
@@ -45,8 +58,17 @@ export default {
     this.type = this.matchType(this.item.content)
   },
   computed: {
+    ...mapState({
+      hover: state => state.editor.hover
+    }),
     showInfo () {
       return generateShowInfo(this.type, this.item)
+    },
+    className() {
+      return {
+        'icon-hover': this.hover === this.item.frontendId,
+        'heading': this.type.match(/h[0-6]/)
+      }
     }
   },
   methods: {
@@ -170,38 +192,52 @@ export default {
           cb()
         }
       })
+    },
+    handleMouseEnter () {
+      this.$store.commit(SET_HOVER, { frontendId: this.item.frontendId })
+    },
+    handleMouseLeave () {
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import '~@/common/slide/item.scss';
+@import '~@/common/slide/editing-item.scss';
 
-* [contenteditable] {
-  outline: none;
-  width: 100%;
+.reset-div {
+  padding: unset;
+  line-height: unset;
+}
 
+.item-menu {
+  opacity: 0;
+  cursor: pointer;
+  font-family: 'iconfont', sans-serif;
+  position: absolute;
+  transform: translateX(-32px);
+  color: #9aaaba;
+  font-size: .9em;
+  transition: 0.2s;
   &:hover {
-    background: #fafcfe;
+    color: #6a7a8a;
   }
+}
 
-  &:focus {
-    background: #f9fafc;
-  }
+.icon-hover {
+  opacity: 1;
+}
 
-  &:empty:before {
-    content: attr(placeholder);
-    color: #bbb;
-  }
+.heading {
+  transform: translateX(-32px) scaleY(.9);
 }
 
-.slideBreak {
-  color: lightblue;
+.item-container {
+  display: flex;
+  align-items: center;
 
-  &:empty:before {
-    content: attr(placeholder);
-    color: lightblue;
+  & > * {
+    flex: 1;
   }
 }
 </style>

src/views/editor/components/Editor.vue

@@ -93,4 +93,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@/common/slide/slide.scss';
+.slide {
+  margin: 0 auto;
+}
 </style>

src/views/reader/components/Reader.vue

@@ -59,7 +59,7 @@ export default {
 .slide {
   position: relative;
   flex-grow: 1;
-  overflow: auto;
+  margin: 0 auto;
 }
 
 .discuss-button-large {