add options in obs queue component

src/api/api-models.ts

@@ -52,23 +52,23 @@ export interface AccountInfo extends UserInfo {
   biliBlackList: { [key: number]: string }
   streamerInfo?: StreamerModel
 }
-export interface StreamerModel{
-  name: string;
-  uId: number;
-  roomId: number;
-  faceUrl: string;
-  title: string;
-  coverUrl: string;
-  frameUrl: string;
-  area: string;
-  parentArea: string;
-  lastStreamAt: number;
-  totalDanmakuCount: number;
-  totalIncome: number;
-  totalStreamCount: number;
-  totalStreamTime: number;
-  lastDanmakuCount: number;
-  isStreaming: boolean;
+export interface StreamerModel {
+  name: string
+  uId: number
+  roomId: number
+  faceUrl: string
+  title: string
+  coverUrl: string
+  frameUrl: string
+  area: string
+  parentArea: string
+  lastStreamAt: number
+  totalDanmakuCount: number
+  totalIncome: number
+  totalStreamCount: number
+  totalStreamTime: number
+  lastDanmakuCount: number
+  isStreaming: boolean
 }
 export enum BiliAuthCodeStatusType {
   NotBind,
@@ -150,6 +150,9 @@ export interface Setting_Queue {
   jianzhangCooldownSecond: number
 
   showRequireInfo: boolean
+  showPayment: boolean
+  showFanMadelInfo: boolean
+
   isReverse: boolean
 }
 
@@ -175,7 +178,7 @@ export enum FunctionTypes {
   Schedule,
   SongRequest,
   Queue,
-  Point
+  Point,
 }
 export interface SongAuthorInfo {
   name: string
@@ -185,7 +188,7 @@ export enum SongFrom {
   Custom,
   Netease,
   FiveSing,
-  Kugou
+  Kugou,
 }
 export interface SongsInfo {
   id: number
@@ -441,7 +444,7 @@ export enum EventDataTypes {
   Message,
   Like,
   SCDel,
-  Enter
+  Enter,
 }
 export interface ResponseQueueModel {
   id: number
@@ -502,16 +505,14 @@ export enum FeedbackStatus {
   Reject,
   Developing,
 }
-export interface TagInfo
-{
+export interface TagInfo {
   name: string
   color: string
 }
-export enum GoodsStatus
-{
+export enum GoodsStatus {
   Normal, // 商品正常
   //OutOfStock,  // 商品无货
-    Discontinued  // 商品下架
+  Discontinued, // 商品下架
 }
 export enum GoodsTypes {
   Physical,
@@ -530,7 +531,7 @@ export interface ResponsePointGoodModel {
   status: GoodsStatus
   type: GoodsTypes
 }
-export interface ImageUploadModel{
+export interface ImageUploadModel {
   existImages: string[]
   newImagesBase64: string[]
 }

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>