From 17ec2e0b9053f7408e0e90886d0d7eb2c881a64f Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Tue, 5 Nov 2024 17:05:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E8=A7=84=E6=A0=BC=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E7=9A=84=E6=8E=A5=E5=8F=A3=E4=B8=8E=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=20#6955=20#=20Reviewed,=20transaction=20id:?=
 =?UTF-8?q?=2023064?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/const/clusterTypeInfos.ts      | 159 ++++++-----
 .../frontend/src/common/const/dbTypeInfos.ts  | 138 ++++++++-
 .../frontend/src/common/const/machineTypes.ts |  58 ++--
 .../render-table/columns/input/index.vue      |  16 +-
 dbm-ui/frontend/src/locales/en.json           |   2 +-
 dbm-ui/frontend/src/locales/zh-cn.json        |  21 +-
 .../services/model/db-resource/DbResource.ts  |   2 +-
 .../src/services/model/db-resource/summary.ts |  13 +-
 .../src/services/source/dbresourceResource.ts |  27 +-
 dbm-ui/frontend/src/types/auto-imports.d.ts   |   2 +-
 .../common/apply-items/BackendQPSSpec.vue     |   8 +-
 .../common/apply-items/SpecSelector.vue       |  24 +-
 .../cluster-spec-plan-selector/Index.vue      |   2 +-
 .../page1/components/ChooseDeployPlan.vue     |   3 +-
 .../mongodb/components/MongoConfigSpec.vue    |   5 +-
 .../db-replace/pages/page1/components/Row.vue |   2 +-
 .../page1/components/RenderTargetSpec.vue     |   2 +-
 .../proxy-scale-up/pages/page1/Index.vue      |   2 +-
 .../mongodb/replica-set-apply/Index.vue       |   2 +-
 .../mongodb/shared-cluster-apply/Index.vue    |   4 +-
 .../db-manage/mysql/apply/ApplyMySQL.vue      |  10 +-
 .../views/db-manage/redis/apply-ha/Index.vue  |   6 +-
 .../db-manage/redis/apply/ApplyRedis.vue      |  16 +-
 .../apply/components/backend-spec/Index.vue   |   2 +-
 .../backend-spec/components/CustomSchema.vue  |   2 +-
 .../capacity-change/pages/page1/Index.vue     |   6 +-
 .../page1/components/ClusterDeployPlan.vue    |   8 +-
 .../pages/page1/Index.vue                     |   2 +-
 .../common/cluster-deploy-plan/Index.vue      |   8 +-
 .../src/views/db-manage/redis/common/const.ts |  15 +-
 .../pages/page1/components/Row.vue            |  33 +--
 .../db-manage/sqlserver/apply/SqlServer.vue   |   4 +-
 .../db-manage/tendb-cluster/apply/Index.vue   |   6 +-
 .../RenderData/RenderTargetResourceSpec.vue   |   2 +-
 .../common/spec-panel-select/Index.vue        |  61 ++--
 .../list/components/CapacityChange.vue        |   2 +-
 .../proxy-scale-up/pages/page1/Index.vue      |   2 +-
 .../render-data/RenderNewSlaveHost.vue        |   2 +-
 .../src/views/deployment-plan/list/Index.vue  |   6 +-
 .../src/views/resource-manage/pool/Index.vue  |   2 +-
 .../resource-manage/pool/host-list/Index.vue  |   4 +-
 .../components/batch-setting/Index.vue        |   6 +-
 .../import-host/components/FormPanel.vue      |   6 +-
 .../host-list/components/search-box/Index.vue |   4 +
 .../com-factory/components/DeviceClass.vue    |  46 ++-
 .../com-factory/components/SpecId.vue         |  66 +++--
 .../components/CollectSearchParams.vue        |   2 +-
 .../components/search-box/Index.vue           |  53 ++--
 .../components/search-box/components/Biz.vue  |  18 +-
 .../components/search-box/components/Db.vue   |  18 +-
 .../search-box/components/Region.vue          |  31 +--
 .../components/search-box/components/Spec.vue |  85 +++---
 .../src/views/resource-manage/spec/Index.vue  |  30 +-
 .../spec/components/SpecCreate.vue            | 164 +++++------
 .../spec/components/SpecList.vue              | 108 ++++----
 .../components/spec-form-item/SpecCPU.vue     |   8 +-
 .../components/spec-form-item/SpecDevice.vue  |  85 ++++--
 .../components/spec-form-item/SpecMem.vue     |  14 +-
 .../components/spec-form-item/SpecStorage.vue |   4 +-
 .../spec-device-or-cpu-mem/Index.vue          | 207 ++++++++++++++
 .../components/SpecCPU.vue                    | 112 ++++++++
 .../components/SpecDevice.vue                 | 250 +++++++++++++++++
 .../components/SpecMem.vue                    | 117 ++++++++
 .../spec-form-item/spec-storage/Index.vue     | 146 ++++++++++
 .../spec-storage/components/RenderTable.vue   |  52 ++++
 .../spec-storage/components/Row.vue           | 261 ++++++++++++++++++
 .../spec-form-item/specFormItem.less          |   8 +-
 .../resource-manage/spec/hooks/useHasQPS.ts   |   6 +-
 .../bigdata/RiakExpansionCapacity.vue         |   2 +-
 .../redis/ClusterShardUpdate.vue              |  18 +-
 .../redis/ClusterTypeUpdate.vue               |  29 +-
 .../demand-factory/spider/AddNodes.vue        |  24 +-
 .../demand-factory/spider/NodeRebalance.vue   |  22 +-
 .../demand-factory/spider/ReduceNodes.vue     |  26 +-
 .../demand-factory/spider/SlaveApply.vue      |  24 +-
 75 files changed, 2065 insertions(+), 678 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecCPU.vue
 create mode 100644 dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecDevice.vue
 create mode 100644 dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecMem.vue
 create mode 100644 dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/components/RenderTable.vue
 create mode 100644 dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/components/Row.vue

diff --git a/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts b/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
index 417cae0033..1a9c8785ee 100644
--- a/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
+++ b/dbm-ui/frontend/src/common/const/clusterTypeInfos.ts
@@ -9,6 +9,7 @@ import { MachineTypes } from './machineTypes';
 export interface ClusterTypeInfoItem {
   id: ClusterTypes;
   name: string;
+  specClusterName: string; // 规格对应的集群名，磨平集群类型差异
   dbType: DBTypes;
   moduleId: ExtractedControllerDataKeys;
   machineList: {
@@ -27,28 +28,34 @@ const mysql: InfoType = {
   [ClusterTypes.TENDBSINGLE]: {
     id: ClusterTypes.TENDBSINGLE,
     name: t('MySQL单节点'),
+    specClusterName: 'MySQL',
     dbType: DBTypes.MYSQL,
     moduleId: 'mysql',
     machineList: [
       {
-        id: MachineTypes.SINGLE,
-        name: t('后端存储机型'),
+        id: MachineTypes.MYSQL_PROXY,
+        name: 'Proxy',
+      },
+      {
+        id: MachineTypes.MYSQL_BACKEND,
+        name: t('后端存储'),
       },
     ],
   },
   [ClusterTypes.TENDBHA]: {
     id: ClusterTypes.TENDBHA,
     name: t('MySQL主从'),
+    specClusterName: 'MySQL',
     dbType: DBTypes.MYSQL,
     moduleId: 'mysql',
     machineList: [
       {
-        id: MachineTypes.BACKEND,
-        name: t('后端存储机型'),
+        id: MachineTypes.MYSQL_PROXY,
+        name: 'Proxy',
       },
       {
-        id: MachineTypes.PROXY,
-        name: t('Proxy机型'),
+        id: MachineTypes.MYSQL_BACKEND,
+        name: t('后端存储'),
       },
     ],
   },
@@ -58,16 +65,17 @@ const spider: InfoType = {
   [ClusterTypes.TENDBCLUSTER]: {
     id: ClusterTypes.TENDBCLUSTER,
     name: 'TenDBCluster',
+    specClusterName: 'TenDBCluster',
     dbType: DBTypes.TENDBCLUSTER,
     moduleId: 'mysql',
     machineList: [
       {
-        id: MachineTypes.SPIDER,
+        id: MachineTypes.TENDBCLUSTER_PROXY,
         name: t('接入层Master'),
       },
       {
-        id: MachineTypes.REMOTE,
-        name: t('后端存储规格'),
+        id: MachineTypes.TENDBCLUSTER_BACKEND,
+        name: t('后端存储'),
       },
     ],
   },
@@ -77,76 +85,81 @@ const redis: InfoType = {
   [ClusterTypes.TWEMPROXY_REDIS_INSTANCE]: {
     id: ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
     name: 'TendisCache',
+    specClusterName: 'Redis',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
     machineList: [
       {
-        id: MachineTypes.TENDISCACHE,
-        name: t('后端存储机型'),
+        id: MachineTypes.REDIS_TENDIS_CACHE,
+        name: t('TendisCache/RedisCluster/Redis主从 后端存储'),
       },
       {
-        id: MachineTypes.TWEMPROXY,
-        name: t('Proxy机型'),
+        id: MachineTypes.REDIS_PROXY,
+        name: 'Proxy',
       },
     ],
   },
   [ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE]: {
     id: ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
     name: 'TendisSSD',
+    specClusterName: 'Redis',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
     machineList: [
       {
-        id: MachineTypes.TENDISSSD,
-        name: t('后端存储机型'),
+        id: MachineTypes.REDIS_TENDIS_CACHE,
+        name: t('TendisCache/RedisCluster/Redis主从 后端存储'),
       },
       {
-        id: MachineTypes.TWEMPROXY,
-        name: t('Proxy机型'),
+        id: MachineTypes.REDIS_PROXY,
+        name: 'Proxy',
       },
     ],
   },
   [ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER]: {
     id: ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
     name: 'Tendisplus',
+    specClusterName: 'Redis',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
     machineList: [
       {
-        id: MachineTypes.TENDISPLUS,
-        name: t('后端存储机型'),
+        id: MachineTypes.REDIS_TENDIS_PLUS,
+        name: t('TendisPlus后端存储'),
       },
       {
-        id: MachineTypes.PREDIXY,
-        name: t('Proxy机型'),
+        id: MachineTypes.REDIS_PROXY,
+        name: 'Proxy',
       },
     ],
   },
   [ClusterTypes.PREDIXY_REDIS_CLUSTER]: {
     id: ClusterTypes.PREDIXY_REDIS_CLUSTER,
     name: 'RedisCluster',
+    specClusterName: 'Redis',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
     machineList: [
       {
-        id: MachineTypes.TENDISCACHE,
-        name: t('后端存储机型'),
+        id: MachineTypes.REDIS_TENDIS_CACHE,
+        name: t('TendisCache/RedisCluster/Redis主从 后端存储'),
       },
       {
-        id: MachineTypes.PREDIXY,
-        name: t('Proxy机型'),
+        id: MachineTypes.REDIS_PROXY,
+        name: 'Proxy',
       },
     ],
   },
   [ClusterTypes.REDIS_INSTANCE]: {
     id: ClusterTypes.REDIS_INSTANCE,
     name: t('Redis主从'),
+    specClusterName: 'Redis',
     dbType: DBTypes.REDIS,
     moduleId: 'redis',
     machineList: [
       {
-        id: MachineTypes.TENDISCACHE,
-        name: t('后端存储机型'),
+        id: MachineTypes.REDIS_TENDIS_CACHE,
+        name: t('TendisCache/RedisCluster/Redis主从 后端存储'),
       },
     ],
   },
@@ -156,58 +169,62 @@ const bigdata: InfoType = {
   [ClusterTypes.ES]: {
     id: ClusterTypes.ES,
     name: 'ElasticSearch',
+    specClusterName: 'ElasticSearch',
     dbType: DBTypes.ES,
     moduleId: 'bigdata',
     machineList: [
       {
         id: MachineTypes.ES_MASTER,
-        name: t('Master节点规格'),
+        name: t('Master节点'),
       },
       {
         id: MachineTypes.ES_CLIENT,
-        name: t('Client节点规格'),
+        name: t('Client节点'),
       },
       {
         id: MachineTypes.ES_DATANODE,
-        name: t('冷_热节点规格'),
+        name: t('冷_热节点'),
       },
     ],
   },
   [ClusterTypes.KAFKA]: {
     id: ClusterTypes.KAFKA,
     name: 'Kafka',
+    specClusterName: 'Kafka',
     dbType: DBTypes.KAFKA,
     moduleId: 'bigdata',
     machineList: [
       {
-        id: MachineTypes.ZOOKEEPER,
-        name: t('Zookeeper节点规格'),
+        id: MachineTypes.KAFKA_ZOOKEEPER,
+        name: t('Zookeeper节点'),
       },
       {
-        id: MachineTypes.BROKER,
-        name: t('Broker节点规格'),
+        id: MachineTypes.KAFKA_BROKER,
+        name: t('Broker节点'),
       },
     ],
   },
   [ClusterTypes.HDFS]: {
     id: ClusterTypes.HDFS,
     name: 'HDFS',
+    specClusterName: 'HDFS',
     dbType: DBTypes.HDFS,
     moduleId: 'bigdata',
     machineList: [
       {
         id: MachineTypes.HDFS_DATANODE,
-        name: t('DataNode节点规格'),
+        name: t('DataNode节点'),
       },
       {
         id: MachineTypes.HDFS_MASTER,
-        name: t('NameNode_Zookeeper_JournalNode节点规格'),
+        name: t('NameNode_Zookeeper_JournalNode节点'),
       },
     ],
   },
   [ClusterTypes.INFLUXDB]: {
     id: ClusterTypes.INFLUXDB,
     name: 'InfuxDB',
+    specClusterName: 'InfuxDB',
     dbType: DBTypes.INFLUXDB,
     moduleId: 'bigdata',
     machineList: [
@@ -220,42 +237,44 @@ const bigdata: InfoType = {
   [ClusterTypes.PULSAR]: {
     id: ClusterTypes.PULSAR,
     name: 'Pulsar',
+    specClusterName: 'Pulsar',
     dbType: DBTypes.PULSAR,
     moduleId: 'bigdata',
     machineList: [
       {
         id: MachineTypes.PULSAR_BOOKKEEPER,
-        name: t('Bookkeeper节点规格'),
+        name: t('Bookkeeper节点'),
       },
       {
         id: MachineTypes.PULSAR_ZOOKEEPER,
-        name: t('Zookeeper节点规格'),
+        name: t('Zookeeper节点'),
       },
       {
         id: MachineTypes.PULSAR_BROKER,
-        name: t('Broker节点规格'),
+        name: t('Broker节点'),
+      },
+    ],
+  },
+  [ClusterTypes.DORIS]: {
+    id: ClusterTypes.DORIS,
+    name: 'Doris',
+    specClusterName: 'Doris',
+    dbType: DBTypes.DORIS,
+    moduleId: 'bigdata',
+    machineList: [
+      {
+        id: MachineTypes.DORIS_FOLLOWER,
+        name: t('Follower节点规格'),
+      },
+      {
+        id: MachineTypes.DORIS_OBSERVER,
+        name: t('Observer节点规格'),
+      },
+      {
+        id: MachineTypes.DORIS_BACKEND,
+        name: t('冷_热节点规格'),
       },
     ],
-    [ClusterTypes.DORIS]: {
-      id: ClusterTypes.DORIS,
-      name: 'Doris',
-      dbType: DBTypes.DORIS,
-      moduleId: 'bigdata',
-      machineList: [
-        {
-          id: MachineTypes.DORIS_FOLLOWER,
-          name: t('Follower节点规格'),
-        },
-        {
-          id: MachineTypes.DORIS_OBSERVER,
-          name: t('Observer节点规格'),
-        },
-        {
-          id: MachineTypes.DORIS_BACKEND,
-          name: t('冷_热节点规格'),
-        },
-      ],
-    },
   },
 };
 
@@ -263,32 +282,34 @@ const mongodb: InfoType = {
   [ClusterTypes.MONGO_REPLICA_SET]: {
     id: ClusterTypes.MONGO_REPLICA_SET,
     name: t('Mongo副本集'),
+    specClusterName: 'MongoDB',
     dbType: DBTypes.MONGODB,
     moduleId: 'mongodb',
     machineList: [
       {
         id: MachineTypes.MONGODB,
-        name: t('Mongodb规格'),
+        name: '副本集/ShardSvr',
       },
     ],
   },
   [ClusterTypes.MONGO_SHARED_CLUSTER]: {
     id: ClusterTypes.MONGO_SHARED_CLUSTER,
-    name: t('Mongo 分片集群'),
+    name: t('Mongo分片集'),
+    specClusterName: 'MongoDB',
     dbType: DBTypes.MONGODB,
     moduleId: 'mongodb',
     machineList: [
       {
         id: MachineTypes.MONGOS,
-        name: t('Mongos规格'),
+        name: 'Mongos',
       },
       {
         id: MachineTypes.MONGODB,
-        name: t('ConfigSvr规格'),
+        name: '副本集/ShardSvr',
       },
       {
         id: MachineTypes.MONGO_CONFIG,
-        name: t('ShardSvr规格'),
+        name: 'ConfigSvr',
       },
     ],
   },
@@ -298,24 +319,26 @@ const sqlserver: InfoType = {
   [ClusterTypes.SQLSERVER_SINGLE]: {
     id: ClusterTypes.SQLSERVER_SINGLE,
     name: t('SQLServer单节点'),
+    specClusterName: 'SQLServer',
     dbType: DBTypes.SQLSERVER,
     moduleId: 'sqlserver',
     machineList: [
       {
-        id: MachineTypes.SQLSERVER_SINGLE,
-        name: t('单节点规格'),
+        id: MachineTypes.SQLSERVER,
+        name: t('后端存储'),
       },
     ],
   },
   [ClusterTypes.SQLSERVER_HA]: {
     id: ClusterTypes.SQLSERVER_HA,
     name: t('SQLServer主从'),
+    specClusterName: 'SQLServer',
     dbType: DBTypes.SQLSERVER,
     moduleId: 'sqlserver',
     machineList: [
       {
-        id: MachineTypes.SQLSERVER_HA,
-        name: t('主从规格'),
+        id: MachineTypes.SQLSERVER,
+        name: t('后端存储'),
       },
     ],
   },
diff --git a/dbm-ui/frontend/src/common/const/dbTypeInfos.ts b/dbm-ui/frontend/src/common/const/dbTypeInfos.ts
index 9eee2db5ee..7789d99bf4 100644
--- a/dbm-ui/frontend/src/common/const/dbTypeInfos.ts
+++ b/dbm-ui/frontend/src/common/const/dbTypeInfos.ts
@@ -1,15 +1,24 @@
 import type { ExtractedControllerDataKeys } from '@services/model/function-controller/functionController';
 
+import { t } from '@locales/index';
+
 import { DBTypes } from './dbTypes';
+import { MachineTypes } from './machineTypes';
 
-interface InfoItem {
+export interface InfoItem {
   id: DBTypes;
   name: string;
   moduleId: ExtractedControllerDataKeys;
+  machineList: {
+    label: string;
+    value: MachineTypes;
+  }[];
 }
+
 type InfoType = {
   [x in DBTypes]?: InfoItem;
 };
+
 type RequiredInfoType = {
   [x in DBTypes]: InfoItem;
 };
@@ -19,11 +28,31 @@ const mysql: InfoType = {
     id: DBTypes.MYSQL,
     name: 'MySQL',
     moduleId: 'mysql',
+    machineList: [
+      {
+        label: 'Proxy',
+        value: MachineTypes.MYSQL_PROXY,
+      },
+      {
+        label: t('后端存储'),
+        value: MachineTypes.MYSQL_BACKEND,
+      },
+    ],
   },
   [DBTypes.TENDBCLUSTER]: {
     id: DBTypes.TENDBCLUSTER,
     name: 'TenDBCluster',
     moduleId: 'mysql',
+    machineList: [
+      {
+        label: t('接入层Master'),
+        value: MachineTypes.TENDBCLUSTER_PROXY,
+      },
+      {
+        label: t('后端存储'),
+        value: MachineTypes.TENDBCLUSTER_BACKEND,
+      },
+    ],
   },
 };
 const redis: InfoType = {
@@ -31,6 +60,32 @@ const redis: InfoType = {
     id: DBTypes.REDIS,
     name: 'Redis',
     moduleId: 'redis',
+    machineList: [
+      {
+        label: 'Proxy',
+        value: MachineTypes.REDIS_PROXY,
+      },
+      {
+        label: t('TendisCache/RedisCluster/Redis主从 后端存储'),
+        value: MachineTypes.REDIS_TENDIS_CACHE,
+      },
+      {
+        label: t('TendisSSD后端存储'),
+        value: MachineTypes.REDIS_TENDIS_SSD,
+      },
+      {
+        label: t('TendisPlus后端存储'),
+        value: MachineTypes.REDIS_TENDIS_PLUS,
+      },
+      // {
+      //   label: 'RedisCluster',
+      //   value: MachineTypes.REDIS_CLUSTER, // 合入 REDIS_TENDIS_CACHE except 部署方案维持
+      // },
+      // {
+      //   label: t('Redis主从'),
+      //   value: MachineTypes.REDIS_INSTANCE, // 合入 REDIS_TENDIS_CACHE
+      // },
+    ],
   },
 };
 const mongo: InfoType = {
@@ -38,6 +93,20 @@ const mongo: InfoType = {
     id: DBTypes.MONGODB,
     name: 'MongoDB',
     moduleId: 'mongodb',
+    machineList: [
+      {
+        label: 'ConfigSvr',
+        value: MachineTypes.MONGO_CONFIG,
+      },
+      {
+        label: 'Mongos',
+        value: MachineTypes.MONGOS,
+      },
+      {
+        label: t('副本集/ShardSvr'),
+        value: MachineTypes.MONGODB,
+      },
+    ],
   },
 };
 const sqlserver: InfoType = {
@@ -45,6 +114,12 @@ const sqlserver: InfoType = {
     id: DBTypes.SQLSERVER,
     name: 'SQLServer',
     moduleId: 'sqlserver',
+    machineList: [
+      {
+        label: t('后端存储'),
+        value: MachineTypes.SQLSERVER,
+      },
+    ],
   },
 };
 const bigdata: InfoType = {
@@ -52,36 +127,97 @@ const bigdata: InfoType = {
     id: DBTypes.ES,
     name: 'ElasticSearch',
     moduleId: 'bigdata',
+    machineList: [
+      {
+        label: t('Master节点'),
+        value: MachineTypes.ES_MASTER,
+      },
+      {
+        label: t('Client节点'),
+        value: MachineTypes.ES_CLIENT,
+      },
+      {
+        label: t('冷_热节点'),
+        value: MachineTypes.ES_DATANODE,
+      },
+    ],
   },
   [DBTypes.KAFKA]: {
     id: DBTypes.KAFKA,
     name: 'Kafka',
     moduleId: 'bigdata',
+    machineList: [
+      {
+        label: t('Zookeeper节点'),
+        value: MachineTypes.KAFKA_ZOOKEEPER,
+      },
+      {
+        label: t('Broker节点'),
+        value: MachineTypes.KAFKA_BROKER,
+      },
+    ],
   },
   [DBTypes.HDFS]: {
     id: DBTypes.HDFS,
     name: 'HDFS',
     moduleId: 'bigdata',
+    machineList: [
+      {
+        label: t('DataNode节点'),
+        value: MachineTypes.HDFS_DATANODE,
+      },
+      {
+        label: t('NameNode_Zookeeper_JournalNode节点'),
+        value: MachineTypes.HDFS_MASTER,
+      },
+    ],
   },
   [DBTypes.INFLUXDB]: {
     id: DBTypes.INFLUXDB,
     name: 'InfuxDB',
     moduleId: 'bigdata',
+    machineList: [
+      {
+        label: t('后端存储'),
+        value: MachineTypes.INFLUXDB,
+      },
+    ],
   },
   [DBTypes.RIAK]: {
     id: DBTypes.RIAK,
     name: 'Riak',
     moduleId: 'bigdata',
+    machineList: [
+      {
+        label: t('后端存储'),
+        value: MachineTypes.RIAK,
+      },
+    ],
   },
   [DBTypes.PULSAR]: {
     id: DBTypes.PULSAR,
     name: 'Pulsar',
     moduleId: 'bigdata',
+    machineList: [
+      {
+        label: t('Bookkeeper节点'),
+        value: MachineTypes.PULSAR_BOOKKEEPER,
+      },
+      {
+        label: t('Zookeeper节点'),
+        value: MachineTypes.PULSAR_ZOOKEEPER,
+      },
+      {
+        label: t('Broker节点'),
+        value: MachineTypes.PULSAR_BROKER,
+      },
+    ],
   },
   [DBTypes.DORIS]: {
     id: DBTypes.DORIS,
     name: 'Doris',
     moduleId: 'bigdata',
+    machineList: [],
   },
 };
 export const DBTypeInfos = {
diff --git a/dbm-ui/frontend/src/common/const/machineTypes.ts b/dbm-ui/frontend/src/common/const/machineTypes.ts
index 800e06123e..3723848abc 100644
--- a/dbm-ui/frontend/src/common/const/machineTypes.ts
+++ b/dbm-ui/frontend/src/common/const/machineTypes.ts
@@ -4,61 +4,65 @@
 
 // mysql
 export enum MachineTypes {
-  BACKEND = 'backend',
-  PROXY = 'proxy',
-  SINGLE = 'single',
+  MYSQL_PROXY = 'proxy', // Proxy
+  MYSQL_BACKEND = 'backend', // 后端存储
+  // SINGLE = 'single',
 }
 // spider
 export enum MachineTypes {
-  SPIDER = 'spider',
-  REMOTE = 'remote',
+  // SPIDER = 'spider',
+  // REMOTE = 'remote',
+  TENDBCLUSTER_PROXY = 'proxy', // 接入层Master
+  TENDBCLUSTER_BACKEND = 'backend', // 后端存储
 }
 // redis
 export enum MachineTypes {
-  TENDISCACHE = 'tendiscache',
-  TENDISSSD = 'tendisssd',
-  TENDISPLUS = 'tendisplus',
-  TWEMPROXY = 'twemproxy',
-  PREDIXY = 'predixy',
+  REDIS_PROXY = 'proxy',
+  REDIS_TENDIS_CACHE = 'TwemproxyRedisInstance', // TendisCache后端存储
+  REDIS_TENDIS_SSD = 'TwemproxyTendisSSDInstance', // TendisSSD后端存储
+  REDIS_TENDIS_PLUS = 'PredixyTendisplusCluster', // TendisPlus后端存储
+  REDIS_CLUSTER = 'PredixyRedisCluster', // RedisCluster
+  REDIS_INSTANCE = 'RedisInstance', // Redis主从
 }
 // mongodb
 export enum MachineTypes {
-  MONGOS = 'mongos',
-  MONGODB = 'mongodb',
-  MONGO_CONFIG = 'mongo_config',
+  MONGOS = 'mongos', // Mongos
+  MONGODB = 'mongodb', // 副本集/ShardSvr
+  MONGO_CONFIG = 'mongo_config', // ConfigSvr
 }
 // sqlserver
 export enum MachineTypes {
-  SQLSERVER_HA = 'sqlserver_ha',
-  SQLSERVER_SINGLE = 'sqlserver_single',
+  // SQLSERVER_HA = 'sqlserver_ha',
+  // SQLSERVER_SINGLE = 'sqlserver_single',
+  SQLSERVER = 'sqlserver', // 后端存储
 }
 // kefka
 export enum MachineTypes {
-  BROKER = 'broker',
-  ZOOKEEPER = 'zookeeper',
+  KAFKA_BROKER = 'broker', // Broker节点
+  KAFKA_ZOOKEEPER = 'zookeeper', // Zookeeper节点
 }
 // es
 export enum MachineTypes {
-  ES_DATANODE = 'es_datanode',
-  ES_MASTER = 'es_master',
-  ES_CLIENT = 'es_client',
+  ES_DATANODE = 'es_datanode', // 冷/热节点
+  ES_MASTER = 'es_master', // Master节点
+  ES_CLIENT = 'es_client', // Client节点
 }
 // hdfs
 export enum MachineTypes {
-  HDFS_MASTER = 'hdfs_master',
-  HDFS_DATANODE = 'hdfs_datanode',
+  HDFS_MASTER = 'hdfs_master', // NameNode/Zookeeper/JournalNode节点
+  HDFS_DATANODE = 'hdfs_datanode', // DataNode节点
 }
 // pulsar
 export enum MachineTypes {
-  PULSAR_BROKER = 'pulsar_broker',
-  PULSAR_BOOKKEEPER = 'pulsar_bookkeeper',
-  PULSAR_ZOOKEEPER = 'pulsar_zookeeper',
+  PULSAR_BROKER = 'pulsar_broker', // Broker节点
+  PULSAR_BOOKKEEPER = 'pulsar_bookkeeper', // Bookkeeper节点
+  PULSAR_ZOOKEEPER = 'pulsar_zookeeper', // Zookeeper节点
 }
 // influxdb
 export enum MachineTypes {
-  INFLUXDB = 'influxdb',
+  INFLUXDB = 'influxdb', // 后端存储
 }
 // riak
 export enum MachineTypes {
-  RIAK = 'riak',
+  RIAK = 'riak', // 后端存储
 }
diff --git a/dbm-ui/frontend/src/components/render-table/columns/input/index.vue b/dbm-ui/frontend/src/components/render-table/columns/input/index.vue
index a4aec95275..89605fff0c 100644
--- a/dbm-ui/frontend/src/components/render-table/columns/input/index.vue
+++ b/dbm-ui/frontend/src/components/render-table/columns/input/index.vue
@@ -38,7 +38,7 @@
       @paste="handlePaste">
     </BkInput>
     <DbIcon
-      v-if="clearable && modelValue && type !== 'number'"
+      v-if="clearable && !disabled && modelValue && type !== 'number'"
       class="clear-icon"
       type="close-circle-shape"
       @click="handleClear" />
@@ -72,17 +72,19 @@
     pasteFn?: (value: string) => string;
   }
 
+  type ValueType = string | number;
+
   interface Emits {
-    (e: 'blur', value: string): void;
-    (e: 'input', value: string): void;
-    (e: 'submit', value: string): void;
+    (e: 'blur', value: ValueType): void;
+    (e: 'input', value: ValueType): void;
+    (e: 'submit', value: ValueType): void;
     (e: 'error', result: boolean): void;
     (e: 'focus'): void;
     (e: 'clear'): void;
   }
 
   interface Exposes {
-    getValue: () => Promise<string>;
+    getValue: () => Promise<ValueType>;
     validator: () => Promise<boolean>;
     focus: () => void;
   }
@@ -102,7 +104,7 @@
 
   const emits = defineEmits<Emits>();
 
-  const modelValue = defineModel<string>({
+  const modelValue = defineModel<ValueType>({
     default: '',
   });
 
@@ -111,7 +113,7 @@
 
   const isPassword = computed(() => props.type === 'password');
 
-  let oldInputText = '';
+  let oldInputText = '' as ValueType;
 
   const { message: errorMessage, validator } = useValidtor(props.rules);
 
diff --git a/dbm-ui/frontend/src/locales/en.json b/dbm-ui/frontend/src/locales/en.json
index c44980d59c..93281073e4 100644
--- a/dbm-ui/frontend/src/locales/en.json
+++ b/dbm-ui/frontend/src/locales/en.json
@@ -1295,7 +1295,7 @@
   "克隆规格": "Clone specification",
   "内存(G)": "Memory(G)",
   "再提一单": "Submit another new ticket",
-  "冷_热节点规格": "Cold/Hot node specification",
+  "冷_热节点": "Cold/Hot node specification",
   "匹配目标容量": "Match target capacity",
   "后端存储机型": "Backend storage specification",
   "后端存储资源规格": "Backend storage Specification",
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 88f5b6ff09..37b7981a1a 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -351,7 +351,6 @@
     "访问DB": "访问 DB",
     "访问源预览": "访问源预览",
     "旧从库主机": "旧从库主机",
-    "新从库主机": "新从库主机",
     "备份源": "备份源",
     "目标从库实例": "目标从库实例",
     "请输入域名_集群名称_所属DB模块": "请输入域名，集群名称，所属DB模块",
@@ -1337,8 +1336,8 @@
     "Bookkeeper节点规格": "Bookkeeper 节点规格",
     "Master节点规格": "Master 节点规格",
     "Client节点规格": "Client 节点规格",
-    "冷_热节点规格": "冷/热节点规格",
-    "NameNode_Zookeeper_JournalNode节点规格": "NameNode/Zookeeper/JournalNode 节点规格",
+    "冷_热节点": "冷/热节点",
+    "NameNode_Zookeeper_JournalNode节点": "NameNode/Zookeeper/JournalNode 节点",
     "确认删除以下规格": "确认删除以下规格？",
     "Pulsar集群管理": "【Pulsar】集群管理",
     "InfluxDB实例详情": "InfluxDB 实例详情",
@@ -2690,7 +2689,6 @@
     "保留索引": "保留索引",
     "删除索引": "删除索引",
     "索引处理": "索引处理",
-    "备份保存时间": "备份保存时间",
     "备份方式": "备份方式",
     "当前Shard节点规格": "当前 Shard 节点规格",
     "当前Shard节点数": "当前 Shard 节点数",
@@ -3176,7 +3174,6 @@
     "目标Proxy主机重复": "目标Proxy主机重复",
     "目标实例": "目标实例",
     "关联集群": "关联集群",
-    "缩容数量（台）": "缩容数量（台）",
     "自动匹配": "自动匹配",
     "Master 主机": "Master 主机",
     "缩容后不能少于2台": "缩容后不能少于2台",
@@ -3460,7 +3457,6 @@
     "整型(int)": "整型(int)",
     "整型(bigint)": "整型(bigint)",
     "新proxy主机": "新proxy主机",
-    "必须要能除尽总分片数": "必须要能除尽总分片数",
     "开启弱密码检测": "开启弱密码检测",
     "开启后，不允许超过 x 位连续字符，如出现以下示例密码将无法通过检测": "开启后，不允许超过 {x} 位连续字符，如出现以下示例密码将无法通过检测",
     "连续键盘序_如_xx": "连续键盘序，如：{0}",
@@ -3488,7 +3484,6 @@
     "【MongoDB】分片集群管理": "【MongoDB】分片集群管理",
     "请至少选择一种类型": "请至少选择一种类型",
     "如忽略，有连接的情况下也会执行强制升级": "如忽略，有连接的情况下也会执行强制升级",
-    "库表名支持数字、字母、中划线、下划线，最大64字符": "库表名支持数字、字母、中划线、下划线，最大64字符",
     "暂不支持 use 语句，请使用 db.table 指定 database": "暂不支持 use 语句，请使用 db.table 指定 database",
     "请添加账号规则": "请添加账号规则",
     "请指定特殊字符": "请指定特殊字符",
@@ -3582,7 +3577,6 @@
     "机器类型": "机器类型",
     "Proxy数量不足，至少 2 台": "Proxy数量不足，至少 2 台",
     "忽略DB名、忽略表名要么同时为空, 要么同时不为空": "忽略DB名、忽略表名要么同时为空, 要么同时不为空",
-    "至多n台": "至多n台",
     "同一个副本集，一次只能替换一个节点": "同一个副本集，一次只能替换一个节点",
     "同一个分片集群，config一次只能替换一个节点": "同一个分片集群，config一次只能替换一个节点",
     "config一次只能替换一个节点": "config一次只能替换一个节点",
@@ -3592,5 +3586,16 @@
     "ShardSvr 名称": "ShardSvr 名称",
     "回档至指定时间": "回档至指定时间",
     "待替换的主机 ": "待替换的主机",
+    "后端存储": "后端存储",
+    "TendisCache后端存储": "TendisCache 后端存储",
+    "TendisSSD后端存储": "TendisSSD 后端存储",
+    "TendisPlus后端存储": "TendisPlus 后端存储",
+    "DataNode节点": "DataNode 节点",
+    "副本集/ShardSvr": "副本集/ShardSvr",
+    "必须要能除尽总分片数": "必须要能除尽总分片数",
+    "变更机器组数": "变更机器组数",
+    "CPU/内存": "CPU/内存",
+    "添加机型": "添加机型",
+    "TendisCache/RedisCluster/Redis主从 后端存储": "TendisCache/RedisCluster/Redis主从 后端存储",
     "这行勿动！新增翻译请在上一行添加！": ""
   }
diff --git a/dbm-ui/frontend/src/services/model/db-resource/DbResource.ts b/dbm-ui/frontend/src/services/model/db-resource/DbResource.ts
index 61422ca573..30692db00f 100644
--- a/dbm-ui/frontend/src/services/model/db-resource/DbResource.ts
+++ b/dbm-ui/frontend/src/services/model/db-resource/DbResource.ts
@@ -117,6 +117,6 @@ export default class DbResource {
     if (!this.resource_type || this.resource_type === 'PUBLIC') {
       return t('通用');
     }
-    return DBTypeInfos[this.resource_type as DBTypes].name;
+    return DBTypeInfos[this.resource_type as DBTypes]?.name;
   }
 }
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 9b03cc2f0e..945a61bada 100644
--- a/dbm-ui/frontend/src/services/model/db-resource/summary.ts
+++ b/dbm-ui/frontend/src/services/model/db-resource/summary.ts
@@ -11,7 +11,7 @@
  * the specific language governing permissions and limitations under the License.
  */
 
-import { clusterTypeInfos, ClusterTypes, MachineTypes } from '@common/const';
+import { DBTypeInfos, DBTypes, MachineTypes } from '@common/const';
 
 export default class Summary {
   dedicated_biz: number;
@@ -19,7 +19,7 @@ export default class Summary {
   city: string;
   spec_id?: number;
   spec_name?: string;
-  spec_cluster_type?: ClusterTypes;
+  spec_cluster_type?: DBTypes;
   spec_machine_type?: MachineTypes;
   device_class?: string;
   disk_summary?: {
@@ -66,9 +66,12 @@ export default class Summary {
     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}` : '--';
+    const { name, machineList } = DBTypeInfos[this.spec_cluster_type] || {
+      name: '',
+      machineList: [],
+    };
+    const matchMachine = machineList.find(({ value }) => value === this.spec_machine_type);
+    return matchMachine ? `${name} - ${matchMachine.label}` : '--';
   }
 
   get subzoneDetailDisplay() {
diff --git a/dbm-ui/frontend/src/services/source/dbresourceResource.ts b/dbm-ui/frontend/src/services/source/dbresourceResource.ts
index 39ab16639e..a02bbbae5c 100644
--- a/dbm-ui/frontend/src/services/source/dbresourceResource.ts
+++ b/dbm-ui/frontend/src/services/source/dbresourceResource.ts
@@ -32,8 +32,31 @@ export function removeResource(params: { bk_host_ids: number[] }) {
 /**
  * 获取机型列表
  */
-export function fetchDeviceClass() {
-  return http.get<string[]>(`${path}/get_device_class/`);
+export function fetchDeviceClass(params: { offset?: number; limit?: number; name?: string }) {
+  return http.post<
+    ListBase<
+      {
+        capacity_flag: number; // 容量标志
+        comment: string; // 评论
+        cpu: number; // CPU 核心数
+        disk: number; // 磁盘大小 (GB)
+        enable_apply: boolean; // 是否启用申请
+        enable_capacity: boolean; // 是否启用容量
+        id: number; // 设备唯一标识
+        label: {
+          device_group: string; // 设备组
+          device_size: string; // 设备大小
+        };
+        mem: number; // 内存大小 (GB)
+        region: string; // 区域
+        require_type: number; // 需求类型
+        remark: string; // 备注
+        score: number; // 评分
+        zone: string; // 可用区
+        device_type: string; // 设备类型
+      }[]
+    >
+  >(`${path}/get_device_class/`, params);
 }
 
 /**
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
index 7021ac5101..d0c217f6f1 100644
--- a/dbm-ui/frontend/src/types/auto-imports.d.ts
+++ b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -71,6 +71,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/common/apply-items/BackendQPSSpec.vue b/dbm-ui/frontend/src/views/db-manage/common/apply-items/BackendQPSSpec.vue
index b2a59862b6..8812b03500 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/apply-items/BackendQPSSpec.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/apply-items/BackendQPSSpec.vue
@@ -108,7 +108,7 @@
           :biz-id="bizId"
           :cloud-id="cloudId"
           :cluster-type="ClusterTypes.TENDBCLUSTER"
-          machine-type="remote"
+          machine-type="backend"
           style="width: 314px" />
       </BkFormItem>
       <BkFormItem
@@ -193,7 +193,7 @@
   }
 
   interface Props {
-    clusterType: string,
+    dbType: string,
     machineType: string,
     bizId: number | string,
     cloudId: number | string,
@@ -315,7 +315,7 @@
     }
 
     queryQPSRange({
-      spec_cluster_type: props.clusterType,
+      spec_cluster_type: props.dbType,
       spec_machine_type: props.machineType,
       capacity: Number(capacity),
       future_capacity: Number(futureCapacity),
@@ -342,7 +342,7 @@
 
     isLoading.value = true;
     getFilterClusterSpec({
-      spec_cluster_type: props.clusterType,
+      spec_cluster_type: props.dbType,
       spec_machine_type: props.machineType,
       capacity: Number(capacity),
       future_capacity: Number(futureCapacity),
diff --git a/dbm-ui/frontend/src/views/db-manage/common/apply-items/SpecSelector.vue b/dbm-ui/frontend/src/views/db-manage/common/apply-items/SpecSelector.vue
index fcc50e7b19..5065510a91 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/apply-items/SpecSelector.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/apply-items/SpecSelector.vue
@@ -33,13 +33,23 @@
                 <span class="info-title">{{ t('可用主机数') }}：</span>
                 <span class="info-value">{{ item.count ?? 0 }}</span>
               </div>
-              <div class="info">
-                <span class="info-title">CPU：</span>
-                <span class="info-value">({{ item.cpu.min }} ~ {{ item.cpu.max }}) {{ t('核') }}</span>
-              </div>
-              <div class="info">
-                <span class="info-title">{{ t('内存') }}：</span>
-                <span class="info-value">({{ item.mem.min }} ~ {{ item.mem.max }}) G</span>
+              <template v-if="!item.device_class.length && item.cpu.max">
+                <div class="info">
+                  <span class="info-title">CPU：</span>
+                  <span class="info-value">({{ item.cpu.min }} ~ {{ item.cpu.max }}) {{ t('核') }}</span>
+                </div>
+                <div class="info">
+                  <span class="info-title">{{ t('内存') }}：</span>
+                  <span class="info-value">({{ item.mem.min }} ~ {{ item.mem.max }}) G</span>
+                </div>
+              </template>
+              <div
+                v-else
+                class="info">
+                <span class="info-title">{{ t('机型') }}：</span>
+                <span class="info-value">
+                  {{ item.device_class.length > 0 ? item.device_class.join('，') : t('无限制') }}
+                </span>
               </div>
               <div
                 class="info"
diff --git a/dbm-ui/frontend/src/views/db-manage/common/cluster-spec-plan-selector/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/cluster-spec-plan-selector/Index.vue
index 8e2d8981aa..96e1ae28de 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/cluster-spec-plan-selector/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/cluster-spec-plan-selector/Index.vue
@@ -82,7 +82,7 @@
           :clearable="false"
           :cloud-id="cloudId"
           :cluster-type="ClusterTypes.TENDBCLUSTER"
-          machine-type="remote"
+          machine-type="backend"
           style="width: 314px" />
       </BkFormItem>
       <BkFormItem
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/capacity-change/pages/page1/components/ChooseDeployPlan.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/capacity-change/pages/page1/components/ChooseDeployPlan.vue
index ba7642d506..54c373e982 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/capacity-change/pages/page1/components/ChooseDeployPlan.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/capacity-change/pages/page1/components/ChooseDeployPlan.vue
@@ -369,8 +369,7 @@
     if (capacityNeed.value > 0) {
       isTableLoading.value = true;
       const params = {
-        // spec_cluster_type: 'MongoShardedCluster',
-        spec_cluster_type: props.data.clusterType,
+        spec_cluster_type: 'mongodb',
         spec_machine_type: 'mongodb',
         capacity: capacityNeed.value,
         shard_num: props.data.shardNum,
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/components/MongoConfigSpec.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/components/MongoConfigSpec.vue
index 87a1fa83bd..43deab9bd3 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/components/MongoConfigSpec.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/components/MongoConfigSpec.vue
@@ -71,7 +71,7 @@
   import { getFilterClusterSpec } from '@services/source/dbresourceSpec';
 
   import {
-    ClusterTypes,
+    DBTypes,
     MachineTypes,
   } from '@common/const';
 
@@ -98,7 +98,6 @@
     shardNodeCount?: number,
     isApply?: boolean
     originSpecId?: number | string
-    clusterType: ClusterTypes.MONGO_REPLICA_SET | ClusterTypes.MONGO_SHARED_CLUSTER
   }
 
   interface Emits {
@@ -339,7 +338,7 @@
     }
 
     getFilterClusterSpecRun({
-      spec_cluster_type: props.clusterType,
+      spec_cluster_type: DBTypes.MONGODB,
       spec_machine_type: MachineTypes.MONGODB,
       capacity: Number(modelValue.value.capacity),
       shard_num: props.shardNum,
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/db-replace/pages/page1/components/Row.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/db-replace/pages/page1/components/Row.vue
index eb3ecca849..c4c4a31135 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/db-replace/pages/page1/components/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/db-replace/pages/page1/components/Row.vue
@@ -191,7 +191,7 @@
     ([clusterType, machineType]) => {
       if (clusterType && machineType) {
         fetchResourceSpecList({
-          spec_cluster_type: clusterType,
+          spec_cluster_type: 'mongodb',
           spec_machine_type: machineType,
           limit: -1,
           offset: 0,
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/db-structure/pages/page1/components/RenderTargetSpec.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/db-structure/pages/page1/components/RenderTargetSpec.vue
index 46ead8fad5..1a519a4aec 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/db-structure/pages/page1/components/RenderTargetSpec.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/db-structure/pages/page1/components/RenderTargetSpec.vue
@@ -23,7 +23,7 @@
         v-model="moduleValue"
         :biz-id="3"
         :cloud-id="0"
-        :cluster-type="clusterType"
+        cluster-type="mongodb"
         machine-type="mongodb"
         :show-refresh="false" />
     </div>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/proxy-scale-up/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/proxy-scale-up/pages/page1/Index.vue
index eb470ccac6..f598d65b51 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/proxy-scale-up/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/proxy-scale-up/pages/page1/Index.vue
@@ -116,7 +116,7 @@
   useRequest(getResourceSpecList, {
     defaultParams: [
       {
-        spec_cluster_type: 'MongoShardedCluster',
+        spec_cluster_type: 'mongodb',
         spec_machine_type: 'mongos',
         limit: -1,
         offset: 0,
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-apply/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-apply/Index.vue
index 1f7944d889..50e76015af 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-apply/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-apply/Index.vue
@@ -127,7 +127,7 @@
               :biz-id="formData.bk_biz_id"
               :city="formData.details.city_code"
               :cloud-id="formData.details.bk_cloud_id"
-              :cluster-type="ClusterTypes.MONGO_REPLICA_SET"
+              :cluster-type="DBTypes.MONGODB"
               :machine-type="MachineTypes.MONGODB"
               style="width: 314px" />
             <span class="input-desc ml-32">
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-apply/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-apply/Index.vue
index d1e09f537c..9239c01213 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-apply/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-apply/Index.vue
@@ -87,7 +87,7 @@
                   :biz-id="formData.bk_biz_id"
                   :city="formData.details.city_code"
                   :cloud-id="formData.details.bk_cloud_id"
-                  :cluster-type="ClusterTypes.MONGO_SHARED_CLUSTER"
+                  :cluster-type="DBTypes.MONGODB"
                   :machine-type="MachineTypes.MONGO_CONFIG"
                   style="width: 314px" />
               </BkFormItem>
@@ -117,7 +117,7 @@
                   :biz-id="formData.bk_biz_id"
                   :city="formData.details.city_code"
                   :cloud-id="formData.details.bk_cloud_id"
-                  :cluster-type="ClusterTypes.MONGO_SHARED_CLUSTER"
+                  :cluster-type="DBTypes.MONGODB"
                   :machine-type="MachineTypes.MONGOS"
                   style="width: 314px" />
               </BkFormItem>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue b/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue
index 3c16007991..fbc6b4844a 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue
@@ -283,8 +283,8 @@
                   :biz-id="formdata.bk_biz_id"
                   :city="formdata.details.city_code"
                   :cloud-id="formdata.details.bk_cloud_id"
-                  :cluster-type="ClusterTypes.TENDBSINGLE"
-                  machine-type="single"
+                  cluster-type="mysql"
+                  machine-type="backend"
                   style="width: 435px" />
               </BkFormItem>
               <template v-else>
@@ -298,7 +298,7 @@
                     :biz-id="formdata.bk_biz_id"
                     :city="formdata.details.city_code"
                     :cloud-id="formdata.details.bk_cloud_id"
-                    :cluster-type="ClusterTypes.TENDBHA"
+                    cluster-type="mysql"
                     machine-type="proxy"
                     style="width: 435px" />
                 </BkFormItem>
@@ -312,7 +312,7 @@
                     :biz-id="formdata.bk_biz_id"
                     :city="formdata.details.city_code"
                     :cloud-id="formdata.details.bk_cloud_id"
-                    :cluster-type="ClusterTypes.TENDBHA"
+                    cluster-type="mysql"
                     machine-type="backend"
                     style="width: 435px" />
                 </BkFormItem>
@@ -390,7 +390,7 @@
 
   import { useApplyBase, useTicketCloneInfo } from '@hooks';
 
-  import { ClusterTypes, mysqlType, type MysqlTypeString, TicketTypes } from '@common/const';
+  import { mysqlType, type MysqlTypeString, TicketTypes } from '@common/const';
   import { OSTypes } from '@common/const';
   import { nameRegx } from '@common/regex';
 
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue
index 394b6efb7a..860bd5601a 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/apply-ha/Index.vue
@@ -152,8 +152,8 @@
               :biz-id="formData.bk_biz_id"
               :city="formData.details.city_code"
               :cloud-id="formData.details.bk_cloud_id"
-              :cluster-type="ClusterTypes.REDIS_INSTANCE"
-              :machine-type="MachineTypes.TENDISCACHE"
+              :cluster-type="DBTypes.REDIS"
+              :machine-type="ClusterTypes.REDIS_INSTANCE"
               style="width: 314px" />
           </BkFormItem>
           <BkFormItem
@@ -219,7 +219,7 @@
 
   import { useApplyBase } from '@hooks';
 
-  import { ClusterTypes, DBTypes, MachineTypes, TicketTypes } from '@common/const';
+  import { ClusterTypes, DBTypes, TicketTypes } from '@common/const';
 
   import DbForm from '@components/db-form/index.vue';
 
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue b/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue
index b06f4a0dbe..c757160820 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue
@@ -277,8 +277,8 @@
                       :biz-id="state.formdata.bk_biz_id"
                       :city="state.formdata.details.city_code"
                       :cloud-id="state.formdata.details.bk_cloud_id"
-                      :cluster-type="typeInfos.cluster_type"
-                      :machine-type="typeInfos.machine_type"
+                      :cluster-type="DBTypes.REDIS"
+                      machine-type="proxy"
                       style="width: 314px" />
                   </BkFormItem>
                   <BkFormItem
@@ -302,7 +302,7 @@
                   :biz-id="state.formdata.bk_biz_id"
                   :cloud-id="state.formdata.details.bk_cloud_id"
                   :cluster-type="typeInfos.cluster_type"
-                  :machine-type="typeInfos.backend_machine_type" />
+                  :machine-type="typeInfos.machine_type" />
               </BkFormItem>
               <BkFormItem
                 :label="t('访问端口')"
@@ -378,7 +378,7 @@
 
   import { useFunController } from '@stores';
 
-  import { ClusterTypes, DBTypes, OSTypes, TicketTypes } from '@common/const';
+  import { ClusterTypes, DBTypes, MachineTypes, OSTypes, TicketTypes } from '@common/const';
   import { nameRegx } from '@common/regex';
 
   import IpSelector from '@components/ip-selector/IpSelector.vue';
@@ -554,25 +554,25 @@
     const types = {
       [ClusterTypes.TWEMPROXY_REDIS_INSTANCE]: {
         cluster_type: ClusterTypes.TWEMPROXY_REDIS_INSTANCE,
-        machine_type: 'twemproxy',
+        machine_type: MachineTypes.REDIS_TENDIS_CACHE,
         backend_machine_type: 'tendiscache',
         pkg_type: 'redis',
       },
       [ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE]: {
         cluster_type: ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE,
-        machine_type: 'twemproxy',
+        machine_type: MachineTypes.REDIS_TENDIS_SSD,
         backend_machine_type: 'tendisssd',
         pkg_type: 'tendisssd',
       },
       [ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER]: {
         cluster_type: ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER,
-        machine_type: 'predixy',
+        machine_type: MachineTypes.REDIS_TENDIS_PLUS,
         backend_machine_type: 'tendisplus',
         pkg_type: 'tendisplus',
       },
       [ClusterTypes.PREDIXY_REDIS_CLUSTER]: {
         cluster_type: ClusterTypes.PREDIXY_REDIS_CLUSTER,
-        machine_type: 'predixy',
+        machine_type: MachineTypes.REDIS_TENDIS_CACHE,
         backend_machine_type: 'tendiscache',
         pkg_type: 'redis',
       },
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/apply/components/backend-spec/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/apply/components/backend-spec/Index.vue
index 9877b77e58..6ae1cb7201 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/apply/components/backend-spec/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/apply/components/backend-spec/Index.vue
@@ -213,7 +213,7 @@
 
     isLoading.value = true;
     getFilterClusterSpec({
-      spec_cluster_type: props.clusterType,
+      spec_cluster_type: 'redis',
       spec_machine_type: props.machineType,
       capacity: Number(capacity),
       future_capacity: Number(futureCapacity),
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/apply/components/backend-spec/components/CustomSchema.vue b/dbm-ui/frontend/src/views/db-manage/redis/apply/components/backend-spec/components/CustomSchema.vue
index 1f5426195e..c09b8f3fd2 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/apply/components/backend-spec/components/CustomSchema.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/apply/components/backend-spec/components/CustomSchema.vue
@@ -9,7 +9,7 @@
         v-model="modelValue.spec_id"
         :biz-id="bizId"
         :cloud-id="cloudId"
-        :cluster-type="clusterType"
+        cluster-type="redis"
         :machine-type="machineType"
         style="width: 314px" />
     </DbFormItem>
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/Index.vue
index 744964a392..9707269f15 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/Index.vue
@@ -77,7 +77,7 @@
 
   import { ClusterTypes, TicketTypes } from '@common/const';
 
-  import ClusterSelector, { type TabItem } from '@components/cluster-selector/Index.vue';
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
   import TicketRemark from '@components/ticket-remark/Index.vue';
 
   import RenderData from './components/Index.vue';
@@ -124,7 +124,7 @@
           ...params,
         }),
     },
-  } as unknown as Record<ClusterTypes, TabItem>;
+  } as any;
 
   // 检测列表是否为空
   const checkListEmpty = (list: Array<IDataRow>) => {
@@ -149,7 +149,7 @@
     groupNum: data.machine_pair_cnt,
     machineCount: data.redis_master.length,
     version: data.major_version,
-    clusterType: data.cluster_spec.spec_cluster_type,
+    clusterType: data.cluster_type,
     currentCapacity: {
       used: 1,
       total: data.cluster_capacity,
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
index 0a0bc2787d..e950193eb0 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
@@ -284,7 +284,7 @@
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue'
   import ValueDiff from '@views/db-manage/common/value-diff/Index.vue'
   import CustomSchema from '@views/db-manage/redis/common/cluster-deploy-plan/CustomSchema.vue';
-  import { ClusterMachineMap } from '@views/db-manage/redis/common/const'
+  import { specClusterMachineMap } from '@views/db-manage/redis/common/const';
 
   import { convertStorageUnits, messageError } from '@utils';
 
@@ -530,7 +530,7 @@
         bizId: window.PROJECT_CONFIG.BIZ_ID,
         cloudId: props.data.bkCloudId,
         clusterType: props.data.clusterType,
-        machineType: ClusterMachineMap[props.data.clusterType]
+        machineType: specClusterMachineMap[props.data.clusterType]
       })
     }
   }, {
@@ -591,8 +591,8 @@
       isTableLoading.value = true;
       const clusterType = props.data?.clusterType ?? ClusterTypes.TWEMPROXY_REDIS_INSTANCE;
       const params = {
-        spec_cluster_type: clusterType,
-        spec_machine_type: ClusterMachineMap[clusterType],
+        spec_cluster_type: 'redis',
+        spec_machine_type: specClusterMachineMap[clusterType],
         shard_num: props.data.shardNum === 0 ? undefined : props.data.shardNum,
         capacity: capacityNeed.value,
         future_capacity: capacityNeed.value,
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/Index.vue
index 545cec338e..b157f05b46 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-shard-update/pages/page1/Index.vue
@@ -253,7 +253,7 @@
         total: item.cluster_capacity,
       },
       currentSepc: `${item.cluster_capacity}G_${specConfig.qps.max}/s（${item.cluster_shard_num} 分片）`,
-      clusterType: item.cluster_spec.spec_cluster_type,
+      clusterType: item.cluster_type,
       currentShardNum: item.cluster_shard_num,
       groupNum: item.machine_pair_cnt,
       clusterTypeName: item.cluster_type_name,
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue
index c4b0e05c91..6aa9c88d78 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue
@@ -191,7 +191,7 @@
   import DbForm from '@components/db-form/index.vue'
 
   import ApplySchema, { APPLY_SCHEME } from '@views/db-manage/common/apply-schema/Index.vue';
-  import { ClusterMachineMap } from '@views/db-manage/redis/common/const'
+  import { specClusterMachineMap } from '@views/db-manage/redis/common/const';
 
   import CustomSchema from './CustomSchema.vue';
 
@@ -386,7 +386,7 @@
         bizId: window.PROJECT_CONFIG.BIZ_ID,
         cloudId: props.data.bkCloudId,
         clusterType: props.data.clusterType,
-        machineType: ClusterMachineMap[props.data.clusterType]
+        machineType: specClusterMachineMap[props.data.clusterType]
       })
     }
   }, {
@@ -427,8 +427,8 @@
       isTableLoading.value = true;
       const clusterType = props.data?.clusterType ?? ClusterTypes.TWEMPROXY_REDIS_INSTANCE;
       const params = {
-        spec_cluster_type: clusterType,
-        spec_machine_type: ClusterMachineMap[clusterType],
+        spec_cluster_type: 'redis',
+        spec_machine_type: specClusterMachineMap[clusterType],
         shard_num: props.data.shardNum === 0 ? undefined : props.data.shardNum,
         capacity: specInfo.capacityNeed,
         future_capacity: specInfo.capacityNeed <= specInfo.capacityFutureNeed ? specInfo.capacityFutureNeed : specInfo.capacityNeed,
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/const.ts b/dbm-ui/frontend/src/views/db-manage/redis/common/const.ts
index 2466a43478..05f4bc9c25 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/common/const.ts
+++ b/dbm-ui/frontend/src/views/db-manage/redis/common/const.ts
@@ -19,7 +19,7 @@ import {
   WriteModes,
 } from '@services/model/redis/redis-dst-history-job';
 
-import { ClusterTypes } from '@common/const';
+import { ClusterTypes, MachineTypes } from '@common/const';
 
 export const repairAndVerifyFrequencyList = [
   {
@@ -114,10 +114,11 @@ export const QueryKeyMap: Record<string, string> = {
   PredixyRedisCluster: 'redis',
 };
 
-export const ClusterMachineMap: Record<string, string> = {
-  [ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER]: 'tendisplus',
-  [ClusterTypes.PREDIXY_REDIS_CLUSTER]: 'tendiscache',
-  [ClusterTypes.REDIS_INSTANCE]: 'tendiscache',
-  [ClusterTypes.TWEMPROXY_REDIS_INSTANCE]: 'tendiscache',
-  [ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE]: 'tendisssd',
+// redis 规格有关的集群与机器类型映射，主要处理 RedisCluster 和 Redis主从 合入  TendisCache后端存储的情况
+export const specClusterMachineMap: Record<string, string> = {
+  [ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE]: MachineTypes.REDIS_TENDIS_SSD,
+  [ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER]: MachineTypes.REDIS_TENDIS_PLUS,
+  [ClusterTypes.PREDIXY_REDIS_CLUSTER]: MachineTypes.REDIS_TENDIS_CACHE,
+  [ClusterTypes.REDIS_INSTANCE]: MachineTypes.REDIS_TENDIS_CACHE,
+  [ClusterTypes.TWEMPROXY_REDIS_INSTANCE]: MachineTypes.REDIS_TENDIS_CACHE,
 };
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/proxy-scale-up/pages/page1/components/Row.vue b/dbm-ui/frontend/src/views/db-manage/redis/proxy-scale-up/pages/page1/components/Row.vue
index 432a3cb9a2..2cf02ee644 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/proxy-scale-up/pages/page1/components/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/proxy-scale-up/pages/page1/components/Row.vue
@@ -65,6 +65,7 @@
   import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
   import RenderText from '@components/render-table/columns/text-plain/index.vue';
 
+  import { specClusterMachineMap } from '@views/db-manage/redis/common/const';
   import RenderTargetCluster from '@views/db-manage/redis/common/edit-field/ClusterName.vue';
 
   import { random } from '@utils';
@@ -74,6 +75,12 @@
   import type { SpecInfo } from './SpecPanel.vue';
   import type { IListItem } from './SpecSelect.vue';
 
+  interface Props {
+    data: IDataRow;
+    removeable: boolean;
+    inputedClusters?: string[];
+  }
+
   export interface IDataRow {
     rowKey: string;
     isLoading: boolean;
@@ -116,13 +123,8 @@
     nodeType: '',
     cluster_type_name: '',
   });
-
-  interface Props {
-    data: IDataRow;
-    removeable: boolean;
-    inputedClusters?: string[];
-  }
-
+</script>
+<script setup lang="ts">
   interface Emits {
     (e: 'add', params: Array<IDataRow>): void;
     (e: 'remove'): void;
@@ -133,8 +135,7 @@
   interface Exposes {
     getValue: () => Promise<InfoItem>;
   }
-</script>
-<script setup lang="ts">
+
   const props = withDefaults(defineProps<Props>(), {
     inputedClusters: () => [],
   });
@@ -143,20 +144,12 @@
 
   // 查询集群对应的规格列表
   const querySpecList = async (item: RedisModel) => {
-    const proxyMachineMap: Record<string, string> = {
-      TwemproxyRedisInstance: 'twemproxy',
-      TwemproxyTendisSSDInstance: 'twemproxy',
-      PredixyTendisplusCluster: 'predixy',
-      PredixyRedisCluster: 'predixy',
-      RedisInstance: '',
-    };
-    const type = item.cluster_spec.spec_cluster_type;
-    const machineType = proxyMachineMap[type];
+    const clusterType = item.cluster_type;
     const specId = item.cluster_spec.spec_id;
     const specCount = item.proxy.length;
     const ret = await getResourceSpecList({
-      spec_cluster_type: type,
-      spec_machine_type: machineType,
+      spec_cluster_type: 'redis',
+      spec_machine_type: specClusterMachineMap[clusterType],
       limit: -1,
       offset: 0,
     });
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue
index fb1fea7a12..c4c0a97f75 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue
@@ -218,8 +218,8 @@
                   :biz-id="formData.bk_biz_id"
                   :city="formData.details.city_code"
                   :cloud-id="formData.details.bk_cloud_id"
-                  :cluster-type="clusterType"
-                  :machine-type="clusterType"
+                  cluster-type="sqlserver"
+                  machine-type="sqlserver"
                   style="width: 435px" />
               </BkFormItem>
             </div>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue
index d3a3021995..190f53d26e 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue
@@ -59,7 +59,7 @@
                   :city="formdata.details.city_code"
                   :cloud-id="formdata.details.bk_cloud_id"
                   cluster-type="tendbcluster"
-                  machine-type="spider" />
+                  machine-type="proxy" />
               </BkFormItem>
               <BkFormItem
                 :label="t('数量')"
@@ -81,8 +81,8 @@
               v-model="formdata.details.resource_spec.backend_group"
               :biz-id="formdata.bk_biz_id"
               :cloud-id="formdata.details.bk_cloud_id"
-              cluster-type="tendbcluster"
-              machine-type="remote" />
+              db-type="tendbcluster"
+              machine-type="backend" />
           </BkFormItem>
           <BkFormItem
             :label="t('访问端口')"
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/capacity-change/pages/page1/components/RenderData/RenderTargetResourceSpec.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/capacity-change/pages/page1/components/RenderData/RenderTargetResourceSpec.vue
index 4e27be4026..4a289979d2 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/capacity-change/pages/page1/components/RenderData/RenderTargetResourceSpec.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/capacity-change/pages/page1/components/RenderData/RenderTargetResourceSpec.vue
@@ -66,7 +66,7 @@
           :cloud-id="clusterData.bkCloudId"
           :cluster-shard-num="clusterData.clusterShardNum"
           cluster-type="tendbcluster"
-          machine-type="remote"
+          machine-type="backend"
           @change="handlePlanChange" />
       </BkForm>
     </div>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/common/spec-panel-select/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/common/spec-panel-select/Index.vue
index 688b09f1cc..ea58e1ee21 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/common/spec-panel-select/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/common/spec-panel-select/Index.vue
@@ -31,12 +31,10 @@
   import { getSpecResourceCount } from '@services/source/dbresourceResource';
   import { getResourceSpecList } from '@services/source/dbresourceSpec';
 
-  // import type { SpecInfo } from './components/Panel.vue';
   import TableEditSelect, { type IListItem } from './components/Select.vue';
 
   interface Props {
     cloudId?: number;
-    clusterType?: string;
     data?: number;
     currentSpecIds?: number[];
   }
@@ -49,7 +47,6 @@
 
   const props = withDefaults(defineProps<Props>(), {
     cloudId: 0,
-    clusterType: '',
     data: undefined,
     currentSpecIds: () => [],
   });
@@ -78,37 +75,35 @@
     async (id) => {
       if (id !== undefined) {
         localValue.value = id;
-        if (props.clusterType) {
-          isLoading.value = true;
-          try {
-            const listResult = await getResourceSpecList({
-              spec_cluster_type: props.clusterType,
-              spec_machine_type: 'spider',
-              limit: -1,
-              offset: 0,
-            });
-            const specResultList = listResult.results;
-            const countResult = await getSpecResourceCount({
-              bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-              bk_cloud_id: props.cloudId,
-              spec_ids: specResultList.map((item) => item.spec_id),
-            });
-            specList.value = specResultList.map((item) => ({
-              id: item.spec_id,
+        isLoading.value = true;
+        try {
+          const listResult = await getResourceSpecList({
+            spec_cluster_type: 'tendbcluster',
+            spec_machine_type: 'proxy',
+            limit: -1,
+            offset: 0,
+          });
+          const specResultList = listResult.results;
+          const countResult = await getSpecResourceCount({
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+            bk_cloud_id: props.cloudId,
+            spec_ids: specResultList.map((item) => item.spec_id),
+          });
+          specList.value = specResultList.map((item) => ({
+            id: item.spec_id,
+            name: item.spec_name,
+            isCurrent: false,
+            specData: {
               name: item.spec_name,
-              isCurrent: false,
-              specData: {
-                name: item.spec_name,
-                cpu: item.cpu,
-                id: item.spec_id,
-                mem: item.mem,
-                count: countResult[item.spec_id],
-                storage_spec: item.storage_spec,
-              },
-            }));
-          } finally {
-            isLoading.value = false;
-          }
+              cpu: item.cpu,
+              id: item.spec_id,
+              mem: item.mem,
+              count: countResult[item.spec_id],
+              storage_spec: item.storage_spec,
+            },
+          }));
+        } finally {
+          isLoading.value = false;
         }
       }
     },
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/components/CapacityChange.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/components/CapacityChange.vue
index 29852c16b1..cc434f0dd8 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/components/CapacityChange.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/components/CapacityChange.vue
@@ -32,7 +32,7 @@
       :cloud-id="data.bk_cloud_id"
       :cluster-shard-num="data.cluster_shard_num"
       cluster-type="tendbcluster"
-      machine-type="remote"
+      machine-type="backend"
       :plan-form-item-props="{
         property: 'specId',
         required: true,
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/proxy-scale-up/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/proxy-scale-up/pages/page1/Index.vue
index 4c0d528fae..80bb0c56b5 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/proxy-scale-up/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/proxy-scale-up/pages/page1/Index.vue
@@ -165,7 +165,7 @@
       cluster: item.master_domain,
       clusterId: item.id,
       bkCloudId: item.bk_cloud_id,
-      clusterType: item.cluster_spec.spec_cluster_type,
+      clusterType: item.cluster_type,
       nodeType: '',
       masterCount,
       slaveCount,
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/slave-rebuild/pages/page1/components/new-host/components/render-data/RenderNewSlaveHost.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/slave-rebuild/pages/page1/components/new-host/components/render-data/RenderNewSlaveHost.vue
index 6fc24030e5..30f36b5026 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/slave-rebuild/pages/page1/components/new-host/components/render-data/RenderNewSlaveHost.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/slave-rebuild/pages/page1/components/new-host/components/render-data/RenderNewSlaveHost.vue
@@ -269,7 +269,7 @@
           limit: -1,
           spec_name: newClusterData.specConfig.name,
           spec_cluster_type: ClusterTypes.TENDBCLUSTER,
-          spec_machine_type: 'spider',
+          spec_machine_type: 'proxy',
           enable: true,
         }).then((specResult) => {
           if (specResult.results.length) {
diff --git a/dbm-ui/frontend/src/views/deployment-plan/list/Index.vue b/dbm-ui/frontend/src/views/deployment-plan/list/Index.vue
index b7b1b879f5..7570c7af2c 100644
--- a/dbm-ui/frontend/src/views/deployment-plan/list/Index.vue
+++ b/dbm-ui/frontend/src/views/deployment-plan/list/Index.vue
@@ -63,9 +63,9 @@
       </BkTag>
     </template>
     <PlanOperation
-      :cluster-type="clusterType"
+      cluster-type="redis"
       :data="operationData"
-      :machine-type="activeMachineType"
+      :machine-type="clusterType"
       @change="handlePlanOperationChange" />
   </DbSideslider>
 </template>
@@ -281,8 +281,8 @@
     margin: -24px;
 
     .header-tab {
-      padding: 0 24px;
       z-index: 99;
+      padding: 0 24px;
       background: #fff;
 
       .bk-tab-content {
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 5e716d0494..5de41d126f 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/Index.vue
@@ -53,7 +53,7 @@
     },
   ];
 
-  const activeTab = useDebouncedRef(route.params.page);
+  const activeTab = useDebouncedRef(route.params.page as string);
 
   const renderComponentMap = {
     'summary-view': SummaryView,
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue
index 716697dc82..27f30e86ba 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue
@@ -133,7 +133,8 @@
       label: 'IP',
       field: 'ip',
       fixed: 'left',
-      with: 120,
+      minWidth: 120,
+      with: 150,
     },
     {
       label: t('管控区域'),
@@ -207,6 +208,7 @@
     {
       label: t('操作'),
       field: 'id',
+      fixed: 'right',
       width: 100,
       render: ({ data }: {data: DbResourceModel}) => (
         <db-popconfirm
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/batch-setting/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/batch-setting/Index.vue
index 80657e7fd9..107c5d8cfc 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/batch-setting/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/batch-setting/Index.vue
@@ -19,7 +19,8 @@
           :model="formData">
           <DbFormItem
             :label="t('所属业务')"
-            property="for_biz">
+            property="for_biz"
+            required>
             <div class="com-input">
               <BkSelect
                 v-model="formData.for_biz"
@@ -34,7 +35,8 @@
           </DbFormItem>
           <DbFormItem
             :label="t('所属DB类型')"
-            property="resource_type">
+            property="resource_type"
+            required>
             <div class="com-input">
               <BkSelect
                 v-model="formData.resource_type"
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/import-host/components/FormPanel.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/import-host/components/FormPanel.vue
index 70d1e91116..58328336f7 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/import-host/components/FormPanel.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/import-host/components/FormPanel.vue
@@ -95,7 +95,8 @@
         :model="formData">
         <BkFormItem
           :label="t('所属业务')"
-          property="for_biz">
+          property="for_biz"
+          required>
           <div class="com-input">
             <BkSelect
               v-model="formData.for_biz"
@@ -110,7 +111,8 @@
         </BkFormItem>
         <BkFormItem
           :label="t('所属DB类型')"
-          property="resource_type">
+          property="resource_type"
+          required>
           <div class="com-input">
             <BkSelect
               v-model="formData.resource_type"
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/Index.vue
index 53adb89878..49c6396f23 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/Index.vue
@@ -125,6 +125,10 @@
     handleSubmit();
   });
 
+  onDeactivated(() => {
+    searchParams.value = {};
+  });
+
   defineExpose<Expose>({
     clearValue() {
       searchParams.value = {};
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/DeviceClass.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/DeviceClass.vue
index d133e72f41..2da3fc6885 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/DeviceClass.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/DeviceClass.vue
@@ -15,12 +15,16 @@
   <BkSelect
     filterable
     :input-search="false"
+    :loading="isLoading"
     :model-value="defaultValue"
     multiple
     :placeholder="t('请选择机型')"
-    @change="handleChange">
+    :remote-method="remoteMethod"
+    :scroll-height="384"
+    @change="handleChange"
+    @scroll-end="handleScrollEnd">
     <BkOption
-      v-for="(item, index) in data"
+      v-for="(item, index) in deviceList"
       :key="`${item}#${index}`"
       :label="item"
       :value="item">
@@ -52,10 +56,44 @@
 
   const { t } = useI18n();
 
-  const { data } = useRequest(fetchDeviceClass, {
-    initialData: [],
+  const deviceList = ref<string[]>([]);
+  const scrollLoading = ref(false);
+
+  const searchParams = {
+    offset: 0,
+    limit: 12,
+    name: '',
+  };
+
+  let isAppend = false;
+
+  const { loading: isLoading, run: getDeviceClassList } = useRequest(fetchDeviceClass, {
+    defaultParams: [searchParams],
+    onSuccess(data) {
+      const deviceClassList = data.results.map((item) => item.device_type);
+      if (isAppend) {
+        deviceList.value.push(...deviceClassList);
+        return;
+      }
+
+      deviceList.value = deviceClassList;
+    },
   });
 
+  const handleScrollEnd = () => {
+    scrollLoading.value = true;
+    isAppend = true;
+    searchParams.offset += searchParams.limit;
+    getDeviceClassList(searchParams);
+  };
+
+  const remoteMethod = (value: string) => {
+    isAppend = false;
+    searchParams.name = value;
+    searchParams.offset = 0;
+    getDeviceClassList(searchParams);
+  };
+
   const handleChange = (value: string[]) => {
     emits('change', value.join(','));
   };
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 8cd576f642..de937daf9e 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
@@ -15,31 +15,32 @@
   <BkLoading :loading="isResourceSpecLoading">
     <BkComposeFormItem class="search-spec-id">
       <BkSelect
-        v-model="currentCluster"
+        v-model="currentDbType"
         :clearable="false"
+        :disabled="isDbTypeDisabled"
         filterable
         :input-search="false"
         style="width: 150px"
         @change="handleClusterChange">
         <BkOption
-          v-for="item in Object.values(clusterTypeInfos)"
+          v-for="item in Object.values(DBTypeInfos)"
           :key="item.id"
           :label="item.name"
           :value="item.id" />
       </BkSelect>
       <BkSelect
-        :key="currentCluster"
+        :key="currentDbType"
         v-model="currentMachine"
         :clearable="false"
-        :disabled="!currentCluster"
+        :disabled="!currentDbType"
         filterable
         :input-search="false"
         style="width: 150px">
         <BkOption
           v-for="item in clusterMachineList"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id" />
+          :key="item.value"
+          :label="item.label"
+          :value="item.value" />
       </BkSelect>
       <BkSelect
         :key="currentMachine"
@@ -66,44 +67,50 @@
 
   import { getResourceSpec, getResourceSpecList } from '@services/source/dbresourceSpec';
 
-  import { type ClusterTypeInfoItem, clusterTypeInfos, ClusterTypes } from '@common/const';
+  import { DBTypeInfos, DBTypes, type InfoItem } from '@common/const';
 
   interface Props {
-    defaultValue?: number | string;
+    model: Record<string, any>;
   }
 
   interface Emits {
-    (e: 'change', value: Props['defaultValue']): void;
+    (e: 'change', value: ValueType): void;
   }
 
   interface Expose {
     reset: () => void;
   }
 
+  type ValueType = number | string;
+
+  const props = defineProps<Props>();
+
   const emits = defineEmits<Emits>();
 
   defineOptions({
     inheritAttrs: false,
   });
 
-  const defaultValue = defineModel<Props['defaultValue']>('defaultValue');
+  const defaultValue = defineModel<ValueType>('defaultValue');
 
   const { t } = useI18n();
 
   // 临时修复 bk-select 无法重置的问题
   const rerenderKey = ref(0);
 
-  const currentCluster = ref('');
+  const currentDbType = ref('');
   const currentMachine = ref('');
-  const clusterMachineList = shallowRef<ClusterTypeInfoItem['machineList']>([]);
+  const clusterMachineList = shallowRef<InfoItem['machineList']>([]);
+
+  const isDbTypeDisabled = computed(() => props.model.resource_type && props.model.resource_type !== 'PUBLIC');
 
   const { loading: isResourceSpecLoading, run: fetchResourceSpecDetail } = useRequest(getResourceSpec, {
     manual: true,
     onSuccess(data) {
       const { spec_cluster_type: clusterType, spec_machine_type: machineType } = data;
-      currentCluster.value = clusterType;
+      currentDbType.value = clusterType;
       currentMachine.value = machineType;
-      clusterMachineList.value = clusterTypeInfos[clusterType]?.machineList || [];
+      clusterMachineList.value = DBTypeInfos[clusterType as unknown as DBTypes]?.machineList || [];
     },
   });
 
@@ -135,7 +142,7 @@
     () => {
       if (currentMachine.value) {
         fetchResourceSpecList({
-          spec_cluster_type: currentCluster.value,
+          spec_cluster_type: currentDbType.value,
           spec_machine_type: currentMachine.value,
           limit: -1,
         });
@@ -146,13 +153,31 @@
     },
   );
 
-  const handleClusterChange = (value: ClusterTypes) => {
-    clusterMachineList.value = clusterTypeInfos[value]?.machineList || [];
+  watch(
+    () => props.model,
+    () => {
+      const dbType = props.model.resource_type;
+      if (dbType && currentDbType.value && dbType !== currentDbType.value && dbType !== 'PUBLIC') {
+        currentDbType.value = dbType;
+        clusterMachineList.value = DBTypeInfos[dbType as DBTypes]?.machineList || [];
+        currentMachine.value = '';
+        defaultValue.value = '';
+        return;
+      }
+      defaultValue.value = props.model.spec_id;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleClusterChange = (value: DBTypes) => {
+    clusterMachineList.value = DBTypeInfos[value]?.machineList || [];
     currentMachine.value = '';
     defaultValue.value = '';
   };
 
-  const handleChange = (value: Props['defaultValue']) => {
+  const handleChange = (value: ValueType) => {
     defaultValue.value = value;
     emits('change', value);
   };
@@ -160,7 +185,8 @@
   defineExpose<Expose>({
     reset() {
       rerenderKey.value = Date.now();
-      (currentCluster.value = ''), (currentMachine.value = '');
+      currentDbType.value = '';
+      currentMachine.value = '';
       clusterMachineList.value = [];
     },
   });
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/field-input/components/CollectSearchParams.vue b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/field-input/components/CollectSearchParams.vue
index aea30ce5df..405939c016 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/field-input/components/CollectSearchParams.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/field-input/components/CollectSearchParams.vue
@@ -225,7 +225,7 @@
   const handleRemove = (payload: { name: string }) => {
     const result = _.filter(list.value, (item) => item.name !== payload.name);
     if (collectName.value === payload.name) {
-      collectSelectRef.value.handleClear({
+      collectSelectRef.value?.handleClear({
         stopPropagation: () => undefined,
       });
     }
diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/Index.vue
index 41f4ce59a9..1c319e53a8 100644
--- a/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/search-box/Index.vue
@@ -6,7 +6,6 @@
       :label="t('所属业务')"
       required>
       <Biz
-        ref="bizRef"
         :model="searchParams"
         @change="handleSearch" />
     </BkFormItem>
@@ -14,19 +13,16 @@
       :label="t('所属DB类型')"
       required>
       <Db
-        ref="dbRef"
         :model="searchParams"
-        @change="handleSearch" />
+        @change="(data) => handleSearch(data, 'db')" />
     </BkFormItem>
     <BkFormItem :label="t('地域 - 园区')">
       <Region
-        ref="regionRef"
         :model="searchParams"
         @change="handleSearch" />
     </BkFormItem>
     <BkFormItem :label="t('规格')">
       <Spec
-        ref="specRef"
         :model="searchParams"
         @change="handleSearch" />
     </BkFormItem>
@@ -53,40 +49,41 @@
   const { t } = useI18n();
   const { getSearchParams, replaceSearchParams } = useUrlSearch();
 
-  const bizRef = ref<InstanceType<typeof Biz>>();
-  const dbRef = ref<InstanceType<typeof Db>>();
-  const regionRef = ref<InstanceType<typeof Region>>();
-  const specRef = ref<InstanceType<typeof Spec>>();
   const searchParams = ref(getSearchParams());
 
   const filterEmptyValues = (obj: any): any =>
     _.pickBy(obj, (value) => value !== '' && (!_.isArray(value) || !_.isEmpty(value)));
 
-  const handleSearch = () => {
-    Promise.all([
-      bizRef.value!.getValue(),
-      dbRef.value!.getValue(),
-      regionRef.value!.getValue(),
-      specRef.value!.getValue(),
-    ]).then(([biz, db, region, spec]) => {
-      const parmas = filterEmptyValues({
-        ...biz,
-        ...db,
-        ...region,
-        ...spec,
-      });
-      replaceSearchParams(parmas);
-      searchParams.value = parmas;
-      emits('search');
-    });
+  const handleSearch = (data = {} as Record<string, string | number>, type?: string, isInit = false) => {
+    let params = getSearchParams();
+    Object.assign(params, data);
+    if (params.db_type !== 'PUBLIC' && params.db_type !== params.cluster_type) {
+      params.cluster_type = params.db_type;
+      delete params.machine_type;
+      delete params.spec_id_list;
+    }
+    if ((type === 'db' && data.db_type === 'PUBLIC') || (isInit && params.db_type === 'PUBLIC')) {
+      delete params.cluster_type;
+      delete params.machine_type;
+      delete params.spec_id_list;
+    }
+    if (isInit) {
+      // 初始化一定要带db_type和业务id
+      params.db_type = params.db_type || 'PUBLIC';
+      params.for_biz = params.for_biz || '0';
+    }
+    params = filterEmptyValues(params);
+    replaceSearchParams(params);
+    searchParams.value = params;
+    emits('search');
   };
 
   onMounted(() => {
-    handleSearch();
+    handleSearch({}, '', true);
   });
 
   onActivated(() => {
-    handleSearch();
+    handleSearch({}, '', true);
   });
 </script>
 
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 950bd26110..b3d6208751 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
@@ -22,13 +22,7 @@
   }
 
   interface Emits {
-    (e: 'change'): void;
-  }
-
-  interface Exposes {
-    getValue: () => {
-      for_biz: number;
-    };
+    (e: 'change', value: { for_biz: number }): void;
   }
 
   const props = defineProps<Props>();
@@ -70,12 +64,8 @@
   );
 
   const handleChange = () => {
-    emits('change');
-  };
-
-  defineExpose<Exposes>({
-    getValue: () => ({
+    emits('change', {
       for_biz: Number(localValue.value),
-    }),
-  });
+    });
+  };
 </script>
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 86163cea36..07f18bded8 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
@@ -24,13 +24,7 @@
   }
 
   interface Emits {
-    (e: 'change'): void;
-  }
-
-  interface Exposes {
-    getValue: () => {
-      db_type: string;
-    };
+    (e: 'change', value: { db_type: string }): void;
   }
 
   const props = defineProps<Props>();
@@ -66,12 +60,8 @@
   );
 
   const handleChange = () => {
-    emits('change');
-  };
-
-  defineExpose<Exposes>({
-    getValue: () => ({
+    emits('change', {
       db_type: localValue.value,
-    }),
-  });
+    });
+  };
 </script>
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 820d376f12..25ce84f5f1 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
@@ -41,14 +41,13 @@
   }
 
   interface Emits {
-    (e: 'change'): void;
-  }
-
-  interface Exposes {
-    getValue: () => {
-      city: string;
-      subzone_ids: string;
-    };
+    (
+      e: 'change',
+      value: {
+        city: string;
+        subzone_ids: string;
+      },
+    ): void;
   }
 
   const props = defineProps<Props>();
@@ -85,21 +84,19 @@
     },
   );
 
+  const getLocalValue = () => ({
+    city: cityCode.value,
+    subzone_ids: subzoneIds.value.join(','),
+  });
+
   const handleChangeCity = () => {
     subzoneIds.value = [];
-    emits('change');
+    emits('change', getLocalValue());
   };
 
   const handleChangeSubzone = () => {
-    emits('change');
+    emits('change', getLocalValue());
   };
-
-  defineExpose<Exposes>({
-    getValue: () => ({
-      city: cityCode.value,
-      subzone_ids: subzoneIds.value.join(','),
-    }),
-  });
 </script>
 
 <style lang="less" scoped>
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 6eab620338..db9fdf2109 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
@@ -1,30 +1,31 @@
 <template>
   <BkComposeFormItem class="search-box-select-spec">
     <BkSelect
-      v-model="clusterType"
+      v-model="dbType"
+      :disabled="isDbTypeDisabled"
       style="width: 150px"
       @change="handleChangeCluster">
       <BkOption
-        v-for="item in clusterTypeList"
+        v-for="item in DBTypeInfos"
         :key="item.id"
         :label="item.name"
         :value="item.id" />
     </BkSelect>
     <BkSelect
-      :key="clusterType"
+      :key="dbType"
       v-model="machineType"
-      :disabled="!clusterType"
+      :disabled="!dbType"
       style="width: 150px"
       @change="handleChangeMachine">
       <BkOption
         v-for="item in clusterMachineList"
-        :key="item.id"
-        :label="item.name"
-        :value="item.id" />
+        :key="item.value"
+        :label="item.label"
+        :value="item.value" />
     </BkSelect>
     <BkSelect
       :key="machineType"
-      v-model:model-value="specIdList"
+      v-model="specIdList"
       collapse-tags
       :disabled="!machineType"
       :loading="isLoading"
@@ -46,36 +47,33 @@
 
   import { getResourceSpecList } from '@services/source/dbresourceSpec';
 
-  import { type ClusterTypeInfoItem, clusterTypeInfos, ClusterTypes } from '@common/const';
+  import { DBTypeInfos, DBTypes, type InfoItem } from '@common/const';
 
   interface Props {
     model: Record<string, string>;
   }
 
   interface Emits {
-    (e: 'change'): void;
-  }
-
-  interface Exposes {
-    getValue: () => {
-      cluster_type: string;
-      machine_type: string;
-      spec_id_list: string;
-    };
+    (
+      e: 'change',
+      value: {
+        cluster_type: string;
+        machine_type: string;
+        spec_id_list: string;
+      },
+    ): void;
   }
 
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
-  const clusterType = ref('');
+  const dbType = ref('');
   const machineType = ref('');
   const specIdList = ref<string[]>([]);
-  const clusterMachineList = ref<ClusterTypeInfoItem['machineList']>([]);
+  const clusterMachineList = ref<InfoItem['machineList']>([]);
 
-  const clusterTypeList = computed(
-    () => Object.values(clusterTypeInfos).filter((item) => item.dbType === props.model.db_type) || [],
-  );
+  const isDbTypeDisabled = computed(() => !!props.model.db_type && props.model.db_type !== 'PUBLIC');
 
   const {
     loading: isLoading,
@@ -88,18 +86,29 @@
   watch(
     () => props.model,
     () => {
-      if (props.model.cluster_type) {
-        clusterType.value = props.model.cluster_type;
-        clusterMachineList.value = clusterTypeInfos[props.model.cluster_type as ClusterTypes]?.machineList || [];
+      const modelDbType = props.model.db_type;
+      if (!props.model.spec_id_list) {
+        specIdList.value = [];
       }
+      dbType.value = props.model.cluster_type || '';
+      machineType.value = props.model.machine_type || '';
+      clusterMachineList.value = dbType.value ? DBTypeInfos[dbType.value as DBTypes]?.machineList || [] : [];
+      if (modelDbType && modelDbType !== dbType.value && modelDbType !== 'PUBLIC') {
+        dbType.value = modelDbType;
+        machineType.value = '';
+        specIdList.value = [];
+        return;
+      }
+
       if (props.model.machine_type) {
         machineType.value = props.model.machine_type;
         fetchResourceSpecList({
-          spec_cluster_type: clusterType.value,
+          spec_cluster_type: dbType.value,
           spec_machine_type: props.model.machine_type,
           limit: -1,
         });
       }
+
       if (props.model.spec_id_list) {
         specIdList.value = props.model.spec_id_list.split(',');
       }
@@ -111,32 +120,28 @@
 
   const handleChange = (value: string[]) => {
     specIdList.value = value;
-    emits('change');
+    emits('change', {
+      cluster_type: dbType.value,
+      machine_type: machineType.value,
+      spec_id_list: specIdList.value.join(','),
+    });
   };
 
   const handleChangeMachine = (value: string) => {
     machineType.value = value;
     fetchResourceSpecList({
-      spec_cluster_type: clusterType.value,
+      spec_cluster_type: dbType.value,
       spec_machine_type: value,
       limit: -1,
     });
     handleChange([]);
   };
 
-  const handleChangeCluster = (value: string) => {
-    clusterMachineList.value = clusterTypeInfos[value as ClusterTypes]?.machineList || [];
-    clusterType.value = value;
+  const handleChangeCluster = (value: DBTypes) => {
+    clusterMachineList.value = DBTypeInfos[value]?.machineList || [];
+    dbType.value = value;
     handleChangeMachine('');
   };
-
-  defineExpose<Exposes>({
-    getValue: () => ({
-      cluster_type: clusterType.value,
-      machine_type: machineType.value,
-      spec_id_list: specIdList.value.join(','),
-    }),
-  });
 </script>
 
 <style lang="less" scoped>
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 915bbd4fb0..91e974961f 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/Index.vue
@@ -13,9 +13,7 @@
 
 <template>
   <div class="resource-spec-list-page">
-    <ClusterTab
-      v-model="curTab"
-      :excludes="[ClusterTypes.SQLSERVER_SINGLE]" />
+    <DbTab v-model="curTab" />
     <div
       :key="curTab"
       class="wrapper">
@@ -24,13 +22,13 @@
         type="card">
         <BkTabPanel
           v-for="childTab of childrenTabs"
-          :key="childTab.id"
-          :label="childTab.name"
-          :name="childTab.id" />
+          :key="childTab.value"
+          :label="childTab.label"
+          :name="childTab.value" />
       </BkTab>
       <SpecList
-        :cluster-type="curTab"
-        :cluster-type-label="clusterTypeLabel"
+        :db-type="curTab"
+        :db-type-label="clusterTypeLabel"
         :machine-type="curChildTab"
         :machine-type-label="machineTypeLabel" />
     </div>
@@ -41,26 +39,26 @@
 
   import { useFunController } from '@stores';
 
-  import { clusterTypeInfos, ClusterTypes } from '@common/const';
+  import { DBTypeInfos, DBTypes } from '@common/const';
 
-  import ClusterTab from '@components/cluster-tab/Index.vue';
+  import DbTab from '@components/db-tab/Index.vue';
 
   import SpecList from './components/SpecList.vue';
 
   const route = useRoute();
   const funControllerStore = useFunController();
 
-  const curTab = ref<ClusterTypes>(ClusterTypes.TENDBSINGLE);
+  const curTab = ref<DBTypes>(DBTypes.MYSQL);
   const curChildTab = ref('');
 
   const renderTabs = computed(() =>
-    Object.values(clusterTypeInfos).filter((item) => {
+    Object.values(DBTypeInfos).filter((item) => {
       const data = funControllerStore.funControllerData[item.moduleId];
       if (!data) {
         return false;
       }
 
-      const childItem = (data.children as Record<ClusterTypes, ControllerBaseInfo>)[item.id];
+      const childItem = (data.children as Record<DBTypes, ControllerBaseInfo>)[item.id];
 
       // 若有对应的模块子功能，判断是否开启
       if (childItem) {
@@ -73,7 +71,9 @@
   );
   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 ?? '');
+  const machineTypeLabel = computed(
+    () => childrenTabs.value.find((item) => item.value === curChildTab.value)?.label ?? '',
+  );
 
   watch(curTab, (newVal, oldVal) => {
     if (oldVal !== newVal) {
@@ -84,7 +84,7 @@
   onMounted(() => {
     const { spec_cluster_type: clusterType } = route.query;
     if (clusterType) {
-      curTab.value = clusterType as ClusterTypes;
+      curTab.value = clusterType as DBTypes;
     }
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecCreate.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecCreate.vue
index 594aac0057..0090df41a2 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecCreate.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecCreate.vue
@@ -35,20 +35,18 @@
           {{ machineTypeLabel }}
         </div>
         <div class="machine-item-content">
-          <SpecCPU
-            v-model="formdata.cpu"
-            :is-edit="isEdit" />
-          <SpecMem
-            v-model="formdata.mem"
-            :is-edit="isEdit" />
-          <SpecDevice
-            v-model="formdata.device_class"
+          <SpecDeviceOrCpuMem
+            ref="specDeviceOrCpuMemRef"
+            v-model:cpu="formdata.cpu"
+            v-model:device-class="formdata.device_class"
+            v-model:mem="formdata.mem"
             :is-edit="isEdit" />
           <SpecStorage
-            v-model="formdata.storage_spec"
+            ref="specStorageRef"
+            :data="formdata.storage_spec"
             :is-edit="isEdit"
             :is-required="isRequired"
-            :machine-type="machineType" />
+            @table-value-change="handleTableValueChange" />
         </div>
       </div>
       <BkFormItem
@@ -129,15 +127,13 @@
   import type ResourceSpecModel from '@services/model/resource-spec/resourceSpec';
   import { createResourceSpec, updateResourceSpec, verifyDuplicatedSpecName } from '@services/source/dbresourceSpec';
 
-  import { ClusterTypes } from '@common/const';
+  import { ClusterTypes, DBTypes } from '@common/const';
 
   import { useHasQPS } from '../hooks/useHasQPS';
 
-  import SpecCPU from './spec-form-item/SpecCPU.vue';
-  import SpecDevice from './spec-form-item/SpecDevice.vue';
-  import SpecMem from './spec-form-item/SpecMem.vue';
+  import SpecDeviceOrCpuMem from './spec-form-item/spec-device-or-cpu-mem/Index.vue';
+  import SpecStorage from './spec-form-item/spec-storage/Index.vue';
   import SpecQps from './spec-form-item/SpecQPS.vue';
-  import SpecStorage from './spec-form-item/SpecStorage.vue';
 
   import { messageSuccess } from '@/utils';
 
@@ -147,11 +143,11 @@
   }
 
   interface Data extends Omit<ResourceSpecModel, 'device_class'> {
-    device_class: string[] | string;
+    device_class: string[];
   }
 
   interface Props {
-    clusterType: string;
+    dbType: string;
     machineType: string;
     machineTypeLabel: string;
     mode: string;
@@ -163,27 +159,28 @@
   const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
+  const specDeviceOrCpuMemRef = ref<InstanceType<typeof SpecDeviceOrCpuMem>>();
+  const specStorageRef = ref<InstanceType<typeof SpecStorage>>();
+
   const notRequiredStorageList = [
-    `${ClusterTypes.TENDBHA}_proxy`,
-    `${ClusterTypes.TWEMPROXY_REDIS_INSTANCE}_twemproxy`,
-    `${ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE}_twemproxy`,
-    `${ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER}_predixy`,
-    `${ClusterTypes.ES}_es_client`,
-    `${ClusterTypes.PULSAR}_pulsar_broker`,
-    `${ClusterTypes.TENDBCLUSTER}_spider`,
+    `${DBTypes.MYSQL}_proxy`,
+    `${DBTypes.REDIS}_${ClusterTypes.TWEMPROXY_REDIS_INSTANCE}`,
+    `${DBTypes.REDIS}_${ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE}`,
+    `${DBTypes.REDIS}_${ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER}`,
+    `${DBTypes.ES}_es_client`,
+    `${DBTypes.PULSAR}_pulsar_broker`,
+    `${DBTypes.TENDBCLUSTER}_proxy`,
   ];
 
-  const isRequired = !notRequiredStorageList.includes(`${props.clusterType}_${props.machineType}`);
+  const isRequired = !notRequiredStorageList.includes(`${props.dbType}_${props.machineType}`);
 
-  const isSqlserver = [ClusterTypes.SQLSERVER_SINGLE, ClusterTypes.SQLSERVER_HA].includes(
-    props.clusterType as ClusterTypes,
-  );
+  const isSqlserver = computed(() => props.dbType === DBTypes.SQLSERVER);
 
   const initFormdata = () => {
     if (props.data) {
       const data = _.cloneDeep(props.data);
       if (data.device_class.length === 0) {
-        data.device_class = '-1';
+        data.device_class = ['-1'];
       }
       return data;
     }
@@ -220,11 +217,11 @@
         max: '' as string | number,
         min: '' as string | number,
       },
-      storage_spec: isSqlserver ? genSystemDriveStorageSpec() : genStorageSpec(),
-      device_class: '-1' as string[] | string,
+      storage_spec: isSqlserver.value ? genSystemDriveStorageSpec() : genStorageSpec(),
+      device_class: ['-1'],
       desc: '',
       enable: true,
-      spec_cluster_type: props.clusterType,
+      spec_cluster_type: props.dbType,
       spec_machine_type: props.machineType,
       spec_name: '',
       spec_id: undefined,
@@ -245,10 +242,10 @@
   const isLoading = ref(false);
   const isCustomInput = ref(false);
   const isShowSwitchTip = ref(false);
-
+  const isTableValueChange = ref(false);
   const initFormdataStringify = JSON.stringify(formdata.value);
 
-  const isChange = computed(() => JSON.stringify(formdata.value) !== initFormdataStringify);
+  const isChange = computed(() => JSON.stringify(formdata.value) !== initFormdataStringify || isTableValueChange.value);
 
   const nameRules = computed(() => [
     {
@@ -260,7 +257,7 @@
     {
       validator: (value: string) =>
         verifyDuplicatedSpecName({
-          spec_cluster_type: props.clusterType,
+          spec_cluster_type: props.dbType,
           spec_machine_type: props.machineType,
           spec_name: value,
           spec_id: props.mode === 'edit' ? formdata.value.spec_id : undefined,
@@ -281,6 +278,10 @@
     { deep: true },
   );
 
+  const handleTableValueChange = () => {
+    isTableValueChange.value = true;
+  };
+
   const handleCancelSwitch = () => {
     isShowSwitchTip.value = false;
   };
@@ -325,55 +326,62 @@
     isCustomInput.value = true;
   };
 
-  const submit = () => {
+  const submit = async () => {
     isLoading.value = true;
-    formRef.value
-      .validate()
-      .then(() => {
-        const params = Object.assign(_.cloneDeep(formdata.value), {
-          spec_id: (formdata.value as ResourceSpecModel).spec_id,
-          device_class: formdata.value.device_class === '-1' ? [] : formdata.value.device_class,
-          storage_spec: formdata.value.storage_spec.filter((item) => item.mount_point && item.size && item.type),
+    try {
+      await formRef.value.validate();
+      const storageSpec = await specStorageRef.value!.getValue();
+      const params = Object.assign(_.cloneDeep(formdata.value), {
+        spec_id: (formdata.value as ResourceSpecModel).spec_id,
+        device_class: formdata.value.device_class[0] === '-1' ? [] : formdata.value.device_class,
+        storage_spec: storageSpec,
+      });
+      const type = specDeviceOrCpuMemRef.value!.getCurrentType();
+      if (type === 'device_class') {
+        Object.assign(params, {
+          cpu: {
+            min: 0,
+            max: 0,
+          },
+          mem: {
+            min: 0,
+            max: 0,
+          },
         });
-        if (props.mode === 'edit') {
-          updateResourceSpec(params)
-            .then(() => {
-              messageSuccess(t('编辑成功'));
-              emits('successed');
-              window.changeConfirm = false;
-            })
-            .finally(() => {
-              isLoading.value = false;
-            });
-          return;
-        }
+      } else {
+        params.device_class = [];
+      }
 
-        if (!props.hasInstance) {
-          delete params.instance_num;
-        }
+      if (props.mode === 'edit') {
+        updateResourceSpec(params).then(() => {
+          messageSuccess(t('编辑成功'));
+          emits('successed');
+          window.changeConfirm = false;
+        });
+        return;
+      }
 
-        if (hasQPS) {
-          params.qps = {
-            max: Number(params.qps?.max),
-            min: Number(params.qps?.min),
-          };
-        } else {
-          delete params.qps;
-        }
+      if (!props.hasInstance) {
+        delete params.instance_num;
+      }
+
+      if (hasQPS) {
+        params.qps = {
+          max: Number(params.qps?.max),
+          min: Number(params.qps?.min),
+        };
+      } else {
+        delete params.qps;
+      }
 
-        createResourceSpec(params)
-          .then(() => {
-            messageSuccess(t('新建成功'));
-            emits('successed');
-            window.changeConfirm = false;
-          })
-          .finally(() => {
-            isLoading.value = false;
-          });
-      })
-      .finally(() => {
-        isLoading.value = false;
+      createResourceSpec(params).then(() => {
+        messageSuccess(t('新建成功'));
+        emits('successed');
+        window.changeConfirm = false;
       });
+    } finally {
+      isLoading.value = false;
+    }
   };
 
   const cancel = () => {
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecList.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecList.vue
index 810d1fdcfb..5f1e3e2046 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecList.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/SpecList.vue
@@ -17,7 +17,7 @@
       <AuthButton
         action-id="spec_create"
         class="w-88 mr-8"
-        :resource="databaseType"
+        :resource="dbType"
         theme="primary"
         @click="handleShowCreate">
         {{ t('新建') }}
@@ -87,13 +87,13 @@
       <BkTag
         class="ml-4"
         theme="info">
-        {{ clusterTypeLabel }}
+        {{ dbTypeLabel }}
       </BkTag>
     </template>
     <SpecCreate
       :key="specOperationState.data?.spec_id"
-      :cluster-type="clusterType"
       :data="specOperationState.data"
+      :db-type="dbType"
       :has-instance="hasInstance"
       :is-edit="isSpecOperationEdit && !!specOperationState.data?.is_refer"
       :machine-type="machineType"
@@ -124,8 +124,7 @@
   } from '@hooks';
 
   import {
-    clusterTypeInfos,
-    ClusterTypes,
+    DBTypes,
     UserPersonalSettings,
   } from '@common/const';
 
@@ -140,8 +139,8 @@
   type SpecOperationType = 'create' | 'edit' | 'clone'
 
   interface Props {
-    clusterType: ClusterTypes,
-    clusterTypeLabel: string,
+    dbType: DBTypes,
+    dbTypeLabel: string,
     machineType: string,
     machineTypeLabel: string,
   }
@@ -156,7 +155,6 @@
   const disableSelectMethod = (row: ResourceSpecModel) => (row.is_refer ? t('该规格已被使用_无法删除') : false);
   const setRowClass = (data: ResourceSpecModel) => (data.isRecentSeconds ? 'is-new-row' : '');
 
-  const databaseType = clusterTypeInfos[props.clusterType].dbType;
   const tableRef = ref();
 
   const specOperationState = reactive({
@@ -168,7 +166,7 @@
   const selectedList = ref<ResourceSpecModel[]>([]);
   const hasSelected = computed(() => selectedList.value.length > 0);
   const isSpecOperationEdit = computed(() => specOperationState.type === 'edit');
-  const hasInstance = computed(() => [`${ClusterTypes.ES}_es_datanode`].includes(`${props.clusterType}_${props.machineType}`));
+  const hasInstance = computed(() => [`${DBTypes.ES}_es_datanode`].includes(`${props.dbType}_${props.machineType}`));
   const columns = computed(() => {
     const baseColumns: Column[] = [
       {
@@ -181,7 +179,7 @@
               default: () => (
                 <auth-button
                   action-id="spec_update"
-                  resource={databaseType}
+                  resource={props.dbType}
                   permission={data.permission.spec_update}
                   text
                   theme="primary"
@@ -212,24 +210,28 @@
             {{
               default: () => (
                 <div class="machine-info text-overflow">
-                  <bk-tag class="machine-info-cpu">
-                    CPU = {`${data.cpu.min} ~ ${data.cpu.max}`} {t('核')}
-                  </bk-tag>
-                  <bk-tag class="machine-info-condition" theme="info">
-                    AND
-                  </bk-tag>
-                  <bk-tag class="machine-info-mem">
-                    {t('内存')} = {`${data.mem.min} ~ ${data.mem.max}`} G
-                  </bk-tag>
-                  <bk-tag class="machine-info-condition" theme="info">
-                    AND
-                  </bk-tag>
-                  <bk-tag class="machine-info-device">
-                    {t('机型')} = {data.device_class.join(',') || t('无限制')}
-                  </bk-tag>
-                  <bk-tag class="machine-info-condition" theme="info">
-                    AND
-                </bk-tag>
+                  {data.device_class.length === 0 && data.cpu.min > 0 && <>
+                    <bk-tag class="machine-info-cpu">
+                      CPU = {`${data.cpu.min} ~ ${data.cpu.max}`} {t('核')}
+                    </bk-tag>
+                    <bk-tag class="machine-info-condition" theme="info">
+                      AND
+                    </bk-tag>
+                    <bk-tag class="machine-info-mem">
+                      {t('内存')} = {`${data.mem.min} ~ ${data.mem.max}`} G
+                    </bk-tag>
+                    <bk-tag class="machine-info-condition" theme="info">
+                      AND
+                    </bk-tag>
+                  </>}
+                  {((data.device_class.length === 0 && data.cpu.min === 0) || data.device_class.length > 0) && <>
+                    <bk-tag class="machine-info-device">
+                      {t('机型')} = {data.device_class.join(',') || t('无限制')}
+                    </bk-tag>
+                    <bk-tag class="machine-info-condition" theme="info">
+                      AND
+                    </bk-tag>
+                  </>}
                   <bk-tag class="machine-info-storage">
                     {t('磁盘')} = {
                       data.storage_spec.length > 0
@@ -241,22 +243,26 @@
               ),
               content: () => (
                 <div class="resource-machine-info-tips">
-                  <strong>CPU: </strong>
-                  <div class="resource-machine-info__values mb-10">
-                    <bk-tag>{`${data.cpu.min} ~ ${data.cpu.max}`} {t('核')}</bk-tag>
-                  </div>
-                  <strong>{t('内存')}: </strong>
-                  <div class="resource-machine-info__values mb-10">
-                    <bk-tag>{`${data.mem.min} ~ ${data.mem.max}`} G</bk-tag>
-                  </div>
-                  <strong>{t('机型')}: </strong>
-                  <div class="resource-machine-info__values mb-10">
-                    {
-                      data.device_class.length
-                        ? data.device_class.map(item => <bk-tag>{item}</bk-tag>)
-                        : <bk-tag>{t('无限制')}</bk-tag>
-                    }
-                  </div>
+                  {data.device_class.length === 0 && data.cpu.min > 0 && <>
+                    <strong>CPU: </strong>
+                    <div class="resource-machine-info__values mb-10">
+                      <bk-tag>{`${data.cpu.min} ~ ${data.cpu.max}`} {t('核')}</bk-tag>
+                    </div>
+                    <strong>{t('内存')}: </strong>
+                    <div class="resource-machine-info__values mb-10">
+                      <bk-tag>{`${data.mem.min} ~ ${data.mem.max}`} G</bk-tag>
+                    </div>
+                  </>}
+                  {((data.device_class.length === 0 && data.cpu.min === 0) || data.device_class.length > 0) && <>
+                    <strong>{t('机型')}: </strong>
+                    <div class="resource-machine-info__values mb-10">
+                      {
+                        data.device_class.length
+                          ? data.device_class.map(item => <bk-tag>{item}</bk-tag>)
+                          : <bk-tag>{t('无限制')}</bk-tag>
+                      }
+                    </div>
+                  </>}
                   <strong>{t('磁盘')}: </strong>
                   <div class="resource-machine-info__values">
                     {
@@ -299,7 +305,7 @@
               size="small"
               action-id="spec_update"
               permission={data.permission.spec_update}
-              resource={databaseType}
+              resource={props.dbType}
               model-value={data.enable}
               theme="primary"
             />
@@ -328,7 +334,7 @@
           <>
             <auth-button
               action-id="spec_update"
-              resource={databaseType}
+              resource={props.dbType}
               permission={data.permission.spec_update}
               class="mr-8"
               theme="primary"
@@ -338,7 +344,7 @@
             </auth-button>
             <auth-button
               action-id="spec_create"
-              resource={databaseType}
+              resource={props.dbType}
               permission={data.permission.spec_create}
               class="mr-8"
               theme="primary"
@@ -350,7 +356,7 @@
               <span class="inline-block;" v-bk-tooltips={t('该规格已被使用_无法删除')}>
                 <auth-button
                   action-id="spec_delete"
-                  resource={databaseType}
+                  resource={props.dbType}
                   permission={data.permission.spec_delete}
                   theme="primary"
                   text
@@ -361,7 +367,7 @@
             ) : (
               <auth-button
                 action-id="spec_delete"
-                resource={databaseType}
+                resource={props.dbType}
                 permission={data.permission.spec_delete}
                 theme="primary"
                 text
@@ -415,7 +421,7 @@
   });
 
   watch(() => [
-    props.clusterType,
+    props.dbType,
     props.machineType,
     searchKey.value,
   ], () => {
@@ -434,7 +440,7 @@
     tableRef.value.fetchData({
       spec_name: searchKey.value,
     }, {
-      spec_cluster_type: props.clusterType,
+      spec_cluster_type: props.dbType,
       spec_machine_type: props.machineType,
     });
   };
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecCPU.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecCPU.vue
index eb33143f95..821aa88ee7 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecCPU.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecCPU.vue
@@ -13,8 +13,8 @@
 
 <template>
   <div class="spec-cpu spec-form-item mb-0">
-    <div class="spec-form-item__label">CPU</div>
-    <div class="spec-form-item__content">
+    <div class="spec-form-item-label">CPU</div>
+    <div class="spec-form-item-content">
       <BkFormItem
         property="cpu.min"
         required>
@@ -35,7 +35,7 @@
             @change="handleLimitChange('min')" />
         </span>
       </BkFormItem>
-      <span class="spec-form-item__desc">{{ $t('至') }}</span>
+      <span class="spec-form-item-desc">{{ $t('至') }}</span>
       <BkFormItem
         property="cpu.max"
         required>
@@ -56,7 +56,7 @@
             @change="handleLimitChange('max')" />
         </span>
       </BkFormItem>
-      <span class="spec-form-item__desc">{{ $t('核') }}</span>
+      <span class="spec-form-item-desc">{{ $t('核') }}</span>
     </div>
   </div>
 </template>
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecDevice.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecDevice.vue
index 98eb485c10..8353ece6fd 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecDevice.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecDevice.vue
@@ -13,10 +13,10 @@
 
 <template>
   <div class="spec-mem spec-form-item">
-    <div class="spec-form-item__label">
+    <div class="spec-form-item-label">
       {{ t('机型') }}
     </div>
-    <div class="spec-form-item__content">
+    <div class="spec-form-item-content">
       <BkFormItem
         property="device_class"
         required
@@ -30,16 +30,20 @@
           :loading="isLoading"
           :model-value="modelValue"
           multiple
-          @change="handleSelectChange">
+          :remote-method="remoteMethod"
+          :scroll-height="384"
+          :scroll-loading="scrollLoading"
+          @change="handleSelectChange"
+          @scroll-end="handleScrollEnd">
           <BkOption
             key="all"
             :label="t('无限制')"
             value="-1" />
           <BkOption
             v-for="item in deviceClassList"
-            :key="item"
-            :label="item"
-            :value="item" />
+            :key="item.value"
+            :label="item.label"
+            :value="item.value" />
         </BkSelect>
       </BkFormItem>
     </div>
@@ -50,7 +54,7 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import { getDeviceClassList } from '@services/source/systemSettings';
+  import { fetchDeviceClass } from '@services/source/dbresourceResource';
 
   const { t } = useI18n();
 
@@ -58,6 +62,20 @@
     default: () => [],
   });
 
+  const deviceClassList = ref<
+    {
+      label: string;
+      value: string;
+    }[]
+  >([]);
+  const scrollLoading = ref(false);
+
+  const searchParams = {
+    offset: 0,
+    limit: 12,
+    name: '',
+  };
+
   const rules = [
     {
       required: true,
@@ -66,19 +84,52 @@
     },
   ];
 
-  const { loading: isLoading, data: deviceClassList } = useRequest(getDeviceClassList);
+  let isAppend = false;
+
+  const { loading: isLoading, run: getDeviceClassList } = useRequest(fetchDeviceClass, {
+    defaultParams: [searchParams],
+    onSuccess(data) {
+      scrollLoading.value = false;
+      const deviceList = data.results.map((item) => ({
+        label: `${item.device_type}(${item.cpu}${t('核')}${item.mem}G})`,
+        value: item.device_type,
+      }));
+      if (isAppend) {
+        deviceClassList.value.push(...deviceList);
+        return;
+      }
+
+      deviceClassList.value = deviceList;
+    },
+  });
+
+  const handleScrollEnd = () => {
+    scrollLoading.value = true;
+    isAppend = true;
+    searchParams.offset += searchParams.limit;
+    getDeviceClassList(searchParams);
+  };
+
+  const remoteMethod = (value: string) => {
+    isAppend = false;
+    searchParams.name = value;
+    searchParams.offset = 0;
+    getDeviceClassList(searchParams);
+  };
 
   const handleSelectChange = (list: string[]) => {
-    if (list[0] === '-1') {
-      // 先选的无限制，后续加选要去除无限制
-      modelValue.value = list.slice(1);
-      return;
-    }
+    if (list.length > 1) {
+      if (list[0] === '-1') {
+        // 先选的无限制，后续加选要去除无限制
+        modelValue.value = list.slice(1);
+        return;
+      }
 
-    if (list[list.length - 1] === '-1') {
-      // 最后选的无限制，前面选过的都要去除
-      modelValue.value = '-1';
-      return;
+      if (list[list.length - 1] === '-1') {
+        // 最后选的无限制，前面选过的都要去除
+        modelValue.value = '-1';
+        return;
+      }
     }
 
     modelValue.value = list;
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecMem.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecMem.vue
index 8758002293..54b2388517 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecMem.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecMem.vue
@@ -13,10 +13,10 @@
 
 <template>
   <div class="spec-mem spec-form-item">
-    <div class="spec-form-item__label">
+    <div class="spec-form-item-label">
       {{ $t('内存') }}
     </div>
-    <div class="spec-form-item__content">
+    <div class="spec-form-item-content">
       <BkFormItem
         property="mem.min"
         required>
@@ -38,7 +38,7 @@
             @change="handleLimitChange('min')" />
         </span>
       </BkFormItem>
-      <span class="spec-form-item__desc">{{ $t('至') }}</span>
+      <span class="spec-form-item-desc">{{ $t('至') }}</span>
       <BkFormItem
         property="mem.max"
         required>
@@ -60,7 +60,7 @@
             @change="handleLimitChange('max')" />
         </span>
       </BkFormItem>
-      <span class="spec-form-item__desc">G</span>
+      <span class="spec-form-item-desc">G</span>
     </div>
   </div>
 </template>
@@ -107,8 +107,8 @@
       display: none;
     }
 
-    &::after {
-      content: 'OR' !important;
-    }
+    // &::after {
+    //   content: 'OR' !important;
+    // }
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecStorage.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecStorage.vue
index 9ba9ae3efe..61215a2567 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecStorage.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/SpecStorage.vue
@@ -17,10 +17,10 @@
     :class="{
       'not-required': !isRequired,
     }">
-    <div class="spec-form-item__label">
+    <div class="spec-form-item-label">
       {{ t('磁盘') }}
     </div>
-    <div class="spec-form-item__content">
+    <div class="spec-form-item-content">
       <BkButton
         v-if="tableData.length === 0"
         @click="handleAddFirstRow">
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/Index.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/Index.vue
new file mode 100644
index 0000000000..fa516cb18d
--- /dev/null
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/Index.vue
@@ -0,0 +1,207 @@
+<!--
+ * 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="spec-device-or-mem spec-form-item">
+    <div class="spec-form-item-label device-or-mem-label">
+      <BkSelect
+        v-model="currentType"
+        :disabled="isEdit"
+        :filterable="false"
+        @change="handleChooseType"
+        @toggle="handleTogglePopover">
+        <template #trigger>
+          <div
+            v-bk-tooltips="{
+              content: t('不支持修改'),
+              disabled: !isEdit,
+            }"
+            class="operation-more-main">
+            <span class="label-content">
+              <BkButton
+                class="mr-4"
+                text>
+                {{ currentTitle }}
+              </BkButton>
+              <DbIcon
+                class="more-icon"
+                :class="{
+                  'more-icon-active': isRotate,
+                  'icon-disabled': isEdit,
+                }"
+                type="down-shape" />
+            </span>
+          </div>
+        </template>
+        <BkOption
+          v-for="(item, index) in titleList"
+          :id="item.value"
+          :key="index"
+          :name="item.title" />
+      </BkSelect>
+    </div>
+    <SpecDevice
+      v-if="currentType === 'device_class'"
+      v-model="deviceClassModelValue"
+      :is-edit="isEdit" />
+    <div
+      v-else
+      class="cpu-mem-main">
+      <SpecCPU
+        v-model="cpuModelValue"
+        :is-edit="isEdit" />
+      <SpecMem
+        v-model="memModelValue"
+        :is-edit="isEdit" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import SpecCPU from './components/SpecCPU.vue';
+  import SpecDevice from './components/SpecDevice.vue';
+  import SpecMem from './components/SpecMem.vue';
+
+  interface Props {
+    isEdit: boolean;
+  }
+
+  interface Exposes {
+    getCurrentType: () => string;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    isEdit: false,
+  });
+
+  const deviceClassModelValue = defineModel<string[]>('deviceClass', { required: true });
+
+  const cpuModelValue = defineModel<{
+    min: number | string;
+    max: number | string;
+  }>('cpu', { required: true });
+
+  const memModelValue = defineModel<{
+    min: number | string;
+    max: number | string;
+  }>('mem', { required: true });
+
+  const { t } = useI18n();
+
+  const titleList = [
+    {
+      title: t('机型'),
+      value: 'device_class',
+    },
+    {
+      title: t('CPU/内存'),
+      value: 'cpu_mem',
+    },
+  ];
+
+  const isRotate = ref(false);
+  const currentType = ref(titleList[0].value);
+
+  const currentTitle = computed(() => (currentType.value === 'device_class' ? titleList[0].title : titleList[1].title));
+
+  watch(
+    [deviceClassModelValue, cpuModelValue],
+    () => {
+      const [firstDeviceClass] = deviceClassModelValue.value;
+      if (firstDeviceClass !== '-1' || (firstDeviceClass === '-1' && !cpuModelValue.value.max)) {
+        // 优先展示机型
+        currentType.value = titleList[0].value;
+        return;
+      }
+
+      currentType.value = titleList[1].value;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleTogglePopover = (isShow: boolean) => {
+    isRotate.value = isShow;
+  };
+
+  const handleChooseType = (value: string) => {
+    if (currentType.value === value) {
+      return;
+    }
+
+    currentType.value = value;
+  };
+
+  defineExpose<Exposes>({
+    getCurrentType() {
+      return currentType.value;
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '../specFormItem.less';
+
+  .spec-device-or-mem {
+    .device-or-mem-label {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .operation-more-main {
+    display: flex;
+    color: #63656e;
+    cursor: pointer;
+    align-items: center;
+
+    .label-content {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        top: 1px;
+        right: -13px;
+        width: 14px;
+        font-weight: normal;
+        color: @danger-color;
+        text-align: center;
+        content: '*';
+      }
+
+      .more-icon {
+        display: inline-block;
+        transform: rotate(0deg);
+        transition: all 0.5s;
+      }
+
+      .more-icon-active {
+        transform: rotate(-180deg);
+      }
+
+      .icon-disabled {
+        color: #c4c6cc;
+      }
+    }
+  }
+
+  .cpu-mem-main {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecCPU.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecCPU.vue
new file mode 100644
index 0000000000..d11511a295
--- /dev/null
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecCPU.vue
@@ -0,0 +1,112 @@
+<!--
+ * 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="spec-cpu spec-form-item mb-0">
+    <div class="spec-form-item-content">
+      <BkFormItem
+        property="cpu.min"
+        required>
+        <span
+          v-bk-tooltips="{
+            content: t('不支持修改'),
+            disabled: !isEdit,
+          }"
+          class="inline-block">
+          <BkInput
+            v-model="modelValue.min"
+            :disabled="isEdit"
+            :max="256"
+            :min="1"
+            :show-control="false"
+            style="width: 80px"
+            type="number"
+            @change="handleLimitChange('min')" />
+        </span>
+      </BkFormItem>
+      <span class="spec-form-item-desc">{{ t('至') }}</span>
+      <BkFormItem
+        property="cpu.max"
+        required>
+        <span
+          v-bk-tooltips="{
+            content: t('不支持修改'),
+            disabled: !isEdit,
+          }"
+          class="inline-block">
+          <BkInput
+            v-model="modelValue.max"
+            :disabled="isEdit"
+            :max="256"
+            :min="1"
+            :show-control="false"
+            style="width: 80px"
+            type="number"
+            @change="handleLimitChange('max')" />
+        </span>
+      </BkFormItem>
+      <span class="spec-form-item-desc">{{ t('核') }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  interface ModelValue {
+    max: number | string;
+    min: number | string;
+  }
+
+  interface Props {
+    isEdit: boolean;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    isEdit: false,
+  });
+
+  const modelValue = defineModel<ModelValue>({ required: true });
+
+  const { t } = useI18n();
+
+  const handleLimitChange = (type: 'min' | 'max') => {
+    const minValue = Number(modelValue.value.min);
+    const maxValue = Number(modelValue.value.max);
+
+    if (!minValue || !maxValue) {
+      return;
+    }
+
+    if (type === 'min' && minValue > maxValue) {
+      modelValue.value.min = maxValue;
+      return;
+    }
+
+    if (type === 'max' && minValue > maxValue) {
+      modelValue.value.max = minValue;
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  @import '../../specFormItem.less';
+
+  .spec-cpu {
+    padding: 0 !important;
+
+    &::after {
+      display: none;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecDevice.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecDevice.vue
new file mode 100644
index 0000000000..2e644a3c8e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecDevice.vue
@@ -0,0 +1,250 @@
+<!--
+ * 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="spec-device spec-form-item">
+    <div class="spec-form-item-content">
+      <BkFormItem
+        property="device_class"
+        required
+        :rules="rules"
+        style="width: 100%">
+        <BkSelect
+          :allow-empty-values="['']"
+          class="device-class-select"
+          :clearable="false"
+          :disabled="isEdit"
+          filterable
+          :input-search="false"
+          :loading="isLoading"
+          :model-value="modelValue"
+          multiple
+          :popover-min-width="330"
+          :remote-method="remoteMethod"
+          :scroll-height="384"
+          :scroll-loading="scrollLoading"
+          selected-style="checkbox"
+          @change="handleSelectChange"
+          @scroll-end="handleScrollEnd">
+          <template #trigger>
+            <BkButton
+              :disabled="isEdit"
+              style="font-size: 14px"
+              text
+              theme="primary">
+              <DbIcon
+                style="margin-right: 5px"
+                type="plus-fill" />
+              {{ t('添加机型') }}
+            </BkButton>
+          </template>
+          <BkOption
+            key="all"
+            :label="t('无限制')"
+            value="-1" />
+          <BkOption
+            v-for="item in deviceClassList"
+            :key="item.value"
+            :value="item.value">
+            <div class="device-list-item">
+              <span>
+                {{ item.label }}
+              </span>
+              <span style="color: #c4c6cc">{{ `${item.cpu}${t('核')}${item.mem}G` }}</span>
+            </div>
+          </BkOption>
+        </BkSelect>
+        <div
+          v-bk-tooltips="{
+            content: t('不支持修改'),
+            disabled: !isEdit,
+          }">
+          <BkTag
+            v-for="(item, index) in modelValue"
+            :key="`${item}-${index}`"
+            closable
+            style="background-color: #fff"
+            @close="() => handleTagClose(index)">
+            {{
+              item === '-1'
+                ? t('无限制')
+                : deviceListMap[item]?.cpu
+                  ? `${item}（${deviceListMap[item]?.cpu}${t('核')}${deviceListMap[item]?.mem}G）`
+                  : `${item}`
+            }}
+          </BkTag>
+        </div>
+      </BkFormItem>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { fetchDeviceClass } from '@services/source/dbresourceResource';
+
+  interface Props {
+    isEdit: boolean;
+  }
+
+  interface DeviceClassListItem {
+    cpu: number;
+    mem: number;
+    label: string;
+    value: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    isEdit: false,
+  });
+
+  const modelValue = defineModel<string[]>({
+    default: () => [],
+  });
+
+  const { t } = useI18n();
+
+  const deviceClassList = ref<DeviceClassListItem[]>([]);
+  const scrollLoading = ref(false);
+
+  const searchParams = {
+    offset: 0,
+    limit: 12,
+    name: '',
+  };
+
+  const deviceListMap: Record<
+    string,
+    {
+      cpu: number;
+      mem: number;
+    }
+  > = {};
+
+  const rules = [
+    {
+      required: true,
+      validator: (value: string[]) => value.length > 0,
+      message: t('请选择xx', [t('机型')]),
+    },
+  ];
+
+  let isAppend = false;
+
+  const { loading: isLoading, run: getDeviceClassList } = useRequest(fetchDeviceClass, {
+    manual: true,
+    onSuccess(data) {
+      scrollLoading.value = false;
+      const deviceList: DeviceClassListItem[] = [];
+      data.results.forEach((item) => {
+        deviceListMap[item.device_type] = {
+          cpu: item.cpu,
+          mem: item.mem,
+        };
+
+        deviceList.push({
+          label: item.device_type,
+          cpu: item.cpu,
+          mem: item.mem,
+          value: item.device_type,
+        });
+      });
+      if (isAppend) {
+        deviceClassList.value.push(...deviceList);
+        return;
+      }
+
+      deviceClassList.value = deviceList;
+    },
+  });
+
+  watch(
+    () => modelValue.value,
+    () => {
+      if (modelValue.value.length > 0 && modelValue.value[0] !== '-1') {
+        // 批量查询已选中的机型
+        searchParams.name = modelValue.value.join(',');
+        getDeviceClassList(searchParams);
+        searchParams.name = '';
+        return;
+      }
+
+      getDeviceClassList(searchParams);
+    },
+    { immediate: true },
+  );
+
+  const handleTagClose = (index: number) => {
+    if (props.isEdit) {
+      return;
+    }
+    modelValue.value.splice(index, 1);
+  };
+
+  const handleScrollEnd = () => {
+    scrollLoading.value = true;
+    isAppend = true;
+    searchParams.offset += searchParams.limit;
+    getDeviceClassList(searchParams);
+  };
+
+  const remoteMethod = (value: string) => {
+    isAppend = false;
+    searchParams.name = value;
+    searchParams.offset = 0;
+    getDeviceClassList(searchParams);
+  };
+
+  const handleSelectChange = (list: string[]) => {
+    if (list.length > 1) {
+      if (list[0] === '-1') {
+        // 先选的无限制，后续加选要去除无限制
+        modelValue.value = list.slice(1);
+        return;
+      }
+
+      if (list[list.length - 1] === '-1') {
+        // 最后选的无限制，前面选过的都要去除
+        modelValue.value = ['-1'];
+        return;
+      }
+    }
+
+    modelValue.value = list;
+  };
+</script>
+
+<style lang="less" scoped>
+  @import '../../specFormItem.less';
+
+  .spec-device {
+    padding: 0 !important;
+  }
+
+  .device-class-select {
+    max-width: 330px;
+  }
+</style>
+<style lang="less">
+  .bk-select-option {
+    padding-right: 12px !important;
+  }
+
+  .device-list-item {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecMem.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecMem.vue
new file mode 100644
index 0000000000..2d0d9214d5
--- /dev/null
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-device-or-cpu-mem/components/SpecMem.vue
@@ -0,0 +1,117 @@
+<!--
+ * 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="spec-mem spec-form-item">
+    <div class="spec-form-item-content">
+      <BkFormItem
+        property="mem.min"
+        required>
+        <span
+          v-bk-tooltips="{
+            content: t('不支持修改'),
+            disabled: !isEdit,
+          }"
+          class="inline-block">
+          <BkInput
+            v-model="modelValue.min"
+            :disabled="isEdit"
+            :max="2048"
+            :min="1"
+            :precision="2"
+            :show-control="false"
+            style="width: 80px"
+            type="number"
+            @change="handleLimitChange('min')" />
+        </span>
+      </BkFormItem>
+      <span class="spec-form-item-desc">{{ t('至') }}</span>
+      <BkFormItem
+        property="mem.max"
+        required>
+        <span
+          v-bk-tooltips="{
+            content: t('不支持修改'),
+            disabled: !isEdit,
+          }"
+          class="inline-block">
+          <BkInput
+            v-model="modelValue.max"
+            :disabled="isEdit"
+            :max="2048"
+            :min="1"
+            :precision="2"
+            :show-control="false"
+            style="width: 80px"
+            type="number"
+            @change="handleLimitChange('max')" />
+        </span>
+      </BkFormItem>
+      <span class="spec-form-item-desc">G</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  interface ModelValue {
+    max: number | string;
+    min: number | string;
+  }
+
+  interface Props {
+    isEdit: boolean;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    isEdit: false,
+  });
+  const modelValue = defineModel<ModelValue>({ required: true });
+
+  const { t } = useI18n();
+
+  const handleLimitChange = (type: 'min' | 'max') => {
+    const minValue = Number(modelValue.value.min);
+    const maxValue = Number(modelValue.value.max);
+
+    if (!minValue || !maxValue) {
+      return;
+    }
+
+    if (type === 'min' && minValue > maxValue) {
+      modelValue.value.min = maxValue;
+      return;
+    }
+
+    if (type === 'max' && minValue > maxValue) {
+      modelValue.value.max = minValue;
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  @import '../../specFormItem.less';
+
+  .spec-mem {
+    padding: 0 !important;
+
+    &::before {
+      display: none;
+    }
+
+    // &::after {
+    //   content: 'OR' !important;
+    // }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/Index.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/Index.vue
new file mode 100644
index 0000000000..27df357534
--- /dev/null
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/Index.vue
@@ -0,0 +1,146 @@
+<!--
+ * 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="spec-mem spec-form-item"
+    :class="{
+      'not-required': !isRequired,
+    }">
+    <div class="spec-form-item-label">
+      {{ t('磁盘') }}
+    </div>
+    <div class="spec-form-item-content">
+      <BkButton
+        v-if="tableData.length === 0"
+        @click="handleAddFirstRow">
+        <DbIcon type="add" />
+        <span style="font-size: 12px">{{ t('添加') }}</span>
+      </BkButton>
+      <div
+        v-else
+        style="width: 616px">
+        <RenderData class="disk-table">
+          <RenderDataRow
+            v-for="(item, index) in tableData"
+            :key="item.rowKey"
+            ref="rowRefs"
+            :data="item"
+            :disk-type-list="diskTypeList"
+            :is-edit="isEdit"
+            :is-required="isRequired"
+            :mount-point-list="mountPointList"
+            @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
+            @remove="handleRemove(index)"
+            @value-change="handleRowValueChange" />
+        </RenderData>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { searchDeviceClass } from '@services/source/ipchooser';
+
+  import RenderData from './components/RenderTable.vue';
+  import RenderDataRow, { createRowData, type IDataRow, type InfoItem } from './components/Row.vue';
+
+  interface Props {
+    data?: InfoItem[];
+    isEdit?: boolean;
+    isRequired?: boolean;
+  }
+
+  interface Emits {
+    (e: 'table-value-change', params?: InfoItem): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<InfoItem[]>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: undefined,
+    isEdit: false,
+    isRequired: true,
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const rowRefs = ref();
+  const tableData = ref<IDataRow[]>([createRowData()]);
+  const diskTypeList = ref<{ label: string; value: string }[]>([]);
+
+  const mountPointList = computed(() => tableData.value.map((item) => item.mount_point));
+
+  watch(
+    () => props.data,
+    (data) => {
+      if (data && data.length) {
+        tableData.value = data.map((item) => createRowData(item));
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  useRequest(searchDeviceClass, {
+    onSuccess(data) {
+      diskTypeList.value = data.map((item) => ({
+        label: item === 'ALL' ? t('无限制') : item,
+        value: item,
+      }));
+    },
+  });
+
+  const handleRowValueChange = (data: InfoItem) => {
+    emits('table-value-change', data);
+  };
+
+  const handleAddFirstRow = () => {
+    tableData.value = [createRowData()];
+  };
+
+  // 追加一行
+  const handleAppend = (index: number, appendList: Array<IDataRow>) => {
+    const dataList = [...tableData.value];
+    dataList.splice(index + 1, 0, ...appendList);
+    tableData.value = dataList;
+    emits('table-value-change');
+  };
+
+  // 删除一行
+  const handleRemove = (index: number) => {
+    tableData.value.splice(index, 1);
+    emits('table-value-change');
+  };
+
+  defineExpose<Exposes>({
+    getValue: () => Promise.all(rowRefs.value.map((item: any) => item.getValue())),
+  });
+</script>
+<style lang="less" scoped>
+  @import '../specFormItem.less';
+
+  .disk-table {
+    &::-webkit-scrollbar {
+      background: #f5f7fa;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/components/RenderTable.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/components/RenderTable.vue
new file mode 100644
index 0000000000..23c335232a
--- /dev/null
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/components/RenderTable.vue
@@ -0,0 +1,52 @@
+<!--
+ * 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>
+  <RenderTable>
+    <template #default>
+      <RenderTableHeadColumn
+        :min-width="180"
+        :width="200">
+        {{ t('挂载点') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="180"
+        :width="200">
+        {{ t('最小容量G') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="100"
+        :width="120">
+        {{ t('磁盘类型') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        fixed="right"
+        :required="false"
+        :width="80">
+        {{ t('操作') }}
+      </RenderTableHeadColumn>
+    </template>
+
+    <template #data>
+      <slot />
+    </template>
+  </RenderTable>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
+  import RenderTable from '@components/render-table/Index.vue';
+
+  const { t } = useI18n();
+</script>
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/components/Row.vue b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/components/Row.vue
new file mode 100644
index 0000000000..b9a7a9dc7f
--- /dev/null
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/spec-storage/components/Row.vue
@@ -0,0 +1,261 @@
+<!--
+ * 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>
+  <tr>
+    <td style="padding: 0">
+      <RenderInput
+        ref="mountPointRef"
+        v-model="localValue.mount_point"
+        v-bk-tooltips="{
+          content: t('不支持修改'),
+          disabled: !isEdit && !localValue.isSystemDrive,
+        }"
+        :disabled="isEdit || localValue.isSystemDrive"
+        placeholder="/data123"
+        :rules="mountPointRules" />
+    </td>
+    <td style="padding: 0">
+      <RenderInput
+        ref="minCapacityRef"
+        v-model="localValue.size"
+        v-bk-tooltips="{
+          content: t('不支持修改'),
+          disabled: !isEdit,
+        }"
+        :disabled="isEdit"
+        :max="20000"
+        :min="10"
+        :rules="minCapacityRules"
+        type="number" />
+    </td>
+    <td style="padding: 0; background-color: #fff">
+      <RenderSelect
+        ref="diskTypeRef"
+        v-model="localValue.type"
+        v-bk-tooltips="{
+          content: t('不支持修改'),
+          disabled: !props.isEdit,
+        }"
+        :disabled="isEdit"
+        :list="diskTypeList"
+        :rules="diskTypRules" />
+    </td>
+    <OperateColumn
+      :removeable="false"
+      :show-add="!isEdit"
+      :show-remove="!isEdit"
+      @add="handleAppend"
+      @remove="handleRemove" />
+  </tr>
+</template>
+<script lang="ts">
+  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
+
+  import { random } from '@utils';
+
+  export interface InfoItem {
+    mount_point: string;
+    size: string | number;
+    type: string;
+  }
+
+  export interface IDataRow extends InfoItem {
+    rowKey: string;
+    isSystemDrive?: boolean;
+  }
+
+  // 创建行数据
+  export const createRowData = (data = {} as InfoItem) => ({
+    rowKey: random(),
+    mount_point: data.mount_point || '',
+    size: data.size || ('' as string | number),
+    type: data.type || '',
+  });
+</script>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import RenderInput from '@components/render-table/columns/input/index.vue';
+  import RenderSelect from '@components/render-table/columns/select/index.vue';
+
+  interface Props {
+    data: IDataRow;
+    isEdit: boolean;
+    diskTypeList: { label: string; value: string }[];
+    mountPointList: string[];
+    isRequired?: boolean;
+  }
+
+  interface Emits {
+    (e: 'add', params: Array<IDataRow>): void;
+    (e: 'remove'): void;
+    (e: 'value-change', params: InfoItem): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<InfoItem>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    isEdit: false,
+    isRequired: true,
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const localValue = ref(props.data);
+  const mountPointRef = ref<InstanceType<typeof RenderInput>>();
+  const minCapacityRef = ref<InstanceType<typeof RenderInput>>();
+  const diskTypeRef = ref<InstanceType<typeof RenderSelect>>();
+
+  const mountPointRules = [
+    {
+      validator: (value: string) => {
+        // 非必填且所有输入框没有输入
+        if (!props.isRequired) {
+          if (!value && !localValue.value.size && !localValue.value.type) {
+            return true;
+          }
+
+          if ((localValue.value.size || localValue.value.type) && !value) {
+            return false;
+          }
+        }
+
+        if (props.isRequired && !value) {
+          return false;
+        }
+
+        return true;
+      },
+      message: t('不能为空'),
+    },
+    {
+      validator: (value: string) => {
+        console.log('props.isRequired?>??', props.isRequired, localValue.value.isSystemDrive, value);
+        if (localValue.value.isSystemDrive) {
+          return true;
+        }
+        return /\/data(\d)*/.test(value);
+      },
+      message: t('输入需符合正则_regx', { regx: '/data(\\d)*/' }),
+    },
+    {
+      validator: (value: string) => props.mountPointList.filter((item) => item === value).length < 2,
+      message: () => t('挂载点name重复', { name: localValue.value.mount_point }),
+    },
+  ];
+
+  const minCapacityRules = [
+    {
+      validator: (value: string) => {
+        // 非必填且所有输入框没有输入
+        if (!props.isRequired) {
+          if (!value && !localValue.value.mount_point && !localValue.value.type) {
+            return true;
+          }
+
+          if ((localValue.value.mount_point || localValue.value.type) && !value) {
+            return false;
+          }
+        }
+
+        if (props.isRequired && !value) {
+          return false;
+        }
+
+        return true;
+      },
+      message: t('不能为空'),
+    },
+  ];
+
+  const diskTypRules = [
+    {
+      validator: (value: string) => {
+        // 非必填且所有输入框没有输入
+        if (!props.isRequired) {
+          if (!value && !localValue.value.mount_point && !localValue.value.size) {
+            return true;
+          }
+
+          if ((localValue.value.mount_point || localValue.value.size) && !value) {
+            return false;
+          }
+        }
+
+        if (props.isRequired && !value) {
+          return false;
+        }
+
+        return true;
+      },
+      message: t('不能为空'),
+    },
+  ];
+
+  let rawRowData: IDataRow;
+
+  watch(
+    () => props.data,
+    (data) => {
+      rawRowData = _.cloneDeep(data);
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    localValue,
+    () => {
+      const { mount_point: mountPoint, size, type } = localValue.value;
+      const { mount_point: rawMountPoint, size: rawSize, type: rawType } = rawRowData;
+      if (mountPoint !== rawMountPoint || size === rawSize || type === rawType) {
+        emits('value-change', localValue.value);
+      }
+    },
+    {
+      deep: true,
+    },
+  );
+
+  const handleAppend = () => {
+    emits('add', [createRowData()]);
+  };
+
+  const handleRemove = () => {
+    emits('remove');
+  };
+
+  defineExpose<Exposes>({
+    getValue() {
+      return Promise.all([
+        mountPointRef.value!.getValue(),
+        minCapacityRef.value!.getValue(),
+        diskTypeRef.value!.getValue(),
+      ]).then(() => {
+        const { mount_point: mountPoint, size, type } = localValue.value;
+        return {
+          mount_point: mountPoint,
+          size,
+          type,
+        };
+      });
+    },
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/specFormItem.less b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/specFormItem.less
index b9932b6ba8..70d132e537 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/specFormItem.less
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/components/spec-form-item/specFormItem.less
@@ -19,14 +19,14 @@
   align-items: center;
 
   &.not-required {
-    .spec-form-item__label {
+    .spec-form-item-label {
       &::after {
         display: none;
       }
     }
   }
 
-  &__label {
+  .spec-form-item-label {
     position: relative;
     width: 160px;
     padding-right: 20px;
@@ -45,11 +45,11 @@
     }
   }
 
-  &__desc {
+  .spec-form-item-desc {
     padding: 0 8px;
   }
 
-  &__content {
+  .spec-form-item-content {
     display: flex;
     align-items: center;
     flex: 1;
diff --git a/dbm-ui/frontend/src/views/resource-manage/spec/hooks/useHasQPS.ts b/dbm-ui/frontend/src/views/resource-manage/spec/hooks/useHasQPS.ts
index 2231634c2f..8edb0ef327 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/hooks/useHasQPS.ts
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/hooks/useHasQPS.ts
@@ -20,11 +20,11 @@ const hasQPSClusterTypes = [
   // `${ClusterTypes.TWEMPROXY_TENDIS_SSD_INSTANCE}_tendisssd`,
   // `${ClusterTypes.PREDIXY_TENDISPLUS_CLUSTER}_tendisplus`,
   `${ClusterTypes.TENDBCLUSTER}_remote`,
-  `${ClusterTypes.MONGODB}_shardSvr`,
+  // `${ClusterTypes.MONGODB}_shardSvr`,
 ];
 
-export const useHasQPS = (props: { clusterType: string; machineType: string }) => {
-  const hasQPS = computed(() => hasQPSClusterTypes.includes(`${props.clusterType}_${props.machineType}`));
+export const useHasQPS = (props: { dbType: string; machineType: string }) => {
+  const hasQPS = computed(() => hasQPSClusterTypes.includes(`${props.dbType}_${props.machineType}`));
 
   return { hasQPS };
 };
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/RiakExpansionCapacity.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/RiakExpansionCapacity.vue
index 18b78bc5aa..2ed560a7c8 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/RiakExpansionCapacity.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/RiakExpansionCapacity.vue
@@ -125,7 +125,7 @@
 
   const { loading } = useRequest(getResourceSpecList, {
     defaultParams: [{
-      spec_cluster_type: props.ticketDetails.group,
+      spec_cluster_type: 'riak',
       offset: 0,
       limit: -1,
     }],
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterShardUpdate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterShardUpdate.vue
index 26cbd85db5..91b3efc042 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterShardUpdate.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterShardUpdate.vue
@@ -48,10 +48,8 @@
   import { useRequest } from 'vue-request';
 
   import RedisModel from '@services/model/redis/redis';
-  import ResourceSpecModel from '@services/model/resource-spec/resourceSpec';
   import type { RedisClusterShardUpdateDetails } from '@services/model/ticket/details/redis';
   import TicketModel from '@services/model/ticket/ticket';
-  import { getResourceSpecList } from '@services/source/dbresourceSpec';
   import { getRedisListByBizId } from '@services/source/redis';
 
   import { repairAndVerifyFrequencyList, repairAndVerifyTypeList } from '@views/db-manage/redis/common/const';
@@ -136,25 +134,11 @@
       if (result.results.length < 1) {
         return;
       }
+
       const clusterMap = result.results.reduce((obj, item) => {
         Object.assign(obj, { [item.id]: item });
         return obj;
       }, {} as Record<string, RedisModel>);
-
-      // 避免重复查询
-      const clusterTypes = [...new Set(Object.values(clusterMap).map(item => item.cluster_spec.spec_cluster_type))];
-
-      const sepcMap: Record<string, ResourceSpecModel[]> = {};
-
-      await Promise.all(clusterTypes.map(async (type) => {
-        const ret = await getResourceSpecList({
-          spec_cluster_type: type,
-          limit: -1,
-          offset: 0,
-        });
-        sepcMap[type] = ret.results;
-      }));
-      loading.value = false;
       tableData.value = infos.map((item) => {
         const currentCluster = clusterMap[item.src_cluster];
         const specConfig = currentCluster.cluster_spec;
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue
index d370d87a79..6ede881287 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue
@@ -47,13 +47,12 @@
   import { useRequest } from 'vue-request';
 
   import RedisModel from '@services/model/redis/redis';
-  import ResourceSpecModel from '@services/model/resource-spec/resourceSpec';
   import type { RedisClusterTypeUpdateDetails } from '@services/model/ticket/details/redis';
   import TicketModel from '@services/model/ticket/ticket';
   import { getResourceSpecList } from '@services/source/dbresourceSpec';
   import { getRedisListByBizId } from '@services/source/redis';
 
-  import { ClusterMachineMap, repairAndVerifyFrequencyList, repairAndVerifyTypeList } from '@views/db-manage/redis/common/const'
+  import { repairAndVerifyFrequencyList, repairAndVerifyTypeList,specClusterMachineMap } from '@views/db-manage/redis/common/const'
 
   interface Props {
     ticketDetails: TicketModel<RedisClusterTypeUpdateDetails>
@@ -149,35 +148,27 @@
       if (result.results.length < 1) {
         return;
       }
+
       const clusterMap = result.results.reduce((obj, item) => {
         Object.assign(obj, { [item.id]: item });
         return obj;
       }, {} as Record<string, RedisModel>);
-
-      // 避免重复查询
-      const clusterTypes = [...new Set(infos.map(item => item.target_cluster_type))];
-      const sepcMap: Record<string, ResourceSpecModel[]> = {};
-
-      await Promise.all(clusterTypes.map(async (type) => {
-        const ret = await getResourceSpecList({
-          spec_cluster_type: type,
-          limit: -1,
-          offset: 0,
-        });
-        sepcMap[type] = ret.results;
-      }));
-      loading.value = false;
+      const sepcListResult = await getResourceSpecList({
+        spec_cluster_type: 'redis',
+        limit: -1,
+        offset: 0,
+      });
       tableData.value = infos.map((item) => {
         const currentCluster = clusterMap[item.src_cluster];
         const specConfig = currentCluster.cluster_spec;
-        const targetSepcPlan = sepcMap[item.target_cluster_type].filter(row => row.spec_id === item.resource_spec.backend_group.spec_id);
+        const targetSepcPlan = sepcListResult.results.filter(row => row.spec_id === item.resource_spec.backend_group.spec_id);
         return ({
           clusterName: currentCluster.master_domain,
-          srcClusterType: ClusterMachineMap[clusters[item.src_cluster].cluster_type],
+          srcClusterType: specClusterMachineMap[clusters[item.src_cluster].cluster_type],
           clusterTypeName: clusters[item.src_cluster].cluster_type_name,
           currentSepc: `${currentCluster.cluster_capacity}G_${specConfig.qps.max}/s（${item.current_shard_num} 分片）`,
           deployPlan: targetSepcPlan.length > 0 ? targetSepcPlan[0].spec_name : '',
-          targetClusterType: ClusterMachineMap[item.target_cluster_type],
+          targetClusterType: specClusterMachineMap[item.target_cluster_type],
           dbVersion: item.db_version,
           switchMode: item.online_switch_type,
           capacity: item.capacity,
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AddNodes.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AddNodes.vue
index 3c7b938e78..17994c4071 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AddNodes.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AddNodes.vue
@@ -23,7 +23,6 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import ResourceSpecModel from '@services/model/resource-spec/resourceSpec';
   import type { SpiderAddNodesDeatils } from '@services/model/ticket/details/spider';
   import TicketModel from '@services/model/ticket/ticket';
   import { getResourceSpecList } from '@services/source/dbresourceSpec';
@@ -85,6 +84,7 @@
       if (r.results.length < 1) {
         return;
       }
+
       const clusterMap = r.results.reduce((obj, item) => {
         Object.assign(obj, { [item.id]: {
           clusterName: item.master_domain,
@@ -92,23 +92,13 @@
         } });
         return obj;
       }, {} as Record<number, {clusterName: string, clusterType: string}>);
-
-      // 避免重复查询
-      const clusterTypes = [...new Set(Object.values(clusterMap).map(item => item.clusterType))];
-      const sepcMap: Record<string, ResourceSpecModel[]> = {};
-
-      await Promise.all(clusterTypes.map(async (type) => {
-        const ret = await getResourceSpecList({
-          spec_cluster_type: type,
-          limit: -1,
-          offset: 0,
-        });
-        sepcMap[type] = ret.results;
-      }));
-      loading.value = false;
+      const specListResult = await getResourceSpecList({
+        spec_cluster_type: 'tendbcluster',
+        limit: -1,
+        offset: 0,
+      });
       tableData.value = infos.map((item) => {
-        const sepcList = sepcMap[clusterMap[item.cluster_id].clusterType];
-        const specInfo = sepcList.find(row => row.spec_id === item.resource_spec.spider_ip_list.spec_id);
+        const specInfo = specListResult.results.find(row => row.spec_id === item.resource_spec.spider_ip_list.spec_id);
         return {
           clusterName: clusterMap[item.cluster_id].clusterName,
           clusterType: clusterMap[item.cluster_id].clusterType,
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.vue
index ea107b9ed3..d23be696de 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.vue
@@ -41,7 +41,6 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import ResourceSpecModel from '@services/model/resource-spec/resourceSpec';
   import type { SpiderNodeRebalanceDetails } from '@services/model/ticket/details/spider';
   import TicketModel from '@services/model/ticket/ticket';
   import { getResourceSpecList } from '@services/source/dbresourceSpec';
@@ -72,7 +71,6 @@
 
   const tableData = ref<RowData[]>([]);
 
-  // eslint-disable-next-line vue/no-setup-props-destructure
   const { infos } = props.ticketDetails.details;
   const isTimer = props.ticketDetails.details.trigger_checksum_type === 'timer';
   const columns = [
@@ -122,21 +120,13 @@
         } });
         return obj;
       }, {});
-
-      // 避免重复查询
-      const clusterTypes = [...new Set(Object.values(clusterMap).map(item => item.clusterType))];
-      const sepcMap: Record<string, ResourceSpecModel[]> = {};
-      await Promise.all(clusterTypes.map(async (type) => {
-        const ret = await getResourceSpecList({
-          spec_cluster_type: type,
-          limit: -1,
-          offset: 0,
-        });
-        sepcMap[type] = ret.results;
-      }));
+      const specListResult = await getResourceSpecList({
+        spec_cluster_type: 'tendbcluster',
+        limit: -1,
+        offset: 0,
+      });
       tableData.value = infos.map((item) => {
-        const sepcList = sepcMap[clusterMap[item.cluster_id].clusterType];
-        const specInfo = sepcList.find(row => row.spec_id === item.resource_spec.backend_group.spec_id);
+        const specInfo = specListResult.results.find(row => row.spec_id === item.resource_spec.backend_group.spec_id);
         return {
           clusterName: clusterMap[item.cluster_id].clusterName,
           clusterType: clusterMap[item.cluster_id].clusterType,
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/ReduceNodes.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/ReduceNodes.vue
index cf1ed5aaa8..4b2ce09573 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/ReduceNodes.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/ReduceNodes.vue
@@ -23,7 +23,6 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import ResourceSpecModel from '@services/model/resource-spec/resourceSpec';
   import type { SpiderReduceNodesDetails } from '@services/model/ticket/details/spider';
   import TicketModel from '@services/model/ticket/ticket';
   import { getResourceSpecList } from '@services/source/dbresourceSpec';
@@ -49,7 +48,6 @@
 
   const { t } = useI18n();
 
-  // eslint-disable-next-line vue/no-setup-props-destructure
   const { infos } = props.ticketDetails.details;
   const tableData = ref<RowData[]>([]);
   const columns = [
@@ -93,6 +91,7 @@
       if (r.results.length < 1) {
         return;
       }
+
       const clusterMap = r.results.reduce((obj, item) => {
         Object.assign(obj, { [item.id]: {
           clusterName: item.master_domain,
@@ -101,24 +100,13 @@
         } });
         return obj;
       }, {} as Record<number, {clusterName: string, clusterType: string, specId: number}>);
-
-
-      // 避免重复查询
-      const clusterTypes = [...new Set(Object.values(clusterMap).map(item => item.clusterType))];
-      const sepcMap: Record<string, ResourceSpecModel[]> = {};
-
-      await Promise.all(clusterTypes.map(async (type) => {
-        const ret = await getResourceSpecList({
-          spec_cluster_type: type,
-          limit: -1,
-          offset: 0,
-        });
-        sepcMap[type] = ret.results;
-      }));
-      loading.value = false;
+      const specListResult = await getResourceSpecList({
+        spec_cluster_type: 'tendbcluster',
+        limit: -1,
+        offset: 0,
+      });
       tableData.value = infos.map((item) => {
-        const sepcList = sepcMap[clusterMap[item.cluster_id].clusterType];
-        const specInfo = sepcList.find(row => row.spec_id === clusterMap[item.cluster_id].specId);
+        const specInfo = specListResult.results.find(row => row.spec_id === clusterMap[item.cluster_id].specId);
         const ipList = (item.spider_reduced_hosts || []).map(item => item.ip)
         return {
           clusterName: clusterMap[item.cluster_id].clusterName,
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveApply.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveApply.vue
index 6be0087bdf..a03a571cd7 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveApply.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveApply.vue
@@ -23,7 +23,6 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import ResourceSpecModel from '@services/model/resource-spec/resourceSpec';
   import type { SpiderSlaveApplyDetails } from '@services/model/ticket/details/spider';
   import TicketModel from '@services/model/ticket/ticket';
   import { getResourceSpecList } from '@services/source/dbresourceSpec';
@@ -46,7 +45,6 @@
 
   const { t } = useI18n();
 
-  // eslint-disable-next-line vue/no-setup-props-destructure
   const { infos } = props.ticketDetails.details;
   const tableData = ref<RowData[]>([]);
 
@@ -85,23 +83,13 @@
         } });
         return obj;
       }, {} as Record<number, {clusterName: string, clusterType: string}>);
-
-      // 避免重复查询
-      const clusterTypes = [...new Set(Object.values(clusterMap).map(item => item.clusterType))];
-      const sepcMap: Record<string, ResourceSpecModel[]> = {};
-
-      await Promise.all(clusterTypes.map(async (type) => {
-        const ret = await getResourceSpecList({
-          spec_cluster_type: type,
-          limit: -1,
-          offset: 0,
-        });
-        sepcMap[type] = ret.results;
-      }));
-      loading.value = false;
+      const specListResult = await getResourceSpecList({
+        spec_cluster_type: 'tendbcluster',
+        limit: -1,
+        offset: 0,
+      });
       tableData.value = infos.map((item) => {
-        const sepcList = sepcMap[clusterMap[item.cluster_id].clusterType];
-        const specInfo = sepcList.find(row => row.spec_id === item.resource_spec.spider_slave_ip_list.spec_id);
+        const specInfo = specListResult.results.find(row => row.spec_id === item.resource_spec.spider_slave_ip_list.spec_id);
         return {
           clusterName: clusterMap[item.cluster_id].clusterName,
           sepc: {