From 7f7cf49587a7a6e06a83ae2b9ef5bd6ed570b93f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=96=8C?= <259278618@qq.com>
Date: Thu, 13 Aug 2026 15:11:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B8=B8=E6=88=8F=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=A1=A5=E5=85=A8=EF=BC=88=E8=BF=9B=E5=BA=A6=E7=82=B9?=
 =?UTF-8?q?/=E8=A7=92=E8=89=B2=E5=8D=A1/=E9=80=89=E9=A1=B9=E5=BD=A9?=
 =?UTF-8?q?=E8=89=B2=E8=BE=B9=E6=A1=86/=E5=8F=8D=E9=A6=88=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=EF=BC=89=EF=BC=8COptionVO=20=E9=80=8F=E5=87=BA=20audi?=
 =?UTF-8?q?o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 biz/controller/level.go        |  1 +
 biz/model/dto/level.go         |  1 +
 biz/service/level.go           |  2 ++
 ui-src/src/pages/play/play.vue | 47 ++++++++++++++++++++++++++--------
 4 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/biz/controller/level.go b/biz/controller/level.go
index 9fbab21..da70d1e 100644
--- a/biz/controller/level.go
+++ b/biz/controller/level.go
@@ -70,6 +70,7 @@ func nodeVO(n *service.Node) dto.NodeVO {
 			TextPinyin:   o.TextPinyin,
 			FeedbackPros: o.FeedbackPros,
 			FeedbackCons: o.FeedbackCons,
+			Audio:        o.Audio,
 			Prop:         elementVO(o.Prop),
 		})
 	}
diff --git a/biz/model/dto/level.go b/biz/model/dto/level.go
index a260fa8..43b156b 100644
--- a/biz/model/dto/level.go
+++ b/biz/model/dto/level.go
@@ -24,6 +24,7 @@ type OptionVO struct {
 	TextPinyin   string     `json:"text_pinyin"`
 	FeedbackPros string     `json:"feedback_pros"`
 	FeedbackCons string     `json:"feedback_cons"`
+	Audio        string     `json:"audio"`
 	Prop         *ElementVO `json:"prop"`
 }
 
diff --git a/biz/service/level.go b/biz/service/level.go
index ab5d4bd..19f46ac 100644
--- a/biz/service/level.go
+++ b/biz/service/level.go
@@ -57,6 +57,7 @@ type Option struct {
 	TextPinyin   string
 	FeedbackPros string
 	FeedbackCons string
+	Audio        string
 	Prop         *Element
 }
 
@@ -233,6 +234,7 @@ func buildNode(nodeRec gdb.Record, optionRecs []gdb.Record, elements map[int64]*
 			TextPinyin:   o["text_pinyin"].String(),
 			FeedbackPros: o["feedback_pros"].String(),
 			FeedbackCons: o["feedback_cons"].String(),
+			Audio:        o["audio"].String(),
 			Prop:         elements[o["prop_id"].Int64()],
 		})
 	}
diff --git a/ui-src/src/pages/play/play.vue b/ui-src/src/pages/play/play.vue
index 5d68078..12450ae 100644
--- a/ui-src/src/pages/play/play.vue
+++ b/ui-src/src/pages/play/play.vue
@@ -224,37 +224,64 @@ export default {
 </script>
 
 <style scoped>
-.page { min-height: 100vh; display: flex; flex-direction: column; }
+.page { min-height: 100vh; display: flex; flex-direction: column; background: #fdf6ec; }
 .topbar { display: flex; align-items: center; padding: 24rpx 32rpx; padding-top: calc(24rpx + env(safe-area-inset-top)); }
 .back { font-size: 56rpx; color: #ff6b35; width: 72rpx; height: 72rpx; display: flex; align-items: center; }
 .top-title { flex: 1; text-align: center; font-size: 32rpx; font-weight: 700; color: #5b4636; }
+.top-actions { display: flex; align-items: center; gap: 16rpx; }
 .py-toggle { font-size: 24rpx; color: #ff6b35; background: #fff0e5; border-radius: 30rpx; padding: 8rpx 20rpx; }
+.sound-toggle { font-size: 32rpx; background: #fff0e5; border-radius: 50%; width: 64rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; }
 .content { flex: 1; padding: 24rpx 32rpx 60rpx; }
-.scene-card { padding: 32rpx; margin-bottom: 24rpx; }
-.scene-head { display: flex; align-items: center; margin-bottom: 16rpx; }
+.progress-dots { display: flex; justify-content: center; gap: 16rpx; margin-bottom: 24rpx; }
+.dot { width: 20rpx; height: 20rpx; border-radius: 50%; background: #e5d9c8; transition: all 0.3s; }
+.dot.on { background: #ff9a3d; transform: scale(1.25); box-shadow: 0 0 0 6rpx rgba(255, 154, 61, 0.2); }
+.scene-card { padding: 32rpx; margin-bottom: 24rpx; position: relative; overflow: hidden; }
+.scene-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 24rpx; }
+.scene-float { position: absolute; font-size: 44rpx; opacity: 0.85; animation: float-y 3.5s ease-in-out infinite; pointer-events: none; }
+.scene-float.f1 { top: 16rpx; right: 28rpx; }
+.scene-float.f2 { bottom: 20rpx; left: 24rpx; animation-delay: 1.2s; }
+@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14rpx); } }
+.scene-head { display: flex; align-items: center; margin-bottom: 16rpx; position: relative; z-index: 1; }
 .scene-emoji { font-size: 64rpx; margin-right: 20rpx; }
 .scene-name { font-size: 32rpx; font-weight: 800; color: #5b4636; }
-.scene-text { margin-bottom: 20rpx; }
-.scene-speak { margin-top: 8rpx; }
+.combo-badge { margin-left: auto; background: #ff6b35; color: #fff; font-weight: 800; border-radius: 30rpx; padding: 8rpx 24rpx; font-size: 28rpx; animation: combo-pop 0.4s ease; }
+@keyframes combo-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
+.scene-text { margin-bottom: 20rpx; position: relative; z-index: 1; }
+.scene-speak { margin-top: 8rpx; position: relative; z-index: 1; }
 .node { padding: 48rpx 40rpx; }
 .node-title { font-size: 38rpx; font-weight: 800; color: #ff6b35; margin-bottom: 24rpx; }
 .character { display: flex; align-items: center; margin-bottom: 24rpx; }
-.char-avatar { width: 72rpx; height: 72rpx; border-radius: 50%; color: #fff; font-size: 32rpx; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; }
-.char-name { font-size: 28rpx; font-weight: 700; color: #7a6248; margin-right: 20rpx; }
+.char-card { position: relative; margin-right: 20rpx; flex-shrink: 0; }
+.char-img { width: 96rpx; height: 96rpx; border-radius: 50%; background: #f8f2e8; }
+.char-avatar { width: 96rpx; height: 96rpx; border-radius: 50%; color: #fff; font-size: 40rpx; font-weight: 700; display: flex; align-items: center; justify-content: center; }
+.char-mood { position: absolute; right: -8rpx; bottom: -8rpx; font-size: 36rpx; background: #fff; border-radius: 50%; width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; box-shadow: 0 2rpx 8rpx rgba(91, 70, 54, 0.2); animation: mood-pop 0.3s ease; }
+@keyframes mood-pop { 0% { transform: scale(0.4); } 100% { transform: scale(1); } }
+.char-info { display: flex; flex-direction: column; gap: 8rpx; }
+.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: 4rpx solid transparent; border-radius: 24rpx; padding: 26rpx 28rpx; }
+.option { display: flex; align-items: center; background: #f8f2e8; border: 6rpx solid transparent; border-radius: 24rpx; padding: 26rpx 28rpx; }
 .option.disabled { opacity: 0.6; }
-.option:active { border-color: #ff9a3d; }
+.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-text { font-size: 30rpx; font-weight: 600; color: #5b4636; }
+.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; }
 .fb-title { font-size: 26rpx; color: #a08c74; margin-bottom: 16rpx; }
 .fb-option { font-size: 34rpx; font-weight: 800; color: #ff6b35; margin-bottom: 24rpx; }
 .fb-line { font-size: 28rpx; line-height: 1.7; border-radius: 16rpx; padding: 16rpx 24rpx; margin-bottom: 16rpx; }
+.fb-in { opacity: 0; animation: fb-in 0.4s ease forwards; }
+.fb-in.d2 { animation-delay: 0.2s; }
+@keyframes fb-in { from { opacity: 0; transform: translateY(16rpx); } to { opacity: 1; transform: translateY(0); } }
 .fb-pros { background: #e8f7f3; color: #1fa98f; }
 .fb-cons { background: #fff0e5; color: #e07b39; }
 .fb-mark { font-weight: 800; margin-right: 8rpx; }