diff --git a/dbm-services/mysql/db-simulation/app/service/simulation_task.go b/dbm-services/mysql/db-simulation/app/service/simulation_task.go
index fc71c249f8..4b67c03325 100644
--- a/dbm-services/mysql/db-simulation/app/service/simulation_task.go
+++ b/dbm-services/mysql/db-simulation/app/service/simulation_task.go
@@ -25,6 +25,7 @@ import (
 	"github.com/bsm/redislock"
 	"github.com/redis/go-redis/v9"
 	"github.com/samber/lo"
+	"gorm.io/gorm"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 
 	util "dbm-services/common/go-pubpkg/cmutil"
@@ -200,16 +201,29 @@ func reloadRunningTaskFromdb() {
 	var tks []model.TbSimulationTask
 	if err := model.DB.Model(model.TbSimulationTask{}).Where(
 		//nolint
-		"phase not in (?) and create_time >  DATE_SUB(NOW(),INTERVAL 6 HOUR) and time_to_sec(timediff(heartbeat_time,now())) > ? ",
+		"phase not in (?) and create_time >  DATE_SUB(NOW(),INTERVAL 2 HOUR) and time_to_sec(timediff(now(),heartbeat_time)) > ? ",
 		[]string{model.PhaseDone, model.PhaseReloading}, HeartbeatInterval).Scan(&tks).Error; err != nil {
 		logger.Error("get running task failed %s", err.Error())
 		return
 	}
-	if len(tks) == 0 {
+	var reRunTask []model.TbSimulationTask
+	// 可能已经重试成功了，但是version ID 已经变了
+	for _, tk := range tks {
+		var cks model.TbSimulationTask
+		if err := model.DB.Model(model.TbSimulationTask{}).Where("bill_task_id = ? and phase = ? and status = ?",
+			tk.BillTaskId, model.PhaseDone, model.TaskSuccess).First(&cks).Error; err != nil {
+			if errors.Is(err, gorm.ErrRecordNotFound) {
+				reRunTask = append(reRunTask, tk)
+				continue
+			}
+		}
+		logger.Info("task %s already run success", tk.TaskId)
+	}
+	if len(reRunTask) == 0 {
 		logger.Info("no need reload running task")
 		return
 	}
-	for _, tk := range tks {
+	for _, tk := range reRunTask {
 		var err error
 		var req model.TbRequestRecord
 		var p ReloadParam
diff --git a/dbm-services/mysql/db-simulation/app/syntax/parse_relation_db.go b/dbm-services/mysql/db-simulation/app/syntax/parse_relation_db.go
index f23778d62b..ba6bca5228 100644
--- a/dbm-services/mysql/db-simulation/app/syntax/parse_relation_db.go
+++ b/dbm-services/mysql/db-simulation/app/syntax/parse_relation_db.go
@@ -25,6 +25,9 @@ import (
 	"dbm-services/common/go-pubpkg/logger"
 )
 
+// AnalyzeConcurrency 解析并发度
+const AnalyzeConcurrency = 10
+
 // DoParseRelationDbs parse relation db from sql file
 func (tf *TmysqlParseFile) DoParseRelationDbs(version string) (createDbs, relationDbs []string, dumpAll bool,
 	err error) {
@@ -45,14 +48,12 @@ func (tf *TmysqlParseFile) DoParseRelationDbs(version string) (createDbs, relati
 	}
 	// 最后删除临时目录,不会返回错误
 	defer tf.delTempDir()
-
-	errChan := make(chan error, 1)
+	logger.Info("all sqlfiles download ok ~")
 	alreadExecutedSqlfileChan := make(chan string, len(tf.Param.FileNames))
 
 	go func() {
 		if err = tf.Execute(alreadExecutedSqlfileChan, version); err != nil {
 			logger.Error("failed to execute tmysqlparse: %s", err.Error())
-			errChan <- err
 		}
 		close(alreadExecutedSqlfileChan)
 	}()
@@ -78,10 +79,11 @@ func (tf *TmysqlParseFile) DoParseRelationDbs(version string) (createDbs, relati
 func (t *TmysqlParse) doParseInchan(alreadExecutedSqlfileCh chan string,
 	mysqlVersion string) (createDbs []string, relationDbs []string, dumpAll bool, err error) {
 	var errs []error
-	c := make(chan struct{}, 10)
-	errChan := make(chan error, 5)
+	c := make(chan struct{}, AnalyzeConcurrency)
+	errChan := make(chan error)
 	wg := &sync.WaitGroup{}
-	stopChan := make(chan struct{})
+	//  stopchan len 必须要和 AnalyzeConcurrency 保持一致
+	stopChan := make(chan struct{}, AnalyzeConcurrency)
 
 	for sqlfile := range alreadExecutedSqlfileCh {
 		wg.Add(1)
@@ -93,8 +95,11 @@ func (t *TmysqlParse) doParseInchan(alreadExecutedSqlfileCh chan string,
 			if err != nil {
 				errChan <- err
 			}
+			// 如果有dumpall 则直接返回退出,不在继续分析
 			if dumpAllDbs {
 				dumpAll = true
+				<-c
+				wg.Done()
 				stopChan <- struct{}{}
 			}
 			t.mu.Lock()
@@ -132,7 +137,6 @@ func (t *TmysqlParse) analyzeRelationDbs(inputfileName, mysqlVersion string) (
 			logger.Error("panic error:%v,stack:%s", r, string(debug.Stack()))
 		}
 	}()
-	t.result[inputfileName] = &CheckInfo{}
 	f, err := os.Open(t.getAbsoutputfilePath(inputfileName, mysqlVersion))
 	if err != nil {
 		logger.Error("open file failed %s", err.Error())
diff --git a/dbm-services/mysql/db-simulation/app/syntax/syntax.go b/dbm-services/mysql/db-simulation/app/syntax/syntax.go
index f0ad05fb22..5680349ecc 100644
--- a/dbm-services/mysql/db-simulation/app/syntax/syntax.go
+++ b/dbm-services/mysql/db-simulation/app/syntax/syntax.go
@@ -112,11 +112,11 @@ const DdlMapFileSubffix = ".tbl.map"
 
 // Do  运行语法检查 For SQL 文件
 func (tf *TmysqlParseFile) Do(dbtype string, versions []string) (result map[string]*CheckInfo, err error) {
-	logger.Info("doing....")
+	tf.mu = sync.Mutex{}
+	tf.mu.Lock()
 	tf.result = make(map[string]*CheckInfo)
 	tf.tmpWorkdir = tf.BaseWorkdir
-	tf.mu = sync.Mutex{}
-
+	tf.mu.Unlock()
 	if !tf.IsLocalFile {
 		if err = tf.Init(); err != nil {
 			logger.Error("Do init failed %s", err.Error())
@@ -142,7 +142,7 @@ func (tf *TmysqlParseFile) Do(dbtype string, versions []string) (result map[stri
 }
 
 func (tf *TmysqlParseFile) doSingleVersion(dbtype string, mysqlVersion string) (err error) {
-	errChan := make(chan error, 1)
+	errChan := make(chan error, len(tf.Param.FileNames))
 	alreadExecutedSqlfileChan := make(chan string, len(tf.Param.FileNames))
 	signalChan := make(chan struct{})
 
diff --git a/dbm-services/mysql/db-tools/dbactuator/pkg/components/mysql/semantic_dump_schema.go b/dbm-services/mysql/db-tools/dbactuator/pkg/components/mysql/semantic_dump_schema.go
index 2e2f01b886..93c8c17a3d 100644
--- a/dbm-services/mysql/db-tools/dbactuator/pkg/components/mysql/semantic_dump_schema.go
+++ b/dbm-services/mysql/db-tools/dbactuator/pkg/components/mysql/semantic_dump_schema.go
@@ -206,10 +206,6 @@ func (c *SemanticDumpSchemaComp) getDumpdbs(alldbs []string, version string) (re
 			finaldbs = append(finaldbs, db)
 		}
 	} else {
-		if len(lo.Intersect(alldbs, c.Params.ParseCreateDbs)) > 0 {
-			err = fmt.Errorf("create dbs %v,已经存在目标实例中", c.Params.ParseCreateDbs)
-			return nil, err
-		}
 		for _, f := range c.Params.ExecuteObjects {
 			var realexcutedbs []string
 			// 获得目标库 因为是通配符 所以需要获取完整名称
@@ -226,7 +222,9 @@ func (c *SemanticDumpSchemaComp) getDumpdbs(alldbs []string, version string) (re
 			realexcutedbs = util.FilterOutStringSlice(intentionDbs, ignoreDbs)
 			finaldbs = append(finaldbs, realexcutedbs...)
 		}
+		createSQLExistDbs := lo.Intersect(alldbs, c.Params.ParseCreateDbs)
 		finaldbs = append(finaldbs, c.Params.ParseNeedDumpDbs...)
+		finaldbs = append(finaldbs, createSQLExistDbs...)
 	}
 	logger.Info("dump dbs:%v", finaldbs)
 	return finaldbs, nil
diff --git a/dbm-ui/backend/env/__init__.py b/dbm-ui/backend/env/__init__.py
index d15d3ac9f4..fd29c7e1ae 100644
--- a/dbm-ui/backend/env/__init__.py
+++ b/dbm-ui/backend/env/__init__.py
@@ -121,7 +121,7 @@
 # 标准运维项目 ID
 BK_SOPS_PROJECT_ID = get_type_env(key="BK_SOPS_PROJECT_ID", _type=int, default=1)
 # 标准运维更新window机器的模板ID
-UPDATE_WINDOW_GSE_CONFIG = get_type_env(key="UPDATE_WINDOW_GSE_CONFIG", _type=int, default=1)
+UPDATE_WINDOW_GSE_CONFIG = get_type_env(key="UPDATE_WINDOW_GSE_CONFIG", _type=int)
 
 # Bamboo
 ENABLE_CLEAN_EXPIRED_BAMBOO_TASK = get_type_env(key="ENABLE_CLEAN_EXPIRED_BAMBOO_TASK", _type=bool, default=False)
diff --git a/dbm-ui/frontend/src/components/db-table/OriginalTable.vue b/dbm-ui/frontend/src/components/db-table/OriginalTable.vue
index 704c186ef9..be625661bf 100644
--- a/dbm-ui/frontend/src/components/db-table/OriginalTable.vue
+++ b/dbm-ui/frontend/src/components/db-table/OriginalTable.vue
@@ -40,12 +40,13 @@
     (e: 'clearSearch'): void;
   }
   interface Props {
-    columns: InstanceType<typeof Table>['$props']['columns'];
+    columns?: InstanceType<typeof Table>['$props']['columns'];
     isAnomalies?: boolean;
     isSearching?: boolean;
   }
 
   const props = withDefaults(defineProps<Props>(), {
+    columns: undefined,
     isAnomalies: false,
     isSearching: false,
   });
diff --git a/dbm-ui/frontend/src/router/index.ts b/dbm-ui/frontend/src/router/index.ts
index 663b643787..5cde5912cc 100644
--- a/dbm-ui/frontend/src/router/index.ts
+++ b/dbm-ui/frontend/src/router/index.ts
@@ -36,10 +36,6 @@ import getTicketRoutes from '@views/ticket-center/routes';
 import getTicketCooperationSettingRoutes from '@views/ticket-cooperation-setting/routes';
 import getTicketFlowSettingBizRoutes from '@views/ticket-flow-setting-biz/routes';
 import getTicketFlowSettingGlobalRoutes from '@views/ticket-flow-setting-global/routes';
-// import getTicketManageRoutes from '@views/ticket-manage/routes';
-// import getTicketSelfApplyRoutes from '@views/ticket-self-apply/routes';
-// import getTicketSelfManageRoutes from '@views/ticket-self-manage/routes';
-// import getTicketSelfTodoRoutes from '@views/ticket-self-todo/routes';
 import getVersionFilesRoutes from '@views/version-files/routes';
 import getWhitelistRoutes from '@views/whitelist/routes';
 
diff --git a/dbm-ui/frontend/src/services/source/package.ts b/dbm-ui/frontend/src/services/source/package.ts
index f430a99bdd..423cd4dc31 100644
--- a/dbm-ui/frontend/src/services/source/package.ts
+++ b/dbm-ui/frontend/src/services/source/package.ts
@@ -75,13 +75,13 @@ export function updatePackage(params: {
   id: number;
   priority?: number;
   enable?: boolean;
-  name: string;
-  version: string;
-  pkg_type: string;
-  db_type: string;
-  path: string;
-  size: number;
-  md5: string;
+  name?: string;
+  version?: string;
+  pkg_type?: string;
+  db_type?: string;
+  path?: string;
+  size?: number;
+  md5?: string;
   allow_biz_ids?: number[];
   mode?: string;
 }) {
diff --git a/dbm-ui/frontend/src/views/db-configure/components/ParameterTable.vue b/dbm-ui/frontend/src/views/db-configure/components/ParameterTable.vue
index 5ce00def04..35baa16ece 100644
--- a/dbm-ui/frontend/src/views/db-configure/components/ParameterTable.vue
+++ b/dbm-ui/frontend/src/views/db-configure/components/ParameterTable.vue
@@ -28,8 +28,6 @@
   </DbForm>
 </template>
 <script lang="tsx">
-  import type { Column } from 'bkui-vue/lib/table/props';
-  // import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
   import { getLevelConfig } from '@services/source/configs';
@@ -46,9 +44,9 @@
     index: number;
   };
 
-  export default {
+  defineOptions({
     name: 'ParameterTable',
-  };
+  });
 </script>
 
 <script setup lang="tsx">
@@ -101,10 +99,10 @@
   // 配合 controlShow 控制当前行显示隐藏
   const lockTipsList = computed(() => Array.from({ length: props.data.length }, () => false));
 
-  const columns: Column[] = [{
+  const columns = [{
     label: t('参数项'),
     field: 'conf_name',
-    showOverflowTooltip: false,
+    minWidth: 300,
     render: ({ cell, data, index }: TableColumn) => {
       if (data.op_type === 'add') {
         return (
diff --git a/dbm-ui/frontend/src/views/db-configure/components/ReadonlyTable.vue b/dbm-ui/frontend/src/views/db-configure/components/ReadonlyTable.vue
index 84ece2e6fe..4d4b25e946 100644
--- a/dbm-ui/frontend/src/views/db-configure/components/ReadonlyTable.vue
+++ b/dbm-ui/frontend/src/views/db-configure/components/ReadonlyTable.vue
@@ -84,6 +84,7 @@
     {
       label: t('参数项'),
       field: 'conf_name',
+      minWidth: 300,
       render: ({ data }: {data: ParameterConfigItem}) => (
         <>
           <div
diff --git a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/cluster-ids/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/cluster-ids/Index.vue
index 030c302527..9992099fbc 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/cluster-ids/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/cluster-ids/Index.vue
@@ -91,6 +91,7 @@
     {
       label: t('集群'),
       field: 'master_domain',
+      minWidth: 250,
     },
     {
       label: t('类型'),
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue
index 4035db1742..47b14af295 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue
@@ -222,7 +222,6 @@
     },
     {
       label: t('操作'),
-      field: 'action',
       width: 220,
       fixed: 'right',
       render: ({ data }: { data: PartitionModel }) => {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue
index 4a03e426b1..7e10f56bb2 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/list-ha/components/list/Index.vue
@@ -165,7 +165,7 @@
   const router = useRouter();
   const globalBizsStore = useGlobalBizs();
   const { handleDisableCluster, handleEnableCluster, handleDeleteCluster } = useOperateClusterBasic(
-    ClusterTypes.REDIS,
+    ClusterTypes.REDIS_INSTANCE,
     {
       onSuccess: () => fetchData(),
     },
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue
index 9e005ffd9d..9490b00a46 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue
@@ -230,7 +230,6 @@
     },
     {
       label: t('操作'),
-      field: 'action',
       width: 220,
       fixed: 'right',
       render: ({ data }: { data: PartitionModel }) => {
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts
index d73651dbba..e46fbafabf 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts
+++ b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts
@@ -24,7 +24,7 @@ const create = (options = {} as { exclude: string[] }) => {
     const serachList = [
       {
         name: t('单号'),
-        id: 'id',
+        id: 'ids',
       },
       {
         name: t('单据类型'),
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/DemandInfo.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/DemandInfo.vue
index a9d33c878a..48d6159976 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/DemandInfo.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/components/DemandInfo.vue
@@ -107,7 +107,6 @@
       }
 
       .demand-info-item-value {
-        display: ruby;
         overflow: hidden;
         color: @title-color;
         text-overflow: ellipsis;
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/dumper/Install.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/dumper/Install.vue
index 7bb7d81408..cb32746059 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/dumper/Install.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/dumper/Install.vue
@@ -12,45 +12,37 @@
 -->
 
 <template>
-  <div
-    class="ticket-details-item"
-    style="align-items: flex-start">
-    <span class="ticket-details-item-label">{{ t('订阅的库表') }}：</span>
-    <span class="ticket-details-item-value">
+  <InfoList>
+    <InfoItem
+      :label="t('订阅的库表：')"
+      style="flex: 0 0 100%">
       <BkTable
-        class="subscribe-table"
         :columns="subscribeColumns"
         :data="subscribeTableData" />
-    </span>
-  </div>
-  <div
-    class="ticket-details-item mt-16"
-    style="align-items: flex-start">
-    <span class="ticket-details-item-label">{{ t('数据源与接收端') }}：</span>
-    <span class="ticket-details-item-value">
+    </InfoItem>
+    <InfoItem
+      :label="t('数据源与接收端：')"
+      style="flex: 0 0 100%">
       <BkTable
-        class="subscribe-table"
         :columns="receiverColumns"
         :data="receiverTableData" />
-    </span>
-  </div>
-
-  <div class="ticket-details-list">
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('订阅名称') }}：</span>
-      <span class="ticket-details-item-value">{{ name }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('Dumper部署位置') }}：</span>
-      <span class="ticket-details-item-value">{{ t('集群Master所在主机') }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('数据同步方式') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ addType === 'incr_sync' ? t('增量同步') : t('全量同步') }}
-      </span>
-    </div>
-  </div>
+    </InfoItem>
+    <InfoItem
+      :label="t('订阅名称：')"
+      style="flex: 0 0 100%">
+      {{ name }}
+    </InfoItem>
+    <InfoItem
+      :label="t('Dumper部署位置：')"
+      style="flex: 0 0 100%">
+      {{ t('集群Master所在主机') }}
+    </InfoItem>
+    <InfoItem
+      :label="t('数据同步方式：')"
+      style="flex: 0 0 100%">
+      {{ addType === 'incr_sync' ? t('增量同步') : t('全量同步') }}
+    </InfoItem>
+  </InfoList>
 </template>
 
 <script setup lang="tsx">
@@ -60,6 +52,8 @@
 
   import { TicketTypes } from '@common/const';
 
+  import InfoList, { Item as InfoItem } from '../components/info-list/Index.vue';
+
 
   interface Props {
     ticketDetails: TicketModel<Dumper.Install>
@@ -193,31 +187,3 @@
     };
   });
 </script>
-<style lang="less" scoped>
-  .subscribe-table {
-    :deep(.table-names-box) {
-      display: flex;
-      width: 100%;
-      flex-wrap: wrap;
-      padding-top: 10px;
-      padding-bottom: 2px;
-
-      .name-item {
-        height: 22px;
-        padding: 0 8px;
-        margin-right: 4px;
-        margin-bottom: 8px;
-        line-height: 22px;
-        color: #63656e;
-        background: #f0f1f5;
-        border-radius: 2px;
-      }
-    }
-
-    :deep(th) {
-      .head-text {
-        color: #313238;
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/riak/common/ScaleIn&ScaleOut.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/riak/common/ScaleIn&ScaleOut.vue
index 1c5811db19..d430729723 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/riak/common/ScaleIn&ScaleOut.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/riak/common/ScaleIn&ScaleOut.vue
@@ -12,47 +12,37 @@
 -->
 
 <template>
-  <BkLoading :loading="loading">
-    <div class="ticket-details-list">
-      <div class="ticket-details-item">
-        <span class="ticket-details-item-label">{{ t('集群') }}：</span>
-        <span class="ticket-details-item-value">{{ rowData?.clusterName || '--' }}</span>
-      </div>
-      <div class="ticket-details-item">
-        <span class="ticket-details-item-label">{{ t('集群ID') }}：</span>
-        <span class="ticket-details-item-value">{{ rowData?.clusterId || '--' }}</span>
-      </div>
+  <BkLoading :loading="isLoading">
+    <InfoList>
+      <InfoItem :label="t('集群：')">
+        {{ rowData?.clusterName || '--' }}
+      </InfoItem>
+      <InfoItem :label="t('集群ID：')">
+        {{ rowData?.clusterId || '--' }}
+      </InfoItem>
       <template v-if="isScaleUp">
-        <div class="ticket-details-item">
-          <span class="ticket-details-item-label">{{ t('服务器选择方式') }}：</span>
-          <span class="ticket-details-item-value">
-            {{ isFromResourcePool ? t('从资源池匹配') : t('手动选择') }}
-          </span>
-        </div>
+        <InfoItem :label="t('服务器选择方式：')">
+          {{ isFromResourcePool ? t('从资源池匹配') : t('手动选择') }}
+        </InfoItem>
         <template v-if="isFromResourcePool">
-          <div class="ticket-details-item">
-            <span class="ticket-details-item-label">{{ t('扩容规格') }}：</span>
-            <span class="ticket-details-item-value">{{ rowData?.specName || '--' }}</span>
-          </div>
-          <div class="ticket-details-item">
-            <span class="ticket-details-item-label">{{ t('扩容数量') }}：</span>
-            <span class="ticket-details-item-value">
-              {{ t('n台', [rowData?.count]) || '--' }}
-            </span>
-          </div>
+          <InfoItem :label="t('扩容规格：')">
+            {{ rowData?.specName || '--' }}
+          </InfoItem>
+          <InfoItem :label="t('扩容数量：')">
+            {{ t('n台', [rowData?.count]) || '--' }}
+          </InfoItem>
         </template>
         <template v-else>
-          <div class="ticket-details-item table">
-            <span class="ticket-details-item-label">{{ t('已选IP') }}：</span>
-            <span class="ticket-details-item-value">
-              <BkTable
-                :columns="tableColumns"
-                :data="ipList" />
-            </span>
-          </div>
+          <InfoItem
+            :label="t('已选IP：')"
+            style="width: 100%">
+            <BkTable
+              :columns="tableColumns"
+              :data="ipList" />
+          </InfoItem>
         </template>
       </template>
-    </div>
+    </InfoList>
   </BkLoading>
 </template>
 
@@ -63,6 +53,8 @@
   import TicketModel, { type Riak } from '@services/model/ticket/ticket';
   import { getResourceSpecList } from '@services/source/dbresourceSpec';
 
+  import InfoList, { Item as InfoItem } from '../../components/info-list/Index.vue';
+
   interface Props {
     ticketDetails: TicketModel<Riak.ScaleIn>
   }
@@ -101,7 +93,7 @@
 
   const ipList = computed(() => props.ticketDetails.details?.nodes?.riak || []);
 
-  const { loading } = useRequest(getResourceSpecList, {
+  const { loading: isLoading } = useRequest(getResourceSpecList, {
     defaultParams: [{
       spec_cluster_type: 'riak',
       offset: 0,
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/HaApply.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/HaApply.vue
index 6cca6ba7c1..8f2ce9c761 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/HaApply.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/HaApply.vue
@@ -61,7 +61,9 @@
         </template>
       </BkPopover>
     </InfoItem>
-    <InfoItem :label="t('集群设置：')">
+    <InfoItem
+      :label="t('集群设置：')"
+      style="width: 100%">
       <BkTable :data="ticketDetails.details.domains">
         <BkTableColumn
           field="master"
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/SingleApply.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/SingleApply.vue
index e9c3aa92bb..f693c96275 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/SingleApply.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/SingleApply.vue
@@ -58,7 +58,9 @@
         </template>
       </BkPopover>
     </InfoItem>
-    <InfoItem :label="t('集群设置：')">
+    <InfoItem
+      :label="t('集群设置：')"
+      style="width: 100%">
       <BkTable :data="ticketDetails.details.domains">
         <BkTableColumn
           field="master"
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/MasterFailOver.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/MasterFailOver.vue
index 288e981a1a..5e967a621b 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/MasterFailOver.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/MasterFailOver.vue
@@ -23,9 +23,7 @@
       {{ ticketDetails.details.is_verify_checksum ? t('是') : t('否') }}
     </InfoItem>
   </InfoList>
-  <BkTable
-    :data="ticketDetails.details.infos"
-    show-overflow-tooltip>
+  <BkTable :data="ticketDetails.details.infos">
     <BkTableColumn :label="t('故障主库主机')">
       <template #default="{ data }: { data: RowData }">
         {{ data.switch_tuples[0]?.master?.ip }}
diff --git a/dbm-ui/frontend/src/views/ticket-manage/list/components/detail/Index.vue b/dbm-ui/frontend/src/views/ticket-manage/list/components/detail/Index.vue
deleted file mode 100644
index 5a73955647..0000000000
--- a/dbm-ui/frontend/src/views/ticket-manage/list/components/detail/Index.vue
+++ /dev/null
@@ -1,243 +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>
-  <ScrollFaker v-if="isStretchLayoutSplited">
-    <BkLoading
-      class="ticket-details-page"
-      :loading="isLoading"
-      style="min-height: calc(100vh - 104px - var(--notice-height))">
-      <PermissionCatch :key="ticketId">
-        <SmartAction :offset-target="getOffsetTarget">
-          <template v-if="ticketData">
-            <BaseInfo :ticket-data="ticketData" />
-            <Teleport
-              :disabled="!isFullscreen"
-              to="body">
-              <DbCard
-                v-model:collapse="demandCollapse"
-                :class="{ 'tickets-main-is-fullscreen': isFullscreen }"
-                mode="collapse"
-                :title="t('需求信息')">
-                <DemandInfo :data="ticketData" />
-                <div class="ticket-details-item">
-                  <span class="ticket-details-item-label">{{ t('备注') }}：</span>
-                  <span class="ticket-details-item-value">{{ ticketData.remark || '--' }}</span>
-                </div>
-              </DbCard>
-            </Teleport>
-            <DbCard
-              class="ticket-flows"
-              mode="collapse"
-              :title="t('实施进度')">
-              <FlowInfo
-                ref="flowInfoRef"
-                :data="ticketData"
-                @refresh="handleRefreshTicketData" />
-            </DbCard>
-          </template>
-          <template
-            v-if="ticketData"
-            #action>
-            <TicketClone :data="ticketData" />
-          </template>
-        </SmartAction>
-      </PermissionCatch>
-    </BkLoading>
-  </ScrollFaker>
-</template>
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import { getTicketDetails } from '@services/source/ticket';
-
-  import { useStretchLayout } from '@hooks';
-
-  import PermissionCatch from '@components/apply-permission/Catch.vue';
-
-  import TicketClone from '@views/tickets/common/components/TicketClone.vue';
-  import BaseInfo from '@views/tickets/my-tickets/components/details/components/BaseInfo.vue';
-  import DemandInfo from '@views/tickets/my-tickets/components/details/components/Demand.vue';
-  import FlowInfo from '@views/tickets/my-tickets/components/details/components/flow/Index.vue';
-
-  import { useTimeoutFn } from '@vueuse/core';
-
-  interface Props {
-    ticketId: number;
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-  const route = useRoute();
-  const { isSplited: isStretchLayoutSplited } = useStretchLayout();
-
-  const getOffsetTarget = () => document.body.querySelector('.ticket-details-page .db-card');
-
-  const isFullscreen = ref<boolean>(Boolean(route.query.isFullscreen));
-  const demandCollapse = ref(false);
-  const isLoading = ref(true);
-  const flowInfoRef = ref<InstanceType<typeof FlowInfo>>();
-
-  const { runAsync: fetchTicketDetails, data: ticketData } = useRequest(
-    (params: ServiceParameters<typeof getTicketDetails>) =>
-      getTicketDetails(params, {
-        permission: 'catch',
-      }),
-    {
-      onSuccess(_, params) {
-        if (params[0].id !== props.ticketId) {
-          return;
-        }
-        loopFetchTicketDetails();
-      },
-    },
-  );
-
-  const { start: loopFetchTicketDetails } = useTimeoutFn(() => {
-    fetchTicketDetails({
-      id: props.ticketId,
-    });
-  }, 10000);
-
-  watch(
-    () => props.ticketId,
-    () => {
-      if (props.ticketId) {
-        isLoading.value = true;
-        ticketData.value = undefined;
-        fetchTicketDetails({
-          id: props.ticketId,
-        }).finally(() => {
-          isLoading.value = false;
-        });
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  watch(
-    isFullscreen,
-    () => {
-      if (isFullscreen.value) {
-        demandCollapse.value = true;
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const exitFullscreen = (e: KeyboardEvent) => {
-    if (e.keyCode === 27) {
-      isFullscreen.value = false;
-    }
-  };
-
-  const handleRefreshTicketData = () => {
-    fetchTicketDetails({
-      id: props.ticketId,
-    });
-  };
-
-  onMounted(() => {
-    window.addEventListener('keydown', exitFullscreen);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', exitFullscreen);
-  });
-</script>
-
-<style lang="less">
-  @import '@views/tickets/common/styles/ticketDetails.less';
-
-  .ticket-details-page {
-    padding: 24px;
-    font-size: 12px;
-    background: #f5f7fa;
-
-    .db-card {
-      .db-card__content {
-        padding-left: 82px;
-      }
-
-      & ~ .db-card {
-        margin-top: 16px;
-      }
-    }
-
-    .bk-timeline {
-      padding-bottom: 16px;
-
-      .bk-timeline-title {
-        font-size: @font-size-mini;
-        font-weight: bold;
-        color: @title-color;
-      }
-
-      .bk-timeline-dot {
-        &::before {
-          display: none;
-        }
-
-        .bk-timeline-icon {
-          color: unset !important;
-          background: white !important;
-          border: none !important;
-        }
-      }
-
-      .bk-timeline-content {
-        max-width: unset;
-        font-size: @font-size-mini;
-        color: @default-color;
-
-        .flow-time {
-          padding-top: 8px;
-          color: @gray-color;
-        }
-      }
-    }
-
-    .ticket-flows {
-      margin-bottom: 20px;
-
-      .flow-todo__title {
-        padding-bottom: 12px;
-        font-weight: bold;
-      }
-    }
-
-    .ticket-flow-content {
-      .ticket-flow-content-desc {
-        padding: 8px 0 24px;
-        font-size: @font-size-mini;
-        color: @title-color;
-      }
-
-      .ticket-flow-content-buttons {
-        text-align: right;
-
-        .bk-button {
-          min-width: 62px;
-          margin-left: 8px;
-          font-size: @font-size-mini;
-        }
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/ticket-self-apply/components/detail/Index.vue b/dbm-ui/frontend/src/views/ticket-self-apply/components/detail/Index.vue
deleted file mode 100644
index 9d70db5cfc..0000000000
--- a/dbm-ui/frontend/src/views/ticket-self-apply/components/detail/Index.vue
+++ /dev/null
@@ -1,243 +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>
-  <ScrollFaker v-if="isStretchLayoutSplited">
-    <BkLoading
-      class="ticket-details-page"
-      :loading="isLoading"
-      style="min-height: calc(100vh - 104px - var(--notice-height))">
-      <PermissionCatch :key="ticketId">
-        <SmartAction :offset-target="getOffsetTarget">
-          <template v-if="ticketData">
-            <BaseInfo :ticket-data="ticketData" />
-            <Teleport
-              :disabled="!isFullscreen"
-              to="body">
-              <DbCard
-                v-model:collapse="demandCollapse"
-                :class="{ 'tickets-main-is-fullscreen': isFullscreen }"
-                mode="collapse"
-                :title="t('需求信息')">
-                <DemandInfo :data="ticketData" />
-                <div class="ticket-details-item">
-                  <span class="ticket-details-item-label">{{ t('备注') }}：</span>
-                  <span class="ticket-details-item-value">{{ ticketData.remark || '--' }}</span>
-                </div>
-              </DbCard>
-            </Teleport>
-            <DbCard
-              class="ticket-flows"
-              mode="collapse"
-              :title="t('实施进度')">
-              <FlowInfo
-                ref="flowInfoRef"
-                :data="ticketData"
-                @refresh="handleRefreshTicketData" />
-            </DbCard>
-          </template>
-          <template
-            v-if="ticketData"
-            #action>
-            <TicketClone :data="ticketData" />
-          </template>
-        </SmartAction>
-      </PermissionCatch>
-    </BkLoading>
-  </ScrollFaker>
-</template>
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import { getTicketDetails } from '@services/source/ticket';
-
-  import { useStretchLayout } from '@hooks';
-
-  import PermissionCatch from '@components/apply-permission/Catch.vue';
-
-  import TicketClone from '@views/tickets/common/components/TicketClone.vue';
-  import BaseInfo from '@views/tickets/my-tickets/components/details/components/BaseInfo.vue';
-  import DemandInfo from '@views/tickets/my-tickets/components/details/components/Demand.vue';
-  import FlowInfo from '@views/tickets/my-tickets/components/details/components/flow/Index.vue';
-
-  import { useTimeoutFn } from '@vueuse/core';
-
-  interface Props {
-    ticketId: number;
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-  const route = useRoute();
-  const { isSplited: isStretchLayoutSplited } = useStretchLayout();
-
-  const getOffsetTarget = () => document.body.querySelector('.ticket-details-page .db-card');
-
-  const isFullscreen = ref<boolean>(Boolean(route.query.isFullscreen));
-  const demandCollapse = ref(false);
-  const isLoading = ref(true);
-  const flowInfoRef = ref<InstanceType<typeof FlowInfo>>();
-
-  const { runAsync: fetchTicketDetails, data: ticketData } = useRequest(
-    (params: ServiceParameters<typeof getTicketDetails>) =>
-      getTicketDetails(params, {
-        permission: 'catch',
-      }),
-    {
-      onSuccess(_, params) {
-        if (params[0].id !== props.ticketId) {
-          return;
-        }
-        loopFetchTicketDetails();
-      },
-    },
-  );
-
-  const { start: loopFetchTicketDetails } = useTimeoutFn(() => {
-    fetchTicketDetails({
-      id: props.ticketId,
-    });
-  }, 10000000);
-
-  watch(
-    () => props.ticketId,
-    () => {
-      if (props.ticketId) {
-        isLoading.value = true;
-        ticketData.value = undefined;
-        fetchTicketDetails({
-          id: props.ticketId,
-        }).finally(() => {
-          isLoading.value = false;
-        });
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  watch(
-    isFullscreen,
-    () => {
-      if (isFullscreen.value) {
-        demandCollapse.value = true;
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const exitFullscreen = (e: KeyboardEvent) => {
-    if (e.keyCode === 27) {
-      isFullscreen.value = false;
-    }
-  };
-
-  const handleRefreshTicketData = () => {
-    fetchTicketDetails({
-      id: props.ticketId,
-    });
-  };
-
-  onMounted(() => {
-    window.addEventListener('keydown', exitFullscreen);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', exitFullscreen);
-  });
-</script>
-
-<style lang="less">
-  @import '@views/tickets/common/styles/ticketDetails.less';
-
-  .ticket-details-page {
-    padding: 24px;
-    font-size: 12px;
-    background: #f5f7fa;
-
-    .db-card {
-      .db-card__content {
-        padding-left: 82px;
-      }
-
-      & ~ .db-card {
-        margin-top: 16px;
-      }
-    }
-
-    .bk-timeline {
-      padding-bottom: 16px;
-
-      .bk-timeline-title {
-        font-size: @font-size-mini;
-        font-weight: bold;
-        color: @title-color;
-      }
-
-      .bk-timeline-dot {
-        &::before {
-          display: none;
-        }
-
-        .bk-timeline-icon {
-          color: unset !important;
-          background: white !important;
-          border: none !important;
-        }
-      }
-
-      .bk-timeline-content {
-        max-width: unset;
-        font-size: @font-size-mini;
-        color: @default-color;
-
-        .flow-time {
-          padding-top: 8px;
-          color: @gray-color;
-        }
-      }
-    }
-
-    .ticket-flows {
-      margin-bottom: 20px;
-
-      .flow-todo__title {
-        padding-bottom: 12px;
-        font-weight: bold;
-      }
-    }
-
-    .ticket-flow-content {
-      .ticket-flow-content-desc {
-        padding: 8px 0 24px;
-        font-size: @font-size-mini;
-        color: @title-color;
-      }
-
-      .ticket-flow-content-buttons {
-        text-align: right;
-
-        .bk-button {
-          min-width: 62px;
-          margin-left: 8px;
-          font-size: @font-size-mini;
-        }
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/ticket-self-apply/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-self-apply/components/list/components/TableMode.vue
deleted file mode 100644
index 33a6a17d79..0000000000
--- a/dbm-ui/frontend/src/views/ticket-self-apply/components/list/components/TableMode.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<template>
-  <div class="ticket-list-table-mode">
-    <div class="header-action-box">
-      <BkDatePicker
-        v-model="datePickerValue"
-        format="yyyy-MM-dd HH:mm:ss"
-        :shortcuts="shortcutsRange"
-        style="margin-left: auto"
-        type="datetimerange"
-        use-shortcut-text />
-      <DbSearchSelect
-        v-model="searachSelectValue"
-        :data="searchSelectData"
-        parse-url
-        :placeholder="t('请输入或选择条件搜索')"
-        style="width: 450px; margin-left: 16px"
-        unique-select />
-    </div>
-    <div ref="table">
-      <BkLoading :loading="isLoading">
-        <BkTable
-          :data="dataList"
-          :max-height="tableMaxHeight"
-          :pagination="pagination"
-          remote-pagination
-          :show-overflow-tooltip="{
-            popoverOption: {
-              maxWidth: 500,
-            },
-          }"
-          @page-limit-change="handlePageLimitChange"
-          @page-value-change="handlePageValueChange">
-          <BkTableColumn
-            field="id"
-            :label="t('单据')"
-            width="100">
-            <template #default="{ data }: { data: IRowData }">
-              <BkButton
-                text
-                theme="primary"
-                @click="() => handleShowDetail(data)">
-                {{ data.id }}
-              </BkButton>
-            </template>
-          </BkTableColumn>
-          <BkTableColumn
-            field="bk_biz_name"
-            :label="t('业务')"
-            :min-width="150" />
-          <BkTableColumn
-            field="ticket_type_display"
-            :label="t('单据类型')"
-            :min-width="200" />
-          <BkTableColumn
-            field="ticket_type_display"
-            :label="t('集群')"
-            min-width="250">
-            <template #default="{ data }: { data: IRowData }">
-              <MultLineText
-                v-if="data.related_object.objects"
-                :line="3"
-                style="padding: 8px 0">
-                <div
-                  v-for="item in data.related_object.objects"
-                  :key="item"
-                  style="line-height: 20px">
-                  {{ item }}
-                </div>
-              </MultLineText>
-              <template v-else> -- </template>
-            </template>
-          </BkTableColumn>
-          <BkTableColumn
-            field="status"
-            :label="t('状态')"
-            :min-width="100">
-            <template #default="{ data }: { data: IRowData }">
-              <BkTag :theme="data.tagTheme">
-                {{ data.statusText }}
-              </BkTag>
-            </template>
-          </BkTableColumn>
-          <BkTableColumn
-            field="remark"
-            :label="t('备注')">
-            <template #default="{ data }: { data: IRowData }">
-              {{ data.remark || '--' }}
-            </template>
-          </BkTableColumn>
-          <BkTableColumn
-            field="creator"
-            :label="t('申请人')"
-            width="250" />
-          <BkTableColumn
-            field="createAtDisplay"
-            :label="t('申请时间')"
-            width="250" />
-        </BkTable>
-      </BkLoading>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import { onMounted } from 'vue';
-  import { useI18n } from 'vue-i18n';
-  import { useRoute } from 'vue-router';
-
-  import TicketModel from '@services/model/ticket/ticket';
-
-  import { useStretchLayout, useUrlSearch } from '@hooks';
-
-  import MultLineText from '@components/mult-line-text/Index.vue';
-
-  import useData from './hooks/use-data';
-  import useDatePicker from './hooks/use-date-picker';
-  import useSearchSelect from './hooks/use-search-select';
-  import useTableHeight from './hooks/use-table-height';
-
-  type IRowData = TicketModel<unknown>;
-
-  const route = useRoute();
-
-  const { t } = useI18n();
-  const { appendSearchParams, getSearchParams } = useUrlSearch();
-
-  const { tableMaxHeight } = useTableHeight();
-  const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
-  const { value: datePickerValue, shortcutsRange, formatValue: formatDateValue } = useDatePicker();
-  const { loading: isLoading, pagination, fetchTicketList, dataList } = useData();
-  const { value: searachSelectValue, searchSelectData, formatSearchValue } = useSearchSelect();
-
-  const modelValue = defineModel<number>();
-
-  const handleShowDetail = (data: IRowData) => {
-    modelValue.value = data.id;
-    stretchLayoutSplitScreen();
-    appendSearchParams({
-      viewId: data.id,
-    });
-  };
-
-  const fetchData = () => {
-    fetchTicketList({
-      ...formatDateValue.value,
-      ...formatSearchValue.value,
-    });
-  };
-
-  watch([formatDateValue, formatSearchValue], () => {
-    pagination.current = 1;
-    fetchData();
-  });
-
-  // 切换每页条数
-  const handlePageLimitChange = (pageLimit: number) => {
-    pagination.limit = pageLimit;
-    fetchData();
-  };
-
-  // 切换页码
-  const handlePageValueChange = (pageValue: number) => {
-    pagination.current = pageValue;
-    fetchData();
-  };
-
-  onMounted(() => {
-    const searchParams = getSearchParams();
-    if (Number(searchParams.viewId)) {
-      modelValue.value = Number(route.query.viewId);
-      stretchLayoutSplitScreen();
-    }
-  });
-</script>
-<style lang="less">
-  .ticket-list-table-mode {
-    padding: 16px 24px;
-
-    .header-action-box {
-      display: flex;
-      margin-bottom: 16px;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/ticket-self-manage/components/detail/Index.vue b/dbm-ui/frontend/src/views/ticket-self-manage/components/detail/Index.vue
deleted file mode 100644
index 5a73955647..0000000000
--- a/dbm-ui/frontend/src/views/ticket-self-manage/components/detail/Index.vue
+++ /dev/null
@@ -1,243 +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>
-  <ScrollFaker v-if="isStretchLayoutSplited">
-    <BkLoading
-      class="ticket-details-page"
-      :loading="isLoading"
-      style="min-height: calc(100vh - 104px - var(--notice-height))">
-      <PermissionCatch :key="ticketId">
-        <SmartAction :offset-target="getOffsetTarget">
-          <template v-if="ticketData">
-            <BaseInfo :ticket-data="ticketData" />
-            <Teleport
-              :disabled="!isFullscreen"
-              to="body">
-              <DbCard
-                v-model:collapse="demandCollapse"
-                :class="{ 'tickets-main-is-fullscreen': isFullscreen }"
-                mode="collapse"
-                :title="t('需求信息')">
-                <DemandInfo :data="ticketData" />
-                <div class="ticket-details-item">
-                  <span class="ticket-details-item-label">{{ t('备注') }}：</span>
-                  <span class="ticket-details-item-value">{{ ticketData.remark || '--' }}</span>
-                </div>
-              </DbCard>
-            </Teleport>
-            <DbCard
-              class="ticket-flows"
-              mode="collapse"
-              :title="t('实施进度')">
-              <FlowInfo
-                ref="flowInfoRef"
-                :data="ticketData"
-                @refresh="handleRefreshTicketData" />
-            </DbCard>
-          </template>
-          <template
-            v-if="ticketData"
-            #action>
-            <TicketClone :data="ticketData" />
-          </template>
-        </SmartAction>
-      </PermissionCatch>
-    </BkLoading>
-  </ScrollFaker>
-</template>
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import { getTicketDetails } from '@services/source/ticket';
-
-  import { useStretchLayout } from '@hooks';
-
-  import PermissionCatch from '@components/apply-permission/Catch.vue';
-
-  import TicketClone from '@views/tickets/common/components/TicketClone.vue';
-  import BaseInfo from '@views/tickets/my-tickets/components/details/components/BaseInfo.vue';
-  import DemandInfo from '@views/tickets/my-tickets/components/details/components/Demand.vue';
-  import FlowInfo from '@views/tickets/my-tickets/components/details/components/flow/Index.vue';
-
-  import { useTimeoutFn } from '@vueuse/core';
-
-  interface Props {
-    ticketId: number;
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-  const route = useRoute();
-  const { isSplited: isStretchLayoutSplited } = useStretchLayout();
-
-  const getOffsetTarget = () => document.body.querySelector('.ticket-details-page .db-card');
-
-  const isFullscreen = ref<boolean>(Boolean(route.query.isFullscreen));
-  const demandCollapse = ref(false);
-  const isLoading = ref(true);
-  const flowInfoRef = ref<InstanceType<typeof FlowInfo>>();
-
-  const { runAsync: fetchTicketDetails, data: ticketData } = useRequest(
-    (params: ServiceParameters<typeof getTicketDetails>) =>
-      getTicketDetails(params, {
-        permission: 'catch',
-      }),
-    {
-      onSuccess(_, params) {
-        if (params[0].id !== props.ticketId) {
-          return;
-        }
-        loopFetchTicketDetails();
-      },
-    },
-  );
-
-  const { start: loopFetchTicketDetails } = useTimeoutFn(() => {
-    fetchTicketDetails({
-      id: props.ticketId,
-    });
-  }, 10000);
-
-  watch(
-    () => props.ticketId,
-    () => {
-      if (props.ticketId) {
-        isLoading.value = true;
-        ticketData.value = undefined;
-        fetchTicketDetails({
-          id: props.ticketId,
-        }).finally(() => {
-          isLoading.value = false;
-        });
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  watch(
-    isFullscreen,
-    () => {
-      if (isFullscreen.value) {
-        demandCollapse.value = true;
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const exitFullscreen = (e: KeyboardEvent) => {
-    if (e.keyCode === 27) {
-      isFullscreen.value = false;
-    }
-  };
-
-  const handleRefreshTicketData = () => {
-    fetchTicketDetails({
-      id: props.ticketId,
-    });
-  };
-
-  onMounted(() => {
-    window.addEventListener('keydown', exitFullscreen);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', exitFullscreen);
-  });
-</script>
-
-<style lang="less">
-  @import '@views/tickets/common/styles/ticketDetails.less';
-
-  .ticket-details-page {
-    padding: 24px;
-    font-size: 12px;
-    background: #f5f7fa;
-
-    .db-card {
-      .db-card__content {
-        padding-left: 82px;
-      }
-
-      & ~ .db-card {
-        margin-top: 16px;
-      }
-    }
-
-    .bk-timeline {
-      padding-bottom: 16px;
-
-      .bk-timeline-title {
-        font-size: @font-size-mini;
-        font-weight: bold;
-        color: @title-color;
-      }
-
-      .bk-timeline-dot {
-        &::before {
-          display: none;
-        }
-
-        .bk-timeline-icon {
-          color: unset !important;
-          background: white !important;
-          border: none !important;
-        }
-      }
-
-      .bk-timeline-content {
-        max-width: unset;
-        font-size: @font-size-mini;
-        color: @default-color;
-
-        .flow-time {
-          padding-top: 8px;
-          color: @gray-color;
-        }
-      }
-    }
-
-    .ticket-flows {
-      margin-bottom: 20px;
-
-      .flow-todo__title {
-        padding-bottom: 12px;
-        font-weight: bold;
-      }
-    }
-
-    .ticket-flow-content {
-      .ticket-flow-content-desc {
-        padding: 8px 0 24px;
-        font-size: @font-size-mini;
-        color: @title-color;
-      }
-
-      .ticket-flow-content-buttons {
-        text-align: right;
-
-        .bk-button {
-          min-width: 62px;
-          margin-left: 8px;
-          font-size: @font-size-mini;
-        }
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/TicketClone.vue b/dbm-ui/frontend/src/views/tickets/common/components/TicketClone.vue
deleted file mode 100644
index f80fe8d7d1..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/TicketClone.vue
+++ /dev/null
@@ -1,183 +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 v-show="isShowTicketClone">
-    <BkButton
-      class="mr-8"
-      disabled
-      theme="primary"
-      @click="handleCancelTicket">
-      {{ t('撤销单据') }}
-    </BkButton>
-    <BkButton @click="handleResubmitTicket">
-      {{ t('再次提单') }}
-    </BkButton>
-  </div>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-  import { useRouter } from 'vue-router';
-
-  import TicketModel, { type Redis } from '@services/model/ticket/ticket';
-
-  import { ClusterTypes, TicketTypes } from '@common/const';
-
-  interface Props {
-    data: TicketModel<unknown>;
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-  const router = useRouter();
-
-  const ticketTypeRouteNameMap: Record<string, string> = {
-    [TicketTypes.REDIS_CLUSTER_APPLY]: 'SelfServiceApplyRedis', // Redis 申请部署
-    [TicketTypes.REDIS_CLUSTER_CUTOFF]: 'RedisDBReplace', // Redis 整机替换
-    [TicketTypes.REDIS_PROXY_SCALE_UP]: 'RedisProxyScaleUp', // Redis 扩容接入层
-    [TicketTypes.REDIS_PROXY_SCALE_DOWN]: 'RedisProxyScaleDown', // Redis 缩容接入层
-    [TicketTypes.REDIS_SCALE_UPDOWN]: 'RedisCapacityChange', // Redis 集群容量变更
-    [TicketTypes.REDIS_MASTER_SLAVE_SWITCH]: 'RedisMasterFailover', // Redis 主从切换
-    [TicketTypes.REDIS_DATA_STRUCTURE]: 'RedisDBStructure', // Redis 定点构造
-    [TicketTypes.REDIS_CLUSTER_ADD_SLAVE]: 'RedisDBCreateSlave', // Redis 重建从库
-    [TicketTypes.REDIS_CLUSTER_DATA_COPY]: 'RedisDBDataCopy', // Redis 数据复制
-    [TicketTypes.REDIS_CLUSTER_SHARD_NUM_UPDATE]: 'RedisClusterShardUpdate', // Redis 集群分片变更
-    [TicketTypes.REDIS_CLUSTER_TYPE_UPDATE]: 'RedisClusterTypeUpdate', // Redis 集群类型变更
-    [TicketTypes.REDIS_DATACOPY_CHECK_REPAIR]: 'RedisToolboxDataCheckRepair', // Redis 数据校验修复
-    [TicketTypes.REDIS_CLUSTER_ROLLBACK_DATA_COPY]: 'RedisRecoverFromInstance', // Redis 以构造实例恢复
-    [TicketTypes.REDIS_DATA_STRUCTURE_TASK_DELETE]: 'RedisStructureInstance', // Redis 删除构造任务
-    [TicketTypes.REDIS_KEYS_EXTRACT]: 'DatabaseRedisList', // Redis 提取 Key
-    [TicketTypes.REDIS_KEYS_DELETE]: 'DatabaseRedisList', // Redis 删除 key
-    [TicketTypes.REDIS_BACKUP]: 'DatabaseRedisList', // Redis 集群备份
-    [TicketTypes.REDIS_PURGE]: 'DatabaseRedisList', // Redis 集群清档
-    [TicketTypes.REDIS_PROXY_CLOSE]: 'DatabaseRedisList', // Redis 集群禁用
-    [TicketTypes.REDIS_PROXY_OPEN]: 'DatabaseRedisList', // Redis 集群启用
-    [TicketTypes.REDIS_DESTROY]: 'DatabaseRedisList', // Redis 集群删除
-    [TicketTypes.REDIS_PLUGIN_DNS_BIND_CLB]: 'DatabaseRedisList', // Redis 绑定CLB
-    [TicketTypes.REDIS_PLUGIN_DNS_UNBIND_CLB]: 'DatabaseRedisList', // Redis 解绑CLB
-    [TicketTypes.REDIS_PLUGIN_CREATE_CLB]: 'DatabaseRedisList', // Redis 创建CLB
-    [TicketTypes.REDIS_PLUGIN_DELETE_CLB]: 'DatabaseRedisList', // Redis 删除CLB
-    [TicketTypes.REDIS_PLUGIN_CREATE_POLARIS]: 'DatabaseRedisList', // Redis 删除构造任务
-    [TicketTypes.REDIS_PLUGIN_DELETE_POLARIS]: 'DatabaseRedisList', // Redis 删除构造任务
-    [TicketTypes.MYSQL_SINGLE_APPLY]: 'SelfServiceApplySingle', // Mysql 单节点部署
-    [TicketTypes.MYSQL_HA_APPLY]: 'SelfServiceApplyHa', // Mysql 主从部署
-    [TicketTypes.MYSQL_EXCEL_AUTHORIZE_RULES]: '', // Mysql excel 授权
-    [TicketTypes.MYSQL_AUTHORIZE_RULES]: 'PermissionRules', // Mysql 授权
-    [TicketTypes.MYSQL_HA_DISABLE]: 'DatabaseTendbha', // Mysql 禁用
-    [TicketTypes.MYSQL_HA_ENABLE]: 'DatabaseTendbha', // Mysql 启用
-    [TicketTypes.MYSQL_HA_DESTROY]: 'DatabaseTendbha', // Mysql 删除
-    [TicketTypes.MYSQL_SINGLE_DISABLE]: 'DatabaseTendbsingle', // Mysql 单节点禁用
-    [TicketTypes.MYSQL_SINGLE_ENABLE]: 'DatabaseTendbsingle', // Mysql 单节点启用
-    [TicketTypes.MYSQL_SINGLE_DESTROY]: 'DatabaseTendbsingle', // Mysql 单节点删除
-    [TicketTypes.MYSQL_INSTANCE_CLONE_RULES]: 'MySQLPrivilegeCloneInst', // Mysql DB实例权限克隆
-    [TicketTypes.MYSQL_CLIENT_CLONE_RULES]: 'MySQLPrivilegeCloneClient', // Mysql 客户端权限克隆
-    [TicketTypes.MYSQL_RESTORE_LOCAL_SLAVE]: 'MySQLSlaveRebuild', // Mysql 重建从库
-    [TicketTypes.MYSQL_HA_RENAME_DATABASE]: 'MySQLDBRename', // Mysql DB重命名
-    [TicketTypes.MYSQL_SINGLE_RENAME_DATABASE]: 'MySQLDBRename', // Mysql DB重命名
-    [TicketTypes.MYSQL_ADD_SLAVE]: 'MySQLSlaveAdd', // Mysql 添加从库
-    [TicketTypes.MYSQL_HA_TRUNCATE_DATA]: 'MySQLDBClear', // Mysql 高可用清档
-    [TicketTypes.MYSQL_SINGLE_TRUNCATE_DATA]: 'MySQLDBClear', // Mysql 单节点清档
-    [TicketTypes.MYSQL_CHECKSUM]: 'MySQLChecksum', // Mysql 数据校验修复
-    [TicketTypes.MYSQL_PROXY_SWITCH]: 'MySQLProxyReplace', // Mysql 替换Proxy
-    [TicketTypes.MYSQL_HA_DB_TABLE_BACKUP]: 'MySQLDBTableBackup', // Mysql 库表备份
-    [TicketTypes.MYSQL_MIGRATE_CLUSTER]: 'MySQLMasterSlaveClone', // Mysql 迁移主从
-    [TicketTypes.MYSQL_MASTER_SLAVE_SWITCH]: 'MySQLMasterSlaveSwap', // Mysql 主从互切
-    [TicketTypes.MYSQL_PROXY_ADD]: 'MySQLProxyAdd', // Mysql 添加Proxy
-    [TicketTypes.MYSQL_MASTER_FAIL_OVER]: 'MySQLMasterFailover', // Mysql 主库故障切换
-    [TicketTypes.MYSQL_IMPORT_SQLFILE]: 'MySQLExecute', // Mysql 变更SQL执行
-    [TicketTypes.MYSQL_FLASHBACK]: 'MySQLDBFlashback', // Mysql 闪回
-    [TicketTypes.MYSQL_ROLLBACK_CLUSTER]: 'MySQLDBRollback', // Mysql 定点构造
-    [TicketTypes.MYSQL_RESTORE_SLAVE]: 'MySQLSlaveRebuild', // Mysql 重建从库
-    [TicketTypes.MYSQL_HA_FULL_BACKUP]: 'MySQLDBBackup', // Mysql 全库备份
-    [TicketTypes.MYSQL_OPEN_AREA]: 'MySQLOpenareaTemplate', // Mysql 新建开区
-    [TicketTypes.MYSQL_DATA_MIGRATE]: 'MySQLDataMigrate', // Mysql DB克隆
-    [TicketTypes.MYSQL_PROXY_UPGRADE]: 'MySQLVersionUpgrade', // MySQL Proxy 升级
-    [TicketTypes.MYSQL_LOCAL_UPGRADE]: 'MySQLVersionUpgrade', // MySQL 原地升级
-    [TicketTypes.MYSQL_MIGRATE_UPGRADE]: 'MySQLVersionUpgrade', // MySQL 迁移升级
-    [TicketTypes.TENDBCLUSTER_OPEN_AREA]: 'spiderOpenareaTemplate', // Spider 开区
-    [TicketTypes.REDIS_VERSION_UPDATE_ONLINE]: 'RedisVersionUpgrade', // redis 版本升级
-    [TicketTypes.SQLSERVER_DATA_MIGRATE]: 'sqlServerDataMigrate', // sqlserver 数据迁移
-    [TicketTypes.SQLSERVER_CLEAR_DBS]: 'sqlServerDBClear', // sqlserver 清档
-    [TicketTypes.SQLSERVER_DBRENAME]: 'sqlServerDBRename', // sqlserver DB重命名
-    [TicketTypes.SQLSERVER_BACKUP_DBS]: 'SqlServerDbBackup', // sqlserver 库备份
-    [TicketTypes.SQLSERVER_MASTER_FAIL_OVER]: 'sqlServerMasterFailover', // sqlserver 主库故障切换
-    [TicketTypes.SQLSERVER_MASTER_SLAVE_SWITCH]: 'sqlServerMasterSlaveSwap', // sqlserver 主从互切
-    [TicketTypes.SQLSERVER_ROLLBACK]: 'sqlServerDBRollback', // sqlserver 定点构造
-    [TicketTypes.SQLSERVER_ADD_SLAVE]: 'sqlServerSlaveAdd', // sqlserver 添加从库
-    [TicketTypes.SQLSERVER_RESTORE_SLAVE]: 'sqlServerSlaveRebuild', // sqlserver 重建从库_新机重建
-    [TicketTypes.SQLSERVER_RESTORE_LOCAL_SLAVE]: 'sqlServerSlaveRebuild', // sqlserver 重建从库_原地重建
-    [TicketTypes.SQLSERVER_IMPORT_SQLFILE]: 'sqlServerExecute', // sqlserver 变更SQL执行
-    [TicketTypes.SQLSERVER_FULL_MIGRATE]: 'sqlServerDataMigrate', // sqlserver 全库迁移
-    [TicketTypes.SQLSERVER_INCR_MIGRATE]: 'sqlServerDataMigrate', // sqlserver 增量迁移
-    [TicketTypes.TENDBCLUSTER_APPLY]: 'spiderApply', // spider 集群部署
-    [TicketTypes.TENDBCLUSTER_SPIDER_ADD_NODES]: 'SpiderProxyScaleUp', // Spider扩容接入层
-    [TicketTypes.TENDBCLUSTER_SPIDER_REDUCE_NODES]: 'SpiderProxyScaleDown', // Spider缩容接入层
-    [TicketTypes.TENDBCLUSTER_SPIDER_SLAVE_APPLY]: 'SpiderProxySlaveApply', // Spider 部署只读接入层
-    [TicketTypes.TENDBCLUSTER_SPIDER_MNT_APPLY]: 'spiderAddMnt', // Spider 添加运维节点
-    [TicketTypes.TENDBCLUSTER_MASTER_SLAVE_SWITCH]: 'spiderMasterSlaveSwap', // Spider remote 主从切换
-    [TicketTypes.TENDBCLUSTER_RENAME_DATABASE]: 'spiderDbRename', // Spider Tendbcluster 重命名
-    [TicketTypes.TENDBCLUSTER_MASTER_FAIL_OVER]: 'spiderMasterFailover', // Spider remote主故障切换
-    [TicketTypes.TENDBCLUSTER_DB_TABLE_BACKUP]: 'spiderDbTableBackup', // Spider TenDBCluster 库表备份
-    [TicketTypes.TENDBCLUSTER_FULL_BACKUP]: 'spiderDbBackup', // Spider TenDBCluster 全备单据
-    [TicketTypes.TENDBCLUSTER_NODE_REBALANCE]: 'spiderCapacityChange', // Spider 集群remote节点扩缩容
-    [TicketTypes.TENDBCLUSTER_ROLLBACK_CLUSTER]: 'spiderRollback', // Spider 定点回档
-    [TicketTypes.TENDBCLUSTER_FLASHBACK]: 'spiderFlashback', // Spider 闪回
-    [TicketTypes.TENDBCLUSTER_TRUNCATE_DATABASE]: 'spiderDbClear', // Spider tendbcluster 清档
-    [TicketTypes.TENDBCLUSTER_CHECKSUM]: 'spiderChecksum', // Spider checksum
-    [TicketTypes.TENDBCLUSTER_CLIENT_CLONE_RULES]: 'spiderPrivilegeCloneClient', // Spider 客户端权限克隆
-    [TicketTypes.TENDBCLUSTER_INSTANCE_CLONE_RULES]: 'spiderPrivilegeCloneInst', // Spider DB 实例权限克隆
-    [TicketTypes.TENDBCLUSTER_AUTHORIZE_RULES]: 'spiderPermission',
-    [TicketTypes.TENDBCLUSTER_IMPORT_SQLFILE]: 'spiderSqlExecute', // Spider SQL变更执行
-    [TicketTypes.TENDBCLUSTER_MIGRATE_CLUSTER]: 'spiderMasterSlaveClone', // spider 迁移主从
-    [TicketTypes.TENDBCLUSTER_RESTORE_LOCAL_SLAVE]: 'spiderSlaveRebuild', // spider 重建从库-原地重建
-    [TicketTypes.TENDBCLUSTER_RESTORE_SLAVE]: 'spiderSlaveRebuild', // spider 重建从库-新机重建
-  };
-
-  const isShowTicketClone = computed(() => !!ticketTypeRouteNameMap[props.data.ticket_type]);
-
-  const handleResubmitTicket = async () => {
-    let name = '';
-    if (
-      [
-        TicketTypes.REDIS_KEYS_EXTRACT,
-        TicketTypes.REDIS_KEYS_DELETE,
-        TicketTypes.REDIS_BACKUP,
-        TicketTypes.REDIS_PURGE,
-      ].includes(props.data.ticket_type)
-    ) {
-      const clusterInfo = Object.values((props.data.details as Redis.RedisRollbackDataCopyDetails).clusters)[0];
-      if (clusterInfo.cluster_type === ClusterTypes.REDIS_INSTANCE) {
-        name = 'DatabaseRedisHaList';
-      } else {
-        name = 'DatabaseRedisList';
-      }
-    } else {
-      name = ticketTypeRouteNameMap[props.data.ticket_type];
-    }
-    if (name) {
-      const { href } = router.resolve({
-        name,
-        query: {
-          ticketId: props.data.id,
-          ticketType: props.data.ticket_type,
-        },
-      });
-      window.open(href.replace(/^\/(\d+)/, `/${props.data.bk_biz_id}`));
-    }
-  };
-
-  const handleCancelTicket = () => {
-    console.log('接口未准备好');
-  };
-</script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
deleted file mode 100644
index a4be879f43..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
+++ /dev/null
@@ -1,530 +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>
-  <Component
-    :is="detailsComp"
-    :key="data.id"
-    :ticket-details="data" />
-</template>
-
-<script setup lang="tsx">
-  import _ from 'lodash';
-  import type { RouteRecordRaw } from 'vue-router';
-
-  import TicketModel from '@services/model/ticket/ticket';
-
-  import { TicketTypes } from '@common/const';
-
-  import DetailsClusterOperation from './bigdata/DetailsClusterOperation.vue';
-  import DetailDoris from './bigdata/DetailsDoris.vue';
-  import DetailsES from './bigdata/DetailsES.vue';
-  import DetailsHDFS from './bigdata/DetailsHDFS.vue';
-  import DetailsInfluxDB from './bigdata/DetailsInfluxDB.vue';
-  import DetailsKafka from './bigdata/DetailsKafka.vue';
-  import DetailsPulsar from './bigdata/DetailsPulsar.vue';
-  import DetailRiak from './bigdata/DetailsRiak.vue';
-  import BigDataExpansionCapacity from './bigdata/expansion-capacity/Index.vue';
-  import BigDataReboot from './bigdata/Reboot.vue';
-  import BigDataReplace from './bigdata/Replace.vue';
-  import RiakExpansionCapacity from './bigdata/RiakExpansionCapacity.vue';
-  import RiakReboot from './bigdata/RiakReboot.vue';
-  import DefaultDetails from './Default.vue';
-  import InfluxdbOperations from './influxdb/Operations.vue';
-  import InfluxdbReplace from './influxdb/Replace.vue';
-  import MongoAuthrizeRules from './mongodb/AuthorizeRules.vue';
-  import MongoCapacityChange from './mongodb/CapacityChange.vue';
-  import MongoDbBackup from './mongodb/DbBackup.vue';
-  import MongoDbClear from './mongodb/DbClear.vue';
-  import MongoDBReplace from './mongodb/DBReplace.vue';
-  import MongoDbStruct from './mongodb/DbStruct.vue';
-  import MongoDbTableBackup from './mongodb/DbTableBackup.vue';
-  import MongoDetailsClusterOperation from './mongodb/DetailsClusterOperation.vue';
-  import DetailsMongoDBReplicaSet from './mongodb/DetailsMongoDBReplicaSet.vue';
-  import DetailsMongoDBSharedCluster from './mongodb/DetailsMongoDBSharedCluster.vue';
-  import MongoProxyScaleDown from './mongodb/ProxyScaleDown.vue';
-  import MongoProxyScaleUp from './mongodb/ProxyScaleUp.vue';
-  import MongoScriptExecute from './mongodb/script-execute/Index.vue';
-  import MongoShardScaleDown from './mongodb/ShardScaleDown.vue';
-  import MongoShardScaleUp from './mongodb/ShardScaleUp.vue';
-  import MongoTemporaryDestrot from './mongodb/TemporaryDestrot.vue';
-  import MySQLAccountRuleChange from './mysql/account-rule-change/Index.vue';
-  import MySQLAuthorizeRule from './mysql/authorize-rule/Index.vue';
-  import MySQLChecksum from './mysql/Checksum.vue';
-  import MySQLClone from './mysql/Clone.vue';
-  import MySQLClusterOperation from './mysql/ClusterOperation.vue';
-  import MySQLDataMigrate from './mysql/DataMigrate.vue';
-  import DetailsMySQL from './mysql/Details.vue';
-  import DumperInstall from './mysql/DumperInstall.vue';
-  import DumperNodeStatusUpdate from './mysql/DumperNodeStatusUpdate.vue';
-  import DumperSwitchNode from './mysql/DumperSwitchNode.vue';
-  import MysqlExportData from './mysql/ExportData.vue';
-  import MySQLFlashback from './mysql/Flashback.vue';
-  import MySQLFullBackup from './mysql/FullBackup.vue';
-  import MySQLHATruncate from './mysql/HATruncate.vue';
-  import MySQLImportSQLFile from './mysql/import-sql-file/Index.vue';
-  import MySQLMasterFailOver from './mysql/MasterFailOver.vue';
-  import MySQLMasterSlaveSwitch from './mysql/MasterSlaveSwitch.vue';
-  import MySQLMigrateCluster from './mysql/MigrateCluster.vue';
-  import MysqlOpenArea from './mysql/openarea/Index.vue';
-  import MysqlParition from './mysql/Partition.vue';
-  import MySQLProxyReplace from './mysql/proxy-replace/Index.vue';
-  import MySQLProxyAdd from './mysql/ProxyAdd.vue';
-  import MySQLRename from './mysql/Rename.vue';
-  import MySQLRestoreLocalSlave from './mysql/RestoreLocalSlave.vue';
-  import MySQLRestoreSlave from './mysql/RestoreSlave.vue';
-  import MySQLRollback from './mysql/rollback/Index.vue';
-  import MySQLAddSlave from './mysql/SlaveAdd.vue';
-  import MySQLTableBackup from './mysql/TableBackup.vue';
-  import MySQLVerisonLocalUpgrade from './mysql/version-upgrade/VersionLocalUpgrade.vue';
-  import MySQLVerisonMigrateUpgrade from './mysql/version-upgrade/VersionMigrateUpgrade.vue';
-  import MySQLVerisonProxyUpgrade from './mysql/version-upgrade/VersionProxyUpgrade.vue';
-  import RedisAddSlave from './redis/AddSlave.vue';
-  import CLBDetail from './redis/CLBDetail.vue';
-  import RedisClusterCapacityUpdate from './redis/ClusterCapacityUpdate.vue';
-  import RedisClusterShardUpdate from './redis/ClusterShardUpdate.vue';
-  import RedisClusterTypeUpdate from './redis/ClusterTypeUpdate.vue';
-  import RedisDataCheckAndRepair from './redis/DataCheckAndRepair.vue';
-  import RedisDataCopy from './redis/DataCopy.vue';
-  import RedisDataStructure from './redis/DataStructure.vue';
-  import RedisDBReplace from './redis/DBReplace.vue';
-  import DetailsRedis from './redis/Details.vue';
-  import DetailsRedisHa from './redis/DetailsHa.vue';
-  import RedisHaClusterOperation from './redis/HaClusterOperation.vue';
-  import RedisInstallModule from './redis/InstallModule.vue';
-  import RedisMasterFailover from './redis/MasterFailover.vue';
-  import RedisOperation from './redis/Operation.vue';
-  import RedisProxyScaleDown from './redis/ProxyScaleDown.vue';
-  import RedisProxyScaleUp from './redis/ProxyScaleUp.vue';
-  import RedisRollbackDataCopy from './redis/RollbackDataCopy.vue';
-  import RedisStructureDelete from './redis/StructureDelete.vue';
-  import RedisVersionUpgrade from './redis/VersionUpgrade.vue';
-  import SpiderAccountRuleChange from './spider/AccountRuleChange.vue';
-  import SpiderAddNodes from './spider/AddNodes.vue';
-  import SpiderAuthorizeRules from './spider/AuthorizeRules.vue';
-  import SpiderCheckSum from './spider/CheckSum.vue';
-  import SpiderDestroy from './spider/Destroy.vue';
-  import DetailsSpider from './spider/Details.vue';
-  import SpiderDisable from './spider/Disable.vue';
-  import SpiderEnable from './spider/Enable.vue';
-  import SpiderFlashback from './spider/Flashback.vue';
-  import SpiderFullBackup from './spider/FullBackup.vue';
-  import SpiderMasterFailOver from './spider/MasterFailOver.vue';
-  import SpiderMasterSlaveSwitch from './spider/MasterSlaveSwitch.vue';
-  import SpiderMigrateCluster from './spider/MigrateCluster.vue';
-  import SpiderMNTApply from './spider/MNTApply.vue';
-  import SpiderMNTDestroy from './spider/MNTDestroy.vue';
-  import SpiderNodeRebalance from './spider/NodeRebalance.vue';
-  import SpiderReduceNodes from './spider/ReduceNodes.vue';
-  import SpiderRenameDatabase from './spider/RenameDatabase.vue';
-  import SpiderRollback from './spider/rollback/Index.vue';
-  import SpiderSlaveApply from './spider/SlaveApply.vue';
-  import SpiderSlaveDestroy from './spider/SlaveDestroy.vue';
-  import SpiderSlaveRebuild from './spider/SlaveRebuild.vue';
-  import SpiderTableBackup from './spider/TableBackup.vue';
-  import SpiderTruncateDatabase from './spider/TruncateDatabase.vue';
-
-  interface Props {
-    data: TicketModel<unknown>;
-  }
-
-  const props = defineProps<Props>();
-
-  const sqlserverDetailModule = import.meta.glob<{ default: () => RouteRecordRaw[] }>('./sqlserver/*.vue', {
-    eager: true,
-  });
-
-  const mysqlTicketType = [TicketTypes.MYSQL_AUTHORIZE_RULES, TicketTypes.MYSQL_EXCEL_AUTHORIZE_RULES];
-
-  const mysqlTruncateDataTypes = [TicketTypes.MYSQL_HA_TRUNCATE_DATA, TicketTypes.MYSQL_SINGLE_TRUNCATE_DATA];
-
-  const mysqlApplyTypes = [TicketTypes.MYSQL_SINGLE_APPLY, TicketTypes.MYSQL_HA_APPLY];
-
-  const mysqlClusterTicketType = [
-    TicketTypes.MYSQL_HA_DISABLE,
-    TicketTypes.MYSQL_SINGLE_DISABLE,
-    TicketTypes.MYSQL_HA_ENABLE,
-    TicketTypes.MYSQL_SINGLE_ENABLE,
-    TicketTypes.MYSQL_HA_DESTROY,
-    TicketTypes.MYSQL_SINGLE_DESTROY,
-  ];
-
-  const dumperNodeStatusUpdateType = [TicketTypes.TBINLOGDUMPER_DISABLE_NODES, TicketTypes.TBINLOGDUMPER_ENABLE_NODES];
-
-  const redisKeysType = [
-    TicketTypes.REDIS_KEYS_EXTRACT,
-    TicketTypes.REDIS_KEYS_DELETE,
-    TicketTypes.REDIS_BACKUP,
-    TicketTypes.REDIS_PURGE,
-  ];
-
-  const clusterTicketType = [
-    TicketTypes.REDIS_PROXY_CLOSE,
-    TicketTypes.REDIS_PROXY_OPEN,
-    TicketTypes.REDIS_DESTROY,
-    TicketTypes.ES_DISABLE,
-    TicketTypes.ES_DESTROY,
-    TicketTypes.ES_ENABLE,
-    TicketTypes.HDFS_ENABLE,
-    TicketTypes.HDFS_DISABLE,
-    TicketTypes.HDFS_DESTROY,
-    TicketTypes.KAFKA_ENABLE,
-    TicketTypes.KAFKA_DISABLE,
-    TicketTypes.KAFKA_DESTROY,
-    TicketTypes.PULSAR_ENABLE,
-    TicketTypes.PULSAR_DISABLE,
-    TicketTypes.PULSAR_DESTROY,
-    TicketTypes.RIAK_CLUSTER_DISABLE,
-    TicketTypes.RIAK_CLUSTER_ENABLE,
-    TicketTypes.RIAK_CLUSTER_DESTROY,
-    TicketTypes.DORIS_DISABLE,
-    TicketTypes.DORIS_ENABLE,
-    TicketTypes.DORIS_DESTROY,
-  ];
-
-  // const sqlserverApplyTiketType = [TicketTypes.SQLSERVER_SINGLE_APPLY, TicketTypes.SQLSERVER_HA_APPLY];
-
-  // const sqlserverClusterTicketType = [
-  //   TicketTypes.SQLSERVER_DISABLE,
-  //   TicketTypes.SQLSERVER_ENABLE,
-  //   TicketTypes.SQLSERVER_DESTROY,
-  // ];
-
-  const bigDataReplaceType = [
-    TicketTypes.ES_REPLACE,
-    TicketTypes.HDFS_REPLACE,
-    TicketTypes.KAFKA_REPLACE,
-    TicketTypes.PULSAR_REPLACE,
-    TicketTypes.DORIS_REPLACE,
-  ];
-
-  const spiderSlaveType = [TicketTypes.TENDBCLUSTER_RESTORE_LOCAL_SLAVE, TicketTypes.TENDBCLUSTER_RESTORE_SLAVE];
-
-  const bigDataRebootType = [
-    TicketTypes.HDFS_REBOOT,
-    TicketTypes.ES_REBOOT,
-    TicketTypes.KAFKA_REBOOT,
-    TicketTypes.PULSAR_REBOOT,
-    TicketTypes.DORIS_REBOOT,
-  ];
-
-  const bigDataCapacityType = [
-    TicketTypes.ES_SCALE_UP,
-    TicketTypes.ES_SHRINK,
-    TicketTypes.HDFS_SCALE_UP,
-    TicketTypes.HDFS_SHRINK,
-    TicketTypes.KAFKA_SCALE_UP,
-    TicketTypes.KAFKA_SHRINK,
-    TicketTypes.PULSAR_SHRINK,
-    TicketTypes.PULSAR_SCALE_UP,
-    TicketTypes.DORIS_SHRINK,
-    TicketTypes.DORIS_SCALE_UP,
-  ];
-
-  const riakCapacityType = [TicketTypes.RIAK_CLUSTER_SCALE_IN, TicketTypes.RIAK_CLUSTER_SCALE_OUT];
-
-  const clones = [
-    TicketTypes.MYSQL_CLIENT_CLONE_RULES,
-    TicketTypes.MYSQL_INSTANCE_CLONE_RULES,
-    TicketTypes.TENDBCLUSTER_CLIENT_CLONE_RULES,
-    TicketTypes.TENDBCLUSTER_INSTANCE_CLONE_RULES,
-  ];
-
-  const influxdbTypes = [
-    TicketTypes.INFLUXDB_DISABLE,
-    TicketTypes.INFLUXDB_REBOOT,
-    TicketTypes.INFLUXDB_ENABLE,
-    TicketTypes.INFLUXDB_DESTROY,
-  ];
-
-  const spiderAuthorizeRulesTypes = [
-    TicketTypes.TENDBCLUSTER_AUTHORIZE_RULES,
-    TicketTypes.TENDBCLUSTER_EXCEL_AUTHORIZE_RULES,
-  ];
-
-  const importSQLTypes = [
-    TicketTypes.MYSQL_IMPORT_SQLFILE,
-    TicketTypes.TENDBCLUSTER_IMPORT_SQLFILE,
-    TicketTypes.TENDBCLUSTER_FORCE_IMPORT_SQLFILE,
-    TicketTypes.MYSQL_FORCE_IMPORT_SQLFILE,
-  ];
-
-  const redisCLBTypes = [
-    TicketTypes.REDIS_PLUGIN_DNS_BIND_CLB,
-    TicketTypes.REDIS_PLUGIN_DNS_UNBIND_CLB,
-    TicketTypes.REDIS_PLUGIN_CREATE_CLB,
-    TicketTypes.REDIS_PLUGIN_DELETE_CLB,
-  ];
-
-  const mongoClusterOprationTypes = [
-    TicketTypes.MONGODB_ENABLE,
-    TicketTypes.MONGODB_DISABLE,
-    TicketTypes.MONGODB_DESTROY,
-  ];
-
-  const mongoAuthorizeRulesTypes = [TicketTypes.MONGODB_AUTHORIZE_RULES, TicketTypes.MONGODB_EXCEL_AUTHORIZE];
-
-  // const sqlserverAuthorizeRulesTypes = [
-  //   TicketTypes.SQLSERVER_AUTHORIZE_RULES,
-  //   TicketTypes.SQLSERVER_EXCEL_AUTHORIZE_RULES,
-  // ];
-
-  const redisHaOperationTypes = [
-    TicketTypes.REDIS_INSTANCE_CLOSE,
-    TicketTypes.REDIS_INSTANCE_OPEN,
-    TicketTypes.REDIS_INSTANCE_DESTROY,
-  ];
-
-  const openareaTypes = [TicketTypes.MYSQL_OPEN_AREA, TicketTypes.TENDBCLUSTER_OPEN_AREA];
-
-  const dataExportTypes = [TicketTypes.MYSQL_DUMP_DATA, TicketTypes.TENDBCLUSTER_DUMP_DATA];
-
-  // 单一情况映射表
-  const SingleDemandMap = {
-    [TicketTypes.ES_APPLY]: DetailsES,
-    [TicketTypes.HDFS_APPLY]: DetailsHDFS,
-    [TicketTypes.INFLUXDB_APPLY]: DetailsInfluxDB,
-    [TicketTypes.INFLUXDB_REPLACE]: InfluxdbReplace,
-    [TicketTypes.KAFKA_APPLY]: DetailsKafka,
-    [TicketTypes.MYSQL_PROXY_SWITCH]: MySQLProxyReplace,
-    [TicketTypes.MYSQL_HA_DB_TABLE_BACKUP]: MySQLTableBackup,
-    [TicketTypes.MYSQL_MIGRATE_CLUSTER]: MySQLMigrateCluster,
-    [TicketTypes.MYSQL_PROXY_ADD]: MySQLProxyAdd,
-    [TicketTypes.MYSQL_MASTER_FAIL_OVER]: MySQLMasterFailOver,
-    [TicketTypes.MYSQL_FLASHBACK]: MySQLFlashback,
-    [TicketTypes.MYSQL_ROLLBACK_CLUSTER]: MySQLRollback,
-    [TicketTypes.MYSQL_RESTORE_SLAVE]: MySQLRestoreSlave,
-    [TicketTypes.MYSQL_RESTORE_LOCAL_SLAVE]: MySQLRestoreLocalSlave,
-    [TicketTypes.MYSQL_HA_FULL_BACKUP]: MySQLFullBackup,
-    [TicketTypes.MYSQL_CHECKSUM]: MySQLChecksum,
-    [TicketTypes.MYSQL_ADD_SLAVE]: MySQLAddSlave,
-    [TicketTypes.MYSQL_DATA_MIGRATE]: MySQLDataMigrate,
-    [TicketTypes.MYSQL_MASTER_SLAVE_SWITCH]: MySQLMasterSlaveSwitch,
-    [TicketTypes.MYSQL_ACCOUNT_RULE_CHANGE]: MySQLAccountRuleChange,
-    [TicketTypes.TBINLOGDUMPER_INSTALL]: DumperInstall,
-    [TicketTypes.TBINLOGDUMPER_SWITCH_NODES]: DumperSwitchNode,
-    [TicketTypes.PULSAR_APPLY]: DetailsPulsar,
-    [TicketTypes.REDIS_CLUSTER_APPLY]: DetailsRedis,
-    [TicketTypes.REDIS_CLUSTER_CUTOFF]: RedisDBReplace,
-    [TicketTypes.REDIS_PROXY_SCALE_UP]: RedisProxyScaleUp,
-    [TicketTypes.REDIS_PROXY_SCALE_DOWN]: RedisProxyScaleDown,
-    [TicketTypes.REDIS_SCALE_UPDOWN]: RedisClusterCapacityUpdate,
-    [TicketTypes.REDIS_MASTER_SLAVE_SWITCH]: RedisMasterFailover,
-    [TicketTypes.REDIS_DATA_STRUCTURE]: RedisDataStructure,
-    [TicketTypes.REDIS_DATA_STRUCTURE_TASK_DELETE]: RedisStructureDelete,
-    [TicketTypes.REDIS_CLUSTER_ADD_SLAVE]: RedisAddSlave,
-    [TicketTypes.REDIS_CLUSTER_DATA_COPY]: RedisDataCopy,
-    [TicketTypes.REDIS_CLUSTER_SHARD_NUM_UPDATE]: RedisClusterShardUpdate,
-    [TicketTypes.REDIS_CLUSTER_TYPE_UPDATE]: RedisClusterTypeUpdate,
-    [TicketTypes.REDIS_DATACOPY_CHECK_REPAIR]: RedisDataCheckAndRepair,
-    [TicketTypes.REDIS_CLUSTER_ROLLBACK_DATA_COPY]: RedisRollbackDataCopy,
-    [TicketTypes.REDIS_VERSION_UPDATE_ONLINE]: RedisVersionUpgrade,
-    [TicketTypes.REDIS_CLUSTER_LOAD_MODULES]: RedisInstallModule,
-    [TicketTypes.TENDBCLUSTER_APPLY]: DetailsSpider,
-    [TicketTypes.TENDBCLUSTER_SPIDER_ADD_NODES]: SpiderAddNodes,
-    [TicketTypes.TENDBCLUSTER_CHECKSUM]: SpiderCheckSum,
-    [TicketTypes.TENDBCLUSTER_DESTROY]: SpiderDestroy,
-    [TicketTypes.TENDBCLUSTER_DISABLE]: SpiderDisable,
-    [TicketTypes.TENDBCLUSTER_ENABLE]: SpiderEnable,
-    [TicketTypes.TENDBCLUSTER_MASTER_SLAVE_SWITCH]: SpiderMasterSlaveSwitch,
-    [TicketTypes.TENDBCLUSTER_MASTER_FAIL_OVER]: SpiderMasterFailOver,
-    [TicketTypes.TENDBCLUSTER_FLASHBACK]: SpiderFlashback,
-    [TicketTypes.TENDBCLUSTER_FULL_BACKUP]: SpiderFullBackup,
-    [TicketTypes.TENDBCLUSTER_SPIDER_MNT_APPLY]: SpiderMNTApply,
-    [TicketTypes.TENDBCLUSTER_SPIDER_MNT_DESTROY]: SpiderMNTDestroy,
-    [TicketTypes.TENDBCLUSTER_NODE_REBALANCE]: SpiderNodeRebalance,
-    [TicketTypes.TENDBCLUSTER_SPIDER_REDUCE_NODES]: SpiderReduceNodes,
-    [TicketTypes.TENDBCLUSTER_RENAME_DATABASE]: SpiderRenameDatabase,
-    [TicketTypes.TENDBCLUSTER_ROLLBACK_CLUSTER]: SpiderRollback,
-    [TicketTypes.TENDBCLUSTER_SPIDER_SLAVE_APPLY]: SpiderSlaveApply,
-    [TicketTypes.TENDBCLUSTER_SPIDER_SLAVE_DESTROY]: SpiderSlaveDestroy,
-    [TicketTypes.TENDBCLUSTER_DB_TABLE_BACKUP]: SpiderTableBackup,
-    [TicketTypes.TENDBCLUSTER_TRUNCATE_DATABASE]: SpiderTruncateDatabase,
-    [TicketTypes.TENDBCLUSTER_ACCOUNT_RULE_CHANGE]: SpiderAccountRuleChange,
-    [TicketTypes.RIAK_CLUSTER_APPLY]: DetailRiak,
-    [TicketTypes.RIAK_CLUSTER_REBOOT]: RiakReboot,
-    [TicketTypes.MONGODB_SHARD_APPLY]: DetailsMongoDBSharedCluster,
-    [TicketTypes.MONGODB_REPLICASET_APPLY]: DetailsMongoDBReplicaSet,
-    [TicketTypes.MONGODB_EXEC_SCRIPT_APPLY]: MongoScriptExecute,
-    [TicketTypes.MONGODB_ADD_SHARD_NODES]: MongoShardScaleUp,
-    [TicketTypes.MONGODB_REDUCE_SHARD_NODES]: MongoShardScaleDown,
-    [TicketTypes.MONGODB_REDUCE_MONGOS]: MongoProxyScaleDown,
-    [TicketTypes.MONGODB_BACKUP]: MongoDbTableBackup,
-    [TicketTypes.MONGODB_FULL_BACKUP]: MongoDbBackup,
-    [TicketTypes.MONGODB_REMOVE_NS]: MongoDbClear,
-    [TicketTypes.MONGODB_RESTORE]: MongoDbStruct,
-    [TicketTypes.MONGODB_CUTOFF]: MongoDBReplace,
-    [TicketTypes.MONGODB_SCALE_UPDOWN]: MongoCapacityChange,
-    [TicketTypes.MONGODB_ADD_MONGOS]: MongoProxyScaleUp,
-    [TicketTypes.MONGODB_TEMPORARY_DESTROY]: MongoTemporaryDestrot,
-    [TicketTypes.TENDBCLUSTER_MIGRATE_CLUSTER]: SpiderMigrateCluster,
-    [TicketTypes.REDIS_INS_APPLY]: DetailsRedisHa,
-    [TicketTypes.MYSQL_PROXY_UPGRADE]: MySQLVerisonProxyUpgrade,
-    [TicketTypes.MYSQL_LOCAL_UPGRADE]: MySQLVerisonLocalUpgrade,
-    [TicketTypes.MYSQL_MIGRATE_UPGRADE]: MySQLVerisonMigrateUpgrade,
-    [TicketTypes.DORIS_APPLY]: DetailDoris,
-  };
-
-  // 不同集群详情组件
-  const detailsComp = computed(() => {
-    const ticketType = props.data.ticket_type;
-
-    const renderModule = _.find(
-      Object.values(sqlserverDetailModule),
-      (moduleItem) => moduleItem.default.name === ticketType,
-    );
-
-    if (renderModule) {
-      return renderModule.default;
-    }
-
-    // M权限克隆
-    if (clones.includes(ticketType)) {
-      return MySQLClone;
-    }
-    // MySQL 清档
-    if (mysqlTruncateDataTypes.includes(ticketType)) {
-      return MySQLHATruncate;
-    }
-    // MySQL 重命名
-    if ([TicketTypes.MYSQL_HA_RENAME_DATABASE, TicketTypes.MYSQL_SINGLE_RENAME_DATABASE].includes(ticketType)) {
-      return MySQLRename;
-    }
-    // Redis、大数据启停删单据
-    if (clusterTicketType.includes(ticketType)) {
-      return DetailsClusterOperation;
-    }
-    // 大数据替换单据
-    if (bigDataReplaceType.includes(ticketType)) {
-      return BigDataReplace;
-    }
-    if (redisKeysType.includes(ticketType)) {
-      return RedisOperation;
-    }
-    if (mysqlTicketType.includes(ticketType)) {
-      return MySQLAuthorizeRule;
-    }
-    // influxdb 禁用/重启/启用/删除
-    if (influxdbTypes.includes(ticketType)) {
-      return InfluxdbOperations;
-    }
-    // 大数据实例重启
-    if (bigDataRebootType.includes(ticketType)) {
-      return BigDataReboot;
-    }
-    // MySQL 启停删
-    if (mysqlClusterTicketType.includes(ticketType)) {
-      return MySQLClusterOperation;
-    }
-    // 大数据扩缩容
-    if (bigDataCapacityType.includes(ticketType)) {
-      return BigDataExpansionCapacity;
-    }
-    // Riak 扩缩容
-    if (riakCapacityType.includes(ticketType)) {
-      return RiakExpansionCapacity;
-    }
-    // spider 授权规则
-    if (spiderAuthorizeRulesTypes.includes(ticketType)) {
-      return SpiderAuthorizeRules;
-    }
-    // SQL执行
-    if (importSQLTypes.includes(ticketType)) {
-      return MySQLImportSQLFile;
-    }
-    // redis CLB 相关
-    if (redisCLBTypes.includes(ticketType)) {
-      return CLBDetail;
-    }
-    // dumper 节点状态变更
-    if (dumperNodeStatusUpdateType.includes(ticketType)) {
-      return DumperNodeStatusUpdate;
-    }
-    // mongo 启停删
-    if (mongoClusterOprationTypes.includes(ticketType)) {
-      return MongoDetailsClusterOperation;
-    }
-    // mongo 授权
-    if (mongoAuthorizeRulesTypes.includes(ticketType)) {
-      return MongoAuthrizeRules;
-    }
-    // // SQLServer 申请
-    // if (sqlserverApplyTiketType.includes(ticketType)) {
-    //   return SqlserverDetails;
-    // }
-    // // SQLServer 启停删
-    // if (sqlserverClusterTicketType.includes(ticketType)) {
-    //   return SqlserverClusterOperation;
-    // }
-    // // SQLServer 授权
-    // if (sqlserverAuthorizeRulesTypes.includes(ticketType)) {
-    //   return SqlserverAuthrizeRules;
-    // }
-    // Spider 重建从库
-    if (spiderSlaveType.includes(ticketType)) {
-      return SpiderSlaveRebuild;
-    }
-    // Redis 主从集群启停删
-    if (redisHaOperationTypes.includes(ticketType)) {
-      return RedisHaClusterOperation;
-    }
-    // 开区
-    if (openareaTypes.includes(ticketType)) {
-      return MysqlOpenArea;
-    }
-    // mysql 部署
-    if (mysqlApplyTypes.includes(ticketType)) {
-      return DetailsMySQL;
-    }
-    if (ticketType in SingleDemandMap) {
-      return SingleDemandMap[ticketType as keyof typeof SingleDemandMap];
-    }
-    if ([TicketTypes.MYSQL_PARTITION, TicketTypes.TENDBCLUSTER_PARTITION].includes(ticketType)) {
-      return MysqlParition;
-    }
-    if (dataExportTypes.includes(ticketType)) {
-      return MysqlExportData;
-    }
-    if ([TicketTypes.MYSQL_RESTORE_LOCAL_SLAVE, TicketTypes.SQLSERVER_RESTORE_LOCAL_SLAVE].includes(ticketType)) {
-      return MySQLRestoreLocalSlave;
-    }
-    if ([TicketTypes.MYSQL_RESTORE_SLAVE, TicketTypes.SQLSERVER_RESTORE_SLAVE].includes(ticketType)) {
-      return MySQLRestoreSlave;
-    }
-
-    if ([TicketTypes.MYSQL_MASTER_SLAVE_SWITCH, TicketTypes.SQLSERVER_MASTER_SLAVE_SWITCH].includes(ticketType)) {
-      return MySQLMasterSlaveSwitch;
-    }
-
-    return DefaultDetails;
-  });
-</script>
-
-<style lang="less" scoped>
-  .ticket-details {
-    // padding: 24px;
-
-    .db-card {
-      margin-bottom: 16px;
-
-      .is-fullscreen {
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 9999;
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/components/info-list/InfoItem.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/components/info-list/InfoItem.vue
deleted file mode 100644
index a0efb8789e..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/components/info-list/InfoItem.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div class="db-ticket-info-item">
-    <div class="db-ticket-info-item-lable">{{ label }}</div>
-    <div class="db-ticket-info-item-value">
-      <slot />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  interface Props {
-    label: string;
-  }
-
-  defineProps<Props>();
-</script>
-<style lang="less">
-  .db-ticket-info-item {
-    flex: 0 0 50%;
-    display: flex;
-    align-items: flex-start;
-    min-height: 32px;
-    line-height: 32px;
-  }
-
-  .db-ticket-info-item-lable {
-    min-width: 140px;
-    padding-right: 4px;
-    line-height: 32px;
-    text-align: right;
-  }
-
-  .db-ticket-info-item-value {
-    overflow: hidden;
-    color: #313238;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-
-    & > .bk-vxe-table {
-      margin-top: 8px;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/FullBackup.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/FullBackup.vue
deleted file mode 100644
index ba569a8613..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/FullBackup.vue
+++ /dev/null
@@ -1,150 +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="ticket-details-list">
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ $t('所属业务') }}：</span>
-      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ $t('备份选项') }}：</span>
-      <span class="ticket-details-item-value">{{ backupOptions }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ $t('备份类型') }}：</span>
-      <span class="ticket-details-item-value">{{ backupType }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ $t('备份保存时间') }}：</span>
-      <span class="ticket-details-item-value">{{ backupTime }}</span>
-    </div>
-  </div>
-  <DbOriginalTable
-    :columns="columns"
-    :data="dataList" />
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-
-  import type { MySQLFullBackupDetails } from '@services/model/ticket/details/mysql';
-  import TicketModel from '@services/model/ticket/ticket';
-
-  interface Props {
-    ticketDetails: TicketModel<MySQLFullBackupDetails>
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  type fullBackupItem = {
-    immute_domain: string,
-    backup_local: string,
-    name: string,
-    cluster_id:number,
-  }
-
-  const { infos } = props.ticketDetails.details;
-  const isNewProtocol = Array.isArray(infos);
-
-  // MySQL 全库备份
-  const columns = [
-    // {
-    //   label: t('集群ID'),
-    //   field: 'cluster_id',
-    //   render: ({ cell }: { cell: number }) => <span>{cell || '--'}</span>,
-    // },
-    {
-      label: t('集群名称'),
-      field: 'immute_domain',
-      showOverflowTooltip: false,
-      render: ({ data }: { data: fullBackupItem }) => (
-      <div class="cluster-name text-overflow"
-        v-overflow-tips={{
-          content: `
-            <p>${t('域名')}：${data.immute_domain}</p>
-            ${data.name ? `<p>${('集群别名')}：${data.name}</p>` : null}
-          `,
-          allowHTML: true,
-      }}>
-        <span>{data.immute_domain}</span><br />
-        <span class="cluster-name__alias">{data.name}</span>
-      </div>
-    ),
-    },
-    {
-      label: t('备份位置'),
-      field: 'backup_local',
-      render: ({ cell }: { cell: number }) => <span>{cell || '--'}</span>,
-    },
-  ];
-
-  const fileTagMap: Record<string, string> = {
-    DBFILE1M: t('1个月'),
-    DBFILE6M: t('6个月'),
-    DBFILE1Y: t('1年'),
-    DBFILE3Y: t('3年'),
-  }
-
-  const dataList = computed(() => {
-    const clusters = props.ticketDetails.details.clusters || {};
-    return (isNewProtocol ? infos : infos.clusters).reduce((results, item) => {
-      const clusterData = clusters[item.cluster_id];
-      results.push(Object.assign({
-        immute_domain: clusterData?.immute_domain,
-        name: clusterData?.name,
-        backup_local: item.backup_local,
-        cluster_id: item.cluster_id,
-      }));
-      return results;
-    }, [] as fullBackupItem[]);
-  });
-
-  // 备份选项
-  const backupOptions = computed(() => {
-    const online = isNewProtocol ? props.ticketDetails.details.online : infos.online;
-    if (online) {
-      return t('在线备份');
-    }
-    return t('停机备份');
-  });
-
-  // 备份类型
-  const backupType = computed(() => {
-    const value = isNewProtocol ? props.ticketDetails.details.backup_type : infos.backup_type;
-    if (value === 'logical') {
-      return t('逻辑备份');
-    }
-    return t('物理备份');
-  });
-
-  // 备份保存时间
-  const backupTime = computed(() => {
-    const fileTag = isNewProtocol ? props.ticketDetails.details.file_tag : infos.file_tag;
-    if (!fileTagMap[fileTag]) {
-      // 兼容旧单据
-      if (fileTag === 'LONGDAY_DBFILE_3Y') {
-        return t('3年');
-      }
-      return t('30天');
-    }
-    return fileTagMap[fileTag];
-  });
-</script>
-
-<style lang="less" scoped>
-  @import '@views/tickets/common/styles/DetailsTable.less';
-  @import '@views/tickets/common/styles/ticketDetails.less';
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/authorize-rule/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/authorize-rule/Index.vue
deleted file mode 100644
index 877ea22ff3..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/authorize-rule/Index.vue
+++ /dev/null
@@ -1,111 +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="mysql-table">
-    <RenderTable
-      v-bind="props"
-      :data="data" />
-  </div>
-  <div
-    v-if="showExcel"
-    class="ticket-details-list">
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('Excel文件') }}：</span>
-      <span class="ticket-details-item-value">
-        <i class="db-icon-excel" />
-        <a :href="ticketDetails.details.excel_url">{{ t('批量授权文件') }} <i class="db-icon-import" /></a>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-
-  import type { MysqlAuthorizationDetails } from '@services/model/ticket/details/mysql';
-  import TicketModel from '@services/model/ticket/ticket';
-
-  import { AccountTypes, TicketTypes } from '@common/const';
-
-  import RenderTable from './components/RenderTable.vue';
-
-  interface Props {
-    ticketDetails: TicketModel<MysqlAuthorizationDetails>;
-    accountType?: AccountTypes.MYSQL | AccountTypes.TENDBCLUSTER;
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    accountType: AccountTypes.MYSQL,
-  });
-
-  const { t } = useI18n();
-
-  const showExcel = computed(() => props.ticketDetails.ticket_type === TicketTypes.MYSQL_EXCEL_AUTHORIZE_RULES);
-
-  const data = computed(() => {
-    // 导入授权
-    if (props.ticketDetails.ticket_type === TicketTypes.MYSQL_EXCEL_AUTHORIZE_RULES) {
-      return props.ticketDetails.details.authorize_data_list.map((item) => ({
-        ips: item.source_ips as string[],
-        user: item.user,
-        accessDbs: item.access_dbs,
-        clusterDomains: item.target_instances,
-        privileges: item.privileges,
-      }));
-    }
-
-    if (props.ticketDetails.ticket_type === TicketTypes.MYSQL_AUTHORIZE_RULES) {
-      const { authorize_data: authorizeData, authorize_plugin_infos: authorizePluginInfos } =
-        props.ticketDetails.details;
-      if (authorizePluginInfos) {
-        return authorizePluginInfos.map((item) => ({
-          ips: item.source_ips as string[],
-          user: item.user,
-          accessDbs: item.access_dbs,
-          clusterDomains: item.target_instances,
-          privileges: item.privileges,
-        }));
-      }
-      return [
-        {
-          ips: (authorizeData.source_ips as { ip: string }[]).map((item) => item.ip),
-          user: authorizeData.user,
-          accessDbs: authorizeData.access_dbs,
-          clusterDomains: authorizeData.target_instances,
-          privileges: authorizeData.privileges,
-        },
-      ];
-    }
-    return [];
-  });
-</script>
-
-<style lang="less" scoped>
-  @import '@views/tickets/common/styles/ticketDetails.less';
-
-  .mysql-table {
-    display: flex;
-
-    span {
-      display: inline;
-      width: 160px;
-      text-align: right;
-    }
-  }
-
-  .db-icon-excel {
-    margin-right: 5px;
-    color: #2dcb56;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/authorize-rule/components/RenderTable.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/authorize-rule/components/RenderTable.vue
deleted file mode 100644
index e6b7379ee3..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/authorize-rule/components/RenderTable.vue
+++ /dev/null
@@ -1,272 +0,0 @@
-<template>
-  <BkTable
-    class="preview-privilege-table"
-    :data="tableData">
-    <BkTableColumn
-      :label="t('访问源')"
-      :width="150">
-      <template #default="{ data }: { data: IDataRow }">
-        <div>
-          <p
-            v-for="(ip, index) in showAllIp ? data.ips : data.ips.slice(0, 10)"
-            :key="index">
-            {{ ip }}
-            <DbIcon
-              v-if="index === 0"
-              type="copy"
-              @click="() => handleCopyIps(data.ips)" />
-          </p>
-        </div>
-        <div v-if="data.ips.length > 10">
-          <BkTag size="small">
-            {{ t('共n个', [data.ips.length]) }}
-          </BkTag>
-          <BkButton
-            class="more-btn"
-            text
-            theme="primary"
-            @click="() => (showAllIp = !showAllIp)">
-            {{ showAllIp ? t('收起') : t('更多') }}
-          </BkButton>
-        </div>
-      </template>
-    </BkTableColumn>
-    <BkTableColumn
-      :label="t('集群域名')"
-      :width="250">
-      <template #default="{ data }: { data: IDataRow }">
-        <div class="cell-cluster">
-          <p
-            v-for="(item, index) in data.clusterDomains"
-            :key="index">
-            {{ item }}
-            <DbIcon
-              v-if="index === 0"
-              type="copy"
-              @click="() => handleCopyDomains(data.clusterDomains)" />
-          </p>
-        </div>
-      </template>
-    </BkTableColumn>
-    <BkTableColumn
-      field="user"
-      :label="t('账号')" />
-    <BkTableColumn
-      :label="t('访问DB')"
-      :width="150">
-      <template #default="{ data }: { data: IDataRow }">
-        <div>
-          <p
-            v-for="item in showAllDb ? data.accessDbs : data.accessDbs.slice(0, 10)"
-            :key="item"
-            class="mb-6">
-            <BkTag>
-              {{ item }}
-            </BkTag>
-          </p>
-        </div>
-        <div v-if="data.accessDbs.length > 10">
-          <BkTag size="small">
-            {{ t('共n个', [data.accessDbs.length]) }}
-          </BkTag>
-          <BkButton
-            class="more-btn"
-            text
-            theme="primary"
-            @click="() => (showAllDb = !showAllDb)">
-            {{ showAllDb ? t('收起') : t('更多') }}
-          </BkButton>
-        </div>
-      </template>
-    </BkTableColumn>
-    <BkTableColumn
-      :label="t('权限')"
-      :width="400">
-      <template #default="{ data }: { data: IDataRow }">
-        <div
-          v-for="(privilege, key) in userDbPrivilegeMap[`${data.user}#${data.accessDbs}`]"
-          :key="`${data.user}#${data.accessDbs}#${key}`">
-          <div
-            v-if="privilege.length"
-            class="cell-privilege">
-            <div style="font-weight: bold">{{ key === 'glob' ? t('全局') : key.toUpperCase() }} :</div>
-            <div class="cell-privilege-value">
-              <span
-                v-for="(item, index) in privilege"
-                :key="index"
-                class="cell-privilege-item">
-                {{ index !== 0 ? ',' : '' }}
-                {{ item }}
-                <span
-                  v-if="ddlSensitiveWordsMap[item]"
-                  class="sensitive-tip">
-                  {{ t('敏感') }}
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </template>
-    </BkTableColumn>
-  </BkTable>
-</template>
-
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  import { queryAccountRules } from '@services/source/mongodbPermissionAccount';
-  import type { AccountRulePrivilege, AuthorizePreCheckData } from '@services/types';
-
-  import { useCopy } from '@hooks';
-
-  import { AccountTypes } from '@common/const';
-
-  import configMap from '@views/db-manage/common/permission/components/mysql/config';
-
-  interface IDataRow {
-    ips: string[];
-    user: string;
-    accessDbs: string[];
-    clusterDomains: string[];
-    privileges?: AuthorizePreCheckData['privileges'];
-  }
-
-  interface Props {
-    accountType: AccountTypes.MYSQL | AccountTypes.TENDBCLUSTER;
-    data: IDataRow[];
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-  const copy = useCopy();
-
-  const showAllIp = ref(false);
-  const showAllDb = ref(false);
-  const tableData = shallowRef<IDataRow[]>([]);
-  const userDbPrivilegeMap = shallowRef<Record<string, AccountRulePrivilege>>({});
-
-  const ddlSensitiveWordsMap = computed(() =>
-    Object.fromEntries(configMap[props.accountType].ddlSensitiveWords.map((word) => [word, true])),
-  );
-
-  watch(
-    () => props.data,
-    () => {
-      tableData.value = props.data;
-
-      const { dbOperations: { ddl = [], dml = [], glob = [] } = {} } = configMap[props.accountType];
-
-      // 若权限快照存在
-      if (props.data[0].privileges?.length) {
-        userDbPrivilegeMap.value = props.data.reduce<Record<string, AccountRulePrivilege>>((acc, cur) => {
-          const { privileges } = cur;
-          privileges?.forEach((item) => {
-            const { user, access_db: accessDbs, priv } = item;
-            const privileageMap = new Set(priv.split(','));
-            acc[`${user}#${accessDbs}`] = {
-              ddl: ddl.filter((item) => privileageMap.has(item)),
-              dml: dml.filter((item) => privileageMap.has(item)),
-              glob: glob.filter((item) => privileageMap.has(item)),
-            };
-          });
-          return acc;
-        }, {});
-        return;
-      }
-
-      /**
-       * 兼容老数据
-       * 异步查询权限
-       */
-      Promise.all(
-        props.data.map(
-          ({ user, accessDbs }) =>
-            new Promise<Record<string, AccountRulePrivilege>>((resolve) => {
-              queryAccountRules({
-                user,
-                access_dbs: accessDbs,
-                account_type: props.accountType,
-              }).then(({ results }) => {
-                const privileageMap = new Set(results[0].rules.flatMap((item) => item.privilege.split(',')));
-                resolve({
-                  [`${user}#${accessDbs}`]: {
-                    ddl: ddl.filter((item) => privileageMap.has(item)),
-                    dml: dml.filter((item) => privileageMap.has(item)),
-                    glob: glob.filter((item) => privileageMap.has(item)),
-                  },
-                });
-              });
-            }),
-        ),
-      ).then((data) => {
-        userDbPrivilegeMap.value = data.reduce((acc, cur) => ({ ...acc, ...cur }), {});
-      });
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const handleCopyIps = (ips: string[]) => {
-    copy(ips.join('\n'));
-  };
-
-  const handleCopyDomains = (domains: string[]) => {
-    copy(domains.join('\n'));
-  };
-</script>
-
-<style lang="less" scoped>
-  .preview-privilege-table {
-    :deep(.cell) {
-      padding: 4px 16px !important;
-      line-height: 20px !important;
-
-      .db-icon-copy {
-        display: none;
-        color: @primary-color;
-        cursor: pointer;
-      }
-
-      .more-btn {
-        display: none;
-      }
-
-      &:hover {
-        .db-icon-copy,
-        .more-btn {
-          display: inline-block;
-        }
-      }
-
-      .cell-cluster {
-        line-height: 28px;
-      }
-
-      .cell-privilege {
-        display: flex;
-
-        .cell-privilege-value {
-          max-width: 350px;
-          margin-left: 6px;
-          word-wrap: break-word;
-          overflow-wrap: break-word;
-          white-space: normal;
-        }
-      }
-
-      .sensitive-tip {
-        height: 16px;
-        padding: 0 4px;
-        margin-left: 4px;
-        font-size: 10px;
-        line-height: 16px;
-        color: #fe9c00;
-        text-align: center;
-        background: #fff3e1;
-        border-radius: 2px;
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/import-sql-file/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/import-sql-file/Index.vue
deleted file mode 100644
index d3f4ada1e0..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/import-sql-file/Index.vue
+++ /dev/null
@@ -1,470 +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="ticket-details-list">
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('所属业务') }}：</span>
-      <span class="ticket-details-item-value">{{ ticketDetails.bk_biz_name }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('业务英文名') }}：</span>
-      <span class="ticket-details-item-value">{{ ticketDetails.db_app_abbr }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('SQL来源') }}：</span>
-      <span class="ticket-details-item-value">{{ importModeType }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('字符集') }}：</span>
-      <span class="ticket-details-item-value">{{ ticketDetails.details.charset }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('执行前备份') }}：</span>
-      <span class="ticket-details-item-value">{{ isBackup }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('执行模式') }}：</span>
-      <span class="ticket-details-item-value sql-mode-execute">
-        <i :class="ticketModeData.icon" />
-        <span v-bk-tooltips="ticketModeData.tips">{{ ticketModeData.text }}</span>
-      </span>
-    </div>
-    <div
-      v-if="ticketDetails.details.ticket_mode.trigger_time"
-      class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('执行时间') }}：</span>
-      <span class="ticket-details-item-value">{{ ticketDetails.details.ticket_mode.trigger_time }}</span>
-    </div>
-  </div>
-  <div class="mysql-table">
-    <div
-      v-if="clusterState.tableProps.data.length > 0"
-      class="mysql-table__item">
-      <span>{{ t('目标集群') }}：</span>
-      <DBCollapseTable
-        :show-icon="false"
-        style="width: 800px"
-        :table-props="clusterState.tableProps"
-        :title="clusterState.clusterType" />
-    </div>
-    <div class="mysql-table__item">
-      <span>{{ t('目标DB') }}：</span>
-      <DbOriginalTable
-        :columns="targetDB"
-        :data="ticketDetails.details.execute_objects"
-        style="width: 800px" />
-    </div>
-    <div
-      v-if="ticketDetails?.details?.backup?.length"
-      class="mysql-table__item">
-      <span>{{ t('备份设置') }}：</span>
-      <DbOriginalTable
-        :columns="backupConfig"
-        :data="backupList"
-        style="width: 800px" />
-    </div>
-  </div>
-  <BkSideslider
-    class="sql-log-sideslider"
-    :is-show="isShow"
-    render-directive="if"
-    :title="t('执行SQL变更_内容详情')"
-    :width="960"
-    @closed="handleClose">
-    <template
-      v-if="currentExecuteObject"
-      #header>
-      <span>{{ t('SQL 内容') }}</span>
-      <span style="margin-left: 30px; font-size: 12px; font-weight: normal; color: #63656e">
-        <span>{{ t('变更的 DB:') }}</span>
-        <span class="ml-4">
-          <BkTag
-            v-for="item in currentExecuteObject.dbnames.slice(0, 3)"
-            :key="item">
-            {{ item }}
-          </BkTag>
-          <BkTag
-            v-if="currentExecuteObject.dbnames.length > 3"
-            v-bk-tooltips="{
-              content: currentExecuteObject.dbnames.join('\n'),
-            }">
-            ...
-          </BkTag>
-          <template v-if="currentExecuteObject.dbnames.length < 1">--</template>
-        </span>
-        <span class="ml-25">{{ t('忽略的 DB:') }}</span>
-        <span class="ml-4">
-          <BkTag
-            v-for="item in currentExecuteObject.ignore_dbnames.slice(0, 3)"
-            :key="item">
-            {{ item }}
-          </BkTag>
-          <BkTag
-            v-if="currentExecuteObject.ignore_dbnames.length > 3"
-            v-bk-tooltips="{
-              content: currentExecuteObject.ignore_dbnames.join('\n'),
-            }">
-            ...
-          </BkTag>
-          <template v-if="currentExecuteObject.ignore_dbnames.length < 1">--</template>
-        </span>
-      </span>
-    </template>
-    <div
-      v-if="currentExecuteObject"
-      class="editor-layout">
-      <div class="editor-layout-left">
-        <RenderFileList
-          v-model="selectFileName"
-          :data="currentExecuteObject.sql_files" />
-      </div>
-      <div class="editor-layout-right">
-        <RenderFileContent
-          :model-value="currentFileContent"
-          readonly
-          :title="selectFileName" />
-      </div>
-    </div>
-  </BkSideslider>
-</template>
-
-<script setup lang="tsx">
-  import _ from 'lodash'
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request'
-
-  import type { MySQLImportSQLFileDetails } from '@services/model/ticket/details/mysql';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { batchFetchFile } from '@services/source/storage';
-
-  import { useDefaultPagination } from '@hooks';
-
-  import DBCollapseTable from '@components/db-collapse-table/DBCollapseTable.vue';
-
-  import { getSQLFilename} from '@utils'
-
-  import RenderFileContent from './components/RenderFileContent.vue';
-  import RenderFileList from './components/SqlFileList.vue';
-
-  interface Props {
-    ticketDetails: TicketModel<MySQLImportSQLFileDetails>
-  }
-
-  type backupDBItem = {
-    backup_on: string,
-    db_patterns: [],
-    table_patterns: [],
-  }
-
-  type RowData = MySQLImportSQLFileDetails['execute_objects'][number];
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  const selectFileName = ref('');
-  const currentExecuteObject = ref<RowData>();
-  const fileContentMap = shallowRef<Record<string, string>>({});
-  const isShow = ref(false);
-
-  const clusterState = reactive({
-    clusterType: '',
-    tableProps: {
-      data: [] as ValueOf<MySQLImportSQLFileDetails['clusters']>[],
-      pagination: useDefaultPagination(),
-      columns: [
-        {
-          label: t('集群'),
-          field: 'immute_domain',
-          showOverflowTooltip: true,
-          render: ({ cell }: { cell: string }) => <span>{cell || '--'}</span>,
-        },
-        {
-          label: t('类型'),
-          width: 220,
-          field: 'cluster_type',
-          render: ({ cell }: { cell: string }) => <span>{cell}</span>,
-        },
-        {
-          label: t('版本'),
-          field: 'major_version',
-          render: ({ cell }: { cell: string }) => <span>{cell || '--'}</span>,
-        },
-        {
-          label: t('状态'),
-          field: 'status',
-          render: ({ cell }: { cell: string }) => {
-            const text = cell === 'normal' ? t('正常') : t('异常');
-            const icon = cell === 'normal' ? 'normal' : 'abnormal';
-            return <span>
-            <db-icon svg type={icon} style="margin-right: 5px;" />
-            {text}
-          </span>;
-          },
-        },
-      ],
-    },
-  });
-
-  const uploadFileList = computed(() => _.flatten(props.ticketDetails.details.execute_objects.map(item => item.sql_files)))
-
-  const currentFileContent = computed(() => fileContentMap.value[selectFileName.value] || '');
-
-  // SQL 文件来源
-  const importModeType = computed(() => (props.ticketDetails.details.import_mode === 'manual' ? t('手动输入') : t('文件导入')));
-
-  // 执行前备份
-  const isBackup = computed(() => (props.ticketDetails.details.backup.length ? t('是') : t('否')));
-
-  // const isForceSql = computed(() => props.ticketDetails.ticket_type === TicketTypes.MYSQL_FORCE_IMPORT_SQLFILE);
-
-  const targetDB = [
-    {
-      label: t('变更的DB'),
-      field: 'dbnames',
-      showOverflowTooltip: {
-        content: (_: unknown, rowData: RowData) => rowData.ignore_dbnames.join(', '),
-        popoverOption: {
-          maxWidth: 1000,
-        }
-      },
-      render: ({ data }: { data: RowData }) => (
-        <>
-          {data.dbnames.map(item => (
-            <bk-tag key={item}>
-              {item}
-            </bk-tag>
-          ))}
-        </>
-      ),
-    },
-    {
-      label: t('忽略的DB'),
-      field: 'ignore_dbnames',
-      showOverflowTooltip: {
-        content: (_: unknown, rowData: RowData) => rowData.ignore_dbnames.join(', '),
-        popoverOption: {
-          maxWidth: 1000,
-        }
-      },
-      render: ({ data }: { data: RowData }) => data.ignore_dbnames.length > 0 ? (
-        <>
-          {data.ignore_dbnames.map(item => (
-            <bk-tag key={item}>
-              {item}
-            </bk-tag>
-          ))}
-        </>
-        ) : '--',
-    },
-    {
-      label: t('执行的 SQL'),
-      field: 'sql_files',
-      showOverflowTooltip: true,
-      render: ({ data }: { data: RowData }) => {
-        const firstFileName = data.sql_files[0];
-        const fileTotal = data.sql_files.length;
-
-        return (
-          <bk-button
-            text
-            theme="primary"
-            onClick={() => handleSelectFile(firstFileName, data)}>
-            {
-              fileTotal < 2 ? (
-                <>
-                  <db-icon
-                    style="color: #3a84ff; margin-right: 4px"
-                    type="file" />
-                  {getSQLFilename(firstFileName)}
-                </>
-              ) : t('n 个 SQL 文件', {n: fileTotal})
-            }
-          </bk-button>
-        )
-      },
-    },
-  ];
-
-  const backupConfig = [
-    {
-      label: t('备份DB'),
-      field: 'db_patterns',
-      showOverflowTooltip: false,
-      render: ({ cell }: { cell: string[] }) => (
-      <div class="text-overflow" v-overflow-tips={{
-          content: cell,
-        }}>
-        {cell.map(item => <bk-tag>{item}</bk-tag>)}
-      </div>
-    ),
-    },
-    {
-      label: t('备份表名'),
-      field: 'table_patterns',
-      showOverflowTooltip: false,
-      render: ({ cell }: { cell: string[] }) => (
-      <div class="text-overflow" v-overflow-tips={{
-          content: cell,
-        }}>
-        {cell.map(item => <bk-tag>{item}</bk-tag>)}
-      </div>
-    ),
-    },
-  ];
-
-  const ticketModeType = [
-    {
-      type: 'manual',
-      text: t('手动执行'),
-      icon: 'db-icon-manual',
-      tips: t('单据审批之后_需要人工确认方可执行'),
-    },
-    {
-      type: 'timer',
-      text: t('定时执行'),
-      icon: 'db-icon-timed-task',
-      tips: t('单据审批通过之后_定时执行_无需确认'),
-    },
-  ];
-
-  // 执行模式
-  const ticketModeData = computed(() => {
-    const modeType = props.ticketDetails.details.ticket_mode.mode;
-    let modeItem: any = {};
-    ticketModeType.forEach((item) => {
-      if (item.type === modeType) {
-        modeItem = item;
-      }
-    });
-    return modeItem;
-  });
-
-  // 备份设置
-  const backupList = computed(() => {
-    const list: backupDBItem[] = [];
-    const tableList = props.ticketDetails.details.backup || [];
-    tableList.forEach((item) => {
-      list.push(Object.assign({
-        backup_on: item.backup_on,
-        db_patterns: item.db_patterns,
-        table_patterns: item.table_patterns,
-      }));
-    });
-    return list;
-  });
-
-  const {run: runBatchFetchFile} = useRequest(() => {
-    const filePathList = uploadFileList.value.reduce<string[]>((result, item) => {
-      result.push(`${props.ticketDetails.details.path}/${item}`);
-      return result;
-    }, []);
-
-    return batchFetchFile({
-      file_path_list: filePathList,
-    })
-  }, {
-    manual: true,
-    onSuccess(result) {
-      fileContentMap.value = result.reduce<Record<string, string>>((result, fileInfo) => {
-        const fileName = fileInfo.path.split('/').pop() as string;
-        return Object.assign(result, {
-          [fileName]: fileInfo.content,
-        });
-      }, {});
-    }
-  })
-  const handleSelectFile = (filename: string, executeObject: RowData) => {
-    if (_.isEmpty(fileContentMap.value)){
-      runBatchFetchFile();
-    }
-
-    selectFileName.value = filename;
-    currentExecuteObject.value = executeObject;
-    isShow.value = true;
-  }
-
-  const handleClose = () => {
-    isShow.value = false;
-  };
-
-  // 目标集群
-  onBeforeMount(() => {
-    const { clusters } = props.ticketDetails.details
-    clusterState.tableProps.data = Object.values(clusters);
-    clusterState.tableProps.pagination.count = clusterState.tableProps.data.length;
-    clusterState.clusterType = clusterState.tableProps.data[0].cluster_type_name
-  });
-</script>
-
-<style lang="less" scoped>
-  @import '@views/tickets/common/styles/ticketDetails.less';
-
-  .sql-mode-execute {
-    i {
-      font-size: 16px;
-      vertical-align: middle;
-    }
-
-    span {
-      margin: 0 0 2px 2px;
-      border-bottom: 1px dashed #313238;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .mysql-table {
-    &__item {
-      display: flex;
-      margin-bottom: 20px;
-    }
-
-    span {
-      display: inline;
-      min-width: 160px;
-      text-align: right;
-    }
-  }
-
-  :deep(.bk-sideslider-content) {
-    padding: 15px;
-  }
-
-  .sql-log-sideslider {
-    .editor-layout {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      background: #2e2e2e;
-
-      .editor-layout-left {
-        width: 238px;
-      }
-
-      .editor-layout-right {
-        position: relative;
-        height: 100%;
-        flex: 1;
-      }
-    }
-  }
-
-  .tip-number {
-    display: inline-block;
-    font-weight: 700;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue
deleted file mode 100644
index 07787923b6..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/proxy-replace/components/ReplaceInstance.vue
+++ /dev/null
@@ -1,80 +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>
-  <DbOriginalTable
-    :columns="columns"
-    :data="tableData" />
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-
-  import type { MySQLProxySwitchDetails } from '@services/model/ticket/details/mysql';
-  import TicketModel from '@services/model/ticket/ticket';
-
-  interface Props {
-    ticketDetails: TicketModel<MySQLProxySwitchDetails>
-  }
-
-  interface RowData {
-    originProxy: string;
-    relatedClusters: string[];
-    targetProxy: string;
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  const columns = [
-    {
-      label: t('目标Proxy主机'),
-      field: 'originProxy',
-      minWidth: 150,
-      width: 220,
-    },
-    {
-      label: t('关联集群'),
-      field: 'relatedClusters',
-      width: 220,
-      render: ({ data }: { data: RowData }) => data.relatedClusters.map((item) => <p>{item}</p>),
-    },
-    {
-      label: t('新proxy主机'),
-      field: 'targetProxy',
-      minWidth: 150,
-      width: 220,
-    },
-  ];
-
-  const tableData = shallowRef<RowData[]>([]);
-
-  watch(
-    () => props.ticketDetails.details,
-    () => {
-      tableData.value = props.ticketDetails.details.infos.map(item => ({
-        originProxy: `${item.origin_proxy.ip}:${item.origin_proxy.port}`,
-        relatedClusters: item.display_info.related_clusters as string[],
-        targetProxy: item.target_proxy.ip,
-      }));
-    },
-    {
-      immediate: true
-    }
-  )
-</script>
-
-<style lang="less" scoped>
-  @import '@views/tickets/common/styles/DetailsTable.less';
-</style>
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
deleted file mode 100644
index c58684a6b9..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackExistCluster.vue
+++ /dev/null
@@ -1,164 +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>
-  <DbOriginalTable
-    :columns="columns"
-    :data="tableData" />
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-
-  import type { MySQLRollbackDetails } from '@services/model/ticket/details/mysql';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { queryClusters } from '@services/source/mysqlCluster';
-
-  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>
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  const columns = [
-    {
-      label: t('集群名称'),
-      field: 'cluster_name',
-      width: 220,
-      render: ({ cell }: { cell: string }) => <span>{ cell || '--' }</span>,
-    },
-    {
-      label: t('目标集群'),
-      field: 'target_cluster_name',
-      width: 220,
-      render: ({ cell }: { cell: string }) => <span>{ cell || '--' }</span>,
-    },
-    {
-      label: t('备份源'),
-      field: 'backup_source',
-      width: 100,
-      render: ({ cell }: { cell: BackupSources }) => <span>{ backupSourceList.find(item => item.value === cell)?.label || '--' }</span>,
-    },
-    {
-      label: t('回档类型'),
-      field: '',
-      width: 280,
-      render: ({ data }: { data: MySQLRollbackDetails['infos'][0] }) => {
-        if (data.rollback_time) {
-          return <span>{ t('回档到指定时间') } - { utcDisplayTime(data.rollback_time) }</span>;
-        }
-        if (data.backupinfo?.backup_time && data.backupinfo?.mysql_role) {
-          return <span>{ t('备份记录') } - { data.backupinfo?.mysql_role } { utcDisplayTime(data.backupinfo?.backup_time) }</span>;
-        }
-        return '--';
-      },
-    },
-    {
-      label: t('回档DB名'),
-      field: 'databases',
-      showOverflowTooltip: false,
-      render: ({ cell }: { cell: string[] }) => (
-        <div
-          class="text-overflow"
-          v-overflow-tips={{
-            content: cell,
-          }}>
-            { cell.map(item => <bk-tag>{ item }</bk-tag>) }
-        </div>
-      ),
-    },
-    {
-      label: t('忽略DB名'),
-      field: 'databases_ignore',
-      showOverflowTooltip: false,
-      render: ({ cell }: { cell: string[] }) => (
-        <div
-          class="text-overflow"
-          v-overflow-tips={{
-            content: cell,
-          }}>
-            { cell.length > 0 ? cell.map(item => <bk-tag>{ item }</bk-tag>) : '--' }
-        </div>
-      ),
-    },
-    {
-      label: t('回档表名'),
-      field: 'tables',
-      showOverflowTooltip: false,
-      render: ({ cell }: { cell: string[] }) => (
-        <div
-          class="text-overflow"
-          v-overflow-tips={{
-            content: cell,
-          }}>
-            { cell.map(item => <bk-tag>{ item }</bk-tag>) }
-        </div>
-      ),
-    },
-    {
-      label: t('忽略表名'),
-      field: 'tables_ignore',
-      showOverflowTooltip: false,
-      render: ({ cell }: { cell: string[] }) => (
-        <div
-          class="text-overflow"
-          v-overflow-tips={{
-            content: cell,
-          }}>
-            { cell.length > 0 ? cell.map(item => <bk-tag>{ item }</bk-tag>) : '--' }
-        </div>
-      ),
-    },
-  ];
-
-  const tableData = shallowRef<(MySQLRollbackDetails['infos'][number] & {
-    cluster_name: string;
-    target_cluster_name: string;
-  })[]>([]);
-
-  watch(
-    () => props.ticketDetails.details,
-    () => {
-      const { clusters, infos } = props.ticketDetails.details;
-      const targetClusterIds = infos.map(item => ({ id: item.target_cluster_id }));
-      queryClusters({
-        cluster_filters: targetClusterIds,
-        bk_biz_id: props.ticketDetails.bk_biz_id,
-      }).then((data) => {
-        const targetClusters = data.reduce<Record<number, string>>((acc, cur) => ({
-            ...acc,
-            [cur.id]: cur.immute_domain,
-          }), {});
-
-        tableData.value = infos.map(item => ({
-          ...item,
-          cluster_name: clusters[item.cluster_id].immute_domain,
-          target_cluster_name: targetClusters[item.target_cluster_id]
-        }));
-      })
-    },
-    {
-      immediate: true
-    }
-  )
-</script>
-
-<style lang="less" scoped>
-  @import '@views/tickets/common/styles/DetailsTable.less';
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/InstallModule.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/InstallModule.vue
deleted file mode 100644
index 4afa160649..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/InstallModule.vue
+++ /dev/null
@@ -1,48 +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>
-  <BkTable :data="ticketDetails.details.infos">
-    <BkTableColumn :label="t('源集群')">
-      <template #default="{ row }">
-        <span>{{ ticketDetails.details.clusters[row.cluster_id].immute_domain }}</span>
-      </template>
-    </BkTableColumn>
-    <BkTableColumn :label="t('架构版本')">
-      <template #default="{ row }">
-        <span>{{ ticketDetails.details.clusters[row.cluster_id].cluster_type_name }}</span>
-      </template>
-    </BkTableColumn>
-    <BkTableColumn
-      field="db_version"
-      :label="t('版本')" />
-    <BkTableColumn
-      field="load_modules"
-      label="Module" />
-  </BkTable>
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-
-  import type { RedisInstallModuleDetails } from '@services/model/ticket/details/redis';
-  import TicketModel from '@services/model/ticket/ticket';
-
-  interface Props {
-    ticketDetails: TicketModel<RedisInstallModuleDetails>;
-  }
-
-  defineProps<Props>();
-
-  const { t } = useI18n();
-</script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AccountRuleChange.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AccountRuleChange.vue
deleted file mode 100644
index adf91117d2..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AccountRuleChange.vue
+++ /dev/null
@@ -1,33 +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>
-  <AccountRuleChange
-    :account-type="AccountTypes.TENDBCLUSTER"
-    :ticket-details="ticketDetails" />
-</template>
-
-<script setup lang="ts">
-  import type { MySQLAccountRuleChangeDetails } from '@services/model/ticket/details/mysql';
-  import TicketModel from '@services/model/ticket/ticket';
-
-  import { AccountTypes } from '@common/const';
-
-  import AccountRuleChange from '@views/tickets/common/components/demand-factory/mysql/account-rule-change/Index.vue';
-
-  interface Props {
-    ticketDetails: TicketModel<MySQLAccountRuleChangeDetails>;
-  }
-
-  defineProps<Props>();
-</script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AddNodes.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AddNodes.vue
deleted file mode 100644
index 17994c4071..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AddNodes.vue
+++ /dev/null
@@ -1,115 +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>
-  <BkLoading :loading="loading">
-    <DbOriginalTable
-      :columns="columns"
-      :data="tableData" />
-  </BkLoading>
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import type { SpiderAddNodesDeatils } from '@services/model/ticket/details/spider';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { getResourceSpecList } from '@services/source/dbresourceSpec';
-  import { getTendbclusterListByBizId } from '@services/source/tendbcluster';
-
-  interface Props {
-    ticketDetails: TicketModel<SpiderAddNodesDeatils>
-  }
-
-  interface RowData {
-    clusterName: string,
-    clusterType: string,
-    nodeType: string,
-    sepc: {
-      id: number,
-      name: string,
-    },
-    targetNum: number,
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  // eslint-disable-next-line vue/no-setup-props-destructure
-  const { infos } = props.ticketDetails.details;
-  const tableData = ref<RowData[]>([]);
-
-  const columns = [
-    {
-      label: t('目标集群'),
-      field: 'clusterName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('扩容节点类型'),
-      field: 'nodeType',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('规格'),
-      field: 'sepc',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.sepc.name}</span>,
-    },
-    {
-      label: t('扩容数量'),
-      field: 'targetNum',
-    },
-  ];
-
-  const { loading } = useRequest(getTendbclusterListByBizId, {
-    defaultParams: [{
-      bk_biz_id: props.ticketDetails.bk_biz_id,
-      offset: 0,
-      limit: -1,
-    }],
-    onSuccess: async (r) => {
-      if (r.results.length < 1) {
-        return;
-      }
-
-      const clusterMap = r.results.reduce((obj, item) => {
-        Object.assign(obj, { [item.id]: {
-          clusterName: item.master_domain,
-          clusterType: item.cluster_spec.spec_cluster_type,
-        } });
-        return obj;
-      }, {} as Record<number, {clusterName: string, clusterType: string}>);
-      const specListResult = await getResourceSpecList({
-        spec_cluster_type: 'tendbcluster',
-        limit: -1,
-        offset: 0,
-      });
-      tableData.value = infos.map((item) => {
-        const specInfo = specListResult.results.find(row => row.spec_id === item.resource_spec.spider_ip_list.spec_id);
-        return {
-          clusterName: clusterMap[item.cluster_id].clusterName,
-          clusterType: clusterMap[item.cluster_id].clusterType,
-          nodeType: item.add_spider_role === 'spider_master' ? 'Master' : 'Slave',
-          sepc: {
-            id: item.resource_spec.spider_ip_list.spec_id,
-            name: specInfo ? specInfo.spec_name : '',
-          },
-          targetNum: item.resource_spec.spider_ip_list.count,
-        };
-      });
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AuthorizeRules.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AuthorizeRules.vue
deleted file mode 100644
index b4e8845970..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AuthorizeRules.vue
+++ /dev/null
@@ -1,220 +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 v-if="isAddAuth">
-    <div class="ticket-details-list">
-      <div class="ticket-details-item">
-        <span class="ticket-details-item-label">{{ t('访问源') }}：</span>
-        <span class="ticket-details-item-value">
-          <BkButton
-            text
-            theme="primary"
-            @click="handleAccessSource">
-            <strong>{{ authorizeData?.source_ips?.length || 0 }}</strong>
-          </BkButton>
-          <span>{{ t('台') }}</span>
-        </span>
-      </div>
-      <div class="ticket-details-item">
-        <span class="ticket-details-item-label">{{ t('目标集群') }}：</span>
-        <span class="ticket-details-item-value">
-          <BkButton
-            text
-            theme="primary"
-            @click="handleTargetCluster">
-            <strong>{{ authorizeData?.target_instances.length || 0 }}</strong>
-          </BkButton>
-          <span>{{ t('个') }}（{{ clusterType }}）</span>
-        </span>
-      </div>
-      <div class="ticket-details-item">
-        <span class="ticket-details-item-label">{{ t('账号名') }}：</span>
-        <span class="ticket-details-item-value">{{ authorizeData?.user || '--' }}</span>
-      </div>
-      <div class="ticket-details-item">
-        <span class="ticket-details-item-label">{{ t('访问DB') }}：</span>
-        <span>
-          <BkTag
-            v-for="(item, index) in authorizeData?.access_dbs || []"
-            :key="index">
-            {{ item }}
-          </BkTag>
-        </span>
-      </div>
-    </div>
-    <div class="table">
-      <span>{{ t('权限明细') }}：</span>
-      <DbOriginalTable
-        :columns="columns"
-        :data="tableData" />
-    </div>
-  </div>
-  <div v-else>
-    <div class="ticket-details-list">
-      <span>{{ t('Excel文件') }}：</span>
-      <div class="excel-link">
-        <DbIcon
-          color="#2dcb56"
-          svg
-          type="excel" />
-        <a :href="excelUrl">
-          {{ t('批量授权文件') }}
-          <DbIcon
-            svg
-            type="import" />
-        </a>
-      </div>
-    </div>
-  </div>
-  <HostPreview
-    v-model:is-show="previewAccessSourceShow"
-    :fetch-nodes="getHostInAuthorize"
-    :fetch-params="fetchNodesParams"
-    :title="t('访问源预览')" />
-  <TargetClusterPreview
-    v-model="previewTargetClusterShow"
-    :ticket-details="props.ticketDetails"
-    :title="t('目标集群预览')" />
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import type { MysqlAuthorizationDetails } from '@services/model/ticket/details/mysql';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { queryAccountRules } from '@services/source/mysqlPermissionAccount';
-  import { getHostInAuthorize } from '@services/source/ticket';
-
-  import {
-    AccountTypes,
-    ClusterTypes,
-    TicketTypes,
-  } from '@common/const';
-
-  import HostPreview from '@components/host-preview/HostPreview.vue';
-
-  import TargetClusterPreview from './TargetClusterPreview.vue';
-
-  interface IDataRow {
-    access_db: string;
-    privilege: string;
-  }
-
-  interface Props {
-    ticketDetails: TicketModel<MysqlAuthorizationDetails>
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  const columns = [
-    {
-      label: 'DB',
-      field: 'access_db',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('权限'),
-      field: 'privilege',
-      showOverflowTooltip: true,
-      render: ({ cell }: { cell: string }) => <span>{cell.replace(/,/g, '，') || '--'}</span>,
-    },
-  ];
-
-  const tableData = shallowRef<IDataRow[]>([]);
-
-  // 是否是添加授权
-  const isAddAuth = computed(() => props.ticketDetails?.ticket_type === TicketTypes.TENDBCLUSTER_AUTHORIZE_RULES);
-
-  // 区分集群类型
-  const clusterType = computed(() => {
-    if (props.ticketDetails?.details?.authorize_data?.cluster_type === ClusterTypes.TENDBHA) {
-      return t('主从');
-    }
-    return t('单节点');
-  });
-
-  const authorizeData = computed(() => props.ticketDetails?.details?.authorize_data);
-  const excelUrl = computed(() => props.ticketDetails?.details.excel_url);
-  const fetchNodesParams = computed(() => ({
-    bk_biz_id: props.ticketDetails.bk_biz_id,
-    ticket_id: props.ticketDetails.id,
-  }));
-
-  const {
-    run: queryAccountRulesRun,
-  } = useRequest(queryAccountRules, {
-    manual: true,
-    onSuccess: (data) => {
-      tableData.value = data.results[0]?.rules.map((item) => ({
-        access_db: item.access_db,
-        privilege: item.privilege,
-    }));
-    }
-  });
-
-  watch(() => props.ticketDetails.ticket_type, (data) => {
-    if (data === TicketTypes.TENDBCLUSTER_AUTHORIZE_RULES) {
-      const {
-        details,
-      } = props.ticketDetails;
-      if (details?.authorize_data?.privileges?.length) {
-        tableData.value = details?.authorize_data?.privileges.map((item) => ({
-          access_db: item.access_db,
-          privilege: item.priv,
-        }));
-        return;
-      }
-
-      const params = {
-        user: details?.authorize_data?.user,
-        access_dbs: details?.authorize_data?.access_dbs,
-        account_type: AccountTypes.TENDBCLUSTER,
-      };
-      queryAccountRulesRun(params);
-    }
-  }, { immediate: true, deep: true });
-
-  const previewAccessSourceShow = ref(false);
-  const previewTargetClusterShow = ref(false);
-
-  const handleAccessSource = () => {
-    previewAccessSourceShow.value = true;
-  };
-
-  const handleTargetCluster = () => {
-    previewTargetClusterShow.value = true;
-  };
-</script>
-
-<style lang="less" scoped>
-  @import '@views/tickets/common/styles/ticketDetails.less';
-
-  .table {
-    display: flex;
-
-    span {
-      display: inline;
-      min-width: 160px;
-      text-align: right;
-    }
-  }
-
-  .excel-link {
-    display: flex;
-    align-items: center;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/FullBackup.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/FullBackup.vue
deleted file mode 100644
index 4b18b97082..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/FullBackup.vue
+++ /dev/null
@@ -1,126 +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>
-  <DbOriginalTable
-    :columns="columns"
-    :data="tableData" />
-  <div class="ticket-details-list">
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('备份类型') }}：</span>
-      <span class="ticket-details-item-value">{{ backupType === 'physical' ? t('物理备份') : t('逻辑备份') }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('备份保存时间') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ backupTime }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import type { SpiderFullBackupDetails } from '@services/model/ticket/details/spider';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { getTendbclusterListByBizId } from '@services/source/tendbcluster';
-
-  interface Props {
-    ticketDetails: TicketModel<SpiderFullBackupDetails>;
-  }
-
-  interface RowData {
-    clusterName: string;
-    position: string;
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  const { infos } = props.ticketDetails.details;
-  const isNewProtocol = Array.isArray(infos);
-
-  const fileTagMap: Record<string, string> = {
-    DBFILE1M: t('1个月'),
-    DBFILE6M: t('6个月'),
-    DBFILE1Y: t('1年'),
-    DBFILE3Y: t('3年'),
-  };
-
-  const columns = [
-    {
-      label: t('目标集群'),
-      field: 'clusterName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('备份位置'),
-      field: 'position',
-      showOverflowTooltip: true,
-    },
-  ];
-
-  const tableData = ref<RowData[]>([]);
-
-  // 备份保存时间
-  const backupTime = computed(() => {
-    const fileTag = isNewProtocol ? props.ticketDetails.details.file_tag : infos.file_tag;
-    if (!fileTagMap[fileTag]) {
-      // 兼容旧单据
-      if (fileTag === 'LONGDAY_DBFILE_3Y') {
-        return t('3年');
-      }
-      return t('30天');
-    }
-    return fileTagMap[fileTag];
-  });
-
-  const backupType = isNewProtocol ? props.ticketDetails.details.backup_type : infos.backup_type;
-
-  useRequest(getTendbclusterListByBizId, {
-    defaultParams: [
-      {
-        bk_biz_id: props.ticketDetails.bk_biz_id,
-        offset: 0,
-        limit: -1,
-      },
-    ],
-    onSuccess: (r) => {
-      if (r.results.length < 1) {
-        return;
-      }
-      const clusterMap = r.results.reduce<Record<number, string>>((obj, item) => {
-        Object.assign(obj, { [item.id]: item.master_domain });
-        return obj;
-      }, {});
-      const backupLocalMap: Record<string, string> = {
-        master: 'RemoteDB',
-        slave: 'RemoteDR',
-      };
-      tableData.value = (isNewProtocol ? infos : infos.clusters).reduce<RowData[]>((results, item) => {
-        const obj = {
-          clusterName: clusterMap[item.cluster_id],
-          position: backupLocalMap[item.backup_local] || item.backup_local,
-        };
-        results.push(obj);
-        return results;
-      }, []);
-    },
-  });
-</script>
-<style lang="less" scoped>
-  @import '@views/tickets/common/styles/ticketDetails.less';
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.vue
deleted file mode 100644
index d23be696de..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.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>
-  <DbOriginalTable
-    :columns="columns"
-    :data="tableData" />
-  <div class="ticket-details-list">
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('数据校验') }}：</span>
-      <span class="ticket-details-item-value">{{ ticketDetails.details.need_checksum ? t('是') : t('否') }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('校验时间') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ isTimer ? t('定时执行') : t('立即执行') }}
-      </span>
-    </div>
-    <div
-      v-if="isTimer"
-      class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('定时执行时间') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ utcDisplayTime(ticketDetails.details.trigger_checksum_time) }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import type { SpiderNodeRebalanceDetails } from '@services/model/ticket/details/spider';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { getResourceSpecList } from '@services/source/dbresourceSpec';
-  import { getTendbclusterListByBizId } from '@services/source/tendbcluster';
-
-  import { utcDisplayTime } from '@utils';
-
-  interface Props {
-    ticketDetails: TicketModel<SpiderNodeRebalanceDetails>
-  }
-
-  interface RowData {
-    clusterName: string,
-    clusterType: string,
-    sepc: {
-      id: number,
-      name: string,
-    },
-    shardNum: number,
-    groupNum: number,
-    prev_machine_pair: number
-    prev_cluster_spec_name: string
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  const tableData = ref<RowData[]>([]);
-
-  const { infos } = props.ticketDetails.details;
-  const isTimer = props.ticketDetails.details.trigger_checksum_type === 'timer';
-  const columns = [
-    {
-      label: t('目标集群'),
-      field: 'clusterName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('集群分片数'),
-      field: 'shardNum',
-    },
-    {
-      label: t('当前机器组数'),
-      field: 'prev_machine_pair',
-    },
-    {
-      label: t('当前资源规格'),
-      field: 'prev_cluster_spec_name',
-    },
-    {
-      label: t('目标机器组数'),
-      field: 'groupNum',
-    },
-    {
-      label: t('目标资源规格'),
-      field: 'sepc',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.sepc.name}</span>,
-    },
-  ];
-
-  useRequest(getTendbclusterListByBizId, {
-    defaultParams: [{
-      bk_biz_id: props.ticketDetails.bk_biz_id,
-      offset: 0,
-      limit: -1,
-    }],
-    onSuccess: async (r) => {
-      if (r.results.length < 1) {
-        return;
-      }
-      const clusterMap = r.results.reduce<Record<number, {clusterName: string, clusterType: string}>>((obj, item) => {
-        Object.assign(obj, { [item.id]: {
-          clusterName: item.master_domain,
-          clusterType: item.cluster_spec.spec_cluster_type,
-        } });
-        return obj;
-      }, {});
-      const specListResult = await getResourceSpecList({
-        spec_cluster_type: 'tendbcluster',
-        limit: -1,
-        offset: 0,
-      });
-      tableData.value = infos.map((item) => {
-        const specInfo = specListResult.results.find(row => row.spec_id === item.resource_spec.backend_group.spec_id);
-        return {
-          clusterName: clusterMap[item.cluster_id].clusterName,
-          clusterType: clusterMap[item.cluster_id].clusterType,
-          shardNum: item.cluster_shard_num,
-          groupNum: item.resource_spec.backend_group.count,
-          sepc: {
-            id: item.resource_spec.backend_group.spec_id,
-            name: specInfo ? specInfo.spec_name : '',
-          },
-          prev_machine_pair: item.prev_machine_pair,
-          prev_cluster_spec_name: item.prev_cluster_spec_name
-        };
-      });
-    },
-  });
-</script>
-<style lang="less" scoped>
-  @import '@views/tickets/common/styles/ticketDetails.less';
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/ReduceNodes.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/ReduceNodes.vue
deleted file mode 100644
index 4b2ce09573..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/ReduceNodes.vue
+++ /dev/null
@@ -1,125 +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>
-  <BkLoading :loading="loading">
-    <DbOriginalTable
-      :columns="columns"
-      :data="tableData" />
-  </BkLoading>
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import type { SpiderReduceNodesDetails } from '@services/model/ticket/details/spider';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { getResourceSpecList } from '@services/source/dbresourceSpec';
-  import { getTendbclusterListByBizId } from '@services/source/tendbcluster';
-
-  interface Props {
-    ticketDetails: TicketModel<SpiderReduceNodesDetails>
-  }
-
-  interface RowData {
-    clusterName: string,
-    clusterType: string,
-    nodeType: string,
-    sepc: {
-      id: number,
-      name: string,
-    },
-    hostSelectType: string,
-    targetNum: number
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  const { infos } = props.ticketDetails.details;
-  const tableData = ref<RowData[]>([]);
-  const columns = [
-    {
-      label: t('目标集群'),
-      field: 'clusterName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('缩容节点类型'),
-      field: 'nodeType',
-      showOverflowTooltip: true,
-    },
-    // {
-    //   label: t('当前规格'),
-    //   field: 'sepc',
-    //   showOverflowTooltip: true,
-    //   render: ({ data }: {data: RowData}) => <span>{data.sepc.name}</span>,
-    // },
-    {
-      label: t('主机选择方式'),
-      field: 'hostSelectType',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => (
-        <div style="white-space: break-spaces; line-height: 18px">{data.hostSelectType}</div>
-      )
-    },
-    {
-      label: t('缩容数量（台）'),
-      field: 'targetNum',
-    },
-  ];
-
-  const { loading } = useRequest(getTendbclusterListByBizId, {
-    defaultParams: [{
-      bk_biz_id: props.ticketDetails.bk_biz_id,
-      offset: 0,
-      limit: -1,
-    }],
-    onSuccess: async (r) => {
-      if (r.results.length < 1) {
-        return;
-      }
-
-      const clusterMap = r.results.reduce((obj, item) => {
-        Object.assign(obj, { [item.id]: {
-          clusterName: item.master_domain,
-          clusterType: item.cluster_spec.spec_cluster_type,
-          specId: item.cluster_spec.spec_id,
-        } });
-        return obj;
-      }, {} as Record<number, {clusterName: string, clusterType: string, specId: number}>);
-      const specListResult = await getResourceSpecList({
-        spec_cluster_type: 'tendbcluster',
-        limit: -1,
-        offset: 0,
-      });
-      tableData.value = infos.map((item) => {
-        const specInfo = specListResult.results.find(row => row.spec_id === clusterMap[item.cluster_id].specId);
-        const ipList = (item.spider_reduced_hosts || []).map(item => item.ip)
-        return {
-          clusterName: clusterMap[item.cluster_id].clusterName,
-          clusterType: clusterMap[item.cluster_id].clusterType,
-          nodeType: item.reduce_spider_role === 'spider_master' ? 'Master' : 'Slave',
-          sepc: {
-            id: clusterMap[item.cluster_id].specId,
-            name: specInfo ? specInfo.spec_name : '',
-          },
-          hostSelectType: ipList.length > 0 ? ipList.join('\n') : t('自动匹配'),
-          targetNum: item.spider_reduced_to_count || ipList.length
-        };
-      });
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveApply.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveApply.vue
deleted file mode 100644
index a03a571cd7..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveApply.vue
+++ /dev/null
@@ -1,104 +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>
-  <BkLoading :loading="loading">
-    <DbOriginalTable
-      :columns="columns"
-      :data="tableData" />
-  </BkLoading>
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import type { SpiderSlaveApplyDetails } from '@services/model/ticket/details/spider';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { getResourceSpecList } from '@services/source/dbresourceSpec';
-  import { getTendbclusterListByBizId } from '@services/source/tendbcluster';
-
-  interface Props {
-    ticketDetails: TicketModel<SpiderSlaveApplyDetails>
-  }
-
-  interface RowData {
-    clusterName: string,
-    sepc: {
-      id: number,
-      name: string,
-    },
-    targetNum: number,
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  const { infos } = props.ticketDetails.details;
-  const tableData = ref<RowData[]>([]);
-
-  const columns = [
-    {
-      label: t('目标集群'),
-      field: 'clusterName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('规格'),
-      field: 'sepc',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.sepc.name}</span>,
-    },
-    {
-      label: t('部署台数'),
-      field: 'targetNum',
-    },
-  ];
-
-  const { loading } = useRequest(getTendbclusterListByBizId, {
-    defaultParams: [{
-      bk_biz_id: props.ticketDetails.bk_biz_id,
-      offset: 0,
-      limit: -1,
-    }],
-    onSuccess: async (r) => {
-      if (r.results.length < 1) {
-        return;
-      }
-      const clusterMap = r.results.reduce((obj, item) => {
-        Object.assign(obj, { [item.id]: {
-          clusterName: item.master_domain,
-          clusterType: item.cluster_spec.spec_cluster_type,
-        } });
-        return obj;
-      }, {} as Record<number, {clusterName: string, clusterType: string}>);
-      const specListResult = await getResourceSpecList({
-        spec_cluster_type: 'tendbcluster',
-        limit: -1,
-        offset: 0,
-      });
-      tableData.value = infos.map((item) => {
-        const specInfo = specListResult.results.find(row => row.spec_id === item.resource_spec.spider_slave_ip_list.spec_id);
-        return {
-          clusterName: clusterMap[item.cluster_id].clusterName,
-          sepc: {
-            id: item.resource_spec.spider_slave_ip_list.spec_id,
-            name: specInfo ? specInfo.spec_name : '',
-          },
-          targetNum: item.resource_spec.spider_slave_ip_list.count,
-        };
-      });
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/TableBackup.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/TableBackup.vue
deleted file mode 100644
index 74cd62d8f2..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/TableBackup.vue
+++ /dev/null
@@ -1,120 +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>
-  <BkLoading :loading="loading">
-    <DbOriginalTable
-      :columns="columns"
-      :data="tableData" />
-  </BkLoading>
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import type { SpiderTableBackupDetails } from '@services/model/ticket/details/spider';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { getTendbclusterListByBizId } from '@services/source/tendbcluster';
-
-  interface Props {
-    ticketDetails: TicketModel<SpiderTableBackupDetails>;
-  }
-
-  interface RowData {
-    clusterName: string;
-    position: string;
-    dbName: string;
-    tableName: string;
-    ignoreDbName: string;
-    ignoreTableName: string;
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  // eslint-disable-next-line vue/no-setup-props-destructure
-  const { infos } = props.ticketDetails.details;
-  const tableData = ref<RowData[]>([]);
-  const columns = [
-    {
-      label: t('目标集群'),
-      field: 'clusterName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('备份位置'),
-      field: 'position',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('备份DB名'),
-      field: 'dbName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('忽略DB名'),
-      field: 'ignoreDbName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('备份表名'),
-      field: 'tableName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('忽略表名'),
-      field: 'ignoreTableName',
-      showOverflowTooltip: true,
-    },
-  ];
-
-  const { loading } = useRequest(getTendbclusterListByBizId, {
-    defaultParams: [
-      {
-        bk_biz_id: props.ticketDetails.bk_biz_id,
-        offset: 0,
-        limit: -1,
-      },
-    ],
-    onSuccess: (r) => {
-      if (r.results.length < 1) {
-        return;
-      }
-      const clusterMap = r.results.reduce(
-        (obj, item) => {
-          Object.assign(obj, { [item.id]: item.master_domain });
-          return obj;
-        },
-        {} as Record<number, string>,
-      );
-      const backupLocalMap: Record<string, string> = {
-        remote: 'RemoteDR',
-      };
-
-      tableData.value = infos.reduce((results, item) => {
-        const obj = {
-          clusterName: clusterMap[item.cluster_id],
-          position: backupLocalMap[item.backup_local] || item.backup_local,
-          dbName: item.db_patterns.join(','),
-          tableName: item.table_patterns.join(','),
-          ignoreDbName: item.ignore_dbs.join(','),
-          ignoreTableName: item.ignore_tables.join(','),
-        };
-        results.push(obj);
-        return results;
-      }, [] as RowData[]);
-    },
-  });
-</script>
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
deleted file mode 100644
index c6edeee908..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/rollback/components/RollbackExistCluster.vue
+++ /dev/null
@@ -1,161 +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>
-  <DbOriginalTable
-    class="details-rollback__table"
-    :columns="columns"
-    :data="tableData" />
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-
-  import type { SpiderRollbackDetails } from '@services/model/ticket/details/spider';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { getTendbclusterListByBizId } from '@services/source/tendbcluster';
-
-  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<SpiderRollbackDetails>
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  const columns = [
-    {
-      label: t('集群名称'),
-      field: 'cluster_name',
-      width: 220,
-      render: ({ cell }: { cell: string }) => <span>{ cell || '--' }</span>,
-    },
-    {
-      label: t('目标集群'),
-      field: 'target_cluster_name',
-      width: 220,
-      render: ({ cell }: { cell: string }) => <span>{ cell || '--' }</span>,
-    },
-    {
-      label: t('备份源'),
-      field: 'backup_source',
-      width: 100,
-      render: ({ cell }: { cell: BackupSources }) => <span>{ backupSourceList.find(item=>item.value === cell)?.label || '--' }</span>,
-    },
-    {
-      label: t('回档类型'),
-      field: '',
-      width: 280,
-      render: ({ data }: { data: SpiderRollbackDetails['infos'][0] }) =>  {
-        if (data.rollback_time) {
-          return <span>{ t('回档到指定时间') } - { utcDisplayTime(data.rollback_time) }</span>;
-        }
-        if (data.backupinfo?.backup_time) {
-          return <span>{ t('备份记录') } - { utcDisplayTime(data.backupinfo?.backup_time) }</span>;
-        }
-        return '--';
-      },
-    },
-    {
-      label: t('回档DB名'),
-      field: 'databases',
-      showOverflowTooltip: false,
-      render: ({ cell }: { cell: string[] }) => (
-        <div
-          class="text-overflow"
-          v-overflow-tips={{
-            content: cell,
-          }}>
-            { cell.map(item => <bk-tag>{ item }</bk-tag>) }
-        </div>
-      ),
-    },
-    {
-      label: t('忽略DB名'),
-      field: 'databases_ignore',
-      showOverflowTooltip: false,
-      render: ({ cell }: { cell: string[] }) => (
-        <div
-          class="text-overflow"
-          v-overflow-tips={{
-            content: cell,
-          }}>
-            { cell.length > 0 ? cell.map(item => <bk-tag>{ item }</bk-tag>) : '--' }
-        </div>
-      ),
-    },
-    {
-      label: t('回档表名'),
-      field: 'tables',
-      showOverflowTooltip: false,
-      render: ({ cell }: { cell: string[] }) => (
-        <div
-          class="text-overflow"
-          v-overflow-tips={{
-            content: cell,
-          }}>
-            { cell.map(item => <bk-tag>{ item }</bk-tag>) }
-        </div>
-      ),
-    },
-    {
-      label: t('忽略表名'),
-      field: 'tables_ignore',
-      showOverflowTooltip: false,
-      render: ({ cell }: { cell: string[] }) => (
-        <div
-          class="text-overflow"
-          v-overflow-tips={{
-            content: cell,
-          }}>
-            { cell.length > 0 ? cell.map(item => <bk-tag>{ item }</bk-tag>) : '--' }
-        </div>
-      ),
-    },
-  ];
-
-  const tableData = shallowRef<(SpiderRollbackDetails['infos'][number] & {
-    cluster_name: string;
-    target_cluster_name: string;
-  })[]>([]);
-
-  watch(
-    () => props.ticketDetails.details,
-    () => {
-      const { clusters, infos } = props.ticketDetails.details;
-      const targetClusterIds = infos.map(item => item.target_cluster_id);
-      getTendbclusterListByBizId({
-        cluster_ids: targetClusterIds,
-        bk_biz_id: props.ticketDetails.bk_biz_id,
-      }).then((data) => {
-        const targetClusters = data.results.reduce<Record<number, string>>((acc, cur) => ({
-            ...acc,
-            [cur.id]: cur.master_domain,
-          }), {});
-
-        tableData.value = infos.map(item => ({
-          ...item,
-          cluster_name: clusters[item.cluster_id].immute_domain,
-          target_cluster_name: targetClusters[item.target_cluster_id]
-        }));
-      })
-    },
-    {
-      immediate: true
-    }
-  )
-</script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/flow-content/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/flow-content/Index.vue
deleted file mode 100644
index b196a46dfb..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/flow-content/Index.vue
+++ /dev/null
@@ -1,384 +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>
-  <template
-    v-if="
-      content.todos.length > 0 &&
-      content.flow_type === 'INNER_FLOW' &&
-      content.status === 'RUNNING' &&
-      content.todos.some((todoItem) => todoItem.type === 'RESOURCE_REPLENISH')
-    ">
-    <ManualConfirm
-      v-for="item in content.todos"
-      :key="item.id"
-      :content="content"
-      :data="item"
-      @processed="handleEmitFetchData" />
-  </template>
-  <template
-    v-else-if="
-      content.todos.length > 0 &&
-      ['TERMINATED', 'SUCCEEDED'].includes(content.status) &&
-      isTodos === false &&
-      !(content.flow_type === 'INNER_FLOW' && content.todos.every((todoItem) => todoItem.type !== 'RESOURCE_REPLENISH'))
-    ">
-    <FlowContentTodo
-      v-for="item of content.todos"
-      :key="item.id"
-      :content="content"
-      :data="item"
-      href-target="_blank" />
-  </template>
-  <template v-else-if="isPause && isTodos === false">
-    <div
-      v-for="(todosItem, index) in content.todos"
-      :key="index">
-      <span>{{ t('处理人') }}: </span>
-      <span>{{ todosItem.operators.join(',') }}</span>
-      <template v-if="content.summary">
-        ，{{ t('耗时') }}：
-        <CostTimer
-          :is-timing="content.status === 'RUNNING'"
-          :start-time="utcTimeToSeconds(content.start_time)"
-          :value="content.cost_time" />
-      </template>
-      <div
-        v-if="todosItem.operators.includes(username)"
-        class="mt-8">
-        <BkPopConfirm
-          :content="t('继续执行单据后无法撤回，请谨慎操作！')"
-          :title="t('是否确认继续执行单据')"
-          trigger="click"
-          :width="320"
-          @confirm="handleProcessTicket('APPROVE', todosItem)">
-          <BkButton
-            class="w-88 mr-8"
-            theme="primary">
-            {{ t('确认执行') }}
-          </BkButton>
-        </BkPopConfirm>
-        <BkPopConfirm
-          :content="t('终止单据后无法撤回，请谨慎操作！')"
-          :title="t('是否确认终止单据')"
-          trigger="click"
-          :width="320"
-          @confirm="handleProcessTicket('TERMINATE', todosItem)">
-          <BkButton
-            class="w-88 mr-8"
-            theme="danger">
-            {{ t('终止单据') }}
-          </BkButton>
-        </BkPopConfirm>
-      </div>
-    </div>
-  </template>
-  <template v-if="content.flow_type !== 'PAUSE'">
-    <div style="padding-top: 8px">
-      <template
-        v-if="
-          content.status === 'RUNNING' &&
-          (content.flow_type === 'RESOURCE_APPLY' || content.flow_type === 'RESOURCE_BATCH_APPLY')
-        ">
-        <DbIcon
-          class="resource-apply-exclamation-fill"
-          type="exclamation-fill" />
-        <I18nT
-          keypath="主机资源不足_等待管理员users补货_补货完成后可以前往place重试"
-          tag="span">
-          <template #users>
-            {{ (content.todos[0]?.context?.administrators ?? []).join(';') }}
-          </template>
-          <template #place>
-            <RouterLink
-              :to="{
-                name: 'MyTodos',
-                query: {
-                  id: content.ticket,
-                },
-              }">
-              {{ t('我的待办') }}
-            </RouterLink>
-          </template>
-        </I18nT>
-      </template>
-      <template v-else-if="content.flow_type === 'INNER_FLOW'">
-        <template
-          v-if="
-            content.status === 'RUNNING' &&
-            content.todos.length > 0 &&
-            content.todos.some((todoItem) => todoItem.status === 'TODO' && todoItem.type !== 'RESOURCE_REPLENISH')
-          ">
-          <span>{{ t('任务') }}</span
-          >“
-          <span style="color: #ff9c01">{{ t('待确认') }}</span>
-          ”
-        </template>
-        <template v-else-if="getStatusInfo(content.status)">
-          <span>{{ t('任务') }}</span
-          >“
-          <span
-            :style="{
-              color: getStatusInfo(content.status)?.color || '#63656e',
-            }">
-            {{ getStatusInfo(content.status)?.text || content.summary }}
-          </span>
-          ”
-        </template>
-        <span v-if="content.err_msg"> ，{{ content.summary }} </span>
-      </template>
-      <template v-else-if="isPause && isTodos === false">
-        <span>{{ t('处理人') }}: </span>
-        <span>{{ _.uniq(_.flatten(content.todos.map((item) => item.operators))).join(',') }}</span>
-      </template>
-      <template v-else>
-        <span
-          :style="{
-            color: content.status === 'TERMINATED' ? '#ea3636' : '#63656e',
-          }">
-          {{ content.summary }}
-        </span>
-        <template v-if="content.err_msg">
-          <span>，{{ t('处理人') }}: </span>
-          <span>{{ ticketData.updater }}</span>
-        </template>
-      </template>
-      <template v-if="content.summary">
-        ，{{ t('耗时') }}：
-        <CostTimer
-          :is-timing="content.status === 'RUNNING'"
-          :start-time="utcTimeToSeconds(content.start_time)"
-          :value="content.cost_time" />
-      </template>
-      <slot name="extra-text" />
-      <template v-if="content.url">
-        ，
-        <a
-          :href="content.url"
-          target="_blank">
-          {{ t('查看详情') }} &gt;
-        </a>
-      </template>
-    </div>
-    <div>
-      <BkPopConfirm
-        v-if="
-          content.err_code === 2 ||
-          (content.flow_type === 'INNER_FLOW' && content.status === 'FAILED' && content.err_msg)
-        "
-        :content="t('重新执行后无法撤回，请谨慎操作！')"
-        :title="t('是否确认重试此步骤')"
-        trigger="click"
-        :width="320"
-        @confirm="handleConfirmRetry(content)">
-        <BkButton
-          class="w-88 mt-8"
-          :disabled="btnState.retryLoading || btnState.terminateLoading"
-          :loading="btnState.retryLoading"
-          theme="primary">
-          {{ t('重试') }}
-        </BkButton>
-      </BkPopConfirm>
-      <BkPopConfirm
-        v-if="content.flow_type === 'INNER_FLOW' && content.status === 'FAILED' && content.err_msg"
-        :content="t('终止执行后无法撤回，请谨慎操作！')"
-        :title="t('是否确认终止执行单据')"
-        trigger="click"
-        :width="320"
-        @confirm="handleConfirmTerminal(content)">
-        <BkButton
-          class="w-88 ml-8 mt-8"
-          :disabled="btnState.terminateLoading || btnState.retryLoading"
-          :loading="btnState.terminateLoading"
-          theme="danger">
-          {{ t('终止') }}
-        </BkButton>
-      </BkPopConfirm>
-    </div>
-    <div
-      v-if="content.end_time"
-      class="flow-time">
-      {{ utcDisplayTime(content.end_time) }}
-    </div>
-  </template>
-  <!-- 系统自动终止 -->
-  <template v-if="content.err_code === 3 && content.context.expire_time && content.todos.length === 0">
-    <div style="margin-top: 8px; color: #ea3636">
-      <span>{{ t('system已处理') }}</span>
-      <span> ({{ t('超过n天未处理，自动终止', { n: content.context.expire_time }) }}) </span>
-    </div>
-    <div class="flow-time">
-      {{ utcDisplayTime(content.update_at) }}
-    </div>
-  </template>
-</template>
-
-<script setup lang="ts">
-  import _ from 'lodash';
-  import { useI18n } from 'vue-i18n';
-
-  import TicketModel from '@services/model/ticket/ticket';
-  import { processTicketTodo, retryTicketFlow, revokeTicketFlow } from '@services/source/ticket';
-  import type { FlowItem } from '@services/types/ticket';
-
-  import { useUserProfile } from '@stores';
-
-  import CostTimer from '@components/cost-timer/CostTimer.vue';
-
-  import ManualConfirm from '@views/tickets/my-todos/components/details/components/flow/components/approve/ManualConfirm.vue';
-
-  import { utcDisplayTime, utcTimeToSeconds } from '@utils';
-
-  import FlowContentTodo from './components/ContentTodo.vue';
-
-  interface Emits {
-    (e: 'fetch-data'): void;
-  }
-
-  interface Props {
-    ticketData: TicketModel<unknown>;
-    content: FlowItem;
-    isTodos?: boolean;
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    isTodos: false,
-    flows: () => [],
-  });
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  const { username } = useUserProfile();
-
-  const btnState = reactive({
-    terminateLoading: false,
-    retryLoading: false,
-  });
-
-  const isPause = computed(() => {
-    const { content } = props;
-    return content.status === 'RUNNING' && content.flow_type === 'PAUSE';
-  });
-
-  // const displayExpiredTime = computed(() => {
-  //   const expireTime = props.content.context.expire_time;
-  //   if (!expireTime) {
-  //     return '';
-  //   }
-
-  //   if (expireTime * 24 > 72) {
-  //     return `${expireTime} ${t('天')}`;
-  //   }
-
-  //   return `${expireTime * 24} ${t('小时')}`;
-  // });
-
-  const getStatusInfo = (status: string) => {
-    const infoMap: Record<
-      string,
-      {
-        text: string;
-        color: string;
-      }
-    > = {
-      SUCCEEDED: {
-        text: t('执行成功'),
-        color: '#14a568',
-      },
-      FAILED: {
-        text: t('执行失败'),
-        color: '#ea3636',
-      },
-      RUNNING: {
-        text: t('执行中'),
-        color: '#3a84ff',
-      },
-      TERMINATED: {
-        text: t('已终止'),
-        color: '#ea3636',
-      },
-    };
-    return infoMap[status] ? infoMap[status] : null;
-  };
-
-  const handleConfirmTerminal = (item: FlowItem) => {
-    btnState.terminateLoading = true;
-    revokeTicketFlow({
-      ticketId: item.ticket,
-      flow_id: item.id,
-    })
-      .then(() => {
-        emits('fetch-data');
-      })
-      .finally(() => {
-        btnState.terminateLoading = false;
-      });
-  };
-
-  const handleConfirmRetry = (item: FlowItem) => {
-    btnState.retryLoading = true;
-    retryTicketFlow({
-      ticketId: item.ticket,
-      flow_id: item.id,
-    })
-      .then(() => {
-        emits('fetch-data');
-      })
-      .finally(() => {
-        btnState.retryLoading = false;
-      });
-  };
-
-  const handleProcessTicket = (action: 'APPROVE' | 'TERMINATE', todoItem: FlowItem['todos'][number]) =>
-    processTicketTodo({
-      action,
-      todo_id: todoItem.id,
-      ticket_id: props.content.ticket,
-      params: {},
-    }).then(() => {
-      emits('fetch-data');
-    });
-
-  const handleEmitFetchData = () => {
-    emits('fetch-data');
-  };
-</script>
-
-<style lang="less" scoped>
-  .resource-apply-exclamation-fill {
-    margin-right: 4px;
-    font-size: 14px;
-    color: #ff9c01;
-  }
-</style>
-
-<style lang="less">
-  .todos-tips-content {
-    .todos-tips-content__desc {
-      padding: 8px 0 24px;
-      font-size: @font-size-mini;
-      color: @title-color;
-    }
-
-    .todos-tips-content__buttons {
-      text-align: right;
-
-      .bk-button {
-        min-width: 62px;
-        margin-left: 8px;
-        font-size: @font-size-mini;
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue b/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue
deleted file mode 100644
index 342401eaea..0000000000
--- a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue
+++ /dev/null
@@ -1,237 +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>
-  <BkLoading
-    :loading="isLoading"
-    style="min-height: calc(100vh - 120px)">
-    <PermissionCatch :key="ticketId">
-      <SmartAction :offset-target="getOffsetTarget">
-        <div class="ticket-details-page">
-          <template v-if="ticketData">
-            <BaseInfo :ticket-data="ticketData" />
-            <Teleport
-              :disabled="!isFullscreen"
-              to="body">
-              <DbCard
-                v-model:collapse="demandCollapse"
-                :class="{ 'tickets-main-is-fullscreen': isFullscreen }"
-                mode="collapse"
-                :title="t('需求信息')">
-                <DemandInfo :data="ticketData" />
-                <div class="ticket-details-item">
-                  <span class="ticket-details-item-label">{{ t('备注') }}：</span>
-                  <span class="ticket-details-item-value">{{ ticketData.remark || '--' }}</span>
-                </div>
-              </DbCard>
-            </Teleport>
-            <DbCard
-              class="ticket-flows"
-              mode="collapse"
-              :title="t('实施进度')">
-              <FlowInfo
-                ref="flowInfoRef"
-                :data="ticketData"
-                @refresh="handleRefreshTicketData" />
-            </DbCard>
-          </template>
-        </div>
-        <template
-          v-if="ticketData"
-          #action>
-          <TicketClone :data="ticketData" />
-        </template>
-      </SmartAction>
-    </PermissionCatch>
-  </BkLoading>
-</template>
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import { getTicketDetails } from '@services/source/ticket';
-
-  import PermissionCatch from '@components/apply-permission/Catch.vue';
-
-  import TicketClone from '@views/tickets/common/components/TicketClone.vue';
-
-  import { useTimeoutFn } from '@vueuse/core';
-
-  import BaseInfo from './components/BaseInfo.vue';
-  import DemandInfo from './components/Demand.vue';
-  import FlowInfo from './components/flow/Index.vue';
-
-  interface Props {
-    ticketId: number;
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-  const route = useRoute();
-
-  const getOffsetTarget = () => document.body.querySelector('.ticket-details-page .db-card');
-
-  const isFullscreen = ref<boolean>(Boolean(route.query.isFullscreen));
-  const demandCollapse = ref(false);
-  const isLoading = ref(true);
-  const flowInfoRef = ref<InstanceType<typeof FlowInfo>>();
-
-  const { runAsync: fetchTicketDetails, data: ticketData } = useRequest(
-    (params: ServiceParameters<typeof getTicketDetails>) =>
-      getTicketDetails(params, {
-        permission: 'catch',
-      }),
-    {
-      onSuccess(_, params) {
-        if (params[0].id !== props.ticketId) {
-          return;
-        }
-        loopFetchTicketDetails();
-      },
-    },
-  );
-
-  const { start: loopFetchTicketDetails } = useTimeoutFn(() => {
-    fetchTicketDetails({
-      id: props.ticketId,
-    });
-  }, 10000);
-
-  watch(
-    () => props.ticketId,
-    () => {
-      if (props.ticketId) {
-        isLoading.value = true;
-        ticketData.value = undefined;
-        fetchTicketDetails({
-          id: props.ticketId,
-        }).finally(() => {
-          isLoading.value = false;
-        });
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  watch(
-    isFullscreen,
-    () => {
-      if (isFullscreen.value) {
-        demandCollapse.value = true;
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const exitFullscreen = (e: KeyboardEvent) => {
-    if (e.keyCode === 27) {
-      isFullscreen.value = false;
-    }
-  };
-
-  const handleRefreshTicketData = () => {
-    fetchTicketDetails({
-      id: props.ticketId,
-    });
-  };
-
-  onMounted(() => {
-    window.addEventListener('keydown', exitFullscreen);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', exitFullscreen);
-  });
-</script>
-
-<style lang="less">
-  @import '@views/tickets/common/styles/ticketDetails.less';
-
-  .ticket-details-page {
-    padding: 24px;
-    font-size: 12px;
-
-    .db-card {
-      .db-card__content {
-        padding-left: 82px;
-      }
-
-      & ~ .db-card {
-        margin-top: 16px;
-      }
-    }
-
-    .bk-timeline {
-      padding-bottom: 16px;
-
-      .bk-timeline-title {
-        font-size: @font-size-mini;
-        font-weight: bold;
-        color: @title-color;
-      }
-
-      .bk-timeline-dot {
-        &::before {
-          display: none;
-        }
-
-        .bk-timeline-icon {
-          color: unset !important;
-          background: white !important;
-          border: none !important;
-        }
-      }
-
-      .bk-timeline-content {
-        max-width: unset;
-        font-size: @font-size-mini;
-        color: @default-color;
-
-        .flow-time {
-          padding-top: 8px;
-          color: @gray-color;
-        }
-      }
-    }
-
-    .ticket-flows {
-      .flow-todo__title {
-        padding-bottom: 12px;
-        font-weight: bold;
-      }
-    }
-
-    .ticket-flow-content {
-      .ticket-flow-content-desc {
-        padding: 8px 0 24px;
-        font-size: @font-size-mini;
-        color: @title-color;
-      }
-
-      .ticket-flow-content-buttons {
-        text-align: right;
-
-        .bk-button {
-          min-width: 62px;
-          margin-left: 8px;
-          font-size: @font-size-mini;
-        }
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/components/flow/components/MySqlFlows.vue b/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/components/flow/components/MySqlFlows.vue
deleted file mode 100644
index 19cc57fba8..0000000000
--- a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/components/flow/components/MySqlFlows.vue
+++ /dev/null
@@ -1,336 +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>
-  <BkTimeline :list="flowTimeline">
-    <template #content="{ content }">
-      <template v-if="content.flow_type === 'DELIVERY'">
-        <div class="sql-risk-main">
-          <I18nT
-            keypath="共n个文件，含有m个高危语句"
-            tag="div">
-            <span style="font-weight: 700; color: #63656e">
-              {{ executeSqlFileList.length }}
-            </span>
-            <span style="font-weight: 700; color: #ea3636">
-              {{ totalWarnCount }}
-            </span>
-          </I18nT>
-          <div
-            v-for="fileName in renderSqlFileList"
-            :key="fileName">
-            <BkButton
-              text
-              @click="() => handleClickFile(fileName)">
-              <DbIcon
-                style="color: #3a84ff"
-                type="file" />
-              <span>
-                <span style="color: #3a84ff">
-                  {{ getSQLFilename(fileName) }}
-                </span>
-                ，
-                <span v-if="ticketData.details.grammar_check_info[fileName].highrisk_warnings?.length > 0">
-                  <I18nT
-                    keypath="含有n个高危语句"
-                    tag="span">
-                    <span class="danger-count">
-                      {{ ticketData.details.grammar_check_info[fileName].highrisk_warnings.length }}
-                    </span>
-                  </I18nT>
-                </span>
-                <span v-else>{{ t('无高危语句') }}</span>
-              </span>
-            </BkButton>
-          </div>
-          <div v-if="isShowMore">
-            <BkButton
-              text
-              @click="handleToggleShowMore">
-              <span style="color: #3a84ff">
-                {{ isShowCollapse ? t('收起') : t('更多') }}
-              </span>
-              <DbIcon
-                class="collapse-dropdown-icon"
-                :class="{ 'collapse-dropdown-icon-active': isShowCollapse }"
-                style="color: #3a84ff"
-                type="down-big" />
-            </BkButton>
-          </div>
-        </div>
-      </template>
-      <template v-if="content.flow_type === 'DESCRIBE_TASK'">
-        <p>
-          <span
-            :style="{
-              color: content.status === 'SUCCEEDED' ? '#2dcb56' : 'inherit',
-            }">
-            {{ content.summary }}
-          </span>
-          <template v-if="content.summary"> ，{{ t('耗时') }}：{{ getCostTimeDisplay(content.cost_time) }}， </template>
-          <BkButton
-            text
-            theme="primary"
-            @click="handleClickDetails">
-            {{ t('查看详情') }}
-          </BkButton>
-        </p>
-      </template>
-
-      <FlowContent
-        v-else
-        :content="content"
-        :flows="flows"
-        :ticket-data="ticketData"
-        @fetch-data="handleFetchData" />
-    </template>
-  </BkTimeline>
-  <BkSideslider
-    class="sql-log-sideslider"
-    :is-show="isShowSqlFile"
-    :width="960"
-    @closed="() => (isShowSqlFile = false)">
-    <template
-      v-if="currentFileExecuteObject"
-      #header>
-      <span>{{ t('SQL 内容') }}</span>
-      <span style="margin-left: 30px; font-size: 12px; font-weight: normal; color: #63656e">
-        <span>{{ t('变更的 DB:') }}</span>
-        <span class="ml-4">
-          <BkTag
-            v-for="item in currentFileExecuteObject.dbnames.slice(0, 3)"
-            :key="item">
-            {{ item }}
-          </BkTag>
-          <BkTag
-            v-if="currentFileExecuteObject.dbnames.length > 3"
-            v-bk-tooltips="{
-              content: currentFileExecuteObject.dbnames.join('\n'),
-            }">
-            ...
-          </BkTag>
-          <template v-if="currentFileExecuteObject.dbnames.length < 1">--</template>
-        </span>
-        <span class="ml-25">{{ t('忽略的 DB:') }}</span>
-        <span class="ml-4">
-          <BkTag
-            v-for="item in currentFileExecuteObject.ignore_dbnames.slice(0, 3)"
-            :key="item">
-            {{ item }}
-          </BkTag>
-          <BkTag
-            v-if="currentFileExecuteObject.ignore_dbnames.length > 3"
-            v-bk-tooltips="{
-              content: currentFileExecuteObject.ignore_dbnames.join('\n'),
-            }">
-            ...
-          </BkTag>
-          <template v-if="currentFileExecuteObject.ignore_dbnames.length < 1">--</template>
-        </span>
-      </span>
-    </template>
-    <div class="editor-layout">
-      <div class="editor-layout-left">
-        <RenderFileList
-          v-model="selectFileName"
-          :data="executeSqlFileList" />
-      </div>
-      <div class="editor-layout-right">
-        <RenderFileContent
-          :model-value="currentFileContent"
-          readonly
-          :title="selectFileName" />
-      </div>
-    </div>
-  </BkSideslider>
-</template>
-
-<script setup lang="tsx">
-  import _ from 'lodash'
-  import { useI18n } from 'vue-i18n';
-  import { useRouter} from 'vue-router'
-
-  import type { MySQLImportSQLFileDetails } from '@services/model/ticket/details/mysql';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { batchFetchFile } from '@services/source/storage';
-  import type { FlowItem } from '@services/types/ticket';
-
-  import RenderFileContent from '@views/tickets/common/components/demand-factory/mysql/import-sql-file/components/RenderFileContent.vue';
-  import RenderFileList from '@views/tickets/common/components/demand-factory/mysql/import-sql-file/components/SqlFileList.vue';
-  import FlowIcon from '@views/tickets/common/components/flow-content/components/FlowIcon.vue';
-  import FlowContent from '@views/tickets/common/components/flow-content/Index.vue';
-
-  import { getCostTimeDisplay, getSQLFilename } from '@utils';
-
-  interface Props {
-    ticketData: TicketModel<MySQLImportSQLFileDetails>,
-    flows?: FlowItem[]
-  }
-
-  interface Emits {
-    (e: 'fetch-data'): void
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    flows: () => [],
-  });
-  const emits = defineEmits<Emits>();
-
-  const router = useRouter();
-  const { t } = useI18n();
-
-  const isShowCollapse = ref(false);
-  const isShowSqlFile = ref(false);
-  const selectFileName = ref('');
-
-  const fileContentMap = shallowRef<Record<string, string>>({});
-  const executeSqlFileList = computed(() => _.flatten(props.ticketData.details.execute_objects.map(item => item.sql_files)))
-
-  const isShowMore = computed(() => executeSqlFileList.value.length > 6);
-
-  const renderSqlFileList = computed(() => {
-    if (isShowMore.value && !isShowCollapse.value) {
-      return executeSqlFileList.value.slice(0, 6);
-    }
-    return executeSqlFileList.value;
-  });
-
-  const totalWarnCount = computed(() => Object.values(props.ticketData.details.grammar_check_info)
-    .reduce((results, item) => {
-      const warnCount = item.highrisk_warnings?.length ?? 0;
-      return results + warnCount;
-    }, 0));
-
-  const currentFileContent = computed(() => fileContentMap.value[selectFileName.value] || '');
-
-  const currentFileExecuteObject = computed(() => _.find(props.ticketData.details.execute_objects, item => item.sql_files.includes(selectFileName.value)));
-
-
-  const flowTimeline = computed(() => props.flows.map((flow: FlowItem) => ({
-    tag: flow.flow_type === 'PAUSE' ? `${t('确认是否执行')}“${flow.flow_type_display}”` : flow.flow_type_display,
-    type: 'default',
-    filled: true,
-    content: flow,
-    icon: () => <FlowIcon data={flow} />,
-  })));
-
-  const handleToggleShowMore = () => {
-    isShowCollapse.value = !isShowCollapse.value;
-  };
-
-  // 查看日志详情
-  const handleClickFile = (value: string) => {
-    isShowSqlFile.value = true;
-    selectFileName.value = value;
-  };
-
-  const handleFetchData = () => {
-    emits('fetch-data');
-  };
-
-  const handleClickDetails = () => {
-    const {href} = router.resolve({
-      name: 'MySQLExecute',
-      params: {
-        step: 'result'
-      },
-      query: {
-        rootId: props.ticketData.details.root_id,
-      }
-    })
-    window.open(href)
-  };
-
-  onMounted(() => {
-    const filePathList = executeSqlFileList.value.reduce((result, item) => {
-      result.push(`${props.ticketData.details.path}/${item}`);
-      return result;
-    }, [] as string[]);
-
-    batchFetchFile({
-      file_path_list: filePathList,
-    }).then((result) => {
-      fileContentMap.value = result.reduce((result, fileInfo) => {
-        const fileName = fileInfo.path.split('/').pop() as string;
-        return Object.assign(result, {
-          [fileName]: fileInfo.content,
-        });
-      }, {} as Record<string, string>);
-      [selectFileName.value] = executeSqlFileList.value;
-    });
-  });
-</script>
-
-<style lang="less" scoped>
-  :deep(.bk-modal-content) {
-    height: 100%;
-    padding: 15px;
-  }
-
-  .sql-risk-main {
-    display: flex;
-    margin-bottom: 10px;
-    gap: 8px;
-    flex-direction: column;
-
-    .danger-count {
-      display: inline-block;
-      font-weight: 700;
-      color: #ea3636;
-    }
-
-    .collapse-dropdown-icon {
-      transform: rotate(0);
-      transition: all 0.5s;
-    }
-
-    .collapse-dropdown-icon-active {
-      transform: rotate(-180deg);
-    }
-  }
-
-  .sql-log-sideslider {
-    .editor-layout {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      background: #2e2e2e;
-
-      .editor-layout-left {
-        width: 238px;
-      }
-
-      .editor-layout-right {
-        position: relative;
-        height: 100%;
-        flex: 1;
-      }
-    }
-  }
-
-  .sql-count {
-    font-weight: 700;
-
-    &.success {
-      color: @success-color;
-    }
-
-    &.warning {
-      color: @warning-color;
-    }
-
-    &.danger {
-      color: @danger-color;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/MySqlFlows.vue b/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/MySqlFlows.vue
deleted file mode 100644
index 19cc57fba8..0000000000
--- a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/components/flow/components/MySqlFlows.vue
+++ /dev/null
@@ -1,336 +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>
-  <BkTimeline :list="flowTimeline">
-    <template #content="{ content }">
-      <template v-if="content.flow_type === 'DELIVERY'">
-        <div class="sql-risk-main">
-          <I18nT
-            keypath="共n个文件，含有m个高危语句"
-            tag="div">
-            <span style="font-weight: 700; color: #63656e">
-              {{ executeSqlFileList.length }}
-            </span>
-            <span style="font-weight: 700; color: #ea3636">
-              {{ totalWarnCount }}
-            </span>
-          </I18nT>
-          <div
-            v-for="fileName in renderSqlFileList"
-            :key="fileName">
-            <BkButton
-              text
-              @click="() => handleClickFile(fileName)">
-              <DbIcon
-                style="color: #3a84ff"
-                type="file" />
-              <span>
-                <span style="color: #3a84ff">
-                  {{ getSQLFilename(fileName) }}
-                </span>
-                ，
-                <span v-if="ticketData.details.grammar_check_info[fileName].highrisk_warnings?.length > 0">
-                  <I18nT
-                    keypath="含有n个高危语句"
-                    tag="span">
-                    <span class="danger-count">
-                      {{ ticketData.details.grammar_check_info[fileName].highrisk_warnings.length }}
-                    </span>
-                  </I18nT>
-                </span>
-                <span v-else>{{ t('无高危语句') }}</span>
-              </span>
-            </BkButton>
-          </div>
-          <div v-if="isShowMore">
-            <BkButton
-              text
-              @click="handleToggleShowMore">
-              <span style="color: #3a84ff">
-                {{ isShowCollapse ? t('收起') : t('更多') }}
-              </span>
-              <DbIcon
-                class="collapse-dropdown-icon"
-                :class="{ 'collapse-dropdown-icon-active': isShowCollapse }"
-                style="color: #3a84ff"
-                type="down-big" />
-            </BkButton>
-          </div>
-        </div>
-      </template>
-      <template v-if="content.flow_type === 'DESCRIBE_TASK'">
-        <p>
-          <span
-            :style="{
-              color: content.status === 'SUCCEEDED' ? '#2dcb56' : 'inherit',
-            }">
-            {{ content.summary }}
-          </span>
-          <template v-if="content.summary"> ，{{ t('耗时') }}：{{ getCostTimeDisplay(content.cost_time) }}， </template>
-          <BkButton
-            text
-            theme="primary"
-            @click="handleClickDetails">
-            {{ t('查看详情') }}
-          </BkButton>
-        </p>
-      </template>
-
-      <FlowContent
-        v-else
-        :content="content"
-        :flows="flows"
-        :ticket-data="ticketData"
-        @fetch-data="handleFetchData" />
-    </template>
-  </BkTimeline>
-  <BkSideslider
-    class="sql-log-sideslider"
-    :is-show="isShowSqlFile"
-    :width="960"
-    @closed="() => (isShowSqlFile = false)">
-    <template
-      v-if="currentFileExecuteObject"
-      #header>
-      <span>{{ t('SQL 内容') }}</span>
-      <span style="margin-left: 30px; font-size: 12px; font-weight: normal; color: #63656e">
-        <span>{{ t('变更的 DB:') }}</span>
-        <span class="ml-4">
-          <BkTag
-            v-for="item in currentFileExecuteObject.dbnames.slice(0, 3)"
-            :key="item">
-            {{ item }}
-          </BkTag>
-          <BkTag
-            v-if="currentFileExecuteObject.dbnames.length > 3"
-            v-bk-tooltips="{
-              content: currentFileExecuteObject.dbnames.join('\n'),
-            }">
-            ...
-          </BkTag>
-          <template v-if="currentFileExecuteObject.dbnames.length < 1">--</template>
-        </span>
-        <span class="ml-25">{{ t('忽略的 DB:') }}</span>
-        <span class="ml-4">
-          <BkTag
-            v-for="item in currentFileExecuteObject.ignore_dbnames.slice(0, 3)"
-            :key="item">
-            {{ item }}
-          </BkTag>
-          <BkTag
-            v-if="currentFileExecuteObject.ignore_dbnames.length > 3"
-            v-bk-tooltips="{
-              content: currentFileExecuteObject.ignore_dbnames.join('\n'),
-            }">
-            ...
-          </BkTag>
-          <template v-if="currentFileExecuteObject.ignore_dbnames.length < 1">--</template>
-        </span>
-      </span>
-    </template>
-    <div class="editor-layout">
-      <div class="editor-layout-left">
-        <RenderFileList
-          v-model="selectFileName"
-          :data="executeSqlFileList" />
-      </div>
-      <div class="editor-layout-right">
-        <RenderFileContent
-          :model-value="currentFileContent"
-          readonly
-          :title="selectFileName" />
-      </div>
-    </div>
-  </BkSideslider>
-</template>
-
-<script setup lang="tsx">
-  import _ from 'lodash'
-  import { useI18n } from 'vue-i18n';
-  import { useRouter} from 'vue-router'
-
-  import type { MySQLImportSQLFileDetails } from '@services/model/ticket/details/mysql';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { batchFetchFile } from '@services/source/storage';
-  import type { FlowItem } from '@services/types/ticket';
-
-  import RenderFileContent from '@views/tickets/common/components/demand-factory/mysql/import-sql-file/components/RenderFileContent.vue';
-  import RenderFileList from '@views/tickets/common/components/demand-factory/mysql/import-sql-file/components/SqlFileList.vue';
-  import FlowIcon from '@views/tickets/common/components/flow-content/components/FlowIcon.vue';
-  import FlowContent from '@views/tickets/common/components/flow-content/Index.vue';
-
-  import { getCostTimeDisplay, getSQLFilename } from '@utils';
-
-  interface Props {
-    ticketData: TicketModel<MySQLImportSQLFileDetails>,
-    flows?: FlowItem[]
-  }
-
-  interface Emits {
-    (e: 'fetch-data'): void
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    flows: () => [],
-  });
-  const emits = defineEmits<Emits>();
-
-  const router = useRouter();
-  const { t } = useI18n();
-
-  const isShowCollapse = ref(false);
-  const isShowSqlFile = ref(false);
-  const selectFileName = ref('');
-
-  const fileContentMap = shallowRef<Record<string, string>>({});
-  const executeSqlFileList = computed(() => _.flatten(props.ticketData.details.execute_objects.map(item => item.sql_files)))
-
-  const isShowMore = computed(() => executeSqlFileList.value.length > 6);
-
-  const renderSqlFileList = computed(() => {
-    if (isShowMore.value && !isShowCollapse.value) {
-      return executeSqlFileList.value.slice(0, 6);
-    }
-    return executeSqlFileList.value;
-  });
-
-  const totalWarnCount = computed(() => Object.values(props.ticketData.details.grammar_check_info)
-    .reduce((results, item) => {
-      const warnCount = item.highrisk_warnings?.length ?? 0;
-      return results + warnCount;
-    }, 0));
-
-  const currentFileContent = computed(() => fileContentMap.value[selectFileName.value] || '');
-
-  const currentFileExecuteObject = computed(() => _.find(props.ticketData.details.execute_objects, item => item.sql_files.includes(selectFileName.value)));
-
-
-  const flowTimeline = computed(() => props.flows.map((flow: FlowItem) => ({
-    tag: flow.flow_type === 'PAUSE' ? `${t('确认是否执行')}“${flow.flow_type_display}”` : flow.flow_type_display,
-    type: 'default',
-    filled: true,
-    content: flow,
-    icon: () => <FlowIcon data={flow} />,
-  })));
-
-  const handleToggleShowMore = () => {
-    isShowCollapse.value = !isShowCollapse.value;
-  };
-
-  // 查看日志详情
-  const handleClickFile = (value: string) => {
-    isShowSqlFile.value = true;
-    selectFileName.value = value;
-  };
-
-  const handleFetchData = () => {
-    emits('fetch-data');
-  };
-
-  const handleClickDetails = () => {
-    const {href} = router.resolve({
-      name: 'MySQLExecute',
-      params: {
-        step: 'result'
-      },
-      query: {
-        rootId: props.ticketData.details.root_id,
-      }
-    })
-    window.open(href)
-  };
-
-  onMounted(() => {
-    const filePathList = executeSqlFileList.value.reduce((result, item) => {
-      result.push(`${props.ticketData.details.path}/${item}`);
-      return result;
-    }, [] as string[]);
-
-    batchFetchFile({
-      file_path_list: filePathList,
-    }).then((result) => {
-      fileContentMap.value = result.reduce((result, fileInfo) => {
-        const fileName = fileInfo.path.split('/').pop() as string;
-        return Object.assign(result, {
-          [fileName]: fileInfo.content,
-        });
-      }, {} as Record<string, string>);
-      [selectFileName.value] = executeSqlFileList.value;
-    });
-  });
-</script>
-
-<style lang="less" scoped>
-  :deep(.bk-modal-content) {
-    height: 100%;
-    padding: 15px;
-  }
-
-  .sql-risk-main {
-    display: flex;
-    margin-bottom: 10px;
-    gap: 8px;
-    flex-direction: column;
-
-    .danger-count {
-      display: inline-block;
-      font-weight: 700;
-      color: #ea3636;
-    }
-
-    .collapse-dropdown-icon {
-      transform: rotate(0);
-      transition: all 0.5s;
-    }
-
-    .collapse-dropdown-icon-active {
-      transform: rotate(-180deg);
-    }
-  }
-
-  .sql-log-sideslider {
-    .editor-layout {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      background: #2e2e2e;
-
-      .editor-layout-left {
-        width: 238px;
-      }
-
-      .editor-layout-right {
-        position: relative;
-        height: 100%;
-        flex: 1;
-      }
-    }
-  }
-
-  .sql-count {
-    font-weight: 700;
-
-    &.success {
-      color: @success-color;
-    }
-
-    &.warning {
-      color: @warning-color;
-    }
-
-    &.danger {
-      color: @danger-color;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/version-files/list/components/FileContent.vue b/dbm-ui/frontend/src/views/version-files/list/components/FileContent.vue
index 5827c46439..9518830ca2 100644
--- a/dbm-ui/frontend/src/views/version-files/list/components/FileContent.vue
+++ b/dbm-ui/frontend/src/views/version-files/list/components/FileContent.vue
@@ -44,7 +44,6 @@
         <BkLoading :loading="state.isLoading">
           <DbOriginalTable
             class="version-files-table"
-            :columns="columns"
             :data="state.data"
             :is-anomalies="state.isAnomalies"
             :is-searching="!!state.search"
@@ -54,7 +53,116 @@
             @clear-search="handleClearSearch"
             @page-limit-change="handeChangeLimit"
             @page-value-change="handleChangePage"
-            @refresh="fetchPackages" />
+            @refresh="fetchPackages">
+            <BkTableColumn
+              field="version"
+              :label="t('版本名称')"
+              :min-width="300">
+              <template #default="{ data }: { data: VersionFileModel }">
+                <TextOverflowLayout>
+                  {{ data.version }}
+                  <template #append>
+                    <BkButton
+                      v-if="data.priority === 0"
+                      v-bk-tooltips="{
+                        disabled: data.enable,
+                        content: t('未启用的版本不能设为默认'),
+                      }"
+                      class="set-btn"
+                      :class="{
+                        'set-btn-disable': !data.enable,
+                      }"
+                      size="small"
+                      @click="() => handleSetDefaultVersion(data)">
+                      {{ t('设为默认版本') }}
+                    </BkButton>
+                    <BkTag
+                      v-else
+                      class="ml-5"
+                      size="small"
+                      theme="info">
+                      {{ t('默认') }}
+                    </BkTag>
+                  </template>
+                </TextOverflowLayout>
+              </template>
+            </BkTableColumn>
+            <BkTableColumn
+              field="name"
+              :label="t('文件名称')"
+              :min-width="350">
+              <template #default="{ data }: { data: VersionFileModel }">
+                {{ data.name || '--' }}
+              </template>
+            </BkTableColumn>
+            <BkTableColumn
+              v-if="isShowSwitch"
+              :field="t('是否启用')"
+              label="enable"
+              :width="120">
+              <template #default="{ data }: { data: VersionFileModel }">
+                <BkPopConfirm
+                  :confirm-text="data.enable ? t('停用') : t('启用')"
+                  :content="
+                    data.enable
+                      ? t('停用后，在选择版本时，将不可见，且不可使用')
+                      : t('启用后，在选择版本时，将开放选择')
+                  "
+                  placement="bottom"
+                  :title="data.enable ? t('确认停用该版本？') : t('确认启用该版本？')"
+                  trigger="click"
+                  width="308"
+                  @confirm="() => handleConfirmSwitch(data)">
+                  <AuthSwitcher
+                    action-id="package_manage"
+                    :model-value="data.enable"
+                    :permission="data.permission.package_manage"
+                    :resource="info.name"
+                    size="small"
+                    theme="primary" />
+                </BkPopConfirm>
+              </template>
+            </BkTableColumn>
+            <BkTableColumn
+              v-else
+              field="md5"
+              label="MD5"
+              :width="350">
+              <template #default="{ data }: { data: VersionFileModel }">
+                <TextOverflowLayout>
+                  {{ data.md5 }}
+                  <template #append>
+                    <DbIcon
+                      type="copy"
+                      @click="() => copy(data.md5)" />
+                  </template>
+                </TextOverflowLayout>
+              </template>
+            </BkTableColumn>
+            <BkTableColumn
+              field="updater"
+              :label="t('更新人')"
+              :width="120">
+              <template #default="{ data }: { data: VersionFileModel }">
+                {{ data.updater || '--' }}
+              </template>
+            </BkTableColumn>
+            <BkTableColumn
+              :label="t('操作')"
+              :width="120">
+              <template #default="{ data }: { data: VersionFileModel }">
+                <AuthButton
+                  action-id="package_manage"
+                  :permission="data.permission.package_manage"
+                  :resource="info.name"
+                  text
+                  theme="primary"
+                  @click="() => handleConfirmDelete(data)">
+                  {{ t('删除') }}
+                </AuthButton>
+              </template>
+            </BkTableColumn>
+          </DbOriginalTable>
         </BkLoading>
       </div>
     </div>
@@ -149,44 +257,34 @@
     </template>
   </BkDialog>
 </template>
-<script setup lang="tsx">
+<script setup lang="ts">
   import { Form, Message } from 'bkui-vue';
-  import type {  UploadProgressEvent,UploadRequestOptions } from 'bkui-vue/lib/upload/upload.type';
+  import type { UploadProgressEvent, UploadRequestOptions } from 'bkui-vue/lib/upload/upload.type';
   import Cookies from 'js-cookie';
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
   import VersionFileModel from '@services/model/version-file/version-file';
-  import {
-    createPackage,
-    updatePackage,
-  } from '@services/source/package';
+  import { createPackage, updatePackage } from '@services/source/package';
   import { createBkrepoAccessToken } from '@services/source/storage';
   import { getVersions } from '@services/source/version';
 
-  import {
-    useCopy,
-    useDefaultPagination,
-    useTableMaxHeight,
-  } from '@hooks';
+  import { useCopy, useDefaultPagination, useTableMaxHeight } from '@hooks';
 
   import { DBTypes } from '@common/const';
 
   import ApplyPermissionCatch from '@components/apply-permission/Catch.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
-  import {
-    messageSuccess,
-  } from '@utils';
+  import { messageSuccess } from '@utils';
 
   import { useVersionFiles } from '../hooks/useVersionFiles';
 
   import type { IState, VersionFileType } from './types';
 
-
   interface Props {
-    info: VersionFileType,
-    pkgTypeList: string[],
+    info: VersionFileType;
+    pkgTypeList: string[];
   }
 
   const props = defineProps<Props>();
@@ -233,8 +331,15 @@
   const tabs = computed(() => props.info.children || []);
   // 版本是否为输入框
   const isInputType = computed(() => {
-    const bigData: string[] = [DBTypes.KAFKA, DBTypes.ES, DBTypes.HDFS, DBTypes.PULSAR, DBTypes.INFLUXDB, DBTypes.DORIS];
-    return (bigData.includes(props.info.name) && state.active !== 'actuator' || props.info.name === DBTypes.MONGODB);
+    const bigData: string[] = [
+      DBTypes.KAFKA,
+      DBTypes.ES,
+      DBTypes.HDFS,
+      DBTypes.PULSAR,
+      DBTypes.INFLUXDB,
+      DBTypes.DORIS,
+    ];
+    return (bigData.includes(props.info.name) && state.active !== 'actuator') || props.info.name === DBTypes.MONGODB;
   });
   const fileTips = computed(() => ({
     content: isInputType.value ? t('请输入版本名称') : t('请选择版本名称'),
@@ -257,133 +362,26 @@
 
   const isShowSwitch = computed(() => props.pkgTypeList.length > 0 && props.pkgTypeList.includes(state.active));
 
-  const columns = computed(() => {
-    const basicColumns = [
-      {
-        label: t('版本名称'),
-        field: 'version',
-        render: ({ data }: { data: VersionFileModel }) => (
-          <div class="version-name text-overflow" v-overflow-tips>
-            {data.version}
-            {data.priority > 0 && <bk-tag theme="info" class="ml-5">{t('默认')}</bk-tag>}
-            {data.priority === 0 && (
-              <bk-button
-                v-bk-tooltips={{
-                  disabled: data.enable,
-                  content: t('未启用的版本不能设为默认'),
-                }}
-                class={{ 'set-btn': true, 'set-btn-disable': !data.enable }}
-                size="small"
-                onClick={() => handleSetDefaultVersion(data)}
-              >
-              {t('设为默认版本')}
-              </bk-button>
-            )}
-          </div>
-        ),
-      },
-      {
-        label: t('文件名称'),
-        field: 'name',
-        render: ({ data }: { data: VersionFileModel }) => data.name || '--',
-      },
-      {
-        label: 'MD5',
-        field: 'md5',
-        render: ({ data }: { data: VersionFileModel }) => (
-          <TextOverflowLayout>
-            {{
-              default: () => data.md5,
-              append: () => (
-                <db-icon
-                  type="copy"
-                  onClick={() => copy(data.md5)} />
-              ),
-            }}
-          </TextOverflowLayout>
-        ),
-      },
+  const rules = {
+    version: [
       {
-        label: t('更新人'),
-        field: 'updater',
-        width: 120,
-        render: ({ data }: { data: VersionFileModel }) => data.updater || '--',
+        required: true,
+        message: t('必填'),
+        trigger: 'blur',
       },
+    ],
+    name: [
       {
-        label: t('更新时间'),
-        field: 'update_at',
-        width: 250,
-        render: ({ data }: { data: VersionFileModel }) => data.updateAtDisplay || '--',
+        required: true,
+        message: t('文件不能为空'),
+        trigger: 'change',
+        validator: (val: string[]) => val.length > 0,
       },
-      {
-        label: t('操作'),
-        field: 'id',
-        width: 100,
-        render: ({ data }: { data: VersionFileModel }) => (
-          <auth-button
-            action-id="package_manage"
-            resource={props.info.name}
-            permission={data.permission.package_manage}
-            text
-            theme="primary"
-            onClick={() => handleConfirmDelete(data)}>
-            { t('删除') }
-          </auth-button>
-        ),
-      },
-    ];
-    if (isShowSwitch.value) {
-      const switchColumn = {
-        label: t('是否启用'),
-        field: 'enable',
-        width: 120,
-        render: ({ data }: { data: VersionFileModel }) => (
-          <bk-pop-confirm
-            title={data.enable ? t('确认停用该版本？') : t('确认启用该版本？')}
-            content={data.enable ? t('停用后，在选择版本时，将不可见，且不可使用') : t('启用后，在选择版本时，将开放选择')}
-            width="308"
-            placement="bottom"
-            trigger="click"
-            confirm-text={data.enable ? t('停用') : t('启用')}
-            onConfirm={() => handleConfirmSwitch(data)}
-          >
-            <auth-switcher
-              action-id="package_manage"
-              resource={props.info.name}
-              permission={data.permission.package_manage}
-              size="small"
-              model-value={data.enable}
-              theme="primary"
-            />
-          </bk-pop-confirm>
-        ),
-      };
-      basicColumns.splice(2, 1, switchColumn);
-    }
-    return basicColumns;
-  });
-
-  const rules = {
-    version: [{
-      required: true,
-      message: t('必填'),
-      trigger: 'blur',
-    }],
-    name: [{
-      required: true,
-      message: t('文件不能为空'),
-      trigger: 'change',
-      validator: (val: string[]) => val.length > 0,
-    }],
+    ],
   };
 
   /** 操作列表基础方法 */
-  const {
-    fetchPackages,
-    handleChangePage,
-    handeChangeLimit,
-    handleConfirmDelete,
-  } = useVersionFiles(state, typeParams);
+  const { fetchPackages, handleChangePage, handeChangeLimit, handleConfirmDelete } = useVersionFiles(state, typeParams);
 
   const { run: runUpdatePackage } = useRequest(updatePackage, {
     manual: true,
@@ -393,17 +391,20 @@
     },
   });
 
-  watch(() => state.active, (value, old) => {
-    if (value && value !== old) {
-      state.search = '';
-      handleChangePage(1);
-      // 大数据类型不需要拉取版本
-      if (!isInputType.value) {
-        fetchVersions();
+  watch(
+    () => state.active,
+    (value, old) => {
+      if (value && value !== old) {
+        state.search = '';
+        handleChangePage(1);
+        // 大数据类型不需要拉取版本
+        if (!isInputType.value) {
+          fetchVersions();
+        }
       }
-    }
-  }, { immediate: true });
-
+    },
+    { immediate: true },
+  );
 
   const handleBeforeUpload = async (fileObj: File) => {
     const dbType = props.info.name;
@@ -421,8 +422,8 @@
     const tokenResult = await createBkrepoAccessToken({ file_path: filePath });
     const uploadDomain = import.meta.env.MODE === 'production' ? tokenResult.url : '/bkrepo_upload';
     createFileState.uploadUrl = `${uploadDomain}/generic/temporary/upload/${tokenResult.project}/${tokenResult.repo}${tokenResult.path}?token=${tokenResult.token}`;
-    return true
-  }
+    return true;
+  };
 
   const getRes = (xhr: XMLHttpRequest): XMLHttpRequestResponseType => {
     const res = xhr.responseText || xhr.response;
@@ -435,7 +436,7 @@
     } catch {
       return res;
     }
-  }
+  };
 
   const handleCustomRequest = (option: UploadRequestOptions) => {
     if (typeof XMLHttpRequest === 'undefined') {
@@ -446,7 +447,7 @@
     const { action } = option;
 
     if (xhr.upload) {
-      xhr.upload.addEventListener('progress', event => {
+      xhr.upload.addEventListener('progress', (event) => {
         const progressEvent = event as unknown as UploadProgressEvent;
         progressEvent.percent = event.total > 0 ? (event.loaded / event.total) * 100 : 0;
         option.onProgress(progressEvent);
@@ -476,7 +477,7 @@
 
     if (option.header) {
       if (Array.isArray(option.header)) {
-        option.header.forEach(head => {
+        option.header.forEach((head) => {
           const headerKey = head.name;
           const headerVal = head.value;
           xhr.setRequestHeader(headerKey, headerVal);
@@ -495,14 +496,14 @@
       for (const [key, value] of Object.entries(headers)) {
         if (value === null || typeof value === 'undefined') {
           continue;
-        };
+        }
         xhr.setRequestHeader(key, String(value));
       }
     }
 
     xhr.send(option.file);
     return xhr;
-  }
+  };
 
   const handleSetDefaultVersion = (row: VersionFileModel) => {
     if (!row.enable) {
@@ -531,12 +532,15 @@
    */
   const fetchVersions = () => {
     createFileState.isLoadVersions = true;
-    getVersions({
-      query_key: state.active,
-      db_type: props.info.name,
-    }, {
-      permission: 'catch',
-    })
+    getVersions(
+      {
+        query_key: state.active,
+        db_type: props.info.name,
+      },
+      {
+        permission: 'catch',
+      },
+    )
       .then((res) => {
         createFileState.versions = res;
       })
@@ -588,7 +592,7 @@
    * 文件上传成功
    */
   const handleUpdateSuccess = (file: any) => {
-    Object.assign(createFileState.formdata, file?.data, { path: file?.data.fullPath } || {});
+    Object.assign(createFileState.formdata, file?.data, { path: file?.data.fullPath });
     versionFormRef.value?.clearValidate();
   };
 
@@ -651,20 +655,18 @@
         }
       }
 
-      .version-name {
-        .set-btn {
-          display: none;
-          height: 22px;
-          padding: 3px 8px;
-          margin-left: 5px;
-          cursor: pointer;
-          background: #fafbfd;
-          border: 1px solid #dcdee5;
-        }
+      .set-btn {
+        display: none;
+        height: 22px;
+        padding: 3px 8px;
+        margin-left: 5px;
+        cursor: pointer;
+        background: #fafbfd;
+        border: 1px solid #dcdee5;
+      }
 
-        .set-btn-disable {
-          color: #c4c6cc;
-        }
+      .set-btn-disable {
+        color: #c4c6cc;
       }
 
       &.bk-vxe-table {