test-page.html•8.11 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP 表单测试页面</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}
input, textarea, select {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s;
box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: #007bff;
}
button {
background-color: #007bff;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin-right: 10px;
}
button:hover {
background-color: #0056b3;
}
button:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
.success-message {
background-color: #d4edda;
color: #155724;
padding: 15px;
border-radius: 6px;
margin-top: 20px;
border: 1px solid #c3e6cb;
}
.error-message {
background-color: #f8d7da;
color: #721c24;
padding: 15px;
border-radius: 6px;
margin-top: 20px;
border: 1px solid #f5c6cb;
}
.info-panel {
background-color: #e9ecef;
border-radius: 6px;
padding: 20px;
margin-top: 20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>📝 MCP 表单测试页面</h1>
<p>填写下方表单，点击保存后数据将通过HTTP API传输给MCP客户端</p>
<form id="testForm">
<div class="form-group">
<label for="schemaPropA">schema测试字段1:</label>
<input type="text" id="schemaPropA" name="schemaPropA" placeholder="请输入字段1" required>
</div>
<div class="form-group">
<label for="schemaPropB">schema测试字段2:</label>
<input type="number" id="schemaPropB" name="schemaPropB" min="1" max="120" placeholder="请输入字段2">
</div>
<div class="form-group">
<label for="schemaPropC">schema测试字段3:</label>
<select id="schemaPropC" name="schemaPropC" required>
<option value="">请选择值</option>
<option value="OK1">OK1</option>
<option value="OK2">OK2</option>
<option value="OK3">OK3</option>
<option value="OK4">OK4</option>
<option value="OK5">OK5</option>
<option value="OK6">OK6</option>
<option value="OK7">OK7</option>
</select>
</div>
<div class="form-group">
<label for="schemaPropD">schema测试字段4:</label>
<textarea id="schemaPropD" name="schemaPropD" rows="4" placeholder="请输入字段4"></textarea>
</div>
<div class="form-group">
<label for="schemaPropE">schema测试字段5:</label>
<textarea id="schemaPropE" name="schemaPropE" rows="3" placeholder="请输入字段5"></textarea>
</div>
<button type="submit" id="submitBtn">💾 保存数据</button>
<button type="button" onclick="resetForm()">🔄 重置表单</button>
</form>
<div id="successMessage" class="success-message hidden">
✅ 数据保存成功！已通过HTTP API传输给MCP客户端。
</div>
<div id="errorMessage" class="error-message hidden">
❌ 数据保存失败，请检查网络连接后重试。
</div>
</div>
<script>
function updateDataPreview() {
const formData = new FormData(document.getElementById('testForm'));
const data = {
type: 'form_data',
data: Object.fromEntries(formData.entries()),
timestamp: new Date().toISOString(),
page: 'test-form'
};
document.getElementById('dataPreview').textContent = JSON.stringify(data, null, 2);
}
function resetForm() {
document.getElementById('testForm').reset();
hideMessages();
updateDataPreview();
}
function showMessage(type, message) {
hideMessages();
const messageDiv = document.getElementById(type + 'Message');
if (messageDiv) {
messageDiv.textContent = message;
messageDiv.classList.remove('hidden');
}
}
function hideMessages() {
document.getElementById('successMessage').classList.add('hidden');
document.getElementById('errorMessage').classList.add('hidden');
}
// 表单提交处理
document.getElementById('testForm').addEventListener('submit', async function(e) {
e.preventDefault();
const submitBtn = document.getElementById('submitBtn');
submitBtn.disabled = true;
submitBtn.textContent = '⏳ 提交中...';
try {
const formData = new FormData(e.target);
const data = {
type: 'form_data',
data: Object.fromEntries(formData.entries()),
timestamp: new Date().toISOString(),
page: 'test-form'
};
const response = await fetch('/api/submit-form', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
const result = await response.json();
if (result.success) {
showMessage('success', '✅ 数据保存成功！已传输给MCP客户端。');
} else {
showMessage('error', '❌ 保存失败: ' + (result.message || '未知错误'));
}
} catch (error) {
console.error('提交错误:', error);
showMessage('error', '❌ 网络错误，请检查连接后重试。');
} finally {
submitBtn.disabled = false;
submitBtn.textContent = '💾 保存数据';
}
});
// 实时更新数据预览
document.getElementById('testForm').addEventListener('input', updateDataPreview);
document.getElementById('testForm').addEventListener('change', updateDataPreview);
// 页面加载完成后初始化预览
document.addEventListener('DOMContentLoaded', function() {
updateDataPreview();
});
</script>
</body>
</html>