tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 导航栏通知样式优化

Browse Source
This commit is contained in:
Ray.Hao
2025-02-17 23:56:48 +08:00
parent b450539e10
commit ccf2f900da
1 changed files with 43 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
src/layout/components/NavBar/components/Notification.vue
View File

@@ -1,162 +1,61 @@
<template> <template>
<div> <div>
<el-dropdown class="wh-full"> <el-dropdown class="wh-full flex-center" trigger="click">
<el-badge v-if="notices.length > 0" :offset="[-10, 15]" :value="notices.length" :max="99"> <el-badge v-if="notices.length > 0" :offset="[-10, 15]" :value="notices.length" :max="99">
<el-icon> <el-icon>
<Bell /> <Bell />
</el-icon> </el-icon>
</el-badge> </el-badge>
<el-badge v-else>
<div v-else>
<el-icon> <el-icon>
<Bell /> <Bell />
</el-icon> </el-icon>
</el-badge> </div>
<template #dropdown> <template #dropdown>
<div class="p-2"> <div class="p-2">
<el-tabs v-model="activeTab"> <template v-if="notices.length > 0">
<el-tab-pane label="通知" name="notice"> <div v-for="(item, index) in notices" :key="index" class="w500px py-3">
<template v-if="notices.length > 0"> <div class="flex-y-center">
<div v-for="(item, index) in notices" :key="index" class="w500px py-3"> <DictLabel v-model="item.type" code="notice_type" size="small" />
<div class="flex-y-center"> <el-text
<DictLabel v-model="item.type" code="notice_type" size="small" /> size="small"
<el-text class="w200px cursor-pointer !ml-2 !flex-1"
size="small" truncated
class="w200px cursor-pointer !ml-2 !flex-1" @click="readNotice(item.id)"
truncated >
@click="readNotice(item.id)" {{ item.title }}
> </el-text>
{{ item.title }}
</el-text>
<div class="text-xs text-gray"> <div class="text-xs text-gray">
{{ item.publishTime }} {{ item.publishTime }}
</div>
</div>
</div> </div>
</template>
<template v-else>
<div class="flex-center h150px w350px">
<el-empty :image-size="50" description="暂无通知" />
</div>
</template>
<el-divider />
<div class="flex-x-between">
<el-link type="primary" :underline="false" @click="viewMoreNotice">
<span class="text-xs">查看更多</span>
<el-icon class="text-xs">
<ArrowRight />
</el-icon>
</el-link>
<el-link
v-if="notices.length > 0"
type="primary"
:underline="false"
@click="markAllAsRead"
>
<span class="text-xs">全部已读</span>
</el-link>
</div> </div>
</el-tab-pane> </div>
<el-tab-pane label="消息" name="message"> <el-divider />
<template v-if="messages.length > 0"> <div class="flex-x-between">
<div <el-link type="primary" :underline="false" @click="viewMoreNotice">
v-for="(item, index) in messages" <span class="text-xs">查看更多</span>
:key="index" <el-icon class="text-xs">
class="w400px flex-x-between p-1" <ArrowRight />
> </el-icon>
<div class="flex-y-center"> </el-link>
<DictLabel v-model="item.type" code="notice_type" size="small" /> <el-link
<el-link v-if="notices.length > 0"
type="primary" type="primary"
class="w200px cursor-pointer !ml-2 !flex-1" :underline="false"
@click="readNotice(item.id)" @click="markAllAsRead"
> >
{{ item.title }} <span class="text-xs">全部已读</span>
</el-link> </el-link>
</div>
<div class="text-xs text-gray-400"> </template>
{{ item.publishTime }} <template v-else>
</div> <div class="flex-center h150px w350px">
</div> <el-empty :image-size="50" description="暂无通知" />
</div> </div>
</template> </template>
<template v-else>
<div class="flex-center h150px w350px">
<el-empty :image-size="50" description="暂无消息" />
</div>
</template>
<el-divider />
<div class="flex-x-between">
<el-link
v-if="tasks.length > 5"
type="primary"
:underline="false"
@click="viewMoreNotice"
>
<span class="text-xs">查看更多</span>
<el-icon class="text-xs">
<ArrowRight />
</el-icon>
</el-link>
<el-link
v-if="messages.length > 0"
type="primary"
:underline="false"
@click="markAllAsRead"
>
<span class="text-xs">全部已读</span>
</el-link>
</div>
</el-tab-pane>
<el-tab-pane label="待办" name="task">
<template v-if="tasks.length > 0">
<div v-for="(item, index) in tasks" :key="index" class="w500px py-3">
<div class="flex-y-center">
<DictLabel v-model="item.type" code="notice_type" size="small" />
<el-link
type="primary"
class="w200px cursor-pointer !ml-2 !flex-1"
@click="readNotice(item.id)"
>
{{ item.title }}
</el-link>
<div class="text-xs text-gray-400">
{{ item.publishTime }}
</div>
</div>
</div>
</template>
<template v-else>
<div class="flex-center h150px w350px">
<el-empty :image-size="50" description="暂无待办" />
</div>
</template>
<el-divider />
<div class="flex-x-between">
<el-link
v-if="tasks.length > 5"
type="primary"
:underline="false"
@click="viewMoreNotice"
>
<span class="text-xs">查看更多</span>
<el-icon class="text-xs">
<ArrowRight />
</el-icon>
</el-link>
<el-link
v-if="tasks.length > 0"
type="primary"
:underline="false"
@click="markAllAsRead"
>
<span class="text-xs">全部已读</span>
</el-link>
</div>
</el-tab-pane>
</el-tabs>
</div> </div>
</template> </template>
</el-dropdown> </el-dropdown>
@@ -169,16 +68,11 @@
import NoticeAPI, { NoticePageVO } from "@/api/system/notice"; import NoticeAPI, { NoticePageVO } from "@/api/system/notice";
import router from "@/router"; import router from "@/router";
const activeTab = ref("notice");
const notices = ref<NoticePageVO[]>([]); const notices = ref<NoticePageVO[]>([]);
const messages = ref<any[]>([]);
const tasks = ref<any[]>([]);
const noticeDetailRef = ref(); const noticeDetailRef = ref();
import { useStomp } from "@/hooks/useStomp"; import { useStomp } from "@/hooks/useStomp";
const { subscribe, unsubscribe, isConnected } = useStomp({ const { subscribe, unsubscribe, isConnected } = useStomp();
debug: true,
});
watch( watch(
() => isConnected.value, () => isConnected.value,