refactor(SPA): 重构 message 模块

issue #529
slimkit · Dec 20, 2018 · ae0e8df · ae0e8df
1 parent f5f6bcf
commit ae0e8df
Show file tree

Hide file tree

Showing 34 changed files with 858 additions and 1,603 deletions.
diff --git a/resources/spa/src/components/FootGuide.vue b/resources/spa/src/components/FootGuide.vue
@@ -31,7 +31,7 @@
     <section
       :class="{active: isCurPath('/message')}"
       class="guide-item"
-      @click="to('/message/info')"
+      @click="to({name: 'MessageHome'})"
     >
       <VBadge :dot="hasMsg">
         <svg class="m-style-svg m-svg-def">
@@ -92,7 +92,7 @@ export default {
   },
   methods: {
     to (path) {
-      this.$router.push({ path })
+      this.$router.push(path)
     },
     isCurPath (path) {
       return this.$route.fullPath.indexOf(path) > -1

diff --git a/resources/spa/src/components/ImagePoster.vue b/resources/spa/src/components/ImagePoster.vue
@@ -96,6 +96,7 @@ const defaultPoster = {
 }
 
 export default {
+  name: 'ImagePoster',
   props: {
     /**
      * @type {Poster}

diff --git a/resources/spa/src/components/common/badge.vue b/resources/spa/src/components/common/badge.vue
@@ -5,10 +5,7 @@
     :class="classes"
   >
     <slot />
-    <sup
-      v-show="badge"
-      :class="dotClasses"
-    />
+    <sup v-show="badge" :class="dotClasses" />
   </span>
   <span
     v-else
@@ -90,19 +87,19 @@ export default {
 
   &-count {
     position: absolute;
-    transform: translateX(50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform: translateX(100%);
     top: -10px;
     right: 0;
-    height: 20px;
-    min-width: 20px;
-    border-radius: 10px;
+    height: 24px;
+    width: 24px;
+    border-radius: 24px;
     background: @error;
     border: 1px solid transparent; /*no*/
     color: #fff;
-    line-height: 20px;
-    text-align: center;
-    padding: 0 6px;
-    font-size: 16px;
+    font-size: 20px;
     white-space: nowrap;
     transform-origin: -10% center;
     z-index: 10;

diff --git a/resources/spa/src/page/Profile.vue b/resources/spa/src/page/Profile.vue
@@ -241,6 +241,11 @@ export default {
 }
 .m-pr-extra {
   font-size: 28px;
+
+  a {
+    font-size: 32px;
+  }
+
   p {
     margin-top: 15px;
   }

diff --git a/.../spa/src/page/message2/chat/chat-list.vue → resources/spa/src/page/message/ChatList.vue b/.../spa/src/page/message2/chat/chat-list.vue → resources/spa/src/page/message/ChatList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-list">
+  <div class="p-chat-list">
     <JoLoadMore
       ref="loadmore"
       :auto-load="false"
@@ -16,9 +16,10 @@
   </div>
 </template>
 <script>
-import ChatItem from './chat-item.vue'
 import { mapState, mapActions } from 'vuex'
 import { startSingleChat } from '@/vendor/easemob/'
+import ChatItem from './components/ChatItem'
+
 export default {
   name: 'ChatList',
   components: {
@@ -49,22 +50,8 @@ export default {
 }
 </script>
 
-<style lang="less">
-.chat-list {
+<style lang="less" scoped>
+.p-chat-list {
   height: 100%;
 }
-.easemob-tips {
-  position: fixed;
-  top: 90px;
-  left: 0;
-  right: 0;
-  z-index: 11;
-  height: 60px;
-
-  color: #fff;
-  font-size: 24px;
-  touch-action: none;
-
-  background-color: rgba(89, 182, 215, 0.7);
-}
 </style>
diff --git a/.../spa/src/page/message2/chat/chat-room.vue → resources/spa/src/page/message/ChatRoom.vue b/.../spa/src/page/message2/chat/chat-room.vue → resources/spa/src/page/message/ChatRoom.vue
@@ -43,10 +43,9 @@
 </template>
 
 <script>
-import $Message from '@/plugins/message-box'
 import WebIM, { sendTextMessage } from '@/vendor/easemob'
+import MessageBubble from './components/MessageBubble'
 
-import MessageBubble from './message-bubble.vue'
 export default {
   name: 'ChatRoom',
   components: {
@@ -119,7 +118,7 @@ export default {
           this.messages = msgs
         })
       } else {
-        $Message.error('错误的会话列表')
+        this.$Message.error('错误的会话列表')
       }
     })
   },
@@ -162,7 +161,7 @@ export default {
           })
         }
       } else {
-        $Message.error('与服务器断开连接, 请刷新重连')
+        this.$Message.error('与服务器断开连接, 请刷新重连')
         this.sending = false
       }
     },

diff --git a/resources/spa/src/page/message2/index.vue → ...rces/spa/src/page/message/MessageBase.vue b/resources/spa/src/page/message2/index.vue → ...rces/spa/src/page/message/MessageBase.vue
@@ -1,12 +1,11 @@
 <template>
-  <div class="p-message">
+  <div class="p-message-base">
     <header 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
           tag="li"
-          to="/message/info"
+          :to="{name: 'MessageHome'}"
           replace
-          exact
           active-class="active"
         >
           <VBadge :dot="has_msg">
@@ -15,9 +14,8 @@
         </RouterLink>
         <RouterLink
           tag="li"
-          to="/message/chats"
+          :to="{name: 'ChatList'}"
           replace
-          exact
           active-class="active"
         >
           <VBadge :dot="hasUnreadChat > 0">
@@ -37,10 +35,7 @@
 import { mapState, mapGetters } from 'vuex'
 
 export default {
-  name: 'MessageIndex',
-  data () {
-    return {}
-  },
+  name: 'MessageBase',
   computed: {
     ...mapState({
       // 新消息提示
@@ -57,48 +52,9 @@ export default {
     }),
     ...mapGetters(['hasUnreadChat']),
   },
-
   created () {
     this.$store.dispatch('GET_UNREAD_COUNT')
     this.$store.dispatch('GET_NEW_UNREAD_COUNT')
   },
 }
 </script>
-
-<style lang="less">
-.p-message {
-  min-height: 100vh;
-  main {
-    height: calc(~"100vh - 90px - 100px");
-  }
-  .m-entry-group {
-    padding: 0 20px;
-    .m-entry {
-      align-items: stretch;
-      padding: 30px 0;
-      height: initial;
-    }
-    .m-entry-prepend {
-      margin: 0;
-      width: 76px;
-      height: 76px;
-    }
-    .m-entry-main {
-      margin-left: 30px;
-      margin-right: 30px;
-      h2 {
-        font-weight: 400;
-        font-size: 32px;
-      }
-      p {
-        font-size: 24px;
-        color: @text-color3;
-      }
-    }
-    .m-entry-end {
-      color: #ccc;
-      font-size: 24px;
-    }
-  }
-}
-</style>
diff --git a/.../spa/src/page/message/list/MyComments.vue → .../spa/src/page/message/MessageComments.vue b/.../spa/src/page/message/list/MyComments.vue → .../spa/src/page/message/MessageComments.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="msgList">
-    <CommonHeader>收到的评论</CommonHeader>
+    <CommonHeader :pinned="true">收到的评论</CommonHeader>
 
     <div class="msgList-container">
       <JoLoadMore
@@ -30,21 +30,19 @@
  */
 import { mapState } from 'vuex'
 import { resetUserCount } from '@/api/message.js'
-import feedItem from '../children/comments/feedItem'
-import newsItem from '../children/comments/newsItem'
-import productItem from '../children/comments/productItem'
-import questionItem from '../children/comments/questionItem'
-import groupPostItem from '../children/comments/groupPostItem'
-import questionAnswerItem from '../children/comments/questionAnswerItem'
+import MessageCommentFeedItem from './children/comments/MessageCommentFeedItem'
+import MessageCommentNewsItem from './children/comments/MessageCommentNewsItem'
+import MessageCommentQuestionItem from './children/comments/MessageCommentQuestionItem'
+import MessageCommentPostItem from './children/comments/MessageCommentPostItem'
+import MessageCommenAnswerItem from './children/comments/MessageCommenAnswerItem'
 
 const prefixCls = 'msgList'
 const items = {
-  news: newsItem,
-  feeds: feedItem,
-  product: productItem,
-  questions: questionItem,
-  'group-posts': groupPostItem,
-  'question-answers': questionAnswerItem,
+  feeds: MessageCommentFeedItem,
+  news: MessageCommentNewsItem,
+  questions: MessageCommentQuestionItem,
+  'group-posts': MessageCommentPostItem,
+  'question-answers': MessageCommenAnswerItem,
 }
 const commentType = {
   feeds: {
@@ -65,7 +63,7 @@ const commentType = {
   },
 }
 export default {
-  name: 'MyComments',
+  name: 'MessageComments',
   data: () => ({
     prefixCls,
     commentType,
@@ -132,6 +130,6 @@ export default {
 }
 </script>
 
-<style lang="less" >
-@import url("../style.less");
+<style lang="less">
+@import url("./style.less");
 </style>
diff --git a/...rces/spa/src/page/message2/info/index.vue → ...rces/spa/src/page/message/MessageHome.vue b/...rces/spa/src/page/message2/info/index.vue → ...rces/spa/src/page/message/MessageHome.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="m-box-model m-entry-group">
+  <ul class="m-box-model m-entry-group p-message-home">
     <RouterLink
       v-for="item in system"
       :key="item.url"
@@ -24,7 +24,7 @@
             v-if="computedGetter(item.count) !== 0"
             :class="`${prefixCls}-time-count`"
           >
-            <i>{{ computedGetter(item.count) }}</i>
+            {{ computedGetter(item.count) }}
           </span>
         </div>
       </div>
@@ -38,7 +38,7 @@ import { mapState } from 'vuex'
 const prefixCls = 'msg'
 
 export default {
-  name: 'MsgInfo',
+  name: 'MessageHome',
   data () {
     return {
       prefixCls,
@@ -48,7 +48,7 @@ export default {
           placeholder: 'sPlaceholder',
           icon: 'notice',
           hanBadge: 0,
-          url: '/message/notification',
+          url: '/message/system',
           count: 'sCount',
           time: 'sTime',
         },
@@ -133,14 +133,51 @@ export default {
 }
 </script>
 
-<style lang="less">
-.msg-time-count {
-  i {
-    padding: 0 10px;
-    border-radius: 50px;
-    background: red;
+<style lang="less" scoped>
+.p-message-home {
+  padding: 0 20px;
+
+  .m-entry {
+    align-items: stretch;
+    padding: 30px 0;
+    height: initial;
+  }
+
+  .m-entry-prepend {
+    margin: 0;
+    width: 76px;
+    height: 76px;
+  }
+
+  .m-entry-main {
+    margin-left: 30px;
+    margin-right: 30px;
+    h2 {
+      font-weight: 400;
+      font-size: 32px;
+    }
+    p {
+      font-size: 24px;
+      color: @text-color3;
+    }
+  }
+
+  .m-entry-end {
+    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: initial;
+    font-size: 24px;
   }
 }
+
 </style>