From 94dd80a3f878e521276332c265d0a79ea31a9084 Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Thu, 2 Jan 2025 18:15:43 +0800
Subject: [PATCH] =?UTF-8?q?perf(frontend):=20mongodb=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E7=AE=B1=E9=87=8D=E6=9E=84=20#8498?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Index.vue                                 |  13 +-
 .../{edit-spec => edit-spec-column}/Index.vue |   0
 .../components/SpecPanel.vue                  |  33 ++---
 .../spec-block-column/components/Panel.vue    | 106 +++++++--------
 .../MONGODB_ADD_MONGOS/pages/page1/Index.vue  |   4 +-
 .../pages/page1/Index.vue                     |  24 ++--
 .../MONGODB_BACKUP/pages/page1/Index.vue      |   8 +-
 .../page1/components/TargetHostColumn.vue     |  32 ++++-
 .../MONGODB_CUTOFF/pages/page1/Index.vue      |   4 +-
 .../MONGODB_FULL_BACKUP/pages/page1/Index.vue |   2 +-
 .../pages/page1/Index.vue                     |   4 +-
 .../pages/page1/Index.vue                     |  24 ++--
 .../MONGODB_REMOVE_NS/pages/page1/Index.vue   |  12 +-
 .../pages/page1/Index.vue                     |  38 ++----
 .../page1/components/CurrentCapacity.vue      | 106 ---------------
 .../components/CurrentCapacityColumn.vue      | 118 ++++++++++++++++
 .../Index.vue                                 | 127 ++++++++++--------
 .../components/ChooseDeployPlan.vue           |   0
 .../Index.vue                                 |  46 ++++---
 .../Index.vue                                 |  28 ++--
 .../Index.vue                                 | 101 +++++++-------
 .../Index.vue                                 |   6 +-
 .../{edit-host => edit-host-column}/Index.vue |  46 +++----
 .../Index.vue                                 |   6 +-
 24 files changed, 458 insertions(+), 430 deletions(-)
 rename dbm-ui/frontend/src/views/db-manage/common/toolbox-field/{edit-table-name => edit-db-table-name-column}/Index.vue (95%)
 rename dbm-ui/frontend/src/views/db-manage/common/toolbox-field/{edit-spec => edit-spec-column}/Index.vue (100%)
 rename dbm-ui/frontend/src/views/db-manage/common/toolbox-field/{edit-spec => edit-spec-column}/components/SpecPanel.vue (87%)
 delete mode 100644 dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/CurrentCapacity.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/CurrentCapacityColumn.vue
 rename dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/{target-capacity => target-capacity-column}/Index.vue (58%)
 rename dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/{target-capacity => target-capacity-column}/components/ChooseDeployPlan.vue (100%)
 rename dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/{edit-cluster => edit-cluster-column}/Index.vue (83%)
 rename dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/{edit-cluster-with-related-clusters => edit-cluster-with-related-clusters-column}/Index.vue (92%)
 rename dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/{edit-cluster-with-selector => edit-cluster-with-selector-column}/Index.vue (82%)
 rename dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/{edit-db-table => edit-db-name-column}/Index.vue (95%)
 rename dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/{edit-host => edit-host-column}/Index.vue (81%)
 rename dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/{edit-db-name => edit-table-name-column}/Index.vue (95%)

diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-table-name/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-db-table-name-column/Index.vue
similarity index 95%
rename from dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-table-name/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-db-table-name-column/Index.vue
index 4486742d06..578440e09b 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-table-name/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-db-table-name-column/Index.vue
@@ -15,13 +15,12 @@
         :title="label"
         type="taginput"
         @change="handleBatchEditChange">
-        <BkButton
+        <span
           v-bk-tooltips="t('统一设置：将该列统一设置为相同的值')"
-          text
-          theme="primary"
+          class="batch-select-button"
           @click="handleBatchEditShow">
           <DbIcon type="bulk-edit" />
-        </BkButton>
+        </span>
       </BatchEditColumn>
     </template>
     <div
@@ -144,6 +143,12 @@
 </script>
 
 <style lang="less" scoped>
+  .batch-select-button {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
   .edit-table-name-content {
     width: 100%;
   }
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec-column/Index.vue
similarity index 100%
rename from dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec-column/Index.vue
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec/components/SpecPanel.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec-column/components/SpecPanel.vue
similarity index 87%
rename from dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec/components/SpecPanel.vue
rename to dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec-column/components/SpecPanel.vue
index 658d33aa58..7c6ceeb084 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec/components/SpecPanel.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec-column/components/SpecPanel.vue
@@ -21,8 +21,8 @@
     <slot name="hover" />
     <template #content>
       <div class="mongo-spec-panel">
-        <div class="title">{{ data.name }} {{ t('规格') }}</div>
-        <div class="item">
+        <div class="mongo-spec-panel-title">{{ data.name }} {{ t('规格') }}</div>
+        <div class="mongo-spec-panel-item">
           <div class="item-title">CPU：</div>
           <div class="item-content">
             {{
@@ -32,17 +32,17 @@
             }}
           </div>
         </div>
-        <div class="item">
+        <div class="mongo-spec-panel-item">
           <div class="item-title">{{ t('内存') }}：</div>
           <div class="item-content">
             {{ data.mem.min === data.mem.max ? data.mem.min : `(${data.mem.min}~${data.mem.max})` }} G
           </div>
         </div>
-        <div class="item">
+        <div class="mongo-spec-panel-item">
           <div class="item-title">{{ t('磁盘') }}：</div>
           <div class="item-content">
-            <div class="table">
-              <div class="head">
+            <div class="mount-point-table">
+              <div class="mount-point-table-head">
                 <div class="head-one">
                   {{ t('挂载点') }}
                 </div>
@@ -53,15 +53,18 @@
                   {{ t('磁盘类别') }}
                 </div>
               </div>
-              <div class="row">
+              <div
+                v-for="(storageSpecItem, storageSpecIndex) in data.storage_spec"
+                :key="storageSpecIndex"
+                class="table-row">
                 <div class="row-one">
-                  {{ data.storage_spec[0].mount_point }}
+                  {{ storageSpecItem.mount_point }}
                 </div>
                 <div class="row-two">
-                  {{ data.storage_spec[0].size }}
+                  {{ storageSpecItem.size }}
                 </div>
                 <div class="row-three">
-                  {{ data.storage_spec[0].type }}
+                  {{ storageSpecItem.type }}
                 </div>
               </div>
             </div>
@@ -136,7 +139,7 @@
     box-sizing: border-box;
     flex-direction: column;
 
-    .title {
+    .mongo-spec-panel-title {
       height: 20px;
       margin-bottom: 12px;
       font-size: 12px;
@@ -145,7 +148,7 @@
       color: #63656e;
     }
 
-    .item {
+    .mongo-spec-panel-item {
       display: flex;
       width: 100%;
       height: 32px;
@@ -164,7 +167,7 @@
         letter-spacing: 0;
         color: #313238;
 
-        .table {
+        .mount-point-table {
           display: flex;
           width: 100%;
           flex-direction: column;
@@ -178,7 +181,7 @@
             border-bottom: 1px solid #dcdee5;
           }
 
-          .head {
+          .mount-point-table-head {
             display: flex;
             width: 100%;
             background: #f0f1f5;
@@ -206,7 +209,7 @@
             }
           }
 
-          .row {
+          .table-row {
             display: flex;
             width: 100%;
             border-top: none;
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/spec-block-column/components/Panel.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/spec-block-column/components/Panel.vue
index b7eafe5b4a..954d51917c 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/spec-block-column/components/Panel.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/spec-block-column/components/Panel.vue
@@ -22,66 +22,64 @@
     <template #content>
       <div class="spec-diaplay-panel">
         <div class="spec-diaplay-panel-title">{{ data.name }} {{ t('规格') }}</div>
-        <div class="items">
-          <div class="item">
-            <div class="item-title">CPU：</div>
-            <div class="item-content">
-              {{
-                data.cpu.min === data.cpu.max
-                  ? t('n核', { n: data.cpu.min })
-                  : t('((n-m))核', { n: data.cpu.min, m: data.cpu.max })
-              }}
-            </div>
+        <div class="spec-diaplay-panel-item">
+          <div class="item-title">CPU：</div>
+          <div class="item-content">
+            {{
+              data.cpu.min === data.cpu.max
+                ? t('n核', { n: data.cpu.min })
+                : t('((n-m))核', { n: data.cpu.min, m: data.cpu.max })
+            }}
           </div>
-          <div class="item">
-            <div class="item-title">{{ t('内存') }}：</div>
-            <div class="item-content">
-              {{ data.mem.min === data.mem.max ? data.mem.min : `(${data.mem.min}~${data.mem.max})` }} G
-            </div>
+        </div>
+        <div class="spec-diaplay-panel-item">
+          <div class="item-title">{{ t('内存') }}：</div>
+          <div class="item-content">
+            {{ data.mem.min === data.mem.max ? data.mem.min : `(${data.mem.min}~${data.mem.max})` }} G
           </div>
-          <div
-            class="item"
-            style="align-items: flex-start">
-            <div class="item-title">{{ t('磁盘') }}：</div>
-            <div class="item-content">
-              <div class="disk-table">
-                <div class="table-head">
-                  <div class="head-one">
-                    {{ t('挂载点') }}
-                  </div>
-                  <div class="head-two">
-                    {{ t('最小容量(G)') }}
-                  </div>
-                  <div class="head-three">
-                    {{ t('磁盘类别') }}
-                  </div>
+        </div>
+        <div
+          class="spec-diaplay-panel-item"
+          style="align-items: flex-start">
+          <div class="item-title">{{ t('磁盘') }}：</div>
+          <div class="item-content">
+            <div class="disk-table">
+              <div class="table-head">
+                <div class="head-one">
+                  {{ t('挂载点') }}
                 </div>
-                <div
-                  v-for="(storageSpecItem, storageSpecIndex) in data.storage_spec"
-                  :key="storageSpecIndex"
-                  class="table-row">
-                  <div class="row-one">
-                    {{ storageSpecItem.mount_point }}
-                  </div>
-                  <div class="row-two">
-                    {{ storageSpecItem.size }}
-                  </div>
-                  <div class="row-three">
-                    {{ storageSpecItem.type }}
-                  </div>
+                <div class="head-two">
+                  {{ t('最小容量(G)') }}
+                </div>
+                <div class="head-three">
+                  {{ t('磁盘类别') }}
+                </div>
+              </div>
+              <div
+                v-for="(storageSpecItem, storageSpecIndex) in data.storage_spec"
+                :key="storageSpecIndex"
+                class="table-row">
+                <div class="row-one">
+                  {{ storageSpecItem.mount_point }}
+                </div>
+                <div class="row-two">
+                  {{ storageSpecItem.size }}
+                </div>
+                <div class="row-three">
+                  {{ storageSpecItem.type }}
                 </div>
               </div>
             </div>
           </div>
-          <div
-            v-if="!hideQps"
-            class="item">
-            <div class="item-title">
-              {{ t('单机 QPS') }}
-            </div>
-            <div class="item-content">
-              {{ data.qps.min === data.qps.max ? `${data.qps.min}/s` : `${data.qps.min}/s~${data.qps.max}/s` }}
-            </div>
+        </div>
+        <div
+          v-if="!hideQps"
+          class="spec-diaplay-panel-item">
+          <div class="item-title">
+            {{ t('单机 QPS') }}
+          </div>
+          <div class="item-content">
+            {{ data.qps.min === data.qps.max ? `${data.qps.min}/s` : `${data.qps.min}/s~${data.qps.max}/s` }}
           </div>
         </div>
       </div>
@@ -144,7 +142,7 @@
       color: #63656e;
     }
 
-    .item {
+    .spec-diaplay-panel-item {
       display: flex;
       width: 100%;
       align-items: center;
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_MONGOS/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_MONGOS/pages/page1/Index.vue
index e74fa3a4c1..a6e4fc0480 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_MONGOS/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_MONGOS/pages/page1/Index.vue
@@ -117,9 +117,9 @@
   } from '@components/editable-table/Index.vue';
 
   import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
-  import EditSpecColumn from '@views/db-manage/common/toolbox-field/edit-spec/Index.vue';
+  import EditSpecColumn from '@views/db-manage/common/toolbox-field/edit-spec-column/Index.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
+  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
 
   export interface IDataRow {
     cluster: {
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_SHARD_NODES/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_SHARD_NODES/pages/page1/Index.vue
index 02373f707e..fcf76e4908 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_SHARD_NODES/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_SHARD_NODES/pages/page1/Index.vue
@@ -121,8 +121,8 @@
 
   import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
-  import EditClusterWithRelatedClustersColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters/Index.vue';
+  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
+  import EditClusterWithRelatedClustersColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters-column/Index.vue';
 
   import TargetNumberColumn from './components/TargetNumberColumn.vue';
 
@@ -185,13 +185,7 @@
       {
         validator: (value: string) => {
           if (value) {
-            const domainList = tableData.value
-              .flatMap((tableRow) => [
-                tableRow.cluster.master_domain || '',
-                ...(tableRow.cluster.related_clusters || []).map((relatedItem) => relatedItem.domain),
-              ])
-              .filter((domainItem) => domainItem);
-            return domainList.filter((domain) => domain === value).length === 1;
+            return domainList.value.filter((domain) => domain === value).length === 1;
           }
           return true;
         },
@@ -231,6 +225,18 @@
     ),
   );
 
+  const domainList = computed(() =>
+    tableData.value.flatMap((tableRow) => {
+      if (tableRow.cluster.master_domain) {
+        return [
+          tableRow.cluster.master_domain || '',
+          ...(tableRow.cluster.related_clusters || []).map((relatedItem) => relatedItem.domain),
+        ];
+      }
+      return [];
+    }),
+  );
+
   const handleClusterBatchEdit = (clusterList: MongodbModel[]) => {
     const newList: IDataRow[] = [];
     clusterList.forEach((item) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_BACKUP/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_BACKUP/pages/page1/Index.vue
index 35e76ca9d3..f3c9479a97 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_BACKUP/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_BACKUP/pages/page1/Index.vue
@@ -176,10 +176,10 @@
 
   import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
-  import EditClusterWithSelectorColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector/Index.vue';
-  import EditDbNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-name/Index.vue';
-  import EditTableNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-table/Index.vue';
+  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
+  import EditClusterWithSelectorColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector-column/Index.vue';
+  import EditDbNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-name-column/Index.vue';
+  import EditTableNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-table-name-column/Index.vue';
 
   import EditTargetHostColumn from './components/TargetHostColumn.vue';
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_BACKUP/pages/page1/components/TargetHostColumn.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_BACKUP/pages/page1/components/TargetHostColumn.vue
index 23d827562d..96d2067adf 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_BACKUP/pages/page1/components/TargetHostColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_BACKUP/pages/page1/components/TargetHostColumn.vue
@@ -12,14 +12,18 @@
       :disabled="disabled"
       :placeholder="t('请输入或选择主机')">
       <template #append>
-        <span v-bk-tooltips="t('选择主机')">
-          <BkButton
-            class="host-selector-btn"
+        <span
+          v-bk-tooltips="{
+            content: t('选择主机'),
+            disabled: disabled,
+          }">
+          <div
+            class="host-selector-button"
+            :class="{ 'host-selector-button-disabled': disabled }"
             :disabled="disabled"
-            size="small"
             @click="handleShowSelector">
             <DbIcon type="host-select" />
-          </BkButton>
+          </div>
         </span>
       </template>
     </EditInput>
@@ -107,6 +111,9 @@
   });
 
   const handleShowSelector = () => {
+    if (props.disabled) {
+      return;
+    }
     isShowSelector.value = true;
   };
 
@@ -117,15 +124,26 @@
 </script>
 
 <style lang="less" scoped>
-  .host-selector-btn {
+  .host-selector-button {
     width: 24px;
     font-size: 16px;
-    border: none;
     border-radius: 2px;
+    text-align: center;
+    cursor: pointer;
 
     &:hover {
       color: #3a84ff;
       background: #f0f1f5;
     }
   }
+
+  .host-selector-button-disabled {
+    color: #dcdee5;
+    cursor: not-allowed;
+
+    &:hover {
+      color: #dcdee5;
+      background: #f0f1f5;
+    }
+  }
 </style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_CUTOFF/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_CUTOFF/pages/page1/Index.vue
index 8f8acf3539..25104af6c7 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_CUTOFF/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_CUTOFF/pages/page1/Index.vue
@@ -130,9 +130,9 @@
   import { type IValue, type PanelListType } from '@components/instance-selector/Index.vue';
 
   import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
-  import EditSpecColumn from '@views/db-manage/common/toolbox-field/edit-spec/Index.vue';
+  import EditSpecColumn from '@views/db-manage/common/toolbox-field/edit-spec-column/Index.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import EditHostColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-host/Index.vue';
+  import EditHostColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-host-column/Index.vue';
 
   import RelatedClusterColumn from './components/RelatedClusterColumn.vue';
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_FULL_BACKUP/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_FULL_BACKUP/pages/page1/Index.vue
index c1a20bf8c4..f33ed8416e 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_FULL_BACKUP/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_FULL_BACKUP/pages/page1/Index.vue
@@ -135,7 +135,7 @@
 
   import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
+  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
 
   export interface IDataRow {
     cluster: {
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_MONGOS/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_MONGOS/pages/page1/Index.vue
index 65004b239a..a47119c88c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_MONGOS/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_MONGOS/pages/page1/Index.vue
@@ -35,7 +35,7 @@
               v-model="item.cluster"
               :cluster-types="[ClusterTypes.MONGO_SHARED_CLUSTER]"
               field="cluster.master_domain"
-              label="目标分片集群"
+              :label="t('目标分片集群')"
               :selected="selected"
               :tab-list-config="tabListConfig"
               @batch-edit="handleClusterBatchEdit" />
@@ -136,7 +136,7 @@
   import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
   import SpecBlockColumn from '@views/db-manage/common/toolbox-field/spec-block-column/Index.vue';
-  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
+  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
 
   import IpSelectColumn from './components/IpSelectColumn.vue';
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/pages/page1/Index.vue
index f64698f848..30c31c62a4 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REDUCE_SHARD_NODES/pages/page1/Index.vue
@@ -121,8 +121,8 @@
 
   import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
-  import EditClusterWithRelatedClustersColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters/Index.vue';
+  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
+  import EditClusterWithRelatedClustersColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters-column/Index.vue';
 
   import TargetNumberColumn from './components/TargetNumberColumn.vue';
 
@@ -184,13 +184,7 @@
       {
         validator: (value: string) => {
           if (value) {
-            const domainList = tableData.value
-              .flatMap((tableRow) => [
-                tableRow.cluster.master_domain || '',
-                ...(tableRow.cluster.related_clusters || []).map((relatedItem) => relatedItem.domain),
-              ])
-              .filter((domainItem) => domainItem);
-            return domainList.filter((domain) => domain === value).length === 1;
+            return domainList.value.filter((domain) => domain === value).length === 1;
           }
           return true;
         },
@@ -230,6 +224,18 @@
     ),
   );
 
+  const domainList = computed(() =>
+    tableData.value.flatMap((tableRow) => {
+      if (tableRow.cluster.master_domain) {
+        return [
+          tableRow.cluster.master_domain || '',
+          ...(tableRow.cluster.related_clusters || []).map((relatedItem) => relatedItem.domain),
+        ];
+      }
+      return [];
+    }),
+  );
+
   const handleClusterBatchEdit = (clusterList: MongodbModel[]) => {
     const newList: IDataRow[] = [];
     clusterList.forEach((item) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/Index.vue
index e021d4bba8..29582a0ba2 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_REMOVE_NS/pages/page1/Index.vue
@@ -56,14 +56,14 @@
               v-model="item.cluster[0]"
               :cluster-types="[formData.cluster_type]"
               field="cluster.0.master_domain"
-              label="目标分片集群"
+              :label="t('目标分片集群')"
               :selected="selected"
               @batch-edit="handleClusterBatchEdit" />
             <EditClusterWithSelectorColumn
               v-else
               v-model="item.cluster"
               :cluster-types="[formData.cluster_type]"
-              label="副本集"
+              :label="t('副本集')"
               :selected="selected"
               @batch-edit="handleClusterBatchEdit" />
             <DropTypeColumn v-model="item.drop_type" />
@@ -154,10 +154,10 @@
 
   import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
-  import EditClusterWithSelectorColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector/Index.vue';
-  import EditDbNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-name/Index.vue';
-  import EditTableNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-table/Index.vue';
+  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
+  import EditClusterWithSelectorColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector-column/Index.vue';
+  import EditDbNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-name-column/Index.vue';
+  import EditTableNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-table-name-column/Index.vue';
 
   import DropTypeColumn from './components/DropTypeColumn.vue';
   import DropIndexColumn from './components/DropTypeIndex.vue';
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/Index.vue
index 23adf8405b..50e4b67e21 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/Index.vue
@@ -37,28 +37,10 @@
               :cluster-types="[ClusterTypes.MONGO_REPLICA_SET, ClusterTypes.MONGO_SHARED_CLUSTER]"
               :selected="selected"
               @batch-edit="handleClusterBatchEdit" />
-            <EditableTableColumn
-              :label="t('当前容量')"
-              :min-width="400">
-              <EditBlock :placeholder="t('选择集群后自动生成')">
-                <CurrentCapacity
-                  v-if="item.cluster.id"
-                  :data="item.cluster"
-                  :spec="item.cluster.mongodb![0].spec_config" />
-              </EditBlock>
-            </EditableTableColumn>
-            <EditableTableColumn
-              field="target_capacity"
-              :label="t('目标容量')"
-              :min-width="400"
-              required>
-              <EditBlock :placeholder="t('请选择')">
-                <TargetCapacity
-                  v-if="item.cluster.id"
-                  v-model="item.target_capacity"
-                  :data="item.cluster as Required<IDataRow['cluster']>" />
-              </EditBlock>
-            </EditableTableColumn>
+            <CurrentCapacityColumn :data="item.cluster" />
+            <TargetCapacityColumn
+              v-model="item.target_capacity"
+              :data="item.cluster" />
             <OperationColumn
               :create-row-method="createRowData"
               :table-data="tableData" />
@@ -102,18 +84,14 @@
 
   import { ClusterTypes, TicketTypes } from '@common/const';
 
-  import EditableTable, {
-    Block as EditBlock,
-    Column as EditableTableColumn,
-    Row as EditableTableRow,
-  } from '@components/editable-table/Index.vue';
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
 
   import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
-  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
+  import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
 
-  import CurrentCapacity from './components/CurrentCapacity.vue';
-  import TargetCapacity from './components/target-capacity/Index.vue';
+  import CurrentCapacityColumn from './components/CurrentCapacityColumn.vue';
+  import TargetCapacityColumn from './components/target-capacity-column/Index.vue';
 
   export interface IDataRow {
     cluster: {
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/CurrentCapacity.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/CurrentCapacity.vue
deleted file mode 100644
index 2527a586ca..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/CurrentCapacity.vue
+++ /dev/null
@@ -1,106 +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 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="current-capacity-block">
-    <div class="info-item">
-      <div class="item-title">{{ t('当前资源规格') }}：</div>
-      <div class="item-content">
-        <RenderSpec
-          :data="spec"
-          :hide-qps="!spec?.qps.max"
-          is-ignore-counts />
-      </div>
-    </div>
-    <div class="info-item">
-      <div class="item-title">{{ t('当前Shard节点规格') }}：</div>
-      <div class="item-content">
-        {{ data?.shard_spec }}
-      </div>
-    </div>
-    <div class="info-item">
-      <div class="item-title">{{ t('当前Shard节点数') }}：</div>
-      <div class="item-content">
-        {{ data?.shard_node_count }}
-      </div>
-    </div>
-    <div class="info-item">
-      <div class="item-title">{{ t('当前Shard数量') }}：</div>
-      <div class="item-content">
-        {{ data?.shard_num }}
-      </div>
-    </div>
-    <div class="info-item">
-      <div class="item-title">{{ t('当前机器组数') }}：</div>
-      <div class="item-content">
-        {{ data?.mongodb_machine_pair }}
-      </div>
-    </div>
-    <div class="info-item">
-      <div class="item-title">{{ t('当前机器数量') }}：</div>
-      <div class="item-content">
-        {{ data?.mongodb_machine_num }}
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  import MongodbModel from '@services/model/mongodb/mongodb';
-
-  import RenderSpec from '@components/render-table/columns/spec-display/Index.vue';
-
-  interface Props {
-    data: {
-      shard_spec?: string;
-      shard_node_count?: number;
-      shard_num?: number;
-      mongodb_machine_pair?: number;
-      mongodb_machine_num?: number;
-    };
-    spec?: MongodbModel['mongodb'][number]['spec_config'];
-  }
-
-  defineProps<Props>();
-
-  const { t } = useI18n();
-</script>
-
-<style lang="less" scoped>
-  .current-capacity-block {
-    display: flex;
-    flex-direction: column;
-
-    .info-item {
-      display: flex;
-      width: 100%;
-
-      .item-title {
-        width: 125px;
-        text-align: right;
-      }
-
-      .item-content {
-        flex: 1;
-        display: flex;
-        align-items: center;
-
-        :deep(.render-spec-box) {
-          height: 22px;
-          padding: 0;
-        }
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/CurrentCapacityColumn.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/CurrentCapacityColumn.vue
new file mode 100644
index 0000000000..7a9abc0f77
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/CurrentCapacityColumn.vue
@@ -0,0 +1,118 @@
+<!--
+ * 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>
+  <EditableTableColumn
+    :label="t('当前容量')"
+    :min-width="400">
+    <EditBlock :placeholder="t('选择集群后自动生成')">
+      <div
+        v-if="data.id"
+        class="current-capacity-block">
+        <div class="info-item">
+          <div class="item-title">{{ t('当前资源规格') }}：</div>
+          <div class="item-content">
+            <RenderSpec
+              :data="spec"
+              :hide-qps="!spec?.qps.max"
+              is-ignore-counts />
+          </div>
+        </div>
+        <div class="info-item">
+          <div class="item-title">{{ t('当前Shard节点规格') }}：</div>
+          <div class="item-content">
+            {{ data?.shard_spec }}
+          </div>
+        </div>
+        <div class="info-item">
+          <div class="item-title">{{ t('当前Shard节点数') }}：</div>
+          <div class="item-content">
+            {{ data?.shard_node_count }}
+          </div>
+        </div>
+        <div class="info-item">
+          <div class="item-title">{{ t('当前Shard数量') }}：</div>
+          <div class="item-content">
+            {{ data?.shard_num }}
+          </div>
+        </div>
+        <div class="info-item">
+          <div class="item-title">{{ t('当前机器组数') }}：</div>
+          <div class="item-content">
+            {{ data?.mongodb_machine_pair }}
+          </div>
+        </div>
+        <div class="info-item">
+          <div class="item-title">{{ t('当前机器数量') }}：</div>
+          <div class="item-content">
+            {{ data?.mongodb_machine_num }}
+          </div>
+        </div>
+      </div>
+    </EditBlock>
+  </EditableTableColumn>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import MongodbModel from '@services/model/mongodb/mongodb';
+
+  import { Block as EditBlock, Column as EditableTableColumn } from '@components/editable-table/Index.vue';
+  import RenderSpec from '@components/render-table/columns/spec-display/Index.vue';
+
+  interface Props {
+    data: {
+      id?: number;
+      shard_spec?: string;
+      shard_node_count?: number;
+      shard_num?: number;
+      mongodb_machine_pair?: number;
+      mongodb_machine_num?: number;
+      mongodb?: MongodbModel['mongodb'];
+    };
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const spec = computed(() => props.data.mongodb?.[0].spec_config);
+</script>
+
+<style lang="less" scoped>
+  .current-capacity-block {
+    display: flex;
+    flex-direction: column;
+
+    .info-item {
+      display: flex;
+      width: 100%;
+
+      .item-title {
+        width: 125px;
+        text-align: right;
+      }
+
+      .item-content {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        :deep(.render-spec-box) {
+          height: 22px;
+          padding: 0;
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/target-capacity/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/target-capacity-column/Index.vue
similarity index 58%
rename from dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/target-capacity/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/target-capacity-column/Index.vue
index 77102be628..9cb242d0ed 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/target-capacity/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/target-capacity-column/Index.vue
@@ -12,81 +12,90 @@
 -->
 
 <template>
-  <div
-    class="target-capacity"
-    @click="handleClickSelect">
-    <div v-if="!modelValue">
-      <div class="placeholder-text">{{ t('请选择') }}</div>
-    </div>
-    <div
-      v-else
-      class="capacity-box">
-      <div class="display-content">
-        <div class="item">
-          <div class="item-title">{{ t('目标资源规格') }}：</div>
-          <div class="item-content">
-            <RenderSpec
-              :data="selectRow"
-              :hide-qps="!selectRow?.qps.max"
-              is-ignore-counts />
-          </div>
-        </div>
-        <div class="item">
-          <div class="item-title">{{ t('目标Shard节点规格') }}：</div>
-          <div class="item-content">
-            {{ selectRow?.shard_recommend.shard_spec }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="item-title">{{ t('目标Shard节点数') }}：</div>
-          <div class="item-content">
-            {{ selectRow?.shard_node_count }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="item-title">{{ t('目标Shard数量') }}：</div>
-          <div class="item-content">
-            {{ selectRow?.shard_num }}
-          </div>
-        </div>
-        <div class="item">
-          <div class="item-title">{{ t('目标机器组数') }}：</div>
-          <div class="item-content">
-            {{ selectRow?.machine_pair }}
-          </div>
+  <EditableTableColumn
+    field="target_capacity"
+    :label="t('目标容量')"
+    :min-width="400"
+    required>
+    <EditBlock :placeholder="t('请选择')">
+      <div
+        class="target-capacity"
+        @click="handleClickSelect">
+        <div v-if="!modelValue">
+          <div class="placeholder-text">{{ t('请选择') }}</div>
         </div>
-        <div class="item">
-          <div class="item-title">{{ t('目标机器数量') }}：</div>
-          <div class="item-content">
-            {{ selectRow?.machine_need_num }}
+        <div
+          v-else
+          class="capacity-box">
+          <div class="display-content">
+            <div class="item">
+              <div class="item-title">{{ t('目标资源规格') }}：</div>
+              <div class="item-content">
+                <RenderSpec
+                  :data="selectRow"
+                  :hide-qps="!selectRow?.qps.max"
+                  is-ignore-counts />
+              </div>
+            </div>
+            <div class="item">
+              <div class="item-title">{{ t('目标Shard节点规格') }}：</div>
+              <div class="item-content">
+                {{ selectRow?.shard_recommend.shard_spec }}
+              </div>
+            </div>
+            <div class="item">
+              <div class="item-title">{{ t('目标Shard节点数') }}：</div>
+              <div class="item-content">
+                {{ selectRow?.shard_node_count }}
+              </div>
+            </div>
+            <div class="item">
+              <div class="item-title">{{ t('目标Shard数量') }}：</div>
+              <div class="item-content">
+                {{ selectRow?.shard_num }}
+              </div>
+            </div>
+            <div class="item">
+              <div class="item-title">{{ t('目标机器组数') }}：</div>
+              <div class="item-content">
+                {{ selectRow?.machine_pair }}
+              </div>
+            </div>
+            <div class="item">
+              <div class="item-title">{{ t('目标机器数量') }}：</div>
+              <div class="item-content">
+                {{ selectRow?.machine_need_num }}
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <ChooseDeployPlan
-      v-if="data.id"
-      v-model="isShowSelector"
-      :data="data"
-      @confirm="handleChoosedTargetCapacity" />
-  </div>
+    </EditBlock>
+  </EditableTableColumn>
+  <ChooseDeployPlan
+    v-if="data.id"
+    v-model="isShowSelector"
+    :data="data as Required<typeof data>"
+    @confirm="handleChoosedTargetCapacity" />
 </template>
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
   import MongodbModel from '@services/model/mongodb/mongodb';
 
+  import { Block as EditBlock, Column as EditableTableColumn } from '@components/editable-table/Index.vue';
   import RenderSpec from '@components/render-table/columns/spec-display/Index.vue';
 
   import ChooseDeployPlan, { type ClusterSpec } from './components/ChooseDeployPlan.vue';
 
   interface Props {
     data: {
-      id: number;
-      master_domain: string;
-      bk_cloud_id: number;
-      shard_num: number;
-      shard_node_count: number;
-      mongodb: MongodbModel['mongodb'];
+      id?: number;
+      master_domain?: string;
+      bk_cloud_id?: number;
+      shard_num?: number;
+      shard_node_count?: number;
+      mongodb?: MongodbModel['mongodb'];
     };
   }
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/target-capacity/components/ChooseDeployPlan.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/target-capacity-column/components/ChooseDeployPlan.vue
similarity index 100%
rename from dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/target-capacity/components/ChooseDeployPlan.vue
rename to dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_SCALE_UPDOWN/pages/page1/components/target-capacity-column/components/ChooseDeployPlan.vue
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue
similarity index 83%
rename from dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue
index d26014e742..affdb5fb13 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue
@@ -4,17 +4,17 @@
     :append-rules="rules"
     :field="field"
     fixed="left"
-    :label="t(label)"
+    :label="label || t('目标集群')"
     :loading="isLoading"
     :min-width="300"
     required>
     <template #headAppend>
-      <BkButton
-        text
-        theme="primary"
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-select-button"
         @click="handleShowClusterSelector">
         <DbIcon type="batch-host-select" />
-      </BkButton>
+      </span>
     </template>
     <EditInput
       v-model="modelValue.master_domain"
@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
 
   import MongodbModel from '@services/model/mongodb/mongodb';
   import { filterClusters } from '@services/source/dbbase';
@@ -63,7 +64,7 @@
   }
 
   withDefaults(defineProps<Props>(), {
-    label: '目标集群',
+    label: '',
     field: 'cluster.master_domain',
     tabListConfig: undefined,
   });
@@ -88,29 +89,26 @@
     },
   ];
 
-  const editableTableColumnRef = useTemplateRef('editableTableColumn');
   const isShowClusterSelector = ref(false);
-  const isLoading = ref(false);
+
+  const { loading: isLoading, run: runFilterClusters } = useRequest(filterClusters<MongodbModel>, {
+    manual: true,
+    onSuccess(data) {
+      if (data.length > 0) {
+        [modelValue.value] = data;
+      }
+    },
+  });
 
   watch(
     () => modelValue.value.master_domain,
     () => {
       if (!modelValue.value.id && modelValue.value.master_domain) {
-        isLoading.value = true;
         modelValue.value.id = undefined;
-        filterClusters<MongodbModel>({
+        runFilterClusters({
           bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
           exact_domain: modelValue.value.master_domain,
-        })
-          .then((data) => {
-            if (data.length > 0) {
-              [modelValue.value] = data;
-            }
-          })
-          .finally(() => {
-            isLoading.value = false;
-            editableTableColumnRef.value!.validate();
-          });
+        });
       }
       if (!modelValue.value.master_domain) {
         modelValue.value.id = undefined;
@@ -130,3 +128,11 @@
     emits('batch-edit', clusterList);
   };
 </script>
+
+<style lang="less" scoped>
+  .batch-select-button {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters-column/Index.vue
similarity index 92%
rename from dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters-column/Index.vue
index 990e14a6be..b290ec4012 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters-column/Index.vue
@@ -24,7 +24,7 @@
     <template #headAppend>
       <span
         v-bk-tooltips="t('批量选择')"
-        class="batch-host-select"
+        class="batch-select-button"
         @click="handleShowSelector">
         <DbIcon type="batch-host-select" />
       </span>
@@ -107,7 +107,6 @@
   const { t } = useI18n();
 
   const showSelector = ref(false);
-  const isLoading = ref(false);
 
   const rules = [
     {
@@ -122,6 +121,15 @@
     },
   ];
 
+  const { loading: isLoading, run: runFilterClusters } = useRequest(filterClusters<MongodbModel>, {
+    manual: true,
+    onSuccess(data) {
+      if (data.length > 0) {
+        [modelValue.value] = data;
+      }
+    },
+  });
+
   const { run: queryRelatedClusters, loading: relatedClusterLoading } = useRequest(getRelatedClustersByClusterIds, {
     manual: true,
     onSuccess: (data) => {
@@ -139,21 +147,11 @@
     () => modelValue.value.master_domain,
     () => {
       if (!modelValue.value.id && modelValue.value.master_domain) {
-        isLoading.value = true;
         modelValue.value.id = undefined;
-        filterClusters<MongodbModel>({
+        runFilterClusters({
           bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
           exact_domain: modelValue.value.master_domain,
-        })
-          .then((data) => {
-            if (data.length > 0) {
-              [modelValue.value] = data;
-            }
-          })
-          .finally(() => {
-            isLoading.value = false;
-            // editableTableColumnRef.value!.validate();
-          });
+        });
       }
       if (!modelValue.value.master_domain) {
         modelValue.value.id = undefined;
@@ -188,7 +186,7 @@
 </script>
 
 <style lang="less" scoped>
-  .batch-host-select {
+  .batch-select-button {
     font-size: 14px;
     color: #3a84ff;
     cursor: pointer;
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector-column/Index.vue
similarity index 82%
rename from dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector-column/Index.vue
index dc0e038e67..01f5b69a48 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector-column/Index.vue
@@ -4,29 +4,28 @@
     :append-rules="rules"
     field="cluster"
     fixed="left"
-    :label="t(label)"
+    :label="label || t('目标集群')"
     :loading="isLoading"
     :min-width="300"
     required>
     <template #headAppend>
-      <BkButton
-        text
-        theme="primary"
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-select-button"
         @click="handleShowHeadClusterSelector">
         <DbIcon type="batch-host-select" />
-      </BkButton>
+      </span>
     </template>
     <EditTextarea
       v-model="localValue"
       :placeholder="t('请输入或选择集群')">
       <template #append>
         <span v-bk-tooltips="t('选择集群')">
-          <BkButton
-            class="cluster-selector-btn"
-            size="small"
+          <span
+            class="batch-select-button"
             @click="handleShowRowClusterSelector">
             <DbIcon type="host-select" />
-          </BkButton>
+          </span>
         </span>
       </template>
     </EditTextarea>
@@ -45,17 +44,7 @@
   </EditableTableColumn>
 </template>
 
-<script setup lang="ts" generic="T extends Record<string, any>">
-  import { useI18n } from 'vue-i18n';
-
-  import MongodbModel from '@services/model/mongodb/mongodb';
-  import { filterClusters } from '@services/source/dbbase';
-
-  import { domainRegex } from '@common/regex';
-
-  import ClusterSelector from '@components/cluster-selector/Index.vue';
-  import { Column as EditableTableColumn, Textarea as EditTextarea } from '@components/editable-table/Index.vue';
-
+<script lang="ts">
   type MappedProps = {
     [K in keyof Props['selected']]: MongodbModel[];
   };
@@ -77,9 +66,21 @@
   interface Emits {
     (e: 'batch-edit', value: MongodbModel[]): void;
   }
+</script>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import MongodbModel from '@services/model/mongodb/mongodb';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column as EditableTableColumn, Textarea as EditTextarea } from '@components/editable-table/Index.vue';
 
   const props = withDefaults(defineProps<Props>(), {
-    label: '目标集群',
+    label: '',
   });
   const emits = defineEmits<Emits>();
 
@@ -116,7 +117,6 @@
 
   const isShowHeadClusterSelector = ref(false);
   const isShowRowClusterSelector = ref(false);
-  const isLoading = ref(false);
   const localValue = ref('');
 
   const rowSelected = computed(() => {
@@ -139,6 +139,26 @@
     return selectedClusters;
   });
 
+  const { loading: isLoading, run: runFilterClusters } = useRequest(filterClusters<MongodbModel>, {
+    manual: true,
+    onSuccess(data) {
+      if (data.length > 0) {
+        const clusterMap = data.reduce<Record<string, MongodbModel>>(
+          (prevMap, dataItem) =>
+            Object.assign({}, prevMap, {
+              [dataItem.master_domain]: dataItem,
+            }),
+          {},
+        );
+        modelValue.value.forEach((item) => {
+          if (item.master_domain && clusterMap[item.master_domain]) {
+            Object.assign(item, clusterMap[item.master_domain]);
+          }
+        });
+      }
+    },
+  });
+
   watch(localValue, () => {
     const domainList = localValue.value.split('\n').filter((item) => item);
     const minLength = Math.min(domainList.length, modelValue.value.length);
@@ -167,29 +187,10 @@
         modelValue.value.forEach((item) => {
           Object.assign(item, { id: undefined });
         });
-        filterClusters<MongodbModel>({
+        runFilterClusters({
           bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
           exact_domain: domainList.map((item) => item.master_domain).join(','),
-        })
-          .then((data) => {
-            if (data.length > 0) {
-              const clusterMap = data.reduce<Record<string, MongodbModel>>(
-                (prevMap, dataItem) =>
-                  Object.assign({}, prevMap, {
-                    [dataItem.master_domain]: dataItem,
-                  }),
-                {},
-              );
-              modelValue.value.forEach((item) => {
-                if (item.master_domain && clusterMap[item.master_domain]) {
-                  Object.assign(item, clusterMap[item.master_domain]);
-                }
-              });
-            }
-          })
-          .finally(() => {
-            isLoading.value = false;
-          });
+        });
       }
     },
     {
@@ -217,15 +218,9 @@
 </script>
 
 <style lang="less" scoped>
-  .cluster-selector-btn {
-    width: 24px;
-    font-size: 16px;
-    border: none;
-    border-radius: 2px;
-
-    &:hover {
-      color: #3a84ff;
-      background: #f0f1f5;
-    }
+  .batch-select-button {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-db-table/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-db-name-column/Index.vue
similarity index 95%
rename from dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-db-table/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-db-name-column/Index.vue
index ad113c1b20..e13e0be5f3 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-db-table/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-db-name-column/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <EditTableName
+  <EditDbNameColumn
     v-model="modelValue"
     :batch-edit="false"
     :disabled="disabled"
@@ -31,14 +31,14 @@
         </div>
       </div>
     </template>
-  </EditTableName>
+  </EditDbNameColumn>
 </template>
 
 <script setup lang="ts">
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
-  import EditTableName from '@views/db-manage/common/toolbox-field/edit-table-name/Index.vue';
+  import EditDbNameColumn from '@views/db-manage/common/toolbox-field/edit-db-table-name-column/Index.vue';
 
   interface Props {
     label: string;
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-host/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-host-column/Index.vue
similarity index 81%
rename from dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-host/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-host-column/Index.vue
index 799600c801..278ae3b9c4 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-host/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-host-column/Index.vue
@@ -8,12 +8,12 @@
     :min-width="300"
     required>
     <template #headAppend>
-      <BkButton
-        text
-        theme="primary"
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-select-button"
         @click="handleShowSelector">
         <DbIcon type="batch-host-select" />
-      </BkButton>
+      </span>
     </template>
     <EditInput
       v-model="modelValue.ip"
@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
 
   import { getMongoInstancesList } from '@services/source/mongodb';
 
@@ -82,26 +83,25 @@
   ];
 
   const isShowSelector = ref(false);
-  const isLoading = ref(false);
+
+  const { loading: isLoading, run: runGetMongoInstancesList } = useRequest(getMongoInstancesList, {
+    manual: true,
+    onSuccess(data) {
+      if (data.results.length > 0) {
+        [modelValue.value] = data.results;
+      }
+    },
+  });
 
   watch(
     () => modelValue.value.ip,
     () => {
       if (!modelValue.value.id && modelValue.value.ip) {
-        isLoading.value = true;
         modelValue.value.id = undefined;
-        getMongoInstancesList({
+        runGetMongoInstancesList({
           instance_address: modelValue.value.ip,
           extra: 1,
-        })
-          .then((data) => {
-            if (data.results.length > 0) {
-              [modelValue.value] = data.results;
-            }
-          })
-          .finally(() => {
-            isLoading.value = false;
-          });
+        });
       }
       if (!modelValue.value.ip) {
         modelValue.value.id = undefined;
@@ -122,15 +122,9 @@
 </script>
 
 <style lang="less" scoped>
-  .host-selector-btn {
-    width: 24px;
-    font-size: 16px;
-    border: none;
-    border-radius: 2px;
-
-    &:hover {
-      color: #3a84ff;
-      background: #f0f1f5;
-    }
+  .batch-select-button {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-db-name/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-table-name-column/Index.vue
similarity index 95%
rename from dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-db-name/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-table-name-column/Index.vue
index ad113c1b20..a94feffb58 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-db-name/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/common/toolbox-field/edit-table-name-column/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <EditTableName
+  <EditTableNameColumn
     v-model="modelValue"
     :batch-edit="false"
     :disabled="disabled"
@@ -31,14 +31,14 @@
         </div>
       </div>
     </template>
-  </EditTableName>
+  </EditTableNameColumn>
 </template>
 
 <script setup lang="ts">
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
-  import EditTableName from '@views/db-manage/common/toolbox-field/edit-table-name/Index.vue';
+  import EditTableNameColumn from '@views/db-manage/common/toolbox-field/edit-db-table-name-column/Index.vue';
 
   interface Props {
     label: string;