feat: Add component & optimization

1. Project optimization
2. Add module loading animation component

Author: reco_luan

components/Common.vue

@@ -76,13 +76,11 @@
 <script>
 import Navbar from '@theme/components/Navbar.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
-import { resolveSidebarItems } from '../util'
+import { resolveSidebarItems } from '@theme/helpers/utils'
 import Password from '@theme/components/Password'
 import { setTimeout } from 'timers'
-import mixin from '@theme/mixins/index.js'
 
 export default {
-  mixins: [mixin],
   components: { Sidebar, Navbar, Password },
 
   props: {

components/FriendLink.vue

@@ -42,10 +42,9 @@
 
 <script>
 import md5 from 'md5'
-import mixin from '@theme/mixins/index.js'
+import { getOneColor } from '@theme/helpers/other'
 
 export default {
-  mixins: [mixin],
   data () {
     return {
       popupWindowStyle: {}
@@ -57,7 +56,7 @@ export default {
       if (friendLink && friendLink.length > 0) {
         friendLink = friendLink.map(item => ({
           ...item,
-          color: this._tagColor()
+          color: getOneColor()
         }))
         return friendLink
       }

components/Home.vue

@@ -1,46 +1,52 @@
 <template>
-  <div class="home" :class="recoShow?'reco-show': 'reco-hide'">
+  <div class="home">
     <div class="hero">
-      <img
-        v-if="data.isShowHeroImage !== false"
-        :style="heroImageStyle"
-        :src="data.heroImage ? $withBase(data.heroImage) : require('../images/icon_vuepress_reco.png')"
-        alt="hero">
-
-      <h1 v-if="data.isShowTitleInHome !== false">{{ data.heroText || $title || '午后南杂' }}</h1>
-
-      <p class="description">{{ $description || 'Welcome to your vuePress-theme-reco site' }}</p>
-      <p class="huawei" v-if="$themeConfig.huawei === true">
-        <i class="iconfont reco-huawei" style="color: #fc2d38"></i>
-        &nbsp;&nbsp;&nbsp;华为，为中华而为之！
-      </p>
-
-      <p class="action" v-if="data.actionText && data.actionLink">
-        <NavLink class="action-button" :item="actionLink"/>
-      </p>
+      <ModuleTransition delay="0.08">
+        <img
+          v-if="data.isShowHeroImage !== false && recoShowMoudle"
+          :style="heroImageStyle"
+          :src="data.heroImage ? $withBase(data.heroImage) : require('../images/icon_vuepress_reco.png')"
+          alt="hero">
+      </ModuleTransition>
+      <ModuleTransition delay="0.16">
+        <h1 v-if="data.isShowTitleInHome !== false && recoShowMoudle">{{ data.heroText || $title || '午后南杂' }}</h1>
+      </ModuleTransition>
+      <ModuleTransition delay="0.24">
+        <p v-if="recoShowMoudle" class="description">{{ $description || 'Welcome to your vuePress-theme-reco site' }}</p>
+      </ModuleTransition>
+      <ModuleTransition delay="0.32">
+        <p class="huawei" v-if="$themeConfig.huawei === true && recoShowMoudle">
+          <i class="iconfont reco-huawei" style="color: #fc2d38"></i>
+          &nbsp;&nbsp;&nbsp;华为，为中华而为之！
+        </p>
+      </ModuleTransition>
+      <ModuleTransition delay="0.4">
+        <p class="action" v-if="data.actionText && data.actionLink && recoShowMoudle">
+          <NavLink class="action-button" :item="actionLink"/>
+        </p>
+      </ModuleTransition>
     </div>
 
-    <div class="features" v-if="data.features && data.features.length">
-      <div v-for="(feature, index) in data.features" :key="index" class="feature">
-        <h2>{{ feature.title }}</h2>
-        <p>{{ feature.details }}</p>
+    <ModuleTransition delay="0.4">
+      <div class="features" v-if="data.features && data.features.length && recoShowMoudle">
+        <div v-for="(feature, index) in data.features" :key="index" class="feature">
+          <h2>{{ feature.title }}</h2>
+          <p>{{ feature.details }}</p>
+        </div>
       </div>
-    </div>
-
-    <Content class="home-center" custom/>
+    </ModuleTransition>
+    <ModuleTransition delay="0.48">
+      <Content class="home-center" v-if="recoShowMoudle" custom/>
+    </ModuleTransition>
   </div>
 </template>
 
 <script>
 import NavLink from '@theme/components/NavLink.vue'
+import ModuleTransition from '@theme/components/ModuleTransition.vue'
 
 export default {
-  components: { NavLink },
-  data () {
-    return {
-      recoShow: false
-    }
-  },
+  components: { NavLink, ModuleTransition },
   computed: {
     data () {
       return this.$frontmatter
@@ -59,16 +65,12 @@ export default {
         margin: '6rem auto 1.5rem'
       }
     }
-  },
-  mounted () {
-    this.recoShow = true
   }
 }
 </script>
 
 <style lang="stylus">
 @require '../styles/mode.styl'
-@require '../styles/loadMixin.styl'
 
 .home {
   padding: $navbarHeight 2rem 0;
@@ -138,58 +140,58 @@ export default {
     }
   }
 
-  &.reco-hide {
-  .hero {
-    img {
-      load-start()
-    }
-    .h1 {
-      load-start()
-    }
-    .description {
-      load-start()
-    }
-    .huawei {
-      load-start()
-    }
-    .action-button {
-      load-start()
-    }
-  }
-  .features {
-    load-start()
-  }
-  .home-center {
-    load-start()
-    padding 0
-  }
-}
-
-  &.reco-show {
-    .hero {
-      img {
-        load-end(0.08s)
-      }
-      .h1 {
-        load-end(0.16s)
-      }
-      .description {
-        load-end(0.24s)
-      }
-      .huawei {
-        load-end(0.32s)
-      }
-      .action-button {
-        load-end(0.4s)
-      }
-    }
-    .features {
-      load-end(0.40s)
-    }
-    .home-center {
-      load-end(0.48s)
-    }
-  }
+//   &.reco-hide {
+//   .hero {
+//     img {
+//       load-start()
+//     }
+//     .h1 {
+//       load-start()
+//     }
+//     .description {
+//       load-start()
+//     }
+//     .huawei {
+//       load-start()
+//     }
+//     .action-button {
+//       load-start()
+//     }
+//   }
+//   .features {
+//     load-start()
+//   }
+//   .home-center {
+//     load-start()
+//     padding 0
+//   }
+// }
+
+//   &.reco-show {
+//     .hero {
+//       img {
+//         load-end(0.08s)
+//       }
+//       .h1 {
+//         load-end(0.16s)
+//       }
+//       .description {
+//         load-end(0.24s)
+//       }
+//       .huawei {
+//         load-end(0.32s)
+//       }
+//       .action-button {
+//         load-end(0.4s)
+//       }
+//     }
+//     .features {
+//       load-end(0.40s)
+//     }
+//     .home-center {
+//       load-end(0.48s)
+//     }
+//   }
 }
 
 @media (max-width: $MQMobile) {

components/HomeBlog.vue

@@ -40,7 +40,7 @@
           <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
             <router-link :to="item.path">
               <span class="category-name">{{ item.name }}</span>
-              <span class="post-num" :style="{ 'backgroundColor': _tagColor() }">{{ item.pages.length }}</span>
+              <span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
             </router-link>
           </li>
         </ul>
@@ -60,10 +60,11 @@
 import TagList from '@theme/components/TagList.vue'
 import FriendLink from '@theme/components/FriendLink.vue'
 import NoteAbstract from '@theme/components/NoteAbstract.vue'
-import mixin from '@theme/mixins/index.js'
+import pagination from '@theme/mixins/pagination'
+import { getOneColor } from '@theme/helpers/other'
 
 export default {
-  mixins: [mixin],
+  mixins: [pagination],
   components: { NoteAbstract, TagList, FriendLink },
   data () {
     return {
@@ -135,7 +136,8 @@ export default {
       this.currentPage = page
       this.$page.currentPage = page
       this._setStoragePage(page)
-    }
+    },
+    getOneColor
   }
 }
 </script>

components/ModuleTransition.vue

@@ -0,0 +1,41 @@
+<template>
+  <transition
+    name="module"
+    @enter="setStyle"
+    @after-enter="unsetStyle"
+    @before-leave="setStyle">
+    <slot />
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'ModuleTransition',
+
+  props: {
+    delay: {
+      type: String,
+      default: '0'
+    }
+  },
+
+  methods: {
+    setStyle (items) {
+      items.style.transition = `all .25s ease-in ${this.delay}s`
+      items.style.transform = 'translateY(-20px)'
+      items.style.opacity = 0
+    },
+    unsetStyle (items) {
+      items.style.transform = 'translateY(0)'
+      items.style.opacity = 1
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.module-enter, .module-leave-to {
+  opacity: 0;
+  transform:translateY(-20px);
+}
+</style>

components/NavLink.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { isExternal, isMailto, isTel, ensureExt } from '../util'
+import { isExternal, isMailto, isTel, ensureExt } from '@theme/helpers/utils'
 
 export default {
   props: {

components/NavLinks.vue

@@ -32,7 +32,7 @@
 
 <script>
 import DropdownLink from '@theme/components/DropdownLink.vue'
-import { resolveNavLinkItem } from '../util'
+import { resolveNavLinkItem } from '@theme/helpers/utils'
 import NavLink from '@theme/components/NavLink.vue'
 
 export default {

components/Page.vue

@@ -69,7 +69,7 @@
 
 <script>
 import PageInfo from '@theme/components/PageInfo'
-import { resolvePage, outboundRE, endingSlashRE } from '../util'
+import { resolvePage, outboundRE, endingSlashRE } from '@theme/helpers/utils'
 
 export default {
   components: { PageInfo },

components/PageInfo.vue

@@ -8,7 +8,7 @@
     <i
       v-if="pageInfo.frontmatter.date"
       class="iconfont reco-date">
-      <span>{{ pageInfo.frontmatter.date | formatDate }}</span>
+      <span>{{ pageInfo.frontmatter.date | formatDateValue }}</span>
     </i>
     <i
       v-if="hideAccessNumber !== true"
@@ -34,7 +34,7 @@
 
 <script>
 // 引入时间格式化js文件
-import { formatDate } from '@theme/util'
+import { formatDate } from '@theme/helpers/utils'
 
 export default {
   // props: ['pageInfo', 'currentTag'],
@@ -64,7 +64,7 @@ export default {
     }
   },
   filters: {
-    formatDate: function (value) {
+    formatDateValue (value) {
       if (!value) return ''
       // 返回的value的值都是这个样子2019-09-20T18:22:30.000Z
       // 对value进行处理

components/SidebarGroup.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { isActive } from '../util'
+import { isActive } from '@theme/helpers/utils'
 import DropdownTransition from '@theme/components/DropdownTransition.vue'
 
 export default {