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/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';