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

---
 .../components/cluster-entry-config/Index.vue | 105 ++++----
 .../cluster-entry-config/MultipleInput.vue    | 126 ----------
 .../cluster-entry-config/RenderBindIps.vue    | 231 ++++++++++++++++++
 .../render-instances/RenderInstances.vue      |  72 ++++--
 dbm-ui/frontend/src/locales/zh-cn.json        |   2 +-
 .../model/sqlserver/sqlserver-ha-cluster.ts   |   1 +
 .../sqlserver/sqlserver-single-cluster.ts     |   1 +
 dbm-ui/frontend/src/services/source/spider.ts |  11 +
 .../es-manage/list/components/list/Index.vue  |  27 +-
 .../list/components/list/Index.vue            |  28 +--
 .../list/components/list/Index.vue            |  26 +-
 .../mysql/ha-cluster-list/components/List.vue |  59 +++--
 .../single-cluster-list/components/List.vue   |  29 ++-
 .../list/components/list/Index.vue            |  28 +--
 .../redis/list-ha/components/list/Index.vue   |  24 +-
 .../redis/list/components/list/Index.vue      |  27 +-
 .../list/components/list/Index.vue            |  88 ++++---
 .../ha-cluster-list/components/List.vue       |  37 ++-
 .../single-cluster/components/List.vue        |  24 +-
 19 files changed, 558 insertions(+), 388 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

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 c28901eff8..ba88d6b918 100644
--- a/dbm-ui/frontend/src/components/cluster-entry-config/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-entry-config/Index.vue
@@ -13,9 +13,11 @@
 
 <template>
   <BkDialog
+    class="entry-config-dialog"
     :is-show="isShow"
     :quick-close="false"
-    :title="t('修改入口配置')"
+    :show-mask="false"
+    :title="t('查看域名/IP对应关系')"
     :width="640"
     @closed="handleClose">
     <BkLoading :loading="isLoading">
@@ -27,20 +29,6 @@
         :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>
 
@@ -60,7 +48,6 @@
       | SqlServerSingleClusterDetailModel
   ">
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
   import EsModel from '@services/model/es/es';
   import HdfsModel from '@services/model/hdfs/hdfs';
@@ -69,16 +56,16 @@
   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/clusters';
   import type { ResourceItem, ResourceRedisItem } from '@services/types';
 
-  import { messageError, messageSuccess } from '@utils';
+  import type { DBTypes } from '@common/const';
 
-  import MultipleInput, { checkIp } from './MultipleInput.vue';
+  import RenderBindIps from './RenderBindIps.vue';
 
   export interface RowData {
     type: string,
     entry: string,
+    role: string,
     ips: string,
     port: number,
   }
@@ -89,12 +76,16 @@
 
   interface Props {
     id?: number
+    dbConsole: string;
+    resource: DBTypes;
+    permission: boolean;
     getDetailInfo: (params: any) => Promise<T>
   }
 
-  type UpdateClusterEntryConfigParams = ServiceParameters<typeof updateClusterEntryConfig>;
-
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    id: 0,
+    disabled: true,
+  });
 
   const emits = defineEmits<Emits>();
 
@@ -112,27 +103,39 @@
     {
       label: t('访问入口'),
       field: 'entry',
+      width: 263,
       showOverflowTooltip: true,
+      render: ({ data }: {data: RowData}) => {
+        if (data.role === 'master_entry') {
+          return (
+            <>
+              <bk-tag size="small" theme="success">{ t('主') }</bk-tag>{ data.entry }
+            </>
+          )
+        }
+        return (
+          <>
+            <bk-tag size="small" theme="info">{ t('从') }</bk-tag>{ data.entry }
+          </>
+        )
+      },
     },
     {
       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}
+          dbConsole={props.dbConsole}
+          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) {
       fetchResources();
@@ -150,6 +153,7 @@
         tableData.value = 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,
         }));
@@ -168,29 +172,9 @@
     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>
@@ -205,4 +189,9 @@
       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..73c9507538
--- /dev/null
+++ b/dbm-ui/frontend/src/components/cluster-entry-config/RenderBindIps.vue
@@ -0,0 +1,231 @@
+<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"
+        :v-db-console="dbConsole"
+        @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 { ipv4 } from '@common/regex';
+
+  import type { RowData } from './Index.vue';
+
+  export const checkIp = (value: string) => ipv4.test(value);
+
+  interface Props {
+    data: RowData;
+    dbConsole: string;
+    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/clusters';
+
+  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 = checkIp(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..386e3a07ec 100644
--- a/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
+++ b/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
@@ -35,6 +35,18 @@
             size="small">
             {{ t('不可用') }}
           </BkTag>
+          <span
+            v-for="item in tagKeyConfig"
+            :key="item.name">
+            <BkTag
+              v-if="(item.name && inst[item.name] === item.value) || (item.ipMatch && item.mapData?.[inst.ip])"
+              :class="item.className"
+              size="small"
+              :style="item.style"
+              :theme="item.theme">
+              {{ item.displayName }}
+            </BkTag>
+          </span>
           <template v-if="index === 0">
             <DbIcon
               ref="copyRootRef"
@@ -123,6 +135,42 @@
     status: string;
     create_at: string;
   }
+
+  interface InstanceData {
+    bk_instance_id: number;
+    ip: string;
+    name: string;
+    port: number;
+    status: string;
+    [key: string]: any;
+  }
+
+  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[];
+    tagKeyConfig?: {
+      displayName: string;
+      name?: string;
+      value?: boolean | number | string;
+      className?: string;
+      style?: string;
+      theme?: 'success' | 'warning' | 'danger' | 'info';
+      // ip匹配模式
+      ipMatch?: boolean;
+      // ip是否展示tag的映射关系
+      mapData?: Record<string, boolean>;
+    }[];
+  }
 </script>
 <script setup lang="tsx" generic="T extends InstanceListData">
   import tippy, { type Instance, type SingleTarget } from 'tippy.js';
@@ -147,31 +195,9 @@
 
   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[],
-  }
   const props = withDefaults(defineProps<Props>(), {
     highlightIps: () => ([]),
+    tagKeyConfig: () => ([]),
   });
 
   const copy = useCopy();
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index f8c6b7b3ce..99282ffbc2 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -2317,7 +2317,6 @@
     "授权 IP": "授权 IP",
     "授权 IP 不能为空": "授权 IP 不能为空",
     "复制成功n个IP": "复制成功 {n} 个 IP",
-    "修改入口配置": "修改入口配置",
     "IP 输入有误": "IP 输入有误",
     "修改成功": "修改成功",
     "修改失败": "修改失败",
@@ -3502,5 +3501,6 @@
     "支持 %（指代任意长度字符串）,*（指代全部）2个通配符": "支持 %（指代任意长度字符串）,*（指代全部）2个通配符",
     "单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入": "单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入",
     "包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用",
+    "查看域名/IP对应关系": "查看域名/IP对应关系",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
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 c243b1cf87..d16764fc0b 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 efcd561b37..8a21358a9a 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
@@ -69,6 +69,7 @@ export default class SqlServerSingleCluster extends TimeBaseClassModel {
     title: string;
   }>;
   permission: {
+    access_entry_edit: boolean;
     sqlserver_view: boolean;
   };
   phase: string;
diff --git a/dbm-ui/frontend/src/services/source/spider.ts b/dbm-ui/frontend/src/services/source/spider.ts
index f5694bfac5..23dfb2640e 100644
--- a/dbm-ui/frontend/src/services/source/spider.ts
+++ b/dbm-ui/frontend/src/services/source/spider.ts
@@ -272,3 +272,14 @@ export const listSpiderResourceInstances = (params: { bk_biz_id: number } & Reco
     `/apis/mysql/bizs/${params.bk_biz_id}/spider_resources/list_instances/`,
     params,
   );
+
+/**
+ * 获取集群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/views/es-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
index ec6fea4480..3d051cfa0e 100644
--- a/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
@@ -100,7 +100,10 @@
   <EditEntryConfig
     :id="clusterId"
     v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getEsDetail" />
+    db-console="es.clusterManage.modifyEntryConfiguration"
+    :get-detail-info="getEsDetail"
+    :permission="entryEditable"
+    :resource="DBTypes.ES" />
 </template>
 <script setup lang="tsx">
   import { InfoBox, Message } from 'bkui-vue';
@@ -133,6 +136,7 @@
 
   import {
     ClusterTypes,
+    DBTypes,
     UserPersonalSettings,
   } from '@common/const';
 
@@ -276,6 +280,7 @@
   const isShowPassword = ref(false);
   const isInit = ref(true);
   const showEditEntryConfig = ref(false);
+  const entryEditable = ref(false);
   const selected = ref<EsModel[]>([])
   const operationData = shallowRef<EsModel>();
   const tableDataActionLoadingMap = shallowRef<Record<number, boolean>>({});
@@ -377,17 +382,10 @@
                     ]
                   } />
                 )}
-                <auth-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  v-db-console="es.clusterManage.modifyEntryConfiguration"
-                  action-id="access_entry_edit"
-                  resource="es"
-                  permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </auth-button>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
           }}
@@ -839,6 +837,7 @@
   const handleOpenEntryConfig = (row: EsModel) => {
     showEditEntryConfig.value  = true;
     clusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   const fetchTableData = (loading?:boolean) => {
@@ -1143,7 +1142,7 @@
         align-items: center;
       }
 
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 1px;
         margin-left: 4px;
@@ -1153,7 +1152,7 @@
     }
 
     :deep(td:hover) {
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
diff --git a/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
index 70af0f4591..fc2f3b1ae4 100644
--- a/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
@@ -111,7 +111,10 @@
   <EditEntryConfig
     :id="clusterId"
     v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getHdfsDetail" />
+    db-console="hdfs.clusterManage.modifyEntryConfiguration"
+    :get-detail-info="getHdfsDetail"
+    :permission="entryEditable"
+    :resource="DBTypes.HDFS" />
 </template>
 <script setup lang="tsx">
   import { InfoBox, Message } from 'bkui-vue';
@@ -142,6 +145,7 @@
 
   import {
     ClusterTypes,
+    DBTypes,
     UserPersonalSettings,
   } from '@common/const';
 
@@ -228,7 +232,7 @@
   const isShowSettings = ref(false);
   const isInit = ref(true);
   const showEditEntryConfig = ref(false);
-
+  const entryEditable = ref(false);
   const operationData = shallowRef<HdfsModel>();
   const selected = ref<HdfsModel[]>([])
   const selectedIds = computed(() => selected.value.map(item => item.id));
@@ -391,17 +395,10 @@
                       ]
                     } />
                   )}
-                  <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>
+                  <db-icon
+                    v-bk-tooltips={t('查看域名/IP对应关系')}
+                    type="bk-dbm-icon db-icon-visible1"
+                    onClick={() => handleOpenEntryConfig(data)} />
                 </>
               ),
             }}
@@ -864,6 +861,7 @@
   const handleOpenEntryConfig = (row: HdfsModel) => {
     showEditEntryConfig.value  = true;
     clusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   const fetchTableData = (loading?:boolean) => {
@@ -1082,7 +1080,7 @@
         align-items: center;
       }
 
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-left: 4px;
         color: @primary-color;
@@ -1091,7 +1089,7 @@
     }
 
     :deep(tr:hover) {
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
diff --git a/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
index ec6033f0f4..39a12330d7 100644
--- a/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
@@ -99,7 +99,10 @@
   <EditEntryConfig
     :id="clusterId"
     v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getKafkaDetail" />
+    db-console="kafka.clusterManage.modifyEntryConfiguration"
+    :get-detail-info="getKafkaDetail"
+    :permission="entryEditable"
+    :resource="DBTypes.KAFKA" />
 </template>
 <script setup lang="tsx">
   import { InfoBox, Message } from 'bkui-vue';
@@ -219,6 +222,7 @@
   const isShowPassword = ref(false);
   const isInit = ref(true);
   const showEditEntryConfig = ref(false);
+  const entryEditable = ref(false);
   const selected = ref<KafkaModel[]>([])
   const operationData = shallowRef<KafkaModel>();
 
@@ -375,17 +379,10 @@
                     ]
                   } />
                 )}
-                <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>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
           }}
@@ -790,6 +787,7 @@
   const handleOpenEntryConfig = (row: KafkaModel) => {
     showEditEntryConfig.value  = true;
     clusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   const fetchTableData = (loading?:boolean) => {
@@ -1088,7 +1086,7 @@
         align-items: center;
       }
 
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 2px;
         margin-left: 4px;
@@ -1098,7 +1096,7 @@
     }
 
     :deep(tr:hover) {
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
diff --git a/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
index 097957e9b1..fc6ebeb9e7 100644
--- a/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
@@ -103,7 +103,10 @@
   <EditEntryConfig
     :id="showEnterConfigClusterId"
     v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getTendbhaDetail" />
+    db-console="mysql.haClusterList.modifyEntryConfiguration"
+    :get-detail-info="getTendbhaDetail"
+    :permission="entryEditable"
+    :resource="DBTypes.MYSQL" />
   <CreateSubscribeRuleSlider
     v-model="showCreateSubscribeRuleSlider"
     :selected-clusters="selectedClusterList"
@@ -146,6 +149,7 @@
   import {
     AccountTypes,
     ClusterTypes,
+    DBTypes,
     TicketTypes,
     type TicketTypesStrings,
     UserPersonalSettings,
@@ -239,10 +243,11 @@
   const isInit = ref(false);
   const showEditEntryConfig = ref(false);
   const showEnterConfigClusterId = ref(0);
+  const entryEditable = ref(false);
   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[]>([])
   /** 集群授权 */
@@ -400,17 +405,10 @@
                     }
                   ]
                 } />
-                <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>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
           }}
@@ -557,17 +555,10 @@
                     }
                   ]
                 } />
-                <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>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             )
           }}
@@ -681,6 +672,16 @@
         <RenderInstances
           highlightIps={batchSearchIpInatanceList.value}
           data={data.slaves || []}
+          tagKeyConfig={
+            [
+              {
+                name: 'is_stand_by',
+                displayName: 'Standby',
+                value: true,
+                className: 'is-stand-by'
+              }
+            ]
+          }
           title={t('【inst】实例预览', { inst: data.master_domain, title: 'Slave' })}
           role="slave"
           clusterId={data.id}
@@ -958,6 +959,7 @@
   const handleOpenEntryConfig = (row: TendbhaModel) => {
     showEditEntryConfig.value  = true;
     showEnterConfigClusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   const handleSelection = (data: TendbhaModel, list: TendbhaModel[]) => {
@@ -1155,8 +1157,13 @@
         }
       }
 
+      .is-stand-by {
+        color: #531dab;
+        background: #f9f0ff;
+      }
+
       .db-icon-copy,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 1px;
         margin-left: 4px;
@@ -1218,7 +1225,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/mysql/single-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
index c02a275458..42cb318b17 100644
--- a/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
@@ -89,7 +89,10 @@
   <EditEntryConfig
     :id="clusterId"
     v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getTendbsingleDetail" />
+    db-console="mysql.singleClusterList.modifyEntryConfiguration"
+    :get-detail-info="getTendbsingleDetail"
+    :permission="entryEditable"
+    :resource="DBTypes.MYSQL" />
   <ClusterExportData
     v-if="currentData"
     v-model:is-show="showDataExportSlider"
@@ -130,6 +133,7 @@
   import {
     AccountTypes,
     ClusterTypes,
+    DBTypes,
     TicketTypes,
     type TicketTypesStrings,
     UserPersonalSettings,
@@ -209,8 +213,9 @@
   const isShowExcelAuthorize = ref(false);
   const showDataExportSlider = ref(false)
   const showEditEntryConfig = ref(false);
+  const entryEditable = ref(false);
   const selected = ref<TendbsingleModel[]>([])
-  const currentData = ref<ColumnData['data']>()
+  const currentData = ref<ColumnData['data']>();
 
   const authorizeState = reactive({
     isShow: false,
@@ -359,17 +364,10 @@
                     }
                   ]
                 } />
-                <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>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
           }}
@@ -810,6 +808,7 @@
   const handleOpenEntryConfig = (row: TendbsingleModel) => {
     showEditEntryConfig.value  = true;
     clusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   const handleShowDataExportSlider = (data: TendbsingleModel) => {
@@ -975,7 +974,7 @@
         }
 
         .db-icon-copy,
-        .db-icon-edit {
+        .db-icon-visible1 {
           display: none;
           margin-top: 1px;
           margin-left: 4px;
@@ -1007,7 +1006,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/pulsar-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
index 381d12d701..21badadeb9 100644
--- a/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
@@ -96,7 +96,10 @@
   <EditEntryConfig
     :id="clusterId"
     v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getPulsarDetail" />
+    db-console="pulsar.clusterManage.modifyEntryConfiguration"
+    :get-detail-info="getPulsarDetail"
+    :permission="entryEditable"
+    :resource="DBTypes.PULSAR" />
 </template>
 <script setup lang="tsx">
   import { InfoBox, Message } from 'bkui-vue';
@@ -124,7 +127,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';
@@ -219,6 +222,7 @@
   const isShowPassword = ref(false);
   const isInit = ref(true);
   const showEditEntryConfig = ref(false);
+  const entryEditable = ref(false);
   const selected = ref<PulsarModel[]>([])
   const operationData = shallowRef<PulsarModel>();
 
@@ -308,17 +312,10 @@
                     ]
                   } />
                 )}
-                <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>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
           }}
@@ -803,6 +800,7 @@
   const handleOpenEntryConfig = (row: PulsarModel) => {
     showEditEntryConfig.value  = true;
     clusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   const fetchTableData = (loading?:boolean) => {
@@ -1120,7 +1118,7 @@
         align-items: center;
       }
 
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 2px;
         margin-left: 4px;
@@ -1130,7 +1128,7 @@
     }
 
     :deep(tr:hover) {
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
diff --git a/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue b/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue
index 1ff2fbb121..03af355b23 100644
--- a/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue
@@ -126,7 +126,10 @@
     <EditEntryConfig
       :id="clusterId"
       v-model:is-show="showEditEntryConfig"
-      :get-detail-info="getRedisDetail" />
+      db-console="redis.haClusterManage.modifyEntryConfiguration"
+      :get-detail-info="getRedisDetail"
+      :permission="entryEditable"
+      :resource="DBTypes.REDIS" />
   </div>
 </template>
 
@@ -274,7 +277,7 @@
 
   const isShowDropdown = ref(false);
   const showEditEntryConfig = ref(false);
-
+  const entryEditable = ref(false);
   const selected = shallowRef<RedisModel[]>([])
 
   /** 查看密码 */
@@ -464,14 +467,14 @@
                 )}
                 <auth-button
                   v-db-console="redis.haClusterManage.modifyEntryConfiguration"
-                  v-bk-tooltips={t('修改入口配置')}
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
                   action-id="access_entry_edit"
                   resource="redis"
                   permission={data.permission.access_entry_edit}
                   text
                   theme="primary"
                   onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
+                  <db-icon type="bk-dbm-icon db-icon-visible1" />
                 </auth-button>
               </>
             ),
@@ -638,15 +641,19 @@
                 )}
                 <auth-button
                   v-db-console="redis.haClusterManage.modifyEntryConfiguration"
-                  v-bk-tooltips={t('修改入口配置')}
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
                   action-id="access_entry_edit"
                   resource="redis"
                   permission={data.permission.access_entry_edit}
                   text
                   theme="primary"
                   onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
+                  <db-icon type="bk-dbm-icon db-icon-visible1" />
                 </auth-button>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             )
           }}
@@ -1139,6 +1146,7 @@
   const handleOpenEntryConfig = (row: RedisModel) => {
     showEditEntryConfig.value = true;
     clusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   const handleShowPassword = (id: number) => {
@@ -1322,7 +1330,7 @@
           line-height: unset !important;
 
           .db-icon-copy,
-          .db-icon-edit {
+          .db-icon-visible1 {
             display: none;
             margin-top: 1px;
             margin-left: 4px;
@@ -1389,7 +1397,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/redis/list/components/list/Index.vue b/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
index b52f68e37f..9355ec9149 100644
--- a/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
@@ -162,7 +162,10 @@
   <EditEntryConfig
     :id="clusterId"
     v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getRedisDetail" />
+    db-console="redis.clusterManage.modifyEntryConfiguration"
+    :get-detail-info="getRedisDetail"
+    :permission="entryEditable"
+    :resource="DBTypes.REDIS" />
 </template>
 <script setup lang="tsx">
   import { InfoBox, Message } from 'bkui-vue';
@@ -329,7 +332,7 @@
   const tableRef = ref<InstanceType<typeof DbTable>>();
   const isShowDropdown = ref(false);
   const showEditEntryConfig = ref(false);
-
+  const entryEditable = ref(false);
   const selected = ref<RedisModel[]>([]);
 
   /** 查看密码 */
@@ -542,17 +545,10 @@
                     ]
                   } />
                 )}
-                <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>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
           }}
@@ -1269,6 +1265,7 @@
   const handleOpenEntryConfig = (row: RedisModel) => {
     showEditEntryConfig.value  = true;
     clusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   const handleShowPassword = (id: number) => {
@@ -1550,7 +1547,7 @@
           line-height: unset !important;
 
           .db-icon-copy,
-          .db-icon-edit {
+          .db-icon-visible1 {
             display: none;
             margin-top: 1px;
             margin-left: 4px;
@@ -1617,7 +1614,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/spider-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
index f8ea9da6d9..8f727eac17 100644
--- a/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/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
@@ -126,7 +126,10 @@
   <EditEntryConfig
     :id="clusterId"
     v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getSpiderDetail" />
+    db-console="tendbCluster.clusterManage.modifyEntryConfiguration"
+    :get-detail-info="getSpiderDetail"
+    :permission="entryEditable"
+    :resource="DBTypes.TENDBCLUSTER" />
   <ClusterExportData
     v-if="currentData"
     v-model:is-show="showDataExportSlider"
@@ -142,6 +145,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 +153,7 @@
 
   import TendbClusterModel from '@services/model/spider/tendbCluster';
   import {
+    getSpiderClusterPrimary,
     getSpiderDetail,
     getSpiderInstanceList,
     getTendbClusterList,
@@ -170,6 +175,7 @@
   import {
     AccountTypes,
     ClusterTypes,
+    DBTypes,
     TicketTypes,
     type TicketTypesStrings,
     UserPersonalSettings,
@@ -254,10 +260,12 @@
   const removeMNTInstanceIds = ref<number[]>([]);
   const excelAuthorizeShow = ref(false);
   const showEditEntryConfig = ref(false);
+  const entryEditable = 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);
@@ -413,17 +421,10 @@
                     ]
                   } />
                 )}
-                <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>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
           }}
@@ -557,17 +558,10 @@
                 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>
+          <db-icon
+            v-bk-tooltips={t('查看域名/IP对应关系')}
+            type="bk-dbm-icon db-icon-visible1"
+            onClick={() => handleOpenEntryConfig(data)} />
         </div>
       ),
     },
@@ -649,6 +643,16 @@
           <RenderInstances
             highlightIps={searchIp.value}
             data={data.spider_master}
+            tagKeyConfig={
+              [
+                {
+                  displayName: 'Primary',
+                  style: 'color: #531dab;background: #f9f0ff;',
+                  ipMatch: true,
+                  mapData: clusterPrimaryMap.value,
+                }
+              ]
+            }
             title={t('【inst】实例预览', {
               inst: data.master_domain, title: 'Spider Master',
             })}
@@ -1030,6 +1034,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);
@@ -1062,6 +1093,7 @@
   const handleOpenEntryConfig = (row: TendbClusterModel) => {
     showEditEntryConfig.value  = true;
     clusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   const handleClickRelatedTicket = (billId: number) => {
@@ -1412,7 +1444,7 @@
       }
 
       .db-icon-copy,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 2px;
         margin-left: 4px;
@@ -1438,7 +1470,7 @@
     :deep(th:hover),
     :deep(td:hover) {
       .db-icon-copy,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }
@@ -1480,7 +1512,7 @@
         }
 
         .db-icon-copy,
-        .db-icon-edit {
+        .db-icon-visible1 {
           display: none;
           margin-top: 2px;
           margin-left: 4px;
@@ -1506,7 +1538,7 @@
       :deep(th:hover),
       :deep(td:hover) {
         .db-icon-copy,
-        .db-icon-edit {
+        .db-icon-visible1 {
           display: inline-block !important;
         }
       }
diff --git a/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue
index fc6194ffde..44eec49e17 100644
--- a/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue
@@ -78,7 +78,10 @@
   <EditEntryConfig
     :id="showEnterConfigClusterId"
     v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getHaClusterDetail" />
+    db-console="sqlserver.haClusterList.modifyEntryConfiguration"
+    :get-detail-info="getHaClusterDetail"
+    :permission="entryEditable"
+    :resource="DBTypes.SQLSERVER" />
   <ClusterReset
     v-if="currentData"
     v-model:is-show="isShowClusterReset"
@@ -115,6 +118,7 @@
   import {
     AccountTypes,
     ClusterTypes,
+    DBTypes,
     TicketTypes,
     type TicketTypesStrings,
     UserPersonalSettings,
@@ -202,6 +206,7 @@
   const isShowExcelAuthorize = ref(false);
   const isShowClusterReset = ref(false)
   const showEditEntryConfig = ref(false);
+  const entryEditable = ref(false);
   const showEnterConfigClusterId = ref(0);
   const currentData = ref<SqlServerHaClusterModel>()
   const selected = ref<SqlServerHaClusterModel[]>([])
@@ -382,14 +387,10 @@
                       data-text="NEW"/>
                   )
                 }
-                <bk-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  class="ml-4"
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </bk-button>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
           }}
@@ -533,14 +534,10 @@
                     }
                   ]
                 } />
-                <bk-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  class="ml-4"
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </bk-button>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             )
           }}
@@ -829,9 +826,11 @@
     }, [] as string[]);
     copy(copyList.join('\n'));
   }
+
   const handleOpenEntryConfig = (row: SqlServerHaClusterModel) => {
     showEditEntryConfig.value  = true;
     showEnterConfigClusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   // 获取列表数据下的实例子列表
@@ -1027,7 +1026,7 @@
 
       .db-icon-copy,
       .db-icon-link,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 1px;
         margin-left: 4px;
@@ -1055,7 +1054,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/sqlserver-manage/single-cluster/components/List.vue b/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue
index 98b4367a57..b5766d7348 100644
--- a/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue
+++ b/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue
@@ -76,7 +76,10 @@
   <EditEntryConfig
     :id="showEnterConfigClusterId"
     v-model:is-show="showEditEntryConfig"
-    :get-detail-info="getSingleClusterDetail" />
+    db-console="sqlserver.singleClusterList.modifyEntryConfiguration"
+    :get-detail-info="getSingleClusterDetail"
+    :permission="entryEditable"
+    :resource="DBTypes.SQLSERVER" />
   <ClusterReset
     v-if="currentData"
     v-model:is-show="isShowClusterReset"
@@ -114,6 +117,7 @@
   import {
     AccountTypes,
     ClusterTypes,
+    DBTypes,
     TicketTypes,
     type TicketTypesStrings,
     UserPersonalSettings,
@@ -198,6 +202,7 @@
   const isShowExcelAuthorize = ref(false);
   const isShowClusterReset = ref(false)
   const showEditEntryConfig = ref(false);
+  const entryEditable = ref(false);
   const showEnterConfigClusterId = ref(0);
   const currentData = ref<SqlServerSingleClusterModel>()
   const selected = ref<SqlServerSingleClusterModel[]>([])
@@ -369,14 +374,10 @@
                       data-text="NEW" />
                   )
                 }
-                <bk-button
-                  v-bk-tooltips={t('修改入口配置')}
-                  class="ml-4"
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="edit" />
-                </bk-button>
+                <db-icon
+                  v-bk-tooltips={t('查看域名/IP对应关系')}
+                  type="bk-dbm-icon db-icon-visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
           }}
@@ -801,6 +802,7 @@
   const handleOpenEntryConfig = (row: SqlServerSingleClusterModel) => {
     showEditEntryConfig.value  = true;
     showEnterConfigClusterId.value = row.id;
+    entryEditable.value = row.permission.access_entry_edit;
   };
 
   // 获取列表数据下的实例子列表
@@ -916,7 +918,7 @@
 
       .db-icon-copy,
       .db-icon-link,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: none;
         margin-top: 1px;
         margin-left: 4px;
@@ -943,7 +945,7 @@
     td:hover {
       .db-icon-copy,
       .db-icon-link,
-      .db-icon-edit {
+      .db-icon-visible1 {
         display: inline-block !important;
       }
     }

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

---
 .../components/cluster-entry-config/Index.vue | 46 +++++++------------
 .../render-instances/RenderInstances.vue      | 22 +++------
 .../es-manage/list/components/list/Index.vue  |  2 +-
 .../list/components/list/Index.vue            |  2 +-
 .../list/components/list/Index.vue            |  2 +-
 .../mysql/ha-cluster-list/components/List.vue |  4 +-
 .../single-cluster-list/components/List.vue   |  2 +-
 .../list/components/list/Index.vue            |  2 +-
 .../redis/list-ha/components/list/Index.vue   | 26 ++---------
 .../redis/list/components/list/Index.vue      |  2 +-
 .../list/components/list/Index.vue            |  4 +-
 .../ha-cluster-list/components/List.vue       |  4 +-
 .../single-cluster/components/List.vue        |  2 +-
 .../index/components/UpdateResult.vue         |  2 +-
 14 files changed, 41 insertions(+), 81 deletions(-)

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 ba88d6b918..1eb36dab93 100644
--- a/dbm-ui/frontend/src/components/cluster-entry-config/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-entry-config/Index.vue
@@ -32,32 +32,9 @@
   </BkDialog>
 </template>
 
-<script
-  setup
-  lang="tsx"
-  generic="
-    T extends
-      | ResourceItem
-      | ResourceRedisItem
-      | SpiderModel
-      | EsModel
-      | HdfsModel
-      | KafkaModel
-      | PulsarModel
-      | SqlServerHaClusterDetailModel
-      | SqlServerSingleClusterDetailModel
-  ">
+<script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
-  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 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 type { ResourceItem, ResourceRedisItem } from '@services/types';
-
   import type { DBTypes } from '@common/const';
 
   import RenderBindIps from './RenderBindIps.vue';
@@ -79,7 +56,17 @@
     dbConsole: string;
     resource: DBTypes;
     permission: boolean;
-    getDetailInfo: (params: any) => Promise<T>
+    getDetailInfo: (params: any) => Promise<{
+      cluster_entry_details: {
+        cluster_entry_type: string,
+        entry: string,
+        role: string,
+        target_details: {
+          ip: string,
+          port: number
+        }[]
+      }[]
+    }>
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -105,7 +92,7 @@
       field: 'entry',
       width: 263,
       showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => {
+      render: ({ data }: { data: RowData }) => {
         if (data.role === 'master_entry') {
           return (
             <>
@@ -124,7 +111,7 @@
       label: 'Bind IP',
       field: 'ips',
       width: 263,
-      render: ({ data }: {data: RowData}) => (
+      render: ({ data }: { data: RowData }) => (
         <RenderBindIps
           v-model={props.id}
           data={data}
@@ -149,7 +136,7 @@
     props.getDetailInfo({
       id: props.id,
     })
-      .then((res: T) => {
+      .then((res) => {
         tableData.value = res.cluster_entry_details.map(item => ({
           type: item.cluster_entry_type,
           entry: item.entry,
@@ -166,7 +153,7 @@
       });
   };
 
-  const generateCellClass = (cell: { field: string}) => (cell.field === 'ips' ? 'entry-config-ips-column' : '');
+  const generateCellClass = (cell: { field: string }) => (cell.field === 'ips' ? 'entry-config-ips-column' : '');
 
   const handleClose = () => {
     isShow.value = false;
@@ -189,6 +176,7 @@
       line-height: normal !important;
     }
   }
+
   .entry-config-dialog {
     .bk-modal-footer {
       display: none;
diff --git a/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue b/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
index 386e3a07ec..85c9481305 100644
--- a/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
+++ b/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
@@ -130,31 +130,21 @@
 </template>
 <script lang="tsx">
   interface InstanceListData {
-    instance_address: string;
-    role: string;
-    status: string;
-    create_at: string;
-  }
-
-  interface InstanceData {
     bk_instance_id: number;
+    create_at: string;
+    instance_address: string;
     ip: string;
     name: string;
     port: number;
+    role: string;
     status: string;
     [key: string]: any;
   }
 
-  interface DialogState {
-    isShow: boolean;
-    keyword: string;
-    data: Array<InstanceListData>;
-  }
-
   interface Props {
     title: string;
     role: string;
-    data: Array<InstanceData>;
+    data: InstanceListData[];
     clusterId: number;
     dataSource: (params: Record<string, any>) => Promise<ListBase<T[]>>;
     highlightIps?: string[];
@@ -213,10 +203,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 InstanceListData[],
   });
 
   const columns = [
diff --git a/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
index 3d051cfa0e..fcbb850064 100644
--- a/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
@@ -384,7 +384,7 @@
                 )}
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
diff --git a/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
index fc2f3b1ae4..dccdd09c40 100644
--- a/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
@@ -397,7 +397,7 @@
                   )}
                   <db-icon
                     v-bk-tooltips={t('查看域名/IP对应关系')}
-                    type="bk-dbm-icon db-icon-visible1"
+                    type="visible1"
                     onClick={() => handleOpenEntryConfig(data)} />
                 </>
               ),
diff --git a/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
index 39a12330d7..573e10aa2f 100644
--- a/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
@@ -381,7 +381,7 @@
                 )}
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
diff --git a/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
index fc6ebeb9e7..65502da63c 100644
--- a/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
@@ -407,7 +407,7 @@
                 } />
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
@@ -557,7 +557,7 @@
                 } />
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             )
diff --git a/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
index 42cb318b17..112e2435cd 100644
--- a/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
@@ -366,7 +366,7 @@
                 } />
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
diff --git a/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
index 21badadeb9..05b0d74b1b 100644
--- a/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
@@ -314,7 +314,7 @@
                 )}
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
diff --git a/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue b/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue
index 03af355b23..934977f5a5 100644
--- a/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue
@@ -465,17 +465,10 @@
                     ]
                   } />
                 )}
-                <auth-button
-                  v-db-console="redis.haClusterManage.modifyEntryConfiguration"
+                <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  action-id="access_entry_edit"
-                  resource="redis"
-                  permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="bk-dbm-icon db-icon-visible1" />
-                </auth-button>
+                  type="visible1"
+                  onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
           }}
@@ -639,20 +632,9 @@
                     ]
                   } />
                 )}
-                <auth-button
-                  v-db-console="redis.haClusterManage.modifyEntryConfiguration"
-                  v-bk-tooltips={t('查看域名/IP对应关系')}
-                  action-id="access_entry_edit"
-                  resource="redis"
-                  permission={data.permission.access_entry_edit}
-                  text
-                  theme="primary"
-                  onClick={() => handleOpenEntryConfig(data)}>
-                  <db-icon type="bk-dbm-icon db-icon-visible1" />
-                </auth-button>
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             )
diff --git a/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue b/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
index 9355ec9149..29a860b9de 100644
--- a/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
@@ -547,7 +547,7 @@
                 )}
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
diff --git a/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
index 8f727eac17..cc762af285 100644
--- a/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
@@ -423,7 +423,7 @@
                 )}
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
@@ -560,7 +560,7 @@
           }
           <db-icon
             v-bk-tooltips={t('查看域名/IP对应关系')}
-            type="bk-dbm-icon db-icon-visible1"
+            type="visible1"
             onClick={() => handleOpenEntryConfig(data)} />
         </div>
       ),
diff --git a/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue
index 44eec49e17..f8d992e983 100644
--- a/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue
@@ -389,7 +389,7 @@
                 }
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
@@ -536,7 +536,7 @@
                 } />
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             )
diff --git a/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue b/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue
index b5766d7348..e0c30a2c6f 100644
--- a/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue
+++ b/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue
@@ -376,7 +376,7 @@
                 }
                 <db-icon
                   v-bk-tooltips={t('查看域名/IP对应关系')}
-                  type="bk-dbm-icon db-icon-visible1"
+                  type="visible1"
                   onClick={() => handleOpenEntryConfig(data)} />
               </>
             ),
diff --git a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/UpdateResult.vue b/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/UpdateResult.vue
index a1d92e9faa..6e8f2f935b 100644
--- a/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/UpdateResult.vue
+++ b/dbm-ui/frontend/src/views/temporary-paassword-modify/index/components/UpdateResult.vue
@@ -32,7 +32,7 @@
         @click="handleShowPassword">
         <DbIcon
           v-if="!isShowPassword"
-          type="bk-dbm-icon db-icon-visible1" />
+          type="visible1" />
         <DbIcon
           v-else
           type="bk-dbm-icon db-icon-invisible1" />