From 2ba123dd97fc9988390ba2f358cdbbf04ff56b09 Mon Sep 17 00:00:00 2001 From: zipg Date: Fri, 4 Sep 2026 20:39:02 +0800 Subject: [PATCH] fix(desktop): align data tab table info display and column widths --- apps/desktop/src/components/grid/DataGrid.vue | 34 ++++++++++++------- .../src/components/layout/ContentArea.vue | 32 ++++++++--------- .../__tests__/ContentArea.dataHeader.spec.ts | 4 +-- .../app-tests/dataTabHeaderConnection.test.ts | 2 +- 4 files changed, 40 insertions(+), 32 deletions(-) diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue index 8e7071f63e..bc0d0e5bfd 100644 --- a/apps/desktop/src/components/grid/DataGrid.vue +++ b/apps/desktop/src/components/grid/DataGrid.vue @@ -11138,7 +11138,8 @@ watch(cellDetailPanelLayout, (layout) => { watch([showCellDetail, activeCellDetail, cellDetailPanelIsBottom, detailPanelHeight], scheduleActiveCellEditTextareaResize); const ddlDrawerStyle = computed(() => ({ - width: `${ddlWidth.value}px`, + width: `min(${ddlWidth.value}px, 100%)`, + maxWidth: "100%", })); const detailPanelStyle = computed(() => @@ -11153,17 +11154,24 @@ const mongoJsonPreviewStyle = computed(() => ({ width: `${mongoJsonPreviewWidth.value}px`, })); -const contentGridStyle = computed(() => - cellDetailPanelIsBottom.value && showCellDetail.value && activeCellDetail.value - ? { - gridTemplateColumns: "minmax(0, 1fr) auto", - gridTemplateRows: `minmax(${CELL_DETAIL_TABLE_MIN_VISIBLE_HEIGHT}px, 1fr) minmax(0, min(${detailPanelHeight.value}px, 70vh, ${CELL_DETAIL_PANEL_MAX_HEIGHT}px, calc(100% - ${CELL_DETAIL_TABLE_MIN_VISIBLE_HEIGHT}px)))`, - } - : { - gridTemplateColumns: "minmax(0, 1fr) auto auto", - gridTemplateRows: "minmax(0, 1fr)", - }, -); +const contentGridStyle = computed(() => { + const hasRightCellDetail = !cellDetailPanelIsBottom.value && showCellDetail.value && activeCellDetail.value; + const tableInfoAvailableWidth = hasRightCellDetail ? `max(0px, calc(100% - ${detailPanelHeight.value}px))` : "100%"; + const tableInfoTrack = showTableInfo.value ? `minmax(0, min(${ddlWidth.value}px, ${tableInfoAvailableWidth}))` : "0px"; + const detailTrack = hasRightCellDetail ? `minmax(0, min(${detailPanelHeight.value}px, 100%))` : "0px"; + + if (cellDetailPanelIsBottom.value && showCellDetail.value && activeCellDetail.value) { + return { + gridTemplateColumns: `minmax(0, 1fr) ${tableInfoTrack}`, + gridTemplateRows: `minmax(${CELL_DETAIL_TABLE_MIN_VISIBLE_HEIGHT}px, 1fr) minmax(0, min(${detailPanelHeight.value}px, 70vh, ${CELL_DETAIL_PANEL_MAX_HEIGHT}px, calc(100% - ${CELL_DETAIL_TABLE_MIN_VISIBLE_HEIGHT}px)))`, + }; + } + + return { + gridTemplateColumns: `minmax(0, 1fr) ${tableInfoTrack} ${detailTrack}`, + gridTemplateRows: "minmax(0, 1fr)", + }; +}); function toggleCellDetailPanelLayout() { const nextLayout = cellDetailPanelIsBottom.value ? "right" : "bottom"; @@ -14188,7 +14196,7 @@ function openGridSnapshot() {
{{ activeConnection.name }} - - {{ activeTab.tableMeta?.tableName || activeTab.title }} + + {{ activeDataTabTableMeta?.tableName || activeTab.title }} - - {{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t) }} - - - {{ activeTab.tableMeta.columns.length }} {{ t("tree.columns") }} + + {{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t) }} + {{ activeDataTabTableMeta.columns.length }} {{ t("tree.columns") }} - + - + {{ t("grid.tableInfo") }} diff --git a/apps/desktop/src/components/layout/__tests__/ContentArea.dataHeader.spec.ts b/apps/desktop/src/components/layout/__tests__/ContentArea.dataHeader.spec.ts index 63099d73bd..be93805413 100644 --- a/apps/desktop/src/components/layout/__tests__/ContentArea.dataHeader.spec.ts +++ b/apps/desktop/src/components/layout/__tests__/ContentArea.dataHeader.spec.ts @@ -21,7 +21,7 @@ describe("ContentArea data-mode header", () => { }); it("keeps the full table and schema names reachable via title tooltips", () => { - expect(contentAreaSource).toContain(':title="activeTab.tableMeta?.tableName || activeTab.title"'); - expect(contentAreaSource).toContain("[activeTab.tableMeta?.schema, databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t)].filter(Boolean).join('@')"); + expect(contentAreaSource).toContain(':title="activeDataTabTableMeta?.tableName || activeTab.title"'); + expect(contentAreaSource).toContain("[activeDataTabTableMeta?.schema, databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t)].filter(Boolean).join('@')"); }); }); diff --git a/packages/app-tests/dataTabHeaderConnection.test.ts b/packages/app-tests/dataTabHeaderConnection.test.ts index 45f517c3ce..8799881e08 100644 --- a/packages/app-tests/dataTabHeaderConnection.test.ts +++ b/packages/app-tests/dataTabHeaderConnection.test.ts @@ -22,7 +22,7 @@ function dataModeTemplate(): string { test("data tab header shows the active connection before the table context", () => { const template = dataModeTemplate(); const connectionIndex = template.indexOf("data-data-header-connection"); - const tableIndex = template.indexOf("activeTab.tableMeta?.tableName"); + const tableIndex = template.indexOf("activeDataTabTableMeta?.tableName"); assert.ok(connectionIndex >= 0 && connectionIndex < tableIndex); assert.match(template, /v-if="activeConnection\?\.name\?\.trim\(\)"/);