AaaSBackstage/js/index.js

var accessToken = localStorage.getItem("access_token");
console.log(accessToken);

if (accessToken === null) {
    alert('請先登入')
    window.location.href = "./login.html";
}

var usernameEmail = localStorage.getItem("username");
console.log(usernameEmail)

var userNameSpan = document.getElementById("userName");

var table_body = document.getElementById("table_body");


userNameSpan.textContent = usernameEmail;



function logout() {
    localStorage.removeItem("access_token");
}

$(document).on("click", "#logout", function (event) {
    alert("登出成功");
    logout();
    window.location.href = "./login.html";
});

let currentPage = 1;
var pageSize = 10;

function formatDate(dateString) {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以需要加 1
    const day = String(date.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
}

function fetchData(page) {
    // 定义请求头
    const headers = {
        'Authorization': 'Bearer ' + accessToken,  // 例如携带 JWT 令牌
    };


    // 发送 GET 请求
    axios.get(`http://cmm.ai:9000/auth/users/log?page_num=${page}&page_size=${pageSize}`, {
        headers: headers
    })
        .then(response => {
            console.log(response.data);  // 成功处理返回的数据
            var log_data = response.data.data
            var table = ``

            var page_num = response.data.total;
            var page_size = 20;
            var page_amount = Math.ceil(page_num / page_size);
            console.log(page_amount)

            // for (var i = 0; i < log_data.length; i++) {
            //     table += `
            //     <tr>
            //         <td>${log_data[i].created_at}</td>
            //         <td>${log_data[i].question}</td>
            //         <td>${log_data[i].answer}</td>
            //     <tr>
            //  `
            // }

            table_body.innerHTML = ''

            // 填充表格数据
            log_data.forEach(item => {
                const formattedDate = formatDate(item.created_at);
                const row = `<tr>
                      <td>${formattedDate}</td>
                      <td>${item.question}</td>
                      <td>${item.answer}</td>
                    </tr>`;
                table_body.innerHTML += row;
            });



            // table_body.innerHTML = table;
            updatePagination(page_amount, page);


        })
        .catch(error => {
            console.error('Error fetching data:', error);  // 处理错误
        });


}

fetchData(currentPage);
// function updatePagination(totalPages, currentPage) {
//     const pagination = document.getElementById('pagination');
//     pagination.innerHTML = ''; // 清空分页

//     // 生成分页按钮
//     for (let i = 1; i <= totalPages; i++) {
//         pagination.innerHTML += `
//             <li class="page-item ${i === currentPage ? 'active' : ''}">
//               <a class="page-link" href="#" onclick="fetchData(${i})">${i}</a>
//             </li>`;
//     }
// }

function updatePagination(totalPages, currentPage) {
    const pagination = document.getElementById('pagination');
    pagination.innerHTML = ''; // 清空分页

    // 设置你希望在分页栏中显示的页码数量
    const maxVisiblePages = 10;
    const halfVisiblePages = Math.floor(maxVisiblePages / 2);

    let startPage = Math.max(1, currentPage - halfVisiblePages);
    let endPage = Math.min(totalPages, currentPage + halfVisiblePages);

    // 调整 startPage 和 endPage，确保显示的页码数量是合理的
    if (endPage - startPage < maxVisiblePages - 1) {
        if (currentPage <= halfVisiblePages) {
            endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
        } else if (currentPage + halfVisiblePages >= totalPages) {
            startPage = Math.max(1, endPage - maxVisiblePages + 1);
        }
    }

    // 添加第一页按钮
    if (startPage > 1) {
        pagination.innerHTML += `
        <li class="page-item">
          <a class="page-link" href="#" onclick="fetchData(1)">1</a>
        </li>`;
        pagination.innerHTML += `
        <li class="page-item disabled">
          <a class="page-link" href="#">...</a>
        </li>`;
    }

    // 添加中间的页码按钮
    for (let i = startPage; i <= endPage; i++) {
        pagination.innerHTML += `
        <li class="page-item ${i === currentPage ? 'active' : ''}">
          <a class="page-link" href="#" onclick="fetchData(${i})">${i}</a>
        </li>`;
    }

    // 添加最后一页按钮
    if (endPage < totalPages) {
        pagination.innerHTML += `
        <li class="page-item disabled">
          <a class="page-link" href="#">...</a>
        </li>`;
        pagination.innerHTML += `
        <li class="page-item">
          <a class="page-link" href="#" onclick="fetchData(${totalPages})">${totalPages}</a>
        </li>`;
    }

    // 添加 "上一页" 按钮
    if (currentPage > 1) {
        pagination.innerHTML = `
        <li class="page-item">
          <a class="page-link" href="#" onclick="fetchData(${currentPage - 1})">&laquo;</a>
        </li>` + pagination.innerHTML;
    }

    // 添加 "下一页" 按钮
    if (currentPage < totalPages) {
        pagination.innerHTML += `
        <li class="page-item">
          <a class="page-link" href="#" onclick="fetchData(${currentPage + 1})">&raquo;</a>
        </li>`;
    }
}