mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-06 18:36:55 +08:00
feat: 重构 LiveRequestOBS 组件，支持样式切换和滚动速度设置
- 修复了原有OBS组件样式背景不透明的问题 - 移除了不必要的导入和逻辑，简化了组件结构。 - 添加了样式选择功能，支持经典和清新两种风格。 - 增加了滚动速度倍率设置，提升用户体验。 - 更新了 LiveRequest 组件以支持新功能，确保样式和速度参数在 OBS 中生效。
This commit is contained in:
@@ -46,3 +46,9 @@ onUnmounted(() => {
|
||||
</RouterView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.body,html,.n-element,.n-layout-content {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,559 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
QueueSortType,
|
||||
Setting_LiveRequest,
|
||||
SongRequestFrom,
|
||||
SongRequestInfo,
|
||||
SongRequestStatus,
|
||||
} from '@/api/api-models'
|
||||
import { QueryGetAPI } from '@/api/query'
|
||||
import { AVATAR_URL, SONG_REQUEST_API_URL } from '@/data/constants'
|
||||
import { useElementSize } from '@vueuse/core'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Vue3Marquee } from 'vue3-marquee'
|
||||
import { NCard, NDivider, NEmpty, NMessageProvider, NSpace, NText, useMessage } from 'naive-ui'
|
||||
import { List } from 'linqts'
|
||||
import { useWebRTC } from '@/store/useRTC'
|
||||
import ClassicRequestOBS from './live-request/ClassicRequestOBS.vue'
|
||||
import FreshRequestOBS from './live-request/FreshRequestOBS.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
id?: number,
|
||||
active?: boolean,
|
||||
visible?: boolean,
|
||||
style?: 'classic' | 'fresh',
|
||||
}>()
|
||||
|
||||
const message = useMessage()
|
||||
const route = useRoute()
|
||||
const currentId = computed(() => {
|
||||
return props.id ?? route.query.id
|
||||
})
|
||||
const rtc = await useWebRTC().Init('slave')
|
||||
|
||||
const cardRef = ref()
|
||||
const listContainerRef = ref()
|
||||
const { height, width } = useElementSize(listContainerRef)
|
||||
const itemHeight = 40
|
||||
|
||||
const key = ref(Date.now())
|
||||
|
||||
const originSongs = ref<SongRequestInfo[]>([])
|
||||
const songs = computed(() => {
|
||||
let result = new List(originSongs.value)
|
||||
switch (settings.value.sortType) {
|
||||
case QueueSortType.TimeFirst: {
|
||||
result = result.ThenBy((q) => q.createAt)
|
||||
break
|
||||
}
|
||||
case QueueSortType.GuardFirst: {
|
||||
result = result
|
||||
.OrderBy((q) => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
|
||||
.ThenBy((q) => q.createAt)
|
||||
break
|
||||
}
|
||||
case QueueSortType.PaymentFist: {
|
||||
result = result.OrderByDescending((q) => q.price ?? 0).ThenBy((q) => q.createAt)
|
||||
}
|
||||
case QueueSortType.FansMedalFirst: {
|
||||
result = result.OrderByDescending((q) => q.user?.fans_medal_level ?? 0).ThenBy((q) => q.createAt)
|
||||
}
|
||||
}
|
||||
if (settings.value.isReverse) {
|
||||
|
||||
return result.Reverse().ToArray()
|
||||
} else {
|
||||
return result.ToArray()
|
||||
}
|
||||
const queryId = route.query.id
|
||||
return props.id ?? (typeof queryId === 'string' ? parseInt(queryId) : undefined)
|
||||
})
|
||||
|
||||
const isMoreThanContainer = computed(() => {
|
||||
return songs.value.length * itemHeight > height.value
|
||||
})
|
||||
|
||||
const settings = ref<Setting_LiveRequest>({} as Setting_LiveRequest)
|
||||
const singing = computed(() => {
|
||||
return songs.value.find((s) => s.status == SongRequestStatus.Singing)
|
||||
})
|
||||
const activeSongs = computed(() => {
|
||||
return songs.value.filter((s) => s.status == SongRequestStatus.Waiting)
|
||||
})
|
||||
|
||||
async function get() {
|
||||
try {
|
||||
const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_LiveRequest }>(
|
||||
SONG_REQUEST_API_URL + 'get-active-and-settings',
|
||||
{
|
||||
id: currentId.value,
|
||||
},
|
||||
)
|
||||
if (data.code == 200) {
|
||||
return data.data
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
return {
|
||||
songs: [],
|
||||
setting: {} as Setting_LiveRequest,
|
||||
} as { songs: SongRequestInfo[]; setting: Setting_LiveRequest }
|
||||
}
|
||||
const allowGuardTypes = computed(() => {
|
||||
const types = []
|
||||
if (settings.value.needTidu) {
|
||||
types.push('提督')
|
||||
}
|
||||
if (settings.value.needZongdu) {
|
||||
types.push('总督')
|
||||
}
|
||||
if (settings.value.needJianzhang) {
|
||||
types.push('舰长')
|
||||
}
|
||||
return types
|
||||
})
|
||||
async function update() {
|
||||
const r = await get()
|
||||
if (r) {
|
||||
const isCountChange = originSongs.value.length != r.songs.length
|
||||
originSongs.value = r.songs.sort((a, b) => {
|
||||
return b.createAt - a.createAt
|
||||
})
|
||||
settings.value = r.setting
|
||||
if (isCountChange) {
|
||||
key.value = Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
async function onAddedItem() {
|
||||
|
||||
}
|
||||
|
||||
const direction = ref<'normal' | 'reverse'>('normal')
|
||||
|
||||
onMounted(() => {
|
||||
update()
|
||||
// 接收点播结果消息
|
||||
rtc.on('function.live-request.add', () => update())
|
||||
|
||||
window.$mitt.on('onOBSComponentUpdate', () => {
|
||||
update()
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.$mitt.off('onOBSComponentUpdate')
|
||||
rtc.off('function.live-request.add', () => update())
|
||||
// 渲染哪种样式
|
||||
const styleType = computed(() => {
|
||||
const queryStyle = route.query.style
|
||||
return props.style || (typeof queryStyle === 'string' ? queryStyle : 'classic')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="cardRef"
|
||||
class="live-request-background"
|
||||
<ClassicRequestOBS
|
||||
v-if="styleType === 'classic'"
|
||||
:id="currentId"
|
||||
:active="active"
|
||||
:visible="visible"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<p class="live-request-header">
|
||||
{{ settings.obsTitle ?? '点播' }}
|
||||
</p>
|
||||
<NDivider class="live-request-divider">
|
||||
<p class="live-request-header-count">
|
||||
已有 {{ activeSongs.length ?? 0 }} 条
|
||||
</p>
|
||||
</NDivider>
|
||||
<div
|
||||
class="live-request-processing-container"
|
||||
:singing="songs.findIndex((s) => s.status == SongRequestStatus.Singing) > -1"
|
||||
:from="singing?.from as number"
|
||||
:status="singing?.status as number"
|
||||
>
|
||||
<div class="live-request-processing-prefix" />
|
||||
<template v-if="singing">
|
||||
<img
|
||||
class="live-request-processing-avatar"
|
||||
:src="singing?.user?.face"
|
||||
referrerpolicy="no-referrer"
|
||||
>
|
||||
<p class="live-request-processing-song-name">
|
||||
{{ singing?.songName }}
|
||||
</p>
|
||||
<p class="live-request-processing-name">
|
||||
{{ singing?.user?.name }}
|
||||
</p>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
class="live-request-processing-empty"
|
||||
>
|
||||
暂无
|
||||
</div>
|
||||
<div class="live-request-processing-suffix" />
|
||||
</div>
|
||||
<div
|
||||
ref="listContainerRef"
|
||||
class="live-request-content"
|
||||
>
|
||||
<template v-if="activeSongs.length > 0">
|
||||
<Vue3Marquee
|
||||
:key="key"
|
||||
class="live-request-list"
|
||||
vertical
|
||||
:duration="20"
|
||||
:pause="!isMoreThanContainer"
|
||||
:style="`height: ${height}px;width: ${width}px;`"
|
||||
>
|
||||
<div
|
||||
v-for="(song, index) in activeSongs"
|
||||
:key="song.id"
|
||||
class="live-request-list-item"
|
||||
:from="song.from as number"
|
||||
:status="song.status as number"
|
||||
:style="`height: ${itemHeight}px`"
|
||||
>
|
||||
<div
|
||||
class="live-request-list-item-index"
|
||||
:index="index + 1"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="live-request-list-item-song-name">
|
||||
{{ song.songName }}
|
||||
</div>
|
||||
<p
|
||||
v-if="settings.showUserName"
|
||||
class="live-request-list-item-name"
|
||||
>
|
||||
{{ song.from == SongRequestFrom.Manual ? '主播添加' : song.user?.name }}
|
||||
</p>
|
||||
<div
|
||||
v-if="settings.showFanMadelInfo"
|
||||
class="live-request-list-item-level"
|
||||
:has-level="(song.user?.fans_medal_level ?? 0) > 0"
|
||||
>
|
||||
{{ `${song.user?.fans_medal_name} ${song.user?.fans_medal_level}` }}
|
||||
</div>
|
||||
</div>
|
||||
<NDivider
|
||||
v-if="isMoreThanContainer"
|
||||
class="live-request-footer-divider"
|
||||
style="margin: 10px 0 10px 0"
|
||||
/>
|
||||
</Vue3Marquee>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
style="position: relative; top: 20%"
|
||||
>
|
||||
<NEmpty
|
||||
class="live-request-empty"
|
||||
description="暂无人点播"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="settings.showRequireInfo"
|
||||
ref="footerRef"
|
||||
class="live-request-footer"
|
||||
>
|
||||
<Vue3Marquee
|
||||
:key="key"
|
||||
ref="footerListRef"
|
||||
class="live-request-footer-marquee"
|
||||
:duration="10"
|
||||
animate-on-overflow-only
|
||||
>
|
||||
<span
|
||||
class="live-request-tag"
|
||||
type="prefix"
|
||||
>
|
||||
<div class="live-request-tag-key">前缀</div>
|
||||
<div class="live-request-tag-value">
|
||||
{{ settings.orderPrefix }}
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="live-request-tag"
|
||||
type="prefix"
|
||||
>
|
||||
<div class="live-request-tag-key">允许</div>
|
||||
<div class="live-request-tag-value">
|
||||
{{ settings.allowAllDanmaku ? '所有弹幕' : allowGuardTypes.length > 0 ? allowGuardTypes.join(',') : '无' }}
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="live-request-tag"
|
||||
type="sc"
|
||||
>
|
||||
<div class="live-request-tag-key">SC点歌</div>
|
||||
<div class="live-request-tag-value">
|
||||
{{ settings.allowSC ? '> ¥' + settings.scMinPrice : '不允许' }}
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="live-request-tag"
|
||||
type="fan-madel"
|
||||
>
|
||||
<div class="live-request-tag-key">粉丝牌</div>
|
||||
<div class="live-request-tag-value">
|
||||
{{
|
||||
settings.needWearFanMedal
|
||||
? settings.fanMedalMinLevel > 0
|
||||
? '> ' + settings.fanMedalMinLevel
|
||||
: '佩戴'
|
||||
: '无需'
|
||||
}}
|
||||
</div>
|
||||
</span>
|
||||
</Vue3Marquee>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.live-request-background {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
background-color: #0f0f0f48;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.live-request-header {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow:
|
||||
0 0 10px #ca7b7b6e,
|
||||
0 0 20px #ffffff8e,
|
||||
0 0 30px #61606086,
|
||||
0 0 40px rgba(64, 156, 179, 0.555);
|
||||
}
|
||||
|
||||
.live-request-header-count {
|
||||
color: #ffffffbd;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.live-request-divider {
|
||||
margin: 0 auto;
|
||||
margin-top: -15px;
|
||||
margin-bottom: -15px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.live-request-processing-container {
|
||||
height: 35px;
|
||||
margin: 0 10px 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.live-request-processing-empty {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: #ffffffbe;
|
||||
}
|
||||
|
||||
.live-request-processing-prefix {
|
||||
border: 2px solid rgb(231, 231, 231);
|
||||
height: 30px;
|
||||
width: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.live-request-processing-container[singing='true'] .live-request-processing-prefix {
|
||||
background-color: #75c37f;
|
||||
animation: animated-border 3s linear infinite;
|
||||
}
|
||||
|
||||
.live-request-processing-container[singing='false'] .live-request-processing-prefix {
|
||||
background-color: #c37575;
|
||||
}
|
||||
|
||||
.live-request-processing-avatar {
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
/* 添加无限旋转动画 */
|
||||
animation: rotate 20s linear infinite;
|
||||
}
|
||||
|
||||
/* 网页点歌 */
|
||||
.live-request-processing-container[from='3'] .live-request-processing-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.live-request-processing-song-name {
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.live-request-processing-name {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.n-divider__line {
|
||||
background-color: #ffffffd5;
|
||||
}
|
||||
|
||||
.live-request-content {
|
||||
background-color: #0f0f0f4f;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.marquee {
|
||||
justify-items: left;
|
||||
}
|
||||
|
||||
.live-request-list-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.live-request-list-item-song-name {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
/* 手动添加 */
|
||||
.live-request-list-item[from='0'] .live-request-list-item-name {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
color: #d2d8d6;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.live-request-list-item[from='0'] .live-request-list-item-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 弹幕点歌 */
|
||||
.live-request-list-item[from='1'] {}
|
||||
|
||||
.live-request-list-item-name {
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
color: rgba(204, 204, 204, 0.993);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.live-request-list-item-index {
|
||||
text-align: center;
|
||||
height: 18px;
|
||||
padding: 2px;
|
||||
min-width: 15px;
|
||||
border-radius: 5px;
|
||||
background-color: #0f0f0f48;
|
||||
color: rgba(204, 204, 204, 0.993);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.live-request-list-item-level {
|
||||
text-align: center;
|
||||
height: 18px;
|
||||
padding: 2px;
|
||||
min-width: 15px;
|
||||
border-radius: 5px;
|
||||
background-color: #0f0f0f48;
|
||||
color: rgba(204, 204, 204, 0.993);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.live-request-list-item-level[has-level='false'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.live-request-footer {
|
||||
margin: 0 5px 5px 5px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
background-color: #0f0f0f4f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.live-request-tag {
|
||||
display: flex;
|
||||
margin: 5px 0 5px 5px;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
background-color: #0f0f0f4f;
|
||||
padding: 4px;
|
||||
padding-right: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.live-request-tag-key {
|
||||
font-style: italic;
|
||||
color: rgb(211, 211, 211);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.live-request-tag-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.live-request-list-item-index[index='1'] {
|
||||
background-color: #ebc34c;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 6px #ebc34c;
|
||||
}
|
||||
|
||||
.live-request-list-item-index[index='2'] {
|
||||
background-color: #c0c0c0;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.live-request-list-item-index[index='3'] {
|
||||
background-color: #b87333;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@keyframes animated-border {
|
||||
0% {
|
||||
box-shadow: 0 0 0px #589580;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
/>
|
||||
<FreshRequestOBS
|
||||
v-else
|
||||
:id="currentId"
|
||||
:active="active"
|
||||
:visible="visible"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</template>
|
||||
469
src/views/obs/live-request/ClassicRequestOBS.vue
Normal file
469
src/views/obs/live-request/ClassicRequestOBS.vue
Normal file
@@ -0,0 +1,469 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
SongRequestFrom,
|
||||
SongRequestStatus,
|
||||
} from '@/api/api-models'
|
||||
import { useElementSize } from '@vueuse/core'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Vue3Marquee } from 'vue3-marquee'
|
||||
import { NDivider, NEmpty } from 'naive-ui'
|
||||
import { useLiveRequestData } from './useLiveRequestData'
|
||||
|
||||
const props = defineProps<{
|
||||
id?: number,
|
||||
active?: boolean,
|
||||
visible?: boolean,
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const currentId = computed(() => {
|
||||
return props.id ?? route.query.id
|
||||
})
|
||||
|
||||
const {
|
||||
songs,
|
||||
settings,
|
||||
singing,
|
||||
activeSongs,
|
||||
allowGuardTypes,
|
||||
key,
|
||||
update,
|
||||
initRTC
|
||||
} = useLiveRequestData(currentId.value?.toString() ?? '')
|
||||
|
||||
const cardRef = ref()
|
||||
const listContainerRef = ref()
|
||||
const { height, width } = useElementSize(listContainerRef)
|
||||
const itemHeight = 40
|
||||
|
||||
const isMoreThanContainer = computed(() => {
|
||||
return activeSongs.value.length * itemHeight > height.value
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
update()
|
||||
initRTC()
|
||||
|
||||
window.$mitt.on('onOBSComponentUpdate', () => {
|
||||
update()
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.$mitt.off('onOBSComponentUpdate')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="cardRef"
|
||||
class="live-request-background"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<p class="live-request-header">
|
||||
{{ settings.obsTitle ?? '点播' }}
|
||||
</p>
|
||||
<NDivider class="live-request-divider">
|
||||
<p class="live-request-header-count">
|
||||
已有 {{ activeSongs.length ?? 0 }} 条
|
||||
</p>
|
||||
</NDivider>
|
||||
<div
|
||||
class="live-request-processing-container"
|
||||
:singing="songs.findIndex((s) => s.status == SongRequestStatus.Singing) > -1"
|
||||
:from="singing?.from as number"
|
||||
:status="singing?.status as number"
|
||||
>
|
||||
<div class="live-request-processing-prefix" />
|
||||
<template v-if="singing">
|
||||
<img
|
||||
class="live-request-processing-avatar"
|
||||
:src="singing?.user?.face"
|
||||
referrerpolicy="no-referrer"
|
||||
>
|
||||
<p class="live-request-processing-song-name">
|
||||
{{ singing?.songName }}
|
||||
</p>
|
||||
<p class="live-request-processing-name">
|
||||
{{ singing?.user?.name }}
|
||||
</p>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
class="live-request-processing-empty"
|
||||
>
|
||||
暂无
|
||||
</div>
|
||||
<div class="live-request-processing-suffix" />
|
||||
</div>
|
||||
<div
|
||||
ref="listContainerRef"
|
||||
class="live-request-content"
|
||||
>
|
||||
<template v-if="activeSongs.length > 0">
|
||||
<Vue3Marquee
|
||||
:key="key"
|
||||
class="live-request-list"
|
||||
vertical
|
||||
:duration="20"
|
||||
:pause="!isMoreThanContainer"
|
||||
:style="`height: ${height}px;width: ${width}px;`"
|
||||
>
|
||||
<div
|
||||
v-for="(song, index) in activeSongs"
|
||||
:key="song.id"
|
||||
class="live-request-list-item"
|
||||
:from="song.from as number"
|
||||
:status="song.status as number"
|
||||
:style="`height: ${itemHeight}px`"
|
||||
>
|
||||
<div
|
||||
class="live-request-list-item-index"
|
||||
:index="index + 1"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="live-request-list-item-song-name">
|
||||
{{ song.songName }}
|
||||
</div>
|
||||
<p
|
||||
v-if="settings.showUserName"
|
||||
class="live-request-list-item-name"
|
||||
>
|
||||
{{ song.from == SongRequestFrom.Manual ? '主播添加' : song.user?.name }}
|
||||
</p>
|
||||
<div
|
||||
v-if="settings.showFanMadelInfo"
|
||||
class="live-request-list-item-level"
|
||||
:has-level="(song.user?.fans_medal_level ?? 0) > 0"
|
||||
>
|
||||
{{ `${song.user?.fans_medal_name} ${song.user?.fans_medal_level}` }}
|
||||
</div>
|
||||
</div>
|
||||
<NDivider
|
||||
v-if="isMoreThanContainer"
|
||||
class="live-request-footer-divider"
|
||||
style="margin: 10px 0 10px 0"
|
||||
/>
|
||||
</Vue3Marquee>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
style="position: relative; top: 20%"
|
||||
>
|
||||
<NEmpty
|
||||
class="live-request-empty"
|
||||
description="暂无人点播"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="settings.showRequireInfo"
|
||||
ref="footerRef"
|
||||
class="live-request-footer"
|
||||
>
|
||||
<Vue3Marquee
|
||||
:key="key"
|
||||
ref="footerListRef"
|
||||
class="live-request-footer-marquee"
|
||||
:duration="10"
|
||||
animate-on-overflow-only
|
||||
>
|
||||
<span
|
||||
class="live-request-tag"
|
||||
type="prefix"
|
||||
>
|
||||
<div class="live-request-tag-key">前缀</div>
|
||||
<div class="live-request-tag-value">
|
||||
{{ settings.orderPrefix }}
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="live-request-tag"
|
||||
type="prefix"
|
||||
>
|
||||
<div class="live-request-tag-key">允许</div>
|
||||
<div class="live-request-tag-value">
|
||||
{{ settings.allowAllDanmaku ? '所有弹幕' : allowGuardTypes.length > 0 ? allowGuardTypes.join(',') : '无' }}
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="live-request-tag"
|
||||
type="sc"
|
||||
>
|
||||
<div class="live-request-tag-key">SC点歌</div>
|
||||
<div class="live-request-tag-value">
|
||||
{{ settings.allowSC ? '> ¥' + settings.scMinPrice : '不允许' }}
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="live-request-tag"
|
||||
type="fan-madel"
|
||||
>
|
||||
<div class="live-request-tag-key">粉丝牌</div>
|
||||
<div class="live-request-tag-value">
|
||||
{{
|
||||
settings.needWearFanMedal
|
||||
? settings.fanMedalMinLevel > 0
|
||||
? '> ' + settings.fanMedalMinLevel
|
||||
: '佩戴'
|
||||
: '无需'
|
||||
}}
|
||||
</div>
|
||||
</span>
|
||||
</Vue3Marquee>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.live-request-background {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
background-color: #0f0f0f48;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.live-request-header {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow:
|
||||
0 0 10px #ca7b7b6e,
|
||||
0 0 20px #ffffff8e,
|
||||
0 0 30px #61606086,
|
||||
0 0 40px rgba(64, 156, 179, 0.555);
|
||||
}
|
||||
|
||||
.live-request-header-count {
|
||||
color: #ffffffbd;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.live-request-divider {
|
||||
margin: 0 auto;
|
||||
margin-top: -15px;
|
||||
margin-bottom: -15px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.live-request-processing-container {
|
||||
height: 35px;
|
||||
margin: 0 10px 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.live-request-processing-empty {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: #ffffffbe;
|
||||
}
|
||||
|
||||
.live-request-processing-prefix {
|
||||
border: 2px solid rgb(231, 231, 231);
|
||||
height: 30px;
|
||||
width: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.live-request-processing-container[singing='true'] .live-request-processing-prefix {
|
||||
background-color: #75c37f;
|
||||
animation: animated-border 3s linear infinite;
|
||||
}
|
||||
|
||||
.live-request-processing-container[singing='false'] .live-request-processing-prefix {
|
||||
background-color: #c37575;
|
||||
}
|
||||
|
||||
.live-request-processing-avatar {
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
animation: rotate 20s linear infinite;
|
||||
}
|
||||
|
||||
/* 网页点歌 */
|
||||
.live-request-processing-container[from='3'] .live-request-processing-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.live-request-processing-song-name {
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.live-request-processing-name {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.n-divider__line {
|
||||
background-color: #ffffffd5;
|
||||
}
|
||||
|
||||
.live-request-content {
|
||||
background-color: #0f0f0f4f;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.marquee {
|
||||
justify-items: left;
|
||||
}
|
||||
|
||||
.live-request-list-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.live-request-list-item-song-name {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
/* 手动添加 */
|
||||
.live-request-list-item[from='0'] .live-request-list-item-name {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
color: #d2d8d6;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.live-request-list-item[from='0'] .live-request-list-item-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 弹幕点歌 */
|
||||
.live-request-list-item[from='1'] {}
|
||||
|
||||
.live-request-list-item-name {
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
color: rgba(204, 204, 204, 0.993);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.live-request-list-item-index {
|
||||
text-align: center;
|
||||
height: 18px;
|
||||
padding: 2px;
|
||||
min-width: 15px;
|
||||
border-radius: 5px;
|
||||
background-color: #0f0f0f48;
|
||||
color: rgba(204, 204, 204, 0.993);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.live-request-list-item-level {
|
||||
text-align: center;
|
||||
height: 18px;
|
||||
padding: 2px;
|
||||
min-width: 15px;
|
||||
border-radius: 5px;
|
||||
background-color: #0f0f0f48;
|
||||
color: rgba(204, 204, 204, 0.993);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.live-request-list-item-level[has-level='false'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.live-request-footer {
|
||||
margin: 0 5px 5px 5px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
background-color: #0f0f0f4f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.live-request-tag {
|
||||
display: flex;
|
||||
margin: 5px 0 5px 5px;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
background-color: #0f0f0f4f;
|
||||
padding: 4px;
|
||||
padding-right: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.live-request-tag-key {
|
||||
font-style: italic;
|
||||
color: rgb(211, 211, 211);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.live-request-tag-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.live-request-list-item-index[index='1'] {
|
||||
background-color: #ebc34c;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 6px #ebc34c;
|
||||
}
|
||||
|
||||
.live-request-list-item-index[index='2'] {
|
||||
background-color: #c0c0c0;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.live-request-list-item-index[index='3'] {
|
||||
background-color: #b87333;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@keyframes animated-border {
|
||||
0% {
|
||||
box-shadow: 0 0 0px #589580;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
607
src/views/obs/live-request/FreshRequestOBS.vue
Normal file
607
src/views/obs/live-request/FreshRequestOBS.vue
Normal file
@@ -0,0 +1,607 @@
|
||||
<script setup lang="ts">
|
||||
import { SongRequestFrom, SongRequestStatus } from '@/api/api-models'
|
||||
import { useElementSize } from '@vueuse/core'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
// Remove Vue3Marquee import if no longer needed elsewhere
|
||||
// import { Vue3Marquee } from 'vue3-marquee'
|
||||
import { NDivider, NEmpty, NBadge, NAvatar, NTag } from 'naive-ui'
|
||||
import { useLiveRequestData } from './useLiveRequestData'
|
||||
|
||||
const props = defineProps<{
|
||||
id?: number,
|
||||
active?: boolean,
|
||||
visible?: boolean,
|
||||
speedMultiplier?: number
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const currentId = computed(() => {
|
||||
return props.id ?? route.query.id
|
||||
})
|
||||
|
||||
// Read speed: prioritize prop, then query parameter, default to 1
|
||||
const speedMultiplier = computed(() => {
|
||||
if (props.speedMultiplier !== undefined && props.speedMultiplier > 0) {
|
||||
return props.speedMultiplier
|
||||
}
|
||||
const speedParam = route.query.speed
|
||||
const speed = parseFloat(speedParam?.toString() ?? '1')
|
||||
return isNaN(speed) || speed <= 0 ? 1 : speed
|
||||
})
|
||||
|
||||
const {
|
||||
songs,
|
||||
settings,
|
||||
singing,
|
||||
activeSongs,
|
||||
allowGuardTypes,
|
||||
key,
|
||||
update,
|
||||
initRTC
|
||||
} = useLiveRequestData(currentId.value?.toString() ?? '')
|
||||
|
||||
const containerRef = ref()
|
||||
const listContainerRef = ref()
|
||||
const { height, width } = useElementSize(listContainerRef)
|
||||
// const itemHeight = 55 // Remove hardcoded itemHeight
|
||||
const itemMarginBottom = 8 // 项目底部外边距
|
||||
|
||||
// Ref for the inner list wrapper to measure its height
|
||||
const songListInnerRef = ref<HTMLElement | null>(null)
|
||||
const { height: innerListHeight } = useElementSize(songListInnerRef)
|
||||
|
||||
// Calculate total content height including the margin of the last item
|
||||
const totalContentHeightWithLastMargin = computed(() => {
|
||||
const count = activeSongs.value.length
|
||||
if (count === 0 || innerListHeight.value <= 0) {
|
||||
return 0
|
||||
}
|
||||
// The measured innerListHeight includes all item heights and (count - 1) margins.
|
||||
// Add the last item's margin for the true total height.
|
||||
return innerListHeight.value + itemMarginBottom
|
||||
})
|
||||
|
||||
const isMoreThanContainer = computed(() => {
|
||||
// Compare total content height with container height
|
||||
return totalContentHeightWithLastMargin.value > height.value
|
||||
})
|
||||
|
||||
// Computed property for animation translateY value
|
||||
const animationTranslateY = computed(() => {
|
||||
if (!isMoreThanContainer.value || height.value <= 0) {
|
||||
return 0
|
||||
}
|
||||
// Target Y = container height - total content height (including last margin)
|
||||
return height.value - totalContentHeightWithLastMargin.value
|
||||
})
|
||||
const animationTranslateYCss = computed(() => `${animationTranslateY.value}px`)
|
||||
|
||||
// Computed property for animation duration, adjusted by speedMultiplier
|
||||
const animationDuration = computed(() => {
|
||||
// Calculate base duration (e.g., 1 second per song - reduced from 2)
|
||||
const baseDuration = activeSongs.value.length * 1
|
||||
// Adjust duration based on multiplier (faster speed = shorter duration)
|
||||
const adjustedDuration = baseDuration / speedMultiplier.value
|
||||
// Ensure minimum duration to prevent issues
|
||||
return Math.max(adjustedDuration, 1) // Minimum 1 second duration
|
||||
})
|
||||
const animationDurationCss = computed(() => `${animationDuration.value}s`)
|
||||
|
||||
onMounted(() => {
|
||||
update()
|
||||
initRTC()
|
||||
|
||||
window.$mitt.on('onOBSComponentUpdate', () => {
|
||||
update()
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.$mitt.off('onOBSComponentUpdate')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="fresh-request-container"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<div class="fresh-request-header">
|
||||
<h2 class="fresh-request-title">
|
||||
{{ settings.obsTitle ?? '歌曲点播' }}
|
||||
</h2>
|
||||
<span class="fresh-request-count">队列中 {{ activeSongs.length ?? 0 }} 首</span>
|
||||
</div>
|
||||
|
||||
<!-- 当前演唱区域 -->
|
||||
<div class="fresh-request-now-playing">
|
||||
<div
|
||||
class="fresh-request-now-playing-indicator"
|
||||
:class="{ 'is-playing': singing }"
|
||||
/>
|
||||
<div class="fresh-request-now-playing-content">
|
||||
<template v-if="singing">
|
||||
<div class="fresh-request-now-playing-info">
|
||||
<div
|
||||
class="fresh-request-song-title"
|
||||
:title="singing.songName"
|
||||
>
|
||||
{{ singing.songName }}
|
||||
</div>
|
||||
<div class="fresh-request-song-user">
|
||||
<img
|
||||
v-if="singing.user?.face && singing.from !== SongRequestFrom.Manual"
|
||||
class="fresh-request-user-avatar"
|
||||
:src="singing.user.face"
|
||||
referrerpolicy="no-referrer"
|
||||
>
|
||||
<span class="fresh-request-user-name">{{ singing.from === SongRequestFrom.Manual ? '主播添加' : singing.user?.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
class="fresh-request-no-song"
|
||||
>
|
||||
当前暂无演唱
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 点播列表 -->
|
||||
<div
|
||||
ref="listContainerRef"
|
||||
class="fresh-request-list-container"
|
||||
>
|
||||
<template v-if="activeSongs.length > 0">
|
||||
<!-- Removed Vue3Marquee -->
|
||||
<!-- Add a wrapper div for animation -->
|
||||
<div
|
||||
ref="songListInnerRef"
|
||||
class="fresh-request-song-list-inner"
|
||||
:class="{ animating: isMoreThanContainer }"
|
||||
>
|
||||
<div
|
||||
v-for="(song, index) in activeSongs"
|
||||
:key="song.id"
|
||||
class="fresh-request-song-item"
|
||||
>
|
||||
<div
|
||||
class="fresh-request-song-rank"
|
||||
:class="[`rank-${index + 1}`, { 'rank-top-3': index < 3 }]"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="fresh-request-song-content">
|
||||
<div
|
||||
class="fresh-request-song-name"
|
||||
:title="song.songName"
|
||||
>
|
||||
{{ song.songName }}
|
||||
</div>
|
||||
<div class="fresh-request-song-footer">
|
||||
<span
|
||||
v-if="settings.showUserName"
|
||||
class="fresh-request-song-requester"
|
||||
>
|
||||
<span class="requester-label">点歌:</span> {{ song.from === SongRequestFrom.Manual ? '主播' : song.user?.name }}
|
||||
</span>
|
||||
<span
|
||||
v-if="settings.showFanMadelInfo && (song.user?.fans_medal_level ?? 0) > 0"
|
||||
class="fresh-request-song-medal"
|
||||
>
|
||||
{{ song.user?.fans_medal_name }} {{ song.user?.fans_medal_level }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End animation wrapper -->
|
||||
</template>
|
||||
<NEmpty
|
||||
v-else
|
||||
description="队列空空如也~"
|
||||
class="fresh-request-empty"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 点播要求信息 -->
|
||||
<div
|
||||
v-if="settings.showRequireInfo"
|
||||
class="fresh-request-info"
|
||||
>
|
||||
<div class="fresh-request-info-tags">
|
||||
<NTag
|
||||
class="fresh-request-info-tag"
|
||||
:bordered="false"
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
前缀: {{ settings.orderPrefix }}
|
||||
</NTag>
|
||||
<NTag
|
||||
class="fresh-request-info-tag"
|
||||
:bordered="false"
|
||||
type="info"
|
||||
size="small"
|
||||
>
|
||||
允许: {{ settings.allowAllDanmaku ? '所有弹幕' : allowGuardTypes.length > 0 ? allowGuardTypes.join('/') : '无' }}
|
||||
</NTag>
|
||||
<NTag
|
||||
class="fresh-request-info-tag"
|
||||
:bordered="false"
|
||||
type="success"
|
||||
size="small"
|
||||
>
|
||||
SC点歌: {{ settings.allowSC ? `≥ ¥${settings.scMinPrice}` : '否' }}
|
||||
</NTag>
|
||||
<NTag
|
||||
class="fresh-request-info-tag"
|
||||
:bordered="false"
|
||||
type="warning"
|
||||
size="small"
|
||||
>
|
||||
粉丝牌: {{ settings.needWearFanMedal ? (settings.fanMedalMinLevel > 0 ? `≥ ${settings.fanMedalMinLevel}级` : '佩戴') : '无需' }}
|
||||
</NTag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 基础样式与容器 */
|
||||
.fresh-request-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 150px; /* 增加最小高度 */
|
||||
min-width: 250px; /* 增加最小宽度 */
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 245, 250, 0.85) 100%);
|
||||
border-radius: 16px; /* 更大的圆角 */
|
||||
color: #333;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; /* 优先使用中文字体 */
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* 更柔和的阴影 */
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05); /* 添加细边框 */
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.fresh-request-header {
|
||||
padding: 10px 16px; /* 调整内边距 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(255, 255, 255, 0.6); /* 更透明的背景 */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* 更细的边框 */
|
||||
flex-shrink: 0; /* 防止头部被压缩 */
|
||||
}
|
||||
|
||||
.fresh-request-title {
|
||||
margin: 0;
|
||||
font-size: 16px; /* 调整字体大小 */
|
||||
font-weight: 600;
|
||||
color: #1e293b; /* 深蓝灰色 */
|
||||
}
|
||||
|
||||
.fresh-request-count {
|
||||
font-size: 12px; /* 调整字体大小 */
|
||||
color: #475569; /* 蓝灰色 */
|
||||
background-color: rgba(226, 232, 240, 0.7); /* 半透明背景 */
|
||||
padding: 4px 10px; /* 调整内边距 */
|
||||
border-radius: 16px; /* 全圆角 */
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 当前演唱区域 */
|
||||
.fresh-request-now-playing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px; /* 增加内边距 */
|
||||
background-color: rgba(255, 255, 255, 0.5); /* 更透明 */
|
||||
margin: 10px 12px; /* 调整外边距 */
|
||||
border-radius: 12px; /* 调整圆角 */
|
||||
gap: 10px; /* 调整间距 */
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
flex-shrink: 0; /* 防止被压缩 */
|
||||
transition: all 0.3s ease; /* Add transition for smoother changes */
|
||||
}
|
||||
|
||||
/* Make "Now Playing" more prominent when singing */
|
||||
.fresh-request-now-playing:has(.is-playing) {
|
||||
background-color: rgba(236, 253, 245, 0.9); /* Lighter green background */
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.fresh-request-now-playing-indicator {
|
||||
width: 8px; /* 缩小尺寸 */
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #cbd5e1; /* 默认灰色 */
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.fresh-request-now-playing-indicator.is-playing {
|
||||
background-color: #10b981; /* 绿色 */
|
||||
/* 替换为更柔和的呼吸动画 */
|
||||
animation: breathe 1.8s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* Make title bolder/larger when playing */
|
||||
.fresh-request-now-playing:has(.is-playing) .fresh-request-song-title {
|
||||
font-weight: 700;
|
||||
font-size: 16px; /* Slightly larger font */
|
||||
color: #065f46; /* Darker green */
|
||||
}
|
||||
|
||||
/* Optional: slightly emphasize user name when playing */
|
||||
.fresh-request-now-playing:has(.is-playing) .fresh-request-song-user {
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 3px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.fresh-request-now-playing-content {
|
||||
flex: 1;
|
||||
min-width: 0; /* 防止内容溢出 */
|
||||
}
|
||||
|
||||
.fresh-request-now-playing-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px; /* 调整信息间距 */
|
||||
}
|
||||
|
||||
.fresh-request-song-title {
|
||||
font-size: 15px; /* 调整字体大小 */
|
||||
font-weight: 600;
|
||||
color: #0f172a; /* 更深的颜色 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fresh-request-song-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #64748b; /* 保持灰色 */
|
||||
gap: 5px; /* 调整头像和名字间距 */
|
||||
}
|
||||
|
||||
.fresh-request-user-avatar {
|
||||
width: 18px; /* 稍大一点的头像 */
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05); /* 头像边框 */
|
||||
}
|
||||
|
||||
.fresh-request-user-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fresh-request-no-song {
|
||||
font-size: 13px; /* 调整字体大小 */
|
||||
font-style: normal; /* 去掉斜体 */
|
||||
color: #94a3b8; /* 浅灰色 */
|
||||
}
|
||||
|
||||
/* 歌曲列表 */
|
||||
.fresh-request-list-container {
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
overflow: hidden;
|
||||
padding: 0 12px; /* 调整左右内边距 */
|
||||
margin-bottom: 8px;
|
||||
position: relative; /* 为空状态居中 */
|
||||
}
|
||||
|
||||
.fresh-request-song-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px; /* 列表项间距 */
|
||||
background-color: rgba(255, 255, 255, 0.7); /* 半透明背景 */
|
||||
border-radius: 10px; /* 调整圆角 */
|
||||
padding: 8px 10px; /* 调整内边距 */
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04); /* 更细微的阴影 */
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.fresh-request-song-item:hover {
|
||||
background-color: rgba(248, 250, 252, 0.9); /* 悬停背景色 */
|
||||
transform: translateY(-1px); /* 轻微上移 */
|
||||
}
|
||||
|
||||
/* 前三名条目特殊样式 */
|
||||
.fresh-request-song-item:has(.rank-1) {
|
||||
border-left: 3px solid #fbbf24; /* 金色左边框 */
|
||||
background-color: rgba(252, 237, 174, 0.15); /* 淡淡的金色背景 */
|
||||
}
|
||||
|
||||
.fresh-request-song-item:has(.rank-2) {
|
||||
border-left: 3px solid #cbd5e1; /* 银色左边框 */
|
||||
background-color: rgba(203, 213, 225, 0.25); /* 调整银色背景透明度，使其更明显 */
|
||||
}
|
||||
|
||||
.fresh-request-song-item:has(.rank-3) {
|
||||
border-left: 3px solid #d97706; /* 铜色左边框 */
|
||||
background-color: rgba(251, 211, 141, 0.15); /* 淡淡的铜色背景 */
|
||||
}
|
||||
|
||||
.fresh-request-song-rank {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px; /* 调整尺寸 */
|
||||
height: 22px;
|
||||
border-radius: 50%; /* 圆形排名 */
|
||||
background-color: #f1f5f9; /* 默认浅灰背景 */
|
||||
color: #64748b; /* 默认字体颜色 */
|
||||
font-weight: 600;
|
||||
font-size: 12px; /* 调整字体大小 */
|
||||
margin-right: 10px; /* 调整右边距 */
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 前三名特殊样式 */
|
||||
.fresh-request-song-rank.rank-top-3 {
|
||||
color: #ffffff; /* 白色字体 */
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
}
|
||||
.fresh-request-song-rank.rank-1 {
|
||||
background: linear-gradient(135deg, #fcd34d, #fbbf24); /* 金色渐变 */
|
||||
box-shadow: 0 1px 3px rgba(180, 83, 9, 0.3);
|
||||
}
|
||||
.fresh-request-song-rank.rank-2 {
|
||||
background: linear-gradient(135deg, #e2e8f0, #cbd5e1); /* 银色渐变 */
|
||||
color: #334155; /* 深色字体 */
|
||||
box-shadow: 0 1px 3px rgba(100, 116, 139, 0.2);
|
||||
}
|
||||
.fresh-request-song-rank.rank-3 {
|
||||
background: linear-gradient(135deg, #f9a825, #d97706); /* 铜色渐变 */
|
||||
box-shadow: 0 1px 3px rgba(146, 64, 14, 0.3);
|
||||
}
|
||||
|
||||
.fresh-request-song-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* 垂直居中 */
|
||||
overflow: hidden;
|
||||
gap: 3px; /* 内容上下间距 */
|
||||
min-width: 0; /* 确保内容区能正确收缩 */
|
||||
}
|
||||
|
||||
.fresh-request-song-name {
|
||||
font-size: 14px; /* 调整字体大小 */
|
||||
font-weight: 500;
|
||||
color: #334155; /* 深蓝灰色 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fresh-request-song-footer {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
font-size: 11px; /* 缩小字体 */
|
||||
color: #64748b; /* 灰色 */
|
||||
gap: 6px; /* 调整元素间距 */
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
}
|
||||
|
||||
.fresh-request-song-requester {
|
||||
display: inline-flex; /* 使内部元素对齐 */
|
||||
align-items: center;
|
||||
}
|
||||
.requester-label {
|
||||
opacity: 0.7; /* 标签稍透明 */
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.fresh-request-song-medal {
|
||||
background-color: rgba(226, 232, 240, 0.6); /* 更淡的背景 */
|
||||
padding: 1px 5px; /* 调整内边距 */
|
||||
border-radius: 4px;
|
||||
font-size: 10px; /* 保持小字体 */
|
||||
font-weight: 500;
|
||||
color: #475569; /* 调整颜色 */
|
||||
border: 1px solid rgba(0, 0, 0, 0.05); /* 添加细边框 */
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.fresh-request-empty {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #a1a1aa; /* 更柔和的灰色 */
|
||||
font-size: 13px;
|
||||
position: absolute; /* 覆盖在列表容器上 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none; /* 不阻挡下方元素 */
|
||||
}
|
||||
|
||||
/* 点播要求信息 */
|
||||
.fresh-request-info {
|
||||
padding: 6px 12px; /* 调整内边距 */
|
||||
background-color: rgba(248, 250, 252, 0.8); /* 半透明背景 */
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06); /* 更细的边框 */
|
||||
flex-shrink: 0; /* 防止被压缩 */
|
||||
}
|
||||
|
||||
.fresh-request-info-tags {
|
||||
display: flex;
|
||||
gap: 6px; /* 调整标签间距 */
|
||||
}
|
||||
|
||||
.fresh-request-info-tag {
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 给标签加点阴影 */
|
||||
}
|
||||
|
||||
/* 滚动条样式 (可选，美化) */
|
||||
.fresh-request-list-container::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.fresh-request-list-container::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.fresh-request-list-container::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* New styles for CSS animation */
|
||||
@keyframes vertical-ping-pong {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
/* Use the computed CSS variable for the target Y position */
|
||||
transform: translateY(v-bind(animationTranslateYCss));
|
||||
}
|
||||
}
|
||||
|
||||
.fresh-request-song-list-inner {
|
||||
/* Prevent interaction during animation unless hovered */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fresh-request-song-list-inner.animating {
|
||||
animation-name: vertical-ping-pong;
|
||||
animation-duration: v-bind(animationDurationCss);
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate; /* This makes it go back and forth */
|
||||
pointer-events: auto; /* Allow hover effect */
|
||||
}
|
||||
|
||||
/* Pause animation on hover */
|
||||
.fresh-request-song-list-inner.animating:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
</style>
|
||||
126
src/views/obs/live-request/useLiveRequestData.ts
Normal file
126
src/views/obs/live-request/useLiveRequestData.ts
Normal file
@@ -0,0 +1,126 @@
|
||||
import {
|
||||
QueueSortType,
|
||||
Setting_LiveRequest,
|
||||
SongRequestFrom,
|
||||
SongRequestInfo,
|
||||
SongRequestStatus,
|
||||
} from '@/api/api-models'
|
||||
import { QueryGetAPI } from '@/api/query'
|
||||
import { SONG_REQUEST_API_URL } from '@/data/constants'
|
||||
import { computed, ref, Ref } from 'vue'
|
||||
import { List } from 'linqts'
|
||||
import { useWebRTC } from '@/store/useRTC'
|
||||
|
||||
export function useLiveRequestData(currentId: string) {
|
||||
const rtc = ref<any>(null)
|
||||
const originSongs = ref<SongRequestInfo[]>([])
|
||||
const settings = ref<Setting_LiveRequest>({} as Setting_LiveRequest)
|
||||
const key = ref(Date.now())
|
||||
|
||||
// 计算属性
|
||||
const songs = computed(() => {
|
||||
let result = new List(originSongs.value)
|
||||
switch (settings.value.sortType) {
|
||||
case QueueSortType.TimeFirst: {
|
||||
result = result.ThenBy((q) => q.createAt)
|
||||
break
|
||||
}
|
||||
case QueueSortType.GuardFirst: {
|
||||
result = result
|
||||
.OrderBy((q) => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
|
||||
.ThenBy((q) => q.createAt)
|
||||
break
|
||||
}
|
||||
case QueueSortType.PaymentFist: {
|
||||
result = result.OrderByDescending((q) => q.price ?? 0).ThenBy((q) => q.createAt)
|
||||
break
|
||||
}
|
||||
case QueueSortType.FansMedalFirst: {
|
||||
result = result.OrderByDescending((q) => q.user?.fans_medal_level ?? 0).ThenBy((q) => q.createAt)
|
||||
break
|
||||
}
|
||||
}
|
||||
if (settings.value.isReverse) {
|
||||
return result.Reverse().ToArray()
|
||||
} else {
|
||||
return result.ToArray()
|
||||
}
|
||||
})
|
||||
|
||||
const singing = computed(() => {
|
||||
return songs.value.find((s) => s.status == SongRequestStatus.Singing)
|
||||
})
|
||||
|
||||
const activeSongs = computed(() => {
|
||||
return songs.value.filter((s) => s.status == SongRequestStatus.Waiting)
|
||||
})
|
||||
|
||||
const allowGuardTypes = computed(() => {
|
||||
const types = []
|
||||
if (settings.value.needTidu) {
|
||||
types.push('提督')
|
||||
}
|
||||
if (settings.value.needZongdu) {
|
||||
types.push('总督')
|
||||
}
|
||||
if (settings.value.needJianzhang) {
|
||||
types.push('舰长')
|
||||
}
|
||||
return types
|
||||
})
|
||||
|
||||
// 数据获取方法
|
||||
async function get() {
|
||||
try {
|
||||
const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_LiveRequest }>(
|
||||
SONG_REQUEST_API_URL + 'get-active-and-settings',
|
||||
{
|
||||
id: currentId,
|
||||
},
|
||||
)
|
||||
if (data.code == 200) {
|
||||
return data.data
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
return {
|
||||
songs: [],
|
||||
setting: {} as Setting_LiveRequest,
|
||||
} as { songs: SongRequestInfo[]; setting: Setting_LiveRequest }
|
||||
}
|
||||
|
||||
async function update() {
|
||||
const r = await get()
|
||||
if (r) {
|
||||
const isCountChange = originSongs.value.length != r.songs.length
|
||||
originSongs.value = r.songs.sort((a, b) => {
|
||||
return b.createAt - a.createAt
|
||||
})
|
||||
settings.value = r.setting
|
||||
if (isCountChange) {
|
||||
key.value = Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RTC初始化
|
||||
async function initRTC() {
|
||||
rtc.value = await useWebRTC().Init('slave')
|
||||
// 接收点播结果消息
|
||||
rtc.value.on('function.live-request.add', () => update())
|
||||
}
|
||||
|
||||
return {
|
||||
originSongs,
|
||||
songs,
|
||||
settings,
|
||||
singing,
|
||||
activeSongs,
|
||||
allowGuardTypes,
|
||||
key,
|
||||
get,
|
||||
update,
|
||||
initRTC
|
||||
}
|
||||
}
|
||||
@@ -112,6 +112,8 @@ const isReverse = useStorage('SongRequest.Settings.Reverse', false)
|
||||
|
||||
const isLoading = ref(false)
|
||||
const showOBSModal = ref(false)
|
||||
const obsStyleType = ref<'classic' | 'fresh'>('classic')
|
||||
const obsScrollSpeedMultiplierRef = ref(1)
|
||||
|
||||
const settings = computed({
|
||||
get: () => {
|
||||
@@ -1619,12 +1621,54 @@ onUnmounted(() => {
|
||||
>
|
||||
将等待队列以及结果显示在OBS中
|
||||
</NAlert>
|
||||
<NDivider> 浏览 </NDivider>
|
||||
|
||||
<NDivider>样式与速度</NDivider>
|
||||
<NSpace align="center">
|
||||
<NRadioGroup
|
||||
v-model:value="obsStyleType"
|
||||
name="obsStyle"
|
||||
>
|
||||
<NSpace>
|
||||
<NRadioButton value="classic">
|
||||
经典黑色风格
|
||||
</NRadioButton>
|
||||
<NRadioButton value="fresh">
|
||||
清新明亮风格
|
||||
</NRadioButton>
|
||||
</NSpace>
|
||||
</NRadioGroup>
|
||||
<NInputGroup style="width: 200px">
|
||||
<NInputGroupLabel>滚动速度倍率</NInputGroupLabel>
|
||||
<NInputNumber
|
||||
v-model:value="obsScrollSpeedMultiplierRef"
|
||||
:min="0.5"
|
||||
:max="5"
|
||||
:step="0.1"
|
||||
placeholder="1"
|
||||
/>
|
||||
</NInputGroup>
|
||||
<NTooltip>
|
||||
<template #trigger>
|
||||
<NIcon :component="Info24Filled" />
|
||||
</template>
|
||||
数值越大滚动越快 (0.5 ~ 5)
|
||||
</NTooltip>
|
||||
</NSpace>
|
||||
|
||||
<NDivider>预览</NDivider>
|
||||
<div style="height: 500px; width: 280px; position: relative; margin: 0 auto">
|
||||
<LiveRequestOBS :id="accountInfo?.id" />
|
||||
<LiveRequestOBS
|
||||
:id="accountInfo?.id"
|
||||
:key="`${accountInfo?.id}-${obsStyleType}-${obsScrollSpeedMultiplierRef}`"
|
||||
:style="obsStyleType"
|
||||
:speed-multiplier="obsScrollSpeedMultiplierRef"
|
||||
/>
|
||||
</div>
|
||||
<br>
|
||||
<NInput :value="`${CURRENT_HOST}obs/live-request?id=` + accountInfo?.id" />
|
||||
<NInput
|
||||
:value="`${CURRENT_HOST}obs/live-request?id=${accountInfo?.id ?? 0}&style=${obsStyleType}&speed=${obsScrollSpeedMultiplierRef}`"
|
||||
readonly
|
||||
/>
|
||||
<NDivider />
|
||||
<NCollapse>
|
||||
<NCollapseItem title="使用说明">
|
||||
@@ -1632,7 +1676,8 @@ onUnmounted(() => {
|
||||
<NLi>在 OBS 来源中添加源, 选择 浏览器</NLi>
|
||||
<NLi>在 URL 栏填入上方链接</NLi>
|
||||
<NLi>根据自己的需要调整宽度和高度 (这里是宽 280px 高 500px)</NLi>
|
||||
<NLi>完事</NLi>
|
||||
<NLi>样式可选"经典黑色风格"或"清新明亮风格"</NLi>
|
||||
<NLi>使用URL中的style参数可以切换不同样式</NLi>
|
||||
</NUl>
|
||||
</NCollapseItem>
|
||||
</NCollapse>
|
||||
|
||||
Reference in New Issue
Block a user