codernew-api-frontend/src/pages/user-management/form.tsx

import React from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Grid,
  Space,
} from '@arco-design/web-react';
import {
  IconRefresh,
  IconSearch,
  IconDown,
  IconUp,
} from '@arco-design/web-react/icon';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import { Status } from './constants';
import styles from './style/index.module.less';

const { Row, Col } = Grid;
const { useForm } = Form;

interface SearchFormProps {
  onSearch: (values: Record<string, any>) => void;
  collapsed: boolean;
  onToggle: () => void;
}

function SearchForm(props: SearchFormProps) {
  const t = useLocale(locale);
  const [form] = useForm();

  const handleSubmit = () => {
    const values = form.getFieldsValue();
    props.onSearch(values);
  };

  const handleReset = () => {
    form.resetFields();
    props.onSearch({});
  };

  return (
    <div className={styles['search-form-wrapper']}>
      <Form form={form} className={styles['search-form']} layout="vertical">
        <Row gutter={16}>
          <Col xs={12} sm={8} md={6} lg={6} xl={6}>
            <Form.Item
              label={t['userManagement.columns.username']}
              field="username"
            >
              <Input
                allowClear
                placeholder={t['userManagement.form.username.placeholder']}
              />
            </Form.Item>
          </Col>
          <Col xs={12} sm={8} md={6} lg={6} xl={6}>
            <Form.Item label={t['userManagement.columns.name']} field="name">
              <Input
                allowClear
                placeholder={t['userManagement.form.name.placeholder']}
              />
            </Form.Item>
          </Col>
          <Col xs={12} sm={8} md={6} lg={6} xl={6}>
            <Form.Item
              label={t['userManagement.columns.status']}
              field="status"
            >
              <Select
                allowClear
                placeholder={t['userManagement.form.all.placeholder']}
                options={Status.map((item, index) => ({
                  label: item,
                  value: index,
                }))}
              />
            </Form.Item>
          </Col>
          <Col
            xs={12}
            sm={8}
            md={6}
            lg={6}
            xl={6}
            className={props.collapsed ? styles['field-hidden'] : ''}
          >
            <Form.Item label={t['userManagement.columns.email']} field="email">
              <Input
                allowClear
                placeholder={t['userManagement.form.email.placeholder']}
              />
            </Form.Item>
          </Col>
          <Col
            xs={12}
            sm={8}
            md={6}
            lg={6}
            xl={6}
            className={props.collapsed ? styles['field-hidden'] : ''}
          >
            <Form.Item label={t['userManagement.columns.phone']} field="phone">
              <Input
                allowClear
                placeholder={t['userManagement.form.phone.placeholder']}
              />
            </Form.Item>
          </Col>
        </Row>
        <div className={styles['search-actions']}>
          <Space size={12}>
            <Button type="primary" icon={<IconSearch />} onClick={handleSubmit}>
              {t['userManagement.form.search']}
            </Button>
            <Button icon={<IconRefresh />} onClick={handleReset}>
              {t['userManagement.form.reset']}
            </Button>
            <Button
              type="text"
              icon={props.collapsed ? <IconDown /> : <IconUp />}
              onClick={props.onToggle}
            >
              {props.collapsed
                ? t['userManagement.form.expand']
                : t['userManagement.form.collapse']}
            </Button>
          </Space>
        </div>
      </Form>
    </div>
  );
}

export default SearchForm;