Server
/
long-article-recommend


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>违规文章删除</title>
    <!-- 引入 Bootstrap 样式 -->
    <link href="https://gcore.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://gcore.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
    /* 限制内容显示为省略号 */
    .ellipsis-container {
        position: relative;
        display: inline-block;
        max-width: 500px;
    }

    .text-ellipsis {
        display: inline-block;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 悬浮显示完整内容 */
    .tooltip-content {
        display: none; /* 初始隐藏 */
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 10;
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 5px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        white-space: normal;
        max-width: 500px;
        word-wrap: break-word;
        color: #000; /* 防止文字颜色被继承 */
    }

    .ellipsis-container:hover .tooltip-content {
        display: block; /* 悬停时显示完整内容 */
    }
</style>
<body>
<div class="container mt-5">
    <!-- 查询部分 -->
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h5>查询数据</h5>
        </div>
        <div class="card-body">
            <div class="row g-3 align-items-center">
                <div class="col-md-2">
                    <label for="titleInput" class="form-label">标题</label>
                </div>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="titleInput" placeholder="请输入标题">
                </div>
                <div class="col-md-2">
                    <button class="btn btn-success w-100" onclick="queryData(1)">查询</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据展示表格 -->
    <div class="card mt-4">
        <div class="card-header bg-secondary text-white">
            <h5>数据列表</h5>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="table-light">
                <tr>
                    <th style="width: 10%; white-space: nowrap;">发布日期</th>
                    <th style="width: 20%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">标题</th>
                    <th style="width: 10%; white-space: nowrap;">账号名称</th>
                    <th style="width: 17%; white-space: nowrap;">账号来源</th>
                    <th style="width: 10%; white-space: nowrap;">操作计划类型</th>
                    <th style="width: 5%; white-space: nowrap;">位置</th>
                    <th style="width: 18%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">链接</th>
                    <th style="width: 10%; white-space: nowrap;">操作</th>
                </tr>
                </thead>
                <tbody id="dataTableBody">
                <!-- 动态数据填充 -->
                </tbody>
            </table>

            <!-- 分页控件 -->
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center" id="pagination">
                    <!-- 分页按钮将在这里生成 -->
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- JavaScript 脚本 -->
<script>
    let currentPage = 1; // 当前页码
    const pageSize = 50; // 每页显示的数据条数

    window.onload = function () {
        queryData(currentPage); // 页面加载后自动执行查询，查询第一页数据
    };

    // 查询数据：调用后端接口，支持分页
    function queryData(page) {
        currentPage = page; // 更新当前页码
        const title = document.getElementById('titleInput').value;

        // 调用后端查询接口
        fetch(`/articleAudit/articleDeleteList`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'
            },
            body: JSON.stringify({title: title, pageNum: currentPage, pageSize: pageSize})
        })
            .then(response => response.json())
            .then(data => {
                console.log('查询结果:', data);
                populateTable(data.data.objs); // 渲染数据表格
                totalPage = Math.ceil(data.data.totalSize / pageSize);
                renderPagination(totalPage); // 渲染分页控件
            })
            .catch(error => {
                console.error('查询失败:', error);
                alert('查询失败，请检查接口连接！');
            });
    }

    // 渲染数据到表格
    function populateTable(data) {
        const tableBody = document.getElementById('dataTableBody');
        tableBody.innerHTML = ''; // 清空旧数据

        data.forEach(item => {
            const row = `
                    <tr>
                        <td>${item.dateStr}</td>
                        <td>
                            <div class="ellipsis-container">
                                <span class="text-ellipsis">${item.title}</span>
                                <div class="tooltip-content">${item.title}</div>
                            </div>
                        </td>
                        <td>${item.accountName}</td>
                        <td>${item.accountSourceType}</td>
                        <td>${item.planType}</td>
                        <td>${item.index}</td>
                        <td>
                            <div class="ellipsis-container">
                                <a href="${item.link}" target="_blank" rel="noopener noreferrer" class="text-ellipsis">${item.link}</a>
                                <div class="tooltip-content">${item.link}</div>
                            </div>
                        </td>
                        <td>
                            <button class="btn btn-primary btn-sm text-nowrap" onclick="submitData('${item.title}')">标记违规</button>
                        </td>
                    </tr>
                `;
            tableBody.insertAdjacentHTML('beforeend', row);
        });
    }

    // 渲染分页控件
    function renderPagination(totalPages) {
        const pagination = document.getElementById('pagination');
        pagination.innerHTML = ''; // 清空旧分页

        const maxVisiblePages = 5; // 最多显示的页码按钮数量
        let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
        let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

        // 上一页按钮
        pagination.insertAdjacentHTML('beforeend', `
        <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
            <a class="page-link" href="#" onclick="queryData(${currentPage - 1})">上一页</a>
        </li>
    `);

        // 显示前面的省略号（如果有的话）
        if (startPage > 1) {
            pagination.insertAdjacentHTML('beforeend', `
            <li class="page-item">
                <a class="page-link" href="#" onclick="queryData(1)">1</a>
            </li>
            <li class="page-item disabled">
                <span class="page-link">...</span>
            </li>
        `);
        }

        // 数字页码按钮
        for (let i = startPage; i <= endPage; i++) {
            pagination.insertAdjacentHTML('beforeend', `
            <li class="page-item ${currentPage === i ? 'active' : ''}">
                <a class="page-link" href="#" onclick="queryData(${i})">${i}</a>
            </li>
        `);
        }

        // 显示后面的省略号（如果有的话）
        if (endPage < totalPages) {
            pagination.insertAdjacentHTML('beforeend', `
            <li class="page-item disabled">
                <span class="page-link">...</span>
            </li>
            <li class="page-item">
                <a class="page-link" href="#" onclick="queryData(${totalPages})">${totalPages}</a>
            </li>
        `);
        }

        // 下一页按钮
        pagination.insertAdjacentHTML('beforeend', `
        <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
            <a class="page-link" href="#" onclick="queryData(${currentPage + 1})">下一页</a>
        </li>
    `);
    }

    // 提交删除：调用后端接口
    function submitData(title) {
        // 调用后端更新接口
        fetch('/articleAudit/titleDangerFindDelete', { // 替换为实际接口
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'
            },
            body: JSON.stringify({title: title})
        })
            .then(response => response.json())
            .then(data => {
                console.log('删除结果:', data);
                alert('删除成功！');
            })
            .catch(error => {
                console.error('删除失败:', error);
                alert('删除失败，请检查接口连接！');
            });
    }
</script>
</body>
</html>