feat: 使用废弃 API 解决非安全域复制问题

src/views/group/modules/group-detail-drawer.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
 import { groupConfigStatusRecord, yesOrNoRecord } from '@/constants/business';
 import { $t } from '@/locales';
 import { tagColor } from '@/utils/common';
-
 defineOptions({
   name: 'GroupDetailDrawer'
 });
@@ -17,6 +17,31 @@ defineProps<Props>();
 const visible = defineModel<boolean>('visible', {
   default: false
 });
+
+const { copy, isSupported } = useClipboard();
+
+async function handleCopy(source?: string) {
+  if (!isSupported) {
+    window.$message?.error('您的浏览器不支持 Clipboard API');
+    return;
+  }
+
+  if (!source) {
+    return;
+  }
+
+  if (navigator.clipboard && window.isSecureContext) {
+    await copy(source);
+  } else {
+    const range = document.createRange();
+    range.selectNode(document.getElementById('tokenDetailInput')!);
+    const selection = window.getSelection();
+    if (selection?.rangeCount) selection.removeAllRanges();
+    selection?.addRange(range);
+    document.execCommand('copy');
+  }
+  window.$message?.success('复制成功');
+}
 </script>
 
 <template>
@@ -26,7 +51,17 @@ const visible = defineModel<boolean>('visible', {
         {{ rowData?.groupName }}
       </NDescriptionsItem>
 
-      <NDescriptionsItem :label="$t('page.groupConfig.token')" :span="1">{{ rowData?.token }}</NDescriptionsItem>
+      <NDescriptionsItem :span="1">
+        <template #label>
+          <div class="flex items-center gap-2">
+            <span>{{ $t('page.groupConfig.token') }}</span>
+            <NButton type="default" text @click="handleCopy(rowData?.token)">
+              <icon-ic:round-content-copy class="text-icon" />
+            </NButton>
+          </div>
+        </template>
+        <span id="tokenDetailInput">{{ rowData?.token }}</span>
+      </NDescriptionsItem>
       <NDescriptionsItem :label="$t('page.groupConfig.groupStatus')" :span="1">
         <NTag :type="tagColor(rowData?.groupStatus!)">{{ $t(groupConfigStatusRecord[rowData?.groupStatus!]) }}</NTag>
       </NDescriptionsItem>

src/views/group/modules/group-operate-drawer.vue

@@ -3,8 +3,7 @@ import { computed, reactive, ref, watch } from 'vue';
 import { useClipboard } from '@vueuse/core';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
-import { translateOptions, translateOptions2 } from '@/utils/common';
+import { groupConfigStatusOptions, groupConfigYesOrNoOptions } from '@/constants/business';
-import { groupConfigIdModeOptions, groupConfigStatusOptions, groupConfigYesOrNoOptions } from '@/constants/business';
 import { fetchAddGroupConfig, fetchEditGroupConfig, fetchGetPartitionTableList } from '@/service/api/group';
 
 defineOptions({
@@ -173,7 +172,16 @@ async function handleCopy(source: string) {
     return;
   }
 
-  await copy(source);
+  if (navigator.clipboard && window.isSecureContext) {
+    await copy(source);
+  } else {
+    const range = document.createRange();
+    range.selectNode(document.getElementById('tokenOperateInput')!);
+    const selection = window.getSelection();
+    if (selection?.rangeCount) selection.removeAllRanges();
+    selection?.addRange(range);
+    document.execCommand('copy');
+  }
   window.$message?.success('复制成功');
 }
 </script>
@@ -207,6 +215,7 @@ async function handleCopy(source: string) {
           <NFormItem :label="$t('page.groupConfig.token')" path="token">
             <NInputGroup>
               <NInput
+                id="tokenOperateInput"
                 v-model:value="model.token"
                 :maxlength="64"
                 :placeholder="$t('page.groupConfig.form.token')"

src/views/namespace/index.vue

@@ -32,7 +32,16 @@ async function handleCopy(source: string) {
     return;
   }
 
-  await copy(source);
+  if (navigator.clipboard && window.isSecureContext) {
+    await copy(source);
+  } else {
+    const input = document.createElement('input');
+    input.value = source;
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand('copy');
+    document.body.removeChild(input);
+  }
   window.$message?.success('复制成功');
 }
 

src/views/namespace/modules/namespace-operate-drawer.vue

@@ -124,7 +124,16 @@ async function handleCopy(source: string) {
     return;
   }
 
-  await copy(source);
+  if (navigator.clipboard && window.isSecureContext) {
+    await copy(source);
+  } else {
+    const range = document.createRange();
+    range.selectNode(document.getElementById('uniqueIdInput')!);
+    const selection = window.getSelection();
+    if (selection?.rangeCount) selection.removeAllRanges();
+    selection?.addRange(range);
+    document.execCommand('copy');
+  }
   window.$message?.success('复制成功');
 }
 </script>
@@ -135,6 +144,7 @@ async function handleCopy(source: string) {
       <NFormItem :label="$t('page.namespace.uniqueId')" path="uniqueId">
         <NInputGroup>
           <NInput
+            id="uniqueIdInput"
             v-model:value="model.uniqueId"
             :disabled="props.operateType === 'edit'"
             :placeholder="$t('page.namespace.form.uniqueId')"