feat: tag，Notification替换

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

@@ -1,7 +1,6 @@
 <script lang="jsx">
 import { ref, computed } from 'vue';
-import { Button, Checkbox, Input, Tooltip, Table, Pagination, message } from 'ant-design-vue';
+import { Button, Checkbox, Input, Tooltip, Table, Pagination, message, notification } from 'ant-design-vue';
-import { Notification } from '@arco-design/web-vue';
 import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
 
 import NoData from '@/components/no-data';
@@ -136,7 +135,7 @@ export default {
             completeTaskNum++;
 
             const notificationId = downloadTaskInfos.value.find((v) => v.id === id)?.randomId;
-            notificationId && Notification.remove(notificationId);
+            notificationId && notification.close(notificationId);
 
             if (status === 1) {
               message.success('批量下载已完成，正在下载文件...');

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

@@ -20,9 +20,8 @@
 </template>
 
 <script setup>
-import { Checkbox, Modal, Button, Tabs } from 'ant-design-vue';
+import { Checkbox, Modal, Button, Tabs, notification } from 'ant-design-vue';
 const { TabPane } = Tabs;
-import { Notification } from '@arco-design/web-vue';
 
 import ExportTask from './components/export-task';
 import ImportTask from './components/import-task';
@@ -58,7 +57,7 @@ const onClose = () => {
 
   clearTimer();
   componentRef.value?.unloadComp?.();
-  Notification.clear();
+  notification.destroy();
   visible.value = false;
 };
 const clearTimer = () => {

src/styles/components/ant-notification.scss

@@ -0,0 +1,15 @@
+.ant-notification-notice {
+  padding: 9px 16px;
+  .ant-notification-notice-content {
+    .ant-notification-notice-message {
+      margin: 0;
+    }
+    .ant-notification-notice-description {
+      margin: 0;
+    }
+  }
+  .ant-notification-notice-close {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}

src/styles/components/ant-tag.scss

@@ -0,0 +1,4 @@
+.ant-tag{
+    border-radius: 2px;
+    border: none;
+}

src/styles/components/index.scss

@@ -22,3 +22,5 @@
 @import './ant-textarea.scss';
 @import './ant-select.scss';
 @import './ant-tabs.scss';
+@import "./ant-notification.scss";
+@import "./ant-tag.scss";

src/utils/arcoD.tsx

@@ -1,4 +1,4 @@
-import { Notification } from '@arco-design/web-vue';
+import { notification } from 'ant-design-vue';
 import { downloadByUrl } from '@/utils/tools';
 import { IconLoading } from '@arco-design/web-vue/es/icon';
 
@@ -16,30 +16,30 @@ interface RenderNotificationData {
 
 // 下载通知框
 export function showExportNotification(label: string, others: { id?: string, duration?: number }) {
-  const { id = '', duration = 3000 } = others ?? {}
+  const { id = '', duration = 3 } = others ?? {}
-  Notification.warning({
+  notification.warning({
-    id,
+    key: id,
-    showIcon: false,
+    icon: () => null,
-    closable: true,
+    message: () => null,
-    content: () => (
+    description: (
       <div class="flex items-center pr-16px">
         <IconLoading size={16} class="color-#6D4CFE mr-8px" />
         <p class="text-14px lh-22px font-400 color-#211F24">{label}</p>
       </div>
     ),
     duration,
-    class: 'px-16px py-9px w-450px rounded-2px bg-#F0EDFF',
+    class: 'w-450px rounded-2px bg-#F0EDFF',
   });
 }
 
 // 下载失败框
 export function showFailExportNotification(label: string, others: { id?: string, duration?: number, onReDownload?: Function }) {
   const { id = '', duration = 0, onReDownload } = others ?? {}
-  Notification.warning({
+  notification.warning({
-    id,
+    key: id,
-    showIcon: false,
+    icon: () => null,
-    closable: true,
+    message: () => null,
-    content: () => (
+    description: (
       <div class="flex items-center justify-between pr-16px">
         <div class="flex items-center mr-10px">
           <img src={icon3} width={16} height={16} class=" mr-8px" />
@@ -50,7 +50,7 @@ export function showFailExportNotification(label: string, others: { id?: string,
       </div>
     ),
     duration,
-    class: 'px-16px py-9px w-500px rounded-2px bg-#FFE9E7',
+    class: 'w-500px rounded-2px bg-#FFE9E7',
   });
 }
 
@@ -61,10 +61,10 @@ export const showImportResultNotification = (data: RenderNotificationData) => {
     file && downloadByUrl(file);
   };
 
-  Notification.warning({
+  notification.warning({
-    showIcon: false,
+    icon: () => null,
-    closable: true,
+    message: () => null,
-    content: () => (
+    description: (
       <div>
         <div class="flex items-center mb-4px">
           <img src={hasError ? icon1 : icon2} width="16" height="16" class="mr-8px" />
@@ -89,6 +89,6 @@ export const showImportResultNotification = (data: RenderNotificationData) => {
       </div>
     ),
     duration: 3000,
-    class: `px-16px py-16px w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
+    class: `w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
   });
 };

src/views/components/dataEngine/hotCloud.vue

@@ -20,7 +20,7 @@
             class="tag-row"
             :style="{ justifyContent: row.align || 'center' }"
           >
-            <a-tag
+            <Tag
               v-for="(tag, tagIndex) in row.tags"
               :key="tagIndex"
               class="cursor-pointer"
@@ -42,7 +42,7 @@
                 <Tooltip :title="`性价比:${Number(tag.rate * 100)}%`" placement="topLeft">
                   <span>{{ tag.term }}</span>
                 </Tooltip>
-            </a-tag>
+            </Tag>
           </div>
         </template>
       </div>
@@ -54,7 +54,7 @@
 import topHeader from './topHeader.vue';
 import { ref, computed } from 'vue';
 import { fetchindustryTerms } from '@/api/all/index';
-import { Tooltip } from 'ant-design-vue';
+import { Tooltip, Tag } from 'ant-design-vue';
 
 const topHeaderRef = ref();
 // 从topHeader获取统一的状态
@@ -198,7 +198,7 @@ const processTagData = (apiData) => {
 }
 
 /* 悬停放大效果 */
-a-tag:hover {
+.ant-tag:hover {
   transform: scale(1.1);
   z-index: 1;
 }

src/views/components/dataEngine/hotTranslation.vue

@@ -32,11 +32,11 @@
             <span v-else>{{ record.rank }}</span>
           </template>
           <template v-else-if="column.slotName === 'keywords'" #customRender="{ record }">
-            <a-tag
+            <Tag
               v-for="item in record.keywords"
               :key="item"
               class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
-              >{{ item }}</a-tag
+              >{{ item }}</Tag
             >
           </template>
           <template v-else-if="column.slotName === 'hot'" #customRender="{ record }">
@@ -105,11 +105,11 @@
           </div>
           <div class="mb-4px flex items-center">
             <p class="cts !mr-16px flex-shrink-0 w-48px">关键词</p>
-            <a-tag
+            <Tag
               v-for="item in topicInfo.keywords"
               :key="item"
               class="mr-8px py-10px px-8px rounded-4px bg-#F2F3F5 cts !h-24px"
-              >{{ item }}</a-tag
+              >{{ item }}</Tag
             >
           </div>
           <div class="mb-4px flex items-center">
@@ -153,7 +153,7 @@
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Modal, Button, Tooltip, Space, Table } from 'ant-design-vue';
+import { Modal, Button, Tooltip, Space, Table, Tag } from 'ant-design-vue';
 import { ref, computed } from 'vue';
 import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
 import star1 from '@/assets/img/hottranslation/star-fill1.png';

src/views/components/dataEngine/keyWord.vue

@@ -52,7 +52,7 @@
           <span v-else>{{ record.rank }}</span>
         </template>
         <template #keywords="{ record }">
-          <a-tag v-for="item in record.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
+          <Tag v-for="item in record.keywords" :key="item" style="margin-right: 5px">{{ item }}</Tag>
         </template>
         <template #hot="{ record }">
           <img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
@@ -269,7 +269,7 @@
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Checkbox, Modal, Button, Tooltip, Space, Table } from 'ant-design-vue';
+import { Checkbox, Modal, Button, Tooltip, Space, Table, Tag } from 'ant-design-vue';
 import {
   fetchKeywordTrendsList,
   fetchIndustryEmotions,

src/views/components/dataEngine/topHeader.vue

@@ -9,20 +9,21 @@
       <Space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
         <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">行业大类</span>
         <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
-          <a-tag
+          <Tag
             v-for="item in industriesTree"
             :key="item.id"
             size="Medium"
             :checkable="true"
             :checked="selectedIndustry == item.id"
-            style="padding: 10px 16px; border-radius: 30px; height: 28px"
+            style="padding: 0 16px; border-radius: 30px; height: 28px"
+            class="lh-28px cursor-pointer"
             :style="
               selectedIndustry == item.id
                 ? 'color: #6D4CFE; background-color: #F0EDFF'
                 : 'color: #3C4043; background-color: #F7F8FA'
             "
-            @check="handleIndustryCheck(item.id)"
+            @click="handleIndustryCheck(item.id)"
-            >{{ item.name }}</a-tag
+            >{{ item.name }}</Tag
           >
         </div>
       </Space>
@@ -30,20 +31,21 @@
       <Space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
         <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">二级类目</span>
         <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
-          <a-tag
+          <Tag
             v-for="item in subCategories"
             :key="item.id"
-            size="Medium"
+            size="small"
             :checkable="true"
             :checked="selectedSubCategory == item.id"
-            style="padding: 10px 16px; border-radius: 30px; height: 28px"
+            style="padding: 0 16px; border-radius: 30px; height: 28px"
+            class="lh-28px cursor-pointer"
             :style="
               selectedSubCategory == item.id
                 ? 'color: #6d4cfe; background-color: #f0edff'
                 : 'color: #3C4043; background-color: #F7F8FA'
             "
-            @check="handleSubCategoryCheck(item.id)"
+            @click="handleSubCategoryCheck(item.id)"
-            >{{ item.name }}</a-tag
+            >{{ item.name }}</Tag
           >
         </div>
       </Space>
@@ -51,21 +53,22 @@
       <Space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
         <span style="flex-shrink: 0; line-height: 28px" class="mr-32px">时间筛选</span>
         <div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
-          <a-tag
+          <Tag
             v-for="item in timePeriods"
             :key="item.value"
             size="Medium"
             :checkable="true"
             :checked="selectedTimePeriod == item.value"
-            style="padding: 10px 16px; border-radius: 30px; height: 28px"
+            class="lh-28px cursor-pointer"
+            style="padding: 0 16px; border-radius: 30px; height: 28px"
             :style="
               selectedTimePeriod == item.value
                 ? 'color: #6d4cfe; background-color: #f0edff'
                 : 'color: #3C4043; background-color: #F7F8FA'
             "
-            @check="handleTimePeriodCheck(item.value)"
+            @click="handleTimePeriodCheck(item.value)"
             >{{ item.label }}
-          </a-tag>
+          </Tag>
         </div>
       </Space>
       <!-- 搜索区域 -->
@@ -91,7 +94,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { fetchIndustriesTree } from '@/api/all/index';
-import { Button, Space } from 'ant-design-vue';
+import { Button, Space, Tag } from 'ant-design-vue';
 const emit = defineEmits<(e: 'search') => void>();
 // 行业大类
 const industriesTree = ref([]);
@@ -139,6 +142,7 @@ const handleIndustryCheck = (id) => {
 };
 
 const handleSubCategoryCheck = (id) => {
+  console.log('handleSubCategoryCheck');
   selectedSubCategory.value = id;
 };
 

src/views/components/dataEngine/userPainPoints.vue

@@ -39,19 +39,19 @@
             <span v-else>{{ record.rank }}</span>
           </template>
           <template v-else-if="column.slotName === 'keywords'" #customRender="{ record }">
-            <a-tag
+            <Tag
               v-for="item in record.keywords"
               :key="item"
               class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
-              >{{ item }}</a-tag
+              >{{ item }}</Tag
             >
           </template>
           <template v-else-if="column.slotName === 'frequency'" #customRender="{ record }">
-            <a-tag
+            <Tag
               :class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
                 frequencyStatus[record.frequency].color
               }`"
-              >{{ frequencyStatus[record.frequency].label }}</a-tag
+              >{{ frequencyStatus[record.frequency].label }}</Tag
             >
           </template>
           <template v-else-if="column.slotName === 'optional'" #customRender="{ record }">
@@ -84,20 +84,20 @@
           </div>
           <div class="mb-12px flex items-center">
             <p class="cts !mr-16px flex-shrink-0 w-60px">关键词</p>
-            <a-tag
+            <Tag
               v-for="item in topicInfo.keywords"
               :key="item"
               class="mr-8px py-10px px-8px rounded-4px bg-#F2F3F5 cts !h-24px"
-              >{{ item }}</a-tag
+              >{{ item }}</Tag
             >
           </div>
           <div class="mb-12px flex items-center">
             <p class="cts !mr-16px flex-shrink-0 w-60px">频次</p>
-            <a-tag
+            <Tag
               :class="`!rounded-2px !px-8px !py-1px !bg-${
                 frequencyStatus[topicInfo.frequency].bgColor
               } !h-22px !color-${frequencyStatus[topicInfo.frequency].color}`"
-              >{{ frequencyStatus[topicInfo.frequency].label }}</a-tag
+              >{{ frequencyStatus[topicInfo.frequency].label }}</Tag
             >
           </div>
           <div class="mb-12px flex items-center">
@@ -127,7 +127,7 @@
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Modal, Button, Tooltip, Space, Table } from 'ant-design-vue';
+import { Modal, Button, Tooltip, Space, Table, Tag } from 'ant-design-vue';
 import { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
 import { ref, onMounted, computed } from 'vue';
 import top1 from '@/assets/img/captcha/top1.svg';

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

@@ -15,8 +15,8 @@
         <template #customRender="{ record }">
           <div class="flex item-center pt-13px pb-13px">
             <span class="mr-4px">{{ record.mobile }}</span>
-            <a-tag v-if="record.type === 0" class="primary-account">主账号</a-tag>
+            <Tag v-if="record.type === 0" class="primary-account">主账号</Tag>
-            <a-tag v-else class="sub-account">子账号</a-tag>
+            <Tag v-else class="sub-account">子账号</Tag>
           </div>
         </template>
       </Table.Column>
@@ -63,7 +63,7 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted, reactive, computed } from 'vue';
-import { Button, Table, message } from 'ant-design-vue';
+import { Button, Table, message, Tag } from 'ant-design-vue';
 
 import { fetchSubAccountPage, removeEnterpriseAccount, getEnterpriseInviteCode } from '@/api/all';
 import Modal from '@/components/modal.vue';

src/views/components/workplace/modules/product.vue

@@ -2,10 +2,10 @@
   <div class="container">
     <div class="flex arco-row-justify-space-between">
       <img class="avatar" :src="props.product.image" :alt="props.product.name" />
-      <a-tag v-if="props.product.status === Status.Enable" class="status status-enable">已开通</a-tag>
+      <Tag v-if="props.product.status === Status.Enable" class="status status-enable">已开通</Tag>
-      <a-tag v-if="props.product.status === Status.Disable" class="status status-disable">未开通</a-tag>
+      <Tag v-if="props.product.status === Status.Disable" class="status status-disable">未开通</Tag>
-      <a-tag v-if="props.product.status === Status.EXPIRED" class="status status-expired">已到期</a-tag>
+      <Tag v-if="props.product.status === Status.EXPIRED" class="status status-expired">已到期</Tag>
-      <a-tag v-if="props.product.status === Status.TRIAL_ENDS" class="status status-expired">试用结束</a-tag>
+      <Tag v-if="props.product.status === Status.TRIAL_ENDS" class="status status-expired">试用结束</Tag>
       <a-countdown
         v-if="props.product.status === Status.ON_TRIAL"
         class="status-on-trill"
@@ -73,7 +73,7 @@ import { now } from '@vueuse/core';
 import { trialProduct } from '@/api/all';
 import { useRouter } from 'vue-router';
 import CustomerServiceModal from '@/components/customer-service-modal.vue';
-import { Button, message } from 'ant-design-vue';
+import { Button, message, Tag } from 'ant-design-vue';
 
 import { useSidebarStore } from '@/stores/modules/side-bar';
 import { useEnterpriseStore } from '@/stores/modules/enterprise';

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

@@ -118,8 +118,7 @@
 
 <script setup>
 import { ref, provide } from 'vue';
-import { Notification } from '@arco-design/web-vue';
+import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
-import { Checkbox, Button, Space, Pagination } from 'ant-design-vue';
 
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
@@ -357,7 +356,7 @@ const getSyncTaskStatus = async (id, notificationId) => {
   if (code === 200) {
     if (data?.status !== 0) {
       clearQueryTaskTimer();
-      notificationId && Notification.remove(notificationId);
+      notificationId && notification.close(notificationId);
       showImportResultNotification(data);
       getData();
     }

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

@@ -92,7 +92,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import { Checkbox, Button, Space, Pagination } from 'ant-design-vue';
+import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
 
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
@@ -262,7 +262,7 @@ const getSyncTaskStatus = async (id, notificationId) => {
   if (code === 200) {
     if (data?.status !== 0) {
       clearQueryTaskTimer();
-      notificationId && Notification.remove(notificationId);
+      notificationId && notification.close(notificationId);
       showImportResultNotification(data);
       getData();
     }