fix obs components display

2025-12-06 18:36:55 +08:00 · 2025-03-18 19:58:54 +08:00
parent 300a38e851
commit eb43d88e44
22 changed files with 308 additions and 232 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/default.d.ts
+++ b/default.d.ts
@@ -1,5 +1,5 @@
-import { LoadingBarProviderInst, MessageProviderInst } from "naive-ui"
-import { useRoute } from "vue-router"
+import { LoadingBarProviderInst, MessageProviderInst } from 'naive-ui'
+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>
  }
 }
--- a/package.json
+++ b/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",
-    "@vicons/fluent": "^0.12.0",
-    "@vitejs/plugin-basic-ssl": "^1.2.0",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@vicons/fluent": "^0.13.0",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
+    "@vitejs/plugin-vue": "^5.2.3",
    "@vue/cli": "^5.0.8",
-    "@vueuse/core": "^12.0.0",
-    "@vueuse/router": "^12.0.0",
+    "@vueuse/core": "^13.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",
-    "eslint": "^9.16.0",
+    "echarts": "^5.6.0",
+    "eslint": "^9.22.0",
    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-oxlint": "^0.14.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "fast-xml-parser": "^4.5.0",
+    "eslint-plugin-oxlint": "^0.16.0",
+    "eslint-plugin-prettier": "^5.2.3",
+    "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",
-    "prettier": "^3.4.1",
+    "pinia": "^3.0.1",
+    "prettier": "^3.5.3",
    "qrcode.vue": "^3.6.0",
    "queue-typescript": "^1.0.1",
-    "unplugin-vue-markdown": "^0.27.1",
-    "uuid": "^11.0.3",
-    "vite": "5.4.11",
+    "unplugin-vue-markdown": "^28.3.1",
+    "uuid": "^11.1.0",
+    "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",
-    "@types/bun": "^1.1.14",
+    "@eslint/eslintrc": "^3.3.0",
+    "@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",
-    "@vicons/ionicons5": "^0.12.0",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "@vue/eslint-config-typescript": "^14.1.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.32.0",
-    "naive-ui": "^2.40.3",
+    "@typescript-eslint/parser": "^8.26.1",
+    "@vicons/ionicons5": "^0.13.0",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-vue": "^10.0.0",
+    "naive-ui": "^2.41.0",
    "stylus": "^0.64.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.8.2"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,17 +7,15 @@
          <NLoadingBarProvider>
            <Suspense>
              <TempComponent>
-                <NLayoutContent style="height: 100%" v-if="layout != 'obs'">
                <NElement>
                  <ViewerLayout v-if="layout == 'viewer'" />
                  <ManageLayout v-else-if="layout == 'manage'" />
                  <OpenLiveLayout v-else-if="layout == 'open-live'" />
+                  <OBSLayout v-else-if="layout == 'obs'" />
                  <template v-else-if="layout == ''">
                    <RouterView />
                  </template>
                </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()

--- a/src/api/query.ts
+++ b/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,
-    body: typeof body === 'string' ? body : JSON.stringify(body),
+    headers: h,
+    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)
-    if (cookie.value) {
    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}`
    }
    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>> {
-  return await QueryPostAPIWithParamsInternal<PaginationResponse<T>>(url, undefined, body)
+export async function QueryPostPaginationAPI<T>(
+  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][] {
--- a/src/components/DynamicForm.vue
+++ b/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" />
--- a/src/main.ts
+++ b/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()
--- a/src/mitt.ts
+++ b/src/mitt.ts
@@ -1,14 +1,11 @@
 import mitt, { Emitter } from 'mitt'
 import { Music } from './store/useMusicRequest'

-declare type MittType<T = any> = {
-  onOpenTemplateSettings: {
-    template: string
-  }
-  onMusicRequestPlayerEnded: {
-    music: Music
-  }
+export declare type MittType<T = any> = {
+  onOpenTemplateSettings: { template: string }
+  onMusicRequestPlayerEnded: { music: Music }
  onMusicRequestPlayNextWaitingMusic: never
+  onOBSComponentUpdate: never
 }
 // 类型
 const emitter: Emitter<MittType> = mitt<MittType>()
--- a/src/store/useNotificationStore.ts
+++ b/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
--- a/src/store/useQuestionBox.ts
+++ b/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', {
--- a/src/store/useRTC.ts
+++ b/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 {
-    Init,
-    send,
-    on,
-    off
-  }
+  return { Init, send, on, off }
 })

 if (import.meta.hot) {
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -0,0 +1 @@
+
--- a/src/views/OBSLayout.vue
+++ b/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>
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/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 }">
--- a/src/views/obs/DanmujiOBS.vue
+++ b/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()
--- a/src/views/obs/LiveLotteryOBS.vue
+++ b/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 () => {
-    if (!visiable.value || !active.value) return
-    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
-  }
+  window.$mitt.on('onOBSComponentUpdate', () => {
+    getUsers()
+  })
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>

--- a/src/views/obs/LiveRequestOBS.vue
+++ b/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 这里获取不了
-  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
-    }
-  }
+  window.$mitt.on('onOBSComponentUpdate', () => {
+    update()
+  })
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
+  rtc.off('function.live-request.add', () => update())
 })
 </script>

--- a/src/views/obs/LiveRequestProcessedOBS.vue
+++ b/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)
-  //@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
-    }
-  }
+  window.$mitt.on('onOBSComponentUpdate', () => {
+    update()
+  })
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>

--- a/src/views/obs/MusicRequestOBS.vue
+++ b/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)
-
-  //@ts-expect-error 这里获取不了
-  window.obsstudio.onVisibilityChange = function (visibility: boolean) {
-    visiable.value = visibility
-  }
-  //@ts-expect-error 这里获取不了
-  window.obsstudio.onActiveChange = function (a: boolean) {
-    active.value = a
-  }
+  window.$mitt.on('onOBSComponentUpdate', () => {
+    update()
+  })
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>

--- a/src/views/obs/QuestionDisplayOBS.vue
+++ b/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(() => {
-    if (!visiable.value || !active.value) return
+  window.$mitt.on('onOBSComponentUpdate', () => {
    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>
--- a/src/views/obs/QueueOBS.vue
+++ b/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()
@@ -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)
-
-  //@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
-    }
-  }
+  window.$mitt.on('onOBSComponentUpdate', () => {
+    update()
+  })
 })
 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
-      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="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
-          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"
-            :payment="item.giftPrice ?? 0"
-            v-for="(item, index) in activeItems"
-            :key="item.id"
-            :style="`height: ${itemHeight}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" :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
-              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">
@@ -212,13 +179,8 @@ 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">
@@ -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;
--- a/src/views/open_live/LiveRequest.vue
+++ b/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,