重构优化组件

assets/sass/common.scss

@@ -9,12 +9,14 @@
   src: url('/fonts/DIN-Regular.ttf');
 }
 
-@font-face {font-family: 'webfont';
-  src: url('//at.alicdn.com/t/webfont_lfy2krusqbo.eot'); /* IE9*/
-  src: url('//at.alicdn.com/t/webfont_lfy2krusqbo.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('//at.alicdn.com/t/webfont_lfy2krusqbo.woff') format('woff'), /* chrome、firefox */
-  url('//at.alicdn.com/t/webfont_lfy2krusqbo.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
-  url('//at.alicdn.com/t/webfont_lfy2krusqbo.svg#思源黑体-粗') format('svg'); /* iOS 4.1- */
+/* 人面桃花山河入梦春尽江南富强民主文明和谐自由平等公正法治爱国敬业诚信友善 */
+@font-face {
+  font-family: 'webfont';
+  src: url('//at.alicdn.com/t/webfont_pdeql1wnff9.eot'); /* IE9*/
+  src: url('//at.alicdn.com/t/webfont_pdeql1wnff9.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('//at.alicdn.com/t/webfont_pdeql1wnff9.woff') format('woff'), /* chrome、firefox */
+  url('//at.alicdn.com/t/webfont_pdeql1wnff9.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+  url('//at.alicdn.com/t/webfont_pdeql1wnff9.svg#NotoSansHans-Black') format('svg'); /* iOS 4.1- */
 }
 
 ::selection {
@@ -98,7 +100,7 @@ input {
 }
 
 .swiper-pagination-bullet.swiper-pagination-bullet-active {
-  background: white;
+  background: $white;
 }
 
 .swiper-button-prev,

assets/sass/variables.scss

@@ -35,13 +35,10 @@ $text-reversal: var(--text-reversal);
 $link-color: var(--link-color);
 $link-hover-color: var(--link-hover-color);
 
-// ------------------------------
-
-$primary: #0088f5;
-
 // Colors
-$accent: #64ffda;
-$red: #f44336;
+$primary: #0088f5;
+$accent: #4caf50;
+$red: #ff5722;
 $yellow: #ffeb3b;
 $grey: #efefef;
 $black: #000;

components/archive/announcement.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="announcement">
+    <color-block-box :left="-66" color="primary" />
     <div class="title">
-      <i class="iconfont icon-clock-stroke"></i>
+      <i class="iconfont icon-radio"></i>
     </div>
     <transition name="module" mode="out-in">
       <empty-box class="announcement-empty-box" v-if="!announcement.data.data.length">
@@ -73,6 +74,7 @@
     overflow: hidden;
     position: relative;
     background-color: $module-bg;
+    color: $white;
 
     .announcement-empty-box {
       min-height: auto;

components/archive/item.vue

@@ -37,7 +37,7 @@
             <span>{{ article.meta.comments || 0 }}</span>
           </span>
           <span class="likes">
-            <i class="iconfont icon-like"></i>
+            <i class="iconfont icon-like" :class="{ liked: isLiked }"></i>
             <span>{{ article.meta.likes || 0 }}</span>
           </span>
           <span class="categories">
@@ -64,11 +64,17 @@
 
 <script>
   import { mapState } from 'vuex'
+  import { localUser, localHistoryLikes } from '~/utils/local-storage'
   export default {
     name: 'article-list-item',
     props: {
       article: Object
     },
+    data() {
+      return {
+        isLiked: false
+      }
+    },
     computed: {
       ...mapState('option', ['imgExt', 'language', 'mobileLayout'])
     },
@@ -77,6 +83,10 @@
         if (!thumb) return `${this.cdnUrl}/images/thumb-article.jpg`
         return `${thumb}?imageView2/1/w/350/h/238/format/${this.imgExt}/interlace/1/q/75|watermark/2/text/U3VybW9uLm1l/font/Y2FuZGFyYQ==/fontsize/460/fill/I0ZGRkZGRg==/dissolve/23/gravity/SouthWest/dx/15/dy/7|imageslim`
       }
+    },
+    mounted() {
+      const historyLikes = localHistoryLikes.get()
+      this.isLiked = historyLikes && historyLikes.pages.includes(this.article.id)
     }
   }
 </script>
@@ -123,7 +133,6 @@
         position: relative;
 
         .item-oirigin {
-          // width: 4rem;
           height: 2.1rem;
           line-height: 2.1rem;
           left: 0;
@@ -132,18 +141,18 @@
           z-index: 9;
           font-size: $font-size-small;
           text-align: center;
-          color: #fff;
+          color: $white;
           border-bottom-right-radius: 1px;
           opacity: .4;
           padding: 0 .8rem;
           text-transform: uppercase;
 
           &.self {
-            background-color: rgba(#4caf50, .5);
+            background-color: rgba($accent, .5);
           }
 
           &.other {
-            background-color: rgba(#ff5722, .5);
+            background-color: rgba($red, .5);
           }
 
           &.hybrid {
@@ -221,6 +230,13 @@
             min-width: 4rem;
           }
 
+          > .likes {
+
+            > .liked {
+              color: $red;
+            }
+          }
+
           > .likes,
           > .comments {
             min-width: 3em;

components/archive/list.vue

@@ -4,6 +4,7 @@
     <!-- 列表头 -->
     <transition name="module">
       <div class="article-list-header" v-if="!$route.name.includes('index')">
+        <!-- <color-block-box :left="-130" border="right" color="accent" /> -->
         <list-header></list-header>
       </div>
     </transition>
@@ -25,6 +26,7 @@
 
     <!-- 加载更多 -->
     <div class="article-load">
+      <color-block-box :left="75" border="left" color="red" />
       <button class="btn-loadmore" @click="$emit('loadmore')"
               :disabled="article.fetching || !canLoadMore">
         <span v-if="!article.fetching && canLoadMore"
@@ -108,12 +110,18 @@
     }
 
     > .article-load {
+      position: relative;
+      overflow: hidden;
 
       > .btn-loadmore {
         width: 100%;
         display: block;
         height: 3em;
+        padding-right: 2rem;
         line-height: 3em;
+        text-align: right;
+        color: $white;
+        font-family: webfont;
         background-color: $module-bg;
         text-transform: uppercase;
 

components/common/color-block/block.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="color-block-box" 
+      :style="{ transform: `rotate(-60deg) translateY(${left}%)` }" 
+      :class="{
+        [color]: true,
+        'border-left': border === 'left',
+        'border-right': border === 'right'
+      }"
+  ></div>
+</template>
+
+<script>
+  export default {
+    name: 'color-block-box',
+    props: {
+      left: Number,
+      border: {
+        type: String,
+        default: 'right'
+      },
+      color: String
+    }
+  }
+</script>
+
+<style lang="scss">
+  .color-block-box {
+    z-index: -1;
+    position: absolute;
+    display: flex;
+    width: 100%;
+    padding-bottom: 50%;
+
+    &.border-right {
+      border-bottom-width: 1rem;
+      border-bottom-style: solid;
+    }
+
+    &.border-left {
+      border-top-width: 1rem;
+      border-top-style: solid;
+    }
+
+    &.primary {
+      background-color: $primary-opacity-9;
+      border-color: $accent;
+    }
+
+    &.accent {
+      background-color: $accent;
+      border-color: $red;
+    }
+
+    &.red {
+      background-color: $red;
+      border-color: $accent;
+    }
+  }
+</style>

components/common/color-block/index.js

@@ -0,0 +1,14 @@
+/**
+ * @file Color block component / ES module
+ * @author Surmon <surmon@foxmail.com>
+ */
+
+import ColorBlockComponent from './block'
+
+const colorBlock = {
+  install(Vue) {
+    Vue.component(ColorBlockComponent.name, ColorBlockComponent)
+  }
+}
+
+export default colorBlock

components/common/vue-comment/comment.vue → components/common/comment/comment.vue

@@ -270,6 +270,7 @@
   import eventBus from '~/utils/event-bus'
   import { scrollTo } from '~/utils/scroll-to-anywhere'
   import { browserParse, osParse } from '~/utils/ua-os-browser'
+  import { localUser, localHistoryLikes } from '~/utils/local-storage'
   
   export default {
     name: 'vue-comment',
@@ -367,15 +368,13 @@
       },
       // 初始化本地用户即本地用户的点赞历史
       initUser() {
-        if (localStorage) {
-          const user = localStorage.getItem('user')
-          const historyLikes = localStorage.getItem('user_like_history')
-          if (historyLikes) this.historyLikes = JSON.parse(historyLikes)
-          if (user) {
-            this.user = JSON.parse(user)
-            this.upadteUserGravatar()
-            this.userCacheMode = true
-          }
+        const user = localUser.get()
+        const historyLikes = localHistoryLikes.get()
+        historyLikes && (this.historyLikes = historyLikes)
+        if (user) {
+          this.user = user
+          this.upadteUserGravatar()
+          this.userCacheMode = true
         }
       },
       // 更新用户数据
@@ -393,14 +392,14 @@
         if (this.user.site && !this.regexs.url.test(this.user.site)) {
           return alert(this.$i18n.text.comment.profile.siteerr)
         }
-        localStorage.setItem('user', JSON.stringify(this.user))
+        localUser.set(this.user)
         this.userCacheEditing = false
       },
       // 清空用户数据
       claerUserCache() {
         this.userCacheMode = false
         this.userCacheEditing = false
-        localStorage.removeItem('user')
+        localUser.remove()
         Object.keys(this.user).forEach(key => {
           this.user[key] = ''
         })
@@ -519,7 +518,7 @@
         this.$store.dispatch('likeArticleOrPageOrComment', { type: 2, id: this.postId })
         .then(data => {
           this.historyLikes.pages.push(this.postId)
-          localStorage.setItem('user_like_history', JSON.stringify(this.historyLikes))
+          localHistoryLikes.set(this.historyLikes)
         })
         .catch(err => {
           console.warn('喜欢失败', err)
@@ -532,7 +531,7 @@
         this.$store.dispatch('likeArticleOrPageOrComment', { type: 1, id: comment.id })
         .then(data => {
           this.historyLikes.comments.push(comment.id)
-          localStorage.setItem('user_like_history', JSON.stringify(this.historyLikes))
+          localHistoryLikes.set(this.historyLikes)
         })
         .catch(err => {
           console.warn('评论点赞失败', err)
@@ -629,7 +628,7 @@
           this.userCacheMode = true
           this.cancelCommentReply()
           this.clearCommentContent()
-          localStorage.setItem('user', JSON.stringify(this.user))
+          localUser.set(this.user)
         }).catch(err => {
           console.warn('评论发布失败', err)
           alert(this.$i18n.text.comment.profile.submiterr)

components/common/vue-comment/index.js → components/common/comment/index.js

@@ -1,5 +1,5 @@
 /**
- * @file Vue-comment-box component / ES module
+ * @file Comment box component / ES module
  * @author Surmon <surmon@foxmail.com>
  */
 

components/common/vue-empty/empty.vue → components/common/empty/empty.vue

@@ -6,7 +6,7 @@
 
 <script>
   export default {
-    name: 'vue-empty'
+    name: 'empty-box'
   }
 </script>
 

components/common/vue-empty/index.js → components/common/empty/index.js

@@ -1,13 +1,13 @@
 /**
- * @file Vue-empty component / ES module
+ * @file Empty box component / ES module
  * @author Surmon <surmon@foxmail.com>
  */
 
 import EmptyComponent from './empty'
 
 const empty = {
   install(Vue) {
-    Vue.component('empty-box', EmptyComponent)
+    Vue.component(EmptyComponent.name, EmptyComponent)
   }
 }
 

components/common/vue-loading/index.js → components/common/loading/index.js

@@ -1,5 +1,5 @@
  /**
- * @file Vue-loading component / ES module
+ * @file Loading component / ES module
  * @author Surmon <surmon@foxmail.com>
  */