add web-fetcher

src/views/ManageLayout.vue

@@ -454,7 +454,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <NLayout v-if="accountInfo" style="height: 100vh">
+  <NLayout v-if="accountInfo.id" style="height: 100vh">
     <NLayoutHeader bordered style="height: 50px; padding: 10px 15px 5px 15px">
       <NPageHeader>
         <template #title>

src/views/manage/DanmakuLayout.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 const accountInfo = useAccount()
 const message = useMessage()
 
-let client = new DanmakuClient(null)
+const client = new DanmakuClient(null)
 const isClientLoading = ref(true)
 
 onMounted(async () => {

src/views/obs/QuestionDisplayOBS.vue

@@ -54,12 +54,15 @@ onMounted(() => {
   }, 1000)
 
   //@ts-expect-error 这里获取不了
-  window.obsstudio.onVisibilityChange = function (visibility: boolean) {
-    visiable.value = visibility
-  }
-  //@ts-expect-error 这里获取不了
-  window.obsstudio.onActiveChange = function (a: boolean) {
-    active.value = a
+  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(() => {

src/views/obs/WebFetcherOBS.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useWebFetcher } from '@/store/useWebFetcher'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const webFetcher = useWebFetcher()
+
+onMounted(() => {
+  webFetcher.Start()
+})
+onUnmounted(() => {})
+</script>
+
+<template>
+  <div
+    class="web-fetcher-status"
+    :style="{
+      backgroundColor: webFetcher.isStarted ? '#6dc56d' : '#e34a4a',
+    }"
+  ></div>
+</template>
+
+<style scoped>
+.web-fetcher-status {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
+  border: 3px solid #00000033;
+  animation: animated-border 3s infinite;
+  transition: background-color 0.5s;
+}
+@keyframes animated-border {
+  0% {
+    box-shadow: 0 0 0px #589580;
+  }
+
+  100% {
+    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
+  }
+}
+</style>