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

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