diff --git a/src/views/obs/QueueOBS.vue b/src/views/obs/QueueOBS.vue index c9eb868..c8a3b7c 100644 --- a/src/views/obs/QueueOBS.vue +++ b/src/views/obs/QueueOBS.vue @@ -8,20 +8,18 @@ import { } from '@/api/api-models' import { QueryGetAPI } from '@/api/query' import { QUEUE_API_URL } from '@/data/constants' -import { MittType } from '@/mitt' import { useWebRTC } from '@/store/useRTC' import { useElementSize } from '@vueuse/core' import { List } from 'linqts' -import mitt from 'mitt' import { NDivider, NEmpty, useMessage } from 'naive-ui' import { computed, onMounted, onUnmounted, ref } from 'vue' import { useRoute } from 'vue-router' -import { Vue3Marquee } from 'vue3-marquee' const props = defineProps<{ id?: number, active?: boolean, visible?: boolean, + speedMultiplier?: number, }>() const message = useMessage() @@ -31,6 +29,15 @@ const currentId = computed(() => { }) const rtc = await useWebRTC().Init('slave') +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 listContainerRef = ref() const footerRef = ref() const footerListRef = ref() @@ -39,7 +46,17 @@ const footerSize = useElementSize(footerRef) const footerListSize = useElementSize(footerListRef) const itemHeight = 40 -const key = ref(Date.now()) +const queueListInnerRef = ref(null) +const { height: innerListHeight } = useElementSize(queueListInnerRef) + +const itemMarginBottom = 0 +const totalContentHeightWithLastMargin = computed(() => { + const count = activeItems.value.length + if (count === 0 || innerListHeight.value <= 0) { + return 0 + } + return innerListHeight.value + itemMarginBottom +}) const queue = ref([]) const settings = ref({} as Setting_Queue) @@ -79,6 +96,9 @@ const activeItems = computed(() => { list = list.OrderByDescending((q) => (q.status == QueueStatus.Progressing ? 1 : 0)) return list.ToArray() }) +const itemNum = computed(() => { + return queue.value.length +}) async function get() { try { @@ -94,9 +114,26 @@ async function get() { } catch (err) { } return {} as { queue: ResponseQueueModel[]; setting: Setting_Queue } } + const isMoreThanContainer = computed(() => { - return queue.value.length * itemHeight > height.value + return totalContentHeightWithLastMargin.value > height.value }) + +const animationTranslateY = computed(() => { + if (!isMoreThanContainer.value || height.value <= 0) { + return 0 + } + return height.value - totalContentHeightWithLastMargin.value +}) +const animationTranslateYCss = computed(() => `${animationTranslateY.value}px`) + +const animationDuration = computed(() => { + const baseDuration = activeItems.value.length * 1 + const adjustedDuration = baseDuration / speedMultiplier.value + return Math.max(adjustedDuration, 1) +}) +const animationDurationCss = computed(() => `${animationDuration.value}s`) + const allowGuardTypes = computed(() => { const types = [] if (settings.value.needTidu) { @@ -174,13 +211,11 @@ onUnmounted(() => { class="queue-content" >
{ ref="footerRef" class="queue-footer" > - - -
关键词
-
- {{ settings.keyword }} +