diff --git a/dbm-ui/frontend/src/common/const.ts b/dbm-ui/frontend/src/common/const.ts
index 2782e3474..5d5a07b86 100644
--- a/dbm-ui/frontend/src/common/const.ts
+++ b/dbm-ui/frontend/src/common/const.ts
@@ -28,6 +28,7 @@ export enum DBTypes {
   INFLUXDB = 'influxdb',
   SPIDER = 'spider',
   RIAK = 'riak',
+  DORIS = 'doris',
 }
 export type DBTypesValues = `${DBTypes}`;
 
@@ -61,6 +62,7 @@ export enum ClusterTypes {
   PULSAE = 'pulsar',
   INFLUXDB = 'influxdb',
   RIAK = 'riak',
+  DORIS = 'doris',
 }
 
 // 机器类型
@@ -149,6 +151,9 @@ export const clusterTypeInfos = {
   [ClusterTypes.SQLSERVER_SINGLE]: {
     dbType: DBTypes.SQLSERVER,
   },
+  [ClusterTypes.DORIS]: {
+    dbType: DBTypes.DORIS,
+  },
 };
 export type ClusterTypeInfos = keyof typeof clusterTypeInfos;
 
@@ -336,6 +341,14 @@ export enum TicketTypes {
   REDIS_INSTANCE_PROXY_OPEN = 'REDIS_INSTANCE_PROXY_OPEN', // redis 主从集群启用
   REDIS_INSTANCE_PROXY_CLOSE = 'REDIS_INSTANCE_PROXY_CLOSE', // redis 主从集群禁用
   REDIS_INSTANCE_DESTROY = 'REDIS_INSTANCE_DESTROY', // redis 主从集群删除
+  DORIS_APPLY = 'DORIS_APPLY', // doris 部署
+  DORIS_ENABLE = 'DORIS_ENABLE', // doris 启用
+  DORIS_DISABLE = 'DORIS_DISABLE', // doris 禁用
+  DORIS_DESTROY = 'DORIS_DESTROY', // doris 删除
+  DORIS_REBOOT = 'DORIS_REBOOT', // doris 重启
+  DORIS_REPLACE = 'DORIS_REPLACE', // doris 替换
+  DORIS_SCALE_UP = 'DORIS_SCALE_UP', // doris 扩容
+  DORIS_SHRINK = 'DORIS_SHRINK', // doris 缩容
   MYSQL_DUMP_DATA = 'MYSQL_DUMP_DATA', // 数据导出
 }
 export type TicketTypesStrings = keyof typeof TicketTypes;
@@ -434,6 +447,11 @@ export const bigDataType = {
     name: t('Riak集群部署'),
     type: ClusterTypes.RIAK,
   },
+  [TicketTypes.DORIS_APPLY]: {
+    id: TicketTypes.DORIS_APPLY,
+    name: t('Doris集群部署'),
+    type: ClusterTypes.DORIS,
+  },
 };
 
 export const mongoType = {
@@ -534,6 +552,7 @@ export enum UserPersonalSettings {
   REDIS_HA_INSTANCE_SETTINGS = 'REDIS_HA_INSTANCE_SETTINGS',
   SQLSERVER_TOOLBOX_MENUS = 'SQLSERVER_TOOLBOX_MENUS',
   SQLSERVER_TOOLBOX_FAVOR = 'SQLSERVER_TOOLBOX_FAVOR',
+  DORIS_TABLE_SETTINGS = 'DORIS_TABLE_SETTINGS',
 }
 
 /**
diff --git a/dbm-ui/frontend/src/components/bigdata-instance-detail/Index.vue b/dbm-ui/frontend/src/components/bigdata-instance-detail/Index.vue
new file mode 100644
index 000000000..6d2038c4d
--- /dev/null
+++ b/dbm-ui/frontend/src/components/bigdata-instance-detail/Index.vue
@@ -0,0 +1,435 @@
+<!--
+ * 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="bigdata-instance-detail">
+    <BkCollapse
+      v-model="activeIndex"
+      header-icon="right-shape">
+      <BkCollapsePanel name="baseInfo">
+        <span class="panel-title">{{ t('基本信息') }}</span>
+        <template #content>
+          <EditInfo
+            :columns="infoColumns"
+            :data="data" />
+        </template>
+      </BkCollapsePanel>
+      <BkCollapsePanel
+        class="instance-list-penel mt-8"
+        name="instanceList">
+        <span class="panel-title">{{ t('实例列表') }}</span>
+        <template #content>
+          <div class="mb-12">
+            <BkButton
+              :disabled="isBatchRestartDisabled || isRestartActionDisabled"
+              :loading="isBatchRestartLoading"
+              @click="handleRestart()">
+              {{ t('批量重启') }}
+            </BkButton>
+          </div>
+          <BkLoading
+            :loading="isLoading"
+            :z-index="2">
+            <DbOriginalTable
+              :columns="tableColumns"
+              :data="tableData"
+              :is-anomalies="isAnomalies" />
+          </BkLoading>
+        </template>
+      </BkCollapsePanel>
+    </BkCollapse>
+  </div>
+</template>
+
+<script
+  setup
+  lang="tsx"
+  generic="T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel | DorisNodeModel">
+  import { InfoBox } from 'bkui-vue';
+  import { useI18n } from 'vue-i18n';
+
+  import type DorisInstanceModel from '@services/model/doris/doris-instance';
+  import type DorisNodeModel from '@services/model/doris/doris-node';
+  import type EsInstanceModel from '@services/model/es/es-instance';
+  import type EsNodeModel from '@services/model/es/es-node';
+  import type HdfsInstanceModel from '@services/model/hdfs/hdfs-instance';
+  import type HdfsNodeModel from '@services/model/hdfs/hdfs-node';
+  import type KafkaInstanceModel from '@services/model/kafka/kafka-instance';
+  import type KafkaNodeModel from '@services/model/kafka/kafka-node';
+  import type PulsarInstanceModel from '@services/model/pulsar/pulsar-instance';
+  import type PulsarNodeModel from '@services/model/pulsar/pulsar-node';
+  import { getDorisInstanceList } from '@services/source/doris';
+  import { getEsInstanceList } from '@services/source/es';
+  import { getHdfsInstanceList } from '@services/source/hdfs';
+  import { getKafkaInstanceList } from '@services/source/kafka';
+  import { getPulsarInstanceList } from '@services/source/pulsar';
+  import { createTicket } from '@services/source/ticket';
+
+  import { useTicketMessage } from '@hooks';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { TicketTypes } from '@common/const';
+
+  import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
+  import RenderInstanceStatus from '@components/cluster-common/RenderInstanceStatus.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
+  import EditInfo, { type InfoColumn } from '@components/editable-info/index.vue';
+  import RenderHostStatus from '@components/render-host-status/Index.vue';
+
+  import { useTimeoutPoll } from '@vueuse/core';
+
+  type InstanceModel = EsInstanceModel | HdfsInstanceModel | KafkaInstanceModel | PulsarInstanceModel | DorisInstanceModel
+
+  interface Props {
+    clusterId: number,
+    clusterType: 'es' | 'hdfs' | 'kafka' | 'pulsar' | 'doris'
+    data: T,
+  }
+
+  interface Emits {
+    (e: 'close'): void
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+  const { currentBizId } = useGlobalBizs();
+  const ticketMessage = useTicketMessage();
+
+  const activeIndex = ref(['baseInfo', 'instanceList']);
+  const isAnomalies = ref(false);
+  const isLoading = ref(true);
+  const isBatchRestartLoading = ref(false);
+  const isRestartLoading = ref(false);
+  const isRestartActionDisabled = ref(false);
+  const isSelectedAll = ref(false);
+
+  const tableData = shallowRef<Array<InstanceModel>>([]);
+  const batchSelectNodeMap = shallowRef<Record<number, InstanceModel>>({});
+
+  const isBatchRestartDisabled = computed(() => Object.keys(batchSelectNodeMap.value).length === 0);
+  const isIndeterminate = computed(() => !isSelectedAll.value && Object.keys(batchSelectNodeMap.value).length > 0);
+  const mainSelectDisable = computed(() => tableData.value.every(tableItem => tableItem.operationRunningStatus));
+
+  const infoColumns: InfoColumn[][] = [
+    [
+      {
+        label: t('节点IP'),
+        key: 'ip',
+      },
+      {
+        label: t('主机名称'),
+        key: 'bk_host_name',
+      },
+      {
+        label: t('Agent状态'),
+        key: 'status',
+        render: () => <RenderHostStatus data={props.data.status} />
+      },
+    ],
+    [
+      {
+        label: t('类型'),
+        key: 'roleLabel',
+      },
+      {
+        label: t('实例数量'),
+        key: 'node_num',
+      },
+      {
+        label: t('内存'),
+        key: 'memText',
+      },
+    ],
+  ]
+
+  const tableColumns = [
+    {
+      width: 60,
+      label: () => (
+        <bk-checkbox
+          model-value={isSelectedAll.value}
+          indeterminate={isIndeterminate.value}
+          disabled={mainSelectDisable.value}
+          label={true}
+          onChange={handleSelectAll}
+        />
+      ),
+      render: ({ data }: { data: InstanceModel }) => (
+        <bk-popover
+          theme="dark"
+          placement="top">
+          {{
+            default: () => (
+              <bk-checkbox
+                style="vertical-align: middle;"
+                model-value={Boolean(batchSelectNodeMap.value[data.id])}
+                label={true}
+                disabled={Boolean(data.operationRunningStatus)}
+                onChange={(value: boolean) => handleSelectRow(data, value)}
+              />
+            ),
+            content: () => <span>{t('实例正在重启中，不能勾选')}</span>,
+          }}
+        </bk-popover>
+      )
+    },
+    {
+      label: t('实例'),
+      field: 'instance_address',
+      render: ({ data }: { data: InstanceModel }) => (
+        <div>
+          <span>{data.instance_address || '--'}</span>
+          {
+            data.operationTagTips.map(item => <RenderOperationTag class="ml-4" data={item}/>)
+          }
+        </div>
+      ),
+    },
+    {
+      label: t('实例状态'),
+      field: 'status',
+      render: ({ data }: { data: InstanceModel }) => (
+        <>
+          {
+            data.operationRunningStatus
+            ? (
+              <div class='loading-box'>
+                <db-icon
+                  class="rotate-loading mr-4"
+                  type='loading'
+                  svg />
+                <div>{ t('重启中') }</div>
+              </div>
+            )
+            : <RenderInstanceStatus data={data.status} />
+          }
+        </>
+      ),
+    },
+    {
+      label: t('上次重启时间'),
+      render: ({ data }: { data: InstanceModel }) => data.restart_at || '--',
+    },
+    {
+      label: t('操作'),
+      width: 116,
+      render: ({ data }: { data: InstanceModel }) => (
+        <OperationBtnStatusTips data={data}>
+          <bk-button
+            theme="primary"
+            text
+            disabled={data.operationDisabled || isRestartActionDisabled.value}
+            onClick={() => handleRestart(data)}>
+            { t('重启') }
+          </bk-button>
+        </OperationBtnStatusTips>
+      ),
+    },
+  ];
+
+  const fetchData = () => {
+    isLoading.value = true;
+    const apiMap = {
+      es: getEsInstanceList,
+      hdfs: getHdfsInstanceList,
+      kafka: getKafkaInstanceList,
+      pulsar: getPulsarInstanceList,
+      doris: getDorisInstanceList,
+    }
+    apiMap[props.clusterType]({
+      bk_biz_id: currentBizId,
+      cluster_id: props.clusterId,
+      ip: props.data.ip,
+    })
+      .then((data) => {
+        tableData.value = data.results;
+        isAnomalies.value = false;
+      })
+      .catch(() => {
+        tableData.value = [];
+        isAnomalies.value = true;
+      })
+      .finally(() => {
+        isLoading.value = false;
+      });
+  };
+
+  useTimeoutPoll(fetchData, 5000, {
+    immediate: true,
+  });
+
+  watch(() => props.data, () => {
+    isSelectedAll.value = false
+    batchSelectNodeMap.value = {}
+  })
+
+  // 选择单台
+  const handleSelectRow = (data: InstanceModel, value: boolean) => {
+    const selectNodeMap = { ...batchSelectNodeMap.value };
+    if (value) {
+      selectNodeMap[data.id] = data;
+    } else {
+      delete selectNodeMap[data.id];
+    }
+
+    batchSelectNodeMap.value = selectNodeMap;
+
+    if (Object.keys(selectNodeMap).length === tableData.value.filter(tableItem => !tableItem.operationRunningStatus).length) {
+      isSelectedAll.value = true
+    } else {
+      isSelectedAll.value = false
+    }
+  };
+
+  // 选择所有
+  const handleSelectAll = (value: boolean) => {
+    let selectNodeMap = batchSelectNodeMap.value;
+    if (value) {
+      selectNodeMap = tableData.value.reduce((result, item) => {
+        if (item.operationRunningStatus) {
+          return result
+        }
+        return {
+          ...result,
+          [item.id]: item,
+        }
+      }, {});
+    } else {
+      selectNodeMap = {};
+    }
+    batchSelectNodeMap.value = selectNodeMap;
+    isSelectedAll.value = value
+  };
+
+  const formatRequestData = (data: Array<InstanceModel>) => data.map((item) => {
+    const [ip, port] = item.instance_address.split(':');
+    return ({
+      ip,
+      port: Number(port),
+      instance_name: item.instance_name,
+      bk_host_id: item.bk_host_id,
+      bk_cloud_id: item.bk_cloud_id,
+      instance_id: item.id,
+    });
+  });
+
+  const handleRestart = (data?: InstanceModel) => {
+    if (data) {
+      isRestartLoading.value = true;
+    } else {
+      isBatchRestartLoading.value = true;
+    }
+
+    const instanceList = data ? [data] : Object.values(batchSelectNodeMap.value)
+    const subTitle = (
+      <div style="background-color: #F5F7FA; padding: 8px 16px;">
+        <div class='tips-item'>
+          {t('实例')} :
+          <span
+            style="color: #313238"
+            class="ml-8">
+            {instanceList.map(instanceItem => instanceItem.instance_address)}
+          </span>
+        </div>
+        <div class='mt-4'>{t('连接将会断开，请谨慎操作！')}</div>
+      </div>
+    )
+
+    InfoBox({
+      title: t('确认重启该实例？'),
+      subTitle,
+      infoType: 'warning',
+      confirmText: t('确认重启'),
+      cancelText: t('取消'),
+      headerAlign: 'center',
+      contentAlign: 'left',
+      footerAlign: 'center',
+      extCls: 'bigdata-replace-model',
+      onClose: () => {
+        if (data) {
+          isRestartLoading.value = false;
+        } else {
+          isBatchRestartLoading.value = false;
+        }
+      },
+      onConfirm: () => {
+        isRestartActionDisabled.value = true;
+        const clusterTypeMap = {
+          es: TicketTypes.ES_REBOOT,
+          hdfs: TicketTypes.HDFS_REBOOT,
+          kafka: TicketTypes.KAFKA_REBOOT,
+          pulsar: TicketTypes.PULSAR_REBOOT,
+          doris: TicketTypes.DORIS_REBOOT,
+        }
+        createTicket({
+          bk_biz_id: currentBizId,
+          ticket_type: clusterTypeMap[props.clusterType],
+          details: {
+            cluster_id: props.clusterId,
+            instance_list: formatRequestData(instanceList),
+          },
+        })
+          .then((data) => {
+            ticketMessage(data.id);
+            fetchData();
+            window.changeConfirm = false;
+            emits('close');
+          })
+          .finally(() => {
+            isRestartActionDisabled.value = false;
+            if (data) {
+              isRestartLoading.value = false;
+            } else {
+              isBatchRestartLoading.value = false;
+            }
+          });
+      },
+    });
+  };
+</script>
+
+<style lang="less">
+  .bigdata-replace-model {
+    .bk-modal-content div {
+      font-size: 14px;
+    }
+
+    .tips-item {
+      padding: 2px 0;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .bigdata-instance-detail {
+    padding: 20px 24px;
+
+    .panel-title {
+      font-weight: 700;
+      color: #313238;
+    }
+
+    .instance-list-penel {
+      :deep(.bk-collapse-content) {
+        padding: 5px 16px;
+      }
+    }
+
+    :deep(.loading-box) {
+      display: flex;
+      align-items: center;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/cluster-common/RenderOperationTagNew.vue b/dbm-ui/frontend/src/components/cluster-common/RenderOperationTagNew.vue
index 3561c7c08..7c8a144b9 100644
--- a/dbm-ui/frontend/src/components/cluster-common/RenderOperationTagNew.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/RenderOperationTagNew.vue
@@ -81,6 +81,22 @@
       color: '#FE9C00',
       background: '#FFF1DB',
     },
+    [t('替换中')]: {
+      color: '#29AAE8',
+      background: '#EDFBFF',
+    },
+    [t('扩容中')]: {
+      color: '#14A568',
+      background: '#E4FAF0',
+    },
+    [t('重启中')]: {
+      color: '#3A84FF',
+      background: '#EDF4FF',
+    },
+    [t('缩容中')]: {
+      color: '#8E3AFF',
+      background: '#F2EDFF',
+    },
   };
 
   const rootRef = ref();
@@ -146,6 +162,7 @@
       padding: 0 4px;
       line-height: 16px;
       cursor: pointer;
+      border-radius: 2px;
 
       .icon-text {
         display: inline-block;
diff --git a/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-expansion/Index.vue b/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-expansion/Index.vue
new file mode 100644
index 000000000..9c0d38849
--- /dev/null
+++ b/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-expansion/Index.vue
@@ -0,0 +1,111 @@
+<!--
+ * 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="doris-observer-host-expansion">
+    <div class="header-box">
+      <span class="header-label">{{ data.label }}</span>
+      <BkTag
+        class="ml-8"
+        theme="info">
+        {{ data.tagText }}
+      </BkTag>
+    </div>
+    <BkForm form-type="vertical">
+      <BkFormItem>
+        <ResourcePoolSelector
+          v-if="ipSource === 'resource_pool'"
+          :cloud-info="cloudInfo"
+          :data="data"
+          @change="handleResourcePoolChange" />
+        <HostSelector
+          v-else
+          :cloud-info="cloudInfo"
+          :data="data"
+          :disable-host-method="disableHostMethod"
+          @change="handleHoseSelectChange" />
+      </BkFormItem>
+    </BkForm>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import type { HostDetails } from '@services/types';
+
+  import type { TExpansionNode } from '@components/cluster-common/host-expansion/Index.vue';
+
+  import HostSelector from './components/HostSelector.vue';
+  import ResourcePoolSelector from './components/ResourcePoolSelector.vue';
+
+  interface Props {
+    cloudInfo: {
+      id: number;
+      name: string;
+    };
+    data: TExpansionNode;
+    ipSource: string;
+    disableHostMethod?: (params: HostDetails) => string | boolean;
+  }
+
+  defineProps<Props>();
+
+  const resourceSpec = defineModel<TExpansionNode['resourceSpec']>('resourceSpec', {
+    required: true,
+  });
+  const hostList = defineModel<TExpansionNode['hostList']>('hostList', {
+    required: true,
+  });
+  const expansionDisk = defineModel<TExpansionNode['expansionDisk']>('expansionDisk', {
+    required: true,
+  });
+
+  const handleHoseSelectChange = (
+    hostListValue: TExpansionNode['hostList'],
+    expansionDiskValue: TExpansionNode['expansionDisk'],
+  ) => {
+    hostList.value = hostListValue;
+    expansionDisk.value = expansionDiskValue;
+    window.changeConfirm = true;
+  };
+
+  const handleResourcePoolChange = (
+    resourceSpecValue: TExpansionNode['resourceSpec'],
+    expansionDiskValue: TExpansionNode['expansionDisk'],
+  ) => {
+    resourceSpec.value = resourceSpecValue;
+    expansionDisk.value = expansionDiskValue;
+    window.changeConfirm = true;
+  };
+</script>
+
+<style lang="less">
+  .doris-observer-host-expansion {
+    padding: 0 24px 24px;
+
+    .bk-form-label {
+      font-size: 12px;
+      font-weight: bold;
+      color: #63656e;
+    }
+
+    .header-box {
+      padding: 10px 0;
+      font-size: 14px;
+      color: #313238;
+
+      .header-box-label {
+        font-weight: bold;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-expansion/components/HostSelector.vue b/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-expansion/components/HostSelector.vue
new file mode 100644
index 000000000..7631d6afe
--- /dev/null
+++ b/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-expansion/components/HostSelector.vue
@@ -0,0 +1,187 @@
+<!--
+ * 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>
+    <IpSelector
+      :biz-id="bizId"
+      class="mt-12"
+      :cloud-info="cloudInfo"
+      :disable-host-method="disableHostMethod"
+      :show-view="false"
+      @change="handleHostChange">
+      <template #submitTips="{ hostList }">
+        <I18nT
+          keypath="已选n台_共nGB(目标容量:nG)"
+          style="font-size: 14px; color: #63656e"
+          tag="span">
+          <span
+            class="number"
+            style="color: #2dcb56">
+            {{ hostList.length }}
+          </span>
+          <span
+            class="number"
+            style="color: #3a84ff">
+            {{ calcSelectHostDisk(hostList) }}
+          </span>
+          <span
+            class="number"
+            style="color: #63656e">
+            {{ data.targetDisk - data.totalDisk }}
+          </span>
+        </I18nT>
+      </template>
+    </IpSelector>
+    <div
+      v-if="hostTableData.length > 0"
+      class="data-preview-table">
+      <div class="data-preview-header">
+        <I18nT keypath="共n台_共nGB">
+          <span
+            class="number"
+            style="color: #3a84ff">
+            {{ hostTableData.length }}
+          </span>
+          <span
+            class="number"
+            style="color: #2dcb56">
+            {{ calcSelectHostDisk(hostTableData) }}
+          </span>
+        </I18nT>
+        <I18nT
+          v-if="targetMatchReal > 0"
+          class="ml-8"
+          keypath="较目标容量相差nG">
+          <span
+            class="number"
+            style="color: #ff9c01">
+            {{ targetMatchReal }}
+          </span>
+        </I18nT>
+        <I18nT
+          v-if="targetMatchReal < 0"
+          class="ml-8"
+          keypath="较目标容量超出nG">
+          <span
+            class="number"
+            style="color: #ff9c01">
+            {{ Math.abs(targetMatchReal) }}
+          </span>
+        </I18nT>
+      </div>
+      <BkTable
+        :columns="tableColumns"
+        :data="hostTableData" />
+    </div>
+  </div>
+</template>
+<script setup lang="tsx">
+  import {
+    computed,
+    shallowRef,
+  } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import type { HostDetails } from '@services/types';
+
+  import { useGlobalBizs } from '@stores';
+
+  import type { TExpansionNode } from '@components/cluster-common/host-expansion/Index.vue'
+  import HostAgentStatus from '@components/cluster-common/HostAgentStatus.vue';
+  import IpSelector from '@components/ip-selector/IpSelector.vue';
+
+  interface Props {
+    cloudInfo: {
+      id: number,
+      name: string
+    },
+    data: TExpansionNode,
+    disableHostMethod?: (params: TExpansionNode['hostList'][0]) => string | boolean
+  }
+
+  interface Emits {
+    (e: 'change', value: TExpansionNode['hostList'], expansionDisk: TExpansionNode['expansionDisk']): void,
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const calcSelectHostDisk = (hostList: TExpansionNode['hostList']) => hostList
+    .reduce((result, hostItem) => result + Math.floor(Number(hostItem.bk_disk || 0)), 0)
+
+  const { t } = useI18n();
+  const globalBizsStore = useGlobalBizs();
+
+  const bizId = globalBizsStore.currentBizId;
+
+  const hostTableData = shallowRef<TExpansionNode['hostList']>(props.data.hostList || []);
+
+  // 目标容量和实际容量误差
+  const targetMatchReal = computed(() => {
+    const {
+      totalDisk,
+      targetDisk,
+      expansionDisk,
+    } = props.data;
+
+    const realTargetDisk = totalDisk + expansionDisk;
+    return targetDisk - realTargetDisk;
+  });
+
+  const tableColumns = [
+    {
+      label: t('节点 IP'),
+      field: 'ip',
+      render: ({ data }: {data: HostDetails}) => data.ip || '--',
+    },
+    {
+      label: t('Agent状态'),
+      field: 'alive',
+      render: ({ data }: { data: HostDetails }) => <HostAgentStatus data={data.alive} />,
+    },
+    {
+      label: t('磁盘_GB'),
+      field: 'bk_disk',
+      render: ({ data }: {data: HostDetails}) => data.bk_disk || '--',
+    },
+    {
+      label: t('操作'),
+      width: 100,
+      render: ({ data }: {data: HostDetails}) => (
+        <bk-button
+          text
+          theme="primary"
+          onClick={() => handleRemoveHost(data)}>
+          {t('删除')}
+        </bk-button>
+      ),
+    },
+  ];
+
+  const handleHostChange = (hostList: TExpansionNode['hostList']) => {
+    hostTableData.value = hostList;
+    emits('change', hostList, calcSelectHostDisk(hostList));
+  };
+
+  const handleRemoveHost = (data: TExpansionNode['hostList'][0]) => {
+    const hostList = hostTableData.value.reduce((result, item) => {
+      if (item.host_id !== data.host_id) {
+        result.push(item);
+      }
+      return result;
+    }, [] as TExpansionNode['hostList']);
+    hostTableData.value = hostList;
+    emits('change', hostList, calcSelectHostDisk(hostList));
+  };
+</script>
diff --git a/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-expansion/components/ResourcePoolSelector.vue b/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-expansion/components/ResourcePoolSelector.vue
new file mode 100644
index 000000000..41da7cf42
--- /dev/null
+++ b/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-expansion/components/ResourcePoolSelector.vue
@@ -0,0 +1,204 @@
+<!--
+ * 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="expansion-resource-pool-selector">
+    <BkLoading :loading="recommendSpecLoading">
+      <div class="form-block">
+        <div class="form-block-item">
+          <div class="form-block-title">
+            {{ t('xx节点规格', { name: data.label.toLocaleLowerCase() }) }}
+            <span class="required-flag">*</span>
+          </div>
+          <BkSelect
+            :loading="isResourceSpecLoading"
+            :model-value="specId || undefined"
+            @change="handleSpecChange">
+            <BkOption
+              v-for="item in resourceSpecList?.results"
+              :key="item.spec_id"
+              :label="item.spec_name"
+              :popover-delay="0"
+              :value="item.spec_id">
+              <BkPopover
+                :offset="20"
+                placement="right"
+                theme="light"
+                width="580">
+                <div style="display: flex; width: 100%; align-items: center">
+                  <div>{{ item.spec_name }}</div>
+                  <BkTag style="margin-left: auto">{{ specCountMap[item.spec_id] }}</BkTag>
+                </div>
+                <template #content>
+                  <SpecDetail :data="item" />
+                </template>
+              </BkPopover>
+            </BkOption>
+          </BkSelect>
+        </div>
+        <div class="form-block-item">
+          <div class="form-block-title">
+            <I18nT keypath="扩容至（当前n台）">
+              {{ originalHostNums }}
+            </I18nT>
+            <span class="required-flag">*</span>
+          </div>
+          <BkInput
+            :min="originalHostNums"
+            :model-value="machinePairCnt || undefined"
+            type="number"
+            @change="handleMachinePairCntChange" />
+        </div>
+      </div>
+    </BkLoading>
+    <div
+      v-if="estimateCapacity > 0"
+      class="disk-tips mt-16">
+      <span style="padding-right: 4px"> {{ t('预估容量（以最小配置计算）') }}: </span>
+      <span class="number">{{ estimateCapacity + data.totalDisk }}</span>
+      <span>G</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { computed, ref, shallowRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getSpecResourceCount } from '@services/source/dbresourceResource';
+  import { fetchRecommendSpec, getResourceSpecList } from '@services/source/dbresourceSpec';
+
+  import type { TExpansionNode } from '@components/cluster-common/host-expansion/Index.vue';
+  import SpecDetail from '@components/cluster-common/SpecDetailForPopover.vue';
+
+  interface Props {
+    data: TExpansionNode;
+    cloudInfo: {
+      id: number;
+      name: string;
+    };
+  }
+
+  interface Emits {
+    (e: 'change', value: TExpansionNode['resourceSpec'], expansionDisk: TExpansionNode['expansionDisk']): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const specId = ref(props.data.resourceSpec.spec_id);
+  const machinePairCnt = ref(props.data.resourceSpec.count + props.data.originalHostList.length);
+  const specCountMap = shallowRef<Record<number, number>>({});
+
+  const originalHostNums = computed(() => props.data.originalHostList.length);
+
+  // 资源池预估容量
+  const estimateCapacity = computed(() => {
+    if (machinePairCnt.value < 1) {
+      return 0;
+    }
+    const currentSpec = _.find(resourceSpecList.value?.results, (item) => item.spec_id === specId.value);
+    if (!currentSpec) {
+      return 0;
+    }
+    const storage = currentSpec.storage_spec.reduce((result, item) => result + item.size, 0);
+    return storage * machinePairCnt.value;
+  });
+
+  const { run: fetchSpecResourceCount } = useRequest(getSpecResourceCount, {
+    manual: true,
+    onSuccess(data) {
+      specCountMap.value = data;
+    },
+  });
+
+  const { loading: isResourceSpecLoading, data: resourceSpecList } = useRequest(getResourceSpecList, {
+    defaultParams: [
+      {
+        spec_cluster_type: props.data.specClusterType,
+        spec_machine_type: props.data.specMachineType,
+      },
+    ],
+    onSuccess(data) {
+      fetchSpecResourceCount({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        bk_cloud_id: props.cloudInfo.id,
+        spec_ids: data.results.map((item) => item.spec_id),
+      });
+    },
+  });
+
+  // 推荐规格
+  const { loading: recommendSpecLoading } = useRequest(fetchRecommendSpec, {
+    defaultParams: [
+      {
+        cluster_id: props.data.clusterId,
+        role: props.data.role,
+      },
+    ],
+  });
+
+  const triggerChange = () => {
+    emits(
+      'change',
+      {
+        spec_id: specId.value,
+        count: Math.max(machinePairCnt.value - originalHostNums.value, 0),
+      },
+      estimateCapacity.value,
+    );
+  };
+
+  const handleSpecChange = (value: number) => {
+    specId.value = value;
+    triggerChange();
+  };
+
+  const handleMachinePairCntChange = (value: string) => {
+    machinePairCnt.value = Number(value);
+    triggerChange();
+  };
+</script>
+<style lang="less">
+  .expansion-resource-pool-selector {
+    font-size: 12px;
+
+    .form-block {
+      display: flex;
+
+      .form-block-title {
+        margin-bottom: 6px;
+        line-height: 20px;
+
+        .required-flag {
+          color: #ea3636;
+        }
+      }
+
+      .form-block-item {
+        flex: 1;
+
+        & ~ .form-block-item {
+          margin-left: 32px;
+        }
+      }
+    }
+
+    .disk-tips {
+      color: #63656e;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-shrink/Index.vue b/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-shrink/Index.vue
new file mode 100644
index 000000000..d0fca86d9
--- /dev/null
+++ b/dbm-ui/frontend/src/components/cluster-common/doris-observer-host-shrink/Index.vue
@@ -0,0 +1,336 @@
+<!--
+ * 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="doris-observer-host-shrink">
+    <div class="header-box">
+      <span class="header-label">{{ data.label }}</span>
+      <BkTag
+        class="ml-8"
+        theme="info">
+        {{ data.tagText }}
+      </BkTag>
+    </div>
+    <BkAlert
+      v-if="isDisabled"
+      class="mb16"
+      theme="warning">
+      <template #title>
+        <I18nT keypath="当前仅剩n台 IP_无法缩容">
+          <span>{{ data.originalNodeList.length }}</span>
+        </I18nT>
+      </template>
+    </BkAlert>
+    <BkForm form-type="vertical">
+      <BkFormItem :label="t('目标容量')">
+        <div class="target-content-box">
+          <div class="content-label">
+            {{ t('缩容至') }}
+          </div>
+          <div class="content-value">
+            <div>
+              <BkInput
+                clearable
+                :disabled="isDisabled"
+                :max="data.originalNodeList.length"
+                :min="1"
+                :model-value="localTargetDisk > 0 ? localTargetDisk : undefined"
+                :placeholder="t('请输入')"
+                style="width: 156px; margin-right: 8px"
+                type="number"
+                @change="handleTargetDiskChange" />
+              <span>{{ t('台') }}</span>
+              <template v-if="localTargetDisk > 0">
+                <span> , {{ t('共缩容') }} </span>
+                <span
+                  class="strong-num"
+                  style="color: #2dcb56">
+                  {{ data.originalNodeList.length - localTargetDisk }}
+                </span>
+                <span>{{ t('台') }}</span>
+              </template>
+            </div>
+            <div class="content-tips">
+              <span>
+                {{ t('当前数量') }}:
+                <span class="strong-num">{{ data.originalNodeList.length }}</span>
+                {{ t('台') }}
+              </span>
+              <span v-if="data.minHost > 0">，{{ t('至少保留n台', { n: data.minHost }) }}</span>
+            </div>
+          </div>
+        </div>
+      </BkFormItem>
+      <BkFormItem>
+        <template #label>
+          <span>{{ t('缩容的节点 IP') }}</span>
+          <span style="font-weight: normal; color: #979ba5">
+            {{ t('（默认从节点列表选取，如不满足，可以手动添加）') }}
+          </span>
+        </template>
+        <div class="data-preview-table">
+          <div class="data-preview-header">
+            <div v-if="!data.targetDisk">
+              {{ t('请先设置期望容量') }}
+            </div>
+            <template v-else>
+              <I18nT
+                v-if="data.targetDisk"
+                keypath="共n台，共nG">
+                <span
+                  class="number"
+                  style="color: #3a84ff">
+                  {{ nodeTableData.length }}
+                </span>
+                <span
+                  class="number"
+                  style="color: #2dcb56">
+                  {{ data.shrinkDisk }}
+                </span>
+              </I18nT>
+              <div
+                v-if="targetMatchReal"
+                class="ml-8">
+                <I18nT
+                  v-if="targetMatchReal > 0"
+                  class="ml-8"
+                  keypath="较目标容量相差n台">
+                  <span
+                    class="number"
+                    style="color: #ff9c01">
+                    {{ targetMatchReal }}
+                  </span>
+                </I18nT>
+                <I18nT
+                  v-if="targetMatchReal < 0"
+                  class="ml-8"
+                  keypath="较目标容量超出n台">
+                  <span
+                    class="number"
+                    style="color: #ff9c01">
+                    {{ Math.abs(targetMatchReal) }}
+                  </span>
+                </I18nT>
+              </div>
+              <BkButton
+                v-if="data.targetDisk"
+                size="small"
+                style="margin-left: auto"
+                @click="handleShowHostSelect">
+                <DbIcon type="add" />
+                {{ t('手动添加') }}
+              </BkButton>
+            </template>
+          </div>
+          <BkTable
+            v-if="nodeTableData.length > 0"
+            :columns="tableColumns"
+            :data="nodeTableData" />
+        </div>
+      </BkFormItem>
+    </BkForm>
+    <SelectOriginalHost
+      v-model:is-show="isShowHostDialog"
+      :min-host="data.minHost"
+      :model-value="data.nodeList"
+      :original-node-list="data.originalNodeList"
+      :target-disk="data.totalDisk - localTargetDisk"
+      @change="handleSelectChange" />
+  </div>
+</template>
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+
+  import DorisNodeModel from '@services/model/doris/doris-node'
+
+  import SelectOriginalHost from '@components/cluster-common/host-shrink/components/SelectOriginalHost.vue';
+  import RenderHostStatus from '@components/render-host-status/Index.vue';
+
+  export interface TShrinkNode<N> {
+    // 节点显示名称
+    label: string,
+    // 原始节点列表
+    originalNodeList: N[],
+    // 缩容后的节点列表
+    nodeList: N[],
+    // 原始磁盘大小
+    totalDisk: number,
+    // 缩容目标磁盘大小
+    targetDisk: number,
+    // 选择节点后实际的缩容磁盘大小
+    shrinkDisk: number,
+    // 改节点所需的最少主机数
+    minHost: number,
+    // 节点类型 tag 文本
+    tagText: string;
+  }
+
+  interface Props {
+    data: TShrinkNode<DorisNodeModel>,
+  }
+
+  interface Emits {
+    (e: 'change', value: Props['data']['nodeList']): void,
+    (e: 'target-disk-change', value: Props['data']['totalDisk']): void,
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const localTargetDisk = ref(props.data.targetDisk);
+  const nodeTableData = shallowRef<Props['data']['nodeList']>(props.data.nodeList || []);
+  const isShowHostDialog = ref(false);
+
+  const isDisabled = computed(() => props.data.originalNodeList.length <= props.data.minHost);
+
+  // 台数误差
+  const targetMatchReal = computed(() => props.data.originalNodeList.length - localTargetDisk.value - nodeTableData.value.length);
+
+  const tableColumns = [
+    {
+      label: t('节点 IP'),
+      field: 'ip',
+      render: ({ data }: { data: Props['data']['nodeList'][0] }) => data.ip || '--',
+    },
+    {
+      label: t('Agent状态'),
+      field: 'alive',
+      render: ({ data }: { data: Props['data']['nodeList'][0] }) => <RenderHostStatus data={data.status} />
+    },
+    {
+      label: t('磁盘_GB'),
+      field: 'disk',
+      render: ({ data }: { data: Props['data']['nodeList'][0] }) => data.disk || '--',
+    },
+    {
+      label: t('操作'),
+      width: 100,
+      render: ({ data }: { data: Props['data']['nodeList'][0] }) => (
+        <bk-button
+          text
+          theme="primary"
+          onClick={() => handleRemoveHost(data)}>
+          {t('删除')}
+        </bk-button>
+      ),
+    },
+  ];
+
+  // 调整目标容量时需要自动匹配
+  watch(localTargetDisk, () => {
+    const nodeList = props.data.originalNodeList.slice(0, props.data.originalNodeList.length - localTargetDisk.value)
+    nodeTableData.value = nodeList
+
+    emits('change', nodeList);
+  });
+
+  // 更新目标容量
+  const handleTargetDiskChange = (value: Props['data']['totalDisk']) => {
+    localTargetDisk.value = value;
+    window.changeConfirm = true;
+    emits('target-disk-change', value);
+  };
+
+  const handleShowHostSelect = () => {
+    isShowHostDialog.value = true;
+  };
+
+  // 添加节点
+  const handleSelectChange = (nodeList: Props['data']['nodeList']) => {
+    nodeTableData.value = nodeList;
+    window.changeConfirm = true;
+    emits('change', nodeList);
+  };
+
+  // 删除选择的节点
+  const handleRemoveHost = (data: Props['data']['nodeList'][0]) => {
+    const nodeList = nodeTableData.value.reduce((result, item) => {
+      if (item.bk_host_id !== data.bk_host_id) {
+        result.push(item);
+      }
+      return result;
+    }, [] as Props['data']['nodeList']);
+
+    nodeTableData.value = nodeList;
+    window.changeConfirm = true;
+    emits('change', nodeList);
+  };
+</script>
+<style lang="less">
+  .doris-observer-host-shrink {
+    padding: 0 24px 24px;
+
+    .bk-form-label {
+      font-size: 12px;
+      font-weight: bold;
+      color: #63656e;
+    }
+
+    .header-box {
+      padding: 10px 0;
+      font-size: 14px;
+      color: #313238;
+
+      .header-box-label {
+        font-weight: bold;
+      }
+    }
+
+    .target-content-box {
+      display: flex;
+      align-items: flex-start;
+
+      .content-label {
+        padding-right: 8px;
+      }
+
+      .content-value {
+        flex: 1;
+      }
+
+      .content-tips {
+        display: flex;
+        height: 40px;
+        padding: 0 16px;
+        margin-top: 12px;
+        background: #fafbfd;
+        align-items: center;
+      }
+    }
+
+    .strong-num {
+      padding: 0 4px;
+      font-weight: bold;
+    }
+
+    .data-preview-table {
+      margin-top: 16px;
+
+      .data-preview-header {
+        display: flex;
+        height: 42px;
+        padding: 0 16px;
+        background: #f0f1f5;
+        align-items: center;
+      }
+
+      .bk-table {
+        th {
+          background: #f5f7fa;
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/cluster-common/es-host-expansion/Index.vue b/dbm-ui/frontend/src/components/cluster-common/es-host-expansion/Index.vue
index 39293a617..4b106898c 100644
--- a/dbm-ui/frontend/src/components/cluster-common/es-host-expansion/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/es-host-expansion/Index.vue
@@ -13,8 +13,13 @@
 
 <template>
   <div class="es-cluster-expansion-node-box">
-    <div class="header">
-      {{ data.label }}
+    <div class="header-box">
+      <span class="header-label">{{ data.label }}</span>
+      <BkTag
+        class="ml-8"
+        theme="info">
+        {{ data.tagText }}
+      </BkTag>
     </div>
     <BkForm form-type="vertical">
       <BkFormItem :label="t('期望容量')">
@@ -69,7 +74,7 @@
           </div>
         </div>
       </BkFormItem>
-      <BkFormItem :label="t('服务器')">
+      <BkFormItem>
         <ResourcePoolSelector
           v-if="ipSource === 'resource_pool'"
           :cloud-info="cloudInfo"
@@ -122,6 +127,8 @@
       count: number;
       instance_num: number;
     };
+    // 节点类型 tag 文本
+    tagText: string;
   }
 
   interface Props {
@@ -152,7 +159,7 @@
   const { t } = useI18n();
 
   const handleTargetDiskChange = (value: TExpansionNode['targetDisk']) => {
-    targetDisk.value = ~~value;
+    targetDisk.value = Math.floor(value);
     window.changeConfirm = true;
   };
 
@@ -189,11 +196,14 @@
       font-weight: bold;
     }
 
-    .header {
+    .header-box {
       padding: 10px 0;
       font-size: 14px;
-      font-weight: bold;
       color: #313238;
+
+      .header-box-label {
+        font-weight: bold;
+      }
     }
 
     .target-content-box {
diff --git a/dbm-ui/frontend/src/components/cluster-common/host-expansion/Index.vue b/dbm-ui/frontend/src/components/cluster-common/host-expansion/Index.vue
index 250916789..237416033 100644
--- a/dbm-ui/frontend/src/components/cluster-common/host-expansion/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/host-expansion/Index.vue
@@ -13,8 +13,13 @@
 
 <template>
   <div class="bi-data-cluster-expansion-node-box">
-    <div class="header">
-      {{ data.label }}
+    <div class="header-box">
+      <span class="header-label">{{ data.label }}</span>
+      <BkTag
+        class="ml-8"
+        theme="info">
+        {{ data.tagText }}
+      </BkTag>
     </div>
     <BkForm form-type="vertical">
       <BkFormItem :label="t('期望容量')">
@@ -69,7 +74,7 @@
           </div>
         </div>
       </BkFormItem>
-      <BkFormItem :label="t('服务器')">
+      <BkFormItem>
         <ResourcePoolSelector
           v-if="ipSource === 'resource_pool'"
           :cloud-info="cloudInfo"
@@ -121,6 +126,8 @@
       spec_id: number;
       count: number;
     };
+    // 节点类型 tag 文本
+    tagText: string;
   }
 
   interface Props {
@@ -151,7 +158,7 @@
   const { t } = useI18n();
 
   const handleTargetDiskChange = (value: TExpansionNode['targetDisk']) => {
-    targetDisk.value = ~~value;
+    targetDisk.value = Math.floor(value);
     window.changeConfirm = true;
   };
 
@@ -188,11 +195,14 @@
       font-weight: bold;
     }
 
-    .header {
+    .header-box {
       padding: 10px 0;
       font-size: 14px;
-      font-weight: bold;
       color: #313238;
+
+      .header-box-label {
+        font-weight: bold;
+      }
     }
 
     .target-content-box {
diff --git a/dbm-ui/frontend/src/components/cluster-common/host-expansion/NodeStatusList.vue b/dbm-ui/frontend/src/components/cluster-common/host-expansion/NodeStatusList.vue
index dfcce16cc..4618d1bcb 100644
--- a/dbm-ui/frontend/src/components/cluster-common/host-expansion/NodeStatusList.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/host-expansion/NodeStatusList.vue
@@ -24,11 +24,27 @@
       </div>
       <template v-if="validateStatusMemo[nodeItem.key]">
         <div
-          v-if="nodeInfo[nodeItem.key].expansionDisk"
+          v-if="
+            nodeItem.key === 'observer' &&
+            nodeInfo[nodeItem.key].resourceSpec.count - nodeInfo[nodeItem.key].originalHostList.length > 0
+          "
+          class="disk-tips">
+          <span class="number">{{
+            nodeInfo[nodeItem.key].resourceSpec.count - nodeInfo[nodeItem.key].originalHostList.length
+          }}</span>
+          <span>{{ t('台') }}</span>
+        </div>
+        <div
+          v-else-if="nodeInfo[nodeItem.key].expansionDisk"
           class="disk-tips">
           <span class="number">{{ nodeInfo[nodeItem.key].expansionDisk }}</span>
           <span>G</span>
         </div>
+        <div
+          v-else-if="nodeInfo[nodeItem.key].targetDisk"
+          class="unfinished-tips">
+          <span>{{ t('未完善') }}</span>
+        </div>
         <div
           v-else
           class="empty-tips">
@@ -42,6 +58,8 @@
   import { reactive } from 'vue';
   import { useI18n } from 'vue-i18n';
 
+  import DorisNodeModel from '@services/model/doris/doris-node';
+
   import type { TExpansionNode } from './Index.vue';
 
   interface Props {
@@ -83,7 +101,7 @@
     validate() {
       Object.keys(validateStatusMemo).forEach((key) => (validateStatusMemo[key] = true));
       return Object.values(props.nodeInfo).some((nodeData) => {
-        if (!nodeData.targetDisk) {
+        if (!nodeData.targetDisk && nodeData.role !== DorisNodeModel.ROLE_OBSERVER) {
           return false;
         }
         if (props.ipSource === 'manual_input') {
@@ -141,6 +159,13 @@
       flex: 0 0 auto;
     }
 
+    .unfinished-tips {
+      margin-left: auto;
+      font-weight: normal;
+      color: #ea3636;
+      flex: 0 0 auto;
+    }
+
     .disk-tips {
       margin-left: auto;
       font-weight: normal;
diff --git a/dbm-ui/frontend/src/components/cluster-common/host-replace/Index.vue b/dbm-ui/frontend/src/components/cluster-common/host-replace/Index.vue
index 50878913e..ed029826b 100644
--- a/dbm-ui/frontend/src/components/cluster-common/host-replace/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/host-replace/Index.vue
@@ -110,10 +110,13 @@
 <script
   setup
   lang="tsx"
-  generic="T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel | InfluxDBInstanceModel">
+  generic="
+    T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel | InfluxDBInstanceModel | DorisNodeModel
+  ">
   import { computed } from 'vue';
   import { useI18n } from 'vue-i18n';
 
+  import type DorisNodeModel from '@services/model/doris/doris-node';
   import type EsNodeModel from '@services/model/es/es-node';
   import type HdfsNodeModel from '@services/model/hdfs/hdfs-node';
   import type InfluxDBInstanceModel from '@services/model/influxdb/influxdbInstance';
diff --git a/dbm-ui/frontend/src/components/cluster-common/host-replace/components/HostSelector.vue b/dbm-ui/frontend/src/components/cluster-common/host-replace/components/HostSelector.vue
index dd31e01e3..8c4b9b5e1 100644
--- a/dbm-ui/frontend/src/components/cluster-common/host-replace/components/HostSelector.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/host-replace/components/HostSelector.vue
@@ -61,10 +61,13 @@
 <script
   setup
   lang="ts"
-  generic="T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel | InfluxdbInstanceModel">
+  generic="
+    T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel | InfluxdbInstanceModel | DorisNodeModel
+  ">
   import { ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
+  import type DorisNodeModel from '@services/model/doris/doris-node';
   import type EsNodeModel from '@services/model/es/es-node';
   import type HdfsNodeModel from '@services/model/hdfs/hdfs-node';
   import type InfluxdbInstanceModel from '@services/model/influxdb/influxdbInstance';
diff --git a/dbm-ui/frontend/src/components/cluster-common/host-replace/components/ResourcePoolSelector.vue b/dbm-ui/frontend/src/components/cluster-common/host-replace/components/ResourcePoolSelector.vue
index 1813cfae9..c8b9588cb 100644
--- a/dbm-ui/frontend/src/components/cluster-common/host-replace/components/ResourcePoolSelector.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/host-replace/components/ResourcePoolSelector.vue
@@ -48,13 +48,16 @@
 <script
   setup
   lang="ts"
-  generic="T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel | InfluxdbInstanceModel">
+  generic="
+    T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel | InfluxdbInstanceModel | DorisNodeModel
+  ">
   import {
     shallowRef,
   } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
+  import type DorisNodeModel from '@services/model/doris/doris-node'
   import type EsNodeModel from '@services/model/es/es-node';
   import type HdfsNodeModel from '@services/model/hdfs/hdfs-node';
   import InfluxdbInstanceModel from '@services/model/influxdb/influxdbInstance';
diff --git a/dbm-ui/frontend/src/components/cluster-common/host-shrink/Index.vue b/dbm-ui/frontend/src/components/cluster-common/host-shrink/Index.vue
index c4a0a8b39..6661f2537 100644
--- a/dbm-ui/frontend/src/components/cluster-common/host-shrink/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/host-shrink/Index.vue
@@ -13,8 +13,13 @@
 
 <template>
   <div class="big-data-cluster-shrink-node-box">
-    <div class="header">
-      {{ data.label }}
+    <div class="header-box">
+      <span class="header-label">{{ data.label }}</span>
+      <BkTag
+        class="ml-8"
+        theme="info">
+        {{ data.tagText }}
+      </BkTag>
     </div>
     <BkAlert
       v-if="isDisabled"
@@ -27,10 +32,10 @@
       </template>
     </BkAlert>
     <BkForm form-type="vertical">
-      <BkFormItem :label="$t('目标容量')">
+      <BkFormItem :label="t('目标容量')">
         <div class="target-content-box">
           <div class="content-label">
-            {{ $t('缩容至') }}
+            {{ t('缩容至') }}
           </div>
           <div class="content-value">
             <div>
@@ -40,13 +45,13 @@
                 :max="data.totalDisk"
                 :min="1"
                 :model-value="localTargetDisk > 0 ? localTargetDisk : undefined"
-                :placeholder="$t('请输入')"
+                :placeholder="t('请输入')"
                 style="width: 156px; margin-right: 8px"
                 type="number"
                 @change="handleTargetDiskChange" />
               <span>GB</span>
               <template v-if="localTargetDisk > 0">
-                <span> , {{ $t('共缩容') }} </span>
+                <span> , {{ t('共缩容') }} </span>
                 <span
                   class="strong-num"
                   style="color: #2dcb56">
@@ -57,12 +62,12 @@
             </div>
             <div class="content-tips">
               <span>
-                {{ $t('当前容量') }}:
+                {{ t('当前容量') }}:
                 <span class="strong-num">{{ data.totalDisk }}</span>
                 GB
               </span>
               <span style="margin-left: 65px">
-                <span>{{ $t('缩容后') }}:</span>
+                <span>{{ t('缩容后') }}:</span>
                 <span v-if="data.targetDisk">
                   <span class="strong-num">{{ localTargetDisk }}</span>
                   GB
@@ -152,19 +157,17 @@
       @change="handleSelectChange" />
   </div>
 </template>
-<script setup lang="tsx" generic="T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel">
-  import {
-    computed,
-    ref,
-    shallowRef,
-    watch,
-  } from 'vue';
+<script
+  setup
+  lang="tsx"
+  generic="T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel | DorisNodeModel">
   import { useI18n } from 'vue-i18n';
 
-  import type EsNodeModel from '@services/model/es/es-node';
-  import type HdfsNodeModel from '@services/model/hdfs/hdfs-node';
-  import type KafkaNodeModel from '@services/model/kafka/kafka-node';
-  import type PulsarNodeModel from '@services/model/pulsar/pulsar-node';
+  import DorisNodeModel from '@services/model/doris/doris-node'
+  import EsNodeModel from '@services/model/es/es-node';
+  import HdfsNodeModel from '@services/model/hdfs/hdfs-node';
+  import KafkaNodeModel from '@services/model/kafka/kafka-node';
+  import PulsarNodeModel from '@services/model/pulsar/pulsar-node';
 
   import RenderHostStatus from '@components/render-host-status/Index.vue';
 
@@ -185,6 +188,8 @@
     shrinkDisk: number,
     // 改节点所需的最少主机数
     minHost: number,
+    // 节点类型 tag 文本
+    tagText: string;
   }
 
   interface Props {
@@ -315,11 +320,14 @@
       color: #63656e;
     }
 
-    .header {
+    .header-box {
       padding: 10px 0;
       font-size: 14px;
-      font-weight: bold;
       color: #313238;
+
+      .header-box-label {
+        font-weight: bold;
+      }
     }
 
     .target-content-box {
diff --git a/dbm-ui/frontend/src/components/cluster-common/host-shrink/NodeStatusList.vue b/dbm-ui/frontend/src/components/cluster-common/host-shrink/NodeStatusList.vue
index 6e834ab2b..9bebd9d68 100644
--- a/dbm-ui/frontend/src/components/cluster-common/host-shrink/NodeStatusList.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/host-shrink/NodeStatusList.vue
@@ -24,7 +24,13 @@
       </div>
       <template v-if="validateStatusMemo[nodeItem.key]">
         <div
-          v-if="nodeInfo[nodeItem.key].shrinkDisk"
+          v-if="nodeItem.key === 'observer' && nodeInfo[nodeItem.key].nodeList.length > 0"
+          class="disk-tips">
+          <span class="number">{{ nodeInfo[nodeItem.key].nodeList.length }}</span>
+          <span>{{ t('台') }}</span>
+        </div>
+        <div
+          v-else-if="nodeInfo[nodeItem.key].shrinkDisk"
           class="disk-tips">
           <span class="number">{{ nodeInfo[nodeItem.key].shrinkDisk }}</span>
           <span>G</span>
@@ -38,13 +44,17 @@
     </div>
   </div>
 </template>
-<script setup lang="ts" generic="T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel">
+<script
+  setup
+  lang="ts"
+  generic="T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel | DorisNodeModel">
   import { useI18n } from 'vue-i18n';
 
-  import type EsNodeModel from '@services/model/es/es-node';
-  import type HdfsNodeModel from '@services/model/hdfs/hdfs-node';
-  import type KafkaNodeModel from '@services/model/kafka/kafka-node';
-  import type PulsarNodeModel from '@services/model/pulsar/pulsar-node';
+  import DorisNodeModel from '@services/model/doris/doris-node';
+  import EsNodeModel from '@services/model/es/es-node';
+  import HdfsNodeModel from '@services/model/hdfs/hdfs-node';
+  import KafkaNodeModel from '@services/model/kafka/kafka-node';
+  import PulsarNodeModel from '@services/model/pulsar/pulsar-node';
 
   import type { TShrinkNode } from './Index.vue';
 
diff --git a/dbm-ui/frontend/src/components/cluster-common/host-shrink/components/SelectOriginalHost.vue b/dbm-ui/frontend/src/components/cluster-common/host-shrink/components/SelectOriginalHost.vue
index 2392d0bfa..4443275a4 100644
--- a/dbm-ui/frontend/src/components/cluster-common/host-shrink/components/SelectOriginalHost.vue
+++ b/dbm-ui/frontend/src/components/cluster-common/host-shrink/components/SelectOriginalHost.vue
@@ -57,7 +57,10 @@
     </template>
   </BkDialog>
 </template>
-<script setup lang="tsx" generic="T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel">
+<script
+  setup
+  lang="tsx"
+  generic="T extends EsNodeModel | HdfsNodeModel | KafkaNodeModel | PulsarNodeModel | DorisNodeModel">
   import  {
     computed,
     shallowRef,
@@ -65,10 +68,11 @@
   } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import type EsNodeModel from '@services/model/es/es-node';
+  import DorisNodeModel from '@services/model/doris/doris-node'
+  import EsNodeModel from '@services/model/es/es-node';
   import HdfsNodeModel from '@services/model/hdfs/hdfs-node';
-  import type KafkaNodeModel from '@services/model/kafka/kafka-node';
-  import type PulsarNodeModel from '@services/model/pulsar/pulsar-node';
+  import KafkaNodeModel from '@services/model/kafka/kafka-node';
+  import PulsarNodeModel from '@services/model/pulsar/pulsar-node';
 
   import RenderClusterRole from '@components/cluster-common/RenderRole.vue';
   import RenderHostStatus from '@components/render-host-status/Index.vue';
diff --git a/dbm-ui/frontend/src/components/cluster-details/ClusterTopo.vue b/dbm-ui/frontend/src/components/cluster-details/ClusterTopo.vue
index 6f097a7fe..fc89c4938 100644
--- a/dbm-ui/frontend/src/components/cluster-details/ClusterTopo.vue
+++ b/dbm-ui/frontend/src/components/cluster-details/ClusterTopo.vue
@@ -85,6 +85,7 @@
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
+  import { getDorisTopoGraph } from '@services/source/doris';
   import { getEsTopoGraph } from '@services/source/es';
   import { getHdfsTopoGraph } from '@services/source/hdfs';
   import { getKafkaTopoGraph } from '@services/source/kafka';
@@ -137,6 +138,7 @@
     mongodb: getMongoClustersTopoGraph,
     sqlserver_ha: getHaClusterTopoGraph,
     sqlserver_single: getSingleClusterTopoGraph,
+    doris: getDorisTopoGraph,
   };
 
   /** 拓扑功能 */
diff --git a/dbm-ui/frontend/src/components/cluster-details/common/useRenderGraph.tsx b/dbm-ui/frontend/src/components/cluster-details/common/useRenderGraph.tsx
index d0181bf9d..928656a99 100644
--- a/dbm-ui/frontend/src/components/cluster-details/common/useRenderGraph.tsx
+++ b/dbm-ui/frontend/src/components/cluster-details/common/useRenderGraph.tsx
@@ -14,7 +14,9 @@
 import _ from 'lodash';
 import type { Instance } from 'tippy.js';
 import type { VNode } from 'vue';
+import type { JSX } from 'vue/jsx-runtime';
 
+import { retrieveDorisInstance } from '@services/source/doris';
 import { retrieveEsInstance } from '@services/source/es';
 import { retrieveHdfsInstance } from '@services/source/hdfs';
 import { retrieveKafkaInstance } from '@services/source/kafka';
@@ -125,6 +127,7 @@ const apiMap: Record<string, (params: any) => Promise<any>> = {
   tendbha: retrieveTendbhaInstance,
   tendbcluster: retrieveSpiderInstance,
   riak: retrieveRiakInstance,
+  doris: retrieveDorisInstance
 };
 
 const entryTagMap: Record<string, string> = {
diff --git a/dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/Index.vue b/dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/Index.vue
index c1019d309..2453878e9 100644
--- a/dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector-new/components/mongo/Index.vue
@@ -158,11 +158,11 @@
       <div class="cluster-name-box">
           <div class="cluster-name">{data.master_domain}</div>
           {data.phase === 'offline' && (
-            <db-icon
-              svg
-              type="yijinyong"
-              class="mr-8"
-              style="width: 38px; height: 16px;" />
+            <bk-tag
+              class="ml-8"
+              size="small">
+              {t('已禁用')}
+            </bk-tag>
           )}
           {data.operations && data.operations.length > 0 && (
             <bk-popover
diff --git a/dbm-ui/frontend/src/components/cluster-selector-new/components/sqlserver/Index.vue b/dbm-ui/frontend/src/components/cluster-selector-new/components/sqlserver/Index.vue
index 96f9b8738..7e29d63d6 100644
--- a/dbm-ui/frontend/src/components/cluster-selector-new/components/sqlserver/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector-new/components/sqlserver/Index.vue
@@ -168,18 +168,18 @@
       field: 'cluster_name',
       showOverflowTooltip: true,
     },
-    {
-      label: t('管控区域'),
-      field: 'bk_cloud_name',
-      width: 140,
-      showOverflowTooltip: true,
-    },
     {
       label: t('所属模块'),
       field: 'db_module_name',
       width: 130,
       showOverflowTooltip: true,
     },
+    {
+      label: t('管控区域'),
+      field: 'bk_cloud_name',
+      width: 140,
+      showOverflowTooltip: true,
+    },
     {
       label: t('状态'),
       field: 'status',
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
index 38fa44a4b..d3f8eea17 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
@@ -174,11 +174,11 @@
               }
               {
                 data.isOffline && (
-                  <db-icon
-                    svg
-                    type="yijinyong"
-                    class="cluster-tag ml-4"
-                    style="width: 38px; height: 16px;" />
+                  <bk-tag
+                    class="ml-4"
+                    size="small">
+                    {t('已禁用')}
+                  </bk-tag>
                 )
               }
             </>,
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
index eea11f7a8..cd1422948 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
@@ -183,11 +183,11 @@
               }
               {
                 data.isOffline && (
-                  <db-icon
-                    svg
-                    type="yijinyong"
-                    class="cluster-tag ml-4"
-                    style="width: 38px; height: 16px;" />
+                  <bk-tag
+                    class="ml-8"
+                    size="small">
+                    {t('已禁用')}
+                  </bk-tag>
                 )
               }
             </>,
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
index 4a6f20c88..20a47e40c 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
@@ -181,11 +181,11 @@
               }
               {
                 data.isOffline && (
-                  <db-icon
-                    svg
-                    type="yijinyong"
-                    class="cluster-tag ml-4"
-                    style="width: 38px; height: 16px;" />
+                  <bk-tag
+                    class="ml-8"
+                    size="small">
+                    {t('已禁用')}
+                  </bk-tag>
                 )
               }
             </>,
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
index 2ca349602..ab105d4e0 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
@@ -181,11 +181,11 @@
               }
               {
                 data.isOffline && (
-                  <db-icon
-                    svg
-                    type="yijinyong"
-                    class="cluster-tag ml-4"
-                    style="width: 38px; height: 16px;" />
+                  <bk-tag
+                    class="ml-4"
+                    size="small">
+                    {t('已禁用')}
+                  </bk-tag>
                 )
               }
             </>,
diff --git a/dbm-ui/frontend/src/components/cluster-tab/Index.vue b/dbm-ui/frontend/src/components/cluster-tab/Index.vue
index 832179655..df29c6f3e 100644
--- a/dbm-ui/frontend/src/components/cluster-tab/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-tab/Index.vue
@@ -173,6 +173,11 @@
       label: 'Riak',
       name: ClusterTypes.RIAK,
     },
+    {
+      moduleId: 'bigdata',
+      label: 'Doris',
+      name: ClusterTypes.DORIS,
+    },
   ];
 
   const funControllerStore = useFunController();
diff --git a/dbm-ui/frontend/src/components/db-tab/Index.vue b/dbm-ui/frontend/src/components/db-tab/Index.vue
index 14842a09f..67902e09c 100644
--- a/dbm-ui/frontend/src/components/db-tab/Index.vue
+++ b/dbm-ui/frontend/src/components/db-tab/Index.vue
@@ -95,6 +95,11 @@
       label: 'Riak',
       name: DBTypes.RIAK,
     },
+    {
+      moduleId: 'bigdata',
+      label: 'Doris',
+      name: DBTypes.DORIS,
+    },
   ];
 
   const funControllerStore = useFunController();
diff --git a/dbm-ui/frontend/src/components/dropdown-export-excel/index.vue b/dbm-ui/frontend/src/components/dropdown-export-excel/index.vue
index 9c01481b7..61986a904 100644
--- a/dbm-ui/frontend/src/components/dropdown-export-excel/index.vue
+++ b/dbm-ui/frontend/src/components/dropdown-export-excel/index.vue
@@ -32,6 +32,10 @@
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
+  import {
+    exportDorisClusterToExcel,
+    exportDorisInstanceToExcel,
+  } from '@services/source/doris';
   import {
     exportEsClusterToExcel,
     exportEsInstanceToExcel,
@@ -83,7 +87,7 @@
   } from '@services/source/tendbsingle';
 
   interface Props {
-    type: 'tendbsingle' | 'tendbha' | 'spider' | 'redis' | 'pulsar' | 'kafka' | 'influxdb' | 'hdfs' | 'es' | 'riak' | 'mongodb' | 'sqlserver_ha' | 'sqlserver_single';
+    type: 'tendbsingle' | 'tendbha' | 'spider' | 'redis' | 'pulsar' | 'kafka' | 'influxdb' | 'hdfs' | 'es' | 'riak' | 'mongodb' | 'sqlserver_ha' | 'sqlserver_single' | 'doris';
     ids?: number[];
     exportType?: 'cluster' | 'instance';
   }
@@ -153,6 +157,10 @@
     sqlserver_single: {
       cluster: exportSqlServerSingleClusterToExcel,
     },
+    doris: {
+      cluster: exportDorisClusterToExcel,
+      instance: exportDorisInstanceToExcel,
+    },
   };
 
   const handleExport = async (type: 'all' | 'selected') => {
diff --git a/dbm-ui/frontend/src/components/ip-selector-submit-tips/Index.vue b/dbm-ui/frontend/src/components/ip-selector-submit-tips/Index.vue
new file mode 100644
index 000000000..86147da6e
--- /dev/null
+++ b/dbm-ui/frontend/src/components/ip-selector-submit-tips/Index.vue
@@ -0,0 +1,31 @@
+<!--
+ * 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>
+  <I18nT
+    :keypath="keypath"
+    style="font-size: 14px; color: #63656e"
+    tag="span">
+    <span style="font-weight: bold; color: #2dcb56"> {{ values[0] }} </span>
+    <span style="font-weight: bold; color: #3a84ff"> {{ values[1] }} </span>
+  </I18nT>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    keypath: string;
+    values: [number, number];
+  }
+
+  defineProps<Props>();
+</script>
diff --git a/dbm-ui/frontend/src/components/system-search/hooks/useRedirect.ts b/dbm-ui/frontend/src/components/system-search/hooks/useRedirect.ts
index 80bb479c0..a5340297f 100644
--- a/dbm-ui/frontend/src/components/system-search/hooks/useRedirect.ts
+++ b/dbm-ui/frontend/src/components/system-search/hooks/useRedirect.ts
@@ -36,6 +36,7 @@ export const useRedirect = () => {
     sqlserver_single: 'SqlServerSingle',
     MongoShardedCluster: 'MongoDBSharedClusterList',
     MongoReplicaSet: 'MongoDBReplicaSetList',
+    doris: 'DorisList',
   } as Record<string, string>;
 
   return (clusterType: string, queryParams: Record<string, any>, bizId: number) => {
diff --git a/dbm-ui/frontend/src/layout/Index.vue b/dbm-ui/frontend/src/layout/Index.vue
index 3ccd9e1c0..ed317a549 100644
--- a/dbm-ui/frontend/src/layout/Index.vue
+++ b/dbm-ui/frontend/src/layout/Index.vue
@@ -133,6 +133,7 @@
       'RiakManage',
       'MongoDBManage',
       'SqlServerManage',
+      'DorisManage',
       'taskHistory',
       'DatabaseWhitelist',
       'ticketManage',
diff --git a/dbm-ui/frontend/src/layout/components/database-manage/components/ModuleConfig.vue b/dbm-ui/frontend/src/layout/components/database-manage/components/ModuleConfig.vue
index 974a7b96e..e3c7448fb 100644
--- a/dbm-ui/frontend/src/layout/components/database-manage/components/ModuleConfig.vue
+++ b/dbm-ui/frontend/src/layout/components/database-manage/components/ModuleConfig.vue
@@ -172,6 +172,11 @@
         value: 'hdfs',
         icon: 'hdfs',
       },
+      {
+        name: 'Doris',
+        value: 'doris',
+        icon: 'doris',
+      },
     ],
   };
 
diff --git a/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Doris.vue b/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Doris.vue
new file mode 100644
index 000000000..876a67052
--- /dev/null
+++ b/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Doris.vue
@@ -0,0 +1,24 @@
+<template>
+  <FunController
+    controller-id="doris"
+    module-id="bigdata">
+    <BkMenuGroup name="Doris">
+      <BkMenuItem key="DorisManage">
+        <template #icon>
+          <DbIcon type="doris" />
+        </template>
+        <span
+          v-overflow-tips.right
+          class="text-overflow">
+          {{ t('集群管理') }}
+        </span>
+      </BkMenuItem>
+    </BkMenuGroup>
+  </FunController>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+</script>
diff --git a/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Index.vue b/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Index.vue
index 7fbda0794..5114016e6 100644
--- a/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Index.vue
+++ b/dbm-ui/frontend/src/layout/components/database-manage/components/module-group/Index.vue
@@ -4,6 +4,7 @@
 <script setup lang="ts">
   import { computed } from 'vue';
 
+  import Doris from './Doris.vue';
   import Es from './Es.vue';
   import Hdfs from './Hdfs.vue';
   import Influxdb from './Influxdb.vue';
@@ -34,6 +35,7 @@
     riak: Riak,
     mongodb: MongoDB,
     sqlserver: SqlServer,
+    doris: Doris,
   };
 
   const renderCom = computed(() => comMap[props.name as keyof typeof comMap]);
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 164b152d0..fc0768847 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3104,5 +3104,49 @@
     "迁移 DB": "迁移 DB",
     "数据迁移：数据同步复制到新集群": "数据迁移：数据同步复制到新集群",
     "(共 n 个)": "（共 {0} 个）",
+    "Follower节点规格": "Follower 节点规格",
+    "Observer节点规格": "Observer 节点规格",
+    "【Doris】集群管理": "【Doris】集群管理",
+    "Doris集群部署": "Doris集群部署",
+    "申请Doris集群部署": "申请Doris集群部署",
+    "Doris版本": "Doris 版本",
+    "Follower节点": "Follower 节点",
+    "Observer节点": "Observer 节点",
+    "固定为n台": "固定为 {0} 台",
+    "查询端口": "查询端口",
+    "主机已被Follower节点使用": "主机已被 Follower 节点使用",
+    "主机已被Observer节点使用": "主机已被 Observer 节点使用",
+    "Follower节点IP": "Follower 节点 IP",
+    "Observer节点IP": "Observer 节点 IP",
+    "9010 和 9020 为服务内部占用端口": "9010 和 9020 为服务内部占用端口",
+    "与http端口互斥": "与 http 端口互斥",
+    "与查询端口互斥": "与查询端口互斥",
+    "至少添加一种节点IP": "至少添加一种节点 IP",
+    "name容量从n台扩容至n台": "{name} 容量从 {hostNumBefore} 台扩容至 {hostNumAfter} 台",
+    "name容量从n台缩容至n台": "{name} 容量从 {hostNumBefore} 台缩容至 {hostNumAfter} 台",
+    "至少缩容一种类型": "至少缩容一种类型",
+    "当前数量": "当前数量",
+    "确认禁用该集群？": "确认禁用该集群？",
+    "确认启用该集群？": "确认启用该集群？",
+    "启用后，将会恢复访问": "启用后，将会恢复访问",
+    "删除后将产生以下影响": "删除后将产生以下影响：",
+    "删除xxx集群": "删除 {0} 集群",
+    "删除xxx实例数据，停止相关进程": "删除 {xxx} 实例数据，停止相关进程",
+    "确认扩容集群？": "确认扩容集群？",
+    "若选择至少需要n台": "若选择至少需要 {0} 台",
+    "若选择至少需要n台，已选m台": "若选择至少需要 {0} 台，已选 {1} 台",
+    "扩容中": "扩容中",
+    "缩容中": "缩容中",
+    "替换中": "替换中",
+    "请保证冷/热节点至少存在一种": "请保证冷/热节点至少存在一种",
+    "Follower节点不支持缩容": "Follower节点不支持缩容",
+    "Follower类型节点若存在至少保留两台": "Follower类型节点若存在至少保留两台",
+    "冷/热 数据节点必选 1 种以上，每个角色至少需要 2 台": "冷/热 数据节点必选 1 种以上，每个角色至少需要 2 台",
+    "未完善": "未完善",
+    "扩容的节点 IP": "扩容的节点 IP",
+    "实例正在重启中，不能勾选": "实例正在重启中，不能勾选",
+    "较目标容量相差n台": "，较目标容量相差 {0} 台",
+    "较目标容量超出n台": "，较目标容量超出 {0} 台",
+    "Observer类型节点若存在至少保留两台": "Observer类型节点若存在至少保留两台",
     "这行勿动！新增翻译请在上一行添加！": ""
-}
\ No newline at end of file
+}
diff --git a/dbm-ui/frontend/src/router/index.ts b/dbm-ui/frontend/src/router/index.ts
index 2e87249c4..539032593 100644
--- a/dbm-ui/frontend/src/router/index.ts
+++ b/dbm-ui/frontend/src/router/index.ts
@@ -32,6 +32,7 @@ import BizPermission from '@views/BizPermission.vue';
 import getDbConfRoutes from '@views/db-configure/routes';
 // import getDbManageRoutes from '@views/db-manage/routes';
 import getDbhaSwitchEventsRouters from '@views/dbha-switch-events/routes';
+import getDorisRoutes from '@views/doris-manage/routes';
 import getDutyRuleManageRoutes from '@views/duty-rule-manage/routes'
 import getESRoutes from '@views/es-manage/routes';
 import getHDFSRoutes from '@views/hdfs-manage/routes';
@@ -164,6 +165,7 @@ export default () => {
         ...getTicketFlowSettingRoutes(),
         ...getMongoRoutes(mongdbController),
         ...getSqlServerRouters(funControllerData),
+        ...getDorisRoutes(bigdataController),
       ],
     },
     {
diff --git a/dbm-ui/frontend/src/services/model/doris/doris-instance.ts b/dbm-ui/frontend/src/services/model/doris/doris-instance.ts
new file mode 100644
index 000000000..4c1f4a7fa
--- /dev/null
+++ b/dbm-ui/frontend/src/services/model/doris/doris-instance.ts
@@ -0,0 +1,120 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+import { TicketTypes } from '@common/const';
+
+import { t } from '@locales/index';
+
+export default class DorisInstance {
+  static DORIS_REBOOT = TicketTypes.DORIS_REBOOT;
+
+  static operationIconMap = {
+    [DorisInstance.DORIS_REBOOT]: t('重启中'),
+  };
+
+  static operationTextMap = {
+    [DorisInstance.DORIS_REBOOT]: t('重启任务进行中'),
+  };
+
+  bk_cloud_id: number;
+  bk_host_id: number;
+  cluster_id: number;
+  create_at: string;
+  restart_at: string;
+  domain: string;
+  id: number;
+  instance_address: string;
+  instance_name: string;
+  operations: Array<{
+    flow_id: number;
+    instance_id: number;
+    operator: string;
+    status: string;
+    ticket_id: number;
+    ticket_type: string;
+    title: string;
+  }>;
+  role: string;
+  status: string;
+
+  constructor(payload = {} as DorisInstance) {
+    this.bk_cloud_id = payload.bk_cloud_id;
+    this.bk_host_id = payload.bk_host_id;
+    this.cluster_id = payload.cluster_id;
+    this.create_at = payload.create_at;
+    this.restart_at = payload.restart_at;
+    this.domain = payload.domain;
+    this.id = payload.id;
+    this.instance_address = payload.instance_address;
+    this.instance_name = payload.instance_name;
+    this.role = payload.role;
+    this.status = payload.status;
+
+    this.operations = this.initOperations(payload.operations);
+  }
+
+  // 操作中的状态
+  get operationRunningStatus() {
+    if (this.operations.length < 1) {
+      return '';
+    }
+    const operation = this.operations[0];
+    if (operation.status !== 'RUNNING') {
+      return '';
+    }
+    return operation.ticket_type;
+  }
+
+  // 操作中的状态描述文本
+  get operationStatusText() {
+    return DorisInstance.operationTextMap[this.operationRunningStatus];
+  }
+  // 操作中的状态 icon
+  get operationStatusIcon() {
+    return DorisInstance.operationIconMap[this.operationRunningStatus];
+  }
+  // 操作中的单据 ID
+  get operationTicketId() {
+    if (this.operations.length < 1) {
+      return 0;
+    }
+    const operation = this.operations[0];
+    if (operation.status !== 'RUNNING') {
+      return 0;
+    }
+    return operation.ticket_id;
+  }
+
+  get operationDisabled() {
+    // 各个操作互斥，有其他任务进行中禁用操作按钮
+    if (this.operationRunningStatus) {
+      return true;
+    }
+    return false;
+  }
+
+  get operationTagTips() {
+    return this.operations.map((item) => ({
+      icon: DorisInstance.operationIconMap[item.ticket_type],
+      tip: DorisInstance.operationTextMap[item.ticket_type],
+      ticketId: item.ticket_id,
+    }));
+  }
+
+  initOperations(payload = [] as DorisInstance['operations']) {
+    if (!Array.isArray(payload)) {
+      return [];
+    }
+
+    return payload;
+  }
+}
diff --git a/dbm-ui/frontend/src/services/model/doris/doris-node.ts b/dbm-ui/frontend/src/services/model/doris/doris-node.ts
new file mode 100644
index 000000000..d043ef845
--- /dev/null
+++ b/dbm-ui/frontend/src/services/model/doris/doris-node.ts
@@ -0,0 +1,108 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import { bytePretty, isRecentDays, utcDisplayTime } from '@utils';
+
+import { t } from '@locales/index';
+
+export default class DorisNode {
+  static ROLE_FOLLOWER = 'doris_follower';
+  static ROLE_OBSERVER = 'doris_observer';
+  static ROLE_HOT = 'doris_backend_hot';
+  static ROLE_COLD = 'doris_backend_cold';
+
+  static roleLabelMap = {
+    [DorisNode.ROLE_FOLLOWER]: t('Follower节点'),
+    [DorisNode.ROLE_OBSERVER]: t('Observer节点'),
+    [DorisNode.ROLE_HOT]: t('热节点'),
+    [DorisNode.ROLE_COLD]: t('冷节点'),
+  };
+
+  bk_cloud_id: number;
+  bk_cloud_name: string;
+  bk_host_id: number;
+  bk_host_name: string;
+  cpu: number;
+  create_at: string;
+  disk: number;
+  ip: string;
+  machine_type: string;
+  mem: number;
+  node_count: number;
+  role: string;
+  status: number;
+  permission: Record<
+    | 'doris_access_entry_view'
+    | 'doris_destroy'
+    | 'doris_enable_disable'
+    | 'doris_reboot'
+    | 'doris_replace'
+    | 'doris_scale_up'
+    | 'doris_shrink'
+    | 'doris_view',
+    boolean
+  >;
+
+  constructor(payload = {} as DorisNode) {
+    this.bk_cloud_id = payload.bk_cloud_id;
+    this.bk_cloud_name = payload.bk_cloud_name;
+    this.bk_host_id = payload.bk_host_id;
+    this.bk_host_name = payload.bk_host_name;
+    this.cpu = payload.cpu || 0;
+    this.create_at = payload.create_at;
+    this.disk = payload.disk || 0;
+    this.ip = payload.ip;
+    this.machine_type = payload.machine_type;
+    this.mem = payload.mem || 0;
+    this.node_count = payload.node_count || 0;
+    this.role = payload.role;
+    this.status = payload.status || 0;
+    this.permission = payload.permission || {};
+  }
+
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
+
+  get createAtDisplay() {
+    return utcDisplayTime(this.create_at);
+  }
+
+  get isFollower() {
+    return this.role === DorisNode.ROLE_FOLLOWER;
+  }
+
+  get isObserver() {
+    return this.role === DorisNode.ROLE_OBSERVER;
+  }
+
+  get isHot() {
+    return this.role === DorisNode.ROLE_HOT;
+  }
+
+  get isCold() {
+    return this.role === DorisNode.ROLE_COLD;
+  }
+
+  get isAbnormal() {
+    return this.status === 0;
+  }
+
+  get memText() {
+    return bytePretty(this.mem * 1024 * 1024);
+  }
+
+  get roleLabel() {
+    return DorisNode.roleLabelMap[this.role];
+  }
+}
diff --git a/dbm-ui/frontend/src/services/model/doris/doris-password.ts b/dbm-ui/frontend/src/services/model/doris/doris-password.ts
new file mode 100644
index 000000000..0f9d6b1d0
--- /dev/null
+++ b/dbm-ui/frontend/src/services/model/doris/doris-password.ts
@@ -0,0 +1,26 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+export default class DorisPassword {
+  cluster_name: string;
+  domain: string;
+  username: string;
+  password: string;
+
+  constructor(payload = {} as DorisPassword) {
+    this.cluster_name = payload.cluster_name;
+    this.domain = payload.domain;
+    this.username = payload.username;
+    this.password = payload.password;
+  }
+}
diff --git a/dbm-ui/frontend/src/services/model/doris/doris.ts b/dbm-ui/frontend/src/services/model/doris/doris.ts
new file mode 100644
index 000000000..cea7786c6
--- /dev/null
+++ b/dbm-ui/frontend/src/services/model/doris/doris.ts
@@ -0,0 +1,263 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+import { TicketTypes } from '@common/const';
+
+import { isRecentDays, utcDisplayTime } from '@utils';
+
+import { t } from '@locales/index';
+
+// const STATUS_NORMAL = 'normal';
+const STATUS_ABNORMAL = 'abnormal';
+
+type Node = {
+  bk_biz_id: number;
+  bk_cloud_id: number;
+  bk_host_id: number;
+  bk_instance_id: number;
+  instance: string;
+  ip: string;
+  name: string;
+  phase: string;
+  port: number;
+  status: 'running' | 'unavailable';
+};
+
+export default class Doris {
+  static DORIS_ENABLE = TicketTypes.DORIS_ENABLE;
+  static DORIS_DISABLE = TicketTypes.DORIS_DISABLE;
+  static DORIS_DESTROY = TicketTypes.DORIS_DESTROY;
+  static DORIS_SCALE_UP = TicketTypes.DORIS_SCALE_UP;
+  static DORIS_SHRINK = TicketTypes.DORIS_SHRINK;
+  static DORIS_REPLACE = TicketTypes.DORIS_REPLACE;
+  static DORIS_REBOOT = TicketTypes.DORIS_REBOOT;
+
+  static operationIconMap = {
+    [Doris.DORIS_ENABLE]: t('启用中'),
+    [Doris.DORIS_DISABLE]: t('禁用中'),
+    [Doris.DORIS_DESTROY]: t('删除中'),
+    [Doris.DORIS_SCALE_UP]: t('扩容中'),
+    [Doris.DORIS_SHRINK]: t('缩容中'),
+    [Doris.DORIS_REPLACE]: t('替换中'),
+    [Doris.DORIS_REBOOT]: t('重启中'),
+  };
+
+  static operationTextMap = {
+    [Doris.DORIS_ENABLE]: t('启用任务进行中'),
+    [Doris.DORIS_DISABLE]: t('禁用任务进行中'),
+    [Doris.DORIS_DESTROY]: t('删除任务进行中'),
+    [Doris.DORIS_SCALE_UP]: t('扩容任务进行中'),
+    [Doris.DORIS_SHRINK]: t('缩容任务进行中'),
+    [Doris.DORIS_REPLACE]: t('替换任务进行中'),
+    [Doris.DORIS_REBOOT]: t('实例重启任务进行中'),
+  };
+
+  access_url: string;
+  bk_biz_id: number;
+  bk_biz_name: number;
+  bk_cloud_id: number;
+  bk_cloud_name: string;
+  // cap_usage: number;
+  cluster_access_port: number;
+  cluster_alias: string;
+  cluster_name: string;
+  cluster_time_zone: string;
+  cluster_type: string;
+  cluster_type_name: string;
+  // cluster_entry_details: {
+  //   cluster_entry_type: string;
+  //   entry: string;
+  //   role: string;
+  //   target_details: {
+  //     app: string;
+  //     bk_cloud_iduid: number;
+  //     dns_str: string;
+  //     domain_name: string;
+  //     domain_typeuid: number;
+  //     ip: string;
+  //     last_change_time: string;
+  //     manager: string;
+  //     port: number;
+  //     remark: string;
+  //     start_time: string;
+  //     status: string;
+  //     uid: number;
+  //   }[];
+  // }[];
+  create_at: string;
+  creator: string;
+  domain: string;
+  doris_backend_cold: Array<Node>;
+  doris_backend_hot: Array<Node>;
+  doris_follower: Array<Node>;
+  doris_observer: Array<Node>;
+  id: number;
+  major_version: string;
+  operations: Array<{
+    cluster_id: number;
+    flow_id: number;
+    status: string;
+    ticket_id: number;
+    ticket_type: string;
+    title: string;
+  }>;
+  permission: {
+    doris_access_entry_view: boolean;
+    doris_destroy: boolean;
+    doris_enable_disable: boolean;
+    doris_reboot: boolean;
+    doris_replace: boolean;
+    doris_scale_up: boolean;
+    doris_shrink: boolean;
+    doris_view: boolean;
+  };
+  phase: 'online' | 'offline';
+  phase_name: string;
+  region: string;
+  status: string;
+  update_at: string;
+  updater: string;
+
+  constructor(payload = {} as Doris) {
+    this.bk_biz_id = payload.bk_biz_id;
+    this.bk_biz_name = payload.bk_biz_name;
+    this.bk_cloud_id = payload.bk_cloud_id;
+    this.bk_cloud_name = payload.bk_cloud_name;
+    this.cluster_access_port = payload.cluster_access_port;
+    this.cluster_alias = payload.cluster_alias;
+    this.cluster_name = payload.cluster_name;
+    this.cluster_type = payload.cluster_type;
+    this.cluster_type_name = payload.cluster_type_name;
+    this.cluster_time_zone = payload.cluster_time_zone;
+    // this.cluster_entry_details = payload.cluster_entry_details;
+    this.create_at = payload.create_at;
+    this.creator = payload.creator;
+    this.domain = payload.domain;
+    this.doris_backend_cold = payload.doris_backend_cold;
+    this.doris_backend_hot = payload.doris_backend_hot;
+    this.doris_follower = payload.doris_follower;
+    this.doris_observer = payload.doris_observer;
+    this.id = payload.id;
+    this.major_version = payload.major_version;
+    this.permission = payload.permission || {};
+    this.phase = payload.phase;
+    this.phase_name = payload.phase_name;
+    this.region = payload.region;
+    this.status = payload.status;
+    this.update_at = payload.update_at;
+    this.updater = payload.updater;
+    this.access_url = payload.access_url;
+
+    this.operations = this.initOperations(payload.operations);
+  }
+
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
+
+  get runningOperation() {
+    const operateTicketTypes = Object.keys(Doris.operationTextMap);
+    return this.operations.find((item) => operateTicketTypes.includes(item.ticket_type) && item.status === 'RUNNING');
+  }
+
+  // 操作中的状态
+  get operationRunningStatus() {
+    if (this.operations.length < 1) {
+      return '';
+    }
+    const operation = this.runningOperation;
+    if (!operation) {
+      return '';
+    }
+    return operation.ticket_type;
+  }
+
+  // 操作中的状态描述文本
+  get operationStatusText() {
+    return Doris.operationTextMap[this.operationRunningStatus];
+  }
+
+  // 操作中的状态 icon
+  get operationStatusIcon() {
+    return Doris.operationIconMap[this.operationRunningStatus];
+  }
+
+  // 操作中的单据 ID
+  get operationTicketId() {
+    if (this.operations.length < 1) {
+      return 0;
+    }
+    const operation = this.runningOperation;
+    if (!operation) {
+      return 0;
+    }
+    return operation.ticket_id;
+  }
+
+  get operationDisabled() {
+    // 集群异常不支持操作
+    if (this.isAbnormal) {
+      return true;
+    }
+    // 被禁用的集群不支持操作
+    if (this.phase !== 'online') {
+      return true;
+    }
+    // 各个操作互斥，有其他任务进行中禁用操作按钮
+    if (this.operationRunningStatus) {
+      return true;
+    }
+    return false;
+  }
+
+  get isStarting() {
+    return Boolean(this.operations.find((item) => item.ticket_type === Doris.DORIS_ENABLE));
+  }
+
+  get isOnline() {
+    return this.phase === 'online';
+  }
+
+  get isOffline() {
+    return this.phase === 'offline';
+  }
+
+  get domainDisplayName() {
+    const port = this.doris_backend_hot[0]?.port;
+    const displayName = port ? `${this.domain}:${port}` : this.domain;
+    return displayName;
+  }
+
+  get createAtDisplay() {
+    return utcDisplayTime(this.create_at);
+  }
+
+  get operationTagTips() {
+    return this.operations.map((item) => ({
+      icon: Doris.operationIconMap[item.ticket_type],
+      tip: Doris.operationTextMap[item.ticket_type],
+      ticketId: item.ticket_id,
+    }));
+  }
+
+  get isAbnormal() {
+    return this.status === STATUS_ABNORMAL;
+  }
+
+  initOperations(payload = [] as Doris['operations']) {
+    if (!Array.isArray(payload)) {
+      return [];
+    }
+
+    return payload;
+  }
+}
diff --git a/dbm-ui/frontend/src/services/model/es/es-instance.ts b/dbm-ui/frontend/src/services/model/es/es-instance.ts
index 38c3953a5..78599607a 100644
--- a/dbm-ui/frontend/src/services/model/es/es-instance.ts
+++ b/dbm-ui/frontend/src/services/model/es/es-instance.ts
@@ -17,7 +17,7 @@ export default class EsInstance {
   static ES_REBOOT = 'ES_REBOOT';
 
   static operationIconMap = {
-    [EsInstance.ES_REBOOT]: 'zhongqizhong',
+    [EsInstance.ES_REBOOT]: t('重启中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/es/es.ts b/dbm-ui/frontend/src/services/model/es/es.ts
index 60943e2a9..b754fa7e3 100644
--- a/dbm-ui/frontend/src/services/model/es/es.ts
+++ b/dbm-ui/frontend/src/services/model/es/es.ts
@@ -40,13 +40,13 @@ export default class Es {
   static ES_REBOOT = 'ES_REBOOT';
 
   static operationIconMap = {
-    [Es.ES_SCALE_UP]: 'kuorongzhong',
-    [Es.ES_SHRINK]: 'suorongzhong',
-    [Es.ES_REPLACE]: 'tihuanzong',
-    [Es.ES_ENABLE]: 'qiyongzhong',
-    [Es.ES_DISABLE]: 'jinyongzhong',
-    [Es.ES_DESTROY]: 'shanchuzhong',
-    [Es.ES_REBOOT]: 'zhongqizhong',
+    [Es.ES_SCALE_UP]: t('扩容中'),
+    [Es.ES_SHRINK]: t('缩容中'),
+    [Es.ES_REPLACE]: t('替换中'),
+    [Es.ES_ENABLE]: t('启用中'),
+    [Es.ES_DISABLE]: t('禁用中'),
+    [Es.ES_DESTROY]: t('删除中'),
+    [Es.ES_REBOOT]: t('重启中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/function-controller/functionController.ts b/dbm-ui/frontend/src/services/model/function-controller/functionController.ts
index d91453194..f6ce69d15 100644
--- a/dbm-ui/frontend/src/services/model/function-controller/functionController.ts
+++ b/dbm-ui/frontend/src/services/model/function-controller/functionController.ts
@@ -23,7 +23,7 @@ export type RedisFunctions =
   | 'PredixyRedisCluster'
   | 'RedisInstance'
   | 'toolbox';
-export type BigdataFunctions = 'es' | 'kafka' | 'hdfs' | 'influxdb' | 'pulsar' | 'riak';
+export type BigdataFunctions = 'es' | 'kafka' | 'hdfs' | 'influxdb' | 'pulsar' | 'riak' | 'doris';
 export type MonitorFunctions = 'duty_rule' | 'monitor_policy' | 'notice_group';
 export type MongoFunctions = 'mongodb';
 export type SqlServerFunctions = 'sqlserverCluster' | 'sqlserver_single' | 'sqlserver_ha' | 'sqlserver_tool';
diff --git a/dbm-ui/frontend/src/services/model/hdfs/hdfs-instance.ts b/dbm-ui/frontend/src/services/model/hdfs/hdfs-instance.ts
index ba5e6f588..ac6e2b281 100644
--- a/dbm-ui/frontend/src/services/model/hdfs/hdfs-instance.ts
+++ b/dbm-ui/frontend/src/services/model/hdfs/hdfs-instance.ts
@@ -17,7 +17,7 @@ export default class HdfsInstance {
   static HDFS_REBOOT = 'HDFS_REBOOT';
 
   static operationIconMap = {
-    [HdfsInstance.HDFS_REBOOT]: 'zhongqizhong',
+    [HdfsInstance.HDFS_REBOOT]: t('重启中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/hdfs/hdfs.ts b/dbm-ui/frontend/src/services/model/hdfs/hdfs.ts
index 2e83fce14..9ea1e17f1 100644
--- a/dbm-ui/frontend/src/services/model/hdfs/hdfs.ts
+++ b/dbm-ui/frontend/src/services/model/hdfs/hdfs.ts
@@ -40,13 +40,13 @@ export default class Hdfs {
   static HDFS_REBOOT = 'HDFS_REBOOT';
 
   static operationIconMap = {
-    [Hdfs.HDFS_SCALE_UP]: 'kuorongzhong',
-    [Hdfs.HDFS_SHRINK]: 'suorongzhong',
-    [Hdfs.HDFS_REPLACE]: 'tihuanzong',
-    [Hdfs.HDFS_ENABLE]: 'qiyongzhong',
-    [Hdfs.HDFS_DISABLE]: 'jinyongzhong',
-    [Hdfs.HDFS_DESTROY]: 'shanchuzhong',
-    [Hdfs.HDFS_REBOOT]: 'zhongqizhong',
+    [Hdfs.HDFS_SCALE_UP]: t('扩容中'),
+    [Hdfs.HDFS_SHRINK]: t('缩容中'),
+    [Hdfs.HDFS_REPLACE]: t('替换中'),
+    [Hdfs.HDFS_ENABLE]: t('启用中'),
+    [Hdfs.HDFS_DISABLE]: t('禁用中'),
+    [Hdfs.HDFS_DESTROY]: t('删除中'),
+    [Hdfs.HDFS_REBOOT]: t('重启中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/influxdb/influxdbInstance.ts b/dbm-ui/frontend/src/services/model/influxdb/influxdbInstance.ts
index 5a7b1166e..249f75839 100644
--- a/dbm-ui/frontend/src/services/model/influxdb/influxdbInstance.ts
+++ b/dbm-ui/frontend/src/services/model/influxdb/influxdbInstance.ts
@@ -21,9 +21,9 @@ export default class InfluxDBInstance {
   static INFLUXDB_ENABLE = 'INFLUXDB_ENABLE';
 
   static operationIconMap = {
-    [InfluxDBInstance.INFLUXDB_REBOOT]: 'zhongqizhong',
-    [InfluxDBInstance.INFLUXDB_REPLACE]: 'tihuanzong',
-    [InfluxDBInstance.INFLUXDB_ENABLE]: 'qiyongzhong',
+    [InfluxDBInstance.INFLUXDB_REBOOT]: t('重启中'),
+    [InfluxDBInstance.INFLUXDB_REPLACE]: t('替换中'),
+    [InfluxDBInstance.INFLUXDB_ENABLE]: t('启用中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/kafka/kafka-instance.ts b/dbm-ui/frontend/src/services/model/kafka/kafka-instance.ts
index 3c8bcfa06..8c49b94eb 100644
--- a/dbm-ui/frontend/src/services/model/kafka/kafka-instance.ts
+++ b/dbm-ui/frontend/src/services/model/kafka/kafka-instance.ts
@@ -17,7 +17,7 @@ export default class KafkaInstance {
   static KAFKA_REBOOT = 'KAFKA_REBOOT';
 
   static operationIconMap = {
-    [KafkaInstance.KAFKA_REBOOT]: 'zhongqizhong',
+    [KafkaInstance.KAFKA_REBOOT]: t('重启中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/kafka/kafka.ts b/dbm-ui/frontend/src/services/model/kafka/kafka.ts
index 8846b9796..b7ddf7720 100644
--- a/dbm-ui/frontend/src/services/model/kafka/kafka.ts
+++ b/dbm-ui/frontend/src/services/model/kafka/kafka.ts
@@ -40,13 +40,13 @@ export default class Kafka {
   static KAFKA_REBOOT = 'KAFKA_REBOOT';
 
   static operationIconMap = {
-    [Kafka.KAFKA_SCALE_UP]: 'kuorongzhong',
-    [Kafka.KAFKA_SHRINK]: 'suorongzhong',
-    [Kafka.KAFKA_REPLACE]: 'tihuanzong',
-    [Kafka.KAFKA_ENABLE]: 'qiyongzhong',
-    [Kafka.KAFKA_DISABLE]: 'jinyongzhong',
-    [Kafka.KAFKA_DESTROY]: 'shanchuzhong',
-    [Kafka.KAFKA_REBOOT]: 'zhongqizhong',
+    [Kafka.KAFKA_SCALE_UP]: t('扩容中'),
+    [Kafka.KAFKA_SHRINK]: t('缩容中'),
+    [Kafka.KAFKA_REPLACE]: t('替换中'),
+    [Kafka.KAFKA_ENABLE]: t('启用中'),
+    [Kafka.KAFKA_DISABLE]: t('禁用中'),
+    [Kafka.KAFKA_DESTROY]: t('删除中'),
+    [Kafka.KAFKA_REBOOT]: t('重启中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb-detail.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb-detail.ts
index e3912558b..c77099be3 100644
--- a/dbm-ui/frontend/src/services/model/mongodb/mongodb-detail.ts
+++ b/dbm-ui/frontend/src/services/model/mongodb/mongodb-detail.ts
@@ -9,7 +9,7 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
  * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
  * the specific language governing permissions and limitations under the License.
-*/
+ */
 
 import { TicketTypes } from '@common/const';
 
@@ -29,36 +29,36 @@ interface MongoInstance {
   port: number;
   role?: string;
   spec_config: {
-    id: number,
+    id: number;
     cpu: {
-      max: number,
-      min: number
-    },
+      max: number;
+      min: number;
+    };
     mem: {
-      max: number,
-      min: number
-    },
+      max: number;
+      min: number;
+    };
     qps: {
-      max: number,
-      min: number
-    },
-    name: string,
-    count: number,
-    device_class: string[],
+      max: number;
+      min: number;
+    };
+    name: string;
+    count: number;
+    device_class: string[];
     storage_spec: {
-      size: number,
-      type: string,
-      mount_point: string
-    }[]
-  }
+      size: number;
+      type: string;
+      mount_point: string;
+    }[];
+  };
   status: string;
 }
 
 export default class MongodbDetail {
   static operationIconMap: Record<string, string> = {
-    [TicketTypes.MONGODB_ENABLE]: 'qiyongzhong',
-    [TicketTypes.MONGODB_DISABLE]: 'jinyongzhong',
-    [TicketTypes.MONGODB_DESTROY]: 'shanchuzhong',
+    [TicketTypes.MONGODB_ENABLE]: t('启用中'),
+    [TicketTypes.MONGODB_DISABLE]: t('禁用中'),
+    [TicketTypes.MONGODB_DESTROY]: t('删除中'),
   };
 
   static operationTextMap: Record<string, string> = {
@@ -78,19 +78,19 @@ export default class MongodbDetail {
     role: string;
     entry: string;
     target_details: {
-      app: string,
-      bk_cloud_iduid: number,
-      dns_str: string,
-      domain_name: string,
-      domain_typeuid: number,
-      ip: string,
-      last_change_time: string,
-      manager: string,
-      port: number,
-      remark: string,
-      start_time: string,
-      status: string,
-      uid: number,
+      app: string;
+      bk_cloud_iduid: number;
+      dns_str: string;
+      domain_name: string;
+      domain_typeuid: number;
+      ip: string;
+      last_change_time: string;
+      manager: string;
+      port: number;
+      remark: string;
+      start_time: string;
+      status: string;
+      uid: number;
     }[];
   }[];
   cluster_id: number;
@@ -110,36 +110,36 @@ export default class MongodbDetail {
     cluster_type: string;
     create_at: string;
     host_info?: {
-      alive: number,
+      alive: number;
       biz: {
-        id: number,
-        name: string
-      },
+        id: number;
+        name: string;
+      };
       cloud_area: {
-        id: number,
-        name: string
-      },
-      cloud_id: number,
-      host_id: number,
-      host_name?: string,
-      ip: string,
-      ipv6: string,
+        id: number;
+        name: string;
+      };
+      cloud_id: number;
+      host_id: number;
+      host_name?: string;
+      ip: string;
+      ipv6: string;
       meta: {
-        bk_biz_id: number,
-        scope_id: number,
-        scope_type: string
-      },
-      scope_id: string,
-      scope_type: string,
-      os_name: string,
-      bk_cpu?: number,
-      bk_disk?: number,
-      bk_mem?: number,
-      os_type: string,
-      agent_id: number,
-      cpu: string,
-      cloud_vendor: string,
-      bk_idc_name?: string,
+        bk_biz_id: number;
+        scope_id: number;
+        scope_type: string;
+      };
+      scope_id: string;
+      scope_type: string;
+      os_name: string;
+      bk_cpu?: number;
+      bk_disk?: number;
+      bk_mem?: number;
+      os_type: string;
+      agent_id: number;
+      cpu: string;
+      cloud_vendor: string;
+      bk_idc_name?: string;
     };
     instance_address: string;
     ip: string;
@@ -173,12 +173,12 @@ export default class MongodbDetail {
   mongos: MongoInstance[];
   mongo_config: MongoInstance[];
   operations: {
-    cluster_id: number,
-    flow_id: number,
-    status: string,
-    ticket_id: number,
-    ticket_type: string,
-    title: string,
+    cluster_id: number;
+    flow_id: number;
+    status: string;
+    ticket_id: number;
+    ticket_type: string;
+    title: string;
   }[];
   phase: string;
   phase_name: string;
@@ -191,22 +191,22 @@ export default class MongodbDetail {
     cpu: {
       max: number;
       min: number;
-    },
+    };
     id: number;
     mem: {
       max: number;
       min: number;
-    },
+    };
     name: string;
     qps: {
       max: number;
       min: number;
-    },
+    };
     storage_spec: {
       mount_point: string;
       size: number;
       type: string;
-    }[],
+    }[];
   };
   status: string;
 
@@ -252,12 +252,12 @@ export default class MongodbDetail {
   }
 
   get isStarting() {
-    return Boolean(this.operations.find(item => item.ticket_type === TicketTypes.MONGODB_ENABLE));
+    return Boolean(this.operations.find((item) => item.ticket_type === TicketTypes.MONGODB_ENABLE));
   }
 
   get runningOperation() {
     const operateTicketTypes = Object.keys(MongodbDetail.operationTextMap);
-    return this.operations.find(item => operateTicketTypes.includes(item.ticket_type) && item.status === 'RUNNING');
+    return this.operations.find((item) => operateTicketTypes.includes(item.ticket_type) && item.status === 'RUNNING');
   }
 
   // 操作中的状态
@@ -318,10 +318,9 @@ export default class MongodbDetail {
   }
 
   get isOfflineOperationRunning() {
-    return ([
-      TicketTypes.MONGODB_ENABLE,
-      TicketTypes.MONGODB_DESTROY,
-    ] as string[]).includes(this.operationRunningStatus);
+    return ([TicketTypes.MONGODB_ENABLE, TicketTypes.MONGODB_DESTROY] as string[]).includes(
+      this.operationRunningStatus,
+    );
   }
 
   get isDisabled() {
@@ -329,7 +328,7 @@ export default class MongodbDetail {
   }
 
   get operationTagTips() {
-    return this.operations.map(item => ({
+    return this.operations.map((item) => ({
       icon: MongodbDetail.operationIconMap[item.ticket_type],
       tip: MongodbDetail.operationTextMap[item.ticket_type],
       ticketId: item.ticket_id,
diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts
index 820aac05f..32960ce2c 100644
--- a/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts
+++ b/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts
@@ -11,10 +11,10 @@ export default class MongodbInstance {
   static MONGODB_DESTROY = 'MONGODB_DESTROY';
 
   static operationIconMap = {
-    [MongodbInstance.MONGODB_DISABLE]: 'jinyongzhong',
-    [MongodbInstance.MONGODB_INSTANCE_RELOAD]: 'zhongqizhong',
-    [MongodbInstance.MONGODB_ENABLE]: 'qiyongzhong',
-    [MongodbInstance.MONGODB_DESTROY]: 'shanchuzhong',
+    [MongodbInstance.MONGODB_DISABLE]: t('禁用中'),
+    [MongodbInstance.MONGODB_INSTANCE_RELOAD]: t('重启中'),
+    [MongodbInstance.MONGODB_ENABLE]: t('启用中'),
+    [MongodbInstance.MONGODB_DESTROY]: t('删除中'),
   };
 
   static operationTextMap = {
@@ -226,6 +226,14 @@ export default class MongodbInstance {
     return false;
   }
 
+  get operationTagTips() {
+    return this.operations.map((item) => ({
+      icon: MongodbInstance.operationIconMap[item.ticket_type],
+      tip: MongodbInstance.operationTextMap[item.ticket_type],
+      ticketId: item.ticket_id,
+    }));
+  }
+
   get createAtDisplay() {
     return utcDisplayTime(this.create_at);
   }
diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb.ts
index 94ec91aa7..597e93756 100644
--- a/dbm-ui/frontend/src/services/model/mongodb/mongodb.ts
+++ b/dbm-ui/frontend/src/services/model/mongodb/mongodb.ts
@@ -63,9 +63,9 @@ export default class Mongodb {
   static MongoReplicaSet = 'MongoReplicaSet'; // 副本集集群
 
   static operationIconMap: Record<string, string> = {
-    [TicketTypes.MONGODB_ENABLE]: 'qiyongzhong',
-    [TicketTypes.MONGODB_DISABLE]: 'jinyongzhong',
-    [TicketTypes.MONGODB_DESTROY]: 'shanchuzhong',
+    [TicketTypes.MONGODB_ENABLE]: t('启用中'),
+    [TicketTypes.MONGODB_DISABLE]: t('禁用中'),
+    [TicketTypes.MONGODB_DESTROY]: t('删除中'),
   };
 
   static operationTextMap: Record<string, string> = {
diff --git a/dbm-ui/frontend/src/services/model/mysql/tendbha.ts b/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
index 07b5fb3e8..477601360 100644
--- a/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
+++ b/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
@@ -23,12 +23,12 @@ export default class Tendbha {
   static MYSQL_SINGLE_ENABLE = 'MYSQL_SINGLE_ENABLE';
 
   static operationIconMap = {
-    [Tendbha.MYSQL_HA_ENABLE]: 'qiyongzhong',
-    [Tendbha.MYSQL_HA_DISABLE]: 'jinyongzhong',
-    [Tendbha.MYSQL_HA_DESTROY]: 'shanchuzhong',
-    [Tendbha.MYSQL_SINGLE_ENABLE]: 'qiyongzhong',
-    [Tendbha.MYSQL_SINGLE_DISABLE]: 'jinyongzhong',
-    [Tendbha.MYSQL_SINGLE_DESTROY]: 'shanchuzhong',
+    [Tendbha.MYSQL_HA_ENABLE]: t('启用中'),
+    [Tendbha.MYSQL_HA_DISABLE]: t('禁用中'),
+    [Tendbha.MYSQL_HA_DESTROY]: t('删除中'),
+    [Tendbha.MYSQL_SINGLE_ENABLE]: t('启用中'),
+    [Tendbha.MYSQL_SINGLE_DISABLE]: t('禁用中'),
+    [Tendbha.MYSQL_SINGLE_DESTROY]: t('删除中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/mysql/tendbsingle.ts b/dbm-ui/frontend/src/services/model/mysql/tendbsingle.ts
index 527c7708e..556c4a276 100644
--- a/dbm-ui/frontend/src/services/model/mysql/tendbsingle.ts
+++ b/dbm-ui/frontend/src/services/model/mysql/tendbsingle.ts
@@ -23,12 +23,12 @@ export default class Tendbsingle {
   static MYSQL_SINGLE_ENABLE = 'MYSQL_SINGLE_ENABLE';
 
   static operationIconMap = {
-    [Tendbsingle.MYSQL_HA_ENABLE]: 'qiyongzhong',
-    [Tendbsingle.MYSQL_HA_DISABLE]: 'jinyongzhong',
-    [Tendbsingle.MYSQL_HA_DESTROY]: 'shanchuzhong',
-    [Tendbsingle.MYSQL_SINGLE_ENABLE]: 'qiyongzhong',
-    [Tendbsingle.MYSQL_SINGLE_DISABLE]: 'jinyongzhong',
-    [Tendbsingle.MYSQL_SINGLE_DESTROY]: 'shanchuzhong',
+    [Tendbsingle.MYSQL_HA_ENABLE]: t('启用中'),
+    [Tendbsingle.MYSQL_HA_DISABLE]: t('禁用中'),
+    [Tendbsingle.MYSQL_HA_DESTROY]: t('删除中'),
+    [Tendbsingle.MYSQL_SINGLE_ENABLE]: t('启用中'),
+    [Tendbsingle.MYSQL_SINGLE_DISABLE]: t('禁用中'),
+    [Tendbsingle.MYSQL_SINGLE_DESTROY]: t('删除中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/pulsar/pulsar-instance.ts b/dbm-ui/frontend/src/services/model/pulsar/pulsar-instance.ts
index 981a2ed9f..1893066a0 100644
--- a/dbm-ui/frontend/src/services/model/pulsar/pulsar-instance.ts
+++ b/dbm-ui/frontend/src/services/model/pulsar/pulsar-instance.ts
@@ -17,7 +17,7 @@ export default class PulsarInstance {
   static PULSAR_REBOOT = 'PULSAR_REBOOT';
 
   static operationIconMap = {
-    [PulsarInstance.PULSAR_REBOOT]: 'zhongqizhong',
+    [PulsarInstance.PULSAR_REBOOT]: t('重启中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/pulsar/pulsar.ts b/dbm-ui/frontend/src/services/model/pulsar/pulsar.ts
index 612c78aa5..bcb1c5e15 100644
--- a/dbm-ui/frontend/src/services/model/pulsar/pulsar.ts
+++ b/dbm-ui/frontend/src/services/model/pulsar/pulsar.ts
@@ -40,13 +40,13 @@ export default class Pulsar {
   static PULSAR_REBOOT = 'PULSAR_REBOOT';
 
   static operationIconMap = {
-    [Pulsar.PULSAR_SCALE_UP]: 'kuorongzhong',
-    [Pulsar.PULSAR_SHRINK]: 'suorongzhong',
-    [Pulsar.PULSAR_REPLACE]: 'tihuanzong',
-    [Pulsar.PULSAR_ENABLE]: 'qiyongzhong',
-    [Pulsar.PULSAR_DISABLE]: 'jinyongzhong',
-    [Pulsar.PULSAR_DESTROY]: 'shanchuzhong',
-    [Pulsar.PULSAR_REBOOT]: 'zhongqizhong',
+    [Pulsar.PULSAR_SCALE_UP]: t('扩容中'),
+    [Pulsar.PULSAR_SHRINK]: t('缩容中'),
+    [Pulsar.PULSAR_REPLACE]: t('替换中'),
+    [Pulsar.PULSAR_ENABLE]: t('启用中'),
+    [Pulsar.PULSAR_DISABLE]: t('禁用中'),
+    [Pulsar.PULSAR_DESTROY]: t('删除中'),
+    [Pulsar.PULSAR_REBOOT]: t('重启中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/redis/redis.ts b/dbm-ui/frontend/src/services/model/redis/redis.ts
index 912aa925f..cb4caac7b 100644
--- a/dbm-ui/frontend/src/services/model/redis/redis.ts
+++ b/dbm-ui/frontend/src/services/model/redis/redis.ts
@@ -65,12 +65,12 @@ export default class Redis {
   static REDIS_INSTANCE_PROXY_OPEN = 'REDIS_INSTANCE_PROXY_OPEN';
 
   static operationIconMap = {
-    [Redis.REDIS_PROXY_OPEN]: 'qiyongzhong',
-    [Redis.REDIS_PROXY_CLOSE]: 'jinyongzhong',
-    [Redis.REDIS_DESTROY]: 'shanchuzhong',
-    [Redis.REDIS_INSTANCE_PROXY_OPEN]: 'qiyongzhong',
-    [Redis.REDIS_INSTANCE_PROXY_CLOSE]: 'jinyongzhong',
-    [Redis.REDIS_INSTANCE_DESTROY]: 'shanchuzhong',
+    [Redis.REDIS_PROXY_OPEN]: t('启用中'),
+    [Redis.REDIS_PROXY_CLOSE]: t('禁用中'),
+    [Redis.REDIS_DESTROY]: t('删除中'),
+    [Redis.REDIS_INSTANCE_PROXY_OPEN]: t('启用中'),
+    [Redis.REDIS_INSTANCE_PROXY_CLOSE]: t('禁用中'),
+    [Redis.REDIS_INSTANCE_DESTROY]: t('删除中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/riak/riak-node.ts b/dbm-ui/frontend/src/services/model/riak/riak-node.ts
index 29236b94c..4385ebc52 100644
--- a/dbm-ui/frontend/src/services/model/riak/riak-node.ts
+++ b/dbm-ui/frontend/src/services/model/riak/riak-node.ts
@@ -24,8 +24,8 @@ export default class RiakNode {
   static REBOOTING = 'REBOOTING';
 
   static labelMap: Record<string, string> = {
-    [RiakNode.DELETING]: 'shanchuzhong',
-    [RiakNode.REBOOTING]: 'zhongqizhong',
+    [RiakNode.DELETING]: t('删除中'),
+    [RiakNode.REBOOTING]: t('重启中'),
   };
 
   static keyPathMap: Record<string, string> = {
diff --git a/dbm-ui/frontend/src/services/model/riak/riak.ts b/dbm-ui/frontend/src/services/model/riak/riak.ts
index d2c6f29e6..61227192c 100644
--- a/dbm-ui/frontend/src/services/model/riak/riak.ts
+++ b/dbm-ui/frontend/src/services/model/riak/riak.ts
@@ -25,12 +25,12 @@ export default class Riak {
   static RIAK_CLUSTER_REBOOT = 'RIAK_CLUSTER_REBOOT';
 
   static operationIconMap: Record<string, string> = {
-    [Riak.RIAK_CLUSTER_SCALE_OUT]: 'kuorongzhong',
-    [Riak.RIAK_CLUSTER_SCALE_IN]: 'suorongzhong',
-    [Riak.RIAK_CLUSTER_ENABLE]: 'qiyongzhong',
-    [Riak.RIAK_CLUSTER_DISABLE]: 'jinyongzhong',
-    [Riak.RIAK_CLUSTER_DESTROY]: 'shanchuzhong',
-    [Riak.RIAK_CLUSTER_REBOOT]: 'zhongqizhong',
+    [Riak.RIAK_CLUSTER_SCALE_OUT]: t('扩容中'),
+    [Riak.RIAK_CLUSTER_SCALE_IN]: t('缩容中'),
+    [Riak.RIAK_CLUSTER_ENABLE]: t('启用中'),
+    [Riak.RIAK_CLUSTER_DISABLE]: t('禁用中'),
+    [Riak.RIAK_CLUSTER_DESTROY]: t('删除中'),
+    [Riak.RIAK_CLUSTER_REBOOT]: t('重启中'),
   };
 
   static operationTextMap: Record<string, string> = {
diff --git a/dbm-ui/frontend/src/services/model/spider/tendbCluster.ts b/dbm-ui/frontend/src/services/model/spider/tendbCluster.ts
index 075c07417..f54d34daa 100644
--- a/dbm-ui/frontend/src/services/model/spider/tendbCluster.ts
+++ b/dbm-ui/frontend/src/services/model/spider/tendbCluster.ts
@@ -66,11 +66,11 @@ export default class TendbCluster {
   static TENDBCLUSTER_CHECKSUM = 'TENDBCLUSTER_CHECKSUM';
 
   static operationIconMap = {
-    [TendbCluster.TENDBCLUSTER_SPIDER_ADD_NODES]: 'kuorongzhong',
-    [TendbCluster.TENDBCLUSTER_SPIDER_REDUCE_NODES]: 'suorongzhong',
-    [TendbCluster.TENDBCLUSTER_ENABLE]: 'qiyongzhong',
-    [TendbCluster.TENDBCLUSTER_DISABLE]: 'jinyongzhong',
-    [TendbCluster.TENDBCLUSTER_DESTROY]: 'shanchuzhong',
+    [TendbCluster.TENDBCLUSTER_SPIDER_ADD_NODES]: t('扩容中'),
+    [TendbCluster.TENDBCLUSTER_SPIDER_REDUCE_NODES]: t('缩容中'),
+    [TendbCluster.TENDBCLUSTER_ENABLE]: t('启用中'),
+    [TendbCluster.TENDBCLUSTER_DISABLE]: t('禁用中'),
+    [TendbCluster.TENDBCLUSTER_DESTROY]: t('删除中'),
   };
 
   static operationTextMap = {
diff --git a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-cluster.ts b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-cluster.ts
index b33329952..e8f6a992b 100644
--- a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-cluster.ts
+++ b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-cluster.ts
@@ -22,9 +22,9 @@ export default class SqlServerHaCluster extends TimeBaseClassModel {
   static SQLSERVER_DISABLE = 'SQLSERVER_DISABLE';
   static SQLSERVER_ENABLE = 'SQLSERVER_ENABLE';
   static operationIconMap = {
-    [SqlServerHaCluster.SQLSERVER_ENABLE]: 'qiyongzhong',
-    [SqlServerHaCluster.SQLSERVER_DISABLE]: 'jinyongzhong',
-    [SqlServerHaCluster.SQLSERVER_DESTROY]: 'shanchuzhong',
+    [SqlServerHaCluster.SQLSERVER_ENABLE]: t('启用中'),
+    [SqlServerHaCluster.SQLSERVER_DISABLE]: t('禁用中'),
+    [SqlServerHaCluster.SQLSERVER_DESTROY]: t('删除中'),
   };
   static operationTextMap = {
     [SqlServerHaCluster.SQLSERVER_DESTROY]: t('删除任务执行中'),
@@ -43,12 +43,14 @@ export default class SqlServerHaCluster extends TimeBaseClassModel {
   bk_biz_name: string;
   bk_cloud_id: number;
   bk_cloud_name: string;
+  cluster_access_port: number;
   cluster_alias: string;
   cluster_name: string;
   cluster_time_zone: string;
   cluster_stats: Record<'used' | 'total' | 'in_use', number>;
   cluster_type: string;
   cluster_type_name: string;
+  create_at: string;
   creator: string;
   db_module_id: number;
   db_module_name: string;
@@ -95,12 +97,14 @@ export default class SqlServerHaCluster extends TimeBaseClassModel {
     this.bk_biz_name = payload.bk_biz_name;
     this.bk_cloud_id = payload.bk_cloud_id;
     this.bk_cloud_name = payload.bk_cloud_name;
+    this.cluster_access_port = payload.cluster_access_port;
     this.cluster_alias = payload.cluster_alias;
     this.cluster_name = payload.cluster_name;
     this.cluster_time_zone = payload.cluster_time_zone;
     this.cluster_stats = payload.cluster_stats || {};
     this.cluster_type = payload.cluster_type;
     this.cluster_type_name = payload.cluster_type_name;
+    this.create_at = payload.create_at;
     this.creator = payload.creator;
     this.db_module_id = payload.db_module_id;
     this.db_module_name = payload.db_module_name;
diff --git a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-instance.ts b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-instance.ts
index d867b8e7c..87d7e2a63 100644
--- a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-instance.ts
+++ b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-ha-instance.ts
@@ -30,6 +30,7 @@ export default class SqlServerHaInstance {
   id: number;
   instance_address: string;
   ip: string;
+  machine_type: string;
   master_domain: string;
   permission: {
     sqlserver_view: boolean;
@@ -56,6 +57,26 @@ export default class SqlServerHaInstance {
   slave_domain: string;
   spec_config: {
     id: number;
+    cpu: {
+      max: number;
+      min: number;
+    };
+    mem: {
+      max: number;
+      min: number;
+    };
+    qps: {
+      max: number;
+      min: number;
+    };
+    name: string;
+    count: number;
+    device_class: string[];
+    storage_spec: {
+      size: number;
+      type: string;
+      mount_point: string;
+    }[];
   };
   status: ClusterInstStatusKeys;
   version: string;
@@ -73,6 +94,7 @@ export default class SqlServerHaInstance {
     this.id = payload.id;
     this.instance_address = payload.instance_address;
     this.ip = payload.ip;
+    this.machine_type = payload.machine_type;
     this.master_domain = payload.master_domain;
     this.permission = payload.permission;
     this.port = payload.port;
diff --git a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-single-cluster.ts b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-single-cluster.ts
index 7e1f7f683..1bfc38daa 100644
--- a/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-single-cluster.ts
+++ b/dbm-ui/frontend/src/services/model/sqlserver/sqlserver-single-cluster.ts
@@ -22,9 +22,9 @@ export default class SqlServerSingleCluster extends TimeBaseClassModel {
   static SQLSERVER_DISABLE = 'SQLSERVER_DISABLE';
   static SQLSERVER_ENABLE = 'SQLSERVER_ENABLE';
   static operationIconMap = {
-    [SqlServerSingleCluster.SQLSERVER_ENABLE]: 'qiyongzhong',
-    [SqlServerSingleCluster.SQLSERVER_DISABLE]: 'jinyongzhong',
-    [SqlServerSingleCluster.SQLSERVER_DESTROY]: 'shanchuzhong',
+    [SqlServerSingleCluster.SQLSERVER_ENABLE]: t('启用中'),
+    [SqlServerSingleCluster.SQLSERVER_DISABLE]: t('禁用中'),
+    [SqlServerSingleCluster.SQLSERVER_DESTROY]: t('删除中'),
   };
   static operationTextMap = {
     [SqlServerSingleCluster.SQLSERVER_DESTROY]: t('删除任务执行中'),
@@ -50,6 +50,7 @@ export default class SqlServerSingleCluster extends TimeBaseClassModel {
   cluster_stats: Record<'used' | 'total' | 'in_use', number>;
   cluster_type: string;
   cluster_type_name: string;
+  create_at: string;
   creator: string;
   db_module_id: number;
   db_module_name: string;
@@ -119,6 +120,7 @@ export default class SqlServerSingleCluster extends TimeBaseClassModel {
     this.cluster_stats = payload.cluster_stats || {};
     this.cluster_type = payload.cluster_type;
     this.cluster_type_name = payload.cluster_type_name;
+    this.create_at = payload.create_at;
     this.creator = payload.creator;
     this.db_module_id = payload.db_module_id;
     this.db_module_name = payload.db_module_name;
diff --git a/dbm-ui/frontend/src/services/source/doris.ts b/dbm-ui/frontend/src/services/source/doris.ts
new file mode 100644
index 000000000..b804e8d0d
--- /dev/null
+++ b/dbm-ui/frontend/src/services/source/doris.ts
@@ -0,0 +1,143 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import DorisModel from '@services/model/doris/doris';
+import DorisInstanceModel from '@services/model/doris/doris-instance';
+import DorisNodeModel from '@services/model/doris/doris-node';
+import DorisPasswordModel from '@services/model/doris/doris-password';
+
+import http from '../http';
+import type { ListBase } from '../types';
+
+const getRootPath = () => `/apis/bigdata/bizs/${window.PROJECT_CONFIG.BIZ_ID}/doris/doris_resources`;
+
+/**
+ * 获取集群列表
+ */
+export function getDorisList(params: {
+  limit?: number;
+  offset?: number;
+  id?: number;
+  name?: string;
+  ip?: string;
+  domain?: string;
+  creator?: string;
+}) {
+  return http.get<ListBase<DorisModel[]>>(`${getRootPath()}/`, params).then((data) => ({
+    ...data,
+    results: data.results.map(
+      (item) =>
+        new DorisModel(
+          Object.assign(item, {
+            permission: Object.assign({}, item.permission, data.permission),
+          }),
+        ),
+    ),
+  }));
+}
+
+/**
+ * 获取查询返回字段
+ */
+export function getDorisTableFields() {
+  return http.get<ListBase<DorisModel[]>>(`${getRootPath()}/get_table_fields/`);
+}
+
+/**
+ * 获取实例列表
+ */
+export function getDorisInstanceList(params: {
+  bk_biz_id: number;
+  limit?: number;
+  offset?: number;
+  cluster_id?: number;
+  ip?: string;
+  port?: string;
+  role?: string;
+  instance_address?: string;
+}) {
+  return http.get<ListBase<DorisInstanceModel[]>>(`${getRootPath()}/list_instances/`, params).then((data) => ({
+    ...data,
+    results: data.results.map((item: DorisInstanceModel) => new DorisInstanceModel(item)),
+  }));
+}
+
+/**
+ * 获取实例详情
+ */
+export function retrieveDorisInstance(params: { bk_biz_id: number }) {
+  return http.get<ListBase<DorisModel[]>>(`${getRootPath()}/retrieve_instance/`, params);
+}
+
+/**
+ * 获取集群详情
+ */
+export function getDorisDetail(params: { id: number }) {
+  return http.get<DorisModel>(`${getRootPath()}/${params.id}/`).then((data) => new DorisModel(data));
+}
+
+/**
+ * 获取集群节点
+ */
+export function getDorisNodes(params: { cluster_id: number }) {
+  return http.get<ListBase<DorisModel[]>>(`${getRootPath()}/${params.cluster_id}/get_nodes/`);
+}
+
+/**
+ * 获取集群拓扑
+ */
+export function getDorisTopoGraph(params: { cluster_id: number }) {
+  return http.get<ListBase<DorisModel[]>>(`${getRootPath()}/${params.cluster_id}/get_topo_graph/`);
+}
+
+/**
+ * 获取 Doris 集群访问密码
+ */
+export function getDorisPassword(params: { cluster_id: number }) {
+  return http
+    .get<DorisPasswordModel>(`${getRootPath()}/${params.cluster_id}/get_password/`)
+    .then((data) => new DorisPasswordModel(data));
+}
+
+/**
+ * 获取 Doris 集群节点列表信息
+ */
+export function getDorisNodeList(params: { bk_biz_id: number; cluster_id: number; no_limit: number }) {
+  return http
+    .get<ListBase<Array<DorisNodeModel>>>(`${getRootPath()}/${params.cluster_id}/list_nodes/`, params)
+    .then((data) => ({
+      ...data,
+      results: data.results.map(
+        (item) =>
+          new DorisNodeModel(
+            Object.assign(item, {
+              permission: data.permission,
+            }),
+          ),
+      ),
+    }));
+}
+
+/**
+ * 导出集群数据为 excel 文件
+ */
+export function exportDorisClusterToExcel(params: { cluster_ids?: number[] }) {
+  return http.post<string>(`${getRootPath()}/export_cluster/`, params, { responseType: 'blob' });
+}
+
+/**
+ * 导出实例数据为 excel 文件
+ */
+export function exportDorisInstanceToExcel(params: { bk_host_ids?: number[] }) {
+  return http.post<string>(`${getRootPath()}/export_instance/`, params, { responseType: 'blob' });
+}
diff --git a/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useTreeData.ts b/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useTreeData.ts
index 07277119c..9aafd3758 100644
--- a/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useTreeData.ts
+++ b/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useTreeData.ts
@@ -192,6 +192,7 @@ export const useTreeData = (treeState: TreeState) => {
           ClusterTypes.INFLUXDB,
           ClusterTypes.PULSAE,
           ClusterTypes.RIAK,
+          ClusterTypes.DORIS,
         ].includes(value);
         fetchBusinessTopoTree(isBigdata ? 'bigdata' : dbType);
       }
diff --git a/dbm-ui/frontend/src/views/db-configure/common/const.ts b/dbm-ui/frontend/src/views/db-configure/common/const.ts
index 2815abc5a..88049c4ec 100644
--- a/dbm-ui/frontend/src/views/db-configure/common/const.ts
+++ b/dbm-ui/frontend/src/views/db-configure/common/const.ts
@@ -94,4 +94,11 @@ export const extraClusterConfs: ExtraClusterConf = {
 /**
  * 交互上没有模块级别配置的集群
  */
-export const notModuleClusters = [DBTypes.REDIS, DBTypes.ES, DBTypes.KAFKA, DBTypes.HDFS, DBTypes.MONGODB];
+export const notModuleClusters = [
+  DBTypes.REDIS,
+  DBTypes.ES,
+  DBTypes.KAFKA,
+  DBTypes.HDFS,
+  DBTypes.MONGODB,
+  DBTypes.DORIS,
+];
diff --git a/dbm-ui/frontend/src/views/doris-manage/Index.vue b/dbm-ui/frontend/src/views/doris-manage/Index.vue
new file mode 100644
index 000000000..06335862c
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/Index.vue
@@ -0,0 +1,16 @@
+<!--
+ * 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>
+  <RouterView />
+</template>
diff --git a/dbm-ui/frontend/src/views/doris-manage/apply/Index.vue b/dbm-ui/frontend/src/views/doris-manage/apply/Index.vue
new file mode 100644
index 000000000..ae2973dfe
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/apply/Index.vue
@@ -0,0 +1,862 @@
+<!--
+ * 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>
+  <SmartAction
+    class="apply-doris-page"
+    :offset-target="getSmartActionOffsetTarget">
+    <DbForm
+      ref="formRef"
+      auto-label-width
+      class="mb-16"
+      :model="formData"
+      :rules="rules">
+      <DbCard :title="t('业务信息')">
+        <BusinessItems
+          v-model:app-abbr="formData.details.db_app_abbr"
+          v-model:biz-id="formData.bk_biz_id"
+          perrmision-action-id="doris_apply"
+          @change-biz="handleChangeBiz" />
+        <ClusterName v-model="formData.details.cluster_name" />
+        <ClusterAlias
+          v-model="formData.details.cluster_alias"
+          :biz-id="formData.bk_biz_id"
+          cluster-type="doris" />
+        <CloudItem
+          v-model="formData.details.bk_cloud_id"
+          @change="handleChangeCloud" />
+      </DbCard>
+      <RegionItem
+        ref="regionItemRef"
+        v-model="formData.details.city_code" />
+      <DbCard :title="t('部署需求')">
+        <AffinityItem v-model="formData.details.disaster_tolerance_level" />
+        <BkFormItem
+          :label="t('Doris版本')"
+          property="details.db_version"
+          required>
+          <DeployVersion
+            v-model="formData.details.db_version"
+            db-type="doris"
+            query-key="doris" />
+        </BkFormItem>
+        <BkFormItem
+          :label="t('服务器选择')"
+          property="details.ip_source"
+          required>
+          <BkRadioGroup v-model="formData.details.ip_source">
+            <BkRadioButton label="resource_pool">
+              {{ t('自动从资源池匹配') }}
+            </BkRadioButton>
+            <BkRadioButton label="manual_input">
+              {{ t('业务空闲机') }}
+            </BkRadioButton>
+          </BkRadioGroup>
+        </BkFormItem>
+        <Transition
+          mode="out-in"
+          name="dbm-fade">
+          <div
+            v-if="formData.details.ip_source === 'manual_input'"
+            class="mb-24">
+            <DbFormItem
+              :label="t('Follower节点')"
+              property="details.nodes.follower"
+              required>
+              <div>
+                <IpSelector
+                  :biz-id="formData.bk_biz_id"
+                  :cloud-info="cloudInfo"
+                  :data="formData.details.nodes.follower"
+                  :disable-dialog-submit-method="followerDisableDialogSubmitMethod"
+                  :disable-host-method="(data: HostDetails) => disableHostMethod(data, ['observer', 'hot', 'cold'])"
+                  required
+                  :show-view="false"
+                  style="display: inline-block"
+                  @change="(data: HostDetails[]) => handleIpListChange(data, 'follower')">
+                  <template #submitTips="{ hostList }">
+                    <IpSelectorSubmitTips
+                      keypath="需n台_已选n台"
+                      :values="[3, hostList.length]" />
+                  </template>
+                  <template #desc>
+                    {{ t('需n台', { n: 3 }) }}
+                  </template>
+                </IpSelector>
+              </div>
+              <RenderHostTable
+                v-model:data="formData.details.nodes.follower"
+                :biz-id="formData.bk_biz_id" />
+            </DbFormItem>
+            <DbFormItem
+              :label="t('Observer节点')"
+              property="details.nodes.observer">
+              <IpSelector
+                :biz-id="formData.bk_biz_id"
+                :cloud-info="cloudInfo"
+                :data="formData.details.nodes.observer"
+                :disable-dialog-submit-method="optionalNodeDisableDialogSubmitMethod"
+                :disable-host-method="(data: HostDetails) => disableHostMethod(data, ['follower', 'hot', 'cold'])"
+                :show-view="false"
+                @change="(data: HostDetails[]) => handleIpListChange(data, 'observer')">
+                <template #submitTips="{ hostList }">
+                  <IpSelectorSubmitTips
+                    keypath="若选择至少需要n台，已选m台"
+                    :values="[2, hostList.length]" />
+                </template>
+                <template #desc>
+                  {{ t('若选择至少需要n台', [2]) }}
+                </template>
+              </IpSelector>
+              <RenderHostTable
+                v-model:data="formData.details.nodes.observer"
+                :biz-id="formData.bk_biz_id" />
+            </DbFormItem>
+            <BkFormItem label=" ">
+              <BkAlert
+                style="width: 655px"
+                :theme="tipTheme"
+                :title="t('请保证冷/热节点至少存在一种')" />
+            </BkFormItem>
+            <DbFormItem
+              :label="t('热节点')"
+              property="details.nodes.hot">
+              <IpSelector
+                :biz-id="formData.bk_biz_id"
+                :cloud-info="cloudInfo"
+                :data="formData.details.nodes.hot"
+                :disable-dialog-submit-method="optionalNodeDisableDialogSubmitMethod"
+                :disable-host-method="(data: HostDetails) => disableHostMethod(data, ['observer', 'follower', 'cold'])"
+                :show-view="false"
+                @change="(data: HostDetails[]) => handleIpListChange(data, 'hot')">
+                <template #submitTips="{ hostList }">
+                  <IpSelectorSubmitTips
+                    keypath="若选择至少需要n台，已选m台"
+                    :values="[2, hostList.length]" />
+                </template>
+                <template #desc>
+                  {{ t('若选择至少需要n台', [2]) }}
+                </template>
+              </IpSelector>
+              <RenderHostTable
+                v-model:data="formData.details.nodes.hot"
+                :biz-id="formData.bk_biz_id" />
+            </DbFormItem>
+            <DbFormItem
+              :label="t('冷节点')"
+              property="details.nodes.cold">
+              <IpSelector
+                :biz-id="formData.bk_biz_id"
+                :cloud-info="cloudInfo"
+                :data="formData.details.nodes.cold"
+                :disable-dialog-submit-method="optionalNodeDisableDialogSubmitMethod"
+                :disable-host-method="(data: HostDetails) => disableHostMethod(data, ['follower', 'observer', 'hot'])"
+                :show-view="false"
+                @change="(data: HostDetails[]) => handleIpListChange(data, 'cold')">
+                <template #submitTips="{ hostList }">
+                  <IpSelectorSubmitTips
+                    keypath="若选择至少需要n台，已选m台"
+                    :values="[2, hostList.length]" />
+                </template>
+                <template #desc>
+                  {{ t('若选择至少需要n台', [2]) }}
+                </template>
+              </IpSelector>
+              <RenderHostTable
+                v-model:data="formData.details.nodes.cold"
+                :biz-id="formData.bk_biz_id" />
+            </DbFormItem>
+          </div>
+          <div
+            v-else
+            class="mb-24">
+            <BkFormItem
+              :label="t('Follower节点')"
+              required>
+              <div class="resource-pool-item">
+                <BkFormItem
+                  :label="t('规格')"
+                  property="details.resource_spec.follower.spec_id"
+                  required>
+                  <SpecSelector
+                    ref="specFollowerRef"
+                    v-model="formData.details.resource_spec.follower.spec_id"
+                    :biz-id="formData.bk_biz_id"
+                    :cloud-id="formData.details.bk_cloud_id"
+                    cluster-type="doris"
+                    machine-type="doris_follower" />
+                </BkFormItem>
+                <BkFormItem
+                  :label="t('数量')"
+                  property="details.resource_spec.follower.count"
+                  required>
+                  <BkInput
+                    v-model="formData.details.resource_spec.follower.count"
+                    disabled
+                    type="number" />
+                </BkFormItem>
+              </div>
+            </BkFormItem>
+            <BkFormItem :label="t('Observer节点')">
+              <div class="resource-pool-item">
+                <BkFormItem
+                  :label="t('规格')"
+                  property="details.resource_spec.observer.spec_id">
+                  <SpecSelector
+                    ref="specObserverRef"
+                    v-model="formData.details.resource_spec.observer.spec_id"
+                    :biz-id="formData.bk_biz_id"
+                    :cloud-id="formData.details.bk_cloud_id"
+                    cluster-type="doris"
+                    machine-type="doris_observer" />
+                </BkFormItem>
+                <BkFormItem
+                  :label="t('数量')"
+                  property="details.resource_spec.observer.count">
+                  <BkInput
+                    v-model="formData.details.resource_spec.observer.count"
+                    :min="0"
+                    type="number" />
+                </BkFormItem>
+              </div>
+            </BkFormItem>
+            <BkFormItem label=" ">
+              <BkAlert
+                style="width: 655px"
+                :theme="tipTheme"
+                :title="t('请保证冷/热节点至少存在一种')" />
+            </BkFormItem>
+            <BkFormItem :label="t('热节点')">
+              <div class="resource-pool-item">
+                <BkFormItem
+                  :label="t('规格')"
+                  property="details.resource_spec.hot.spec_id">
+                  <SpecSelector
+                    ref="specHotRef"
+                    v-model="formData.details.resource_spec.hot.spec_id"
+                    :biz-id="formData.bk_biz_id"
+                    :cloud-id="formData.details.bk_cloud_id"
+                    cluster-type="doris"
+                    machine-type="doris_backend" />
+                </BkFormItem>
+                <BkFormItem
+                  :label="t('数量')"
+                  property="details.resource_spec.hot.count">
+                  <BkInput
+                    v-model="formData.details.resource_spec.hot.count"
+                    :min="0"
+                    type="number" />
+                </BkFormItem>
+              </div>
+            </BkFormItem>
+            <BkFormItem :label="t('冷节点')">
+              <div class="resource-pool-item">
+                <BkFormItem
+                  :label="t('规格')"
+                  property="details.resource_spec.cold.spec_id">
+                  <SpecSelector
+                    ref="specColdRef"
+                    v-model="formData.details.resource_spec.cold.spec_id"
+                    :biz-id="formData.bk_biz_id"
+                    :cloud-id="formData.details.bk_cloud_id"
+                    cluster-type="doris"
+                    machine-type="doris_backend" />
+                </BkFormItem>
+                <BkFormItem
+                  :label="t('数量')"
+                  property="details.resource_spec.cold.count">
+                  <BkInput
+                    v-model="formData.details.resource_spec.cold.count"
+                    :min="0"
+                    type="number" />
+                </BkFormItem>
+              </div>
+            </BkFormItem>
+            <BkFormItem :label="t('总容量')">
+              <BkInput
+                disabled
+                :model-value="totalCapacity"
+                style="width: 184px" />
+              <span class="input-desc">G</span>
+            </BkFormItem>
+          </div>
+        </Transition>
+        <BkFormItem
+          :label="t('查询端口')"
+          property="details.query_port"
+          required>
+          <BkInput
+            v-model="formData.details.query_port"
+            clearable
+            :max="65535"
+            :min="1024"
+            show-clear-only-hover
+            style="width: 185px"
+            type="number" />
+          <span class="input-desc">{{ t('范围min_max', { min: 1024, max: 65535 }) }}</span>
+        </BkFormItem>
+        <BkFormItem
+          :label="t('http端口')"
+          property="details.http_port"
+          required>
+          <BkInput
+            v-model="formData.details.http_port"
+            clearable
+            :max="65535"
+            :min="1024"
+            show-clear-only-hover
+            style="width: 185px"
+            type="number" />
+          <span class="input-desc">{{ t('范围min_max', { min: 1024, max: 65535 }) }}</span>
+        </BkFormItem>
+        <BkFormItem :label="t('备注')">
+          <BkInput
+            v-model="formData.remark"
+            :maxlength="100"
+            :placeholder="t('请提供更多有用信息申请信息_以获得更快审批')"
+            style="width: 655px"
+            type="textarea" />
+        </BkFormItem>
+      </DbCard>
+    </DbForm>
+    <template #action>
+      <div>
+        <BkButton
+          class="w-88"
+          :loading="baseState.isSubmitting"
+          theme="primary"
+          @click="handleSubmit">
+          {{ t('提交') }}
+        </BkButton>
+        <BkButton
+          class="ml8 w-88"
+          :disabled="baseState.isSubmitting"
+          @click="handleReset">
+          {{ t('重置') }}
+        </BkButton>
+        <BkButton
+          class="ml8 w-88"
+          :disabled="baseState.isSubmitting"
+          @click="handleCancel">
+          {{ t('取消') }}
+        </BkButton>
+      </div>
+    </template>
+  </SmartAction>
+</template>
+
+<script setup lang="ts">
+  import InfoBox from 'bkui-vue/lib/info-box';
+  import _ from 'lodash'
+  import { useI18n } from 'vue-i18n';
+
+  import type {
+    BizItem,
+    HostDetails,
+  } from '@services/types';
+
+  import { useApplyBase } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import AffinityItem from '@components/apply-items/AffinityItem.vue';
+  import BusinessItems from '@components/apply-items/BusinessItems.vue';
+  import CloudItem from '@components/apply-items/CloudItem.vue';
+  import ClusterAlias from '@components/apply-items/ClusterAlias.vue';
+  import ClusterName from '@components/apply-items/ClusterName.vue';
+  import DeployVersion from '@components/apply-items/DeployVersion.vue';
+  import RegionItem from '@components/apply-items/RegionItem.vue';
+  import SpecSelector from '@components/apply-items/SpecSelector.vue';
+  import RenderHostTable from '@components/cluster-common/big-data-host-table/RenderHostTable.vue';
+  import DbForm from '@components/db-form/index.vue'
+  import IpSelector from '@components/ip-selector/IpSelector.vue';
+  import IpSelectorSubmitTips from '@components/ip-selector-submit-tips/Index.vue'
+
+  type NodeType = 'follower' | 'observer' | 'hot' | 'cold'
+
+  const route = useRoute();
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const makeMapByHostId = (hostList: HostDetails[]) =>  hostList.reduce((result, item) => ({
+    ...result,
+    [item.host_id]: true,
+  }), {} as Record<number, boolean>);
+
+  const genDefaultFormData = () => ({
+    bk_biz_id: '' as number | '',
+    remark: '',
+    ticket_type: TicketTypes.DORIS_APPLY,
+    details: {
+      bk_cloud_id: 0,
+      db_app_abbr: '',
+      cluster_name: '',
+      cluster_alias: '',
+      city_code: '',
+      db_version: '',
+      ip_source: 'resource_pool',
+      disaster_tolerance_level: 'NONE', // 同 affinity
+      nodes: {
+        follower: [] as Array<HostDetails>,
+        observer: [] as Array<HostDetails>,
+        hot: [] as Array<HostDetails>,
+        cold: [] as Array<HostDetails>,
+      },
+      resource_spec: {
+        follower: {
+          spec_id: '',
+          count: 3,
+        },
+        observer: {
+          spec_id: '',
+          count: 0,
+        },
+        hot: {
+          spec_id: '',
+          count: 0,
+        },
+        cold: {
+          spec_id: '',
+          count: 0,
+        },
+      },
+      query_port: 9030,
+      http_port: 8030,
+    },
+  });
+
+  const formRef = ref<InstanceType<typeof DbForm>>();
+  const specFollowerRef = ref<InstanceType<typeof SpecSelector>>();
+  const specObserverRef = ref<InstanceType<typeof SpecSelector>>();
+  const specHotRef = ref<InstanceType<typeof SpecSelector>>();
+  const specColdRef = ref<InstanceType<typeof SpecSelector>>();
+  const regionItemRef = ref<InstanceType<typeof RegionItem>>();
+  const totalCapacity = ref(0);
+  const isClickSubmit = ref(false);
+  const cloudInfo = ref({
+    id: '' as number | string,
+    name: '',
+  });
+
+  const formData = reactive(genDefaultFormData());
+
+  const tipTheme = computed(() => {
+    if (isClickSubmit.value === false) {
+      return 'info';
+    }
+
+    let isPass = false
+    if (formData.details.ip_source === 'resource_pool') {
+      const {
+        hot,
+        cold,
+      } = formData.details.resource_spec;
+      isPass = Boolean(hot.spec_id && hot.count) || Boolean(cold.spec_id && cold.count);
+    } else {
+      const { hot, cold } = formData.details.nodes
+      isPass = hot.length > 0 || cold.length > 0
+    }
+
+    return (isPass ? 'info' : 'danger');
+  });
+
+  const rules = {
+    'details.nodes.follower': [
+      {
+        validator: (value: Array<HostDetails>) => value.length === 3,
+        message: t('固定为n台', [3]),
+        trigger: 'change',
+      },
+    ],
+    'details.nodes.observer': [
+      {
+        validator: (value: Array<HostDetails>) => {
+          if (value.length === 0) {
+            return true
+          }
+          return value.length >= 2
+        },
+        message: t('若选择至少需要n台', [2]),
+        trigger: 'change',
+      },
+    ],
+    'details.nodes.hot': [
+      {
+        validator: () => formData.details.nodes.hot.length > 0 || formData.details.nodes.cold.length > 0,
+        message: t('请保证冷/热节点至少存在一种'),
+        trigger: 'change',
+      },
+      {
+        validator: (value: Array<HostDetails>) => {
+          if (value.length === 0) {
+            return true
+          }
+          return value.length >= 2
+        },
+        message: t('若选择至少需要n台', [2]),
+        trigger: 'change',
+      },
+    ],
+    'details.nodes.cold': [
+      {
+        validator: () => formData.details.nodes.hot.length > 0 || formData.details.nodes.cold.length > 0,
+        message: t('请保证冷/热节点至少存在一种'),
+        trigger: 'change',
+      },
+      {
+        validator: (value: Array<HostDetails>) => {
+          if (value.length === 0) {
+            return true
+          }
+          return value.length >= 2
+        },
+        message: t('若选择至少需要n台', [2]),
+        trigger: 'change',
+      },
+    ],
+    'details.resource_spec.follower.count': [
+      {
+        validator: (value: number) => value === 3,
+        message: t('固定为n台', [3]),
+        trigger: 'change',
+      },
+    ],
+    'details.resource_spec.observer.count': [
+      {
+        validator: (value: number) => {
+          if (value === 0) {
+            return true
+          }
+          return value >= 2
+        },
+        message: t('若选择至少需要n台', [2]),
+        trigger: 'change',
+      },
+    ],
+    'details.resource_spec.hot.count': [
+      {
+        validator: (value: number) => {
+          if (value === 0) {
+            return true
+          }
+          return value >= 2
+        },
+        message: t('若选择至少需要n台', [2]),
+        trigger: 'change',
+      },
+    ],
+    'details.resource_spec.cold.count': [
+      {
+        validator: (value: number) => {
+          if (value === 0) {
+            return true
+          }
+          return value >= 2
+        },
+        message: t('若选择至少需要n台', [2]),
+        trigger: 'change',
+      },
+    ],
+    'details.query_port': [
+      {
+        validator: (value: number) => value !== 9010 && value !== 9020,
+        message: t('9010 和 9020 为服务内部占用端口'),
+        trigger: 'change',
+      },
+      {
+        validator: (value: number) => value !== formData.details.http_port,
+        message: t('与http端口互斥'),
+        trigger: 'change',
+      }
+    ],
+    'details.http_port': [
+      {
+        validator: (value: number) => value !== 9010 && value !== 9020,
+        message: t('9010 和 9020 为服务内部占用端口'),
+        trigger: 'change',
+      },
+      {
+        validator: (value: number) => value !== formData.details.query_port,
+        message: t('与查询端口互斥'),
+        trigger: 'change',
+      }
+    ],
+  };
+
+  watch([
+    () => formData.details.resource_spec.hot,
+    () => formData.details.resource_spec.cold,
+  ], ([newHotSpec, newColdSpec]) => {
+    const hotCount = Number(newHotSpec.count);
+    const coldCount = Number(newColdSpec.count);
+    if (specHotRef.value && specColdRef.value) {
+      const { storage_spec: hotStorageSpec = [] } = specHotRef.value.getData();
+      const { storage_spec: coldStorageSpec = [] } = specColdRef.value.getData();
+      const hotDisk = hotStorageSpec.reduce((total, item) => (
+        total + Number(item.size || 0)
+      ), 0);
+      const coldDisk = coldStorageSpec.reduce((total, item) => (
+        total + Number(item.size || 0)
+      ), 0);
+      totalCapacity.value = hotDisk * hotCount + coldCount * coldDisk;
+    }
+  }, { flush: 'post', deep: true });
+
+  const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content');
+
+  const {
+    baseState,
+    bizState,
+    handleCreateAppAbbr,
+    handleCreateTicket,
+    handleCancel,
+  } = useApplyBase();
+
+  // 切换业务，需要重置 IP 相关的选择
+  const handleChangeBiz = (info: BizItem) => {
+    bizState.info = info;
+    bizState.hasEnglishName = !!info.english_name;
+
+    formData.details.nodes.hot = [];
+    formData.details.nodes.cold = [];
+    formData.details.nodes.observer = [];
+    formData.details.nodes.follower = [];
+  }
+
+  /**
+   * 变更所属管控区域
+   */
+  const handleChangeCloud = (info: {id: number | string, name: string}) => {
+    cloudInfo.value = info
+
+    formData.details.nodes.hot = [];
+    formData.details.nodes.cold = [];
+    formData.details.nodes.follower = [];
+    formData.details.nodes.observer = [];
+  }
+
+  // 主机节点互斥
+  const disableHostMethod = (data: HostDetails, mutexNodeTypes: NodeType[]) => {
+    const tipMap = {
+      'follower': t('主机已被Follower节点使用'),
+      'observer': t('主机已被Observer节点使用'),
+      'hot': t('主机已被热节点使用'),
+      'cold': t('主机已被冷节点使用')
+    }
+
+    for (const mutexNodeType of mutexNodeTypes) {
+      const hostMap = makeMapByHostId(formData.details.nodes[mutexNodeType]);
+      if (hostMap[data.host_id]) {
+        return tipMap[mutexNodeType];
+      }
+    }
+    return false
+  }
+
+  // follower 节点 IP 选择器提交
+  const followerDisableDialogSubmitMethod = (hostList: HostDetails[]) => (hostList.length === 3 ? false : t('需要n台', { n: 3 }));
+  // observer、hot、cold 节点 IP 选择器提交
+  const optionalNodeDisableDialogSubmitMethod = (hostList: HostDetails[]) => {
+    if (hostList.length === 0) {
+      return false
+    }
+    return hostList.length >= 2 ? false : t('若选择至少需要n台', [2])
+  };
+
+  // 更新节点IP
+  const handleIpListChange = (data: (HostDetails)[], nodeType: NodeType) => {
+    formData.details.nodes[nodeType] = data;
+  }
+
+  // 提交
+  const handleSubmit = () => {
+    isClickSubmit.value = true;
+    formRef.value!.validate()
+      .then(() => {
+        if (tipTheme.value === 'danger' && formData.details.ip_source === 'resource_pool') {
+          return Promise.reject(t('请保证冷/热节点至少存在一种'));
+        }
+        baseState.isSubmitting = true;
+
+        const getNodeList = (ipList: Array<HostDetails>) => ipList.map(item => ({
+          bk_host_id: item.host_id,
+          ip: item.ip,
+          bk_cloud_id: item.cloud_area.id,
+          bk_biz_id: item.biz.id,
+        }));
+
+        const getDetails = () => {
+          const { details }: { details: Record<string, any> } = _.cloneDeep(formData);
+          const { cityCode } = regionItemRef.value!.getValue();
+
+          if (formData.details.ip_source === 'resource_pool') {
+            delete details.nodes;
+
+            const regionAndDisasterParams = {
+              affinity: details.disaster_tolerance_level,
+              location_spec: {
+                city: cityCode,
+                sub_zone_ids: [],
+              },
+            };
+
+            const result = {
+              ...details,
+              resource_spec: {
+                follower: {
+                  ...details.resource_spec.follower,
+                  ...specFollowerRef.value!.getData(),
+                  ...regionAndDisasterParams,
+                  count: Number(details.resource_spec.follower.count),
+                },
+              },
+            };
+
+            const observerCount = Number(details.resource_spec.observer.count);
+            const hotCount = Number(details.resource_spec.hot.count);
+            const coldCount = Number(details.resource_spec.cold.count);
+            if (observerCount > 0) {
+              Object.assign(result.resource_spec, {
+                observer: {
+                  ...details.resource_spec.observer,
+                  ...specObserverRef.value!.getData(),
+                  ...regionAndDisasterParams,
+                  count: observerCount,
+                }
+              })
+            }
+            if (hotCount > 0) {
+              Object.assign(result.resource_spec, {
+                hot: {
+                  ...details.resource_spec.hot,
+                  ...specHotRef.value!.getData(),
+                  ...regionAndDisasterParams,
+                  count: hotCount,
+                }
+              })
+            }
+            if (coldCount > 0) {
+              Object.assign(result.resource_spec, {
+                cold: {
+                  ...details.resource_spec.cold,
+                  ...specColdRef.value!.getData(),
+                  ...regionAndDisasterParams,
+                  count: coldCount,
+                }
+              })
+            }
+            return result;
+          }
+
+          delete details.resource_spec;
+          return {
+            ...details,
+            nodes: {
+              follower: getNodeList(formData.details.nodes.follower),
+              observer: getNodeList(formData.details.nodes.observer),
+              hot: getNodeList(formData.details.nodes.hot),
+              cold: getNodeList(formData.details.nodes.cold),
+            },
+          };
+        };
+
+        const params = {
+          ...formData,
+          details: getDetails(),
+        };
+        // 若业务没有英文名称则先创建业务英文名称再创建单据，否则直接创建单据
+        bizState.hasEnglishName ? handleCreateTicket(params) : handleCreateAppAbbr(params);
+      });
+  };
+
+  // 重置表单
+  const handleReset = () => {
+    InfoBox({
+      title: t('确认重置表单内容'),
+      content: t('重置后_将会清空当前填写的内容'),
+      onConfirm: () => {
+        isClickSubmit.value = false;
+        Object.assign(formData, genDefaultFormData());
+        formRef.value!.clearValidate();
+        nextTick(() => {
+          window.changeConfirm = false;
+        });
+        return true;
+      },
+    });
+  };
+
+  defineExpose({
+    routerBack() {
+      if (!route.query.from) {
+        router.back();
+        return;
+      }
+      router.push({
+        name: route.query.from as string,
+      });
+    },
+  });
+</script>
+<style lang="less">
+  .apply-doris-page {
+    display: block;
+
+    .db-card {
+      & ~ .db-card {
+        margin-top: 20px;
+      }
+    }
+
+    .bk-radio-group {
+      width: 435px;
+
+      .bk-radio-button {
+        flex: auto;
+      }
+    }
+
+    .item-input {
+      width: 435px;
+    }
+
+    .input-desc {
+      padding-left: 12px;
+      font-size: 12px;
+      line-height: 20px;
+      color: #63656e;
+    }
+
+    .resource-pool-item {
+      width: 655px;
+      padding: 24px 0;
+      background-color: #f5f7fa;
+      border-radius: 2px;
+
+      .bk-form-item {
+        .bk-form-label {
+          width: 120px !important;
+        }
+
+        .bk-form-content {
+          margin-left: 120px !important;
+
+          .bk-select,
+          .bk-input {
+            width: 314px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/doris-manage/common/expansion/Index.vue b/dbm-ui/frontend/src/views/doris-manage/common/expansion/Index.vue
new file mode 100644
index 000000000..04b35def5
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/common/expansion/Index.vue
@@ -0,0 +1,473 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <BkLoading
+    class="doris-cluster-expansion-box"
+    :loading="isLoading">
+    <BkAlert
+      class="mb16"
+      theme="warning"
+      :title="t('至少添加一种节点IP')" />
+    <BkRadioGroup
+      v-model="ipSource"
+      class="ip-srouce-box">
+      <BkRadioButton label="resource_pool">
+        {{ t('资源池自动匹配') }}
+      </BkRadioButton>
+      <BkRadioButton label="manual_input">
+        {{ t('手动选择') }}
+      </BkRadioButton>
+    </BkRadioGroup>
+    <div class="content-wrapper">
+      <NodeStatusList
+        ref="nodeStatusListRef"
+        v-model="nodeType"
+        :ip-source="ipSource"
+        :list="nodeStatusList"
+        :node-info="nodeInfoMap" />
+      <div class="node-panel">
+        <template v-if="nodeType === 'observer'">
+          <DorisObserverHostExpansion
+            v-if="!isLoading"
+            :key="nodeType"
+            v-model:expansionDisk="nodeInfoMap[nodeType].expansionDisk"
+            v-model:hostList="nodeInfoMap[nodeType].hostList"
+            v-model:resourceSpec="nodeInfoMap[nodeType].resourceSpec"
+            v-model:targetDisk="nodeInfoMap[nodeType].targetDisk"
+            :cloud-info="{
+              id: data.bk_cloud_id,
+              name: data.bk_cloud_name,
+            }"
+            :data="nodeInfoMap[nodeType]"
+            :disable-host-method="(data: HostDetails) => disableHostMethod(data, nodeInfoMap[nodeType].mutexNodeTypes)"
+            :ip-source="ipSource" />
+        </template>
+        <template v-else>
+          <HostExpansion
+            v-if="!isLoading"
+            :key="nodeType"
+            v-model:expansionDisk="nodeInfoMap[nodeType].expansionDisk"
+            v-model:hostList="nodeInfoMap[nodeType].hostList"
+            v-model:resourceSpec="nodeInfoMap[nodeType].resourceSpec"
+            v-model:targetDisk="nodeInfoMap[nodeType].targetDisk"
+            :cloud-info="{
+              id: data.bk_cloud_id,
+              name: data.bk_cloud_name,
+            }"
+            :data="nodeInfoMap[nodeType]"
+            :disable-host-method="(data: HostDetails) => disableHostMethod(data, nodeInfoMap[nodeType].mutexNodeTypes)"
+            :ip-source="ipSource" />
+        </template>
+      </div>
+    </div>
+  </BkLoading>
+</template>
+
+<script setup lang="tsx">
+  import { InfoBox } from 'bkui-vue';
+  import { useI18n } from 'vue-i18n';
+
+  import DorisModel from '@services/model/doris/doris';
+  import DorisNodeModel from '@services/model/doris/doris-node';
+  import { getHostDetails } from '@services/source/ipchooser';
+  import { createTicket } from '@services/source/ticket';
+  import type { HostDetails } from '@services/types';
+
+  import { useTicketMessage } from '@hooks';
+
+  import { useGlobalBizs } from '@stores';
+
+  import {
+    ClusterTypes,
+    TicketTypes
+  } from '@common/const';
+
+  import DorisObserverHostExpansion from '@components/cluster-common/doris-observer-host-expansion/Index.vue';
+  import HostExpansion, {
+    type TExpansionNode,
+  } from '@components/cluster-common/host-expansion/Index.vue';
+  import NodeStatusList from '@components/cluster-common/host-expansion/NodeStatusList.vue';
+
+  import { messageError } from '@utils';
+
+  interface TDorisExpansionNode extends TExpansionNode {
+    mutexNodeTypes: ('hot' | 'cold' | 'observer')[]
+  }
+
+  interface Props {
+    data: DorisModel,
+  }
+
+  interface Emits {
+    (e: 'change'): void
+  }
+
+  interface Exposes {
+    submit: () => Promise<any>
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const makeMapByHostId = (hostList: TExpansionNode['hostList'] = []) => hostList.reduce((result, item) => ({
+    ...result,
+    [item.host_id]: true,
+  }), {} as Record<number, boolean>);
+
+  const generateNodeInfo = (values: Pick<TDorisExpansionNode, 'label' | 'role' | 'specMachineType' | 'tagText' | 'mutexNodeTypes'>): TDorisExpansionNode => ({
+    ...values,
+    clusterId: props.data.id,
+    originalHostList: [],
+    ipSource: 'resource_pool',
+    hostList: [],
+    totalDisk: 0,
+    targetDisk: 0,
+    expansionDisk: 0,
+    specClusterType: ClusterTypes.DORIS,
+    resourceSpec: {
+      spec_id: 0,
+      count: 1,
+    },
+  })
+
+  const { t } = useI18n();
+  const { currentBizId } = useGlobalBizs();
+  const ticketMessage = useTicketMessage();
+
+  const nodeStatusList = [
+    {
+      key: 'cold',
+      label: t('冷节点'),
+    },
+    {
+      key: 'hot',
+      label: t('热节点'),
+    },
+    {
+      key: 'observer',
+      label: t('Observer节点'),
+    },
+  ];
+
+  const nodeInfoMap = reactive<Record<string, TDorisExpansionNode>>({
+    hot: generateNodeInfo({
+      label: t('热节点'),
+      role: 'doris_backend_hot',
+      specMachineType: 'doris_backend',
+      tagText: t('存储层'),
+      mutexNodeTypes: ['cold', 'observer'],
+    }),
+    cold: generateNodeInfo({
+      label: t('冷节点'),
+      role: 'doris_backend_cold',
+      specMachineType: 'doris_backend',
+      tagText: t('存储层'),
+      mutexNodeTypes: ['hot', 'observer'],
+    }),
+    observer: generateNodeInfo({
+      label: t('Observer节点'),
+      role: 'doris_observer',
+      specMachineType: 'doris_observer',
+      tagText: t('接入层'),
+      mutexNodeTypes: ['hot', 'cold'],
+    })
+  });
+
+  const nodeStatusListRef = ref<InstanceType<typeof NodeStatusList>>();
+  const isLoading = ref(false);
+  const ipSource = ref('resource_pool');
+  const nodeType = ref('cold');
+
+  // 获取主机详情
+  const fetchHostDetail = () => {
+    const hotHostIdMap = props.data.doris_backend_hot.reduce((result, item) => ({
+      ...result,
+      [item.bk_host_id]: true,
+    }), {} as Record<number, boolean>);
+    const coldHostIdMap = props.data.doris_backend_cold.reduce((result, item) => ({
+      ...result,
+      [item.bk_host_id]: true,
+    }), {} as Record<number, boolean>);
+    const followerHostIdMap = props.data.doris_follower.reduce((result, item) => ({
+      ...result,
+      [item.bk_host_id]: true,
+    }), {} as Record<number, boolean>);
+
+    const hostIdList = [
+      ...props.data.doris_backend_hot,
+      ...props.data.doris_backend_cold,
+    ].map(item => ({
+      host_id: item.bk_host_id,
+      meta: {
+        bk_biz_id: item.bk_biz_id,
+        scope_id: item.bk_biz_id,
+        scope_type: 'biz',
+      },
+    }));
+
+    isLoading.value = true;
+    getHostDetails({
+      host_list: hostIdList,
+      scope_list: [{
+        scope_id: currentBizId,
+        scope_type: 'biz',
+      }],
+    }).then((data) => {
+      const hotOriginalHostList: HostDetails[] = [];
+      const coldOriginalHostList: HostDetails[] = [];
+      const observerOriginalHostList: HostDetails[] = []
+
+      let hotDiskTotal = 0;
+      let coldDiskTotal = 0;
+
+      data.forEach((hostItem) => {
+        if (hotHostIdMap[hostItem.host_id]) {
+          hotDiskTotal += Math.floor(Number(hostItem.bk_disk));
+          hotOriginalHostList.push(hostItem);
+        } else if (coldHostIdMap[hostItem.host_id]) {
+          coldDiskTotal += Math.floor(Number(hostItem.bk_disk));
+          coldOriginalHostList.push(hostItem);
+        } else if (followerHostIdMap[hostItem.host_id]) {
+          observerOriginalHostList.push(hostItem)
+        }
+      });
+
+      nodeInfoMap.hot.totalDisk = hotDiskTotal;
+      nodeInfoMap.hot.originalHostList = hotOriginalHostList;
+
+      nodeInfoMap.cold.totalDisk = coldDiskTotal;
+      nodeInfoMap.cold.originalHostList = coldOriginalHostList;
+
+      nodeInfoMap.observer.originalHostList = observerOriginalHostList;
+    })
+      .finally(() => {
+        isLoading.value = false;
+      });
+  };
+
+  fetchHostDetail();
+
+  // 主机节点互斥
+  const disableHostMethod = (data: HostDetails, mutexNodeTypes: ('observer' | 'hot' | 'cold')[]) => {
+    const tipMap = {
+      'observer': t('主机已被Observer节点使用'),
+      'hot': t('主机已被热节点使用'),
+      'cold': t('主机已被冷节点使用')
+    }
+
+    for (const mutexNodeType of mutexNodeTypes) {
+      const hostMap = makeMapByHostId(nodeInfoMap[mutexNodeType].hostList);
+      if (hostMap[data.host_id]) {
+        return tipMap[mutexNodeType];
+      }
+    }
+    return false
+  }
+
+  defineExpose<Exposes>({
+    submit() {
+      if (!nodeStatusListRef.value!.validate()) {
+        messageError(t('至少添加一种节点IP'));
+        return Promise.reject();
+      }
+
+      const renderSubTitle = () => {
+        const renderDiskTips = () => {
+          const isNotMatch = Object.values(nodeInfoMap)
+            .some(nodeData => nodeData.targetDisk > 0
+              && nodeData.totalDisk + nodeData.expansionDisk !== nodeData.targetDisk);
+          if (isNotMatch) {
+            return (
+              <div style="font-size: 14px">
+                <div>{t('目标容量与所选 IP 容量不一致，确认提交？')}</div>
+                <div class="mb-8">{t('继续提交将按照手动选择的 IP 容量进行')}</div>
+              </div>
+            );
+          }
+          return null;
+        };
+        const renderExpansionDiskTips = () => Object.values(nodeInfoMap).map((nodeData) => {
+          if (nodeData.expansionDisk) {
+            if (nodeData.specMachineType === DorisNodeModel.ROLE_OBSERVER) {
+              return (
+                <div class='tips-item'>
+                  {t('name容量从n台扩容至n台', {
+                    name: nodeData.label,
+                    hostNumBefore: nodeData.originalHostList.length,
+                    hostNumAfter: nodeData.resourceSpec.count + nodeData.originalHostList.length,
+                  })}
+                </div>
+              );
+            }
+            return (
+              <div class='tips-item'>
+                {t('name容量从nG扩容至nG', {
+                  name: nodeData.label,
+                  totalDisk: nodeData.totalDisk,
+                  expansionDisk: nodeData.totalDisk + nodeData.expansionDisk,
+                })}
+              </div>
+            );
+          }
+          return null;
+        });
+
+        return (
+          <div>
+            {renderDiskTips()}
+            <div style="background-color: #F5F7FA; padding: 8px 16px;">
+              <div class='tips-item'>
+                {t('集群')} :
+                <span
+                  style="color: #313238"
+                  class="ml-8">
+                  {props.data.cluster_name}
+                </span>
+              </div>
+              {renderExpansionDiskTips()}
+            </div>
+          </div>
+        );
+      };
+
+      return new Promise((resolve, reject) => {
+        InfoBox({
+          title: t('确认扩容集群？'),
+          subTitle: renderSubTitle,
+          confirmText: t('确认'),
+          cancelText: t('取消'),
+          headerAlign: 'center',
+          contentAlign: 'left',
+          footerAlign: 'center',
+          extCls: 'doris-expansion-modal',
+          onClose: () => reject(),
+          onConfirm: () => {
+            const hostData = {};
+
+            const generateExtInfo = () => Object.entries(nodeInfoMap).reduce((results, [key, item]) => {
+              const obj = {
+                host_list: item.hostList,
+                total_hosts: item.originalHostList.length,
+                total_disk: item.totalDisk,
+                target_disk: item.targetDisk,
+                expansion_disk: item.expansionDisk,
+              };
+              Object.assign(results, {
+                [key]: obj,
+              });
+              return results;
+            }, {} as Record<string, TExpansionNode>);
+
+            if (ipSource.value === 'manual_input') {
+              const fomatHost = (hostList: TExpansionNode['hostList'] = []) => hostList.map(hostItem => ({
+                ip: hostItem.ip,
+                bk_cloud_id: hostItem.cloud_id,
+                bk_host_id: hostItem.host_id,
+                bk_biz_id: hostItem.meta.bk_biz_id,
+              }));
+              Object.assign(hostData, {
+                nodes: {
+                  hot: fomatHost(nodeInfoMap.hot.hostList),
+                  cold: fomatHost(nodeInfoMap.cold.hostList),
+                  observer: fomatHost(nodeInfoMap.observer.hostList)
+                },
+              });
+            } else {
+              const resourceSpec = {};
+              if (nodeInfoMap.hot.resourceSpec.spec_id > 0 && nodeInfoMap.hot.resourceSpec.count > 0) {
+                Object.assign(resourceSpec, {
+                  hot: nodeInfoMap.hot.resourceSpec,
+                });
+              }
+              if (nodeInfoMap.cold.resourceSpec.spec_id > 0 && nodeInfoMap.cold.resourceSpec.count > 0) {
+                Object.assign(resourceSpec, {
+                  cold: nodeInfoMap.cold.resourceSpec,
+                });
+              }
+              if (nodeInfoMap.observer.resourceSpec.spec_id > 0 && nodeInfoMap.observer.resourceSpec.count > 0) {
+                Object.assign(resourceSpec, {
+                  observer: nodeInfoMap.observer.resourceSpec,
+                });
+              }
+              Object.assign(hostData, {
+                resource_spec: resourceSpec,
+              });
+            }
+
+            createTicket({
+              bk_biz_id: currentBizId,
+              ticket_type: TicketTypes.DORIS_SCALE_UP,
+              details: {
+                ip_source: ipSource.value,
+                cluster_id: props.data.id,
+                ...hostData,
+                ext_info: generateExtInfo(),
+              },
+            })
+              .then((data) => {
+                ticketMessage(data.id);
+                resolve('success');
+                emits('change');
+              })
+              .catch(() => {
+                reject();
+              });
+          },
+        });
+      });
+    },
+  });
+</script>
+
+<style lang="less">
+  .doris-expansion-modal {
+    .bk-modal-content div {
+      font-size: 14px;
+    }
+
+    .tips-item {
+      padding: 2px 0;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .doris-cluster-expansion-box {
+    padding: 18px 43px 18px 37px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #63656e;
+    background: #f5f7fa;
+
+    .ip-srouce-box {
+      display: flex;
+      margin-bottom: 16px;
+
+      .bk-radio-button {
+        flex: 1;
+        background: #fff;
+      }
+    }
+
+    .content-wrapper {
+      display: flex;
+      background: #fff;
+      border-radius: 2px;
+      box-shadow: 0 2px 4px 0 #1919290d;
+
+      .node-panel {
+        flex: 1;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/doris-manage/common/replace/Index.vue b/dbm-ui/frontend/src/views/doris-manage/common/replace/Index.vue
new file mode 100644
index 000000000..e79516312
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/common/replace/Index.vue
@@ -0,0 +1,444 @@
+<!--
+ * 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="doris-cluster-replace-box">
+    <template v-if="!isEmpty">
+      <BkRadioGroup
+        v-model="ipSource"
+        class="ip-srouce-box">
+        <BkRadioButton label="resource_pool">
+          {{ t('资源池自动匹配') }}
+        </BkRadioButton>
+        <BkRadioButton label="manual_input">
+          {{ t('手动选择') }}
+        </BkRadioButton>
+      </BkRadioGroup>
+      <div
+        v-show="nodeInfoMap.hot.nodeList.length > 0"
+        class="replace-item">
+        <div class="item-label">
+          {{ t('热节点') }}
+        </div>
+        <HostReplace
+          ref="hotRef"
+          v-model:hostList="nodeInfoMap.hot.hostList"
+          v-model:nodeList="nodeInfoMap.hot.nodeList"
+          v-model:resourceSpec="nodeInfoMap.hot.resourceSpec"
+          :cloud-info="{
+            id: data.bk_cloud_id,
+            name: data.bk_cloud_name,
+          }"
+          :data="nodeInfoMap.hot"
+          :disable-host-method="(data: HostDetails) => disableHostMethod(data, ['observer', 'follower', 'cold'])"
+          :ip-source="ipSource"
+          @remove-node="handleRemoveNode" />
+      </div>
+      <div
+        v-show="nodeInfoMap.cold.nodeList.length > 0"
+        class="replace-item">
+        <div class="item-label">
+          {{ t('冷节点') }}
+        </div>
+        <HostReplace
+          ref="coldRef"
+          v-model:hostList="nodeInfoMap.cold.hostList"
+          v-model:nodeList="nodeInfoMap.cold.nodeList"
+          v-model:resourceSpec="nodeInfoMap.cold.resourceSpec"
+          :cloud-info="{
+            id: data.bk_cloud_id,
+            name: data.bk_cloud_name,
+          }"
+          :data="nodeInfoMap.cold"
+          :disable-host-method="(data: HostDetails) => disableHostMethod(data, ['observer', 'follower', 'hot'])"
+          :ip-source="ipSource"
+          @remove-node="handleRemoveNode" />
+      </div>
+      <div
+        v-show="nodeInfoMap.observer.nodeList.length > 0"
+        class="replace-item">
+        <div class="item-label">
+          {{ t('Observer节点') }}
+        </div>
+        <HostReplace
+          ref="observerRef"
+          v-model:hostList="nodeInfoMap.observer.hostList"
+          v-model:nodeList="nodeInfoMap.observer.nodeList"
+          v-model:resourceSpec="nodeInfoMap.observer.resourceSpec"
+          :cloud-info="{
+            id: data.bk_cloud_id,
+            name: data.bk_cloud_name,
+          }"
+          :data="nodeInfoMap.observer"
+          :disable-host-method="(data: HostDetails) => disableHostMethod(data, ['follower', 'hot', 'cold'])"
+          :ip-source="ipSource"
+          @remove-node="handleRemoveNode" />
+      </div>
+      <div
+        v-show="nodeInfoMap.follower.nodeList.length > 0"
+        class="replace-item">
+        <div class="item-label">
+          {{ t('Follower节点') }}
+        </div>
+        <HostReplace
+          ref="followerRef"
+          v-model:hostList="nodeInfoMap.follower.hostList"
+          v-model:nodeList="nodeInfoMap.follower.nodeList"
+          v-model:resourceSpec="nodeInfoMap.follower.resourceSpec"
+          :cloud-info="{
+            id: data.bk_cloud_id,
+            name: data.bk_cloud_name,
+          }"
+          :data="nodeInfoMap.follower"
+          :disable-host-method="(data: HostDetails) => disableHostMethod(data, ['observer', 'hot', 'cold'])"
+          :ip-source="ipSource"
+          @remove-node="handleRemoveNode" />
+      </div>
+    </template>
+    <div
+      v-else
+      class="node-empty">
+      <BkException
+        scene="part"
+        type="empty">
+        <template #description>
+          <DbIcon type="attention" />
+          <span>{{ t('请先返回列表选择要替换的节点 IP') }}</span>
+        </template>
+      </BkException>
+    </div>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { InfoBox } from 'bkui-vue';
+  import type { ComponentExposed } from 'vue-component-type-helpers'
+  import { useI18n } from 'vue-i18n';
+
+  import DorisModel from '@services/model/doris/doris';
+  import DorisNodeModel from '@services/model/doris/doris-node';
+  import { createTicket } from '@services/source/ticket';
+  import type { HostDetails } from '@services/types';
+
+  import { useTicketMessage } from '@hooks';
+
+  import { useGlobalBizs } from '@stores';
+
+  import {
+    ClusterTypes,
+    TicketTypes
+  } from '@common/const';
+
+  import HostReplace, {
+    type TReplaceNode,
+  } from '@components/cluster-common/host-replace/Index.vue';
+
+  import { messageError } from '@utils';
+
+  type ReplaceNode = TReplaceNode<DorisNodeModel>
+
+  interface Props {
+    data: DorisModel,
+    nodeList: ReplaceNode['nodeList']
+  }
+
+  interface Emits {
+    (e: 'change'): void,
+    (e: 'removeNode', bkHostId: number): void
+  }
+
+  interface Exposes {
+    submit: () => Promise<any>,
+    cancel: () => Promise<any>,
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const makeMapByHostId = (hostList: ReplaceNode['hostList']) =>  hostList.reduce((result, item) => ({
+    ...result,
+    [item.host_id]: true,
+  }), {} as Record<number, boolean>);
+
+  const generateNodeInfo = (values: Pick<ReplaceNode, 'role' | 'specMachineType'>): ReplaceNode => ({
+    ...values,
+    clusterId: props.data.id,
+    nodeList: [],
+    hostList: [],
+    specClusterType: ClusterTypes.DORIS,
+    resourceSpec: {
+      spec_id: 0,
+      count: 0,
+    },
+  })
+
+  const { currentBizId } = useGlobalBizs();
+  const { t } = useI18n();
+  const ticketMessage = useTicketMessage();
+
+  const hotRef = ref<ComponentExposed<typeof HostReplace>>();
+  const coldRef = ref<ComponentExposed<typeof HostReplace>>();
+  const observerRef = ref<ComponentExposed<typeof HostReplace>>();
+  const followerRef = ref<ComponentExposed<typeof HostReplace>>();
+  const ipSource = ref('resource_pool');
+
+  const nodeInfoMap = reactive<Record<string, ReplaceNode>>({
+    hot: generateNodeInfo({
+      role: 'doris_backend_hot',
+      specMachineType: 'doris_backend',
+    }),
+    cold: generateNodeInfo({
+      role: 'doris_backend_cold',
+      specMachineType: 'doris_backend',
+    }),
+    observer: generateNodeInfo({
+      role: 'doris_observer',
+      specMachineType: 'doris_observer',
+    }),
+    follower: generateNodeInfo({
+      role: 'doris_follower',
+      specMachineType: 'doris_follower',
+    }),
+  });
+
+  const isEmpty = computed(() => {
+    const {
+      hot,
+      cold,
+      observer,
+      follower
+    } = nodeInfoMap;
+    return hot.nodeList.length < 1
+      && cold.nodeList.length < 1
+      && observer.nodeList.length < 1
+      && follower.nodeList.length < 1;
+  });
+
+  watch(() => props.nodeList, () => {
+    const hotList: ReplaceNode['nodeList'] = [];
+    const coldList: ReplaceNode['nodeList'] = [];
+    const observerList: ReplaceNode['nodeList'] = [];
+    const followerList: ReplaceNode['nodeList'] = [];
+
+    props.nodeList.forEach((nodeItem) => {
+      if (nodeItem.isHot) {
+        hotList.push(nodeItem);
+      } else if (nodeItem.isCold) {
+        coldList.push(nodeItem);
+      } else if (nodeItem.isObserver) {
+        observerList.push(nodeItem);
+      } else if (nodeItem.isFollower) {
+        followerList.push(nodeItem);
+      }
+    });
+
+    nodeInfoMap.hot.nodeList = hotList;
+    nodeInfoMap.cold.nodeList = coldList;
+    nodeInfoMap.observer.nodeList = observerList;
+    nodeInfoMap.follower.nodeList = followerList;
+  }, {
+    immediate: true,
+  });
+
+  // 主机节点互斥
+  const disableHostMethod = (data: HostDetails, mutexNodeTypes: ('follower' | 'observer' | 'hot' | 'cold')[]) => {
+    const tipMap = {
+      'follower': t('主机已被Follower节点使用'),
+      'observer': t('主机已被Observer节点使用'),
+      'hot': t('主机已被热节点使用'),
+      'cold': t('主机已被冷节点使用')
+    }
+
+    for (const mutexNodeType of mutexNodeTypes) {
+      const hostMap = makeMapByHostId(nodeInfoMap[mutexNodeType].hostList);
+      if (hostMap[data.host_id]) {
+        return tipMap[mutexNodeType];
+      }
+    }
+    return false
+  }
+
+  const handleRemoveNode = (node: ReplaceNode['nodeList'][0]) => {
+    emits('removeNode', node.bk_host_id);
+  };
+
+  defineExpose<Exposes>({
+    submit() {
+      return new Promise((resolve, reject) => {
+        if (isEmpty.value) {
+          messageError(t('至少替换一种节点类型'));
+          return reject(t('至少替换一种节点类型'));
+        }
+
+        Promise.all([
+          hotRef.value!.getValue(),
+          coldRef.value!.getValue(),
+          observerRef.value!.getValue(),
+          followerRef.value!.getValue()
+        ]).then(([hotValue, coldValue, observerValue, followerValue]) => {
+          const isEmptyValue = () => {
+            if (ipSource.value === 'manual_input') {
+              return hotValue.new_nodes.length
+                + coldValue.new_nodes.length
+                + observerValue.new_nodes.length
+                + followerValue.new_nodes.length < 1;
+            }
+
+            return !((hotValue.resource_spec.spec_id > 0 && hotValue.resource_spec.count > 0)
+              || (coldValue.resource_spec.spec_id > 0 && coldValue.resource_spec.count > 0)
+              || (observerValue.resource_spec.spec_id > 0 && observerValue.resource_spec.count > 0)
+              || (followerValue.resource_spec.spec_id > 0 && followerValue.resource_spec.count > 0));
+          };
+
+          if (isEmptyValue()) {
+            messageError(t('替换节点不能为空'));
+            return reject();
+          }
+
+          const getReplaceNodeNums = () => {
+            if (ipSource.value === 'manual_input') {
+              return Object.values(nodeInfoMap).reduce((result, nodeData) => result + nodeData.hostList.length, 0);
+            }
+            return Object.values(nodeInfoMap).reduce((result, nodeData) => {
+              if (nodeData.resourceSpec.spec_id > 0) {
+                return result + nodeData.nodeList.length;
+              }
+              return result;
+            }, 0);
+          };
+
+          const subTitle = (
+            <div style="background-color: #F5F7FA; padding: 8px 16px;">
+              <div class='tips-item'>
+                {t('集群')} :
+                <span
+                  style="color: #313238"
+                  class="ml-8">
+                  {props.data.cluster_name}
+                </span>
+              </div>
+              <div class='mt-4'>{t('替换后原节点 IP 将不在可用，资源将会被释放')}</div>
+            </div>
+          )
+
+          InfoBox({
+            title: t('确认替换n台节点IP', { n: getReplaceNodeNums() }),
+            subTitle,
+            confirmText: t('确认'),
+            cancelText: t('取消'),
+            headerAlign: 'center',
+            contentAlign: 'left',
+            footerAlign: 'center',
+            extCls: 'doris-replace-modal',
+            onClose: () => reject(),
+            onConfirm: () => {
+              const nodeData = {};
+              if (ipSource.value === 'manual_input') {
+                Object.assign(nodeData, {
+                  new_nodes: {
+                    hot: hotValue.new_nodes,
+                    cold: coldValue.new_nodes,
+                    observer: observerValue.new_nodes,
+                    follower: followerValue.new_nodes
+                  },
+                });
+              } else {
+                Object.assign(nodeData, {
+                  resource_spec: {
+                    hot: hotValue.resource_spec,
+                    cold: coldValue.resource_spec,
+                    observer: observerValue.resource_spec,
+                    follower: followerValue.resource_spec
+                  },
+                });
+              }
+              createTicket({
+                ticket_type: TicketTypes.DORIS_REPLACE,
+                bk_biz_id: currentBizId,
+                details: {
+                  cluster_id: props.data.id,
+                  ip_source: ipSource.value,
+                  old_nodes: {
+                    hot: hotValue.old_nodes,
+                    cold: coldValue.old_nodes,
+                    observer: observerValue.old_nodes,
+                    follower: followerValue.old_nodes
+                  },
+                  ...nodeData,
+                },
+              })
+                .then((data) => {
+                  ticketMessage(data.id);
+                  emits('change');
+                  resolve('success');
+                })
+                .catch(() => {
+                  reject();
+                });
+            },
+          });
+        }, () => reject('error'));
+      });
+    },
+    cancel() {
+      return Promise.resolve();
+    },
+  });
+</script>
+
+<style lang="less">
+  .doris-replace-modal {
+    .bk-modal-content div {
+      font-size: 14px;
+    }
+
+    .tips-item {
+      padding: 2px 0;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .doris-cluster-replace-box {
+    padding: 18px 43px 18px 37px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #63656e;
+
+    .ip-srouce-box {
+      display: flex;
+      margin-bottom: 16px;
+
+      .bk-radio-button {
+        flex: 1;
+        background: #fff;
+      }
+    }
+
+    .replace-item {
+      & ~ .replace-item {
+        margin-top: 24px;
+      }
+
+      .item-label {
+        margin-bottom: 6px;
+        font-weight: bold;
+        color: #313238;
+      }
+    }
+
+    .node-empty {
+      height: calc(100vh - 58px);
+      padding-top: 168px;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/doris-manage/common/shrink/Index.vue b/dbm-ui/frontend/src/views/doris-manage/common/shrink/Index.vue
new file mode 100644
index 000000000..7e0a03e76
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/common/shrink/Index.vue
@@ -0,0 +1,433 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <BkLoading
+    class="doris-cluster-shrink-box"
+    :loading="isLoading">
+    <BkAlert
+      class="mb16"
+      theme="warning"
+      :title="t('至少缩容一种类型')" />
+    <div class="box-wrapper">
+      <NodeStatusList
+        ref="nodeStatusListRef"
+        v-model="nodeType"
+        :list="nodeStatusList"
+        :node-info="nodeInfoMap" />
+      <div class="node-panel">
+        <template v-if="nodeType === 'observer'">
+          <DorisObserverHostShrink
+            v-if="!isLoading"
+            :key="nodeType"
+            :data="nodeInfoMap[nodeType]"
+            @change="handleNodeHostChange"
+            @target-disk-change="handleTargetDiskChange" />
+        </template>
+        <template v-else>
+          <HostShrink
+            v-if="!isLoading"
+            :key="nodeType"
+            :data="nodeInfoMap[nodeType]"
+            @change="handleNodeHostChange"
+            @target-disk-change="handleTargetDiskChange" />
+        </template>
+      </div>
+    </div>
+  </BkLoading>
+</template>
+
+<script setup lang="tsx">
+  import { InfoBox } from 'bkui-vue';
+  import type { ComponentExposed } from 'vue-component-type-helpers'
+  import { useI18n } from 'vue-i18n';
+
+  import type DorisModel from '@services/model/doris/doris';
+  import type DorisNodeModel from '@services/model/doris/doris-node';
+  import { getDorisNodeList } from '@services/source/doris';
+  import { createTicket } from '@services/source/ticket';
+
+  import { useTicketMessage } from '@hooks';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { TicketTypes } from '@common/const';
+
+  import DorisObserverHostShrink from '@components/cluster-common/doris-observer-host-shrink/Index.vue'
+  import HostShrink, {
+    type TShrinkNode,
+  } from '@components/cluster-common/host-shrink/Index.vue';
+  import NodeStatusList from '@components/cluster-common/host-shrink/NodeStatusList.vue';
+
+  import { messageError } from '@utils';
+
+  type TNodeInfo = TShrinkNode<DorisNodeModel>
+
+  interface Props {
+    data: DorisModel,
+    nodeList?: TNodeInfo['nodeList']
+  }
+
+  interface Emits {
+    (e: 'change'): void
+  }
+
+  interface Exposes {
+    submit: () => Promise<any>
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    nodeList: () => [],
+  });
+  const emits = defineEmits<Emits>();
+
+  const generateNodeInfo = (values: Pick<TNodeInfo, 'label' | 'minHost' | 'tagText'>): TNodeInfo => ({
+    ...values,
+    originalNodeList: [],
+    nodeList: [],
+    totalDisk: 0,
+    targetDisk: 0,
+    shrinkDisk: 0,
+  })
+
+  const { t } = useI18n();
+  const globalBizsStore = useGlobalBizs();
+  const ticketMessage = useTicketMessage();
+
+  const bizId = globalBizsStore.currentBizId;
+
+  const nodeStatusList = [
+    {
+      key: 'cold',
+      label: t('冷节点'),
+    },
+    {
+      key: 'hot',
+      label: t('热节点'),
+    },
+    {
+      key: 'observer',
+      label: 'Observer',
+    },
+  ];
+
+  const nodeStatusListRef = ref<ComponentExposed<typeof NodeStatusList>>();
+
+  const nodeInfoMap = reactive<Record<string, TNodeInfo>>({
+    hot: generateNodeInfo({
+      label: t('热节点'),
+      minHost: 0,
+      tagText: t('存储层')
+    }),
+    cold: generateNodeInfo({
+      label: t('冷节点'),
+      minHost: 0,
+      tagText: t('存储层')
+    }),
+    observer: generateNodeInfo({
+      label: 'Observer',
+      minHost: 0,
+      tagText: t('接入层')
+    }),
+  });
+
+  const isLoading = ref(false);
+  const nodeType = ref('cold');
+
+  const fetchListNode = () => {
+    const hotOriginalNodeList: TNodeInfo['nodeList'] = [];
+    const coldOriginalNodeList: TNodeInfo['nodeList'] = [];
+    const observerOriginalNodeList: TNodeInfo['nodeList'] = [];
+
+    isLoading.value = true;
+    getDorisNodeList({
+      bk_biz_id: globalBizsStore.currentBizId,
+      cluster_id: props.data.id,
+      no_limit: 1,
+    })
+      .then((data) => {
+        let hotDiskTotal = 0;
+        let coldDiskTotal = 0;
+        let observerDiskTotal = 0;
+
+        data.results.forEach((nodeItem) => {
+          if (nodeItem.isHot) {
+            hotDiskTotal += nodeItem.disk;
+            hotOriginalNodeList.push(nodeItem);
+          } else if (nodeItem.isCold) {
+            coldDiskTotal += nodeItem.disk;
+            coldOriginalNodeList.push(nodeItem);
+          } else if (nodeItem.isObserver) {
+            observerDiskTotal += nodeItem.disk;
+            observerOriginalNodeList.push(nodeItem);
+          }
+        });
+
+        nodeInfoMap.hot.originalNodeList = hotOriginalNodeList;
+        nodeInfoMap.hot.totalDisk = hotDiskTotal;
+        if (nodeInfoMap.hot.shrinkDisk) {
+          nodeInfoMap.hot.targetDisk = hotDiskTotal - nodeInfoMap.hot.shrinkDisk;
+        }
+
+        nodeInfoMap.cold.originalNodeList = coldOriginalNodeList;
+        nodeInfoMap.cold.totalDisk = coldDiskTotal;
+        if (nodeInfoMap.cold.shrinkDisk) {
+          nodeInfoMap.cold.targetDisk = coldDiskTotal - nodeInfoMap.cold.shrinkDisk;
+        }
+
+        nodeInfoMap.observer.originalNodeList = observerOriginalNodeList;
+        nodeInfoMap.observer.totalDisk = observerDiskTotal;
+        if (nodeInfoMap.observer.shrinkDisk) {
+          nodeInfoMap.observer.targetDisk = observerDiskTotal - nodeInfoMap.observer.shrinkDisk;
+        }
+      })
+      .finally(() => {
+        isLoading.value = false;
+      });
+  };
+
+  fetchListNode();
+
+  // 默认选中的缩容节点
+  watch(() => props.nodeList, () => {
+    const hotNodeList: TNodeInfo['nodeList'] = [];
+    const coldNodeList: TNodeInfo['nodeList'] = [];
+    const observerNodeList: TNodeInfo['nodeList'] = [];
+
+    let hotShrinkDisk = 0;
+    let coldShrinkDisk = 0;
+    let observerShrinkDisk = 0;
+
+    props.nodeList.forEach((nodeItem) => {
+      if (nodeItem.isHot) {
+        hotShrinkDisk += nodeItem.disk;
+        hotNodeList.push(nodeItem);
+      } else if (nodeItem.isCold) {
+        coldShrinkDisk += nodeItem.disk;
+        coldNodeList.push(nodeItem);
+      } else if (nodeItem.isObserver) {
+        observerShrinkDisk += nodeItem.disk;
+        observerNodeList.push(nodeItem);
+      }
+    });
+    nodeInfoMap.hot.nodeList = hotNodeList;
+    nodeInfoMap.hot.shrinkDisk = hotShrinkDisk;
+    nodeInfoMap.cold.nodeList = coldNodeList;
+    nodeInfoMap.cold.shrinkDisk = coldShrinkDisk;
+    nodeInfoMap.observer.nodeList = observerNodeList;
+    nodeInfoMap.observer.shrinkDisk = observerShrinkDisk;
+  }, {
+    immediate: true,
+  });
+
+  // 容量修改
+  const handleTargetDiskChange = (value: number) => {
+    nodeInfoMap[nodeType.value].targetDisk = value;
+  };
+
+  // 缩容节点主机修改
+  const handleNodeHostChange = (nodeList: TNodeInfo['nodeList']) => {
+    const shrinkDisk = nodeList.reduce((result, hostItem) => result + hostItem.disk, 0);
+    nodeInfoMap[nodeType.value].nodeList = nodeList;
+    nodeInfoMap[nodeType.value].shrinkDisk = shrinkDisk;
+
+    if (nodeInfoMap.hot.nodeList.length === nodeInfoMap.hot.originalNodeList.length) {
+      // 热节点全缩容后，限制冷节点至少留2台
+      nodeInfoMap.cold.minHost = 2;
+      if (nodeInfoMap.cold.originalNodeList.length === 2) {
+        // 冷节点只有2台并且已经不可编辑状态，需要初始化已填写的目标容量值
+        nodeInfoMap.cold.targetDisk = 0;
+      }
+    } else if (nodeInfoMap.cold.nodeList.length === nodeInfoMap.cold.originalNodeList.length) {
+      // 冷节点全缩容后，限制热节点至少留2台
+      nodeInfoMap.hot.minHost = 2;
+      if (nodeInfoMap.hot.originalNodeList.length === 2) {
+        // 热节点只有2台并且已经不可编辑状态，需要初始化已填写的目标容量值
+        nodeInfoMap.hot.targetDisk = 0;
+      }
+    } else {
+      // 取消限制
+      nodeInfoMap.cold.minHost = 0;
+      nodeInfoMap.hot.minHost = 0;
+    }
+  };
+
+  defineExpose<Exposes>({
+    submit() {
+      return new Promise((resolve, reject) => {
+        if (!nodeStatusListRef.value!.validate()) {
+          messageError(t('至少缩容一种类型'));
+          return reject();
+        }
+
+        const renderSubTitle = () => {
+          const renderDiskTips = () => {
+            const isNotMatch = Object.values(nodeInfoMap)
+              .some(nodeData => nodeData.totalDisk + nodeData.shrinkDisk !== nodeData.targetDisk);
+            if (isNotMatch) {
+              return (
+                <div style="font-size: 14px">
+                  <div>{t('目标容量与所选 IP 容量不一致，确认提交？')}</div>
+                  <div class="mb-8">{t('继续提交将按照手动选择的 IP 容量进行')}</div>
+                </div>
+              );
+            }
+            return null;
+          };
+          const renderShrinkDiskTips = () => Object.entries(nodeInfoMap).map(([nodeType, nodeData]) => {
+            if (nodeData.shrinkDisk) {
+              if (nodeType === 'observer') {
+                return (
+                  <div class='tips-item'>
+                    {t('name容量从n台缩容至n台', {
+                      name: nodeData.label,
+                      hostNumBefore: nodeData.originalNodeList.length,
+                      hostNumAfter: nodeData.originalNodeList.length - nodeData.nodeList.length,
+                    })}
+                  </div>
+                );
+              }
+              return (
+                <div class='tips-item'>
+                  {t('name容量从nG缩容至nG', {
+                    name: nodeData.label,
+                    totalDisk: nodeData.totalDisk,
+                    targetDisk: nodeData.totalDisk - nodeData.shrinkDisk,
+                  })}
+                </div>
+              );
+            }
+            return null;
+          });
+
+          return (
+            <div>
+              {renderDiskTips()}
+              <div style="background-color: #F5F7FA; padding: 8px 16px;">
+                <div class='tips-item'>
+                  {t('集群')} :
+                  <span
+                    style="color: #313238"
+                    class="ml-8">
+                    {props.data.cluster_name}
+                  </span>
+                </div>
+                {renderShrinkDiskTips()}
+              </div>
+            </div>
+          );
+        };
+
+        InfoBox({
+          title: t('确认缩容【name】集群', { name: props.data.cluster_name }),
+          subTitle: renderSubTitle,
+          confirmText: t('确认'),
+          cancelText: t('取消'),
+          headerAlign: 'center',
+          contentAlign: 'left',
+          footerAlign: 'center',
+          extCls: 'doris-shrink-modal',
+          onClose: () => reject(),
+          onConfirm: () => {
+            const fomatHost = (nodeList: TNodeInfo['nodeList'] = []) => nodeList.map(hostItem => ({
+              ip: hostItem.ip,
+              bk_cloud_id: hostItem.bk_cloud_id,
+              bk_host_id: hostItem.bk_host_id,
+              bk_biz_id: bizId,
+            }));
+
+            const generateExtInfo = () => Object.entries(nodeInfoMap).reduce((results, [key, item]) => {
+              const obj = {
+                host_list: item.nodeList.map(item => ({
+                  ip: item.ip,
+                  bk_disk: item.disk,
+                  alive: item.status,
+                })),
+                total_hosts: item.originalNodeList.length,
+                total_disk: item.totalDisk,
+                target_disk: item.targetDisk,
+                shrink_disk: item.shrinkDisk,
+              };
+              Object.assign(results, {
+                [key]: obj,
+              });
+              return results;
+            }, {} as Record<string, TNodeInfo>);
+
+            createTicket({
+              ticket_type: TicketTypes.DORIS_SHRINK,
+              bk_biz_id: bizId,
+              details: {
+                cluster_id: props.data.id,
+                ip_source: 'manual_input',
+                nodes: {
+                  hot: fomatHost(nodeInfoMap.hot.nodeList),
+                  cold: fomatHost(nodeInfoMap.cold.nodeList),
+                  observer: fomatHost(nodeInfoMap.observer.nodeList),
+                },
+                ext_info: generateExtInfo(),
+              },
+            }).then((data) => {
+              ticketMessage(data.id);
+              resolve('success');
+              emits('change');
+            })
+              .catch(() => {
+                reject();
+              });
+          },
+        });
+      });
+    },
+  });
+</script>
+
+<style lang="less">
+  .doris-shrink-modal {
+    .bk-modal-content div {
+      font-size: 14px;
+    }
+
+    .tips-item {
+      padding: 2px 0;
+    }
+  }
+</style>
+<style lang="less">
+  .doris-cluster-shrink-box {
+    padding: 18px 43px 18px 37px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #63656e;
+    background: #f5f7fa;
+
+    .box-wrapper {
+      display: flex;
+      background: #fff;
+      border-radius: 2px;
+      box-shadow: 0 2px 4px 0 #1919290d;
+
+      .node-panel {
+        flex: 1;
+      }
+    }
+
+    .item-label {
+      margin-top: 24px;
+      margin-bottom: 6px;
+      font-weight: bold;
+      line-height: 20px;
+      color: #313238;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/doris-manage/list/Index.vue b/dbm-ui/frontend/src/views/doris-manage/list/Index.vue
new file mode 100644
index 000000000..d5760dfc8
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/list/Index.vue
@@ -0,0 +1,38 @@
+<!--
+ * 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>
+  <StretchLayout
+    :min-left-width="368"
+    name="esClusterList">
+    <template #list>
+      <List v-model:clusterId="clusterId" />
+    </template>
+    <template
+      v-if="clusterId"
+      #right>
+      <Detail :cluster-id="clusterId" />
+    </template>
+  </StretchLayout>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import StretchLayout from '@components/stretch-layout/StretchLayout.vue';
+
+  import Detail from './components/detail/Index.vue';
+  import List from './components/list/Index.vue';
+
+  const clusterId = ref(0);
+</script>
diff --git a/dbm-ui/frontend/src/views/doris-manage/list/components/detail/Index.vue b/dbm-ui/frontend/src/views/doris-manage/list/components/detail/Index.vue
new file mode 100644
index 000000000..8f5507fc6
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/list/components/detail/Index.vue
@@ -0,0 +1,162 @@
+<!--
+ * 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
+    v-bkloading="{ loading: isLoading }"
+    class="doris-detail-page">
+    <BkTab
+      v-model:active="activePanelKey"
+      class="detail-tab"
+      type="card-tab">
+      <BkTabPanel
+        :label="t('集群拓扑')"
+        name="topo" />
+      <BkTabPanel
+        :label="t('节点列表')"
+        name="nodeList" />
+      <BkTabPanel
+        :label="t('基本信息')"
+        name="baseInfo" />
+      <BkTabPanel
+        :label="t('变更记录')"
+        name="record" />
+      <BkTabPanel
+        v-for="item in monitorPanelList"
+        :key="item.name"
+        :label="item.label"
+        :name="item.name" />
+    </BkTab>
+    <div class="content-wrapper">
+      <ClusterTopo
+        v-if="activePanelKey === 'topo'"
+        :id="clusterId"
+        cluster-type="doris"
+        db-type="bigdata"
+        :node-cofig="{ startX: 400 }" />
+      <NodeList
+        v-if="activePanelKey === 'nodeList'"
+        :key="clusterId"
+        :cluster-id="clusterId" />
+      <BaseInfo
+        v-if="activePanelKey === 'baseInfo' && clusterData"
+        :data="clusterData" />
+      <ClusterEventChange
+        v-if="activePanelKey === 'record'"
+        :id="clusterId" />
+      <MonitorDashboard
+        v-if="activePanelKey === activePanel?.name"
+        :url="activePanel?.link" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getDorisDetail } from '@services/source/doris';
+  import { getMonitorUrls } from '@services/source/monitorGrafana';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ClusterTypes } from '@common/const';
+
+  import ClusterTopo from '@components/cluster-details/ClusterTopo.vue';
+  import ClusterEventChange from '@components/cluster-event-change/EventChange.vue';
+  import MonitorDashboard from '@components/cluster-monitor/MonitorDashboard.vue';
+
+  import BaseInfo from './components/BaseInfo.vue';
+  import NodeList from './components/node-list/Index.vue';
+
+  interface Props {
+    clusterId: number;
+  }
+
+  interface PanelItem {
+    label: string;
+    name: string;
+    link: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+  const { currentBizId } = useGlobalBizs();
+
+  const activePanelKey = ref('topo');
+  const monitorPanelList = ref<PanelItem[]>([]);
+
+  const activePanel = computed(() => {
+    const targetPanel = monitorPanelList.value.find((item) => item.name === activePanelKey.value);
+    return targetPanel;
+  });
+
+  const {
+    loading: isLoading,
+    data: clusterData,
+    run: fetchResourceDetails,
+  } = useRequest(getDorisDetail, {
+    manual: true,
+  });
+
+  const { run: runGetMonitorUrls } = useRequest(getMonitorUrls, {
+    manual: true,
+    onSuccess(res) {
+      if (res.urls.length > 0) {
+        monitorPanelList.value = res.urls.map((item) => ({
+          label: item.view,
+          name: item.view,
+          link: item.url,
+        }));
+      }
+    },
+  });
+
+  watch(
+    () => props.clusterId,
+    () => {
+      if (props.clusterId) {
+        fetchResourceDetails({
+          id: props.clusterId,
+        });
+        runGetMonitorUrls({
+          bk_biz_id: currentBizId,
+          cluster_type: ClusterTypes.DORIS,
+          cluster_id: props.clusterId,
+        });
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+</script>
+
+<style lang="less">
+  .doris-detail-page {
+    height: 100%;
+    background: #fff;
+
+    .detail-tab {
+      .bk-tab-content {
+        padding: 0;
+      }
+    }
+
+    .content-wrapper {
+      height: calc(100vh - 168px);
+      padding: 0 24px;
+      overflow: auto;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/doris-manage/list/components/detail/components/BaseInfo.vue b/dbm-ui/frontend/src/views/doris-manage/list/components/detail/components/BaseInfo.vue
new file mode 100644
index 000000000..71a8a3582
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/list/components/detail/components/BaseInfo.vue
@@ -0,0 +1,35 @@
+<!--
+ * 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="cluster-detail-base-info">
+    <RenderBaseInfo :data="data" />
+  </div>
+</template>
+<script setup lang="ts">
+  import DorisModel from '@services/model/doris/doris';
+
+  import RenderBaseInfo from '@components/cluster-common/RenderBaseInfo.vue';
+
+  interface Props {
+    data: DorisModel;
+  }
+
+  defineProps<Props>();
+</script>
+
+<style lang="less" scoped>
+  .cluster-detail-base-info {
+    width: 100%;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/doris-manage/list/components/detail/components/node-list/Index.vue b/dbm-ui/frontend/src/views/doris-manage/list/components/detail/components/node-list/Index.vue
new file mode 100644
index 000000000..55eb4326d
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/list/components/detail/components/node-list/Index.vue
@@ -0,0 +1,725 @@
+<!--
+ * 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="doris-detail-node-list">
+    <div class="action-box">
+      <OperationBtnStatusTips :data="operationData">
+        <AuthButton
+          action-id="es_scale_up"
+          :disabled="operationData?.operationDisabled"
+          :resource="clusterId"
+          theme="primary"
+          @click="handleShowExpansion">
+          {{ t('扩容') }}
+        </AuthButton>
+      </OperationBtnStatusTips>
+      <OperationBtnStatusTips :data="operationData">
+        <span v-bk-tooltips="batchShrinkDisabledInfo.tooltips">
+          <AuthButton
+            action-id="es_shrink"
+            class="ml8"
+            :disabled="batchShrinkDisabledInfo.disabled || operationData?.operationDisabled"
+            :resource="clusterId"
+            @click="handleShowShrink">
+            {{ t('缩容') }}
+          </AuthButton>
+        </span>
+      </OperationBtnStatusTips>
+      <OperationBtnStatusTips :data="operationData">
+        <span
+          v-bk-tooltips="{
+            content: t('请先选中节点'),
+            disabled: !isBatchReplaceDisabeld,
+          }">
+          <AuthButton
+            action-id="es_replace"
+            class="ml8"
+            :disabled="isBatchReplaceDisabeld || operationData?.operationDisabled"
+            :resource="clusterId"
+            @click="handleShowReplace">
+            {{ t('替换') }}
+          </AuthButton>
+        </span>
+      </OperationBtnStatusTips>
+      <BkDropdown
+        class="ml8"
+        @hide="() => (isCopyDropdown = false)"
+        @show="() => (isCopyDropdown = true)">
+        <BkButton>
+          {{ t('复制IP') }}
+          <DbIcon
+            class="action-copy-icon"
+            :class="{
+              'action-copy-icon--avtive': isCopyDropdown,
+            }"
+            type="up-big" />
+        </BkButton>
+        <template #content>
+          <BkDropdownMenu>
+            <BkDropdownItem>
+              <BkButton
+                :disabled="tableData.length === 0"
+                text
+                @click="() => handleCopyIp(tableData)">
+                {{ t('复制全部IP') }}
+              </BkButton>
+            </BkDropdownItem>
+            <BkDropdownItem>
+              <BkButton
+                :disabled="abnormalNodeList.length === 0"
+                text
+                @click="() => handleCopyIp(abnormalNodeList)">
+                {{ t('复制异常IP') }}
+              </BkButton>
+            </BkDropdownItem>
+            <BkDropdownItem>
+              <BkButton
+                :disabled="selectedIdList.length === 0"
+                text
+                @click="() => handleCopyIp(Object.values(checkedNodeMap))">
+                {{ t('复制已选IP') }}
+              </BkButton>
+            </BkDropdownItem>
+          </BkDropdownMenu>
+        </template>
+      </BkDropdown>
+      <DbSearchSelect
+        class="action-box-search-select"
+        :data="searchSelectData"
+        :model-value="searchValue"
+        :placeholder="t('请输入或选择条件搜索')"
+        unique-select
+        :validate-values="validateSearchValues"
+        @change="handleSearchValueChange" />
+    </div>
+    <BkAlert
+      v-if="operationData?.operationStatusText"
+      class="mb16"
+      theme="warning">
+      <I18nT
+        keypath="当前集群有xx暂时不能进行其他操作跳转xx查看进度"
+        tag="div">
+        <span>{{ operationData?.operationStatusText }}</span>
+        <RouterLink
+          target="_blank"
+          :to="{
+            name: 'SelfServiceMyTickets',
+            query: {
+              id: operationData?.operationTicketId,
+            },
+          }">
+          {{ t('我的服务单') }}
+        </RouterLink>
+      </I18nT>
+    </BkAlert>
+    <BkLoading :loading="isLoading">
+      <DbOriginalTable
+        :columns="columns"
+        :data="tableData"
+        :is-anomalies="isAnomalies"
+        :is-searching="!!searchValue.length"
+        :row-class="setRowClass"
+        @clear-search="clearSearchValue"
+        @column-filter="columnFilterChange"
+        @column-sort="columnSortChange"
+        @select="handleSelect"
+        @select-all="handleSelectAll" />
+    </BkLoading>
+    <DbSideslider
+      v-model:is-show="isShowExpandsion"
+      quick-close
+      :title="t('xx扩容【name】', { title: 'Doris', name: operationData?.cluster_name })"
+      :width="960">
+      <ClusterExpansion
+        v-if="operationData"
+        :data="operationData"
+        @change="handleOperationChange" />
+    </DbSideslider>
+    <DbSideslider
+      v-model:is-show="isShowShrink"
+      :title="t('xx缩容【name】', { title: 'Doris', name: operationData?.cluster_name })"
+      :width="960">
+      <ClusterShrink
+        v-if="operationData"
+        :data="operationData"
+        :node-list="operationNodeList"
+        @change="handleOperationChange" />
+    </DbSideslider>
+    <DbSideslider
+      v-model:is-show="isShowReplace"
+      :title="t('xx替换【name】', { title: 'Doris', name: operationData?.cluster_name })"
+      :width="960">
+      <ClusterReplace
+        v-if="operationData"
+        :data="operationData"
+        :node-list="operationNodeList"
+        @change="handleOperationChange" />
+    </DbSideslider>
+    <DbSideslider
+      v-model:is-show="isShowDetail"
+      :show-footer="false"
+      :title="t('节点详情')"
+      :width="960">
+      <BigdataInstanceDetail
+        v-if="operationNodeData"
+        :cluster-id="clusterId"
+        :cluster-type="ClusterTypes.DORIS"
+        :data="operationNodeData"
+        @close="handleClose" />
+    </DbSideslider>
+  </div>
+</template>
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+
+  import DorisModel from '@services/model/doris/doris';
+  import DorisNodeModel from '@services/model/doris/doris-node';
+  import {
+    getDorisDetail,
+    getDorisNodeList,
+  } from '@services/source/doris';
+
+  import {
+    useCopy,
+    useLinkQueryColumnSerach,
+  } from '@hooks';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ClusterTypes } from '@common/const'
+
+  import BigdataInstanceDetail from '@components/bigdata-instance-detail/Index.vue';
+  import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
+  import RenderClusterRole from '@components/cluster-common/RenderRole.vue';
+  import RenderHostStatus from '@components/render-host-status/Index.vue';
+  import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
+
+  import ClusterExpansion from '@views/doris-manage/common/expansion/Index.vue';
+  import ClusterReplace from '@views/doris-manage/common/replace/Index.vue';
+  import ClusterShrink from '@views/doris-manage/common/shrink/Index.vue';
+
+  import { getSearchSelectorParams } from '@utils';
+
+  import { useTimeoutPoll } from '@vueuse/core';
+
+  interface Props {
+    clusterId: number;
+  }
+
+  const props = defineProps<Props>();
+
+  const globalBizsStore = useGlobalBizs();
+  const copy = useCopy();
+  const { t, locale } = useI18n();
+
+  const {
+    searchValue,
+    sortValue,
+    columnCheckedMap,
+    columnFilterChange,
+    columnSortChange,
+    clearSearchValue,
+    validateSearchValues,
+    handleSearchValueChange,
+  } = useLinkQueryColumnSerach(ClusterTypes.ES, [
+    'bk_cloud_id',
+  ], () => fetchNodeList());
+
+  const searchSelectData = [
+    {
+      name: 'IP',
+      id: 'ip',
+      multiple: true,
+    },
+    {
+      name: t('类型'),
+      id: 'node_type',
+      multiple: true,
+      children: [
+        {
+          id: 'doris_backend_hot',
+          name: t('热节点'),
+        },
+        {
+          id: 'doris_backend_cold',
+          name: t('冷节点'),
+        },
+        {
+          id: 'doris_follower',
+          name: 'Follower',
+        },
+        {
+          id: 'doris_observer',
+          name: 'Observer',
+        },
+      ],
+    },
+  ];
+
+  const isAnomalies = ref(false);
+  const isShowReplace = ref(false);
+  const isShowExpandsion = ref(false);
+  const isShowShrink = ref(false);
+  const isShowDetail = ref(false);
+  const isLoading = ref(true);
+  const isCopyDropdown = ref(false);
+  const operationData = shallowRef<DorisModel>();
+  const operationNodeData = shallowRef<DorisNodeModel>();
+  const operationNodeList = shallowRef<Array<DorisNodeModel>>([]);
+  const tableData = shallowRef<DorisNodeModel[]>([]);
+  const checkedNodeMap = shallowRef<Record<number, DorisNodeModel>>({});
+
+  const columns = computed(() => [
+    {
+      width: 60,
+      fixed: 'left',
+      label: () => (
+        <bk-checkbox
+          label={true}
+          model-value={isSelectedAll.value}
+          onChange={handleSelectAll}
+        />
+      ),
+      render: ({ data }: { data: DorisNodeModel }) => (
+        <bk-checkbox
+          label={true}
+          model-value={Boolean(checkedNodeMap.value[data.bk_host_id])}
+          onChange={(value: boolean) => handleSelect(value, data)}
+        />
+        ),
+    },
+    {
+      label: t('节点IP'),
+      field: 'ip',
+      width: 140,
+      showOverflowTooltip: false,
+      render: ({ data }: { data: DorisNodeModel }) => (
+        <TextOverflowLayout>
+          {{
+            default: () => <span>{data.ip}</span>,
+            append: () => (
+              <>
+                {
+                  data.isNew && (
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
+                  )
+                }
+              </>
+            )
+          }}
+        </TextOverflowLayout>
+      ),
+    },
+    {
+      label: t('实例数量'),
+      field: 'node_count',
+      sort: true,
+      width: 120,
+    },
+    {
+      label: t('类型'),
+      field: 'node_type',
+      filter: {
+        list: [
+          {
+            value: 'doris_backend_hot',
+            text: t('热节点'),
+          },
+          {
+            value: 'doris_backend_cold',
+            text: t('冷节点'),
+          },
+          {
+            value: 'doris_follower',
+            text: 'Follower',
+          },
+          {
+            value: 'doris_observer',
+            text: 'Observer',
+          },
+        ],
+        checked: columnCheckedMap.value.node_type,
+      },
+      width: 200,
+      render: ({ data }: { data: DorisNodeModel }) => <RenderClusterRole data={[data.role]} />,
+    },
+    {
+      label: t('Agent状态'),
+      field: 'status',
+      width: 120,
+      render: ({ data }: { data: DorisNodeModel }) => <RenderHostStatus data={data.status} />,
+    },
+    {
+      label: t('部署时间'),
+      field: 'create_at',
+      sort: true,
+      render: ({ data }: { data: DorisNodeModel }) => <span>{data.createAtDisplay}</span>,
+    },
+    {
+      label: t('操作'),
+      width: isCN.value ? 200 : 260,
+      fixed: 'right',
+      render: ({ data }: { data: DorisNodeModel }) => {
+        const shrinkDisableTooltips = checkNodeShrinkDisable(data);
+        return (
+          <>
+            <OperationBtnStatusTips data={operationData.value}>
+              <span v-bk-tooltips={shrinkDisableTooltips.tooltips}>
+                <auth-button
+                  text
+                  theme="primary"
+                  action-id="doris_shrink"
+                  permission={data.permission.doris_shrink}
+                  resource={data.bk_host_id}
+                  disabled={
+                    shrinkDisableTooltips.disabled
+                    || operationData.value?.operationDisabled
+                  }
+                  onClick={() => handleShrinkOne(data)}>
+                  {t('缩容')}
+                </auth-button>
+              </span>
+            </OperationBtnStatusTips>
+            <OperationBtnStatusTips data={operationData.value}>
+              <auth-button
+                text
+                theme="primary"
+                action-id="doris_replace"
+                permission={data.permission.doris_replace}
+                resource={data.bk_host_id}
+                class="ml16"
+                disabled={operationData.value?.operationDisabled}
+                onClick={() => handleReplaceOne(data)}>
+                {t('替换')}
+              </auth-button>
+            </OperationBtnStatusTips>
+            <OperationBtnStatusTips data={operationData.value}>
+              <auth-button
+                text
+                theme="primary"
+                action-id="doris_reboot"
+                permission={data.permission.doris_reboot}
+                resource={data.bk_host_id}
+                class="ml16"
+                disabled={operationData.value?.operationDisabled}
+                onClick={() => handleShowDetail(data)}>
+                {t('重启实例')}
+              </auth-button>
+            </OperationBtnStatusTips>
+          </>
+        );
+      },
+    },
+  ]);
+
+  const isCN = computed(() => locale.value === 'zh-cn');
+  const isSelectedAll = computed(() => tableData.value.length > 0
+    && Object.keys(checkedNodeMap.value).length >= tableData.value.length);
+
+  const batchShrinkDisabledInfo = computed(() => {
+    // 1.Follower 为必须，3个节点, 缩容
+    // 2.Observer 非必选，若选至少需要2台
+    // 3.冷/热 数据节点必选1种以上，每个角色至少需要2台
+
+    const options = {
+      disabled: false,
+      tooltips: {
+        disabled: true,
+        content: '',
+      },
+    };
+    const selectList = Object.values(checkedNodeMap.value);
+    if (selectList.length < 1) {
+      options.disabled = true;
+      options.tooltips.disabled = false;
+      options.tooltips.content = t('请先选中节点');
+      return options;
+    }
+    if (selectList.some(item => item.isFollower)) {
+      options.disabled = true;
+      options.tooltips.disabled = false;
+      options.tooltips.content = t('Follower节点不支持缩容');
+      return options;
+    }
+
+    let observerNumTotal = 0;
+    let observerNum = 0
+    let hotNodeNumTotal = 0;
+    let hotNodeNum = 0;
+    let coldNodeNumTotal = 0;
+    let coldNodeNum = 0;
+    tableData.value.forEach((nodeItem) => {
+      if (nodeItem.isObserver) {
+        observerNumTotal = observerNumTotal + 1;
+      } else if (nodeItem.isHot) {
+        hotNodeNumTotal = hotNodeNumTotal + 1;
+      } else if (nodeItem.isCold) {
+        coldNodeNumTotal = coldNodeNumTotal + 1;
+      }
+      if (checkedNodeMap.value[nodeItem.bk_host_id]) {
+        return;
+      }
+      if (nodeItem.isObserver) {
+        observerNum = observerNum + 1;
+      } else if (nodeItem.isHot) {
+        hotNodeNum = hotNodeNum + 1;
+      } else if (nodeItem.isCold) {
+        coldNodeNum = coldNodeNum + 1;
+      }
+    });
+
+    if (observerNumTotal > 0 && (observerNumTotal - observerNum === 1)) {
+      options.disabled = true;
+      options.tooltips.disabled = false;
+      options.tooltips.content = t('Observer类型节点若存在至少保留两台');
+    } else if ((hotNodeNumTotal === 0 && coldNodeNum === 1) || (coldNodeNumTotal === 0 && hotNodeNum === 1)) {
+      options.disabled = true;
+      options.tooltips.disabled = false;
+      options.tooltips.content = t('冷/热 数据节点必选 1 种以上，每个角色至少需要 2 台');
+    }
+
+    return options;
+  });
+
+  const isBatchReplaceDisabeld = computed(() => Object.keys(checkedNodeMap.value).length < 1);
+  const selectedIdList = computed(() => Object.values(checkedNodeMap.value).map(item => item.ip));
+  const abnormalNodeList = computed(() => tableData.value.filter(item => item.isAbnormal));
+
+  const fetchClusterDetail = () => {
+    // 获取集群详情
+    getDorisDetail({
+      id: props.clusterId,
+    })
+      .then((data) => {
+        operationData.value = data;
+      });
+  };
+
+  const {
+    pause: pauseFetchClusterDetail,
+    resume: resumeFetchClusterDetail,
+  } = useTimeoutPoll(fetchClusterDetail, 2000, {
+    immediate: true,
+  });
+
+  const fetchNodeList = () => {
+    isLoading.value = true;
+    const extraParams = {
+      ...getSearchSelectorParams(searchValue.value),
+      ...sortValue,
+    };
+    getDorisNodeList({
+      bk_biz_id: globalBizsStore.currentBizId,
+      cluster_id: props.clusterId,
+      no_limit: 1,
+      ...extraParams,
+    })
+      .then((data) => {
+        tableData.value = data.results;
+        isAnomalies.value = false;
+      })
+      .catch(() => {
+        tableData.value = [];
+        isAnomalies.value = true;
+      })
+      .finally(() => {
+        isLoading.value = false;
+      });
+  };
+
+  watch(() => props.clusterId, () => {
+    pauseFetchClusterDetail();
+    resumeFetchClusterDetail();
+    fetchNodeList();
+  }, {
+    immediate: true,
+  });
+
+  const setRowClass = (data: DorisNodeModel) => (data.isNew ? 'is-new-row' : '');
+
+  const checkNodeShrinkDisable = (node: DorisNodeModel) => {
+    const options = {
+      disabled: false,
+      tooltips: {
+        disabled: true,
+        content: '',
+      },
+    };
+
+    // follower 节点不支持缩容
+    if (node.isFollower) {
+      options.disabled = true;
+      options.tooltips.disabled = false;
+      options.tooltips.content = t('节点类型不支持缩容');
+    } else {
+      // Observer 若存在至少需要2台
+      // 冷/热 数据节点必选1种以上，每个角色至少需要2台
+      let observerNodeNum = 0;
+      let hotNodeNum = 0;
+      let coldNodeNum = 0;
+      tableData.value.forEach((nodeItem) => {
+        if (nodeItem.isObserver) {
+          observerNodeNum = observerNodeNum + 1;
+        } else if (nodeItem.isHot) {
+          hotNodeNum = hotNodeNum + 1;
+        } else if (nodeItem.isCold) {
+          coldNodeNum = coldNodeNum + 1;
+        }
+      });
+
+      if (node.isObserver && observerNodeNum === 2) {
+        options.disabled = true;
+        options.tooltips.disabled = false;
+        options.tooltips.content = t('Follower类型节点若存在至少保留两台');
+      } else if (node.isHot && hotNodeNum > 0  && coldNodeNum === 0) {
+        options.disabled = true;
+        options.tooltips.disabled = false;
+        options.tooltips.content = t('冷/热 数据节点必选 1 种以上，每个角色至少需要 2 台');
+      } else if (node.isCold && coldNodeNum > 0  && hotNodeNum === 0) {
+        options.disabled = true;
+        options.tooltips.disabled = false;
+        options.tooltips.content = t('冷/热 数据节点必选 1 种以上，每个角色至少需要 2 台');
+      }
+    }
+
+    return options;
+  };
+
+  const handleOperationChange = () => {
+    fetchNodeList();
+    checkedNodeMap.value = {};
+  };
+
+  // 扩容
+  const handleShowExpansion = () => {
+    isShowExpandsion.value = true;
+  };
+
+  // 复制IP
+  const handleCopyIp = (dataList: DorisNodeModel[]) => {
+    const ipList = dataList.map(nodeItem => nodeItem.ip);
+    copy(ipList.join('\n'));
+  };
+
+  const handleSelect = (checked: boolean, data: DorisNodeModel) => {
+    const checkedMap = { ...checkedNodeMap.value };
+    if (checked) {
+      checkedMap[data.bk_host_id] = new DorisNodeModel(data);
+    } else {
+      delete checkedMap[data.bk_host_id];
+    }
+
+    checkedNodeMap.value = checkedMap;
+  };
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      checkedNodeMap.value = tableData.value.reduce((result, nodeData) => ({
+        ...result,
+        [nodeData.bk_host_id]: nodeData,
+      }), {} as Record<number, DorisNodeModel>);
+    } else {
+      checkedNodeMap.value = {};
+    }
+  };
+
+  // 批量缩容
+  const handleShowShrink = () => {
+    operationNodeList.value = Object.values(checkedNodeMap.value);
+    isShowShrink.value = true;
+  };
+
+  // 批量扩容
+  const handleShowReplace = () => {
+    operationNodeList.value = Object.values(checkedNodeMap.value);
+    isShowReplace.value = true;
+  };
+  const handleShrinkOne = (data: DorisNodeModel) => {
+    operationNodeList.value = [data];
+    isShowShrink.value = true;
+  };
+
+  const handleReplaceOne = (data: DorisNodeModel) => {
+    operationNodeList.value = [data];
+    isShowReplace.value = true;
+  };
+
+  const handleShowDetail = (data: DorisNodeModel) => {
+    isShowDetail.value = true;
+    operationNodeData.value = data;
+  };
+
+  const handleClose = () => {
+    isShowDetail.value = false;
+  };
+</script>
+
+<style lang="less" scoped>
+  .doris-detail-node-list {
+    padding: 16px 0;
+
+    .action-box {
+      display: flex;
+      margin-bottom: 16px;
+
+      .action-box-search-select {
+        max-width: 360px;
+        margin-left: auto;
+        flex: 1;
+      }
+    }
+
+    .action-copy-icon {
+      margin-left: 6px;
+      color: #979ba5;
+      transform: rotateZ(180deg);
+      transition: all 0.2s;
+
+      &--avtive {
+        transform: rotateZ(0);
+      }
+    }
+  }
+</style>
+
+<style lang="less">
+  .doris-breadcrumbs-box {
+    display: flex;
+    width: 100%;
+    margin-left: 8px;
+    font-size: 12px;
+    align-items: center;
+
+    .doris-breadcrumbs-box-status {
+      display: flex;
+      margin-left: 30px;
+      align-items: center;
+    }
+
+    .doris-breadcrumbs-box-button {
+      display: flex;
+      margin-left: auto;
+      align-items: center;
+
+      .more-button {
+        padding: 3px 6px;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/doris-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/doris-manage/list/components/list/Index.vue
new file mode 100644
index 000000000..a52d054bd
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/list/components/list/Index.vue
@@ -0,0 +1,1054 @@
+<!--
+ * 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="doris-list-page">
+    <div class="header-action">
+      <AuthButton
+        action-id="es_apply"
+        class="mb16"
+        theme="primary"
+        @click="handleGoApply">
+        {{ t('申请实例') }}
+      </AuthButton>
+      <!-- <BkDropdown
+        class="ml-8"
+        @hide="() => (isCopyDropdown = false)"
+        @show="() => (isCopyDropdown = true)">
+        <BkButton
+          class="dropdown-button"
+          :class="{ active: isCopyDropdown }">
+          {{ t('复制') }}
+          <DbIcon type="up-big dropdown-button-icon" />
+        </BkButton>
+        <template #content>
+          <BkDropdownMenu>
+            <BkDropdownItem>
+              <BkButton
+                :disabled="tableDataList.length === 0"
+                text
+                @click="handleCopy(tableDataList)">
+                {{ t('所有集群 IP') }}
+              </BkButton>
+            </BkDropdownItem>
+            <BkDropdownItem>
+              <BkButton
+                :disabled="selected.length === 0"
+                text
+                @click="handleCopy(selected)">
+                {{ t('已选集群 IP') }}
+              </BkButton>
+            </BkDropdownItem>
+            <BkDropdownItem>
+              <BkButton
+                :disabled="abnormalDataList.length === 0"
+                text
+                @click="handleCopy(abnormalDataList)">
+                {{ t('异常集群 IP') }}
+              </BkButton>
+            </BkDropdownItem>
+            <BkDropdownItem>
+              <BkButton
+                :disabled="tableDataList.length === 0"
+                text
+                @click="handleCopy(tableDataList, true)">
+                {{ t('所有集群实例') }}
+              </BkButton>
+            </BkDropdownItem>
+            <BkDropdownItem>
+              <BkButton
+                :disabled="selected.length === 0"
+                text
+                @click="handleCopy(selected, true)">
+                {{ t('已选集群实例') }}
+              </BkButton>
+            </BkDropdownItem>
+            <BkDropdownItem>
+              <BkButton
+                :disabled="abnormalDataList.length === 0"
+                text
+                @click="handleCopy(abnormalDataList, true)">
+                {{ t('异常集群实例') }}
+              </BkButton>
+            </BkDropdownItem>
+          </BkDropdownMenu>
+        </template>
+      </BkDropdown> -->
+      <DropdownExportExcel
+        :has-selected="hasSelected"
+        :ids="selectedIds"
+        type="doris" />
+      <DbSearchSelect
+        class="mb16"
+        :data="serachData"
+        :get-menu-list="getMenuList"
+        :model-value="searchValue"
+        :placeholder="t('请输入或选择条件搜索')"
+        unique-select
+        :validate-values="validateSearchValues"
+        @change="handleSearchValueChange" />
+    </div>
+    <div
+      class="table-wrapper"
+      :class="{ 'is-shrink-table': isStretchLayoutOpen }">
+      <DbTable
+        ref="tableRef"
+        :columns="columns"
+        :data-source="getDorisList"
+        :pagination-extra="paginationExtra"
+        releate-url-query
+        :row-class="getRowClass"
+        selectable
+        :settings="tableSetting"
+        @clear-search="clearSearchValue"
+        @column-filter="columnFilterChange"
+        @column-sort="columnSortChange"
+        @selection="handleSelection"
+        @setting-change="updateTableSettings" />
+    </div>
+    <DbSideslider
+      v-model:is-show="isShowExpandsion"
+      :title="t('xx扩容【name】', { title: 'Doris', name: operationData?.cluster_name })"
+      :width="960">
+      <ClusterExpansion
+        v-if="operationData"
+        :data="operationData"
+        @change="fetchTableData" />
+    </DbSideslider>
+    <DbSideslider
+      v-model:is-show="isShowShrink"
+      :title="t('xx缩容【name】', { title: 'Doris', name: operationData?.cluster_name })"
+      :width="960">
+      <ClusterShrink
+        v-if="operationData"
+        :cluster-id="operationData.id"
+        :data="operationData"
+        @change="fetchTableData" />
+    </DbSideslider>
+    <BkDialog
+      v-model:is-show="isShowPassword"
+      :title="t('获取访问方式')">
+      <RenderPassword
+        v-if="operationData"
+        :cluster-id="operationData.id" />
+      <template #footer>
+        <BkButton @click="handleHidePassword">
+          {{ t('关闭') }}
+        </BkButton>
+      </template>
+    </BkDialog>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { InfoBox } from 'bkui-vue';
+  import { useI18n } from 'vue-i18n';
+
+  import DorisModel from '@services/model/doris/doris';
+  import {
+    getDorisInstanceList,
+    getDorisList,
+  } from '@services/source/doris';
+  import { createTicket } from '@services/source/ticket';
+  import { getUserList } from '@services/source/user';
+
+  import {
+    useCopy,
+    useLinkQueryColumnSerach,
+    useStretchLayout,
+    useTableSettings,
+    useTicketMessage,
+  } from '@hooks';
+
+  import { useGlobalBizs } from '@stores';
+
+  import {
+    ClusterTypes,
+    TicketTypes,
+    UserPersonalSettings
+  } from '@common/const';
+
+  import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
+  import RenderNodeInstance from '@components/cluster-common/RenderNodeInstance.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
+  import RenderPassword from '@components/cluster-common/RenderPassword.vue';
+  import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
+  import DbTable from '@components/db-table/index.vue'
+  import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
+  import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
+
+  import ClusterExpansion from '@views/doris-manage/common/expansion/Index.vue';
+  import ClusterShrink from '@views/doris-manage/common/shrink/Index.vue';
+
+  import {
+    getMenuListSearch,
+    getSearchSelectorParams
+  } from '@utils';
+
+  import type {
+    SearchSelectData,
+    SearchSelectItem,
+  } from '@/types/bkui-vue';
+
+  const clusterId = defineModel<number>('clusterId');
+
+  const route = useRoute();
+  const router = useRouter();
+  const { currentBizId } = useGlobalBizs();
+  const ticketMessage = useTicketMessage();
+  const copy = useCopy();
+  const { t, locale } = useI18n();
+  const {
+    isOpen: isStretchLayoutOpen,
+    splitScreen: stretchLayoutSplitScreen,
+  } = useStretchLayout();
+
+  const {
+    columnAttrs,
+    searchAttrs,
+    searchValue,
+    sortValue,
+    columnCheckedMap,
+    batchSearchIpInatanceList,
+    columnFilterChange,
+    columnSortChange,
+    clearSearchValue,
+    validateSearchValues,
+    handleSearchValueChange,
+  } = useLinkQueryColumnSerach(ClusterTypes.DORIS, [
+    'bk_cloud_id',
+    'db_module_id',
+    'major_version',
+    'region',
+    'time_zone',
+  ], () => fetchTableData());
+
+  const tableRef = ref<InstanceType<typeof DbTable>>();
+  // const isCopyDropdown = ref(false);
+  const isShowExpandsion = ref(false);
+  const isShowShrink = ref(false);
+  const isShowPassword = ref(false);
+  const isInit = ref(true);
+
+  const selected = shallowRef<DorisModel[]>([]);
+  const operationData = shallowRef<DorisModel>();
+  const tableDataActionLoadingMap = shallowRef<Record<number, boolean>>({});
+
+  const serachData = computed(() => [
+    {
+      name: t('IP 或 IP:Port'),
+      id: 'instance',
+    },
+    {
+      name: t('访问入口'),
+      id: 'domain',
+    },
+    {
+      name: 'ID',
+      id: 'id',
+    },
+    {
+      name: t('集群名称'),
+      id: 'name',
+      logical: ',',
+    },
+    {
+      name: t('管控区域'),
+      id: 'bk_cloud_id',
+      multiple: true,
+      children: searchAttrs.value.bk_cloud_id,
+    },
+    {
+      name: t('创建人'),
+      id: 'creator',
+    },
+    {
+      name: t('状态'),
+      id: 'status',
+      multiple: true,
+      children: [
+        {
+          id: 'normal',
+          name: t('正常'),
+        },
+        {
+          id: 'abnormal',
+          name: t('异常'),
+        },
+      ],
+    },
+    {
+      name: t('版本'),
+      id: 'major_version',
+      multiple: true,
+      children: searchAttrs.value.major_version,
+    },
+    {
+      name: t('地域'),
+      id: 'region',
+      multiple: true,
+      children: searchAttrs.value.region,
+    },
+    {
+      name: t('时区'),
+      id: 'time_zone',
+      multiple: true,
+      children: searchAttrs.value.time_zone,
+    },
+  ] as SearchSelectData);
+
+  // const tableDataList = computed(() => tableRef.value!.getData<DorisModel>());
+  // const abnormalDataList = computed(() => tableDataList.value.filter(dataItem => dataItem.isAbnormal));
+  const hasSelected = computed(() => selected.value.length > 0);
+  const selectedIds = computed(() => selected.value.map(item => item.id));
+
+  const paginationExtra = computed(() => {
+    if (isStretchLayoutOpen.value) {
+      return { small: false };
+    }
+
+    return {
+      small: true,
+      align: 'left',
+      layout: ['total', 'limit', 'list'],
+    };
+  });
+  const isCN = computed(() => locale.value === 'zh-cn');
+
+  const getRowClass = (data: DorisModel) => {
+    const classList = [data.isOnline ? '' : 'is-offline'];
+    const newClass = data.isNew ? 'is-new-row' : '';
+    classList.push(newClass);
+    if (data.id === clusterId.value) {
+      classList.push('is-selected-row');
+    }
+    return classList.filter(cls => cls).join(' ');
+  };
+
+  const tableOperationWidth = computed(() => {
+    if (!isStretchLayoutOpen.value) {
+      return isCN.value ? 270 : 420;
+    }
+    return 100;
+  });
+
+  const columns = computed(() => [
+    {
+      label: 'ID',
+      field: 'id',
+      fixed: 'left',
+      width: 100,
+    },
+    {
+      label: t('域名'),
+      field: 'domain',
+      width: 300,
+      minWidth: 300,
+      fixed: 'left',
+      render: ({ data }: { data: DorisModel }) => (
+        <TextOverflowLayout>
+          {{
+            default: () => (
+              <auth-button
+                action-id="es_view"
+                resource={data.id}
+                permission={data.permission.doris_view}
+                text
+                theme="primary"
+                onClick={() => handleToDetails(data.id)}>
+                {data.domain}
+              </auth-button>
+            ),
+            append: () => (
+              <>
+                {
+                  data.domain && (
+                    <db-icon
+                      type="copy"
+                      v-bk-tooltips={t('复制访问入口')}
+                      onClick={() => copy(data.domainDisplayName)} />
+                  )
+                }
+              </>
+            ),
+          }}
+        </TextOverflowLayout>
+      ),
+    },
+    {
+      label: t('集群'),
+      width: 150,
+      minWidth: 150,
+      fixed: 'left',
+      showOverflowTooltip: false,
+      render: ({ data }: { data: DorisModel }) => (
+        <TextOverflowLayout>
+          {{
+            default: () => (
+              <div>
+                <span>
+                  {data.cluster_name}
+                </span >
+                <div style='color: #C4C6CC;'>{data.cluster_alias || '--'}</div>
+              </div>
+            ),
+            append: () => (
+              <>
+                {
+                  data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
+                }
+                {
+                  data.isOffline && !data.isStarting && (
+                    <bk-tag
+                      class="ml-4"
+                      size="small">
+                      {t('已禁用')}
+                    </bk-tag>
+                  )
+                }
+                {
+                  data.isNew && (
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
+                  )
+                }
+                <db-icon
+                  v-bk-tooltips={t('复制集群名称')}
+                  type="copy"
+                  class="mt-2"
+                  onClick={() => copy(data.cluster_name)} />
+              </>
+            )
+          }}
+        </TextOverflowLayout>
+      ),
+    },
+    {
+      label: t('管控区域'),
+      field: 'bk_cloud_id',
+      filter: {
+        list: columnAttrs.value.bk_cloud_id,
+        checked: columnCheckedMap.value.bk_cloud_id,
+      },
+      render: ({ data }: {data: DorisModel}) => <span>{data.bk_cloud_name ?? '--'}</span>,
+    },
+    {
+      label: t('状态'),
+      field: 'status',
+      minWidth: 100,
+      filter: {
+        list: [
+          {
+            value: 'normal',
+            text: t('正常'),
+          },
+          {
+            value: 'abnormal',
+            text: t('异常'),
+          },
+        ],
+        checked: columnCheckedMap.value.status,
+      },
+      render: ({ data }: {data: DorisModel}) => <RenderClusterStatus data={data.status} />,
+    },
+    {
+      label: t('版本'),
+      field: 'major_version',
+      minWidth: 100,
+      filter: {
+        list: columnAttrs.value.major_version,
+        checked: columnCheckedMap.value.major_version,
+      },
+    },
+    {
+      label: t('地域'),
+      field: 'region',
+      minWidth: 100,
+      filter: {
+        list: columnAttrs.value.region,
+        checked: columnCheckedMap.value.region,
+      },
+      render: ({ data }: {data: DorisModel}) => <span>{data?.region || '--'}</span>,
+    },
+    {
+      label: t('Follower节点'),
+      field: 'doris_follower',
+      minWidth: 230,
+      showOverflowTooltip: false,
+      render: ({ data }: { data: DorisModel }) => (
+        <RenderNodeInstance
+          highlightIps={batchSearchIpInatanceList.value}
+          role="doris_follower"
+          title={`【${data.domain}】follower`}
+          clusterId={data.id}
+          originalList={data.doris_follower}
+          dataSource={getDorisInstanceList} />
+      ),
+    },
+    {
+      label: t('Observer节点'),
+      field: 'doris_observer',
+      minWidth: 230,
+      showOverflowTooltip: false,
+      render: ({ data }: { data: DorisModel }) => (
+        <RenderNodeInstance
+          highlightIps={batchSearchIpInatanceList.value}
+          role="doris_observer"
+          title={`【${data.domain}】observer`}
+          clusterId={data.id}
+          originalList={data.doris_observer}
+          dataSource={getDorisInstanceList} />
+      ),
+    },
+    {
+      label: t('热节点'),
+      field: 'doris_backend_hot',
+      minWidth: 230,
+      showOverflowTooltip: false,
+      render: ({ data }: { data: DorisModel }) => (
+        <RenderNodeInstance
+          highlightIps={batchSearchIpInatanceList.value}
+          role="doris_backend_hot"
+          title={t('【xx】热节点', { name: data.domain })}
+          clusterId={data.id}
+          originalList={data.doris_backend_hot}
+          dataSource={getDorisInstanceList} />
+      ),
+    },
+    {
+      label: t('冷节点'),
+      field: 'doris_backend_cold',
+      minWidth: 230,
+      showOverflowTooltip: false,
+      render: ({ data }: { data: DorisModel }) => (
+        <RenderNodeInstance
+          highlightIps={batchSearchIpInatanceList.value}
+          role="doris_backend_cold"
+          title={t('【xx】冷节点', { name: data.domain })}
+          clusterId={data.id}
+          originalList={data.doris_backend_cold}
+          dataSource={getDorisInstanceList} />
+      ),
+    },
+    {
+      label: t('创建人'),
+      field: 'creator',
+      width: 140,
+      render: ({ data }: {data: DorisModel}) => <span>{data.creator || '--'}</span>,
+    },
+    {
+      label: t('部署时间'),
+      field: 'create_at',
+      width: 160,
+      sort: true,
+      render: ({ data }: {data: DorisModel}) => <span>{data.createAtDisplay}</span>,
+    },
+    {
+      label: t('时区'),
+      field: 'cluster_time_zone',
+      width: 100,
+      filter: {
+        list: columnAttrs.value.time_zone,
+        checked: columnCheckedMap.value.time_zone,
+      },
+    },
+    {
+      label: t('操作'),
+      width: tableOperationWidth.value,
+      fixed: isStretchLayoutOpen.value ? false : 'right',
+      render: ({ data }: { data: DorisModel }) => {
+        if (data.isOnline) {
+          return [
+            <OperationBtnStatusTips data={data}>
+              <auth-button
+                text
+                theme="primary"
+                action-id="doris_scale_up"
+                permission={data.permission.doris_scale_up}
+                resource={data.id}
+                disabled={data.operationDisabled}
+                onClick={() => handleShowExpandsion(data)}>
+                { t('扩容') }
+              </auth-button>
+            </OperationBtnStatusTips>,
+            <OperationBtnStatusTips data={data}>
+              <auth-button
+                text
+                theme="primary"
+                class="ml-16"
+                action-id="doris_shrink"
+                permission={data.permission.doris_shrink}
+                resource={data.id}
+                disabled={data.operationDisabled}
+                onClick={() => handleShowShrink(data)}>
+                { t('缩容') }
+              </auth-button>
+            </OperationBtnStatusTips>,
+            <auth-button
+              text
+              theme="primary"
+              action-id="doris_access_entry_view"
+              permission={data.permission.doris_access_entry_view}
+              resource={data.id}
+              class="ml-16"
+              onClick={() => handleShowPassword(data)}>
+              {t('获取访问方式')}
+            </auth-button>,
+            <bk-dropdown>
+              {{
+                default: () => (
+                  <bk-button
+                    text
+                    class="ml-16">
+                    <db-icon type="more" />
+                  </bk-button>
+                ),
+                content: () => (
+                  <>
+                    <bk-dropdown-item>
+                      <a
+                        href={data.access_url}
+                        target="_blank">
+                        {t('管理')}
+                      </a>,
+                    </bk-dropdown-item>
+                    <bk-dropdown-item>
+                      <OperationBtnStatusTips data={data}>
+                        <auth-button
+                          text
+                          theme="primary"
+                          action-id="doris_enable_disable"
+                          permission={data.permission.doris_enable_disable}
+                          resource={data.id}
+                          disabled={data.operationDisabled}
+                          loading={tableDataActionLoadingMap.value[data.id]}
+                          onClick={() => handlDisabled(data)}>
+                          { t('禁用') }
+                        </auth-button>
+                      </OperationBtnStatusTips>
+                    </bk-dropdown-item>
+                  </>
+                )
+              }}
+            </bk-dropdown>
+          ];
+        }
+        return [
+          <auth-button
+            text
+            theme="primary"
+            action-id="doris_enable_disable"
+            permission={data.permission.doris_enable_disable}
+            resource={data.id}
+            class="mr-16"
+            loading={tableDataActionLoadingMap.value[data.id]}
+            onClick={() => handleEnable(data)}>
+            { t('启用') }
+          </auth-button>,
+          <auth-button
+            text
+            theme="primary"
+            action-id="doris_destroy"
+            permission={data.permission.doris_destroy}
+            resource={data.id}
+            loading={tableDataActionLoadingMap.value[data.id]}
+            onClick={() => handleRemove(data)}>
+            { t('删除') }
+          </auth-button>,
+        ];
+      },
+    },
+  ]);
+
+  // 设置用户个人表头信息
+  const defaultSettings = {
+    fields: (columns.value || []).filter(item => item.field).map(item => ({
+      label: item.label,
+      field: item.field,
+      disabled: item.field === 'domain',
+    })),
+    checked: [
+      'domain',
+      'cluster_name',
+      'bk_cloud_id',
+      'major_version',
+      'region',
+      'status',
+      'doris_follower',
+      'doris_observer',
+      'doris_backend_hot',
+      'doris_backend_cold',
+      'cluster_time_zone',
+    ],
+    trigger: 'manual' as const,
+  };
+
+  const {
+    settings: tableSetting,
+    updateTableSettings,
+  } = useTableSettings(UserPersonalSettings.DORIS_TABLE_SETTINGS, defaultSettings);
+
+  const getMenuList = async (item: SearchSelectItem | undefined, keyword: string) => {
+    if (item?.id !== 'creator' && keyword) {
+      return getMenuListSearch(item, keyword, serachData.value, searchValue.value);
+    }
+
+    // 没有选中过滤标签
+    if (!item) {
+      // 过滤掉已经选过的标签
+      const selected = (searchValue.value || []).map(value => value.id);
+      return serachData.value.filter(item => !selected.includes(item.id));
+    }
+
+    // 远程加载执行人
+    if (item.id === 'creator') {
+      if (!keyword) {
+        return [];
+      }
+      return getUserList({
+        fuzzy_lookups: keyword,
+      }).then(res => res.results.map(item => ({
+        id: item.username,
+        name: item.username,
+      })));
+    }
+
+    // 不需要远层加载
+    return serachData.value.find(set => set.id === item.id)?.children || [];
+  };
+
+  const fetchTableData = (loading?:boolean) => {
+    const searchParams = getSearchSelectorParams(searchValue.value);
+    tableRef.value?.fetchData(searchParams, { ...sortValue }, loading);
+    isInit.value = false;
+  };
+
+  const handleSelection = (key: number[], list: Record<number, DorisModel>[]) => {
+    selected.value = list as unknown as DorisModel[];
+  };
+
+  // 申请实例
+  const handleGoApply = () => {
+    router.push({
+      name: 'DorisApply',
+      query: {
+        bizId: currentBizId,
+        from: route.name as string,
+      },
+    });
+  };
+
+  // const handleCopy = (dataList: DorisModel[], isInstance = false) => {
+  //   const list = dataList.reduce((prevList, tableItem) => {
+  //     const followerList = tableItem.doris_follower.map(followerItem => (isInstance ? `${followerItem.ip}:${followerItem.port}` : `${followerItem.ip}`));
+  //     const observerList = tableItem.doris_observer.map(observerItem => (isInstance ? `${observerItem.ip}:${observerItem.port}` : `${observerItem.ip}`));
+  //     const hotList = tableItem.doris_datanode_hot.map(hotItem => (isInstance ? `${hotItem.ip}:${hotItem.port}` : `${hotItem.ip}`));
+  //     const coldList = tableItem.doris_datanode_cold.map(coldItem => (isInstance ? `${coldItem.ip}:${coldItem.port}` : `${coldItem.ip}`));
+  //     return [...followerList, ...observerList, ...hotList, ...coldList];
+  //   }, [] as string[]);
+  //   copy(list.join('\n'));
+  // };
+
+  /**
+   * 查看详情
+   */
+  const handleToDetails = (id: number) => {
+    stretchLayoutSplitScreen();
+    clusterId.value = id;
+  };
+
+  // 扩容
+  const handleShowExpandsion = (data: DorisModel) => {
+    isShowExpandsion.value = true;
+    operationData.value = data;
+  };
+
+  // 缩容
+  const handleShowShrink = (data: DorisModel) => {
+    isShowShrink.value = true;
+    operationData.value = data;
+  };
+
+  // 禁用
+  const handlDisabled =  (clusterData: DorisModel) => {
+    const subTitle = (
+      <div style="background-color: #F5F7FA; padding: 8px 16px;">
+        <div>
+          {t('集群')} :
+          <span
+            style="color: #313238"
+            class="ml-8">
+            {clusterData.cluster_name}
+          </span>
+        </div>
+        <div class='mt-4'>{t('被禁用后将无法访问，如需恢复访问，可以再次「启用」')}</div>
+      </div>
+    )
+    InfoBox({
+      title: t('确认禁用该集群？'),
+      subTitle,
+      infoType: 'warning',
+      theme: 'danger',
+      confirmText: t('禁用'),
+      cancelText: t('取消'),
+      headerAlign: 'center',
+      contentAlign: 'left',
+      footerAlign: 'center',
+      onConfirm: () => {
+        tableDataActionLoadingMap.value = {
+          ...tableDataActionLoadingMap.value,
+          [clusterData.id]: true,
+        };
+        createTicket({
+          bk_biz_id: currentBizId,
+          ticket_type: TicketTypes.DORIS_DISABLE,
+          details: {
+            cluster_id: clusterData.id,
+          },
+        })
+          .then((data) => {
+            tableDataActionLoadingMap.value = {
+              ...tableDataActionLoadingMap.value,
+              [clusterData.id]: false,
+            };
+            fetchTableData();
+            ticketMessage(data.id);
+          })
+        ;
+      },
+    });
+  };
+
+  const handleEnable =  (clusterData: DorisModel) => {
+    const subTitle = (
+      <div style="background-color: #F5F7FA; padding: 8px 16px;">
+        <div>
+          {t('集群')} :
+          <span
+            style="color: #313238"
+            class="ml-8">
+            {clusterData.cluster_name}
+          </span>
+        </div>
+        <div class='mt-4'>{t('启用后，将会恢复访问')}</div>
+      </div>
+    )
+    InfoBox({
+      title: t('确认启用该集群？'),
+      subTitle,
+      confirmText: t('启用'),
+      cancelText: t('取消'),
+      headerAlign: 'center',
+      contentAlign: 'left',
+      footerAlign: 'center',
+      onConfirm: () => {
+        tableDataActionLoadingMap.value = {
+          ...tableDataActionLoadingMap.value,
+          [clusterData.id]: true,
+        };
+        createTicket({
+          bk_biz_id: currentBizId,
+          ticket_type: TicketTypes.DORIS_ENABLE,
+          details: {
+            cluster_id: clusterData.id,
+          },
+        })
+          .then((data) => {
+            tableDataActionLoadingMap.value = {
+              ...tableDataActionLoadingMap.value,
+              [clusterData.id]: false,
+            };
+            fetchTableData();
+            ticketMessage(data.id);
+          })
+        ;
+      },
+    });
+  };
+
+  const handleRemove =  (clusterData: DorisModel) => {
+    const subTitle = (
+      <div style="background-color: #F5F7FA; padding: 8px 16px;">
+        <div>
+          {t('集群')} :
+          <span
+            style="color: #313238"
+            class="ml-8">
+            {clusterData.cluster_name}
+          </span>
+        </div>
+        <div class='mt-4'>{t('删除后将产生以下影响')}：</div>
+        <div class='mt-4'>1. {t('删除xxx集群', [clusterData.cluster_name])}</div>
+        <div class='mt-4'>2. {t('删除xxx实例数据，停止相关进程', [clusterData.cluster_name])}</div>
+        <div class='mt-4'>3. {t('回收主机')}：</div>
+      </div>
+    )
+    InfoBox({
+      title: t('确认删除【name】集群', { name: clusterData.cluster_name }),
+      subTitle,
+      infoType: 'warning',
+      theme: 'danger',
+      confirmText: t('删除'),
+      cancelText: t('取消'),
+      headerAlign: 'center',
+      contentAlign: 'left',
+      footerAlign: 'center',
+      onConfirm: () => {
+        tableDataActionLoadingMap.value = {
+          ...tableDataActionLoadingMap.value,
+          [clusterData.id]: true,
+        };
+        createTicket({
+          bk_biz_id: currentBizId,
+          ticket_type: TicketTypes.DORIS_DESTROY,
+          details: {
+            cluster_id: clusterData.id,
+          },
+        })
+          .then((data) => {
+            tableDataActionLoadingMap.value = {
+              ...tableDataActionLoadingMap.value,
+              [clusterData.id]: false,
+            };
+            fetchTableData();
+            ticketMessage(data.id);
+          })
+        ;
+      },
+    });
+  };
+
+  const handleShowPassword = (clusterData: DorisModel) => {
+    operationData.value = clusterData;
+    isShowPassword.value = true;
+  };
+
+  const handleHidePassword = () => {
+    isShowPassword.value = false;
+  };
+
+  onMounted(() => {
+    if (!clusterId.value && route.query.id) {
+      handleToDetails(Number(route.query.id));
+    }
+  });
+</script>
+
+<style lang="less">
+  .doris-list-page {
+    height: 100%;
+    padding: 24px 0;
+    margin: 0 24px;
+    overflow: hidden;
+
+    .header-action {
+      display: flex;
+      flex-wrap: wrap;
+
+      .bk-search-select {
+        flex: 1;
+        max-width: 320px;
+        min-width: 320px;
+        margin-left: auto;
+      }
+    }
+
+    .table-wrapper {
+      background-color: white;
+
+      .db-table,
+      .audit-render-list,
+      .bk-nested-loading {
+        height: 100%;
+      }
+
+      .bk-table {
+        height: 100% !important;
+      }
+
+      .bk-table-body {
+        max-height: calc(100% - 100px);
+      }
+    }
+
+    .is-shrink-table {
+      .bk-table-body {
+        overflow: hidden auto;
+      }
+    }
+
+    .db-icon-more {
+      display: block;
+      font-size: @font-size-normal;
+      font-weight: bold;
+      color: @default-color;
+      cursor: pointer;
+
+      &:hover {
+        background-color: @bg-disable;
+        border-radius: 2px;
+      }
+    }
+
+    .is-offline {
+      * {
+        color: #c4c6cc !important;
+      }
+
+      a,
+      i,
+      .bk-button.bk-button-primary .bk-button-text {
+        color: #3a84ff !important;
+      }
+    }
+
+    .db-icon-copy {
+      display: none;
+    }
+
+    tr:hover {
+      .db-icon-copy {
+        display: inline-block !important;
+        margin-left: 4px;
+        color: #3a84ff;
+        vertical-align: middle;
+        cursor: pointer;
+      }
+    }
+  }
+</style>
+
+<style lang="less" scoped>
+  .doris-list-page {
+    :deep(.cell) {
+      line-height: normal !important;
+
+      .db-icon-edit {
+        display: none;
+        margin-left: 4px;
+        color: @primary-color;
+        cursor: pointer;
+      }
+    }
+
+    :deep(tr:hover) {
+      .db-icon-edit {
+        display: inline-block !important;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/doris-manage/routes.ts b/dbm-ui/frontend/src/views/doris-manage/routes.ts
new file mode 100644
index 000000000..a3b337f9b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/doris-manage/routes.ts
@@ -0,0 +1,47 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import type { RouteRecordRaw } from 'vue-router';
+
+import type { BigdataFunctions } from '@services/model/function-controller/functionController';
+
+import { t } from '@locales/index';
+
+const routes: RouteRecordRaw[] = [
+  {
+    name: 'DorisManage',
+    path: 'doris-manage',
+    meta: {
+      navName: t('【Doris】集群管理'),
+    },
+    redirect: {
+      name: 'DorisList',
+    },
+    component: () => import('@views/doris-manage/Index.vue'),
+    children: [
+      {
+        name: 'DorisList',
+        path: 'list',
+        meta: {
+          navName: t('【Doris】集群管理'),
+          fullscreen: true,
+        },
+        component: () => import('@views/doris-manage/list/Index.vue'),
+      },
+    ],
+  },
+];
+
+export default function getRoutes(controller: Record<BigdataFunctions | 'bigdata', boolean>) {
+  return controller.doris ? routes : [];
+}
diff --git a/dbm-ui/frontend/src/views/es-manage/common/expansion/Index.vue b/dbm-ui/frontend/src/views/es-manage/common/expansion/Index.vue
index b2b3f99ee..828ccd8f9 100644
--- a/dbm-ui/frontend/src/views/es-manage/common/expansion/Index.vue
+++ b/dbm-ui/frontend/src/views/es-manage/common/expansion/Index.vue
@@ -140,6 +140,7 @@
         count: 1,
         instance_num: 1,
       },
+      tagText: t('存储层')
     },
     cold: {
       label: '冷节点',
@@ -158,6 +159,7 @@
         count: 1,
         instance_num: 1,
       },
+      tagText: t('存储层')
     },
     client: {
       label: 'Client 节点',
@@ -176,6 +178,7 @@
         count: 1,
         instance_num: 1,
       },
+      tagText: t('接入层')
     },
   });
 
diff --git a/dbm-ui/frontend/src/views/es-manage/common/shrink/Index.vue b/dbm-ui/frontend/src/views/es-manage/common/shrink/Index.vue
index dff5fc5f7..2f6ddd28e 100644
--- a/dbm-ui/frontend/src/views/es-manage/common/shrink/Index.vue
+++ b/dbm-ui/frontend/src/views/es-manage/common/shrink/Index.vue
@@ -112,6 +112,7 @@
       targetDisk: 0,
       shrinkDisk: 0,
       minHost: 0,
+      tagText: t('存储层')
     },
     cold: {
       label: t('冷节点'),
@@ -121,6 +122,7 @@
       targetDisk: 0,
       shrinkDisk: 0,
       minHost: 0,
+      tagText: t('存储层')
     },
     client: {
       label: 'Client',
@@ -130,6 +132,7 @@
       targetDisk: 0,
       shrinkDisk: 0,
       minHost: 0,
+      tagText: t('接入层')
     },
   });
 
diff --git a/dbm-ui/frontend/src/views/es-manage/list/components/detail/components/node-list/Index.vue b/dbm-ui/frontend/src/views/es-manage/list/components/detail/components/node-list/Index.vue
index 0b72f6d4d..2cfd121a5 100644
--- a/dbm-ui/frontend/src/views/es-manage/list/components/detail/components/node-list/Index.vue
+++ b/dbm-ui/frontend/src/views/es-manage/list/components/detail/components/node-list/Index.vue
@@ -165,9 +165,10 @@
       :show-footer="false"
       :title="t('节点详情')"
       :width="960">
-      <InstanceDetail
+      <BigdataInstanceDetail
         v-if="operationNodeData"
         :cluster-id="clusterId"
+        :cluster-type="ClusterTypes.ES"
         :data="operationNodeData"
         @close="handleClose" />
     </DbSideslider>
@@ -190,6 +191,7 @@
 
   import { ClusterTypes } from '@common/const';
 
+  import BigdataInstanceDetail from '@components/bigdata-instance-detail/Index.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderClusterRole from '@components/cluster-common/RenderRole.vue';
   import RenderHostStatus from '@components/render-host-status/Index.vue';
@@ -206,7 +208,7 @@
 
   import { useTimeoutPoll } from '@vueuse/core';
 
-  import InstanceDetail from './components/InstanceDetail.vue';
+  // import InstanceDetail from './components/InstanceDetail.vue';
 
   interface Props {
     clusterId: number;
diff --git a/dbm-ui/frontend/src/views/es-manage/list/components/detail/components/node-list/components/InstanceDetail.vue b/dbm-ui/frontend/src/views/es-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
index 495479b4d..af80996ca 100644
--- a/dbm-ui/frontend/src/views/es-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
+++ b/dbm-ui/frontend/src/views/es-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
@@ -53,7 +53,7 @@
 
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderInstanceStatus from '@components/cluster-common/RenderInstanceStatus.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
 
   import { useTimeoutPoll } from '@vueuse/core';
 
diff --git a/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
index 241abe492..4c2b23a75 100644
--- a/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/es-manage/list/components/list/Index.vue
@@ -132,7 +132,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderNodeInstance from '@components/cluster-common/RenderNodeInstance.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import RenderPassword from '@components/cluster-common/RenderPassword.vue';
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
   import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
@@ -365,11 +365,15 @@
           {
             data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
           }
-          <db-icon
-            v-show={!data.isOnline && !data.isStarting}
-            svg
-            type="yijinyong"
-            style="width: 38px; height: 16px; margin-left: 4px;" />
+          {
+            !data.isOnline && !data.isStarting && (
+              <bk-tag
+                class="ml-4"
+                size="small">
+                {t('已禁用')}
+              </bk-tag>
+            )
+          }
           {
             isRecentDays(data.create_at, 24 * 3)
             && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" />
diff --git a/dbm-ui/frontend/src/views/hdfs-manage/common/expansion/Index.vue b/dbm-ui/frontend/src/views/hdfs-manage/common/expansion/Index.vue
index c41bbf96f..e0aa6fd0b 100644
--- a/dbm-ui/frontend/src/views/hdfs-manage/common/expansion/Index.vue
+++ b/dbm-ui/frontend/src/views/hdfs-manage/common/expansion/Index.vue
@@ -121,6 +121,7 @@
         spec_id: 0,
         count: 1,
       },
+      tagText: t('存储层')
     },
   });
 
diff --git a/dbm-ui/frontend/src/views/hdfs-manage/common/shrink/Index.vue b/dbm-ui/frontend/src/views/hdfs-manage/common/shrink/Index.vue
index ed0e83f5a..84c424490 100644
--- a/dbm-ui/frontend/src/views/hdfs-manage/common/shrink/Index.vue
+++ b/dbm-ui/frontend/src/views/hdfs-manage/common/shrink/Index.vue
@@ -105,6 +105,7 @@
       shrinkDisk: 0,
       // 最小主机数
       minHost: 2,
+      tagText: t('存储层')
     },
   });
 
diff --git a/dbm-ui/frontend/src/views/hdfs-manage/list/components/detail/components/node-list/Index.vue b/dbm-ui/frontend/src/views/hdfs-manage/list/components/detail/components/node-list/Index.vue
index 739384e6e..99aea6a87 100644
--- a/dbm-ui/frontend/src/views/hdfs-manage/list/components/detail/components/node-list/Index.vue
+++ b/dbm-ui/frontend/src/views/hdfs-manage/list/components/detail/components/node-list/Index.vue
@@ -159,8 +159,10 @@
       :show-footer="false"
       :title="t('节点详情')"
       :width="960">
-      <InstanceDetail
+      <BigdataInstanceDetail
+        v-if="operationNodeData"
         :cluster-id="clusterId"
+        :cluster-type="ClusterTypes.HDFS"
         :data="operationNodeData"
         @close="handleClose" />
     </DbSideslider>
@@ -183,6 +185,7 @@
 
   import { ClusterTypes } from '@common/const';
 
+  import BigdataInstanceDetail from '@components/bigdata-instance-detail/Index.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderClusterRole from '@components/cluster-common/RenderRole.vue';
   import RenderHostStatus from '@components/render-host-status/Index.vue';
@@ -199,7 +202,7 @@
 
   import { useTimeoutPoll } from '@vueuse/core';
 
-  import InstanceDetail from './components/InstanceDetail.vue';
+  // import InstanceDetail from './components/InstanceDetail.vue';
 
   interface Props {
     clusterId: number;
diff --git a/dbm-ui/frontend/src/views/hdfs-manage/list/components/detail/components/node-list/components/InstanceDetail.vue b/dbm-ui/frontend/src/views/hdfs-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
index 3d224c277..08926320a 100644
--- a/dbm-ui/frontend/src/views/hdfs-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
+++ b/dbm-ui/frontend/src/views/hdfs-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
@@ -51,7 +51,7 @@
 
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderInstanceStatus from '@components/cluster-common/RenderInstanceStatus.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
 
   import { useTimeoutPoll } from '@vueuse/core';
 
diff --git a/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
index a515e4f1a..0d862b9a9 100644
--- a/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/hdfs-manage/list/components/list/Index.vue
@@ -141,7 +141,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderNodeInstance from '@components/cluster-common/RenderNodeInstance.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import RenderPassword from '@components/cluster-common/RenderPassword.vue';
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
   import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
@@ -380,11 +380,15 @@
           {
             data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
           }
-          <db-icon
-            v-show={!data.isOnline}
-            svg
-            type="yijinyong"
-            style="width: 38px; height: 16px; margin-left: 4px;" />
+          {
+            data.isOffline && (
+              <bk-tag
+                class="ml-4"
+                size="small">
+                {t('已禁用')}
+              </bk-tag>
+            )
+          }
           {
             isRecentDays(data.create_at, 24 * 3)
             && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" />
diff --git a/dbm-ui/frontend/src/views/influxdb-manage/instance-list/components/render-list/Index.vue b/dbm-ui/frontend/src/views/influxdb-manage/instance-list/components/render-list/Index.vue
index 9a72877f5..7a9b3d348 100644
--- a/dbm-ui/frontend/src/views/influxdb-manage/instance-list/components/render-list/Index.vue
+++ b/dbm-ui/frontend/src/views/influxdb-manage/instance-list/components/render-list/Index.vue
@@ -167,7 +167,7 @@
 
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderInstanceStatus from '@components/cluster-common/RenderInstanceStatus.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
@@ -323,12 +323,15 @@
                   {
                     data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
                   }
-                  <db-icon
-                    v-show={!data.isOnline && !data.isStarting}
-                    class="cluster-tag"
-                    svg
-                    type="yijinyong"
-                    style="width: 38px; height: 16px;" />
+                  {
+                    !data.isOnline && !data.isStarting && (
+                      <bk-tag
+                        class="ml-4"
+                        size="small">
+                        {t('已禁用')}
+                      </bk-tag>
+                    )
+                  }
                   {
                     data.isNew && (
                       <span class="glob-new-tag cluster-tag" data-text="NEW" />
diff --git a/dbm-ui/frontend/src/views/kafka-manage/common/expansion/Index.vue b/dbm-ui/frontend/src/views/kafka-manage/common/expansion/Index.vue
index 7c1b32cc2..a1629655a 100644
--- a/dbm-ui/frontend/src/views/kafka-manage/common/expansion/Index.vue
+++ b/dbm-ui/frontend/src/views/kafka-manage/common/expansion/Index.vue
@@ -121,6 +121,7 @@
         spec_id: 0,
         count: 1,
       },
+      tagText: t('存储层')
     },
   });
 
diff --git a/dbm-ui/frontend/src/views/kafka-manage/common/shrink/Index.vue b/dbm-ui/frontend/src/views/kafka-manage/common/shrink/Index.vue
index 1f446af72..d0dde4aa1 100644
--- a/dbm-ui/frontend/src/views/kafka-manage/common/shrink/Index.vue
+++ b/dbm-ui/frontend/src/views/kafka-manage/common/shrink/Index.vue
@@ -104,6 +104,7 @@
       // 实际选择的缩容主机容量
       shrinkDisk: 0,
       minHost: 1,
+      tagText: t('存储层')
     },
   });
 
diff --git a/dbm-ui/frontend/src/views/kafka-manage/list/components/detail/components/node-list/Index.vue b/dbm-ui/frontend/src/views/kafka-manage/list/components/detail/components/node-list/Index.vue
index 7445dcd35..ee5c9243d 100644
--- a/dbm-ui/frontend/src/views/kafka-manage/list/components/detail/components/node-list/Index.vue
+++ b/dbm-ui/frontend/src/views/kafka-manage/list/components/detail/components/node-list/Index.vue
@@ -166,9 +166,10 @@
       :show-footer="false"
       :title="t('节点详情')"
       :width="960">
-      <InstanceDetail
+      <BigdataInstanceDetail
         v-if="operationNodeData"
         :cluster-id="clusterId"
+        :cluster-type="ClusterTypes.KAFKA"
         :data="operationNodeData"
         @close="handleClose" />
     </DbSideslider>
@@ -189,8 +190,9 @@
 
   import { useGlobalBizs } from '@stores';
 
-  import { ClusterTypes } from '@common/const';
+  import { ClusterTypes } from '@common/const'
 
+  import BigdataInstanceDetail from '@components/bigdata-instance-detail/Index.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderClusterRole from '@components/cluster-common/RenderRole.vue';
   import RenderHostStatus from '@components/render-host-status/Index.vue';
@@ -207,7 +209,7 @@
 
   import { useTimeoutPoll } from '@vueuse/core';
 
-  import InstanceDetail from './components/InstanceDetail.vue';
+  // import InstanceDetail from './components/InstanceDetail.vue';
 
   interface Props {
     clusterId: number;
diff --git a/dbm-ui/frontend/src/views/kafka-manage/list/components/detail/components/node-list/components/InstanceDetail.vue b/dbm-ui/frontend/src/views/kafka-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
index 6a1e8e88c..04f9b4439 100644
--- a/dbm-ui/frontend/src/views/kafka-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
+++ b/dbm-ui/frontend/src/views/kafka-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
@@ -53,7 +53,7 @@
 
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderInstanceStatus from '@components/cluster-common/RenderInstanceStatus.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
 
   import { useTimeoutPoll } from '@vueuse/core';
 
diff --git a/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
index d4fb36d00..e135b5ab6 100644
--- a/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/kafka-manage/list/components/list/Index.vue
@@ -131,7 +131,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderNodeInstance from '@components/cluster-common/RenderNodeInstance.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import RenderPassword from '@components/cluster-common/RenderPassword.vue';
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
   import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
@@ -349,34 +349,47 @@
       minWidth: 200,
       fixed: 'left',
       showOverflowTooltip: false,
-      render: ({ data }: {data: KafkaModel}) => (
+      render: ({ data }: { data: KafkaModel }) => (
         <TextOverflowLayout>
           {{
             default: () => (
               <div>
-                <div>
-                  <div>
-                    {data.cluster_name}
-                  </div>
-                  <div style='color: #C4C6CC;'>{data.cluster_alias || '--'}</div>
-                </div>
+                <span>
+                  {data.cluster_name}
+                </span >
+                <div style='color: #C4C6CC;'>{data.cluster_alias || '--'}</div>
+              </div>
+            ),
+            append: () => (
+              <>
                 {
                   data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
                 }
+                {
+                  data.isOffline && !data.isStarting && (
+                    <bk-tag
+                      class="ml-4"
+                      size="small">
+                      {t('已禁用')}
+                    </bk-tag>
+                  )
+                }
+                {
+                  data.isNew && (
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
+                  )
+                }
                 <db-icon
-                  v-show={!data.isOnline && !data.isStarting}
-                  svg
-                  type="yijinyong"
-                  style="width: 38px; height: 16px; margin-left: 4px;" />
-                {data.isNew && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" />}
-              </div>
-            ),
-            append: () => (
-              <db-icon
-                class="mt-2"
-                v-bk-tooltips={t('复制集群名称')}
-                type="copy"
-                onClick={() => copy(data.cluster_name)} />
+                  v-bk-tooltips={t('复制集群名称')}
+                  type="copy"
+                  class="mt-2"
+                  onClick={() => copy(data.cluster_name)} />
+              </>
             )
           }}
         </TextOverflowLayout>
diff --git a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue
index 3622e4bc3..ccc41965b 100644
--- a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue
+++ b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue
@@ -83,6 +83,7 @@
   } from '@common/const';
 
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import DbStatus from '@components/db-status/index.vue';
   import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
 
@@ -206,13 +207,11 @@
               </auth-button>
             </div>
             {
-              data.isRebooting && (
-                <db-icon
-                    svg
-                    type="zhongqizhong"
-                    class="cluster-tag ml-8"
-                    style="width: 38px; height: 16px;" />
-              )
+              data.operationTagTips.map(item => (
+                <RenderOperationTag
+                  class="cluster-tag ml-4"
+                  data={item} />
+              ))
             }
           </div>
       ),
diff --git a/dbm-ui/frontend/src/views/mongodb-manage/replica-set-list/components/list/Index.vue b/dbm-ui/frontend/src/views/mongodb-manage/replica-set-list/components/list/Index.vue
index ef81852f1..ce9fb00aa 100644
--- a/dbm-ui/frontend/src/views/mongodb-manage/replica-set-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/mongodb-manage/replica-set-list/components/list/Index.vue
@@ -115,7 +115,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import ExcelAuthorize from '@components/cluster-common/ExcelAuthorize.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
   import DbTable from '@components/db-table/index.vue';
   import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
@@ -307,11 +307,12 @@
               ))
             }
             {
-              data.isDisabled && (
-                <db-icon
-                  svg
-                  type="yijinyong"
-                  class="disabled-tag" />
+              data.isOffline && (
+                <bk-tag
+                  class="ml-4"
+                  size="small">
+                  {t('已禁用')}
+                </bk-tag>
               )
             }
           </>
diff --git a/dbm-ui/frontend/src/views/mongodb-manage/shared-cluster-list/components/list/Index.vue b/dbm-ui/frontend/src/views/mongodb-manage/shared-cluster-list/components/list/Index.vue
index 915b27b79..dd3f90fec 100644
--- a/dbm-ui/frontend/src/views/mongodb-manage/shared-cluster-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/mongodb-manage/shared-cluster-list/components/list/Index.vue
@@ -132,7 +132,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import ExcelAuthorize from '@components/cluster-common/ExcelAuthorize.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
   import DbTable from '@components/db-table/index.vue';
   import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
@@ -298,11 +298,12 @@
               ))
             }
             {
-              data.isDisabled && (
-                <db-icon
-                  svg
-                  type="yijinyong"
-                  class="disabled-tag" />
+              data.isOffline && (
+                <bk-tag
+                  class="ml-4"
+                  size="small">
+                  {t('已禁用')}
+                </bk-tag>
               )
             }
           </>
diff --git a/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
index 3c2dde2f2..f20aff244 100644
--- a/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/mysql/ha-cluster-list/components/List.vue
@@ -150,7 +150,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import ExcelAuthorize from '@components/cluster-common/ExcelAuthorize.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
   import ClusterExportData from '@components/cluster-export-data/Index.vue'
   import DbStatus from '@components/db-status/index.vue';
@@ -399,11 +399,11 @@
                 }
                 {
                   data.isOffline && !data.isStarting && (
-                    <db-icon
-                      svg
-                      type="yijinyong"
-                      class="cluster-tag ml-4"
-                      style="width: 38px; height: 16px;" />
+                    <bk-tag
+                      class="ml-4"
+                      size="small">
+                      {t('已禁用')}
+                    </bk-tag>
                   )
                 }
                 {
diff --git a/dbm-ui/frontend/src/views/mysql/partition-manage/Index.vue b/dbm-ui/frontend/src/views/mysql/partition-manage/Index.vue
index d2a55be23..d779b90de 100644
--- a/dbm-ui/frontend/src/views/mysql/partition-manage/Index.vue
+++ b/dbm-ui/frontend/src/views/mysql/partition-manage/Index.vue
@@ -136,11 +136,11 @@
           }
           {
             data.isOffline && (
-              <db-icon
-                svg
-                type="yijinyong"
-                class="cluster-tag ml-4"
-                style="width: 38px; height: 16px;" />
+              <bk-tag
+                class="ml-4"
+                size="small">
+                {t('已禁用')}
+              </bk-tag>
             )
           }
         </div>
diff --git a/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
index 3e830a49a..6d8b64e2a 100644
--- a/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/mysql/single-cluster-list/components/List.vue
@@ -134,7 +134,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import ExcelAuthorize from '@components/cluster-common/ExcelAuthorize.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
   import ClusterExportData from '@components/cluster-export-data/Index.vue'
   import DbStatus from '@components/db-status/index.vue';
@@ -357,11 +357,11 @@
                 }
                 {
                   data.isOffline && !data.isStarting && (
-                    <db-icon
-                      svg
-                      type="yijinyong"
-                      class="cluster-tag"
-                      style="width: 38px; height: 16px;" />
+                    <bk-tag
+                      class="ml-4"
+                      size="small">
+                      {t('已禁用')}
+                    </bk-tag>
                   )
                 }
                 {
diff --git a/dbm-ui/frontend/src/views/pulsar-manage/common/expansion/Index.vue b/dbm-ui/frontend/src/views/pulsar-manage/common/expansion/Index.vue
index c4a0f03d7..fe0e1146c 100644
--- a/dbm-ui/frontend/src/views/pulsar-manage/common/expansion/Index.vue
+++ b/dbm-ui/frontend/src/views/pulsar-manage/common/expansion/Index.vue
@@ -135,6 +135,7 @@
         spec_id: 0,
         count: 1,
       },
+      tagText: t('接入层')
     },
     bookkeeper: {
       label: 'Bookkeeper',
@@ -152,6 +153,7 @@
         spec_id: 0,
         count: 1,
       },
+      tagText: t('存储层')
     },
   });
 
diff --git a/dbm-ui/frontend/src/views/pulsar-manage/common/shrink/Index.vue b/dbm-ui/frontend/src/views/pulsar-manage/common/shrink/Index.vue
index 493cb6389..c5828fc1c 100644
--- a/dbm-ui/frontend/src/views/pulsar-manage/common/shrink/Index.vue
+++ b/dbm-ui/frontend/src/views/pulsar-manage/common/shrink/Index.vue
@@ -111,6 +111,7 @@
       // 实际选择的缩容主机容量
       shrinkDisk: 0,
       minHost: 1,
+      tagText: t('接入层')
     },
     bookkeeper: {
       label: 'Bookkeeper',
@@ -120,6 +121,7 @@
       targetDisk: 0,
       shrinkDisk: 0,
       minHost: 2,
+      tagText: t('存储层')
     },
   });
 
diff --git a/dbm-ui/frontend/src/views/pulsar-manage/list/components/detail/components/node-list/Index.vue b/dbm-ui/frontend/src/views/pulsar-manage/list/components/detail/components/node-list/Index.vue
index 361c612aa..ba6dcdd34 100644
--- a/dbm-ui/frontend/src/views/pulsar-manage/list/components/detail/components/node-list/Index.vue
+++ b/dbm-ui/frontend/src/views/pulsar-manage/list/components/detail/components/node-list/Index.vue
@@ -165,10 +165,12 @@
       :show-footer="false"
       :title="t('节点详情')"
       :width="960">
-      <InstanceDetail
+      <BigdataInstanceDetail
         v-if="operationNodeData"
         :cluster-id="clusterId"
-        :data="operationNodeData" />
+        :cluster-type="ClusterTypes.PULSAE"
+        :data="operationNodeData"
+        @close="handleClose" />
     </DbSideslider>
   </div>
 </template>
@@ -189,6 +191,7 @@
 
   import { ClusterTypes } from '@common/const';
 
+  import BigdataInstanceDetail from '@components/bigdata-instance-detail/Index.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderClusterRole from '@components/cluster-common/RenderRole.vue';
   import RenderHostStatus from '@components/render-host-status/Index.vue';
@@ -204,7 +207,7 @@
 
   import { useTimeoutPoll } from '@vueuse/core';
 
-  import InstanceDetail from './components/InstanceDetail.vue';
+  // import InstanceDetail from './components/InstanceDetail.vue';
 
   interface Props {
     clusterId: number;
@@ -653,6 +656,10 @@
     isShowDetail.value = true;
     operationNodeData.value = data;
   };
+
+  const handleClose = () => {
+    isShowDetail.value = false;
+  };
 </script>
 <style lang="less">
   .pulsar-detail-node-list {
diff --git a/dbm-ui/frontend/src/views/pulsar-manage/list/components/detail/components/node-list/components/InstanceDetail.vue b/dbm-ui/frontend/src/views/pulsar-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
index 5915d0657..fc55a89a7 100644
--- a/dbm-ui/frontend/src/views/pulsar-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
+++ b/dbm-ui/frontend/src/views/pulsar-manage/list/components/detail/components/node-list/components/InstanceDetail.vue
@@ -53,7 +53,7 @@
 
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderInstanceStatus from '@components/cluster-common/RenderInstanceStatus.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
 
   import { useTimeoutPoll } from '@vueuse/core';
 
diff --git a/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
index bdabbb1f1..6e69d7c5e 100644
--- a/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/pulsar-manage/list/components/list/Index.vue
@@ -123,7 +123,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderNodeInstance from '@components/cluster-common/RenderNodeInstance.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
   import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
   import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
@@ -291,11 +291,15 @@
             {
               data.operationTagTips.map(item => <RenderOperationTag class="cluster-tag ml-4" data={item}/>)
             }
-            <db-icon
-              v-show={data.isOffline}
-              svg
-              type="yijinyong"
-              style="width: 38px; height: 16px; margin-left: 4px; vertical-align: middle;" />
+            {
+              data.isOffline && (
+                <bk-tag
+                  class="ml-4"
+                  size="small">
+                  {t('已禁用')}
+                </bk-tag>
+              )
+            }
             { data.isNew && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" /> }
             <db-icon
               type="copy"
diff --git a/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue b/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue
index ce27c95dc..3d67e3529 100644
--- a/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue
@@ -310,7 +310,11 @@
             }
             {
               !data.isOnline && !data.isStarting && (
-                <bk-tag size="small">{t('已禁用')}</bk-tag>
+                <bk-tag
+                  class="ml-4"
+                  size="small">
+                  {t('已禁用')}
+                </bk-tag>
               )
             }
             {
diff --git a/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue b/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
index adc4799d8..d780c1fea 100644
--- a/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/redis/list/components/list/Index.vue
@@ -171,7 +171,7 @@
 
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
   import DbStatus from '@components/db-status/index.vue';
   import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
@@ -509,7 +509,11 @@
             }
             {
               !data.isOnline && !data.isStarting && (
-                <bk-tag size="small">{t('已禁用')}</bk-tag>
+                <bk-tag
+                  class="ml-4"
+                  size="small">
+                  {t('已禁用')}
+                </bk-tag>
               )
             }
             {
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 c7386cfca..8440dc7dd 100644
--- a/dbm-ui/frontend/src/views/resource-manage/spec/Index.vue
+++ b/dbm-ui/frontend/src/views/resource-manage/spec/Index.vue
@@ -320,6 +320,25 @@
         },
       ],
     },
+    {
+      moduleId: 'bigdata',
+      label: 'Doris',
+      name: ClusterTypes.DORIS,
+      children: [
+        {
+          label: t('Follower节点规格'),
+          name: 'doris_follower',
+        },
+        {
+          label: t('Observer节点规格'),
+          name: 'doris_observer',
+        },
+        {
+          label: t('冷_热节点规格'),
+          name: 'doris_backend',
+        },
+      ],
+    },
   ];
 
   const curTab = ref<ClusterTypes>(ClusterTypes.TENDBSINGLE);
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 c3a2c6c49..2c52e9ecc 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
@@ -167,7 +167,8 @@
     influxdb: 'influxdb',
     pulsar: 'pulsar',
     tendbcluster: 'tendbcluster',
-    riak: 'riak'
+    riak: 'riak',
+    doris: 'doris'
   };
 
   const databaseType = databaseTypeMap[props.clusterType];
@@ -412,6 +413,7 @@
       disabled: ['spec_name', 'model'].includes(item.field as string),
     })),
     checked: columns.value.map(item => item.field).filter(key => !!key) as string[],
+    trigger: 'manual' as const,
   };
 
   const {
diff --git a/dbm-ui/frontend/src/views/riak-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/riak-manage/list/components/list/Index.vue
index eb0f0b795..b54c38da3 100644
--- a/dbm-ui/frontend/src/views/riak-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/riak-manage/list/components/list/Index.vue
@@ -101,7 +101,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
   import RenderNodeInstance from '@components/cluster-common/RenderNodeInstance.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
   import DbTable from '@components/db-table/index.vue';
   import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
@@ -271,10 +271,11 @@
                 }
                 {
                   data.isDisabled && (
-                    <db-icon
-                      svg
-                      type="yijinyong"
-                      class="disabled-tag" />
+                    <bk-tag
+                      class="ml-4"
+                      size="small">
+                      {t('已禁用')}
+                    </bk-tag>
                   )
                 }
               </>
diff --git a/dbm-ui/frontend/src/views/service-apply/index/Index.vue b/dbm-ui/frontend/src/views/service-apply/index/Index.vue
index 643b2c1e4..699dc6f57 100644
--- a/dbm-ui/frontend/src/views/service-apply/index/Index.vue
+++ b/dbm-ui/frontend/src/views/service-apply/index/Index.vue
@@ -284,6 +284,13 @@
           name: bigDataType[TicketTypes.HDFS_APPLY].name,
           icon: 'hdfs',
         },
+        {
+          controllerId: 'doris',
+          routeName: 'DorisApply',
+          id: bigDataType[TicketTypes.DORIS_APPLY].id,
+          name: bigDataType[TicketTypes.DORIS_APPLY].name,
+          icon: 'doris',
+        },
       ],
     },
     {
diff --git a/dbm-ui/frontend/src/views/service-apply/routes.ts b/dbm-ui/frontend/src/views/service-apply/routes.ts
index 198b8fffa..15b955cc8 100644
--- a/dbm-ui/frontend/src/views/service-apply/routes.ts
+++ b/dbm-ui/frontend/src/views/service-apply/routes.ts
@@ -139,6 +139,14 @@ const routes: RouteRecordRaw[] = [
         },
         component: () => import('@views/mongodb-manage/replica-set-apply/Index.vue'),
       },
+      {
+        name: 'DorisApply',
+        path: 'doris',
+        meta: {
+          navName: t('申请Doris集群部署'),
+        },
+        component: () => import('@views/doris-manage/apply/Index.vue'),
+      },
       {
         name: 'SelfServiceCreateDbModule',
         path: 'create-db-module/:type/:bk_biz_id/',
diff --git a/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue b/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
index eef1b6b93..09d753edc 100644
--- a/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/list/components/list/Index.vue
@@ -173,7 +173,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import ExcelAuthorize from '@components/cluster-common/ExcelAuthorize.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import EditEntryConfig from '@components/cluster-entry-config/Index.vue';
   import ClusterExportData from '@components/cluster-export-data/Index.vue'
   import DbStatus from '@components/db-status/index.vue';
@@ -436,12 +436,12 @@
                 }
                 {
                   data.isOffline && !data.isStarting && (
-                    <db-icon
-                    svg
-                    type="yijinyong"
-                    class="cluster-tag"
-                    style="width: 38px; height: 16px;" />
-                  )
+                    <bk-tag
+                      class="ml-4"
+                      size="small">
+                      {t('已禁用')}
+                    </bk-tag>
+                 )
                 }
                 {
                   data.isNew && (
diff --git a/dbm-ui/frontend/src/views/spider-manage/partition-manage/Index.vue b/dbm-ui/frontend/src/views/spider-manage/partition-manage/Index.vue
index 154f73a3f..878b37d09 100644
--- a/dbm-ui/frontend/src/views/spider-manage/partition-manage/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/partition-manage/Index.vue
@@ -136,11 +136,11 @@
           }
           {
             data.isOffline && (
-              <db-icon
-                svg
-                type="yijinyong"
-                class="cluster-tag ml-4"
-                style="width: 38px; height: 16px;" />
+              <bk-tag
+                class="ml-4"
+                size="small">
+                {t('已禁用')}
+              </bk-tag>
             )
           }
         </div>
diff --git a/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue
index 53f042a9e..53e74d9d0 100644
--- a/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/sqlserver-manage/ha-cluster-list/components/List.vue
@@ -179,7 +179,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import ExcelAuthorize from '@components/cluster-common/ExcelAuthorize.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
   import DbTable from '@components/db-table/index.vue';
   import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
diff --git a/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue b/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue
index f48a2ff93..626cef54c 100644
--- a/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue
+++ b/dbm-ui/frontend/src/views/sqlserver-manage/single-cluster/components/List.vue
@@ -178,7 +178,7 @@
   import ClusterCapacityUsageRate from '@components/cluster-capacity-usage-rate/Index.vue'
   import ExcelAuthorize from '@components/cluster-common/ExcelAuthorize.vue';
   import OperationBtnStatusTips from '@components/cluster-common/OperationBtnStatusTips.vue';
-  import RenderOperationTag from '@components/cluster-common/RenderOperationTag.vue';
+  import RenderOperationTag from '@components/cluster-common/RenderOperationTagNew.vue';
   import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
   import DbTable from '@components/db-table/index.vue';
   import DropdownExportExcel from '@components/dropdown-export-excel/index.vue';
@@ -365,7 +365,7 @@
                   {
                     data.operationTagTips.map(item => (
                       <RenderOperationTag
-                        class="cluster-tag"
+                        class="cluster-tag ml-4"
                         data={item} />
                     ))
                   }
@@ -450,7 +450,7 @@
           role="storages"
           clusterId={data.id}
         />
-    ),
+      )
     },
     {
       label: t('所属DB模块'),
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
index 6969bf1fc..d5db013e2 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
@@ -24,6 +24,7 @@
   import { TicketTypes } from '@common/const';
 
   import DetailsClusterOperation from './bigdata/DetailsClusterOperation.vue';
+  import DetailDoris from './bigdata/DetailsDoris.vue';
   import DetailsES from './bigdata/DetailsES.vue';
   import DetailsHDFS from './bigdata/DetailsHDFS.vue';
   import DetailsInfluxDB from './bigdata/DetailsInfluxDB.vue';
@@ -176,6 +177,9 @@
     TicketTypes.RIAK_CLUSTER_DISABLE,
     TicketTypes.RIAK_CLUSTER_ENABLE,
     TicketTypes.RIAK_CLUSTER_DESTROY,
+    TicketTypes.DORIS_DISABLE,
+    TicketTypes.DORIS_ENABLE,
+    TicketTypes.DORIS_DESTROY,
   ];
 
   const sqlserverApplyTiketType = [TicketTypes.SQLSERVER_SINGLE_APPLY, TicketTypes.SQLSERVER_HA_APPLY];
@@ -194,6 +198,7 @@
     TicketTypes.HDFS_REPLACE,
     TicketTypes.KAFKA_REPLACE,
     TicketTypes.PULSAR_REPLACE,
+    TicketTypes.DORIS_REPLACE,
   ];
 
   const spiderSlaveType = [TicketTypes.TENDBCLUSTER_RESTORE_LOCAL_SLAVE, TicketTypes.TENDBCLUSTER_RESTORE_SLAVE];
@@ -203,6 +208,7 @@
     TicketTypes.ES_REBOOT,
     TicketTypes.KAFKA_REBOOT,
     TicketTypes.PULSAR_REBOOT,
+    TicketTypes.DORIS_REBOOT,
   ];
 
   const bigDataCapacityType = [
@@ -214,6 +220,8 @@
     TicketTypes.KAFKA_SHRINK,
     TicketTypes.PULSAR_SHRINK,
     TicketTypes.PULSAR_SCALE_UP,
+    TicketTypes.DORIS_SHRINK,
+    TicketTypes.DORIS_SCALE_UP,
   ];
 
   const riakCapacityType = [TicketTypes.RIAK_CLUSTER_SCALE_IN, TicketTypes.RIAK_CLUSTER_SCALE_OUT];
@@ -350,6 +358,7 @@
     [TicketTypes.TENDBCLUSTER_MIGRATE_CLUSTER]: SpiderMigrateCluster,
     [TicketTypes.REDIS_INS_APPLY]: DetailsRedisHa,
     [TicketTypes.MYSQL_DUMP_DATA]: MysqlExportData,
+    [TicketTypes.DORIS_APPLY]: DetailDoris,
   };
 
   // 不同集群详情组件
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsDoris.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsDoris.vue
new file mode 100644
index 000000000..a9cf491cd
--- /dev/null
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsDoris.vue
@@ -0,0 +1,301 @@
+<!--
+ * 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>
+  <DemandInfo
+    :config="config"
+    :data="ticketDetails" />
+  <HostPreview
+    v-model:is-show="isPreviewShow"
+    :fetch-nodes="getTicketHostNodes"
+    :fetch-params="fetchNodesParams"
+    :title="previewTitle" />
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getTicketHostNodes } from '@services/source/ticket';
+  import { getInfrasCities } from '@services/ticket';
+  import type { TicketDetails } from '@services/types/ticket';
+
+  import { useSystemEnviron } from '@stores';
+
+  import HostPreview from '@components/host-preview/HostPreview.vue';
+
+  import { firstLetterToUpper } from '@utils';
+
+  import SpecInfos from '../../SpecInfos.vue';
+  import type { DorisCluster } from '../common/types';
+  import DemandInfo, {
+    type DemandInfoConfig
+  } from '../components/DemandInfo.vue';
+
+  interface Props {
+    ticketDetails: TicketDetails<DorisCluster>
+  }
+
+  type ResouceSpec = NonNullable<DorisCluster['resource_spec']>
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+  const { AFFINITY: affinityList } = useSystemEnviron().urls;
+
+  const isFromResourcePool = props.ticketDetails.details.ip_source === 'resource_pool';
+
+  const {
+    resource_spec: resourceSpec,
+  } = props.ticketDetails.details;
+  const followerSpec = resourceSpec?.follower || {} as ResouceSpec['follower'];
+  const observerSpec = resourceSpec?.observer || {} as ResouceSpec['observer'];;
+  const hotSpec = resourceSpec?.hot || {} as ResouceSpec['hot'];;
+  const coldSpec = resourceSpec?.cold || {} as ResouceSpec['cold'];;
+
+  const config: DemandInfoConfig[] = [
+    {
+      title: t('部署模块'),
+      list: [
+        {
+          label: t('所属业务'),
+          key: 'bk_biz_name',
+        },
+        {
+          label: t('业务英文名'),
+          key: 'db_app_abbr',
+        },
+        {
+          label: t('集群名称'),
+          key: 'details.cluster_name',
+        },
+        {
+          label: t('集群别名'),
+          key: 'details.cluster_alias',
+        },
+      ],
+    },
+    {
+      title: t('地域要求'),
+      list: [
+        {
+          label: t('数据库部署地域'),
+          render: () => cityName.value || '--',
+        },
+      ],
+    },
+    {
+      title: t('部署需求'),
+      list: [
+        {
+          label: t('容灾要求'),
+          render: () => affinity.value || '--',
+        },
+        {
+          label: t('Doris版本'),
+          key: 'details.db_version',
+        },
+        {
+          label: t('服务器选择方式'),
+          render: () => isFromResourcePool ? t('从资源池匹配') : t('手动选择'),
+        },
+        {
+          label: t('查询端口'),
+          key: 'details.query_port',
+        },
+        {
+          label: t('http端口'),
+          key: 'details.http_port',
+        },
+        {
+          label: t('备注'),
+          key: 'remark',
+        },
+      ],
+    },
+  ];
+
+  if (isFromResourcePool) {
+    config[2].list.push(
+      {
+        label: t('Follower节点'),
+        render: () => (
+          <bk-popover
+            placement="top"
+            theme="light">
+            {{
+              default: () => (
+                <span
+                  class="pb-2"
+                  style="cursor: pointer;border-bottom: 1px dashed #979ba5;">
+                  {followerSpec.spec_name }（{ `${followerSpec.count} ${t('台')}`}）
+                </span>
+              ),
+              content: () => <SpecInfos data={followerSpec} />,
+            }}
+          </bk-popover>
+        ),
+      },
+      {
+        label: t('Observer节点'),
+        render: () => (
+          <bk-popover
+            placement="top"
+            theme="light">
+            {{
+              default: () => (
+                <span
+                  class="pb-2"
+                  style="cursor: pointer;border-bottom: 1px dashed #979ba5;">
+                  {observerSpec.spec_name }（{ `${observerSpec.count} ${t('台')}`}）
+                </span>
+              ),
+              content: () => <SpecInfos data={observerSpec} />,
+            }}
+          </bk-popover>
+        ),
+      },
+      {
+        label: t('热节点'),
+        render: () => (
+          <bk-popover
+            placement="top"
+            theme="light">
+            {{
+              default: () => (
+                <span
+                  class="pb-2"
+                  style="cursor: pointer;border-bottom: 1px dashed #979ba5;">
+                  {hotSpec.spec_name }（{ `${hotSpec.count} ${t('台')}`}）
+                </span>
+              ),
+              content: () => <SpecInfos data={hotSpec} />,
+            }}
+          </bk-popover>
+        ),
+      },
+      {
+        label: t('冷节点'),
+        render: () => (
+          <bk-popover
+            placement="top"
+            theme="light">
+            {{
+              default: () => (
+                <span
+                  class="pb-2"
+                  style="cursor: pointer;border-bottom: 1px dashed #979ba5;">
+                  {coldSpec.spec_name }（{ `${coldSpec.count} ${t('台')}`}）
+                </span>
+              ),
+              content: () => <SpecInfos data={coldSpec} />,
+            }}
+          </bk-popover>
+        ),
+      },
+    )
+  } else {
+    config[2].list.push(
+      {
+        label: t('Follower节点IP'),
+        render: () => (
+          getServiceNums('follower') > 0
+            ? <bk-button
+                text
+                theme="primary"
+                onClick={() => handleShowPreview('follower')}>
+                {t('台')}
+              </bk-button>
+            : '--'
+        ),
+      },
+      {
+        label: t('Observer节点IP'),
+        render: () => (
+          getServiceNums('observer') > 0
+            ? <bk-button
+                text
+                theme="primary"
+                onClick={() => handleShowPreview('observer')}>
+                {t('台')}
+              </bk-button>
+            : '--'
+        ),
+      },
+      {
+        label: t('热节点IP'),
+        render: () => (
+          getServiceNums('hot') > 0
+            ? <bk-button
+                text
+                theme="primary"
+                onClick={() => handleShowPreview('hot')}>
+                {t('台')}
+              </bk-button>
+            : '--'
+        ),
+      },
+      {
+        label: t('冷节点IP'),
+        render: () => (
+          getServiceNums('cold') > 0
+            ? <bk-button
+                text
+                theme="primary"
+                onClick={() => handleShowPreview('cold')}>
+                {t('台')}
+              </bk-button>
+            : '--'
+        ),
+      },
+    )
+  }
+
+  const cityName = ref('--');
+  const isPreviewShow = ref(false)
+  const previewRole = ref('')
+  const previewTitle = ref('')
+
+  const affinity = computed(() => {
+    const level = props.ticketDetails.details.disaster_tolerance_level;
+    if (level && affinityList) {
+      return affinityList.find(item => item.value === level)?.label;
+    }
+    return '--';
+  });
+
+  const fetchNodesParams = computed(() => ({
+    bk_biz_id: props.ticketDetails.bk_biz_id,
+    id: props.ticketDetails.id,
+    role: previewRole.value,
+  }));
+
+  useRequest(getInfrasCities, {
+    onSuccess: (cityList) => {
+      const cityCode = props.ticketDetails.details.city_code;
+      const name = cityList.find(item => item.city_code === cityCode)?.city_name;
+      cityName.value = name ?? '--';
+    },
+  });
+
+  const getServiceNums = (key: 'follower' | 'observer' | 'hot' | 'cold') => {
+    const nodes = props.ticketDetails.details?.nodes;
+    return nodes?.[key].length ?? 0;
+  }
+
+  const handleShowPreview = (role: 'follower' | 'observer' | 'hot' | 'cold') => {
+    isPreviewShow.value = true;
+    previewRole.value = role;
+    previewTitle.value = `【${firstLetterToUpper(role)}】${t('主机预览')}`;
+  }
+</script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/expansion-capacity/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/expansion-capacity/Index.vue
index 7d3b1128c..a196b070d 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/expansion-capacity/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/expansion-capacity/Index.vue
@@ -118,6 +118,8 @@
     proxy: 'Proxy',
     slave: 'Slave',
     bookkeeper: 'Bookkeeper',
+    follower: 'Follower',
+    observer: 'Observer',
   };
   const isScaleUp = props.ticketDetails.ticket_type.includes('SCALE_UP');
   const isFromResourcePool = props.ticketDetails.details.ip_source === 'resource_pool';
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/common/types.ts b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/common/types.ts
index ea882f7d5..dbb5941c2 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/common/types.ts
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/common/types.ts
@@ -15,6 +15,8 @@ import type { clustersItems } from '@services/types/ticket';
 
 import { ClusterTypes } from '@common/const';
 
+import type { IHostTableData } from '@components/cluster-common/big-data-host-table/HdfsHostTable.vue';
+
 // MongoDB 副本集群
 export interface DetailsMongoDBReplicaSet {
   bk_cloud_name: string;
@@ -291,6 +293,31 @@ export interface RedisHaApply {
   };
 }
 
+// Doris 集群
+export interface DorisCluster {
+  db_app_abbr: string;
+  city_code: string;
+  cluster_alias: string;
+  cluster_name: string;
+  db_version: string;
+  disaster_tolerance_level: string;
+  http_port: number;
+  ip_source: string;
+  nodes?: {
+    follower: IHostTableData[];
+    observer: IHostTableData[];
+    hot: IHostTableData[];
+    cold: IHostTableData[];
+  };
+  query_port: number;
+  resource_spec?: {
+    follower: SpecInfo;
+    observer: SpecInfo;
+    hot: SpecInfo;
+    cold: SpecInfo;
+  };
+}
+
 export type TicketDetailTypes =
   | DetailsMongoDBReplicaSet
   | DetailsMongoDBSharedCluster
@@ -299,4 +326,5 @@ export type TicketDetailTypes =
   | SqlserverDbBackup
   | SqlserverAuthorizeRules
   | SpiderMigrateCluster
-  | RedisHaApply;
+  | RedisHaApply
+  | DorisCluster;
diff --git a/dbm-ui/frontend/src/views/version-files/list/Index.vue b/dbm-ui/frontend/src/views/version-files/list/Index.vue
index d2535f0b0..c38d7cebb 100644
--- a/dbm-ui/frontend/src/views/version-files/list/Index.vue
+++ b/dbm-ui/frontend/src/views/version-files/list/Index.vue
@@ -304,6 +304,20 @@
         },
       ],
     },
+    {
+      controller: {
+        moduleId: 'bigdata',
+        id: 'doris',
+      },
+      label: 'Doris',
+      name: DBTypes.DORIS,
+      children: [
+        {
+          label: 'Doris',
+          name: DBTypes.DORIS,
+        },
+      ],
+    },
   ];
 
   const renderTabs = tabs.filter((item) => {
@@ -339,7 +353,12 @@
   const packageTypeMap = ref<Record<string, string[]>>({});
   const activeTabInfo = computed(() => {
     const tabList = renderTabs.find((item) => item.name === tabActive.value);
-    return tabList ? tabList : { label: '', name: '' };
+    return tabList
+      ? tabList
+      : {
+          label: '',
+          name: '',
+        };
   });
 
   const pkgList = computed(() => packageTypeMap.value![tabActive.value] ?? []);
diff --git a/dbm-ui/frontend/src/views/version-files/list/components/FileContent.vue b/dbm-ui/frontend/src/views/version-files/list/components/FileContent.vue
index 7e7e3fab4..ac7034320 100644
--- a/dbm-ui/frontend/src/views/version-files/list/components/FileContent.vue
+++ b/dbm-ui/frontend/src/views/version-files/list/components/FileContent.vue
@@ -232,7 +232,7 @@
   const tabs = computed(() => props.info.children || []);
   // 版本是否为输入框
   const isInputType = computed(() => {
-    const bigData: string[] = [DBTypes.KAFKA, DBTypes.ES, DBTypes.HDFS, DBTypes.PULSAR, DBTypes.INFLUXDB];
+    const bigData: string[] = [DBTypes.KAFKA, DBTypes.ES, DBTypes.HDFS, DBTypes.PULSAR, DBTypes.INFLUXDB, DBTypes.DORIS];
     return (bigData.includes(props.info.name) && state.active !== 'actuator' || props.info.name === DBTypes.MONGODB);
   });
   const fileTips = computed(() => ({