chore: 优化搜索框

packages/app/src/components/filter-field/Date.tsx

@@ -1,4 +1,4 @@
-import {Col, DatePicker, Row} from 'antd';
+import {Col, DatePicker} from 'antd';
 import {FC} from 'react';
 import css from './index.module.css';
 import type {Dayjs} from 'dayjs';
@@ -16,13 +16,11 @@ type Props = {
 const FilterTime: FC<Props> = function ({label, name, value, onChange}) {
   return (
     <Col span={6}>
-      <Row gutter={12}>
-        <Col>
-          <label htmlFor={`date_filter_${name}`} className={css.fieldLabel}>
-            {label}:{' '}
-          </label>
-        </Col>
-        <Col flex={1}>
+      <div className={css.field}>
+        <label htmlFor={`date_filter_${name}`} className={css.fieldLabel}>
+          {label}:
+        </label>
+        <div className={css.fieldWrapper}>
           <DatePicker.RangePicker
             data-testid={`date_filter_${name}`}
             name={name}
@@ -30,8 +28,8 @@ const FilterTime: FC<Props> = function ({label, name, value, onChange}) {
             onChange={onChange}
             suffixIcon={null}
           />
-        </Col>
-      </Row>
+        </div>
+      </div>
     </Col>
   );
 };

packages/app/src/components/filter-field/Field.tsx

@@ -1,5 +1,5 @@
 import css from './index.module.css';
-import {Col, Row, Input} from 'antd';
+import {Col, Input} from 'antd';
 import {ChangeEventHandler, FC} from 'react';
 
 type Props = {
@@ -17,13 +17,11 @@ const FilterField: FC<Props> = function ({label, name, placeholder, value, onCha
 
   return (
     <Col span={6}>
-      <Row gutter={12}>
-        <Col>
-          <label htmlFor={`filter_${name}`} className={css.fieldLabel}>
-            {label}:{' '}
-          </label>
-        </Col>
-        <Col flex={1}>
+      <div className={css.field}>
+        <label htmlFor={`filter_${name}`} className={css.fieldLabel}>
+          {label}:
+        </label>
+        <div className={css.fieldWrapper}>
           <Input
             id={`filter_${name}`}
             name={name}
@@ -31,8 +29,8 @@ const FilterField: FC<Props> = function ({label, name, placeholder, value, onCha
             value={value.length ? value : void 0}
             onChange={onInputChange}
           />
-        </Col>
-      </Row>
+        </div>
+      </div>
     </Col>
   );
 };

packages/app/src/components/filter-field/Select.tsx

@@ -2,6 +2,7 @@ import {Col, Row, Select as SelectOri} from 'antd';
 import css from './index.module.css';
 import {FC} from 'react';
 import {filterOptions} from '@utils';
+import classNames from 'classnames';
 
 type Props = {
   label: string;
@@ -28,17 +29,15 @@ const Select: FC<Props> = function ({
 
   return (
     <Col span={6}>
-      <Row gutter={12}>
-        <Col>
-          <label htmlFor={`filter_${name}`} className={css.fieldLabel}>
-            {label}:{' '}
-          </label>
-        </Col>
-        <Col flex={1}>
+      <div className={css.field}>
+        <label htmlFor={`filter_${name}`} className={css.fieldLabel}>
+          {label}:
+        </label>
+        <div className={css.fieldWrapper}>
           <SelectOri
             showSearch={showSearch}
             filterOption={showSearch ? filterOptions : false}
-            className='width-full'
+            className={classNames('width-full')}
             id={`filter_${name}`}
             data-testid={`filter_${name}`}
             placeholder={placeholder ?? '请输入'}
@@ -47,8 +46,8 @@ const Select: FC<Props> = function ({
             onChange={onSelectChange}
             getPopupContainer={(node: HTMLElement) => node.parentNode as HTMLElement}
           />
-        </Col>
-      </Row>
+        </div>
+      </div>
     </Col>
   );
 };

packages/app/src/components/filter-field/index.module.css

@@ -1,6 +1,21 @@
 .field-label {
   display: block;
-  width: 80px;
+  width: 78px;
   height: 100%;
   line-height: 2.2;
 }
+
+.field-select {
+  min-width: 180px;
+}
+
+.field {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  width: 100%;
+}
+
+.field-wrapper {
+  flex: 1;
+}