style: modal fields布局优化

packages/app/src/components/modal-fields/Area.tsx

@@ -1,4 +1,4 @@
-import {Row, Col, Input} from 'antd';
+import {Input} from 'antd';
 import {FC} from 'react';
 import {Controller, UseControllerProps} from 'react-hook-form';
 import Label from './Label';
@@ -20,11 +20,11 @@ const LDModalArea: FC<Props> = function({
   height,
 }) {
   return (
-    <Row gutter={12}>
+    <div className="ld-modal-field">
       <Label required={required} name={name}>
         {label}
       </Label>
-      <Col span={12}>
+      <div className="ld-modal-field-wrapper">
         <Controller
           name={name}
           control={control}
@@ -51,8 +51,8 @@ const LDModalArea: FC<Props> = function({
             );
           }}
         />
-      </Col>
-    </Row>
+      </div>
+    </div>
   );
 };
 

packages/app/src/components/modal-fields/Date.tsx

@@ -1,4 +1,4 @@
-import {Row, Col, DatePicker} from 'antd';
+import {DatePicker} from 'antd';
 import classNames from 'classnames';
 import {FC} from 'react';
 import {Controller, UseControllerProps} from 'react-hook-form';
@@ -13,11 +13,11 @@ type Props = {
 
 const LDModalDate: FC<Props> = function({control, name, label, required}) {
   return (
-    <Row gutter={12}>
+    <div className="ld-modal-field">
       <Label required={required} name={name}>
         {label}
       </Label>
-      <Col span={12}>
+      <div className="ld-modal-field-wrapper">
         <Controller
           name={name}
           control={control}
@@ -41,8 +41,8 @@ const LDModalDate: FC<Props> = function({control, name, label, required}) {
             );
           }}
         />
-      </Col>
-    </Row>
+      </div>
+    </div>
   );
 };
 

packages/app/src/components/modal-fields/Input.tsx

@@ -1,4 +1,4 @@
-import {Row, Col, Input} from 'antd';
+import {Input} from 'antd';
 import classNames from 'classnames';
 import {FC} from 'react';
 import {Controller, UseControllerProps} from 'react-hook-form';
@@ -27,11 +27,11 @@ const LDModalInput: FC<Props> = function({
   tip,
 }) {
   return (
-    <Row gutter={12}>
+    <div className="ld-modal-field">
       <Label required={required} name={name}>
         {label}
       </Label>
-      <Col span={12}>
+      <div className="ld-modal-field-wrapper">
         <Controller
           name={name}
           control={control}
@@ -61,8 +61,8 @@ const LDModalInput: FC<Props> = function({
             );
           }}
         />
-      </Col>
-    </Row>
+      </div>
+    </div>
   );
 };
 

packages/app/src/components/modal-fields/Label.tsx

@@ -1,4 +1,3 @@
-import {Col} from 'antd';
 import classNames from 'classnames';
 import {FC, PropsWithChildren} from 'react';
 
@@ -13,17 +12,15 @@ const ModalFieldLabel: FC<PropsWithChildren<Props>> = function({
   name,
 }) {
   return (
-    <Col span={6} offset={2}>
-      <label
-        className={classNames([
-          'ld-modal-field-label',
-          {'ld-modal-field-required': required ?? true},
-        ])}
-        htmlFor={`modal_field_${name}`}
-      >
-        {children}
-      </label>
-    </Col>
+    <label
+      className={classNames([
+        'ld-modal-field-label',
+        {'ld-modal-field-required': required ?? true},
+      ])}
+      htmlFor={`modal_field_${name}`}
+    >
+      {children}
+    </label>
   );
 };
 

packages/app/src/components/modal-fields/NumberInput.tsx

@@ -1,4 +1,4 @@
-import {Row, Col, InputNumber} from 'antd';
+import {InputNumber} from 'antd';
 import classNames from 'classnames';
 import {FC} from 'react';
 import {Controller, UseControllerProps} from 'react-hook-form';
@@ -27,11 +27,11 @@ const LDModalNumberInput: FC<Props> = function({
   tip,
 }) {
   return (
-    <Row gutter={12}>
+    <div className="ld-modal-field">
       <Label required={required} name={name}>
         {label}
       </Label>
-      <Col span={12}>
+      <div className="ld-modal-field-wrapper">
         <Controller
           name={name}
           control={control}
@@ -61,8 +61,8 @@ const LDModalNumberInput: FC<Props> = function({
             );
           }}
         />
-      </Col>
-    </Row>
+      </div>
+    </div>
   );
 };
 

packages/app/src/components/modal-fields/Select.tsx

@@ -1,5 +1,5 @@
 import {useSelectFilterOptions} from '@hooks';
-import {Row, Col, Select} from 'antd';
+import {Select} from 'antd';
 import classNames from 'classnames';
 import {FC} from 'react';
 import {Controller, UseControllerProps} from 'react-hook-form';
@@ -32,11 +32,11 @@ const LDModalSelect: FC<Props> = function({
   const [options, {setSelectSearch}] = useSelectFilterOptions(data);
 
   return (
-    <Row className="full-width" gutter={12}>
+    <div className="ld-modal-field">
       <Label required={required} name={name}>
         {label}
       </Label>
-      <Col span={12}>
+      <div className="ld-modal-field-wrapper">
         <Controller
           name={name}
           control={control}
@@ -80,8 +80,8 @@ const LDModalSelect: FC<Props> = function({
             );
           }}
         />
-      </Col>
-    </Row>
+      </div>
+    </div>
   );
 };
 

packages/app/src/components/modal-fields/index.css

@@ -10,10 +10,18 @@
   visibility: hidden;
 }
 
+.ld-modal-field {
+  display: flex;
+  gap: 24px;
+  width: 70%;
+  margin: 0 auto;
+}
+
 .ld-modal-field-label {
   display: block;
-  width: 100px;
+  width: 5em;
   height: 32px;
+  font-size: var(--content-font-size);
   line-height: 2.2;
   color: var(--font-color);
   text-align: left;
@@ -26,6 +34,10 @@
   }
 }
 
+.ld-modal-field-wrapper {
+  flex: 1;
+}
+
 .ld-modal-field-required {
   &::before {
     visibility: visible;