From b4b2f19a74d3f0daa700b7ffab79178a1977ac59 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Tue, 10 Sep 2024 11:11:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E8=B5=84=E6=BA=90=E6=B1=A0?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E8=A7=86=E5=9B=BE=20#6519=20#=20Reviewed,=20?=
 =?UTF-8?q?transaction=20id:=2017883?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/const/clusterTypeInfos.ts      | 177 +++++++++-
 .../src/services/model/db-resource/summary.ts |  45 +--
 .../model/resource-spec/resourceSpec.ts       |   8 +-
 .../src/views/resource-manage/pool/Index.vue  |  12 +-
 .../com-factory/components/ForBiz.vue         |   4 -
 .../com-factory/components/ResourceType.vue   |   4 -
 .../com-factory/components/SpecId.vue         | 240 +------------
 .../components/field-input/Index.vue          |   3 -
 .../pool/summary-view/components/Export.vue   |   5 +-
 .../pool/summary-view/components/List.vue     |  18 +-
 .../components/search-box/components/Biz.vue  |   7 -
 .../components/search-box/components/Db.vue   |  14 +-
 .../search-box/components/Region.vue          |  17 +-
 .../components/search-box/components/Spec.vue | 227 +------------
 .../src/views/resource-manage/spec/Index.vue  | 315 +-----------------
 15 files changed, 261 insertions(+), 835 deletions(-)

diff --git a/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts b/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
index fbafeb7df4..83c4b76bc1 100644
--- a/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
+++ b/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
@@ -4,18 +4,23 @@ import { t } from '@locales/index';
 
 import { ClusterTypes } from './clusterTypes';
 import { DBTypes } from './dbTypes';
+import { MachineTypes } from './machineTypes';
 
-interface InfoItem {
+export interface ClusterTypeInfoItem {
   id: ClusterTypes;
   name: string;
   dbType: DBTypes;
   moduleId: ExtractedControllerDataKeys;
+  machineList: {
+    id: MachineTypes;
+    name: string;
+  }[];
 }
 type InfoType = {
-  [x in ClusterTypes]?: InfoItem;
+  [x in ClusterTypes]?: ClusterTypeInfoItem;
 };
 type RequiredInfoType = {
-  [x in ClusterTypes]: InfoItem;
+  [x in ClusterTypes]: ClusterTypeInfoItem;
 };
 
 const mysql: InfoType = {
@@ -24,18 +29,47 @@ const mysql: InfoType = {
     name: t('MySQL单节点'),
     dbType: DBTypes.MYSQL,
     moduleId: 'mysql',
+    machineList: [
+      {
+        id: MachineTypes.SINGLE,
+        name: t('后端存储机型'),
+      },
+    ],
   },
   [ClusterTypes.TENDBHA]: {
     id: ClusterTypes.TENDBHA,
     name: t('MySQL主从'),
     dbType: DBTypes.MYSQL,
     moduleId: 'mysql',
+    machineList: [
+      {
+        id: MachineTypes.BACKEND,
+        name: t('后端存储机型'),
+      },
+      {
+        id: MachineTypes.PROXY,
+        name: t('Proxy机型'),
+      },
+    ],
   },
+};
+
+const spider: InfoType = {
   [ClusterTypes.TENDBCLUSTER]: {
     id: ClusterTypes.TENDBCLUSTER,
     name: 'TenDBCluster',
-    dbType: DBTypes.MYSQL,
+    dbType: DBTypes.TENDBCLUSTER,
     moduleId: 'mysql',
+    machineList: [
+      {
+        id: MachineTypes.SPIDER,
+        name: t('接入层Master'),
+      },
+      {
+        id: MachineTypes.REMOTE,
+        name: t('后端存储规格'),
+      },
+    ],
   },
 };
 
@@ -45,30 +79,76 @@ const redis: InfoType = {
     name: 'TendisCache',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
+    machineList: [
+      {
+        id: MachineTypes.TENDISCACHE,
+        name: t('后端存储机型'),
+      },
+      {
+        id: MachineTypes.TWEMPROXY,
+        name: t('Proxy机型'),
+      },
+    ],
   },
   [ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE]: {
     id: ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
     name: 'TendisSSD',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
+    machineList: [
+      {
+        id: MachineTypes.TENDISSSD,
+        name: t('后端存储机型'),
+      },
+      {
+        id: MachineTypes.TWEMPROXY,
+        name: t('Proxy机型'),
+      },
+    ],
   },
   [ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER]: {
     id: ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
     name: 'Tendisplus',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
+    machineList: [
+      {
+        id: MachineTypes.TENDISPLUS,
+        name: t('后端存储机型'),
+      },
+      {
+        id: MachineTypes.PREDIXY,
+        name: t('Proxy机型'),
+      },
+    ],
   },
   [ClusterTypes.PREDIXY_REDIS_CLUSTER]: {
     id: ClusterTypes.PREDIXY_REDIS_CLUSTER,
     name: 'RedisCluster',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
+    machineList: [
+      {
+        id: MachineTypes.TENDISCACHE,
+        name: t('后端存储机型'),
+      },
+      {
+        id: MachineTypes.PREDIXY,
+        name: t('Proxy机型'),
+      },
+    ],
   },
   [ClusterTypes.REDIS_INSTANCE]: {
     id: ClusterTypes.REDIS_INSTANCE,
     name: t('Redis主从'),
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
+    machineList: [
+      {
+        id: MachineTypes.TENDISCACHE,
+        name: t('后端存储机型'),
+      },
+    ],
   },
 };
 
@@ -78,42 +158,98 @@ const bigdata: InfoType = {
     name: 'ES',
     dbType: DBTypes.ES,
     moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.ES_MASTER,
+        name: t('Master节点规格'),
+      },
+      {
+        id: MachineTypes.ES_CLIENT,
+        name: t('Client节点规格'),
+      },
+      {
+        id: MachineTypes.ES_DATANODE,
+        name: t('冷_热节点规格'),
+      },
+    ],
   },
   [ClusterTypes.KAFKA]: {
     id: ClusterTypes.KAFKA,
     name: 'Kafka',
     dbType: DBTypes.KAFKA,
     moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.ZOOKEEPER,
+        name: t('Zookeeper节点规格'),
+      },
+      {
+        id: MachineTypes.BROKER,
+        name: t('Broker节点规格'),
+      },
+    ],
   },
   [ClusterTypes.HDFS]: {
     id: ClusterTypes.HDFS,
     name: 'HDFS',
     dbType: DBTypes.HDFS,
     moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.HDFS_DATANODE,
+        name: t('DataNode节点规格'),
+      },
+      {
+        id: MachineTypes.HDFS_MASTER,
+        name: t('NameNode_Zookeeper_JournalNode节点规格'),
+      },
+    ],
   },
   [ClusterTypes.INFLUXDB]: {
     id: ClusterTypes.INFLUXDB,
     name: 'InfuxDB',
     dbType: DBTypes.INFLUXDB,
     moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.INFLUXDB,
+        name: t('后端存储机型'),
+      },
+    ],
   },
   [ClusterTypes.PULSAR]: {
     id: ClusterTypes.PULSAR,
     name: 'Pulsar',
     dbType: DBTypes.PULSAR,
     moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.PULSAR_BOOKKEEPER,
+        name: t('Bookkeeper节点规格'),
+      },
+      {
+        id: MachineTypes.PULSAR_ZOOKEEPER,
+        name: t('Zookeeper节点规格'),
+      },
+      {
+        id: MachineTypes.PULSAR_BROKER,
+        name: t('Broker节点规格'),
+      },
+    ],
   },
   [ClusterTypes.RIAK]: {
     id: ClusterTypes.RIAK,
     name: 'Riak',
     dbType: DBTypes.RIAK,
     moduleId: 'bigdata',
+    machineList: [],
   },
   [ClusterTypes.DORIS]: {
     id: ClusterTypes.DORIS,
     name: 'Doris',
     dbType: DBTypes.DORIS,
     moduleId: 'bigdata',
+    machineList: [],
   },
 };
 
@@ -123,12 +259,32 @@ const mongo: InfoType = {
     name: t('Mongo副本集'),
     dbType: DBTypes.MONGODB,
     moduleId: 'mongodb',
+    machineList: [
+      {
+        id: MachineTypes.MONGODB,
+        name: t('Mongodb规格'),
+      },
+    ],
   },
   [ClusterTypes.MONGO_SHARED_CLUSTER]: {
     id: ClusterTypes.MONGO_SHARED_CLUSTER,
     name: t('Mongo 分片集群'),
     dbType: DBTypes.MONGODB,
     moduleId: 'mongodb',
+    machineList: [
+      {
+        id: MachineTypes.MONGOS,
+        name: t('Mongos规格'),
+      },
+      {
+        id: MachineTypes.MONGODB,
+        name: t('ConfigSvr规格'),
+      },
+      {
+        id: MachineTypes.MONGO_CONFIG,
+        name: t('ShardSvr规格'),
+      },
+    ],
   },
 };
 
@@ -138,12 +294,24 @@ const sqlserver: InfoType = {
     name: t('SQLServer单节点'),
     dbType: DBTypes.SQLSERVER,
     moduleId: 'sqlserver',
+    machineList: [
+      {
+        id: MachineTypes.SQLSERVER_SINGLE,
+        name: t('单节点规格'),
+      },
+    ],
   },
   [ClusterTypes.SQLSERVER_HA]: {
     id: ClusterTypes.SQLSERVER_HA,
     name: t('SQLServer主从'),
     dbType: DBTypes.SQLSERVER,
     moduleId: 'sqlserver',
+    machineList: [
+      {
+        id: MachineTypes.SQLSERVER_HA,
+        name: t('主从规格'),
+      },
+    ],
   },
 };
 
@@ -152,6 +320,7 @@ const sqlserver: InfoType = {
  */
 export const clusterTypeInfos: RequiredInfoType = {
   ...mysql,
+  ...spider,
   ...redis,
   ...bigdata,
   ...mongo,
diff --git a/dbm-ui/frontend/src/services/model/db-resource/summary.ts b/dbm-ui/frontend/src/services/model/db-resource/summary.ts
index da83206fa3..d2e09ec06d 100644
--- a/dbm-ui/frontend/src/services/model/db-resource/summary.ts
+++ b/dbm-ui/frontend/src/services/model/db-resource/summary.ts
@@ -11,9 +11,7 @@
  * the specific language governing permissions and limitations under the License.
  */
 
-import { MachineTypes } from '@common/const';
-
-import { t } from '@locales/index';
+import { clusterTypeInfos, ClusterTypes, MachineTypes } from '@common/const';
 
 export default class Summary {
   dedicated_biz: number;
@@ -21,6 +19,7 @@ export default class Summary {
   city: string;
   spec_id?: number;
   spec_name?: string;
+  spec_cluster_type?: ClusterTypes;
   spec_machine_type?: MachineTypes;
   device_class?: string;
   disk_summary?: string;
@@ -34,6 +33,7 @@ export default class Summary {
     this.city = payload.city;
     this.spec_id = payload.spec_id;
     this.spec_name = payload.spec_name;
+    this.spec_cluster_type = payload.spec_cluster_type;
     this.spec_machine_type = payload.spec_machine_type;
     this.device_class = payload.device_class;
     this.disk_summary = payload.disk_summary;
@@ -46,38 +46,13 @@ export default class Summary {
     return `${this.device_class} (${this.disk_summary})`;
   }
 
-  get spec_machine_display() {
-    const machineTypeMap: Record<MachineTypes, string> = {
-      [MachineTypes.SINGLE]: t('后端存储机型'),
-      [MachineTypes.SPIDER]: t('接入层Master'),
-      [MachineTypes.REMOTE]: t('后端存储规格'),
-      [MachineTypes.PROXY]: t('Proxy机型'),
-      [MachineTypes.BACKEND]: t('后端存储机型'),
-      [MachineTypes.PREDIXY]: t('Proxy机型'),
-      [MachineTypes.TWEMPROXY]: t('Proxy机型'),
-      [MachineTypes.INFLUXDB]: t('后端存储机型'),
-      [MachineTypes.RIAK]: t('后端存储机型'),
-      [MachineTypes.BROKER]: t('Broker节点规格'),
-      [MachineTypes.ZOOKEEPER]: t('Zookeeper节点规格'),
-      [MachineTypes.REDIS]: t('后端存储机型'),
-      [MachineTypes.TENDISCACHE]: t('后端存储机型'),
-      [MachineTypes.TENDISSSD]: t('后端存储机型'),
-      [MachineTypes.TENDISPLUS]: t('后端存储机型'),
-      [MachineTypes.ES_DATANODE]: t('冷_热节点规格'),
-      [MachineTypes.ES_MASTER]: t('Master节点规格'),
-      [MachineTypes.ES_CLIENT]: t('Client节点规格'),
-      [MachineTypes.HDFS_MASTER]: t('NameNode_Zookeeper_JournalNode节点规格'),
-      [MachineTypes.HDFS_DATANODE]: t('DataNode节点规格'),
-      [MachineTypes.MONGOS]: t('Mongos规格'),
-      [MachineTypes.MONGODB]: t('ShardSvr规格'),
-      [MachineTypes.MONGO_CONFIG]: t('ConfigSvr规格'),
-      [MachineTypes.SQLSERVER_HA]: t('后端存储机型'),
-      [MachineTypes.SQLSERVER_SINGLE]: t('后端存储机型'),
-      [MachineTypes.PULSAR_BROKER]: t('Broker节点规格'),
-      [MachineTypes.PULSAR_BOOKKEEPER]: t('Bookkeeper节点规格'),
-      [MachineTypes.PULSAR_ZOOKEEPER]: t('Zookeeper节点规格'),
-    };
-    return this.spec_machine_type ? machineTypeMap[this.spec_machine_type] : '';
+  get spec_type_display() {
+    if (!this.spec_cluster_type || !this.spec_machine_type) {
+      return '--';
+    }
+    const { name, machineList } = clusterTypeInfos[this.spec_cluster_type];
+    const matchMachine = machineList.find(({ id }) => id === this.spec_machine_type);
+    return matchMachine ? `${name} - ${matchMachine.name}` : '--';
   }
 
   get sub_zone_detail_display() {
diff --git a/dbm-ui/frontend/src/services/model/resource-spec/resourceSpec.ts b/dbm-ui/frontend/src/services/model/resource-spec/resourceSpec.ts
index 4217b007e6..61a2e7d899 100644
--- a/dbm-ui/frontend/src/services/model/resource-spec/resourceSpec.ts
+++ b/dbm-ui/frontend/src/services/model/resource-spec/resourceSpec.ts
@@ -12,6 +12,8 @@
  */
 import { differenceInSeconds } from 'date-fns';
 
+import type { ClusterTypes, DBTypes, MachineTypes } from '@common/const';
+
 import { utcDisplayTime } from '@utils';
 
 export default class ResourceSpec {
@@ -33,8 +35,9 @@ export default class ResourceSpec {
   creator: string;
   desc: string;
   enable: boolean;
-  spec_cluster_type: string;
-  spec_machine_type: string;
+  spec_db_type: DBTypes;
+  spec_cluster_type: ClusterTypes;
+  spec_machine_type: MachineTypes;
   spec_name: string;
   update_at: string;
   updater: string;
@@ -60,6 +63,7 @@ export default class ResourceSpec {
     this.creator = payload.creator;
     this.desc = payload.desc;
     this.enable = payload.enable;
+    this.spec_db_type = payload.spec_db_type;
     this.spec_cluster_type = payload.spec_cluster_type;
     this.spec_machine_type = payload.spec_machine_type;
     this.spec_name = payload.spec_name;
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/Index.vue
index 8916a77ad1..4d92293e69 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/Index.vue
@@ -23,9 +23,7 @@
       :name="item.name" />
   </BkTab>
   <div class="pool-content">
-    <KeepAlive>
-      <Component :is="renderComponent" />
-    </KeepAlive>
+    <Component :is="renderComponent" />
   </div>
 </template>
 
@@ -51,7 +49,7 @@
     },
   ];
 
-  const active = useDebouncedRef(route.query.tab || 'summary-view');
+  const active = useDebouncedRef((route.query.tab as string) || 'summary-view');
 
   const renderComponentMap = {
     'summary-view': SummaryView,
@@ -63,11 +61,7 @@
   watch(
     () => route.query,
     () => {
-      console.log(route.query, 'route.query');
-
-      if (route.query.tab) {
-        active.value = route.query.tab;
-      }
+      active.value = (route.query.tab as string) || 'summary-view';
     },
   );
 </script>
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/ForBiz.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/ForBiz.vue
index 55fbbc4180..6f80744fd9 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/ForBiz.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/ForBiz.vue
@@ -20,10 +20,6 @@
     :placeholder="t('请选择专用业务')"
     show-selected-icon
     @change="handleChange">
-    <BkOption
-      key="empty"
-      :label="t('无限制')"
-      :value="0" />
     <BkOption
       v-for="bizItem in bizList"
       :key="bizItem.bk_biz_id"
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/ResourceType.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/ResourceType.vue
index 9d9cce60b7..809fabce1b 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/ResourceType.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/ResourceType.vue
@@ -20,10 +20,6 @@
     :placeholder="t('请选择专用 DB')"
     show-selected-icon
     @change="handleChange">
-    <BkOption
-      key="empty"
-      :label="t('无限制')"
-      value="all" />
     <BkOption
       v-for="item in dbTypeList"
       :key="item.id"
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/SpecId.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/SpecId.vue
index 9f76911619..69f0007da6 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/SpecId.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/SpecId.vue
@@ -22,10 +22,10 @@
         style="width: 150px"
         @change="handleCluserChange">
         <BkOption
-          v-for="(item, index) in clusterList"
-          :key="`${item}#${index}`"
-          :label="item.label"
-          :value="item.name" />
+          v-for="item in Object.values(clusterTypeInfos)"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id" />
       </BkSelect>
       <BkSelect
         :key="currentCluster"
@@ -37,9 +37,9 @@
         style="width: 150px">
         <BkOption
           v-for="item in clusterMachineList"
-          :key="item.label"
-          :label="item.label"
-          :value="item.name" />
+          :key="item.id"
+          :label="item.name"
+          :value="item.id" />
       </BkSelect>
       <BkSelect
         :key="currentMachine"
@@ -47,7 +47,7 @@
         filterable
         :input-search="false"
         :loading="isResourceSpecListLoading"
-        :model-value="defaultValue || undefined"
+        :model-value="defaultValue"
         :placeholder="t('请选择匹配规格')"
         @change="handleChange">
         <BkOption
@@ -60,14 +60,13 @@
   </BkLoading>
 </template>
 <script setup lang="ts">
-  import _ from 'lodash';
   import { watch } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
   import { getResourceSpec, getResourceSpecList } from '@services/source/dbresourceSpec';
 
-  import { ClusterTypes } from '@common/const';
+  import { type ClusterTypeInfoItem, clusterTypeInfos, ClusterTypes } from '@common/const';
 
   interface Props {
     defaultValue?: number;
@@ -89,220 +88,23 @@
 
   const { t } = useI18n();
 
-  const clusterList = [
-    {
-      moduleId: 'mysql',
-      label: t('MySQL单节点'),
-      name: ClusterTypes.TENDBSINGLE,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'single',
-        },
-      ],
-    },
-    {
-      moduleId: 'mysql',
-      label: t('MySQL主从'),
-      name: ClusterTypes.TENDBHA,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'backend',
-        },
-        {
-          label: t('Proxy机型'),
-          name: 'proxy',
-        },
-      ],
-    },
-    {
-      moduleId: 'redis',
-      label: 'TendisCache',
-      name: ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'tendiscache',
-        },
-        {
-          label: t('Proxy机型'),
-          name: 'twemproxy',
-        },
-      ],
-    },
-    {
-      moduleId: 'redis',
-      label: 'TendisSSD',
-      name: ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'tendisssd',
-        },
-        {
-          label: t('Proxy机型'),
-          name: 'twemproxy',
-        },
-      ],
-    },
-    {
-      moduleId: 'redis',
-      label: 'Tendisplus',
-      name: ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'tendisplus',
-        },
-        {
-          label: t('Proxy机型'),
-          name: 'predixy',
-        },
-      ],
-    },
-    {
-      moduleId: 'redis',
-      label: 'RedisCluster',
-      name: ClusterTypes.PREDIXY_REDIS_CLUSTER,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'tendiscache',
-        },
-        {
-          label: t('Proxy机型'),
-          name: 'predixy',
-        },
-      ],
-    },
-    {
-      moduleId: 'redis',
-      label: t('Redis主从'),
-      name: ClusterTypes.REDIS_INSTANCE,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'tendiscache',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'ES',
-      name: ClusterTypes.ES,
-      children: [
-        {
-          label: t('Master节点规格'),
-          name: 'es_master',
-        },
-        {
-          label: t('Client节点规格'),
-          name: 'es_client',
-        },
-        {
-          label: t('冷_热节点规格'),
-          name: 'es_datanode',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'HDFS',
-      name: ClusterTypes.HDFS,
-      children: [
-        {
-          label: t('DataNode节点规格'),
-          name: 'hdfs_datanode',
-        },
-        {
-          label: t('NameNode_Zookeeper_JournalNode节点规格'),
-          name: 'hdfs_master',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'Kafka',
-      name: ClusterTypes.KAFKA,
-      children: [
-        {
-          label: t('Zookeeper节点规格'),
-          name: 'zookeeper',
-        },
-        {
-          label: t('Broker节点规格'),
-          name: 'broker',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'InfluxDB',
-      name: ClusterTypes.INFLUXDB,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'influxdb',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'Pulsar',
-      name: ClusterTypes.PULSAR,
-      children: [
-        {
-          label: t('Bookkeeper节点规格'),
-          name: 'pulsar_bookkeeper',
-        },
-        {
-          label: t('Zookeeper节点规格'),
-          name: 'pulsar_zookeeper',
-        },
-        {
-          label: t('Broker节点规格'),
-          name: 'pulsar_broker',
-        },
-      ],
-    },
-    {
-      moduleId: 'mysql',
-      label: 'TenDBCluster',
-      name: ClusterTypes.TENDBCLUSTER,
-      children: [
-        {
-          label: t('接入层Master'),
-          name: 'spider',
-        },
-        {
-          label: t('后端存储规格'),
-          name: 'remote',
-        },
-      ],
-    },
-  ];
-
   // 临时修复 bk-select 无法重置的问题
   const rerenderKey = ref(0);
 
   const currentCluster = ref('');
   const currentMachine = ref('');
-  const clusterMachineList = ref<Record<'label' | 'name', string>[]>([]);
+  const clusterMachineList = shallowRef<ClusterTypeInfoItem['machineList']>([]);
 
   const { loading: isResourceSpecLoading, run: fetchResourceSpecDetail } = useRequest(getResourceSpec, {
     manual: true,
     onSuccess(data) {
-      currentCluster.value = data.spec_cluster_type;
-
-      const clusterData = _.find(clusterList, (item) => item.name === currentCluster.value);
-      if (!clusterData) {
-        return;
-      }
-      currentMachine.value = data.spec_machine_type;
-      clusterMachineList.value = clusterData.children;
+      const { spec_cluster_type: clusterType, spec_machine_type: machineType } = data;
+      currentCluster.value = clusterType;
+      currentMachine.value = machineType;
+      clusterMachineList.value = clusterTypeInfos[clusterType]?.machineList || [];
     },
   });
+
   const {
     loading: isResourceSpecListLoading,
     data: resourceSpecList,
@@ -344,16 +146,10 @@
     },
   );
 
-  const handleCluserChange = () => {
-    const clusterData = _.find(clusterList, (item) => item.name === currentCluster.value);
-    defaultValue.value = 0;
+  const handleCluserChange = (value: ClusterTypes) => {
+    clusterMachineList.value = clusterTypeInfos[value]?.machineList || [];
     currentMachine.value = '';
-    if (!clusterData) {
-      clusterMachineList.value = [];
-      return;
-    }
-    currentMachine.value = clusterData.children[0].name;
-    clusterMachineList.value = clusterData.children;
+    defaultValue.value = '';
   };
 
   const handleChange = (value: Props['defaultValue']) => {
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/field-input/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/field-input/Index.vue
index c98eabdbdb..e6dd294f6f 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/field-input/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/field-input/Index.vue
@@ -195,9 +195,6 @@
   const handleChange = (name: string, value: any) => {
     const result = { ...localValueMemo.value };
     result[name] = value;
-
-    console.log(result[name], 'result[name]');
-
     localValueMemo.value = result;
     // 搜索项改变立即搜索
     handleSubmit();
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/Export.vue b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/Export.vue
index 792a2d2de7..ad5bb42c73 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/Export.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/Export.vue
@@ -13,12 +13,9 @@
 
   import type SummaryModel from '@services/model/db-resource/summary';
 
-  import { DBTypeInfos, type DBTypes } from '@common/const';
-
   interface Props {
     data: SummaryModel[];
     dimension: 'spec' | 'device_class';
-    dbType: DBTypes;
   }
 
   const props = defineProps<Props>();
@@ -44,7 +41,7 @@
         return props.data.map((item) => [
           item.for_biz_name,
           item.city,
-          `${DBTypeInfos[props.dbType].name} - ${item.spec_machine_display}`,
+          item.spec_type_display,
           item.spec_name,
           item.sub_zone_detail_display,
           item.count,
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/List.vue b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/List.vue
index 13df46191a..1bb85de12f 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/List.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/List.vue
@@ -14,7 +14,6 @@
         @change="handleChangeDimension" />
       <Export
         :data="tableData"
-        :db-type="currentDbType"
         :dimension="currentDimension" />
     </div>
     <BkLoading :loading="loading">
@@ -26,18 +25,15 @@
         <BkTableColumn
           :label="t('专用业务')"
           prop="for_biz_name"
-          :width="100" />
+          :width="150" />
         <BkTableColumn
           :label="t('地域')"
-          prop="city" />
+          prop="city"
+          :width="150" />
         <BkTableColumn
           v-if="isSpec"
           :label="t('规格类型')"
-          prop="spec_machine_display">
-          <template #default="{ row }">
-            {{ row.spec_machine_display ? `${DBTypeInfos[currentDbType].name} - ${row.spec_machine_display}` : '--' }}
-          </template>
-        </BkTableColumn>
+          prop="spec_type_display" />
         <BkTableColumn
           v-if="isSpec"
           :label="t('规格')"
@@ -91,7 +87,7 @@
   import type SummaryModel from '@services/model/db-resource/summary';
   import { getSummaryList } from '@services/source/dbresourceResource';
 
-  import { DBTypeInfos, DBTypes } from '@common/const';
+  import { DBTypes } from '@common/const';
 
   import DimensionSelect from './DimensionSelect.vue';
   import Export from './Export.vue';
@@ -102,7 +98,7 @@
 
   const searchRef = ref<InstanceType<typeof SearchBox>>();
   const currentDbType = ref(DBTypes.MYSQL);
-  const currentDimension = ref('spec');
+  const currentDimension = ref<'spec' | 'device_class'>('spec');
   const isSpec = computed(() => currentDimension.value === 'spec');
 
   const {
@@ -127,7 +123,7 @@
   };
 
   const handleChangeDimension = (value: string) => {
-    currentDimension.value = value;
+    currentDimension.value = value as 'spec' | 'device_class';
     fetchListData();
   };
 
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Biz.vue b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Biz.vue
index 78f4635e17..a8b7100d0d 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Biz.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Biz.vue
@@ -2,10 +2,6 @@
   <BkSelect
     v-model="modelValue"
     @change="handleChange">
-    <BkOption
-      key="default"
-      :label="t('无限制')"
-      :value="0" />
     <BkOption
       v-for="biz in data"
       :key="biz.bk_biz_id"
@@ -15,7 +11,6 @@
 </template>
 
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
   import { getBizs } from '@services/source/cmdb';
@@ -36,8 +31,6 @@
     default: 0,
   });
 
-  const { t } = useI18n();
-
   const { data } = useRequest(getBizs, {
     initialData: [],
   });
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Db.vue b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Db.vue
index 6bb9c283ca..5c1dd4b630 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Db.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Db.vue
@@ -4,14 +4,18 @@
     :clearable="false"
     @change="handleChange">
     <BkOption
-      v-for="dbType in DBTypes"
-      :key="dbType"
-      :label="dbType"
-      :value="dbType" />
+      v-for="item in dbTypeList"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id" />
   </BkSelect>
 </template>
 
 <script setup lang="ts">
+  import { useRequest } from 'vue-request';
+
+  import { fetchDbTypeList } from '@services/source/infras';
+
   import { DBTypes } from '@common/const';
 
   interface Emits {
@@ -31,6 +35,8 @@
     default: DBTypes.MYSQL,
   });
 
+  const { data: dbTypeList } = useRequest(fetchDbTypeList);
+
   const handleChange = (value: DBTypes) => {
     emits('change', value);
   };
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Region.vue b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Region.vue
index 442210567e..a97b589452 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Region.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Region.vue
@@ -2,8 +2,9 @@
   <BkComposeFormItem class="search-box-select-region">
     <BkSelect
       v-model="cityCode"
+      clearable
       style="width: 100px"
-      @change="handleChange">
+      @change="handleChangeCity">
       <BkOption
         v-for="item in citiyList"
         :key="item.city_code"
@@ -18,7 +19,7 @@
       multiple
       multiple-mode="tag"
       show-select-all
-      @change="handleChange">
+      @change="handleChangeSubzone">
       <BkOption
         v-for="item in subzoneList"
         :key="item.bk_sub_zone_id"
@@ -29,7 +30,6 @@
 </template>
 
 <script setup lang="ts">
-  import _ from 'lodash';
   import { useRequest } from 'vue-request';
 
   import { getInfrasCities, getInfrasSubzonesByCity } from '@services/source/infras';
@@ -62,9 +62,7 @@
   useRequest(getInfrasCities, {
     initialData: [],
     onSuccess(data) {
-      const cloneData = _.cloneDeep(data);
-      cloneData.unshift(cloneData.pop() as CityItem);
-      citiyList.value = cloneData;
+      citiyList.value = data.filter((item) => item.city_code !== 'default');
     },
   });
   const { data: subzoneList, run: fetchData } = useRequest(getInfrasSubzonesByCity, {
@@ -89,7 +87,12 @@
     },
   );
 
-  const handleChange = () => {
+  const handleChangeCity = () => {
+    subzoneIds.value = [];
+    emits('change');
+  };
+
+  const handleChangeSubzone = () => {
     emits('change');
   };
 
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Spec.vue b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Spec.vue
index 135106dc2f..59431b02af 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Spec.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/components/Spec.vue
@@ -5,10 +5,10 @@
       style="width: 150px"
       @change="handleChangeCluster">
       <BkOption
-        v-for="(item, index) in currentClusterList"
-        :key="`${item}#${index}`"
-        :label="item.label"
-        :value="item.name" />
+        v-for="item in currentClusterList"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id" />
     </BkSelect>
     <BkSelect
       :key="currentCluster"
@@ -18,9 +18,9 @@
       @change="handleChangeMachine">
       <BkOption
         v-for="item in clusterMachineList"
-        :key="item.label"
-        :label="item.label"
-        :value="item.name" />
+        :key="item.id"
+        :label="item.name"
+        :value="item.id" />
     </BkSelect>
     <BkSelect
       :key="currentMachine"
@@ -42,11 +42,9 @@
 </template>
 
 <script setup lang="ts">
-  import _ from 'lodash';
-  import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import { ClusterTypes, DBTypes, MachineTypes } from '@common/const';
+  import { type ClusterTypeInfoItem, clusterTypeInfos, ClusterTypes, DBTypes, MachineTypes } from '@common/const';
 
   import { getResourceSpecList } from '@/services/source/dbresourceSpec';
 
@@ -76,208 +74,14 @@
 
   const emits = defineEmits<Emits>();
 
-  const { t } = useI18n();
-
-  const clusterList = [
-    {
-      label: t('MySQL单节点'),
-      name: ClusterTypes.TENDBSINGLE,
-      dbType: DBTypes.MYSQL,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: MachineTypes.SINGLE,
-        },
-      ],
-    },
-    {
-      label: t('MySQL主从'),
-      name: ClusterTypes.TENDBHA,
-      dbType: DBTypes.MYSQL,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: MachineTypes.BACKEND,
-        },
-        {
-          label: t('Proxy机型'),
-          name: MachineTypes.PROXY,
-        },
-      ],
-    },
-    {
-      label: 'TenDBCluster',
-      name: ClusterTypes.TENDBCLUSTER,
-      dbType: DBTypes.TENDBCLUSTER,
-      children: [
-        {
-          label: t('接入层Master'),
-          name: MachineTypes.SPIDER,
-        },
-        {
-          label: t('后端存储规格'),
-          name: MachineTypes.REMOTE,
-        },
-      ],
-    },
-    {
-      label: 'TendisCache',
-      name: ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
-      dbType: DBTypes.REDIS,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: MachineTypes.TENDISCACHE,
-        },
-        {
-          label: t('Proxy机型'),
-          name: MachineTypes.TWEMPROXY,
-        },
-      ],
-    },
-    {
-      label: 'TendisSSD',
-      name: ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
-      dbType: DBTypes.REDIS,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: MachineTypes.TENDISSSD,
-        },
-        {
-          label: t('Proxy机型'),
-          name: MachineTypes.TWEMPROXY,
-        },
-      ],
-    },
-    {
-      label: 'Tendisplus',
-      name: ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
-      dbType: DBTypes.REDIS,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: MachineTypes.TENDISPLUS,
-        },
-        {
-          label: t('Proxy机型'),
-          name: MachineTypes.PREDIXY,
-        },
-      ],
-    },
-    {
-      label: 'RedisCluster',
-      name: ClusterTypes.PREDIXY_REDIS_CLUSTER,
-      dbType: DBTypes.REDIS,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: MachineTypes.TENDISCACHE,
-        },
-        {
-          label: t('Proxy机型'),
-          name: MachineTypes.PREDIXY,
-        },
-      ],
-    },
-    {
-      label: t('Redis主从'),
-      name: ClusterTypes.REDIS_INSTANCE,
-      dbType: DBTypes.REDIS,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: MachineTypes.TENDISCACHE,
-        },
-      ],
-    },
-    {
-      label: 'ES',
-      name: ClusterTypes.ES,
-      dbType: DBTypes.ES,
-      children: [
-        {
-          label: t('Master节点规格'),
-          name: MachineTypes.ES_MASTER,
-        },
-        {
-          label: t('Client节点规格'),
-          name: MachineTypes.ES_CLIENT,
-        },
-        {
-          label: t('冷_热节点规格'),
-          name: MachineTypes.ES_DATANODE,
-        },
-      ],
-    },
-    {
-      label: 'HDFS',
-      name: ClusterTypes.HDFS,
-      dbType: DBTypes.HDFS,
-      children: [
-        {
-          label: t('DataNode节点规格'),
-          name: MachineTypes.HDFS_DATANODE,
-        },
-        {
-          label: t('NameNode_Zookeeper_JournalNode节点规格'),
-          name: MachineTypes.HDFS_MASTER,
-        },
-      ],
-    },
-    {
-      label: 'Kafka',
-      name: ClusterTypes.KAFKA,
-      dbType: DBTypes.KAFKA,
-      children: [
-        {
-          label: t('Zookeeper节点规格'),
-          name: MachineTypes.ZOOKEEPER,
-        },
-        {
-          label: t('Broker节点规格'),
-          name: MachineTypes.BROKER,
-        },
-      ],
-    },
-    {
-      label: 'InfluxDB',
-      name: ClusterTypes.INFLUXDB,
-      dbType: DBTypes.INFLUXDB,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: MachineTypes.INFLUXDB,
-        },
-      ],
-    },
-    {
-      label: 'Pulsar',
-      name: ClusterTypes.PULSAR,
-      dbType: DBTypes.PULSAR,
-      children: [
-        {
-          label: t('Bookkeeper节点规格'),
-          name: MachineTypes.PULSAR_BOOKKEEPER,
-        },
-        {
-          label: t('Zookeeper节点规格'),
-          name: MachineTypes.PULSAR_ZOOKEEPER,
-        },
-        {
-          label: t('Broker节点规格'),
-          name: MachineTypes.PULSAR_BROKER,
-        },
-      ],
-    },
-  ];
-
   const currentCluster = ref('');
   const currentMachine = ref('');
   const currentSpecIdList = ref<number[]>([]);
-  const clusterMachineList = ref<Record<'label' | 'name', string>[]>([]);
+  const clusterMachineList = ref<ClusterTypeInfoItem['machineList']>([]);
 
-  const currentClusterList = computed(() => clusterList.filter((item) => item.dbType === props.dbType));
+  const currentClusterList = computed(
+    () => Object.values(clusterTypeInfos).filter((item) => item.dbType === props.dbType) || [],
+  );
 
   const {
     loading: isResourceSpecListLoading,
@@ -301,12 +105,7 @@
   );
 
   const handleChangeCluster = (value: ClusterTypes) => {
-    const clusterData = _.find(clusterList, (item) => item.name === value);
-    if (!clusterData) {
-      clusterMachineList.value = [];
-      return;
-    }
-    clusterMachineList.value = clusterData.children;
+    clusterMachineList.value = clusterTypeInfos[value]?.machineList || [];
     emits('change');
   };
 
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/Index.vue b/dbm-ui/frontend/src/views/resource-manage/spec/Index.vue
index 494602ab6b..915bbd4fb0 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/Index.vue
@@ -24,9 +24,9 @@
         type="card">
         <BkTabPanel
           v-for="childTab of childrenTabs"
-          :key="childTab.name"
-          :label="childTab.label"
-          :name="childTab.name" />
+          :key="childTab.id"
+          :label="childTab.name"
+          :name="childTab.id" />
       </BkTab>
       <SpecList
         :cluster-type="curTab"
@@ -37,323 +37,30 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  import type {
-    ControllerBaseInfo,
-    ExtractedControllerDataKeys,
-    FunctionKeys,
-  } from '@services/model/function-controller/functionController';
+  import type { ControllerBaseInfo } from '@services/model/function-controller/functionController';
 
   import { useFunController } from '@stores';
 
-  import { ClusterTypes } from '@common/const';
+  import { clusterTypeInfos, ClusterTypes } from '@common/const';
 
   import ClusterTab from '@components/cluster-tab/Index.vue';
 
   import SpecList from './components/SpecList.vue';
 
-  interface TabItem {
-    moduleId: ExtractedControllerDataKeys;
-    label: string;
-    name: FunctionKeys;
-    children: {
-      label: string;
-      name: string;
-    }[];
-  }
-
-  const { t } = useI18n();
   const route = useRoute();
   const funControllerStore = useFunController();
 
-  const tabs: TabItem[] = [
-    {
-      moduleId: 'mysql',
-      label: t('MySQL单节点'),
-      name: ClusterTypes.TENDBSINGLE,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'single',
-        },
-      ],
-    },
-    {
-      moduleId: 'mysql',
-      label: t('MySQL主从'),
-      name: ClusterTypes.TENDBHA,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'backend',
-        },
-        {
-          label: t('Proxy机型'),
-          name: 'proxy',
-        },
-      ],
-    },
-    {
-      moduleId: 'redis',
-      label: 'TendisCache',
-      name: ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'tendiscache',
-        },
-        {
-          label: t('Proxy机型'),
-          name: 'twemproxy',
-        },
-      ],
-    },
-    {
-      moduleId: 'redis',
-      label: 'TendisSSD',
-      name: ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'tendisssd',
-        },
-        {
-          label: t('Proxy机型'),
-          name: 'twemproxy',
-        },
-      ],
-    },
-    {
-      moduleId: 'redis',
-      label: 'Tendisplus',
-      name: ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'tendisplus',
-        },
-        {
-          label: t('Proxy机型'),
-          name: 'predixy',
-        },
-      ],
-    },
-    {
-      moduleId: 'redis',
-      label: 'RedisCluster',
-      name: ClusterTypes.PREDIXY_REDIS_CLUSTER,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'tendiscache',
-        },
-        {
-          label: t('Proxy机型'),
-          name: 'predixy',
-        },
-      ],
-    },
-    {
-      moduleId: 'redis',
-      label: t('Redis主从'),
-      name: ClusterTypes.REDIS_INSTANCE,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'tendiscache',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'ES',
-      name: ClusterTypes.ES,
-      children: [
-        {
-          label: t('Master节点规格'),
-          name: 'es_master',
-        },
-        {
-          label: t('Client节点规格'),
-          name: 'es_client',
-        },
-        {
-          label: t('冷_热节点规格'),
-          name: 'es_datanode',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'HDFS',
-      name: ClusterTypes.HDFS,
-      children: [
-        {
-          label: t('DataNode节点规格'),
-          name: 'hdfs_datanode',
-        },
-        {
-          label: t('NameNode_Zookeeper_JournalNode节点规格'),
-          name: 'hdfs_master',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'Kafka',
-      name: ClusterTypes.KAFKA,
-      children: [
-        {
-          label: t('Zookeeper节点规格'),
-          name: 'zookeeper',
-        },
-        {
-          label: t('Broker节点规格'),
-          name: 'broker',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'InfluxDB',
-      name: ClusterTypes.INFLUXDB,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'influxdb',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'Pulsar',
-      name: ClusterTypes.PULSAR,
-      children: [
-        {
-          label: t('Bookkeeper节点规格'),
-          name: 'pulsar_bookkeeper',
-        },
-        {
-          label: t('Zookeeper节点规格'),
-          name: 'pulsar_zookeeper',
-        },
-        {
-          label: t('Broker节点规格'),
-          name: 'pulsar_broker',
-        },
-      ],
-    },
-    {
-      moduleId: 'mysql',
-      label: 'TenDBCluster',
-      name: ClusterTypes.TENDBCLUSTER,
-      children: [
-        {
-          label: t('接入层Master'),
-          name: 'spider',
-        },
-        {
-          label: t('后端存储规格'),
-          name: 'remote',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'Riak',
-      name: ClusterTypes.RIAK,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'riak',
-        },
-      ],
-    },
-    {
-      moduleId: 'mongodb',
-      label: t('Mongo副本集'),
-      name: ClusterTypes.MONGO_REPLICA_SET,
-      children: [
-        {
-          label: t('Mongodb规格'),
-          name: 'mongodb',
-        },
-      ],
-    },
-    {
-      moduleId: 'mongodb',
-      label: t('Mongo分片集'),
-      name: ClusterTypes.MONGO_SHARED_CLUSTER,
-      children: [
-        {
-          label: t('ConfigSvr规格'),
-          name: 'mongo_config',
-        },
-        {
-          label: t('Mongos规格'),
-          name: 'mongos',
-        },
-        {
-          label: t('ShardSvr规格'),
-          name: 'mongodb',
-        },
-      ],
-    },
-    {
-      moduleId: 'sqlserver',
-      label: t('SQLServer单节点'),
-      name: ClusterTypes.SQLSERVER_SINGLE,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'sqlserver_single',
-        },
-      ],
-    },
-    {
-      moduleId: 'sqlserver',
-      label: t('SQLServer主从'),
-      name: ClusterTypes.SQLSERVER_HA,
-      children: [
-        {
-          label: t('后端存储机型'),
-          name: 'sqlserver_ha',
-        },
-      ],
-    },
-    {
-      moduleId: 'bigdata',
-      label: 'Doris',
-      name: ClusterTypes.DORIS,
-      children: [
-        {
-          label: t('Follower节点规格'),
-          name: 'doris_follower',
-        },
-        {
-          label: t('Observer节点规格'),
-          name: 'doris_observer',
-        },
-        {
-          label: t('冷_热节点规格'),
-          name: 'doris_backend',
-        },
-      ],
-    },
-  ];
-
   const curTab = ref<ClusterTypes>(ClusterTypes.TENDBSINGLE);
   const curChildTab = ref('');
 
   const renderTabs = computed(() =>
-    tabs.filter((item) => {
+    Object.values(clusterTypeInfos).filter((item) => {
       const data = funControllerStore.funControllerData[item.moduleId];
       if (!data) {
         return false;
       }
 
-      const childItem = (data.children as Record<TabItem['name'], ControllerBaseInfo>)[item.name];
+      const childItem = (data.children as Record<ClusterTypes, ControllerBaseInfo>)[item.id];
 
       // 若有对应的模块子功能，判断是否开启
       if (childItem) {
@@ -364,11 +71,9 @@
       return data && data.is_enabled;
     }),
   );
-  const childrenTabs = computed(() => renderTabs.value.find((item) => item.name === curTab.value)?.children || []);
-  const clusterTypeLabel = computed(() => renderTabs.value.find((item) => item.name === curTab.value)?.label ?? '');
-  const machineTypeLabel = computed(
-    () => childrenTabs.value.find((item) => item.name === curChildTab.value)?.label ?? '',
-  );
+  const childrenTabs = computed(() => renderTabs.value.find((item) => item.id === curTab.value)?.machineList || []);
+  const clusterTypeLabel = computed(() => renderTabs.value.find((item) => item.id === curTab.value)?.name ?? '');
+  const machineTypeLabel = computed(() => childrenTabs.value.find((item) => item.id === curChildTab.value)?.name ?? '');
 
   watch(curTab, (newVal, oldVal) => {
     if (oldVal !== newVal) {