From b3f6c45bc1aceea7cee53c553551c247fc9610f6 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Sat, 23 May 2026 18:04:06 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(DataGrid):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E7=AD=9B=E9=80=89=E5=AD=97=E6=AE=B5=E5=90=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E4=B8=8D=E5=AE=8C=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 扩展筛选与排序字段下拉宽度

- 为字段选项补充完整 title 与省略显示

- 补充字段名完整展示回归测试

Refs #481
---
 .../src/components/DataGrid.layout.test.tsx   | 11 ++++
 frontend/src/components/DataGrid.tsx          | 50 +++++++++++++++++--
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/DataGrid.layout.test.tsx b/frontend/src/components/DataGrid.layout.test.tsx
index 5e301bc..e0755fb 100644
--- a/frontend/src/components/DataGrid.layout.test.tsx
+++ b/frontend/src/components/DataGrid.layout.test.tsx
@@ -3,6 +3,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, expect, it, vi } from 'vitest';
 
 import DataGrid, {
+  buildGridFieldSelectOptions,
   formatCellDisplayText,
   resolveContextMenuFieldName,
   resolveDefaultGridFilterOperator,
@@ -140,6 +141,16 @@ describe('DataGrid layout', () => {
     })).toBe('STARTS_WITH');
   });
 
+  it('keeps full field names in filter field select options', () => {
+    const [option] = buildGridFieldSelectOptions(['mes_manufacture_order_really_long_column_name']);
+
+    expect(option).toEqual({
+      value: 'mes_manufacture_order_really_long_column_name',
+      label: 'mes_manufacture_order_really_long_column_name',
+      title: 'mes_manufacture_order_really_long_column_name',
+    });
+  });
+
   it('renders a DDL action for table data pages only', () => {
     const tableMarkup = renderToStaticMarkup(
       <DataGrid
diff --git a/frontend/src/components/DataGrid.tsx b/frontend/src/components/DataGrid.tsx
index 58fae5f..cbfaa38 100644
--- a/frontend/src/components/DataGrid.tsx
+++ b/frontend/src/components/DataGrid.tsx
@@ -1049,6 +1049,19 @@ type ForeignKeyTarget = {
 
 const EXACT_GRID_FILTER_OPERATOR = '=';
 const CONTAINS_GRID_FILTER_OPERATOR = 'CONTAINS';
+const FILTER_FIELD_SELECT_STYLE: React.CSSProperties = {
+    width: 320,
+    flex: '0 1 320px',
+    minWidth: 260,
+    maxWidth: 'min(460px, 100%)',
+};
+const FILTER_FIELD_POPUP_WIDTH = 520;
+const FILTER_FIELD_OPTION_STYLE: React.CSSProperties = {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
 const STRING_LIKE_GRID_FILTER_TYPES = new Set([
     'bpchar',
     'char',
@@ -1109,6 +1122,26 @@ export const resolveNextGridFilterOperatorForColumnChange = ({
     return current === previousDefault ? resolveDefaultGridFilterOperator(nextColumnType) : current;
 };
 
+export const buildGridFieldSelectOptions = (columnNames: string[]) => (
+    (columnNames || []).map((columnName) => {
+        const text = String(columnName || '');
+        return {
+            value: text,
+            label: text,
+            title: text,
+        };
+    })
+);
+
+const renderGridFieldSelectOption = (option: { label?: React.ReactNode; value?: unknown; title?: unknown }) => {
+    const text = String(option?.title ?? option?.label ?? option?.value ?? '');
+    return (
+        <span title={text} style={FILTER_FIELD_OPTION_STYLE}>
+            {text}
+        </span>
+    );
+};
+
 type NormalizeCommitCellValue = (columnName: string, value: any, mode: 'insert' | 'update') => any;
 
 type DataGridCommitChangeSet = {
@@ -2786,6 +2819,11 @@ const DataGrid: React.FC<DataGridProps> = ({
       }));
   }, [allTableColumnNames, displayColumnNames, quickWhereDraft, dbType, darkMode]);
 
+  const gridFieldSelectOptions = useMemo(
+      () => buildGridFieldSelectOptions(displayColumnNames),
+      [displayColumnNames],
+  );
+
   useEffect(() => {
       if (!showFilter) {
           return;
@@ -6363,12 +6401,14 @@ const DataGrid: React.FC<DataGridProps> = ({
                             disabled={condIndex === 0}
                         />
                         <Select
-                            style={{ width: 180 }}
+                            style={FILTER_FIELD_SELECT_STYLE}
                             value={cond.column}
                             onChange={v => updateFilter(cond.id, 'column', v)}
-                            options={displayColumnNames.map(c => ({ value: c, label: c }))}
+                            options={gridFieldSelectOptions}
                             showSearch
                             optionFilterProp="label"
+                            optionRender={renderGridFieldSelectOption}
+                            popupMatchSelectWidth={FILTER_FIELD_POPUP_WIDTH}
                             filterOption={(input, option) =>
                                 String(option?.label ?? '')
                                     .toLowerCase()
@@ -6448,7 +6488,7 @@ const DataGrid: React.FC<DataGridProps> = ({
                                 />
                                 <span style={{ fontSize: 12, color: 'inherit', opacity: 0.7, whiteSpace: 'nowrap', minWidth: 32 }}>{idx === 0 ? '排序' : '然后'}</span>
                                 <Select
-                                    style={{ width: 180 }}
+                                    style={FILTER_FIELD_SELECT_STYLE}
                                     value={s.columnKey || undefined}
                                     onChange={v => {
                                         const next = [...sortInfo];
@@ -6458,9 +6498,11 @@ const DataGrid: React.FC<DataGridProps> = ({
                                     }}
                                     options={displayColumnNames
                                         .filter(c => c === s.columnKey || !sortInfo.some(si => si.columnKey === c))
-                                        .map(c => ({ value: c, label: c }))}
+                                        .map(c => ({ value: c, label: c, title: c }))}
                                     showSearch
                                     optionFilterProp="label"
+                                    optionRender={renderGridFieldSelectOption}
+                                    popupMatchSelectWidth={FILTER_FIELD_POPUP_WIDTH}
                                     filterOption={(input, option) =>
                                         String(option?.label ?? '')
                                             .toLowerCase()