fix obs components display

default.d.ts

@@ -1,5 +1,5 @@
-import { LoadingBarProviderInst, MessageProviderInst } from "naive-ui"
+import { LoadingBarProviderInst, MessageProviderInst } from 'naive-ui'
-import { useRoute } from "vue-router"
+import { useRoute } from 'vue-router'
 
 declare module 'vue3-aplayer' {
   const content: any
@@ -16,8 +16,9 @@ declare module '*.js' {
 
 declare global {
   interface Window {
-    $message: MessageProviderInst,
+    $message: MessageProviderInst
     $loadingBar: LoadingBarProviderInst
     $route: ReturnType<typeof useRoute>
+    $mitt: Emitter<MittType>
   }
 }

package.json

@@ -9,43 +9,44 @@
     "lint": "vite lint"
   },
   "dependencies": {
+    "@hyperdx/browser": "^0.21.2",
     "@microsoft/signalr": "^8.0.7",
     "@microsoft/signalr-protocol-msgpack": "^8.0.7",
     "@mixer/postmessage-rpc": "^1.1.4",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "@vicons/fluent": "^0.12.0",
+    "@vicons/fluent": "^0.13.0",
-    "@vitejs/plugin-basic-ssl": "^1.2.0",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^5.2.3",
     "@vue/cli": "^5.0.8",
-    "@vueuse/core": "^12.0.0",
+    "@vueuse/core": "^13.0.0",
-    "@vueuse/router": "^12.0.0",
+    "@vueuse/router": "^13.0.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "bilibili-live-ws": "^6.3.1",
     "brotli-compress": "^1.3.3",
     "date-fns": "^4.1.0",
     "easy-speech": "^2.4.0",
-    "echarts": "^5.5.1",
+    "echarts": "^5.6.0",
-    "eslint": "^9.16.0",
+    "eslint": "^9.22.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-oxlint": "^0.14.0",
+    "eslint-plugin-oxlint": "^0.16.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-prettier": "^5.2.3",
-    "fast-xml-parser": "^4.5.0",
+    "fast-xml-parser": "^5.0.9",
     "file-saver": "^2.0.5",
     "grapheme-splitter": "^1.0.4",
     "html2canvas": "^1.4.1",
     "linqts": "^2.0.0",
     "mitt": "^3.0.1",
-    "monaco-editor": "^0.52.0",
+    "monaco-editor": "^0.52.2",
     "music-metadata-browser": "^2.5.11",
     "peerjs": "^1.5.4",
-    "pinia": "^2.2.8",
+    "pinia": "^3.0.1",
-    "prettier": "^3.4.1",
+    "prettier": "^3.5.3",
     "qrcode.vue": "^3.6.0",
     "queue-typescript": "^1.0.1",
-    "unplugin-vue-markdown": "^0.27.1",
+    "unplugin-vue-markdown": "^28.3.1",
-    "uuid": "^11.0.3",
+    "uuid": "^11.1.0",
-    "vite": "5.4.11",
+    "vite": "6.2.2",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-svg-loader": "^5.1.0",
     "vue": "3.5.13",
@@ -56,23 +57,23 @@
     "vue3-aplayer": "^1.7.3",
     "vue3-marquee": "^4.2.2",
     "vueuc": "^0.4.64",
-    "worker-timers": "^8.0.11",
+    "worker-timers": "^8.0.19",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/eslintrc": "^3.3.0",
-    "@types/bun": "^1.1.14",
+    "@types/bun": "^1.2.5",
     "@types/eslint": "^9.6.1",
     "@types/obs-studio": "^2.17.2",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/parser": "^8.17.0",
+    "@typescript-eslint/parser": "^8.26.1",
-    "@vicons/ionicons5": "^0.12.0",
+    "@vicons/ionicons5": "^0.13.0",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
-    "@vue/eslint-config-typescript": "^14.1.4",
+    "@vue/eslint-config-typescript": "^14.5.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-vue": "^9.32.0",
+    "eslint-plugin-vue": "^10.0.0",
-    "naive-ui": "^2.40.3",
+    "naive-ui": "^2.41.0",
     "stylus": "^0.64.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.8.2"
   }
 }

src/App.vue

@@ -7,17 +7,15 @@
           <NLoadingBarProvider>
             <Suspense>
               <TempComponent>
-                <NLayoutContent style="height: 100%" v-if="layout != 'obs'">
+                <NElement>
-                  <NElement>
+                  <ViewerLayout v-if="layout == 'viewer'" />
-                    <ViewerLayout v-if="layout == 'viewer'" />
+                  <ManageLayout v-else-if="layout == 'manage'" />
-                    <ManageLayout v-else-if="layout == 'manage'" />
+                  <OpenLiveLayout v-else-if="layout == 'open-live'" />
-                    <OpenLiveLayout v-else-if="layout == 'open-live'" />
+                  <OBSLayout v-else-if="layout == 'obs'" />
-                    <template v-else-if="layout == ''">
+                  <template v-else-if="layout == ''">
-                      <RouterView />
+                    <RouterView />
-                    </template>
+                  </template>
-                  </NElement>
+                </NElement>
-                </NLayoutContent>
-                <RouterView v-else />
               </TempComponent>
               <template #fallback>
                 <NSpin size="large" show />
@@ -50,6 +48,7 @@ import { useRoute } from 'vue-router'
 import TempComponent from './components/TempComponent.vue'
 import { theme } from './Utils'
 import OpenLiveLayout from './views/OpenLiveLayout.vue'
+import OBSLayout from './views/OBSLayout.vue'
 
 const route = useRoute()
 

src/api/query.ts

@@ -8,36 +8,54 @@ const cookie = useLocalStorage('JWT_Token', '')
 export async function QueryPostAPI<T>(
   urlString: string,
   body?: unknown,
-  headers?: [string, string][],
+  headers?: [string, string][]
 ): Promise<APIRoot<T>> {
-  return await QueryPostAPIWithParams<T>(urlString, undefined, body, 'application/json', headers)
+  return await QueryPostAPIWithParams<T>(
+    urlString,
+    undefined,
+    body,
+    'application/json',
+    headers
+  )
 }
 export async function QueryPostAPIWithParams<T>(
   urlString: string,
   params?: any,
   body?: any,
   contentType?: string,
-  headers?: [string, string][],
+  headers?: [string, string][]
 ): Promise<APIRoot<T>> {
-  return await QueryPostAPIWithParamsInternal<APIRoot<T>>(urlString, params, body, contentType, headers)
+  return await QueryPostAPIWithParamsInternal<APIRoot<T>>(
+    urlString,
+    params,
+    body,
+    contentType,
+    headers
+  )
 }
 async function QueryPostAPIWithParamsInternal<T>(
   urlString: string,
   params?: any,
   body?: any,
   contentType: string = 'application/json',
-  headers: [string, string][] = [],
+  headers: [string, string][] = []
 ) {
   const url = new URL(urlString)
   url.search = getParams(params)
   headers ??= []
-  if (cookie.value) headers?.push(['Authorization', `Bearer ${cookie.value}`])
+  let h = {} as {
+    [key: string]: string
+  }
+  headers.forEach(header => {
+    h[header[0]] = header[1]
+  });
+  if (cookie.value) h['Authorization'] = `Bearer ${cookie.value}`
 
-  if (contentType) headers?.push(['Content-Type', contentType])
+  h['Content-Type'] = contentType
   return await QueryAPIInternal<T>(url, {
     method: 'post',
-    headers: headers,
+    headers: h,
-    body: typeof body === 'string' ? body : JSON.stringify(body),
+    body: typeof body === 'string' ? body : JSON.stringify(body)
   })
 }
 async function QueryAPIInternal<T>(url: URL, init: RequestInit) {
@@ -57,21 +75,31 @@ async function QueryAPIInternal<T>(url: URL, init: RequestInit) {
 export async function QueryGetAPI<T>(
   urlString: string,
   params?: any,
-  headers?: [string, string][],
+  headers?: [string, string][]
 ): Promise<APIRoot<T>> {
   return await QueryGetAPIInternal<APIRoot<T>>(urlString, params, headers)
 }
-async function QueryGetAPIInternal<T>(urlString: string, params?: any, headers?: [string, string][]) {
+async function QueryGetAPIInternal<T>(
+  urlString: string,
+  params?: any,
+  headers?: [string, string][]
+) {
   try {
     const url = new URL(urlString)
     url.search = getParams(params)
+    headers ??= []
+    let h = {} as {
+      [key: string]: string
+    }
+    headers.forEach((header) => {
+      h[header[0]] = header[1]
+    })
     if (cookie.value) {
-      headers ??= []
+      h['Authorization'] = `Bearer ${cookie.value}`
-      if (cookie.value) headers?.push(['Authorization', `Bearer ${cookie.value}`])
     }
     return await QueryAPIInternal<T>(url, {
       method: 'get',
-      headers: headers,
+      headers: h
     })
   } catch (err) {
     console.log(`url:${urlString}, error:${err}`)
@@ -101,10 +129,20 @@ function getParams(params: any) {
   }
   return resultParams.toString()
 }
-export async function QueryPostPaginationAPI<T>(url: string, body?: unknown): Promise<PaginationResponse<T>> {
+export async function QueryPostPaginationAPI<T>(
-  return await QueryPostAPIWithParamsInternal<PaginationResponse<T>>(url, undefined, body)
+  url: string,
+  body?: unknown
+): Promise<PaginationResponse<T>> {
+  return await QueryPostAPIWithParamsInternal<PaginationResponse<T>>(
+    url,
+    undefined,
+    body
+  )
 }
-export async function QueryGetPaginationAPI<T>(urlString: string, params?: unknown): Promise<PaginationResponse<T>> {
+export async function QueryGetPaginationAPI<T>(
+  urlString: string,
+  params?: unknown
+): Promise<PaginationResponse<T>> {
   return await QueryGetAPIInternal<PaginationResponse<T>>(urlString, params)
 }
 export function GetHeaders(): [string, string][] {

src/components/DynamicForm.vue

@@ -90,7 +90,7 @@ onMounted(() => {
 <template>
   <NEmpty v-if="!config" description="此模板不支持配置" />
   <NForm v-else>
-    <NFormItem v-for="item in config.items" :key="item.name" :label="item.name">
+    <NFormItem v-for="item in config.items" :key="item.name.toString()" :label="item.name.toString()">
       <component v-if="item.type == 'render'" :is="item.render(configData)"></component>
       <template v-else-if="item.type == 'string'">
         <NInput v-if="item.data" :value="configData[item.key]" @update:value="configData[item.key] = $event" />

src/main.ts

@@ -11,6 +11,10 @@ import router from './router'
 import { useAuthStore } from './store/useAuthStore'
 import { useVTsuruHub } from './store/useVTsuruHub'
 import { useNotificationStore } from './store/useNotificationStore'
+import HyperDX from '@hyperdx/browser'
+import mitt from 'mitt'
+import { MittType } from './mitt'
+import emitter from './mitt'
 
 const pinia = createPinia()
 
@@ -92,6 +96,13 @@ QueryGetAPI<string>(BASE_API_URL + 'vtsuru/version')
     console.log('默认API调用失败, 切换至故障转移节点')
   })
   .finally(async () => {
+    HyperDX.init({
+      apiKey: '7d1eb66c-24b8-445e-a406-dc2329fa9423',
+      service: 'vtsuru.live',
+      tracePropagationTargets: [/vtsuru.suki.club/i], // Set to link traces from frontend to backend requests
+      consoleCapture: true, // Capture console logs (default false)
+      advancedNetworkCapture: true // Capture full HTTP request/response headers and bodies (default false)
+    })
     //加载其他数据
     InitTTS()
     await GetSelfAccount()
@@ -101,6 +112,10 @@ QueryGetAPI<string>(BASE_API_URL + 'vtsuru/version')
       if (account.value.biliUserAuthInfo && !useAuth.currentToken) {
         useAuth.currentToken = account.value.biliUserAuthInfo.token
       }
+      HyperDX.setGlobalAttributes({
+        userId: account.value.id.toString(),
+        userName: account.value.name
+      })
     }
     useAuth.getAuthInfo()
     GetNotifactions()
@@ -117,6 +132,8 @@ const { notification } = createDiscreteApi(['notification'])
 
 useNotificationStore().init()
 
+window.$mitt = emitter
+
 function InitTTS() {
   try {
     const result = EasySpeech.detect()

src/mitt.ts

@@ -1,14 +1,11 @@
 import mitt, { Emitter } from 'mitt'
 import { Music } from './store/useMusicRequest'
 
-declare type MittType<T = any> = {
+export declare type MittType<T = any> = {
-  onOpenTemplateSettings: {
+  onOpenTemplateSettings: { template: string }
-    template: string
+  onMusicRequestPlayerEnded: { music: Music }
-  }
-  onMusicRequestPlayerEnded: {
-    music: Music
-  }
   onMusicRequestPlayNextWaitingMusic: never
+  onOBSComponentUpdate: never
 }
 // 类型
 const emitter: Emitter<MittType> = mitt<MittType>()

src/store/useNotificationStore.ts

@@ -2,12 +2,14 @@ import { QueryGetAPI } from '@/api/query'
 import { NOTIFACTION_API_URL } from '@/data/constants'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 
 export type NotificationData = {
   title: string
 }
 
 export const useNotificationStore = defineStore('notification', () => {
+  const route = useRoute()
   const unread = ref<NotificationData[]>([])
   const all = ref<NotificationData[]>([])
 
@@ -28,6 +30,9 @@ export const useNotificationStore = defineStore('notification', () => {
       return
     }
     setInterval(() => {
+      if (route?.name?.toString().startsWith('obs-')) {
+        return
+      }
       updateUnread()
     }, 10 * 1000)
     isInited.value = true

src/store/useQuestionBox.ts

@@ -306,6 +306,34 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
         message.error('修改失败: ' + err)
       })
   }
+  async function approve(question: QAInfo, approve: boolean) {
+    if (!approve) {
+      message.error('暂时不支持取消审核')
+      return
+    }
+    await QueryGetAPI(QUESTION_API_URL + 'approve', {
+      id: question.id,
+      approve: approve ? 'true' : 'false'
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          question.reviewResult = undefined
+          const trashIndex = trashQuestions.value.findIndex(
+            (q) => q.id == question.id
+          )
+          if (trashIndex > -1) {
+            trashQuestions.value.splice(trashIndex, 1)
+          }
+          recieveQuestions.value.unshift(question)
+          message.success('已标记为审核通过')
+        } else {
+          message.error('修改失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        message.error('修改失败: ' + err)
+      })
+  }
   async function setPublic(pub: boolean) {
     isChangingPublic.value = true
     await QueryGetAPI(QUESTION_API_URL + 'public', {

src/store/useRTC.ts

@@ -4,9 +4,12 @@ import {
   MasterRTCClient,
   SlaveRTCClient
 } from '@/data/RTCClient'
+import { Router24Regular } from '@vicons/fluent'
+import { useStorage } from '@vueuse/core'
 import { nonFunctionArgSeparator } from 'html2canvas/dist/types/css/syntax/parser'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 
 export const useWebRTC = defineStore('WebRTC', () => {
   const client = ref<BaseRTCClient>()
@@ -24,7 +27,8 @@ export const useWebRTC = defineStore('WebRTC', () => {
   function send(event: string, data: any) {
     client.value?.send(event, data)
   }
-
+  const cookie = useStorage('JWT_Token', '')
+  const route = useRoute()
   async function Init(type: 'master' | 'slave') {
     if (isInitializing) {
       return useWebRTC()
@@ -33,11 +37,13 @@ export const useWebRTC = defineStore('WebRTC', () => {
       isInitializing = true
       await navigator.locks.request(
         'rtcClientInit',
-        {
+        { ifAvailable: true },
-          ifAvailable: true
-        },
         async (lock) => {
           if (lock) {
+            if (!cookie.value && !route.query.token) {
+              console.log('[RTC] 未登录, 跳过RTC初始化')
+              return
+            }
             while (!accountInfo.value.id) {
               await new Promise((resolve) => setTimeout(resolve, 500))
             }
@@ -71,12 +77,7 @@ export const useWebRTC = defineStore('WebRTC', () => {
     }
   }
 
-  return {
+  return { Init, send, on, off }
-    Init,
-    send,
-    on,
-    off
-  }
 })
 
 if (import.meta.hot) {

src/types/global.d.ts

@@ -0,0 +1 @@
+

src/views/OBSLayout.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { NSpin } from 'naive-ui'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const timer = ref<any>()
+const visible = ref(true)
+const active = ref(true)
+onMounted(() => {
+  timer.value = setInterval(() => {
+    if (!visible.value || !active.value) return
+    window.$mitt.emit('onOBSComponentUpdate')
+  }, 1000)
+
+  //@ts-expect-error 这里获取不了
+  if (window.obsstudio) {
+    //@ts-expect-error 这里获取不了
+    window.obsstudio.onVisibilityChange = function (visibility: boolean) {
+      visible.value = visibility
+    }
+    //@ts-expect-error 这里获取不了
+    window.obsstudio.onActiveChange = function (a: boolean) {
+      active.value = a
+    }
+  }
+})
+onUnmounted(() => {
+  clearInterval(timer.value)
+})
+</script>
+
+<template>
+  <div style="height: 100vh;">
+    <RouterView v-slot="{ Component }">
+      <KeepAlive>
+        <Suspense>
+          <component :is="Component" :active :visible />
+          <template #fallback>
+            <NSpin show />
+          </template>
+        </Suspense>
+      </KeepAlive>
+    </RouterView>
+  </div>
+</template>

src/views/manage/QuestionBoxManageView.vue

@@ -383,6 +383,7 @@ onMounted(() => {
                         暂时还没写
                       </NTooltip> -->
                 <NButton size="small" @click="useQB.blacklist(item)" type="warning"> 拉黑 </NButton>
+                <NButton size="small" @click="useQB.blacklist(item)" type="primary"> 标记为正常 </NButton>
               </NSpace>
             </template>
             <template #header-extra="{ item }">

src/views/obs/DanmujiOBS.vue

@@ -10,7 +10,6 @@ import * as chatModels from '../../data/chat/models';
 import * as pronunciation from './blivechat/utils/pronunciation'
 // @ts-ignore
 import * as trie from './blivechat/utils/trie'
-import { DanmakuInfo, GiftInfo, GuardInfo, SCInfo } from '@/data/DanmakuClient';
 import { EventModel } from '@/api/api-models';
 import { DownloadConfig, useAccount } from '@/api/account';
 import { useWebRTC } from '@/store/useRTC';
@@ -19,6 +18,7 @@ import { OPEN_LIVE_API_URL, VTSURU_API_URL } from '@/data/constants';
 import { CustomChart } from 'echarts/charts';
 import { useRoute } from 'vue-router';
 import { NAlert } from 'naive-ui';
+import { DanmakuInfo, GiftInfo, GuardInfo, SCInfo } from '@/data/DanmakuClients/OpenLiveClient';
 
 export interface DanmujiConfig {
   minGiftPrice: number,
@@ -46,7 +46,9 @@ export interface DanmujiConfig {
 defineExpose({ setCss })
 const { customCss, isOBS = true } = defineProps<{
   customCss?: string
-  isOBS?: boolean
+  isOBS?: boolean,
+  active: boolean,
+  visible: boolean,
 }>()
 
 const messageRender = ref()

src/views/obs/LiveLotteryOBS.vue

@@ -43,29 +43,13 @@ async function getUsers() {
     type: OpenLiveLotteryType.Waiting,
   } as UpdateLiveLotteryUsersModel
 }
-
-const visiable = ref(true)
-const active = ref(true)
-let timer: any
 onMounted(() => {
-  timer = setInterval(async () => {
+  window.$mitt.on('onOBSComponentUpdate', () => {
-    if (!visiable.value || !active.value) return
+    getUsers()
-    const r = await getUsers()
+  })
-    if (r) {
-      result.value = r
-    }
-  }, 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
-  }
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>
 

src/views/obs/LiveRequestOBS.vue

@@ -17,7 +17,9 @@ import { List } from 'linqts'
 import { useWebRTC } from '@/store/useRTC'
 
 const props = defineProps<{
-  id?: number
+  id?: number,
+  active?: boolean,
+  visible?: boolean,
 }>()
 
 const message = useMessage()
@@ -127,25 +129,16 @@ const active = ref(true)
 let timer: any
 onMounted(() => {
   update()
-  timer = setInterval(() => update(), 2000)
-
   // 接收点播结果消息
   rtc.on('function.live-request.add', () => update())
 
-  //@ts-expect-error 这里获取不了
+  window.$mitt.on('onOBSComponentUpdate', () => {
-  if (window.obsstudio) {
+    update()
-    //@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(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
+  rtc.off('function.live-request.add', () => update())
 })
 </script>
 

src/views/obs/LiveRequestProcessedOBS.vue

@@ -15,7 +15,9 @@ import { useRoute } from 'vue-router'
 import { Vue3Marquee } from 'vue3-marquee'
 
 const props = defineProps<{
-  id?: number
+  id?: number,
+  active: boolean,
+  visible: boolean,
 }>()
 
 const message = useMessage()
@@ -94,7 +96,6 @@ const allowGuardTypes = computed(() => {
   return types
 })
 async function update() {
-  if (!visiable.value || !active.value) return
   const r = await get()
   if (r) {
     const isCountChange = originSongs.value.length != r.songs.length
@@ -110,26 +111,14 @@ async function update() {
 
 const direction = ref<'normal' | 'reverse'>('normal')
 
-const visiable = ref(true)
-const active = ref(true)
-let timer: any
 onMounted(() => {
   update()
-  timer = setInterval(update, 2000)
+  window.$mitt.on('onOBSComponentUpdate', () => {
-  //@ts-expect-error 这里获取不了
+    update()
-  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(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>
 

src/views/obs/MusicRequestOBS.vue

@@ -15,7 +15,9 @@ type WaitMusicInfo = {
 }
 
 const props = defineProps<{
-  id?: number
+  id?: number,
+  active: boolean,
+  visible: boolean,
 }>()
 
 const message = useMessage()
@@ -68,19 +70,12 @@ const active = ref(true)
 let timer: any
 onMounted(() => {
   update()
-  timer = setInterval(update, 2000)
+  window.$mitt.on('onOBSComponentUpdate', () => {
-
+    update()
-  //@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(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>
 

src/views/obs/QuestionDisplayOBS.vue

@@ -7,6 +7,12 @@ import { onMounted, onUnmounted, ref } from 'vue'
 import QuestionDisplayCard from '../manage/QuestionDisplayCard.vue'
 import { useWebRTC } from '@/store/useRTC'
 
+const props = defineProps<{
+  id?: number,
+  active: boolean,
+  visible: boolean,
+}>()
+
 const hash = ref('')
 const token = useRouteQuery('token')
 const rtc = await useWebRTC().Init('slave')
@@ -50,33 +56,16 @@ async function getQuestionAndSetting() {
 function handleScroll(value: { clientHeight: number, scrollHeight: number, scrollTop: number }) {
   cardRef.value?.setScroll(value)
 }
-
-const visiable = ref(true)
-const active = ref(true)
 let timer: any
 onMounted(() => {
-  timer = setInterval(() => {
+  window.$mitt.on('onOBSComponentUpdate', () => {
-    if (!visiable.value || !active.value) return
     checkIfChanged()
-  }, 1000)
+  })
-
-  //@ts-expect-error 这里获取不了
-  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
-    }
-  }
 
   rtc?.on('function.question.sync-scroll', handleScroll)
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
-
   rtc?.off('function.question.sync-scroll', handleScroll)
 })
 </script>

src/views/obs/QueueOBS.vue

@@ -2,26 +2,26 @@
 import {
   QueueFrom,
   QueueSortType,
-  ResponseQueueModel,
-  Setting_Queue,
-  Setting_LiveRequest,
-  SongRequestFrom,
-  SongRequestInfo,
   QueueStatus,
+  ResponseQueueModel,
+  Setting_Queue
 } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
-import { AVATAR_URL, QUEUE_API_URL, SONG_REQUEST_API_URL } from '@/data/constants'
+import { QUEUE_API_URL } from '@/data/constants'
+import { MittType } from '@/mitt'
+import { useWebRTC } from '@/store/useRTC'
 import { useElementSize } from '@vueuse/core'
+import { List } from 'linqts'
+import mitt from 'mitt'
+import { NDivider, NEmpty, useMessage } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { Vue3Marquee } from 'vue3-marquee'
-import { NCard, NDivider, NEmpty, NSpace, NText, useMessage } from 'naive-ui'
-import { List } from 'linqts'
-import { isSameDay } from 'date-fns'
-import { useWebRTC } from '@/store/useRTC'
 
 const props = defineProps<{
-  id?: number
+  id?: number,
+  active: boolean,
+  visible: boolean,
 }>()
 
 const message = useMessage()
@@ -91,7 +91,7 @@ async function get() {
     if (data.code == 200) {
       return data.data
     }
-  } catch (err) {}
+  } catch (err) { }
   return {} as { queue: ResponseQueueModel[]; setting: Setting_Queue }
 }
 const isMoreThanContainer = computed(() => {
@@ -111,7 +111,6 @@ const allowGuardTypes = computed(() => {
   return types
 })
 async function update() {
-  if (!visiable.value || !active.value) return
   const r = await get()
   if (r) {
     queue.value = r.queue.sort((a, b) => {
@@ -121,27 +120,14 @@ async function update() {
   }
 }
 
-const visiable = ref(true)
-const active = ref(true)
-let timer: any
 onMounted(() => {
   update()
-  timer = setInterval(update, 2000)
+  window.$mitt.on('onOBSComponentUpdate', () => {
-
+    update()
-  //@ts-expect-error 这里获取不了
+  })
-  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(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>
 
@@ -151,12 +137,8 @@ onUnmounted(() => {
     <NDivider class="queue-divider">
       <p class="queue-header-count">已有 {{ activeItems.length ?? 0 }} 人</p>
     </NDivider>
-    <div
+    <div class="queue-singing-container" :singing="queue.findIndex((s) => s.status == QueueStatus.Progressing) > -1"
-      class="queue-singing-container"
+      :from="progressing?.from as number" :status="progressing?.status as number">
-      :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="progressing?.user?.face" referrerpolicy="no-referrer" />
@@ -167,31 +149,16 @@ onUnmounted(() => {
     </div>
     <div class="queue-content" ref="listContainerRef">
       <template v-if="activeItems.length > 0">
-        <Vue3Marquee
+        <Vue3Marquee class="queue-list" :key="key" vertical :pause="!isMoreThanContainer" :duration="20"
-          class="queue-list"
+          :style="`height: ${height}px;width: ${width}px;`">
-          :key="key"
+          <span class="queue-list-item" :from="item.from as number" :status="item.status as number"
-          vertical
+            :payment="item.giftPrice ?? 0" v-for="(item, index) in activeItems" :key="item.id"
-          :pause="!isMoreThanContainer"
+            :style="`height: ${itemHeight}px`">
-          :duration="20"
-          :style="`height: ${height}px;width: ${width}px;`"
-        >
-          <span
-            class="queue-list-item"
-            :from="item.from as number"
-            :status="item.status as number"
-            :payment="item.giftPrice ?? 0"
-            v-for="(item, index) in activeItems"
-            :key="item.id"
-            :style="`height: ${itemHeight}px`"
-          >
             <div class="queue-list-item-index" :index="index + 1">
               {{ index + 1 }}
             </div>
-            <div
+            <div v-if="settings.showFanMadelInfo" class="queue-list-item-level"
-              v-if="settings.showFanMadelInfo"
+              :has-level="(item.user?.fans_medal_level ?? 0) > 0">
-              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">
@@ -212,13 +179,8 @@ onUnmounted(() => {
       </div>
     </div>
     <div class="queue-footer" ref="footerRef" v-if="settings.showRequireInfo">
-      <Vue3Marquee
+      <Vue3Marquee :key="key" ref="footerListRef" class="queue-footer-marquee"
-        :key="key"
+        :pause="footerSize.width < footerListSize.width" :duration="20">
-        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">
@@ -278,6 +240,7 @@ onUnmounted(() => {
   border-radius: 10px;
   color: white;
 }
+
 .queue-header {
   margin: 0;
   color: #fff;
@@ -290,17 +253,20 @@ onUnmounted(() => {
     0 0 30px #61606086,
     0 0 40px rgba(64, 156, 179, 0.555);
 }
+
 .queue-header-count {
   color: #ffffff;
   text-align: center;
   font-size: 14px;
 }
+
 .queue-divider {
   margin: 0 auto;
   margin-top: -15px;
   margin-bottom: -15px;
   width: 90%;
 }
+
 .queue-singing-container {
   height: 35px;
   margin: 0 10px 0 10px;
@@ -308,34 +274,41 @@ onUnmounted(() => {
   align-items: center;
   gap: 10px;
 }
+
 .queue-singing-empty {
   font-weight: bold;
   font-style: italic;
   color: #ffffffbe;
 }
+
 .queue-singing-prefix {
   border: 2px solid rgb(231, 231, 231);
   height: 30px;
   width: 10px;
   border-radius: 10px;
 }
+
 .queue-singing-container[singing='true'] .queue-singing-prefix {
   background-color: #75c37f;
   animation: animated-border 3s linear infinite;
 }
+
 .queue-singing-container[singing='false'] .queue-singing-prefix {
   background-color: #c37575;
 }
+
 .queue-singing-avatar {
   height: 30px;
   border-radius: 50%;
   /* 添加无限旋转动画 */
   animation: rotate 20s linear infinite;
 }
+
 /* 网页点歌 */
 .queue-singing-container[from='3'] .queue-singing-avatar {
   display: none;
 }
+
 .queue-singing-name {
   font-size: large;
   font-weight: bold;
@@ -343,17 +316,21 @@ onUnmounted(() => {
   white-space: nowrap;
   max-width: 80%;
 }
+
 @keyframes rotate {
   0% {
     transform: rotate(0);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 .n-divider__line {
   background-color: #ffffffd5;
 }
+
 .queue-content {
   background-color: #0f0f0f4f;
   margin: 10px;
@@ -362,9 +339,11 @@ onUnmounted(() => {
   border-radius: 10px;
   overflow-x: hidden;
 }
+
 .marquee {
   justify-items: left;
 }
+
 .queue-list-item {
   display: flex;
   width: 100%;
@@ -374,6 +353,7 @@ onUnmounted(() => {
   justify-content: left;
   gap: 10px;
 }
+
 .queue-list-item-user-name {
   font-size: 18px;
   font-weight: bold;
@@ -390,6 +370,7 @@ onUnmounted(() => {
   color: #d2d8d6;
   font-size: 12px;
 }
+
 .queue-list-item[from='0'] .queue-list-item-avatar {
   display: none;
 }
@@ -408,6 +389,7 @@ onUnmounted(() => {
 
   margin-left: auto;
 }
+
 .queue-list-item-index {
   text-align: center;
   height: 18px;
@@ -425,16 +407,19 @@ onUnmounted(() => {
   font-weight: bold;
   text-shadow: 0 0 6px #ebc34c;
 }
+
 .queue-list-item-index[index='2'] {
   background-color: #c0c0c0;
   color: white;
   font-weight: bold;
 }
+
 .queue-list-item-index[index='3'] {
   background-color: #b87333;
   color: white;
   font-weight: bold;
 }
+
 .queue-list-item-level {
   text-align: center;
   height: 18px;
@@ -445,9 +430,11 @@ onUnmounted(() => {
   color: rgba(204, 204, 204, 0.993);
   font-size: 12px;
 }
+
 .queue-list-item-level[has-level='false'] {
   display: none;
 }
+
 .queue-footer {
   margin: 0 5px 5px 5px;
   height: 60px;
@@ -456,6 +443,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
 }
+
 .queue-tag {
   display: flex;
   margin: 5px 0 5px 5px;
@@ -468,14 +456,17 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: left;
 }
+
 .queue-tag-key {
   font-style: italic;
   color: rgb(211, 211, 211);
   font-size: 12px;
 }
+
 .queue-tag-value {
   font-size: 14px;
 }
+
 @keyframes animated-border {
   0% {
     box-shadow: 0 0 0px #589580;

src/views/open_live/LiveRequest.vue

@@ -14,8 +14,8 @@ import {
 } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
 import SongPlayer from '@/components/SongPlayer.vue'
-import { RoomAuthInfo } from '@/data/DanmakuClient'
 import { CURRENT_HOST, SONG_REQUEST_API_URL } from '@/data/constants'
+import { RoomAuthInfo } from '@/data/DanmakuClients/OpenLiveClient'
 import { useDanmakuClient } from '@/store/useDanmakuClient'
 import {
   Checkmark12Regular,