Megghy/vtsuru.live
1
0
Fork 0
mirror of https://github.com/Megghy/vtsuru.live.git synced 2025-12-06 18:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

add loadingbar

Browse Source
This commit is contained in:
Megghy
2023-12-26 23:04:03 +08:00
parent 5f02894e90
commit 840dc080a0
12 changed files with 188 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -25,6 +25,7 @@
"html2canvas": "^1.4.1",
"linqts": "^1.15.0",
"mitt": "^3.0.1",
"pinia": "^2.1.7",
"prettier": "^3.1.1",
"qrcode.vue": "^3.4.1",
"queue-typescript": "^1.0.1",

40
src/App.vue
View File

@@ -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()

18
src/components/TempComponent.vue Normal file
View File

@@ -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>

10
src/main.ts
View File

@@ -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()
}
}
})

9
src/router/index.ts
View File

@@ -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

13
src/store/useProviderStore.ts Normal file
View File

@@ -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 }
})

9
src/views/AboutView.vue
View File

@@ -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" />

156
src/views/ManageLayout.vue
View File

@@ -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,
},
],
},

2
src/views/manage/DashboardView.vue
View File

@@ -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'

6
src/views/open_live/ReadDanmaku.vue
View File

@@ -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 />

16
vite.config.mts
View File

@@ -6,12 +6,16 @@ import { defineConfig } from 'vite';
import svgLoader from 'vite-svg-loader';
export default defineConfig({
plugins: [vue({
script: {
propsDestructure: true,
defineModel: true
}
}), svgLoader(), vueJsx()],
plugins: [
vue({
script: {
propsDestructure: true,
defineModel: true,
},
}),
svgLoader(),
vueJsx(),
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),

22
yarn.lock
View File

@@ -4061,6 +4061,25 @@ __metadata:
languageName: node
linkType: hard
"pinia@npm:^2.1.7":
version: 2.1.7
resolution: "pinia@npm:2.1.7"
dependencies:
"@vue/devtools-api": "npm:^6.5.0"
vue-demi: "npm:>=0.14.5"
peerDependencies:
"@vue/composition-api": ^1.4.0
typescript: ">=4.4.4"
vue: ^2.6.14 || ^3.3.0
peerDependenciesMeta:
"@vue/composition-api":
optional: true
typescript:
optional: true
checksum: f4380a4db04b5b8565ed8a6843821d91f8f650d79dd9f0094005248bd963521b8a73419032fda76541e59b895b0e7852e67ca9d0408162cc391ce5a1bcbda445
languageName: node
linkType: hard
"postcss-selector-parser@npm:^6.0.13":
version: 6.0.13
resolution: "postcss-selector-parser@npm:6.0.13"
@@ -5041,6 +5060,7 @@ __metadata:
linqts: "npm:^1.15.0"
mitt: "npm:^3.0.1"
naive-ui: "npm:^2.36.0"
pinia: "npm:^2.1.7"
prettier: "npm:^3.1.1"
qrcode.vue: "npm:^3.4.1"
queue-typescript: "npm:^1.0.1"
@@ -5060,7 +5080,7 @@ __metadata:
languageName: unknown
linkType: soft
"vue-demi@npm:>=0.14.6, vue-demi@npm:latest":
"vue-demi@npm:>=0.14.5, vue-demi@npm:>=0.14.6, vue-demi@npm:latest":
version: 0.14.6
resolution: "vue-demi@npm:0.14.6"
peerDependencies: