add loadingbar

src/App.vue

@@ -2,36 +2,40 @@
   <NMessageProvider>
     <NNotificationProvider>
       <NConfigProvider :theme-overrides="themeOverrides" :theme="theme" style="height: 100vh" :locale="zhCN" :date-locale="dateZhCN">
-        <Suspense>
-          <div style="height: 100vh">
-            <NElement style="height: 100%" v-if="layout != 'obs'">
-              <ViewerLayout v-if="layout == 'viewer'" />
-              <ManageLayout v-else-if="layout == 'manage'" />
-              <OpenLiveLayout v-else-if="layout == 'open-live'" />
-              <template v-else-if="layout == ''">
-                <RouterView />
-              </template>
-            </NElement>
-            <RouterView v-else />
-          </div>
-          <template #fallback>
-            <NSpin size="large" show />
-          </template>
-        </Suspense>
+        <NLoadingBarProvider>
+          <Suspense>
+            <TempComponent>
+              <NElement style="height: 100%" v-if="layout != 'obs'">
+                <ViewerLayout v-if="layout == 'viewer'" />
+                <ManageLayout v-else-if="layout == 'manage'" />
+                <OpenLiveLayout v-else-if="layout == 'open-live'" />
+                <template v-else-if="layout == ''">
+                  <RouterView />
+                </template>
+              </NElement>
+              <RouterView v-else />
+            </TempComponent>
+            <template #fallback>
+              <NSpin size="large" show />
+            </template>
+          </Suspense>
+        </NLoadingBarProvider>
       </NConfigProvider>
     </NNotificationProvider>
   </NMessageProvider>
 </template>
 
 <script setup lang="ts">
+import { useProviderStore } from '@/store/useProviderStore'
 import ManageLayout from '@/views/ManageLayout.vue'
 import ViewerLayout from '@/views/ViewerLayout.vue'
 import { useStorage } from '@vueuse/core'
-import { NConfigProvider, NElement, NMessageProvider, NNotificationProvider, NSpin, darkTheme, dateZhCN, useOsTheme, zhCN } from 'naive-ui'
-import { computed } from 'vue'
+import { NConfigProvider, NElement, NLoadingBarProvider, NMessageProvider, NNotificationProvider, NSpin, darkTheme, dateZhCN, useLoadingBar, useOsTheme, zhCN } from 'naive-ui'
+import { computed, defineComponent, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { ThemeType } from './api/api-models'
 import OpenLiveLayout from './views/OpenLiveLayout.vue'
+import TempComponent from './components/TempComponent.vue'
 
 const route = useRoute()
 

src/components/TempComponent.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useProviderStore } from '@/store/useProviderStore'
+import { useLoadingBar } from 'naive-ui'
+import { onMounted } from 'vue'
+
+// Setup code
+onMounted(() => {
+  const providerStore = useProviderStore()
+  const loadingBar = useLoadingBar()
+  providerStore.setLoadingBar(loadingBar)
+})
+</script>
+
+<template>
+  <div style="height: 100vh">
+    <slot></slot>
+  </div>
+</template>

src/main.ts

@@ -2,13 +2,17 @@ import { QueryGetAPI } from '@/api/query'
 import { BASE_API, apiFail } from '@/data/constants'
 import EasySpeech from 'easy-speech'
 import { NText, createDiscreteApi } from 'naive-ui'
+import { createPinia } from 'pinia'
 import { createApp, h } from 'vue'
 import App from './App.vue'
 import { GetSelfAccount, UpdateAccountLoop } from './api/account'
 import { GetNotifactions } from './data/notifactions'
 import router from './router'
 
-createApp(App).use(router).mount('#app')
+const pinia = createPinia()
+
+const app = createApp(App)
+app.use(router).use(pinia).mount('#app')
 
 let currentVersion: string
 const { notification } = createDiscreteApi(['notification'])
@@ -20,6 +24,9 @@ QueryGetAPI<string>(BASE_API() + 'vtsuru/version')
       localStorage.setItem('Version', currentVersion)
 
       if (currentVersion && savedVersion && savedVersion !== currentVersion) {
+        setTimeout(() => {
+          location.reload()
+        }, 1000)
         //alert('发现新的版本更新, 请按 Ctrl+F5 强制刷新页面')
         notification.info({
           title: '发现新的版本更新',
@@ -27,7 +34,6 @@ QueryGetAPI<string>(BASE_API() + 'vtsuru/version')
           duration: 5000,
           meta: () => h(NText, { depth: 3 }, () => currentVersion),
         })
-        location.reload()
       }
     }
   })

src/router/index.ts

@@ -1,3 +1,4 @@
+import { useProviderStore } from '@/store/useProviderStore'
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import IndexView from '../views/IndexView.vue'
 
@@ -355,5 +356,13 @@ const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes,
 })
+router.beforeEach((to, from, next) => {
+  useProviderStore().loadingBar?.start()
+  next()
+})
+router.afterEach((to, from) => {
+  const loadingBar = useProviderStore().loadingBar
+  loadingBar?.finish()
+})
 
 export default router

src/store/useProviderStore.ts

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+import { LoadingBarApi } from 'naive-ui'
+import { ref } from 'vue'
+
+export const useProviderStore = defineStore('provider', () => {
+    const loadingBar = ref<LoadingBarApi>()
+
+    function setLoadingBar(b: LoadingBarApi) {
+        loadingBar.value = b
+    }
+
+    return { loadingBar, setLoadingBar }
+})

src/views/AboutView.vue

@@ -26,15 +26,12 @@ import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText, NTimeline, NTi
           <NButton tag="a" type="info" href="mailto:admin@vtsuru.live" text> admin@vtsuru.live </NButton>
         </NText>
         <template #footer>
-          <NSpace vertical>
-            <span>
-              开发者:
-              <NButton type="primary" tag="a" href="https://space.bilibili.com/10021741" target="_blank" text style=""> Megghy </NButton>
-            </span>
-            <span> 技术栈: 前端 VUE3 + NAIVE UI, 后端 .NET 8 </span>
+          <NSpace vertical align="center">
+            <span style="color: gray"> MADE WITH ❤️ BY <NButton type="primary" tag="a" href="https://space.bilibili.com/10021741" target="_blank" text style=""> Megghy </NButton> </span>
           </NSpace>
           <NDivider title-placement="left"> 更新日志 </NDivider>
           <NTimeline>
+            <NTimelineItem type="info" title="功能更新" content="读弹幕支持自定义API" time="2023-12-25" />
             <NTimelineItem type="success" title="功能添加" content="弹幕点歌 (点播)" time="2023-12-24" />
             <NTimelineItem type="success" title="功能添加" content="读弹幕" time="2023-12-17" />
             <NTimelineItem type="success" title="功能添加" content="直播记录" time="2023-12-3" />

src/views/ManageLayout.vue

@@ -191,90 +191,97 @@ const menuOptions = [
   },
   {
     label: () =>
-      h(NText, () => [
-        '弹幕相关',
-        h(
-          NTooltip,
-          {
-            style: 'padding: 0;',
-          },
-          {
-            trigger: () => h(NIcon, { component: Info24Filled }),
-            default: () =>
+      h(
+        NTooltip,
+        {},
+        {
+          trigger: () =>
+            h(NText, () => [
+              '弹幕相关',
               h(
-                NAlert,
+                NTooltip,
                 {
-                  type: 'warning',
-                  size: 'small',
-                  title: '可用性警告',
-                  style: 'max-width: 600px;',
+                  style: 'padding: 0;',
                 },
-                () =>
-                  h('div', {}, [
-                    '    当浏览器在后台运行时, 定时器和 Websocket 连接将受到严格限制, 这会导致弹幕接收功能无法正常工作 (详见',
+                {
+                  trigger: () => h(NIcon, { component: Info24Filled }),
+                  default: () =>
                     h(
-                      NButton,
+                      NAlert,
                       {
-                        text: true,
-                        tag: 'a',
-                        href: 'https://developer.chrome.com/blog/background_tabs/',
-                        target: '_blank',
-                        type: 'info',
-                      },
-                      () => '此文章',
-                    ),
-                    '), 虽然本站已经针对此问题做出了处理, 一般情况下即使掉线了也会重连, 不过还是有可能会遗漏事件',
-                    h('br'),
-                    '为避免这种情况, 建议注册本站账后使用',
-                    h(
-                      NButton,
-                      {
-                        type: 'primary',
-                        text: true,
+                        type: 'warning',
                         size: 'small',
-                        tag: 'a',
-                        href: 'https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p',
-                        target: '_blank',
+                        title: '可用性警告',
+                        style: 'max-width: 600px;',
                       },
-                      () => 'VtsuruEventFetcher',
+                      () =>
+                        h('div', {}, [
+                          '    当浏览器在后台运行时, 定时器和 Websocket 连接将受到严格限制, 这会导致弹幕接收功能无法正常工作 (详见',
+                          h(
+                            NButton,
+                            {
+                              text: true,
+                              tag: 'a',
+                              href: 'https://developer.chrome.com/blog/background_tabs/',
+                              target: '_blank',
+                              type: 'info',
+                            },
+                            () => '此文章',
+                          ),
+                          '), 虽然本站已经针对此问题做出了处理, 一般情况下即使掉线了也会重连, 不过还是有可能会遗漏事件',
+                          h('br'),
+                          '为避免这种情况, 建议注册本站账后使用',
+                          h(
+                            NButton,
+                            {
+                              type: 'primary',
+                              text: true,
+                              size: 'small',
+                              tag: 'a',
+                              href: 'https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p',
+                              target: '_blank',
+                            },
+                            () => 'VtsuruEventFetcher',
+                          ),
+                          ', 否则请在使用功能时尽量保持网页在前台运行, 同时关闭浏览器的 页面休眠/内存节省 功能',
+                          h('br'),
+                          'Chrome: ',
+                          h(
+                            NButton,
+                            {
+                              type: 'info',
+                              text: true,
+                              size: 'small',
+                              tag: 'a',
+                              href: 'https://support.google.com/chrome/answer/12929150?hl=zh-Hans#zippy=%2C%E5%BC%80%E5%90%AF%E6%88%96%E5%85%B3%E9%97%AD%E7%9C%81%E5%86%85%E5%AD%98%E6%A8%A1%E5%BC%8F%2C%E8%AE%A9%E7%89%B9%E5%AE%9A%E7%BD%91%E7%AB%99%E4%BF%9D%E6%8C%81%E6%B4%BB%E5%8A%A8%E7%8A%B6%E6%80%81',
+                              target: '_blank',
+                            },
+                            () => '让特定网站保持活动状态',
+                          ),
+                          ', Edge: ',
+                          h(
+                            NButton,
+                            {
+                              type: 'info',
+                              text: true,
+                              size: 'small',
+                              tag: 'a',
+                              href: 'https://support.microsoft.com/zh-cn/topic/%E4%BA%86%E8%A7%A3-microsoft-edge-%E4%B8%AD%E7%9A%84%E6%80%A7%E8%83%BD%E5%8A%9F%E8%83%BD-7b36f363-2119-448a-8de6-375cfd88ab25',
+                              target: '_blank',
+                            },
+                            () => '永远不想进入睡眠状态的网站',
+                          ),
+                        ]),
                     ),
-                    ', 否则请在使用功能时尽量保持网页在前台运行, 同时关闭浏览器的 页面休眠/内存节省 功能',
-                    h('br'),
-                    'Chrome: ',
-                    h(
-                      NButton,
-                      {
-                        type: 'info',
-                        text: true,
-                        size: 'small',
-                        tag: 'a',
-                        href: 'https://support.google.com/chrome/answer/12929150?hl=zh-Hans#zippy=%2C%E5%BC%80%E5%90%AF%E6%88%96%E5%85%B3%E9%97%AD%E7%9C%81%E5%86%85%E5%AD%98%E6%A8%A1%E5%BC%8F%2C%E8%AE%A9%E7%89%B9%E5%AE%9A%E7%BD%91%E7%AB%99%E4%BF%9D%E6%8C%81%E6%B4%BB%E5%8A%A8%E7%8A%B6%E6%80%81',
-                        target: '_blank',
-                      },
-                      () => '让特定网站保持活动状态',
-                    ),
-                    ', Edge: ',
-                    h(
-                      NButton,
-                      {
-                        type: 'info',
-                        text: true,
-                        size: 'small',
-                        tag: 'a',
-                        href: 'https://support.microsoft.com/zh-cn/topic/%E4%BA%86%E8%A7%A3-microsoft-edge-%E4%B8%AD%E7%9A%84%E6%80%A7%E8%83%BD%E5%8A%9F%E8%83%BD-7b36f363-2119-448a-8de6-375cfd88ab25',
-                        target: '_blank',
-                      },
-                      () => '永远不想进入睡眠状态的网站',
-                    ),
-                  ]),
+                },
               ),
-          },
-        ),
-      ]),
+            ]),
+          default: () => accountInfo.value?.isBiliVerified ? '需要使用直播弹幕的功能' : '你尚未进行 Bilibili 认证, 请前往面板进行绑定',
+        },
+      ),
     key: 'manage-danmaku',
     icon: renderIcon(Chat24Filled),
     disabled: accountInfo.value?.isEmailVerified == false,
-    //disabled: accountInfo.value?.isEmailVerified == false,
     children: [
       {
         label: () =>
@@ -289,7 +296,6 @@ const menuOptions = [
           ),
         key: 'manage-liveLottery',
         icon: renderIcon(Lottery24Filled),
-        //disabled: accountInfo.value?.isEmailVerified == false,
       },
       {
         label: () =>
@@ -314,7 +320,6 @@ const menuOptions = [
           ),
         key: 'manage-songRequest',
         icon: renderIcon(MusicalNote),
-        //disabled: accountInfo.value?.isEmailVerified == false,
       },
       {
         label: () =>
@@ -339,7 +344,6 @@ const menuOptions = [
           ),
         key: 'manage-musicRequest',
         icon: renderIcon(MusicalNote),
-        //disabled: accountInfo.value?.isEmailVerified == false,
       },
       {
         label: () =>
@@ -354,7 +358,6 @@ const menuOptions = [
           ),
         key: 'manage-liveQueue',
         icon: renderIcon(PeopleQueue24Filled),
-        //disabled: accountInfo.value?.isEmailVerified == false,
       },
       {
         label: () =>
@@ -369,7 +372,6 @@ const menuOptions = [
           ),
         key: 'manage-speech',
         icon: renderIcon(TabletSpeaker24Filled),
-        //disabled: accountInfo.value?.isEmailVerified == false,
       },
     ],
   },

src/views/manage/DashboardView.vue

@@ -6,7 +6,7 @@ import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
 import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
 import { Question24Regular } from '@vicons/fluent'
 import { useLocalStorage } from '@vueuse/core'
-import { NAlert, NButton, NCard, NCountdown, NDivider, NEllipsis, NIcon, NInput, NInputGroup, NModal, NPopconfirm, NSpace, NTag, NText, NTime, NTooltip, useMessage } from 'naive-ui'
+import { NAlert, NButton, NCard, NCountdown, NDivider, NEllipsis, NIcon, NInput, NInputGroup, NModal, NPopconfirm, NSpace, NTag, NText, NTime, NTooltip, useLoadingBar, useMessage } from 'naive-ui'
 import { onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 import SettingsManageView from './SettingsManageView.vue'

src/views/open_live/ReadDanmaku.vue

@@ -506,7 +506,7 @@ onUnmounted(() => {
   <NAlert v-if="!speechSynthesisInfo || !speechSynthesisInfo.speechSynthesis" type="error"> 你的浏览器不支持语音功能 </NAlert>
   <template v-else>
     <NSpace vertical>
-      <NAlert type="info">
+      <NAlert v-if="settings.voiceType == 'local'" type="info" closeable >
         建议在 Edge 浏览器使用
         <NTooltip>
           <template #trigger>
@@ -668,10 +668,10 @@ onUnmounted(() => {
               </NButton>
               将被替换为要念的文本
             </NAlert>
-            <NAlert v-if="isVtsuruVoiceAPI" type="success">
+            <NAlert v-if="isVtsuruVoiceAPI" type="success" closable>
               看起来你正在使用本站提供的测试API (voice.vtsuru.live), 这个接口将会返回
               <NButton text type="info" tag="a" href="https://space.bilibili.com/5859321" target="_blank"> Xz乔希 </NButton>
-              训练的 Taffy 模型结果, 不支持部分英文, 侵删
+              训练的 Taffy 模型结果, 不支持部分英文, 仅用于测试 侵删
             </NAlert>
           </NSpace>
           <br />