From cc5cd680f1cfc71c3350c7fc9bbffeb99af94311 Mon Sep 17 00:00:00 2001
From: lkddi <lkddi@163.com>
Date: Fri, 27 Feb 2026 00:20:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=9A=E5=B0=86=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=90=8D=E7=89=87=E5=BC=B9=E7=AA=97=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=E5=88=B0=20user-actions.blade.php?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 从 frame.blade.php 中移除 276 行用户名片弹窗代码
- 全部整合到 user-actions.blade.php（全局函数 + Alpine 组件 + 弹窗 HTML）
- frame.blade.php 减负至约 300 行，结构更清晰
- 所有用户交互逻辑集中管理：单击切换目标、双击名片弹窗、管理操作
---
 resources/views/chat/frame.blade.php          | 279 +----------------
 .../chat/partials/user-actions.blade.php      | 288 +++++++++++++++++-
 2 files changed, 286 insertions(+), 281 deletions(-)

diff --git a/resources/views/chat/frame.blade.php b/resources/views/chat/frame.blade.php
index 3efa48b..749d2df 100644
--- a/resources/views/chat/frame.blade.php
+++ b/resources/views/chat/frame.blade.php
@@ -91,282 +91,6 @@
         @include('chat.partials.right-panel')
     </div>
 
-    {{-- ═══════════ 用户名片弹窗 (Alpine.js) ═══════════ --}}
-    <div id="user-modal-container" x-data="{
-        showUserModal: false,
-        userInfo: {},
-        isMuting: false,
-        muteDuration: 5,
-        showWhispers: false,
-        whisperList: [],
-        showAnnounce: false,
-        announceText: '',
-    
-        async fetchUser(username) {
-            try {
-                const res = await fetch('/user/' + encodeURIComponent(username));
-                const data = await res.json();
-                if (data.status === 'success') {
-                    this.userInfo = data.data;
-                    this.showUserModal = true;
-                    this.isMuting = false;
-                    this.showWhispers = false;
-                    this.whisperList = [];
-                }
-            } catch (e) { console.error(e); }
-        },
-    
-        async kickUser() {
-            const reason = prompt('踢出原因（可留空）：', '违反聊天室规则');
-            if (reason === null) return;
-            try {
-                const res = await fetch('/command/kick', {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRF-TOKEN': document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        username: this.userInfo.username,
-                        room_id: window.chatContext.roomId,
-                        reason: reason || '违反聊天室规则'
-                    })
-                });
-                const data = await res.json();
-                if (data.status === 'success') {
-                    this.showUserModal = false;
-                } else {
-                    alert('操作失败：' + data.message);
-                }
-            } catch (e) { alert('网络异常'); }
-        },
-    
-        async muteUser() {
-            try {
-                const res = await fetch('/command/mute', {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRF-TOKEN': document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        username: this.userInfo.username,
-                        room_id: window.chatContext.roomId,
-                        duration: this.muteDuration
-                    })
-                });
-                const data = await res.json();
-                if (data.status === 'success') {
-                    this.showUserModal = false;
-                } else {
-                    alert('操作失败：' + data.message);
-                }
-            } catch (e) { alert('网络异常'); }
-        },
-    
-        async warnUser() {
-            const reason = prompt('警告原因：', '请注意言行');
-            if (reason === null) return;
-            try {
-                const res = await fetch('/command/warn', {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRF-TOKEN': document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        username: this.userInfo.username,
-                        room_id: window.chatContext.roomId,
-                        reason: reason || '请注意言行'
-                    })
-                });
-                const data = await res.json();
-                if (data.status === 'success') {
-                    this.showUserModal = false;
-                } else {
-                    alert('操作失败：' + data.message);
-                }
-            } catch (e) { alert('网络异常'); }
-        },
-    
-        async freezeUser() {
-            if (!confirm('确定要冻结 ' + this.userInfo.username + ' 的账号吗？冻结后将无法登录！')) return;
-            const reason = prompt('冻结原因：', '严重违规');
-            if (reason === null) return;
-            try {
-                const res = await fetch('/command/freeze', {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRF-TOKEN': document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        username: this.userInfo.username,
-                        room_id: window.chatContext.roomId,
-                        reason: reason || '严重违规'
-                    })
-                });
-                const data = await res.json();
-                if (data.status === 'success') {
-                    this.showUserModal = false;
-                } else {
-                    alert('操作失败：' + data.message);
-                }
-            } catch (e) { alert('网络异常'); }
-        },
-    
-        async loadWhispers() {
-            try {
-                const res = await fetch('/command/whispers/' + encodeURIComponent(this.userInfo.username), {
-                    headers: { 'Accept': 'application/json' }
-                });
-                const data = await res.json();
-                if (data.status === 'success') {
-                    this.whisperList = data.messages;
-                    this.showWhispers = true;
-                } else {
-                    alert(data.message);
-                }
-            } catch (e) { alert('网络异常'); }
-        },
-    
-        async sendAnnounce() {
-            if (!this.announceText.trim()) return;
-            try {
-                const res = await fetch('/command/announce', {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRF-TOKEN': document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        content: this.announceText,
-                        room_id: window.chatContext.roomId,
-                    })
-                });
-                const data = await res.json();
-                if (data.status === 'success') {
-                    this.announceText = '';
-                    this.showAnnounce = false;
-                } else {
-                    alert(data.message);
-                }
-            } catch (e) { alert('网络异常'); }
-        }
-    }">
-        <div x-show="showUserModal" style="display: none;" class="modal-overlay"
-            x-on:click.self="showUserModal = false">
-            <div class="modal-card" x-transition>
-                {{-- 弹窗头部 --}}
-                <div class="modal-header">
-                    <h3 x-text="'用户名片 · ' + userInfo.username"></h3>
-                    <button class="modal-close" x-on:click="showUserModal = false">&times;</button>
-                </div>
-                {{-- 弹窗内容 --}}
-                <div class="modal-body">
-                    <div class="profile-row">
-                        <img class="profile-avatar" x-show="userInfo.headface"
-                            :src="'/images/headface/' + userInfo.headface" x-on:error="$el.style.display='none'">
-                        <div class="profile-info">
-                            <h4>
-                                <span x-text="userInfo.username"></span>
-                                <span class="level-badge" x-text="'LV.' + userInfo.user_level"></span>
-                                <span class="sex-badge"
-                                    x-text="userInfo.sex === '男' ? '♂' : (userInfo.sex === '女' ? '♀' : '')"
-                                    :style="userInfo.sex === '男' ? 'color: blue' : (userInfo.sex === '女' ?
-                                        'color: deeppink' : '')"></span>
-                            </h4>
-                            <div style="font-size: 11px; color: #999; margin-top: 2px;">
-                                加入: <span x-text="userInfo.created_at"></span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="profile-detail" x-text="userInfo.sign || '这家伙很懒，什么也没留下'"></div>
-                </div>
-
-                {{-- 普通操作按钮 --}}
-                <div class="modal-actions" x-show="userInfo.username !== window.chatContext.username">
-                    <button class="btn-whisper"
-                        x-on:click="document.getElementById('to_user').value = userInfo.username; document.getElementById('content').focus(); showUserModal = false;">
-                        悄悄话
-                    </button>
-                    <a class="btn-mail"
-                        :href="'{{ route('guestbook.index', ['tab' => 'outbox']) }}&to=' + encodeURIComponent(userInfo
-                            .username)"
-                        target="_blank">
-                        写私信
-                    </a>
-                </div>
-
-                {{-- 特权操作（各按钮按等级独立显示） --}}
-                @if ($myLevel >= $levelWarn || $room->master == Auth::user()->username)
-                    <div style="padding: 0 16px 12px;"
-                        x-show="userInfo.username !== window.chatContext.username && userInfo.user_level < {{ $myLevel }}">
-                        <div style="font-size: 11px; color: #c00; margin-bottom: 6px; font-weight: bold;">管理操作</div>
-                        <div style="display: flex; gap: 6px; flex-wrap: wrap;">
-                            @if ($myLevel >= $levelWarn)
-                                <button
-                                    style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef3c7; border: 1px solid #f59e0b; cursor: pointer;"
-                                    x-on:click="warnUser()">⚠️ 警告</button>
-                            @endif
-                            @if ($myLevel >= $levelKick)
-                                <button
-                                    style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fee2e2; border: 1px solid #ef4444; cursor: pointer;"
-                                    x-on:click="kickUser()">🚫 踢出</button>
-                            @endif
-                            @if ($myLevel >= $levelMute)
-                                <button
-                                    style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #e0e7ff; border: 1px solid #6366f1; cursor: pointer;"
-                                    x-on:click="isMuting = !isMuting">🔇 禁言</button>
-                            @endif
-                            @if ($myLevel >= $levelFreeze)
-                                <button
-                                    style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #dbeafe; border: 1px solid #3b82f6; cursor: pointer;"
-                                    x-on:click="freezeUser()">🧊 冻结</button>
-                            @endif
-                            @if ($myLevel >= $superLevel)
-                                <button
-                                    style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #f3e8ff; border: 1px solid #a855f7; cursor: pointer;"
-                                    x-on:click="loadWhispers()">🔍 私信</button>
-                            @endif
-                        </div>
-                    </div>
-                    {{-- 禁言表单 --}}
-                    <div x-show="isMuting" style="display: none; padding: 0 16px 12px;">
-                        <div style="display: flex; gap: 6px; align-items: center;">
-                            <input type="number" x-model="muteDuration" min="1" max="1440" placeholder="分钟"
-                                style="width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 3px; font-size: 11px;">
-                            <span style="font-size: 11px; color: #b86e00;">分钟</span>
-                            <button x-on:click="muteUser()"
-                                style="padding: 4px 12px; background: #6366f1; color: #fff; border: none; border-radius: 3px; font-size: 11px; cursor: pointer;">执行</button>
-                        </div>
-                    </div>
-                @endif
-
-                {{-- 私信记录展示区（管理员查看） --}}
-                <div x-show="showWhispers"
-                    style="display: none; padding: 0 16px 12px; max-height: 200px; overflow-y: auto;">
-                    <div style="font-size: 11px; color: #666; margin-bottom: 4px;"
-                        x-text="'最近 ' + whisperList.length + ' 条悄悄话：'"></div>
-                    <template x-for="w in whisperList" :key="w.id">
-                        <div style="font-size: 11px; padding: 3px 0; border-bottom: 1px solid #f0f0f0;">
-                            <span style="color: #6366f1;" x-text="w.from_user"></span>
-                            → <span style="color: #059669;" x-text="w.to_user"></span>：
-                            <span x-text="w.content"></span>
-                            <span style="color: #aaa; font-size: 10px;" x-text="'(' + w.sent_at + ')'"></span>
-                        </div>
-                    </template>
-                    <div x-show="whisperList.length === 0" style="font-size: 11px; color: #aaa;">暂无悄悄话记录</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
     {{-- ═══════════ 聊天室交互脚本（独立文件维护） ═══════════ --}}
     @include('chat.partials.user-actions')
     @include('chat.partials.scripts')
@@ -392,8 +116,7 @@
                 <span style="font-size:12px; color:#666;">当前选中：</span>
                 <img id="avatar-preview" src="/images/headface/{{ $user->usersf ?: '1.gif' }}"
                     style="width:40px; height:40px; border:2px solid #336699; border-radius:4px;">
-                <span id="avatar-selected-name"
-                    style="font-size:12px; color:#333;">{{ $user->usersf ?: '未设置' }}</span>
+                <span id="avatar-selected-name" style="font-size:12px; color:#333;">{{ $user->usersf ?: '未设置' }}</span>
                 <button id="avatar-save-btn" disabled onclick="saveAvatar()"
                     style="margin-left:auto; padding:5px 16px; background:#336699; color:#fff; border:none;
                     border-radius:3px; font-size:12px; cursor:pointer;">确定更换</button>
diff --git a/resources/views/chat/partials/user-actions.blade.php b/resources/views/chat/partials/user-actions.blade.php
index 9d20dc2..9e344b5 100644
--- a/resources/views/chat/partials/user-actions.blade.php
+++ b/resources/views/chat/partials/user-actions.blade.php
@@ -1,12 +1,18 @@
 {{--
-    文件功能：用户交互全局函数（单击选择目标、双击打开名片弹窗）
+    文件功能：用户交互全局函数 + 名片弹窗组件
 
-    聊天消息区和右侧用户列表统一调用此文件中的函数。
-    从 scripts.blade.php 中抽取，保持代码职责清晰。
+    包含：
+    1. switchTarget() — 单击用户名切换聊天目标
+    2. openUserCard() — 双击用户名打开名片弹窗
+    3. 用户名片弹窗 Alpine.js 组件（资料查看 + 管理操作）
+
+    从 scripts.blade.php 和 frame.blade.php 中抽取，保持代码职责清晰。
 
     @author ChatRoom Laravel
     @version 1.0.0
 --}}
+
+{{-- ═══════════ 全局交互函数 ═══════════ --}}
 <script>
     /**
      * 全局函数：单击用户名 → 切换聊天目标
@@ -54,3 +60,279 @@
         }
     }
 </script>
+
+{{-- ═══════════ 用户名片弹窗 (Alpine.js) ═══════════ --}}
+<div id="user-modal-container" x-data="{
+    showUserModal: false,
+    userInfo: {},
+    isMuting: false,
+    muteDuration: 5,
+    showWhispers: false,
+    whisperList: [],
+    showAnnounce: false,
+    announceText: '',
+
+    async fetchUser(username) {
+        try {
+            const res = await fetch('/user/' + encodeURIComponent(username));
+            const data = await res.json();
+            if (data.status === 'success') {
+                this.userInfo = data.data;
+                this.showUserModal = true;
+                this.isMuting = false;
+                this.showWhispers = false;
+                this.whisperList = [];
+            }
+        } catch (e) { console.error(e); }
+    },
+
+    async kickUser() {
+        const reason = prompt('踢出原因（可留空）：', '违反聊天室规则');
+        if (reason === null) return;
+        try {
+            const res = await fetch('/command/kick', {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+                body: JSON.stringify({
+                    username: this.userInfo.username,
+                    room_id: window.chatContext.roomId,
+                    reason: reason || '违反聊天室规则'
+                })
+            });
+            const data = await res.json();
+            if (data.status === 'success') {
+                this.showUserModal = false;
+            } else {
+                alert('操作失败：' + data.message);
+            }
+        } catch (e) { alert('网络异常'); }
+    },
+
+    async muteUser() {
+        try {
+            const res = await fetch('/command/mute', {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+                body: JSON.stringify({
+                    username: this.userInfo.username,
+                    room_id: window.chatContext.roomId,
+                    duration: this.muteDuration
+                })
+            });
+            const data = await res.json();
+            if (data.status === 'success') {
+                this.showUserModal = false;
+            } else {
+                alert('操作失败：' + data.message);
+            }
+        } catch (e) { alert('网络异常'); }
+    },
+
+    async warnUser() {
+        const reason = prompt('警告原因：', '请注意言行');
+        if (reason === null) return;
+        try {
+            const res = await fetch('/command/warn', {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+                body: JSON.stringify({
+                    username: this.userInfo.username,
+                    room_id: window.chatContext.roomId,
+                    reason: reason || '请注意言行'
+                })
+            });
+            const data = await res.json();
+            if (data.status === 'success') {
+                this.showUserModal = false;
+            } else {
+                alert('操作失败：' + data.message);
+            }
+        } catch (e) { alert('网络异常'); }
+    },
+
+    async freezeUser() {
+        if (!confirm('确定要冻结 ' + this.userInfo.username + ' 的账号吗？冻结后将无法登录！')) return;
+        const reason = prompt('冻结原因：', '严重违规');
+        if (reason === null) return;
+        try {
+            const res = await fetch('/command/freeze', {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+                body: JSON.stringify({
+                    username: this.userInfo.username,
+                    room_id: window.chatContext.roomId,
+                    reason: reason || '严重违规'
+                })
+            });
+            const data = await res.json();
+            if (data.status === 'success') {
+                this.showUserModal = false;
+            } else {
+                alert('操作失败：' + data.message);
+            }
+        } catch (e) { alert('网络异常'); }
+    },
+
+    async loadWhispers() {
+        try {
+            const res = await fetch('/command/whispers/' + encodeURIComponent(this.userInfo.username), {
+                headers: { 'Accept': 'application/json' }
+            });
+            const data = await res.json();
+            if (data.status === 'success') {
+                this.whisperList = data.messages;
+                this.showWhispers = true;
+            } else {
+                alert(data.message);
+            }
+        } catch (e) { alert('网络异常'); }
+    },
+
+    async sendAnnounce() {
+        if (!this.announceText.trim()) return;
+        try {
+            const res = await fetch('/command/announce', {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+                body: JSON.stringify({
+                    content: this.announceText,
+                    room_id: window.chatContext.roomId,
+                })
+            });
+            const data = await res.json();
+            if (data.status === 'success') {
+                this.announceText = '';
+                this.showAnnounce = false;
+            } else {
+                alert(data.message);
+            }
+        } catch (e) { alert('网络异常'); }
+    }
+}">
+    <div x-show="showUserModal" style="display: none;" class="modal-overlay" x-on:click.self="showUserModal = false">
+        <div class="modal-card" x-transition>
+            {{-- 弹窗头部 --}}
+            <div class="modal-header">
+                <h3 x-text="'用户名片 · ' + userInfo.username"></h3>
+                <button class="modal-close" x-on:click="showUserModal = false">&times;</button>
+            </div>
+            {{-- 弹窗内容 --}}
+            <div class="modal-body">
+                <div class="profile-row">
+                    <img class="profile-avatar" x-show="userInfo.headface"
+                        :src="'/images/headface/' + (userInfo.headface || '1.gif').toLowerCase()"
+                        x-on:error="$el.style.display='none'">
+                    <div class="profile-info">
+                        <h4>
+                            <span x-text="userInfo.username"></span>
+                            <span class="level-badge" x-text="'LV.' + userInfo.user_level"></span>
+                            <span class="sex-badge"
+                                x-text="userInfo.sex === '男' ? '♂' : (userInfo.sex === '女' ? '♀' : '')"
+                                :style="userInfo.sex === '男' ? 'color: blue' : (userInfo.sex === '女' ?
+                                    'color: deeppink' : '')"></span>
+                        </h4>
+                        <div style="font-size: 11px; color: #999; margin-top: 2px;">
+                            加入: <span x-text="userInfo.created_at"></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="profile-detail" x-text="userInfo.sign || '这家伙很懒，什么也没留下'"></div>
+            </div>
+
+            {{-- 普通操作按钮 --}}
+            <div class="modal-actions" x-show="userInfo.username !== window.chatContext.username">
+                <button class="btn-whisper"
+                    x-on:click="document.getElementById('to_user').value = userInfo.username; document.getElementById('content').focus(); showUserModal = false;">
+                    悄悄话
+                </button>
+                <a class="btn-mail"
+                    :href="'{{ route('guestbook.index', ['tab' => 'outbox']) }}&to=' + encodeURIComponent(userInfo
+                        .username)"
+                    target="_blank">
+                    写私信
+                </a>
+            </div>
+
+            {{-- 特权操作（各按钮按等级独立显示） --}}
+            @if ($myLevel >= $levelWarn || $room->master == Auth::user()->username)
+                <div style="padding: 0 16px 12px;"
+                    x-show="userInfo.username !== window.chatContext.username && userInfo.user_level < {{ $myLevel }}">
+                    <div style="font-size: 11px; color: #c00; margin-bottom: 6px; font-weight: bold;">管理操作</div>
+                    <div style="display: flex; gap: 6px; flex-wrap: wrap;">
+                        @if ($myLevel >= $levelWarn)
+                            <button
+                                style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef3c7; border: 1px solid #f59e0b; cursor: pointer;"
+                                x-on:click="warnUser()">⚠️ 警告</button>
+                        @endif
+                        @if ($myLevel >= $levelKick)
+                            <button
+                                style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fee2e2; border: 1px solid #ef4444; cursor: pointer;"
+                                x-on:click="kickUser()">🚫 踢出</button>
+                        @endif
+                        @if ($myLevel >= $levelMute)
+                            <button
+                                style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #e0e7ff; border: 1px solid #6366f1; cursor: pointer;"
+                                x-on:click="isMuting = !isMuting">🔇 禁言</button>
+                        @endif
+                        @if ($myLevel >= $levelFreeze)
+                            <button
+                                style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #dbeafe; border: 1px solid #3b82f6; cursor: pointer;"
+                                x-on:click="freezeUser()">🧊 冻结</button>
+                        @endif
+                        @if ($myLevel >= $superLevel)
+                            <button
+                                style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #f3e8ff; border: 1px solid #a855f7; cursor: pointer;"
+                                x-on:click="loadWhispers()">🔍 私信</button>
+                        @endif
+                    </div>
+                </div>
+                {{-- 禁言表单 --}}
+                <div x-show="isMuting" style="display: none; padding: 0 16px 12px;">
+                    <div style="display: flex; gap: 6px; align-items: center;">
+                        <input type="number" x-model="muteDuration" min="1" max="1440" placeholder="分钟"
+                            style="width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 3px; font-size: 11px;">
+                        <span style="font-size: 11px; color: #b86e00;">分钟</span>
+                        <button x-on:click="muteUser()"
+                            style="padding: 4px 12px; background: #6366f1; color: #fff; border: none; border-radius: 3px; font-size: 11px; cursor: pointer;">执行</button>
+                    </div>
+                </div>
+            @endif
+
+            {{-- 私信记录展示区（管理员查看） --}}
+            <div x-show="showWhispers"
+                style="display: none; padding: 0 16px 12px; max-height: 200px; overflow-y: auto;">
+                <div style="font-size: 11px; color: #666; margin-bottom: 4px;"
+                    x-text="'最近 ' + whisperList.length + ' 条悄悄话：'"></div>
+                <template x-for="w in whisperList" :key="w.id">
+                    <div style="font-size: 11px; padding: 3px 0; border-bottom: 1px solid #f0f0f0;">
+                        <span style="color: #6366f1;" x-text="w.from_user"></span>
+                        → <span style="color: #059669;" x-text="w.to_user"></span>：
+                        <span x-text="w.content"></span>
+                        <span style="color: #aaa; font-size: 10px;" x-text="'(' + w.sent_at + ')'"></span>
+                    </div>
+                </template>
+                <div x-show="whisperList.length === 0" style="font-size: 11px; color: #aaa;">暂无悄悄话记录</div>
+            </div>
+        </div>
+    </div>
+</div>