From bea16b72df9013184033272b8efef7d7764e659a Mon Sep 17 00:00:00 2001 From: Syngnat Date: Sun, 31 May 2026 13:32:50 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(data-grid):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E5=AD=97=E6=AE=B5=E8=B7=B3=E8=BD=AC=E5=88=97=E5=8C=B9?= =?UTF-8?q?=E9=85=8D=E4=B8=8E=E5=9B=9E=E8=BD=A6=E5=AE=9A=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 提取字段跳转目标解析逻辑，优先精确匹配再回退模糊匹配 - 旧版跳转列保留补全下拉，选中或回车即可定位 - 移除旧版多余跳转按钮，统一为输入即补全的交互 - 补充 DataGrid 与 dataGridFind 定向回归覆盖 - Refs #509 --- frontend/src/components/DataGrid.tsx | 18 ++-- .../components/DataGridColumnQuickFind.tsx | 102 +++++++++--------- frontend/src/utils/dataGridFind.test.ts | 10 ++ frontend/src/utils/dataGridFind.ts | 17 +++ 4 files changed, 83 insertions(+), 64 deletions(-) diff --git a/frontend/src/components/DataGrid.tsx b/frontend/src/components/DataGrid.tsx index 2fc595d..2da39c1 100644 --- a/frontend/src/components/DataGrid.tsx +++ b/frontend/src/components/DataGrid.tsx @@ -91,6 +91,7 @@ import { findDataGridTextRanges, hasDataGridFindRenderVersionChanged, normalizeDataGridFindQuery, + resolveDataGridColumnQuickFindTarget, resolveDataGridFindNavigationIndex, summarizeDataGridFindMatches, type DataGridFindMatch, @@ -6284,13 +6285,9 @@ const DataGrid: React.FC = ({ [visibleColumnQuickFindMatches], ); - const resolveColumnQuickFindTarget = useCallback((): string => { - const exactMatch = displayColumnNames.find((columnName) => ( - normalizeDataGridFindQuery(columnName) === normalizedColumnQuickFindText - )); - if (exactMatch) return exactMatch; - return visibleColumnQuickFindMatches[0] || ''; - }, [displayColumnNames, normalizedColumnQuickFindText, visibleColumnQuickFindMatches]); + const resolveColumnQuickFindTarget = useCallback((query: string): string => ( + resolveDataGridColumnQuickFindTarget(displayColumnNames, query) + ), [displayColumnNames]); const highlightColumnQuickFindTarget = useCallback((columnName: string) => { setHighlightedColumnName(columnName); @@ -6530,8 +6527,9 @@ const DataGrid: React.FC = ({ syncExternalScrollFromTargets, ]); - const handleSubmitColumnQuickFind = useCallback(() => { - const targetColumnName = resolveColumnQuickFindTarget(); + const handleSubmitColumnQuickFind = useCallback((submittedValue?: string) => { + const effectiveQuery = String(submittedValue ?? columnQuickFindText); + const targetColumnName = resolveColumnQuickFindTarget(effectiveQuery); if (!targetColumnName) { if (columnQuickFindText.trim()) { void message.warning(`未找到字段列：${columnQuickFindText.trim()}`); @@ -7037,7 +7035,7 @@ const DataGrid: React.FC = ({ inputProps={noAutoCapInputProps as Record} value={columnQuickFindText} options={columnQuickFindOptions} - hasTarget={!!resolveColumnQuickFindTarget()} + hasTarget={!!resolveColumnQuickFindTarget(columnQuickFindText)} onChange={setColumnQuickFindText} onSubmit={handleSubmitColumnQuickFind} /> diff --git a/frontend/src/components/DataGridColumnQuickFind.tsx b/frontend/src/components/DataGridColumnQuickFind.tsx index d6509e3..1b8b586 100644 --- a/frontend/src/components/DataGridColumnQuickFind.tsx +++ b/frontend/src/components/DataGridColumnQuickFind.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { AutoComplete, Button, Input, Tooltip } from 'antd'; -import { AimOutlined, SearchOutlined } from '@ant-design/icons'; +import { AutoComplete, Input, Tooltip } from 'antd'; +import { SearchOutlined } from '@ant-design/icons'; export interface DataGridColumnQuickFindProps { isV2Ui: boolean; @@ -10,68 +10,62 @@ export interface DataGridColumnQuickFindProps { options: Array<{ value: string; label?: React.ReactNode }>; hasTarget: boolean; onChange: (value: string) => void; - onSubmit: () => void; + onSubmit: (value?: string) => void; } const DataGridColumnQuickFind: React.FC = ({ isV2Ui, - darkMode, inputProps, value, options, - hasTarget, onChange, onSubmit, -}) => ( - -
-
-
- - } - placeholder="跳到字段列..." - value={value} - onChange={(event) => onChange(event.target.value)} - onPressEnter={onSubmit} - style={isV2Ui ? undefined : { width: 220 }} - /> - -
- +
+ { + onChange(nextValue); + onSubmit(nextValue); + }} + filterOption={false} + popupMatchSelectWidth={280} + > + } + placeholder="跳到字段列..." + value={value} + onChange={(event) => onChange(event.target.value)} + onPressEnter={() => onSubmit(value)} + style={isV2Ui ? undefined : { width: 168, height: 32 }} + /> + +
+
- {!isV2Ui && ( - - 定位字段列 - - )} - - -); + + ); +}; export default DataGridColumnQuickFind; diff --git a/frontend/src/utils/dataGridFind.test.ts b/frontend/src/utils/dataGridFind.test.ts index a2bf351..e7ecfa5 100644 --- a/frontend/src/utils/dataGridFind.test.ts +++ b/frontend/src/utils/dataGridFind.test.ts @@ -6,6 +6,7 @@ import { findDataGridTextRanges, hasDataGridFindRenderVersionChanged, normalizeDataGridFindQuery, + resolveDataGridColumnQuickFindTarget, resolveDataGridFindNavigationIndex, summarizeDataGridFindMatches, } from './dataGridFind'; @@ -89,6 +90,15 @@ describe('dataGridFind', () => { expect(resolveDataGridFindNavigationIndex(0, 0, 'next')).toBe(-1); }); + it('prefers an exact quick-find column match over earlier fuzzy matches', () => { + const columnNames = ['user_id', 'username', 'created_at']; + + expect(resolveDataGridColumnQuickFindTarget(columnNames, 'username')).toBe('username'); + expect(resolveDataGridColumnQuickFindTarget(columnNames, 'user')).toBe('user_id'); + expect(resolveDataGridColumnQuickFindTarget(columnNames, ' ')).toBe(''); + expect(resolveDataGridColumnQuickFindTarget(columnNames, 'missing')).toBe(''); + }); + it('tracks render version changes without exposing metadata as row data', () => { const rows = [{ id: 1, name: 'Alpha' }]; diff --git a/frontend/src/utils/dataGridFind.ts b/frontend/src/utils/dataGridFind.ts index 56b1f45..3d53a2f 100644 --- a/frontend/src/utils/dataGridFind.ts +++ b/frontend/src/utils/dataGridFind.ts @@ -143,3 +143,20 @@ export const resolveDataGridFindNavigationIndex = ( } return currentIndex < 0 || currentIndex >= matchCount - 1 ? 0 : currentIndex + 1; }; + +export const resolveDataGridColumnQuickFindTarget = ( + columnNames: string[], + query: string, +): string => { + const normalizedQuery = normalizeDataGridFindQuery(query); + if (!normalizedQuery) return ''; + + const exactMatch = columnNames.find((columnName) => ( + normalizeDataGridFindQuery(columnName) === normalizedQuery + )); + if (exactMatch) return exactMatch; + + return columnNames.find((columnName) => ( + normalizeDataGridFindQuery(columnName).includes(normalizedQuery) + )) || ''; +};