Hello world!

By miaotao 5 3 月, 2026

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时聚合搜索系统</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; background: #f4f4f4; }
        .search-box { text-align: center; margin-bottom: 30px; }
        input[type="text"] { padding: 15px; width: 60%; font-size: 18px; border: 1px solid #ddd; border-radius: 8px; }
        button { padding: 15px 30px; font-size: 18px; background: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; }
        button:hover { background: #0056b3; }
        
        .results-container { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
        .category-box { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .category-title { border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 15px; color: #333; }
        
        .item { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
        .item h3 { margin: 0 0 5px 0; font-size: 16px; }
        .item h3 a { text-decoration: none; color: #1a0dab; }
        .item h3 a:hover { text-decoration: underline; }
        .item .meta { font-size: 12px; color: #666; }
        .item img { max-width: 100%; border-radius: 4px; margin-top: 5px; }
        
        .loading { text-align: center; display: none; color: #666; }
    </style>
</head>
<body>

    <div class="search-box">
        <h1>🔍 实时聚合搜索</h1>
        <input type="text" id="keyword" placeholder="输入关键词，例如：人工智能" onkeypress="handleEnter(event)">
        <button onclick="performSearch()">搜索</button>
    </div>

    <div id="loading" class="loading">正在全网检索中，请稍候...</div>

    <div id="results" class="results-container" style="display:none;">
        <!-- 左侧：新闻与文章 -->
        <div class="main-col">
            <div class="category-box">
                <h2 class="category-title">📰 最新资讯 (News)</h2>
                <div id="news-list"></div>
            </div>
            <div class="category-box">
                <h2 class="category-title">📝 深度文章 (Articles)</h2>
                <div id="articles-list"></div>
            </div>
        </div>

        <!-- 右侧：多媒体 -->
        <div class="side-col">
            <div class="category-box">
                <h2 class="category-title">🖼️ 图片 (Images)</h2>
                <div id="images-list"></div>
            </div>
            <div class="category-box">
                <h2 class="category-title">🎬 视频 (Videos)</h2>
                <div id="videos-list"></div>
            </div>
        </div>
    </div>

    <script>
        function handleEnter(e) {
            if (e.key === 'Enter') performSearch();
        }

        async function performSearch() {
            const keyword = document.getElementById('keyword').value;
            if (!keyword) return alert("请输入关键词");

            // UI 状态更新
            document.getElementById('loading').style.display = 'block';
            document.getElementById('results').style.display = 'none';

            try {
                const response = await fetch('/api/search', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ keyword: keyword })
                });

                const res = await response.json();
                renderResults(res.data);
            } catch (error) {
                alert("搜索出错：" + error);
            } finally {
                document.getElementById('loading').style.display = 'none';
                document.getElementById('results').style.display = 'grid';
            }
        }

        function renderResults(data) {
            // 渲染新闻
            const newsHtml = data.news.map(item => `
                <div class="item">
                    <h3><a href="${item.url}" target="_blank">${item.title}</a></h3>
                    <div class="meta">${item.source} · ${item.time}</div>
                </div>
            `).join('');
            document.getElementById('news-list').innerHTML = newsHtml || '<p>无相关结果</p>';

            // 渲染文章
            const articlesHtml = data.articles.map(item => `
                <div class="item">
                    <h3><a href="${item.url}" target="_blank">${item.title}</a></h3>
                    <div class="meta">${item.source} · ${item.time}</div>
                </div>
            `).join('');
            document.getElementById('articles-list').innerHTML = articlesHtml || '<p>无相关结果</p>';

            // 渲染图片
            const imagesHtml = data.images.map(item => `
                <div class="item" style="text-align:center;">
                    <a href="${item.url}" target="_blank"><img src="${item.src}" alt="${item.title}"></a>
                    <div class="meta">${item.title}</div>
                </div>
            `).join('');
            document.getElementById('images-list').innerHTML = imagesHtml;

            // 渲染视频
            const videosHtml = data.videos.map(item => `
                <div class="item">
                    <a href="${item.url}" target="_blank">
                        <img src="${item.cover}" style="width:100%">
                        <div style="margin-top:5px; font-weight:bold;">▶ ${item.title}</div>
                    </a>
                </div>
            `).join('');
            document.getElementById('videos-list').innerHTML = videosHtml;
        }
    </script>
</body>
</html>

实时聚合搜索系统

正在全网检索中，请稍候…

By miaotao

One thought on “Hello world!”

A WordPress Commenter说道：

5 3 月, 2026 11:50 上午

Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.

回复

回复 A WordPress Commenter 取消回复

在妙淘，我们相信浪漫可以对抗时间

妙淘では、私たちはロマンスが時間に打ち勝つことができると信じています

At Miaotao, We Believe Romance Can Defy Time

Hello world!