90 lines
2.1 KiB
Vue
90 lines
2.1 KiB
Vue
<!-- Author: fruit.com.cn -->
|
||
<!-- 顶栏转码通知：角标汇总转码中、成功、失败，点击进入通知页。 -->
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { Bell } from '@element-plus/icons-vue'
|
||
import { getTranscodeNoticesApi } from '@/api/admin/transcodeNotice'
|
||
import { TRANSCODE_NOTICE_SEEN, unreadCounts } from '@/utils/transcodeNoticeSeen'
|
||
|
||
const POLL_MS = 30000
|
||
const BADGE_MAX = 99
|
||
|
||
defineProps<{ color?: string }>()
|
||
const router = useRouter()
|
||
const running = ref(0)
|
||
const success = ref(0)
|
||
const failed = ref(0)
|
||
const seenTick = ref(0)
|
||
let timer = 0
|
||
|
||
const total = computed(() => {
|
||
seenTick.value
|
||
const unread = unreadCounts({
|
||
running: running.value,
|
||
success: success.value,
|
||
failed: failed.value
|
||
})
|
||
return unread.running + unread.success + unread.failed
|
||
})
|
||
|
||
async function refresh() {
|
||
const res = await getTranscodeNoticesApi()
|
||
running.value = Number(res.data?.running || 0)
|
||
success.value = Number(res.data?.success || 0)
|
||
failed.value = Number(res.data?.failed || 0)
|
||
}
|
||
|
||
function open() {
|
||
router.push({ name: 'transcode-notices' })
|
||
}
|
||
|
||
function onSeen() {
|
||
seenTick.value += 1
|
||
}
|
||
|
||
onMounted(() => {
|
||
refresh().catch(() => undefined)
|
||
window.addEventListener(TRANSCODE_NOTICE_SEEN, onSeen)
|
||
timer = window.setInterval(() => {
|
||
refresh().catch(() => undefined)
|
||
}, POLL_MS)
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener(TRANSCODE_NOTICE_SEEN, onSeen)
|
||
window.clearInterval(timer)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<el-badge :value="total" :max="BADGE_MAX" :hidden="total === 0" class="notice-badge">
|
||
<div class="notice-button" :style="{ color }" @click="open">
|
||
<el-icon :size="18"><Bell /></el-icon>
|
||
</div>
|
||
</el-badge>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.notice-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.notice-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.notice-badge :deep(.el-badge__content.is-fixed) {
|
||
top: 8px;
|
||
right: 2px;
|
||
}
|
||
</style>
|