mars
0d57273021
- 新增用户注册和登录系统 (login.html, register.html) - 集成Supabase数据库连接 (config.js, api.js) - 完善数据库架构设计 (database-schema.sql) - 添加部署指南和配置文档 (DEPLOYMENT_GUIDE.md) - 修复主页面结构和功能完善 (index.html) - 支持通话记录保存到数据库 - 完整的账单管理和用户认证流程 - 集成OpenAI、Twilio、Stripe等API服务
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> |