From fda438d538117aef144e600b2a3c60761145b089 Mon Sep 17 00:00:00 2001 From: Feynman Date: Wed, 24 Dec 2025 11:50:10 +0800 Subject: [PATCH 1/3] refactor(SceneDialog.vue): update connector item styles and enhance tooltip functionality for QC types; add localization for beta and alpha tips --- .../create-connection/SceneDialog.vue | 34 +++++++++++++------ packages/business/src/locale/lang/en.js | 4 +++ packages/business/src/locale/lang/zh-CN.js | 2 ++ packages/business/src/locale/lang/zh-TW.js | 2 ++ packages/types/src/daas-components.d.ts | 2 ++ 5 files changed, 34 insertions(+), 10 deletions(-) diff --git a/packages/business/src/components/create-connection/SceneDialog.vue b/packages/business/src/components/create-connection/SceneDialog.vue index 6a021a1c2..fa8546f62 100644 --- a/packages/business/src/components/create-connection/SceneDialog.vue +++ b/packages/business/src/components/create-connection/SceneDialog.vue @@ -81,11 +81,8 @@ export default { 'MongoDB Atlas', 'PostgreSQL', 'Clickhouse', - 'Elasticsearch', - 'Dummy', 'Kafka-Enhanced', 'Doris', - 'BigQuery', ], }, { @@ -959,7 +956,7 @@ export default {
@@ -982,7 +979,7 @@ export default {
@@ -1012,7 +1009,7 @@ export default {
@@ -1039,11 +1036,28 @@ export default { class="ml-auto color-success" >verified - {{ item.qcType }} - + :hide-after="0" + :enterable="false" + :content=" + $t( + item.qcType === 'Beta' + ? 'public_connector_beta_tip' + : 'public_connector_alpha_tip', + ) + " + > + + + + {{ item.qcType }} + + +
diff --git a/packages/business/src/locale/lang/en.js b/packages/business/src/locale/lang/en.js index cc9fe7fd4..2e1c0324e 100644 --- a/packages/business/src/locale/lang/en.js +++ b/packages/business/src/locale/lang/en.js @@ -1740,4 +1740,8 @@ export default { 'If a task or data source with the same name exists, cancel the import.', packages_business_import_reuse_existing_tip: 'If a task name conflict, replace the task; if a data source name conflict, reuse the existing data source in the system.', + public_connector_beta_tip: + 'Currently in testing. We are continuously optimizing the experience.', + public_connector_alpha_tip: + 'Under active development. Some features may still be incomplete.', } diff --git a/packages/business/src/locale/lang/zh-CN.js b/packages/business/src/locale/lang/zh-CN.js index d89afecbe..4578db084 100644 --- a/packages/business/src/locale/lang/zh-CN.js +++ b/packages/business/src/locale/lang/zh-CN.js @@ -1549,4 +1549,6 @@ export default { '若任务名或数据源名冲突，则终止导入操作，不导入任何内容。', packages_business_import_reuse_existing_tip: '若任务名冲突则替换任务，数据源名冲突则复用系统中已有数据源。', + public_connector_beta_tip: '正在测试阶段，我们正在不断优化体验', + public_connector_alpha_tip: '正在持续开发中，部分功能可能还在完善', } diff --git a/packages/business/src/locale/lang/zh-TW.js b/packages/business/src/locale/lang/zh-TW.js index a566a170f..121b14c01 100644 --- a/packages/business/src/locale/lang/zh-TW.js +++ b/packages/business/src/locale/lang/zh-TW.js @@ -1538,4 +1538,6 @@ export default { '若任務名或數據源名衝突，則終止導入操作，不導入任何內容。', packages_business_import_reuse_existing_tip: '若任務名衝突則替換任務，數據源名衝突則重用系統中已有數據源。', + public_connector_beta_tip: '正在測試階段，我們正在不斷優化體驗', + public_connector_alpha_tip: '正在持續開發中，部分功能可能還在完善', } diff --git a/packages/types/src/daas-components.d.ts b/packages/types/src/daas-components.d.ts index 8f1d571ee..72d398a2f 100644 --- a/packages/types/src/daas-components.d.ts +++ b/packages/types/src/daas-components.d.ts @@ -89,6 +89,7 @@ declare module 'vue' { ElUpload: typeof import('element-plus/es')['ElUpload'] IFluentFolderLink16Regular: typeof import('~icons/fluent/folder-link16-regular')['default'] ILucideActivity: typeof import('~icons/lucide/activity')['default'] + ILucideBadgeAlert: typeof import('~icons/lucide/badge-alert')['default'] ILucideCalendar: typeof import('~icons/lucide/calendar')['default'] ILucideCalendarDays: typeof import('~icons/lucide/calendar-days')['default'] ILucideChartColumn: typeof import('~icons/lucide/chart-column')['default'] @@ -251,6 +252,7 @@ declare global { const ElUpload: typeof import('element-plus/es')['ElUpload'] const IFluentFolderLink16Regular: typeof import('~icons/fluent/folder-link16-regular')['default'] const ILucideActivity: typeof import('~icons/lucide/activity')['default'] + const ILucideBadgeAlert: typeof import('~icons/lucide/badge-alert')['default'] const ILucideCalendar: typeof import('~icons/lucide/calendar')['default'] const ILucideCalendarDays: typeof import('~icons/lucide/calendar-days')['default'] const ILucideChartColumn: typeof import('~icons/lucide/chart-column')['default'] From f49fc73d9abc98db96b737f08b0c922978031bf9 Mon Sep 17 00:00:00 2001 From: Feynman Date: Fri, 26 Dec 2025 17:43:04 +0800 Subject: [PATCH 2/3] feat(TablePreview): enhance task delay details display with popover and localization; update styles for better UX --- packages/assets/styles/utilities.scss | 6 +- packages/ldp/src/TablePreview.vue | 132 ++++++++++++++++++++++-- packages/ldp/src/locale/lang/en.js | 8 ++ packages/ldp/src/locale/lang/zh-CN.js | 7 ++ packages/ldp/src/locale/lang/zh-TW.js | 7 ++ packages/types/src/daas-components.d.ts | 2 + 6 files changed, 154 insertions(+), 8 deletions(-) diff --git a/packages/assets/styles/utilities.scss b/packages/assets/styles/utilities.scss index ca150988b..8d2123cb1 100644 --- a/packages/assets/styles/utilities.scss +++ b/packages/assets/styles/utilities.scss @@ -12724,7 +12724,7 @@ } .text-muted-foreground { - color: rgb(113 113 122); + color: rgb(115 115 115); } .hover\:bg-light:hover { @@ -13048,4 +13048,8 @@ background-color: oklch(0.946 0.033 307.174); border: 1px solid oklch(0.902 0.063 306.703); color: oklch(0.496 0.265 301.924); +} + +.hover\:bg-fill-color-light:hover { + background-color: var(--el-fill-color-light) !important; } \ No newline at end of file diff --git a/packages/ldp/src/TablePreview.vue b/packages/ldp/src/TablePreview.vue index 38bfeb36b..3a4ad05e4 100644 --- a/packages/ldp/src/TablePreview.vue +++ b/packages/ldp/src/TablePreview.vue @@ -126,6 +126,7 @@ export default { tableStatus: '', cdcDelayTime: '', lastDataChangeTime: '', + upstreamTableStatus: [], statusMap: { error: i18n.t('packages_business_table_status_error'), // 异常 draft: i18n.t('packages_business_table_status_draft'), // 草稿 @@ -461,10 +462,20 @@ export default { ? calcTimeUnit(res.cdcDelayTime, 2, { autoHideMs: true, }) - : '-' + : '' this.lastDataChangeTime = res?.lastDataChangeTime ? dayjs(res?.lastDataChangeTime).format('YYYY-MM-DD HH:mm:ss') : '-' + this.upstreamTableStatus = res?.upstreamTableStatus?.map((item) => { + item.cdcDelayTime = + isNum(item.cdcDelayTime) && item.cdcDelayTime >= 0 + ? calcTimeUnit(item.cdcDelayTime, 2, { + autoHideMs: true, + }) + : '-' + + return item + }) }) }, getApisData() { @@ -736,6 +747,15 @@ export default { handleCreateAPI() { this.$emit('createApi', this.connection, this.selected) }, + + handleOpenTask(item) { + this.openRoute({ + name: item.syncType === 'migrate' ? 'MigrationMonitor' : 'TaskMonitor', + params: { + id: item.taskId, + }, + }) + }, }, } @@ -816,12 +836,100 @@ export default { lastDataChangeTime || '-' }} - {{ $t('packages_business_cdc_delay_time') }}: {{ - cdcDelayTime || '-' - }} + {{ $t('packages_business_cdc_delay_time') }}: + + + +
+
+
+
+ {{ $t('packages_ldp_task_delay_detail') }} +
+
+ {{ $t('packages_ldp_task_delay_detail_tip') }} +
+
+ + +
+ + + +
+ +
+ +
+ +
+
+ {{ item.taskName }} + + + + + + + {{ item.cdcDelayTime }} + + +
+
+ +
+
+
@@ -1483,4 +1591,14 @@ export default { grid-gap: 16px; } } + +.task-item { + .external-link-icon { + opacity: 0; + transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); + } + &:hover .external-link-icon { + opacity: 1; + } +} diff --git a/packages/ldp/src/locale/lang/en.js b/packages/ldp/src/locale/lang/en.js index 33cc08ae3..338c1068d 100644 --- a/packages/ldp/src/locale/lang/en.js +++ b/packages/ldp/src/locale/lang/en.js @@ -60,4 +60,12 @@ export default { 'You have already copied some tables, but you can still select more. Newly selected tables will be added to the existing list.', packages_ldp_fdm_create_task_has_expression: 'You have selected tables by regex matching and cannot select more. Please use the Data Copy feature to continue copying tables.', + packages_ldp_task_delay_detail: 'Task Delay Details', + packages_ldp_task_delay_detail_tip: + 'Displays all tasks involved in this model and their corresponding delay durations', + packages_ldp_task_delay_detail_logic: 'Calculation Logic', + packages_ldp_task_delay_detail_logic_tip1: + 'Maximum data delay represents the longest time required for data changes generated in the source systems to be written into the model, after passing through all related synchronization and processing tasks.', + packages_ldp_task_delay_detail_logic_tip2: + '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.', } diff --git a/packages/ldp/src/locale/lang/zh-CN.js b/packages/ldp/src/locale/lang/zh-CN.js index 66bac5236..455e9d8d6 100644 --- a/packages/ldp/src/locale/lang/zh-CN.js +++ b/packages/ldp/src/locale/lang/zh-CN.js @@ -54,4 +54,11 @@ export default { '您已经复制过部分表，但您也可以继续选择表，新选择表将追加到原表列表中', packages_ldp_fdm_create_task_has_expression: '您已经选择了按正则表达式匹配表，无法继续选择表，请在通过数据复制功能继续复制表', + packages_ldp_task_delay_detail: '任务延迟详情', + packages_ldp_task_delay_detail_tip: '显示所有参与该模型的任务及其延迟时间', + packages_ldp_task_delay_detail_logic: '计算逻辑说明', + packages_ldp_task_delay_detail_logic_tip1: + '最大数据延迟表示当前模型中，数据从源系统产生变更开始，经过所有参与的同步与处理任务，最终写入该模型所需的最长时间。', + packages_ldp_task_delay_detail_logic_tip2: + '该指标会综合计算构建此模型所涉及的所有上游表及其任务链路中的增量延迟，并取其中的最大值，反映模型中最晚更新的数据可能滞后的时间', } diff --git a/packages/ldp/src/locale/lang/zh-TW.js b/packages/ldp/src/locale/lang/zh-TW.js index 8e39642c7..ce5fca351 100644 --- a/packages/ldp/src/locale/lang/zh-TW.js +++ b/packages/ldp/src/locale/lang/zh-TW.js @@ -54,4 +54,11 @@ export default { '您已經複製過部分表，但您也可以繼續選擇表，新選擇表將追加到原表列表中', packages_ldp_fdm_create_task_has_expression: '您已經選擇了按正則表達式匹配表，無法繼續選擇表，請在通過數據複製功能繼續複製表', + packages_ldp_task_delay_detail: '任務延遲詳情', + packages_ldp_task_delay_detail_tip: '顯示所有參與該模型的任務及其延遲時間', + packages_ldp_task_delay_detail_logic: '計算邏輯說明', + packages_ldp_task_delay_detail_logic_tip1: + '最大數據延遲表示當前模型中，數據從源系統產生變更開始，經過所有參與的同步與處理任務，最終寫入該模型所需的最長時間。', + packages_ldp_task_delay_detail_logic_tip2: + '該指標會綜合計算構建此模型所涉及的所有上游表及其任務鏈路中的增量延遲，並取其中的最大值，反映模型中最晚更新的數據可能滯後的時間', } diff --git a/packages/types/src/daas-components.d.ts b/packages/types/src/daas-components.d.ts index 72d398a2f..29b11aa7b 100644 --- a/packages/types/src/daas-components.d.ts +++ b/packages/types/src/daas-components.d.ts @@ -107,6 +107,7 @@ declare module 'vue' { ILucideDatabase: typeof import('~icons/lucide/database')['default'] ILucideDownload: typeof import('~icons/lucide/download')['default'] ILucideEllipsis: typeof import('~icons/lucide/ellipsis')['default'] + ILucideExternalLink: typeof import('~icons/lucide/external-link')['default'] ILucideFileKey: typeof import('~icons/lucide/file-key')['default'] ILucideFilePen: typeof import('~icons/lucide/file-pen')['default'] ILucideFileText: typeof import('~icons/lucide/file-text')['default'] @@ -270,6 +271,7 @@ declare global { const ILucideDatabase: typeof import('~icons/lucide/database')['default'] const ILucideDownload: typeof import('~icons/lucide/download')['default'] const ILucideEllipsis: typeof import('~icons/lucide/ellipsis')['default'] + const ILucideExternalLink: typeof import('~icons/lucide/external-link')['default'] const ILucideFileKey: typeof import('~icons/lucide/file-key')['default'] const ILucideFilePen: typeof import('~icons/lucide/file-pen')['default'] const ILucideFileText: typeof import('~icons/lucide/file-text')['default'] From 29bc5b9c66e9cae8bb225afedafdb9e17c605b0a Mon Sep 17 00:00:00 2001 From: Feynman Date: Mon, 5 Jan 2026 14:56:49 +0800 Subject: [PATCH 3/3] refactor(TablePreview): implement sorting for upstream table status and enhance tooltip display; add localization for delay detail logic --- packages/ldp/src/TablePreview.vue | 100 ++++++++++++++++++++------ packages/ldp/src/locale/lang/en.js | 2 + packages/ldp/src/locale/lang/zh-CN.js | 2 + packages/ldp/src/locale/lang/zh-TW.js | 2 + 4 files changed, 85 insertions(+), 21 deletions(-) diff --git a/packages/ldp/src/TablePreview.vue b/packages/ldp/src/TablePreview.vue index 3a4ad05e4..1d29d2438 100644 --- a/packages/ldp/src/TablePreview.vue +++ b/packages/ldp/src/TablePreview.vue @@ -25,6 +25,7 @@ import VTable from '@tap/component/src/base/v-table' import VCodeEditor from '@tap/component/src/base/VCodeEditor.vue' import Drawer from '@tap/component/src/Drawer.vue' import { IconButton } from '@tap/component/src/icon-button' +import { OverflowTooltip } from '@tap/component/src/overflow-tooltip' import i18n from '@tap/i18n' import { calcTimeUnit, calcUnit, isNum } from '@tap/shared' @@ -46,6 +47,7 @@ export default { VCodeEditor, IconButton, LineageGraph, + OverflowTooltip, }, props: { tag: { @@ -466,16 +468,28 @@ export default { this.lastDataChangeTime = res?.lastDataChangeTime ? dayjs(res?.lastDataChangeTime).format('YYYY-MM-DD HH:mm:ss') : '-' - this.upstreamTableStatus = res?.upstreamTableStatus?.map((item) => { - item.cdcDelayTime = - isNum(item.cdcDelayTime) && item.cdcDelayTime >= 0 - ? calcTimeUnit(item.cdcDelayTime, 2, { - autoHideMs: true, - }) - : '-' - - return item - }) + + this.upstreamTableStatus = + res?.upstreamTableStatus + ?.sort((a, b) => { + if (a.onDelayPath && !b.onDelayPath) { + return -1 + } else if (!a.onDelayPath && b.onDelayPath) { + return 1 + } else { + return b.cdcDelayTime - a.cdcDelayTime + } + }) + ?.map((item) => { + item.cdcDelayTime = + isNum(item.cdcDelayTime) && item.cdcDelayTime >= 0 + ? calcTimeUnit(item.cdcDelayTime, 2, { + autoHideMs: true, + }) + : '-' + + return item + }) || [] }) }, getApisData() { @@ -843,12 +857,12 @@ export default { -