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

ygcyao · Jan 17, 2025 · eaa0e5e · eaa0e5e
1 parent 108eeb5
commit eaa0e5e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 38 deletions.
diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/ClusterNameColumn.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-table-column/ClusterNameColumn.vue
@@ -19,46 +19,52 @@
       </RenderHeadCopy>
     </template>
     <template #default="{ data }: { data: TendnclusterModel }">
-      <TextOverflowLayout>
-        {{ data.cluster_name }}
-        <template #append>
-          <BkPopover v-if="data.temporary_info?.source_cluster">
-            <DbIcon
-              style="margin-left: 5px; color: #1cab88; cursor: pointer"
-              type="clone" />
-            <template #content>
-              <div class="struct-cluster-source-popover">
-                <div class="title">{{ t('构造集群') }}</div>
-                <div class="item-row">
-                  <div class="label">{{ t('构造源集群') }}：</div>
-                  <div class="content">{{ data.temporary_info?.source_cluster }}</div>
-                </div>
-                <div class="item-row">
-                  <div class="label">{{ t('关联单据') }}：</div>
-                  <div
-                    class="content"
-                    style="color: #3a84ff"
-                    @click="() => handleGoTicket(data.temporary_info.ticket_id)">
-                    {{ data.temporary_info.ticket_id }}
+      <div @mouseenter="handleToolsShow">
+        <TextOverflowLayout>
+          {{ data.cluster_name }}
+          <template
+            v-if="isToolsShow"
+            #append>
+            <BkPopover v-if="data.temporary_info?.source_cluster">
+              <DbIcon
+                style="margin-left: 5px; color: #1cab88; cursor: pointer"
+                type="clone" />
+              <template #content>
+                <div class="struct-cluster-source-popover">
+                  <div class="title">{{ t('构造集群') }}</div>
+                  <div class="item-row">
+                    <div class="label">{{ t('构造源集群') }}：</div>
+                    <div class="content">{{ data.temporary_info?.source_cluster }}</div>
+                  </div>
+                  <div class="item-row">
+                    <div class="label">{{ t('关联单据') }}：</div>
+                    <div
+                      class="content"
+                      style="color: #3a84ff"
+                      @click="() => handleGoTicket(data.temporary_info.ticket_id)">
+                      {{ data.temporary_info.ticket_id }}
+                    </div>
                   </div>
                 </div>
-              </div>
-            </template>
-          </BkPopover>
-          <DbIcon
-            v-bk-tooltips="t('复制集群名称')"
-            type="copy"
-            @click="() => handleCopyClusterName(data.cluster_name)" />
-        </template>
-      </TextOverflowLayout>
-      <TextOverflowLayout>
-        <span style="color: #c4c6cc">{{ data.cluster_alias || '--' }}</span>
-        <template #append>
-          <UpdateClusterAliasName
-            :data="data"
-            @success="handleUpdateAliasSuccess" />
-        </template>
-      </TextOverflowLayout>
+              </template>
+            </BkPopover>
+            <DbIcon
+              v-bk-tooltips="t('复制集群名称')"
+              type="copy"
+              @click="handleCopyClusterName(data.cluster_name)" />
+          </template>
+        </TextOverflowLayout>
+        <TextOverflowLayout>
+          <span style="color: #c4c6cc">{{ data.cluster_alias || '--' }}</span>
+          <template
+            v-if="isToolsShow"
+            #append>
+            <UpdateClusterAliasName
+              :data="data"
+              @success="handleUpdateAliasSuccess" />
+          </template>
+        </TextOverflowLayout>
+      </div>
     </template>
   </BkTableColumn>
 </template>
@@ -97,8 +103,16 @@
   const { t } = useI18n();
   const router = useRouter();
 
+  const isToolsShow = ref(false);
+
   const { handleCopySelected, handleCopyAll } = useColumnCopy(props);
 
+  const handleToolsShow = () => {
+    setTimeout(() => {
+      isToolsShow.value = true;
+    }, 1000);
+  };
+
   const handleGoTicket = (billId: number) => {
     const route = router.resolve({
       name: 'bizTicketManage',

diff --git a/...end/src/views/db-manage/common/cluster-table-column/components/UpdateClusterAliasName.vue b/...end/src/views/db-manage/common/cluster-table-column/components/UpdateClusterAliasName.vue
@@ -131,6 +131,10 @@
 
     &.is-active {
       display: block;
+
+      * {
+        display: block !important;
+      }
     }
   }
 </style>