From ab87addebc00351f1ec66d2765e57434680c1545 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Tue, 24 Sep 2024 10:39:47 +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=20#=20Rev?=
 =?UTF-8?q?iewed,=20transaction=20id:=2019213?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cluster-capacity-usage-rate/Index.vue     |   4 +-
 .../components/cluster-entry-config/Index.vue | 153 ++-
 .../cluster-entry-config/MultipleInput.vue    | 126 ---
 .../cluster-entry-config/RenderBindIps.vue    | 228 +++++
 .../render-instances/RenderInstances.vue      | 105 +-
 dbm-ui/frontend/src/locales/zh-cn.json        |   3 +-
 .../src/services/model/mysql/tendbha.ts       |  12 +
 .../model/sqlserver/sqlserver-ha-cluster.ts   |   1 +
 .../sqlserver/sqlserver-single-cluster.ts     |   4 +
 dbm-ui/frontend/src/services/source/spider.ts |  11 +
 dbm-ui/frontend/src/types/auto-imports.d.ts   |   1 +
 .../list/components/list/Index.vue            |  32 +-
 .../hdfs/list/components/list/Index.vue       |  35 +-
 .../kafka/list/components/list/Index.vue      |  33 +-
 .../mysql/ha-cluster-list/components/List.vue | 180 ++--
 .../components/RenderEntries.vue              | 104 ++
 .../ha-instance-list/components/List.vue      |  80 +-
 .../single-cluster-list/components/List.vue   |  36 +-
 .../pulsar/list/components/list/Index.vue     |  35 +-
 .../redis/list-ha/components/list/Index.vue   |  53 +-
 .../redis/list/components/list/Index.vue      | 960 +++++++++---------
 .../ha-cluster-list/components/List.vue       |  70 +-
 .../single-cluster/components/List.vue        |  32 +-
 .../list-instance/components/list/Index.vue   |  86 +-
 .../list/components/list/Index.vue            | 283 +++---
 25 files changed, 1372 insertions(+), 1295 deletions(-)
 delete mode 100644 dbm-ui/frontend/src/components/cluster-entry-config/MultipleInput.vue
 create mode 100644 dbm-ui/frontend/src/components/cluster-entry-config/RenderBindIps.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/RenderEntries.vue

diff --git a/dbm-ui/frontend/src/components/cluster-capacity-usage-rate/Index.vue b/dbm-ui/frontend/src/components/cluster-capacity-usage-rate/Index.vue
index f1e2121cd0..89d25d275e 100644
--- a/dbm-ui/frontend/src/components/cluster-capacity-usage-rate/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-capacity-usage-rate/Index.vue
@@ -48,7 +48,7 @@
     }
 
     let color = '#2DCB56';
-    const { used, total, in_use: inUse } = props.clusterStats;
+    const { used = 0, total = 0, in_use: inUse = 0 } = props.clusterStats;
 
     if (inUse >= 90) {
       color = '#EA3636';
@@ -71,8 +71,8 @@
     align-items: center;
 
     .usage-rate {
-      color: #63656e;
       font-weight: 700;
+      color: #63656e;
     }
 
     .usage-text {
diff --git a/dbm-ui/frontend/src/components/cluster-entry-config/Index.vue b/dbm-ui/frontend/src/components/cluster-entry-config/Index.vue
index 23e448d1e2..6f8d6b8314 100644
--- a/dbm-ui/frontend/src/components/cluster-entry-config/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-entry-config/Index.vue
@@ -12,12 +12,19 @@
 -->
 
 <template>
+  <DbIcon
+    v-bk-tooltips="t('查看域名/IP对应关系')"
+    type="visible1"
+    @click="() => (isShow = true)" />
   <BkDialog
+    class="entry-config-dialog"
+    draggable
     :is-show="isShow"
     :quick-close="false"
-    :title="t('修改入口配置')"
+    :show-mask="false"
+    :title="t('查看域名/IP对应关系')"
     :width="640"
-    @closed="handleClose">
+    @closed="() => (isShow = false)">
     <BkLoading :loading="isLoading">
       <BkTable
         ref="tableRef"
@@ -27,57 +34,21 @@
         :columns="columns"
         :data="tableData" />
     </BkLoading>
-    <template #footer>
-      <BkButton
-        class="mr-8"
-        style="width: 64px"
-        theme="primary"
-        @click="handleConfirm">
-        {{ t('保存') }}
-      </BkButton>
-      <BkButton
-        style="width: 64px"
-        @click="handleClose">
-        {{ t('取消') }}
-      </BkButton>
-    </template>
   </BkDialog>
 </template>
 
-<script
-  setup
-  lang="tsx"
-  generic="
-    T extends
-      | RedisModel
-      | SpiderModel
-      | EsModel
-      | HdfsModel
-      | KafkaModel
-      | PulsarModel
-      | SqlServerHaClusterDetailModel
-      | SqlServerSingleClusterDetailModel
-  ">
+<script setup lang="tsx">
+  import type { JSX } from 'vue/jsx-runtime';
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
-  import EsModel from '@services/model/es/es';
-  import HdfsModel from '@services/model/hdfs/hdfs';
-  import KafkaModel from '@services/model/kafka/kafka';
-  import PulsarModel from '@services/model/pulsar/pulsar';
-  import RedisModel from '@services/model/redis/redis';
-  import SpiderModel from '@services/model/spider/spider';
-  import SqlServerHaClusterDetailModel from '@services/model/sqlserver/sqlserver-ha-cluster-detail';
-  import SqlServerSingleClusterDetailModel from '@services/model/sqlserver/sqlserver-single-cluster-detail';
-  import { updateClusterEntryConfig } from '@services/source/clusterEntry';
+  import type { DBTypes } from '@common/const';
 
-  import { messageError, messageSuccess } from '@utils';
-
-  import MultipleInput, { checkIp } from './MultipleInput.vue';
+  import RenderBindIps from './RenderBindIps.vue';
 
   export interface RowData {
     type: string,
     entry: string,
+    role: string,
     ips: string,
     port: number,
   }
@@ -88,12 +59,28 @@
 
   interface Props {
     id?: number
-    getDetailInfo: (params: any) => Promise<T>
+    resource: DBTypes;
+    permission: boolean;
+    renderEntry?: (data: RowData) => JSX.Element | string;
+    getDetailInfo: (params: any) => Promise<{
+      cluster_entry_details: {
+        cluster_entry_type: string,
+        entry: string,
+        role: string,
+        target_details: {
+          ip: string,
+          port: number
+        }[]
+      }[]
+    }>;
+    sort?: (data: RowData[]) => RowData[];
   }
 
-  type UpdateClusterEntryConfigParams = ServiceParameters<typeof updateClusterEntryConfig>;
-
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    id: 0,
+    renderEntry: (data: RowData) => data.entry,
+    sort: (data: RowData[]) => data,
+  });
 
   const emits = defineEmits<Emits>();
 
@@ -111,33 +98,29 @@
     {
       label: t('访问入口'),
       field: 'entry',
+      width: 263,
       showOverflowTooltip: true,
+      render: ({ data }: { data: RowData }) => props.renderEntry(data),
     },
     {
       label: 'Bind IP',
       field: 'ips',
-      render: ({ data }: {data: RowData}) => <MultipleInput v-model={data.ips} disabled={data.type !== 'dns'} />,
+      width: 263,
+      render: ({ data }: {data: RowData}) => (
+        <RenderBindIps
+          v-model={props.id}
+          data={data}
+          permission={props.permission}
+          resource={props.resource}
+          onSuccess={handleSuccess} />
+      )
     },
   ];
 
-  const { run: runUpdateClusterEntryConfig } = useRequest(updateClusterEntryConfig, {
-    manual: true,
-    onSuccess: () => {
-      messageSuccess(t('修改成功'));
-      emits('success');
-      handleClose();
-    },
-    onError: () => {
-      messageError(t('修改失败'));
-    },
-  });
-
-  watch(() => props.id, (id) => {
-    if (id) {
+  watch(isShow, () => {
+    if (isShow.value && props.id !== 0) {
       fetchResources();
     }
-  }, {
-    immediate: true,
   });
 
   const fetchResources = () => {
@@ -145,13 +128,15 @@
     props.getDetailInfo({
       id: props.id,
     })
-      .then((res: T) => {
-        tableData.value = res.cluster_entry_details.map(item => ({
+      .then((res) => {
+        const data = res.cluster_entry_details.map(item => ({
           type: item.cluster_entry_type,
           entry: item.entry,
+          role: item.role,
           ips: item.target_details.map(row => row.ip).join('\n'),
           port: item.target_details[0].port,
         }));
+        tableData.value = props.sort(data);
       })
       .catch(() => {
         tableData.value = [];
@@ -163,33 +148,9 @@
 
   const generateCellClass = (cell: { field: string}) => (cell.field === 'ips' ? 'entry-config-ips-column' : '');
 
-  const handleClose = () => {
-    isShow.value = false;
-  };
-
-  const handleConfirm = () => {
-    if (!props.id) {
-      return;
-    }
-    const dnsData = tableData.value.filter(item => item.type === 'dns');
-    const isChecked = dnsData.every(item => item.ips.split('\n').every(ip => checkIp(ip)));
-    if (isChecked) {
-      const details = dnsData.reduce((results, item) => {
-        const obj = {
-          cluster_entry_type: item.type,
-          domain_name: item.entry,
-          target_instances: item.ips.split('\n').map(row => `${row}#${item.port}`),
-        };
-        results.push(obj);
-        return results;
-      }, [] as UpdateClusterEntryConfigParams['cluster_entry_details']);
-      const params = {
-        cluster_id: props.id,
-        cluster_entry_details: details,
-      };
-      runUpdateClusterEntryConfig(params);
-    }
-  };
+  const handleSuccess = () => {
+    emits('success');
+  }
 </script>
 
 <style lang="less" scoped>
@@ -204,4 +165,10 @@
       line-height: normal !important;
     }
   }
+
+  .entry-config-dialog {
+    .bk-modal-footer {
+      display: none;
+    }
+  }
 </style>
diff --git a/dbm-ui/frontend/src/components/cluster-entry-config/MultipleInput.vue b/dbm-ui/frontend/src/components/cluster-entry-config/MultipleInput.vue
deleted file mode 100644
index 740f316609..0000000000
--- a/dbm-ui/frontend/src/components/cluster-entry-config/MultipleInput.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <div
-    class="entry-config-multi"
-    :class="{ 'is-error': isError }">
-    <BkInput
-      v-model="modelValue"
-      :disabled="disabled"
-      placeholder=" "
-      :rows="rows"
-      style="resize: none"
-      type="textarea"
-      @blur="handleBlur"
-      @input="handleInput" />
-    <div
-      v-show="isError"
-      class="error-box">
-      <div
-        v-for="(item, index) in errorList"
-        :key="index"
-        class="tip-box">
-        <DbIcon
-          v-if="!item.isChecked"
-          v-bk-tooltips="item.tip"
-          class="error-icon"
-          type="exclamation-fill" />
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import { ipv4 } from '@common/regex';
-
-  export const checkIp = (value: string) => ipv4.test(value);
-</script>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  interface Props {
-    disabled?: boolean;
-  }
-
-  interface ErrorItem {
-    isChecked: boolean;
-    tip: string;
-  }
-
-  defineProps<Props>();
-
-  const modelValue = defineModel<string>({
-    default: '',
-  });
-
-  const { t } = useI18n();
-
-  const isError = ref(false);
-  const errorList = ref<ErrorItem[]>([]);
-
-  const rows = computed(() => modelValue.value.split('\n').length);
-
-  const handleBlur = () => {
-    const inputArr = modelValue.value.split('\n');
-    const resultArr: ErrorItem[] = [];
-    inputArr.forEach((item) => {
-      const isChecked = checkIp(item);
-      if (!isChecked) {
-        isError.value = true;
-      }
-      resultArr.push({
-        isChecked,
-        tip: !isChecked && item === '' ? t('IP 不能为空') : t('IP 输入有误'),
-      });
-    });
-    errorList.value = resultArr;
-  };
-
-  const handleInput = () => {
-    isError.value = false;
-  };
-</script>
-<style lang="less" scoped>
-  .entry-config-multi {
-    position: relative;
-
-    .bk-textarea {
-      border-color: transparent;
-      border-radius: 0;
-    }
-
-    .is-focused {
-      border-color: #3a84ff;
-    }
-
-    :deep(textarea) {
-      min-height: 42px !important;
-      padding: 12px 18px;
-      border-radius: 0;
-    }
-
-    .error-box {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 25px;
-      height: 100%;
-      padding-top: 12px;
-
-      .tip-box {
-        display: flex;
-        height: 18px;
-        padding-top: 3.5px;
-        justify-content: center;
-
-        .error-icon {
-          font-size: 14px;
-          color: #ea3636;
-        }
-      }
-    }
-  }
-
-  .is-error {
-    :deep(textarea) {
-      background-color: #fff0f1;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/components/cluster-entry-config/RenderBindIps.vue b/dbm-ui/frontend/src/components/cluster-entry-config/RenderBindIps.vue
new file mode 100644
index 0000000000..e13f1b5db4
--- /dev/null
+++ b/dbm-ui/frontend/src/components/cluster-entry-config/RenderBindIps.vue
@@ -0,0 +1,228 @@
+<template>
+  <div
+    v-if="!activeInput"
+    class="entry-config-display">
+    <p
+      v-for="(row, index) in localIps"
+      :key="row"
+      class="entry-config-display-item">
+      {{ row }}
+      <AuthButton
+        v-if="index === 0"
+        action-id="access_entry_edit"
+        :permission="permission"
+        :resource="resource"
+        text
+        theme="primary"
+        @click="handleActiveInput">
+        <DbIcon type="edit" />
+      </AuthButton>
+    </p>
+  </div>
+  <div
+    v-else
+    class="entry-config-multi"
+    :class="{ 'is-error': isError }">
+    <BkInput
+      ref="inputRef"
+      v-model="localValue"
+      placeholder=" "
+      :rows="localIps.length"
+      style="resize: none"
+      type="textarea"
+      @blur="handleBlur"
+      @input="handleInput" />
+    <div
+      v-show="isError"
+      class="error-box">
+      <div
+        v-for="(item, index) in errorList"
+        :key="index"
+        class="tip-box">
+        <DbIcon
+          v-if="!item.isChecked"
+          v-bk-tooltips="item.tip"
+          class="error-icon"
+          type="exclamation-fill" />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import type { DBTypes } from '@common/const';
+
+  import type { RowData } from './Index.vue';
+
+  interface Props {
+    data: RowData;
+    resource: DBTypes;
+    permission: boolean;
+  }
+
+  interface Emits {
+    (e: 'success'): void;
+  }
+
+  interface ErrorItem {
+    isChecked: boolean;
+    tip: string;
+  }
+</script>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { updateClusterEntryConfig } from '@services/source/clusterEntry';
+
+  import { ipv4 } from '@common/regex';
+
+  import { messageSuccess } from '@utils';
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<number>({
+    default: 0,
+  });
+
+  const { t } = useI18n();
+
+  const inputRef = ref();
+  const activeInput = ref(false);
+  const isError = ref(false);
+  const errorList = ref<ErrorItem[]>([]);
+  const localValue = ref('');
+  const localIps = ref<string[]>([]);
+
+  const { run: runUpdateClusterEntryConfig } = useRequest(updateClusterEntryConfig, {
+    manual: true,
+    onSuccess: () => {
+      messageSuccess(t('修改成功'));
+      emits('success');
+    },
+    onError: () => {
+      localValue.value = props.data.ips;
+      localIps.value = props.data.ips.split('\n');
+    },
+  });
+
+  watch(
+    () => props.data,
+    () => {
+      localValue.value = props.data.ips;
+      localIps.value = props.data.ips.split('\n');
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleActiveInput = () => {
+    activeInput.value = true;
+    nextTick(() => {
+      inputRef.value.focus();
+    });
+  };
+
+  const executeUpdate = () => {
+    const params = {
+      cluster_id: modelValue.value,
+      cluster_entry_details: [
+        {
+          cluster_entry_type: props.data.type,
+          domain_name: props.data.entry,
+          target_instances: localValue.value.split('\n').map((row) => `${row}#${props.data.port}`),
+        },
+      ],
+    };
+    runUpdateClusterEntryConfig(params);
+  };
+
+  const handleBlur = () => {
+    if (localValue.value === props.data.ips) {
+      activeInput.value = false;
+      return;
+    }
+    const inputArr = localValue.value.split('\n');
+    const resultArr: ErrorItem[] = [];
+    inputArr.forEach((item) => {
+      const isChecked = ipv4.test(item);
+      if (!isChecked) {
+        isError.value = true;
+      }
+      resultArr.push({
+        isChecked,
+        tip: !isChecked && item === '' ? t('IP 不能为空') : t('IP 输入有误'),
+      });
+    });
+    errorList.value = resultArr;
+    if (!isError.value) {
+      activeInput.value = false;
+      executeUpdate();
+    }
+  };
+
+  const handleInput = () => {
+    isError.value = false;
+  };
+</script>
+<style lang="less" scoped>
+  .entry-config-display {
+    padding: 13px 19px;
+
+    .entry-config-display-item {
+      line-height: 18px;
+    }
+
+    .db-icon-edit {
+      cursor: pointer;
+    }
+  }
+
+  .entry-config-multi {
+    position: relative;
+
+    .bk-textarea {
+      border-color: transparent;
+      border-radius: 0;
+    }
+
+    .is-focused {
+      border-color: #3a84ff;
+    }
+
+    :deep(textarea) {
+      min-height: 42px !important;
+      padding: 12px 18px;
+      border-radius: 0;
+    }
+
+    .error-box {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 25px;
+      height: 100%;
+      padding-top: 12px;
+
+      .tip-box {
+        display: flex;
+        height: 18px;
+        padding-top: 3.5px;
+        justify-content: center;
+
+        .error-icon {
+          font-size: 14px;
+          color: #ea3636;
+        }
+      }
+    }
+  }
+
+  .is-error {
+    :deep(textarea) {
+      background-color: #fff0f1;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue b/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
index c98879269e..742d6ed421 100644
--- a/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
+++ b/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
@@ -35,6 +35,9 @@
             size="small">
             {{ t('不可用') }}
           </BkTag>
+          <slot
+            :data="inst"
+            name="append" />
           <template v-if="index === 0">
             <DbIcon
               ref="copyRootRef"
@@ -116,16 +119,23 @@
     </template>
   </BkDialog>
 </template>
-<script lang="tsx">
-  interface InstanceListData {
-    instance_address: string;
-    role: string;
-    status: string;
-    create_at: string;
-  }
-</script>
-<script setup lang="tsx" generic="T extends InstanceListData">
+
+<script
+  setup
+  lang="tsx"
+  generic="
+    T extends {
+      bk_instance_id: number;
+      create_at: string;
+      instance_address: string;
+      ip: string;
+      port: number;
+      role: string;
+      status: string;
+    }
+  ">
   import tippy, { type Instance, type SingleTarget } from 'tippy.js';
+  import type { UnwrapRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import type {
@@ -147,31 +157,18 @@
 
   import { messageWarn } from '@utils';
 
-  interface InstanceData {
-    bk_instance_id: number,
-    ip: string,
-    name: string,
-    port: number,
-    status: string
-  }
-
-
-  interface DialogState {
-    isShow: boolean,
-    keyword: string,
-    data: Array<InstanceListData>,
-  }
-
   interface Props {
-    title: string,
-    role: string,
-    data: Array<InstanceData>;
-    clusterId: number,
-    dataSource: (params: Record<string, any>) => Promise<ListBase<T[]>>,
-    highlightIps?: string[],
+    title: string;
+    role: string;
+    data: T[];
+    clusterId: number;
+    dataSource: (params: Record<string, any>) => Promise<ListBase<T[]>>;
+    highlightIps?: string[];
   }
+
   const props = withDefaults(defineProps<Props>(), {
     highlightIps: () => ([]),
+    tagKeyConfig: () => ([]),
   });
 
   const copy = useCopy();
@@ -187,10 +184,10 @@
   const renderData = computed(() => props.data.slice(0, 10));
   const hasMore = computed(() => props.data.length > 10);
 
-  const dialogState = reactive<DialogState>({
+  const dialogState = reactive({
     isShow: false,
     keyword: '',
-    data: [],
+    data: [] as T[],
   });
 
   const columns = [
@@ -241,8 +238,8 @@
     fetchInstance();
   }
 
-  const handleRequestFinished = (data: InstanceListData[]) => {
-    dialogState.data = data;
+  const handleRequestFinished = (data: T[]) => {
+    dialogState.data = data as UnwrapRef<T[]>;
   }
 
   /**
@@ -295,25 +292,27 @@
 
   onMounted(() => {
     nextTick(() => {
-      tippyIns = tippy(copyRootRef.value[0].$el as SingleTarget, {
-        content: popRef.value[0],
-        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;
-        },
-      });
+      if (copyRootRef.value) {
+        tippyIns = tippy(copyRootRef.value[0].$el as SingleTarget, {
+          content: popRef.value[0],
+          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;
+          },
+        });
+      }
     });
   });
 
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index f3df2c373e..d550a30814 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -2318,7 +2318,6 @@
     "授权 IP": "授权 IP",
     "授权 IP 不能为空": "授权 IP 不能为空",
     "复制成功n个IP": "复制成功 {n} 个 IP",
-    "修改入口配置": "修改入口配置",
     "IP 输入有误": "IP 输入有误",
     "修改成功": "修改成功",
     "修改失败": "修改失败",
@@ -3417,6 +3416,7 @@
     "支持 %（指代任意长度字符串）,*（指代全部）2个通配符": "支持 %（指代任意长度字符串）,*（指代全部）2个通配符",
     "单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入": "单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入",
     "包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用",
+    "查看域名/IP对应关系": "查看域名/IP对应关系",
     "确认继续所有人工确认节点": "确认继续所有人工确认节点",
     "任务": "任务",
     "Redis版本": "Redis版本",
@@ -3435,5 +3435,6 @@
     "不允许输入系统库和特殊库，如mysql、sys 等": "不允许输入系统库和特殊库，如mysql、sys 等",
     "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符": "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符",
     "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用",
+    "复制所属集群": "复制所属集群",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/mysql/tendbha.ts b/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
index 2a740658f3..089535164b 100644
--- a/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
+++ b/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
@@ -23,6 +23,7 @@ interface TendbhaInstance {
   bk_instance_id: number;
   instance: string;
   ip: string;
+  is_stand_by: boolean;
   name: string;
   phase: string;
   port: number;
@@ -61,6 +62,11 @@ export default class Tendbha {
   bk_biz_name: string;
   bk_cloud_id: number;
   bk_cloud_name: string;
+  cluster_entry: {
+    cluster_entry_type: string;
+    entry: string;
+    role: 'master_entry' | 'slave_entry';
+  }[];
   cluster_name: string;
   cluster_stats: Record<'used' | 'total' | 'in_use', number>;
   cluster_type: string;
@@ -104,6 +110,7 @@ export default class Tendbha {
     this.bk_biz_name = payload.bk_biz_name || '';
     this.bk_cloud_id = payload.bk_cloud_id || 0;
     this.bk_cloud_name = payload.bk_cloud_name || '';
+    this.cluster_entry = payload.cluster_entry || [];
     this.cluster_name = payload.cluster_name || '';
     this.cluster_stats = payload.cluster_stats || {};
     this.cluster_type = payload.cluster_type || '';
@@ -219,6 +226,11 @@ export default class Tendbha {
     return this.slave_domain ? displayName : '--';
   }
 
+  get slaveEntryList() {
+    const port = this.slaves[0]?.port;
+    return this.cluster_entry.filter((item) => item.role === 'slave_entry').map((item) => `${item.entry}:${port}`);
+  }
+
   get createAtDisplay() {
     return utcDisplayTime(this.create_at);
   }
diff --git a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-cluster.ts b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-cluster.ts
index 2108a18907..ff4f830112 100644
--- a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-cluster.ts
+++ b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-cluster.ts
@@ -85,6 +85,7 @@ export default class SqlServerHaCluster extends TimeBaseClassModel {
     title: string;
   }>;
   permission: {
+    access_entry_edit: boolean;
     sqlserver_view: boolean;
   };
   phase: string;
diff --git a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-single-cluster.ts b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-single-cluster.ts
index ede8189962..84a868f449 100644
--- a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-single-cluster.ts
+++ b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-single-cluster.ts
@@ -67,6 +67,10 @@ export default class SqlServerSingleCluster extends TimeBaseClassModel {
     ticket_type: string;
     title: string;
   }>;
+  permission: {
+    access_entry_edit: boolean;
+    sqlserver_view: boolean;
+  };
   phase: string;
   phase_name: string;
   region: string;
diff --git a/dbm-ui/frontend/src/services/source/spider.ts b/dbm-ui/frontend/src/services/source/spider.ts
index b6ae99812e..3ccff6b26b 100644
--- a/dbm-ui/frontend/src/services/source/spider.ts
+++ b/dbm-ui/frontend/src/services/source/spider.ts
@@ -209,3 +209,14 @@ export const getList = function (params: Record<string, any>) {
 export const getDetail = function (params: { id: number }) {
   return http.get<SpiderModel>(`${getRootPath()}/${params.id}/`).then((data) => new SpiderModel(data));
 };
+
+/**
+ * 获取集群primary关系映射
+ */
+export const getSpiderClusterPrimary = (params: { cluster_ids: number[] }) =>
+  http.post<
+    {
+      cluster_id: number;
+      primary: string;
+    }[]
+  >(`${getRootPath()}/get_cluster_primary/`, params);
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
index 79be9ca2a4..6bc2ae2a45 100644
--- a/dbm-ui/frontend/src/types/auto-imports.d.ts
+++ b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: (typeof import('vue'))['EffectScope'];
diff --git a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
index 9fbceac420..c008ac0335 100644
--- a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
@@ -97,10 +97,6 @@
       </template>
     </BkDialog>
   </div>
-  <EditEntryConfig
-    :id="clusterId"
-    v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getEsDetail" />
 </template>
 <script setup lang="tsx">
   import { InfoBox, Message } from 'bkui-vue';
@@ -133,6 +129,7 @@
 
   import {
     ClusterTypes,
+    DBTypes,
     UserPersonalSettings,
   } from '@common/const';
 
@@ -275,7 +272,6 @@
   const isShowShrink = ref(false);
   const isShowPassword = ref(false);
   const isInit = ref(true);
-  const showEditEntryConfig = ref(false);
   const selected = ref<EsModel[]>([])
   const operationData = shallowRef<EsModel>();
   const tableDataActionLoadingMap = shallowRef<Record<number, boolean>>({});
@@ -377,17 +373,14 @@
                     ]
                   } />
                 )}
-                <auth-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  v-db-console="es.clusterManage.modifyEntryConfiguration"
-                  action-id="access_entry_edit"
-                  resource="es"
+                <span v-db-console="es.clusterManage.modifyEntryConfiguration">
+                  <EditEntryConfig
+                  id={data.id}
+                  getDetailInfo={getEsDetail}
                   permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </auth-button>
+                  resource={DBTypes.ES}
+                  onSuccess={fetchTableData} />
+                </span>
               </>
             ),
           }}
@@ -834,11 +827,6 @@
     return serachData.value.find(set => set.id === item.id)?.children || [];
   };
 
-  const handleOpenEntryConfig = (row: EsModel) => {
-    showEditEntryConfig.value  = true;
-    clusterId.value = row.id;
-  };
-
   const fetchTableData = (loading?:boolean) => {
     const searchParams = getSearchSelectorParams(searchValue.value);
     tableRef.value?.fetchData(searchParams, { ...sortValue }, loading);
@@ -1141,7 +1129,7 @@
         align-items: center;
       }
 
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 1px;
         margin-left: 4px;
@@ -1151,7 +1139,7 @@
     }
 
     :deep(td:hover) {
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
diff --git a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
index dd54df6076..002c224de6 100644
--- a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
@@ -108,10 +108,6 @@
         :cluster-id="operationData.id" />
     </BkSideslider>
   </div>
-  <EditEntryConfig
-    :id="clusterId"
-    v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getHdfsDetail" />
 </template>
 <script setup lang="tsx">
   import { InfoBox, Message } from 'bkui-vue';
@@ -142,6 +138,7 @@
 
   import {
     ClusterTypes,
+    DBTypes,
     UserPersonalSettings,
   } from '@common/const';
 
@@ -227,8 +224,6 @@
   const isShowPassword = ref(false);
   const isShowSettings = ref(false);
   const isInit = ref(true);
-  const showEditEntryConfig = ref(false);
-
   const operationData = shallowRef<HdfsModel>();
   const selected = ref<HdfsModel[]>([])
   const selectedIds = computed(() => selected.value.map(item => item.id));
@@ -391,17 +386,14 @@
                       ]
                     } />
                   )}
-                  <auth-button
-                    v-bk-tooltips={t('修改入口配置')}
-                    v-db-console="hdfs.clusterManage.modifyEntryConfiguration"
-                    action-id="access_entry_edit"
-                    resource="hdfs"
-                    permission={data.permission.access_entry_edit}
-                    text
-                    theme="primary"
-                    onClick={() => handleOpenEntryConfig(data)}>
-                    <db-icon type="edit" />
-                  </auth-button>
+                  <span v-db-console="hdfs.clusterManage.modifyEntryConfiguration">
+                    <EditEntryConfig
+                      id={data.id}
+                      getDetailInfo={getHdfsDetail}
+                      permission={data.permission.access_entry_edit}
+                      resource={DBTypes.HDFS}
+                      onSuccess={fetchTableData} />
+                  </span>
                 </>
               ),
             }}
@@ -859,11 +851,6 @@
     return serachData.value.find(set => set.id === item.id)?.children || [];
   };
 
-  const handleOpenEntryConfig = (row: HdfsModel) => {
-    showEditEntryConfig.value  = true;
-    clusterId.value = row.id;
-  };
-
   const fetchTableData = (loading?:boolean) => {
     const searchParams = getSearchSelectorParams(searchValue.value);
     tableRef.value?.fetchData(searchParams, { ...sortValue }, loading);
@@ -1080,7 +1067,7 @@
         align-items: center;
       }
 
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-left: 4px;
         color: @primary-color;
@@ -1089,7 +1076,7 @@
     }
 
     :deep(tr:hover) {
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
diff --git a/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue
index cecad6ae51..db24730bc5 100644
--- a/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/kafka/list/components/list/Index.vue
@@ -96,10 +96,6 @@
       </template>
     </BkDialog>
   </div>
-  <EditEntryConfig
-    :id="clusterId"
-    v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getKafkaDetail" />
 </template>
 <script setup lang="tsx">
   import { InfoBox, Message } from 'bkui-vue';
@@ -218,7 +214,6 @@
   const isShowShrink = ref(false);
   const isShowPassword = ref(false);
   const isInit = ref(true);
-  const showEditEntryConfig = ref(false);
   const selected = ref<KafkaModel[]>([])
   const operationData = shallowRef<KafkaModel>();
 
@@ -375,17 +370,14 @@
                     ]
                   } />
                 )}
-                <auth-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  v-db-console="kafka.clusterManage.modifyEntryConfiguration"
-                  action-id="access_entry_edit"
-                  resource="kafka"
-                  permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </auth-button>
+                <span v-db-console="kafka.clusterManage.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getKafkaDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.KAFKA}
+                    onSuccess={fetchTableData} />
+                </span>
               </>
             ),
           }}
@@ -775,11 +767,6 @@
     selected.value = list;
   };
 
-  const handleOpenEntryConfig = (row: KafkaModel) => {
-    showEditEntryConfig.value  = true;
-    clusterId.value = row.id;
-  };
-
   const fetchTableData = (loading?:boolean) => {
     const searchParams = getSearchSelectorParams(searchValue.value);
     tableRef.value?.fetchData(searchParams, { ...sortValue }, loading);
@@ -1076,7 +1063,7 @@
         align-items: center;
       }
 
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 2px;
         margin-left: 4px;
@@ -1086,7 +1073,7 @@
     }
 
     :deep(tr:hover) {
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
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 fae87f6e92..ab5bd04c53 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
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <div class="mysql-ha-cluster-list">
+  <div class="mysql-ha-cluster-list-page">
     <div class="operation-box">
       <AuthButton
         v-db-console="'mysql.haClusterList.instanceApply'"
@@ -100,10 +100,6 @@
   <ExcelAuthorize
     v-model:is-show="isShowExcelAuthorize"
     :cluster-type="ClusterTypes.TENDBHA" />
-  <EditEntryConfig
-    :id="showEnterConfigClusterId"
-    v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getTendbhaDetail" />
   <CreateSubscribeRuleSlider
     v-model="showCreateSubscribeRuleSlider"
     :selected-clusters="selectedClusterList"
@@ -146,6 +142,7 @@
   import {
     AccountTypes,
     ClusterTypes,
+    DBTypes,
     TicketTypes,
     type TicketTypesStrings,
     UserPersonalSettings,
@@ -155,8 +152,8 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import ExcelAuthorize from '@components/cluster-common/ExcelAuthorize.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
-  import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
+  import EditEntryConfig, { type RowData } from '@components/cluster-entry-config/Index.vue';
   import ClusterExportData from '@components/cluster-export-data/Index.vue'
   import DbStatus from '@components/db-status/index.vue';
   import DbTable from '@components/db-table/index.vue';
@@ -176,6 +173,8 @@
     isRecentDays,
   } from '@utils';
 
+  import RenderEntries from './RenderEntries.vue';
+
   interface ColumnData {
     cell: string,
     data: TendbhaModel
@@ -237,12 +236,10 @@
   const tableRef = ref<InstanceType<typeof DbTable>>();
   const isShowExcelAuthorize = ref(false);
   const isInit = ref(false);
-  const showEditEntryConfig = ref(false);
-  const showEnterConfigClusterId = ref(0);
   const showCreateSubscribeRuleSlider = ref(false);
   const showDataExportSlider = ref(false)
   const selectedClusterList = ref<ColumnData['data'][]>([]);
-  const currentData = ref<ColumnData['data']>()
+  const currentData = ref<ColumnData['data']>();
 
   const selected = ref<TendbhaModel[]>([])
   /** 集群授权 */
@@ -337,6 +334,24 @@
     return funControllerStore.funControllerData.mysql.children[currentKey];
   });
 
+
+  const renderEntry = (data: RowData) => {
+    if (data.role === 'master_entry') {
+      return (
+        <span>
+          <bk-tag size="small" theme="success">{ t('主') }</bk-tag>{ data.entry }
+        </span>
+      )
+    }
+    return (
+      <span>
+        <bk-tag size="small" theme="info">{ t('从') }</bk-tag>{ data.entry }
+      </span>
+    )
+  }
+
+  const entrySort = (data: RowData[]) => data.sort(a => a.role === 'master_entry' ? -1 : 1);
+
   const columns = computed(() => [
     {
       label: 'ID',
@@ -400,17 +415,16 @@
                     }
                   ]
                 } />
-                <auth-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  v-db-console="mysql.haClusterList.modifyEntryConfiguration"
-                  action-id="access_entry_edit"
-                  resource="mysql"
-                  permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </auth-button>
+                <span v-db-console="mysql.haClusterList.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getTendbhaDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.MYSQL}
+                    renderEntry={renderEntry}
+                    sort={entrySort}
+                    onSuccess={fetchData} />
+                </span>
               </>
             ),
           }}
@@ -463,10 +477,16 @@
                       data-text="NEW" />
                   )
                 }
-                <db-icon
-                  v-bk-tooltips={t('复制集群名称')}
-                  type="copy"
-                  onClick={() => copy(data.cluster_name)} />
+                <span v-db-console="mysql.haClusterList.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getTendbhaDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.MYSQL}
+                    renderEntry={renderEntry}
+                    sort={entrySort}
+                    onSuccess={fetchData} />
+                </span>
               </>
             ),
           }}
@@ -515,8 +535,8 @@
     {
       label: t('从访问入口'),
       field: 'slave_domain',
-      minWidth: 200,
-      width: 220,
+      minWidth: 280,
+      width: 280,
       showOverflowTooltip: false,
       renderHead: () => (
         <RenderHeadCopy
@@ -539,40 +559,35 @@
           {t('从访问入口')}
         </RenderHeadCopy>
       ),
-      render: ({ data }: ColumnData) => (
-        <TextOverflowLayout>
-          {{
-            default: () => data.slaveDomainDisplayName || '--',
-            append: () => (
-              <>
-                <RenderCellCopy copyItems={
-                  [
-                    {
-                      value: data.slave_domain,
-                      label: t('域名')
-                    },
-                    {
-                      value: data.slaveDomainDisplayName,
-                      label: t('域名:端口')
-                    }
-                  ]
-                } />
-                <auth-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  v-db-console="mysql.haClusterList.modifyEntryConfiguration"
-                  action-id="access_entry_edit"
-                  resource="mysql"
+      render: ({ data }: ColumnData) => <RenderEntries data={data.slaveEntryList}>
+        {{
+          append: ({ index }: { index: number }) => index === 0 && (
+            <>
+              <RenderCellCopy copyItems={
+                [
+                  {
+                    value: data.slave_domain,
+                    label: t('域名')
+                  },
+                  {
+                    value: data.slaveDomainDisplayName,
+                    label: t('域名:端口')
+                  }
+                ]
+              } />
+              <span v-db-console="mysql.haClusterList.modifyEntryConfiguration">
+                <EditEntryConfig
+                  id={data.id}
+                  getDetailInfo={getTendbhaDetail}
                   permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </auth-button>
-              </>
-            )
-          }}
-        </TextOverflowLayout>
-      ),
+                  resource={DBTypes.MYSQL}
+                  renderEntry={renderEntry}
+                  sort={entrySort}
+                  onSuccess={fetchData} />
+              </span>
+            </>)
+        }}
+        </RenderEntries>
     },
     {
       label: 'Proxy',
@@ -685,7 +700,12 @@
           role="slave"
           clusterId={data.id}
           dataSource={getTendbhaInstanceList}
-        />
+        >
+          {{
+            append: ({ data: instance }: { data: TendbhaModel['slaves'][number] }) =>
+              data.slaves.length > 1 && instance.is_stand_by && (<bk-tag class="is-stand-by" size="small">Standby</bk-tag>)
+          }}
+        </RenderInstances>
       ),
     },
     {
@@ -955,11 +975,6 @@
     handleCopy(allData as T[], field)
   }
 
-  const handleOpenEntryConfig = (row: TendbhaModel) => {
-    showEditEntryConfig.value  = true;
-    showEnterConfigClusterId.value = row.id;
-  };
-
   const handleSelection = (data: TendbhaModel, list: TendbhaModel[]) => {
     selected.value = list;
     selectedClusterList.value = list;
@@ -1103,7 +1118,7 @@
 <style lang="less" scoped>
   @import '@styles/mixins.less';
 
-  .mysql-ha-cluster-list {
+  .mysql-ha-cluster-list-page {
     height: 100%;
     padding: 24px 0;
     margin: 0 24px;
@@ -1155,8 +1170,17 @@
         }
       }
 
+      .slave-entry {
+        line-height: 22px;
+      }
+
+      .is-stand-by {
+        color: #531dab !important;
+        background: #f9f0ff !important;
+      }
+
       .db-icon-copy,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 1px;
         margin-left: 4px;
@@ -1164,24 +1188,6 @@
         cursor: pointer;
       }
 
-      .table-wrapper {
-        background-color: white;
-
-        .bk-table {
-          height: 100% !important;
-        }
-
-        :deep(.bk-table-body) {
-          max-height: calc(100% - 100px);
-        }
-      }
-
-      .is-shrink-table {
-        :deep(.bk-table-body) {
-          overflow: hidden auto;
-        }
-      }
-
       :deep(.cluster-name-container) {
         display: flex;
         align-items: center;
@@ -1218,7 +1224,7 @@
 
     :deep(td:hover) {
       .db-icon-copy,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
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>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/ha-instance-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/ha-instance-list/components/List.vue
index 09ee42de1f..f32fde52d6 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/ha-instance-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/ha-instance-list/components/List.vue
@@ -176,7 +176,7 @@
         label: t('实例'),
         field: 'instance_address',
         fixed: 'left',
-        minWidth: 200,
+        width: 200,
         showOverflowTooltip: false,
         render: ({ cell, data }: ColumnData) => (
           <TextOverflowLayout>
@@ -198,36 +198,6 @@
           </TextOverflowLayout>
         ),
       },
-      {
-        label: t('集群名称'),
-        field: 'cluster_name',
-        minWidth: 200,
-        showOverflowTooltip: false,
-        render: ({ cell, data }: ColumnData) => (
-        <TextOverflowLayout>
-          {{
-            default: () => (
-              <auth-button
-                action-id="mysql_view"
-                resource={data.cluster_id}
-                permission={data.permission.mysql_view}
-                text
-                theme="primary"
-                onClick={() => handleToClusterDetails(data)}>
-                {cell}
-              </auth-button>
-            ),
-            append: () => (
-              <db-icon
-                v-bk-tooltips={t('复制集群名称')}
-                type="copy"
-                class="copy-btn"
-                onClick={() => copy(cell)} />
-            ),
-          }}
-        </TextOverflowLayout>
-      ),
-      },
       {
         label: t('状态'),
         field: 'status',
@@ -255,9 +225,18 @@
         },
       },
       {
-        label: t('主访问入口'),
+        label: t('部署角色'),
+        field: 'role',
+        width: 140,
+        filter: {
+          list: columnAttrs.value.role,
+          checked: columnCheckedMap.value.role,
+        },
+      },
+      {
+        label: t('所属集群'),
         field: 'master_domain',
-        minWidth: 200,
+        width: 260,
         showOverflowTooltip: false,
         render: ({ cell }: ColumnData) => (
           <TextOverflowLayout>
@@ -265,7 +244,7 @@
               default: () => cell,
               append: () => (
                 <db-icon
-                  v-bk-tooltips={t('复制主访问入口')}
+                  v-bk-tooltips={t('复制所属集群')}
                   type="copy"
                   class="copy-btn"
                   onClick={() => copy(cell)} />
@@ -275,17 +254,27 @@
         ),
       },
       {
-        label: t('从访问入口'),
-        field: 'slave_domain',
-        minWidth: 200,
+        label: t('集群名称'),
+        field: 'cluster_name',
+        width: 180,
         showOverflowTooltip: false,
-        render: ({ cell }: ColumnData) => (
+        render: ({ cell, data }: ColumnData) => (
           <TextOverflowLayout>
             {{
-              default: () => cell,
+              default: () => (
+                <auth-button
+                  action-id="mysql_view"
+                  resource={data.cluster_id}
+                  permission={data.permission.mysql_view}
+                  text
+                  theme="primary"
+                  onClick={() => handleToClusterDetails(data)}>
+                  {cell}
+                </auth-button>
+              ),
               append: () => (
                 <db-icon
-                  v-bk-tooltips={t('复制从访问入口')}
+                  v-bk-tooltips={t('复制集群名称')}
                   type="copy"
                   class="copy-btn"
                   onClick={() => copy(cell)} />
@@ -294,19 +283,10 @@
           </TextOverflowLayout>
         ),
       },
-      {
-        label: t('部署角色'),
-        field: 'role',
-        width: 100,
-        filter: {
-          list: columnAttrs.value.role,
-          checked: columnCheckedMap.value.role,
-        },
-      },
       {
         label: t('部署时间'),
         field: 'create_at',
-        width: 250,
+        width: 240,
         sort: true,
         render: ({ data }: { data: TendbhaInstanceModel }) => data.createAtDisplay || '--',
       },
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
index efbfd46c33..e88f3070f3 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
@@ -86,10 +86,6 @@
   <ExcelAuthorize
     v-model:is-show="isShowExcelAuthorize"
     :cluster-type="ClusterTypes.TENDBSINGLE" />
-  <EditEntryConfig
-    :id="clusterId"
-    v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getTendbsingleDetail" />
   <ClusterExportData
     v-if="currentData"
     v-model:is-show="showDataExportSlider"
@@ -130,6 +126,7 @@
   import {
     AccountTypes,
     ClusterTypes,
+    DBTypes,
     TicketTypes,
     type TicketTypesStrings,
     UserPersonalSettings,
@@ -208,9 +205,8 @@
   const tableRef = ref<InstanceType<typeof DbTable>>();
   const isShowExcelAuthorize = ref(false);
   const showDataExportSlider = ref(false)
-  const showEditEntryConfig = ref(false);
   const selected = ref<TendbsingleModel[]>([])
-  const currentData = ref<ColumnData['data']>()
+  const currentData = ref<ColumnData['data']>();
 
   const authorizeState = reactive({
     isShow: false,
@@ -359,17 +355,14 @@
                     }
                   ]
                 } />
-                <auth-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  v-db-console="mysql.singleClusterList.modifyEntryConfiguration"
-                  action-id="access_entry_edit"
-                  resource="mysql"
-                  permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </auth-button>
+                <span v-db-console="mysql.singleClusterList.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getTendbsingleDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.MYSQL}
+                    onSuccess={fetchData} />
+                </span>
               </>
             ),
           }}
@@ -807,11 +800,6 @@
     isShowExcelAuthorize.value = true;
   };
 
-  const handleOpenEntryConfig = (row: TendbsingleModel) => {
-    showEditEntryConfig.value  = true;
-    clusterId.value = row.id;
-  };
-
   const handleShowDataExportSlider = (data: TendbsingleModel) => {
     currentData.value = data
     showDataExportSlider.value = true;
@@ -975,7 +963,7 @@
         }
 
         .db-icon-copy,
-        .db-icon-edit {
+        .db-icon-visible1 {
           display: none;
           margin-top: 1px;
           margin-left: 4px;
@@ -1007,7 +995,7 @@
 
       :deep(td:hover) {
         .db-icon-copy,
-        .db-icon-edit {
+        .db-icon-visible1 {
           display: inline-block !important;
         }
       }
diff --git a/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
index 0bef32bc71..37c26e6d67 100644
--- a/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
@@ -93,10 +93,6 @@
       </template>
     </BkDialog>
   </div>
-  <EditEntryConfig
-    :id="clusterId"
-    v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getPulsarDetail" />
 </template>
 <script setup lang="tsx">
   import { InfoBox, Message } from 'bkui-vue';
@@ -124,7 +120,7 @@
 
   import { useGlobalBizs } from '@stores';
 
-  import { ClusterTypes, UserPersonalSettings } from '@common/const';
+  import { ClusterTypes, DBTypes, UserPersonalSettings } from '@common/const';
 
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
@@ -218,7 +214,6 @@
   const isShowShrink = ref(false);
   const isShowPassword = ref(false);
   const isInit = ref(true);
-  const showEditEntryConfig = ref(false);
   const selected = ref<PulsarModel[]>([])
   const operationData = shallowRef<PulsarModel>();
 
@@ -308,17 +303,14 @@
                     ]
                   } />
                 )}
-                <auth-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  v-db-console="pulsar.clusterManage.modifyEntryConfiguration"
-                  action-id="access_entry_edit"
-                  resource="pulsar"
-                  permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </auth-button>
+                <span v-db-console="pulsar.clusterManage.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getPulsarDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.PULSAR}
+                    onSuccess={fetchTableData} />
+                </span>
               </>
             ),
           }}
@@ -798,11 +790,6 @@
     selected.value = list;
   };
 
-  const handleOpenEntryConfig = (row: PulsarModel) => {
-    showEditEntryConfig.value  = true;
-    clusterId.value = row.id;
-  };
-
   const fetchTableData = (loading?:boolean) => {
     const searchParams = getSearchSelectorParams(searchValue.value);
     tableRef.value?.fetchData(searchParams, { ...sortValue }, loading);
@@ -1118,7 +1105,7 @@
         align-items: center;
       }
 
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 2px;
         margin-left: 4px;
@@ -1128,7 +1115,7 @@
     }
 
     :deep(tr:hover) {
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue
index 0c53c53411..1fde09326e 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue
@@ -123,10 +123,6 @@
     <RedisPurge
       v-model:is-show="purgeState.isShow"
       :data="purgeState.data" />
-    <EditEntryConfig
-      :id="clusterId"
-      v-model:is-show="showEditEntryConfig"
-      :get-detail-info="getRedisDetail" />
   </div>
 </template>
 
@@ -276,8 +272,6 @@
   });
 
   const isShowDropdown = ref(false);
-  const showEditEntryConfig = ref(false);
-
   const selected = shallowRef<RedisModel[]>([])
 
   /** 查看密码 */
@@ -465,17 +459,14 @@
                     ]
                   } />
                 )}
-                <auth-button
-                  v-db-console="redis.haClusterManage.modifyEntryConfiguration"
-                  v-bk-tooltips={t('修改入口配置')}
-                  action-id="access_entry_edit"
-                  resource="redis"
-                  permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </auth-button>
+                <span v-db-console="redis.haClusterManage.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getRedisDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.REDIS}
+                    onSuccess={fetchData} />
+                </span>
               </>
             ),
           }}
@@ -635,17 +626,14 @@
                     ]
                   } />
                 )}
-                <auth-button
-                  v-db-console="redis.haClusterManage.modifyEntryConfiguration"
-                  v-bk-tooltips={t('修改入口配置')}
-                  action-id="access_entry_edit"
-                  resource="redis"
-                  permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </auth-button>
+                <span v-db-console="redis.haClusterManage.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getRedisDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.REDIS}
+                    onSuccess={fetchData} />
+                </span>
               </>
             )
           }}
@@ -1136,11 +1124,6 @@
     clusterId.value = id;
   };
 
-  const handleOpenEntryConfig = (row: RedisModel) => {
-    showEditEntryConfig.value = true;
-    clusterId.value = row.id;
-  };
-
   const handleShowPassword = (id: number) => {
     passwordState.isShow = true;
     passwordState.fetchParams.cluster_id = id;
@@ -1322,7 +1305,7 @@
           line-height: unset !important;
 
           .db-icon-copy,
-          .db-icon-edit {
+          .db-icon-visible1 {
             display: none;
             margin-top: 1px;
             margin-left: 4px;
@@ -1389,7 +1372,7 @@
         :deep(th:hover),
         :deep(td:hover) {
           .db-icon-copy,
-          .db-icon-edit {
+          .db-icon-visible1 {
             display: inline-block;
           }
         }
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue
index b18c72afb4..2ffcc83e9b 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/list/components/list/Index.vue
@@ -163,10 +163,6 @@
   <RedisPurge
     v-model:is-show="purgeState.isShow"
     :data="purgeState.data" />
-  <EditEntryConfig
-    :id="clusterId"
-    v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getRedisDetail" />
 </template>
 <script setup lang="tsx">
     import { InfoBox, Message } from 'bkui-vue';
@@ -333,11 +329,9 @@
 
     const disabledOperations: string[] = [TicketTypes.REDIS_DESTROY, TicketTypes.REDIS_PROXY_CLOSE];
 
-    const tableRef = ref<InstanceType<typeof DbTable>>();
-    const isShowDropdown = ref(false);
-    const showEditEntryConfig = ref(false);
-
-    const selected = ref<RedisModel[]>([]);
+  const tableRef = ref<InstanceType<typeof DbTable>>();
+  const isShowDropdown = ref(false);
+  const selected = ref<RedisModel[]>([]);
 
     /** 查看密码 */
     const passwordState = reactive({
@@ -466,507 +460,508 @@
     });
     const hasDisabledRow = computed(() => selected.value.some((data) => disableSelectMethod(data)));
 
-    const columns = computed(() => [
-      {
-        label: 'ID',
-        field: 'id',
-        fixed: 'left',
-        width: 60,
-      },
-      {
-        label: t('访问入口'),
-        field: 'master_domain',
-        width: 280,
-        minWidth: 280,
-        fixed: 'left',
-        renderHead: () => (
-          <RenderHeadCopy
-            hasSelected={hasSelected.value}
-            onHandleCopySelected={handleCopySelected}
-            onHandleCopyAll={handleCopyAll}
-            config={
-              [
-                {
-                  field: 'master_domain',
-                  label: t('域名')
-                },
-                {
-                  field: 'masterDomainDisplayName',
-                  label: t('域名:端口')
-                }
-              ]
-            }
-          >
-            {t('访问入口')}
-          </RenderHeadCopy>
-        ),
-        render: ({ data }: ColumnRenderData) => (
-          <TextOverflowLayout>
-            {{
-              default: () => (
-                <auth-button
-                  action-id="redis_view"
-                  resource={data.id}
-                  permission={data.permission.redis_view}
-                  text
-                  theme="primary"
-                  onClick={() => handleToDetails(data.id)}>
-                  {data.masterDomainDisplayName}
-                </auth-button>
-              ),
-              append: () => (
-                <>
-                  {data.isOnlineCLB && (
-                    <EntryPanel
-                      entryType='clb'
-                      clusterId={data.id}>
-                        <MiniTag
-                          content="CLB"
-                          extCls='redis-manage-clb-minitag' />
-                    </EntryPanel>
-                  )}
-                  {data.isOnlinePolaris && (
-                    <EntryPanel
-                      entryType='polaris'
-                      clusterId={data.id}
-                      panelWidth={418}>
-                      <MiniTag
-                        content="北极星"
-                        extCls='redis-manage-polary-minitag' />
-                    </EntryPanel>
-                  )}
-                  {data.master_domain && (
-                    <RenderCellCopy copyItems={
-                      [
-                        {
-                          value: data.master_domain,
-                          label: t('域名')
-                        },
-                        {
-                          value: data.masterDomainDisplayName,
-                          label: t('域名:端口')
-                        }
-                      ]
-                    } />
-                  )}
-                  <auth-button
-                    v-db-console="redis.clusterManage.modifyEntryConfiguration"
-                    v-bk-tooltips={t('修改入口配置')}
-                    action-id="access_entry_edit"
-                    resource="redis"
-                    permission={data.permission.access_entry_edit}
-                    text
-                    theme="primary"
-                    onClick={() => handleOpenEntryConfig(data)}>
-                    <db-icon type="edit" />
-                  </auth-button>
-                </>
-              ),
-            }}
-          </TextOverflowLayout>
-        ),
-      },
-      {
-        label: t('集群名称'),
-        field: 'cluster_name',
-        minWidth: 200,
-        showOverflowTooltip: false,
-        renderHead: () => (
-          <RenderHeadCopy
-            hasSelected={hasSelected.value}
-            onHandleCopySelected={handleCopySelected}
-            onHandleCopyAll={handleCopyAll}
-            config={
-              [
-                {
-                  field: 'cluster_name'
-                },
-              ]
-            }
-          >
-            {t('集群名称')}
-          </RenderHeadCopy>
-        ),
-        render: ({ data }: ColumnRenderData) => (
-          <div class="cluster-name-container">
-            <div
-              class="cluster-name text-overflow"
-              v-overflow-tips={{
-                content: `<p>${t('集群名称')}：${data.cluster_name}</p><p>${t('集群别名')}：${data.cluster_alias}</p>`,
-                allowHTML: true,
-              }}>
-              <span>
-                {data.cluster_name}
-              </span>
-              <p class="cluster-name__alias">
-                {data.cluster_alias || '--'}
-              </p>
-            </div>
-            <div class="cluster-tags">
+  const columns = computed(() => [
+    {
+      label: 'ID',
+      field: 'id',
+      fixed: 'left',
+      width: 60,
+    },
+    {
+      label: t('访问入口'),
+      field: 'master_domain',
+      width: 280,
+      minWidth: 280,
+      fixed: 'left',
+      renderHead: () => (
+        <RenderHeadCopy
+          hasSelected={hasSelected.value}
+          onHandleCopySelected={handleCopySelected}
+          onHandleCopyAll={handleCopyAll}
+          config={
+            [
               {
-                data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag" data={item} />)
-              }
+                field: 'master_domain',
+                label: t('域名')
+              },
               {
-                !data.isOnline && !data.isStarting && (
-                  <bk-tag size="small">{t('已禁用')}</bk-tag>
-                )
+                field: 'masterDomainDisplayName',
+                label: t('域名:端口')
               }
+            ]
+          }
+        >
+          {t('访问入口')}
+        </RenderHeadCopy>
+      ),
+      render: ({ data }: ColumnRenderData) => (
+        <TextOverflowLayout>
+          {{
+            default: () => (
+              <auth-button
+                action-id="redis_view"
+                resource={data.id}
+                permission={data.permission.redis_view}
+                text
+                theme="primary"
+                onClick={() => handleToDetails(data.id)}>
+                {data.masterDomainDisplayName}
+              </auth-button>
+            ),
+            append: () => (
+              <>
+                {data.isOnlineCLB && (
+                  <EntryPanel
+                    entryType='clb'
+                    clusterId={data.id}>
+                      <MiniTag
+                        content="CLB"
+                        extCls='redis-manage-clb-minitag' />
+                  </EntryPanel>
+                )}
+                {data.isOnlinePolaris && (
+                  <EntryPanel
+                    entryType='polaris'
+                    clusterId={data.id}
+                    panelWidth={418}>
+                    <MiniTag
+                      content="北极星"
+                      extCls='redis-manage-polary-minitag' />
+                  </EntryPanel>
+                )}
+                {data.master_domain && (
+                  <RenderCellCopy copyItems={
+                    [
+                      {
+                        value: data.master_domain,
+                        label: t('域名')
+                      },
+                      {
+                        value: data.masterDomainDisplayName,
+                        label: t('域名:端口')
+                      }
+                    ]
+                  } />
+                )}
+                <span v-db-console="redis.clusterManage.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getRedisDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.REDIS}
+                    onSuccess={fetchData} />
+                </span>
+              </>
+            ),
+          }}
+        </TextOverflowLayout>
+      ),
+    },
+    {
+      label: t('集群名称'),
+      field: 'cluster_name',
+      minWidth: 200,
+      showOverflowTooltip: false,
+      renderHead: () => (
+        <RenderHeadCopy
+          hasSelected={hasSelected.value}
+          onHandleCopySelected={handleCopySelected}
+          onHandleCopyAll={handleCopyAll}
+          config={
+            [
               {
-                data.isNew && (
-                  <bk-tag
-                    size="small"
-                    theme="success">
-                    NEW
-                  </bk-tag>
-                )
-              }
-            </div>
-            <db-icon
-              v-bk-tooltips={t('复制集群名称')}
-              class="mt-4"
-              type="copy"
-              onClick={() => copy(data.cluster_name)} />
+                field: 'cluster_name'
+              },
+            ]
+          }
+        >
+          {t('集群名称')}
+        </RenderHeadCopy>
+      ),
+      render: ({ data }: ColumnRenderData) => (
+        <div class="cluster-name-container">
+          <div
+            class="cluster-name text-overflow"
+            v-overflow-tips={{
+              content: `<p>${t('集群名称')}：${data.cluster_name}</p><p>${t('集群别名')}：${data.cluster_alias}</p>`,
+              allowHTML: true,
+            }}>
+            <span>
+              {data.cluster_name}
+            </span>
+            <p class="cluster-name__alias">
+              {data.cluster_alias || '--'}
+            </p>
           </div>
-        ),
-      },
-      {
-        label: t('管控区域'),
-        field: 'bk_cloud_id',
-        filter: {
-          list: columnAttrs.value.bk_cloud_id,
-          checked: columnCheckedMap.value.bk_cloud_id,
-        },
-        render: ({ data }: ColumnRenderData) => <span>{data.bk_cloud_name ?? '--'}</span>,
-      },
-      {
-        label: t('状态'),
-        field: 'status',
-        width: 100,
-        filter: {
-          list: [
+          <div class="cluster-tags">
             {
-              value: 'normal',
-              text: t('正常'),
-            },
-            {
-              value: 'abnormal',
-              text: t('异常'),
-            },
-          ],
-          checked: columnCheckedMap.value.status,
-        },
-        render: ({ data }: ColumnRenderData) => {
-          const info = data.status === 'normal'
-            ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
-          return (
-            <DbStatus theme={info.theme}>
-              {info.text}
-            </DbStatus>
-          );
-        },
-      },
-      {
-        label: t('容量使用率'),
-        field: 'cluster_stats',
-        width: 240,
-        showOverflowTooltip: false,
-        render: ({ data }: ColumnRenderData) => <ClusterCapacityUsageRate clusterStats={data.cluster_stats} />
-      },
-      {
-        label: 'Proxy',
-        field: ClusterNodeKeys.PROXY,
-        width: 180,
-        minWidth: 180,
-        showOverflowTooltip: false,
-        renderHead: () => (
-          <RenderHeadCopy
-            hasSelected={hasSelected.value}
-            onHandleCopySelected={(field) => handleCopySelected(field, ClusterNodeKeys.PROXY)}
-            onHandleCopyAll={(field) => handleCopyAll(field, ClusterNodeKeys.PROXY)}
-            config={
-              [
-                {
-                  label: 'IP',
-                  field: 'ip'
-                },
-                {
-                  label: t('实例'),
-                  field: 'instance'
-                }
-              ]
+              data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag" data={item} />)
             }
-          >
-            {'Proxy'}
-          </RenderHeadCopy>
-        ),
-        render: ({ data }: ColumnRenderData) => (
-          <RenderInstances
-            highlightIps={batchSearchIpInatanceList.value}
-            data={data[ClusterNodeKeys.PROXY]}
-            title={t('【inst】实例预览', { title: 'Proxy', inst: data.master_domain })}
-            role={ClusterNodeKeys.PROXY}
-            clusterId={data.id}
-            dataSource={getRedisInstances}
-          />
-        ),
-      },
-      {
-        label: 'Master',
-        field: ClusterNodeKeys.REDIS_MASTER,
-        width: 180,
-        minWidth: 180,
-        showOverflowTooltip: false,
-        renderHead: () => (
-          <RenderHeadCopy
-            hasSelected={hasSelected.value}
-            onHandleCopySelected={(field) => handleCopySelected(field, ClusterNodeKeys.REDIS_MASTER)}
-            onHandleCopyAll={(field) => handleCopyAll(field, ClusterNodeKeys.REDIS_MASTER)}
-            config={
-              [
-                {
-                  label: 'IP',
-                  field: 'ip'
-                },
-                {
-                  label: t('实例'),
-                  field: 'instance'
-                }
-              ]
+            {
+              !data.isOnline && !data.isStarting && (
+                <bk-tag
+                  class="ml-4"
+                  size="small">
+                  {t('已禁用')}
+                </bk-tag>
+              )
             }
-          >
-            {'Master'}
-          </RenderHeadCopy>
-        ),
-        render: ({ data }: ColumnRenderData) => (
-          <RenderInstances
-            highlightIps={batchSearchIpInatanceList.value}
-            data={data[ClusterNodeKeys.REDIS_MASTER]}
-            title={t('【inst】实例预览', { title: 'Master', inst: data.master_domain })}
-            role={ClusterNodeKeys.REDIS_MASTER}
-            clusterId={data.id}
-            dataSource={getRedisInstances}
-          />
-        ),
-      },
-      {
-        label: 'Slave',
-        field: ClusterNodeKeys.REDIS_SLAVE,
-        width: 180,
-        minWidth: 180,
-        showOverflowTooltip: false,
-        renderHead: () => (
-          <RenderHeadCopy
-            hasSelected={hasSelected.value}
-            onHandleCopySelected={(field) => handleCopySelected(field, ClusterNodeKeys.REDIS_SLAVE)}
-            onHandleCopyAll={(field) => handleCopyAll(field, ClusterNodeKeys.REDIS_SLAVE)}
-            config={
-              [
-                {
-                  label: 'IP',
-                  field: 'ip'
-                },
-                {
-                  label: t('实例'),
-                  field: 'instance'
-                }
-              ]
+            {
+              data.isNew && (
+                <bk-tag
+                  size="small"
+                  theme="success">
+                  NEW
+                </bk-tag>
+              )
             }
-          >
-            {'Slave'}
-          </RenderHeadCopy>
-        ),
-        render: ({ data }: ColumnRenderData) => (
-          <RenderInstances
-            highlightIps={batchSearchIpInatanceList.value}
-            data={data[ClusterNodeKeys.REDIS_SLAVE]}
-            title={t('【inst】实例预览', { title: 'Slave', inst: data.master_domain })}
-            role={ClusterNodeKeys.REDIS_SLAVE}
-            clusterId={data.id}
-            dataSource={getRedisInstances}
-          />
-        ),
-      },
-      {
-        label: t('架构版本'),
-        field: 'cluster_type',
-        minWidth: 160,
-        filter: {
-          list: columnAttrs.value.cluster_type,
-          checked: columnCheckedMap.value.cluster_type,
-          height: 200,
-        },
-        render: ({ data }: ColumnRenderData) => <span>{data.cluster_type_name || '--'}</span>,
-      },
-      {
-        label: t('版本'),
-        field: 'major_version',
-        minWidth: 100,
-        filter: {
-          list: columnAttrs.value.major_version,
-          checked: columnCheckedMap.value.major_version,
-        },
-        render: ({ cell }: TableColumnRender) => <span>{cell || '--'}</span>,
+          </div>
+          <db-icon
+            v-bk-tooltips={t('复制集群名称')}
+            class="mt-4"
+            type="copy"
+            onClick={() => copy(data.cluster_name)} />
+        </div>
+      ),
+    },
+    {
+      label: t('管控区域'),
+      field: 'bk_cloud_id',
+      filter: {
+        list: columnAttrs.value.bk_cloud_id,
+        checked: columnCheckedMap.value.bk_cloud_id,
       },
-      {
-        label: t('地域'),
-        field: 'region',
-        minWidth: 100,
-        filter: {
-          list: columnAttrs.value.region,
-          checked: columnCheckedMap.value.region,
-        },
-        render: ({ cell }: TableColumnRender) => <span>{cell || '--'}</span>,
+      render: ({ data }: ColumnRenderData) => <span>{data.bk_cloud_name ?? '--'}</span>,
+    },
+    {
+      label: t('状态'),
+      field: 'status',
+      width: 100,
+      filter: {
+        list: [
+          {
+            value: 'normal',
+            text: t('正常'),
+          },
+          {
+            value: 'abnormal',
+            text: t('异常'),
+          },
+        ],
+        checked: columnCheckedMap.value.status,
       },
-      {
-        label: t('更新人'),
-        field: 'updater',
-        width: 140,
-        render: ({ cell }: TableColumnRender) => <span>{cell || '--'}</span>,
+      render: ({ data }: ColumnRenderData) => {
+        const info = data.status === 'normal'
+          ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return (
+          <DbStatus theme={info.theme}>
+            {info.text}
+          </DbStatus>
+        );
       },
-      {
-        label: t('更新时间'),
-        field: 'update_at',
-        width: 160,
-        render: ({ data }: ColumnRenderData) => <span>{data.updateAtDisplay || '--'}</span>,
+    },
+    {
+      label: t('容量使用率'),
+      field: 'cluster_stats',
+      width: 240,
+      showOverflowTooltip: false,
+      render: ({ data }: ColumnRenderData) => <ClusterCapacityUsageRate clusterStats={data.cluster_stats} />
+    },
+    {
+      label: 'Proxy',
+      field: ClusterNodeKeys.PROXY,
+      width: 180,
+      minWidth: 180,
+      showOverflowTooltip: false,
+      renderHead: () => (
+        <RenderHeadCopy
+          hasSelected={hasSelected.value}
+          onHandleCopySelected={(field) => handleCopySelected(field, ClusterNodeKeys.PROXY)}
+          onHandleCopyAll={(field) => handleCopyAll(field, ClusterNodeKeys.PROXY)}
+          config={
+            [
+              {
+                label: 'IP',
+                field: 'ip'
+              },
+              {
+                label: t('实例'),
+                field: 'instance'
+              }
+            ]
+          }
+        >
+          {'Proxy'}
+        </RenderHeadCopy>
+      ),
+      render: ({ data }: ColumnRenderData) => (
+        <RenderInstances
+          highlightIps={batchSearchIpInatanceList.value}
+          data={data[ClusterNodeKeys.PROXY]}
+          title={t('【inst】实例预览', { title: 'Proxy', inst: data.master_domain })}
+          role={ClusterNodeKeys.PROXY}
+          clusterId={data.id}
+          dataSource={getRedisInstances}
+        />
+      ),
+    },
+    {
+      label: 'Master',
+      field: ClusterNodeKeys.REDIS_MASTER,
+      width: 180,
+      minWidth: 180,
+      showOverflowTooltip: false,
+      renderHead: () => (
+        <RenderHeadCopy
+          hasSelected={hasSelected.value}
+          onHandleCopySelected={(field) => handleCopySelected(field, ClusterNodeKeys.REDIS_MASTER)}
+          onHandleCopyAll={(field) => handleCopyAll(field, ClusterNodeKeys.REDIS_MASTER)}
+          config={
+            [
+              {
+                label: 'IP',
+                field: 'ip'
+              },
+              {
+                label: t('实例'),
+                field: 'instance'
+              }
+            ]
+          }
+        >
+          {'Master'}
+        </RenderHeadCopy>
+      ),
+      render: ({ data }: ColumnRenderData) => (
+        <RenderInstances
+          highlightIps={batchSearchIpInatanceList.value}
+          data={data[ClusterNodeKeys.REDIS_MASTER]}
+          title={t('【inst】实例预览', { title: 'Master', inst: data.master_domain })}
+          role={ClusterNodeKeys.REDIS_MASTER}
+          clusterId={data.id}
+          dataSource={getRedisInstances}
+        />
+      ),
+    },
+    {
+      label: 'Slave',
+      field: ClusterNodeKeys.REDIS_SLAVE,
+      width: 180,
+      minWidth: 180,
+      showOverflowTooltip: false,
+      renderHead: () => (
+        <RenderHeadCopy
+          hasSelected={hasSelected.value}
+          onHandleCopySelected={(field) => handleCopySelected(field, ClusterNodeKeys.REDIS_SLAVE)}
+          onHandleCopyAll={(field) => handleCopyAll(field, ClusterNodeKeys.REDIS_SLAVE)}
+          config={
+            [
+              {
+                label: 'IP',
+                field: 'ip'
+              },
+              {
+                label: t('实例'),
+                field: 'instance'
+              }
+            ]
+          }
+        >
+          {'Slave'}
+        </RenderHeadCopy>
+      ),
+      render: ({ data }: ColumnRenderData) => (
+        <RenderInstances
+          highlightIps={batchSearchIpInatanceList.value}
+          data={data[ClusterNodeKeys.REDIS_SLAVE]}
+          title={t('【inst】实例预览', { title: 'Slave', inst: data.master_domain })}
+          role={ClusterNodeKeys.REDIS_SLAVE}
+          clusterId={data.id}
+          dataSource={getRedisInstances}
+        />
+      ),
+    },
+    {
+      label: t('架构版本'),
+      field: 'cluster_type',
+      minWidth: 160,
+      filter: {
+        list: columnAttrs.value.cluster_type,
+        checked: columnCheckedMap.value.cluster_type,
+        height: 200,
       },
-      {
-        label: t('创建人'),
-        field: 'creator',
-        width: 140,
-        render: ({ cell }: TableColumnRender) => <span>{cell || '--'}</span>,
+      render: ({ data }: ColumnRenderData) => <span>{data.cluster_type_name || '--'}</span>,
+    },
+    {
+      label: t('版本'),
+      field: 'major_version',
+      minWidth: 100,
+      filter: {
+        list: columnAttrs.value.major_version,
+        checked: columnCheckedMap.value.major_version,
       },
-      {
-        label: t('部署时间'),
-        field: 'create_at',
-        sort: true,
-        width: 160,
-        render: ({ data }: ColumnRenderData) => <span>{data.createAtDisplay || '--'}</span>,
+      render: ({ cell }: TableColumnRender) => <span>{cell || '--'}</span>,
+    },
+    {
+      label: t('地域'),
+      field: 'region',
+      minWidth: 100,
+      filter: {
+        list: columnAttrs.value.region,
+        checked: columnCheckedMap.value.region,
       },
-      {
-        label: t('时区'),
-        field: 'cluster_time_zone',
-        width: 100,
-        filter: {
-          list: columnAttrs.value.time_zone,
-          checked: columnCheckedMap.value.time_zone,
-        },
-        render: ({ cell }: TableColumnRender) => <span>{cell || '--'}</span>,
+      render: ({ cell }: TableColumnRender) => <span>{cell || '--'}</span>,
+    },
+    {
+      label: t('更新人'),
+      field: 'updater',
+      width: 140,
+      render: ({ cell }: TableColumnRender) => <span>{cell || '--'}</span>,
+    },
+    {
+      label: t('更新时间'),
+      field: 'update_at',
+      width: 160,
+      render: ({ data }: ColumnRenderData) => <span>{data.updateAtDisplay || '--'}</span>,
+    },
+    {
+      label: t('创建人'),
+      field: 'creator',
+      width: 140,
+      render: ({ cell }: TableColumnRender) => <span>{cell || '--'}</span>,
+    },
+    {
+      label: t('部署时间'),
+      field: 'create_at',
+      sort: true,
+      width: 160,
+      render: ({ data }: ColumnRenderData) => <span>{data.createAtDisplay || '--'}</span>,
+    },
+    {
+      label: t('时区'),
+      field: 'cluster_time_zone',
+      width: 100,
+      filter: {
+        list: columnAttrs.value.time_zone,
+        checked: columnCheckedMap.value.time_zone,
       },
-      {
-        label: t('操作'),
-        field: '',
-        width: tableOperationWidth.value,
-        fixed: isStretchLayoutOpen.value ? false : 'right',
-        render: ({ data }: ColumnRenderData) => {
-          const getOperations = (theme = 'primary') => {
-            const baseOperations = [
+      render: ({ cell }: TableColumnRender) => <span>{cell || '--'}</span>,
+    },
+    {
+      label: t('操作'),
+      field: '',
+      width: tableOperationWidth.value,
+      fixed: isStretchLayoutOpen.value ? false : 'right',
+      render: ({ data }: ColumnRenderData) => {
+        const getOperations = (theme = 'primary') => {
+          const baseOperations = [
+            <auth-button
+              action-id="redis_webconsole"
+              resource={data.id}
+              permission={data.permission.redis_webconsole}
+              disabled={data.isOffline}
+              text
+              theme="primary"
+              class="mr-8"
+              onClick={() => handleGoWebconsole(data.id)}>
+              Webconsole
+            </auth-button>,
+            <OperationBtnStatusTips
+              v-db-console="redis.clusterManage.backup"
+              data={data}
+              disabled={!data.isOffline}>
               <auth-button
-                action-id="redis_webconsole"
+                action-id="redis_backup"
                 resource={data.id}
-                permission={data.permission.redis_webconsole}
+                permission={data.permission.redis_backup}
                 disabled={data.isOffline}
                 text
-                theme="primary"
-                class="mr-8"
-                onClick={() => handleGoWebconsole(data.id)}>
-                Webconsole
-              </auth-button>,
-              <OperationBtnStatusTips
-                v-db-console="redis.clusterManage.backup"
-                data={data}
-                disabled={!data.isOffline}>
-                <auth-button
-                  action-id="redis_backup"
-                  resource={data.id}
-                  permission={data.permission.redis_backup}
-                  disabled={data.isOffline}
-                  text
-                  theme={theme}
-                  onClick={() => handleShowBackup([data])}>
-                  { t('备份') }
-                </auth-button>
-              </OperationBtnStatusTips>,
-              <OperationBtnStatusTips
-                v-db-console="redis.clusterManage.dbClear"
-                data={data}
-                disabled={!data.isOffline}>
-                <auth-button
-                  action-id="redis_purge"
-                  resource={data.id}
-                  permission={data.permission.redis_purge}
-                  disabled={data.isOffline}
-                  text
-                  theme={theme}
-                  onClick={() => handleShowPurge([data])}>
-                  { t('清档') }
-                </auth-button>
-              </OperationBtnStatusTips>,
-            ];
-            if (data.bk_cloud_id > 0) {
-              return [
-                <span
-                  v-bk-tooltips={t('暂不支持跨管控区域提取Key')}
-                  v-db-console="redis.clusterManage.extractKey">
-                  <auth-button
-                    action-id="redis_keys_extract"
-                    resource={data.id}
-                    permission={data.permission.redis_keys_extract}
-                    text
-                    theme={theme}
-                    disabled>
-                    {t('提取Key')}
-                  </auth-button>
-                </span>,
-                <span
-                  v-bk-tooltips={t('暂不支持跨管控区域删除Key')}
-                  v-db-console="redis.clusterManage.deleteKey">
-                  <auth-button
-                    action-id="redis_keys_delete"
-                    resource={data.id}
-                    permission={data.permission.redis_keys_delete}
-                    text
-                    theme={theme}
-                    disabled>
-                    { t('删除Key') }
-                  </auth-button>
-                </span>,
-                ...baseOperations,
-              ];
-            }
+                theme={theme}
+                onClick={() => handleShowBackup([data])}>
+                { t('备份') }
+              </auth-button>
+            </OperationBtnStatusTips>,
+            <OperationBtnStatusTips
+              v-db-console="redis.clusterManage.dbClear"
+              data={data}
+              disabled={!data.isOffline}>
+              <auth-button
+                action-id="redis_purge"
+                resource={data.id}
+                permission={data.permission.redis_purge}
+                disabled={data.isOffline}
+                text
+                theme={theme}
+                onClick={() => handleShowPurge([data])}>
+                { t('清档') }
+              </auth-button>
+            </OperationBtnStatusTips>,
+          ];
+          if (data.bk_cloud_id > 0) {
             return [
-              <OperationBtnStatusTips
-                v-db-console="redis.clusterManage.extractKey"
-                data={data}
-                disabled={!data.isOffline}>
+              <span
+                v-bk-tooltips={t('暂不支持跨管控区域提取Key')}
+                v-db-console="redis.clusterManage.extractKey">
                 <auth-button
                   action-id="redis_keys_extract"
                   resource={data.id}
                   permission={data.permission.redis_keys_extract}
-                  disabled={data.isOffline}
                   text
                   theme={theme}
-                  onClick={() => handleShowExtract([data])}>
+                  disabled>
                   {t('提取Key')}
                 </auth-button>
-              </OperationBtnStatusTips>,
-              <OperationBtnStatusTips
-                v-db-console="redis.clusterManage.deleteKey"
-                data={data}
-                disabled={!data.isOffline}>
+              </span>,
+              <span
+                v-bk-tooltips={t('暂不支持跨管控区域删除Key')}
+                v-db-console="redis.clusterManage.deleteKey">
                 <auth-button
                   action-id="redis_keys_delete"
                   resource={data.id}
                   permission={data.permission.redis_keys_delete}
-                  disabled={data.isOffline}
                   text
                   theme={theme}
-                  onClick={() => handlShowDeleteKeys([data])}>
+                  disabled>
                   { t('删除Key') }
                 </auth-button>
-              </OperationBtnStatusTips>,
+              </span>,
               ...baseOperations,
             ];
-          };
+          }
+          return [
+            <OperationBtnStatusTips
+              v-db-console="redis.clusterManage.extractKey"
+              data={data}
+              disabled={!data.isOffline}>
+              <auth-button
+                action-id="redis_keys_extract"
+                resource={data.id}
+                permission={data.permission.redis_keys_extract}
+                disabled={data.isOffline}
+                text
+                theme={theme}
+                onClick={() => handleShowExtract([data])}>
+                {t('提取Key')}
+              </auth-button>
+            </OperationBtnStatusTips>,
+            <OperationBtnStatusTips
+              v-db-console="redis.clusterManage.deleteKey"
+              data={data}
+              disabled={!data.isOffline}>
+              <auth-button
+                action-id="redis_keys_delete"
+                resource={data.id}
+                permission={data.permission.redis_keys_delete}
+                disabled={data.isOffline}
+                text
+                theme={theme}
+                onClick={() => handlShowDeleteKeys([data])}>
+                { t('删除Key') }
+              </auth-button>
+            </OperationBtnStatusTips>,
+            ...baseOperations,
+          ];
+        };
 
           return (
             <div class="operations">
@@ -1259,18 +1254,13 @@
       selected.value = list;
     };
 
-    /**
-     * 查看集群详情
-     */
-    const handleToDetails = (id: number) => {
-      stretchLayoutSplitScreen();
-      clusterId.value = id;
-    };
-
-    const handleOpenEntryConfig = (row: RedisModel) => {
-      showEditEntryConfig.value  = true;
-      clusterId.value = row.id;
-    };
+  /**
+   * 查看集群详情
+   */
+  const handleToDetails = (id: number) => {
+    stretchLayoutSplitScreen();
+    clusterId.value = id;
+  };
 
     const handleShowPassword = (id: number) => {
       passwordState.isShow = true;
@@ -1551,7 +1541,7 @@
           line-height: unset !important;
 
           .db-icon-copy,
-          .db-icon-edit {
+          .db-icon-visible1 {
             display: none;
             margin-top: 1px;
             margin-left: 4px;
@@ -1618,7 +1608,7 @@
         :deep(th:hover),
         :deep(td:hover) {
           .db-icon-copy,
-          .db-icon-edit {
+          .db-icon-visible1 {
             display: inline-block;
           }
         }
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
index 615adcc83b..27d5271bb1 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
@@ -73,10 +73,6 @@
     v-model:is-show="isShowExcelAuthorize"
     :cluster-type="ClusterTypes.SQLSERVER_HA"
     :ticket-type="TicketTypes.SQLSERVER_EXCEL_AUTHORIZE_RULES" />
-  <EditEntryConfig
-    :id="showEnterConfigClusterId"
-    v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getHaClusterDetail" />
   <ClusterReset
     v-if="currentData"
     v-model:is-show="isShowClusterReset"
@@ -113,6 +109,7 @@
   import {
     AccountTypes,
     ClusterTypes,
+    DBTypes,
     TicketTypes,
     type TicketTypesStrings,
     UserPersonalSettings,
@@ -124,7 +121,7 @@
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
-  import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
+  import EditEntryConfig, { type RowData } from '@components/cluster-entry-config/Index.vue';
   import DbTable from '@components/db-table/index.vue';
   import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
   import RenderInstances from '@components/render-instances/RenderInstances.vue';
@@ -199,8 +196,6 @@
   const tableRef = ref<InstanceType<typeof DbTable>>();
   const isShowExcelAuthorize = ref(false);
   const isShowClusterReset = ref(false)
-  const showEditEntryConfig = ref(false);
-  const showEnterConfigClusterId = ref(0);
   const currentData = ref<SqlServerHaClusterModel>()
   const selected = ref<SqlServerHaClusterModel[]>([])
 
@@ -303,6 +298,23 @@
     },
   });
 
+  const renderEntry = (data: RowData) => {
+    if (data.role === 'master_entry') {
+      return (
+        <span>
+          <bk-tag size="small" theme="success">{ t('主') }</bk-tag>{ data.entry }
+        </span>
+      )
+    }
+    return (
+      <span>
+        <bk-tag size="small" theme="info">{ t('从') }</bk-tag>{ data.entry }
+      </span>
+    )
+  }
+
+  const entrySort = (data: RowData[]) => data.sort(a => a.role === 'master_entry' ? -1 : 1);
+
   const columns = computed(() => [
     {
       label: 'ID',
@@ -377,14 +389,16 @@
                       data-text="NEW"/>
                   )
                 }
-                <bk-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  class="ml-4"
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </bk-button>
+                <span v-db-console="sqlserver.haClusterList.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getHaClusterDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.SQLSERVER}
+                    renderEntry={renderEntry}
+                    sort={entrySort}
+                    onSuccess={fetchData} />
+                </span>
               </>
             ),
           }}
@@ -528,14 +542,16 @@
                     }
                   ]
                 } />
-                <bk-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  class="ml-4"
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </bk-button>
+                <span v-db-console="sqlserver.haClusterList.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getHaClusterDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.SQLSERVER}
+                    renderEntry={renderEntry}
+                    sort={entrySort}
+                    onSuccess={fetchData} />
+                </span>
               </>
             )
           }}
@@ -824,10 +840,6 @@
     }, [] as string[]);
     copy(copyList.join('\n'));
   }
-  const handleOpenEntryConfig = (row: SqlServerHaClusterModel) => {
-    showEditEntryConfig.value  = true;
-    showEnterConfigClusterId.value = row.id;
-  };
 
   // 获取列表数据下的实例子列表
   const getInstanceListByRole = (dataList: SqlServerHaClusterModel[], field: keyof SqlServerHaClusterModel) => dataList.reduce((result, curRow) => {
@@ -1022,7 +1034,7 @@
 
       .db-icon-copy,
       .db-icon-link,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-left: 4px;
         color: @primary-color;
@@ -1049,7 +1061,7 @@
     td:hover {
       .db-icon-copy,
       .db-icon-link,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue
index 755293f817..df4da4435a 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue
@@ -71,10 +71,6 @@
     v-model:is-show="isShowExcelAuthorize"
     :cluster-type="ClusterTypes.SQLSERVER_SINGLE"
     :ticket-type="TicketTypes.SQLSERVER_EXCEL_AUTHORIZE_RULES" />
-  <EditEntryConfig
-    :id="showEnterConfigClusterId"
-    v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getSingleClusterDetail" />
   <ClusterReset
     v-if="currentData"
     v-model:is-show="isShowClusterReset"
@@ -112,6 +108,7 @@
   import {
     AccountTypes,
     ClusterTypes,
+    DBTypes,
     TicketTypes,
     type TicketTypesStrings,
     UserPersonalSettings,
@@ -195,8 +192,6 @@
   const tableRef = ref<InstanceType<typeof DbTable>>();
   const isShowExcelAuthorize = ref(false);
   const isShowClusterReset = ref(false)
-  const showEditEntryConfig = ref(false);
-  const showEnterConfigClusterId = ref(0);
   const currentData = ref<SqlServerSingleClusterModel>()
   const selected = ref<SqlServerSingleClusterModel[]>([])
 
@@ -364,14 +359,14 @@
                       data-text="NEW" />
                   )
                 }
-                <bk-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  class="ml-4"
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </bk-button>
+                <span v-db-console="sqlserver.singleClusterList.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getSingleClusterDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.SQLSERVER}
+                    onSuccess={fetchData} />
+                </span>
               </>
             ),
           }}
@@ -793,11 +788,6 @@
     copy(copyList.join('\n'));
   }
 
-  const handleOpenEntryConfig = (row: SqlServerSingleClusterModel) => {
-    showEditEntryConfig.value  = true;
-    showEnterConfigClusterId.value = row.id;
-  };
-
   // 获取列表数据下的实例子列表
   const getInstanceListByRole = (dataList: SqlServerSingleClusterModel[], field: keyof SqlServerSingleClusterModel) => dataList.reduce((result, curRow) => {
     result.push(...curRow[field] as SqlServerSingleClusterModel['storages']);
@@ -911,7 +901,7 @@
 
       .db-icon-copy,
       .db-icon-link,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-left: 4px;
         color: @primary-color;
@@ -937,7 +927,7 @@
     td:hover {
       .db-icon-copy,
       .db-icon-link,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list-instance/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list-instance/components/list/Index.vue
index 7503e31505..a405dbd7ea 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list-instance/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list-instance/components/list/Index.vue
@@ -142,7 +142,7 @@
         label: t('实例'),
         field: 'instance',
         fixed: 'left',
-        minWidth: 200,
+        width: 200,
         showOverflowTooltip: false,
         render: ({ data }: IColumn) => (
           <TextOverflowLayout>
@@ -163,37 +163,6 @@
           </TextOverflowLayout>
         )
       },
-      {
-        label: t('集群名称'),
-        field: 'cluster_name',
-        minWidth: 200,
-        showOverflowTooltip: false,
-        render: ({ data }: {data: TendbInstanceModel}) => (
-          <TextOverflowLayout>
-            {{
-              default: () => (
-                <router-link
-                  to={{
-                    name: 'tendbClusterList',
-                    query: {
-                      cluster_id: data.cluster_id,
-                    }
-                  }}
-                  target="_blank">
-                  {data.cluster_name}
-                </router-link>
-              ),
-              append: () => (
-                <db-icon
-                  type="copy"
-                  v-bk-tooltips={t('复制集群名称')}
-                  onClick={() => copy(data.cluster_name)} />
-              )
-
-            }}
-          </TextOverflowLayout>
-        ),
-      },
       {
         label: t('状态'),
         field: 'status',
@@ -217,9 +186,18 @@
         },
       },
       {
-        label: t('主访问入口'),
+        label: t('部署角色'),
+        field: 'role',
+        width: 140,
+        filter: {
+          list: columnAttrs.value.role,
+          checked: columnCheckedMap.value.role,
+        },
+      },
+      {
+        label: t('所属集群'),
         field: 'master_domain',
-        minWidth: 200,
+        width: 260,
         showOverflowTooltip: false,
         render: ({ data }: {data: TendbInstanceModel}) => (
           <TextOverflowLayout>
@@ -227,7 +205,7 @@
               default: () => data.master_domain || '--',
               append: () => data.master_domain && (
                 <db-icon
-                  v-bk-tooltips={t('复制主访问入口')}
+                  v-bk-tooltips={t('复制所属集群')}
                   type="copy"
                   onClick={() => copy(data.master_domain)} />
               )
@@ -236,31 +214,35 @@
         )
       },
       {
-        label: t('从访问入口'),
-        field: 'slave_domain',
-        minWidth: 200,
+        label: t('集群名称'),
+        field: 'cluster_name',
+        width: 180,
         showOverflowTooltip: false,
         render: ({ data }: {data: TendbInstanceModel}) => (
           <TextOverflowLayout>
             {{
-              default: () => data.slave_domain || '--',
-              append: () => data.slave_domain && (
+              default: () => (
+                <router-link
+                  to={{
+                    name: 'tendbClusterList',
+                    query: {
+                      cluster_id: data.cluster_id,
+                    }
+                  }}
+                  target="_blank">
+                  {data.cluster_name}
+                </router-link>
+              ),
+              append: () => (
                 <db-icon
-                  v-bk-tooltips={t('复制从访问入口')}
                   type="copy"
-                  onClick={() => copy(data.slave_domain)} />
+                  v-bk-tooltips={t('复制集群名称')}
+                  onClick={() => copy(data.cluster_name)} />
               )
+
             }}
           </TextOverflowLayout>
-        )
-      },
-      {
-        label: t('部署角色'),
-        field: 'role',
-        filter: {
-          list: columnAttrs.value.role,
-          checked: columnCheckedMap.value.role,
-        },
+        ),
       },
       {
         label: t('部署时间'),
@@ -273,7 +255,7 @@
         label: t('操作'),
         field: '',
         fixed: 'right',
-        width: 140,
+        width: 100,
         render: ({ data }: { data: TendbInstanceModel }) => (
           <auth-button
             action-id="tendbcluster_view"
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
index a95548a741..42c098be01 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
@@ -74,7 +74,7 @@
       <DbTable
         ref="tableRef"
         :columns="columns"
-        :data-source="getTendbClusterList"
+        :data-source="fetchData"
         :pagination-extra="paginationExtra"
         :row-class="setRowClass"
         selectable
@@ -123,10 +123,6 @@
     v-model:is-show="excelAuthorizeShow"
     :cluster-type="ClusterTypes.TENDBCLUSTER"
     :ticket-type="TicketTypes.TENDBCLUSTER_EXCEL_AUTHORIZE_RULES" />
-  <EditEntryConfig
-    :id="clusterId"
-    v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getSpiderDetail" />
   <ClusterExportData
     v-if="currentData"
     v-model:is-show="showDataExportSlider"
@@ -142,6 +138,7 @@
   // import Shrink from './components/Shrink.vue';
   import type { ISearchItem } from 'bkui-vue/lib/search-select/utils';
   import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
   import {
     useRoute,
     useRouter,
@@ -149,6 +146,7 @@
 
   import TendbClusterModel from '@services/model/spider/tendbCluster';
   import {
+    getSpiderClusterPrimary,
     getSpiderDetail,
     getSpiderInstanceList,
     getTendbClusterList,
@@ -169,6 +167,7 @@
   import {
     AccountTypes,
     ClusterTypes,
+    DBTypes,
     TicketTypes,
     type TicketTypesStrings,
     UserPersonalSettings,
@@ -178,8 +177,8 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import ExcelAuthorize from '@components/cluster-common/ExcelAuthorize.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
-  import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
+  import EditEntryConfig, { type RowData } from '@components/cluster-entry-config/Index.vue';
   import ClusterExportData from '@components/cluster-export-data/Index.vue'
   import DbStatus from '@components/db-status/index.vue';
   import DbTable from '@components/db-table/index.vue';
@@ -252,11 +251,11 @@
   // const isChangeCapacityForm = ref(false);
   const removeMNTInstanceIds = ref<number[]>([]);
   const excelAuthorizeShow = ref(false);
-  const showEditEntryConfig = ref(false);
   const clusterAuthorizeShow = ref(false);
   const showDataExportSlider = ref(false)
   const currentData = ref<IColumn['data']>()
   const selected = ref<TendbClusterModel[]>([]);
+  const clusterPrimaryMap = ref<Record<string, boolean>>({});
   // const operationData = shallowRef({} as TendbClusterModel);
 
   const hasSelected = computed(() => selected.value.length > 0);
@@ -347,6 +346,25 @@
     }
     return [];
   });
+
+  const renderEntry = (data: RowData) => {
+    if (data.role === 'master_entry') {
+      return (
+        <span>
+          <bk-tag size="small" theme="success">{ t('主') }</bk-tag>{ data.entry }
+        </span>
+      )
+    }
+    return (
+      <span>
+        <bk-tag size="small" theme="info">{ t('从') }</bk-tag>{ data.entry }
+      </span>
+    )
+  }
+
+  const entrySort = (data: RowData[]) => data.sort(a => a.role === 'master_entry' ? -1 : 1);
+
+
   const columns = computed(() => [
     {
       label: 'ID',
@@ -412,17 +430,16 @@
                     ]
                   } />
                 )}
-                <auth-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  v-db-console="tendbCluster.clusterManage.modifyEntryConfiguration"
-                  action-id="access_entry_edit"
-                  resource="tendbcluster"
-                  permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </auth-button>
+                <span v-db-console="tendbCluster.clusterManage.modifyEntryConfiguration">
+                  <EditEntryConfig
+                    id={data.id}
+                    getDetailInfo={getSpiderDetail}
+                    permission={data.permission.access_entry_edit}
+                    resource={DBTypes.TENDBCLUSTER}
+                    renderEntry={renderEntry}
+                    sort={entrySort}
+                    onSuccess={fetchData} />
+                </span>
               </>
             ),
           }}
@@ -556,17 +573,16 @@
                 onClick={() => copy(data.slaveDomainDisplayName)} />
             )
           }
-          <auth-button
-            v-bk-tooltips={t('修改入口配置')}
-            v-db-console="tendbCluster.clusterManage.modifyEntryConfiguration"
-            action-id="access_entry_edit"
-            resource="tendbcluster"
-            permission={data.permission.access_entry_edit}
-            text
-            theme="primary"
-            onClick={() => handleOpenEntryConfig(data)}>
-            <db-icon type="edit" />
-          </auth-button>
+          <span v-db-console="tendbCluster.clusterManage.modifyEntryConfiguration">
+            <EditEntryConfig
+              id={data.id}
+              getDetailInfo={getSpiderDetail}
+              permission={data.permission.access_entry_edit}
+              resource={DBTypes.TENDBCLUSTER}
+              renderEntry={renderEntry}
+              sort={entrySort}
+              onSuccess={fetchData} />
+          </span>
         </div>
       ),
     },
@@ -642,9 +658,7 @@
           {'Spider Master'}
         </RenderHeadCopy>
       ),
-      render: ({ data }: IColumn) => {
-        if (data.spider_master.length === 0) return '--';
-        return (
+      render: ({ data }: IColumn) => (
           <RenderInstances
             highlightIps={searchIp.value}
             data={data.spider_master}
@@ -654,9 +668,14 @@
             role="spider_master"
             clusterId={data.id}
             dataSource={getSpiderInstanceList}
-          />
-        );
-      },
+          >
+            {{
+              append: ({ data }: { data: TendbClusterModel['spider_master'][number] }) =>
+                clusterPrimaryMap.value[data.ip] &&
+                (<bk-tag class="is-primary" size="small">Primary</bk-tag>)
+            }}
+          </RenderInstances>
+        )
     },
     {
       label: 'Spider Slave',
@@ -1029,6 +1048,33 @@
     },
   ]);
 
+  const { run: getSpiderClusterPrimaryRun } = useRequest(getSpiderClusterPrimary, {
+    manual: true,
+    onSuccess(data) {
+      if (data.length > 0) {
+        clusterPrimaryMap.value = data.reduce<Record<string, boolean>>((acc, cur) => {
+          const ip = cur.primary.split(':')[0];
+          if (ip) {
+            acc[ip] = true;
+          }
+          return acc;
+        }, {});
+      }
+    },
+  });
+
+  const { runAsync: fetchData } = useRequest(getTendbClusterList, {
+    manual: true,
+    onSuccess(data) {
+      const clusterIds = data.results.map(item => item.id);
+      if (clusterIds.length > 0) {
+        getSpiderClusterPrimaryRun({
+          cluster_ids: clusterIds,
+        });
+      }
+    },
+  });
+
   const getMenuList = async (item: ISearchItem | undefined, keyword: string) => {
     if (item?.id !== 'creator' && keyword) {
       return getMenuListSearch(item, keyword, searchSelectData.value, searchValue.value);
@@ -1058,11 +1104,6 @@
     return searchSelectData.value.find(set => set.id === item.id)?.children || [];
   };
 
-  const handleOpenEntryConfig = (row: TendbClusterModel) => {
-    showEditEntryConfig.value  = true;
-    clusterId.value = row.id;
-  };
-
   const handleClickRelatedTicket = (billId: number) => {
     const route = router.resolve({
       name: 'bizTicketManage',
@@ -1396,6 +1437,18 @@
       }
     }
 
+    .table-wrapper {
+      background-color: white;
+
+      .bk-table {
+        height: 100% !important;
+      }
+
+      :deep(.bk-table-body) {
+        max-height: calc(100% - 100px);
+      }
+    }
+
     .is-shrink-table {
       :deep(.bk-table-body) {
         overflow: hidden auto;
@@ -1407,11 +1460,23 @@
 
       .domain {
         display: flex;
-        align-items: center;
+        flex-wrap: wrap;
+
+        .bk-search-select {
+          flex: 1;
+          max-width: 320px;
+          min-width: 320px;
+          margin-left: auto;
+        }
+      }
+
+      .is-primary {
+        color: #531dab !important;
+        background: #f9f0ff !important;
       }
 
       .db-icon-copy,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 2px;
         margin-left: 4px;
@@ -1419,25 +1484,38 @@
         cursor: pointer;
       }
 
-      .operations-more {
-        .db-icon-more {
-          display: block;
-          font-size: @font-size-normal;
-          color: @default-color;
-          cursor: pointer;
+      :deep(.cluster-name-container) {
+        display: flex;
+        align-items: center;
+        padding: 8px 0;
+        overflow: hidden;
+
+        .cluster-name {
+          line-height: 16px;
 
-          &:hover {
-            background-color: @bg-disable;
-            border-radius: 2px;
+          &__alias {
+            color: @light-gray;
           }
         }
+
+        .cluster-tags {
+          display: flex;
+          margin-left: 4px;
+          align-items: center;
+          flex-wrap: wrap;
+        }
+
+        .cluster-tag {
+          margin: 2px 0;
+          flex-shrink: 0;
+        }
       }
     }
 
     :deep(th:hover),
     :deep(td:hover) {
       .db-icon-copy,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
@@ -1452,98 +1530,15 @@
       }
     }
 
-    :deep(.cluster-name-container) {
-      display: flex;
-      align-items: center;
-      padding: 8px 0;
-      overflow: hidden;
-
-      .operations {
-        display: flex;
-        margin-bottom: 16px;
-        flex-wrap: wrap;
-      }
-
-      .is-shrink-table {
-        :deep(.bk-table-body) {
-          overflow: hidden auto;
-        }
-      }
-
-      :deep(td .cell) {
-        line-height: normal !important;
-
-        .domain {
-          display: flex;
-          align-items: center;
-        }
-
-        .db-icon-copy,
-        .db-icon-edit {
-          display: none;
-          margin-top: 2px;
-          margin-left: 4px;
-          color: @primary-color;
-          cursor: pointer;
-        }
-
-        .operations-more {
-          .db-icon-more {
-            display: block;
-            font-size: @font-size-normal;
-            color: @default-color;
-            cursor: pointer;
-
-            &:hover {
-              background-color: @bg-disable;
-              border-radius: 2px;
-            }
-          }
-        }
-      }
-
-      :deep(th:hover),
-      :deep(td:hover) {
-        .db-icon-copy,
-        .db-icon-edit {
-          display: inline-block !important;
-        }
-      }
-
-      :deep(.is-offline) {
-        a {
-          color: @gray-color;
-        }
-
-        .cell {
-          color: @disable-color;
-        }
-      }
-
-      :deep(.cluster-name-container) {
-        display: flex;
-        align-items: center;
-        padding: 8px 0;
-        overflow: hidden;
-
-        .cluster-name {
-          line-height: 16px;
-
-          &__alias {
-            color: @light-gray;
-          }
-        }
-
-        .cluster-tags {
-          display: flex;
-          margin-left: 4px;
-          align-items: center;
-          flex-wrap: wrap;
-        }
+    :deep(.operations-more) {
+      .db-icon-more {
+        font-size: 16px;
+        color: @default-color;
+        cursor: pointer;
 
-        .cluster-tag {
-          margin: 2px;
-          flex-shrink: 0;
+        &:hover {
+          background-color: @bg-disable;
+          border-radius: 2px;
         }
       }
     }