ui: Optimize the display effect of the right-click menus

Signed-off-by: Jianhui Zhao <zhaojh329@gmail.com>

ui/src/components/ContextMenu.vue

@@ -1,9 +1,11 @@
 <template>
   <div ref="content" class="content" :style="{top: axis.y + 'px', left: axis.x + 'px'}" v-if="visibility">
-    <a v-for="item in menus" :key="item.name" @click="onMenuClick(item.name)"
+    <template v-for="(item, index) in menus" :key="item.name">
-       :style="{'text-decoration': item.underline ? 'underline' : 'none'}">
+      <a @click="onMenuClick(item.name)" :style="{'text-decoration': item.underline ? 'underline' : 'none'}">
-      {{item.caption || item.name}}
+        {{item.caption || item.name}}
-    </a>
+      </a>
+      <hr v-if="index < menus.length - 1"/>
+    </template>
   </div>
 </template>
 
@@ -84,6 +86,8 @@ export default {
     z-index: 9999;
     background-color: #f9f9f9;
     min-width: 160px;
+    border-radius: 5px;
+    padding: 5px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   }
 
@@ -98,4 +102,9 @@ export default {
     background-color: #90C8F6;
     cursor: default;
   }
+
+  .content hr {
+    margin: 0;
+    border: 1px solid #c1bcbc;
+  }
 </style>

ui/src/components/RttyTerm.vue

@@ -53,7 +53,8 @@ export default {
         {name: 'paste', caption: this.$t('Paste - Shift+Insert')},
         {name: 'clear', caption: this.$t('Clear Scrollback')},
         {name: 'font', caption: this.$t('Font Size')},
-        {name: 'file', caption: this.$t('Upload or download file')},
+        {name: 'upload', caption: this.$t('Upload file') + ' - rtty -R'},
+        {name: 'download', caption: this.$t('Download file') + ' - rtty -S file'},
         {name: 'about', caption: this.$t('About')}
       ],
       font: {
@@ -95,8 +96,10 @@ export default {
         this.term.clear()
       } else if (name === 'font') {
         this.font.modal = true
-      } else if (name === 'file') {
+      } else if (name === 'upload') {
-        this.$message.success(this.$t('Please execute command "rtty -R" or "rtty -S" in current terminal!'))
+        this.$message.success(this.$t('Please execute command "rtty -R" in current terminal!'))
+      } else if (name === 'download') {
+        this.$message.success(this.$t('Please execute command "rtty -S file" in current terminal!'))
       } else if (name === 'about') {
         window.open('https://github.com/zhaojh329/rtty')
       }

ui/src/i18n/en.json

@@ -52,9 +52,11 @@
   "Paste - Shift+Insert": "Paste - Shift+Insert",
   "Clear Scrollback": "Clear Scrollback",
   "Font Size": "Font Size",
-  "Upload or download file": "Upload or download file",
+  "Upload file": "Upload file",
+  "Download file": "Download file",
   "About": "About",
-  "Please execute command \"rtty -R\" or \"rtty -S\" in current terminal!": "Please execute command \"rtty -R\" or \"rtty -S\" in current terminal!",
+  "Please execute command \"rtty -R\" in current terminal!": "Please execute command \"rtty -R\" in current terminal!",
+  "Please execute command \"rtty -S file\" in current terminal!": "Please execute command \"rtty -S file\" in current terminal!",
   "Access your devices's Web": "Access your devices's Web",
   "Proto": "Proto",
   "ipaddr": "IP address",

ui/src/i18n/zh-CN.json

@@ -54,9 +54,11 @@
   "Paste - Shift+Insert": "粘贴 - Shift+Insert",
   "Clear Scrollback": "清除回滚",
   "Font Size": "字体大小",
-  "Upload or download file": "上传或者下载文件",
+  "Upload file": "上传文件",
+  "Download file": "下载文件",
   "About": "关于",
-  "Please execute command \"rtty -R\" or \"rtty -S\" in current terminal!": "请在当前终端中执行命令 \"rtty -R\" 或者 \"rtty -S\"",
+  "Please execute command \"rtty -R\" in current terminal!": "请在当前终端中执行命令 \"rtty -R\"",
+  "Please execute command \"rtty -S file\" in current terminal!": "请在当前终端中执行命令 \"rtty -S file\"",
   "Proto": "协议",
   "ipaddr": "IP 地址",
   "port": "端口",