add options in obs queue component

src/views/AboutView.vue

@@ -31,6 +31,7 @@ import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText, NTimeline, NTi
           </NSpace>
           <NDivider title-placement="left"> 更新日志 </NDivider>
           <NTimeline>
+            <NTimelineItem type="info" title="功能更新" content="排队的OBS组件添加设置项" time="2024-1-27" />
             <NTimelineItem type="warning" title="Bug修复" content="修复点歌会直接跳到下一首的问题 (怎么没人跟我说" time="2024-1-22" />
             <NTimelineItem type="info" title="功能更新" content="读弹幕支持自定义API" time="2023-12-25" />
             <NTimelineItem type="success" title="功能添加" content="弹幕点歌 (点播)" time="2023-12-24" />

src/views/obs/QueueOBS.vue

@@ -49,7 +49,7 @@ const activeItems = computed(() => {
       list = list.OrderByDescending((q) => q.giftPrice ?? 0).ThenBy((q) => q.createAt)
     }
   }
-  if(settings.value.isReverse){
+  if (settings.value.isReverse) {
     list = list.Reverse()
   }
   return list.ToArray()
@@ -108,7 +108,7 @@ onUnmounted(() => {
     <NDivider class="queue-divider">
       <p class="queue-header-count">已有 {{ activeItems.length ?? 0 }} 人</p>
     </NDivider>
-    <div class="queue-singing-container" :singing="queue.findIndex((s) => s.status == QueueStatus.Progressing) > -1" :from="(progressing?.from as number)" :status="(progressing?.status as number)">
+    <div class="queue-singing-container" :singing="queue.findIndex((s) => s.status == QueueStatus.Progressing) > -1" :from="progressing?.from as number" :status="progressing?.status as number">
       <div class="queue-singing-prefix"></div>
       <template v-if="progressing">
         <img class="queue-singing-avatar" :src="AVATAR_URL + progressing?.user?.uid" referrerpolicy="no-referrer" />
@@ -122,8 +122,8 @@ onUnmounted(() => {
         <Vue3Marquee class="queue-list" :key="key" vertical :pause="!isMoreThanContainer" :duration="20" :style="`height: ${height}px;width: ${width}px;`">
           <span
             class="queue-list-item"
-            :from="(item.from as number)"
-            :status="(item.status as number)"
+            :from="item.from as number"
+            :status="item.status as number"
             :payment="item.giftPrice ?? 0"
             v-for="(item, index) in activeItems"
             :key="item.id"
@@ -132,13 +132,13 @@ onUnmounted(() => {
             <div class="queue-list-item-index" :index="index + 1">
               {{ index + 1 }}
             </div>
-            <div class="queue-list-item-level" :has-level="(item.user?.fans_medal_level ?? 0) > 0">
+            <div v-if="settings.showFanMadelInfo" class="queue-list-item-level" :has-level="(item.user?.fans_medal_level ?? 0) > 0">
               {{ `${item.user?.fans_medal_name} ${item.user?.fans_medal_level}` }}
             </div>
             <div class="queue-list-item-user-name">
               {{ item.user?.name }}
             </div>
-            <p class="queue-list-item-payment">{{ item.from == QueueFrom.Manual ? '主播添加' : item.giftPrice == undefined ? '无' : '¥ ' + item.giftPrice }}</p>
+            <p v-if="settings.showPayment" class="queue-list-item-payment">{{ item.from == QueueFrom.Manual ? '主播添加' : item.giftPrice == undefined ? '无' : '¥ ' + item.giftPrice }}</p>
           </span>
         </Vue3Marquee>
       </template>
@@ -207,7 +207,11 @@ onUnmounted(() => {
   text-align: center;
   font-size: 20px;
   font-weight: bold;
-  text-shadow: 0 0 10px #ca7b7b6e, 0 0 20px #ffffff8e, 0 0 30px #61606086, 0 0 40px rgba(64, 156, 179, 0.555);
+  text-shadow:
+    0 0 10px #ca7b7b6e,
+    0 0 20px #ffffff8e,
+    0 0 30px #61606086,
+    0 0 40px rgba(64, 156, 179, 0.555);
 }
 .queue-header-count {
   color: #ffffff;

src/views/open_live/OpenQueue.vue

@@ -88,6 +88,8 @@ const defaultSettings = {
   giftFilterType: QueueGiftFilterType.Or,
   showRequireInfo: true,
   isReverse: false,
+  showFanMadelInfo: true,
+  showPayment: true,
 } as Setting_Queue
 const STATUS_MAP = {
   [QueueStatus.Waiting]: '等待中',
@@ -1049,6 +1051,8 @@ onUnmounted(() => {
             </NSpace>
             <NDivider> OBS </NDivider>
             <NCheckbox v-model:checked="settings.showRequireInfo" :disabled="!configCanEdit" @update:checked="updateSettings"> 显示底部的需求信息 </NCheckbox>
+            <NCheckbox v-model:checked="settings.showPayment" :disabled="!configCanEdit" @update:checked="updateSettings"> 显示付费信息 </NCheckbox>
+            <NCheckbox v-model:checked="settings.showFanMadelInfo" :disabled="!configCanEdit" @update:checked="updateSettings"> 显示用户粉丝牌 </NCheckbox>
             <NDivider> 其他 </NDivider>
             <NCheckbox v-model:checked="isWarnMessageAutoClose"> 自动关闭加入队列失败时的提示消息 </NCheckbox>
           </NSpace>