Merge pull request #1498 from MCSManager/absurd

refactor: copy btn

frontend/src/components/CopyButton.vue

@@ -1,39 +1,21 @@
 <script setup lang="ts">
 import { t } from "@/lang/i18n";
 import { CopyOutlined } from "@ant-design/icons-vue";
-import { Modal, message } from "ant-design-vue";
-import { reportErrorMsg } from "@/tools/validator";
 import type { ButtonType } from "ant-design-vue/es/button";
 import type { SizeType } from "ant-design-vue/es/config-provider";
-import { h } from "vue";
+import { toCopy } from "@/tools/copy";
 
 const props = defineProps<{
   size?: string;
   type?: string;
   value: string;
 }>();
-
-const copy = async () => {
-  if (!navigator.clipboard) {
-    Modal.warning({
-      title: t("TXT_CODE_ca07c84c"),
-      content: [h("span", t("TXT_CODE_2452016e")), h("br"), h("span", props.value)]
-    });
-    return;
-  }
-  try {
-    await navigator.clipboard.writeText(props.value);
-    message.success(t("TXT_CODE_b858d78a"));
-  } catch (error: any) {
-    reportErrorMsg(t("TXT_CODE_81b9b599") + error);
-  }
-};
 </script>
 
 <template>
   <a-tooltip>
     <template #title>{{ t("TXT_CODE_13ae6a93") }}</template>
-    <a-button :type="<ButtonType>type" :size="<SizeType>size" @click="copy">
+    <a-button :type="<ButtonType>type" :size="<SizeType>size" @click="toCopy(props.value)">
       <template #icon>
         <CopyOutlined />
       </template>

frontend/src/components/MyselfInfoDialog.vue

@@ -10,6 +10,7 @@ import type { FormInstance } from "ant-design-vue";
 import CopyButton from "@/components/CopyButton.vue";
 import { bind2FA } from "../services/apis/user";
 import { PERMISSION_MAP } from "@/config/const";
+import { toCopy } from "@/tools/copy";
 const { state, updateUserInfo } = useAppStateStore();
 const { state: tools } = useAppToolsStore();
 
@@ -176,7 +177,6 @@ const disable2FACode = async () => {
             </a-button>
           </div>
         </a-form-item>
-
         <a-form-item label="APIKEY">
           <a-typography-paragraph>
             {{ t("TXT_CODE_b2dbf778") }}

frontend/src/tools/copy.ts

@@ -0,0 +1,29 @@
+import { t } from "@/lang/i18n";
+import { useClipboard } from "@vueuse/core";
+import { message, Modal } from "ant-design-vue";
+import { h } from "vue";
+
+const { copy, copied, isSupported } = useClipboard();
+
+export const toCopy = async (sth: string | number) => {
+  try {
+    if (!isSupported.value) {
+      const input = document.createElement("input");
+      input.setAttribute("value", String(sth));
+      document.body.appendChild(input);
+      input.select();
+      document.execCommand("copy");
+      document.body.removeChild(input);
+      return message.success(t("TXT_CODE_b858d78a"));
+    } else {
+      await copy(String(sth));
+      if (copied.value) return message.success(t("TXT_CODE_b858d78a"));
+    }
+  } catch (err: any) {
+    console.error(err);
+    Modal.warning({
+      title: t("TXT_CODE_ca07c84c"),
+      content: [h("span", t("TXT_CODE_2452016e")), h("br"), h("span", sth)]
+    });
+  }
+};

frontend/src/widgets/instance/BaseInfo.vue

@@ -158,9 +158,13 @@ onMounted(async () => {
         </span>
       </a-typography-paragraph>
       <a-typography-paragraph>
-        <a-typography-text> {{ t("TXT_CODE_30051f9b") }} </a-typography-text>
+        <a-typography-text :title="instanceInfo?.instanceUuid">
+          {{ t("TXT_CODE_30051f9b") }}
+        </a-typography-text>
         <a-typography-text :copyable="{ text: instanceInfo?.instanceUuid }"> </a-typography-text>
-        <a-typography-text class="ml-20"> {{ t("TXT_CODE_5f2d2e30") }} </a-typography-text>
+        <a-typography-text class="ml-20" :title="daemonId">
+          {{ t("TXT_CODE_5f2d2e30") }}
+        </a-typography-text>
         <a-typography-text :copyable="{ text: daemonId }"> </a-typography-text>
       </a-typography-paragraph>
     </template>

frontend/src/widgets/node/NodeItem.vue

@@ -228,7 +228,7 @@ onMounted(() => {
             :span="6"
           >
             <a-typography-paragraph>
-              <div>
+              <div :title="detail.onlyCopy ? detail.value : ''">
                 {{ detail.title }}
               </div>