223 lines
7.2 KiB
HTML
223 lines
7.2 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>Supabase 连接测试</title>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
background: white;
|
|||
|
|
padding: 30px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
.status {
|
|||
|
|
padding: 15px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.success {
|
|||
|
|
background-color: #d4edda;
|
|||
|
|
color: #155724;
|
|||
|
|
border: 1px solid #c3e6cb;
|
|||
|
|
}
|
|||
|
|
.error {
|
|||
|
|
background-color: #f8d7da;
|
|||
|
|
color: #721c24;
|
|||
|
|
border: 1px solid #f5c6cb;
|
|||
|
|
}
|
|||
|
|
.info {
|
|||
|
|
background-color: #d1ecf1;
|
|||
|
|
color: #0c5460;
|
|||
|
|
border: 1px solid #bee5eb;
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
background-color: #007bff;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
button:hover {
|
|||
|
|
background-color: #0056b3;
|
|||
|
|
}
|
|||
|
|
.loading {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
pre {
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<h1>🔧 Supabase 连接测试</h1>
|
|||
|
|
|
|||
|
|
<div class="info">
|
|||
|
|
<strong>说明：</strong> 这个页面用于测试 Supabase 数据库连接是否正常。
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>当前配置</h2>
|
|||
|
|
<div id="currentConfig"></div>
|
|||
|
|
|
|||
|
|
<h2>连接测试</h2>
|
|||
|
|
<button onclick="testConnection()" id="testBtn">测试连接</button>
|
|||
|
|
<div class="loading" id="loading">正在测试连接...</div>
|
|||
|
|
|
|||
|
|
<div id="result"></div>
|
|||
|
|
|
|||
|
|
<h2>数据库表检查</h2>
|
|||
|
|
<button onclick="checkTables()" id="tablesBtn">检查数据库表</button>
|
|||
|
|
<div id="tablesResult"></div>
|
|||
|
|
|
|||
|
|
<h2>解决方案</h2>
|
|||
|
|
<div class="info">
|
|||
|
|
<p><strong>如果连接失败，请按以下步骤操作：</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li>访问 <a href="https://supabase.com/dashboard/project/poxwjzdianersitpnvdy" target="_blank">Supabase 控制台</a></li>
|
|||
|
|
<li>进入 Settings → API</li>
|
|||
|
|
<li>复制 "anon public" 密钥</li>
|
|||
|
|
<li>更新 config.js 文件中的 ANON_KEY</li>
|
|||
|
|
<li>刷新页面重新测试</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 引入 Supabase 客户端 -->
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
|||
|
|
<script src="config.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 显示当前配置
|
|||
|
|
document.getElementById('currentConfig').innerHTML = `
|
|||
|
|
<pre>
|
|||
|
|
URL: ${CONFIG.SUPABASE.URL}
|
|||
|
|
ANON_KEY: ${CONFIG.SUPABASE.ANON_KEY.substring(0, 50)}...
|
|||
|
|
</pre>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
let supabase;
|
|||
|
|
|
|||
|
|
async function testConnection() {
|
|||
|
|
const resultDiv = document.getElementById('result');
|
|||
|
|
const testBtn = document.getElementById('testBtn');
|
|||
|
|
const loading = document.getElementById('loading');
|
|||
|
|
|
|||
|
|
testBtn.disabled = true;
|
|||
|
|
loading.style.display = 'block';
|
|||
|
|
resultDiv.innerHTML = '';
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 创建 Supabase 客户端
|
|||
|
|
const { createClient } = supabase;
|
|||
|
|
supabase = createClient(CONFIG.SUPABASE.URL, CONFIG.SUPABASE.ANON_KEY);
|
|||
|
|
|
|||
|
|
// 测试连接
|
|||
|
|
const { data, error } = await supabase.auth.getSession();
|
|||
|
|
|
|||
|
|
if (error) {
|
|||
|
|
throw error;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resultDiv.innerHTML = `
|
|||
|
|
<div class="success">
|
|||
|
|
✅ 连接成功！API 密钥有效。
|
|||
|
|
</div>
|
|||
|
|
<pre>响应数据: ${JSON.stringify(data, null, 2)}</pre>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
resultDiv.innerHTML = `
|
|||
|
|
<div class="error">
|
|||
|
|
❌ 连接失败: ${error.message}
|
|||
|
|
</div>
|
|||
|
|
<pre>错误详情: ${JSON.stringify(error, null, 2)}</pre>
|
|||
|
|
`;
|
|||
|
|
} finally {
|
|||
|
|
testBtn.disabled = false;
|
|||
|
|
loading.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function checkTables() {
|
|||
|
|
const resultDiv = document.getElementById('tablesResult');
|
|||
|
|
const tablesBtn = document.getElementById('tablesBtn');
|
|||
|
|
|
|||
|
|
if (!supabase) {
|
|||
|
|
resultDiv.innerHTML = `
|
|||
|
|
<div class="error">
|
|||
|
|
❌ 请先测试连接！
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tablesBtn.disabled = true;
|
|||
|
|
resultDiv.innerHTML = '<div class="info">正在检查数据库表...</div>';
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 尝试查询系统设置表
|
|||
|
|
const { data, error } = await supabase
|
|||
|
|
.from('system_settings')
|
|||
|
|
.select('*')
|
|||
|
|
.limit(5);
|
|||
|
|
|
|||
|
|
if (error) {
|
|||
|
|
throw error;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resultDiv.innerHTML = `
|
|||
|
|
<div class="success">
|
|||
|
|
✅ 数据库表访问正常！找到 ${data.length} 条系统设置记录。
|
|||
|
|
</div>
|
|||
|
|
<pre>示例数据: ${JSON.stringify(data, null, 2)}</pre>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
if (error.message.includes('relation "system_settings" does not exist')) {
|
|||
|
|
resultDiv.innerHTML = `
|
|||
|
|
<div class="error">
|
|||
|
|
❌ 数据库表不存在！请先执行数据库初始化脚本。
|
|||
|
|
</div>
|
|||
|
|
<div class="info">
|
|||
|
|
<p><strong>解决方案：</strong></p>
|
|||
|
|
<ol>
|
|||
|
|
<li>访问 <a href="https://supabase.com/dashboard/project/poxwjzdianersitpnvdy" target="_blank">Supabase SQL Editor</a></li>
|
|||
|
|
<li>执行 database-init.sql 脚本</li>
|
|||
|
|
<li>重新测试</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
} else {
|
|||
|
|
resultDiv.innerHTML = `
|
|||
|
|
<div class="error">
|
|||
|
|
❌ 数据库访问失败: ${error.message}
|
|||
|
|
</div>
|
|||
|
|
<pre>错误详情: ${JSON.stringify(error, null, 2)}</pre>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
tablesBtn.disabled = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面加载时自动测试连接
|
|||
|
|
window.addEventListener('load', () => {
|
|||
|
|
setTimeout(testConnection, 1000);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|