feat: 猜成语游戏 - 完整题库、管理后台、答题弹窗

- 创建 idioms 表（102条谜语式成语题库）和 idiom_game_rounds 表 - 后台成语管理页面：增删改题目 + 游戏参数（金币/经验/间隔）内联设置 + 出题按钮 - IdiomQuizController：出题/答题/当前回合查询，Redis 防并发抢答 - IdiomGameStarted / IdiomGameAnswered 广播事件 - 前端答题弹窗模块：聊天消息带【答题】按钮，点击弹出输入框 - GameConfig 注册 idiom 游戏，由 admin.game-configs 统一管理开关
2026-04-28 23:42:48 +08:00
parent 461c6a6f56
commit 4ff62e29bd
20 changed files with 1497 additions and 1 deletions
@@ -291,6 +291,10 @@ import { bindChatInitialStateControls } from "./chat-room/initial-state.js";
 // 拍一拍模块
 import "./chat-room/pat.js";

+// 猜成语游戏模块
+import "./chat-room/idiom-quiz.js";
+import { bindIdiomQuizControls } from "./chat-room/idiom-quiz.js";
+
 // 斜杠命令菜单
 import { bindSlashCommands, registerSlashCommand } from "./chat-room/slash-commands.js";

@@ -778,4 +782,5 @@ if (typeof window !== "undefined") {
    bindChatBotControls();
    bindGuestbookControls();
    bindFeedbackControls();
+    bindIdiomQuizControls();
 }
@@ -366,6 +366,41 @@ export function bindChatEvents() {
        }
        enqueueChatMessage(msg);

+        // 猜成语消息：追加【答题】按钮
+        if (msg.idom_game_round_id || msg.idiom_game_round_id) {
+            const roundId = msg.idom_game_round_id || msg.idiom_game_round_id;
+            const hint = msg.content || "";
+            const rewardGold = msg.idiom_reward_gold || 0;
+            const rewardExp = msg.idiom_reward_exp || 0;
+
+            // 延迟等消息渲染完成再追加按钮
+            setTimeout(() => {
+                const containers = [
+                    document.getElementById("chat-messages-container"),
+                    document.getElementById("chat-messages-container2"),
+                ];
+                containers.forEach((container) => {
+                    if (!container) return;
+                    const lastMsg = container.lastElementChild;
+                    if (!lastMsg || lastMsg.querySelector("[data-idiom-answer-btn]")) return;
+                    if (lastMsg.dataset.fromUser !== "星海小博士") return;
+
+                    const btn = document.createElement("button");
+                    btn.type = "button";
+                    btn.dataset.idiomAnswerBtn = String(roundId);
+                    btn.dataset.idiomHint = hint;
+                    btn.dataset.idiomGold = String(rewardGold);
+                    btn.dataset.idiomExp = String(rewardExp);
+                    btn.textContent = "🎯 答题";
+                    btn.style.cssText =
+                        "margin-left:8px;padding:2px 12px;background:linear-gradient(135deg,#7c3aed,#a78bfa);" +
+                        "color:#fff;border:none;border-radius:999px;font-size:11px;cursor:pointer;" +
+                        "font-weight:bold;vertical-align:middle;";
+                    lastMsg.appendChild(btn);
+                });
+            }, 50);
+        }
+
        if (msg.action === "vip_presence" && typeof window.showVipPresenceBanner === "function") {
            window.showVipPresenceBanner(msg);
        }
@@ -470,6 +505,20 @@ export function bindChatEvents() {
        }
    });

+    // chat:idiom-started — 猜成语出题
+    window.addEventListener("chat:idiom-started", (e) => {
+        if (typeof window.handleIdiomGameStarted === "function") {
+            window.handleIdiomGameStarted(e);
+        }
+    });
+
+    // chat:idiom-answered — 猜成语答题结果
+    window.addEventListener("chat:idiom-answered", (e) => {
+        if (typeof window.handleIdiomGameAnswered === "function") {
+            window.handleIdiomGameAnswered(e);
+        }
+    });
+
    // Echo 级监听器（延迟绑定，等待 Echo 就绪）
    document.addEventListener("DOMContentLoaded", () => {
        setupScreenClearedListener();
@@ -0,0 +1,215 @@
+// 猜成语游戏前端模块
+// 监听 IdiomGameStarted / IdiomGameAnswered 事件，提供答题弹窗功能
+
+function csrf() {
+    return document.querySelector('meta[name="csrf-token"]')?.content ?? "";
+}
+
+let currentRoundId = 0;
+let currentRoomId = 0;
+
+/**
+ * 收到猜成语出题事件时，在聊天窗口显示提示消息。
+ */
+function handleIdiomGameStarted(e) {
+    const { round_id, hint, reward_gold, reward_exp, message } = e.detail || {};
+    if (!round_id || !hint) return;
+
+    currentRoundId = round_id;
+    currentRoomId = window.chatContext?.roomId || 0;
+
+    // 追加一条聊天室消息（由 MessageSent 事件负责渲染，不重复添加）
+    // 这里只存储当前回合信息
+    console.log(`猜成语开始：${hint}，奖励 ${reward_gold}金/${reward_exp}经验`);
+}
+
+/**
+ * 收到猜成语结果事件。
+ */
+function handleIdiomGameAnswered(e) {
+    const { answer, winner_username, reward_gold, reward_exp } = e.detail || {};
+    if (!answer) return;
+
+    currentRoundId = 0;
+
+    // 如果当前用户打开答题弹窗但被别人抢先了，关闭弹窗
+    const answerModal = document.getElementById("idiom-answer-modal");
+    if (answerModal && answerModal.style.display !== "none") {
+        answerModal.style.display = "none";
+        window.chatToast?.show({
+            title: "被抢先了",
+            message: `${winner_username} 率先答对了「${answer}」，下次加油！`,
+            icon: "😅",
+            color: "#f59e0b",
+            duration: 4000,
+        });
+    }
+}
+
+/**
+ * 打开答题弹窗。
+ */
+function openIdiomAnswerModal(roundId, hint, rewardGold, rewardExp) {
+    currentRoundId = roundId;
+    currentRoomId = window.chatContext?.roomId || 0;
+
+    const modal = document.getElementById("idiom-answer-modal");
+    if (!modal) return;
+
+    const hintEl = document.getElementById("idiom-answer-hint");
+    const rewardEl = document.getElementById("idiom-answer-reward");
+    if (hintEl) hintEl.textContent = hint;
+    if (rewardEl) rewardEl.textContent = `🎁 答对奖励：${rewardGold} 金币 + ${rewardExp} 经验`;
+
+    modal.style.display = "flex";
+
+    const input = document.getElementById("idiom-answer-input");
+    if (input) {
+        input.value = "";
+        input.focus();
+        input.disabled = false;
+    }
+
+    const submitBtn = document.getElementById("idiom-answer-submit");
+    if (submitBtn) {
+        submitBtn.disabled = false;
+        submitBtn.textContent = "提交答案";
+    }
+
+    const feedbackEl = document.getElementById("idiom-answer-feedback");
+    if (feedbackEl) feedbackEl.textContent = "";
+}
+
+/**
+ * 关闭答题弹窗。
+ */
+function closeIdiomAnswerModal() {
+    const modal = document.getElementById("idiom-answer-modal");
+    if (modal) modal.style.display = "none";
+}
+
+/**
+ * 提交答案。
+ */
+async function submitIdiomAnswer() {
+    const input = document.getElementById("idiom-answer-input");
+    const feedbackEl = document.getElementById("idiom-answer-feedback");
+    const submitBtn = document.getElementById("idiom-answer-submit");
+
+    if (!input || !feedbackEl || !submitBtn) return;
+
+    const answer = input.value.trim();
+    if (!answer) {
+        feedbackEl.textContent = "请输入成语答案";
+        feedbackEl.style.color = "#ef4444";
+        return;
+    }
+
+    submitBtn.disabled = true;
+    submitBtn.textContent = "提交中...";
+
+    try {
+        const response = await fetch("/idiom-quiz/answer", {
+            method: "POST",
+            headers: {
+                "X-CSRF-TOKEN": csrf(),
+                "Content-Type": "application/json",
+                "Accept": "application/json",
+            },
+            body: JSON.stringify({
+                round_id: currentRoundId,
+                answer: answer,
+                room_id: currentRoomId,
+            }),
+        });
+
+        const data = await response.json();
+
+        if (data.status === "success") {
+            feedbackEl.textContent = data.message || "🎉 回答正确！";
+            feedbackEl.style.color = "#16a34a";
+            input.disabled = true;
+
+            // 延迟关闭弹窗
+            setTimeout(() => {
+                closeIdiomAnswerModal();
+            }, 2000);
+        } else {
+            feedbackEl.textContent = data.message || "答案不正确";
+            feedbackEl.style.color = "#ef4444";
+            submitBtn.disabled = false;
+            submitBtn.textContent = "提交答案";
+            input.focus();
+            input.select();
+        }
+    } catch (error) {
+        feedbackEl.textContent = "网络错误，请稍后重试";
+        feedbackEl.style.color = "#ef4444";
+        submitBtn.disabled = false;
+        submitBtn.textContent = "提交答案";
+    }
+}
+
+// ── 事件绑定 ──
+
+export function bindIdiomQuizControls() {
+    // 已经绑定的不再重复绑定
+    if (document.getElementById("idiom-answer-modal")?.dataset?.idiomBound) return;
+    const modal = document.getElementById("idiom-answer-modal");
+    if (modal) modal.dataset.idiomBound = "1";
+
+    // 关闭按钮
+    document.addEventListener("click", (e) => {
+        const closeBtn = e.target.closest("[data-idiom-answer-close]");
+        if (closeBtn) {
+            closeIdiomAnswerModal();
+            return;
+        }
+
+        // 点击遮罩层关闭
+        const overlay = e.target.closest("#idiom-answer-modal");
+        if (overlay && e.target === overlay) {
+            closeIdiomAnswerModal();
+        }
+    });
+
+    // 提交按钮
+    document.addEventListener("click", (e) => {
+        const submitBtn = e.target.closest("[data-idiom-answer-submit]");
+        if (submitBtn) {
+            e.preventDefault();
+            submitIdiomAnswer();
+        }
+    });
+
+    // 输入框 Enter 提交
+    document.addEventListener("keydown", (e) => {
+        const input = e.target.closest("#idiom-answer-input");
+        if (input && e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            submitIdiomAnswer();
+        }
+    });
+
+    // 聊天消息中的【答题】按钮点击
+    document.addEventListener("click", (e) => {
+        const btn = e.target.closest("[data-idiom-answer-btn]");
+        if (!btn) return;
+
+        const roundId = parseInt(btn.dataset.idiomAnswerBtn || "0", 10);
+        const hint = btn.dataset.idiomHint || "";
+        const rewardGold = parseInt(btn.dataset.idiomGold || "0", 10);
+        const rewardExp = parseInt(btn.dataset.idiomExp || "0", 10);
+
+        if (roundId > 0) {
+            openIdiomAnswerModal(roundId, hint, rewardGold, rewardExp);
+        }
+    });
+}
+
+// ── 挂载到 window ──
+window.openIdiomAnswerModal = openIdiomAnswerModal;
+window.closeIdiomAnswerModal = closeIdiomAnswerModal;
+window.submitIdiomAnswer = submitIdiomAnswer;
+window.handleIdiomGameStarted = handleIdiomGameStarted;
+window.handleIdiomGameAnswered = handleIdiomGameAnswered;
@@ -269,6 +269,16 @@ export function initChat(roomId) {
            console.log("拍一拍:", e);
            window.dispatchEvent(new CustomEvent("chat:pat", { detail: e }));
        })
+        // 监听猜成语出题
+        .listen("IdiomGameStarted", (e) => {
+            console.log("猜成语:", e);
+            window.dispatchEvent(new CustomEvent("chat:idiom-started", { detail: e }));
+        })
+        // 监听猜成语答题结果
+        .listen("IdiomGameAnswered", (e) => {
+            console.log("猜成语结果:", e);
+            window.dispatchEvent(new CustomEvent("chat:idiom-answered", { detail: e }));
+        })
        // 监听任命公告（礼花 + 隆重弹窗）
        .listen("AppointmentAnnounced", (e) => {
            console.log("任命公告:", e);
@@ -0,0 +1,331 @@
+@extends('admin.layouts.app')
+
+@section('title', '猜成语题库管理')
+
+@section('content')
+    @php require resource_path('views/admin/partials/list-theme.php'); @endphp
+
+    @php
+        $idiomPayload = $idioms->mapWithKeys(
+            fn($item) => [
+                (string) $item->id => [
+                    'id' => $item->id,
+                    'answer' => $item->answer,
+                    'hint' => $item->hint,
+                    'sort' => $item->sort,
+                    'is_active' => (bool) $item->is_active,
+                    'update_url' => route('admin.idioms.update', $item->id),
+                    'toggle_url' => route('admin.idioms.toggle', $item->id),
+                ],
+            ],
+        );
+
+        $idiomConfig = \App\Models\GameConfig::forGame('idiom');
+        $idiomParams = $idiomConfig?->params ?? [];
+    @endphp
+
+    <script type="application/json" id="admin-idioms-data">@json($idiomPayload)</script>
+
+    <div class="{{ $adminListPageClass }}">
+
+        {{-- 页头 --}}
+        <div class="{{ $adminListHeaderCardClass }}">
+            <div>
+                <h2 class="{{ $adminListHeaderTitleClass }}">🧩 猜成语题库管理</h2>
+                <p class="{{ $adminListHeaderSubtitleClass }}">
+                    管理猜成语游戏的题目库，共 <strong class="text-indigo-600">{{ $idioms->count() }}</strong> 条题目
+                </p>
+            </div>
+        </div>
+
+        {{-- 游戏参数 + 出题 --}}
+        <div class="{{ $adminListCardClass }}">
+            <div class="{{ $adminListSectionHeadClass }}">
+                <h3 class="{{ $adminListSectionTitleClass }}">⚙️ 游戏参数</h3>
+            </div>
+            <form action="{{ route('admin.idioms.settings.save') }}" method="POST" class="p-5">
+                @csrf
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div>
+                        <label class="{{ $adminListFilterLabelClass }}">答对奖励金币</label>
+                        <input type="number" name="reward_gold"
+                            value="{{ old('reward_gold', $idiomParams['reward_gold'] ?? 50) }}" min="0"
+                            class="w-full {{ $adminListFilterInputClass }}">
+                    </div>
+                    <div>
+                        <label class="{{ $adminListFilterLabelClass }}">答对奖励经验</label>
+                        <input type="number" name="reward_exp"
+                            value="{{ old('reward_exp', $idiomParams['reward_exp'] ?? 30) }}" min="0"
+                            class="w-full {{ $adminListFilterInputClass }}">
+                    </div>
+                    <div>
+                        <label class="{{ $adminListFilterLabelClass }}">自动出题间隔（分钟）</label>
+                        <input type="number" name="auto_start_interval"
+                            value="{{ old('auto_start_interval', $idiomParams['auto_start_interval'] ?? 0) }}" min="0"
+                            class="w-full {{ $adminListFilterInputClass }}">
+                        <p class="text-xs text-gray-400 mt-1">0=仅手动出题</p>
+                    </div>
+                </div>
+                <div class="mt-4 flex items-center gap-4">
+                    <button type="submit" class="{{ $adminListPrimaryButtonClass }}">
+                        💾 保存参数
+                    </button>
+                    <span class="text-sm text-gray-400">|</span>
+                    <label class="text-sm text-gray-600">选择房间：</label>
+                    <select id="idiom-start-room" class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm">
+                        @foreach (\App\Models\Room::orderBy('id')->get() as $room)
+                            <option value="{{ $room->id }}">{{ $room->name }}</option>
+                        @endforeach
+                    </select>
+                    <button type="button" id="idiom-start-btn"
+                        class="inline-flex items-center gap-1.5 px-4 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white text-sm font-bold rounded-lg hover:opacity-90 transition">
+                        🧩 出题
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        {{-- 题目列表 --}}
+        <div class="{{ $adminListCardClass }}">
+            <div class="{{ $adminListTableWrapClass }}">
+                <table class="{{ $adminListTableClass }}">
+                    <thead class="{{ $adminListTableHeadRowClass }}">
+                    <tr>
+                        <th class="{{ $adminListTableHeadCellClass }}">排序</th>
+                        <th class="{{ $adminListTableHeadCellClass }}">成语答案</th>
+                        <th class="{{ $adminListTableHeadCellClass }} w-2/5">谜语提示</th>
+                        <th class="{{ $adminListTableHeadCellClass }} text-center">状态</th>
+                        <th class="{{ $adminListTableHeadCellClass }} text-right">操作</th>
+                    </tr>
+                </thead>
+                    <tbody class="{{ $adminListTableBodyClass }}">
+                    @foreach ($idioms as $item)
+                        <tr id="row-{{ $item->id }}" class="{{ $adminListTableRowClass }} {{ $item->is_active ? '' : 'opacity-50' }}">
+                            <td class="px-4 py-3 {{ $adminListSecondaryTextClass }}">{{ $item->sort }}</td>
+                            <td class="px-4 py-3 font-bold {{ $adminListPrimaryTextClass }}">{{ $item->answer }}</td>
+                            <td class="px-4 py-3 {{ $adminListBodyTextClass }} text-sm">{{ $item->hint }}</td>
+                            <td class="px-4 py-3 text-center">
+                                <button type="button" data-idiom-toggle-id="{{ $item->id }}"
+                                    id="toggle-{{ $item->id }}"
+                                    class="{{ $adminListBadgeBaseClass }} px-2 py-1 transition
+                                        {{ $item->is_active ? 'border-emerald-200 bg-emerald-100 text-emerald-700 hover:bg-emerald-200' : 'border-gray-200 bg-gray-100 text-gray-500 hover:bg-gray-200' }}">
+                                    {{ $item->is_active ? '启用' : '禁用' }}
+                                </button>
+                            </td>
+                            <td class="px-4 py-3 text-right">
+                                <button type="button" data-idiom-edit-id="{{ $item->id }}"
+                                    class="{{ $adminListActionButtonClass }} bg-indigo-50 text-indigo-700 hover:bg-indigo-100 mr-1">
+                                    编辑
+                                </button>
+                                <form action="{{ route('admin.idioms.destroy', $item->id) }}" method="POST"
+                                    class="inline" data-idiom-delete-confirm="确定删除题目「{{ $item->answer }}」？">
+                                    @csrf @method('DELETE')
+                                    <button type="submit"
+                                        class="{{ $adminListActionButtonClass }} bg-red-50 text-red-600 hover:bg-red-100">
+                                        删除
+                                    </button>
+                                </form>
+                            </td>
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        {{-- 新增题目卡片 --}}
+        <div class="{{ $adminListCardClass }}">
+            <div class="{{ $adminListSectionHeadClass }}">
+                <h3 class="{{ $adminListSectionTitleClass }}">➕ 新增成语题目</h3>
+            </div>
+            <form action="{{ route('admin.idioms.store') }}" method="POST" class="p-5">
+                @csrf
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label class="{{ $adminListFilterLabelClass }}">成语答案</label>
+                        <input type="text" name="answer" value="{{ old('answer') }}" placeholder="画蛇添足" required
+                            class="w-full {{ $adminListFilterInputClass }}">
+                    </div>
+                    <div>
+                        <label class="{{ $adminListFilterLabelClass }}">排序</label>
+                        <input type="number" name="sort" value="{{ old('sort', 0) }}" min="0"
+                            class="w-full {{ $adminListFilterInputClass }}">
+                    </div>
+                    <div class="md:col-span-2">
+                        <label class="{{ $adminListFilterLabelClass }}">谜语提示</label>
+                        <input type="text" name="hint" value="{{ old('hint') }}" placeholder="🧩 四人比赛画蛇，最慢的那个反而多此一举。猜一成语" required
+                            class="w-full {{ $adminListFilterInputClass }}">
+                    </div>
+                </div>
+                <div class="mt-4 flex items-center gap-4">
+                    <button type="submit" class="{{ $adminListPrimaryButtonClass }}">
+                        💾 添加题目
+                    </button>
+                    <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
+                        <input type="checkbox" name="is_active" value="1" checked class="rounded">
+                        立即启用
+                    </label>
+                </div>
+            </form>
+        </div>
+
+    </div>
+
+    {{-- 编辑弹窗 --}}
+    <div id="edit-modal" class="hidden fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl w-full max-w-lg shadow-2xl">
+            <div class="p-5 border-b border-gray-100 flex justify-between items-center">
+                <h3 class="font-bold text-gray-800">✏️ 编辑成语题目</h3>
+                <button type="button" data-idiom-edit-close class="text-gray-400 hover:text-gray-600 text-xl">✕</button>
+            </div>
+            <form id="edit-form" method="POST" class="p-5">
+                @csrf @method('PUT')
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold text-gray-600 mb-1">成语答案</label>
+                        <input type="text" name="answer" id="edit-answer" required
+                            class="w-full border border-gray-300 rounded-lg p-2 text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold text-gray-600 mb-1">排序</label>
+                        <input type="number" name="sort" id="edit-sort" min="0"
+                            class="w-full border border-gray-300 rounded-lg p-2 text-sm">
+                    </div>
+                    <div class="md:col-span-2">
+                        <label class="block text-xs font-bold text-gray-600 mb-1">谜语提示</label>
+                        <input type="text" name="hint" id="edit-hint" required
+                            class="w-full border border-gray-300 rounded-lg p-2 text-sm">
+                    </div>
+                    <div class="md:col-span-2">
+                        <label class="flex items-center gap-2 text-sm cursor-pointer">
+                            <input type="checkbox" name="is_active" id="edit-is-active" value="1" class="rounded">
+                            启用此题目
+                        </label>
+                    </div>
+                </div>
+                <div class="mt-5 flex gap-3">
+                    <button type="submit" class="{{ $adminListPrimaryButtonClass }}">
+                        💾 保存修改
+                    </button>
+                    <button type="button" data-idiom-edit-close
+                        class="{{ $adminListSecondaryButtonClass }}">
+                        取消
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+@endsection
+
+{{-- 前端编辑/切换交互脚本 --}}
+@push('scripts')
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    const idiomsDataEl = document.getElementById('admin-idioms-data');
+    if (!idiomsDataEl) return;
+    const idiomsData = JSON.parse(idiomsDataEl.textContent || '{}');
+
+    // ── 打开编辑弹窗 ──
+    document.querySelectorAll('[data-idiom-edit-id]').forEach(btn => {
+        btn.addEventListener('click', function () {
+            const id = this.dataset.idiomEditId;
+            const data = idiomsData[id];
+            if (!data) return;
+
+            document.getElementById('edit-answer').value = data.answer;
+            document.getElementById('edit-hint').value = data.hint;
+            document.getElementById('edit-sort').value = data.sort;
+            document.getElementById('edit-is-active').checked = data.is_active;
+            document.getElementById('edit-form').action = data.update_url;
+            document.getElementById('edit-modal').classList.remove('hidden');
+        });
+    });
+
+    // ── 关闭编辑弹窗 ──
+    document.querySelectorAll('[data-idiom-edit-close]').forEach(btn => {
+        btn.addEventListener('click', function () {
+            document.getElementById('edit-modal').classList.add('hidden');
+        });
+    });
+
+    // ── 切换启用/禁用（AJAX） ──
+    document.querySelectorAll('[data-idiom-toggle-id]').forEach(btn => {
+        btn.addEventListener('click', function () {
+            const id = this.dataset.idiomToggleId;
+            const data = idiomsData[id];
+            if (!data) return;
+
+            fetch(data.toggle_url, {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
+                    'Accept': 'application/json',
+                },
+            })
+            .then(r => r.json())
+            .then(res => {
+                if (res.ok) {
+                    const row = document.getElementById('row-' + id);
+                    if (row) row.style.opacity = res.is_active ? '1' : '0.5';
+                    const btn = document.getElementById('toggle-' + id);
+                    if (btn) {
+                        btn.textContent = res.is_active ? '启用' : '禁用';
+                        btn.className = (res.is_active
+                            ? 'border-emerald-200 bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
+                            : 'border-gray-200 bg-gray-100 text-gray-500 hover:bg-gray-200')
+                            + ' px-2 py-1 transition rounded-full text-xs font-semibold border';
+                    }
+                }
+            })
+            .catch(() => alert('操作失败'));
+        });
+    });
+
+    // ── 删除确认 ──
+    document.querySelectorAll('[data-idiom-delete-confirm]').forEach(form => {
+        form.addEventListener('submit', function (e) {
+            if (!confirm(this.dataset.idiomDeleteConfirm)) {
+                e.preventDefault();
+            }
+        });
+    });
+
+    // ── 出题按钮 ──
+    const startBtn = document.getElementById('idiom-start-btn');
+    if (startBtn) {
+        startBtn.addEventListener('click', function () {
+            const roomSelect = document.getElementById('idiom-start-room');
+            const roomId = roomSelect?.value;
+            if (!roomId) return;
+
+            const btn = this;
+            btn.disabled = true;
+            btn.textContent = '出题中...';
+
+            fetch('/idiom-quiz/start', {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                },
+                body: JSON.stringify({ room_id: parseInt(roomId, 10) }),
+            })
+            .then(r => r.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    alert('✅ 出题成功！提示已发送到聊天室。');
+                } else {
+                    alert(data.message || '出题失败');
+                }
+            })
+            .catch(() => alert('网络错误，出题失败'))
+            .finally(() => {
+                btn.disabled = false;
+                btn.textContent = '🧩 出题';
+            });
+        });
+    }
+});
+</script>
+@endpush
@@ -98,7 +98,11 @@
                </a>
                <a href="{{ route('admin.fishing.index') }}"
                    class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.fishing.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
-                    {!! '🎣 钓鱼事件' !!}
+                    🎣 钓鱼事件
+                </a>
+                <a href="{{ route('admin.idioms.index') }}"
+                    class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.idioms.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
+                    🧩 猜成语题库
                </a>
                <a href="{{ route('admin.departments.index') }}"
                    class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.departments.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
@@ -252,6 +252,34 @@
    @include('chat.partials.system-events')
    {{-- 初始历史消息、入场欢迎、进场特效、会员横幅和挂起婚姻事件已迁移到 resources/js/chat-room/initial-state.js --}}

+    {{-- 猜成语答题弹窗 --}}
+    <div id="idiom-answer-modal"
+        style="display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:99999;justify-content:center;align-items:center;backdrop-filter:blur(3px);">
+        <div style="background:#fff;border-radius:16px;width:min(90vw,460px);box-shadow:0 24px 64px rgba(0,0,0,.22);overflow:hidden;animation:gdSlideIn .2s ease;">
+            <div style="padding:18px 22px;background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;">
+                <div style="font-size:18px;font-weight:bold;">🧩 猜成语</div>
+                <div id="idiom-answer-reward" style="font-size:12px;margin-top:4px;opacity:.9;"></div>
+            </div>
+            <div style="padding:20px 22px;">
+                <p id="idiom-answer-hint" style="font-size:15px;color:#1e293b;line-height:1.7;margin-bottom:16px;"></p>
+                <input id="idiom-answer-input" type="text" autocomplete="off" placeholder="输入成语答案..."
+                    style="width:100%;box-sizing:border-box;padding:12px 14px;border:2px solid #e5e7eb;border-radius:10px;font-size:15px;outline:none;transition:border-color .2s;"
+                    onfocus="this.style.borderColor='#7c3aed'" onblur="this.style.borderColor='#e5e7eb'">
+                <p id="idiom-answer-feedback" style="margin-top:8px;font-size:13px;min-height:20px;"></p>
+            </div>
+            <div style="padding:0 22px 18px;display:flex;gap:10px;">
+                <button type="button" data-idiom-answer-close
+                    style="flex:1;padding:11px;background:#f3f4f6;color:#555;border:none;border-radius:10px;font-size:14px;cursor:pointer;font-weight:bold;">
+                    取消
+                </button>
+                <button type="button" data-idiom-answer-submit id="idiom-answer-submit"
+                    style="flex:1;padding:11px;background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;border:none;border-radius:10px;font-size:14px;cursor:pointer;font-weight:bold;">
+                    提交答案
+                </button>
+            </div>
+        </div>
+    </div>
+
 </body>

 </html>