From b18ddc8f5a88912ccb4ec67c75e897ec04eb8010 Mon Sep 17 00:00:00 2001 From: yyh Date: Sun, 23 Mar 2025 20:59:02 +0800 Subject: [PATCH] fix :UI repeat history sms --- frontend/static/js/app.js | 548 ++++++++------------------------------ 1 file changed, 117 insertions(+), 431 deletions(-) diff --git a/frontend/static/js/app.js b/frontend/static/js/app.js index ec05316..58a73b5 100644 --- a/frontend/static/js/app.js +++ b/frontend/static/js/app.js @@ -18,48 +18,31 @@ document.addEventListener("DOMContentLoaded", function() { const pagination = document.getElementById('pagination'); const refreshButton = document.querySelector('.refresh-records'); - // 初始化页面 - initializePage(); - - /** - * 初始化页面 - */ - function initializePage() { - // 加载短信记录 - loadSMSRecords(currentPage); - - // 绑定事件监听器 - bindEventListeners(); - - // 初始化工具提示 - initializeTooltips(); - } - - /** - * 绑定事件监听器 - */ - function bindEventListeners() { - // 验证码查询表单提交 - if (codeQueryForm) { - codeQueryForm.addEventListener('submit', function(e) { - e.preventDefault(); - queryVerificationCode(); - }); - } - - // 刷新按钮点击 - if (refreshButton) { - refreshButton.addEventListener('click', function() { - loadSMSRecords(currentPage); - }); - } - - // 监听窗口大小变化，调整表格显示 - window.addEventListener('resize', function() { - adjustTableColumns(); + // 绑定事件监听器 + if (codeQueryForm) { + codeQueryForm.addEventListener('submit', function(e) { + e.preventDefault(); + queryVerificationCode(); }); } + if (refreshButton) { + refreshButton.addEventListener('click', function() { + loadSMSRecords(currentPage); + }); + } + + // 初始化工具提示 + initializeTooltips(); + + // 加载短信记录 + loadSMSRecords(currentPage); + + // 监听窗口大小变化，调整表格显示 + window.addEventListener('resize', function() { + adjustTableColumns(); + }); + /** * 初始化工具提示 */ @@ -76,9 +59,10 @@ document.addEventListener("DOMContentLoaded", function() { /** * 加载短信记录 * @param {number} page - 页码 + * @param {number} limit - 每页记录数 */ - function loadSMSRecords(page) { - const offset = (page - 1) * PAGE_SIZE; + function loadSMSRecords(page = 1, limit = PAGE_SIZE) { + const offset = (page - 1) * limit; // 显示加载指示器 if (loadingIndicator) { @@ -99,42 +83,62 @@ document.addEventListener("DOMContentLoaded", function() { } // 获取短信记录 - fetch(`/v1/sms/history?limit=${PAGE_SIZE}&offset=${offset}`) + fetch(`/v1/sms/history?limit=${limit}&offset=${offset}`) .then(response => { if (!response.ok) { throw new Error('网络响应异常'); } return response.json(); }) - .then(data => { - if (Array.isArray(data)) { + .then(records => { + // 隐藏加载指示器 + if (loadingIndicator) { + loadingIndicator.classList.add('d-none'); + } + + if (records.length === 0) { + // 显示无记录提示 + if (noRecords) { + noRecords.classList.remove('d-none'); + } + if (pagination) { + pagination.innerHTML = ''; + } + } else { // 更新记录总数 - totalRecords = data.length === PAGE_SIZE ? -1 : offset + data.length; + totalRecords = records.length === limit ? -1 : offset + records.length; // 渲染记录 - renderSMSRecords(data); + renderRecords(records); - // 更新分页 - updatePagination(data.length === PAGE_SIZE); + // 生成分页 + generatePagination(page, limit, records.length === limit); // 调整表格列 adjustTableColumns(); - - // 显示无记录提示 - if (data.length === 0 && noRecords) { - noRecords.classList.remove('d-none'); - } } }) .catch(error => { console.error('获取短信记录失败:', error); showToast('error', '获取短信记录失败', error.message); - }) - .finally(() => { + // 隐藏加载指示器 if (loadingIndicator) { loadingIndicator.classList.add('d-none'); } + + if (smsRecordsTable) { + const tableBody = smsRecordsTable.querySelector('tbody'); + if (tableBody) { + tableBody.innerHTML = ` + + + 加载失败: ${error.message} + + + `; + } + } }); } @@ -142,22 +146,25 @@ document.addEventListener("DOMContentLoaded", function() { * 渲染短信记录到表格 * @param {Array} records - 短信记录数组 */ - function renderSMSRecords(records) { - if (!smsRecordsTable) return; - + function renderRecords(records) { const tableBody = smsRecordsTable.querySelector('tbody'); if (!tableBody) return; tableBody.innerHTML = ''; - if (records.length === 0) { - return; - } - records.forEach(record => { const row = document.createElement('tr'); row.classList.add('fade-in'); + // 格式化日期时间 + const date = new Date(record.receive_time); + const formattedDate = formatDateTime(date); + + // 应用敏感信息掩码 + const maskedSMS = maskSensitiveInfo(record.sms); + const maskedFrom = maskSensitiveInfo(record.from_ || record.from); + const maskedSimSlot = record.sim_slot ? maskSensitiveInfo(record.sim_slot) : ''; + // 为验证码创建适当的徽章 const codeElement = record.extracted_code ? `${record.extracted_code}` @@ -165,10 +172,10 @@ document.addEventListener("DOMContentLoaded", function() { row.innerHTML = ` ${record.id} - ${escapeHtml(record.from_ || record.from)} - ${escapeHtml(record.sms)} + ${maskedFrom} + ${maskedSMS} ${codeElement} - ${formatDateTime(record.receive_time)} + ${formattedDate} - - `; - - tableBody.appendChild(row); - }); - - // 添加事件监听器到查看详情按钮 - document.querySelectorAll('.view-details').forEach(button => { - button.addEventListener('click', async () => { - const id = button.getAttribute('data-id'); - await showRecordDetails(id); - }); - }); - - // 创建简单分页 - generatePagination(page, limit, records.length === limit); - } - } catch (error) { - console.error('加载短信记录失败:', error); - loadingIndicator.classList.add('d-none'); - tableBody.innerHTML = ` - - - 加载失败: ${error.message} - - - `; - } -} - -// 生成分页控件 -function generatePagination(currentPage, limit, hasMore) { - const pagination = document.getElementById('pagination'); - if (!pagination) return; - - pagination.innerHTML = ''; - - // 上一页按钮 - const prevItem = document.createElement('li'); - prevItem.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`; - prevItem.innerHTML = ``; - if (currentPage > 1) { - prevItem.querySelector('a').addEventListener('click', (e) => { - e.preventDefault(); - loadSMSRecords(currentPage - 1, limit); - }); - } - pagination.appendChild(prevItem); - - // 当前页 - const currentItem = document.createElement('li'); - currentItem.className = 'page-item active'; - currentItem.innerHTML = `${currentPage}`; - pagination.appendChild(currentItem); - - // 下一页按钮 - const nextItem = document.createElement('li'); - nextItem.className = `page-item ${!hasMore ? 'disabled' : ''}`; - nextItem.innerHTML = ``; - if (hasMore) { - nextItem.querySelector('a').addEventListener('click', (e) => { - e.preventDefault(); - loadSMSRecords(currentPage + 1, limit); - }); - } - pagination.appendChild(nextItem); -} - -// 显示记录详情 -async function showRecordDetails(id) { - try { - const response = await fetch(`/v1/sms/${id}`); - const record = await response.json(); - - // 应用敏感信息掩码 - const maskedSMS = maskSensitiveInfo(record.sms); - const maskedFrom = maskSensitiveInfo(record.from_); - const maskedSimSlot = record.sim_slot ? maskSensitiveInfo(record.sim_slot) : '未知'; - const maskedPhoneNumber = record.phone_number ? maskSensitiveInfo(record.phone_number) : '未提取'; - - // 创建模态框 - const modalId = 'recordDetailModal'; - let modal = document.getElementById(modalId); - - // 如果模态框不存在，创建一个 - if (!modal) { - modal = document.createElement('div'); - modal.id = modalId; - modal.className = 'modal fade'; - modal.tabIndex = -1; - modal.setAttribute('aria-hidden', 'true'); - document.body.appendChild(modal); - } - - // 格式化日期时间 - const formattedDate = new Date(record.receive_time).toLocaleString(); - - // 设置模态框内容 - modal.innerHTML = ` -
-
-
-
短信详情 #${record.id}
- -
-
-
- -
${maskedFrom}
-
-
- -
${maskedSimSlot}
-
-
- -
${maskedPhoneNumber}
-
-
- -
${maskedSMS.replace(/\n/g, '
')}
-
-
- -
${record.extracted_code || '未提取'}
-
-
- -
${formattedDate}
-
-
-
- -
-
-
- `; - - // 显示模态框 - const modalInstance = new bootstrap.Modal(modal); - modalInstance.show(); - } catch (error) { - console.error('获取记录详情失败:', error); - alert('获取详情失败: ' + error.message); - } } \ No newline at end of file