update alert

src/views/ManageLayout.vue

@@ -18,26 +18,36 @@ import {
   NAlert,
   NBackTop,
   NCountdown,
+  NTooltip,
 } from 'naive-ui'
 import { h, onMounted, ref } from 'vue'
 import { BrowsersOutline, Chatbox, Moon, MusicalNote, Sunny, AnalyticsSharp } from '@vicons/ionicons5'
-import { CalendarClock24Filled, Lottery24Filled, VehicleShip24Filled, VideoAdd20Filled } from '@vicons/fluent'
+import { CalendarClock24Filled, Chat24Filled, Info24Filled, Lottery24Filled, VehicleShip24Filled, VideoAdd20Filled } from '@vicons/fluent'
 import { isLoadingAccount, useAccount } from '@/api/account'
 import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
-import { RouterLink } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
 import { useElementSize, useStorage } from '@vueuse/core'
 import { ACCOUNT_API_URL } from '@/data/constants'
 import { QueryGetAPI } from '@/api/query'
 import { FunctionTypes, ThemeType } from '@/api/api-models'
 import { isDarkMode } from '@/Utils'
+import DanmakuLayout from './manage/DanmakuLayout.vue'
+import { computed } from '@vue/reactivity'
 
 const accountInfo = useAccount()
 const message = useMessage()
+const route = useRoute()
 
 const windowWidth = window.innerWidth
 const sider = ref()
 const { width } = useElementSize(sider)
 const themeType = useStorage('Settings.Theme', ThemeType.Auto)
+const type = computed(() => {
+  if (route.meta.danmaku) {
+    return 'danmaku'
+  }
+  return ''
+})
 
 const canResendEmail = ref(false)
 
@@ -153,33 +163,94 @@ const menuOptions = [
   },
   {
     label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: 'manage-liveLottery',
+      h(NText, () => [
+        '弹幕相关',
+        h(
+          NTooltip,
+          {
+            style: 'padding: 0;',
           },
-        },
-        { default: () => '直播抽奖' }
-      ),
-    key: 'manage-liveLottery',
-    icon: renderIcon(Lottery24Filled),
-    //disabled: accountInfo.value?.isEmailVerified == false,
-  },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: 'manage-songRequest',
-          },
-        },
-        { default: () => '弹幕点歌' }
-      ),
-    key: 'manage-songRequest',
-    icon: renderIcon(MusicalNote),
+          {
+            trigger: () => h(NIcon, { component: Info24Filled }),
+            default: () =>
+              h(
+                NAlert,
+                {
+                  type: 'warning',
+                  size: 'small',
+                  title: '可用性警告',
+                  style: 'max-width: 600px;',
+                },
+                () =>
+                  h('div', {}, [
+                    '当浏览器在后台运行时, 定时器和 Websocket 连接将受到严格限制, 这会导致弹幕接收功能无法正常工作 (详见',
+                    h(
+                      NButton,
+                      {
+                        text: true,
+                        tag: 'a',
+                        href: 'https://developer.chrome.com/blog/background_tabs/',
+                        target: '_blank',
+                        type: 'info',
+                      },
+                      '此文章'
+                    ),
+                    '), 虽然本站已经针对此问题做出了处理, 一般情况下即使掉线了也会重连, 不过还是有可能会遗漏事件',
+                    h('br'),
+                    '为避免这种情况, 建议注册本站账后使用',
+                    h(
+                      NButton,
+                      {
+                        type: 'primary',
+                        text: true,
+                        size: 'small',
+                        tag: 'a',
+                        href: 'https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p',
+                        target: '_blank',
+                      },
+                      'VtsuruEventFetcher'
+                    ),
+                    ', 否则请在使用功能时尽量保持网页在前台运行',
+                  ])
+              ),
+          }
+        ),
+      ]),
+    key: 'manage-danmaku',
+    icon: renderIcon(Chat24Filled),
     //disabled: accountInfo.value?.isEmailVerified == false,
+    children: [
+      {
+        label: () =>
+          h(
+            RouterLink,
+            {
+              to: {
+                name: 'manage-liveLottery',
+              },
+            },
+            { default: () => '直播抽奖' }
+          ),
+        key: 'manage-liveLottery',
+        icon: renderIcon(Lottery24Filled),
+        //disabled: accountInfo.value?.isEmailVerified == false,
+      },
+      {
+        label: () =>
+          h(
+            RouterLink,
+            {
+              to: {
+                name: 'manage-songRequest',
+              },
+            },
+            { default: () => '点歌' }
+          ),
+        key: 'manage-songRequest',
+        icon: renderIcon(MusicalNote),
+        //disabled: accountInfo.value?.isEmailVerified == false,
+      },
+    ],
   },
 ]
 
@@ -226,7 +297,7 @@ onMounted(() => {
                 <NIcon :component="Moon" />
               </template>
             </NSwitch>
-            <NButton size="small" style="right: 0px; position: relative" type="primary" @click="$router.push({ name: 'user-index', params: { id: accountInfo.name } })"> 回到主页 </NButton>
+            <NButton size="small" style="right: 0px; position: relative" type="primary" @click="$router.push({ name: 'user-index', params: { id: accountInfo?.name } })"> 回到主页 </NButton>
           </NSpace>
         </template>
       </NPageHeader>
@@ -260,9 +331,10 @@ onMounted(() => {
         <NScrollbar style="height: calc(100vh - 50px)">
           <NLayout>
             <div style="box-sizing: border-box; padding: 20px; min-width: 300px">
-              <RouterView v-slot="{ Component }" v-if="accountInfo?.isEmailVerified">
+              <RouterView v-if="accountInfo?.isEmailVerified" v-slot="{ Component, route }">
                 <KeepAlive>
-                  <Suspense>
+                  <DanmakuLayout v-if="route.meta.danmaku" :component="Component" />
+                  <Suspense v-else>
                     <component :is="Component" />
                     <template #fallback>
                       <NSpin show />

src/views/OpenLiveLayout.vue

@@ -80,12 +80,16 @@ const menuOptions = [
 function renderIcon(icon: unknown) {
   return () => h(NIcon, null, { default: () => h(icon as any) })
 }
-
+const danmakuClientError = ref<string>()
 onMounted(async () => {
   authInfo.value = route.query as unknown as AuthInfo
   if (authInfo.value?.Code) {
     client.value = new DanmakuClient(authInfo.value)
-    await client.value.Start()
+    const result = await client.value.Start()
+    if (!result.success) {
+      message.error('无法启动弹幕客户端: ' + result.message)
+      danmakuClientError.value = result.message
+    }
   } else {
     message.error('你不是从幻星平台访问此页面, 或未提供对应参数, 无法使用此功能')
   }
@@ -159,6 +163,9 @@ onUnmounted(() => {
         </NSpace>
       </NLayoutSider>
       <NLayoutContent style="height: 100%; padding: 10px" :native-scrollbar="false">
+        <NAlert v-if="danmakuClientError" type="error" title="无法启动弹幕客户端">
+          {{ danmakuClientError }}
+        </NAlert>
         <RouterView v-if="client?.roomAuthInfo.value" v-slot="{ Component }">
           <KeepAlive>
             <component :is="Component" :room-info="client?.roomAuthInfo" :client="client" :code="authInfo.Code" />

src/views/manage/DanmakuLayout.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account'
+import DanmakuClient from '@/data/DanmakuClient'
+import { NAlert, NSpin, useMessage } from 'naive-ui'
+import { VNode, onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps<{
+  component: VNode
+}>()
+
+const accountInfo = useAccount()
+const message = useMessage()
+
+let client = new DanmakuClient(null)
+const isClientLoading = ref(true)
+
+onMounted(async () => {
+  const result = await client.Start()
+  if (!result.success) {
+    message.error('无法启动弹幕客户端: ' + result.message)
+  }
+  isClientLoading.value = false
+})
+onUnmounted(() => {
+  client.Stop()
+})
+</script>
+
+<template>
+  <NAlert v-if="accountInfo?.isBiliVerified != true" type="info"> 尚未进行Bilibili认证 </NAlert>
+  <NSpin v-else-if="isClientLoading" show />
+  <KeepAlive v-else>
+    <component :is="component" :client="client" :room-info="client.roomAuthInfo?.value" :code="accountInfo?.biliAuthCode"/>
+  </KeepAlive>
+</template>

src/views/manage/LotteryView.vue

@@ -66,7 +66,7 @@ const lotteryHistory = useStorage<LotteryHistory[]>('LotteryHistory', [])
 
 const message = useMessage()
 const notification = useNotification()
-const token = ref()
+const token = ref('')
 const turnstile = ref()
 const defaultOption = {
   resultCount: 1,

src/views/open_live/OpenLiveIndex.vue

@@ -22,7 +22,7 @@ const accountInfo = useAccount()
       </template>
     </NCard>
     <NCard hoverable embedded size="small" title="弹幕点歌" style="width: 300px">
-      通过弹幕或者SC进行点歌, 注册后可以保存和导出 (开发中
+      通过弹幕或者SC进行点歌, 注册后可以保存和导出 (这个是歌势用的点歌, 不是拿来放歌的那种!)
       <template #footer>
         <NButton @click="$router.push({ name: 'open-live-song-request', query: $route.query })" type="primary"> 前往使用 </NButton>
       </template>
@@ -30,7 +30,7 @@ const accountInfo = useAccount()
   </NSpace>
   <br />
   <NAlert v-if="accountInfo?.eventFetcherOnline != true" type="warning" title="可用性警告" style="max-width: 600px; margin: 0 auto">
-    当浏览器在后台运行时定时器和 Websocket 连接将受到严格限制, 这会导致弹幕接收功能无法正常工作 (详见
+    当浏览器在后台运行时, 定时器和 Websocket 连接将受到严格限制, 这会导致弹幕接收功能无法正常工作 (详见
     <NButton text tag="a" href="https://developer.chrome.com/blog/background_tabs/" target="_blank" type="info">此文章</NButton>), 虽然本站已经针对此问题做出了处理, 一般情况下即使掉线了也会重连,
     不过还是有可能会遗漏事件
     <br />

src/views/open_live/OpenLottery.vue

@@ -317,10 +317,8 @@ onMounted(async () => {
       message.info('从历史记录中加载 ' + users.length + ' 位用户')
     }
   }
-  if (props.client) {
-    props.client.on('danmaku', onDanmaku)
-    props.client.on('gift', onGift)
-  }
+  props.client?.on('danmaku', onDanmaku)
+  props.client?.on('gift', onGift)
   timer = setInterval(updateUsers, 1000 * 10)
 })
 onUnmounted(() => {