xiaoxia-saas/apps/web/src/components/ui/Form.tsx

/**
 * V21 Form 表单
 * 封装 Ant Design Form，应用 V21 设计系统样式
 */
import React from "react";
import { Form as AntForm } from "antd";
import type { FormProps as AntFormProps } from "antd";
import classNames from "classnames";
import "./ui.css";

export interface FormProps extends AntFormProps {
  /** 紧凑模式（减小表单项间距） */
  compact?: boolean;
}

const Form = ({ className, compact, children, ...rest }: FormProps) => {
  const v21Class = classNames(
    "xx-form",
    compact && "xx-form-compact",
    className,
  );
  return (
    <AntForm
      className={v21Class}
      {...(rest as Omit<FormProps, "className" | "compact" | "children">)}
    >
      {children as React.ReactNode}
    </AntForm>
  );
};

/** 导出 Form 的子组件（保持 antd API 一致） */
export const FormItem = AntForm.Item;
export const FormList = AntForm.List;
export const FormProvider = AntForm.Provider;

export default Form;