From f8501873ddc1154dab16cad3ab536ea6c2e00680 Mon Sep 17 00:00:00 2001
From: Mars <3361409208a@gmail.com>
Date: Tue, 30 Jun 2026 17:58:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(player-desktop):=20=E4=B8=BA=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E6=8A=95=E6=B3=A8=E5=8D=95=E5=8D=A1=E7=89=87=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=B7=BB=E5=8A=A0=E5=B9=B3=E6=BB=91=E5=88=87=E5=85=A5?=
 =?UTF-8?q?=E5=92=8C=E7=A7=BB=E9=99=A4=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/desktop/BetSlipPanel.vue   | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/player/src/components/desktop/BetSlipPanel.vue b/apps/player/src/components/desktop/BetSlipPanel.vue
index a39bfc1..d3d8436 100644
--- a/apps/player/src/components/desktop/BetSlipPanel.vue
+++ b/apps/player/src/components/desktop/BetSlipPanel.vue
@@ -979,8 +979,8 @@ onUnmounted(() => {
         <p>{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}</p>
       </div>
 
-      <div v-else class="items-list">
-        <p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning">{{ parlayWarning }}</p>
+      <TransitionGroup v-else name="list-slide" tag="div" class="items-list">
+        <p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning" key="warning">{{ parlayWarning }}</p>
         <div
           v-for="item in activeItems"
           :key="item.selectionId"
@@ -1079,11 +1079,11 @@ onUnmounted(() => {
             </div>
           </div>
         </div>
-        <div v-if="activeTab === 'parlay' && slip.parlayItems.length" class="parlay-summary">
+        <div v-if="activeTab === 'parlay' && slip.parlayItems.length" class="parlay-summary" key="summary">
           <span>{{ t('bet.slip_parlay_count', { n: slip.parlayItems.length }) }}</span>
           <span class="parlay-odds">{{ t('bet.slip_parlay_odds', { odds: totalOddsText }) }}</span>
         </div>
-      </div>
+      </TransitionGroup>
 
       <!-- Stake input (parlay only) -->
       <div v-if="activeTab === 'parlay' && activeItems.length" class="stake-control">
@@ -1992,4 +1992,25 @@ onUnmounted(() => {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* Transition group list animation */
+.list-slide-enter-active,
+.list-slide-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.list-slide-enter-from {
+  opacity: 0;
+  transform: translateY(-20px) scale(0.95);
+}
+
+.list-slide-leave-to {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+}
+
+/* Ensure smooth moving when list changes */
+.list-slide-move {
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
 </style>