From cf8fff871b28e48a8ae237d963bd8883a2d8ff95 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Mon, 13 Jan 2025 16:51:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=B7=A5=E5=85=B7=E7=AE=B1?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=5F=E5=BA=93=E8=A1=A8=E5=A4=87=E4=BB=BD?=
 =?UTF-8?q?=E3=80=81=E5=85=A8=E5=BA=93=E5=A4=87=E4=BB=BD=20#8076=20#=20Rev?=
 =?UTF-8?q?iewed,=20transaction=20id:=2029118?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/locales/zh-cn.json        |   4 +-
 .../column/db-name-column/Index.vue}          |  39 ++-
 .../column/tag-db-name-column/Index.vue       | 300 ++++++++++++++++++
 .../form-item/check-group/Index.vue           |  26 +-
 .../TENDBCLUSTER_DB_TABLE_BACKUP/Create.vue   | 198 ++++++++++++
 .../TENDBCLUSTER_DB_TABLE_BACKUP/Index.vue    |  32 ++
 .../components/BackupColumn.vue               | 113 +++++++
 .../components/ClusterColumn.vue              | 149 +++++++++
 .../TENDBCLUSTER_FULL_BACKUP/Create.vue       | 193 +++++++++++
 .../TENDBCLUSTER_FULL_BACKUP/Index.vue        |  32 ++
 .../components/BackupColumn.vue               | 117 +++++++
 .../components/ClusterColumn.vue              | 149 +++++++++
 .../TENDBCLUSTER_MASTER_FAIL_OVER/Create.vue  |  17 +-
 .../Create.vue                                |  17 +-
 .../TENDBCLUSTER_RENAME_DATABASE/Create.vue   |   2 +-
 .../views/db-manage/tendb-cluster/routes.ts   |  18 +-
 .../db-manage/tendb-cluster/toolbox-menu.ts   |   4 +-
 17 files changed, 1350 insertions(+), 60 deletions(-)
 rename dbm-ui/frontend/src/views/db-manage/{tendb-cluster/TENDBCLUSTER_RENAME_DATABASE/components/DbNameColumn.vue => common/toolbox-field/column/db-name-column/Index.vue} (76%)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/tag-db-name-column/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/components/BackupColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/components/ClusterColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/Create.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/Index.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/components/BackupColumn.vue
 create mode 100644 dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/components/ClusterColumn.vue

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 14cc4f8285..e8e39f37b6 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -4022,10 +4022,8 @@
   "从资源池选择": "从资源池选择",
   "还差n台_请先勾选足够的IP": "还差 {n} 台，请先勾选足够的 IP",
   "已选够n台": "已选够 {n} 台",
-  "从资源池选择": "从资源池选择",
-  "还差n台_请先勾选足够的IP": "还差 {n} 台，请先勾选足够的 IP",
-  "已选够n台": "已选够 {n} 台",
   "原DB名": "原 DB 名",
+  "DB已存在": "DB 已存在",
   "DB不存在": "DB 不存在",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RENAME_DATABASE/components/DbNameColumn.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/db-name-column/Index.vue
similarity index 76%
rename from dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RENAME_DATABASE/components/DbNameColumn.vue
rename to dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/db-name-column/Index.vue
index 7c2e647632..9f783473c0 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RENAME_DATABASE/components/DbNameColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/db-name-column/Index.vue
@@ -83,28 +83,45 @@
       trigger: 'change',
     },
     {
-      validator: async (value: string) => {
-        if (!_.some(value, (item) => !/[*%]/.test(item))) {
+      validator: (value: string) => {
+        if (!props.checkExist) {
           return true;
         }
-        const data = await checkClusterDatabase({
+        const clearDbList = _.filter(value, (item) => !/[*%]/.test(item));
+        if (clearDbList.length < 1) {
+          return true;
+        }
+        return checkClusterDatabase({
           infos: [
             {
               cluster_id: props.clusterId,
               db_names: [value],
             },
           ],
-        });
-        const isExist = Boolean(data[0]?.check_info[value]);
-        if (isExist && props.checkExist) {
-          return t('DB已存在');
+        }).then((data) => (data.length > 0 ? data[0].check_info[value] : false));
+      },
+      message: t('DB不存在'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string) => {
+        if (!props.checkNotExist) {
+          return true;
         }
-        if (!isExist && props.checkNotExist) {
-          return t('DB不存在');
+        const clearDbList = _.filter(value, (item) => !/[*%]/.test(item));
+        if (clearDbList.length < 1) {
+          return true;
         }
-        return true;
+        return checkClusterDatabase({
+          infos: [
+            {
+              cluster_id: props.clusterId,
+              db_names: [value],
+            },
+          ],
+        }).then((data) => (data.length > 0 ? !data[0].check_info[value] : true));
       },
-      message: '',
+      message: t('DB已存在'),
       trigger: 'blur',
     },
   ];
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/tag-db-name-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/tag-db-name-column/Index.vue
new file mode 100644
index 0000000000..23b7539a24
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/tag-db-name-column/Index.vue
@@ -0,0 +1,300 @@
+<!--
+ * 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>
+  <Column
+    :append-rules="rules"
+    :field="field"
+    :label="label"
+    :min-width="minWidth"
+    :required="required">
+    <template #headAppend>
+      <BatchEditColumn
+        v-model="showBatchEdit"
+        :title="label"
+        type="taginput"
+        @change="handleBatchEditChange">
+        <span
+          v-bk-tooltips="t('统一设置：将该列统一设置为相同的值')"
+          class="batch-edit-btn"
+          @click="handleBatchEditShow">
+          <DbIcon type="bulk-edit" />
+        </span>
+      </BatchEditColumn>
+    </template>
+    <div
+      ref="rootRef"
+      style="flex: 1"
+      @click="handleShowTips">
+      <TagInput
+        v-model="modelValue"
+        allow-auto-match
+        allow-create
+        has-delete-icon
+        :placeholder="t('请输入DB 名称，支持通配符“%”，含通配符的仅支持单个')" />
+    </div>
+  </Column>
+  <div style="display: none">
+    <div
+      ref="popRef"
+      style="font-size: 12px; line-height: 24px; color: #63656e">
+      <div class="db-table-tag-tip">
+        <div style="font-weight: 700">{{ t('库表输入说明') }}：</div>
+        <div>
+          <div class="circle-dot"></div>
+          <span>{{ t('不允许输入系统库和特殊库，如mysql、sys 等') }}</span>
+        </div>
+        <div>
+          <div class="circle-dot"></div>
+          <span>{{ t('DB名、表名不允许为空，忽略DB名、忽略表名不允许为 *') }}</span>
+        </div>
+        <div>
+          <div class="circle-dot"></div>
+          <span>{{ t('支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符') }}</span>
+        </div>
+        <div>
+          <div class="circle-dot"></div>
+          <span>{{ t('单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入') }}</span>
+        </div>
+        <div>
+          <div class="circle-dot"></div>
+          <span>{{ t('% ? 不能独立使用， * 只能单独使用') }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import _ from 'lodash';
+  import tippy, { type Instance, type SingleTarget } from 'tippy.js';
+  import { useI18n } from 'vue-i18n';
+
+  import { checkClusterDatabase } from '@services/source/dbbase';
+
+  import { Column, TagInput } from '@components/editable-table/Index.vue';
+
+  import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
+
+  interface Props {
+    field: string;
+    label: string;
+    clusterId: number;
+    minWidth?: number;
+    required?: boolean;
+    checkExist?: boolean;
+    checkNotExist?: boolean;
+    allowAsterisk?: boolean;
+    rules?: {
+      validator: (value: string[]) => boolean;
+      message: string;
+      trigger: string;
+    }[];
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    minWidth: 200,
+    required: false,
+    checkExist: false,
+    checkNotExist: false,
+    allowAsterisk: false,
+    rules: () => [],
+  });
+
+  const modelValue = defineModel<string[]>({
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  let tippyIns: Instance | undefined;
+
+  const rootRef = ref();
+  const popRef = ref();
+  const showBatchEdit = ref(false);
+
+  const rules = computed(() => {
+    if (props.rules && props.rules.length > 0) {
+      return props.rules;
+    }
+
+    const systemDbNames = ['mysql', 'db_infobase', 'information_schema', 'performance_schema', 'sys', 'infodba_schema'];
+
+    return [
+      {
+        validator: (value: string[]) => _.every(value, (item) => /^(?!stage_truncate)(?!.*dba_rollback$).*/.test(item)),
+        message: t('不能以stage_truncate开头或dba_rollback结尾'),
+        trigger: 'change',
+      },
+      {
+        validator: (value: string[]) => _.every(value, (item) => /^[-_a-zA-Z0-9*?%]{0,35}$/.test(item)),
+        message: t('库表名支持数字、字母、中划线、下划线，最大35字符'),
+        trigger: 'change',
+      },
+      {
+        validator: (value: string[]) => _.every(value, (item) => !systemDbNames.includes(item)),
+        message: t('不允许输入系统库和特殊库'),
+        trigger: 'change',
+      },
+      {
+        validator: (value: string[]) => {
+          if (props.allowAsterisk) {
+            return true;
+          }
+
+          return _.every(value, (item) => item !== '*');
+        },
+        message: t('不允许为 *'),
+        trigger: 'change',
+      },
+      {
+        validator: (value: string[]) => {
+          if (!props.checkExist) {
+            return true;
+          }
+          if (!props.clusterId) {
+            return false;
+          }
+          // % 通配符不需要校验存在
+          if (/%$/.test(value[0]) || value[0] === '*') {
+            return true;
+          }
+          const clearDbList = _.filter(value, (item) => !/[*%]/.test(item));
+          if (clearDbList.length < 1) {
+            return true;
+          }
+          return checkClusterDatabase({
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+            cluster_id: props.clusterId,
+            db_list: value,
+          }).then((data) => {
+            const existDbList = Object.keys(data).reduce<string[]>((result, dbName) => {
+              if (data[dbName]) {
+                result.push(dbName);
+              }
+              return result;
+            }, []);
+            if (existDbList.length > 0) {
+              return t('n 已存在', { n: existDbList.join('、') });
+            }
+
+            return true;
+          });
+        },
+        message: t('DB 已存在'),
+        trigger: 'change',
+      },
+      {
+        validator: (value: string[]) => {
+          if (!props.checkNotExist) {
+            return true;
+          }
+          if (!props.clusterId) {
+            return false;
+          }
+          const clearDbList = _.filter(value, (item) => !/[*%]/.test(item));
+          if (clearDbList.length < 1) {
+            return true;
+          }
+          return checkClusterDatabase({
+            bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+            cluster_id: props.clusterId,
+            db_list: value,
+          }).then((data) => {
+            const notExistDbList = Object.keys(data).reduce<string[]>((result, dbName) => {
+              if (!data[dbName]) {
+                result.push(dbName);
+              }
+              return result;
+            }, []);
+            if (notExistDbList.length > 0) {
+              return t('n 不存在', { n: notExistDbList.join('、') });
+            }
+
+            return true;
+          });
+        },
+        message: t('DB 不存在'),
+        trigger: 'change',
+      },
+    ];
+  });
+
+  const handleBatchEditShow = () => {
+    showBatchEdit.value = true;
+  };
+
+  const handleBatchEditChange = (value: string[]) => {
+    modelValue.value = value;
+  };
+
+  const handleShowTips = () => {
+    tippyIns?.show();
+  };
+
+  onMounted(() => {
+    nextTick(() => {
+      if (rootRef.value) {
+        tippyIns = tippy(rootRef.value as SingleTarget, {
+          content: popRef.value,
+          placement: 'top',
+          appendTo: () => document.body,
+          theme: 'light',
+          maxWidth: 'none',
+          trigger: 'manual',
+          interactive: true,
+          arrow: true,
+          offset: [0, 18],
+          zIndex: 9998,
+          hideOnClick: true,
+        });
+      }
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (tippyIns) {
+      tippyIns.hide();
+      tippyIns.unmount();
+      tippyIns.destroy();
+      tippyIns = undefined;
+    }
+  });
+</script>
+<style lang="less" scoped>
+  .batch-edit-btn {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+
+  .db-table-tag-tip {
+    display: flex;
+    padding: 3px 7px;
+    line-height: 24px;
+    flex-direction: column;
+
+    div {
+      display: flex;
+      align-items: center;
+
+      .circle-dot {
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        margin-right: 6px;
+        background-color: #63656e;
+        border-radius: 50%;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/check-group/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/check-group/Index.vue
index 3bd7c7c812..b8cf9fbd4e 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/check-group/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/check-group/Index.vue
@@ -1,16 +1,16 @@
 <template>
   <BkFormItem class="mb-8">
-    <BkCheckbox v-model="modelValue.is_check_process">
+    <BkCheckbox v-model="isCheckProcess">
       {{ t('检查业务来源的连接') }}
     </BkCheckbox>
   </BkFormItem>
   <BkFormItem class="mb-8">
-    <BkCheckbox v-model="modelValue.is_check_delay">
+    <BkCheckbox v-model="isVerifyChecksum">
       {{ t('检查主从同步延迟') }}
     </BkCheckbox>
   </BkFormItem>
   <BkFormItem class="mb-8">
-    <BkCheckbox v-model="modelValue.is_verify_checksum">
+    <BkCheckbox v-model="isCheckDelay">
       {{ t('检查主从数据校验结果') }}
     </BkCheckbox>
   </BkFormItem>
@@ -21,15 +21,15 @@
 
   const { t } = useI18n();
 
-  const modelValue = defineModel<{
-    is_check_process: boolean;
-    is_verify_checksum: boolean;
-    is_check_delay: boolean;
-  }>({
-    default: () => ({
-      is_check_process: true,
-      is_verify_checksum: true,
-      is_check_delay: true,
-    }),
+  const isCheckProcess = defineModel<boolean>('is_check_process', {
+    required: true,
+  });
+
+  const isVerifyChecksum = defineModel<boolean>('is_verify_checksum', {
+    required: true,
+  });
+
+  const isCheckDelay = defineModel<boolean>('is_check_delay', {
+    required: true,
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/Create.vue
new file mode 100644
index 0000000000..daba2b36e0
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/Create.vue
@@ -0,0 +1,198 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('库表备份：指定库表备份，支持模糊匹配')" />
+    <BkForm
+      class="mb-20"
+      form-type="vertical"
+      :model="formData">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <ClusterColumn
+            v-model="item.cluster"
+            :selected="selected"
+            @batch-edit="handleBatchEditCluster" />
+          <BackupColumn
+            v-model="item.backup"
+            :cluster="item.cluster" />
+          <TagDbNameColumn
+            v-model="item.dbPatterns"
+            check-exist
+            :cluster-id="item.cluster.id"
+            field="dbPatterns"
+            :label="t('备份DB名')"
+            required />
+          <TagDbNameColumn
+            v-model="item.ignoreDbs"
+            check-not-exist
+            :cluster-id="item.cluster.id"
+            field="ignoreDbs"
+            :label="t('忽略DB名')" />
+          <TagDbNameColumn
+            v-model="item.tablePatterns"
+            check-exist
+            :cluster-id="item.cluster.id"
+            field="tablePatterns"
+            :label="t('备份表名')"
+            required />
+          <TagDbNameColumn
+            v-model="item.ignoreTables"
+            check-not-exist
+            :cluster-id="item.cluster.id"
+            field="ignoreTables"
+            :label="t('忽略表名')" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 w-88"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会情况当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+  </SmartAction>
+</template>
+<script lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import TagDbNameColumn from '@views/db-manage/common/toolbox-field/column/tag-db-name-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import BackupColumn from './components/BackupColumn.vue';
+  import ClusterColumn from './components/ClusterColumn.vue';
+
+  interface RowData {
+    cluster: {
+      id: number;
+      master_domain: string;
+    };
+    backup: string;
+    dbPatterns: string[];
+    ignoreDbs: string[];
+    tablePatterns: string[];
+    ignoreTables: string[];
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      id: 0,
+      master_domain: '',
+    },
+    backup: data.backup || '',
+    dbPatterns: data.dbPatterns || [],
+    ignoreDbs: data.ignoreDbs || [],
+    tablePatterns: data.tablePatterns || [],
+    ignoreTables: data.ignoreTables || [],
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.master_domain, true])));
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    infos: {
+      cluster_id: number;
+      backup_local: string;
+      db_patterns: string[];
+      table_patterns: string[];
+      ignore_dbs: string[];
+      ignore_tables: string[];
+    }[];
+  }>(TicketTypes.TENDBCLUSTER_DB_TABLE_BACKUP);
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    createTicketRun({
+      details: {
+        infos: formData.tableData.map((item) => ({
+          cluster_id: item.cluster.id,
+          backup_local: item.backup,
+          db_patterns: item.dbPatterns,
+          table_patterns: item.tablePatterns,
+          ignore_dbs: item.ignoreDbs,
+          ignore_tables: item.ignoreTables,
+        })),
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEditCluster = (list: TendbClusterModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.master_domain]) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/Index.vue
@@ -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 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>
+  <Component :is="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/components/BackupColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/components/BackupColumn.vue
new file mode 100644
index 0000000000..19657d59ef
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/components/BackupColumn.vue
@@ -0,0 +1,113 @@
+<!--
+ * 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>
+  <Column
+    field="backup"
+    :label="t('备份位置')"
+    :loading="loading"
+    :min-width="200"
+    required>
+    <template #headAppend>
+      <BatchEditColumn
+        v-model="showBatchEdit"
+        :data-list="backupList"
+        :title="t('备份位置')"
+        type="select"
+        @change="handleBatchEditChange">
+        <span
+          v-bk-tooltips="t('统一设置：将该列统一设置为相同的值')"
+          class="batch-edit-btn"
+          @click="handleBatchEditShow">
+          <DbIcon type="bulk-edit" />
+        </span>
+      </BatchEditColumn>
+    </template>
+    <Select
+      v-model="modelValue"
+      :list="backupList" />
+  </Column>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getTendbClusterList } from '@services/source/tendbcluster';
+
+  import { Column, Select } from '@components/editable-table/Index.vue';
+
+  import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
+
+  interface Props {
+    cluster: {
+      id: number;
+    };
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<string>();
+
+  const { t } = useI18n();
+
+  const showBatchEdit = ref(false);
+  const backupList = shallowRef<Record<'value' | 'label', string>[]>([]);
+
+  const { run: fetchClusterList, loading } = useRequest(getTendbClusterList, {
+    manual: true,
+    onSuccess(data) {
+      const baseList = [
+        {
+          value: 'remote',
+          label: 'RemoteDR',
+        },
+      ];
+      if (data.results.length < 1) {
+        backupList.value = [...baseList];
+        return;
+      }
+      const mntList = data.results[0].spider_mnt.map((item) => ({
+        label: `${item.ip}:${item.port}`,
+        value: `spider_mnt::${item.instance}`,
+      }));
+      backupList.value = [...baseList, ...mntList];
+    },
+  });
+
+  watch(
+    () => props.cluster.id,
+    () => {
+      if (props.cluster.id) {
+        fetchClusterList({
+          cluster_ids: [props.cluster.id],
+        });
+      }
+    },
+  );
+
+  const handleBatchEditShow = () => {
+    showBatchEdit.value = true;
+  };
+
+  const handleBatchEditChange = (value: string) => {
+    modelValue.value = value;
+  };
+</script>
+<style lang="less" scoped>
+  .batch-edit-btn {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/components/ClusterColumn.vue
new file mode 100644
index 0000000000..2b519c01a1
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_DB_TABLE_BACKUP/components/ClusterColumn.vue
@@ -0,0 +1,149 @@
+<!--
+ * 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>
+  <Column
+    :append-rules="rules"
+    field="cluster.master_domain"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="200"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.master_domain"
+      :placeholder="t('请输入集群域名')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBCLUSTER]"
+    :selected="selectedClusters"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selected: {
+      id: number;
+      master_domain: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: TendbClusterModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    master_domain: string;
+  }>({
+    default: () => ({
+      id: undefined,
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedClusters = computed<Record<string, TendbClusterModel[]>>(() => ({
+    [ClusterTypes.TENDBCLUSTER]: props.selected.map(
+      (item) =>
+        ({
+          id: item.id,
+          master_domain: item.master_domain,
+        }) as TendbClusterModel,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => domainRegex.test(value),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.master_domain === value).length < 2,
+      message: t('目标集群重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => {
+        if (!modelValue.value.master_domain) {
+          return true;
+        }
+        return Boolean(modelValue.value.id);
+      },
+      message: t('目标集群不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters, {
+    manual: true,
+    onSuccess: (data) => {
+      if (data.length) {
+        modelValue.value.id = data[0].id;
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    modelValue.value.id = undefined;
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value,
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, TendbClusterModel[]>) => {
+    emits('batch-edit', selected[ClusterTypes.TENDBCLUSTER]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/Create.vue
new file mode 100644
index 0000000000..b909eb143d
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/Create.vue
@@ -0,0 +1,193 @@
+<!--
+ * 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>
+    <BkAlert
+      class="mb-20"
+      closable
+      :title="t('全库备份：所有库表备份, 除 MySQL 系统库和 DBA 专用库外')" />
+    <BkForm
+      class="mb-20"
+      form-type="vertical"
+      :model="formData">
+      <EditableTable
+        ref="table"
+        class="mb-20"
+        :model="formData.tableData">
+        <EditableTableRow
+          v-for="(item, index) in formData.tableData"
+          :key="index">
+          <ClusterColumn
+            v-model="item.cluster"
+            :selected="selected"
+            @batch-edit="handleBatchEditCluster" />
+          <BackupColumn
+            v-model="item.backup"
+            :cluster="item.cluster" />
+          <OperationColumn
+            v-model:table-data="formData.tableData"
+            :create-row-method="createTableRow" />
+        </EditableTableRow>
+      </EditableTable>
+      <BkFormItem
+        :label="t('备份类型')"
+        property="backup_type"
+        required>
+        <BkRadioGroup v-model="formData.backup_type">
+          <BkRadio label="logical">
+            {{ t('逻辑备份') }}
+          </BkRadio>
+          <BkRadio label="physical">
+            {{ t('物理备份') }}
+          </BkRadio>
+        </BkRadioGroup>
+      </BkFormItem>
+      <BkFormItem
+        :label="t('备份保存时间')"
+        property="file_tag"
+        required>
+        <BkRadioGroup v-model="formData.file_tag">
+          <BkRadio label="DBFILE1M">
+            {{ t('1个月') }}
+          </BkRadio>
+          <BkRadio label="DBFILE6M">
+            {{ t('6个月') }}
+          </BkRadio>
+          <BkRadio label="DBFILE1Y">
+            {{ t('1年') }}
+          </BkRadio>
+          <BkRadio label="DBFILE3Y">
+            {{ t('3年') }}
+          </BkRadio>
+        </BkRadioGroup>
+      </BkFormItem>
+      <TicketRemark v-model="formData.remark" />
+    </BkForm>
+    <template #action>
+      <BkButton
+        class="mr-8 w-88"
+        :loading="isSubmitting"
+        theme="primary"
+        @click="handleSubmit">
+        {{ t('提交') }}
+      </BkButton>
+      <DbPopconfirm
+        :confirm-handler="handleReset"
+        :content="t('重置将会情况当前填写的所有内容_请谨慎操作')"
+        :title="t('确认重置页面')">
+        <BkButton
+          class="ml8 w-88"
+          :disabled="isSubmitting">
+          {{ t('重置') }}
+        </BkButton>
+      </DbPopconfirm>
+    </template>
+  </SmartAction>
+</template>
+<script lang="ts" setup>
+  import { reactive, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
+
+  import { useCreateTicket } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
+
+  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+
+  import BackupColumn from './components/BackupColumn.vue';
+  import ClusterColumn from './components/ClusterColumn.vue';
+
+  interface RowData {
+    cluster: {
+      id: number;
+      master_domain: string;
+    };
+    backup: string;
+  }
+
+  const { t } = useI18n();
+  const tableRef = useTemplateRef('table');
+
+  const createTableRow = (data = {} as Partial<RowData>) => ({
+    cluster: data.cluster || {
+      id: 0,
+      master_domain: '',
+    },
+    backup: data.backup || '',
+  });
+
+  const defaultData = () => ({
+    tableData: [createTableRow()],
+    backup_type: 'logical',
+    file_tag: 'DBFILE1M',
+    remark: '',
+  });
+
+  const formData = reactive(defaultData());
+  const selected = computed(() => formData.tableData.filter((item) => item.cluster.id).map((item) => item.cluster));
+  const selectedMap = computed(() => Object.fromEntries(selected.value.map((cur) => [cur.master_domain, true])));
+
+  const { run: createTicketRun, loading: isSubmitting } = useCreateTicket<{
+    backup_type: string;
+    file_tag: string;
+    infos: {
+      cluster_id: number;
+      backup_local: string;
+    }[];
+  }>(TicketTypes.TENDBCLUSTER_FULL_BACKUP);
+
+  const handleSubmit = async () => {
+    const result = await tableRef.value!.validate();
+    if (!result) {
+      return;
+    }
+    createTicketRun({
+      details: {
+        backup_type: formData.backup_type,
+        file_tag: formData.file_tag,
+        infos: formData.tableData.map((item) => ({
+          cluster_id: item.cluster.id,
+          backup_local: item.backup,
+        })),
+      },
+      remark: formData.remark,
+    });
+  };
+
+  const handleReset = () => {
+    Object.assign(formData, defaultData());
+  };
+
+  const handleBatchEditCluster = (list: TendbClusterModel[]) => {
+    const dataList = list.reduce<RowData[]>((acc, item) => {
+      if (!selectedMap.value[item.master_domain]) {
+        acc.push(
+          createTableRow({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    formData.tableData = [...(selected.value.length ? formData.tableData : []), ...dataList];
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/Index.vue
new file mode 100644
index 0000000000..7d5a04e740
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/Index.vue
@@ -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 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>
+  <Component :is="components[page]" />
+</template>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+
+  import Page2 from '@views/db-manage/common/create-ticket-success/Index.vue';
+
+  import Page1 from './Create.vue';
+
+  const route = useRoute();
+
+  const components = {
+    create: Page1,
+    success: Page2,
+  };
+
+  const page = computed(() => (route.params.page as keyof typeof components) || 'create');
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/components/BackupColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/components/BackupColumn.vue
new file mode 100644
index 0000000000..56e9848bd2
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/components/BackupColumn.vue
@@ -0,0 +1,117 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    field="backup"
+    :label="t('备份位置')"
+    :loading="loading"
+    :min-width="200"
+    required>
+    <template #headAppend>
+      <BatchEditColumn
+        v-model="showBatchEdit"
+        :data-list="backupList"
+        :title="t('备份位置')"
+        type="select"
+        @change="handleBatchEditChange">
+        <span
+          v-bk-tooltips="t('统一设置：将该列统一设置为相同的值')"
+          class="batch-edit-btn"
+          @click="handleBatchEditShow">
+          <DbIcon type="bulk-edit" />
+        </span>
+      </BatchEditColumn>
+    </template>
+    <Select
+      v-model="modelValue"
+      :list="backupList" />
+  </Column>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getTendbClusterList } from '@services/source/tendbcluster';
+
+  import { Column, Select } from '@components/editable-table/Index.vue';
+
+  import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
+
+  interface Props {
+    cluster: {
+      id: number;
+    };
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<string>();
+
+  const { t } = useI18n();
+
+  const showBatchEdit = ref(false);
+  const backupList = shallowRef<Record<'value' | 'label', string>[]>([]);
+
+  const { run: fetchClusterList, loading } = useRequest(getTendbClusterList, {
+    manual: true,
+    onSuccess(data) {
+      const baseList = [
+        {
+          value: 'master',
+          label: 'RemoteDB',
+        },
+        {
+          value: 'slave',
+          label: 'RemoteDR',
+        },
+      ];
+      if (data.results.length < 1) {
+        backupList.value = [...baseList];
+        return;
+      }
+      const mntList = data.results[0].spider_mnt.map((item) => ({
+        label: `${item.ip}:${item.port}`,
+        value: `spider_mnt::${item.instance}`,
+      }));
+      backupList.value = [...baseList, ...mntList];
+    },
+  });
+
+  watch(
+    () => props.cluster.id,
+    () => {
+      if (props.cluster.id) {
+        fetchClusterList({
+          cluster_ids: [props.cluster.id],
+        });
+      }
+    },
+  );
+
+  const handleBatchEditShow = () => {
+    showBatchEdit.value = true;
+  };
+
+  const handleBatchEditChange = (value: string) => {
+    modelValue.value = value;
+  };
+</script>
+<style lang="less" scoped>
+  .batch-edit-btn {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/components/ClusterColumn.vue
new file mode 100644
index 0000000000..2b519c01a1
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FULL_BACKUP/components/ClusterColumn.vue
@@ -0,0 +1,149 @@
+<!--
+ * 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>
+  <Column
+    :append-rules="rules"
+    field="cluster.master_domain"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="200"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.master_domain"
+      :placeholder="t('请输入集群域名')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBCLUSTER]"
+    :selected="selectedClusters"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selected: {
+      id: number;
+      master_domain: string;
+    }[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: TendbClusterModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    master_domain: string;
+  }>({
+    default: () => ({
+      id: undefined,
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const showSelector = ref(false);
+  const selectedClusters = computed<Record<string, TendbClusterModel[]>>(() => ({
+    [ClusterTypes.TENDBCLUSTER]: props.selected.map(
+      (item) =>
+        ({
+          id: item.id,
+          master_domain: item.master_domain,
+        }) as TendbClusterModel,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => domainRegex.test(value),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: (value: string) => props.selected.filter((item) => item.master_domain === value).length < 2,
+      message: t('目标集群重复'),
+      trigger: 'blur',
+    },
+    {
+      validator: () => {
+        if (!modelValue.value.master_domain) {
+          return true;
+        }
+        return Boolean(modelValue.value.id);
+      },
+      message: t('目标集群不存在'),
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters, {
+    manual: true,
+    onSuccess: (data) => {
+      if (data.length) {
+        modelValue.value.id = data[0].id;
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    modelValue.value.id = undefined;
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value,
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, TendbClusterModel[]>) => {
+    emits('batch-edit', selected[ClusterTypes.TENDBCLUSTER]);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MASTER_FAIL_OVER/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MASTER_FAIL_OVER/Create.vue
index e0261691df..f50cc925d5 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MASTER_FAIL_OVER/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MASTER_FAIL_OVER/Create.vue
@@ -47,7 +47,10 @@
             :create-row-method="createTableRow" />
         </EditableTableRow>
       </EditableTable>
-      <CheckGroup v-model="formData.checkGroup" />
+      <CheckGroup
+        v-model:is_check_delay="formData.is_check_delay"
+        v-model:is_check_process="formData.is_check_process"
+        v-model:is_verify_checksum="formData.is_verify_checksum" />
       <TicketRemark v-model="formData.remark" />
     </BkForm>
     <template #action>
@@ -127,11 +130,9 @@
 
   const defaultData = () => ({
     tableData: [createTableRow()],
-    checkGroup: {
-      is_check_process: true,
-      is_verify_checksum: true,
-      is_check_delay: true,
-    },
+    is_check_process: true,
+    is_verify_checksum: true,
+    is_check_delay: true,
     remark: '',
   });
 
@@ -169,7 +170,9 @@
     }
     createTicketRun({
       details: {
-        ...formData.checkGroup,
+        is_check_process: formData.is_check_process,
+        is_verify_checksum: formData.is_verify_checksum,
+        is_check_delay: formData.is_check_delay,
         infos: formData.tableData.map((item) => ({
           cluster_id: item.cluster.id,
           switch_tuples: [
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MASTER_SLAVE_SWITCH/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MASTER_SLAVE_SWITCH/Create.vue
index 7a38d6f02e..153e141216 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MASTER_SLAVE_SWITCH/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MASTER_SLAVE_SWITCH/Create.vue
@@ -47,7 +47,10 @@
             :create-row-method="createTableRow" />
         </EditableTableRow>
       </EditableTable>
-      <CheckGroup v-model="formData.checkGroup" />
+      <CheckGroup
+        v-model:is_check_delay="formData.is_check_delay"
+        v-model:is_check_process="formData.is_check_process"
+        v-model:is_verify_checksum="formData.is_verify_checksum" />
       <TicketRemark v-model="formData.remark" />
     </BkForm>
     <template #action>
@@ -127,11 +130,9 @@
 
   const defaultData = () => ({
     tableData: [createTableRow()],
-    checkGroup: {
-      is_check_process: true,
-      is_verify_checksum: true,
-      is_check_delay: true,
-    },
+    is_check_process: true,
+    is_verify_checksum: true,
+    is_check_delay: true,
     remark: '',
   });
 
@@ -169,7 +170,9 @@
     }
     createTicketRun({
       details: {
-        ...formData.checkGroup,
+        is_check_process: formData.is_check_process,
+        is_verify_checksum: formData.is_verify_checksum,
+        is_check_delay: formData.is_check_delay,
         infos: formData.tableData.map((item) => ({
           cluster_id: item.cluster.id,
           switch_tuples: [
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RENAME_DATABASE/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RENAME_DATABASE/Create.vue
index d8a1cd180c..47391ec588 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RENAME_DATABASE/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RENAME_DATABASE/Create.vue
@@ -85,12 +85,12 @@
 
   import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
 
+  import DbNameColumn from '@views/db-manage/common/toolbox-field/column/db-name-column/Index.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import IgnoreBiz from '@views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue';
   import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
 
   import ClusterColumn from './components/ClusterColumn.vue';
-  import DbNameColumn from './components/DbNameColumn.vue';
 
   interface RowData {
     cluster: {
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
index f8d6746e47..fd2919f21c 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
@@ -51,23 +51,9 @@ const spiderProxySlaveApplyRoute = createRouteItem(TicketTypes.TENDBCLUSTER_SPID
 
 const spiderAddMntRoute = createRouteItem(TicketTypes.TENDBCLUSTER_SPIDER_MNT_APPLY, t('添加运维节点'));
 
-const spiderDbTableBackupRoute = {
-  path: 'db-table-backup/:page?',
-  name: 'spiderDbTableBackup',
-  meta: {
-    navName: t('库表备份'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/db-table-backup/Index.vue'),
-};
+const spiderDbTableBackupRoute = createRouteItem(TicketTypes.TENDBCLUSTER_DB_TABLE_BACKUP, t('库表备份'));
 
-const spiderDbBackupRoute = {
-  path: 'db-backup/:page?',
-  name: 'spiderDbBackup',
-  meta: {
-    navName: t('全库备份'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/db-backup/Index.vue'),
-};
+const spiderDbBackupRoute = createRouteItem(TicketTypes.TENDBCLUSTER_FULL_BACKUP, t('全库备份'));
 
 const spiderFlashbackRoute = {
   path: 'flashback/:page?',
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/toolbox-menu.ts b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/toolbox-menu.ts
index 782d2be534..e1751d3fb7 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/toolbox-menu.ts
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/toolbox-menu.ts
@@ -124,13 +124,13 @@ export default [
     children: [
       {
         name: t('库表备份'),
-        id: 'spiderDbTableBackup',
+        id: TicketTypes.TENDBCLUSTER_DB_TABLE_BACKUP,
         parentId: 'spider_copy',
         dbConsoleValue: 'tendbCluster.toolbox.dbTableBackup',
       },
       {
         name: t('全库备份'),
-        id: 'spiderDbBackup',
+        id: TicketTypes.TENDBCLUSTER_FULL_BACKUP,
         parentId: 'spider_copy',
         dbConsoleValue: 'tendbCluster.toolbox.dbBackup',
       },