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