fix(frontend): 集群列表从访问入口渲染错误 #9112

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>

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3931,5 +3931,8 @@
   "该规格已被使用，不允许修改": "该规格已被使用，不允许修改",
   "目标": "目标",
   "免审批": "免审批",
+  "复制域名:端口": "复制域名:端口",
+  "复制成功n个域名": "复制成功 {n} 个域名",
+  "复制成功n个域名:端口": "复制成功 {n} 个域名:端口",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

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() {

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() {

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() {

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() {

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);
   };