迁移奖励金币弹窗脚本

resources/js/chat-room.js

@@ -216,7 +216,7 @@ export {
     renderRoomsOnlineStatusToContainer,
     resolveRoomUrl,
 } from "./chat-room/rooms.js";
-export { bindRewardModalControls, openRewardModal } from "./chat-room/reward-modal.js";
+export { bindRewardModalControls, openRewardModal, rewardModal } from "./chat-room/reward-modal.js";
 export {
     bindRedPacketPanelControls,
     claimRedPacket,
@@ -387,7 +387,7 @@ import {
     renderRoomsOnlineStatusToContainer,
     resolveRoomUrl,
 } from "./chat-room/rooms.js";
-import { bindRewardModalControls, openRewardModal } from "./chat-room/reward-modal.js";
+import { bindRewardModalControls, openRewardModal, rewardModal } from "./chat-room/reward-modal.js";
 import {
     bindRedPacketPanelControls,
     claimRedPacket,
@@ -594,6 +594,7 @@ if (typeof window !== "undefined") {
         resolveRoomUrl,
         bindRewardModalControls,
         openRewardModal,
+        rewardModal,
         bindRedPacketPanelControls,
         claimRedPacket,
         closeRedPacketModal,
@@ -618,6 +619,7 @@ if (typeof window !== "undefined") {
     window.openMobileDrawer = openMobileDrawer;
     window.openUserCard = openUserCard;
     window.openRewardModal = openRewardModal;
+    window.rewardModal = rewardModal;
     window.renderMobileRoomList = renderMobileRoomList;
     window.renderMobileUserList = renderMobileUserList;
     window.scheduleRenderMobileUserList = scheduleRenderMobileUserList;

resources/js/chat-room/reward-modal.js

@@ -1,4 +1,218 @@
-// 聊天室职务奖励金币弹窗入口，提供 openRewardModal 全局兼容函数。
+// 聊天室职务奖励金币弹窗组件，负责额度查询、发放提交和全局打开入口。
+
+const EMPTY_REWARD_QUOTA = {
+    max_once: null,
+    daily_limit: null,
+    today_sent: 0,
+    daily_remaining: null,
+    recent_rewards: [],
+};
+
+/**
+ * 生成新的空额度对象，避免多个弹窗状态共用同一引用。
+ *
+ * @returns {Record<string, any>}
+ */
+function emptyRewardQuota() {
+    return {
+        ...EMPTY_REWARD_QUOTA,
+        recent_rewards: [],
+    };
+}
+
+/**
+ * 读取 CSRF Token。
+ *
+ * @returns {string}
+ */
+function csrfToken() {
+    return document.querySelector('meta[name="csrf-token"]')?.content || "";
+}
+
+/**
+ * 格式化本地时间为 MM-DD HH:mm，作为刚发放记录的临时展示时间。
+ *
+ * @returns {string}
+ */
+function currentRewardTimestamp() {
+    const now = new Date();
+    const month = String(now.getMonth() + 1).padStart(2, "0");
+    const day = String(now.getDate()).padStart(2, "0");
+    const hour = String(now.getHours()).padStart(2, "0");
+    const minute = String(now.getMinutes()).padStart(2, "0");
+
+    return `${month}-${day} ${hour}:${minute}`;
+}
+
+/**
+ * 创建职务奖励金币弹窗 Alpine 组件。
+ *
+ * @returns {Record<string, any>}
+ */
+export function rewardModal() {
+    return {
+        show: false,
+        targetUsername: "",
+        amount: "",
+        sending: false,
+        loading: false,
+        quota: emptyRewardQuota(),
+
+        /**
+         * 格式化额度数值。
+         *
+         * @param {number|null} value 额度值
+         * @returns {string}
+         */
+        fmt(value) {
+            if (value === null) {
+                return "不限";
+            }
+
+            if (value === 0) {
+                return "—";
+            }
+
+            return `${value.toLocaleString()} 金币`;
+        },
+
+        /**
+         * 关闭奖励弹窗并同步关闭用户名片弹窗。
+         *
+         * @returns {void}
+         */
+        closeRelatedModals() {
+            this.show = false;
+
+            const userModalElement = document.getElementById("user-modal-container");
+            if (!window.Alpine || !userModalElement) {
+                return;
+            }
+
+            const userModalData = window.Alpine.$data(userModalElement);
+            if (userModalData) {
+                userModalData.showUserModal = false;
+            }
+        },
+
+        /**
+         * 打开奖励弹窗并加载当前额度。
+         *
+         * @param {string} username 目标用户名
+         * @returns {Promise<void>}
+         */
+        async open(username) {
+            this.targetUsername = username;
+            this.amount = "";
+            this.sending = false;
+            this.loading = true;
+            this.show = true;
+
+            try {
+                const response = await fetch(window.chatContext.rewardQuotaUrl, {
+                    headers: {
+                        Accept: "application/json",
+                    },
+                });
+                this.quota = await response.json();
+                if (!this.quota.recent_rewards) {
+                    this.quota.recent_rewards = [];
+                }
+            } catch (error) {
+                this.quota = emptyRewardQuota();
+            }
+
+            this.loading = false;
+        },
+
+        /**
+         * 提交奖励金币发放。
+         *
+         * @returns {Promise<void>}
+         */
+        async send() {
+            if (this.sending) {
+                return;
+            }
+
+            const amount = Number.parseInt(this.amount, 10);
+            if (!amount || amount <= 0) {
+                window.chatDialog.alert("请输入有效金额", "提示", "#f59e0b");
+                return;
+            }
+
+            const maxOnce = window.chatContext?.myMaxReward;
+            if (maxOnce === 0) {
+                window.chatDialog.alert("你的职务没有奖励发放权限", "无权限", "#cc4444");
+                return;
+            }
+
+            if (maxOnce > 0 && amount > maxOnce) {
+                window.chatDialog.alert(`超出单次上限 ${maxOnce} 金币`, "超出上限", "#cc4444");
+                return;
+            }
+
+            this.sending = true;
+
+            try {
+                const response = await fetch(window.chatContext.rewardUrl, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "X-CSRF-TOKEN": csrfToken(),
+                        Accept: "application/json",
+                    },
+                    body: JSON.stringify({
+                        username: this.targetUsername,
+                        room_id: window.chatContext.roomId,
+                        amount,
+                    }),
+                });
+                const data = await response.json();
+
+                if (data.status === "success") {
+                    this.recordRewardSuccess(amount);
+                    this.closeRelatedModals();
+                    window.chatDialog.alert(data.message, "🎉 奖励发放成功", "#d97706");
+                    return;
+                }
+
+                window.chatDialog.alert(data.message || "发放失败", "操作失败", "#cc4444");
+            } catch (error) {
+                window.chatDialog.alert("网络异常，请稍后重试", "错误", "#cc4444");
+            }
+
+            this.sending = false;
+        },
+
+        /**
+         * 本地更新额度和最近发放记录。
+         *
+         * @param {number} amount 发放金额
+         * @returns {void}
+         */
+        recordRewardSuccess(amount) {
+            this.quota.today_sent += amount;
+
+            if (this.quota.daily_remaining !== null) {
+                this.quota.daily_remaining = Math.max(0, this.quota.daily_remaining - amount);
+            }
+
+            this.quota.recent_rewards.unshift({
+                target: this.targetUsername,
+                amount,
+                created_at: currentRewardTimestamp(),
+            });
+
+            if (this.quota.recent_rewards.length > 10) {
+                this.quota.recent_rewards.pop();
+            }
+
+            this.amount = "";
+            this.sending = false;
+        },
+    };
+}
 
 /**
  * 打开奖励金币独立弹窗。
@@ -25,5 +239,6 @@ export function bindRewardModalControls() {
         return;
     }
 
+    window.rewardModal = rewardModal;
     window.openRewardModal = openRewardModal;
 }

resources/js/chat-room/user-card.js

@@ -47,6 +47,10 @@ export function userCardComponent() {
             selectedGiftId: giftDefaults.defaultGiftId,
             giftCount: 1,
             sendingGift: false,
+            showGiftPanel: false,
+            showGiftGoldPanel: false,
+            giftGoldAmount: "",
+            giftGoldSending: false,
 
             // 职务奖励金币
             rewardAmount: 0,
@@ -518,6 +522,55 @@ export function userCardComponent() {
                 this.sendingGift = false;
             },
 
+            /** 切换礼物面板，和赠送金币面板互斥显示 */
+            toggleGiftPanel() {
+                this.showGiftPanel = !this.showGiftPanel;
+                this.showGiftGoldPanel = false;
+            },
+
+            /** 切换赠送金币面板，和礼物面板互斥显示 */
+            toggleGiftGoldPanel() {
+                this.showGiftGoldPanel = !this.showGiftGoldPanel;
+                this.showGiftPanel = false;
+            },
+
+            /** 给用户赠送自己的金币 */
+            async sendGiftGold() {
+                const amount = Number.parseInt(this.giftGoldAmount, 10);
+                if (this.giftGoldSending || !amount || amount <= 0) {
+                    return;
+                }
+
+                this.giftGoldSending = true;
+
+                try {
+                    const response = await fetch("/gift/gold", {
+                        method: "POST",
+                        headers: this._headers(),
+                        body: JSON.stringify({
+                            to_user: this.userInfo.username,
+                            room_id: window.chatContext.roomId,
+                            amount,
+                        }),
+                    });
+                    const data = await response.json();
+
+                    if (data.status === "success") {
+                        window.chatContext.myGold = data.data?.my_jjb ?? window.chatContext.myGold;
+                        this.showGiftGoldPanel = false;
+                        this.giftGoldAmount = "";
+                        this.$alert(data.message, "赠送成功 💝", "#d97706");
+                        return;
+                    }
+
+                    this.$alert(data.message, "赠送失败", "#cc4444");
+                } catch (error) {
+                    this.$alert("网络异常", "错误", "#cc4444");
+                }
+
+                this.giftGoldSending = false;
+            },
+
             /** 职务奖励：向用户发放金币（凭空产生，记入履职记录） */
             async sendReward() {
                 if (this.sendingReward) return;

resources/views/chat/partials/user-actions.blade.php

@@ -249,8 +249,7 @@
             </div>
 
             {{-- 操作按钮区：加好友 + 送礼物 + 送金币（有职务且有奖励权限时显示） --}}
-            <div x-data="{ showGiftPanel: false, showGiftGoldPanel: false, giftGoldAmount: '', giftGoldSending: false }"
+            <div x-show="userInfo.username !== window.chatContext.username">
-                 x-show="userInfo.username !== window.chatContext.username">
 
                 <div class="modal-actions" style="margin-bottom: 0; display: flex; gap: 6px;">
                     {{-- 加好友 / 删好友 --}}
@@ -265,7 +264,7 @@
 
                     {{-- 送礼物按钮 --}}
                     <button class="btn-whisper" style="flex:1;"
-                            x-on:click="showGiftPanel = !showGiftPanel; showGiftGoldPanel = false;">
+                            x-on:click="toggleGiftPanel()">
                         🎁 送礼物
                     </button>
 
@@ -273,7 +272,7 @@
                     <button
                         style="flex:1; padding: 7px 10px; border-radius: 5px; font-size: 12px; font-weight: bold; cursor: pointer;
                                background: linear-gradient(135deg,#f59e0b,#d97706); color:#fff; border:none;"
-                        x-on:click="showGiftGoldPanel = !showGiftGoldPanel; showGiftPanel = false;">
+                        x-on:click="toggleGiftGoldPanel()">
                         💰 赠金币
                     </button>
 
@@ -342,33 +341,7 @@
                                placeholder="输入金额"
                                style="flex:1; height:36px; padding:0 10px; border:1px solid #fbbf24; border-radius:6px; font-size:13px; color:#334155;">
                         <button
-                            x-on:click="
+                            x-on:click="sendGiftGold()"
-                                if (!giftGoldAmount || giftGoldAmount <= 0) return;
-                                giftGoldSending = true;
-                                fetch('/gift/gold', {
-                                    method: 'POST',
-                                    headers: {
-                                        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
-                                        'Content-Type': 'application/json',
-                                        'Accept': 'application/json'
-                                    },
-                                    body: JSON.stringify({
-                                        to_user: userInfo.username,
-                                        room_id: window.chatContext.roomId,
-                                        amount: giftGoldAmount
-                                    })
-                                }).then(r => r.json()).then(d => {
-                                    if (d.status === 'success') {
-                                        window.chatContext.myGold = d.data?.my_jjb ?? window.chatContext.myGold;
-                                        showGiftGoldPanel = false;
-                                        giftGoldAmount = '';
-                                        $alert(d.message, '赠送成功 💝', '#d97706');
-                                    } else {
-                                        $alert(d.message, '赠送失败', '#cc4444');
-                                    }
-                                }).catch(() => $alert('网络异常', '错误', '#cc4444'))
-                                .finally(() => { giftGoldSending = false; });
-                            "
                             :disabled="giftGoldSending"
                             style="height:36px; padding:0 16px; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff;
                                    border:none; border-radius:6px; font-size:13px; font-weight:bold; cursor:pointer; white-space:nowrap;"
@@ -603,87 +576,7 @@
 </div>
 
 {{-- ═══════════ 奖励金币独立弹窗 ═══════════ --}}
-<div id="reward-modal-container" x-data="{
+<div id="reward-modal-container" x-data="rewardModal()">
-    show: false,
-    targetUsername: '',
-    amount: '',
-    sending: false,
-    loading: false,
-    quota: { max_once: null, daily_limit: null, today_sent: 0, daily_remaining: null, recent_rewards: [] },
-
-    fmt(v) {
-        if (v === null) return '不限';
-        if (v === 0) return '—';
-        return v.toLocaleString() + ' 金币';
-    },
-
-    closeRelatedModals() {
-        this.show = false;
-        const userModalElement = document.getElementById('user-modal-container');
-        if (!window.Alpine || !userModalElement) return;
-        const userModalData = window.Alpine.$data(userModalElement);
-        if (!userModalData) return;
-        userModalData.showUserModal = false;
-    },
-
-    async open(username) {
-        this.targetUsername = username;
-        this.amount = '';
-        this.sending = false;
-        this.loading = true;
-        this.show = true;
-        try {
-            const res = await fetch(window.chatContext.rewardQuotaUrl, {
-                headers: { 'Accept': 'application/json' }
-            });
-            this.quota = await res.json();
-            if (!this.quota.recent_rewards) this.quota.recent_rewards = [];
-        } catch { this.quota = { max_once: null, daily_limit: null, today_sent: 0, daily_remaining: null, recent_rewards: [] }; }
-        this.loading = false;
-    },
-
-    async send() {
-        if (this.sending) return;
-        const amt = parseInt(this.amount, 10);
-        if (!amt || amt <= 0) { window.chatDialog.alert('请输入有效金额', '提示', '#f59e0b'); return; }
-        const maxOnce = window.chatContext?.myMaxReward;
-        if (maxOnce === 0) { window.chatDialog.alert('你的职务没有奖励发放权限', '无权限', '#cc4444'); return; }
-        if (maxOnce > 0 && amt > maxOnce) { window.chatDialog.alert('超出单次上限 ' + maxOnce + ' 金币', '超出上限', '#cc4444'); return; }
-        this.sending = true;
-        try {
-            const res = await fetch(window.chatContext.rewardUrl, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content || '',
-                    'Accept': 'application/json',
-                },
-                body: JSON.stringify({ username: this.targetUsername, room_id: window.chatContext.roomId, amount: amt }),
-            });
-            const data = await res.json();
-            if (data.status === 'success') {
-                this.quota.today_sent += amt;
-                if (this.quota.daily_remaining !== null) {
-                    this.quota.daily_remaining = Math.max(0, this.quota.daily_remaining - amt);
-                }
-                // 在历史记录头部插入
-                const now = new Date();
-                const mm = String(now.getMonth() + 1).padStart(2, '0');
-                const dd = String(now.getDate()).padStart(2, '0');
-                const hh = String(now.getHours()).padStart(2, '0');
-                const mi = String(now.getMinutes()).padStart(2, '0');
-                this.quota.recent_rewards.unshift({ target: this.targetUsername, amount: amt, created_at: mm + '-' + dd + ' ' + hh + ':' + mi });
-                if (this.quota.recent_rewards.length > 10) this.quota.recent_rewards.pop();
-                this.amount = '';
-                this.closeRelatedModals();
-                window.chatDialog.alert(data.message, '🎉 奖励发放成功', '#d97706');
-            } else {
-                window.chatDialog.alert(data.message || '发放失败', '操作失败', '#cc4444');
-            }
-        } catch { window.chatDialog.alert('网络异常，请稍后重试', '错误', '#cc4444'); }
-        this.sending = false;
-    }
-}">
     <div x-show="show" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9900;"
          x-on:click.self="show = false">
         <div x-show="show"