feat: 新增撤回消息、回到顶部、红包十连发、修改引用格式

Lemon-cxh · Dec 23, 2021 · 7ab266c · 7ab266c
1 parent 3675f60
commit 7ab266c
Show file tree

Hide file tree

Showing 16 changed files with 297 additions and 193 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pwl-chat-extension",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service build --mode development --watch",

diff --git a/public/icons/1024.png b/public/icons/1024.png
diff --git a/src/api/chat.js b/src/api/chat.js
@@ -34,6 +34,14 @@ export function upload(file) {
   })
 }
 
+export function revoke(oId, data) {
+  return request({
+    url: '/chat-room/revoke/' + oId,
+    method: 'delete',
+    data: data
+  })
+}
+
 export function getEmoji(data) {
   return request({
     url: '/users/emotions',

diff --git a/src/background/main.js b/src/background/main.js
@@ -39,7 +39,7 @@ function init() {
     ) {
       return
     }
-    window.mySocket = new WebSocket(URL)
+    window.mySocket = new WebSocket(URL + '?apiKey=' + result[STORAGE.key])
     window.mySocket.onmessage = (event) => messageHandler(event)
     window.mySocket.onerror = () => {
       setTimeout(() => {

diff --git a/src/components/Message.vue b/src/components/Message.vue
@@ -47,6 +47,12 @@
                 @click.native="collectImages"
                 >收藏表情</el-row
               >
+              <el-row
+                v-show="unlimitedRevoke || isOwn"
+                class="menu-item"
+                @click.native="$emit('revokeMessage', message)"
+                >撤回</el-row
+              >
             </el-row>
             <span
               :id="'message_' + message.oId"
@@ -57,10 +63,19 @@
         </div>
         <el-row class="time">{{ getTime(message.time) }}</el-row>
       </el-row>
-      <icon-svg v-if="message.users" class="plus-one" icon-class="plusOne" @click.native="plusOne"/>
+      <icon-svg
+        v-if="message.users"
+        class="plus-one"
+        icon-class="plusOne"
+        @click.native="plusOne"
+      />
     </el-row>
     <!-- 多少人+1显示 -->
-    <el-row v-if="message.users" type="flex" :class="isOwn ? 'own-plus-one-box plus-one-box': 'plus-one-box'">
+    <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"
@@ -69,7 +84,10 @@
         class="plus-one-avatar"
         @click.native="$emit('showUserCard', item.userName)"
       />
-      <el-row :class="isOwn ? 'plus-one-text own-plus-one-text ' : 'plus-one-text'">{{message.users.length}} 人+1 </el-row>
+      <el-row
+        :class="isOwn ? 'plus-one-text own-plus-one-text ' : 'plus-one-text'"
+        >{{ message.users.length }} 人+1
+      </el-row>
     </el-row>
   </div>
 </template>
@@ -84,6 +102,7 @@ export default {
   props: {
     message: Object,
     date: String,
+    unlimitedRevoke: Boolean,
   },
   data() {
     return {

diff --git a/src/components/RedPacket.vue b/src/components/RedPacket.vue
@@ -1,89 +1,104 @@
 <template>
-  <el-popover placement="left-start"
-                  width="220"
-                  trigger="click"
-                  v-model="redPacketDialogVisible"
-                  @show="redPacketHandler">
-        <el-form ref="form"
-                 :rules="rules"
-                 :model="redPacketForm"
-                 size="mini"
-                 class="form">
-          <el-form-item label="类型"
-                        prop="type">
-            <el-select v-model="redPacketForm.type"
-                       class="option"
-                       @change="redPacketTypeChange">
-              <el-option v-for="item in redPacketTypeArray"
-                         :key="item.value"
-                         :label="item.label"
-                         :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="积分"
-                        prop="money">
-            <el-input-number v-model="redPacketForm.money"
-                             :min="32"></el-input-number>
-          </el-form-item>
-          <el-form-item label="个数"
-                        v-if="'specify' !== redPacketForm.type"
-                        prop="count">
-            <el-input-number v-model="redPacketForm.count"
-                             :min="1"></el-input-number>
-          </el-form-item>
-          <el-form-item label="专属"
-                        v-else
-                        prop="recivers">
-            <el-select v-model="redPacketForm.recivers"
-                       class="option"
-                       filterable
-                       remote
-                       placeholder="请输入关键词"
-                       :remote-method="remoteMethod"
-                       :loading="userListLoading">
-              <el-option v-for="item in userList"
-                         :key="item.userName"
-                         :label="item.userName"
-                         :value="item.userName">
-                <el-row class="option" type="flex">
-                  <img class="option-image" :src="item.userAvatarURL"/>
-                  <span class="option-text">{{item.userName}}</span>
-                </el-row>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="内容"
-                        prop="msg">
-            <el-input class="option"
-                      type="textarea"
-                      :autosize="{ minRows: 1, maxRows: 4}"
-                      v-model.trim="redPacketForm.msg"></el-input>
-          </el-form-item>
-          <el-form-item label-width="80px">
-            <el-button type="primary"
-                       @click="sendRedPacket">确 定</el-button>
-          </el-form-item>
-        </el-form>
-        <icon-svg slot="reference"
-                  icon-class="redPacketBtn" />
-      </el-popover>
+  <el-popover
+    placement="left-start"
+    width="220"
+    trigger="click"
+    v-model="redPacketDialogVisible"
+    @show="redPacketHandler"
+  >
+    <el-form
+      ref="form"
+      :rules="rules"
+      :model="redPacketForm"
+      size="mini"
+      class="form"
+    >
+      <el-form-item label="类型" prop="type">
+        <el-select
+          v-model="redPacketForm.type"
+          class="option"
+          @change="redPacketTypeChange"
+        >
+          <el-option
+            v-for="item in redPacketTypeArray"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="积分" prop="money">
+        <el-input-number
+          v-model="redPacketForm.money"
+          :min="32"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item
+        label="个数"
+        v-if="'specify' !== redPacketForm.type"
+        prop="count"
+      >
+        <el-input-number
+          v-model="redPacketForm.count"
+          :min="1"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="专属" v-else prop="recivers">
+        <el-select
+          v-model="redPacketForm.recivers"
+          class="option"
+          filterable
+          remote
+          placeholder="请输入关键词"
+          :remote-method="remoteMethod"
+          :loading="userListLoading"
+        >
+          <el-option
+            v-for="item in userList"
+            :key="item.userName"
+            :label="item.userName"
+            :value="item.userName"
+          >
+            <el-row class="option" type="flex">
+              <img class="option-image" :src="item.userAvatarURL" />
+              <span class="option-text">{{ item.userName }}</span>
+            </el-row>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="内容" prop="msg">
+        <el-input
+          class="option"
+          type="textarea"
+          :autosize="{ minRows: 1, maxRows: 4 }"
+          v-model.trim="redPacketForm.msg"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label-width="24px">
+        <el-button type="primary" @click="continuesSendRedPacket"
+          >十连发</el-button
+        >
+        <el-button type="primary" @click="sendRedPacket">发 送</el-button>
+      </el-form-item>
+    </el-form>
+    <icon-svg slot="reference" icon-class="redPacketBtn" />
+  </el-popover>
 </template>
 
 <script>
-import { send } from "../api/chat";
-import { getUserName } from "../api/user";
-import { mapGetters } from "vuex";
+import { send } from '../api/chat'
+import { getUserName } from '../api/user'
+import { mapGetters } from 'vuex'
 import {
   redPacketTypeMap,
   redPacketTypeArray,
   defaultType,
-} from "../constant/RedPacketConstant";
-import { inputRule, selectRule, numberRule, arrayRule } from "../constant/RuleConstant"
-
+} from '../constant/RedPacketConstant'
+import { inputRule, selectRule, numberRule } from '../constant/RuleConstant'
 
 export default {
-  name: "redPacket",
+  name: 'redPacket',
   data() {
     return {
       redPacketForm: {
@@ -99,62 +114,74 @@ export default {
       userList: [],
       userListLoading: false,
       rules: {
-          money: numberRule('积分'),
-          count: numberRule('个数'),
-          msg: inputRule('内容'),
-          type: selectRule('类型'),
-          recivers: selectRule('你的偏爱')
-      }
-    };
+        money: numberRule('积分'),
+        count: numberRule('个数'),
+        msg: inputRule('内容'),
+        type: selectRule('类型'),
+        recivers: selectRule('你的偏爱'),
+      },
+    }
   },
   computed: {
-    ...mapGetters(["key"]),
+    ...mapGetters(['key']),
     apiKey() {
-      return { apiKey: this.key };
+      return { apiKey: this.key }
     },
     redPacketContent() {
       let redPacketForm = this.redPacketForm
       redPacketForm.recivers = [redPacketForm.recivers]
       return {
-        content:
-          "[redpacket]" + JSON.stringify(redPacketForm) + "[/redpacket]",
+        content: '[redpacket]' + JSON.stringify(redPacketForm) + '[/redpacket]',
         apiKey: this.key,
-      };
+      }
     },
   },
   methods: {
     redPacketHandler() {
-      if (this.$refs["form"]) {
-        this.$refs["form"].resetFields();
+      if (this.$refs['form']) {
+        this.$refs['form'].resetFields()
       }
     },
+    continuesSendRedPacket() {
+      this.validate(() => {
+        for (let index = 0; index < 10; index++) {
+          this.send()
+        }
+      })
+    },
     sendRedPacket() {
-      this.$refs['form'].validate(valid => {
+      this.validate(() => this.send())
+    },
+    validate(fun) {
+      this.$refs['form'].validate((valid) => {
         if (!valid) {
-          return;
+          return
         }
-        send(this.redPacketContent).then(() => {
-          this.redPacketDialogVisible = false;
-        });
+        fun()
+      })
+    },
+    send() {
+      send(this.redPacketContent).then(() => {
+        this.redPacketDialogVisible = false
       })
     },
     remoteMethod(query) {
       if (query === '') {
         return
       }
-      this.userListLoading = true;
-      getUserName({name: query}).then(res => {
+      this.userListLoading = true
+      getUserName({ name: query }).then((res) => {
         this.userList = res.data
-        this.userListLoading = false;
+        this.userListLoading = false
       })
     },
     redPacketTypeChange(value) {
-      let map = redPacketTypeMap.get(value);
-      this.redPacketForm.count = map.count;
-      this.redPacketForm.msg = map.msg;
+      let map = redPacketTypeMap.get(value)
+      this.redPacketForm.count = map.count
+      this.redPacketForm.msg = map.msg
     },
   },
-};
+}
 </script>
 
 <style scoped>
@@ -176,9 +203,11 @@ export default {
 .el-select-dropdown {
   background-color: #333333;
 }
-.el-select-dropdown__item.hover, .el-select-dropdown__item.is-disabled:hover,
-.el-select-dropdown__item:hover, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover,
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item.is-disabled:hover,
+.el-select-dropdown__item:hover,
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover,
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
   background-color: #8f8f8f;
 }
-</style>
+</style>