特性：离婚全屏公告弹窗（暗色阴郁风格+断裂心形动效）+ 先雷电后下雨双特效；弹窗触发重构为Alpine数据访问

resources/views/chat/partials/marriage-modals.blade.php

@@ -269,6 +269,76 @@
     </div>
 </div>
 
+{{-- ═══════════ 3.5. 离婚全屏公告（阴郁深色风格 + 雷雨特效） ═══════════ --}}
+<div id="marriage-divorced-modal" x-data="marriageDivorcedModal()" x-show="show" x-cloak>
+    <div x-transition
+        style="position:fixed; inset:0; background:rgba(10,14,21,.82);
+         z-index:9900; display:flex; align-items:center; justify-content:center;">
+        <div
+            style="width:460px; max-width:95vw; background:linear-gradient(160deg,#1e2433,#252d3a);
+                    border:1px solid rgba(100,116,140,.25);
+                    border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,.7); overflow:hidden; text-align:center;">
+            {{-- 头部 --}}
+            <div
+                style="padding:32px 24px 20px;
+                        background:linear-gradient(160deg,#2d3547,#1e2736);">
+                {{-- 断裂心形动效 --}}
+                <div
+                    style="font-size:52px; margin-bottom:12px; line-height:1; position:relative; display:inline-block;">
+                    <span style="display:inline-block; animation:divorce-shake 0.6s ease 0.3s both;">💔</span>
+                </div>
+                <div
+                    style="color:#94a3b8; font-weight:bold; font-size:13px; letter-spacing:3px; text-transform:uppercase; margin-bottom:10px;">
+                    — 缘尽于此 —
+                </div>
+                <div style="color:#e2e8f0; font-weight:bold; font-size:18px; margin-bottom:6px;"
+                    x-text="announcement"></div>
+                <div style="color:#64748b; font-size:12px;" x-text="subText"></div>
+            </div>
+            {{-- 底部按钮 --}}
+            <div style="padding:18px 24px;">
+                <button x-on:click="close()"
+                    style="padding:10px 40px; background:rgba(100,116,140,.15);
+                           border:1px solid rgba(100,116,140,.3); border-radius:10px;
+                           font-size:13px; color:#94a3b8; cursor:pointer; transition:all .2s;"
+                    onmouseover="this.style.background='rgba(100,116,140,.25)'"
+                    onmouseout="this.style.background='rgba(100,116,140,.15)'">
+                    知道了
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    @keyframes divorce-shake {
+        0% {
+            transform: rotate(0deg) scale(1);
+        }
+
+        20% {
+            transform: rotate(-8deg) scale(1.1);
+        }
+
+        40% {
+            transform: rotate(6deg) scale(1.05);
+        }
+
+        60% {
+            transform: rotate(-4deg) scale(1.1);
+        }
+
+        80% {
+            transform: rotate(3deg) scale(1);
+        }
+
+        100% {
+            transform: rotate(0deg) scale(1);
+        }
+    }
+</style>
+
+
 {{-- ═══════════ 4. 婚礼设置弹窗 ═══════════ --}}
 <div id="wedding-setup-modal" x-data="weddingSetupModal()" x-show="show" x-cloak>
     <div
@@ -689,6 +759,41 @@
         };
     }
 
+    /**
+     * 离婚全屏公告弹窗组件（阴郁深色风格，雷雨双特效）
+     */
+    function marriageDivorcedModal() {
+        return {
+            show: false,
+            announcement: '',
+            subText: '',
+
+            open(detail) {
+                const userName = detail.user_username ?? detail.user?.username ?? '??';
+                const partnerName = detail.partner_username ?? detail.partner?.username ?? '??';
+                this.announcement = `${userName} 与 ${partnerName} 已解除婚姻关系`;
+                this.subText = detail.message || '往昔已矣，各自珍重。';
+                this.show = true;
+
+                // 先播放雷电，再叠加下雨
+                if (window.EffectManager) {
+                    window.EffectManager.play('lightning');
+                    // 雷电通常持续约3秒，3.5秒后再起下雨（雨声会压住）
+                    setTimeout(() => {
+                        if (window.EffectManager) {
+                            window.EffectManager.play('rain');
+                        }
+                    }, 3500);
+                }
+            },
+
+            close() {
+                this.show = false;
+            }
+        };
+    }
+
+
     /**
      * 婚礼设置弹窗组件
      */
@@ -978,7 +1083,7 @@
         window.chatDialog?.alert(`+${amount.toLocaleString()} 金币已到账 🎉`, '红包到手！', '#f59e0b');
     });
 
-    /** 结婚/离婚全局公告：在聊天消息区追加一条系统消息 */
+    /** 结婚/离婚全局公告：弹出全屏通知 + 追加公屏文字 */
     window.addEventListener('chat:marriage-accepted', (e) => {
         const detail = e.detail;
         const groomName = detail.user?.username ?? detail.groom_name ?? '??';
@@ -986,17 +1091,25 @@
         if (typeof appendSystemMessage === 'function') {
             appendSystemMessage(`💑 ${groomName} 与 ${brideName} 喜结连理！`);
         }
+        // 触发全屏结婚公告弹窗（由 marriageAcceptedModal 组件监听此事件）
+        const modal = document.getElementById('marriage-accepted-modal')?._x_dataStack?.[0];
+        if (modal && typeof modal.open === 'function') modal.open(detail);
     });
+
     window.addEventListener('chat:marriage-divorced', (e) => {
-        const {
-            user_username,
-            partner_username
-        } = e.detail;
+        const detail = e.detail;
+        const userName = detail.user_username ?? detail.user?.username ?? '??';
+        const partnerName = detail.partner_username ?? detail.partner?.username ?? '??';
+        // 追加公屏文字
         if (typeof appendSystemMessage === 'function') {
-            appendSystemMessage(`💔 ${user_username} 与 ${partner_username} 解除了婚姻关系。`);
+            appendSystemMessage(`💔 ${userName} 与 ${partnerName} 解除了婚姻关系。`);
         }
+        // 触发全屏离婚公告弹窗（暗色阴郁风格 + 雷雨特效）
+        const modal = document.getElementById('marriage-divorced-modal')?._x_dataStack?.[0];
+        if (modal && typeof modal.open === 'function') modal.open(detail);
     });
 
+
     /** 页面加载完成后初始化私人频道监听 */
     document.addEventListener('DOMContentLoaded', () => {
         const userId = window.chatContext?.userId;