From 22fab86010bd55deac075100294d730bac590188 Mon Sep 17 00:00:00 2001 From: Syngnat Date: Wed, 8 Jul 2026 17:37:21 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(ui):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=A1=A8=E6=8C=89=E9=92=AE=E4=B8=8E=E4=BE=A7?= =?UTF-8?q?=E6=A0=8F=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复 v2 分页“统计总数”按钮被压缩为图标宽度的问题 - 首次打开时隐藏树主体横向溢出，保留独立横向滚动条占位 - 将自定义字段显示里的全局隐藏列文案改为多语言翻译 - 增加数据表按钮和侧栏横向滚动条布局回归断言 --- .../src/components/DataGrid.layout.test.tsx | 32 +++++++++++++++++++ .../DataGridColumnInfoPopoverContent.tsx | 25 +++++++++------ .../Sidebar.locate-toolbar.test.tsx | 1 + frontend/src/v2-theme.css | 15 +++++++++ 4 files changed, 63 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/DataGrid.layout.test.tsx b/frontend/src/components/DataGrid.layout.test.tsx index 9b6fff0c..5a2e2cd6 100644 --- a/frontend/src/components/DataGrid.layout.test.tsx +++ b/frontend/src/components/DataGrid.layout.test.tsx @@ -996,6 +996,38 @@ describe('DataGrid layout', () => { } }); + it('keeps the v2 pagination total-count action readable instead of icon-button width', () => { + const css = readV2ThemeCss(); + const markup = renderToStaticMarkup( + {}} + onPageSizeChange={() => {}} + onV2PageStep={() => {}} + onToggleTotalCount={() => {}} + />, + ); + + expect(markup).toContain('data-grid-pagination-total-count="true"'); + expect(markup).toContain('统计总数'); + expect(css).toMatch(/\[data-grid-pagination-total-count="true"\]\.ant-btn \{[\s\S]*?width: auto !important;[\s\S]*?min-width: max-content !important;[\s\S]*?white-space: nowrap;/); + expect(css).toMatch(/\[data-grid-pagination-total-count="true"\]\.ant-btn \.ant-btn-icon \{[\s\S]*?margin-inline-end: 3px !important;/); + }); + it('hides current-page find in JSON and text record views', () => { const source = readDataGridSource(); diff --git a/frontend/src/components/DataGridColumnInfoPopoverContent.tsx b/frontend/src/components/DataGridColumnInfoPopoverContent.tsx index 9af3c70b..a5292328 100644 --- a/frontend/src/components/DataGridColumnInfoPopoverContent.tsx +++ b/frontend/src/components/DataGridColumnInfoPopoverContent.tsx @@ -34,12 +34,7 @@ export interface DataGridColumnInfoPopoverContentProps { onResetHidden: () => void; } -const GLOBAL_HIDDEN_LABEL = 'Global hidden columns'; -const GLOBAL_HIDDEN_HELP = 'Column names listed here are hidden in query results wherever they appear. Separate names with comma or newline.'; const GLOBAL_HIDDEN_PLACEHOLDER = 'id\ncreated_by\nupdated_at'; -const GLOBAL_HIDDEN_SAVE = 'Apply global'; -const GLOBAL_HIDDEN_ADD_LOCAL = 'Add current hidden'; -const GLOBAL_HIDDEN_CLEAR = 'Clear global'; const DataGridColumnInfoPopoverContent: React.FC = ({ darkMode, @@ -132,8 +127,12 @@ const DataGridColumnInfoPopoverContent: React.FC
-
{GLOBAL_HIDDEN_LABEL}
-
{GLOBAL_HIDDEN_HELP}
+
+ {translate('data_grid.column_settings.global_hidden_columns')} +
+
+ {translate('data_grid.column_settings.global_hidden_columns_help')} +
setGlobalHiddenText(event.target.value)} />
- - + +
- +
onEnableColumnOrderMemoryChange(e.target.checked)}> diff --git a/frontend/src/components/Sidebar.locate-toolbar.test.tsx b/frontend/src/components/Sidebar.locate-toolbar.test.tsx index 2155b07d..38f1b79a 100644 --- a/frontend/src/components/Sidebar.locate-toolbar.test.tsx +++ b/frontend/src/components/Sidebar.locate-toolbar.test.tsx @@ -1232,6 +1232,7 @@ describe('Sidebar locate toolbar', () => { expect(css).not.toMatch(/\.gn-v2-explorer-tree-shell \.ant-tree-list-holder-inner \{[^}]*width: max-content;/s); expect(css).not.toMatch(/\.gn-v2-explorer-tree-shell \.ant-tree-list \{[^}]*position: static !important;/s); expect(css).toMatch(/\.gn-v2-explorer-tree-shell \.ant-tree-list-holder \{[^}]*height: calc\(100% - var\(--gn-v2-tree-horizontal-scroll-reserve\)\);[^}]*max-height: calc\(100% - var\(--gn-v2-tree-horizontal-scroll-reserve\)\) !important;/s); + expect(css).toMatch(/\.gn-v2-explorer-tree-shell \.ant-tree-list-holder \{[^}]*overflow-x: hidden !important;/s); expect(css).not.toMatch(/\.gn-v2-explorer-tree-shell \.ant-tree-list-holder \{[^}]*overflow-x: auto !important;/s); expect(css).not.toMatch(/\.gn-v2-explorer-tree-shell \.ant-tree-list-holder \{[^}]*padding-bottom: var\(--gn-v2-tree-horizontal-scroll-reserve\);/s); expect(css).toMatch(/\.gn-v2-explorer-tree-shell \.ant-tree-list-scrollbar-horizontal \{[^}]*height: 12px !important;[^}]*bottom: 0 !important;/s); diff --git a/frontend/src/v2-theme.css b/frontend/src/v2-theme.css index 82d24c3e..65da9f08 100644 --- a/frontend/src/v2-theme.css +++ b/frontend/src/v2-theme.css @@ -2635,6 +2635,7 @@ body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-list-holder { box-sizing: border-box; height: calc(100% - var(--gn-v2-tree-horizontal-scroll-reserve)); max-height: calc(100% - var(--gn-v2-tree-horizontal-scroll-reserve)) !important; + overflow-x: hidden !important; scrollbar-width: thin; } @@ -4714,6 +4715,20 @@ body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .ant-btn { vertical-align: top; } +body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap [data-grid-pagination-total-count="true"].ant-btn { + width: auto !important; + min-width: max-content !important; + max-width: none !important; + flex: 0 0 auto; + gap: 4px; + padding: 0 8px !important; + white-space: nowrap; +} + +body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap [data-grid-pagination-total-count="true"].ant-btn .ant-btn-icon { + margin-inline-end: 3px !important; +} + body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-btn:hover, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn:hover, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .ant-btn:hover {