diff --git a/apps/cloud/src/router/index.js b/apps/cloud/src/router/index.js
index cc469eeb7..f8f7d37a6 100644
--- a/apps/cloud/src/router/index.js
+++ b/apps/cloud/src/router/index.js
@@ -728,6 +728,14 @@ const routes = [
     name: 'DataCapture',
     component: DataCapture,
   },
+  {
+    path: '/data-trace',
+    name: 'DataTrace',
+    component: () => import('@tap/ldp/src/DataTracePage.vue'),
+    meta: {
+      title: 'Data Trace',
+    },
+  },
   {
     path: '/sharedMining/monitor/:id',
     name: 'SharedMiningMonitor',
diff --git a/apps/daas/src/router/routes.ts b/apps/daas/src/router/routes.ts
index 58c5ace58..422154889 100644
--- a/apps/daas/src/router/routes.ts
+++ b/apps/daas/src/router/routes.ts
@@ -198,6 +198,14 @@ export const routes = [
     name: 'DataCapture',
     component: DataCapture,
   },
+  {
+    path: '/data-trace',
+    name: 'DataTrace',
+    component: () => import('@tap/ldp/src/DataTracePage.vue'),
+    meta: {
+      title: 'Data Trace',
+    },
+  },
   {
     path: '/shared-mining/monitor/:id',
     name: 'SharedMiningMonitor',
diff --git a/packages/api/src/core/data-trace.ts b/packages/api/src/core/data-trace.ts
new file mode 100644
index 000000000..533ac6f43
--- /dev/null
+++ b/packages/api/src/core/data-trace.ts
@@ -0,0 +1,202 @@
+import { requestClient } from '../request'
+
+const BASE_URL = '/api/lineage/wide-table'
+
+export interface BloodlineTaskNode {
+  id: string
+  name: string
+  type: string
+  disabled: boolean
+  catalog: string
+  taskNodePos: string
+  dataNode?: boolean
+  transformed?: boolean
+  logCollectorNode?: boolean
+  isTransformed?: boolean
+  elementType?: string
+}
+
+export interface BloodlineTask {
+  id: string
+  name: string
+  taskNode: BloodlineTaskNode
+  syncType: string
+  status: string
+  startTime?: string
+  attrKey: string
+}
+
+export interface BloodlineNodeMetadata {
+  id: string
+  sourceType: string
+  nodeId: string
+}
+
+export interface BloodlineNodeAttr {
+  rootNodeId: string
+  preNodeId: string
+  nodeType: string
+  tablePk: { originName: string; targetName: string }[]
+  tableType: string
+  joinKeys: { originName: string; targetName: string }[]
+}
+
+export interface BloodlineNode {
+  table: string
+  connectionId: string
+  connectionName: string
+  pdkHash: string
+  metadata: BloodlineNodeMetadata
+  tasks: Record<string, BloodlineTask>
+  type: string
+  catalog: string
+  isTransformed: boolean
+  id: string
+  elementType: string
+  attrs: Record<string, BloodlineNodeAttr>
+  disabled: boolean
+}
+
+export interface BloodlineEdge {
+  name: string
+  attrs: {
+    tasks: Record<string, BloodlineTask>
+  }
+  disabled: boolean
+  source: string
+  target: string
+}
+
+export interface BloodlineDag {
+  edges: BloodlineEdge[]
+  nodes: BloodlineNode[]
+}
+
+export interface BloodlineDiagramData {
+  dag: BloodlineDag
+  /** 各节点的 trace field 对应字段名称 <nodeId, <targetTraceFieldName, currentTableFieldName>> */
+  traceFilterFieldNameMapping: Record<string, Record<string, string>>
+  /** 最终目标表的更新条件字段列表 */
+  targetTableUpdateFields: string[]
+}
+
+export interface TraceStreamCallbacks {
+  /** 每个节点的数据返回时触发，nodeId 为节点 ID，data 为该节点的行数据（null 表示无数据） */
+  onNodeData?: (nodeId: string, data: Record<string, any> | null) => void
+  /** 全部节点返回完毕 */
+  onDone?: () => void
+  /** 出错时触发 */
+  onError?: (error: string) => void
+}
+
+/**
+ * 获取Trace Data（SSE 流式）
+ * 返回 AbortController 用于取消请求
+ */
+export function getTraceData(
+  data: { connectionId: string; table: string; filters?: Record<string, any> },
+  callbacks: TraceStreamCallbacks,
+): AbortController {
+  const controller = new AbortController()
+  let lastIndex = 0
+
+  function processChunk(text: string) {
+    const newText = text.slice(lastIndex)
+    lastIndex = text.length
+
+    const lines = newText.split('\n')
+    for (const line of lines) {
+      const trimmed = line.trim()
+      if (!trimmed) continue
+      try {
+        const parsed = JSON.parse(trimmed)
+        if (parsed.nodeId !== undefined && parsed.type === 'TRACE_VALUE') {
+          console.log('parsed', parsed)
+          callbacks.onNodeData?.(parsed.nodeId, parsed)
+        }
+      } catch {
+        // ignore incomplete line (will be completed in next chunk)
+      }
+    }
+  }
+
+  requestClient
+    .post(`${BASE_URL}/trace/stream`, data, {
+      headers: { Accept: 'application/x-ndjson' },
+      responseType: 'text',
+      responseReturn: 'raw',
+      signal: controller.signal,
+      timeout: 0,
+      onDownloadProgress: (event: any) => {
+        const xhr = event.target || event.event?.target
+        if (xhr?.responseText) {
+          processChunk(xhr.responseText)
+        }
+      },
+    })
+    .then(() => {
+      callbacks.onDone?.()
+    })
+    .catch((error: any) => {
+      if (error?.name !== 'CanceledError' && error?.code !== 'ERR_CANCELED') {
+        callbacks.onError?.(error?.message || 'Network error')
+      }
+    })
+
+  return controller
+}
+
+export interface ChangeLogParams {
+  /** 表名 */
+  table: string
+  /** 连接ID */
+  connectionId: string
+  /** 查询开始时间，毫秒级时间戳 */
+  startTime: number
+  /** 查询结束时间，毫秒级时间戳 */
+  endTime: number
+  /** trace Data 后节点返回的查询条件列表 */
+  queryConditions: Record<string, any>[]
+  /** 每次查询的条数 */
+  limit: number
+  /** 上次查询的最后一个日志 key */
+  lastKey: number
+}
+
+export interface ChangeLogResult {
+  table: string
+  connectionId: string
+  startTime: string
+  endTime: string
+  queryConditions: string
+  limit: string
+  lastKey: string
+  logs: Record<string, any>[]
+}
+
+/**
+ * 查询 Change Log
+ */
+export function getChangeLog(data: ChangeLogParams) {
+  return requestClient.post<ChangeLogResult>('/api/lineage/change-log', data)
+}
+
+/**
+ * DAG血缘获取
+ */
+export function getBloodlineDiagram(
+  params: {
+    connectionId: string
+    table: string
+    trackedFields?: string[]
+  },
+  config?: any,
+) {
+  return requestClient.get<BloodlineDiagramData>(
+    `${BASE_URL}/bloodline-diagram`,
+    {
+      params,
+      ...config,
+    },
+  )
+}
diff --git a/packages/api/src/core/index.ts b/packages/api/src/core/index.ts
index c8dd92af6..e73304928 100644
--- a/packages/api/src/core/index.ts
+++ b/packages/api/src/core/index.ts
@@ -56,3 +56,4 @@ export * from './preview-data'
 export * from './live-data-platform'
 export * from './group-info'
 export * from './ai'
+export * from './data-trace'
diff --git a/packages/assets/styles/utilities.scss b/packages/assets/styles/utilities.scss
index d287835c2..dd454a687 100644
--- a/packages/assets/styles/utilities.scss
+++ b/packages/assets/styles/utilities.scss
@@ -13229,4 +13229,4 @@
 
 .text-amber-500 {
   color: oklch(76.9% 0.188 70.08);
-}
+}
\ No newline at end of file
diff --git a/packages/ldp/package.json b/packages/ldp/package.json
index ab3828e96..332a0f9e3 100644
--- a/packages/ldp/package.json
+++ b/packages/ldp/package.json
@@ -30,6 +30,7 @@
     "dayjs": "catalog:",
     "tiny-emitter": "catalog:",
     "vue": "catalog:",
+    "vue-json-pretty": "catalog:",
     "vue-virtual-scroller": "catalog:",
     "vuex": "catalog:"
   }
diff --git a/packages/ldp/src/DataTracePage.vue b/packages/ldp/src/DataTracePage.vue
new file mode 100644
index 000000000..b9efec25f
--- /dev/null
+++ b/packages/ldp/src/DataTracePage.vue
@@ -0,0 +1,2202 @@
+<script setup lang="ts">
+import { getConnectionNoSchema } from '@tap/api/src/core/connections'
+import {
+  getBloodlineDiagram,
+  getChangeLog,
+  getTraceData,
+  type BloodlineDiagramData,
+} from '@tap/api/src/core/data-trace'
+import { fetchMetadataInstances } from '@tap/api/src/core/metadata-instances'
+import { DatabaseIcon } from '@tap/business/src/components/DatabaseIcon'
+import { makeStatusAndDisabled } from '@tap/business/src/shared'
+import { BaseFieldSelect as FieldSelect, mapFieldsData } from '@tap/form'
+import { useI18n } from '@tap/i18n'
+import { copyToClipboard } from '@tap/shared'
+import { Background } from '@vue-flow/background'
+import { useVueFlow, VueFlow, type Node } from '@vue-flow/core'
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  type PropType,
+} from 'vue'
+import VueJsonPretty from 'vue-json-pretty'
+import { useRoute, useRouter } from 'vue-router'
+import NodeQueryConditions from './components/NodeQueryConditions.vue'
+import PillFilterBuilder, {
+  type FilterRow,
+} from './components/PillFilterBuilder.vue'
+import TableEdge from './components/TableEdge.vue'
+import TraceNode from './components/TraceNode.vue'
+import { useLayout } from './composables/useLayout'
+import 'vue-json-pretty/lib/styles.css'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+
+// ─── Props (fallback to route query) ───
+const props = defineProps<{
+  connectionId?: string
+  tableName?: string
+}>()
+
+const connectionId = computed(
+  () => props.connectionId || (route.query.connectionId as string) || '',
+)
+const tableName = computed(
+  () => props.tableName || (route.query.tableName as string) || '',
+)
+
+// ─── Connection info (fetched via API) ───
+const connectionInfo = ref<{ name?: string; pdkHash?: string }>({})
+const connectionName = computed(() => connectionInfo.value.name || '')
+const pdkHash = computed(() => connectionInfo.value.pdkHash || '')
+
+async function fetchConnectionInfo() {
+  const id = connectionId.value
+  if (!id) return
+  try {
+    const data = await getConnectionNoSchema(id)
+    if (data) {
+      connectionInfo.value = { name: data.name, pdkHash: data.pdkHash }
+    }
+  } catch (error) {
+    console.error('Failed to fetch connection info', error)
+  }
+}
+
+// ─── Vue Flow ───
+const { fitView } = useVueFlow()
+const { layout } = useLayout()
+
+function handleBack() {
+  if (window.history.length > 1) {
+    router.back()
+  } else {
+    router.push({ name: 'dataConsole' })
+  }
+}
+
+interface OplogEntry {
+  key: string
+  value: any
+  type: string
+  children?: OplogEntry[]
+}
+
+// ─── Reactive Data (populated via API) ───
+const fieldOptions = ref<any[]>([])
+const fieldLoading = ref(false)
+const flowNodePositions = ref<Record<string, { x: number; y: number }>>({})
+const oplogEntries = ref<OplogEntry[]>([])
+const bloodlineData = ref<BloodlineDiagramData | null>(null)
+const bloodlineLoading = ref(false)
+
+// ─── State ───
+const filterMode = ref<'builder' | 'mql'>('builder')
+const filterRows = ref<FilterRow[]>([{ field: '', operator: '=', value: '' }])
+const mqlJson = ref('')
+const trackedFields = ref<string[]>([])
+const trackedFieldInput = ref('')
+const selectedNodeId = ref<string | null>(null)
+const tracing = ref(false)
+const traceData = ref<Record<string, Record<string, any> | null> | null>(null)
+const nodeStatus = ref<Record<string, string>>({}) // nodeId -> 'idle' | 'loading' | 'ok' | 'error'
+const rightTab = ref<'table' | 'json' | 'changelog'>('json')
+const visibleColumns = ref<string[]>([])
+const fieldFilterOpen = ref(false)
+let traceAbortController: AbortController | null = null
+
+// ─── Change Log State ───
+const CHANGELOG_LIMIT = 20
+const CHANGELOG_MAX_RANGE_MS = 7 * 24 * 60 * 60 * 1000 // 7 days
+const now = Date.now()
+const changeLogTimeRange = ref<[number, number] | null>([
+  now - 30 * 60 * 1000,
+  now,
+])
+
+const changeLogShortcuts = computed(() => [
+  {
+    text: t('packages_ldp_trace_changelog_shortcut_5m'),
+    value: (): [Date, Date] => {
+      const end = new Date()
+      const start = new Date(end.getTime() - 5 * 60 * 1000)
+      return [start, end]
+    },
+  },
+  {
+    text: t('packages_ldp_trace_changelog_shortcut_30m'),
+    value: (): [Date, Date] => {
+      const end = new Date()
+      const start = new Date(end.getTime() - 30 * 60 * 1000)
+      return [start, end]
+    },
+  },
+  {
+    text: t('packages_ldp_trace_changelog_shortcut_1h'),
+    value: (): [Date, Date] => {
+      const end = new Date()
+      const start = new Date(end.getTime() - 60 * 60 * 1000)
+      return [start, end]
+    },
+  },
+  {
+    text: t('packages_ldp_trace_changelog_shortcut_1d'),
+    value: (): [Date, Date] => {
+      const end = new Date()
+      const start = new Date(end.getTime() - 24 * 60 * 60 * 1000)
+      return [start, end]
+    },
+  },
+  {
+    text: t('packages_ldp_trace_changelog_shortcut_3d'),
+    value: (): [Date, Date] => {
+      const end = new Date()
+      const start = new Date(end.getTime() - 3 * 24 * 60 * 60 * 1000)
+      return [start, end]
+    },
+  },
+])
+
+function disabledChangeLogDate(date: Date) {
+  if (!changeLogTimeRange.value) return false
+  // No future dates
+  if (date.getTime() > Date.now()) return true
+  return false
+}
+
+function handleChangeLogTimeChange(val: [number, number] | null) {
+  if (!val) return
+  const [start, end] = val
+  if (end - start > CHANGELOG_MAX_RANGE_MS) {
+    ElMessage.warning(t('packages_ldp_trace_changelog_max_range'))
+    changeLogTimeRange.value = [start, start + CHANGELOG_MAX_RANGE_MS]
+  }
+  // Auto-fetch when date changes
+  if (rightTab.value === 'changelog') {
+    nextTick(() => fetchChangeLogs(true))
+  }
+}
+const changeLogs = ref<Record<string, any>[]>([])
+const changeLogLoading = ref(false)
+const changeLogLastKey = ref(0)
+const changeLogHasMore = ref(true)
+
+const filterModeOptions = computed(() => [
+  { label: t('packages_ldp_trace_builder'), value: 'builder' },
+  { label: t('packages_ldp_trace_mql_json'), value: 'mql' },
+])
+const rightTabOptions = computed(() => [
+  // { label: t('packages_ldp_trace_tab_table'), value: 'table' },
+  { label: t('packages_ldp_trace_tab_json'), value: 'json' },
+  { label: t('packages_ldp_trace_tab_changelog'), value: 'changelog' },
+])
+
+// ─── Computed ───
+const selectedNode = computed(() =>
+  flowNodes.value.find((n) => n.id === selectedNodeId.value),
+)
+
+// Whether the selected node is the target trace table (the one user entered from)
+const isSelectedNodeLoading = computed(() => {
+  if (!selectedNodeId.value) return false
+  return nodeStatus.value[selectedNodeId.value] === 'loading'
+})
+
+const isTargetTraceNode = computed(() => {
+  if (!selectedNode.value) return false
+  const d = selectedNode.value.data
+  return d?.connectionId === connectionId.value && d?.table === tableName.value
+})
+
+const selectedNodeQueryConditions = computed(() => {
+  if (!selectedNodeId.value || !traceData.value) return '[]'
+  const nodeTrace = traceData.value[selectedNodeId.value]
+  const qc = nodeTrace?.traceValue?.queryConditions || []
+  return JSON.stringify(qc, null, 2)
+})
+
+const currentNodeData = computed(() => {
+  if (!selectedNodeId.value || !traceData.value) return null
+  const nodeTrace = traceData.value[selectedNodeId.value]
+  const records = nodeTrace?.traceValue?.currentRecords
+  return records?.length ? records : null
+})
+
+const downstreamNodeData = computed(() => {
+  if (!selectedNodeId.value || !traceData.value || isTargetTraceNode.value)
+    return null
+  const nodeTrace = traceData.value[selectedNodeId.value]
+  const records = nodeTrace?.traceValue?.downStreamRecords
+  return records?.length ? records : null
+})
+
+const allDataKeys = computed(() => {
+  const keys = new Set<string>()
+  const addKeys = (records: any[] | null) => {
+    if (records)
+      records.forEach((r) => Object.keys(r).forEach((k) => keys.add(k)))
+  }
+  addKeys(currentNodeData.value)
+  addKeys(downstreamNodeData.value)
+  return [...keys]
+})
+
+const displayColumns = computed(() => {
+  if (visibleColumns.value.length === 0) return allDataKeys.value
+  return allDataKeys.value.filter((k) => visibleColumns.value.includes(k))
+})
+
+// ─── Methods ───
+function addTrackedField(field: string) {
+  if (field && !trackedFields.value.includes(field)) {
+    trackedFields.value.push(field)
+  }
+  trackedFieldInput.value = ''
+}
+
+function removeTrackedField(field: string) {
+  trackedFields.value = trackedFields.value.filter((f) => f !== field)
+}
+
+function isTrackedColumn(col: string) {
+  return trackedFields.value.includes(col)
+}
+
+function toggleTrackedColumn(col: string) {
+  if (isTrackedColumn(col)) {
+    removeTrackedField(col)
+  } else {
+    addTrackedField(col)
+  }
+}
+
+function selectAllColumns() {
+  visibleColumns.value = [...allDataKeys.value]
+}
+
+function deselectAllColumns() {
+  visibleColumns.value = []
+}
+
+function selectNode(id: string) {
+  selectedNodeId.value = id
+  visibleColumns.value = []
+}
+
+// ─── Bloodline Diagram (computed from bloodlineData) ───
+const flowNodes = computed<Node[]>(() => {
+  if (!bloodlineData.value) return []
+  return bloodlineData.value.dag.nodes.map((node) => {
+    const task = node.attrs ? Object.values(node.attrs)[0] : {}
+    const pos = flowNodePositions.value[node.id]
+    return {
+      id: node.id,
+      type: 'trace',
+      position: pos || { x: 0, y: 0 },
+      data: {
+        table: node.table,
+        connectionName: node.connectionName,
+        pdkHash: node.pdkHash,
+        connectionId: node.connectionId,
+        status: nodeStatus.value[node.id] || 'idle',
+        selected: selectedNodeId.value === node.id,
+        ...task,
+      },
+    }
+  })
+})
+
+const flowEdges = computed(() => {
+  if (!bloodlineData.value) return []
+  return bloodlineData.value.dag.edges.map((edge: any) => {
+    const tasks: Task[] = edge.attrs.tasks
+      ? Object.values(edge.attrs.tasks)
+          .map((task: any) => {
+            task = makeStatusAndDisabled(task)
+            return task
+          })
+          .sort((a: any, b: any) => {
+            if (a.status === 'running' && b.status !== 'running') return -1
+            if (a.status !== 'running' && b.status === 'running') return 1
+            return 0
+          })
+      : []
+
+    return {
+      id: `${edge.source}_${edge.target}`,
+      source: edge.source,
+      target: edge.target,
+      type: 'table',
+      animated: tasks[0]?.status === 'running',
+      data: {
+        tasks,
+      },
+    }
+  })
+})
+
+console.log('flowEdges', flowEdges)
+
+async function fetchBloodline() {
+  if (!connectionId.value || !tableName.value) return
+  bloodlineLoading.value = true
+  try {
+    const data = await getBloodlineDiagram({
+      connectionId: connectionId.value,
+      table: tableName.value,
+      trackedFields: trackedFields.value.length
+        ? trackedFields.value
+        : undefined,
+    })
+    const prevSelectedId = selectedNodeId.value
+
+    // Reset layout positions for new diagram
+    flowNodePositions.value = {}
+
+    // Set new source data — flowNodes/flowEdges are computed from this
+    bloodlineData.value = data
+
+    // Prefill filter rows with targetTableUpdateFields (only if user hasn't filled any)
+    const hasUserInput = filterRows.value.some((r) => r.field || r.value)
+    if (!hasUserInput && data.targetTableUpdateFields?.length) {
+      filterRows.value = data.targetTableUpdateFields.map((field) => ({
+        field,
+        operator: '=',
+        value: '',
+      }))
+    }
+
+    // Re-select: keep previous selection if it still exists, otherwise auto-select current trace node
+    const stillExists =
+      prevSelectedId && data.dag.nodes.some((n) => n.id === prevSelectedId)
+    if (stillExists) {
+      selectedNodeId.value = prevSelectedId
+    } else {
+      const currentNode = data.dag.nodes.find(
+        (n) =>
+          n.connectionId === connectionId.value && n.table === tableName.value,
+      )
+      selectedNodeId.value = currentNode?.id ?? null
+    }
+
+    nextTick(() => handleLayoutGraph())
+  } catch (error) {
+    console.error('Failed to fetch bloodline diagram', error)
+  } finally {
+    bloodlineLoading.value = false
+  }
+}
+
+function handleLayoutGraph() {
+  const layouted = layout(flowNodes.value, flowEdges.value, 'LR')
+  const positions: Record<string, { x: number; y: number }> = {}
+  for (const node of layouted) {
+    positions[node.id] = node.position
+  }
+  flowNodePositions.value = positions
+  nextTick(() => fitView())
+}
+
+// ─── Fields Loading ───
+async function fetchFields() {
+  if (!connectionId.value || !tableName.value) return
+  fieldLoading.value = true
+  try {
+    const data = await fetchMetadataInstances({
+      page: 1,
+      size: 1,
+      where: {
+        'source.id': connectionId.value,
+        meta_type: { in: ['collection', 'table'] },
+        is_deleted: false,
+        sourceType: 'SOURCE',
+        original_name: tableName.value,
+      },
+      fields: {
+        original_name: true,
+        fields: true,
+        indices: true,
+      },
+    })
+    const table = data?.items?.[0]
+    if (table) {
+      const { fields: rawFields } = mapFieldsData(table)
+      fieldOptions.value = rawFields
+    }
+  } catch (error) {
+    console.error('Failed to fetch fields', error)
+  } finally {
+    fieldLoading.value = false
+  }
+}
+
+// ─── Trace Data (Streaming) ───
+function handleTrace() {
+  if (traceAbortController) {
+    traceAbortController.abort()
+  }
+
+  tracing.value = true
+  traceData.value = {}
+
+  // Set all nodes to loading
+  const statuses: Record<string, string> = {}
+  flowNodes.value.forEach((n) => {
+    statuses[n.id] = 'loading'
+  })
+  nodeStatus.value = statuses
+
+  // Build filter
+  let filters: Record<string, any> | undefined
+  if (filterMode.value === 'builder') {
+    const custom = filterRows.value.map((row) => {
+      if (row.field && row.value) {
+        return {
+          key: row.field,
+          value: row.value,
+        }
+      }
+    })
+    if (custom.length) filters = { custom }
+  } else {
+    try {
+      filters = JSON.parse(mqlJson.value)
+    } catch {
+      // invalid JSON, ignore
+    }
+  }
+
+  traceAbortController = getTraceData(
+    { connectionId: connectionId.value, table: tableName.value, filters },
+    {
+      onNodeData: (nodeId, data) => {
+        traceData.value = { ...traceData.value, [nodeId]: data }
+        const hasData = !!data?.traceValue?.currentRecords?.length
+        console.log('nodeId', nodeId, traceData.value[nodeId])
+        nodeStatus.value = {
+          ...nodeStatus.value,
+          [nodeId]: hasData ? 'ok' : 'error',
+        }
+      },
+      onDone: () => {
+        tracing.value = false
+        // Clear any remaining loading states
+        const updated = { ...nodeStatus.value }
+        for (const id of Object.keys(updated)) {
+          if (updated[id] === 'loading') {
+            updated[id] = 'error'
+          }
+        }
+        nodeStatus.value = updated
+        console.log('done', selectedNodeId.value, traceData)
+      },
+      onError: (error) => {
+        tracing.value = false
+        // Clear all loading states on error
+        const updated = { ...nodeStatus.value }
+        for (const id of Object.keys(updated)) {
+          if (updated[id] === 'loading') {
+            updated[id] = 'error'
+          }
+        }
+        nodeStatus.value = updated
+        ElMessage.error(error || 'Trace failed')
+      },
+    },
+  )
+}
+
+// ─── Partial Retrace (current + upstream nodes only) ───
+function getUpstreamNodeIds(nodeId: string): Set<string> {
+  const ids = new Set<string>()
+  if (!bloodlineData.value) return ids
+  const edges = bloodlineData.value.dag.edges
+  const queue = [nodeId]
+  while (queue.length) {
+    const current = queue.shift()!
+    for (const edge of edges) {
+      // edge.target is downstream of edge.source — walk backwards
+      if (edge.target === current && !ids.has(edge.source)) {
+        ids.add(edge.source)
+        queue.push(edge.source)
+      }
+    }
+  }
+  return ids
+}
+
+function handlePartialRetrace(queryConditionsJson: string) {
+  if (!selectedNode.value || !selectedNodeId.value) return
+
+  let queryConditions: Record<string, any>[]
+  try {
+    queryConditions = JSON.parse(queryConditionsJson)
+  } catch {
+    ElMessage.error(t('packages_ldp_trace_qc_invalid_json'))
+    return
+  }
+
+  if (traceAbortController) {
+    traceAbortController.abort()
+  }
+
+  const currentId = selectedNodeId.value
+  const upstreamIds = getUpstreamNodeIds(currentId)
+  const affectedIds = new Set([currentId, ...upstreamIds])
+
+  tracing.value = true
+
+  // Set only affected nodes to loading, keep others unchanged
+  const statuses = { ...nodeStatus.value }
+  for (const id of affectedIds) {
+    statuses[id] = 'loading'
+  }
+  nodeStatus.value = statuses
+
+  // Convert queryConditions [{key: val}] to filter format [{key, value}]
+  // const custom = queryConditions.flatMap((cond) =>
+  //   Object.entries(cond).map(([key, value]) => ({ key, value })),
+  // )
+
+  const node = selectedNode.value.data
+  traceAbortController = getTraceData(
+    {
+      connectionId: node.connectionId,
+      table: node.table,
+      filters: { conditions: queryConditions },
+    },
+    {
+      onNodeData: (nodeId, data) => {
+        if (!affectedIds.has(nodeId)) return
+        traceData.value = { ...traceData.value, [nodeId]: data }
+        const hasData = !!data?.traceValue?.currentRecords?.length
+        nodeStatus.value = {
+          ...nodeStatus.value,
+          [nodeId]: hasData ? 'ok' : 'error',
+        }
+      },
+      onDone: () => {
+        tracing.value = false
+        const updated = { ...nodeStatus.value }
+        for (const id of affectedIds) {
+          if (updated[id] === 'loading') updated[id] = 'error'
+        }
+        nodeStatus.value = updated
+      },
+      onError: (error) => {
+        tracing.value = false
+        const updated = { ...nodeStatus.value }
+        for (const id of affectedIds) {
+          if (updated[id] === 'loading') updated[id] = 'error'
+        }
+        nodeStatus.value = updated
+        ElMessage.error(error || 'Retrace failed')
+      },
+    },
+  )
+}
+
+// Watch trackedFields to refetch bloodline diagram
+watch(trackedFields, () => fetchBloodline())
+
+function handleCopyJson(data: any) {
+  copyToClipboard(JSON.stringify(data, null, 2))
+  ElMessage.success('Copied to clipboard')
+}
+
+// ─── Change Log ───
+async function fetchChangeLogs(reset = false) {
+  if (!selectedNode.value) return
+  if (!changeLogTimeRange.value) return
+  if (changeLogLoading.value) return
+
+  const nodeData = traceData.value?.[selectedNodeId.value!]
+  const queryConditions = nodeData?.traceValue?.queryConditions || []
+
+  if (reset) {
+    changeLogs.value = []
+    changeLogLastKey.value = 0
+    changeLogHasMore.value = true
+  }
+
+  changeLogLoading.value = true
+  try {
+    const res = await getChangeLog({
+      table: selectedNode.value.data.table,
+      connectionId: selectedNode.value.data.connectionId,
+      startTime: changeLogTimeRange.value[0],
+      endTime: changeLogTimeRange.value[1],
+      queryConditions,
+      limit: CHANGELOG_LIMIT,
+      lastKey: changeLogLastKey.value,
+    })
+    const logs = res?.logs || []
+    changeLogs.value = [...changeLogs.value, ...logs]
+    if (logs.length > 0) {
+      changeLogLastKey.value = logs.at(-1).key
+    }
+    changeLogHasMore.value = logs.length >= CHANGELOG_LIMIT
+
+    // If content doesn't fill the container, auto-load more
+    if (changeLogHasMore.value) {
+      nextTick(() => {
+        const wrap = changeLogScrollRef.value?.wrapRef as
+          | HTMLElement
+          | undefined
+        if (wrap && wrap.scrollHeight <= wrap.clientHeight) {
+          changeLogLoading.value = false
+          fetchChangeLogs()
+          return
+        }
+      })
+    }
+  } catch (error: any) {
+    ElMessage.error(error?.message || 'Failed to fetch change logs')
+  } finally {
+    changeLogLoading.value = false
+  }
+}
+
+const changeLogScrollRef =
+  ref<InstanceType<(typeof import('element-plus'))['ElScrollbar']>>()
+
+function handleLoadMoreChangeLogs() {
+  if (changeLogHasMore.value && !changeLogLoading.value) {
+    fetchChangeLogs()
+  }
+}
+
+// Auto-fetch change logs when switching to changelog tab or changing node while on changelog tab
+watch([rightTab, selectedNodeId], ([tab]) => {
+  if (tab === 'changelog') {
+    fetchChangeLogs(true)
+  }
+})
+
+function formatLogTime(timestamp: number) {
+  const d = new Date(timestamp)
+  const pad = (n: number, len = 2) => String(n).padStart(len, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`
+}
+
+const OP_LABELS: Record<string, string> = {
+  i: 'INSERT',
+  u: 'UPDATE',
+  d: 'DELETE',
+}
+
+/**
+ * Compute diff between before/after objects.
+ * Returns sets of changed/added/removed top-level keys.
+ */
+function computeDiffKeys(
+  before: Record<string, any> | null,
+  after: Record<string, any> | null,
+) {
+  const changed = new Set<string>()
+  const added = new Set<string>()
+  const removed = new Set<string>()
+  const bKeys = Object.keys(before || {})
+  const aKeys = Object.keys(after || {})
+
+  for (const key of bKeys) {
+    if (after == null || !(key in after)) {
+      removed.add(key)
+    } else if (JSON.stringify(before![key]) !== JSON.stringify(after[key])) {
+      changed.add(key)
+    }
+  }
+  for (const key of aKeys) {
+    if (before == null || !(key in before)) {
+      added.add(key)
+    }
+  }
+  return { changed, added, removed }
+}
+
+/**
+ * Build a nodeClassName function for VueJsonPretty diff highlighting.
+ * Highlights rows whose top-level key is in the diff set.
+ */
+function makeDiffNodeClass(
+  diffKeys: { changed: Set<string>; added: Set<string>; removed: Set<string> },
+  side: 'before' | 'after',
+) {
+  return (node: any) => {
+    // node.key is the field name; only highlight top-level content nodes (level === 1)
+    if (node.level !== 1 || node.type !== 'content') return ''
+    const key = node.key
+    if (!key) return ''
+    if (diffKeys.changed.has(key)) return 'vjp-diff-changed'
+    if (side === 'before' && diffKeys.removed.has(key))
+      return 'vjp-diff-removed'
+    if (side === 'after' && diffKeys.added.has(key)) return 'vjp-diff-added'
+    return ''
+  }
+}
+
+// ─── Diff scroll sync ───
+const diffScrollPairs = new Map<
+  number,
+  { before?: HTMLElement; after?: HTMLElement }
+>()
+
+function setDiffScrollRef(
+  el: HTMLElement | null,
+  logKey: number,
+  side: 'before' | 'after',
+) {
+  if (!el) {
+    // cleanup on unmount
+    const pair = diffScrollPairs.get(logKey)
+    if (pair) {
+      delete pair[side]
+      if (!pair.before && !pair.after) diffScrollPairs.delete(logKey)
+    }
+    return
+  }
+  if (!diffScrollPairs.has(logKey)) diffScrollPairs.set(logKey, {})
+  diffScrollPairs.get(logKey)![side] = el
+}
+
+function handleDiffScroll(
+  _event: Event,
+  logKey: number,
+  side: 'before' | 'after',
+) {
+  const el = _event.target as HTMLElement
+  const pair = diffScrollPairs.get(logKey)
+  if (!pair) return
+  const otherEl = side === 'before' ? pair.after : pair.before
+  if (!otherEl || (otherEl as any).__syncing) return
+  ;(el as any).__syncing = true
+  otherEl.scrollTop = el.scrollTop
+  otherEl.scrollLeft = el.scrollLeft
+  requestAnimationFrame(() => {
+    ;(el as any).__syncing = false
+  })
+}
+
+// Oplog expansion state
+const expandedOplogKeys = ref<Set<string>>(new Set())
+function toggleOplogExpand(path: string) {
+  if (expandedOplogKeys.value.has(path)) {
+    expandedOplogKeys.value.delete(path)
+  } else {
+    expandedOplogKeys.value.add(path)
+  }
+}
+function isOplogExpanded(path: string) {
+  return expandedOplogKeys.value.has(path)
+}
+
+function onNodeSelect(nodeId: string) {
+  selectNode(nodeId)
+}
+
+function handleClickName(row: any) {
+  let routeName
+
+  if (!['edit', 'wait_start'].includes(row.status)) {
+    routeName = row.syncType === 'migrate' ? 'MigrationMonitor' : 'TaskMonitor'
+  } else {
+    routeName = row.syncType === 'migrate' ? 'MigrateEditor' : 'DataflowEditor'
+  }
+
+  openRoute({
+    name: routeName,
+    params: {
+      id: row.id,
+    },
+  })
+}
+
+function openRoute(route, newTab = true) {
+  if (newTab) {
+    window.open(router.resolve(route).href)
+  } else {
+    router.push(route)
+  }
+}
+
+// ─── Lifecycle ───
+onMounted(() => {
+  fetchConnectionInfo()
+  fetchBloodline()
+  fetchFields()
+})
+
+onBeforeUnmount(() => {
+  if (traceAbortController) {
+    traceAbortController.abort()
+  }
+})
+
+// ─── Sub-components ───
+const OplogTreeNode = defineComponent({
+  name: 'OplogTreeNode',
+  props: {
+    entries: { type: Array as PropType<OplogEntry[]>, required: true },
+    depth: { type: Number, default: 0 },
+    parentPath: { type: String, default: '' },
+  },
+  setup(props) {
+    return () =>
+      props.entries.map((entry, idx) => {
+        const path = props.parentPath
+          ? `${props.parentPath}.${entry.key}`
+          : entry.key
+        const hasChildren = entry.children && entry.children.length > 0
+        const expanded = isOplogExpanded(path)
+        const displayValue = hasChildren
+          ? entry.type === 'Array'
+            ? `Array(${entry.children!.length})`
+            : `{${entry.children!.length} fields}`
+          : String(entry.value)
+
+        return h('div', { key: path }, [
+          h(
+            'div',
+            {
+              class: ['oplog-row', { 'oplog-row--expandable': hasChildren }],
+              style: { paddingLeft: `${props.depth * 20 + 12}px` },
+              onClick: () => hasChildren && toggleOplogExpand(path),
+            },
+            [
+              h('span', { class: 'oplog-chevron' }, [
+                hasChildren
+                  ? h('i', {
+                      class: ['lucide-icon', expanded ? 'expanded' : ''],
+                    })
+                  : h('span', { class: 'oplog-chevron-placeholder' }),
+              ]),
+              h('span', { class: 'oplog-key' }, entry.key),
+              h('span', { class: 'oplog-value' }, displayValue),
+              h('span', { class: 'oplog-type' }, entry.type),
+            ],
+          ),
+          expanded && hasChildren
+            ? h(OplogTreeNode, {
+                entries: entry.children!,
+                depth: props.depth + 1,
+                parentPath: path,
+              })
+            : null,
+        ])
+      })
+  },
+})
+</script>
+
+<template>
+  <div class="data-trace-page">
+    <!-- ═══ HEADER ═══ -->
+    <header class="trace-header">
+      <div class="trace-header__left">
+        <button class="trace-back-btn" @click="handleBack">
+          <el-icon size="18"><i-lucide-arrow-left /></el-icon>
+        </button>
+        <h1 class="trace-title">{{ t('packages_ldp_trace_page_title') }}</h1>
+        <!-- Breadcrumb: connection / table -->
+        <nav class="trace-breadcrumb">
+          <span class="trace-breadcrumb__item">
+            <DatabaseIcon
+              v-if="pdkHash"
+              class="trace-breadcrumb__db-icon"
+              :pdk-hash="pdkHash"
+              :size="18"
+            />
+            <el-icon v-else size="14" class="trace-breadcrumb__icon">
+              <i-lucide-database />
+            </el-icon>
+            <span>{{ connectionName || connectionId }}</span>
+          </span>
+          <span class="trace-breadcrumb__sep">/</span>
+          <span class="trace-breadcrumb__item trace-breadcrumb__item--current">
+            <el-icon size="14" class="trace-breadcrumb__icon">
+              <i-lucide-table />
+            </el-icon>
+            <span>{{ tableName }}</span>
+          </span>
+        </nav>
+      </div>
+    </header>
+
+    <!-- ═══ CONTROL PANEL ═══ -->
+    <section class="trace-control">
+      <div class="trace-control__top">
+        <h2 class="trace-control__title">
+          <el-icon size="14"><i-lucide-filter /></el-icon>
+          {{ t('packages_ldp_trace_data_filters') }}
+          <span class="trace-control__required">*</span>
+        </h2>
+        <!-- Filter Mode Toggle -->
+        <el-segmented
+          v-model="filterMode"
+          :options="filterModeOptions"
+          size="default"
+        >
+          <template #default="{ item }">
+            <div class="flex align-center gap-1">
+              <el-icon size="14">
+                <i-lucide-layers v-if="item.value === 'builder'" />
+                <i-lucide-braces v-else />
+              </el-icon>
+              <span>{{ item.label }}</span>
+            </div>
+          </template>
+        </el-segmented>
+
+        <!-- Trace Button -->
+        <el-button
+          type="primary"
+          class="trace-action-btn"
+          :loading="tracing"
+          @click="handleTrace"
+        >
+          <el-icon v-if="!tracing" class="mr-1"><i-lucide-search /></el-icon>
+          {{ t('packages_ldp_trace_btn') }}
+        </el-button>
+      </div>
+
+      <!-- Builder Mode (Inline Pill) -->
+      <PillFilterBuilder
+        v-if="filterMode === 'builder'"
+        v-model="filterRows"
+        :fields="fieldOptions"
+        class="mt-3"
+      />
+
+      <!-- MQL Mode -->
+      <div v-else class="trace-mql">
+        <textarea
+          v-model="mqlJson"
+          class="trace-mql__textarea"
+          spellcheck="false"
+          rows="4"
+        />
+      </div>
+
+      <!-- Tracked Fields -->
+      <div class="trace-tracked-section flex align-center">
+        <h2 class="trace-control__title">
+          <el-icon size="14"><i-lucide-scan-eye /></el-icon>
+          {{ t('packages_ldp_trace_tracked_fields') }}
+        </h2>
+        <FieldSelect
+          v-model="trackedFields"
+          filterable
+          multiple
+          clearable
+          item-label="field_name"
+          item-value="field_name"
+          :options="fieldOptions"
+          :loading="fieldLoading"
+          :placeholder="t('packages_ldp_trace_add_field')"
+          class="trace-tracked__select w-auto"
+        />
+      </div>
+    </section>
+
+    <!-- ═══ WORKSPACE ═══ -->
+    <div class="trace-workspace">
+      <!-- LEFT: Lineage Graph (Vue Flow) -->
+      <aside class="trace-lineage">
+        <div id="table-lineage-graph" class="trace-lineage__canvas">
+          <div class="trace-lineage__header rounded-xl">
+            <el-icon size="14"><i-lucide-layers /></el-icon>
+            <span>{{ t('packages_ldp_trace_data_lineage') }}</span>
+          </div>
+          <svg style="position: absolute; left: -1000px; top: 0">
+            <defs>
+              <marker
+                id="marker-arrow"
+                viewBox="-10 -10 20 20"
+                refX="0"
+                refY="0"
+                markerWidth="12.5"
+                markerHeight="12.5"
+                markerUnits="strokeWidth"
+                orient="auto-start-reverse"
+              >
+                <polyline
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  fill="none"
+                  points="-5,-4 0,0 -5,4"
+                  style="stroke: context-stroke; stroke-width: 2"
+                />
+              </marker>
+            </defs>
+          </svg>
+          <VueFlow
+            v-loading="bloodlineLoading"
+            :nodes="flowNodes"
+            :edges="flowEdges"
+            :apply-changes="false"
+            :delete-key-code="null"
+            class="trace-vue-flow"
+            :max-zoom="1.2"
+            @nodes-initialized="handleLayoutGraph"
+          >
+            <Background />
+            <template #node-trace="{ id, data }">
+              <TraceNode
+                :id="id"
+                :data="data"
+                :active="data.selected"
+                @select="onNodeSelect"
+              />
+            </template>
+            <template #edge-table="edge">
+              <TableEdge
+                :id="edge.id"
+                :tasks="(edge.data.tasks ?? []) as Task[]"
+                :source-x="edge.sourceX"
+                :source-y="edge.sourceY"
+                :target-x="edge.targetX"
+                :target-y="edge.targetY"
+                :source-position="edge.sourcePosition"
+                :target-position="edge.targetPosition"
+                :style="edge.style"
+                @click-task="handleClickName"
+              />
+            </template>
+          </VueFlow>
+        </div>
+      </aside>
+
+      <!-- RIGHT: Data Result Viewer -->
+      <main class="trace-result">
+        <template v-if="!traceData">
+          <div class="trace-empty-state">
+            <el-icon size="48" class="trace-empty-state__icon"
+              ><i-lucide-search-code
+            /></el-icon>
+            <p class="trace-empty-state__title">
+              {{ t('packages_ldp_trace_no_results_title') }}
+            </p>
+            <p
+              class="trace-empty-state__desc"
+              v-html="
+                t('packages_ldp_trace_no_results_desc', [
+                  `<strong>${t('packages_ldp_trace_btn')}</strong>`,
+                ])
+              "
+            />
+          </div>
+        </template>
+
+        <template v-else-if="selectedNodeId">
+          <!-- Toolbar (hidden when target trace node) -->
+          <div class="trace-result__toolbar">
+            <div class="trace-result__node-info">
+              <strong>{{ selectedNode?.data?.table }}</strong>
+            </div>
+            <div class="trace-result__actions">
+              <el-segmented v-model="rightTab" :options="rightTabOptions">
+                <template #default="{ item }">
+                  <div class="flex align-center gap-1">
+                    <el-icon size="14">
+                      <i-lucide-braces v-if="item.value === 'json'" />
+                      <i-lucide-table2 v-else-if="item.value === 'table'" />
+                      <i-lucide-history
+                        v-else-if="item.value === 'changelog'"
+                      />
+                    </el-icon>
+                    <span>{{ item.label }}</span>
+                  </div>
+                </template>
+              </el-segmented>
+            </div>
+          </div>
+
+          <!-- ─── JSON TAB ─── -->
+          <div v-if="rightTab !== 'changelog'" class="trace-result__body">
+            <!-- Query Conditions (JSON / Table modes) -->
+            <NodeQueryConditions
+              v-if="!isTargetTraceNode"
+              :conditions="selectedNodeQueryConditions"
+              @save="handlePartialRetrace"
+            />
+            <div
+              v-if="rightTab === 'json'"
+              :class="[
+                'trace-data-pane',
+                {
+                  'trace-data-pane--dual':
+                    !isTargetTraceNode && downstreamNodeData,
+                },
+              ]"
+            >
+              <!-- Current Node -->
+              <div class="trace-json-panel">
+                <div v-if="!isTargetTraceNode" class="trace-json-panel__header">
+                  <span>Current ({{ selectedNode?.data?.table }})</span>
+                  <el-button
+                    v-if="currentNodeData"
+                    size="small"
+                    text
+                    @click="handleCopyJson(currentNodeData)"
+                  >
+                    <el-icon class="mr-1" size="12"><i-lucide-copy /></el-icon>
+                    {{ t('packages_ldp_trace_copy') }}
+                  </el-button>
+                </div>
+                <div
+                  v-if="isSelectedNodeLoading"
+                  class="trace-data-missing trace-data-missing--loading"
+                >
+                  <el-icon class="is-loading" size="20"
+                    ><i-lucide-loader-2
+                  /></el-icon>
+                  {{ t('packages_ldp_trace_status_loading') }}
+                </div>
+                <div v-else-if="!currentNodeData" class="trace-data-missing">
+                  <el-icon size="20"><i-lucide-circle-x /></el-icon>
+                  {{ t('packages_ldp_trace_no_data') }}
+                </div>
+                <VueJsonPretty
+                  v-else
+                  :data="currentNodeData"
+                  show-icon
+                  :show-line="false"
+                  :deep="3"
+                  class="trace-json-pretty"
+                />
+              </div>
+              <!-- Downstream Node (non-target only) -->
+              <template v-if="!isTargetTraceNode">
+                <div class="trace-data-divider">
+                  <el-icon size="16"><i-lucide-arrow-right /></el-icon>
+                </div>
+                <div class="trace-json-panel">
+                  <div class="trace-json-panel__header">
+                    <span>Downstream ({{ tableName }})</span>
+                    <el-button
+                      v-if="downstreamNodeData"
+                      size="small"
+                      text
+                      @click="handleCopyJson(downstreamNodeData)"
+                    >
+                      <el-icon class="mr-1" size="12"
+                        ><i-lucide-copy
+                      /></el-icon>
+                      {{ t('packages_ldp_trace_copy') }}
+                    </el-button>
+                  </div>
+                  <div
+                    v-if="isSelectedNodeLoading"
+                    class="trace-data-missing trace-data-missing--loading"
+                  >
+                    <el-icon class="is-loading" size="20"
+                      ><i-lucide-loader-2
+                    /></el-icon>
+                    {{ t('packages_ldp_trace_status_loading') }}
+                  </div>
+                  <div
+                    v-else-if="!downstreamNodeData"
+                    class="trace-data-missing"
+                  >
+                    <el-icon size="20"><i-lucide-circle-x /></el-icon>
+                    {{ t('packages_ldp_trace_no_data') }}
+                  </div>
+                  <VueJsonPretty
+                    v-else
+                    :data="downstreamNodeData"
+                    show-icon
+                    :show-line="false"
+                    :deep="3"
+                    class="trace-json-pretty"
+                  />
+                  <!-- <pre v-else class="trace-json-code trace-json-code--null">{{
+                    t('packages_ldp_trace_no_data_comment')
+                  }}</pre> -->
+                </div>
+              </template>
+            </div>
+            <div
+              v-else-if="rightTab === 'table'"
+              :class="[
+                'trace-data-pane',
+                {
+                  'trace-data-pane--dual':
+                    !isTargetTraceNode && downstreamNodeData,
+                },
+              ]"
+            >
+              <!-- Current Node -->
+              <div class="trace-data-panel">
+                <div v-if="!isTargetTraceNode" class="trace-data-panel__header">
+                  {{ selectedNode?.data?.table }}
+                </div>
+                <div
+                  v-if="isSelectedNodeLoading"
+                  class="trace-data-missing trace-data-missing--loading"
+                >
+                  <el-icon class="is-loading" size="20"
+                    ><i-lucide-loader-2
+                  /></el-icon>
+                  {{ t('packages_ldp_trace_status_loading') }}
+                </div>
+                <div v-else-if="!currentNodeData" class="trace-data-missing">
+                  <el-icon size="20"><i-lucide-circle-x /></el-icon>
+                  {{ t('packages_ldp_trace_no_data') }}
+                </div>
+                <div v-else class="trace-table-wrap">
+                  <table class="trace-table">
+                    <thead>
+                      <tr>
+                        <th
+                          v-for="col in displayColumns"
+                          :key="col"
+                          :class="{ 'traced-col': isTrackedColumn(col) }"
+                          @click="toggleTrackedColumn(col)"
+                        >
+                          <span class="trace-th-content">
+                            {{ col }}
+                            <el-icon
+                              v-if="isTrackedColumn(col)"
+                              size="10"
+                              class="trace-th-pin"
+                              ><i-lucide-pin
+                            /></el-icon>
+                          </span>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="(row, ri) in currentNodeData" :key="ri">
+                        <td
+                          v-for="col in displayColumns"
+                          :key="col"
+                          :class="{ 'traced-col': isTrackedColumn(col) }"
+                        >
+                          {{ row[col] ?? '—' }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <!-- Downstream Node (non-target only) -->
+              <template v-if="!isTargetTraceNode && downstreamNodeData">
+                <div class="trace-data-divider">
+                  <el-icon size="16"><i-lucide-arrow-right /></el-icon>
+                </div>
+                <div class="trace-data-panel">
+                  <div class="trace-data-panel__header">{{ tableName }}</div>
+                  <div
+                    v-if="!downstreamNodeData"
+                    class="trace-data-missing trace-data-missing--alert"
+                  >
+                    <el-icon size="20"><i-lucide-triangle-alert /></el-icon>
+                    {{ t('packages_ldp_trace_data_missing') }}
+                  </div>
+                  <div v-else class="trace-table-wrap">
+                    <table class="trace-table">
+                      <thead>
+                        <tr>
+                          <th
+                            v-for="col in displayColumns"
+                            :key="col"
+                            :class="{ 'traced-col': isTrackedColumn(col) }"
+                          >
+                            {{ col }}
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr v-for="(row, ri) in downstreamNodeData" :key="ri">
+                          <td
+                            v-for="col in displayColumns"
+                            :key="col"
+                            :class="{ 'traced-col': isTrackedColumn(col) }"
+                          >
+                            {{ row[col] ?? '—' }}
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+
+          <!-- ─── CHANGE LOG TAB ─── -->
+          <div v-else class="trace-result__body changelog">
+            <!-- Toolbar: time range + query -->
+            <div class="changelog__toolbar">
+              <el-date-picker
+                v-model="changeLogTimeRange"
+                type="datetimerange"
+                range-separator="—"
+                :start-placeholder="t('packages_ldp_trace_changelog_start')"
+                :end-placeholder="t('packages_ldp_trace_changelog_end')"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
+                :shortcuts="changeLogShortcuts"
+                :disabled-date="disabledChangeLogDate"
+                class="changelog__picker"
+                popper-class="changelog__picker-popper"
+                @change="handleChangeLogTimeChange"
+              />
+              <el-button
+                type="primary"
+                :loading="changeLogLoading"
+                :disabled="!changeLogTimeRange"
+                @click="fetchChangeLogs(true)"
+              >
+                <template #icon>
+                  <i-lucide-search />
+                </template>
+                {{ t('packages_ldp_trace_changelog_query') }}
+              </el-button>
+            </div>
+
+            <!-- Log list -->
+            <el-scrollbar
+              v-if="changeLogs.length"
+              ref="changeLogScrollRef"
+              class="changelog__list"
+              :distance="10"
+              @end-reached="handleLoadMoreChangeLogs"
+            >
+              <div class="changelog__list-inner">
+                <div
+                  v-for="log in changeLogs"
+                  :key="log.key"
+                  class="changelog__entry"
+                >
+                  <div class="changelog__entry-header">
+                    <span
+                      class="changelog__op"
+                      :class="`changelog__op--${log.op}`"
+                      >{{ OP_LABELS[log.op] || log.op }}</span
+                    >
+                    <span class="changelog__time">{{
+                      formatLogTime(log.timestamp)
+                    }}</span>
+                    <span class="changelog__from">{{ log.fromTable }}</span>
+                  </div>
+                  <div class="changelog__entry-body">
+                    <template v-if="log.before || log.after">
+                      <div v-if="log.before" class="changelog__diff-panel">
+                        <div
+                          class="changelog__diff-label changelog__diff-label--before"
+                        >
+                          Before
+                        </div>
+                        <div
+                          :ref="(el) => setDiffScrollRef(el, log.key, 'before')"
+                          class="changelog__diff-scroll"
+                          @scroll="
+                            (e) => handleDiffScroll(e, log.key, 'before')
+                          "
+                        >
+                          <VueJsonPretty
+                            :data="log.before"
+                            show-icon
+                            :show-line="false"
+                            :deep="2"
+                            :node-selectable="() => false"
+                            :render-node-key="
+                              ({ node, defaultKey }) => {
+                                const dk = computeDiffKeys(
+                                  log.before,
+                                  log.after,
+                                )
+                                const cls = makeDiffNodeClass(
+                                  dk,
+                                  'before',
+                                )(node)
+                                return cls
+                                  ? h('span', { class: cls }, [defaultKey])
+                                  : defaultKey
+                              }
+                            "
+                            class="changelog__diff-json"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        v-if="log.before && log.after"
+                        class="changelog__diff-arrow"
+                      >
+                        <el-icon size="14"><i-lucide-arrow-right /></el-icon>
+                      </div>
+                      <div v-if="log.after" class="changelog__diff-panel">
+                        <div
+                          class="changelog__diff-label changelog__diff-label--after"
+                        >
+                          After
+                        </div>
+                        <div
+                          :ref="(el) => setDiffScrollRef(el, log.key, 'after')"
+                          class="changelog__diff-scroll"
+                          @scroll="(e) => handleDiffScroll(e, log.key, 'after')"
+                        >
+                          <VueJsonPretty
+                            :data="log.after"
+                            show-icon
+                            :show-line="false"
+                            :deep="2"
+                            :node-selectable="() => false"
+                            :render-node-key="
+                              ({ node, defaultKey }) => {
+                                const dk = computeDiffKeys(
+                                  log.before,
+                                  log.after,
+                                )
+                                const cls = makeDiffNodeClass(dk, 'after')(node)
+                                return cls
+                                  ? h('span', { class: cls }, [defaultKey])
+                                  : defaultKey
+                              }
+                            "
+                            class="changelog__diff-json"
+                          />
+                        </div>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+                <!-- Loading more indicator -->
+                <div v-if="changeLogLoading" class="changelog__loading">
+                  <el-icon class="is-loading" size="16"
+                    ><i-lucide-loader-2
+                  /></el-icon>
+                </div>
+                <div v-else-if="!changeLogHasMore" class="changelog__no-more">
+                  {{ t('packages_ldp_trace_changelog_no_more') }}
+                </div>
+              </div>
+            </el-scrollbar>
+
+            <!-- Empty state -->
+            <div v-else-if="!changeLogLoading" class="changelog__empty">
+              <el-icon size="32" class="changelog__empty-icon"
+                ><i-lucide-file-clock
+              /></el-icon>
+              <p>{{ t('packages_ldp_trace_changelog_empty') }}</p>
+            </div>
+
+            <!-- Initial loading -->
+            <div v-else class="changelog__loading changelog__loading--center">
+              <el-icon class="is-loading" size="24"
+                ><i-lucide-loader-2
+              /></el-icon>
+            </div>
+          </div>
+        </template>
+      </main>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
+</style>
+
+<style scoped lang="scss">
+// ─── Layout ───
+.data-trace-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #fafafa;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: #18181b;
+}
+
+// ─── Header ───
+.trace-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 24px;
+  background: rgb(252, 252, 252);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid #e4e4e7;
+  flex-shrink: 0;
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+}
+.trace-back-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  border: 1px solid #e4e4e7;
+  background: white;
+  cursor: pointer;
+  color: #52525b;
+  transition: all 0.15s;
+  &:hover {
+    background: #f4f4f5;
+    border-color: #a1a1aa;
+  }
+}
+.trace-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+.trace-breadcrumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 4px;
+  font-size: 13px;
+  color: #71717a;
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-weight: 500;
+    color: #71717a;
+    transition: color 0.15s;
+
+    &--current {
+      color: #18181b;
+    }
+  }
+
+  &__sep {
+    color: #a1a1aa;
+    flex-shrink: 0;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    color: inherit;
+  }
+
+  &__db-icon {
+    flex-shrink: 0;
+    border-radius: 4px;
+  }
+}
+
+// ─── Control Panel ───
+.trace-control {
+  padding: 16px 24px;
+  flex-shrink: 0;
+  background: var(--el-bg-color);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid #e4e4e7;
+  &__title {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    color: #3f3f46;
+  }
+  &__required {
+    color: #ef4444;
+    font-size: 14px;
+    line-height: 1;
+  }
+  &__subtitle {
+    font-size: 11px;
+    font-weight: 400;
+    color: #a1a1aa;
+    text-transform: none;
+    letter-spacing: 0;
+  }
+  &__top {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+}
+
+.trace-tracked-section {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed #e4e4e7;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.trace-tracked__tags {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.trace-tracked__tag {
+  // background: #eef2ff;
+  // color: #4338ca;
+  // border-color: #c7d2fe;
+  font-weight: 500;
+  font-size: 13px;
+  // :deep(.el-tag__close) {
+  //   color: #818cf8;
+  //   &:hover {
+  //     background: #c7d2fe;
+  //     color: #4338ca;
+  //   }
+  // }
+}
+.trace-tracked__select {
+  width: 180px;
+  flex-shrink: 0;
+}
+.trace-action-btn {
+  border-radius: 10px;
+  font-weight: 600;
+}
+
+// ─── MQL ───
+.trace-mql {
+  margin-top: 12px;
+}
+.trace-mql__textarea {
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: #1e1e2e;
+  color: #a6e3a1;
+  border: 1px solid #313244;
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 13px;
+  resize: vertical;
+  line-height: 1.6;
+  box-sizing: border-box;
+  &:focus {
+    outline: 2px solid #4f46e5;
+    outline-offset: -1px;
+  }
+}
+
+// ─── Workspace ───
+.trace-workspace {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+}
+
+// ─── Lineage Panel ───
+.trace-lineage {
+  width: 50%;
+  min-width: 320px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e4e4e7;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(12px);
+  &__canvas {
+    flex: 1;
+    position: relative;
+    overflow: auto;
+    min-height: 0;
+  }
+  &__header {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    z-index: 10;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 18px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #3f3f46;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(10px);
+    border: 1px solid #e4e4e7;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    pointer-events: none;
+  }
+}
+// ─── Vue Flow ───
+.trace-vue-flow {
+  width: 100%;
+  height: 100%;
+}
+
+// ─── Result Panel ───
+.trace-result {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  background: white;
+}
+.trace-empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 24px;
+  text-align: center;
+  &__icon {
+    color: #d4d4d8;
+    margin-bottom: 16px;
+  }
+  &__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #52525b;
+    margin: 0 0 8px;
+  }
+  &__desc {
+    font-size: 13px;
+    color: #a1a1aa;
+    max-width: 360px;
+    margin: 0;
+    line-height: 1.6;
+  }
+}
+.trace-result__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  border-bottom: 1px solid #f4f4f5;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.trace-result__node-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+}
+.trace-result__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.trace-result__body {
+  flex: 1;
+  overflow: auto;
+  padding: 16px 20px;
+}
+
+// ─── Data Pane ───
+.trace-data-pane {
+  display: flex;
+  gap: 0;
+  height: 100%;
+  min-height: 200px;
+  &--dual {
+    .trace-data-panel,
+    .trace-json-panel {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
+.trace-data-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  flex-shrink: 0;
+  color: #d4d4d8;
+}
+.trace-data-panel {
+  flex: 1;
+  min-width: 0;
+  &__header {
+    font-size: 12px;
+    font-weight: 600;
+    color: #52525b;
+    padding: 6px 0;
+    margin-bottom: 8px;
+    border-bottom: 1px solid #f4f4f5;
+  }
+}
+.trace-data-missing {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 20px;
+  border-radius: 12px;
+  background: #f4f4f5;
+  color: #71717a;
+  font-size: 13px;
+  font-weight: 500;
+  &--alert {
+    background: #fef2f2;
+    color: #dc2626;
+    border: 1px solid #fecaca;
+  }
+}
+
+// ─── Trace Table ───
+.trace-table-wrap {
+  overflow: auto;
+  border-radius: 12px;
+  border: 1px solid #e4e4e7;
+}
+.trace-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  th,
+  td {
+    padding: 8px 12px;
+    text-align: left;
+    white-space: nowrap;
+    border-bottom: 1px solid #f4f4f5;
+  }
+  th {
+    background: #fafafa;
+    font-weight: 600;
+    color: #52525b;
+    cursor: pointer;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    user-select: none;
+    &:hover {
+      background: #f0f0f5;
+    }
+  }
+  td {
+    color: #3f3f46;
+  }
+  .traced-col {
+    background: #eef2ff;
+    &:is(th) {
+      background: #e0e7ff;
+    }
+  }
+}
+.trace-th-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.trace-th-pin {
+  color: #4f46e5;
+}
+
+// ─── Field Filter ───
+.trace-field-filter {
+  &__actions {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 8px;
+  }
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 240px;
+    overflow: auto;
+  }
+}
+
+// ─── JSON Panel ───
+.trace-json-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12px;
+    font-weight: 600;
+    color: #52525b;
+    padding: 6px 0;
+    margin-bottom: 8px;
+  }
+}
+.trace-json-code {
+  flex: 1;
+  margin: 0;
+  padding: 16px;
+  border-radius: 12px;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  font-size: 12px;
+  line-height: 1.7;
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  overflow: auto;
+  white-space: pre;
+  border: 1px solid #313244;
+  &--null {
+    color: #f38ba8;
+    font-style: italic;
+  }
+}
+.trace-json-pretty {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+  border-radius: 12px;
+  background: #fafafa;
+  border: 1px solid #e4e4e7;
+  font-size: 12px;
+}
+
+.vjs-tree {
+  :deep(.vjs-tree-node.vjs-tree-node.vjs-tree-node) {
+    border-radius: 6px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+}
+
+// ─── VueJsonPretty diff highlight (whole-row via :has) ───
+.changelog__diff-json {
+  :deep(.vjs-tree-node:has(.vjp-diff-changed)) {
+    background: #fef9c3;
+    border-radius: 3px;
+  }
+  :deep(.vjs-tree-node:has(.vjp-diff-removed)) {
+    background: #fee2e2;
+    border-radius: 3px;
+    .vjs-value {
+      text-decoration: line-through;
+      text-decoration-color: #fca5a5;
+      color: #b91c1c;
+    }
+  }
+  :deep(.vjs-tree-node:has(.vjp-diff-added)) {
+    background: #dcfce7;
+    border-radius: 3px;
+    .vjs-value {
+      color: #15803d;
+    }
+  }
+}
+
+// ─── Change Log ───
+.changelog {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &__picker {
+    max-width: 380px;
+  }
+
+  &__list {
+    flex: 1;
+    min-height: 0;
+  }
+
+  &__list-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 2px 0;
+  }
+
+  &__entry {
+    border: 1px solid #e4e4e7;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #fff;
+    transition: box-shadow 0.15s;
+    &:hover {
+      box-shadow: 0 1px 4px rgb(0 0 0 / 0.06);
+    }
+  }
+
+  &__entry-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: #fafafa;
+    border-bottom: 1px solid #f4f4f5;
+    font-size: 12px;
+  }
+
+  &__op {
+    display: inline-flex;
+    align-items: center;
+    padding: 1px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    &--i {
+      background: #dcfce7;
+      color: #15803d;
+    }
+    &--u {
+      background: #dbeafe;
+      color: #1d4ed8;
+    }
+    &--d {
+      background: #fee2e2;
+      color: #b91c1c;
+    }
+  }
+
+  &__time {
+    color: #71717a;
+    font-size: 11px;
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+  }
+
+  &__from {
+    color: #a1a1aa;
+    font-size: 11px;
+    margin-left: auto;
+  }
+
+  &__entry-body {
+    display: flex;
+    align-items: stretch;
+    gap: 8px;
+    padding: 10px 12px;
+  }
+
+  &__diff-panel {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__diff-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 4px;
+    &--before {
+      color: #ef4444;
+    }
+    &--after {
+      color: #22c55e;
+    }
+  }
+
+  &__diff-scroll {
+    overflow: auto;
+    max-height: 280px;
+    border-radius: 8px;
+    background: #f4f4f5;
+  }
+
+  &__diff-json {
+    padding: 6px 8px;
+    font-size: 12px;
+  }
+
+  &__diff-arrow {
+    display: flex;
+    align-items: center;
+    color: #a1a1aa;
+    flex-shrink: 0;
+    padding-top: 20px;
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    padding: 12px;
+    color: #a1a1aa;
+    &--center {
+      flex: 1;
+      align-items: center;
+    }
+  }
+
+  &__no-more {
+    text-align: center;
+    font-size: 12px;
+    color: #a1a1aa;
+    padding: 8px;
+  }
+
+  &__empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #a1a1aa;
+    font-size: 13px;
+  }
+
+  &__empty-icon {
+    color: #d4d4d8;
+  }
+}
+
+// ─── Utilities ───
+.mx-2 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+.mr-1 {
+  margin-right: 4px;
+}
+.ml-1 {
+  margin-left: 4px;
+}
+</style>
+
+<style lang="scss">
+.changelog__picker-popper {
+  .el-picker-panel.el-picker-panel {
+    [slot='sidebar'],
+    .el-picker-panel__sidebar {
+      position: relative;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    .el-picker-panel__body-wrapper {
+      display: flex;
+    }
+
+    .el-picker-panel__body {
+      width: 646px;
+      margin-left: 0;
+    }
+
+    &.el-date-range-picker.has-sidebar {
+      width: auto;
+    }
+  }
+}
+</style>
diff --git a/packages/ldp/src/TablePreview.vue b/packages/ldp/src/TablePreview.vue
index d40e093e3..29144181f 100644
--- a/packages/ldp/src/TablePreview.vue
+++ b/packages/ldp/src/TablePreview.vue
@@ -58,6 +58,7 @@ export default {
   emits: ['createSingleTask', 'handleShowUpgrade', 'createApi'],
   data() {
     return {
+      isDaas: import.meta.env.VUE_APP_PLATFORM === 'DAAS',
       visible: false,
       activeName: 'overView',
       activeNameItems: 'columnsPreview',
@@ -516,6 +517,16 @@ export default {
       this.$emit('createSingleTask', this.selected, this.swimType)
     },
 
+    handleDataTrace() {
+      this.openRoute({
+        name: 'DataTrace',
+        query: {
+          connectionId: this.connectionId,
+          tableName: this.selected.name,
+        },
+      })
+    },
+
     getTaskType(type) {
       return TASK_TYPE_MAP[type] || ''
     },
@@ -717,6 +728,12 @@ export default {
       })
     }, 300),
 
+    handleHeaderCommand(command) {
+      if (command === 'delete') {
+        this.handleDelete()
+      }
+    },
+
     handleDelete() {
       if (this.taskData.length) {
         this.activeName = 'tasks'
@@ -806,32 +823,39 @@ export default {
             >
           </ElTooltip>
           <div class="flex-grow-1" />
-          <ElButton
-            class="flex-shrink-0"
-            type="primary"
-            @click="handleCreateTask"
-          >
-            {{ $t('packages_business_swimlane_tablepreview_chuangjianrenwu') }}
-          </ElButton>
-          <ElButton
-            v-if="apiSupportTypes.includes(connectionType) && isDaas"
-            class="flex-shrink-0"
-            type="primary"
-            plain
-            @click="handleCreateAPI"
-          >
-            {{ $t('packages_business_publish_api') }}
-          </ElButton>
-          <ElButton
-            v-if="swimType === 'mdm'"
-            class="flex-shrink-0"
-            type="danger"
-            plain
-            @click="handleDelete"
-          >
-            <VIcon class="mr-1">delete</VIcon>
-            {{ $t('public_button_delete') }}
-          </ElButton>
+          <ElButtonGroup class="flex-shrink-0" style="--btn-space: 0">
+            <ElButton @click="handleCreateTask">
+              {{
+                $t('packages_business_swimlane_tablepreview_chuangjianrenwu')
+              }}
+            </ElButton>
+            <ElButton
+              v-if="apiSupportTypes.includes(connectionType) && isDaas"
+              @click="handleCreateAPI"
+            >
+              {{ $t('packages_business_publish_api') }}
+            </ElButton>
+            <ElButton @click="handleDataTrace">{{
+              $t('packages_ldp_trace_flow')
+            }}</ElButton>
+            <ElDropdown
+              v-if="swimType === 'mdm'"
+              trigger="click"
+              @command="handleHeaderCommand"
+            >
+              <ElButton style="border-color: var(--el-border-color)">
+                <VIcon size="16">more</VIcon>
+              </ElButton>
+              <template #dropdown>
+                <ElDropdownMenu>
+                  <ElDropdownItem command="delete" class="is-danger">
+                    <VIcon class="mr-1" size="14">delete</VIcon>
+                    {{ $t('public_button_delete') }}
+                  </ElDropdownItem>
+                </ElDropdownMenu>
+              </template>
+            </ElDropdown>
+          </ElButtonGroup>
         </div>
         <div class="flex align-center gap-8">
           <span class="inline-flex align-center text-uppercase text-nowrap">
diff --git a/packages/ldp/src/components/LineageGraph.vue b/packages/ldp/src/components/LineageGraph.vue
index e9760e46b..c3751ac3b 100644
--- a/packages/ldp/src/components/LineageGraph.vue
+++ b/packages/ldp/src/components/LineageGraph.vue
@@ -310,113 +310,22 @@ provide('taskReplicateLagMap', taskReplicateLagMap)
   <div id="table-lineage-graph" ref="root" class="table-lineage-graph h-100">
     <svg style="position: absolute; left: -1000px; top: 0">
       <defs>
-        <!-- Figma 标准箭头 -->
         <marker
-          id="figma-arrow"
-          viewBox="0 0 24 24"
-          refX="16"
-          refY="12"
-          markerWidth="10"
-          markerHeight="10"
-          orient="auto"
+          id="marker-arrow"
+          viewBox="-10 -10 20 20"
+          refX="0"
+          refY="0"
+          markerWidth="12.5"
+          markerHeight="12.5"
+          markerUnits="strokeWidth"
+          orient="auto-start-reverse"
         >
           <polyline
-            stroke-width="3"
-            points="7,4 17,12 7,20"
-            fill="none"
-            stroke="#b1b1b7"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </marker>
-        <marker
-          id="figma-arrow-wide"
-          viewBox="0 0 24 24"
-          refX="16"
-          refY="12"
-          markerWidth="10"
-          markerHeight="10"
-          orient="auto"
-        >
-          <polyline
-            points="7,4 15,12 7,20"
-            fill="none"
-            stroke="#b1b1b7"
-            stroke-width="3"
             stroke-linecap="round"
             stroke-linejoin="round"
-          />
-        </marker>
-        <marker
-          id="figma-arrow-widest"
-          viewBox="0 0 24 24"
-          refX="17"
-          refY="12"
-          markerWidth="12"
-          markerHeight="12"
-          orient="auto"
-        >
-          <polyline
-            points="5,2 17,12 5,22"
             fill="none"
-            stroke="#b1b1b7"
-            stroke-width="3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </marker>
-        <marker
-          id="custom-arrow"
-          viewBox="0 0 10 16"
-          refX="9"
-          refY="8"
-          markerWidth="10"
-          markerHeight="16"
-          orient="auto"
-        >
-          <polyline
-            points="2,2 8,8 2,14"
-            fill="none"
-            stroke="#b1b1b7"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </marker>
-        <marker
-          id="custom-arrow-wide"
-          viewBox="0 0 12 18"
-          refX="10"
-          refY="9"
-          markerWidth="12"
-          markerHeight="18"
-          orient="auto"
-        >
-          <polyline
-            points="3,2 10,9 3,16"
-            fill="none"
-            stroke="#b1b1b7"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </marker>
-        <marker
-          id="custom-arrow-filled"
-          viewBox="0 0 16 16"
-          refX="14"
-          refY="8"
-          markerWidth="12"
-          markerHeight="12"
-          orient="auto"
-        >
-          <path
-            d="M12 2L4 8L12 14"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            points="-5,-4 0,0 -5,4"
+            style="stroke: context-stroke; stroke-width: 2"
           />
         </marker>
       </defs>
diff --git a/packages/ldp/src/components/NodeQueryConditions.vue b/packages/ldp/src/components/NodeQueryConditions.vue
new file mode 100644
index 000000000..2c0ed3d14
--- /dev/null
+++ b/packages/ldp/src/components/NodeQueryConditions.vue
@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { useI18n } from '@tap/i18n'
+import { ref, watch } from 'vue'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  conditions: string
+}>()
+
+const emit = defineEmits<{
+  save: [value: string]
+}>()
+
+const expanded = ref(false)
+const editing = ref(false)
+const draft = ref('')
+
+watch(
+  () => props.conditions,
+  (val) => {
+    if (!editing.value) draft.value = val
+  },
+  { immediate: true },
+)
+
+function startEdit() {
+  draft.value = props.conditions
+  editing.value = true
+}
+
+function cancelEdit() {
+  draft.value = props.conditions
+  editing.value = false
+}
+
+function saveEdit() {
+  editing.value = false
+  expanded.value = true
+  emit('save', draft.value)
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'qc-card',
+      editing && 'qc-card--editing',
+    ]"
+  >
+    <!-- Header -->
+    <div class="qc-header">
+      <!-- View mode: clickable title -->
+      <template v-if="!editing">
+        <button class="qc-title-btn" @click="expanded = !expanded">
+          <span class="qc-chevron">
+            <i-lucide-chevron-down v-if="expanded" />
+            <i-lucide-chevron-right v-else />
+          </span>
+          <el-icon :size="14" class="qc-filter-icon"><i-lucide-filter /></el-icon>
+          <span>{{ t('packages_ldp_trace_qc_title') }}</span>
+        </button>
+        <button class="qc-edit-btn" @click="startEdit">{{ t('packages_ldp_trace_qc_edit') }}</button>
+      </template>
+      <!-- Edit mode: static title + action buttons -->
+      <template v-else>
+        <div class="qc-title-static">
+          <el-icon :size="14" class="qc-code-icon"><i-lucide-code /></el-icon>
+          <span>{{ t('packages_ldp_trace_qc_edit') }}</span>
+        </div>
+        <div class="qc-actions">
+          <button class="qc-cancel-btn" @click="cancelEdit">{{ t('packages_ldp_trace_qc_cancel') }}</button>
+          <button class="qc-save-btn" @click="saveEdit">{{ t('packages_ldp_trace_qc_save') }}</button>
+        </div>
+      </template>
+    </div>
+
+    <!-- View content -->
+    <pre v-if="!editing && expanded" class="qc-pre">{{ conditions }}</pre>
+
+    <!-- Edit textarea -->
+    <textarea
+      v-if="editing"
+      v-model="draft"
+      class="qc-textarea"
+      spellcheck="false"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.qc-card {
+  background: rgb(250 250 250);
+  border: 1px solid rgb(228 228 231 / 80%);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
+  padding: 12px;
+  margin-bottom: 16px;
+  transition: all 0.2s;
+
+  &--editing {
+    background: rgb(238 242 255 / 50%);
+    border-color: rgb(224 231 255 / 80%);
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.05);
+  }
+}
+
+.qc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.qc-title-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgb(63 63 70);
+  padding: 0;
+  transition: color 0.15s;
+
+  &:hover { color: rgb(24 24 27); }
+}
+
+.qc-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: rgb(161 161 170);
+}
+
+.qc-filter-icon { color: rgb(161 161 170); }
+
+.qc-edit-btn {
+  font-size: 11px;
+  font-weight: 500;
+  color: rgb(79 70 229);
+  background: rgb(238 242 255);
+  border: none;
+  padding: 4px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover {
+    background: rgb(224 231 255);
+    color: rgb(67 56 202);
+  }
+}
+
+.qc-title-static {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgb(67 56 202);
+}
+
+.qc-code-icon { color: rgb(99 102 241); }
+
+.qc-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.qc-cancel-btn {
+  font-size: 11px;
+  font-weight: 500;
+  color: rgb(113 113 122);
+  background: none;
+  border: none;
+  padding: 4px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: color 0.15s;
+
+  &:hover { color: rgb(63 63 70); }
+}
+
+.qc-save-btn {
+  font-size: 11px;
+  font-weight: 500;
+  color: #fff;
+  background: rgb(79 70 229);
+  border: none;
+  padding: 4px 12px;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: background 0.15s;
+
+  &:hover { background: rgb(67 56 202); }
+}
+
+.qc-pre {
+  margin-top: 12px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  padding: 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 11px;
+  color: rgb(82 82 91);
+  max-height: 128px;
+  overflow: auto;
+  overflow-x: hidden;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.qc-textarea {
+  display: block;
+  width: 100%;
+  margin-top: 12px;
+  background: #fff;
+  border: 1px solid rgb(199 210 254 / 50%);
+  border-radius: 8px;
+  padding: 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 11px;
+  color: rgb(39 39 42);
+  min-height: 100px;
+  resize: vertical;
+  white-space: pre-wrap;
+  word-break: break-all;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  box-sizing: border-box;
+
+  &:focus {
+    border-color: rgb(129 140 248);
+    box-shadow: 0 0 0 2px rgb(99 102 241 / 20%);
+  }
+}
+</style>
diff --git a/packages/ldp/src/components/PillFilterBuilder.vue b/packages/ldp/src/components/PillFilterBuilder.vue
new file mode 100644
index 000000000..ddb90ebcd
--- /dev/null
+++ b/packages/ldp/src/components/PillFilterBuilder.vue
@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import { BaseFieldSelect as FieldSelect } from '@tap/form'
+import { useI18n } from '@tap/i18n'
+
+const { t } = useI18n()
+
+export interface FieldDef {
+  name: string
+  type: 'string' | 'number' | 'date' | 'objectId'
+  primaryKey?: boolean
+}
+
+export interface FilterRow {
+  field: string
+  operator: string
+  value: string
+}
+
+const props = defineProps<{
+  fields: any[]
+  modelValue: FilterRow[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', rows: FilterRow[]): void
+}>()
+
+function addRow() {
+  emit('update:modelValue', [
+    ...props.modelValue,
+    { field: '', operator: '=', value: '' },
+  ])
+}
+
+function removeRow(index: number) {
+  if (props.modelValue.length <= 1) return
+  emit(
+    'update:modelValue',
+    props.modelValue.filter((_, i) => i !== index),
+  )
+}
+
+function updateRow(index: number, key: keyof FilterRow, val: string) {
+  emit(
+    'update:modelValue',
+    props.modelValue.map((r, i) => (i === index ? { ...r, [key]: val } : r)),
+  )
+}
+
+const OPERATORS = ['=', '!=', 'LIKE'] as const
+</script>
+
+<template>
+  <div class="pill-builder">
+    <TransitionGroup name="pill-pop">
+      <div v-for="(row, index) in modelValue" :key="index" class="pill">
+        <!-- ── Field Select ── -->
+        <div class="pill__seg pill__seg--field">
+          <FieldSelect
+            :model-value="row.field"
+            :placeholder="t('packages_ldp_trace_filter_field')"
+            filterable
+            item-label="field_name"
+            item-value="field_name"
+            :options="fields"
+            class="pill__field-select"
+            @update:model-value="(v: string) => updateRow(index, 'field', v)"
+          />
+        </div>
+        <!-- ── Divider ── -->
+        <span class="pill__divider" />
+        <!-- ── Operator Select ── -->
+        <div class="pill__seg pill__seg--op bg-light justify-center">
+          <el-icon>
+            <i-lucide-equal />
+          </el-icon>
+          <!-- <el-select
+            :model-value="row.operator"
+            :teleported="true"
+            @update:model-value="(v: string) => updateRow(index, 'operator', v)"
+          >
+            <el-option
+              v-for="op in OPERATORS"
+              :key="op"
+              :label="op"
+              :value="op"
+            />
+          </el-select> -->
+        </div>
+        <!-- ── Divider ── -->
+        <span class="pill__divider" />
+        <!-- ── Value Input ── -->
+        <input
+          :value="row.value"
+          class="pill__input"
+          :placeholder="t('packages_ldp_trace_filter_value')"
+          @input="
+            updateRow(index, 'value', ($event.target as HTMLInputElement).value)
+          "
+        />
+        <!-- ── Delete ── -->
+        <button
+          class="pill__del"
+          :disabled="modelValue.length <= 1"
+          @click="removeRow(index)"
+        >
+          <el-icon size="14"><i-lucide-trash-2 /></el-icon>
+        </button>
+      </div>
+    </TransitionGroup>
+    <!-- Add Rule -->
+    <button class="pill-add" @click="addRow">
+      <el-icon size="14"><i-lucide-plus /></el-icon>
+      <span>Add Rule</span>
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// ─── Builder container ───
+.pill-builder {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+// ─── Pill (single filter row) ───
+.pill {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  height: 40px;
+  border-radius: 14px;
+  border: 1px solid #e4e4e7;
+  background: #fff;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+
+  &:focus-within {
+    border-color: #818cf8;
+    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.12);
+    z-index: 20;
+  }
+  &:hover {
+    z-index: 20;
+  }
+
+  // ── Kill ALL el-select / el-input chrome inside the pill ──
+  :deep(.el-select) {
+    --el-select-border-color-hover: transparent;
+  }
+  :deep(.el-input__wrapper) {
+    box-shadow: none !important;
+    border: none !important;
+    background: transparent !important;
+    padding: 0 10px;
+    height: 38px;
+  }
+  :deep(.el-input__wrapper:hover) {
+    box-shadow: none !important;
+  }
+  :deep(.el-input__wrapper.is-focus) {
+    box-shadow: none !important;
+  }
+  :deep(.el-input__inner) {
+    font-size: 13px;
+    color: #18181b;
+  }
+}
+
+// ─── Segments ───
+.pill__seg {
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  :deep(.el-select__wrapper) {
+    box-shadow: none !important;
+  }
+}
+.pill__seg--field {
+  min-width: 160px;
+  :deep(.el-select-v2) {
+    .el-select-v2__wrapper {
+      box-shadow: none !important;
+      border: none !important;
+      background: transparent !important;
+      padding: 0 6px;
+      height: 38px;
+    }
+  }
+}
+.pill__seg--op {
+  width: 56px;
+  --el-fill-color-blank: var(--bg-light);
+  :deep(.el-input__inner) {
+    text-align: center;
+    font-weight: 600;
+    font-size: 13px;
+    color: #52525b;
+  }
+  :deep(.el-input__suffix) {
+    display: none;
+  }
+}
+
+// ─── Divider between segments ───
+.pill__divider {
+  width: 1px;
+  align-self: stretch;
+  background: #e4e4e7;
+  flex-shrink: 0;
+}
+
+// ─── Value input ───
+.pill__input {
+  flex: 1;
+  min-width: 120px;
+  height: 38px;
+  padding: 0 12px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 13px;
+  color: #18181b;
+  &::placeholder {
+    color: #a1a1aa;
+  }
+}
+
+// ─── Delete button ───
+.pill__del {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  color: #d4d4d8;
+  cursor: pointer;
+  border-radius: 0 14px 14px 0;
+  transition:
+    color 0.12s,
+    background 0.12s;
+  &:hover:not(:disabled) {
+    color: #ef4444;
+    background: #fef2f2;
+  }
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+}
+
+// ─── Add Rule ───
+.pill-add {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 18px;
+  border-radius: 14px;
+  border: 1px dashed #c7d2fe;
+  background: rgb(238 242 255 / 0.5);
+  color: #4f46e5;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  &:hover {
+    background: #eef2ff;
+    border-color: #818cf8;
+  }
+}
+
+// ─── TransitionGroup ───
+.pill-pop-enter-active {
+  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.pill-pop-leave-active {
+  transition: all 0.18s ease-in;
+}
+.pill-pop-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+.pill-pop-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+</style>
diff --git a/packages/ldp/src/components/TableEdge.vue b/packages/ldp/src/components/TableEdge.vue
index 5dc9b3eaf..b9c4d3a6b 100644
--- a/packages/ldp/src/components/TableEdge.vue
+++ b/packages/ldp/src/components/TableEdge.vue
@@ -38,6 +38,7 @@ const emit = defineEmits<{
 
 const taskReplicateLagMap = inject<Record<string, string>>(
   'taskReplicateLagMap',
+  {},
 )!
 
 const path = computed(() => getBezierPath(props))
@@ -54,7 +55,12 @@ const openTaskPopover = (ev: MouseEvent) => {
 
 <template>
   <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
-  <BaseEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" />
+  <BaseEdge
+    :id="id"
+    :style="style"
+    :path="path[0]"
+    marker-end="url(#marker-arrow)"
+  />
 
   <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
   <EdgeLabelRenderer v-if="tasks[0]">
@@ -77,16 +83,11 @@ const openTaskPopover = (ev: MouseEvent) => {
             <TaskStatusDot :status="tasks[0].status" />
             <OverflowTooltip
               :text="tasks[0].name"
-              append-to="#table-lineage-graph"
               class="min-w-0 text-xs font-color-light"
+              append-to="#table-lineage-graph"
             />
-            <!-- <span
-              class="overflow-hidden clickable ellipsis px-1 rounded-4"
-              :title="tasks[0].name"
-              >{{ tasks[0].name }}
-            </span> -->
           </div>
-          <el-tooltip
+          <!-- <el-tooltip
             v-if="
               tasks[0].status === 'running' &&
               taskReplicateLagMap[tasks[0].id as string]
@@ -106,10 +107,10 @@ const openTaskPopover = (ev: MouseEvent) => {
                 taskReplicateLagMap[tasks[0].id as string]
               }}</span>
             </div>
-          </el-tooltip>
+          </el-tooltip> -->
         </div>
 
-        <div
+        <!-- <div
           v-if="tasks.length > 1"
           class="flex align-center label-dropdown clickable flex-shrink-0"
           @click="openTaskPopover"
@@ -119,7 +120,7 @@ const openTaskPopover = (ev: MouseEvent) => {
             }}<el-icon class="ml-0.5" size="14"
               ><i-lucide-chevron-down /></el-icon
           ></span>
-        </div>
+        </div> -->
       </div>
     </div>
   </EdgeLabelRenderer>
diff --git a/packages/ldp/src/components/TaskStatusDot.vue b/packages/ldp/src/components/TaskStatusDot.vue
index 9893f89cb..42209cf60 100644
--- a/packages/ldp/src/components/TaskStatusDot.vue
+++ b/packages/ldp/src/components/TaskStatusDot.vue
@@ -7,6 +7,7 @@ defineProps<{
 
 <template>
   <el-tooltip
+    v-if="STATUS_MAP[status]"
     :content="$t(STATUS_MAP[status].i18n)"
     :hide-after="0"
     :enterable="false"
diff --git a/packages/ldp/src/components/TraceNode.vue b/packages/ldp/src/components/TraceNode.vue
new file mode 100644
index 000000000..fe375caab
--- /dev/null
+++ b/packages/ldp/src/components/TraceNode.vue
@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import { OverflowTooltip } from '@tap/component/src/overflow-tooltip'
+import NodeIcon from '@tap/dag/src/components/NodeIcon.vue'
+import { useI18n } from '@tap/i18n'
+import { Handle, Position, useVueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
+
+const { t } = useI18n()
+const { getIncomers, getOutgoers } = useVueFlow()
+
+const props = defineProps<{
+  id: string
+  data: any
+  active: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'expandCollapse', ids: string[]): void
+  (e: 'select', id: string): void
+}>()
+
+const outgoersCount = ref<number | null>(null)
+const incomersCount = ref<number | null>(null)
+
+// 递归获取所有下游节点
+function getAllOutgoers(nodeId: string, visited = new Set<string>()): string[] {
+  if (visited.has(nodeId)) return []
+  visited.add(nodeId)
+
+  const directOutgoers = getOutgoers(nodeId)
+  const allIds: string[] = []
+
+  directOutgoers.forEach((outgoer) => {
+    if (!visited.has(outgoer.id)) {
+      allIds.push(outgoer.id)
+      const childIds = getAllOutgoers(outgoer.id, visited)
+      allIds.push(...childIds)
+    }
+  })
+
+  return allIds
+}
+
+// 递归获取所有上游节点
+function getAllIncomers(nodeId: string, visited = new Set<string>()): string[] {
+  if (visited.has(nodeId)) return []
+  visited.add(nodeId)
+
+  const directIncomers = getIncomers(nodeId)
+  const allIds: string[] = []
+
+  directIncomers.forEach((incomer) => {
+    if (!visited.has(incomer.id)) {
+      allIds.push(incomer.id)
+      const parentIds = getAllIncomers(incomer.id, visited)
+      allIds.push(...parentIds)
+    }
+  })
+
+  return allIds
+}
+
+function handleSourceClick() {
+  if (!props.active) return
+  const outgoers = getAllOutgoers(props.id)
+
+  outgoersCount.value = outgoersCount.value === null ? outgoers.length : null
+
+  emit('expandCollapse', outgoers)
+}
+
+function handleTargetClick() {
+  if (!props.active) return
+  const incomers = getAllIncomers(props.id)
+
+  incomersCount.value = incomersCount.value === null ? incomers.length : null
+
+  emit('expandCollapse', incomers)
+}
+</script>
+
+<template>
+  <div
+    class="border rounded-2xl bg-white dark:bg-overlay shadow-sm table-node"
+    :class="{ active }"
+    @click="emit('select', id)"
+  >
+    <!-- Pulse Status Indicator (top-right corner) -->
+    <span
+      v-if="data.status === 'loading'"
+      class="status-spinner"
+      :title="t('packages_ldp_trace_status_loading')"
+    />
+    <span
+      v-else-if="data.status === 'ok'"
+      class="status-dot status-dot--ok"
+      :title="t('packages_ldp_trace_status_ok')"
+    />
+    <span
+      v-else-if="data.status === 'error'"
+      class="status-dot status-dot--error"
+      :title="t('packages_ldp_trace_status_error')"
+    />
+
+    <div class="p-2 px-3">
+      <div class="flex align-items-center gap-1 overflow-hidden">
+        <template v-if="data.nodeType === 'MERGE'">
+          <el-tag
+            v-if="data.tableType === 'mainTable'"
+            type="warning"
+            size="small"
+            class="zoom-xs"
+            >{{ t('packages_ldp_trace_main_table') }}</el-tag
+          ><el-tag
+            v-else-if="data.tableType === 'subTable'"
+            type="primary"
+            size="small"
+            class="zoom-xs"
+            >{{ t('packages_ldp_trace_sub_table') }}</el-tag
+          >
+        </template>
+
+        <OverflowTooltip
+          :text="data.table"
+          class="min-w-0"
+          :enterable="false"
+        />
+      </div>
+
+      <div
+        class="inline-flex align-items-center gap-1 font-mono lh-1 rounded-4 mw-100 zoom-xs"
+      >
+        <NodeIcon class="flex-shrink-0" :node="data" :size="14" /><span
+          class="ellipsis font-color-sslight"
+          >{{ data.connectionName }}</span
+        >
+      </div>
+    </div>
+    <Handle
+      type="target"
+      :position="Position.Left"
+      :connectable="false"
+      class="table-node-handle border-0"
+      :class="{ 'pe-none': !active, active: !!incomersCount }"
+      @click="handleTargetClick"
+    />
+    <Handle
+      type="source"
+      :position="Position.Right"
+      :connectable="false"
+      class="table-node-handle border-0"
+      :class="{ 'pe-none': !active, active: !!outgoersCount }"
+      @click="handleSourceClick"
+    />
+
+    <!-- Joins Badge -->
+    <el-popover
+      v-if="data.joinKeys?.length"
+      placement="top"
+      trigger="hover"
+      :show-arrow="false"
+      :offset="4"
+      width="auto"
+      popper-class="join-popover"
+    >
+      <template #reference>
+        <div class="join-badge">
+          <el-icon :size="12" class="text-zinc-400"
+            ><i-lucide-link-2
+          /></el-icon>
+          <span>{{ t('packages_ldp_trace_join', [data.joinKeys.length]) }}</span
+          >
+        </div>
+      </template>
+      <div class="join-popover__body">
+        <div
+          v-for="(jk, i) in data.joinKeys"
+          :key="i"
+          class="join-popover__row"
+        >
+          {{ jk.originName }} <span class="join-popover__eq">=</span>
+          {{ jk.targetName }}
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-dot {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  z-index: 10;
+
+  &--ok {
+    background-color: var(--el-color-success);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background-color: var(--el-color-success);
+      animation: status-processing 1.2s ease-in-out infinite;
+    }
+  }
+
+  &--error {
+    background-color: var(--el-color-danger);
+  }
+}
+
+@keyframes status-processing {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+.status-spinner {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--el-color-primary-light-7);
+  border-top-color: var(--el-color-primary);
+  border-radius: 50%;
+  z-index: 10;
+  animation: status-spin 0.7s linear infinite;
+}
+
+@keyframes status-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.join-badge {
+  position: absolute;
+  bottom: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 30;
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 10px;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(24px);
+  border: 1px solid rgba(228, 228, 231, 0.8);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  font-size: 10px;
+  font-weight: 600;
+  color: #71717a;
+  cursor: help;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+.table-node {
+  position: relative;
+  width: 200px;
+  cursor: pointer;
+
+  &.active {
+    border-color: var(--el-color-primary) !important;
+    outline: 3px solid var(--el-color-primary-light-8);
+    outline-offset: 1px;
+  }
+
+  &-handle {
+    width: 0;
+    height: 0;
+    min-width: 0;
+    min-height: 0;
+    transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
+    background-color: transparent;
+    pointer-events: all;
+    cursor: pointer;
+  }
+
+  &-handle-icon {
+    opacity: 0;
+    display: flex;
+    font-size: 10px;
+    transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
+    &:hover {
+      transform: scale(1.25);
+    }
+  }
+
+  &:hover .table-node-handle,
+  .table-node-handle.active {
+    width: 1rem;
+    height: 1rem;
+    .table-node-handle-icon {
+      opacity: 1;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.join-popover.el-popover {
+  min-width: auto !important;
+  padding: 6px 8px !important;
+  background: #18181b !important;
+  border: none !important;
+  border-radius: 6px !important;
+  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
+    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+}
+
+.join-popover__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.join-popover__row {
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: #fafafa;
+  white-space: nowrap;
+  letter-spacing: -0.02em;
+  line-height: 1.5;
+}
+
+.join-popover__eq {
+  color: #a1a1aa;
+  margin: 0 3px;
+}
+</style>
diff --git a/packages/ldp/src/locale/lang/en.js b/packages/ldp/src/locale/lang/en.js
index e22c1bc76..8cb113133 100644
--- a/packages/ldp/src/locale/lang/en.js
+++ b/packages/ldp/src/locale/lang/en.js
@@ -70,4 +70,52 @@ export default {
     'This metric aggregates the incremental delays across all upstream tables and their associated task pipelines involved in building the model, and takes the maximum value to indicate how late the most recently updated data in the model may be.',
   packages_ldp_task_delay_detail_logic_tip3:
     'Tasks included in this calculation are highlighted with their delay',
+
+  // ─── Data Trace ───
+  packages_ldp_trace_data_filters: 'Data Filters',
+  packages_ldp_trace_builder: 'Builder',
+  packages_ldp_trace_mql_json: 'MQL JSON',
+  packages_ldp_trace_btn: 'Trace',
+  packages_ldp_trace_tracked_fields:
+    'Select the fields you want to trace across the data lineage',
+  packages_ldp_trace_add_field: '+ Add Field',
+  packages_ldp_trace_data_lineage: 'Data Lineage',
+  packages_ldp_trace_no_results_title: 'No trace results yet',
+  packages_ldp_trace_no_results_desc:
+    'Configure filters and click {0} to start tracking data across pipeline nodes.',
+  packages_ldp_trace_flow: 'Data Tracing',
+  packages_ldp_trace_copy: 'Copy',
+  packages_ldp_trace_no_data: 'No data found',
+  packages_ldp_trace_data_missing: 'Data missing',
+  packages_ldp_trace_no_data_comment:
+    '// No data — record missing at this node',
+  packages_ldp_trace_change_stream: 'Change Stream / Oplog',
+  packages_ldp_trace_tab_table: 'Table',
+  packages_ldp_trace_tab_json: 'JSON',
+  packages_ldp_trace_tab_changelog: 'Change Log',
+  packages_ldp_trace_changelog_start: 'Start time',
+  packages_ldp_trace_changelog_end: 'End time',
+  packages_ldp_trace_changelog_query: 'Query',
+  packages_ldp_trace_changelog_empty: 'Select a time range and click Query to view change logs.',
+  packages_ldp_trace_changelog_no_more: 'No more logs',
+  packages_ldp_trace_changelog_max_range: 'Time range cannot exceed 7 days',
+  packages_ldp_trace_changelog_shortcut_5m: 'Last 5 minutes',
+  packages_ldp_trace_changelog_shortcut_30m: 'Last 30 minutes',
+  packages_ldp_trace_changelog_shortcut_1h: 'Last 1 hour',
+  packages_ldp_trace_changelog_shortcut_1d: 'Last 1 day',
+  packages_ldp_trace_changelog_shortcut_3d: 'Last 3 days',
+  packages_ldp_trace_status_loading: 'Loading…',
+  packages_ldp_trace_status_ok: 'Data Found',
+  packages_ldp_trace_status_error: 'Missing Data',
+  packages_ldp_trace_main_table: 'Main Table',
+  packages_ldp_trace_sub_table: 'Sub Table',
+  packages_ldp_trace_join: '{0} join | {0} joins',
+  packages_ldp_trace_filter_field: 'Field',
+  packages_ldp_trace_filter_value: 'Enter value...',
+  packages_ldp_trace_page_title: 'Data Trace',
+  packages_ldp_trace_qc_title: 'Query Conditions',
+  packages_ldp_trace_qc_edit: 'Edit Conditions',
+  packages_ldp_trace_qc_cancel: 'Cancel',
+  packages_ldp_trace_qc_save: 'Save & Retrace',
+  packages_ldp_trace_qc_invalid_json: 'Invalid JSON',
 }
diff --git a/packages/ldp/src/locale/lang/zh-CN.js b/packages/ldp/src/locale/lang/zh-CN.js
index 0f376bbfd..211388477 100644
--- a/packages/ldp/src/locale/lang/zh-CN.js
+++ b/packages/ldp/src/locale/lang/zh-CN.js
@@ -63,4 +63,49 @@ export default {
     '该指标会综合计算构建此模型所涉及的所有上游表及其任务链路中的增量延迟，并取其中的最大值，反映模型中最晚更新的数据可能滞后的时间',
   packages_ldp_task_delay_detail_logic_tip3:
     '参与该计算的任务将会高亮显示其对应延迟',
+
+  // ─── Data Trace ───
+  packages_ldp_trace_data_filters: '数据过滤条件',
+  packages_ldp_trace_builder: '构建器',
+  packages_ldp_trace_mql_json: 'MQL JSON',
+  packages_ldp_trace_btn: '追溯',
+  packages_ldp_trace_tracked_fields: '选择要在数据血缘中追踪的字段',
+  packages_ldp_trace_add_field: '+ 添加字段',
+  packages_ldp_trace_data_lineage: '数据血缘',
+  packages_ldp_trace_no_results_title: '暂无追溯结果',
+  packages_ldp_trace_no_results_desc: '配置过滤条件并点击 {0} 开始追踪数据在各节点的流转情况。',
+  packages_ldp_trace_flow: '数据追溯',
+  packages_ldp_trace_copy: '复制',
+  packages_ldp_trace_no_data: '未找到数据',
+  packages_ldp_trace_data_missing: '数据缺失',
+  packages_ldp_trace_no_data_comment: '// 无数据 — 该节点缺少记录',
+  packages_ldp_trace_change_stream: 'Change Stream / Oplog',
+  packages_ldp_trace_tab_table: '表格',
+  packages_ldp_trace_tab_json: 'JSON',
+  packages_ldp_trace_tab_changelog: '变更日志',
+  packages_ldp_trace_changelog_start: '开始时间',
+  packages_ldp_trace_changelog_end: '结束时间',
+  packages_ldp_trace_changelog_query: '查询',
+  packages_ldp_trace_changelog_empty: '选择时间范围并点击查询以查看变更日志。',
+  packages_ldp_trace_changelog_no_more: '没有更多日志',
+  packages_ldp_trace_changelog_max_range: '时间范围不能超过 7 天',
+  packages_ldp_trace_changelog_shortcut_5m: '最近 5 分钟',
+  packages_ldp_trace_changelog_shortcut_30m: '最近 30 分钟',
+  packages_ldp_trace_changelog_shortcut_1h: '最近 1 小时',
+  packages_ldp_trace_changelog_shortcut_1d: '最近 1 天',
+  packages_ldp_trace_changelog_shortcut_3d: '最近 3 天',
+  packages_ldp_trace_status_loading: '加载中…',
+  packages_ldp_trace_status_ok: '数据已找到',
+  packages_ldp_trace_status_error: '数据缺失',
+  packages_ldp_trace_main_table: '主表',
+  packages_ldp_trace_sub_table: '子表',
+  packages_ldp_trace_join: '{0} 个关联',
+  packages_ldp_trace_filter_field: '字段',
+  packages_ldp_trace_filter_value: '输入值...',
+  packages_ldp_trace_page_title: '数据追溯',
+  packages_ldp_trace_qc_title: '查询条件',
+  packages_ldp_trace_qc_edit: '编辑条件',
+  packages_ldp_trace_qc_cancel: '取消',
+  packages_ldp_trace_qc_save: '保存并重新追溯',
+  packages_ldp_trace_qc_invalid_json: 'JSON 格式无效',
 }
diff --git a/packages/ldp/src/locale/lang/zh-TW.js b/packages/ldp/src/locale/lang/zh-TW.js
index 0d3f41cf4..a90c90120 100644
--- a/packages/ldp/src/locale/lang/zh-TW.js
+++ b/packages/ldp/src/locale/lang/zh-TW.js
@@ -63,4 +63,49 @@ export default {
     '該指標會綜合計算構建此模型所涉及的所有上游表及其任務鏈路中的增量延遲，並取其中的最大值，反映模型中最晚更新的數據可能滯後的時間',
   packages_ldp_task_delay_detail_logic_tip3:
     '參與該計算的任務將會高亮顯示其對應延遲',
+
+  // ─── Data Trace ───
+  packages_ldp_trace_data_filters: '資料篩選條件',
+  packages_ldp_trace_builder: '建構器',
+  packages_ldp_trace_mql_json: 'MQL JSON',
+  packages_ldp_trace_btn: '追溯',
+  packages_ldp_trace_tracked_fields: '選擇要在資料血緣中追蹤的欄位',
+  packages_ldp_trace_add_field: '+ 新增欄位',
+  packages_ldp_trace_data_lineage: '資料血緣',
+  packages_ldp_trace_no_results_title: '暫無追溯結果',
+  packages_ldp_trace_no_results_desc: '設定篩選條件並點擊 {0} 開始追蹤資料在各節點的流轉情況。',
+  packages_ldp_trace_flow: '資料追溯',
+  packages_ldp_trace_copy: '複製',
+  packages_ldp_trace_no_data: '未找到資料',
+  packages_ldp_trace_data_missing: '資料缺失',
+  packages_ldp_trace_no_data_comment: '// 無資料 — 該節點缺少記錄',
+  packages_ldp_trace_change_stream: 'Change Stream / Oplog',
+  packages_ldp_trace_tab_table: '表格',
+  packages_ldp_trace_tab_json: 'JSON',
+  packages_ldp_trace_tab_changelog: '變更日誌',
+  packages_ldp_trace_changelog_start: '開始時間',
+  packages_ldp_trace_changelog_end: '結束時間',
+  packages_ldp_trace_changelog_query: '查詢',
+  packages_ldp_trace_changelog_empty: '選擇時間範圍並點擊查詢以查看變更日誌。',
+  packages_ldp_trace_changelog_no_more: '沒有更多日誌',
+  packages_ldp_trace_changelog_max_range: '時間範圍不能超過 7 天',
+  packages_ldp_trace_changelog_shortcut_5m: '最近 5 分鐘',
+  packages_ldp_trace_changelog_shortcut_30m: '最近 30 分鐘',
+  packages_ldp_trace_changelog_shortcut_1h: '最近 1 小時',
+  packages_ldp_trace_changelog_shortcut_1d: '最近 1 天',
+  packages_ldp_trace_changelog_shortcut_3d: '最近 3 天',
+  packages_ldp_trace_status_loading: '載入中…',
+  packages_ldp_trace_status_ok: '已找到資料',
+  packages_ldp_trace_status_error: '資料缺失',
+  packages_ldp_trace_main_table: '主表',
+  packages_ldp_trace_sub_table: '子表',
+  packages_ldp_trace_join: '{0} 個關聯',
+  packages_ldp_trace_filter_field: '欄位',
+  packages_ldp_trace_filter_value: '輸入值...',
+  packages_ldp_trace_page_title: '資料追溯',
+  packages_ldp_trace_qc_title: '查詢條件',
+  packages_ldp_trace_qc_edit: '編輯條件',
+  packages_ldp_trace_qc_cancel: '取消',
+  packages_ldp_trace_qc_save: '儲存並重新追溯',
+  packages_ldp_trace_qc_invalid_json: 'JSON 格式無效',
 }
diff --git a/packages/ldp/src/util.ts b/packages/ldp/src/util.ts
new file mode 100644
index 000000000..35c742aba
--- /dev/null
+++ b/packages/ldp/src/util.ts
@@ -0,0 +1,36 @@
+import { makeStatusAndDisabled } from '@tap/business/src/shared'
+
+export const mapEdge = (edge: any, index: number) => {
+  const tasks: Task[] = edge.attrs.tasks
+    ? Object.values(edge.attrs.tasks)
+        .map((task: any) => {
+          task = makeStatusAndDisabled(task)
+
+          if (task.status === 'running') {
+            taskMap.value[task.id as string] = {
+              taskRecordId: task.taskRecordId,
+              startAt: new Date(task.startTime).getTime(),
+            }
+          }
+
+          return task
+        })
+        .sort((a: any, b: any) => {
+          // 'running' comes first, then others
+          if (a.status === 'running' && b.status !== 'running') return -1
+          if (a.status !== 'running' && b.status === 'running') return 1
+          return 0
+        })
+    : []
+
+  return {
+    id: index,
+    source: edge.source,
+    target: edge.target,
+    type: 'table',
+    animated: tasks[0]?.status === 'running',
+    data: {
+      tasks,
+    },
+  }
+}
diff --git a/packages/request/src/request-client/request-client.ts b/packages/request/src/request-client/request-client.ts
index ce3d8c438..6400e6964 100644
--- a/packages/request/src/request-client/request-client.ts
+++ b/packages/request/src/request-client/request-client.ts
@@ -86,6 +86,10 @@ class RequestClient {
     this.download = fileDownloader.download.bind(fileDownloader)
   }
 
+  public getBaseURL(): string {
+    return this.instance.defaults.baseURL || ''
+  }
+
   public setBaseURL(baseURL: string) {
     this.instance.defaults.baseURL = baseURL
   }
diff --git a/packages/styles/src/design/css/global.css b/packages/styles/src/design/css/global.css
index c8fa19af8..c4142f93e 100644
--- a/packages/styles/src/design/css/global.css
+++ b/packages/styles/src/design/css/global.css
@@ -87,3 +87,49 @@ html.dark::view-transition-new(root) {
     }
   }
 }
+
+
+.task-status-block {
+  display: inline-block;
+  min-width: 72px;
+  padding: 2px 8px;
+  text-align: center;
+  border-radius: 8px;
+  box-sizing: border-box;
+  word-break: keep-all;
+  line-height: 22px;
+}
+.task-status-running {
+  color: #178061;
+  background-color: #c4f3cb;
+}
+.task-status-complete {
+  color: #008b58;
+  background-color: #b4edd8;
+}
+.task-status-renew_failed,
+.task-status-error,
+.task-status-deleting,
+.task-status-delete_failed,
+.task-status-deleted {
+  color: #d44d4d;
+  background-color: #ffecec;
+}
+.task-status-edit {
+  color: #0083c7;
+  background-color: #d1eefd;
+}
+.task-status-starting {
+  color: #2c65ff;
+  background-color: #ddebff;
+}
+.task-status-stop {
+  color: #c88500;
+  background-color: #ffe4ae;
+}
+.task-status-renewing,
+.task-status-wait_start,
+.task-status-stopping {
+  color: #c39700;
+  background-color: #fdf1c8;
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1ed2c54df..a25a12741 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -247,7 +247,7 @@ catalogs:
       specifier: ^11.1.5
       version: 11.1.9
     vue-json-pretty:
-      specifier: ^2.4.0
+      specifier: ^2.5.0
       version: 2.5.0
     vue-json-viewer:
       specifier: ^2.2.15
@@ -1129,6 +1129,9 @@ importers:
       vue:
         specifier: 'catalog:'
         version: 3.5.25(typescript@5.8.3)
+      vue-json-pretty:
+        specifier: 'catalog:'
+        version: 2.5.0(vue@3.5.25(typescript@5.8.3))
       vue-virtual-scroller:
         specifier: 'catalog:'
         version: 2.0.0-beta.8(vue@3.5.25(typescript@5.8.3))
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 41802930c..2d997a1ed 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -96,7 +96,7 @@ catalog:
   vue: ^3.5.25
   vue-echarts: ^8.0.0
   vue-i18n: ^11.1.5
-  vue-json-pretty: ^2.4.0
+  vue-json-pretty: ^2.5.0
   vue-json-viewer: ^2.2.15
   vue-request: ^2.0.4
   vue-router: ^4.0.8