xiaobo-news/debug2.html at main · princealbert/xiaobo-news · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
    <title>Debug Categories</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
    <h1 class="text-2xl mb-4">分类加载调试</h1>

    <div class="bg-white p-6 rounded shadow mb-6">
        <h2 class="text-lg font-bold mb-2">API响应:</h2>
        <pre id="api-result" class="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-96">加载中...</pre>
    </div>

    <div class="bg-white p-6 rounded shadow mb-6">
        <h2 class="text-lg font-bold mb-2">分类按钮:</h2>
        <div id="buttons" class="flex flex-wrap gap-2">等待...</div>
    </div>

    <div class="bg-white p-6 rounded">
        <h2 class="text-lg font-bold mb-2">Console输出:</h2>
        <pre id="console-output" class="bg-gray-50 p-4 rounded text-sm">等待...</pre>
    </div>

    <script>
        var API_BASE = 'http://127.0.0.1:9000';
        var output = document.getElementById('console-output');

        function log(msg) {
            output.textContent += msg + '\\n';
            console.log(msg);
        }

        log('开始测试...');

        fetch(API_BASE + '/api/categories')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                log('API调用成功');
                document.getElementById('api-result').textContent = JSON.stringify(data, null, 2);

                // 配置
                var LAYER1 = [
                    {name: '今日重大事件', icon: '🔥'},
                    {name: '智能金融速递', icon: '💼'},
                    {name: '营商趋势洞察', icon: '🔍'},
                    {name: '津城宏观政策', icon: '📜'}
                ];
                var LAYER2 = [
                    {name: 'AI', icon: '🤖'},
                    {name: '机器人', icon: '🦾'},
                    {name: '智能体', icon: '🧠'},
                    {name: '开源', icon: '💻'},
                    {name: '创业', icon: '🚀'}
                ];

                var counts = {};
                data.data.forEach(function(c) { counts[c.name] = c.count; });

                var container = document.getElementById('buttons');
                container.innerHTML = '';

                // 第一层
                var h2 = document.createElement('h3');
                h2.className = 'w-full text-sm font-bold text-gray-500 mb-2';
                h2.textContent = '🏷️ 专栏';
                container.appendChild(h2);

                LAYER1.forEach(function(item) {
                    var btn = document.createElement('button');
                    btn.className = 'px-3 py-1 text-sm rounded-full bg-blue-500 text-white';
                    btn.textContent = item.icon + ' ' + item.name + ' (' + (counts[item.name] || 0) + ')';
                    container.appendChild(btn);
                });

                // 第二层
                var h3 = document.createElement('h3');
                h3.className = 'w-full text-sm font-bold text-gray-500 mt-4 mb-2';
                h3.textContent = '🏷️ 标签';
                container.appendChild(h3);

                LAYER2.forEach(function(item) {
                    var btn = document.createElement('button');
                    btn.className = 'px-3 py-1 text-sm rounded-full bg-green-500 text-white';
                    btn.textContent = item.icon + ' ' + item.name + ' (' + (counts[item.name] || 0) + ')';
                    container.appendChild(btn);
                });

                log('分类按钮渲染完成');
            })
            .catch(function(e) {
                log('API调用失败: ' + e.message);
                document.getElementById('api-result').textContent = 'Error: ' + e.message;
            });
    </script>
</body>
</html>