feat: form组件替换

src/views/components/management/person/index.vue

@@ -20,13 +20,13 @@
       </template>
     </a-table>
     <Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo">
-      <a-form
+      <Form
         class="form"
         :model="userInfoForm"
         :label-col-props="{ span: 3, offset: 0 }"
         :wrapper-col-props="{ span: 21, offset: 0 }"
       >
-        <a-form-item field="head_image" label="头像">
+        <FormItem name="head_image" label="头像">
           <div class="flex items-center">
             <a-avatar :image-url="userInfoForm.file_url" :size="48" />
             <span class="upload-button" @click="triggerFileInput">
@@ -40,17 +40,17 @@
               <Button><icon-upload />上传新头像</Button>
             </span>
           </div>
-        </a-form-item>
-        <a-form-item field="name" label="昵称">
+        </FormItem>
+        <FormItem name="name" label="昵称">
           <a-input v-model.trim="userInfoForm.name" placeholder="请输入昵称" />
-        </a-form-item>
-      </a-form>
+        </FormItem>
+      </Form>
     </Modal>
     <Modal v-model:open="imageVisible" centered title="头像裁剪">
       <VueCropper></VueCropper>
     </Modal>
     <Modal v-model:open="mobileVisible" centered title="修改手机号" @ok="handleUpdateMobile">
-      <a-form
+      <Form
         ref="formRef"
         :model="form"
         class="form"
@@ -59,18 +59,18 @@
         :wrapper-col-props="{ span: 19, offset: 0 }"
         label-align="left"
       >
-        <a-form-item required field="mobile" label="新手机号">
+        <FormItem required name="mobile" label="新手机号">
           <a-input v-model.trim="form.mobile" size="small" placeholder="请输入新的手机号" />
-        </a-form-item>
-        <a-form-item required field="captcha" label="获取验证码">
+        </FormItem>
+        <FormItem required name="captcha" label="获取验证码">
           <a-input v-model.trim="form.captcha" size="small" placeholder="请输入验证码">
             <template #suffix>
               <span v-if="countdown <= 0" @click="sendCaptcha">发送验证码</span>
               <span v-else>{{ countdown }}s</span>
             </template>
           </a-input>
-        </a-form-item>
-      </a-form>
+        </FormItem>
+      </Form>
       <PuzzleVerification
         :show="verificationVisible"
         @submit="handleVerificationSubmit"
@@ -80,7 +80,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { Button } from 'ant-design-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
 import Container from '@/components/container.vue';
 import Modal from '@/components/modal.vue';
 import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';