fix: keep report field pool cards fixed height

src/apps/admin/ReportFieldMappingModal.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { ReportFieldMappingModal } from './ReportFieldMappingModal';
 
@@ -29,4 +29,30 @@ describe('ReportFieldMappingModal', () => {
     const remove = screen.getByRole('button', { name: '移除字段' });
     expect(remove).toHaveClass('channel-remove-field-button', 'ui-button--ghost');
   });
+
+  it('keeps every field-pool card at a fixed height instead of stretching the grid rows', () => {
+    render(
+      <ReportFieldMappingModal
+        fields={[]}
+        commonFields={[]}
+        libraryFields={[
+          { id: 'field-1', code: 'field_1', name: '字段一', fieldType: 'string', status: 'active' },
+          { id: 'field-2', code: 'field_2', name: '字段二', fieldType: 'string', status: 'active' },
+        ]}
+        reportType="signature"
+        onClose={vi.fn()}
+        onSave={vi.fn()}
+      />,
+    );
+    const pool = document.querySelector<HTMLElement>('.channel-field-pool-list');
+    expect(pool).toHaveStyle({ alignContent: 'start', gridAutoRows: '68px' });
+    const initialCards = document.querySelectorAll<HTMLButtonElement>('.channel-field-pool-list > button');
+    expect(initialCards).toHaveLength(2);
+    expect(initialCards[0]).toHaveStyle({ height: '68px', maxHeight: '68px', minHeight: '68px' });
+
+    fireEvent.click(initialCards[0]);
+    const remainingCards = document.querySelectorAll<HTMLButtonElement>('.channel-field-pool-list > button');
+    expect(remainingCards).toHaveLength(1);
+    expect(remainingCards[0]).toHaveStyle({ height: '68px', maxHeight: '68px', minHeight: '68px' });
+  });
 });

src/apps/admin/ReportFieldMappingModal.tsx

@@ -201,9 +201,14 @@ export function ReportFieldMappingModal({
             prefix={<Search size={16} />}
             value={search}
           />
-          <div className="channel-field-pool-list">
+          <div className="channel-field-pool-list" style={{ alignContent: 'start', gridAutoRows: '68px' }}>
             {available.map((field) => (
-              <button key={String(field.id)} onClick={() => addField(field)} type="button">
+              <button
+                key={String(field.id)}
+                onClick={() => addField(field)}
+                style={{ height: 68, maxHeight: 68, minHeight: 68 }}
+                type="button"
+              >
                 <span>
                   <strong>{String(field.name ?? field.code)}</strong>
                   <Tag tone="neutral">{fieldTypeLabel[String(field.fieldType)] ?? field.fieldType}</Tag>