feat(admin): 增加工作台大屏和转码通知

src/layout/components/TranscodeNoticeButton.vue

@@ -0,0 +1,89 @@
+<!-- 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>