From 32649634fe04fcc8172afd753ae5fa291098d45c Mon Sep 17 00:00:00 2001
From: ChenXiaohui <1432297778@qq.com>
Date: Tue, 21 Dec 2021 16:08:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E+1=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D@=E9=80=9A=E7=9F=A5=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |   2 +-
 src/background/main.js           |   1 +
 src/components/Emoji.vue         |   2 +-
 src/components/HintMessage.vue   |   2 +-
 src/components/Images.vue        |   2 +-
 src/components/Message.vue       | 250 ++++++++++++++-----------
 src/components/Online.vue        |  16 +-
 src/components/RedPacketInfo.vue |  35 ++--
 src/components/Send.vue          | 114 +++++++-----
 src/manifest.json                |   2 +-
 src/store/index.js               |  17 +-
 src/svg/plusOne.svg              |   1 +
 src/views/ChatRoom.vue           | 308 +++++++++++++++++++------------
 13 files changed, 443 insertions(+), 309 deletions(-)
 create mode 100644 src/svg/plusOne.svg

diff --git a/package.json b/package.json
index 9e3d233..ff624ec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pwl-chat-extension",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service build --mode development --watch",
diff --git a/src/background/main.js b/src/background/main.js
index d6f6377..0e43374 100644
--- a/src/background/main.js
+++ b/src/background/main.js
@@ -125,6 +125,7 @@ function messageEvent(message, isMsg) {
       message.md &&
       -1 !== message.md.indexOf('@' + store.getters.userInfo.userName)
     ) {
+      console.log(store.getters.userInfo)
       notifications(message.userName + '@了你', message.md)
     }
     chrome.browserAction.setBadgeText({ text: '' + ++count })
diff --git a/src/components/Emoji.vue b/src/components/Emoji.vue
index efa2308..486b37f 100644
--- a/src/components/Emoji.vue
+++ b/src/components/Emoji.vue
@@ -55,7 +55,7 @@ export default {
       });
     },
     selectEmoji(name) {
-      this.$emit("selectEmoji", ':' + name + ':');
+      this.$emit("addContent", ':' + name + ':');
     },
     judgeEmojiIsImage(value) {
       return value.startsWith("http");
diff --git a/src/components/HintMessage.vue b/src/components/HintMessage.vue
index 42ff6a0..d9f1b77 100644
--- a/src/components/HintMessage.vue
+++ b/src/components/HintMessage.vue
@@ -7,7 +7,7 @@
       <span class="text" @click="showUserCard(message.whoGot)">{{message.whoGot}}</span>
       <span> 抢到了 </span> 
       <span class="text" @click="showUserCard(message.whoGive)">{{message.whoGive}} </span>的
-      <a class="number" @click="openRedPacket"> 红包 </a>
+      <span class="number" @click="openRedPacket"> 红包 </span>
       <span>({{message.got}}/{{message.count}})</span>
     </el-row>
   </div>
diff --git a/src/components/Images.vue b/src/components/Images.vue
index 2a47627..295d7ca 100644
--- a/src/components/Images.vue
+++ b/src/components/Images.vue
@@ -40,7 +40,7 @@ export default {
       });
     },
     selectImage(image) {
-      this.$emit("selectImage", image);
+      this.$emit("sendMessage", '![image.png](' + image + ')');
       this.visible = false;
     },
     syncCloudImage(url) {
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 611bb8a..2aac8cf 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -1,53 +1,84 @@
 <template>
-  <el-row type="flex"
-          :class="(isOwn ? 'own-chat-item ' : '') + 'chat-item'">
-    <el-row class="avatar">
-      <el-avatar :id="'avatar_' + message.oId"
-                 :src="message.userAvatarURL"
-                 @click.native="showUserCard"></el-avatar>
-    </el-row>
-    <el-row :class="(isOwn ? 'own-chat ' : '') + 'flex-column'"
-            type="flex">
-      <el-row class="name">
-        <span class="nick-name">{{ message.userNickname}}</span>
-        <span :class="message.userNickname ? 'user-name' : 'nick-name'">{{message.userName}}</span>
+  <div>
+    <el-row type="flex" :class="(isOwn ? 'own-chat-item ' : '') + 'chat-item'">
+      <el-row class="avatar">
+        <el-avatar
+          :id="'avatar_' + message.oId"
+          :src="message.userAvatarURL"
+          @click.native="$emit('showUserCard', message.userName)"
+        ></el-avatar>
+      </el-row>
+      <el-row :class="(isOwn ? 'own-chat ' : '') + 'flex-column'" type="flex">
+        <el-row class="name">
+          <span class="nick-name">{{ message.userNickname }}</span>
+          <span :class="message.userNickname ? 'user-name' : 'nick-name'">{{
+            message.userName
+          }}</span>
+        </el-row>
+        <!-- 红包消息 -->
+        <red-packet-message
+          v-if="isRedPacket"
+          :oId="message.oId"
+          :content="message.content"
+          @showRedpacketInfo="showRedpacketInfo"
+        />
+        <!-- 内容消息 -->
+        <div
+          v-else
+          :class="
+            (isOwn ? 'own-content-background' : 'content-background') +
+            ' content'
+          "
+        >
+          <el-popover
+            :ref="'popover_' + message.oId"
+            placement="bottom"
+            trigger="manual"
+            v-model="visible"
+          >
+            <!-- 消息菜单 -->
+            <el-row type="flex" class="flex-column menu">
+              <el-row class="menu-item" @click.native="talkToHe">@他</el-row>
+              <el-row class="menu-item" @click.native="quote">引用</el-row>
+              <el-row class="menu-item" @click.native="plusOne">+1</el-row>
+              <el-row
+                class="menu-item"
+                v-show="imageUrl"
+                @click.native="collectImages"
+                >收藏表情</el-row
+              >
+            </el-row>
+            <span
+              :id="'message_' + message.oId"
+              slot="reference"
+              v-html="message.content"
+            ></span>
+          </el-popover>
+        </div>
+        <el-row class="time">{{ getTime(message.time) }}</el-row>
       </el-row>
-      <red-packet-message v-if="isRedPacket"
-                          :oId="message.oId"
-                          :content="message.content" 
-                          @showRedpacketInfo="showRedpacketInfo"/>
-      <div v-else
-           :class="(isOwn ? 'own-content-background' : 'content-background') + ' content'">
-        <el-popover :ref="'popover_' + message.oId"
-                    placement="bottom"
-                    v-model="visible">
-          <el-row type="flex"
-                  class="flex-column menu">
-            <el-row class="menu-item"
-                    @click.native="talkToHe">@他</el-row>
-            <el-row class="menu-item"
-                    @click.native="quote">引用</el-row>
-            <el-row class="menu-item"
-                    v-show="isImage"
-                    @click.native="collectImages">收藏表情</el-row>
-          </el-row>
-          <span :id="'message_' + message.oId"
-                slot="reference"
-                v-html="message.content"
-                @click="messageHandler($event)"></span>
-        </el-popover>
-      </div>
-      <el-row class="time">{{ getTime(message.time) }}</el-row>
+      <icon-svg v-if="message.users" class="plus-one" icon-class="plusOne" @click.native="plusOne"/>
     </el-row>
-  </el-row>
+    <!-- 多少人+1显示 -->
+    <el-row v-if="message.users" type="flex" :class="isOwn ? 'own-plus-one-box plus-one-box': 'plus-one-box'">
+      <el-avatar
+        v-for="(item, index) in message.users"
+        :key="index"
+        :src="item.userAvatarURL"
+        :size="20"
+        class="plus-opne-avatar"
+      />
+      <el-row :class="isOwn ? 'plus-one-text own-plus-one-text ' : 'plus-one-text'">{{message.users.length}} 人+1 </el-row>
+    </el-row>
+  </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import RedPacketMessage from "./RedPacketMessage.vue";
+import { mapGetters } from 'vuex'
+import RedPacketMessage from './RedPacketMessage.vue'
 
 export default {
-  name: "message",
+  name: 'message',
   props: {
     message: Object,
     date: String,
@@ -55,97 +86,74 @@ export default {
   data() {
     return {
       visible: false,
-      isImage: false,
-      imageUrl: "",
-      userName: "",
+      imageUrl: '',
+      userName: '',
       quoteForm: {
-        userName: "",
-        content: "",
+        userName: '',
+        content: '',
       },
-    };
+    }
   },
   computed: {
-    ...mapGetters(["userInfo"]),
+    ...mapGetters(['userInfo']),
     isOwn() {
-      return this.userInfo.userName === this.message.userName;
+      return this.userInfo.userName === this.message.userName
     },
     isRedPacket() {
-      return this.message.content && -1 !== this.message.content.indexOf('msgType":"redPacket');
-    }
+      return (
+        this.message.content &&
+        -1 !== this.message.content.indexOf('msgType":"redPacket')
+      )
+    },
   },
   components: { RedPacketMessage },
-  mounted() {
-    this.setContextmenu()
-  },
-  renderTriggered() {
-    this.setContextmenu()
-  },
   methods: {
-    setContextmenu() {
-      let message = this.message;
-      if (this.isOwn || this.isRedPacket) {
-        return;
-      }
-      let that = this;
-      document.getElementById("message_" + message.oId).oncontextmenu = (e) => {
-        that.visible = true;
-        if (e.target.nodeName === "IMG" && e.target.className !== "emoji") {
-          that.isImage = true;
-          that.imageUrl = e.target.currentSrc;
-        }
-        this.userName = "@" + message.userName + " ";
-        this.quoteForm = {
-          userName: message.userName,
-          content: message.md,
-        };
-        return false;
-      };
-    },
     getTime(time) {
       if (-1 === time.indexOf(this.date)) {
-        return time;
+        return time
       }
-      return time.slice(11);
+      return time.slice(11)
     },
-    messageHandler(event) {
-      if (
-        event.target.tagName !== "IMG" ||
-        event.target.className === "emoji"
-      ) {
-        return;
+    showMessageMenu(imageUrl) {
+      if (this.visible) {
+        this.visible = false
+        return
+      }
+      this.visible = true
+      let message = this.message
+      this.userName = '@' + message.userName + ' '
+      this.quoteForm = {
+        userName: message.userName,
+        content: message.md ? message.md : message.content,
       }
-      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-        let message = {
-          src: event.target.src,
-          width: event.target.naturalWidth,
-          height: event.target.naturalHeight,
-        };
-        chrome.tabs.sendMessage(tabs[0].id, message);
-      });
+      this.imageUrl = imageUrl
+      setTimeout(() => {
+        this.visible = false
+      }, 2000)
+    },
+    plusOne() {
+      this.$emit('sendMessage', this.message.md)
     },
     quote() {
-      this.$emit("quote", this.quoteForm);
+      this.$emit('quote', this.quoteForm)
       this.closePopover()
     },
     talkToHe() {
-      this.$emit("talkToHe", this.userName);
+      this.$emit('addContent', this.userName)
       this.closePopover()
     },
     collectImages() {
-      this.$emit("collectImages", this.imageUrl);
+      this.$emit('collectImages', this.imageUrl)
       this.closePopover()
     },
-    showUserCard() {
-      this.$emit("showUserCard", this.message.userName);
-    },
     closePopover() {
-      this.$refs['popover_' + this.message.oId].doClose();
+      this.$refs['popover_' + this.message.oId].doClose()
     },
     showRedpacketInfo(info) {
       this.$emit('showRedpacketInfo', info)
-    }
+    },
   },
-};
+}
 </script>
 
 <style scoped>
@@ -179,10 +187,9 @@ export default {
   padding: 5px;
   border-radius: 5px;
   font-size: 14px;
-  max-width: 100%;
   width: fit-content;
   word-wrap: break-word;
-  max-width: 310px;
+  max-width: 265px;
 }
 .content-background {
   background-color: #a3db92;
@@ -201,9 +208,40 @@ export default {
   height: 25px;
   line-height: 25px;
 }
+.plus-one-box {
+  margin: -10px 60px 0 60px;
+  max-width: 265px;
+  align-self: center;
+  flex-wrap: wrap;
+}
+.own-plus-one-box {
+  flex-direction: row-reverse;
+}
+.plus-opne-avatar {
+  margin-left: -2px;
+  order: 10;
+}
+.plus-one-text {
+  margin: 0 5px;
+  line-height: 20px;
+  color: white;
+  font-size: 14px;
+  order: 10;
+}
+.own-plus-one-text {
+  order: 0;
+}
+.plus-one {
+  font-size: 26px;
+  color: yellow;
+  align-self: center;
+}
 </style>
 <style>
 .el-popover {
   min-width: 0px;
 }
-</style>
\ No newline at end of file
+iframe {
+  max-width: 255px;
+}
+</style>
diff --git a/src/components/Online.vue b/src/components/Online.vue
index 39825ee..832c714 100644
--- a/src/components/Online.vue
+++ b/src/components/Online.vue
@@ -1,9 +1,8 @@
 <template>
 
   <el-popover placement="bottom"
-              width="288"
-              trigger="manual"
-              v-model="visible">
+              width="257"
+              trigger="click">
     <el-row type="flex"
             class="avatar-box">
       <el-avatar class="avatar"
@@ -11,16 +10,14 @@
            :key="index"
            :size="30"
            :src="item.userAvatarURL"
-           @click.native="showUserCard(item.userName)">
+           @click.native="$emit('showUserCard', item.userName)">
       </el-avatar>
     </el-row>
     <el-badge slot="reference" id="online-badge"
               type="success"
               :value="online.onlineChatCnt"
               class="badge">
-      <icon-svg 
-                class="icon"
-                @click.native="visible = !visible"
+      <icon-svg class="icon"
                 icon-class="whale" />
     </el-badge>
   </el-popover>
@@ -42,11 +39,6 @@ export default {
       visible: false
     }
   },
-  methods: {
-    showUserCard(userName) {
-      this.$emit("showUserCard", userName);
-    },
-  }
 };
 </script>
 <style scoped>
diff --git a/src/components/RedPacketInfo.vue b/src/components/RedPacketInfo.vue
index c2d1485..7983a8c 100644
--- a/src/components/RedPacketInfo.vue
+++ b/src/components/RedPacketInfo.vue
@@ -13,16 +13,18 @@
                 type="flex"
                 v-for="(item, index) in info.who"
                 :key="index">
+          <el-avatar class="item-avatar"
+                     :size="35"
+                     :src="item.avatar"></el-avatar>
           <el-row type="flex"
                   class="flex-column user">
-            <el-avatar class="item-avatar"
-                       :src="item.avatar"></el-avatar>
             <el-row class="text">{{item.userName}}</el-row>
+             <el-row class="text">{{item.time.substr(11)}}</el-row>
           </el-row>
           <el-row type="flex"
                   class="flex-column">
-            <el-row class="money">{{item.userMoney}}</el-row>
-            <el-row class="text">{{item.time}}</el-row>
+            <el-row :class="'money' + (item.userMoney > 0 ? ' red' : ' green')">{{item.userMoney}}</el-row>
+            <el-row class="text">{{item.userMoney == 0 ? '抢了个寂寞' : (item.userMoney > 0 ? '' : '被反抢了吧')}}</el-row>
           </el-row>
         </el-row>
       </el-row>
@@ -34,11 +36,7 @@ export default {
   name: "redPacket",
   props: {
     info: Object,
-  },
-  data() {
-    return {
-      dialogVisible: true,
-    };
+    dialogVisible: Boolean
   },
   methods: {
     close() {
@@ -52,24 +50,33 @@ export default {
 .flex-column {
   flex-direction: column;
   align-items: center;
+  justify-content: space-between;
 }
 .item {
   margin: 5px 0;
-  width: 200px;
+  width: 230px;
   justify-content: space-between;
   text-align: center;
+  height: 35px;
 }
 .user {
-  width: 70px;
+  width: 100px;
 }
 .item-avatar {
-  width: 20px;
-  height: 20px;
+  width: 30px;
+  height: 30px;
 }
 .text {
-  font-size: 9px;
+  font-size: 14px;
+}
+.red {
+  color: rgb(236, 55, 55);
+}
+.green {
+  color: rgb(11, 219, 11);
 }
 .money {
+  width: 80px;
   font-size: 16px;
   font-weight: bolder;
 }
diff --git a/src/components/Send.vue b/src/components/Send.vue
index 2fde85c..11d3b26 100644
--- a/src/components/Send.vue
+++ b/src/components/Send.vue
@@ -1,109 +1,121 @@
 <template>
   <div class="send">
     <div>
-      <el-input placeholder="说点什么吧!"
-                v-model="content"
-                ref="contentInput"
-                class="input-with-select"
-                @paste.native.capture.prevent="pasteHandler"
-                @keyup.enter.native="sendHandler">
-        <el-button slot="append"
-                   icon="el-icon-s-promotion"
-                   @click="sendHandler"></el-button>
+      <el-input
+        placeholder="说点什么吧!"
+        v-model="content"
+        ref="contentInput"
+        class="input-with-select"
+        @paste.native.capture.prevent="pasteHandler"
+        @keyup.enter.native="sendHandler"
+      >
+        <el-button
+          slot="append"
+          icon="el-icon-s-promotion"
+          @click="sendHandler"
+        ></el-button>
       </el-input>
     </div>
-    <el-popover popper-class="quote-popover"
-                placement="bottom-start"
-                trigger="manual"
-                v-model="quoteVisible">
+    <el-popover
+      popper-class="quote-popover"
+      placement="bottom-start"
+      trigger="manual"
+      v-model="quoteVisible"
+    >
       <div id="quote-content" class="quote-content">
         <el-row type="flex" class="quote-user">
-          <div>引用 @{{quoteForm.userName}}</div>
-          <i class="el-icon-circle-close quote-close" @click="closeQuote"/>
-          </el-row>
-        <el-row>{{quoteForm.content}}</el-row>
+          <div>引用 @{{ quoteForm.userName }}</div>
+          <i class="el-icon-circle-close quote-close" @click="closeQuote" />
+        </el-row>
+        <el-row>{{ quoteForm.content }}</el-row>
       </div>
-      <div style="width:1px" slot="reference"></div>
+      <div style="width: 1px" slot="reference"></div>
     </el-popover>
   </div>
 </template>
 
 <script>
-import { send, upload } from "../api/chat";
-import { mapGetters } from "vuex";
+import { send, upload } from '../api/chat'
+import { mapGetters } from 'vuex'
 
 export default {
-  name: "send",
+  name: 'send',
   data() {
     return {
-      content: "",
+      content: '',
       quoteVisible: false,
       quoteForm: {
-        userName: "",
-        content: "",
+        userName: '',
+        content: '',
       },
-    };
+    }
   },
   computed: {
-    ...mapGetters(["key"]),
+    ...mapGetters(['key']),
     form() {
-      return { content: this.content, apiKey: this.key };
+      return { content: this.content, apiKey: this.key }
     },
   },
+  mounted() {
+    this.$nextTick(function () {
+      this.$refs.contentInput.focus()
+    })
+  },
   methods: {
     pasteHandler(e) {
-      if (e.clipboardData.types.some((e) => e === "Files")) {
+      if (e.clipboardData.types.some((e) => e === 'Files')) {
         upload(e.clipboardData.files[0]).then((res) => {
-          let succMap = res.data.succMap;
+          let succMap = res.data.succMap
           for (let key in succMap) {
-            this.content += "![" + key + "](" + succMap[key] + ")";
+            this.content += '![' + key + '](' + succMap[key] + ')'
           }
-        });
+        })
       } else {
-        this.content += e.clipboardData.getData("Text");
+        this.content += e.clipboardData.getData('Text')
       }
     },
     sendHandler(event) {
-      if (this.content === "") {
-        return;
+      if (this.content === '') {
+        return
       }
       if (event.ctrlKey) {
-        this.content += "<br/>";
-        return;
+        this.content += '<br/>'
+        return
       }
-      this.send();
+      this.send()
     },
     addContent(content) {
-      this.content += content;
+      this.content += content
+      this.$refs.contentInput.focus()
     },
     quote(quoteForm) {
       if (quoteForm.userName) {
-        this.quoteForm = quoteForm;
+        this.quoteForm = quoteForm
         this.$refs.contentInput.focus()
-        this.quoteVisible = true;
+        this.quoteVisible = true
       }
     },
     closeQuote() {
-      this.quoteForm = {};
-      this.quoteVisible = false;
+      this.quoteForm = {}
+      this.quoteVisible = false
     },
     sendMessage(content) {
-      send({ content: content, apiKey: this.key }).then();
+      send({ content: content, apiKey: this.key }).then()
     },
     send() {
-      let form = this.form;
+      let form = this.form
       if (this.quoteVisible) {
-        let quoteForm = this.quoteForm;
+        let quoteForm = this.quoteForm
         form.content +=
-          "\n##### 引用 @" + quoteForm.userName + "\n> " + quoteForm.content;
+          '\n##### 引用 @' + quoteForm.userName + '\n> ' + quoteForm.content
       }
       send(this.form).then(() => {
-        this.quoteVisible = false;
-        this.content = "";
-      });
+        this.quoteVisible = false
+        this.content = ''
+      })
     },
   },
-};
+}
 </script>
 <style scoped>
 .send {
@@ -134,4 +146,4 @@ export default {
 .quote-popover {
   background-color: #a3db92;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/manifest.json b/src/manifest.json
index b3afd27..deca5e3 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "摸鱼派聊天室",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "homepage_url": "https://github.com/Lemon-cxh/pwl-chat-extension",
   "description": "摸鱼派聊天室插件",
   "permissions": [
diff --git a/src/store/index.js b/src/store/index.js
index e27fbbb..16485a6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -50,7 +50,7 @@ export default new Vuex.Store({
     },
     pageParams: state => {
       let page = parseInt(state.messageTotal / MESSAGE_LIMIT) + 1
-      return { page: page, length: page * MESSAGE_LIMIT - state.messageTotal}
+      return { page: page, length: page * MESSAGE_LIMIT - state.messageTotal }
     },
     online: state => {
       return state.online
@@ -65,15 +65,24 @@ export default new Vuex.Store({
     },
     popMessage(state) {
       let m = state.message.pop()
-      if (!m.type || m.type === MESSAGE_TYPE.msg) {
+      if (!m.type || m.type !== MESSAGE_TYPE.msg) {
         state.messageTotal -= 1
+        return
       }
+      state.messageTotal -= (1 + m.users ? m.users.length : 0) 
     },
     addMessage(state, message) {
-      state.message.unshift(message.message)
       if (message.isMsg) {
         state.messageTotal += 1
+        let last = state.message[0]
+        if (message.message.md === last.md) {
+          let users = last.users ? last.users : []
+          users.unshift({ userName: message.message.userName, userAvatarURL: message.message.userAvatarURL })
+          state.message[0].users = users
+          return
+        }
       }
+      state.message.unshift(message.message)
     },
     concatMessage(state, message) {
       state.message = state.message.concat(message);
@@ -81,7 +90,7 @@ export default new Vuex.Store({
     },
     clearMessage(state) {
       state.message = [],
-      state.messageTotal = 0
+        state.messageTotal = 0
     },
     setOnline(state, online) {
       state.online = {
diff --git a/src/svg/plusOne.svg b/src/svg/plusOne.svg
new file mode 100644
index 0000000..7d17448
--- /dev/null
+++ b/src/svg/plusOne.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1640058062281" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1546" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M405.333333 356.693333c-23.466667 0-42.666667 19.2-42.666666 42.666667v128h-128c-23.466667 0-42.666667 19.2-42.666667 42.666667s19.2 42.666667 42.666667 42.666666h128v128c0 23.466667 19.2 42.666667 42.666666 42.666667s42.666667-19.2 42.666667-42.666667v-128h128c23.466667 0 42.666667-19.2 42.666667-42.666666s-19.2-42.666667-42.666667-42.666667h-128v-128c0-23.466667-19.2-42.666667-42.666667-42.666667zM640 305.066667c0 24.32 22.186667 42.666667 46.08 37.973333l60.586667-11.946667v409.6c0 23.466667 19.2 42.666667 42.666666 42.666667s42.666667-19.2 42.666667-42.666667V282.88c0-27.733333-25.6-47.786667-52.48-41.386667l-109.653333 26.453334c-17.493333 3.84-29.866667 19.626667-29.866667 37.12z" p-id="1547"></path></svg>
\ No newline at end of file
diff --git a/src/views/ChatRoom.vue b/src/views/ChatRoom.vue
index fb58955..738384f 100644
--- a/src/views/ChatRoom.vue
+++ b/src/views/ChatRoom.vue
@@ -2,86 +2,95 @@
   <div id="chatRoom">
     <!-- 活跃度，头像，输入框 -->
     <liveness />
-    <el-row type="flex"
-            class="user-box">
-      <user-info/>
+    <el-row type="flex" class="user-box">
+      <user-info />
       <send ref="messageInput" />
     </el-row>
     <!-- 菜单按钮 -->
     <el-row type="flex" class="menu-row">
-      <online :online="online"
-              @showUserCard="showUserCard"/>
-      <el-row type="flex"
-            class="menu">
+      <online :online="online" @showUserCard="showUserCard" />
+      <el-row type="flex" class="menu">
         <red-packet class="menu-item" />
-        <emoji class="menu-item"
-              @selectEmoji="selectEmoji" />
-        <images ref="cloudImages"
-                class="menu-item"
-                @selectImage="selectImage" />
-      </el-row> 
+        <emoji class="menu-item" @addContent="addContent" />
+        <images
+          ref="cloudImages"
+          class="menu-item"
+          @sendMessage="sendMessage"
+        />
+      </el-row>
     </el-row>
     <!-- 消息列表 -->
-    <div class="infinite-list-wrapper"
-         style="overflow: auto; height: 420px">
-      <div id="messageList"
-           class="list"
-           v-infinite-scroll="load"
-           :infinite-scroll-disabled="loading">
-        <div ref="inner"
-             v-for="(item, index) in message"
-             v-bind:key="index"
-             class="infinite-list-item">
-          <hint-message v-if="item.type && type.redPacketStatus === item.type"
-                        :message="item"
-                        @showUserCard="showUserCard"
-                        @showRedpacketInfo="showRedpacketInfo" />
+    <div class="infinite-list-wrapper" style="overflow: auto; height: 420px">
+      <div
+        id="messageList"
+        class="list"
+        v-infinite-scroll="load"
+        :infinite-scroll-disabled="loading"
+      >
+        <div
+          ref="inner"
+          v-for="(item, index) in message"
+          v-bind:key="index"
+          class="infinite-list-item"
+        >
+          <hint-message
+            v-if="item.type && type.redPacketStatus === item.type"
+            :message="item"
+            @showUserCard="showUserCard"
+            @showRedpacketInfo="showRedpacketInfo"
+          />
           <div v-else-if="!item.type || type.msg === item.type">
-            <hint-message v-if="item.revoke"
-                        :message="item" />
-            <message :ref="'message_' + item.oId"
-                   :message="item"
-                   :date="date"
-                   @showUserCard="showUserCard"
-                   @collectImages="collectImages"
-                   @talkToHe="talkToHe"
-                   @quote="quote"
-                   @showRedpacketInfo="showRedpacketInfo" />
+            <hint-message v-if="item.revoke" :message="item" />
+            <message
+              :ref="'message_' + item.oId"
+              :message="item"
+              :date="date"
+              @showUserCard="showUserCard"
+              @collectImages="collectImages"
+              @addContent="addContent"
+              @sendMessage="sendMessage"
+              @quote="quote"
+              @showRedpacketInfo="showRedpacketInfo"
+            />
           </div>
-          
         </div>
-        <div class="icon-box"><i class="el-icon-loading icon"
-             v-if="loading"></i></div>
+        <div class="icon-box">
+          <i class="el-icon-loading icon" v-if="loading"></i>
+        </div>
       </div>
     </div>
-    <user-card :userInfo="userCardInfo"
-               :dialogVisible="dialogVisible"
-               @closeDialog="closeDialog" />
-    <red-packet-info :info="redPacketInfo"
-                     v-if="redPacketVisible"
-                     @close='closeRedapcket'></red-packet-info>
+    <user-card
+      :userInfo="userCardInfo"
+      :dialogVisible="dialogVisible"
+      @closeDialog="dialogVisible = false"
+    />
+    <red-packet-info
+      :info="redPacketInfo"
+      :dialogVisible="redPacketVisible"
+      @close="redPacketVisible = false"
+    ></red-packet-info>
   </div>
 </template>
 
 <script>
-import Message from "../components/Message.vue";
-import Liveness from "../components/Liveness.vue";
-import UserInfo from "../components/UserInfo.vue";
-import Online from "../components/Online.vue";
-import Send from "../components/Send.vue";
-import UserCard from "../components/UserCard.vue";
-import HintMessage from "../components/HintMessage.vue";
-import RedPacket from "../components/RedPacket.vue";
-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 { getUserInfo } from "../api/user";
-import { mapGetters } from "vuex";
+import Message from '../components/Message.vue'
+import Liveness from '../components/Liveness.vue'
+import UserInfo from '../components/UserInfo.vue'
+import Online from '../components/Online.vue'
+import Send from '../components/Send.vue'
+import UserCard from '../components/UserCard.vue'
+import HintMessage from '../components/HintMessage.vue'
+import RedPacket from '../components/RedPacket.vue'
+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 { getUserInfo } from '../api/user'
+import { mapGetters } from 'vuex'
 
 export default {
-  name: "chatRoom",
+  name: 'chatRoom',
   data() {
     return {
       port: null,
@@ -90,16 +99,18 @@ export default {
       date: getDate(),
       dialogVisible: false,
       userCardInfo: {},
-      redPacketInfo: {},
+      redPacketInfo: {
+        info: {},
+      },
       online: {},
       redPacketVisible: false,
-      type: MESSAGE_TYPE
-    };
+      type: MESSAGE_TYPE,
+    }
   },
   computed: {
-    ...mapGetters(["userInfo", "key"]),
+    ...mapGetters(['userInfo', 'key']),
     apiKey() {
-      return { apiKey: this.key };
+      return { apiKey: this.key }
     },
   },
   components: {
@@ -116,61 +127,130 @@ export default {
     Send,
   },
   created() {
-    let that = this;
-    let port = chrome.runtime.connect();
+    let that = this
+    let port = chrome.runtime.connect()
     port.postMessage({ type: EVENT.syncUserInfo, message: that.userInfo })
     port.onMessage.addListener(function (msg) {
       switch (msg.type) {
         case EVENT.loadMessage:
-          that.message = msg.message.message;
-          that.online = msg.message.online;
+          that.message = msg.message.message
+          that.online = msg.message.online
           if (msg.message.length === 0) {
-            that.load();
+            that.load()
           } else {
-            that.loading = false;
+            that.loading = false
           }
-          break;
+          break
         case EVENT.message:
-          that.message.unshift(msg.message);
-          break;
+          that.addMessage(msg.message)
+          break
         case EVENT.more:
-          that.message = that.message.concat(msg.message);
-          that.loading = false;
-          break;
+          that.message = that.message.concat(msg.message)
+          that.loading = false
+          break
         case EVENT.redPacketStatus:
           that.markRedPacket(msg.message)
-          break;
+          break
         case EVENT.revoke:
           that.revoke(msg.message)
-          break;
+          break
         case EVENT.online:
           that.online = msg.message
-          break;
+          break
         default:
-          break;
+          break
       }
-    });
-    this.port = port;
+    })
+    this.port = port
+  },
+  mounted() {
+    document.getElementById('messageList').oncontextmenu = () => {
+      this.showMessageMenu(event)
+      return false
+    }
+    document
+      .getElementById('messageList')
+      .addEventListener('click', (event) => {
+        let dom = event.target
+        if (dom.tagName === 'IMG' && dom.className !== 'emoji') {
+          this.showImage(dom, event)
+        }
+        if (dom.tagName === 'A') {
+          this.clickA(dom)
+        }
+      })
   },
   methods: {
+    addMessage(message) {
+      if (message.type !== this.type.msg){
+        this.message.unshift(message)
+        return
+      }
+      let last = this.message[0]
+      if (message.md !== last.md) {
+        this.message.unshift(message)
+        return
+      }
+      let users = last.users ? last.users : []
+      users.unshift({userName: message.userName, userAvatarURL: message.userAvatarURL})
+      this.$set(this.message[0], 'users', users)
+    },
     load() {
-      this.loading = true;
+      this.loading = true
       setTimeout(() => {
-        this.more();
-      }, 300);
+        this.more()
+      }, 300)
     },
     more() {
-      this.port.postMessage({ type: EVENT.getMore });
+      this.port.postMessage({ type: EVENT.getMore })
+    },
+    showMessageMenu(event) {
+      let dom = event.path.find((e) => e.id && -1 !== e.id.indexOf('message_'))
+      if (dom) {
+        let isImage =
+          event.path[0].nodeName === 'IMG' &&
+          event.path[0].className !== 'emoji'
+        this.$refs[dom.id][0].showMessageMenu(
+          isImage ? event.path[0].currentSrc : ''
+        )
+      }
+    },
+    showImage(dom, event) {
+      let message = event.path.find(
+        (e) => e.id && -1 !== e.id.indexOf('message_')
+      )
+      if (!message) {
+        return false
+      }
+      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        let message = {
+          src: dom.src,
+          width: dom.naturalWidth,
+          height: dom.naturalHeight,
+        }
+        chrome.tabs.sendMessage(tabs[0].id, message)
+      })
+    },
+    clickA(dom) {
+      if (dom.className === 'name-at') {
+        this.showUserCard(dom.innerText)
+      } else {
+        let href = dom.href.replace(
+          process.env.VUE_APP_BASE_URL + '/forward?goto=',
+          ''
+        )
+        window.open(decodeURIComponent(href))
+      }
     },
     showUserCard(name) {
       getUserInfo(name, this.apiKey).then((res) => {
-        let userCardInfo = res;
+        let userCardInfo = res
         if (userCardInfo.sysMetal) {
-          userCardInfo.sysMetal = JSON.parse(userCardInfo.sysMetal);
+          userCardInfo.sysMetal = JSON.parse(userCardInfo.sysMetal)
         }
-        this.userCardInfo = userCardInfo;
-        this.dialogVisible = true;
-      });
+        this.userCardInfo = userCardInfo
+        this.dialogVisible = true
+      })
     },
     markRedPacket(oId) {
       let msg
@@ -180,47 +260,41 @@ export default {
           msg = JSON.parse(e.content)
           msg.got += 1
           that.$set(that.message[index], 'content', JSON.stringify(msg))
-          return true;
+          return true
         }
-        return false;
+        return false
       })
     },
     revoke(oId) {
       this.message.some((e, index) => {
         if (e.oId == oId && e.type === MESSAGE_TYPE.msg) {
           this.$set(this.message[index], 'revoke', true)
-          return true;
+          return true
         }
-        return false;
+        return false
       })
     },
     showRedpacketInfo(info) {
-        this.redPacketVisible = true;
-        this.redPacketInfo = info;
+      this.redPacketVisible = true
+      this.redPacketInfo = info
+    },
+    sendMessage(content) {
+      this.$refs.messageInput.sendMessage(content)  
     },
     quote(quoteForm) {
-      this.$refs.messageInput.quote(quoteForm);
+      this.$refs.messageInput.quote(quoteForm)
     },
-    talkToHe(userName) {
-      this.$refs.messageInput.addContent(userName);
+    addContent(content) {
+      this.$refs.messageInput.addContent(content)
     },
     collectImages(url) {
-      this.$refs.cloudImages.syncCloudImage(url);
-    },
-    selectEmoji(name) {
-      this.$refs.messageInput.addContent(name);
-    },
-    selectImage(image) {
-      this.$refs.messageInput.sendMessage("![image.png](" + image + ")");
-    },
-    closeDialog() {
-      this.dialogVisible = false;
+      this.$refs.cloudImages.syncCloudImage(url)
     },
     closeRedapcket() {
-      this.redPacketVisible = false;
-    }
+      this.redPacketVisible = false
+    },
   },
-};
+}
 </script>
 <style scoped>
 .user-box {
@@ -247,4 +321,4 @@ export default {
 .menu-item {
   margin: 0 3px;
 }
-</style>
\ No newline at end of file
+</style>