ui: Optimize context menu display effect

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

ui/src/components/ContextMenu.vue

@@ -2,7 +2,8 @@
   <div ref="content" class="content" :style="{top: axis.y + 'px', left: axis.x + 'px'}" v-if="model">
     <template v-for="(item, index) in menus" :key="item.name">
       <a @click="onMenuClick(item.name)" :style="{'text-decoration': item.underline ? 'underline' : 'none'}">
-        {{item.caption || item.name}}
+        <span class="menu-caption">{{ item.caption || item.name }}</span>
+        <span class="menu-shortcut" v-if="item.shortcut">{{ item.shortcut }}</span>
       </a>
       <hr v-if="index < menus.length - 1"/>
     </template>
@@ -87,7 +88,6 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', close))
     position: fixed;
     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);
@@ -95,9 +95,26 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', close))
 
   .content a {
     color: black;
-    padding: 5px 16px;
+    padding: 5px;
     text-decoration: none;
-    display: block;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 30px;
+  }
+
+  .menu-caption {
+    flex: 1 1 auto;
+    text-align: left;
+    white-space: nowrap;
+  }
+  .menu-shortcut {
+    flex: 0 0 auto;
+    color: #888;
+    font-size: 13px;
+    white-space: nowrap;
+    text-align: right;
   }
 
   .content a:hover {
@@ -105,6 +122,10 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', close))
     cursor: default;
   }
 
+  .content a:hover .menu-shortcut {
+    color: black;
+  }
+
   .content hr {
     margin: 0;
     border: 1px solid #c1bcbc;

ui/src/components/RttyTerm.vue

@@ -70,15 +70,15 @@ const terminal = useTemplateRef('terminal')
 const contextmenuPos = ref(null)
 
 const contextmenus = [
-  {name: 'copy', caption: t('Copy - Ctrl+Insert')},
-  {name: 'paste', caption: t('Paste - Shift+Insert')},
+  {name: 'copy', caption: t('Copy'), shortcut: 'Ctrl + Insert'},
+  {name: 'paste', caption: t('Paste'), shortcut: 'Shift + Insert'},
   {name: 'clear', caption: t('Clear Scrollback')},
-  {name: 'find', caption: t('Find') + ' - Ctrl+F'},
+  {name: 'find', caption: t('Find'), shortcut: 'Ctrl + F'},
   {name: 'clear-highlighting', caption: t('Clear Highlighting')},
-  {name: 'font+', caption: t('font+') + ' - Ctrl+↑'},
-  {name: 'font-', caption: t('font-') + ' - Ctrl+↓'},
-  {name: 'upload', caption: t('Upload file') + ' - rtty -R'},
-  {name: 'download', caption: t('Download file') + ' - rtty -S file'},
+  {name: 'font+', caption: t('font+'), shortcut: 'Ctrl + ↑'},
+  {name: 'font-', caption: t('font-'), shortcut: 'Ctrl + ↓'},
+  {name: 'upload', caption: t('Upload file'), shortcut: 'rtty -R'},
+  {name: 'download', caption: t('Download file'), shortcut: 'rtty -S file'},
   {name: 'split-left', caption: t('split-left')},
   {name: 'split-right', caption: t('split-right')},
   {name: 'split-up', caption: t('split-up')},

ui/src/i18n/en.json

@@ -49,8 +49,8 @@
   "Upload": "Upload",
   "Device offline": "Device offline",
   "Sessions is full": "Sessions is full",
-  "Copy - Ctrl+Insert": "Copy - Ctrl+Insert",
-  "Paste - Shift+Insert": "Paste - Shift+Insert",
+  "Copy": "Copy",
+  "Paste": "Paste",
   "Clear Scrollback": "Clear Scrollback",
   "font+": "Increase font size",
   "font-": "Decrease font size",

ui/src/i18n/zh-CN.json

@@ -50,8 +50,8 @@
   "Upload": "上传",
   "Device offline": "设备离线",
   "Sessions is full": "会话已满",
-  "Copy - Ctrl+Insert": "复制 - Ctrl+Insert",
-  "Paste - Shift+Insert": "粘贴 - Shift+Insert",
+  "Copy": "复制",
+  "Paste": "粘贴",
   "Clear Scrollback": "清除回滚",
   "font+": "增大字号",
   "font-": "减小字号",