From bf4cbe97c0f8272f2d699fb15b6a290d80d0be2d Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Wed, 25 Sep 2024 19:31:11 +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

---
 .../src/components/cluster-selector/Index.vue |  59 ++-
 .../components/instance-selector/Index.vue    | 199 +++++++++-
 .../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 ++++++
 .../components/module-group/Mysql.vue         |   7 +
 .../components/module-group/TendbCluster.vue  |   7 +
 dbm-ui/frontend/src/locales/zh-cn.json        |  22 ++
 .../services/model/mysql/tendbHaMachine.ts    | 151 ++++++++
 .../model/mysql/tendbSingleMachine.ts         | 151 ++++++++
 .../tendbcluster/tendbcluster-machine.ts      |  12 +-
 .../services/source/mysqlPermissionAccount.ts |  90 ++++-
 .../frontend/src/services/source/tendbha.ts   |   1 +
 .../src/services/source/tendbsingle.ts        |  23 ++
 .../src/views/db-manage/mysql/routes.ts       |  11 +
 .../views/db-manage/tendb-cluster/routes.ts   |  12 +
 .../src/views/permission-retrieve/Index.vue   |  85 +++++
 .../components/options/Index.vue              | 161 +++++++++
 .../options/components/common/config.ts       |  29 ++
 .../options/components/item/Domain.vue        | 166 +++++++++
 .../components/options/components/item/Ip.vue | 105 ++++++
 .../options/components/item/UserSelect.vue    | 115 ++++++
 .../components/item/components/BatchInput.vue | 134 +++++++
 .../components/result/Index.vue               | 194 ++++++++++
 .../result/components/head/Index.vue          | 134 +++++++
 .../head/components/MultLineText.vue          |  98 +++++
 .../result/components/table/DomainTable.vue   | 202 +++++++++++
 .../result/components/table/IpTable.vue       | 213 +++++++++++
 .../result/components/table/common/utils.ts   |  29 ++
 30 files changed, 3209 insertions(+), 29 deletions(-)
 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/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/common/config.ts
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Domain.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Ip.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/UserSelect.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/components/BatchInput.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/result/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/result/components/head/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/result/components/head/components/MultLineText.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/DomainTable.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/IpTable.vue
 create mode 100644 dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/common/utils.ts

diff --git a/dbm-ui/frontend/src/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/Index.vue
index 2baba4047d..f13fcf3ae4 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">
@@ -201,6 +209,7 @@
     tabListConfig?: Record<string, TabConfig>;
     onlyOneType?: boolean;
     supportOfflineData?: boolean;
+    disableDialogSubmitMethod?: (hostList: Array<string>) => string | boolean;
   }
 
   interface Emits {
@@ -215,6 +224,7 @@
     default: false,
   });
 
+  const slots = useSlots();
   const copy = useCopy();
   const { dialogWidth } = useSelectorDialogWidth();
   const { t } = useI18n();
@@ -414,6 +424,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/instance-selector/Index.vue b/dbm-ui/frontend/src/components/instance-selector/Index.vue
index 190c8069a4..0cec145441 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('确定') }}
@@ -232,6 +233,7 @@
   import {
     getTendbsingleFlatList as getTendbsingleList,
     getTendbsingleInstanceList,
+    getTendbSingleMachineList,
   } from '@services/source/tendbsingle';
 
   import { ClusterTypes } from '@common/const';
@@ -247,7 +249,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 TendbHaHostContent from './components/tendb-ha-host/Index.vue';
+  import TendbSingleHostContent from './components/tendb-single-host/Index.vue';
 
   export type TableSetting = ReturnType<typeof getSettings>;
 
@@ -299,19 +302,29 @@
   type RedisModel = ServiceReturnType<typeof getRedisClusterList>[number];
   type RedisHostModel = ServiceReturnType<typeof getRedisMachineList>['results'][number];
 
-  interface Props {
-    clusterTypes: (ClusterTypes | 'TendbhaHost' | 'TendbClusterHost' | 'RedisHost' | 'mongoCluster')[];
+  type Props = {
+    clusterTypes: (
+      | ClusterTypes
+      | 'TendbhaHost'
+      | '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 {
+  type Emits = {
     (e: 'change', value: NonNullable<Props['selected']>): void;
     (e: 'cancel'): void;
-  }
+  };
 
   const props = withDefaults(defineProps<Props>(), {
     tabListConfig: undefined,
@@ -319,6 +332,8 @@
     unqiuePanelValue: false,
     unqiuePanelTips: t('仅可选择一种实例类型'),
     hideManualInput: false,
+    onlyOneType: false,
+    disableDialogSubmitMethod: () => false,
   });
 
   const emits = defineEmits<Emits>();
@@ -331,6 +346,8 @@
     default: false,
   });
 
+  const slots = useSlots();
+
   const tabListMap: Record<string, PanelListType> = {
     [ClusterTypes.REDIS]: [
       {
@@ -561,7 +578,7 @@
         previewConfig: {
           displayKey: 'ip',
         },
-        content: TendbhaHostContent,
+        content: TendbHaHostContent,
       },
       {
         id: 'manualInput',
@@ -755,6 +772,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>('');
@@ -829,6 +936,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(
@@ -859,9 +1005,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-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/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 3a98e45af9..3339a9d9ab 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3545,5 +3545,27 @@
     "新只读主机": "新只读主机",
     "请输入n台IP_英文逗号或换行分隔": "请输入 {n} 台IP_英文逗号或换行分隔",
     "请输入n台IP": "请输入 {n} 台IP",
+    "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} 个",
+    "查询的对象": "查询的对象",
+    "匹配的规则": "匹配的规则",
+    "域名不能为空": "域名不能为空",
+    "请选择或直接输入账号，Enter完成输入": "请选择或直接输入账号，Enter完成输入",
     "这行勿动！新增翻译请在上一行添加！": ""
   }
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/tendbcluster/tendbcluster-machine.ts b/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster-machine.ts
index 31b3c7726a..c6e252ef66 100644
--- a/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster-machine.ts
+++ b/dbm-ui/frontend/src/services/model/tendbcluster/tendbcluster-machine.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/mysqlPermissionAccount.ts b/dbm-ui/frontend/src/services/source/mysqlPermissionAccount.ts
index e711f9c73e..8b6342ef4f 100644
--- a/dbm-ui/frontend/src/services/source/mysqlPermissionAccount.ts
+++ b/dbm-ui/frontend/src/services/source/mysqlPermissionAccount.ts
@@ -10,11 +10,12 @@
  * 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 MysqlPermissionAccountModel from '@services/model/mysql/mysql-permission-account';
 import type { ListBase } from '@services/types';
 import type { AccountRule, CreateAccountParams, PermissionRule } from '@services/types/permission';
 
-import type { AccountTypesValues } from '@common/const';
+import type { AccountTypes, AccountTypesValues, ClusterTypes } from '@common/const';
 
 import http, { type IRequestPayload } from '../http';
 
@@ -92,3 +93,90 @@ export const preCheckAddAccountRule = (params: {
     force_run: boolean;
     warning: string | null;
   }>(`${getRootPath()}/pre_check_add_account_rule/`, params);
+
+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 83874c9b49..ecc48cbe1f 100644
--- a/dbm-ui/frontend/src/services/source/tendbha.ts
+++ b/dbm-ui/frontend/src/services/source/tendbha.ts
@@ -16,6 +16,7 @@ import TendbhaDetailModel from '@services/model/mysql/tendbha-detail';
 import TendbhaInstanceModel from '@services/model/mysql/tendbha-instance';
 import TendbhaMachineModel from '@services/model/mysql/tendbha-machine';
 import type { ListBase, ResourceTopo } from '@services/types';
+import TendbHaMachineModel from '@services/model/mysql/tendbHaMachine';
 
 import http from '../http';
 
diff --git a/dbm-ui/frontend/src/services/source/tendbsingle.ts b/dbm-ui/frontend/src/services/source/tendbsingle.ts
index 0adeb0c981..983baa7913 100644
--- a/dbm-ui/frontend/src/services/source/tendbsingle.ts
+++ b/dbm-ui/frontend/src/services/source/tendbsingle.ts
@@ -14,6 +14,7 @@ import TendbsingleInstanceModel from '@services/model/mysql/tendbha-instance';
 import TendbsingleModel from '@services/model/mysql/tendbsingle';
 import TendbsingleDetailModel from '@services/model/mysql/tendbsingle-detail';
 import type { ListBase, ResourceTopo } from '@services/types';
+import TendbSingleMachineModel from '@services/model/mysql/tendbSingleMachine';
 
 import http from '../http';
 
@@ -130,3 +131,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/views/db-manage/mysql/routes.ts b/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts
index a6e6f37e42..b485753e7a 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/Index.vue'),
       },
+      {
+        name: 'MysqlPermissionRetrieve',
+        path: 'permission-retrieve',
+        meta: {
+          navName: t('权限查询'),
+        },
+        props: { 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/routes.ts b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
index 9c211e40e0..bfa3f19698 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';
@@ -274,6 +277,15 @@ const permissionManageRoutes = [
     },
     component: () => import('@views/db-manage/tendb-cluster/permission/Index.vue'),
   },
+  {
+    name: 'SpiderPermissionRetrieve',
+    path: 'permission-retrieve',
+    meta: {
+      navName: t('权限查询'),
+    },
+    props: { 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..9b4aee54d6
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/Index.vue
@@ -0,0 +1,85 @@
+<!--
+ * 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">
+    <BkCard
+      is-collapse
+      :title="t('查询条件')">
+      <Options
+        :account-type="accountType"
+        class="ml-8"
+        :loading="loading"
+        @change="handleOptionsChange" />
+    </BkCard>
+    <BkCard
+      class="mt-16"
+      is-collapse
+      :title="t('查询结果')">
+      <Result
+        ref="resultRef"
+        class="ml-8"
+        :options="options"
+        @loading-change="handleLoadingChange" />
+    </BkCard>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import type { ComponentProps } from 'vue-component-type-helpers';
+  import { useI18n } from 'vue-i18n';
+
+  import Options from './components/options/Index.vue';
+  import Result from './components/result/Index.vue';
+
+  import type { AccountTypes } from '@/common/const';
+
+  interface Props {
+    accountType: AccountTypes;
+  }
+
+  defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const resultRef = ref<InstanceType<typeof Result>>();
+  const loading = ref<boolean>(false);
+
+  const options = shallowRef<ComponentProps<typeof Result>['options']>();
+
+  const handleOptionsChange = (value: ComponentProps<typeof Result>['options']) => {
+    options.value = value;
+  };
+
+  const handleLoadingChange = (value: boolean) => {
+    loading.value = value;
+  };
+</script>
+
+<style lang="less" scoped>
+  .permission-retrieve {
+    .bk-card {
+      border: none;
+      box-shadow: 0 2px 4px 0 #1919290d;
+
+      :deep(.bk-card-head) {
+        border-bottom: none;
+
+        .title {
+          margin-left: 8px;
+          color: #313238;
+        }
+      }
+    }
+  }
+</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..19add5dc9d
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/Index.vue
@@ -0,0 +1,161 @@
+<!--
+ * 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">
+      <IpItem v-model="formData.ips" />
+      <DomainItem
+        ref="domainItemRef"
+        v-model="formData.immute_domains"
+        v-model:cluster-type="formData.cluster_type"
+        v-model:is-master="formData.is_master"
+        :account-type="accountType" />
+      <BkFormItem
+        :label="t('账号')"
+        property="users"
+        required>
+        <UserSelect
+          v-model="formData.users"
+          :form-data="formData" />
+      </BkFormItem>
+      <BkFormItem
+        :label="t('访问 DB')"
+        property="dbs">
+        <BkTagInput
+          v-model="formData.dbs"
+          allow-auto-match
+          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>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { Form } from 'bkui-vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { AccountTypes, ClusterTypes } from '@common/const';
+  import { batchSplitRegex } from '@common/regex';
+
+  import DomainItem from './components/item/Domain.vue';
+  import IpItem from './components/item/Ip.vue';
+  import UserSelect from './components/item/UserSelect.vue';
+
+  interface Props {
+    loading: boolean;
+    accountType: AccountTypes;
+  }
+
+  interface Emits {
+    (
+      e: 'change',
+      params?: {
+        ips: string;
+        immute_domains: string;
+        users: string;
+        dbs: string;
+        cluster_type: ClusterTypes;
+        account_type: AccountTypes;
+        is_master: boolean;
+      },
+    ): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const getDefaultFormData = () => ({
+    ips: '',
+    immute_domains: '',
+    users: [] as string[],
+    dbs: [] as string[],
+    cluster_type: ClusterTypes.TENDBSINGLE,
+    account_type: props.accountType,
+    is_master: true,
+  });
+
+  const formRef = ref<InstanceType<typeof Form>>();
+  const domainItemRef = ref<InstanceType<typeof DomainItem>>();
+
+  const formData = reactive(getDefaultFormData());
+
+  const handleSearch = () => {
+    formRef.value!.validate().then(() => {
+      const params = {
+        ...formData,
+        ips: formData.ips.replace(batchSplitRegex, ','),
+        immute_domains: formData.immute_domains.replace(batchSplitRegex, ','),
+        users: formData.users.join(','),
+        dbs: formData.dbs.join(','),
+      };
+      emits('change', params);
+    });
+  };
+
+  const handleReset = () => {
+    domainItemRef.value!.reset();
+    Object.assign(formData, getDefaultFormData());
+    emits('change');
+    nextTick(() => {
+      formRef.value!.clearValidate();
+    });
+  };
+</script>
+
+<style lang="less">
+  .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/common/config.ts b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/common/config.ts
new file mode 100644
index 0000000000..c93190beb7
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/common/config.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 { getAccountUsers } from '@services/source/mysqlPermissionAccount';
+
+import { AccountTypes, ClusterTypes } from '@common/const';
+
+export default {
+  [AccountTypes.MYSQL]: {
+    hostSelectorTypes: ['TendbSingleHost', 'TendbHaHost'],
+    clusterSelectorTypes: [ClusterTypes.TENDBHA, 'tendbhaSlave', ClusterTypes.TENDBSINGLE],
+    ruleApi: getAccountUsers,
+  },
+  [AccountTypes.TENDBCLUSTER]: {
+    hostSelectorTypes: ['TendbClusterHost'],
+    clusterSelectorTypes: [ClusterTypes.TENDBCLUSTER],
+    ruleApi: getAccountUsers,
+  },
+};
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Domain.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Domain.vue
new file mode 100644
index 0000000000..913229906e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Domain.vue
@@ -0,0 +1,166 @@
+<template>
+  <BkFormItem
+    :label="t('域名')"
+    property="immute_domains"
+    required
+    :rules="rules">
+    <BatchInput
+      v-model="modelValue"
+      icon-type="host-select"
+      :max-count="20"
+      @change="handleDomainChange"
+      @icon-click="() => (clusterSelectorShow = true)" />
+  </BkFormItem>
+  <ClusterSelector
+    v-model:is-show="clusterSelectorShow"
+    :cluster-types="accoutMap[accountType as keyof typeof accoutMap].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>
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+  import TendbsingleModel from '@services/model/mysql/tendbsingle';
+  import SpiderModel from '@services/model/tendbcluster/tendbcluster';
+  import { getTendbhaList, getTendbhaSalveList } from '@services/source/tendbha';
+
+  import { AccountTypes, ClusterTypes } from '@common/const';
+  import { batchSplitRegex, domainRegex } from '@common/regex';
+
+  import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
+
+  import accoutMap from '../../components/common/config';
+
+  import BatchInput from './components/BatchInput.vue';
+
+  type SelectorModelType = TendbhaModel | TendbsingleModel | SpiderModel;
+
+  interface Props {
+    accountType: AccountTypes;
+  }
+
+  interface Expose {
+    reset: () => void;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<string>({
+    required: true,
+  });
+  const clusterType = defineModel<ClusterTypes>('clusterType', {
+    required: true,
+  });
+  const isMaster = defineModel<boolean>('isMaster', {
+    required: true,
+  });
+
+  const getDefaultSelectedClusters = () =>
+    accoutMap[props.accountType as keyof typeof accoutMap].clusterSelectorTypes.reduce(
+      (prevMap, type) => Object.assign({}, prevMap, { [type]: [] }),
+      {},
+    );
+
+  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 rules = [
+    {
+      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 clusterSelectorShow = ref(false);
+
+  const selectedClusters = shallowRef<{ [key: string]: Array<SelectorModelType> }>(getDefaultSelectedClusters());
+
+  const disableClusterSubmitMethod = (clusterList: string[]) =>
+    clusterList.length <= 20 ? false : t('至多n台', { n: 20 });
+
+  const handleClusterSelectorChange = (selected: Record<string, Array<SelectorModelType>>) => {
+    selectedClusters.value = selected;
+    const domainList = Object.keys(selected).reduce<string[]>(
+      (prevList, key) => prevList.concat(selected[key].map((item) => item.master_domain)),
+      [],
+    );
+    modelValue.value = domainList.join(',');
+
+    const clusterList = Object.values(selected).find((clusterList) => clusterList.length > 0);
+    clusterType.value = (clusterList?.[0].cluster_type || ClusterTypes.TENDBSINGLE) as ClusterTypes;
+    isMaster.value = !selectedClusters.value?.tendbhaSlave?.length;
+  };
+
+  const handleDomainChange = (value: string) => {
+    const newDomainList = value.split(batchSplitRegex).filter((item) => item);
+    const domainSet = new Set(newDomainList);
+    Object.keys(selectedClusters.value).forEach((key) => {
+      const clusterList = selectedClusters.value[key];
+      selectedClusters.value[key] = clusterList.filter((clusterItem) => domainSet.has(clusterItem.master_domain));
+    });
+  };
+
+  defineExpose<Expose>({
+    reset() {
+      selectedClusters.value = getDefaultSelectedClusters();
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Ip.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Ip.vue
new file mode 100644
index 0000000000..314ead08d2
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/Ip.vue
@@ -0,0 +1,105 @@
+<template>
+  <BkFormItem
+    :label="t('源客户端 IP')"
+    property="ips"
+    required
+    :rules="rules">
+    <BatchInput
+      v-model="modelValue"
+      icon-type="batch-host-select"
+      :max-count="50"
+      @icon-click="() => (hostSelectorShow = true)" />
+  </BkFormItem>
+  <IpSelector
+    v-model:show-dialog="hostSelectorShow"
+    :biz-id="bizId"
+    button-text=""
+    :data="selectedHosts"
+    :disable-dialog-submit-method="disableHostSubmitMethod"
+    :is-cloud-area-restrictions="false"
+    :panel-list="['staticTopo', 'manualInput', 'dbmWhitelist']"
+    service-mode="all"
+    :show-view="false"
+    @change="handleChangeIP"
+    @change-whitelist="handleChangeWhitelist">
+    <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>
+  </IpSelector>
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+
+  import { getWhitelist } from '@services/source/whitelist';
+  import type { HostInfo } from '@services/types';
+
+  import { batchSplitRegex, ipv4 } from '@common/regex';
+
+  import IpSelector from '@components/ip-selector/IpSelector.vue';
+
+  import BatchInput from './components/BatchInput.vue';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<string>({
+    required: true,
+  });
+
+  const bizId = window.PROJECT_CONFIG.BIZ_ID;
+
+  const rules = [
+    {
+      required: true,
+      message: t('源客户端 IP 不能为空'),
+      validator: (value: string) => value !== '',
+    },
+    {
+      message: t('格式错误'),
+      validator: (value: string) => {
+        const ipList = value.split(batchSplitRegex);
+        return ipList.every((ip) => ipv4.test(ip) || value.includes('%'));
+      },
+    },
+    {
+      message: t('最多输入n个', { n: 50 }),
+      validator: (value: string) => {
+        const ipList = value.split(batchSplitRegex);
+        return ipList.length <= 50;
+      },
+    },
+  ];
+
+  const hostSelectorShow = ref(false);
+  const selectedHosts = ref<HostInfo[]>([]);
+
+  const disableHostSubmitMethod = (hostList: HostInfo[]) => (hostList.length <= 50 ? false : t('至多n台', { n: 50 }));
+
+  const handleChangeIP = (data: HostInfo[]) => {
+    selectedHosts.value = data;
+    modelValue.value = data.map((item) => item.ip).join(' | ');
+  };
+
+  const handleChangeWhitelist = (data: ServiceReturnType<typeof getWhitelist>['results']) => {
+    // 避免与 handleChangeIP 同时修改 source_ips 参数
+    nextTick(() => {
+      const ipList = data.flatMap((item) => item.ips).map((ip) => ip);
+      const prevIpList = modelValue.value ? modelValue.value.split(' | ') : [];
+      modelValue.value = [...prevIpList, ...ipList].map((item) => item).join(' | ');
+    });
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/UserSelect.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/UserSelect.vue
new file mode 100644
index 0000000000..c264f010e2
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/UserSelect.vue
@@ -0,0 +1,115 @@
+<!--
+ * 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>
+  <BkSelect
+    v-model="modelValue"
+    allow-create
+    class="permission-user-select"
+    collapse-tags
+    filterable
+    multiple
+    multiple-mode="tag"
+    :placeholder="t('请选择或直接输入账号，Enter完成输入')">
+    <BkOption
+      v-for="item in userOptionList"
+      :id="item.value"
+      :key="item.value"
+      :name="item.label" />
+    <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>
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import type { AccountTypes, ClusterTypes } from '@common/const';
+  import { batchSplitRegex } from '@common/regex';
+
+  import accoutMap from '../common/config';
+
+  interface Props {
+    formData: {
+      ips: string;
+      immute_domains: string;
+      users: string[];
+      dbs: string[];
+      cluster_type: ClusterTypes;
+      account_type: AccountTypes;
+      is_master: boolean;
+    };
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<string[]>({
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  const userOptionList = computed(() =>
+    (userList.value?.results || []).map((userItem) => ({
+      label: userItem,
+      value: userItem,
+    })),
+  );
+
+  const { data: userList, run: runGetUserList } = useRequest(
+    accoutMap[props.formData.account_type as keyof typeof accoutMap].ruleApi,
+    {
+      manual: true,
+    },
+  );
+
+  watch(
+    () => [props.formData.ips, props.formData.immute_domains],
+    () => {
+      if (props.formData.ips && props.formData.immute_domains) {
+        runGetUserList({
+          ips: props.formData.ips.replace(batchSplitRegex, ','),
+          immute_domains: props.formData.immute_domains.replace(batchSplitRegex, ','),
+          cluster_type: props.formData.cluster_type,
+          account_type: props.formData.account_type,
+          limit: -1,
+          offset: 0,
+        });
+      }
+    },
+  );
+
+  const handleUserClose = (value: string) => {
+    const index = modelValue.value.findIndex((userItem) => userItem === value);
+    if (index > -1) {
+      modelValue.value.splice(index, 1);
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .permission-user-select {
+    :deep(.bk-select-tag-wrapper) {
+      flex: 1;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/components/BatchInput.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/components/BatchInput.vue
new file mode 100644
index 0000000000..d675a7a49d
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/options/components/item/components/BatchInput.vue
@@ -0,0 +1,134 @@
+<!--
+ * 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
+        clearable
+        :placeholder="t('请输入，多个英文逗号或换行分隔，最多n个', { n: maxCount })"
+        :resize="false"
+        type="textarea"
+        @blur="handleBlur"
+        @change="handleChange"
+        @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;
+    (e: 'change', value: string): 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
+      .split(batchSplitRegex)
+      .filter((item) => item)
+      .join(' | ');
+  };
+
+  const handleIconClick = () => {
+    emits('icon-click');
+  };
+
+  const handleChange = (value: string) => {
+    emits('change', value);
+  };
+</script>
+
+<style lang="less" scoped>
+  .permission-retrieve-input {
+    position: relative;
+    display: flex;
+
+    .input-box {
+      height: 32px;
+      flex: 1;
+      position: relative;
+
+      :deep(.bk-textarea) {
+        border-radius: 2px 0 0 2px;
+        position: absolute;
+        z-index: 10;
+
+        textarea {
+          height: 30px !important;
+          min-height: 30px !important;
+        }
+
+        &.is-focused {
+          textarea {
+            max-height: 500px;
+            min-height: 100px !important;
+          }
+        }
+
+        .bk-textarea--clear-icon {
+          position: absolute;
+          right: 2px;
+          top: 8px;
+        }
+      }
+    }
+
+    .input-suffix {
+      display: flex;
+      width: 32px;
+      height: 32px;
+      margin-left: auto;
+      border: 1px solid #c4c6cc;
+      border-left: none;
+      border-radius: 0 2px 2px 0;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</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..5a19d0c492
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/result/Index.vue
@@ -0,0 +1,194 @@
+<!--
+ * 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">
+    <ReusltHead
+      v-model="formatType"
+      :data="data"
+      :loading="loading"
+      @export="handleExport"
+      @search="handleSearch" />
+    <BkLoading
+      :loading="loading"
+      :z-index="100">
+      <Component
+        :is="tableComponent"
+        :data="data"
+        :options="options"
+        :pagination="pagination"
+        :table-max-height="tableMaxHeight"
+        @page-limit-change="handleTableLimitChange"
+        @page-value-change="handleTablePageChange" />
+    </BkLoading>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { useRequest } from 'vue-request';
+
+  import { getAccountPrivs, getDownloadPrivs } from '@services/source/mysqlPermissionAccount';
+
+  import { useTableMaxHeight } from '@hooks';
+
+  import { AccountTypes, ClusterTypes } from '@common/const';
+
+  import ReusltHead from './components/head/Index.vue';
+  import DomainTable from './components/table/DomainTable.vue';
+  import IpTable from './components/table/IpTable.vue';
+
+  interface Props {
+    options?: {
+      ips: string;
+      immute_domains: string;
+      users: string;
+      cluster_type: ClusterTypes;
+      account_type: AccountTypes;
+      dbs?: string;
+      is_master?: boolean;
+    };
+  }
+
+  interface Emits {
+    (e: 'loading-change', value: boolean): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const tableMaxHeight = useTableMaxHeight(530);
+
+  const formatType = ref('ip');
+
+  const pagination = reactive({
+    current: 1,
+    count: 0,
+    limit: 10,
+    limitList: [10, 20, 50, 100, 500],
+  });
+
+  const tableComponent = computed(() => (formatType.value === 'ip' ? IpTable : DomainTable));
+
+  watch(formatType, () => {
+    Object.assign(pagination, {
+      current: 1,
+      count: 0,
+    });
+  });
+
+  const {
+    run: runGetAccountPrivs,
+    data,
+    mutate,
+    loading,
+  } = useRequest(getAccountPrivs, {
+    manual: true,
+  });
+
+  watch(
+    () => props.options,
+    () => {
+      if (props.options) {
+        runGetAccountPrivs(getApiParams());
+      } else {
+        mutate({
+          match_ips_count: 0,
+          results: {
+            privs_for_ip: null,
+            privs_for_cluster: null,
+            has_priv: null,
+            no_priv: null,
+          },
+        });
+        formatType.value = 'ip';
+      }
+    },
+  );
+
+  watch(data, () => {
+    pagination.count = data.value?.match_ips_count ?? 0;
+  });
+
+  watch(loading, () => {
+    emits('loading-change', loading.value);
+  });
+
+  const getApiParams = (isPagination = true) => {
+    const params = {
+      ...props.options!,
+      format_type: formatType.value,
+    };
+    if (isPagination) {
+      Object.assign(params, {
+        limit: pagination.limit,
+        offset: pagination.limit * (pagination.current - 1),
+      });
+    }
+
+    delete params.is_master;
+    if (!params.dbs) {
+      delete params.dbs;
+    }
+    return params;
+  };
+
+  const handleSearch = () => {
+    if (!props.options) {
+      return;
+    }
+    runGetAccountPrivs(getApiParams());
+  };
+
+  const handleTablePageChange = (value: number) => {
+    pagination.current = value;
+    handleSearch();
+  };
+
+  const handleTableLimitChange = (value: number) => {
+    pagination.limit = value;
+    handleTablePageChange(1);
+  };
+
+  const handleExport = () => {
+    getDownloadPrivs(getApiParams(false));
+  };
+</script>
+
+<style lang="less" scoped>
+  .permission-retrieve-result {
+    :deep(.bk-table-head) {
+      .is-head-group {
+        padding: 0 16px;
+        font-weight: bolder;
+        color: #313238;
+        background: #eaebf0;
+
+        &:hover {
+          background: #dcdee5;
+        }
+      }
+
+      th {
+        border: none;
+
+        .cell {
+          background: #f0f1f5;
+
+          &:hover {
+            background: #eaebf0;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/head/Index.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/head/Index.vue
new file mode 100644
index 0000000000..8f1cd34ac4
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/head/Index.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="result-head">
+    <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 :line="3">
+            {{ 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"
+        :disabled="loading"
+        style="margin-left: auto"
+        type="capsule"
+        @change="handleFormatTypeChange">
+        <BkRadioButton label="ip">{{ t('IP 视角') }}</BkRadioButton>
+        <BkRadioButton label="cluster">{{ t('域名视角') }}</BkRadioButton>
+      </BkRadioGroup>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { getAccountPrivs } from '@services/source/mysqlPermissionAccount';
+
+  import { useCopy } from '@hooks';
+
+  import MultLineText from './components/MultLineText.vue';
+
+  interface Props {
+    data?: ServiceReturnType<typeof getAccountPrivs>;
+    loading: boolean;
+  }
+  interface Emits {
+    (e: 'export'): void;
+    (e: 'search'): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+  const formatType = defineModel<string>({
+    default: '',
+  });
+
+  const { t } = useI18n();
+  const copy = useCopy();
+
+  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: [],
+    };
+  });
+
+  const handleIpCopy = (value: string) => {
+    copy(value);
+  };
+
+  const handleFormatTypeChange = () => {
+    emits('search');
+  };
+
+  const handleExport = () => {
+    emits('export');
+  };
+</script>
+
+<style lang="less" scoped>
+  .result-head {
+    .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;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/head/components/MultLineText.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/head/components/MultLineText.vue
new file mode 100644
index 0000000000..c2ad936291
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/head/components/MultLineText.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="permission-mult-line-text">
+    <div
+      ref="rootRef"
+      class="permission-mult-line-text-wrapper"
+      :style="styles">
+      <slot />
+      <div
+        ref="placeholderRef"
+        class="placeholder">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import type { Instance, SingleTarget } from 'tippy.js';
+
+  import { dbTippy } from '@common/tippy';
+
+  interface Props {
+    line: number;
+  }
+
+  const props = defineProps<Props>();
+
+  let tippyInst: Instance;
+
+  const rootRef = ref<HTMLElement>();
+  const placeholderRef = ref<HTMLElement>();
+  const isMore = ref(false);
+
+  const styles = computed(() => ({
+    '-webkit-line-clamp': isMore.value ? 'initial' : props.line,
+  }));
+
+  const calcShowExpand = () => {
+    nextTick(() => {
+      const { height: placeholderHeight } = placeholderRef.value!.getBoundingClientRect();
+
+      if (rootHeight < placeholderHeight) {
+        createTippyInst();
+      }
+    });
+  };
+  let rootHeight = 0;
+
+  const createTippyInst = () => {
+    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();
+  });
+
+  onBeforeUpdate(() => {
+    destroyTippyInst();
+    calcShowExpand();
+  });
+</script>
+<style lang="less">
+  .permission-mult-line-text {
+    .permission-mult-line-text-wrapper {
+      position: relative;
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: normal;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: v-bind('line');
+    }
+
+    .placeholder {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: -1;
+      word-break: normal;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/DomainTable.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/DomainTable.vue
new file mode 100644
index 0000000000..15fa19ac12
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/DomainTable.vue
@@ -0,0 +1,202 @@
+<template>
+  <DbOriginalTable
+    class="mt-16 mb-24"
+    :columns="columns"
+    :data="tableData"
+    :max-height="tableMaxHeight"
+    :pagination="pagination"
+    remote-pagination
+    @page-limit-change="handleTableLimitChange"
+    @page-value-change="handleTableValueChange" />
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+
+  import { getAccountPrivs } from '@services/source/mysqlPermissionAccount';
+
+  import { useTableMaxHeight } from '@hooks'
+
+  import { AccountTypes } from '@common/const';
+
+  import { isSensitivePriv } from './common/utils'
+
+  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>;
+    options?: {
+      account_type: AccountTypes;
+      dbs?: string;
+      is_master?: boolean;
+    },
+    pagination: {
+      current: number,
+      count: number,
+      limit: number,
+      limitList: number[],
+    }
+  }
+
+  interface Emits {
+    (e: 'page-limit-change', value: number): void;
+    (e: 'page-value-change', value: number): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+  const tableMaxHeight = useTableMaxHeight(530);
+
+  const columns = computed(() => {
+    const domainColumns = [
+      {
+        label: t('匹配的规则'),
+        children: [
+          {
+            label: t('集群域名'),
+            field: 'immute_domain',
+            width: 240,
+            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.options?.is_master ? <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,
+            rowspan: ({ row }: { row: TableItem }) => {
+              const rowSpan = tableData.value.filter((item) => item.immute_domain === row.immute_domain && item.user === row.user).length;
+              return rowSpan > 1 ? rowSpan : 1;
+            },
+          },
+          {
+            label: t('匹配中的访问源'),
+            field: 'match_ip',
+            width: 240,
+            rowspan: ({ row }: { row: TableItem }) => {
+              const rowSpan = tableData.value.filter((item) => item.immute_domain === row.immute_domain && item.user === row.user && item.match_ip === row.match_ip).length;
+              return rowSpan > 1 ? rowSpan : 1;
+            },
+          },
+          {
+            label: t('匹配中的 DB'),
+            field: 'match_db',
+            width: 240,
+            render: ({ row }: { row: TableItem }) => <bk-tag>{row.match_db}</bk-tag>
+          },
+          {
+            label: t('权限'),
+            field: 'priv',
+            width: 240,
+            render: ({ row }: { row: TableItem }) => {
+              const { priv } = row
+              const privList = priv.split(',')
+
+              return privList.map((privItem, index) => (
+                <>
+                  { index !== 0 && <span>，</span> }
+                  <span>{privItem}</span>
+                  { isSensitivePriv(props.options?.account_type || AccountTypes.MYSQL, privItem) && (
+                    <bk-tag
+                      size="small"
+                      theme="warning"
+                      class="ml-4"
+                    >
+                      {t('敏感')}
+                    </bk-tag>
+                  )}
+                </>
+              ))
+            }
+          },
+        ]
+      },
+      {
+        label: t('查询的对象 IP'),
+        children: [
+          {
+            label: t('源客户端 IP'),
+            field: 'ip',
+            width: 240,
+            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.options?.dbs) {
+      domainColumns[1].children.push({
+        label: t('访问的 DB'),
+        field: 'db',
+        width: 240,
+        render: ({ row }: { row: TableItem }) => row.db.map(dbItem => <bk-tag>{dbItem}</bk-tag>)
+      })
+    }
+
+    return domainColumns;
+  });
+
+  const tableData = computed(() => {
+    const { data } = props;
+    if (data && data.results.privs_for_cluster) {
+      const privsForCluster = data.results.privs_for_cluster;
+      return privsForCluster.reduce<TableItem[]>((acc, ipItem) => {
+        ipItem.users.forEach(userItem => {
+          userItem.match_ips.forEach(matchIpItem => {
+            matchIpItem.match_dbs.forEach(({ ip_dbs: ipDbs, priv, ...rest }) => {
+              const ip = [];
+              const db = [];
+              for (const { ip: ipVal, db: dbVal } of ipDbs) {
+                ip.push(ipVal);
+                db.push(dbVal);
+              }
+              acc.push({
+                immute_domain: ipItem.immute_domain,
+                user: userItem.user,
+                match_ip: matchIpItem.match_ip,
+                priv: priv.toLocaleLowerCase(),
+                ip,
+                db,
+                ...rest
+              });
+            });
+          });
+        });
+        return acc;
+      }, []);
+    }
+
+    return [];
+  });
+
+  const handleTableLimitChange = (value: number) => {
+    emits('page-limit-change', value)
+  }
+
+  const handleTableValueChange = (value: number) => {
+    emits('page-value-change', value)
+  }
+</script>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/IpTable.vue b/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/IpTable.vue
new file mode 100644
index 0000000000..493bc8de10
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/IpTable.vue
@@ -0,0 +1,213 @@
+<template>
+  <DbOriginalTable
+    class="mt-16 mb-24"
+    :columns="columns"
+    :data="tableData"
+    :max-height="tableMaxHeight"
+    :pagination="pagination"
+    remote-pagination
+    @page-limit-change="handleTableLimitChange"
+    @page-value-change="handleTableValueChange" />
+</template>
+
+<script setup lang="tsx">
+  import _ from 'lodash'
+  import { useI18n } from 'vue-i18n';
+
+  import { getAccountPrivs } from '@services/source/mysqlPermissionAccount';
+
+    import { useTableMaxHeight } from '@hooks'
+
+  import { AccountTypes } from '@common/const';
+
+  import { isSensitivePriv } from './common/utils'
+
+  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>;
+    options?: {
+      account_type: AccountTypes,
+      dbs?: string;
+      is_master?: boolean;
+    },
+    pagination: {
+      current: number,
+      count: number,
+      limit: number,
+      limitList: number[],
+    }
+  }
+
+  interface Emits {
+    (e: 'page-limit-change', value: number): void;
+    (e: 'page-value-change', value: number): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+  const tableMaxHeight = useTableMaxHeight(530);
+
+  const columns = computed(() => {
+    const ipColums = [
+      {
+        label: t('查询的对象'),
+        children: [
+          {
+            label: t('源客户端 IP'),
+            field: 'ip',
+            width: 240,
+            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('匹配的规则'),
+        children: [
+          {
+            label: t('集群域名'),
+            field: 'immute_domain',
+            width: 240,
+            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.options?.is_master ? <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,
+            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 && item.user === row.user).length;
+              return rowSpan > 1 ? rowSpan : 1;
+            },
+          },
+          {
+            label: t('匹配中的访问源'),
+            field: 'match_ip',
+            width: 240,
+            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 && item.user === row.user && item.match_ip === row.match_ip).length;
+              return rowSpan > 1 ? rowSpan : 1;
+            },
+          },
+          {
+            label: t('匹配中的 DB'),
+            field: 'match_db',
+            width: 240,
+            render: ({ row }: { row: TableItem }) => (
+              <bk-tag>{row.match_db}</bk-tag>
+            ),
+          },
+          {
+            label: t('权限'),
+            field: 'priv',
+            width: 240,
+            render: ({ row }: { row: TableItem }) => {
+              const { priv } = row
+              const privList = priv.split(',')
+
+              return privList.map((privItem, index) => (
+                <>
+                  { index !== 0 && <span>,</span> }
+                  <span>{privItem}</span>
+                  { isSensitivePriv(props.options?.account_type || AccountTypes.MYSQL, privItem) && (
+                    <bk-tag
+                      size="small"
+                      theme="warning"
+                      class="ml-4"
+                    >
+                      {t('敏感')}
+                    </bk-tag>
+                  )}
+                </>
+              ))
+            }
+          }
+        ]
+      }
+    ];
+
+    if (props.options?.dbs) {
+      ipColums[0].children.push({
+        label: t('访问的 DB'),
+        field: 'db',
+        width: 240,
+        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 tableData = computed(() => {
+    const { data } = props;
+    if (data && data.results.privs_for_ip) {
+      const privsForIp = data.results.privs_for_ip;
+      const result: TableItem[] = [];
+
+      privsForIp.forEach(ipItem => {
+        ipItem.dbs.forEach(dbItem => {
+          dbItem.domains.forEach(domainItem => {
+            domainItem.users.forEach(userItem => {
+              userItem.match_ips.forEach(matchIpItem => {
+                matchIpItem.match_dbs.forEach(matchDbItem => {
+                  result.push({
+                    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;
+    }
+
+    return [];
+  });
+  const handleTableLimitChange = (value: number) => {
+    emits('page-limit-change', value)
+  }
+
+  const handleTableValueChange = (value: number) => {
+    emits('page-value-change', value)
+  }
+</script>
diff --git a/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/common/utils.ts b/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/common/utils.ts
new file mode 100644
index 0000000000..13c6cd4689
--- /dev/null
+++ b/dbm-ui/frontend/src/views/permission-retrieve/components/result/components/table/common/utils.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 } from '@common/const';
+
+import configMap from '@views/db-manage/common/permission/components/mysql/config';
+
+export const isSensitivePriv = (accountType: AccountTypes, priv: string) => {
+  const dbOprationsMap: Record<string, string[]> = {
+    [AccountTypes.MYSQL]: [
+      ...configMap[AccountTypes.MYSQL].dbOperations.glob,
+      ...configMap[AccountTypes.MYSQL].ddlSensitiveWords,
+    ],
+    [AccountTypes.TENDBCLUSTER]: configMap[AccountTypes.TENDBCLUSTER].dbOperations.glob,
+  };
+
+  const dbOprations = dbOprationsMap[accountType];
+  return dbOprations.includes(priv);
+};