From fabd74eee4cfe07791ae2cb6b2e709002dc1f9f2 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Fri, 1 Nov 2024 10:26:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E7=AE=A1=E7=90=86=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9Etoken=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../group/modules/group-operate-drawer.vue    | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/views/group/modules/group-operate-drawer.vue b/src/views/group/modules/group-operate-drawer.vue
index 4b6c085..662d698 100644
--- a/src/views/group/modules/group-operate-drawer.vue
+++ b/src/views/group/modules/group-operate-drawer.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 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';
@@ -29,6 +30,7 @@ const visible = defineModel<boolean>('visible', {
   default: false
 });
 
+const { copy, isSupported } = useClipboard();
 const { formRef, validate, restoreValidation } = useNaiveForm();
 const { defaultRequiredRule } = useFormRules();
 
@@ -160,6 +162,20 @@ watch(visible, () => {
     restoreValidation();
   }
 });
+
+async function handleCopy(source: string) {
+  if (!isSupported) {
+    window.$message?.error('您的浏览器不支持 Clipboard API');
+    return;
+  }
+
+  if (!source) {
+    return;
+  }
+
+  await copy(source);
+  window.$message?.success('复制成功');
+}
 </script>
 
 <template>
@@ -196,9 +212,17 @@ watch(visible, () => {
                 :placeholder="$t('page.groupConfig.form.token')"
                 :disabled="props.operateType === 'edit'"
               />
-              <NTooltip trigger="hover">
+              <NTooltip v-if="props.operateType === 'edit'" trigger="hover">
                 <template #trigger>
-                  <NButton type="default" ghost :disabled="props.operateType === 'edit'" @click="setToken">
+                  <NButton type="default" ghost @click="handleCopy(model.token)">
+                    <icon-ic:round-content-copy class="text-icon" />
+                  </NButton>
+                </template>
+                复制
+              </NTooltip>
+              <NTooltip v-else trigger="hover">
+                <template #trigger>
+                  <NButton type="default" ghost @click="setToken">
                     <icon-ic-round-refresh class="text-icon" />
                   </NButton>
                 </template>