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>

src/styles/global.css

@@ -6176,6 +6176,11 @@
   padding-right: var(--space-2);
 }
 
+.channel-field-pool-list {
+  align-content: start;
+  grid-auto-rows: 68px;
+}
+
 .channel-field-pool-list > button {
   align-items: center;
   background: var(--color-surface);
@@ -6185,10 +6190,12 @@
   cursor: pointer;
   display: flex;
   justify-content: space-between;
-  min-height: 58px;
+  box-sizing: border-box;
+  height: 68px;
+  max-height: 68px;
+  min-height: 68px;
   padding: var(--space-3) var(--space-4);
   text-align: left;
-  min-height: 68px;
 }
 
 .channel-remove-field-button {