feat: 银行弹窗UI重构并增加存款排行榜功能

app/Http/Controllers/BankController.php

@@ -40,6 +40,39 @@ class BankController extends Controller
         ]);
     }
 
+    /**
+     * 查询银行存款排行榜 (分页显示)
+     */
+    public function ranking(Request $request): JsonResponse
+    {
+        $direction = strtolower($request->query('sort', 'desc')) === 'asc' ? 'asc' : 'desc';
+
+        $users = \App\Models\User::where('bank_jjb', '>', 0)
+            ->orderBy('bank_jjb', $direction)
+            ->paginate(20, ['id', 'username', 'bank_jjb', 'sex', 'usersf', 'user_level']);
+
+        return response()->json([
+            'status' => 'success',
+            'ranking' => $users->map(function ($u) {
+                // 提供必要的前端展示字段
+                return [
+                    'id' => $u->id,
+                    'username' => $u->username,
+                    'bank_jjb' => $u->bank_jjb,
+                    'sex' => $u->sex,
+                    'usersf' => $u->usersf,
+                    'user_level' => $u->user_level,
+                    'headfaceUrl' => $u->headfaceUrl,
+                ];
+            }),
+            'pagination' => [
+                'current_page' => $users->currentPage(),
+                'last_page' => $users->lastPage(),
+                'total' => $users->total(),
+            ],
+        ]);
+    }
+
     /**
      * 存款：从流通金币（jjb）转入银行（bank_jjb）
      *

resources/views/chat/partials/layout/toolbar.blade.php

@@ -1572,349 +1572,301 @@
 {{-- ═══════════ 银行弹窗 ═══════════ --}}
 <style>
     /* 银行弹窗遮罩 */
-    #bank-modal {
-        display: none;
-        position: fixed;
-        inset: 0;
-        background: rgba(0, 0, 0, .5);
-        z-index: 9999;
-        justify-content: center;
-        align-items: center;
-    }
-
+    #bank-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999; justify-content:center; align-items:center; }
     /* 弹窗主体 */
-    #bank-modal-inner {
-        background: #fff;
-        border-radius: 8px;
-        width: 480px;
-        max-width: 95vw;
-        max-height: 86vh;
-        display: flex;
-        flex-direction: column;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
-        overflow: hidden;
-    }
+    #bank-modal-inner { width:520px; max-width:96vw; max-height:88vh; background:#fff; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(0,0,0,.3); font-family:'Microsoft YaHei',SimSun,sans-serif; }
+    /* 头部 */
+    #bank-modal-header { background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff; padding:10px 16px; display:flex; align-items:center; flex-shrink:0; }
+    
+    /* Tabs */
+    .bank-tab-btn { background:rgba(255,255,255,.15); border:none; color:#d0e8ff; border-radius:15px; padding:4px 14px; font-size:12px; cursor:pointer; font-weight:bold; transition:all .2s; }
+    .bank-tab-btn.active { background:#fff; color:#336699; box-shadow:0 2px 4px rgba(0,0,0,.1); }
 
-    /* 标题栏 */
-    #bank-modal-header {
-        background: linear-gradient(135deg, #78350f, #b45309);
-        color: #fff;
-        padding: 10px 16px;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        flex-shrink: 0;
-    }
+    /* 包含容器 */
+    .bank-view-pane { display:flex; flex-direction:column; flex:1; overflow:hidden; background:#f6faff; }
 
-    /* 余额卡片区 */
-    .bank-balance-row {
-        display: flex;
-        gap: 10px;
-        padding: 14px 16px 10px;
-        background: #fffbeb;
-        border-bottom: 1px solid #fde68a;
-        flex-shrink: 0;
-    }
-
-    .bank-balance-card {
-        flex: 1;
-        background: #fff;
-        border: 1px solid #fcd34d;
-        border-radius: 8px;
-        padding: 10px 12px;
-        text-align: center;
-    }
-
-    .bank-balance-card .label {
-        font-size: 11px;
-        color: #92400e;
-        margin-bottom: 4px;
-    }
-
-    .bank-balance-card .value {
-        font-size: 20px;
-        font-weight: bold;
-        color: #d97706;
-    }
+    /* 余额卡片 */
+    .bank-balance-card { flex:1; background:#fff; border:1px solid #d0e4f5; border-radius:6px; padding:12px 14px; text-align:center; transition:box-shadow .2s; }
+    .bank-balance-card:hover { box-shadow:0 2px 8px rgba(51,102,153,.1); }
+    .bank-bcard-title { font-size:12px; margin-bottom:6px; }
+    .bank-bcard-val { font-size:20px; font-weight:bold; }
 
     /* 操作区 */
-    .bank-op-section {
-        padding: 12px 16px;
-        border-bottom: 1px solid #fde68a;
-        background: #fffbeb;
-        flex-shrink: 0;
-    }
+    .bank-op-row { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
+    .bank-op-label { font-size:12px; font-weight:bold; width:44px; }
+    .bank-op-input { flex:1; height:34px; padding:0 10px; border:1px solid #b0d0ee; border-radius:4px; font-size:13px; outline:none; transition:border-color .2s; }
+    .bank-op-input:focus { border-color:#336699; }
+    .bank-op-btn { height:34px; padding:0 20px; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:13px; font-weight:bold; transition:opacity .2s; }
+    .bank-op-btn:hover { opacity:.85; }
+    .bank-op-btn:disabled { opacity:.5; cursor:not-allowed; }
+    
+    /* 流水列表 */
+    .bank-log-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed #d0e4f5; font-size:12px; }
+    .bank-log-item:last-child { border-bottom:none; }
+    .bank-log-deposit { color:#16a34a; font-weight:bold; }
+    .bank-log-withdraw { color:#0891b2; font-weight:bold; }
 
-    .bank-op-row {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        margin-bottom: 8px;
-    }
-
-    .bank-op-row:last-child {
-        margin-bottom: 0;
-    }
-
-    .bank-op-label {
-        font-size: 12px;
-        font-weight: bold;
-        color: #78350f;
-        width: 44px;
-        flex-shrink: 0;
-    }
-
-    .bank-op-input {
-        flex: 1;
-        height: 34px;
-        padding: 0 10px;
-        border: 1px solid #fbbf24;
-        border-radius: 6px;
-        font-size: 13px;
-        color: #334155;
-        outline: none;
-    }
-
-    .bank-op-input:focus {
-        border-color: #d97706;
-    }
-
-    .bank-op-btn {
-        height: 34px;
-        padding: 0 14px;
-        border: none;
-        border-radius: 6px;
-        font-size: 12px;
-        font-weight: bold;
-        cursor: pointer;
-        white-space: nowrap;
-    }
-
-    .bank-op-btn-deposit {
-        background: linear-gradient(135deg, #b45309, #d97706);
-        color: #fff;
-    }
-
-    .bank-op-btn-withdraw {
-        background: linear-gradient(135deg, #16a34a, #22c55e);
-        color: #fff;
-    }
-
-    .bank-op-btn:disabled {
-        opacity: .6;
-        cursor: not-allowed;
-    }
-
-    /* 流水区 */
-    #bank-logs-list {
-        flex: 1;
-        overflow-y: auto;
-        padding: 10px 16px;
-        background: #fff;
-    }
-
-    .bank-log-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 6px 0;
-        border-bottom: 1px solid #f3f4f6;
-        font-size: 12px;
-    }
-
-    .bank-log-item:last-child {
-        border-bottom: none;
-    }
-
-    .bank-log-deposit { color: #b45309; }
-    .bank-log-withdraw { color: #16a34a; }
+    /* 排行榜单项 */
+    .bank-rank-item { background:#fff; border:1px solid #d0e4f5; border-radius:6px; padding:10px 14px; display:flex; align-items:center; gap:12px; font-size:13px; margin-bottom:8px; transition:border-color .2s; }
+    .bank-rank-item:hover { border-color:#336699; box-shadow:0 2px 8px rgba(51,102,153,.1); }
+    .bank-rank-num { font-size:18px; font-weight:bold; font-style:italic; width:30px; text-align:center; color:#9db3d4; }
+    .bank-rank-top1 { color:#fbbf24; }
+    .bank-rank-top2 { color:#9ca3af; }
+    .bank-rank-top3 { color:#b45309; }
+    .bank-rank-val { margin-left:auto; font-weight:bold; color:#0891b2; display:flex; align-items:center; gap:4px; }
 </style>
 
 <div id="bank-modal">
     <div id="bank-modal-inner">
         {{-- 标题栏 --}}
         <div id="bank-modal-header">
-            <span style="font-size:14px; font-weight:bold; flex:1;">🏦 金币银行</span>
-            <span style="cursor:pointer; font-size:18px; opacity:.8;" onclick="closeBankModal()">&times;</span>
+            <div style="font-size:15px; font-weight:bold; margin-right:20px;">🏦 金币银行</div>
+            {{-- Tabs --}}
+            <div style="display:flex; gap:10px; flex:1;">
+                <button id="bank-tabbtn-account" class="bank-tab-btn active" onclick="switchBankTab('account')">我的账户</button>
+                <button id="bank-tabbtn-ranking" class="bank-tab-btn" onclick="switchBankTab('ranking')">存款排行</button>
+            </div>
+            <span style="cursor:pointer; font-size:20px; opacity:.8; transition:opacity .15s;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.8" onclick="closeBankModal()">&times;</span>
         </div>
 
-        {{-- 余额展示 --}}
-        <div class="bank-balance-row">
-            <div class="bank-balance-card">
-                <div class="label">💰 流通金币</div>
-                <div class="value" id="bank-jjb-display">—</div>
+        {{-- 我的账户 面板 --}}
+        <div id="bank-view-account" class="bank-view-pane" style="display:flex;">
+            {{-- 余额展示 --}}
+            <div style="display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid #d0e4f5; background:#fff;">
+                <div class="bank-balance-card" style="border-left:4px solid #3b82f6;">
+                    <div class="bank-bcard-title" style="color:#3b82f6;">💰 流通金币</div>
+                    <div class="bank-bcard-val" style="color:#1d4ed8;" id="bank-jjb-display">—</div>
+                </div>
+                <div class="bank-balance-card" style="border-left:4px solid #0891b2;">
+                    <div class="bank-bcard-title" style="color:#0891b2;">🏦 银行存款</div>
+                    <div class="bank-bcard-val" style="color:#164e63;" id="bank-bank-display">—</div>
+                </div>
             </div>
-            <div class="bank-balance-card">
-                <div class="label">🏦 银行存款</div>
-                <div class="value" id="bank-bank-display">—</div>
+
+            {{-- 操作区 --}}
+            <div style="padding:14px 16px; border-bottom:1px solid #d0e4f5; background:#fff;">
+                <div class="bank-op-row">
+                    <span class="bank-op-label" style="color:#3b82f6;">存 入</span>
+                    <input type="number" id="bank-deposit-input" class="bank-op-input" min="1" placeholder="输入你想存入银行的金币数量...">
+                    <button id="bank-deposit-btn" class="bank-op-btn" style="background:linear-gradient(135deg,#3b82f6,#60a5fa);" onclick="bankAction('deposit')">确认存入</button>
+                </div>
+                <div class="bank-op-row" style="margin-bottom:0;">
+                    <span class="bank-op-label" style="color:#0891b2;">取 出</span>
+                    <input type="number" id="bank-withdraw-input" class="bank-op-input" min="1" placeholder="输入你想从银行取回的金币数量...">
+                    <button id="bank-withdraw-btn" class="bank-op-btn" style="background:linear-gradient(135deg,#0891b2,#22d3ee);" onclick="bankAction('withdraw')">确认取出</button>
+                </div>
+                <div id="bank-op-msg" style="display:none; text-align:center; font-size:12px; font-weight:bold; padding:8px 10px; border-radius:6px; margin-top:12px;"></div>
+            </div>
+
+            {{-- 流水记录 --}}
+            <div style="padding:8px 16px; font-size:12px; font-weight:bold; color:#336699; background:#fff; border-bottom:1px solid #e0ecf8;">
+                📝 最近资金流水
+            </div>
+            <div id="bank-logs-list" style="flex:1; overflow-y:auto; padding:10px 16px;">
+                <div style="text-align:center; color:#9db3d4; font-size:12px; padding:30px 0;">加载中...</div>
             </div>
         </div>
 
-        {{-- 操作区 --}}
-        <div class="bank-op-section">
-            {{-- 存款 --}}
-            <div class="bank-op-row">
-                <span class="bank-op-label">存 款</span>
-                <input type="number" id="bank-deposit-input" class="bank-op-input" min="1" placeholder="输入存款金额">
-                <button id="bank-deposit-btn" class="bank-op-btn bank-op-btn-deposit" onclick="bankDeposit()">存入</button>
+        {{-- 存款排行 面板 --}}
+        <div id="bank-view-ranking" class="bank-view-pane" style="display:none;">
+            <div style="padding:10px 16px; border-bottom:1px solid #d0e4f5; display:flex; justify-content:space-between; align-items:center; background:#fff;">
+                <div style="font-size:13px; color:#336699; font-weight:bold;">🏆 全站存款排行榜</div>
+                <button onclick="toggleBankRankSort()" id="bank-rank-sort-btn" style="background:#f0f6ff; border:1px solid #b0d0ee; color:#336699; padding:4px 12px; border-radius:15px; font-size:12px; cursor:pointer; font-weight:bold; transition:background .2s;">
+                    降序 ↓
+                </button>
             </div>
-            {{-- 取款 --}}
-            <div class="bank-op-row">
-                <span class="bank-op-label">取 款</span>
-                <input type="number" id="bank-withdraw-input" class="bank-op-input" min="1" placeholder="输入取款金额">
-                <button id="bank-withdraw-btn" class="bank-op-btn bank-op-btn-withdraw" onclick="bankWithdraw()">取出</button>
+            
+            <div id="bank-ranking-list" style="flex:1; overflow-y:auto; padding:12px 16px;">
+                <div style="text-align:center; color:#9db3d4; font-size:12px; padding:30px 0;">加载中...</div>
+            </div>
+
+            {{-- 分页控件 --}}
+            <div style="padding:10px 16px; border-top:1px solid #d0e4f5; background:#fff; display:flex; justify-content:space-between; align-items:center;">
+                <button class="bank-tab-btn" id="bank-rank-prev" onclick="fetchBankRanking(bankRankPage - 1)" style="color:#336699; border:1px solid #b0d0ee; background:#fff; font-weight:normal;">上一页</button>
+                <div id="bank-rank-page-info" style="font-size:12px; color:#666; font-weight:bold;">1 / 1</div>
+                <button class="bank-tab-btn" id="bank-rank-next" onclick="fetchBankRanking(bankRankPage + 1)" style="color:#336699; border:1px solid #b0d0ee; background:#fff; font-weight:normal;">下一页</button>
             </div>
-            <div id="bank-op-msg" style="display:none; font-size:12px; font-weight:bold; padding:6px 10px; border-radius:5px; margin-top:6px;"></div>
         </div>
 
-        {{-- 流水记录 --}}
-        <div id="bank-logs-list">
-            <div style="text-align:center; color:#aaa; font-size:12px; padding:20px;">加载中...</div>
-        </div>
     </div>
 </div>
 
 <script>
-    /**
-     * 打开银行弹窗并加载数据
-     */
+    let bankRankPage = 1;
+    let bankRankSort = 'desc';
+
+    /** 切换 Tab */
+    function switchBankTab(tabName) {
+        document.getElementById('bank-tabbtn-account').classList.remove('active');
+        document.getElementById('bank-tabbtn-ranking').classList.remove('active');
+        document.getElementById('bank-view-account').style.display = 'none';
+        document.getElementById('bank-view-ranking').style.display = 'none';
+
+        document.getElementById('bank-tabbtn-' + tabName).classList.add('active');
+        document.getElementById('bank-view-' + tabName).style.display = 'flex';
+
+        if (tabName === 'ranking' && bankRankPage === 1 && document.getElementById('bank-ranking-list').innerHTML.includes('加载中')) {
+            fetchBankRanking(1);
+        }
+    }
+
+    /** 打开弹窗 */
     function openBankModal() {
         document.getElementById('bank-modal').style.display = 'flex';
+        switchBankTab('account');
         bankLoadInfo();
     }
 
-    /**
-     * 关闭银行弹窗
-     */
+    /** 关闭弹窗 */
     function closeBankModal() {
         document.getElementById('bank-modal').style.display = 'none';
     }
 
-    /**
-     * 加载银行数据（余额+流水）
-     */
+    /** 存取款合并 */
+    async function bankAction(type) {
+        const inputEl = document.getElementById(`bank-${type}-input`);
+        const btnEl = document.getElementById(`bank-${type}-btn`);
+        const amount = parseInt(inputEl.value, 10);
+        if (!amount || amount <= 0) {
+            bankShowMsg('请输入有效的金额', false);
+            return;
+        }
+        
+        btnEl.disabled = true;
+        try {
+            const res = await fetch(`/bank/${type}`, {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                },
+                body: JSON.stringify({ amount }),
+            });
+            const data = await res.json();
+            bankShowMsg(data.message, data.status === 'success');
+            if (data.status === 'success') {
+                inputEl.value = '';
+                bankLoadInfo();
+                if (document.getElementById('bank-view-ranking').style.display !== 'none') {
+                    fetchBankRanking(bankRankPage); 
+                }
+            }
+        } catch (e) {
+            bankShowMsg('网络异常，请稍后重试', false);
+        }
+        btnEl.disabled = false;
+    }
+
+    /** 获取资金与流水 */
     async function bankLoadInfo() {
         try {
             const res  = await fetch('/bank', { headers: { 'Accept': 'application/json' } });
             const data = await res.json();
-            if (data.status !== 'success') { return; }
+            if (data.status !== 'success') return;
 
-            // 更新余额显示
             document.getElementById('bank-jjb-display').textContent  = data.jjb.toLocaleString();
             document.getElementById('bank-bank-display').textContent  = data.bank_jjb.toLocaleString();
 
-            // 同步更新全局上下文
-            window.chatContext.myGold  = data.jjb;
-            window.chatContext.bankGold = data.bank_jjb;
+            if (window.chatContext) {
+                window.chatContext.myGold  = data.jjb;
+                window.chatContext.bankGold = data.bank_jjb;
+            }
 
-            // 渲染流水
             const list = document.getElementById('bank-logs-list');
             if (data.logs.length === 0) {
-                list.innerHTML = '<div style="text-align:center;color:#aaa;font-size:12px;padding:20px;">暂无记录</div>';
+                list.innerHTML = '<div style="text-align:center;color:#9db3d4;font-size:12px;padding:30px 0;">暂无记录</div>';
                 return;
             }
             list.innerHTML = data.logs.map(log => {
                 const isDeposit = log.type === 'deposit';
-                const sign      = isDeposit ? '▼存' : '▲取';
                 const cls       = isDeposit ? 'bank-log-deposit' : 'bank-log-withdraw';
+                const sign      = isDeposit ? '+ 存入' : '- 取出';
                 const dt        = log.created_at.replace('T', ' ').substring(0, 16);
                 return `<div class="bank-log-item">
                     <span class="${cls}">${sign} ${log.amount.toLocaleString()} 金币</span>
-                    <span style="color:#6b7280; font-size:11px;">存款余额：${log.balance_after.toLocaleString()}</span>
-                    <span style="color:#9ca3af; font-size:10px;">${dt}</span>
+                    <span style="color:#64748b;">余额: <strong style="color:#334155">${log.balance_after.toLocaleString()}</strong></span>
+                    <span style="color:#94a3b8;">${dt}</span>
                 </div>`;
             }).join('');
         } catch (e) {
-            document.getElementById('bank-logs-list').innerHTML =
-                '<div style="text-align:center;color:red;font-size:12px;padding:20px;">加载失败</div>';
+            document.getElementById('bank-logs-list').innerHTML = '<div style="text-align:center;color:#ef4444;font-size:12px;padding:30px 0;">加载失败</div>';
         }
     }
 
-    /**
-     * 存款操作
-     */
-    async function bankDeposit() {
-        const amount = parseInt(document.getElementById('bank-deposit-input').value, 10);
-        if (!amount || amount <= 0) {
-            bankShowMsg('请输入有效的存款金额', false);
-            return;
-        }
-        const btn = document.getElementById('bank-deposit-btn');
-        btn.disabled = true;
-        try {
-            const res  = await fetch('/bank/deposit', {
-                method: 'POST',
-                headers: {
-                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
-                    'Content-Type': 'application/json',
-                    'Accept':       'application/json',
-                },
-                body: JSON.stringify({ amount }),
-            });
-            const data = await res.json();
-            bankShowMsg(data.message, data.status === 'success');
-            if (data.status === 'success') {
-                document.getElementById('bank-deposit-input').value = '';
-                bankLoadInfo();
-            }
-        } catch (e) {
-            bankShowMsg('网络异常，请稍后重试', false);
-        }
-        btn.disabled = false;
-    }
-
-    /**
-     * 取款操作
-     */
-    async function bankWithdraw() {
-        const amount = parseInt(document.getElementById('bank-withdraw-input').value, 10);
-        if (!amount || amount <= 0) {
-            bankShowMsg('请输入有效的取款金额', false);
-            return;
-        }
-        const btn = document.getElementById('bank-withdraw-btn');
-        btn.disabled = true;
-        try {
-            const res  = await fetch('/bank/withdraw', {
-                method: 'POST',
-                headers: {
-                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
-                    'Content-Type': 'application/json',
-                    'Accept':       'application/json',
-                },
-                body: JSON.stringify({ amount }),
-            });
-            const data = await res.json();
-            bankShowMsg(data.message, data.status === 'success');
-            if (data.status === 'success') {
-                document.getElementById('bank-withdraw-input').value = '';
-                bankLoadInfo();
-            }
-        } catch (e) {
-            bankShowMsg('网络异常，请稍后重试', false);
-        }
-        btn.disabled = false;
-    }
-
-    /**
-     * 显示操作结果提示（3秒后自动消失）
-     *
-     * @param {string}  msg     提示内容
-     * @param {boolean} success 是否成功
-     */
     function bankShowMsg(msg, success) {
         const el = document.getElementById('bank-op-msg');
         el.textContent = msg;
-        el.style.background = success ? '#f0fdf4' : '#fff5f5';
-        el.style.border     = success ? '1px solid #86efac' : '1px solid #fecaca';
-        el.style.color      = success ? '#16a34a' : '#dc2626';
+        el.style.background = success ? '#f0fdf4' : '#fef2f2';
+        el.style.border     = success ? '1px solid #bbf7d0' : '1px solid #fecaca';
+        el.style.color      = success ? '#16a34a' : '#ef4444';
         el.style.display    = 'block';
         clearTimeout(el._t);
         el._t = setTimeout(() => { el.style.display = 'none'; }, 3000);
     }
 
-    // 点击遮罩关闭银行弹窗
-    document.getElementById('bank-modal').addEventListener('click', function (e) {
-        if (e.target === this) { closeBankModal(); }
+    function toggleBankRankSort() {
+        bankRankSort = bankRankSort === 'desc' ? 'asc' : 'desc';
+        document.getElementById('bank-rank-sort-btn').textContent = bankRankSort === 'desc' ? '降序 ↓' : '升序 ↑';
+        fetchBankRanking(1);
+    }
+
+    async function fetchBankRanking(page) {
+        if (page < 1) return;
+        const listEl = document.getElementById('bank-ranking-list');
+        listEl.innerHTML = '<div style="text-align:center; color:#9db3d4; font-size:12px; padding:30px 0;">加载中...</div>';
+        
+        try {
+            const res = await fetch(`/bank/ranking?page=${page}&sort=${bankRankSort}`, { headers: {'Accept': 'application/json'} });
+            const data = await res.json();
+            
+            if (data.status === 'success') {
+                bankRankPage = data.pagination.current_page;
+                document.getElementById('bank-rank-page-info').textContent = `${bankRankPage} / ${data.pagination.last_page}`;
+                
+                const btnPrev = document.getElementById('bank-rank-prev');
+                const btnNext = document.getElementById('bank-rank-next');
+                
+                btnPrev.disabled = bankRankPage <= 1;
+                btnPrev.style.opacity = bankRankPage <= 1 ? 0.5 : 1;
+                btnNext.disabled = bankRankPage >= data.pagination.last_page;
+                btnNext.style.opacity = bankRankPage >= data.pagination.last_page ? 0.5 : 1;
+                
+                if (data.ranking.length === 0) {
+                    listEl.innerHTML = '<div style="text-align:center; color:#9db3d4; font-size:12px; padding:30px 0;">暂无数据</div>';
+                    return;
+                }
+                
+                let html = '';
+                data.ranking.forEach((u, index) => {
+                    const absNum = (bankRankPage - 1) * 20 + index + 1;
+                    let rankCls = '';
+                    if (bankRankSort === 'desc' && bankRankPage === 1) {
+                         if (absNum === 1) rankCls = 'bank-rank-top1';
+                         else if (absNum === 2) rankCls = 'bank-rank-top2';
+                         else if (absNum === 3) rankCls = 'bank-rank-top3';
+                    }
+                    html += `
+                        <div class="bank-rank-item">
+                            <div class="bank-rank-num ${rankCls}">${absNum}</div>
+                            <img src="${u.headfaceUrl || ''}" onerror="this.src='/images/headface/1.gif'" style="width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid #d0e4f5;">
+                            <div>
+                                <div style="font-weight:bold; color:#1e3a8a;">${u.username} <span style="font-size:12px;">${u.sex === '女' ? '♀' : '♂'}</span></div>
+                            </div>
+                            <div class="bank-rank-val">
+                                🏦 ${Number(u.bank_jjb).toLocaleString()}
+                            </div>
+                        </div>
+                    `;
+                });
+                listEl.innerHTML = html;
+            }
+        } catch (e) {
+             listEl.innerHTML = '<div style="text-align:center; color:#ef4444; font-size:12px; padding:30px 0;">拉取失败</div>';
+        }
+    }
+
+    document.getElementById('bank-modal').addEventListener('click', function(e) {
+        if (e.target === this) closeBankModal();
     });
 </script>

routes/web.php

@@ -294,8 +294,9 @@ Route::middleware(['chat.auth'])->group(function () {
     Route::post('/shop/buy', [\App\Http\Controllers\ShopController::class, 'buy'])->name('shop.buy');
     Route::post('/shop/rename', [\App\Http\Controllers\ShopController::class, 'rename'])->name('shop.rename');
 
-    // ---- 银行（存取金币）----
+    // ---- 银行资金接口 ----
     Route::get('/bank', [\App\Http\Controllers\BankController::class, 'info'])->name('bank.info');
+    Route::get('/bank/ranking', [\App\Http\Controllers\BankController::class, 'ranking'])->name('bank.ranking');
     Route::post('/bank/deposit', [\App\Http\Controllers\BankController::class, 'deposit'])->name('bank.deposit');
     Route::post('/bank/withdraw', [\App\Http\Controllers\BankController::class, 'withdraw'])->name('bank.withdraw');