From c4ed1b10350af1d696b3e031c99d7709c2ca973c Mon Sep 17 00:00:00 2001
From: austinqli <1344583166@qq.com>
Date: Thu, 11 Jan 2024 16:39:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E9=9B=86=E7=BE=A4=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E6=96=B0=E5=A2=9E=E5=B7=B2=E7=A6=81=E7=94=A8?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E4=B8=8Emongodb=E7=B1=BB=E5=9E=8B=20#3004=20?=
 =?UTF-8?q?#=20Reviewed,=20transaction=20id:=201848?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/cluster-selector-new/Index.vue |  38 +-
 .../common/result-preview/CollapseMini.vue    |   4 +-
 .../components/mongo/Index.vue                | 353 ++++++++++++++++++
 .../components/mongo/useClusterData.ts        | 106 ++++++
 .../components/redis/Index.vue                |  63 ++--
 .../components/tendb-cluster/Index.vue        |  58 ++-
 .../components/tendbha/Index.vue              |  58 ++-
 .../dropdown-export-excel/index.vue           |   2 +-
 dbm-ui/frontend/src/locales/zh-cn.json        |  15 +-
 .../services/model/mongodb/mongodb-detail.ts  | 200 ++++++++++
 .../model/mongodb/mongodb-instance-detail.ts  |   4 +-
 .../model/mongodb/mongodb-instance.ts         |  10 +-
 .../src/services/model/mongodb/mongodb.ts     | 109 ++++++
 .../frontend/src/services/source/mongodb.ts   | 129 +++++++
 .../src/services/source/mongodbInstance.ts    |  64 ----
 .../detail/components/BaseInfo.vue            |   4 +-
 .../mongodb-instance/detail/index.vue         |   4 +-
 .../mongodb-instance/list/index.vue           |  14 +-
 18 files changed, 1082 insertions(+), 153 deletions(-)
 create mode 100644 dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/Index.vue
 create mode 100644 dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/useClusterData.ts
 create mode 100644 dbm-ui/frontend/src/services/model/mongodb/mongodb-detail.ts
 create mode 100644 dbm-ui/frontend/src/services/model/mongodb/mongodb.ts
 create mode 100644 dbm-ui/frontend/src/services/source/mongodb.ts
 delete mode 100644 dbm-ui/frontend/src/services/source/mongodbInstance.ts

diff --git a/dbm-ui/frontend/src/components/cluster-selector-new/Index.vue b/dbm-ui/frontend/src/components/cluster-selector-new/Index.vue
index 8f5d25296a..d679447ab9 100644
--- a/dbm-ui/frontend/src/components/cluster-selector-new/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector-new/Index.vue
@@ -120,16 +120,14 @@
     </template>
   </BkDialog>
 </template>
-<script setup lang="tsx" generic="T extends RedisModel | TendbhaModel | SpiderModel">
+<script setup lang="tsx" generic="T extends RedisModel | TendbhaModel | SpiderModel | MongodbModel">
   import _ from 'lodash';
-  import {
-    ref,
-    shallowRef,
-  } from 'vue';
 
+  import MongodbModel from '@services/model/mongodb/mongodb';
   import TendbhaModel from '@services/model/mysql/tendbha';
   import RedisModel from '@services/model/redis/redis';
   import SpiderModel from '@services/model/spider/spider';
+  import { getMongoList } from '@services/source/mongodb';
   import { getRedisList } from '@services/source/redis';
   import { getSpiderList } from '@services/source/spider';
   import { getTendbhaList } from '@services/source/tendbha';
@@ -145,6 +143,7 @@
 
   import ResultPreview from './components/common/result-preview/Index.vue';
   import type { SearchSelectList } from './components/common/SearchBar.vue';
+  import MongoTable from './components/mongo/Index.vue';
   import RedisTable from './components/redis/Index.vue';
   import SpiderTable from './components/tendb-cluster/Index.vue';
   import TendbhaTable from './components/tendbha/Index.vue';
@@ -226,6 +225,20 @@
       tableContent: TendbhaTable,
       resultContent: ResultPreview,
     },
+    [ClusterTypes.MONGO_REPLICA_SET]: {
+      id: ClusterTypes.MONGO_REPLICA_SET,
+      name: t('集群选择'),
+      getResourceList: getMongoList,
+      tableContent: MongoTable,
+      resultContent: ResultPreview,
+    },
+    [ClusterTypes.MONGO_SHARED_CLUSTER]: {
+      id: ClusterTypes.MONGO_SHARED_CLUSTER,
+      name: t('集群选择'),
+      getResourceList: getMongoList,
+      tableContent: MongoTable,
+      resultContent: ResultPreview,
+    },
   };
 
   const copy = useCopy();
@@ -256,7 +269,8 @@
   // eslint-disable-next-line max-len
   const tabList = computed(() => (props.clusterTypes ? props.clusterTypes.map(type => clusterTabListMap.value[type]) : []));
 
-  const selectedArr = computed(() => (activeTab.value && (Object.keys(selectedMap.value).length > 0)
+  const selectedArr = computed(() => (activeTab.value
+    && selectedMap.value[activeTab.value] && (Object.keys(selectedMap.value).length > 0)
     ? ({ [activeTab.value]: Object.values(selectedMap.value[activeTab.value]) }) :  {}));
 
   // 显示切换 tab tips
@@ -330,7 +344,7 @@
   /**
    * 复制集群域名
    */
-  function handleCopyCluster() {
+  const handleCopyCluster = () => {
     const copyValues = Object.values(selectedMap.value).reduce((result, selectItem) => {
       result.push(...Object.values(selectItem).map(item => item.master_domain));
       return result;
@@ -342,20 +356,20 @@
     }
 
     copy(copyValues.join('\n'));
-  }
+  };
 
-  function handleConfirm() {
+  const handleConfirm = () => {
     const result = Object.keys(selectedMap.value).reduce((result, tabKey) => ({
       ...result,
       [tabKey]: Object.values(selectedMap.value[tabKey]),
     }), {});
     emits('change', result);
     handleClose();
-  }
+  };
 
-  function handleClose() {
+  const handleClose = () => {
     isShow.value =  false;
-  }
+  };
 
   /**
    * 选择当行数据
diff --git a/dbm-ui/frontend/src/components/cluster-selector-new/components/common/result-preview/CollapseMini.vue b/dbm-ui/frontend/src/components/cluster-selector-new/components/common/result-preview/CollapseMini.vue
index c711b133ad..b59ff27d91 100644
--- a/dbm-ui/frontend/src/components/cluster-selector-new/components/common/result-preview/CollapseMini.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector-new/components/common/result-preview/CollapseMini.vue
@@ -70,9 +70,9 @@
     state.collapse = props.collapse;
   });
 
-  function handleToggle() {
+  const handleToggle = () => {
     state.collapse = !state.collapse;
-  }
+  };
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/Index.vue b/dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/Index.vue
new file mode 100644
index 0000000000..20d54e1581
--- /dev/null
+++ b/dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/Index.vue
@@ -0,0 +1,353 @@
+<!--
+ * 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>
+  <SerachBar
+    v-model="searchSelectValue"
+    :cluster-type="activeTab"
+    :placeholder="searchPlaceholder"
+    :search-select-list="searchSelectList" />
+  <BkLoading
+    :loading="isLoading"
+    :z-index="2">
+    <DbOriginalTable
+      class="table-box"
+      :columns="generatedColumns"
+      :data="tableData"
+      :is-anomalies="isAnomalies"
+      :is-searching="searchSelectValue.length > 0"
+      :max-height="528"
+      :pagination="pagination.count < 10 ? false : pagination"
+      remote-pagination
+      row-style="cursor: pointer;"
+      @page-limit-change="handleTableLimitChange"
+      @page-value-change="handleTablePageChange"
+      @refresh="fetchResources"
+      @row-click.stop.prevent="handleRowClick" />
+  </BkLoading>
+</template>
+<script setup lang="tsx">
+  import { shallowRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import DbStatus from '@components/db-status/index.vue';
+
+  import { makeMap } from '@utils';
+
+  import type { TabItem } from '../../Index.vue';
+  import SerachBar from '../common/SearchBar.vue';
+  import ClusterRelatedTasks from '../common/task-panel/Index.vue';
+
+  import { useClusterData } from './useClusterData';
+
+  interface Props {
+    activeTab: string,
+    selected: Record<string, any[]>,
+    // eslint-disable-next-line vue/no-unused-properties
+    getResourceList: TabItem['getResourceList'],
+    disabledRowConfig?: TabItem['disabledRowConfig'],
+    columnStatusFilter?: TabItem['columnStatusFilter'],
+    customColums?: TabItem['customColums'],
+    searchSelectList?: TabItem['searchSelectList'],
+    searchPlaceholder?: TabItem['searchPlaceholder'],
+  }
+
+  type ResourceItem = ValueOf<SelectedMap>[0];
+
+  interface Emits {
+    (e: 'change', value: Record<string, Record<string, ResourceItem>>): void,
+  }
+
+  type SelectedMap = Props['selected'];
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const columns = [
+    {
+      width: 60,
+      label: () => (
+        <bk-checkbox
+          key={`${pagination.current}_${activeTab.value}`}
+          model-value={isSelectedAll.value}
+          indeterminate={isIndeterminate.value}
+          disabled={mainSelectDisable.value}
+          label={true}
+          onChange={handleSelecteAll}
+        />
+      ),
+      render: ({ data }: { data: ResourceItem }) => {
+        if (data.phase === 'offline') {
+          return (
+            <bk-popover
+              theme="dark"
+              placement="top"
+              popoverDelay={0}>
+              {{
+                default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
+                content: () => <span>{t('集群已禁用')}</span>,
+              }}
+            </bk-popover>
+          );
+        }
+        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;"
+            model-value={Boolean(selectedDomainMap.value[data.id])}
+            label={true}
+            onChange={(value: boolean) => handleSelecteRow(data, value)}
+          />
+        );
+      },
+    },
+    {
+      label: t('集群'),
+      field: 'cluster_name',
+      showOverflowTooltip: true,
+      render: ({ data }: { data: ResourceItem }) => (
+      <div class="cluster-name-box">
+          <div class="cluster-name">{data.master_domain}</div>
+          {data.phase === 'offline' && (
+            <db-icon
+              svg
+              type="yijinyong"
+              class="mr-8"
+              style="width: 38px; height: 16px;" />
+          )}
+          {data.operations && data.operations.length > 0 && (
+            <bk-popover
+              theme="light"
+              width="360">
+              {{
+                default: () => <bk-tag theme="info" class="tag-box">{data.operations.length}</bk-tag>,
+                content: () => <ClusterRelatedTasks data={data.operations} />,
+              }}
+            </bk-popover>
+          )}
+      </div>),
+    },
+    {
+      label: t('状态'),
+      field: 'status',
+      width: 100,
+      render: ({ data }: { data: ResourceItem }) => {
+        const isNormal = props.columnStatusFilter ? props.columnStatusFilter(data) : data.status === 'normal';
+        const info = isNormal ? { theme: 'success', text: t('正常') } : { theme: 'danger', text: t('异常') };
+        return <DbStatus theme={info.theme}>{info.text}</DbStatus>;
+      },
+    },
+    {
+      label: t('集群别名'),
+      field: 'cluster_name',
+      showOverflowTooltip: true,
+    },
+    {
+      label: t('所属模块'),
+      field: 'db_module_name',
+      showOverflowTooltip: true,
+    },
+    {
+      label: t('管控区域'),
+      field: 'bk_cloud_name',
+      showOverflowTooltip: true,
+    },
+  ];
+
+  let isSelectedAllReal = false;
+
+  const activeTab = ref(props.activeTab);
+  const selectedMap = shallowRef<Record<string, Record<string, ResourceItem>>>({});
+  const isSelectedAll = ref(false);
+
+  const {
+    isLoading,
+    pagination,
+    isAnomalies,
+    data: tableData,
+    searchSelectValue,
+    fetchResources,
+    handleChangePage,
+    handeChangeLimit,
+  } = useClusterData<ResourceItem>();
+
+  // 选中域名列表
+  const selectedDomainMap = computed(() => Object.values(selectedMap.value)
+    .reduce((result, selectItem) => {
+      const masterDomainMap  = makeMap(Object.keys(selectItem));
+      return Object.assign({}, result, masterDomainMap);
+    }, {} as Record<string, boolean>));
+
+  const isIndeterminate = computed(() => !isSelectedAll.value
+    && selectedMap.value[activeTab.value] && Object.keys(selectedMap.value[activeTab.value]).length > 0);
+
+  const mainSelectDisable = computed(() => (props.disabledRowConfig
+    // eslint-disable-next-line max-len
+    ? tableData.value.filter(data => props.disabledRowConfig?.handler(data)).length === tableData.value.length : false));
+
+  const generatedColumns = computed(() => {
+    if (props.customColums) {
+      return [columns[0], ...props.customColums];
+    }
+    return columns;
+  });
+
+  watch(() => [props.activeTab, props.selected] as [string, Record<string, any[]>], ([tabKey, selected]) => {
+    if (tabKey) {
+      activeTab.value = tabKey;
+      if (!selected[tabKey] || !props.selected) {
+        return;
+      }
+      const tabSelectMap = selected[tabKey].reduce((selectResult, selectItem) => ({
+        ...selectResult,
+        [selectItem.id]: selectItem,
+      }), {} as Record<string, ResourceItem>);
+      selectedMap.value = {
+        [tabKey]: tabSelectMap,
+      };
+    }
+  }, {
+    immediate: true,
+    deep: true,
+  });
+
+  watch(activeTab, (tab) => {
+    if (tab) {
+      searchSelectValue.value = [];
+    }
+  });
+
+  /**
+   * 全选当页数据
+   */
+  const handleSelecteAll = (value: boolean) => {
+    if (props.disabledRowConfig) {
+      isSelectedAllReal = !isSelectedAllReal;
+      for (const data of tableData.value) {
+        if (!props.disabledRowConfig.handler(data)) {
+          handleSelecteRow(data, isSelectedAllReal);
+        }
+      }
+      return;
+    }
+    for (const data of tableData.value) {
+      if (data.phase !== 'offline') {
+        handleSelecteRow(data, value);
+      }
+    }
+  };
+
+  const checkSelectedAll = () => {
+    if (props.disabledRowConfig && tableData.value.filter(data => props.disabledRowConfig?.handler(data)).length > 0) {
+      nextTick(() => {
+        isSelectedAll.value = false;
+      });
+      return;
+    }
+    const currentSelected = selectedMap.value[activeTab.value];
+    if (!currentSelected || Object.keys(currentSelected).length < 1) {
+      isSelectedAll.value = false;
+      return;
+    }
+    for (let i = 0; i < tableData.value.length; i++) {
+      if (!currentSelected[tableData.value[i].id]) {
+        isSelectedAll.value = false;
+        return;
+      }
+    }
+    isSelectedAll.value = true;
+  };
+
+  /**
+   * 选择当行数据
+   */
+  const handleSelecteRow = (data: ResourceItem, value: boolean) => {
+    const selectedMapMemo = { ...selectedMap.value };
+    if (!selectedMapMemo[activeTab.value]) {
+      selectedMapMemo[activeTab.value] = {};
+    }
+    if (value) {
+      selectedMapMemo[activeTab.value][data.id] = data;
+    } else {
+      delete selectedMapMemo[activeTab.value][data.id];
+    }
+    selectedMap.value = selectedMapMemo;
+    emits('change', selectedMap.value);
+    checkSelectedAll();
+  };
+
+  const handleRowClick = (row:any, data: ResourceItem) => {
+    if ((props.disabledRowConfig && props.disabledRowConfig.handler(data)) || data.phase === 'offline') {
+      return;
+    }
+    const currentSelected = selectedMap.value[activeTab.value];
+    const isChecked = !!(currentSelected && currentSelected[data.id]);
+    handleSelecteRow(data, !isChecked);
+  };
+
+
+  const handleTablePageChange = (value: number) => {
+    handleChangePage(value)
+      .then(() => {
+        checkSelectedAll();
+      });
+  };
+
+  const handleTableLimitChange = (value: number) => {
+    handeChangeLimit(value)
+      .then(() => {
+        checkSelectedAll();
+      });
+  };
+</script>
+
+<style lang="less" scoped>
+.table-box {
+  :deep(.cluster-name-box) {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    overflow: hidden;
+
+    .cluster-name {
+      margin-right: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex:1;
+    }
+
+    .tag-box {
+      height: 16px;
+      color: #3A84FF;
+      border-radius: 8px !important;
+    }
+  }
+}
+</style>
+
diff --git a/dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/useClusterData.ts b/dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/useClusterData.ts
new file mode 100644
index 0000000000..7c435bb92b
--- /dev/null
+++ b/dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/useClusterData.ts
@@ -0,0 +1,106 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+*/
+
+import type { ISearchValue } from 'bkui-vue/lib/search-select/utils';
+import {
+  type ComponentInternalInstance,
+  getCurrentInstance,
+  reactive,
+  ref,
+  shallowRef,
+} from 'vue';
+
+import { useGlobalBizs } from '@stores';
+
+import { getSearchSelectorParams } from '@utils';
+
+/**
+ * 处理集群列表数据
+ */
+export function useClusterData<T>() {
+  const globalBizsStore = useGlobalBizs();
+  const currentInstance = getCurrentInstance() as ComponentInternalInstance & {
+    proxy: {
+      activeTab: string,
+      getResourceList: (params: any) => Promise<any>
+    }
+  };
+
+  const isLoading = ref(false);
+  const tableData = shallowRef<T[]>([]);
+  const isAnomalies = ref(false);
+  const pagination = reactive({
+    current: 1,
+    count: 0,
+    limit: 10,
+    small: true,
+  });
+  const searchSelectValue = ref<ISearchValue[]>([]);
+
+  watch(searchSelectValue, () => {
+    setTimeout(() => {
+      handleChangePage(1);
+    });
+  }, {
+    immediate: true,
+    deep: true,
+  });
+
+  /**
+   * 获取列表
+   */
+  const fetchResources = async () => {
+    isLoading.value = true;
+    return currentInstance.proxy.getResourceList({
+      bk_biz_id: globalBizsStore.currentBizId,
+      cluster_type: currentInstance.proxy.activeTab,
+      limit: pagination.limit,
+      offset: pagination.limit * (pagination.current - 1),
+      ...getSearchSelectorParams(searchSelectValue.value),
+    })
+      .then((res) => {
+        pagination.count = res.count;
+        tableData.value = res.results;
+        isAnomalies.value = false;
+      })
+      .catch(() => {
+        tableData.value = [];
+        pagination.count = 0;
+        isAnomalies.value = true;
+      })
+      .finally(() => {
+        isLoading.value = false;
+      });
+  };
+
+  const handleChangePage = (value: number) => {
+    pagination.current = value;
+    return fetchResources();
+  };
+
+  const handeChangeLimit = (value: number) => {
+    pagination.limit = value;
+    return handleChangePage(1);
+  };
+
+  return {
+    isLoading,
+    data: tableData,
+    pagination,
+    isAnomalies,
+    searchSelectValue,
+    fetchResources,
+    handleChangePage,
+    handeChangeLimit,
+  };
+}
diff --git a/dbm-ui/frontend/src/components/cluster-selector-new/components/redis/Index.vue b/dbm-ui/frontend/src/components/cluster-selector-new/components/redis/Index.vue
index f58860534b..317fb7cf20 100644
--- a/dbm-ui/frontend/src/components/cluster-selector-new/components/redis/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector-new/components/redis/Index.vue
@@ -90,9 +90,25 @@
         />
       ),
       render: ({ data }: { data: ResourceItem }) => {
+        if (data.phase === 'offline') {
+          return (
+            <bk-popover
+              theme="dark"
+              placement="top"
+              popoverDelay={0}>
+              {{
+                default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
+                content: () => <span>{t('集群已禁用')}</span>,
+              }}
+            </bk-popover>
+          );
+        }
         if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
           return (
-            <bk-popover theme="dark" placement="top" popoverDelay={0}>
+            <bk-popover
+              theme="dark"
+              placement="top"
+              popoverDelay={0}>
               {{
                 default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
                 content: () => <span>{props.disabledRowConfig?.tip}</span>,
@@ -117,14 +133,23 @@
       render: ({ data }: { data: ResourceItem }) => (
       <div class="cluster-name-box">
           <div class="cluster-name">{data.master_domain}</div>
-          {data.operations && data.operations.length > 0 && <bk-popover
-            theme="light"
-            width="360">
-            {{
-              default: () => <bk-tag theme="info" class="tag-box">{data.operations.length}</bk-tag>,
-              content: () => <ClusterRelatedTasks data={data.operations} />,
-            }}
-          </bk-popover>}
+          {data.phase === 'offline' && (
+            <db-icon
+              svg
+              type="yijinyong"
+              class="mr-8"
+              style="width: 38px; height: 16px;" />
+          )}
+          {data.operations && data.operations.length > 0 && (
+            <bk-popover
+              theme="light"
+              width="360">
+              {{
+                default: () => <bk-tag theme="info" class="tag-box">{data.operations.length}</bk-tag>,
+                content: () => <ClusterRelatedTasks data={data.operations} />,
+              }}
+            </bk-popover>
+          )}
       </div>),
     },
     {
@@ -142,11 +167,6 @@
       field: 'cluster_name',
       showOverflowTooltip: true,
     },
-    // {
-    //   label: t('所属模块'),
-    //   field: 'db_module_name',
-    //   showOverflowTooltip: true,
-    // },
     {
       label: t('管控区域'),
       field: 'bk_cloud_name',
@@ -214,7 +234,6 @@
   watch(() => activeTab.value, (tab) => {
     if (tab) {
       searchSelectValue.value = [];
-      handleTablePageChange(1);
     }
   });
 
@@ -232,7 +251,9 @@
       return;
     }
     for (const data of tableData.value) {
-      handleSelecteRow(data, value);
+      if (data.phase !== 'offline') {
+        handleSelecteRow(data, value);
+      }
     }
   };
 
@@ -276,7 +297,7 @@
   };
 
   const handleRowClick = (row:any, data: ResourceItem) => {
-    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+    if ((props.disabledRowConfig && props.disabledRowConfig.handler(data)) || data.phase === 'offline') {
       return;
     }
     const currentSelected = selectedMap.value[activeTab.value];
@@ -285,19 +306,19 @@
   };
 
 
-  function handleTablePageChange(value: number) {
+  const handleTablePageChange = (value: number) => {
     handleChangePage(value)
       .then(() => {
         checkSelectedAll();
       });
-  }
+  };
 
-  function handleTableLimitChange(value: number) {
+  const handleTableLimitChange = (value: number) => {
     handeChangeLimit(value)
       .then(() => {
         checkSelectedAll();
       });
-  }
+  };
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/components/cluster-selector-new/components/tendb-cluster/Index.vue b/dbm-ui/frontend/src/components/cluster-selector-new/components/tendb-cluster/Index.vue
index a95f7c3768..313b1d87bc 100644
--- a/dbm-ui/frontend/src/components/cluster-selector-new/components/tendb-cluster/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector-new/components/tendb-cluster/Index.vue
@@ -90,9 +90,25 @@
         />
       ),
       render: ({ data }: { data: ResourceItem }) => {
+        if (data.phase === 'offline') {
+          return (
+            <bk-popover
+              theme="dark"
+              placement="top"
+              popoverDelay={0}>
+              {{
+                default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
+                content: () => <span>{t('集群已禁用')}</span>,
+              }}
+            </bk-popover>
+          );
+        }
         if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
           return (
-            <bk-popover theme="dark" placement="top" popoverDelay={0}>
+            <bk-popover
+              theme="dark"
+              placement="top"
+              popoverDelay={0}>
               {{
                 default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
                 content: () => <span>{props.disabledRowConfig?.tip}</span>,
@@ -117,14 +133,23 @@
       render: ({ data }: { data: ResourceItem }) => (
       <div class="cluster-name-box">
           <div class="cluster-name">{data.master_domain}</div>
-          {data.operations && data.operations.length > 0 && <bk-popover
-            theme="light"
-            width="360">
-            {{
-              default: () => <bk-tag theme="info" class="tag-box">{data.operations.length}</bk-tag>,
-              content: () => <ClusterRelatedTasks data={data.operations} />,
-            }}
-          </bk-popover>}
+          {data.phase === 'offline' && (
+            <db-icon
+              svg
+              type="yijinyong"
+              class="mr-8"
+              style="width: 38px; height: 16px;" />
+          )}
+          {data.operations && data.operations.length > 0 && (
+            <bk-popover
+              theme="light"
+              width="360">
+              {{
+                default: () => <bk-tag theme="info" class="tag-box">{data.operations.length}</bk-tag>,
+                content: () => <ClusterRelatedTasks data={data.operations} />,
+              }}
+            </bk-popover>
+          )}
       </div>),
     },
     {
@@ -216,7 +241,6 @@
   watch(() => activeTab.value, (tab) => {
     if (tab) {
       searchSelectValue.value = [];
-      handleTablePageChange(1);
     }
   });
 
@@ -234,7 +258,9 @@
       return;
     }
     for (const data of tableData.value) {
-      handleSelecteRow(data, value);
+      if (data.phase !== 'offline') {
+        handleSelecteRow(data, value);
+      }
     }
   };
 
@@ -278,7 +304,7 @@
   };
 
   const handleRowClick = (row:any, data: ResourceItem) => {
-    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+    if ((props.disabledRowConfig && props.disabledRowConfig.handler(data)) || data.phase === 'offline') {
       return;
     }
     const currentSelected = selectedMap.value[activeTab.value];
@@ -287,19 +313,19 @@
   };
 
 
-  function handleTablePageChange(value: number) {
+  const handleTablePageChange = (value: number) => {
     handleChangePage(value)
       .then(() => {
         checkSelectedAll();
       });
-  }
+  };
 
-  function handleTableLimitChange(value: number) {
+  const handleTableLimitChange = (value: number) => {
     handeChangeLimit(value)
       .then(() => {
         checkSelectedAll();
       });
-  }
+  };
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/components/cluster-selector-new/components/tendbha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector-new/components/tendbha/Index.vue
index 77cb23cf02..0df11360a7 100644
--- a/dbm-ui/frontend/src/components/cluster-selector-new/components/tendbha/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector-new/components/tendbha/Index.vue
@@ -91,9 +91,25 @@
         />
       ),
       render: ({ data }: { data: ResourceItem }) => {
+        if (data.phase === 'offline') {
+          return (
+            <bk-popover
+              theme="dark"
+              placement="top"
+              popoverDelay={0}>
+              {{
+                default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
+                content: () => <span>{t('集群已禁用')}</span>,
+              }}
+            </bk-popover>
+          );
+        }
         if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
           return (
-            <bk-popover theme="dark" placement="top" popoverDelay={0}>
+            <bk-popover
+              theme="dark"
+              placement="top"
+              popoverDelay={0}>
               {{
                 default: () => <bk-checkbox style="vertical-align: middle;" disabled />,
                 content: () => <span>{props.disabledRowConfig?.tip}</span>,
@@ -119,14 +135,23 @@
       render: ({ data }: { data: ResourceItem }) => (
       <div class="cluster-name-box">
           <div class="cluster-name">{data.master_domain}</div>
-          {data.operations && data.operations.length > 0 && <bk-popover
-            theme="light"
-            width="360">
-            {{
-              default: () => <bk-tag theme="info" class="tag-box">{data.operations.length}</bk-tag>,
-              content: () => <ClusterRelatedTasks data={data.operations} />,
-            }}
-          </bk-popover>}
+          {data.phase === 'offline' && (
+            <db-icon
+              svg
+              type="yijinyong"
+              class="mr-8"
+              style="width: 38px; height: 16px;" />
+          )}
+          {data.operations && data.operations.length > 0 && (
+            <bk-popover
+              theme="light"
+              width="360">
+              {{
+                default: () => <bk-tag theme="info" class="tag-box">{data.operations.length}</bk-tag>,
+                content: () => <ClusterRelatedTasks data={data.operations} />,
+              }}
+            </bk-popover>
+          )}
       </div>),
     },
     {
@@ -217,7 +242,6 @@
   watch(() => activeTab.value, (tab) => {
     if (tab) {
       searchSelectValue.value = [];
-      handleTablePageChange(1);
     }
   });
 
@@ -235,7 +259,9 @@
       return;
     }
     for (const data of tableData.value) {
-      handleSelecteRow(data, value);
+      if (data.phase !== 'offline') {
+        handleSelecteRow(data, value);
+      }
     }
   };
 
@@ -279,7 +305,7 @@
   };
 
   const handleRowClick = (row:any, data: ResourceItem) => {
-    if (props.disabledRowConfig && props.disabledRowConfig.handler(data)) {
+    if ((props.disabledRowConfig && props.disabledRowConfig.handler(data))  || data.phase === 'offline') {
       return;
     }
     const currentSelected = selectedMap.value[activeTab.value];
@@ -288,19 +314,19 @@
   };
 
 
-  function handleTablePageChange(value: number) {
+  const handleTablePageChange = (value: number) => {
     handleChangePage(value)
       .then(() => {
         checkSelectedAll();
       });
-  }
+  };
 
-  function handleTableLimitChange(value: number) {
+  const handleTableLimitChange = (value: number) => {
     handeChangeLimit(value)
       .then(() => {
         checkSelectedAll();
       });
-  }
+  };
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/components/dropdown-export-excel/index.vue b/dbm-ui/frontend/src/components/dropdown-export-excel/index.vue
index f1eee938ed..4bee4b28dd 100644
--- a/dbm-ui/frontend/src/components/dropdown-export-excel/index.vue
+++ b/dbm-ui/frontend/src/components/dropdown-export-excel/index.vue
@@ -36,7 +36,7 @@
   import { exportHdfsClusterToExcel, exportHdfsInstanceToExcel } from '@services/source/hdfs';
   import { exportInfluxdbClusterToExcel, exportInfluxdbInstanceToExcel } from '@services/source/influxdb';
   import { exportKafkaClusterToExcel, exportKafkaInstanceToExcel } from '@services/source/kafka';
-  import { exportMongodbInstanceToExcel } from '@services/source/mongodbInstance';
+  import { exportMongodbInstanceToExcel } from '@services/source/mongodb';
   import { exportPulsarClusterToExcel, exportPulsarInstanceToExcel } from '@services/source/pulsar';
   import { exportRedisClusterToExcel, exportRedisInstanceToExcel } from '@services/source/redis';
   import { exportSpiderClusterToExcel, exportSpiderInstanceToExcel } from '@services/source/spider';
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 75e1a4e301..13f99c9cd7 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -2561,11 +2561,22 @@
   "从域名": "从域名",
   "请输入关键字或选择条件搜索": "请输入关键字或选择条件搜索",
   "集群架构": "集群架构",
-  "分片集群": "分片集群",
   "分片名": "分片名",
   "副本集": "副本集",
   "导出": "导出",
-  "副本集集群": "副本集集群",
   "分片集群实例": "分片集群实例",
+  "变更脚本执行": "变更脚本执行",
+  "扩容Shard节点数": "扩容 Shard 节点数",
+  "缩容Shard节点数": "缩容 Shard 节点数",
+  "脚本任务": "脚本任务",
+  "目标分片集群": "目标分片集群",
+  "上传_js文件，由上至下执行，可拖动文件调整执行顺序件": "上传 .js 文件，由上至下执行，可拖动文件调整执行顺序件",
+  "JS文件": "JS文件",
+  "在JS脚本变更前执行": "在 JS 脚本变更前执行",
+  "JS编辑器": "JS 编辑器",
+  "请选择或输入": "请选择或输入",
+  "选择集群": "选择集群",
+  "副本集集群": "副本集集群",
+  "分片集群": "分片集群",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
\ No newline at end of file
diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb-detail.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb-detail.ts
new file mode 100644
index 0000000000..5cab6438f1
--- /dev/null
+++ b/dbm-ui/frontend/src/services/model/mongodb/mongodb-detail.ts
@@ -0,0 +1,200 @@
+/*
+ * 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.
+*/
+interface MongoInstance {
+  bk_biz_id: number;
+  bk_cloud_id: number;
+  bk_host_id: number;
+  bk_instance_id?: number;
+  instance: string;
+  ip: string;
+  name?: string;
+  phase: string;
+  port: number;
+  role?: string;
+  spec_config: string;
+  status: string;
+}
+
+export default class MongodbDetail {
+  bk_biz_id: number;
+  bk_biz_name: string;
+  bk_cloud_id: number;
+  bk_cloud_name: string;
+  cluster_entry_details: {
+    cluster_entry_type: string;
+    role: string;
+    entry: string;
+    target_details: {
+      app: string,
+      bk_cloud_iduid: number,
+      dns_str: string,
+      domain_name: string,
+      domain_typeuid: number,
+      ip: string,
+      last_change_time: string,
+      manager: string,
+      port: number,
+      remark: string,
+      start_time: string,
+      status: string,
+      uid: number,
+    }[];
+  }[];
+  cluster_id: number;
+  cluster_name: string;
+  cluster_type: string;
+  create_at: string;
+  creator: string;
+  db_module_id: number;
+  db_module_name: string;
+  id: number;
+  instances: {
+    bk_cloud_id: number;
+    bk_cloud_name: string;
+    bk_host_id: number;
+    cluster_id: number;
+    cluster_name: string;
+    cluster_type: string;
+    create_at: string;
+    host_info?: {
+      alive: number,
+      biz: {
+        id: number,
+        name: string
+      },
+      cloud_area: {
+        id: number,
+        name: string
+      },
+      cloud_id: number,
+      host_id: number,
+      host_name?: string,
+      ip: string,
+      ipv6: string,
+      meta: {
+        bk_biz_id: number,
+        scope_id: number,
+        scope_type: string
+      },
+      scope_id: string,
+      scope_type: string,
+      os_name: string,
+      bk_cpu?: number,
+      bk_disk?: number,
+      bk_mem?: number,
+      os_type: string,
+      agent_id: number,
+      cpu: string,
+      cloud_vendor: string,
+      bk_idc_name?: string,
+    };
+    instance_address: string;
+    ip: string;
+    master_domain: string;
+    port: number;
+    related_clusters: {
+      alias: string;
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      cluster_name: string;
+      cluster_type: string;
+      creator: string;
+      db_module_id: number;
+      disaster_tolerance_level: string;
+      id: number;
+      major_version: string;
+      master_domain: string;
+      phase: string;
+      region: string;
+      status: string;
+      time_zone: string;
+      updater: string;
+    }[];
+    role: string;
+    spec_config: string;
+    status: string;
+  }[];
+  major_version: string;
+  master_domain: string;
+  mongodb: MongoInstance[];
+  mongos: MongoInstance[];
+  mongo_config: MongoInstance[];
+  operations: {
+    cluster_id: number,
+    flow_id: number,
+    status: string,
+    ticket_id: number,
+    ticket_type: string,
+    title: string,
+  }[];
+  phase: string;
+  phase_name: string;
+  region: string;
+  shard_node_count: number;
+  shard_num: number;
+  slave_domain: string;
+  spec_config: {
+    count: number;
+    cpu: {
+      max: number;
+      min: number;
+    },
+    id: number;
+    mem: {
+      max: number;
+      min: number;
+    },
+    name: string;
+    qps: {
+      max: number;
+      min: number;
+    },
+    storage_spec: {
+      mount_point: string;
+      size: number;
+      type: string;
+    }[],
+  };
+  status: string;
+
+  constructor(payload = {} as MongodbDetail) {
+    this.bk_biz_id = payload.bk_biz_id;
+    this.bk_biz_name = payload.bk_biz_name;
+    this.bk_cloud_id = payload.bk_cloud_id;
+    this.bk_cloud_name = payload.bk_cloud_name;
+    this.cluster_entry_details = payload.cluster_entry_details;
+    this.cluster_id = payload.cluster_id;
+    this.cluster_name = payload.cluster_name;
+    this.cluster_type = payload.cluster_type;
+    this.create_at = payload.create_at;
+    this.creator = payload.creator;
+    this.db_module_id = payload.db_module_id;
+    this.db_module_name = payload.db_module_name;
+    this.id = payload.id;
+    this.instances = payload.instances;
+    this.major_version = payload.major_version;
+    this.master_domain = payload.master_domain;
+    this.mongodb = payload.mongodb;
+    this.mongos = payload.mongos;
+    this.mongo_config = payload.mongo_config;
+    this.operations = payload.operations;
+    this.phase = payload.phase;
+    this.phase_name = payload.phase_name;
+    this.region = payload.region;
+    this.shard_node_count = payload.shard_node_count;
+    this.shard_num = payload.shard_num;
+    this.slave_domain = payload.slave_domain;
+    this.spec_config = payload.spec_config;
+    this.status = payload.status;
+  }
+}
diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance-detail.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance-detail.ts
index b81deab7ea..7ee8dbfa11 100644
--- a/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance-detail.ts
+++ b/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance-detail.ts
@@ -1,4 +1,4 @@
-export default class mongodbInstanceDetail {
+export default class MongodbInstanceDetail {
   bk_agent_id: string;
   bk_cloud_id: number;
   bk_cloud_name: string;
@@ -29,7 +29,7 @@ export default class mongodbInstanceDetail {
   status: string;
   version: string;
 
-  constructor(payload: mongodbInstanceDetail) {
+  constructor(payload: MongodbInstanceDetail) {
     this.bk_agent_id = payload.bk_agent_id;
     this.bk_cloud_id = payload.bk_cloud_id;
     this.bk_cloud_name = payload.bk_cloud_name;
diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts
index 9b1d1656f3..cfd4fe3dc6 100644
--- a/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts
+++ b/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts
@@ -1,8 +1,8 @@
 import dayjs from 'dayjs';
 
-import { t } from '@locales';
+import { t } from '@locales/index';
 
-export default class mongodbInstance {
+export default class MongodbInstance {
   static themes: Record<string, string> = {
     running: 'success',
   };
@@ -41,7 +41,7 @@ export default class mongodbInstance {
   status: string;
   version: string;
 
-  constructor(payload = {} as mongodbInstance) {
+  constructor(payload = {} as MongodbInstance) {
     this.bk_cloud_id = payload.bk_cloud_id;
     this.bk_cloud_name = payload.bk_cloud_name;
     this.bk_host_id = payload.bk_host_id;
@@ -70,8 +70,8 @@ export default class mongodbInstance {
   }
 
   get dbStatusConfigureObj() {
-    const text = mongodbInstance.statusMap[this.status] || '--';
-    const theme = mongodbInstance.themes[this.status] || 'danger';
+    const text = MongodbInstance.statusMap[this.status] || '--';
+    const theme = MongodbInstance.themes[this.status] || 'danger';
     return { text, theme };
   }
 
diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb.ts
new file mode 100644
index 0000000000..4f935bf2e0
--- /dev/null
+++ b/dbm-ui/frontend/src/services/model/mongodb/mongodb.ts
@@ -0,0 +1,109 @@
+/*
+ * 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 { PipelineStatus } from '@common/const';
+
+interface MongoInstance {
+  bk_biz_id: number;
+  bk_cloud_id: number;
+  bk_host_id: number;
+  bk_instance_id: number;
+  instance: string;
+  ip: string;
+  name: string;
+  phase: string;
+  port: number;
+  spec_config: {
+    spec_config: string;
+    spec_id: number;
+  };
+  status: string;
+}
+
+export default class Mongodb {
+  bk_biz_id: number;
+  bk_biz_name: string;
+  bk_cloud_id: number;
+  bk_cloud_name: string;
+  cluster_name: string;
+  cluster_type: string;
+  create_at: string;
+  creator: string;
+  db_module_id: number;
+  db_module_name: string;
+  id: number;
+  major_version: string;
+  master_domain: string;
+  mongo_config: MongoInstance[];
+  mongodb: MongoInstance[];
+  mongos: {
+    admin_port: number;
+    bk_biz_id: number;
+    bk_cloud_id: number;
+    bk_host_id: number;
+    bk_instance_id: number;
+    instance: string;
+    ip: string;
+    name: string;
+    phase: string;
+    port: number;
+    spec_config: string;
+    status: string;
+  }[];
+  operations: {
+    cluster_id: number;
+    flow_id: number;
+    operator: string;
+    status: PipelineStatus;
+    ticket_id: number;
+    ticket_type: string;
+    title: string;
+  }[];
+  phase: string;
+  phase_name: string;
+  region: string;
+  slave_domain: string;
+  shard_node_count: number; // 分片节点数
+  shard_num: number; // 分片数
+  status: string;
+
+  constructor(payload = {} as Mongodb) {
+    this.bk_biz_id = payload.bk_biz_id;
+    this.bk_biz_name = payload.bk_biz_name;
+    this.bk_cloud_id = payload.bk_cloud_id;
+    this.bk_cloud_name = payload.bk_cloud_name;
+    this.db_module_id = payload.db_module_id;
+    this.db_module_name = payload.db_module_name;
+    this.cluster_name = payload.cluster_name;
+    this.cluster_type = payload.cluster_type;
+    this.create_at = payload.create_at;
+    this.creator = payload.creator;
+    this.id = payload.id;
+    this.major_version = payload.major_version;
+    this.master_domain = payload.master_domain;
+    this.mongo_config = payload.mongo_config;
+    this.mongodb = payload.mongodb;
+    this.mongos = payload.mongos;
+    this.operations = payload.operations;
+    this.phase = payload.phase;
+    this.phase_name = payload.phase_name;
+    this.region = payload.region;
+    this.status = payload.status;
+    this.slave_domain = payload.slave_domain;
+    this.shard_node_count = payload.shard_node_count;
+    this.shard_num = payload.shard_num;
+  }
+
+  get isOnline() {
+    return this.phase === 'online';
+  }
+}
diff --git a/dbm-ui/frontend/src/services/source/mongodb.ts b/dbm-ui/frontend/src/services/source/mongodb.ts
new file mode 100644
index 0000000000..312d4d1653
--- /dev/null
+++ b/dbm-ui/frontend/src/services/source/mongodb.ts
@@ -0,0 +1,129 @@
+/*
+ * 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 MongodbModel from '@services/model/mongodb/mongodb';
+import MongodbDetailModel from '@services/model/mongodb/mongodb-detail';
+import MongodbInstanceModel from '@services/model/mongodb/mongodb-instance';
+import MongodbInstanceDetailModel from '@services/model/mongodb/mongodb-instance-detail';
+
+import { useGlobalBizs } from '@stores';
+
+import http from '../http';
+import type { ListBase } from '../types';
+
+const { currentBizId } = useGlobalBizs();
+
+const path = `/apis/mongodb/bizs/${currentBizId}/mongodb_resources`;
+
+/**
+ * 获取Mongo集群
+ */
+export function getMongoList(params: {
+  id?: number,
+  name?: string,
+  ip?: string,
+  domain?: string,
+  creator?: string,
+  cluster_type?: string,
+  version?: string,
+  region?: string,
+  db_module_id?: number,
+  cluster_ids?: number,
+  limit?: number,
+  offset?: number,
+}) {
+  return http.get<ListBase<MongodbModel[]>>(`${path}/`, params).then(data => ({
+    ...data,
+    results: data.results.map(item => new MongodbModel(item)),
+  }));
+}
+
+/**
+ * 查询Mongo集群详情
+ */
+export function getMongoClusterDetails(params: {
+  cluster_id: number
+}) {
+  return http.get<MongodbDetailModel>(`${path}/${params.cluster_id}/`).then(data => new MongodbDetailModel(data));
+}
+
+/**
+ * 查询Mongo拓扑图
+ */
+export function getMongoClustersTopoGraph(params: {
+  cluster_id: number
+}) {
+  return http.get(`${path}/${params.cluster_id}/get_topo_graph/`);
+}
+
+/**
+ * 获取Mongo集群 table 信息
+ */
+export function getMongoTableFields(params: {
+  limit?: number,
+  offset?: number,
+}) {
+  return http.get(`${path}/get_table_fields/`, params);
+}
+
+/**
+ * 查询Mongo集群实例列表
+ */
+export function getMongoInstancesList(params: {
+  cluster_id?: number,
+  ip?: string,
+  cluster_type?: string,
+  domain?: string,
+  instance_address?: string,
+  port?: string,
+  status?: string,
+  role?: string,
+  limit?: number,
+  offset?: number,
+}) {
+  return http.get<ListBase<MongodbInstanceModel[]>>(`${path}/list_instances/`, params).then(data => ({
+    ...data,
+    results: data.results.map(item => new MongodbInstanceModel(item)),
+  }));
+}
+
+/**
+ * 查询Mongo集群实例详情
+ */
+export function getMongoInstanceDetail(params: {
+  instance_address: string,
+  cluster_id?: number,
+  ip?: string,
+  port?: string,
+  limit?: number,
+  offset?: number,
+}) {
+  return http.get<MongodbInstanceDetailModel>(`${path}/retrieve_instance/`, params).then(data => new MongodbInstanceDetailModel(data));
+}
+
+/**
+ * 获取Mongo角色列表
+ */
+export function getMongoRoleList(params: {
+  limit?: number,
+  offset?: number
+}) {
+  return http.get<string[]>(`${path}/get_instance_role/`, params);
+}
+
+
+/**
+ * 导出Mongo实例数据为 excel 文件
+ */
+export function exportMongodbInstanceToExcel(params: { bk_host_ids?: number[] }) {
+  return http.post<string>(`${path}/export_instance/`, params, { responseType: 'blob' });
+}
diff --git a/dbm-ui/frontend/src/services/source/mongodbInstance.ts b/dbm-ui/frontend/src/services/source/mongodbInstance.ts
deleted file mode 100644
index 36cb8b0d4c..0000000000
--- a/dbm-ui/frontend/src/services/source/mongodbInstance.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * 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 MongodbInstanceModel from '@services/model/mongodb/mongodb-instance';
-import MongodbInstanceDetailModel from '@services/model/mongodb/mongodb-instance-detail';
-import type { ListBase } from '@services/types/index';
-
-import { useGlobalBizs } from '@stores';
-
-import http from '../http';
-
-const { currentBizId } = useGlobalBizs();
-
-const path = `/apis/mongodb/bizs/${currentBizId}/mongodb_resources`;
-
-/**
- * 获取列表数据
- */
-export function getInstanceList(params: {
-  limit?: number,
-  offset?: number,
-}) {
-  return http.get<ListBase<MongodbInstanceModel[]>>(`${path}/list_instances/`, params).then(data => ({
-    ...data,
-    results: data.results.map(item => new MongodbInstanceModel(item)),
-  }));
-}
-
-/**
- * 获取实例详情
- */
-export function getInstanceDetail(params: {
-  instance_address: string,
-  cluster_id: number
-}) {
-  return http.get<MongodbInstanceDetailModel>(`${path}/retrieve_instance/`, params);
-}
-
-/**
- * 获取角色列表
- */
-export function getRoleList(params: {
-  limit?: number,
-  offset?: number
-}) {
-  return http.get<string[]>(`${path}/get_instance_role/`, params);
-}
-
-/**
- * 导出实例数据为 excel 文件
- */
-export function exportMongodbInstanceToExcel(params: { bk_host_ids?: number[] }) {
-  return http.post<string>(`${path}/export_instance/`, params, { responseType: 'blob' });
-}
diff --git a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/components/BaseInfo.vue b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/components/BaseInfo.vue
index 72a5fff6da..866a1a965d 100644
--- a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/components/BaseInfo.vue
+++ b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/components/BaseInfo.vue
@@ -8,7 +8,7 @@
 <script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
-  import { getInstanceDetail } from '@services/source/mongodbInstance';
+  import { getMongoInstanceDetail } from '@services/source/mongodb';
 
   import {
     type ClusterInstStatus,
@@ -21,7 +21,7 @@
   } from '@components/editable-info/index.vue';
 
   interface Props {
-    data: ServiceReturnType<typeof getInstanceDetail>
+    data: ServiceReturnType<typeof getMongoInstanceDetail>
   }
 
   const props = defineProps<Props>();
diff --git a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/index.vue b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/index.vue
index 9b7b49e76e..b3f094a79a 100644
--- a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/index.vue
+++ b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/index.vue
@@ -28,7 +28,7 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import { getInstanceDetail } from '@services/source/mongodbInstance';
+  import { getMongoInstanceDetail } from '@services/source/mongodb';
 
   import BaseInfo from './components/BaseInfo.vue';
   import Config from './components/Config.vue';
@@ -50,7 +50,7 @@
     loading: isLoading,
     run: fetchInstDetails,
     data,
-  } = useRequest(getInstanceDetail, {
+  } = useRequest(getMongoInstanceDetail, {
     manual: true,
   });
 
diff --git a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue
index bb283b04b6..76d49a64e4 100644
--- a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue
+++ b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue
@@ -39,7 +39,7 @@
       <DbTable
         ref="tableRef"
         :columns="columns"
-        :data-source="getInstanceList"
+        :data-source="getMongoInstancesList"
         :is-anomalies="isAnomalies"
         :pagination="renderPagination"
         :pagination-extra="{ small: false }"
@@ -59,9 +59,9 @@
 
   import MongodbInstanceModel from '@services/model/mongodb/mongodb-instance';
   import  {
-    getInstanceList,
-    getRoleList,
-  } from '@services/source/mongodbInstance';
+    getMongoInstancesList,
+    getMongoRoleList,
+  } from '@services/source/mongodb';
   import { createTicket } from '@services/source/ticket';
 
   import {
@@ -85,8 +85,6 @@
 
   import { getSearchSelectorParams } from '@utils';
 
-  import type { SearchSelectValues } from '@types/bkui-vue';
-
   const instanceData = defineModel<{
     instanceAddress: string,
     clusterId: number,
@@ -133,7 +131,7 @@
     name: string
   }[]>([]);
 
-  const searchValues = ref<SearchSelectValues>([]);
+  const searchValues = ref([]);
   const selected = ref<MongodbInstanceModel[]>([]);
   const pagination = ref<IPagination>(useDefaultPagination());
 
@@ -331,7 +329,7 @@
     updateTableSettings,
   } = useTableSettings(UserPersonalSettings.MONGODB_INSTANCE_TABLE_SETTINGS, defaultSettings);
 
-  useRequest(getRoleList, {
+  useRequest(getMongoRoleList, {
     onSuccess(data) {
       roleListType.value = data.map(item => ({
         id: item,