add to manage page

src/router/index.ts

@@ -189,6 +189,15 @@ const routes: Array<RouteRecordRaw> = [
           keepAlive: true,
         },
       },
+      {
+        path: 'song-request',
+        name: 'manage-songRequest',
+        component: () => import('@/views/manage/SongRequestManage.vue'),
+        meta: {
+          title: '弹幕点歌',
+          keepAlive: true,
+        },
+      },
     ],
   },
   {

src/views/ManageLayout.vue

@@ -166,6 +166,21 @@ const menuOptions = [
     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,
+  },
 ]
 
 async function resendEmail() {

src/views/manage/SongRequestManage.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account'
+import DanmakuClient from '@/data/DanmakuClient'
+import { onMounted, onUnmounted } from 'vue'
+import MusicRequest from '../open_live/MusicRequest.vue'
+import { NAlert } from 'naive-ui'
+
+const accountInfo = useAccount()
+let client = new DanmakuClient(null)
+
+onMounted(() => {
+  client.Start()
+})
+onUnmounted(() => {
+  client.Stop()
+})
+</script>
+
+<template>
+  <NAlert v-if="accountInfo?.isBiliVerified != true" type="info"> 尚未进行Bilibili认证 </NAlert>
+  <MusicRequest v-else :client="client" :room-info="client.roomAuthInfo.value" :code="accountInfo?.biliAuthCode" />
+</template>

src/views/obs/SongRequestOBS.vue

@@ -93,7 +93,7 @@ onUnmounted(() => {
     <div class="song-request-singing-container" :singing="songs.findIndex((s) => s.status == SongRequestStatus.Singing) > -1">
       <div class="song-request-singing-prefix"></div>
       <template v-if="singing">
-        <img class="song-request-singing-avatar" :src="AVATAR_URL + singing?.user?.uid" />
+        <img class="song-request-singing-avatar" :src="AVATAR_URL + singing?.user?.uid" referrerpolicy="no-referrer" />
         <p class="song-request-singing-song-name">{{ singing?.songName }}</p>
         <p class="song-request-singing-name">{{ singing?.user?.name }}</p>
       </template>