181 lines
7.7 KiB
HTML
181 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>静态服务器首页</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#3b82f6',
|
||
secondary: '#64748b',
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.text-shadow {
|
||
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
.card-hover {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50 min-h-screen">
|
||
<header class="bg-gradient-to-r from-primary to-blue-700 text-white py-16 px-4">
|
||
<div class="container mx-auto max-w-4xl">
|
||
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-shadow mb-4">
|
||
静态服务器
|
||
</h1>
|
||
<p class="text-xl opacity-90 max-w-2xl">
|
||
已成功启动，可访问静态文件和通过代理接口与后端交互
|
||
</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container mx-auto max-w-4xl px-4 py-12">
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<!-- 静态文件测试卡片 -->
|
||
<div class="bg-white rounded-xl shadow-md p-6 card-hover">
|
||
<div class="text-primary text-3xl mb-4">
|
||
<i class="fa fa-file-text-o" aria-hidden="true"></i>
|
||
</div>
|
||
<h2 class="text-xl font-semibold mb-3">静态文件服务</h2>
|
||
<p class="text-gray-600 mb-4">
|
||
该服务器可提供静态文件访问，当前根目录为 <code class="bg-gray-100 px-2 py-1 rounded">./html</code>
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<a href="/" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
|
||
<i class="fa fa-home mr-2"></i>当前首页
|
||
</a>
|
||
<a href="/test.txt" class="inline-flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
|
||
<i class="fa fa-file-text mr-2"></i>测试文件
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 代理接口测试卡片 -->
|
||
<div class="bg-white rounded-xl shadow-md p-6 card-hover">
|
||
<div class="text-green-500 text-3xl mb-4">
|
||
<i class="fa fa-exchange" aria-hidden="true"></i>
|
||
</div>
|
||
<h2 class="text-xl font-semibold mb-3">API代理服务</h2>
|
||
<p class="text-gray-600 mb-4">
|
||
所有 <code class="bg-gray-100 px-2 py-1 rounded">/api</code> 前缀的请求将代理到:
|
||
<br>
|
||
<code class="bg-gray-100 px-2 py-1 rounded">http://10.4.126.116:23000</code>
|
||
</p>
|
||
<button id="testApiBtn" class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition">
|
||
<i class="fa fa-play-circle mr-2"></i>测试API连接
|
||
</button>
|
||
<div id="apiTestResult" class="mt-4 hidden"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-12 bg-white rounded-xl shadow-md p-6">
|
||
<h2 class="text-xl font-semibold mb-4 flex items-center">
|
||
<i class="fa fa-info-circle text-primary mr-2"></i>
|
||
服务器信息
|
||
</h2>
|
||
<ul class="space-y-2 text-gray-700">
|
||
<li class="flex">
|
||
<span class="w-32 font-medium">服务器地址:</span>
|
||
<span>http://localhost:8080</span>
|
||
</li>
|
||
<li class="flex">
|
||
<span class="w-32 font-medium">启动时间:</span>
|
||
<span id="startTime"></span>
|
||
</li>
|
||
<li class="flex">
|
||
<span class="w-32 font-medium">静态文件目录:</span>
|
||
<span>./html</span>
|
||
</li>
|
||
<li class="flex">
|
||
<span class="w-32 font-medium">代理目标:</span>
|
||
<span>http://10.4.126.116:23000</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="bg-gray-800 text-white py-8 mt-16">
|
||
<div class="container mx-auto max-w-4xl px-4 text-center">
|
||
<p>© <span id="year"></span> 静态服务器 | 基于Node.js构建</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// 设置当前年份
|
||
document.getElementById('year').textContent = new Date().getFullYear();
|
||
|
||
// 设置启动时间
|
||
document.getElementById('startTime').textContent = new Date().toLocaleString();
|
||
|
||
// API测试功能
|
||
document.getElementById('testApiBtn').addEventListener('click', async () => {
|
||
const resultEl = document.getElementById('apiTestResult');
|
||
const btn = document.getElementById('testApiBtn');
|
||
|
||
// 显示加载状态
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>测试中...';
|
||
resultEl.className = 'mt-4 text-blue-600';
|
||
resultEl.innerHTML = '正在发送请求到 /api ...';
|
||
|
||
try {
|
||
// 发送测试请求（根据实际API调整路径）
|
||
const response = await fetch('/api/system/generator/generator-code/code-first', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ test: 'api-check' }),
|
||
timeout: 5000
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (response.ok) {
|
||
resultEl.className = 'mt-4 text-green-600 p-3 bg-green-50 rounded-md';
|
||
resultEl.innerHTML = `
|
||
<div class="font-medium mb-1">API代理成功!</div>
|
||
<pre class="text-sm overflow-x-auto">${JSON.stringify(data, null, 2)}</pre>
|
||
`;
|
||
} else {
|
||
resultEl.className = 'mt-4 text-yellow-600 p-3 bg-yellow-50 rounded-md';
|
||
resultEl.innerHTML = `
|
||
<div class="font-medium mb-1">API返回非成功状态 (${response.status})</div>
|
||
<pre class="text-sm overflow-x-auto">${JSON.stringify(data, null, 2)}</pre>
|
||
`;
|
||
}
|
||
} catch (error) {
|
||
resultEl.className = 'mt-4 text-red-600 p-3 bg-red-50 rounded-md';
|
||
resultEl.innerHTML = `
|
||
<div class="font-medium mb-1">API请求失败</div>
|
||
<div class="text-sm">${error.message}</div>
|
||
`;
|
||
} finally {
|
||
// 恢复按钮状态
|
||
btn.disabled = false;
|
||
btn.innerHTML = '<i class="fa fa-play-circle mr-2"></i>测试API连接';
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|