chatroom/resources/views/chat/partials/global-dialog.blade.php

{{--
    文件功能：全局自定义弹窗组件（替代原生 alert / confirm / prompt）

    提供全局 JS API：
      - window.chatDialog.alert(message, title?, color?)                    → Promise<void>
      - window.chatDialog.confirm(message, title?, color?, confirmText?, cancelText?) → Promise<boolean>
      - window.chatDialog.prompt(message, defaultVal?, title?, color?)      → Promise<string|null>

    任何 JS 代码（Alpine.js 组件、toolbar、scripts 等）均可直接调用，
    无需使用浏览器原生弹窗，避免 Chrome/Edge 兼容性问题。

    @author   ChatRoom Laravel
    @version  2.0.0
--}}

{{-- ─── 全局弹窗遮罩 ─── --}}
<div id="global-dialog-modal"
    style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
           z-index:999999; justify-content:center; align-items:center;">
    <div id="global-dialog-box"
        style="background:#fff; border-radius:10px; width:320px; max-width:90vw;
               box-shadow:0 12px 40px rgba(0,0,0,.35); overflow:hidden;
               animation:gdSlideIn .18s ease;">

        {{-- 标题栏（颜色由 JS 动态设置） --}}
        <div id="global-dialog-header" style="padding:13px 18px; font-size:14px; font-weight:bold; color:#fff;">
        </div>

        {{-- 内容区 --}}
        <div id="global-dialog-message"
            style="padding:18px 18px 8px; font-size:13px; color:#374151; white-space:pre-wrap;
                   line-height:1.6; word-break:break-word;">
        </div>

        {{-- 输入框（prompt 模式专用） --}}
        <div id="global-dialog-input-wrap" style="display:none; padding:0 18px 12px;">
            <textarea id="global-dialog-input"
                style="width:100%; box-sizing:border-box; border:1px solid #d1d5db; border-radius:6px;
                       padding:8px 10px; font-size:13px; color:#374151; resize:vertical;
                       min-height:72px; line-height:1.5; outline:none; font-family:inherit;
                       transition:border-color .15s;"
                placeholder="请输入内容…"></textarea>
        </div>

        {{-- 按钮区 --}}
        <div style="display:flex; gap:10px; padding:0 18px 16px;">
            <button id="global-dialog-cancel-btn" data-chat-dialog-action="cancel"
                style="flex:1; padding:9px; background:#f3f4f6; color:#555;
                       border:1px solid #d1d5db; border-radius:6px;
                       font-size:13px; cursor:pointer; transition:background .15s;">
                取消
            </button>
            <button id="global-dialog-confirm-btn" data-chat-dialog-action="confirm"
                style="flex:1; padding:9px; color:#fff; border:none;
                       border-radius:6px; font-size:13px; font-weight:bold;
                       cursor:pointer; transition:opacity .15s;">
                确定
            </button>
        </div>
    </div>
</div>

<style>
    @keyframes gdSlideIn {
        from {
            opacity: 0;
            transform: scale(.92) translateY(-8px);
        }

        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    @keyframes fdSlideIn {
        from {
            opacity: 0;
            transform: translateY(16px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #global-dialog-cancel-btn:hover {
        background: #e5e7eb !important;
    }

    #global-dialog-confirm-btn:hover {
        opacity: .88;
    }
</style>