feat: modal组件替换

2025-09-03 12:04:15 +08:00
parent db67274583
commit 64a5b41a4e
54 changed files with 358 additions and 278 deletions
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@ -1,9 +1,10 @@
 <template>
-  <a-modal title-align="start" modal-class="modal" body-class="body" v-bind="$attrs">
+  <Modal title-align="start" wrapClassName="modal" body-class="body" v-bind="$attrs" centered>
    <slot></slot>
-  </a-modal>
+  </Modal>
 </template>
 <script setup lang="ts">
+import { Modal } from 'ant-design-vue';
 </script>
 <style lang="scss">
 .modal {
--- a/src/layouts/Basic.vue
+++ b/src/layouts/Basic.vue
@ -55,7 +55,7 @@ const checkHasInviteCode = () => {

 <template>
  <Layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full">
-    <JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
+    <JoinModal v-model:open="joinEnterpriseVisible" centered ref="joinModalRef" />
    <Layout.Header class="layout-header-wrap">
      <Navbar />
    </Layout.Header>
--- a/src/views/components/dataEngine/hotTranslation.vue
+++ b/src/views/components/dataEngine/hotTranslation.vue
@ -2,10 +2,7 @@
  <view>
    <topHeader ref="topHeaderRef" @search="search"></topHeader>
    <!-- tabel -->
-    <a-space
-      direction="vertical"
-      class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px"
-    >
+    <a-space direction="vertical" class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px">
      <div class="title-row">
        <span class="title mr-4px">行业热门话题洞察</span>
        <a-tooltip>
@ -78,7 +75,14 @@
        </template>
      </a-table>
    </a-space>
-    <Modal v-model:open="visible" unmountOnClose centered wrapClassName="hot-translation-modal" width="640px" @cancel="handleCancel">
+    <Modal
+      v-model:open="visible"
+      unmountOnClose
+      centered
+      wrapClassName="hot-translation-modal"
+      width="640px"
+      @cancel="handleCancel"
+    >
      <template #title>
        <span style="text-align: left; width: 100%">行业热门话题洞察</span>
      </template>
--- a/src/views/components/management/account/index.vue
+++ b/src/views/components/management/account/index.vue
@ -36,7 +36,7 @@
        </Button>
      </template>
    </a-table>
-    <Modal v-model:visible="addAccountVisible" width="480px" title="添加子账号" :okText="okText" @ok="handleOk" >
+    <Modal v-model:open="addAccountVisible" centered width="480px" title="添加子账号" :okText="okText" @ok="handleOk" >
      <div v-if="canAddAccount" class="add-account-container">
        <h2 class="add-account-title">生成企业专属链接，成员通过访问即可注册并加入企业账号。</h2>
        <p class="add-account-subtitle">子账号可独立登录，权限继承主账号配置。</p>
@ -53,8 +53,8 @@
        <p class="cannot-add-account-subtitle">如需添加更多子账号，您可联系销售人员进行购买和权限扩展。</p>
      </div>
    </Modal>
-    <CustomerServiceModal v-model:visible="customerServiceVisible" />
-    <DeleteModal v-model:open="deleteVisible" :content="deleteTitle" @ok="handleDelete" @close="deleteVisible = false">
+    <CustomerServiceModal v-model:open="customerServiceVisible" centered/>
+    <DeleteModal v-model:open="deleteVisible" centered :content="deleteTitle" @ok="handleDelete" @cancel="deleteVisible = false">
    </DeleteModal>
  </div>
 </template>
--- a/src/views/components/management/enterprise/index.vue
+++ b/src/views/components/management/enterprise/index.vue
@ -14,7 +14,7 @@
        <Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
      </template>
    </a-table>
-    <Modal v-model:visible="infoVisible" width="480px" title="修改企业名称" :okText="okText" @ok="handleOk">
+    <Modal v-model:open="infoVisible" width="480px" centered title="修改企业名称" :okText="okText" @ok="handleOk">
      <p class="tips">
        企业名称只能修改2次，请谨慎操作。<span
          >（剩余{{ enterpriseInfo!.update_name_quota - enterpriseInfo!.used_update_name_count }}次）
@ -32,7 +32,7 @@
        </a-form-item>
      </a-form>
    </Modal>
-    <CustomerServiceModal v-model:visible="customerServiceVisible" />
+    <CustomerServiceModal v-model:open="customerServiceVisible" centered />
  </div>
 </template>
 <script setup lang="ts">
--- a/src/views/components/management/person/index.vue
+++ b/src/views/components/management/person/index.vue
@ -19,7 +19,7 @@
        <icon-edit size="13" class="ml-8px" @click="openEditMobileModal" />
      </template>
    </a-table>
-    <Modal v-model:visible="infoVisible" title="修改用户信息" @ok="handleSubmitUserInfo">
+    <Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo">
      <a-form
        class="form"
        :model="userInfoForm"
@ -46,10 +46,10 @@
        </a-form-item>
      </a-form>
    </Modal>
-    <Modal v-model:visible="imageVisible" title="头像裁剪">
+    <Modal v-model:open="imageVisible" centered title="头像裁剪">
      <VueCropper></VueCropper>
    </Modal>
-    <Modal v-model:visible="mobileVisible" title="修改手机号" @ok="handleUpdateMobile">
+    <Modal v-model:open="mobileVisible" centered title="修改手机号" @ok="handleUpdateMobile">
      <a-form
        ref="formRef"
        :model="form"
--- a/src/views/components/workplace/modules/product.vue
+++ b/src/views/components/workplace/modules/product.vue
@ -64,7 +64,7 @@
        <Button v-if="props.product.status === Status.Disable" size="small" type="default" ghost> 免费试用7天 </Button>
      </a-popconfirm>
    </div>
-    <CustomerServiceModal v-model:visible="visible" />
+    <CustomerServiceModal v-model:open="visible" centered/>
  </div>
 </template>

--- a/src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/delete-manuscript-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/delete-manuscript-modal.vue
@ -1,9 +1,10 @@
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    title="删除内容稿件"
    width="480px"
-    @close="onClose"
+    centered
+    @cancel="onClose"
  >
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
@ -15,12 +16,12 @@
        >确认删除</Button
      >
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { deleteWork } from '@/api/all/generationWorkshop';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/material-center/components/finished-products/manuscript/check/cancel-check-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check/cancel-check-modal.vue
@ -1,9 +1,10 @@
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    :title="action === 'exit' ? '退出审核' : '切换内容稿件'"
    width="480px"
-    @close="onClose"
+    centered
+    @cancel="onClose"
  >
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
@ -19,12 +20,12 @@
        {{ action === 'exit' ? '确认退出' : '确认切换' }}
      </Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 import { useRouter } from 'vue-router';

--- a/src/views/material-center/components/finished-products/manuscript/check/check-success-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check/check-success-modal.vue
@ -1,10 +1,11 @@
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    title="提示"
    width="480px"
    @close="onClose"
-    modal-class="upload-success11-modal"
+    centered
+    wrapClassName="upload-success11-modal"
    :footer="null"
  >
    <div class="flex items-center flex-col justify-center">
@ -13,11 +14,12 @@
      <p class="text-14px lh-22px font-400 color-#737478 ld">想让内容更抓眼球、更吸流量吗？</p>
      <p class="text-14px lh-22px font-400 color-#737478 ld">试试「内容稿件分析」功能吧！</p>
    </div>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
+import { Button, Modal } from 'ant-design-vue';
 import icon1 from '@/assets/img/media-account/icon-feedback-success.png';

 const router = useRouter();
--- a/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue
+++ b/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 { Table, Modal, TableColumn, Pagination, Tooltip } from '@arco-design/web-vue';
+import { Table, TableColumn, Pagination, Tooltip, Modal } 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';
@ -126,12 +126,13 @@ export default {
    return () => (
      <>
        <Modal
-          v-model:visible={visible.value}
+          v-model:open={visible.value}
          title="分享内容稿件"
          width="920px"
-          onClose={onClose}
-          unmount-on-close
-          modal-class="share-manuscript-modal"
+          onCancel={onClose}
+          centered
+          destroyOnClose
+          modalClass="share-manuscript-modal"
          v-slots={{
            footer: () => (
              <div class="flex justify-between w-full items-center">
--- a/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue
@ -1,6 +1,6 @@
 <script lang="jsx">
-import { Button } from 'ant-design-vue';
-import { Modal, Form, FormItem, Input, Message as AMessage } from '@arco-design/web-vue';
+import { Button, Modal } from 'ant-design-vue';
+import { Form, FormItem, Input, Message as AMessage } from '@arco-design/web-vue';
 import CommonSelect from '@/components/common-select';

 import { useClipboard } from '@vueuse/core';
@ -97,11 +97,12 @@ export default {
    });
    return () => (
      <Modal
-        v-model:visible={visible.value}
+        v-model:open={visible.value}
        title="分享内容稿件"
        width="480px"
-        onClose={onClose}
-        unmount-on-close
+        onCancel={onClose}
+        destroyOnClose
+        centered
        auto-label-width
        v-slots={{
          footer: () => (
--- a/src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
@ -1,16 +1,6 @@
 <script lang="jsx">
-import {
-  Modal,
-  Form,
-  FormItem,
-  Input,
-  RadioGroup,
-  Radio,
-  Upload,
-  Button,
-  Message as AMessage,
-  Textarea,
-} from '@arco-design/web-vue';
+import { Modal, Button } from 'ant-design-vue';
+import { Form, FormItem, 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';
@ -332,36 +322,30 @@ export default {
    const renderFooterButtons = () => {
      const buttonMap = {
        [TASK_STATUS.LOADING]: () => (
-          <Button type="primary" size="medium" onClick={onCancelUpload}>
+          <Button type="primary" onClick={onCancelUpload}>
            取消上传
          </Button>
        ),
        [TASK_STATUS.DEFAULT]: () => (
          <>
-            <Button size="medium" onClick={onClose}>
-              取消
-            </Button>
-            <Button type="primary" size="medium" onClick={onSubmit}>
+            <Button onClick={onClose}>取消</Button>
+            <Button type="primary" onClick={onSubmit}>
              {isHandwrite.value ? '复制链接' : '确认'}
            </Button>
          </>
        ),
        [TASK_STATUS.FAILED]: () => (
          <>
-            <Button size="medium" onClick={onClose}>
-              取消
-            </Button>
-            <Button type="primary" size="medium" onClick={onClose}>
+            <Button onClick={onClose}>取消</Button>
+            <Button type="primary" onClick={onClose}>
              重新上传
            </Button>
          </>
        ),
        [TASK_STATUS.SUCCESS]: () => (
          <>
-            <Button size="medium" onClick={onClose}>
-              取消
-            </Button>
-            <Button type="primary" size="medium" onClick={goUpload}>
+            <Button onClick={onClose}>取消</Button>
+            <Button type="primary" onClick={goUpload}>
              确认
            </Button>
          </>
@ -375,13 +359,15 @@ export default {

    return () => (
      <Modal
-        v-model:visible={visible.value}
+        centered
+        v-model:open={visible.value}
        title={getTitle()}
-        modal-class="upload-manuscript-modal"
+        wrapClassName="upload-manuscript-modal"
        width="500px"
-        mask-closable={false}
-        unmount-on-close
-        onClose={onClose}
+        maskClosable={false}
+        destroyOnClose
+        centered
+        onCancel={onClose}
        footer={!(isDefault.value && isLocal.value)}
        v-slots={{
          footer: () => renderFooterButtons(),
--- a/src/views/material-center/components/finished-products/manuscript/edit/cancel-edit-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/edit/cancel-edit-modal.vue
@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model:visible="visible" title="退出编辑" width="480px" @close="onClose">
+  <Modal v-model:open="visible" title="退出编辑" centered width="480px" @cancel="onClose">
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>内容已修改尚未保存，若退出编辑，本次修改将不保存。</span>
@ -8,12 +8,12 @@
      <Button size="medium" @click="onClose">继续编辑</Button>
      <Button type="primary" class="ml-8px" size="medium" @click="onConfirm">确认退出</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

 const router = useRouter();
--- a/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue
@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model:visible="visible" title="删除稿件" width="480px" @close="onClose">
+  <Modal v-model:open="visible" title="删除稿件" centered width="480px" @cancel="onClose">
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认删除 {{ projectName }} 这个稿件吗？</span>
@ -8,12 +8,12 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { deleteWork } from '@/api/all/generationWorkshop';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/material-center/components/finished-products/manuscript/upload/cancel-upload-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/upload/cancel-upload-modal.vue
@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model:visible="visible" title="确认提示" width="480px" @close="onClose">
+  <Modal v-model:open="visible" centered title="确认提示" width="480px" @cancel="onClose">
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认取消上传这 {{ num }} 个文件吗？此操作不可恢复。</span>
@ -8,12 +8,12 @@
      <Button size="medium" @click="onClose">继续编辑</Button>
      <Button type="primary" class="ml-8px" size="medium" @click="onConfirm">确认取消</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

 const router = useRouter();
--- a/src/views/material-center/components/finished-products/manuscript/upload/upload-success-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/upload/upload-success-modal.vue
@ -1,5 +1,12 @@
 <template>
-  <a-modal v-model:visible="visible" title="提示" width="480px" @close="onClose" modal-class="upload-success11-modal">
+  <Modal
+    v-model:open="visible"
+    title="提示"
+    centered
+    width="480px"
+    @cancel="onClose"
+    wrapClassName="upload-success11-modal"
+  >
    <div class="flex items-center flex-col justify-center">
      <img :src="icon1" width="80" height="80" class="mb-16px" />
      <span class="text-18px lh-26px font-400 color-#211F24 md">上传成功</span>
@ -10,12 +17,12 @@
      <Button size="medium" @click="onBack">回到列表</Button>
      <Button type="primary" class="ml-8px" size="medium" @click="onConfirm">批量审核</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { slsWithCatch } from '@/utils/stroage.ts';
 import icon1 from '@/assets/img/media-account/icon-feedback-success.png';

--- a/src/views/material-center/components/raw-material/components/table/delete-file-modal.vue
+++ b/src/views/material-center/components/raw-material/components/table/delete-file-modal.vue
@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model:visible="visible" title="删除文件" width="480px" @close="onClose">
+  <Modal v-model:open="visible" title="删除文件" centered width="480px" @cancel="onClose">
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认删除 {{ fileName }} 文件吗？</span>
@ -8,12 +8,12 @@
      <Button size="medium" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" danger size="medium" @click="onDelete">确认删除</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { deleteRawMaterial, batchDeleteRawMaterials } from '@/api/all/generationWorkshop';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/material-center/components/raw-material/index.vue
+++ b/src/views/material-center/components/raw-material/index.vue
@ -106,7 +106,14 @@ export default defineComponent({
        </div>
        <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
          <div class="flex justify-end mb-12px">
-            <Button type="primary" ghost class="w-fit" size="medium" onClick={handleBatchDelete}>
+            <Button
+              type="primary"
+              ghost
+              class="w-fit"
+              size="medium"
+              onClick={handleBatchDelete}
+              disabled={!selectedRows.value.length}
+            >
              批量删除
            </Button>
          </div>
--- a/src/views/property-marketing/brands/brand-materials/index.vue
+++ b/src/views/property-marketing/brands/brand-materials/index.vue
@ -35,9 +35,10 @@
            </Button>
          </div>
        </div>
-        <a-modal
-          v-model:visible="modalVisible"
-          :mask-closable="false"
+        <Modal
+          v-model:open="modalVisible"
+          :maskClosable="false"
+          centered
          :esc-to-close="false"
          width="510px"
          @cancel="handleModalCancel"
@ -68,7 +69,7 @@
            <Button @click="handleModalCancel" class="mr-8px">取消</Button>
            <Button type="primary" @click="handleModalOk">{{ btn_str }}</Button>
          </template>
-        </a-modal>
+        </Modal>
      </div>
    </div>
    <div
@ -127,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 } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';

 import {
  addMaterials,
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/pause-account-patch.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/pause-account-patch.vue
@ -3,7 +3,14 @@
 * @Date: 2025-06-27 14:41:20
 -->
 <template>
-  <a-modal v-model:visible="visible" title="暂停同步" width="400px" modal-class="account-manage-modal" @close="onClose">
+  <Modal
+    v-model:open="visible"
+    title="暂停同步"
+    centered
+    width="400px"
+    wrapClassName="account-manage-modal"
+    @cancel="onClose"
+  >
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
@ -12,11 +19,11 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { ref } from 'vue';
 import { pausePatchAccount } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
@ -4,9 +4,8 @@
 -->
 <script lang="jsx">
 import { ref, computed } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import {
-  Modal,
  Form,
  FormItem,
  Input,
@ -277,12 +276,13 @@ export default {

    return () => (
      <Modal
-        v-model:visible={visible.value}
+        v-model:open={visible.value}
        title={isEdit.value ? '编辑账号' : '添加账号'}
-        modal-class="add-account-modal"
+        wrapClassName="add-account-modal"
        width="500px"
-        mask-closable={false}
-        onClose={onClose}
+        centered
+        maskClosable={false}
+        onCancel={onClose}
        footer={null}
      >
        <Form ref={formRef} model={form.value} rules={rules} layout="horizontal" auto-label-width>
@ -394,7 +394,12 @@ export default {
              </FormItem>

              <FormItem label="选择标签">
-                <CommonSelect v-model={form.value.tag_ids} options={tagOptions.value} placeholder="请选择…" size="large" />
+                <CommonSelect
+                  v-model={form.value.tag_ids}
+                  options={tagOptions.value}
+                  placeholder="请选择…"
+                  size="large"
+                />
              </FormItem>
              <FormItem
                label="笔记链接"
--- a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
@ -3,14 +3,15 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="480px"
    title="授权账号"
-    modal-class="authorized-account-modal"
-    :mask-closable="false"
+    centered
+    wrapClassName="authorized-account-modal"
+    :maskClosable="false"
    :footer="modalState !== MODAL_STATE.LOADING"
-    @close="close"
+    @cancel="close"
  >
    <div class="flex flex-col items-center">
      <!-- 加载中状态 -->
@ -86,7 +87,7 @@
        {{ confirmBtnText }}
      </Button>
    </template>
-  </a-modal>
+  </Modal>

  <SyncDataModal ref="syncDataModalRef" />
 </template>
@ -94,7 +95,7 @@
 <script setup>
 import { defineExpose, ref, computed } from 'vue';
 import { Message as AMessage } from '@arco-design/web-vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
 import SyncDataModal from '../sync-data-modal';

--- a/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
@ -3,12 +3,13 @@
 * @Date: 2025-06-27 09:35:49
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    title="批量标签"
-    modal-class="batch-tag-modal"
+    wrapClassName="batch-tag-modal"
    width="800px"
-    :mask-closable="false"
+    centered
+    :maskClosable="false"
  >
    <div class="mb-16px t1">
      {{ `已选${accountTagList.length}个账号` }}
@ -79,12 +80,12 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" size="large" @click="onSubmit">确定</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref, reactive } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';

 import icon1 from '@/assets/img/icon-question.png';
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue
@ -3,12 +3,13 @@
 * @Date: 2025-06-26 11:44:17
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    :title="isEdit ? '编辑分组' : '添加新分组'"
-    modal-class="account-manage-modal"
+    wrapClassName="group-manage-modal"
    width="400px"
-    @close="onClose"
+    centered
+    @cancel="onClose"
  >
    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
      <a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
@ -19,12 +20,12 @@
      <Button @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref, watch, nextTick } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';

 const emits = defineEmits(['success', 'close']);
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
@ -3,7 +3,14 @@
 * @Date: 2025-06-26 11:45:05
 -->
 <template>
-  <a-modal v-model:visible="visible" title="删除分组" width="400px" modal-class="account-manage-modal" @close="onClose">
+  <Modal
+    v-model:open="visible"
+    title="删除分组"
+    centered
+    width="400px"
+    wrapClassName="account-manage-modal"
+    @cancel="onClose"
+  >
    <div class="flex items-center mb-24px">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认删除 "{{ groupName }}" 这个分组吗？</span>
@ -12,12 +19,12 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { deleteGroup } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
@ -3,14 +3,15 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="900px"
-    modal-class="account-manage-modal"
+    wrapClassName="account-manage-modal"
    :footer="false"
+    centered
    title="分组管理"
-    :mask-closable="false"
-    @close="close"
+    :maskClosable="false"
+    @cancel="close"
  >
    <div class="flex items-center justify-between mb-16px">
      <div class="filter-row-item flex items-center">
@ -76,12 +77,12 @@

    <AddGroup ref="addGroupRef" @success="update" />
    <DeleteGroup ref="deleteGroupRef" @success="update" />
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { getAccountGroup } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';

--- a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
@ -3,13 +3,14 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="480px"
    title="导入提示"
-    modal-class="import-prompt-modal"
-    :mask-closable="false"
-    @close="close"
+    wrapClassName="import-prompt-modal"
+    :maskClosable="false"
+    centered
+    @cancel="close"
  >
    <div class="flex flex-col items-center">
      <div class="flex items-center">
@ -24,11 +25,11 @@
      <Button size="large" @click="close">取消</Button>
      <Button type="primary" size="large" @click="handleOk"> 去授权 </Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { defineExpose } from 'vue';

 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
--- a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
@ -3,14 +3,15 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="500px"
+    centered
    title="重新授权"
-    modal-class="reauthorize-account-modal"
-    :mask-closable="false"
+    wrapClassName="reauthorize-account-modal"
+    :maskClosable="false"
    :footer="modalState !== MODAL_STATE.LOADING"
-    @close="close"
+    @cancel="close"
  >
    <div class="flex flex-col items-center">
      <!-- 加载中状态 -->
@ -92,9 +93,7 @@
    </div>

    <template #footer>
-      <Button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
-        重新生成
-      </Button>
+      <Button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode"> 重新生成 </Button>
      <Button
        v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
        size="large"
@ -106,7 +105,7 @@
        {{ confirmBtnText }}
      </Button>
    </template>
-  </a-modal>
+  </Modal>

  <SyncDataModal ref="syncDataModalRef" />
 </template>
@ -114,7 +113,7 @@
 <script setup>
 import { defineExpose, ref, computed } from 'vue';
 import { Message as AMessage } from '@arco-design/web-vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
 import SyncDataModal from '../sync-data-modal';

--- a/src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue
@ -3,13 +3,14 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="480px"
    title="更新数据"
-    modal-class="sync-data-modal"
-    :mask-closable="false"
-    @close="close"
+    centered
+    wrapClassName="sync-data-modal"
+    :maskClosable="false"
+    @cancel="close"
  >
    <div class="flex flex-col items-center">
      <div class="flex items-center">
@ -23,12 +24,12 @@
      <Button size="large" @click="close">稍后再说</Button>
      <Button type="primary" size="large" @click="handleOk"> 更新数据 </Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { defineExpose } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';

 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
@ -1,10 +1,11 @@
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    :title="isEdit ? '编辑标签' : '添加新标签'"
-    modal-class="tags-manage-modal"
+    wrapClassName="tags-manage-modal"
    width="400px"
-    @close="onClose"
+    centered
+    @cancel="onClose"
  >
    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
      <a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
@ -15,12 +16,12 @@
      <Button @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref, nextTick } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { postAccountTags, putTag } from '@/api/all/propertyMarketing';

 const emits = defineEmits(['success', 'close']);
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
@ -3,18 +3,23 @@
 * @Date: 2025-06-26 17:23:52
 -->
 <template>
-  <a-modal v-model:visible="visible" title="删除标签" width="400px" modal-class="account-manage-modal" @close="onClose">
+  <Modal
+    v-model:open="visible"
+    title="删除标签"
+    centered
+    width="400px"
+    wrapClassName="account-manage-modal"
+    @cancel="onClose"
+  >
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认删除 "{{ tagName }}" 这个标签吗？</span>
    </div>
    <template #footer>
      <Button size="large" @click="onClose">取消</Button>
-      <Button type="primary" class="ml-16px" danger size="large" @click="onDelete"
-        >确认删除</Button
-      >
+      <Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
@ -3,14 +3,15 @@
 * @Date: 2025-06-25 17:58:28
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="800px"
-    modal-class="tags-manage-modal"
+    wrapClassName="tags-manage-modal"
    :footer="false"
+    centered
    title="标签管理"
-    :mask-closable="false"
-    @close="close"
+    :maskClosable="false"
+    @cancel="close"
  >
    <div class="flex items-center justify-between mb-16px">
      <div class="filter-row-item flex items-center">
@ -55,12 +56,12 @@

    <AddTag ref="addTagRef" @success="update" />
    <DeleteTag ref="deleteTagRef" @success="update" />
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { getTagsList } from '@/api/all/propertyMarketing';

 import AddTag from './add-tag.vue';
--- a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
@ -1,11 +1,12 @@
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    title="添加项目"
-    modal-class="add-project-modal"
+    wrapClassName="add-project-modal"
    width="960px"
-    :mask-closable="false"
-    @close="onClose"
+    centered
+    :maskClosable="false"
+    @cancel="onClose"
  >
    <div class="content">
      <a-steps changeable :current="currentStep" @change="setCurrent" class="mb-24px mx-79px">
@ -25,12 +26,12 @@
        </div>
      </div>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { postAddProject, putProject, getProjectDetail } from '@/api/all/propertyMarketing';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';

 import StepOne from './stepOne.vue';
 import StepTwo from './stepTwo.vue';
--- a/src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue
+++ b/src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue
@ -3,12 +3,13 @@
 * @Date: 2025-06-26 17:44:16
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    title="删除项目"
    width="480px"
-    modal-class="project-manage-modal"
-    @close="onClose"
+    centered
+    wrapClassName="project-manage-modal"
+    @cancel="onClose"
  >
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
@ -20,12 +21,12 @@
        >确认删除</Button
      >
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { deleteProject } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/add-group.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/add-group.vue
@ -3,12 +3,13 @@
 * @Date: 2025-06-26 11:44:17
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    :title="isEdit ? '编辑分组' : '添加新分组'"
-    modal-class="account-manage-modal"
+    wrapClassName="account-manage-modal"
    width="400px"
-    @close="onClose"
+    centered
+    @cancel="onClose"
  >
    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
      <a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
@ -19,12 +20,12 @@
      <Button @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref, watch, nextTick } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { postPlacementAccountProjectGroups, putPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';

 const emits = defineEmits(['success', 'close']);
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/delete-group.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/delete-group.vue
@ -3,7 +3,7 @@
 * @Date: 2025-06-26 11:45:05
 -->
 <template>
-  <a-modal v-model:visible="visible" title="删除分组" width="400px" modal-class="account-manage-modal" @close="onClose">
+  <Modal v-model:open="visible" centered title="删除分组" width="400px" wrapClassName="account-manage-modal" @cancel="onClose">
    <div class="flex items-center mb-24px">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认删除 "{{ groupName }}" 这个分组吗？</span>
@ -12,12 +12,12 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px danger-btn" danger size="large" @click="onDelete">确认删除</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { deletePlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
@ -3,14 +3,15 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="900px"
-    modal-class="put-account-group-manage-modal"
+    wrapClassName="put-account-group-manage-modal"
    :footer="false"
    title="分组管理"
-    :mask-closable="false"
-    @close="close"
+    centered
+    :maskClosable="false"
+    @cancel="close"
  >
    <div class="flex items-center justify-between mb-16px">
      <div class="filter-row-item flex items-center">
@ -75,12 +76,12 @@

    <AddGroup ref="addGroupRef" @success="update" />
    <DeleteGroup ref="deleteGroupRef" @success="update" />
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { getPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';

--- a/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
@ -3,12 +3,13 @@
 * @Date: 2025-06-26 17:44:16
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    :title="isBatch ? '批量删除账户' : '删除账户'"
    width="480px"
-    modal-class="account-manage-modal"
-    @close="onClose"
+    centered
+    wrapClassName="account-manage-modal"
+    @cancel="onClose"
  >
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
@ -18,10 +19,12 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
+// 添加Modal导入
+import { Modal } from 'ant-design-vue';
 import { ref } from 'vue';
 import { Button } from 'ant-design-vue';
 import { deletePlacementAccount, batchDeletePlacementAccounts } from '@/api/all/propertyMarketing';
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
@ -3,7 +3,14 @@
 * @Date: 2025-06-27 14:41:20
 -->
 <template>
-  <a-modal v-model:visible="visible" title="暂停同步" width="480px" modal-class="account-manage-modal" @close="onClose">
+  <Modal
+    v-model:open="visible"
+    title="暂停同步"
+    width="480px"
+    wrapClassName="account-manage-modal"
+    @cancel="onClose"
+    centered
+  >
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
@ -12,7 +19,7 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px !bg-#f64b31" size="large" @click="onConfirm">确定</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
--- a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
@ -3,14 +3,15 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    :title="isEdit ? '编辑账户' : '添加账户'"
-    modal-class="add-put-account-modal"
+    wrapClassName="add-put-account-modal"
    width="500px"
-    :mask-closable="false"
+    :maskClosable="false"
    unmount-on-close
-    @close="onClose"
+    centered
+    @cancel="onClose"
  >
    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
      <a-form-item v-if="!isEdit" label="上传方式" required>
@ -142,10 +143,12 @@

    <AuthorizedAccountModal ref="authorizedAccountModalRef" />
    <!-- <ImportPromptModal ref="importPromptModalRef" /> -->
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
+// 添加Modal导入
+import { Modal } from 'ant-design-vue';
 import { ref, defineEmits } from 'vue';
 import { Button } from 'ant-design-vue';

--- a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
@ -3,14 +3,15 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="480px"
    title="获取凭证"
-    modal-class="authorized-account-modal"
-    :mask-closable="false"
+    wrapClassName="authorized-account-modal"
+    :maskClosable="false"
    :footer="!isLoading"
-    @close="close"
+    centered
+    @cancel="close"
  >
    <!-- <div v-if="showSyncTip">
      <div class="flex items-center mb-20px">
@ -58,12 +59,14 @@
      <Button size="large" @click="close">取消</Button>
      <Button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </Button>
    </template>
-  </a-modal>
+  </Modal>

  <SelectSubAccountModal ref="selectSubAccountModalRef" />
 </template>

 <script setup>
+// 添加Modal导入
+import { Modal } from 'ant-design-vue';
 import dayjs from 'dayjs';
 import { Button } from 'ant-design-vue';
 import { defineExpose, ref, computed, defineEmits } from 'vue';
--- a/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/index.vue
@ -3,13 +3,13 @@
 * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
    width="480px"
    title="导入提示"
-    modal-class="import-prompt-modal"
-    :mask-closable="false"
-    @close="close"
+    wrapClassName="import-prompt-modal"
+    :maskClosable="false"
+    @cancel="close"
  >
    <div class="flex flex-col items-center">
      <div class="flex items-center">
@ -21,12 +21,12 @@
      <Button size="large" @click="close">取消</Button>
      <Button type="primary" size="large" @click="handleOk"> 去授权 </Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { defineExpose } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';

 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue
@ -1,10 +1,12 @@
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
+    @cancel="onClose"
+    centered
    title="选择子账户"
    modal-class="select-sub-account-modal"
    width="720px"
-    :mask-closable="false"
+    :maskClosable="false"
    @close="onClose"
  >
    <div class="filter-row flex mb-16px">
@ -109,7 +111,7 @@
        >
      </div>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
@ -118,6 +120,7 @@ import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
 import { formatTableField } from '@/utils/tools';
 import { postSubAccount, postAddSubAccount } from '@/api/all/propertyMarketing';
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { Modal } from 'ant-design-vue';

 const emits = defineEmits('confirm');
 const update = inject('update');
@ -207,3 +210,4 @@ defineExpose({ open });
 <style lang="scss">
@import './style.scss';
 </style>
+
--- a/src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/delete-manuscript-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/delete-manuscript-modal.vue
@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model:visible="visible" title="删除内容稿件" width="480px" @close="onClose">
+  <Modal v-model:open="visible" title="删除内容稿件" width="480px" @cancel="onClose" centered>
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认删除 {{ projectName }} 这个内容稿件吗？</span>
@ -8,12 +8,12 @@
      <Button @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" danger @click="onDelete">确认删除</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { deleteWorkWriter } from '@/api/all/generationWorkshop-writer.ts';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/writer-material-center/components/finished-products/manuscript/check/cancel-check-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check/cancel-check-modal.vue
@ -1,6 +1,8 @@
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
+    @cancel="onClose"
+    centered
    :title="action === 'exit' ? '退出审核' : '切换内容稿件'"
    width="480px"
    @close="onClose"
@ -19,7 +21,7 @@
        {{ action === 'exit' ? '确认退出' : '确认切换' }}
      </Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
--- a/src/views/writer-material-center/components/finished-products/manuscript/check/check-success-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check/check-success-modal.vue
@ -1,10 +1,12 @@
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
+    @cancel="onClose"
+    centered
    title="提示"
    width="480px"
    @close="onClose"
-    modal-class="upload-success11-modal"
+    wrapClassName="upload-success11-modal"
    :footer="null"
  >
    <div class="flex items-center flex-col justify-center">
@ -13,10 +15,12 @@
      <!-- <p class="text-14px lh-22px font-400 color-#737478 ld">想让内容更抓眼球、更吸流量吗？</p>
      <p class="text-14px lh-22px font-400 color-#737478 ld">试试「内容稿件分析」功能吧！</p> -->
    </div>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
+// 添加Modal导入
+import { Modal } from 'ant-design-vue';
 import { ref, onUnmounted } from 'vue';
 import icon1 from '@/assets/img/media-account/icon-feedback-success.png';

--- a/src/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
@ -1,13 +1,6 @@
 <script lang="jsx">
-import { Button } from 'ant-design-vue';
-import {
-  Modal,
-  Form,
-  FormItem,
-  Upload,
-  Message as AMessage,
-  Textarea,
-} from '@arco-design/web-vue';
+import { Button, Modal } from 'ant-design-vue';
+import { Form, FormItem, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
 import {
  getTemplateUrlWriter,
  postWorksByLinkWriter,
@ -304,9 +297,7 @@ export default {
        ),
        [TASK_STATUS.DEFAULT]: () => (
          <>
-            <Button onClick={onClose}>
-              取消
-            </Button>
+            <Button onClick={onClose}>取消</Button>
            <Button type="primary" onClick={onSubmit}>
              确认
            </Button>
@ -314,9 +305,7 @@ export default {
        ),
        [TASK_STATUS.FAILED]: () => (
          <>
-            <Button onClick={onClose}>
-              取消
-            </Button>
+            <Button onClick={onClose}>取消</Button>
            <Button type="primary" onClick={onClose}>
              重新上传
            </Button>
@ -324,9 +313,7 @@ export default {
        ),
        [TASK_STATUS.SUCCESS]: () => (
          <>
-            <Button onClick={onClose}>
-              取消
-            </Button>
+            <Button onClick={onClose}>取消</Button>
            <Button type="primary" onClick={goUpload}>
              确认
            </Button>
@ -341,13 +328,13 @@ export default {

    return () => (
      <Modal
-        v-model:visible={visible.value}
+        v-model:open={visible.value}
        title={getTitle()}
-        modal-class="upload-manuscript-modal"
+        wrapClassName="upload-manuscript-modal"
        width="500px"
-        mask-closable={false}
+        maskClosable={false}
        unmount-on-close
-        onClose={onClose}
+        onCancel={onClose}
        footer={!(isDefault.value && isLocal.value)}
        v-slots={{
          footer: () => renderFooterButtons(),
--- a/src/views/writer-material-center/components/finished-products/manuscript/edit/cancel-edit-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/edit/cancel-edit-modal.vue
@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model:visible="visible" title="退出编辑" width="480px" @close="onClose">
+  <Modal v-model:open="visible" title="退出编辑" width="480px" @cancel="onClose" centered>
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>内容已修改尚未保存，若退出编辑，本次修改将不保存。</span>
@ -8,12 +8,12 @@
      <Button @click="onClose">继续编辑</Button>
      <Button type="primary" class="ml-8px" @click="onConfirm">确认退出</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

 const router = useRouter();
--- a/src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue
@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model:visible="visible" title="删除稿件" width="480px" @close="onClose">
+  <Modal v-model:open="visible" title="删除稿件" width="480px" centered @cancel="onClose">
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认删除 {{ projectName }} 这个稿件吗？</span>
@ -8,12 +8,12 @@
      <Button size="large" @click="onClose">取消</Button>
      <Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { deleteWorkWriter } from '@/api/all/generationWorkshop-writer.ts';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

@ -52,3 +52,16 @@ async function onDelete() {

 defineExpose({ open });
 </script>
+
+<template>
+  <Modal v-model:open="visible" title="删除稿件" width="480px" @cancel="onClose" centered>
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ projectName }} 这个稿件吗？</span>
+    </div>
+    <template #footer>
+      <Button size="large" @click="onClose">取消</Button>
+      <Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
+    </template>
+  </Modal>
+</template>
--- a/src/views/writer-material-center/components/finished-products/manuscript/upload/cancel-upload-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/upload/cancel-upload-modal.vue
@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model:visible="visible" title="确认提示" width="480px" @close="onClose">
+  <Modal v-model:open="visible" title="确认提示" width="480px" @cancel="onClose" centered>
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认取消上传这 {{ num }} 个文件吗？此操作不可恢复。</span>
@ -8,12 +8,12 @@
      <Button @click="onClose">继续编辑</Button>
      <Button type="primary" class="ml-8px" @click="onConfirm">确认取消</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

 const router = useRouter();
--- a/src/views/writer-material-center/components/finished-products/manuscript/upload/upload-success-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/upload/upload-success-modal.vue
@ -1,5 +1,12 @@
 <template>
-  <a-modal v-model:visible="visible" title="提示" width="480px" @close="onClose" modal-class="upload-success11-modal">
+  <Modal
+    v-model:open="visible"
+    title="提示"
+    width="480px"
+    @cancel="onClose"
+    wrapClassName="upload-success11-modal"
+    centered
+  >
    <div class="flex items-center flex-col justify-center">
      <img :src="icon1" width="80" height="80" class="mb-16px" />
      <span class="text-18px lh-26px font-400 color-#211F24 md">上传成功</span>
@ -10,12 +17,12 @@
      <Button @click="onBack">回到列表</Button>
      <Button type="primary" class="ml-8px" @click="onConfirm">批量审核</Button>
    </template>
-  </a-modal>
+  </Modal>
 </template>

 <script setup>
 import { ref } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Modal } from 'ant-design-vue';
 import { slsWithCatch } from '@/utils/stroage.ts';
 import icon1 from '@/assets/img/media-account/icon-feedback-success.png';