add switch

2025-12-06 18:36:55 +08:00 · 2024-02-21 12:04:41 +08:00
parent 76d1838768
commit aa7fbd47a0
65 changed files with 2220 additions and 806 deletions
--- a/src/views/obs/LiveLotteryOBS.vue
+++ b/src/views/obs/LiveLotteryOBS.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { OpenLiveLotteryType, OpenLiveLotteryUserInfo, UpdateLiveLotteryUsersModel } from '@/api/api-models'
+import { OpenLiveLotteryType, UpdateLiveLotteryUsersModel } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
 import { LOTTERY_API_URL } from '@/data/constants'
 import { useElementSize } from '@vueuse/core'
-import { NCard, NDivider, NEmpty, NSpace, NText, useMessage } from 'naive-ui'
+import { NDivider, NEmpty, NSpace, NText, useMessage } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { Vue3Marquee } from 'vue3-marquee'
@@ -66,8 +66,20 @@ onUnmounted(() => {
    </NDivider>
    <div class="lottery-content" ref="listContainerRef">
      <template v-if="users.length > 0">
-        <Vue3Marquee v-if="result.type == OpenLiveLotteryType.Waiting" vertical :pause="!isMoreThanContainer" :duration="20" :style="`height: ${height}px;`">
-          <span class="lottery-list-item" :id="index.toString()" v-for="(user, index) in users" :key="user.uId" style="height: 50px">
+        <Vue3Marquee
+          v-if="result.type == OpenLiveLotteryType.Waiting"
+          vertical
+          :pause="!isMoreThanContainer"
+          :duration="20"
+          :style="`height: ${height}px;`"
+        >
+          <span
+            class="lottery-list-item"
+            :id="index.toString()"
+            v-for="(user, index) in users"
+            :key="user.uId"
+            style="height: 50px"
+          >
            <img class="lottery-avatar" :src="user.avatar + '@30h'" referrerpolicy="no-referrer" />
            <div>
              <p class="lottery-name">{{ user.name }}</p>
@@ -85,10 +97,26 @@ onUnmounted(() => {
            v-for="user in result.resultUsers"
            :key="user.uId"
            title="抽奖结果"
-            style="height: 100px; width: 100px; display: flex; flex-direction: column; align-items: center; border-radius: 5px; border: #fff 1px solid; padding: 10px; margin: 10px"
+            style="
+              height: 100px;
+              width: 100px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              border-radius: 5px;
+              border: #fff 1px solid;
+              padding: 10px;
+              margin: 10px;
+            "
          >
            <NSpace vertical>
-              <img height="50" width="50" style="border-radius: 50%" :src="user.avatar + '@50h_50w'" referrerpolicy="no-referrer" />
+              <img
+                height="50"
+                width="50"
+                style="border-radius: 50%"
+                :src="user.avatar + '@50h_50w'"
+                referrerpolicy="no-referrer"
+              />
              <NText style="font-size: large">
                {{ user.name }}
              </NText>
@@ -100,9 +128,25 @@ onUnmounted(() => {
            v-for="user in result.resultUsers"
            :key="user.uId"
            title="抽奖结果"
-            style="height: 100px; width: 100px; display: flex; flex-direction: column; align-items: center; border-radius: 5px; border: #fff 1px solid; padding: 10px; margin: 10px"
+            style="
+              height: 100px;
+              width: 100px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              border-radius: 5px;
+              border: #fff 1px solid;
+              padding: 10px;
+              margin: 10px;
+            "
          >
-            <img height="50" width="50" style="border-radius: 50%" :src="user.avatar + '@50h_50w'" referrerpolicy="no-referrer" />
+            <img
+              height="50"
+              width="50"
+              style="border-radius: 50%"
+              :src="user.avatar + '@50h_50w'"
+              referrerpolicy="no-referrer"
+            />
            <NText style="font-size: large; margin-top: 10px">
              {{ user.name }}
            </NText>
@@ -131,7 +175,11 @@ onUnmounted(() => {
  text-align: center !important;
  font-size: 24px !important;
  font-weight: bold !important;
-  text-shadow: 0 0 10px #ca7b7b6e, 0 0 20px #ffffff8e, 0 0 30px #61606086, 0 0 40px rgba(64, 156, 179, 0.555) !important;
+  text-shadow:
+    0 0 10px #ca7b7b6e,
+    0 0 20px #ffffff8e,
+    0 0 30px #61606086,
+    0 0 40px rgba(64, 156, 179, 0.555) !important;
 }
 .lottery-header-count {
  color: #ffffffbd !important;
@@ -156,7 +204,9 @@ onUnmounted(() => {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
-  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition:
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 .lottery-avatar {
  height: 30px !important;
--- a/src/views/obs/MusicRequestOBS.vue
+++ b/src/views/obs/MusicRequestOBS.vue
@@ -39,9 +39,12 @@ const originSongs = ref<{ playing?: WaitMusicInfo; waiting: WaitMusicInfo[] }>({

 async function get() {
  try {
-    const data = await QueryGetAPI<{ playing: WaitMusicInfo; waiting: WaitMusicInfo[] }>(MUSIC_REQUEST_API_URL + 'get-waiting', {
-      id: currentId.value,
-    })
+    const data = await QueryGetAPI<{ playing: WaitMusicInfo; waiting: WaitMusicInfo[] }>(
+      MUSIC_REQUEST_API_URL + 'get-waiting',
+      {
+        id: currentId.value,
+      },
+    )
    if (data.code == 200) {
      return data.data
    }
@@ -74,10 +77,18 @@ onUnmounted(() => {
    <NDivider class="music-request-divider">
      <p class="music-request-header-count">已有 {{ originSongs.waiting.length ?? 0 }} 首</p>
    </NDivider>
-    <div class="music-request-singing-container" :playing="originSongs.playing ? 'true' : 'false'" :from="originSongs.playing?.music.from ?? -1">
+    <div
+      class="music-request-singing-container"
+      :playing="originSongs.playing ? 'true' : 'false'"
+      :from="originSongs.playing?.music.from ?? -1"
+    >
      <div class="music-request-singing-prefix"></div>
      <template v-if="originSongs.playing">
-        <img class="music-request-singing-avatar" :src="originSongs.playing.music.cover ?? AVATAR_URL + originSongs.playing.from?.uid" referrerpolicy="no-referrer" />
+        <img
+          class="music-request-singing-avatar"
+          :src="originSongs.playing.music.cover ?? AVATAR_URL + originSongs.playing.from?.uid"
+          referrerpolicy="no-referrer"
+        />
        <p class="music-request-singing-song-name">{{ originSongs.playing.music.name }}</p>
        <p class="music-request-singing-name">{{ originSongs.playing.from?.name }}</p>
      </template>
@@ -86,8 +97,21 @@ onUnmounted(() => {
    </div>
    <div class="music-request-content" ref="listContainerRef">
      <template v-if="originSongs.waiting.length > 0">
-        <Vue3Marquee class="music-request-list" :key="key" vertical :pause="!isMoreThanContainer" :duration="20" :style="`height: ${height}px;width: ${width}px;`">
-          <span class="music-request-list-item" :from="item.music.from as number" v-for="(item, index) in originSongs.waiting" :key="item.music.id" :style="`height: ${itemHeight}px`">
+        <Vue3Marquee
+          class="music-request-list"
+          :key="key"
+          vertical
+          :pause="!isMoreThanContainer"
+          :duration="20"
+          :style="`height: ${height}px;width: ${width}px;`"
+        >
+          <span
+            class="music-request-list-item"
+            :from="item.music.from as number"
+            v-for="(item, index) in originSongs.waiting"
+            :key="item.music.id"
+            :style="`height: ${itemHeight}px`"
+          >
            <div class="music-request-list-item-index" :index="index + 1">
              {{ index + 1 }}
            </div>
--- a/src/views/obs/QueueOBS.vue
+++ b/src/views/obs/QueueOBS.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { QueueFrom, QueueSortType, ResponseQueueModel, Setting_Queue, Setting_SongRequest, SongRequestFrom, SongRequestInfo, QueueStatus } from '@/api/api-models'
+import {
+  QueueFrom,
+  QueueSortType,
+  ResponseQueueModel,
+  Setting_Queue,
+  Setting_SongRequest,
+  SongRequestFrom,
+  SongRequestInfo,
+  QueueStatus,
+} from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
 import { AVATAR_URL, QUEUE_API_URL, SONG_REQUEST_API_URL } from '@/data/constants'
 import { useElementSize } from '@vueuse/core'
@@ -35,7 +44,9 @@ const progressing = computed(() => {
  return queue.value.find((s) => s.status == QueueStatus.Progressing)
 })
 const activeItems = computed(() => {
-  let list = new List(queue.value).Where((q) => q?.status == QueueStatus.Waiting).OrderByDescending((q) => q.from == QueueFrom.Manual)
+  let list = new List(queue.value)
+    .Where((q) => q?.status == QueueStatus.Waiting)
+    .OrderByDescending((q) => q.from == QueueFrom.Manual)
  switch (settings.value.sortType) {
    case QueueSortType.TimeFirst: {
      list = list.ThenBy((q) => q.createAt)
@@ -57,9 +68,12 @@ const activeItems = computed(() => {

 async function get() {
  try {
-    const data = await QueryGetAPI<{ queue: ResponseQueueModel[]; setting: Setting_Queue }>(QUEUE_API_URL + 'get-active-and-settings', {
-      id: currentId.value,
-    })
+    const data = await QueryGetAPI<{ queue: ResponseQueueModel[]; setting: Setting_Queue }>(
+      QUEUE_API_URL + 'get-active-and-settings',
+      {
+        id: currentId.value,
+      },
+    )
    if (data.code == 200) {
      return data.data
    }
@@ -108,7 +122,12 @@ 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" />
@@ -119,7 +138,14 @@ onUnmounted(() => {
    </div>
    <div class="queue-content" ref="listContainerRef">
      <template v-if="activeItems.length > 0">
-        <Vue3Marquee class="queue-list" :key="key" vertical :pause="!isMoreThanContainer" :duration="20" :style="`height: ${height}px;width: ${width}px;`">
+        <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"
@@ -132,13 +158,21 @@ onUnmounted(() => {
            <div class="queue-list-item-index" :index="index + 1">
              {{ index + 1 }}
            </div>
-            <div v-if="settings.showFanMadelInfo" 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 v-if="settings.showPayment" 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>
@@ -147,7 +181,13 @@ onUnmounted(() => {
      </div>
    </div>
    <div class="queue-footer" ref="footerRef" v-if="settings.showRequireInfo">
-      <Vue3Marquee :key="key" ref="footerListRef" class="queue-footer-marquee" :pause="footerSize.width < footerListSize.width" :duration="20">
+      <Vue3Marquee
+        :key="key"
+        ref="footerListRef"
+        class="queue-footer-marquee"
+        :pause="footerSize.width < footerListSize.width"
+        :duration="20"
+      >
        <span class="queue-tag" type="prefix">
          <div class="queue-tag-key">关键词</div>
          <div class="queue-tag-value">
@@ -181,7 +221,13 @@ onUnmounted(() => {
        <span class="queue-tag" type="fan-madel">
          <div class="queue-tag-key">粉丝牌</div>
          <div class="queue-tag-value">
-            {{ settings.fanMedalMinLevel != undefined && !settings.allowAllDanmaku ? (settings.fanMedalMinLevel > 0 ? '> ' + settings.fanMedalMinLevel : '佩戴') : '无需' }}
+            {{
+              settings.fanMedalMinLevel != undefined && !settings.allowAllDanmaku
+                ? settings.fanMedalMinLevel > 0
+                  ? '> ' + settings.fanMedalMinLevel
+                  : '佩戴'
+                : '无需'
+            }}
          </div>
        </span></Vue3Marquee
      >
--- a/src/views/obs/SongRequestOBS.vue
+++ b/src/views/obs/SongRequestOBS.vue
@@ -31,6 +31,7 @@ const key = ref(Date.now())
 const originSongs = ref<SongRequestInfo[]>([])
 const songs = computed(() => {
  if (settings.value.isReverse) {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    return originSongs.value.reverse()
  } else {
    return originSongs.value
@@ -46,9 +47,12 @@ const activeSongs = computed(() => {

 async function get() {
  try {
-    const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_SongRequest }>(SONG_REQUEST_API_URL + 'get-active-and-settings', {
-      id: currentId.value,
-    })
+    const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_SongRequest }>(
+      SONG_REQUEST_API_URL + 'get-active-and-settings',
+      {
+        id: currentId.value,
+      },
+    )
    if (data.code == 200) {
      return data.data
    }
@@ -100,8 +104,8 @@ onUnmounted(() => {
    <div
      class="song-request-singing-container"
      :singing="songs.findIndex((s) => s.status == SongRequestStatus.Singing) > -1"
-      :from="(singing?.from as number)"
-      :status="(singing?.status as number)"
+      :from="singing?.from as number"
+      :status="singing?.status as number"
    >
      <div class="song-request-singing-prefix"></div>
      <template v-if="singing">
@@ -114,16 +118,36 @@ onUnmounted(() => {
    </div>
    <div class="song-request-content" ref="listContainerRef">
      <template v-if="activeSongs.length > 0">
-        <Vue3Marquee class="song-request-list" :key="key" vertical :pause="!isMoreThanContainer" :duration="20" :style="`height: ${height}px;width: ${width}px;`">
-          <span class="song-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`">
+        <Vue3Marquee
+          class="song-request-list"
+          :key="key"
+          vertical
+          :pause="!isMoreThanContainer"
+          :duration="20"
+          :style="`height: ${height}px;width: ${width}px;`"
+        >
+          <span
+            class="song-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">
              {{ index + 1 }}
            </div>
            <div class="song-request-list-item-song-name">
              {{ song.songName }}
            </div>
-            <p v-if="settings.showUserName" class="song-request-list-item-name">{{ song.from == SongRequestFrom.Manual ? '主播添加' : song.user?.name }}</p>
-            <div v-if="settings.showFanMadelInfo" class="song-request-list-item-level" :has-level="(song.user?.fans_medal_level ?? 0) > 0">
+            <p v-if="settings.showUserName" class="song-request-list-item-name">
+              {{ song.from == SongRequestFrom.Manual ? '主播添加' : song.user?.name }}
+            </p>
+            <div
+              v-if="settings.showFanMadelInfo"
+              class="song-request-list-item-level"
+              :has-level="(song.user?.fans_medal_level ?? 0) > 0"
+            >
              {{ `${song.user?.fans_medal_name} ${song.user?.fans_medal_level}` }}
            </div>
          </span>
@@ -134,7 +158,13 @@ onUnmounted(() => {
      </div>
    </div>
    <div class="song-request-footer" v-if="settings.showRequireInfo" ref="footerRef">
-      <Vue3Marquee :key="key" ref="footerListRef" class="song-request-footer-marquee" :pause="footerSize.width < footerListSize.width" :duration="20">
+      <Vue3Marquee
+        :key="key"
+        ref="footerListRef"
+        class="song-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">
@@ -156,7 +186,13 @@ onUnmounted(() => {
        <span class="song-request-tag" type="fan-madel">
          <div class="song-request-tag-key">粉丝牌</div>
          <div class="song-request-tag-value">
-            {{ settings.needWearFanMedal ? (settings.fanMedalMinLevel > 0 ? '> ' + settings.fanMedalMinLevel : '佩戴') : '无需' }}
+            {{
+              settings.needWearFanMedal
+                ? settings.fanMedalMinLevel > 0
+                  ? '> ' + settings.fanMedalMinLevel
+                  : '佩戴'
+                : '无需'
+            }}
          </div>
        </span></Vue3Marquee
      >
@@ -182,7 +218,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);
 }
 .song-request-header-count {
  color: #ffffffbd;