From 8419a18b222ccadd1f4ff8e1bfa1889b86f76fde Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Sun, 24 Dec 2023 00:00:00 +0800
Subject: [PATCH] update alert

---
 .github/workflows/node.js.yml           |    3 -
 src/api/api-models.ts                   |    1 +
 src/components/RegisterAndLogin.vue     |    6 +-
 src/data/constants.ts                   |    1 +
 src/views/ManageLayout.vue              |   31 +-
 src/views/VideoCollectPublic.vue        |    5 +-
 src/views/manage/DashboardView.vue      |    5 +-
 src/views/manage/LotteryView.vue        |    6 +-
 src/views/manage/SongListManageView.vue |    1 +
 src/views/open_live/MusicRequest.vue    | 1106 +----------------------
 src/views/open_live/ReadDanmaku.vue     |   47 +-
 src/views/open_live/SongRequest.vue     | 1101 ++++++++++++++++++++++
 12 files changed, 1221 insertions(+), 1092 deletions(-)
 create mode 100644 src/views/open_live/SongRequest.vue

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 87ffab8..61884fb 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -32,8 +32,5 @@ jobs:
     - name: Check Yarn Version
       run: yarn --version
 
-    - name: Install dependencies
-      run: yarn install
-
     - name: Build the project
       run: yarn build
diff --git a/src/api/api-models.ts b/src/api/api-models.ts
index 070067d..7e90d88 100644
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -194,6 +194,7 @@ export interface SongsInfo {
   updateTime: number
   //paidSong: boolean
   options?: SongRequestOption
+  cover?: string
 }
 export interface SongRequestOption {
   needJianzhang: boolean
diff --git a/src/components/RegisterAndLogin.vue b/src/components/RegisterAndLogin.vue
index c48bc14..2804329 100644
--- a/src/components/RegisterAndLogin.vue
+++ b/src/components/RegisterAndLogin.vue
@@ -4,7 +4,7 @@ import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
 import { useLocalStorage } from '@vueuse/core'
 import { FormInst, FormItemInst, FormItemRule, FormRules, NAlert, NButton, NCard, NCountdown, NDivider, NForm, NFormItem, NInput, NSpace, NTabPane, NTabs, useMessage } from 'naive-ui'
-import { ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 
 interface RegisterModel {
@@ -179,6 +179,10 @@ function onForgetPasswordClick() {
     selectedTab.value = 'forget'
   }, 50)
 }
+
+onUnmounted(() => {
+  turnstile.value?.remove()
+})
 </script>
 
 <template>
diff --git a/src/data/constants.ts b/src/data/constants.ts
index 662d272..465f5c9 100644
--- a/src/data/constants.ts
+++ b/src/data/constants.ts
@@ -31,6 +31,7 @@ export const QUEUE_API_URL = { toString: () => `${BASE_API()}queue/` }
 export const EVENT_API_URL = { toString: () => `${BASE_API()}event/` }
 export const LIVE_API_URL = { toString: () => `${BASE_API()}live/` }
 export const FEEDBACK_API_URL = { toString: () => `${BASE_API()}feedback/` }
+export const MUSIC_REQUEST_API_URL = { toString: () => `${BASE_API()}vtsuru/` }
 export const VTSURU_API_URL = { toString: () => `${BASE_API()}vtsuru/` }
 
 export const ScheduleTemplateMap = {
diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue
index f4ed8dc..cb31641 100644
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -211,7 +211,7 @@ const menuOptions = [
                 },
                 () =>
                   h('div', {}, [
-                    '当浏览器在后台运行时, 定时器和 Websocket 连接将受到严格限制, 这会导致弹幕接收功能无法正常工作 (详见',
+                    '    当浏览器在后台运行时, 定时器和 Websocket 连接将受到严格限制, 这会导致弹幕接收功能无法正常工作 (详见',
                     h(
                       NButton,
                       {
@@ -238,7 +238,34 @@ const menuOptions = [
                       },
                       () => 'VtsuruEventFetcher',
                     ),
-                    ', 否则请在使用功能时尽量保持网页在前台运行',
+                    ', 否则请在使用功能时尽量保持网页在前台运行, 同时关闭浏览器的 页面休眠/内存节省 功能',
+                    h('br'),
+                    'Chrome: ',
+                    h(
+                      NButton,
+                      {
+                        type: 'info',
+                        text: true,
+                        size: 'small',
+                        tag: 'a',
+                        href: 'https://support.google.com/chrome/answer/12929150?hl=zh-Hans#zippy=%2C%E5%BC%80%E5%90%AF%E6%88%96%E5%85%B3%E9%97%AD%E7%9C%81%E5%86%85%E5%AD%98%E6%A8%A1%E5%BC%8F%2C%E8%AE%A9%E7%89%B9%E5%AE%9A%E7%BD%91%E7%AB%99%E4%BF%9D%E6%8C%81%E6%B4%BB%E5%8A%A8%E7%8A%B6%E6%80%81',
+                        target: '_blank',
+                      },
+                      () => '让特定网站保持活动状态',
+                    ),
+                    ', Edge: ',
+                    h(
+                      NButton,
+                      {
+                        type: 'info',
+                        text: true,
+                        size: 'small',
+                        tag: 'a',
+                        href: 'https://support.microsoft.com/zh-cn/topic/%E4%BA%86%E8%A7%A3-microsoft-edge-%E4%B8%AD%E7%9A%84%E6%80%A7%E8%83%BD%E5%8A%9F%E8%83%BD-7b36f363-2119-448a-8de6-375cfd88ab25',
+                        target: '_blank',
+                      },
+                      () => '永远不想进入睡眠状态的网站',
+                    ),
                   ]),
               ),
           },
diff --git a/src/views/VideoCollectPublic.vue b/src/views/VideoCollectPublic.vue
index f5b49c6..a14a196 100644
--- a/src/views/VideoCollectPublic.vue
+++ b/src/views/VideoCollectPublic.vue
@@ -4,7 +4,7 @@ import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
 import { TURNSTILE_KEY, VIDEO_COLLECT_API_URL } from '@/data/constants'
 import { NAlert, NButton, NCard, NDivider, NInput, NInputNumber, NLayoutContent, NResult, NSpace, NText, useMessage } from 'naive-ui'
-import { ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import VueTurnstile from 'vue-turnstile'
 
@@ -63,6 +63,9 @@ async function add() {
       turnstile.value?.reset()
     })
 }
+onUnmounted(() => {
+  turnstile.value?.remove()
+})
 </script>
 
 <template>
diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
index 36f00ff..f44b441 100644
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -7,7 +7,7 @@ import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
 import { Question24Regular } from '@vicons/fluent'
 import { useLocalStorage } from '@vueuse/core'
 import { NAlert, NButton, NCard, NCountdown, NDivider, NEllipsis, NIcon, NInput, NInputGroup, NModal, NPopconfirm, NSpace, NTag, NText, NTime, NTooltip, useMessage } from 'naive-ui'
-import { ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 import SettingsManageView from './SettingsManageView.vue'
 
@@ -193,6 +193,9 @@ async function ChangeBili() {
       isLoading.value = false
     })
 }
+onUnmounted(() => {
+  turnstile.value?.remove()
+})
 </script>
 
 <template>
diff --git a/src/views/manage/LotteryView.vue b/src/views/manage/LotteryView.vue
index 2d21cec..1d081c2 100644
--- a/src/views/manage/LotteryView.vue
+++ b/src/views/manage/LotteryView.vue
@@ -33,7 +33,7 @@ import {
   useMessage,
   useNotification,
 } from 'naive-ui'
-import { computed, h, ref } from 'vue'
+import { computed, h, onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 
 interface TempLotteryResponseModel {
@@ -310,6 +310,10 @@ function getLevelColor(level: number) {
     }
   }
 }
+
+onUnmounted(() => {
+  turnstile.value?.remove()
+})
 </script>
 
 <template>
diff --git a/src/views/manage/SongListManageView.vue b/src/views/manage/SongListManageView.vue
index b3424c1..82b9f43 100644
--- a/src/views/manage/SongListManageView.vue
+++ b/src/views/manage/SongListManageView.vue
@@ -233,6 +233,7 @@ async function addSongs(songsShoudAdd: SongsInfo[], from: SongFrom) {
       Author: s.author,
       Url: s.url,
       Description: s.description,
+      Cover: s.cover,
     })),
   )
 }
diff --git a/src/views/open_live/MusicRequest.vue b/src/views/open_live/MusicRequest.vue
index 79e359f..888f8aa 100644
--- a/src/views/open_live/MusicRequest.vue
+++ b/src/views/open_live/MusicRequest.vue
@@ -1,108 +1,26 @@
 <script setup lang="ts">
-import { AddBiliBlackList, SaveEnableFunctions, useAccount } from '@/api/account'
-import { DanmakuUserInfo, EventDataTypes, EventModel, FunctionTypes, Setting_SongRequest, SongRequestFrom, SongRequestInfo, SongRequestStatus, SongsInfo } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
-import SongPlayer from '@/components/SongPlayer.vue'
-import DanmakuClient, { DanmakuInfo, RoomAuthInfo, SCInfo } from '@/data/DanmakuClient'
-import { SONG_REQUEST_API_URL } from '@/data/constants'
-import { Checkmark12Regular, Delete24Filled, Dismiss16Filled, Info24Filled, Mic24Filled, PeopleQueue24Filled, Play24Filled, PresenceBlocked16Regular } from '@vicons/fluent'
-import { ReloadCircleSharp } from '@vicons/ionicons5'
+import { EventModel, SongsInfo } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import DanmakuClient, { RoomAuthInfo } from '@/data/DanmakuClient'
+import { MUSIC_REQUEST_API_URL } from '@/data/constants'
 import { useStorage } from '@vueuse/core'
-import { isSameDay } from 'date-fns'
-import { List } from 'linqts'
-import {
-  DataTableColumns,
-  NAlert,
-  NButton,
-  NCard,
-  NCheckbox,
-  NCollapse,
-  NCollapseItem,
-  NDataTable,
-  NDivider,
-  NEmpty,
-  NIcon,
-  NInput,
-  NInputGroup,
-  NInputGroupLabel,
-  NInputNumber,
-  NLi,
-  NList,
-  NListItem,
-  NModal,
-  NPopconfirm,
-  NSpace,
-  NSpin,
-  NSwitch,
-  NTabPane,
-  NTabs,
-  NTag,
-  NText,
-  NTime,
-  NTooltip,
-  NUl,
-  useMessage,
-  useNotification,
-} from 'naive-ui'
-import { computed, h, onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import SongRequestOBS from '../obs/SongRequestOBS.vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+import APlayer from 'vue3-aplayer'
 
-const defaultSettings = {
-  orderPrefix: '点歌',
-  onlyAllowSongList: false,
-  queueMaxSize: 10,
-  allowAllDanmaku: true,
-  allowFromWeb: true,
-  needWearFanMedal: false,
-  needJianzhang: false,
-  needTidu: false,
-  needZongdu: false,
-  allowSC: true,
-  scIgnoreLimit: true,
-  scMinPrice: 30,
-  fanMedalMinLevel: 0,
-  allowReorderSong: false,
-  enableCooldown: false,
-  cooldownSecond: 1200,
-  zongduCooldownSecond: 300,
-  tiduCooldownSecond: 600,
-  jianzhangCooldownSecond: 900,
-  isReverse: false,
-} as Setting_SongRequest
-const STATUS_MAP = {
-  [SongRequestStatus.Waiting]: '等待中',
-  [SongRequestStatus.Singing]: '演唱中',
-  [SongRequestStatus.Finish]: '已演唱',
-  [SongRequestStatus.Cancel]: '已取消',
+type MusicRequestSettings = {
+  playMusicWhenFree: boolean
+}
+type Music = {
+  title: string
+  artist: string
+  src: string
+  pic: string
+  lrc: string
 }
 
-const route = useRoute()
-const accountInfo = useAccount()
-const message = useMessage()
-const notice = useNotification()
-
-const isWarnMessageAutoClose = useStorage('SongRequest.Settings.WarnMessageAutoClose', false)
-const volumn = useStorage('Settings.Volumn', 0.5)
-const isReverse = useStorage('SongRequest.Settings.Reverse', false)
-
-const isLoading = ref(false)
-const showOBSModal = ref(false)
-
-const settings = computed({
-  get: () => {
-    if (accountInfo.value) {
-      return accountInfo.value.settings.songRequest
-    }
-    return defaultSettings
-  },
-  set: (value) => {
-    if (accountInfo.value) {
-      accountInfo.value.settings.songRequest = value
-    }
-  },
+const settings = useStorage<MusicRequestSettings>('Setting.MusicRequest', {
+  playMusicWhenFree: true,
 })
-const selectedSong = ref<SongsInfo>()
 
 const props = defineProps<{
   client: DanmakuClient
@@ -111,991 +29,35 @@ const props = defineProps<{
   isOpenLive?: boolean
 }>()
 
-const localActiveSongs = useStorage('SongRequest.ActiveSongs', [] as SongRequestInfo[])
-const originSongs = ref<SongRequestInfo[]>(await getAllSong())
-const songs = computed(() => {
-  const result = originSongs.value.filter((s) => {
-    if (filterName.value) {
-      if (filterNameContains.value) {
-        if (!s.user?.name.toLowerCase().includes(filterName.value.toLowerCase())) {
-          return false
-        }
-      } else if (s.user?.name.toLowerCase() !== filterName.value.toLowerCase()) {
-        return false
-      }
-    } else if (filterSongName.value) {
-      if (filterSongNameContains.value) {
-        if (!s.songName.toLowerCase().includes(filterSongName.value.toLowerCase())) {
-          return false
-        }
-      } else if (s.songName.toLowerCase() !== filterSongName.value.toLowerCase()) {
-        return false
-      }
-    }
-    return true
-  })
-  if (configCanEdit.value ? settings.value.isReverse : isReverse.value) {
-    return result.reverse()
-  } else {
-    return result
-  }
-})
-const activeSongs = computed(() => {
-  return (accountInfo ? songs.value : localActiveSongs.value)
-    .sort((a, b) => b.status - a.status)
-    .filter((song) => {
-      return song.status == SongRequestStatus.Waiting || song.status == SongRequestStatus.Singing
-    })
-})
-const historySongs = computed(() => {
-  return (accountInfo ? songs.value : localActiveSongs.value)
-    .sort((a, b) => a.status - b.status)
-    .filter((song) => {
-      return song.status == SongRequestStatus.Finish || song.status == SongRequestStatus.Cancel
-    })
-})
+const aplayer = ref()
 
-const newSongName = ref('')
-const filterSongName = ref('')
-const filterSongNameContains = ref(false)
-const filterName = ref('')
-const filterNameContains = ref(false)
+const musics = ref<Music[]>([])
 
-const defaultPrefix = useStorage('Settings.SongRequest.DefaultPrefix', '点歌')
-const configCanEdit = computed(() => {
-  return accountInfo.value != null && accountInfo.value != undefined
-})
-
-const table = ref()
-
-async function getAllSong() {
-  if (accountInfo.value) {
-    try {
-      const data = await QueryGetAPI<SongRequestInfo[]>(SONG_REQUEST_API_URL + 'get-all', {
-        id: accountInfo.value.id,
-      })
-      if (data.code == 200) {
-        console.log('[OPEN-LIVE-Song-Request] 已获取所有数据')
-        return new List(data.data).OrderByDescending((s) => s.createAt).ToArray()
-      } else {
-        message.error('无法获取数据: ' + data.message)
-        return []
-      }
-    } catch (err) {
-      message.error('无法获取数据')
-    }
-    return []
-  } else {
-    return localActiveSongs.value
-  }
-}
-async function addSong(danmaku: EventModel) {
-  console.log(`[OPEN-LIVE-Song-Request] 收到 [${danmaku.name}] 的点歌${danmaku.type == EventDataTypes.SC ? 'SC' : '弹幕'}: ${danmaku.msg}`)
-  if (settings.value.enableOnStreaming && accountInfo.value?.streamerInfo?.isStreaming != true) {
-    message.info('当前未在直播中, 无法添加点歌请求. 或者关闭设置中的仅允许直播时加入')
-    return
-  }
-  if (accountInfo.value) {
-    await QueryPostAPI<SongRequestInfo>(SONG_REQUEST_API_URL + 'try-add', danmaku).then((data) => {
-      if (data.code == 200) {
-        message.success(`[${danmaku.name}] 添加曲目: ${data.data.songName}`)
-        if (data.message != 'EventFetcher') originSongs.value.unshift(data.data)
-      } else {
-        //message.error(`[${danmaku.name}] 添加曲目失败: ${data.message}`)
-        const time = Date.now()
-        notice.warning({
-          title: danmaku.name + ' 点歌失败',
-          description: data.message,
-          duration: isWarnMessageAutoClose.value ? 3000 : 0,
-          meta: () => h(NTime, { type: 'relative', time: time, key: updateKey.value }),
-        })
-        console.log(`[OPEN-LIVE-Song-Request] [${danmaku.name}] 添加曲目失败: ${data.message}`)
-      }
-    })
-  } else {
-    const songData = {
-      songName: danmaku.msg.trim().substring(settings.value.orderPrefix.length),
-      song: undefined,
-      status: SongRequestStatus.Waiting,
-      from: danmaku.type == EventDataTypes.Message ? SongRequestFrom.Danmaku : SongRequestFrom.SC,
-      scPrice: danmaku.type == EventDataTypes.SC ? danmaku.price : 0,
-      user: {
-        name: danmaku.name,
-        uid: danmaku.uid,
-        fans_medal_level: danmaku.fans_medal_level,
-        fans_medal_name: danmaku.fans_medal_name,
-        fans_medal_wearing_status: danmaku.fans_medal_wearing_status,
-        guard_level: danmaku.guard_level,
-      } as DanmakuUserInfo,
-      createAt: Date.now(),
-      isInLocal: true,
-      id: songs.value.length == 0 ? 1 : new List(songs.value).Max((s) => s.id) + 1,
-    } as SongRequestInfo
-    localActiveSongs.value.unshift(songData)
-    message.success(`[${danmaku.name}] 添加曲目: ${songData.songName}`)
-  }
-}
-async function addSongManual() {
-  if (!newSongName.value) {
-    message.error('请输入曲目名')
-    return
-  }
-  if (accountInfo.value) {
-    await QueryPostAPIWithParams<SongRequestInfo>(SONG_REQUEST_API_URL + 'add', {
-      name: newSongName.value,
-    }).then((data) => {
-      if (data.code == 200) {
-        message.success(`已手动添加曲目: ${data.data.songName}`)
-        originSongs.value.unshift(data.data)
-        newSongName.value = ''
-        console.log(`[OPEN-LIVE-Song-Request] 已手动添加曲目: ${data.data.songName}`)
-      } else {
-        message.error(`手动添加曲目失败: ${data.message}`)
-      }
-    })
-  } else {
-    const songData = {
-      songName: newSongName.value,
-      song: undefined,
-      status: SongRequestStatus.Waiting,
-      from: SongRequestFrom.Manual,
-      scPrice: undefined,
-      user: undefined,
-      createAt: Date.now(),
-      isInLocal: true,
-      id: songs.value.length == 0 ? 1 : new List(songs.value).Max((s) => s.id) + 1,
-    } as SongRequestInfo
-    localActiveSongs.value.unshift(songData)
-    message.success(`已手动添加曲目: ${songData.songName}`)
-  }
-}
-async function updateSongStatus(song: SongRequestInfo, status: SongRequestStatus) {
-  if (!configCanEdit.value) {
-    song.status = status
-    return
-  }
-  isLoading.value = true
-  let statusString = ''
-  let statusString2 = ''
-  switch (status) {
-    case SongRequestStatus.Waiting:
-      statusString = 'active'
-      statusString2 = '等待中'
-      break
-    case SongRequestStatus.Cancel:
-      statusString = 'cancel'
-      statusString2 = '已取消'
-      break
-    case SongRequestStatus.Finish:
-      statusString = 'finish'
-      statusString2 = '已完成'
-      break
-    case SongRequestStatus.Singing:
-      statusString = 'singing'
-      statusString2 = '演唱中'
-      break
-  }
-  await QueryGetAPI(SONG_REQUEST_API_URL + statusString, {
-    id: song.id,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        console.log(`[OPEN-LIVE-Song-Request] 更新曲目状态: ${song.songName} -> ${statusString}`)
-        song.status = status
-        if (status > SongRequestStatus.Singing) {
-          song.finishAt = Date.now()
-        }
-        message.success(`已更新曲目状态为: ${statusString2}`)
-      } else {
-        console.log(`[OPEN-LIVE-Song-Request] 更新曲目状态失败: ${data.message}`)
-        message.error(`更新曲目状态失败: ${data.message}`)
-      }
-    })
-    .catch((err) => {
-      message.error(`更新曲目状态失败`)
-    })
-    .finally(() => {
-      isLoading.value = false
-    })
-}
-
-function onGetDanmaku(danmaku: DanmakuInfo) {
-  console.log(danmaku)
-  if (checkMessage(danmaku.msg)) {
-    addSong({
-      msg: danmaku.msg,
-      type: EventDataTypes.Message,
-      time: danmaku.timestamp,
-      uid: danmaku.uid,
-      name: danmaku.uname,
-      avatar: danmaku.uface,
-      fans_medal_level: danmaku.fans_medal_level,
-      fans_medal_name: danmaku.fans_medal_name,
-      fans_medal_wearing_status: danmaku.fans_medal_wearing_status,
-      guard_level: danmaku.guard_level,
-      num: 1,
-      price: 0,
-    } as EventModel)
-  }
-}
-function onGetSC(danmaku: SCInfo) {
-  if (settings.value.allowSC && checkMessage(danmaku.message)) {
-    addSong({
-      msg: danmaku.message,
-      type: EventDataTypes.SC,
-      time: danmaku.timestamp,
-      uid: danmaku.uid,
-      name: danmaku.uname,
-      fans_medal_level: danmaku.fans_medal_level,
-      fans_medal_name: danmaku.fans_medal_name,
-      fans_medal_wearing_status: danmaku.fans_medal_wearing_status,
-      guard_level: danmaku.guard_level,
-      avatar: danmaku.uface,
-      num: 1,
-      price: danmaku.rmb,
-    } as EventModel)
-  }
-}
-function checkMessage(msg: string) {
-  return msg
-    .trim()
-    .toLowerCase()
-    .startsWith(accountInfo.value ? settings.value.orderPrefix : defaultPrefix.value)
-}
-async function onUpdateFunctionEnable() {
-  if (accountInfo.value) {
-    const oldValue = JSON.parse(JSON.stringify(accountInfo.value.settings.enableFunctions))
-    if (accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest)) {
-      accountInfo.value.settings.enableFunctions = accountInfo.value.settings.enableFunctions.filter((f) => f != FunctionTypes.SongRequest)
-    } else {
-      accountInfo.value.settings.enableFunctions.push(FunctionTypes.SongRequest)
-    }
-    if (!accountInfo.value.settings.songRequest.orderPrefix) {
-      accountInfo.value.settings.songRequest.orderPrefix = defaultPrefix.value
-    }
-    await SaveEnableFunctions(accountInfo.value?.settings.enableFunctions)
-      .then((data) => {
-        if (data.code == 200) {
-          message.success(`已${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}点歌功能`)
-        } else {
-          if (accountInfo.value) {
-            accountInfo.value.settings.enableFunctions = oldValue
-          }
-          message.error(`点歌功能${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}失败: ${data.message}`)
-        }
-      })
-      .catch((err) => {
-        message.error(`点歌功能${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}失败: ${err}`)
-      })
-  }
-}
-async function updateSettings() {
-  if (accountInfo.value) {
-    isLoading.value = true
-    await QueryPostAPI(SONG_REQUEST_API_URL + 'update-setting', settings.value)
-      .then((data) => {
-        if (data.code == 200) {
-          message.success('已保存')
-        } else {
-          message.error('保存失败: ' + data.message)
-        }
-      })
-      .catch((err) => {
-        message.error('保存失败')
-      })
-      .finally(() => {
-        isLoading.value = false
-      })
-  } else {
-    message.success('完成')
-  }
-}
-async function deleteSongs(values: SongRequestInfo[]) {
-  await QueryPostAPI(
-    SONG_REQUEST_API_URL + 'del',
-    values.map((s) => s.id),
-  )
-    .then((data) => {
-      if (data.code == 200) {
-        message.success('删除成功')
-        originSongs.value = originSongs.value.filter((s) => !values.includes(s))
-      } else {
-        message.error('删除失败: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('删除失败')
-    })
-}
-async function deactiveAllSongs() {
-  await QueryGetAPI(SONG_REQUEST_API_URL + 'deactive')
-    .then((data) => {
-      if (data.code == 200) {
-        message.success('已全部取消')
-        songs.value.forEach((s) => {
-          if (s.status <= SongRequestStatus.Singing) {
-            s.status = SongRequestStatus.Cancel
-          }
-        })
-      } else {
-        message.error('取消失败: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('取消失败')
-    })
-}
-const statusFilterOptions = computed(() => {
-  return Object.values(SongRequestStatus)
-    .filter((t) => /^\d+$/.test(t.toString()))
-    .map((t) => {
-      return {
-        label: STATUS_MAP[t as SongRequestStatus],
-        value: t,
-      }
-    })
-})
-const columns = [
-  {
-    title: '曲名',
-    key: 'songName',
-  },
-  {
-    title: '用户名',
-    key: 'user.name',
-    render: (data) => {
-      return h(
-        NTooltip,
-        { trigger: 'hover' },
-        {
-          trigger: () => h(NTag, { bordered: false, size: 'small' }, data.from == SongRequestFrom.Manual ? () => h(NText, { italic: true }, () => '手动添加') : () => data.user?.name),
-          default: () => (data.from == SongRequestFrom.Manual ? '就是主播自己' : data.user?.uid),
-        },
-      )
-    },
-  },
-  {
-    title: '来自',
-    key: 'from',
-    render(data) {
-      let fromType: 'info' | 'success' | 'default' | 'error'
-      switch (data.from) {
-        case SongRequestFrom.Danmaku: {
-          fromType = 'info'
-          break
-        }
-        case SongRequestFrom.SC: {
-          fromType = 'error'
-          break
-        }
-        case SongRequestFrom.Web: {
-          fromType = 'success'
-          break
-        }
-        case SongRequestFrom.Manual: {
-          fromType = 'default'
-          break
-        }
-      }
-      return h(NTag, { size: 'small', type: fromType }, () => {
-        switch (data.from) {
-          case SongRequestFrom.Danmaku: {
-            return '弹幕'
-          }
-          case SongRequestFrom.SC: {
-            return 'SuperChat | ' + data.scPrice
-          }
-          case SongRequestFrom.Manual: {
-            return '手动添加'
-          }
-          case SongRequestFrom.Web: {
-            return '网页添加'
-          }
-        }
-      })
-    },
-  },
-  {
-    title: '状态',
-    key: 'status',
-    filter(value, row) {
-      return ~row.status == value
-    },
-    filterOptions: statusFilterOptions.value,
-    render(data) {
-      let statusType: 'info' | 'success' | 'warning' | 'error'
-      switch (data.status) {
-        case SongRequestStatus.Singing: {
-          statusType = 'success'
-          break
-        }
-        case SongRequestStatus.Waiting: {
-          statusType = 'warning'
-          break
-        }
-        case SongRequestStatus.Finish: {
-          statusType = 'info'
-          break
-        }
-        case SongRequestStatus.Cancel: {
-          statusType = 'error'
-          break
-        }
-      }
-      return h(NTag, { type: statusType, size: 'small', style: data.status == SongRequestStatus.Singing ? 'animation: animated-border 2.5s infinite;' : '' }, () => STATUS_MAP[data.status])
-    },
-  },
-  {
-    title: '时间',
-    key: 'time',
-    sorter: (a, b) => a.createAt - b.createAt,
-    render: (data) => {
-      return h(NTime, { time: data.createAt })
-    },
-  },
-  {
-    title: '操作',
-    key: 'manage',
-    width: 100,
-    render(data) {
-      return h(
-        NSpace,
-        {
-          justify: 'center',
-          size: 10,
-        },
-        () => [
-          data.status == SongRequestStatus.Finish || data.status == SongRequestStatus.Cancel
-            ? h(NTooltip, null, {
-                trigger: () =>
-                  h(
-                    NButton,
-                    {
-                      size: 'small',
-                      type: 'info',
-                      circle: true,
-                      loading: isLoading.value,
-                      onClick: () => {
-                        updateSongStatus(data, SongRequestStatus.Waiting)
-                      },
-                    },
-                    {
-                      icon: () => h(NIcon, { component: ReloadCircleSharp }),
-                    },
-                  ),
-                default: () => '重新放回等待列表',
-              })
-            : undefined,
-          h(
-            NPopconfirm,
-            { onPositiveClick: () => deleteSongs([data]) },
-            {
-              trigger: () =>
-                h(NTooltip, null, {
-                  trigger: () =>
-                    h(
-                      NButton,
-                      {
-                        size: 'small',
-                        type: 'error',
-                        circle: true,
-                        loading: isLoading.value,
-                      },
-                      {
-                        icon: () => h(NIcon, { component: Delete24Filled }),
-                      },
-                    ),
-                  default: () => '删除记录',
-                }),
-              default: () => '确定删除?',
-            },
-          ),
-        ],
-      )
-    },
-  },
-] as DataTableColumns<SongRequestInfo>
-
-function GetSCColor(price: number): string {
-  if (price === 0) return `#2a60b2`
-  if (price > 0 && price < 30) return `#2a60b2`
-  if (price >= 30 && price < 50) return `#2a60b2`
-  if (price >= 50 && price < 100) return `#427d9e`
-  if (price >= 100 && price < 500) return `#c99801`
-  if (price >= 500 && price < 1000) return `#e09443`
-  if (price >= 1000 && price < 2000) return `#e54d4d`
-  if (price >= 2000) return `#ab1a32`
-  return ''
-}
-function GetGuardColor(level: number | null | undefined): string {
-  if (level) {
-    switch (level) {
-      case 1: {
-        return 'rgb(122, 4, 35)'
-      }
-      case 2: {
-        return 'rgb(157, 155, 255)'
-      }
-      case 3: {
-        return 'rgb(104, 136, 241)'
-      }
-    }
-  }
-  return ''
-}
-async function updateActive() {
-  if (!accountInfo.value) return
-  try {
-    const data = await QueryGetAPI<SongRequestInfo[]>(SONG_REQUEST_API_URL + 'get-active', {
-      id: accountInfo.value?.id,
-    })
+function onGetEvent(data: EventModel) {}
+function searchMusic(keyword: string) {
+  QueryGetAPI<SongsInfo>(MUSIC_REQUEST_API_URL + 'search-kugou', {
+    keyword: keyword,
+  }).then((data) => {
     if (data.code == 200) {
-      data.data.forEach((item) => {
-        const song = originSongs.value.find((s) => s.id == item.id)
-        if (song) {
-          if (song.status != item.status) song.status = item.status
-        } else {
-          originSongs.value.unshift(item)
-          if (item.from == SongRequestFrom.Web) {
-            message.success(`[${item.user?.name}] 直接从网页歌单点歌: ${item.songName}`)
-          }
-        }
+      musics.value.push({
+        title: data.data.name,
+        artist: data.data.author?.join('/'),
+        src: data.data.url,
+        pic: data.data.cover ?? '',
+        lrc: '',
       })
-    } else {
-      message.error('无法获取点歌队列: ' + data.message)
-      return []
     }
-  } catch (err) {}
+  })
 }
-function blockUser(item: SongRequestInfo) {
-  if (item.from != SongRequestFrom.Danmaku) {
-    message.error(`[${item.user?.name}] 不是来自弹幕的用户`)
-    return
-  }
-  if (item.user) {
-    AddBiliBlackList(item.user.uid, item.user.name)
-      .then((data) => {
-        if (data.code == 200) {
-          message.success(`[${item.user?.name}] 已添加到黑名单`)
-          updateSongStatus(item, SongRequestStatus.Cancel)
-        } else {
-          message.error(data.message)
-        }
-      })
-      .catch((err) => {
-        message.error(err)
-      })
-  }
-}
-const isLrcLoading = ref('')
 
-let timer: any
-let updateActiveTimer: any
-const updateKey = ref(0)
 onMounted(() => {
-  if (accountInfo.value) {
-    settings.value = accountInfo.value.settings.songRequest
-  }
-  props.client.on('danmaku', onGetDanmaku)
-  props.client.on('sc', onGetSC)
-  init()
-})
-onActivated(() => {
-  init()
-})
-function init() {
-  dispose()
-  timer = setInterval(() => {
-    updateKey.value++
-  }, 1000)
-  updateActiveTimer = setInterval(() => {
-    updateActive()
-  }, 2000)
-}
-function dispose() {
-  clearInterval(timer)
-  clearInterval(updateActiveTimer)
-}
-onDeactivated(() => {
-  dispose()
+  props.client.onEvent('danmaku', onGetEvent)
 })
 onUnmounted(() => {
-  props.client.off('danmaku', onGetDanmaku)
-  props.client.off('sc', onGetSC)
-  dispose()
+  props.client.offEvent('danmaku', onGetEvent)
 })
 </script>
 
 <template>
-  <NAlert type="info" v-if="accountInfo">
-    启用点歌功能
-    <NSwitch :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.SongRequest)" @update:value="onUpdateFunctionEnable" />
-
-    <br />
-    <NText depth="3">
-      如果没有部署
-      <NButton text type="primary" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank"> VtsuruEventFetcher </NButton>
-      则其需要保持此页面开启才能点歌, 也不要同时开多个页面, 会导致点歌重复 !(部署了则不影响)
-    </NText>
-  </NAlert>
-  <NAlert type="warning" v-else title="你尚未注册并登录 VTsuru.live, 大部分规则设置将不可用 (因为我懒得在前段重写一遍逻辑">
-    <NButton tag="a" href="/manage" target="_blank" type="primary"> 前往登录或注册 </NButton>
-  </NAlert>
-  <br />
-  <NCard size="small">
-    <NSpace align="center">
-      <NTooltip>
-        <template #trigger>
-          <NButton @click="showOBSModal = true" type="primary" :disabled="!accountInfo"> OBS 组件 </NButton>
-        </template>
-        {{ configCanEdit ? '' : '登陆后才可以使用此功能' }}
-      </NTooltip>
-    </NSpace>
-  </NCard>
-  <br />
-  <NCard>
-    <NTabs v-if="!accountInfo || accountInfo.settings.enableFunctions.includes(FunctionTypes.SongRequest)" animated display-directive="show:lazy">
-      <NTabPane name="list" tab="列表">
-        <NCard size="small">
-          <NSpace align="center">
-            <NTag type="success" :bordered="false">
-              <template #icon>
-                <NIcon :component="PeopleQueue24Filled" />
-              </template>
-              队列 | {{ activeSongs.filter((s) => s.status == SongRequestStatus.Waiting).length }}
-            </NTag>
-            <NTag type="success" :bordered="false">
-              <template #icon>
-                <NIcon :component="Checkmark12Regular" />
-              </template>
-              今日已演唱 | {{ songs.filter((s) => s.status != SongRequestStatus.Cancel && isSameDay(s.finishAt ?? 0, Date.now())).length }} 首
-            </NTag>
-            <NInputGroup>
-              <NInput placeholder="手动添加" v-model:value="newSongName" />
-              <NButton type="primary" @click="addSongManual"> 添加 </NButton>
-            </NInputGroup>
-            <NCheckbox v-if="configCanEdit" v-model:checked="settings.isReverse" @update:checked="updateSettings"> 倒序 </NCheckbox>
-            <NCheckbox v-else v-model:checked="isReverse"> 倒序 </NCheckbox>
-            <NPopconfirm @positive-click="deactiveAllSongs">
-              <template #trigger>
-                <NButton type="error"> 全部取消 </NButton>
-              </template>
-              确定全部取消吗?
-            </NPopconfirm>
-          </NSpace>
-        </NCard>
-        <NDivider> 共 {{ activeSongs.length }} 首 </NDivider>
-        <Transition>
-          <div v-if="selectedSong" class="song-list">
-            <SongPlayer :song="selectedSong" v-model:is-lrc-loading="isLrcLoading" />
-            <NDivider style="margin: 15px 0 15px 0" />
-          </div>
-        </Transition>
-        <NList v-if="activeSongs.length > 0" :show-divider="false" hoverable>
-          <NListItem v-for="song in activeSongs" :key="song.id" style="padding: 5px">
-            <NCard embedded size="small" content-style="padding: 5px;" :style="`${song.status == SongRequestStatus.Singing ? 'animation: animated-border 2.5s infinite;' : ''};height: 100%;`">
-              <NSpace justify="space-between" align="center" style="height: 100%; margin: 0 5px 0 5px">
-                <NSpace align="center">
-                  <div :style="`border-radius: 4px; background-color: ${song.status == SongRequestStatus.Singing ? '#75c37f' : '#577fb8'}; width: 10px; height: 20px`"></div>
-                  <NText strong style="font-size: 18px">
-                    {{ song.songName }}
-                  </NText>
-                  <template v-if="song.from == SongRequestFrom.Manual">
-                    <NTag size="small" :bordered="false"> 手动添加 </NTag>
-                  </template>
-                  <template v-else>
-                    <NTooltip>
-                      <template #trigger>
-                        <NTag size="small" :bordered="false" type="info">
-                          <NText italic depth="3">
-                            {{ song.user?.name }}
-                          </NText>
-                        </NTag>
-                      </template>
-                      {{ song.user?.uid }}
-                    </NTooltip>
-                  </template>
-                  <NSpace v-if="(song.from == SongRequestFrom.Danmaku || song.from == SongRequestFrom.SC) && song.user?.fans_medal_wearing_status">
-                    <NTag size="tiny" round>
-                      <NTag size="tiny" round :bordered="false">
-                        <NText depth="3">
-                          {{ song.user?.fans_medal_level }}
-                        </NText>
-                      </NTag>
-                      <span style="color: #577fb8">
-                        {{ song.user?.fans_medal_name }}
-                      </span>
-                    </NTag>
-                  </NSpace>
-                  <NTag v-if="(song.user?.guard_level ?? 0) > 0" size="small" :bordered="false" :color="{ textColor: 'white', color: GetGuardColor(song.user?.guard_level) }">
-                    {{ song.user?.guard_level == 1 ? '总督' : song.user?.guard_level == 2 ? '提督' : '舰长' }}
-                  </NTag>
-                  <NTag v-if="song.from == SongRequestFrom.SC" size="small" :color="{ textColor: 'white', color: GetSCColor(song.scPrice ?? 0) }"> SC | {{ song.scPrice }} </NTag>
-                  <NTooltip>
-                    <template #trigger>
-                      <NText style="font-size: small">
-                        <NTime :time="song.createAt" type="relative" :key="updateKey" />
-                      </NText>
-                    </template>
-                    <NTime :time="song.createAt" />
-                  </NTooltip>
-                </NSpace>
-                <NSpace justify="end" align="center">
-                  <NTooltip v-if="song.song">
-                    <template #trigger>
-                      <NButton circle type="success" style="height: 30px; width: 30px" :loading="isLrcLoading == song?.song?.key" @click="selectedSong = song.song">
-                        <template #icon>
-                          <NIcon :component="Play24Filled" />
-                        </template>
-                      </NButton>
-                    </template>
-                    试听
-                  </NTooltip>
-                  <NTooltip>
-                    <template #trigger>
-                      <NButton
-                        circle
-                        type="primary"
-                        style="height: 30px; width: 30px"
-                        :disabled="songs.findIndex((s) => s.id != song.id && s.status == SongRequestStatus.Singing) > -1"
-                        @click="updateSongStatus(song, song.status == SongRequestStatus.Singing ? SongRequestStatus.Waiting : SongRequestStatus.Singing)"
-                        :style="`animation: ${song.status == SongRequestStatus.Waiting ? '' : 'loading 5s linear infinite'}`"
-                        :secondary="song.status == SongRequestStatus.Singing"
-                        :loading="isLoading"
-                      >
-                        <template #icon>
-                          <NIcon :component="Mic24Filled" />
-                        </template>
-                      </NButton>
-                    </template>
-                    {{
-                      songs.findIndex((s) => s.id != song.id && s.status == SongRequestStatus.Singing) > -1
-                        ? '还有其他正在演唱的歌曲'
-                        : song.status == SongRequestStatus.Waiting && song.id
-                          ? '开始演唱'
-                          : '停止演唱'
-                    }}
-                  </NTooltip>
-                  <NTooltip>
-                    <template #trigger>
-                      <NButton circle type="success" style="height: 30px; width: 30px" :loading="isLoading" @click="updateSongStatus(song, SongRequestStatus.Finish)">
-                        <template #icon>
-                          <NIcon :component="Checkmark12Regular" />
-                        </template>
-                      </NButton>
-                    </template>
-                    已完成演唱
-                  </NTooltip>
-                  <NTooltip v-if="song.from == SongRequestFrom.Danmaku">
-                    <template #trigger>
-                      <NPopconfirm @positive-click="blockUser(song)">
-                        <template #trigger>
-                          <NButton circle type="warning" style="height: 30px; width: 30px" :loading="isLoading">
-                            <template #icon>
-                              <NIcon :component="PresenceBlocked16Regular" />
-                            </template>
-                          </NButton>
-                        </template>
-                        确定拉黑 {{ song.user?.name }} 吗
-                      </NPopconfirm>
-                    </template>
-                    拉黑用户
-                  </NTooltip>
-                  <NTooltip>
-                    <template #trigger>
-                      <NButton circle type="error" style="height: 30px; width: 30px" :loading="isLoading" @click="updateSongStatus(song, SongRequestStatus.Cancel)">
-                        <template #icon>
-                          <NIcon :component="Dismiss16Filled" />
-                        </template>
-                      </NButton>
-                    </template>
-                    移出队列
-                  </NTooltip>
-                </NSpace>
-              </NSpace>
-            </NCard>
-          </NListItem>
-        </NList>
-        <NEmpty v-else description="暂无曲目" />
-      </NTabPane>
-      <NTabPane name="history" tab="历史">
-        <NCard size="small">
-          <NSpace>
-            <NInputGroup style="width: 300px">
-              <NInputGroupLabel> 筛选曲名 </NInputGroupLabel>
-              <NInput v-model:value="filterSongName" clearable>
-                <template #suffix>
-                  <NCheckbox v-model:checked="filterSongNameContains"> 包含 </NCheckbox>
-                </template>
-              </NInput>
-            </NInputGroup>
-            <NInputGroup style="width: 300px">
-              <NInputGroupLabel> 筛选用户 </NInputGroupLabel>
-              <NInput v-model:value="filterName" clearable>
-                <template #suffix>
-                  <NCheckbox v-model:checked="filterNameContains"> 包含 </NCheckbox>
-                </template>
-              </NInput>
-            </NInputGroup>
-          </NSpace>
-        </NCard>
-        <NDataTable
-          size="small"
-          ref="table"
-          :columns="columns"
-          :data="songs"
-          :pagination="{
-            itemCount: songs.length,
-            pageSizes: [20, 50, 100],
-            showSizePicker: true,
-            prefix({ itemCount }) {
-              return `共 ${itemCount} 条记录`
-            },
-          }"
-        />
-      </NTabPane>
-      <NTabPane name="setting" tab="设置">
-        <NSpin :show="isLoading">
-          <NDivider> 规则 </NDivider>
-          <NSpace vertical>
-            <NInputGroup style="width: 250px">
-              <NInputGroupLabel> 点歌弹幕前缀 </NInputGroupLabel>
-              <template v-if="configCanEdit">
-                <NInput v-model:value="settings.orderPrefix" />
-                <NButton @click="updateSettings" type="primary">确定</NButton>
-              </template>
-              <NInput v-else v-model:value="defaultPrefix" />
-            </NInputGroup>
-
-            <NInputGroup style="width: 250px">
-              <NInputGroupLabel> 最大队列长度 </NInputGroupLabel>
-              <NInputNumber v-model:value="settings.queueMaxSize" :disabled="!configCanEdit" />
-              <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
-            </NInputGroup>
-            <NSpace align="center">
-              <NCheckbox v-model:checked="settings.enableOnStreaming" @update:checked="updateSettings" :disabled="!configCanEdit"> 仅在直播时才允许加入 </NCheckbox>
-              <NCheckbox v-model:checked="settings.allowAllDanmaku" @update:checked="updateSettings" :disabled="!configCanEdit"> 允许所有弹幕点歌 </NCheckbox>
-              <template v-if="!settings.allowAllDanmaku">
-                <NCheckbox v-model:checked="settings.needWearFanMedal" @update:checked="updateSettings" :disabled="!configCanEdit"> 需要拥有粉丝牌 </NCheckbox>
-                <NInputGroup v-if="settings.needWearFanMedal" style="width: 250px">
-                  <NInputGroupLabel> 最低粉丝牌等级 </NInputGroupLabel>
-                  <NInputNumber v-model:value="settings.fanMedalMinLevel" :disabled="!configCanEdit" />
-                  <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
-                </NInputGroup>
-                <NCheckbox v-if="!settings.allowAllDanmaku" v-model:checked="settings.needJianzhang" @update:checked="updateSettings" :disabled="!configCanEdit"> 只允许舰长 </NCheckbox>
-                <NCheckbox v-if="!settings.allowAllDanmaku" v-model:checked="settings.needTidu" @update:checked="updateSettings" :disabled="!configCanEdit"> 只允许提督 </NCheckbox>
-                <NCheckbox v-if="!settings.allowAllDanmaku" v-model:checked="settings.needZongdu" @update:checked="updateSettings" :disabled="!configCanEdit"> 只允许总督 </NCheckbox>
-              </template>
-            </NSpace>
-            <NSpace align="center">
-              <NCheckbox v-model:checked="settings.allowSC" @update:checked="updateSettings" :disabled="!configCanEdit"> 允许通过 SuperChat 点歌 </NCheckbox>
-              <span v-if="settings.allowSC">
-                <NCheckbox v-model:checked="settings.allowSC" @update:checked="updateSettings" :disabled="!configCanEdit"> SC点歌无视限制 </NCheckbox>
-                <NTooltip>
-                  <template #trigger>
-                    <NIcon :component="Info24Filled" />
-                  </template>
-                  包含冷却时间, 队列长度, 重复点歌等
-                </NTooltip>
-              </span>
-              <NInputGroup v-if="settings.allowSC" style="width: 250px">
-                <NInputGroupLabel> 最低SC价格 </NInputGroupLabel>
-                <NInputNumber v-model:value="settings.scMinPrice" :disabled="!configCanEdit" />
-                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
-              </NInputGroup>
-            </NSpace>
-            <NSpace>
-              <NCheckbox v-model:checked="settings.onlyAllowSongList" @update:checked="updateSettings" :disabled="!configCanEdit">
-                仅允许点
-                <NButton text tag="a" href="/manage/song-list" target="_blank" type="info"> 歌单 </NButton>
-                内的歌曲
-              </NCheckbox>
-              <NCheckbox v-model:checked="settings.allowFromWeb" @update:checked="updateSettings" :disabled="!configCanEdit"> 允许通过网页点歌 </NCheckbox>
-            </NSpace>
-            <NDivider> 冷却 (单位: 秒) </NDivider>
-            <NCheckbox v-model:checked="settings.enableCooldown" @update:checked="updateSettings" :disabled="!configCanEdit"> 启用点歌冷却 </NCheckbox>
-            <NSpace v-if="settings.enableCooldown">
-              <NInputGroup style="width: 250px">
-                <NInputGroupLabel> 普通弹幕 </NInputGroupLabel>
-                <NInputNumber v-model:value="settings.cooldownSecond" :disabled="!configCanEdit" />
-                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
-              </NInputGroup>
-              <NInputGroup style="width: 220px">
-                <NInputGroupLabel> 舰长 </NInputGroupLabel>
-                <NInputNumber v-model:value="settings.jianzhangCooldownSecond" :disabled="!configCanEdit" />
-                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
-              </NInputGroup>
-              <NInputGroup style="width: 220px">
-                <NInputGroupLabel> 提督 </NInputGroupLabel>
-                <NInputNumber v-model:value="settings.tiduCooldownSecond" :disabled="!configCanEdit" />
-                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
-              </NInputGroup>
-              <NInputGroup style="width: 220px">
-                <NInputGroupLabel> 总督 </NInputGroupLabel>
-                <NInputNumber v-model:value="settings.zongduCooldownSecond" :disabled="!configCanEdit" />
-                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
-              </NInputGroup>
-            </NSpace>
-            <NDivider> OBS </NDivider>
-            <NCheckbox v-model:checked="settings.showRequireInfo" :disabled="!configCanEdit" @update:checked="updateSettings"> 显示底部的需求信息 </NCheckbox>
-            <NDivider> 其他 </NDivider>
-            <NCheckbox v-model:checked="isWarnMessageAutoClose"> 自动关闭点歌失败时的提示消息 </NCheckbox>
-          </NSpace>
-        </NSpin>
-      </NTabPane>
-    </NTabs>
-  </NCard>
-  <NModal v-model:show="showOBSModal" title="OBS组件" preset="card" style="width: 800px">
-    <NAlert title="这是什么?  " type="info"> 将等待队列以及结果显示在OBS中 </NAlert>
-    <NDivider> 浏览 </NDivider>
-    <div style="height: 500px; width: 280px; position: relative; margin: 0 auto">
-      <SongRequestOBS :id="accountInfo?.id" />
-    </div>
-    <br />
-    <NInput :value="'https://vtsuru.live/obs/song-request?id=' + accountInfo?.id" />
-    <NDivider />
-    <NCollapse>
-      <NCollapseItem title="使用说明">
-        <NUl>
-          <NLi>在 OBS 来源中添加源, 选择 浏览器</NLi>
-          <NLi>在 URL 栏填入上方链接</NLi>
-          <NLi>根据自己的需要调整宽度和高度 (这里是宽 280px 高 500px)</NLi>
-          <NLi>完事</NLi>
-        </NUl>
-      </NCollapseItem>
-    </NCollapse>
-  </NModal>
+  <APlayer :list="musics" ref="aplayer" />
 </template>
-
-<style>
-@keyframes loading {
-  /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
-  0% {
-    /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes animated-border {
-  0% {
-    box-shadow: 0 0 0px #589580;
-  }
-
-  100% {
-    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0);
-  }
-}
-@keyframes animated-border-round {
-  0% {
-    box-shadow: 0 0 0px #589580;
-    border-radius: 50%;
-  }
-
-  100% {
-    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
-    border-radius: 50%;
-  }
-}
-</style>
diff --git a/src/views/open_live/ReadDanmaku.vue b/src/views/open_live/ReadDanmaku.vue
index 21c1436..a1e7eaf 100644
--- a/src/views/open_live/ReadDanmaku.vue
+++ b/src/views/open_live/ReadDanmaku.vue
@@ -63,7 +63,7 @@ type SpeechInfo = {
 const accountInfo = useAccount()
 const message = useMessage()
 const route = useRoute()
-const settings = useStorage<SpeechSettings>('Setting.Speech.Settings', {
+const settings = useStorage<SpeechSettings>('Setting.Speech', {
   speechInfo: {
     volume: 1,
     pitch: 1,
@@ -464,16 +464,41 @@ onUnmounted(() => {
 <template>
   <NAlert v-if="!speechSynthesisInfo || !speechSynthesisInfo.speechSynthesis" type="error"> 你的浏览器不支持语音功能 </NAlert>
   <template v-else>
-    <NAlert type="info">
-      建议在 Edge 浏览器使用
-      <NTooltip>
-        <template #trigger>
-          <NText strong italic type="primary">Microsoft 某某 Online (Nature)</NText>
-        </template>
-        例如 Microsoft Xiaoxiao Online (Natural) - Chinese (Mainland), 各种营销号就用的这些配音
-      </NTooltip>
-      系列语音, 效果要好很多
-    </NAlert>
+    <NSpace vertical>
+      <NAlert type="info">
+        建议在 Edge 浏览器使用
+        <NTooltip>
+          <template #trigger>
+            <NText strong italic type="primary">Microsoft 某某 Online (Nature)</NText>
+          </template>
+          例如 Microsoft Xiaoxiao Online (Natural) - Chinese (Mainland), 各种营销号就用的这些配音
+        </NTooltip>
+        系列语音, 效果要好很多
+      </NAlert>
+      <NAlert type="info" closeable>
+        当在后台运行时请关闭浏览器的 页面休眠/内存节省功能. Chrome:
+        <NButton
+          tag="a"
+          type="info"
+          href="https://support.google.com/chrome/answer/12929150?hl=zh-Hans#zippy=%2C%E5%BC%80%E5%90%AF%E6%88%96%E5%85%B3%E9%97%AD%E7%9C%81%E5%86%85%E5%AD%98%E6%A8%A1%E5%BC%8F%2C%E8%AE%A9%E7%89%B9%E5%AE%9A%E7%BD%91%E7%AB%99%E4%BF%9D%E6%8C%81%E6%B4%BB%E5%8A%A8%E7%8A%B6%E6%80%81"
+          target="_blank"
+          text
+        >
+          让特定网站保持活动状态
+        </NButton>
+        Edge:
+
+        <NButton
+          tag="a"
+          type="info"
+          href="https://support.microsoft.com/zh-cn/topic/%E4%BA%86%E8%A7%A3-microsoft-edge-%E4%B8%AD%E7%9A%84%E6%80%A7%E8%83%BD%E5%8A%9F%E8%83%BD-7b36f363-2119-448a-8de6-375cfd88ab25"
+          target="_blank"
+          text
+        >
+          永远不想进入睡眠状态的网站
+        </NButton>
+      </NAlert>
+    </NSpace>
     <br />
     <NSpace>
       <NButton @click="canSpeech ? stopSpeech() : startSpeech()" :type="canSpeech ? 'error' : 'primary'" data-umami-event="Use TTS" :data-umami-event-uid="accountInfo?.id">
diff --git a/src/views/open_live/SongRequest.vue b/src/views/open_live/SongRequest.vue
new file mode 100644
index 0000000..79e359f
--- /dev/null
+++ b/src/views/open_live/SongRequest.vue
@@ -0,0 +1,1101 @@
+<script setup lang="ts">
+import { AddBiliBlackList, SaveEnableFunctions, useAccount } from '@/api/account'
+import { DanmakuUserInfo, EventDataTypes, EventModel, FunctionTypes, Setting_SongRequest, SongRequestFrom, SongRequestInfo, SongRequestStatus, SongsInfo } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
+import SongPlayer from '@/components/SongPlayer.vue'
+import DanmakuClient, { DanmakuInfo, RoomAuthInfo, SCInfo } from '@/data/DanmakuClient'
+import { SONG_REQUEST_API_URL } from '@/data/constants'
+import { Checkmark12Regular, Delete24Filled, Dismiss16Filled, Info24Filled, Mic24Filled, PeopleQueue24Filled, Play24Filled, PresenceBlocked16Regular } from '@vicons/fluent'
+import { ReloadCircleSharp } from '@vicons/ionicons5'
+import { useStorage } from '@vueuse/core'
+import { isSameDay } from 'date-fns'
+import { List } from 'linqts'
+import {
+  DataTableColumns,
+  NAlert,
+  NButton,
+  NCard,
+  NCheckbox,
+  NCollapse,
+  NCollapseItem,
+  NDataTable,
+  NDivider,
+  NEmpty,
+  NIcon,
+  NInput,
+  NInputGroup,
+  NInputGroupLabel,
+  NInputNumber,
+  NLi,
+  NList,
+  NListItem,
+  NModal,
+  NPopconfirm,
+  NSpace,
+  NSpin,
+  NSwitch,
+  NTabPane,
+  NTabs,
+  NTag,
+  NText,
+  NTime,
+  NTooltip,
+  NUl,
+  useMessage,
+  useNotification,
+} from 'naive-ui'
+import { computed, h, onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import SongRequestOBS from '../obs/SongRequestOBS.vue'
+
+const defaultSettings = {
+  orderPrefix: '点歌',
+  onlyAllowSongList: false,
+  queueMaxSize: 10,
+  allowAllDanmaku: true,
+  allowFromWeb: true,
+  needWearFanMedal: false,
+  needJianzhang: false,
+  needTidu: false,
+  needZongdu: false,
+  allowSC: true,
+  scIgnoreLimit: true,
+  scMinPrice: 30,
+  fanMedalMinLevel: 0,
+  allowReorderSong: false,
+  enableCooldown: false,
+  cooldownSecond: 1200,
+  zongduCooldownSecond: 300,
+  tiduCooldownSecond: 600,
+  jianzhangCooldownSecond: 900,
+  isReverse: false,
+} as Setting_SongRequest
+const STATUS_MAP = {
+  [SongRequestStatus.Waiting]: '等待中',
+  [SongRequestStatus.Singing]: '演唱中',
+  [SongRequestStatus.Finish]: '已演唱',
+  [SongRequestStatus.Cancel]: '已取消',
+}
+
+const route = useRoute()
+const accountInfo = useAccount()
+const message = useMessage()
+const notice = useNotification()
+
+const isWarnMessageAutoClose = useStorage('SongRequest.Settings.WarnMessageAutoClose', false)
+const volumn = useStorage('Settings.Volumn', 0.5)
+const isReverse = useStorage('SongRequest.Settings.Reverse', false)
+
+const isLoading = ref(false)
+const showOBSModal = ref(false)
+
+const settings = computed({
+  get: () => {
+    if (accountInfo.value) {
+      return accountInfo.value.settings.songRequest
+    }
+    return defaultSettings
+  },
+  set: (value) => {
+    if (accountInfo.value) {
+      accountInfo.value.settings.songRequest = value
+    }
+  },
+})
+const selectedSong = ref<SongsInfo>()
+
+const props = defineProps<{
+  client: DanmakuClient
+  roomInfo: RoomAuthInfo
+  code: string | undefined
+  isOpenLive?: boolean
+}>()
+
+const localActiveSongs = useStorage('SongRequest.ActiveSongs', [] as SongRequestInfo[])
+const originSongs = ref<SongRequestInfo[]>(await getAllSong())
+const songs = computed(() => {
+  const result = originSongs.value.filter((s) => {
+    if (filterName.value) {
+      if (filterNameContains.value) {
+        if (!s.user?.name.toLowerCase().includes(filterName.value.toLowerCase())) {
+          return false
+        }
+      } else if (s.user?.name.toLowerCase() !== filterName.value.toLowerCase()) {
+        return false
+      }
+    } else if (filterSongName.value) {
+      if (filterSongNameContains.value) {
+        if (!s.songName.toLowerCase().includes(filterSongName.value.toLowerCase())) {
+          return false
+        }
+      } else if (s.songName.toLowerCase() !== filterSongName.value.toLowerCase()) {
+        return false
+      }
+    }
+    return true
+  })
+  if (configCanEdit.value ? settings.value.isReverse : isReverse.value) {
+    return result.reverse()
+  } else {
+    return result
+  }
+})
+const activeSongs = computed(() => {
+  return (accountInfo ? songs.value : localActiveSongs.value)
+    .sort((a, b) => b.status - a.status)
+    .filter((song) => {
+      return song.status == SongRequestStatus.Waiting || song.status == SongRequestStatus.Singing
+    })
+})
+const historySongs = computed(() => {
+  return (accountInfo ? songs.value : localActiveSongs.value)
+    .sort((a, b) => a.status - b.status)
+    .filter((song) => {
+      return song.status == SongRequestStatus.Finish || song.status == SongRequestStatus.Cancel
+    })
+})
+
+const newSongName = ref('')
+const filterSongName = ref('')
+const filterSongNameContains = ref(false)
+const filterName = ref('')
+const filterNameContains = ref(false)
+
+const defaultPrefix = useStorage('Settings.SongRequest.DefaultPrefix', '点歌')
+const configCanEdit = computed(() => {
+  return accountInfo.value != null && accountInfo.value != undefined
+})
+
+const table = ref()
+
+async function getAllSong() {
+  if (accountInfo.value) {
+    try {
+      const data = await QueryGetAPI<SongRequestInfo[]>(SONG_REQUEST_API_URL + 'get-all', {
+        id: accountInfo.value.id,
+      })
+      if (data.code == 200) {
+        console.log('[OPEN-LIVE-Song-Request] 已获取所有数据')
+        return new List(data.data).OrderByDescending((s) => s.createAt).ToArray()
+      } else {
+        message.error('无法获取数据: ' + data.message)
+        return []
+      }
+    } catch (err) {
+      message.error('无法获取数据')
+    }
+    return []
+  } else {
+    return localActiveSongs.value
+  }
+}
+async function addSong(danmaku: EventModel) {
+  console.log(`[OPEN-LIVE-Song-Request] 收到 [${danmaku.name}] 的点歌${danmaku.type == EventDataTypes.SC ? 'SC' : '弹幕'}: ${danmaku.msg}`)
+  if (settings.value.enableOnStreaming && accountInfo.value?.streamerInfo?.isStreaming != true) {
+    message.info('当前未在直播中, 无法添加点歌请求. 或者关闭设置中的仅允许直播时加入')
+    return
+  }
+  if (accountInfo.value) {
+    await QueryPostAPI<SongRequestInfo>(SONG_REQUEST_API_URL + 'try-add', danmaku).then((data) => {
+      if (data.code == 200) {
+        message.success(`[${danmaku.name}] 添加曲目: ${data.data.songName}`)
+        if (data.message != 'EventFetcher') originSongs.value.unshift(data.data)
+      } else {
+        //message.error(`[${danmaku.name}] 添加曲目失败: ${data.message}`)
+        const time = Date.now()
+        notice.warning({
+          title: danmaku.name + ' 点歌失败',
+          description: data.message,
+          duration: isWarnMessageAutoClose.value ? 3000 : 0,
+          meta: () => h(NTime, { type: 'relative', time: time, key: updateKey.value }),
+        })
+        console.log(`[OPEN-LIVE-Song-Request] [${danmaku.name}] 添加曲目失败: ${data.message}`)
+      }
+    })
+  } else {
+    const songData = {
+      songName: danmaku.msg.trim().substring(settings.value.orderPrefix.length),
+      song: undefined,
+      status: SongRequestStatus.Waiting,
+      from: danmaku.type == EventDataTypes.Message ? SongRequestFrom.Danmaku : SongRequestFrom.SC,
+      scPrice: danmaku.type == EventDataTypes.SC ? danmaku.price : 0,
+      user: {
+        name: danmaku.name,
+        uid: danmaku.uid,
+        fans_medal_level: danmaku.fans_medal_level,
+        fans_medal_name: danmaku.fans_medal_name,
+        fans_medal_wearing_status: danmaku.fans_medal_wearing_status,
+        guard_level: danmaku.guard_level,
+      } as DanmakuUserInfo,
+      createAt: Date.now(),
+      isInLocal: true,
+      id: songs.value.length == 0 ? 1 : new List(songs.value).Max((s) => s.id) + 1,
+    } as SongRequestInfo
+    localActiveSongs.value.unshift(songData)
+    message.success(`[${danmaku.name}] 添加曲目: ${songData.songName}`)
+  }
+}
+async function addSongManual() {
+  if (!newSongName.value) {
+    message.error('请输入曲目名')
+    return
+  }
+  if (accountInfo.value) {
+    await QueryPostAPIWithParams<SongRequestInfo>(SONG_REQUEST_API_URL + 'add', {
+      name: newSongName.value,
+    }).then((data) => {
+      if (data.code == 200) {
+        message.success(`已手动添加曲目: ${data.data.songName}`)
+        originSongs.value.unshift(data.data)
+        newSongName.value = ''
+        console.log(`[OPEN-LIVE-Song-Request] 已手动添加曲目: ${data.data.songName}`)
+      } else {
+        message.error(`手动添加曲目失败: ${data.message}`)
+      }
+    })
+  } else {
+    const songData = {
+      songName: newSongName.value,
+      song: undefined,
+      status: SongRequestStatus.Waiting,
+      from: SongRequestFrom.Manual,
+      scPrice: undefined,
+      user: undefined,
+      createAt: Date.now(),
+      isInLocal: true,
+      id: songs.value.length == 0 ? 1 : new List(songs.value).Max((s) => s.id) + 1,
+    } as SongRequestInfo
+    localActiveSongs.value.unshift(songData)
+    message.success(`已手动添加曲目: ${songData.songName}`)
+  }
+}
+async function updateSongStatus(song: SongRequestInfo, status: SongRequestStatus) {
+  if (!configCanEdit.value) {
+    song.status = status
+    return
+  }
+  isLoading.value = true
+  let statusString = ''
+  let statusString2 = ''
+  switch (status) {
+    case SongRequestStatus.Waiting:
+      statusString = 'active'
+      statusString2 = '等待中'
+      break
+    case SongRequestStatus.Cancel:
+      statusString = 'cancel'
+      statusString2 = '已取消'
+      break
+    case SongRequestStatus.Finish:
+      statusString = 'finish'
+      statusString2 = '已完成'
+      break
+    case SongRequestStatus.Singing:
+      statusString = 'singing'
+      statusString2 = '演唱中'
+      break
+  }
+  await QueryGetAPI(SONG_REQUEST_API_URL + statusString, {
+    id: song.id,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        console.log(`[OPEN-LIVE-Song-Request] 更新曲目状态: ${song.songName} -> ${statusString}`)
+        song.status = status
+        if (status > SongRequestStatus.Singing) {
+          song.finishAt = Date.now()
+        }
+        message.success(`已更新曲目状态为: ${statusString2}`)
+      } else {
+        console.log(`[OPEN-LIVE-Song-Request] 更新曲目状态失败: ${data.message}`)
+        message.error(`更新曲目状态失败: ${data.message}`)
+      }
+    })
+    .catch((err) => {
+      message.error(`更新曲目状态失败`)
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
+function onGetDanmaku(danmaku: DanmakuInfo) {
+  console.log(danmaku)
+  if (checkMessage(danmaku.msg)) {
+    addSong({
+      msg: danmaku.msg,
+      type: EventDataTypes.Message,
+      time: danmaku.timestamp,
+      uid: danmaku.uid,
+      name: danmaku.uname,
+      avatar: danmaku.uface,
+      fans_medal_level: danmaku.fans_medal_level,
+      fans_medal_name: danmaku.fans_medal_name,
+      fans_medal_wearing_status: danmaku.fans_medal_wearing_status,
+      guard_level: danmaku.guard_level,
+      num: 1,
+      price: 0,
+    } as EventModel)
+  }
+}
+function onGetSC(danmaku: SCInfo) {
+  if (settings.value.allowSC && checkMessage(danmaku.message)) {
+    addSong({
+      msg: danmaku.message,
+      type: EventDataTypes.SC,
+      time: danmaku.timestamp,
+      uid: danmaku.uid,
+      name: danmaku.uname,
+      fans_medal_level: danmaku.fans_medal_level,
+      fans_medal_name: danmaku.fans_medal_name,
+      fans_medal_wearing_status: danmaku.fans_medal_wearing_status,
+      guard_level: danmaku.guard_level,
+      avatar: danmaku.uface,
+      num: 1,
+      price: danmaku.rmb,
+    } as EventModel)
+  }
+}
+function checkMessage(msg: string) {
+  return msg
+    .trim()
+    .toLowerCase()
+    .startsWith(accountInfo.value ? settings.value.orderPrefix : defaultPrefix.value)
+}
+async function onUpdateFunctionEnable() {
+  if (accountInfo.value) {
+    const oldValue = JSON.parse(JSON.stringify(accountInfo.value.settings.enableFunctions))
+    if (accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest)) {
+      accountInfo.value.settings.enableFunctions = accountInfo.value.settings.enableFunctions.filter((f) => f != FunctionTypes.SongRequest)
+    } else {
+      accountInfo.value.settings.enableFunctions.push(FunctionTypes.SongRequest)
+    }
+    if (!accountInfo.value.settings.songRequest.orderPrefix) {
+      accountInfo.value.settings.songRequest.orderPrefix = defaultPrefix.value
+    }
+    await SaveEnableFunctions(accountInfo.value?.settings.enableFunctions)
+      .then((data) => {
+        if (data.code == 200) {
+          message.success(`已${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}点歌功能`)
+        } else {
+          if (accountInfo.value) {
+            accountInfo.value.settings.enableFunctions = oldValue
+          }
+          message.error(`点歌功能${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}失败: ${data.message}`)
+        }
+      })
+      .catch((err) => {
+        message.error(`点歌功能${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}失败: ${err}`)
+      })
+  }
+}
+async function updateSettings() {
+  if (accountInfo.value) {
+    isLoading.value = true
+    await QueryPostAPI(SONG_REQUEST_API_URL + 'update-setting', settings.value)
+      .then((data) => {
+        if (data.code == 200) {
+          message.success('已保存')
+        } else {
+          message.error('保存失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('保存失败')
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  } else {
+    message.success('完成')
+  }
+}
+async function deleteSongs(values: SongRequestInfo[]) {
+  await QueryPostAPI(
+    SONG_REQUEST_API_URL + 'del',
+    values.map((s) => s.id),
+  )
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('删除成功')
+        originSongs.value = originSongs.value.filter((s) => !values.includes(s))
+      } else {
+        message.error('删除失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('删除失败')
+    })
+}
+async function deactiveAllSongs() {
+  await QueryGetAPI(SONG_REQUEST_API_URL + 'deactive')
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('已全部取消')
+        songs.value.forEach((s) => {
+          if (s.status <= SongRequestStatus.Singing) {
+            s.status = SongRequestStatus.Cancel
+          }
+        })
+      } else {
+        message.error('取消失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('取消失败')
+    })
+}
+const statusFilterOptions = computed(() => {
+  return Object.values(SongRequestStatus)
+    .filter((t) => /^\d+$/.test(t.toString()))
+    .map((t) => {
+      return {
+        label: STATUS_MAP[t as SongRequestStatus],
+        value: t,
+      }
+    })
+})
+const columns = [
+  {
+    title: '曲名',
+    key: 'songName',
+  },
+  {
+    title: '用户名',
+    key: 'user.name',
+    render: (data) => {
+      return h(
+        NTooltip,
+        { trigger: 'hover' },
+        {
+          trigger: () => h(NTag, { bordered: false, size: 'small' }, data.from == SongRequestFrom.Manual ? () => h(NText, { italic: true }, () => '手动添加') : () => data.user?.name),
+          default: () => (data.from == SongRequestFrom.Manual ? '就是主播自己' : data.user?.uid),
+        },
+      )
+    },
+  },
+  {
+    title: '来自',
+    key: 'from',
+    render(data) {
+      let fromType: 'info' | 'success' | 'default' | 'error'
+      switch (data.from) {
+        case SongRequestFrom.Danmaku: {
+          fromType = 'info'
+          break
+        }
+        case SongRequestFrom.SC: {
+          fromType = 'error'
+          break
+        }
+        case SongRequestFrom.Web: {
+          fromType = 'success'
+          break
+        }
+        case SongRequestFrom.Manual: {
+          fromType = 'default'
+          break
+        }
+      }
+      return h(NTag, { size: 'small', type: fromType }, () => {
+        switch (data.from) {
+          case SongRequestFrom.Danmaku: {
+            return '弹幕'
+          }
+          case SongRequestFrom.SC: {
+            return 'SuperChat | ' + data.scPrice
+          }
+          case SongRequestFrom.Manual: {
+            return '手动添加'
+          }
+          case SongRequestFrom.Web: {
+            return '网页添加'
+          }
+        }
+      })
+    },
+  },
+  {
+    title: '状态',
+    key: 'status',
+    filter(value, row) {
+      return ~row.status == value
+    },
+    filterOptions: statusFilterOptions.value,
+    render(data) {
+      let statusType: 'info' | 'success' | 'warning' | 'error'
+      switch (data.status) {
+        case SongRequestStatus.Singing: {
+          statusType = 'success'
+          break
+        }
+        case SongRequestStatus.Waiting: {
+          statusType = 'warning'
+          break
+        }
+        case SongRequestStatus.Finish: {
+          statusType = 'info'
+          break
+        }
+        case SongRequestStatus.Cancel: {
+          statusType = 'error'
+          break
+        }
+      }
+      return h(NTag, { type: statusType, size: 'small', style: data.status == SongRequestStatus.Singing ? 'animation: animated-border 2.5s infinite;' : '' }, () => STATUS_MAP[data.status])
+    },
+  },
+  {
+    title: '时间',
+    key: 'time',
+    sorter: (a, b) => a.createAt - b.createAt,
+    render: (data) => {
+      return h(NTime, { time: data.createAt })
+    },
+  },
+  {
+    title: '操作',
+    key: 'manage',
+    width: 100,
+    render(data) {
+      return h(
+        NSpace,
+        {
+          justify: 'center',
+          size: 10,
+        },
+        () => [
+          data.status == SongRequestStatus.Finish || data.status == SongRequestStatus.Cancel
+            ? h(NTooltip, null, {
+                trigger: () =>
+                  h(
+                    NButton,
+                    {
+                      size: 'small',
+                      type: 'info',
+                      circle: true,
+                      loading: isLoading.value,
+                      onClick: () => {
+                        updateSongStatus(data, SongRequestStatus.Waiting)
+                      },
+                    },
+                    {
+                      icon: () => h(NIcon, { component: ReloadCircleSharp }),
+                    },
+                  ),
+                default: () => '重新放回等待列表',
+              })
+            : undefined,
+          h(
+            NPopconfirm,
+            { onPositiveClick: () => deleteSongs([data]) },
+            {
+              trigger: () =>
+                h(NTooltip, null, {
+                  trigger: () =>
+                    h(
+                      NButton,
+                      {
+                        size: 'small',
+                        type: 'error',
+                        circle: true,
+                        loading: isLoading.value,
+                      },
+                      {
+                        icon: () => h(NIcon, { component: Delete24Filled }),
+                      },
+                    ),
+                  default: () => '删除记录',
+                }),
+              default: () => '确定删除?',
+            },
+          ),
+        ],
+      )
+    },
+  },
+] as DataTableColumns<SongRequestInfo>
+
+function GetSCColor(price: number): string {
+  if (price === 0) return `#2a60b2`
+  if (price > 0 && price < 30) return `#2a60b2`
+  if (price >= 30 && price < 50) return `#2a60b2`
+  if (price >= 50 && price < 100) return `#427d9e`
+  if (price >= 100 && price < 500) return `#c99801`
+  if (price >= 500 && price < 1000) return `#e09443`
+  if (price >= 1000 && price < 2000) return `#e54d4d`
+  if (price >= 2000) return `#ab1a32`
+  return ''
+}
+function GetGuardColor(level: number | null | undefined): string {
+  if (level) {
+    switch (level) {
+      case 1: {
+        return 'rgb(122, 4, 35)'
+      }
+      case 2: {
+        return 'rgb(157, 155, 255)'
+      }
+      case 3: {
+        return 'rgb(104, 136, 241)'
+      }
+    }
+  }
+  return ''
+}
+async function updateActive() {
+  if (!accountInfo.value) return
+  try {
+    const data = await QueryGetAPI<SongRequestInfo[]>(SONG_REQUEST_API_URL + 'get-active', {
+      id: accountInfo.value?.id,
+    })
+    if (data.code == 200) {
+      data.data.forEach((item) => {
+        const song = originSongs.value.find((s) => s.id == item.id)
+        if (song) {
+          if (song.status != item.status) song.status = item.status
+        } else {
+          originSongs.value.unshift(item)
+          if (item.from == SongRequestFrom.Web) {
+            message.success(`[${item.user?.name}] 直接从网页歌单点歌: ${item.songName}`)
+          }
+        }
+      })
+    } else {
+      message.error('无法获取点歌队列: ' + data.message)
+      return []
+    }
+  } catch (err) {}
+}
+function blockUser(item: SongRequestInfo) {
+  if (item.from != SongRequestFrom.Danmaku) {
+    message.error(`[${item.user?.name}] 不是来自弹幕的用户`)
+    return
+  }
+  if (item.user) {
+    AddBiliBlackList(item.user.uid, item.user.name)
+      .then((data) => {
+        if (data.code == 200) {
+          message.success(`[${item.user?.name}] 已添加到黑名单`)
+          updateSongStatus(item, SongRequestStatus.Cancel)
+        } else {
+          message.error(data.message)
+        }
+      })
+      .catch((err) => {
+        message.error(err)
+      })
+  }
+}
+const isLrcLoading = ref('')
+
+let timer: any
+let updateActiveTimer: any
+const updateKey = ref(0)
+onMounted(() => {
+  if (accountInfo.value) {
+    settings.value = accountInfo.value.settings.songRequest
+  }
+  props.client.on('danmaku', onGetDanmaku)
+  props.client.on('sc', onGetSC)
+  init()
+})
+onActivated(() => {
+  init()
+})
+function init() {
+  dispose()
+  timer = setInterval(() => {
+    updateKey.value++
+  }, 1000)
+  updateActiveTimer = setInterval(() => {
+    updateActive()
+  }, 2000)
+}
+function dispose() {
+  clearInterval(timer)
+  clearInterval(updateActiveTimer)
+}
+onDeactivated(() => {
+  dispose()
+})
+onUnmounted(() => {
+  props.client.off('danmaku', onGetDanmaku)
+  props.client.off('sc', onGetSC)
+  dispose()
+})
+</script>
+
+<template>
+  <NAlert type="info" v-if="accountInfo">
+    启用点歌功能
+    <NSwitch :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.SongRequest)" @update:value="onUpdateFunctionEnable" />
+
+    <br />
+    <NText depth="3">
+      如果没有部署
+      <NButton text type="primary" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank"> VtsuruEventFetcher </NButton>
+      则其需要保持此页面开启才能点歌, 也不要同时开多个页面, 会导致点歌重复 !(部署了则不影响)
+    </NText>
+  </NAlert>
+  <NAlert type="warning" v-else title="你尚未注册并登录 VTsuru.live, 大部分规则设置将不可用 (因为我懒得在前段重写一遍逻辑">
+    <NButton tag="a" href="/manage" target="_blank" type="primary"> 前往登录或注册 </NButton>
+  </NAlert>
+  <br />
+  <NCard size="small">
+    <NSpace align="center">
+      <NTooltip>
+        <template #trigger>
+          <NButton @click="showOBSModal = true" type="primary" :disabled="!accountInfo"> OBS 组件 </NButton>
+        </template>
+        {{ configCanEdit ? '' : '登陆后才可以使用此功能' }}
+      </NTooltip>
+    </NSpace>
+  </NCard>
+  <br />
+  <NCard>
+    <NTabs v-if="!accountInfo || accountInfo.settings.enableFunctions.includes(FunctionTypes.SongRequest)" animated display-directive="show:lazy">
+      <NTabPane name="list" tab="列表">
+        <NCard size="small">
+          <NSpace align="center">
+            <NTag type="success" :bordered="false">
+              <template #icon>
+                <NIcon :component="PeopleQueue24Filled" />
+              </template>
+              队列 | {{ activeSongs.filter((s) => s.status == SongRequestStatus.Waiting).length }}
+            </NTag>
+            <NTag type="success" :bordered="false">
+              <template #icon>
+                <NIcon :component="Checkmark12Regular" />
+              </template>
+              今日已演唱 | {{ songs.filter((s) => s.status != SongRequestStatus.Cancel && isSameDay(s.finishAt ?? 0, Date.now())).length }} 首
+            </NTag>
+            <NInputGroup>
+              <NInput placeholder="手动添加" v-model:value="newSongName" />
+              <NButton type="primary" @click="addSongManual"> 添加 </NButton>
+            </NInputGroup>
+            <NCheckbox v-if="configCanEdit" v-model:checked="settings.isReverse" @update:checked="updateSettings"> 倒序 </NCheckbox>
+            <NCheckbox v-else v-model:checked="isReverse"> 倒序 </NCheckbox>
+            <NPopconfirm @positive-click="deactiveAllSongs">
+              <template #trigger>
+                <NButton type="error"> 全部取消 </NButton>
+              </template>
+              确定全部取消吗?
+            </NPopconfirm>
+          </NSpace>
+        </NCard>
+        <NDivider> 共 {{ activeSongs.length }} 首 </NDivider>
+        <Transition>
+          <div v-if="selectedSong" class="song-list">
+            <SongPlayer :song="selectedSong" v-model:is-lrc-loading="isLrcLoading" />
+            <NDivider style="margin: 15px 0 15px 0" />
+          </div>
+        </Transition>
+        <NList v-if="activeSongs.length > 0" :show-divider="false" hoverable>
+          <NListItem v-for="song in activeSongs" :key="song.id" style="padding: 5px">
+            <NCard embedded size="small" content-style="padding: 5px;" :style="`${song.status == SongRequestStatus.Singing ? 'animation: animated-border 2.5s infinite;' : ''};height: 100%;`">
+              <NSpace justify="space-between" align="center" style="height: 100%; margin: 0 5px 0 5px">
+                <NSpace align="center">
+                  <div :style="`border-radius: 4px; background-color: ${song.status == SongRequestStatus.Singing ? '#75c37f' : '#577fb8'}; width: 10px; height: 20px`"></div>
+                  <NText strong style="font-size: 18px">
+                    {{ song.songName }}
+                  </NText>
+                  <template v-if="song.from == SongRequestFrom.Manual">
+                    <NTag size="small" :bordered="false"> 手动添加 </NTag>
+                  </template>
+                  <template v-else>
+                    <NTooltip>
+                      <template #trigger>
+                        <NTag size="small" :bordered="false" type="info">
+                          <NText italic depth="3">
+                            {{ song.user?.name }}
+                          </NText>
+                        </NTag>
+                      </template>
+                      {{ song.user?.uid }}
+                    </NTooltip>
+                  </template>
+                  <NSpace v-if="(song.from == SongRequestFrom.Danmaku || song.from == SongRequestFrom.SC) && song.user?.fans_medal_wearing_status">
+                    <NTag size="tiny" round>
+                      <NTag size="tiny" round :bordered="false">
+                        <NText depth="3">
+                          {{ song.user?.fans_medal_level }}
+                        </NText>
+                      </NTag>
+                      <span style="color: #577fb8">
+                        {{ song.user?.fans_medal_name }}
+                      </span>
+                    </NTag>
+                  </NSpace>
+                  <NTag v-if="(song.user?.guard_level ?? 0) > 0" size="small" :bordered="false" :color="{ textColor: 'white', color: GetGuardColor(song.user?.guard_level) }">
+                    {{ song.user?.guard_level == 1 ? '总督' : song.user?.guard_level == 2 ? '提督' : '舰长' }}
+                  </NTag>
+                  <NTag v-if="song.from == SongRequestFrom.SC" size="small" :color="{ textColor: 'white', color: GetSCColor(song.scPrice ?? 0) }"> SC | {{ song.scPrice }} </NTag>
+                  <NTooltip>
+                    <template #trigger>
+                      <NText style="font-size: small">
+                        <NTime :time="song.createAt" type="relative" :key="updateKey" />
+                      </NText>
+                    </template>
+                    <NTime :time="song.createAt" />
+                  </NTooltip>
+                </NSpace>
+                <NSpace justify="end" align="center">
+                  <NTooltip v-if="song.song">
+                    <template #trigger>
+                      <NButton circle type="success" style="height: 30px; width: 30px" :loading="isLrcLoading == song?.song?.key" @click="selectedSong = song.song">
+                        <template #icon>
+                          <NIcon :component="Play24Filled" />
+                        </template>
+                      </NButton>
+                    </template>
+                    试听
+                  </NTooltip>
+                  <NTooltip>
+                    <template #trigger>
+                      <NButton
+                        circle
+                        type="primary"
+                        style="height: 30px; width: 30px"
+                        :disabled="songs.findIndex((s) => s.id != song.id && s.status == SongRequestStatus.Singing) > -1"
+                        @click="updateSongStatus(song, song.status == SongRequestStatus.Singing ? SongRequestStatus.Waiting : SongRequestStatus.Singing)"
+                        :style="`animation: ${song.status == SongRequestStatus.Waiting ? '' : 'loading 5s linear infinite'}`"
+                        :secondary="song.status == SongRequestStatus.Singing"
+                        :loading="isLoading"
+                      >
+                        <template #icon>
+                          <NIcon :component="Mic24Filled" />
+                        </template>
+                      </NButton>
+                    </template>
+                    {{
+                      songs.findIndex((s) => s.id != song.id && s.status == SongRequestStatus.Singing) > -1
+                        ? '还有其他正在演唱的歌曲'
+                        : song.status == SongRequestStatus.Waiting && song.id
+                          ? '开始演唱'
+                          : '停止演唱'
+                    }}
+                  </NTooltip>
+                  <NTooltip>
+                    <template #trigger>
+                      <NButton circle type="success" style="height: 30px; width: 30px" :loading="isLoading" @click="updateSongStatus(song, SongRequestStatus.Finish)">
+                        <template #icon>
+                          <NIcon :component="Checkmark12Regular" />
+                        </template>
+                      </NButton>
+                    </template>
+                    已完成演唱
+                  </NTooltip>
+                  <NTooltip v-if="song.from == SongRequestFrom.Danmaku">
+                    <template #trigger>
+                      <NPopconfirm @positive-click="blockUser(song)">
+                        <template #trigger>
+                          <NButton circle type="warning" style="height: 30px; width: 30px" :loading="isLoading">
+                            <template #icon>
+                              <NIcon :component="PresenceBlocked16Regular" />
+                            </template>
+                          </NButton>
+                        </template>
+                        确定拉黑 {{ song.user?.name }} 吗
+                      </NPopconfirm>
+                    </template>
+                    拉黑用户
+                  </NTooltip>
+                  <NTooltip>
+                    <template #trigger>
+                      <NButton circle type="error" style="height: 30px; width: 30px" :loading="isLoading" @click="updateSongStatus(song, SongRequestStatus.Cancel)">
+                        <template #icon>
+                          <NIcon :component="Dismiss16Filled" />
+                        </template>
+                      </NButton>
+                    </template>
+                    移出队列
+                  </NTooltip>
+                </NSpace>
+              </NSpace>
+            </NCard>
+          </NListItem>
+        </NList>
+        <NEmpty v-else description="暂无曲目" />
+      </NTabPane>
+      <NTabPane name="history" tab="历史">
+        <NCard size="small">
+          <NSpace>
+            <NInputGroup style="width: 300px">
+              <NInputGroupLabel> 筛选曲名 </NInputGroupLabel>
+              <NInput v-model:value="filterSongName" clearable>
+                <template #suffix>
+                  <NCheckbox v-model:checked="filterSongNameContains"> 包含 </NCheckbox>
+                </template>
+              </NInput>
+            </NInputGroup>
+            <NInputGroup style="width: 300px">
+              <NInputGroupLabel> 筛选用户 </NInputGroupLabel>
+              <NInput v-model:value="filterName" clearable>
+                <template #suffix>
+                  <NCheckbox v-model:checked="filterNameContains"> 包含 </NCheckbox>
+                </template>
+              </NInput>
+            </NInputGroup>
+          </NSpace>
+        </NCard>
+        <NDataTable
+          size="small"
+          ref="table"
+          :columns="columns"
+          :data="songs"
+          :pagination="{
+            itemCount: songs.length,
+            pageSizes: [20, 50, 100],
+            showSizePicker: true,
+            prefix({ itemCount }) {
+              return `共 ${itemCount} 条记录`
+            },
+          }"
+        />
+      </NTabPane>
+      <NTabPane name="setting" tab="设置">
+        <NSpin :show="isLoading">
+          <NDivider> 规则 </NDivider>
+          <NSpace vertical>
+            <NInputGroup style="width: 250px">
+              <NInputGroupLabel> 点歌弹幕前缀 </NInputGroupLabel>
+              <template v-if="configCanEdit">
+                <NInput v-model:value="settings.orderPrefix" />
+                <NButton @click="updateSettings" type="primary">确定</NButton>
+              </template>
+              <NInput v-else v-model:value="defaultPrefix" />
+            </NInputGroup>
+
+            <NInputGroup style="width: 250px">
+              <NInputGroupLabel> 最大队列长度 </NInputGroupLabel>
+              <NInputNumber v-model:value="settings.queueMaxSize" :disabled="!configCanEdit" />
+              <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+            </NInputGroup>
+            <NSpace align="center">
+              <NCheckbox v-model:checked="settings.enableOnStreaming" @update:checked="updateSettings" :disabled="!configCanEdit"> 仅在直播时才允许加入 </NCheckbox>
+              <NCheckbox v-model:checked="settings.allowAllDanmaku" @update:checked="updateSettings" :disabled="!configCanEdit"> 允许所有弹幕点歌 </NCheckbox>
+              <template v-if="!settings.allowAllDanmaku">
+                <NCheckbox v-model:checked="settings.needWearFanMedal" @update:checked="updateSettings" :disabled="!configCanEdit"> 需要拥有粉丝牌 </NCheckbox>
+                <NInputGroup v-if="settings.needWearFanMedal" style="width: 250px">
+                  <NInputGroupLabel> 最低粉丝牌等级 </NInputGroupLabel>
+                  <NInputNumber v-model:value="settings.fanMedalMinLevel" :disabled="!configCanEdit" />
+                  <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+                </NInputGroup>
+                <NCheckbox v-if="!settings.allowAllDanmaku" v-model:checked="settings.needJianzhang" @update:checked="updateSettings" :disabled="!configCanEdit"> 只允许舰长 </NCheckbox>
+                <NCheckbox v-if="!settings.allowAllDanmaku" v-model:checked="settings.needTidu" @update:checked="updateSettings" :disabled="!configCanEdit"> 只允许提督 </NCheckbox>
+                <NCheckbox v-if="!settings.allowAllDanmaku" v-model:checked="settings.needZongdu" @update:checked="updateSettings" :disabled="!configCanEdit"> 只允许总督 </NCheckbox>
+              </template>
+            </NSpace>
+            <NSpace align="center">
+              <NCheckbox v-model:checked="settings.allowSC" @update:checked="updateSettings" :disabled="!configCanEdit"> 允许通过 SuperChat 点歌 </NCheckbox>
+              <span v-if="settings.allowSC">
+                <NCheckbox v-model:checked="settings.allowSC" @update:checked="updateSettings" :disabled="!configCanEdit"> SC点歌无视限制 </NCheckbox>
+                <NTooltip>
+                  <template #trigger>
+                    <NIcon :component="Info24Filled" />
+                  </template>
+                  包含冷却时间, 队列长度, 重复点歌等
+                </NTooltip>
+              </span>
+              <NInputGroup v-if="settings.allowSC" style="width: 250px">
+                <NInputGroupLabel> 最低SC价格 </NInputGroupLabel>
+                <NInputNumber v-model:value="settings.scMinPrice" :disabled="!configCanEdit" />
+                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+              </NInputGroup>
+            </NSpace>
+            <NSpace>
+              <NCheckbox v-model:checked="settings.onlyAllowSongList" @update:checked="updateSettings" :disabled="!configCanEdit">
+                仅允许点
+                <NButton text tag="a" href="/manage/song-list" target="_blank" type="info"> 歌单 </NButton>
+                内的歌曲
+              </NCheckbox>
+              <NCheckbox v-model:checked="settings.allowFromWeb" @update:checked="updateSettings" :disabled="!configCanEdit"> 允许通过网页点歌 </NCheckbox>
+            </NSpace>
+            <NDivider> 冷却 (单位: 秒) </NDivider>
+            <NCheckbox v-model:checked="settings.enableCooldown" @update:checked="updateSettings" :disabled="!configCanEdit"> 启用点歌冷却 </NCheckbox>
+            <NSpace v-if="settings.enableCooldown">
+              <NInputGroup style="width: 250px">
+                <NInputGroupLabel> 普通弹幕 </NInputGroupLabel>
+                <NInputNumber v-model:value="settings.cooldownSecond" :disabled="!configCanEdit" />
+                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+              </NInputGroup>
+              <NInputGroup style="width: 220px">
+                <NInputGroupLabel> 舰长 </NInputGroupLabel>
+                <NInputNumber v-model:value="settings.jianzhangCooldownSecond" :disabled="!configCanEdit" />
+                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+              </NInputGroup>
+              <NInputGroup style="width: 220px">
+                <NInputGroupLabel> 提督 </NInputGroupLabel>
+                <NInputNumber v-model:value="settings.tiduCooldownSecond" :disabled="!configCanEdit" />
+                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+              </NInputGroup>
+              <NInputGroup style="width: 220px">
+                <NInputGroupLabel> 总督 </NInputGroupLabel>
+                <NInputNumber v-model:value="settings.zongduCooldownSecond" :disabled="!configCanEdit" />
+                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+              </NInputGroup>
+            </NSpace>
+            <NDivider> OBS </NDivider>
+            <NCheckbox v-model:checked="settings.showRequireInfo" :disabled="!configCanEdit" @update:checked="updateSettings"> 显示底部的需求信息 </NCheckbox>
+            <NDivider> 其他 </NDivider>
+            <NCheckbox v-model:checked="isWarnMessageAutoClose"> 自动关闭点歌失败时的提示消息 </NCheckbox>
+          </NSpace>
+        </NSpin>
+      </NTabPane>
+    </NTabs>
+  </NCard>
+  <NModal v-model:show="showOBSModal" title="OBS组件" preset="card" style="width: 800px">
+    <NAlert title="这是什么?  " type="info"> 将等待队列以及结果显示在OBS中 </NAlert>
+    <NDivider> 浏览 </NDivider>
+    <div style="height: 500px; width: 280px; position: relative; margin: 0 auto">
+      <SongRequestOBS :id="accountInfo?.id" />
+    </div>
+    <br />
+    <NInput :value="'https://vtsuru.live/obs/song-request?id=' + accountInfo?.id" />
+    <NDivider />
+    <NCollapse>
+      <NCollapseItem title="使用说明">
+        <NUl>
+          <NLi>在 OBS 来源中添加源, 选择 浏览器</NLi>
+          <NLi>在 URL 栏填入上方链接</NLi>
+          <NLi>根据自己的需要调整宽度和高度 (这里是宽 280px 高 500px)</NLi>
+          <NLi>完事</NLi>
+        </NUl>
+      </NCollapseItem>
+    </NCollapse>
+  </NModal>
+</template>
+
+<style>
+@keyframes loading {
+  /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
+  0% {
+    /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes animated-border {
+  0% {
+    box-shadow: 0 0 0px #589580;
+  }
+
+  100% {
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0);
+  }
+}
+@keyframes animated-border-round {
+  0% {
+    box-shadow: 0 0 0px #589580;
+    border-radius: 50%;
+  }
+
+  100% {
+    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
+    border-radius: 50%;
+  }
+}
+</style>