From 13bbb7527fa797677b17fb6000a1db4f7ec4477c Mon Sep 17 00:00:00 2001
From: canisminor1990 <i@canisminor.cc>
Date: Fri, 24 Jan 2025 20:19:15 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Fix=20Form=20vertical=20l?=
 =?UTF-8?q?ayout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Form/components/FormItem.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/Form/components/FormItem.tsx b/src/Form/components/FormItem.tsx
index b0a6c963..cbddf864 100644
--- a/src/Form/components/FormItem.tsx
+++ b/src/Form/components/FormItem.tsx
@@ -11,7 +11,7 @@ import FormTitle, { type FormTitleProps } from './FormTitle';
 const { Item } = Form;
 
 export const useStyles = createStyles(
-  ({ css, responsive, prefixCls }, itemMinWidth?: string | number) => ({
+  ({ css, responsive, prefixCls }, { minWidth }: { minWidth?: string | number }) => ({
     item: css`
       &.${prefixCls}-form-item {
         padding-block: 16px;
@@ -59,7 +59,7 @@ export const useStyles = createStyles(
     `,
     itemMinWidth: css`
       .${prefixCls}-form-item-control {
-        width: ${isNumber(itemMinWidth) ? `${itemMinWidth}px` : itemMinWidth};
+        width: ${isNumber(minWidth) ? `${minWidth}px` : minWidth};
       }
       ${responsive.mobile} {
         .${prefixCls}-row {
@@ -78,6 +78,13 @@ export const useStyles = createStyles(
         padding-block-start: 0;
       }
     `,
+    verticalLayout: css`
+      &.${prefixCls}-form-item {
+        .${prefixCls}-row {
+          align-items: stretch;
+        }
+      }
+    `,
   }),
 );
 
@@ -91,8 +98,9 @@ export interface FormItemProps extends AntdFormItemProps {
 }
 
 const FormItem = memo<FormItemProps>(
-  ({ desc, tag, minWidth, avatar, className, label, children, divider, ...rest }) => {
-    const { cx, styles } = useStyles(minWidth);
+  ({ desc, tag, minWidth, avatar, className, label, children, divider, layout, ...rest }) => {
+    const { cx, styles } = useStyles({ minWidth });
+    const isVertical = layout === 'vertical';
     return (
       <>
         {divider && <FormDivider />}
@@ -101,9 +109,11 @@ const FormItem = memo<FormItemProps>(
             styles.item,
             Boolean(minWidth) && styles.itemMinWidth,
             !divider && styles.itemNoDivider,
+            isVertical && styles.verticalLayout,
             className,
           )}
           label={<FormTitle avatar={avatar} desc={desc} tag={tag} title={label as any} />}
+          layout={layout}
           {...rest}
         >
           {children}