| <!DOCTYPE html>
|
| <html lang="zh-CN">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>PPTist Huggingface - API 测试页面</title>
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| body {
|
| font-family: 'Microsoft YaHei', Arial, sans-serif;
|
| background: #f5f5f5;
|
| padding: 20px;
|
| line-height: 1.6;
|
| }
|
|
|
| .container {
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| background: white;
|
| padding: 30px;
|
| border-radius: 10px;
|
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| h1 {
|
| color: #333;
|
| text-align: center;
|
| margin-bottom: 30px;
|
| padding-bottom: 15px;
|
| border-bottom: 3px solid #5b9bd5;
|
| }
|
|
|
| .section {
|
| margin-bottom: 30px;
|
| padding: 20px;
|
| border: 1px solid #ddd;
|
| border-radius: 8px;
|
| background: #fafafa;
|
| }
|
|
|
| .section h2 {
|
| color: #5b9bd5;
|
| margin-bottom: 15px;
|
| font-size: 1.4em;
|
| }
|
|
|
| .test-group {
|
| margin-bottom: 20px;
|
| }
|
|
|
| .test-item {
|
| display: flex;
|
| align-items: center;
|
| margin: 10px 0;
|
| gap: 15px;
|
| }
|
|
|
| .test-button {
|
| background: #5b9bd5;
|
| color: white;
|
| border: none;
|
| padding: 8px 16px;
|
| border-radius: 5px;
|
| cursor: pointer;
|
| min-width: 120px;
|
| font-size: 14px;
|
| }
|
|
|
| .test-button:hover {
|
| background: #4a8bc2;
|
| }
|
|
|
| .test-button:disabled {
|
| background: #ccc;
|
| cursor: not-allowed;
|
| }
|
|
|
| .endpoint-url {
|
| font-family: 'Courier New', monospace;
|
| background: #e8e8e8;
|
| padding: 5px 8px;
|
| border-radius: 3px;
|
| font-size: 12px;
|
| color: #666;
|
| flex: 1;
|
| }
|
|
|
| .status {
|
| padding: 4px 8px;
|
| border-radius: 3px;
|
| font-size: 12px;
|
| font-weight: bold;
|
| min-width: 80px;
|
| text-align: center;
|
| }
|
|
|
| .status.success {
|
| background: #d4edda;
|
| color: #155724;
|
| }
|
|
|
| .status.error {
|
| background: #f8d7da;
|
| color: #721c24;
|
| }
|
|
|
| .status.loading {
|
| background: #fff3cd;
|
| color: #856404;
|
| }
|
|
|
| .result-area {
|
| margin-top: 20px;
|
| background: white;
|
| border: 1px solid #ddd;
|
| border-radius: 5px;
|
| max-height: 300px;
|
| overflow-y: auto;
|
| }
|
|
|
| .result-content {
|
| padding: 15px;
|
| font-family: 'Courier New', monospace;
|
| font-size: 12px;
|
| white-space: pre-wrap;
|
| word-break: break-all;
|
| }
|
|
|
| .auth-section {
|
| background: #e3f2fd;
|
| border-color: #1976d2;
|
| }
|
|
|
| .github-section {
|
| background: #f3e5f5;
|
| border-color: #7b1fa2;
|
| }
|
|
|
| .ppt-section {
|
| background: #e8f5e8;
|
| border-color: #388e3c;
|
| }
|
|
|
| .public-section {
|
| background: #fff3e0;
|
| border-color: #f57c00;
|
| }
|
|
|
| .login-form {
|
| display: flex;
|
| gap: 10px;
|
| margin-bottom: 15px;
|
| align-items: center;
|
| }
|
|
|
| .login-form input {
|
| padding: 8px 12px;
|
| border: 1px solid #ddd;
|
| border-radius: 4px;
|
| font-size: 14px;
|
| }
|
|
|
| .token-display {
|
| font-family: 'Courier New', monospace;
|
| background: #f0f0f0;
|
| padding: 8px;
|
| border-radius: 4px;
|
| font-size: 12px;
|
| margin: 10px 0;
|
| word-break: break-all;
|
| }
|
|
|
| .clear-button {
|
| background: #dc3545;
|
| margin-left: 10px;
|
| }
|
|
|
| .clear-button:hover {
|
| background: #c82333;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <h1>🚀 PPTist Huggingface Space - API 测试控制台</h1>
|
|
|
|
|
| <div class="section github-section">
|
| <h2>🔗 GitHub 仓库连接测试</h2>
|
| <div class="test-group">
|
| <div class="test-item">
|
| <button class="test-button" onclick="testEndpoint('/api/health', 'GET')">健康检查</button>
|
| <span class="endpoint-url">GET /api/health</span>
|
| <span id="health-status" class="status">未测试</span>
|
| </div>
|
| <div class="test-item">
|
| <button class="test-button" onclick="testEndpoint('/api/github/status', 'GET')">GitHub 状态</button>
|
| <span class="endpoint-url">GET /api/github/status</span>
|
| <span id="github-status-status" class="status">未测试</span>
|
| </div>
|
| <div class="test-item">
|
| <button class="test-button" onclick="testEndpoint('/api/github/test', 'GET')">GitHub 连接测试</button>
|
| <span class="endpoint-url">GET /api/github/test</span>
|
| <span id="github-test-status" class="status">未测试</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="section auth-section">
|
| <h2>🔐 用户认证测试</h2>
|
| <div class="login-form">
|
| <input type="text" id="username" placeholder="用户名" value="PS01">
|
| <input type="password" id="password" placeholder="密码" value="admin_cybercity2025">
|
| <button class="test-button" onclick="testLogin()">登录测试</button>
|
| <button class="test-button clear-button" onclick="clearToken()">清除Token</button>
|
| </div>
|
| <div class="token-display" id="token-display">当前Token: 未登录</div>
|
|
|
| <div class="test-group">
|
| <div class="test-item">
|
| <button class="test-button" onclick="testEndpoint('/api/auth/verify', 'GET', true)">验证Token</button>
|
| <span class="endpoint-url">GET /api/auth/verify</span>
|
| <span id="auth-verify-status" class="status">未测试</span>
|
| </div>
|
| <div class="test-item">
|
| <button class="test-button" onclick="testEndpoint('/api/auth/user', 'GET', true)">获取用户信息</button>
|
| <span class="endpoint-url">GET /api/auth/user</span>
|
| <span id="auth-user-status" class="status">未测试</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="section ppt-section">
|
| <h2>📄 PPT 管理测试</h2>
|
| <div class="test-group">
|
| <div class="test-item">
|
| <button class="test-button" onclick="testEndpoint('/api/ppt/test', 'GET')">PPT 路由测试</button>
|
| <span class="endpoint-url">GET /api/ppt/test</span>
|
| <span id="ppt-test-status" class="status">未测试</span>
|
| </div>
|
| <div class="test-item">
|
| <button class="test-button" onclick="testEndpoint('/api/ppt/list', 'GET', true)">获取PPT列表</button>
|
| <span class="endpoint-url">GET /api/ppt/list</span>
|
| <span id="ppt-list-status" class="status">未测试</span>
|
| </div>
|
| <div class="test-item">
|
| <button class="test-button" onclick="testCreatePPT()">创建PPT</button>
|
| <span class="endpoint-url">POST /api/ppt/create</span>
|
| <span id="ppt-create-status" class="status">未测试</span>
|
| </div>
|
| <div class="test-item">
|
| <button class="test-button" onclick="testSavePPT()">保存PPT</button>
|
| <span class="endpoint-url">POST /api/ppt/save</span>
|
| <span id="ppt-save-status" class="status">未测试</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="section public-section">
|
| <h2>🌐 公共分享测试</h2>
|
| <div class="test-group">
|
| <div class="test-item">
|
| <button class="test-button" onclick="testGenerateShareLink()">生成分享链接</button>
|
| <span class="endpoint-url">POST /api/public/generate-share-link</span>
|
| <span id="public-generate-status" class="status">未测试</span>
|
| </div>
|
| <div class="test-item">
|
| <button class="test-button" onclick="testEndpoint('/api/public/ppt/PS01/test-ppt-id', 'GET')">获取公共PPT</button>
|
| <span class="endpoint-url">GET /api/public/ppt/:userId/:pptId</span>
|
| <span id="public-ppt-status" class="status">未测试</span>
|
| </div>
|
| <div class="test-item">
|
| <button class="test-button" onclick="testEndpoint('/api/public/view/PS01/test-ppt-id/0', 'GET')">公开查看页面</button>
|
| <span class="endpoint-url">GET /api/public/view/:userId/:pptId/:slideIndex</span>
|
| <span id="public-view-status" class="status">未测试</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="section">
|
| <h2>📋 测试结果</h2>
|
| <div class="result-area">
|
| <div class="result-content" id="result-content">点击上方按钮开始测试...</div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
| let currentToken = localStorage.getItem('test_token') || '';
|
| let testPptId = '';
|
|
|
|
|
| function updateTokenDisplay() {
|
| const display = document.getElementById('token-display');
|
| if (currentToken) {
|
| display.textContent = `当前Token: ${currentToken.substring(0, 20)}...`;
|
| } else {
|
| display.textContent = '当前Token: 未登录';
|
| }
|
| }
|
|
|
|
|
| function clearToken() {
|
| currentToken = '';
|
| localStorage.removeItem('test_token');
|
| updateTokenDisplay();
|
| logResult('Token已清除');
|
| }
|
|
|
|
|
| updateTokenDisplay();
|
|
|
|
|
| function logResult(message) {
|
| const resultContent = document.getElementById('result-content');
|
| const timestamp = new Date().toLocaleTimeString();
|
| resultContent.textContent += `[${timestamp}] ${message}\n`;
|
| resultContent.scrollTop = resultContent.scrollHeight;
|
| }
|
|
|
|
|
| function updateStatus(elementId, status, message = '') {
|
| const element = document.getElementById(elementId);
|
| element.className = `status ${status}`;
|
| element.textContent = status === 'success' ? '成功' : status === 'error' ? '失败' : status === 'loading' ? '测试中...' : '未测试';
|
| if (message) {
|
| logResult(`${elementId}: ${message}`);
|
| }
|
| }
|
|
|
|
|
| async function testLogin() {
|
| const username = document.getElementById('username').value;
|
| const password = document.getElementById('password').value;
|
|
|
| if (!username || !password) {
|
| alert('请输入用户名和密码');
|
| return;
|
| }
|
|
|
| try {
|
| logResult(`尝试登录用户: ${username}`);
|
|
|
| const response = await fetch('/api/auth/login', {
|
| method: 'POST',
|
| headers: {
|
| 'Content-Type': 'application/json',
|
| },
|
| body: JSON.stringify({ username, password }),
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok && data.token) {
|
| currentToken = data.token;
|
| localStorage.setItem('test_token', currentToken);
|
| updateTokenDisplay();
|
| logResult(`登录成功! 用户: ${data.user.username}, 角色: ${data.user.role}`);
|
| updateStatus('login-status', 'success');
|
| } else {
|
| logResult(`登录失败: ${data.error || '未知错误'}`);
|
| updateStatus('login-status', 'error');
|
| }
|
| } catch (error) {
|
| logResult(`登录请求失败: ${error.message}`);
|
| updateStatus('login-status', 'error');
|
| }
|
| }
|
|
|
|
|
| async function testEndpoint(url, method = 'GET', requireAuth = false, body = null) {
|
|
|
| let statusId;
|
| if (url === '/api/health') {
|
| statusId = 'health-status';
|
| } else if (url === '/api/github/status') {
|
| statusId = 'github-status-status';
|
| } else if (url === '/api/github/test') {
|
| statusId = 'github-test-status';
|
| } else if (url === '/api/auth/verify') {
|
| statusId = 'auth-verify-status';
|
| } else if (url === '/api/auth/user') {
|
| statusId = 'auth-user-status';
|
| } else if (url === '/api/ppt/test') {
|
| statusId = 'ppt-test-status';
|
| } else if (url === '/api/ppt/list') {
|
| statusId = 'ppt-list-status';
|
| } else if (url.includes('/api/public/ppt/')) {
|
| statusId = 'public-ppt-status';
|
| } else if (url.includes('/api/public/view/')) {
|
| statusId = 'public-view-status';
|
| } else {
|
| statusId = url.replace(/[^a-zA-Z0-9]/g, '-') + '-status';
|
| }
|
|
|
| try {
|
| updateStatus(statusId, 'loading');
|
| logResult(`测试端点: ${method} ${url}`);
|
|
|
| const headers = {
|
| 'Content-Type': 'application/json',
|
| };
|
|
|
| if (requireAuth && currentToken) {
|
| headers.Authorization = `Bearer ${currentToken}`;
|
| } else if (requireAuth && !currentToken) {
|
| logResult(`错误: 需要登录才能访问 ${url}`);
|
| updateStatus(statusId, 'error');
|
| return;
|
| }
|
|
|
| const options = {
|
| method,
|
| headers,
|
| };
|
|
|
| if (body) {
|
| options.body = JSON.stringify(body);
|
| }
|
|
|
| const response = await fetch(url, options);
|
| const data = await response.text();
|
|
|
| let jsonData;
|
| try {
|
| jsonData = JSON.parse(data);
|
| } catch {
|
| jsonData = data;
|
| }
|
|
|
| if (response.ok) {
|
| logResult(`✅ ${method} ${url} - 状态: ${response.status}`);
|
| logResult(`响应: ${JSON.stringify(jsonData, null, 2)}`);
|
| updateStatus(statusId, 'success');
|
| return jsonData;
|
| } else {
|
| logResult(`❌ ${method} ${url} - 状态: ${response.status}`);
|
| logResult(`错误: ${JSON.stringify(jsonData, null, 2)}`);
|
| updateStatus(statusId, 'error');
|
| }
|
| } catch (error) {
|
| logResult(`❌ ${method} ${url} - 网络错误: ${error.message}`);
|
| updateStatus(statusId, 'error');
|
| }
|
| }
|
|
|
|
|
| async function testCreatePPT() {
|
| if (!currentToken) {
|
| alert('请先登录');
|
| return;
|
| }
|
|
|
| const title = `测试PPT - ${new Date().toLocaleString()}`;
|
| const body = { title };
|
|
|
| try {
|
| updateStatus('ppt-create-status', 'loading');
|
| logResult(`创建PPT: ${title}`);
|
|
|
| const response = await fetch('/api/ppt/create', {
|
| method: 'POST',
|
| headers: {
|
| 'Content-Type': 'application/json',
|
| 'Authorization': `Bearer ${currentToken}`,
|
| },
|
| body: JSON.stringify(body),
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok && data.pptId) {
|
| testPptId = data.pptId;
|
| logResult(`✅ PPT创建成功! ID: ${testPptId}`);
|
| logResult(`PPT数据: ${JSON.stringify(data, null, 2)}`);
|
| updateStatus('ppt-create-status', 'success');
|
| } else {
|
| logResult(`❌ PPT创建失败: ${data.error || '未知错误'}`);
|
| updateStatus('ppt-create-status', 'error');
|
| }
|
| } catch (error) {
|
| logResult(`❌ PPT创建请求失败: ${error.message}`);
|
| updateStatus('ppt-create-status', 'error');
|
| }
|
| }
|
|
|
|
|
| async function testSavePPT() {
|
| if (!currentToken) {
|
| alert('请先登录');
|
| return;
|
| }
|
|
|
| if (!testPptId) {
|
| alert('请先创建一个PPT');
|
| return;
|
| }
|
|
|
| const pptData = {
|
| pptId: testPptId,
|
| title: '测试PPT - 已保存',
|
| slides: [
|
| {
|
| id: 'slide-1',
|
| elements: [
|
| {
|
| type: 'text',
|
| id: 'text-1',
|
| left: 100,
|
| top: 100,
|
| width: 300,
|
| height: 50,
|
| content: '这是一个测试文本',
|
| fontSize: 24,
|
| defaultColor: '#333333'
|
| }
|
| ],
|
| background: { type: 'solid', color: '#ffffff' }
|
| }
|
| ],
|
| theme: {
|
| backgroundColor: '#ffffff',
|
| themeColor: '#5b9bd5'
|
| }
|
| };
|
|
|
| try {
|
| updateStatus('ppt-save-status', 'loading');
|
| logResult(`保存PPT: ${testPptId}`);
|
|
|
| const response = await fetch('/api/ppt/save', {
|
| method: 'POST',
|
| headers: {
|
| 'Content-Type': 'application/json',
|
| 'Authorization': `Bearer ${currentToken}`,
|
| },
|
| body: JSON.stringify(pptData),
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok) {
|
| logResult(`✅ PPT保存成功!`);
|
| logResult(`响应: ${JSON.stringify(data, null, 2)}`);
|
| updateStatus('ppt-save-status', 'success');
|
| } else {
|
| logResult(`❌ PPT保存失败: ${data.error || '未知错误'}`);
|
| updateStatus('ppt-save-status', 'error');
|
| }
|
| } catch (error) {
|
| logResult(`❌ PPT保存请求失败: ${error.message}`);
|
| updateStatus('ppt-save-status', 'error');
|
| }
|
| }
|
|
|
|
|
| async function testGenerateShareLink() {
|
| if (!testPptId) {
|
| alert('请先创建并保存一个PPT');
|
| return;
|
| }
|
|
|
| const body = {
|
| userId: 'PS01',
|
| pptId: testPptId,
|
| slideIndex: 0
|
| };
|
|
|
| try {
|
| updateStatus('public-generate-status', 'loading');
|
| logResult(`生成分享链接 - PPT ID: ${testPptId}`);
|
|
|
| const response = await fetch('/api/public/generate-share-link', {
|
| method: 'POST',
|
| headers: {
|
| 'Content-Type': 'application/json',
|
| },
|
| body: JSON.stringify(body),
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok) {
|
| logResult(`✅ 分享链接生成成功!`);
|
| logResult(`单页链接: ${data.slideUrl}`);
|
| logResult(`完整PPT链接: ${data.pptUrl}`);
|
| logResult(`前端查看链接: ${data.viewUrl}`);
|
| updateStatus('public-generate-status', 'success');
|
| } else {
|
| logResult(`❌ 分享链接生成失败: ${data.error || '未知错误'}`);
|
| updateStatus('public-generate-status', 'error');
|
| }
|
| } catch (error) {
|
| logResult(`❌ 分享链接生成请求失败: ${error.message}`);
|
| updateStatus('public-generate-status', 'error');
|
| }
|
| }
|
|
|
|
|
| window.addEventListener('load', () => {
|
| logResult('🚀 PPTist API 测试控制台已就绪');
|
| logResult('📌 建议测试顺序:');
|
| logResult(' 1. 先测试健康检查和GitHub连接');
|
| logResult(' 2. 进行用户登录测试');
|
| logResult(' 3. 测试PPT管理功能');
|
| logResult(' 4. 测试公共分享功能');
|
| logResult('');
|
| });
|
| </script>
|
| </body>
|
| </html> |
