diff --git a/dbm-ui/frontend/src/components/render-table/columns/DateTime.vue b/dbm-ui/frontend/src/components/render-table/columns/DateTime.vue
index e9b4659213..1477979e97 100644
--- a/dbm-ui/frontend/src/components/render-table/columns/DateTime.vue
+++ b/dbm-ui/frontend/src/components/render-table/columns/DateTime.vue
@@ -98,7 +98,6 @@
 
   const handleChange = (value: Required<Props>['modelValue']) => {
     localValue.value = value;
-    console.log('handleChange', value);
     validator(localValue.value).then(() => {
       window.changeConfirm = true;
       emits('update:modelValue', localValue.value);
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/tendbcluster/rollback.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/tendbcluster/rollback.ts
index fd0c8510b3..b03a86ae1f 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/tendbcluster/rollback.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/tendbcluster/rollback.ts
@@ -10,13 +10,13 @@
  * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
  * the specific language governing permissions and limitations under the License.
  */
-import type { MySQLRollbackDetails } from '@services/model/ticket/details/mysql';
+import type { SpiderRollbackDetails } from '@services/model/ticket/details/spider';
 import TicketModel from '@services/model/ticket/ticket';
 
 import { random } from '@utils';
 
 // Spider 定点构造
-export function generateSpiderRollbackCloneData(ticketData: TicketModel<MySQLRollbackDetails>) {
+export function generateSpiderRollbackCloneData(ticketData: TicketModel<SpiderRollbackDetails>) {
   const { clusters, infos, rollback_cluster_type } = ticketData.details;
   const tableDataList = infos.map((item) => ({
     rowKey: random(),
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 511f279a8e..82e01650b9 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3418,6 +3418,8 @@
     "包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用",
     "查看域名/IP对应关系": "查看域名/IP对应关系",
     "确认继续所有人工确认节点": "确认继续所有人工确认节点",
+    "请先选择待回档集群": "请先选择待回档集群",
+    "请先添加待回档集群": "请先添加待回档集群",
     "任务": "任务",
     "Redis版本": "Redis版本",
     "当前分片数": "当前分片数",
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts b/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts
index 5ab3593414..ad84fa6139 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/mysql.ts
@@ -458,6 +458,16 @@ export enum RollbackClusterTypes {
   BUILD_INTO_METACLUSTER = 'BUILD_INTO_METACLUSTER',
 }
 
+/**
+ * MySql 定点回档主机信息
+ */
+export interface RollbackHost {
+  bk_biz_id: number;
+  bk_cloud_id: number;
+  bk_host_id: number;
+  ip: string;
+}
+
 /**
  * MySql 定点回档
  */
@@ -470,16 +480,9 @@ export interface MySQLRollbackDetails extends DetailBase {
     databases_ignore: string[];
     tables: string[];
     tables_ignore: string[];
-    rollback_host:
-      | {
-          bk_biz_id: number;
-          bk_cloud_id: number;
-          bk_host_id: number;
-          ip: string;
-        }
-      | boolean;
-    target_cluster_id: number | boolean;
-    rollback_type?: string;
+    rollback_host: RollbackHost;
+    target_cluster_id: number;
+    rollback_type: string;
     rollback_time: string;
     backupinfo: {
       backup_id: string;
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/spider.ts b/dbm-ui/frontend/src/services/model/ticket/details/spider.ts
index a2cdb708a3..7740983584 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/spider.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/spider.ts
@@ -14,6 +14,7 @@
 import ClusterSpecModel from '@services/model/resource-spec/cluster-sepc';
 
 import type { DetailClusters, DetailSpecs, SpecInfo } from './common';
+import type { RollbackClusterTypes } from './mysql';
 
 // spider 部署
 export interface SpiderApplyDetails {
@@ -245,25 +246,29 @@ export interface SpiderNodeRebalanceDetails {
 
 // spider 定点回档
 export interface SpiderRollbackDetails {
-  cluster_id: number;
   clusters: DetailClusters;
-  rollback_type: 'REMOTE_AND_BACKUPID' | 'REMOTE_AND_TIME';
-  rollback_time: string;
-  backupinfo: {
-    backup_begin_time: string;
-    backup_end_time: string;
-    backup_id: string;
-    backup_time: string;
-    bill_id: string;
-    bk_biz_id: number;
-    bk_cloud_id: number;
-    cluster_address: string;
+  infos: {
     cluster_id: number;
-  };
-  databases: string[];
-  tables: string[];
-  databases_ignore: string[];
-  tables_ignore: string[];
+    target_cluster_id: number;
+    rollback_type: 'REMOTE_AND_BACKUPID' | 'REMOTE_AND_TIME';
+    rollback_time: string;
+    backupinfo: {
+      backup_begin_time: string;
+      backup_end_time: string;
+      backup_id: string;
+      backup_time: string;
+      bill_id: string;
+      bk_biz_id: number;
+      bk_cloud_id: number;
+      cluster_address: string;
+      cluster_id: number;
+    };
+    databases: string[];
+    tables: string[];
+    databases_ignore: string[];
+    tables_ignore: string[];
+  }[];
+  rollback_cluster_type: RollbackClusterTypes;
 }
 
 // Spider flashback
diff --git a/dbm-ui/frontend/src/services/source/fixpointRollback.ts b/dbm-ui/frontend/src/services/source/fixpointRollback.ts
index 7706d8c611..a3f5e74b66 100644
--- a/dbm-ui/frontend/src/services/source/fixpointRollback.ts
+++ b/dbm-ui/frontend/src/services/source/fixpointRollback.ts
@@ -118,9 +118,5 @@ export function queryLatesBackupLog(params: {
   rollback_time: string;
   job_instance_id?: number;
 }) {
-  return http.get<{
-    backup_logs: Array<any>;
-    job_status: string;
-    message: string;
-  }>(`${path}/query_latest_backup_log/`, params);
+  return http.get<BackupLogRecord>(`${path}/query_latest_backup_log/`, params);
 }
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
index d0c217f6f1..7021ac5101 100644
--- a/dbm-ui/frontend/src/types/auto-imports.d.ts
+++ b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -71,6 +71,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/Index.vue
index 6b81005b7a..a66491a07e 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/Index.vue
@@ -25,10 +25,10 @@
     type="card"
     @change="handleChange">
     <BkRadioButton
-      v-for="(item, index) in rollbackInfos"
-      :key="index"
-      :label="item.value">
-      {{ item.label }}
+      v-for="(value, key) in rollbackTypeLabel"
+      :key="key"
+      :label="key">
+      {{ value }}
     </BkRadioButton>
   </BkRadioGroup>
   <RenderData
@@ -36,6 +36,7 @@
     :data="tableData"
     :rollback-cluster-type="rollbackClusterType" />
 </template>
+
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
@@ -47,8 +48,8 @@
 
   import TimeZonePicker from '@components/time-zone-picker/index.vue';
 
-  import { rollbackInfos } from './components/common/const';
-  import RenderData, { createRowData, type IDataRow } from './components/render-data/Index.vue';
+  import { createRowData, type IDataRow } from './components/render-row/Index.vue';
+  import RenderData from './components/RenderData.vue';
 
   const { t } = useI18n();
 
@@ -57,14 +58,20 @@
     type: TicketTypes.MYSQL_ROLLBACK_CLUSTER,
     onSuccess(cloneData) {
       rollbackClusterType.value = cloneData.rollback_cluster_type;
-      tableData.value = cloneData.tableDataList as IDataRow[];
+      tableData.value = cloneData.tableDataList;
       window.changeConfirm = true;
     },
   });
 
+  const rollbackTypeLabel = {
+    [RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER]: t('构造到新集群'),
+    [RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER]: t('构造到已有集群'),
+    [RollbackClusterTypes.BUILD_INTO_METACLUSTER]: t('构造到原集群'),
+  };
+
   const renderDataRef = ref<InstanceType<typeof RenderData>>();
   const rollbackClusterType = ref<RollbackClusterTypes>(RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER);
-  const tableData = shallowRef<Array<IDataRow>>([createRowData({})]);
+  const tableData = shallowRef<IDataRow[]>([createRowData({})]);
 
   const handleChange = () => {
     renderDataRef.value!.reset();
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/RenderData.vue
similarity index 68%
rename from dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/RenderData.vue
index 09a299c365..f49a8dc517 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/RenderData.vue
@@ -13,21 +13,22 @@
 
 <template>
   <SmartAction>
-    <Component
-      :is="components.RenderData"
+    <RenderTable
+      :key="rollbackClusterType"
       class="mt16 mb-20"
+      :rollback-cluster-type="rollbackClusterType"
       @batch-edit="(obj) => handleBatchEdit(obj)"
       @show-selector="handleShowSelector">
-      <Component
-        :is="components.RenderDataRow"
+      <RenderRow
         v-for="(item, index) in tableData"
         :key="item.rowKey"
         ref="rowRefs"
         :data="item"
         :removeable="tableData.length < 2"
-        @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
+        :rollback-cluster-type="rollbackClusterType"
+        @add="(payload: IDataRow[]) => handleAppend(index, payload)"
         @remove="() => handleRemove(index)" />
-    </Component>
+    </RenderTable>
     <template #action>
       <BkButton
         class="w-88"
@@ -52,70 +53,11 @@
     v-model:is-show="isShowSelector"
     :cluster-types="[ClusterTypes.TENDBHA, ClusterTypes.TENDBSINGLE]"
     :selected="selectedClusters"
-    :tab-list-config="tabListConfig"
     @change="handelClusterChange" />
 </template>
-<script lang="ts">
-  import { random } from '@utils';
 
-  import { BackupSources, BackupTypes } from '../common/const';
-  import type { HostDataItem } from '../common/RenderHostInputSelect.vue';
-
-  export interface IDataRow {
-    rowKey: string;
-    clusterData?: {
-      id: number;
-      domain: string;
-      cloudId?: number;
-      cloudName?: string;
-      clusterType?: string;
-    };
-    targetClusterId?: number;
-    rollbackHost?: HostDataItem;
-    backupSource: BackupSources;
-    rollbackType: BackupTypes;
-    backupid?: string;
-    rollbackTime?: string;
-    databases: string[];
-    databasesIgnore?: string[];
-    tables: string[];
-    tablesIgnore?: string[];
-  }
-
-  // 创建表格数据
-  export const createRowData = (data = {} as Partial<IDataRow>) => ({
-    rowKey: random(),
-    clusterData: data.clusterData || {
-      id: 0,
-      domain: '',
-    },
-    targetClusterId: data.targetClusterId || 0,
-    rollbackHost: data.rollbackHost || {
-      ip: '',
-      bk_host_id: 0,
-      bk_cloud_id: 0,
-      bk_biz_id: 0,
-    },
-    backupSource: data.backupSource || BackupSources.REMOTE,
-    rollbackType: data.rollbackType || BackupTypes.BACKUPID,
-    backupid: data.backupid || '',
-    rollbackTime: data.rollbackTime || '',
-    databases: data.databases || ['*'],
-    databasesIgnore: data.databasesIgnore,
-    tables: data.tables || ['*'],
-    tablesIgnore: data.tablesIgnore,
-  });
-
-  interface Props {
-    data: IDataRow[];
-    rollbackClusterType: RollbackClusterTypes;
-  }
-
-  interface Exposes {
-    reset: () => void;
-  }
-</script>
 <script setup lang="ts">
+  import { debounce } from 'lodash';
   import { useI18n } from 'vue-i18n';
   import { useRouter } from 'vue-router';
 
@@ -124,49 +66,29 @@
   import { RollbackClusterTypes } from '@services/model/ticket/details/mysql';
   import { createTicket } from '@services/source/ticket';
 
-  import { useGlobalBizs } from '@stores';
-
   import { ClusterTypes, TicketTypes } from '@common/const';
 
   import ClusterSelector from '@components/cluster-selector/Index.vue';
 
-  import ExistCluster from './exist-cluster/Index.vue';
-  import ExistClusterRow from './exist-cluster/Row.vue';
-  import NewCluster from './new-cluster/Index.vue';
-  import NewClusterRow from './new-cluster/Row.vue';
-  import OriginCluster from './origin-cluster/Index.vue';
-  import OriginClusterRow from './origin-cluster/Row.vue';
+  import { messageWarn } from '@utils';
 
-  const props = defineProps<Props>();
+  import RenderRow, { createRowData, type IDataRow } from './render-row/Index.vue';
+  import RenderTable from './RenderTable.vue';
 
-  const rollbackRenderDataInfo = {
-    [RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER]: {
-      RenderData: NewCluster,
-      RenderDataRow: NewClusterRow,
-    },
-    [RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER]: {
-      RenderData: ExistCluster,
-      RenderDataRow: ExistClusterRow,
-    },
-    [RollbackClusterTypes.BUILD_INTO_METACLUSTER]: {
-      RenderData: OriginCluster,
-      RenderDataRow: OriginClusterRow,
-    },
-  };
+  interface Props {
+    data: IDataRow[];
+    rollbackClusterType: RollbackClusterTypes;
+  }
 
-  const tabListConfig = {
-    [ClusterTypes.TENDBHA]: {
-      showPreviewResultTitle: true,
-    },
-    [ClusterTypes.TENDBSINGLE]: {
-      showPreviewResultTitle: true,
-    },
-  };
+  interface Exposes {
+    reset: () => void;
+  }
+
+  const props = defineProps<Props>();
 
   const { t } = useI18n();
 
   const router = useRouter();
-  const { currentBizId } = useGlobalBizs();
 
   // 集群域名是否已存在表格的映射表
   let domainMemo: Record<string, boolean> = {};
@@ -178,13 +100,11 @@
   const rowRefs = ref();
   const isShowSelector = ref(false);
   const isSubmitting = ref(false);
-  const tableData = ref<Array<IDataRow>>([createRowData({})]);
+  const tableData = ref<IDataRow[]>([createRowData({})]);
   const selectedClusters = shallowRef<{ [key: string]: Array<TendbhaModel> | Array<TendbsingleModel> }>(initSelected);
 
-  const components = computed(() => rollbackRenderDataInfo[props.rollbackClusterType]);
-
   // 检测列表是否为空
-  const checkListEmpty = (list: Array<IDataRow>) => {
+  const checkListEmpty = (list: IDataRow[]) => {
     if (list.length > 1) {
       return false;
     }
@@ -198,6 +118,12 @@
 
   // 批量编辑
   const handleBatchEdit = (obj: Record<string, any>) => {
+    if (checkListEmpty(tableData.value)) {
+      debounce(() => {
+        messageWarn(t('请先添加待回档集群'));
+      }, 300);
+      return;
+    }
     if (!obj) {
       return;
     }
@@ -244,7 +170,7 @@
   };
 
   // 追加一个集群
-  const handleAppend = (index: number, appendList: Array<IDataRow>) => {
+  const handleAppend = (index: number, appendList: IDataRow[]) => {
     const dataList = [...tableData.value];
     dataList.splice(index + 1, 0, ...appendList);
     tableData.value = dataList;
@@ -268,7 +194,7 @@
       isSubmitting.value = true;
       const infos = await Promise.all(rowRefs.value.map((item: { getValue: () => Promise<any> }) => item.getValue()));
       await createTicket({
-        bk_biz_id: currentBizId,
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
         ticket_type: TicketTypes.MYSQL_ROLLBACK_CLUSTER,
         remark: '',
         details: {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/exist-cluster/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/RenderTable.vue
similarity index 55%
rename from dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/exist-cluster/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/RenderTable.vue
index 52d7688878..b23b039b5a 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/exist-cluster/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/RenderTable.vue
@@ -24,18 +24,31 @@
           @click="handleShowBatchSelector" />
       </template>
     </RenderTableHeadColumn>
+    <template v-if="showHostColumn">
+      <RenderTableHeadColumn
+        :min-width="140"
+        :width="160">
+        {{ t('主机来源') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="180"
+        :width="180">
+        {{ t('回档到新主机') }}
+      </RenderTableHeadColumn>
+    </template>
     <RenderTableHeadColumn
+      v-if="showTargetClusterColumn"
       :min-width="200"
       :width="250">
       {{ t('目标集群') }}
     </RenderTableHeadColumn>
     <RenderTableHeadColumn
-      :min-width="120"
-      :width="150">
+      :min-width="100"
+      :width="120">
       <template #append>
         <BatchEditColumn
           v-model="isShowBatchEdit.backupSource"
-          :data-list="selectList.backupSource"
+          :data-list="backupSourceList"
           :title="t('备份源')"
           @change="(value) => handleBatchEdit('backupSource', value)">
           <BatchOperateIcon
@@ -64,7 +77,7 @@
               v-model="checkedModeType"
               :clearable="false"
               filterable
-              :list="selectList.mode"
+              :list="backupTypeList"
               @change="handleModeType" />
             <div v-if="checkedModeType === BackupTypes.TIME">
               <div
@@ -74,6 +87,7 @@
               </div>
               <BkDatePicker
                 :clearable="false"
+                :disabled-date="disableDate"
                 :placeholder="t('如：2019-01-30 12:12:21')"
                 style="width: 361px"
                 type="datetime"
@@ -88,6 +102,7 @@
               </div>
               <BkDatePicker
                 :clearable="false"
+                :disabled-date="disableDate"
                 :placeholder="t('如：2019-01-30 12:12:21')"
                 style="width: 361px"
                 type="datetime"
@@ -108,80 +123,82 @@
       </template>
       {{ t('回档类型') }}
     </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :min-width="150"
-      :width="200">
-      <template #append>
-        <BatchEditColumn
-          v-model="isShowBatchEdit.databases"
-          :placeholder="t('请输入,如需输入多个用回车换行')"
-          :title="t('回档DB')"
-          type="textarea"
-          @change="(value) => handleBatchEdit('databases', value, true)">
-          <BatchOperateIcon
-            class="ml-4"
-            type="edit"
-            @click="handleShowBatchEdit('databases')" />
-        </BatchEditColumn>
-      </template>
-      {{ t('回档DB') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :min-width="150"
-      :required="false"
-      :width="200">
-      <template #append>
-        <BatchEditColumn
-          v-model="isShowBatchEdit.databasesIgnore"
-          :placeholder="t('请输入,如需输入多个用回车换行')"
-          :title="t('忽略DB')"
-          type="textarea"
-          @change="(value) => handleBatchEdit('databasesIgnore', value, true)">
-          <BatchOperateIcon
-            class="ml-4"
-            type="edit"
-            @click="handleShowBatchEdit('databasesIgnore')" />
-        </BatchEditColumn>
-      </template>
-      {{ t('忽略DB') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :min-width="150"
-      :width="200">
-      <template #append>
-        <BatchEditColumn
-          v-model="isShowBatchEdit.tables"
-          :placeholder="t('请输入,如需输入多个用回车换行')"
-          :title="t('回档表名')"
-          type="textarea"
-          @change="(value) => handleBatchEdit('tables', value, true)">
-          <BatchOperateIcon
-            class="ml-4"
-            type="edit"
-            @click="handleShowBatchEdit('tables')" />
-        </BatchEditColumn>
-      </template>
-      {{ t('回档表名') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :min-width="150"
-      :required="false"
-      :width="200">
-      <template #append>
-        <BatchEditColumn
-          v-model="isShowBatchEdit.tablesIgnore"
-          :placeholder="t('请输入,如需输入多个用回车换行')"
-          :title="t('忽略表名')"
-          type="textarea"
-          @change="(value) => handleBatchEdit('tablesIgnore', value, true)">
-          <BatchOperateIcon
-            class="ml-4"
-            type="edit"
-            @click="handleShowBatchEdit('tablesIgnore')" />
-        </BatchEditColumn>
-      </template>
-      {{ t('忽略表名') }}
-    </RenderTableHeadColumn>
+    <template v-if="showDbIgnoreColumn">
+      <RenderTableHeadColumn
+        :min-width="150"
+        :width="200">
+        <template #append>
+          <BatchEditColumn
+            v-model="isShowBatchEdit.databases"
+            :placeholder="t('请输入,如需输入多个用回车换行')"
+            :title="t('回档DB')"
+            type="textarea"
+            @change="(value) => handleBatchEdit('databases', value)">
+            <BatchOperateIcon
+              class="ml-4"
+              type="edit"
+              @click="handleShowBatchEdit('databases')" />
+          </BatchEditColumn>
+        </template>
+        {{ t('回档DB') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="150"
+        :required="false"
+        :width="200">
+        <template #append>
+          <BatchEditColumn
+            v-model="isShowBatchEdit.databasesIgnore"
+            :placeholder="t('请输入,如需输入多个用回车换行')"
+            :title="t('忽略DB')"
+            type="textarea"
+            @change="(value) => handleBatchEdit('databasesIgnore', value)">
+            <BatchOperateIcon
+              class="ml-4"
+              type="edit"
+              @click="handleShowBatchEdit('databasesIgnore')" />
+          </BatchEditColumn>
+        </template>
+        {{ t('忽略DB') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="150"
+        :width="200">
+        <template #append>
+          <BatchEditColumn
+            v-model="isShowBatchEdit.tables"
+            :placeholder="t('请输入,如需输入多个用回车换行')"
+            :title="t('回档表名')"
+            type="textarea"
+            @change="(value) => handleBatchEdit('tables', value)">
+            <BatchOperateIcon
+              class="ml-4"
+              type="edit"
+              @click="handleShowBatchEdit('tables')" />
+          </BatchEditColumn>
+        </template>
+        {{ t('回档表名') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="150"
+        :required="false"
+        :width="200">
+        <template #append>
+          <BatchEditColumn
+            v-model="isShowBatchEdit.tablesIgnore"
+            :placeholder="t('请输入,如需输入多个用回车换行')"
+            :title="t('忽略表名')"
+            type="textarea"
+            @change="(value) => handleBatchEdit('tablesIgnore', value)">
+            <BatchOperateIcon
+              class="ml-4"
+              type="edit"
+              @click="handleShowBatchEdit('tablesIgnore')" />
+          </BatchEditColumn>
+        </template>
+        {{ t('忽略表名') }}
+      </RenderTableHeadColumn>
+    </template>
     <RenderTableHeadColumn
       fixed="right"
       :required="false"
@@ -193,23 +210,35 @@
     </template>
   </RenderTable>
 </template>
+
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
+  import { RollbackClusterTypes } from '@services/model/ticket/details/mysql';
+
   import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
   import RenderTable from '@components/render-table/Index.vue';
 
   import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
   import BatchOperateIcon from '@views/db-manage/common/batch-operate-icon/Index.vue';
 
-  import { BackupTypes, selectList } from '../../common/const';
-  import type { IDataRow } from '../Index.vue';
+  import { backupTypeList, BackupTypes } from './render-row/components/render-mode/Index.vue';
+  import { backupSourceList } from './render-row/components/RenderBackup.vue';
+  import type { IDataRow } from './render-row/Index.vue';
+
+  interface Props {
+    rollbackClusterType: RollbackClusterTypes;
+  }
 
   interface Emits {
     (e: 'showSelector'): void;
     (e: 'batchEdit', obj: Record<string, any>): void;
   }
 
+  const props = withDefaults(defineProps<Props>(), {
+    rollbackClusterType: RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER,
+  });
+
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
@@ -225,12 +254,28 @@
     tablesIgnore: false,
   });
 
+  const configMap = {
+    [RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER]: ['host', 'dbTableIgnore'],
+    [RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER]: ['targetCluster', 'dbTableIgnore'],
+    [RollbackClusterTypes.BUILD_INTO_METACLUSTER]: [] as string[],
+  };
+
+  const showColumn = (column: string) => computed(() => configMap[props.rollbackClusterType].includes(column));
+
+  const showHostColumn = showColumn('host');
+  const showTargetClusterColumn = showColumn('targetCluster');
+  const showDbIgnoreColumn = showColumn('dbTableIgnore');
+
+  const disableDate = (date: Date) => date?.valueOf() > Date.now();
+
   const handleModeType = (value: BackupTypes) => {
     checkedModeType.value = value;
   };
+
   const handleDatePickerChange = (date: string) => {
     datePickerValue.value = date;
   };
+
   const handleBatchModeEdit = () => {
     if (checkedModeType.value === BackupTypes.TIME) {
       handleBatchEdit('rollbackTime', datePickerValue.value);
@@ -249,9 +294,9 @@
     emits('showSelector');
   };
 
-  const handleBatchEdit = (key: keyof IDataRow, value: string, isArray = false) => {
+  const handleBatchEdit = (key: keyof IDataRow, value: string | string[]) => {
     emits('batchEdit', {
-      [key]: isArray && value ? value.split('\n') : value,
+      [key]: value,
     });
   };
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/const.ts b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/const.ts
deleted file mode 100644
index a281894bf4..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/const.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { RollbackClusterTypes } from '@services/model/ticket/details/mysql';
-
-import { t } from '@locales/index';
-
-export enum BackupSources {
-  REMOTE = 'remote',
-  LOCAL = 'local',
-}
-export enum BackupTypes {
-  BACKUPID = 'BACKUPID',
-  TIME = 'TIME',
-}
-export const selectList = {
-  backupSource: [
-    {
-      value: BackupSources.REMOTE,
-      label: t('远程备份'),
-    },
-    {
-      value: BackupSources.LOCAL,
-      label: t('本地备份'),
-    },
-  ],
-  mode: [
-    {
-      value: BackupTypes.BACKUPID,
-      label: t('备份记录'),
-    },
-    {
-      value: BackupTypes.TIME,
-      label: t('回档到指定时间'),
-    },
-  ],
-};
-export const rollbackInfos = {
-  [RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER]: {
-    value: RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER,
-    label: t('构造到新集群'),
-  },
-  [RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER]: {
-    value: RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER,
-    label: t('构造到已有集群'),
-  },
-  [RollbackClusterTypes.BUILD_INTO_METACLUSTER]: {
-    value: RollbackClusterTypes.BUILD_INTO_METACLUSTER,
-    label: t('构造到原集群'),
-  },
-};
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/exist-cluster/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/exist-cluster/Row.vue
deleted file mode 100644
index 75d8ced9c8..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/exist-cluster/Row.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<!--
- * 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>
-    <FixedColumn fixed="left">
-      <RenderCluster
-        ref="clusterRef"
-        :model-value="localClusterData"
-        @change="handleClusterChange" />
-    </FixedColumn>
-    <td style="padding: 0">
-      <RenderClusterInputSelect
-        ref="targetClustersRef"
-        :source-cluster-id="localClusterData!.id"
-        :target-cluster-id="data.targetClusterId" />
-    </td>
-    <td style="padding: 0">
-      <RenderBackup
-        ref="backupSourceRef"
-        :model-value="localBackupSource"
-        @change="handleBackupSourceChange" />
-    </td>
-    <td style="padding: 0">
-      <RenderMode
-        ref="modeRef"
-        :backup-source="localBackupSource"
-        :backupid="data.backupid"
-        :cluster-id="localClusterData!.id"
-        :rollback-time="data.rollbackTime" />
-    </td>
-    <td style="padding: 0">
-      <RenderDbName
-        ref="databasesRef"
-        check-not-exist
-        :cluster-id="localClusterData!.id"
-        :init-value="['*']"
-        :model-value="data.databases" />
-    </td>
-    <td style="padding: 0">
-      <RenderDbName
-        ref="databasesIgnoreRef"
-        :allow-asterisk="false"
-        :cluster-id="localClusterData!.id"
-        :model-value="data.databasesIgnore"
-        :required="false" />
-    </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablesRef"
-        :cluster-id="localClusterData!.id"
-        :init-value="['*']"
-        :model-value="data.tables" />
-    </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablesIgnoreRef"
-        :allow-asterisk="false"
-        :cluster-id="localClusterData!.id"
-        :model-value="data.tablesIgnore"
-        :required="false" />
-    </td>
-    <OperateColumn
-      :removeable="removeable"
-      @add="handleAppend"
-      @clone="handleClone"
-      @remove="handleRemove" />
-  </tr>
-</template>
-<script setup lang="ts">
-  import { ref, watch } from 'vue';
-
-  import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
-  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
-
-  import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
-  import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
-  import RenderMode from '@views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/Index.vue';
-  import RenderBackup from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderBackup.vue';
-  import RenderCluster from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderCluster.vue';
-  import RenderClusterInputSelect from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderClusterInputSelect.vue';
-
-  import { BackupSources } from '../../common/const';
-  import { createRowData, type IDataRow } from '../Index.vue';
-
-  interface Props {
-    data: IDataRow;
-    removeable: boolean;
-  }
-  interface Emits {
-    (e: 'add', params: Array<IDataRow>): void;
-    (e: 'remove'): void;
-    (e: 'clone', value: IDataRow): void;
-  }
-
-  interface Exposes {
-    validator: (field: keyof IDataRow) => void;
-    getValue: () => Promise<any>;
-  }
-
-  const props = defineProps<Props>();
-
-  const emits = defineEmits<Emits>();
-
-  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
-  const targetClustersRef = ref<InstanceType<typeof RenderClusterInputSelect>>();
-  const backupSourceRef = ref<InstanceType<typeof RenderBackup>>();
-  const modeRef = ref<InstanceType<typeof RenderMode>>();
-  const databasesRef = ref<InstanceType<typeof RenderDbName>>();
-  const databasesIgnoreRef = ref<InstanceType<typeof RenderDbName>>();
-  const tablesRef = ref<InstanceType<typeof RenderTableName>>();
-  const tablesIgnoreRef = ref<InstanceType<typeof RenderTableName>>();
-
-  const localClusterData = ref<IDataRow['clusterData']>({
-    id: 0,
-    domain: '',
-  });
-  const localBackupSource = ref(BackupSources.REMOTE);
-
-  const handleClusterChange = (data: IDataRow['clusterData']) => {
-    localClusterData.value = data;
-  };
-
-  const handleBackupSourceChange = (value: string) => {
-    localBackupSource.value = value as BackupSources;
-  };
-
-  const handleAppend = () => {
-    emits('add', [createRowData()]);
-  };
-
-  const handleRemove = () => {
-    if (props.removeable) {
-      return;
-    }
-    emits('remove');
-  };
-
-  const handleClone = () => {};
-
-  watch(
-    () => props.data,
-    () => {
-      if (props.data.clusterData) {
-        localClusterData.value = props.data.clusterData;
-      }
-      localBackupSource.value = props.data.backupSource;
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
-  defineExpose<Exposes>({
-    validator(field: keyof IDataRow) {
-      switch (field) {
-        case 'databases':
-          databasesRef.value!.getValue('databases');
-          break;
-        case 'tables':
-          tablesRef.value!.getValue('tables');
-          break;
-        case 'databasesIgnore':
-          databasesIgnoreRef.value!.getValue('databases_ignore');
-          break;
-        case 'tablesIgnore':
-          tablesIgnoreRef.value!.getValue('tables_ignore');
-          break;
-        default:
-          break;
-      }
-    },
-    getValue() {
-      return Promise.all([
-        clusterRef.value!.getValue(),
-        targetClustersRef.value!.getValue(),
-        backupSourceRef.value!.getValue(),
-        modeRef.value!.getValue(),
-        databasesRef.value!.getValue('databases'),
-        tablesRef.value!.getValue('tables'),
-        databasesIgnoreRef.value!.getValue('databases_ignore'),
-        tablesIgnoreRef.value!.getValue('tables_ignore'),
-      ]).then(
-        ([
-          clusterData,
-          tagetClusterData,
-          backupSourceData,
-          modeData,
-          databasesData,
-          tablesData,
-          databasesIgnoreData,
-          tablesIgnoreData,
-        ]) => ({
-          ...clusterData,
-          ...tagetClusterData,
-          ...backupSourceData,
-          ...modeData,
-          ...databasesData,
-          ...tablesData,
-          ...databasesIgnoreData,
-          ...tablesIgnoreData,
-        }),
-      );
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/new-cluster/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/new-cluster/Row.vue
deleted file mode 100644
index cb25581e9e..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/new-cluster/Row.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<!--
- * 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>
-    <FixedColumn fixed="left">
-      <RenderCluster
-        ref="clusterRef"
-        :model-value="localClusterData"
-        @change="handleClusterChange" />
-    </FixedColumn>
-    <td style="padding: 0">
-      <RenderHostSource
-        ref="hostSourceRef"
-        :model-value="localHostSource"
-        @change="handleHostSourceChange" />
-    </td>
-    <td style="padding: 0">
-      <RenderHostInputSelect
-        ref="hostRef"
-        :cluster-data="localClusterData"
-        :host-data="[{ ...(data.rollbackHost as HostDataItem) }]"
-        single />
-    </td>
-    <td style="padding: 0">
-      <RenderBackup
-        ref="backupSourceRef"
-        :model-value="localBackupSource"
-        @change="handleBackupSourceChange" />
-    </td>
-    <td style="padding: 0">
-      <RenderMode
-        ref="modeRef"
-        :backup-source="localBackupSource"
-        :backupid="data.backupid"
-        :cluster-id="localClusterData!.id"
-        :rollback-time="data.rollbackTime" />
-    </td>
-    <td style="padding: 0">
-      <RenderDbName
-        ref="databasesRef"
-        check-not-exist
-        :cluster-id="localClusterData!.id"
-        :init-value="['*']"
-        :model-value="data.databases" />
-    </td>
-    <td style="padding: 0">
-      <RenderDbName
-        ref="databasesIgnoreRef"
-        :allow-asterisk="false"
-        :cluster-id="localClusterData!.id"
-        :model-value="data.databasesIgnore"
-        :required="false" />
-    </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablesRef"
-        :cluster-id="localClusterData!.id"
-        :init-value="['*']"
-        :model-value="data.tables" />
-    </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablesIgnoreRef"
-        :allow-asterisk="false"
-        :cluster-id="localClusterData!.id"
-        :model-value="data.tablesIgnore"
-        :required="false" />
-    </td>
-    <OperateColumn
-      :removeable="removeable"
-      @add="handleAppend"
-      @remove="handleRemove" />
-  </tr>
-</template>
-<script setup lang="ts">
-  import { ref, watch } from 'vue';
-
-  import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
-  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
-
-  import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
-  import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
-  import RenderMode from '@views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/Index.vue';
-  import RenderBackup from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderBackup.vue';
-  import RenderCluster from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderCluster.vue';
-  import RenderHostInputSelect, {
-    type HostDataItem,
-  } from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostInputSelect.vue';
-  import RenderHostSource from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostSource.vue';
-
-  import { BackupSources } from '../../common/const';
-  import { createRowData, type IDataRow } from '../Index.vue';
-
-  interface Props {
-    data: IDataRow;
-    removeable: boolean;
-  }
-  interface Emits {
-    (e: 'add', params: Array<IDataRow>): void;
-    (e: 'remove'): void;
-  }
-
-  interface Exposes {
-    validator: (field: keyof IDataRow) => void;
-    getValue: () => Promise<any>;
-  }
-
-  const props = defineProps<Props>();
-
-  const emits = defineEmits<Emits>();
-
-  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
-  const hostSourceRef = ref<InstanceType<typeof RenderHostSource>>();
-  const hostRef = ref<InstanceType<typeof RenderHostInputSelect>>();
-  const backupSourceRef = ref<InstanceType<typeof RenderBackup>>();
-  const modeRef = ref<InstanceType<typeof RenderMode>>();
-  const databasesRef = ref<InstanceType<typeof RenderDbName>>();
-  const databasesIgnoreRef = ref<InstanceType<typeof RenderDbName>>();
-  const tablesRef = ref<InstanceType<typeof RenderTableName>>();
-  const tablesIgnoreRef = ref<InstanceType<typeof RenderTableName>>();
-
-  const localHostSource = ref('idle');
-  const localClusterData = ref<IDataRow['clusterData']>({
-    id: 0,
-    domain: '',
-  });
-  const localBackupSource = ref(BackupSources.REMOTE);
-
-  const handleClusterChange = (data: IDataRow['clusterData']) => {
-    localClusterData.value = data;
-  };
-
-  const handleHostSourceChange = (value: string) => {
-    localHostSource.value = value;
-  };
-
-  const handleBackupSourceChange = (value: string) => {
-    localBackupSource.value = value as BackupSources;
-  };
-
-  const handleAppend = () => {
-    emits('add', [createRowData()]);
-  };
-
-  const handleRemove = () => {
-    if (props.removeable) {
-      return;
-    }
-    emits('remove');
-  };
-
-  watch(
-    () => props.data,
-    () => {
-      if (props.data.clusterData) {
-        localClusterData.value = props.data.clusterData;
-      }
-      localBackupSource.value = props.data.backupSource;
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
-  defineExpose<Exposes>({
-    validator(field: keyof IDataRow) {
-      switch (field) {
-        case 'databases': {
-          databasesRef.value!.getValue('databases');
-          break;
-        }
-        case 'tables':
-          tablesRef.value!.getValue('tables');
-          break;
-        case 'databasesIgnore':
-          databasesIgnoreRef.value!.getValue('databases_ignore');
-          break;
-        case 'tablesIgnore':
-          tablesIgnoreRef.value!.getValue('tables_ignore');
-          break;
-        default:
-          break;
-      }
-    },
-    getValue() {
-      return Promise.all([
-        clusterRef.value!.getValue(),
-        hostRef.value!.getValue(),
-        backupSourceRef.value!.getValue(),
-        modeRef.value!.getValue(),
-        databasesRef.value!.getValue('databases'),
-        tablesRef.value!.getValue('tables'),
-        databasesIgnoreRef.value!.getValue('databases_ignore'),
-        tablesIgnoreRef.value!.getValue('tables_ignore'),
-      ]).then(
-        ([
-          clusterData,
-          hostData,
-          backupSourceData,
-          modeData,
-          databasesData,
-          tablesData,
-          databasesIgnoreData,
-          tablesIgnoreData,
-        ]) => ({
-          ...clusterData,
-          rollback_host: { ...hostData.hosts[0] },
-          ...backupSourceData,
-          ...modeData,
-          ...databasesData,
-          ...tablesData,
-          ...databasesIgnoreData,
-          ...tablesIgnoreData,
-        }),
-      );
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/origin-cluster/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/origin-cluster/Index.vue
deleted file mode 100644
index 79ceb1e355..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/origin-cluster/Index.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<!--
- * 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>
-    <RenderTableHeadColumn
-      fixed="left"
-      :min-width="300"
-      :width="350">
-      {{ t('待回档集群') }}
-      <template #append>
-        <BatchOperateIcon
-          class="ml-4"
-          @click="handleShowBatchSelector" />
-      </template>
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :min-width="100"
-      :width="120">
-      <template #append>
-        <BatchEditColumn
-          v-model="isShowBatchEdit.backupSource"
-          :data-list="selectList.backupSource"
-          :title="t('备份源')"
-          @change="(value) => handleBatchEdit('backupSource', value)">
-          <BatchOperateIcon
-            class="ml-4"
-            type="edit"
-            @click="handleShowBatchEdit('backupSource')" />
-        </BatchEditColumn>
-      </template>
-      {{ t('备份源') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :min-width="380"
-      :width="400">
-      <template #append>
-        <BatchEditColumn
-          v-model="isShowBatchEdit.mode"
-          :title="t('回档类型')"
-          @change="handleBatchModeEdit">
-          <template #content>
-            <div
-              class="title-spot edit-title"
-              style="font-weight: normal">
-              {{ t('回档类型') }} <span class="required" />
-            </div>
-            <BkSelect
-              v-model="checkedModeType"
-              :clearable="false"
-              filterable
-              :list="selectList.mode"
-              @change="handleModeType" />
-            <div v-if="checkedModeType === BackupTypes.TIME">
-              <div
-                class="title-spot edit-title mt-24"
-                style="font-weight: normal">
-                {{ t('时间') }} <span class="required" />
-              </div>
-              <BkDatePicker
-                :clearable="false"
-                :placeholder="t('如：2019-01-30 12:12:21')"
-                style="width: 361px"
-                type="datetime"
-                :value="datePickerValue"
-                @change="handleDatePickerChange" />
-            </div>
-            <div v-else>
-              <div
-                class="title-spot edit-title mt-24"
-                style="font-weight: normal">
-                {{ t('备份文件 (批量编辑仅支持 “指定时间自动匹配” )') }} <span class="required" />
-              </div>
-              <BkDatePicker
-                :clearable="false"
-                :placeholder="t('如：2019-01-30 12:12:21')"
-                style="width: 361px"
-                type="datetime"
-                :value="datePickerValue"
-                @change="handleDatePickerChange" />
-              <div
-                class="mt-4"
-                :style="{ color: '#979ba5', lineHeight: '20px' }">
-                {{ t('自动匹配指定日期前的最新全库备份') }}
-              </div>
-            </div>
-          </template>
-        </BatchEditColumn>
-        <BatchOperateIcon
-          class="ml-4"
-          type="edit"
-          @click="handleShowBatchEdit('mode')" />
-      </template>
-      {{ t('回档类型') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      fixed="right"
-      :required="false"
-      :width="100">
-      {{ 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';
-
-  import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
-  import BatchOperateIcon from '@views/db-manage/common/batch-operate-icon/Index.vue';
-
-  import { BackupTypes, selectList } from '../../common/const';
-  import type { IDataRow } from '../Index.vue';
-
-  interface Emits {
-    (e: 'showSelector'): void;
-    (e: 'batchEdit', obj: Record<string, any>): void;
-  }
-
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  const checkedModeType = ref(BackupTypes.BACKUPID);
-  const datePickerValue = ref('');
-  const isShowBatchEdit = reactive({
-    backupSource: false,
-    mode: false,
-    databases: false,
-    databasesIgnore: false,
-    tables: false,
-    tablesIgnore: false,
-  });
-
-  const handleModeType = (value: BackupTypes) => {
-    checkedModeType.value = value;
-  };
-  const handleDatePickerChange = (date: string) => {
-    datePickerValue.value = date;
-  };
-  const handleBatchModeEdit = () => {
-    if (checkedModeType.value === BackupTypes.TIME) {
-      handleBatchEdit('rollbackTime', datePickerValue.value);
-      handleBatchEdit('backupid', '');
-    } else {
-      handleBatchEdit('backupid', datePickerValue.value);
-      handleBatchEdit('rollbackTime', '');
-    }
-  };
-
-  const handleShowBatchEdit = (col: keyof typeof isShowBatchEdit) => {
-    isShowBatchEdit[col] = !isShowBatchEdit[col];
-  };
-
-  const handleShowBatchSelector = () => {
-    emits('showSelector');
-  };
-
-  const handleBatchEdit = (key: keyof IDataRow, value: string, isArray = false) => {
-    emits('batchEdit', {
-      [key]: isArray && value ? value.split('\n') : value,
-    });
-  };
-</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/origin-cluster/Row.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/origin-cluster/Row.vue
deleted file mode 100644
index 7f7205a26a..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/origin-cluster/Row.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<!--
- * 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>
-    <FixedColumn fixed="left">
-      <RenderCluster
-        ref="clusterRef"
-        :model-value="localClusterData"
-        @change="handleClusterChange" />
-    </FixedColumn>
-    <td style="padding: 0">
-      <RenderBackup
-        ref="backupSourceRef"
-        :model-value="localBackupSource"
-        @change="handleBackupSourceChange" />
-    </td>
-    <td style="padding: 0">
-      <RenderMode
-        ref="modeRef"
-        :backup-source="localBackupSource"
-        :backupid="data.backupid"
-        :cluster-id="localClusterData!.id"
-        :rollback-time="data.rollbackTime" />
-    </td>
-    <OperateColumn
-      :removeable="removeable"
-      @add="handleAppend"
-      @remove="handleRemove" />
-  </tr>
-</template>
-<script setup lang="ts">
-  import { ref, watch } from 'vue';
-
-  import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
-  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
-
-  import RenderMode from '@views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/Index.vue';
-  import RenderBackup from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderBackup.vue';
-  import RenderCluster from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderCluster.vue';
-
-  import { BackupSources } from '../../common/const';
-  import { createRowData, type IDataRow } from '../Index.vue';
-
-  interface Props {
-    data: IDataRow;
-    removeable: boolean;
-  }
-  interface Emits {
-    (e: 'add', params: Array<IDataRow>): void;
-    (e: 'remove'): void;
-  }
-
-  interface Exposes {
-    getValue: () => Promise<any>;
-  }
-
-  const props = defineProps<Props>();
-
-  const emits = defineEmits<Emits>();
-
-  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
-  const backupSourceRef = ref<InstanceType<typeof RenderBackup>>();
-  const modeRef = ref<InstanceType<typeof RenderMode>>();
-
-  const localClusterData = ref<IDataRow['clusterData']>({
-    id: 0,
-    domain: '',
-  });
-  const localBackupSource = ref(BackupSources.REMOTE);
-
-  const handleClusterChange = (data: IDataRow['clusterData']) => {
-    localClusterData.value = data;
-  };
-
-  const handleBackupSourceChange = (value: string) => {
-    localBackupSource.value = value as BackupSources;
-  };
-
-  const handleAppend = () => {
-    emits('add', [createRowData()]);
-  };
-
-  const handleRemove = () => {
-    if (props.removeable) {
-      return;
-    }
-    emits('remove');
-  };
-
-  watch(
-    () => props.data,
-    () => {
-      if (props.data.clusterData) {
-        localClusterData.value = props.data.clusterData;
-      }
-      localBackupSource.value = props.data.backupSource;
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
-  defineExpose<Exposes>({
-    getValue() {
-      return Promise.all([
-        clusterRef.value!.getValue(),
-        backupSourceRef.value!.getValue(),
-        modeRef.value!.getValue(),
-      ]).then(([clusterData, backupSourceData, modeData]) => ({
-        ...clusterData,
-        ...backupSourceData,
-        ...modeData,
-        target_cluster_id: clusterData.cluster_id,
-        databases: ['*'],
-        databases_ignore: [],
-        tables: ['*'],
-        tables_ignore: [],
-      }));
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/Index.vue
new file mode 100644
index 0000000000..f63d4335aa
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/Index.vue
@@ -0,0 +1,385 @@
+<!--
+ * 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>
+    <FixedColumn fixed="left">
+      <RenderCluster
+        ref="clusterRef"
+        :model-value="localClusterData"
+        @change="handleClusterChange" />
+    </FixedColumn>
+    <template v-if="showHostColumn">
+      <td style="padding: 0">
+        <RenderHostSource
+          ref="hostSourceRef"
+          :model-value="localHostSource"
+          @change="handleHostSourceChange" />
+      </td>
+      <td style="padding: 0">
+        <RenderHostInputSelect
+          ref="hostRef"
+          :cluster-data="localClusterData"
+          :host-data="[data.rollbackHost]"
+          single />
+      </td>
+    </template>
+    <td
+      v-if="showTargetClusterColumn"
+      style="padding: 0">
+      <RenderClusterInputSelect
+        ref="targetClustersRef"
+        :source-cluster-id="localClusterData.id"
+        :target-cluster-id="data.targetClusterId" />
+    </td>
+    <td style="padding: 0">
+      <RenderBackup
+        ref="backupSourceRef"
+        :model-value="localBackupSource"
+        @change="handleBackupSourceChange" />
+    </td>
+    <td style="padding: 0">
+      <RenderMode
+        ref="modeRef"
+        :backup-source="localBackupSource"
+        :backupid="data.backupid"
+        :cluster-id="localClusterData.id"
+        :rollback-time="data.rollbackTime" />
+    </td>
+    <template v-if="showDbIgnoreColumn">
+      <td style="padding: 0">
+        <RenderDbName
+          ref="databasesRef"
+          check-not-exist
+          :cluster-id="localClusterData.id"
+          :init-value="['*']"
+          :model-value="data.databases" />
+      </td>
+      <td style="padding: 0">
+        <RenderDbName
+          ref="databasesIgnoreRef"
+          :allow-asterisk="false"
+          :cluster-id="localClusterData.id"
+          :model-value="data.databasesIgnore"
+          :required="false" />
+      </td>
+      <td style="padding: 0">
+        <RenderTableName
+          ref="tablesRef"
+          :cluster-id="localClusterData.id"
+          :init-value="['*']"
+          :model-value="data.tables" />
+      </td>
+      <td style="padding: 0">
+        <RenderTableName
+          ref="tablesIgnoreRef"
+          :allow-asterisk="false"
+          :cluster-id="localClusterData.id"
+          :model-value="data.tablesIgnore"
+          :required="false" />
+      </td>
+    </template>
+    <OperateColumn
+      :removeable="removeable"
+      @add="handleAppend"
+      @remove="handleRemove" />
+  </tr>
+</template>
+
+<script lang="ts">
+  import { random } from '@utils';
+
+  export interface IDataRow {
+    rowKey: string;
+    clusterData: {
+      id: number;
+      domain: string;
+      cloudId?: number;
+      cloudName?: string;
+      clusterType?: string;
+    };
+    targetClusterId?: number;
+    rollbackHost: RollbackHost;
+    backupSource: string;
+    rollbackType: string;
+    backupid?: string;
+    rollbackTime?: string;
+    databases: string[];
+    databasesIgnore?: string[];
+    tables: string[];
+    tablesIgnore?: string[];
+  }
+
+  // 创建表格数据
+  export const createRowData = (data = {} as Partial<IDataRow>) => ({
+    rowKey: random(),
+    clusterData: data.clusterData || {
+      id: 0,
+      domain: '',
+    },
+    targetClusterId: data.targetClusterId,
+    rollbackHost: data.rollbackHost || {
+      ip: '',
+      bk_host_id: 0,
+      bk_cloud_id: 0,
+      bk_biz_id: 0,
+    },
+    backupSource: data.backupSource || BackupSources.REMOTE,
+    rollbackType: data.rollbackType || BackupTypes.BACKUPID,
+    backupid: data.backupid || '',
+    rollbackTime: data.rollbackTime || '',
+    databases: data.databases || ['*'],
+    databasesIgnore: data.databasesIgnore,
+    tables: data.tables || ['*'],
+    tablesIgnore: data.tablesIgnore,
+  });
+
+  interface Props {
+    rollbackClusterType: RollbackClusterTypes;
+    data: IDataRow;
+    removeable: boolean;
+  }
+  interface Emits {
+    (e: 'add', params: IDataRow[]): void;
+    (e: 'remove'): void;
+  }
+
+  interface Exposes {
+    validator: (field: keyof IDataRow) => void;
+    getValue: () => Promise<any>;
+  }
+</script>
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+
+  import { RollbackClusterTypes, type RollbackHost } from '@services/model/ticket/details/mysql';
+
+  import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
+  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
+
+  import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
+  import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
+
+  import RenderMode, { BackupTypes } from './components/render-mode/Index.vue';
+  import RenderBackup, { BackupSources } from './components/RenderBackup.vue';
+  import RenderCluster from './components/RenderCluster.vue';
+  import RenderClusterInputSelect from './components/RenderClusterInputSelect.vue';
+  import RenderHostInputSelect from './components/RenderHostInputSelect.vue';
+  import RenderHostSource from './components/RenderHostSource.vue';
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
+  const hostSourceRef = ref<InstanceType<typeof RenderHostSource>>();
+  const hostRef = ref<InstanceType<typeof RenderHostInputSelect>>();
+  const targetClustersRef = ref<InstanceType<typeof RenderClusterInputSelect>>();
+  const backupSourceRef = ref<InstanceType<typeof RenderBackup>>();
+  const modeRef = ref<InstanceType<typeof RenderMode>>();
+  const databasesRef = ref<InstanceType<typeof RenderDbName>>();
+  const databasesIgnoreRef = ref<InstanceType<typeof RenderDbName>>();
+  const tablesRef = ref<InstanceType<typeof RenderTableName>>();
+  const tablesIgnoreRef = ref<InstanceType<typeof RenderTableName>>();
+
+  const localHostSource = ref('idle');
+  const localClusterData = ref<IDataRow['clusterData']>({
+    id: 0,
+    domain: '',
+  });
+  const localBackupSource = ref(BackupSources.REMOTE);
+
+  const configMap = {
+    [RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER]: ['host', 'dbTableIgnore'],
+    [RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER]: ['targetCluster', 'dbTableIgnore'],
+    [RollbackClusterTypes.BUILD_INTO_METACLUSTER]: [] as string[],
+  };
+
+  const showColumn = (column: string) => computed(() => configMap[props.rollbackClusterType].includes(column));
+
+  const showHostColumn = showColumn('host');
+  const showTargetClusterColumn = showColumn('targetCluster');
+  const showDbIgnoreColumn = showColumn('dbTableIgnore');
+
+  const handleClusterChange = (data: IDataRow['clusterData']) => {
+    localClusterData.value = data;
+  };
+
+  const handleHostSourceChange = (value: string) => {
+    localHostSource.value = value;
+  };
+
+  const handleBackupSourceChange = (value: BackupSources) => {
+    localBackupSource.value = value;
+  };
+
+  const handleAppend = () => {
+    emits('add', [createRowData()]);
+  };
+
+  const handleRemove = () => {
+    if (props.removeable) {
+      return;
+    }
+    emits('remove');
+  };
+
+  const getNewClusterRowData = () =>
+    Promise.all([
+      clusterRef.value!.getValue(),
+      hostRef.value!.getValue(),
+      backupSourceRef.value!.getValue(),
+      modeRef.value!.getValue(),
+      databasesRef.value!.getValue('databases'),
+      tablesRef.value!.getValue('tables'),
+      databasesIgnoreRef.value!.getValue('databases_ignore'),
+      tablesIgnoreRef.value!.getValue('tables_ignore'),
+    ]).then(
+      ([
+        clusterData,
+        hostData,
+        backupSourceData,
+        modeData,
+        databasesData,
+        tablesData,
+        databasesIgnoreData,
+        tablesIgnoreData,
+      ]) => ({
+        ...clusterData,
+        rollback_host: { ...hostData.hosts[0] },
+        ...backupSourceData,
+        ...modeData,
+        ...databasesData,
+        ...tablesData,
+        ...databasesIgnoreData,
+        ...tablesIgnoreData,
+      }),
+    );
+
+  const getExistClusterRowData = () =>
+    Promise.all([
+      clusterRef.value!.getValue(),
+      targetClustersRef.value!.getValue(),
+      backupSourceRef.value!.getValue(),
+      modeRef.value!.getValue(),
+      databasesRef.value!.getValue('databases'),
+      tablesRef.value!.getValue('tables'),
+      databasesIgnoreRef.value!.getValue('databases_ignore'),
+      tablesIgnoreRef.value!.getValue('tables_ignore'),
+    ]).then(
+      ([
+        clusterData,
+        tagetClusterData,
+        backupSourceData,
+        modeData,
+        databasesData,
+        tablesData,
+        databasesIgnoreData,
+        tablesIgnoreData,
+      ]) => ({
+        ...clusterData,
+        ...tagetClusterData,
+        ...backupSourceData,
+        ...modeData,
+        ...databasesData,
+        ...tablesData,
+        ...databasesIgnoreData,
+        ...tablesIgnoreData,
+      }),
+    );
+
+  const getMetaClusterRowData = () =>
+    Promise.all([clusterRef.value!.getValue(), backupSourceRef.value!.getValue(), modeRef.value!.getValue()]).then(
+      ([clusterData, backupSourceData, modeData]) => ({
+        ...clusterData,
+        ...backupSourceData,
+        ...modeData,
+        target_cluster_id: clusterData.cluster_id,
+        databases: ['*'],
+        databases_ignore: [],
+        tables: ['*'],
+        tables_ignore: [],
+      }),
+    );
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data.clusterData) {
+        localClusterData.value = props.data.clusterData;
+      }
+      localBackupSource.value = props.data.backupSource as BackupSources;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  defineExpose<Exposes>({
+    validator(field: keyof IDataRow) {
+      switch (field) {
+        case 'databases':
+          databasesRef.value!.getValue('databases');
+          break;
+        case 'tables':
+          tablesRef.value!.getValue('tables');
+          break;
+        case 'databasesIgnore':
+          databasesIgnoreRef.value!.getValue('databases_ignore');
+          break;
+        case 'tablesIgnore':
+          tablesIgnoreRef.value!.getValue('tables_ignore');
+          break;
+        default:
+          break;
+      }
+    },
+    getValue() {
+      if (props.rollbackClusterType === RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER) {
+        return getNewClusterRowData();
+      }
+      if (props.rollbackClusterType === RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER) {
+        return getExistClusterRowData();
+      }
+      return getMetaClusterRowData();
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .action-box {
+    display: flex;
+    align-items: center;
+
+    .action-btn {
+      display: flex;
+      font-size: 14px;
+      color: #c4c6cc;
+      cursor: pointer;
+      transition: all 0.15s;
+
+      &:hover {
+        color: #979ba5;
+      }
+
+      &.disabled {
+        color: #dcdee5;
+        cursor: not-allowed;
+      }
+
+      & ~ .action-btn {
+        margin-left: 18px;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderBackup.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue
similarity index 85%
rename from dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderBackup.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue
index 91a374ec00..c8b2837d24 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderBackup.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue
@@ -20,13 +20,25 @@
     :rules="rules"
     @change="(value) => handleChange(value as BackupSources)" />
 </template>
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import { useI18n } from 'vue-i18n';
 
-  import TableEditSelect from '@components/render-table/columns/select/index.vue';
+<script lang="ts">
+  import { t } from '@locales/index';
 
-  import { BackupSources, selectList } from './const';
+  export enum BackupSources {
+    REMOTE = 'remote',
+    LOCAL = 'local',
+  }
+
+  export const backupSourceList = [
+    {
+      value: BackupSources.REMOTE,
+      label: t('远程备份'),
+    },
+    {
+      value: BackupSources.LOCAL,
+      label: t('本地备份'),
+    },
+  ];
 
   interface Props {
     modelValue: BackupSources;
@@ -43,22 +55,32 @@
   interface Exposes {
     getValue: () => Promise<Record<string, string>>;
   }
+</script>
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import TableEditSelect from '@components/render-table/columns/select/index.vue';
 
   const props = defineProps<Props>();
+
   const emits = defineEmits<Emits>();
 
-  const { t } = useI18n();
   const rules = [
     {
       validator: (value: string) => Boolean(value),
       message: t('备份源不能为空'),
     },
   ];
-  const targetList = props.list || selectList.backupSource;
+  const targetList = props.list || backupSourceList;
 
   const editSelectRef = ref<InstanceType<typeof TableEditSelect>>();
   const localValue = ref(BackupSources.REMOTE);
 
+  const handleChange = (value: BackupSources) => {
+    localValue.value = value;
+    emits('change', localValue.value);
+  };
+
   watch(
     () => props.modelValue,
     () => {
@@ -69,11 +91,6 @@
     },
   );
 
-  const handleChange = (value: BackupSources) => {
-    localValue.value = value;
-    emits('change', localValue.value);
-  };
-
   defineExpose<Exposes>({
     getValue() {
       return editSelectRef
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderCluster.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderCluster.vue
similarity index 94%
rename from dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderCluster.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderCluster.vue
index 26fb1e7be4..e2ec1b4b20 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderCluster.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderCluster.vue
@@ -18,15 +18,19 @@
     :placeholder="placeholder || t('请输入集群域名或从表头批量选择')"
     :rules="rules" />
 </template>
+
 <script lang="ts">
   const clusterIdMemo: { [key: string]: Record<string, boolean> } = {};
+
   interface Props {
     modelValue?: IDataRow['clusterData'];
     placeholder?: string;
   }
+
   interface Emits {
-    (e: 'change', data: Props['modelValue']): void;
+    (e: 'change', data: IDataRow['clusterData']): void;
   }
+
   interface Exposes {
     getValue: () => Promise<{
       cluster_id: number;
@@ -39,31 +43,31 @@
 
   import { queryClusters } from '@services/source/mysqlCluster';
 
-  import { useGlobalBizs } from '@stores';
-
   import TableEditInput from '@components/render-table/columns/input/index.vue';
 
   import { random } from '@utils';
 
-  import type { IDataRow } from '../render-data/Index.vue';
+  import type { IDataRow } from '../Index.vue';
 
   const props = withDefaults(defineProps<Props>(), {
-    modelValue: undefined,
+    modelValue: () => ({
+      id: 0,
+      domain: '',
+    }),
     placeholder: '',
   });
-  const emits = defineEmits<Emits>();
 
-  const instanceKey = `render_cluster_${random()}`;
-  clusterIdMemo[instanceKey] = {};
+  const emits = defineEmits<Emits>();
 
-  const { currentBizId } = useGlobalBizs();
   const { t } = useI18n();
 
   const editRef = ref<InstanceType<typeof TableEditInput>>();
-
   const localClusterId = ref(0);
   const localDomain = ref('');
 
+  const instanceKey = `render_cluster_${random()}`;
+  clusterIdMemo[instanceKey] = {};
+
   const rules = [
     {
       validator: (domain: string) => {
@@ -82,7 +86,7 @@
               immute_domain: domain,
             },
           ],
-          bk_biz_id: currentBizId,
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
         }).then((data) => {
           if (data.length > 0) {
             const {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderClusterInputSelect.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderClusterInputSelect.vue
similarity index 86%
rename from dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderClusterInputSelect.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderClusterInputSelect.vue
index 64ddb6288d..b1ec3d5030 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderClusterInputSelect.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderClusterInputSelect.vue
@@ -15,7 +15,7 @@
   <div class="render-host-box">
     <TableSeletorInput
       ref="editRef"
-      v-model="localValue"
+      v-model="localClusterDomain"
       :rules="rules"
       @click-seletor="handleOpenSeletor" />
   </div>
@@ -26,6 +26,7 @@
     :tab-list-config="tabListConfig"
     @change="handelClusterChange" />
 </template>
+
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
@@ -33,8 +34,6 @@
   import type TendbsingleModel from '@services/model/mysql/tendbsingle';
   import { queryClusters } from '@services/source/mysqlCluster';
 
-  import { useGlobalBizs } from '@stores';
-
   import { ClusterTypes } from '@common/const';
   import { batchSplitRegex, domainRegex } from '@common/regex';
 
@@ -61,13 +60,11 @@
   });
 
   const { t } = useI18n();
-  const { currentBizId } = useGlobalBizs();
-
-  const isShowSelector = ref(false);
 
   const editRef = ref<InstanceType<typeof TableSeletorInput>>();
-  const localValue = ref();
-  const localClusterIds = ref<number[]>([props.targetClusterId]);
+  const isShowSelector = ref(false);
+  const localClusterDomain = ref('');
+  const localClusterId = ref<number>(props.targetClusterId);
   const selectedClusters = shallowRef<{ [key: string]: SelectedClusters }>({
     [ClusterTypes.TENDBHA]: [],
     [ClusterTypes.TENDBSINGLE]: [],
@@ -75,7 +72,6 @@
 
   const tabListConfig = {
     [ClusterTypes.TENDBHA]: {
-      showPreviewResultTitle: true,
       disabledRowConfig: [
         {
           handler: (data: TendbhaModel) => data.id === props.sourceClusterId,
@@ -85,7 +81,6 @@
       multiple: false,
     },
     [ClusterTypes.TENDBSINGLE]: {
-      showPreviewResultTitle: true,
       disabledRowConfig: [
         {
           handler: (data: TendbsingleModel) => data.id === props.sourceClusterId,
@@ -112,7 +107,7 @@
           cluster_filters: list.map((item) => ({
             immute_domain: item,
           })),
-          bk_biz_id: currentBizId,
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
         }).then((data) => {
           if (data.length === list.length) {
             return true;
@@ -131,26 +126,14 @@
           id,
         },
       ],
-      bk_biz_id: currentBizId,
+      bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
     }).then((data) => {
       if (data) {
-        localValue.value = data[0].master_domain;
+        localClusterDomain.value = data[0].master_domain;
       }
     });
   };
 
-  watch(
-    () => props.targetClusterId,
-    (id) => {
-      if (id) {
-        queryClustersById(id);
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
   const handleOpenSeletor = () => {
     isShowSelector.value = true;
   };
@@ -158,23 +141,37 @@
   // 批量选择
   const handelClusterChange = (selected: { [key: string]: SelectedClusters }) => {
     selectedClusters.value = selected;
-    const list = Object.keys(selected).reduce((list: SelectedClusters, key) => list.concat(...selected[key]), []);
-    localValue.value = list.map((item) => item.master_domain).join(',');
-    localClusterIds.value = list.map((item) => item.id);
+    const list = Object.values(selected).flat();
+    const [firstItem] = list;
+    localClusterDomain.value = firstItem.master_domain;
+    localClusterId.value = firstItem.id;
     window.changeConfirm = true;
     setTimeout(() => {
       editRef.value!.getValue();
     });
   };
 
+  watch(
+    () => props.targetClusterId,
+    (id) => {
+      if (id) {
+        queryClustersById(id);
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
   defineExpose<Exposes>({
     getValue() {
       return editRef.value!.getValue().then(() => ({
-        target_cluster_id: localClusterIds.value[0],
+        target_cluster_id: localClusterId.value,
       }));
     },
   });
 </script>
+
 <style lang="less" scoped>
   .render-host-box {
     position: relative;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostInputSelect.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderHostInputSelect.vue
similarity index 75%
rename from dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostInputSelect.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderHostInputSelect.vue
index 1c748726e7..d0b2fe57cc 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostInputSelect.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderHostInputSelect.vue
@@ -22,13 +22,12 @@
       @click-seletor="handleShowIpSelector" />
   </div>
   <IpSelector
-    v-if="clusterData"
     v-model:show-dialog="isShowIpSelector"
     :biz-id="currentBizId"
     button-text=""
     :cloud-info="{
-      id: clusterData.cloudId,
-      name: clusterData.cloudName,
+      id: clusterData!.cloudId,
+      name: clusterData!.cloudName,
     }"
     :data="localHostList"
     :os-types="[OSTypes.Linux]"
@@ -37,9 +36,11 @@
     :single-host-select="single"
     @change="handleHostChange" />
 </template>
+
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
+  import type { RollbackHost } from '@services/model/ticket/details/mysql';
   import { checkHost } from '@services/source/ipchooser';
   import type { HostInfo } from '@services/types';
 
@@ -52,30 +53,24 @@
 
   import TableSeletorInput from '@views/db-manage/common/TableSeletorInput.vue';
 
-  import type { IDataRow } from '../render-data/Index.vue';
+  import { messageWarn } from '@utils';
 
-  export interface HostDataItem {
-    bk_host_id: number;
-    ip: string;
-    bk_cloud_id: number;
-    bk_biz_id: number;
-  }
+  import type { IDataRow } from '../Index.vue';
 
   interface Props {
     clusterData: IDataRow['clusterData'];
     single?: boolean;
-    hostData: HostDataItem[];
+    hostData: RollbackHost[];
   }
 
   interface Exposes {
     getValue: () => Promise<{
-      hosts: HostDataItem[];
+      hosts: RollbackHost[];
     }>;
   }
 
   const props = withDefaults(defineProps<Props>(), {
     single: false,
-    hostData: undefined,
   });
 
   const { t } = useI18n();
@@ -83,7 +78,7 @@
 
   const rules = [
     {
-      validator: (value: string) => Boolean(value),
+      validator: (value: string) => !!value,
       message: t('IP 不能为空'),
     },
     {
@@ -92,12 +87,12 @@
     },
     {
       validator: async (value: string) => {
-        const list = value.split(batchSplitRegex);
+        const ips = value.split(batchSplitRegex);
         return await checkHost({
-          ip_list: list,
+          ip_list: ips,
         }).then((data) => {
-          if (data.length === list.length) {
-            allocatData(data);
+          if (data.length === ips.length) {
+            localHostList.value = data;
             return true;
           }
           return false;
@@ -107,39 +102,40 @@
     },
   ];
 
-  const editRef = ref();
+  const editRef = ref<InstanceType<typeof TableSeletorInput>>();
   const isShowIpSelector = ref(false);
-  const localValue = ref();
+  const localValue = ref('');
   const localHostList = shallowRef<HostInfo[]>([]);
 
   const placeholder = computed(() => (props.single ? t('请输入或选择 (1台)') : t('请输入或选择')));
 
   const handleShowIpSelector = () => {
+    if (!props.clusterData?.id) {
+      messageWarn(t('请先选择待回档集群'));
+      return;
+    }
     isShowIpSelector.value = true;
   };
 
   // 批量选择
-  const handleHostChange = (hostList: HostInfo[]) => {
-    allocatData(hostList);
-    window.changeConfirm = true;
-    setTimeout(() => {
-      editRef.value.getValue();
-    });
-  };
-
-  const allocatData = (data: HostInfo[]) => {
-    localValue.value = data.map((item) => item?.ip).join(',');
+  const handleHostChange = (data: HostInfo[]) => {
+    localValue.value = data.map((item) => item.ip).join(',');
     localHostList.value = data;
+    window.changeConfirm = true;
   };
 
   watch(
     () => props.hostData,
     (data) => {
-      const fristHost = data?.[0];
-      if (!fristHost?.ip) {
-        return;
+      if (data.length > 0) {
+        const ips = data.map((item) => item.ip).join(',');
+        if (ips) {
+          localValue.value = ips;
+          setTimeout(() => {
+            editRef.value!.getValue();
+          });
+        }
       }
-      allocatData(data as unknown as HostInfo[]);
     },
     {
       immediate: true,
@@ -152,8 +148,8 @@
         hostList.map((item) => ({
           bk_host_id: item.host_id,
           ip: item.ip,
-          bk_cloud_id: item.cloud_area.id,
-          bk_biz_id: currentBizId,
+          bk_cloud_id: item.cloud_area?.id,
+          bk_biz_id: item.biz?.id,
         }));
 
       return Promise.resolve({
@@ -162,6 +158,7 @@
     },
   });
 </script>
+
 <style lang="less" scoped>
   .render-host-box {
     position: relative;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostSource.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderHostSource.vue
similarity index 85%
rename from dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostSource.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderHostSource.vue
index 257fe831a5..38caf27ce0 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostSource.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderHostSource.vue
@@ -20,13 +20,14 @@
     :rules="rules"
     @change="(value) => handleChange(value as string)">
     <template #default="{ optionItem }">
-      <div class="option-item">
-        <span>{{ optionItem.label }}</span>
-        <span class="option-count">{{ optionItem.count }}</span>
+      <div class="role-host-select-option">
+        <div>{{ optionItem.label }}</div>
+        <div class="option-count">{{ optionItem.count }}</div>
       </div>
     </template>
   </TableEditSelect>
 </template>
+
 <script setup lang="ts">
   import { ref } from 'vue';
   import { useI18n } from 'vue-i18n';
@@ -48,11 +49,11 @@
   }
 
   const props = defineProps<Props>();
+
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
 
-  const bizId = window.PROJECT_CONFIG.BIZ_ID;
   const rules = [
     {
       validator: (value: string) => Boolean(value),
@@ -70,23 +71,13 @@
     },
   ]);
 
-  watch(
-    () => props.modelValue,
-    () => {
-      localValue.value = props.modelValue;
-    },
-    {
-      immediate: true,
-    },
-  );
-
   const getHostsCount = () => {
     getHostTopo({
       mode: 'idle_only',
       all_scope: true,
       scope_list: [
         {
-          scope_id: bizId,
+          scope_id: window.PROJECT_CONFIG.BIZ_ID,
           scope_type: 'biz',
         },
       ],
@@ -97,12 +88,26 @@
       }
     });
   };
-  getHostsCount();
+
   const handleChange = (value: string) => {
     localValue.value = value;
     emits('change', localValue.value);
   };
 
+  watch(
+    () => props.modelValue,
+    () => {
+      localValue.value = props.modelValue;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  onMounted(() => {
+    getHostsCount();
+  });
+
   defineExpose<Exposes>({
     getValue() {
       return editSelectRef.value!.getValue().then(() => ({
@@ -111,21 +116,20 @@
     },
   });
 </script>
-<style lang="less" scoped>
-  .option-item {
+
+<style lang="less">
+  .role-host-select-option {
     display: flex;
-    align-items: center;
     width: 100%;
-    justify-content: space-between;
 
     .option-count {
-      display: flex;
-      align-items: center;
       width: 23px;
-      height: 17px;
-      background: #eaebf0;
+      height: 16px;
+      padding: 0 8px;
+      margin-left: auto;
+      color: #979ba5;
+      background-color: #f0f1f5;
       border-radius: 2px;
-      justify-content: center;
     }
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/render-mode/Index.vue
similarity index 92%
rename from dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/render-mode/Index.vue
index cacd432bf4..7e8e9ff522 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/render-mode/Index.vue
@@ -17,7 +17,7 @@
       <TableEditSelect
         v-model="localBackupType"
         :disabled="editDisabled"
-        :list="selectList.mode"
+        :list="backupTypeList"
         :rules="rules"
         @change="hanldeBackupTypeChange" />
     </div>
@@ -47,20 +47,25 @@
     </div>
   </div>
 </template>
-<script setup lang="tsx">
-  import { computed, ref, watch } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import type { BackupLogRecord } from '@services/source/fixpointRollback';
-
-  import { useTimeZoneFormat } from '@hooks';
 
-  import TableEditDateTime from '@components/render-table/columns/DateTime.vue';
-  import TableEditSelect from '@components/render-table/columns/select/index.vue';
+<script lang="ts">
+  import { t } from '@locales/index';
 
-  import { BackupTypes, selectList } from '../const';
+  export enum BackupTypes {
+    BACKUPID = 'BACKUPID',
+    TIME = 'TIME',
+  }
 
-  import RecordSelector from './RecordSelector.vue';
+  export const backupTypeList = [
+    {
+      value: BackupTypes.BACKUPID,
+      label: t('备份记录'),
+    },
+    {
+      value: BackupTypes.TIME,
+      label: t('回档到指定时间'),
+    },
+  ];
 
   interface Props {
     clusterId: number;
@@ -76,12 +81,21 @@
       rollback_time?: string;
     }>;
   }
+</script>
+<script setup lang="ts">
+  import { computed, ref, watch } from 'vue';
 
-  const props = defineProps<Props>();
+  import type { BackupLogRecord } from '@services/source/fixpointRollback';
 
-  const disableDate = (date: Date) => date && date.valueOf() > Date.now();
+  import { useTimeZoneFormat } from '@hooks';
+
+  import TableEditDateTime from '@components/render-table/columns/DateTime.vue';
+  import TableEditSelect from '@components/render-table/columns/select/index.vue';
+
+  import RecordSelector from './RecordSelector.vue';
+
+  const props = defineProps<Props>();
 
-  const { t } = useI18n();
   const { format: formatDateToUTC } = useTimeZoneFormat();
 
   const rules = [
@@ -98,6 +112,8 @@
 
   const editDisabled = computed(() => !props.clusterId || !props.backupSource);
 
+  const disableDate = (date: Date) => date && date.valueOf() > Date.now();
+
   const hanldeBackupTypeChange = () => {
     localRollbackTime.value = '';
   };
@@ -106,8 +122,8 @@
     () => props.rollbackTime,
     (newVal) => {
       if (newVal) {
-        localRollbackTime.value = newVal;
         localBackupType.value = BackupTypes.TIME;
+        localRollbackTime.value = newVal;
       } else {
         localBackupType.value = BackupTypes.BACKUPID;
       }
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/RecordSelector.vue b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/render-mode/RecordSelector.vue
similarity index 94%
rename from dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/RecordSelector.vue
rename to dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/render-mode/RecordSelector.vue
index 753e01e7b2..a09851f644 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/RecordSelector.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-row/components/render-mode/RecordSelector.vue
@@ -124,7 +124,9 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+  import dayjs from 'dayjs';
   import _ from 'lodash';
   import tippy, { type Instance, type SingleTarget } from 'tippy.js';
   import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
@@ -139,16 +141,6 @@
 
   import { useDebouncedRef, useTimeZoneFormat } from '@hooks';
 
-  import { useGlobalBizs } from '@stores';
-
-  const props = withDefaults(defineProps<Props>(), {
-    backupid: '',
-    backupSource: '',
-    modelValue: '',
-    disabled: false,
-    clearable: false,
-  });
-
   import useValidtor, { type Rules } from '@components/render-table/hooks/useValidtor';
 
   import { encodeRegexp } from '@utils';
@@ -170,14 +162,24 @@
     getValue: () => Promise<BackupLogRecord>;
   }
 
-  let tippyIns: Instance;
+  const props = withDefaults(defineProps<Props>(), {
+    backupid: '',
+    backupSource: '',
+    modelValue: '',
+    disabled: false,
+    clearable: false,
+  });
+
   const { t } = useI18n();
-  const { format: formatDateToUTC } = useTimeZoneFormat();
 
   enum OperateType {
     MANUAL = 'maunal',
     MATCH = 'match',
   }
+
+  const { timeZone } = useTimeZoneFormat();
+  const searchKey = useDebouncedRef('');
+
   const tabOptions = [
     {
       label: t('指定备份记录'),
@@ -189,6 +191,27 @@
       hoverText: t('自动匹配指定日期前的最新全库备份'),
     },
   ];
+  let tippyIns: Instance;
+  const rootRef = ref();
+  const popRef = ref();
+  const dateTriggerRef = ref();
+  const datePickerRef = ref();
+  const dateRenderRef = ref();
+  const localValue = ref<string>('');
+  const isShowPop = ref(false);
+  const isError = ref(false);
+  const open = ref(false);
+  const recordType = ref(OperateType.MANUAL);
+  const logRecordOptions = shallowRef<Array<{ id: string; name: string }>>([]);
+  const logRecordList = shallowRef<BackupLogRecord[]>([]);
+
+  const isDateType = (value: string) => {
+    const YYYYMMDDHHmmssReg = /[\d]{4}[\\/-]{1}[\d]{1,2}[\\/-]{1}[\d]{1,2}\s[\d]{1,2}[:][\d]{1,2}[:][\d]{1,2}/g;
+    const isDate = new RegExp(YYYYMMDDHHmmssReg);
+    // 非日期输入无需调接口匹配最近记录，跳过该校验
+    return isDate.test(value);
+  };
+
   const rules: Rules = [
     {
       validator: (value: string) => !!value,
@@ -201,7 +224,7 @@
           return true;
         }
         return queryLatesBackupLog({
-          bk_biz_id: currentBizId,
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
           cluster_id: props.clusterId,
           rollback_time: value,
         }).then((data) => {
@@ -209,8 +232,8 @@
             localValue.value = '';
             return false;
           }
-          logRecordList.value.push(data as unknown as BackupLogRecord);
-          localValue.value = (data as unknown as BackupLogRecord).backup_id;
+          logRecordList.value.push(data);
+          localValue.value = data.backup_id;
           return true;
         });
       },
@@ -219,22 +242,6 @@
   ];
 
   const { message: errorMessage, validator } = useValidtor(rules);
-  const { currentBizId } = useGlobalBizs();
-  const searchKey = useDebouncedRef('');
-
-  const rootRef = ref();
-  const popRef = ref();
-  const dateTriggerRef = ref();
-  const datePickerRef = ref();
-  const dateRenderRef = ref();
-  const localValue = ref<string>('');
-  const isShowPop = ref(false);
-  const isError = ref(false);
-  const open = ref(false);
-  const recordType = ref(OperateType.MANUAL);
-
-  const logRecordOptions = shallowRef<Array<{ id: string; name: string }>>([]);
-  const logRecordList = shallowRef<BackupLogRecord[]>([]);
 
   const renderList = computed(() =>
     logRecordOptions.value.reduce((result, item) => {
@@ -248,7 +255,9 @@
 
   const renderText = computed(() => {
     const item = _.find(logRecordList.value, (i) => i.backup_id === localValue.value) as BackupLogRecord;
-    return !item ? '' : `${item.mysql_role ? `${item.mysql_role} ` : ' '}${formatDateToUTC(item.backup_time)}`;
+    return !item
+      ? ''
+      : `${item.mysql_role ? `${item.mysql_role} ` : ' '}${dayjs(item.backup_time).tz(timeZone.value.label).format('YYYY-MM-DD HH:mm:ss ZZ')}`;
   });
 
   const fetchLogData = () => {
@@ -260,40 +269,12 @@
     }).then((dataList) => {
       logRecordOptions.value = dataList.map((item) => ({
         id: item.backup_id,
-        name: `${item.mysql_role ? `${item.mysql_role} ` : ' '} ${formatDateToUTC(item.backup_time)}`,
+        name: `${item.mysql_role ? `${item.mysql_role} ` : ' '} ${dayjs(item.backup_time).tz(timeZone.value.label).format('YYYY-MM-DD HH:mm:ss ZZ')}`,
       }));
       logRecordList.value = dataList;
     });
   };
 
-  watch(
-    () => [props.backupSource, props.clusterId],
-    () => {
-      if (!props.clusterId || !props.backupSource) {
-        return;
-      }
-      fetchLogData();
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  watch(
-    () => props.backupid,
-    (newVal) => {
-      if (newVal) {
-        validator(newVal);
-        const currentRecordType = isDateType(newVal) ? OperateType.MATCH : OperateType.MANUAL;
-        hanldeChangeTab(currentRecordType);
-        localValue.value = newVal;
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
   const hanldeChangeTab = (tabName: OperateType) => {
     recordType.value = tabName;
     if (tabName === OperateType.MATCH) {
@@ -305,15 +286,18 @@
       fetchLogData();
     }
   };
+
   // 手动选择
   const handleSelect = (item: IListItem) => {
     localValue.value = item.id;
     tippyIns.hide();
   };
+
   // 删除值
   const handleRemove = () => {
     localValue.value = '';
   };
+
   // 触发日期选择器
   const handleDatePickerTrigger = () => {
     open.value = true;
@@ -326,19 +310,43 @@
       }
     });
   };
+
   const handleDatePickerChange = (date: string) => {
     localValue.value = date;
   };
+
   // 选择日期回调
   const handlePickSuccess = () => {
     tippyIns.hide();
   };
-  const isDateType = (value: string) => {
-    const YYYYMMDDHHmmssReg = /[\d]{4}[\\/-]{1}[\d]{1,2}[\\/-]{1}[\d]{1,2}\s[\d]{1,2}[:][\d]{1,2}[:][\d]{1,2}/g;
-    const isDate = new RegExp(YYYYMMDDHHmmssReg);
-    // 非日期输入无需调接口匹配最近记录，跳过该校验
-    return isDate.test(value);
-  };
+
+  watch(
+    () => [props.backupSource, props.clusterId, timeZone.value.label],
+    () => {
+      if (!props.clusterId || !props.backupSource) {
+        return;
+      }
+      fetchLogData();
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.backupid,
+    (backupid) => {
+      if (backupid) {
+        validator(backupid);
+        const currentRecordType = isDateType(backupid) ? OperateType.MATCH : OperateType.MANUAL;
+        hanldeChangeTab(currentRecordType);
+        localValue.value = backupid;
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
 
   onMounted(() => {
     tippyIns = tippy(rootRef.value as SingleTarget, {
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/Index.vue
index 2c71d94805..a8e8bc65d3 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/Index.vue
@@ -29,10 +29,10 @@
     type="card"
     @change="handleChange">
     <BkRadioButton
-      v-for="(item, index) in rollbackInfos"
-      :key="index"
-      :label="item.value">
-      {{ item.label }}
+      v-for="(value, key) in rollbackTypeLabel"
+      :key="key"
+      :label="key">
+      {{ value }}
     </BkRadioButton>
   </BkRadioGroup>
   <RenderData
@@ -51,9 +51,8 @@
 
   import TimeZonePicker from '@components/time-zone-picker/index.vue';
 
-  import { rollbackInfos } from '@views/db-manage/mysql/rollback/pages/page1/components/common/const';
-
-  import RenderData, { createRowData, type IDataRow } from './components/render-data/Index.vue';
+  import { createRowData, type IDataRow } from './components/render-row/Index.vue';
+  import RenderData from './components/RenderData.vue';
 
   const { t } = useI18n();
 
@@ -62,14 +61,20 @@
     type: TicketTypes.TENDBCLUSTER_ROLLBACK_CLUSTER,
     onSuccess(cloneData) {
       rollbackClusterType.value = cloneData.rollback_cluster_type;
-      tableData.value = cloneData.tableDataList as IDataRow[];
+      tableData.value = cloneData.tableDataList;
       window.changeConfirm = true;
     },
   });
 
+  const rollbackTypeLabel = {
+    [RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER]: t('构造到新集群'),
+    [RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER]: t('构造到已有集群'),
+    [RollbackClusterTypes.BUILD_INTO_METACLUSTER]: t('构造到原集群'),
+  };
+
   const renderDataRef = ref<InstanceType<typeof RenderData>>();
   const rollbackClusterType = ref<RollbackClusterTypes>(RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER);
-  const tableData = shallowRef<Array<IDataRow>>([createRowData({})]);
+  const tableData = shallowRef<IDataRow[]>([createRowData({})]);
 
   const handleChange = () => {
     renderDataRef.value!.reset();
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/RenderData.vue
similarity index 64%
rename from dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/RenderData.vue
index fdbf6666bb..68c38b3d9a 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/RenderData.vue
@@ -1,20 +1,21 @@
 <template>
   <SmartAction>
-    <Component
-      :is="components.RenderData"
+    <RenderTable
+      :key="rollbackClusterType"
       class="mt16 mb-20"
+      :rollback-cluster-type="rollbackClusterType"
       @batch-edit="(obj) => handleBatchEdit(obj)"
       @show-selector="handleShowSelector">
-      <Component
-        :is="components.RenderDataRow"
+      <RenderRow
         v-for="(item, index) in tableData"
         :key="item.rowKey"
         ref="rowRefs"
         :data="item"
         :removeable="tableData.length < 2"
+        :rollback-cluster-type="rollbackClusterType"
         @add="(payload: Array<IDataRow>) => handleAppend(index, payload)"
         @remove="() => handleRemove(index)" />
-    </Component>
+    </RenderTable>
     <template #action>
       <BkButton
         class="w-88"
@@ -42,67 +43,25 @@
     :tab-list-config="tabListConfig"
     @change="handelClusterChange" />
 </template>
-<script lang="ts">
-  import { getTendbClusterList } from '@services/source/tendbcluster';
 
-  import type { HostDataItem } from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostInputSelect.vue';
+<script setup lang="ts">
+  import { debounce } from 'lodash';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
 
-  import { random } from '@utils';
+  import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
+  import { RollbackClusterTypes } from '@services/model/ticket/details/mysql';
+  import { getTendbClusterList } from '@services/source/tendbcluster';
+  import { createTicket } from '@services/source/ticket';
 
-  import { BackupSources, BackupTypes } from '../common/const';
+  import { ClusterTypes, TicketTypes } from '@common/const';
 
-  export interface IDataRow {
-    rowKey: string;
-    clusterData?: {
-      id: number;
-      domain: string;
-      cloudId?: number;
-      cloudName?: string;
-      clusterType?: string;
-    };
-    targetClusterId?: number;
-    rollbackHost: {
-      // 接入层
-      spider_host?: HostDataItem;
-      // 存储层
-      remote_hosts?: HostDataItem[];
-    };
-    backupSource: BackupSources;
-    rollbackType: BackupTypes;
-    backupid?: string;
-    rollbackTime?: string;
-    databases: string[];
-    databasesIgnore?: string[];
-    tables: string[];
-    tablesIgnore?: string[];
-  }
+  import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
 
-  // 创建表格数据
-  export const createRowData = (data = {} as Partial<IDataRow>) => ({
-    rowKey: random(),
-    clusterData: data.clusterData || {
-      id: 0,
-      domain: '',
-    },
-    targetClusterId: data.targetClusterId || 0,
-    rollbackHost: data.rollbackHost || {
-      spider_host: {
-        ip: '',
-        bk_host_id: 0,
-        bk_cloud_id: 0,
-        bk_biz_id: 0,
-      },
-      remote_hosts: [],
-    },
-    backupSource: data.backupSource || BackupSources.REMOTE,
-    rollbackType: data.rollbackType || BackupTypes.BACKUPID,
-    backupid: data.backupid || '',
-    rollbackTime: data.rollbackTime || '',
-    databases: data.databases || ['*'],
-    databasesIgnore: data.databasesIgnore,
-    tables: data.tables || ['*'],
-    tablesIgnore: data.tablesIgnore,
-  });
+  import { messageWarn } from '@utils';
+
+  import RenderRow, { createRowData, type IDataRow } from './render-row/Index.vue';
+  import RenderTable from './RenderTable.vue';
 
   interface Props {
     data: IDataRow[];
@@ -112,49 +71,12 @@
   interface Exposes {
     reset: () => void;
   }
-</script>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-  import { useRouter } from 'vue-router';
-
-  import TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
-  import { RollbackClusterTypes } from '@services/model/ticket/details/mysql';
-  import { createTicket } from '@services/source/ticket';
-
-  import { useGlobalBizs } from '@stores';
-
-  import { ClusterTypes, TicketTypes } from '@common/const';
-
-  import ClusterSelector from '@components/cluster-selector/Index.vue';
-
-  import ExistCluster from './exist-cluster/Index.vue';
-  import ExistClusterRow from './exist-cluster/Row.vue';
-  import NewCluster from './new-cluster/Index.vue';
-  import NewClusterRow from './new-cluster/Row.vue';
-  import OriginCluster from './origin-cluster/Index.vue';
-  import OriginClusterRow from './origin-cluster/Row.vue';
 
   const props = defineProps<Props>();
 
-  const rollbackRenderDataInfo = {
-    [RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER]: {
-      RenderData: NewCluster,
-      RenderDataRow: NewClusterRow,
-    },
-    [RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER]: {
-      RenderData: ExistCluster,
-      RenderDataRow: ExistClusterRow,
-    },
-    [RollbackClusterTypes.BUILD_INTO_METACLUSTER]: {
-      RenderData: OriginCluster,
-      RenderDataRow: OriginClusterRow,
-    },
-  };
-
   const { t } = useI18n();
 
   const router = useRouter();
-  const { currentBizId } = useGlobalBizs();
 
   // 集群域名是否已存在表格的映射表
   let domainMemo: Record<string, boolean> = {};
@@ -168,23 +90,25 @@
   const tableData = ref<Array<IDataRow>>([createRowData({})]);
   const selectedClusters = shallowRef<{ [key: string]: Array<TendbClusterModel> }>(initSelected);
 
-  const components = computed(() => rollbackRenderDataInfo[props.rollbackClusterType]);
-  const tabListConfig = computed(() => ({
-    [ClusterTypes.TENDBCLUSTER]: {
-      // 仅有构造到新集群为单选
-      multiple: props.rollbackClusterType !== RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER,
-      getResourceList: getTendbClusterList,
-      disabledRowConfig:
-        props.rollbackClusterType !== RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER
-          ? [
-              {
-                handler: (data: TendbClusterModel) => data.isTemporary,
-                tip: t('不能选择临时集群'),
-              },
-            ]
-          : [],
-    },
-  }));
+  const tabListConfig = computed(
+    () =>
+      ({
+        [ClusterTypes.TENDBCLUSTER]: {
+          // 仅有构造到新集群为单选
+          multiple: props.rollbackClusterType !== RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER,
+          getResourceList: getTendbClusterList,
+          disabledRowConfig:
+            props.rollbackClusterType !== RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER
+              ? [
+                  {
+                    handler: (data: TendbClusterModel) => data.isTemporary,
+                    tip: t('不能选择临时集群'),
+                  },
+                ]
+              : [],
+        },
+      }) as unknown as Record<string, TabConfig>,
+  );
 
   // 检测列表是否为空
   const checkListEmpty = (list: Array<IDataRow>) => {
@@ -201,6 +125,12 @@
 
   // 批量编辑
   const handleBatchEdit = (obj: Record<string, any>) => {
+    if (checkListEmpty(tableData.value)) {
+      debounce(() => {
+        messageWarn(t('请先添加待回档集群'));
+      }, 300);
+      return;
+    }
     if (!obj) {
       return;
     }
@@ -270,7 +200,7 @@
       isSubmitting.value = true;
       const infos = await Promise.all(rowRefs.value.map((item: { getValue: () => Promise<any> }) => item.getValue()));
       await createTicket({
-        bk_biz_id: currentBizId,
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
         ticket_type: TicketTypes.TENDBCLUSTER_ROLLBACK_CLUSTER,
         remark: '',
         details: {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/new-cluster/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/RenderTable.vue
similarity index 53%
rename from dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/new-cluster/Index.vue
rename to dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/RenderTable.vue
index b61d4afb7b..d820efa8c5 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/rollback/pages/page1/components/render-data/new-cluster/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/RenderTable.vue
@@ -24,15 +24,28 @@
           @click="handleShowBatchSelector" />
       </template>
     </RenderTableHeadColumn>
+    <template v-if="showHostColumn">
+      <RenderTableHeadColumn
+        :min-width="140"
+        :width="160">
+        {{ t('主机来源') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="140"
+        :width="160">
+        {{ t('存储层主机') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="150"
+        :width="170">
+        {{ t('接入层主机') }}
+      </RenderTableHeadColumn>
+    </template>
     <RenderTableHeadColumn
-      :min-width="140"
-      :width="160">
-      {{ t('主机来源') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :min-width="180"
-      :width="180">
-      {{ t('回档到新主机') }}
+      v-if="showTargetClusterColumn"
+      :min-width="200"
+      :width="250">
+      {{ t('目标集群') }}
     </RenderTableHeadColumn>
     <RenderTableHeadColumn
       :min-width="100"
@@ -40,7 +53,7 @@
       <template #append>
         <BatchEditColumn
           v-model="isShowBatchEdit.backupSource"
-          :data-list="selectList.backupSource"
+          :data-list="backupSourceList.slice(0, 1)"
           :title="t('备份源')"
           @change="(value) => handleBatchEdit('backupSource', value)">
           <BatchOperateIcon
@@ -69,7 +82,7 @@
               v-model="checkedModeType"
               :clearable="false"
               filterable
-              :list="selectList.mode"
+              :list="backupTypeList"
               @change="handleModeType" />
             <div v-if="checkedModeType === BackupTypes.TIME">
               <div
@@ -79,6 +92,7 @@
               </div>
               <BkDatePicker
                 :clearable="false"
+                :disabled-date="disableDate"
                 :placeholder="t('如：2019-01-30 12:12:21')"
                 style="width: 361px"
                 type="datetime"
@@ -93,6 +107,7 @@
               </div>
               <BkDatePicker
                 :clearable="false"
+                :disabled-date="disableDate"
                 :placeholder="t('如：2019-01-30 12:12:21')"
                 style="width: 361px"
                 type="datetime"
@@ -113,81 +128,84 @@
       </template>
       {{ t('回档类型') }}
     </RenderTableHeadColumn>
+    <template v-if="showDbIgnoreColumn">
+      <RenderTableHeadColumn
+        :min-width="150"
+        :width="200">
+        <template #append>
+          <BatchEditColumn
+            v-model="isShowBatchEdit.databases"
+            :placeholder="t('请输入,如需输入多个用回车换行')"
+            :title="t('回档DB')"
+            type="textarea"
+            @change="(value) => handleBatchEdit('databases', value)">
+            <BatchOperateIcon
+              class="ml-4"
+              type="edit"
+              @click="handleShowBatchEdit('databases')" />
+          </BatchEditColumn>
+        </template>
+        {{ t('回档DB') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="150"
+        :required="false"
+        :width="200">
+        <template #append>
+          <BatchEditColumn
+            v-model="isShowBatchEdit.databasesIgnore"
+            :placeholder="t('请输入,如需输入多个用回车换行')"
+            :title="t('忽略DB')"
+            type="textarea"
+            @change="(value) => handleBatchEdit('databasesIgnore', value)">
+            <BatchOperateIcon
+              class="ml-4"
+              type="edit"
+              @click="handleShowBatchEdit('databasesIgnore')" />
+          </BatchEditColumn>
+        </template>
+        {{ t('忽略DB') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="150"
+        :width="200">
+        <template #append>
+          <BatchEditColumn
+            v-model="isShowBatchEdit.tables"
+            :placeholder="t('请输入,如需输入多个用回车换行')"
+            :title="t('回档表名')"
+            type="textarea"
+            @change="(value) => handleBatchEdit('tables', value)">
+            <BatchOperateIcon
+              class="ml-4"
+              type="edit"
+              @click="handleShowBatchEdit('tables')" />
+          </BatchEditColumn>
+        </template>
+        {{ t('回档表名') }}
+      </RenderTableHeadColumn>
+      <RenderTableHeadColumn
+        :min-width="150"
+        :required="false"
+        :width="200">
+        <template #append>
+          <BatchEditColumn
+            v-model="isShowBatchEdit.tablesIgnore"
+            :placeholder="t('请输入,如需输入多个用回车换行')"
+            :title="t('忽略表名')"
+            type="textarea"
+            @change="(value) => handleBatchEdit('tablesIgnore', value)">
+            <BatchOperateIcon
+              class="ml-4"
+              type="edit"
+              @click="handleShowBatchEdit('tablesIgnore')" />
+          </BatchEditColumn>
+        </template>
+        {{ t('忽略表名') }}
+      </RenderTableHeadColumn>
+    </template>
     <RenderTableHeadColumn
-      :min-width="150"
-      :width="200">
-      <template #append>
-        <BatchEditColumn
-          v-model="isShowBatchEdit.databases"
-          :placeholder="t('请输入,如需输入多个用回车换行')"
-          :title="t('回档DB')"
-          type="textarea"
-          @change="(value) => handleBatchEdit('databases', value, true)">
-          <BatchOperateIcon
-            class="ml-4"
-            type="edit"
-            @click="handleShowBatchEdit('databases')" />
-        </BatchEditColumn>
-      </template>
-      {{ t('回档DB') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :min-width="150"
-      :required="false"
-      :width="200">
-      <template #append>
-        <BatchEditColumn
-          v-model="isShowBatchEdit.databasesIgnore"
-          :placeholder="t('请输入,如需输入多个用回车换行')"
-          :title="t('忽略DB')"
-          type="textarea"
-          @change="(value) => handleBatchEdit('databasesIgnore', value, true)">
-          <BatchOperateIcon
-            class="ml-4"
-            type="edit"
-            @click="handleShowBatchEdit('databasesIgnore')" />
-        </BatchEditColumn>
-      </template>
-      {{ t('忽略DB') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :min-width="150"
-      :width="200">
-      <template #append>
-        <BatchEditColumn
-          v-model="isShowBatchEdit.tables"
-          :placeholder="t('请输入,如需输入多个用回车换行')"
-          :title="t('回档表名')"
-          type="textarea"
-          @change="(value) => handleBatchEdit('tables', value, true)">
-          <BatchOperateIcon
-            class="ml-4"
-            type="edit"
-            @click="handleShowBatchEdit('tables')" />
-        </BatchEditColumn>
-      </template>
-      {{ t('回档表名') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :min-width="150"
-      :required="false"
-      :width="200">
-      <template #append>
-        <BatchEditColumn
-          v-model="isShowBatchEdit.tablesIgnore"
-          :placeholder="t('请输入,如需输入多个用回车换行')"
-          :title="t('忽略表名')"
-          type="textarea"
-          @change="(value) => handleBatchEdit('tablesIgnore', value, true)">
-          <BatchOperateIcon
-            class="ml-4"
-            type="edit"
-            @click="handleShowBatchEdit('tablesIgnore')" />
-        </BatchEditColumn>
-      </template>
-      {{ t('忽略表名') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
+      v-if="showOpeateColumn"
       fixed="right"
       :required="false"
       :width="100">
@@ -198,23 +216,38 @@
     </template>
   </RenderTable>
 </template>
+
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
+  import { RollbackClusterTypes } from '@services/model/ticket/details/mysql';
+
   import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
   import RenderTable from '@components/render-table/Index.vue';
 
   import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
   import BatchOperateIcon from '@views/db-manage/common/batch-operate-icon/Index.vue';
+  import {
+    backupTypeList,
+    BackupTypes,
+  } from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/render-mode/Index.vue';
+  import { backupSourceList } from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue';
 
-  import { BackupTypes, selectList } from '../../common/const';
-  import type { IDataRow } from '../Index.vue';
+  import type { IDataRow } from './render-row/Index.vue';
+
+  interface Props {
+    rollbackClusterType: RollbackClusterTypes;
+  }
 
   interface Emits {
     (e: 'showSelector'): void;
     (e: 'batchEdit', obj: Record<string, any>): void;
   }
 
+  const props = withDefaults(defineProps<Props>(), {
+    rollbackClusterType: RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER,
+  });
+
   const emits = defineEmits<Emits>();
 
   const { t } = useI18n();
@@ -230,12 +263,29 @@
     tablesIgnore: false,
   });
 
+  const configMap = {
+    [RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER]: ['host', 'dbTableIgnore'],
+    [RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER]: ['targetCluster', 'dbTableIgnore', 'operate'],
+    [RollbackClusterTypes.BUILD_INTO_METACLUSTER]: ['operate'] as string[],
+  };
+
+  const showColumn = (column: string) => computed(() => configMap[props.rollbackClusterType].includes(column));
+
+  const showHostColumn = showColumn('host');
+  const showTargetClusterColumn = showColumn('targetCluster');
+  const showDbIgnoreColumn = showColumn('dbTableIgnore');
+  const showOpeateColumn = showColumn('operate');
+
+  const disableDate = (date: Date) => date?.valueOf() > Date.now();
+
   const handleModeType = (value: BackupTypes) => {
     checkedModeType.value = value;
   };
+
   const handleDatePickerChange = (date: string) => {
     datePickerValue.value = date;
   };
+
   const handleBatchModeEdit = () => {
     if (checkedModeType.value === BackupTypes.TIME) {
       handleBatchEdit('rollbackTime', datePickerValue.value);
@@ -254,9 +304,9 @@
     emits('showSelector');
   };
 
-  const handleBatchEdit = (key: keyof IDataRow, value: string, isArray = false) => {
+  const handleBatchEdit = (key: keyof IDataRow, value: string | string[]) => {
     emits('batchEdit', {
-      [key]: isArray && value ? value.split('\n') : value,
+      [key]: value,
     });
   };
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/common/const.ts b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/common/const.ts
deleted file mode 100644
index 9be980b8cd..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/common/const.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { t } from '@locales/index';
-
-export enum BackupSources {
-  REMOTE = 'remote',
-}
-export enum BackupTypes {
-  BACKUPID = 'BACKUPID',
-  TIME = 'TIME',
-}
-export const selectList = {
-  backupSource: [
-    {
-      value: BackupSources.REMOTE,
-      label: t('远程备份'),
-    },
-  ],
-  mode: [
-    {
-      value: BackupTypes.BACKUPID,
-      label: t('备份记录'),
-    },
-    {
-      value: BackupTypes.TIME,
-      label: t('回档到指定时间'),
-    },
-  ],
-};
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/exist-cluster/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/exist-cluster/Index.vue
deleted file mode 100644
index 830d178063..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/exist-cluster/Index.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <div class="render-data">
-    <RenderTable>
-      <RenderTableHeadColumn
-        :min-width="270"
-        :width="280">
-        {{ t('待回档集群') }}
-        <template #append>
-          <span
-            class="batch-edit-btn"
-            @click="handleShowBatchSelector">
-            <DbIcon type="batch-host-select" />
-          </span>
-        </template>
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="140"
-        :width="160">
-        {{ t('目标集群') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.backupSource"
-            :data-list="selectList.backupSource"
-            :title="t('备份源')"
-            @change="(value) => handleBatchEdit('backupSource', value)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('backupSource')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('备份源') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="380"
-        :width="400">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.mode"
-            :title="t('回档类型')"
-            @change="handleBatchModeEdit">
-            <template #content>
-              <div
-                class="title-spot edit-title"
-                style="font-weight: normal">
-                {{ t('回档类型') }} <span class="required" />
-              </div>
-              <BkSelect
-                v-model="checkedModeType"
-                :clearable="false"
-                filterable
-                :list="selectList.mode"
-                @change="handleModeType" />
-              <div v-if="checkedModeType === BackupTypes.TIME">
-                <div
-                  class="title-spot edit-title mt-24"
-                  style="font-weight: normal">
-                  {{ t('时间') }} <span class="required" />
-                </div>
-                <BkDatePicker
-                  :clearable="false"
-                  :placeholder="t('如：2019-01-30 12:12:21')"
-                  style="width: 361px"
-                  type="datetime"
-                  :value="datePickerValue"
-                  @change="handleDatePickerChange" />
-              </div>
-              <div v-else>
-                <div
-                  class="title-spot edit-title mt-24"
-                  style="font-weight: normal">
-                  {{ t('备份文件 (批量编辑仅支持 “指定时间自动匹配” )') }} <span class="required" />
-                </div>
-                <BkDatePicker
-                  :clearable="false"
-                  :placeholder="t('如：2019-01-30 12:12:21')"
-                  style="width: 361px"
-                  type="datetime"
-                  :value="datePickerValue"
-                  @change="handleDatePickerChange" />
-                <div
-                  class="mt-4"
-                  :style="{ color: '#979ba5', lineHeight: '20px' }">
-                  {{ t('自动匹配指定日期前的最新全库备份') }}
-                </div>
-              </div>
-            </template>
-          </BatchEditColumn>
-          <span
-            v-bk-tooltips="t('批量编辑')"
-            class="batch-edit-btn"
-            @click="handleShowBatchEdit('mode')">
-            <DbIcon type="bulk-edit" />
-          </span>
-        </template>
-        {{ t('回档类型') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.databases"
-            :placeholder="t('请输入,如需输入多个用回车换行')"
-            :title="t('回档DB')"
-            type="textarea"
-            @change="(value) => handleBatchEdit('databases', value, true)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('databases')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('回档DB') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :required="false"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.databasesIgnore"
-            :placeholder="t('请输入,如需输入多个用回车换行')"
-            :title="t('忽略DB')"
-            type="textarea"
-            @change="(value) => handleBatchEdit('databasesIgnore', value, true)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('databasesIgnore')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('忽略DB') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.tables"
-            :placeholder="t('请输入,如需输入多个用回车换行')"
-            :title="t('回档表名')"
-            type="textarea"
-            @change="(value) => handleBatchEdit('tables', value, true)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('tables')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('回档表名') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :required="false"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.tablesIgnore"
-            :placeholder="t('请输入,如需输入多个用回车换行')"
-            :title="t('忽略表名')"
-            type="textarea"
-            @change="(value) => handleBatchEdit('tablesIgnore', value, true)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('tablesIgnore')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('忽略表名') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        fixed="right"
-        :required="false"
-        :width="90">
-        {{ t('操作') }}
-      </RenderTableHeadColumn>
-      <template #data>
-        <slot />
-      </template>
-    </RenderTable>
-  </div>
-</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';
-
-  import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
-
-  import { BackupTypes, selectList } from '../../common/const';
-  import type { IDataRow } from '../Index.vue';
-
-  interface Emits {
-    (e: 'showSelector'): void;
-    (e: 'batchEdit', obj: Record<string, any>): void;
-  }
-
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  const checkedModeType = ref(BackupTypes.BACKUPID);
-  const datePickerValue = ref('');
-  const isShowBatchEdit = reactive({
-    backupSource: false,
-    mode: false,
-    databases: false,
-    databasesIgnore: false,
-    tables: false,
-    tablesIgnore: false,
-  });
-
-  const handleModeType = (value: BackupTypes) => {
-    checkedModeType.value = value;
-  };
-  const handleDatePickerChange = (date: string) => {
-    datePickerValue.value = date;
-  };
-  const handleBatchModeEdit = () => {
-    if (checkedModeType.value === BackupTypes.TIME) {
-      handleBatchEdit('rollbackTime', datePickerValue.value);
-      handleBatchEdit('backupid', '');
-    } else {
-      handleBatchEdit('backupid', datePickerValue.value);
-      handleBatchEdit('rollbackTime', '');
-    }
-  };
-
-  const handleShowBatchEdit = (col: keyof typeof isShowBatchEdit) => {
-    isShowBatchEdit[col] = !isShowBatchEdit[col];
-  };
-
-  const handleShowBatchSelector = () => {
-    emits('showSelector');
-  };
-
-  const handleBatchEdit = (key: keyof IDataRow, value: string, isArray = false) => {
-    emits('batchEdit', {
-      [key]: isArray && value ? value.split('\n') : value,
-    });
-  };
-</script>
-<style lang="less">
-  .render-data {
-    display: block;
-
-    .batch-edit-btn {
-      display: inline-block;
-      margin-left: 4px;
-      line-height: 40px;
-      color: #3a84ff;
-      vertical-align: top;
-      cursor: pointer;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/exist-cluster/Row.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/exist-cluster/Row.vue
deleted file mode 100644
index b663ba25c2..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/exist-cluster/Row.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<!--
- * 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>
-  <tbody>
-    <tr>
-      <td style="padding: 0">
-        <RenderCluster
-          ref="clusterRef"
-          :model-value="localClusterData"
-          @change="handleClusterChange"
-          @input-create="handleCreate" />
-      </td>
-      <td style="padding: 0">
-        <RenderClusterInputSelect
-          ref="targetClustersRef"
-          :source-cluster-id="localClusterData!.id"
-          :target-cluster-id="data.targetClusterId" />
-      </td>
-      <td style="padding: 0">
-        <RenderBackup
-          ref="backupSourceRef"
-          :list="selectList.backupSource"
-          :model-value="localBackupSource"
-          @change="handleBackupSourceChange" />
-      </td>
-      <td style="padding: 0">
-        <RenderMode
-          ref="modeRef"
-          :backup-source="localBackupSource"
-          :backupid="data.backupid"
-          :cluster-id="localClusterData!.id"
-          :rollback-time="data.rollbackTime" />
-      </td>
-      <td style="padding: 0">
-        <RenderDbName
-          ref="databasesRef"
-          :cluster-id="localClusterData!.id"
-          :init-value="['*']"
-          :model-value="data.databases" />
-      </td>
-      <td style="padding: 0">
-        <RenderDbName
-          ref="databasesIgnoreRef"
-          :allow-asterisk="false"
-          :cluster-id="localClusterData!.id"
-          :model-value="data.databasesIgnore"
-          :required="false" />
-      </td>
-      <td style="padding: 0">
-        <RenderTableName
-          ref="tablesRef"
-          :cluster-id="localClusterData!.id"
-          :init-value="['*']"
-          :model-value="data.tables" />
-      </td>
-      <td style="padding: 0">
-        <RenderTableName
-          ref="tablesIgnoreRef"
-          :allow-asterisk="false"
-          :cluster-id="localClusterData!.id"
-          :model-value="data.tablesIgnore"
-          :required="false" />
-      </td>
-      <OperateColumn
-        :removeable="removeable"
-        @add="handleAppend"
-        @remove="handleRemove" />
-    </tr>
-  </tbody>
-</template>
-<script setup lang="ts">
-  import { ref, watch } from 'vue';
-
-  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
-
-  import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
-  import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
-  import RenderMode from '@views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/Index.vue';
-  import RenderBackup from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderBackup.vue';
-  import RenderCluster from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderCluster.vue';
-
-  import { BackupSources, selectList } from '../../common/const';
-  import RenderClusterInputSelect from '../../common/RenderClusterInputSelect.vue';
-  import { createRowData, type IDataRow } from '../Index.vue';
-
-  interface Props {
-    data: IDataRow;
-    removeable: boolean;
-  }
-
-  interface Emits {
-    (e: 'add', params: Array<IDataRow>): void;
-    (e: 'remove'): void;
-  }
-
-  interface Exposes {
-    validator: (field: keyof IDataRow) => void;
-    getValue: () => Promise<any>;
-  }
-
-  const props = defineProps<Props>();
-
-  const emits = defineEmits<Emits>();
-
-  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
-  const targetClustersRef = ref<InstanceType<typeof RenderClusterInputSelect>>();
-  const backupSourceRef = ref<InstanceType<typeof RenderBackup>>();
-  const modeRef = ref<InstanceType<typeof RenderMode>>();
-  const databasesRef = ref<InstanceType<typeof RenderDbName>>();
-  const databasesIgnoreRef = ref<InstanceType<typeof RenderDbName>>();
-  const tablesRef = ref<InstanceType<typeof RenderTableName>>();
-  const tablesIgnoreRef = ref<InstanceType<typeof RenderTableName>>();
-
-  const localClusterData = ref<IDataRow['clusterData']>({
-    id: 0,
-    domain: '',
-  });
-  const localBackupSource = ref(BackupSources.REMOTE);
-
-  const handleBackupSourceChange = (value: string) => {
-    localBackupSource.value = value as BackupSources;
-  };
-
-  const handleClusterChange = (data?: IDataRow['clusterData']) => {
-    localClusterData.value = data;
-  };
-
-  const handleCreate = (list: Array<string>) => {
-    emits(
-      'add',
-      list.map((domain) =>
-        createRowData({
-          clusterData: {
-            id: 0,
-            domain,
-          },
-        }),
-      ),
-    );
-  };
-
-  const handleAppend = () => {
-    emits('add', [createRowData()]);
-  };
-
-  const handleRemove = () => {
-    if (props.removeable) {
-      return;
-    }
-    emits('remove');
-  };
-
-  watch(
-    () => props.data,
-    () => {
-      if (props.data.clusterData) {
-        localClusterData.value = props.data.clusterData;
-      }
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
-  defineExpose<Exposes>({
-    validator(field: keyof IDataRow) {
-      switch (field) {
-        case 'databases':
-          databasesRef.value!.getValue('databases');
-          break;
-        case 'tables':
-          tablesRef.value!.getValue('tables');
-          break;
-        case 'databasesIgnore':
-          databasesIgnoreRef.value!.getValue('databases_ignore');
-          break;
-        case 'tablesIgnore':
-          tablesIgnoreRef.value!.getValue('tables_ignore');
-          break;
-        default:
-          break;
-      }
-    },
-    getValue() {
-      return Promise.all([
-        clusterRef.value!.getValue(),
-        targetClustersRef.value!.getValue(),
-        modeRef.value!.getValue(),
-        databasesRef.value!.getValue('databases'),
-        tablesRef.value!.getValue('tables'),
-        databasesIgnoreRef.value!.getValue('databases_ignore'),
-        tablesIgnoreRef.value!.getValue('tables_ignore'),
-      ]).then(
-        ([
-          clusterData,
-          targetClustersData,
-          modeData,
-          databasesData,
-          tablesData,
-          databasesIgnoreData,
-          tablesIgnoreData,
-        ]) => ({
-          ...clusterData,
-          ...targetClustersData,
-          ...modeData,
-          ...databasesData,
-          ...tablesData,
-          ...databasesIgnoreData,
-          ...tablesIgnoreData,
-        }),
-      );
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/new-cluster/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/new-cluster/Index.vue
deleted file mode 100644
index 1256d9a2a5..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/new-cluster/Index.vue
+++ /dev/null
@@ -1,289 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <div class="render-data">
-    <RenderTable>
-      <RenderTableHeadColumn
-        :min-width="170"
-        :width="180">
-        {{ t('待回档集群') }}
-        <template #append>
-          <span
-            class="batch-edit-btn"
-            @click="handleShowBatchSelector">
-            <DbIcon type="batch-host-select" />
-          </span>
-        </template>
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="140"
-        :width="160">
-        {{ t('主机来源') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="140"
-        :width="160">
-        {{ t('存储层主机') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="150"
-        :width="170">
-        {{ t('接入层主机') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.backupSource"
-            :data-list="selectList.backupSource"
-            :title="t('备份源')"
-            @change="(value) => handleBatchEdit('backupSource', value)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('backupSource')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('备份源') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="380"
-        :width="400">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.mode"
-            :title="t('回档类型')"
-            @change="handleBatchModeEdit">
-            <template #content>
-              <div
-                class="title-spot edit-title"
-                style="font-weight: normal">
-                {{ t('回档类型') }} <span class="required" />
-              </div>
-              <BkSelect
-                v-model="checkedModeType"
-                :clearable="false"
-                filterable
-                :list="selectList.mode"
-                @change="handleModeType" />
-              <div v-if="checkedModeType === BackupTypes.TIME">
-                <div
-                  class="title-spot edit-title mt-24"
-                  style="font-weight: normal">
-                  {{ t('时间') }} <span class="required" />
-                </div>
-                <BkDatePicker
-                  :clearable="false"
-                  :placeholder="t('如：2019-01-30 12:12:21')"
-                  style="width: 361px"
-                  type="datetime"
-                  :value="datePickerValue"
-                  @change="handleDatePickerChange" />
-              </div>
-              <div v-else>
-                <div
-                  class="title-spot edit-title mt-24"
-                  style="font-weight: normal">
-                  {{ t('备份文件 (批量编辑仅支持 “指定时间自动匹配” )') }} <span class="required" />
-                </div>
-                <BkDatePicker
-                  :clearable="false"
-                  :placeholder="t('如：2019-01-30 12:12:21')"
-                  style="width: 361px"
-                  type="datetime"
-                  :value="datePickerValue"
-                  @change="handleDatePickerChange" />
-                <div
-                  class="mt-4"
-                  :style="{ color: '#979ba5', lineHeight: '20px' }">
-                  {{ t('自动匹配指定日期前的最新全库备份') }}
-                </div>
-              </div>
-            </template>
-          </BatchEditColumn>
-          <span
-            v-bk-tooltips="t('批量编辑')"
-            class="batch-edit-btn"
-            @click="handleShowBatchEdit('mode')">
-            <DbIcon type="bulk-edit" />
-          </span>
-        </template>
-        {{ t('回档类型') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.databases"
-            :placeholder="t('请输入,如需输入多个用回车换行')"
-            :title="t('回档DB')"
-            type="textarea"
-            @change="(value) => handleBatchEdit('databases', value, true)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('databases')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('回档DB') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :required="false"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.databasesIgnore"
-            :placeholder="t('请输入,如需输入多个用回车换行')"
-            :title="t('忽略DB')"
-            type="textarea"
-            @change="(value) => handleBatchEdit('databasesIgnore', value, true)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('databasesIgnore')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('忽略DB') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.tables"
-            :placeholder="t('请输入,如需输入多个用回车换行')"
-            :title="t('回档表名')"
-            type="textarea"
-            @change="(value) => handleBatchEdit('tables', value, true)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('tables')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('回档表名') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :required="false"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.tablesIgnore"
-            :placeholder="t('请输入,如需输入多个用回车换行')"
-            :title="t('忽略表名')"
-            type="textarea"
-            @change="(value) => handleBatchEdit('tablesIgnore', value, true)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('tablesIgnore')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('忽略表名') }}
-      </RenderTableHeadColumn>
-      <template #data>
-        <slot />
-      </template>
-    </RenderTable>
-  </div>
-</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';
-
-  import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
-
-  import { BackupTypes, selectList } from '../../common/const';
-  import type { IDataRow } from '../Index.vue';
-
-  interface Emits {
-    (e: 'showSelector'): void;
-    (e: 'batchEdit', obj: Record<string, any>): void;
-  }
-
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  const checkedModeType = ref(BackupTypes.BACKUPID);
-  const datePickerValue = ref('');
-  const isShowBatchEdit = reactive({
-    backupSource: false,
-    mode: false,
-    databases: false,
-    databasesIgnore: false,
-    tables: false,
-    tablesIgnore: false,
-  });
-
-  const handleModeType = (value: BackupTypes) => {
-    checkedModeType.value = value;
-  };
-  const handleDatePickerChange = (date: string) => {
-    datePickerValue.value = date;
-  };
-  const handleBatchModeEdit = () => {
-    if (checkedModeType.value === BackupTypes.TIME) {
-      handleBatchEdit('rollbackTime', datePickerValue.value);
-      handleBatchEdit('backupid', '');
-    } else {
-      handleBatchEdit('backupid', datePickerValue.value);
-      handleBatchEdit('rollbackTime', '');
-    }
-  };
-
-  const handleShowBatchEdit = (col: keyof typeof isShowBatchEdit) => {
-    isShowBatchEdit[col] = !isShowBatchEdit[col];
-  };
-
-  const handleShowBatchSelector = () => {
-    emits('showSelector');
-  };
-
-  const handleBatchEdit = (key: keyof IDataRow, value: string, isArray = false) => {
-    emits('batchEdit', {
-      [key]: isArray && value ? value.split('\n') : value,
-    });
-  };
-</script>
-<style lang="less">
-  .render-data {
-    display: block;
-
-    .batch-edit-btn {
-      display: inline-block;
-      margin-left: 4px;
-      line-height: 40px;
-      color: #3a84ff;
-      vertical-align: top;
-      cursor: pointer;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/new-cluster/Row.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/new-cluster/Row.vue
deleted file mode 100644
index 82d295c86f..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/new-cluster/Row.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<!--
- * 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>
-  <tbody>
-    <tr>
-      <td style="padding: 0">
-        <RenderCluster
-          ref="clusterRef"
-          :model-value="localClusterData"
-          :placeholder="t('请输入集群')"
-          @change="handleClusterChange" />
-      </td>
-      <td style="padding: 0">
-        <RenderHostSource
-          ref="hostSourceRef"
-          :model-value="localHostSource"
-          @change="handleHostSourceChange" />
-      </td>
-      <td style="padding: 0">
-        <!-- 存储层 -->
-        <RenderHostInputSelect
-          ref="remoteHostRef"
-          :cluster-data="localClusterData"
-          :host-data="localHostData.remote" />
-      </td>
-      <td style="padding: 0">
-        <!-- 接入层 -->
-        <RenderHostInputSelect
-          ref="spiderHostRef"
-          :cluster-data="localClusterData"
-          :host-data="localHostData.spider"
-          single />
-      </td>
-      <td style="padding: 0">
-        <RenderBackup
-          ref="backupSourceRef"
-          :list="selectList.backupSource"
-          :model-value="localBackupSource"
-          @change="handleBackupSourceChange" />
-      </td>
-      <td style="padding: 0">
-        <RenderMode
-          ref="modeRef"
-          :backup-source="localBackupSource"
-          :backupid="data.backupid"
-          :cluster-id="localClusterData!.id"
-          :rollback-time="data.rollbackTime" />
-      </td>
-      <td style="padding: 0">
-        <RenderDbName
-          ref="databasesRef"
-          :cluster-id="localClusterData!.id"
-          :init-value="['*']"
-          :model-value="data.databases" />
-      </td>
-      <td style="padding: 0">
-        <RenderDbName
-          ref="databasesIgnoreRef"
-          :allow-asterisk="false"
-          :cluster-id="localClusterData!.id"
-          :model-value="data.databasesIgnore"
-          :required="false" />
-      </td>
-      <td style="padding: 0">
-        <RenderTableName
-          ref="tablesRef"
-          :cluster-id="localClusterData!.id"
-          :init-value="['*']"
-          :model-value="data.tables" />
-      </td>
-      <td style="padding: 0">
-        <RenderTableName
-          ref="tablesIgnoreRef"
-          :allow-asterisk="false"
-          :cluster-id="localClusterData!.id"
-          :model-value="data.tablesIgnore"
-          :required="false" />
-      </td>
-    </tr>
-  </tbody>
-</template>
-<script setup lang="ts">
-  import { ref, watch } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
-  import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
-  import RenderMode from '@views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/Index.vue';
-  import RenderBackup from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderBackup.vue';
-  import RenderCluster from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderCluster.vue';
-  import RenderHostInputSelect, {
-    type HostDataItem,
-  } from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostInputSelect.vue';
-  import RenderHostSource from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderHostSource.vue';
-
-  import { BackupSources, selectList } from '../../common/const';
-  import type { IDataRow } from '../Index.vue';
-
-  interface Props {
-    data: IDataRow;
-  }
-
-  interface Emits {
-    (e: 'add', params: Array<IDataRow>): void;
-    (e: 'remove'): void;
-  }
-
-  interface Exposes {
-    validator: (field: keyof IDataRow) => void;
-    getValue: () => Promise<any>;
-  }
-
-  const props = defineProps<Props>();
-
-  defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
-  const hostSourceRef = ref<InstanceType<typeof RenderHostSource>>();
-  const spiderHostRef = ref<InstanceType<typeof RenderHostInputSelect>>();
-  const remoteHostRef = ref<InstanceType<typeof RenderHostInputSelect>>();
-  const backupSourceRef = ref<InstanceType<typeof RenderBackup>>();
-  const modeRef = ref<InstanceType<typeof RenderMode>>();
-  const databasesRef = ref<InstanceType<typeof RenderDbName>>();
-  const databasesIgnoreRef = ref<InstanceType<typeof RenderDbName>>();
-  const tablesRef = ref<InstanceType<typeof RenderTableName>>();
-  const tablesIgnoreRef = ref<InstanceType<typeof RenderTableName>>();
-
-  const localHostSource = ref('idle');
-  const localClusterData = ref<IDataRow['clusterData']>({
-    id: 0,
-    domain: '',
-  });
-  const localHostData = reactive({
-    remote: [] as HostDataItem[],
-    spider: [] as HostDataItem[],
-  });
-  const localBackupSource = ref(BackupSources.REMOTE);
-
-  const handleClusterChange = (data: IDataRow['clusterData']) => {
-    localClusterData.value = data;
-  };
-
-  const handleHostSourceChange = (value: string) => {
-    localHostSource.value = value;
-  };
-
-  const handleBackupSourceChange = (value: string) => {
-    localBackupSource.value = value as BackupSources;
-  };
-
-  watch(
-    () => props.data,
-    () => {
-      if (props.data.clusterData) {
-        localClusterData.value = props.data.clusterData;
-      }
-      if (props.data.rollbackHost) {
-        localHostData.remote = props.data.rollbackHost.remote_hosts as HostDataItem[];
-        localHostData.spider = [{ ...props.data.rollbackHost.spider_host }] as HostDataItem[];
-      }
-      localBackupSource.value = props.data.backupSource;
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
-  defineExpose<Exposes>({
-    validator(field: keyof IDataRow) {
-      switch (field) {
-        case 'databases':
-          databasesRef.value!.getValue('databases');
-          break;
-        case 'tables':
-          tablesRef.value!.getValue('tables');
-          break;
-        case 'databasesIgnore':
-          databasesIgnoreRef.value!.getValue('databases_ignore');
-          break;
-        case 'tablesIgnore':
-          tablesIgnoreRef.value!.getValue('tables_ignore');
-          break;
-        default:
-          break;
-      }
-    },
-    getValue() {
-      return Promise.all([
-        clusterRef.value!.getValue(),
-        remoteHostRef.value!.getValue(),
-        spiderHostRef.value!.getValue(),
-        modeRef.value!.getValue(),
-        databasesRef.value!.getValue('databases'),
-        tablesRef.value!.getValue('tables'),
-        databasesIgnoreRef.value!.getValue('databases_ignore'),
-        tablesIgnoreRef.value!.getValue('tables_ignore'),
-      ]).then(
-        ([
-          clusterData,
-          remoteHostsData,
-          spiderHostData,
-          modeData,
-          databasesData,
-          tablesData,
-          databasesIgnoreData,
-          tablesIgnoreData,
-        ]) => ({
-          ...clusterData,
-          rollback_host: {
-            remote_hosts: remoteHostsData.hosts,
-            spider_host: spiderHostData.hosts[0],
-          },
-          ...modeData,
-          ...databasesData,
-          ...tablesData,
-          ...databasesIgnoreData,
-          ...tablesIgnoreData,
-        }),
-      );
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/origin-cluster/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/origin-cluster/Index.vue
deleted file mode 100644
index 029d515780..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/origin-cluster/Index.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <div class="render-data">
-    <RenderTable>
-      <RenderTableHeadColumn
-        :min-width="270"
-        :width="280">
-        {{ t('待回档集群') }}
-        <template #append>
-          <span
-            class="batch-edit-btn"
-            @click="handleShowBatchSelector">
-            <DbIcon type="batch-host-select" />
-          </span>
-        </template>
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="100"
-        :width="120">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.backupSource"
-            :data-list="selectList.backupSource"
-            :title="t('备份源')"
-            @change="(value) => handleBatchEdit('backupSource', value)">
-            <span
-              v-bk-tooltips="t('批量编辑')"
-              class="batch-edit-btn"
-              @click="handleShowBatchEdit('backupSource')">
-              <DbIcon type="bulk-edit" />
-            </span>
-          </BatchEditColumn>
-        </template>
-        {{ t('备份源') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        :min-width="380"
-        :width="400">
-        <template #append>
-          <BatchEditColumn
-            v-model="isShowBatchEdit.mode"
-            :title="t('回档类型')"
-            @change="handleBatchModeEdit">
-            <template #content>
-              <div
-                class="title-spot edit-title"
-                style="font-weight: normal">
-                {{ t('回档类型') }} <span class="required" />
-              </div>
-              <BkSelect
-                v-model="checkedModeType"
-                :clearable="false"
-                filterable
-                :list="selectList.mode"
-                @change="handleModeType" />
-              <div v-if="checkedModeType === BackupTypes.TIME">
-                <div
-                  class="title-spot edit-title mt-24"
-                  style="font-weight: normal">
-                  {{ t('时间') }} <span class="required" />
-                </div>
-                <BkDatePicker
-                  :clearable="false"
-                  :placeholder="t('如：2019-01-30 12:12:21')"
-                  style="width: 361px"
-                  type="datetime"
-                  :value="datePickerValue"
-                  @change="handleDatePickerChange" />
-              </div>
-              <div v-else>
-                <div
-                  class="title-spot edit-title mt-24"
-                  style="font-weight: normal">
-                  {{ t('备份文件 (批量编辑仅支持 “指定时间自动匹配” )') }} <span class="required" />
-                </div>
-                <BkDatePicker
-                  :clearable="false"
-                  :placeholder="t('如：2019-01-30 12:12:21')"
-                  style="width: 361px"
-                  type="datetime"
-                  :value="datePickerValue"
-                  @change="handleDatePickerChange" />
-                <div
-                  class="mt-4"
-                  :style="{ color: '#979ba5', lineHeight: '20px' }">
-                  {{ t('自动匹配指定日期前的最新全库备份') }}
-                </div>
-              </div>
-            </template>
-          </BatchEditColumn>
-          <span
-            v-bk-tooltips="t('批量编辑')"
-            class="batch-edit-btn"
-            @click="handleShowBatchEdit('mode')">
-            <DbIcon type="bulk-edit" />
-          </span>
-        </template>
-        {{ t('回档类型') }}
-      </RenderTableHeadColumn>
-      <RenderTableHeadColumn
-        fixed="right"
-        :required="false"
-        :width="90">
-        {{ t('操作') }}
-      </RenderTableHeadColumn>
-      <template #data>
-        <slot />
-      </template>
-    </RenderTable>
-  </div>
-</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';
-
-  import BatchEditColumn from '@views/db-manage/common/batch-edit-column/Index.vue';
-
-  import { BackupTypes, selectList } from '../../common/const';
-  import type { IDataRow } from '../Index.vue';
-
-  interface Emits {
-    (e: 'showSelector'): void;
-    (e: 'batchEdit', obj: Record<string, any>): void;
-  }
-
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  const checkedModeType = ref(BackupTypes.BACKUPID);
-  const datePickerValue = ref('');
-  const isShowBatchEdit = reactive({
-    backupSource: false,
-    mode: false,
-    databases: false,
-    databasesIgnore: false,
-    tables: false,
-    tablesIgnore: false,
-  });
-
-  const handleModeType = (value: BackupTypes) => {
-    checkedModeType.value = value;
-  };
-  const handleDatePickerChange = (date: string) => {
-    datePickerValue.value = date;
-  };
-  const handleBatchModeEdit = () => {
-    if (checkedModeType.value === BackupTypes.TIME) {
-      handleBatchEdit('rollbackTime', datePickerValue.value);
-      handleBatchEdit('backupid', '');
-    } else {
-      handleBatchEdit('backupid', datePickerValue.value);
-      handleBatchEdit('rollbackTime', '');
-    }
-  };
-
-  const handleShowBatchEdit = (col: keyof typeof isShowBatchEdit) => {
-    isShowBatchEdit[col] = !isShowBatchEdit[col];
-  };
-
-  const handleShowBatchSelector = () => {
-    emits('showSelector');
-  };
-
-  const handleBatchEdit = (key: keyof IDataRow, value: string, isArray = false) => {
-    emits('batchEdit', {
-      [key]: isArray && value ? value.split('\n') : value,
-    });
-  };
-</script>
-<style lang="less">
-  .render-data {
-    display: block;
-
-    .batch-edit-btn {
-      display: inline-block;
-      margin-left: 4px;
-      line-height: 40px;
-      color: #3a84ff;
-      vertical-align: top;
-      cursor: pointer;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/origin-cluster/Row.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/origin-cluster/Row.vue
deleted file mode 100644
index 50dd706e37..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/origin-cluster/Row.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<!--
- * 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"
-        :model-value="localClusterData"
-        @change="handleClusterChange"
-        @input-create="handleCreate" />
-    </td>
-    <td style="padding: 0">
-      <RenderBackup
-        ref="backupSourceRef"
-        :list="selectList.backupSource"
-        :model-value="localBackupSource"
-        @change="handleBackupSourceChange" />
-    </td>
-    <td style="padding: 0">
-      <RenderMode
-        ref="modeRef"
-        :backup-source="localBackupSource"
-        :backupid="data.backupid"
-        :cluster-id="localClusterData!.id"
-        :rollback-time="data.rollbackTime" />
-    </td>
-    <OperateColumn
-      :removeable="removeable"
-      @add="handleAppend"
-      @remove="handleRemove" />
-  </tr>
-</template>
-<script setup lang="ts">
-  import { ref, watch } from 'vue';
-
-  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
-
-  import RenderMode from '@views/db-manage/mysql/rollback/pages/page1/components/common/render-mode/Index.vue';
-  import RenderBackup from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderBackup.vue';
-  import RenderCluster from '@views/db-manage/mysql/rollback/pages/page1/components/common/RenderCluster.vue';
-
-  import { BackupSources, selectList } from '../../common/const';
-  import { createRowData, type IDataRow } from '../Index.vue';
-
-  interface Props {
-    data: IDataRow;
-    removeable: boolean;
-  }
-
-  interface Emits {
-    (e: 'add', params: Array<IDataRow>): void;
-    (e: 'remove'): void;
-  }
-
-  interface Exposes {
-    getValue: () => Promise<any>;
-  }
-
-  const props = defineProps<Props>();
-
-  const emits = defineEmits<Emits>();
-
-  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
-  const backupSourceRef = ref<InstanceType<typeof RenderBackup>>();
-  const modeRef = ref<InstanceType<typeof RenderMode>>();
-
-  const localClusterData = ref<IDataRow['clusterData']>({
-    id: 0,
-    domain: '',
-  });
-  const localBackupSource = ref(BackupSources.REMOTE);
-
-  const handleBackupSourceChange = (value: string) => {
-    localBackupSource.value = value as BackupSources;
-  };
-
-  const handleClusterChange = (data?: IDataRow['clusterData']) => {
-    localClusterData.value = data;
-  };
-
-  const handleCreate = (list: Array<string>) => {
-    emits(
-      'add',
-      list.map((domain) =>
-        createRowData({
-          clusterData: {
-            id: 0,
-            domain,
-          },
-        }),
-      ),
-    );
-  };
-
-  const handleAppend = () => {
-    emits('add', [createRowData()]);
-  };
-
-  const handleRemove = () => {
-    if (props.removeable) {
-      return;
-    }
-    emits('remove');
-  };
-
-  watch(
-    () => props.data,
-    () => {
-      if (props.data.clusterData) {
-        localClusterData.value = props.data.clusterData;
-      }
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
-  defineExpose<Exposes>({
-    getValue() {
-      return Promise.all([
-        clusterRef.value!.getValue(),
-        backupSourceRef.value!.getValue(),
-        modeRef.value!.getValue(),
-      ]).then(([clusterData, targetClustersData, modeData]) => ({
-        ...clusterData,
-        ...targetClustersData,
-        ...modeData,
-        target_cluster_id: clusterData.cluster_id,
-        databases: ['*'],
-        databases_ignore: [],
-        tables: ['*'],
-        tables_ignore: [],
-      }));
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-row/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-row/Index.vue
new file mode 100644
index 0000000000..1e00d1fd9f
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-row/Index.vue
@@ -0,0 +1,415 @@
+<!--
+ * 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>
+    <FixedColumn fixed="left">
+      <RenderCluster
+        ref="clusterRef"
+        :model-value="localClusterData"
+        @change="handleClusterChange" />
+    </FixedColumn>
+    <template v-if="showHostColumn">
+      <td style="padding: 0">
+        <RenderHostSource
+          ref="hostSourceRef"
+          :model-value="localHostSource"
+          @change="handleHostSourceChange" />
+      </td>
+      <td style="padding: 0">
+        <!-- 存储层 -->
+        <RenderHostInputSelect
+          ref="remoteHostRef"
+          :cluster-data="localClusterData"
+          :host-data="localHostData.remote_hosts" />
+      </td>
+      <td style="padding: 0">
+        <!-- 接入层 -->
+        <RenderHostInputSelect
+          ref="spiderHostRef"
+          :cluster-data="localClusterData"
+          :host-data="[localHostData.spider_host]"
+          single />
+      </td>
+    </template>
+    <td
+      v-if="showTargetClusterColumn"
+      style="padding: 0">
+      <RenderClusterInputSelect
+        ref="targetClustersRef"
+        :source-cluster-id="localClusterData!.id"
+        :target-cluster-id="data.targetClusterId" />
+    </td>
+    <td style="padding: 0">
+      <RenderBackup
+        ref="backupSourceRef"
+        :list="backupSourceList.slice(0, 1)"
+        :model-value="localBackupSource"
+        @change="handleBackupSourceChange" />
+    </td>
+    <td style="padding: 0">
+      <RenderMode
+        ref="modeRef"
+        :backup-source="localBackupSource"
+        :backupid="data.backupid"
+        :cluster-id="localClusterData!.id"
+        :rollback-time="data.rollbackTime" />
+    </td>
+    <template v-if="showDbIgnoreColumn">
+      <td style="padding: 0">
+        <RenderDbName
+          ref="databasesRef"
+          :cluster-id="localClusterData!.id"
+          :init-value="['*']"
+          :model-value="data.databases" />
+      </td>
+      <td style="padding: 0">
+        <RenderDbName
+          ref="databasesIgnoreRef"
+          :allow-asterisk="false"
+          :cluster-id="localClusterData!.id"
+          :model-value="data.databasesIgnore"
+          :required="false" />
+      </td>
+      <td style="padding: 0">
+        <RenderTableName
+          ref="tablesRef"
+          :cluster-id="localClusterData!.id"
+          :init-value="['*']"
+          :model-value="data.tables" />
+      </td>
+      <td style="padding: 0">
+        <RenderTableName
+          ref="tablesIgnoreRef"
+          :allow-asterisk="false"
+          :cluster-id="localClusterData!.id"
+          :model-value="data.tablesIgnore"
+          :required="false" />
+      </td>
+    </template>
+    <OperateColumn
+      v-if="showOpeateColumn"
+      :removeable="removeable"
+      @add="handleAppend"
+      @remove="handleRemove" />
+  </tr>
+</template>
+
+<script lang="ts">
+  import { random } from '@utils';
+
+  export interface IDataRow {
+    rowKey: string;
+    clusterData: {
+      id: number;
+      domain: string;
+      cloudId?: number;
+      cloudName?: string;
+      clusterType?: string;
+    };
+    targetClusterId?: number;
+    rollbackHost: {
+      // 接入层
+      spider_host: RollbackHost;
+      // 存储层
+      remote_hosts: RollbackHost[];
+    };
+    backupSource: string;
+    rollbackType: string;
+    backupid?: string;
+    rollbackTime?: string;
+    databases: string[];
+    databasesIgnore?: string[];
+    tables: string[];
+    tablesIgnore?: string[];
+  }
+
+  // 创建表格数据
+  export const createRowData = (data = {} as Partial<IDataRow>) => ({
+    rowKey: random(),
+    clusterData: data.clusterData || {
+      id: 0,
+      domain: '',
+    },
+    targetClusterId: data.targetClusterId,
+    rollbackHost: data.rollbackHost || {
+      spider_host: {
+        ip: '',
+        bk_host_id: 0,
+        bk_cloud_id: 0,
+        bk_biz_id: 0,
+      },
+      remote_hosts: [],
+    },
+    backupSource: data.backupSource || BackupSources.REMOTE,
+    rollbackType: data.rollbackType || BackupTypes.BACKUPID,
+    backupid: data.backupid || '',
+    rollbackTime: data.rollbackTime || '',
+    databases: data.databases || ['*'],
+    databasesIgnore: data.databasesIgnore,
+    tables: data.tables || ['*'],
+    tablesIgnore: data.tablesIgnore,
+  });
+
+  interface Props {
+    rollbackClusterType: RollbackClusterTypes;
+    data: IDataRow;
+    removeable: boolean;
+  }
+  interface Emits {
+    (e: 'add', params: IDataRow[]): void;
+    (e: 'remove'): void;
+  }
+
+  interface Exposes {
+    validator: (field: keyof IDataRow) => void;
+    getValue: () => Promise<any>;
+  }
+</script>
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+
+  import { RollbackClusterTypes, type RollbackHost } from '@services/model/ticket/details/mysql';
+
+  import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
+  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
+
+  import RenderDbName from '@views/db-manage/mysql/common/edit-field/DbName.vue';
+  import RenderTableName from '@views/db-manage/mysql/common/edit-field/TableName.vue';
+  import RenderMode, {
+    BackupTypes,
+  } from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/render-mode/Index.vue';
+  import RenderBackup, {
+    backupSourceList,
+    BackupSources,
+  } from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue';
+  import RenderCluster from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderCluster.vue';
+  import RenderHostInputSelect from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderHostInputSelect.vue';
+  import RenderHostSource from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderHostSource.vue';
+  import RenderClusterInputSelect from '@views/db-manage/tendb-cluster/rollback/pages/page1/components/render-row/components/RenderClusterInputSelect.vue';
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const clusterRef = ref<InstanceType<typeof RenderCluster>>();
+  const hostSourceRef = ref<InstanceType<typeof RenderHostSource>>();
+  const spiderHostRef = ref<InstanceType<typeof RenderHostInputSelect>>();
+  const remoteHostRef = ref<InstanceType<typeof RenderHostInputSelect>>();
+  const targetClustersRef = ref<InstanceType<typeof RenderClusterInputSelect>>();
+  const backupSourceRef = ref<InstanceType<typeof RenderBackup>>();
+  const modeRef = ref<InstanceType<typeof RenderMode>>();
+  const databasesRef = ref<InstanceType<typeof RenderDbName>>();
+  const databasesIgnoreRef = ref<InstanceType<typeof RenderDbName>>();
+  const tablesRef = ref<InstanceType<typeof RenderTableName>>();
+  const tablesIgnoreRef = ref<InstanceType<typeof RenderTableName>>();
+
+  const localHostSource = ref('idle');
+  const localHostData = reactive({
+    remote_hosts: [] as RollbackHost[],
+    spider_host: {} as RollbackHost,
+  });
+  const localClusterData = ref<IDataRow['clusterData']>({
+    id: 0,
+    domain: '',
+  });
+  const localBackupSource = ref(BackupSources.REMOTE);
+
+  const configMap = {
+    [RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER]: ['host', 'dbTableIgnore'],
+    [RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER]: ['targetCluster', 'dbTableIgnore', 'operate'],
+    [RollbackClusterTypes.BUILD_INTO_METACLUSTER]: ['operate'] as string[],
+  };
+
+  const showColumn = (column: string) => computed(() => configMap[props.rollbackClusterType].includes(column));
+
+  const showHostColumn = showColumn('host');
+  const showTargetClusterColumn = showColumn('targetCluster');
+  const showDbIgnoreColumn = showColumn('dbTableIgnore');
+  const showOpeateColumn = showColumn('operate');
+
+  const handleClusterChange = (data: IDataRow['clusterData']) => {
+    localClusterData.value = data;
+  };
+
+  const handleHostSourceChange = (value: string) => {
+    localHostSource.value = value;
+  };
+
+  const handleBackupSourceChange = (value: BackupSources) => {
+    localBackupSource.value = value;
+  };
+
+  const handleAppend = () => {
+    emits('add', [createRowData()]);
+  };
+
+  const handleRemove = () => {
+    if (props.removeable) {
+      return;
+    }
+    emits('remove');
+  };
+
+  const getNewClusterRowData = () =>
+    Promise.all([
+      clusterRef.value!.getValue(),
+      remoteHostRef.value!.getValue(),
+      spiderHostRef.value!.getValue(),
+      modeRef.value!.getValue(),
+      databasesRef.value!.getValue('databases'),
+      tablesRef.value!.getValue('tables'),
+      databasesIgnoreRef.value!.getValue('databases_ignore'),
+      tablesIgnoreRef.value!.getValue('tables_ignore'),
+    ]).then(
+      ([
+        clusterData,
+        remoteHostsData,
+        spiderHostData,
+        modeData,
+        databasesData,
+        tablesData,
+        databasesIgnoreData,
+        tablesIgnoreData,
+      ]) => ({
+        ...clusterData,
+        rollback_host: {
+          remote_hosts: remoteHostsData.hosts,
+          spider_host: spiderHostData.hosts[0],
+        },
+        ...modeData,
+        ...databasesData,
+        ...tablesData,
+        ...databasesIgnoreData,
+        ...tablesIgnoreData,
+      }),
+    );
+
+  const getExistClusterRowData = () =>
+    Promise.all([
+      clusterRef.value!.getValue(),
+      targetClustersRef.value!.getValue(),
+      modeRef.value!.getValue(),
+      databasesRef.value!.getValue('databases'),
+      tablesRef.value!.getValue('tables'),
+      databasesIgnoreRef.value!.getValue('databases_ignore'),
+      tablesIgnoreRef.value!.getValue('tables_ignore'),
+    ]).then(
+      ([
+        clusterData,
+        targetClustersData,
+        modeData,
+        databasesData,
+        tablesData,
+        databasesIgnoreData,
+        tablesIgnoreData,
+      ]) => ({
+        ...clusterData,
+        ...targetClustersData,
+        ...modeData,
+        ...databasesData,
+        ...tablesData,
+        ...databasesIgnoreData,
+        ...tablesIgnoreData,
+      }),
+    );
+
+  const getMetaClusterRowData = () =>
+    Promise.all([clusterRef.value!.getValue(), backupSourceRef.value!.getValue(), modeRef.value!.getValue()]).then(
+      ([clusterData, backupSourceData, modeData]) => ({
+        ...clusterData,
+        ...backupSourceData,
+        ...modeData,
+        target_cluster_id: clusterData.cluster_id,
+        databases: ['*'],
+        databases_ignore: [],
+        tables: ['*'],
+        tables_ignore: [],
+      }),
+    );
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.data.clusterData) {
+        localClusterData.value = props.data.clusterData;
+      }
+      if (props.data.rollbackHost) {
+        localHostData.remote_hosts = props.data.rollbackHost.remote_hosts;
+        localHostData.spider_host = props.data.rollbackHost.spider_host;
+      }
+      localBackupSource.value = props.data.backupSource as BackupSources;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  defineExpose<Exposes>({
+    validator(field: keyof IDataRow) {
+      switch (field) {
+        case 'databases':
+          databasesRef.value!.getValue('databases');
+          break;
+        case 'tables':
+          tablesRef.value!.getValue('tables');
+          break;
+        case 'databasesIgnore':
+          databasesIgnoreRef.value!.getValue('databases_ignore');
+          break;
+        case 'tablesIgnore':
+          tablesIgnoreRef.value!.getValue('tables_ignore');
+          break;
+        default:
+          break;
+      }
+    },
+    getValue() {
+      if (props.rollbackClusterType === RollbackClusterTypes.BUILD_INTO_NEW_CLUSTER) {
+        return getNewClusterRowData();
+      }
+      if (props.rollbackClusterType === RollbackClusterTypes.BUILD_INTO_EXIST_CLUSTER) {
+        return getExistClusterRowData();
+      }
+      return getMetaClusterRowData();
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .action-box {
+    display: flex;
+    align-items: center;
+
+    .action-btn {
+      display: flex;
+      font-size: 14px;
+      color: #c4c6cc;
+      cursor: pointer;
+      transition: all 0.15s;
+
+      &:hover {
+        color: #979ba5;
+      }
+
+      &.disabled {
+        color: #dcdee5;
+        cursor: not-allowed;
+      }
+
+      & ~ .action-btn {
+        margin-left: 18px;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/common/RenderClusterInputSelect.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-row/components/RenderClusterInputSelect.vue
similarity index 84%
rename from dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/common/RenderClusterInputSelect.vue
rename to dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-row/components/RenderClusterInputSelect.vue
index b514c81446..aa3c8f005b 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/common/RenderClusterInputSelect.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/rollback/pages/page1/components/render-row/components/RenderClusterInputSelect.vue
@@ -15,7 +15,7 @@
   <div class="render-host-box">
     <TableSeletorInput
       ref="editRef"
-      v-model="localValue"
+      v-model="localClusterDomain"
       :rules="rules"
       @click-seletor="handleOpenSeletor" />
   </div>
@@ -32,9 +32,7 @@
   import TendbhaModel from '@services/model/mysql/tendbha';
   import type TendbClusterModel from '@services/model/tendbcluster/tendbcluster';
   import { queryClusters } from '@services/source/mysqlCluster';
-  import { getTendbclusterListByBizId } from '@services/source/tendbcluster';
-
-  import { useGlobalBizs } from '@stores';
+  import { getTendbClusterList } from '@services/source/tendbcluster';
 
   import { ClusterTypes } from '@common/const';
   import { batchSplitRegex, domainRegex } from '@common/regex';
@@ -60,20 +58,17 @@
   });
 
   const { t } = useI18n();
-  const { currentBizId } = useGlobalBizs();
-
-  const isShowSelector = ref(false);
 
   const editRef = ref<InstanceType<typeof TableSeletorInput>>();
-  const localValue = ref();
-  const localClusterIds = ref<number[]>([props.targetClusterId]);
+  const isShowSelector = ref(false);
+  const localClusterDomain = ref('');
+  const localClusterId = ref<number>(props.targetClusterId);
   const selectedClusters = shallowRef<{ [key: string]: Array<TendbClusterModel> }>({
     [ClusterTypes.TENDBCLUSTER]: [],
   });
 
   const tabListConfig = {
     [ClusterTypes.TENDBCLUSTER]: {
-      showPreviewResultTitle: true,
       disabledRowConfig: [
         {
           handler: (data: TendbhaModel) => data.id === props.sourceClusterId,
@@ -100,7 +95,7 @@
           cluster_filters: list.map((item) => ({
             immute_domain: item,
           })),
-          bk_biz_id: currentBizId,
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
         }).then((data) => {
           if (data.length === list.length) {
             return true;
@@ -113,28 +108,15 @@
   ];
 
   const queryClustersById = (id: number) => {
-    getTendbclusterListByBizId({
+    getTendbClusterList({
       cluster_ids: [id],
-      bk_biz_id: currentBizId,
     }).then((data) => {
       if (data?.results.length > 0) {
-        localValue.value = data.results[0]?.master_domain;
+        localClusterDomain.value = data.results[0]?.master_domain;
       }
     });
   };
 
-  watch(
-    () => props.targetClusterId,
-    (id) => {
-      if (id) {
-        queryClustersById(id);
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
   const handleOpenSeletor = () => {
     isShowSelector.value = true;
   };
@@ -142,19 +124,32 @@
   // 批量选择
   const handelClusterChange = (selected: { [key: string]: TendbClusterModel[] }) => {
     selectedClusters.value = selected;
-    const list = Object.keys(selected).reduce((list: TendbClusterModel[], key) => list.concat(...selected[key]), []);
-    localValue.value = list.map((item) => item.master_domain).join(',');
-    localClusterIds.value = list.map((item) => item.id);
+    const list = Object.values(selected).flat();
+    const [firstItem] = list;
+    localClusterDomain.value = firstItem.master_domain;
+    localClusterId.value = firstItem.id;
     window.changeConfirm = true;
     setTimeout(() => {
       editRef.value!.getValue();
     });
   };
 
+  watch(
+    () => props.targetClusterId,
+    (id) => {
+      if (id) {
+        queryClustersById(id);
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
   defineExpose<Exposes>({
     getValue() {
       return editRef.value!.getValue().then(() => ({
-        target_cluster_id: localClusterIds.value[0],
+        target_cluster_id: localClusterId.value,
       }));
     },
   });
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/Index.vue
index 69549cc4d2..8ea15eaa5b 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/Index.vue
@@ -57,9 +57,7 @@
     },
   };
 
-  const renderData = computed(
-    () => rollbackInfo[props.ticketDetails.details.rollback_cluster_type as RollbackClusterTypes],
-  );
+  const renderData = computed(() => rollbackInfo[props.ticketDetails.details.rollback_cluster_type]);
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackExistCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackExistCluster.vue
index 3eabb55487..e48d323100 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackExistCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackExistCluster.vue
@@ -20,13 +20,12 @@
 <script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
-  import type Tendbha from '@services/model/mysql/tendbha';
-  import type Tendbsingle from '@services/model/mysql/tendbsingle';
+  import TendbhaModel from '@services/model/mysql/tendbha';
   import type { MySQLRollbackDetails } from '@services/model/ticket/details/mysql';
   import TicketModel from '@services/model/ticket/ticket';
   import { queryClusters } from '@services/source/mysqlCluster';
 
-  import { type BackupSources, selectList } from '@views/db-manage/mysql/rollback/pages/page1/components/common/const';
+  import { backupSourceList, type BackupSources } from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue';
 
   import { utcDisplayTime } from '@utils';
 
@@ -55,7 +54,7 @@
       label: t('备份源'),
       field: 'backup_source',
       width: 100,
-      render: ({ cell }: { cell: BackupSources }) => <span>{ selectList.backupSource.find(item => item.value === cell)?.label || '--' }</span>,
+      render: ({ cell }: { cell: BackupSources }) => <span>{ backupSourceList.find(item => item.value === cell)?.label || '--' }</span>,
     },
     {
       label: t('回档类型'),
@@ -129,7 +128,7 @@
     },
   ];
 
-  const targetClusters = shallowRef<Array<Tendbha | Tendbsingle>>([]);
+  const targetClusters = shallowRef<TendbhaModel[]>([]);
 
   const tableData = computed(() => {
     const { clusters, infos } = props.ticketDetails.details;
@@ -143,7 +142,7 @@
   watch(
     () => props.ticketDetails.details,
     () => {
-      const targetClusterIds = props.ticketDetails.details.infos.map(item => ({ id: Number(item.target_cluster_id) }));
+      const targetClusterIds = props.ticketDetails.details.infos.map(item => ({ id: item.target_cluster_id }));
       queryClusters({
         cluster_filters: targetClusterIds,
         bk_biz_id: props.ticketDetails.bk_biz_id,
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackNewCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackNewCluster.vue
index b45a53ad19..c9b2b5ee31 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackNewCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackNewCluster.vue
@@ -23,8 +23,7 @@
   import type { MySQLRollbackDetails } from '@services/model/ticket/details/mysql';
   import TicketModel from '@services/model/ticket/ticket';
 
-  import { type BackupSources, selectList } from '@views/db-manage/mysql/rollback/pages/page1/components/common/const';
-  import type { IDataRow } from '@views/db-manage/mysql/rollback/pages/page1/components/render-data/Index.vue';
+  import { backupSourceList, type BackupSources } from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue';
 
   import { utcDisplayTime } from '@utils';
 
@@ -53,13 +52,13 @@
       label: t('回档新主机'),
       field: 'rollback_host',
       width: 120,
-      render: ({ data }: { data: MySQLRollbackDetails['infos'][0] }) => <span>{ (data.rollback_host as IDataRow['rollbackHost'])?.ip || '--' }</span>,
+      render: ({ data }: { data: MySQLRollbackDetails['infos'][0] }) => <span>{ data.rollback_host?.ip || '--' }</span>,
     },
     {
       label: t('备份源'),
       field: 'backup_source',
       width: 100,
-      render: ({ cell }: { cell: BackupSources }) => <span>{ selectList.backupSource.find(item => item.value === cell)?.label || '--' }</span>,
+      render: ({ cell }: { cell: BackupSources }) => <span>{ backupSourceList.find(item => item.value === cell)?.label || '--' }</span>,
     },
     {
       label: t('回档类型'),
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackOriginCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackOriginCluster.vue
index 2661dc263a..cceda243e0 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackOriginCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackOriginCluster.vue
@@ -23,7 +23,7 @@
   import type { MySQLRollbackDetails } from '@services/model/ticket/details/mysql';
   import TicketModel from '@services/model/ticket/ticket';
 
-  import { type BackupSources, selectList } from '@views/db-manage/mysql/rollback/pages/page1/components/common/const';
+  import { backupSourceList, type BackupSources } from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue';
 
   import { utcDisplayTime } from '@utils';
 
@@ -44,7 +44,7 @@
     {
       label: t('备份源'),
       field: 'backup_source',
-      render: ({ cell }: { cell: BackupSources }) => <span>{ selectList.backupSource.find(item => item.value === cell)?.label || '--' }</span>,
+      render: ({ cell }: { cell: BackupSources }) => <span>{ backupSourceList.find(item => item.value === cell)?.label || '--' }</span>,
     },
     {
       label: t('回档类型'),
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/Index.vue
index 1ddfb5a079..e780c6d814 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/Index.vue
@@ -12,9 +12,11 @@
 -->
 
 <template>
-  <div class="mb-20 ml-10">
-    <span class="title-spot">{{ t('构造类型') }}</span>
-    <span>：{{ renderData.label }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('构造类型') }}：</span>
+      <span class="ticket-details-item-value">{{ renderData.label }}</span>
+    </div>
   </div>
   <component
     :is="renderData.tableCom"
@@ -24,8 +26,8 @@
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
-  import type { MySQLRollbackDetails } from '@services/model/ticket/details/mysql';
   import { RollbackClusterTypes } from '@services/model/ticket/details/mysql';
+  import type { SpiderRollbackDetails } from '@services/model/ticket/details/spider';
   import TicketModel from '@services/model/ticket/ticket';
 
   import RollbackExistCluster from './components/RollbackExistCluster.vue';
@@ -33,7 +35,7 @@
   import RollbackOriginCluster from './components/RollbackOriginCluster.vue';
 
   interface Props {
-    ticketDetails: TicketModel<MySQLRollbackDetails>;
+    ticketDetails: TicketModel<SpiderRollbackDetails>;
   }
 
   const props = defineProps<Props>();
@@ -55,9 +57,7 @@
     },
   };
 
-  const renderData = computed(
-    () => rollbackInfo[props.ticketDetails.details.rollback_cluster_type as RollbackClusterTypes],
-  );
+  const renderData = computed(() => rollbackInfo[props.ticketDetails.details.rollback_cluster_type]);
 </script>
 
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackExistCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackExistCluster.vue
index 2d40fe9b46..975809036b 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackExistCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackExistCluster.vue
@@ -22,16 +22,16 @@
   import { useI18n } from 'vue-i18n';
 
   import type TendbclusterModel from '@services/model/tendbcluster/tendbcluster';
-  import type { MySQLRollbackDetails } from '@services/model/ticket/details/mysql';
+  import type { SpiderRollbackDetails } from '@services/model/ticket/details/spider';
   import TicketModel from '@services/model/ticket/ticket';
   import { getTendbclusterListByBizId } from '@services/source/tendbcluster';
 
-  import { type BackupSources, selectList } from '@views/db-manage/mysql/rollback/pages/page1/components/common/const';
+  import { backupSourceList, type BackupSources } from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue';
 
   import { utcDisplayTime } from '@utils';
 
   interface Props {
-    ticketDetails: TicketModel<MySQLRollbackDetails>
+    ticketDetails: TicketModel<SpiderRollbackDetails>
   }
 
   const props = defineProps<Props>();
@@ -55,13 +55,13 @@
       label: t('备份源'),
       field: 'backup_source',
       width: 100,
-      render: ({ cell }: { cell: BackupSources }) => <span>{ selectList.backupSource.find(item=>item.value === cell)?.label || '--' }</span>,
+      render: ({ cell }: { cell: BackupSources }) => <span>{ backupSourceList.find(item=>item.value === cell)?.label || '--' }</span>,
     },
     {
       label: t('回档类型'),
       field: '',
       width: 280,
-      render: ({ data }: { data: MySQLRollbackDetails['infos'][0] }) =>  {
+      render: ({ data }: { data: SpiderRollbackDetails['infos'][0] }) =>  {
         if (data.rollback_time) {
           return <span>{ t('回档到指定时间') } - { utcDisplayTime(data.rollback_time) }</span>;
         }
@@ -129,7 +129,7 @@
     },
   ];
 
-  const targetClusters = shallowRef<Array<TendbclusterModel>>([]);
+  const targetClusters = shallowRef<TendbclusterModel[]>([]);
 
   const tableData = computed(()=>{
     const { clusters, infos } = props.ticketDetails.details;
@@ -144,7 +144,7 @@
   watch(
     ()=> props.ticketDetails.details,
     () => {
-      const targetClusterIds = props.ticketDetails.details.infos.map(item => Number(item.target_cluster_id));
+      const targetClusterIds = props.ticketDetails.details.infos.map(item => item.target_cluster_id);
       getTendbclusterListByBizId({
         cluster_ids: targetClusterIds,
         bk_biz_id: props.ticketDetails.bk_biz_id,
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackNewCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackNewCluster.vue
index 0db77af17d..4cb417c4ad 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackNewCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackNewCluster.vue
@@ -21,16 +21,15 @@
 <script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
-  import type { MySQLRollbackDetails } from '@services/model/ticket/details/mysql';
+  import type { SpiderRollbackDetails } from '@services/model/ticket/details/spider';
   import TicketModel from '@services/model/ticket/ticket';
 
-  import { type BackupSources, selectList } from '@views/db-manage/mysql/rollback/pages/page1/components/common/const';
-  import type { IDataRow } from '@views/db-manage/tendb-cluster/rollback/pages/page1/components/render-data/Index.vue';
+  import { backupSourceList, type BackupSources } from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue';
 
   import { utcDisplayTime } from '@utils';
 
   interface Props {
-    ticketDetails: TicketModel<MySQLRollbackDetails>
+    ticketDetails: TicketModel<SpiderRollbackDetails>
   }
 
   const props = defineProps<Props>();
@@ -54,25 +53,25 @@
       label: t('存储层主机'),
       field: 'remote_hosts',
       width: 120,
-      render: ({ data }: { data: MySQLRollbackDetails['infos'][0] }) => <span>{(data.rollback_host as IDataRow['rollbackHost']).remote_hosts?.map(item => item.ip) || '--'}</span>,
+      render: ({ data }: { data: SpiderRollbackDetails['infos'][0] }) => <span>{data.rollback_host.remote_hosts?.map(item => item.ip) || '--'}</span>,
     },
     {
       label: t('接入层主机'),
       field: 'spider_host',
       width: 120,
-      render: ({ data }: { data: MySQLRollbackDetails['infos'][0] }) => <span>{(data.rollback_host as IDataRow['rollbackHost']).spider_host?.ip || '--'}</span>,
+      render: ({ data }: { data: SpiderRollbackDetails['infos'][0] }) => <span>{data.rollback_host.spider_host?.ip || '--'}</span>,
     },
     {
       label: t('备份源'),
       field: 'backup_source',
       width: 100,
-      render: ({ cell }: { cell: BackupSources }) => <span>{ selectList.backupSource.find(item=>item.value === cell)?.label || '--' }</span>,
+      render: ({ cell }: { cell: BackupSources }) => <span>{ backupSourceList.find(item=>item.value === cell)?.label || '--' }</span>,
     },
     {
       label: t('回档类型'),
       field: '',
       width: 280,
-      render: ({ data }: { data: MySQLRollbackDetails['infos'][0] }) =>  {
+      render: ({ data }: { data: SpiderRollbackDetails['infos'][0] }) =>  {
         if (data.rollback_time) {
           return <span>{ t('回档到指定时间') } - { utcDisplayTime(data.rollback_time) }</span>;
         }
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackOriginCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackOriginCluster.vue
index e5e3ee0e5c..dc3583aee9 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackOriginCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackOriginCluster.vue
@@ -21,15 +21,15 @@
 <script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
 
-  import type { MySQLRollbackDetails } from '@services/model/ticket/details/mysql';
+  import type { SpiderRollbackDetails } from '@services/model/ticket/details/spider';
   import TicketModel from '@services/model/ticket/ticket';
 
-  import { type BackupSources, selectList } from '@views/db-manage/mysql/rollback/pages/page1/components/common/const';
+  import { backupSourceList, type BackupSources } from '@views/db-manage/mysql/rollback/pages/page1/components/render-row/components/RenderBackup.vue';
 
   import { utcDisplayTime } from '@utils';
 
   interface Props {
-    ticketDetails: TicketModel<MySQLRollbackDetails>
+    ticketDetails: TicketModel<SpiderRollbackDetails>
   }
 
   const props = defineProps<Props>();
@@ -45,12 +45,12 @@
     {
       label: t('备份源'),
       field: 'backup_source',
-      render: ({ cell }: { cell: BackupSources }) => <span>{ selectList.backupSource.find(item=>item.value === cell)?.label || '--' }</span>,
+      render: ({ cell }: { cell: BackupSources }) => <span>{ backupSourceList.find(item=>item.value === cell)?.label || '--' }</span>,
     },
     {
       label: t('回档类型'),
       field: '',
-      render: ({ data }: { data: MySQLRollbackDetails['infos'][0] }) =>  {
+      render: ({ data }: { data: SpiderRollbackDetails['infos'][0] }) =>  {
         if (data.rollback_time) {
           return <span>{ t('回档到指定时间') } - { utcDisplayTime(data.rollback_time) }</span>;
         }