From 108eeb5d267e01aa98a13266e625bea3dbe3bb35 Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Thu, 16 Jan 2025 20:37:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E9=9B=86=E7=BE=A4=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=BB=8E=E8=AE=BF=E9=97=AE=E5=85=A5=E5=8F=A3=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E9=94=99=E8=AF=AF=20#9112?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popover-copy/Index.vue     | 114 ++++++++++++++++
 dbm-ui/frontend/src/locales/zh-cn.json        |   3 +
 .../src/services/model/mysql/tendbha.ts       |  17 +--
 .../src/services/model/redis/redis.ts         |  12 +-
 .../services/model/sqlserver/sqlserver-ha.ts  |  10 +-
 .../model/tendbcluster/tendbcluster.ts        |  10 +-
 .../MasterDomainColumn.vue                    | 119 ++++++++--------
 .../SlaveDomainColumn.vue                     | 127 +++++++++++++-----
 .../components/CellContent.vue                | 104 ++++----------
 .../common/render-cell-copy/Index.vue         |   2 +-
 .../common/render-head-copy/Index.vue         |   2 +-
 11 files changed, 333 insertions(+), 187 deletions(-)
 create mode 100644 dbm-ui/frontend/src/components/popover-copy/Index.vue

diff --git a/dbm-ui/frontend/src/components/popover-copy/Index.vue b/dbm-ui/frontend/src/components/popover-copy/Index.vue
new file mode 100644
index 0000000000..f5f33bbf1c
--- /dev/null
+++ b/dbm-ui/frontend/src/components/popover-copy/Index.vue
@@ -0,0 +1,114 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="dbm-popover-copy">
+    <DbIcon
+      ref="copyRootRef"
+      :class="{ 'is-active': isActive }"
+      type="copy" />
+    <div style="display: none">
+      <div
+        ref="popRef"
+        class="dbm-popover-copy-panel">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import tippy, { type Instance, type SingleTarget } from 'tippy.js';
+
+  let tippyIns: Instance;
+  const isActive = ref(false);
+  const copyRootRef = ref();
+  const popRef = ref();
+
+  onMounted(() => {
+    nextTick(() => {
+      tippyIns = tippy(copyRootRef.value.$el as SingleTarget, {
+        content: popRef.value,
+        placement: 'top',
+        appendTo: () => document.body,
+        theme: 'light',
+        maxWidth: 'none',
+        trigger: 'mouseenter click',
+        interactive: true,
+        arrow: false,
+        allowHTML: true,
+        zIndex: 999999,
+        hideOnClick: true,
+        onShow() {
+          isActive.value = true;
+        },
+        onHide() {
+          isActive.value = false;
+        },
+      });
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (tippyIns) {
+      tippyIns.hide();
+      tippyIns.unmount();
+      tippyIns.destroy();
+    }
+  });
+</script>
+
+<style lang="less">
+  .dbm-popover-copy {
+    display: inline-block;
+    color: #3a84ff;
+
+    .is-active {
+      display: inline-block !important;
+    }
+  }
+
+  .dbm-popover-copy-panel {
+    & > * {
+      position: relative;
+      display: inline-block;
+      padding: 0 4px;
+      font-size: 12px;
+      line-height: 24px;
+      color: #3a84ff;
+      vertical-align: middle;
+      cursor: pointer;
+      border-radius: 2px;
+
+      &:hover {
+        background-color: #f0f1f5;
+      }
+
+      &:nth-child(n + 2) {
+        margin-left: 9px;
+
+        &::before {
+          position: absolute;
+          top: 3px;
+          left: -5px;
+          display: inline-block;
+          width: 1px;
+          height: 18px;
+          vertical-align: middle;
+          background-color: #f0f1f5;
+          content: '';
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index deff44f091..1834efff1e 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3931,5 +3931,8 @@
   "该规格已被使用，不允许修改": "该规格已被使用，不允许修改",
   "目标": "目标",
   "免审批": "免审批",
+  "复制域名:端口": "复制域名:端口",
+  "复制成功n个域名": "复制成功 {n} 个域名",
+  "复制成功n个域名:端口": "复制成功 {n} 个域名:端口",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/mysql/tendbha.ts b/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
index 91173b5d97..56b2132c80 100644
--- a/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
+++ b/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
@@ -205,19 +205,14 @@ export default class Tendbha extends ClusterBase {
     return displayName;
   }
 
-  get slaveDomainDisplayName() {
-    const port = this.slaves[0]?.port;
-    const displayName = port ? `${this.slave_domain}:${port}` : this.slave_domain;
-    return this.slave_domain ? displayName : '--';
-  }
-
   get slaveEntryList() {
-    return this.cluster_entry.filter((item) => item.role === 'slave_entry').map((item) => item.entry);
-  }
-
-  get slaveEntryDisplayList() {
     const port = this.slaves[0]?.port;
-    return this.slaveEntryList.map((item) => `${item}:${port}`);
+    return this.cluster_entry
+      .filter((item) => item.role === 'slave_entry')
+      .map((item) => ({
+        ...item,
+        port,
+      }));
   }
 
   get operationTagTips() {
diff --git a/dbm-ui/frontend/src/services/model/redis/redis.ts b/dbm-ui/frontend/src/services/model/redis/redis.ts
index 7bb3fe9742..33d7724c1a 100644
--- a/dbm-ui/frontend/src/services/model/redis/redis.ts
+++ b/dbm-ui/frontend/src/services/model/redis/redis.ts
@@ -209,10 +209,14 @@ export default class Redis extends ClusterBase {
     return displayName;
   }
 
-  get slaveDomainDisplayName() {
-    const port = this.cluster_access_port;
-    const displayName = port ? `${this.slave_domain}:${port}` : this.slave_domain;
-    return this.slave_domain ? displayName : '--';
+  get slaveEntryList() {
+    const port = this.redis_slave[0]?.port;
+    return this.cluster_entry
+      .filter((item) => item.role === 'slave_entry')
+      .map((item) => ({
+        ...item,
+        port,
+      }));
   }
 
   get isOnlineCLB() {
diff --git a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha.ts b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha.ts
index 9704773ee3..e35fa7dc32 100644
--- a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha.ts
+++ b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha.ts
@@ -135,10 +135,14 @@ export default class SqlServerHaCluster extends ClusterBase {
     return displayName;
   }
 
-  get slaveDomainDisplayName() {
+  get slaveEntryList() {
     const port = this.slaves[0]?.port;
-    const displayName = port ? `${this.slave_domain}:${port}` : this.slave_domain;
-    return this.slave_domain ? displayName : '--';
+    return this.cluster_entry
+      .filter((item) => item.role === 'slave_entry')
+      .map((item) => ({
+        ...item,
+        port,
+      }));
   }
 
   get allInstanceList() {
diff --git a/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster.ts b/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster.ts
index aca9d4306c..fe7e365ab8 100644
--- a/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster.ts
+++ b/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster.ts
@@ -238,10 +238,14 @@ export default class TendbCluster extends ClusterBase {
     return displayName;
   }
 
-  get slaveDomainDisplayName() {
+  get slaveEntryList() {
     const port = this.spider_slave[0]?.port;
-    const displayName = port ? `${this.slave_domain}:${port}` : this.slave_domain;
-    return this.slave_domain ? displayName : '--';
+    return this.cluster_entry
+      .filter((item) => item.role === 'slave_entry')
+      .map((item) => ({
+        ...item,
+        port,
+      }));
   }
 
   get operationTagTips() {
diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/MasterDomainColumn.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/MasterDomainColumn.vue
index a49f2ec828..730c832367 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/MasterDomainColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/MasterDomainColumn.vue
@@ -25,60 +25,56 @@
       </RenderHeadCopy>
     </template>
     <template #default="{ data }: { data: IRowData }">
-      <TextOverflowLayout>
-        <AuthButton
-          :action-id="viewActionId"
-          :permission="Boolean(_.get(data.permission, viewActionId))"
-          :resource="data.id"
-          text
-          theme="primary"
-          @click="handleToDetails(data.id)">
-          {{ data.masterDomainDisplayName }}
-        </AuthButton>
-        <template #append>
-          <slot
-            name="append"
-            v-bind="{ data: data }" />
-          <RenderOperationTag
-            v-for="(item, index) in data.operationTagTips"
-            :key="index"
-            class="cluster-tag ml-4"
-            :data="item" />
-          <BkTag
-            v-if="data.isOffline && !data.isStarting"
-            class="ml-4"
-            size="small">
-            {{ t('已禁用') }}
-          </BkTag>
-          <BkTag
-            v-if="data.isNew"
-            class="ml-4"
-            size="small"
-            theme="success">
-            NEW
-          </BkTag>
-          <RenderCellCopy
-            v-if="data.masterDomain"
-            :copy-items="[
-              {
-                value: data.masterDomain,
-                label: t('域名'),
-              },
-              {
-                value: data.masterDomainDisplayName,
-                label: t('域名:端口'),
-              },
-            ]" />
-          <span v-db-console="accessEntryDbConsole">
-            <EditEntryConfig
-              :id="data.id"
-              :biz-id="data.bk_biz_id"
-              :permission="Boolean(data.permission.access_entry_edit)"
-              :resource="dbType || clusterTypeInfos[clusterType].dbType"
-              @success="handleRefresh" />
-          </span>
-        </template>
-      </TextOverflowLayout>
+      <div @mouseenter="handleToolsShow">
+        <TextOverflowLayout>
+          <AuthButton
+            :action-id="viewActionId"
+            :permission="Boolean(_.get(data.permission, viewActionId))"
+            :resource="data.id"
+            text
+            theme="primary"
+            @click="handleToDetails(data.id)">
+            {{ data.masterDomainDisplayName }}
+          </AuthButton>
+          <template #append>
+            <slot
+              name="append"
+              v-bind="{ data: data }" />
+            <RenderOperationTag
+              v-for="(item, index) in data.operationTagTips"
+              :key="index"
+              class="cluster-tag ml-4"
+              :data="item" />
+            <BkTag
+              v-if="data.isOffline && !data.isStarting"
+              class="ml-4"
+              size="small">
+              {{ t('已禁用') }}
+            </BkTag>
+            <BkTag
+              v-if="data.isNew"
+              class="ml-4"
+              size="small"
+              theme="success">
+              NEW
+            </BkTag>
+            <template v-if="isToolsShow">
+              <PopoverCopy>
+                <div @click="handleCopy(data.masterDomain)">{{ t('复制域名') }}</div>
+                <div @click="handleCopy(data.masterDomainDisplayName)">{{ t('复制域名:端口') }}</div>
+              </PopoverCopy>
+              <span v-db-console="accessEntryDbConsole">
+                <EditEntryConfig
+                  :id="data.id"
+                  :biz-id="data.bk_biz_id"
+                  :permission="Boolean(data.permission.access_entry_edit)"
+                  :resource="dbType || clusterTypeInfos[clusterType].dbType"
+                  @success="handleRefresh" />
+              </span>
+            </template>
+          </template>
+        </TextOverflowLayout>
+      </div>
     </template>
   </BkTableColumn>
 </template>
@@ -90,13 +86,15 @@
   import { clusterTypeInfos, ClusterTypes, DBTypes } from '@common/const';
 
   import DbTable from '@components/db-table/index.vue';
+  import PopoverCopy from '@components/popover-copy/Index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import EditEntryConfig from '@views/db-manage/common/cluster-entry-config/Index.vue';
-  import RenderCellCopy from '@views/db-manage/common/render-cell-copy/Index.vue';
   import RenderHeadCopy from '@views/db-manage/common/render-head-copy/Index.vue';
   import RenderOperationTag from '@views/db-manage/common/RenderOperationTagNew.vue';
 
+  import { execCopy } from '@utils';
+
   import useColumnCopy from './hooks/useColumnCopy';
   import type { ClusterModel, ISupportClusterType } from './types';
 
@@ -165,12 +163,23 @@
 
   const columnMinWidth = window.innerWidth < 1366 ? 180 : 280;
 
+  const isToolsShow = ref(false);
   const viewActionId = computed(() => viewActionIdMap[props.clusterType]);
 
   const accessEntryDbConsole = computed(() => dbConsoleMap[props.clusterType]);
 
   const { handleCopySelected, handleCopyAll } = useColumnCopy(props);
 
+  const handleToolsShow = () => {
+    setTimeout(() => {
+      isToolsShow.value = true;
+    }, 1000);
+  };
+
+  const handleCopy = (data: string) => {
+    execCopy(data, t('复制成功'));
+  };
+
   const handleToDetails = (id: number) => {
     emits('go-detail', id);
   };
diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/SlaveDomainColumn.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/SlaveDomainColumn.vue
index 0ee18329b9..a1474efb77 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/SlaveDomainColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/SlaveDomainColumn.vue
@@ -10,11 +10,11 @@
       <RenderHeadCopy
         :config="[
           {
-            field: 'slave_domain',
+            field: 'domain',
             label: t('域名'),
           },
           {
-            field: 'slaveDomainDisplayName',
+            field: 'instance',
             label: t('域名:端口'),
           },
         ]"
@@ -26,28 +26,22 @@
     </template>
     <template #default="{ data }: { data: IRowData }">
       <div
-        v-if="data.slave_domain"
-        style="padding: 6px 0">
-        <TextOverflowLayout
-          v-for="(slaveItem, index) in data.slaveList.slice(0, renderCount)"
-          :key="slaveItem.instance"
-          style="line-height: 26px">
-          {{ data.slave_domain }}:{{ slaveItem.port }}
+        v-if="data.slaveEntryList.length > 0"
+        @mouseenter="handleToolsShow">
+        <TextOverflowLayout>
+          <div
+            v-for="slaveItem in data.slaveEntryList.slice(0, renderCount)"
+            :key="slaveItem.entry"
+            style="line-height: 26px">
+            {{ slaveItem.entry }}:{{ slaveItem.port }}
+          </div>
           <template
-            v-if="index === 0"
+            v-if="isToolsShow"
             #append>
-            <RenderCellCopy
-              v-if="data.slave_domain"
-              :copy-items="[
-                {
-                  value: data.slave_domain,
-                  label: t('域名'),
-                },
-                {
-                  value: data.slaveDomainDisplayName,
-                  label: t('域名:端口'),
-                },
-              ]" />
+            <PopoverCopy>
+              <div @click="handleCopyDomain(data.slaveEntryList)">{{ t('复制域名') }}</div>
+              <div @click="handleCopyDomainPort(data.slaveEntryList)">{{ t('复制域名:端口') }}</div>
+            </PopoverCopy>
             <span v-db-console="accessEntryDbConsole">
               <EditEntryConfig
                 :id="data.id"
@@ -60,8 +54,8 @@
           </template>
         </TextOverflowLayout>
       </div>
-      <span v-if="!data.slave_domain">--</span>
-      <div v-if="data.slaveList.length > renderCount">
+      <span v-if="data.slaveEntryList.length < 1">--</span>
+      <div v-if="data.slaveEntryList.length > renderCount">
         <span>... </span>
         <BkPopover
           placement="top"
@@ -70,11 +64,13 @@
             <I18nT keypath="共n个">{{ data.slaveList.length }}</I18nT>
           </BkTag>
           <template #content>
-            <div
-              v-for="slaveItem in data.slaveList"
-              :key="slaveItem.instance"
-              style="line-height: 20px">
-              {{ data.slave_domain }}:{{ slaveItem.port }}
+            <div style="max-height: 280px; overflow: scroll">
+              <div
+                v-for="slaveItem in data.slaveEntryList"
+                :key="slaveItem.entry"
+                style="line-height: 20px">
+                {{ slaveItem.entry }}:{{ slaveItem.port }}
+              </div>
             </div>
           </template>
         </BkPopover>
@@ -83,19 +79,21 @@
   </BkTableColumn>
 </template>
 <script setup lang="ts" generic="T extends ISupportClusterType">
+  import _ from 'lodash';
   import { computed } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import { clusterTypeInfos, ClusterTypes } from '@common/const';
 
   import DbTable from '@components/db-table/index.vue';
+  import PopoverCopy from '@components/popover-copy/Index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import EditEntryConfig from '@views/db-manage/common/cluster-entry-config/Index.vue';
-  import RenderCellCopy from '@views/db-manage/common/render-cell-copy/Index.vue';
   import RenderHeadCopy from '@views/db-manage/common/render-head-copy/Index.vue';
 
-  import useColumnCopy from './hooks/useColumnCopy';
+  import { execCopy } from '@utils';
+
   import type { ClusterModel } from './types';
 
   export type ISupportClusterType =
@@ -130,13 +128,72 @@
   const { t } = useI18n();
 
   const renderCount = 6;
+  const isToolsShow = ref(false);
   const accessEntryDbConsole = computed(() => dbConsoleMap[props.clusterType]);
 
-  const { handleCopySelected, handleCopyAll } = useColumnCopy(props);
-
   const fetchTableData = () => {
     emits('refresh');
   };
+
+  const handleToolsShow = () => {
+    setTimeout(() => {
+      isToolsShow.value = true;
+    }, 1000);
+  };
+
+  const copyDomain = (data: IRowData['slaveEntryList']) => {
+    const copyList = _.uniq(data.map(({ entry }) => entry));
+    execCopy(
+      copyList.join('\n'),
+      t('复制成功n个域名', {
+        n: copyList.length,
+      }),
+    );
+  };
+
+  const copyDomainPort = (data: IRowData['slaveEntryList']) => {
+    const copyList = _.uniq(data.map(({ entry, port }) => `${entry}:${port}`));
+    execCopy(
+      copyList.join('\n'),
+      t('复制成功n个域名:端口', {
+        n: copyList.length,
+      }),
+    );
+  };
+
+  const handleCopyAll = (field: string) => {
+    if (field === 'domain') {
+      props
+        .getTableInstance()!
+        .getAllData<ClusterModel<T>>()
+        .then((data) => {
+          copyDomain(_.flatten(data.map((item) => item.slaveEntryList)));
+        });
+    } else if (field === 'instance') {
+      props
+        .getTableInstance()!
+        .getAllData<ClusterModel<T>>()
+        .then((data) => {
+          copyDomainPort(_.flatten(data.map((item) => item.slaveEntryList)));
+        });
+    }
+  };
+
+  const handleCopySelected = (field: string) => {
+    if (field === 'domain') {
+      copyDomain(_.flatten(props.selectedList.map((item) => item.slaveEntryList)));
+    } else if (field === 'instance') {
+      copyDomainPort(_.flatten(props.selectedList.map((item) => item.slaveEntryList)));
+    }
+  };
+
+  const handleCopyDomain = (data: IRowData['slaveEntryList']) => {
+    copyDomain(data);
+  };
+
+  const handleCopyDomainPort = (data: IRowData['slaveEntryList']) => {
+    copyDomainPort(data);
+  };
 </script>
 <style lang="less">
   .cluster-table-slave-domain-column {
@@ -153,5 +210,9 @@
       color: @primary-color;
       cursor: pointer;
     }
+
+    .layout-append {
+      align-self: flex-start;
+    }
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/components/base-role-column/components/CellContent.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/components/base-role-column/components/CellContent.vue
index 931d1161af..6ac3ad335c 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/components/base-role-column/components/CellContent.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/components/base-role-column/components/CellContent.vue
@@ -1,12 +1,14 @@
 <template>
   <div>
-    <div class="cluster-list-role-instances-list-box">
+    <div
+      class="cluster-list-role-instances-list-box"
+      @mouseenter="handleToolsShow">
       <div
         v-for="(instanceItem, index) in renderData"
         :key="`${instanceItem.ip}:${instanceItem.port}`"
         :class="{ 'is-unavailable': instanceItem.status === 'unavailable' }">
         <TextOverflowLayout>
-          <span
+          <div
             class="pr-4"
             :style="{
               color:
@@ -22,7 +24,7 @@
               }">
               {{ instanceItem.ip }}:{{ instanceItem.port }}
             </slot>
-          </span>
+          </div>
           <template #append>
             <BkTag
               v-if="instanceItem.status === 'unavailable'"
@@ -35,52 +37,31 @@
                 data: instanceItem,
               }"
               name="nodeTag" />
-            <span
-              v-if="index === 0"
-              ref="copyRootRef">
-              <DbIcon
-                :class="{ 'is-active': isCopyIconClicked }"
-                style="display: none"
-                type="copy" />
+            <span v-if="index === 0 && isToolsShow">
+              <PopoverCopy>
+                <div @click="handleCopyIps">{{ t('复制IP') }}</div>
+                <div @click="handleCopyInstances">{{ t('复制实例') }}</div>
+              </PopoverCopy>
             </span>
           </template>
         </TextOverflowLayout>
       </div>
       <template v-if="data.length < 1"> -- </template>
-      <template v-if="data.length > renderInstanceCount">
-        <BkButton
-          text
-          theme="primary"
+      <template v-if="isShowMore">
+        <span
+          style="color: #3a84ff; cursor: pointer"
           @click="handleShowMore">
           <I18nT keypath="共n个">
             {{ data.length }}
           </I18nT>
           ,
           {{ t('查看更多') }}
-        </BkButton>
+        </span>
       </template>
     </div>
-    <div style="display: none">
-      <div ref="popRef">
-        <BkButton
-          class="cluster-role-instance-copy-btn"
-          text
-          theme="primary"
-          @click="handleCopyIps">
-          {{ t('复制IP') }}
-        </BkButton>
-        <span class="cluster-role-instance-copy-btn-split" />
-        <BkButton
-          class="cluster-role-instance-copy-btn"
-          text
-          theme="primary"
-          @click="handleCopyInstances">
-          {{ t('复制实例') }}
-        </BkButton>
-      </div>
-    </div>
     <BkDialog
-      v-model:is-show="isShowMore"
+      v-if="isToolsShow && isShowMore"
+      v-model:is-show="isShowInstanceDetail"
       render-directive="if"
       :title="title"
       :width="1100">
@@ -104,11 +85,11 @@
   </div>
 </template>
 <script setup lang="ts">
-  import tippy, { type Instance, type SingleTarget } from 'tippy.js';
   import { useI18n } from 'vue-i18n';
 
   import type { ClusterListNode } from '@services/types';
 
+  import PopoverCopy from '@components/popover-copy/Index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
   import { execCopy, messageWarn } from '@utils';
@@ -136,15 +117,18 @@
 
   const renderInstanceCount = 6;
 
-  let tippyIns: Instance;
-
-  const copyRootRef = ref();
-  const popRef = ref();
-  const isShowMore = ref(false);
-  const isCopyIconClicked = ref(false);
+  const isToolsShow = ref(false);
+  const isShowInstanceDetail = ref(false);
+  const isShowMore = computed(() => props.data.length > renderInstanceCount);
 
   const renderData = computed(() => props.data.slice(0, renderInstanceCount));
 
+  const handleToolsShow = () => {
+    setTimeout(() => {
+      isToolsShow.value = true;
+    }, 1000);
+  };
+
   const handleCopyIps = () => {
     const ipList = [...new Set(props.data.map((item) => item.ip))];
     if (ipList.length === 0) {
@@ -170,44 +154,12 @@
   };
 
   const handleShowMore = () => {
-    isShowMore.value = true;
+    isShowInstanceDetail.value = true;
   };
 
   const handleClose = () => {
-    isShowMore.value = false;
+    isShowInstanceDetail.value = false;
   };
-
-  onMounted(() => {
-    if (copyRootRef.value) {
-      tippyIns = tippy(copyRootRef.value[0] as SingleTarget, {
-        content: () => popRef.value,
-        placement: 'top',
-        appendTo: () => document.body,
-        theme: 'light',
-        maxWidth: 'none',
-        trigger: 'mouseenter click',
-        interactive: true,
-        arrow: false,
-        allowHTML: true,
-        zIndex: 999999,
-        hideOnClick: true,
-        onShow() {
-          isCopyIconClicked.value = true;
-        },
-        onHide() {
-          isCopyIconClicked.value = false;
-        },
-      });
-    }
-  });
-
-  onBeforeUnmount(() => {
-    if (tippyIns) {
-      tippyIns.hide();
-      tippyIns.unmount();
-      tippyIns.destroy();
-    }
-  });
 </script>
 
 <style lang="less">
diff --git a/dbm-ui/frontend/src/views/db-manage/common/render-cell-copy/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/render-cell-copy/Index.vue
index 3931687988..99556c5a11 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/render-cell-copy/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/render-cell-copy/Index.vue
@@ -38,7 +38,7 @@
   </div>
 </template>
 
-<script setup lang="ts" generic="T">
+<script setup lang="ts">
   import tippy, { type Instance, type SingleTarget } from 'tippy.js';
   import { useI18n } from 'vue-i18n';
 
diff --git a/dbm-ui/frontend/src/views/db-manage/common/render-head-copy/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/render-head-copy/Index.vue
index cf66f407c8..bba6a04341 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/render-head-copy/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/render-head-copy/Index.vue
@@ -98,7 +98,7 @@
         interactive: true,
         arrow: false,
         allowHTML: true,
-        zIndex: 999999,
+        zIndex: 999,
         hideOnClick: true,
         onShow() {
           isCopyIconClicked.value = true;