<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资讯推送Web端</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Layui 的 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 10px; /* 减少边距 */
        }
        h1 {
            color: #333;
            font-size: 1.5em; /* 适当减小标题字体 */
        }
        #markdown-content {
            white-space: pre-wrap;
            font-size: 0.9em; /* 减小内容字体 */
        }
        /* 返回顶部按钮样式 */
        #back-to-top {
            display: none;
            position: fixed;
            bottom: 10px; /* 调整位置 */
            right: 10px; /* 调整位置 */
            z-index: 99;
            font-size: 16px; /* 减小字体 */
            border: none;
            outline: none;
            background-color: #555;
            color: white;
            cursor: pointer;
            padding: 10px; /* 减小内边距 */
            border-radius: 4px;
        }
        #back-to-top:hover {
            background-color: #777;
        }
    
        /* 移动端样式调整 */
        @media only screen and (max-width: 600px) {
            body {
                margin: 5px;
            }
            h1 {
                font-size: 1.2em;
            }
            #markdown-content {
                font-size: 0.8em;
            }
            #back-to-top {
                font-size: 14px;
                padding: 8px;
            }
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <center><h1 class="layui-title" id="page-title">历史推送读取</h1><br>
        <button id="toggle-fetch-btn" class="layui-btn">切换读取源</button><br></center>
        <div id="markdown-content" class="layui-card-body"></div>
    </div>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" title="Go to top">Top</button>

    <!-- 引入 Layui 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
    <script>
        layui.use(['layer'], function(){
            var layer = layui.layer;
            var currentUrl = '/get-sec-news';
            var titleMap = {
                '/get-sec-news': '安全新闻',
                '/get-tech-passage': '技术文章'
            };

            function updateTitle(url) {
                document.getElementById('page-title').innerText = titleMap[url] || '历史推送读取';
            }

            document.getElementById('toggle-fetch-btn').addEventListener('click', function() {
                if (currentUrl === '/get-sec-news') {
                    currentUrl = '/get-tech-passage';
                } else {
                    currentUrl = '/get-sec-news';
                }

                updateTitle(currentUrl);

                fetch(currentUrl)
                    .then(response => response.json())
                    .then(data => {
                        if (data.content) {
                            const htmlContent = marked.parse(data.content);
                            document.getElementById('markdown-content').innerHTML = htmlContent;
                        } else {
                            document.getElementById('markdown-content').innerHTML = '<p>加载历史推送文件时出错！（推送历史记录为空）</p>';
                        }
                    })
                    .catch(error => {
                        console.error('获取源文件失败:', error);
                        document.getElementById('markdown-content').innerHTML = '<p>无法加载历史推送文件！</p>';
                        layer.msg('Failed to load markdown.', {icon: 5});
                    });
            });

            // Initial fetch on page load
            updateTitle(currentUrl);

            fetch(currentUrl)
                .then(response => response.json())
                .then(data => {
                    if (data.content) {
                        const htmlContent = marked.parse(data.content);
                        document.getElementById('markdown-content').innerHTML = htmlContent;
                    } else {
                        document.getElementById('markdown-content').innerHTML = '<p>加载历史推送文件时出错！（推送历史记录为空）</p>';
                    }
                })
                .catch(error => {
                    console.error('获取源文件失败:', error);
                    document.getElementById('markdown-content').innerHTML = '<p>无法加载历史推送文件！</p>';
                    layer.msg('Failed to load markdown.', {icon: 5});
                });

            // 显示或隐藏返回顶部按钮
            window.onscroll = function() {
                scrollFunction();
            };

            function scrollFunction() {
                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("back-to-top").style.display = "block";
                } else {
                    document.getElementById("back-to-top").style.display = "none";
                }
            }

            // 返回顶部按钮点击事件
            document.getElementById("back-to-top").addEventListener("click", function() {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            });
        });
    </script>
</body>
</html>