renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tag，Notification替换

Browse Source
This commit is contained in:
rd
2025-09-05 13:51:33 +08:00
parent 57156792cc
commit f6b91fce4f
15 changed files with 94 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 { Notification } from '@arco-design/web-vue';
import { Button, Checkbox, Input, Tooltip, Table, Pagination, message, notification } from 'ant-design-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('批量下载已完成，正在下载文件...');

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

@ -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 = () => {

15
src/styles/components/ant-notification.scss Normal file
View File

@ -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%);
}
}

4
src/styles/components/ant-tag.scss Normal file
View File

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

2
src/styles/components/index.scss
View File

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

38
src/utils/arcoD.tsx
View File

@ -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 ?? {}
Notification.warning({
id,
showIcon: false,
closable: true,
content: () => (
const { id = '', duration = 3 } = others ?? {}
notification.warning({
key: id,
icon: () => null,
message: () => null,
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({
id,
showIcon: false,
closable: true,
content: () => (
notification.warning({
key: id,
icon: () => null,
message: () => null,
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({
showIcon: false,
closable: true,
content: () => (
notification.warning({
icon: () => null,
message: () => null,
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'}`,
});
};

8
src/views/components/dataEngine/hotCloud.vue
View File

@ -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;
}

10
src/views/components/dataEngine/hotTranslation.vue
View File

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

4
src/views/components/dataEngine/keyWord.vue
View File

@ -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,

32
src/views/components/dataEngine/topHeader.vue
View File

@ -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)"
>{{ item.name }}</a-tag
@click="handleIndustryCheck(item.id)"
>{{ 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)"
>{{ item.name }}</a-tag
@click="handleSubCategoryCheck(item.id)"
>{{ 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;
};

18
src/views/components/dataEngine/userPainPoints.vue
View File

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

6
src/views/components/management/account/index.vue
View File

@ -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>
<a-tag v-else class="sub-account">子账号</a-tag>
<Tag v-if="record.type === 0" class="primary-account">主账号</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';

10
src/views/components/workplace/modules/product.vue
View File

@ -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>
<a-tag v-if="props.product.status === Status.Disable" class="status status-disable">未开通</a-tag>
<a-tag v-if="props.product.status === Status.EXPIRED" class="status status-expired">已到期</a-tag>
<a-tag v-if="props.product.status === Status.TRIAL_ENDS" class="status status-expired">试用结束</a-tag>
<Tag v-if="props.product.status === Status.Enable" class="status status-enable">已开通</Tag>
<Tag v-if="props.product.status === Status.Disable" class="status status-disable">未开通</Tag>
<Tag v-if="props.product.status === Status.EXPIRED" class="status status-expired">已到期</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';

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

@ -118,8 +118,7 @@
<script setup>
import { ref, provide } from 'vue';
import { Notification } from '@arco-design/web-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';
@ -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();
}

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

@ -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();
}