Harden redemption flow and improve operational safety

office365_self_service/templates/admin_dashboard.html

@@ -21,6 +21,7 @@
                 <nav class="nav flex-column">
                     <a class="nav-link active" href="#" data-tab="codes">兑换码管理</a>
                     <a class="nav-link" href="#" data-tab="records">兑换记录</a>
+                    <a class="nav-link" href="#" data-tab="audit">审计日志</a>
                     <a class="nav-link" href="#" id="logoutBtn">退出登录</a>
                 </nav>
                 <div class="px-3 mt-3">
@@ -42,6 +43,7 @@
                             <div class="mb-3">
                                 <button class="btn btn-sm btn-outline-secondary filter-btn" data-filter="all">全部</button>
                                 <button class="btn btn-sm btn-outline-secondary filter-btn" data-filter="available">可用</button>
+                                <button class="btn btn-sm btn-outline-secondary filter-btn" data-filter="processing">处理中</button>
                                 <button class="btn btn-sm btn-outline-secondary filter-btn" data-filter="used">已使用</button>
                             </div>
                             <div class="table-responsive">
@@ -59,6 +61,18 @@
                                     <tbody></tbody>
                                 </table>
                             </div>
+                            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
+                                <div class="d-flex align-items-center gap-2">
+                                    <label class="form-label mb-0" for="codesPageSize">每页</label>
+                                    <select class="form-select form-select-sm w-auto" id="codesPageSize"></select>
+                                    <small class="text-muted" id="codesSummary">共 0 条</small>
+                                </div>
+                                <div class="btn-group">
+                                    <button class="btn btn-sm btn-outline-secondary" id="codesPrevBtn">上一页</button>
+                                    <button class="btn btn-sm btn-outline-secondary disabled" id="codesPageIndicator">第 1 / 1 页</button>
+                                    <button class="btn btn-sm btn-outline-secondary" id="codesNextBtn">下一页</button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -80,6 +94,54 @@
                                     <tbody></tbody>
                                 </table>
                             </div>
+                            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
+                                <div class="d-flex align-items-center gap-2">
+                                    <label class="form-label mb-0" for="recordsPageSize">每页</label>
+                                    <select class="form-select form-select-sm w-auto" id="recordsPageSize"></select>
+                                    <small class="text-muted" id="recordsSummary">共 0 条</small>
+                                </div>
+                                <div class="btn-group">
+                                    <button class="btn btn-sm btn-outline-secondary" id="recordsPrevBtn">上一页</button>
+                                    <button class="btn btn-sm btn-outline-secondary disabled" id="recordsPageIndicator">第 1 / 1 页</button>
+                                    <button class="btn btn-sm btn-outline-secondary" id="recordsNextBtn">下一页</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tab-content d-none" id="auditTab">
+                    <h4 class="mb-3">审计日志</h4>
+                    <div class="card">
+                        <div class="card-body">
+                            <div class="table-responsive">
+                                <table class="table table-hover" id="auditTable">
+                                    <thead>
+                                        <tr>
+                                            <th>时间</th>
+                                            <th>事件</th>
+                                            <th>状态</th>
+                                            <th>操作人</th>
+                                            <th>兑换码</th>
+                                            <th>账号</th>
+                                            <th>详情</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody></tbody>
+                                </table>
+                            </div>
+                            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
+                                <div class="d-flex align-items-center gap-2">
+                                    <label class="form-label mb-0" for="auditPageSize">每页</label>
+                                    <select class="form-select form-select-sm w-auto" id="auditPageSize"></select>
+                                    <small class="text-muted" id="auditSummary">共 0 条</small>
+                                </div>
+                                <div class="btn-group">
+                                    <button class="btn btn-sm btn-outline-secondary" id="auditPrevBtn">上一页</button>
+                                    <button class="btn btn-sm btn-outline-secondary disabled" id="auditPageIndicator">第 1 / 1 页</button>
+                                    <button class="btn btn-sm btn-outline-secondary" id="auditNextBtn">下一页</button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -114,42 +176,174 @@
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
+        const defaultPageSize = {{ settings.default_page_size }};
+        const maxPageSize = {{ settings.max_page_size }};
         let currentFilter = 'all';
+        const paginationState = {
+            codes: { page: 1, pageSize: defaultPageSize, total: 0, pages: 0 },
+            records: { page: 1, pageSize: defaultPageSize, total: 0, pages: 0 },
+            audit: { page: 1, pageSize: defaultPageSize, total: 0, pages: 0 }
+        };
 
-        async function loadCodes() {
-            const url = currentFilter === 'all' ? '/admin/api/codes' : `/admin/api/codes?status=${currentFilter}`;
+        function renderStatusBadge(status) {
+            if (status === 'available') {
+                return '<span class="badge bg-success">可用</span>';
+            }
+            if (status === 'processing') {
+                return '<span class="badge bg-warning text-dark">处理中</span>';
+            }
+            return '<span class="badge bg-secondary">已使用</span>';
+        }
+
+        function renderAuditStatus(status) {
+            if (status === 'success') {
+                return '<span class="badge bg-success">成功</span>';
+            }
+            if (status === 'warning') {
+                return '<span class="badge bg-warning text-dark">警告</span>';
+            }
+            return '<span class="badge bg-danger">失败</span>';
+        }
+
+        function escapeHtml(value) {
+            return String(value ?? '')
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#39;');
+        }
+
+        function renderAuditDetails(details) {
+            if (!details) return '-';
+            if (details.message) return escapeHtml(details.message);
+            return escapeHtml(JSON.stringify(details));
+        }
+
+        function pageSizeOptions() {
+            return [...new Set([10, 25, 50, 100, defaultPageSize])]
+                .filter(size => size <= maxPageSize)
+                .sort((a, b) => a - b);
+        }
+
+        function initPageSizeSelect(id, value, onChange) {
+            const select = document.getElementById(id);
+            select.innerHTML = pageSizeOptions().map(size => `
+                <option value="${size}" ${size === value ? 'selected' : ''}>${size}</option>
+            `).join('');
+            select.addEventListener('change', () => onChange(parseInt(select.value, 10) || defaultPageSize));
+        }
+
+        function updatePager(prefix, state) {
+            const pageCount = state.pages || 1;
+            document.getElementById(`${prefix}Summary`).textContent = `共 ${state.total} 条`;
+            document.getElementById(`${prefix}PageIndicator`).textContent = `第 ${state.page} / ${pageCount} 页`;
+            document.getElementById(`${prefix}PrevBtn`).disabled = state.page <= 1;
+            document.getElementById(`${prefix}NextBtn`).disabled = state.total === 0 || state.page >= pageCount;
+        }
+
+        function renderEmptyRow(tableBodySelector, colspan, message) {
+            document.querySelector(tableBodySelector).innerHTML = `
+                <tr><td colspan="${colspan}" class="text-center text-muted py-4">${message}</td></tr>
+            `;
+        }
+
+        async function loadCodes(page = paginationState.codes.page) {
+            const params = new URLSearchParams({
+                page: String(page),
+                pageSize: String(paginationState.codes.pageSize)
+            });
+            if (currentFilter !== 'all') {
+                params.set('status', currentFilter);
+            }
+
+            const url = `/admin/api/codes?${params.toString()}`;
             const response = await fetch(url, { credentials: 'same-origin' });
             const data = await response.json();
             if (data.success) {
+                paginationState.codes.page = data.data.page;
+                paginationState.codes.pageSize = data.data.pageSize;
+                paginationState.codes.total = data.data.total;
+                paginationState.codes.pages = data.data.pages;
                 const tbody = document.querySelector('#codesTable tbody');
-                tbody.innerHTML = data.data.codes.map(code => `
-                    <tr>
-                        <td><code>${code.code}</code></td>
-                        <td><span class="badge ${code.status === 'available' ? 'bg-success' : 'bg-secondary'}">${code.status === 'available' ? '可用' : '已使用'}</span></td>
-                        <td>${code.createdAt ? new Date(code.createdAt).toLocaleString() : '-'}</td>
-                        <td>${code.usedAt ? new Date(code.usedAt).toLocaleString() : '-'}</td>
-                        <td>${code.usedByUsername || '-'}</td>
-                        <td class="table-actions">
-                            ${code.status === 'available' ? `<button class="btn btn-danger btn-sm" onclick="deleteCode('${code.code}')">删除</button>` : ''}
-                        </td>
-                    </tr>
-                `).join('');
+                if (!data.data.codes.length) {
+                    renderEmptyRow('#codesTable tbody', 6, '当前筛选条件下暂无兑换码');
+                } else {
+                    tbody.innerHTML = data.data.codes.map(code => `
+                        <tr>
+                            <td><code>${escapeHtml(code.code)}</code></td>
+                            <td>${renderStatusBadge(code.status)}</td>
+                            <td>${code.createdAt ? new Date(code.createdAt).toLocaleString() : '-'}</td>
+                            <td>${code.usedAt ? new Date(code.usedAt).toLocaleString() : '-'}</td>
+                            <td>${escapeHtml(code.usedByUsername || '-')}</td>
+                            <td class="table-actions">
+                                ${code.status === 'available' ? `<button class="btn btn-danger btn-sm" onclick="deleteCode('${code.code}')">删除</button>` : ''}
+                            </td>
+                        </tr>
+                    `).join('');
+                }
+                updatePager('codes', paginationState.codes);
             }
         }
 
-        async function loadRecords() {
-            const response = await fetch('/admin/api/records', { credentials: 'same-origin' });
+        async function loadRecords(page = paginationState.records.page) {
+            const params = new URLSearchParams({
+                page: String(page),
+                pageSize: String(paginationState.records.pageSize)
+            });
+            const response = await fetch(`/admin/api/records?${params.toString()}`, { credentials: 'same-origin' });
             const data = await response.json();
             if (data.success) {
+                paginationState.records.page = data.data.page;
+                paginationState.records.pageSize = data.data.pageSize;
+                paginationState.records.total = data.data.total;
+                paginationState.records.pages = data.data.pages;
                 const tbody = document.querySelector('#recordsTable tbody');
-                tbody.innerHTML = data.data.records.map(code => `
-                    <tr>
-                        <td><code>${code.code}</code></td>
-                        <td>${code.usedByUsername || '-'}</td>
-                        <td>${code.usedByPrincipalName || '-'}</td>
-                        <td>${code.usedAt ? new Date(code.usedAt).toLocaleString() : '-'}</td>
-                    </tr>
-                `).join('');
+                if (!data.data.records.length) {
+                    renderEmptyRow('#recordsTable tbody', 4, '暂无兑换记录');
+                } else {
+                    tbody.innerHTML = data.data.records.map(code => `
+                        <tr>
+                            <td><code>${escapeHtml(code.code)}</code></td>
+                            <td>${escapeHtml(code.usedByUsername || '-')}</td>
+                            <td>${escapeHtml(code.usedByPrincipalName || '-')}</td>
+                            <td>${code.usedAt ? new Date(code.usedAt).toLocaleString() : '-'}</td>
+                        </tr>
+                    `).join('');
+                }
+                updatePager('records', paginationState.records);
+            }
+        }
+
+        async function loadAudit(page = paginationState.audit.page) {
+            const params = new URLSearchParams({
+                page: String(page),
+                pageSize: String(paginationState.audit.pageSize)
+            });
+            const response = await fetch(`/admin/api/audit-events?${params.toString()}`, { credentials: 'same-origin' });
+            const data = await response.json();
+            if (data.success) {
+                paginationState.audit.page = data.data.page;
+                paginationState.audit.pageSize = data.data.pageSize;
+                paginationState.audit.total = data.data.total;
+                paginationState.audit.pages = data.data.pages;
+                const tbody = document.querySelector('#auditTable tbody');
+                if (!data.data.events.length) {
+                    renderEmptyRow('#auditTable tbody', 7, '暂无审计日志');
+                } else {
+                    tbody.innerHTML = data.data.events.map(event => `
+                        <tr>
+                            <td>${event.createdAt ? new Date(event.createdAt).toLocaleString() : '-'}</td>
+                            <td>${escapeHtml(event.eventType)}</td>
+                            <td>${renderAuditStatus(event.status)}</td>
+                            <td>${escapeHtml(event.actor || '-')}</td>
+                            <td>${event.code ? `<code>${escapeHtml(event.code)}</code>` : '-'}</td>
+                            <td>${escapeHtml(event.principalName || event.username || '-')}</td>
+                            <td>${renderAuditDetails(event.details)}</td>
+                        </tr>
+                    `).join('');
+                }
+                updatePager('audit', paginationState.audit);
             }
         }
 
@@ -158,7 +352,7 @@
             const response = await fetch(`/admin/api/codes/${code}`, { method: 'DELETE', credentials: 'same-origin' });
             const data = await response.json();
             if (data.success) {
-                loadCodes();
+                loadCodes(paginationState.codes.page);
             } else {
                 alert(data.message);
             }
@@ -169,7 +363,8 @@
                 document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('btn-secondary', 'active'));
                 btn.classList.add('btn-secondary', 'active');
                 currentFilter = btn.dataset.filter;
-                loadCodes();
+                paginationState.codes.page = 1;
+                loadCodes(1);
             });
         });
 
@@ -182,6 +377,7 @@
                 document.getElementById(link.dataset.tab + 'Tab').classList.remove('d-none');
                 if (link.dataset.tab === 'codes') loadCodes();
                 if (link.dataset.tab === 'records') loadRecords();
+                if (link.dataset.tab === 'audit') loadAudit();
             });
         });
 
@@ -198,7 +394,8 @@
                 const textarea = document.querySelector('#generatedCodes textarea');
                 textarea.value = data.data.codes.join('\n');
                 document.getElementById('generatedCodes').classList.remove('d-none');
-                loadCodes();
+                paginationState.codes.page = 1;
+                loadCodes(1);
             }
         });
 
@@ -207,7 +404,29 @@
             window.location.href = '/admin/';
         });
 
+        initPageSizeSelect('codesPageSize', paginationState.codes.pageSize, (value) => {
+            paginationState.codes.pageSize = value;
+            paginationState.codes.page = 1;
+            loadCodes(1);
+        });
+        initPageSizeSelect('recordsPageSize', paginationState.records.pageSize, (value) => {
+            paginationState.records.pageSize = value;
+            paginationState.records.page = 1;
+            loadRecords(1);
+        });
+        initPageSizeSelect('auditPageSize', paginationState.audit.pageSize, (value) => {
+            paginationState.audit.pageSize = value;
+            paginationState.audit.page = 1;
+            loadAudit(1);
+        });
+        document.getElementById('codesPrevBtn').addEventListener('click', () => loadCodes(paginationState.codes.page - 1));
+        document.getElementById('codesNextBtn').addEventListener('click', () => loadCodes(paginationState.codes.page + 1));
+        document.getElementById('recordsPrevBtn').addEventListener('click', () => loadRecords(paginationState.records.page - 1));
+        document.getElementById('recordsNextBtn').addEventListener('click', () => loadRecords(paginationState.records.page + 1));
+        document.getElementById('auditPrevBtn').addEventListener('click', () => loadAudit(paginationState.audit.page - 1));
+        document.getElementById('auditNextBtn').addEventListener('click', () => loadAudit(paginationState.audit.page + 1));
+
         loadCodes();
     </script>
 </body>
-</html>
+</html>