From a9b3ae7aa75ea2598e1ca3f6dc07f3d12f8e4eae Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Fri, 13 Sep 2024 18:23:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=9D=83=E9=99=90=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E9=A1=B5=20#6905?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/.vscode/settings.json         |  69 +-
 dbm-ui/frontend/package.json                  |   2 +-
 .../frontend/src/common/const/dbOperations.ts |  33 +
 dbm-ui/frontend/src/common/const/index.ts     |   1 +
 .../src/components/cluster-selector/Index.vue |  59 +-
 .../components/tendbha/Index.vue              |   2 +-
 .../components/instance-selector/Index.vue    | 190 +++++-
 .../components/tendb-ha-host/Index.vue        | 274 ++++++++
 .../components/tendb-ha-host/table/Index.vue  | 340 ++++++++++
 .../tendb-ha-host/table/useTableData.ts       | 107 +++
 .../components/tendb-ha-host/useTopoData.ts   | 107 +++
 .../components/tendb-single-host/Index.vue    | 274 ++++++++
 .../tendb-single-host/table/Index.vue         | 340 ++++++++++
 .../tendb-single-host/table/useTableData.ts   | 107 +++
 .../tendb-single-host/useTopoData.ts          | 107 +++
 .../src/components/mult-line-text/Index.vue   |  34 +-
 .../components/module-group/Mysql.vue         |   7 +
 .../components/module-group/TendbCluster.vue  |   7 +
 dbm-ui/frontend/src/locales/zh-cn.json        |  21 +
 .../services/model/mysql/tendbHaMachine.ts    | 151 +++++
 .../model/mysql/tendbSingleMachine.ts         | 151 +++++
 .../services/model/spider/spiderMachine.ts    |  12 +-
 .../src/services/source/mysqlPermission.ts    | 106 +++
 .../frontend/src/services/source/tendbha.ts   |  23 +
 .../src/services/source/tendbsingle.ts        |  23 +
 dbm-ui/frontend/src/types/router.d.ts         |   1 +
 .../mysql/permission-rule/common/const.ts     |  31 -
 .../permission-rule/components/CreateRule.vue |  22 +-
 .../db-manage/mysql/permission-rule/index.vue |  10 +-
 .../src/views/db-manage/mysql/routes.ts       |  11 +
 .../tendb-cluster/permission-list/Index.vue   |  10 +-
 .../tendb-cluster/permission/Index.vue        |  10 +-
 .../tendb-cluster/permission/common/consts.ts |   9 -
 .../permission/components/CreateRule.vue      |  20 +-
 .../views/db-manage/tendb-cluster/routes.ts   |  12 +
 .../src/views/permission-retrieve/Index.vue   | 152 +++++
 .../components/options/Index.vue              | 470 +++++++++++++
 .../options/components/BatchInput.vue         | 122 ++++
 .../components/result/Index.vue               | 627 ++++++++++++++++++
 39 files changed, 3893 insertions(+), 161 deletions(-)
 create mode 100644 dbm-ui/frontend/src/common/const/dbOperations.ts
 create mode 100644 dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/Index.vue
 create mode 100644 dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue
 create mode 100644 dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/useTableData.ts
 create mode 100644 dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/useTopoData.ts
 create mode 100644 dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/Index.vue
 create mode 100644 dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/table/Index.vue
 create mode 100644 dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/table/useTableData.ts
 create mode 100644 dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/useTopoData.ts
 create mode 100644 dbm-ui/frontend/src/services/model/mysql/tendbHaMachine.ts
 create mode 100644 dbm-ui/frontend/src/services/model/mysql/tendbSingleMachine.ts
 create mode 100644 dbm-ui/frontend/src/services/source/mysqlPermission.ts
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/options/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/options/components/BatchInput.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/result/Index.vue

diff --git a/dbm-ui/frontend/.vscode/settings.json b/dbm-ui/frontend/.vscode/settings.json
index 1f2666a091..69bce4736a 100644
--- a/dbm-ui/frontend/.vscode/settings.json
+++ b/dbm-ui/frontend/.vscode/settings.json
@@ -1,60 +1,19 @@
 {
-  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
-  "eslint.alwaysShowStatus": true,
+  "files.eol": "\n",
+  "editor.unfoldOnClickAfterEndOfLine": true,
+  "editor.tabSize": 2,
+  "diffEditor.ignoreTrimWhitespace": false,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "explorer.confirmDelete": false,
+  "explorer.confirmDragAndDrop": false,
+  "editor.fontLigatures": false,
+  "editor.fontVariations": false,
+  "i18n-lazyer.defaultFolder": "\\src\\locales",
+  "search.smartCase": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
+  // "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "editor.tabSize": 2,
-  "css.validate": false,
-  "stylelint.enable": true,
-  "scss.validate": false,
-  "stylelint.validate": ["css", "scss", "vue"],
-  "preCI.localCodeCheck.filter.whitePath": "",
-  "preCI.localCodeCheck.filter.skipPath": "",
-  "preCI.localCodeCheck.checkerSet.JS": ["standard_js"],
-  "peacock.remoteColor": "#45e35f",
-  "bk-code-ai.enable": false,
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#71ea85",
-    "activityBar.background": "#71ea85",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#8874ea",
-    "activityBarBadge.foreground": "#15202b",
-    "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#71ea85",
-    "statusBar.background": "#45e35f",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#20d53e",
-    "statusBarItem.remoteBackground": "#45e35f",
-    "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#45e35f",
-    "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#45e35f99",
-    "titleBar.inactiveForeground": "#15202b99"
-  },
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
\ No newline at end of file
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
index 1ba0f12229..6697f96358 100644
--- a/dbm-ui/frontend/package.json
+++ b/dbm-ui/frontend/package.json
@@ -27,7 +27,7 @@
     "@icon-cool/bk-icon-bk-biz-components": "0.0.4",
     "@vueuse/core": "^11.0.3",
     "axios": "^1.7.7",
-    "bkui-vue": "2.0.1-beta.69",
+    "bkui-vue": "^2.0.1-beta.69",
     "date-fns": "3.6.0",
     "dayjs": "^1.11.13",
     "html-to-image": "1.11.11",
diff --git a/dbm-ui/frontend/src/common/const/dbOperations.ts b/dbm-ui/frontend/src/common/const/dbOperations.ts
new file mode 100644
index 0000000000..a8f059c42f
--- /dev/null
+++ b/dbm-ui/frontend/src/common/const/dbOperations.ts
@@ -0,0 +1,33 @@
+export const MysqlDbOperations = {
+  dml: ['select', 'insert', 'update', 'delete', 'show view'],
+  ddl: [
+    'create',
+    'alter',
+    'drop',
+    'index',
+    'create view',
+    'execute',
+    'trigger',
+    'event',
+    'create routine',
+    'alter routine',
+    'references',
+    'create temporary tables',
+  ],
+  glob: ['file', 'reload', 'show databases', 'process', 'replication slave', 'replication client'],
+};
+
+export const MysqlDdlSensitiveWords = [
+  'trigger',
+  'event',
+  'create routine',
+  'alter routine',
+  'references',
+  'create temporary tables',
+];
+
+export const TendbClusterDbOperations = {
+  dml: ['select', 'insert', 'update', 'delete'],
+  ddl: ['execute'],
+  glob: ['file', 'reload', 'process', 'show databases'],
+};
diff --git a/dbm-ui/frontend/src/common/const/index.ts b/dbm-ui/frontend/src/common/const/index.ts
index 658513ffc2..453a695286 100644
--- a/dbm-ui/frontend/src/common/const/index.ts
+++ b/dbm-ui/frontend/src/common/const/index.ts
@@ -3,6 +3,7 @@ export * from './clusterInsStatus';
 export * from './clusterTypeInfos';
 export * from './clusterTypes';
 export * from './confLevels';
+export * from './dbOperations';
 export * from './dbSysExclude';
 export * from './dbTypeInfos';
 export * from './dbTypes';
diff --git a/dbm-ui/frontend/src/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
index b4b1491a24..5294cce8fc 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
@@ -101,13 +101,21 @@
       </template>
     </BkResizeLayout>
     <template #footer>
-      <BkButton
-        class="cluster-selector-button mr-8"
-        :disabled="isEmpty"
-        theme="primary"
-        @click="handleConfirm">
-        {{ t('确定') }}
-      </BkButton>
+      <span class="mr24">
+        <slot
+          v-if="slots.submitTips"
+          :cluster-list="selectedClusterList"
+          name="submitTips" />
+      </span>
+      <span v-bk-tooltips="submitButtonDisabledInfo.tooltips">
+        <BkButton
+          class="cluster-selector-button mr-8"
+          :disabled="submitButtonDisabledInfo.disabled"
+          theme="primary"
+          @click="handleConfirm">
+          {{ t('确定') }}
+        </BkButton>
+      </span>
       <BkButton
         class="cluster-selector-button"
         @click="handleClose">
@@ -200,6 +208,7 @@
     clusterTypes: string[];
     tabListConfig?: Record<string, TabConfig>;
     onlyOneType?: boolean;
+    disableDialogSubmitMethod?: (hostList: Array<string>) => string | boolean;
   }
 
   interface Emits {
@@ -214,6 +223,7 @@
     default: false,
   });
 
+  const slots = useSlots();
   const copy = useCopy();
   const { dialogWidth } = useSelectorDialogWidth();
   const { t } = useI18n();
@@ -392,6 +402,41 @@
   // 选中结果是否为空
   const isEmpty = computed(() => _.every(Object.values(selectedMap.value), (item) => Object.keys(item).length < 1));
 
+  const selectedClusterList = computed(() =>
+    Object.values(selectedMap.value).reduce<string[]>((prevList, selectedItem) => {
+      const clusterList = Object.values(selectedItem).map((clusterItem) => clusterItem.master_domain);
+      prevList.push(...clusterList);
+      return prevList;
+    }, []),
+  );
+
+  const submitButtonDisabledInfo = computed(() => {
+    const info = {
+      disabled: false,
+      tooltips: {
+        disabled: true,
+        content: '',
+      },
+    };
+
+    if (isEmpty.value) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = t('请选择集群');
+      return info;
+    }
+
+    const checkValue = props?.disableDialogSubmitMethod
+      ? props.disableDialogSubmitMethod(selectedClusterList.value)
+      : false;
+    if (checkValue) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = _.isString(checkValue) ? checkValue : t('无法保存');
+    }
+    return info;
+  });
+
   watch(
     () => props.clusterTypes,
     (types) => {
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
index 52b74636f6..c27477740e 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
@@ -28,7 +28,7 @@
       :is-anomalies="isAnomalies"
       :is-searching="searchValue.length > 0"
       :max-height="528"
-      :pagination="pagination.count < 10 ? false : pagination"
+      :pagination="pagination"
       remote-pagination
       :row-class="getRowClass"
       row-style="cursor: pointer"
diff --git a/dbm-ui/frontend/src/components/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
index 4add7352cc..8dbe5dd10b 100644
--- a/dbm-ui/frontend/src/components/instance-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/instance-selector/Index.vue
@@ -69,15 +69,16 @@
       </template>
     </BkResizeLayout>
     <template #footer>
-      <span
-        v-bk-tooltips="{
-          content: t('请选择实例'),
-          disabled: !isEmpty,
-        }"
-        class="inline-block">
+      <span class="mr24">
+        <slot
+          v-if="slots.submitTips"
+          :host-list="lastHostList"
+          name="submitTips" />
+      </span>
+      <span v-bk-tooltips="submitButtonDisabledInfo.tooltips">
         <BkButton
           class="w-88"
-          :disabled="isEmpty"
+          :disabled="submitButtonDisabledInfo.disabled"
           theme="primary"
           @click="handleSubmit">
           {{ t('确定') }}
@@ -201,8 +202,8 @@
     getSingleClusterList,
     getSqlServerInstanceList as getSqlServerSingleInstanceList,
   } from '@services/source/sqlserverSingleCluster';
-  import { getTendbhaInstanceList } from '@services/source/tendbha';
-  import { getTendbsingleInstanceList } from '@services/source/tendbsingle';
+  import { getTendbhaInstanceList, getTendbHaMachineList } from '@services/source/tendbha';
+  import { getTendbsingleInstanceList, getTendbSingleMachineList } from '@services/source/tendbsingle';
 
   import { ClusterTypes } from '@common/const';
 
@@ -217,6 +218,8 @@
   import SqlServerContent from './components/sqlserver/Index.vue';
   import TendbClusterContent from './components/tendb-cluster/Index.vue';
   import TendbClusterHostContent from './components/tendb-cluster-host/Index.vue';
+  import TendbHaHostContent from './components/tendb-ha-host/Index.vue';
+  import TendbSingleHostContent from './components/tendb-single-host/Index.vue';
 
   export type TableSetting = ReturnType<typeof getSettings>;
 
@@ -269,12 +272,21 @@
   type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number];
 
   interface Props {
-    clusterTypes: (ClusterTypes | 'TendbClusterHost' | 'RedisHost' | 'mongoCluster')[];
+    clusterTypes: (
+      | ClusterTypes
+      | 'TendbClusterHost'
+      | 'RedisHost'
+      | 'mongoCluster'
+      | 'TendbSingleHost'
+      | 'TendbHaHost'
+    )[];
     tabListConfig?: Record<string, PanelListType>;
     selected?: InstanceSelectorValues<T>;
     unqiuePanelValue?: boolean;
     unqiuePanelTips?: string;
     hideManualInput?: boolean;
+    onlyOneType?: boolean;
+    disableDialogSubmitMethod?: (hostList: Array<string>) => string | boolean;
   }
 
   interface Emits {
@@ -288,6 +300,8 @@
     unqiuePanelValue: false,
     unqiuePanelTips: t('仅可选择一种实例类型'),
     hideManualInput: false,
+    onlyOneType: false,
+    disableDialogSubmitMethod: () => false,
   });
 
   const emits = defineEmits<Emits>();
@@ -300,6 +314,8 @@
     default: false,
   });
 
+  const slots = useSlots();
+
   const tabListMap: Record<string, PanelListType> = {
     [ClusterTypes.REDIS]: [
       {
@@ -679,6 +695,96 @@
         content: ManualInputContent,
       },
     ],
+    TendbSingleHost: [
+      {
+        id: 'TendbSingleHost',
+        name: t('MySQL 单节点'),
+        topoConfig: {
+          getTopoList: queryMysqlCluster,
+        },
+        tableConfig: {
+          getTableList: getTendbSingleMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'related_instances', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: TendbSingleHostContent,
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          getTableList: getTendbSingleMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'related_instances', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        manualConfig: {
+          checkInstances: getTendbSingleMachineList,
+          checkType: 'ip',
+          checkKey: 'ip',
+          activePanelId: 'TendbClusterHost',
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: ManualInputHostContent,
+      },
+    ],
+    TendbHaHost: [
+      {
+        id: 'TendbHaHost',
+        name: t('MySQL 主从'),
+        topoConfig: {
+          getTopoList: queryMysqlCluster,
+        },
+        tableConfig: {
+          getTableList: getTendbHaMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: TendbHaHostContent,
+      },
+      {
+        id: 'manualInput',
+        name: t('手动输入'),
+        tableConfig: {
+          getTableList: getTendbHaMachineList,
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+          columnsChecked: ['ip', 'cloud_area', 'alive', 'host_name', 'os_name'],
+        },
+        manualConfig: {
+          checkInstances: getTendbHaMachineList,
+          checkType: 'ip',
+          checkKey: 'ip',
+          activePanelId: 'TendbClusterHost',
+        },
+        previewConfig: {
+          displayKey: 'ip',
+        },
+        content: ManualInputHostContent,
+      },
+    ],
   };
 
   const panelTabActive = ref<string>('');
@@ -753,6 +859,45 @@
   const isEmpty = computed(() => Object.values(lastValues).every((values) => values.length < 1));
   const renderCom = computed(() => (activePanelObj.value ? activePanelObj.value.content : 'div'));
 
+  const lastHostList = computed(() =>
+    Object.values(lastValues).reduce<string[]>((prevList, hostListItem) => {
+      const ipList = hostListItem.map((listItem) => listItem.ip);
+      prevList.push(...ipList);
+      return prevList;
+    }, []),
+  );
+
+  const submitButtonDisabledInfo = computed(() => {
+    const info = {
+      disabled: false,
+      tooltips: {
+        disabled: true,
+        content: '',
+      },
+    };
+
+    if (isEmpty.value) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = panelTabActive.value.includes('Host') ? t('请选择主机') : t('请选择实例');
+      return info;
+    }
+
+    const hostList = Object.values(lastValues).reduce<string[]>((prevList, hostListItem) => {
+      const ipList = hostListItem.map((listItem) => listItem.ip);
+      prevList.push(...ipList);
+      return prevList;
+    }, []);
+
+    const checkValue = props.disableDialogSubmitMethod(hostList);
+    if (checkValue) {
+      info.disabled = true;
+      info.tooltips.disabled = false;
+      info.tooltips.content = _.isString(checkValue) ? checkValue : t('无法保存');
+    }
+    return info;
+  });
+
   let isInnerChange = false;
 
   watch(
@@ -783,9 +928,32 @@
 
   const handleChangePanel = (obj: PanelListItem) => {
     activePanelObj.value = obj;
+    if (props.onlyOneType) {
+      const initValues = Object.keys(lastValues).reduce<Record<string, T[]>>(
+        (results, id) =>
+          Object.assign({}, results, {
+            [id]: [],
+          }),
+        {},
+      );
+      Object.assign(lastValues, initValues);
+    }
   };
 
-  const handleChange = (values: Props['selected']) => {
+  const handleChange = (values: Props['selected'] = {}) => {
+    // 如果只允许选一种类型, 则清空非当前类型的选中列表
+    // 如果是勾选的取消全选，则忽略
+    const currentKey = panelTabActive.value;
+    if (props.onlyOneType && values[currentKey].length > 0) {
+      Object.keys(lastValues).forEach((key) => {
+        if (key !== currentKey) {
+          lastValues[key] = [];
+        } else {
+          lastValues[key] = values[key];
+        }
+      });
+      return;
+    }
     Object.assign(lastValues, values);
   };
 
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/Index.vue
new file mode 100644
index 0000000000..264eac830a
--- /dev/null
+++ b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/Index.vue
@@ -0,0 +1,274 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <BkLoading :loading="isLoading">
+    <div class="instance-selector-topo">
+      <BkResizeLayout
+        :border="false"
+        collapsible
+        initial-divide="340px"
+        :max="420"
+        :min="320">
+        <template #aside>
+          <div class="topo-tree-box">
+            <BkInput
+              v-model="treeSearch"
+              clearable
+              :placeholder="t('搜索拓扑节点')" />
+            <div :class="TopoAlertContent ? 'topo-alert-box' : 'topo-box'">
+              <TopoAlertContent @close="handleCloseAlert" />
+              <BkTree
+                ref="treeRef"
+                children="children"
+                :data="treeData"
+                label="name"
+                :node-content-action="['click']"
+                :search="treeSearch"
+                selectable
+                :show-node-type-icon="false"
+                virtual-render
+                @node-click="handleNodeClick">
+                <template #node="item">
+                  <div class="custom-tree-node">
+                    <span class="custom-tree-node__tag">
+                      {{ item.obj === 'biz' ? t('业') : t('集') }}
+                    </span>
+                    <span
+                      v-overflow-tips
+                      class="custom-tree-node__name text-overflow">
+                      {{ item.name }}
+                    </span>
+                    <span class="custom-tree-node__count">
+                      {{ item.count }}
+                    </span>
+                  </div>
+                </template>
+              </BkTree>
+            </div>
+          </div>
+        </template>
+        <template #main>
+          <div style="height: 570px">
+            <RenderTopoHost
+              :cluster-id="selectClusterId"
+              :disabled-row-config="disabledRowConfig"
+              :firsr-column="firsrColumn"
+              :get-table-list="getTableList"
+              :is-remote-pagination="isRemotePagination"
+              :last-values="lastValues"
+              :role-filter-list="roleFilterList"
+              :status-filter="statusFilter"
+              :table-setting="tableSetting"
+              @change="handleHostChange" />
+          </div>
+        </template>
+      </BkResizeLayout>
+    </div>
+  </BkLoading>
+</template>
+
+<script setup lang="ts" generic="T extends IValue">
+  import { useI18n } from 'vue-i18n';
+
+  import type { InstanceSelectorValues, IValue, PanelListType, TableSetting } from '../../Index.vue';
+
+  import RenderTopoHost from './table/Index.vue';
+  import { useTopoData } from './useTopoData';
+
+  interface TopoTreeData {
+    id: number;
+    name: string;
+    obj: 'biz' | 'cluster';
+    count: number;
+    children: Array<TopoTreeData>;
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues<T>): void;
+  }
+
+  type TableConfigType = Required<PanelListType[number]>['tableConfig'];
+  type TopoConfigType = Required<PanelListType[number]>['topoConfig'];
+
+  interface Props {
+    lastValues: InstanceSelectorValues<T>;
+    tableSetting: TableSetting;
+    firsrColumn?: TableConfigType['firsrColumn'];
+    roleFilterList?: TableConfigType['roleFilterList'];
+    isRemotePagination?: TableConfigType['isRemotePagination'];
+    disabledRowConfig?: TableConfigType['disabledRowConfig'];
+    topoAlertContent?: TopoConfigType['topoAlertContent'];
+    filterClusterId?: TopoConfigType['filterClusterId']; // 过滤的集群ID，单集群模式
+    // eslint-disable-next-line vue/no-unused-properties
+    getTopoList: NonNullable<TopoConfigType['getTopoList']>;
+    // eslint-disable-next-line vue/no-unused-properties
+    getTableList: NonNullable<TableConfigType['getTableList']>;
+    statusFilter?: TableConfigType['statusFilter'];
+    // eslint-disable-next-line vue/no-unused-properties
+    countFunc?: TopoConfigType['countFunc'];
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    firsrColumn: undefined,
+    statusFilter: undefined,
+    isRemotePagination: true,
+    countFunc: undefined,
+    disabledRowConfig: undefined,
+    topoAlertContent: undefined,
+    roleFilterList: undefined,
+    filterClusterId: undefined,
+  });
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const treeSearch = ref('');
+  const isCloseAlert = ref(false);
+
+  const TopoAlertContent = computed(() => (!isCloseAlert.value ? props.topoAlertContent : null));
+  const filterClusterId = computed(() => props.filterClusterId);
+
+  const { treeRef, isLoading, treeData, selectClusterId, fetchResources } =
+    useTopoData<Record<string, any>>(filterClusterId);
+
+  fetchResources();
+
+  // 选中topo节点，获取topo节点下面的所有主机
+  const handleNodeClick = (
+    node: TopoTreeData,
+    info: unknown,
+    {
+      __is_open: isOpen,
+      __is_selected: isSelected,
+    }: {
+      __is_open: boolean;
+      __is_selected: boolean;
+    },
+  ) => {
+    const rawNode = treeRef.value.getData().data.find((item: { id: number }) => item.id === node.id);
+    selectClusterId.value = node.id;
+    if (!isOpen && !isSelected) {
+      treeRef.value.setNodeOpened(rawNode, true);
+      treeRef.value.setSelect(rawNode, true);
+      return;
+    }
+
+    if (isOpen && !isSelected) {
+      treeRef.value.setSelect(rawNode, true);
+      return;
+    }
+
+    if (isSelected) {
+      treeRef.value.setNodeOpened(rawNode, !isOpen);
+    }
+  };
+
+  const handleHostChange = (values: InstanceSelectorValues<T>) => {
+    emits('change', values);
+  };
+
+  const handleCloseAlert = () => {
+    isCloseAlert.value = true;
+  };
+</script>
+
+<style lang="less">
+  .instance-selector-topo {
+    display: block;
+    padding-top: 16px;
+
+    .bk-resize-layout {
+      height: 100%;
+    }
+
+    .topo-tree-box {
+      height: 100%;
+      max-height: 570px;
+      padding: 0 16px;
+
+      .topo-box {
+        height: calc(100% - 50px);
+        margin-top: 12px;
+      }
+
+      .topo-alert-box {
+        height: calc(100% - 95px);
+        margin-top: 12px;
+      }
+
+      .bk-tree {
+        .bk-node-content {
+          font-size: 12px;
+        }
+
+        .bk-node-prefix {
+          width: 12px !important;
+          height: 12px !important;
+          color: #979ba5;
+        }
+
+        .bk-node-row {
+          .custom-tree-node {
+            display: flex;
+            align-items: center;
+
+            &__tag {
+              width: 20px;
+              height: 20px;
+              margin-right: 8px;
+              line-height: 20px;
+              color: white;
+              text-align: center;
+              background-color: #c4c6cc;
+              flex-shrink: 0;
+              border-radius: 50%;
+            }
+
+            &__name {
+              flex: 1;
+            }
+
+            &__count {
+              height: 16px;
+              padding: 0 6px;
+              line-height: 16px;
+              color: #979ba5;
+              background-color: #f0f1f5;
+              border-radius: 2px;
+              flex-shrink: 0;
+            }
+          }
+
+          &.is-selected {
+            color: @primary-color;
+            background-color: #e1ecff;
+
+            .custom-tree-node__tag {
+              background-color: #3a84ff;
+            }
+
+            .custom-tree-node__count {
+              color: white;
+              background-color: #a3c5fd;
+            }
+
+            .bk-node-prefix {
+              color: #3a84ff;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue
new file mode 100644
index 0000000000..e713816000
--- /dev/null
+++ b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/Index.vue
@@ -0,0 +1,340 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="instance-selector-render-topo-host">
+    <BkInput
+      v-model="searchValue"
+      clearable
+      :placeholder="t('请输入主机')" />
+    <BkLoading
+      :loading="isLoading"
+      :z-index="2">
+      <DbOriginalTable
+        :columns="columns"
+        :data="tableData"
+        :max-height="530"
+        :pagination="pagination.count < 10 ? false : pagination"
+        :remote-pagination="isRemotePagination"
+        :settings="tableSetting"
+        style="margin-top: 12px"
+        @page-limit-change="handeChangeLimit"
+        @page-value-change="handleChangePage"
+        @refresh="fetchResources"
+        @row-click.stop.prevent="handleRowClick" />
+    </BkLoading>
+  </div>
+</template>
+<script setup lang="tsx" generic="T extends IValue">
+  import type { Ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import DbStatus from '@components/db-status/index.vue';
+
+  import { firstLetterToUpper } from '@utils';
+
+  import {
+    activePanelInjectionKey,
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+    type TableSetting,
+  } from '../../../Index.vue';
+
+  import { useTableData } from './useTableData';
+
+  type TableConfigType = Required<PanelListType[number]>['tableConfig'];
+  type DataRow = Record<string, any>;
+
+  interface Props {
+    lastValues: InstanceSelectorValues<T>,
+    tableSetting: TableSetting,
+    clusterId?: number,
+    isRemotePagination?: TableConfigType['isRemotePagination'],
+    firsrColumn?: TableConfigType['firsrColumn'],
+    disabledRowConfig?: TableConfigType['disabledRowConfig'],
+    getTableList: NonNullable<TableConfigType['getTableList']>,
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues<T>): void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    clusterId: undefined,
+    firsrColumn: undefined,
+    isRemotePagination: true,
+    disabledRowConfig: undefined,
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const formatValue = (data: T) => ({
+    bk_host_id: data.bk_host_id,
+    bk_cloud_id: data.bk_cloud_id,
+    ip: data.ip,
+    cluster_id: data.related_clusters[0].id,
+    port: 0,
+    instance_address: '',
+    cluster_type: '',
+    master_domain: data.related_clusters[0].immute_domain,
+    bk_cloud_name: data.bk_cloud_name,
+    related_instances: (data.related_instances || []).map(instanceItem => ({
+      instance: instanceItem.instance,
+      status: instanceItem.status
+    })),
+    spec_config: data.spec_config,
+    db_module_id: data.db_module_id,
+    db_module_name: data.db_module_name,
+    role: data.role
+  });
+
+  const { t } = useI18n();
+
+  const activePanel = inject(activePanelInjectionKey) as Ref<string> | undefined;
+
+  const checkedMap = shallowRef({} as DataRow);
+
+  const initRole = computed(() => props.firsrColumn?.role);
+  const selectClusterId = computed(() => props.clusterId);
+  const firstColumnFieldId = computed(() => (props.firsrColumn?.field || 'ip'));
+  const mainSelectDisable = computed(() => (props.disabledRowConfig
+    ? tableData.value.filter(data => props.disabledRowConfig?.handler(data)).length === tableData.value.length : false));
+
+  const {
+    isLoading,
+    data: tableData,
+    pagination,
+    searchValue,
+    generateParams,
+    fetchResources,
+    handleChangePage,
+    handeChangeLimit,
+  } = useTableData<T>(initRole, selectClusterId);
+
+  const isSelectedAll = computed(() => (
+    tableData.value.length > 0
+    && tableData.value.length === tableData.value.filter(item => checkedMap.value[item[firstColumnFieldId.value]]).length
+  ));
+
+  let isSelectedAllReal = false;
+
+  const columns = [
+    {
+      minWidth: 70,
+      fixed: 'left',
+      label: () => (
+        <div style="display:flex;align-items:center">
+          <bk-checkbox
+            label={true}
+            model-value={isSelectedAll.value}
+            disabled={mainSelectDisable.value}
+            onChange={handleSelectPageAll}
+          />
+          <bk-popover
+            placement="bottom-start"
+            theme="light db-table-select-menu"
+            arrow={ false }
+            trigger='hover'
+            v-slots={{
+              default: () => <db-icon class="select-menu-flag" type="down-big" />,
+              content: () => (
+                <div class="db-table-select-plan">
+                  <div
+                    class="item"
+                    onClick={handleWholeSelect}>{t('跨页全选')}</div>
+                </div>
+              ),
+            }}>
+          </bk-popover>
+        </div>
+      ),
+      render: ({ data }: DataRow) => {
+        if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+          return (
+            <bk-popover theme="dark" placement="top" popoverDelay={0}>
+              {{
+                default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
+                content: () => <span>{props.disabledRowConfig?.tip}</span>,
+              }}
+            </bk-popover>
+          );
+        }
+        return (
+          <bk-checkbox
+            style="vertical-align: middle;"
+            label={true}
+            model-value={Boolean(checkedMap.value[data[firstColumnFieldId.value]])}
+            onChange={(value: boolean) => handleTableSelectOne(value, data)}
+          />
+        );
+      },
+    },
+    {
+      fixed: 'left',
+      minWidth: 160,
+      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
+    },
+    {
+      minWidth: 100,
+      label: t('管控区域'),
+      field: 'bk_cloud_name',
+      showOverflowTooltip: true,
+    },
+    {
+      minWidth: 100,
+      label: t('Agent状态'),
+      field: 'alive',
+      render: ({ data }: DataRow) => {
+        const info = data.host_info?.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      label: t('主机名称'),
+      field: 'host_name',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info?.host_name || '--',
+    },
+    {
+      label: t('OS名称'),
+      field: 'os_name',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info?.os_name || '--',
+    },
+    {
+      label: t('所属云厂商'),
+      field: 'cloud_vendor',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info?.cloud_vendor || '--',
+    },
+    {
+      label: t('OS类型'),
+      field: 'os_type',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info.os_type || '--',
+    },
+    {
+      label: t('主机ID'),
+      field: 'host_id',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info?.host_id || '--',
+    },
+    {
+      label: 'Agent ID',
+      field: 'agent_id',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info?.agent_id || '--',
+    },
+  ];
+
+  watch(() => props.lastValues, () => {
+    // 切换 tab 回显选中状态 \ 预览结果操作选中状态
+    if (activePanel?.value && activePanel.value !== 'manualInput') {
+      checkedMap.value = {};
+      const checkedList = props.lastValues[activePanel.value];
+      if (checkedList) {
+        for (const item of checkedList) {
+          checkedMap.value[item[firstColumnFieldId.value]] = item;
+        }
+      }
+    }
+  }, { immediate: true, deep: true });
+
+  watch(() => props.clusterId, () => {
+    if (props.clusterId) {
+      fetchResources();
+    }
+  }, {
+    immediate: true,
+  });
+
+  const triggerChange = () => {
+    const result = Object.values(checkedMap.value).reduce((result, item) => {
+      result.push({
+        ...item,
+      });
+      return result;
+    }, [] as T[]);
+
+    if (activePanel?.value) {
+      emits('change', {
+        ...props.lastValues,
+        [activePanel.value]: result,
+      });
+    }
+  };
+
+  // 跨页全选
+  const handleWholeSelect = () => {
+    isLoading.value = true;
+    const params = generateParams();
+    params.limit = -1;
+    props.getTableList(params).then((data) => {
+      data.results.forEach((dataItem: T) => {
+        if (!props.disabledRowConfig?.handler(dataItem)) {
+          handleTableSelectOne(true, dataItem);
+        }
+      });
+    }).finally(() => isLoading.value = false);
+  };
+
+  const handleSelectPageAll = (checked: boolean) => {
+    const list = tableData.value;
+    if (props.disabledRowConfig) {
+      isSelectedAllReal = !isSelectedAllReal;
+      for (const data of list) {
+        if (!props.disabledRowConfig.handler(data)) {
+          handleTableSelectOne(isSelectedAllReal, data);
+        }
+      }
+      return;
+    }
+    for (const item of list) {
+      handleTableSelectOne(checked, item);
+    }
+  };
+
+  const handleRowClick = (row: unknown, data: T) => {
+    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+      return;
+    }
+
+    const isChecked = !!checkedMap.value[data[firstColumnFieldId.value]];
+    handleTableSelectOne(!isChecked, data);
+  };
+
+  const handleTableSelectOne = (checked: boolean, data: T) => {
+    const lastCheckMap = { ...checkedMap.value };
+    if (checked) {
+      lastCheckMap[data[firstColumnFieldId.value]] = formatValue(data);
+    } else {
+      delete lastCheckMap[data[firstColumnFieldId.value]];
+    }
+    checkedMap.value = lastCheckMap;
+    triggerChange();
+  };
+</script>
+
+<style lang="less">
+  .instance-selector-render-topo-host {
+    padding: 0 24px;
+
+    .bk-table-body {
+      tr {
+        cursor: pointer;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/useTableData.ts b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/useTableData.ts
new file mode 100644
index 0000000000..42179d9869
--- /dev/null
+++ b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/table/useTableData.ts
@@ -0,0 +1,107 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import type { ComponentInternalInstance, Ref } from 'vue';
+import { useRequest } from 'vue-request';
+
+import { useGlobalBizs } from '@stores';
+
+/**
+ * 处理集群列表数据
+ */
+export function useTableData<T>(role?: Ref<string | undefined>, clusterId?: Ref<number | undefined>) {
+  const { currentBizId } = useGlobalBizs();
+  const currentInstance = getCurrentInstance() as ComponentInternalInstance & {
+    proxy: {
+      getTableList: (params: any) => Promise<any>;
+    };
+  };
+
+  const tableData = shallowRef<T[]>([]);
+  const isAnomalies = ref(false);
+  const pagination = reactive({
+    count: 0,
+    current: 1,
+    limit: 10,
+    limitList: [10, 20, 50, 100],
+    align: 'right',
+    layout: ['total', 'limit', 'list'],
+  });
+  const searchValue = ref('');
+
+  const { run: getTableListRun, loading: isLoading } = useRequest(currentInstance.proxy.getTableList, {
+    manual: true,
+    onSuccess(data) {
+      tableData.value = data.results;
+      pagination.count = data.count;
+      isAnomalies.value = false;
+    },
+    onError() {
+      tableData.value = [];
+      pagination.count = 0;
+      isAnomalies.value = true;
+    },
+  });
+
+  watch(searchValue, () => {
+    setTimeout(() => {
+      handleChangePage(1);
+    });
+  });
+
+  const generateParams = () => {
+    const params = {
+      bk_biz_id: currentBizId,
+      ip: searchValue.value,
+      limit: pagination.limit,
+      offset: (pagination.current - 1) * pagination.limit,
+    };
+    if (role?.value) {
+      Object.assign(params, {
+        instance_role: role.value,
+      });
+    }
+    if (clusterId?.value && clusterId.value !== currentBizId) {
+      Object.assign(params, {
+        cluster_ids: clusterId.value,
+      });
+    }
+    return params;
+  };
+
+  const fetchResources = async () => {
+    const params = generateParams();
+    return getTableListRun(params);
+  };
+
+  const handleChangePage = (value: number) => {
+    pagination.current = value;
+    return fetchResources();
+  };
+
+  const handeChangeLimit = (value: number) => {
+    pagination.limit = value;
+    return handleChangePage(1);
+  };
+
+  return {
+    isLoading,
+    data: tableData,
+    pagination,
+    searchValue,
+    generateParams,
+    fetchResources,
+    handleChangePage,
+    handeChangeLimit,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/useTopoData.ts b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/useTopoData.ts
new file mode 100644
index 0000000000..a2170758c3
--- /dev/null
+++ b/dbm-ui/frontend/src/components/instance-selector/components/tendb-ha-host/useTopoData.ts
@@ -0,0 +1,107 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+import { type ComponentInternalInstance } from 'vue';
+
+import { useGlobalBizs } from '@stores';
+
+import { ClusterTypes } from '@common/const';
+
+interface TopoTreeData {
+  id: number;
+  name: string;
+  obj: 'biz' | 'cluster';
+  count: number;
+  children: Array<TopoTreeData>;
+}
+
+/**
+ * 处理集群列表数据
+ */
+export function useTopoData<T extends Record<string, any>>(filterClusterId: ComputedRef<number | undefined>) {
+  const { currentBizId, currentBizInfo } = useGlobalBizs();
+  const currentInstance = getCurrentInstance() as ComponentInternalInstance & {
+    proxy: {
+      getTopoList: (params: any) => Promise<any>;
+      countFunc?: (data: T) => number;
+    };
+  };
+
+  const isLoading = ref(false);
+  const selectClusterId = ref<number>();
+  const treeRef = ref();
+
+  const treeData = shallowRef<TopoTreeData[]>([]);
+
+  /**
+   * 获取列表
+   */
+  const fetchResources = async () => {
+    isLoading.value = true;
+    const params = {
+      bk_biz_id: currentBizId,
+      cluster_filters: [
+        {
+          bk_biz_id: currentBizId,
+          cluster_type: ClusterTypes.TENDBHA,
+        },
+      ],
+    } as Record<string, any>;
+    if (filterClusterId.value) {
+      params.cluster_filters[0].id = filterClusterId.value;
+    }
+    return currentInstance.proxy
+      .getTopoList(params)
+      .then((data) => {
+        const countFn = currentInstance.proxy?.countFunc;
+        const formatData = data.map((item: T) => ({ ...item, count: countFn ? countFn(item) : item.masters.length }));
+        const children = formatData.map((item: T) => ({
+          id: item.id,
+          name: item.master_domain,
+          obj: 'cluster',
+          count: item.count,
+          children: [],
+        }));
+        treeData.value = filterClusterId.value
+          ? children
+          : [
+              {
+                name: currentBizInfo?.display_name || '--',
+                id: currentBizId,
+                obj: 'biz',
+                count: formatData.reduce((count: number, item: any) => count + item.count, 0),
+                children,
+              },
+            ];
+        setTimeout(() => {
+          if (data.length > 0) {
+            const [firstNode] = treeData.value;
+            selectClusterId.value = firstNode.id;
+            const [firstRawNode] = treeRef.value.getData().data;
+            treeRef.value.setOpen(firstRawNode);
+            treeRef.value.setSelect(firstRawNode);
+          }
+        });
+      })
+      .finally(() => {
+        isLoading.value = false;
+      });
+  };
+
+  return {
+    treeRef,
+    isLoading,
+    treeData,
+    selectClusterId,
+    fetchResources,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/Index.vue
new file mode 100644
index 0000000000..264eac830a
--- /dev/null
+++ b/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/Index.vue
@@ -0,0 +1,274 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <BkLoading :loading="isLoading">
+    <div class="instance-selector-topo">
+      <BkResizeLayout
+        :border="false"
+        collapsible
+        initial-divide="340px"
+        :max="420"
+        :min="320">
+        <template #aside>
+          <div class="topo-tree-box">
+            <BkInput
+              v-model="treeSearch"
+              clearable
+              :placeholder="t('搜索拓扑节点')" />
+            <div :class="TopoAlertContent ? 'topo-alert-box' : 'topo-box'">
+              <TopoAlertContent @close="handleCloseAlert" />
+              <BkTree
+                ref="treeRef"
+                children="children"
+                :data="treeData"
+                label="name"
+                :node-content-action="['click']"
+                :search="treeSearch"
+                selectable
+                :show-node-type-icon="false"
+                virtual-render
+                @node-click="handleNodeClick">
+                <template #node="item">
+                  <div class="custom-tree-node">
+                    <span class="custom-tree-node__tag">
+                      {{ item.obj === 'biz' ? t('业') : t('集') }}
+                    </span>
+                    <span
+                      v-overflow-tips
+                      class="custom-tree-node__name text-overflow">
+                      {{ item.name }}
+                    </span>
+                    <span class="custom-tree-node__count">
+                      {{ item.count }}
+                    </span>
+                  </div>
+                </template>
+              </BkTree>
+            </div>
+          </div>
+        </template>
+        <template #main>
+          <div style="height: 570px">
+            <RenderTopoHost
+              :cluster-id="selectClusterId"
+              :disabled-row-config="disabledRowConfig"
+              :firsr-column="firsrColumn"
+              :get-table-list="getTableList"
+              :is-remote-pagination="isRemotePagination"
+              :last-values="lastValues"
+              :role-filter-list="roleFilterList"
+              :status-filter="statusFilter"
+              :table-setting="tableSetting"
+              @change="handleHostChange" />
+          </div>
+        </template>
+      </BkResizeLayout>
+    </div>
+  </BkLoading>
+</template>
+
+<script setup lang="ts" generic="T extends IValue">
+  import { useI18n } from 'vue-i18n';
+
+  import type { InstanceSelectorValues, IValue, PanelListType, TableSetting } from '../../Index.vue';
+
+  import RenderTopoHost from './table/Index.vue';
+  import { useTopoData } from './useTopoData';
+
+  interface TopoTreeData {
+    id: number;
+    name: string;
+    obj: 'biz' | 'cluster';
+    count: number;
+    children: Array<TopoTreeData>;
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues<T>): void;
+  }
+
+  type TableConfigType = Required<PanelListType[number]>['tableConfig'];
+  type TopoConfigType = Required<PanelListType[number]>['topoConfig'];
+
+  interface Props {
+    lastValues: InstanceSelectorValues<T>;
+    tableSetting: TableSetting;
+    firsrColumn?: TableConfigType['firsrColumn'];
+    roleFilterList?: TableConfigType['roleFilterList'];
+    isRemotePagination?: TableConfigType['isRemotePagination'];
+    disabledRowConfig?: TableConfigType['disabledRowConfig'];
+    topoAlertContent?: TopoConfigType['topoAlertContent'];
+    filterClusterId?: TopoConfigType['filterClusterId']; // 过滤的集群ID，单集群模式
+    // eslint-disable-next-line vue/no-unused-properties
+    getTopoList: NonNullable<TopoConfigType['getTopoList']>;
+    // eslint-disable-next-line vue/no-unused-properties
+    getTableList: NonNullable<TableConfigType['getTableList']>;
+    statusFilter?: TableConfigType['statusFilter'];
+    // eslint-disable-next-line vue/no-unused-properties
+    countFunc?: TopoConfigType['countFunc'];
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    firsrColumn: undefined,
+    statusFilter: undefined,
+    isRemotePagination: true,
+    countFunc: undefined,
+    disabledRowConfig: undefined,
+    topoAlertContent: undefined,
+    roleFilterList: undefined,
+    filterClusterId: undefined,
+  });
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const treeSearch = ref('');
+  const isCloseAlert = ref(false);
+
+  const TopoAlertContent = computed(() => (!isCloseAlert.value ? props.topoAlertContent : null));
+  const filterClusterId = computed(() => props.filterClusterId);
+
+  const { treeRef, isLoading, treeData, selectClusterId, fetchResources } =
+    useTopoData<Record<string, any>>(filterClusterId);
+
+  fetchResources();
+
+  // 选中topo节点，获取topo节点下面的所有主机
+  const handleNodeClick = (
+    node: TopoTreeData,
+    info: unknown,
+    {
+      __is_open: isOpen,
+      __is_selected: isSelected,
+    }: {
+      __is_open: boolean;
+      __is_selected: boolean;
+    },
+  ) => {
+    const rawNode = treeRef.value.getData().data.find((item: { id: number }) => item.id === node.id);
+    selectClusterId.value = node.id;
+    if (!isOpen && !isSelected) {
+      treeRef.value.setNodeOpened(rawNode, true);
+      treeRef.value.setSelect(rawNode, true);
+      return;
+    }
+
+    if (isOpen && !isSelected) {
+      treeRef.value.setSelect(rawNode, true);
+      return;
+    }
+
+    if (isSelected) {
+      treeRef.value.setNodeOpened(rawNode, !isOpen);
+    }
+  };
+
+  const handleHostChange = (values: InstanceSelectorValues<T>) => {
+    emits('change', values);
+  };
+
+  const handleCloseAlert = () => {
+    isCloseAlert.value = true;
+  };
+</script>
+
+<style lang="less">
+  .instance-selector-topo {
+    display: block;
+    padding-top: 16px;
+
+    .bk-resize-layout {
+      height: 100%;
+    }
+
+    .topo-tree-box {
+      height: 100%;
+      max-height: 570px;
+      padding: 0 16px;
+
+      .topo-box {
+        height: calc(100% - 50px);
+        margin-top: 12px;
+      }
+
+      .topo-alert-box {
+        height: calc(100% - 95px);
+        margin-top: 12px;
+      }
+
+      .bk-tree {
+        .bk-node-content {
+          font-size: 12px;
+        }
+
+        .bk-node-prefix {
+          width: 12px !important;
+          height: 12px !important;
+          color: #979ba5;
+        }
+
+        .bk-node-row {
+          .custom-tree-node {
+            display: flex;
+            align-items: center;
+
+            &__tag {
+              width: 20px;
+              height: 20px;
+              margin-right: 8px;
+              line-height: 20px;
+              color: white;
+              text-align: center;
+              background-color: #c4c6cc;
+              flex-shrink: 0;
+              border-radius: 50%;
+            }
+
+            &__name {
+              flex: 1;
+            }
+
+            &__count {
+              height: 16px;
+              padding: 0 6px;
+              line-height: 16px;
+              color: #979ba5;
+              background-color: #f0f1f5;
+              border-radius: 2px;
+              flex-shrink: 0;
+            }
+          }
+
+          &.is-selected {
+            color: @primary-color;
+            background-color: #e1ecff;
+
+            .custom-tree-node__tag {
+              background-color: #3a84ff;
+            }
+
+            .custom-tree-node__count {
+              color: white;
+              background-color: #a3c5fd;
+            }
+
+            .bk-node-prefix {
+              color: #3a84ff;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/table/Index.vue
new file mode 100644
index 0000000000..e713816000
--- /dev/null
+++ b/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/table/Index.vue
@@ -0,0 +1,340 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="instance-selector-render-topo-host">
+    <BkInput
+      v-model="searchValue"
+      clearable
+      :placeholder="t('请输入主机')" />
+    <BkLoading
+      :loading="isLoading"
+      :z-index="2">
+      <DbOriginalTable
+        :columns="columns"
+        :data="tableData"
+        :max-height="530"
+        :pagination="pagination.count < 10 ? false : pagination"
+        :remote-pagination="isRemotePagination"
+        :settings="tableSetting"
+        style="margin-top: 12px"
+        @page-limit-change="handeChangeLimit"
+        @page-value-change="handleChangePage"
+        @refresh="fetchResources"
+        @row-click.stop.prevent="handleRowClick" />
+    </BkLoading>
+  </div>
+</template>
+<script setup lang="tsx" generic="T extends IValue">
+  import type { Ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import DbStatus from '@components/db-status/index.vue';
+
+  import { firstLetterToUpper } from '@utils';
+
+  import {
+    activePanelInjectionKey,
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+    type TableSetting,
+  } from '../../../Index.vue';
+
+  import { useTableData } from './useTableData';
+
+  type TableConfigType = Required<PanelListType[number]>['tableConfig'];
+  type DataRow = Record<string, any>;
+
+  interface Props {
+    lastValues: InstanceSelectorValues<T>,
+    tableSetting: TableSetting,
+    clusterId?: number,
+    isRemotePagination?: TableConfigType['isRemotePagination'],
+    firsrColumn?: TableConfigType['firsrColumn'],
+    disabledRowConfig?: TableConfigType['disabledRowConfig'],
+    getTableList: NonNullable<TableConfigType['getTableList']>,
+  }
+
+  interface Emits {
+    (e: 'change', value: InstanceSelectorValues<T>): void;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    clusterId: undefined,
+    firsrColumn: undefined,
+    isRemotePagination: true,
+    disabledRowConfig: undefined,
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const formatValue = (data: T) => ({
+    bk_host_id: data.bk_host_id,
+    bk_cloud_id: data.bk_cloud_id,
+    ip: data.ip,
+    cluster_id: data.related_clusters[0].id,
+    port: 0,
+    instance_address: '',
+    cluster_type: '',
+    master_domain: data.related_clusters[0].immute_domain,
+    bk_cloud_name: data.bk_cloud_name,
+    related_instances: (data.related_instances || []).map(instanceItem => ({
+      instance: instanceItem.instance,
+      status: instanceItem.status
+    })),
+    spec_config: data.spec_config,
+    db_module_id: data.db_module_id,
+    db_module_name: data.db_module_name,
+    role: data.role
+  });
+
+  const { t } = useI18n();
+
+  const activePanel = inject(activePanelInjectionKey) as Ref<string> | undefined;
+
+  const checkedMap = shallowRef({} as DataRow);
+
+  const initRole = computed(() => props.firsrColumn?.role);
+  const selectClusterId = computed(() => props.clusterId);
+  const firstColumnFieldId = computed(() => (props.firsrColumn?.field || 'ip'));
+  const mainSelectDisable = computed(() => (props.disabledRowConfig
+    ? tableData.value.filter(data => props.disabledRowConfig?.handler(data)).length === tableData.value.length : false));
+
+  const {
+    isLoading,
+    data: tableData,
+    pagination,
+    searchValue,
+    generateParams,
+    fetchResources,
+    handleChangePage,
+    handeChangeLimit,
+  } = useTableData<T>(initRole, selectClusterId);
+
+  const isSelectedAll = computed(() => (
+    tableData.value.length > 0
+    && tableData.value.length === tableData.value.filter(item => checkedMap.value[item[firstColumnFieldId.value]]).length
+  ));
+
+  let isSelectedAllReal = false;
+
+  const columns = [
+    {
+      minWidth: 70,
+      fixed: 'left',
+      label: () => (
+        <div style="display:flex;align-items:center">
+          <bk-checkbox
+            label={true}
+            model-value={isSelectedAll.value}
+            disabled={mainSelectDisable.value}
+            onChange={handleSelectPageAll}
+          />
+          <bk-popover
+            placement="bottom-start"
+            theme="light db-table-select-menu"
+            arrow={ false }
+            trigger='hover'
+            v-slots={{
+              default: () => <db-icon class="select-menu-flag" type="down-big" />,
+              content: () => (
+                <div class="db-table-select-plan">
+                  <div
+                    class="item"
+                    onClick={handleWholeSelect}>{t('跨页全选')}</div>
+                </div>
+              ),
+            }}>
+          </bk-popover>
+        </div>
+      ),
+      render: ({ data }: DataRow) => {
+        if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+          return (
+            <bk-popover theme="dark" placement="top" popoverDelay={0}>
+              {{
+                default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
+                content: () => <span>{props.disabledRowConfig?.tip}</span>,
+              }}
+            </bk-popover>
+          );
+        }
+        return (
+          <bk-checkbox
+            style="vertical-align: middle;"
+            label={true}
+            model-value={Boolean(checkedMap.value[data[firstColumnFieldId.value]])}
+            onChange={(value: boolean) => handleTableSelectOne(value, data)}
+          />
+        );
+      },
+    },
+    {
+      fixed: 'left',
+      minWidth: 160,
+      label: props.firsrColumn?.label ? firstLetterToUpper(props.firsrColumn.label) : t('实例'),
+      field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
+    },
+    {
+      minWidth: 100,
+      label: t('管控区域'),
+      field: 'bk_cloud_name',
+      showOverflowTooltip: true,
+    },
+    {
+      minWidth: 100,
+      label: t('Agent状态'),
+      field: 'alive',
+      render: ({ data }: DataRow) => {
+        const info = data.host_info?.alive === 1 ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      label: t('主机名称'),
+      field: 'host_name',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info?.host_name || '--',
+    },
+    {
+      label: t('OS名称'),
+      field: 'os_name',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info?.os_name || '--',
+    },
+    {
+      label: t('所属云厂商'),
+      field: 'cloud_vendor',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info?.cloud_vendor || '--',
+    },
+    {
+      label: t('OS类型'),
+      field: 'os_type',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info.os_type || '--',
+    },
+    {
+      label: t('主机ID'),
+      field: 'host_id',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info?.host_id || '--',
+    },
+    {
+      label: 'Agent ID',
+      field: 'agent_id',
+      showOverflowTooltip: true,
+      render: ({ data }: DataRow) => data.host_info?.agent_id || '--',
+    },
+  ];
+
+  watch(() => props.lastValues, () => {
+    // 切换 tab 回显选中状态 \ 预览结果操作选中状态
+    if (activePanel?.value && activePanel.value !== 'manualInput') {
+      checkedMap.value = {};
+      const checkedList = props.lastValues[activePanel.value];
+      if (checkedList) {
+        for (const item of checkedList) {
+          checkedMap.value[item[firstColumnFieldId.value]] = item;
+        }
+      }
+    }
+  }, { immediate: true, deep: true });
+
+  watch(() => props.clusterId, () => {
+    if (props.clusterId) {
+      fetchResources();
+    }
+  }, {
+    immediate: true,
+  });
+
+  const triggerChange = () => {
+    const result = Object.values(checkedMap.value).reduce((result, item) => {
+      result.push({
+        ...item,
+      });
+      return result;
+    }, [] as T[]);
+
+    if (activePanel?.value) {
+      emits('change', {
+        ...props.lastValues,
+        [activePanel.value]: result,
+      });
+    }
+  };
+
+  // 跨页全选
+  const handleWholeSelect = () => {
+    isLoading.value = true;
+    const params = generateParams();
+    params.limit = -1;
+    props.getTableList(params).then((data) => {
+      data.results.forEach((dataItem: T) => {
+        if (!props.disabledRowConfig?.handler(dataItem)) {
+          handleTableSelectOne(true, dataItem);
+        }
+      });
+    }).finally(() => isLoading.value = false);
+  };
+
+  const handleSelectPageAll = (checked: boolean) => {
+    const list = tableData.value;
+    if (props.disabledRowConfig) {
+      isSelectedAllReal = !isSelectedAllReal;
+      for (const data of list) {
+        if (!props.disabledRowConfig.handler(data)) {
+          handleTableSelectOne(isSelectedAllReal, data);
+        }
+      }
+      return;
+    }
+    for (const item of list) {
+      handleTableSelectOne(checked, item);
+    }
+  };
+
+  const handleRowClick = (row: unknown, data: T) => {
+    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+      return;
+    }
+
+    const isChecked = !!checkedMap.value[data[firstColumnFieldId.value]];
+    handleTableSelectOne(!isChecked, data);
+  };
+
+  const handleTableSelectOne = (checked: boolean, data: T) => {
+    const lastCheckMap = { ...checkedMap.value };
+    if (checked) {
+      lastCheckMap[data[firstColumnFieldId.value]] = formatValue(data);
+    } else {
+      delete lastCheckMap[data[firstColumnFieldId.value]];
+    }
+    checkedMap.value = lastCheckMap;
+    triggerChange();
+  };
+</script>
+
+<style lang="less">
+  .instance-selector-render-topo-host {
+    padding: 0 24px;
+
+    .bk-table-body {
+      tr {
+        cursor: pointer;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/table/useTableData.ts b/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/table/useTableData.ts
new file mode 100644
index 0000000000..42179d9869
--- /dev/null
+++ b/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/table/useTableData.ts
@@ -0,0 +1,107 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import type { ComponentInternalInstance, Ref } from 'vue';
+import { useRequest } from 'vue-request';
+
+import { useGlobalBizs } from '@stores';
+
+/**
+ * 处理集群列表数据
+ */
+export function useTableData<T>(role?: Ref<string | undefined>, clusterId?: Ref<number | undefined>) {
+  const { currentBizId } = useGlobalBizs();
+  const currentInstance = getCurrentInstance() as ComponentInternalInstance & {
+    proxy: {
+      getTableList: (params: any) => Promise<any>;
+    };
+  };
+
+  const tableData = shallowRef<T[]>([]);
+  const isAnomalies = ref(false);
+  const pagination = reactive({
+    count: 0,
+    current: 1,
+    limit: 10,
+    limitList: [10, 20, 50, 100],
+    align: 'right',
+    layout: ['total', 'limit', 'list'],
+  });
+  const searchValue = ref('');
+
+  const { run: getTableListRun, loading: isLoading } = useRequest(currentInstance.proxy.getTableList, {
+    manual: true,
+    onSuccess(data) {
+      tableData.value = data.results;
+      pagination.count = data.count;
+      isAnomalies.value = false;
+    },
+    onError() {
+      tableData.value = [];
+      pagination.count = 0;
+      isAnomalies.value = true;
+    },
+  });
+
+  watch(searchValue, () => {
+    setTimeout(() => {
+      handleChangePage(1);
+    });
+  });
+
+  const generateParams = () => {
+    const params = {
+      bk_biz_id: currentBizId,
+      ip: searchValue.value,
+      limit: pagination.limit,
+      offset: (pagination.current - 1) * pagination.limit,
+    };
+    if (role?.value) {
+      Object.assign(params, {
+        instance_role: role.value,
+      });
+    }
+    if (clusterId?.value && clusterId.value !== currentBizId) {
+      Object.assign(params, {
+        cluster_ids: clusterId.value,
+      });
+    }
+    return params;
+  };
+
+  const fetchResources = async () => {
+    const params = generateParams();
+    return getTableListRun(params);
+  };
+
+  const handleChangePage = (value: number) => {
+    pagination.current = value;
+    return fetchResources();
+  };
+
+  const handeChangeLimit = (value: number) => {
+    pagination.limit = value;
+    return handleChangePage(1);
+  };
+
+  return {
+    isLoading,
+    data: tableData,
+    pagination,
+    searchValue,
+    generateParams,
+    fetchResources,
+    handleChangePage,
+    handeChangeLimit,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/useTopoData.ts b/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/useTopoData.ts
new file mode 100644
index 0000000000..9cac258f94
--- /dev/null
+++ b/dbm-ui/frontend/src/components/instance-selector/components/tendb-single-host/useTopoData.ts
@@ -0,0 +1,107 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+import { type ComponentInternalInstance } from 'vue';
+
+import { useGlobalBizs } from '@stores';
+
+import { ClusterTypes } from '@common/const';
+
+interface TopoTreeData {
+  id: number;
+  name: string;
+  obj: 'biz' | 'cluster';
+  count: number;
+  children: Array<TopoTreeData>;
+}
+
+/**
+ * 处理集群列表数据
+ */
+export function useTopoData<T extends Record<string, any>>(filterClusterId: ComputedRef<number | undefined>) {
+  const { currentBizId, currentBizInfo } = useGlobalBizs();
+  const currentInstance = getCurrentInstance() as ComponentInternalInstance & {
+    proxy: {
+      getTopoList: (params: any) => Promise<any>;
+      countFunc?: (data: T) => number;
+    };
+  };
+
+  const isLoading = ref(false);
+  const selectClusterId = ref<number>();
+  const treeRef = ref();
+
+  const treeData = shallowRef<TopoTreeData[]>([]);
+
+  /**
+   * 获取列表
+   */
+  const fetchResources = async () => {
+    isLoading.value = true;
+    const params = {
+      bk_biz_id: currentBizId,
+      cluster_filters: [
+        {
+          bk_biz_id: currentBizId,
+          cluster_type: ClusterTypes.TENDBSINGLE,
+        },
+      ],
+    } as Record<string, any>;
+    if (filterClusterId.value) {
+      params.cluster_filters[0].id = filterClusterId.value;
+    }
+    return currentInstance.proxy
+      .getTopoList(params)
+      .then((data) => {
+        const countFn = currentInstance.proxy?.countFunc;
+        const formatData = data.map((item: T) => ({ ...item, count: countFn ? countFn(item) : item.masters.length }));
+        const children = formatData.map((item: T) => ({
+          id: item.id,
+          name: item.master_domain,
+          obj: 'cluster',
+          count: item.count,
+          children: [],
+        }));
+        treeData.value = filterClusterId.value
+          ? children
+          : [
+              {
+                name: currentBizInfo?.display_name || '--',
+                id: currentBizId,
+                obj: 'biz',
+                count: formatData.reduce((count: number, item: any) => count + item.count, 0),
+                children,
+              },
+            ];
+        setTimeout(() => {
+          if (data.length > 0) {
+            const [firstNode] = treeData.value;
+            selectClusterId.value = firstNode.id;
+            const [firstRawNode] = treeRef.value.getData().data;
+            treeRef.value.setOpen(firstRawNode);
+            treeRef.value.setSelect(firstRawNode);
+          }
+        });
+      })
+      .finally(() => {
+        isLoading.value = false;
+      });
+  };
+
+  return {
+    treeRef,
+    isLoading,
+    treeData,
+    selectClusterId,
+    fetchResources,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/mult-line-text/Index.vue b/dbm-ui/frontend/src/components/mult-line-text/Index.vue
index 9b9b5fc2d0..4f85d5c233 100644
--- a/dbm-ui/frontend/src/components/mult-line-text/Index.vue
+++ b/dbm-ui/frontend/src/components/mult-line-text/Index.vue
@@ -27,20 +27,27 @@
   </div>
 </template>
 <script setup lang="ts">
+  import type { Instance, SingleTarget } from 'tippy.js';
   import { nextTick, onBeforeUpdate, onMounted, ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
+  import { dbTippy } from '@common/tippy';
+
   interface Props {
     line: number;
     expandable?: boolean;
+    showTooltips?: boolean;
   }
 
   const props = withDefaults(defineProps<Props>(), {
     expandable: true,
+    showTooltips: false,
   });
 
   const { t } = useI18n();
 
+  let tippyInst: Instance;
+
   const rootRef = ref<HTMLElement>();
   const placeholderRef = ref<HTMLElement>();
   const isMore = ref(false);
@@ -54,7 +61,9 @@
     nextTick(() => {
       const { height: placeholderHeight } = placeholderRef.value!.getBoundingClientRect();
 
-      isShowExpand.value = rootHeight < placeholderHeight;
+      if (props.expandable) {
+        isShowExpand.value = rootHeight < placeholderHeight;
+      }
     });
   };
   let rootHeight = 0;
@@ -65,13 +74,36 @@
     isMore.value = !isMore.value;
   };
 
+  const createTippyInst = () => {
+    if (props.showTooltips) {
+      const { width } = rootRef.value!.getBoundingClientRect();
+      tippyInst = dbTippy(rootRef.value as SingleTarget, {
+        content: placeholderRef.value,
+        appendTo: () => document.body,
+        maxWidth: width,
+        arrow: true,
+        zIndex: 999999,
+      });
+    }
+  };
+
+  const destroyTippyInst = () => {
+    if (tippyInst) {
+      tippyInst.hide();
+      tippyInst.unmount();
+      tippyInst.destroy();
+    }
+  };
+
   onMounted(() => {
     rootHeight = rootRef.value!.getBoundingClientRect().height;
     calcShowExpand();
+    createTippyInst();
   });
 
   onBeforeUpdate(() => {
     calcShowExpand();
+    destroyTippyInst();
   });
 </script>
 <style lang="less">
diff --git a/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Mysql.vue b/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Mysql.vue
index 7e79a17045..d93f701eef 100644
--- a/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Mysql.vue
+++ b/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Mysql.vue
@@ -70,6 +70,13 @@
             {{ t('授权规则') }}
           </span>
         </BkMenuItem>
+        <BkMenuItem key="MysqlPermissionRetrieve">
+          <span
+            v-overflow-tips.right
+            class="text-overflow">
+            {{ t('权限查询') }}
+          </span>
+        </BkMenuItem>
         <BkMenuItem key="mysqlWhitelist">
           <span
             v-overflow-tips.right
diff --git a/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/TendbCluster.vue b/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/TendbCluster.vue
index b48fc6eae7..cc9f7db6c0 100644
--- a/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/TendbCluster.vue
+++ b/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/TendbCluster.vue
@@ -52,6 +52,13 @@
             {{ t('授权规则') }}
           </span>
         </BkMenuItem>
+        <BkMenuItem key="SpiderPermissionRetrieve">
+          <span
+            v-overflow-tips.right
+            class="text-overflow">
+            {{ t('权限查询') }}
+          </span>
+        </BkMenuItem>
         <BkMenuItem key="spiderWhitelist">
           <span
             v-overflow-tips.right
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index d550a30814..a5710b7e39 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3436,5 +3436,26 @@
     "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符": "支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符",
     "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用",
     "复制所属集群": "复制所属集群",
+    "IP 视角": "IP 视角",
+    "导出结果表": "导出结果表",
+    "复制 IP": "复制 IP",
+    "查询条件": "查询条件",
+    "源客户端 IP": "源客户端 IP",
+    "权限查询": "权限查询",
+    "请选择或输入，支持%": "请选择或输入，支持%",
+    "至多n台_已选n台": "至多 {0} 台，已选 {1} 台",
+    "至多n台": "至多 {n} 台",
+    "无权限的IP共n个": "无权限的 IP 共 {n} 个",
+    "有权限的IP共n个": "有权限的 IP 共 {n} 个",
+    "访问的 DB": "访问的 DB",
+    "匹配中的访问源": "匹配中的访问源",
+    "匹配中的 DB": "匹配中的 DB",
+    "访问 DB": "访问 DB",
+    "请输入DB，支持%": "请输入DB，支持%",
+    "最多输入n个": "最多输入 {n} 个",
+    "请输入，多个英文逗号或换行分隔，最多n个": "请输入，多个英文逗号或换行分隔，最多 {n} 个",
+    "查询的对象": "查询的对象",
+    "匹配的规则": "匹配的规则",
+    "域名不能为空": "域名不能为空",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/mysql/tendbHaMachine.ts b/dbm-ui/frontend/src/services/model/mysql/tendbHaMachine.ts
new file mode 100644
index 0000000000..774d46075d
--- /dev/null
+++ b/dbm-ui/frontend/src/services/model/mysql/tendbHaMachine.ts
@@ -0,0 +1,151 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+export default class tendbHaMachine {
+  bk_cloud_id: number;
+  bk_cloud_name: string;
+  bk_host_id: number;
+  cluster_type: string;
+  create_at: string;
+  host_info: {
+    agent_id: number;
+    alive: number;
+    biz: {
+      id: number;
+      name: string;
+    };
+    bk_cpu: number;
+    bk_cpu_architecture: string;
+    bk_cpu_module: string;
+    bk_disk: number;
+    bk_host_outerip: string;
+    bk_idc_id: string;
+    bk_idc_name: string;
+    bk_mem: number;
+    cloud_area: {
+      id: number;
+      name: string;
+    };
+    cloud_id: number;
+    cloud_vendor: string;
+    host_id: number;
+    host_name: string;
+    ip: string;
+    ipv6: string;
+    meta: {
+      bk_biz_id: number;
+      scope_id: number;
+      scope_type: string;
+    };
+    os_name: string;
+    os_type: number;
+  };
+  instance_role: string;
+  ip: string;
+  machine_type: string;
+  related_clusters: {
+    alias: string;
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    // cluster_name: string;
+    cluster_type: string;
+    cluster_type_name: string;
+    creator: string;
+    db_module_id: number;
+    disaster_tolerance_level: string;
+    id: number;
+    immute_domain: string;
+    major_version: string;
+    phase: string;
+    region: string;
+    status: string;
+    time_zone: string;
+    updater: string;
+  }[];
+  related_instances: {
+    name: string;
+    ip: string;
+    port: number;
+    instance: string;
+    status: string;
+    phase: string;
+    bk_instance_id: number;
+    bk_host_id: number;
+    bk_cloud_id: number;
+    spec_config: {
+      id: number;
+      cpu: {
+        max: number;
+        min: number;
+      };
+      mem: {
+        max: number;
+        min: number;
+      };
+      qps: {
+        max: number;
+        min: number;
+      };
+      name: string;
+      count: number;
+      device_class: string[];
+      storage_spec: {
+        size: number;
+        type: string;
+        mount_point: string;
+      }[];
+    };
+    bk_biz_id: number;
+    admin_port: number;
+  }[];
+  spec_config: {
+    id: number;
+    cpu: {
+      max: number;
+      min: number;
+    };
+    mem: {
+      max: number;
+      min: number;
+    };
+    qps: {
+      max: number;
+      min: number;
+    };
+    name: string;
+    count: number;
+    device_class: string[];
+    storage_spec: {
+      size: number;
+      type: string;
+      mount_point: string;
+    }[];
+  };
+  spec_id: number;
+
+  constructor(payload = {} as tendbHaMachine) {
+    this.bk_cloud_id = payload.bk_cloud_id;
+    this.bk_cloud_name = payload.bk_cloud_name;
+    this.bk_host_id = payload.bk_host_id;
+    this.cluster_type = payload.cluster_type;
+    this.create_at = payload.create_at;
+    this.host_info = payload.host_info;
+    this.instance_role = payload.instance_role;
+    this.ip = payload.ip;
+    this.machine_type = payload.machine_type;
+    this.related_clusters = payload.related_clusters;
+    this.related_instances = payload.related_instances;
+    this.spec_config = payload.spec_config;
+    this.spec_id = payload.spec_id;
+  }
+}
diff --git a/dbm-ui/frontend/src/services/model/mysql/tendbSingleMachine.ts b/dbm-ui/frontend/src/services/model/mysql/tendbSingleMachine.ts
new file mode 100644
index 0000000000..e57b644ebc
--- /dev/null
+++ b/dbm-ui/frontend/src/services/model/mysql/tendbSingleMachine.ts
@@ -0,0 +1,151 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+export default class tendbSingleMachine {
+  bk_cloud_id: number;
+  bk_cloud_name: string;
+  bk_host_id: number;
+  cluster_type: string;
+  create_at: string;
+  host_info: {
+    agent_id: number;
+    alive: number;
+    biz: {
+      id: number;
+      name: string;
+    };
+    bk_cpu: number;
+    bk_cpu_architecture: string;
+    bk_cpu_module: string;
+    bk_disk: number;
+    bk_host_outerip: string;
+    bk_idc_id: string;
+    bk_idc_name: string;
+    bk_mem: number;
+    cloud_area: {
+      id: number;
+      name: string;
+    };
+    cloud_id: number;
+    cloud_vendor: string;
+    host_id: number;
+    host_name: string;
+    ip: string;
+    ipv6: string;
+    meta: {
+      bk_biz_id: number;
+      scope_id: number;
+      scope_type: string;
+    };
+    os_name: string;
+    os_type: number;
+  };
+  instance_role: string;
+  ip: string;
+  machine_type: string;
+  related_clusters: {
+    alias: string;
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    // cluster_name: string;
+    cluster_type: string;
+    cluster_type_name: string;
+    creator: string;
+    db_module_id: number;
+    disaster_tolerance_level: string;
+    id: number;
+    immute_domain: string;
+    major_version: string;
+    phase: string;
+    region: string;
+    status: string;
+    time_zone: string;
+    updater: string;
+  }[];
+  related_instances: {
+    name: string;
+    ip: string;
+    port: number;
+    instance: string;
+    status: string;
+    phase: string;
+    bk_instance_id: number;
+    bk_host_id: number;
+    bk_cloud_id: number;
+    spec_config: {
+      id: number;
+      cpu: {
+        max: number;
+        min: number;
+      };
+      mem: {
+        max: number;
+        min: number;
+      };
+      qps: {
+        max: number;
+        min: number;
+      };
+      name: string;
+      count: number;
+      device_class: string[];
+      storage_spec: {
+        size: number;
+        type: string;
+        mount_point: string;
+      }[];
+    };
+    bk_biz_id: number;
+    admin_port: number;
+  }[];
+  spec_config: {
+    id: number;
+    cpu: {
+      max: number;
+      min: number;
+    };
+    mem: {
+      max: number;
+      min: number;
+    };
+    qps: {
+      max: number;
+      min: number;
+    };
+    name: string;
+    count: number;
+    device_class: string[];
+    storage_spec: {
+      size: number;
+      type: string;
+      mount_point: string;
+    }[];
+  };
+  spec_id: number;
+
+  constructor(payload = {} as tendbSingleMachine) {
+    this.bk_cloud_id = payload.bk_cloud_id;
+    this.bk_cloud_name = payload.bk_cloud_name;
+    this.bk_host_id = payload.bk_host_id;
+    this.cluster_type = payload.cluster_type;
+    this.create_at = payload.create_at;
+    this.host_info = payload.host_info;
+    this.instance_role = payload.instance_role;
+    this.ip = payload.ip;
+    this.machine_type = payload.machine_type;
+    this.related_clusters = payload.related_clusters;
+    this.related_instances = payload.related_instances;
+    this.spec_config = payload.spec_config;
+    this.spec_id = payload.spec_id;
+  }
+}
diff --git a/dbm-ui/frontend/src/services/model/spider/spiderMachine.ts b/dbm-ui/frontend/src/services/model/spider/spiderMachine.ts
index 31b3c7726a..c6e252ef66 100644
--- a/dbm-ui/frontend/src/services/model/spider/spiderMachine.ts
+++ b/dbm-ui/frontend/src/services/model/spider/spiderMachine.ts
@@ -75,13 +75,13 @@ export default class SpiderMachine {
   related_instances: {
     name: string;
     ip: string;
-    port: 25000;
+    port: number;
     instance: string;
     status: string;
     phase: string;
-    bk_instance_id: 6076;
-    bk_host_id: 247;
-    bk_cloud_id: 0;
+    bk_instance_id: number;
+    bk_host_id: number;
+    bk_cloud_id: number;
     spec_config: {
       id: number;
       cpu: {
@@ -105,8 +105,8 @@ export default class SpiderMachine {
         mount_point: string;
       }[];
     };
-    bk_biz_id: 3;
-    admin_port: 26000;
+    bk_biz_id: number;
+    admin_port: number;
   }[];
   spec_config: {
     id: number;
diff --git a/dbm-ui/frontend/src/services/source/mysqlPermission.ts b/dbm-ui/frontend/src/services/source/mysqlPermission.ts
new file mode 100644
index 0000000000..e60c7d8930
--- /dev/null
+++ b/dbm-ui/frontend/src/services/source/mysqlPermission.ts
@@ -0,0 +1,106 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import { AccountTypes, type ClusterTypes } from '@common/const';
+
+import http from '../http';
+import type { ListBase } from '../types';
+
+const getRootPath = () => `/apis/mysql/bizs/${window.PROJECT_CONFIG.BIZ_ID}/permission/account`;
+
+interface PrivsForIp {
+  ip: string;
+  dbs: Array<{
+    db: string;
+    domains: Array<{
+      immute_domain: string;
+      users: Array<{
+        user: string;
+        match_ips: Array<{
+          match_ip: string;
+          match_dbs: Array<{
+            match_db: string;
+            priv: string;
+          }>;
+        }>;
+      }>;
+    }>;
+  }>;
+}
+
+interface PrivsForCluster {
+  immute_domain: string;
+  users: Array<{
+    user: string;
+    match_ips: Array<{
+      match_ip: string;
+      match_dbs: Array<{
+        match_db: string;
+        priv: string;
+        ip_dbs: Array<{
+          ip: string;
+          db: string;
+        }>;
+      }>;
+    }>;
+  }>;
+}
+
+/**
+ * 查询权限清单
+ */
+export const getAccountPrivs = (params: {
+  ips: string;
+  immute_domains: string;
+  users: string;
+  account_type: AccountTypes;
+  cluster_type: ClusterTypes;
+  dbs?: string;
+  format_type?: string; // 'ip' | 'cluster';
+  limit?: number;
+  offset?: number;
+}) =>
+  http.get<{
+    match_ips_count: number;
+    results: {
+      privs_for_ip: PrivsForIp[] | null;
+      privs_for_cluster: PrivsForCluster[] | null;
+      has_priv: string[] | null;
+      no_priv: string[] | null;
+    };
+  }>(`${getRootPath()}/get_account_privs/`, params);
+
+/**
+ * 下载权限清单
+ */
+export const getDownloadPrivs = (params: {
+  ips: string;
+  immute_domains: string;
+  users: string;
+  account_type: AccountTypes;
+  cluster_type: ClusterTypes;
+  dbs?: string;
+  format_type?: string; // 'ip' | 'cluster';
+}) => http.get<string>(`${getRootPath()}/get_download_privs/`, params, { responseType: 'blob' });
+
+/**
+ * 查询用户列表
+ */
+export const getAccountUsers = (params: {
+  ips: string;
+  immute_domains: string;
+  account_type: AccountTypes;
+  cluster_type: ClusterTypes;
+  limit?: number;
+  offset?: number;
+}) => http.get<ListBase<string[]>>(`${getRootPath()}/get_account_users/`, params);
diff --git a/dbm-ui/frontend/src/services/source/tendbha.ts b/dbm-ui/frontend/src/services/source/tendbha.ts
index 02a9e71029..683af7fae0 100644
--- a/dbm-ui/frontend/src/services/source/tendbha.ts
+++ b/dbm-ui/frontend/src/services/source/tendbha.ts
@@ -13,6 +13,7 @@
 
 import TendbhaModel from '@services/model/mysql/tendbha';
 import TendbhaInstanceModel from '@services/model/mysql/tendbha-instance';
+import TendbHaMachineModel from '@services/model/mysql/tendbHaMachine';
 
 import http from '../http';
 import type { ListBase, ResourceTopo } from '../types';
@@ -152,3 +153,25 @@ export function exportTendbhaClusterToExcel(params: { cluster_ids?: number[] })
 export function exportTendbhaInstanceToExcel(params: { bk_host_ids?: number[] }) {
   return http.post<string>(`${getRootPath()}/export_instance/`, params, { responseType: 'blob' });
 }
+
+/**
+ * 查询主机列表
+ */
+export function getTendbHaMachineList(params: {
+  limit?: number;
+  offset?: number;
+  bk_host_id?: number;
+  ip?: string;
+  machine_type?: string;
+  bk_os_name?: string;
+  bk_cloud_id?: number;
+  bk_agent_id?: string;
+  instance_role?: string;
+  spider_role?: string;
+  creator?: string;
+}) {
+  return http.get<ListBase<TendbHaMachineModel[]>>(`${getRootPath()}/list_machines/`, params).then((data) => ({
+    ...data,
+    results: data.results.map((item) => new TendbHaMachineModel(item)),
+  }));
+}
diff --git a/dbm-ui/frontend/src/services/source/tendbsingle.ts b/dbm-ui/frontend/src/services/source/tendbsingle.ts
index c8165af5f5..596e1ba31c 100644
--- a/dbm-ui/frontend/src/services/source/tendbsingle.ts
+++ b/dbm-ui/frontend/src/services/source/tendbsingle.ts
@@ -12,6 +12,7 @@
  */
 import TendbsingleInstanceModel from '@services/model/mysql/tendbha-instance';
 import TendbsingleModel from '@services/model/mysql/tendbsingle';
+import TendbSingleMachineModel from '@services/model/mysql/tendbSingleMachine';
 
 import http from '../http';
 import type { ListBase, ResourceTopo } from '../types';
@@ -109,3 +110,25 @@ export function exportTendbsingleClusterToExcel(params: { cluster_ids?: number[]
 export function exportTendbsingleInstanceToExcel(params: { bk_host_ids?: number[] }) {
   return http.post<string>(`${getRootPath()}/export_instance/`, params, { responseType: 'blob' });
 }
+
+/**
+ * 查询主机列表
+ */
+export function getTendbSingleMachineList(params: {
+  limit?: number;
+  offset?: number;
+  bk_host_id?: number;
+  ip?: string;
+  machine_type?: string;
+  bk_os_name?: string;
+  bk_cloud_id?: number;
+  bk_agent_id?: string;
+  instance_role?: string;
+  spider_role?: string;
+  creator?: string;
+}) {
+  return http.get<ListBase<TendbSingleMachineModel[]>>(`${getRootPath()}/list_machines/`, params).then((data) => ({
+    ...data,
+    results: data.results.map((item) => new TendbSingleMachineModel(item)),
+  }));
+}
diff --git a/dbm-ui/frontend/src/types/router.d.ts b/dbm-ui/frontend/src/types/router.d.ts
index e46476b84d..ddeacac63d 100644
--- a/dbm-ui/frontend/src/types/router.d.ts
+++ b/dbm-ui/frontend/src/types/router.d.ts
@@ -17,6 +17,7 @@ declare module 'vue-router' {
   interface RouteMeta {
     navName?: string; // 用于设置面包屑 name
     fullscreen?: boolean; // 用于判断是否满屏幕
+    accoutType?: string;
   }
 }
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/common/const.ts b/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/common/const.ts
index 4d3b3207a5..dbaf7489ca 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/common/const.ts
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/common/const.ts
@@ -11,37 +11,6 @@
  * the specific language governing permissions and limitations under the License.
  */
 
-/**
- * 操作类型
- */
-export const dbOperations = {
-  dml: ['select', 'insert', 'update', 'delete', 'show view'],
-  ddl: [
-    'create',
-    'alter',
-    'drop',
-    'index',
-    'create view',
-    'execute',
-    'trigger',
-    'event',
-    'create routine',
-    'alter routine',
-    'references',
-    'create temporary tables',
-  ],
-  glob: ['file', 'reload', 'show databases', 'process', 'replication slave', 'replication client'],
-};
-
-export const ddlSensitiveWords = [
-  'trigger',
-  'event',
-  'create routine',
-  'alter routine',
-  'references',
-  'create temporary tables',
-];
-
 /**
  * 密码策略
  */
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/components/CreateRule.vue b/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/components/CreateRule.vue
index d4c43738fc..be72a66bcc 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/components/CreateRule.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/components/CreateRule.vue
@@ -78,7 +78,7 @@
                 v-model="state.formdata.privilege.dml"
                 class="rule-form-checkbox-group">
                 <BkCheckbox
-                  v-for="dmlItem of dbOperations.dml"
+                  v-for="dmlItem of MysqlDbOperations.dml"
                   :key="dmlItem"
                   v-bk-tooltips="{
                     content: t('你已选择所有权限'),
@@ -109,7 +109,7 @@
                 v-model="state.formdata.privilege.ddl"
                 class="rule-form-checkbox-group">
                 <BkCheckbox
-                  v-for="ddlItem of dbOperations.ddl"
+                  v-for="ddlItem of MysqlDbOperations.ddl"
                   :key="ddlItem"
                   v-bk-tooltips="{
                     content: t('你已选择所有权限'),
@@ -119,7 +119,7 @@
                   :label="ddlItem">
                   {{ ddlItem }}
                   <span
-                    v-if="ddlSensitiveWords.includes(ddlItem)"
+                    v-if="MysqlDdlSensitiveWords.includes(ddlItem)"
                     class="sensitive-tip">
                     {{ t('敏感') }}
                   </span>
@@ -147,7 +147,7 @@
                 v-model="state.formdata.privilege.glob"
                 class="rule-form-checkbox-group">
                 <BkCheckbox
-                  v-for="globItem of dbOperations.glob"
+                  v-for="globItem of MysqlDbOperations.glob"
                   :key="globItem"
                   v-bk-tooltips="{
                     content: t('你已选择所有权限'),
@@ -201,13 +201,11 @@
   import { createAccountRule, getPermissionRules, modifyAccountRule, preCheckAddAccountRule, queryAccountRules } from '@services/source/permission';
   import type { AccountRule, PermissionRuleAccount } from '@services/types/permission';
 
-  import { AccountTypes } from '@common/const';
+  import { AccountTypes, MysqlDbOperations, MysqlDdlSensitiveWords } from '@common/const';
 
   import { messageSuccess } from '@utils'
 
-  import { dbOperations, ddlSensitiveWords } from '../common/const';
-
-  type AuthItemKey = keyof typeof dbOperations;
+  type AuthItemKey = keyof typeof MysqlDbOperations;
 
   interface Props {
     accountId?: number;
@@ -321,7 +319,7 @@
       if (isEdit.value) {
         state.formdata.access_db = props.ruleObj!.access_db;
         editModeDisabledPrivileges.value = props.ruleObj!.privilege.split(',');
-        const dbOperationsMap = Object.entries(dbOperations).reduce((resultMap, [key, values]) => {
+        const dbOperationsMap = Object.entries(MysqlDbOperations).reduce((resultMap, [key, values]) => {
           values.forEach(value => {
             Object.assign(resultMap, { [value]: key})
           });
@@ -342,14 +340,14 @@
   });
 
   // 获取权限设置全选框状态
-  const getAllCheckedboxValue = (key: AuthItemKey) => state.formdata.privilege[key].length === dbOperations[key].length;
+  const getAllCheckedboxValue = (key: AuthItemKey) => state.formdata.privilege[key].length === MysqlDbOperations[key].length;
   const getAllCheckedboxIndeterminate = (key: AuthItemKey) => (
     state.formdata.privilege[key].length > 0
-    && state.formdata.privilege[key].length !== dbOperations[key].length
+    && state.formdata.privilege[key].length !== MysqlDbOperations[key].length
   );
   const handleSelectedAll = (key: AuthItemKey, value: boolean) => {
     if (value) {
-      state.formdata.privilege[key] = [...dbOperations[key]];
+      state.formdata.privilege[key] = [...MysqlDbOperations[key]];
       return;
     }
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/index.vue
index 84aca3bca5..92c948bf1b 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/permission-rule/index.vue
@@ -128,7 +128,8 @@
   import {
     AccountTypes,
     ClusterTypes,
-    TicketTypes,
+    MysqlDbOperations,
+    TicketTypes
   } from '@common/const';
 
   import PermissionCatch from '@components/apply-permission/Catch.vue'
@@ -139,7 +140,6 @@
 
   import { getSearchSelectorParams } from '@utils';
 
-  import { dbOperations } from './common/const';
   import AccountDialog from './components/AccountDialog.vue';
   import CreateRuleSlider from './components/CreateRule.vue';
 
@@ -189,9 +189,9 @@
       multiple: true,
       logical: '&',
       children: [
-        ...dbOperations.dml.map(id => ({ id: id.toLowerCase(), name: id })),
-        ...dbOperations.ddl.map(id => ({ id: id.toLowerCase(), name: id })),
-        ...dbOperations.glob.map(id => ({ id, name: id })),
+        ...MysqlDbOperations.dml.map(id => ({ id: id.toLowerCase(), name: id })),
+        ...MysqlDbOperations.ddl.map(id => ({ id: id.toLowerCase(), name: id })),
+        ...MysqlDbOperations.glob.map(id => ({ id, name: id })),
       ],
     },
   ];
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts b/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts
index 6a6784b963..e4c3e9981b 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts
@@ -16,6 +16,8 @@ import type { RouteRecordRaw } from 'vue-router';
 import type { MySQLFunctions } from '@services/model/function-controller/functionController';
 import FunctionControllModel from '@services/model/function-controller/functionController';
 
+import { AccountTypes } from '@common/const';
+
 import { checkDbConsole } from '@utils';
 
 import { t } from '@locales/index';
@@ -273,6 +275,15 @@ const commonRouters: RouteRecordRaw[] = [
         },
         component: () => import('@views/db-manage/mysql/permission-rule/index.vue'),
       },
+      {
+        name: 'MysqlPermissionRetrieve',
+        path: 'permission-retrieve',
+        meta: {
+          navName: t('权限查询'),
+          accountType: AccountTypes.MYSQL,
+        },
+        component: () => import('@views/permission-retrieve/Index.vue'),
+      },
       {
         path: 'whitelist',
         name: 'mysqlWhitelist',
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission-list/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission-list/Index.vue
index 45404d5fb8..853e6cad47 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission-list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission-list/Index.vue
@@ -55,12 +55,10 @@
 
   import { getPermissionRules } from '@services/source/permission';
 
-  import { AccountTypes, ClusterTypes } from '@common/const';
+  import { AccountTypes, ClusterTypes, TendbClusterDbOperations } from '@common/const';
 
   import ClusterAuthorize from '@views/db-manage/common/cluster-authorize/ClusterAuthorize.vue';
 
-  import { dbOperations } from '../permission/common/consts';
-
   import ExcelAuthorize from './components/ExcelAuthorize.vue';
 
   import { useGlobalBizs } from '@/stores';
@@ -131,9 +129,9 @@
       id: 'privilege',
       multiple: true,
       children: [
-        ...dbOperations.dml.map((id) => ({ id: id.toLowerCase(), name: id })),
-        ...dbOperations.ddl.map((id) => ({ id: id.toLowerCase(), name: id })),
-        ...dbOperations.glob.map((id) => ({ id, name: id })),
+        ...TendbClusterDbOperations.dml.map((id) => ({ id: id.toLowerCase(), name: id })),
+        ...TendbClusterDbOperations.ddl.map((id) => ({ id: id.toLowerCase(), name: id })),
+        ...TendbClusterDbOperations.glob.map((id) => ({ id, name: id })),
       ],
     },
   ];
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/Index.vue
index da972cf9b2..9608e22737 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/Index.vue
@@ -74,7 +74,8 @@
   import {
     AccountTypes,
     ClusterTypes,
-    TicketTypes,
+    TendbClusterDbOperations,
+    TicketTypes
   } from '@common/const';
 
   import PermissionCatch from '@components/apply-permission/Catch.vue'
@@ -85,7 +86,6 @@
 
   import { getSearchSelectorParams } from '@utils';
 
-  import { dbOperations } from './common/consts';
   import AccountInfoDialog from './components/AccountInfoDialog.vue';
   import AddAccountDialog from './components/AddAccountDialog.vue';
   import CreateRule from './components/CreateRule.vue';
@@ -175,9 +175,9 @@
       multiple: true,
       logical: '&',
       children: [
-        ...dbOperations.dml.map(id => ({ id: id.toLowerCase(), name: id })),
-        ...dbOperations.ddl.map(id => ({ id: id.toLowerCase(), name: id })),
-        ...dbOperations.glob.map(id => ({ id, name: id })),
+        ...TendbClusterDbOperations.dml.map(id => ({ id: id.toLowerCase(), name: id })),
+        ...TendbClusterDbOperations.ddl.map(id => ({ id: id.toLowerCase(), name: id })),
+        ...TendbClusterDbOperations.glob.map(id => ({ id, name: id })),
       ],
     },
   ];
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/common/consts.ts b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/common/consts.ts
index be49de0917..c0c3feb55e 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/common/consts.ts
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/common/consts.ts
@@ -11,15 +11,6 @@
  * the specific language governing permissions and limitations under the License.
  */
 
-/**
- * 操作类型
- */
-export const dbOperations = {
-  dml: ['select', 'insert', 'update', 'delete'],
-  ddl: ['execute'],
-  glob: ['file', 'reload', 'process', 'show databases'],
-};
-
 /**
  * 密码策略
  */
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/components/CreateRule.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/components/CreateRule.vue
index e645ac1e62..fabca4d318 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/components/CreateRule.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/permission/components/CreateRule.vue
@@ -79,7 +79,7 @@
                 v-model="formdata.privilege.dml"
                 class="checkbox-group">
                 <BkCheckbox
-                  v-for="option of dbOperations.dml"
+                  v-for="option of TendbClusterDbOperations.dml"
                   :key="option"
                   v-bk-tooltips="{
                     content: t('你已选择所有权限'),
@@ -112,7 +112,7 @@
                 v-model="formdata.privilege.ddl"
                 class="checkbox-group">
                 <BkCheckbox
-                  v-for="option of dbOperations.ddl"
+                  v-for="option of TendbClusterDbOperations.ddl"
                   :key="option"
                   v-bk-tooltips="{
                     content: t('你已选择所有权限'),
@@ -145,7 +145,7 @@
                 v-model="formdata.privilege.glob"
                 class="checkbox-group">
                 <BkCheckbox
-                  v-for="option of dbOperations.glob"
+                  v-for="option of TendbClusterDbOperations.glob"
                   :key="option"
                   v-bk-tooltips="{
                     content: t('你已选择所有权限'),
@@ -223,13 +223,11 @@
 
   import { useBeforeClose } from '@hooks';
 
-  import { AccountTypes } from '@common/const';
+  import { AccountTypes, TendbClusterDbOperations } from '@common/const';
 
   import { messageSuccess } from '@utils';
 
-  import { dbOperations } from '../common/consts';
-
-  type AuthItemKey = keyof typeof dbOperations;
+  type AuthItemKey = keyof typeof TendbClusterDbOperations;
 
 
   interface Props {
@@ -358,7 +356,7 @@
       if (isEdit.value) {
         formdata.value.access_db = props.ruleObj!.access_db;
         editModeDisabledPrivileges.value = props.ruleObj!.privilege.split(',');
-        const dbOperationsMap = Object.entries(dbOperations).reduce((resultMap, [key, values]) => {
+        const dbOperationsMap = Object.entries(TendbClusterDbOperations).reduce((resultMap, [key, values]) => {
           values.forEach(value => {
             Object.assign(resultMap, { [value]: key });
           });
@@ -394,16 +392,16 @@
       });
   };
 
-  const getAllCheckedboxValue = (key: AuthItemKey) => formdata.value.privilege[key].length === dbOperations[key].length;
+  const getAllCheckedboxValue = (key: AuthItemKey) => formdata.value.privilege[key].length === TendbClusterDbOperations[key].length;
 
   const getAllCheckedboxIndeterminate = (key: AuthItemKey) => (
     formdata.value.privilege[key].length > 0
-    && formdata.value.privilege[key].length !== dbOperations[key].length
+    && formdata.value.privilege[key].length !== TendbClusterDbOperations[key].length
   );
 
   const handleSelectedAll = (key: AuthItemKey, value: boolean) => {
     if (value) {
-      formdata.value.privilege[key] = [...dbOperations[key]];
+      formdata.value.privilege[key] = [...TendbClusterDbOperations[key]];
       return;
     }
 
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
index a1aa5e6b26..45dce2ce64 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
@@ -10,6 +10,7 @@
  * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
  * the specific language governing permissions and limitations under the License.
  */
+
 import type { RouteRecordRaw } from 'vue-router';
 
 import FunctionControllModel, {
@@ -17,6 +18,8 @@ import FunctionControllModel, {
   type MySQLFunctions,
 } from '@services/model/function-controller/functionController';
 
+import { AccountTypes } from '@common/const';
+
 import { checkDbConsole } from '@utils';
 
 import { t } from '@locales/index';
@@ -282,6 +285,15 @@ const permissionManageRoutes = [
   //   },
   //   component: () => import('@views/db-manage/tendb-cluster/permission-list/Index.vue'),
   // },
+  {
+    name: 'SpiderPermissionRetrieve',
+    path: 'permission-retrieve',
+    meta: {
+      navName: t('权限查询'),
+      accountType: AccountTypes.TENDBCLUSTER,
+    },
+    component: () => import('@views/permission-retrieve/Index.vue'),
+  },
   {
     path: 'whitelist',
     name: 'spiderWhitelist',
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/Index.vue b/dbm-ui/frontend/src/views/permission-retrieve/Index.vue
new file mode 100644
index 0000000000..bf72119a72
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/Index.vue
@@ -0,0 +1,152 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <BkLoading
+    :loading="loading"
+    :z-index="100">
+    <div class="permission-retrieve">
+      <BkCard
+        is-collapse
+        :title="t('查询条件')">
+        <Options
+          ref="optionsRef"
+          v-model="formData"
+          v-model:is-master="isMaster"
+          class="ml-8"
+          :loading
+          @reset="handleReset"
+          @search="handleSearch" />
+      </BkCard>
+      <BkCard
+        class="mt-16"
+        is-collapse
+        :title="t('查询结果')">
+        <Result
+          ref="resultRef"
+          v-model="formData.format_type"
+          class="ml-8"
+          :data="data"
+          :db-memo="dbMemo"
+          :is-master="isMaster"
+          @download="handleDownload"
+          @search="handleSearch" />
+      </BkCard>
+    </div>
+  </BkLoading>
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getAccountPrivs, getDownloadPrivs } from '@services/source/mysqlPermission';
+
+  import { batchSplitRegex } from '@common/regex';
+
+  import Options from './components/options/Index.vue';
+  import Result from './components/result/Index.vue';
+
+  const { t } = useI18n();
+
+  const getDefaultFormData = () => ({
+    ips: '',
+    immute_domains: '',
+    users: [] as string[],
+    dbs: [] as string[],
+    format_type: 'ip',
+  });
+
+  const optionsRef = ref<InstanceType<typeof Options>>();
+  const resultRef = ref<InstanceType<typeof Result>>();
+  const isMaster = ref(true);
+
+  const dbMemo = shallowRef<string[]>([]);
+
+  const formData = reactive(getDefaultFormData());
+
+  const {
+    run: runGetAccountPrivs,
+    data,
+    mutate,
+    loading,
+  } = useRequest(getAccountPrivs, {
+    manual: true,
+    onError() {
+      mutate({
+        match_ips_count: 0,
+        results: {
+          privs_for_ip: null,
+          privs_for_cluster: null,
+          has_priv: null,
+          no_priv: null,
+        },
+      });
+    },
+  });
+
+  watch([() => formData.ips, () => formData.immute_domains], () => {
+    optionsRef.value!.getUserList();
+  });
+
+  const getApiParams = (pagination = false) => {
+    dbMemo.value = formData.dbs;
+    const params = {
+      ips: formData.ips.replace(batchSplitRegex, ','),
+      immute_domains: formData.immute_domains.replace(batchSplitRegex, ','),
+      users: formData.users.join(','),
+      format_type: formData.format_type,
+      ...optionsRef.value!.getTypes(),
+    };
+
+    if (formData.dbs.length) {
+      Object.assign(params, { dbs: formData.dbs.join(',') });
+    }
+
+    if (pagination) {
+      Object.assign(params, resultRef.value!.getPaginationParams());
+    }
+
+    return params;
+  };
+
+  const handleSearch = () => {
+    runGetAccountPrivs(getApiParams(true));
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, getDefaultFormData());
+    resultRef.value!.resetPagination();
+    dbMemo.value = [];
+  };
+
+  const handleDownload = () => {
+    getDownloadPrivs(getApiParams());
+  };
+</script>
+
+<style lang="less" scoped>
+  .permission-retrieve {
+    .bk-card {
+      border: none;
+      :deep(.bk-card-head) {
+        border-bottom: none;
+
+        .title {
+          color: #313238;
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/options/Index.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/options/Index.vue
new file mode 100644
index 0000000000..f3964761a3
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/Index.vue
@@ -0,0 +1,470 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="permission-retrieve-options">
+    <BkForm
+      ref="formRef"
+      form-type="vertical"
+      :model="formData"
+      :rules="rules">
+      <BkFormItem
+        :label="t('源客户端 IP')"
+        property="ips"
+        required>
+        <BatchInput
+          v-model="formData.ips"
+          icon-type="batch-host-select"
+          :max-count="50"
+          @icon-click="() => (hostSelectorShow = true)" />
+      </BkFormItem>
+      <BkFormItem
+        :label="t('域名')"
+        property="immute_domains"
+        required>
+        <BatchInput
+          v-model="formData.immute_domains"
+          icon-type="host-select"
+          :max-count="20"
+          @icon-click="() => (clusterSelectorShow = true)" />
+      </BkFormItem>
+      <BkFormItem
+        :label="t('账号')"
+        property="users"
+        required>
+        <BkSelect
+          v-model="formData.users"
+          allow-create
+          collapse-tags
+          filterable
+          multiple
+          multiple-mode="tag">
+          <BkOption
+            v-for="(item, index) in userList?.results"
+            :id="item"
+            :key="index"
+            :name="item" />
+          <template #tag="{ selected }">
+            <BkTag
+              v-for="item in selected"
+              :key="item.value"
+              closable
+              :theme="
+                userOptionList.findIndex((userOptionItem) => userOptionItem.value === item.value) > -1 ? '' : 'warning'
+              "
+              @close="(event: Event) => handleUserClose(item.value)">
+              {{ item.value }}
+            </BkTag>
+          </template>
+        </BkSelect>
+      </BkFormItem>
+      <BkFormItem
+        :label="t('访问 DB')"
+        property="dbs">
+        <BkTagInput
+          v-model="formData.dbs"
+          allow-create
+          collapse-tags
+          has-delete-icon
+          :placeholder="t('请输入DB，支持%')" />
+      </BkFormItem>
+    </BkForm>
+    <div class="mb-24">
+      <BkButton
+        class="w-88"
+        :loading="loading"
+        theme="primary"
+        @click="handleSearch">
+        {{ t('查询') }}
+      </BkButton>
+      <BkButton
+        class="ml8 w-88"
+        :disabled="loading"
+        @click="handleReset">
+        {{ t('重置') }}
+      </BkButton>
+    </div>
+    <InstanceSelector
+      v-model:is-show="hostSelectorShow"
+      :cluster-types="accoutMap[accountType].hostSelectorTypes"
+      :disable-dialog-submit-method="disableHostSubmitMethod"
+      only-one-type
+      :selected="selectedHosts"
+      :tab-list-config="hostTabListConfig"
+      @change="handleHostSelectChange">
+      <template #submitTips="{ hostList: resultHostList }">
+        <I18nT
+          keypath="至多n台_已选n台"
+          style="font-size: 14px; color: #63656e"
+          tag="span">
+          <span
+            class="number"
+            style="color: #2dcb56">
+            50
+          </span>
+          <span
+            class="number"
+            style="color: #3a84ff">
+            {{ resultHostList.length }}
+          </span>
+        </I18nT>
+      </template>
+    </InstanceSelector>
+    <ClusterSelector
+      v-model:is-show="clusterSelectorShow"
+      :cluster-types="accoutMap[accountType].clusterSelectorTypes"
+      :disable-dialog-submit-method="disableClusterSubmitMethod"
+      only-one-type
+      :selected="selectedClusters"
+      :tab-list-config="clusterTabListConfig"
+      @change="handleClusterSelectorChange">
+      <template #submitTips="{ clusterList: resultClusterList }">
+        <I18nT
+          keypath="至多n台_已选n台"
+          style="font-size: 14px; color: #63656e"
+          tag="span">
+          <span
+            class="number"
+            style="color: #2dcb56">
+            20
+          </span>
+          <span
+            class="number"
+            style="color: #3a84ff">
+            {{ resultClusterList.length }}
+          </span>
+        </I18nT>
+      </template>
+    </ClusterSelector>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { Form } from 'bkui-vue';
+  import type { ComponentProps } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+  import TendbsingleModel from '@services/model/mysql/tendbsingle';
+  import SpiderModel from '@services/model/spider/tendbCluster';
+  import { getAccountUsers } from '@services/source/mysqlPermission';
+  // import { getPermissionRules } from '@services/source/permission';
+  import { getTendbhaList, getTendbhaSalveList } from '@services/source/tendbha';
+
+  import { AccountTypes, ClusterTypes } from '@common/const';
+  import { batchSplitRegex, domainRegex, ipv4 } from '@common/regex';
+
+  import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
+  import InstanceSelector, {
+    type InstanceSelectorValues,
+    type IValue,
+    type PanelListType,
+  } from '@components/instance-selector/Index.vue';
+
+  import BatchInput from './components/BatchInput.vue';
+
+  type SelectorModelType = TendbhaModel | TendbsingleModel | SpiderModel;
+
+  interface Props {
+    loading: boolean;
+  }
+
+  interface Emits {
+    (e: 'search'): void;
+    (e: 'reset'): void;
+  }
+
+  interface Expose {
+    getTypes: () => {
+      cluster_type: ClusterTypes;
+      account_type: AccountTypes;
+    };
+    getUserList: () => void;
+  }
+
+  defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const formData = defineModel<{
+    ips: string;
+    immute_domains: string;
+    users: string[];
+    dbs: string[];
+  }>({
+    required: true,
+  });
+
+  const isMaster = defineModel<boolean>('isMaster', {
+    required: true,
+  });
+
+  const { t } = useI18n();
+  const route = useRoute();
+
+  const { accountType } = route.meta as { accountType: string };
+
+  const accoutMap: Record<
+    string,
+    {
+      hostSelectorTypes: ComponentProps<typeof InstanceSelector>['clusterTypes'];
+      clusterSelectorTypes: ComponentProps<typeof ClusterSelector>['clusterTypes'];
+      ruleApi: (params: any) => ReturnType<typeof getAccountUsers>;
+    }
+  > = {
+    [AccountTypes.MYSQL]: {
+      hostSelectorTypes: ['TendbSingleHost', 'TendbHaHost'],
+      clusterSelectorTypes: [ClusterTypes.TENDBHA, 'tendbhaSlave', ClusterTypes.TENDBSINGLE],
+      ruleApi: getAccountUsers,
+    },
+    [AccountTypes.TENDBCLUSTER]: {
+      hostSelectorTypes: ['TendbClusterHost'],
+      clusterSelectorTypes: [ClusterTypes.TENDBCLUSTER],
+      ruleApi: getAccountUsers,
+    },
+  };
+
+  const clusterTabListConfig = {
+    tendbhaSlave: {
+      name: t('高可用-从域名'),
+      showPreviewResultTitle: true,
+      getResourceList: (params: ServiceParameters<typeof getTendbhaSalveList>) => {
+        params.slave_domain = params.domain;
+        delete params.domain;
+        return getTendbhaSalveList(params);
+      },
+    },
+    [ClusterTypes.TENDBHA]: {
+      name: t('高可用-主域名'),
+      showPreviewResultTitle: true,
+      getResourceList: (params: ServiceParameters<typeof getTendbhaList>) => {
+        params.master_domain = params.domain;
+        delete params.domain;
+        return getTendbhaList(params);
+      },
+    },
+  } as unknown as Record<string, TabConfig>;
+
+  const hostTabListConfig = {
+    TendbSingleHost: [
+      {
+        topoConfig: {
+          countFunc: (clusterItem: TendbsingleModel) => {
+            const hostList = clusterItem.masters;
+            const ipList = hostList.map((hostItem) => hostItem.ip);
+            return new Set(ipList).size;
+          },
+        },
+      },
+    ],
+    TendbHaHost: [
+      {
+        topoConfig: {
+          countFunc: (clusterItem: TendbhaModel) => {
+            const hostList = [...clusterItem.masters, ...clusterItem.slaves, ...clusterItem.proxies];
+            const ipList = hostList.map((hostItem) => hostItem.ip);
+            return new Set(ipList).size;
+          },
+        },
+      },
+    ],
+    TendbClusterHost: [
+      {
+        topoConfig: {
+          countFunc: (clusterItem: SpiderModel) => {
+            const hostList = [
+              ...clusterItem.spider_master,
+              ...clusterItem.spider_slave,
+              ...clusterItem.spider_mnt,
+              ...clusterItem.remote_db,
+              ...clusterItem.remote_dr,
+            ];
+            const ipList = hostList.map((hostItem) => hostItem.ip);
+            return new Set(ipList).size;
+          },
+        },
+        tableConfig: {
+          firsrColumn: {
+            label: 'IP',
+            field: 'ip',
+            role: '',
+          },
+        },
+      },
+    ],
+  } as unknown as Record<ClusterTypes, PanelListType>;
+
+  const rules = {
+    ips: [
+      {
+        required: true,
+        message: t('源客户端 IP 不能为空'),
+        validator: (value: string) => value !== '',
+      },
+      {
+        message: t('不支持 %'),
+        validator: (value: string) => !value.includes('%'),
+      },
+      {
+        message: t('格式错误'),
+        validator: (value: string) => {
+          const ipList = value.split(batchSplitRegex);
+          return ipList.every((ip) => ipv4.test(ip));
+        },
+      },
+      {
+        message: t('最多输入n个', { n: 50 }),
+        validator: (value: string) => {
+          const ipList = value.split(batchSplitRegex);
+          return ipList.length <= 50;
+        },
+      },
+    ],
+    immute_domains: [
+      {
+        required: true,
+        message: t('域名不能为空'),
+        validator: (value: string) => value !== '',
+      },
+      {
+        message: t('格式错误'),
+        validator: (value: string) => {
+          const domainList = value.split(batchSplitRegex);
+          return domainList.every((domain) => domainRegex.test(domain));
+        },
+      },
+      {
+        message: t('最多输入n个', { n: 20 }),
+        validator: (value: string) => {
+          const ipList = value.split(batchSplitRegex);
+          return ipList.length <= 20;
+        },
+      },
+    ],
+  };
+
+  const getDefaultSelectedHosts = () =>
+    accoutMap[accountType].hostSelectorTypes.reduce((prevMap, type) => Object.assign({}, prevMap, { [type]: [] }), {});
+
+  const getDefaultSelectedClusters = () =>
+    accoutMap[accountType].clusterSelectorTypes.reduce(
+      (prevMap, type) => Object.assign({}, prevMap, { [type]: [] }),
+      {},
+    );
+
+  const formRef = ref<InstanceType<typeof Form>>();
+  const hostSelectorShow = ref(false);
+  const clusterSelectorShow = ref(false);
+
+  const selectedHosts = shallowRef(getDefaultSelectedHosts());
+  const selectedClusters = shallowRef<{ [key: string]: Array<SelectorModelType> }>(getDefaultSelectedClusters());
+
+  const userOptionList = computed(() =>
+    (userList.value?.results || []).map((userItem) => ({
+      label: userItem,
+      value: userItem,
+    })),
+  );
+
+  const { data: userList, run: runGetUserList } = useRequest(accoutMap[accountType].ruleApi, {
+    manual: true,
+  });
+
+  const disableHostSubmitMethod = (hostList: string[]) => (hostList.length <= 50 ? false : t('至多n台', { n: 50 }));
+
+  const disableClusterSubmitMethod = (hostList: string[]) => (hostList.length <= 20 ? false : t('至多n台', { n: 20 }));
+
+  const handleHostSelectChange = (data: InstanceSelectorValues<IValue>) => {
+    selectedHosts.value = data;
+    const clusterList = Object.keys(data).reduce<string[]>(
+      (prevList, key) => prevList.concat(data[key].map((item) => item.ip)),
+      [],
+    );
+    formData.value.ips = clusterList.join(' | ');
+  };
+
+  const handleClusterSelectorChange = (selected: Record<string, Array<SelectorModelType>>) => {
+    selectedClusters.value = selected;
+    const clusterList = Object.keys(selected).reduce<string[]>(
+      (prevList, key) => prevList.concat(selected[key].map((item) => item.master_domain)),
+      [],
+    );
+    formData.value.immute_domains = clusterList.join(',');
+  };
+
+  const handleUserClose = (value: string) => {
+    const index = formData.value.users.findIndex((userItem) => userItem === value);
+    if (index > -1) {
+      formData.value.users.splice(index, 1);
+    }
+  };
+
+  const handleSearch = () => {
+    formRef.value!.validate().then(() => {
+      emits('search');
+    });
+  };
+
+  const handleReset = () => {
+    selectedClusters.value = getDefaultSelectedClusters();
+    emits('reset');
+  };
+
+  defineExpose<Expose>({
+    getTypes() {
+      isMaster.value = !(selectedClusters.value.tendbhaSlave && selectedClusters.value.tendbhaSlave.length > 0);
+      const clusterList = Object.values(selectedClusters.value).find((clusterList) => clusterList.length > 0);
+      return {
+        cluster_type: (clusterList?.[0].cluster_type || ClusterTypes.TENDBSINGLE) as ClusterTypes,
+        account_type: accountType as AccountTypes,
+      };
+    },
+    getUserList() {
+      formRef.value!.validate(['ips', 'immute_domains']).then(() => {
+        const clusterList = Object.values(selectedClusters.value).find((clusterList) => clusterList.length > 0);
+        runGetUserList({
+          ips: formData.value.ips.replace(batchSplitRegex, ','),
+          immute_domains: formData.value.immute_domains.replace(batchSplitRegex, ','),
+          cluster_type: (clusterList?.[0].cluster_type || ClusterTypes.TENDBSINGLE) as ClusterTypes,
+          account_type: accountType as AccountTypes,
+          limit: -1,
+          offset: 0,
+        });
+      });
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .permission-retrieve-options {
+    .bk-form {
+      display: flex;
+
+      .bk-form-item {
+        flex: 1;
+
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+      }
+    }
+
+    .input-suffix {
+      display: flex;
+      width: 32px;
+      border-left: 1px solid #c4c6cc;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/BatchInput.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/BatchInput.vue
new file mode 100644
index 0000000000..097f663e75
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/BatchInput.vue
@@ -0,0 +1,122 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="permission-retrieve-input">
+    <div class="input-box">
+      <BkInput
+        v-model="modelValue"
+        autosize
+        :cols="2"
+        :placeholder="t('请输入，多个英文逗号或换行分隔，最多n个', { n: maxCount })"
+        :resize="false"
+        :rows="1"
+        type="textarea"
+        @blur="handleBlur"
+        @focus="handleFocus">
+      </BkInput>
+    </div>
+    <BkButton
+      v-bk-tooltips="t('批量选择')"
+      class="input-suffix"
+      text
+      @click="handleIconClick">
+      <DbIcon :type="iconType" />
+    </BkButton>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+
+  import { batchSplitRegex } from '@common/regex';
+
+  interface Props {
+    iconType: string;
+    maxCount: number;
+  }
+
+  interface Emits {
+    (e: 'icon-click'): void;
+  }
+
+  defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<string>({
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  const isFocused = ref(false);
+
+  const handleFocus = () => {
+    isFocused.value = true;
+    modelValue.value = modelValue.value.replace(batchSplitRegex, '\n');
+  };
+
+  const handleBlur = () => {
+    isFocused.value = false;
+    modelValue.value = modelValue.value.replace(batchSplitRegex, ' | ');
+  };
+
+  const handleIconClick = () => {
+    emits('icon-click');
+  };
+</script>
+
+<style lang="less" scoped>
+  .permission-retrieve-input {
+    display: flex;
+    position: relative;
+
+    .input-box {
+      flex: 1;
+      position: absolute;
+      z-index: 10;
+      left: 0;
+      top: -1px;
+      height: 32px;
+      width: calc(100% - 32px);
+
+      :deep(.bk-textarea) {
+        border-radius: 2px 0 0 2px;
+
+        textarea {
+          min-height: 30px !important;
+          height: 30px !important;
+        }
+
+        &.is-focused {
+          textarea {
+            min-height: 100px !important;
+            max-height: 500px;
+          }
+        }
+      }
+    }
+
+    .input-suffix {
+      display: flex;
+      width: 32px;
+      height: 32px;
+      border: 1px solid #c4c6cc;
+      border-left: none;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0 2px 2px 0;
+      margin-left: auto;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/result/Index.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/result/Index.vue
new file mode 100644
index 0000000000..e4accb9c0d
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/result/Index.vue
@@ -0,0 +1,627 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <div class="permission-retrieve-result">
+    <div class="head-item">
+      <div class="head-item-title">{{ t('无权限的IP共n个', { n: privIpMap.noPriv.length }) }}</div>
+      <template v-if="privIpMap.noPriv.length">
+        ：
+        <div class="head-item-ip">
+          <MultLineText
+            :expandable="false"
+            :line="3"
+            show-tooltips>
+            {{ privIpMap.noPriv.join('，') }}
+          </MultLineText>
+        </div>
+        <BkButton
+          v-bk-tooltips="t('复制 IP')"
+          class="ml-4 mt-2"
+          style="flex-shrink: 0"
+          text
+          theme="primary"
+          @click="handleIpCopy(privIpMap.noPriv.join('\n'))">
+          <DbIcon type="copy" />
+        </BkButton>
+      </template>
+    </div>
+    <div class="head-item head-item-center mt-12">
+      <span class="head-item-title">{{ t('有权限的IP共n个', { n: privIpMap.hasPriv.length }) }}</span>
+      <template v-if="privIpMap.hasPriv.length">
+        <BkButton
+          v-bk-tooltips="t('复制 IP')"
+          class="ml-4"
+          text
+          theme="primary"
+          @click="handleIpCopy(privIpMap.hasPriv.join('\n'))">
+          <DbIcon type="copy" />
+        </BkButton>
+        <BkButton
+          v-bk-tooltips="t('导出结果表')"
+          class="ml-4"
+          text
+          theme="primary"
+          @click="handleExport">
+          <DbIcon type="daochu-2" />
+        </BkButton>
+      </template>
+      <BkRadioGroup
+        v-model="formatType"
+        style="margin-left: auto"
+        type="capsule">
+        <BkRadioButton label="ip">{{ t('IP 视角') }}</BkRadioButton>
+        <BkRadioButton label="cluster">{{ t('域名视角') }}</BkRadioButton>
+      </BkRadioGroup>
+    </div>
+    <div class="mt-16 mb-24">
+      <DbOriginalTable
+        ref="tableRef"
+        :columns="columns"
+        :data="tableData"
+        :max-height="tableMaxHeight"
+        :pagination="pagination"
+        remote-pagination
+        @page-limit-change="handleTableLimitChange"
+        @page-value-change="handleTablePageChange" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import _ from 'lodash'
+  import { useI18n } from 'vue-i18n';
+
+  import { getAccountPrivs } from '@services/source/mysqlPermission';
+
+  import { useCopy,useTableMaxHeight  } from '@hooks'
+
+  import {
+    AccountTypes,
+    MysqlDbOperations,
+    MysqlDdlSensitiveWords,
+    TendbClusterDbOperations
+  } from '@common/const';
+
+  import DbTable from '@components/db-table/index.vue';
+  import DbOriginalTable from '@components/db-table/OriginalTable.vue'
+  import MultLineText from '@components/mult-line-text/Index.vue';
+
+  interface TableItem {
+    ip: string[],
+    db: string[],
+    immute_domain: string,
+    user: string,
+    match_ip: string,
+    match_db: string,
+    priv: string
+  }
+
+  interface Props {
+    data?: ServiceReturnType<typeof getAccountPrivs>;
+    isMaster: boolean;
+    dbMemo: string[]
+  }
+
+  interface Emits {
+    (e: 'search'): void
+    (e: 'download'): void
+  }
+
+  interface Expose {
+    getPaginationParams: () => {
+      limit: number,
+      offset: number
+    };
+    resetPagination: () => void
+  }
+
+  const props = defineProps<Props>()
+  const emits = defineEmits<Emits>()
+  const formatType = defineModel<string>({
+    default: ''
+  })
+
+  const route = useRoute();
+  const { t } = useI18n();
+  const copy = useCopy();
+  const tableMaxHeight = useTableMaxHeight(530);
+
+  const { accountType } = route.meta as { accountType: string };
+
+  const isSensitivePriv = (priv: string) => {
+    const dbOprationsMap: Record<string, string[]> = {
+      [AccountTypes.MYSQL]: [...MysqlDbOperations.glob, ...MysqlDdlSensitiveWords],
+      [AccountTypes.TENDBCLUSTER]: TendbClusterDbOperations.glob
+    }
+
+    const dbOprations = dbOprationsMap[accountType]
+    return dbOprations.includes(priv)
+  }
+
+  const tableRef = ref<InstanceType<typeof DbTable>>();
+
+  const pagination = reactive({
+    current: 1,
+    count: 0,
+    limit: 10,
+    limitList: [10, 20, 50, 100, 500],
+  });
+
+  const columns = computed(() => {
+    if (formatType.value === 'ip') {
+      const ipColums = [
+        {
+          label: t('源客户端 IP'),
+          field: 'ip',
+          width: 240,
+          renderHead: () => (
+            <>
+              <div class='custom-head-title'>{t('查询的对象')}</div>
+              <div class='custom-head-sub-title'>{t('源客户端 IP')}</div>
+            </>
+          ),
+          rowspan: ({ row }: { row: TableItem }) => {
+            const rowSpan = tableData.value.filter((item) => _.isEqual(item.ip, row.ip)).length;
+            return rowSpan > 1 ? rowSpan : 1;
+          },
+          render: ({ row }: { row: TableItem }) => <span style="font-weight: bolder">{row.ip.join('，')}</span>
+        },
+        {
+          label: t('集群域名'),
+          field: 'immute_domain',
+          width: 240,
+          renderHead: () => (
+            <>
+              <div class='custom-head-title'>{t('匹配的规则')}</div>
+              <div class='custom-head-sub-title'>{t('集群域名')}</div>
+            </>
+          ),
+          rowspan: ({ row }: { row: TableItem }) => {
+            const rowSpan = tableData.value.filter((item) => _.isEqual(item.ip, row.ip) && _.isEqual(item.db, row.db) && item.immute_domain === row.immute_domain).length;
+            return rowSpan > 1 ? rowSpan : 1;
+          },
+          render: ({ row }: { row: TableItem }) => (
+            <>
+              {
+                props.isMaster ? <bk-tag theme="info">{t('主')}</bk-tag> : <bk-tag theme="success">{t('从')}</bk-tag>
+              }
+              <span class="ml-4">{row.immute_domain}</span>
+            </>
+          ),
+        },
+        {
+          label: t('账号'),
+          field: 'user',
+          width: 240,
+          renderHead: () => (
+            <>
+              <div class='custom-head-title'></div>
+              <div class='custom-head-sub-title'>{t('账号')}</div>
+            </>
+          ),
+          rowspan: ({ row }: { row: TableItem }) => {
+            const rowSpan = tableData.value.filter((item) => _.isEqual(item.ip, row.ip) && _.isEqual(item.db, row.db) && item.immute_domain === row.immute_domain).length;
+            return rowSpan > 1 ? rowSpan : 1;
+          },
+        },
+        {
+          label: t('匹配中的访问源'),
+          field: 'match_ip',
+          width: 240,
+          renderHead: () => (
+            <>
+              <div class='custom-head-title'></div>
+              <div class='custom-head-sub-title'>{t('匹配中的访问源')}</div>
+            </>
+          ),
+          rowspan: ({ row }: { row: TableItem }) => {
+            const rowSpan = tableData.value.filter((item) => _.isEqual(item.ip, row.ip) && _.isEqual(item.db, row.db) && item.immute_domain === row.immute_domain).length;
+            return rowSpan > 1 ? rowSpan : 1;
+          },
+        },
+        {
+          label: t('匹配中的 DB'),
+          field: 'match_db',
+          width: 240,
+          renderHead: () => (
+            <>
+              <div class='custom-head-title'></div>
+              <div class='custom-head-sub-title'>{t('匹配中的 DB')}</div>
+            </>
+          ),
+          render: ({ row }: { row: TableItem }) => (
+            <bk-tag>{row.match_db}</bk-tag>
+          ),
+        },
+        {
+          label: t('权限'),
+          field: 'priv',
+          width: 240,
+          renderHead: () => (
+            <>
+              <div class='custom-head-title'></div>
+              <div class='custom-head-sub-title'>{t('权限')}</div>
+            </>
+          ),
+          render: ({ row }: { row: TableItem }) => {
+            const { priv } = row
+            const privList = priv.split(',')
+
+            return privList.map((privItem, index) => (
+              <>
+                { index !== 0 && <span>,</span> }
+                <span>{privItem}</span>
+                { isSensitivePriv(privItem) && (
+                  <bk-tag
+                    size="small"
+                    theme="warning"
+                    class="ml-4"
+                  >
+                    {t('敏感')}
+                  </bk-tag>
+                )}
+              </>
+            ))
+          }
+        },
+      ];
+
+      if (props.dbMemo.length > 0) {
+        ipColums.splice(1, 0, {
+          label: t('访问的 DB'),
+          field: 'db',
+          width: 240,
+          renderHead: () => (
+            <>
+              <div class='custom-head-title'></div>
+              <div class='custom-head-sub-title'>{t('访问的 DB')}</div>
+            </>
+          ),
+          rowspan: ({ row }: { row: TableItem }) => {
+            const rowSpan = tableData.value.filter((item) => _.isEqual(item.ip, row.ip) && _.isEqual(item.db, row.db)).length;
+            return rowSpan > 1 ? rowSpan : 1;
+          },
+          render: ({ row }: { row: TableItem }) => (
+            <>
+              { row.db.map(dbItem => <bk-tag>{dbItem}</bk-tag>) }
+            </>
+          )
+        })
+      }
+
+      return ipColums;
+    }
+
+    const domainColumns = [
+      {
+        label: t('集群域名'),
+        field: 'immute_domain',
+        width: 240,
+        renderHead: () => (
+          <>
+            <div class='custom-head-title'>{t('匹配的规则')}</div>
+            <div class='custom-head-sub-title'>{t('集群域名')}</div>
+          </>
+        ),
+        rowspan: ({ row }: { row: TableItem }) => {
+          const rowSpan = tableData.value.filter((item) => item.immute_domain === row.immute_domain).length;
+          return rowSpan > 1 ? rowSpan : 1;
+        },
+        render: ({ row }: { row: TableItem }) => (
+          <>
+            {
+              props.isMaster ? <bk-tag theme="info">{t('主')}</bk-tag> : <bk-tag theme="success">{t('从')}</bk-tag>
+            }
+            <span class="ml-4">{row.immute_domain}</span>
+          </>
+        ),
+      },
+      {
+        label: t('账号'),
+        field: 'user',
+        width: 240,
+        renderHead: () => (
+          <>
+            <div class='custom-head-title'></div>
+            <div class='custom-head-sub-title'>{t('账号')}</div>
+          </>
+        ),
+        rowspan: ({ row }: { row: TableItem }) => {
+          const rowSpan = tableData.value.filter((item) => item.immute_domain === row.immute_domain).length;
+          return rowSpan > 1 ? rowSpan : 1;
+        },
+      },
+      {
+        label: t('匹配中的访问源'),
+        field: 'match_ip',
+        width: 240,
+        renderHead: () => (
+          <>
+            <div class='custom-head-title'></div>
+            <div class='custom-head-sub-title'>{t('匹配中的访问源')}</div>
+          </>
+        ),
+        rowspan: ({ row }: { row: TableItem }) => {
+          const rowSpan = tableData.value.filter((item) => item.immute_domain === row.immute_domain && item.match_ip === row.match_ip).length;
+          return rowSpan > 1 ? rowSpan : 1;
+        },
+      },
+      {
+        label: t('匹配中的 DB'),
+        field: 'match_db',
+        width: 240,
+        renderHead: () => (
+          <>
+            <div class='custom-head-title'></div>
+            <div class='custom-head-sub-title'>{t('匹配中的 DB')}</div>
+          </>
+        ),
+        render: ({ row }: { row: TableItem }) => (
+          <bk-tag>{row.match_db}</bk-tag>
+        ),
+      },
+      {
+        label: t('权限'),
+        field: 'priv',
+        width: 240,
+        renderHead: () => (
+          <>
+            <div class='custom-head-title'></div>
+            <div class='custom-head-sub-title'>{t('权限')}</div>
+          </>
+        ),
+        render: ({ row }: { row: TableItem }) => {
+          const { priv } = row
+          const privList = priv.split(',')
+
+          return privList.map((privItem, index) => (
+            <>
+              { index !== 0 && <span>，</span> }
+              <span>{privItem}</span>
+              { isSensitivePriv(privItem) && (
+                <bk-tag
+                  size="small"
+                  theme="warning"
+                  class="ml-4"
+                >
+                  {t('敏感')}
+                </bk-tag>
+              )}
+            </>
+          ))
+        }
+      },
+      {
+        label: t('源客户端 IP'),
+        field: 'ip',
+        width: 240,
+        renderHead: () => (
+          <>
+            <div class='custom-head-title'>{t('查询的对象')}</div>
+            <div class='custom-head-sub-title'>{t('源客户端 IP')}</div>
+          </>
+        ),
+        rowspan: ({ row }: { row: TableItem }) => {
+          const rowSpan = tableData.value.filter((item) => item.ip === row.ip).length;
+          return rowSpan > 1 ? rowSpan : 1;
+        },
+        render: ({ row }: { row: TableItem }) => <span style="font-weight: bolder">{row.ip.join('，')}</span>,
+      },
+    ];
+
+    if (props.dbMemo.length > 0) {
+      domainColumns.push({
+        label: t('访问的 DB'),
+        field: 'db',
+        width: 240,
+        renderHead: () => (
+          <>
+              <div class='custom-head-title'>{t('查询的对象')}</div>
+            <div class='custom-head-sub-title'>{t('访问的 DB')}</div>
+          </>
+        ),
+        render: ({ row }: { row: TableItem }) => (
+          <>
+            { row.db.map(dbItem => <bk-tag>{dbItem}</bk-tag>) }
+          </>
+        )
+      })
+    }
+
+    return domainColumns;
+  });
+
+  const tableData = computed(() => {
+    const {data} = props
+    if (data) {
+      if (data.results.privs_for_ip) {
+        const privsForIp = data.results.privs_for_ip;
+        const result = privsForIp.reduce<TableItem[]>((acc, ipItem) => acc.concat(
+          ipItem.dbs.reduce<TableItem[]>((dbAcc, dbItem) => dbAcc.concat(
+            dbItem.domains.reduce<TableItem[]>((domainAcc, domainItem) => domainAcc.concat(
+              domainItem.users.reduce<TableItem[]>((userAcc, userItem) => userAcc.concat(
+                userItem.match_ips.reduce<TableItem[]>((matchIpAcc, matchIpItem) => userAcc.concat(
+                  matchIpItem.match_dbs.map(matchDbItem => ({
+                  ip: [ipItem.ip],
+                  db: [dbItem.db],
+                  immute_domain: domainItem.immute_domain,
+                  user: userItem.user,
+                  match_ip: matchIpItem.match_ip,
+                  match_db: matchDbItem.match_db,
+                  priv: matchDbItem.priv.toLocaleLowerCase()
+                }))
+                ), [])
+              ), [])
+            ), [])
+          ), [])
+        ), []);
+        return result
+      }
+      if (data.results.privs_for_cluster) {
+        const privsForCluster = data.results.privs_for_cluster;
+        const result = privsForCluster.reduce<TableItem[]>((acc, ipItem) => acc.concat(
+          ipItem.users.reduce<TableItem[]>((userAcc, userItem) => userAcc.concat(
+            userItem.match_ips.reduce<TableItem[]>((matchIpAcc, matchIpItem) => matchIpAcc.concat(
+              matchIpItem.match_dbs.map(matchDbItem => {
+                const ipDb = matchDbItem.ip_dbs.reduce<{
+                  ip: string[],
+                  db: string[]
+                }>((prevIpDb, ipDbItem) => ({
+                  ip: prevIpDb.ip.concat(ipDbItem.ip),
+                  db: prevIpDb.ip.concat(ipDbItem.db)
+                }), {
+                  ip: [],
+                  db: []
+                });
+
+                return {
+                  immute_domain: ipItem.immute_domain,
+                  user: userItem.user,
+                  match_ip: matchIpItem.match_ip,
+                  match_db: matchDbItem.match_db,
+                  priv: matchDbItem.priv,
+                  ...ipDb
+                }
+              })
+            ), [])
+          ), [])
+        ), []);
+        return result
+      }
+    }
+    return [];
+  });
+
+  const privIpMap = computed(() => {
+    const { data } = props
+    if (data) {
+      const { no_priv: noPriv, has_priv: hasPriv } = data.results
+      return {
+        noPriv: noPriv || [],
+        hasPriv: hasPriv || []
+      }
+    }
+    return {
+      noPriv: [],
+      hasPriv: []
+    }
+  })
+
+  watch(() => props.data?.match_ips_count, () => {
+    pagination.count = props.data?.match_ips_count ?? 0
+  })
+
+  const handleTablePageChange = (value: number) => {
+    pagination.current = value
+    emits('search')
+  };
+
+  const handleTableLimitChange = (value: number) => {
+    pagination.limit = value
+    handleTablePageChange(1)
+  };
+
+  const handleIpCopy = (value: string) => {
+    copy(value);
+  };
+
+  const handleExport = () => {
+    emits('download')
+  };
+
+  defineExpose<Expose>({
+    getPaginationParams() {
+      return {
+        limit: pagination.limit,
+        offset: pagination.limit * (pagination.current - 1),
+      }
+    },
+    resetPagination() {
+      Object.assign(pagination, {
+        current: 1,
+        count: 0,
+      })
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+  .permission-retrieve-result {
+    .head-item {
+      display: flex;
+      align-items: flex-start;
+
+      .head-item-title {
+        flex-shrink: 0;
+        font-size: 12px;
+        font-weight: bolder;
+        color: #313238;
+      }
+
+      .head-item-ip {
+        font-size: 12px;
+        color: #313238;
+      }
+    }
+
+    .head-item-center {
+      align-items: center;
+    }
+
+    :deep(.bk-table-head) {
+      height: 100%;
+      min-height: 84px;
+
+      th {
+        border: none;
+      }
+
+      .cell {
+        padding: 0;
+        height: 100%;
+
+        .head-text {
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+
+    :deep(.custom-head-title) {
+      height: 42px;
+      width: 100%;
+      background: #dcdee5;
+      font-weight: bolder;
+      background: #eaebf0;
+      line-height: 42px;
+      padding: 0 16px;
+
+      &:hover {
+        background: #dcdee5;
+      }
+    }
+
+    :deep(.custom-head-sub-title) {
+      height: 42px;
+      background: #f0f1f5;
+      color: #313238;
+      line-height: 42px;
+      padding: 0 16px;
+
+      &:hover {
+        background: #eaebf0;
+      }
+    }
+  }
+</style>