添加数据库集成和用户认证功能
- 新增用户注册和登录系统 (login.html, register.html) - 集成Supabase数据库连接 (config.js, api.js) - 完善数据库架构设计 (database-schema.sql) - 添加部署指南和配置文档 (DEPLOYMENT_GUIDE.md) - 修复主页面结构和功能完善 (index.html) - 支持通话记录保存到数据库 - 完整的账单管理和用户认证流程 - 集成OpenAI、Twilio、Stripe等API服务
This commit is contained in:
+176
-4
@@ -6,6 +6,12 @@
|
||||
<title>翻译服务应用</title>
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<meta name="theme-color" content="#4285f4">
|
||||
|
||||
<!-- 引入必要的脚本 -->
|
||||
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
||||
<script src="web-app/config.js"></script>
|
||||
<script src="web-app/api.js"></script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -37,9 +43,57 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.login-btn-header {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid white;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.login-btn-header:hover {
|
||||
background: white;
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
padding: 6px 12px;
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
@@ -665,7 +719,16 @@
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<div class="header">
|
||||
<h1>翻译服务应用</h1>
|
||||
<div class="header-content">
|
||||
<h1>翻译服务应用</h1>
|
||||
<div class="user-info login-required" style="display: none;">
|
||||
<a href="web-app/login.html" class="login-btn-header">登录</a>
|
||||
</div>
|
||||
<div class="user-info user-only" style="display: none;">
|
||||
<span class="user-name">用户名</span>
|
||||
<button class="logout-btn" onclick="handleLogout()">登出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
@@ -912,6 +975,92 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 等待API管理器初始化
|
||||
let apiManagerReady = false;
|
||||
|
||||
// 初始化应用
|
||||
async function initApp() {
|
||||
// 等待API管理器初始化
|
||||
await new Promise(resolve => {
|
||||
const checkInit = () => {
|
||||
if (window.apiManager && window.apiManager.supabase) {
|
||||
apiManagerReady = true;
|
||||
resolve();
|
||||
} else {
|
||||
setTimeout(checkInit, 100);
|
||||
}
|
||||
};
|
||||
checkInit();
|
||||
});
|
||||
|
||||
// 检查登录状态
|
||||
await checkLoginStatus();
|
||||
|
||||
// 如果用户已登录，加载用户数据
|
||||
if (apiManager.currentUser) {
|
||||
await loadUserData();
|
||||
}
|
||||
}
|
||||
|
||||
// 检查登录状态
|
||||
async function checkLoginStatus() {
|
||||
if (!apiManagerReady) return;
|
||||
|
||||
try {
|
||||
await apiManager.checkAuthStatus();
|
||||
} catch (error) {
|
||||
console.error('检查登录状态失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载用户数据
|
||||
async function loadUserData() {
|
||||
try {
|
||||
// 加载通话记录
|
||||
const callRecords = await apiManager.getCallRecords();
|
||||
if (callRecords) {
|
||||
billHistory = callRecords.map(record => ({
|
||||
date: new Date(record.created_at).toLocaleString('zh-CN'),
|
||||
type: record.call_type === 'voice' ? '语音通话' : '视频通话',
|
||||
duration: Math.ceil(record.duration / 60), // 转换为分钟
|
||||
amount: record.total_amount,
|
||||
paid: record.status === 'completed',
|
||||
hasTranslator: record.has_translator
|
||||
}));
|
||||
updateBillHistory();
|
||||
}
|
||||
|
||||
// 加载预约记录
|
||||
const appointments = await apiManager.getAppointments();
|
||||
if (appointments) {
|
||||
// 更新预约数据
|
||||
console.log('预约记录:', appointments);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载用户数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 登出处理
|
||||
async function handleLogout() {
|
||||
try {
|
||||
const result = await apiManager.logout();
|
||||
if (result.success) {
|
||||
// 清空本地数据
|
||||
billHistory = [];
|
||||
updateBillHistory();
|
||||
|
||||
// 显示登录提示
|
||||
alert('已成功登出');
|
||||
} else {
|
||||
alert('登出失败，请重试');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('登出失败:', error);
|
||||
alert('登出失败：' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 全局变量
|
||||
let currentTab = 'call';
|
||||
let isCallActive = false;
|
||||
@@ -1174,7 +1323,7 @@
|
||||
startCall();
|
||||
}
|
||||
|
||||
function startCall() {
|
||||
async function startCall() {
|
||||
if (!currentCallType) return;
|
||||
|
||||
isCallActive = true;
|
||||
@@ -1205,7 +1354,7 @@
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function endCall() {
|
||||
async function endCall() {
|
||||
if (!isCallActive) return;
|
||||
|
||||
isCallActive = false;
|
||||
@@ -1233,6 +1382,26 @@
|
||||
paid: false,
|
||||
hasTranslator: hasTranslator
|
||||
};
|
||||
|
||||
// 如果用户已登录，保存通话记录到数据库
|
||||
if (apiManagerReady && apiManager.currentUser) {
|
||||
try {
|
||||
const callData = {
|
||||
type: currentCallType,
|
||||
duration: callDuration * 60, // 转换为秒
|
||||
hasTranslator: hasTranslator,
|
||||
baseRate: baseRate,
|
||||
translatorRate: translatorRate,
|
||||
totalAmount: currentBill.amount,
|
||||
status: 'completed'
|
||||
};
|
||||
|
||||
await apiManager.createCallRecord(callData);
|
||||
console.log('通话记录已保存到数据库');
|
||||
} catch (error) {
|
||||
console.error('保存通话记录失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示账单
|
||||
showBillModal();
|
||||
@@ -1326,9 +1495,12 @@
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
updateBillHistory();
|
||||
generateCalendar();
|
||||
|
||||
// 初始化应用（包括数据库连接和用户状态检查）
|
||||
await initApp();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user