From a22794b03c6ec2887cee90f2c69355ad17a3d2e2 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Tue, 3 Jan 2023 12:40:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=A4=8D=E5=88=B6?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json                    |  1 +
 frontend/package.json                         |  1 +
 frontend/src/lang/modules/zh.ts               |  1 +
 .../src/views/website/ssl/detail/index.vue    | 57 +++++++++++++++++--
 4 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4db449828..fd7fadf85 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -32,6 +32,7 @@
                 "unplugin-vue-define-options": "^0.7.3",
                 "vite-plugin-monaco-editor": "^1.1.0",
                 "vue": "^3.2.25",
+                "vue-clipboard3": "^2.0.0",
                 "vue-codemirror": "^6.1.1",
                 "vue-i18n": "^9.1.9",
                 "vue-router": "^4.0.12",
diff --git a/frontend/package.json b/frontend/package.json
index 1322123c8..8da20fede 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -44,6 +44,7 @@
         "unplugin-vue-define-options": "^0.7.3",
         "vite-plugin-monaco-editor": "^1.1.0",
         "vue": "^3.2.25",
+        "vue-clipboard3": "^2.0.0",
         "vue-codemirror": "^6.1.1",
         "vue-i18n": "^9.1.9",
         "vue-router": "^4.0.12",
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index f534d1a44..148955062 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -78,6 +78,7 @@ export default {
             operate: '操作',
             operateConfirm: '如果确认操作，请手动输入',
             inputOrSelect: '请选择或输入',
+            copyfailed: '复制失败',
         },
         login: {
             firstLogin: '首次登录，请创建初始管理员用户！',
diff --git a/frontend/src/views/website/ssl/detail/index.vue b/frontend/src/views/website/ssl/detail/index.vue
index ce833eacd..cd3d27bc5 100644
--- a/frontend/src/views/website/ssl/detail/index.vue
+++ b/frontend/src/views/website/ssl/detail/index.vue
@@ -37,14 +37,19 @@
                 </el-descriptions>
             </div>
             <div v-else-if="curr === 'ssl'">
-                <el-input v-model="ssl.pem" :autosize="{ minRows: 10, maxRows: 15 }" type="textarea" />
+                <el-input v-model="ssl.pem" :autosize="{ minRows: 10, maxRows: 15 }" type="textarea" id="textArea" />
                 <div>
                     <br />
                     <el-button type="primary" @click="copyText(ssl.pem)">{{ $t('file.copy') }}</el-button>
                 </div>
             </div>
             <div v-else>
-                <el-input v-model="ssl.privateKey" :autosize="{ minRows: 10, maxRows: 15 }" type="textarea" />
+                <el-input
+                    v-model="ssl.privateKey"
+                    :autosize="{ minRows: 10, maxRows: 15 }"
+                    type="textarea"
+                    id="textArea"
+                />
                 <div>
                     <br />
                     <el-button type="primary" @click="copyText(ssl.privateKey)">{{ $t('file.copy') }}</el-button>
@@ -59,6 +64,8 @@ import { ref } from 'vue';
 import { dateFromat, getProvider } from '@/utils/util';
 import { ElMessage } from 'element-plus';
 import i18n from '@/lang';
+import useClipboard from 'vue-clipboard3';
+const { toClipboard } = useClipboard();
 
 let open = ref(false);
 let id = ref(0);
@@ -82,12 +89,52 @@ const get = async () => {
     ssl.value = res.data;
 };
 
-const copyText = (val: string): void => {
-    navigator.clipboard.writeText(val).then(() => {
+const copyText = async (msg) => {
+    try {
+        await toClipboard(msg);
         ElMessage.success(i18n.global.t('commons.msg.copySuccess'));
-    });
+    } catch (e) {
+        ElMessage.error(i18n.global.t('commons.msg.copyfailed'));
+    }
 };
 
+// const copyText = async (text: string) => {
+//     try {
+//         try {
+//             await navigator.clipboard.writeText(text);
+//             ElMessage.success(i18n.global.t('commons.msg.copySuccess'));
+//             return await Promise.resolve();
+//         } catch (err) {
+//             return await Promise.reject(err);
+//         }
+//     } catch (e) {
+//         let input = document.createElement('input');
+//         input.style.position = 'fixed';
+//         input.style.top = '-10000px';
+//         input.style.zIndex = '-999';
+//         document.body.appendChild(input);
+//         console.log('input', input);
+//         input.value = text;
+//         input.focus();
+//         input.select();
+//         try {
+//             let result = document.execCommand('copy');
+//             document.body.removeChild(input);
+//             if (!result) {
+//                 ElMessage.error(i18n.global.t('commons.msg.copyfailed'));
+//                 return Promise.reject();
+//             } else {
+//                 ElMessage.success(i18n.global.t('commons.msg.copySuccess'));
+//                 return Promise.resolve();
+//             }
+//         } catch (e) {
+//             document.body.removeChild(input);
+//             ElMessage.error(i18n.global.t('commons.msg.copyfailed'));
+//             return Promise.reject();
+//         }
+//     }
+// };
+
 defineExpose({
     acceptParams,
 });