diff --git a/ui-src/src/components/ActionCard.vue b/ui-src/src/components/ActionCard.vue index c744cc7..8a4a6db 100644 --- a/ui-src/src/components/ActionCard.vue +++ b/ui-src/src/components/ActionCard.vue @@ -40,6 +40,7 @@ export default { this.$emit('choose', o) }, listen(o) { + if (this.disabled) return speak(o.text, o.audio) }, propEmoji(name) { diff --git a/ui-src/src/pages/play/play.vue b/ui-src/src/pages/play/play.vue index 67baeb6..2bd417f 100644 --- a/ui-src/src/pages/play/play.vue +++ b/ui-src/src/pages/play/play.vue @@ -135,13 +135,17 @@ export default { combo: 0, soundOn: isSoundEnabled(), showIntro: false, - sceneFx: '' + sceneFx: '', + branchTimer: null } }, onLoad(options) { this.levelId = Number(options.level_id || 0) this.load() }, + onUnload() { + if (this.branchTimer) clearTimeout(this.branchTimer) + }, computed: { scene() { return sceneVisual(this.detail && this.detail.scene ? this.detail.scene.name : '') @@ -201,14 +205,14 @@ export default { this.choosing = true try { const data = await api.levelChoose(this.childId, this.levelId, this.curNode.node_id, o.option_id) - this.routeSteps.push({ text: o.text, pros: o.feedback_pros || '' }) + if (data.next || data.final) this.routeSteps.push({ text: o.text, pros: o.feedback_pros || '' }) if (data.next) { this.mood = o.feedback_cons ? '😢' : '😊' this.combo = o.feedback_cons ? 0 : Math.min(this.combo + 1, 9) playSound(o.feedback_cons ? 'bad' : 'good') // 分支演出:场景晃动 + 0.6s 后弹点评 this.sceneFx = 'fx-shake' - setTimeout(() => { + this.branchTimer = setTimeout(() => { this.sceneFx = '' this.feedback = { text: o.text, @@ -284,19 +288,6 @@ export default { .char-name { font-size: 30rpx; font-weight: 700; color: #7a6248; } .node-content { font-size: 32rpx; line-height: 1.9; color: #5b4636; margin-bottom: 24rpx; } .node-speak { margin-bottom: 32rpx; } -.options { display: flex; flex-direction: column; gap: 20rpx; } -.option { display: flex; align-items: center; background: #f8f2e8; border: 6rpx solid transparent; border-radius: 24rpx; padding: 26rpx 28rpx; } -.option.disabled { opacity: 0.6; } -.option.c1 { border-color: #ff9a3d; } -.option.c2 { border-color: #4ecdc4; } -.option.c3 { border-color: #6c8cff; } -.option.c4 { border-color: #a58cff; } -.option:active { transform: scale(0.98); } -.option-mark { width: 56rpx; height: 56rpx; border-radius: 50%; background: #ff9a3d; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-right: 24rpx; flex-shrink: 0; } -.option-icon { width: 88rpx; height: 88rpx; background: #fff7ec; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; flex-shrink: 0; } -.option-icon-img { width: 64rpx; height: 64rpx; } -.option-icon-emoji { font-size: 48rpx; } -.option-text { font-size: 30rpx; font-weight: 600; color: #5b4636; flex: 1; } .soon { padding: 40rpx; text-align: center; color: #a08c74; background: #f8f2e8; } .mask { position: fixed; inset: 0; background: rgba(91, 70, 54, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10; } .feedback { width: 82%; padding: 48rpx 40rpx; }