feat(web): support message copy & message delete

web/src/components/Contextmenu.vue

@@ -40,11 +40,22 @@ export default class Contextmenu extends Vue {
   .el-card__body {
     padding: 8px 0px;
     .context-menu__item {
+      &.disabled {
+        cursor: not-allowed;
+        color: var(--color-text-light);
+        &:hover {
+          color: var(--color-text-light);
+        }
+      }
       padding: 4px 12px;
-      display: block;
+      display: flex;
+      align-items: center;
+      .iconfont {
+        font-size: 18px;
+      }
       &:hover {
         color: var(--color-main-green);
-        background: var(--color-minor-green);
+        background: var(--color-light-green);
       }
       &.danger {
         color: var(--color-minor-red);
@@ -57,6 +68,14 @@ export default class Contextmenu extends Vue {
     i {
       margin-right: 5px;
     }
+    .icon-delete {
+      margin-right: 4px;
+    }
+    [class^='el-icon-'],
+    [class*=' el-icon-'] {
+      font-weight: 500;
+      font-size: 18px;
+    }
   }
 }
 </style>

web/src/components/MsgPublish.vue

@@ -545,7 +545,6 @@ export default class MsgPublish extends Vue {
       right: 0;
       top: 70px;
       .history-icon {
-        width: 70px;
         height: 10px;
         .el-button + .el-button {
           margin-left: 5px;

web/src/lang/common.ts

@@ -104,6 +104,21 @@ export default {
     en: 'Advanced Config',
     ja: '詳細設定',
   },
+  copy: {
+    zh: '复 制',
+    en: 'Copy',
+    ja: 'コピー',
+  },
+  copySuccess: {
+    zh: '复制成功',
+    en: 'Copy Success',
+    ja: 'コピーが成功しました',
+  },
+  copyFailed: {
+    zh: '复制失败',
+    en: 'Copy Failed',
+    ja: 'コピーが失敗しました',
+  },
   version: {
     zh: '版本：',
     en: 'Version: ',

web/src/utils/api/connectionMessageService.ts

@@ -0,0 +1,21 @@
+import db from '@/database/index'
+
+class ConnectionMessageService {
+  public getAll = (id: string): MessageModel[] => {
+    const query = db.find<ConnectionModel>('connections', id)
+    if (!query) {
+      return []
+    }
+    return query.messages
+  }
+
+  public create = (id: string, message: MessageModel): MessageModel => {
+    return db.findChild<$TSFixed>('connections', id).get('messages').insert(message).write()
+  }
+
+  public delete = (id: string, mid: string): MessageModel => {
+    return db.findChild<$TSFixed>('connections', id).get('messages').removeById(mid).write()
+  }
+}
+
+export default new ConnectionMessageService()

web/src/views/connections/ConnectionsDetail.vue

@@ -149,7 +149,16 @@
           :height="messageListHeight"
           :marginTop="messageListMarginTop"
           :addNewMsg="messagesAddedNewItem"
+          @showContextMenu="handleContextMenu"
         />
+        <contextmenu :visible.sync="showContextmenu" v-bind="contextmenuConfig">
+          <a href="javascript:;" class="context-menu__item" @click="handleCopyMessage">
+            <i class="iconfont icon-copy"></i>{{ $t('common.copy') }}
+          </a>
+          <a href="javascript:;" class="context-menu__item danger" @click="handleDeleteMessage">
+            <i class="iconfont icon-delete"></i>{{ $t('common.delete') }}
+          </a>
+        </contextmenu>
       </div>
 
       <div ref="connectionFooter" class="connections-footer" :style="{ marginLeft: marginLeft }">
@@ -188,7 +197,9 @@ import SubscriptionsList from '@/components/SubscriptionsList.vue'
 import ResizeHeight from '@/components/ResizeHeight.vue'
 import MsgTypeTabs from '@/components/MsgTypeTabs.vue'
 import ConnectionInfo from './ConnectionInfo.vue'
+import Contextmenu from '@/components/Contextmenu.vue'
 
+import connectionMessageService from '@/utils/api/connectionMessageService.ts'
 import { hasMessagePayloadID, hasMessageHeaderID } from '@/utils/historyRecordUtils'
 import historyMessageHeaderService from '@/utils/api/historyMessageHeaderService'
 import historyMessagePayloadService from '@/utils/api/historyMessagePayloadService'
@@ -206,6 +217,7 @@ interface Top {
   components: {
     MessageList,
     ConnectionInfo,
+    Contextmenu,
     MsgPublish,
     SubscriptionsList,
     ResizeHeight,
@@ -272,6 +284,13 @@ export default class ConnectionsDetail extends Vue {
   private messageListMarginTop: number = 19
   private messagesAddedNewItem: boolean = false
   private activeTopic = ''
+  private showContextmenu: boolean = false
+  private selectedMessage: MessageModel | null = null
+  private contextmenuConfig: ContextmenuModel = {
+    top: 0,
+    left: 0,
+  }
+  private selectedInfo: string = ''
   private mqttVersionDict = {
     '3.1.1': 4,
     '5.0': 5,
@@ -331,6 +350,54 @@ export default class ConnectionsDetail extends Vue {
       document.body.offsetHeight - connectionTopbar.offsetHeight - connectionFooter.offsetHeight - filterBarOffsetHeight
   }
 
+  // Show context menu
+  private handleContextMenu(msgItemInfo: IArguments, message: MessageModel) {
+    const [payload, event] = msgItemInfo
+    if (!this.showContextmenu) {
+      const { clientX, clientY } = event
+      const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+      const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+      this.contextmenuConfig.left = width - clientX < 95 ? clientX - 75 : clientX
+      this.contextmenuConfig.top = height - clientY < 77 ? clientY - 77 : clientY
+      this.showContextmenu = true
+      this.selectedMessage = message
+      this.selectedInfo = payload
+    } else {
+      this.showContextmenu = false
+    }
+  }
+
+  // Copy message
+  private handleCopyMessage() {
+    if (this.selectedInfo) {
+      this.$copyText(this.selectedInfo).then(
+        () => {
+          this.$message.success(this.$tc('common.copySuccess'))
+        },
+        () => {
+          this.$message.error(this.$tc('common.copyFailed'))
+        },
+      )
+    }
+  }
+
+  // Delete message
+  private async handleDeleteMessage() {
+    let id = ''
+    if (this.selectedMessage && this.selectedMessage.id) {
+      id = this.selectedMessage.id.toString()
+    }
+    const deleteMsg: MessageModel | undefined = await connectionMessageService.delete(this.$route.params.id, id)
+    if (deleteMsg) {
+      this.showContextmenu = false
+      this.$message.success(this.$tc('common.deleteSuccess'))
+      this.$emit('reload')
+    } else {
+      this.showContextmenu = false
+      this.$message.error(this.$tc('common.deletefailed'))
+    }
+  }
+
   get bodyTop(): Top {
     return {
       open: '249px',

web/src/views/connections/ConnectionsList.vue

@@ -7,7 +7,7 @@
         :key="item.id"
         :class="['connection-item', { active: item.id === connectionId }]"
         @click="handleSelectConnection(item)"
-        @contextmenu="handleContextMenu(item, $event)"
+        @contextmenu.prevent="handleContextMenu(item, $event)"
       >
         <div class="item-left">
           <div