diff --git a/resources/spa/src/components.js b/resources/spa/src/components.js
index bfab09e95..b1b6e3935 100644
--- a/resources/spa/src/components.js
+++ b/resources/spa/src/components.js
@@ -1,6 +1,6 @@
 /** common components */
 import btnSwitch from './components/common/btnSwitch' /* btnSwitch 按钮 */
-import badge from './components/common/badge' /* Badge 徽标 */
+import Badge from './components/common/Badge' /* Badge 徽标 */
 import CommonHeader from './components/common/CommonHeader.vue' /* 通用头部 */
 import fullSpin from './components/FullSpin' /* 全屏加载动画 */
 import loadMore from './components/loadMore'
@@ -18,7 +18,7 @@ import FormItems from '@/components/form/formItem.js'
 export default [
   Avatar,
   btnSwitch,
-  badge,
+  Badge,
   loadMore,
   fullSpin,
   HeadTop,
diff --git a/resources/spa/src/components/DiySelect.vue b/resources/spa/src/components/DiySelect.vue
index 337a823e3..e3025820e 100644
--- a/resources/spa/src/components/DiySelect.vue
+++ b/resources/spa/src/components/DiySelect.vue
@@ -16,7 +16,7 @@
         @click="setCurVal(option)"
       >
         <template v-if="option.hasMsg">
-          <VBadge :dot="option.hasMsg">{{ option.label }}</VBadge>
+          <Badge :dot="option.hasMsg">{{ option.label }}</Badge>
         </template>
         <span v-else>{{ option.label }}</span>
       </div>
diff --git a/resources/spa/src/components/FootGuide.vue b/resources/spa/src/components/FootGuide.vue
index f31851292..e1c0f135f 100644
--- a/resources/spa/src/components/FootGuide.vue
+++ b/resources/spa/src/components/FootGuide.vue
@@ -33,11 +33,11 @@
       class="guide-item"
       @click="to({name: 'MessageHome'})"
     >
-      <VBadge :dot="hasUnread">
+      <Badge :dot="hasUnread">
         <svg class="m-style-svg m-svg-def">
           <use xlink:href="#icon-foot-message" />
         </svg>
-      </VBadge>
+      </Badge>
       <span>消息</span>
     </section>
     <section
@@ -45,11 +45,11 @@
       class="guide-item"
       @click="to('/profile')"
     >
-      <VBadge :dot="profile">
+      <Badge :dot="profile">
         <svg class="m-style-svg m-svg-def">
           <use xlink:href="#icon-foot-profile" />
         </svg>
-      </VBadge>
+      </Badge>
       <span>我</span>
     </section>
   </footer>
@@ -77,6 +77,7 @@ export default {
   },
   mounted () {
     this.$el.parentNode.style.paddingBottom = '1rem'
+    this.fetchUnread()
   },
   methods: {
     to (path) {
@@ -88,6 +89,10 @@ export default {
     showPostMenu () {
       this.$bus.$emit('post-menu')
     },
+    fetchUnread () {
+      if (this.$route.path.match(/^\/message/)) return
+      this.$store.dispatch('GET_NEW_UNREAD_COUNT')
+    },
   },
 }
 </script>
diff --git a/resources/spa/src/components/common/badge.vue b/resources/spa/src/components/common/Badge.vue
similarity index 91%
rename from resources/spa/src/components/common/badge.vue
rename to resources/spa/src/components/common/Badge.vue
index b2c0713bf..86d9c111f 100644
--- a/resources/spa/src/components/common/badge.vue
+++ b/resources/spa/src/components/common/Badge.vue
@@ -7,6 +7,7 @@
     <slot />
     <sup :class="dotClasses" />
   </span>
+
   <span
     v-else
     ref="badge"
@@ -27,7 +28,7 @@
 const prefixCls = 'v-badge'
 
 export default {
-  name: 'VBadge',
+  name: 'Badge',
   props: {
     count: { type: [Number, String], default: 0 },
     dot: { type: [Boolean, Number], default: false },
@@ -90,18 +91,16 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    transform: translateX(100%);
-    top: -10px;
     right: 0;
-    height: 24px;
-    width: 24px;
-    border-radius: 24px;
+    height: 32px;
+    width: 32px;
+    border-radius: 32px;
     background: @error;
     border: 1px solid transparent; /*no*/
     color: #fff;
     font-size: 20px;
     white-space: nowrap;
-    transform-origin: -10% center;
+    // transform-origin: -10% center;
     z-index: 10;
     box-shadow: 0 0 0 1px @error; /*no*/
 
@@ -112,9 +111,8 @@ export default {
 
     &-alone {
       top: auto;
-      display: block;
       position: relative;
-      transform: translateX(0);
+      transform: scale(0.9);
     }
   }
 
diff --git a/resources/spa/src/page/Discover.vue b/resources/spa/src/page/Discover.vue
index fdfd0673f..598ff26cf 100644
--- a/resources/spa/src/page/Discover.vue
+++ b/resources/spa/src/page/Discover.vue
@@ -22,12 +22,9 @@
             <use :xlink:href="`#icon-discover-${icon}`" />
           </svg>
           <span class="m-flex-grow1">{{ title }}</span>
-          <VBadge
-            :dot="new_tips"
-            class="m-entry-extra"
-          >
+          <Badge :dot="new_tips" class="m-entry-extra">
             {{ tips }}
-          </VBadge>
+          </Badge>
           <svg class="m-style-svg m-svg-def entry__item--append">
             <use xlink:href="#icon-arrow-right" />
           </svg>
diff --git a/resources/spa/src/page/UserFans.vue b/resources/spa/src/page/UserFans.vue
index 576da2d30..2ffe88e76 100644
--- a/resources/spa/src/page/UserFans.vue
+++ b/resources/spa/src/page/UserFans.vue
@@ -1,37 +1,20 @@
 <template>
   <div class="p-user-fans">
-    <nav class="m-box m-head-top m-lim-width m-pos-f m-main m-bb1" style="padding: 0 10px;">
-      <div class="m-box m-aln-center m-flex-shrink0 ">
-        <svg class="m-style-svg m-svg-def" @click="goBack">
-          <use xlink:href="#icon-back" />
-        </svg>
-      </div>
-      <ul class="m-box m-flex-grow1 m-aln-center m-justify-center m-flex-base0 m-head-nav">
-        <RouterLink
-          :to="`/users/${userId}/followers`"
-          tag="li"
-          active-class="active"
-          exact
-          replace
-        >
-          <a>粉丝</a>
-        </RouterLink>
-        <RouterLink
-          :to="`/users/${userId}/followings`"
-          tag="li"
-          active-class="active"
-          exact
-          replace
-        >
-          <a>关注</a>
-        </RouterLink>
-      </ul>
-      <div class="m-box m-justify-end" />
-    </nav>
+    <CommonHeader :pinned="true" class="header">
+      <nav class="type-switch-bar">
+        <span :class="{active: type === 'followers'}" @click="type = 'followers'">
+          粉丝
+        </span>
+        <span :class="{active: type === 'followings'}" @click="type = 'followings'">
+          关注
+        </span>
+      </nav>
+    </CommonHeader>
 
-    <main style="padding-top: 0.9rem">
+    <main>
       <JoLoadMore
         ref="loadmore"
+        :auto-load="false"
         @onRefresh="onRefresh"
         @onLoadMore="onLoadMore"
       >
@@ -67,10 +50,16 @@ export default {
   },
   computed: {
     userId () {
-      return ~~this.$route.params.userId
+      return Number(this.$route.params.userId)
     },
-    type () {
-      return this.$route.params.type
+    type: {
+      get () {
+        const { path } = this.$route
+        return path.match(/\/(\w+)$/)[1]
+      },
+      set (val) {
+        this.$router.replace({ path: `/users/${this.userId}/${val}` })
+      },
     },
     param () {
       return {
diff --git a/resources/spa/src/page/feed/FeedList.vue b/resources/spa/src/page/feed/FeedList.vue
index 70bb1f068..d09356655 100644
--- a/resources/spa/src/page/feed/FeedList.vue
+++ b/resources/spa/src/page/feed/FeedList.vue
@@ -1,36 +1,35 @@
 <template>
   <div class="p-feed">
-    <nav class="m-box m-head-top m-lim-width m-pos-f m-main m-bb1">
-      <ul class="m-box m-flex-grow1 m-aln-center m-justify-center m-flex-base0 m-head-nav">
-        <RouterLink
-          :to="{ name:'feeds', query: { type: 'new' } }"
-          tag="li"
-          active-class="active"
-          exact
-          replace
-        >
-          <a>最新</a>
-        </RouterLink>
-        <RouterLink
-          :to="{ name:'feeds', query: { type: 'hot' } }"
-          tag="li"
-          active-class="active"
-          exact
-          replace
-        >
-          <a>热门</a>
-        </RouterLink>
-        <RouterLink
-          :to="{ name:'feeds', query: { type: 'follow' } }"
-          tag="li"
-          active-class="active"
-          exact
-          replace
-        >
-          <a>关注</a>
-        </RouterLink>
-      </ul>
-    </nav>
+    <CommonHeader :pinned="true" class="header">
+      <span slot="left" />
+      <nav class="type-switch-bar">
+        <span :class="{active: feedType === 'new'}" @click="feedType = 'new'"> 最新 </span>
+        <span :class="{active: feedType === 'hot'}" @click="feedType = 'hot'"> 热门 </span>
+        <span :class="{active: feedType === 'follow'}" @click="feedType = 'follow'"> 关注 </span>
+      </nav>
+    </CommonHeader>
+
+    <main class="p-feed-main">
+      <JoLoadMore
+        ref="loadmore"
+        @onRefresh="onRefresh"
+        @onLoadMore="onLoadMore"
+      >
+        <ul class="feed-list">
+          <li
+            v-for="(feed, index) in pinned"
+            v-if="feed.id"
+            :key="`pinned-feed-${feedType}-${feed.id}-${index}`"
+          >
+            <FeedCard :feed="feed" :pinned="true" />
+          </li>
+          <li v-for="(card, index) in feeds" :key="`feed-${feedType}-${card.id}-${index}`">
+            <FeedCard v-if="card.user_id" :feed="card" />
+            <FeedAdCard v-if="card.space_id" :ad="card" />
+          </li>
+        </ul>
+      </JoLoadMore>
+    </main>
 
     <JoLoadMore
       ref="loadmore"
@@ -67,18 +66,14 @@
         </li>
       </ul>
     </JoLoadMore>
+
     <FootGuide />
   </div>
 </template>
 
 <script>
-/**
- * 动态列表
- * @typedef {{id: number, user, ...others}} FeedDetail
- */
-
+import { mapGetters } from 'vuex'
 import { limit } from '@/api'
-import { noop } from '@/util'
 import FeedCard from '@/components/FeedCard/FeedCard.vue'
 
 const feedTypesMap = ['new', 'hot', 'follow']
@@ -86,18 +81,19 @@ const feedTypesMap = ['new', 'hot', 'follow']
 export default {
   name: 'FeedList',
   components: { FeedCard },
-  data () {
-    return {}
-  },
   computed: {
-    feedType () {
-      return this.$route.query.type || 'hot'
-    },
+    ...mapGetters('feed', ['hot', 'new', 'follow', 'pinned']),
     feeds () {
-      return this.$store.getters[`feed/${this.feedType}`]
+      return this[this.feedType]
     },
-    pinned () {
-      return this.$store.getters['feed/pinned']
+    feedType: {
+      get () {
+        return this.$route.query.type || 'hot'
+      },
+      set (val) {
+        const { query } = this.$route
+        this.$router.replace({ query: { ...query, type: val } })
+      },
     },
     after () {
       const len = this.feeds.length
@@ -107,15 +103,12 @@ export default {
     },
   },
   watch: {
-    feedType (val, oldVal) {
-      feedTypesMap.includes(val) &&
-        oldVal &&
+    feedType (val) {
+      if (feedTypesMap.includes(val)) {
         this.$refs.loadmore.beforeRefresh()
+      }
     },
   },
-  created () {
-    this.onRefresh(noop)
-  },
   activated () {
     if (this.$route.query.refresh) {
       this.$refs.loadmore.beforeRefresh()
@@ -140,11 +133,7 @@ export default {
 
 <style lang="less" scoped>
 .p-feed {
-  .p-feed-main {
-    padding-top: 90px;
-  }
-
-  .p-feed-list > li + li {
+  .feed-list > li + li {
     margin-top: 20px;
   }
 }
diff --git a/resources/spa/src/page/message/MessageBase.vue b/resources/spa/src/page/message/MessageBase.vue
index 04baef063..ea7a1ebe6 100644
--- a/resources/spa/src/page/message/MessageBase.vue
+++ b/resources/spa/src/page/message/MessageBase.vue
@@ -4,10 +4,10 @@
       <span slot="left" />
       <nav class="type-switch-bar">
         <span :class="{active: currentType === 'list'}" @click="currentType = 'list'">
-          <VBadge :dot="hasUnreadMessage">消息</VBadge>
+          <Badge :dot="hasUnreadMessage">消息</Badge>
         </span>
         <span :class="{active: currentType === 'chats'}" @click="currentType = 'chats'">
-          <VBadge :dot="hasUnreadChat">聊天</VBadge>
+          <Badge :dot="hasUnreadChat">聊天</Badge>
         </span>
       </nav>
     </CommonHeader>
@@ -37,10 +37,6 @@ export default {
       },
     },
   },
-  created () {
-    this.$store.dispatch('GET_UNREAD_COUNT')
-    this.$store.dispatch('GET_NEW_UNREAD_COUNT')
-  },
 }
 </script>
 
diff --git a/resources/spa/src/page/message/MessageHome.vue b/resources/spa/src/page/message/MessageHome.vue
index 7ef00e646..03ae13468 100644
--- a/resources/spa/src/page/message/MessageHome.vue
+++ b/resources/spa/src/page/message/MessageHome.vue
@@ -26,9 +26,7 @@
             </h5>
             <h5 v-else />
             <div class="m-box m-aln-center m-justify-end">
-              <span v-if="computedGetter(item.count) !== 0" :class="`${prefixCls}-time-count`">
-                {{ computedGetter(item.count) }}
-              </span>
+              <Badge v-if="computedGetter(item.count)" :count="computedGetter(item.count)" />
             </div>
           </div>
         </RouterLink>
@@ -38,7 +36,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
+import { mapState } from 'vuex'
 
 const prefixCls = 'msg'
 
@@ -125,9 +123,9 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['GET_NEW_UNREAD_COUNT']),
     async fetchMessage () {
-      await this.GET_NEW_UNREAD_COUNT()
+      this.$store.dispatch('GET_UNREAD_COUNT')
+      await this.$store.dispatch('GET_NEW_UNREAD_COUNT')
       this.$refs.loadmore.afterRefresh()
     },
     computedGetter (key) {
@@ -172,18 +170,5 @@ export default {
     color: #ccc;
     font-size: 24px;
   }
-
-  .msg-time-count {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 32px;
-    background: @error;
-    color: #fff;
-    font-size: 24px;
-  }
 }
-
 </style>
diff --git a/resources/spa/src/page/Profile.vue b/resources/spa/src/page/profile/ProfileHome.vue
similarity index 53%
rename from resources/spa/src/page/Profile.vue
rename to resources/spa/src/page/profile/ProfileHome.vue
index 27335c4ac..26d613d53 100644
--- a/resources/spa/src/page/Profile.vue
+++ b/resources/spa/src/page/profile/ProfileHome.vue
@@ -6,16 +6,13 @@
     </CommonHeader>
 
     <main class="m-box-model">
-      <div class="m-box-model m-main m-pr-info">
+      <div class="m-box-model m-main">
         <RouterLink
           tag="section"
-          class="m-box m-aln-center"
+          class="m-box m-aln-center profile-info"
           to="/info"
         >
-          <Avatar
-            :user="user"
-            size="big"
-          />
+          <Avatar :user="user" size="big" />
           <div class="m-text-box m-flex-grow1 m-flex-shrink1 m-flex-base0 m-pr-user-info">
             <h4 class="m-pr-username">{{ user.name }}</h4>
             <p class="m-pr-bio m-text-cut-2">{{ user.bio || "这家伙很懒,什么也没有留下" }}</p>
@@ -24,120 +21,84 @@
             <use xlink:href="#icon-arrow-right" />
           </svg>
         </RouterLink>
-        <div class="m-box m-aln-center m-justify-aro m-bt1 m-pr-extra-box">
+
+        <div class="m-box m-aln-center m-justify-aro m-bt1 followers">
           <RouterLink
             :to="`/users/${user.id}/followers`"
             tag="div"
-            class="m-box-model m-aln-center m-justify-center m-flex-grow1 m-pr-extra"
+            class="follower-item"
           >
-            <VBadge :count="new_followers">
+            <Badge :count="new_followers">
               <a>{{ ~~(extra.followers_count) | formatNum }}</a>
-            </VBadge>
+            </Badge>
             <p>粉丝</p>
           </RouterLink>
           <RouterLink
             :to="`/users/${user.id}/followings`"
             tag="div"
-            class="m-box-model m-aln-center m-justify-center m-flex-grow1 m-pr-extra"
+            class="follower-item"
           >
-            <VBadge count="0">
+            <Badge count="0">
               <a>{{ ~~(extra.followings_count) | formatNum }}</a>
-            </VBadge>
+            </Badge>
             <p>关注</p>
           </RouterLink>
         </div>
       </div>
+
       <div class="m-box-model m-pr-entrys">
         <ul class="m-box-model m-entry-group">
-          <RouterLink
+          <ProfileItem
+            label="个人主页"
+            icon="#icon-profile-home"
             :to="`/users/${user.id}`"
-            tag="li"
-            class="m-entry"
-          >
-            <svg class="m-style-svg m-svg-def m-entry-prepend">
-              <use xlink:href="#icon-profile-home" />
-            </svg>
-            <span class="m-text-box m-flex-grow1">个人主页</span>
-            <svg class="m-style-svg m-svg-def m-entry-append">
-              <use xlink:href="#icon-arrow-right" />
-            </svg>
-          </RouterLink>
-          <RouterLink
+          />
+
+          <ProfileItem
+            label="我的投稿"
+            icon="#icon-profile-plane"
             to="/profile/news/released"
-            tag="li"
-            class="m-entry"
-          >
-            <svg class="m-style-svg m-svg-def m-entry-prepend">
-              <use xlink:href="#icon-profile-plane" />
-            </svg>
-            <span class="m-text-box m-flex-grow1">我的投稿</span>
-            <svg class="m-style-svg m-svg-def m-entry-append">
-              <use xlink:href="#icon-arrow-right" />
-            </svg>
-          </RouterLink>
+          />
         </ul>
+
         <ul class="m-box-model m-entry-group">
-          <li class="m-entry" @click="popupBuyTS">
-            <svg class="m-style-svg m-svg-def m-entry-prepend">
-              <use xlink:href="#icon-profile-wallet" />
-            </svg>
-            <span class="m-text-box m-flex-grow1">钱包</span>
-            <span class="m-entry-extra">{{ new_balance }}</span>
-            <svg class="m-style-svg m-svg-def m-entry-append">
-              <use xlink:href="#icon-arrow-right" />
-            </svg>
-          </li>
-          <li class="m-entry" @click="popupBuyTS">
-            <svg class="m-style-svg m-svg-def m-entry-prepend">
-              <use xlink:href="#icon-profile-integral" />
-            </svg>
-            <span class="m-text-box m-flex-grow1">{{ currencyUnit }}</span>
-            <span class="m-entry-extra">{{ sum }}</span>
-            <svg class="m-style-svg m-svg-def m-entry-append">
-              <use xlink:href="#icon-arrow-right" />
-            </svg>
-          </li>
-          <RouterLink
-            to="/profile/collection/feeds"
-            tag="li"
-            class="m-entry"
+          <ProfileItem
+            label="钱包"
+            icon="#icon-profile-wallet"
+            @click="popupBuyTS"
           >
-            <svg class="m-style-svg m-svg-def m-entry-prepend">
-              <use xlink:href="#icon-profile-collect" />
-            </svg>
-            <span class="m-text-box m-flex-grow1">收藏</span>
-            <svg class="m-style-svg m-svg-def m-entry-append">
-              <use xlink:href="#icon-arrow-right" />
-            </svg>
-          </RouterLink>
+            {{ new_balance }}
+          </ProfileItem>
+
+          <ProfileItem
+            :label="currencyUnit"
+            icon="#icon-profile-integral"
+            @click="popupBuyTS"
+          >
+            {{ sum }}
+          </ProfileItem>
+
+          <ProfileItem
+            label="收藏"
+            icon="#icon-profile-collect"
+            to="/profile/collection/feeds"
+          />
         </ul>
+
         <ul class="m-box-model m-entry-group">
-          <li
-            class="m-entry"
+          <ProfileItem
+            label="认证"
+            icon="#icon-profile-approve"
             @click="selectCertType"
           >
-            <svg class="m-style-svg m-svg-def m-entry-prepend">
-              <use xlink:href="#icon-profile-approve" />
-            </svg>
-            <span class="m-text-box m-flex-grow1">认证</span>
-            <span class="m-entry-extra">{{ verifiedText }}</span>
-            <svg class="m-style-svg m-svg-def m-entry-append">
-              <use xlink:href="#icon-arrow-right" />
-            </svg>
-          </li>
-          <RouterLink
+            {{ verifiedText }}
+          </ProfileItem>
+
+          <ProfileItem
+            label="设置"
+            icon="#icon-profile-setting"
             to="/setting"
-            tag="li"
-            class="m-entry"
-          >
-            <svg class="m-style-svg m-svg-def m-entry-prepend">
-              <use xlink:href="#icon-profile-setting" />
-            </svg>
-            <span class="m-text-box m-flex-grow1">设置</span>
-            <svg class="m-style-svg m-svg-def m-entry-append">
-              <use xlink:href="#icon-arrow-right" />
-            </svg>
-          </RouterLink>
+          />
         </ul>
       </div>
     </main>
@@ -149,9 +110,11 @@
 import _ from 'lodash'
 import { mapState } from 'vuex'
 import { resetUserCount } from '@/api/message.js'
+import ProfileItem from './components/ProfileItem'
 
 export default {
   name: 'Profile',
+  components: { ProfileItem },
   data () {
     return {
       verifiedText: '',
@@ -197,12 +160,9 @@ export default {
   mounted () {
     this.$store.dispatch('fetchUserInfo')
     this.$store.dispatch('FETCH_USER_VERIFY')
-    this.$store.dispatch('GET_NEW_UNREAD_COUNT')
   },
   beforeRouteLeave (to, from, next) {
-    const {
-      params: { type },
-    } = to
+    const { params: { type } } = to
     const resetType =
       type === 'followers' ? 'following' : type === 'mutual' ? 'mutual' : ''
     resetType && resetUserCount(resetType)
@@ -236,27 +196,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.m-pr-info {
-  padding: 30px;
-}
-.m-pr-extra {
-  font-size: 28px;
-
-  a {
-    font-size: 32px;
-  }
-
-  p {
-    margin-top: 15px;
-  }
-  & + & {
-    border-left: 1px solid @border-color; /*no*/
-  }
-  &-box {
-    margin-top: 30px;
-    padding-top: 30px;
-  }
-}
 .m-pr-user-info {
   margin-left: 30px;
   margin-right: 30px;
@@ -276,8 +215,9 @@ export default {
 .m-pr-entrys {
   margin-top: 30px;
   margin-bottom: 30px;
-  .m-entry-group {
-    padding: 0 30px;
+
+  .m-entry {
+    padding: 0 20px;
   }
 
   .m-entry-extra {
@@ -290,6 +230,34 @@ export default {
 }
 
 .p-profile {
+  .profile-info {
+    padding: 30px;
+  }
+  .followers {
+    padding: 40px 20px;
+
+    .follower-item {
+      flex: auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 28px;
+      border-left: 1px solid @border-color; /*no*/
+
+      &:first-child {
+        border-left: none;
+      }
+
+      a {
+        font-size: 32px;
+      }
+
+      p {
+        margin-top: 15px;
+      }
+    }
+  }
   .m-entry-prepend {
     color: @primary;
     width: 36px;
diff --git a/resources/spa/src/page/profile/components/ProfileItem.vue b/resources/spa/src/page/profile/components/ProfileItem.vue
new file mode 100644
index 000000000..3c6d1a9ac
--- /dev/null
+++ b/resources/spa/src/page/profile/components/ProfileItem.vue
@@ -0,0 +1,29 @@
+<template>
+  <li class="m-entry" @click="onClick">
+    <svg class="m-style-svg m-svg-def m-entry-prepend">
+      <use :xlink:href="icon" />
+    </svg>
+    <span class="m-text-box m-flex-grow1">{{ label }}</span>
+    <span class="m-entry-extra"><slot /></span>
+    <svg class="m-style-svg m-svg-def m-entry-append">
+      <use xlink:href="#icon-arrow-right" />
+    </svg>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'ProfileItem',
+  props: {
+    label: { type: String, default: '' },
+    icon: { type: String, required: true },
+    to: { type: [String, Object], default: null },
+  },
+  methods: {
+    onClick () {
+      if (this.to) this.$router.push(this.to)
+      this.$emit('click')
+    },
+  },
+}
+</script>
diff --git a/resources/spa/src/page/sign/Signin.vue b/resources/spa/src/page/sign/Signin.vue
index b9976fe2f..ebff902e4 100644
--- a/resources/spa/src/page/sign/Signin.vue
+++ b/resources/spa/src/page/sign/Signin.vue
@@ -7,10 +7,7 @@
       <CommonHeader>
         登录
         <span slot="left" />
-        <RouterLink
-          slot="right"
-          to="/signup"
-        >
+        <RouterLink slot="right" to="/signup">
           注册
         </RouterLink>
       </CommonHeader>
@@ -55,20 +52,14 @@
               @keyup.enter="signinByAccount"
             >
           </div>
-          <svg
-            class="m-style-svg m-svg-def"
-            @click="eye = !eye"
-          >
+          <svg class="m-style-svg m-svg-def" @click="eye = !eye">
             <use :xlink:href="eye ? '#icon-eye-open' : '#icon-eye-close'" />
           </svg>
         </div>
         <div class="m-box m-aln-center m-text-box m-form-err-box">
           <span>{{ err | plusMessageFirst }}</span>
         </div>
-        <div
-          class="m-form-row"
-          style="border: 0"
-        >
+        <div class="m-form-row" style="border: 0">
           <button
             :disabled="disabled"
             class="m-long-btn m-signin-btn"
@@ -79,16 +70,10 @@
           </button>
         </div>
         <div class="m-box m-aln-center m-justify-bet other-link">
-          <RouterLink
-            tag="span"
-            to="/feeds?type=hot"
-          >
+          <RouterLink tag="span" to="/feeds?type=hot">
             <a>不登录，先随便逛逛</a>
           </RouterLink>
-          <RouterLink
-            tag="span"
-            to="/forgot"
-          >
+          <RouterLink tag="span" to="/forgot">
             <a>忘记密码</a>
           </RouterLink>
         </div>
@@ -111,10 +96,7 @@
             </div>
             <span>QQ</span>
           </div> -->
-          <div
-            class="m-box m-fd-col m-aln-center m-tr-item"
-            @click="signinByWechat"
-          >
+          <div class="m-box m-fd-col m-aln-center m-tr-item" @click="signinByWechat">
             <div class="m-tr-item-icon">
               <svg class="m-style-svg m-svg-def">
                 <use xlink:href="#icon-login-wechat" />
diff --git a/resources/spa/src/routers/base.js b/resources/spa/src/routers/base.js
index 7eb2c6710..79a7f54ed 100644
--- a/resources/spa/src/routers/base.js
+++ b/resources/spa/src/routers/base.js
@@ -5,7 +5,7 @@ import SiteUpgrade from '@/page/SiteUpgrade.vue'
 /* TODO */
 import Settings from '@/page/Settings.vue'
 
-import Profile from '@/page/Profile.vue'
+import ProfileHome from '@/page/profile/ProfileHome.vue'
 import UserInfo from '@/page/UserInfo.vue'
 import UserHome from '@/page/UserHome.vue'
 import UserFans from '@/page/UserFans.vue'
@@ -94,7 +94,7 @@ export default [
   },
   {
     path: '/profile',
-    component: Profile,
+    component: ProfileHome,
     meta: {
       title: '我',
       requiresAuth: true,
diff --git a/resources/spa/src/stores/module/message/getters.js b/resources/spa/src/stores/module/message/getters.js
index 5a28febb9..cb33fed99 100644
--- a/resources/spa/src/stores/module/message/getters.js
+++ b/resources/spa/src/stores/module/message/getters.js
@@ -1,6 +1,8 @@
 export default {
   hasUnreadMessage (state) {
-    const unread = state.NEW_UNREAD_COUNT
+    const unread = { ...state.NEW_UNREAD_COUNT }
+    unread.following = 0 // 排除新粉丝
+    unread.mutual = 0 // 排除新好友
     unread.at = 0 // TODO: at 功能尚未开发
     return Object.values(unread).reduce((sum, item) => sum + item, 0)
   },