eo-comment 测试页面

⚙️ API 配置

API 基础 URL 留空使用当前域名，或填写完整的 API 地址

🚀 快速测试场景

📋 评论表单

\n点击我\n\n\n这是XSS安全测试，应该被过滤。' }, markdown: { nick: 'Markdown爱好者', mail: 'md@example.com', link: 'https://markdown.com', comment: '# Markdown 测试\n\n## 二级标题\n\n**粗体文本** *斜体文本* ~~删除线~~\n\n- 无序列表项1\n- 无序列表项2\n - 嵌套列表\n\n1. 有序列表项1\n2. 有序列表项2\n\n`代码片段` 和\n\n```javascript\nfunction test() {\n console.log("Hello World");\n}\n```\n\n> 这是一个引用块\n\n[链接文本](https://example.com)' }, emoji: { nick: '表情包', mail: 'emoji@example.com', link: '', comment: '各种表情测试：\n\n😀 😃 😄 😁 😆 😅 😂 🤣\n😊 😇 🙂 🙃 😉 😌 😍 🥰\n😘 😗 😙 😚 😋 😛 😝 😜\n🤪 🤨 🧐 🤓 😎 🥸 🤩 🥳\n\n❤️ 🧡 💛 💚 💙 💜 🖤 🤍\n\n👍 👎 👏 🙌 🤝 ✊ 👊 🤜 🤛\n\n中文表情：🀄 🎎 🧧 🏮' }, empty: { nick: '', mail: '', link: '', comment: '' } }; // 填充测试数据 function fillTestData(scenario) { const data = TEST_DATA[scenario]; document.getElementById('nick').value = data.nick; document.getElementById('mail').value = data.mail; document.getElementById('link').value = data.link; document.getElementById('comment').value = data.comment; updateCharCount(); } // 清空表单 function clearForm() { document.getElementById('comment-form').reset(); updateCharCount(); hideResult(); } // 更新字符计数 function updateCharCount() { const comment = document.getElementById('comment').value; document.getElementById('char-count').textContent = comment.length; } // 监听输入事件 document.getElementById('comment').addEventListener('input', updateCharCount); // 显示结果 function showResult(type, title, message, json = null) { const result = document.getElementById('result'); result.className = `result ${type}`; result.style.display = 'block'; let html = `

${title}

`; html += `

${message}

`; if (json) { html += `

${JSON.stringify(json, null, 2)}

`; } result.innerHTML = html; // 滚动到结果区域 result.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } // 隐藏结果 function hideResult() { const result = document.getElementById('result'); result.style.display = 'none'; } // 提交评论 async function submitComment(e) { e.preventDefault(); // 收集表单数据 const formData = { nick: document.getElementById('nick').value.trim() || '匿名', mail: document.getElementById('mail').value.trim(), link: document.getElementById('link').value.trim(), comment: document.getElementById('comment').value.trim(), url: '/test-page' }; // 表单验证 if (!formData.comment) { showResult('error', '⚠️ 验证失败', '评论内容不能为空'); return; } if (formData.comment.length > 10000) { showResult('error', '⚠️ 验证失败', '评论内容不能超过 10000 个字符'); return; } // 显示加载状态 showResult('loading', '⏳ 提交中...', '正在发送评论，请稍候...'); // 获取 API URL let apiUrl = document.getElementById('api-url').value.trim(); if (!apiUrl) { apiUrl = '/api/comment'; } // 记录开始时间 const startTime = Date.now(); try { const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); const duration = Date.now() - startTime; const result = await response.json(); if (response.ok && result.success) { const statusMsg = result.data.status === 'pending' ? '评论已提交，等待审批' : '评论发表成功'; showResult( 'success', '✅ 提交成功', `${statusMsg}（耗时: ${duration}ms）\n\n评论ID: ${result.data.id}`, result ); // 清空表单（可选） // clearForm(); } else { showResult( 'error', '❌ 提交失败', `${result.message || '未知错误'}（耗时: ${duration}ms）`, result ); } } catch (error) { const duration = Date.now() - startTime; showResult( 'error', '❌ 网络错误', `请求失败: ${error.message}（耗时: ${duration}ms）\n\n请检查网络连接和 API 地址是否正确。` ); } } // 初始化 document.addEventListener('DOMContentLoaded', function() { updateCharCount(); console.log('eo-comment 测试页面已加载'); console.log('可用测试场景:', Object.keys(TEST_DATA)); });

🧪 eo-comment 测试页面