fix: ui: fix copy text from term

Signed-off-by: Jianhui Zhao <[email protected]>
tandatle · Jul 31, 2022 · 6cd4093 · 6cd4093
1 parent 25e9fad
commit 6cd4093
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 31 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -13,6 +13,7 @@
     "view-design": "^4.7.0-beta.9",
     "vue": "^2.6.11",
     "vue-axios": "^3.3.7",
+    "vue-clipboard2": "^0.3.3",
     "vue-i18n": "^8.25.1",
     "vue-router": "^3.2.0",
     "xterm": "^4.14.1",

diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
@@ -66,5 +66,7 @@
   "Delete success": "Delete success",
   "Delete offline devices": "Delete offline devices",
   "There are no offline devices in selected devices": "There are no offline devices in selected devices",
-  "Invalid address": "Invalid address"
+  "Invalid address": "Invalid address",
+  "Already copied to clipboard": "Already copied to clipboard",
+  "Please use shortcut \"Shift+Insert\"": "Please use shortcut \"Shift+Insert\""
 }
diff --git a/ui/src/locales/zh-CN.json b/ui/src/locales/zh-CN.json
@@ -67,5 +67,7 @@
   "Delete success": "删除成功",
   "Delete offline devices": "删除离线设备",
   "There are no offline devices in selected devices": "所选设备中无离线设备",
-  "Invalid address": "无效的地址"
+  "Invalid address": "无效的地址",
+  "Already copied to clipboard": "已复制到剪切板",
+  "Please use shortcut \"Shift+Insert\"": "请使用快捷键 \"Shift+Insert\""
 }
diff --git a/ui/src/main.js b/ui/src/main.js
@@ -3,12 +3,14 @@ import App from './App.vue'
 import router from './router'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import VueClipboard from 'vue-clipboard2'
 import i18n from './plugins/vue-i18n'
 import './plugins/view-design'
 import './assets/iconfont/iconfont.css'
 
 Vue.config.productionTip = false
 
+Vue.use(VueClipboard)
 Vue.use(VueAxios, axios);
 
 new Vue({

diff --git a/ui/src/plugins/clipboard.js b/ui/src/plugins/clipboard.js
diff --git a/ui/src/views/Rtty.vue b/ui/src/views/Rtty.vue
@@ -13,8 +13,6 @@
 
 <script>
 import Contextmenu from '@/components/ContextMenu'
-import ClipboardEx from '@/plugins/clipboard'
-
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import OverlayAddon from '@/plugins/xterm-addon-overlay'
@@ -71,9 +69,14 @@ export default {
     },
     onContextmenuClick(name) {
       if (name === 'copy') {
-        ClipboardEx.write(this.term.getSelection() || '');
+        const text = this.term.getSelection();
+        if (text) {
+          this.$copyText(text).then(() => {
+            this.$Message.info(this.$t('Already copied to clipboard').toString());
+          })
+        }
       } else if (name === 'paste') {
-        ClipboardEx.read().then(text => this.term.paste(text));
+        this.$Message.info(this.$t('Please use shortcut "Shift+Insert"').toString());
       } else if (name === 'clear') {
         this.term.clear();
       } else if (name === 'font+') {
@@ -85,12 +88,7 @@ export default {
         if (size && size > 12)
           this.updateFontSize(size - 1);
       } else if (name === 'file') {
-        this.$Modal.info({
-          content: this.$t('Please execute command "rtty -R" or "rtty -S" in current terminal!'),
-          onOk: () => {
-            this.term.focus();
-          }
-        });
+        this.$Message.info(this.$t('Please execute command "rtty -R" or "rtty -S" in current terminal!').toString());
       } else if (name === 'about') {
         window.open('https://github.com/zhaojh329/rtty');
       }