From 40ffffccf978753084474d2b35ce5f40940173ab Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Thu, 14 Nov 2024 11:07:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E9=9B=86=E7=BE=A4=E6=A0=87?=
 =?UTF-8?q?=E5=87=86=E5=8C=96=20#4654?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...queryClusterTypes.ts => dbClusterTypes.ts} |   2 +-
 dbm-ui/frontend/src/common/const/index.ts     |   2 +-
 dbm-ui/frontend/src/locales/zh-cn.json        |   1 +
 dbm-ui/frontend/src/services/source/dbbase.ts |  52 +++--
 dbm-ui/frontend/src/services/source/mysql.ts  |   7 -
 .../src/services/types/clusterInfo.ts         |  32 +++
 dbm-ui/frontend/src/services/types/index.ts   |   1 +
 .../src/views/cluster-standardize/Index.vue   |   4 +-
 .../components/cluster-selector/Index.vue     |  84 ++++---
 .../components/cluster-select/Index.vue       |   8 +-
 .../components/cluster-select/Table.vue       |  18 +-
 .../cluster-select/hooks/useTableData.ts      |  27 ++-
 .../components/common/PanelTab.vue            |  44 +++-
 .../components/manual-input/Index.vue         |  52 +++--
 .../components/manual-input/Table.vue         |  18 +-
 .../components/preview-result/Index.vue       |  16 +-
 .../components/mysql/Index.vue                |  19 +-
 .../components/tendbcluster/Index.vue         | 208 ++++++++++++++++++
 .../components/render-data/Index.vue          |  75 +++++++
 .../components/render-data/Row.vue            | 163 ++++++++++++++
 .../webconsole/components/ClusterTabs.vue     |   4 +-
 .../partition-manage/components/Operation.vue |   4 +-
 .../components/SelectClusters.vue             |   4 +-
 23 files changed, 687 insertions(+), 158 deletions(-)
 rename dbm-ui/frontend/src/common/const/{queryClusterTypes.ts => dbClusterTypes.ts} (97%)
 create mode 100644 dbm-ui/frontend/src/services/types/clusterInfo.ts
 create mode 100644 dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/components/render-data/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/components/render-data/Row.vue

diff --git a/dbm-ui/frontend/src/common/const/queryClusterTypes.ts b/dbm-ui/frontend/src/common/const/dbClusterTypes.ts
similarity index 97%
rename from dbm-ui/frontend/src/common/const/queryClusterTypes.ts
rename to dbm-ui/frontend/src/common/const/dbClusterTypes.ts
index ea08f507c0..2d1e760df4 100644
--- a/dbm-ui/frontend/src/common/const/queryClusterTypes.ts
+++ b/dbm-ui/frontend/src/common/const/dbClusterTypes.ts
@@ -4,7 +4,7 @@ import { DBTypes } from './dbTypes';
 /**
  * db类型关联集群类型集合映射关系
  */
-export const queryClusterTypes = {
+export const DBClusterTypes = {
   [DBTypes.MYSQL]: [ClusterTypes.TENDBSINGLE, ClusterTypes.TENDBHA],
   [DBTypes.TENDBCLUSTER]: [ClusterTypes.TENDBCLUSTER],
   [DBTypes.REDIS]: [
diff --git a/dbm-ui/frontend/src/common/const/index.ts b/dbm-ui/frontend/src/common/const/index.ts
index e600c24e77..78405019b9 100644
--- a/dbm-ui/frontend/src/common/const/index.ts
+++ b/dbm-ui/frontend/src/common/const/index.ts
@@ -4,6 +4,7 @@ export * from './clusterInsStatus';
 export * from './clusterTypeInfos';
 export * from './clusterTypes';
 export * from './confLevels';
+export * from './dbClusterTypes';
 export * from './dbSysExclude';
 export * from './dbTypeInfos';
 export * from './dbTypes';
@@ -12,7 +13,6 @@ export * from './machineTypes';
 export * from './occupiedInnerHeight';
 export * from './osTypes';
 export * from './pipelineStatus';
-export * from './queryClusterTypes';
 export * from './ticketTypeInfos';
 export * from './ticketTypes';
 export * from './userPersonalSettings';
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 0f8031c8f8..c1186c116c 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3659,5 +3659,6 @@
   "模糊搜索": "模糊搜索",
   "精确搜索": "精确搜索",
   "每个分类最多显示 10 条记录，点击搜索可查看全部记录。": "每个分类最多显示 10 条记录，点击搜索可查看全部记录。",
+  "TenDBCluster集群": "TenDBCluster集群",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/source/dbbase.ts b/dbm-ui/frontend/src/services/source/dbbase.ts
index 8170495351..16e92f132f 100644
--- a/dbm-ui/frontend/src/services/source/dbbase.ts
+++ b/dbm-ui/frontend/src/services/source/dbbase.ts
@@ -11,7 +11,7 @@
  * the specific language governing permissions and limitations under the License.
  */
 
-import type { InstanceInfos, ListBase } from '@services/types';
+import type { ClusterInfo, InstanceInfos, ListBase } from '@services/types';
 
 import { ClusterTypes } from '@common/const';
 
@@ -106,6 +106,28 @@ export function checkInstance<T extends InstanceInfos>(params: { instance_addres
 
 // 查询全集群信息
 export function queryAllTypeCluster(params: {
+  bk_biz_id: number;
+  cluster_types?: string;
+  immute_domain?: string;
+  phase?: string;
+  limit?: number;
+  offset?: number;
+}) {
+  return http.get<
+    {
+      bk_cloud_id: number;
+      cluster_type: string;
+      id: number;
+      immute_domain: string;
+      major_version: string;
+      name: string;
+      region: string;
+    }[]
+  >(`${path}/simple_query_cluster/`, params);
+}
+
+// 全集群列表
+export function queryAllTypeClusterList(params: {
   bk_biz_id?: number; // 业务id
   cluster_types?: string; // 集群类型(逗号间隔)
   immute_domain?: string; // 集群域名
@@ -121,24 +143,12 @@ export function queryAllTypeCluster(params: {
   limit?: number;
   offset?: number;
 }) {
-  return http.get<
-    ListBase<
-      {
-        alias: string;
-        bk_biz_id: number;
-        bk_cloud_id: number;
-        bk_cloud_name: string;
-        cluster_type: string;
-        db_module_id: number;
-        db_module_name: string;
-        id: number;
-        immute_domain: string;
-        major_version: string;
-        name: string;
-        phase: string;
-        region: string;
-        status: string;
-      }[]
-    >
-  >(`${path}/simple_query_cluster/`, params);
+  return http.get<ListBase<ClusterInfo[]>>(`${path}/simple_query_cluster_v2/`, params);
+}
+
+/**
+ * 根据用户手动输入的域名列表查询
+ */
+export function checkDomains(params: { domains: string[] }) {
+  return http.post<ClusterInfo[]>(`${path}/check_domains/`, params);
 }
diff --git a/dbm-ui/frontend/src/services/source/mysql.ts b/dbm-ui/frontend/src/services/source/mysql.ts
index edf6079f95..4e9077ac8f 100644
--- a/dbm-ui/frontend/src/services/source/mysql.ts
+++ b/dbm-ui/frontend/src/services/source/mysql.ts
@@ -39,10 +39,3 @@ export function getClusterList(params: {
 }) {
   return http.post<ListBase<TendbhaModel[]>>(`/apis/mysql/query_clusters/`, params);
 }
-
-/**
- * 根据用户手动输入的域名列表查询
- */
-export function checkDomains(params: { domains: Array<string> }) {
-  return http.post<Array<TendbhaModel>>(`/apis/mysql/check_domains/`, params);
-}
diff --git a/dbm-ui/frontend/src/services/types/clusterInfo.ts b/dbm-ui/frontend/src/services/types/clusterInfo.ts
new file mode 100644
index 0000000000..b9fb14200b
--- /dev/null
+++ b/dbm-ui/frontend/src/services/types/clusterInfo.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 interface ClusterInfo {
+  alias: string;
+  bk_biz_id: number;
+  bk_cloud_id: number;
+  bk_cloud_name: string;
+  cluster_type: string;
+  db_module_id: number;
+  db_module_name: string;
+  id: number;
+  immute_domain: string;
+  major_version: string;
+  name: string;
+  phase: string;
+  region: string;
+  status: string;
+}
diff --git a/dbm-ui/frontend/src/services/types/index.ts b/dbm-ui/frontend/src/services/types/index.ts
index 7611694be7..82bdce0f3c 100644
--- a/dbm-ui/frontend/src/services/types/index.ts
+++ b/dbm-ui/frontend/src/services/types/index.ts
@@ -12,6 +12,7 @@
  */
 
 export * from './bizItem';
+export * from './clusterInfo';
 export * from './common';
 export * from './db';
 export * from './hostInfo';
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/Index.vue
index 72642d1ca4..a41162d0de 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/Index.vue
@@ -28,14 +28,16 @@
 
   import Mysql from './components/mysql/Index.vue';
   import Success from './components/Success.vue';
+  import Tendbcluster from './components/tendbcluster/Index.vue';
 
   const router = useRouter();
   const route = useRoute();
 
-  const exclude = Object.values(DBTypes).filter((type) => type !== DBTypes.MYSQL);
+  const exclude = Object.values(DBTypes).filter((type) => ![DBTypes.TENDBCLUSTER, DBTypes.MYSQL].includes(type));
 
   const comMap = {
     [DBTypes.MYSQL]: Mysql,
+    [DBTypes.TENDBCLUSTER]: Tendbcluster,
   } as Record<string, any>;
 
   const active = ref(DBTypes.MYSQL);
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue
index c1bde80c03..a7115d8383 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue
@@ -31,9 +31,9 @@
       <template #main>
         <PanelTab
           v-model="panelTabActive"
-          :tab-list="tabListMap[dbType]" />
+          :db-type="dbType" />
         <Component
-          :is="renderCom"
+          :is="ClusterSelect"
           :key="panelTabActive"
           :active-panel-id="panelTabActive"
           :last-values="lastValues"
@@ -68,34 +68,39 @@
     </template>
   </BkDialog>
 </template>
-
 <script lang="ts">
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
-
-  export type ICluster = ServiceReturnType<typeof queryAllTypeCluster>['results'][number];
+  import type { ClusterInfo } from '@services/types';
 
-  interface Props {
-    dbType: DBTypes;
-    selected: Record<string, ICluster[]>;
-  }
+  import { ClusterTypes, DBTypes } from '@common/const';
 
-  interface Emits {
-    (e: 'change', value: Props['selected']): void;
+  interface SelectedMap {
+    [DBTypes.MYSQL]: {
+      [ClusterTypes.TENDBHA]: ClusterInfo[];
+      [ClusterTypes.TENDBSINGLE]: ClusterInfo[];
+    };
+    [DBTypes.TENDBCLUSTER]: {
+      [ClusterTypes.TENDBCLUSTER]: ClusterInfo[];
+    };
   }
 </script>
-<script setup lang="ts">
-  import { ClusterTypes, DBTypes } from '@common/const';
-
-  import { t } from '@locales/index';
+<script setup lang="ts" generic="T extends keyof SelectedMap">
+  import { useI18n } from 'vue-i18n';
 
   import ClusterSelect from './components/cluster-select/Index.vue';
   import PanelTab from './components/common/PanelTab.vue';
-  import ManualInput from './components/manual-input/Index.vue';
+  // import ManualInput from './components/manual-input/Index.vue';
   import PreviewResult from './components/preview-result/Index.vue';
 
-  const props = withDefaults(defineProps<Props>(), {
-    selected: () => ({}),
-  });
+  interface Props {
+    dbType: T;
+    selected: SelectedMap[T];
+  }
+
+  interface Emits {
+    (e: 'change', value: ClusterInfo[]): void;
+  }
+
+  const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
@@ -103,28 +108,19 @@
     default: false,
   });
 
-  const tabListMap = {
-    [DBTypes.MYSQL]: [
-      {
-        id: ClusterTypes.TENDBHA,
-        name: t('MySQL主从'),
-      },
-      {
-        id: ClusterTypes.TENDBSINGLE,
-        name: t('MySQL单节点'),
-      },
-    ],
-  } as Record<DBTypes, { id: string; name: string }[]>;
-
-  const panelTabActive = ref(tabListMap[props.dbType][0].id);
-  const lastValues = reactive<NonNullable<Props['selected']>>({});
-
-  const renderCom = computed(() => {
-    if (panelTabActive.value === 'manual') {
-      return ManualInput;
-    }
-    return ClusterSelect;
-  });
+  const { t } = useI18n();
+
+  const panelTabActive = ref();
+  const lastValues = reactive<Record<string, ClusterInfo[]>>({});
+
+  // const renderCom = computed(
+  //   () => {
+  //     if (panelTabActive.value === 'manual') {
+  //       return ManualInput;
+  //     }
+  //     return ClusterSelect;
+  //   }
+  // );
   const isEmpty = computed(() => Object.values(lastValues).every((values) => values.length < 1));
 
   watch(
@@ -152,12 +148,12 @@
     lastValues[oldValue] = [];
   });
 
-  const handleChange = (values: Props['selected']) => {
+  const handleChange = (values: Record<string, ClusterInfo[]>) => {
     Object.assign(lastValues, values);
   };
 
   const handleSubmit = () => {
-    emits('change', lastValues);
+    emits('change', Object.values(lastValues).flat());
     handleClose();
   };
 
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Index.vue
index 63f84cba32..e51777caa7 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Index.vue
@@ -78,10 +78,10 @@
     </div>
   </BkLoading>
 </template>
-<script setup lang="ts" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/types';
 
   import { ClusterTypes } from '@common/const';
 
@@ -89,8 +89,8 @@
   import Table from './Table.vue';
 
   interface Props {
-    lastValues: Record<string, T[]>;
-    activePanelId?: string;
+    lastValues: Record<string, ClusterInfo[]>;
+    activePanelId: string;
   }
 
   interface Emits {
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Table.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Table.vue
index 20ce498832..b0f5d537f9 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Table.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Table.vue
@@ -36,10 +36,10 @@
     </BkLoading>
   </div>
 </template>
-<script setup lang="tsx" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/types';
 
   import { useLinkQueryColumnSerach } from '@hooks';
 
@@ -51,12 +51,12 @@
   import type { TopoTreeNode } from './hooks/useTopoData';
 
   interface DataRow {
-    data: T,
+    data: ClusterInfo,
   }
 
   interface Props {
+    lastValues: Record<string, ClusterInfo[]>;
     activePanelId: string;
-    lastValues: Record<string, T[]>;
     selectedTreeNode?: TopoTreeNode;
   }
 
@@ -112,10 +112,10 @@
   } = useLinkQueryColumnSerach({
     searchType: props.activePanelId,
     fetchDataFn: () => fetchResources(),
-    isQueryAttrs: false
+    isQueryAttrs: false,
   });
 
-  const checkedMap = shallowRef({} as Record<string, T>);
+  const checkedMap = shallowRef({} as Record<string, ClusterInfo>);
 
   const params = computed<{ cluster_types: string; bk_biz_id?: number; db_module_id?: number }>(() => {
     const base = {
@@ -263,12 +263,12 @@
   }, { immediate: true, deep: true });
 
   const triggerChange = () => {
-    const result = Object.values(checkedMap.value).reduce((result, item) => {
+    const result = Object.values(checkedMap.value).reduce<ClusterInfo[]>((result, item) => {
       result.push({
         ...item,
       });
       return result;
-    }, [] as T[]);
+    }, []);
 
     if (props.activePanelId) {
       emits('change', {
@@ -278,7 +278,7 @@
     }
   };
 
-  const handleTableSelectOne = (checked: boolean, data: T) => {
+  const handleTableSelectOne = (checked: boolean, data: ClusterInfo) => {
     const lastCheckMap = { ...checkedMap.value };
     if (checked) {
       lastCheckMap[data.immute_domain] = data;
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/hooks/useTableData.ts b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/hooks/useTableData.ts
index 668245753a..9344d25a69 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/hooks/useTableData.ts
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/hooks/useTableData.ts
@@ -12,9 +12,10 @@
  */
 
 import type { ISearchValue } from 'bkui-vue/lib/search-select/utils';
+import _ from 'lodash';
 import { useRequest } from 'vue-request';
 
-import { queryAllTypeCluster } from '@services/source/dbbase';
+import { type ClusterInfo, queryAllTypeClusterList } from '@services/source/dbbase';
 
 import { getSearchSelectorParams } from '@utils';
 
@@ -29,7 +30,7 @@ export function useTableData(
     db_module_id?: number;
   }>,
 ) {
-  const tableData = shallowRef<ServiceReturnType<typeof queryAllTypeCluster>['results']>([]);
+  const tableData = shallowRef<ClusterInfo[]>([]);
   const pagination = reactive({
     count: 0,
     current: 1,
@@ -39,15 +40,21 @@ export function useTableData(
     layout: ['total', 'limit', 'list'],
   });
 
-  const searchParams = computed(() => ({
-    limit: pagination.limit,
-    offset: (pagination.current - 1) * pagination.limit,
-    extra: 1,
-    ...getSearchSelectorParams(searchSelectValue.value),
-    ...params.value,
-  }));
+  const searchParams = computed(() => {
+    const comParams = getSearchSelectorParams(searchSelectValue.value);
+    const cloneParams = _.cloneDeep(comParams);
+    delete cloneParams.domain;
+    return {
+      limit: pagination.limit,
+      offset: (pagination.current - 1) * pagination.limit,
+      extra: 1,
+      immute_domain: comParams.domain,
+      ...cloneParams,
+      ...params.value,
+    };
+  });
 
-  const { run: fetchDataFn, loading: isLoading } = useRequest(queryAllTypeCluster, {
+  const { run: fetchDataFn, loading: isLoading } = useRequest(queryAllTypeClusterList, {
     manual: true,
     onSuccess(data) {
       tableData.value = data.results;
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/common/PanelTab.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/common/PanelTab.vue
index b6ef46339b..0166df41c9 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/common/PanelTab.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/common/PanelTab.vue
@@ -44,11 +44,15 @@
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
+  import { ClusterTypes, DBTypes } from '@common/const';
+
+  interface TabItem {
+    id: string;
+    name: string;
+  }
+
   interface Props {
-    tabList: {
-      id: string;
-      name: string;
-    }[];
+    dbType: DBTypes;
   }
 
   const props = defineProps<Props>();
@@ -61,15 +65,43 @@
 
   const tabTipsRef = ref();
 
+  const tabListMap = {
+    [DBTypes.MYSQL]: [
+      {
+        id: ClusterTypes.TENDBHA,
+        name: t('MySQL主从'),
+      },
+      {
+        id: ClusterTypes.TENDBSINGLE,
+        name: t('MySQL单节点'),
+      },
+    ],
+    [DBTypes.TENDBCLUSTER]: [
+      {
+        id: ClusterTypes.TENDBCLUSTER,
+        name: t('TenDB集群'),
+      },
+    ],
+  } as Record<DBTypes, TabItem[]>;
+
   const panelList = computed(() => [
-    ...props.tabList,
+    ...tabListMap[props.dbType],
     // {
     //   id: 'manual',
     //   name: t('手动输入'),
     // },
   ]);
 
-  const handleClick = (tab: Props['tabList'][number]) => {
+  watch(
+    () => props.dbType,
+    () => {
+      if (props.dbType) {
+        modelValue.value = tabListMap[props.dbType][0].id;
+      }
+    },
+  );
+
+  const handleClick = (tab: TabItem) => {
     if (modelValue.value === tab.id) {
       return;
     }
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Index.vue
index de2550c5a7..7a0379ce1f 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Index.vue
@@ -79,7 +79,8 @@
       <template #main>
         <BkLoading :loading="inputState.isLoading">
           <Table
-            :checked="checkedMap"
+            :active-panel-id="activePanelId"
+            :last-values="lastValues"
             :table-data="tableData"
             @change="handleChange" />
         </BkLoading>
@@ -87,39 +88,38 @@
     </BkResizeLayout>
   </div>
 </template>
-<script setup lang="ts" generic="T extends TendbhaModel">
+<script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
-  import type TendbhaModel from '@services/model/mysql/tendbha';
-  import { checkDomains } from '@services/source/mysql';
+  import { checkDomains } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/types';
 
   import { domainRegex } from '@common/regex';
 
   import Table from './Table.vue';
 
   interface Props {
-    checked: Record<string, T>;
-    checkKey?: string;
+    lastValues: Record<string, ClusterInfo[]>;
+    activePanelId: string;
   }
 
   interface Emits {
-    (e: 'change', value: Props['checked']): void;
+    (e: 'change', value: Props['lastValues']): void;
   }
-  const props = withDefaults(defineProps<Props>(), {
-    checkKey: 'master_domain',
-  });
+
+  const props = defineProps<Props>();
+
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
   const inputRef = ref();
-  const checkedMap = computed(() => props.checked);
 
   const inputState = reactive({
     values: '',
     placeholder: t('请输入访问入口_多个可使用换行_空格或_分隔'),
     isLoading: false,
   });
-  const tableData = shallowRef<T[]>([]);
+  const tableData = shallowRef<ClusterInfo[]>([]);
   const errorState = reactive({
     format: {
       show: false,
@@ -135,7 +135,7 @@
     },
   });
 
-  const handleChange = (checked: Props['checked']) => {
+  const handleChange = (checked: Props['lastValues']) => {
     emits('change', checked);
   };
 
@@ -193,16 +193,16 @@
         domains: lines,
       };
       const results = await checkDomains(params);
-      const legalDomains: T[] = [];
+      const legalDomains: ClusterInfo[] = [];
       for (let i = lines.length - 1; i >= 0; i--) {
         const item = lines[i];
         const infos = results[i];
         const remove = lines.splice(i, 1);
-        const isExisted = results.find((existItem) => existItem[props.checkKey as keyof TendbhaModel] === item);
+        const isExisted = results.find((existItem) => existItem.immute_domain === item);
         if (!isExisted) {
           legalLines.push(...remove);
         } else {
-          legalDomains.push(infos as T);
+          legalDomains.push(infos as ClusterInfo);
         }
       }
       tableData.value.splice(0, tableData.value.length, ...legalDomains);
@@ -212,12 +212,24 @@
       errorState.domain.selectionEnd = legalLines.join('\n').length;
 
       // 解析完成后选中
-      const checked = { ...props.checked };
+      const lastValues = { ...props.lastValues };
       for (const item of tableData.value) {
-        const domain = item.master_domain;
-        checked[domain] = item as T;
+        const clusterType = props.activePanelId;
+        if (!lastValues[clusterType]) {
+          lastValues[clusterType] = [];
+        }
+        const list = lastValues[clusterType];
+        const isExisted =
+          list.length > 0 &&
+          list.find((i) => `${i.immute_domain}_${i.bk_cloud_id}` === `${item.immute_domain}_${item.bk_cloud_id}`);
+        if (!isExisted) {
+          lastValues[clusterType].push(item);
+        }
       }
-      emits('change', checked);
+      emits('change', {
+        ...props.lastValues,
+        ...lastValues,
+      });
     } catch (_) {
       console.error(_);
     }
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Table.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Table.vue
index 1d54f217ed..12c4e9464a 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Table.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/manual-input/Table.vue
@@ -27,20 +27,20 @@
       :settings="tableSettings" />
   </div>
 </template>
-<script setup lang="tsx" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/types';
 
   import DbStatus from '@components/db-status/index.vue';
 
   interface DataRow {
-    data: T,
+    data: ClusterInfo,
   }
 
   interface Props {
+    lastValues: Record<string, ClusterInfo[]>;
     activePanelId: string;
-    lastValues: Record<string, T[]>;
   }
 
   interface Emits {
@@ -63,9 +63,9 @@
     layout: ['total', 'limit', 'list'],
   });
 
-  const checkedMap = shallowRef({} as Record<string, T>);
+  const checkedMap = shallowRef({} as Record<string, ClusterInfo>);
 
-  const tableData = shallowRef<T[]>([]);
+  const tableData = shallowRef<ClusterInfo[]>([]);
 
   const isSelectedAll = computed(() => (tableData.value.length > 0
     // eslint-disable-next-line max-len
@@ -214,12 +214,12 @@
   }, { immediate: true, deep: true });
 
   const triggerChange = () => {
-    const result = Object.values(checkedMap.value).reduce((result, item) => {
+    const result = Object.values(checkedMap.value).reduce<ClusterInfo[]>((result, item) => {
       result.push({
         ...item,
       });
       return result;
-    }, [] as T[]);
+    }, []);
 
     if (props.activePanelId) {
       emits('change', {
@@ -229,7 +229,7 @@
     }
   };
 
-  const handleTableSelectOne = (checked: boolean, data: T) => {
+  const handleTableSelectOne = (checked: boolean, data: ClusterInfo) => {
     const lastCheckMap = { ...checkedMap.value };
     if (checked) {
       lastCheckMap[data.immute_domain] = data;
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/preview-result/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/preview-result/Index.vue
index b2227568a7..34623443dc 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/preview-result/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/preview-result/Index.vue
@@ -63,10 +63,10 @@
     </div>
   </div>
 </template>
-<script setup lang="ts" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
+<script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
-  import type { queryAllTypeCluster } from '@services/source/dbbase';
+  import type { ClusterInfo } from '@services/types';
 
   import { useCopy } from '@hooks';
 
@@ -77,12 +77,10 @@
   import CollapseMini from './CollapseMini.vue';
 
   interface Props {
-    lastValues: Record<string, T[]>;
-    activePanelId?: string;
+    lastValues: Record<string, ClusterInfo[]>;
+    activePanelId: string;
   }
 
-  type Keys = keyof Props['lastValues'];
-
   interface Emits {
     (e: 'change', value: Props['lastValues']): void;
   }
@@ -95,7 +93,7 @@
   const { t } = useI18n();
   const copy = useCopy();
 
-  const keys = computed(() => Object.keys(props.lastValues) as Keys[]);
+  const keys = computed(() => Object.keys(props.lastValues));
   const isEmpty = computed(() => keys.value.every((key) => props.lastValues[key].length < 1));
 
   const handleClear = () => {
@@ -104,7 +102,7 @@
     });
   };
 
-  const handleRemove = (key: Keys, index: number) => {
+  const handleRemove = (key: string, index: number) => {
     const target = props.lastValues[key];
     target.splice(index, 1);
     emits('change', {
@@ -122,7 +120,7 @@
       return;
     }
 
-    const clusters: T[] = [];
+    const clusters: ClusterInfo[] = [];
     for (const key of keys.value) {
       clusters.push(...props.lastValues[key]);
     }
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/mysql/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/mysql/Index.vue
index e6faa18023..58b3e72144 100644
--- a/dbm-ui/frontend/src/views/cluster-standardize/components/mysql/Index.vue
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/mysql/Index.vue
@@ -65,10 +65,11 @@
   import { useRequest } from 'vue-request';
 
   import { createTicket } from '@services/source/ticket';
+  import type { ClusterInfo } from '@services/types';
 
   import { ClusterTypes, DBTypes, TicketTypes } from '@common/const';
 
-  import ClusterSelector, { type ICluster } from '../cluster-selector/Index.vue';
+  import ClusterSelector from '../cluster-selector/Index.vue';
   import type { ClusterModel } from '../common/RenderCluster.vue';
 
   import RenderData from './components/render-data/Index.vue';
@@ -82,9 +83,9 @@
 
   const isShowBatchSelector = ref(false);
   const tableData = ref<IDataRow[]>([createRowData()]);
-  const selected = shallowRef<Record<string, ICluster[]>>({
-    [ClusterTypes.TENDBHA]: [] as ICluster[],
-    [ClusterTypes.TENDBSINGLE]: [] as ICluster[],
+  const selected = shallowRef<Record<string, ClusterInfo[]>>({
+    [ClusterTypes.TENDBHA]: [],
+    [ClusterTypes.TENDBSINGLE]: [],
   });
 
   const totalNum = computed(() => tableData.value.filter((item) => Boolean(item.clusterType)).length);
@@ -121,15 +122,15 @@
   };
 
   // 从集群选择器选择确认后
-  const handelClusterChange = (data: Record<string, ICluster[]>) => {
-    selected.value = data;
+  const handelClusterChange = (data: ClusterInfo[]) => {
     const newList = Object.values(data)
       .flat()
       .reduce<IDataRow[]>((result, item) => {
         const domain = item.immute_domain;
         if (!domainMemo[domain]) {
-          result.push(createRowData(item));
           domainMemo[domain] = true;
+          result.push(createRowData(item));
+          selected.value[item.cluster_type].push(item);
         }
         return result;
       }, []);
@@ -162,9 +163,7 @@
     tableData.value.splice(index, 1);
     if (domain) {
       delete domainMemo[domain];
-      if (selected.value[clusterType]) {
-        selected.value[clusterType] = selected.value[clusterType].filter((item) => item.immute_domain !== domain);
-      }
+      selected.value[clusterType] = selected.value[clusterType].filter((item) => item.immute_domain !== domain);
     }
   };
 
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/Index.vue
new file mode 100644
index 0000000000..747bf7174a
--- /dev/null
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/Index.vue
@@ -0,0 +1,208 @@
+<!--
+ * 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>
+    <div class="cluster-standardize-content">
+      <BkAlert
+        closable
+        theme="info"
+        :title="t('标准化部署管理集群所必须的 DB 工具，例如 mysql-crond、监控程序、备份工具等')" />
+      <RenderData
+        class="mt-20"
+        @batch-select-cluster="handleShowBatchSelector">
+        <RenderRow
+          v-for="(item, index) in tableData"
+          :key="item.rowKey"
+          :data="item"
+          :inputed="inputedDomains"
+          :removeable="tableData.length < 2"
+          @add="() => handleAppend(index)"
+          @input-cluster-finish="(data: ClusterModel) => inputClusterFinish(index, data)"
+          @remove="() => handleRemove(index)" />
+      </RenderData>
+    </div>
+    <template #action>
+      <BkButton
+        class="ml-24 w-88"
+        :disabled="totalNum === 0"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会清空当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml-8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+    <ClusterSelector
+      v-model:is-show="isShowBatchSelector"
+      :db-type="DBTypes.TENDBCLUSTER"
+      :selected="selected"
+      @change="handelClusterChange" />
+  </SmartAction>
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { createTicket } from '@services/source/ticket';
+  import type { ClusterInfo } from '@services/types';
+
+  import { ClusterTypes, DBTypes, TicketTypes } from '@common/const';
+
+  import ClusterSelector from '../cluster-selector/Index.vue';
+  import type { ClusterModel } from '../common/RenderCluster.vue';
+
+  import RenderData from './components/render-data/Index.vue';
+  import RenderRow, { createRowData, type IDataRow } from './components/render-data/Row.vue';
+
+  const { t } = useI18n();
+  const router = useRouter();
+
+  // 集群域名是否已存在表格的映射表
+  let domainMemo = {} as Record<string, boolean>;
+
+  const isShowBatchSelector = ref(false);
+  const tableData = ref<IDataRow[]>([createRowData()]);
+  const selected = shallowRef<Record<string, ClusterInfo[]>>({
+    [ClusterTypes.TENDBCLUSTER]: [],
+  });
+
+  const totalNum = computed(() => tableData.value.filter((item) => Boolean(item.clusterType)).length);
+  const inputedDomains = computed(() =>
+    tableData.value.filter((item) => Boolean(item.domain)).map((item) => item.domain),
+  );
+
+  const { run: createTicketRun, loading: isSubmitting } = useRequest(createTicket, {
+    manual: true,
+    onSuccess(data) {
+      router.push({
+        name: 'PlatformClusterStandardize',
+        query: {
+          ticketId: data.id,
+        },
+        params: {
+          page: 'success',
+        },
+      });
+    },
+  });
+
+  const handleShowBatchSelector = () => {
+    isShowBatchSelector.value = true;
+  };
+
+  // 检测列表是否为空
+  const checkListEmpty = (list: IDataRow[]) => {
+    if (list.length > 1) {
+      return false;
+    }
+    const [firstRow] = list;
+    return !firstRow.domain;
+  };
+
+  // 从集群选择器选择确认后
+  const handelClusterChange = (data: ClusterInfo[]) => {
+    const newList = Object.values(data)
+      .flat()
+      .reduce<IDataRow[]>((result, item) => {
+        const domain = item.immute_domain;
+        if (!domainMemo[domain]) {
+          domainMemo[domain] = true;
+          result.push(createRowData(item));
+          selected.value[item.cluster_type].push(item);
+        }
+        return result;
+      }, []);
+    if (checkListEmpty(tableData.value)) {
+      tableData.value = newList;
+    } else {
+      tableData.value = [...tableData.value, ...newList];
+    }
+    window.changeConfirm = true;
+  };
+
+  // 表格访问入口单元格输入后
+  const inputClusterFinish = (index: number, data: ClusterModel) => {
+    tableData.value[index] = createRowData(data);
+    selected.value[data.cluster_type].push({
+      ...data,
+      bk_cloud_name: '',
+      db_module_name: '',
+    });
+  };
+
+  // 追加集群
+  const handleAppend = (index: number) => {
+    tableData.value.splice(index + 1, 0, createRowData());
+  };
+
+  // 删除一个集群
+  const handleRemove = (index: number) => {
+    const { domain, clusterType } = tableData.value[index];
+    tableData.value.splice(index, 1);
+    if (domain) {
+      delete domainMemo[domain];
+      selected.value[clusterType] = selected.value[clusterType].filter((item) => item.immute_domain !== domain);
+    }
+  };
+
+  // 点击提交按钮
+  const handleSubmit = async () => {
+    const clusters = Object.values(selected.value).flat();
+    const ticketTypeMap = {
+      [ClusterTypes.TENDBCLUSTER]: TicketTypes.TENDBCLUSTER_STANDARDIZE,
+    };
+    createTicketRun({
+      ticket_type: ticketTypeMap[clusters[0].cluster_type as keyof typeof ticketTypeMap],
+      bk_biz_id: clusters[0].bk_biz_id,
+      remark: '',
+      details: {
+        infos: {
+          cluster_ids: clusters.map((item) => item.id),
+        },
+      },
+    });
+  };
+
+  // 点击重置按钮
+  const handleReset = () => {
+    tableData.value = [createRowData()];
+    selected.value = {
+      [ClusterTypes.TENDBCLUSTER]: [],
+    };
+    domainMemo = {};
+    window.changeConfirm = false;
+  };
+</script>
+
+<style lang="less" scoped>
+  .cluster-standardize-content {
+    padding: 20px 24px;
+
+    .batch-edit-btn {
+      margin-left: 4px;
+      color: #3a84ff;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/components/render-data/Index.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/components/render-data/Index.vue
new file mode 100644
index 0000000000..6d50b32741
--- /dev/null
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/components/render-data/Index.vue
@@ -0,0 +1,75 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <RenderTable class="cluster-standardize-table">
+    <RenderTableHeadColumn
+      :required="false"
+      :show-overflow-tooltip="false">
+      {{ t('目标集群') }}
+      <template #append>
+        <BkButton
+          v-bk-tooltips="t('批量选择')"
+          class="ml-4"
+          text
+          theme="primary"
+          @click="handleShowBatchSelector">
+          <DbIcon type="batch-host-select" />
+        </BkButton>
+      </template>
+    </RenderTableHeadColumn>
+    <RenderTableHeadColumn :required="false">
+      {{ t('集群类型') }}
+    </RenderTableHeadColumn>
+    <RenderTableHeadColumn :required="false">
+      {{ t('归属业务') }}
+    </RenderTableHeadColumn>
+    <RenderTableHeadColumn :required="false">
+      {{ t('状态') }}
+    </RenderTableHeadColumn>
+    <RenderTableHeadColumn
+      fixed="right"
+      :required="false"
+      :width="150">
+      {{ t('操作') }}
+    </RenderTableHeadColumn>
+    <template #data>
+      <slot />
+    </template>
+  </RenderTable>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
+  import RenderTable from '@components/render-table/Index.vue';
+
+  interface Emits {
+    (e: 'batchSelectCluster'): void;
+  }
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const handleShowBatchSelector = () => {
+    emits('batchSelectCluster');
+  };
+</script>
+
+<style lang="less" scoped>
+  .cluster-standardize-table {
+    margin-bottom: 0;
+    overflow: initial;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/components/render-data/Row.vue b/dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/components/render-data/Row.vue
new file mode 100644
index 0000000000..987ea13014
--- /dev/null
+++ b/dbm-ui/frontend/src/views/cluster-standardize/components/tendbcluster/components/render-data/Row.vue
@@ -0,0 +1,163 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <tr>
+    <td style="padding: 0">
+      <RenderCluster
+        ref="clusterRef"
+        :data="data.domain"
+        :inputed="inputed"
+        @input-finish="handleInputFinish"
+        @loading="handleLoading" />
+    </td>
+    <td style="padding: 0">
+      <RenderText
+        :data="clusterTypeMap[data.clusterType]"
+        :is-loading="loading"
+        :placeholder="t('自动生成')" />
+    </td>
+    <td style="padding: 0">
+      <RenderText
+        :data="data.bkBizName"
+        :is-loading="loading"
+        :placeholder="t('自动生成')" />
+    </td>
+    <td style="padding: 0">
+      <div
+        v-if="!loading && data?.status"
+        class="td-cell">
+        <DbStatus :theme="statusMap[data.status].theme">{{ statusMap[data.status].text }}</DbStatus>
+      </div>
+      <RenderText
+        v-else
+        :data="data.bkBizName"
+        :is-loading="loading"
+        :placeholder="t('自动生成')" />
+    </td>
+    <OperateColumn
+      :removeable="removeable"
+      @add="handleAppend"
+      @remove="handleRemove" />
+  </tr>
+</template>
+<script lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { useGlobalBizs } from '@stores';
+
+  import { ClusterTypes } from '@common/const';
+
+  import DbStatus from '@components/db-status/index.vue';
+  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
+  import RenderText from '@components/render-table/columns/text-plain/index.vue';
+
+  import { random } from '@utils';
+
+  import RenderCluster, { type ClusterModel } from '../../../common/RenderCluster.vue';
+
+  interface Props {
+    data: IDataRow;
+    removeable: boolean;
+    inputed: string[];
+  }
+
+  interface Emits {
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'inputClusterFinish', value: ClusterModel): void;
+  }
+
+  export interface IDataRow {
+    rowKey: string;
+    id: number;
+    domain: string;
+    clusterType: string;
+    bkBizId: number;
+    bkBizName: string;
+    status: string;
+  }
+
+  const { getBizById } = useGlobalBizs();
+
+  // 创建表格数据
+  export const createRowData = (
+    data = {} as {
+      id: number;
+      immute_domain: string;
+      cluster_type: string;
+      bk_biz_id: number;
+      status: string;
+    },
+  ) => ({
+    rowKey: random(),
+    id: data.id,
+    domain: data.immute_domain,
+    clusterType: data.cluster_type,
+    bkBizId: data.bk_biz_id,
+    bkBizName: getBizById(data.bk_biz_id)?.name || '',
+    status: data.status,
+  });
+</script>
+
+<script setup lang="ts">
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const { t } = useI18n();
+
+  const clusterTypeMap: Record<string, string> = {
+    [ClusterTypes.TENDBCLUSTER]: t('TenDBCluster集群'),
+  };
+
+  const statusMap: Record<string, { text: string; theme: string }> = {
+    normal: {
+      text: t('正常'),
+      theme: 'success',
+    },
+    abnormal: {
+      text: t('异常'),
+      theme: 'danger',
+    },
+  };
+
+  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
+  const loading = ref(false);
+
+  const handleLoading = (value: boolean) => {
+    loading.value = value;
+  };
+
+  const handleInputFinish = (value: ClusterModel) => {
+    emits('inputClusterFinish', value);
+  };
+
+  const handleAppend = () => {
+    emits('add');
+  };
+
+  const handleRemove = () => {
+    if (props.removeable) {
+      return;
+    }
+    emits('remove');
+  };
+</script>
+
+<style lang="less" scoped>
+  .td-cell {
+    padding-left: 16px;
+    background-color: #fff;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue
index 1dca2bce9f..a085612020 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue
@@ -70,7 +70,7 @@
 
   import { queryAllTypeCluster } from '@services/source/dbbase';
 
-  import { DBTypes, queryClusterTypes } from '@common/const';
+  import { DBClusterTypes, DBTypes } from '@common/const';
 
   import { messageWarn } from '@utils';
 
@@ -126,7 +126,7 @@
     defaultParams: [
       {
         bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-        cluster_types: queryClusterTypes[props.dbType].join(','),
+        cluster_types: DBClusterTypes[props.dbType].join(','),
         phase: 'online',
       },
     ],
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/components/Operation.vue b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/components/Operation.vue
index c898ed8ad9..112a1882be 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/components/Operation.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/components/Operation.vue
@@ -145,7 +145,7 @@
     verifyPartitionField,
   } from '@services/source/partitionManage';
 
-  import { dbSysExclude } from '@common/const';
+  import { DBClusterTypes, dbSysExclude, DBTypes } from '@common/const';
   import { dbRegex } from '@common/regex';
 
   interface Props {
@@ -316,7 +316,7 @@
         offset: 0,
         limit: -1,
         bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-        cluster_types: 'tendbha,tendbsingle',
+        cluster_types: DBClusterTypes[DBTypes.MYSQL].join(','),
       },
     ],
   });
diff --git a/dbm-ui/frontend/src/views/ticket-flow-setting-biz/components/render-target/components/SelectClusters.vue b/dbm-ui/frontend/src/views/ticket-flow-setting-biz/components/render-target/components/SelectClusters.vue
index c5b5544cb4..f03b7887b2 100644
--- a/dbm-ui/frontend/src/views/ticket-flow-setting-biz/components/render-target/components/SelectClusters.vue
+++ b/dbm-ui/frontend/src/views/ticket-flow-setting-biz/components/render-target/components/SelectClusters.vue
@@ -42,7 +42,7 @@
 
   import { queryAllTypeCluster } from '@services/source/dbbase';
 
-  import { DBTypes, queryClusterTypes } from '@common/const';
+  import { DBClusterTypes, DBTypes } from '@common/const';
 
   import useValidtor from '@components/render-table/hooks/useValidtor';
 
@@ -89,7 +89,7 @@
       if (props.bizId) {
         fetchData({
           bk_biz_id: props.bizId,
-          cluster_types: queryClusterTypes[props.dbType as keyof typeof queryClusterTypes].join(','),
+          cluster_types: DBClusterTypes[props.dbType].join(','),
           phase: 'online',
           limit: -1,
         });