From 606c37ffaf820493ad198a32d20afbd942a5a437 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Mon, 23 Sep 2024 11:39:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E9=9B=86=E7=BE=A4=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=B1=95=E7=A4=BA=E4=BC=98=E5=8C=96=20#6834?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mysql/ha-cluster-list/components/List.vue |  15 ++-
 .../components/RenderEntries.vue              | 104 ++++++++++++++++++
 2 files changed, 111 insertions(+), 8 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/RenderEntries.vue

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue
index 4e294d9a8e..346f62941c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue
@@ -173,6 +173,8 @@
     isRecentDays,
   } from '@utils';
 
+  import RenderEntries from './RenderEntries.vue';
+
   interface ColumnData {
     cell: string,
     data: TendbhaModel
@@ -533,11 +535,9 @@
           {t('从访问入口')}
         </RenderHeadCopy>
       ),
-      render: ({ data }: ColumnData) => data.slaveEntryList.length === 0 ? '--' : data.slaveEntryList.map((item, index) => (
-        <TextOverflowLayout class="slave-entry">
-          {{
-            default: () => item,
-            append: () => index === 0 && (
+      render: ({ data }: ColumnData) => <RenderEntries data={data.slaveEntryList}>
+        {{
+          append: ({ index }: { index: number }) => index === 0 && (
             <>
               <RenderCellCopy copyItems={
                 [
@@ -559,9 +559,8 @@
                 resource={DBTypes.MYSQL}
                 onSuccess={fetchData} />
             </>)
-          }}
-        </TextOverflowLayout>
-      ))
+        }}
+        </RenderEntries>
     },
     {
       label: 'Proxy',
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/RenderEntries.vue b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/RenderEntries.vue
new file mode 100644
index 0000000000..c7a6cea7f4
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/RenderEntries.vue
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <div
+      ref="rootRef"
+      class="render-entries"
+      :style="`width: ${width}px`">
+      <div
+        v-for="(item, index) in data.slice(0, overflowMaxCount)"
+        :key="item"
+        class="render-entries-item">
+        <div class="render-entries-row">
+          <div ref="itemRef">{{ item }}</div>
+          <slot
+            :data="item"
+            :index="index"
+            name="append" />
+        </div>
+      </div>
+      <div
+        v-if="data.length > overflowMaxCount"
+        class="icon-box">
+        <DbIcon type="more" />
+      </div>
+    </div>
+    <div style="display: none">
+      <div ref="popRef">
+        <div
+          v-for="item in data"
+          :key="item">
+          <span>{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import tippy, { type Instance, type SingleTarget } from 'tippy.js';
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+  interface Props {
+    data: string[];
+  }
+
+  const props = defineProps<Props>();
+
+  const rootRef = ref();
+  const popRef = ref();
+  const itemRef = ref();
+  const width = ref(0);
+  let tippyIns: Instance | undefined;
+  const overflowMaxCount = 3;
+
+  onMounted(() => {
+    if (itemRef.value) {
+      const widths = (itemRef.value || []).map((item) => item.clientWidth);
+      width.value = Math.max(...widths);
+    }
+    if (props.data.length > overflowMaxCount) {
+      tippyIns = tippy(rootRef.value as SingleTarget, {
+        content: popRef.value,
+        placement: 'top',
+        appendTo: () => document.body,
+        theme: 'db-tippy',
+        maxWidth: 'none',
+        trigger: 'mouseenter',
+        interactive: true,
+        arrow: true,
+        offset: [0, 0],
+        zIndex: 999999,
+        hideOnClick: true,
+      });
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (tippyIns) {
+      tippyIns.hide();
+      tippyIns.unmount();
+      tippyIns.destroy();
+      tippyIns = undefined;
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+  .render-entries {
+    padding: 8px 0;
+
+    .render-entries-item {
+      line-height: 22px;
+
+      .render-entries-row {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .icon-box {
+      display: inline-block;
+      transform: rotate(90deg);
+    }
+  }
+</style>