优化跑马页面

resources/views/chat/partials/games/baccarat-panel.blade.php

@@ -27,7 +27,8 @@
                 <div>
                     <div style="color:#fff; font-weight:bold; font-size:14px;">🎲 百家乐</div>
                     <div style="color:rgba(255,255,255,.75); font-size:11px; margin-top:1px;">
-                        第 <span x-text="'#' + roundId"></span> 局
+                        <span x-show="roundId">第 <span x-text="'#' + roundId"></span> 局</span>
+                        <span x-show="!roundId" style="display:none;">等待开局中</span>
                     </div>
                 </div>
                 {{-- 倒计时 --}}
@@ -42,6 +43,9 @@
                     <div style="color:#fbbf24; font-size:12px; font-weight:bold; margin-top:2px;" x-text="resultLabel">
                     </div>
                 </div>
+                <div x-show="phase === 'idle'" style="display:none; text-align:center;">
+                    <div style="color:#dbeafe; font-size:11px; letter-spacing:3px;">未开始</div>
+                </div>
             </div>
 
             {{-- 进度条 --}}
@@ -74,6 +78,23 @@
             {{-- ─── 主体内容（白底） ─── --}}
             <div style="background:#fff; padding:14px 16px;">
 
+                {{-- 未开局状态 --}}
+                <div x-show="phase === 'idle'" style="display:none; text-align:center; padding:34px 12px 28px;">
+                    <div
+                        style="width:74px; height:74px; margin:0 auto 16px; border-radius:22px;
+                                display:flex; align-items:center; justify-content:center;
+                                background:linear-gradient(145deg,#eff6ff,#dbeafe);
+                                border:1px solid #bfdbfe; box-shadow:0 10px 24px rgba(59,130,246,.16);">
+                        <span style="font-size:34px;">🎲</span>
+                    </div>
+                    <div style="color:#1e3a5f; font-size:20px; font-weight:900; letter-spacing:1px;">游戏还没开启</div>
+                    <div style="color:#7b93ad; font-size:13px; line-height:1.7; margin-top:10px;">
+                        当前暂无进行中的百家乐局次
+                        <br>
+                        请等待系统开局后再来下注
+                    </div>
+                </div>
+
                 {{-- 押注阶段 --}}
                 <div x-show="phase === 'betting'">
 
@@ -354,9 +375,12 @@
 
             openPanel() {
                 const panel = document.getElementById('baccarat-panel');
-                if (!panel) return;
+                if (!panel) {
+                    return;
+                }
                 const p = Alpine.$data(panel);
                 p.show = true;
+                p.loadCurrentRound();
                 if (p.phase === 'betting' && p.countdown > 0 && !p.countdownTimer) {
                     p.startCountdown();
                 }
@@ -408,7 +432,7 @@
     function baccaratPanel() {
         return {
             show: false,
-            phase: 'betting', // betting | waiting | settled
+            phase: 'idle', // idle | betting | waiting | settled
 
             roundId: null,
             totalSeconds: 60,
@@ -451,6 +475,36 @@
             autoCloseTimer: null,
             autoCloseCountdown: 0,
 
+            /**
+             * 重置为未开局空状态
+             */
+            setIdleState() {
+                clearInterval(this.countdownTimer);
+                clearInterval(this.autoCloseTimer);
+                this.phase = 'idle';
+                this.roundId = null;
+                this.countdown = 0;
+                this.autoCloseCountdown = 0;
+                this.totalBetBig = 0;
+                this.totalBetSmall = 0;
+                this.totalBetTriple = 0;
+                this.betCountBig = 0;
+                this.betCountSmall = 0;
+                this.betCountTriple = 0;
+                this.myBet = false;
+                this.myBetType = '';
+                this.myBetAmount = 0;
+                this.selectedType = '';
+                this.settledDice = [];
+                this.settledTotal = 0;
+                this.settledResult = '';
+                this.resultLabel = '';
+                this.diceEmoji = '';
+                this.myWon = false;
+                this.myPayout = 0;
+                this.updateFab(false);
+            },
+
             /**
              * 开局：填充局次数据并开始倒计时
              */
@@ -482,7 +536,10 @@
                 try {
                     const res = await fetch('/baccarat/current');
                     const data = await res.json();
-                    if (data.round) {
+                    if (data.round && (data.round.seconds_left || 0) > 0) {
+                        this.phase = 'betting';
+                        this.roundId = data.round.id;
+                        this.countdown = data.round.seconds_left || this.countdown || 0;
                         this.totalBetBig = data.round.total_bet_big;
                         this.totalBetSmall = data.round.total_bet_small;
                         this.totalBetTriple = data.round.total_bet_triple;
@@ -493,9 +550,17 @@
                             this.myBet = true;
                             this.myBetType = data.round.my_bet.bet_type;
                             this.myBetAmount = data.round.my_bet.amount;
+                        } else {
+                            this.myBet = false;
+                            this.myBetType = '';
+                            this.myBetAmount = 0;
                         }
+                    } else {
+                        this.setIdleState();
                     }
-                } catch {}
+                } catch {
+                    this.setIdleState();
+                }
             },
 
             /**
@@ -710,7 +775,11 @@
 
                     // 只显示悬浮按钮，不自动弹出全屏（避免打扰刚进入的用户）
                     panelData.updateFab(true);
+                } else {
+                    panelData.setIdleState();
                 }
+            } else if (panel) {
+                Alpine.$data(panel).setIdleState();
             }
         } catch (e) {
             console.warn('[百家乐] 初始化失败', e);