From 20f62dae6c541f64597c04f84c884d9d28ffc908 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Tue, 29 Apr 2025 11:56:28 +0800
Subject: [PATCH 1/7] refactor: migrate Form.vue and ConditionBox.vue to
 Composition API

- Converted Form.vue and ConditionBox.vue components to use the Composition API with `<script setup>`.
- Enhanced state management by utilizing reactive and ref for form data and loading states.
- Improved validation logic and error handling for form inputs.
- Streamlined event handling and method definitions for better readability and maintainability.
- Updated imports and component structure for consistency with Vue 3 standards.
---
 .../business/src/views/verification/Form.vue  | 1034 +++---
 .../verification/components/ConditionBox.vue  | 3279 +++++++----------
 2 files changed, 1929 insertions(+), 2384 deletions(-)

diff --git a/packages/business/src/views/verification/Form.vue b/packages/business/src/views/verification/Form.vue
index 8eaa196f2c..af6671c10d 100644
--- a/packages/business/src/views/verification/Form.vue
+++ b/packages/business/src/views/verification/Form.vue
@@ -1,497 +1,617 @@
-<script>
+<script setup lang="ts">
+import { observable } from '@formily/reactive'
 import { inspectApi, taskApi } from '@tap/api'
-import { AsyncSelect } from '@tap/form'
+import { AsyncSelect, computed as reactiveComputed } from '@tap/form'
 import i18n from '@tap/i18n'
 import Time from '@tap/shared/src/time'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { cloneDeep } from 'lodash-es'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 import PageContainer from '../../components/PageContainer.vue'
-import ConditionBox from './components/ConditionBox'
+import ConditionBox from './components/ConditionBox.vue'
 import { TABLE_PARAMS } from './components/const'
 import { inspectMethod as inspectMethodMap } from './const'
 
-export default {
-  components: { AsyncSelect, ConditionBox, PageContainer },
-  data() {
-    const self = this
-    const requiredValidator = (msg, check) => {
-      return (rule, value, callback) => {
-        const valid = check ? check() : true
-        if (valid && !value) {
-          callback(new Error(msg))
-        } else {
-          callback()
-        }
-      }
-    }
-    const checkMode = () => {
-      return self.form.mode === 'cron'
-    }
+interface Timing {
+  intervals: number
+  intervalsUnit: string
+  start: number
+  end: number
+}
 
-    return {
-      loading: false,
-      timeUnitOptions: ['second', 'minute', 'hour', 'day', 'week', 'month'],
-      isDbClone: false,
-      taskName: '',
-      dateRange: [],
-      defaultTime: [
-        new Date(2025, 1, 1, 0, 0, 0),
-        new Date(2025, 2, 1, 23, 59, 59),
-      ],
-      form: {
-        flowId: '',
-        name: '',
-        mode: 'manual',
-        inspectDifferenceMode: 'All',
-        inspectMethod: 'row_count',
-        cdcBeginDate: '',
-        cdcEndDate: '',
-        cdcDuration: '',
-        timing: {
-          intervals: 24 * 60,
-          intervalsUnit: 'minute',
-          start: Time.now(),
-          end: Time.now() + 24 * 60 * 60 * 1000,
-        },
-        limit: {
-          keep: 100,
-        },
-        enabled: true,
-        tasks: [],
-        taskMode: 'pipeline',
-        errorNotifys: ['SYSTEM', 'EMAIL'],
-        inconsistentNotifys: ['SYSTEM', 'EMAIL'],
-        checkTableThreadNum: 10,
-        alarmSettings: [
-          {
-            type: 'INSPECT',
-            key: 'INSPECT_TASK_ERROR',
-            notify: ['SYSTEM', 'EMAIL'],
-            open: true,
-          },
-          {
-            type: 'INSPECT',
-            key: 'INSPECT_COUNT_ERROR',
-            notify: ['SYSTEM', 'EMAIL'],
-            open: true,
-            params: {
-              maxDifferentialRows: 0,
-            },
-          },
-          {
-            type: 'INSPECT',
-            key: 'INSPECT_VALUE_ERROR',
-            notify: ['SYSTEM', 'EMAIL'],
-            open: true,
-            params: {
-              maxDifferentialValues: 0,
-            },
-          },
-        ],
-      },
-      rules: {
-        flowId: [
-          {
-            validator: requiredValidator(
-              this.$t('packages_business_verification_tasksDataFlow'),
-            ),
-          },
-        ],
-        name: [
-          {
-            validator: requiredValidator(
-              this.$t('packages_business_verification_tasksJobName'),
-            ),
-          },
-        ],
-        'timing.start': [
-          {
-            validator: requiredValidator(
-              this.$t('packages_business_verification_tasksTime'),
-              checkMode,
-            ),
-          },
-        ],
-        'timing.intervals': [
-          {
-            validator: requiredValidator(
-              this.$t('packages_business_verification_tasksVerifyInterval'),
-              checkMode,
-            ),
-          },
-        ],
-        cdcBeginDate: [
-          {
-            validator: requiredValidator(
-              i18n.t('packages_business_verification_form_qingshurukaishi'),
-              () => {
-                return self.form.inspectMethod === 'cdcCount'
-              },
-            ),
-          },
-        ],
+interface Limit {
+  keep: number
+}
+
+interface AlarmSetting {
+  type: string
+  key: string
+  notify: string[]
+  open: boolean
+  params?: {
+    maxDifferentialRows?: number
+    maxDifferentialValues?: number
+  }
+}
+
+interface FormData {
+  flowId: string
+  name: string
+  mode: 'manual' | 'cron'
+  inspectDifferenceMode: string
+  inspectMethod: string
+  cdcBeginDate: string
+  cdcEndDate: string
+  cdcDuration: string
+  timing: Timing
+  limit: Limit
+  enabled: boolean
+  tasks: any[]
+  taskMode: 'pipeline' | 'random'
+  errorNotifys: string[]
+  inconsistentNotifys: string[]
+  checkTableThreadNum: number
+  alarmSettings: AlarmSetting[]
+  ignoreTimePrecision?: boolean
+}
+
+interface Task {
+  taskId: string
+  source: any
+  target: any
+  fullMatch: boolean
+  showAdvancedVerification?: boolean
+  script?: string
+  webScript?: string
+  jsEngineName?: string
+}
+
+const router = useRouter()
+const route = useRoute()
+
+const loading = ref(false)
+const timeUnitOptions = ['second', 'minute', 'hour', 'day', 'week', 'month']
+const isDbClone = ref(false)
+const taskName = ref('')
+const defaultTime = ref([
+  new Date(2025, 1, 1, 0, 0, 0),
+  new Date(2025, 2, 1, 23, 59, 59),
+])
+
+const formObs = observable<FormData>({
+  flowId: '',
+  name: '',
+  mode: 'manual',
+  inspectDifferenceMode: 'All',
+  inspectMethod: 'row_count',
+  cdcBeginDate: '',
+  cdcEndDate: '',
+  cdcDuration: '',
+  timing: {
+    intervals: 24 * 60,
+    intervalsUnit: 'minute',
+    start: Time.now(),
+    end: Time.now() + 24 * 60 * 60 * 1000,
+  },
+  limit: {
+    keep: 100,
+  },
+  enabled: true,
+  tasks: [],
+  taskMode: 'pipeline',
+  errorNotifys: ['SYSTEM', 'EMAIL'],
+  inconsistentNotifys: ['SYSTEM', 'EMAIL'],
+  checkTableThreadNum: 10,
+  alarmSettings: [
+    {
+      type: 'INSPECT',
+      key: 'INSPECT_TASK_ERROR',
+      notify: ['SYSTEM', 'EMAIL'],
+      open: true,
+    },
+    {
+      type: 'INSPECT',
+      key: 'INSPECT_COUNT_ERROR',
+      notify: ['SYSTEM', 'EMAIL'],
+      open: true,
+      params: {
+        maxDifferentialRows: 0,
       },
-      edges: [],
-      allStages: [],
-      flowOptions: [],
-      inspectMethodMap,
-      typTipMap: {
-        row_count: this.$t('packages_business_verification_fastCountTip'),
-        field: this.$t('packages_business_verification_contentVerifyTip'),
-        jointField: this.$t('packages_business_verification_jointFieldTip'),
+    },
+    {
+      type: 'INSPECT',
+      key: 'INSPECT_VALUE_ERROR',
+      notify: ['SYSTEM', 'EMAIL'],
+      open: true,
+      params: {
+        maxDifferentialValues: 0,
       },
-      jointErrorMessage: '',
-      errorMessageLevel: '',
-      autoAddTableLoading: false,
+    },
+  ],
+})
+
+const form = reactiveComputed(() => {
+  return formObs
+})
+
+// const form = ref<FormData>({
+//   flowId: '',
+//   name: '',
+//   mode: 'manual',
+//   inspectDifferenceMode: 'All',
+//   inspectMethod: 'row_count',
+//   cdcBeginDate: '',
+//   cdcEndDate: '',
+//   cdcDuration: '',
+//   timing: {
+//     intervals: 24 * 60,
+//     intervalsUnit: 'minute',
+//     start: Time.now(),
+//     end: Time.now() + 24 * 60 * 60 * 1000,
+//   },
+//   limit: {
+//     keep: 100,
+//   },
+//   enabled: true,
+//   tasks: [],
+//   taskMode: 'pipeline',
+//   errorNotifys: ['SYSTEM', 'EMAIL'],
+//   inconsistentNotifys: ['SYSTEM', 'EMAIL'],
+//   checkTableThreadNum: 10,
+//   alarmSettings: [
+//     {
+//       type: 'INSPECT',
+//       key: 'INSPECT_TASK_ERROR',
+//       notify: ['SYSTEM', 'EMAIL'],
+//       open: true,
+//     },
+//     {
+//       type: 'INSPECT',
+//       key: 'INSPECT_COUNT_ERROR',
+//       notify: ['SYSTEM', 'EMAIL'],
+//       open: true,
+//       params: {
+//         maxDifferentialRows: 0,
+//       },
+//     },
+//     {
+//       type: 'INSPECT',
+//       key: 'INSPECT_VALUE_ERROR',
+//       notify: ['SYSTEM', 'EMAIL'],
+//       open: true,
+//       params: {
+//         maxDifferentialValues: 0,
+//       },
+//     },
+//   ],
+// })
+
+const requiredValidator = (msg: string, check?: () => boolean) => {
+  return (rule: any, value: any, callback: any) => {
+    const valid = check ? check() : true
+    if (valid && !value) {
+      callback(new Error(msg))
+    } else {
+      callback()
     }
-  },
-  computed: {
-    saveDisabled() {
-      return (
-        this.errorMessageLevel === 'error' ||
-        this.autoAddTableLoading ||
-        this.loading
-      )
+  }
+}
+
+const checkMode = () => {
+  return form.value.mode === 'cron'
+}
+
+const rules = ref({
+  flowId: [
+    {
+      validator: requiredValidator(
+        i18n.t('packages_business_verification_tasksDataFlow'),
+      ),
     },
-    isCountOrHash() {
-      return (
-        this.form.inspectMethod === 'row_count' ||
-        this.form.inspectMethod === 'hash'
-      )
+  ],
+  name: [
+    {
+      validator: requiredValidator(
+        i18n.t('packages_business_verification_tasksJobName'),
+      ),
     },
-  },
-  created() {
-    // 设置form.taskMode
-    const taskMode = this.$route.query.taskMode
-    if (taskMode) {
-      this.form.taskMode = taskMode
-    }
+  ],
+  'timing.start': [
+    {
+      validator: requiredValidator(
+        i18n.t('packages_business_verification_tasksTime'),
+        checkMode,
+      ),
+    },
+  ],
+  'timing.intervals': [
+    {
+      validator: requiredValidator(
+        i18n.t('packages_business_verification_tasksVerifyInterval'),
+        checkMode,
+      ),
+    },
+  ],
+  cdcBeginDate: [
+    {
+      validator: requiredValidator(
+        i18n.t('packages_business_verification_form_qingshurukaishi'),
+        () => {
+          return form.value.inspectMethod === 'cdcCount'
+        },
+      ),
+    },
+  ],
+})
+
+const edges = ref([])
+const allStages = ref([])
+const typTipMap = ref({
+  row_count: i18n.t('packages_business_verification_fastCountTip'),
+  field: i18n.t('packages_business_verification_contentVerifyTip'),
+  jointField: i18n.t('packages_business_verification_jointFieldTip'),
+})
+const jointErrorMessage = ref('')
+const errorMessageLevel = ref('')
+const autoAddTableLoading = ref(false)
+const taskOptionCache = ref(null)
+const baseForm = ref(null)
+const conditionBox = ref(null)
+
+const saveDisabled = computed(() => {
+  return (
+    errorMessageLevel.value === 'error' ||
+    autoAddTableLoading.value ||
+    loading.value
+  )
+})
+
+const isCountOrHash = computed(() => {
+  return (
+    form.value.inspectMethod === 'row_count' ||
+    form.value.inspectMethod === 'hash'
+  )
+})
+
+onMounted(() => {
+  // 设置form.taskMode
+  const taskMode = route.query.taskMode
+  if (taskMode) {
+    form.value.taskMode = taskMode
+  }
 
-    const id = this.$route.params.id
-    if (id) {
-      this.getData(id)
+  const id = route.params.id
+  if (id) {
+    getData(id)
+  }
+})
+
+const getTaskOptions = async (filter: any) => {
+  let data
+
+  if (filter.where?.id) {
+    return {
+      items: [
+        {
+          id: filter.where.id,
+          name: taskName.value,
+        },
+      ],
+      total: 1,
     }
-  },
-  methods: {
-    async getTaskOptions(filter) {
-      let data
-
-      if (filter.where?.id) {
-        return {
-          items: [
-            {
-              id: filter.where.id,
-              name: this.taskName,
-            },
-          ],
-          total: 1,
-        }
-      }
+  }
 
-      if (!this.taskOptionCache) {
-        this.taskOptionCache = await inspectApi.getTaskList()
-      }
+  if (!taskOptionCache.value) {
+    taskOptionCache.value = await inspectApi.getTaskList()
+  }
 
-      data = this.taskOptionCache || []
+  data = taskOptionCache.value || []
 
-      let query = filter?.where?.name
-      query = typeof query === 'object' ? query.like : query
-      if (query) {
-        query = query.toLowerCase()
-        const reg = new RegExp(query, 'i')
-        data = data.filter((item) => reg.test(item.name))
-      }
+  let query = filter?.where?.name
+  query = typeof query === 'object' ? query.like : query
+  if (query) {
+    query = query.toLowerCase()
+    const reg = new RegExp(query, 'i')
+    data = data.filter((item) => reg.test(item.name))
+  }
+
+  return {
+    items: data,
+    total: data.length,
+  }
+}
 
-      return {
-        items: data,
-        total: data.length,
+const getData = async (id: string) => {
+  try {
+    const data = await inspectApi.findOne({
+      filter: JSON.stringify({
+        where: {
+          id,
+        },
+      }),
+    })
+
+    if (data) {
+      if (form.value.taskMode === 'pipeline' && data.flowId) {
+        taskName.value = data.taskDto.name
+        applyTask(data.taskDto)
       }
-    },
-    //获取表单数据
-    async getData(id) {
-      try {
-        const data = await inspectApi.findOne({
-          filter: JSON.stringify({
-            where: {
-              id,
-            },
-          }),
-        })
 
-        if (data) {
-          if (this.form.taskMode === 'pipeline' && data.flowId) {
-            this.taskName = data.taskDto.name
-            this.applyTask(data.taskDto)
-          }
-
-          // 任务一致性/任意表 都走异步获取 capabilities/tags
-          const capabilitiesMap = await this.$refs.conditionBox.getCapabilities(
-            [
-              ...new Set([
-                ...data.tasks.map((t) => t.source.connectionId),
-                ...data.tasks.map((t) => t.target.connectionId),
-              ]),
-            ],
-          )
-
-          data.tasks = data.tasks.map((t) => {
-            t.source = Object.assign({}, TABLE_PARAMS, t.source)
-            t.target = Object.assign({}, TABLE_PARAMS, t.target)
-            t.source.capabilities =
-              capabilitiesMap[t.source.connectionId]?.capabilities || []
-            t.target.capabilities =
-              capabilitiesMap[t.target.connectionId]?.capabilities || []
-            if (t.source.nodeId) {
-              t.source.currentLabel = `${t.source.nodeName} / ${t.source.connectionName}`
-              t.target.currentLabel = `${t.target.nodeName} / ${t.target.connectionName}`
-            }
-            t.id = t.taskId
-            return t
-          })
-
-          if (!data.timing) {
-            data.timing = this.form.timing
-          }
-          data.taskMode = data.flowId ? 'pipeline' : 'random'
-          // 历史数据，默认不打开；新数据默认打开
-          const { alarmSettings = [] } = data
-          data.alarmSettings =
-            this.form.alarmSettings?.map((t) => {
-              const f = alarmSettings.find((item) => item.key === t.key)
-              if (f) return Object.assign(t, f)
-              t.notify = []
-              t.open = false
-              return t
-            }) || []
-
-          this.form = Object.assign({}, this.form, data)
+      // 任务一致性/任意表 都走异步获取 capabilities/tags
+      const capabilitiesMap = await conditionBox.value.getCapabilities([
+        ...new Set([
+          ...data.tasks.map((t) => t.source.connectionId),
+          ...data.tasks.map((t) => t.target.connectionId),
+        ]),
+      ])
+
+      data.tasks = data.tasks.map((t) => {
+        t.source = Object.assign({}, TABLE_PARAMS, t.source)
+        t.target = Object.assign({}, TABLE_PARAMS, t.target)
+        t.source.capabilities =
+          capabilitiesMap[t.source.connectionId]?.capabilities || []
+        t.target.capabilities =
+          capabilitiesMap[t.target.connectionId]?.capabilities || []
+        if (t.source.nodeId) {
+          t.source.currentLabel = `${t.source.nodeName} / ${t.source.connectionName}`
+          t.target.currentLabel = `${t.target.nodeName} / ${t.target.connectionName}`
         }
-      } catch (error) {
-        console.error(error)
+        t.id = t.taskId
+        return t
+      })
+
+      if (!data.timing) {
+        data.timing = form.value.timing
       }
-    },
-    async getFlowStages(id, cb) {
-      this.loading = true
-      try {
-        id = id || this.form.flowId
-        const data = await taskApi.getId(id)
-        this.loading = false
-        this.applyTask(data, cb)
-      } catch {
-        this.loading = false
+      data.taskMode = data.flowId ? 'pipeline' : 'random'
+      // 历史数据，默认不打开；新数据默认打开
+      const { alarmSettings = [] } = data
+      data.alarmSettings =
+        form.value.alarmSettings?.map((t) => {
+          const f = alarmSettings.find((item) => item.key === t.key)
+          if (f) return Object.assign(t, f)
+          t.notify = []
+          t.open = false
+          return t
+        }) || []
+
+      form.value = Object.assign({}, form.value, data)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const getFlowStages = async (id: string, cb?: () => void) => {
+  loading.value = true
+  try {
+    id = id || form.value.flowId
+    const data = await taskApi.getId(id)
+    loading.value = false
+    applyTask(data, cb)
+  } catch {
+    loading.value = false
+  }
+}
+
+const applyTask = (task: any, cb?: () => void) => {
+  isDbClone.value = task.syncType === 'migrate'
+  const dagEdges = task.dag?.edges || []
+  const nodes = task.dag?.nodes || []
+
+  if (!dagEdges.length) {
+    if (cb) {
+      setTimeout(() => {
+        cb()
+        loading.value = false
+      }, 800)
+    } else {
+      loading.value = false
+    }
+    return { items: [], total: 0 }
+  }
+  const stages = []
+  nodes.forEach((n) => {
+    const outputLanes = []
+    const inputLanes = []
+    dagEdges.forEach((e) => {
+      if (e.source === n.id) {
+        outputLanes.push(e.target)
       }
-    },
-    applyTask(task, cb) {
-      this.isDbClone = task.syncType === 'migrate'
-      const edges = task.dag?.edges || []
-      const nodes = task.dag?.nodes || []
-
-      if (!edges.length) {
-        if (cb) {
-          setTimeout(() => {
-            cb()
-            this.loading = false
-          }, 800)
-        } else {
-          this.loading = false
-        }
-        return { items: [], total: 0 }
+      if (e.target === n.id) {
+        inputLanes.push(e.source)
       }
-      const stages = []
-      nodes.forEach((n) => {
-        const outputLanes = []
-        const inputLanes = []
-        edges.forEach((e) => {
-          if (e.source === n.id) {
-            outputLanes.push(e.target)
-          }
-          if (e.target === n.id) {
-            inputLanes.push(e.source)
-          }
-        })
-        stages.push(
-          Object.assign({}, n, {
-            outputLanes,
-            inputLanes,
-          }),
-        )
-      })
+    })
+    stages.push(
+      Object.assign({}, n, {
+        outputLanes,
+        inputLanes,
+      }),
+    )
+  })
 
-      this.edges = edges
-      this.allStages = stages
+  edges.value = dagEdges
+  allStages.value = stages
 
-      if (cb) {
-        setTimeout(() => {
-          cb()
-          this.loading = false
-        }, 800)
-      }
-    },
+  if (cb) {
+    setTimeout(() => {
+      cb()
+      loading.value = false
+    }, 800)
+  }
+}
 
-    timingChangeHandler(times) {
-      this.form.timing.start = times?.[0] || ''
-      this.form.timing.end = times?.[1] || ''
-    },
-    goBack() {
-      this.$confirm(
-        this.$t('packages_business_verification_backConfirmMessage'),
-        this.$t('packages_business_verification_backConfirmTitle'),
-        {
-          type: 'warning',
-        },
-      ).then((resFlag) => {
-        if (!resFlag) {
-          return
-        }
-        this.$router.back()
-      })
+const timingChangeHandler = (times: any) => {
+  form.value.timing.start = times?.[0] || ''
+  form.value.timing.end = times?.[1] || ''
+}
+
+const goBack = () => {
+  ElMessageBox.confirm(
+    i18n.t('packages_business_verification_backConfirmMessage'),
+    i18n.t('packages_business_verification_backConfirmTitle'),
+    {
+      type: 'warning',
     },
-    save(saveOnly = false) {
-      this.$refs.baseForm.validate(async (valid) => {
-        if (valid) {
-          let tasks = this.$refs.conditionBox.getList()
-          // 自动过滤出完整数据，以及索引字段数量不相等的情况
-          tasks = tasks.filter((t) => {
-            if (
-              this.form.inspectMethod === 'row_count' ||
-              this.form.inspectMethod === 'hash'
-            ) {
-              return t.source.table && t.target.table
-            }
-            return (
-              t.source.sortColumn &&
-              t.source.sortColumn.split(',').length ===
-                t.target.sortColumn.split(',').length
-            )
-          })
-
-          if (!tasks.length) {
-            return this.$message.error(
-              this.$t('packages_business_verification_tasksVerifyCondition'),
-            )
-          }
-          const validateMsg = await this.$refs.conditionBox.validate()
-          if (validateMsg) {
-            return this.$message.error(validateMsg)
-          }
-
-          if (this.form.inspectMethod === 'jointField') {
-            tasks.forEach((item) => {
-              item.fullMatch = false
-            })
-          } else {
-            tasks.forEach((item) => {
-              item.fullMatch = true
-            })
-          }
-          if (this.form && this.form.createTime && this.form.last_updated) {
-            delete this.form.createTime
-            delete this.form.last_updated
-          }
-
-          const alarmSettingsKeys =
-            this.form.inspectMethod === 'row_count'
-              ? ['INSPECT_TASK_ERROR', 'INSPECT_COUNT_ERROR']
-              : ['INSPECT_TASK_ERROR', 'INSPECT_VALUE_ERROR']
-          const alarmSettings = this.form.alarmSettings.filter((t) =>
-            alarmSettingsKeys.includes(t.key),
-          )
-
-          inspectApi[this.form.id ? 'patch' : 'post'](
-            Object.assign({}, this.form, {
-              fullMatchKeep: this.form.keep,
-              status: saveOnly ? 'waiting' : 'scheduling',
-              ping_time: 0,
-              tasks: tasks.map(
-                ({
-                  taskId,
-                  source,
-                  target,
-                  fullMatch,
-                  showAdvancedVerification,
-                  script,
-                  webScript,
-                  jsEngineName,
-                }) => {
-                  if (webScript && webScript !== '') {
-                    script = `function validate(sourceRow){${webScript}}`
-                  }
-                  const newSource = cloneDeep(source)
-                  const newTarget = cloneDeep(target)
-                  newSource.fields = []
-                  newTarget.fields = []
-                  newSource.capabilities = []
-                  newTarget.capabilities = []
-                  return {
-                    taskId,
-                    source: newSource,
-                    target: newTarget,
-                    fullMatch,
-                    showAdvancedVerification,
-                    script,
-                    webScript,
-                    jsEngineName,
-                  }
-                },
-              ),
-              platformInfo: {
-                agentType: 'private',
-              },
-              byFirstCheckId: '',
-              browserTimezoneOffset: new Date().getTimezoneOffset(),
-              alarmSettings,
-            }),
-          ).then(() => {
-            this.$message.success(this.$t('public_message_save_ok'))
-            this.$router.back() // back 保留上个路由的参数
-          })
+  ).then((resFlag) => {
+    if (!resFlag) {
+      return
+    }
+    router.back()
+  })
+}
+
+const save = async (saveOnly = false) => {
+  await baseForm.value.validate(async (valid: boolean) => {
+    if (valid) {
+      let tasks = conditionBox.value.getList()
+      // 自动过滤出完整数据，以及索引字段数量不相等的情况
+      tasks = tasks.filter((t) => {
+        if (
+          form.value.inspectMethod === 'row_count' ||
+          form.value.inspectMethod === 'hash'
+        ) {
+          return t.source.table && t.target.table
         }
+        return (
+          t.source.sortColumn &&
+          t.source.sortColumn.split(',').length ===
+            t.target.sortColumn.split(',').length
+        )
       })
-    },
-
-    handleChangeAlarmItem() {
-      this.form.alarmSettings[0].open =
-        !!this.form.alarmSettings[0].notify.length
-      this.form.alarmSettings[1].open =
-        !!this.form.alarmSettings[1].notify.length
-      this.form.alarmSettings[2].open =
-        !!this.form.alarmSettings[2].notify.length
-    },
 
-    handleChangeAlarm(val, index = 0) {
-      this.form.alarmSettings[index].notify = val ? ['SYSTEM', 'EMAIL'] : []
-    },
+      if (!tasks.length) {
+        return ElMessage.error(
+          i18n.t('packages_business_verification_tasksVerifyCondition'),
+        )
+      }
+      const validateMsg = await conditionBox.value.validate()
+      if (validateMsg) {
+        return ElMessage.error(validateMsg)
+      }
 
-    handleChangeInspectMethod() {
-      this.setVerifyName()
-      this.handleChangeAlarm(true, 0)
-      this.handleChangeAlarm(true, 1)
-      this.handleChangeAlarm(true, 2)
-      this.handleChangeAlarmItem()
-      this.$refs.conditionBox.validate()
-    },
-    setVerifyName() {
-      // 任务模式
-      if (this.form.taskMode === 'pipeline') {
-        this.form.name = `${this.taskName} - ${this.inspectMethodMap[this.form.inspectMethod]}`
+      if (form.value.inspectMethod === 'jointField') {
+        tasks.forEach((item) => {
+          item.fullMatch = false
+        })
+      } else {
+        tasks.forEach((item) => {
+          item.fullMatch = true
+        })
       }
-    },
-    handleSelectTask(task, byClick) {
-      if (byClick) {
-        this.form.tasks = []
-        this.taskName = task.name
-        this.setVerifyName()
-        this.getFlowStages(task.id, this.$refs.conditionBox.autoAddTable)
+      if (form.value && form.value.createTime && form.value.last_updated) {
+        delete form.value.createTime
+        delete form.value.last_updated
       }
-    },
-  },
+
+      const alarmSettingsKeys =
+        form.value.inspectMethod === 'row_count'
+          ? ['INSPECT_TASK_ERROR', 'INSPECT_COUNT_ERROR']
+          : ['INSPECT_TASK_ERROR', 'INSPECT_VALUE_ERROR']
+      const alarmSettings = form.value.alarmSettings.filter((t) =>
+        alarmSettingsKeys.includes(t.key),
+      )
+
+      await inspectApi[form.value.id ? 'patch' : 'post'](
+        Object.assign({}, form.value, {
+          fullMatchKeep: form.value.keep,
+          status: saveOnly ? 'waiting' : 'scheduling',
+          ping_time: 0,
+          tasks: tasks.map(
+            ({
+              taskId,
+              source,
+              target,
+              fullMatch,
+              showAdvancedVerification,
+              script,
+              webScript,
+              jsEngineName,
+            }) => {
+              if (webScript && webScript !== '') {
+                script = `function validate(sourceRow){${webScript}}`
+              }
+              const newSource = cloneDeep(source)
+              const newTarget = cloneDeep(target)
+              newSource.fields = []
+              newTarget.fields = []
+              newSource.capabilities = []
+              newTarget.capabilities = []
+              return {
+                taskId,
+                source: newSource,
+                target: newTarget,
+                fullMatch,
+                showAdvancedVerification,
+                script,
+                webScript,
+                jsEngineName,
+              }
+            },
+          ),
+          platformInfo: {
+            agentType: 'private',
+          },
+          byFirstCheckId: '',
+          browserTimezoneOffset: new Date().getTimezoneOffset(),
+          alarmSettings,
+        }),
+      )
+      ElMessage.success(i18n.t('public_message_save_ok'))
+      router.back() // back 保留上个路由的参数
+    }
+  })
+}
+
+const handleChangeAlarmItem = () => {
+  form.value.alarmSettings[0].open = !!form.value.alarmSettings[0].notify.length
+  form.value.alarmSettings[1].open = !!form.value.alarmSettings[1].notify.length
+  form.value.alarmSettings[2].open = !!form.value.alarmSettings[2].notify.length
 }
+
+const handleChangeAlarm = (val: boolean, index = 0) => {
+  form.value.alarmSettings[index].notify = val ? ['SYSTEM', 'EMAIL'] : []
+}
+
+const handleChangeInspectMethod = () => {
+  setVerifyName()
+  handleChangeAlarm(true, 0)
+  handleChangeAlarm(true, 1)
+  handleChangeAlarm(true, 2)
+  handleChangeAlarmItem()
+  conditionBox.value.validate()
+}
+
+const setVerifyName = () => {
+  // 任务模式
+  if (form.value.taskMode === 'pipeline') {
+    form.value.name = `${taskName.value} - ${inspectMethodMap[form.value.inspectMethod]}`
+  }
+}
+
+const handleSelectTask = (task: any, byClick: boolean) => {
+  if (byClick) {
+    form.value.tasks = []
+    taskName.value = task.name
+    setVerifyName()
+    getFlowStages(task.id, conditionBox.value.autoAddTable)
+  }
+}
+
+console.log('form', form, formObs)
 </script>
 
 <template>
   <PageContainer mode="auto">
     <section v-loading="loading">
       <div>
+        <ElInput
+          v-model="form.name"
+          class="form-input"
+          @change="handleChangeName"
+        />
         <ElForm
           ref="baseForm"
           class="grey"
@@ -508,6 +628,7 @@ export default {
             prop="flowId"
             :label="`${$t('packages_business_verification_chooseJob')}: `"
           >
+            {{ form.flowId }}
             <AsyncSelect
               v-model="form.flowId"
               class="form-item-width"
@@ -566,7 +687,7 @@ export default {
           </ElFormItem>
 
           <ElCollapse
-            class="collapse-fill db-list-container"
+            class="collapse-fill db-list-container only-one"
             accordion
             style="--collapse-padding-primary: 0"
           >
@@ -961,9 +1082,6 @@ export default {
       />
       <div class="mt-4">
         <ElButton @click="goBack()">{{ $t('public_button_back') }}</ElButton>
-        <!--        <ElButton type="primary"  @click="save()">{{-->
-        <!--          $t('public_button_save') + ' & ' + $t('public_button_execute')-->
-        <!--        }}</ElButton>-->
         <ElButton type="primary" :disabled="saveDisabled" @click="save(true)"
           >{{ $t('public_button_save') }}
         </ElButton>
@@ -973,9 +1091,15 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.only-one.el-collapse {
+  :deep(.el-collapse-item.is-active) {
+    .el-collapse-item__wrap {
+      border-bottom: none;
+    }
+  }
+}
 .verify-form-wrap {
   height: 100%;
-  //padding: 0 24px 24px 24px;
   overflow: hidden;
 
   .section-wrap-box {
diff --git a/packages/business/src/views/verification/components/ConditionBox.vue b/packages/business/src/views/verification/components/ConditionBox.vue
index 6c1120370e..61f4ac601e 100644
--- a/packages/business/src/views/verification/components/ConditionBox.vue
+++ b/packages/business/src/views/verification/components/ConditionBox.vue
@@ -1,13 +1,13 @@
-<script>
+<script setup lang="ts">
 import { action } from '@formily/reactive'
 import { connectionsApi, metadataInstancesApi } from '@tap/api'
 import { GitBook, VCodeEditor } from '@tap/component'
 import resize from '@tap/component/src/directives/resize'
-
 import SwitchNumber from '@tap/component/src/SwitchNumber.vue'
 import { AsyncSelect, SchemaToForm } from '@tap/form'
 import i18n from '@tap/i18n'
 import { uuid } from '@tap/shared'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   cloneDeep,
   debounce,
@@ -16,8 +16,8 @@ import {
   merge,
   uniqBy,
 } from 'lodash-es'
+import { computed, defineExpose, onMounted, reactive, ref, watch } from 'vue'
 import { $emit } from '../../../../utils/gogocodeTransfer'
-
 import { CONNECTION_STATUS_MAP } from '../../../shared'
 import { inspectMethod as inspectMethodMap } from '../const'
 import CollateMap from './CollateMap.vue'
@@ -25,1878 +25,1296 @@ import { DATA_NODE_TYPES, META_INSTANCE_FIELDS, TABLE_PARAMS } from './const'
 import DocsDrawer from './DocsDrawer.vue'
 import FieldDialog from './FieldDialog'
 import FieldSelectWrap from './FieldSelectWrap.vue'
-export default {
-  name: 'ConditionBox',
-  components: {
-    DocsDrawer,
-    AsyncSelect,
-    VCodeEditor,
-    GitBook,
-    FieldDialog,
-    SchemaToForm,
-    ElIconArrowRight,
-    FieldSelectWrap,
-    CollateMap,
-    SwitchNumber,
-  },
-  directives: {
-    resize,
-  },
-  props: {
-    taskId: String,
-    isDB: Boolean,
-    inspectMethod: String,
-    data: {
-      type: Array,
-      default: () => [],
-    },
-    allStages: {
-      type: Array,
-      default: () => [],
-    },
-    edges: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      showDoc: false,
-      docPath: '',
-      list: [],
-      jointErrorMessage: '',
-      fieldsMap: {},
-      capabilitiesMap: {},
-      autoAddTableLoading: false,
-      dynamicSchemaMap: {},
-      dialogAddScriptVisible: false,
-      formIndex: '',
-      webScript: '',
-      jsEngineName: 'graal.js',
-      doc: '',
-      schemaData: null,
-      // Add pagination properties
-      currentPage: 1,
-      pageSize: 10,
-      schemaScope: {
-        $supportFilterFunction:
-          this.inspectMethod === 'row_count'
-            ? 'count_by_partition_filter_function'
-            : 'query_by_advance_filter_function',
-        useAsyncDataSource: (
-          service,
-          fieldName = 'dataSource',
-          ...serviceParams
-        ) => {
-          return (field) => {
-            field.loading = true
-            service({ field }, ...serviceParams).then(
-              action.bound((data) => {
-                if (fieldName === 'value') {
-                  field.setValue(data)
-                } else field[fieldName] = data
-                field.loading = false
-              }),
-            )
-          }
-        },
-        async loadTableFieldList(obj, item) {
-          try {
-            if (!item.connectionId || !item.table) return []
-            let fields = item.fields
-            if (!fields?.length) {
-              const params = {
-                where: {
-                  meta_type: 'table',
-                  sourceType: 'SOURCE',
-                  original_name: item.table,
-                  'source._id': item.connectionId,
-                },
-                limit: 1,
-              }
-              const data = await metadataInstancesApi.tapTables({
-                filter: JSON.stringify(params),
-              })
-              fields = Object.values(data.items[0]?.nameFieldMap || {}).map(
-                (t) => {
-                  return {
-                    id: t.id,
-                    label: t.fieldName || t.field_name,
-                    value: t.fieldName || t.field_name,
-                    field_name: t.fieldName || t.field_name,
-                    primary_key_position: t.primaryKey,
-                    data_type: t.dataType || t.data_type,
-                    primaryKey: t.primaryKey,
-                    unique: t.unique,
-                    type: t.dataType || t.data_type,
-                    tapType: JSON.stringify(t.tapType),
-                  }
-                },
-              )
-            }
-            const result = fields
-            if (result.length) {
-              item.fields = result
-            }
 
-            return result
-          } catch {
-            return []
-          }
-        },
-        openApiDrawer: (path) => {
-          this.docPath = isString(path) ? path : ''
-          this.showDoc = true
-        },
-      },
-      formSchema: {
-        type: 'object',
-        properties: {
-          nameWrap: {
-            type: 'void',
-            'x-component': 'FormGrid',
-            'x-component-props': {
-              minColumns: 2,
-              maxColumns: 2,
-              columnGap: 16,
-            },
-            properties: {
-              source: {
-                type: 'object',
-                'x-component': 'FormGrid.GridColumn',
-                properties: {
-                  databaseType: {
-                    type: 'string',
-                    'x-display': 'hidden',
-                  },
-                  nodeSchema: {
-                    type: 'array',
-                    'x-display': 'hidden',
-                    'x-reactions': [
-                      `{{useAsyncDataSource(loadTableFieldList, 'value', $values.source)}}`,
-                      {
-                        target: 'source.conditions.*.key',
-                        fulfill: {
-                          state: {
-                            loading: '{{$self.loading}}',
-                            dataSource: '{{$self.value}}',
-                          },
-                        },
-                      },
-                    ],
-                  },
-                  enableCustomCommand: {
-                    title: i18n.t(
-                      'packages_business_components_conditionbox_laiyuanbiaoshuju',
-                    ),
-                    type: 'boolean',
-                    'x-decorator': 'FormItem',
-                    'x-decorator-props': {
-                      className: 'item-control-horizontal',
-                      layout: 'horizontal',
-                      tooltip: i18n.t(
-                        'packages_business_components_conditionbox_enableCustomCommand_tip',
-                      ),
-                    },
-                    'x-component': 'Switch',
-                    default: false,
-                    'x-reactions': [
-                      {
-                        fulfill: {
-                          state: {
-                            visible: `{{$values.source.capabilities && $values.source.capabilities.some(item => item.id === 'execute_command_function')}}`,
-                          },
-                        },
-                      },
-                    ],
-                  },
-                  customCommand: {
-                    type: 'object',
-                    properties: {
-                      command: {
-                        title: ' ',
-                        'x-decorator-props': {
-                          colon: false,
-                        },
-                        type: 'string',
-                        default: 'executeQuery',
-                        'x-decorator': 'FormItem',
-                        'x-component': 'Radio.Group',
-                        enum: [
-                          {
-                            label: i18n.t('public_query'),
-                            value: 'executeQuery',
-                          },
-                          {
-                            label: i18n.t('public_aggregate'),
-                            value: 'aggregate',
-                          },
-                        ],
-                        'x-reactions': {
-                          dependencies: ['source.databaseType'],
-                          fulfill: {
-                            state: {
-                              display:
-                                '{{$deps[0].toLowerCase().includes("mongo")?"visible":"hidden"}}',
-                            },
-                          },
-                        },
-                      },
-                      params: {
-                        type: 'object',
-                        properties: {
-                          mongoQuery: {
-                            title: ' ',
-                            'x-decorator-props': {
-                              colon: false,
-                            },
-                            type: 'void',
-                            'x-reactions': {
-                              dependencies: [
-                                'source.customCommand.command',
-                                'source.databaseType',
-                              ],
-                              fulfill: {
-                                state: {
-                                  visible:
-                                    '{{$deps[1].toLowerCase().includes("mongo") && $deps[0]==="executeQuery"}}',
-                                },
-                              },
-                            },
-                            properties: {
-                              op: {
-                                type: 'string',
-                                default: 'find',
-                              },
-                              collection: {
-                                type: 'string',
-                                'x-reactions': {
-                                  fulfill: {
-                                    state: {
-                                      value: '{{$values.tableName}}',
-                                    },
-                                  },
-                                },
-                              },
-                              filter: {
-                                title: ' ',
-                                'x-decorator-props': {
-                                  colon: false,
-                                  feedbackLayout: 'none',
-                                },
-                                type: 'string',
-                                'x-decorator': 'FormItem',
-                                'x-component': 'JsonEditor',
-                                'x-component-props': {
-                                  options: {
-                                    showPrintMargin: false,
-                                    useWrapMode: true,
-                                  },
-                                },
-                              },
-                              descWrap: {
-                                type: 'void',
-                                title: ' ',
-                                'x-decorator': 'FormItem',
-                                'x-decorator-props': {
-                                  colon: false,
-                                  feedbackLayout: 'none',
-                                },
-                                'x-component': 'div',
-                                'x-component-props': {
-                                  class: 'flex align-center gap-2',
-                                },
-                                properties: {
-                                  desc: {
-                                    type: 'void',
-                                    'x-component': 'div',
-                                    'x-component-props': {
-                                      style: {
-                                        color: '#909399',
-                                      },
-                                    },
-                                    'x-content': i18n.t(
-                                      'packages_dag_nodes_table_jinzhichiqu',
-                                    ),
-                                  },
-                                  link: {
-                                    type: 'void',
-                                    'x-component': 'Link',
-                                    'x-component-props': {
-                                      type: 'primary',
-                                      onClick: '{{openApiDrawer}}',
-                                    },
-                                    'x-content': i18n.t(
-                                      'packages_business_view_more_apis',
-                                    ),
-                                  },
-                                },
-                              },
-                            },
-                          },
-                          mongoAgg: {
-                            title: ' ',
-                            'x-decorator-props': {
-                              colon: false,
-                            },
-                            type: 'void',
-                            'x-reactions': {
-                              dependencies: [
-                                'source.customCommand.command',
-                                'source.databaseType',
-                              ],
-                              fulfill: {
-                                state: {
-                                  visible:
-                                    '{{$deps[1].toLowerCase().includes("mongo") && $deps[0]==="aggregate"}}',
-                                },
-                              },
-                            },
-                            properties: {
-                              collection: {
-                                type: 'string',
-                                'x-reactions': {
-                                  dependencies: ['source.tableName'],
-                                  fulfill: {
-                                    state: {
-                                      value: '{{$deps[0]}}',
-                                    },
-                                  },
-                                },
-                              },
-                              pipeline: {
-                                type: 'string',
-                                title: ' ',
-                                'x-decorator-props': {
-                                  colon: false,
-                                  feedbackLayout: 'none',
-                                },
-                                'x-decorator': 'FormItem',
-                                'x-component': 'JsonEditor',
-                                'x-component-props': {
-                                  options: {
-                                    showPrintMargin: false,
-                                    useWrapMode: true,
-                                  },
-                                },
-                              },
-                              descWrap: {
-                                type: 'void',
-                                title: ' ',
-                                'x-decorator': 'FormItem',
-                                'x-decorator-props': {
-                                  colon: false,
-                                  feedbackLayout: 'none',
-                                },
-                                'x-component': 'div',
-                                'x-component-props': {
-                                  class: 'flex align-center gap-2',
-                                },
-                                properties: {
-                                  desc: {
-                                    type: 'void',
-                                    'x-component': 'div',
-                                    'x-component-props': {
-                                      style: {
-                                        color: '#909399',
-                                      },
-                                    },
-                                    'x-content': i18n.t(
-                                      'packages_dag_nodes_table_shiligro',
-                                    ),
-                                  },
-                                  link: {
-                                    type: 'void',
-                                    'x-component': 'Link',
-                                    'x-component-props': {
-                                      type: 'primary',
-                                      onClick: '{{openApiDrawer}}',
-                                    },
-                                    'x-content': i18n.t(
-                                      'packages_business_view_more_apis',
-                                    ),
-                                  },
-                                },
-                              },
-                            },
-                          },
-                          sql: {
-                            title: ' ',
-                            'x-decorator-props': {
-                              colon: false,
-                            },
-                            type: 'string',
-                            'x-decorator': 'FormItem',
-                            'x-component': 'SqlEditor',
-                            'x-component-props': {
-                              options: {
-                                showPrintMargin: false,
-                                useWrapMode: true,
-                              },
-                            },
-                            'x-reactions': {
-                              dependencies: [
-                                'source.enableCustomCommand',
-                                'source.databaseType',
-                              ],
-                              fulfill: {
-                                state: {
-                                  visible:
-                                    '{{!!$deps[0] && !$deps[1].toLowerCase().includes("mongo")}}',
-                                },
-                              },
-                            },
-                          },
-                        },
-                      },
-                    },
-                    'x-reactions': [
-                      {
-                        dependencies: ['source.enableCustomCommand'],
-                        fulfill: {
-                          state: {
-                            visible: `{{$deps[0]}}`,
-                          },
-                        },
-                      },
-                    ],
-                  },
-                },
-              },
-              target: {
-                type: 'object',
-                'x-component': 'FormGrid.GridColumn',
-                properties: {
-                  databaseType: {
-                    type: 'string',
-                    'x-display': 'hidden',
-                  },
-                  nodeSchema: {
-                    type: 'array',
-                    'x-display': 'hidden',
-                    'x-reactions': [
-                      `{{useAsyncDataSource(loadTableFieldList, 'value', $values.target)}}`,
-                      {
-                        target: 'target.conditions.*.key',
-                        fulfill: {
-                          state: {
-                            loading: '{{$self.loading}}',
-                            dataSource: '{{$self.value}}',
-                          },
-                        },
-                      },
-                    ],
-                  },
-                  enableCustomCommand: {
-                    title: i18n.t(
-                      'packages_business_components_conditionbox_mubiaobiaoshuju',
-                    ),
-                    type: 'boolean',
-                    'x-decorator': 'FormItem',
-                    'x-decorator-props': {
-                      className: 'item-control-horizontal',
-                      layout: 'horizontal',
-                      labelWrap: true,
-                      tooltip: i18n.t(
-                        'packages_business_components_conditionbox_enableCustomCommand_tip',
-                      ),
-                    },
-                    'x-component': 'Switch',
-                    default: false,
-                    'x-reactions': [
-                      {
-                        fulfill: {
-                          state: {
-                            visible: `{{$values.target.capabilities && $values.target.capabilities.some(item => item.id === 'execute_command_function')}}`,
-                          },
-                        },
-                      },
-                    ],
-                  },
-                  customCommand: {
-                    type: 'object',
-                    properties: {
-                      command: {
-                        title: ' ',
-                        'x-decorator-props': {
-                          colon: false,
-                        },
-                        type: 'string',
-                        default: 'executeQuery',
-                        'x-decorator': 'FormItem',
-                        'x-component': 'Radio.Group',
-                        enum: [
-                          {
-                            label: i18n.t('public_query'),
-                            value: 'executeQuery',
-                          },
-                          {
-                            label: i18n.t('public_aggregate'),
-                            value: 'aggregate',
-                          },
-                        ],
-                        'x-reactions': {
-                          dependencies: ['target.databaseType'],
-                          fulfill: {
-                            state: {
-                              display:
-                                '{{$deps[0].toLowerCase().includes("mongo")?"visible":"hidden"}}',
-                            },
-                          },
-                        },
-                      },
-                      params: {
-                        type: 'object',
-                        properties: {
-                          mongoQuery: {
-                            title: ' ',
-                            'x-decorator-props': {
-                              colon: false,
-                            },
-                            type: 'void',
-                            'x-reactions': {
-                              dependencies: [
-                                'target.customCommand.command',
-                                'target.databaseType',
-                              ],
-                              fulfill: {
-                                state: {
-                                  visible:
-                                    '{{$deps[1].toLowerCase().includes("mongo") && $deps[0]==="executeQuery"}}',
-                                },
-                              },
-                            },
-                            properties: {
-                              op: {
-                                type: 'string',
-                                default: 'find',
-                              },
-                              collection: {
-                                type: 'string',
-                                'x-reactions': {
-                                  fulfill: {
-                                    state: {
-                                      value: '{{$values.tableName}}',
-                                    },
-                                  },
-                                },
-                              },
-                              filter: {
-                                title: ' ',
-                                'x-decorator-props': {
-                                  colon: false,
-                                  feedbackLayout: 'none',
-                                },
-                                type: 'string',
-                                'x-decorator': 'FormItem',
-                                'x-component': 'JsonEditor',
-                                'x-component-props': {
-                                  options: {
-                                    showPrintMargin: false,
-                                    useWrapMode: true,
-                                  },
-                                },
-                              },
-                              descWrap: {
-                                type: 'void',
-                                title: ' ',
-                                'x-decorator': 'FormItem',
-                                'x-decorator-props': {
-                                  colon: false,
-                                  feedbackLayout: 'none',
-                                },
-                                'x-component': 'div',
-                                'x-component-props': {
-                                  class: 'flex align-center gap-2',
-                                },
-                                properties: {
-                                  desc: {
-                                    type: 'void',
-                                    'x-component': 'div',
-                                    'x-component-props': {
-                                      style: {
-                                        color: '#909399',
-                                      },
-                                    },
-                                    'x-content': i18n.t(
-                                      'packages_dag_nodes_table_jinzhichiqu',
-                                    ),
-                                  },
-                                  link: {
-                                    type: 'void',
-                                    'x-component': 'Link',
-                                    'x-component-props': {
-                                      type: 'primary',
-                                      onClick: '{{openApiDrawer}}',
-                                    },
-                                    'x-content': i18n.t(
-                                      'packages_business_view_more_apis',
-                                    ),
-                                  },
-                                },
-                              },
-                            },
-                          },
-                          mongoAgg: {
-                            title: ' ',
-                            'x-decorator-props': {
-                              colon: false,
-                            },
-                            type: 'void',
-                            'x-reactions': {
-                              dependencies: [
-                                'target.customCommand.command',
-                                'target.databaseType',
-                              ],
-                              fulfill: {
-                                state: {
-                                  visible:
-                                    '{{$deps[1].toLowerCase().includes("mongo") && $deps[0]==="aggregate"}}',
-                                },
-                              },
-                            },
-                            properties: {
-                              collection: {
-                                type: 'string',
-                                'x-reactions': {
-                                  dependencies: ['target.tableName'],
-                                  fulfill: {
-                                    state: {
-                                      value: '{{$deps[0]}}',
-                                    },
-                                  },
-                                },
-                              },
-                              pipeline: {
-                                title: ' ',
-                                'x-decorator-props': {
-                                  colon: false,
-                                  feedbackLayout: 'none',
-                                },
-                                type: 'string',
-                                'x-decorator': 'FormItem',
-                                'x-component': 'JsonEditor',
-                                'x-component-props': {
-                                  options: {
-                                    showPrintMargin: false,
-                                    useWrapMode: true,
-                                  },
-                                },
-                              },
-                              descWrap: {
-                                type: 'void',
-                                title: ' ',
-                                'x-decorator': 'FormItem',
-                                'x-decorator-props': {
-                                  colon: false,
-                                  feedbackLayout: 'none',
-                                },
-                                'x-component': 'div',
-                                'x-component-props': {
-                                  class: 'flex align-center gap-2',
-                                },
-                                properties: {
-                                  desc: {
-                                    type: 'void',
-                                    'x-component': 'div',
-                                    'x-component-props': {
-                                      style: {
-                                        color: '#909399',
-                                      },
-                                    },
-                                    'x-content': i18n.t(
-                                      'packages_dag_nodes_table_shiligro',
-                                    ),
-                                  },
-                                  link: {
-                                    type: 'void',
-                                    'x-component': 'Link',
-                                    'x-component-props': {
-                                      type: 'primary',
-                                      onClick: '{{openApiDrawer}}',
-                                    },
-                                    'x-content': i18n.t(
-                                      'packages_business_view_more_apis',
-                                    ),
-                                  },
-                                },
-                              },
-                            },
-                          },
-                          sql: {
-                            title: ' ',
-                            'x-decorator-props': {
-                              colon: false,
-                            },
-                            type: 'string',
-                            'x-decorator': 'FormItem',
-                            'x-component': 'SqlEditor',
-                            'x-component-props': {
-                              options: {
-                                showPrintMargin: false,
-                                useWrapMode: true,
-                              },
-                            },
-                            'x-reactions': {
-                              dependencies: [
-                                'target.enableCustomCommand',
-                                'target.databaseType',
-                              ],
-                              fulfill: {
-                                state: {
-                                  visible:
-                                    '{{!!$deps[0] && !$deps[1].toLowerCase().includes("mongo")}}',
-                                },
-                              },
-                            },
-                          },
-                        },
-                      },
-                    },
-                    'x-reactions': [
-                      {
-                        dependencies: ['target.enableCustomCommand'],
-                        fulfill: {
-                          state: {
-                            visible: `{{$deps[0]}}`,
-                          },
-                        },
-                      },
-                    ],
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-      autoSuggestJoinFields: true,
-      searchValue: '',
-    }
-  },
-  computed: {
-    flowStages() {
-      const types = this.isDB ? ['database'] : ['table']
-      return this.allStages.filter((stg) => types.includes(stg.type))
-    },
-    isCountOrHash() {
-      return this.inspectMethod === 'row_count' || this.inspectMethod === 'hash'
-    },
-    filteredList() {
-      if (!this.searchValue) return this.list
+// Types
+interface TableParams {
+  nodeId?: string
+  nodeName?: string
+  connectionId?: string
+  connectionName?: string
+  currentLabel?: string
+  databaseType?: string
+  table?: string
+  sortColumn?: string
+  fields?: any[]
+  capabilities?: any[]
+  enableCustomCollate?: boolean
+  collate?: Record<string, string>
+  customNullSort?: boolean
+  columns?: any[]
+}
 
-      const searchTerm = this.searchValue.toLowerCase()
-      return this.list.filter((item) => {
-        const sourceTable = (item.source.table || '').toLowerCase()
-        const targetTable = (item.target.table || '').toLowerCase()
+interface ConditionItem {
+  id: string
+  source: TableParams
+  target: TableParams
+  showAdvancedVerification: boolean
+  script: string
+  webScript: string
+  jsEngineName: string
+  modeType: 'all' | 'custom'
+}
 
-        return (
-          sourceTable.includes(searchTerm) || targetTable.includes(searchTerm)
-        )
-      })
-    },
-    // Add paginated list computed property
-    paginatedList() {
-      const startIndex = (this.currentPage - 1) * this.pageSize
-      const endIndex = startIndex + this.pageSize
-      return this.filteredList.slice(startIndex, endIndex)
-    },
-    // Add total pages computed property
-    totalPages() {
-      return Math.ceil(this.filteredList.length / this.pageSize)
-    },
-    nullsLastState() {
-      return Object.keys(this.capabilitiesMap || {}).reduce((cur, pre) => {
-        const tags = this.capabilitiesMap[pre]?.tags || []
-        if (tags.includes('NullsLast')) {
-          cur[pre] = true
-        }
-        return cur
-      }, {})
-    },
-  },
-  watch: {
-    taskId(v1, v2) {
-      if (v1 !== v2) {
-        this.clearList()
-      }
-    },
+interface Props {
+  taskId?: string
+  isDB?: boolean
+  inspectMethod?: string
+  data?: ConditionItem[]
+  allStages?: any[]
+  edges?: any[]
+}
 
-    data: {
-      deep: true,
-      handler() {
-        this.loadList()
-      },
-    },
+interface Emits {
+  (e: 'update:jointErrorMessage', value: string): void
+  (e: 'update:errorMessageLevel', value: string): void
+  (e: 'update:autoAddTableLoading', value: boolean): void
+}
 
-    list: {
-      deep: true,
-      handler() {
-        this.debounceValidate()
-        // Reset to page 1 if list is empty
-        if (this.list.length === 0) {
-          this.currentPage = 1
-        }
-      },
-    },
+interface ApiResponse<T> {
+  items: T[]
+  total: number
+}
 
-    searchValue() {
-      // Reset to page 1 when search filter changes
-      this.currentPage = 1
-    },
-  },
-  created() {
-    this.loadDoc()
-  },
-  methods: {
-    async getConnectionsListMethod(filter) {
-      if (this.taskId) {
-        return this.getConnectionsInTask(filter)
-      }
-      try {
-        const _filter = {
-          where: {
-            createType: {
-              $ne: 'System',
-            },
-          },
-          fields: {
-            name: 1,
-            id: 1,
-            database_type: 1,
-            connection_type: 1,
-            status: 1,
-            accessNodeType: 1,
-            accessNodeProcessId: 1,
-            accessNodeProcessIdList: 1,
-            pdkType: 1,
-            pdkHash: 1,
-            capabilities: 1,
-          },
-          order: ['status DESC', 'name ASC'],
-        }
-        const result = await connectionsApi.get({
-          filter: JSON.stringify(merge(filter, _filter)),
-        })
+interface TableItem {
+  id: string
+  name: string
+  nameFieldMap: Record<string, any>
+  fields: any[]
+  sortColumns?: string[]
+}
 
-        result.items = result.items.map((item) => {
-          const findDynamicSchema = item.capabilities.find(
-            (t) => t.id === 'dynamic_schema',
-          )
-          if (findDynamicSchema) {
-            this.dynamicSchemaMap[item.id] = true
-          }
-          const connectionId = item.id
-          const connectionName = item.name
-          const databaseType = item.database_type
-          return {
-            id: connectionId,
-            name: connectionName,
-            label: `${connectionName} ${
-              item.status
-                ? `(${CONNECTION_STATUS_MAP[item.status]?.text || item.status})`
-                : ''
-            }`,
-            value: connectionId,
-            databaseType,
-            attrs: { connectionId, connectionName, databaseType },
-          }
-        })
+interface ConnectionItem {
+  id: string
+  name: string
+  database_type: string
+  connection_type: string
+  status: string
+  capabilities: any[]
+}
 
-        return result
-      } catch {
-        return { items: [], total: 0 }
-      }
-    },
+interface ConnectionResponse {
+  attrs: {
+    nodeId: string
+    nodeName: string
+    connectionId: string
+    connectionName: string
+    databaseType: string
+  }
+  name: string
+  value: string
+  id: string
+  label: string
+  databaseType: string
+}
 
-    async getTableListMethod(filter = {}) {
-      const { connectionId, nodeId } = filter
-      if (!connectionId) {
-        return { items: [], total: 0 }
-      }
-      if (this.taskId) {
-        return this.getTablesInTask(nodeId, connectionId, filter)
-      }
-      try {
-        const size = filter.size || 20
-        const page = filter.page || 1
-        const params = {
-          where: {
-            meta_type: 'table',
-            sourceType: 'SOURCE',
-            is_deleted: false,
-            'source.id': connectionId,
-          },
-          skip: (page - 1) * size,
-          limit: size,
-          order: 'createTime DESC',
-        }
-        const keyword = filter.where?.name?.like
-        if (keyword) {
-          params.where.name = filter.where.name
-        }
-        const res = await metadataInstancesApi.tapTables({
-          filter: JSON.stringify(params),
-        })
-        const result = {}
-        result.items = res.items.map((t) => t.name)
-        result.total = res.total
-        res.items.forEach((el) => {
-          // 缓存起来
-          this.setFieldsByItem(
-            [nodeId, connectionId, el.name],
-            Object.values(el.nameFieldMap || {}).map((t) => {
-              const {
-                id,
-                fieldName,
-                primaryKeyPosition,
-                fieldType,
-                data_type,
-                primaryKey,
-                unique,
-              } = t
-              return {
-                id,
-                field_name: fieldName,
-                primary_key_position: primaryKeyPosition,
-                fieldType,
-                data_type,
-                primaryKey,
-                unique,
-                type: t.data_type,
-                tapType: JSON.stringify(t.tapType),
-              }
-            }),
-          )
-        })
-        return result
-      } catch {
-        return { items: [], total: 0 }
-      }
-    },
+interface TableFilter {
+  where?: {
+    name?: {
+      like?: string
+    }
+  }
+  size?: number
+  page?: number
+  connectionId?: string
+  nodeId?: string
+}
 
-    async getConnectionsInTask(filter = {}) {
-      const keyword = filter.where?.name?.like
-      const id = filter.where?.id
-      let arr = []
-      if (id) {
-        const item = this.flowStages.find((item) => item.connectionId === id)
-        item && arr.push(item)
-      } else if (keyword) {
-        arr = this.flowStages.filter((t) =>
-          t.attrs?.connectionName.includes(filter.where?.name?.like),
-        )
-      } else {
-        arr = this.flowStages
-      }
-      const result = uniqBy(
-        arr.map((t) => {
-          const nodeId = t.id
-          const nodeName = t.name
-          const connectionId = t.connectionId
-          const connectionName = t.attrs?.connectionName
-          const databaseType = t.databaseType
-          const findDynamicSchema = t.attrs?.capabilities.find(
-            (t) => t.id === 'dynamic_schema',
-          )
-          if (findDynamicSchema) {
-            this.dynamicSchemaMap[t.connectionId] = true
-          }
-          return {
-            attrs: {
-              nodeId,
-              nodeName,
-              connectionId,
-              connectionName,
-              databaseType,
-            },
-            name: `${nodeName} / ${connectionName}`,
-            value: connectionId,
-            id: connectionId,
-            label: `${nodeName} / ${connectionName}`,
-            databaseType,
-          }
-        }),
-        'value',
-      )
+interface TableParams {
+  nodeId: string
+  fields: any[]
+  page: number
+  pageSize: number
+  tableFilter?: string
+}
 
-      // Add await to ensure this is truly async
-      await Promise.resolve()
-      return { items: result, total: result.length }
-    },
+interface ApiResult<T> {
+  data: ApiResponse<T>
+}
 
-    async getTablesInTask(nodeId, connectionId, filter = {}) {
-      if (!this.flowStages?.length || !this.taskId) {
-        return { items: [], total: 0 }
-      }
-      const { isDB } = this
+interface FieldItem {
+  id: string
+  field_name: string
+  primary_key_position: number
+  data_type: string
+  primaryKey: boolean
+  unique: boolean
+  type: string
+  tapType: string
+}
 
-      const findNode = this.flowStages.find((t) => t.id === nodeId)
-      if (!findNode) {
-        return { items: [], total: 0 }
-      }
+interface NodeSchemaResponse {
+  items: {
+    fields: FieldItem[]
+    name: string
+  }[]
+  total: number
+}
 
-      const params = {
-        nodeId,
-        fields: ['original_name', 'fields', 'qualified_name', 'name'],
-        page: filter?.page || 1,
-        pageSize: filter?.size || 20,
-      }
-      const keyword = filter.where?.name?.like
-      if (keyword) {
-        params.tableFilter = keyword
+interface StageItem {
+  id: string
+  name: string
+  connectionId: string
+  attrs: {
+    connectionName: string
+    capabilities: any[]
+  }
+  databaseType: string
+}
+
+// Props and Emits
+const props = withDefaults(defineProps<Props>(), {
+  data: () => [],
+  allStages: () => [],
+  edges: () => [],
+})
+
+const emit = defineEmits<Emits>()
+
+// Refs and Reactive State
+const showDoc = ref(false)
+const docPath = ref('')
+const list = ref<ConditionItem[]>([])
+const jointErrorMessage = ref('')
+const fieldsMap = reactive<Record<string, any[]>>({})
+const capabilitiesMap = reactive<Record<string, any>>({})
+const autoAddTableLoading = ref(false)
+const dynamicSchemaMap = reactive<Record<string, boolean>>({})
+const dialogAddScriptVisible = ref(false)
+const formIndex = ref('')
+const webScript = ref('')
+const jsEngineName = ref('graal.js')
+const doc = ref('')
+const schemaData = ref(null)
+const currentPage = ref(1)
+const pageSize = ref(10)
+const autoSuggestJoinFields = ref(true)
+const searchValue = ref('')
+const fieldDialog = ref()
+
+// Computed Properties
+const flowStages = computed(() => {
+  const types = props.isDB ? ['database'] : ['table']
+  return props.allStages.filter((stg) => types.includes(stg.type))
+})
+
+const isCountOrHash = computed(() => {
+  return props.inspectMethod === 'row_count' || props.inspectMethod === 'hash'
+})
+
+const filteredList = computed(() => {
+  if (!searchValue.value) return list.value
+
+  const searchTerm = searchValue.value.toLowerCase()
+  return list.value.filter((item) => {
+    const sourceTable = (item.source.table || '').toLowerCase()
+    const targetTable = (item.target.table || '').toLowerCase()
+
+    return sourceTable.includes(searchTerm) || targetTable.includes(searchTerm)
+  })
+})
+
+const paginatedList = computed(() => {
+  const startIndex = (currentPage.value - 1) * pageSize.value
+  const endIndex = startIndex + pageSize.value
+  return filteredList.value.slice(startIndex, endIndex)
+})
+
+const totalPages = computed(() => {
+  return Math.ceil(filteredList.value.length / pageSize.value)
+})
+
+const nullsLastState = computed(() => {
+  return Object.keys(capabilitiesMap).reduce(
+    (cur, pre) => {
+      const tags = capabilitiesMap[pre]?.tags || []
+      if (tags.includes('NullsLast')) {
+        cur[pre] = true
       }
+      return cur
+    },
+    {} as Record<string, boolean>,
+  )
+})
+
+// Watchers
+watch(
+  () => props.taskId,
+  (v1, v2) => {
+    if (v1 !== v2) {
+      clearList()
+    }
+  },
+)
 
-      const res = await metadataInstancesApi.nodeSchemaPage(params)
-
-      const tableList = res.items?.map((t) => t.name) || []
-      const total = res.total
-      res.items.forEach((el) => {
-        this.setFieldsByItem(
-          [nodeId, connectionId, el.name],
-          el.fields.map((t) => {
-            const {
-              id,
-              field_name,
-              primary_key_position,
-              data_type,
-              primaryKey,
-              unique,
-            } = t
-            return {
-              id,
-              field_name,
-              primary_key_position,
-              data_type,
-              primaryKey,
-              unique,
-            }
-          }),
+watch(
+  () => props.data,
+  () => {
+    loadList()
+  },
+  { deep: true },
+)
+
+watch(
+  list,
+  () => {
+    debounceValidate()
+    // Reset to page 1 if list is empty
+    if (list.value.length === 0) {
+      currentPage.value = 1
+    }
+  },
+  { deep: true },
+)
+
+watch(searchValue, () => {
+  // Reset to page 1 when search filter changes
+  currentPage.value = 1
+})
+
+// Methods
+const getConnectionsListMethod = async (
+  filter: any,
+): Promise<ApiResponse<ConnectionResponse>> => {
+  if (props.taskId) {
+    return getConnectionsInTask(filter)
+  }
+  try {
+    const _filter = {
+      where: {
+        createType: {
+          $ne: 'System',
+        },
+      },
+      fields: {
+        name: 1,
+        id: 1,
+        database_type: 1,
+        connection_type: 1,
+        status: 1,
+        accessNodeType: 1,
+        accessNodeProcessId: 1,
+        accessNodeProcessIdList: 1,
+        pdkType: 1,
+        pdkHash: 1,
+        capabilities: 1,
+      },
+      order: ['status DESC', 'name ASC'],
+    }
+    const result = await connectionsApi.get({
+      filter: JSON.stringify(merge(filter, _filter)),
+    })
+
+    const response: ApiResponse<ConnectionResponse> = {
+      items: result.data.items.map((item: ConnectionItem) => {
+        const findDynamicSchema = item.capabilities.find(
+          (t: any) => t.id === 'dynamic_schema',
         )
-      })
-      let tableNames = tableList
-      if (isDB) {
-        if (!findNode.outputLanes.length) {
-          const { tablePrefix, tableSuffix, tableNameTransform } = findNode
-          tableNames = tableNames.map((t) => {
-            const name = (tablePrefix || '') + t + (tableSuffix || '')
-            return tableNameTransform ? name[tableNameTransform]() : name
-          })
+        if (findDynamicSchema) {
+          dynamicSchemaMap[item.id] = true
         }
-        return { items: tableNames, total }
-      }
-      if (keyword) {
-        tableNames = tableNames.filter((t) =>
-          t.toLowerCase().includes(keyword.toLowerCase()),
-        )
-      }
-      return { items: tableNames, total: tableNames.length }
-    },
+        const connectionId = item.id
+        const connectionName = item.name
+        const databaseType = item.database_type
+        return {
+          attrs: {
+            nodeId: '',
+            nodeName: '',
+            connectionId,
+            connectionName,
+            databaseType,
+          },
+          name: connectionName,
+          value: connectionId,
+          id: connectionId,
+          label: `${connectionName} ${
+            item.status
+              ? `(${CONNECTION_STATUS_MAP[item.status]?.text || item.status})`
+              : ''
+          }`,
+          databaseType,
+        }
+      }),
+      total: result.data.total,
+    }
 
-    /**
-     * @desc 获取连线信息
-     * @param1 value 节点id
-     * @param2 data 整个连线数据
-     * @param3 flag true连线下游、false连线上游
-     */
-    getLinkData(value, data = [], flag = false) {
-      const f = data.find((t) => t[flag ? 'source' : 'target'] === value)
-      return f
-        ? this.getLinkData(f[!flag ? 'source' : 'target'], data, flag)
-        : value
-    },
+    return response
+  } catch {
+    return { items: [], total: 0 }
+  }
+}
 
-    // 获取一条线上的源节点和目标节点
-    getMatchNodeList() {
-      const edgesList = cloneDeep(this.edges)
-      const result = uniqBy(
-        edgesList.map((t) => {
-          const source = this.getLinkData(t.source, edgesList)
-          const target = this.getLinkData(t.target, edgesList, true)
-          const key = `${source}_${target}`
+const getTableListMethod = async (
+  filter: TableFilter = {},
+): Promise<ApiResponse<string>> => {
+  const { connectionId, nodeId } = filter
+  if (!connectionId) {
+    return { items: [], total: 0 }
+  }
+  if (props.taskId) {
+    return getTablesInTask(nodeId, connectionId, filter)
+  }
+  try {
+    const size = filter.size || 20
+    const page = filter.page || 1
+    const params = {
+      where: {
+        meta_type: 'table',
+        sourceType: 'SOURCE',
+        is_deleted: false,
+        'source.id': connectionId,
+        ...(filter.where?.name?.like ? { name: filter.where.name } : {}),
+      },
+      skip: (page - 1) * size,
+      limit: size,
+      order: 'createTime DESC',
+    }
+    const res = await metadataInstancesApi.tapTables({
+      filter: JSON.stringify(params),
+    })
+    const result: ApiResponse<string> = {
+      items: res.data.items.map((t: TableItem) => t.name),
+      total: res.data.total,
+    }
+    res.data.items.forEach((el: TableItem) => {
+      // 缓存起来
+      setFieldsByItem(
+        [nodeId, connectionId, el.name],
+        Object.values(el.nameFieldMap || {}).map((t: any) => {
+          const {
+            id,
+            fieldName,
+            primaryKeyPosition,
+            fieldType,
+            data_type,
+            primaryKey,
+            unique,
+          } = t
           return {
-            source,
-            target,
-            key,
+            id,
+            field_name: fieldName,
+            primary_key_position: primaryKeyPosition,
+            fieldType,
+            data_type,
+            primaryKey,
+            unique,
+            type: t.data_type,
+            tapType: JSON.stringify(t.tapType),
           }
         }),
-        'key',
       )
+    })
+    return result
+  } catch {
+    return { items: [], total: 0 }
+  }
+}
 
-      return result.map((re) => {
-        const el = this.flowStages.find((t) => t.id === re.source)
-        const targetNode = this.flowStages.find((t) => t.id === re.target)
-        let updateConditionFieldMap = {}
-        let tableNames = []
-        let tableNameRelation = {}
-        let objectNames = []
-        if (targetNode.type === 'database') {
-          tableNames = el.tableNames
-          updateConditionFieldMap = targetNode.updateConditionFieldMap || {}
-          tableNameRelation =
-            targetNode.syncObjects?.[0]?.tableNameRelation || []
-          objectNames = targetNode.syncObjects?.[0]?.objectNames || []
-        } else if (targetNode.type === 'table') {
-          tableNames = [el.tableName, targetNode.tableName] // 加上源表名，否则源和目标表名不一致时，源表关联字段不会自动填充
-          updateConditionFieldMap[targetNode.tableName] =
-            targetNode.updateConditionFields || []
-          tableNameRelation[el.tableName] = targetNode.tableName
-        }
+const getTablesInTask = async (
+  nodeId: string,
+  connectionId: string,
+  filter: TableFilter = {},
+): Promise<ApiResponse<string>> => {
+  if (!flowStages.value?.length || !props.taskId) {
+    return { items: [], total: 0 }
+  }
+  const { isDB } = props
+
+  const findNode = flowStages.value.find((t: StageItem) => t.id === nodeId)
+  if (!findNode) {
+    return { items: [], total: 0 }
+  }
 
+  const params: TableParams = {
+    nodeId,
+    fields: ['original_name', 'fields', 'qualified_name', 'name'],
+    page: filter?.page || 1,
+    pageSize: filter?.size || 20,
+    ...(filter.where?.name?.like
+      ? { tableFilter: filter.where.name.like }
+      : {}),
+  }
+
+  const res = await metadataInstancesApi.nodeSchemaPage(params)
+
+  const tableList = res.data.items?.map((t: TableItem) => t.name) || []
+  const total = res.data.total
+  res.data.items.forEach((el: TableItem) => {
+    setFieldsByItem(
+      [nodeId, connectionId, el.name],
+      el.fields.map((t: any) => {
+        const {
+          id,
+          field_name,
+          primary_key_position,
+          data_type,
+          primaryKey,
+          unique,
+        } = t
         return {
-          source: el.id,
-          sourceName: el.name,
-          target: targetNode.id,
-          targetName: targetNode.name,
-          sourceConnectionId: el.connectionId,
-          sourceConnectionName: el.attrs?.connectionName,
-          targetConnectionId: targetNode.connectionId,
-          targetConnectionName: targetNode.attrs?.connectionName,
-          sourceDatabaseType: el.databaseType,
-          targetDatabaseType: targetNode.databaseType,
-          updateConditionFieldMap,
-          tableNames,
-          objectNames,
-          tableName: targetNode.tableName,
-          tableNameRelation,
+          id,
+          field_name,
+          primary_key_position: primaryKeyPosition,
+          data_type,
+          primaryKey,
+          unique,
         }
+      }),
+    )
+  })
+  let tableNames = tableList
+  if (isDB) {
+    if (!findNode.outputLanes.length) {
+      const { tablePrefix, tableSuffix, tableNameTransform } = findNode
+      tableNames = tableNames.map((t: string) => {
+        const name = (tablePrefix || '') + t + (tableSuffix || '')
+        return tableNameTransform ? String(name)[tableNameTransform]() : name
       })
-    },
+    }
+    return { items: tableNames, total }
+  }
+  if (filter.where?.name?.like) {
+    tableNames = tableNames.filter((t: string) =>
+      t.toLowerCase().includes(filter.where!.name!.like!.toLowerCase()),
+    )
+  }
+  return { items: tableNames, total: tableNames.length }
+}
 
-    handleClear() {
-      this.$confirm(
-        i18n.t('packages_business_components_conditionbox_shifouqingkongsuo'),
-        i18n.t('public_message_title_prompt'),
-        {
-          type: 'warning',
+const getConnectionsInTask = async (
+  filter: any = {},
+): Promise<ApiResponse<ConnectionResponse>> => {
+  const keyword = filter.where?.name?.like
+  const id = filter.where?.id
+  let arr: StageItem[] = []
+  if (id) {
+    const item = flowStages.value.find(
+      (item: StageItem) => item.connectionId === id,
+    )
+    item && arr.push(item)
+  } else if (keyword) {
+    arr = flowStages.value.filter((t: StageItem) =>
+      t.attrs?.connectionName.includes(filter.where?.name?.like),
+    )
+  } else {
+    arr = flowStages.value
+  }
+  const result = uniqBy(
+    arr.map((t: StageItem) => {
+      const nodeId = t.id
+      const nodeName = t.name
+      const connectionId = t.connectionId
+      const connectionName = t.attrs?.connectionName
+      const databaseType = t.databaseType
+      const findDynamicSchema = t.attrs?.capabilities.find(
+        (t: any) => t.id === 'dynamic_schema',
+      )
+      if (findDynamicSchema) {
+        dynamicSchemaMap[t.connectionId] = true
+      }
+      return {
+        attrs: {
+          nodeId,
+          nodeName,
+          connectionId,
+          connectionName,
+          databaseType,
         },
-      ).then((res) => {
-        if (!res) {
-          return
-        }
-        this.clearList()
-      })
-    },
+        name: `${nodeName} / ${connectionName}`,
+        value: connectionId,
+        id: connectionId,
+        label: `${nodeName} / ${connectionName}`,
+        databaseType,
+      }
+    }),
+    'value',
+  )
 
-    handleClearIndexEmpty() {
-      this.$confirm(
-        i18n.t('packages_business_components_conditionbox_shifouquerenqing'),
-        i18n.t('public_message_title_prompt'),
-        {
-          type: 'warning',
-        },
-      ).then((res) => {
-        if (!res) {
-          return
-        }
-        this.list = this.list.filter(
-          (t) => t.source.sortColumn && t.target.sortColumn,
-        )
-      })
-    },
+  // Add await to ensure this is truly async
+  await Promise.resolve()
+  return { items: result, total: result.length }
+}
 
-    clearList() {
-      this.list = []
-      this.currentPage = 1
-      this.validate()
-    },
+const getLinkData = (value: string, data: any[] = [], flag = false) => {
+  const f = data.find((t) => t[flag ? 'source' : 'target'] === value)
+  return f ? getLinkData(f[!flag ? 'source' : 'target'], data, flag) : value
+}
 
-    getItemOptions() {
+const getMatchNodeList = () => {
+  const edgesList = cloneDeep(props.edges)
+  const result = uniqBy(
+    edgesList.map((t: any) => {
+      const source = getLinkData(t.source, edgesList)
+      const target = getLinkData(t.target, edgesList, true)
+      const key = `${source}_${target}`
       return {
-        id: uuid(),
-        source: Object.assign({}, TABLE_PARAMS),
-        target: Object.assign({}, TABLE_PARAMS),
-        showAdvancedVerification: false,
-        script: '', //后台使用 需要拼接function头尾
-        webScript: '', //前端使用 用于页面展示
-        jsEngineName: 'graal.js',
-        modeType: 'all', // 待校验模型的类型
+        source,
+        target,
+        key,
       }
-    },
+    }),
+    'key',
+  )
+
+  return result.map((re: any) => {
+    const el = flowStages.value.find((t: any) => t.id === re.source)
+    const targetNode = flowStages.value.find((t: any) => t.id === re.target)
+    let updateConditionFieldMap = {}
+    let tableNames = []
+    let tableNameRelation = {}
+    let objectNames = []
+    if (targetNode.type === 'database') {
+      tableNames = el.tableNames
+      updateConditionFieldMap = targetNode.updateConditionFieldMap || {}
+      tableNameRelation = targetNode.syncObjects?.[0]?.tableNameRelation || []
+      objectNames = targetNode.syncObjects?.[0]?.objectNames || []
+    } else if (targetNode.type === 'table') {
+      tableNames = [el.tableName, targetNode.tableName] // 加上源表名，否则源和目标表名不一致时，源表关联字段不会自动填充
+      updateConditionFieldMap[targetNode.tableName] =
+        targetNode.updateConditionFields || []
+      tableNameRelation[el.tableName] = targetNode.tableName
+    }
 
-    addItem() {
-      this.list.push(this.getItemOptions())
-      // Navigate to the last page when adding a new item
-      this.currentPage = this.totalPages
+    return {
+      source: el.id,
+      sourceName: el.name,
+      target: targetNode.id,
+      targetName: targetNode.name,
+      sourceConnectionId: el.connectionId,
+      sourceConnectionName: el.attrs?.connectionName,
+      targetConnectionId: targetNode.connectionId,
+      targetConnectionName: targetNode.attrs?.connectionName,
+      sourceDatabaseType: el.databaseType,
+      targetDatabaseType: targetNode.databaseType,
+      updateConditionFieldMap,
+      tableNames,
+      objectNames,
+      tableName: targetNode.tableName,
+      tableNameRelation,
+    }
+  })
+}
+
+const handleClear = () => {
+  ElMessageBox.confirm(
+    i18n.t('packages_business_components_conditionbox_shifouqingkongsuo'),
+    i18n.t('public_message_title_prompt'),
+    {
+      type: 'warning',
     },
+  ).then((res) => {
+    if (!res) {
+      return
+    }
+    clearList()
+  })
+}
 
-    removeItem(id) {
-      this.list = this.list.filter((t) => t.id !== id)
-      // If current page is now empty and it's not the first page, go to previous page
-      if (this.paginatedList.length === 0 && this.currentPage > 1) {
-        this.currentPage--
-      }
+const handleClearIndexEmpty = () => {
+  ElMessageBox.confirm(
+    i18n.t('packages_business_components_conditionbox_shifouquerenqing'),
+    i18n.t('public_message_title_prompt'),
+    {
+      type: 'warning',
     },
+  ).then((res) => {
+    if (!res) {
+      return
+    }
+    list.value = list.value.filter(
+      (t) => t.source.sortColumn && t.target.sortColumn,
+    )
+  })
+}
 
-    async autoAddTable() {
-      if (!this.taskId || this.list.length) return
-      this.autoAddTableLoading = true
-      this.updateAutoAddTableLoading()
-      const connectionSet = new Set()
-      const tableNames = []
-      const matchNodeList = this.getMatchNodeList()
-
-      matchNodeList.forEach((m) => {
-        connectionSet.add(m.sourceConnectionId)
-        connectionSet.add(m.targetConnectionId)
-        tableNames.push(...m.tableNames, ...m.objectNames)
-      })
+const clearList = () => {
+  list.value = []
+  currentPage.value = 1
+  validate()
+}
 
-      const connectionIds = [...connectionSet]
+const getItemOptions = () => {
+  return {
+    id: uuid(),
+    source: Object.assign({}, TABLE_PARAMS),
+    target: Object.assign({}, TABLE_PARAMS),
+    showAdvancedVerification: false,
+    script: '', //后台使用 需要拼接function头尾
+    webScript: '', //前端使用 用于页面展示
+    jsEngineName: 'graal.js',
+    modeType: 'all', // 待校验模型的类型
+  }
+}
 
-      // 加载数据源的Capabilities
-      const capabilitiesMap = await this.getCapabilities(connectionIds)
+const addItem = () => {
+  list.value.push(getItemOptions())
+  // Navigate to the last page when adding a new item
+  currentPage.value = totalPages.value
+}
 
-      if (!matchNodeList.length) {
-        this.autoAddTableLoading = false
-        this.updateAutoAddTableLoading()
-        if (this.allStages.length > this.flowStages.length)
-          return this.$message.error(
-            i18n.t(
-              'packages_business_components_conditionbox_cunzaichulijiedian_wufazidong',
-            ),
+const removeItem = (id: string) => {
+  list.value = list.value.filter((t) => t.id !== id)
+  // If current page is now empty and it's not the first page, go to previous page
+  if (paginatedList.value.length === 0 && currentPage.value > 1) {
+    currentPage.value--
+  }
+}
+
+const autoAddTable = async () => {
+  if (!props.taskId || list.value.length) return
+  autoAddTableLoading.value = true
+  updateAutoAddTableLoading()
+  const connectionSet = new Set()
+  const tableNames = []
+  const matchNodeList = getMatchNodeList()
+
+  matchNodeList.forEach((m: any) => {
+    connectionSet.add(m.sourceConnectionId)
+    connectionSet.add(m.targetConnectionId)
+    tableNames.push(...m.tableNames, ...m.objectNames)
+  })
+
+  const connectionIds = [...connectionSet]
+
+  // 加载数据源的Capabilities
+  const capabilitiesMap = await getCapabilities(connectionIds)
+
+  if (!matchNodeList.length) {
+    autoAddTableLoading.value = false
+    updateAutoAddTableLoading()
+    if (props.allStages.length > flowStages.value.length)
+      return ElMessage.error(
+        i18n.t(
+          'packages_business_components_conditionbox_cunzaichulijiedian_wufazidong',
+        ),
+      )
+    return ElMessage.error(
+      i18n.t('packages_business_components_conditionbox_suoxuanrenwuque'),
+    )
+  }
+  const where = {
+    meta_type: {
+      inq: DATA_NODE_TYPES,
+    },
+    'source.id': {
+      inq: connectionIds,
+    },
+    original_name: {
+      inq: Array.from(new Set(tableNames)),
+    },
+    taskId: props.taskId,
+  }
+  metadataInstancesApi
+    .findInspect({
+      where,
+      fields: META_INSTANCE_FIELDS,
+    })
+    .then((data: any) => {
+      const newItems = []
+      matchNodeList.forEach((m: any) => {
+        const {
+          source,
+          target,
+          sourceName,
+          targetName,
+          sourceConnectionId,
+          targetConnectionId,
+          sourceConnectionName,
+          targetConnectionName,
+          sourceDatabaseType,
+          targetDatabaseType,
+          updateConditionFieldMap,
+          tableNameRelation,
+        } = m
+
+        const sourceTableList = Object.keys(tableNameRelation)
+        sourceTableList.forEach((ge: string) => {
+          const item = getItemOptions()
+          // 填充source
+          item.source.nodeId = source
+          item.source.nodeName = sourceName
+          item.source.databaseType = sourceDatabaseType
+          item.source.connectionId = sourceConnectionId
+          item.source.connectionName = sourceConnectionName
+          item.source.currentLabel = `${sourceName} / ${sourceConnectionName}`
+          item.source.table = ge // findTable.original_name
+          item.source.capabilities =
+            capabilitiesMap[sourceConnectionId]?.capabilities || []
+          // 填充target
+          item.target.nodeId = target
+          item.target.nodeName = targetName
+          item.target.databaseType = targetDatabaseType
+          item.target.connectionId = targetConnectionId
+          item.target.connectionName = targetConnectionName
+          item.target.currentLabel = `${targetName} / ${targetConnectionName}`
+          item.target.table = tableNameRelation[ge] // findTargetTable.original_name
+          item.target.capabilities =
+            capabilitiesMap[targetConnectionId]?.capabilities || []
+
+          const updateList = cloneDeep(
+            updateConditionFieldMap[tableNameRelation[ge]] || [],
+          ).filter((t: string) => t !== '_no_pk_hash')
+          const findTable = data.find(
+            (t: any) =>
+              t.source.id === sourceConnectionId && t.original_name === ge,
+          )
+          const findTargetTable = data.find(
+            (t: any) =>
+              t.source.id === targetConnectionId &&
+              t.original_name === tableNameRelation[ge],
           )
-        return this.$message.error(
-          i18n.t('packages_business_components_conditionbox_suoxuanrenwuque'),
-        )
-      }
-      const where = {
-        meta_type: {
-          inq: DATA_NODE_TYPES,
-        },
-        'source.id': {
-          inq: connectionIds,
-        },
-        original_name: {
-          inq: Array.from(new Set(tableNames)),
-        },
-        taskId: this.taskId,
-      }
-      // this.autoAddTableLoading = true
-      // this.updateAutoAddTableLoading()
-      metadataInstancesApi
-        .findInspect({
-          where,
-          fields: META_INSTANCE_FIELDS,
-        })
-        .then((data) => {
-          const list = []
-          matchNodeList.forEach((m) => {
-            const {
-              source,
-              target,
-              sourceName,
-              targetName,
-              sourceConnectionId,
-              targetConnectionId,
-              sourceConnectionName,
-              targetConnectionName,
-              sourceDatabaseType,
-              targetDatabaseType,
-              updateConditionFieldMap,
-              tableNameRelation,
-            } = m
-
-            const sourceTableList = Object.keys(tableNameRelation)
-            sourceTableList.forEach((ge) => {
-              const item = this.getItemOptions()
-              // 填充source
-              item.source.nodeId = source
-              item.source.nodeName = sourceName
-              item.source.databaseType = sourceDatabaseType
-              item.source.connectionId = sourceConnectionId
-              item.source.connectionName = sourceConnectionName
-              item.source.currentLabel = `${sourceName} / ${sourceConnectionName}`
-              item.source.table = ge // findTable.original_name
-              item.source.capabilities =
-                capabilitiesMap[sourceConnectionId]?.capabilities || []
-              // 填充target
-              item.target.nodeId = target
-              item.target.nodeName = targetName
-              item.target.databaseType = targetDatabaseType
-              item.target.connectionId = targetConnectionId
-              item.target.connectionName = targetConnectionName
-              item.target.currentLabel = `${targetName} / ${targetConnectionName}`
-              item.target.table = tableNameRelation[ge] // findTargetTable.original_name
-              item.target.capabilities =
-                capabilitiesMap[targetConnectionId]?.capabilities || []
-
-              const updateList = cloneDeep(
-                updateConditionFieldMap[tableNameRelation[ge]] || [],
-              ).filter((t) => t !== '_no_pk_hash')
-              const findTable = data.find(
-                (t) =>
-                  t.source.id === sourceConnectionId && t.original_name === ge,
-              )
-              const findTargetTable = data.find(
-                (t) =>
-                  t.source.id === targetConnectionId &&
-                  t.original_name === tableNameRelation[ge],
-              )
 
-              if (findTable) {
-                let sourceSortColumn = updateList.length
-                  ? updateList.join(',')
-                  : findTable.sortColumns?.join(',') ||
-                    this.getPrimaryKeyFieldStr(findTable.fields)
-
-                if (updateList.length && findTargetTable?.fields?.length) {
-                  const fieldMap = findTargetTable?.fields?.reduce((acc, t) => {
-                    acc[t.field_name] = t.original_field_name
-                    return acc
-                  }, {})
-                  sourceSortColumn = updateList
-                    .reduce((acc, t) => {
-                      fieldMap[t] && acc.push(fieldMap[t])
-                      return acc
-                    }, [])
-                    .join(',')
-                }
-
-                item.source.fields = findTable.fields.map((t) => {
-                  t.isPrimaryKey = t.primary_key_position > 0
-                  return t
-                })
-                item.source.sortColumn = sourceSortColumn
-
-                const key = [
-                  source || '',
-                  sourceConnectionId,
-                  item.source.table,
-                ].join()
-                this.fieldsMap[key] = item.source.fields
-              }
-
-              if (findTargetTable) {
-                const targetSortColumn = updateList.length
-                  ? updateList.join(',')
-                  : findTargetTable.sortColumns?.join(',') ||
-                    this.getPrimaryKeyFieldStr(findTargetTable.fields)
-
-                item.target.fields = findTargetTable.fields.map((t) => {
-                  t.isPrimaryKey = t.primary_key_position > 0
-                  return t
-                })
-
-                item.target.sortColumn = targetSortColumn
-                const key = [
-                  target || '',
-                  targetConnectionId,
-                  item.target.table,
-                ].join()
-                this.fieldsMap[key] = item.target.fields
-              }
-
-              if (
-                this.autoSuggestJoinFields &&
-                !item.source.sortColumn &&
-                !item.target.sortColumn
-              ) {
-                let sourceFields = item.source.fields.filter(
-                  (t) => !t.is_nullable,
-                )
-                let targetFields = item.target.fields.filter(
-                  (t) => !t.is_nullable,
-                )
+          if (findTable) {
+            let sourceSortColumn = updateList.length
+              ? updateList.join(',')
+              : findTable.sortColumns?.join(',') ||
+                getPrimaryKeyFieldStr(findTable.fields)
+
+            if (updateList.length && findTargetTable?.fields?.length) {
+              const fieldMap = findTargetTable?.fields?.reduce(
+                (acc: any, t: any) => {
+                  acc[t.field_name] = t.original_field_name
+                  return acc
+                },
+                {},
+              )
+              sourceSortColumn = updateList
+                .reduce((acc: string[], t: string) => {
+                  fieldMap[t] && acc.push(fieldMap[t])
+                  return acc
+                }, [])
+                .join(',')
+            }
 
-                sourceFields = sourceFields.length
-                  ? sourceFields
-                  : item.source.fields
-                targetFields = targetFields.length
-                  ? targetFields
-                  : item.target.fields
-
-                item.source.sortColumn = sourceFields
-                  .map((t) => t.field_name)
-                  .join(',')
-                item.target.sortColumn = targetFields
-                  .map((t) => t.field_name)
-                  .join(',')
-              }
-
-              list.push(item)
+            item.source.fields = findTable.fields.map((t: any) => {
+              t.isPrimaryKey = t.primary_key_position > 0
+              return t
             })
-          })
-          if (!list.length) {
-            return this.$message.error(
-              i18n.t(
-                'packages_business_components_conditionbox_suoxuanrenwuque',
-              ),
-            )
+            item.source.sortColumn = sourceSortColumn
+
+            const key = [
+              source || '',
+              sourceConnectionId,
+              item.source.table,
+            ].join()
+            fieldsMap[key] = item.source.fields
           }
-          this.list = list
 
-          // 显示提示
-          this.validate()
-        })
-        .finally(() => {
-          this.autoAddTableLoading = false
-          this.updateAutoAddTableLoading()
-        })
-    },
+          if (findTargetTable) {
+            const targetSortColumn = updateList.length
+              ? updateList.join(',')
+              : findTargetTable.sortColumns?.join(',') ||
+                getPrimaryKeyFieldStr(findTargetTable.fields)
 
-    loadList() {
-      const data = cloneDeep(this.data)
-      data.forEach((el) => {
-        el.modeType = el.source.columns ? 'custom' : 'all'
-      })
-      this.list = data
-    },
+            item.target.fields = findTargetTable.fields.map((t: any) => {
+              t.isPrimaryKey = t.primary_key_position > 0
+              return t
+            })
 
-    getList() {
-      const list = cloneDeep(this.list)
-      if (this.taskId) {
-        list.forEach((el) => {
-          if (el.modeType === 'all') {
-            el.source.columns = null
-            el.target.columns = null
+            item.target.sortColumn = targetSortColumn
+            const key = [
+              target || '',
+              targetConnectionId,
+              item.target.table,
+            ].join()
+            fieldsMap[key] = item.target.fields
+          }
+
+          if (
+            autoSuggestJoinFields.value &&
+            !item.source.sortColumn &&
+            !item.target.sortColumn
+          ) {
+            let sourceFields = item.source.fields.filter(
+              (t: any) => !t.is_nullable,
+            )
+            let targetFields = item.target.fields.filter(
+              (t: any) => !t.is_nullable,
+            )
+
+            sourceFields = sourceFields.length
+              ? sourceFields
+              : item.source.fields
+            targetFields = targetFields.length
+              ? targetFields
+              : item.target.fields
+
+            item.source.sortColumn = sourceFields
+              .map((t: any) => t.field_name)
+              .join(',')
+            item.target.sortColumn = targetFields
+              .map((t: any) => t.field_name)
+              .join(',')
           }
-        })
-      }
-      return list
-    },
 
-    async handleChangeConnection(opt, item) {
-      item.currentLabel = ''
-      item.table = '' // 重选连接，清空表
-      item.sortColumn = '' // 重选连接，清空表
-      item.databaseType = opt.databaseType
-
-      if (this.capabilitiesMap?.[opt.attrs?.connectionId]) {
-        item.capabilities =
-          this.capabilitiesMap[opt.attrs?.connectionId]?.capabilities || []
-      } else {
-        const { capabilities, tags } = await this.getConnectionCapabilities(
-          opt.attrs?.connectionId,
+          newItems.push(item)
+        })
+      })
+      if (!newItems.length) {
+        return ElMessage.error(
+          i18n.t('packages_business_components_conditionbox_suoxuanrenwuque'),
         )
-        item.capabilities = capabilities
-        this.capabilitiesMap[opt.attrs?.connectionId] = {
-          capabilities,
-          tags,
-        }
       }
+      list.value = newItems
+
+      // 显示提示
+      validate()
+    })
+    .finally(() => {
+      autoAddTableLoading.value = false
+      updateAutoAddTableLoading()
+    })
+}
 
-      if (!this.taskId) {
-        item.connectionName = opt.attrs?.connectionName
-        item.currentLabel = item.connectionName
-        return
-      }
-      const { nodeId, nodeName, connectionName } = opt.attrs || {}
-      item.nodeId = nodeId
-      item.nodeName = nodeName
-      item.connectionName = connectionName
-      item.currentLabel = `${nodeName} / ${connectionName}`
-    },
+const loadList = () => {
+  const data = cloneDeep(props.data)
+  data.forEach((el: any) => {
+    el.modeType = el.source.columns ? 'custom' : 'all'
+  })
+  list.value = data
+}
 
-    getReverseNodeInfo(data = {}) {
-      const {
-        source,
-        target,
-        sourceName,
-        targetName,
-        sourceConnectionId,
-        targetConnectionId,
-        sourceConnectionName,
-        targetConnectionName,
-        sourceDatabaseType,
-        targetDatabaseType,
-        updateConditionFieldMap,
-        tableNames,
-        tableName,
-      } = data
-      return {
-        source: target,
-        target: source,
-        sourceName: targetName,
-        targetName: sourceName,
-        sourceConnectionId: targetConnectionId,
-        targetConnectionId: sourceConnectionId,
-        sourceConnectionName: targetConnectionName,
-        targetConnectionName: sourceConnectionName,
-        sourceDatabaseType: targetDatabaseType,
-        targetDatabaseType: sourceDatabaseType,
-        updateConditionFieldMap,
-        tableNames,
-        tableName,
+const getList = () => {
+  const listData = cloneDeep(list.value)
+  if (props.taskId) {
+    listData.forEach((el: any) => {
+      if (el.modeType === 'all') {
+        el.source.columns = null
+        el.target.columns = null
       }
-    },
+    })
+  }
+  return listData
+}
 
-    handleChangeTable(val, item, index, type) {
-      const fields = this.getFieldsByItem(item, type)
-      item[type].fields = fields
-      item[type].sortColumn = this.getPrimaryKeyFieldStr(fields)
+const handleChangeConnection = async (opt: any, item: any) => {
+  item.currentLabel = ''
+  item.table = '' // 重选连接，清空表
+  item.sortColumn = '' // 重选连接，清空表
+  item.databaseType = opt.databaseType
+
+  if (capabilitiesMap?.[opt.attrs?.connectionId]) {
+    item.capabilities =
+      capabilitiesMap[opt.attrs?.connectionId]?.capabilities || []
+  } else {
+    const { capabilities, tags } = await getConnectionCapabilities(
+      opt.attrs?.connectionId,
+    )
+    item.capabilities = capabilities
+    capabilitiesMap[opt.attrs?.connectionId] = {
+      capabilities,
+      tags,
+    }
+  }
 
-      if (item.modeType === 'custom') {
-        item.source.columns = []
-        item.target.columns = []
-      }
+  if (!props.taskId) {
+    item.connectionName = opt.attrs?.connectionName
+    item.currentLabel = item.connectionName
+    return
+  }
+  const { nodeId, nodeName, connectionName } = opt.attrs || {}
+  item.nodeId = nodeId
+  item.nodeName = nodeName
+  item.connectionName = connectionName
+  item.currentLabel = `${nodeName} / ${connectionName}`
+}
 
-      // 绑定任务，则自动填充目标信息
-      if (!this.taskId) {
-        return
-      }
+const getReverseNodeInfo = (data: any = {}) => {
+  const {
+    source,
+    target,
+    sourceName,
+    targetName,
+    sourceConnectionId,
+    targetConnectionId,
+    sourceConnectionName,
+    targetConnectionName,
+    sourceDatabaseType,
+    targetDatabaseType,
+    updateConditionFieldMap,
+    tableNames,
+    tableName,
+  } = data
+  return {
+    source: target,
+    target: source,
+    sourceName: targetName,
+    targetName: sourceName,
+    sourceConnectionId: targetConnectionId,
+    targetConnectionId: sourceConnectionId,
+    sourceConnectionName: targetConnectionName,
+    targetConnectionName: sourceConnectionName,
+    sourceDatabaseType: targetDatabaseType,
+    targetDatabaseType: sourceDatabaseType,
+    updateConditionFieldMap,
+    tableNames,
+    tableName,
+  }
+}
 
-      // 获取连线信息
-      const matchNodeList = this.getMatchNodeList()
-      let matchNode = matchNodeList.find((t) =>
-        [t.source, t.target].includes(item[type].nodeId),
-      )
-      if (!matchNode) {
-        return
-      }
+const handleChangeTable = (
+  val: string,
+  item: any,
+  index: number,
+  type: string,
+) => {
+  const fields = getFieldsByItem(item, type)
+  item[type].fields = fields
+  item[type].sortColumn = getPrimaryKeyFieldStr(fields)
+
+  if (item.modeType === 'custom') {
+    item.source.columns = []
+    item.target.columns = []
+  }
 
-      if (matchNode.target === item[type].nodeId) {
-        matchNode = this.getReverseNodeInfo(matchNode)
-      }
-      const {
-        target,
-        targetName,
-        targetConnectionId,
-        targetConnectionName,
-        sourceDatabaseType,
-        targetDatabaseType,
-        updateConditionFieldMap,
-        tableName,
-        tableNameRelation = {},
-      } = matchNode
-
-      // 自动填充索引字段
-      const updateList = updateConditionFieldMap[val] || {}
-      item[type].sortColumn = updateList.length
-        ? updateList.join(',')
-        : this.getPrimaryKeyFieldStr(fields)
-
-      if (type === 'target') {
-        item.target.databaseType = targetDatabaseType
-        return
-      }
-      // 自动填充目标连接和表
-      item.source.databaseType = sourceDatabaseType
-
-      item.target.nodeId = target
-      item.target.nodeName = targetName
-      item.target.connectionId = targetConnectionId
-      item.target.connectionName = targetConnectionName
-      item.target.currentLabel = `${targetName} / ${targetConnectionName}`
-      item.target.table = tableName ? tableName : tableNameRelation[val]
-
-      item.target.capabilities =
-        this.capabilitiesMap[targetConnectionId]?.capabilities || []
-
-      const key = [target || '', targetConnectionId, item.target.table].join()
-      if (this.fieldsMap[key]) {
-        item.target.fields = this.fieldsMap[key]
-        // 设置主键
-        item.target.sortColumn = updateList.length
-          ? updateList.join(',')
-          : this.getPrimaryKeyFieldStr(item.target.fields)
-        return
-      }
+  // 绑定任务，则自动填充目标信息
+  if (!props.taskId) {
+    return
+  }
 
-      // 加载目标的字段
-      const params = {
-        nodeId: target,
-        tableFilter: item.target.table,
-        page: 1,
-        pageSize: 1,
-      }
-      metadataInstancesApi.nodeSchemaPage(params).then((data) => {
-        item.target.fields =
-          data.items?.[0]?.fields.map((t) => {
-            const { id, field_name, primary_key_position, primaryKey, unique } =
-              t
-            return { id, field_name, primary_key_position, primaryKey, unique }
-          }) || []
-        // 设置主键
-        item.target.sortColumn = updateList.length
-          ? updateList.join(',')
-          : this.getPrimaryKeyFieldStr(item.target.fields)
-
-        this.fieldsMap[key] = item.target.fields
-      })
-    },
+  // 获取连线信息
+  const matchNodeList = getMatchNodeList()
+  let matchNode = matchNodeList.find((t: any) =>
+    [t.source, t.target].includes(item[type].nodeId),
+  )
+  if (!matchNode) {
+    return
+  }
 
-    handleChangeAdvanced(item) {
-      Object.assign(item.target, {
-        targeFilterFalg: false,
-        where: '',
-      })
-      // item.showAdvancedVerification = val
-    },
+  if (matchNode.target === item[type].nodeId) {
+    matchNode = getReverseNodeInfo(matchNode)
+  }
+  const {
+    target,
+    targetName,
+    targetConnectionId,
+    targetConnectionName,
+    sourceDatabaseType,
+    targetDatabaseType,
+    updateConditionFieldMap,
+    tableName,
+    tableNameRelation = {},
+  } = matchNode
+
+  // 自动填充索引字段
+  const updateList = updateConditionFieldMap[val] || {}
+  item[type].sortColumn = updateList.length
+    ? updateList.join(',')
+    : getPrimaryKeyFieldStr(fields)
+
+  if (type === 'target') {
+    item.target.databaseType = targetDatabaseType
+    return
+  }
+  // 自动填充目标连接和表
+  item.source.databaseType = sourceDatabaseType
+
+  item.target.nodeId = target
+  item.target.nodeName = targetName
+  item.target.connectionId = targetConnectionId
+  item.target.connectionName = targetConnectionName
+  item.target.currentLabel = `${targetName} / ${targetConnectionName}`
+  item.target.table = tableName ? tableName : tableNameRelation[val]
+
+  item.target.capabilities =
+    capabilitiesMap[targetConnectionId]?.capabilities || []
+
+  const key = [target || '', targetConnectionId, item.target.table].join()
+  if (fieldsMap[key]) {
+    item.target.fields = fieldsMap[key]
+    // 设置主键
+    item.target.sortColumn = updateList.length
+      ? updateList.join(',')
+      : getPrimaryKeyFieldStr(item.target.fields)
+    return
+  }
 
-    addScript(index) {
-      this.formIndex = index
-      this.webScript = ''
-      this.jsEngineName = 'graal.js'
-      this.dialogAddScriptVisible = true
-    },
+  // 加载目标的字段
+  const params = {
+    nodeId: target,
+    tableFilter: item.target.table,
+    page: 1,
+    pageSize: 1,
+  }
+  metadataInstancesApi.nodeSchemaPage(params).then((data: any) => {
+    item.target.fields =
+      data.data.items?.[0]?.fields.map((t: any) => {
+        const { id, field_name, primary_key_position, primaryKey, unique } = t
+        return { id, field_name, primary_key_position, primaryKey, unique }
+      }) || []
+    // 设置主键
+    item.target.sortColumn = updateList.length
+      ? updateList.join(',')
+      : getPrimaryKeyFieldStr(item.target.fields)
+
+    fieldsMap[key] = item.target.fields
+  })
+}
 
-    handleAddScriptClose() {
-      this.webScript = ''
-      this.formIndex = ''
-      this.jsEngineName = 'graal.js'
-      this.dialogAddScriptVisible = false
-    },
+const handleChangeAdvanced = (item: any) => {
+  Object.assign(item.target, {
+    targeFilterFalg: false,
+    where: '',
+  })
+}
 
-    submitScript() {
-      const task = this.list
-      const formIndex = this.formIndex
-      task[formIndex].webScript = this.webScript
-      task[formIndex].jsEngineName = this.jsEngineName
-      this.jsEngineName = ''
-      this.webScript = ''
-      this.formIndex = ''
-      this.dialogAddScriptVisible = false
-    },
+const addScript = (index: number) => {
+  formIndex.value = index
+  webScript.value = ''
+  jsEngineName.value = 'graal.js'
+  dialogAddScriptVisible.value = true
+}
 
-    editScript(index) {
-      this.formIndex = index
-      const task = this.paginatedList
-      const script = JSON.parse(JSON.stringify(task[this.formIndex].webScript))
-      this.jsEngineName = JSON.parse(
-        JSON.stringify(task[this.formIndex].jsEngineName || 'nashorn'),
-      )
-      this.webScript = script
-      this.dialogAddScriptVisible = true
-    },
+const handleAddScriptClose = () => {
+  webScript.value = ''
+  formIndex.value = ''
+  jsEngineName.value = 'graal.js'
+  dialogAddScriptVisible.value = false
+}
 
-    removeScript(item, index) {
-      this.$confirm(
-        this.$t('packages_business_verification_message_confirm_delete_script'),
-        this.$t('public_button_delete'),
-        {
-          type: 'warning',
-        },
-      ).then((resFlag) => {
-        if (!resFlag) {
-          return
-        }
-        item.webScript = ''
-      })
-    },
+const submitScript = () => {
+  const task = list.value
+  const currentFormIndex = formIndex.value
+  task[currentFormIndex].webScript = webScript.value
+  task[currentFormIndex].jsEngineName = jsEngineName.value
+  jsEngineName.value = ''
+  webScript.value = ''
+  formIndex.value = ''
+  dialogAddScriptVisible.value = false
+}
 
-    setFieldsByItem(item = [], data = []) {
-      const key = item.filter((t) => t).join()
-      this.fieldsMap[key] = data
-    },
+const editScript = (index: number) => {
+  formIndex.value = index
+  const task = paginatedList.value
+  const script = JSON.parse(JSON.stringify(task[formIndex.value].webScript))
+  jsEngineName.value = JSON.parse(
+    JSON.stringify(task[formIndex.value].jsEngineName || 'nashorn'),
+  )
+  webScript.value = script
+  dialogAddScriptVisible.value = true
+}
 
-    getFieldsByItem(item, type = 'source') {
-      const { nodeId, connectionId, table } = item[type] || {}
-      return (
-        this.fieldsMap[
-          [nodeId || '', connectionId, table].filter((t) => t).join()
-        ] || []
-      )
+const removeScript = (item: any) => {
+  ElMessageBox.confirm(
+    i18n.t('packages_business_verification_message_confirm_delete_script'),
+    i18n.t('public_button_delete'),
+    {
+      type: 'warning',
     },
+  ).then((resFlag) => {
+    if (!resFlag) {
+      return
+    }
+    item.webScript = ''
+  })
+}
 
-    getPrimaryKeyFieldStr(data = []) {
-      const sortField = (list) => {
-        return (
-          list?.sort((a, b) => {
-            return a.field_name > b.field_name ? -1 : 1
-          }) || []
-        )
-      }
-      return sortField(data)
-        .filter((f) => !!f.primaryKey)
-        .map((t) => t.field_name)
-        .join(',')
-    },
+const setFieldsByItem = (item: any[] = [], data: any[] = []) => {
+  const key = item.filter((t) => t).join()
+  fieldsMap[key] = data
+}
 
-    debounceValidate: debounce(function () {
-      this.validate()
-    }, 200),
+const getFieldsByItem = (item: any, type = 'source') => {
+  const { nodeId, connectionId, table } = item[type] || {}
+  return (
+    fieldsMap[[nodeId || '', connectionId, table].filter((t) => t).join()] || []
+  )
+}
 
-    async validate() {
-      const tasks = this.getList()
+const getPrimaryKeyFieldStr = (data: any[] = []) => {
+  const sortField = (list: any[]) => {
+    return (
+      list?.sort((a, b) => {
+        return a.field_name > b.field_name ? -1 : 1
+      }) || []
+    )
+  }
+  return sortField(data)
+    .filter((f) => !!f.primaryKey)
+    .map((t) => t.field_name)
+    .join(',')
+}
 
-      if (!tasks.length) {
-        this.updateErrorMsg('')
-        return
-      }
+const debounceValidate = debounce(() => {
+  validate()
+}, 200)
 
-      let index = 0
-      let message = ''
-      // const formDom = document.getElementById('data-verification-form')
-      const SHOW_COUNT = 20
-      // 检查是否选择表
-      const haveTableArr = tasks.filter((c) => c.source.table && c.target.table)
-      const noTableArr = tasks.filter((c) => !c.source.table || !c.target.table)
-
-      if (!haveTableArr.length) {
-        message = this.$t(
-          'packages_business_verification_form_validate_table_is_empty',
-        )
-        this.updateErrorMsg(message, 'error')
-        return message
-      }
+const validate = async () => {
+  const tasks = getList()
 
-      if (noTableArr.length) {
-        message = this.$t(
-          'packages_business_verification_form_validate_table_is_empty1',
-        )
-        noTableArr.forEach((el, elIndex) => {
-          if (elIndex <= SHOW_COUNT) {
-            message += `${elIndex > 0 ? ', ' : ''}${el.source.connectionName}`
-            message += `${elIndex > 0 ? ', ' : ''}${el.target.connectionName}`
-          }
-        })
-        if (noTableArr.length > SHOW_COUNT) {
-          message += ` ...`
-        }
-        this.updateErrorMsg(message, 'warn')
-        return
-      }
+  if (!tasks.length) {
+    updateErrorMsg('')
+    return
+  }
 
-      if (['field', 'jointField'].includes(this.inspectMethod)) {
-        // 检查数据源的能力
-        message = this.validateCapabilities(
-          tasks,
-          'query_by_advance_filter_function',
-        )
-        if (message) return message
+  let index = 0
+  let message = ''
+  const SHOW_COUNT = 20
+  // 检查是否选择表
+  const haveTableArr = tasks.filter((c) => c.source.table && c.target.table)
+  const noTableArr = tasks.filter((c) => !c.source.table || !c.target.table)
+
+  if (!haveTableArr.length) {
+    message = i18n.t(
+      'packages_business_verification_form_validate_table_is_empty',
+    )
+    updateErrorMsg(message, 'error')
+    return message
+  }
 
-        // 索引字段为空
-        const haveIndexFieldArr = tasks.filter(
-          (c) => c.source.sortColumn && c.target.sortColumn,
-        )
-        const noIndexFieldArr = tasks.filter(
-          (c) => !c.source.sortColumn || !c.target.sortColumn,
-        )
+  if (noTableArr.length) {
+    message = i18n.t(
+      'packages_business_verification_form_validate_table_is_empty1',
+    )
+    noTableArr.forEach((el, elIndex) => {
+      if (elIndex <= SHOW_COUNT) {
+        message += `${elIndex > 0 ? ', ' : ''}${el.source.connectionName}`
+        message += `${elIndex > 0 ? ', ' : ''}${el.target.connectionName}`
+      }
+    })
+    if (noTableArr.length > SHOW_COUNT) {
+      message += ` ...`
+    }
+    updateErrorMsg(message, 'warn')
+    return
+  }
 
-        if (!haveIndexFieldArr.length) {
-          message = this.$t(
-            'packages_business_verification_form_condition_is_empty',
-          )
-          this.updateErrorMsg(message, 'error')
-          return message
-        }
+  if (['field', 'jointField'].includes(props.inspectMethod)) {
+    // 检查数据源的能力
+    message = validateCapabilities(tasks, 'query_by_advance_filter_function')
+    if (message) return message
+
+    // 索引字段为空
+    const haveIndexFieldArr = tasks.filter(
+      (c) => c.source.sortColumn && c.target.sortColumn,
+    )
+    const noIndexFieldArr = tasks.filter(
+      (c) => !c.source.sortColumn || !c.target.sortColumn,
+    )
+
+    if (!haveIndexFieldArr.length) {
+      message = i18n.t('packages_business_verification_form_condition_is_empty')
+      updateErrorMsg(message, 'error')
+      return message
+    }
 
-        if (noIndexFieldArr.length) {
-          message = this.$t(
-            'packages_business_verification_form_index_field_is_empty',
-          )
-          noIndexFieldArr.forEach((el, elIndex) => {
-            if (elIndex <= SHOW_COUNT) {
-              message += `${elIndex > 0 ? ', ' : ''}${el.source.table}`
-              // message += `${el.target.table} `
-            }
-          })
-          if (noIndexFieldArr.length > SHOW_COUNT) {
-            message += ` ...` // (${noIndexFieldArr.length - SHOW_COUNT})
-          }
-          this.updateErrorMsg(message, 'warn')
-          return
+    if (noIndexFieldArr.length) {
+      message = i18n.t(
+        'packages_business_verification_form_index_field_is_empty',
+      )
+      noIndexFieldArr.forEach((el, elIndex) => {
+        if (elIndex <= SHOW_COUNT) {
+          message += `${elIndex > 0 ? ', ' : ''}${el.source.table}`
         }
+      })
+      if (noIndexFieldArr.length > SHOW_COUNT) {
+        message += ` ...`
+      }
+      updateErrorMsg(message, 'warn')
+      return
+    }
 
-        // 判断表字段校验时，索引字段是否个数一致
-        const countNotArr = tasks.filter(
-          (c) =>
-            c.source.sortColumn.split(',').length !==
-            c.target.sortColumn.split(',').length,
-        )
-        if (countNotArr.length) {
-          //校验条件{val}中源表与目标表的索引字段个数不相等
-          // this.$nextTick(() => {
-          //   let item = document.getElementById('item-source-' + (index - 1))
-          //   item.querySelector('input').focus()
-          // })
-          message = this.$t(
-            'packages_business_verification_form_index_field_count_is_not_equal',
-          )
-          countNotArr.forEach((el, elIndex) => {
-            if (elIndex <= SHOW_COUNT) {
-              message += `${el.source.table} `
-              message += `${el.target.table} `
-            }
-          })
-          if (countNotArr.length > SHOW_COUNT) {
-            message += `...${countNotArr.length - SHOW_COUNT}`
-          }
-          // this.jointErrorMessage = message
-          this.updateErrorMsg(message, 'warn')
-          return
+    // 判断表字段校验时，索引字段是否个数一致
+    const countNotArr = tasks.filter(
+      (c) =>
+        c.source.sortColumn.split(',').length !==
+        c.target.sortColumn.split(',').length,
+    )
+    if (countNotArr.length) {
+      message = i18n.t(
+        'packages_business_verification_form_index_field_count_is_not_equal',
+      )
+      countNotArr.forEach((el, elIndex) => {
+        if (elIndex <= SHOW_COUNT) {
+          message += `${el.source.table} `
+          message += `${el.target.table} `
         }
+      })
+      if (countNotArr.length > SHOW_COUNT) {
+        message += `...${countNotArr.length - SHOW_COUNT}`
+      }
+      updateErrorMsg(message, 'warn')
+      return
+    }
 
-        // 判断过滤设置是否填写完整
-        let schemaToFormFlag = false
-        for (const [i, task] of tasks.entries()) {
-          await this.$refs[`schemaToForm_${task.id}`]?.[0]
-            ?.validate?.()
-            .catch(() => {
-              index = i + 1
-              schemaToFormFlag = true
-            })
-        }
-        if (schemaToFormFlag) {
-          message = this.$t(
-            'packages_business_verification_message_error_joint_table_target_or_source_filter_not_set',
-            {
-              val: index,
-            },
-          )
-          this.updateErrorMsg(message, 'error')
-          return message
-        }
+    // 判断过滤设置是否填写完整
+    let schemaToFormFlag = false
+    for (const [i, task] of tasks.entries()) {
+      await fieldDialog.value?.[`schemaToForm_${task.id}`]?.[0]
+        ?.validate?.()
+        .catch(() => {
+          index = i + 1
+          schemaToFormFlag = true
+        })
+    }
+    if (schemaToFormFlag) {
+      message = i18n.t(
+        'packages_business_verification_message_error_joint_table_target_or_source_filter_not_set',
+        {
+          val: index,
+        },
+      )
+      updateErrorMsg(message, 'error')
+      return message
+    }
 
-        // 开启高级校验后，JS校验逻辑不能为空
-        if (
-          this.inspectMethod === 'field' &&
-          tasks.some((c, i) => {
-            index = i + 1
-            return c.showAdvancedVerification && !c.webScript
-          })
-        ) {
-          message = this.$t(
-            'packages_business_verification_message_error_script_no_enter',
-          )
-          this.updateErrorMsg(message, 'error')
-          return message
-        }
-      } else if (this.inspectMethod === 'row_count') {
-        // 检查数据源的能力
-        message = this.validateCapabilities(tasks, 'batch_count_function')
-        if (message) return message
-      } else if (this.inspectMethod === 'hash') {
-        message = this.validateCapabilities(
-          tasks,
-          'query_hash_by_advance_filter_function',
-        )
-        if (message) return message
-      }
+    // 开启高级校验后，JS校验逻辑不能为空
+    if (
+      props.inspectMethod === 'field' &&
+      tasks.some((c, i) => {
+        index = i + 1
+        return c.showAdvancedVerification && !c.webScript
+      })
+    ) {
+      message = i18n.t(
+        'packages_business_verification_message_error_script_no_enter',
+      )
+      updateErrorMsg(message, 'error')
+      return message
+    }
+  } else if (props.inspectMethod === 'row_count') {
+    // 检查数据源的能力
+    message = validateCapabilities(tasks, 'batch_count_function')
+    if (message) return message
+  } else if (props.inspectMethod === 'hash') {
+    message = validateCapabilities(
+      tasks,
+      'query_hash_by_advance_filter_function',
+    )
+    if (message) return message
+  }
 
-      this.updateErrorMsg('')
-    },
+  updateErrorMsg('')
+}
 
-    validateCapabilities(tasks, capability) {
-      const noSupportList = new Set()
-      tasks.forEach((item) => {
-        if (!item.source.capabilities?.find((c) => c.id === capability)) {
-          noSupportList.add(item.source.databaseType)
-        }
+const validateCapabilities = (tasks: any[], capability: string) => {
+  const noSupportList = new Set()
+  tasks.forEach((item) => {
+    if (!item.source.capabilities?.find((c: any) => c.id === capability)) {
+      noSupportList.add(item.source.databaseType)
+    }
 
-        if (!item.target.capabilities?.find((c) => c.id === capability)) {
-          noSupportList.add(item.target.databaseType)
-        }
-      })
+    if (!item.target.capabilities?.find((c: any) => c.id === capability)) {
+      noSupportList.add(item.target.databaseType)
+    }
+  })
 
-      let message = ''
+  let message = ''
 
-      if (noSupportList.size) {
-        message = this.$t('packages_business_not_support_validation', {
-          connection: [...noSupportList].join(', '),
-          method: inspectMethodMap[this.inspectMethod],
-        })
-        this.updateErrorMsg(message, 'error')
-        this.$message.error(message)
-      }
+  if (noSupportList.size) {
+    message = i18n.t('packages_business_not_support_validation', {
+      connection: [...noSupportList].join(', '),
+      method: inspectMethodMap[props.inspectMethod],
+    })
+    updateErrorMsg(message, 'error')
+    ElMessage.error(message)
+  }
 
-      return message
-    },
+  return message
+}
 
-    loadDoc() {
-      if (this.$i18n.locale === 'en') {
-        this.doc = `##### Advanced Verification Instructions
+const loadDoc = () => {
+  if (i18n.locale === 'en') {
+    doc.value = `##### Advanced Verification Instructions
 **The first step** The function input parameter is the source table data, you can call the **built-in function** according to the source table data to query the target data<br>
 **Step 2** Custom verification logic<br>
 **Step 3** The function returns the result<br>
@@ -1920,8 +1338,8 @@ return {result: 'failed', message: "Inconsistent records", data: targetRow}
 }
 }
 \`\`\`\``
-      } else if (this.$i18n.locale === 'zh-TW') {
-        this.doc = `##### 高級校驗說明
+  } else if (i18n.locale === 'zh-TW') {
+    doc.value = `##### 高級校驗說明
 **第一步** 函數入參為源表數據，可以根據源表數據調用**內置函數**查詢出目標數據<br>
 **第二步** 自定義校驗邏輯<br>
 **第三步** 函數返回結果<br>
@@ -1945,8 +1363,8 @@ return {result: 'failed',message: "記錄不一致",data: targetRow}
 }
 }
 \`\`\``
-      } else {
-        this.doc = `##### 高级校验说明
+  } else {
+    doc.value = `##### 高级校验说明
 **第一步** 函数入参为源表数据，可以根据源表数据调用**内置函数**查询出目标数据<br>
 **第二步** 自定义校验逻辑<br>
 **第三步** 函数返回结果<br>
@@ -1971,173 +1389,176 @@ return {result: 'failed',message: "记录不一致",data: targetRow}
 }
 \`\`\`
 `
-      }
-    },
+  }
+}
 
-    getModeTypeDisabled(item) {
-      return (
-        !item.source.connectionId ||
-        !item.source.table ||
-        !item.target.connectionId ||
-        !item.target.table
-      )
-    },
+const getModeTypeDisabled = (item: any) => {
+  return (
+    !item.source.connectionId ||
+    !item.source.table ||
+    !item.target.connectionId ||
+    !item.target.table
+  )
+}
 
-    handlePageChange(page) {
-      this.currentPage = page
-    },
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+}
 
-    handleSizeChange(size) {
-      this.pageSize = size
-      // If changing page size would put us on a non-existent page, reset to page 1
-      if (this.currentPage > this.totalPages) {
-        this.currentPage = 1
-      }
-    },
+const handleSizeChange = (size: number) => {
+  pageSize.value = size
+  // If changing page size would put us on a non-existent page, reset to page 1
+  if (currentPage.value > totalPages.value) {
+    currentPage.value = 1
+  }
+}
 
-    handleCustomFields(item, index) {
-      this.$refs.fieldDialog.open(item, index, {
-        source: this.dynamicSchemaMap[item.source.connectionId],
-        target: this.dynamicSchemaMap[item.target.connectionId],
-      })
-    },
+const handleCustomFields = (item: any, index: number) => {
+  fieldDialog.value.open(item, index, {
+    source: dynamicSchemaMap[item.source.connectionId],
+    target: dynamicSchemaMap[item.target.connectionId],
+  })
+}
 
-    handleChangeModeType(val, item, index) {
-      if (val !== 'custom') {
-        item.source.columns = null
-        item.target.columns = null
-      } else {
-        this.handleCustomFields(item, index)
-      }
+const handleChangeModeType = (val: string, item: any, index: number) => {
+  if (val !== 'custom') {
+    item.source.columns = null
+    item.target.columns = null
+  } else {
+    handleCustomFields(item, index)
+  }
 
-      item.modeType = val // 防止 SchemaToForm 回流
-    },
+  item.modeType = val // 防止 SchemaToForm 回流
+}
 
-    handleChangeFields(data = [], index) {
-      const item = this.list[index]
-      item.source.columns = data.map((t) => t.source)
-      item.target.columns = data.map((t) => t.target)
-      // 设置modeType
-      this.$refs[`schemaToForm_${item.id}`].form.setValuesIn(
-        'modeType',
-        'custom',
-      )
-    },
+const handleChangeFields = (data: any[] = [], index: number) => {
+  const item = list.value[index]
+  item.source.columns = data.map((t) => t.source)
+  item.target.columns = data.map((t) => t.target)
+  // 设置modeType
+  fieldDialog.value[`schemaToForm_${item.id}`].form.setValuesIn(
+    'modeType',
+    'custom',
+  )
+}
 
-    handleFocus(opt = {}) {
-      if (opt.fields?.length) {
+const handleFocus = (opt: any = {}) => {
+  if (opt.fields?.length) {
+    return
+  }
+  const connectionId = opt.connectionId
+  const params = {
+    where: {
+      meta_type: 'table',
+      sourceType: 'SOURCE',
+      original_name: opt.table,
+      'source._id': connectionId,
+    },
+    limit: 1,
+  }
+  metadataInstancesApi
+    .tapTables({
+      filter: JSON.stringify(params),
+    })
+    .then((data: any = {}) => {
+      if (isEmpty(data.data.items[0]?.nameFieldMap)) {
         return
       }
-      const connectionId = opt.connectionId
-      const params = {
-        where: {
-          meta_type: 'table',
-          sourceType: 'SOURCE',
-          original_name: opt.table,
-          'source._id': connectionId,
-        },
-        limit: 1,
-      }
-      metadataInstancesApi
-        .tapTables({
-          filter: JSON.stringify(params),
-        })
-        .then((data = {}) => {
-          if (isEmpty(data.items[0]?.nameFieldMap)) {
-            return
-          }
-          opt.fields = Object.values(data.items[0]?.nameFieldMap || {}).map(
-            (t) => {
-              return {
-                id: t.id,
-                label: t.fieldName,
-                value: t.fieldName,
-                field_name: t.fieldName,
-                primary_key_position: t.primaryKey,
-                data_type: t.dataType,
-                primaryKey: t.primaryKey,
-                unique: t.unique,
-                type: t.dataType,
-                tapType: JSON.stringify(t.tapType),
-              }
-            },
-          )
-        })
-    },
-
-    /**
-     * Gets capabilities for the provided connection IDs
-     * @param {string[]} connectionIds - Array of connection IDs to fetch capabilities for
-     * @returns {Promise<Object.<string, {capabilities: Array, tags: Array}>>} Map of connection IDs to their capabilities and tags
-     */
-    async getCapabilities(connectionIds = []) {
-      if (!connectionIds.length) return
-
-      const map = {}
-
-      await Promise.all(
-        connectionIds.map(async (id) => {
-          const { capabilities, tags } =
-            await this.getConnectionCapabilities(id)
-          map[id] = {
-            capabilities,
-            tags,
+      opt.fields = Object.values(data.data.items[0]?.nameFieldMap || {}).map(
+        (t: any) => {
+          return {
+            id: t.id,
+            label: t.fieldName,
+            value: t.fieldName,
+            field_name: t.fieldName,
+            primary_key_position: t.primaryKey,
+            data_type: t.dataType,
+            primaryKey: t.primaryKey,
+            unique: t.unique,
+            type: t.dataType,
+            tapType: JSON.stringify(t.tapType),
           }
-        }),
+        },
       )
+    })
+}
 
-      this.capabilitiesMap = map
-
-      return map
-    },
+const getCapabilities = async (connectionIds: string[] = []) => {
+  if (!connectionIds.length) return
 
-    // 获取匹配节点的Capabilities
-    getMatchCapabilitiesMap() {
-      const list = cloneDeep(this.allStages)
-      return list.reduce((cur, pre) => {
-        cur[pre.connectionId] = pre.attrs?.capabilities
-        return cur
-      }, {})
-    },
+  const map = {}
 
-    async getConnectionCapabilities(id) {
-      const data = await connectionsApi.getNoSchema(id)
-      return {
-        capabilities: data?.capabilities || [],
-        tags: data?.definitionTags || [],
+  await Promise.all(
+    connectionIds.map(async (id) => {
+      const { capabilities, tags } = await getConnectionCapabilities(id)
+      map[id] = {
+        capabilities,
+        tags,
       }
-    },
+    }),
+  )
 
-    updateErrorMsg(msg, level = '') {
-      $emit(this, 'update:jointErrorMessage', msg)
-      $emit(this, 'update:errorMessageLevel', level)
-    },
+  // 重置 capabilitiesMap 后再更新
+  Object.keys(capabilitiesMap).forEach((key) => {
+    delete capabilitiesMap[key]
+  })
+  Object.assign(capabilitiesMap, map)
 
-    updateAutoAddTableLoading() {
-      $emit(this, 'update:autoAddTableLoading', this.autoAddTableLoading)
-    },
+  return map
+}
 
-    toggleCollate(item, value) {
-      if (value) {
-        const fields = Object.keys(item.collate || {})
+const getMatchCapabilitiesMap = () => {
+  const list = cloneDeep(props.allStages)
+  return list.reduce((cur: any, pre: any) => {
+    cur[pre.connectionId] = pre.attrs?.capabilities
+    return cur
+  }, {})
+}
 
-        if (fields.length || !item.sortColumn) return
+const getConnectionCapabilities = async (id: string) => {
+  const data = await connectionsApi.getNoSchema(id)
+  return {
+    capabilities: data?.capabilities || [],
+    tags: data?.definitionTags || [],
+  }
+}
 
-        const sortColumn = item.sortColumn.split(',')
+const updateErrorMsg = (msg: string, level = '') => {
+  emit('update:jointErrorMessage', msg)
+  emit('update:errorMessageLevel', level)
+}
 
-        item.collate = sortColumn.reduce((acc, key) => {
-          acc[key] = ''
-          return acc
-        }, {})
-      }
-    },
-  },
-  emits: [
-    'update:jointErrorMessage',
-    'update:errorMessageLevel',
-    'update:autoAddTableLoading',
-  ],
+const updateAutoAddTableLoading = () => {
+  emit('update:autoAddTableLoading', autoAddTableLoading.value)
 }
+
+const toggleCollate = (item: any, value: boolean) => {
+  if (value) {
+    const fields = Object.keys(item.collate || {})
+
+    if (fields.length || !item.sortColumn) return
+
+    const sortColumn = item.sortColumn.split(',')
+
+    item.collate = sortColumn.reduce((acc: any, key: string) => {
+      acc[key] = ''
+      return acc
+    }, {})
+  }
+}
+
+// Lifecycle Hooks
+onMounted(() => {
+  loadDoc()
+})
+
+// Expose methods to parent component
+defineExpose({
+  autoAddTable,
+  getList,
+  validate,
+  getCapabilities,
+})
 </script>
 
 <template>
@@ -2468,7 +1889,7 @@ return {result: 'failed',message: "记录不一致",data: targetRow}
           <div v-show="inspectMethod === 'field'" class="setting-item mt-4">
             <ElCheckbox
               v-model="item.showAdvancedVerification"
-              @change="handleChangeAdvanced(item, $event)"
+              @change="handleChangeAdvanced(item)"
               >{{ $t('packages_business_verification_advanceVerify') }}
             </ElCheckbox>
           </div>
@@ -2496,7 +1917,7 @@ return {result: 'failed',message: "记录不一致",data: targetRow}
                 text
                 type="primary"
                 class="ml-4"
-                @click="removeScript(item, index)"
+                @click="removeScript(item)"
                 >{{ $t('public_button_delete') }}
               </ElButton>
             </template>

From 235582ff1ffbc55c162ee14514183c0377e96a9a Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Wed, 30 Apr 2025 09:21:20 +0800
Subject: [PATCH 2/7] refactor: update import statement and rename route in
 MigrationForm component

- Changed WSClient import to named import for consistency.
- Renamed route from 'MigrationEditor' to 'MigrateForm' for clarity in routing.
---
 apps/cloud/src/init.js             | 2 +-
 packages/dag/src/MigrationForm.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/cloud/src/init.js b/apps/cloud/src/init.js
index ce92ae42b5..8583ffbfa6 100644
--- a/apps/cloud/src/init.js
+++ b/apps/cloud/src/init.js
@@ -1,5 +1,5 @@
 import { timeStampApi } from '@tap/api'
-import WSClient from '@tap/business/src/shared/ws-client'
+import { WSClient } from '@tap/business/src/shared/ws-client'
 import { installElement, VButton, VIcon } from '@tap/component'
 import Time from '@tap/shared/src/time'
 import { ElLoading } from 'element-plus'
diff --git a/packages/dag/src/MigrationForm.vue b/packages/dag/src/MigrationForm.vue
index fffce03511..559a012673 100644
--- a/packages/dag/src/MigrationForm.vue
+++ b/packages/dag/src/MigrationForm.vue
@@ -356,7 +356,7 @@ const getNewTask = async () => {
 
   if (newTask) {
     await router.replace({
-      name: 'MigrationEditor',
+      name: 'MigrateForm',
       params: { id: newTask.id },
       query: {
         ...route.query,

From f40d973a77cea7872ed533d6162e8e6149ff5a76 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Fri, 2 May 2025 16:34:47 +0800
Subject: [PATCH 3/7] refactor: enhance Form.vue and ConditionBox.vue with
 Composition API and reactive state management TAP-6487

- Converted Form.vue and ConditionBox.vue to use the Composition API with `<script setup>`.
- Replaced observable with reactive for form state management in Form.vue.
- Improved data handling and validation logic for form inputs.
- Injected form data into ConditionBox.vue for better state management.
- Cleaned up commented-out code and improved overall component structure for clarity.
---
 .../business/src/views/verification/Form.vue  | 135 +--
 .../verification/components/ConditionBox.vue  | 816 ++++++++++++++++--
 .../verification/components/DocsDrawer.vue    |  79 +-
 packages/form/src/SchemaForm.vue              | 320 +++++++
 .../src/components/field-select/index.jsx     |   3 -
 packages/form/src/index.js                    |  19 +-
 6 files changed, 1171 insertions(+), 201 deletions(-)
 create mode 100644 packages/form/src/SchemaForm.vue

diff --git a/packages/business/src/views/verification/Form.vue b/packages/business/src/views/verification/Form.vue
index af6671c10d..ad63fd74a5 100644
--- a/packages/business/src/views/verification/Form.vue
+++ b/packages/business/src/views/verification/Form.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { observable } from '@formily/reactive'
 import { inspectApi, taskApi } from '@tap/api'
-import { AsyncSelect, computed as reactiveComputed } from '@tap/form'
+import { AsyncSelect } from '@tap/form'
 import i18n from '@tap/i18n'
 import Time from '@tap/shared/src/time'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { cloneDeep } from 'lodash-es'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, provide, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import PageContainer from '../../components/PageContainer.vue'
@@ -80,7 +79,7 @@ const defaultTime = ref([
   new Date(2025, 2, 1, 23, 59, 59),
 ])
 
-const formObs = observable<FormData>({
+const form = reactive({
   flowId: '',
   name: '',
   mode: 'manual',
@@ -132,62 +131,6 @@ const formObs = observable<FormData>({
   ],
 })
 
-const form = reactiveComputed(() => {
-  return formObs
-})
-
-// const form = ref<FormData>({
-//   flowId: '',
-//   name: '',
-//   mode: 'manual',
-//   inspectDifferenceMode: 'All',
-//   inspectMethod: 'row_count',
-//   cdcBeginDate: '',
-//   cdcEndDate: '',
-//   cdcDuration: '',
-//   timing: {
-//     intervals: 24 * 60,
-//     intervalsUnit: 'minute',
-//     start: Time.now(),
-//     end: Time.now() + 24 * 60 * 60 * 1000,
-//   },
-//   limit: {
-//     keep: 100,
-//   },
-//   enabled: true,
-//   tasks: [],
-//   taskMode: 'pipeline',
-//   errorNotifys: ['SYSTEM', 'EMAIL'],
-//   inconsistentNotifys: ['SYSTEM', 'EMAIL'],
-//   checkTableThreadNum: 10,
-//   alarmSettings: [
-//     {
-//       type: 'INSPECT',
-//       key: 'INSPECT_TASK_ERROR',
-//       notify: ['SYSTEM', 'EMAIL'],
-//       open: true,
-//     },
-//     {
-//       type: 'INSPECT',
-//       key: 'INSPECT_COUNT_ERROR',
-//       notify: ['SYSTEM', 'EMAIL'],
-//       open: true,
-//       params: {
-//         maxDifferentialRows: 0,
-//       },
-//     },
-//     {
-//       type: 'INSPECT',
-//       key: 'INSPECT_VALUE_ERROR',
-//       notify: ['SYSTEM', 'EMAIL'],
-//       open: true,
-//       params: {
-//         maxDifferentialValues: 0,
-//       },
-//     },
-//   ],
-// })
-
 const requiredValidator = (msg: string, check?: () => boolean) => {
   return (rule: any, value: any, callback: any) => {
     const valid = check ? check() : true
@@ -200,7 +143,7 @@ const requiredValidator = (msg: string, check?: () => boolean) => {
 }
 
 const checkMode = () => {
-  return form.value.mode === 'cron'
+  return form.mode === 'cron'
 }
 
 const rules = ref({
@@ -239,7 +182,7 @@ const rules = ref({
       validator: requiredValidator(
         i18n.t('packages_business_verification_form_qingshurukaishi'),
         () => {
-          return form.value.inspectMethod === 'cdcCount'
+          return form.inspectMethod === 'cdcCount'
         },
       ),
     },
@@ -269,17 +212,14 @@ const saveDisabled = computed(() => {
 })
 
 const isCountOrHash = computed(() => {
-  return (
-    form.value.inspectMethod === 'row_count' ||
-    form.value.inspectMethod === 'hash'
-  )
+  return form.inspectMethod === 'row_count' || form.inspectMethod === 'hash'
 })
 
 onMounted(() => {
   // 设置form.taskMode
   const taskMode = route.query.taskMode
   if (taskMode) {
-    form.value.taskMode = taskMode
+    form.taskMode = taskMode
   }
 
   const id = route.params.id
@@ -334,7 +274,7 @@ const getData = async (id: string) => {
     })
 
     if (data) {
-      if (form.value.taskMode === 'pipeline' && data.flowId) {
+      if (form.taskMode === 'pipeline' && data.flowId) {
         taskName.value = data.taskDto.name
         applyTask(data.taskDto)
       }
@@ -363,13 +303,14 @@ const getData = async (id: string) => {
       })
 
       if (!data.timing) {
-        data.timing = form.value.timing
+        data.timing = form.timing
       }
       data.taskMode = data.flowId ? 'pipeline' : 'random'
+
       // 历史数据，默认不打开；新数据默认打开
       const { alarmSettings = [] } = data
       data.alarmSettings =
-        form.value.alarmSettings?.map((t) => {
+        form.alarmSettings?.map((t) => {
           const f = alarmSettings.find((item) => item.key === t.key)
           if (f) return Object.assign(t, f)
           t.notify = []
@@ -377,7 +318,7 @@ const getData = async (id: string) => {
           return t
         }) || []
 
-      form.value = Object.assign({}, form.value, data)
+      Object.assign(form, data)
     }
   } catch (error) {
     console.error(error)
@@ -387,7 +328,7 @@ const getData = async (id: string) => {
 const getFlowStages = async (id: string, cb?: () => void) => {
   loading.value = true
   try {
-    id = id || form.value.flowId
+    id = id || form.flowId
     const data = await taskApi.getId(id)
     loading.value = false
     applyTask(data, cb)
@@ -444,8 +385,8 @@ const applyTask = (task: any, cb?: () => void) => {
 }
 
 const timingChangeHandler = (times: any) => {
-  form.value.timing.start = times?.[0] || ''
-  form.value.timing.end = times?.[1] || ''
+  form.timing.start = times?.[0] || ''
+  form.timing.end = times?.[1] || ''
 }
 
 const goBack = () => {
@@ -470,8 +411,8 @@ const save = async (saveOnly = false) => {
       // 自动过滤出完整数据，以及索引字段数量不相等的情况
       tasks = tasks.filter((t) => {
         if (
-          form.value.inspectMethod === 'row_count' ||
-          form.value.inspectMethod === 'hash'
+          form.inspectMethod === 'row_count' ||
+          form.inspectMethod === 'hash'
         ) {
           return t.source.table && t.target.table
         }
@@ -492,7 +433,7 @@ const save = async (saveOnly = false) => {
         return ElMessage.error(validateMsg)
       }
 
-      if (form.value.inspectMethod === 'jointField') {
+      if (form.inspectMethod === 'jointField') {
         tasks.forEach((item) => {
           item.fullMatch = false
         })
@@ -501,22 +442,22 @@ const save = async (saveOnly = false) => {
           item.fullMatch = true
         })
       }
-      if (form.value && form.value.createTime && form.value.last_updated) {
-        delete form.value.createTime
-        delete form.value.last_updated
+      if (form && form.createTime && form.last_updated) {
+        delete form.createTime
+        delete form.last_updated
       }
 
       const alarmSettingsKeys =
-        form.value.inspectMethod === 'row_count'
+        form.inspectMethod === 'row_count'
           ? ['INSPECT_TASK_ERROR', 'INSPECT_COUNT_ERROR']
           : ['INSPECT_TASK_ERROR', 'INSPECT_VALUE_ERROR']
-      const alarmSettings = form.value.alarmSettings.filter((t) =>
+      const alarmSettings = form.alarmSettings.filter((t) =>
         alarmSettingsKeys.includes(t.key),
       )
 
-      await inspectApi[form.value.id ? 'patch' : 'post'](
-        Object.assign({}, form.value, {
-          fullMatchKeep: form.value.keep,
+      await inspectApi[form.id ? 'patch' : 'post'](
+        Object.assign({}, form, {
+          fullMatchKeep: form.keep,
           status: saveOnly ? 'waiting' : 'scheduling',
           ping_time: 0,
           tasks: tasks.map(
@@ -566,13 +507,13 @@ const save = async (saveOnly = false) => {
 }
 
 const handleChangeAlarmItem = () => {
-  form.value.alarmSettings[0].open = !!form.value.alarmSettings[0].notify.length
-  form.value.alarmSettings[1].open = !!form.value.alarmSettings[1].notify.length
-  form.value.alarmSettings[2].open = !!form.value.alarmSettings[2].notify.length
+  form.alarmSettings[0].open = !!form.alarmSettings[0].notify.length
+  form.alarmSettings[1].open = !!form.alarmSettings[1].notify.length
+  form.alarmSettings[2].open = !!form.alarmSettings[2].notify.length
 }
 
 const handleChangeAlarm = (val: boolean, index = 0) => {
-  form.value.alarmSettings[index].notify = val ? ['SYSTEM', 'EMAIL'] : []
+  form.alarmSettings[index].notify = val ? ['SYSTEM', 'EMAIL'] : []
 }
 
 const handleChangeInspectMethod = () => {
@@ -586,32 +527,27 @@ const handleChangeInspectMethod = () => {
 
 const setVerifyName = () => {
   // 任务模式
-  if (form.value.taskMode === 'pipeline') {
-    form.value.name = `${taskName.value} - ${inspectMethodMap[form.value.inspectMethod]}`
+  if (form.taskMode === 'pipeline') {
+    form.name = `${taskName.value} - ${inspectMethodMap[form.inspectMethod]}`
   }
 }
 
 const handleSelectTask = (task: any, byClick: boolean) => {
   if (byClick) {
-    form.value.tasks = []
+    form.tasks = []
     taskName.value = task.name
     setVerifyName()
     getFlowStages(task.id, conditionBox.value.autoAddTable)
   }
 }
 
-console.log('form', form, formObs)
+provide('formData', form)
 </script>
 
 <template>
   <PageContainer mode="auto">
     <section v-loading="loading">
       <div>
-        <ElInput
-          v-model="form.name"
-          class="form-input"
-          @change="handleChangeName"
-        />
         <ElForm
           ref="baseForm"
           class="grey"
@@ -628,10 +564,9 @@ console.log('form', form, formObs)
             prop="flowId"
             :label="`${$t('packages_business_verification_chooseJob')}: `"
           >
-            {{ form.flowId }}
             <AsyncSelect
               v-model="form.flowId"
-              class="form-item-width"
+              class="form-input"
               :method="getTaskOptions"
               :current-label="taskName"
               item-label="name"
diff --git a/packages/business/src/views/verification/components/ConditionBox.vue b/packages/business/src/views/verification/components/ConditionBox.vue
index 61f4ac601e..dbfaf87e6e 100644
--- a/packages/business/src/views/verification/components/ConditionBox.vue
+++ b/packages/business/src/views/verification/components/ConditionBox.vue
@@ -2,9 +2,8 @@
 import { action } from '@formily/reactive'
 import { connectionsApi, metadataInstancesApi } from '@tap/api'
 import { GitBook, VCodeEditor } from '@tap/component'
-import resize from '@tap/component/src/directives/resize'
 import SwitchNumber from '@tap/component/src/SwitchNumber.vue'
-import { AsyncSelect, SchemaToForm } from '@tap/form'
+import { AsyncSelect, SchemaForm } from '@tap/form'
 import i18n from '@tap/i18n'
 import { uuid } from '@tap/shared'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -16,8 +15,15 @@ import {
   merge,
   uniqBy,
 } from 'lodash-es'
-import { computed, defineExpose, onMounted, reactive, ref, watch } from 'vue'
-import { $emit } from '../../../../utils/gogocodeTransfer'
+import {
+  computed,
+  defineExpose,
+  inject,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
 import { CONNECTION_STATUS_MAP } from '../../../shared'
 import { inspectMethod as inspectMethodMap } from '../const'
 import CollateMap from './CollateMap.vue'
@@ -161,6 +167,10 @@ interface StageItem {
   databaseType: string
 }
 
+const formData = inject('formData')
+
+const list = computed(() => formData.tasks)
+
 // Props and Emits
 const props = withDefaults(defineProps<Props>(), {
   data: () => [],
@@ -173,7 +183,7 @@ const emit = defineEmits<Emits>()
 // Refs and Reactive State
 const showDoc = ref(false)
 const docPath = ref('')
-const list = ref<ConditionItem[]>([])
+// const list = ref<ConditionItem[]>([])
 const jointErrorMessage = ref('')
 const fieldsMap = reactive<Record<string, any[]>>({})
 const capabilitiesMap = reactive<Record<string, any>>({})
@@ -184,13 +194,699 @@ const formIndex = ref('')
 const webScript = ref('')
 const jsEngineName = ref('graal.js')
 const doc = ref('')
-const schemaData = ref(null)
 const currentPage = ref(1)
 const pageSize = ref(10)
 const autoSuggestJoinFields = ref(true)
 const searchValue = ref('')
 const fieldDialog = ref()
 
+// const list = computed(() => {
+//   return formData.tasks
+// })
+
+const formSchema = {
+  type: 'object',
+  properties: {
+    nameWrap: {
+      type: 'void',
+      'x-component': 'FormGrid',
+      'x-component-props': {
+        minColumns: 2,
+        maxColumns: 2,
+        columnGap: 16,
+      },
+      properties: {
+        source: {
+          type: 'object',
+          'x-component': 'FormGrid.GridColumn',
+          properties: {
+            databaseType: {
+              type: 'string',
+              'x-display': 'hidden',
+            },
+            fields: {
+              type: 'array',
+              'x-display': 'hidden',
+            },
+            nodeSchema: {
+              type: 'array',
+              'x-display': 'hidden',
+              'x-reactions': [
+                `{{useAsyncDataSource(loadTableFieldList, 'value', $values.source)}}`,
+                {
+                  target: 'source.conditions.*.key',
+                  fulfill: {
+                    state: {
+                      loading: '{{$self.loading}}',
+                      dataSource: '{{$self.value}}',
+                    },
+                  },
+                },
+              ],
+            },
+            enableCustomCommand: {
+              title: i18n.t(
+                'packages_business_components_conditionbox_laiyuanbiaoshuju',
+              ),
+              type: 'boolean',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                className: 'item-control-horizontal',
+                layout: 'horizontal',
+                tooltip: i18n.t(
+                  'packages_business_components_conditionbox_enableCustomCommand_tip',
+                ),
+              },
+              'x-component': 'Switch',
+              default: false,
+              'x-reactions': [
+                {
+                  fulfill: {
+                    state: {
+                      visible: `{{$values.source.capabilities && $values.source.capabilities.some(item => item.id === 'execute_command_function')}}`,
+                    },
+                  },
+                },
+              ],
+            },
+            customCommand: {
+              type: 'object',
+              properties: {
+                command: {
+                  title: ' ',
+                  'x-decorator-props': {
+                    colon: false,
+                  },
+                  type: 'string',
+                  default: 'executeQuery',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Radio.Group',
+                  enum: [
+                    { label: i18n.t('public_query'), value: 'executeQuery' },
+                    { label: i18n.t('public_aggregate'), value: 'aggregate' },
+                  ],
+                  'x-reactions': {
+                    dependencies: ['source.databaseType'],
+                    fulfill: {
+                      state: {
+                        display:
+                          '{{$deps[0].toLowerCase().includes("mongo")?"visible":"hidden"}}',
+                      },
+                    },
+                  },
+                },
+                params: {
+                  type: 'object',
+                  properties: {
+                    mongoQuery: {
+                      title: ' ',
+                      'x-decorator-props': {
+                        colon: false,
+                      },
+                      type: 'void',
+                      'x-reactions': {
+                        dependencies: [
+                          'source.customCommand.command',
+                          'source.databaseType',
+                        ],
+                        fulfill: {
+                          state: {
+                            visible:
+                              '{{$deps[1].toLowerCase().includes("mongo") && $deps[0]==="executeQuery"}}',
+                          },
+                        },
+                      },
+                      properties: {
+                        op: {
+                          type: 'string',
+                          default: 'find',
+                        },
+                        collection: {
+                          type: 'string',
+                          'x-reactions': {
+                            fulfill: {
+                              state: {
+                                value: '{{$values.tableName}}',
+                              },
+                            },
+                          },
+                        },
+                        filter: {
+                          title: ' ',
+                          'x-decorator-props': {
+                            colon: false,
+                            feedbackLayout: 'none',
+                          },
+                          type: 'string',
+                          'x-decorator': 'FormItem',
+                          'x-component': 'JsonEditor',
+                          'x-component-props': {
+                            options: {
+                              showPrintMargin: false,
+                              useWrapMode: true,
+                            },
+                          },
+                        },
+                        descWrap: {
+                          type: 'void',
+                          title: ' ',
+                          'x-decorator': 'FormItem',
+                          'x-decorator-props': {
+                            colon: false,
+                            feedbackLayout: 'none',
+                          },
+                          'x-component': 'div',
+                          'x-component-props': {
+                            class: 'flex align-center flex-wrap',
+                          },
+                          properties: {
+                            desc: {
+                              type: 'void',
+                              'x-component': 'div',
+                              'x-component-props': {
+                                style: {
+                                  color: '#909399',
+                                },
+                              },
+                              'x-content': i18n.t(
+                                'packages_dag_nodes_table_jinzhichiqu',
+                              ),
+                            },
+                            link: {
+                              type: 'void',
+                              'x-component': 'Button',
+                              'x-component-props': {
+                                text: true,
+                                type: 'primary',
+                                onClick: '{{openApiDrawer}}',
+                              },
+                              'x-content': i18n.t(
+                                'packages_business_view_more_apis',
+                              ),
+                            },
+                          },
+                        },
+                      },
+                    },
+                    mongoAgg: {
+                      title: ' ',
+                      'x-decorator-props': {
+                        colon: false,
+                      },
+                      type: 'void',
+                      'x-reactions': {
+                        dependencies: [
+                          'source.customCommand.command',
+                          'source.databaseType',
+                        ],
+                        fulfill: {
+                          state: {
+                            visible:
+                              '{{$deps[1].toLowerCase().includes("mongo") && $deps[0]==="aggregate"}}',
+                          },
+                        },
+                      },
+                      properties: {
+                        collection: {
+                          type: 'string',
+                          'x-reactions': {
+                            dependencies: ['source.tableName'],
+                            fulfill: {
+                              state: {
+                                value: '{{$deps[0]}}',
+                              },
+                            },
+                          },
+                        },
+                        pipeline: {
+                          title: ' ',
+                          'x-decorator-props': {
+                            colon: false,
+                            feedbackLayout: 'none',
+                          },
+                          type: 'string',
+                          'x-decorator': 'FormItem',
+                          'x-component': 'JsonEditor',
+                          'x-component-props': {
+                            options: {
+                              showPrintMargin: false,
+                              useWrapMode: true,
+                            },
+                          },
+                        },
+                        descWrap: {
+                          type: 'void',
+                          title: ' ',
+                          'x-decorator': 'FormItem',
+                          'x-decorator-props': {
+                            colon: false,
+                            feedbackLayout: 'none',
+                          },
+                          'x-component': 'div',
+                          'x-component-props': {
+                            class: 'flex align-center flex-wrap',
+                          },
+                          properties: {
+                            desc: {
+                              type: 'void',
+                              'x-component': 'div',
+                              'x-component-props': {
+                                style: {
+                                  color: '#909399',
+                                },
+                              },
+                              'x-content': i18n.t(
+                                'packages_dag_nodes_table_shiligro',
+                              ),
+                            },
+                            link: {
+                              type: 'void',
+                              'x-component': 'Button',
+                              'x-component-props': {
+                                text: true,
+                                type: 'primary',
+                                onClick: '{{openApiDrawer}}',
+                              },
+                              'x-content': i18n.t(
+                                'packages_business_view_more_apis',
+                              ),
+                            },
+                          },
+                        },
+                      },
+                    },
+                    sql: {
+                      title: ' ',
+                      'x-decorator-props': {
+                        colon: false,
+                      },
+                      type: 'string',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'SqlEditor',
+                      'x-component-props': {
+                        options: { showPrintMargin: false, useWrapMode: true },
+                      },
+                      'x-reactions': {
+                        dependencies: [
+                          'source.enableCustomCommand',
+                          'source.databaseType',
+                        ],
+                        fulfill: {
+                          state: {
+                            visible:
+                              '{{!!$deps[0] && !$deps[1].toLowerCase().includes("mongo")}}',
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+              'x-reactions': [
+                {
+                  dependencies: ['source.enableCustomCommand'],
+                  fulfill: {
+                    state: {
+                      visible: `{{$deps[0]}}`,
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+        target: {
+          type: 'object',
+          'x-component': 'FormGrid.GridColumn',
+          properties: {
+            databaseType: {
+              type: 'string',
+              'x-display': 'hidden',
+            },
+            fields: {
+              type: 'array',
+              'x-display': 'hidden',
+            },
+            nodeSchema: {
+              type: 'array',
+              'x-display': 'hidden',
+              'x-reactions': [
+                `{{useAsyncDataSource(loadTableFieldList, 'value', $values.target)}}`,
+                {
+                  target: 'target.conditions.*.key',
+                  fulfill: {
+                    state: {
+                      loading: '{{$self.loading}}',
+                      dataSource: '{{$self.value}}',
+                    },
+                  },
+                },
+              ],
+            },
+            enableCustomCommand: {
+              title: i18n.t(
+                'packages_business_components_conditionbox_mubiaobiaoshuju',
+              ),
+              type: 'boolean',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                className: 'item-control-horizontal',
+                layout: 'horizontal',
+                labelWrap: true,
+                tooltip: i18n.t(
+                  'packages_business_components_conditionbox_enableCustomCommand_tip',
+                ),
+              },
+              'x-component': 'Switch',
+              default: false,
+              'x-reactions': [
+                {
+                  fulfill: {
+                    state: {
+                      visible: `{{$values.target.capabilities && $values.target.capabilities.some(item => item.id === 'execute_command_function')}}`,
+                    },
+                  },
+                },
+              ],
+            },
+            customCommand: {
+              type: 'object',
+              properties: {
+                command: {
+                  title: ' ',
+                  'x-decorator-props': {
+                    colon: false,
+                  },
+                  type: 'string',
+                  default: 'executeQuery',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Radio.Group',
+                  enum: [
+                    { label: i18n.t('public_query'), value: 'executeQuery' },
+                    { label: i18n.t('public_aggregate'), value: 'aggregate' },
+                  ],
+                  'x-reactions': {
+                    dependencies: ['target.databaseType'],
+                    fulfill: {
+                      state: {
+                        display:
+                          '{{$deps[0].toLowerCase().includes("mongo")?"visible":"hidden"}}',
+                      },
+                    },
+                  },
+                },
+                params: {
+                  type: 'object',
+                  properties: {
+                    mongoQuery: {
+                      title: ' ',
+                      'x-decorator-props': {
+                        colon: false,
+                      },
+                      type: 'void',
+                      'x-reactions': {
+                        dependencies: [
+                          'target.customCommand.command',
+                          'target.databaseType',
+                        ],
+                        fulfill: {
+                          state: {
+                            visible:
+                              '{{$deps[1].toLowerCase().includes("mongo") && $deps[0]==="executeQuery"}}',
+                          },
+                        },
+                      },
+                      properties: {
+                        op: {
+                          type: 'string',
+                          default: 'find',
+                        },
+                        collection: {
+                          type: 'string',
+                          'x-reactions': {
+                            fulfill: {
+                              state: {
+                                value: '{{$values.tableName}}',
+                              },
+                            },
+                          },
+                        },
+                        filter: {
+                          title: ' ',
+                          'x-decorator-props': {
+                            colon: false,
+                            feedbackLayout: 'none',
+                          },
+                          type: 'string',
+                          'x-decorator': 'FormItem',
+                          'x-component': 'JsonEditor',
+                          'x-component-props': {
+                            options: {
+                              showPrintMargin: false,
+                              useWrapMode: true,
+                            },
+                          },
+                        },
+                        descWrap: {
+                          type: 'void',
+                          title: ' ',
+                          'x-decorator': 'FormItem',
+                          'x-decorator-props': {
+                            colon: false,
+                            feedbackLayout: 'none',
+                          },
+                          'x-component': 'div',
+                          'x-component-props': {
+                            class: 'flex align-center flex-wrap',
+                          },
+                          properties: {
+                            desc: {
+                              type: 'void',
+                              'x-component': 'div',
+                              'x-component-props': {
+                                style: {
+                                  color: '#909399',
+                                },
+                              },
+                              'x-content': i18n.t(
+                                'packages_dag_nodes_table_jinzhichiqu',
+                              ),
+                            },
+                            link: {
+                              type: 'void',
+                              'x-component': 'Button',
+                              'x-component-props': {
+                                text: true,
+                                type: 'primary',
+                                onClick: '{{openApiDrawer}}',
+                              },
+                              'x-content': i18n.t(
+                                'packages_business_view_more_apis',
+                              ),
+                            },
+                          },
+                        },
+                      },
+                    },
+                    mongoAgg: {
+                      title: ' ',
+                      'x-decorator-props': {
+                        colon: false,
+                      },
+                      type: 'void',
+                      'x-reactions': {
+                        dependencies: [
+                          'target.customCommand.command',
+                          'target.databaseType',
+                        ],
+                        fulfill: {
+                          state: {
+                            visible:
+                              '{{$deps[1].toLowerCase().includes("mongo") && $deps[0]==="aggregate"}}',
+                          },
+                        },
+                      },
+                      properties: {
+                        collection: {
+                          type: 'string',
+                          'x-reactions': {
+                            dependencies: ['target.tableName'],
+                            fulfill: {
+                              state: {
+                                value: '{{$deps[0]}}',
+                              },
+                            },
+                          },
+                        },
+                        pipeline: {
+                          title: ' ',
+                          'x-decorator-props': {
+                            colon: false,
+                            feedbackLayout: 'none',
+                          },
+                          type: 'string',
+                          'x-decorator': 'FormItem',
+                          'x-component': 'JsonEditor',
+                          'x-component-props': {
+                            options: {
+                              showPrintMargin: false,
+                              useWrapMode: true,
+                            },
+                          },
+                        },
+                        descWrap: {
+                          type: 'void',
+                          title: ' ',
+                          'x-decorator': 'FormItem',
+                          'x-decorator-props': {
+                            colon: false,
+                            feedbackLayout: 'none',
+                          },
+                          'x-component': 'div',
+                          'x-component-props': {
+                            class: 'flex align-center flex-wrap',
+                          },
+                          properties: {
+                            desc: {
+                              type: 'void',
+                              'x-component': 'div',
+                              'x-component-props': {
+                                style: {
+                                  color: '#909399',
+                                },
+                              },
+                              'x-content': i18n.t(
+                                'packages_dag_nodes_table_shiligro',
+                              ),
+                            },
+                            link: {
+                              type: 'void',
+                              'x-component': 'Button',
+                              'x-component-props': {
+                                text: true,
+                                type: 'primary',
+                                onClick: '{{openApiDrawer}}',
+                              },
+                              'x-content': i18n.t(
+                                'packages_business_view_more_apis',
+                              ),
+                            },
+                          },
+                        },
+                      },
+                    },
+                    sql: {
+                      title: ' ',
+                      'x-decorator-props': {
+                        colon: false,
+                      },
+                      type: 'string',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'SqlEditor',
+                      'x-component-props': {
+                        options: { showPrintMargin: false, useWrapMode: true },
+                      },
+                      'x-reactions': {
+                        dependencies: [
+                          'target.enableCustomCommand',
+                          'target.databaseType',
+                        ],
+                        fulfill: {
+                          state: {
+                            visible:
+                              '{{!!$deps[0] && !$deps[1].toLowerCase().includes("mongo")}}',
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+              'x-reactions': [
+                {
+                  dependencies: ['target.enableCustomCommand'],
+                  fulfill: {
+                    state: {
+                      visible: `{{$deps[0]}}`,
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+    },
+  },
+}
+
+const schemaScope = {
+  $supportFilterFunction:
+    props.inspectMethod === 'row_count'
+      ? 'count_by_partition_filter_function'
+      : 'query_by_advance_filter_function',
+  useAsyncDataSource: (service, fieldName = 'dataSource', ...serviceParams) => {
+    return (field) => {
+      field.loading = true
+      service({ field }, ...serviceParams).then(
+        action.bound((data) => {
+          if (fieldName === 'value') {
+            field.setValue(data)
+          } else field[fieldName] = data
+          field.loading = false
+        }),
+      )
+    }
+  },
+  async loadTableFieldList(obj, item) {
+    try {
+      if (!item.connectionId || !item.table) return []
+      let fields = item.fields
+      if (!fields?.length) {
+        const params = {
+          where: {
+            meta_type: 'table',
+            sourceType: 'SOURCE',
+            original_name: item.table,
+            'source._id': item.connectionId,
+          },
+          limit: 1,
+        }
+        const data = await metadataInstancesApi.tapTables({
+          filter: JSON.stringify(params),
+        })
+        fields = Object.values(data.items[0]?.nameFieldMap || {}).map((t) => {
+          return {
+            id: t.id,
+            label: t.fieldName || t.field_name,
+            value: t.fieldName || t.field_name,
+            field_name: t.fieldName || t.field_name,
+            primary_key_position: t.primaryKey,
+            data_type: t.dataType || t.data_type,
+            primaryKey: t.primaryKey,
+            unique: t.unique,
+            type: t.dataType || t.data_type,
+            tapType: JSON.stringify(t.tapType),
+          }
+        })
+      }
+      const result = fields
+
+      if (result.length) {
+        item.fields = result
+      }
+
+      return result
+    } catch {
+      return []
+    }
+  },
+  openApiDrawer: (path) => {
+    docPath.value = isString(path) ? path : ''
+    showDoc.value = true
+  },
+}
+
 // Computed Properties
 const flowStages = computed(() => {
   const types = props.isDB ? ['database'] : ['table']
@@ -237,22 +933,22 @@ const nullsLastState = computed(() => {
 })
 
 // Watchers
-watch(
-  () => props.taskId,
-  (v1, v2) => {
-    if (v1 !== v2) {
-      clearList()
-    }
-  },
-)
-
-watch(
-  () => props.data,
-  () => {
-    loadList()
-  },
-  { deep: true },
-)
+// watch(
+//   () => props.taskId,
+//   (v1, v2) => {
+//     if (v1 !== v2) {
+//       clearList()
+//     }
+//   },
+// )
+
+// watch(
+//   () => props.data,
+//   () => {
+//     loadList()
+//   },
+//   { deep: true },
+// )
 
 watch(
   list,
@@ -620,14 +1316,15 @@ const handleClearIndexEmpty = () => {
     if (!res) {
       return
     }
-    list.value = list.value.filter(
+
+    formData.tasks = formData.tasks.filter(
       (t) => t.source.sortColumn && t.target.sortColumn,
     )
   })
 }
 
 const clearList = () => {
-  list.value = []
+  formData.tasks = []
   currentPage.value = 1
   validate()
 }
@@ -652,7 +1349,11 @@ const addItem = () => {
 }
 
 const removeItem = (id: string) => {
-  list.value = list.value.filter((t) => t.id !== id)
+  const index = formData.tasks.findIndex((t) => t.id === id)
+  if (index !== -1) {
+    formData.tasks.splice(index, 1)
+  }
+
   // If current page is now empty and it's not the first page, go to previous page
   if (paginatedList.value.length === 0 && currentPage.value > 1) {
     currentPage.value--
@@ -660,7 +1361,7 @@ const removeItem = (id: string) => {
 }
 
 const autoAddTable = async () => {
-  if (!props.taskId || list.value.length) return
+  if (!props.taskId || formData.tasks.length) return
   autoAddTableLoading.value = true
   updateAutoAddTableLoading()
   const connectionSet = new Set()
@@ -854,7 +1555,7 @@ const autoAddTable = async () => {
           i18n.t('packages_business_components_conditionbox_suoxuanrenwuque'),
         )
       }
-      list.value = newItems
+      formData.tasks = newItems
 
       // 显示提示
       validate()
@@ -870,11 +1571,11 @@ const loadList = () => {
   data.forEach((el: any) => {
     el.modeType = el.source.columns ? 'custom' : 'all'
   })
-  list.value = data
+  formData.tasks = data
 }
 
 const getList = () => {
-  const listData = cloneDeep(list.value)
+  const listData = formData.tasks
   if (props.taskId) {
     listData.forEach((el: any) => {
       if (el.modeType === 'all') {
@@ -1072,7 +1773,7 @@ const handleAddScriptClose = () => {
 }
 
 const submitScript = () => {
-  const task = list.value
+  const task = formData.tasks
   const currentFormIndex = formIndex.value
   task[currentFormIndex].webScript = webScript.value
   task[currentFormIndex].jsEngineName = jsEngineName.value
@@ -1121,9 +1822,9 @@ const getFieldsByItem = (item: any, type = 'source') => {
 }
 
 const getPrimaryKeyFieldStr = (data: any[] = []) => {
-  const sortField = (list: any[]) => {
+  const sortField = (fields: any[]) => {
     return (
-      list?.sort((a, b) => {
+      fields?.sort((a, b) => {
         return a.field_name > b.field_name ? -1 : 1
       }) || []
     )
@@ -1428,24 +2129,25 @@ const handleChangeModeType = (val: string, item: any, index: number) => {
     handleCustomFields(item, index)
   }
 
-  item.modeType = val // 防止 SchemaToForm 回流
+  // item.modeType = val // 防止 SchemaToForm 回流
 }
 
 const handleChangeFields = (data: any[] = [], index: number) => {
-  const item = list.value[index]
+  const item = formData.tasks[index]
   item.source.columns = data.map((t) => t.source)
   item.target.columns = data.map((t) => t.target)
-  // 设置modeType
-  fieldDialog.value[`schemaToForm_${item.id}`].form.setValuesIn(
-    'modeType',
-    'custom',
-  )
+  // // 设置modeType
+  // fieldDialog.value[`schemaToForm_${item.id}`].form.setValuesIn(
+  //   'modeType',
+  //   'custom',
+  // )
 }
 
-const handleFocus = (opt: any = {}) => {
-  if (opt.fields?.length) {
+const handleFocus = (opt: any = {}, visible) => {
+  if (!visible || opt.fields?.length) {
     return
   }
+
   const connectionId = opt.connectionId
   const params = {
     where: {
@@ -1461,10 +2163,10 @@ const handleFocus = (opt: any = {}) => {
       filter: JSON.stringify(params),
     })
     .then((data: any = {}) => {
-      if (isEmpty(data.data.items[0]?.nameFieldMap)) {
+      if (isEmpty(data.items[0]?.nameFieldMap)) {
         return
       }
-      opt.fields = Object.values(data.data.items[0]?.nameFieldMap || {}).map(
+      opt.fields = Object.values(data.items[0]?.nameFieldMap || {}).map(
         (t: any) => {
           return {
             id: t.id,
@@ -1613,6 +2315,22 @@ defineExpose({
       id="data-verification-form"
       class="joint-table-main scroller px-2 py-1 h-100"
     >
+      <!-- <SchemaForm
+        :model-value="formData"
+        :schema="{
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+            },
+          },
+        }"
+        :colon="true"
+        class="w-100"
+        label-width="130"
+      /> -->
       <div
         v-for="(item, index) in paginatedList"
         :key="item.id"
@@ -1712,9 +2430,9 @@ defineExpose({
             :key="`SchemaToForm${item.id}${index}${inspectMethod}`"
             class="setting-item mt-4"
           >
-            <SchemaToForm
+            <SchemaForm
               :ref="`schemaToForm_${item.id}`"
-              :value="item"
+              :model-value="item"
               :schema="formSchema"
               :scope="schemaScope"
               :colon="true"
@@ -1731,14 +2449,14 @@ defineExpose({
                 v-model:value="item.source.sortColumn"
                 :options="item.source.fields"
                 class="flex-1"
-                @focus="handleFocus(item.source)"
+                @visible-change="handleFocus(item.source, $event)"
               />
               <span class="item-icon" />
               <FieldSelectWrap
                 v-model:value="item.target.sortColumn"
                 :options="item.target.fields"
                 class="flex-1"
-                @focus="handleFocus(item.target)"
+                @visible-change="handleFocus(item.target, $event)"
               />
             </div>
 
@@ -1766,7 +2484,7 @@ defineExpose({
                 <div v-if="item.source.enableCustomCollate">
                   <CollateMap
                     v-model:value="item.source.collate"
-                    :sort-column="item.source.sortColumn"
+                    :sort-coldumn="item.source.sortColumn"
                     :fields="item.source.fields"
                   />
                 </div>
@@ -2035,7 +2753,7 @@ defineExpose({
     </ElDialog>
     <FieldDialog ref="fieldDialog" @save="handleChangeFields" />
 
-    <DocsDrawer v-model:visible="showDoc" :path="docPath" />
+    <DocsDrawer v-model="showDoc" :path="docPath" />
   </div>
 </template>
 
diff --git a/packages/business/src/views/verification/components/DocsDrawer.vue b/packages/business/src/views/verification/components/DocsDrawer.vue
index 6449ce6a13..994b86cec4 100644
--- a/packages/business/src/views/verification/components/DocsDrawer.vue
+++ b/packages/business/src/views/verification/components/DocsDrawer.vue
@@ -1,55 +1,52 @@
-<script>
+<script setup lang="ts">
 import { GitBook } from '@tap/component'
+import { useI18n } from '@tap/i18n'
 import axios from 'axios'
+import { ref } from 'vue'
 
-export default {
-  components: { GitBook },
-  props: {
-    visible: Boolean,
-    path: {
-      type: String,
-      default: 'data-inspect',
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      mdContent: '',
-    }
-  },
-  methods: {
-    handleOpen() {
-      this.loading = true
-      axios
-        .get(
-          `static/docs/${this.path || 'data-inspect'}/${this.$i18n.locale?.toLowerCase() || 'en'}.md`.toLowerCase(),
-          {
-            responseType: 'blob',
-            headers: {
-              Accept: 'application/json',
-              'Cache-Control': 'no-cache',
-            },
-          },
-        )
-        .then((res) => {
-          this.mdContent = res.data
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
+defineOptions({
+  name: 'DocsDrawer',
+})
+
+const props = defineProps({
+  path: {
+    type: String,
+    default: 'data-inspect',
   },
+})
+
+const i18n = useI18n()
+const loading = ref(false)
+const mdContent = ref('')
+
+const handleOpen = () => {
+  loading.value = true
+  axios
+    .get(
+      `static/docs/${props.path || 'data-inspect'}/${i18n.locale?.value?.toLowerCase() || 'en'}.md`.toLowerCase(),
+      {
+        responseType: 'blob',
+        headers: {
+          Accept: 'application/json',
+          'Cache-Control': 'no-cache',
+        },
+      },
+    )
+    .then((res) => {
+      mdContent.value = res.data
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 </script>
 
 <template>
   <ElDrawer
     append-to-body
-    :modal="false"
-    :title="$t('packages_dag_api_docs')"
+    :title="i18n.t('packages_dag_api_docs')"
     :size="680"
-    :model-value="visible"
-    @update:model-value="$emit('update:visible', $event)"
+    modal-class="bg-transparent"
     @open="handleOpen"
   >
     <div v-loading="loading">
diff --git a/packages/form/src/SchemaForm.vue b/packages/form/src/SchemaForm.vue
new file mode 100644
index 0000000000..2b57738c27
--- /dev/null
+++ b/packages/form/src/SchemaForm.vue
@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import {
+  createForm,
+  onFieldValueChange,
+  setValidateLanguage,
+} from '@formily/core'
+import { isObservable, observable, raw } from '@formily/reactive'
+import { getCurrentLanguage } from '@tap/i18n/src/shared/util'
+import { cloneDeep, isEqual, set } from 'lodash-es'
+import { nextTick, onMounted, ref, toRaw, watch } from 'vue'
+
+import { Form as FormComponent } from './components'
+import { SchemaField } from './shared'
+
+interface SchemaFormProps {
+  schema: Record<string, any>
+  modelValue?: Record<string, any>
+  colon?: boolean
+  layout?: 'horizontal' | 'vertical' | 'inline'
+  labelAlign?: 'left' | 'right'
+  labelWidth?: string | number
+  scope?: Record<string, any>
+}
+
+const props = withDefaults(defineProps<SchemaFormProps>(), {
+  modelValue: () => ({}),
+  colon: false,
+  layout: 'horizontal',
+  labelAlign: 'left',
+  labelWidth: 120,
+  scope: () => ({}),
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Record<string, any>): void
+  (e: 'change', value: Record<string, any>, form: any): void
+}>()
+
+/**
+ * 深度递归同步对象
+ * 确保处理嵌套对象、数组和属性的新增/删除
+ */
+function deepSyncObjects(target: any, source: any): void {
+  // 获取原始对象，避免代理导致的比较问题
+  const rawSource = toRaw(source)
+
+  // 处理源对象中的所有属性
+  Object.keys(rawSource).forEach((key) => {
+    // 如果目标对象中没有此属性或属性值不同
+    if (!(key in target) || !isEqual(target[key], rawSource[key])) {
+      // 如果源属性是对象且不是null，目标属性也是对象且不是null
+      if (
+        rawSource[key] &&
+        typeof rawSource[key] === 'object' &&
+        !Array.isArray(rawSource[key]) &&
+        target[key] &&
+        typeof target[key] === 'object' &&
+        !Array.isArray(target[key])
+      ) {
+        // 递归同步嵌套对象
+        deepSyncObjects(target[key], rawSource[key])
+      } else {
+        // 直接替换值（包括数组、基本类型等）
+        target[key] = rawSource[key]
+      }
+    }
+  })
+
+  // 删除目标对象中源对象没有的属性
+  Object.keys(target).forEach((key) => {
+    if (!(key in rawSource)) {
+      delete target[key]
+    }
+  })
+}
+
+/**
+ * 维持外部对象引用的属性同步，用于reactive对象
+ * 只更新属性而不替换对象引用
+ */
+function syncObjectKeepReference(
+  target: Record<string, any>,
+  source: Record<string, any>,
+): void {
+  if (!target || !source) return
+
+  // 获取原始对象，避免代理导致的问题
+  const rawSource = toRaw(source)
+
+  // 首先删除目标对象中源对象没有的属性
+  Object.keys(target).forEach((key) => {
+    if (!(key in rawSource)) {
+      delete target[key]
+    }
+  })
+
+  // 然后更新或添加源对象中的所有属性
+  Object.keys(rawSource).forEach((key) => {
+    if (
+      // 如果是嵌套对象，递归处理以保持引用
+      rawSource[key] &&
+      typeof rawSource[key] === 'object' &&
+      !Array.isArray(rawSource[key]) &&
+      target[key] &&
+      typeof target[key] === 'object' &&
+      !Array.isArray(target[key])
+    ) {
+      syncObjectKeepReference(target[key], rawSource[key])
+    } else {
+      // 直接替换属性值
+      target[key] = rawSource[key]
+    }
+  })
+}
+
+// 创建响应式状态
+const formReady = ref(false)
+const syncing = ref(false)
+// 直接使用普通变量，不用ref包装
+let form: any = null
+let formValues: any = null
+
+// 从Formily同步到Vue - 精确更新字段
+function syncFormilyToModel(path?: string, value?: any) {
+  // 如果已经在同步过程中，防止循环
+  if (syncing.value) return
+
+  // 标记同步状态
+  syncing.value = true
+
+  try {
+    // 直接在modelValue上修改，而不是创建新对象
+    if (props.modelValue && typeof props.modelValue === 'object') {
+      if (path && value !== undefined) {
+        // 精确路径更新模式 - 只更新特定路径
+        set(props.modelValue, path, value)
+      } else {
+        // 全量更新模式 - 保持原对象引用
+        syncObjectKeepReference(props.modelValue, formValues)
+      }
+
+      // 触发v-model更新，但不创建新对象
+      emit('update:modelValue', props.modelValue)
+
+      // 触发change事件
+      emit('change', props.modelValue, form)
+    }
+  } finally {
+    // 确保同步标记被重置
+    syncing.value = false
+    // nextTick(() => {
+    //   syncing.value = false
+    // })
+  }
+}
+
+// 初始化表单和响应式桥接
+function initForm() {
+  // 标记form正在准备
+  formReady.value = false
+
+  // 创建响应式桥接对象 - 直接使用observable而不用ref包装
+  if (!formValues || !isObservable(formValues)) {
+    formValues = observable(cloneDeep(props.modelValue))
+  } else {
+    // 如果已存在，则同步当前modelValue到formValues
+    syncModelToFormily(props.modelValue)
+  }
+
+  // 创建表单实例 - 直接赋值给普通变量
+  form = createForm({
+    values: formValues,
+    // 使用effects函数注册副作用
+    effects() {
+      // 监听所有字段值变化
+      onFieldValueChange('*', (field) => {
+        console.log('onFieldValueChange', field.path.toString(), field.value)
+        if (!syncing.value) {
+          // 使用精确路径更新
+          const path = field.path.toString()
+          const value = field.value
+          syncFormilyToModel(path, value)
+        }
+      })
+    },
+  })
+
+  // 确保表单实例初始化完成后再渲染
+  nextTick(() => {
+    formReady.value = true
+  })
+}
+
+/**
+ * 从Vue模型同步到Formily
+ * 处理多层级属性、数组和属性的新增/删除
+ */
+function syncModelToFormily(model: Record<string, any>) {
+  if (!formValues) return
+
+  // 防止相同值更新
+  if (isEqual(toRaw(model), raw(formValues))) return
+
+  // 标记同步状态，防止循环
+  syncing.value = true
+
+  try {
+    // 深度同步对象结构，保持Formily对象引用不变
+    deepSyncObjects(formValues, model)
+  } finally {
+    // 确保同步标记被重置
+    nextTick(() => {
+      syncing.value = false
+    })
+  }
+}
+
+// 监听 modelValue 变化，同步到 Formily
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!syncing.value && form && formValues) {
+      syncModelToFormily(newValue)
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+// 监听 schema 变化，重新初始化表单
+watch(
+  () => props.schema,
+  () => {
+    initForm()
+  },
+  { deep: true },
+)
+
+// 立即创建表单实例以确保在挂载前就准备好
+initForm()
+
+// 初始化和清理
+onMounted(() => {
+  setValidateLanguage(getCurrentLanguage())
+})
+
+// 暴露方法和属性供父组件使用
+defineExpose({
+  getFormValues: () => ({ ...formValues }),
+  getForm: () => form,
+  getFormCheckStatus: () => form?.valid,
+  validate: () => form?.validate(),
+  reset: () => form?.reset(),
+  submit: () => form?.submit(),
+})
+</script>
+
+<template>
+  <div class="schema-form">
+    {{ modelValue.name }}
+    <FormComponent
+      v-if="formReady && form"
+      v-bind="$attrs"
+      class-name="form-wrap"
+      :form="form"
+      :colon="props.colon"
+      :layout="props.layout"
+      :label-align="props.labelAlign"
+      :label-width="props.labelWidth"
+    >
+      <SchemaField
+        v-if="props.schema"
+        :schema="props.schema"
+        :scope="props.scope"
+      />
+    </FormComponent>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.schema-form {
+  :deep(.formily-element-plus-form-item-label-tooltip) {
+    margin-left: 0;
+  }
+
+  :deep(.formily-element-plus-form-item) {
+    font-size: $fontBaseTitle;
+    .formily-element-plus-form-item-label {
+      label {
+        color: map.get($fontColor, light);
+        text-transform: capitalize;
+      }
+    }
+    .el-input-number {
+      width: 180px;
+    }
+    .el-input-number--small {
+      width: 130px;
+    }
+
+    .formily-element-plus-form-item-help,
+    .formily-element-plus-form-item-extra {
+      white-space: pre-wrap;
+    }
+  }
+
+  :deep(.formily-element-plus-form-item-layout-horizontal) {
+    .formily-element-plus-form-item-control-content-component > .el-switch {
+      height: 32px;
+      line-height: 32px;
+      vertical-align: top;
+    }
+    .formily-element-space-horizontal {
+      .el-switch {
+        height: 32px;
+        line-height: 32px;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/form/src/components/field-select/index.jsx b/packages/form/src/components/field-select/index.jsx
index 1102da5d8e..940912e24f 100644
--- a/packages/form/src/components/field-select/index.jsx
+++ b/packages/form/src/components/field-select/index.jsx
@@ -150,9 +150,6 @@ const DefineFieldSelect = defineComponent({
           popper-class="field-select-popper"
           options={fieldOptions.value}
           dataSource={fieldOptions.value}
-          onUpdate:modelValue={(val) => {
-            console.log('onUpdate:modelValue', val)
-          }}
         >
           {{
             option: ({ option }) => (
diff --git a/packages/form/src/index.js b/packages/form/src/index.js
index 30f31edf67..3429810878 100644
--- a/packages/form/src/index.js
+++ b/packages/form/src/index.js
@@ -1,13 +1,14 @@
-import i18n from '@tap/i18n'
 import { registerValidateRules } from '@formily/core'
+import { composeExport } from '@formily/element-plus/lib/__builtins__'
+import i18n from '@tap/i18n'
 import cronParse from 'cron-parser'
 import * as components from './components'
-import { composeExport } from '@formily/element-plus/lib/__builtins__'
 import langs from './locale'
+import SchemaForm from './SchemaForm.vue'
+import SchemaToForm from './SchemaToForm.vue'
 import './style.scss'
-import SchemaToForm from './SchemaToForm'
 
-export { SchemaToForm }
+export { SchemaForm, SchemaToForm }
 
 export const validateCron = (value) => {
   value = value?.trim()
@@ -24,8 +25,8 @@ export const validateCron = (value) => {
     if (cronParse.parseExpression(value).hasNext()) {
       return true
     }
-  } catch (e) {
-    console.log('cron-rule', e) // eslint-disable-line
+  } catch (error) {
+    console.log('cron-rule', error) // eslint-disable-line
   }
   return false
 }
@@ -33,11 +34,13 @@ export const validateCron = (value) => {
 // cron表达式校验
 registerValidateRules({
   cron(value, rule) {
-    return validateCron(value) ? '' : rule.message || i18n.t('packages_form_src_index_cronbiao')
+    return validateCron(value)
+      ? ''
+      : rule.message || i18n.t('packages_form_src_index_cronbiao')
   },
 })
 
-export { composeExport, langs, components }
+export { components, composeExport, langs }
 
 export * from './components'
 export * from './shared'

From 70d5c795ce9df4bc0e80ea73c16b36da18195f3e Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Fri, 2 May 2025 20:26:47 +0800
Subject: [PATCH 4/7] refactor: remove unused components and hooks, and update
 i18n usage

- Deleted App.tsx and related hooks (useI18n, useMessage) as they were no longer needed.
- Updated App.vue to utilize the new i18n structure with useI18n.
- Replaced direct i18n calls with ElMessage in ObjectList and ObjectTable components for improved messaging.
- Cleaned up imports and ensured consistent usage of the new i18n methods across components.
---
 apps/daas/src/App.tsx                         | 51 -------------------
 apps/daas/src/App.vue                         | 11 ++--
 apps/daas/src/hooks/index.ts                  |  2 -
 apps/daas/src/hooks/useI18n.ts                | 23 ---------
 apps/daas/src/hooks/useMessage.ts             |  4 --
 .../src/views/data-discovery/ObjectList.tsx   |  3 --
 .../src/views/data-discovery/ObjectTable.tsx  |  6 +--
 packages/i18n/src/locale/lang/en.js           | 29 +++++++----
 packages/i18n/src/locale/lang/zh-CN.js        | 11 ++--
 packages/i18n/src/locale/lang/zh-TW.js        | 11 ++--
 .../src/components/StudioHeader.jsx           | 21 ++++----
 11 files changed, 54 insertions(+), 118 deletions(-)
 delete mode 100644 apps/daas/src/App.tsx
 delete mode 100644 apps/daas/src/hooks/index.ts
 delete mode 100644 apps/daas/src/hooks/useI18n.ts
 delete mode 100644 apps/daas/src/hooks/useMessage.ts

diff --git a/apps/daas/src/App.tsx b/apps/daas/src/App.tsx
deleted file mode 100644
index 1b0d86f9d8..0000000000
--- a/apps/daas/src/App.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { defineComponent, provide, ref } from 'vue'
-import { workerApi } from '@tap/api'
-import { provideI18n, useMessage, I18n } from './hooks'
-import LockedDialog from './components/LockedDialog.vue'
-
-export default defineComponent({
-  setup() {
-    const showLocked = ref(false)
-    const lockedFeature =
-       import.meta.env.VUE_APP_MODE === 'community'
-        ? {
-            sharedMiningList: true,
-            dataVerificationList: true,
-            alarmSetting: true,
-            roleList: true,
-            valid_total: true,
-            webhookAlerts: true,
-          }
-        : {}
-
-    provideI18n()
-    provide('checkAgent', async (cb) => {
-      const Message = useMessage()
-      const data = await workerApi.getAvailableAgent()
-      if (!data?.result?.length) {
-        Message.error(I18n.$t('agent_check_error'))
-      } else {
-        cb && cb()
-      }
-    })
-    provide('buried', () => {})
-    provide('lockedFeature', lockedFeature)
-    provide('openLocked', () => {
-      showLocked.value = true
-    })
-    return () => {
-      return (
-        <div id="app">
-          <router-view />
-
-          <LockedDialog
-            visible={showLocked.value}
-            on={{
-              'update:visible': (val) => (showLocked.value = val),
-            }}
-          ></LockedDialog>
-        </div>
-      )
-    }
-  },
-})
diff --git a/apps/daas/src/App.vue b/apps/daas/src/App.vue
index 74089ed64e..78cc98b564 100644
--- a/apps/daas/src/App.vue
+++ b/apps/daas/src/App.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { workerApi } from '@tap/api'
-import i18n from '@tap/i18n'
+import { useI18n } from '@tap/i18n'
 import en from 'element-plus/dist/locale/en.mjs'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import zhTw from 'element-plus/dist/locale/zh-tw.mjs'
 import { computed, provide, ref } from 'vue'
-import { I18n, provideI18n, useMessage } from './hooks'
+
+const { t, locale: i18nLocale } = useI18n()
 
 const langMap = {
   'zh-CN': zhCn,
@@ -14,15 +15,13 @@ const langMap = {
 }
 
 const locale = computed(() => {
-  return langMap[i18n.locale || 'en']
+  return langMap[i18nLocale.value || 'en']
 })
 
-provideI18n()
 provide('checkAgent', async (cb) => {
-  const Message = useMessage()
   const data = await workerApi.getAvailableAgent()
   if (!data?.result?.length) {
-    Message.error(I18n.$t('agent_check_error'))
+    ElMessage.error(t('agent_check_error'))
   } else {
     cb && cb()
   }
diff --git a/apps/daas/src/hooks/index.ts b/apps/daas/src/hooks/index.ts
deleted file mode 100644
index fbbceced7b..0000000000
--- a/apps/daas/src/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './useI18n'
-export * from './useMessage'
diff --git a/apps/daas/src/hooks/useI18n.ts b/apps/daas/src/hooks/useI18n.ts
deleted file mode 100644
index 262e8e117c..0000000000
--- a/apps/daas/src/hooks/useI18n.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { provide, inject } from 'vue'
-import i18n from '@/i18n'
-
-const createI18n = () => ({
-  // locale: ref(config.locale),
-  // messages: config.messages,
-  $t(key) {
-    return i18n.t(key)
-  },
-})
-
-const i18nSymbol = Symbol()
-
-export const I18n = createI18n()
-
-export function provideI18n() {
-  provide(i18nSymbol, I18n)
-}
-
-export function useI18n() {
-  const i18n: { $t: (string) => string } = inject(i18nSymbol)
-  return i18n
-}
diff --git a/apps/daas/src/hooks/useMessage.ts b/apps/daas/src/hooks/useMessage.ts
deleted file mode 100644
index 5487cb913c..0000000000
--- a/apps/daas/src/hooks/useMessage.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { ElMessage as Message } from 'element-plus'
-export function useMessage() {
-  return Message
-}
diff --git a/apps/daas/src/views/data-discovery/ObjectList.tsx b/apps/daas/src/views/data-discovery/ObjectList.tsx
index 80f0f240a3..ee5c832fec 100644
--- a/apps/daas/src/views/data-discovery/ObjectList.tsx
+++ b/apps/daas/src/views/data-discovery/ObjectList.tsx
@@ -3,7 +3,6 @@ import { TablePage } from '@tap/business'
 import { Drawer, FilterBar } from '@tap/component'
 import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { useMessage } from '@/hooks'
 import i18n from '@/i18n'
 import DrawerContent from './PreviewDrawer'
 import './index.scss'
@@ -21,7 +20,6 @@ export default defineComponent({
     const route = useRoute()
     const tableRef = ref()
     const drawerContentRef = ref()
-    const { success } = useMessage()
     const list = ref([])
     const { category, type, sourceCategory, sourceType, queryKey } =
       route.query || {}
@@ -161,7 +159,6 @@ export default defineComponent({
     return {
       data,
       list,
-      success,
       loadData,
       renderNode,
       closeDrawer,
diff --git a/apps/daas/src/views/data-discovery/ObjectTable.tsx b/apps/daas/src/views/data-discovery/ObjectTable.tsx
index 9ac3c6b71d..5d8e99efdc 100644
--- a/apps/daas/src/views/data-discovery/ObjectTable.tsx
+++ b/apps/daas/src/views/data-discovery/ObjectTable.tsx
@@ -2,7 +2,6 @@ import { discoveryApi } from '@tap/api'
 import { TablePage } from '@tap/business'
 import { FilterBar } from '@tap/component'
 import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
-import { useMessage } from '@/hooks'
 import i18n from '@/i18n'
 import './index.scss'
 
@@ -19,7 +18,6 @@ export default defineComponent({
     const { category, type, sourceCategory, sourceType, queryKey } =
       root.$route.query || {}
     const list = ref([])
-    const { error, success } = useMessage()
     const multipleSelection = ref([])
     const data = reactive({
       searchParams: {
@@ -185,10 +183,10 @@ export default defineComponent({
       }
       discoveryApi[http](where)
         .then(() => {
-          success(i18n.t('public_message_operation_success'))
+          ElMessage.success(i18n.t('public_message_operation_success'))
         })
         .catch((error_) => {
-          error(error_)
+          ElMessage.error(error_)
         })
     }
     //监听路由变化 筛选条件变化
diff --git a/packages/i18n/src/locale/lang/en.js b/packages/i18n/src/locale/lang/en.js
index 3124d04973..56a458bfe8 100644
--- a/packages/i18n/src/locale/lang/en.js
+++ b/packages/i18n/src/locale/lang/en.js
@@ -155,8 +155,10 @@ export default {
   public_message_401: 'Login expired, Please login again',
   public_message_404: 'The requested resource does not exist',
   public_message_5xx: 'Server Exception',
-  public_message_network_unconnected: 'An abnormal network connection has been detected',
-  public_message_network_connected: 'The network has been successfully restored to its normal operating state',
+  public_message_network_unconnected:
+    'An abnormal network connection has been detected',
+  public_message_network_connected:
+    'The network has been successfully restored to its normal operating state',
   public_message_request_timeout: 'Request Timeout',
   public_message_send_success: 'Send Successfully',
   public_message_download_ok: 'Download Successfully',
@@ -228,7 +230,8 @@ export default {
   public_connection_type_source_and_target: 'Source&Target',
   public_connection_information: 'Address',
   public_connection_schema_status: 'Schema',
-  public_connection_schema_status_tip: 'The connection can only be created normally once the Schema has been loaded.',
+  public_connection_schema_status_tip:
+    'The connection can only be created normally once the Schema has been loaded.',
   public_connection_table_structure_update_time: 'Schema Load Time',
   public_connection_button_create: 'Create Connection',
   public_connection_button_copy: 'Copy Connection',
@@ -242,7 +245,8 @@ export default {
   public_connection_form_account: 'Account',
   public_connection_form_password: 'Password',
   public_connection_form_schema: 'Schema',
-  public_connection_form_other_connection_string: 'Other connection string parameters',
+  public_connection_form_other_connection_string:
+    'Other connection string parameters',
   public_connection_form_time_zone_of_time_type: 'Time zone of time type',
   public_connection_form_link_plugin_source: 'Link Plugin Source',
   public_source_database: 'Source Database',
@@ -295,7 +299,8 @@ export default {
   //milestone
   public_milestone_time_cdc_consuming: 'start time-consuming',
   public_milestone_time_consuming: 'time-consuming',
-  public_milestone_time_table_structure: 'A total of migration {val} table structure',
+  public_milestone_time_table_structure:
+    'A total of migration {val} table structure',
   public_milestone_time_scheduling: 'Task is scheduled to {val}',
   public_milestone_connection_succeeded: 'Connection succeeded',
   // 外存
@@ -357,10 +362,12 @@ export default {
   public_configuration_task: 'Configuration Task',
   public_need_help: 'Need Help?',
   public_test_and_continue: 'Test Connection and Continue',
-  menu_tour_instance: 'Here you can subscribe to the semi-managed engine deployed locally',
+  menu_tour_instance:
+    'Here you can subscribe to the semi-managed engine deployed locally',
   menu_tour_instance_link: 'Learn More About Semi-Managed Engines',
   menu_tour_connection: 'Manage and Add Your Data Sources/Targets Here',
-  menu_tour_create_task: 'Click Here to Try Creating Advanced Replication and Synchronization Tasks',
+  menu_tour_create_task:
+    'Click Here to Try Creating Advanced Replication and Synchronization Tasks',
   public_task_count: '{val} tasks',
   public_retrying: 'Retrying',
   public_next_retry_time: 'next retry scheduled for',
@@ -371,7 +378,8 @@ export default {
   public_file_name: 'File Name',
   public_file_size: 'File Size',
   public_log_download: 'Log Download',
-  public_alert_401_tip: 'Your session has expired or logged in on another device. Please log in again to continue.',
+  public_alert_401_tip:
+    'Your session has expired or logged in on another device. Please log in again to continue.',
   public_alert_401: 'Session Expired Reminder',
   public_document: 'Document',
   public_array: 'Array',
@@ -381,5 +389,8 @@ export default {
   public_store_type: 'Store Type',
   public_from_db_type: 'From DB Type',
   public_sample_size: 'Sample Size',
-  public_foreign_key_tip: 'Foreign key {name} to {val}'
+  public_foreign_key_tip: 'Foreign key {name} to {val}',
+  public_form_design: 'Form Design',
+  public_code_edit: 'Code Edit',
+  public_preview_form: 'Preview Form',
 }
diff --git a/packages/i18n/src/locale/lang/zh-CN.js b/packages/i18n/src/locale/lang/zh-CN.js
index ac1fa1eb99..207dd7faf2 100644
--- a/packages/i18n/src/locale/lang/zh-CN.js
+++ b/packages/i18n/src/locale/lang/zh-CN.js
@@ -277,7 +277,8 @@ export default {
   public_task_copy: '复制任务',
   public_task_import: '导入任务',
   public_task_export: '导出任务',
-  public_task_error_schedule_limit: '您的在线Agent已达最大任务限制，请启动离线的Agent。',
+  public_task_error_schedule_limit:
+    '您的在线Agent已达最大任务限制，请启动离线的Agent。',
   // 节点
   public_node_name: '节点名称',
   public_node_type: '节点类型',
@@ -368,7 +369,8 @@ export default {
   public_file_name: '文件名',
   public_file_size: '文件大小',
   public_log_download: '日志下载',
-  public_alert_401_tip: '您的会话已过期或者已在其他地方登录，请重新登录后继续操作',
+  public_alert_401_tip:
+    '您的会话已过期或者已在其他地方登录，请重新登录后继续操作',
   public_alert_401: '会话过期提醒',
   public_store_type: '存储类型',
   public_from_db_type: '来源数据库类型',
@@ -378,5 +380,8 @@ export default {
   public_load_more: '加载更多',
   public_loading: '拼命加载中',
   public_load_end: '到底了',
-  public_foreign_key_tip: '外键 {name} 指向 {val}'
+  public_foreign_key_tip: '外键 {name} 指向 {val}',
+  public_form_design: '表单设计',
+  public_code_edit: '代码编辑',
+  public_preview_form: '预览表单',
 }
diff --git a/packages/i18n/src/locale/lang/zh-TW.js b/packages/i18n/src/locale/lang/zh-TW.js
index 9bd6006d79..b14c40f33b 100644
--- a/packages/i18n/src/locale/lang/zh-TW.js
+++ b/packages/i18n/src/locale/lang/zh-TW.js
@@ -276,7 +276,8 @@ export default {
   public_task_copy: '複製任務',
   public_task_import: '導入任務',
   public_task_export: '導出任務',
-  public_task_error_schedule_limit: '您的線上Agent已達最大任務限制，請啟動離線的Agent。',
+  public_task_error_schedule_limit:
+    '您的線上Agent已達最大任務限制，請啟動離線的Agent。',
   // 任節點
   public_node_name: '節點名稱',
   public_node_type: '節點類型',
@@ -366,7 +367,8 @@ export default {
   public_file_name: '文件名',
   public_file_size: '文件大小',
   public_log_download: '日誌下載',
-  public_alert_401_tip: '您的會話已過期或者已在其他地方登錄，請重新登錄後繼續操作',
+  public_alert_401_tip:
+    '您的會話已過期或者已在其他地方登錄，請重新登錄後繼續操作',
   public_alert_401: '會話過期提醒',
   public_store_type: '存儲類型',
   public_from_db_type: '來源數據庫類型',
@@ -376,5 +378,8 @@ export default {
   public_load_more: '加載更多',
   public_loading: '拼命加載中',
   public_load_end: '到底了',
-  public_foreign_key_tip: '外鍵 {name} 指向 {val}'
+  public_foreign_key_tip: '外鍵 {name} 指向 {val}',
+  public_form_design: '表單設計',
+  public_code_edit: '代碼編輯',
+  public_preview_form: '預覽表單',
 }
diff --git a/packages/node-design/src/components/StudioHeader.jsx b/packages/node-design/src/components/StudioHeader.jsx
index efc9933317..fcb64c22c8 100644
--- a/packages/node-design/src/components/StudioHeader.jsx
+++ b/packages/node-design/src/components/StudioHeader.jsx
@@ -8,18 +8,19 @@ import { IconWidget } from './widgets'
 import { observer } from '@formily/reactive-vue'
 import { TextEditable } from '@tap/component'
 import { useRouter } from 'vue-router'
-import i18n from '@tap/i18n'
+import { useI18n } from '@tap/i18n'
 
 export const StudioHeader = observer(
   defineComponent({
     directives: { focusSelect },
-    setup: (props) => {
+    setup: () => {
       const workbenchRef = useWorkbench()
       const designerRef = useDesigner()
       const customNodeRef = useCustomNode()
       const saving = ref(false)
       const router = useRouter()
-
+      const { t } = useI18n()
+      
       watch(
         router.currentRoute,
         async (route) => {
@@ -40,7 +41,7 @@ export const StudioHeader = observer(
       const save = async () => {
         const customNode = customNodeRef.value
         if (!customNode.name) {
-          ElMessage.warning(i18n.global.t('packages_nodeDesign_custom_node_name_required'))
+          ElMessage.warning(t('packages_nodeDesign_custom_node_name_required'))
           return
         }
         saving.value = true
@@ -54,7 +55,7 @@ export const StudioHeader = observer(
               params: { id: data.id, action: 'nodeSave' },
             })
           }
-          ElMessage.success(i18n.global.t('public_message_save_ok'))
+          ElMessage.success(t('public_message_save_ok'))
         } catch (e) {
           // eslint-disable-next-line no-console
           console.log('CustomNode save error', e)
@@ -82,7 +83,7 @@ export const StudioHeader = observer(
           <div class="panel-header-title">
             <TextEditable
               maxWidth="254"
-              placeholder={i18n.t('packages_nodeDesign_custom_node_name_required')}
+              placeholder={t('packages_nodeDesign_custom_node_name_required')}
               value={customNodeRef.value.name}
               onChange={(val) => {
                 customNodeRef.value.name = val
@@ -90,7 +91,7 @@ export const StudioHeader = observer(
             />
           </div>
           <div class="panel-header-tools flex align-center">
-            <ElTooltip transition="tooltip-fade-in" content="表单设计">
+            <ElTooltip transition="tooltip-fade-in" content={t('public_form_design')}>
               <button
                 class={['icon-btn', { active: workbenchRef.value.type === 'DESIGNABLE' }]}
                 onClick={() => {
@@ -110,7 +111,7 @@ export const StudioHeader = observer(
                 <IconWidget infer="JSON" size={20} />
               </button>
             </ElTooltip>
-            <ElTooltip transition="tooltip-fade-in" content="代码编辑">
+            <ElTooltip transition="tooltip-fade-in" content={t('public_code_edit')}>
               <button
                 class={['icon-btn', { active: workbenchRef.value.type === 'CODE' }]}
                 onClick={() => {
@@ -120,7 +121,7 @@ export const StudioHeader = observer(
                 <IconWidget infer="Code" size={20} />
               </button>
             </ElTooltip>
-            <ElTooltip transition="tooltip-fade-in" content="预览表单">
+            <ElTooltip transition="tooltip-fade-in" content={t('public_preview_form')}>
               <button
                 class={['icon-btn', { active: workbenchRef.value.type === 'PREVIEW' }]}
                 onClick={() => {
@@ -133,7 +134,7 @@ export const StudioHeader = observer(
           </div>
           <div class="panel-header-actions text-end flex-grow-1 mr-3">
             <ElButton loading={saving.value} type="primary" onClick={save}>
-              保存
+              {t('public_button_save')}
             </ElButton>
           </div>
         </div>

From baa3d28be3b04e86efe996defd406d0abb454d4f Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Sat, 3 May 2025 07:40:59 +0800
Subject: [PATCH 5/7] refactor: migrate WebhookAlerts.vue to Composition API
 and enhance form handling

- Converted WebhookAlerts.vue to use the Composition API with `<script setup>`.
- Improved form validation logic and state management using reactive and ref.
- Updated i18n usage for better localization support.
- Enhanced event handling and method definitions for clarity and maintainability.
- Cleaned up imports and removed unused code for improved readability.
---
 apps/daas/src/views/setting/WebhookAlerts.vue | 715 ++++++++++--------
 packages/assets/styles/element.scss           |   9 +-
 .../src/components/error-message/index.jsx    |   2 +-
 .../src/components/error-message/index.scss   |   6 -
 packages/business/src/locale/lang/zh-TW.js    |   1 +
 packages/i18n/src/locale/lang/en.js           |   1 +
 packages/i18n/src/locale/lang/zh-CN.js        |   1 +
 packages/i18n/src/locale/lang/zh-TW.js        |   1 +
 8 files changed, 405 insertions(+), 331 deletions(-)

diff --git a/apps/daas/src/views/setting/WebhookAlerts.vue b/apps/daas/src/views/setting/WebhookAlerts.vue
index e5308761cc..282bf15895 100644
--- a/apps/daas/src/views/setting/WebhookAlerts.vue
+++ b/apps/daas/src/views/setting/WebhookAlerts.vue
@@ -1,47 +1,87 @@
-<script>
+<script setup lang="tsx">
 import { settingsApi, webhookApi } from '@tap/api'
 import { dayjs } from '@tap/business'
 import PageContainer from '@tap/business/src/components/PageContainer.vue'
-import { VEmpty } from '@tap/component'
+import { CloseIcon, VEmpty } from '@tap/component'
 import { HighlightCode, JsonEditor } from '@tap/form'
-import i18n from '@tap/i18n'
-
-export default {
-  name: 'WebhookAlerts',
-  components: { HighlightCode, VEmpty, JsonEditor, PageContainer },
-  data() {
-    const validateUrl = (rule, value, callback) => {
-      // 正则校验URL
-      if (!value) {
-        return callback(new Error(this.$t('webhook_server_url_empty')))
-      }
-      const urlRegex = /^(https?):\/\/[^\s/$.?#].\S*$/
-      if (!urlRegex.test(value)) {
-        return callback(new Error(this.$t('webhook_server_url_error')))
-      }
-      callback()
-    }
+import { useI18n } from '@tap/i18n'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
 
-    const validateHookTypes = (rule, value, callback) => {
-      if (!value?.length) {
-        return callback(new Error(this.$t('webhook_event_type_empty')))
-      }
-      callback()
-    }
+const { t } = useI18n()
+
+interface WebhookForm {
+  id: string
+  url: string
+  open: boolean
+  customTemplate: string
+  hookTypes: string[]
+  mark: string
+  customHttpHeaders: string
+}
+
+interface WebhookItem extends WebhookForm {
+  pingResult?: string
+}
+
+interface HistoryItem {
+  id: string
+  createAt: string
+  createAtLabel: string
+  historyStatus: string
+  requestHeaders: string
+  requestBody: string
+  requestBodyFmt: string
+  responseHeaders: string
+  responseResult: string
+  responseResultFmt: string
+  responseType: string
+  responseCode: string
+  'x-event': string
+}
+
+interface EventDataItem {
+  value: string
+  label: string
+  children: { label: string; value: string }[]
+}
+
+// Form validation
+const validateUrl = (rule: any, value: string, callback: any) => {
+  if (!value) {
+    return callback(new Error(t('webhook_server_url_empty')))
+  }
+  // Fix: use non-capturing group to avoid linter error
+  const urlRegex = /^https?:\/\/[^\s/$.?#].\S*$/
+  if (!urlRegex.test(value)) {
+    return callback(new Error(t('webhook_server_url_error')))
+  }
+  callback()
+}
+
+const validateHookTypes = (rule: any, value: string[], callback: any) => {
+  if (!value?.length) {
+    return callback(new Error(t('webhook_event_type_empty')))
+  }
+  callback()
+}
+
+// Data refs and reactives
+const loading = ref(false)
+const list = ref<WebhookItem[]>([])
+const drawerState = reactive({
+  visible: false,
+  ping: false,
+  saving: false,
+  original: null as WebhookItem | null,
+})
 
-    return {
-      loading: false,
-      list: [],
-      drawerState: {
-        visible: false,
-        ping: false,
-        saving: false,
-      },
-      form: {
-        id: '',
-        url: '',
-        open: true,
-        customTemplate: `{
+const form = reactive<WebhookForm>({
+  id: '',
+  url: '',
+  open: true,
+  customTemplate: `{
     "action": "TaskAlter",
     "hookId": "\${hookId}",
     "actionTime": "\${actionTime}",
@@ -70,275 +110,317 @@ export default {
       "agentId": "\${actionData.agentId}"
     }
 }`,
-        hookTypes: [],
-        mark: '',
-        customHttpHeaders: '',
-      },
-      rules: {
-        // mark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
-        url: [{ required: true, validator: validateUrl, trigger: 'blur' }],
-        hookTypes: [
-          { required: true, validator: validateHookTypes, trigger: 'change' },
-        ],
-      },
-      eventData: [
-        {
-          value: 'task',
-          label: i18n.t('public_task_alert'),
-          children: [],
-        },
-      ],
-      keyMap: {
-        TASK_STATUS_ERROR: i18n.t(
-          'packages_business_setting_alarmnotification_dangrenwuyudao',
-        ),
-        TASK_INSPECT_ERROR: i18n.t(
-          'packages_business_setting_alarmnotification_dangrenwujiaoyan',
-        ),
-        TASK_FULL_COMPLETE: i18n.t(
-          'packages_business_setting_alarmnotification_dangrenwuquanliang',
-        ),
-        TASK_INCREMENT_START: i18n.t(
-          'packages_business_setting_alarmnotification_dangrenwuzengliang',
-        ),
-        TASK_STATUS_STOP: i18n.t(
-          'packages_business_setting_alarmnotification_dangrenwutingzhi',
-        ),
-        TASK_INCREMENT_DELAY: i18n.t(
-          'packages_business_setting_alarmnotification_dangrenwudezeng',
-        ),
-        DATANODE_CANNOT_CONNECT: i18n.t(
-          'packages_business_setting_alarmnotification_dangshujuwufa',
-        ),
-        DATANODE_HTTP_CONNECT_CONSUME: i18n.t(
-          'packages_business_setting_alarmnotification_dangshujuyuanwang',
-        ),
-        DATANODE_TCP_CONNECT_CONSUME: i18n.t(
-          'packages_business_setting_alarmnotification_dangshujuyuanxie',
-        ),
-        DATANODE_AVERAGE_HANDLE_CONSUME: i18n.t(
-          'packages_business_setting_alarmnotification_dangshujuyuanjie',
-        ),
-        PROCESSNODE_AVERAGE_HANDLE_CONSUME: i18n.t(
-          'packages_business_setting_alarmnotification_dangjiediandeping',
-        ),
-        INSPECT_TASK_ERROR: i18n.t(
-          'packages_business_setting_alarmnotification_dangjiaoyanrenwucuowu',
-        ),
-        INSPECT_COUNT_ERROR: i18n.t(
-          'packages_business_setting_alarmnotification_dangjiaoyanrenwushuliangcuowu',
-        ),
-        INSPECT_VALUE_ERROR: i18n.t(
-          'packages_business_setting_alarmnotification_dangjiaoyanrenwuzhicuowu',
-        ),
-        SYSTEM_FLOW_EGINGE_DOWN: i18n.t(
-          'packages_business_setting_alarmnotification_dangrenwustop',
-        ),
-        SYSTEM_FLOW_EGINGE_UP: i18n.t(
-          'packages_business_setting_alarmnotification_dangrenwuuP',
-        ),
-      },
-      historyState: {
-        visible: false,
-        loading: false,
-        list: [],
-        collapse: [],
-      },
-      page: {
-        current: 1,
-        size: 20,
-        total: 0,
-      },
-      switchStateMap: {},
-      resendStateMap: {},
-    }
-  },
-  created() {
-    this.loadEventType()
-    this.loadData()
+  hookTypes: [],
+  mark: '',
+  customHttpHeaders: '',
+})
+
+const rules = reactive<FormRules>({
+  url: [{ required: true, validator: validateUrl, trigger: 'blur' }],
+  hookTypes: [
+    { required: true, validator: validateHookTypes, trigger: 'change' },
+  ],
+})
+
+const eventData = ref<EventDataItem[]>([
+  {
+    value: 'task',
+    label: t('public_task_alert'),
+    children: [],
   },
-  mounted() {},
-  methods: {
-    async loadData() {
-      this.loading = true
-      const filter = {
-        order: 'createTime DESC',
-      }
-      const { items = [] } = await webhookApi.list({
-        filter: JSON.stringify(filter),
-      })
-
-      this.loading = false
-      this.list = items
-    },
-    async loadEventType() {
-      const data = await settingsApi.findAlarm()
-      this.eventData[0].children = data.map((item) => ({
-        label: this.keyMap[item.key],
-        value: item.key,
-      }))
-    },
-    afterClose() {
-      this.$refs.form.resetFields()
-      this.form.id = ''
-    },
-    async addWebhook() {
-      this.drawerState.visible = true
-      this.$refs.form?.clearValidate()
-
-      await this.$nextTick()
-      this.jsonEditor?.resize()
-      this.$refs.formWrapper && (this.$refs.formWrapper.scrollTop = 0)
-    },
-    async viewDetail(row) {
-      this.drawerState.visible = true
-      this.drawerState.original = row
-      await this.$nextTick()
-
-      Object.keys(this.form).forEach((key) => {
-        this.form[key] = row[key]
-      })
-      this.jsonEditor?.resize()
-      this.$refs.formWrapper && (this.$refs.formWrapper.scrollTop = 0)
-    },
-    async viewHistory({ id }) {
-      this.historyState.visible = true
-      this.historyState.loading = true
-      this.historyState.id = id
-      this.loadHistory()
-
-      await this.$nextTick()
-
-      this.$refs.historyList && (this.$refs.historyList.scrollTop = 0)
-    },
-    mapHistory(item) {
-      item.createAtLabel = dayjs(item.createAt).format('YYYY-MM-DD HH:mm:ss')
-      if (item.responseResult) {
-        item.responseResultFmt = item.responseResult
-        item.responseType = 'html'
-        if (/content-Type: application\/json/i.test(item.responseHeaders)) {
-          item.responseType = 'json'
-          item.responseResultFmt = JSON.stringify(
-            JSON.parse(item.responseResult),
-            null,
-            2,
-          )
-        }
-      }
+])
 
-      if (item.requestBody) {
-        item.requestBodyFmt = JSON.stringify(
-          JSON.parse(item.requestBody),
-          null,
-          2,
-        )
-      }
+const keyMap: Record<string, string> = {
+  TASK_STATUS_ERROR: t(
+    'packages_business_setting_alarmnotification_dangrenwuyudao',
+  ),
+  TASK_INSPECT_ERROR: t(
+    'packages_business_setting_alarmnotification_dangrenwujiaoyan',
+  ),
+  TASK_FULL_COMPLETE: t(
+    'packages_business_setting_alarmnotification_dangrenwuquanliang',
+  ),
+  TASK_INCREMENT_START: t(
+    'packages_business_setting_alarmnotification_dangrenwuzengliang',
+  ),
+  TASK_STATUS_STOP: t(
+    'packages_business_setting_alarmnotification_dangrenwutingzhi',
+  ),
+  TASK_INCREMENT_DELAY: t(
+    'packages_business_setting_alarmnotification_dangrenwudezeng',
+  ),
+  DATANODE_CANNOT_CONNECT: t(
+    'packages_business_setting_alarmnotification_dangshujuwufa',
+  ),
+  DATANODE_HTTP_CONNECT_CONSUME: t(
+    'packages_business_setting_alarmnotification_dangshujuyuanwang',
+  ),
+  DATANODE_TCP_CONNECT_CONSUME: t(
+    'packages_business_setting_alarmnotification_dangshujuyuanxie',
+  ),
+  DATANODE_AVERAGE_HANDLE_CONSUME: t(
+    'packages_business_setting_alarmnotification_dangshujuyuanjie',
+  ),
+  PROCESSNODE_AVERAGE_HANDLE_CONSUME: t(
+    'packages_business_setting_alarmnotification_dangjiediandeping',
+  ),
+  INSPECT_TASK_ERROR: t(
+    'packages_business_setting_alarmnotification_dangjiaoyanrenwucuowu',
+  ),
+  INSPECT_COUNT_ERROR: t(
+    'packages_business_setting_alarmnotification_dangjiaoyanrenwushuliangcuowu',
+  ),
+  INSPECT_VALUE_ERROR: t(
+    'packages_business_setting_alarmnotification_dangjiaoyanrenwuzhicuowu',
+  ),
+  SYSTEM_FLOW_EGINGE_DOWN: t(
+    'packages_business_setting_alarmnotification_dangrenwustop',
+  ),
+  SYSTEM_FLOW_EGINGE_UP: t(
+    'packages_business_setting_alarmnotification_dangrenwuuP',
+  ),
+}
 
-      if (item.requestHeaders) {
-        const result = item.requestHeaders.match(/X-Event:\s*(.*)/i)
-        const event = result?.[1] || ''
+const historyState = reactive({
+  visible: false,
+  loading: false,
+  list: [] as HistoryItem[],
+  collapse: [] as string[],
+  id: '',
+})
 
-        item['x-event'] = this.keyMap[event]
+const page = reactive({
+  current: 1,
+  size: 20,
+  total: 0,
+})
 
-        if (item['x-event']) {
-          item['x-event'] = item['x-event']
-            .replace(/^当|When the?|當/, '')
-            .replace(/时|時$/, '')
-        } else {
-          item['x-event'] = event || '--'
-        }
-      }
-      return item
-    },
-    loadHistory(pageNum = 1) {
+const switchStateMap = reactive<Record<string, boolean>>({})
+const resendStateMap = reactive<Record<string, boolean>>({})
+
+// Refs
+const formRef = ref<FormInstance>()
+const formWrapperRef = ref<HTMLElement>()
+const historyListRef = ref<HTMLElement>()
+let jsonEditor: any = null
+
+// Methods
+const loadData = async () => {
+  loading.value = true
+  const filter = {
+    order: 'createTime DESC',
+  }
+  try {
+    const { items = [] } = await webhookApi.list({
+      filter: JSON.stringify(filter),
+    })
+    list.value = items
+  } finally {
+    loading.value = false
+  }
+}
+
+const loadEventType = async () => {
+  const data = await settingsApi.findAlarm()
+  eventData.value[0].children = data.map((item: any) => ({
+    label: keyMap[item.key],
+    value: item.key,
+  }))
+}
+
+const afterClose = () => {
+  formRef.value?.resetFields()
+  form.id = ''
+}
+
+const addWebhook = async () => {
+  drawerState.visible = true
+  formRef.value?.clearValidate()
+
+  await nextTick()
+  jsonEditor?.resize()
+  formWrapperRef.value && (formWrapperRef.value.scrollTop = 0)
+}
+
+const viewDetail = async (row: WebhookItem) => {
+  drawerState.visible = true
+  drawerState.original = row
+  await nextTick()
+
+  Object.keys(form).forEach((key) => {
+    // @ts-ignore - dynamic key access
+    form[key] = row[key]
+  })
+  jsonEditor?.resize()
+  formWrapperRef.value && (formWrapperRef.value.scrollTop = 0)
+}
+
+const viewHistory = async ({ id }: { id: string }) => {
+  historyState.visible = true
+  historyState.loading = true
+  historyState.id = id
+  loadHistory()
+
+  await nextTick()
+  historyListRef.value && (historyListRef.value.scrollTop = 0)
+}
+
+const mapHistory = (item: any): HistoryItem => {
+  item.createAtLabel = dayjs(item.createAt).format('YYYY-MM-DD HH:mm:ss')
+  if (item.responseResult) {
+    item.responseResultFmt = item.responseResult
+    item.responseType = 'html'
+    if (/content-Type: application\/json/i.test(item.responseHeaders)) {
+      item.responseType = 'json'
+      item.responseResultFmt = JSON.stringify(
+        JSON.parse(item.responseResult),
+        null,
+        2,
+      )
+    }
+  }
+
+  if (item.requestBody) {
+    item.requestBodyFmt = JSON.stringify(JSON.parse(item.requestBody), null, 2)
+  }
+
+  if (item.requestHeaders) {
+    const result = item.requestHeaders.match(/X-Event:\s*(.*)/i)
+    const event = result?.[1] || ''
+
+    item['x-event'] = keyMap[event]
+
+    if (item['x-event']) {
+      item['x-event'] = item['x-event']
+        .replace(/^当|When the?|當/, '')
+        .replace(/时|時$/, '')
+    } else {
+      item['x-event'] = event || '--'
+    }
+  }
+  return item
+}
+
+const loadHistory = (pageNum = 1) => {
+  webhookApi
+    .history({
+      hookId: historyState.id,
+      pageFrom: (pageNum - 1) * page.size,
+      pageSize: page.size,
+    })
+    .then(({ items, total }: { items: any[]; total: number }) => {
+      historyState.list = items.map(mapHistory)
+      page.total = total
+    })
+    .finally(() => (historyState.loading = false))
+}
+
+const delWebhook = ({ id }: { id: string }) => {
+  ElMessageBox.confirm(t('packages_ldp_src_tablepreview_querenshanchu'), {
+    type: 'warning',
+  }).then(async (resFlag) => {
+    if (!resFlag) {
+      return
+    }
+    await webhookApi.deleteOne(id)
+    await loadData()
+  })
+}
+
+const sendPing = () => {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      drawerState.ping = true
       webhookApi
-        .history({
-          hookId: this.historyState.id,
-          pageFrom: (pageNum - 1) * this.page.size,
-          pageSize: this.page.size,
-        })
-        .then(({ items, total }) => {
-          this.historyState.list = items.map(this.mapHistory)
-          this.page.total = total
+        .ping(form)
+        .then((data) => {
+          ElMessage.success(t('public_message_send_success'))
+
+          if (form.id) {
+            viewHistory({ id: form.id })
+
+            if (data?.status && drawerState.original) {
+              drawerState.original.pingResult = data.status
+            }
+          }
         })
-        .finally(() => (this.historyState.loading = false))
-    },
-    delWebhook({ id }) {
-      this.$confirm(this.$t('packages_ldp_src_tablepreview_querenshanchu'), {
-        type: 'warning',
-      }).then(async (resFlag) => {
-        if (!resFlag) {
-          return
-        }
-        await webhookApi.deleteOne(id)
-        await this.loadData()
-      })
-    },
-    sendPing() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.drawerState.ping = true
-          webhookApi
-            .ping(this.form)
-            .then((data) => {
-              this.$message.success(this.$t('public_message_send_success'))
-
-              if (this.form.id) {
-                this.viewHistory(this.form)
-
-                if (data?.status && this.drawerState.original) {
-                  this.drawerState.original.pingResult = data.status
-                }
-              }
-            })
-            .finally(() => (this.drawerState.ping = false))
-        }
-      })
-    },
-    save() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.drawerState.saving = true
-          webhookApi[this.form.id ? 'update' : 'save'](this.form)
-            .then(() => {
-              this.$message.success(this.$t('public_message_save_ok'))
-              this.drawerState.visible = false
-              this.loadData()
-            })
-            .finally(() => (this.drawerState.saving = false))
-        }
-      })
-    },
-    handleSwitch(row) {
-      this.switchStateMap[row.id] = true
-      webhookApi[row.open ? 'close' : 'open'](row.id)
+        .finally(() => (drawerState.ping = false))
+    }
+  })
+}
+
+const save = () => {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      drawerState.saving = true
+      webhookApi[form.id ? 'update' : 'save'](form)
         .then(() => {
-          row.open = !row.open
-          this.$message.success(this.$t('public_message_operation_success'))
-        })
-        .catch(() => {
-          row.open = !row.open
-        })
-        .finally(() => {
-          delete this.switchStateMap[row.id]
+          ElMessage.success(t('public_message_save_ok'))
+          drawerState.visible = false
+          loadData()
         })
-    },
-    async reSend(request) {
-      this.resendStateMap[request.id] = true
-      const result = await webhookApi.resend(request)
-      Object.assign(request, this.mapHistory(result))
-      this.$message.success(this.$t('public_message_send_success'))
-
-      delete this.resendStateMap[request.id]
-    },
-    afterCloseHistory() {
-      this.historyState.collapse = []
-    },
-    initJsonEditor(editor) {
-      this.jsonEditor = editor
-    },
-  },
+        .finally(() => (drawerState.saving = false))
+    }
+  })
+}
+
+const handleSwitch = (row: WebhookItem) => {
+  switchStateMap[row.id] = true
+  webhookApi[row.open ? 'close' : 'open'](row.id)
+    .then(() => {
+      row.open = !row.open
+      ElMessage.success(t('public_message_operation_success'))
+    })
+    .catch(() => {
+      row.open = !row.open
+    })
+    .finally(() => {
+      delete switchStateMap[row.id]
+    })
+}
+
+const reSend = async (request: HistoryItem) => {
+  resendStateMap[request.id] = true
+  try {
+    const result = await webhookApi.resend(request)
+    Object.assign(request, mapHistory(result))
+    ElMessage.success(t('public_message_send_success'))
+  } finally {
+    delete resendStateMap[request.id]
+  }
+}
+
+const afterCloseHistory = () => {
+  historyState.collapse = []
 }
+
+const initJsonEditor = (editor: any) => {
+  jsonEditor = editor
+}
+
+const showExample = () => {
+  ElMessageBox({
+    title: t('public_template_example'),
+    showClose: true,
+    closeIcon: CloseIcon,
+    customClass: 'w-80 max-w-1000',
+    message: () => (
+      <HighlightCode
+        class="m-0 rounded-xl overflow-hidden"
+        theme="atom-one-light"
+        code={t('webhook_custom_template_tip')}
+        language="json"
+      />
+    ),
+    confirmButtonText: t('public_button_close'),
+  })
+}
+
+// Lifecycle hooks
+onMounted(() => {
+  loadEventType()
+  loadData()
+})
 </script>
 
 <template>
@@ -348,13 +430,7 @@ export default {
         $t('webhook_alerts_add')
       }}</ElButton>
     </template>
-    <ElTable
-      ref="table"
-      v-loading="loading"
-      row-key="id"
-      :data="list"
-      height="100%"
-    >
+    <ElTable v-loading="loading" row-key="id" :data="list" height="100%">
       <el-table-column
         show-overflow-tooltip
         class-name="text-nowrap"
@@ -397,15 +473,15 @@ export default {
       <el-table-column :label="$t('public_operation')" width="240">
         <template #default="{ row }">
           <div class="flex gap-2 align-center">
-            <ElButton text type="primary" @click="viewDetail(row, $event)"
+            <ElButton text type="primary" @click="viewDetail(row)"
               >{{ $t('public_button_details') }}
             </ElButton>
             <ElDivider direction="vertical" class="mx-0" />
-            <ElButton text type="primary" @click="viewHistory(row, $event)"
+            <ElButton text type="primary" @click="viewHistory(row)"
               >{{ $t('webhook_send_log') }}
             </ElButton>
             <ElDivider direction="vertical" class="mx-0" />
-            <ElButton text type="danger" @click="delWebhook(row, $event)"
+            <ElButton text type="danger" @click="delWebhook(row)"
               >{{ $t('public_button_delete') }}
             </ElButton>
           </div>
@@ -417,7 +493,6 @@ export default {
       v-model="drawerState.visible"
       :wrapper-closable="false"
       :size="800"
-      @update:visible="drawerState.visible = $event"
       @closed="afterClose"
     >
       <template #title>
@@ -426,9 +501,9 @@ export default {
         }}</span>
       </template>
       <div class="flex flex-column h-100">
-        <div ref="formWrapper" class="flex-1 overflow-y-auto">
+        <div ref="formWrapperRef" class="flex-1 overflow-y-auto">
           <ElForm
-            ref="form"
+            ref="formRef"
             class="flex-1"
             label-position="top"
             :model="form"
@@ -459,19 +534,13 @@ export default {
             <ElFormItem prop="customTemplate">
               <template #label>
                 <span>
-                  <span class="align-middle">{{
+                  <span class="align-middle mr-1">{{
                     $t('webhook_custom_template')
                   }}</span>
-                  <ElTooltip :content="$t('webhook_custom_template_tip')">
-                    <VIcon class="align-middle ml-1">question-circle</VIcon>
-                    <template #content>
-                      <HighlightCode
-                        theme="atom-one-dark"
-                        :code="$t('webhook_custom_template_tip')"
-                        language="javascript"
-                      />
-                    </template>
-                  </ElTooltip>
+                  <el-button text type="primary" @click="showExample">
+                    <VIcon class="mr-1">question-circle</VIcon
+                    >{{ $t('public_button_check') }}</el-button
+                  >
                 </span>
               </template>
               <JsonEditor
@@ -489,7 +558,7 @@ export default {
           </ElForm>
         </div>
 
-        <div class="text-left">
+        <div class="text-left pt-4">
           <ElButton
             :loading="drawerState.ping"
             type="primary"
@@ -526,7 +595,7 @@ export default {
         </span>
       </template>
       <div v-loading="historyState.loading" class="flex flex-column h-100">
-        <div ref="historyList" class="flex-1 px-4 overflow-y-auto">
+        <div ref="historyListRef" class="flex-1 overflow-y-auto">
           <el-collapse
             v-if="historyState.list.length"
             v-model="historyState.collapse"
diff --git a/packages/assets/styles/element.scss b/packages/assets/styles/element.scss
index 7adfbc1601..f4d6011403 100644
--- a/packages/assets/styles/element.scss
+++ b/packages/assets/styles/element.scss
@@ -238,10 +238,17 @@
 
 // MessageBox
 .el-message-box {
+  padding-block: 20px;
+  .el-message-box__header,
+  .el-message-box__btns {
+    --el-messagebox-padding-primary: 16px;
+  }
+  .el-message-box__header:has(.el-message-box__title:empty), .el-message-box__header:has(.el-message-box__title > span:empty) {
+    padding: 0;
+  }
   .el-message-box__message {
     width: 100%;
   }
-
   .el-message-box__headerbtn {
     display: flex;
     justify-content: center;
diff --git a/packages/business/src/components/error-message/index.jsx b/packages/business/src/components/error-message/index.jsx
index 3b16a70088..7d9453e538 100644
--- a/packages/business/src/components/error-message/index.jsx
+++ b/packages/business/src/components/error-message/index.jsx
@@ -75,7 +75,7 @@ export function ErrorMessage(stack, message) {
     title: '',
     showClose: true,
     closeIcon: CloseIcon,
-    customClass: ' w-80 max-w-1000 rounded-lg pro-message-box',
+    customClass: ' w-80 max-w-1000',
     message: renderDialog(stack),
     confirmButtonText: i18n.t('public_button_close'),
     ...(import.meta.env.VUE_APP_PLATFORM === 'DAAS'
diff --git a/packages/business/src/components/error-message/index.scss b/packages/business/src/components/error-message/index.scss
index b7a465a049..e1d26416d2 100644
--- a/packages/business/src/components/error-message/index.scss
+++ b/packages/business/src/components/error-message/index.scss
@@ -25,10 +25,4 @@
       display: block;
     }
   }
-}
-
-.pro-message-box {
-  .el-message-box__header {
-    padding: 0 !important;
-  }
 }
\ No newline at end of file
diff --git a/packages/business/src/locale/lang/zh-TW.js b/packages/business/src/locale/lang/zh-TW.js
index 73a4456ddf..433e710537 100644
--- a/packages/business/src/locale/lang/zh-TW.js
+++ b/packages/business/src/locale/lang/zh-TW.js
@@ -568,6 +568,7 @@ export default {
     '此操作會丟失當前正在創建（編輯）的校驗任務',
   packages_business_verification_backConfirmTitle:
     '是否放棄創建（編輯）校驗任務？',
+  packages_business_verification_history_source_total_rows: '源總行數',
   packages_business_verification_source_total_rows: '源總行數',
   packages_business_verification_form_label_error_save_count: '錯誤保存條數',
   packages_business_verification_button_auto_add_table: '自動添加表',
diff --git a/packages/i18n/src/locale/lang/en.js b/packages/i18n/src/locale/lang/en.js
index 56a458bfe8..706866ea7d 100644
--- a/packages/i18n/src/locale/lang/en.js
+++ b/packages/i18n/src/locale/lang/en.js
@@ -393,4 +393,5 @@ export default {
   public_form_design: 'Form Design',
   public_code_edit: 'Code Edit',
   public_preview_form: 'Preview Form',
+  public_template_example: 'Template Example',
 }
diff --git a/packages/i18n/src/locale/lang/zh-CN.js b/packages/i18n/src/locale/lang/zh-CN.js
index 207dd7faf2..656212488e 100644
--- a/packages/i18n/src/locale/lang/zh-CN.js
+++ b/packages/i18n/src/locale/lang/zh-CN.js
@@ -384,4 +384,5 @@ export default {
   public_form_design: '表单设计',
   public_code_edit: '代码编辑',
   public_preview_form: '预览表单',
+  public_template_example: '模板示例',
 }
diff --git a/packages/i18n/src/locale/lang/zh-TW.js b/packages/i18n/src/locale/lang/zh-TW.js
index b14c40f33b..b67bdb3120 100644
--- a/packages/i18n/src/locale/lang/zh-TW.js
+++ b/packages/i18n/src/locale/lang/zh-TW.js
@@ -382,4 +382,5 @@ export default {
   public_form_design: '表單設計',
   public_code_edit: '代碼編輯',
   public_preview_form: '預覽表單',
+  public_template_example: '模板示例',
 }

From 5009898352b435187b26b14c2a07b0f303d5533b Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Sat, 3 May 2025 16:01:16 +0800
Subject: [PATCH 6/7] refactor: update error message component styles and fix
 data mapping in ConditionBox

- Changed the border radius class in the error message component for improved styling.
- Updated data mapping in ConditionBox.vue to correctly reference the response structure, ensuring accurate data handling.
- Enhanced error handling by ensuring safe access to selected states in InfiniteSelect.vue.
---
 .../src/components/error-message/index.jsx     |  2 +-
 .../verification/components/ConditionBox.vue   | 18 +++++++++---------
 .../infinite-select/InfiniteSelect.vue         |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/business/src/components/error-message/index.jsx b/packages/business/src/components/error-message/index.jsx
index 7d9453e538..ecc5381215 100644
--- a/packages/business/src/components/error-message/index.jsx
+++ b/packages/business/src/components/error-message/index.jsx
@@ -16,7 +16,7 @@ function renderDialog(stack) {
         </span>
       </div>
       <div
-        class="mt-3 position-relative rounded-lg overflow-hidden error-stack-pre-wrap"
+        class="mt-3 position-relative rounded-xl overflow-hidden error-stack-pre-wrap"
         style="background: #fff2f0; border: 1px solid #ffccc7"
       >
         <div class="position-absolute end-0 top-0 px-2 pt-1 error-stack-actions">
diff --git a/packages/business/src/views/verification/components/ConditionBox.vue b/packages/business/src/views/verification/components/ConditionBox.vue
index dbfaf87e6e..83f2f0e1da 100644
--- a/packages/business/src/views/verification/components/ConditionBox.vue
+++ b/packages/business/src/views/verification/components/ConditionBox.vue
@@ -1001,7 +1001,7 @@ const getConnectionsListMethod = async (
     })
 
     const response: ApiResponse<ConnectionResponse> = {
-      items: result.data.items.map((item: ConnectionItem) => {
+      items: result.items.map((item: ConnectionItem) => {
         const findDynamicSchema = item.capabilities.find(
           (t: any) => t.id === 'dynamic_schema',
         )
@@ -1030,7 +1030,7 @@ const getConnectionsListMethod = async (
           databaseType,
         }
       }),
-      total: result.data.total,
+      total: result.total,
     }
 
     return response
@@ -1068,10 +1068,10 @@ const getTableListMethod = async (
       filter: JSON.stringify(params),
     })
     const result: ApiResponse<string> = {
-      items: res.data.items.map((t: TableItem) => t.name),
-      total: res.data.total,
+      items: res.items.map((t: TableItem) => t.name),
+      total: res.total,
     }
-    res.data.items.forEach((el: TableItem) => {
+    res.items.forEach((el: TableItem) => {
       // 缓存起来
       setFieldsByItem(
         [nodeId, connectionId, el.name],
@@ -1132,9 +1132,9 @@ const getTablesInTask = async (
 
   const res = await metadataInstancesApi.nodeSchemaPage(params)
 
-  const tableList = res.data.items?.map((t: TableItem) => t.name) || []
-  const total = res.data.total
-  res.data.items.forEach((el: TableItem) => {
+  const tableList = res.items?.map((t: TableItem) => t.name) || []
+  const total = res.total
+  res.items.forEach((el: TableItem) => {
     setFieldsByItem(
       [nodeId, connectionId, el.name],
       el.fields.map((t: any) => {
@@ -1738,7 +1738,7 @@ const handleChangeTable = (
   }
   metadataInstancesApi.nodeSchemaPage(params).then((data: any) => {
     item.target.fields =
-      data.data.items?.[0]?.fields.map((t: any) => {
+      data.items?.[0]?.fields.map((t: any) => {
         const { id, field_name, primary_key_position, primaryKey, unique } = t
         return { id, field_name, primary_key_position, primaryKey, unique }
       }) || []
diff --git a/packages/form/src/components/infinite-select/InfiniteSelect.vue b/packages/form/src/components/infinite-select/InfiniteSelect.vue
index 2933cc9d5c..798a39b8df 100644
--- a/packages/form/src/components/infinite-select/InfiniteSelect.vue
+++ b/packages/form/src/components/infinite-select/InfiniteSelect.vue
@@ -87,7 +87,7 @@ const labelContent = ref('')
 
 // 回显数据
 const setCurrentLabel = async () => {
-  const [current] = selectRef.value.states.selected
+  const [current] = selectRef.value?.states.selected || []
 
   if (!current) return
 

From f2076deadc2f2ec542fd500bfdd36cbf3524a16f Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Mon, 5 May 2025 22:16:47 +0800
Subject: [PATCH 7/7] refactor: update Vue imports and improve code readability
 in command.js and Editor.vue TAP-6488

- Replaced Vue import with named import for nextTick in command.js for consistency with Vue 3 standards.
- Enhanced string interpolation in command.js for better readability.
- Simplified checkMaterializedView method in Editor.vue by directly accessing query from this.$route.
- Removed unnecessary comments and cleaned up code structure in Editor.vue and editor.js for improved clarity.
---
 packages/dag/src/Editor.vue       | 10 +++--
 packages/dag/src/command.js       | 73 +++++++++++++++++++------------
 packages/dag/src/mixins/editor.js | 41 ++++++-----------
 3 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/packages/dag/src/Editor.vue b/packages/dag/src/Editor.vue
index a82ffd4f26..13bb0e6b64 100644
--- a/packages/dag/src/Editor.vue
+++ b/packages/dag/src/Editor.vue
@@ -121,8 +121,6 @@ export default {
         this.initNodeView()
         await this.initView(true)
         this.autoAddNode(query)
-        this.checkMaterializedView(query)
-        // this.initWS()
       } catch (error) {
         console.error(error)
       }
@@ -338,10 +336,13 @@ export default {
         this.setTaskId(dataflow.id)
         this.setEditVersion(dataflow.editVersion)
         this.setTaskInfo(this.dataflow)
+
         await this.$router.replace({
           name: 'DataflowEditor',
           params: { id: dataflow.id, action: 'dataflowEdit' },
+          query: { ...this.$route.query },
         })
+
         this.$nextTick(() => {
           this.$refs.paperScroller.initVisibleArea()
         })
@@ -626,7 +627,8 @@ export default {
       })
     },
 
-    async checkMaterializedView(query = {}) {
+    async checkMaterializedView() {
+      const { query } = this.$route
       const { by, connectionId, tableName } = query
       let connection
 
@@ -635,7 +637,7 @@ export default {
 
       await this.$router.replace({
         params: {
-          action: 'dataflowEdit',
+          id: this.$route.params.id,
         },
         query: {
           ...query,
diff --git a/packages/dag/src/command.js b/packages/dag/src/command.js
index b308836b6d..d3a92a1baa 100644
--- a/packages/dag/src/command.js
+++ b/packages/dag/src/command.js
@@ -1,5 +1,5 @@
 import i18n from '@tap/i18n'
-import * as Vue from 'vue'
+import { nextTick } from 'vue'
 import { NODE_PREFIX } from './constants'
 
 function getRealId(str) {
@@ -72,7 +72,7 @@ class NodeCommand extends Command {
     state.instance.setSuspendDrawing(true)
 
     this.elIds.forEach((id) => {
-      const el = document.querySelector('#' + id)
+      const el = document.querySelector(`#${id}`)
       state.instance.removeAllEndpoints(id)
       state.instance.destroyDraggable(el)
       state.instance.destroyDroppable(el)
@@ -84,7 +84,7 @@ class NodeCommand extends Command {
 
     state.store.commit('dataflow/batchRemoveNode', this.nodeIds)
 
-    Vue.nextTick(() => {
+    nextTick(() => {
       state.instance.setSuspendDrawing(false, true)
     })
   }
@@ -118,7 +118,10 @@ class RemoveNodeCommand extends NodeCommand {
   async exec(state) {
     this.connections = state.instance
       .getConnections('*')
-      .filter((c) => this.elIds.includes(c.targetId) || this.elIds.includes(c.sourceId))
+      .filter(
+        (c) =>
+          this.elIds.includes(c.targetId) || this.elIds.includes(c.sourceId),
+      )
       .map((c) => ({
         sourceId: c.sourceId,
         targetId: c.targetId,
@@ -131,10 +134,10 @@ class RemoveNodeCommand extends NodeCommand {
     state.instance.setSuspendDrawing(true)
     state.store.commit('dataflow/addNodes', this.nodes)
 
-    Vue.nextTick(() => {
+    nextTick(() => {
       this.connections?.forEach((c) => {
         state.instance.connect({
-          uuids: [c.sourceId + '_source', c.targetId + '_target'],
+          uuids: [`${c.sourceId}_source`, `${c.targetId}_target`],
         })
         state.store.commit('dataflow/addConnection', {
           source: getRealId(c.sourceId),
@@ -157,7 +160,10 @@ class ConnectionCommand extends Command {
       source: NODE_PREFIX + connection.source,
       target: NODE_PREFIX + connection.target,
     }
-    this.uuids = [this.connectionData.source + '_source', this.connectionData.target + '_target']
+    this.uuids = [
+      `${this.connectionData.source}_source`,
+      `${this.connectionData.target}_target`,
+    ]
   }
 
   add(state, uuids = this.uuids, connection = this.connection) {
@@ -227,7 +233,7 @@ class MoveNodeCommand extends Command {
       state.store.commit('dataflow/updateNodeProperties', info)
     })
 
-    Vue.nextTick(() => {
+    nextTick(() => {
       state.instance.setSuspendDrawing(false, true)
       // state.store.dispatch('dataflow/updateDag') // 自动保存
     })
@@ -254,16 +260,24 @@ class AddNodeOnConnectionCommand extends ConnectionCommand {
   exec(state) {
     this.remove(state)
     state.store.commit('dataflow/addNode', this.node)
-    Vue.nextTick(() => {
+    nextTick(() => {
       const nodeId = NODE_PREFIX + this.node.id
-      this.add(state, [this.connectionData.source + '_source', nodeId + '_target'], {
-        source: this.connection.source,
-        target: this.node.id,
-      })
-      this.add(state, [nodeId + '_source', this.connectionData.target + '_target'], {
-        source: this.node.id,
-        target: this.connection.target,
-      })
+      this.add(
+        state,
+        [`${this.connectionData.source}_source`, `${nodeId}_target`],
+        {
+          source: this.connection.source,
+          target: this.node.id,
+        },
+      )
+      this.add(
+        state,
+        [`${nodeId}_source`, `${this.connectionData.target}_target`],
+        {
+          source: this.node.id,
+          target: this.connection.target,
+        },
+      )
     })
   }
 
@@ -288,7 +302,7 @@ class QuickAddTargetCommand extends ConnectionCommand {
 
   exec(state) {
     state.store.commit('dataflow/addNode', this.node)
-    Vue.nextTick(() => {
+    nextTick(() => {
       this.add(state)
     })
   }
@@ -311,7 +325,7 @@ class QuickAddSourceCommand extends ConnectionCommand {
 
   exec(state) {
     state.store.commit('dataflow/addNode', this.node)
-    Vue.nextTick(() => {
+    nextTick(() => {
       this.add(state)
     })
   }
@@ -335,10 +349,13 @@ class AddDagCommand extends NodeCommand {
   async exec(state) {
     state.store.commit('dataflow/addNodes', this.nodes)
     state.store.commit('dataflow/addEdges', this.edges)
-    await Vue.nextTick()
+    await nextTick()
     this.edges.forEach(({ source, target }) => {
       state.instance.connect({
-        uuids: [`${NODE_PREFIX}${source}_source`, `${NODE_PREFIX}${target}_target`],
+        uuids: [
+          `${NODE_PREFIX}${source}_source`,
+          `${NODE_PREFIX}${target}_target`,
+        ],
       })
     })
   }
@@ -349,14 +366,14 @@ class AddDagCommand extends NodeCommand {
 }
 
 export {
-  CommandManager,
-  AddNodeCommand,
-  RemoveNodeCommand,
   AddConnectionCommand,
-  RemoveConnectionCommand,
-  MoveNodeCommand,
+  AddDagCommand,
+  AddNodeCommand,
   AddNodeOnConnectionCommand,
-  QuickAddTargetCommand,
+  CommandManager,
+  MoveNodeCommand,
   QuickAddSourceCommand,
-  AddDagCommand,
+  QuickAddTargetCommand,
+  RemoveConnectionCommand,
+  RemoveNodeCommand,
 }
diff --git a/packages/dag/src/mixins/editor.js b/packages/dag/src/mixins/editor.js
index 19422381d9..b03c685836 100644
--- a/packages/dag/src/mixins/editor.js
+++ b/packages/dag/src/mixins/editor.js
@@ -110,7 +110,8 @@ export default {
     },
   },
   watch: {
-    $route() {
+    '$route.params.id': function (n, o) {
+      if (!o) return
       this.initView()
     },
   },
@@ -792,36 +793,15 @@ export default {
 
     async initView(first) {
       const { id } = this.$route.params
-      this.stopDagWatch?.()
-
-      if (this.$route.params.action === 'dataflowEdit') {
-        // 保存后路由跳转
-        this.setStateDirty(false)
-        this.setStateReadonly(false)
-        this.stopDagWatch = this.$watch(
-          () => this.allNodes.length + this.allEdges.length,
-          () => {
-            this.updateDag({ vm: this })
-          },
-        )
-        this.startLoopTask(id)
-        this.initWS()
-        // 从查看进入编辑，清掉轮询
-        return Promise.resolve()
-      }
-
-      if (this.$route.params.action === 'dataflowViewer') {
-        this.setStateReadonly(true)
-        return Promise.resolve()
-      }
+      const routeName = this.$route.name
 
-      // this.dataflow.id = id
+      this.stopDagWatch?.()
 
       if (!first) {
         this.resetWorkspace()
         this.initNodeView()
       }
-      const routeName = this.$route.name
+
       if (
         [
           'DataflowViewer',
@@ -831,7 +811,6 @@ export default {
         ].includes(routeName)
       ) {
         await this.openDataflow(id)
-        // await this.startLoop()
         this.setStateReadonly(true)
         if (
           routeName === 'MigrateViewer' ||
@@ -846,8 +825,15 @@ export default {
           // 检查任务是否可编辑
           if (this.checkGotoViewer()) return // 跳转到viewer不需要继续往下走
         } else {
-          return await this.newDataflow()
+          await this.newDataflow()
+
+          this.setStateDirty(false)
+          this.setStateReadonly(false)
+          this.startLoopTask(id)
+          this.initWS()
+          this.checkMaterializedView()
         }
+
         this.stopDagWatch = this.$watch(
           () => this.allNodes.length + this.allEdges.length,
           () => {
@@ -1111,7 +1097,6 @@ export default {
      */
     handleDelete() {
       const selectNodes = this.$store.getters['dataflow/getSelectedNodes']
-      console.log('delete.selectNodes', selectNodes) // eslint-disable-line
       this.command.exec(new RemoveNodeCommand(selectNodes))
       this.resetSelectedNodes()
       this.deleteSelectedConnections()