reading-insights/test_frontend_api.html at main · dengxuezhao/reading-insights · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端API测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
        .data-box {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            font-family: monospace;
            white-space: pre-wrap;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .loading {
            color: #6c757d;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 前端API数据测试</h1>
        <p>测试后端API是否返回正确的同步数据</p>

        <button onclick="testAPIs()">🚀 开始测试</button>
        <button onclick="clearResults()">🧹 清空结果</button>

        <div id="results"></div>
    </div>

    <script>
        const baseURL = 'http://localhost:8000/api/v1';
        let authToken = null;

        async function testAPIs() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<div class="status loading">🔄 正在测试API...</div>';

            try {
                // 1. 获取认证token
                await getAuthToken();

                // 2. 测试各种API
                await testDashboardSummary();
                await testSyncStatus();
                await testBooks();

                resultsDiv.innerHTML += '<div class="status success">✅ API测试完成</div>';
            } catch (error) {
                resultsDiv.innerHTML += `<div class="status error">❌ 测试失败: ${error.message}</div>`;
            }
        }

        async function getAuthToken() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML += '<div class="status loading">🔐 获取认证token...</div>';

            try {
                const response = await fetch(`${baseURL}/public/default-token`);
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const data = await response.json();
                authToken = data.access_token;

                resultsDiv.innerHTML += '<div class="status success">✅ 认证token获取成功</div>';
                resultsDiv.innerHTML += `<div class="data-box">Token: ${authToken.substring(0, 50)}...</div>`;
            } catch (error) {
                resultsDiv.innerHTML += `<div class="status error">❌ 获取token失败: ${error.message}</div>`;
                throw error;
            }
        }

        async function testDashboardSummary() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML += '<div class="status loading">📊 测试仪表盘数据...</div>';

            try {
                const response = await fetch(`${baseURL}/statistics/dashboard/summary`, {
                    headers: {
                        'Authorization': `Bearer ${authToken}`
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const data = await response.json();

                resultsDiv.innerHTML += '<div class="status success">✅ 仪表盘数据获取成功</div>';
                resultsDiv.innerHTML += `<div class="data-box">📚 总书籍数: ${data.total_books}
⏱️ 总阅读时间: ${data.total_reading_time}秒 (${(data.total_reading_time/3600).toFixed(1)}小时)
📄 总阅读页数: ${data.total_pages_read}
📖 进行中书籍: ${data.books_in_progress}
✅ 已完成书籍: ${data.books_completed}
🎯 阅读速度: ${data.avg_reading_speed}页/小时
🔥 阅读连续天数: ${data.reading_streak}
📈 本周阅读时间: ${data.this_week_reading_time}秒
📅 本月阅读时间: ${data.this_month_reading_time}秒</div>`;

            } catch (error) {
                resultsDiv.innerHTML += `<div class="status error">❌ 仪表盘数据获取失败: ${error.message}</div>`;
                throw error;
            }
        }

        async function testSyncStatus() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML += '<div class="status loading">🔄 测试同步状态...</div>';

            try {
                const response = await fetch(`${baseURL}/public/sync-status`);
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const data = await response.json();

                resultsDiv.innerHTML += '<div class="status success">✅ 同步状态获取成功</div>';
                resultsDiv.innerHTML += `<div class="data-box">👤 用户: ${data.username} (ID: ${data.user_id})
📚 同步书籍数: ${data.total_books}
📖 同步会话数: ${data.total_sessions}
🕒 最后阅读时间: ${data.last_reading_time || '无'}
🌐 WebDAV配置: ${data.has_webdav_config ? '已配置' : '未配置'}</div>`;

            } catch (error) {
                resultsDiv.innerHTML += `<div class="status error">❌ 同步状态获取失败: ${error.message}</div>`;
                throw error;
            }
        }

        async function testBooks() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML += '<div class="status loading">📚 测试书籍列表...</div>';

            try {
                const response = await fetch(`${baseURL}/books?page=1&page_size=5`, {
                    headers: {
                        'Authorization': `Bearer ${authToken}`
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const data = await response.json();

                resultsDiv.innerHTML += '<div class="status success">✅ 书籍列表获取成功</div>';
                resultsDiv.innerHTML += `<div class="data-box">📊 总计: ${data.total}本书籍，当前页: ${data.page}/${data.total_pages}

📚 前5本书籍:
${data.books.map(book => `- ${book.title} (${book.author || '未知作者'}) - ${book.total_pages || 0}页`).join('\n')}</div>`;

            } catch (error) {
                resultsDiv.innerHTML += `<div class="status error">❌ 书籍列表获取失败: ${error.message}</div>`;
                throw error;
            }
        }

        function clearResults() {
            document.getElementById('results').innerHTML = '';
        }
    </script>
</body>
</html>