add rtc feature, set payment page to wip state

src/views/TestView.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account';
+import { MasterRTCClient, SlaveRTCClient } from '@/data/RTCClient';
+import { useWebRTC } from '@/store/useRTC';
+import { NButton, NInput, NSpin } from 'naive-ui';
+import { LogLevel, Peer } from 'peerjs';
+import { computed, onMounted, Ref, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const target = ref('');
+const accountInfo = useAccount()
+const route = useRoute()
+const inputMsg = ref('')
+
+const isMaster = computed(() => {
+  return route.query.slave == null || route.query.slave == undefined
+})
+
+let rtc: Ref<MasterRTCClient | undefined, MasterRTCClient | undefined> | Ref<SlaveRTCClient | undefined, SlaveRTCClient | undefined>
+
+function mount() {
+  rtc = useWebRTC().Init(isMaster.value ? 'master' : 'slave')
+}
+</script>
+
+<template>
+  <NSpin show v-if="!accountInfo.id" />
+  <div v-else @vue:mounted="mount">
+    master: {{ isMaster }}
+    {{ rtc?.peer?.id }}
+    <template v-if="isMaster">
+      <NInput v-model:value="inputMsg" />
+      <NButton @click="rtc.send('test', inputMsg)"> 发送 </NButton>
+    </template>
+  </div>
+</template>

src/views/manage/DashboardView.vue

@@ -486,6 +486,8 @@ onUnmounted(() => {
         </NTooltip>
       </NInputGroup>
     </NSpace>
+
+    <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
     <template #footer>
       <NButton @click="accountInfo?.isBiliVerified ? ChangeBili() : BindBili()" type="success"
         :loading="!token || isLoading">
@@ -522,5 +524,4 @@ onUnmounted(() => {
       <NButton @click="BindBiliAuth()" type="success" :loading="isLoading" :disabled="!biliAuthText"> 确定 </NButton>
     </template>
   </NModal>
-  <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
 </template>

src/views/manage/Setting_PaymentView.vue

@@ -36,7 +36,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <NTabs animated type="line">
+  <div v-if="true">
+    WIP...
+  </div>
+  <NTabs v-else animated type="line">
     <NTabPane name="弹幕储存" tab="弹幕储存">
       <template #tab>
         <component :is="tabDisplay(ConsumptionTypes.DanmakuStorage)" />

src/views/obs/MusicRequestOBS.vue

@@ -2,6 +2,7 @@
 import { DanmakuUserInfo, SongsInfo } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
 import { AVATAR_URL, MUSIC_REQUEST_API_URL } from '@/data/constants'
+import { useWebRTC } from '@/store/useRTC'
 import { useElementSize } from '@vueuse/core'
 import { NDivider, NEmpty, useMessage } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
@@ -22,6 +23,7 @@ const route = useRoute()
 const currentId = computed(() => {
   return props.id ?? route.query.id
 })
+const rtc = useWebRTC().Init('slave')
 
 const listContainerRef = ref()
 const footerRef = ref()

src/views/obs/QuestionDisplayOBS.vue

@@ -5,9 +5,11 @@ import { QUESTION_API_URL } from '@/data/constants'
 import { useRouteQuery } from '@vueuse/router'
 import { onMounted, onUnmounted, ref } from 'vue'
 import QuestionDisplayCard from '../manage/QuestionDisplayCard.vue'
+import { useWebRTC } from '@/store/useRTC'
 
 const hash = ref('')
 const token = useRouteQuery('token')
+const rtc = useWebRTC().Init('slave')
 
 const question = ref<QAInfo>()
 const setting = ref<Setting_QuestionDisplay>({} as Setting_QuestionDisplay)

src/views/obs/QueueOBS.vue

@@ -18,6 +18,7 @@ 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
@@ -28,6 +29,7 @@ const route = useRoute()
 const currentId = computed(() => {
   return props.id ?? route.query.id
 })
+const rtc = useWebRTC().Init('slave')
 
 const listContainerRef = ref()
 const footerRef = ref()