From ce91c83de7ac9669cb76f1f64fc4fdb39c4ba296 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Fri, 1 Nov 2024 10:23:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=91=BD=E5=90=8D=E7=A9=BA=E9=97=B4?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=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

---
 src/views/namespace/index.vue                 | 32 +++++++++++++++++--
 .../modules/namespace-operate-drawer.vue      | 28 ++++++++++++++--
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/views/namespace/index.vue b/src/views/namespace/index.vue
index 4f57d9d..f50b07d 100644
--- a/src/views/namespace/index.vue
+++ b/src/views/namespace/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NButton, NPopconfirm, NPopover } from 'naive-ui';
 import { ref } from 'vue';
+import { useClipboard } from '@vueuse/core';
 import { fetchDeleteNamespace, fetchGetNamespaceList } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
@@ -14,12 +15,27 @@ import NamespaceSearch from './modules/namespace-search.vue';
 const appStore = useAppStore();
 const authStore = useAuthStore();
 const namespaceId = ref<string>(localStg.get('namespaceId')!);
+const { copy, isSupported } = useClipboard();
 
 const handleChange = (uniqueId: string) => {
   namespaceId.value = uniqueId;
   authStore.setNamespaceId(uniqueId);
 };
 
+async function handleCopy(source: string) {
+  if (!isSupported) {
+    window.$message?.error('您的浏览器不支持 Clipboard API');
+    return;
+  }
+
+  if (!source) {
+    return;
+  }
+
+  await copy(source);
+  window.$message?.success('复制成功');
+}
+
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetNamespaceList,
   apiParams: {
@@ -59,7 +75,19 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'uniqueId',
       title: $t('page.namespace.uniqueId'),
       align: 'left',
-      width: 180
+      width: 180,
+      render: row => (
+        <NPopover>
+          {{
+            trigger: () => (
+              <NButton text type="primary" onClick={() => handleCopy(row.uniqueId)}>
+                {row.uniqueId}
+              </NButton>
+            ),
+            default: () => <span>点击复制</span>
+          }}
+        </NPopover>
+      )
     },
     {
       key: 'createDt',
diff --git a/src/views/namespace/modules/namespace-operate-drawer.vue b/src/views/namespace/modules/namespace-operate-drawer.vue
index 0535dcb..749fc14 100644
--- a/src/views/namespace/modules/namespace-operate-drawer.vue
+++ b/src/views/namespace/modules/namespace-operate-drawer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
 import { nanoid } from '@sa/utils';
+import { useClipboard } from '@vueuse/core';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import OperateDrawer from '@/components/common/operate-drawer.vue';
 import { $t } from '@/locales';
@@ -26,6 +27,7 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
+const { copy, isSupported } = useClipboard();
 const authStore = useAuthStore();
 const visible = defineModel<boolean>('visible', {
   default: false
@@ -111,6 +113,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>
@@ -123,9 +139,17 @@ watch(visible, () => {
             :disabled="props.operateType === 'edit'"
             :placeholder="$t('page.namespace.form.uniqueId')"
           />
-          <NTooltip trigger="hover">
+          <NTooltip v-if="props.operateType === 'edit'" trigger="hover">
             <template #trigger>
-              <NButton type="default" ghost :disabled="props.operateType === 'edit'" @click="setUniqueId">
+              <NButton type="default" ghost @click="handleCopy(model.uniqueId)">
+                <icon-ic:round-content-copy class="text-icon" />
+              </NButton>
+            </template>
+            复制
+          </NTooltip>
+          <NTooltip v-else trigger="hover">
+            <template #trigger>
+              <NButton type="default" ghost @click="setUniqueId">
                 <icon-ic-round-refresh class="text-icon" />
               </NButton>
             </template>