From febfa132c8c3dad9f04cb4a88ab99ba24e237c64 Mon Sep 17 00:00:00 2001 From: Megghy Date: Sun, 20 Apr 2025 04:45:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=20LiveRequestOBS=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=92=8C=E6=BB=9A=E5=8A=A8=E9=80=9F=E5=BA=A6?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复了原有OBS组件样式背景不透明的问题 - 移除了不必要的导入和逻辑，简化了组件结构。 - 添加了样式选择功能，支持经典和清新两种风格。 - 增加了滚动速度倍率设置，提升用户体验。 - 更新了 LiveRequest 组件以支持新功能，确保样式和速度参数在 OBS 中生效。 --- src/views/OBSLayout.vue | 6 + src/views/obs/LiveRequestOBS.vue | 565 +--------------- .../obs/live-request/ClassicRequestOBS.vue | 469 ++++++++++++++ .../obs/live-request/FreshRequestOBS.vue | 607 ++++++++++++++++++ .../obs/live-request/useLiveRequestData.ts | 126 ++++ src/views/open_live/LiveRequest.vue | 53 +- 6 files changed, 1281 insertions(+), 545 deletions(-) create mode 100644 src/views/obs/live-request/ClassicRequestOBS.vue create mode 100644 src/views/obs/live-request/FreshRequestOBS.vue create mode 100644 src/views/obs/live-request/useLiveRequestData.ts diff --git a/src/views/OBSLayout.vue b/src/views/OBSLayout.vue index 97ae30b..0e2440e 100644 --- a/src/views/OBSLayout.vue +++ b/src/views/OBSLayout.vue @@ -46,3 +46,9 @@ onUnmounted(() => { + + diff --git a/src/views/obs/LiveRequestOBS.vue b/src/views/obs/LiveRequestOBS.vue index 17db765..b46109c 100644 --- a/src/views/obs/LiveRequestOBS.vue +++ b/src/views/obs/LiveRequestOBS.vue @@ -1,559 +1,42 @@ - - + /> + + \ No newline at end of file diff --git a/src/views/obs/live-request/ClassicRequestOBS.vue b/src/views/obs/live-request/ClassicRequestOBS.vue new file mode 100644 index 0000000..96dbaab --- /dev/null +++ b/src/views/obs/live-request/ClassicRequestOBS.vue @@ -0,0 +1,469 @@ + + + + + \ No newline at end of file diff --git a/src/views/obs/live-request/FreshRequestOBS.vue b/src/views/obs/live-request/FreshRequestOBS.vue new file mode 100644 index 0000000..f2200ca --- /dev/null +++ b/src/views/obs/live-request/FreshRequestOBS.vue @@ -0,0 +1,607 @@ + + + + + \ No newline at end of file diff --git a/src/views/obs/live-request/useLiveRequestData.ts b/src/views/obs/live-request/useLiveRequestData.ts new file mode 100644 index 0000000..ea0f997 --- /dev/null +++ b/src/views/obs/live-request/useLiveRequestData.ts @@ -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(null) + const originSongs = ref([]) + const settings = ref({} 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 + } +} \ No newline at end of file diff --git a/src/views/open_live/LiveRequest.vue b/src/views/open_live/LiveRequest.vue index f8bd5a4..4d24e6d 100644 --- a/src/views/open_live/LiveRequest.vue +++ b/src/views/open_live/LiveRequest.vue @@ -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中 - 浏览 + + 样式与速度 + + + + + 经典黑色风格 + + + 清新明亮风格 + + + + + 滚动速度倍率 + + + + + 数值越大滚动越快 (0.5 ~ 5) + + + + 预览
- +

- + @@ -1632,7 +1676,8 @@ onUnmounted(() => { 在 OBS 来源中添加源, 选择 浏览器 在 URL 栏填入上方链接 根据自己的需要调整宽度和高度 (这里是宽 280px 高 500px) - 完事 + 样式可选"经典黑色风格"或"清新明亮风格" + 使用URL中的style参数可以切换不同样式