From af112da9a84bcec547bc31fcf212ac8ad421ea0f Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Tue, 12 Mar 2024 14:36:01 +0800
Subject: [PATCH] update song-request to live-request, add questionbox tag
 support

---
 src/api/api-models.ts                         |   7 +-
 src/components/QuestionItem.vue               |  10 +-
 src/data/constants.ts                         |   2 +-
 src/router/manage.ts                          |  10 +-
 src/router/obs.ts                             |   7 +-
 src/router/open_live.ts                       |   6 +-
 src/store/useQuestionBox.ts                   | 114 +++++++++++++-
 src/views/AboutView.vue                       |   1 +
 src/views/ManageLayout.vue                    |  10 +-
 src/views/OpenLiveLayout.vue                  |   4 +-
 src/views/ViewerLayout.vue                    |   2 +-
 src/views/manage/DashboardView.vue            |   2 +-
 src/views/manage/QuestionBoxManageView.vue    | 123 +++++++++++----
 src/views/manage/QuestionDisplayCard.vue      |   6 +-
 src/views/manage/SettingsManageView.vue       |   2 +-
 src/views/manage/SongListManageView.vue       |   2 +-
 ...{SongRequestOBS.vue => LiveRequestOBS.vue} | 148 +++++++++---------
 src/views/obs/QueueOBS.vue                    |   2 +-
 .../{SongRequest.vue => LiveRequest.vue}      |  98 ++++++------
 src/views/open_live/OpenLiveIndex.vue         |   2 +-
 src/views/open_live/OpenQueue.vue             |   2 +-
 src/views/others                              |   0
 src/views/single/QuestionDisplay.vue          |   8 +
 src/views/view/QuestionBoxView.vue            |  49 +++++-
 src/views/view/SongListView.vue               |  12 +-
 src/views/view/VideoCollectView.vue           |  15 ++
 .../DefaultSongListTemplate.vue               |  18 ++-
 .../SimpleSongListTemplate.vue                |  96 ++++++++++--
 28 files changed, 542 insertions(+), 216 deletions(-)
 rename src/views/obs/{SongRequestOBS.vue => LiveRequestOBS.vue} (68%)
 rename src/views/open_live/{SongRequest.vue => LiveRequest.vue} (93%)
 delete mode 100644 src/views/others
 create mode 100644 src/views/view/VideoCollectView.vue

diff --git a/src/api/api-models.ts b/src/api/api-models.ts
index e187fe1..ede1c39 100644
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -98,7 +98,7 @@ export interface Setting_QuestionBox {
 export interface UserSetting {
   sendEmail: Setting_SendEmail
   questionBox: Setting_QuestionBox
-  songRequest: Setting_SongRequest
+  songRequest: Setting_LiveRequest
   queue: Setting_Queue
   point: Setting_Point
   questionDisplay: Setting_QuestionDisplay
@@ -109,7 +109,7 @@ export interface UserSetting {
   songListTemplate: string | null
   scheduleTemplate: string | null
 }
-export interface Setting_SongRequest {
+export interface Setting_LiveRequest {
   orderPrefix: string
   enableOnStreaming: boolean
   onlyAllowSongList: boolean
@@ -134,6 +134,7 @@ export interface Setting_SongRequest {
   showRequireInfo: boolean
   showUserName: boolean
   showFanMadelInfo: boolean
+  obsTitle: string
 
   isReverse: boolean
 }
@@ -301,6 +302,8 @@ export interface QAInfo {
   isFavorite: boolean
   sendAt: number
   isAnonymous: boolean
+
+  tag?: string
 }
 export interface LotteryUserInfo {
   name: string
diff --git a/src/components/QuestionItem.vue b/src/components/QuestionItem.vue
index bfa9884..6b37209 100644
--- a/src/components/QuestionItem.vue
+++ b/src/components/QuestionItem.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <NCard v-if="item" :embedded="!item.isReaded" hoverable size="small" :bordered="false">
     <template #header>
-      <NFlex :size="0" align="center" >
+      <NFlex :size="0" align="center">
         <template v-if="!item.isReaded">
           <NTag type="warning" size="tiny"> 未读 </NTag>
           <NDivider vertical />
@@ -22,6 +22,14 @@ const props = defineProps<{
           已注册
         </NTag>
         <NTag v-if="item.isPublic" size="small" type="success" :bordered="false" style="margin-left: 5px"> 公开 </NTag>
+        <NTooltip v-if="item.tag">
+          <template #trigger>
+            <NTag size="small" type="success" style="margin-left: 5px">
+              {{ item.tag }}
+            </NTag>
+          </template>
+          标签/话题
+        </NTooltip>
         <NDivider vertical />
         <NText depth="3" style="font-size: small">
           <NTooltip>
diff --git a/src/data/constants.ts b/src/data/constants.ts
index f49d22f..96c9122 100644
--- a/src/data/constants.ts
+++ b/src/data/constants.ts
@@ -36,7 +36,7 @@ export const HISTORY_API_URL = { toString: () => `${BASE_API}history/` }
 export const SCHEDULE_API_URL = { toString: () => `${BASE_API}schedule/` }
 export const VIDEO_COLLECT_API_URL = { toString: () => `${BASE_API}video-collect/` }
 export const OPEN_LIVE_API_URL = { toString: () => `${BASE_API}open-live/` }
-export const SONG_REQUEST_API_URL = { toString: () => `${BASE_API}song-request/` }
+export const SONG_REQUEST_API_URL = { toString: () => `${BASE_API}live-request/` }
 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/` }
diff --git a/src/router/manage.ts b/src/router/manage.ts
index d6bcae6..d261fed 100644
--- a/src/router/manage.ts
+++ b/src/router/manage.ts
@@ -114,11 +114,11 @@ export default //管理页面
       },
     },
     {
-      path: 'song-request',
-      name: 'manage-songRequest',
-      component: () => import('@/views/open_live/SongRequest.vue'),
+      path: 'live-request',
+      name: 'manage-liveRequest',
+      component: () => import('@/views/open_live/LiveRequest.vue'),
       meta: {
-        title: '点歌 (歌势',
+        title: '点播',
         keepAlive: true,
         danmaku: true,
       },
@@ -128,7 +128,7 @@ export default //管理页面
       name: 'manage-musicRequest',
       component: () => import('@/views/open_live/MusicRequest.vue'),
       meta: {
-        title: '点歌 (点播',
+        title: '点歌',
         keepAlive: true,
         danmaku: true,
       },
diff --git a/src/router/obs.ts b/src/router/obs.ts
index fe5e8b8..7c8e091 100644
--- a/src/router/obs.ts
+++ b/src/router/obs.ts
@@ -11,9 +11,10 @@ export default {
       },
     },
     {
-      path: 'song-request',
-      name: 'obs-song-request',
-      component: () => import('@/views/obs/SongRequestOBS.vue'),
+      path: 'live-request',
+      name: 'obs-live-request',
+      alias: 'song-request',
+      component: () => import('@/views/obs/LiveRequestOBS.vue'),
       meta: {
         title: '弹幕点歌 (歌势',
       },
diff --git a/src/router/open_live.ts b/src/router/open_live.ts
index f2f8762..0747da8 100644
--- a/src/router/open_live.ts
+++ b/src/router/open_live.ts
@@ -19,9 +19,9 @@ export default {
       },
     },
     {
-      path: 'song-request',
-      name: 'open-live-song-request',
-      component: () => import('@/views/open_live/SongRequest.vue'),
+      path: 'live-request',
+      name: 'open-live-live-request',
+      component: () => import('@/views/open_live/LiveRequest.vue'),
       meta: {
         title: '点歌',
       },
diff --git a/src/store/useQuestionBox.ts b/src/store/useQuestionBox.ts
index 6d14249..4a3380a 100644
--- a/src/store/useQuestionBox.ts
+++ b/src/store/useQuestionBox.ts
@@ -7,6 +7,11 @@ import { useMessage } from 'naive-ui'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
+export type QATagInfo = {
+  name: string
+  createAt: number
+  visiable: boolean
+}
 export const useQuestionBox = defineStore('QuestionBox', () => {
   const isLoading = ref(false)
   const isRepling = ref(false)
@@ -16,6 +21,7 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
 
   const recieveQuestions = ref<QAInfo[]>([])
   const sendQuestions = ref<QAInfo[]>([])
+  const tags = ref<QATagInfo[]>([])
 
   const onlyFavorite = ref(false)
   const onlyPublic = ref(false)
@@ -27,7 +33,10 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
         return false
       }*/
       return (
-        (q.isFavorite || !onlyFavorite.value) && (q.isPublic || !onlyPublic.value) && (!q.isReaded || !onlyUnread.value)
+        (q.isFavorite || !onlyFavorite.value) &&
+        (q.isPublic || !onlyPublic.value) &&
+        (!q.isReaded || !onlyUnread.value) &&
+        (!displayTag.value || q.tag == displayTag.value)
       )
     })
     return result
@@ -36,6 +45,7 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
   })
   const currentQuestion = ref<QAInfo>()
   const displayQuestion = ref<QAInfo>()
+  const displayTag = ref<string>()
 
   let isRevieveGetted = false
   //const isSendGetted = false
@@ -58,7 +68,7 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
               displayQuestion.value = recieveQuestions.value.find((q) => q.id == displayId)
             }
           }
-          message.success('共收取 ' + data.data.length + ' 条提问')
+          //message.success('共收取 ' + data.data.length + ' 条提问')
           isRevieveGetted = true
         } else {
           message.error(data.message)
@@ -77,7 +87,7 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
       .then((data) => {
         if (data.code == 200) {
           sendQuestions.value = data.data
-          message.success('共发送 ' + data.data.length + ' 条提问')
+          //message.success('共发送 ' + data.data.length + ' 条提问')
         } else {
           message.error(data.message)
         }
@@ -89,6 +99,98 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
         isLoading.value = false
       })
   }
+  async function GetTags() {
+    isLoading.value = true
+    await QueryGetAPI<QATagInfo[]>(QUESTION_API_URL + 'get-tags', {
+      id: accountInfo.value?.id,
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          tags.value = data.data
+        } else {
+          message.error(data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('发生错误: ' + err)
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  }
+  async function addTag(tag: string) {
+    if (!tag) {
+      message.warning('请输入标签')
+      return
+    }
+    if (tags.value.find((t) => t.name == tag)) {
+      message.warning('标签已存在')
+      return
+    }
+    await QueryGetAPI(QUESTION_API_URL + 'add-tag', {
+      tag: tag,
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          message.success('添加成功')
+          GetTags()
+        } else {
+          message.error('添加失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('添加失败: ' + err)
+      })
+  }
+  async function delTag(tag: string) {
+    if (!tag) {
+      message.warning('请输入标签')
+      return
+    }
+    if (!tags.value.find((t) => t.name == tag)) {
+      message.warning('标签不存在')
+      return
+    }
+    await QueryGetAPI(QUESTION_API_URL + 'del-tag', {
+      tag: tag,
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          message.success('删除成功')
+          GetTags()
+        } else {
+          message.error('删除失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('删除失败: ' + err)
+      })
+  }
+  async function updateTagVisiable(tag: string, visiable: boolean) {
+    if (!tag) {
+      message.warning('请输入标签')
+      return
+    }
+    if (!tags.value.find((t) => t.name == tag)) {
+      message.warning('标签不存在')
+      return
+    }
+    await QueryGetAPI(QUESTION_API_URL + 'update-tag-visiable', {
+      tag: tag,
+      visiable: visiable,
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          message.success('修改成功')
+          GetTags()
+        } else {
+          message.error('修改失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('修改失败: ' + err)
+      })
+  }
   async function reply(id: number, msg: string) {
     isRepling.value = true
     await QueryPostAPI<QAInfo>(QUESTION_API_URL + 'reply', {
@@ -229,12 +331,18 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
     recieveQuestions,
     recieveQuestionsFiltered,
     sendQuestions,
+    tags,
     onlyFavorite,
     onlyPublic,
     onlyUnread,
     displayQuestion,
+    displayTag,
     GetRecieveQAInfo,
     GetSendQAInfo,
+    GetTags,
+    addTag,
+    delTag,
+    updateTagVisiable,
     reply,
     read,
     favorite,
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 6a360a5..7ba65a4 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -36,6 +36,7 @@ import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText, NTimeline, NTi
           </NSpace>
           <NDivider title-placement="left"> 更新日志 </NDivider>
           <NTimeline>
+            <NTimelineItem type="info" title="功能更新" content="1. 点歌(歌势) 修改为点播 2. 棉花糖支持创建话题(标签) 3. 一些bug修复" time="2024-3-12" />
             <NTimelineItem type="info" title="功能更新" content="棉花糖添加展示页面" time="2024-2-20" />
             <NTimelineItem type="info" title="功能更新" content="歌单新增从文件导入" time="2024-2-10" />
             <NTimelineItem type="info" title="功能更新" content="排队的OBS组件添加设置项" time="2024-1-27" />
diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue
index b789c1c..4fed03f 100644
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -341,17 +341,17 @@ const menuOptions = [
                   RouterLink,
                   {
                     to: {
-                      name: 'manage-songRequest',
+                      name: 'manage-liveRequest',
                     },
                   },
                   {
-                    default: () => '点歌(歌势',
+                    default: () => '点播',
                   },
                 ),
-              default: () => '歌势用的, 观众点歌之后需要自己唱',
+              default: () => '歌势之类用的, 可以用来点歌或者跳舞什么的',
             },
           ),
-        key: 'manage-songRequest',
+        key: 'manage-liveRequest',
         icon: renderIcon(MusicalNote),
       },
       {
@@ -369,7 +369,7 @@ const menuOptions = [
                     },
                   },
                   {
-                    default: () => '点歌(点播',
+                    default: () => '点歌',
                   },
                 ),
               default: () => '就是传统的点歌机, 发弹幕后播放指定的歌曲',
diff --git a/src/views/OpenLiveLayout.vue b/src/views/OpenLiveLayout.vue
index ec40193..6c6560f 100644
--- a/src/views/OpenLiveLayout.vue
+++ b/src/views/OpenLiveLayout.vue
@@ -62,13 +62,13 @@ const menuOptions = [
         RouterLink,
         {
           to: {
-            name: 'open-live-song-request',
+            name: 'open-live-live-request',
             query: route.query,
           },
         },
         { default: () => '点歌' },
       ),
-    key: 'open-live-song-request',
+    key: 'open-live-live-request',
     icon: renderIcon(MusicalNote),
   },
   {
diff --git a/src/views/ViewerLayout.vue b/src/views/ViewerLayout.vue
index 554358e..c342888 100644
--- a/src/views/ViewerLayout.vue
+++ b/src/views/ViewerLayout.vue
@@ -190,7 +190,7 @@ onMounted(async () => {
                 <NIcon :component="Moon" />
               </template>
             </NSwitch>
-            <template v-if="accountInfo">
+            <template v-if="accountInfo.id">
               <NSpace>
                 <NButton
                   v-if="useAuth.isAuthed || accountInfo.biliUserAuthInfo"
diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
index 96c9d66..a746310 100644
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -394,7 +394,7 @@ onUnmounted(() => {
                 <template #trigger>
                   <NIcon :component="Info24Filled" />
                 </template>
-                用于进行积分兑换等操作
+                用于进行积分兑换等操作, 如果你是主播可以不用管
               </NTooltip>
             </NTag>
             <NDivider vertical />
diff --git a/src/views/manage/QuestionBoxManageView.vue b/src/views/manage/QuestionBoxManageView.vue
index 4ca20c4..816be79 100644
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/src/views/manage/QuestionBoxManageView.vue
@@ -15,15 +15,19 @@ import {
   NCard,
   NCheckbox,
   NDivider,
+  NEmpty,
   NFlex,
   NIcon,
   NImage,
   NInput,
   NInputGroup,
+  NInputGroupLabel,
   NList,
   NListItem,
   NModal,
+  NPopconfirm,
   NScrollbar,
+  NSelect,
   NSpace,
   NSpin,
   NSplit,
@@ -39,10 +43,8 @@ import {
 import QrcodeVue from 'qrcode.vue'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import QuestionDisplay from './QuestionDisplaySettings.vue'
-import { useElementSize } from '@vueuse/core'
 import QuestionItem from '@/components/QuestionItems.vue'
-import { ArrowCircleRight12Filled } from '@vicons/fluent'
+import { ArrowCircleRight12Filled, Delete24Regular, Eye24Filled, EyeOff24Filled, Info24Filled } from '@vicons/fluent'
 import { useQuestionBox } from '@/store/useQuestionBox'
 
 const accountInfo = useAccount()
@@ -56,6 +58,7 @@ const selectedTabItem = ref(route.query.send ? '1' : '0')
 const replyModalVisiable = ref(false)
 const shareModalVisiable = ref(false)
 const replyMessage = ref()
+const addTagName = ref('')
 
 const showSettingCard = ref(true)
 
@@ -65,6 +68,8 @@ const shareUrl = computed(() => 'https://vtsuru.live/@' + accountInfo.value?.nam
 let isRevieveGetted = false
 let isSendGetted = false
 async function onTabChange(value: string) {
+  return
+
   if (value == '0' && !isRevieveGetted) {
     await useQB.GetRecieveQAInfo()
     isRevieveGetted = true
@@ -81,7 +86,11 @@ function onOpenModal(question: QAInfo) {
 function refresh() {
   isSendGetted = false
   isRevieveGetted = false
-  onTabChange(selectedTabItem.value)
+  if (selectedTabItem.value == '0') {
+    useQB.GetRecieveQAInfo()
+  } else if (selectedTabItem.value == '1') {
+    useQB.GetSendQAInfo()
+  }
 }
 function saveShareImage() {
   html2canvas(shareCardRef.value, {
@@ -139,11 +148,9 @@ async function setFunctionEnable(enable: boolean) {
 }
 
 onMounted(() => {
-  if (selectedTabItem.value == '0') {
-    useQB.GetRecieveQAInfo()
-  } else {
-    useQB.GetSendQAInfo()
-  }
+  useQB.GetTags()
+  useQB.GetRecieveQAInfo()
+  useQB.GetSendQAInfo()
 
   useQB.displayQuestion = useQB.recieveQuestions.find(
     (s) => s.id == accountInfo.value?.settings.questionDisplay.currentQuestion,
@@ -167,30 +174,27 @@ onMounted(() => {
   <NDivider style="margin: 10px 0 10px 0" />
   <NSpin v-if="useQB.isLoading" show />
   <NTabs v-else animated @update:value="onTabChange" v-model:value="selectedTabItem">
-    <NTabPane tab="我收到的" name="0">
-      <NButton @click="$router.push({ name: 'question-display' })" type="primary"> 打开展示页 </NButton>
+    <NTabPane tab="我收到的" name="0" display-directive="show:lazy">
       <NDivider vertical />
-      <NCheckbox v-model:checked="useQB.onlyFavorite"> 只显示收藏 </NCheckbox>
-      <NCheckbox v-model:checked="useQB.onlyPublic"> 只显示公开 </NCheckbox>
-      <NCheckbox v-model:checked="useQB.onlyUnread"> 只显示未读 </NCheckbox>
+      <NFlex align="center">
+        <NButton @click="$router.push({ name: 'question-display' })" type="primary"> 打开展示页 </NButton>
+        <NSelect
+          v-model:value="useQB.displayTag"
+          placeholder="选择当前话题"
+          filterable
+          clearable
+          :options="useQB.tags.map((s) => ({ label: s.name, value: s.name }))"
+          style="width: 200px"
+        />
+        <NCheckbox v-model:checked="useQB.onlyFavorite"> 只显示收藏 </NCheckbox>
+        <NCheckbox v-model:checked="useQB.onlyPublic"> 只显示公开 </NCheckbox>
+        <NCheckbox v-model:checked="useQB.onlyUnread"> 只显示未读 </NCheckbox>
+      </NFlex>
       <NDivider style="margin: 10px 0 10px 0" />
-      <QuestionItem :questions="useQB.recieveQuestionsFiltered">
+      <NEmpty v-if="useQB.recieveQuestionsFiltered.length == 0" description="暂无收到的提问" />
+      <QuestionItem v-else :questions="useQB.recieveQuestionsFiltered">
         <template #footer="{ item }">
           <NSpace>
-            <NTooltip>
-              <template #trigger>
-                <NButton
-                  @click="useQB.setCurrentQuestion(item)"
-                  size="small"
-                  :type="useQB.displayQuestion?.id == item.id ? 'primary' : 'default'"
-                >
-                  <template #icon>
-                    <NIcon :component="ArrowCircleRight12Filled" />
-                  </template>
-                </NButton>
-              </template>
-              设为当前展示的提问
-            </NTooltip>
             <NButton v-if="!item.isReaded" size="small" @click="useQB.read(item, true)" type="success">
               设为已读
             </NButton>
@@ -217,8 +221,9 @@ onMounted(() => {
         </template>
       </QuestionItem>
     </NTabPane>
-    <NTabPane ref="parentRef" tab="我发送的" name="1">
-      <NList>
+    <NTabPane ref="parentRef" tab="我发送的" name="1" display-directive="show:lazy">
+      <NEmpty v-if="useQB.sendQuestions.length == 0" description="暂无发送的提问" />
+      <NList v-else>
         <NListItem v-for="item in useQB.sendQuestions" :key="item.id">
           <NCard hoverable size="small">
             <template #header>
@@ -259,7 +264,8 @@ onMounted(() => {
         </NListItem>
       </NList>
     </NTabPane>
-    <NTabPane v-if="accountInfo" tab="设置" name="2">
+    <NTabPane tab="设置" name="2" display-directive="show:lazy">
+      <NDivider> 设定 </NDivider>
       <NSpin :show="useQB.isLoading">
         <NCheckbox
           v-model:checked="accountInfo.settings.questionBox.allowUnregistedUser"
@@ -267,6 +273,59 @@ onMounted(() => {
         >
           允许未注册用户进行提问
         </NCheckbox>
+        <NDivider>
+          标签
+          <NTooltip>
+            <template #trigger>
+              <NIcon :component="Info24Filled" />
+            </template>
+            类似于话题, 可以在投稿时选择
+          </NTooltip>
+        </NDivider>
+        <NInputGroup>
+          <NInputGroupLabel> 标签名称 </NInputGroupLabel>
+          <NInput v-model:value="addTagName" placeholder="就是名称" maxlength="30" show-count clearable />
+          <NButton type="primary" @click="useQB.addTag(addTagName)"> 添加 </NButton>
+        </NInputGroup>
+        <NDivider style="margin: 15px 0 15px 0" />
+        <NEmpty v-if="useQB.tags.length == 0" description="暂无标签" />
+        <NFlex v-else justify="center">
+          <NList bordered>
+            <NListItem v-for="item in useQB.tags.sort((a, b) => b.createAt - a.createAt)" :key="item.name">
+              <NFlex align="center">
+                <NTag :bordered="false" size="small" :type="item.visiable ? 'success' : 'error'">
+                  {{ item.name }}
+                </NTag>
+                <NTooltip>
+                  <template #trigger>
+                    <NPopconfirm @positive-click="useQB.updateTagVisiable(item.name, !item.visiable)">
+                      <template #trigger>
+                        <NButton :type="item.visiable ? 'success' : 'error'" text>
+                          <template #icon>
+                            <NIcon v-if="item.visiable" :component="Eye24Filled" />
+                            <NIcon v-else :component="EyeOff24Filled" />
+                          </template>
+                        </NButton>
+                      </template>
+                      确定要{{ item.visiable ? '隐藏' : '显示' }}这个标签吗?
+                    </NPopconfirm>
+                  </template>
+                  {{ item.visiable ? '隐藏' : '显示' }}
+                </NTooltip>
+                <NPopconfirm @positive-click="useQB.delTag(item.name)">
+                  <template #trigger>
+                    <NButton type="error" text>
+                      <template #icon>
+                        <NIcon :component="Delete24Regular" />
+                      </template>
+                    </NButton>
+                  </template>
+                  确定要删除这个标签吗?
+                </NPopconfirm>
+              </NFlex>
+            </NListItem>
+          </NList>
+        </NFlex>
         <NDivider> 通知 </NDivider>
         <NCheckbox v-model:checked="accountInfo.settings.sendEmail.recieveQA" @update:checked="saveSettings">
           收到新提问时发送邮件
diff --git a/src/views/manage/QuestionDisplayCard.vue b/src/views/manage/QuestionDisplayCard.vue
index a572356..b9eca2b 100644
--- a/src/views/manage/QuestionDisplayCard.vue
+++ b/src/views/manage/QuestionDisplayCard.vue
@@ -52,12 +52,12 @@ onUnmounted(() => {
       backgroundColor: '#' + setting.borderColor,
       borderColor: setting.borderColor ? '#' + setting.borderColor : undefined,
       borderWidth: setting.borderWidth ? setting.borderWidth + 'px' : undefined,
-      borderTopWidth: setting.showUserName ? 0 : setting.borderWidth,
+      borderTopWidth: setting.showUserName && question ? 0 : setting.borderWidth,
     }"
     :display="question ? 1 : 0"
   >
     <div
-      v-if="setting.showUserName"
+      v-if="setting.showUserName && question"
       class="question-display-user-name"
       :style="{
         color: '#' + setting.nameFontColor,
@@ -79,7 +79,7 @@ onUnmounted(() => {
         fontFamily: setting.font,
       }"
     >
-      <div class="question-display-text">
+      <div class="question-display-text" :is-empty="question ? 0 : 1">
         {{ question?.question.message }}
       </div>
       <img
diff --git a/src/views/manage/SettingsManageView.vue b/src/views/manage/SettingsManageView.vue
index 0199287..48bcada 100644
--- a/src/views/manage/SettingsManageView.vue
+++ b/src/views/manage/SettingsManageView.vue
@@ -369,7 +369,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <NCard v-if="accountInfo" title="设置" :style="`${selectedTab === 'general' ? '' : 'min-height: 800px;'}`">
+  <NCard title="设置" :style="`${selectedTab === 'general' ? '' : 'min-height: 800px;'}`">
     <NSpin :show="isSaving">
       <NTabs v-model:value="selectedTab">
         <NTabPane tab="常规" name="general">
diff --git a/src/views/manage/SongListManageView.vue b/src/views/manage/SongListManageView.vue
index d6a538e..30e8ed3 100644
--- a/src/views/manage/SongListManageView.vue
+++ b/src/views/manage/SongListManageView.vue
@@ -581,7 +581,7 @@ onMounted(async () => {
     </NAlert>
     <NButton @click="showModal = true" type="primary"> 添加歌曲 </NButton>
     <NButton @click="exportData" type="primary" secondary> 导出为 CSV </NButton>
-    <NButton @click="$router.push({ name: 'manage-songRequest' })" secondary> 前往点歌页 </NButton>
+    <NButton @click="$router.push({ name: 'manage-liveRequest' })" secondary> 前往点歌页 </NButton>
     <NButton @click="$router.push({ name: 'user-songList', params: { id: accountInfo?.name } })" secondary>
       前往展示页
     </NButton>
diff --git a/src/views/obs/SongRequestOBS.vue b/src/views/obs/LiveRequestOBS.vue
similarity index 68%
rename from src/views/obs/SongRequestOBS.vue
rename to src/views/obs/LiveRequestOBS.vue
index d02b6bc..d01ff22 100644
--- a/src/views/obs/SongRequestOBS.vue
+++ b/src/views/obs/LiveRequestOBS.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Setting_SongRequest, SongRequestFrom, SongRequestInfo, SongRequestStatus } from '@/api/api-models'
+import { Setting_LiveRequest, SongRequestFrom, SongRequestInfo, SongRequestStatus } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
 import { AVATAR_URL, SONG_REQUEST_API_URL } from '@/data/constants'
 import { useElementSize } from '@vueuse/core'
@@ -37,7 +37,7 @@ const songs = computed(() => {
     return originSongs.value
   }
 })
-const settings = ref<Setting_SongRequest>({} as Setting_SongRequest)
+const settings = ref<Setting_LiveRequest>({} as Setting_LiveRequest)
 const singing = computed(() => {
   return originSongs.value.find((s) => s.status == SongRequestStatus.Singing)
 })
@@ -47,7 +47,7 @@ const activeSongs = computed(() => {
 
 async function get() {
   try {
-    const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_SongRequest }>(
+    const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_LiveRequest }>(
       SONG_REQUEST_API_URL + 'get-active-and-settings',
       {
         id: currentId.value,
@@ -57,7 +57,7 @@ async function get() {
       return data.data
     }
   } catch (err) {}
-  return {} as { songs: SongRequestInfo[]; setting: Setting_SongRequest }
+  return {} as { songs: SongRequestInfo[]; setting: Setting_LiveRequest }
 }
 const isMoreThanContainer = computed(() => {
   return originSongs.value.length * itemHeight > height.value
@@ -92,14 +92,16 @@ let timer: any
 onMounted(() => {
   update()
   timer = setInterval(update, 2000)
-
   //@ts-expect-error 这里获取不了
-  window.obsstudio.onVisibilityChange = function (visibility: boolean) {
-    visiable.value = visibility
-  }
-  //@ts-expect-error 这里获取不了
-  window.obsstudio.onActiveChange = function (a: boolean) {
-    active.value = a
+  if (window.obsstudio) {
+    //@ts-expect-error 这里获取不了
+    window.obsstudio.onVisibilityChange = function (visibility: boolean) {
+      visiable.value = visibility
+    }
+    //@ts-expect-error 这里获取不了
+    window.obsstudio.onActiveChange = function (a: boolean) {
+      active.value = a
+    }
   }
 })
 onUnmounted(() => {
@@ -108,30 +110,34 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="song-request-background" v-bind="$attrs">
-    <p class="song-request-header">点歌</p>
-    <NDivider class="song-request-divider">
-      <p class="song-request-header-count">已有 {{ activeSongs.length ?? 0 }} 首</p>
+  <div class="live-request-background" v-bind="$attrs">
+    <p class="live-request-header">{{ settings.obsTitle ?? '点播' }}</p>
+    <NDivider class="live-request-divider">
+      <p class="live-request-header-count">已有 {{ activeSongs.length ?? 0 }} 首</p>
     </NDivider>
     <div
-      class="song-request-singing-container"
+      class="live-request-processing-container"
       :singing="songs.findIndex((s) => s.status == SongRequestStatus.Singing) > -1"
       :from="singing?.from as number"
       :status="singing?.status as number"
     >
-      <div class="song-request-singing-prefix"></div>
+      <div class="live-request-processing-prefix"></div>
       <template v-if="singing">
-        <img class="song-request-singing-avatar" :src="AVATAR_URL + singing?.user?.uid" referrerpolicy="no-referrer" />
-        <p class="song-request-singing-song-name">{{ singing?.songName }}</p>
-        <p class="song-request-singing-name">{{ singing?.user?.name }}</p>
+        <img
+          class="live-request-processing-avatar"
+          :src="AVATAR_URL + singing?.user?.uid"
+          referrerpolicy="no-referrer"
+        />
+        <p class="live-request-processing-song-name">{{ singing?.songName }}</p>
+        <p class="live-request-processing-name">{{ singing?.user?.name }}</p>
       </template>
-      <div v-else class="song-request-singing-empty">暂未演唱</div>
-      <div class="song-request-singing-suffix"></div>
+      <div v-else class="live-request-processing-empty">暂无</div>
+      <div class="live-request-processing-suffix"></div>
     </div>
-    <div class="song-request-content" ref="listContainerRef">
+    <div class="live-request-content" ref="listContainerRef">
       <template v-if="activeSongs.length > 0">
         <Vue3Marquee
-          class="song-request-list"
+          class="live-request-list"
           :key="key"
           vertical
           :pause="!isMoreThanContainer"
@@ -139,25 +145,25 @@ onUnmounted(() => {
           :style="`height: ${height}px;width: ${width}px;`"
         >
           <span
-            class="song-request-list-item"
+            class="live-request-list-item"
             :from="song.from as number"
             :status="song.status as number"
             v-for="(song, index) in activeSongs"
             :key="song.id"
             :style="`height: ${itemHeight}px`"
           >
-            <div class="song-request-list-item-index" :index="index + 1">
+            <div class="live-request-list-item-index" :index="index + 1">
               {{ index + 1 }}
             </div>
-            <div class="song-request-list-item-song-name">
+            <div class="live-request-list-item-song-name">
               {{ song.songName }}
             </div>
-            <p v-if="settings.showUserName" class="song-request-list-item-name">
+            <p v-if="settings.showUserName" class="live-request-list-item-name">
               {{ song.from == SongRequestFrom.Manual ? '主播添加' : song.user?.name }}
             </p>
             <div
               v-if="settings.showFanMadelInfo"
-              class="song-request-list-item-level"
+              class="live-request-list-item-level"
               :has-level="(song.user?.fans_medal_level ?? 0) > 0"
             >
               {{ `${song.user?.fans_medal_name} ${song.user?.fans_medal_level}` }}
@@ -166,38 +172,38 @@ onUnmounted(() => {
         </Vue3Marquee>
       </template>
       <div v-else style="position: relative; top: 20%">
-        <NEmpty class="song-request-empty" description="暂无人点歌" />
+        <NEmpty class="live-request-empty" description="暂无人点歌" />
       </div>
     </div>
-    <div class="song-request-footer" v-if="settings.showRequireInfo" ref="footerRef">
+    <div class="live-request-footer" v-if="settings.showRequireInfo" ref="footerRef">
       <Vue3Marquee
         :key="key"
         ref="footerListRef"
-        class="song-request-footer-marquee"
+        class="live-request-footer-marquee"
         :pause="footerSize.width < footerListSize.width"
         :duration="20"
       >
-        <span class="song-request-tag" type="prefix">
-          <div class="song-request-tag-key">前缀</div>
-          <div class="song-request-tag-value">
+        <span class="live-request-tag" type="prefix">
+          <div class="live-request-tag-key">前缀</div>
+          <div class="live-request-tag-value">
             {{ settings.orderPrefix }}
           </div>
         </span>
-        <span class="song-request-tag" type="prefix">
-          <div class="song-request-tag-key">允许</div>
-          <div class="song-request-tag-value">
+        <span class="live-request-tag" type="prefix">
+          <div class="live-request-tag-key">允许</div>
+          <div class="live-request-tag-value">
             {{ settings.allowAllDanmaku ? '所有弹幕' : allowGuardTypes.length > 0 ? allowGuardTypes.join(',') : '无' }}
           </div>
         </span>
-        <span class="song-request-tag" type="sc">
-          <div class="song-request-tag-key">SC点歌</div>
-          <div class="song-request-tag-value">
+        <span class="live-request-tag" type="sc">
+          <div class="live-request-tag-key">SC点歌</div>
+          <div class="live-request-tag-value">
             {{ settings.allowSC ? '> ¥' + settings.scMinPrice : '不允许' }}
           </div>
         </span>
-        <span class="song-request-tag" type="fan-madel">
-          <div class="song-request-tag-key">粉丝牌</div>
-          <div class="song-request-tag-value">
+        <span class="live-request-tag" type="fan-madel">
+          <div class="live-request-tag-key">粉丝牌</div>
+          <div class="live-request-tag-value">
             {{
               settings.needWearFanMedal
                 ? settings.fanMedalMinLevel > 0
@@ -213,7 +219,7 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.song-request-background {
+.live-request-background {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -224,7 +230,7 @@ onUnmounted(() => {
   border-radius: 10px;
   color: white;
 }
-.song-request-header {
+.live-request-header {
   margin: 0;
   color: #fff;
   text-align: center;
@@ -236,60 +242,60 @@ onUnmounted(() => {
     0 0 30px #61606086,
     0 0 40px rgba(64, 156, 179, 0.555);
 }
-.song-request-header-count {
+.live-request-header-count {
   color: #ffffffbd;
   text-align: center;
   font-size: 14px;
 }
-.song-request-divider {
+.live-request-divider {
   margin: 0 auto;
   margin-top: -15px;
   margin-bottom: -15px;
   width: 90%;
 }
-.song-request-singing-container {
+.live-request-processing-container {
   height: 35px;
   margin: 0 10px 0 10px;
   display: flex;
   align-items: center;
   gap: 10px;
 }
-.song-request-singing-empty {
+.live-request-processing-empty {
   font-weight: bold;
   font-style: italic;
   color: #ffffffbe;
 }
-.song-request-singing-prefix {
+.live-request-processing-prefix {
   border: 2px solid rgb(231, 231, 231);
   height: 30px;
   width: 10px;
   border-radius: 10px;
 }
-.song-request-singing-container[singing='true'] .song-request-singing-prefix {
+.live-request-processing-container[singing='true'] .live-request-processing-prefix {
   background-color: #75c37f;
   animation: animated-border 3s linear infinite;
 }
-.song-request-singing-container[singing='false'] .song-request-singing-prefix {
+.live-request-processing-container[singing='false'] .live-request-processing-prefix {
   background-color: #c37575;
 }
-.song-request-singing-avatar {
+.live-request-processing-avatar {
   height: 30px;
   border-radius: 50%;
   /* 添加无限旋转动画 */
   animation: rotate 20s linear infinite;
 }
 /* 网页点歌 */
-.song-request-singing-container[from='3'] .song-request-singing-avatar {
+.live-request-processing-container[from='3'] .live-request-processing-avatar {
   display: none;
 }
-.song-request-singing-song-name {
+.live-request-processing-song-name {
   font-size: large;
   font-weight: bold;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 80%;
 }
-.song-request-singing-name {
+.live-request-processing-name {
   font-size: 12px;
   font-style: italic;
 }
@@ -304,7 +310,7 @@ onUnmounted(() => {
 .n-divider__line {
   background-color: #ffffffd5;
 }
-.song-request-content {
+.live-request-content {
   background-color: #0f0f0f4f;
   margin: 10px;
   padding: 10px;
@@ -315,7 +321,7 @@ onUnmounted(() => {
 .marquee {
   justify-items: left;
 }
-.song-request-list-item {
+.live-request-list-item {
   display: flex;
   width: 100%;
   align-self: flex-start;
@@ -324,7 +330,7 @@ onUnmounted(() => {
   justify-content: left;
   gap: 10px;
 }
-.song-request-list-item-song-name {
+.live-request-list-item-song-name {
   font-size: 18px;
   font-weight: bold;
   overflow: hidden;
@@ -334,21 +340,21 @@ onUnmounted(() => {
 }
 
 /* 手动添加 */
-.song-request-list-item[from='0'] .song-request-list-item-name {
+.live-request-list-item[from='0'] .live-request-list-item-name {
   font-style: italic;
   font-weight: bold;
   color: #d2d8d6;
   font-size: 12px;
 }
-.song-request-list-item[from='0'] .song-request-list-item-avatar {
+.live-request-list-item[from='0'] .live-request-list-item-avatar {
   display: none;
 }
 
 /* 弹幕点歌 */
-.song-request-list-item[from='1'] {
+.live-request-list-item[from='1'] {
 }
 
-.song-request-list-item-name {
+.live-request-list-item-name {
   font-style: italic;
   font-size: 12px;
   color: rgba(204, 204, 204, 0.993);
@@ -357,7 +363,7 @@ onUnmounted(() => {
 
   margin-left: auto;
 }
-.song-request-list-item-index {
+.live-request-list-item-index {
   text-align: center;
   height: 18px;
   padding: 2px;
@@ -367,7 +373,7 @@ onUnmounted(() => {
   color: rgba(204, 204, 204, 0.993);
   font-size: 12px;
 }
-.song-request-list-item-level {
+.live-request-list-item-level {
   text-align: center;
   height: 18px;
   padding: 2px;
@@ -377,10 +383,10 @@ onUnmounted(() => {
   color: rgba(204, 204, 204, 0.993);
   font-size: 12px;
 }
-.song-request-list-item-level[has-level='false'] {
+.live-request-list-item-level[has-level='false'] {
   display: none;
 }
-.song-request-footer {
+.live-request-footer {
   margin: 0 5px 5px 5px;
   height: 60px;
   border-radius: 5px;
@@ -388,7 +394,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
 }
-.song-request-tag {
+.live-request-tag {
   display: flex;
   margin: 5px 0 5px 5px;
   height: 40px;
@@ -400,12 +406,12 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: left;
 }
-.song-request-tag-key {
+.live-request-tag-key {
   font-style: italic;
   color: rgb(211, 211, 211);
   font-size: 12px;
 }
-.song-request-tag-value {
+.live-request-tag-value {
   font-size: 14px;
 }
 @keyframes animated-border {
diff --git a/src/views/obs/QueueOBS.vue b/src/views/obs/QueueOBS.vue
index 22f1872..62136e7 100644
--- a/src/views/obs/QueueOBS.vue
+++ b/src/views/obs/QueueOBS.vue
@@ -4,7 +4,7 @@ import {
   QueueSortType,
   ResponseQueueModel,
   Setting_Queue,
-  Setting_SongRequest,
+  Setting_LiveRequest,
   SongRequestFrom,
   SongRequestInfo,
   QueueStatus,
diff --git a/src/views/open_live/SongRequest.vue b/src/views/open_live/LiveRequest.vue
similarity index 93%
rename from src/views/open_live/SongRequest.vue
rename to src/views/open_live/LiveRequest.vue
index 606daa8..3f60695 100644
--- a/src/views/open_live/SongRequest.vue
+++ b/src/views/open_live/LiveRequest.vue
@@ -5,7 +5,7 @@ import {
   EventDataTypes,
   EventModel,
   FunctionTypes,
-  Setting_SongRequest,
+  Setting_LiveRequest,
   SongRequestFrom,
   SongRequestInfo,
   SongRequestStatus,
@@ -65,10 +65,10 @@ import {
 } 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 SongRequestOBS from '../obs/LiveRequestOBS.vue'
 
 const defaultSettings = {
-  orderPrefix: '点歌',
+  orderPrefix: '点播',
   onlyAllowSongList: false,
   queueMaxSize: 10,
   allowAllDanmaku: true,
@@ -88,11 +88,11 @@ const defaultSettings = {
   tiduCooldownSecond: 600,
   jianzhangCooldownSecond: 900,
   isReverse: false,
-} as Setting_SongRequest
+} as Setting_LiveRequest
 const STATUS_MAP = {
   [SongRequestStatus.Waiting]: '等待中',
-  [SongRequestStatus.Singing]: '演唱中',
-  [SongRequestStatus.Finish]: '已演唱',
+  [SongRequestStatus.Singing]: '处理中',
+  [SongRequestStatus.Finish]: '已处理',
   [SongRequestStatus.Cancel]: '已取消',
 }
 
@@ -194,7 +194,7 @@ async function getAllSong() {
         id: accountInfo.value.id,
       })
       if (data.code == 200) {
-        console.log('[OPEN-LIVE-Song-Request] 已获取所有数据')
+        console.log('[OPEN-LIVE-LIVE-REQUEST] 已获取所有数据')
         return new List(data.data).OrderByDescending((s) => s.createAt).ToArray()
       } else {
         message.error('无法获取数据: ' + data.message)
@@ -210,10 +210,10 @@ async function getAllSong() {
 }
 async function addSong(danmaku: EventModel) {
   console.log(
-    `[OPEN-LIVE-Song-Request] 收到 [${danmaku.name}] 的点歌${danmaku.type == EventDataTypes.SC ? 'SC' : '弹幕'}: ${danmaku.msg}`,
+    `[OPEN-LIVE-LIVE-REQUEST] 收到 [${danmaku.name}] 的点播${danmaku.type == EventDataTypes.SC ? 'SC' : '弹幕'}: ${danmaku.msg}`,
   )
   if (settings.value.enableOnStreaming && accountInfo.value?.streamerInfo?.isStreaming != true) {
-    message.info('当前未在直播中, 无法添加点歌请求. 或者关闭设置中的仅允许直播时加入')
+    message.info('当前未在直播中, 无法添加点播请求. 或者关闭设置中的仅允许直播时加入')
     return
   }
   if (accountInfo.value) {
@@ -225,12 +225,12 @@ async function addSong(danmaku: EventModel) {
         //message.error(`[${danmaku.name}] 添加曲目失败: ${data.message}`)
         const time = Date.now()
         notice.warning({
-          title: danmaku.name + ' 点歌失败',
+          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}`)
+        console.log(`[OPEN-LIVE-LIVE-REQUEST] [${danmaku.name}] 添加曲目失败: ${data.message}`)
       }
     })
   } else {
@@ -253,12 +253,12 @@ async function addSong(danmaku: EventModel) {
       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}`)
+    message.success(`[${danmaku.name}] 添加: ${songData.songName}`)
   }
 }
 async function addSongManual() {
   if (!newSongName.value) {
-    message.error('请输入曲目名')
+    message.error('请输入名称')
     return
   }
   if (accountInfo.value) {
@@ -266,12 +266,12 @@ async function addSongManual() {
       name: newSongName.value,
     }).then((data) => {
       if (data.code == 200) {
-        message.success(`已手动添加曲目: ${data.data.songName}`)
+        message.success(`已手动添加: ${data.data.songName}`)
         originSongs.value.unshift(data.data)
         newSongName.value = ''
-        console.log(`[OPEN-LIVE-Song-Request] 已手动添加曲目: ${data.data.songName}`)
+        console.log(`[OPEN-LIVE-LIVE-REQUEST] 已手动添加: ${data.data.songName}`)
       } else {
-        message.error(`手动添加曲目失败: ${data.message}`)
+        message.error(`手动添加失败: ${data.message}`)
       }
     })
   } else {
@@ -287,7 +287,7 @@ async function addSongManual() {
       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}`)
+    message.success(`已手动添加: ${songData.songName}`)
   }
 }
 async function updateSongStatus(song: SongRequestInfo, status: SongRequestStatus) {
@@ -313,7 +313,7 @@ async function updateSongStatus(song: SongRequestInfo, status: SongRequestStatus
       break
     case SongRequestStatus.Singing:
       statusString = 'singing'
-      statusString2 = '演唱中'
+      statusString2 = '处理中'
       break
   }
   await QueryGetAPI(SONG_REQUEST_API_URL + statusString, {
@@ -321,19 +321,19 @@ async function updateSongStatus(song: SongRequestInfo, status: SongRequestStatus
   })
     .then((data) => {
       if (data.code == 200) {
-        console.log(`[OPEN-LIVE-Song-Request] 更新曲目状态: ${song.songName} -> ${statusString}`)
+        console.log(`[OPEN-LIVE-LIVE-REQUEST] 更新状态: ${song.songName} -> ${statusString}`)
         song.status = status
         if (status > SongRequestStatus.Singing) {
           song.finishAt = Date.now()
         }
-        message.success(`已更新曲目状态为: ${statusString2}`)
+        message.success(`已更新状态为: ${statusString2}`)
       } else {
-        console.log(`[OPEN-LIVE-Song-Request] 更新曲目状态失败: ${data.message}`)
-        message.error(`更新曲目状态失败: ${data.message}`)
+        console.log(`[OPEN-LIVE-LIVE-REQUEST] 更新状态失败: ${data.message}`)
+        message.error(`更新状态失败: ${data.message}`)
       }
     })
     .catch((err) => {
-      message.error(`更新曲目状态失败`)
+      message.error(`更新状态失败`)
     })
     .finally(() => {
       isLoading.value = false
@@ -376,20 +376,20 @@ async function onUpdateFunctionEnable() {
       .then((data) => {
         if (data.code == 200) {
           message.success(
-            `已${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}点歌功能`,
+            `已${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}`,
+            `点播功能${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}失败: ${data.message}`,
           )
         }
       })
       .catch((err) => {
         message.error(
-          `点歌功能${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}失败: ${err}`,
+          `点播功能${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}失败: ${err}`,
         )
       })
   }
@@ -677,12 +677,12 @@ async function updateActive() {
         } else {
           originSongs.value.unshift(item)
           if (item.from == SongRequestFrom.Web) {
-            message.success(`[${item.user?.name}] 直接从网页歌单点歌: ${item.songName}`)
+            message.success(`[${item.user?.name}] 直接从网页歌单点播: ${item.songName}`)
           }
         }
       })
     } else {
-      message.error('无法获取点歌队列: ' + data.message)
+      message.error('无法获取点播队列: ' + data.message)
       return []
     }
   } catch (err) {}
@@ -747,8 +747,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <NAlert type="info" v-if="accountInfo">
-    启用弹幕点歌功能
+  <NAlert type="info" v-if="accountInfo.id">
+    启用弹幕点播功能
     <NSwitch
       :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.SongRequest)"
       @update:value="onUpdateFunctionEnable"
@@ -760,7 +760,7 @@ onUnmounted(() => {
       <NButton text type="primary" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank">
         VtsuruEventFetcher
       </NButton>
-      则其需要保持此页面开启才能点歌, 也不要同时开多个页面, 会导致点歌重复 !(部署了则不影响)
+      则其需要保持此页面开启才能点播, 也不要同时开多个页面, 会导致点播重复 !(部署了则不影响)
     </NText>
   </NAlert>
   <NAlert
@@ -801,12 +801,12 @@ onUnmounted(() => {
               <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" />
@@ -1049,7 +1049,7 @@ onUnmounted(() => {
           <NDivider> 规则 </NDivider>
           <NSpace vertical>
             <NInputGroup style="width: 250px">
-              <NInputGroupLabel> 点歌弹幕前缀 </NInputGroupLabel>
+              <NInputGroupLabel> 点播弹幕前缀 </NInputGroupLabel>
               <template v-if="configCanEdit">
                 <NInput v-model:value="settings.orderPrefix" />
                 <NButton @click="updateSettings" type="primary">确定</NButton>
@@ -1075,7 +1075,7 @@ onUnmounted(() => {
                 @update:checked="updateSettings"
                 :disabled="!configCanEdit"
               >
-                允许所有弹幕点歌
+                允许所有弹幕点播
               </NCheckbox>
               <template v-if="!settings.allowAllDanmaku">
                 <NCheckbox
@@ -1118,7 +1118,7 @@ onUnmounted(() => {
             </NSpace>
             <NSpace align="center">
               <NCheckbox v-model:checked="settings.allowSC" @update:checked="updateSettings" :disabled="!configCanEdit">
-                允许通过 SuperChat 点歌
+                允许通过 SuperChat 点播
               </NCheckbox>
               <span v-if="settings.allowSC">
                 <NCheckbox
@@ -1126,13 +1126,13 @@ onUnmounted(() => {
                   @update:checked="updateSettings"
                   :disabled="!configCanEdit"
                 >
-                  SC点歌无视限制
+                  SC 点播无视限制
                 </NCheckbox>
                 <NTooltip>
                   <template #trigger>
                     <NIcon :component="Info24Filled" />
                   </template>
-                  包含冷却时间, 队列长度, 重复点歌等
+                  包含冷却时间, 队列长度, 重复点播等
                 </NTooltip>
               </span>
               <NInputGroup v-if="settings.allowSC" style="width: 250px">
@@ -1141,6 +1141,7 @@ onUnmounted(() => {
                 <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
               </NInputGroup>
             </NSpace>
+            <NDivider> 点歌 </NDivider>
             <NSpace>
               <NCheckbox
                 v-model:checked="settings.onlyAllowSongList"
@@ -1165,7 +1166,7 @@ onUnmounted(() => {
               @update:checked="updateSettings"
               :disabled="!configCanEdit"
             >
-              启用点歌冷却
+              启用点播冷却
             </NCheckbox>
             <NSpace v-if="settings.enableCooldown">
               <NInputGroup style="width: 250px">
@@ -1190,7 +1191,14 @@ onUnmounted(() => {
               </NInputGroup>
             </NSpace>
             <NDivider> OBS </NDivider>
-            <NSpace>
+            <NSpace align="center">
+              <NInputGroup style="width: 220px">
+                <NInputGroupLabel> 标题 </NInputGroupLabel>
+                <template v-if="configCanEdit">
+                  <NInput v-model:value="settings.obsTitle" placeholder="默认为 点播" />
+                  <NButton @click="updateSettings" type="primary">确定</NButton>
+                </template>
+              </NInputGroup>
               <NCheckbox
                 v-model:checked="settings.showRequireInfo"
                 :disabled="!configCanEdit"
@@ -1203,24 +1211,24 @@ onUnmounted(() => {
                 :disabled="!configCanEdit"
                 @update:checked="updateSettings"
               >
-                显示点歌用户名
+                显示点播用户名
               </NCheckbox>
               <NCheckbox
                 v-model:checked="settings.showFanMadelInfo"
                 :disabled="!configCanEdit"
                 @update:checked="updateSettings"
               >
-                显示点歌用户粉丝牌
+                显示点播用户粉丝牌
               </NCheckbox>
             </NSpace>
             <NDivider> 其他 </NDivider>
-            <NCheckbox v-model:checked="isWarnMessageAutoClose"> 自动关闭点歌失败时的提示消息 </NCheckbox>
+            <NCheckbox v-model:checked="isWarnMessageAutoClose"> 自动关闭点播失败时的提示消息 </NCheckbox>
           </NSpace>
         </NSpin>
       </NTabPane>
     </NTabs>
     <template v-else>
-      <NAlert title="未启用" type="error"> 请先启用弹幕点歌功能 </NAlert>
+      <NAlert title="未启用" type="error"> 请先启用弹幕点播功能 </NAlert>
     </template>
   </NCard>
   <NModal v-model:show="showOBSModal" title="OBS组件" preset="card" style="width: 800px">
@@ -1230,7 +1238,7 @@ onUnmounted(() => {
       <SongRequestOBS :id="accountInfo?.id" />
     </div>
     <br />
-    <NInput :value="'https://vtsuru.live/obs/song-request?id=' + accountInfo?.id" />
+    <NInput :value="'https://vtsuru.live/obs/live-request?id=' + accountInfo?.id" />
     <NDivider />
     <NCollapse>
       <NCollapseItem title="使用说明">
diff --git a/src/views/open_live/OpenLiveIndex.vue b/src/views/open_live/OpenLiveIndex.vue
index 4be8ed2..1c8451c 100644
--- a/src/views/open_live/OpenLiveIndex.vue
+++ b/src/views/open_live/OpenLiveIndex.vue
@@ -26,7 +26,7 @@ const accountInfo = useAccount()
     <NCard hoverable embedded size="small" title="弹幕点歌" style="width: 300px">
       通过弹幕或者SC进行点歌, 注册后可以保存和导出 (这个是歌势用的点歌, 不是拿来放歌的那种!)
       <template #footer>
-        <NButton @click="$router.push({ name: 'open-live-song-request', query: $route.query })" type="primary">
+        <NButton @click="$router.push({ name: 'open-live-live-request', query: $route.query })" type="primary">
           前往使用
         </NButton>
       </template>
diff --git a/src/views/open_live/OpenQueue.vue b/src/views/open_live/OpenQueue.vue
index f68e7bf..c12ee28 100644
--- a/src/views/open_live/OpenQueue.vue
+++ b/src/views/open_live/OpenQueue.vue
@@ -749,7 +749,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <NAlert type="info" v-if="accountInfo">
+  <NAlert type="info" v-if="accountInfo.id">
     启用弹幕队列功能
     <NSwitch
       :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.Queue)"
diff --git a/src/views/others b/src/views/others
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/single/QuestionDisplay.vue b/src/views/single/QuestionDisplay.vue
index e335d80..592e672 100644
--- a/src/views/single/QuestionDisplay.vue
+++ b/src/views/single/QuestionDisplay.vue
@@ -145,6 +145,14 @@ onMounted(() => {
           <NButton @click="$router.push({ name: 'manage-questionBox' })" size="tiny" secondary> 回到控制台 </NButton>
         </template>
         <NFlex align="center">
+          <NSelect
+            v-model:value="useQB.displayTag"
+            placeholder="选择当前话题"
+            filterable
+            clearable
+            :options="useQB.tags.map((s) => ({ label: s.name, value: s.name }))"
+            style="width: 200px"
+          />
           <NButton @click="useQB.GetRecieveQAInfo" type="primary"> 刷新 </NButton>
           <NCheckbox v-model:checked="useQB.onlyFavorite"> 只显示收藏 </NCheckbox>
           <NCheckbox v-model:checked="useQB.onlyUnread"> 只显示未读 </NCheckbox>
diff --git a/src/views/view/QuestionBoxView.vue b/src/views/view/QuestionBoxView.vue
index 79119ac..729eb5c 100644
--- a/src/views/view/QuestionBoxView.vue
+++ b/src/views/view/QuestionBoxView.vue
@@ -16,6 +16,7 @@ import {
   NInput,
   NList,
   NListItem,
+  NSelect,
   NSpace,
   NText,
   NTime,
@@ -47,6 +48,8 @@ const isSelf = computed(() => {
 const questionMessage = ref('')
 const fileList = ref<UploadFileInfo[]>([])
 const publicQuestions = ref<QAInfo[]>([])
+const tags = ref<string[]>([])
+const selectedTag = ref()
 
 const isAnonymous = ref(true)
 const isSending = ref(false)
@@ -57,7 +60,7 @@ function countGraphemes(value: string) {
 }
 async function SendQuestion() {
   if (countGraphemes(questionMessage.value) < 3) {
-    message.error('内容最少需要10个字')
+    message.error('内容最少需要3个字')
     return
   }
   isSending.value = true
@@ -68,6 +71,7 @@ async function SendQuestion() {
       IsAnonymous: !accountInfo.value || isAnonymous.value,
       Message: questionMessage.value,
       ImageBase64: fileList.value?.length > 0 ? await getBase64(fileList.value[0].file) : undefined,
+      Tag: selectedTag.value,
     },
     [['Turnstile', token.value]],
   )
@@ -125,9 +129,29 @@ function getPublicQuestions() {
       isGetting.value = false
     })
 }
+function getTags() {
+  isGetting.value = true
+  QueryGetAPI<string[]>(QUESTION_API_URL + 'get-tags', {
+    id: userInfo?.id,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        tags.value = data.data
+      } else {
+        message.error('获取标签失败:' + data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('获取标签失败: ' + err)
+    })
+    .finally(() => {
+      isGetting.value = false
+    })
+}
 
 onMounted(() => {
   getPublicQuestions()
+  getTags()
 })
 
 onUnmounted(() => {
@@ -140,6 +164,16 @@ onUnmounted(() => {
     <NCard embedded>
       <NSpace vertical>
         <NSpace align="center" justify="center">
+          <NSelect
+            v-model:value="selectedTag"
+            placeholder="(可选) 要提问的话题"
+            filterable
+            clearable
+            :options="tags.map((s) => ({ label: s, value: s }))"
+            style="width: 200px"
+          >
+            <template #header> 不选的话则是默认话题 </template>
+          </NSelect>
           <NInput
             :disabled="isSelf"
             show-count
@@ -153,7 +187,7 @@ onUnmounted(() => {
             :max="1"
             accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico"
             list-type="image-card"
-            :disabled="!accountInfo || isSelf"
+            :disabled="!accountInfo.id || isSelf"
             :default-upload="false"
             v-model:file-list="fileList"
             @update:file-list="OnFileListChange"
@@ -163,19 +197,18 @@ onUnmounted(() => {
         </NSpace>
         <NDivider style="margin: 10px 0 10px 0" />
         <NSpace align="center">
-          <NAlert v-if="!accountInfo && !isSelf" type="warning"> 只有注册用户才能够上传图片 </NAlert>
+          <NAlert v-if="!accountInfo.id && !isSelf" type="warning"> 只有注册用户才能够上传图片 </NAlert>
         </NSpace>
-        <NSpace vertical>
-          <NCheckbox v-if="accountInfo" :disabled="isSelf" v-model:checked="isAnonymous" label="匿名提问" />
+        <NSpace v-if="accountInfo.id" vertical>
+          <NCheckbox :disabled="isSelf" v-model:checked="isAnonymous" label="匿名提问" />
+          <NDivider style="margin: 10px 0 10px 0" />
         </NSpace>
-        <NDivider style="margin: 10px 0 10px 0" />
         <NSpace justify="center">
           <NButton :disabled="isSelf" type="primary" :loading="isSending || !token" @click="SendQuestion">
             发送
           </NButton>
           <NButton
-            v-if="accountInfo"
-            :disabled="isSelf"
+            :disabled="isSelf || !accountInfo.id"
             type="info"
             @click="$router.push({ name: 'manage-questionBox', query: { send: '1' } })"
           >
diff --git a/src/views/view/SongListView.vue b/src/views/view/SongListView.vue
index 421bc51..a8f6e7c 100644
--- a/src/views/view/SongListView.vue
+++ b/src/views/view/SongListView.vue
@@ -6,8 +6,8 @@
     :user-info="userInfo"
     :bili-info="biliInfo"
     :currentData="currentData"
-    :song-request-settings="settings"
-    :song-request-active="songsActive"
+    :live-request-settings="settings"
+    :live-request-active="songsActive"
     @request-song="requestSong"
     v-bind="$attrs"
   />
@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import { useAccount } from '@/api/account'
-import { Setting_SongRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models'
+import { Setting_LiveRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPIWithParams } from '@/api/query'
 import { SONG_API_URL, SONG_REQUEST_API_URL, SongListTemplateMap } from '@/data/constants'
 import { NSpin, useMessage } from 'naive-ui'
@@ -40,11 +40,11 @@ const message = useMessage()
 
 const errMessage = ref('')
 const songsActive = ref<SongRequestInfo[]>([])
-const settings = ref<Setting_SongRequest>({} as Setting_SongRequest)
+const settings = ref<Setting_LiveRequest>({} as Setting_LiveRequest)
 
 async function getSongRequestInfo() {
   try {
-    const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_SongRequest }>(
+    const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_LiveRequest }>(
       SONG_REQUEST_API_URL + 'get-active-and-settings',
       {
         id: props.userInfo?.id,
@@ -54,7 +54,7 @@ async function getSongRequestInfo() {
       return data.data
     }
   } catch (err) {}
-  return {} as { songs: SongRequestInfo[]; setting: Setting_SongRequest }
+  return {} as { songs: SongRequestInfo[]; setting: Setting_LiveRequest }
 }
 async function getSongs() {
   isLoading.value = true
diff --git a/src/views/view/VideoCollectView.vue b/src/views/view/VideoCollectView.vue
new file mode 100644
index 0000000..a105ade
--- /dev/null
+++ b/src/views/view/VideoCollectView.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { UserInfo } from '@/api/api-models'
+
+const props = defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  biliInfo: any | undefined
+  userInfo: UserInfo | undefined
+  template?: string | undefined
+}>()
+
+</script>
+
+<template>
+  1
+</template>
\ No newline at end of file
diff --git a/src/views/view/songListTemplate/DefaultSongListTemplate.vue b/src/views/view/songListTemplate/DefaultSongListTemplate.vue
index f7ae87a..8b9c6bd 100644
--- a/src/views/view/songListTemplate/DefaultSongListTemplate.vue
+++ b/src/views/view/songListTemplate/DefaultSongListTemplate.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
-import { Setting_SongRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models'
+import { Setting_LiveRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models'
 import SongList from '@/components/SongList.vue'
 import SongRequestOBS from '@/views/obs/SongRequestOBS.vue'
 import { CloudAdd20Filled } from '@vicons/fluent'
@@ -13,7 +13,7 @@ const accountInfo = useAccount()
 const props = defineProps<{
   userInfo: UserInfo | undefined
   biliInfo: any | undefined
-  songRequestSettings: Setting_SongRequest
+  songRequestSettings: Setting_LiveRequest
   songRequestActive: SongRequestInfo[]
   currentData?: SongsInfo[] | undefined
 }>()
@@ -48,7 +48,11 @@ const buttoms = (song: SongsInfo) => [
               },
             ),
           default: () =>
-            !props.songRequestSettings.allowFromWeb || song.options ? '点歌 | 用户不允许从网页点歌, 点击后将复制点歌内容到剪切板' : !accountInfo ? '点歌 | 你需要登录后才能点歌' : '点歌',
+            !props.songRequestSettings.allowFromWeb || song.options
+              ? '点歌 | 用户不允许从网页点歌, 点击后将复制点歌内容到剪切板'
+              : !accountInfo
+                ? '点歌 | 你需要登录后才能点歌'
+                : '点歌',
         },
       )
     : undefined,
@@ -57,7 +61,13 @@ const buttoms = (song: SongsInfo) => [
 
 <template>
   <NDivider style="margin-top: 10px" />
-  <SongList v-if="currentData" :songs="currentData ?? []" :is-self="accountInfo?.id == userInfo?.id" :extra-buttom="buttoms" v-bind="$attrs" />
+  <SongList
+    v-if="currentData"
+    :songs="currentData ?? []"
+    :is-self="accountInfo?.id == userInfo?.id"
+    :extra-buttom="buttoms"
+    v-bind="$attrs"
+  />
   <NCollapse v-if="userInfo?.canRequestSong">
     <NCollapseItem title="点歌列表">
       <NCard size="small" embedded>
diff --git a/src/views/view/songListTemplate/SimpleSongListTemplate.vue b/src/views/view/songListTemplate/SimpleSongListTemplate.vue
index 89fc531..456c466 100644
--- a/src/views/view/songListTemplate/SimpleSongListTemplate.vue
+++ b/src/views/view/songListTemplate/SimpleSongListTemplate.vue
@@ -1,19 +1,37 @@
 <script setup lang="ts">
 import { GetGuardColor } from '@/Utils'
 import { useAccount } from '@/api/account'
-import { FunctionTypes, Setting_SongRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models'
+import { FunctionTypes, Setting_LiveRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models'
 import SongPlayer from '@/components/SongPlayer.vue'
 import SongRequestOBS from '@/views/obs/SongRequestOBS.vue'
 import { CloudAdd20Filled, Play24Filled } from '@vicons/fluent'
 import { useWindowSize } from '@vueuse/core'
 import { throttle } from 'lodash'
-import { NButton, NCard, NCollapseTransition, NDivider, NEllipsis, NEmpty, NGrid, NGridItem, NIcon, NInput, NPopover, NScrollbar, NSelect, NSpace, NTag, NText, NTooltip } from 'naive-ui'
+import {
+  NButton,
+  NCard,
+  NCollapseTransition,
+  NDivider,
+  NEllipsis,
+  NEmpty,
+  NGrid,
+  NGridItem,
+  NIcon,
+  NInput,
+  NPopover,
+  NScrollbar,
+  NSelect,
+  NSpace,
+  NTag,
+  NText,
+  NTooltip,
+} from 'naive-ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
   userInfo: UserInfo | undefined
   biliInfo: any | undefined
-  songRequestSettings: Setting_SongRequest
+  songRequestSettings: Setting_LiveRequest
   songRequestActive: SongRequestInfo[]
   currentData: SongsInfo[] | undefined
 }>()
@@ -86,14 +104,28 @@ function loadMore() {
 }
 </script>
 <template>
-  <div :style="{ display: 'flex', justifyContent: 'center', flexDirection: windowSize.width.value > 900 ? 'row' : 'column', gap: '10px', width: '100%' }">
+  <div
+    :style="{
+      display: 'flex',
+      justifyContent: 'center',
+      flexDirection: windowSize.width.value > 900 ? 'row' : 'column',
+      gap: '10px',
+      width: '100%',
+    }"
+  >
     <NCard size="small" :style="{ width: windowSize.width.value > 900 ? '400px' : '100%' }">
       <NCollapseTransition>
         <SongPlayer v-if="selectedSong" :song="selectedSong" v-model:is-lrc-loading="isLrcLoading" />
       </NCollapseTransition>
       <NDivider> 标签 </NDivider>
       <NSpace>
-        <NButton v-for="tag in tags" size="small" secondary :type="selectedTag == tag ? 'primary' : 'default'" @click="selectedTag == tag ? (selectedTag = '') : (selectedTag = tag)">
+        <NButton
+          v-for="tag in tags"
+          size="small"
+          secondary
+          :type="selectedTag == tag ? 'primary' : 'default'"
+          @click="selectedTag == tag ? (selectedTag = '') : (selectedTag = tag)"
+        >
           {{ tag }}
         </NButton>
       </NSpace>
@@ -111,17 +143,32 @@ function loadMore() {
           clearable
         />
         <NDivider />
-        <SongRequestOBS v-if="userInfo?.extra?.enableFunctions.includes(FunctionTypes.SongRequest)" :id="userInfo?.id" />
+        <SongRequestOBS
+          v-if="userInfo?.extra?.enableFunctions.includes(FunctionTypes.SongRequest)"
+          :id="userInfo?.id"
+        />
       </NSpace>
     </NCard>
     <NEmpty v-if="!currentData || songs?.length == 0" description="暂无曲目" style="max-width: 0 auto" />
-    <NScrollbar v-else ref="container" :style="{ flexGrow: 1, height: windowSize.width.value > 900 ? '90vh' : '800px', overflowY: 'auto', overflowX: 'hidden' }" @scroll="onScroll">
+    <NScrollbar
+      v-else
+      ref="container"
+      :style="{
+        flexGrow: 1,
+        height: windowSize.width.value > 900 ? '90vh' : '800px',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+      }"
+      @scroll="onScroll"
+    >
       <NGrid cols="1 600:2 900:3 1200:4" x-gap="10" y-gap="10" responsive="self">
         <NGridItem v-for="item in songs" :key="item.key">
           <NCard size="small" style="height: 200px; min-width: 300px">
             <template #header>
               <NSpace :wrap="false" align="center">
-                <div :style="`border-radius: 4px; background-color: ${item.options ? '#bd5757' : '#577fb8'}; width: 7px; height: 20px`"></div>
+                <div
+                  :style="`border-radius: 4px; background-color: ${item.options ? '#bd5757' : '#577fb8'}; width: 7px; height: 20px`"
+                ></div>
                 <NEllipsis>
                   {{ item.name }}
                 </NEllipsis>
@@ -130,7 +177,11 @@ function loadMore() {
             <NSpace vertical>
               <NSpace v-if="(item.author?.length ?? 0) > 0" :size="0">
                 <div v-for="(author, index) in item.author" v-bind:key="author">
-                  <NButton size="small" text @click="selectedAuthor == author ? (selectedAuthor = undefined) : (selectedAuthor = author)">
+                  <NButton
+                    size="small"
+                    text
+                    @click="selectedAuthor == author ? (selectedAuthor = undefined) : (selectedAuthor = author)"
+                  >
                     <NText depth="3" :style="{ color: selectedAuthor == author ? '#82bcd3' : '' }">
                       {{ author }}
                     </NText>
@@ -146,11 +197,19 @@ function loadMore() {
                 </NEllipsis>
                 <template v-if="item.options">
                   <NSpace>
-                    <NTag v-if="item.options?.scMinPrice" size="small" type="error" :bordered="false"> SC | {{ item.options?.scMinPrice }}</NTag>
-                    <NTag v-if="item.options?.fanMedalMinLevel" size="small" type="info" :bordered="false"> 粉丝牌 | {{ item.options?.fanMedalMinLevel }}</NTag>
-                    <NTag v-if="item.options?.needZongdu" size="small" :color="{ color: GetGuardColor(1) }"> 总督 </NTag>
+                    <NTag v-if="item.options?.scMinPrice" size="small" type="error" :bordered="false">
+                      SC | {{ item.options?.scMinPrice }}</NTag
+                    >
+                    <NTag v-if="item.options?.fanMedalMinLevel" size="small" type="info" :bordered="false">
+                      粉丝牌 | {{ item.options?.fanMedalMinLevel }}</NTag
+                    >
+                    <NTag v-if="item.options?.needZongdu" size="small" :color="{ color: GetGuardColor(1) }">
+                      总督
+                    </NTag>
                     <NTag v-if="item.options?.needTidu" size="small" :color="{ color: GetGuardColor(2) }"> 提督 </NTag>
-                    <NTag v-if="item.options?.needJianzhang" size="small" :color="{ color: GetGuardColor(3) }"> 舰长 </NTag>
+                    <NTag v-if="item.options?.needJianzhang" size="small" :color="{ color: GetGuardColor(3) }">
+                      舰长
+                    </NTag>
                   </NSpace>
                 </template>
               </NSpace>
@@ -159,7 +218,12 @@ function loadMore() {
               <NSpace align="center" :wrap="false">
                 <NTooltip v-if="item.url">
                   <template #trigger>
-                    <NButton size="small" @click="selectedSong = item" type="success" :loading="isLrcLoading == item.key">
+                    <NButton
+                      size="small"
+                      @click="selectedSong = item"
+                      type="success"
+                      :loading="isLrcLoading == item.key"
+                    >
                       <template #icon>
                         <NIcon :component="Play24Filled" />
                       </template>
@@ -197,7 +261,9 @@ function loadMore() {
 
                 <NPopover v-if="(item.tags?.length ?? 0) > 3" trigger="hover">
                   <template #trigger>
-                    <NButton size="small" secondary :type="item.tags?.includes(selectedTag) ? 'primary' : 'default'"> 标签 </NButton>
+                    <NButton size="small" secondary :type="item.tags?.includes(selectedTag) ? 'primary' : 'default'">
+                      标签
+                    </NButton>
                   </template>
                   <NSpace :wrap="false">
                     <NButton