feat(data-grid-filter): 优化筛选框显示与性能 (#858)

## 功能
- 优化筛选功能在大数据量时的性能
- 实现值统计结果的升降序排序功能
- 将原有复选框列表替换为带排序功能的Ant Design表格
- 修复筛选弹窗内的事件冒泡问题,避免干扰列表头拖拽

## 验证
- 聚焦测试:18/18 通过。
- tsc --noEmit、Vite 生产构建、git diff --check 均通过。
This commit is contained in:
Syngnat
2026-08-06 20:48:43 +08:00
committed by GitHub
10 changed files with 216 additions and 48 deletions

View File

@@ -1,5 +1,9 @@
import { describe, expect, it } from 'vitest';
import { countGridColumnValues, filterRowsByGridConditions } from './dataGridClientFilter';
import {
countGridColumnValues,
filterRowsByGridConditions,
sortGridColumnValueCounts,
} from './dataGridClientFilter';
describe('countGridColumnValues', () => {
it('counts nullish, empty, scalar, and stable complex values separately', () => {
@@ -38,6 +42,26 @@ describe('countGridColumnValues', () => {
{ key: 'string:2', count: 1 },
]);
});
it('sorts value counts by count in either direction without changing tie ordering', () => {
const valueCounts = countGridColumnValues([
{ value: 'z' },
{ value: 'a' },
{ value: 'b' },
{ value: 'z' },
], 'value');
expect(sortGridColumnValueCounts(valueCounts, 'ascend').map(({ display, count }) => ({ display, count }))).toEqual([
{ display: 'a', count: 1 },
{ display: 'b', count: 1 },
{ display: 'z', count: 2 },
]);
expect(sortGridColumnValueCounts(valueCounts, 'descend').map(({ display, count }) => ({ display, count }))).toEqual([
{ display: 'z', count: 2 },
{ display: 'a', count: 1 },
{ display: 'b', count: 1 },
]);
});
});
describe('filterRowsByGridConditions', () => {

View File

@@ -8,6 +8,8 @@ export type DataGridColumnValueCount = {
count: number;
};
export type DataGridColumnValueCountSortOrder = 'ascend' | 'descend';
const stableSerializeComplexValue = (value: unknown, seen = new WeakSet<object>()): string => {
if (value === null) return 'null';
if (value === undefined) return 'undefined';
@@ -75,8 +77,16 @@ export const countGridColumnValues = <T extends Record<string, any>>(
}
});
return Array.from(counts.values()).sort((left, right) => (
right.count - left.count
return sortGridColumnValueCounts(Array.from(counts.values()), 'descend');
};
export const sortGridColumnValueCounts = (
valueCounts: DataGridColumnValueCount[],
sortOrder: DataGridColumnValueCountSortOrder,
): DataGridColumnValueCount[] => {
const direction = sortOrder === 'ascend' ? 1 : -1;
return [...valueCounts].sort((left, right) => (
direction * (left.count - right.count)
|| left.display.localeCompare(right.display, undefined, { numeric: true, sensitivity: 'base' })
|| left.key.localeCompare(right.key)
));