From ba38494d03feb90ea0c8466609827b923cf37114 Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Fri, 6 Sep 2024 17:25:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20mysql=E3=80=81spider=E5=BA=93?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=A1=E9=AA=8C=E8=A7=84=E5=88=99=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=20#6595=20#=20Reviewed,=20transaction=20id:=2017609?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/batch-edit-column/Index.vue    |  13 +-
 .../columns/db-table-name/Index.vue           |  51 ++-
 dbm-ui/frontend/src/locales/zh-cn.json        |   5 +
 dbm-ui/frontend/src/services/source/user.ts   |   1 +
 .../list/components/hooks/useBaseDetails.ts   |   2 +-
 .../RenderData/RenderDbName.vue               |  57 ++-
 .../RenderData/RenderIgnoreDbName.vue         |  59 ---
 .../execute-objects/RenderData/Row.vue        |   6 +-
 .../pages/page1/components/RenderData/Row.vue |   7 +-
 .../views/mysql/common/edit-field/DbName.vue  |  33 +-
 .../mysql/common/edit-field/TableName.vue     |  23 +-
 .../page1/components/RenderData/Index.vue     |   6 +-
 .../pages/page1/components/RenderData/Row.vue |  16 +-
 .../page1/components/RenderData/Index.vue     |   6 +-
 .../pages/page1/components/RenderData/Row.vue |  14 +-
 .../components/batch-edit-common/Index.vue    |  24 +-
 .../batch-edit-common/MultipleInput.vue       |   6 +
 .../page1/components/RenderData/Index.vue     |   6 +-
 .../pages/page1/components/RenderData/Row.vue |  14 +-
 .../render-data/exist-cluster/Row.vue         |   2 +
 .../render-data/new-cluster/Row.vue           |   2 +
 .../pages/page1/components/RenderData/Row.vue |   7 +-
 .../page1/components/RenderData/Index.vue     |   6 +-
 .../pages/page1/components/RenderData/Row.vue |  16 +-
 .../page1/components/RenderData/Index.vue     |  12 +-
 .../pages/page1/components/RenderData/Row.vue |  14 +-
 .../page1/components/RenderData/Index.vue     |  10 +-
 .../pages/page1/components/RenderData/Row.vue |  16 +-
 .../render-data/exist-cluster/Row.vue         |   2 +
 .../render-data/new-cluster/Row.vue           |   2 +
 .../steps/step1/components/ExecuteMode.vue    | 193 ---------
 .../steps/step1/components/TargetCluster.vue  | 215 ---------
 .../steps/step1/components/TaskTips.vue       | 150 -------
 .../steps/step1/components/backup/Index.vue   | 108 -----
 .../components/backup/RenderData/Index.vue    |  42 --
 .../backup/RenderData/RenderBackupSource.vue  |  74 ----
 .../components/backup/RenderData/Row.vue      | 137 ------
 .../steps/step1/components/sql-file/Index.vue | 111 -----
 .../components/sql-file/editor/Index.vue      | 235 ----------
 .../sql-file/editor/MessageList.vue           | 181 --------
 .../components/sql-file/local-file/Index.vue  | 410 ------------------
 .../sql-file/local-file/SqlFileList.vue       | 164 -------
 .../local-file/components/CheckError.vue      |  51 ---
 .../local-file/components/CheckSuccess.vue    |  40 --
 .../local-file/components/FileList.vue        | 288 ------------
 .../sql-file/manual-input/Index.vue           | 227 ----------
 .../components/SyntaxChecking.vue             |  38 --
 .../manual-input/components/SyntaxError.vue   |  36 --
 .../manual-input/components/SyntaxSuccess.vue |  36 --
 .../steps/step1/components/sql-file/utils.ts  |  14 -
 .../step1/components/target-db/Index.vue      |  96 ----
 .../components/target-db/RenderData/Index.vue |  42 --
 .../target-db/RenderData/RenderDbName.vue     |  77 ----
 .../components/target-db/RenderData/Row.vue   | 118 -----
 .../components/MemberSelector.vue             |   2 +-
 .../demand-factory/mysql/Flashback.vue        |  56 +--
 .../demand-factory/mysql/HATruncate.vue       |  56 +--
 .../demand-factory/mysql/TableBackup.vue      |  80 ++--
 .../demand-factory/spider/Flashback.vue       |   8 +-
 .../demand-factory/spider/TableBackup.vue     |   8 +-
 60 files changed, 378 insertions(+), 3353 deletions(-)
 delete mode 100644 dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/RenderIgnoreDbName.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/ExecuteMode.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/TargetCluster.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/TaskTips.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/Index.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/Index.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/RenderBackupSource.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/Row.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/Index.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/editor/Index.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/editor/MessageList.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/Index.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/SqlFileList.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/CheckError.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/CheckSuccess.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/FileList.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/Index.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxChecking.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxError.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxSuccess.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/utils.ts
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/Index.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/Index.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/RenderDbName.vue
 delete mode 100644 dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/Row.vue

diff --git a/dbm-ui/frontend/src/components/batch-edit-column/Index.vue b/dbm-ui/frontend/src/components/batch-edit-column/Index.vue
index 8be2d36bf2..39b6630cd9 100644
--- a/dbm-ui/frontend/src/components/batch-edit-column/Index.vue
+++ b/dbm-ui/frontend/src/components/batch-edit-column/Index.vue
@@ -3,6 +3,7 @@
     :is-show="isShow"
     trigger="manual"
     width="395"
+    @after-show="handleAfterShow"
     @cancel="() => (isShow = false)"
     @confirm="handleConfirm">
     <slot />
@@ -26,6 +27,7 @@
             :list="dataList" />
           <BkInput
             v-else-if="type === 'textarea'"
+            ref="inputRef"
             v-model="localValue"
             :placeholder="placeholder"
             :rows="5"
@@ -53,7 +55,7 @@
     (e: 'change', value: string): void;
   }
 
-  withDefaults(defineProps<Props>(), {
+  const props = withDefaults(defineProps<Props>(), {
     dataList: () => [],
     type: 'select',
     placeholder: '',
@@ -68,12 +70,21 @@
 
   const { t } = useI18n();
 
+  const inputRef = ref();
   const localValue = ref('');
 
   const handleConfirm = () => {
     emits('change', localValue.value);
     isShow.value = false;
   };
+
+  const handleAfterShow = () => {
+    if (props.type === 'textarea') {
+      nextTick(() => {
+        inputRef.value?.focus();
+      });
+    }
+  };
 </script>
 
 <style lang="less">
diff --git a/dbm-ui/frontend/src/components/render-table/columns/db-table-name/Index.vue b/dbm-ui/frontend/src/components/render-table/columns/db-table-name/Index.vue
index a7eff3c482..576a682807 100644
--- a/dbm-ui/frontend/src/components/render-table/columns/db-table-name/Index.vue
+++ b/dbm-ui/frontend/src/components/render-table/columns/db-table-name/Index.vue
@@ -22,12 +22,29 @@
     :single="single"
     @change="handleValueChange">
     <template #tip>
-      <p>{{ t('%：匹配任意长度字符串，如 a%， 不允许独立使用') }}</p>
-      <p>{{ t('？： 匹配任意单一字符，如 a%?%d') }}</p>
-      <p>{{ t('* ：专门指代 ALL 语义, 只能独立使用') }}</p>
-      <p>{{ t('注：含通配符的单元格仅支持输入单个对象') }}</p>
-      <p>{{ t('按Enter或失焦可完成内容输入') }}</p>
-      <p>{{ t('粘贴多个对象可用换行，空格或；，｜分隔') }}</p>
+      <div class="db-table-tag-tip">
+        <div style="font-weight: 700">{{ t('库表输入说明') }}：</div>
+        <div>
+          <div class="circle-dot"></div>
+          <span>{{ t('不允许输入系统库和特殊库，如mysql、sys 等') }}</span>
+        </div>
+        <div>
+          <div class="circle-dot"></div>
+          <span>{{ t('DB名、表名不允许为空，忽略DB名、忽略表名不允许为 *') }}</span>
+        </div>
+        <div>
+          <div class="circle-dot"></div>
+          <span>{{ t('支持 %（指代任意长度字符串）, ?（指代单个字符串）, *（指代全部）三个通配符') }}</span>
+        </div>
+        <div>
+          <div class="circle-dot"></div>
+          <span>{{ t('单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入') }}</span>
+        </div>
+        <div>
+          <div class="circle-dot"></div>
+          <span>{{ t('包含通配符时, 每一单元格只允许输入单个对象。% ? 不能独立使用， * 只能单独使用') }}</span>
+        </div>
+      </div>
     </template>
   </TagInput>
 </template>
@@ -79,3 +96,25 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .db-table-tag-tip {
+    display: flex;
+    flex-direction: column;
+    line-height: 24px;
+    padding: 3px 7px;
+
+    div {
+      display: flex;
+      align-items: center;
+
+      .circle-dot {
+        width: 4px;
+        height: 4px;
+        background-color: #63656e;
+        border-radius: 50%;
+        display: inline-block;
+        margin-right: 6px;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index 52381a4115..127688d41c 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3298,5 +3298,10 @@
     "按Enter或失焦可完成内容输入": "按 Enter 或失焦可完成内容输入",
     "粘贴多个对象可用换行，空格或；，｜分隔": "粘贴多个对象可用换行，空格或；，｜分隔",
     "RedisCluster集群": "RedisCluster 集群",
+    "% 或 ? 不允许单独使用": "% 或 ? 不允许单独使用",
+    "不允许为 *": "不允许为 *",
+    "库表名支持数字、字母、中划线、下划线，最大35字符": "库表名支持数字、字母、中划线、下划线，最大35字符",
+    "不允许输入系统库和特殊库": "不允许输入系统库和特殊库",
+    "不能以stage_truncate开头或dba_rollback结尾": "不能以 stage_truncate 开头或 dba_rollback 结尾",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/source/user.ts b/dbm-ui/frontend/src/services/source/user.ts
index dd7c86f3b1..5930d6a5e8 100644
--- a/dbm-ui/frontend/src/services/source/user.ts
+++ b/dbm-ui/frontend/src/services/source/user.ts
@@ -24,6 +24,7 @@ export function getUserList(
     limit?: number;
     offset?: number;
     fuzzy_lookups?: string;
+    exact_lookups?: string;
   } = {},
 ) {
   return http.get<
diff --git a/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useBaseDetails.ts b/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useBaseDetails.ts
index d05d2b3f1e..851d06f649 100644
--- a/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useBaseDetails.ts
+++ b/dbm-ui/frontend/src/views/db-configure/business/list/components/hooks/useBaseDetails.ts
@@ -63,7 +63,7 @@ export const useBaseDetails = (immediateFetch = true) => {
 
   const treeNode = inject<ComputedRef<TreeData>>('treeNode');
   const route = useRoute();
-  const clusterType = computed(() => route.params.clusterType as ClusterTypes);
+  const clusterType = computed(() => (route.params.clusterType as ClusterTypes) || ClusterTypes.TENDBSINGLE);
   const dbType = computed(() => clusterTypeInfos[clusterType.value].dbType);
   const state = reactive<State>({
     loading: false,
diff --git a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/RenderDbName.vue b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/RenderDbName.vue
index 1759be213f..6c71446a04 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/RenderDbName.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/RenderDbName.vue
@@ -30,10 +30,18 @@
 
   import { makeMap, random } from '@utils';
 
+  interface Props {
+    checkDuplicate?: boolean;
+  }
+
   interface Exposes {
     getValue: () => Promise<string[]>;
   }
 
+  const props = withDefaults(defineProps<Props>(), {
+    checkDuplicate: false,
+  });
+
   const modelValue = defineModel<string[]>({
     default: () => [],
   });
@@ -45,20 +53,24 @@
 
   const editTagRef = ref<InstanceType<typeof TableEditTag>>();
 
+  const systemDbNames = ['mysql', 'db_infobase', 'information_schema', 'performance_schema', 'sys', 'infodba_schema'];
+
   const rules = [
     {
-      validator: (value: string[]) => {
-        tagMemo[instanceKey] = value;
-        return value && value.length > 0;
-      },
-      message: t('DB名不能为空'),
+      validator: (value: string[]) => value && value.length > 0,
+      message: t('DB 名不能为空'),
     },
     {
-      validator: (value: string[]) => {
-        const hasAllMatch = _.find(value, (item) => /%$/.test(item));
-        return !(value.length > 1 && hasAllMatch);
-      },
-      message: t('一格仅支持单个_对象'),
+      validator: (value: string[]) => _.every(value, (item) => /^(?!stage_truncate)(?!.*dba_rollback$).*/.test(item)),
+      message: t('不能以stage_truncate开头或dba_rollback结尾'),
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => /^[-_a-zA-Z0-9*?%]{0,35}$/.test(item)),
+      message: t('库表名支持数字、字母、中划线、下划线，最大35字符'),
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => !systemDbNames.includes(item)),
+      message: t('不允许输入系统库和特殊库'),
     },
     {
       validator: (value: string[]) =>
@@ -66,11 +78,24 @@
       message: t('* 只能独立使用'),
     },
     {
-      validator: (value: string[]) => _.every(value, (item) => !/^%$/.test(item)),
-      message: t('% 不允许单独使用'),
+      validator: (value: string[]) => _.every(value, (item) => !/^[%?]$/.test(item)),
+      message: t('% 或 ? 不允许单独使用'),
     },
     {
       validator: (value: string[]) => {
+        if (_.some(value, (item) => /[*%?]/.test(item))) {
+          return value.length < 2;
+        }
+        return true;
+      },
+      message: t('含通配符的单元格仅支持输入单个对象'),
+    },
+    {
+      validator: (value: string[]) => {
+        if (!props.checkDuplicate) {
+          return true;
+        }
+
         const otherTagMap = { ...tagMemo };
         delete otherTagMap[instanceKey];
 
@@ -84,7 +109,9 @@
   watch(
     modelValue,
     () => {
-      tagMemo[instanceKey] = modelValue.value;
+      if (props.checkDuplicate) {
+        tagMemo[instanceKey] = modelValue.value;
+      }
     },
     {
       immediate: true,
@@ -93,7 +120,9 @@
 
   const handleChange = (value: string[]) => {
     modelValue.value = value;
-    tagMemo[instanceKey] = value;
+    if (props.checkDuplicate) {
+      tagMemo[instanceKey] = value;
+    }
   };
 
   onBeforeUnmount(() => {
diff --git a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/RenderIgnoreDbName.vue b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/RenderIgnoreDbName.vue
deleted file mode 100644
index 5fb608e131..0000000000
--- a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/RenderIgnoreDbName.vue
+++ /dev/null
@@ -1,59 +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>
-  <TableEditTag
-    ref="editTagRef"
-    :model-value="modelValue"
-    :placeholder="t('请输入DB名称_支持通配符_含通配符的仅支持单个')"
-    :rules="rules"
-    @change="handleChange" />
-</template>
-<script setup lang="ts">
-  import _ from 'lodash';
-  import { useI18n } from 'vue-i18n';
-
-  import TableEditTag from '@components/render-table/columns/db-table-name/Index.vue';
-
-  interface Exposes {
-    getValue: () => Promise<string[]>;
-  }
-
-  const modelValue = defineModel<string[]>({
-    required: true,
-  });
-
-  const { t } = useI18n();
-
-  const rules = [
-    {
-      validator: (value: string[]) => {
-        const hasAllMatch = _.find(value, (item) => /%$/.test(item));
-        return !(value.length > 1 && hasAllMatch);
-      },
-      message: t('一格仅支持单个_对象'),
-    },
-  ];
-
-  const editTagRef = ref<InstanceType<typeof TableEditTag>>();
-
-  const handleChange = (value: string[]) => {
-    modelValue.value = value;
-  };
-
-  defineExpose<Exposes>({
-    getValue() {
-      return editTagRef.value!.getValue().then(() => modelValue.value);
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/Row.vue b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/Row.vue
index ea46f991ac..6936ec1317 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/execute-objects/RenderData/Row.vue
@@ -17,10 +17,11 @@
       <FixedColumn fixed="left">
         <RenderDbName
           ref="dbnamesRef"
-          v-model="localDbnames" />
+          v-model="localDbnames"
+          check-duplicate />
       </FixedColumn>
       <td style="padding: 0">
-        <RenderIgnoreDbName
+        <RenderDbName
           ref="ignoreDbnamesRef"
           v-model="localIgnoreDbnames" />
       </td>
@@ -51,7 +52,6 @@
   import { random } from '@utils';
 
   import RenderDbName from './RenderDbName.vue';
-  import RenderIgnoreDbName from './RenderIgnoreDbName.vue';
   import RenderSql from './RenderSql/Index.vue';
 
   export interface IDataRow {
diff --git a/dbm-ui/frontend/src/views/mysql/checksum/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/mysql/checksum/pages/page1/components/RenderData/Row.vue
index 8a28fa2044..2e56f919c6 100644
--- a/dbm-ui/frontend/src/views/mysql/checksum/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/mysql/checksum/pages/page1/components/RenderData/Row.vue
@@ -40,6 +40,7 @@
     <td style="padding: 0">
       <RenderDbName
         ref="ignoreDbsRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :model-value="data.ignoreDbs"
         :required="false"
@@ -52,10 +53,10 @@
         :model-value="data.tablePatterns" />
     </td>
     <td style="padding: 0">
-      <RenderIgnoreTables
+      <RenderTableName
         ref="ignoreTablesRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
-        :ignore-dbs="localRowData.ignoreDbs"
         :model-value="data.ignoreTables" />
     </td>
     <OperateColumn
@@ -132,7 +133,7 @@
   import RenderDbName from '@views/mysql/common/edit-field/DbName.vue';
   import RenderTableName from '@views/mysql/common/edit-field/TableName.vue';
 
-  import RenderIgnoreTables from './RenderIgnoreTables.vue';
+  // import RenderIgnoreTables from './RenderIgnoreTables.vue';
   import RenderSlave from './RenderSlave.vue';
 
   interface Props {
diff --git a/dbm-ui/frontend/src/views/mysql/common/edit-field/DbName.vue b/dbm-ui/frontend/src/views/mysql/common/edit-field/DbName.vue
index c9482d0b63..d7f54d0b88 100644
--- a/dbm-ui/frontend/src/views/mysql/common/edit-field/DbName.vue
+++ b/dbm-ui/frontend/src/views/mysql/common/edit-field/DbName.vue
@@ -36,6 +36,7 @@
     required?: boolean;
     single?: boolean;
     checkExist?: boolean;
+    allowAsterisk?: boolean;
     rules?: {
       validator: (value: string[]) => boolean;
       message: string;
@@ -59,6 +60,7 @@
     remoteExist: false,
     checkExist: false,
     rules: undefined,
+    allowAsterisk: true,
   });
 
   const emits = defineEmits<Emits>();
@@ -73,6 +75,8 @@
       return props.rules;
     }
 
+    const systemDbNames = ['mysql', 'db_infobase', 'information_schema', 'performance_schema', 'sys', 'infodba_schema'];
+
     return [
       {
         validator: (value: string[]) => {
@@ -83,16 +87,36 @@
         },
         message: t('DB 名不能为空'),
       },
+      {
+        validator: (value: string[]) => _.every(value, (item) => /^(?!stage_truncate)(?!.*dba_rollback$).*/.test(item)),
+        message: t('不能以stage_truncate开头或dba_rollback结尾'),
+      },
+      {
+        validator: (value: string[]) => _.every(value, (item) => /^[-_a-zA-Z0-9*?%]{0,35}$/.test(item)),
+        message: t('库表名支持数字、字母、中划线、下划线，最大35字符'),
+      },
+      {
+        validator: (value: string[]) => _.every(value, (item) => !systemDbNames.includes(item)),
+        message: t('不允许输入系统库和特殊库'),
+      },
+      {
+        validator: (value: string[]) => {
+          if (props.allowAsterisk) {
+            return true;
+          }
+
+          return _.every(value, (item) => item !== '*');
+        },
+        message: t('不允许为 *'),
+      },
       {
         validator: (value: string[]) =>
           !_.some(value, (item) => (/\*/.test(item) && item.length > 1) || (value.length > 1 && item === '*')),
         message: t('* 只能独立使用'),
-        trigger: 'change',
       },
       {
-        validator: (value: string[]) => _.every(value, (item) => !/^%$/.test(item)),
-        message: t('% 不允许单独使用'),
-        trigger: 'change',
+        validator: (value: string[]) => _.every(value, (item) => !/^[%?]$/.test(item)),
+        message: t('% 或 ? 不允许单独使用'),
       },
       {
         validator: (value: string[]) => {
@@ -102,7 +126,6 @@
           return true;
         },
         message: t('含通配符的单元格仅支持输入单个对象'),
-        trigger: 'change',
       },
       {
         validator: (value: string[]) => {
diff --git a/dbm-ui/frontend/src/views/mysql/common/edit-field/TableName.vue b/dbm-ui/frontend/src/views/mysql/common/edit-field/TableName.vue
index 5589d6a83b..d5f68eb153 100644
--- a/dbm-ui/frontend/src/views/mysql/common/edit-field/TableName.vue
+++ b/dbm-ui/frontend/src/views/mysql/common/edit-field/TableName.vue
@@ -36,6 +36,7 @@
     disabled?: boolean;
     required?: boolean;
     single?: boolean;
+    allowAsterisk?: boolean; // 是否允许单个 *
     rules?: {
       validator: (value: string[]) => boolean;
       message: string;
@@ -59,6 +60,7 @@
     single: false,
     rules: undefined,
     disabled: false,
+    allowAsterisk: true,
   });
 
   const emits = defineEmits<Emits>();
@@ -83,16 +85,28 @@
         },
         message: t('表名不能为空'),
       },
+      {
+        validator: (value: string[]) => _.every(value, (item) => /^[-_a-zA-Z0-9*?%]{0,35}$/.test(item)),
+        message: t('库表名支持数字、字母、中划线、下划线，最大35字符'),
+      },
+      {
+        validator: (value: string[]) => {
+          if (props.allowAsterisk) {
+            return true;
+          }
+
+          return _.every(value, (item) => item !== '*');
+        },
+        message: t('不允许为 *'),
+      },
       {
         validator: (value: string[]) =>
           !_.some(value, (item) => (/\*/.test(item) && item.length > 1) || (value.length > 1 && item === '*')),
         message: t('* 只能独立使用'),
-        trigger: 'change',
       },
       {
-        validator: (value: string[]) => _.every(value, (item) => !/^%$/.test(item)),
-        message: t('% 不允许单独使用'),
-        trigger: 'change',
+        validator: (value: string[]) => _.every(value, (item) => !/^[%?]$/.test(item)),
+        message: t('% 或 ? 不允许单独使用'),
       },
       {
         validator: (value: string[]) => {
@@ -102,7 +116,6 @@
           return true;
         },
         message: t('含通配符的单元格仅支持输入单个对象'),
-        trigger: 'change',
       },
       // TODO: 表不存在
     ];
diff --git a/dbm-ui/frontend/src/views/mysql/db-clear/pages/page1/components/RenderData/Index.vue b/dbm-ui/frontend/src/views/mysql/db-clear/pages/page1/components/RenderData/Index.vue
index 0acad4fdaf..ad4c4e66ca 100644
--- a/dbm-ui/frontend/src/views/mysql/db-clear/pages/page1/components/RenderData/Index.vue
+++ b/dbm-ui/frontend/src/views/mysql/db-clear/pages/page1/components/RenderData/Index.vue
@@ -49,14 +49,14 @@
       </RenderTableHeadColumn>
       <RenderTableHeadColumn
         :min-width="200"
+        :required="false"
         :width="250">
-        {{ t('目标表名') }}
+        {{ t('忽略DB名') }}
       </RenderTableHeadColumn>
       <RenderTableHeadColumn
         :min-width="200"
-        :required="false"
         :width="250">
-        {{ t('忽略DB名') }}
+        {{ t('目标表名') }}
       </RenderTableHeadColumn>
       <RenderTableHeadColumn
         :min-width="200"
diff --git a/dbm-ui/frontend/src/views/mysql/db-clear/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/mysql/db-clear/pages/page1/components/RenderData/Row.vue
index 30d37200b4..7b82892e62 100644
--- a/dbm-ui/frontend/src/views/mysql/db-clear/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/mysql/db-clear/pages/page1/components/RenderData/Row.vue
@@ -34,24 +34,26 @@
         :cluster-id="localClusterId"
         :model-value="data.dbPatterns" />
     </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablePatternsRef"
-        :cluster-id="localClusterId"
-        :disabled="isDropDatabase"
-        :model-value="tablePatterns" />
-    </td>
     <td style="padding: 0">
       <RenderDbName
         ref="ignoreDbsRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :model-value="data.ignoreDbs"
         :required="false"
         @change="handleIgnoreDbsChange" />
     </td>
+    <td style="padding: 0">
+      <RenderTableName
+        ref="tablePatternsRef"
+        :cluster-id="localClusterId"
+        :disabled="isDropDatabase"
+        :model-value="tablePatterns" />
+    </td>
     <td style="padding: 0">
       <RenderTableName
         ref="ignoreTablesRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :disabled="isDropDatabase"
         :model-value="ignoreTables"
diff --git a/dbm-ui/frontend/src/views/mysql/db-table-backup/pages/page1/components/RenderData/Index.vue b/dbm-ui/frontend/src/views/mysql/db-table-backup/pages/page1/components/RenderData/Index.vue
index 1a2e2d80ed..0ff5eb8729 100644
--- a/dbm-ui/frontend/src/views/mysql/db-table-backup/pages/page1/components/RenderData/Index.vue
+++ b/dbm-ui/frontend/src/views/mysql/db-table-backup/pages/page1/components/RenderData/Index.vue
@@ -34,14 +34,14 @@
     </RenderTableHeadColumn>
     <RenderTableHeadColumn
       :min-width="240"
+      :required="false"
       :width="240">
-      {{ t('备份表名') }}
+      {{ t('忽略DB名') }}
     </RenderTableHeadColumn>
     <RenderTableHeadColumn
       :min-width="240"
-      :required="false"
       :width="240">
-      {{ t('忽略DB名') }}
+      {{ t('备份表名') }}
     </RenderTableHeadColumn>
     <RenderTableHeadColumn
       :min-width="240"
diff --git a/dbm-ui/frontend/src/views/mysql/db-table-backup/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/mysql/db-table-backup/pages/page1/components/RenderData/Row.vue
index 5b97c9cad4..0396b730aa 100644
--- a/dbm-ui/frontend/src/views/mysql/db-table-backup/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/mysql/db-table-backup/pages/page1/components/RenderData/Row.vue
@@ -25,22 +25,24 @@
         :cluster-id="localClusterId"
         :model-value="data.dbPatterns" />
     </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablePatternsRef"
-        :cluster-id="localClusterId"
-        :model-value="data.tablePatterns" />
-    </td>
     <td style="padding: 0">
       <RenderDbName
         ref="ignoreDbsRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :model-value="data.ignoreDbs"
         :required="false" />
     </td>
+    <td style="padding: 0">
+      <RenderTableName
+        ref="tablePatternsRef"
+        :cluster-id="localClusterId"
+        :model-value="data.tablePatterns" />
+    </td>
     <td style="padding: 0">
       <RenderTableName
         ref="ignoreTablesRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :model-value="data.ignoreTables"
         :required="false" />
diff --git a/dbm-ui/frontend/src/views/mysql/dumper/components/create-rule/components/receiver-data/components/batch-edit-common/Index.vue b/dbm-ui/frontend/src/views/mysql/dumper/components/create-rule/components/receiver-data/components/batch-edit-common/Index.vue
index fd84479e13..ed50ebcba4 100644
--- a/dbm-ui/frontend/src/views/mysql/dumper/components/create-rule/components/receiver-data/components/batch-edit-common/Index.vue
+++ b/dbm-ui/frontend/src/views/mysql/dumper/components/create-rule/components/receiver-data/components/batch-edit-common/Index.vue
@@ -2,6 +2,7 @@
   <BkPopConfirm
     trigger="click"
     width="330"
+    @after-show="handleAfterShow"
     @confirm="handleConfirm">
     <slot />
     <template #content>
@@ -16,6 +17,7 @@
         </div>
         <BkInput
           v-if="isShowInput"
+          ref="inputRef"
           v-model="localValue"
           class="input-box"
           :min="1"
@@ -36,14 +38,14 @@
 
   interface Props {
     config: {
-      type: 'text' | 'number' | 'password' | 'textarea' | string
-      title: string,
-      placeholder: string,
-    }
+      type: 'text' | 'number' | 'password' | 'textarea' | string;
+      title: string;
+      placeholder: string;
+    };
   }
 
   interface Emits {
-    (e: 'data-change', value: string[], isBatch: boolean): void,
+    (e: 'data-change', value: string[], isBatch: boolean): void;
   }
 
   const props = defineProps<Props>();
@@ -52,6 +54,7 @@
 
   const { t } = useI18n();
 
+  const inputRef = ref();
   const multipleInputRef = ref();
   const localValue = ref('');
 
@@ -68,6 +71,17 @@
     }
     localValue.value = '';
   };
+
+  const handleAfterShow = () => {
+    nextTick(() => {
+      if (isShowInput.value) {
+        inputRef.value?.focus();
+        return;
+      }
+
+      multipleInputRef.value?.focus();
+    });
+  };
 </script>
 
 <style lang="less">
diff --git a/dbm-ui/frontend/src/views/mysql/dumper/components/create-rule/components/receiver-data/components/batch-edit-common/MultipleInput.vue b/dbm-ui/frontend/src/views/mysql/dumper/components/create-rule/components/receiver-data/components/batch-edit-common/MultipleInput.vue
index 110b1d7e4a..aac14ba2cc 100644
--- a/dbm-ui/frontend/src/views/mysql/dumper/components/create-rule/components/receiver-data/components/batch-edit-common/MultipleInput.vue
+++ b/dbm-ui/frontend/src/views/mysql/dumper/components/create-rule/components/receiver-data/components/batch-edit-common/MultipleInput.vue
@@ -3,6 +3,7 @@
     class="entry-config-multi"
     :class="{ 'is-error': isError }">
     <BkInput
+      ref="inputRef"
       v-model.trim="localValue"
       class="input-box"
       :placeholder="t('请输入数值')"
@@ -26,10 +27,12 @@
 
   interface Exposes {
     getValue: () => string[];
+    focus: () => void;
   }
 
   const { t } = useI18n();
 
+  const inputRef = ref();
   const localValue = ref('');
   const isError = ref(false);
 
@@ -64,6 +67,9 @@
       }
       return [];
     },
+    focus() {
+      inputRef.value?.focus();
+    },
   });
 </script>
 <style lang="less" scoped>
diff --git a/dbm-ui/frontend/src/views/mysql/flashback/pages/page1/components/RenderData/Index.vue b/dbm-ui/frontend/src/views/mysql/flashback/pages/page1/components/RenderData/Index.vue
index 59c42a8ea7..bba1248169 100644
--- a/dbm-ui/frontend/src/views/mysql/flashback/pages/page1/components/RenderData/Index.vue
+++ b/dbm-ui/frontend/src/views/mysql/flashback/pages/page1/components/RenderData/Index.vue
@@ -41,14 +41,14 @@
     </RenderTableHeadColumn>
     <RenderTableHeadColumn
       :min-width="200"
+      :required="false"
       :width="250">
-      {{ t('目标表') }}
+      {{ t('忽略库') }}
     </RenderTableHeadColumn>
     <RenderTableHeadColumn
       :min-width="200"
-      :required="false"
       :width="250">
-      {{ t('忽略库') }}
+      {{ t('目标表') }}
     </RenderTableHeadColumn>
     <RenderTableHeadColumn
       :min-width="200"
diff --git a/dbm-ui/frontend/src/views/mysql/flashback/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/mysql/flashback/pages/page1/components/RenderData/Row.vue
index f59ad78a24..bb869afc74 100644
--- a/dbm-ui/frontend/src/views/mysql/flashback/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/mysql/flashback/pages/page1/components/RenderData/Row.vue
@@ -36,22 +36,24 @@
         :cluster-id="localClusterId"
         :model-value="data.databases" />
     </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablesRef"
-        :cluster-id="localClusterId"
-        :model-value="data.tables" />
-    </td>
     <td style="padding: 0">
       <RenderDbName
         ref="databasesIgnoreRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :model-value="data.databasesIgnore"
         :required="false" />
     </td>
+    <td style="padding: 0">
+      <RenderTableName
+        ref="tablesRef"
+        :cluster-id="localClusterId"
+        :model-value="data.tables" />
+    </td>
     <td style="padding: 0">
       <RenderTableName
         ref="tablesIgnoreRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :model-value="data.tablesIgnore"
         :required="false" />
diff --git a/dbm-ui/frontend/src/views/mysql/rollback/pages/page1/components/render-data/exist-cluster/Row.vue b/dbm-ui/frontend/src/views/mysql/rollback/pages/page1/components/render-data/exist-cluster/Row.vue
index 917caf8e50..3b5ce2fddb 100644
--- a/dbm-ui/frontend/src/views/mysql/rollback/pages/page1/components/render-data/exist-cluster/Row.vue
+++ b/dbm-ui/frontend/src/views/mysql/rollback/pages/page1/components/render-data/exist-cluster/Row.vue
@@ -49,6 +49,7 @@
     <td style="padding: 0">
       <RenderDbName
         ref="databasesIgnoreRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterData!.id"
         :model-value="data.databasesIgnore"
         :required="false" />
@@ -63,6 +64,7 @@
     <td style="padding: 0">
       <RenderTableName
         ref="tablesIgnoreRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterData!.id"
         :model-value="data.tablesIgnore"
         :required="false" />
diff --git a/dbm-ui/frontend/src/views/mysql/rollback/pages/page1/components/render-data/new-cluster/Row.vue b/dbm-ui/frontend/src/views/mysql/rollback/pages/page1/components/render-data/new-cluster/Row.vue
index b237914529..e907871e2c 100644
--- a/dbm-ui/frontend/src/views/mysql/rollback/pages/page1/components/render-data/new-cluster/Row.vue
+++ b/dbm-ui/frontend/src/views/mysql/rollback/pages/page1/components/render-data/new-cluster/Row.vue
@@ -56,6 +56,7 @@
     <td style="padding: 0">
       <RenderDbName
         ref="databasesIgnoreRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterData!.id"
         :model-value="data.databasesIgnore"
         :required="false" />
@@ -70,6 +71,7 @@
     <td style="padding: 0">
       <RenderTableName
         ref="tablesIgnoreRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterData!.id"
         :model-value="data.tablesIgnore"
         :required="false" />
diff --git a/dbm-ui/frontend/src/views/spider-manage/checksum/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/spider-manage/checksum/pages/page1/components/RenderData/Row.vue
index 5e83daa2e1..e5a855024d 100644
--- a/dbm-ui/frontend/src/views/spider-manage/checksum/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/checksum/pages/page1/components/RenderData/Row.vue
@@ -67,6 +67,7 @@
         <RenderDbName
           ref="ignoreDbsRefs"
           v-model:model-value="backupInfoItem.ignoreDbs"
+          :allow-asterisk="false"
           :cluster-id="localClusterId"
           :required="false" />
       </td>
@@ -77,10 +78,10 @@
           :model-value="backupInfoItem.tablePatterns" />
       </td>
       <td style="padding: 0">
-        <RenderIgnoreTables
+        <RenderTableName
           ref="ignoreTablesRefs"
+          :allow-asterisk="false"
           :cluster-id="localClusterId"
-          :ignore-dbs="backupInfoItem.ignoreDbs"
           :model-value="backupInfoItem.ignoreTables" />
       </td>
       <OperateColumn
@@ -138,7 +139,7 @@
   import RenderTableName from '@views/mysql/common/edit-field/TableName.vue';
 
   import RenderCluster from './RenderCluster.vue';
-  import RenderIgnoreTables from './RenderIgnoreTables.vue';
+  // import RenderIgnoreTables from './RenderIgnoreTables.vue';
   import RenderMaster from './RenderMaster.vue';
   import RenderScope from './RenderScope.vue';
   import RenderSlave from './RenderSlave.vue';
diff --git a/dbm-ui/frontend/src/views/spider-manage/db-clear/pages/page1/components/RenderData/Index.vue b/dbm-ui/frontend/src/views/spider-manage/db-clear/pages/page1/components/RenderData/Index.vue
index 25dfbed950..c8c05aa852 100644
--- a/dbm-ui/frontend/src/views/spider-manage/db-clear/pages/page1/components/RenderData/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/db-clear/pages/page1/components/RenderData/Index.vue
@@ -53,14 +53,14 @@
         </RenderTableHeadColumn>
         <RenderTableHeadColumn
           :min-width="100"
+          :required="false"
           :width="190">
-          {{ t('目标表名') }}
+          {{ t('忽略DB名') }}
         </RenderTableHeadColumn>
         <RenderTableHeadColumn
           :min-width="100"
-          :required="false"
           :width="190">
-          {{ t('忽略DB名') }}
+          {{ t('目标表名') }}
         </RenderTableHeadColumn>
         <RenderTableHeadColumn
           :min-width="100"
diff --git a/dbm-ui/frontend/src/views/spider-manage/db-clear/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/spider-manage/db-clear/pages/page1/components/RenderData/Row.vue
index 92babfbbb9..3f0d810945 100644
--- a/dbm-ui/frontend/src/views/spider-manage/db-clear/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/db-clear/pages/page1/components/RenderData/Row.vue
@@ -33,24 +33,26 @@
         :cluster-id="localClusterId"
         :model-value="data.dbPatterns" />
     </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablePatternsRef"
-        :cluster-id="localClusterId"
-        :disabled="isDropDatabase"
-        :model-value="tablePatterns" />
-    </td>
     <td style="padding: 0">
       <RenderDbName
         ref="ignoreDbsRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :model-value="data.ignoreDbs"
         :required="false"
         @change="handleIgnoreDbsChange" />
     </td>
+    <td style="padding: 0">
+      <RenderTableName
+        ref="tablePatternsRef"
+        :cluster-id="localClusterId"
+        :disabled="isDropDatabase"
+        :model-value="tablePatterns" />
+    </td>
     <td style="padding: 0">
       <RenderTableName
         ref="ignoreTablesRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :disabled="isDropDatabase"
         :model-value="ignoreTables"
diff --git a/dbm-ui/frontend/src/views/spider-manage/db-table-backup/pages/page1/components/RenderData/Index.vue b/dbm-ui/frontend/src/views/spider-manage/db-table-backup/pages/page1/components/RenderData/Index.vue
index 92e7d7a7e3..350035d092 100644
--- a/dbm-ui/frontend/src/views/spider-manage/db-table-backup/pages/page1/components/RenderData/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/db-table-backup/pages/page1/components/RenderData/Index.vue
@@ -53,14 +53,14 @@
         </RenderTableHeadColumn>
         <RenderTableHeadColumn
           :min-width="90"
+          :required="false"
           :width="210">
-          {{ t('备份表名') }}
+          {{ t('忽略DB名') }}
         </RenderTableHeadColumn>
         <RenderTableHeadColumn
           :min-width="90"
-          :required="false"
           :width="210">
-          {{ t('忽略DB名') }}
+          {{ t('备份表名') }}
         </RenderTableHeadColumn>
         <RenderTableHeadColumn
           :min-width="90"
@@ -89,9 +89,9 @@
   import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
   import RenderTable from '@components/render-table/Index.vue';
 
-  interface Emits{
-    (e: 'batchSelectCluster'): void,
-    (e: 'batchEditBackupLocal', value: string): void,
+  interface Emits {
+    (e: 'batchSelectCluster'): void;
+    (e: 'batchEditBackupLocal', value: string): void;
   }
 
   const emits = defineEmits<Emits>();
diff --git a/dbm-ui/frontend/src/views/spider-manage/db-table-backup/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/spider-manage/db-table-backup/pages/page1/components/RenderData/Row.vue
index 7bcf4db5a9..6cae169a47 100644
--- a/dbm-ui/frontend/src/views/spider-manage/db-table-backup/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/db-table-backup/pages/page1/components/RenderData/Row.vue
@@ -32,22 +32,24 @@
         :cluster-id="localClusterId"
         :model-value="data.dbPatterns" />
     </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablePatternsRef"
-        :cluster-id="localClusterId"
-        :model-value="data.tablePatterns" />
-    </td>
     <td style="padding: 0">
       <RenderDbName
         ref="ignoreDbsRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :model-value="data.ignoreDbs"
         :required="false" />
     </td>
+    <td style="padding: 0">
+      <RenderTableName
+        ref="tablePatternsRef"
+        :cluster-id="localClusterId"
+        :model-value="data.tablePatterns" />
+    </td>
     <td style="padding: 0">
       <RenderTableName
         ref="ignoreTablesRef"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :model-value="data.ignoreTables"
         :required="false" />
diff --git a/dbm-ui/frontend/src/views/spider-manage/flashback/pages/page1/components/RenderData/Index.vue b/dbm-ui/frontend/src/views/spider-manage/flashback/pages/page1/components/RenderData/Index.vue
index b80c70e45a..e83ae5427a 100644
--- a/dbm-ui/frontend/src/views/spider-manage/flashback/pages/page1/components/RenderData/Index.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/flashback/pages/page1/components/RenderData/Index.vue
@@ -42,17 +42,17 @@
           :width="190">
           {{ t('目标库') }}
         </RenderTableHeadColumn>
-        <RenderTableHeadColumn
-          :min-width="100"
-          :width="350">
-          {{ t('目标表') }}
-        </RenderTableHeadColumn>
         <RenderTableHeadColumn
           :min-width="100"
           :required="false"
           :width="180">
           {{ t('忽略库') }}
         </RenderTableHeadColumn>
+        <RenderTableHeadColumn
+          :min-width="100"
+          :width="350">
+          {{ t('目标表') }}
+        </RenderTableHeadColumn>
         <RenderTableHeadColumn
           :min-width="100"
           :required="false"
diff --git a/dbm-ui/frontend/src/views/spider-manage/flashback/pages/page1/components/RenderData/Row.vue b/dbm-ui/frontend/src/views/spider-manage/flashback/pages/page1/components/RenderData/Row.vue
index 17ba0ad7c2..e98a115529 100644
--- a/dbm-ui/frontend/src/views/spider-manage/flashback/pages/page1/components/RenderData/Row.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/flashback/pages/page1/components/RenderData/Row.vue
@@ -38,24 +38,26 @@
         :cluster-id="localClusterId"
         required />
     </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablesRef"
-        v-model="localTables"
-        :cluster-id="localClusterId"
-        required />
-    </td>
     <td style="padding: 0">
       <RenderDbName
         ref="databasesIgnoreRef"
         v-model="localDatabaseIgnore"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :rules="ingoredbAndTableNameBaseRules" />
     </td>
+    <td style="padding: 0">
+      <RenderTableName
+        ref="tablesRef"
+        v-model="localTables"
+        :cluster-id="localClusterId"
+        required />
+    </td>
     <td style="padding: 0">
       <RenderTableName
         ref="tablesIgnoreRef"
         v-model="localTablesIgnore"
+        :allow-asterisk="false"
         :cluster-id="localClusterId"
         :rules="ingoredbAndTableNameBaseRules" />
     </td>
diff --git a/dbm-ui/frontend/src/views/spider-manage/rollback/pages/page1/components/render-data/exist-cluster/Row.vue b/dbm-ui/frontend/src/views/spider-manage/rollback/pages/page1/components/render-data/exist-cluster/Row.vue
index 32fe534fa8..4186953d02 100644
--- a/dbm-ui/frontend/src/views/spider-manage/rollback/pages/page1/components/render-data/exist-cluster/Row.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/rollback/pages/page1/components/render-data/exist-cluster/Row.vue
@@ -52,6 +52,7 @@
       <td style="padding: 0">
         <RenderDbName
           ref="databasesIgnoreRef"
+          :allow-asterisk="false"
           :cluster-id="localClusterData!.id"
           :model-value="data.databasesIgnore"
           :required="false" />
@@ -66,6 +67,7 @@
       <td style="padding: 0">
         <RenderTableName
           ref="tablesIgnoreRef"
+          :allow-asterisk="false"
           :cluster-id="localClusterData!.id"
           :model-value="data.tablesIgnore"
           :required="false" />
diff --git a/dbm-ui/frontend/src/views/spider-manage/rollback/pages/page1/components/render-data/new-cluster/Row.vue b/dbm-ui/frontend/src/views/spider-manage/rollback/pages/page1/components/render-data/new-cluster/Row.vue
index 8ba8a9f475..4e9f2c2963 100644
--- a/dbm-ui/frontend/src/views/spider-manage/rollback/pages/page1/components/render-data/new-cluster/Row.vue
+++ b/dbm-ui/frontend/src/views/spider-manage/rollback/pages/page1/components/render-data/new-cluster/Row.vue
@@ -67,6 +67,7 @@
       <td style="padding: 0">
         <RenderDbName
           ref="databasesIgnoreRef"
+          :allow-asterisk="false"
           :cluster-id="localClusterData!.id"
           :model-value="data.databasesIgnore"
           :required="false" />
@@ -81,6 +82,7 @@
       <td style="padding: 0">
         <RenderTableName
           ref="tablesIgnoreRef"
+          :allow-asterisk="false"
           :cluster-id="localClusterData!.id"
           :model-value="data.tablesIgnore"
           :required="false" />
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/ExecuteMode.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/ExecuteMode.vue
deleted file mode 100644
index 58e07d2d72..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/ExecuteMode.vue
+++ /dev/null
@@ -1,193 +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>
-  <BkFormItem
-    :label="t('执行模式')"
-    required>
-    <BkRadioGroup
-      v-model="localMode"
-      class="sql-execute-mode"
-      @change="handleModeChange">
-      <div class="item-box">
-        <BkRadio label="manual">
-          <div class="item-content">
-            <DbIcon
-              class="item-flag"
-              type="account" />
-            <div class="item-label">
-              {{ t('手动执行') }}
-            </div>
-            <div>{{ t('单据审批通过之后_需要人工确认方可执行') }}</div>
-          </div>
-        </BkRadio>
-      </div>
-      <div class="item-box">
-        <BkRadio label="timer">
-          <div class="item-content">
-            <DbIcon
-              class="item-flag"
-              type="timed-task" />
-            <div class="item-label">
-              {{ t('定时执行') }}
-            </div>
-            <div>{{ t('单据审批通过之后_定时执行_无需确认') }}</div>
-          </div>
-        </BkRadio>
-      </div>
-    </BkRadioGroup>
-  </BkFormItem>
-  <BkFormItem
-    v-if="localMode === 'timer'"
-    property="ticket_mode"
-    required
-    :rules="rules">
-    <template #label>
-      <span>{{ t('执行时间') }}</span>
-      <span style="font-weight: normal; color: #979ba5">
-        {{ t('在审批通过后_将会按照设置的时间定时执行_无需人工确认_如审批超时_需_人工确认_后才能执行') }}
-      </span>
-    </template>
-    <div class="sql-execute-time-box">
-      <TimeZonePicker style="width: 350px" />
-      <div ref="timeRef">
-        <BkDatePicker
-          v-model="localTriggerTime"
-          :disabled-date="disableDate"
-          type="datetime"
-          @change="handleTriggerTimeChange" />
-      </div>
-    </div>
-  </BkFormItem>
-</template>
-<script setup lang="ts">
-  import dayjs from 'dayjs';
-  import { ref, watch } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import { useTimeZoneFormat } from '@hooks';
-
-  import TimeZonePicker from '@components/time-zone-picker/index.vue';
-
-  interface Props {
-    modelValue: {
-      mode: string;
-      trigger_time: string;
-    };
-  }
-
-  interface Emits {
-    (e: 'update:modelValue', value: Props['modelValue']): void;
-  }
-
-  const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-  const formatDateToUTC = useTimeZoneFormat();
-
-  const disableDate = (date: number | Date) => Boolean(date && date.valueOf() < Date.now() - 86400000);
-
-  const rules = [
-    {
-      validator: (value: Props['modelValue']) => !!value.trigger_time,
-      message: t('定时执行时执行时间不能为空'),
-      trigger: 'change',
-    },
-  ];
-
-  const timeRef = ref();
-  const localMode = ref(props.modelValue.mode);
-  const localTriggerTime = ref(props.modelValue.trigger_time);
-
-  watch(
-    () => props.modelValue,
-    () => {
-      localMode.value = props.modelValue.mode;
-      localTriggerTime.value = props.modelValue.trigger_time;
-    },
-  );
-
-  const triggerChange = () => {
-    nextTick(() => {
-      emits('update:modelValue', {
-        mode: localMode.value,
-        trigger_time: formatDateToUTC(localTriggerTime.value),
-      });
-    });
-  };
-
-  const handleModeChange = (mode: string) => {
-    localMode.value = mode;
-    if (mode === 'timer') {
-      const today = new Date();
-      today.setSeconds(0);
-      localTriggerTime.value = dayjs(today).format('YYYY-MM-DD HH:mm:ss');
-      setTimeout(() => {
-        timeRef.value.scrollIntoView();
-      });
-    } else {
-      localTriggerTime.value = '';
-    }
-    triggerChange();
-  };
-
-  const handleTriggerTimeChange = (value: string) => {
-    localTriggerTime.value = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
-    triggerChange();
-  };
-</script>
-<style lang="less">
-  .sql-execute-mode {
-    flex-direction: column;
-
-    .item-box {
-      & ~ .item-box {
-        margin-top: 20px;
-      }
-
-      .item-content {
-        position: relative;
-        padding-left: 25px;
-        font-size: 12px;
-        line-height: 20px;
-        color: #63656e;
-      }
-
-      .item-flag {
-        position: absolute;
-        left: 3px;
-        font-size: 18px;
-        color: #979ba5;
-      }
-
-      .item-label {
-        font-weight: bold;
-      }
-
-      .bk-radio {
-        align-items: flex-start;
-
-        .bk-radio-input {
-          margin-top: 2px;
-        }
-      }
-    }
-  }
-
-  .sql-execute-time-box {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/TargetCluster.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/TargetCluster.vue
deleted file mode 100644
index 3927942188..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/TargetCluster.vue
+++ /dev/null
@@ -1,215 +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="sql-execute-target-cluster">
-    <DbFormItem
-      ref="formItemRef"
-      :label="t('目标集群与构造设置')"
-      property="cluster_ids"
-      required
-      :rules="rules">
-      <BkButton @click="handleShowClusterSelector">
-        <DbIcon
-          style="margin-right: 3px"
-          type="add" />
-        <span>{{ t('添加目标集群') }}</span>
-      </BkButton>
-      <div :class="{ 'cluster-checking': isLoading }">
-        <BkLoading :loading="isLoading">
-          <DbOriginalTable
-            v-if="targetClusterList.length > 0"
-            class="mt-16"
-            :columns="colums"
-            :data="targetClusterList" />
-        </BkLoading>
-      </div>
-    </DbFormItem>
-  </div>
-  <ClusterSelector
-    v-model:is-show="isShowClusterSelector"
-    :cluster-types="[ClusterTypes.TENDBCLUSTER]"
-    :selected="clusterSelectorValue"
-    :tab-list-config="tabListConfig"
-    @change="handelClusterChange" />
-</template>
-<script lang="tsx">
-  export interface IClusterData {
-    id: number;
-    cluster_name: string;
-    status: string;
-    master_domain: string;
-    cluster_type: string;
-  }
-</script>
-<script setup lang="tsx">
-  import _ from 'lodash';
-  import {
-    ref,
-    shallowRef,
-    watch,
-  } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import { queryClusters } from '@services/source/mysqlCluster';
-
-  import { useGlobalBizs } from '@stores';
-
-  import { ClusterTypes } from '@common/const';
-
-  import RenderClusterStatus from '@components/cluster-common/RenderStatus.vue';
-  import ClusterSelector from '@components/cluster-selector/Index.vue';
-
-  interface Props {
-    modelValue: Array<number>
-  }
-  interface Emits{
-    (e: 'update:modelValue', value: Array<number>): void
-  }
-
-  const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const { currentBizId } = useGlobalBizs();
-  const { t } = useI18n();
-
-  const tabListConfig = {
-    [ClusterTypes.TENDBCLUSTER]: {
-      disabledRowConfig: [{
-        handler: (data: IClusterData) => data.status !== 'normal',
-        tip: t('集群异常'),
-      }],
-    },
-  };
-
-  const colums = [
-    {
-      label: t('集群'),
-      field: 'master_domain',
-    },
-    {
-      label: t('类型'),
-      field: 'cluster_type',
-      render: () => 'TendbCluster',
-    },
-    {
-      label: t('状态'),
-      render: ({ data }: {data: IClusterData}) => (
-        <RenderClusterStatus data={data.status} />
-      ),
-    },
-    {
-      label: t('操作'),
-      width: '100',
-      field: 'action',
-      render: ({ data }: {data: IClusterData}) => (
-        <bk-button
-          theme="primary"
-          text
-          onClick={() => handleRemove(data)}>
-          { t('删除') }
-        </bk-button>
-      ),
-    },
-  ];
-
-  const rules = [
-    {
-      validator: (value: number[]) => value.length > 0,
-      message: t('目标集群不能为空'),
-      trigger: 'change',
-    },
-  ];
-
-  const isLoading = ref(false);
-  const isShowClusterSelector = ref(false);
-  const formItemRef = ref();
-  const clusterSelectorValue = shallowRef<{[key: string]: Array<IClusterData>}>({ [ClusterTypes.TENDBCLUSTER]: [] });
-  const targetClusterList = shallowRef<Array<IClusterData>>([]);
-
-  let isInnerChange = false;
-  const triggerChange = () => {
-    isInnerChange = true;
-    emits('update:modelValue', targetClusterList.value.map(item => item.id));
-  };
-
-  const fetchClusterData = (clusterIds: number[]) => {
-    isLoading.value = true;
-    queryClusters({
-      cluster_filters: clusterIds.map(id => ({
-        id,
-      })),
-      bk_biz_id: currentBizId,
-    })
-      .then((data) => {
-        targetClusterList.value = data;
-      })
-      .finally(() => {
-        isLoading.value = false;
-      });
-  };
-
-  watch(() => props.modelValue, () => {
-    if (isInnerChange) {
-      isInnerChange = false;
-      return;
-    }
-    if (props.modelValue.length < 1) {
-      targetClusterList.value = [];
-    } else {
-      fetchClusterData(props.modelValue);
-    }
-  });
-
-  const handleShowClusterSelector = () => {
-    isShowClusterSelector.value = true;
-  };
-
-  const handleRemove = (clusterData: IClusterData) => {
-    const result = targetClusterList.value.reduce((result, item) => {
-      if (item.id !== clusterData.id) {
-        result.push(item);
-      }
-      return result;
-    }, [] as IClusterData[]);
-
-    targetClusterList.value = result;
-
-    // ClusterSelector 的值回填
-    clusterSelectorValue.value = {
-      [ClusterTypes.TENDBCLUSTER]: _.filter(result, item => item.cluster_type === ClusterTypes.TENDBCLUSTER),
-    };
-    triggerChange();
-  };
-
-  const handelClusterChange = (selected: { [key: string]: Array<IClusterData> }) => {
-    targetClusterList.value = Object.keys(selected).reduce(
-      (list: IClusterData[], key) => list.concat(...selected[key]),
-      [],
-    );
-    formItemRef.value.clearValidate();
-    clusterSelectorValue.value = selected;
-    triggerChange();
-  };
-</script>
-<style lang="less">
-  .sql-execute-target-cluster {
-    display: block;
-    margin-top: 16px;
-    margin-bottom: 24px;
-
-    .cluster-checking {
-      height: 86px;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/TaskTips.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/TaskTips.vue
deleted file mode 100644
index 8a54a0cec8..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/TaskTips.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 style="margin-bottom: 40px">
-    <BkAlert
-      v-if="taskCount < 1"
-      closable
-      theme="info"
-      :title="t('提供多个集群批量执行sql文件功能')" />
-    <div v-else>
-      <BkAlert
-        :show-icon="false"
-        theme="warning">
-        <div class="sql-execute-task-tips">
-          <div
-            class="loading-flag rotate-loading"
-            style="width: 12px; height: 12px">
-            <DbIcon
-              svg
-              type="sync-pending" />
-          </div>
-          <div style="padding-left: 4px">
-            <span>{{ t('目前已有') }}</span>
-            <span
-              ref="rootRef"
-              class="strong-number">
-              {{ taskCount }}
-            </span>
-            <span>{{ t('个模拟执行任务待确认_可点击查看最新动态') }}</span>
-          </div>
-        </div>
-      </BkAlert>
-      <div
-        ref="popRef"
-        class="sql-execute-task-popover-list">
-        <div
-          v-for="item in taskList"
-          :key="item.root_id"
-          class="task-item">
-          <div>
-            <DbIcon
-              v-if="item.isPending"
-              type="loading" />
-            <DbIcon
-              v-else-if="item.isSucceeded"
-              style="color: #2dcb56"
-              type="check-circle-fill" />
-            <DbIcon
-              v-else
-              style="color: #ea3636"
-              type="delete-fill" />
-          </div>
-          <div class="task-create-time">
-            {{ item.created_at }}
-          </div>
-          <div class="task-create-action">
-            <div
-              v-bk-tooltips="t('移除')"
-              @click="handleRevokeTask(item)">
-              <DbIcon type="delete" />
-            </div>
-            <div
-              v-bk-tooltips="t('执行日志')"
-              @click="handleGoTaskLog(item)">
-              <DbIcon
-                class="ml8"
-                type="link" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  import { useTaskCount } from '@views/mysql/common/hooks/useTaskCount';
-
-  const { t } = useI18n();
-  const { rootRef, popRef, taskList, taskCount, handleRevokeTask, handleGoTaskLog } = useTaskCount('tendbcluster');
-</script>
-<style lang="less">
-  .sql-execute-task-tips {
-    display: flex;
-    align-items: center;
-
-    .loading-flag {
-      display: flex;
-      width: 12px;
-      height: 12px;
-      align-items: center;
-      justify-self: center;
-    }
-
-    .strong-number {
-      padding: 0 4px;
-      font-weight: bold;
-      color: #3a84ff;
-      cursor: pointer;
-    }
-  }
-
-  .sql-execute-task-popover-list {
-    max-height: 280px;
-    padding: 12px 16px 12px 12px;
-    margin: -5px -9px;
-    overflow: auto;
-    font-size: 12px;
-    line-height: 24px;
-    color: #63656e;
-
-    .task-item {
-      display: flex;
-      align-items: center;
-      height: 24px;
-
-      &:hover {
-        color: #3a84ff;
-      }
-    }
-
-    .task-create-time {
-      padding-right: 16px;
-      padding-left: 8px;
-    }
-
-    .task-create-action {
-      display: flex;
-      font-size: 12px;
-      color: #3a84ff;
-      align-items: center;
-
-      & > * {
-        cursor: pointer;
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/Index.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/Index.vue
deleted file mode 100644
index ce81cc7577..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/Index.vue
+++ /dev/null
@@ -1,108 +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>
-  <BkFormItem :label="t('执行前备份')">
-    <BkSwitcher
-      v-model="isNeedBackup"
-      size="small"
-      theme="primary"
-      @change="handleNeedBackupChange" />
-  </BkFormItem>
-  <BkFormItem
-    v-if="isNeedBackup"
-    :label="t('备份设置')"
-    property="backup"
-    required
-    :rules="rules">
-    <RenderData>
-      <RenderDataRow
-        v-for="(item, index) in localValue"
-        :key="item.rowKey"
-        ref="rowRef"
-        :data="item"
-        :removeable="localValue.length < 2"
-        @add="(value: IDataRow) => handleAppend(value, index)"
-        @change="(data: IDataRow) => handleChange(data, index)"
-        @remove="handleRemove(index)" />
-    </RenderData>
-  </BkFormItem>
-</template>
-<script setup lang="ts">
-  import { ref, shallowRef, watch } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import RenderData from './RenderData/Index.vue';
-  import RenderDataRow, { createRowData, type IDataRow } from './RenderData/Row.vue';
-
-  interface Props {
-    modelValue: Array<IDataRow>;
-  }
-  interface Emits {
-    (e: 'update:modelValue', value: Array<IDataRow>): void;
-  }
-
-  const props = defineProps<Props>();
-  const emit = defineEmits<Emits>();
-
-  const { t } = useI18n();
-  const isNeedBackup = ref(false);
-
-  const rowRef = ref();
-  const localValue = shallowRef<IDataRow[]>([]);
-
-  const rules = [
-    {
-      validator: () => Promise.all(rowRef.value.map((item: { getValue: () => Promise<string[]> }) => item.getValue())),
-      message: t('备份设置不能为空'),
-      trigger: 'change',
-    },
-  ];
-
-  watch(
-    () => props.modelValue,
-    () => {
-      isNeedBackup.value = props.modelValue.length > 0;
-      localValue.value = props.modelValue;
-    },
-  );
-
-  // 切换开启备份
-  const handleNeedBackupChange = (checked: boolean) => {
-    if (checked) {
-      emit('update:modelValue', [createRowData()]);
-    } else {
-      emit('update:modelValue', []);
-    }
-  };
-
-  const handleChange = (data: IDataRow, index: number) => {
-    const result = [...props.modelValue];
-    result.splice(index, 1, data);
-    emit('update:modelValue', result);
-  };
-
-  // 追加一个 DB
-  const handleAppend = (data: IDataRow, index: number) => {
-    const result = [...props.modelValue];
-    result.splice(index + 1, 0, data);
-    emit('update:modelValue', result);
-  };
-
-  // 删除一个 DB
-  const handleRemove = (index: number) => {
-    const result = [...props.modelValue];
-    result.splice(index, 1);
-    emit('update:modelValue', result);
-  };
-</script>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/Index.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/Index.vue
deleted file mode 100644
index d6933ace98..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/Index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <RenderTable>
-    <RenderTableHeadColumn>
-      {{ t('备份DB') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn>
-      {{ t('备份源') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn>
-      {{ t('备份表名') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :required="false"
-      :width="90">
-      {{ t('操作') }}
-    </RenderTableHeadColumn>
-    <template #data>
-      <slot />
-    </template>
-  </RenderTable>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
-  import RenderTable from '@components/render-table/Index.vue';
-
-  const { t } = useI18n();
-</script>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/RenderBackupSource.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/RenderBackupSource.vue
deleted file mode 100644
index 0f51b3ce24..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/RenderBackupSource.vue
+++ /dev/null
@@ -1,74 +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>
-  <TableEditSelect
-    ref="editSelectRef"
-    :list="list"
-    :model-value="modelValue"
-    :placeholder="t('请选择备份源')"
-    :rules="rules"
-    @change="(value) => handleChange(value as string)" />
-</template>
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import TableEditSelect from '@views/mysql/common/edit/Select.vue';
-
-  interface Props {
-    modelValue: string;
-  }
-
-  interface Emits {
-    (e: 'change', value: string): void;
-  }
-
-  interface Exposes {
-    getValue: (field: string) => Promise<Record<string, string>>;
-  }
-
-  defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-  const rules = [
-    {
-      validator: (value: string) => Boolean(value),
-      message: t('备份源不能为空'),
-    },
-  ];
-
-  const list = [
-    {
-      id: 'remote',
-      name: 'remote',
-    },
-  ];
-
-  const editSelectRef = ref();
-  const localValue = ref('');
-
-  const handleChange = (value: string) => {
-    localValue.value = value;
-    emits('change', value);
-  };
-
-  defineExpose<Exposes>({
-    getValue(field: string) {
-      return editSelectRef.value.getValue().then(() => ({
-        [field]: localValue.value,
-      }));
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/Row.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/Row.vue
deleted file mode 100644
index 4ded730019..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/backup/RenderData/Row.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <tr>
-    <td style="padding: 0">
-      <RenderDbName
-        ref="dbPatternsRef"
-        :cluster-id="0"
-        :model-value="data.db_patterns"
-        @change="handleDbPatternsChange" />
-    </td>
-    <td style="padding: 0">
-      <RenderBackupSource
-        ref="backupOnRef"
-        :model-value="data.backup_on"
-        @change="handleBackupOnChange" />
-    </td>
-    <td style="padding: 0">
-      <RenderTableName
-        ref="tablePatternsRef"
-        :cluster-id="0"
-        :model-value="data.table_patterns"
-        @change="handleTablePatternsChange" />
-    </td>
-    <OperateColumn
-      :removeable="removeable"
-      @add="handleAppend"
-      @remove="handleRemove" />
-  </tr>
-</template>
-<script lang="ts">
-  import { random } from '@utils';
-
-  export interface IDataRow {
-    rowKey?: string;
-    db_patterns: string[];
-    backup_on: string;
-    table_patterns: string[];
-  }
-
-  // 创建表格数据
-  export const createRowData = (data = {} as Partial<IDataRow>) => ({
-    rowKey: random(),
-    db_patterns: data.db_patterns || [],
-    backup_on: '',
-    table_patterns: data.table_patterns || [],
-  });
-</script>
-<script setup lang="ts">
-  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
-
-  import RenderDbName from '@views/mysql/common/edit-field/DbName.vue';
-  import RenderTableName from '@views/mysql/common/edit-field/TableName.vue';
-
-  import RenderBackupSource from './RenderBackupSource.vue';
-
-  interface Props {
-    data: IDataRow;
-    removeable: boolean;
-  }
-
-  interface Emits {
-    (e: 'add', params: IDataRow): void;
-    (e: 'remove'): void;
-    (e: 'change', value: IDataRow): void;
-  }
-
-  interface Exposes {
-    getValue: () => Promise<any[]>;
-  }
-
-  const props = defineProps<Props>();
-
-  const emits = defineEmits<Emits>();
-
-  const dbPatternsRef = ref();
-  const backupOnRef = ref();
-  const tablePatternsRef = ref();
-
-  const dbPatterns = ref();
-  const backupOn = ref('');
-  const tablePatterns = ref();
-
-  const triggerChange = () => {
-    emits('change', {
-      rowKey: props.data.rowKey,
-      db_patterns: dbPatterns.value,
-      backup_on: backupOn.value,
-      table_patterns: tablePatterns.value,
-    });
-  };
-
-  const handleDbPatternsChange = (value: string[]) => {
-    dbPatterns.value = value;
-    triggerChange();
-  };
-  const handleBackupOnChange = (value: string) => {
-    backupOn.value = value;
-    triggerChange();
-  };
-  const handleTablePatternsChange = (value: string[]) => {
-    tablePatterns.value = value;
-    triggerChange();
-  };
-
-  const handleAppend = () => {
-    emits('add', createRowData());
-  };
-
-  const handleRemove = () => {
-    if (props.removeable) {
-      return;
-    }
-    emits('remove');
-  };
-
-  defineExpose<Exposes>({
-    getValue() {
-      return Promise.all([
-        dbPatternsRef.value.getValue('db_patterns'),
-        backupOnRef.value.getValue('backup_on'),
-        tablePatternsRef.value.getValue('table_patterns'),
-      ]);
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/Index.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/Index.vue
deleted file mode 100644
index 5ef7cb135b..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/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>
-  <BkFormItem
-    :label="t('SQL来源')"
-    required>
-    <BkRadioGroup
-      v-model="localImportMode"
-      @change="handleImportModeChange">
-      <BkRadioButton
-        label="manual"
-        style="width: 140px">
-        {{ t('手动输入') }}
-      </BkRadioButton>
-      <BkRadioButton
-        label="file"
-        style="width: 140px">
-        {{ t('SQL文件') }}
-      </BkRadioButton>
-    </BkRadioGroup>
-  </BkFormItem>
-  <KeepAlive>
-    <Component
-      :is="renderCom"
-      ref="fileRef"
-      :model-value="localFileList"
-      @change="handleChange"
-      @grammar-check="handleGrammarCheck" />
-  </KeepAlive>
-</template>
-<script setup lang="ts">
-  import { computed, ref, watch } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import LocalFile from './local-file/Index.vue';
-  import ManualInput from './manual-input/Index.vue';
-
-  interface Props {
-    importMode: string;
-    modelValue: string[];
-  }
-  interface Emits {
-    (e: 'update:modelValue', value: string[]): void;
-    (e: 'update:importMode', value: string): void;
-    (e: 'grammar-check', doCheck: boolean, checkPass: boolean): void;
-  }
-
-  const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-  const fileRef = ref();
-  const localImportMode = ref(props.importMode);
-  const localFileList = ref<string[]>([]);
-
-  const comMap = {
-    manual: ManualInput,
-    file: LocalFile,
-  };
-  const renderCom = computed(() => comMap[localImportMode.value as keyof typeof comMap]);
-
-  watch(
-    () => props.importMode,
-    () => {
-      localImportMode.value = props.importMode;
-    },
-  );
-
-  watch(
-    () => props.modelValue,
-    () => {
-      localFileList.value = props.modelValue;
-    },
-  );
-
-  // 文件来源改变时需要重置文件列表和语法检测
-  const handleImportModeChange = () => {
-    localFileList.value = [];
-  };
-
-  // 文件列表
-  const handleChange = (value: string[]) => {
-    emits('update:modelValue', value);
-    emits('update:importMode', localImportMode.value);
-  };
-
-  // 语法检测状态
-  const handleGrammarCheck = (doCheck: boolean, checkPass: boolean) => {
-    emits('grammar-check', doCheck, checkPass);
-  };
-</script>
-<style lang="less" scoped>
-  .label-tips {
-    position: absolute;
-    top: 0;
-    padding-left: 16px;
-    font-weight: normal;
-    color: @gray-color;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/editor/Index.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/editor/Index.vue
deleted file mode 100644
index c5d64a695f..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/editor/Index.vue
+++ /dev/null
@@ -1,235 +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
-    ref="rootRef"
-    class="sql-execute-editor"
-    :class="{ 'is-full-screen': isFullscreen }">
-    <div class="editor-layout-header">
-      <span>{{ title }}</span>
-      <div class="editro-action-box">
-        <DbIcon
-          type="arrow-down"
-          @click="handleDownload" />
-        <DbIcon
-          v-if="isFullscreen"
-          type="un-full-screen"
-          @click="handleExitFullScreen" />
-        <DbIcon
-          v-else
-          type="full-screen"
-          @click="handleFullScreen" />
-      </div>
-    </div>
-    <BkResizeLayout
-      :border="false"
-      class="resize-wrapper"
-      :class="{
-        'resize-disabled': isMessageListFolded,
-      }"
-      :disabled="isMessageListFolded"
-      :initial-divide="resizeLayoutInitialDivide"
-      :max="300"
-      :min="48"
-      placement="bottom">
-      <template #main>
-        <div
-          ref="editorRef"
-          style="height: 100%" />
-      </template>
-      <template #aside>
-        <RenderMessageList
-          v-model="isMessageListFolded"
-          class="editor-error"
-          :data="messageList" />
-      </template>
-    </BkResizeLayout>
-  </div>
-</template>
-<script setup lang="ts">
-  import * as monaco from 'monaco-editor';
-  import screenfull from 'screenfull';
-  import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
-
-  import RenderMessageList, { type IMessageList } from './MessageList.vue';
-
-  interface Props {
-    modelValue: string;
-    title: string;
-    readonly?: boolean;
-    messageList: IMessageList;
-  }
-
-  interface Emits {
-    (e: 'update:modelValue', value: string): void;
-    (e: 'change', value: string): void;
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    readonly: false,
-    messageList: () => [],
-    syntaxChecking: false,
-  });
-  const emits = defineEmits<Emits>();
-
-  const rootRef = ref();
-  const editorRef = ref();
-  const isFullscreen = ref(false);
-  const resizeLayoutInitialDivide = ref(48);
-  const isMessageListFolded = ref(true);
-
-  let editor: monaco.editor.IStandaloneCodeEditor;
-
-  watch(
-    () => props.modelValue,
-    () => {
-      if (props.modelValue !== editor.getValue()) {
-        editor.setValue(props.modelValue);
-        isMessageListFolded.value = true;
-      }
-    },
-  );
-
-  watch(isMessageListFolded, () => {
-    if (isMessageListFolded.value) {
-      resizeLayoutInitialDivide.value = 48;
-      return;
-    }
-    resizeLayoutInitialDivide.value = Math.min(24 + props.messageList.length * 24, 200);
-  });
-
-  const handleToggleScreenfull = () => {
-    if (screenfull.isFullscreen) {
-      isFullscreen.value = true;
-    } else {
-      isFullscreen.value = false;
-    }
-    editor.layout();
-  };
-
-  const handleReize = () => {
-    editor.layout();
-  };
-
-  const handleDownload = () => {
-    const link = document.createElement('a');
-    link.download = `${props.title.replace(/\s/g, '')}.sql`;
-    link.style.display = 'none';
-    // 字符内容转变成blob地址
-    const blob = new Blob([props.modelValue], { type: 'sql' });
-    link.href = URL.createObjectURL(blob);
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-
-  const handleFullScreen = () => {
-    screenfull.toggle(rootRef.value);
-  };
-
-  const handleExitFullScreen = () => {
-    screenfull.toggle(rootRef.value);
-  };
-
-  onMounted(() => {
-    editor = monaco.editor.create(editorRef.value, {
-      language: 'sql',
-      theme: 'vs-dark',
-      readOnly: props.readonly,
-      minimap: {
-        enabled: false,
-      },
-      wordWrap: 'on',
-      scrollbar: {
-        alwaysConsumeMouseWheel: false,
-      },
-      automaticLayout: true,
-    });
-    editor.onDidChangeModelContent(() => {
-      const value = editor.getValue();
-      emits('update:modelValue', value);
-      emits('change', value);
-    });
-    screenfull.on('change', handleToggleScreenfull);
-    window.addEventListener('resize', handleReize);
-  });
-
-  onBeforeUnmount(() => {
-    editor.dispose();
-    screenfull.off('change', handleToggleScreenfull);
-    window.removeEventListener('resize', handleReize);
-  });
-</script>
-<style lang="less" scoped>
-  .sql-execute-editor {
-    position: relative;
-    z-index: 0;
-    height: 500px;
-
-    &.is-full-screen {
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-
-      .resize-wrapper {
-        flex: 1;
-      }
-    }
-
-    .editor-layout-header {
-      display: flex;
-      align-items: center;
-      height: 40px;
-      padding-right: 16px;
-      padding-left: 25px;
-      font-size: 14px;
-      color: #c4c6cc;
-      background: #2e2e2e;
-
-      .editro-action-box {
-        margin-left: auto;
-        color: #979ba5;
-
-        & > * {
-          margin-left: 12px;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .resize-wrapper {
-      height: 460px;
-      background: #212121;
-
-      &.resize-disabled {
-        :deep(.bk-resize-layout-aside) {
-          &::after {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .editor-error {
-      position: absolute;
-      inset: 0;
-    }
-
-    :deep(.bk-resize-layout) {
-      .bk-resize-layout-aside {
-        border-top: none;
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/editor/MessageList.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/editor/MessageList.vue
deleted file mode 100644
index b35f03c07e..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/editor/MessageList.vue
+++ /dev/null
@@ -1,181 +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="data.length > 0"
-    class="sql-execute-error-message-list">
-    <div
-      v-if="isFolded"
-      class="message-total-wrapper"
-      @click="handleShowError">
-      <DbIcon
-        style="margin-right: 4px; color: #b34747"
-        type="delete-fill" />
-      <I18nT
-        v-if="totalMap.errorNum"
-        keypath="检测失败_共n个错误"
-        tag="span">
-        <span style="color: #b34747">{{ totalMap.errorNum }}</span>
-      </I18nT>
-      <template v-if="totalMap.warningNum > 0">
-        <span v-if="totalMap.errorNum">，</span>
-        <I18nT
-          keypath="n个告警提示"
-          tag="span">
-          <span style="color: #ff9c01">{{ totalMap.warningNum }}</span>
-        </I18nT>
-      </template>
-    </div>
-    <div
-      v-else
-      class="message-list-wrapper">
-      <div
-        v-for="(item, index) in data"
-        :key="index"
-        class="item-box">
-        <div class="item-head">
-          <DbIcon
-            v-if="item.type === 'error'"
-            style="color: #b34747"
-            type="delete-fill" />
-          <DbIcon
-            v-else
-            style="color: #e59e1e"
-            type="early-warning" />
-        </div>
-        <div>
-          <span>{{ item.message }}</span>
-          <span class="error-line-number">[{{ item.line }}]</span>
-        </div>
-      </div>
-    </div>
-    <div
-      class="toggle-btn"
-      @click="handleToogle">
-      <DbIcon
-        v-if="isFolded"
-        type="up-big" />
-      <DbIcon
-        v-else
-        type="down-big" />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import { computed, ref } from 'vue';
-
-  export type IMessageList = Array<{ type: 'warning' | 'error'; line: number; message: string }>;
-
-  interface Props {
-    modelValue: boolean;
-    data: IMessageList;
-  }
-
-  interface Emits {
-    (e: 'update:modelValue', value: boolean): void;
-  }
-
-  const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const isFolded = ref(props.modelValue);
-  const totalMap = computed(() => {
-    let errorNum = 0;
-    let warningNum = 0;
-    props.data.forEach((item) => {
-      if (item.type === 'error') {
-        errorNum += 1;
-      } else if (item.type === 'warning') {
-        warningNum += 1;
-      }
-    });
-
-    return {
-      errorNum,
-      warningNum,
-    };
-  });
-
-  const handleShowError = () => {
-    isFolded.value = false;
-    emits('update:modelValue', false);
-  };
-
-  const handleToogle = () => {
-    isFolded.value = !isFolded.value;
-    emits('update:modelValue', isFolded.value);
-  };
-</script>
-<style lang="less">
-  .sql-execute-error-message-list {
-    position: relative;
-    height: 100%;
-    overflow-y: auto;
-    font-size: 12px;
-    background: #212121;
-    border-left: 4px solid #b34747;
-
-    .message-total-wrapper {
-      padding: 8px 16px;
-      color: #dcdee5;
-      cursor: pointer;
-    }
-
-    .message-list-wrapper {
-      padding: 12px 0;
-      overflow-y: auto;
-
-      .item-box {
-        display: flex;
-        padding: 4px 20px 4px 0;
-        line-height: 16px;
-        color: #dcdee5;
-        cursor: pointer;
-        align-items: flex-start;
-
-        &:hover {
-          background: #313238;
-        }
-
-        .item-head {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 16px;
-          padding-right: 10px;
-          padding-left: 16px;
-        }
-
-        .error-line-number {
-          padding-left: 4px;
-          color: #979ba5;
-        }
-      }
-    }
-
-    .toggle-btn {
-      position: absolute;
-      top: 0;
-      right: 10px;
-      display: flex;
-      width: 30px;
-      height: 30px;
-      font-size: 18px;
-      color: #dcdee5;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/Index.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/Index.vue
deleted file mode 100644
index 22a87a0b99..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/Index.vue
+++ /dev/null
@@ -1,410 +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>
-  <BkFormItem
-    :label="t('SQL文件')"
-    property="execute_sql_files"
-    required
-    :rules="rules">
-    <template #labelAppend>
-      <span style="font-size: 12px; font-weight: normal; color: #8a8f99">
-        （{{ t('最终执行结果以SQL文件内容为准') }}）
-      </span>
-    </template>
-    <div class="sql-execute-local-file">
-      <div style="margin-bottom: 16px">
-        <BkButton @click="handleSelectLocalFile">
-          <DbIcon
-            style="margin-right: 3px"
-            type="add" />
-          <span>{{ t('添加文件') }}</span>
-        </BkButton>
-        <span style="margin-left: 12px; font-size: 12px; color: #8a8f99">
-          {{
-            t(
-              '仅支持_sql文件_文件名不能包含空格_上传后_SQL执行顺序默认为从上至下_可拖动文件位置_变换文件的执行顺序文件',
-            )
-          }}
-        </span>
-      </div>
-      <div
-        v-if="uploadFileNameList.length > 0"
-        class="editor-layout">
-        <div class="editor-layout-left">
-          <RenderFileList
-            v-model="selectFileName"
-            :data="uploadFileNameList"
-            :file-data="uploadFileDataMap"
-            @remove="handleRemove"
-            @sort="handleFileSortChange" />
-        </div>
-        <div class="editor-layout-right">
-          <BkLoading
-            class="content-loading"
-            :loading="currentSelectFileData.isUploading || isContentLoading">
-            <Editor
-              :message-list="currentSelectFileData.messageList"
-              :model-value="currentSelectFileData.content"
-              readonly
-              :title="selectFileName" />
-            <CheckSuccess
-              v-if="currentSelectFileData.messageList.length < 1 && !currentSelectFileData.isCheckFailded" />
-            <CheckError :data="currentSelectFileData" />
-          </BkLoading>
-        </div>
-      </div>
-      <input
-        ref="uploadRef"
-        accept=".sql"
-        multiple
-        style="position: absolute; width: 0; height: 0"
-        type="file"
-        @change="handleStartUpdate" />
-    </div>
-  </BkFormItem>
-</template>
-<script setup lang="ts">
-  import _ from 'lodash';
-  import { computed, onActivated, onDeactivated, ref } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import { grammarCheck } from '@services/source/sqlImport';
-  import { getFileContent } from '@services/source/storage';
-
-  import { getSQLFilename } from '@utils';
-
-  import { updateFilePath } from '../../../Index.bak.vue';
-  import Editor from '../editor/Index.vue';
-
-  import CheckError from './components/CheckError.vue';
-  import CheckSuccess from './components/CheckSuccess.vue';
-  import RenderFileList, { createFileData, type IFileData } from './components/FileList.vue';
-
-  interface Props {
-    modelValue: string[];
-  }
-
-  interface Emits {
-    (e: 'change', value: string[]): void;
-    (e: 'grammar-check', doCheck: boolean, checkPass: boolean): void;
-  }
-
-  const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  let isKeepAliveActive = false;
-
-  const isContentLoading = ref(false);
-  const uploadRef = ref();
-  const selectFileName = ref('');
-  const uploadFileNameList = shallowRef<Array<string>>([]);
-  const uploadFileDataMap = shallowRef<Record<string, IFileData>>({});
-
-  // 当前选择文件数据
-  const currentSelectFileData = computed(() => uploadFileDataMap.value[selectFileName.value]);
-
-  const rules = [
-    {
-      validator: () => {
-        if (!isKeepAliveActive) {
-          return true;
-        }
-        const uploadFileDataList = Object.values(uploadFileDataMap.value);
-        for (let i = 0; i < uploadFileDataList.length; i++) {
-          const { isUploadFailed, isCheckFailded } = uploadFileDataList[i];
-          if (isUploadFailed) {
-            return false;
-          }
-          if (isCheckFailded) {
-            return false;
-          }
-        }
-        return true;
-      },
-      message: t('SQL文件无效'),
-      trigger: 'change',
-    },
-  ];
-
-  // 文件结果
-  const getResultValue = () =>
-    uploadFileNameList.value.map((localFileName) => uploadFileDataMap.value[localFileName].realFilePath);
-
-  // 获取文件内容
-  const fetchFileContent = (fileName: string) => {
-    if (!updateFilePath.value) {
-      return;
-    }
-    isContentLoading.value = true;
-    const fileDataMap = { ...uploadFileDataMap.value };
-    getFileContent({
-      file_path: `${updateFilePath.value}/${fileName}`,
-    })
-      .then((data) => {
-        fileDataMap[getSQLFilename(fileName)].content = data.content;
-        uploadFileDataMap.value = fileDataMap;
-      })
-      .finally(() => {
-        isContentLoading.value = false;
-      });
-  };
-
-  let isInnerChange = false;
-
-  // 同步外部值
-  watch(
-    () => props.modelValue,
-    () => {
-      if (isInnerChange) {
-        isInnerChange = false;
-        return;
-      }
-      if (props.modelValue.length < 1) {
-        return;
-      }
-      const localFileNameList = [] as string[];
-      const filePathMap = {} as Record<string, string>;
-
-      props.modelValue.forEach((filePath: string) => {
-        // 本地 SQL 文件上传后会拼接随机数前缀，需要解析正确的文件名
-        const localFileName = getSQLFilename(filePath);
-        localFileNameList.push(localFileName);
-        filePathMap[localFileName] = filePath;
-      });
-
-      uploadFileNameList.value = localFileNameList;
-
-      uploadFileDataMap.value = uploadFileNameList.value.reduce(
-        (result, localFileName) => ({
-          ...result,
-          [localFileName]: createFileData({
-            isSuccess: true,
-            isCheckFailded: false,
-            realFilePath: filePathMap[localFileName],
-          }),
-        }),
-        {} as Record<string, IFileData>,
-      );
-
-      // 默认选中第一个文件
-      [selectFileName.value] = uploadFileNameList.value;
-      if (props.modelValue.length > 0) {
-        fetchFileContent(uploadFileDataMap.value[selectFileName.value].realFilePath);
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  watch(
-    selectFileName,
-    () => {
-      // 编辑状态不需要 SQL 文件检测，需要异步获取文件内容
-      if (
-        !selectFileName.value ||
-        uploadFileDataMap.value[selectFileName.value].content ||
-        uploadFileDataMap.value[selectFileName.value].grammarCheck
-      ) {
-        return;
-      }
-      fetchFileContent(uploadFileDataMap.value[selectFileName.value].realFilePath);
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const triggerChange = () => {
-    const uploadFileDataList = Object.values(uploadFileDataMap.value);
-    for (let i = 0; i < uploadFileDataList.length; i++) {
-      const { isUploadFailed, isCheckFailded } = uploadFileDataList[i];
-      if (isUploadFailed || isCheckFailded) {
-        emits('grammar-check', false, false);
-        return;
-      }
-    }
-    emits('grammar-check', true, true);
-    isInnerChange = true;
-    emits('change', getResultValue());
-  };
-
-  // 开始选择本地文件
-  const handleSelectLocalFile = () => {
-    uploadRef.value.click();
-  };
-
-  // 开始上传本地文件
-  const handleStartUpdate = (event: Event) => {
-    const { files = [] } = event.target as HTMLInputElement;
-    if (!files) {
-      return;
-    }
-    const fileNameList: Array<string> = [];
-    const currentFileDataMap = {} as Record<string, IFileData>;
-    const params = new FormData();
-
-    Array.from(files).forEach((curFile) => {
-      fileNameList.push(curFile.name);
-      currentFileDataMap[curFile.name] = createFileData({
-        file: curFile,
-        isUploading: true,
-      });
-
-      // 上传文件大小限制 1GB (1024 * 1024 * 1024 = 1073741824)
-      if (curFile.size > 1073741824) {
-        currentFileDataMap[curFile.name] = {
-          ...currentFileDataMap[curFile.name],
-          realFilePath: '/',
-          isSuccess: true,
-          content: '--',
-          messageList: [],
-          isCheckFailded: true,
-          isUploadFailed: true,
-          isUploading: false,
-          uploadErrorMessage: t('文件上传失败——文件大小超过限制（最大为1GB）'),
-          grammarCheck: undefined,
-        };
-        return;
-      }
-      params.append('sql_files', curFile);
-    });
-
-    uploadFileNameList.value = _.uniq([...uploadFileNameList.value, ...fileNameList]);
-    uploadFileDataMap.value = {
-      ...uploadFileDataMap.value,
-      ...currentFileDataMap,
-    };
-
-    if (!selectFileName.value || !uploadFileDataMap.value[selectFileName.value]) {
-      const [firstFileName] = fileNameList;
-      selectFileName.value = firstFileName;
-    }
-
-    grammarCheck(params)
-      .then((data) => {
-        const lastUploadFileDataMap = { ...uploadFileDataMap.value };
-        Object.keys(data).forEach((realFilePath) => {
-          const grammarCheckResult = data[realFilePath];
-          lastUploadFileDataMap[grammarCheckResult.raw_file_name] = {
-            ...lastUploadFileDataMap[grammarCheckResult.raw_file_name],
-            realFilePath,
-            isSuccess: true,
-            content: grammarCheckResult.content,
-            messageList: grammarCheckResult.messageList,
-            isCheckFailded: grammarCheckResult.isError,
-            grammarCheck: grammarCheckResult,
-          };
-        });
-        uploadFileDataMap.value = lastUploadFileDataMap;
-        triggerChange();
-      })
-      .catch(() => {
-        const lastUploadFileDataMap = { ...uploadFileDataMap.value };
-        fileNameList.forEach((fileName) => {
-          lastUploadFileDataMap[fileName] = {
-            ...lastUploadFileDataMap[fileName],
-            isUploadFailed: true,
-          };
-        });
-        uploadFileDataMap.value = lastUploadFileDataMap;
-        emits('grammar-check', false, false);
-      })
-      .finally(() => {
-        const lastUploadFileDataMap = { ...uploadFileDataMap.value };
-        fileNameList.forEach((fileName) => {
-          lastUploadFileDataMap[fileName] = {
-            ...lastUploadFileDataMap[fileName],
-            isUploading: false,
-          };
-        });
-        uploadFileDataMap.value = lastUploadFileDataMap;
-      });
-  };
-  // 文件排序
-  const handleFileSortChange = (list: string[]) => {
-    uploadFileNameList.value = list;
-    triggerChange();
-  };
-  // 删除文件
-  const handleRemove = (fileName: string, index: number) => {
-    const fileList = [...uploadFileNameList.value];
-    const lastUploadFileDataMap = { ...uploadFileDataMap.value };
-
-    fileList.splice(index, 1);
-    uploadFileNameList.value = fileList;
-    delete lastUploadFileDataMap[fileName];
-    uploadFileDataMap.value = lastUploadFileDataMap;
-
-    if (fileName === selectFileName.value && fileList.length > 0) {
-      [selectFileName.value] = fileList;
-    }
-    triggerChange();
-  };
-
-  onActivated(() => {
-    isKeepAliveActive = true;
-    triggerChange();
-  });
-
-  onDeactivated(() => {
-    isKeepAliveActive = false;
-  });
-</script>
-<style lang="less">
-  .sql-execute-local-file {
-    .label-tips {
-      position: absolute;
-      top: 0;
-      padding-left: 16px;
-      font-weight: normal;
-      color: @gray-color;
-    }
-
-    .editor-layout {
-      display: flex;
-      height: 500px;
-      background: #2e2e2e;
-
-      .editor-layout-left {
-        width: 238px;
-      }
-
-      .editor-layout-right {
-        position: relative;
-        height: 100%;
-        flex: 1;
-
-        .editor-error-tips {
-          position: absolute;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          padding-left: 16px;
-          background: #212121;
-          border-left: 4px solid #b34747;
-          border-radius: 0 0 2px 2px;
-        }
-
-        .content-loading {
-          .bk-loading-mask {
-            background: transparent !important;
-          }
-        }
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/SqlFileList.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/SqlFileList.vue
deleted file mode 100644
index a60f40590d..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/SqlFileList.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>
-  <div class="sql-execute-sql-file-list">
-    <div class="file-list-title">
-      <span>{{ t('文件列表') }}</span>
-      <span style="font-size: 12px; font-weight: normal; color: #979ba5">
-        {{ t('按顺序执行') }}
-      </span>
-    </div>
-    <div class="file-list">
-      <Vuedraggable
-        v-model="localList"
-        item-key="id"
-        @end="handleDragEnd">
-        <template #item="{ element: fileItemData }">
-          <div
-            class="file-item"
-            :class="{
-              active: fileItemData.name === modelValue,
-            }"
-            @click="handleClick(fileItemData.name)">
-            <span v-overflow-tips>{{ fileItemData.name }}</span>
-          </div>
-        </template>
-      </Vuedraggable>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import { useI18n } from 'vue-i18n';
-  import Vuedraggable from 'vuedraggable';
-
-  export interface SqlFileData {
-    [key: string]: {
-      content: string;
-      path: string;
-      url: string;
-    };
-  }
-</script>
-<script setup lang="ts">
-  import { ref, watch } from 'vue';
-
-  interface Props {
-    modelValue: string;
-    data: Array<string>;
-  }
-
-  interface Emits {
-    (e: 'update:modelValue', value: string): void;
-    (e: 'remove', value: string, index: number): void;
-    (e: 'sort', value: string[]): void;
-    (e: 'changeName', value: string): void;
-  }
-
-  const props = defineProps<Props>();
-
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  const localList = ref<Array<Record<'id' | 'name', string>>>([]);
-
-  watch(
-    () => props.data,
-    () => {
-      localList.value = props.data.map((fileName) => ({
-        id: fileName,
-        name: fileName,
-      }));
-      const fileName = localList.value[0].name;
-      emits('update:modelValue', fileName);
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const handleClick = (fileName: string) => {
-    emits('update:modelValue', fileName);
-  };
-
-  const handleDragEnd = () => {
-    emits(
-      'sort',
-      localList.value.map((item) => item.name),
-    );
-  };
-</script>
-<style lang="less">
-  @keyframes rotate-loading {
-    0% {
-      transform: rotateZ(0);
-    }
-
-    100% {
-      transform: rotateZ(360deg);
-    }
-  }
-
-  .sql-execute-sql-file-list {
-    width: 238px;
-    height: 500px;
-    padding-top: 18px;
-    border-right: 1px solid #3d3d40;
-
-    .file-list-title {
-      padding: 0 16px;
-      font-weight: bold;
-      line-height: 16px;
-      color: #fff;
-    }
-
-    .file-list {
-      display: flex;
-      padding: 22px 12px;
-      font-size: 12px;
-      color: #c4c6cc;
-      flex-direction: column;
-
-      .file-item {
-        display: flex;
-        align-items: center;
-        height: 36px;
-        padding: 0 8px;
-        cursor: pointer;
-        background: rgb(255 255 255 / 8%);
-        border-radius: 2px;
-
-        &:hover {
-          background: rgb(255 255 255 / 20%);
-        }
-
-        &.active {
-          font-weight: bold;
-          color: #fff;
-          background: #1768ef;
-          opacity: 100% !important;
-        }
-
-        &.is-error {
-          color: rgb(255 86 86 / 100%);
-          background: rgb(255 86 86 / 21%);
-        }
-
-        & ~ .file-item {
-          margin-top: 8px;
-        }
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/CheckError.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/CheckError.vue
deleted file mode 100644
index ac706601d8..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/CheckError.vue
+++ /dev/null
@@ -1,51 +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="(data.messageList.length < 1 && data.grammarCheck?.isError) || data.isUploadFailed"
-    class="sql-execute-upload-check-error">
-    <span v-if="data.grammarCheck?.isError">{{ t('SQL语法错误') }}</span>
-    <span v-else-if="data.uploadErrorMessage">{{ data.uploadErrorMessage }}</span>
-    <span v-else>{{ t('文件上传失败') }}</span>
-  </div>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  import type { IFileData } from './FileList.vue';
-
-  interface Props {
-    data: IFileData;
-  }
-
-  defineProps<Props>();
-
-  const { t } = useI18n();
-</script>
-<style lang="less">
-  .sql-execute-upload-check-error {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    height: 48px;
-    padding-left: 16px;
-    font-size: 12px;
-    color: #dcdee5;
-    background: #212121;
-    border-left: 4px solid #b34747;
-    align-items: center;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/CheckSuccess.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/CheckSuccess.vue
deleted file mode 100644
index ef5aca9e34..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/CheckSuccess.vue
+++ /dev/null
@@ -1,40 +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="sql-execute-upload-check-success">
-    <DbIcon type="check-line" />
-    <span>{{ t('检测通过') }}</span>
-  </div>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  const { t } = useI18n();
-</script>
-<style lang="less">
-  .sql-execute-upload-check-success {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    height: 48px;
-    padding-left: 16px;
-    font-size: 12px;
-    color: #dcdee5;
-    background: #212121;
-    border-left: 4px solid #5ab857;
-    align-items: center;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/FileList.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/FileList.vue
deleted file mode 100644
index 0320d11bce..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/components/FileList.vue
+++ /dev/null
@@ -1,288 +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="sql-execute-sql-file-list">
-    <div class="file-list-title">
-      <span>{{ t('文件列表') }}</span>
-      <span style="font-size: 12px; font-weight: normal; color: #979ba5">
-        {{ t('按顺序执行') }}
-      </span>
-    </div>
-    <div class="file-list">
-      <Vuedraggable
-        v-model="localList"
-        item-key="id"
-        @end="handleDragEnd">
-        <template #item="{ element: fileItemData }">
-          <div
-            class="file-item"
-            :class="{
-              active: fileItemData.name === modelValue,
-              'is-error':
-                fileData[fileItemData.name].isUploadFailed || fileData[fileItemData.name].grammarCheck?.isError,
-            }"
-            @click="handleClick(fileItemData.name)">
-            <div
-              v-overflow-tips
-              class="file-item-text">
-              {{ fileItemData.name }}
-            </div>
-            <div class="extend-box">
-              <div
-                v-if="fileData[fileItemData.name].isUploading"
-                class="action-btn">
-                <div class="uploading-flag">
-                  <DbIcon type="sync-pending" />
-                </div>
-              </div>
-              <template v-else>
-                <div class="upload-info">
-                  <DbIcon
-                    v-if="fileData[fileItemData.name].grammarCheck?.isError"
-                    style="color: #ea3636"
-                    svg
-                    type="attention-fill" />
-                  <DbIcon
-                    v-else-if="fileData[fileItemData.name].isUploadFailed"
-                    style="color: #ea3636"
-                    type="attention-fill" />
-                  <DbIcon
-                    v-else
-                    style="color: #2dcb56"
-                    type="check-circle-fill" />
-                </div>
-                <div class="drag-flag">
-                  <DbIcon
-                    style="font-size: 10px; color: #fff"
-                    type="drag" />
-                </div>
-                <div
-                  v-bk-tooltips="t('移除')"
-                  class="action-btn remove-btn"
-                  @click.stop="handleRemove(fileItemData.name)">
-                  <DbIcon
-                    style="color: #fff"
-                    type="delete" />
-                </div>
-              </template>
-            </div>
-          </div>
-        </template>
-      </Vuedraggable>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import Vuedraggable from 'vuedraggable';
-
-  import type GrammarCheckModel from '@services/model/sql-import/grammar-check';
-
-  export interface IFileData {
-    isSuccess: boolean;
-    isCheckFailded: boolean;
-    isUploading: boolean;
-    isUploadFailed: boolean;
-    uploadErrorMessage: string;
-    file: File | null;
-    content: string;
-    messageList: GrammarCheckModel['messageList'];
-    grammarCheck?: GrammarCheckModel;
-    realFilePath: string;
-  }
-
-  export const createFileData = (data = {} as Partial<IFileData>) => ({
-    isSuccess: data.isSuccess || false,
-    isCheckFailded: data.isCheckFailded === undefined,
-    isUploading: data.isUploading || false,
-    isUploadFailed: data.isUploadFailed || false,
-    uploadErrorMessage: data.uploadErrorMessage || '',
-    file: data.file || null,
-    content: data.content || '',
-    messageList: data.messageList || [],
-    grammarCheck: data.grammarCheck,
-    realFilePath: data.realFilePath || '',
-  });
-</script>
-<script setup lang="ts">
-  import _ from 'lodash';
-  import { ref, watch } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  interface Props {
-    modelValue: string;
-    data: Array<string>;
-    fileData: Record<string, IFileData>;
-  }
-
-  interface Emits {
-    (e: 'update:modelValue', value: string): void;
-    (e: 'remove', value: string, index: number): void;
-    (e: 'sort', value: string[]): void;
-  }
-
-  const props = defineProps<Props>();
-
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  const localList = ref<Array<Record<'id' | 'name', string>>>([]);
-
-  watch(
-    () => props.data,
-    () => {
-      localList.value = props.data.map((fileName) => ({
-        id: fileName,
-        name: fileName,
-      }));
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const handleClick = (fileName: string) => {
-    emits('update:modelValue', fileName);
-  };
-
-  const handleDragEnd = () => {
-    emits(
-      'sort',
-      localList.value.map((item) => item.name),
-    );
-  };
-
-  const handleRemove = (fileName: string) => {
-    const index = _.findIndex(localList.value, (item) => item.name === fileName);
-    emits('remove', fileName, index);
-  };
-</script>
-<style lang="less">
-  @keyframes rotate-loading {
-    0% {
-      transform: rotateZ(0);
-    }
-
-    100% {
-      transform: rotateZ(360deg);
-    }
-  }
-
-  .sql-execute-sql-file-list {
-    width: 238px;
-    height: 500px;
-    padding-top: 18px;
-    border-right: 1px solid #3d3d40;
-
-    .file-list-title {
-      padding: 0 16px;
-      font-weight: bold;
-      line-height: 16px;
-      color: #fff;
-    }
-
-    .file-list {
-      display: flex;
-      padding: 22px 12px;
-      font-size: 12px;
-      color: #c4c6cc;
-      flex-direction: column;
-
-      .file-item {
-        display: flex;
-        align-items: center;
-        height: 36px;
-        padding: 0 8px;
-        cursor: pointer;
-        background: rgb(255 255 255 / 8%);
-        border-radius: 2px;
-
-        &:hover {
-          background: rgb(255 255 255 / 20%);
-
-          .extend-box {
-            .drag-flag,
-            .remove-btn {
-              display: flex;
-            }
-
-            .upload-info {
-              display: none;
-            }
-          }
-        }
-
-        &.active {
-          font-weight: bold;
-          color: #fff;
-          background: #1768ef;
-          opacity: 100% !important;
-        }
-
-        &.is-error {
-          color: rgb(255 86 86 / 100%);
-          background: rgb(255 86 86 / 21%);
-        }
-
-        & ~ .file-item {
-          margin-top: 8px;
-        }
-
-        .file-item-text {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-
-    .extend-box {
-      display: flex;
-      margin-left: auto;
-      font-size: 12px;
-      color: #c4c6cc;
-      align-items: center;
-
-      .drag-flag,
-      .action-btn,
-      .upload-info {
-        display: flex;
-        align-items: center;
-      }
-
-      .action-btn {
-        width: 14px;
-        padding-left: 4px;
-      }
-
-      .remove-btn,
-      .drag-flag {
-        display: none;
-      }
-
-      .drag-flag {
-        padding-left: 4px;
-      }
-
-      .uploading-flag {
-        color: #3a84ff;
-        animation: rotate-loading 1s linear infinite;
-      }
-
-      .upload-info {
-        padding-left: 4px;
-      }
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/Index.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/Index.vue
deleted file mode 100644
index b563bf8eb4..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/Index.vue
+++ /dev/null
@@ -1,227 +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>
-  <BkFormItem
-    :label="t('SQL 内容')"
-    property="execute_sql_files"
-    required
-    :rules="rules">
-    <template #labelAppend>
-      <span style="font-size: 12px; font-weight: normal; color: #8a8f99">
-        （{{ t('最终执行结果以 SQL 内容为准') }}）
-      </span>
-    </template>
-    <div class="sql-execute-manual-input">
-      <BkLoading :loading="isLoading">
-        <Editor
-          v-model="content"
-          :message-list="inputContentCheckResult.messageList"
-          :title="t('SQL编辑器')"
-          @change="handleEditorChange" />
-        <div
-          v-if="!isSubmited"
-          class="footer-action">
-          <BkButton
-            :disabled="!content"
-            size="small"
-            theme="primary"
-            @click="handleGrammarCheck">
-            <DbIcon type="right-shape" />
-            <span style="margin-left: 4px">{{ t('语法检测') }}</span>
-          </BkButton>
-        </div>
-        <template v-else>
-          <SyntaxChecking
-            v-if="isChecking"
-            class="syntax-checking" />
-          <SyntaxError
-            v-else-if="isCheckError"
-            class="syntax-error" />
-          <SyntaxSuccess
-            v-else-if="inputContentCheckResult.messageList.length < 1"
-            class="syntax-success" />
-        </template>
-      </BkLoading>
-    </div>
-  </BkFormItem>
-</template>
-<script setup lang="ts">
-  import { onActivated, onDeactivated, ref, shallowRef, watch } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import type GrammarCheckModel from '@services/model/sql-import/grammar-check';
-  import { grammarCheck } from '@services/source/sqlImport';
-  import { getFileContent } from '@services/source/storage';
-
-  import { updateFilePath } from '../../../Index.bak.vue';
-  import Editor from '../editor/Index.vue';
-
-  import SyntaxChecking from './components/SyntaxChecking.vue';
-  import SyntaxError from './components/SyntaxError.vue';
-  import SyntaxSuccess from './components/SyntaxSuccess.vue';
-
-  interface Props {
-    modelValue: string[];
-  }
-  interface Emits {
-    (e: 'change', value: string[]): void;
-    (e: 'grammar-check', doCheck: boolean, checkPass: boolean): void;
-  }
-
-  const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  let isKeepAliveActive = false;
-
-  const isLoading = ref(false);
-  const content = ref('');
-  const isSubmited = ref(false);
-  const isChecking = ref(false);
-  const isCheckError = ref(false);
-
-  const inputContentCheckResult = shallowRef({} as GrammarCheckModel);
-
-  let grammarCheckData: Record<string, GrammarCheckModel>;
-
-  const rules = [
-    {
-      validator: () => {
-        if (!isKeepAliveActive) {
-          return true;
-        }
-        const { content, isError } = inputContentCheckResult.value;
-        return content && !isError;
-      },
-      message: t('SQL内容无效'),
-      trigger: 'change',
-    },
-  ];
-
-  // 更具文件路径获取文件内容
-  const fetchFileContent = () => {
-    if (!updateFilePath.value) {
-      return;
-    }
-    isLoading.value = true;
-    getFileContent({
-      file_path: `${updateFilePath.value}/${props.modelValue[0]}`,
-    })
-      .then((data) => {
-        content.value = data.content;
-      })
-      .finally(() => {
-        isLoading.value = false;
-      });
-  };
-
-  watch(content, () => {
-    inputContentCheckResult.value = {} as GrammarCheckModel;
-  });
-
-  let isInnerChange = false;
-  // 内容回填时需要根据文件名获取文件内容
-  watch(
-    () => props.modelValue,
-    () => {
-      if (isInnerChange) {
-        isInnerChange = false;
-        return;
-      }
-      if (props.modelValue.length < 1) {
-        return;
-      }
-      fetchFileContent();
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const triggerChange = () => {
-    if (!grammarCheckData) {
-      return;
-    }
-    isInnerChange = true;
-    const [fileName] = Object.keys(grammarCheckData);
-    const [checkResult] = Object.values(grammarCheckData);
-    inputContentCheckResult.value = checkResult;
-    emits('change', [fileName]);
-    emits('grammar-check', true, !checkResult.isError);
-  };
-
-  const handleGrammarCheck = () => {
-    isSubmited.value = true;
-    isChecking.value = true;
-    isCheckError.value = false;
-    const params = new FormData();
-    params.append('sql_content', content.value);
-    grammarCheck(params)
-      .then((data) => {
-        grammarCheckData = data;
-        triggerChange();
-      })
-      .catch(() => {
-        isCheckError.value = true;
-        emits('grammar-check', true, false);
-      })
-      .finally(() => {
-        isChecking.value = false;
-      });
-  };
-
-  const handleEditorChange = () => {
-    isSubmited.value = false;
-    inputContentCheckResult.value = {} as GrammarCheckModel;
-    emits('grammar-check', false, false);
-  };
-
-  onActivated(() => {
-    isKeepAliveActive = true;
-    triggerChange();
-  });
-
-  onDeactivated(() => {
-    isKeepAliveActive = false;
-  });
-</script>
-<style lang="less">
-  .sql-execute-manual-input {
-    position: relative;
-
-    .footer-action {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      display: flex;
-      height: 48px;
-      padding-left: 16px;
-      background: #212121;
-      border-radius: 0 0 2px 2px;
-      align-items: center;
-    }
-
-    .syntax-checking,
-    .syntax-success,
-    .syntax-error {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxChecking.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxChecking.vue
deleted file mode 100644
index c876b9c371..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxChecking.vue
+++ /dev/null
@@ -1,38 +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="sql-execute-syntax-checking">
-    <DbIcon
-      class="rotate-loading"
-      type="sync-pending" />
-    <span>{{ t('语法校验进行中') }}</span>
-  </div>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  const { t } = useI18n();
-</script>
-<style lang="less">
-  .sql-execute-syntax-checking {
-    display: flex;
-    height: 48px;
-    padding-left: 16px;
-    font-size: 12px;
-    color: #dcdee5;
-    background: #212121;
-    border-left: 4px solid #3a84ff;
-    align-items: center;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxError.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxError.vue
deleted file mode 100644
index 5b93e3f356..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxError.vue
+++ /dev/null
@@ -1,36 +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="sql-execute-syntax-error">
-    <DbIcon type="check-line" />
-    <span>{{ t('语法检测服务异常_请联系管理员') }}</span>
-  </div>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  const { t } = useI18n();
-</script>
-<style lang="less">
-  .sql-execute-syntax-error {
-    display: flex;
-    height: 48px;
-    padding-left: 16px;
-    font-size: 12px;
-    color: #dcdee5;
-    background: #212121;
-    border-left: 4px solid #b34747;
-    align-items: center;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxSuccess.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxSuccess.vue
deleted file mode 100644
index e89a19ed11..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/manual-input/components/SyntaxSuccess.vue
+++ /dev/null
@@ -1,36 +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="sql-execute-syntax-success">
-    <DbIcon type="check-line" />
-    <span>{{ t('检测通过') }}</span>
-  </div>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  const { t } = useI18n();
-</script>
-<style lang="less">
-  .sql-execute-syntax-success {
-    display: flex;
-    height: 48px;
-    padding-left: 16px;
-    font-size: 12px;
-    color: #dcdee5;
-    background: #212121;
-    border-left: 4px solid #5ab857;
-    align-items: center;
-  }
-</style>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/utils.ts b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/utils.ts
deleted file mode 100644
index 3424a70e98..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/sql-file/utils.ts
+++ /dev/null
@@ -1,14 +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 at https://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
- */
-
-export const getFileNameFromFilePath = (filePath: string) => filePath.replace(/[^_]+_/, '');
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/Index.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/Index.vue
deleted file mode 100644
index dd23f5bf64..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/Index.vue
+++ /dev/null
@@ -1,96 +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>
-  <DbFormItem
-    ref="formItemRef"
-    :label="t('目标DB')"
-    property="execute_db_infos"
-    required
-    :rules="rules">
-    <RenderData>
-      <RenderDataRow
-        v-for="(item, index) in modelValue"
-        :key="item.rowKey"
-        ref="rowRef"
-        :data="item"
-        :removeable="modelValue.length < 2"
-        @add="(value: IDataRow) => handleAppend(value, index)"
-        @change="(data: IDataRow) => handleChange(data, index)"
-        @remove="handleRemove(index)" />
-    </RenderData>
-  </DbFormItem>
-</template>
-<script setup lang="tsx">
-  import { watch } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  import RenderData from './RenderData/Index.vue';
-  import RenderDataRow, { createRowData, type IDataRow } from './RenderData/Row.vue';
-
-  interface Props {
-    modelValue: Array<IDataRow>;
-  }
-  interface Emits {
-    (e: 'update:modelValue', value: Array<IDataRow>): void;
-  }
-
-  const props = defineProps<Props>();
-  const emit = defineEmits<Emits>();
-
-  const { t } = useI18n();
-
-  const formItemRef = ref();
-  const rowRef = ref();
-
-  const rules = [
-    {
-      validator: () => Promise.all(rowRef.value.map((item: { getValue: () => Promise<string[]> }) => item.getValue())),
-      message: t('目标DB不能为空'),
-      trigger: 'change',
-    },
-  ];
-
-  watch(
-    () => props.modelValue,
-    () => {
-      if (props.modelValue.length < 1) {
-        emit('update:modelValue', [createRowData()]);
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const handleChange = (data: IDataRow, index: number) => {
-    const result = [...props.modelValue];
-    result.splice(index, 1, data);
-    formItemRef.value.clearValidate();
-    emit('update:modelValue', result);
-  };
-
-  // 追加一个集群
-  const handleAppend = (data: IDataRow, index: number) => {
-    const result = [...props.modelValue];
-    result.splice(index + 1, 0, data);
-    formItemRef.value.clearValidate();
-    emit('update:modelValue', result);
-  };
-  // 删除一个集群
-  const handleRemove = (index: number) => {
-    const result = [...props.modelValue];
-    result.splice(index, 1);
-    emit('update:modelValue', result);
-  };
-</script>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/Index.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/Index.vue
deleted file mode 100644
index 0086bf6e74..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/Index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <RenderTable>
-    <RenderTableHeadColumn>
-      {{ t('变更的DB') }}
-      <span style="font-size: 12px; font-weight: normal; color: #8a8f99">
-        ({{ t('如果变更 SQL 是“create database ...”，这个请填写 test') }})
-      </span>
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn :required="false">
-      {{ t('忽略的DB') }}
-    </RenderTableHeadColumn>
-    <RenderTableHeadColumn
-      :required="false"
-      :width="90">
-      {{ t('操作') }}
-    </RenderTableHeadColumn>
-    <template #data>
-      <slot />
-    </template>
-  </RenderTable>
-</template>
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  import RenderTableHeadColumn from '@components/render-table/HeadColumn.vue';
-  import RenderTable from '@components/render-table/Index.vue';
-
-  const { t } = useI18n();
-</script>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/RenderDbName.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/RenderDbName.vue
deleted file mode 100644
index 5731fa95b5..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/RenderDbName.vue
+++ /dev/null
@@ -1,77 +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>
-  <TableEditTag
-    ref="editTagRef"
-    :model-value="localValue"
-    :placeholder="t('请输入DB名称_支持通配符_含通配符的仅支持单个')"
-    :rules="rules"
-    @change="handleChange" />
-</template>
-<script setup lang="ts">
-  import _ from 'lodash';
-  import { useI18n } from 'vue-i18n';
-
-  import TableEditTag from '@components/render-table/columns/db-table-name/Index.vue';
-
-  interface Props {
-    modelValue: string[];
-    required?: boolean;
-  }
-  interface Emits {
-    (e: 'change', value: string[]): void;
-  }
-  interface Exposes {
-    getValue: () => Promise<string[]>;
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    required: true,
-  });
-
-  const emits = defineEmits<Emits>();
-
-  const { t } = useI18n();
-  const rules = [
-    {
-      validator: (value: string[]) => {
-        if (!props.required) {
-          return true;
-        }
-        return value && value.length > 0;
-      },
-      message: t('DB名不能为空'),
-    },
-    {
-      validator: (value: string[]) => {
-        const hasAllMatch = _.find(value, (item) => /%$/.test(item));
-        return !(value.length > 1 && hasAllMatch);
-      },
-      message: t('一格仅支持单个_对象'),
-    },
-  ];
-
-  const editTagRef = ref();
-  const localValue = ref(props.modelValue);
-
-  const handleChange = (value: string[]) => {
-    emits('change', value);
-  };
-
-  defineExpose<Exposes>({
-    getValue() {
-      return editTagRef.value.getValue(localValue.value);
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/Row.vue b/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/Row.vue
deleted file mode 100644
index 003c1c8a19..0000000000
--- a/dbm-ui/frontend/src/views/spider-manage/sql-execute/steps/step1/components/target-db/RenderData/Row.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <tr>
-    <td style="padding: 0">
-      <RenderDbName
-        ref="dbnamesRef"
-        :model-value="data.dbnames"
-        @change="handleDbnamesChange" />
-    </td>
-    <td style="padding: 0">
-      <RenderDbName
-        ref="ignoreDbnamesRef"
-        :model-value="data.ignore_dbnames"
-        :required="false"
-        @change="handleIgnoreDbnamesChange" />
-    </td>
-    <OperateColumn
-      :removeable="removeable"
-      @add="handleAppend"
-      @remove="handleRemove" />
-  </tr>
-</template>
-<script lang="ts">
-  import { random } from '@utils';
-
-  export interface IDataRow {
-    rowKey: string;
-    dbnames: string[];
-    ignore_dbnames: string[];
-  }
-
-  // 创建表格数据
-  export const createRowData = (data = {} as Partial<IDataRow>) => ({
-    rowKey: random(),
-    dbnames: data.dbnames || [],
-    ignore_dbnames: data.ignore_dbnames || [],
-  });
-</script>
-<script setup lang="ts">
-  import { ref } from 'vue';
-
-  import OperateColumn from '@components/render-table/columns/operate-column/index.vue';
-
-  import RenderDbName from './RenderDbName.vue';
-
-  interface Props {
-    data: IDataRow;
-    removeable: boolean;
-  }
-  interface Emits {
-    (e: 'add', params: IDataRow): void;
-    (e: 'remove'): void;
-    (e: 'change', value: IDataRow): void;
-  }
-
-  interface Exposes {
-    getValue: () => Promise<IDataRow>;
-  }
-
-  const props = defineProps<Props>();
-
-  const emits = defineEmits<Emits>();
-
-  const dbnamesRef = ref();
-  const ignoreDbnamesRef = ref();
-  const dbnames = ref(props.data.dbnames);
-  const ignoreDbnames = ref(props.data.ignore_dbnames);
-
-  const triggerChange = () => {
-    emits('change', {
-      rowKey: props.data.rowKey,
-      dbnames: dbnames.value,
-      ignore_dbnames: ignoreDbnames.value,
-    });
-  };
-
-  const handleDbnamesChange = (value: string[]) => {
-    dbnames.value = value;
-    triggerChange();
-  };
-  const handleIgnoreDbnamesChange = (value: string[]) => {
-    ignoreDbnames.value = value;
-    triggerChange();
-  };
-
-  const handleAppend = () => {
-    emits('add', createRowData());
-  };
-
-  const handleRemove = () => {
-    if (props.removeable) {
-      return;
-    }
-    emits('remove');
-  };
-
-  defineExpose<Exposes>({
-    getValue() {
-      return Promise.all([dbnamesRef.value.getValue(), ignoreDbnamesRef.value.getValue()]).then(() => ({
-        rowKey: props.data.rowKey,
-        dbnames: dbnames.value,
-        ignore_dbnames: ignoreDbnames.value,
-      }));
-    },
-  });
-</script>
diff --git a/dbm-ui/frontend/src/views/staff-manage/components/MemberSelector.vue b/dbm-ui/frontend/src/views/staff-manage/components/MemberSelector.vue
index 3539568a0c..c7c0cf693f 100644
--- a/dbm-ui/frontend/src/views/staff-manage/components/MemberSelector.vue
+++ b/dbm-ui/frontend/src/views/staff-manage/components/MemberSelector.vue
@@ -60,7 +60,7 @@
 
   const exactSearchMethod = () =>
     getUserList({
-      fuzzy_lookups: modelValue.value.join(','),
+      exact_lookups: modelValue.value.join(','),
     }).then((result) => result.results);
 
   const pasteValidator = (values: string[]) => values;
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Flashback.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Flashback.vue
index 23c3969fa9..8f1e56d665 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Flashback.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Flashback.vue
@@ -57,48 +57,48 @@
       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>
-    ),
+        <div
+          class="text-overflow"
+          v-overflow-tips={{ content: cell }}>
+          {cell.map(item => <bk-tag>{item}</bk-tag>)}
+        </div>
+      ),
     },
     {
-      label: t('目标表'),
-      field: 'tables',
+      label: t('忽略库'),
+      field: 'databases_ignore',
       showOverflowTooltip: false,
       render: ({ cell }: { cell: string[] }) => (
-      <div class="text-overflow" v-overflow-tips={{
-          content: cell,
-        }}>
-        {cell.map(item => <bk-tag>{item}</bk-tag>)}
-      </div>
-    ),
+        <div
+          class="text-overflow"
+          v-overflow-tips={{ content: cell }}>
+          {cell.length > 0 ? cell.map(item => <bk-tag>{item}</bk-tag>) : '--'}
+        </div>
+      ),
     },
     {
-      label: t('忽略库'),
-      field: 'databases_ignore',
+      label: t('目标表'),
+      field: 'tables',
       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>
-    ),
+        <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>
-    ),
+        <div
+          class="text-overflow"
+          v-overflow-tips={{ content: cell }}>
+          {cell.length > 0 ? cell.map(item => <bk-tag>{item}</bk-tag>) : '--'}
+        </div>
+      ),
     },
   ];
 
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/HATruncate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/HATruncate.vue
index 934fc74139..b214736846 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/HATruncate.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/HATruncate.vue
@@ -103,48 +103,48 @@
       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>
-    ),
+        <div
+          class="text-overflow"
+          v-overflow-tips={{ content: cell }}>
+          {cell.map(item => <bk-tag>{item}</bk-tag>)}
+        </div>
+      ),
     },
     {
-      label: t('目标表名'),
-      field: 'table_patterns',
+      label: t('忽略DB名'),
+      field: 'ignore_dbs',
       showOverflowTooltip: false,
       render: ({ cell }: { cell: string[] }) => (
-      <div class="text-overflow" v-overflow-tips={{
-          content: cell,
-        }}>
-        {cell.map(item => <bk-tag>{item}</bk-tag>)}
-      </div>
-    ),
+        <div
+          class="text-overflow"
+          v-overflow-tips={{ content: cell }}>
+          {cell.length > 0 ? cell.map(item => <bk-tag>{item}</bk-tag>) : '--'}
+        </div>
+      ),
     },
     {
-      label: t('忽略DB名'),
-      field: 'ignore_dbs',
+      label: t('目标表名'),
+      field: 'table_patterns',
       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>
-    ),
+        <div
+          class="text-overflow"
+          v-overflow-tips={{ content: cell }}>
+          {cell.map(item => <bk-tag>{item}</bk-tag>)}
+        </div>
+      ),
     },
     {
       label: t('忽略表名'),
       field: 'ignore_tables',
       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>
-    ),
+        <div
+          class="text-overflow"
+          v-overflow-tips={{ content: cell }}>
+          {cell.length > 0 ? cell.map(item => <bk-tag>{item}</bk-tag>) : '--'}
+        </div>
+      ),
     },
   ];
 
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/TableBackup.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/TableBackup.vue
index 90c2e10ed5..851169a6e5 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/TableBackup.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/TableBackup.vue
@@ -44,19 +44,17 @@
     name: string,
   }
 
-  /**
-   * mysql 库表备份
-   */
-
-  const columns: any = [{
-    label: t('集群ID'),
-    field: 'cluster_id',
-    render: ({ cell }: { cell: number }) => <span>{cell || '--'}</span>,
-  }, {
-    label: t('集群名称'),
-    field: 'immute_domain',
-    showOverflowTooltip: false,
-    render: ({ data }: { data: any }) => (
+  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: backupItem }) => (
       <div class="cluster-name text-overflow"
         v-overflow-tips={{
           content: `
@@ -69,55 +67,61 @@
         <span class="cluster-name__alias">{data.name}</span>
       </div>
     ),
-  }, {
-    label: t('备份源'),
-    field: 'backup_on',
-    render: ({ cell }: { cell: string }) => <span>{cell || '--'}</span>,
-  }, {
-    label: t('备份DB名'),
-    field: 'db_patterns',
-    showOverflowTooltip: false,
-    render: ({ cell }: { cell: string[] }) => (
+    },
+    {
+      label: t('备份源'),
+      field: 'backup_on',
+      render: ({ cell }: { cell: string }) => <span>{cell || '--'}</span>,
+    },
+    {
+      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('忽略DB名'),
-    field: 'ignore_dbs',
-    showOverflowTooltip: false,
-    render: ({ cell }: { cell: string[] }) => (
+    },
+    {
+      label: t('忽略DB名'),
+      field: 'ignore_dbs',
+      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: 'table_patterns',
-    showOverflowTooltip: false,
-    render: ({ cell }: { cell: string[] }) => (
+    },
+    {
+      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>
     ),
-  }, {
-    label: t('忽略表名'),
-    field: 'ignore_tables',
-    showOverflowTooltip: false,
-    render: ({ cell }: { cell: string[] }) => (
+    },
+    {
+      label: t('忽略表名'),
+      field: 'ignore_tables',
+      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 dataList = computed(() => {
     const list: backupItem[] = [];
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Flashback.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Flashback.vue
index 40ad4a3111..afdb49ed31 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Flashback.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Flashback.vue
@@ -70,13 +70,13 @@
       showOverflowTooltip: true,
     },
     {
-      label: t('目标表'),
-      field: 'tableName',
+      label: t('忽略库'),
+      field: 'ignoreDbName',
       showOverflowTooltip: true,
     },
     {
-      label: t('忽略库'),
-      field: 'ignoreDbName',
+      label: t('目标表'),
+      field: 'tableName',
       showOverflowTooltip: true,
     },
     {
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
index 916ebe5351..702f4468a7 100644
--- 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
@@ -63,13 +63,13 @@
       showOverflowTooltip: true,
     },
     {
-      label: t('备份表名'),
-      field: 'tableName',
+      label: t('忽略DB名'),
+      field: 'ignoreDbName',
       showOverflowTooltip: true,
     },
     {
-      label: t('忽略DB名'),
-      field: 'ignoreDbName',
+      label: t('备份表名'),
+      field: 'tableName',
       showOverflowTooltip: true,
     },
     {