mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-06 18:36:55 +08:00
Megghy
94a315a906
- 增加了歌曲搜索和筛选功能，支持按语言、标签和作者筛选。 - 改进了歌曲编辑和删除操作的用户体验，添加了确认提示。 - 更新了表格列定义，确保动态生成筛选选项。 - 优化了歌曲播放器的状态管理，增强了播放体验。 - 规范化了代码注释，提升了可读性和维护性。
63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<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)
|
|
|
|
const originalBackgroundColor = ref('')
|
|
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
|
|
}
|
|
}
|
|
// 使 .n-layout-content 背景透明
|
|
const layoutContent = document.querySelector('.n-layout-content');
|
|
if (layoutContent instanceof HTMLElement) {
|
|
originalBackgroundColor.value = layoutContent.style.backgroundColor
|
|
layoutContent.style.setProperty('background-color', 'transparent');
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(timer.value)
|
|
// 还原 .n-layout-content 背景颜色
|
|
const layoutContent = document.querySelector('.n-layout-content');
|
|
if (layoutContent instanceof HTMLElement) {
|
|
layoutContent.style.setProperty('background-color', originalBackgroundColor.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>
|