feat: form组件替换

src/components/modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal title-align="start" wrapClassName="modal" body-class="body" v-bind="$attrs" centered>
+  <Modal title-align="start" wrapClassName="modal" cancelText="取消" okText="确定" body-class="body" v-bind="$attrs" centered>
     <slot></slot>
   </Modal>
 </template>

src/layouts/components/navbar/components/exit-account-modal/index.vue

@@ -8,7 +8,7 @@
     width="400px"
     wrapClassName="exit-account-modal"
     show-close="false"
-    :footer="false"
+    :footer="null"
     @cancel="onClose"
     centered
   >

src/layouts/components/navbar/components/task-center-modal/components/export-task/index.vue

@@ -1,7 +1,7 @@
 <script lang="jsx">
 import { ref, computed } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Checkbox } from 'ant-design-vue';
-import { Input, Table, TableColumn, Checkbox, Pagination, Tooltip, Notification } from '@arco-design/web-vue';
+import { Input, Table, TableColumn, Pagination, Tooltip, Notification } from '@arco-design/web-vue';
 import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
 import NoData from '@/components/no-data';
 import { getTask, postRedoTask, postBatchDownload, batchQueryTaskStatus } from '@/api/all/common';
@@ -247,10 +247,10 @@ export default {
             <div class="flex items-center">
               <div class="flex items-center">
                 <Checkbox
-                  modelValue={checkedAll.value}
+                  checked={checkedAll.value}
                   indeterminate={indeterminate.value}
                   class="mr-8px"
-                  onChange={handleSelectAll}
+                  onChange={(e) => handleSelectAll(e.target.checked)}
                 />
                 <span class="label mr-24px">
                   已选
@@ -344,7 +344,13 @@ export default {
                           onClick={() => handleDelete(record)}
                         />
                         {record.status !== enumTaskStatus.Exporting && (
-                          <Button type="primary" ghost size="small" class="search-btn" onClick={() => handleDownload(record)}>
+                          <Button
+                            type="primary"
+                            ghost
+                            size="small"
+                            class="search-btn"
+                            onClick={() => handleDownload(record)}
+                          >
                             {record.status === enumTaskStatus.Failed ? '重新导出' : '下载'}
                           </Button>
                         )}

src/layouts/components/navbar/components/task-center-modal/components/import-task/index.vue

@@ -1,7 +1,7 @@
 <script lang="jsx">
 import { ref, computed } from 'vue';
 import { Button } from 'ant-design-vue';
-import { Input, Table, TableColumn, Checkbox, Pagination, Tooltip, Notification } from '@arco-design/web-vue';
+import { Input, Table, TableColumn, Pagination, Tooltip, Notification } from '@arco-design/web-vue';
 import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
 import NoData from '@/components/no-data';
 import { getTask } from '@/api/all/common';
@@ -119,72 +119,6 @@ export default {
 
     return () => (
       <div class="import-task-wrap">
-        {/* 筛选行 */}
-        {/* <div class="filter-row flex mb-16px">
-          <div class="filter-row-item flex items-center">
-            <span class="label">操作人员</span>
-            <Input
-              v-model={query.value.operator_name}
-              class="w-240px"
-              placeholder="请输入操作人员"
-              size="medium"
-              allow-clear
-              onChange={handleSearch}
-              v-slots={{
-                prefix: () => <IconSearch />,
-              }}
-            />
-          </div>
-          <div class="filter-row-item flex items-center">
-            <span class="label">所属模块</span>
-            <Input
-              v-model={query.value.module}
-              class="w-240px"
-              placeholder="请输入所属模块"
-              size="medium"
-              allow-clear
-              onChange={handleSearch}
-              v-slots={{
-                prefix: () => <IconSearch />,
-              }}
-            />
-          </div>
-        </div> */}
-
-        {/* 已选提示行 */}
-        {/* {dataSource.value.length > 0 && selectedRows.value.length > 0 && (
-          <div
-            class={[
-              'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
-              selectedRows.value.length > 0 ? ' selected' : '',
-            ].join('')}
-          >
-            <div class="flex items-center">
-              <div class="flex items-center">
-                <Checkbox
-                  modelValue={checkedAll.value}
-                  indeterminate={indeterminate.value}
-                  class="mr-8px"
-                  onChange={handleSelectAll}
-                />
-                <span class="label mr-24px">
-                  已选
-                  <span class="color-#6D4CFE">{selectedRows.value.length}</span>
-                  个文件
-                </span>
-                <span class="operation-btn" onClick={handleBatchDownload}>
-                  批量下载
-                </span>
-                <span class="operation-btn red" onClick={handleBatchDelete}>
-                  批量删除
-                </span>
-              </div>
-            </div>
-            <IconClose size={16} class="cursor-pointer color-#737478" onClick={handleCloseTip} />
-          </div>
-        )} */}
-
-        {/* 表格 */}
         <Table
           ref="tableRef"
           data={dataSource.value}

src/layouts/components/navbar/components/task-center-modal/index.vue

@@ -5,7 +5,7 @@
     wrapClassName="task-center-modal"
     width="860px"
     :mask-closable="false"
-    :footer="false"
+    :footer="null"
     @cancel="onClose"
     centered
   >

src/styles/components/ant-button.scss

@@ -10,6 +10,7 @@
   padding: 0 16px;
   display: flex;
   align-items: center;
+  justify-content: center;
   &.ant-btn-lg {
     height: 36px;
     padding: 0 20px;

src/styles/components/ant-form.scss

@@ -29,6 +29,11 @@
       }
     }
     .ant-form-item-control {
+      .ant-form-item-explain-error {
+        color: #f64b31;
+        font-size: 12px;
+        line-height: 20px;
+      }
     }
   }
 }

src/styles/components/ant-input.scss

@@ -0,0 +1,40 @@
+.ant-input {
+  border-radius: 4px !important;
+  border-color: #d7d7d9 !important;
+  background-color: #fff !important;
+  height: 32px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  color: var(--Text-4, #211F24);
+  font-family: $font-family-regular;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  &::placeholder {
+    color: var(--Text-4, #939499);
+  }
+  &.ant-input-lg {
+    height: 36px;
+  }
+  &.ant-input-sm {
+    height: 28px;
+  }
+  &:hover {
+    background-color: #fff !important;
+  }
+  &:focus-within,
+  &.arco-input-focus,
+  &.arco-textarea-focus {
+    background-color: var(--color-bg-2) !important;
+    border-color: rgb(var(--primary-6)) !important;
+    box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
+  }
+  &.ant-input-disabled {
+    background-color: var(--BG-200, #f2f3f5) !important;
+  }
+  .ant-input-prefix {
+    padding-right: 0 !important;
+    margin-right: 4px;
+  }
+}

src/styles/components/index.scss

@@ -18,4 +18,6 @@
 @import "./ant-button.scss";
 @import "./ant-table.scss";
 @import "./ant-checkbox.scss";
+@import "./ant-input.scss";
+
 

src/views/agent/work-flow/index.vue

@@ -107,7 +107,7 @@
       </div>
     </div>
 
-    <Modal style="width: 500px" v-model:open="editHistoryVisible">
+    <Modal style="width: 500px" v-model:open="editHistoryVisible" centered>
       <template #title> Title</template>
       <div></div>
     </Modal>

src/views/components/login/index.vue

@@ -17,8 +17,8 @@
         >
           <img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" class="mb-8px" />
           <span class="text-4 color-#737478">AI营销工具</span>
-          <a-form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
+          <Form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
-            <a-form-item field="mobile" hide-label>
+            <FormItem name="mobile">
               <a-input
                 v-model="loginForm.mobile"
                 placeholder="输入手机号"
@@ -28,8 +28,8 @@
                 @blur="validateField('mobile')"
                 @input="clearError('mobile')"
               />
-            </a-form-item>
+            </FormItem>
-            <a-form-item field="captcha" hide-label>
+            <FormItem name="captcha">
               <div
                 class="form-input border border-solid border-#d7d7d9 w-100% h-48px text-14 rounded-4px color-#333 bg-#fff flex justify-between items-center"
               >
@@ -52,19 +52,19 @@
                   >{{ countdown > 0 ? `${countdown}s` : hasGetCode ? '重新发送' : '发送验证码' }}</span
                 >
               </div>
-            </a-form-item>
+            </FormItem>
-            <a-form-item hide-label class="mt-68px mb-16px">
+            <FormItem class="mt-68px mb-16px">
               <Button
                 type="primary"
-                class="w-480 h-48 !text-16px !rounded-8px"
+                class="w-full h-48 !text-16px !rounded-8px"
                 :class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
                 :disabled="disabledSubmitBtn"
                 @click="handleSubmit"
               >
                 {{ isLogin ? '登录' : '注册并开通企业账号' }}
               </Button>
-            </a-form-item>
+            </FormItem>
-          </a-form>
+          </Form>
           <a-space class="text-12px color-#737478 justify-start items-center">
             <Checkbox v-model:checked="hasCheck" class="!text-12px mr-8px"></Checkbox>
             <span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span>
@@ -128,7 +128,7 @@
 </template>
 
 <script setup lang="ts">
-import { Checkbox, Modal, Button } from 'ant-design-vue';
+import { Checkbox, Modal, Button, Form, FormItem } from 'ant-design-vue';
 import PuzzleVerification from './components/PuzzleVerification.vue';
 import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
 import { joinEnterpriseByInviteCode } from '@/api/all';
@@ -165,15 +165,14 @@ const formRules = {
   mobile: [
     {
       required: true,
-      message: '请填写手机号',
+      validator: (_rule: any, value: string) => {
-      trigger: ['blur', 'change'],
+        if (!value) {
-    },
+          return Promise.reject('请填写手机号');
-    {
+        }
-      validator: (value: string, callback: (error?: string) => void) => {
         if (!/^1[3-9]\d{9}$/.test(value)) {
-          callback('手机号格式不正确');
+          return Promise.reject('手机号格式不正确');
         } else {
-          callback();
+          return Promise.resolve();
         }
       },
       trigger: ['blur', 'change'],
@@ -182,15 +181,14 @@ const formRules = {
   captcha: [
     {
       required: true,
-      message: '请填写验证码',
+      validator: (_rule: any, value: string) => {
-      trigger: ['blur', 'change'],
+        if (!value) {
-    },
+          return Promise.reject('请填写验证码');
-    {
+        }
-      validator: (value: string, callback: (error?: string) => void) => {
         if (!/^\d{6}$/.test(value)) {
-          callback('验证码必须是6位数字');
+          return Promise.reject('验证码必须是6位数字');
         } else {
-          callback();
+          return Promise.resolve();
         }
       },
       trigger: ['blur', 'change'],
@@ -222,7 +220,7 @@ const selectAccount = (account: any, index: any) => {
 };
 
 const validateField = (field: string) => {
-  formRef.value.validateField(field);
+  formRef.value.validateFields(field);
 };
 
 const clearError = (field: string) => {
@@ -245,11 +243,9 @@ const getCode = async () => {
   // 先重置验证状态
   formRef.value.clearValidate('mobile');
 
-  const result = await formRef.value.validateField('mobile');
+  formRef.value.validateFields('mobile').then(() => {
-  // 只有当验证通过时才会显示滑块验证
-  if (result === true || result === undefined) {
     isVerificationVisible.value = true;
-  }
+  });
 };
 
 // 验证码验证通过后
@@ -258,8 +254,10 @@ const handleVerificationSubmit = async () => {
   startCountdown();
 
   try {
-    await fetchLoginCaptCha({ mobile: loginForm.mobile });
+    const { code, message } = await fetchLoginCaptCha({ mobile: loginForm.mobile });
-    AMessage.success('验证码发送成功');
+    if (code === 200) {
+      AMessage.success(message);
+    }
   } catch (error) {
     // 重置倒计时
     countdown.value = 0;

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

@@ -14,29 +14,37 @@
         <Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
       </template>
     </a-table>
-    <Modal v-model:open="infoVisible" width="480px" centered title="修改企业名称" :okText="okText" @ok="handleOk">
+    <Modal
+      v-model:open="infoVisible"
+      width="480px"
+      centered
+      title="修改企业名称"
+      :okText="okText"
+      @ok="handleOk"
+      cancelText="取消"
+    >
       <p class="tips">
         企业名称只能修改2次，请谨慎操作。<span
           >（剩余{{ enterpriseInfo!.update_name_quota - enterpriseInfo!.used_update_name_count }}次）
         </span>
       </p>
-      <a-form
+      <Form
         :model="form"
         class="form"
         :label-col-props="{ span: 6, offset: 0 }"
         :wrapper-col-props="{ span: 18, offset: 0 }"
         label-align="left"
       >
-        <a-form-item required field="name" label="新企业名称">
+        <FormItem required name="name" label="新企业名称">
           <a-input v-model.trim="form.name" size="small" :disabled="!canUpdate" placeholder="请输入新企业名称" />
-        </a-form-item>
+        </FormItem>
-      </a-form>
+      </Form>
     </Modal>
     <CustomerServiceModal v-model:open="customerServiceVisible" centered />
   </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 { ref, reactive, computed } from 'vue';

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>
+        </FormItem>
-        <a-form-item field="name" label="昵称">
+        <FormItem name="name" label="昵称">
           <a-input v-model.trim="userInfoForm.name" placeholder="请输入昵称" />
-        </a-form-item>
+        </FormItem>
-      </a-form>
+      </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>
+        </FormItem>
-        <a-form-item required field="captcha" label="获取验证码">
+        <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>
+        </FormItem>
-      </a-form>
+      </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';

src/views/material-center/components/finished-products/manuscript/check/components/content-card/index.vue

@@ -1,20 +1,9 @@
 <script lang="jsx">
 import axios from 'axios';
 import { Swiper, SwiperSlide } from 'swiper/vue';
-import { Button } from 'ant-design-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
 import { IconLoading } from '@arco-design/web-vue/es/icon';
-import {
+import { Image, Input, Textarea, Tabs, Upload, TabPane, Spin, Message as AMessage } from '@arco-design/web-vue';
-  Image,
-  Form,
-  FormItem,
-  Input,
-  Textarea,
-  Tabs,
-  Upload,
-  TabPane,
-  Spin,
-  Message as AMessage,
-} from '@arco-design/web-vue';
 import TextOverTips from '@/components/text-over-tips';
 import HighlightTextarea from './highlight-textarea';
 
@@ -99,15 +88,7 @@ export default {
       activeTab.value = key;
     };
     const validate = () => {
-      return new Promise((resolve, reject) => {
+      return formRef.value?.validate();
-        formRef.value?.validate((errors) => {
-          if (errors) {
-            reject();
-          } else {
-            resolve();
-          }
-        });
-      });
     };
     const reset = () => {
       formRef.value?.resetFields?.();
@@ -223,7 +204,7 @@ export default {
     const renderTextForm = () => {
       return (
         <Form ref={formRef} model={props.modelValue} rules={FORM_RULES} layout="vertical" auto-label-width>
-          <FormItem label="标题" field="title" required>
+          <FormItem label="标题" name="title" required>
             <Input
               v-model={props.modelValue.title}
               placeholder="请输入标题"
@@ -233,7 +214,7 @@ export default {
               disabled={isDisabled.value}
             />
           </FormItem>
-          <FormItem label="作品描述" field="content" class="flex-1 content-form-item">
+          <FormItem label="作品描述" name="content" class="flex-1 content-form-item">
             <HighlightTextarea
               v-model={props.modelValue.content}
               disabled={isDisabled.value}

src/views/material-center/components/finished-products/manuscript/check/components/content-card/style.scss

@@ -38,32 +38,36 @@
         display: none;
       }
     }
-    :deep(.arco-form) {
+    :deep(.ant-form) {
       height: 100%;
       display: flex;
       flex-direction: column;
-      .arco-form-item {
+      .ant-form-item {
         margin-bottom: 24px;
-        .arco-form-item-label-col {
+        .ant-form-item-label-col {
-          .arco-form-item-label {
+          .ant-form-item-label {
             color: #939499;
           }
         }
       }
       .content-form-item {
         margin-bottom: 0;
+
+        .ant-row {
+          height: 100%;
           display: flex;
           flex-direction: column;
-        .arco-form-item-wrapper-col {
+          .ant-form-item-control-input {
             flex: 1;
-          .arco-form-item-content-wrapper,
+            .ant-form-item-control-input-content,
-          .arco-form-item-content,
+            .ant-form-item-control-input-content,
-          .arco-textarea-wrapper {
+            .ant-textarea-wrapper {
               height: 100%;
             }
           }
         }
       }
+    }
     .upload-box {
       display: flex;
       width: 100px;

src/views/material-center/components/finished-products/manuscript/components/edit-form/img-box.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-form-item field="files">
+  <FormItem name="files">
     <template #label>
       <div class="flex items-center">
         <span class="cts !color-#211F24 mr-4px">图片</span>
@@ -44,11 +44,12 @@
         </a-upload>
       </VueDraggable>
     </div>
-  </a-form-item>
+  </FormItem>
 </template>
 
 <script setup>
 import { VueDraggable } from 'vue-draggable-plus';
+import { FormItem} from 'ant-design-vue';
 
 const props = defineProps({
   files: {

src/views/material-center/components/finished-products/manuscript/components/edit-form/index.vue

@@ -1,7 +1,7 @@
 <script lang="jsx">
 import axios from 'axios';
-import { Button } from 'ant-design-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
-import { Form, FormItem, Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
+import { Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
 // import CommonSelect from '@/components/common-select';
 // import { VueDraggable } from 'vue-draggable-plus';
 import TextOverTips from '@/components/text-over-tips';
@@ -190,15 +190,7 @@ export default {
     };
 
     const validate = () => {
-      return new Promise((resolve, reject) => {
+      return formRef.value?.validate();
-        formRef.value?.validate((errors) => {
-          if (errors) {
-            reject(formData.value);
-          } else {
-            resolve();
-          }
-        });
-      });
     };
 
     const resetForm = () => {
@@ -239,7 +231,7 @@ export default {
       const isEnd = formData.value.videoInfo.uploadStatus === ENUM_UPLOAD_STATUS.END;
       return (
         <FormItem
-          field="files"
+          name="files"
           v-slots={{
             label: () => (
               <div class="flex items-center">
@@ -316,10 +308,11 @@ export default {
 
     return () => (
       <Form ref={formRef} model={formData.value} rules={props.rules} layout="vertical" auto-label-width>
-        <FormItem label="标题" field="title" required>
+        <FormItem label="标题" name="title" required>
           <Input
             v-model={formData.value.title}
             onInput={() => {
+              console.log('onInput')
               onChange();
               emit('reValidate');
             }}
@@ -331,7 +324,7 @@ export default {
           />
         </FormItem>
 
-        <FormItem label="作品描述" field="content">
+        <FormItem label="作品描述" name="content">
           <Textarea
             v-model={formData.value.content}
             onInput={onChange}
@@ -353,7 +346,7 @@ export default {
           />
         )}
 
-        {/* <FormItem label="所属项目" field="project_ids">
+        {/* <FormItem label="所属项目" name="project_ids">
           <CommonSelect
             v-model={formData.value.project_ids}
             onChange={() => emit('change')}

src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue

@@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
-import { Table, TableColumn, Pagination, Tooltip, Modal } from '@arco-design/web-vue';
+import { Table, TableColumn, Pagination, Tooltip,  } from '@arco-design/web-vue';
 import CommonSelect from '@/components/common-select';
 import TextOverTips from '@/components/text-over-tips';
 import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal';
@@ -132,7 +132,7 @@ export default {
           onCancel={onClose}
           centered
           destroyOnClose
-          modalClass="share-manuscript-modal"
+          wrapClassName="share-manuscript-modal"
           v-slots={{
             footer: () => (
               <div class="flex justify-between w-full items-center">

src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue

@@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Button, Modal } from 'ant-design-vue';
+import { Button, Modal, Form, FormItem } from 'ant-design-vue';
-import { Form, FormItem, Input, Message as AMessage } from '@arco-design/web-vue';
+import { Input, Message as AMessage } from '@arco-design/web-vue';
 import CommonSelect from '@/components/common-select';
 
 import { useClipboard } from '@vueuse/core';
@@ -66,8 +66,7 @@ export default {
     };
 
     const onGenerateLink = () => {
-      formRef.value.validate().then(async (errors) => {
+      formRef.value.validate().then(async () => {
-        if (!errors) {
         try {
           loading.value = true;
           const { code, data } = await postShareLinksGenerate(formData.value);
@@ -84,7 +83,6 @@ export default {
         } finally {
           loading.value = false;
         }
-        }
       });
     };
     const open = (workIds) => {
@@ -115,8 +113,15 @@ export default {
           ),
         }}
       >
-        <Form ref={formRef} rules={rules} model={formData.value} auto-label-width>
+        <Form
-          <FormItem label="有效期" prop="days" row-class="!items-center">
+          ref={formRef}
+          rules={rules}
+          model={formData.value}
+          labelAlign="right"
+          labelCol={{ span: 4 }}
+          wrapperCol={{ span: 20 }}
+        >
+          <FormItem label="有效期" name="days" row-class="!items-center">
             <CommonSelect
               v-model={formData.value.days}
               options={OPTIONS}
@@ -129,7 +134,7 @@ export default {
           </FormItem>
           <FormItem
             label="分享对象"
-            prop="receiver"
+            name="receiver"
             row-class="!items-center"
             v-slots={{
               label: () => (

src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/style.scss

@@ -18,7 +18,7 @@
       font-size: 14px;
     }
   }
-  .arco-modal-body {
+  .ant-modal-body {
     height: 464px;
     display: flex;
     flex-direction: column;

src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue

@@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Modal, Button } from 'ant-design-vue';
+import { Modal, Button, Form, FormItem } from 'ant-design-vue';
-import { Form, FormItem, Input, RadioGroup, Radio, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
+import { Input, RadioGroup, Radio, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
 import { useClipboard } from '@vueuse/core';
 import { getWriterLinksGenerate, getTemplateUrl, postWorksByLink, postWorksByFile } from '@/api/all/generationWorkshop';
 import { generateFullUrl } from '@/utils/tools';
@@ -109,8 +109,7 @@ export default {
         handleHandwriteSubmit();
         return;
       }
-      formRef.value?.validate(async (errors) => {
+      formRef.value?.validate().then(async () => {
-        if (!errors) {
         taskStatus.value = TASK_STATUS.LOADING;
         const { link } = form.value;
         const { code, data } = await postWorksByLink({ link });
@@ -118,7 +117,6 @@ export default {
           taskStatus.value = TASK_STATUS.SUCCESS;
           works.value = data ? [data] : [];
         }
-        }
       });
     }, 300);
 
@@ -212,7 +210,7 @@ export default {
 
     // 渲染链接上传表单
     const renderLinkForm = () => (
-      <FormItem label="链接地址" field="link" required>
+      <FormItem label="链接地址" name="link" required>
         <Textarea
           v-model={form.value.link}
           size="large"
@@ -224,7 +222,7 @@ export default {
 
     // 渲染手写上传表单
     const renderHandwriteForm = () => (
-      <FormItem label="上传链接" field="writerLink">
+      <FormItem label="上传链接" name="writerLink">
         <Input v-model={form.value.writerLink} placeholder="请输入上传链接" disabled size="large" />
       </FormItem>
     );
@@ -368,10 +366,7 @@ export default {
         destroyOnClose
         centered
         onCancel={onClose}
-        footer={!(isDefault.value && isLocal.value)}
+        footer={(isDefault.value && isLocal.value) ? null : renderFooterButtons()}
-        v-slots={{
-          footer: () => renderFooterButtons(),
-        }}
       >
         <Form
           ref={formRef}

src/views/property-marketing/brands/brand-materials/index.vue

@@ -46,27 +46,27 @@
           <template #title>
             <span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
           </template>
-          <a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
+          <Form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width labelAlign="right" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
-            <a-form-item field="name" label="品牌名称">
+            <FormItem name="name" label="品牌名称">
               <a-input v-model="form.name" class="h-36px" placeholder="请输入..." />
-            </a-form-item>
+            </FormItem>
-            <a-form-item field="logo" class="form-item-logo" label="标准版Logo">
+            <FormItem name="logo" class="form-item-logo" label="标准版Logo">
-              <a-space>
+              <div class="inline-flex">
                 <ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
-              </a-space>
+              </div>
-              <a-space>
+              <div class="inline-flex">
                 <span class="form-tip">（品牌常规展示使用，支持PNG，JPG格式）</span>
-              </a-space>
+              </div>
-            </a-form-item>
+            </FormItem>
-            <a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
+            <FormItem name="otherLogos" class="form-item-logo" label="其他Logo">
               <ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
-            </a-form-item>
+            </FormItem>
-            <a-form-item field="slogan" label="Slogan">
+            <FormItem name="slogan" label="Slogan">
               <a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
-            </a-form-item>
+            </FormItem>
-          </a-form>
+          </Form>
           <template #footer>
-            <Button @click="handleModalCancel" class="mr-8px">取消</Button>
+            <Button @click="handleModalCancel">取消</Button>
             <Button type="primary" @click="handleModalOk">{{ btn_str }}</Button>
           </template>
         </Modal>
@@ -128,7 +128,7 @@
 import { ref, computed, reactive, onMounted } from 'vue';
 import { Message } from '@arco-design/web-vue';
 import { IconDelete } from '@arco-design/web-vue/es/icon';
-import { Button, Modal } from 'ant-design-vue';
+import { Button, Modal, Form, FormItem } from 'ant-design-vue';
 
 import {
   addMaterials,
@@ -233,7 +233,6 @@ function handleModalOk() {
   formRef.value
     .validate()
     .then((valid) => {
-      if (!valid) {
       if (form.id) {
         updateMaterials(form.id, form).then(() => {
           Message.success('修改成功');
@@ -246,7 +245,6 @@ function handleModalOk() {
         });
       }
       modalVisible.value = false;
-      }
     })
     .catch((error) => {
       console.error('验证失败:', error);

src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue

@@ -10,7 +10,7 @@
     centered
     wrapClassName="authorized-account-modal"
     :maskClosable="false"
-    :footer="modalState !== MODAL_STATE.LOADING"
+    :footer="modalState === MODAL_STATE.LOADING ? null : footer"
     @cancel="close"
   >
     <div class="flex flex-col items-center">

src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue

@@ -14,8 +14,8 @@
     <div class="mb-16px t1">
       {{ `已选${accountTagList.length}个账号` }}
     </div>
-    <a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
+    <Form ref="formRef" :model="form" layout="horizontal" auto-label-width>
-      <a-form-item label="编辑方式" required>
+      <FormItem label="编辑方式" required>
         <a-radio-group v-model="editType">
           <a-radio value="all">
             <div class="flex items-center">
@@ -27,8 +27,8 @@
           </a-radio>
           <a-radio value="each">分别编辑</a-radio>
         </a-radio-group>
-      </a-form-item>
+      </FormItem>
-      <a-form-item label="选择标签" required>
+      <FormItem label="选择标签" required>
         <template v-if="editType === 'all'">
           <div class="flex items-center w-100%">
             <a-select
@@ -44,7 +44,7 @@
             <span class="ml-12px">{{ `${form.tags.length}/5` }}</span>
           </div>
         </template>
-      </a-form-item>
+      </FormItem>
 
       <!-- 分别编辑 -->
       <template v-if="editType === 'each'">
@@ -75,7 +75,7 @@
           </template>
         </a-table>
       </template>
-    </a-form>
+    </Form>
     <template #footer>
       <Button size="large" @click="onClose">取消</Button>
       <Button type="primary" size="large" @click="onSubmit">确定</Button>
@@ -85,7 +85,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue';
-import { Button, Modal } from 'ant-design-vue';
+import { Button, Modal, Form, FormItem } from 'ant-design-vue';
 import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/icon-question.png';

src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue

@@ -11,11 +11,11 @@
     centered
     @cancel="onClose"
   >
-    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+    <Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
-      <a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
+      <FormItem :label="isEdit ? '分组名称' : '新分组名称'" name="name" required>
         <a-input v-model="form.name" placeholder="请输入…" />
-      </a-form-item>
+      </FormItem>
-    </a-form>
+    </Form>
     <template #footer>
       <Button @click="onClose">取消</Button>
       <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
@@ -25,7 +25,7 @@
 
 <script setup>
 import { ref, watch, nextTick } from 'vue';
-import { Button, Modal } from 'ant-design-vue';
+import { Button, Modal, Form, FormItem } from 'ant-design-vue';
 import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';
 
 const emits = defineEmits(['success', 'close']);
@@ -63,8 +63,7 @@ const open = (record = {}) => {
 };
 
 async function onSubmit() {
-  formRef.value.validate(async (errors) => {
+  formRef.value.validate().then(async () => {
-    if (!errors) {
     const _fn = isEdit.value ? putGroup : postAccountGroups;
     const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
     const { code } = await _fn(_params);
@@ -73,7 +72,6 @@ async function onSubmit() {
       emits('success');
       onClose();
     }
-    }
   });
 }
 

src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue

@@ -7,7 +7,7 @@
     v-model:open="visible"
     width="900px"
     wrapClassName="account-manage-modal"
-    :footer="false"
+    :footer="null"
     centered
     title="分组管理"
     :maskClosable="false"

src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue

@@ -10,7 +10,7 @@
     title="重新授权"
     wrapClassName="reauthorize-account-modal"
     :maskClosable="false"
-    :footer="modalState !== MODAL_STATE.LOADING"
+    :footer="modalState === MODAL_STATE.LOADING ? null : footer"
     @cancel="close"
   >
     <div class="flex flex-col items-center">

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue

@@ -7,11 +7,11 @@
     centered
     @cancel="onClose"
   >
-    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+    <Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
-      <a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
+      <FormItem :label="isEdit ? '标签名称' : '新标签名称'" name="name" required>
         <a-input v-model="form.name" placeholder="请输入…" />
-      </a-form-item>
+      </FormItem>
-    </a-form>
+    </Form>
     <template #footer>
       <Button @click="onClose">取消</Button>
       <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref, nextTick } from 'vue';
-import { Button, Modal } from 'ant-design-vue';
+import { Button, Modal, Form, FormItem } from 'ant-design-vue';
 import { postAccountTags, putTag } from '@/api/all/propertyMarketing';
 
 const emits = defineEmits(['success', 'close']);
@@ -59,8 +59,8 @@ const open = (record = {}) => {
 };
 
 async function onSubmit() {
-  formRef.value.validate(async (errors) => {
+  formRef.value.validate()
-    if (!errors) {
+    .then(async () => {
       const _fn = isEdit.value ? putTag : postAccountTags;
       const _params = isEdit.value ? { id: tagId.value, ...form.value } : form.value;
       const { code } = await _fn(_params);
@@ -69,8 +69,7 @@ async function onSubmit() {
         emits('success');
         onClose();
       }
-    }
+    })
-  });
 }
 
 defineExpose({ open });

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue

@@ -7,7 +7,7 @@
     v-model:open="visible"
     width="800px"
     wrapClassName="tags-manage-modal"
-    :footer="false"
+    :footer="null"
     centered
     title="标签管理"
     :maskClosable="false"

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss

@@ -3,14 +3,14 @@
 .tags-manage-modal {
   border-radius: 8px;
 
-  .arco-modal-body {
+  .ant-modal-body {
     // padding: 24px 24px 44px !important;
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    .arco-btn {
+    .arcanto-btn {
       width: fit-content;
-      .arco-btn-icon {
+      .ant-btn-icon {
         line-height: 16px;
       }
     }

src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue

@@ -144,12 +144,10 @@ const handleEdit = () => {
 
 const setCurrent = async (current) => {
   if (isFirstStep.value) {
-    const valid = await compRef.value.validate();
+    compRef.value.validate().then(() => {
-    if (!valid) {
-      return;
-    }
-  }
       currentStep.value = current;
+    });
+  }
 };
 const onPrev = () => {
   currentStep.value--;

src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue

@@ -1,12 +1,12 @@
 <template>
-  <a-form ref="formRef" :model="formQuery" :rules="rules" layout="horizontal" auto-label-width class="h-448px">
+  <Form ref="formRef" :model="formQuery" :rules="rules" layout="horizontal" auto-label-width class="h-448px">
-    <a-form-item label="项目名称" required field="name">
+    <FormItem label="项目名称" required name="name">
       <a-input v-model="formQuery.name" placeholder="请输入项目名称" size="large" class="!w-400px" />
-    </a-form-item>
+    </FormItem>
-    <a-form-item label="项目预算" field="budget">
+    <FormItem label="项目预算" name="budget">
       <a-input v-model="formQuery.budget" placeholder="请输入项目预算" size="large" class="!w-400px" />
-    </a-form-item>
+    </FormItem>
-    <a-form-item label="项目目标" field="target">
+    <FormItem label="项目目标" name="target">
       <a-textarea
         v-model="formQuery.target"
         placeholder="请输入项目目标"
@@ -14,8 +14,8 @@
         show-word-limit
         class="h-154px"
       />
-    </a-form-item>
+    </FormItem>
-    <a-form-item label="项目背景" field="background">
+    <FormItem label="项目背景" name="background">
       <a-textarea
         v-model="formQuery.background"
         placeholder="请输入项目背景"
@@ -23,11 +23,13 @@
         show-word-limit
         class="h-154px"
       />
-    </a-form-item>
+    </FormItem>
-  </a-form>
+  </Form>
 </template>
 
 <script setup>
+import { Form, FormItem } from 'ant-design-vue';
+
 const props = defineProps({
   formQuery: {
     type: Object,
@@ -42,8 +44,7 @@ const rules = {
 };
 
 const validate = async () => {
-  const errors = await formRef.value.validate();
+  return formRef.value.validate()
- return !errors
 };
 
 const reset = () => {

src/views/property-marketing/put-account/account-data/components/group-manage-modal/add-group.vue

@@ -11,11 +11,11 @@
     centered
     @cancel="onClose"
   >
-    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+    <Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
-      <a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
+      <FormItem :label="isEdit ? '分组名称' : '新分组名称'" name="name" required>
         <a-input v-model="form.name" placeholder="请输入…" />
-      </a-form-item>
+      </FormItem>
-    </a-form>
+    </Form>
     <template #footer>
       <Button @click="onClose">取消</Button>
       <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
@@ -25,7 +25,7 @@
 
 <script setup>
 import { ref, watch, nextTick } from 'vue';
-import { Button, Modal } from 'ant-design-vue';
+import { Button, Modal, Form, FormItem } from 'ant-design-vue';
 import { postPlacementAccountProjectGroups, putPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
 
 const emits = defineEmits(['success', 'close']);
@@ -63,8 +63,7 @@ const open = (record = {}) => {
 };
 
 async function onSubmit() {
-  formRef.value.validate(async (errors) => {
+  formRef.value.validate().then(async () => {
-    if (!errors) {
     const _fn = isEdit.value ? putPlacementAccountProjectGroups : postPlacementAccountProjectGroups;
     const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
     const { code } = await _fn(_params);
@@ -73,7 +72,6 @@ async function onSubmit() {
       emits('success');
       onClose();
     }
-    }
   });
 }
 

src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue

@@ -7,7 +7,7 @@
     v-model:open="visible"
     width="900px"
     wrapClassName="put-account-group-manage-modal"
-    :footer="false"
+    :footer="null"
     title="分组管理"
     centered
     :maskClosable="false"

src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue

@@ -13,17 +13,25 @@
     centered
     @cancel="onClose"
   >
-    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+    <Form
-      <a-form-item v-if="!isEdit" label="上传方式" required>
+      ref="formRef"
+      :model="form"
+      :rules="formRules"
+      layout="horizontal"
+      labelAlign="right"
+      :labelCol="{ span: 5 }"
+      :wrapperCol="{ span: 19 }"
+    >
+      <FormItem v-if="!isEdit" label="上传方式" required>
         <a-radio-group v-model="uploadType">
           <a-radio value="manual">手动添加账户</a-radio>
           <a-radio value="batch">批量导入账户</a-radio>
         </a-radio-group>
-      </a-form-item>
+      </FormItem>
 
       <!-- 批量导入账户模式下的内容 -->
       <template v-if="isBatchImport">
-        <a-form-item label="账户文件" required>
+        <FormItem label="账户文件" required>
           <!-- 默认状态 -->
           <div class="upload-block">
             <template v-if="uploadStatus === UploadStatus.DEFAULT">
@@ -72,33 +80,33 @@
               <span class="dt">下载账户导入模板.xlsx</span>
             </div>
           </div>
-        </a-form-item>
+        </FormItem>
       </template>
 
       <!-- 手动添加账户 -->
       <template v-else>
         <template v-if="isEdit">
-          <a-form-item label="账户名称" field="name">
+          <FormItem label="账户名称" name="name">
-            <a-input v-model="form.name" placeholder="请输入..." size="large" disabled />
+            <Input v-model:value="form.name" placeholder="请输入..." disabled />
-          </a-form-item>
+          </FormItem>
-          <a-form-item label="账户ID" field="account_id">
+          <FormItem label="账户ID" name="account_id">
-            <a-input v-model="form.account_id" placeholder="请输入..." size="large" disabled />
+            <Input v-model:value="form.account_id" placeholder="请输入..." size="large" disabled />
-          </a-form-item>
+          </FormItem>
-          <a-form-item label="状态" field="status">
+          <FormItem label="状态" name="status">
             <StatusBox :status="form.status" />
-          </a-form-item>
+          </FormItem>
         </template>
 
-        <a-form-item label="手机号" field="mobile" required>
+        <FormItem label="手机号" name="mobile">
-          <a-input v-model="form.mobile" placeholder="请输入..." size="large" />
+          <Input v-model:value="form.mobile" placeholder="请输入..." size="large" />
-        </a-form-item>
+        </FormItem>
-        <a-form-item label="运营人员" field="operator_name" required>
+        <FormItem label="运营人员" name="operator_name">
-          <a-input v-model="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
+          <Input v-model:value="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
-        </a-form-item>
+        </FormItem>
-        <a-form-item label="号码持有人" field="holder_name" required>
+        <FormItem label="号码持有人" name="holder_name">
-          <a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
+          <Input v-model:value="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
-        </a-form-item>
+        </FormItem>
-        <a-form-item label="运营平台" :required="!isEdit">
+        <FormItem label="运营平台" :required="!isEdit">
           <div v-if="isEdit" class="flex items-center">
             <img :src="PLATFORM_LIST[form.platform].icon" width="14" height="14" class="mr-4px" />
             <span>{{ PLATFORM_LIST[form.platform].label }}</span>
@@ -111,19 +119,19 @@
               </div>
             </a-radio>
           </a-radio-group>
-        </a-form-item>
+        </FormItem>
-        <a-form-item label="所属项目" field="project_ids">
+        <FormItem label="所属项目" name="project_ids">
           <CommonSelect v-model="form.project_ids" :options="projects" placeholder="请选择…" size="large" />
-        </a-form-item>
+        </FormItem>
         <template v-if="isEdit">
-          <a-form-item label="账户总消耗" field="total_use_amount">
+          <FormItem label="账户总消耗" name="total_use_amount">
-            <a-input v-model="form.total_use_amount" placeholder="请输入..." size="large" disabled />
+            <Input v-model:value="form.total_use_amount" placeholder="请输入..." size="large" disabled />
-          </a-form-item>
+          </FormItem>
-          <a-form-item label="账户余额" field="balance_amount">
+          <FormItem label="账户余额" name="balance_amount">
-            <a-input v-model="form.balance_amount" placeholder="请输入..." size="large" disabled />
+            <Input v-model:value="form.balance_amount" placeholder="请输入..." size="large" disabled />
-          </a-form-item>
+          </FormItem>
         </template>
-        <a-form-item label="同步项目数据" field="is_sync_project">
+        <FormItem label="同步项目数据" name="is_sync_project">
           <template #label>
             <span class="label">同步项目数据</span>
             <a-tooltip content="同步项目数据后，账户数据将同步到项目中">
@@ -131,9 +139,9 @@
             </a-tooltip>
           </template>
           <a-switch v-model="form.is_sync_project" size="medium" :checked-value="1" :unchecked-value="0" />
-        </a-form-item>
+        </FormItem>
       </template>
-    </a-form>
+    </Form>
     <template #footer>
       <Button size="large" @click="onClose">取消</Button>
       <Button type="primary" size="large" @click="onSubmit" :loading="importLoading">
@@ -147,10 +155,8 @@
 </template>
 
 <script setup>
-// 添加Modal导入
+import { Modal, Form, FormItem, Button, Input } from 'ant-design-vue';
-import { Modal } from 'ant-design-vue';
 import { ref, defineEmits } from 'vue';
-import { Button } from 'ant-design-vue';
 
 import AuthorizedAccountModal from '../authorized-account-modal';
 // import ImportPromptModal from '../import-prompt-modal';
@@ -205,26 +211,26 @@ const form = ref(cloneDeep(INITIAL_FORM));
 const projects = ref([]);
 const importLoading = ref(false);
 
-const rules = {
+const formRules = {
   mobile: [
     {
       required: true,
-      message: '请填写手机号',
       trigger: ['blur', 'change'],
-    },
+      validator: (_rule, value) => {
-    {
+        if (!value) {
-      validator: (value, callback) => {
+          return Promise.reject('请填写手机号');
+        }
+        console.log({ value });
         if (!/^1[3-9]\d{9}$/.test(value)) {
-          callback('手机号格式不正确');
+          return Promise.reject('手机号格式不正确');
         } else {
-          callback();
+          return Promise.resolve();
         }
       },
-      trigger: ['blur', 'change'],
     },
   ],
-  operator_name: [{ required: true, message: '请输入运营人员' }],
+  operator_name: [{ required: true, message: '请输入运营人员', trigger: ['blur', 'change'] }],
-  holder_name: [{ required: true, message: '请输入号码持有人' }],
+  holder_name: [{ required: true, message: '请输入号码持有人', trigger: ['blur', 'change'] }],
 };
 
 const isBatchImport = computed(() => uploadType.value === 'batch');
@@ -353,10 +359,8 @@ async function onSubmit() {
     return;
   }
 
-  formRef.value.validate(async (errors) => {
+  formRef.value.validate().then(() => {
-    if (!errors) {
     isEdit.value ? handleEdit() : handleAdd();
-    }
   });
 }
 

src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss

@@ -4,7 +4,7 @@
   .w-240px {
     width: 240px !important;
   }
-  .arco-modal-body {
+  .ant-modal-body {
     .upload-block {
       width: 100%;
       .dt {

src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue

@@ -9,7 +9,7 @@
     title="获取凭证"
     wrapClassName="authorized-account-modal"
     :maskClosable="false"
-    :footer="!isLoading"
+    :footer="isLoading ? null : footer"
     centered
     @cancel="close"
   >
@@ -45,14 +45,14 @@
           <p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
           <p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
         </template>
-        <a-form v-else ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+        <Form v-else ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
-          <a-form-item label="账户" field="account">
+          <FormItem label="账户" name="account">
             <a-input v-model="form.account" placeholder="请输入..." size="large" />
-          </a-form-item>
+          </FormItem>
-          <a-form-item label="密码" field="password">
+          <FormItem label="密码" name="password">
             <a-input-password v-model="form.password" placeholder="请输入..." size="large" />
-          </a-form-item>
+          </FormItem>
-        </a-form>
+        </Form>
       </template>
     </div>
     <template #footer>
@@ -66,7 +66,7 @@
 
 <script setup>
 // 添加Modal导入
-import { Modal } from 'ant-design-vue';
+import { Modal, Form, FormItem } from 'ant-design-vue';
 import dayjs from 'dayjs';
 import { Button } from 'ant-design-vue';
 import { defineExpose, ref, computed, defineEmits } from 'vue';
@@ -283,8 +283,7 @@ const handleOk = () => {
   }
 
   // 未完成，校验表单
-  formRef.value.validate(async (errors) => {
+  formRef.value.validate().then(() => {
-    if (errors) return;
     if (shouldSelectSubAccount.value) {
       visible.value = false;
       selectSubAccountModalRef.value.open({

src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/index.vue

@@ -1,20 +1,9 @@
 <script lang="jsx">
 import axios from 'axios';
 import { Swiper, SwiperSlide } from 'swiper/vue';
-import { Button } from 'ant-design-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
 import { IconLoading } from '@arco-design/web-vue/es/icon';
-import {
+import { Image, Input, Textarea, Tabs, Upload, TabPane, Spin, Message as AMessage } from '@arco-design/web-vue';
-  Image,
-  Form,
-  FormItem,
-  Input,
-  Textarea,
-  Tabs,
-  Upload,
-  TabPane,
-  Spin,
-  Message as AMessage,
-} from '@arco-design/web-vue';
 import TextOverTips from '@/components/text-over-tips';
 
 import 'swiper/css';
@@ -98,15 +87,7 @@ export default {
       activeTab.value = key;
     };
     const validate = () => {
-      return new Promise((resolve, reject) => {
+      return formRef.value?.validate();
-        formRef.value?.validate((errors) => {
-          if (errors) {
-            reject();
-          } else {
-            resolve();
-          }
-        });
-      });
     };
     const reset = () => {
       formRef.value?.resetFields?.();
@@ -222,7 +203,7 @@ export default {
     const renderTextForm = () => {
       return (
         <Form ref={formRef} model={props.modelValue} rules={FORM_RULES} layout="vertical" auto-label-width>
-          <FormItem label="标题" field="title" required>
+          <FormItem label="标题" name="title" required>
             <Input
               v-model={props.modelValue.title}
               placeholder="请输入标题"
@@ -232,7 +213,7 @@ export default {
               disabled={isDisabled.value}
             />
           </FormItem>
-          <FormItem label="作品描述" field="content" class="flex-1 content-form-item">
+          <FormItem label="作品描述" name="content" class="flex-1 content-form-item">
             <Textarea
               v-model={props.modelValue.content}
               placeholder="请输入作品描述"

src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/style.scss

@@ -37,32 +37,36 @@
         display: none;
       }
     }
-    :deep(.arco-form) {
+    :deep(.ant-form) {
       height: 100%;
       display: flex;
       flex-direction: column;
-      .arco-form-item {
+      .ant-form-item {
         margin-bottom: 24px;
-        .arco-form-item-label-col {
+        .ant-form-item-label-col {
-          .arco-form-item-label {
+          .ant-form-item-label {
             color: #939499;
           }
         }
       }
       .content-form-item {
         margin-bottom: 0;
+
+        .ant-row {
+          height: 100%;
           display: flex;
           flex-direction: column;
-        .arco-form-item-wrapper-col {
+          .ant-form-item-control-input {
             flex: 1;
-          .arco-form-item-content-wrapper,
+            .ant-form-item-control-input-content,
-          .arco-form-item-content,
+            .ant-form-item-control-input-content,
-          .arco-textarea-wrapper {
+            .ant-textarea-wrapper {
               height: 100%;
             }
           }
         }
       }
+    }
     .upload-box {
       display: flex;
       width: 100px;

src/views/writer-material-center/components/finished-products/manuscript/components/edit-form/img-box.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-form-item field="files">
+  <FormItem name="files">
     <template #label>
       <div class="flex items-center">
         <span class="cts !color-#211F24 mr-4px">图片</span>
@@ -44,11 +44,12 @@
         </a-upload>
       </VueDraggable>
     </div>
-  </a-form-item>
+  </FormItem>
 </template>
 
 <script setup>
 import { VueDraggable } from 'vue-draggable-plus';
+import { FormItem} from 'ant-design-vue';
 
 const props = defineProps({
   files: {

src/views/writer-material-center/components/finished-products/manuscript/components/edit-form/index.vue

@@ -1,7 +1,7 @@
 <script lang="jsx">
 import axios from 'axios';
-import { Button } from 'ant-design-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
-import { Form, FormItem, Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
+import { Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
 import CommonSelect from '@/components/common-select';
 import { VueDraggable } from 'vue-draggable-plus';
 import TextOverTips from '@/components/text-over-tips';
@@ -192,15 +192,7 @@ export default {
     };
 
     const validate = () => {
-      return new Promise((resolve, reject) => {
+      return formRef.value?.validate();
-        formRef.value?.validate((errors) => {
-          if (errors) {
-            reject(formData.value);
-          } else {
-            resolve();
-          }
-        });
-      });
     };
 
     const resetForm = () => {
@@ -241,7 +233,7 @@ export default {
       const isEnd = formData.value.videoInfo.uploadStatus === ENUM_UPLOAD_STATUS.END;
       return (
         <FormItem
-          field="files"
+          name="files"
           v-slots={{
             label: () => (
               <div class="flex items-center">
@@ -318,7 +310,7 @@ export default {
 
     return () => (
       <Form ref={formRef} model={formData.value} rules={props.rules} layout="vertical" auto-label-width>
-        <FormItem label="标题" field="title" required>
+        <FormItem label="标题" name="title" required>
           <Input
             v-model={formData.value.title}
             onInput={() => {
@@ -333,7 +325,7 @@ export default {
           />
         </FormItem>
 
-        <FormItem label="作品描述" field="content">
+        <FormItem label="作品描述" name="content">
           <Textarea
             v-model={formData.value.content}
             onInput={onChange}
@@ -356,7 +348,7 @@ export default {
           />
         )}
 
-        {/* <FormItem label="所属项目" field="project_ids">
+        {/* <FormItem label="所属项目" name="project_ids">
           <CommonSelect
             v-model={formData.value.project_ids}
             onChange={() => emit('change')}

src/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue

@@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Button, Modal } from 'ant-design-vue';
+import { Modal, Button, Form, FormItem } from 'ant-design-vue';
-import { Form, FormItem, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
+import { Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
 import {
   getTemplateUrlWriter,
   postWorksByLinkWriter,
@@ -95,8 +95,7 @@ export default {
 
     // 防抖提交
     const debouncedSubmit = debounce(async () => {
-      formRef.value?.validate(async (errors) => {
+      formRef.value?.validate().then(async () => {
-        if (!errors) {
         taskStatus.value = TASK_STATUS.LOADING;
         const { link } = form.value;
         const { code, data } = await postWorksByLinkWriter(writerCode.value, { link });
@@ -104,7 +103,6 @@ export default {
           taskStatus.value = TASK_STATUS.SUCCESS;
           works.value = data ? [data] : [];
         }
-        }
       });
     }, 300);
 
@@ -189,7 +187,7 @@ export default {
 
     // 渲染链接上传表单
     const renderLinkForm = () => (
-      <FormItem label="链接地址" field="link" required>
+      <FormItem label="链接地址" name="link" required>
         <Textarea
           v-model={form.value.link}
           size="large"
@@ -335,10 +333,7 @@ export default {
         maskClosable={false}
         unmount-on-close
         onCancel={onClose}
-        footer={!(isDefault.value && isLocal.value)}
+        footer={isDefault.value && isLocal.value ? null : renderFooterButtons()}
-        v-slots={{
-          footer: () => renderFooterButtons(),
-        }}
       >
         <Form ref={formRef} model={form.value} layout="horizontal" auto-label-width>
           {/* {isDefault.value && (