fix: 修复删除消息、红包消息折叠

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pwl-chat-extension",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service build --mode development --watch",

src/components/Message.vue

@@ -66,7 +66,7 @@
         :key="index"
         :src="item.userAvatarURL"
         :size="20"
-        class="plus-opne-avatar"
+        class="plus-one-avatar"
       />
       <el-row :class="isOwn ? 'plus-one-text own-plus-one-text ' : 'plus-one-text'">{{message.users.length}} 人+1 </el-row>
     </el-row>
@@ -76,6 +76,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import RedPacketMessage from './RedPacketMessage.vue'
+import { isRedPacket } from '../utils/util'
 
 export default {
   name: 'message',
@@ -100,10 +101,7 @@ export default {
       return this.userInfo.userName === this.message.userName
     },
     isRedPacket() {
-      return (
-        this.message.content &&
-        -1 !== this.message.content.indexOf('msgType":"redPacket')
-      )
+      return isRedPacket(this.message)
     },
   },
   components: { RedPacketMessage },
@@ -217,8 +215,9 @@ export default {
 .own-plus-one-box {
   flex-direction: row-reverse;
 }
-.plus-opne-avatar {
+.plus-one-avatar {
   margin-left: -2px;
+  box-shadow: -3px 3px 5px 1px rgb(0 0 0 / 40%);
   order: 10;
 }
 .plus-one-text {

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "摸鱼派聊天室",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "homepage_url": "https://github.com/Lemon-cxh/pwl-chat-extension",
   "description": "摸鱼派聊天室插件",
   "permissions": [

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import { getUserInfo } from '../api/login'
 import { MESSAGE_LIMIT, STORAGE, MESSAGE_TYPE } from '../constant/Constant'
 import { setLocal, getLocal } from "../utils/chromeUtil"
+import { isRedPacket } from '../utils/util'
 
 Vue.use(Vuex)
 
@@ -65,17 +66,17 @@ export default new Vuex.Store({
     },
     popMessage(state) {
       let m = state.message.pop()
-      if (!m.type || m.type !== MESSAGE_TYPE.msg) {
-        state.messageTotal -= 1
+      if (m.type && m.type !== MESSAGE_TYPE.msg) {
+        state.messageTotal -= (1 + m.users ? m.users.length : 0) 
         return
       }
-      state.messageTotal -= (1 + m.users ? m.users.length : 0) 
+      state.messageTotal -= 1
     },
     addMessage(state, message) {
       if (message.isMsg) {
         state.messageTotal += 1
         let last = state.message[0]
-        if (message.message.md === last.md) {
+        if (last.md && message.message.md === last.md && !isRedPacket(message.message)) {
           let users = last.users ? last.users : []
           users.unshift({ userName: message.message.userName, userAvatarURL: message.message.userAvatarURL })
           state.message[0].users = users

src/utils/util.js

@@ -3,4 +3,10 @@ export function getDate() {
   let month = now.getMonth() + 1
   let date = now.getDate()
   return now.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
+}
+
+export function isRedPacket(message) {
+  return (
+    message.content && -1 !== message.content.indexOf('msgType":"redPacket')
+  )
 }

src/views/ChatRoom.vue

@@ -85,7 +85,7 @@ import RedPacketInfo from '../components/RedPacketInfo.vue'
 import Emoji from '../components/Emoji.vue'
 import Images from '../components/Images.vue'
 import { EVENT, MESSAGE_TYPE } from '../constant/Constant'
-import { getDate } from '../utils/util'
+import { getDate, isRedPacket } from '../utils/util'
 import { getUserInfo } from '../api/user'
 import { mapGetters } from 'vuex'
 
@@ -187,7 +187,7 @@ export default {
         return
       }
       let last = this.message[0]
-      if (message.md !== last.md) {
+      if (message.md !== last.md || isRedPacket(message)) {
         this.message.unshift(message)
         return
       }