fix(stage-ui, ui-transitions): typecheck (#46)

* try fix type errors in Stage.vue

* remove index

* make index optional

* setMotion also need to make index optional

* fix(ui-transitions): typecheck

---------

Co-authored-by: LemonNeko <chheese048@gmail.com>
This commit is contained in:
junkwarrior87
2025-03-07 17:33:49 +08:00
committed by GitHub
co-authored by LemonNeko
parent 69b45aec00
commit ff807ffa51
9 changed files with 36 additions and 36 deletions
@@ -184,7 +184,7 @@ async function initLive2DPixiStage() {
loadingLive2dModel.value = false
}
async function setMotion(motionName: string, index: number) {
async function setMotion(motionName: string, index?: number) {
await model.value!.motion(motionName, index, MotionPriority.FORCE)
}
@@ -128,7 +128,7 @@ const emotionsQueue = useQueue<Emotion>({
await vrmViewerRef.value!.setExpression(value)
}
else if (stageView.value === '2d') {
live2dCurrentMotion.value = EMOTION_EmotionMotionName_value[ctx.data]
live2dCurrentMotion.value = { group: EMOTION_EmotionMotionName_value[ctx.data] }
}
},
],
@@ -173,7 +173,7 @@ onBeforeMessageComposed(async () => {
})
onBeforeSend(async () => {
live2dCurrentMotion.value = EmotionThinkMotionName
live2dCurrentMotion.value = { group: EmotionThinkMotionName }
})
onTokenLiteral(async (literal) => {
@@ -212,13 +212,13 @@ onMounted(() => {
const extendedWindow = window as Window & typeof globalThis & { electron?: ElectronAPI }
extendedWindow.electron?.ipcRenderer.on('before-hide', () => {
live2dCurrentMotion.value = EmotionAngryMotionName
live2dCurrentMotion.value = { group: EmotionAngryMotionName }
})
extendedWindow.electron?.ipcRenderer.on('after-show', () => {
live2dCurrentMotion.value = EmotionHappyMotionName
live2dCurrentMotion.value = { group: EmotionHappyMotionName }
})
extendedWindow.electron?.ipcRenderer.on('before-quit', () => {
live2dCurrentMotion.value = EmotionThinkMotionName
live2dCurrentMotion.value = { group: EmotionThinkMotionName }
})
})
+1 -1
View File
@@ -29,7 +29,7 @@ export const useSettings = defineStore('settings', () => {
const live2dLoadSource = ref<'file' | 'url'>('url')
const loadingLive2dModel = ref(false) // if set to true, the model will be loaded
const live2dPosition = useLocalStorage('settings/live2d/position', { x: 0, y: 0 }) // position is relative to the center of the screen
const live2dCurrentMotion = ref<{ group: string, index: number }>({ group: 'Idle', index: 0 })
const live2dCurrentMotion = ref<{ group: string, index?: number }>({ group: 'Idle', index: 0 })
const availableLive2dMotions = ref<{ motionName: string, motionIndex: number, fileName: string }[]>([])
const live2dMotionMap = useLocalStorage<Record<string, string>>('settings/live2d/motion-map', {})
@@ -10,11 +10,11 @@ const props = defineProps<{
}
}>()
const colors = computed(() => props.stageTransition.colors || ['#eee', '#ebcb8b', '#c56370', '#3f3b52'])
const colors = computed(() => props.stageTransition?.colors || ['#eee', '#ebcb8b', '#c56370', '#3f3b52'])
onMounted(() => {
document.documentElement.style.setProperty('--circle-expansion-delay', `${props.stageTransition.delay || 0}s`)
document.documentElement.style.setProperty('--circle-expansion-duration', `${props.stageTransition.duration || 0.4}s`)
document.documentElement.style.setProperty('--circle-expansion-delay', `${props.stageTransition?.delay || 0}s`)
document.documentElement.style.setProperty('--circle-expansion-duration', `${props.stageTransition?.duration || 0.4}s`)
colors.value.forEach((color, index) => {
document.documentElement.style.setProperty(`--circle-expansion-color-${index + 1}`, color)
})
@@ -22,7 +22,7 @@ onMounted(() => {
</script>
<template>
<div class="circle-expansion-transition" :style="{ zIndex: stageTransition.zIndex || 100 }">
<div class="circle-expansion-transition" :style="{ zIndex: stageTransition?.zIndex || 100 }">
<div v-for="(_, index) in colors" :key="index" />
</div>
</template>
@@ -16,21 +16,21 @@ const props = defineProps <{
}
}>()
const direction = computed(() => props.stageTransition.direction || 'up')
const direction = computed(() => props.stageTransition?.direction || 'up')
const directionClass = computed(() => `fantasy-fall-${direction.value}`)
onMounted(() => {
document.documentElement.style.setProperty('--fantasy-fall-color', props.stageTransition.primaryColor || '#eee')
document.documentElement.style.setProperty('--fantasy-fall-duration', `${props.stageTransition.duration || 0.6}s`)
document.documentElement.style.setProperty('--fantasy-fall-delay', `${props.stageTransition.delay || 0}s`)
document.documentElement.style.setProperty('--fantasy-fall-radius-sm', `${props.stageTransition.borderRadius?.sm || '14rem'}`)
document.documentElement.style.setProperty('--fantasy-fall-radius-md', `${props.stageTransition.borderRadius?.md || '14rem'}`)
document.documentElement.style.setProperty('--fantasy-fall-radius-lg', `${props.stageTransition.borderRadius?.lg || '50%'}`)
document.documentElement.style.setProperty('--fantasy-fall-color', props.stageTransition?.primaryColor || '#eee')
document.documentElement.style.setProperty('--fantasy-fall-duration', `${props.stageTransition?.duration || 0.6}s`)
document.documentElement.style.setProperty('--fantasy-fall-delay', `${props.stageTransition?.delay || 0}s`)
document.documentElement.style.setProperty('--fantasy-fall-radius-sm', `${props.stageTransition?.borderRadius?.sm || '14rem'}`)
document.documentElement.style.setProperty('--fantasy-fall-radius-md', `${props.stageTransition?.borderRadius?.md || '14rem'}`)
document.documentElement.style.setProperty('--fantasy-fall-radius-lg', `${props.stageTransition?.borderRadius?.lg || '50%'}`)
})
</script>
<template>
<div class="fantasy-fall-transition" :class="directionClass" :style="{ zIndex: stageTransition.zIndex || 100 }" />
<div class="fantasy-fall-transition" :class="directionClass" :style="{ zIndex: stageTransition?.zIndex ?? 100 }" />
</template>
<style scoped>
@@ -10,8 +10,8 @@ const props = defineProps<{
}>()
const stageTransition = computed(() => props.stageTransition)
const overlayColor1 = computed(() => stageTransition.value.primaryColor || '#666')
const overlayColor2 = computed(() => stageTransition.value.secondaryColor || '#ccc')
const overlayColor1 = computed(() => stageTransition.value?.primaryColor || '#666')
const overlayColor2 = computed(() => stageTransition.value?.secondaryColor || '#ccc')
onMounted(() => {
document.documentElement.style.setProperty('--stage-transition-4-overlay-color-1', overlayColor1.value)
@@ -20,7 +20,7 @@ onMounted(() => {
</script>
<template>
<div class="stage-transition-4" :style="{ zIndex: stageTransition.zIndex || 100 }">
<div class="stage-transition-4" :style="{ zIndex: stageTransition?.zIndex ?? 100 }">
<div class="stage-transition-4__block" />
<div class="stage-transition-4__block" />
<div class="stage-transition-4__block" />
@@ -16,18 +16,18 @@ const props = defineProps<{
onMounted(() => {
// Set CSS variables for all three circles
document.documentElement.style.setProperty('--rectangle-rotate-1-color', props.stageTransition.primaryColor || '#ebcb8b')
document.documentElement.style.setProperty('--rectangle-rotate-2-color', props.stageTransition.secondaryColor || '#c56370')
document.documentElement.style.setProperty('--rectangle-rotate-3-color', props.stageTransition.tertiaryColor || '#43445b')
document.documentElement.style.setProperty('--rectangle-rotate-duration', `${props.stageTransition.duration || 0.6}s`)
document.documentElement.style.setProperty('--rectangle-rotate-delay', `${props.stageTransition.delay || 0}s`)
document.documentElement.style.setProperty('--rectangle-rotate-stagger', `${props.stageTransition.staggerDelay || 0.1}s`)
document.documentElement.style.setProperty('--rectangle-rotate-rotation', `${props.stageTransition.rotation || 270}deg`)
document.documentElement.style.setProperty('--rectangle-rotate-1-color', props.stageTransition?.primaryColor || '#ebcb8b')
document.documentElement.style.setProperty('--rectangle-rotate-2-color', props.stageTransition?.secondaryColor || '#c56370')
document.documentElement.style.setProperty('--rectangle-rotate-3-color', props.stageTransition?.tertiaryColor || '#43445b')
document.documentElement.style.setProperty('--rectangle-rotate-duration', `${props.stageTransition?.duration || 0.6}s`)
document.documentElement.style.setProperty('--rectangle-rotate-delay', `${props.stageTransition?.delay || 0}s`)
document.documentElement.style.setProperty('--rectangle-rotate-stagger', `${props.stageTransition?.staggerDelay || 0.1}s`)
document.documentElement.style.setProperty('--rectangle-rotate-rotation', `${props.stageTransition?.rotation || 270}deg`)
})
</script>
<template>
<div class="rectangle-rotate-transition" :style="{ zIndex: stageTransition.zIndex || 100 }">
<div class="rectangle-rotate-transition" :style="{ zIndex: stageTransition?.zIndex ?? 100 }">
<!-- First rectangle (top-left) -->
<div class="rectangle rectangle-rotate-1">
<div />
@@ -10,8 +10,8 @@ const props = defineProps<{
}>()
const stageTransition = computed(() => props.stageTransition)
const overlayColor1 = computed(() => stageTransition.value.primaryColor || '#666')
const overlayColor2 = computed(() => stageTransition.value.secondaryColor || '#ccc')
const overlayColor1 = computed(() => stageTransition.value?.primaryColor || '#666')
const overlayColor2 = computed(() => stageTransition.value?.secondaryColor || '#ccc')
watch([stageTransition, overlayColor1, overlayColor2], () => {
document.documentElement.style.setProperty('--stage-transition-1-overlay-color-1', overlayColor1.value)
@@ -25,7 +25,7 @@ onMounted(() => {
</script>
<template>
<div class="stage-transition-1" :style="{ zIndex: stageTransition.zIndex || 100 }" />
<div class="stage-transition-1" :style="{ zIndex: stageTransition?.zIndex ?? 100 }" />
</template>
<style scoped>
@@ -10,8 +10,8 @@ const props = defineProps<{
}>()
const stageTransition = computed(() => props.stageTransition)
const overlayColor1 = computed(() => stageTransition.value.primaryColor || '#666')
const overlayColor2 = computed(() => stageTransition.value.secondaryColor || '#ccc')
const overlayColor1 = computed(() => stageTransition.value?.primaryColor ?? '#666')
const overlayColor2 = computed(() => stageTransition.value?.secondaryColor ?? '#ccc')
onMounted(() => {
document.documentElement.style.setProperty('--stage-transition-2-overlay-color-1', overlayColor1.value)
@@ -20,7 +20,7 @@ onMounted(() => {
</script>
<template>
<div class="stage-transition-2" :style="{ zIndex: stageTransition.zIndex || 100 }" />
<div class="stage-transition-2" :style="{ zIndex: stageTransition?.zIndex ?? 100 }" />
</template>
<style scoped>