feat: 新增看视频赚金币功能

- 在右侧导航新增「赚钱」入口（娱乐下方）
- 新增 earn-panel 弹窗：风格与商店一致，800px 宽度
- 集成 FluidPlayer + VAST 广告（ExoClick）
- 动态倒计时：实时监听视频 duration/currentTime
- VAST 失败时自动回退保底视频，20s 超时保底放行
- 修复 AbortError：idle 时 video 不预播放，仅提供 fallback source
- 删除不支持的 player.on('error') 调用
- 所有 overlay 改用绝对定位居中，修复 Alpine x-show 破坏 flex 问题
- EarnController：Redis 每日 10 次限额 + 冷却防刷
- 领取成功后广播全服系统消息（含金币+经验+快捷入口标签）
- 移除神秘盒子相关 UI 代码

app/Http/Controllers/EarnController.php

@@ -0,0 +1,130 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\LevelCache;
+use App\Models\User;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Redis;
+
+/**
+ * 文件功能：用户赚取金币与经验（观看视频广告等任务）控制器
+ *
+ * @author   ChatRoom Laravel
+ *
+ * @version  1.0.0
+ */
+class EarnController extends Controller
+{
+    public function __construct(
+        private readonly \App\Services\ChatStateService $chatState
+    ) {}
+
+    /**
+     * @var int 每日观看最大次数限制
+     */
+    private int $maxDailyLimit = 10;
+
+    /**
+     * @var int 每次领奖后至少需要的冷却时间（秒）
+     */
+    private int $cooldownSeconds = 5;
+
+    /**
+     * 申领看视频的奖励
+     * 成功看完视频后前端发起此请求。
+     * 为防止刷包，必须加上每日总次数及短时频率限制。
+     */
+    public function claimVideoReward(Request $request): JsonResponse
+    {
+        /** @var User $user */
+        $user = Auth::user();
+
+        $userId = $user->id;
+        $dateKey = now()->format('Y-m-d');
+
+        $dailyCountKey = "earn_video:count:{$userId}:{$dateKey}";
+        $cooldownKey = "earn_video:cooldown:{$userId}";
+
+        // 1. 检查冷却时间
+        if (Redis::exists($cooldownKey)) {
+            return response()->json([
+                'success' => false,
+                'message' => '操作过快，请稍后再试。',
+            ]);
+        }
+
+        // 2. 检查每日最大次数
+        $todayCount = (int) Redis::get($dailyCountKey);
+        if ($todayCount >= $this->maxDailyLimit) {
+            return response()->json([
+                'success' => false,
+                'message' => '今日视频收益次数已达上限（每天最多10次），请明天再来。',
+            ]);
+        }
+
+        // 3. 开始发放奖励并增加次数
+        // 增量前可能需要锁机制，但简单的 incr 在并发也不容易超量很多，且有限流
+        $newCount = Redis::incr($dailyCountKey);
+
+        // 设置每日次数键在同一天结束时过期，留一点余量
+        if ($newCount === 1) {
+            Redis::expire($dailyCountKey, 86400 * 2);
+        }
+
+        // 配置：单次 5000 金币，500 经验
+        $rewardCoins = 5000;
+        $rewardExp = 500;
+
+        $user->increment('jjb', $rewardCoins);
+        $user->increment('exp_num', $rewardExp);
+        $user->refresh(); // 刷新模型以获取 increment 后的最新字段值
+
+        // 设置冷却时间
+        Redis::setex($cooldownKey, $this->cooldownSeconds, 1);
+
+        // 4. 检查是否升级
+        $levelUp = false;
+        $newLevelName = '';
+
+        // 我们利用现有的 levelCache 或者根据 exp_num 和当前 user_level 判断
+        // 因为这是一个常见的游戏房逻辑，通常判断用户当前经验是否大于下一级的经验要求
+        // 简化起见，如果需要严格触发升级系统，可参考已有的升华逻辑。
+        // （在此处简化为：只要给了经验，前端自然显示就好。部分框架逻辑可能不需要在此检查升降，而是下一次进入发言时自动算）
+
+        $roomId = (int) $request->input('room_id', 0);
+        if ($roomId > 0) {
+            $promoTag = ' <span onclick="window.dispatchEvent(new CustomEvent(\'open-earn-panel\'))" '
+                .'style="display:inline-block;margin-left:6px;padding:1px 7px;background:#e9e4f5;'
+                .'color:#6d4fa8;border-radius:10px;font-size:10px;cursor:pointer;font-weight:bold;vertical-align:middle;'
+                .'border:1px solid #d0c4ec;" title="点击赚金币">💰 看视频赚金币</span>';
+
+            $sysMsg = [
+                'id' => $this->chatState->nextMessageId($roomId),
+                'room_id' => $roomId,
+                'from_user' => '金币任务',
+                'to_user' => '大家',
+                'content' => "👍 【{$user->username}】刚刚看视频赚取了 {$rewardCoins} 金币 + {$rewardExp} 经验！{$promoTag}",
+                'is_secret' => false,
+                'font_color' => '#d97706',
+                'action' => '',
+                'sent_at' => now()->toDateTimeString(),
+            ];
+
+            $this->chatState->pushMessage($roomId, $sysMsg);
+            broadcast(new \App\Events\MessageSent($roomId, $sysMsg));
+        }
+
+        $remainingToday = $this->maxDailyLimit - $newCount;
+
+        return response()->json([
+            'success' => true,
+            'message' => "观看完毕！获得 {$rewardCoins} 金币 + {$rewardExp} 经验。今日还可观看 {$remainingToday} 次。",
+            'new_jjb' => $user->jjb, // refresh 后的真实值
+            'level_up' => false,
+            'new_level_name' => '',
+        ]);
+    }
+}

resources/views/chat/frame.blade.php

@@ -15,6 +15,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ $room->name ?? '聊天室' }} - 飘落流星</title>
     <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta http-equiv="Delegate-CH" content="Sec-CH-UA https://s.magsrv.com; Sec-CH-UA-Mobile https://s.magsrv.com; Sec-CH-UA-Arch https://s.magsrv.com; Sec-CH-UA-Model https://s.magsrv.com; Sec-CH-UA-Platform https://s.magsrv.com; Sec-CH-UA-Platform-Version https://s.magsrv.com; Sec-CH-UA-Bitness https://s.magsrv.com; Sec-CH-UA-Full-Version-List https://s.magsrv.com; Sec-CH-UA-Full-Version https://s.magsrv.com;">
     @php
         // 从 sysparam 读取权限等级配置
         $levelWarn = (int) \App\Models\Sysparam::getValue('level_warn', '5');
@@ -112,7 +113,8 @@
                 weddingSetupUrl: (id) => `/wedding/${id}/setup`,
                 claimEnvelopeUrl: (id, ceremonyId) => `/wedding/${id}/claim`,
                 envelopeStatusUrl: (id) => `/wedding/${id}/envelope-status`,
-            }
+            },
+            earnRewardUrl: "{{ route('earn.video_reward') }}"
         };
     </script>
     @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/chat.js'])
@@ -194,6 +196,7 @@
     @include('chat.partials.games.fishing-panel')
     @include('chat.partials.games.game-hall')
     @include('chat.partials.games.gomoku-panel')
+    @include('chat.partials.games.earn-panel')
 
     {{-- 全屏特效系统：管理员烟花/下雨/雷电/下雪 --}}
     <script src="/js/effects/effect-sounds.js"></script>

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

@@ -0,0 +1,342 @@
+{{--
+    文件功能：观看广告赚钱面板
+    包含 ExoClick 广告展示和倒计时领奖逻辑，基于 Alpine.js
+    
+    @author ChatRoom Laravel
+    @version 1.0.0
+--}}
+<div x-data="earnPanelData()"
+     @open-earn-panel.window="openPanel()"
+     class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50"
+     x-show="isOpen"
+     x-transition.opacity
+     style="display: none;">
+
+    <div style="background-color: #ffffff; border-radius: 8px; width: 800px; max-width: 95vw; max-height: 84vh; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; position: relative;"
+         @click.outside="closePanel()">
+
+        {{-- 标题栏 — 与设置/商店/头像弹窗一致 --}}
+        <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 8px 16px; color: white; background: linear-gradient(135deg, #336699, #5a8fc0);">
+            <div style="font-size: 14px; font-weight: bold; flex: 1;">💰 赚钱 - 看视频得金币经验</div>
+            <button @click="closePanel()" style="background: none; border: none; color: white; cursor: pointer; font-size: 18px; line-height: 1; opacity: 0.8;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.8">&times;</button>
+        </div>
+
+        {{-- 面板内容区域 --}}
+        <div style="padding: 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center;">
+
+            {{-- 信息说明区域 --}}
+            <div style="background-color: #f0f6ff; border: 1px solid #cce0f5; border-radius: 4px; padding: 12px; margin-bottom: 16px; width: 100%; text-align: center;">
+                <div style="color: #336699; font-weight: bold; margin-bottom: 8px; font-size: 14px;">
+                    完整观看视频后，即可获得 <span style="color: #d97706;">5000 金币</span> 和 <span style="color: #16a34a;">500 经验</span> 奖励！<br>
+                </div>
+                <div style="font-size: 12px; color: #6b7280;">
+                    中途关闭视作放弃，不会扣除观影次数。每日最多获取 10 次。
+                </div>
+            </div>
+
+            {{-- 视频广告容器 --}}
+            <div style="width: 100%; aspect-ratio: 16/9; background-color: #e2e8f0; border: 1px solid #cbd5e1; border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin-bottom: 16px;">
+                
+                {{-- video 元素常驻 DOM，preload=none 防止空闲时预加载。
+                     必须保留 fallback source：VAST 失败时 FluidPlayer 会调用 playMainVideoWhenVastFails(),
+                     它会 load() 到此 source，若 source 为空则找不到目标，仍会触发 AbortError。 --}}
+                <div id="video-wrapper" style="width: 100%; height: 100%; background-color: #000; display: flex; align-items: center; justify-content: center;">
+                    <video id="exoclick-video" style="width: 100%; height: 100%;" playsinline preload="none">
+                        <source src="https://cdn.fluidplayer.com/videos/valerian-1080p.mkv" type="video/mp4" />
+                    </video>
+                </div>
+
+                {{-- Idle Overlay (空闲时覆盖在视频之上) --}}
+                {{-- 注意：不用 display:flex 居中，因为 Alpine x-show 恢复时只设 display:block 会覆盖 flex --}}
+                <div x-show="status === 'idle'" style="position: absolute; inset: 0; background-color: #e2e8f0; z-index: 10;">
+                    <button @click="startWatching()" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #336699, #5a8fc0); color: #ffffff; padding: 12px 32px; border-radius: 4px; font-weight: bold; border: none; font-size: 15px; cursor: pointer; white-space: nowrap;">
+                        ▶ 开始观看
+                    </button>
+                </div>
+
+                {{-- Completed Overlay (完毕覆盖层) --}}
+                <div x-show="status === 'completed'" style="position: absolute; inset: 0; background-color: #f0fdf4; z-index: 10;">
+                    <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #16a34a; font-weight: bold; font-size: 28px; white-space: nowrap;">✅ 观看完毕！</span>
+                </div>
+
+                {{-- Claiming Overlay (领奖覆盖层) --}}
+                <div x-show="status === 'claiming' || status === 'claimed'" style="position: absolute; inset: 0; background-color: #fefce8; z-index: 10;">
+                    <div x-show="status === 'claiming'" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #d97706; font-weight: bold; font-size: 16px; white-space: nowrap;">
+                        ⏳ 正在发放奖励...
+                    </div>
+                    <div x-show="status === 'claimed'" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
+                        <div style="color: #d97706; font-weight: bold; font-size: 24px;">🎉 奖励已到账</div>
+                    </div>
+                </div>
+
+                {{-- 浮动倒计时器 --}}
+                <div x-show="status === 'watching'" style="position: absolute; bottom: 8px; right: 8px; background-color: rgba(0,0,0,0.6); color: white; font-family: monospace; padding: 4px 12px; border-radius: 4px; font-size: 12px; z-index: 50;">
+                    进度: <span x-text="countdown"></span>
+                </div>
+            </div>
+
+            {{-- 底部按钮区域 --}}
+            <div style="width: 100%;">
+                <template x-if="status === 'completed'">
+                    <button @click="claimReward()" style="width: 100%; background-color: #16a34a; color: #ffffff; padding: 10px 24px; border-radius: 4px; font-weight: bold; border: none; font-size: 14px; cursor: pointer;">
+                        点击领取奖励
+                    </button>
+                </template>
+
+                <template x-if="status === 'claimed'">
+                    <button @click="resetPanel()" style="width: 100%; background-color: #64748b; color: #ffffff; padding: 10px 24px; border-radius: 4px; font-weight: bold; border: none; font-size: 14px; cursor: pointer;">
+                        关闭面板
+                    </button>
+                </template>
+            </div>
+            
+        </div>
+    </div>
+
+</div>
+
+<!-- 引入 Fluid Player 用于播放 VAST 广告 -->
+<link rel="stylesheet" href="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.css" type="text/css"/>
+<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
+
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('earnPanelData', () => ({
+            isOpen: false,
+            status: 'idle', // idle, watching, completed, claiming, claimed
+            countdown: '获取中...',
+            timer: null,
+            player: null,
+            videoFinished: false,
+
+            openPanel() {
+                this.isOpen = true;
+                if (this.status !== 'claimed' && this.status !== 'claiming') {
+                    this.resetPanelState();
+                }
+            },
+
+            closePanel() {
+                this.isOpen = false;
+                this.stopTimer();
+                if (this.status === 'watching') {
+                    window.chatToast.show({ title: '取消提示', message: '已取消观看，没有扣除观影次数。', icon: 'ℹ️', color: '#3b82f6' });
+                }
+                if (this.player) {
+                    try { this.player.destroy(); } catch(e) {}
+                    this.player = null;
+                }
+                this.restoreVideoDOM();
+                this.status = 'idle';
+            },
+
+            resetPanelState() {
+                this.status = 'idle';
+                this.countdown = '获取中...';
+                this.videoFinished = false;
+                this.stopTimer();
+                if (this.player) {
+                    try { this.player.destroy(); } catch(e) {}
+                    this.player = null;
+                }
+                this.restoreVideoDOM();
+            },
+
+            resetPanel() {
+                this.closePanel();
+                setTimeout(() => { this.resetPanelState(); }, 300);
+            },
+
+            restoreVideoDOM() {
+                // FluidPlayer 销毁后会修改/包裹 video 元素，需要重建以便下次干净初始化
+                // source 必须保留，否则 VAST 失败时 FluidPlayer 的 fallback 无目标可播
+                const wrapper = document.getElementById('video-wrapper');
+                if (wrapper) {
+                    wrapper.innerHTML = `<video id="exoclick-video" style="width: 100%; height: 100%;" playsinline preload="none"><source src="https://cdn.fluidplayer.com/videos/valerian-1080p.mkv" type="video/mp4" /></video>`;
+                }
+            },
+
+            completeWatch() {
+                this.videoFinished = true;
+                this.stopTimer();
+                this.status = 'completed';
+                
+                if (this.player) {
+                    try { this.player.destroy(); } catch(e) {}
+                    this.player = null;
+                }
+                this.restoreVideoDOM();
+
+                if (typeof EffectManager !== 'undefined' && typeof EffectManager.audioManager !== 'undefined') {
+                    EffectManager.audioManager.sounds.gold_received?.play().catch(()=>{});
+                }
+            },
+
+            startWatching() {
+                this.status = 'watching';
+                this.countdown = '请求广告...';
+                this.videoFinished = false;
+                this.stopTimer();
+                
+                // 同步初始化播放器，保证满足浏览器的 user gesture 直接挂钩播放
+                this.initPlayer();
+
+                let elapsedTime = 0;
+
+                // 基于视频真实时长的倒计时检测与失败降级处理
+                this.timer = setInterval(() => {
+                    if (this.videoFinished) return;
+
+                    const v = document.getElementById('exoclick-video');
+                    elapsedTime += 0.5;
+
+                    if (v) {
+                        const dur = v.duration;
+                        const cur = v.currentTime;
+                        
+                        // 当系统取到真实的视频时长时（确保不是NaN）
+                        if (!isNaN(dur) && dur > 0) {
+                            const left = Math.ceil(dur - cur);
+                            this.countdown = (left > 0 ? left : 0) + ' 秒';
+                            
+                            // 若倒计时归零并且正在播放中（保证不是误判）
+                            if (left <= 0 && cur > 0) {
+                                this.completeWatch();
+                            }
+                        } else {
+                            // 没有视频时长（可能正在缓冲，也可能广告没有填充）
+                            // 最多让用户干等 20 秒作为无广告情况下的保底奖励
+                            const fallbackLeft = Math.ceil(20 - elapsedTime);
+                            if (fallbackLeft > 0) {
+                                this.countdown = '缓冲/加载中... ' + fallbackLeft + 's';
+                            } else {
+                                // 20秒超时还没获得时长，则当作广告未填充或网速太慢，放行奖励
+                                this.completeWatch();
+                            }
+                        }
+                    }
+                }, 500);
+            },
+
+            initPlayer() {
+                // 按照 Chrome 规范：确保 video 当前未在 play() 中，通过 pause() 后再初始化
+                // 参考：https://developer.chrome.com/blog/play-request-was-interrupted
+                const v = document.getElementById('exoclick-video');
+                const doInit = () => {
+                    try {
+                        this.player = fluidPlayer(
+                            'exoclick-video',
+                            {
+                                layoutControls: {
+                                    primaryColor: "#336699",
+                                    posterImage: false,
+                                    playButtonShowing: true,
+                                    playPauseAnimation: false,
+                                    fillToContainer: true,
+                                    autoPlay: true,
+                                    mute: false
+                                },
+                                vastOptions: {
+                                    allowVPAID: true,
+                                    vastTimeout: 8000,
+                                    adList: [
+                                        {
+                                            roll: 'preRoll',
+                                            vastTag: 'https://s.magsrv.com/v1/vast.php?idzone=5889208',
+                                            adText: '请观看广告获取金币'
+                                        }
+                                    ]
+                                }
+                            }
+                        );
+
+                        // 注意：FluidPlayer 不支持 player.on('error')，不要注册该事件
+                        // VAST 失败时 FluidPlayer 会自动播放 fallback source，
+                        // 我们的 setInterval 轮询 currentTime/duration 会自然触发 completeWatch()
+
+                    } catch(e) {
+                        console.error('[EarnPanel] 播放器初始化未成功', e);
+                    }
+                };
+
+                if (v && !v.paused) {
+                    // 如果 video 正在播放，先等 pause 后再 init，避免 play() 被 load() 中断
+                    v.pause();
+                    v.addEventListener('pause', doInit, { once: true });
+                } else {
+                    doInit();
+                }
+            },
+
+            stopTimer() {
+                if (this.timer) {
+                    clearInterval(this.timer);
+                    this.timer = null;
+                }
+            },
+
+            async claimReward() {
+                if (this.status !== 'completed') return;
+                this.status = 'claiming';
+                try {
+                    const payload = {
+                        room_id: window.chatContext?.roomId || 0
+                    };
+
+                    const response = await fetch(window.chatContext.earnRewardUrl, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify(payload)
+                    });
+
+                    const data = await response.json();
+                    
+                    if (response.ok && data.success) {
+                        this.status = 'claimed';
+                        window.chatToast.show({ title: '奖励到账', message: data.message || '领取成功！', icon: '🎉', color: '#10b981' });
+                        
+                        // 更新本地上下文
+                        if (data.new_jjb !== undefined) {
+                            window.chatContext.userJjb = data.new_jjb;
+                            window.chatContext.myGold = data.new_jjb;
+                            // 派发更新全局 UI 的事件，类似钓鱼的更新
+                            window.dispatchEvent(new CustomEvent('update-user-points', { detail: { points: data.new_jjb }}));
+                        }
+                        
+                        // 播放到账特定金币音效
+                        if (typeof EffectManager !== 'undefined' && typeof EffectManager.audioManager !== 'undefined') {
+                            EffectManager.audioManager.sounds.gold_received?.play().catch(()=>{});
+                        }
+                        
+                        if (data.level_up) {
+                            window.chatToast.show({ 
+                                title: '等级提升', 
+                                message: `恭喜！您的等级提升到了 ${data.new_level_name}！`, 
+                                icon: '🌟', 
+                                color: '#8b5cf6', 
+                                duration: 5000 
+                            });
+                            setTimeout(() => {
+                                // 触发烟花庆贺
+                                if(typeof EffectManager !== 'undefined') {
+                                    EffectManager.play('fireworks');
+                                }
+                            }, 500);
+                        }
+                    } else {
+                        // 领奖失败，可能是超出次数或防刷限制
+                        this.status = 'completed';
+                        window.chatToast.show({ title: '出错了', message: data.message || '领奖失败，请稍后再试。', icon: '❌', color: '#ef4444', duration: 4000 });
+                    }
+                } catch (error) {
+                    this.status = 'completed';
+                    window.chatToast.show({ title: '网络错误', message: '网络请求失败，请检查连接。', icon: '⚠️', color: '#ef4444' });
+                }
+            }
+        }));
+    });
+</script>

resources/views/chat/partials/games/mystery-box.blade.php

@@ -1,422 +1 @@
-{{--
-    文件功能：神秘箱子游戏前台UI组件
-
-    功能描述：
-    - 右下角悬浮提示标（检测到可领取箱子时显示，支持拖动移位）
-    - 监听聊天消息事件，识别公屏暗号提示后自动出现
-    - 用户在聊天框输入暗号（由前端拦截 /mystery-box/claim 接口）
-    - 或点击悬浮图标展开快速输入界面
-    - 开箱结果展示 toast 通知
---}}
-
-{{-- ─── 神秘箱子悬浮提示（可拖动） ─── --}}
-<div id="mystery-box-fab" x-data="mysteryBoxFab()" x-show="visible" x-cloak
-    :style="'position:fixed; left:' + posX + 'px; top:' + posY + 'px; z-index:9880; touch-action:none; user-select:none;'"
-    @pointerdown.prevent="startDrag($event)" @pointermove.window="onDrag($event)" @pointerup.window="endDrag($event)"
-    @pointercancel.window="endDrag($event)">
-
-    {{-- 悬浮圆形按钮 --}}
-    <button
-        style="width:56px; height:56px; border-radius:50%; border:none; position:relative;
-               font-size:24px; display:flex; align-items:center; justify-content:center;
-               animation:mb-pulse 1.8s ease-in-out infinite; user-select:none;"
-        :style="[
-            dragging ? 'cursor:grabbing;' : 'cursor:grab;',
-            boxType === 'rare' ?
-            'background:linear-gradient(135deg,#7c3aed,#a78bfa); box-shadow:0 4px 24px rgba(124,58,237,.6);' :
-            boxType === 'trap' ?
-            'background:linear-gradient(135deg,#7f1d1d,#dc2626); box-shadow:0 4px 24px rgba(220,38,38,.6);' :
-            'background:linear-gradient(135deg,#065f46,#10b981); box-shadow:0 4px 24px rgba(16,185,129,.6);'
-        ]"
-        title="神秘箱子开箱中！（可拖动）">
-        <span x-text="boxEmoji">📦</span>
-        {{-- 倒计时badge --}}
-        <span x-show="secondsLeft !== null && secondsLeft <= 30"
-            style="position:absolute; top:-6px; right:-6px; background:#ef4444; color:#fff;
-                     font-size:10px; font-weight:bold; border-radius:10px; padding:1px 5px; min-width:18px; text-align:center;"
-            x-text="secondsLeft">
-        </span>
-    </button>
-
-    {{-- 悬浮提示标签 --}}
-    <div style="position:absolute; left:62px; top:50%; transform:translateY(-50%);
-                background:rgba(0,0,0,.85); color:#fff; border-radius:8px; padding:4px 10px;
-                font-size:12px; white-space:nowrap; pointer-events:none;"
-        :style="boxType === 'rare' ? 'border:1px solid rgba(167,139,250,.4);' :
-            boxType === 'trap' ? 'border:1px solid rgba(239,68,68,.3);' :
-            'border:1px solid rgba(16,185,129,.3);'">
-        <span x-text="boxTypeName">神秘箱</span>
-        <span x-show="secondsLeft !== null" style="margin-left:4px; opacity:.7;" x-text="'⏰ ' + secondsLeft + 's'">
-        </span>
-    </div>
-</div>
-
-{{-- ─── 神秘箱子快捷输入面板 ─── --}}
-<div id="mystery-box-panel" x-data="mysteryBoxPanel()" x-show="show" x-cloak>
-    <div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95"
-        x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
-        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
-        style="position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:9920;
-                display:flex; align-items:center; justify-content:center;">
-
-        <div style="width:380px; max-width:94vw; border-radius:24px; overflow:hidden;
-                    font-family:system-ui,sans-serif; position:relative;"
-            :style="boxType === 'rare' ?
-                'box-shadow:0 24px 80px rgba(124,58,237,.5); background:linear-gradient(180deg,#1e1b4b,#2e1065);' :
-                boxType === 'trap' ?
-                'box-shadow:0 24px 80px rgba(220,38,38,.4); background:linear-gradient(180deg,#1c0606,#2d0909);' :
-                'box-shadow:0 24px 80px rgba(16,185,129,.4); background:linear-gradient(180deg,#022c22,#064e3b);'">
-
-            {{-- ─── 顶部 ─── --}}
-            <div style="padding:20px 22px 16px;"
-                :style="boxType === 'rare' ?
-                    'background:linear-gradient(135deg,#4c1d95,#6d28d9,#7c3aed);' :
-                    boxType === 'trap' ?
-                    'background:linear-gradient(135deg,#7f1d1d,#b91c1c,#dc2626);' :
-                    'background:linear-gradient(135deg,#064e3b,#059669,#10b981);'">
-
-                <div style="display:flex; align-items:center; gap:12px;">
-                    <div style="font-size:36px;" x-text="boxEmoji">📦</div>
-                    <div>
-                        <div style="color:#fff; font-weight:900; font-size:17px;" x-text="boxTypeName + ' 开箱！'"></div>
-                        <div style="color:rgba(255,255,255,.6); font-size:12px; margin-top:2px;">
-                            输入暗号即可开箱，限时
-                            <span x-text="secondsLeft !== null ? secondsLeft + ' 秒' : ''"
-                                style="color:#fbbf24; font-weight:bold;"></span>
-                        </div>
-                    </div>
-                </div>
-
-                {{-- 倒计时进度条 --}}
-                <div x-show="secondsLeft !== null && totalSeconds > 0"
-                    style="margin-top:10px; height:3px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden;">
-                    <div style="height:100%; border-radius:2px; transition:width 1s linear;"
-                        :style="'width:' + Math.max(0, secondsLeft / totalSeconds * 100) + '%; background:' +
-                            (boxType === 'rare' ? '#c4b5fd' : boxType === 'trap' ? '#fca5a5' : '#6ee7b7')">
-                    </div>
-                </div>
-            </div>
-
-            {{-- ─── 输入区 ─── --}}
-            <div style="padding:20px;">
-                {{-- 奖励提示 --}}
-                <div style="text-align:center; margin-bottom:14px; padding:10px; border-radius:12px;"
-                    :style="boxType === 'rare' ?
-                        'background:rgba(124,58,237,.15); border:1px solid rgba(167,139,250,.25);' :
-                        boxType === 'trap' ?
-                        'background:rgba(220,38,38,.1); border:1px solid rgba(248,113,113,.2);' :
-                        'background:rgba(16,185,129,.1); border:1px solid rgba(52,211,153,.2);'">
-                    <div style="font-size:13px; opacity:.8;"
-                        x-text="
-                        boxType === 'rare' ? '✨ 稀有箱 · 奖励丰厚，手速要快！' :
-                        boxType === 'trap' ? '⚠️ 黑化箱 · 开了可能倒扣金币！谨慎开启！' :
-                        '🎁 发送正确暗号即可开箱领奖'
-                    "
-                        style="color:rgba(255,255,255,.75);"></div>
-                </div>
-
-                {{-- 暗号输入框 --}}
-                <div style="margin-bottom:12px;">
-                    <input type="text" x-model="inputCode" placeholder="请输入暗号（区分大小写）"
-                        @keydown.enter="doClaimFromPanel()" @input="inputCode = $event.target.value.toUpperCase()"
-                        style="width:100%; border-radius:10px; padding:12px 14px; font-size:15px;
-                               font-weight:bold; text-align:center; letter-spacing:4px; text-transform:uppercase;
-                               background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2);
-                               color:#fff; box-sizing:border-box; outline:none; transition:border-color .15s;"
-                        :style="boxType === 'rare' ? '&:focus { border-color:#a78bfa; }' : ''">
-                </div>
-
-                {{-- 提交按钮 --}}
-                <button @click="doClaimFromPanel()" :disabled="!inputCode.trim() || claiming"
-                    style="width:100%; border:none; border-radius:12px; padding:13px; font-size:15px;
-                           font-weight:900; cursor:pointer; transition:all .2s; letter-spacing:2px;"
-                    :style="(!inputCode.trim() || claiming) ? {
-                        background: 'rgba(255,255,255,.08)',
-                        color: 'rgba(255,255,255,.3)',
-                        cursor: 'not-allowed'
-                    } : boxType === 'rare' ? {
-                        background: 'linear-gradient(135deg,#7c3aed,#8b5cf6,#a78bfa)',
-                        color: '#fff',
-                        boxShadow: '0 4px 20px rgba(124,58,237,.5)'
-                    } : boxType === 'trap' ? {
-                        background: 'linear-gradient(135deg,#b91c1c,#dc2626,#ef4444)',
-                        color: '#fff',
-                        boxShadow: '0 4px 20px rgba(220,38,38,.5)'
-                    } : {
-                        background: 'linear-gradient(135deg,#059669,#10b981,#34d399)',
-                        color: '#fff',
-                        boxShadow: '0 4px 20px rgba(16,185,129,.5)'
-                    }">
-                    <span x-text="claiming ? '🎁 开箱中…' : '🎁 开箱！'"></span>
-                </button>
-            </div>
-
-            {{-- ─── 底部关闭 ─── --}}
-            <div style="padding:8px 20px 12px; display:flex; justify-content:center;">
-                <button @click="show = false"
-                    style="padding:6px 24px; background:rgba(255,255,255,.06); border:none; border-radius:20px;
-                           font-size:12px; color:rgba(255,255,255,.4); cursor:pointer; transition:all .15s;"
-                    onmouseover="this.style.background='rgba(255,255,255,.12)'"
-                    onmouseout="this.style.background='rgba(255,255,255,.06)'">
-                    关闭
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<style>
-    @keyframes mb-pulse {
-
-        0%,
-        100% {
-            transform: scale(1);
-        }
-
-        50% {
-            transform: scale(1.08);
-        }
-    }
-
-    @keyframes mb-shake {
-
-        0%,
-        100% {
-            transform: translateX(0);
-        }
-
-        20%,
-        60% {
-            transform: translateX(-4px);
-        }
-
-        40%,
-        80% {
-            transform: translateX(4px);
-        }
-    }
-</style>
-
-<script>
-    /**
-     * 神秘箱子悬浮按钮 Alpine 组件
-     * 支持拖动 + 位置持久化 + 倒计时显示
-     */
-    function mysteryBoxFab() {
-        const STORAGE_KEY = 'mystery_box_fab_pos';
-        const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
-
-        return {
-            visible: false,
-            posX: saved?.x ?? 18,
-            posY: saved?.y ?? 240,
-            dragging: false,
-            _startX: 0,
-            _startY: 0,
-            _origX: 0,
-            _origY: 0,
-            _moved: false,
-
-            boxType: 'normal',
-            boxTypeName: '普通神秘箱',
-            boxEmoji: '📦',
-            secondsLeft: null,
-            totalSeconds: null,
-            _timer: null,
-
-            /**
-             * 初始化：轮询接口检测箱子
-             */
-            init() {
-                this.checkStatus();
-                // 每5秒轮询一次
-                setInterval(() => this.checkStatus(), 5000);
-            },
-
-            /**
-             * 检查当前是否有可领取的箱子
-             */
-            async checkStatus() {
-                try {
-                    const res = await fetch('/mystery-box/status');
-                    const data = await res.json();
-
-                    if (data.active) {
-                        this.visible = true;
-                        this.boxType = data.box_type;
-                        this.boxTypeName = data.type_name;
-                        this.boxEmoji = data.type_emoji;
-                        this.secondsLeft = data.seconds_left;
-                        if (this.totalSeconds === null || data.seconds_left > this.totalSeconds) {
-                            this.totalSeconds = data.seconds_left;
-                        }
-                        this.startCountdown();
-
-                        // ── 全局标志：供聊天框暗号拦截使用 ──
-                        window._mysteryBoxActive = true;
-                        window._mysteryBoxPasscode = data.passcode ?? null;
-
-                        // 同步面板数据
-                        const panel = document.getElementById('mystery-box-panel');
-                        if (panel) {
-                            const pd = Alpine.$data(panel);
-                            pd.boxType = data.box_type;
-                            pd.boxTypeName = data.type_name;
-                            pd.boxEmoji = data.type_emoji;
-                            pd.secondsLeft = data.seconds_left;
-                            pd.totalSeconds = this.totalSeconds;
-                        }
-                    } else {
-                        this.visible = false;
-                        clearInterval(this._timer);
-
-                        // ── 清除全局标志 ──
-                        window._mysteryBoxActive = false;
-                        window._mysteryBoxPasscode = null;
-
-                        // 关闭面板
-                        const panel = document.getElementById('mystery-box-panel');
-                        if (panel) Alpine.$data(panel).show = false;
-                    }
-                } catch {}
-            },
-
-            /**
-             * 启动倒计时（本地）
-             */
-            startCountdown() {
-                clearInterval(this._timer);
-                this._timer = setInterval(() => {
-                    if (this.secondsLeft !== null && this.secondsLeft > 0) {
-                        this.secondsLeft--;
-                        // 同步面板
-                        const panel = document.getElementById('mystery-box-panel');
-                        if (panel) Alpine.$data(panel).secondsLeft = this.secondsLeft;
-                    } else {
-                        clearInterval(this._timer);
-                        this.visible = false;
-                    }
-                }, 1000);
-            },
-
-            /**
-             * 拖动开始
-             */
-            startDrag(e) {
-                this.dragging = true;
-                this._moved = false;
-                this._startX = e.clientX;
-                this._startY = e.clientY;
-                this._origX = this.posX;
-                this._origY = this.posY;
-                e.currentTarget.setPointerCapture?.(e.pointerId);
-            },
-
-            /**
-             * 拖动移动
-             */
-            onDrag(e) {
-                if (!this.dragging) return;
-                const dx = e.clientX - this._startX;
-                const dy = e.clientY - this._startY;
-                if (Math.abs(dx) > 3 || Math.abs(dy) > 3) this._moved = true;
-                this.posX = Math.max(4, Math.min(window.innerWidth - 80, this._origX + dx));
-                this.posY = Math.max(4, Math.min(window.innerHeight - 70, this._origY + dy));
-            },
-
-            /**
-             * 拖动结束，非拖动时打开面板
-             */
-            endDrag(e) {
-                if (!this.dragging) return;
-                this.dragging = false;
-                localStorage.setItem(STORAGE_KEY, JSON.stringify({
-                    x: this.posX,
-                    y: this.posY
-                }));
-                if (!this._moved) {
-                    // 打开快捷输入面板
-                    const panel = document.getElementById('mystery-box-panel');
-                    if (panel) Alpine.$data(panel).show = true;
-                }
-            },
-        };
-    }
-
-    /**
-     * 神秘箱子快捷输入面板 Alpine 组件
-     */
-    function mysteryBoxPanel() {
-        return {
-            show: false,
-            boxType: 'normal',
-            boxTypeName: '神秘箱',
-            boxEmoji: '📦',
-            secondsLeft: null,
-            totalSeconds: null,
-            inputCode: '',
-            claiming: false,
-
-            /**
-             * 从面板提交开箱暗号
-             */
-            async doClaimFromPanel() {
-                if (!this.inputCode.trim() || this.claiming) return;
-                this.claiming = true;
-
-                const result = await window.mysteryBoxClaim(this.inputCode.trim());
-
-                this.claiming = false;
-
-                if (result.ok) {
-                    this.show = false;
-                    this.inputCode = '';
-                }
-            },
-        };
-    }
-
-    /**
-     * 全局开箱函数（可被聊天框暗号处理逻辑调用）
-     *
-     * @param {string} passcode 用户输入的暗号
-     * @returns {Promise<{ok: boolean, message?: string, reward?: number}>}
-     */
-    window.mysteryBoxClaim = async function(passcode) {
-        try {
-            const res = await fetch('/mystery-box/claim', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Accept': 'application/json',
-                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content,
-                },
-                body: JSON.stringify({
-                    passcode
-                }),
-            });
-            const data = await res.json();
-
-            if (data.ok) {
-                // 成功动画提示
-                const isPositive = data.reward > 0;
-                window.chatDialog?.alert(
-                    data.message || '开箱成功！',
-                    isPositive ? '🎉 恭喜！' : '☠️ 中了陷阱！',
-                    isPositive ? '#10b981' : '#ef4444',
-                );
-                // 更新全局金币余额
-                if (window.__chatUser) window.__chatUser.jjb = data.balance;
-            } else {
-                window.chatDialog?.alert(data.message || '开箱失败', '提示', '#f59e0b');
-            }
-
-            return data;
-        } catch {
-            window.chatDialog?.alert('网络异常，请稍后重试。', '错误', '#ef4444');
-            return {
-                ok: false
-            };
-        }
-    };
-</script>
+{{-- 神秘箱子的前台 UI 弹窗和悬浮提醒已按照用户要求彻底取消 --}}

resources/views/chat/partials/layout/toolbar.blade.php

@@ -18,6 +18,7 @@
     <div class="tool-btn" onclick="openShopModal()" title="购买道具">商店</div>
     <div class="tool-btn" onclick="saveExp()" title="手动存经验点">存点</div>
     <div class="tool-btn" onclick="openGameHall()" title="娱乐游戏大厅">娱乐</div>
+    <div class="tool-btn" onclick="window.dispatchEvent(new CustomEvent('open-earn-panel'))" title="看视频赚金币">赚钱</div>
     <div class="tool-btn" onclick="openBankModal()" title="银行存取金币">银行</div>
     <div class="tool-btn" onclick="openMarriageStatusModal()" title="婚姻状态">婚姻</div>
     <div class="tool-btn" onclick="openFriendPanel()" title="好友列表">好友</div>

routes/web.php

@@ -320,6 +320,9 @@ Route::middleware(['chat.auth'])->group(function () {
     Route::post('/feedback/{id}/reply', [FeedbackController::class, 'reply'])->middleware('throttle:10,1')->name('feedback.reply');
     // 删除反馈（本人24小时内或管理员）
     Route::delete('/feedback/{id}', [FeedbackController::class, 'destroy'])->name('feedback.destroy');
+
+    // ---- 赚金币看视频等任务 ----
+    Route::post('/earn/video-reward', [\App\Http\Controllers\EarnController::class, 'claimVideoReward'])->name('earn.video_reward');
 });
 
 // ═══════════════════════════════════════════════════════════════════