diff --git a/dbm-ui/frontend/.eslintignore b/dbm-ui/frontend/.eslintignore
deleted file mode 100644
index 73a6a568ff..0000000000
--- a/dbm-ui/frontend/.eslintignore
+++ /dev/null
@@ -1,6 +0,0 @@
-node_modules/
-dist/
-public/
-src/types/auto-imports.d.ts
-patch/
-lib/
diff --git a/dbm-ui/frontend/.eslintrc.js b/dbm-ui/frontend/.eslintrc.js
deleted file mode 100644
index 8bc63d4ff6..0000000000
--- a/dbm-ui/frontend/.eslintrc.js
+++ /dev/null
@@ -1,146 +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.
- */
-
-module.exports = {
-  root: true,
-  extends: [
-    'eslint-config-tencent',
-    'plugin:vue/vue3-recommended',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript/recommended',
-    './.eslintrc-auto-import.json',
-    'prettier',
-  ],
-  plugins: ['simple-import-sort'],
-  env: {
-    es6: true,
-    node: true,
-    jest: true,
-    browser: true,
-    'vue/setup-compiler-macros': true,
-  },
-  globals: {
-    defineModel: 'readonly',
-    // value 为 true 允许被重写，为 false 不允许被重写
-    __RESOURCE_UNIQUE_KEY__: false,
-    ValueOf: false,
-    ServiceReturnType: false,
-    ServiceParameters: false,
-    SelectItem: false,
-    KeyExpand: false,
-  },
-  rules: {
-    '@typescript-eslint/no-explicit-any': 'off',
-    'simple-import-sort/exports': 'error',
-    'simple-import-sort/imports': [
-      'error',
-      {
-        groups: [
-          ['^[a-zA-Z]'],
-          ['^@services'],
-          ['^@hooks'],
-          ['^@router'],
-          ['^@stores'],
-          ['^@common'],
-          ['^@components'],
-          ['^@views'],
-          ['^@utils'],
-          ['^@helper'],
-          ['^@types'],
-          ['^@locales'],
-          ['^@styles'],
-          ['^@locales'],
-          ['^@images'],
-          ['^@\\w'],
-          ['^\\.\\.'],
-          ['^\\.'],
-        ],
-      },
-    ],
-    'import/newline-after-import': 'error',
-    'vue/multi-word-component-names': 'off',
-  },
-  overrides: [
-    {
-      files: ['*.vue'],
-      rules: {
-        indent: 'off',
-        'import/first': 'off',
-        'vue/html-closing-bracket-newline': [
-          'error',
-          {
-            singleline: 'never',
-            multiline: 'never',
-          },
-        ],
-        'vue/component-tags-order': ['warn', { order: ['template', 'script', 'style'] }],
-        'vue/attributes-order': [
-          'error',
-          {
-            order: [
-              'DEFINITION',
-              'LIST_RENDERING',
-              'CONDITIONALS',
-              'RENDER_MODIFIERS',
-              'GLOBAL',
-              ['UNIQUE', 'SLOT'],
-              'TWO_WAY_BINDING',
-              'OTHER_DIRECTIVES',
-              'OTHER_ATTR',
-              'EVENTS',
-              'CONTENT',
-            ],
-            alphabetical: true,
-          },
-        ],
-        'vue/define-macros-order': ['error', { order: ['defineProps', 'defineEmits'] }],
-        'vue/no-undef-properties': ['error', { ignores: ['/^\\$/'] }],
-        'vue/no-unused-properties': [
-          'error',
-          {
-            groups: ['props'],
-            deepData: false,
-            ignorePublicMembers: false,
-          },
-        ],
-        'vue/no-useless-mustaches': [
-          'error',
-          {
-            ignoreIncludesComment: false,
-            ignoreStringEscape: false,
-          },
-        ],
-        'vue/no-useless-v-bind': [
-          'error',
-          {
-            ignoreIncludesComment: false,
-            ignoreStringEscape: false,
-          },
-        ],
-        'vue/prefer-separate-static-class': 'error',
-        'vue/prefer-true-attribute-shorthand': 'error',
-        'vue/script-indent': ['off', 2, { baseIndent: 1 }],
-        'vue/component-name-in-template-casing': [
-          'error',
-          'PascalCase',
-          {
-            registeredComponentsOnly: false,
-            ignores: [],
-          },
-        ],
-        'vue/no-setup-props-reactivity-loss': 'off',
-        'vue/no-setup-props-destructure': 'off',
-      },
-    },
-  ],
-};
diff --git a/dbm-ui/frontend/.nvmrc b/dbm-ui/frontend/.nvmrc
index df9385826f..4377937757 100644
--- a/dbm-ui/frontend/.nvmrc
+++ b/dbm-ui/frontend/.nvmrc
@@ -1 +1 @@
-v20.11.0
\ No newline at end of file
+v22.13.1
\ No newline at end of file
diff --git a/dbm-ui/frontend/.prettierrc b/dbm-ui/frontend/.prettierrc
index b544d20e72..a5024e089f 100644
--- a/dbm-ui/frontend/.prettierrc
+++ b/dbm-ui/frontend/.prettierrc
@@ -1,7 +1,5 @@
 {
-  "plugins": [
-    "prettier-plugin-curly"
-  ],
+  "plugins": ["prettier-plugin-curly"],
   "$schema": "https://json.schemastore.org/prettierrc",
   "semi": true,
   "quoteProps": "as-needed",
@@ -15,14 +13,5 @@
   "arrowParens": "always",
   "vueIndentScriptAndStyle": true,
   "singleAttributePerLine": true,
-  "proseWrap": "always",
-  "parser": "typescript",
-  "overrides": [
-    {
-      "files": "*.vue",
-      "options": {
-        "parser": "vue"
-      }
-    }
-  ]
+  "proseWrap": "always"
 }
diff --git a/dbm-ui/frontend/.vscode/settings.json b/dbm-ui/frontend/.vscode/settings.json
index 1e37538ab6..7da042cb78 100644
--- a/dbm-ui/frontend/.vscode/settings.json
+++ b/dbm-ui/frontend/.vscode/settings.json
@@ -38,6 +38,12 @@
   "peacock.remoteColor": "#45e35f",
   "bk-code-ai.enable": false,
   "typescript.tsdk": "node_modules/typescript/lib",
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts",
+    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig, .stylelint*, .browserslistrc, commit*"
+  },
   "workbench.colorCustomizations": {
     "activityBar.activeBackground": "#65c89b",
     "activityBar.background": "#65c89b",
@@ -58,4 +64,4 @@
     "titleBar.inactiveForeground": "#15202b99"
   },
   "peacock.color": "#42b883"
-}
\ No newline at end of file
+}
diff --git a/dbm-ui/frontend/env.d.ts b/dbm-ui/frontend/env.d.ts
index 1abc28a478..29713d6ce8 100644
--- a/dbm-ui/frontend/env.d.ts
+++ b/dbm-ui/frontend/env.d.ts
@@ -11,7 +11,7 @@
  * the specific language governing permissions and limitations under the License.
  */
 
-// eslint-disable-next-line spaced-comment
+ 
 /// <reference types="vite/client" />
 interface ImportMetaEnv {
   readonly MODE: string;
diff --git a/dbm-ui/frontend/eslint.config.mjs b/dbm-ui/frontend/eslint.config.mjs
new file mode 100644
index 0000000000..76326262ad
--- /dev/null
+++ b/dbm-ui/frontend/eslint.config.mjs
@@ -0,0 +1,297 @@
+import tencentConfig from 'eslint-config-tencent/ts';
+import importPlugin from 'eslint-plugin-import';
+import oxlint from 'eslint-plugin-oxlint';
+// import perfectionist from 'eslint-plugin-perfectionist';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import pluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
+import { configureVueProject, defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
+
+const tencentRule = tencentConfig.rules;
+
+// eslint-config-tencent/ts 依赖的 @typescript-eslint 版本过低，部分规则配置已经废弃需要删除
+delete tencentRule['@typescript-eslint/quotes'];
+delete tencentRule['@typescript-eslint/brace-style'];
+delete tencentRule['@typescript-eslint/comma-spacing'];
+delete tencentRule['@typescript-eslint/func-call-spacing'];
+delete tencentRule['@typescript-eslint/indent'];
+delete tencentRule['@typescript-eslint/keyword-spacing'];
+delete tencentRule['@typescript-eslint/semi'];
+delete tencentRule['@typescript-eslint/type-annotation-spacing'];
+delete tencentRule['@typescript-eslint/space-before-function-paren'];
+
+configureVueProject({
+  scriptLangs: ['ts', 'tsx'],
+});
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+  pluginVue.configs['flat/recommended'],
+  vueTsConfigs.recommended,
+  oxlint.configs['flat/recommended'],
+  skipFormatting,
+  {
+    languageOptions: {
+      ecmaVersion: 5,
+      sourceType: 'script',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        defineModel: 'readonly',
+        ValueOf: 'readonly',
+        ServiceReturnType: 'readonly',
+        ServiceParameters: 'readonly',
+        SelectItem: 'readonly',
+        KeyExpand: 'readonly',
+      },
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
+    rules: {
+      ...tencentRule,
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/consistent-type-assertions': 'off',
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: 'variable',
+          format: ['camelCase', 'UPPER_CASE'],
+        },
+      ],
+      'no-underscore-dangle': ['error', { enforceInMethodNames: false }],
+      'no-param-reassign': ['error', { props: true }],
+    },
+  },
+  // {
+  //   files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
+  //   plugins: {
+  //     perfectionist,
+  //   },
+  //   rules: {
+  //     'perfectionist/sort-jsx-props': [
+  //       'error',
+  //       {
+  //         type: 'alphabetical',
+  //         order: 'asc',
+  //         ignoreCase: true,
+  //         specialCharacters: 'keep',
+  //         ignorePattern: [],
+  //         partitionByNewLine: false,
+  //         newlinesBetween: 'ignore',
+  //         groups: [
+  //           'DEFINITION',
+  //           'LIST_RENDERING',
+  //           'CONDITIONALS',
+  //           'RENDER_MODIFIERS',
+  //           'GLOBAL',
+  //           'UNIQUE',
+  //           'SLOT',
+  //           'TWO_WAY_BINDING',
+  //           'OTHER_DIRECTIVES',
+  //           'multiline',
+  //           'unknown',
+  //           'shorthand',
+  //           'callback',
+  //         ],
+  //         customGroups: {
+  //           DEFINITION: '^v-is',
+  //           LIST_RENDERING: '^v-for',
+  //           CONDITIONALS: '^(v-if|v-else-if|v-else|v-show|v-cloak)',
+  //           RENDER_MODIFIERS: '^(v-once|v-pre)',
+  //           GLOBAL: '^id',
+  //           UNIQUE: '^(ref|key)',
+  //           SLOT: '^v-slot',
+  //           TWO_WAY_BINDING: '^v-model',
+  //           OTHER_DIRECTIVES: '^v-.+',
+  //           callback: '^on.+',
+  //         },
+  //       },
+  //     ],
+  //     'perfectionist/sort-array-includes': 'error',
+  //     'perfectionist/sort-classes': [
+  //       'error',
+  //       {
+  //         type: 'alphabetical',
+  //         order: 'asc',
+  //         ignoreCase: true,
+  //         specialCharacters: 'keep',
+  //         partitionByComment: false,
+  //         partitionByNewLine: false,
+  //         newlinesBetween: 'ignore',
+  //         ignoreCallbackDependenciesPatterns: [],
+  //         groups: [
+  //           'index-signature',
+  //           ['static-property', 'static-accessor-property'],
+  //           ['static-get-method', 'static-set-method'],
+  //           ['protected-static-property', 'protected-static-accessor-property'],
+  //           ['protected-static-get-method', 'protected-static-set-method'],
+  //           ['private-static-property', 'private-static-accessor-property'],
+  //           ['private-static-get-method', 'private-static-set-method'],
+  //           'static-block',
+  //           ['static-method', 'static-function-property'],
+  //           ['protected-static-method', 'protected-static-function-property'],
+  //           ['private-static-method', 'private-static-function-property'],
+  //           ['property', 'accessor-property'],
+  //           ['protected-property', 'protected-accessor-property'],
+  //           ['protected-get-method', 'protected-set-method'],
+  //           ['private-property', 'private-accessor-property'],
+  //           ['private-get-method', 'private-set-method'],
+  //           'constructor',
+  //           ['get-method', 'set-method'],
+  //           ['method', 'function-property'],
+  //           ['protected-method', 'protected-function-property'],
+  //           ['private-method', 'private-function-property'],
+  //           'unknown',
+  //         ],
+  //         customGroups: [],
+  //       },
+  //     ],
+  //     'perfectionist/sort-enums': 'error',
+  //     'perfectionist/sort-intersection-types': 'error',
+  //     'perfectionist/sort-interfaces': 'error',
+  //     'perfectionist/sort-named-imports': 'error',
+  //     'perfectionist/sort-object-types': 'error',
+  //     'perfectionist/sort-objects': 'error',
+  //   },
+  // },
+  {
+    plugins: {
+      import: importPlugin,
+    },
+    rules: {
+      'import/first': 'off',
+      'import/newline-after-import': 'error',
+      'import/no-duplicates': 'error',
+    },
+  },
+  {
+    plugins: {
+      'simple-import-sort': simpleImportSortPlugin,
+    },
+    rules: {
+      'simple-import-sort/exports': 'error',
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [
+            ['^[a-zA-Z]'], // 普通 npm 包
+            ['^@blueking'],
+            ['^@services'],
+            ['^@hooks'],
+            ['^@router'],
+            ['^@stores'],
+            ['^@common'],
+            ['^@components'],
+            ['^@views'],
+            ['^@utils'],
+            ['^@helper'],
+            ['^@types'],
+            ['^@locales'],
+            ['^@styles'],
+            ['^@images'],
+            ['^[^.]'],
+            ['^\\.\\.'], // 父目录相对路径
+            ['^\\.'], // 当前目录相对路径
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.vue'],
+    rules: {
+      indent: 'off',
+      'vue/multi-word-component-names': 'off',
+      'vue/html-closing-bracket-newline': [
+        'error',
+        {
+          singleline: 'never',
+          multiline: 'never',
+        },
+      ],
+      'vue/component-tags-order': ['warn', { order: ['template', 'script', 'style'] }],
+      'vue/attributes-order': [
+        'error',
+        {
+          order: [
+            'DEFINITION',
+            'LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            ['UNIQUE', 'SLOT'],
+            'TWO_WAY_BINDING',
+            'OTHER_DIRECTIVES',
+            'OTHER_ATTR',
+            'EVENTS',
+            'CONTENT',
+          ],
+          alphabetical: true,
+        },
+      ],
+      'vue/define-macros-order': ['error', { order: ['defineProps', 'defineEmits'] }],
+      'vue/no-undef-properties': ['error', { ignores: ['/^\\$/'] }],
+      'vue/no-unused-properties': [
+        'error',
+        {
+          groups: ['props'],
+          deepData: false,
+          ignorePublicMembers: false,
+        },
+      ],
+      'vue/no-useless-mustaches': [
+        'error',
+        {
+          ignoreIncludesComment: false,
+          ignoreStringEscape: false,
+        },
+      ],
+      'vue/no-useless-v-bind': [
+        'error',
+        {
+          ignoreIncludesComment: false,
+          ignoreStringEscape: false,
+        },
+      ],
+      'vue/prefer-separate-static-class': 'error',
+      'vue/prefer-true-attribute-shorthand': 'error',
+      'vue/script-indent': ['off', 2, { baseIndent: 1 }],
+      'vue/component-name-in-template-casing': [
+        'error',
+        'PascalCase',
+        {
+          registeredComponentsOnly: false,
+          ignores: [],
+        },
+      ],
+      'vue/no-setup-props-reactivity-loss': 'off',
+      'vue/no-setup-props-destructure': 'off',
+    },
+  },
+  {
+    ignores: [
+      'node_modules/*',
+      'dist/*',
+      'public/*',
+      'src/types/auto-imports.d.ts',
+      'patch/*',
+      'lib/*',
+      'auto-copyright.js',
+    ],
+  },
+);
diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
index 051f500364..d7c15d8830 100644
--- a/dbm-ui/frontend/package.json
+++ b/dbm-ui/frontend/package.json
@@ -3,16 +3,18 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite --mode test",
+    "dev": "vite",
     "dev-https": "vite --mode https",
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 run-p build-only",
     "preview": "vite preview",
     "prepare": "npx simple-git-hooks",
-    "build-only": "vite build --mode production",
-    "type-check": "vue-tsc --noEmit",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
     "lint:lint-staged": "lint-staged",
-    "lint:script": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx --fix",
+    "lint:script": "eslint . --fix",
     "lint:style": "stylelint --fix ./src/**/*.{vue,css,less} --custom-syntax",
+    "lint": "run-s lint:*",
     "prettier": "prettier --write ./src"
   },
   "dependencies": {
@@ -26,27 +28,27 @@
     "@blueking/sub-saas": "0.0.0-beta.6",
     "@blueking/table": "^0.0.1-beta.35",
     "@icon-cool/bk-icon-bk-biz-components": "^0.0.4",
-    "@vueuse/core": "^12.0.0",
+    "@vueuse/core": "^12.5.0",
     "axios": "^1.7.9",
     "bkui-vue": "2.0.1-beta.100",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
-    "echarts": "^5.5.1",
+    "echarts": "^5.6.0",
     "html-to-image": "1.11.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "lodash": "4.17.21",
     "mitt": "3.0.1",
     "monaco-editor": "^0.52.0",
-    "pinia": "^2.3.0",
-    "qs": "^6.13.1",
+    "pinia": "^2.3.1",
+    "qs": "^6.14.0",
     "screenfull": "6.0.2",
     "tiny-pinyin": "1.3.2",
     "tippy.js": "6.3.7",
     "url-join": "5.0.0",
     "vue": "^3.5.13",
     "vue-content-loader": "2.0.1",
-    "vue-i18n": "^10.0.5",
+    "vue-i18n": "^11.1.0",
     "vue-request": "2.0.4",
     "vue-router": "^4.5.0",
     "vue-types": "^5.1.3",
@@ -54,48 +56,54 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^19.6.0",
-    "@trivago/prettier-plugin-sort-imports": "^5.1.0",
-    "@tsconfig/node20": "20.1.4",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "^22.10.1",
-    "@types/qs": "^6.9.17",
+    "@commitlint/config-conventional": "^19.7.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/lodash": "^4.17.15",
+    "@types/node": "^22.13.1",
+    "@types/qs": "^6.9.18",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "@vue/eslint-config-typescript": "13.0.0",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
     "@vue/tsconfig": "^0.7.0",
-    "commitlint": "^19.6.0",
+    "commitlint": "^19.7.1",
     "cross-env": "7.0.3",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-config-tencent": "^1.1.1",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-config-tencent": "^1.1.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-oxlint": "^0.15.6",
+    "eslint-plugin-perfectionist": "^4.8.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-vue": "^9.32.0",
-    "less": "^4.2.1",
-    "lint-staged": "^15.2.10",
-    "npm-run-all2": "^7.0.1",
-    "postcss-html": "1.7.0",
+    "globals": "^15.14.0",
+    "less": "^4.2.2",
+    "lint-staged": "^15.4.3",
+    "npm-run-all2": "^7.0.2",
+    "oxlint": "^0.15.6",
+    "postcss-html": "^1.8.0",
     "postcss-less": "6.0.0",
     "prettier": "^3.4.2",
     "prettier-plugin-curly": "^0.3.1",
     "simple-git-hooks": "2.11.1",
-    "stylelint": "^16.11.0",
-    "stylelint-config-standard": "36.0.1",
+    "stylelint": "^16.14.1",
+    "stylelint-config-standard": "^37.0.0",
     "stylelint-less": "3.0.1",
     "stylelint-order": "6.0.4",
-    "typescript": "^5.7.2",
-    "unplugin-auto-import": "^0.18.6",
-    "unplugin-vue-components": "^0.27.5",
-    "vite": "^6.0.3",
+    "typescript": "^5.7.3",
+    "unplugin-auto-import": "^19.0.0",
+    "unplugin-vue-components": "^28.0.0",
+    "vite": "^6.1.0",
     "vite-plugin-babel": "^1.3.0",
     "vite-plugin-html-env": "1.2.8",
     "vite-plugin-imp": "2.4.0",
     "vite-plugin-monaco-editor": "1.1.0",
     "vite-plugin-static-copy": "^2.2.0",
     "vite-plugin-style-import": "2.0.0",
-    "vue-component-type-helpers": "^2.1.10",
-    "vue-tsc": "^2.1.10"
+    "vue-component-type-helpers": "^2.2.0",
+    "vue-tsc": "^2.2.0"
   },
   "simple-git-hooks": {
     "pre-commit": "cd dbm-ui/frontend && npx lint-staged",
diff --git a/dbm-ui/frontend/src/App.vue b/dbm-ui/frontend/src/App.vue
index d7255c971d..d284634d81 100644
--- a/dbm-ui/frontend/src/App.vue
+++ b/dbm-ui/frontend/src/App.vue
@@ -65,6 +65,8 @@
   import { onMounted, watch } from 'vue';
   import { useI18n } from 'vue-i18n';
 
+  import NoticeComponent from '@blueking/notice-component';
+
   import { getLogout } from '@services/source/logout';
 
   import { useSQLTaskNotify } from '@hooks';
@@ -79,11 +81,9 @@
 
   import { checkDbConsole } from '@utils';
 
-  import NoticeComponent from '@blueking/notice-component';
-
   import Layout from './layout/Index.vue';
 
-  import '@blueking/notice-component/dist/style.css';
+  import('@blueking/notice-component/dist/style.css');
 
   const userProfileStore = useUserProfile();
   const { t, locale } = useI18n();
diff --git a/dbm-ui/frontend/src/common/const/accountTypes.ts b/dbm-ui/frontend/src/common/const/accountTypes.ts
index 0e4bcebbc3..3fa0238eca 100644
--- a/dbm-ui/frontend/src/common/const/accountTypes.ts
+++ b/dbm-ui/frontend/src/common/const/accountTypes.ts
@@ -2,9 +2,9 @@
  * 账号类型
  */
 export enum AccountTypes {
-  MYSQL = 'mysql',
-  TENDBCLUSTER = 'tendbcluster',
   MONGODB = 'mongodb',
+  MYSQL = 'mysql',
   SQLSERVER = 'sqlserver',
+  TENDBCLUSTER = 'tendbcluster',
 }
 export type AccountTypesValues = `${AccountTypes}`;
diff --git a/dbm-ui/frontend/src/common/const/ticketTypes.ts b/dbm-ui/frontend/src/common/const/ticketTypes.ts
index ab1303fc95..3a057a0194 100644
--- a/dbm-ui/frontend/src/common/const/ticketTypes.ts
+++ b/dbm-ui/frontend/src/common/const/ticketTypes.ts
@@ -2,47 +2,47 @@
  * 服务单据类型(与后端字段对应)
  */
 export enum TicketTypes {
-  MYSQL_SINGLE_APPLY = 'MYSQL_SINGLE_APPLY',
-  MYSQL_HA_APPLY = 'MYSQL_HA_APPLY',
-  MYSQL_EXCEL_AUTHORIZE_RULES = 'MYSQL_EXCEL_AUTHORIZE_RULES',
+  MYSQL_ACCOUNT_RULE_CHANGE = 'MYSQL_ACCOUNT_RULE_CHANGE', // MySQL 权限变更
+  MYSQL_ADD_SLAVE = 'MYSQL_ADD_SLAVE',
   MYSQL_AUTHORIZE_RULES = 'MYSQL_AUTHORIZE_RULES',
+  MYSQL_CHECKSUM = 'MYSQL_CHECKSUM',
+  MYSQL_CLIENT_CLONE_RULES = 'MYSQL_CLIENT_CLONE_RULES',
+  MYSQL_DATA_MIGRATE = 'MYSQL_DATA_MIGRATE',
+  MYSQL_DATA_REPAIR = 'MYSQL_DATA_REPAIR', // mysql 数据修复
+  MYSQL_DUMP_DATA = 'MYSQL_DUMP_DATA', // mysql 数据导出
+  MYSQL_EXCEL_AUTHORIZE_RULES = 'MYSQL_EXCEL_AUTHORIZE_RULES',
+  MYSQL_FLASHBACK = 'MYSQL_FLASHBACK',
+  MYSQL_FORCE_IMPORT_SQLFILE = 'MYSQL_FORCE_IMPORT_SQLFILE',
+  MYSQL_HA_APPLY = 'MYSQL_HA_APPLY',
+  MYSQL_HA_DB_TABLE_BACKUP = 'MYSQL_HA_DB_TABLE_BACKUP',
+  MYSQL_HA_DESTROY = 'MYSQL_HA_DESTROY',
   MYSQL_HA_DISABLE = 'MYSQL_HA_DISABLE',
   MYSQL_HA_ENABLE = 'MYSQL_HA_ENABLE',
-  MYSQL_HA_DESTROY = 'MYSQL_HA_DESTROY',
-  MYSQL_SINGLE_DISABLE = 'MYSQL_SINGLE_DISABLE',
-  MYSQL_SINGLE_ENABLE = 'MYSQL_SINGLE_ENABLE',
-  MYSQL_SINGLE_DESTROY = 'MYSQL_SINGLE_DESTROY',
-  MYSQL_INSTANCE_CLONE_RULES = 'MYSQL_INSTANCE_CLONE_RULES',
-  MYSQL_CLIENT_CLONE_RULES = 'MYSQL_CLIENT_CLONE_RULES',
-  MYSQL_RESTORE_LOCAL_SLAVE = 'MYSQL_RESTORE_LOCAL_SLAVE',
+  MYSQL_HA_FULL_BACKUP = 'MYSQL_HA_FULL_BACKUP',
   MYSQL_HA_RENAME_DATABASE = 'MYSQL_HA_RENAME_DATABASE',
-  MYSQL_SINGLE_RENAME_DATABASE = 'MYSQL_SINGLE_RENAME_DATABASE',
-  MYSQL_ADD_SLAVE = 'MYSQL_ADD_SLAVE',
   MYSQL_HA_TRUNCATE_DATA = 'MYSQL_HA_TRUNCATE_DATA',
-  MYSQL_SINGLE_TRUNCATE_DATA = 'MYSQL_SINGLE_TRUNCATE_DATA',
-  MYSQL_CHECKSUM = 'MYSQL_CHECKSUM',
-  MYSQL_DATA_MIGRATE = 'MYSQL_DATA_MIGRATE',
-  MYSQL_PROXY_SWITCH = 'MYSQL_PROXY_SWITCH',
-  MYSQL_HA_DB_TABLE_BACKUP = 'MYSQL_HA_DB_TABLE_BACKUP',
-  MYSQL_MIGRATE_CLUSTER = 'MYSQL_MIGRATE_CLUSTER',
-  MYSQL_MASTER_SLAVE_SWITCH = 'MYSQL_MASTER_SLAVE_SWITCH',
-  MYSQL_PROXY_ADD = 'MYSQL_PROXY_ADD',
-  MYSQL_MASTER_FAIL_OVER = 'MYSQL_MASTER_FAIL_OVER',
   MYSQL_IMPORT_SQLFILE = 'MYSQL_IMPORT_SQLFILE',
-  MYSQL_FORCE_IMPORT_SQLFILE = 'MYSQL_FORCE_IMPORT_SQLFILE',
-  MYSQL_FLASHBACK = 'MYSQL_FLASHBACK',
-  MYSQL_ROLLBACK_CLUSTER = 'MYSQL_ROLLBACK_CLUSTER',
-  MYSQL_RESTORE_SLAVE = 'MYSQL_RESTORE_SLAVE',
-  MYSQL_HA_FULL_BACKUP = 'MYSQL_HA_FULL_BACKUP',
+  MYSQL_INSTANCE_CLONE_RULES = 'MYSQL_INSTANCE_CLONE_RULES',
+  MYSQL_LOCAL_UPGRADE = 'MYSQL_LOCAL_UPGRADE', // MySQL 原地升级
+  MYSQL_MASTER_FAIL_OVER = 'MYSQL_MASTER_FAIL_OVER',
+  MYSQL_MASTER_SLAVE_SWITCH = 'MYSQL_MASTER_SLAVE_SWITCH',
+  MYSQL_MIGRATE_CLUSTER = 'MYSQL_MIGRATE_CLUSTER',
+  MYSQL_MIGRATE_UPGRADE = 'MYSQL_MIGRATE_UPGRADE', // MySQL 迁移升级
   MYSQL_OPEN_AREA = 'MYSQL_OPEN_AREA', // 开区
   MYSQL_PARTITION = 'MYSQL_PARTITION',
-  MYSQL_DUMP_DATA = 'MYSQL_DUMP_DATA', // mysql 数据导出
-  MYSQL_DATA_REPAIR = 'MYSQL_DATA_REPAIR', // mysql 数据修复
+  MYSQL_PROXY_ADD = 'MYSQL_PROXY_ADD',
+  MYSQL_PROXY_SWITCH = 'MYSQL_PROXY_SWITCH',
   MYSQL_PROXY_UPGRADE = 'MYSQL_PROXY_UPGRADE', // MySQL Proxy 升级
-  MYSQL_LOCAL_UPGRADE = 'MYSQL_LOCAL_UPGRADE', // MySQL 原地升级
-  MYSQL_MIGRATE_UPGRADE = 'MYSQL_MIGRATE_UPGRADE', // MySQL 迁移升级
+  MYSQL_RESTORE_LOCAL_SLAVE = 'MYSQL_RESTORE_LOCAL_SLAVE',
+  MYSQL_RESTORE_SLAVE = 'MYSQL_RESTORE_SLAVE',
+  MYSQL_ROLLBACK_CLUSTER = 'MYSQL_ROLLBACK_CLUSTER',
+  MYSQL_SINGLE_APPLY = 'MYSQL_SINGLE_APPLY',
+  MYSQL_SINGLE_DESTROY = 'MYSQL_SINGLE_DESTROY',
+  MYSQL_SINGLE_DISABLE = 'MYSQL_SINGLE_DISABLE',
+  MYSQL_SINGLE_ENABLE = 'MYSQL_SINGLE_ENABLE',
+  MYSQL_SINGLE_RENAME_DATABASE = 'MYSQL_SINGLE_RENAME_DATABASE',
+  MYSQL_SINGLE_TRUNCATE_DATA = 'MYSQL_SINGLE_TRUNCATE_DATA',
   MYSQL_SLAVE_MIGRATE_UPGRADE = 'MYSQL_SLAVE_MIGRATE_UPGRADE', // MySQL 从库迁移升级
-  MYSQL_ACCOUNT_RULE_CHANGE = 'MYSQL_ACCOUNT_RULE_CHANGE', // MySQL 权限变更
 }
 export enum TicketTypes {
   REDIS_BACKUP = 'REDIS_BACKUP',
@@ -50,15 +50,21 @@ export enum TicketTypes {
   REDIS_CLUSTER_APPLY = 'REDIS_CLUSTER_APPLY',
   REDIS_CLUSTER_CUTOFF = 'REDIS_CLUSTER_CUTOFF',
   REDIS_CLUSTER_DATA_COPY = 'REDIS_CLUSTER_DATA_COPY',
+  REDIS_CLUSTER_INS_MIGRATE = 'REDIS_CLUSTER_INS_MIGRATE',
+  REDIS_CLUSTER_LOAD_MODULES = 'REDIS_CLUSTER_LOAD_MODULES', // redis 安装Module
   REDIS_CLUSTER_ROLLBACK_DATA_COPY = 'REDIS_CLUSTER_ROLLBACK_DATA_COPY',
   REDIS_CLUSTER_SHARD_NUM_UPDATE = 'REDIS_CLUSTER_SHARD_NUM_UPDATE',
   REDIS_CLUSTER_TYPE_UPDATE = 'REDIS_CLUSTER_TYPE_UPDATE',
+  REDIS_DATA_STRUCTURE = 'REDIS_DATA_STRUCTURE', // redis 定点构造
+  REDIS_DATA_STRUCTURE_TASK_DELETE = 'REDIS_DATA_STRUCTURE_TASK_DELETE', // redis 构造销毁
   REDIS_DATACOPY_CHECK_REPAIR = 'REDIS_DATACOPY_CHECK_REPAIR',
   REDIS_DESTROY = 'REDIS_DESTROY',
   REDIS_INS_APPLY = 'REDIS_INS_APPLY',
+  REDIS_INSTANCE_CLOSE = 'REDIS_INSTANCE_CLOSE', // redis 主从集群禁用
+  REDIS_INSTANCE_DESTROY = 'REDIS_INSTANCE_DESTROY', // redis 主从集群删除
+  REDIS_INSTANCE_OPEN = 'REDIS_INSTANCE_OPEN', // redis 主从集群启用
   REDIS_INSTANCE_PROXY_CLOSE = 'REDIS_INSTANCE_PROXY_CLOSE',
   REDIS_INSTANCE_PROXY_OPEN = 'REDIS_INSTANCE_PROXY_OPEN',
-  REDIS_INSTANCE_DESTROY = 'REDIS_INSTANCE_DESTROY', // redis 主从集群删除
   REDIS_KEYS_DELETE = 'REDIS_KEYS_DELETE',
   REDIS_KEYS_EXTRACT = 'REDIS_KEYS_EXTRACT',
   REDIS_MASTER_SLAVE_SWITCH = 'REDIS_MASTER_SLAVE_SWITCH',
@@ -68,61 +74,55 @@ export enum TicketTypes {
   REDIS_PLUGIN_DELETE_POLARIS = 'REDIS_PLUGIN_DELETE_POLARIS',
   REDIS_PLUGIN_DNS_BIND_CLB = 'REDIS_PLUGIN_DNS_BIND_CLB',
   REDIS_PLUGIN_DNS_UNBIND_CLB = 'REDIS_PLUGIN_DNS_UNBIND_CLB',
-  REDIS_DATA_STRUCTURE = 'REDIS_DATA_STRUCTURE', // redis 定点构造
-  REDIS_DATA_STRUCTURE_TASK_DELETE = 'REDIS_DATA_STRUCTURE_TASK_DELETE', // redis 构造销毁
-  REDIS_INSTANCE_OPEN = 'REDIS_INSTANCE_OPEN', // redis 主从集群启用
-  REDIS_INSTANCE_CLOSE = 'REDIS_INSTANCE_CLOSE', // redis 主从集群禁用
-  REDIS_CLUSTER_LOAD_MODULES = 'REDIS_CLUSTER_LOAD_MODULES', // redis 安装Module
-  REDIS_PURGE = 'REDIS_PURGE',
   REDIS_PROXY_CLOSE = 'REDIS_PROXY_CLOSE',
   REDIS_PROXY_OPEN = 'REDIS_PROXY_OPEN',
   REDIS_PROXY_SCALE_DOWN = 'REDIS_PROXY_SCALE_DOWN',
   REDIS_PROXY_SCALE_UP = 'REDIS_PROXY_SCALE_UP',
+  REDIS_PURGE = 'REDIS_PURGE',
   REDIS_SCALE_DOWN = 'REDIS_SCALE_DOWN',
   REDIS_SCALE_UP = 'REDIS_SCALE_UP',
   REDIS_SCALE_UPDOWN = 'REDIS_SCALE_UPDOWN',
-  REDIS_VERSION_UPDATE_ONLINE = 'REDIS_VERSION_UPDATE_ONLINE',
-  REDIS_CLUSTER_INS_MIGRATE = 'REDIS_CLUSTER_INS_MIGRATE',
   REDIS_SINGLE_INS_MIGRATE = 'REDIS_SINGLE_INS_MIGRATE',
+  REDIS_VERSION_UPDATE_ONLINE = 'REDIS_VERSION_UPDATE_ONLINE',
 }
 export enum TicketTypes {
+  TENDBCLUSTER_ACCOUNT_RULE_CHANGE = 'TENDBCLUSTER_ACCOUNT_RULE_CHANGE', // spider 权限变更
   TENDBCLUSTER_APPLY = 'TENDBCLUSTER_APPLY',
-  TENDBCLUSTER_DISABLE = 'TENDBCLUSTER_DISABLE', // spider 集群禁用
-  TENDBCLUSTER_ENABLE = 'TENDBCLUSTER_ENABLE', // spider 集群启用
-  TENDBCLUSTER_DESTROY = 'TENDBCLUSTER_DESTROY', // spider 集群下架
-  TENDBCLUSTER_SPIDER_SLAVE_DESTROY = 'TENDBCLUSTER_SPIDER_SLAVE_DESTROY', // spider 只读集群下架
-  TENDBCLUSTER_SPIDER_REDUCE_MNT = 'TENDBCLUSTER_SPIDER_REDUCE_MNT', // spider 运维节点下架
-  TENDBCLUSTER_SPIDER_ADD_NODES = 'TENDBCLUSTER_SPIDER_ADD_NODES', // Spider扩容接入层
-  TENDBCLUSTER_SPIDER_REDUCE_NODES = 'TENDBCLUSTER_SPIDER_REDUCE_NODES', // Spider缩容接入层
-  TENDBCLUSTER_SPIDER_SLAVE_APPLY = 'TENDBCLUSTER_SPIDER_SLAVE_APPLY', // Spider 部署只读接入层
-  TENDBCLUSTER_SPIDER_MNT_APPLY = 'TENDBCLUSTER_SPIDER_MNT_APPLY', // Spider 添加运维节点
-  TENDBCLUSTER_MASTER_SLAVE_SWITCH = 'TENDBCLUSTER_MASTER_SLAVE_SWITCH', // Spider remote 主从切换
-  TENDBCLUSTER_RENAME_DATABASE = 'TENDBCLUSTER_RENAME_DATABASE', // Spider Tendbcluster 重命名
-  TENDBCLUSTER_MASTER_FAIL_OVER = 'TENDBCLUSTER_MASTER_FAIL_OVER', // Spider remote主故障切换
-  TENDBCLUSTER_DB_TABLE_BACKUP = 'TENDBCLUSTER_DB_TABLE_BACKUP', // Spider TenDBCluster 库表备份
-  TENDBCLUSTER_FULL_BACKUP = 'TENDBCLUSTER_FULL_BACKUP', // Spider TenDBCluster 全备单据
-  TENDBCLUSTER_NODE_REBALANCE = 'TENDBCLUSTER_NODE_REBALANCE', // Spider 集群remote节点扩缩容
-  TENDBCLUSTER_ROLLBACK_CLUSTER = 'TENDBCLUSTER_ROLLBACK_CLUSTER', // Spider 定点回档
-  TENDBCLUSTER_FLASHBACK = 'TENDBCLUSTER_FLASHBACK', // Spider 闪回
-  TENDBCLUSTER_TRUNCATE_DATABASE = 'TENDBCLUSTER_TRUNCATE_DATABASE', // Spider tendbcluster 清档
-  TENDBCLUSTER_SPIDER_MNT_DESTROY = 'TENDBCLUSTER_SPIDER_MNT_DESTROY', // Spider 运维节点下架
+  TENDBCLUSTER_AUTHORIZE_RULES = 'TENDBCLUSTER_AUTHORIZE_RULES',
   TENDBCLUSTER_CHECKSUM = 'TENDBCLUSTER_CHECKSUM', // Spider checksum
   TENDBCLUSTER_CLIENT_CLONE_RULES = 'TENDBCLUSTER_CLIENT_CLONE_RULES', // Spider 客户端权限克隆
-  TENDBCLUSTER_INSTANCE_CLONE_RULES = 'TENDBCLUSTER_INSTANCE_CLONE_RULES', // Spider DB 实例权限克隆
-  TENDBCLUSTER_AUTHORIZE_RULES = 'TENDBCLUSTER_AUTHORIZE_RULES',
+  TENDBCLUSTER_DATA_REPAIR = 'TENDBCLUSTER_DATA_REPAIR', // spider 数据修复
+  TENDBCLUSTER_DB_TABLE_BACKUP = 'TENDBCLUSTER_DB_TABLE_BACKUP', // Spider TenDBCluster 库表备份
+  TENDBCLUSTER_DESTROY = 'TENDBCLUSTER_DESTROY', // spider 集群下架
+  TENDBCLUSTER_DISABLE = 'TENDBCLUSTER_DISABLE', // spider 集群禁用
+  TENDBCLUSTER_DUMP_DATA = 'TENDBCLUSTER_DUMP_DATA', // spider 数据导出
+  TENDBCLUSTER_ENABLE = 'TENDBCLUSTER_ENABLE', // spider 集群启用
   TENDBCLUSTER_EXCEL_AUTHORIZE_RULES = 'TENDBCLUSTER_EXCEL_AUTHORIZE_RULES',
-  TENDBCLUSTER_PARTITION = 'TENDBCLUSTER_PARTITION', // Spider 分区管理
-  TENDBCLUSTER_IMPORT_SQLFILE = 'TENDBCLUSTER_IMPORT_SQLFILE', // Spider SQL变更执行
+  TENDBCLUSTER_FLASHBACK = 'TENDBCLUSTER_FLASHBACK', // Spider 闪回
   TENDBCLUSTER_FORCE_IMPORT_SQLFILE = 'TENDBCLUSTER_FORCE_IMPORT_SQLFILE', // Spider SQL变更执行
-  TENDBCLUSTER_OPEN_AREA = 'TENDBCLUSTER_OPEN_AREA', // Spider 开区
+  TENDBCLUSTER_FULL_BACKUP = 'TENDBCLUSTER_FULL_BACKUP', // Spider TenDBCluster 全备单据
+  TENDBCLUSTER_IMPORT_SQLFILE = 'TENDBCLUSTER_IMPORT_SQLFILE', // Spider SQL变更执行
+  TENDBCLUSTER_INSTANCE_CLONE_RULES = 'TENDBCLUSTER_INSTANCE_CLONE_RULES', // Spider DB 实例权限克隆
+  TENDBCLUSTER_MASTER_FAIL_OVER = 'TENDBCLUSTER_MASTER_FAIL_OVER', // Spider remote主故障切换
+  TENDBCLUSTER_MASTER_SLAVE_SWITCH = 'TENDBCLUSTER_MASTER_SLAVE_SWITCH', // Spider remote 主从切换
   TENDBCLUSTER_MIGRATE_CLUSTER = 'TENDBCLUSTER_MIGRATE_CLUSTER', // spider 迁移主从
+  TENDBCLUSTER_NODE_REBALANCE = 'TENDBCLUSTER_NODE_REBALANCE', // Spider 集群remote节点扩缩容
+  TENDBCLUSTER_OPEN_AREA = 'TENDBCLUSTER_OPEN_AREA', // Spider 开区
+  TENDBCLUSTER_PARTITION = 'TENDBCLUSTER_PARTITION', // Spider 分区管理
+  TENDBCLUSTER_RENAME_DATABASE = 'TENDBCLUSTER_RENAME_DATABASE', // Spider Tendbcluster 重命名
   TENDBCLUSTER_RESTORE_LOCAL_SLAVE = 'TENDBCLUSTER_RESTORE_LOCAL_SLAVE', // spider 重建从库-原地重建
   TENDBCLUSTER_RESTORE_SLAVE = 'TENDBCLUSTER_RESTORE_SLAVE', // spider 重建从库-新机重建
-  TENDBCLUSTER_DUMP_DATA = 'TENDBCLUSTER_DUMP_DATA', // spider 数据导出
-  TENDBCLUSTER_DATA_REPAIR = 'TENDBCLUSTER_DATA_REPAIR', // spider 数据修复
+  TENDBCLUSTER_ROLLBACK_CLUSTER = 'TENDBCLUSTER_ROLLBACK_CLUSTER', // Spider 定点回档
   TENDBCLUSTER_SEMANTIC_CHECK = 'TENDBCLUSTER_SEMANTIC_CHECK', // spider 模拟执行
-  TENDBCLUSTER_ACCOUNT_RULE_CHANGE = 'TENDBCLUSTER_ACCOUNT_RULE_CHANGE', // spider 权限变更
+  TENDBCLUSTER_SPIDER_ADD_NODES = 'TENDBCLUSTER_SPIDER_ADD_NODES', // Spider扩容接入层
+  TENDBCLUSTER_SPIDER_MNT_APPLY = 'TENDBCLUSTER_SPIDER_MNT_APPLY', // Spider 添加运维节点
+  TENDBCLUSTER_SPIDER_MNT_DESTROY = 'TENDBCLUSTER_SPIDER_MNT_DESTROY', // Spider 运维节点下架
+  TENDBCLUSTER_SPIDER_REDUCE_MNT = 'TENDBCLUSTER_SPIDER_REDUCE_MNT', // spider 运维节点下架
+  TENDBCLUSTER_SPIDER_REDUCE_NODES = 'TENDBCLUSTER_SPIDER_REDUCE_NODES', // Spider缩容接入层
+  TENDBCLUSTER_SPIDER_SLAVE_APPLY = 'TENDBCLUSTER_SPIDER_SLAVE_APPLY', // Spider 部署只读接入层
+  TENDBCLUSTER_SPIDER_SLAVE_DESTROY = 'TENDBCLUSTER_SPIDER_SLAVE_DESTROY', // spider 只读集群下架
   TENDBCLUSTER_TEMPORARY_DESTROY = 'TENDBCLUSTER_TEMPORARY_DESTROY', // 临时集群销毁
+  TENDBCLUSTER_TRUNCATE_DATABASE = 'TENDBCLUSTER_TRUNCATE_DATABASE', // Spider tendbcluster 清档
 }
 export enum TicketTypes {
   MONGODB_ADD_MONGOS = 'MONGODB_ADD_MONGOS', // mongo 扩容接入层
@@ -130,119 +130,119 @@ export enum TicketTypes {
   MONGODB_AUTHORIZE_RULES = 'MONGODB_AUTHORIZE_RULES', // MongoDB 集群授权
   MONGODB_BACKUP = 'MONGODB_BACKUP', // mongo 库表备份
   MONGODB_CUTOFF = 'MONGODB_CUTOFF', // mongo 整机替换
-  MONGODB_DISABLE = 'MONGODB_DISABLE', // mongodb禁用
   MONGODB_DESTROY = 'MONGODB_DESTROY', // MongoDB 集群删除
+  MONGODB_DISABLE = 'MONGODB_DISABLE', // mongodb禁用
   MONGODB_ENABLE = 'MONGODB_ENABLE', // MongoDB 集群启用
   MONGODB_EXCEL_AUTHORIZE = 'MONGODB_EXCEL_AUTHORIZE', // MongoDB 导入授权
   MONGODB_EXCEL_AUTHORIZE_RULES = 'MONGODB_EXCEL_AUTHORIZE_RULES', // MongoDB 导入授权
   MONGODB_EXEC_SCRIPT_APPLY = 'MONGODB_EXEC_SCRIPT_APPLY', // mongo 变更脚本执行
+  MONGODB_FULL_BACKUP = 'MONGODB_FULL_BACKUP', // mongo 全库备份
+  MONGODB_INSTANCE_DEINSTALL = 'MONGODB_INSTANCE_DEINSTALL', // mongo 实例下架
   MONGODB_INSTANCE_RELOAD = 'MONGODB_INSTANCE_RELOAD', // mongodb重启
-  MONGODB_REMOVE_NS = 'MONGODB_REMOVE_NS', // mongo 清档
   MONGODB_REDUCE_MONGOS = 'MONGODB_REDUCE_MONGOS', // mongo 缩容接入层
   MONGODB_REDUCE_SHARD_NODES = 'MONGODB_REDUCE_SHARD_NODES', // mongo 缩容 shard 节点数
+  MONGODB_REMOVE_NS = 'MONGODB_REMOVE_NS', // mongo 清档
+  MONGODB_REPLICASET_APPLY = 'MONGODB_REPLICASET_APPLY', // MongoDB 副本集部署申请
   MONGODB_RESTORE = 'MONGODB_RESTORE', // mongo 定点构造
   MONGODB_SCALE_UPDOWN = 'MONGODB_SCALE_UPDOWN', // MongoDB 分片式集群单个容量变更
   MONGODB_SHARD_APPLY = 'MONGODB_SHARD_APPLY', // MongoDB 分片式集群部署申请
-  MONGODB_REPLICASET_APPLY = 'MONGODB_REPLICASET_APPLY', // MongoDB 副本集部署申请
   MONGODB_TEMPORARY_DESTROY = 'MONGODB_TEMPORARY_DESTROY', // mongo 临时集群销毁
-  MONGODB_FULL_BACKUP = 'MONGODB_FULL_BACKUP', // mongo 全库备份
-  MONGODB_INSTANCE_DEINSTALL = 'MONGODB_INSTANCE_DEINSTALL', // mongo 实例下架
 }
 export enum TicketTypes {
-  SQLSERVER_SINGLE_APPLY = 'SQLSERVER_SINGLE_APPLY', // sqlserver单节点部署
-  SQLSERVER_HA_APPLY = 'SQLSERVER_HA_APPLY', // sqlserver主从部署
-  SQLSERVER_DISABLE = 'SQLSERVER_DISABLE', // sqlserver 禁用
-  SQLSERVER_ENABLE = 'SQLSERVER_ENABLE', // sqlserver 启用
-  SQLSERVER_DESTROY = 'SQLSERVER_DESTROY', // sqlserver 删除
+  SQLSERVER_ADD_SLAVE = 'SQLSERVER_ADD_SLAVE', // sqlserver 增加从库'
   SQLSERVER_AUTHORIZE_RULES = 'SQLSERVER_AUTHORIZE_RULES', // sqlserver 集群授权
-  SQLSERVER_EXCEL_AUTHORIZE_RULES = 'SQLSERVER_EXCEL_AUTHORIZE_RULES', // sqlserver 导入授权
-  SQLSERVER_RESET = 'SQLSERVER_RESET', // sqlserver 集群重置
   SQLSERVER_BACKUP_DBS = 'SQLSERVER_BACKUP_DBS', // sqlserver 数据库备份
-  SQLSERVER_DBRENAME = 'SQLSERVER_DBRENAME', // sqlserver 数据库重命名
-  SQLSERVER_DATA_MIGRATE = 'SQLSERVER_DATA_MIGRATE', // sqlserver 数据迁移
+  SQLSERVER_BUILD_DB_SYNC = 'SQLSERVER_BUILD_DB_SYNC', // DB建立同步
   SQLSERVER_CLEAR_DBS = 'SQLSERVER_CLEAR_DBS', // sqlserver 清档
-  SQLSERVER_MASTER_FAIL_OVER = 'SQLSERVER_MASTER_FAIL_OVER', // sqlserver 主故障切换
-  SQLSERVER_MASTER_SLAVE_SWITCH = 'SQLSERVER_MASTER_SLAVE_SWITCH', // sqlserver 主从切换
-  SQLSERVER_ROLLBACK = 'SQLSERVER_ROLLBACK', // sqlserver 定点回档
-  SQLSERVER_ADD_SLAVE = 'SQLSERVER_ADD_SLAVE', // sqlserver 增加从库'
-  SQLSERVER_RESTORE_SLAVE = 'SQLSERVER_RESTORE_SLAVE', // sqlserver 重建从库_新机重建
-  SQLSERVER_RESTORE_LOCAL_SLAVE = 'SQLSERVER_RESTORE_LOCAL_SLAVE', // sqlserver 重建从库_原地重建
-  SQLSERVER_IMPORT_SQLFILE = 'SQLSERVER_IMPORT_SQLFILE', // sqlserver SQL变更执行'
+  SQLSERVER_DATA_MIGRATE = 'SQLSERVER_DATA_MIGRATE', // sqlserver 数据迁移
+  SQLSERVER_DBRENAME = 'SQLSERVER_DBRENAME', // sqlserver 数据库重命名
+  SQLSERVER_DESTROY = 'SQLSERVER_DESTROY', // sqlserver 删除
+  SQLSERVER_DISABLE = 'SQLSERVER_DISABLE', // sqlserver 禁用
+  SQLSERVER_ENABLE = 'SQLSERVER_ENABLE', // sqlserver 启用
+  SQLSERVER_EXCEL_AUTHORIZE_RULES = 'SQLSERVER_EXCEL_AUTHORIZE_RULES', // sqlserver 导入授权
   SQLSERVER_FULL_MIGRATE = 'SQLSERVER_FULL_MIGRATE', // sqlserver 全量迁移
+  SQLSERVER_HA_APPLY = 'SQLSERVER_HA_APPLY', // sqlserver主从部署
+  SQLSERVER_IMPORT_SQLFILE = 'SQLSERVER_IMPORT_SQLFILE', // sqlserver SQL变更执行'
   SQLSERVER_INCR_MIGRATE = 'SQLSERVER_INCR_MIGRATE', // sqlserver 增量迁移
-  SQLSERVER_BUILD_DB_SYNC = 'SQLSERVER_BUILD_DB_SYNC', // DB建立同步
+  SQLSERVER_MASTER_FAIL_OVER = 'SQLSERVER_MASTER_FAIL_OVER', // sqlserver 主故障切换
+  SQLSERVER_MASTER_SLAVE_SWITCH = 'SQLSERVER_MASTER_SLAVE_SWITCH', // sqlserver 主从切换
   SQLSERVER_MODIFY_STATUS = 'SQLSERVER_MODIFY_STATUS', // SQLServer 修改故障实例状态
+  SQLSERVER_RESET = 'SQLSERVER_RESET', // sqlserver 集群重置
+  SQLSERVER_RESTORE_LOCAL_SLAVE = 'SQLSERVER_RESTORE_LOCAL_SLAVE', // sqlserver 重建从库_原地重建
+  SQLSERVER_RESTORE_SLAVE = 'SQLSERVER_RESTORE_SLAVE', // sqlserver 重建从库_新机重建
+  SQLSERVER_ROLLBACK = 'SQLSERVER_ROLLBACK', // sqlserver 定点回档
+  SQLSERVER_SINGLE_APPLY = 'SQLSERVER_SINGLE_APPLY', // sqlserver单节点部署
 }
 
 export enum TicketTypes {
   ES_APPLY = 'ES_APPLY',
-  ES_DISABLE = 'ES_DISABLE',
   ES_DESTROY = 'ES_DESTROY',
+  ES_DISABLE = 'ES_DISABLE',
   ES_ENABLE = 'ES_ENABLE',
+  ES_REBOOT = 'ES_REBOOT',
+  ES_REPLACE = 'ES_REPLACE',
   ES_SCALE_UP = 'ES_SCALE_UP',
   ES_SHRINK = 'ES_SHRINK',
-  ES_REPLACE = 'ES_REPLACE',
-  ES_REBOOT = 'ES_REBOOT',
 }
 export enum TicketTypes {
   KAFKA_APPLY = 'KAFKA_APPLY',
-  KAFKA_ENABLE = 'KAFKA_ENABLE',
-  KAFKA_DISABLE = 'KAFKA_DISABLE',
   KAFKA_DESTROY = 'KAFKA_DESTROY',
+  KAFKA_DISABLE = 'KAFKA_DISABLE',
+  KAFKA_ENABLE = 'KAFKA_ENABLE',
+  KAFKA_REBOOT = 'KAFKA_REBOOT',
+  KAFKA_REPLACE = 'KAFKA_REPLACE',
   KAFKA_SCALE_UP = 'KAFKA_SCALE_UP',
   KAFKA_SHRINK = 'KAFKA_SHRINK',
-  KAFKA_REPLACE = 'KAFKA_REPLACE',
-  KAFKA_REBOOT = 'KAFKA_REBOOT',
 }
 export enum TicketTypes {
   HDFS_APPLY = 'HDFS_APPLY',
-  HDFS_ENABLE = 'HDFS_ENABLE',
-  HDFS_DISABLE = 'HDFS_DISABLE',
   HDFS_DESTROY = 'HDFS_DESTROY',
+  HDFS_DISABLE = 'HDFS_DISABLE',
+  HDFS_ENABLE = 'HDFS_ENABLE',
+  HDFS_REBOOT = 'HDFS_REBOOT',
+  HDFS_REPLACE = 'HDFS_REPLACE',
   HDFS_SCALE_UP = 'HDFS_SCALE_UP',
   HDFS_SHRINK = 'HDFS_SHRINK',
-  HDFS_REPLACE = 'HDFS_REPLACE',
-  HDFS_REBOOT = 'HDFS_REBOOT',
 }
 export enum TicketTypes {
   INFLUXDB_APPLY = 'INFLUXDB_APPLY',
+  INFLUXDB_DESTROY = 'INFLUXDB_DESTROY',
   INFLUXDB_DISABLE = 'INFLUXDB_DISABLE',
+  INFLUXDB_ENABLE = 'INFLUXDB_ENABLE',
   INFLUXDB_REBOOT = 'INFLUXDB_REBOOT',
   INFLUXDB_REPLACE = 'INFLUXDB_REPLACE',
-  INFLUXDB_ENABLE = 'INFLUXDB_ENABLE',
-  INFLUXDB_DESTROY = 'INFLUXDB_DESTROY',
 }
 export enum TicketTypes {
   PULSAR_APPLY = 'PULSAR_APPLY',
-  PULSAR_REBOOT = 'PULSAR_REBOOT',
-  PULSAR_ENABLE = 'PULSAR_ENABLE',
-  PULSAR_DISABLE = 'PULSAR_DISABLE',
   PULSAR_DESTROY = 'PULSAR_DESTROY',
+  PULSAR_DISABLE = 'PULSAR_DISABLE',
+  PULSAR_ENABLE = 'PULSAR_ENABLE',
+  PULSAR_REBOOT = 'PULSAR_REBOOT',
   PULSAR_REPLACE = 'PULSAR_REPLACE',
-  PULSAR_SHRINK = 'PULSAR_SHRINK',
   PULSAR_SCALE_UP = 'PULSAR_SCALE_UP',
+  PULSAR_SHRINK = 'PULSAR_SHRINK',
 }
 export enum TicketTypes {
+  TBINLOGDUMPER_DISABLE_NODES = 'TBINLOGDUMPER_DISABLE_NODES', // dumper 节点禁用
+  TBINLOGDUMPER_ENABLE_NODES = 'TBINLOGDUMPER_ENABLE_NODES', // dumper 节点启动
   TBINLOGDUMPER_INSTALL = 'TBINLOGDUMPER_INSTALL', // dumper 新建订阅
-  TBINLOGDUMPER_SWITCH_NODES = 'TBINLOGDUMPER_SWITCH_NODES', // dumper 节点迁移
   TBINLOGDUMPER_REDUCE_NODES = 'TBINLOGDUMPER_REDUCE_NODES', // dumper 节点下架
-  TBINLOGDUMPER_ENABLE_NODES = 'TBINLOGDUMPER_ENABLE_NODES', // dumper 节点启动
-  TBINLOGDUMPER_DISABLE_NODES = 'TBINLOGDUMPER_DISABLE_NODES', // dumper 节点禁用
+  TBINLOGDUMPER_SWITCH_NODES = 'TBINLOGDUMPER_SWITCH_NODES', // dumper 节点迁移
 }
 export enum TicketTypes {
   RIAK_CLUSTER_APPLY = 'RIAK_CLUSTER_APPLY', // Riak 集群申请
   RIAK_CLUSTER_DESTROY = 'RIAK_CLUSTER_DESTROY', // Riak 集群删除
   RIAK_CLUSTER_DISABLE = 'RIAK_CLUSTER_DISABLE', // Riak 集群禁用
   RIAK_CLUSTER_ENABLE = 'RIAK_CLUSTER_ENABLE', // Riak 集群启用
-  RIAK_CLUSTER_SCALE_OUT = 'RIAK_CLUSTER_SCALE_OUT', // Riak 集群扩容
-  RIAK_CLUSTER_SCALE_IN = 'RIAK_CLUSTER_SCALE_IN', // Riak 集群缩容
   RIAK_CLUSTER_REBOOT = 'RIAK_CLUSTER_REBOOT', // Riak 节点重启
+  RIAK_CLUSTER_SCALE_IN = 'RIAK_CLUSTER_SCALE_IN', // Riak 集群缩容
+  RIAK_CLUSTER_SCALE_OUT = 'RIAK_CLUSTER_SCALE_OUT', // Riak 集群扩容
 }
 export enum TicketTypes {
   DORIS_APPLY = 'DORIS_APPLY', // Doris 集群申请
-  DORIS_ENABLE = 'DORIS_ENABLE', // doris 启用
-  DORIS_DISABLE = 'DORIS_DISABLE', // doris 禁用
   DORIS_DESTROY = 'DORIS_DESTROY', // doris 删除
+  DORIS_DISABLE = 'DORIS_DISABLE', // doris 禁用
+  DORIS_ENABLE = 'DORIS_ENABLE', // doris 启用
   DORIS_REBOOT = 'DORIS_REBOOT', // doris 重启
   DORIS_REPLACE = 'DORIS_REPLACE', // doris 替换
   DORIS_SCALE_UP = 'DORIS_SCALE_UP', // doris 扩容
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/mongo/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/mongo/Index.vue
index 76b0583cfc..a9ea002c67 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/mongo/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/mongo/Index.vue
@@ -224,7 +224,7 @@
     },
     {
       label: t('访问入口'),
-      field: 'cluster_name',
+      field: 'master_domain',
       minWidth: 250,
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
index f7e308fb0b..88604fef9b 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/redis/Index.vue
@@ -209,7 +209,7 @@
     },
     {
       label: t('访问入口'),
-      field: 'cluster_name',
+      field: 'master_domain',
       fixed: 'left',
       minWidth: 250,
       showOverflowTooltip: true,
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-ha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-ha/Index.vue
index c5a825a201..5dc3f6110b 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-ha/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-ha/Index.vue
@@ -210,7 +210,7 @@
     },
     {
       label: t('访问入口'),
-      field: 'cluster_name',
+      field: 'master_domain',
       width: 240,
       fixed: 'left',
       showOverflowTooltip: true,
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-single/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-single/Index.vue
index 14917511fa..2a0bd93ba2 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-single/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/sqlserver-single/Index.vue
@@ -211,7 +211,7 @@
     },
     {
       label: t('访问入口'),
-      field: 'cluster_name',
+      field: 'master_domain',
       width: 280,
       fixed: 'left',
       showOverflowTooltip: true,
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
index 06f6465b8f..cc7e960195 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-cluster/Index.vue
@@ -212,7 +212,7 @@
     },
     {
       label: t('访问入口'),
-      field: 'cluster_name',
+      field: 'master_domain',
       minWidth: 300,
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
index ad7df62cdd..0de433b6fd 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendb-single/Index.vue
@@ -215,7 +215,7 @@
     },
     {
       label: t('访问入口'),
-      field: 'cluster_name',
+      field: 'master_domain',
       minWidth: 250,
       fixed: 'left',
       showOverflowTooltip: true,
diff --git a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
index f89a325c6a..4529eb654e 100644
--- a/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-selector/components/tendbha/Index.vue
@@ -210,7 +210,7 @@
     },
     {
       label: t('访问入口'),
-      field: 'cluster_name',
+      field: 'master_domain',
       minWidth: 280,
       showOverflowTooltip: true,
       render: ({ data }: { data: ResourceItem }) => (
diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
index c275ae8eeb..98ee70518d 100644
--- a/dbm-ui/frontend/src/components/editable-table/Column.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -4,11 +4,14 @@
     ref="rootRef"
     class="bk-editable-table-body-column"
     :class="{
+      [`fixed-${fixed}-column`]: fixed,
       'is-focused': isFocused,
       'is-error': validateState.isError,
+      'is-readonly': readonly,
       'is-disabled': Boolean(disabledTips),
-      [`is-column-fixed-${fixed}`]: fixed,
       'is-previous-sibling-rowspan': isPreviousSiblingRowspan,
+      'is-fixed':
+        (fixed === 'left' && tableContext?.fixedLeft.value) || (fixed === 'right' && tableContext?.fixedRight.value),
     }"
     :data-name="columnKey"
     :rowspan="rowspan">
@@ -17,25 +20,36 @@
         content: disabledTips,
         disabled: !disabledTips,
       }"
-      class="bk-editable-table-field-cell">
+      class="bk-editable-table-field-cell"
+      :style="{
+        width: `${tableContext?.columnSizeConfig.value[columnKey]?.renderWidth}px`,
+      }">
       <slot />
+
       <div
-        v-if="validateState.isError"
-        class="bk-editable-table-column-error">
-        <slot
-          name="error"
-          v-bind="{ message: validateState.errorMessage }">
-          <i
-            v-bk-tooltips="validateState.errorMessage"
-            class="bk-dbm db-icon-exclamation-fill" />
-        </slot>
+        v-if="loading"
+        class="bk-editable-table-column-loading">
+        <div class="loading-flag">
+          <Loading />
+        </div>
       </div>
     </div>
+    <div
+      v-if="validateState.isError"
+      class="bk-editable-table-column-error">
+      <slot
+        name="error"
+        v-bind="{ message: validateState.errorMessage }">
+        <i
+          v-bk-tooltips="validateState.errorMessage"
+          class="bk-dbm db-icon-exclamation-fill" />
+      </slot>
+    </div>
   </td>
 </template>
 <script lang="ts">
-  import get from 'lodash/get';
-  import isFunction from 'lodash/isFunction';
+  import { Loading } from 'bkui-vue/lib/icon';
+  import _ from 'lodash';
   import {
     type ComponentInternalInstance,
     computed,
@@ -70,6 +84,10 @@
     fixed?: 'left' | 'right';
     disabledMethod?: (rowData?: any, field?: string) => string | boolean;
     description?: string;
+    loading?: boolean;
+    appendRules?: IRule[];
+    readonly?: boolean;
+    resizeable?: boolean;
   }
 
   interface Slots {
@@ -82,36 +100,46 @@
 
   interface Expose {
     validate: () => Promise<boolean>;
+    clearValidate: () => void;
+    getRowIndex: () => number;
   }
 
-  const hasOwn = (obj: Record<string, any>, key: string) => Object.prototype.hasOwnProperty.call(obj, key);
-
-  const getRuleMessage = (rule: IRule) => {
-    if (typeof rule.message === 'function') {
-      return rule.message();
-    }
-    return rule.message;
-  };
-
   export interface IContext {
     instance: ComponentInternalInstance;
     el: HTMLElement;
     key: string;
     props: Props;
     slots: Slots;
-    validate: () => Promise<boolean>;
+    validate: (trigger?: string) => Promise<boolean>;
   }
 
   export const EditableTableColumnKey: InjectionKey<{
     blur: () => void;
     focus: () => void;
     registerRules: (params: IRule[]) => void;
-    validate: () => Promise<boolean>;
+    validate: (trigger?: string) => Promise<boolean>;
     clearValidate: () => void;
+    getRowIndex: () => number;
   }> = Symbol('EditableTableColumnKey');
 </script>
 <script setup lang="ts">
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    field: undefined,
+    rowspan: undefined,
+    width: undefined,
+    minWidth: undefined,
+    maxWidth: undefined,
+    rules: undefined,
+    max: undefined,
+    min: undefined,
+    maxlength: undefined,
+    fixed: undefined,
+    disabledMethod: undefined,
+    description: undefined,
+    appendRules: undefined,
+    readonly: false,
+    resizeable: true,
+  });
   const slots = defineSlots<Slots>();
 
   const tableContext = inject(tableInjectKey);
@@ -121,11 +149,13 @@
   const columnKey = `bk-editable-table-column-${rowContext?.getColumnIndex()}`;
 
   interface IFinalRule {
-    validator: (value: any) => Promise<boolean | string> | boolean | string;
+    validator: (value: any, rowData?: Record<string, any>) => Promise<boolean | string> | boolean | string;
     message: string | (() => string);
     trigger: string;
   }
 
+  let loadingValidatorTimer: ReturnType<typeof setTimeout>;
+
   const getRulesFromProps = (props: Props) => {
     const rules: (IFinalRule & {
       required?: boolean;
@@ -133,6 +163,27 @@
     })[] = [];
 
     const label = props.label || '';
+    if (props.loading) {
+      rules.push({
+        validator: () => {
+          clearTimeout(loadingValidatorTimer);
+          return new Promise((resolve) => {
+            const loop = () => {
+              if (!props.loading) {
+                resolve(true);
+                return;
+              }
+              loadingValidatorTimer = setTimeout(() => {
+                loop();
+              }, 500);
+            };
+            loop();
+          });
+        },
+        message: `${label}查询中`,
+        trigger: '',
+      });
+    }
     if (props.required) {
       rules.push({
         required: true,
@@ -183,10 +234,10 @@
     const formatConfigRules = configRules.reduce<IFinalRule[]>((result, rule) => {
       let rulevalidator: any;
       if (rule.required) {
-        rulevalidator = isFunction(rule.validator) ? rule.validator : defaultValidator.required;
+        rulevalidator = _.isFunction(rule.validator) ? rule.validator : defaultValidator.required;
         customRequired = true;
       } else if (rule.email) {
-        rulevalidator = isFunction(rule.validator) ? rule.validator : defaultValidator.email;
+        rulevalidator = _.isFunction(rule.validator) ? rule.validator : defaultValidator.email;
         customEmail = true;
       } else if (Number(rule.max) > -1) {
         rulevalidator = (value: any) => defaultValidator.max(value, rule.max as number);
@@ -196,7 +247,7 @@
         rulevalidator = (value: any) => defaultValidator.min(value, rule.max as number);
       } else if (Object.prototype.toString.call(rule.pattern) === '[object RegExp]') {
         rulevalidator = (value: any) => defaultValidator.pattern(value, rule.pattern as RegExp);
-      } else if (isFunction(rule.validator)) {
+      } else if (_.isFunction(rule.validator)) {
         rulevalidator = rule.validator;
       } else {
         // 不支持的配置规则
@@ -225,6 +276,25 @@
     return [...filterPropRules, ...formatConfigRules];
   };
 
+  const getTriggerRules = (rules: IFinalRule[], trigger?: string) =>
+    rules.reduce((result, rule) => {
+      if (!rule.trigger || !trigger) {
+        result.push(rule);
+        return result;
+      }
+      if (rule.trigger === trigger) {
+        result.push(rule);
+      }
+      return result;
+    }, [] as IFinalRule[]);
+
+  const getRuleMessage = (rule: IFinalRule) => {
+    if (typeof rule.message === 'function') {
+      return rule.message();
+    }
+    return rule.message;
+  };
+
   let registerRules: IRule[] = [];
 
   const rootRef = ref<HTMLElement>();
@@ -250,22 +320,40 @@
     return result ? '无法操作' : '';
   });
 
-  const validate = (): Promise<boolean> => {
+  const getRowIndex = () => tableContext!.getColumnRelateRowIndexByInstance(currentInstance);
+  const clearValidate = () => {
+    validateState.isError = false;
+    validateState.errorMessage = '';
+  };
+
+  const triggerChangeQueue: string[] = [];
+  const triggerBlurQueue: string[] = [];
+  const triggerQueue: undefined[] = [];
+
+  const validate = (trigger?: string): Promise<boolean> => {
     if (!tableContext) {
       return Promise.resolve(false);
     }
+    // 单元格被合并跳过验证
+    if (!isRowspanRender.value) {
+      return Promise.resolve(true);
+    }
     // 没有设置 field 不进行验证
     if (!props.field) {
       return Promise.resolve(true);
     }
     let rules: IRule[] = [];
-    // 继承 form 的验证规则
-    if (tableContext && tableContext.props.rules && hasOwn(tableContext.props.rules, props.field)) {
+    // 继承 table 的验证规则
+    if (tableContext && tableContext.props.rules && _.has(tableContext.props.rules, props.field)) {
       rules = tableContext.props.rules[props.field];
     }
-    // form-item 自己的 rules 规则优先级更高
+    // column 自己的 rules 规则优先级更高
     if (props.rules) {
       rules = props.rules as IRule[];
+    } else if (props.appendRules) {
+      // 配置了 props.rules 时 props.appendRules 不生效
+      // props.appendRules 与 table 的验证规则合并且优先级高
+      rules = [...rules, ...props.appendRules];
     }
 
     // 通过 useColumn 注册
@@ -273,20 +361,9 @@
       rules = registerRules;
     }
 
-    // 合并规则属性配置
-    const finalRuleList = mergeRules(rules, getRulesFromProps(props));
-
-    // 重新触发验证重置上次的验证状态
-    if (rules.length > 0) {
-      validateState.isError = false;
-      validateState.errorMessage = '';
-    }
-
-    const value = get(tableContext.props.model, props.field);
-
     const doValidate = (() => {
       let stepIndex = -1;
-      return (): Promise<boolean> => {
+      return (finalRuleList: IFinalRule[], value: any, rowDataValue: Record<string, any>): Promise<boolean> => {
         stepIndex = stepIndex + 1;
         // 验证通过
         if (stepIndex >= finalRuleList.length) {
@@ -296,44 +373,83 @@
         const rule = finalRuleList[stepIndex];
 
         return Promise.resolve().then(() => {
-          const result = rule.validator(value);
-          // 异步验证（validator 返回一个 Promise）
-          if (typeof result !== 'boolean' && typeof result !== 'string' && typeof result.then === 'function') {
-            return result
-              .then((data) => {
-                // 异步验证结果为 false
-                if (data === false) {
-                  return Promise.reject(getRuleMessage(rule));
-                }
-                if (typeof data === 'string') {
-                  return Promise.reject(data);
-                }
-              })
-              .then(
-                () => doValidate(),
-                (errorMessage: string) => {
-                  validateState.isError = true;
-                  validateState.errorMessage = errorMessage;
-                  tableContext.emits('validate', props.field || '', false, errorMessage);
-                  return Promise.reject(validateState.errorMessage);
-                },
-              );
-          }
-          // 同步验证失败
-          if (result === false) {
-            const errorMessage = getRuleMessage(rule);
-            validateState.isError = true;
-            // 验证结果返回的是 String 表示验证失败，返回结果作为错误信息
-            validateState.errorMessage = typeof result === 'string' ? result : errorMessage;
-            tableContext.emits('validate', props.field || '', false, errorMessage);
-            return Promise.reject(validateState.errorMessage);
+          const result = rule.validator(value, rowDataValue);
+          // 同步验证通过下一步
+          if (result === true) {
+            return doValidate(finalRuleList, value, rowDataValue);
           }
-          // 下一步
-          return doValidate();
+          // Promise异步处理验证结果
+          return Promise.resolve(result)
+            .then((data) => {
+              // 异步验证结果为 false
+              if (data === false) {
+                return Promise.reject(getRuleMessage(rule));
+              }
+              if (typeof data === 'string') {
+                return Promise.reject(data);
+              }
+            })
+            .then(
+              () => doValidate(finalRuleList, value, rowDataValue),
+              (errorMessage: string) => {
+                validateState.isError = true;
+                validateState.errorMessage = errorMessage;
+                tableContext.emits('validate', props.field || '', false, errorMessage);
+                return Promise.reject(validateState.errorMessage);
+              },
+            );
         });
       };
     })();
-    return doValidate();
+
+    if (trigger !== undefined) {
+      if (trigger === 'change') {
+        triggerChangeQueue.push(trigger);
+      } else if (trigger === 'blur') {
+        triggerBlurQueue.push(trigger);
+      }
+    } else {
+      triggerQueue.push(trigger);
+    }
+
+    return new Promise((resolve, reject) => {
+      const delay = Math.max(Number(tableContext.props.validateDelay || 60), 60);
+      setTimeout(() => {
+        // setTimeout 延迟执行 Column 可能会已经被卸载
+        if (!currentInstance.isMounted) {
+          return reject(false);
+        }
+        if (trigger === undefined) {
+          triggerQueue.pop();
+          if (triggerQueue.length > 0) {
+            return reject(false);
+          }
+        }
+
+        // 处理 change 和 blur 触发器
+        if (trigger === 'change' || trigger === 'blur') {
+          const latestQueue = trigger === 'change' ? triggerChangeQueue : triggerBlurQueue;
+          latestQueue.pop();
+          if (triggerQueue.length > 0 || latestQueue.length > 0) {
+            return reject(false);
+          }
+        }
+
+        // 合并规则属性配置
+        const finalRuleList = getTriggerRules(mergeRules(rules, getRulesFromProps(props)), trigger);
+
+        if (finalRuleList.length > 0) {
+          // 重新触发验证重置上次的验证状态
+          validateState.isError = false;
+          validateState.errorMessage = '';
+        }
+
+        const rowDataValue = tableContext.props.model[rowContext!.getRowIndex()];
+        const value = _.get(rowDataValue, props.field || '_');
+
+        return resolve(doValidate(finalRuleList, value, rowDataValue));
+      }, delay);
+    });
   };
 
   provide(EditableTableColumnKey, {
@@ -347,10 +463,8 @@
       registerRules = rules;
     },
     validate,
-    clearValidate: () => {
-      validateState.isError = false;
-      validateState.errorMessage = '';
-    },
+    clearValidate,
+    getRowIndex,
   });
 
   onMounted(() => {
@@ -388,52 +502,99 @@
   onBeforeUnmount(() => {
     rowContext?.unregisterColumn(columnKey);
     registerRules = [];
+    clearTimeout(loadingValidatorTimer);
   });
 
   defineExpose<Expose>({
     validate,
+    clearValidate,
+    getRowIndex,
   });
 </script>
 <style lang="less">
-  .bk-editable-table {
-    td.bk-editable-table-body-column {
-      &.is-focused {
-        z-index: 99;
+  @hover-z-index: 100;
+  @focus-z-index: 102;
+  @fixed-focus-z-index: 122;
+  @error-z-index: 101;
+  @fixed-error-z-index: 121;
+
+  @keyframes editable-table-column-loading {
+    0% {
+      transform: rotateZ(0);
+    }
 
-        &::before {
-          border-color: #3a84ff;
-        }
+    100% {
+      transform: rotateZ(360deg);
+    }
+  }
+
+  .bk-editable-table-body-column {
+    &:hover {
+      z-index: @hover-z-index;
+
+      &::before {
+        border-color: #979ba5;
       }
+    }
 
-      &.is-disabled {
-        .bk-editable-table-field-cell {
-          &::after {
-            position: absolute;
-            z-index: 1;
-            cursor: not-allowed;
-            content: '';
-            inset: 0;
-          }
+    &.is-disabled {
+      .bk-editable-table-field-cell {
+        &::after {
+          position: absolute;
+          z-index: 9;
+          cursor: not-allowed;
+          content: '';
+          inset: 0;
+        }
+
+        * {
+          pointer-events: none;
+          background: #fafbfd;
         }
       }
+    }
 
-      &.is-error {
-        z-index: 99;
+    &.is-error {
+      z-index: @error-z-index;
+      background: #fff1f1;
+
+      &::before {
+        border-color: #ea3636;
+      }
+
+      .bk-editable-table-field-cell {
+        padding-right: 20px;
         background: #fff1f1;
+      }
+    }
 
-        &::before {
-          border-color: #ea3636;
-        }
+    &.is-focused {
+      z-index: @focus-z-index;
 
-        .bk-editable-table-field-cell {
-          background: #fff1f1;
-        }
+      &::before {
+        border-color: #3a84ff;
+      }
+    }
+
+    &.is-readonly {
+      &::before {
+        border-color: #dcdee5;
       }
+    }
 
-      &.is-previous-sibling-rowspan {
-        &::before {
-          left: -1px;
-        }
+    &.is-previous-sibling-rowspan {
+      &::before {
+        left: -1px;
+      }
+    }
+
+    &.is-fixed {
+      &.is-error {
+        z-index: @fixed-error-z-index;
+      }
+
+      &.is-focused {
+        z-index: @fixed-focus-z-index;
       }
     }
   }
@@ -453,9 +614,27 @@
     z-index: 9;
     display: flex;
     height: 40px;
-    padding: 0 8px;
+    padding-right: 8px;
     color: #ea3636;
     align-items: center;
     transform: translateY(-50%);
   }
+
+  .bk-editable-table-column-loading {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(255 255 255 / 90%);
+
+    .loading-flag {
+      width: 16px;
+      height: 16px;
+      font-size: 16px;
+      color: #3a84ff;
+      animation: editable-table-column-loading 1.5s linear infinite;
+    }
+  }
 </style>
diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/dbm-ui/frontend/src/components/editable-table/Index.vue
index 29d2e2ecca..b0c30634c1 100644
--- a/dbm-ui/frontend/src/components/editable-table/Index.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Index.vue
@@ -29,8 +29,11 @@
 
     <div class="bk-edit-table-scroll">
       <div
-        ref="scrollX"
+        ref="scrollXRef"
         class="bk-edit-table-scroll-x"
+        :class="{
+          'is-show': isShowScrollX,
+        }"
         @scroll="handleScrollX">
         <div
           class="bk-edit-table-scroll-x-inner"
@@ -46,29 +49,41 @@
 </template>
 <script lang="ts">
   import _ from 'lodash';
-  import { type ComponentInternalInstance, type InjectionKey, provide, ref, shallowRef, type VNode, watch } from 'vue';
+  import {
+    type ComponentInternalInstance,
+    type InjectionKey,
+    provide,
+    type Ref,
+    ref,
+    shallowRef,
+    type VNode,
+    watch,
+  } from 'vue';
 
   import Column, { type IContext as IColumnContext } from './Column.vue';
   import RenderHeader from './component/render-header/Index.vue';
+  import Block from './edit/Block.vue';
   import DatePicker from './edit/DatePicker.vue';
   import Input from './edit/Input.vue';
   import Select from './edit/Select.vue';
   import TagInput from './edit/TagInput.vue';
-  import Text from './edit/Text.vue';
   import Textarea from './edit/Textarea.vue';
   import TimePicker from './edit/TimePicker.vue';
   import useResize from './hooks/use-resize';
   import useScroll from './hooks/use-scroll';
   import Row from './Row.vue';
   import { type IRule } from './types';
+  import useColumn from './useColumn';
+  import useTable from './useTable';
 
   /* eslint-disable vue/no-unused-properties */
-  interface Props {
+  export interface Props {
     model: Record<string, any>[];
     rules?: Record<string, IRule[]>;
+    validateDelay?: number;
   }
 
-  interface Emits {
+  export interface Emits {
     (e: 'validate', property: string, result: boolean, message: string): boolean;
   }
 
@@ -76,24 +91,29 @@
     default: () => VNode;
   }
 
-  interface Expose {
+  export interface Expose {
     validate: () => Promise<boolean>;
     validateByRowIndex: (row: number | number[]) => Promise<boolean>;
     validateByColumnIndex: (row: number | number[]) => Promise<boolean>;
     validateByField: (row: string | string[]) => Promise<boolean>;
   }
 
-  export const tableInjectKey: InjectionKey<{
-    props: Props;
-    emits: Emits;
-    registerRow: (rowColumnList: IColumnContext[]) => void;
-    updateRow: () => void;
-    unregisterRow: (rowColumnList: IColumnContext[]) => void;
-    getAllColumnList: () => IColumnContext[][];
-    getColumnRelateRowIndexByInstance: (columnInstance: ComponentInternalInstance) => number;
-  }> = Symbol.for('bk-editable-table');
-
-  export { Column, DatePicker, Input, Row, Select, TagInput, Text, Textarea, TimePicker };
+  export const tableInjectKey: InjectionKey<
+    {
+      props: Props;
+      emits: Emits;
+      fixedRight: Ref<boolean>;
+      fixedLeft: Ref<boolean>;
+      columnSizeConfig: Ref<Record<string, { renderWidth: number }>>;
+      registerRow: (rowColumnList: IColumnContext[]) => void;
+      updateRow: () => void;
+      unregisterRow: (rowColumnList: IColumnContext[]) => void;
+      getAllColumnList: () => IColumnContext[][];
+      getColumnRelateRowIndexByInstance: (columnInstance: ComponentInternalInstance) => number;
+    } & Expose
+  > = Symbol.for('bk-editable-table');
+
+  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Textarea, TimePicker, useColumn, useTable };
 </script>
 <script setup lang="ts">
   const props = defineProps<Props>();
@@ -107,19 +127,17 @@
   });
 
   const tableRef = ref<HTMLElement>();
-  const scrollX = ref<HTMLElement>();
+  const scrollXRef = ref<HTMLElement>();
   const resizePlaceholderRef = ref<HTMLElement>();
   const tableWidth = ref<'auto' | number>('auto');
 
   const columnList = shallowRef<IColumnContext[]>([]);
   const rowList = shallowRef<IColumnContext[][]>([]);
 
-  const { handleMouseDown, handleMouseMove, columnSizeConfig } = useResize(tableRef, resizePlaceholderRef, columnList);
-  const { leftFixedStyles, rightFixedStyles, initalScroll } = useScroll(tableRef);
+  const isShowScrollX = ref(true);
 
-  watch(columnList, () => {
-    initalScroll();
-  });
+  const { handleMouseDown, handleMouseMove, columnSizeConfig } = useResize(tableRef, resizePlaceholderRef, columnList);
+  const { leftFixedStyles, rightFixedStyles, initalScroll, fixedLeft, fixedRight } = useScroll(tableRef);
 
   watch(
     columnSizeConfig,
@@ -129,7 +147,13 @@
           return;
         }
         tableWidth.value = tableRef.value.scrollWidth;
-        scrollX.value!.scrollLeft = tableRef.value!.scrollLeft;
+        scrollXRef.value!.scrollLeft = tableRef.value!.scrollLeft;
+        // 重新计算滚动显示状态
+        isShowScrollX.value = false;
+        setTimeout(() => {
+          isShowScrollX.value = scrollXRef.value!.offsetWidth + 2 < scrollXRef.value!.scrollWidth;
+        });
+        initalScroll();
       });
     },
     {
@@ -155,33 +179,25 @@
       _.some(rowColumnList, (column) => column.instance === columnInstance),
     );
 
-  provide(tableInjectKey, {
-    props,
-    emits,
-    registerRow,
-    updateRow,
-    unregisterRow,
-    getAllColumnList: () => rowList.value,
-    getColumnRelateRowIndexByInstance,
-  });
-
   const handleScrollX = _.throttle((event: Event) => {
     tableRef.value!.scrollLeft = (event.target as Element)!.scrollLeft;
   }, 30);
 
   const handleContentScroll = _.throttle((event: Event) => {
-    scrollX.value!.scrollLeft = (event.target as Element)!.scrollLeft;
+    scrollXRef.value!.scrollLeft = (event.target as Element)!.scrollLeft;
     tableRef.value?.click();
   }, 30);
 
-  defineExpose<Expose>({
-    validate() {
-      return Promise.all(_.flatten(rowList.value).map((column) => column.validate())).then(
+  const validate = () =>
+    Promise.resolve().then(() =>
+      Promise.all(_.flatten(rowList.value).map((column) => column.validate())).then(
         () => true,
         () => false,
-      );
-    },
-    validateByRowIndex(rowIndex: number | number[]) {
+      ),
+    );
+
+  const validateByRowIndex = (rowIndex: number | number[]) =>
+    Promise.resolve().then(() => {
       const rowIndexList = Array.isArray(rowIndex) ? rowIndex : [rowIndex];
 
       const columnList = rowIndexList.reduce<IColumnContext[]>((result, index) => {
@@ -193,8 +209,10 @@
         () => true,
         () => false,
       );
-    },
-    validateByColumnIndex(columnIndex: number | number[]) {
+    });
+
+  const validateByColumnIndex = (columnIndex: number | number[]) =>
+    Promise.resolve().then(() => {
       const columnIndexList = Array.isArray(columnIndex) ? columnIndex : [columnIndex];
 
       const columnList = rowList.value.reduce((result, rowItem) => {
@@ -208,8 +226,10 @@
         () => true,
         () => false,
       );
-    },
-    validateByField(field: string | string[]) {
+    });
+
+  const validateByField = (field: string | string[]) =>
+    Promise.resolve().then(() => {
       const fieldList = Array.isArray(field) ? field : [field];
 
       const columnList = rowList.value.reduce((result, rowItem) => {
@@ -227,10 +247,37 @@
         () => true,
         () => false,
       );
-    },
+    });
+
+  provide(tableInjectKey, {
+    props,
+    emits,
+    fixedLeft,
+    fixedRight,
+    columnSizeConfig,
+    registerRow,
+    updateRow,
+    unregisterRow,
+    getAllColumnList: () => rowList.value,
+    getColumnRelateRowIndexByInstance,
+    validate,
+    validateByRowIndex,
+    validateByColumnIndex,
+    validateByField,
+  });
+
+  defineExpose<Expose>({
+    validate,
+    validateByRowIndex,
+    validateByColumnIndex,
+    validateByField,
   });
 </script>
 <style lang="less">
+  @fixed-column-z-index: 111;
+  @scroll-z-index: 200;
+  @fixed-wrapper-z-index: 300;
+
   .bk-editable-table {
     position: relative;
     background: #fff;
@@ -256,7 +303,6 @@
     }
 
     table {
-      width: 100%;
       text-align: left;
       table-layout: fixed;
     }
@@ -293,17 +339,14 @@
         }
       }
 
-      &.is-column-fixed-left {
+      &.fixed-left-column {
         position: sticky;
         left: 0;
-        z-index: 9;
-        background: #fff;
       }
 
-      &.is-column-fixed-right {
+      &.fixed-right-column {
         position: sticky;
         right: 0;
-        background: #fff;
       }
     }
 
@@ -312,8 +355,9 @@
       color: #313238;
       background-color: #fafbfd;
 
-      &.is-column-fixed-left,
-      &.is-column-fixed-right {
+      &.fixed-left-column,
+      &.fixed-right-column {
+        z-index: 9;
         background-color: #fafbfd;
       }
 
@@ -325,8 +369,8 @@
     td {
       padding: 0;
 
-      &.is-column-fixed-left,
-      &.is-column-fixed-right {
+      &.is-fixed {
+        z-index: @fixed-column-z-index;
         background: #fff;
       }
     }
@@ -350,6 +394,7 @@
     top: 0;
     bottom: 0;
     left: 0;
+    z-index: @fixed-wrapper-z-index;
     overflow-x: hidden;
     pointer-events: none;
     box-shadow: 8px 0 10px -5px rgb(0 0 0 / 12%);
@@ -360,8 +405,9 @@
     top: 0;
     right: 0;
     bottom: 0;
+    z-index: @fixed-wrapper-z-index;
     pointer-events: none;
-    box-shadow: 8px 0 10px -5px rgb(0 0 0 / 12%);
+    box-shadow: -8px 0 10px -5px rgb(0 0 0 / 12%);
   }
 
   .bk-editable-column-resize {
@@ -378,13 +424,18 @@
     right: 1px;
     bottom: 0;
     left: 1px;
-    z-index: 99999999;
+    z-index: @scroll-z-index;
     height: 14px;
     overflow: scroll hidden;
     cursor: pointer;
     opacity: 0%;
+    visibility: hidden;
     transition: 0.15s;
 
+    &.is-show {
+      visibility: visible;
+    }
+
     &::-webkit-scrollbar {
       height: 6px;
       transition: 0.15s;
diff --git a/dbm-ui/frontend/src/components/editable-table/Row.vue b/dbm-ui/frontend/src/components/editable-table/Row.vue
index 6f22c1d74c..ae88ef871e 100644
--- a/dbm-ui/frontend/src/components/editable-table/Row.vue
+++ b/dbm-ui/frontend/src/components/editable-table/Row.vue
@@ -5,7 +5,7 @@
 </template>
 <script lang="ts">
   import _ from 'lodash';
-  import { inject, type InjectionKey, onBeforeMount, onMounted, provide } from 'vue';
+  import { inject, type InjectionKey, onBeforeUnmount, onMounted, provide } from 'vue';
 
   import type { IContext as IColumnContext } from './Column.vue';
   import { tableInjectKey } from './Index.vue';
@@ -14,6 +14,7 @@
     registerColumn: (column: IColumnContext) => void;
     unregisterColumn: (columnKey: string) => void;
     getColumnIndex: () => number;
+    getRowIndex: () => number;
   }> = Symbol.for('bk-editable-table-row');
 </script>
 <script setup lang="ts">
@@ -47,17 +48,20 @@
     };
   })();
 
+  const getRowIndex = () => tableContext?.getAllColumnList().findIndex((item) => item === columnList) as number;
+
   provide(injectKey, {
     registerColumn,
     unregisterColumn,
     getColumnIndex,
+    getRowIndex,
   });
 
   onMounted(() => {
     tableContext?.registerRow(columnList);
   });
 
-  onBeforeMount(() => {
+  onBeforeUnmount(() => {
     tableContext?.unregisterRow(columnList);
   });
 </script>
diff --git a/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue b/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue
index d667c2bee9..acde459fd8 100644
--- a/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue
+++ b/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue
@@ -5,9 +5,11 @@
         v-for="(columnItem, index) in columnList"
         :key="`#${index}}#${columnItem.key}`"
         :class="{
-          [`is-column-fixed-${columnItem.props.fixed}`]: columnItem.props.fixed,
+          'fixed-left-column': columnItem.props.fixed === 'left',
+          'fixed-right-column': columnItem.props.fixed === 'right',
         }"
         :column="columnItem"
+        :column-size-config="columnSizeConfig"
         :style="{
           width:
             columnSizeConfig[columnItem.key].renderWidth > 0 ? `${columnSizeConfig[columnItem.key].renderWidth}px` : '',
diff --git a/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts b/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts
index 73f8fdc10e..64551164a3 100644
--- a/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts
+++ b/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts
@@ -9,6 +9,10 @@ export default defineComponent({
       type: Object as () => IColumnContext,
       required: true,
     },
+    columnSizeConfig: {
+      type: Object as () => Record<string, { renderWidth: number }>,
+      required: true,
+    },
   },
   setup(props) {
     return () => {
@@ -72,6 +76,12 @@ export default defineComponent({
           'div',
           {
             class: 'bk-editable-table-label-cell',
+            style: {
+              width:
+                props.columnSizeConfig[props.column.key].renderWidth > 0
+                  ? `${props.columnSizeConfig[props.column.key].renderWidth - 20}px`
+                  : '',
+            },
           },
           childNode,
         ),
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Block.vue b/dbm-ui/frontend/src/components/editable-table/edit/Block.vue
new file mode 100644
index 0000000000..458044daa3
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Block.vue
@@ -0,0 +1,151 @@
+<template>
+  <div
+    class="bk-editable-text"
+    @blur="handleBlur"
+    @focus="handleFocus">
+    <div
+      v-if="slots.prepend"
+      class="bk-editable-text-prepend-wrapper">
+      <slot name="prepend" />
+    </div>
+    <div
+      class="bk-editable-text-content-wrapper"
+      :class="{
+        'is-show-prepend': Boolean(slots.prepend),
+        'is-show-append': Boolean(slots.append),
+      }">
+      <span ref="content">
+        <slot>
+          {{ modelValue }}
+        </slot>
+      </span>
+      <div
+        v-if="isShowPlacehoder"
+        class="bk-editable-text-content-placeholder">
+        {{ placeholder }}
+      </div>
+    </div>
+    <div
+      v-if="slots.append"
+      class="bk-editable-text-append-wrapper">
+      <slot name="append" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { nextTick, onMounted, onUpdated, ref, useTemplateRef, type VNode, watch } from 'vue';
+
+  import useColumn from '../useColumn';
+
+  interface Props {
+    placeholder?: string;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    placeholder: '请设置值',
+  });
+
+  const slots = defineSlots<{
+    prepend?: () => VNode;
+    default?: () => VNode;
+    append?: () => VNode;
+  }>();
+
+  const columnContext = useColumn();
+
+  const modelValue = defineModel<string>();
+
+  const contentRef = useTemplateRef('content');
+  const isShowPlacehoder = ref(true);
+
+  watch(modelValue, () => {
+    columnContext?.validate('change');
+  });
+
+  const calcPlaceholder = () => {
+    nextTick(() => {
+      isShowPlacehoder.value = !contentRef.value?.innerText;
+    });
+  };
+
+  const handleBlur = () => {
+    columnContext?.blur();
+    columnContext?.validate('blur');
+  };
+
+  const handleFocus = () => {
+    columnContext?.focus();
+  };
+
+  onUpdated(() => {
+    calcPlaceholder();
+  });
+
+  onMounted(() => {
+    calcPlaceholder();
+  });
+</script>
+<style lang="less">
+  .bk-editable-text {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-height: 40px;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .bk-editable-text-prepend-wrapper,
+  .bk-editable-text-append-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 0 8px;
+    user-select: none;
+  }
+
+  .bk-editable-text-prepend-wrapper {
+    padding-left: 10px;
+  }
+
+  .bk-editable-text-append-wrapper {
+    padding-right: 10px;
+    margin-left: auto;
+  }
+
+  .bk-editable-text-content-wrapper {
+    position: relative;
+    width: 100%;
+    min-height: 40px;
+    padding: 10px 0;
+    margin: 0 10px;
+    overflow: hidden;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+
+    &.is-show-prepend {
+      margin-left: 0;
+    }
+
+    &.is-show-append {
+      margin-right: 0;
+    }
+  }
+
+  .bk-editable-text-content-placeholder {
+    position: absolute;
+    display: flex;
+    height: 40px;
+    overflow: hidden;
+    font-size: 12px;
+    color: #c4c6cc;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    user-select: none;
+    align-items: center;
+    inset: 0;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue b/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
index a7fc6f07ed..a335989229 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
@@ -1,21 +1,58 @@
 <template>
   <BkDatePicker
+    v-model="modelValue"
     append-to-body
     class="bk-editable-date-picker"
+    clearable
+    v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus" />
 </template>
-<script setup lang="ts">
+<script lang="ts">
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    format?: string;
+    multiple?: boolean;
+    disabledDate?: (date: Date | number) => boolean;
+  }
+</script>
+<script setup lang="ts" generic="T extends [string, string] | [Date, Date] | string | Date">
+  import { useAttrs, watch } from 'vue';
+
   import useColumn from '../useColumn';
 
+  const props = defineProps<Props>();
+  const emits = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+    (e: 'change', value: T): void;
+  }>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
+  const modelValue = defineModel<T>();
+
+  watch(modelValue, () => {
+    columnContext?.validate('change');
+  });
+
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
+  };
+
+  const handleChange = (value: T) => {
+    emits('change', value);
   };
 </script>
 <style lang="less">
@@ -31,6 +68,10 @@
         height: 40px;
         background: transparent;
         border: none;
+
+        &:focus {
+          border: none;
+        }
       }
     }
   }
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
index a530bb0a3e..30c10f804e 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
@@ -1,41 +1,115 @@
 <template>
-  <BkInput
-    v-model="modelValue"
-    class="bk-editable-input"
-    @blur="handleBlur"
-    @focus="handleFocus" />
+  <div class="bk-editable-input">
+    <div
+      v-if="slots.prepend"
+      class="bk-editable-input-prepend-wrapper">
+      <slot name="prepend" />
+    </div>
+    <BkInput
+      v-model="modelValue"
+      v-bind="{ ...attrs, ...props }"
+      clearable
+      @blur="handleBlur"
+      @change="handleChange"
+      @focus="handleFocus" />
+    <div
+      v-if="slots.append"
+      class="bk-editable-input-append-wrapper">
+      <slot name="append" />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
-  import { watch } from 'vue';
+  import { useAttrs, watch } from 'vue';
 
   import useColumn from '../useColumn';
 
-  const columnContext = useColumn();
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    prefix?: string;
+    suffix?: string;
+    maxlength?: number;
+    minlength?: number;
+  }
+
+  interface Emits {
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+    (e: 'change', params: string): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
 
   const modelValue = defineModel<string>();
 
+  const slots = defineSlots<{
+    prepend?: () => VNode;
+    default?: () => VNode;
+    append?: () => VNode;
+  }>();
+
+  const attrs = useAttrs();
+  const columnContext = useColumn();
+
   watch(modelValue, () => {
-    columnContext?.validate();
+    columnContext?.validate('change');
   });
 
+  const handleChange = (value: string) => {
+    emits('change', value);
+  };
+
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
   };
 </script>
 <style lang="less">
   .bk-editable-input {
-    &.bk-input {
+    position: relative;
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+
+    .bk-input {
       height: 40px;
       border: none;
       box-shadow: none !important;
-    }
 
-    .bk-input--text {
-      background: transparent;
+      .bk-input--text {
+        background: transparent;
+      }
+
+      .bk-input--suffix-icon {
+        background: transparent;
+      }
     }
   }
+
+  .bk-editable-input-prepend-wrapper,
+  .bk-editable-input-append-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    user-select: none;
+  }
+
+  .bk-editable-input-prepend-wrapper {
+    padding-left: 10px;
+  }
+
+  .bk-editable-input-append-wrapper {
+    padding-right: 10px;
+    margin-left: auto;
+  }
 </style>
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Select.vue b/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
index d6ee9b6a5e..91b067ab40 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Select.vue
@@ -1,22 +1,80 @@
 <template>
   <BkSelect
+    v-model="modelValue"
     class="bk-editable-select"
+    v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus">
-    <slot />
+    <template
+      v-if="slots.option"
+      #optionRender="{ item, index }">
+      <slot
+        :index="index"
+        :item="item"
+        name="option" />
+    </template>
+    <template
+      v-if="slots.trigger"
+      #trigger="{ selected }">
+      <slot
+        name="trigger"
+        :selected="selected" />
+    </template>
   </BkSelect>
 </template>
-<script setup lang="ts">
+<script lang="ts">
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    filterable?: boolean;
+    popoverOptions?: Record<string, any>;
+    clearable?: boolean;
+  }
+</script>
+<script setup lang="ts" generic="T extends string[] | number[] | string | number">
+  import { useAttrs, watch } from 'vue';
+
   import useColumn from '../useColumn';
 
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+    (e: 'change', value: T): void;
+  }>();
+
+  const slots = defineSlots<{
+    trigger?: (value: { selected: any[] }) => VNode;
+    option?: (value: { item: Record<string, any>; index: number }) => VNode;
+  }>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
+  const modelValue = defineModel<T>();
+
+  watch(modelValue, () => {
+    columnContext?.validate('change');
+  });
+
+  const handleChange = (value: T) => {
+    emits('change', value);
+  };
+
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
   };
 </script>
 <style lang="less">
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue b/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
index 3f1d6ee34c..314bb04575 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
@@ -1,32 +1,53 @@
 <template>
+  <!-- prettier-ignore -->
   <BkTagInput
-    v-model="modelValue"
+    v-model="(modelValue as string[])"
     allow-create
     class="bk-editable-tag-input"
+    v-bind="{ ...attrs, ...props }"
     clearable
     has-delete-icon
     @blur="handleBlur"
     @focus="handleFocus" />
 </template>
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string[] | number[] | string | number">
   import { watch } from 'vue';
 
   import useColumn from '../useColumn';
 
+  /* eslint-disable vue/no-unused-properties */
+  export interface Props {
+    placeholder?: string;
+    maxData?: number;
+  }
+
+  export interface Emits<T> {
+    (e: 'blur' | 'focus'): void;
+    (e: 'change', value: T): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits<T>>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
-  const modelValue = defineModel<string[]>();
+  const modelValue = defineModel<T>();
 
   watch(modelValue, () => {
-    columnContext?.validate();
+    columnContext?.validate('change');
   });
 
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
   };
 </script>
 <style lang="less">
@@ -35,9 +56,16 @@
       width: 100%;
 
       .bk-tag-input-trigger {
+        min-height: 40px;
         background: transparent;
         border: none;
         border-radius: 0;
+
+        .placeholder {
+          top: 50%;
+          height: auto;
+          transform: translateY(-50%);
+        }
       }
     }
   }
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Text.vue b/dbm-ui/frontend/src/components/editable-table/edit/Text.vue
deleted file mode 100644
index 31b85e4bfc..0000000000
--- a/dbm-ui/frontend/src/components/editable-table/edit/Text.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-  <div
-    class="bk-editable-text"
-    @blur="handleBlur"
-    @focus="handleFocus">
-    <div
-      v-if="slots.prepend"
-      class="text-prepend-wrapper">
-      <slot name="prepend" />
-    </div>
-    <div
-      class="text-content-wrapper"
-      :class="{
-        'is-show-prepend': Boolean(slots.prepend),
-        'is-show-append': Boolean(slots.append),
-      }">
-      <span ref="content">
-        <slot>
-          {{ modelValue }}
-        </slot>
-      </span>
-      <div
-        v-if="isShowPlacehoder"
-        class="text-content-placeholder">
-        {{ placeholder }}
-      </div>
-    </div>
-    <div
-      v-if="slots.append"
-      class="text-append-wrapper">
-      <slot name="append" />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import { onBeforeUpdate, ref, useTemplateRef, type VNode, watch } from 'vue';
-
-  import useColumn from '../useColumn';
-
-  interface Props {
-    placeholder?: string;
-  }
-
-  withDefaults(defineProps<Props>(), {
-    placeholder: '请设置值',
-  });
-
-  const slots = defineSlots<{
-    prepend?: () => VNode;
-    default?: () => VNode;
-    append?: () => VNode;
-  }>();
-
-  const columnContext = useColumn();
-
-  const modelValue = defineModel<string>();
-
-  const contentRef = useTemplateRef('content');
-
-  const isShowPlacehoder = ref(false);
-
-  watch(modelValue, () => {
-    columnContext?.validate();
-  });
-
-  const handleBlur = () => {
-    columnContext?.blur();
-  };
-
-  const handleFocus = () => {
-    columnContext?.focus();
-  };
-
-  onBeforeUpdate(() => {
-    isShowPlacehoder.value = !contentRef.value?.innerText;
-  });
-</script>
-<style lang="less">
-  .bk-editable-text {
-    position: relative;
-    display: flex;
-    width: 100%;
-    min-height: 40px;
-    align-items: center;
-    overflow: hidden;
-
-    .text-prepend-wrapper,
-    .text-append-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      padding: 0 8px;
-      user-select: none;
-    }
-
-    .text-prepend-wrapper {
-      padding-left: 10px;
-    }
-
-    .text-append-wrapper {
-      padding-right: 10px;
-      margin-left: auto;
-    }
-
-    .text-content-wrapper {
-      position: relative;
-      width: 100%;
-      min-height: 40px;
-      padding: 10px 0;
-      margin: 0 10px;
-      overflow: hidden;
-      line-height: 20px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      flex: 1;
-
-      &.is-show-prepend {
-        margin-left: 0;
-      }
-
-      &.is-show-append {
-        margin-right: 0;
-      }
-    }
-
-    .text-content-placeholder {
-      position: absolute;
-      display: flex;
-      height: 40px;
-      overflow: hidden;
-      font-size: 12px;
-      color: #c4c6cc;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      user-select: none;
-      align-items: center;
-      inset: 0;
-    }
-  }
-</style>
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue b/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
index d8aaf10a66..c9f50935b7 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
@@ -1,46 +1,121 @@
 <template>
-  <BkInput
-    v-model="modelValue"
-    autosize
-    class="bk-editable-input"
-    :resize="false"
-    type="textarea"
-    @blur="handleBlur"
-    @focus="handleFocus" />
+  <div class="bk-editable-textarea">
+    <div
+      v-if="slots.prepend"
+      class="bk-editable-textarea-prepend-wrapper">
+      <slot name="prepend" />
+    </div>
+    <BkInput
+      v-model="modelValue"
+      autosize
+      clearable
+      :resize="false"
+      v-bind="{ ...attrs, ...props }"
+      type="textarea"
+      @blur="handleBlur"
+      @change="handleChange"
+      @focus="handleFocus" />
+    <div
+      v-if="slots.append"
+      class="bk-editable-textarea-append-wrapper">
+      <slot name="append" />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
-  import { watch } from 'vue';
+  import { useAttrs, watch } from 'vue';
 
   import useColumn from '../useColumn';
 
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    maxlength?: number;
+    minlength?: number;
+    rows?: number;
+  }
+
+  interface Emits {
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+    (e: 'change', value: string): void;
+  }
+
+  const props = defineProps<Props>();
+  const emits = defineEmits<Emits>();
+
+  const slots = defineSlots<{
+    prepend?: () => VNode;
+    default?: () => VNode;
+    append?: () => VNode;
+  }>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
   const modelValue = defineModel<string>();
 
   watch(modelValue, () => {
-    columnContext?.validate();
+    columnContext?.validate('change');
   });
 
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
+  };
+
+  const handleChange = (value: string) => {
+    emits('change', value);
   };
 </script>
 <style lang="less">
-  .bk-editable-input {
-    &.bk-textarea {
+  .bk-editable-textarea {
+    position: relative;
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+
+    .bk-textarea {
       min-height: 40px;
+      padding-top: 6px;
       background: transparent;
       border: none;
       border-radius: none;
       box-shadow: none !important;
+      flex-direction: row;
 
       textarea {
         background: transparent;
       }
+
+      .bk-textarea--suffix-icon {
+        align-items: center;
+      }
     }
   }
+
+  .bk-editable-textarea-prepend-wrapper,
+  .bk-editable-textarea-append-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    user-select: none;
+  }
+
+  .bk-editable-textarea-prepend-wrapper {
+    padding-left: 10px;
+  }
+
+  .bk-editable-textarea-append-wrapper {
+    padding-right: 10px;
+    margin-left: auto;
+  }
 </style>
diff --git a/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue b/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
index 472b801390..5d589dc8bf 100644
--- a/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
+++ b/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
@@ -1,21 +1,58 @@
 <template>
   <BkTimePicker
+    v-model="modelValue"
     append-to-body
     class="bk-editable-time-picker"
+    v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus" />
 </template>
-<script setup lang="ts">
+<script lang="ts">
+  /* eslint-disable vue/no-unused-properties */
+  interface Props {
+    placeholder?: string;
+    type?: 'time' | 'timerange';
+    format?: string;
+    multiple?: boolean;
+    disabledDate?: (date: Date | number) => boolean;
+  }
+</script>
+<script setup lang="ts" generic="T extends [string, string] | [Date, Date] | string | Date">
+  import { useAttrs, watch } from 'vue';
+
   import useColumn from '../useColumn';
 
+  const props = defineProps<Props>();
+  const emits = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+    (e: 'change', value: T): void;
+  }>();
+
+  const attrs = useAttrs();
+
   const columnContext = useColumn();
 
+  const modelValue = defineModel<T>();
+
+  watch(modelValue, () => {
+    columnContext?.validate('change');
+  });
+
   const handleBlur = () => {
     columnContext?.blur();
+    columnContext?.validate('blur');
+    emits('blur');
   };
 
   const handleFocus = () => {
     columnContext?.focus();
+    emits('focus');
+  };
+
+  const handleChange = (value: T) => {
+    emits('change', value);
   };
 </script>
 <style lang="less">
@@ -31,6 +68,10 @@
         height: 40px;
         background: transparent;
         border: none;
+
+        &:focus {
+          border: none;
+        }
       }
     }
   }
diff --git a/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts b/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts
index f0967d53df..a32e0f2ee2 100644
--- a/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts
+++ b/dbm-ui/frontend/src/components/editable-table/hooks/use-resize.ts
@@ -14,9 +14,9 @@ export default function (
     Record<
       string,
       {
-        width: number;
-        minWidth: number;
-        maxWidth: number;
+        width?: number;
+        minWidth?: number;
+        maxWidth?: number;
         renderWidth: number;
       }
     >
@@ -33,30 +33,105 @@ export default function (
   watch(
     columnList,
     () => {
+      if (!tableRef.value) {
+        return;
+      }
+      const tableWidth = tableRef.value.getBoundingClientRect().width;
+
       const columnSizeConfigCache = { ...columnSizeConfig.value };
-      columnSizeConfig.value = columnList.value.reduce((result, columnConfig) => {
-        const width = columnConfig.props.width || 0;
-        const minWidth =
-          Number(columnConfig.props.minWidth) > 60 ? Number(columnConfig.props.minWidth) : Number.MIN_VALUE;
-        const maxWidth =
-          Number(columnConfig.props.maxWidth) > 60 ? Number(columnConfig.props.maxWidth) : Number.MAX_VALUE;
-
-        const renderWidth = Math.min(Math.max(width, minWidth), maxWidth);
-
-        Object.assign(result, {
-          [columnConfig.key]: columnSizeConfigCache[columnConfig.key]
-            ? columnSizeConfigCache[columnConfig.key]
-            : {
-                width,
-                minWidth,
-                maxWidth,
-                renderWidth,
-              },
+
+      const maxColumn: IColumnContext[] = [];
+      const minColumn: IColumnContext[] = [];
+      const pxColumn: IColumnContext[] = [];
+      const autoColumn: IColumnContext[] = [];
+
+      columnList.value.forEach((column) => {
+        if (column.props.width) {
+          pxColumn.push(column);
+        } else if (column.props.minWidth) {
+          minColumn.push(column);
+        } else if (column.props.maxWidth) {
+          maxColumn.push(column);
+        } else {
+          autoColumn.push(column);
+        }
+      });
+
+      let totalWidth = 0;
+      pxColumn.forEach((column) => {
+        if (columnSizeConfigCache[column.key]) {
+          totalWidth += columnSizeConfigCache[column.key].renderWidth;
+          return;
+        }
+        columnSizeConfigCache[column.key] = {
+          width: column.props.width,
+          renderWidth: Number(column.props.width),
+        };
+        totalWidth += Number(column.props.width);
+      });
+      minColumn.forEach((column) => {
+        if (columnSizeConfigCache[column.key]) {
+          totalWidth += columnSizeConfigCache[column.key].renderWidth;
+          return;
+        }
+        columnSizeConfigCache[column.key] = {
+          minWidth: column.props.minWidth,
+          renderWidth: Number(column.props.minWidth),
+        };
+        totalWidth += Number(column.props.minWidth);
+      });
+
+      const remainWidth = tableWidth - totalWidth;
+
+      let meanWidth =
+        remainWidth > 0 ? Math.floor(remainWidth / (minColumn.length + maxColumn.length + autoColumn.length)) : 0;
+
+      let extraWidth = 0;
+      maxColumn.forEach((column) => {
+        if (columnSizeConfigCache[column.key]) {
+          return;
+        }
+        let renderWidth = meanWidth;
+        if (Number(column.props.maxWidth) <= meanWidth) {
+          renderWidth = Number(column.props.maxWidth);
+          extraWidth += meanWidth - Number(column.props.maxWidth);
+        }
+        columnSizeConfigCache[column.key] = {
+          maxWidth: column.props.maxWidth,
+          renderWidth,
+        };
+      });
+      meanWidth += Math.floor(extraWidth / (autoColumn.length + minColumn.length));
+      minColumn.forEach((column) => {
+        Object.assign(columnSizeConfigCache[column.key], {
+          renderWidth: columnSizeConfigCache[column.key].renderWidth + meanWidth,
         });
+      });
+      autoColumn.forEach((column) => {
+        columnSizeConfigCache[column.key] = {
+          renderWidth: meanWidth,
+        };
+      });
 
-        return result;
-      }, {});
-      console.log('columnSizeConfig.value = ', columnSizeConfig.value);
+      const renderColumnWidthTotal = Object.values(columnSizeConfigCache).reduce(
+        (result, item) => result + item.renderWidth,
+        0,
+      );
+      if (renderColumnWidthTotal < tableWidth) {
+        const fixWidth = tableWidth - renderColumnWidthTotal;
+        if (minColumn.length > 0) {
+          columnSizeConfigCache[minColumn[0].key].renderWidth =
+            columnSizeConfigCache[minColumn[0].key].renderWidth + fixWidth;
+        } else if (autoColumn.length > 0) {
+          columnSizeConfigCache[autoColumn[0].key].renderWidth =
+            columnSizeConfigCache[autoColumn[0].key].renderWidth + fixWidth;
+        } else if (maxColumn.length > 0) {
+          columnSizeConfigCache[maxColumn[0].key].renderWidth =
+            columnSizeConfigCache[maxColumn[0].key].renderWidth + fixWidth;
+        }
+      }
+
+      columnSizeConfig.value = columnSizeConfigCache;
     },
     {
       immediate: true,
@@ -104,33 +179,38 @@ export default function (
 
     const handleMouseUp = () => {
       if (dragging.value) {
-        const containerWidth = tableEl!.getBoundingClientRect().width;
-        const containerScrollWidth = tableEl!.scrollWidth;
-        const isScrolling = containerScrollWidth > containerWidth;
         const { startColumnLeft } = dragState.value;
         const finalLeft = Number.parseInt(resizeProxy.style.left, 10);
-        const latestColumnWidth = Math.ceil(Math.max(finalLeft - startColumnLeft, 60));
+        const latestColumnWidth = Math.ceil(Math.max(finalLeft - startColumnLeft, 80));
 
         const nextSiblingEl = columnEl!.nextElementSibling as HTMLElement;
 
         if (nextSiblingEl!.classList.contains('table-column-resize')) {
           return;
         }
-        // 没有出现滚动条时缩小当前列的宽度同时会放大后面一列的宽度
-        if (!isScrolling && columnRect.width > latestColumnWidth) {
-          const latestWidth = columnRect.width - latestColumnWidth + nextSiblingEl!.getBoundingClientRect().width;
-          console.log('latestWidth = ', latestWidth);
-        }
 
         resizeProxy.style.display = 'none';
         document.body.style.cursor = '';
         dragging.value = false;
 
         const realWidth = Math.max(
-          columnSizeConfig.value[columnKey].minWidth as number,
-          Math.min(latestColumnWidth, columnSizeConfig.value[columnKey].maxWidth as number),
+          columnSizeConfig.value[columnKey].minWidth || 60,
+          Math.min(latestColumnWidth, columnSizeConfig.value[columnKey].maxWidth || 1000000),
         );
-        columnSizeConfig.value[columnKey].renderWidth = realWidth;
+        const renderColumWidthTotal = Array.from(columnEl.parentElement!.children).reduce((result, element) => {
+          if (element === columnEl) {
+            return result;
+          }
+          return result + element.getBoundingClientRect().width;
+        }, 0);
+
+        const tableWidth = tableRef.value!.getBoundingClientRect().width;
+
+        if (renderColumWidthTotal + realWidth < tableWidth) {
+          columnSizeConfig.value[columnKey].renderWidth = tableWidth - renderColumWidthTotal;
+        } else {
+          columnSizeConfig.value[columnKey].renderWidth = realWidth;
+        }
       }
 
       dragable = false;
@@ -152,6 +232,13 @@ export default function (
       return;
     }
 
+    const columnKey = target.dataset.name as string;
+
+    const targetColumn = _.find(columnList.value, (column) => column.key === columnKey);
+    if (!targetColumn || !targetColumn.props.resizeable) {
+      return;
+    }
+
     const rect = target!.getBoundingClientRect();
 
     const bodyStyle = document.body.style;
diff --git a/dbm-ui/frontend/src/components/editable-table/hooks/use-scroll.ts b/dbm-ui/frontend/src/components/editable-table/hooks/use-scroll.ts
index c9030713a2..c6457cd885 100644
--- a/dbm-ui/frontend/src/components/editable-table/hooks/use-scroll.ts
+++ b/dbm-ui/frontend/src/components/editable-table/hooks/use-scroll.ts
@@ -4,40 +4,44 @@ import { onBeforeUnmount, onMounted, type Ref, shallowRef } from 'vue';
 export default function (tableContentRef: Ref<HTMLElement | undefined>) {
   const leftFixedStyles = shallowRef({});
   const rightFixedStyles = shallowRef({});
+  const isFixedLeft = ref(false);
+  const isFixedRight = ref(false);
 
   const handleHorizontalScroll = _.throttle(() => {
     const tableEl = tableContentRef.value as HTMLElement;
     const { scrollLeft } = tableEl;
-    const tableContentWidth = tableEl.getBoundingClientRect().width;
+    const tableWrapperWidth = tableEl.getBoundingClientRect().width;
     const tableWidth = tableEl.querySelector('table')!.getBoundingClientRect().width;
     if (scrollLeft === 0) {
       leftFixedStyles.value = {
         display: 'none',
       };
+      isFixedLeft.value = false;
     } else {
-      const fixedColumns = tableEl.querySelectorAll('th.is-column-fixed-left');
-      const fixedWidth = Array.from(fixedColumns).reduce(
+      const fixedWidth = Array.from(tableEl.querySelectorAll('th.fixed-left-column')).reduce(
         (result, itemEl) => result + itemEl.getBoundingClientRect().width,
         0,
       );
+
       leftFixedStyles.value = {
         width: `${fixedWidth}px`,
       };
+      isFixedLeft.value = true;
     }
-
-    if (tableContentWidth + scrollLeft >= tableWidth) {
+    if (tableWrapperWidth + scrollLeft >= tableWidth) {
       rightFixedStyles.value = {
         display: 'none',
       };
+      isFixedRight.value = false;
     } else {
-      const fixedRightColumns = tableEl.querySelectorAll('th.is-column-fixed-right');
-      const fixeRightdWidth = Array.from(fixedRightColumns).reduce(
+      const fixedWidth = Array.from(tableEl.querySelectorAll('th.fixed-right-column')).reduce(
         (result, itemEl) => result + itemEl.getBoundingClientRect().width,
         0,
       );
       rightFixedStyles.value = {
-        width: `${fixeRightdWidth}px`,
+        width: `${fixedWidth}px`,
       };
+      isFixedRight.value = true;
     }
   }, 30);
 
@@ -52,6 +56,8 @@ export default function (tableContentRef: Ref<HTMLElement | undefined>) {
   return {
     leftFixedStyles,
     rightFixedStyles,
+    fixedLeft: isFixedLeft,
+    fixedRight: isFixedRight,
     initalScroll: handleHorizontalScroll,
   };
 }
diff --git a/dbm-ui/frontend/src/components/editable-table/types.ts b/dbm-ui/frontend/src/components/editable-table/types.ts
index 627b8f6f9d..12a8f49866 100644
--- a/dbm-ui/frontend/src/components/editable-table/types.ts
+++ b/dbm-ui/frontend/src/components/editable-table/types.ts
@@ -5,7 +5,7 @@ export interface IRule {
   max?: number;
   maxlength?: number;
   pattern?: RegExp;
-  validator?: (value: any) => Promise<boolean | string> | boolean | string;
+  validator?: (value: any, rowData?: Record<string, any>) => Promise<boolean | string> | boolean | string;
   message: (() => string) | string;
   trigger: string;
 }
diff --git a/dbm-ui/frontend/src/components/editable-table/useTable.ts b/dbm-ui/frontend/src/components/editable-table/useTable.ts
new file mode 100644
index 0000000000..2150250a49
--- /dev/null
+++ b/dbm-ui/frontend/src/components/editable-table/useTable.ts
@@ -0,0 +1,9 @@
+import { inject } from 'vue';
+
+import { tableInjectKey } from './Index.vue';
+
+export default () => {
+  const tableContext = inject(tableInjectKey);
+
+  return tableContext;
+};
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/flashback.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/flashback.ts
index 29d08a2992..c05d381e19 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/flashback.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/mysql/flashback.ts
@@ -23,15 +23,24 @@ export function generateMysqlFlashbackCloneData(ticketData: TicketModel<Mysql.Fl
       id: item.cluster_id,
       domain: clusters[item.cluster_id].immute_domain,
     },
-    startTime: item.start_time,
-    endTime: item.end_time,
     databases: item.databases,
-    tables: item.tables,
     databasesIgnore: item.databases_ignore,
+    directWriteBack: item.direct_write_back,
+    endTime: item.end_time,
+    message: item.message,
+    mysqlbinlogRollback: item.mysqlbinlog_rollback,
+    recoredFile: item.recored_file,
+    rowsFilter: item.rows_filter,
+    startTime: item.start_time,
+    tables: item.tables,
     tablesIgnore: item.tables_ignore,
   }));
   return Promise.resolve({
     tableDataList,
     remark: ticketData.remark,
+    flashbackType: ticketData.details.flashback_type,
+    force: ticketData.details.force,
+    id: ticketData.id,
+    ticketType: ticketData.ticket_type,
   });
 }
diff --git a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/spider/flashback.ts b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/spider/flashback.ts
index 15fc8b2a2e..2c7ad7adb6 100644
--- a/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/spider/flashback.ts
+++ b/dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/spider/flashback.ts
@@ -27,10 +27,15 @@ export function generateSpiderFlashbackCloneData(ticketData: TicketModel<TendbCl
         id: clusterItem.id,
         domain: clusterItem.immute_domain,
       },
-      startTime: item.start_time,
-      endTime: item.end_time,
       databases: item.databases,
       databasesIgnore: item.databases_ignore,
+      directWriteBack: item.direct_write_back,
+      endTime: item.end_time,
+      message: item.message,
+      mysqlbinlogRollback: item.mysqlbinlog_rollback,
+      recoredFile: item.recored_file,
+      rowsFilter: item.rows_filter,
+      startTime: item.start_time,
       tables: item.tables,
       tablesIgnore: item.tables_ignore,
     };
@@ -39,5 +44,9 @@ export function generateSpiderFlashbackCloneData(ticketData: TicketModel<TendbCl
   return Promise.resolve({
     tableDataList,
     remark: ticketData.remark,
+    flashbackType: ticketData.details.flashback_type,
+    force: ticketData.details.force,
+    id: ticketData.id,
+    ticketType: ticketData.ticket_type,
   });
 }
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index e86811636e..1b2ae15973 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3940,5 +3940,16 @@
   "展示我作为主 DBA 的业务，当日所产生的巡检异常，一般每日更新一次": "展示我作为主 DBA 的业务，当日所产生的巡检异常，一般每日更新一次",
   "展示我作为备 DBA、二线 DBA 的业务，当日所产生的巡检异常，一般每日更新一次": "展示我作为备 DBA、二线 DBA 的业务，当日所产生的巡检异常，一般每日更新一次",
   "主DBA": "主 DBA",
+  "闪回方式": "闪回方式",
+  "库表闪回": "库表闪回",
+  "记录及闪回": "记录及闪回",
+  "集群域名格式不正确": "集群域名格式不正确",
+  "通过列与列值确定记录": "通过列与列值确定记录",
+  "待闪回的记录": "待闪回的记录",
+  "覆盖原始数据": "覆盖原始数据",
+  "请先选择回档时间": "请先选择回档时间",
+  "闪回方式:": "闪回方式:",
+  "待闪回记录": "待闪回记录",
+  "覆盖原始数据:": "覆盖原始数据:",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/main.ts b/dbm-ui/frontend/src/main.ts
index d621e8f7dc..83a5483bd5 100644
--- a/dbm-ui/frontend/src/main.ts
+++ b/dbm-ui/frontend/src/main.ts
@@ -25,8 +25,6 @@ import { setGlobalComps } from '@common/importComps';
 
 import i18n from '@locales/index';
 
-import { subEnv } from '@blueking/sub-saas';
-
 import App from './App.vue';
 import getRouter from './router';
 import SubApp from './SubApp.vue';
@@ -36,6 +34,7 @@ import '@lib/bk-icon/iconcool';
 import '@styles/common.less';
 import 'bkui-vue/dist/style.css';
 import { setGlobalDirectives } from '@/directives/index';
+import { subEnv } from '@blueking/sub-saas';
 
 import('tippy.js/dist/tippy.css');
 import('tippy.js/themes/light.css');
diff --git a/dbm-ui/frontend/src/services/model/config/biz-conf-topo-tree.ts b/dbm-ui/frontend/src/services/model/config/biz-conf-topo-tree.ts
index 68acbfc0a7..81f21b8679 100644
--- a/dbm-ui/frontend/src/services/model/config/biz-conf-topo-tree.ts
+++ b/dbm-ui/frontend/src/services/model/config/biz-conf-topo-tree.ts
@@ -16,16 +16,16 @@ import type { ConfLevels } from '@common/const';
  * 业务拓扑树
  */
 export default class BizConfTopoTree {
-  instance_id: number;
-  instance_name: string;
-  obj_id: ConfLevels;
-  obj_name: string;
   children: BizConfTopoTree[];
   extra: {
     domain: string;
     proxy_version: string;
     version: string;
   };
+  instance_id: number;
+  instance_name: string;
+  obj_id: ConfLevels;
+  obj_name: string;
 
   constructor(payload = {} as BizConfTopoTree) {
     this.instance_id = payload.instance_id;
diff --git a/dbm-ui/frontend/src/services/model/function-controller/functionController.ts b/dbm-ui/frontend/src/services/model/function-controller/functionController.ts
index bf9fd577ab..f55fabe2fe 100644
--- a/dbm-ui/frontend/src/services/model/function-controller/functionController.ts
+++ b/dbm-ui/frontend/src/services/model/function-controller/functionController.ts
@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 /*
  * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
  *
@@ -38,7 +37,8 @@ export interface ControllerBaseInfo {
   is_enabled: boolean;
 }
 
-interface ControllerItem<T extends string> extends ControllerBaseInfo {
+interface ControllerItem<T extends string> {
+  is_enabled: boolean;
   children: Record<T, ControllerBaseInfo>;
 }
 
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/mysql/flashBack.ts b/dbm-ui/frontend/src/services/model/ticket/details/mysql/flashBack.ts
index a673c5afc6..bbf5c2eb46 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/mysql/flashBack.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/mysql/flashBack.ts
@@ -6,14 +6,18 @@ import type { DetailBase, DetailClusters } from '../common';
 
 export interface FlashBack extends DetailBase {
   clusters: DetailClusters;
+  flashback_type: 'TABLE_FLASHBACK' | 'RECORD_FLASHBACK';
+  force: boolean;
   infos: {
     cluster_id: number;
     databases: string[];
     databases_ignore: string[];
+    direct_write_back: boolean;
     end_time: string;
     message: string;
     mysqlbinlog_rollback: string;
     recored_file: string;
+    rows_filter: string;
     start_time: string;
     tables: string[];
     tables_ignore: string[];
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/flashBack.ts b/dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/flashBack.ts
index 4d6c8c3a34..2be63ad61a 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/flashBack.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/tendbCluster/flashBack.ts
@@ -6,15 +6,18 @@ import type { DetailBase, DetailClusters } from '../common';
 
 export interface FlashBack extends DetailBase {
   clusters: DetailClusters;
+  flashback_type: 'TABLE_FLASHBACK' | 'RECORD_FLASHBACK';
   force: boolean;
   infos: {
     cluster_id: number;
     databases: string[];
     databases_ignore: string[];
+    direct_write_back: boolean;
     end_time: string;
     message: string;
     mysqlbinlog_rollback: string;
     recored_file: string;
+    rows_filter: string;
     start_time: string;
     tables: string[];
     tables_ignore: string[];
diff --git a/dbm-ui/frontend/src/services/source/dbbase.ts b/dbm-ui/frontend/src/services/source/dbbase.ts
index a99011b1ac..9dd2ede6d8 100644
--- a/dbm-ui/frontend/src/services/source/dbbase.ts
+++ b/dbm-ui/frontend/src/services/source/dbbase.ts
@@ -37,6 +37,8 @@ export function filterClusters<
     cluster_name: string;
     cluster_type: string;
     major_version: string;
+    master_domain: string;
+    id: number;
   },
 >(params: { bk_biz_id: number; exact_domain?: string; cluster_ids?: string; domain?: string }) {
   return http.get<T[]>(`${path}/filter_clusters/`, params);
diff --git a/dbm-ui/frontend/src/services/source/ticket.tsx b/dbm-ui/frontend/src/services/source/ticket.tsx
index e7599bab47..26d2b52450 100644
--- a/dbm-ui/frontend/src/services/source/ticket.tsx
+++ b/dbm-ui/frontend/src/services/source/ticket.tsx
@@ -214,14 +214,14 @@ export function getTodoTickets(
 /**
  * 单据详情
  */
-export function getTicketDetails(
+export function getTicketDetails<T extends TicketModel = TicketModel<unknown>>(
   params: {
     id: number;
     is_reviewed?: number;
   },
   payload = {} as IRequestPayload,
 ) {
-  return http.get<TicketModel<unknown>>(`${path}/${params.id}/`, params, payload).then((data) => new TicketModel(data));
+  return http.get<T>(`${path}/${params.id}/`, params, payload).then((data) => new TicketModel(data) as T);
 }
 
 /**
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/Create.vue
new file mode 100644
index 0000000000..6216ab45e4
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/Create.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="mysql-toolbox-record-flashback-page">
+    <SmartAction>
+      <BkForm
+        ref="formRef"
+        class="mb-24"
+        form-type="vertical">
+        <BkFormItem
+          :label="t('时区')"
+          required>
+          <TimeZonePicker style="width: 450px" />
+        </BkFormItem>
+        <BkFormItem
+          :label="t('闪回方式')"
+          required>
+          <BkRadioGroup
+            v-model="formData.flashback_type"
+            @change="handleFlashbackTypeChange">
+            <BkRadioButton
+              label="TABLE_FLASHBACK"
+              style="width: 225px">
+              {{ t('库表闪回') }}
+            </BkRadioButton>
+            <BkRadioButton
+              label="RECORD_FLASHBACK"
+              style="width: 225px">
+              {{ t('记录及闪回') }}
+            </BkRadioButton>
+          </BkRadioGroup>
+        </BkFormItem>
+        <EditableTable
+          ref="editableTableRef"
+          :model="tableData">
+          <EditableTableRow
+            v-for="(rowData, index) in tableData"
+            :key="index">
+            <ClusterColumn
+              v-model="rowData.cluster"
+              :selected-ids="selectedClusterIds"
+              @batch-edit="handleBatchEdit" />
+            <EditableTableColumn
+              :label="t('回档时间')"
+              :min-width="180"
+              required>
+              <EditableDatePicker
+                v-model="rowData.start_time"
+                format="yyyy-MM-dd HH:mm:ss"
+                type="datetime" />
+            </EditableTableColumn>
+            <EditableTableColumn
+              :disabled-method="() => (!rowData.start_time ? t('请先选择回档时间') : false)"
+              :label="t('截止时间')"
+              :min-width="180"
+              required>
+              <EditableDatePicker
+                v-model="rowData.end_time"
+                :disabled-date="(date) => handleEditTimeDisableCallback(date, rowData.start_time)"
+                format="yyyy-MM-dd HH:mm:ss"
+                type="datetime" />
+            </EditableTableColumn>
+            <DbNameColumn
+              v-model="rowData.databases"
+              :cluster-id="rowData.cluster?.id" />
+            <TableNameColumn
+              v-model="rowData.tables"
+              :cluster-id="rowData.cluster?.id"
+              :label="t('目标表')" />
+            <RecordColumn
+              v-model="rowData.rows_filter"
+              :cluster-id="rowData.cluster?.id" />
+            <OperationColumn
+              v-model:table-data="tableData"
+              :create-row-method="createTableData" />
+          </EditableTableRow>
+        </EditableTable>
+        <BkFormItem class="mt-20">
+          <BkCheckbox
+            v-model="formData.direct_write_back"
+            :false-label="false"
+            true-label>
+            {{ t('覆盖原始数据') }}
+          </BkCheckbox>
+        </BkFormItem>
+        <BkFormItem :label="t('备注')">
+          <BkInput
+            :rows="3"
+            style="max-width: 1000px"
+            type="textarea" />
+        </BkFormItem>
+      </BkForm>
+      <template #action>
+        <BkButton
+          theme="primary"
+          @click="handleSubmit">
+          {{ t('提交') }}
+        </BkButton>
+        <BkButton class="ml-8">{{ t('重置') }}</BkButton>
+      </template>
+    </SmartAction>
+  </div>
+</template>
+<script setup lang="ts">
+  import dayjs from 'dayjs';
+  import _ from 'lodash';
+  import { ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+  import TicketModel, { type Mysql } from '@services/model/ticket/ticket';
+  import { createTicket, getTicketDetails } from '@services/source/ticket';
+
+  import { useTimeZoneFormat } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, {
+    Column as EditableTableColumn,
+    DatePicker as EditableDatePicker,
+    Row as EditableTableRow,
+  } from '@components/editable-table/Index.vue';
+  import TimeZonePicker from '@components/time-zone-picker/index.vue';
+
+  import ClusterColumn from './components/ClusterColumn.vue';
+  import DbNameColumn from './components/DbNameColumn.vue';
+  import OperationColumn from './components/OperationColumn.vue';
+  import RecordColumn from './components/RecordColumn.vue';
+  import TableNameColumn from './components/TableNameColumn.vue';
+
+  interface IRowData {
+    cluster?: {
+      id?: number;
+      master_domain?: string;
+    };
+    start_time?: string;
+    end_time?: string;
+    databases?: string[];
+    tables?: string[];
+    rows_filter?: string;
+    direct_write_back?: boolean;
+  }
+
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+  const { format: formatDateToUTC } = useTimeZoneFormat();
+
+  const createTableData = (data = {} as IRowData) => ({
+    cluster: data.cluster,
+    start_time: data.start_time || '',
+    end_time: data.end_time || '',
+    databases: data.databases || [],
+    tables: data.tables || [],
+    rows_filter: data.rows_filter || '',
+    direct_write_back: data.direct_write_back || false,
+  });
+
+  const formRef = useTemplateRef('formRef');
+  const editableTableRef = useTemplateRef('editableTableRef');
+  const tableData = ref([createTableData()]);
+
+  const isSubmiting = ref(false);
+  const formData = reactive({
+    flashback_type: 'RECORD_FLASHBACK',
+    direct_write_back: false,
+    remark: '',
+  });
+
+  if (Number(route.query.ticketId)) {
+    getTicketDetails<TicketModel<Mysql.FlashBack>>({
+      id: Number(route.query.ticketId),
+    }).then((data) => {
+      formData.flashback_type = data.details.flashback_type;
+      formData.remark = data.remark;
+      formData.direct_write_back = data.details.infos[0].direct_write_back;
+      tableData.value = data.details.infos.map((item) =>
+        createTableData({
+          ...item,
+          cluster: {
+            id: item.cluster_id,
+            master_domain: data.details.clusters[item.cluster_id].immute_domain,
+          },
+        }),
+      );
+    });
+  }
+
+  const selectedClusterIds = computed(() =>
+    _.filter(
+      tableData.value.map((item) => item.cluster?.id || 0),
+      (item) => Number(item) > 0,
+    ),
+  );
+
+  const handleFlashbackTypeChange = (type: string) => {
+    if (type === 'TABLE_FLASHBACK') {
+      router.push({
+        name: 'MySQLDBFlashback',
+      });
+    }
+  };
+
+  const handleEditTimeDisableCallback = (date: Date | number, startDate: string) =>
+    dayjs(date).isBefore(dayjs(startDate));
+
+  const handleBatchEdit = (list: TendbhaModel[]) => {
+    const dataList = list.reduce<ReturnType<typeof createTableData>[]>((acc, item) => {
+      if (!selectedClusterIds.value.includes(item.id)) {
+        acc.push(
+          createTableData({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    tableData.value = [...(selectedClusterIds.value.length ? tableData.value : []), ...dataList];
+  };
+
+  const handleSubmit = () => {
+    isSubmiting.value = true;
+    Promise.all([formRef.value!.validate(), editableTableRef.value!.validate()])
+      .then(() =>
+        createTicket({
+          ticket_type: TicketTypes.MYSQL_FLASHBACK,
+          remark: formData.remark,
+          details: {
+            infos: tableData.value.map((item) => ({
+              cluster_id: item.cluster?.id,
+              start_time: formatDateToUTC(item.start_time),
+              end_time: formatDateToUTC(item.end_time),
+              databases: item.databases,
+              databases_ignore: [],
+              tables: item.tables,
+              tables_ignore: [],
+              rows_filter: item.rows_filter,
+              direct_write_back: formData.direct_write_back,
+            })),
+            force: true,
+            flashback_type: 'RECORD_FLASHBACK',
+          },
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        }).then((data) => {
+          window.changeConfirm = false;
+          router.push({
+            name: 'MySQLDBFlashback',
+            params: {
+              page: 'success',
+            },
+            query: {
+              ticketId: data.id,
+            },
+          });
+        }),
+      )
+      .finally(() => {
+        isSubmiting.value = false;
+      });
+  };
+</script>
+<style lang="less">
+  .mysql-toolbox-record-flashback-page {
+    .bk-form-label {
+      font-weight: bold;
+      color: #313238;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/Index.vue
new file mode 100644
index 0000000000..aca48f386b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/Index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <Component :is="com" />
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  import Create from './Create.vue';
+  import Successed from './Successed.vue';
+
+  const route = useRoute();
+
+  const comMap = {
+    ticket: Create,
+    success: Successed,
+  };
+
+  const page = ref('');
+
+  const com = computed(() => {
+    if (comMap[page.value as keyof typeof comMap]) {
+      return comMap[page.value as keyof typeof comMap];
+    }
+    return Create;
+  });
+
+  watch(
+    route,
+    () => {
+      page.value = route.params.page as string;
+    },
+    {
+      immediate: true,
+    },
+  );
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/Successed.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/Successed.vue
new file mode 100644
index 0000000000..20b0515ec2
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/Successed.vue
@@ -0,0 +1,86 @@
+<!--
+ * 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>
+  <RenderSuccess :steps="steps">
+    <template #title>
+      {{ $t('闪回任务提交成功') }}
+    </template>
+    <I18nT
+      keypath="接下来您可以通过xx查看任务最新动态"
+      tag="span">
+      <RouterLink
+        target="_blank"
+        :to="{
+          name: 'bizTicketManage',
+          params: {
+            ticketId: ticketId as string,
+          },
+        }">
+        {{ $t('单据') }}
+      </RouterLink>
+    </I18nT>
+    <template #action>
+      <BkButton
+        theme="primary"
+        @click="handleGoTicket">
+        {{ $t('去看看') }}
+      </BkButton>
+      <BkButton
+        class="ml8"
+        @click="handleStepChange">
+        {{ $t('继续提单') }}
+      </BkButton>
+    </template>
+  </RenderSuccess>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+
+  import RenderSuccess from '@components/ticket-success/Index.vue';
+
+  const route = useRoute();
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const { ticketId } = route.query;
+
+  const steps = [
+    {
+      name: t('单据审批'),
+    },
+    {
+      name: t('闪回执行'),
+    },
+    {
+      name: t('任务完成'),
+    },
+  ];
+
+  const handleGoTicket = () => {
+    const route = router.resolve({
+      name: 'bizTicketManage',
+      params: {
+        ticketId: Number(ticketId),
+      },
+    });
+    window.open(route.href);
+  };
+
+  const handleStepChange = () => {
+    router.push({
+      name: 'MYSQL_FLASHBACK',
+    });
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/ClusterColumn.vue
new file mode 100644
index 0000000000..0c36e7af43
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/ClusterColumn.vue
@@ -0,0 +1,147 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="cluster.master_domain"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.master_domain"
+      :placeholder="t('请输入集群域名')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBHA]"
+    :selected="selected"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import TendbhaModel from '@services/model/mysql/tendbha';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { batchSplitRegex, domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selectedIds: number[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: TendbhaModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    master_domain?: string;
+  }>({
+    default: () => ({
+      id: undefined,
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const domainIdMap: Record<string, number> = {};
+
+  const showSelector = ref(false);
+  const selected = computed<Record<string, TendbhaModel[]>>(() => ({
+    [ClusterTypes.TENDBHA]: props.selectedIds.map(
+      (id) =>
+        ({
+          id,
+          master_domain: domainIdMap[id],
+        }) as unknown as TendbhaModel,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => value.split(batchSplitRegex).every((item) => domainRegex.test(item)),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: () => !!modelValue.value.id,
+      message: '目标集群不存在',
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters, {
+    manual: true,
+    onSuccess: (data) => {
+      if (data.length > 0) {
+        const [currentCluster] = data;
+        Object.assign(domainIdMap, {
+          [currentCluster.master_domain]: currentCluster.id,
+        });
+        modelValue.value = {
+          master_domain: currentCluster.master_domain,
+          id: currentCluster.id,
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    modelValue.value.id = undefined;
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value.split(batchSplitRegex).join(','),
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, TendbhaModel[]>) => {
+    const dataList = selected[ClusterTypes.TENDBHA];
+    Object.assign(domainIdMap, Object.fromEntries(dataList.map((cur) => [cur.master_domain, cur.id])));
+    emits('batch-edit', dataList);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/DbNameColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/DbNameColumn.vue
new file mode 100644
index 0000000000..060f1c1e83
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/DbNameColumn.vue
@@ -0,0 +1,96 @@
+<template>
+  <Column
+    :disabled-method="disabledMethod"
+    field="databases"
+    :label="t('目标 DB')"
+    :min-width="180"
+    required
+    :rules="rules">
+    <EditTagInput
+      v-model="modelValue"
+      :placeholder="t('请输入DB 名称，支持通配符“%”，含通配符的仅支持单个')" />
+  </Column>
+</template>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import { checkClusterDatabase } from '@services/source/dbbase';
+
+  import { Column, TagInput as EditTagInput } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    clusterId?: number;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const disabledMethod = () => (props.clusterId ? false : t('请先选择集群'));
+
+  const modelValue = defineModel<string[]>();
+
+  const systemDbNames = ['mysql', 'db_infobase', 'information_schema', 'performance_schema', 'sys', 'infodba_schema'];
+
+  const rules = [
+    {
+      validator: (value: string[]) => _.every(value, (item) => /^(?!stage_truncate)(?!.*dba_rollback$).*/.test(item)),
+      message: t('不能以stage_truncate开头或dba_rollback结尾'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => /^[-_a-zA-Z0-9*?%]{0,35}$/.test(item)),
+      message: t('库表名支持数字、字母、中划线、下划线，最大35字符'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => !systemDbNames.includes(item)),
+      message: t('不允许输入系统库和特殊库'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => item !== '*'),
+      message: t('不允许为 *'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) =>
+        !_.some(value, (item) => (/\*/.test(item) && item.length > 1) || (value.length > 1 && item === '*')),
+      message: t('* 只能独立使用'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => !/^[%?]$/.test(item)),
+      message: t('% 或 ? 不允许单独使用'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => {
+        const clearDbList = _.filter(value, (item) => !/[*%]/.test(item));
+        if (clearDbList.length < 1) {
+          return true;
+        }
+        return checkClusterDatabase({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          cluster_id: props.clusterId as number,
+          db_list: value,
+        }).then((data) => {
+          const notExistDbList = Object.keys(data).reduce<string[]>((result, dbName) => {
+            if (!data[dbName]) {
+              result.push(dbName);
+            }
+            return result;
+          }, []);
+          if (notExistDbList.length > 0) {
+            return t('n 不存在', { n: notExistDbList.join('、') });
+          }
+
+          return true;
+        });
+      },
+      message: t('DB 不存在'),
+      trigger: 'blur',
+    },
+  ];
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/OperationColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/OperationColumn.vue
new file mode 100644
index 0000000000..447a9deb82
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/OperationColumn.vue
@@ -0,0 +1,126 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    ref="column"
+    fixed="right"
+    :label="t('操作')"
+    readonly
+    :resizeable="false"
+    :width="100">
+    <div class="toolbox-operation-column">
+      <div
+        v-if="Boolean(createRowMethod)"
+        class="action-btn"
+        @click="handleAppend">
+        <DbIcon type="plus-fill" />
+      </div>
+      <div
+        class="action-btn"
+        :class="{
+          disabled: !isRemoveable,
+        }"
+        @click="handleRemove">
+        <DbIcon type="minus-fill" />
+      </div>
+      <div
+        v-bk-tooltips="t('克隆')"
+        class="action-btn"
+        @click="handleClone">
+        <DbIcon type="copy-2" />
+      </div>
+    </div>
+  </Column>
+</template>
+<script setup lang="ts" generic="T extends Record<string, any>">
+  import _ from 'lodash';
+  import { useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { Column, useTable } from '@components/editable-table/Index.vue';
+
+  const props = defineProps<{
+    createRowMethod?: () => T;
+  }>();
+
+  const tableData = defineModel<T[]>('tableData', {
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  const editTableContext = useTable();
+  const columnRef = useTemplateRef('column');
+
+  const isRemoveable = computed(() => tableData.value.length > 1);
+
+  const handleAppend = () => {
+    const rowIndex = columnRef.value!.getRowIndex();
+    const newRowIndex = rowIndex + 1;
+
+    if (newRowIndex > 0) {
+      tableData.value.splice(newRowIndex, 0, props.createRowMethod!());
+    }
+  };
+
+  const handleRemove = () => {
+    if (!isRemoveable.value) {
+      return;
+    }
+    const rowIndex = columnRef.value!.getRowIndex();
+    if (rowIndex > -1) {
+      tableData.value.splice(rowIndex, 1);
+    }
+  };
+
+  const handleClone = () => {
+    const rowIndex = columnRef.value!.getRowIndex();
+
+    const newRowIndex = rowIndex + 1;
+
+    if (newRowIndex > 0) {
+      tableData.value.splice(newRowIndex, 0, _.cloneDeep(tableData.value[rowIndex]));
+      editTableContext!.validateByRowIndex(newRowIndex);
+    }
+  };
+</script>
+<style lang="less">
+  .toolbox-operation-column {
+    display: flex;
+    height: 42px;
+    padding: 0 10px;
+    align-items: center;
+
+    .action-btn {
+      display: flex;
+      font-size: 14px;
+      color: #c4c6cc;
+      cursor: pointer;
+      transition: all 0.15s;
+
+      &:hover {
+        color: #979ba5;
+      }
+
+      &.disabled {
+        color: #dcdee5;
+        cursor: not-allowed;
+      }
+
+      & ~ .action-btn {
+        margin-left: 12px;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/RecordColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/RecordColumn.vue
new file mode 100644
index 0000000000..37b18fd2d6
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/RecordColumn.vue
@@ -0,0 +1,27 @@
+<template>
+  <Column
+    :description="t('通过列与列值确定记录')"
+    :disabled-method="disabledMethod"
+    field="rows_filter"
+    :label="t('待闪回的记录')"
+    :min-width="200">
+    <EditTextarea v-model="modelValue" />
+  </Column>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { Column, Textarea as EditTextarea } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    clusterId?: number;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const disabledMethod = () => (props.clusterId ? false : t('请先选择集群'));
+
+  const modelValue = defineModel<string>();
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/TableNameColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/TableNameColumn.vue
new file mode 100644
index 0000000000..f3ac54540e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_FLASHBACK/components/TableNameColumn.vue
@@ -0,0 +1,56 @@
+<template>
+  <Column
+    :disabled-method="disabledMethod"
+    field="tables"
+    :label="label"
+    :min-width="180"
+    required
+    :rules="rules">
+    <EditTagInput
+      v-model="modelValue"
+      :placeholder="t('请输入表名称，支持通配符“%”，含通配符的仅支持单个')" />
+  </Column>
+</template>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import { Column, TagInput as EditTagInput } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    label: string;
+    clusterId?: number;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const disabledMethod = () => (props.clusterId ? false : t('请先选择集群'));
+
+  const modelValue = defineModel<string[]>();
+
+  const rules = [
+    {
+      validator: (value: string[]) => _.every(value, (item) => /^[-_a-zA-Z0-9*?%]{0,64}$/.test(item)),
+      message: t('库表名支持数字、字母、中划线、下划线，最大64字符'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => item !== '*'),
+      message: t('不允许为 *'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) =>
+        !_.some(value, (item) => (/\*/.test(item) && item.length > 1) || (value.length > 1 && item === '*')),
+      message: t('* 只能独立使用'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => !/^[%?]$/.test(item)),
+      message: t('% 或 ? 不允许单独使用'),
+      trigger: 'blur',
+    },
+  ];
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/Index.vue
index 10db1f1bc5..47e2ee2ade 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/flashback/pages/page1/Index.vue
@@ -28,6 +28,21 @@
       </div>
       <div class="title-spot mt-12 mb-10">{{ t('时区') }}<span class="required" /></div>
       <TimeZonePicker style="width: 450px" />
+      <div class="title-spot mt-12 mb-10">{{ t('闪回方式') }}<span class="required" /></div>
+      <BkRadioGroup
+        model-value="TABLE_FLASHBACK"
+        @change="handleFlashbackTypeChange">
+        <BkRadioButton
+          label="TABLE_FLASHBACK"
+          style="width: 225px">
+          {{ t('库表闪回') }}
+        </BkRadioButton>
+        <BkRadioButton
+          label="RECORD_FLASHBACK"
+          style="width: 225px">
+          {{ t('记录及闪回') }}
+        </BkRadioButton>
+      </BkRadioGroup>
       <RenderData
         class="mt16"
         @batch-edit="handleBatchEditColumn"
@@ -117,6 +132,15 @@
       tableData.value = cloneData.tableDataList;
       remark.value = cloneData.remark;
       window.changeConfirm = true;
+      if (cloneData.flashbackType === 'RECORD_FLASHBACK') {
+        router.push({
+          name: 'MYSQL_FLASHBACK',
+          query: {
+            ticketId: cloneData.id,
+            ticketType: cloneData.ticketType,
+          },
+        });
+      }
     },
   });
 
@@ -132,6 +156,14 @@
   // 集群域名是否已存在表格的映射表
   let domainMemo: Record<string, boolean> = {};
 
+  const handleFlashbackTypeChange = (type: string) => {
+    if (type === 'RECORD_FLASHBACK') {
+      router.push({
+        name: 'MYSQL_FLASHBACK',
+      });
+    }
+  };
+
   // 批量录入
   const handleShowBatchEntry = () => {
     isShowBatchEntry.value = true;
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts b/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts
index b485753e7a..a1ff79a44c 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/routes.ts
@@ -191,6 +191,14 @@ export const mysqlToolboxChildrenRouters: RouteRecordRaw[] = [
     },
     component: () => import('@views/db-manage/mysql/version-upgrade/Index.vue'),
   },
+  {
+    name: 'MYSQL_FLASHBACK',
+    path: 'MYSQL_FLASHBACK/:page?',
+    meta: {
+      navName: t('闪回'),
+    },
+    component: () => import('@views/db-manage/mysql/MYSQL_FLASHBACK/Index.vue'),
+  },
 ];
 
 const singleRoutes: RouteRecordRaw[] = [
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/Create.vue
new file mode 100644
index 0000000000..eef772b937
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/Create.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="tendbcluster-toolbox-record-flashback-page">
+    <SmartAction>
+      <BkAlert
+        class="mb-10"
+        closable
+        theme="info"
+        :title="t('闪回：通过 flashback 工具，对 row 格式的 binlog 做逆向操作')" />
+      <BkForm
+        ref="formRef"
+        class="mb-24"
+        form-type="vertical">
+        <BkFormItem
+          :label="t('时区')"
+          required>
+          <TimeZonePicker style="width: 450px" />
+        </BkFormItem>
+        <BkFormItem
+          :label="t('闪回方式')"
+          required>
+          <BkRadioGroup
+            v-model="formData.flashback_type"
+            @change="handleFlashbackTypeChange">
+            <BkRadioButton
+              label="TABLE_FLASHBACK"
+              style="width: 225px">
+              {{ t('库表闪回') }}
+            </BkRadioButton>
+            <BkRadioButton
+              label="RECORD_FLASHBACK"
+              style="width: 225px">
+              {{ t('记录及闪回') }}
+            </BkRadioButton>
+          </BkRadioGroup>
+        </BkFormItem>
+        <EditableTable
+          ref="editableTableRef"
+          :model="tableData">
+          <EditableTableRow
+            v-for="(rowData, index) in tableData"
+            :key="index">
+            <ClusterColumn
+              v-model="rowData.cluster"
+              :selected-ids="selectedClusterIds"
+              @batch-edit="handleBatchEdit" />
+            <EditableTableColumn
+              :label="t('回档时间')"
+              :min-width="180"
+              required>
+              <EditableDatePicker
+                v-model="rowData.start_time"
+                format="yyyy-MM-dd HH:mm:ss"
+                type="datetime" />
+            </EditableTableColumn>
+            <EditableTableColumn
+              :disabled-method="() => (!rowData.start_time ? t('请先选择回档时间') : false)"
+              :label="t('截止时间')"
+              :min-width="180"
+              required>
+              <EditableDatePicker
+                v-model="rowData.end_time"
+                :disabled-date="(date) => handleEditTimeDisableCallback(date, rowData.start_time)"
+                format="yyyy-MM-dd HH:mm:ss"
+                type="datetime" />
+            </EditableTableColumn>
+            <DbNameColumn
+              v-model="rowData.databases"
+              :cluster-id="rowData.cluster?.id" />
+            <TableNameColumn
+              v-model="rowData.tables"
+              :cluster-id="rowData.cluster?.id"
+              :label="t('目标表')" />
+            <RecordColumn
+              v-model="rowData.rows_filter"
+              :cluster-id="rowData.cluster?.id" />
+            <OperationColumn
+              v-model:table-data="tableData"
+              :create-row-method="createTableData" />
+          </EditableTableRow>
+        </EditableTable>
+        <BkFormItem class="mt-20">
+          <BkCheckbox
+            v-model="formData.direct_write_back"
+            :false-label="false"
+            true-label>
+            {{ t('覆盖原始数据') }}
+          </BkCheckbox>
+        </BkFormItem>
+        <BkFormItem :label="t('备注')">
+          <BkInput
+            :rows="3"
+            style="max-width: 1000px"
+            type="textarea" />
+        </BkFormItem>
+      </BkForm>
+      <template #action>
+        <BkButton
+          theme="primary"
+          @click="handleSubmit">
+          {{ t('提交') }}
+        </BkButton>
+        <BkButton class="ml-8">{{ t('重置') }}</BkButton>
+      </template>
+    </SmartAction>
+  </div>
+</template>
+<script setup lang="ts">
+  import dayjs from 'dayjs';
+  import _ from 'lodash';
+  import { ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+
+  import TendbclusterModel from '@services/model/tendbcluster/tendbcluster';
+  import TicketModel, { type TendbCluster } from '@services/model/ticket/ticket';
+  import { createTicket, getTicketDetails } from '@services/source/ticket';
+
+  import { useTimeZoneFormat } from '@hooks';
+
+  import { TicketTypes } from '@common/const';
+
+  import EditableTable, {
+    Column as EditableTableColumn,
+    DatePicker as EditableDatePicker,
+    Row as EditableTableRow,
+  } from '@components/editable-table/Index.vue';
+  import TimeZonePicker from '@components/time-zone-picker/index.vue';
+
+  import ClusterColumn from './components/ClusterColumn.vue';
+  import DbNameColumn from './components/DbNameColumn.vue';
+  import OperationColumn from './components/OperationColumn.vue';
+  import RecordColumn from './components/RecordColumn.vue';
+  import TableNameColumn from './components/TableNameColumn.vue';
+
+  interface IRowData {
+    cluster?: {
+      id?: number;
+      master_domain?: string;
+    };
+    start_time?: string;
+    end_time?: string;
+    databases?: string[];
+    tables?: string[];
+    rows_filter?: string;
+    direct_write_back?: boolean;
+  }
+
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+  const { format: formatDateToUTC } = useTimeZoneFormat();
+
+  const createTableData = (data = {} as IRowData) => ({
+    cluster: data.cluster,
+    start_time: data.start_time || '',
+    end_time: data.end_time || '',
+    databases: data.databases || [],
+    tables: data.tables || [],
+    rows_filter: data.rows_filter || '',
+    direct_write_back: data.direct_write_back || false,
+  });
+
+  const formRef = useTemplateRef('formRef');
+  const editableTableRef = useTemplateRef('editableTableRef');
+  const tableData = ref([createTableData()]);
+
+  const isSubmiting = ref(false);
+  const formData = reactive({
+    flashback_type: 'RECORD_FLASHBACK',
+    direct_write_back: false,
+    remark: '',
+  });
+
+  if (Number(route.query.ticketId)) {
+    getTicketDetails<TicketModel<TendbCluster.FlashBack>>({
+      id: Number(route.query.ticketId),
+    }).then((data) => {
+      formData.flashback_type = data.details.flashback_type;
+      formData.remark = data.remark;
+      formData.direct_write_back = data.details.infos[0].direct_write_back;
+      tableData.value = data.details.infos.map((item) =>
+        createTableData({
+          ...item,
+          cluster: {
+            id: item.cluster_id,
+            master_domain: data.details.clusters[item.cluster_id].immute_domain,
+          },
+        }),
+      );
+    });
+  }
+
+  const selectedClusterIds = computed(() =>
+    _.filter(
+      tableData.value.map((item) => item.cluster?.id || 0),
+      (item) => Number(item) > 0,
+    ),
+  );
+
+  const handleFlashbackTypeChange = (type: string) => {
+    if (type === 'TABLE_FLASHBACK') {
+      router.push({
+        name: 'spiderFlashback',
+      });
+    }
+  };
+
+  const handleEditTimeDisableCallback = (date: Date | number, startDate: string) =>
+    dayjs(date).isBefore(dayjs(startDate));
+
+  const handleBatchEdit = (list: TendbclusterModel[]) => {
+    const dataList = list.reduce<ReturnType<typeof createTableData>[]>((acc, item) => {
+      if (!selectedClusterIds.value.includes(item.id)) {
+        acc.push(
+          createTableData({
+            cluster: {
+              id: item.id,
+              master_domain: item.master_domain,
+            },
+          }),
+        );
+      }
+      return acc;
+    }, []);
+    tableData.value = [...(selectedClusterIds.value.length ? tableData.value : []), ...dataList];
+  };
+
+  const handleSubmit = () => {
+    isSubmiting.value = true;
+    Promise.all([formRef.value!.validate(), editableTableRef.value!.validate()])
+      .then(() =>
+        createTicket({
+          ticket_type: TicketTypes.TENDBCLUSTER_FLASHBACK,
+          remark: formData.remark,
+          details: {
+            infos: tableData.value.map((item) => ({
+              cluster_id: item.cluster?.id,
+              start_time: formatDateToUTC(item.start_time),
+              end_time: formatDateToUTC(item.end_time),
+              databases: item.databases,
+              databases_ignore: [],
+              tables: item.tables,
+              tables_ignore: [],
+              rows_filter: item.rows_filter,
+              direct_write_back: formData.direct_write_back,
+            })),
+            force: true,
+            flashback_type: 'RECORD_FLASHBACK',
+          },
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        }).then((data) => {
+          window.changeConfirm = false;
+          router.push({
+            name: 'spiderFlashback',
+            params: {
+              page: 'success',
+            },
+            query: {
+              ticketId: data.id,
+            },
+          });
+        }),
+      )
+      .finally(() => {
+        isSubmiting.value = false;
+      });
+  };
+</script>
+<style lang="less">
+  .tendbcluster-toolbox-record-flashback-page {
+    .bk-form-label {
+      font-weight: bold;
+      color: #313238;
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/Index.vue
new file mode 100644
index 0000000000..aca48f386b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/Index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <Component :is="com" />
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  import Create from './Create.vue';
+  import Successed from './Successed.vue';
+
+  const route = useRoute();
+
+  const comMap = {
+    ticket: Create,
+    success: Successed,
+  };
+
+  const page = ref('');
+
+  const com = computed(() => {
+    if (comMap[page.value as keyof typeof comMap]) {
+      return comMap[page.value as keyof typeof comMap];
+    }
+    return Create;
+  });
+
+  watch(
+    route,
+    () => {
+      page.value = route.params.page as string;
+    },
+    {
+      immediate: true,
+    },
+  );
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/Successed.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/Successed.vue
new file mode 100644
index 0000000000..7f102147c9
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/Successed.vue
@@ -0,0 +1,86 @@
+<!--
+ * 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>
+  <RenderSuccess :steps="steps">
+    <template #title>
+      {{ $t('闪回任务提交成功') }}
+    </template>
+    <I18nT
+      keypath="接下来您可以通过xx查看任务最新动态"
+      tag="span">
+      <RouterLink
+        target="_blank"
+        :to="{
+          name: 'bizTicketManage',
+          params: {
+            ticketId: ticketId as string,
+          },
+        }">
+        {{ $t('单据') }}
+      </RouterLink>
+    </I18nT>
+    <template #action>
+      <BkButton
+        theme="primary"
+        @click="handleGoTicket">
+        {{ $t('去看看') }}
+      </BkButton>
+      <BkButton
+        class="ml8"
+        @click="handleStepChange">
+        {{ $t('继续提单') }}
+      </BkButton>
+    </template>
+  </RenderSuccess>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+
+  import RenderSuccess from '@components/ticket-success/Index.vue';
+
+  const route = useRoute();
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const { ticketId } = route.query;
+
+  const steps = [
+    {
+      name: t('单据审批'),
+    },
+    {
+      name: t('闪回执行'),
+    },
+    {
+      name: t('任务完成'),
+    },
+  ];
+
+  const handleGoTicket = () => {
+    const route = router.resolve({
+      name: 'bizTicketManage',
+      params: {
+        ticketId: Number(ticketId),
+      },
+    });
+    window.open(route.href);
+  };
+
+  const handleStepChange = () => {
+    router.push({
+      name: 'TENDBCLUSTER_FLASHBACK',
+    });
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/ClusterColumn.vue
new file mode 100644
index 0000000000..a8cbbef61b
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/ClusterColumn.vue
@@ -0,0 +1,147 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    :append-rules="rules"
+    field="cluster.master_domain"
+    fixed="left"
+    :label="t('目标集群')"
+    :loading="loading"
+    :min-width="300"
+    required>
+    <template #headAppend>
+      <span
+        v-bk-tooltips="t('批量选择')"
+        class="batch-host-select"
+        @click="handleShowSelector">
+        <DbIcon type="batch-host-select" />
+      </span>
+    </template>
+    <Input
+      v-model="modelValue.master_domain"
+      :placeholder="t('请输入集群域名')"
+      @change="handleInputChange" />
+  </Column>
+  <ClusterSelector
+    v-model:is-show="showSelector"
+    :cluster-types="[ClusterTypes.TENDBCLUSTER]"
+    :selected="selected"
+    @change="handleSelectorChange" />
+</template>
+<script lang="ts" setup>
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import TendbclusterModel from '@services/model/tendbcluster/tendbcluster';
+  import { filterClusters } from '@services/source/dbbase';
+
+  import { ClusterTypes } from '@common/const';
+  import { batchSplitRegex, domainRegex } from '@common/regex';
+
+  import ClusterSelector from '@components/cluster-selector/Index.vue';
+  import { Column, Input } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    selectedIds: number[];
+  }
+
+  interface Emits {
+    (e: 'batch-edit', list: TendbclusterModel[]): void;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const modelValue = defineModel<{
+    id?: number;
+    master_domain?: string;
+  }>({
+    default: () => ({
+      id: undefined,
+      master_domain: '',
+    }),
+  });
+
+  const { t } = useI18n();
+
+  const domainIdMap: Record<string, number> = {};
+
+  const showSelector = ref(false);
+  const selected = computed<Record<string, TendbclusterModel[]>>(() => ({
+    [ClusterTypes.TENDBCLUSTER]: props.selectedIds.map(
+      (id) =>
+        ({
+          id,
+          master_domain: domainIdMap[id],
+        }) as unknown as TendbclusterModel,
+    ),
+  }));
+
+  const rules = [
+    {
+      validator: (value: string) => value.split(batchSplitRegex).every((item) => domainRegex.test(item)),
+      message: t('集群域名格式不正确'),
+      trigger: 'change',
+    },
+    {
+      validator: () => !!modelValue.value.id,
+      message: '目标集群不存在',
+      trigger: 'blur',
+    },
+  ];
+
+  const { run: queryCluster, loading } = useRequest(filterClusters, {
+    manual: true,
+    onSuccess: (data) => {
+      if (data.length > 0) {
+        const [currentCluster] = data;
+        Object.assign(domainIdMap, {
+          [currentCluster.master_domain]: currentCluster.id,
+        });
+        modelValue.value = {
+          master_domain: currentCluster.master_domain,
+          id: currentCluster.id,
+        };
+      }
+    },
+  });
+
+  const handleShowSelector = () => {
+    showSelector.value = true;
+  };
+
+  const handleInputChange = (value: string) => {
+    modelValue.value.id = undefined;
+    if (value) {
+      queryCluster({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+        exact_domain: value.split(batchSplitRegex).join(','),
+      });
+    }
+  };
+
+  const handleSelectorChange = (selected: Record<string, TendbclusterModel[]>) => {
+    const dataList = selected[ClusterTypes.TENDBCLUSTER];
+    Object.assign(domainIdMap, Object.fromEntries(dataList.map((cur) => [cur.master_domain, cur.id])));
+    emits('batch-edit', dataList);
+  };
+</script>
+<style lang="less" scoped>
+  .batch-host-select {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/DbNameColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/DbNameColumn.vue
new file mode 100644
index 0000000000..060f1c1e83
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/DbNameColumn.vue
@@ -0,0 +1,96 @@
+<template>
+  <Column
+    :disabled-method="disabledMethod"
+    field="databases"
+    :label="t('目标 DB')"
+    :min-width="180"
+    required
+    :rules="rules">
+    <EditTagInput
+      v-model="modelValue"
+      :placeholder="t('请输入DB 名称，支持通配符“%”，含通配符的仅支持单个')" />
+  </Column>
+</template>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import { checkClusterDatabase } from '@services/source/dbbase';
+
+  import { Column, TagInput as EditTagInput } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    clusterId?: number;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const disabledMethod = () => (props.clusterId ? false : t('请先选择集群'));
+
+  const modelValue = defineModel<string[]>();
+
+  const systemDbNames = ['mysql', 'db_infobase', 'information_schema', 'performance_schema', 'sys', 'infodba_schema'];
+
+  const rules = [
+    {
+      validator: (value: string[]) => _.every(value, (item) => /^(?!stage_truncate)(?!.*dba_rollback$).*/.test(item)),
+      message: t('不能以stage_truncate开头或dba_rollback结尾'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => /^[-_a-zA-Z0-9*?%]{0,35}$/.test(item)),
+      message: t('库表名支持数字、字母、中划线、下划线，最大35字符'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => !systemDbNames.includes(item)),
+      message: t('不允许输入系统库和特殊库'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => item !== '*'),
+      message: t('不允许为 *'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) =>
+        !_.some(value, (item) => (/\*/.test(item) && item.length > 1) || (value.length > 1 && item === '*')),
+      message: t('* 只能独立使用'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => !/^[%?]$/.test(item)),
+      message: t('% 或 ? 不允许单独使用'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => {
+        const clearDbList = _.filter(value, (item) => !/[*%]/.test(item));
+        if (clearDbList.length < 1) {
+          return true;
+        }
+        return checkClusterDatabase({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          cluster_id: props.clusterId as number,
+          db_list: value,
+        }).then((data) => {
+          const notExistDbList = Object.keys(data).reduce<string[]>((result, dbName) => {
+            if (!data[dbName]) {
+              result.push(dbName);
+            }
+            return result;
+          }, []);
+          if (notExistDbList.length > 0) {
+            return t('n 不存在', { n: notExistDbList.join('、') });
+          }
+
+          return true;
+        });
+      },
+      message: t('DB 不存在'),
+      trigger: 'blur',
+    },
+  ];
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/OperationColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/OperationColumn.vue
new file mode 100644
index 0000000000..447a9deb82
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/OperationColumn.vue
@@ -0,0 +1,126 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <Column
+    ref="column"
+    fixed="right"
+    :label="t('操作')"
+    readonly
+    :resizeable="false"
+    :width="100">
+    <div class="toolbox-operation-column">
+      <div
+        v-if="Boolean(createRowMethod)"
+        class="action-btn"
+        @click="handleAppend">
+        <DbIcon type="plus-fill" />
+      </div>
+      <div
+        class="action-btn"
+        :class="{
+          disabled: !isRemoveable,
+        }"
+        @click="handleRemove">
+        <DbIcon type="minus-fill" />
+      </div>
+      <div
+        v-bk-tooltips="t('克隆')"
+        class="action-btn"
+        @click="handleClone">
+        <DbIcon type="copy-2" />
+      </div>
+    </div>
+  </Column>
+</template>
+<script setup lang="ts" generic="T extends Record<string, any>">
+  import _ from 'lodash';
+  import { useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import { Column, useTable } from '@components/editable-table/Index.vue';
+
+  const props = defineProps<{
+    createRowMethod?: () => T;
+  }>();
+
+  const tableData = defineModel<T[]>('tableData', {
+    required: true,
+  });
+
+  const { t } = useI18n();
+
+  const editTableContext = useTable();
+  const columnRef = useTemplateRef('column');
+
+  const isRemoveable = computed(() => tableData.value.length > 1);
+
+  const handleAppend = () => {
+    const rowIndex = columnRef.value!.getRowIndex();
+    const newRowIndex = rowIndex + 1;
+
+    if (newRowIndex > 0) {
+      tableData.value.splice(newRowIndex, 0, props.createRowMethod!());
+    }
+  };
+
+  const handleRemove = () => {
+    if (!isRemoveable.value) {
+      return;
+    }
+    const rowIndex = columnRef.value!.getRowIndex();
+    if (rowIndex > -1) {
+      tableData.value.splice(rowIndex, 1);
+    }
+  };
+
+  const handleClone = () => {
+    const rowIndex = columnRef.value!.getRowIndex();
+
+    const newRowIndex = rowIndex + 1;
+
+    if (newRowIndex > 0) {
+      tableData.value.splice(newRowIndex, 0, _.cloneDeep(tableData.value[rowIndex]));
+      editTableContext!.validateByRowIndex(newRowIndex);
+    }
+  };
+</script>
+<style lang="less">
+  .toolbox-operation-column {
+    display: flex;
+    height: 42px;
+    padding: 0 10px;
+    align-items: center;
+
+    .action-btn {
+      display: flex;
+      font-size: 14px;
+      color: #c4c6cc;
+      cursor: pointer;
+      transition: all 0.15s;
+
+      &:hover {
+        color: #979ba5;
+      }
+
+      &.disabled {
+        color: #dcdee5;
+        cursor: not-allowed;
+      }
+
+      & ~ .action-btn {
+        margin-left: 12px;
+      }
+    }
+  }
+</style>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/RecordColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/RecordColumn.vue
new file mode 100644
index 0000000000..37b18fd2d6
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/RecordColumn.vue
@@ -0,0 +1,27 @@
+<template>
+  <Column
+    :description="t('通过列与列值确定记录')"
+    :disabled-method="disabledMethod"
+    field="rows_filter"
+    :label="t('待闪回的记录')"
+    :min-width="200">
+    <EditTextarea v-model="modelValue" />
+  </Column>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { Column, Textarea as EditTextarea } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    clusterId?: number;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const disabledMethod = () => (props.clusterId ? false : t('请先选择集群'));
+
+  const modelValue = defineModel<string>();
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/TableNameColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/TableNameColumn.vue
new file mode 100644
index 0000000000..f3ac54540e
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/components/TableNameColumn.vue
@@ -0,0 +1,56 @@
+<template>
+  <Column
+    :disabled-method="disabledMethod"
+    field="tables"
+    :label="label"
+    :min-width="180"
+    required
+    :rules="rules">
+    <EditTagInput
+      v-model="modelValue"
+      :placeholder="t('请输入表名称，支持通配符“%”，含通配符的仅支持单个')" />
+  </Column>
+</template>
+<script setup lang="ts">
+  import _ from 'lodash';
+  import { useI18n } from 'vue-i18n';
+
+  import { Column, TagInput as EditTagInput } from '@components/editable-table/Index.vue';
+
+  interface Props {
+    label: string;
+    clusterId?: number;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const disabledMethod = () => (props.clusterId ? false : t('请先选择集群'));
+
+  const modelValue = defineModel<string[]>();
+
+  const rules = [
+    {
+      validator: (value: string[]) => _.every(value, (item) => /^[-_a-zA-Z0-9*?%]{0,64}$/.test(item)),
+      message: t('库表名支持数字、字母、中划线、下划线，最大64字符'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => item !== '*'),
+      message: t('不允许为 *'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) =>
+        !_.some(value, (item) => (/\*/.test(item) && item.length > 1) || (value.length > 1 && item === '*')),
+      message: t('* 只能独立使用'),
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string[]) => _.every(value, (item) => !/^[%?]$/.test(item)),
+      message: t('% 或 ? 不允许单独使用'),
+      trigger: 'blur',
+    },
+  ];
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/flashback/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/flashback/pages/page1/Index.vue
index 8fab02cdaf..50355d2a0f 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/flashback/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/flashback/pages/page1/Index.vue
@@ -20,6 +20,21 @@
         :title="t('闪回：通过 flashback 工具，对 row 格式的 binlog 做逆向操作')" />
       <div class="title-spot mt-12 mb-10">{{ t('时区') }}<span class="required" /></div>
       <TimeZonePicker style="width: 450px" />
+      <div class="title-spot mt-12 mb-10">{{ t('闪回方式') }}<span class="required" /></div>
+      <BkRadioGroup
+        model-value="TABLE_FLASHBACK"
+        @change="handleFlashbackTypeChange">
+        <BkRadioButton
+          label="TABLE_FLASHBACK"
+          style="width: 225px">
+          {{ t('库表闪回') }}
+        </BkRadioButton>
+        <BkRadioButton
+          label="RECORD_FLASHBACK"
+          style="width: 225px">
+          {{ t('记录及闪回') }}
+        </BkRadioButton>
+      </BkRadioGroup>
       <RenderData
         class="mt16"
         @batch-edit="handleBatchEditColumn"
@@ -99,6 +114,15 @@
       tableData.value = tableDataList;
       remark.value = cloneData.remark;
       window.changeConfirm = true;
+      if (cloneData.flashbackType === 'RECORD_FLASHBACK') {
+        router.push({
+          name: 'TENDBCLUSTER_FLASHBACK',
+          query: {
+            ticketId: cloneData.id,
+            ticketType: cloneData.ticketType,
+          },
+        });
+      }
     },
   });
 
@@ -124,6 +148,14 @@
     );
   };
 
+  const handleFlashbackTypeChange = (type: string) => {
+    if (type === 'RECORD_FLASHBACK') {
+      router.push({
+        name: 'TENDBCLUSTER_FLASHBACK',
+      });
+    }
+  };
+
   // 批量选择
   const handleShowBatchSelector = () => {
     isShowBatchSelector.value = true;
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
index 643dfc379d..6d077ce2c4 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/routes.ts
@@ -24,231 +24,6 @@ import { checkDbConsole } from '@utils';
 
 import { t } from '@locales/index';
 
-const spiderSqlExecuteRoute = {
-  path: 'sql-execute/:step?',
-  name: 'spiderSqlExecute',
-  meta: {
-    navName: t('SQL变更执行'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/sql-execute/Index.vue'),
-};
-
-const spiderDbRenameRoute = {
-  path: 'db-rename/:page?',
-  name: 'spiderDbRename',
-  meta: {
-    navName: t('DB 重命名'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/db-rename/Index.vue'),
-};
-
-const spiderMasterSlaveSwapRoute = {
-  path: 'master-slave-swap/:page?',
-  name: 'spiderMasterSlaveSwap',
-  meta: {
-    navName: t('主从互切'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/master-slave-swap/Index.vue'),
-};
-
-const spiderMasterFailoverRoute = {
-  path: 'master-failover/:page?',
-  name: 'spiderMasterFailover',
-  meta: {
-    navName: t('主库故障切换'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/master-failover/Index.vue'),
-};
-
-const spiderCapacityChangeRoute = {
-  path: 'capacity-change/:page?',
-  name: 'spiderCapacityChange',
-  meta: {
-    navName: t('集群容量变更'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/capacity-change/Index.vue'),
-};
-
-const spiderProxyScaleUpRoute = {
-  name: 'SpiderProxyScaleUp',
-  path: 'proxy-scale-up/:page?',
-  meta: {
-    navName: t('扩容接入层'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/proxy-scale-up/Index.vue'),
-};
-
-const spiderProxyScaleDownRoute = {
-  name: 'SpiderProxyScaleDown',
-  path: 'proxy-scale-down/:page?',
-  meta: {
-    navName: t('缩容接入层'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/proxy-scale-down/Index.vue'),
-};
-
-const spiderProxySlaveApplyRoute = {
-  name: 'SpiderProxySlaveApply',
-  path: 'proxy-slave-apply/:page?',
-  meta: {
-    navName: t('部署只读接入层'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/proxy-slave-apply/Index.vue'),
-};
-
-const spiderAddMntRoute = {
-  path: 'add-mnt/:page?',
-  name: 'spiderAddMnt',
-  meta: {
-    navName: t('添加运维节点'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/add-mnt/Index.vue'),
-};
-
-const spiderDbTableBackupRoute = {
-  path: 'db-table-backup/:page?',
-  name: 'spiderDbTableBackup',
-  meta: {
-    navName: t('库表备份'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/db-table-backup/Index.vue'),
-};
-
-const spiderDbBackupRoute = {
-  path: 'db-backup/:page?',
-  name: 'spiderDbBackup',
-  meta: {
-    navName: t('全库备份'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/db-backup/Index.vue'),
-};
-
-const spiderFlashbackRoute = {
-  path: 'flashback/:page?',
-  name: 'spiderFlashback',
-  meta: {
-    navName: t('闪回'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/flashback/Index.vue'),
-};
-
-const spiderRollbackRoute = {
-  path: 'rollback/:page?',
-  name: 'spiderRollback',
-  meta: {
-    navName: t('定点构造'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/rollback/Index.vue'),
-};
-
-const spiderRollbackRecordRoute = {
-  path: 'rollback-record',
-  name: 'spiderRollbackRecord',
-  meta: {
-    navName: t('构造实例'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/rollback-record/Index.vue'),
-};
-
-const spiderDbClearRoute = {
-  path: 'db-clear/:page?',
-  name: 'spiderDbClear',
-  meta: {
-    navName: t('清档'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/db-clear/Index.vue'),
-};
-
-const spiderChecksumRoute = {
-  path: 'checksum/:page?',
-  name: 'spiderChecksum',
-  meta: {
-    navName: t('数据校验修复'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/checksum/Index.vue'),
-};
-
-const spiderPrivilegeCloneClientRoute = {
-  path: 'privilege-clone-client/:page?',
-  name: 'spiderPrivilegeCloneClient',
-  meta: {
-    navName: t('客户端权限克隆'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/privilege-clone-client/Index.vue'),
-};
-
-const spiderPrivilegeCloneInstRoute = {
-  path: 'privilege-clone-inst/:page?',
-  name: 'spiderPrivilegeCloneInst',
-  meta: {
-    navName: t('DB 实例权限克隆'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/privilege-clone-inst/Index.vue'),
-};
-
-const spiderOpenareaTemplateRoute = {
-  path: 'openarea-template',
-  name: 'spiderOpenareaTemplate',
-  meta: {
-    navName: t('开区模版'),
-  },
-  component: () => import('@views/db-manage/tendb-cluster/openarea-template/Index.vue'),
-};
-
-const spiderMasterSlaveCloneRoute = {
-  path: 'master-slave-clone/:page?',
-  name: 'spiderMasterSlaveClone',
-  meta: {
-    navName: t('迁移主从'),
-    activeMenu: 'spiderToolbox',
-  },
-  component: () => import('@views/db-manage/tendb-cluster/master-slave-clone/Index.vue'),
-};
-
-const spiderSlaveRebuildRoute = {
-  path: 'slave-rebuild/:page?',
-  name: 'spiderSlaveRebuild',
-  meta: {
-    navName: t('重建从库'),
-    activeMenu: 'spiderToolbox',
-  },
-  component: () => import('@views/db-manage/tendb-cluster/slave-rebuild/Index.vue'),
-};
-
-const spiderWebconsoleRoute = {
-  name: 'SpiderWebconsole',
-  path: 'webconsole',
-  meta: {
-    navName: 'Webconsole',
-  },
-  component: () => import('@views/db-manage/tendb-cluster/webconsole/Index.vue'),
-};
-
-const toolboxDbConsoleRouteMap = {
-  'tendbCluster.toolbox.sqlExecute': spiderSqlExecuteRoute,
-  'tendbCluster.toolbox.dbRename': spiderDbRenameRoute,
-  'tendbCluster.toolbox.rollback': spiderRollbackRoute,
-  'tendbCluster.toolbox.rollbackRecord': spiderRollbackRecordRoute,
-  'tendbCluster.toolbox.flashback': spiderFlashbackRoute,
-  'tendbCluster.toolbox.dbTableBackup': spiderDbTableBackupRoute,
-  'tendbCluster.toolbox.dbBackup': spiderDbBackupRoute,
-  'tendbCluster.toolbox.clientPermissionClone': spiderPrivilegeCloneClientRoute,
-  'tendbCluster.toolbox.dbInstancePermissionClone': spiderPrivilegeCloneInstRoute,
-  'tendbCluster.toolbox.addMnt': spiderAddMntRoute,
-  'tendbCluster.toolbox.proxySlaveApply': spiderProxySlaveApplyRoute,
-  'tendbCluster.toolbox.masterSlaveSwap': spiderMasterSlaveSwapRoute,
-  'tendbCluster.toolbox.masterFailover': spiderMasterFailoverRoute,
-  'tendbCluster.toolbox.capacityChange': spiderCapacityChangeRoute,
-  'tendbCluster.toolbox.proxyScaleDown': spiderProxyScaleDownRoute,
-  'tendbCluster.toolbox.proxyScaleUp': spiderProxyScaleUpRoute,
-  'tendbCluster.toolbox.dbClear': spiderDbClearRoute,
-  'tendbCluster.toolbox.checksum': spiderChecksumRoute,
-  'tendbCluster.toolbox.openareaTemplate': spiderOpenareaTemplateRoute,
-  'tendbCluster.toolbox.slaveRebuild': spiderSlaveRebuildRoute,
-  'tendbCluster.toolbox.masterSlaveClone': spiderMasterSlaveCloneRoute,
-  'tendbCluster.toolbox.webconsole': spiderWebconsoleRoute,
-};
-
 const tendbClusterInstanceRoute = {
   name: 'tendbClusterInstance',
   path: 'instance-list',
@@ -307,7 +82,215 @@ const spiderToolboxRoute = {
     name: '',
   },
   component: () => import('@views/db-manage/tendb-cluster/toolbox/Index.vue'),
-  children: [] as RouteRecordRaw[],
+  children: [
+    {
+      path: 'sql-execute/:step?',
+      name: 'spiderSqlExecute',
+      meta: {
+        navName: t('SQL变更执行'),
+        dbConsole: 'tendbCluster.toolbox.sqlExecute',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/sql-execute/Index.vue'),
+    },
+    {
+      path: 'db-rename/:page?',
+      name: 'spiderDbRename',
+      meta: {
+        navName: t('DB 重命名'),
+        dbConsole: 'tendbCluster.toolbox.dbRename',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/db-rename/Index.vue'),
+    },
+    {
+      path: 'master-slave-swap/:page?',
+      name: 'spiderMasterSlaveSwap',
+      meta: {
+        navName: t('主从互切'),
+        dbConsole: 'tendbCluster.toolbox.masterSlaveSwap',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/master-slave-swap/Index.vue'),
+    },
+    {
+      path: 'master-failover/:page?',
+      name: 'spiderMasterFailover',
+      meta: {
+        navName: t('主库故障切换'),
+        dbConsole: 'tendbCluster.toolbox.masterFailover',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/master-failover/Index.vue'),
+    },
+    {
+      path: 'capacity-change/:page?',
+      name: 'spiderCapacityChange',
+      meta: {
+        navName: t('集群容量变更'),
+        dbConsole: 'tendbCluster.toolbox.capacityChange',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/capacity-change/Index.vue'),
+    },
+    {
+      name: 'SpiderProxyScaleUp',
+      path: 'proxy-scale-up/:page?',
+      meta: {
+        navName: t('扩容接入层'),
+        dbConsole: 'tendbCluster.toolbox.proxyScaleUp',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/proxy-scale-up/Index.vue'),
+    },
+    {
+      name: 'SpiderProxyScaleDown',
+      path: 'proxy-scale-down/:page?',
+      meta: {
+        navName: t('缩容接入层'),
+        dbConsole: 'tendbCluster.toolbox.proxyScaleDown',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/proxy-scale-down/Index.vue'),
+    },
+    {
+      name: 'SpiderProxySlaveApply',
+      path: 'proxy-slave-apply/:page?',
+      meta: {
+        dbConsole: 'tendbCluster.toolbox.proxySlaveApply',
+        navName: t('部署只读接入层'),
+      },
+      component: () => import('@views/db-manage/tendb-cluster/proxy-slave-apply/Index.vue'),
+    },
+    {
+      path: 'add-mnt/:page?',
+      name: 'spiderAddMnt',
+      meta: {
+        navName: t('添加运维节点'),
+        dbConsole: 'tendbCluster.toolbox.addMnt',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/add-mnt/Index.vue'),
+    },
+    {
+      path: 'db-table-backup/:page?',
+      name: 'spiderDbTableBackup',
+      meta: {
+        navName: t('库表备份'),
+        dbConsole: 'tendbCluster.toolbox.dbTableBackup',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/db-table-backup/Index.vue'),
+    },
+    {
+      path: 'db-backup/:page?',
+      name: 'spiderDbBackup',
+      meta: {
+        navName: t('全库备份'),
+        dbConsole: 'tendbCluster.toolbox.dbBackup',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/db-backup/Index.vue'),
+    },
+    {
+      path: 'flashback/:page?',
+      name: 'spiderFlashback',
+      meta: {
+        navName: t('闪回'),
+        dbConsole: 'tendbCluster.toolbox.flashback',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/flashback/Index.vue'),
+    },
+    {
+      path: 'TENDBCLUSTER_FLASHBACK/:page?',
+      name: 'TENDBCLUSTER_FLASHBACK',
+      meta: {
+        navName: t('闪回'),
+        dbConsole: 'tendbCluster.toolbox.flashback',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/TENDBCLUSTER_FLASHBACK/Index.vue'),
+    },
+    {
+      path: 'rollback/:page?',
+      name: 'spiderRollback',
+      meta: {
+        navName: t('定点构造'),
+        dbConsole: 'tendbCluster.toolbox.rollback',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/rollback/Index.vue'),
+    },
+    {
+      path: 'rollback-record',
+      name: 'spiderRollbackRecord',
+      meta: {
+        navName: t('构造实例'),
+        dbConsole: 'tendbCluster.toolbox.rollbackRecord',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/rollback-record/Index.vue'),
+    },
+    {
+      path: 'db-clear/:page?',
+      name: 'spiderDbClear',
+      meta: {
+        navName: t('清档'),
+        dbConsole: 'tendbCluster.toolbox.dbClear',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/db-clear/Index.vue'),
+    },
+    {
+      path: 'checksum/:page?',
+      name: 'spiderChecksum',
+      meta: {
+        navName: t('数据校验修复'),
+        dbConsole: 'tendbCluster.toolbox.checksum',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/checksum/Index.vue'),
+    },
+    {
+      path: 'privilege-clone-client/:page?',
+      name: 'spiderPrivilegeCloneClient',
+      meta: {
+        navName: t('客户端权限克隆'),
+        dbConsole: 'tendbCluster.toolbox.clientPermissionClone',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/privilege-clone-client/Index.vue'),
+    },
+    {
+      path: 'privilege-clone-inst/:page?',
+      name: 'spiderPrivilegeCloneInst',
+      meta: {
+        navName: t('DB 实例权限克隆'),
+        dbConsole: 'tendbCluster.toolbox.dbInstancePermissionClone',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/privilege-clone-inst/Index.vue'),
+    },
+    {
+      path: 'openarea-template',
+      name: 'spiderOpenareaTemplate',
+      meta: {
+        navName: t('开区模版'),
+        dbConsole: 'tendbCluster.toolbox.openareaTemplat',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/openarea-template/Index.vue'),
+    },
+    {
+      path: 'master-slave-clone/:page?',
+      name: 'spiderMasterSlaveClone',
+      meta: {
+        navName: t('迁移主从'),
+        dbConsole: 'tendbCluster.toolbox.masterSlaveClone',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/master-slave-clone/Index.vue'),
+    },
+    {
+      path: 'slave-rebuild/:page?',
+      name: 'spiderSlaveRebuild',
+      meta: {
+        navName: t('重建从库'),
+        dbConsole: 'tendbCluster.toolbox.slaveRebuild',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/slave-rebuild/Index.vue'),
+    },
+    {
+      name: 'SpiderWebconsole',
+      path: 'webconsole',
+      meta: {
+        navName: 'Webconsole',
+        dbConsole: 'tendbCluster.toolbox.webconsole',
+      },
+      component: () => import('@views/db-manage/tendb-cluster/webconsole/Index.vue'),
+    },
+  ],
 };
 
 const renderRoutes = [
@@ -371,21 +354,20 @@ export default function getRoutes(funControllerData: FunctionControllModel) {
   const mysqlController = funControllerData.getFlatData<MySQLFunctions, 'mysql'>('mysql');
 
   if (mysqlController.tendbcluster_toolbox) {
-    Object.entries(toolboxDbConsoleRouteMap).forEach(([key, routeItem]) => {
-      const dbConsoleValue = key as ExtractedControllerDataKeys;
-      if (!funControllerData[dbConsoleValue] || funControllerData[dbConsoleValue].is_enabled) {
-        spiderToolboxRoute.children!.push(routeItem);
-        if (routeItem.name === 'spiderSqlExecute') {
-          spiderToolboxRoute.redirect!.name = 'spiderSqlExecute';
-        }
-      }
+    const toolboxRoutes = spiderToolboxRoute.children.filter((item) => {
+      const dbConsole = item.meta.dbConsole as ExtractedControllerDataKeys;
+      return !funControllerData[dbConsole] || funControllerData[dbConsole].is_enabled;
     });
 
-    if (!spiderToolboxRoute.redirect!.name) {
-      spiderToolboxRoute.redirect!.name = (spiderToolboxRoute.children![0]?.name as string) ?? '';
+    if (toolboxRoutes.length > 0) {
+      renderRoutes[0].children.push({
+        ...spiderToolboxRoute,
+        redirect: {
+          name: toolboxRoutes[0].name,
+        },
+        children: toolboxRoutes,
+      });
     }
-
-    renderRoutes[0].children.push(spiderToolboxRoute);
   }
 
   if (checkDbConsole('tendbCluster.instanceManage')) {
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/mysql/Flashback.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/mysql/Flashback.vue
index 13ef4407e3..87c171991e 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/mysql/Flashback.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/mysql/Flashback.vue
@@ -12,7 +12,14 @@
 -->
 
 <template>
-  <BkTable :data="ticketDetails.details.infos">
+  <InfoList>
+    <InfoItem :label="t('闪回方式:')">
+      {{ ticketDetails.details.flashback_type === 'RECORD_FLASHBACK' ? t('记录及闪回') : t('库表闪回') }}
+    </InfoItem>
+  </InfoList>
+  <BkTable
+    :data="ticketDetails.details.infos"
+    :show-overflow="false">
     <BkTableColumn
       fixed="left"
       :label="t('目标集群')"
@@ -23,14 +30,14 @@
     </BkTableColumn>
     <BkTableColumn
       :label="t('回档时间')"
-      :min-width="180">
+      :min-width="250">
       <template #default="{ data }: { data: RowData }">
         {{ dayjs(data.start_time).format('YYYY-MM-DD HH:mm:ss ZZ') }}
       </template>
     </BkTableColumn>
     <BkTableColumn
       :label="t('截止时间')"
-      :min-width="180">
+      :min-width="250">
       <template #default="{ data }: { data: RowData }">
         {{ dayjs(data.end_time).format('YYYY-MM-DD HH:mm:ss ZZ') }}
       </template>
@@ -45,7 +52,9 @@
         <span v-if="data.databases.length < 1">--</span>
       </template>
     </BkTableColumn>
-    <BkTableColumn :label="t('忽略库')">
+    <BkTableColumn
+      v-if="isTableFlashback"
+      :label="t('忽略库')">
       <template #default="{ data }: { data: RowData }">
         <BkTag
           v-for="item in data.databases_ignore"
@@ -65,7 +74,9 @@
         <span v-if="data.tables.length < 1">--</span>
       </template>
     </BkTableColumn>
-    <BkTableColumn :label="t('忽略表')">
+    <BkTableColumn
+      v-if="isTableFlashback"
+      :label="t('忽略表')">
       <template #default="{ data }: { data: RowData }">
         <BkTag
           v-for="item in data.tables_ignore"
@@ -75,7 +86,21 @@
         <span v-if="data.tables_ignore.length < 1">--</span>
       </template>
     </BkTableColumn>
+    <BkTableColumn
+      v-if="isRecordFlashback"
+      :label="t('待闪回记录')"
+      :min-width="300"
+      :show-overflow="false">
+      <template #default="{ data }: { data: RowData }">
+        <div style="line-height: 26px; white-space: pre">{{ data.rows_filter }}</div>
+      </template>
+    </BkTableColumn>
   </BkTable>
+  <InfoList>
+    <InfoItem :label="t('覆盖原始数据:')">
+      {{ ticketDetails.details.force ? t('是') : t('否') }}
+    </InfoItem>
+  </InfoList>
 </template>
 <script setup lang="ts">
   import dayjs from 'dayjs';
@@ -85,13 +110,15 @@
 
   import { TicketTypes } from '@common/const';
 
+  import InfoList, { Item as InfoItem } from '../components/info-list/Index.vue';
+
   interface Props {
     ticketDetails: TicketModel<Mysql.FlashBack>;
   }
 
   type RowData = Props['ticketDetails']['details']['infos'][number];
 
-  defineProps<Props>();
+  const props = defineProps<Props>();
 
   defineOptions({
     name: TicketTypes.MYSQL_FLASHBACK,
@@ -99,4 +126,7 @@
   });
 
   const { t } = useI18n();
+
+  const isTableFlashback = computed(() => props.ticketDetails.details.flashback_type === 'TABLE_FLASHBACK');
+  const isRecordFlashback = computed(() => props.ticketDetails.details.flashback_type === 'RECORD_FLASHBACK');
 </script>
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Flashback.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Flashback.vue
index d2e3aecee3..5dde43edd7 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Flashback.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/tendbCluster/Flashback.vue
@@ -12,7 +12,14 @@
 -->
 
 <template>
-  <BkTable :data="ticketDetails.details.infos">
+  <InfoList>
+    <InfoItem :label="t('闪回方式:')">
+      {{ ticketDetails.details.flashback_type === 'RECORD_FLASHBACK' ? t('记录及闪回') : t('库表闪回') }}
+    </InfoItem>
+  </InfoList>
+  <BkTable
+    :data="ticketDetails.details.infos"
+    :show-overflow="false">
     <BkTableColumn
       fixed="left"
       :label="t('目标集群')"
@@ -48,6 +55,19 @@
       </template>
     </BkTableColumn>
     <BkTableColumn
+      v-if="isTableFlashback"
+      :label="t('忽略库')">
+      <template #default="{ data }: { data: RowData }">
+        <BkTag
+          v-for="item in data.databases_ignore"
+          :key="item">
+          {{ item }}
+        </BkTag>
+        <span v-if="data.databases_ignore.length < 1">--</span>
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      v-if="isTableFlashback"
       :label="t('忽略库')"
       :min-width="120">
       <template #default="{ data }: { data: RowData }">
@@ -72,8 +92,8 @@
       </template>
     </BkTableColumn>
     <BkTableColumn
-      :label="t('忽略表')"
-      :min-width="120">
+      v-if="isTableFlashback"
+      :label="t('忽略表')">
       <template #default="{ data }: { data: RowData }">
         <BkTag
           v-for="item in data.tables_ignore"
@@ -83,6 +103,15 @@
         <span v-if="data.tables_ignore.length < 1">--</span>
       </template>
     </BkTableColumn>
+    <BkTableColumn
+      v-if="isRecordFlashback"
+      :label="t('待闪回记录')"
+      :min-width="300"
+      :show-overflow="false">
+      <template #default="{ data }: { data: RowData }">
+        <div style="line-height: 26px; white-space: pre">{{ data.rows_filter }}</div>
+      </template>
+    </BkTableColumn>
   </BkTable>
 </template>
 <script setup lang="ts">
@@ -94,13 +123,15 @@
 
   import { utcDisplayTime } from '@utils';
 
+  import InfoList, { Item as InfoItem } from '../components/info-list/Index.vue';
+
   interface Props {
     ticketDetails: TicketModel<TendbCluster.FlashBack>;
   }
 
   type RowData = Props['ticketDetails']['details']['infos'][number];
 
-  defineProps<Props>();
+  const props = defineProps<Props>();
 
   defineOptions({
     name: TicketTypes.TENDBCLUSTER_FLASHBACK,
@@ -108,4 +139,7 @@
   });
 
   const { t } = useI18n();
+
+  const isTableFlashback = computed(() => props.ticketDetails.details.flashback_type === 'TABLE_FLASHBACK');
+  const isRecordFlashback = computed(() => props.ticketDetails.details.flashback_type === 'RECORD_FLASHBACK');
 </script>
diff --git a/dbm-ui/frontend/vite.config.mts b/dbm-ui/frontend/vite.config.mts
index da419ebd57..cbccf20252 100644
--- a/dbm-ui/frontend/vite.config.mts
+++ b/dbm-ui/frontend/vite.config.mts
@@ -26,6 +26,8 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
   const isHttps = mode === 'https';
 
+  console.log('env === ', mode);
+
   return {
     base: env.VITE_PUBLIC_PATH,
     resolve: {
@@ -92,7 +94,6 @@ export default defineConfig(({ mode }) => {
       ViteHTMLEnv({
         prefix: '{{',
         suffix: '}}',
-        envPrefixes: ['VITE_'],
       }),
     ].concat(isHttps ? [basicSsl()] : []),
     optimizeDeps: {
@@ -102,6 +103,10 @@ export default defineConfig(({ mode }) => {
       strictPort: true,
       host: '127.0.0.1',
       allowedHosts: true,
+      hrm: true,
+      watch: {
+        usePolling: true,
+      },
       port: 8088,
       proxy: {
         '/bkrepo_upload': {