812 lines
35 KiB
JavaScript
812 lines
35 KiB
JavaScript
function i18n(key) {
|
|
return lang[selectedLang][key] || key;
|
|
}
|
|
|
|
// 显示用户中心特定部分
|
|
async function showUserCenterSection(section) {
|
|
try {
|
|
const userInfo = await fetchUserInfo();
|
|
if (!userInfo) {
|
|
alert(lang[selectedLang].pleaseLogin);
|
|
window.location.href = 'login.html'; // 重定向到登录页面
|
|
return;
|
|
}
|
|
|
|
// 检查邮箱验证状态
|
|
const emailVerified = userInfo.email_verified === 'True' || userInfo.email_verified === true;
|
|
console.log('Email Verified:', emailVerified); // 打印邮箱验证状态
|
|
if (!emailVerified && section !== 'profile') {
|
|
alert(lang[selectedLang].pleaseVerifyEmail);
|
|
section = 'profile'; // 如果邮箱未验证，强制显示个人资料页面
|
|
// showUserCenterSection('profile'); // 跳转到个人资料页面
|
|
return;
|
|
}
|
|
|
|
const dashboardContent = document.getElementById('dashboardContent');
|
|
const usersContent = document.getElementById('usersContent');
|
|
const chatContent = document.getElementById('chatContent');
|
|
const featureContent = document.getElementById('featureContent');
|
|
const userCenterContent = document.getElementById('userCenterContent');
|
|
const pageTitle = document.getElementById('pageTitle');
|
|
const showApiDocs = document.getElementById('showApiDocs');
|
|
const apiDocsContent = document.getElementById('apiDocsContent');
|
|
|
|
|
|
if (apiDocsContent) apiDocsContent.style.display = 'none';
|
|
if (dashboardContent) dashboardContent.style.display = 'none';
|
|
if (usersContent) usersContent.style.display = 'none';
|
|
if (chatContent) chatContent.style.display = 'none';
|
|
if (featureContent) featureContent.style.display = 'none';
|
|
if (userCenterContent) userCenterContent.style.display = 'block';
|
|
if (showApiDocs) showApiDocs.style.display = 'none';
|
|
|
|
// 根据选择的部分设置相应的标题
|
|
if (pageTitle) {
|
|
switch(section) {
|
|
case 'profile':
|
|
pageTitle.innerText = i18n('personalInfo');
|
|
break;
|
|
case 'apiKey':
|
|
pageTitle.innerText = i18n('apiKeys');
|
|
break;
|
|
case 'apiUsage':
|
|
pageTitle.innerText = i18n('modelCalls');
|
|
break;
|
|
default:
|
|
pageTitle.innerText = i18n('userCenter');
|
|
}
|
|
}
|
|
|
|
|
|
const navButtons = document.querySelectorAll('.user-center-nav-btn');
|
|
const sections = document.querySelectorAll('.user-center-section');
|
|
|
|
navButtons.forEach(btn => btn.classList.remove('active'));
|
|
sections.forEach(sec => sec.classList.remove('active'));
|
|
|
|
const targetButton = document.querySelector(`.user-center-nav-btn[data-target="${section}"]`);
|
|
const targetSection = document.getElementById(`${section}Section`);
|
|
|
|
if (targetButton) targetButton.classList.add('active');
|
|
if (targetSection) targetSection.classList.add('active');
|
|
|
|
if (section === 'profile') {
|
|
loadUserProfile();
|
|
} else if (section === 'apiKey') {
|
|
loadApiKeys();
|
|
} else if (section === 'apiUsage') {
|
|
loadapiUsage();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error in showFeature:', error);
|
|
alert(lang[selectedLang].errorGettingUserInfo);
|
|
}
|
|
}
|
|
// 将 showUserCenterSection 函数添加到全局作用域
|
|
window.showUserCenterSection = showUserCenterSection;
|
|
|
|
const BASE_URL = 'https://user.obscura.work/user';
|
|
|
|
|
|
function updateAllAvatars(avatarUrl) {
|
|
const avatars = document.querySelectorAll('.user-avatar, #currentAvatar');
|
|
avatars.forEach(avatar => {
|
|
avatar.src = avatarUrl || 'picture/cn__03041_.png';
|
|
});
|
|
}
|
|
|
|
|
|
// 加载用户个人资料
|
|
async function loadUserProfile() {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/me`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
}
|
|
});
|
|
if (response.ok) {
|
|
const userData = await response.json();
|
|
const profileSection = document.getElementById('profileSection');
|
|
updateAllAvatars(userData.avatar)
|
|
profileSection.innerHTML = `
|
|
<div class="profile-container">
|
|
<div class="profile-info">
|
|
<h3>${i18n("basicInfo")}</h3>
|
|
<form id="profileForm">
|
|
<div class="form-group">
|
|
<label for="username">${i18n("username")}</label>
|
|
<input type="text" id="username" value="${userData.username}" readonly>
|
|
<p class="field-description">${i18n("usernameDescription")}</p>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">${i18n("email")}</label>
|
|
<input type="email" id="email" value="${userData.email}">
|
|
<p class="field-description">${i18n("emailDescription")}</p>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone_number">${i18n("phoneNumber")}</label>
|
|
<input type="tel" id="phone_number" value="${userData.phone_number}">
|
|
</div>
|
|
<button type="submit" class="btn-update">${i18n("updateProfile")}</button>
|
|
</form>
|
|
</div>
|
|
<div class="profile-picture">
|
|
<img src="${userData.avatar || 'picture/cn__03041_.png'}" alt="用户头像" id="currentAvatar">
|
|
<button class="btn-update" onclick="openAvatarModal()">${i18n("editAvatar")}</button>
|
|
</div>
|
|
</div>
|
|
<div class="verification-card">
|
|
<h3>${i18n("userVerification")}</h3>
|
|
<div class="verification-content">
|
|
<p>${i18n("emailVerification")}<span id="emailStatus">${userData.email_verified ? i18n("verified") : i18n("unverified")}</span></p>
|
|
${userData.email_verified ? '' : `
|
|
<button type="button" id="sendVerificationEmail" class="btn-verify">${i18n("sendVerificationEmail")}</button>
|
|
<div id="verificationCodeSection" style="display: none;">
|
|
<input type="text" id="verificationCode" name="email_verification_code" autocomplete="off" placeholder="${i18n("enterVerificationCode")}">
|
|
<button type="button" id="submitVerificationCode" class="btn-verify">${i18n("submitVerificationCode")}</button>
|
|
</div>
|
|
`}
|
|
</div>
|
|
<div class="verification-content" style="margin-top: 15px;">
|
|
<p>${i18n("phoneVerification")}<span id="emailStatus">${userData.phone_verified ? i18n("verified") : i18n("unverified")}</span></p>
|
|
${userData.phone_verified ? '' : `
|
|
<button type="button" id="sendPhoneVerification" class="btn-verify">${i18n("sendPhoneVerification")}</button>
|
|
<div id="phoneVerificationCodeSection" style="display: none;">
|
|
<input type="text" id="phoneVerificationCode" placeholder="${i18n("enterPhoneVerificationCode")}">
|
|
<button type="button" id="submitPhoneVerificationCode" class="btn-verify">${i18n("submitPhoneVerificationCode")}</button>
|
|
</div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.getElementById('profileForm').addEventListener('submit', updateProfile);
|
|
|
|
if (!userData.email_verified) {
|
|
document.getElementById('sendVerificationEmail').addEventListener('click', sendVerificationEmail);
|
|
document.getElementById('submitVerificationCode').addEventListener('click', submitVerificationCode);
|
|
}
|
|
if (!userData.phone_verified) {
|
|
document.getElementById('sendPhoneVerification').addEventListener('click', sendPhoneVerification);
|
|
document.getElementById('submitPhoneVerificationCode').addEventListener('click', submitPhoneVerificationCode);
|
|
}
|
|
} else {
|
|
console.error(i18n('loadProfileFailed'));
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('loadProfileError'), error);
|
|
}
|
|
}
|
|
|
|
// 提交验证码
|
|
async function sendVerificationEmail() {
|
|
const sendButton = document.getElementById('sendVerificationEmail');
|
|
if (sendButton.disabled) {
|
|
return; // 如果按钮已经被禁用，直接返回
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/send-verification-email`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
}
|
|
});
|
|
if (response.ok) {
|
|
alert(i18n('verificationEmailSent'));
|
|
document.getElementById('verificationCodeSection').style.display = 'block';
|
|
|
|
// 禁用按钮并开始倒计时
|
|
sendButton.disabled = true;
|
|
let countdown = 60;
|
|
sendButton.textContent = `${i18n('resend')} (${countdown}s)`;
|
|
|
|
const timer = setInterval(() => {
|
|
countdown--;
|
|
if (countdown <= 0) {
|
|
clearInterval(timer);
|
|
sendButton.disabled = false;
|
|
sendButton.textContent = i18n('sendVerificationEmail');
|
|
} else {
|
|
sendButton.textContent = `${i18n('resend')} (${countdown}s)`;
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
const errorData = await response.json();
|
|
alert(`${i18n('sendVerificationEmailFailed')}${errorData.detail || i18n('unknownError')}`);
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('sendVerificationEmailError'), error);
|
|
alert(i18n('sendVerificationEmailError'));
|
|
}
|
|
}
|
|
|
|
async function submitVerificationCode() {
|
|
const verificationCode = document.getElementById('verificationCode').value;
|
|
console.log(i18n('submittingVerificationCode'), verificationCode);
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/verify-email`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: `verification_code=${encodeURIComponent(verificationCode)}`
|
|
});
|
|
if (response.ok) {
|
|
alert(i18n('emailVerificationSuccess'));
|
|
loadUserProfile();
|
|
} else {
|
|
const errorData = await response.json();
|
|
console.error('Error response:', errorData);
|
|
alert(`${i18n('verificationFailed')}${errorData.detail || i18n('unknownError')}`);
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('submitVerificationCodeError'), error);
|
|
alert(i18n('submitVerificationCodeError'));
|
|
}
|
|
}
|
|
|
|
|
|
// 新增发送手机验证短信的函数
|
|
async function sendPhoneVerification() {
|
|
const sendButton = document.getElementById('sendPhoneVerification');
|
|
if (sendButton.disabled) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/send-phone-verification`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
}
|
|
});
|
|
if (response.ok) {
|
|
alert(i18n('verificationSMSSent'));
|
|
document.getElementById('phoneVerificationCodeSection').style.display = 'block';
|
|
|
|
sendButton.disabled = true;
|
|
let countdown = 60;
|
|
sendButton.textContent = `${i18n('resend')} (${countdown}s)`;
|
|
|
|
const timer = setInterval(() => {
|
|
countdown--;
|
|
if (countdown <= 0) {
|
|
clearInterval(timer);
|
|
sendButton.disabled = false;
|
|
sendButton.textContent = i18n('sendPhoneVerification');
|
|
} else {
|
|
sendButton.textContent = `${i18n('resend')} (${countdown}s)`;
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
const errorData = await response.json();
|
|
alert(`${i18n('sendVerificationSMSFailed')}${errorData.detail || i18n('unknownError')}`);
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('sendVerificationSMSError'), error);
|
|
alert(i18n('sendVerificationSMSError'));
|
|
}
|
|
}
|
|
|
|
// 新增提交手机验证码的函数
|
|
async function submitPhoneVerificationCode() {
|
|
const verificationCode = document.getElementById('phoneVerificationCode').value;
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/verify-phone`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: `verification_code=${encodeURIComponent(verificationCode)}`
|
|
});
|
|
if (response.ok) {
|
|
alert(i18n('phoneVerificationSuccess'));
|
|
loadUserProfile(); // 重新加载用户资料以更新验证状态
|
|
} else {
|
|
const errorData = await response.json();
|
|
alert(`${i18n('verificationFailed')}${errorData.detail || i18n('unknownError')}`);
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('submitPhoneVerificationCodeError'), error);
|
|
alert(i18n('submitPhoneVerificationCodeError'));
|
|
}
|
|
}
|
|
|
|
|
|
// / 打开头像选择模态框
|
|
function openAvatarModal() {
|
|
const modal = document.createElement('div');
|
|
modal.className = 'avatar-modal';
|
|
modal.innerHTML = `
|
|
<div class="avatar-modal-content">
|
|
<h3>${i18n("selectAvatar")}</h3>
|
|
<div id="avatarOptions"></div>
|
|
<button onclick="closeAvatarModal()">${i18n("close")}</button>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(modal);
|
|
loadAvatarOptions();
|
|
}
|
|
|
|
// 加载头像选项
|
|
async function loadAvatarOptions() {
|
|
try {
|
|
const avatars = [
|
|
'picture/cn__02504_.png',
|
|
'picture/cn__02505_.png',
|
|
'picture/cn__02506_.png',
|
|
'picture/cn__02507_.png',
|
|
'picture/cn__02510_.png',
|
|
'picture/cn__02511_.png',
|
|
'picture/cn__02512_.png',
|
|
'picture/cn__03018_.png',
|
|
'picture/cn__03040_.png',
|
|
'picture/cn__03041_.png',
|
|
'picture/cn__03042_.png',
|
|
'picture/cn__03044_.png',
|
|
'picture/cn__03059_.png'
|
|
];
|
|
const avatarOptions = document.getElementById('avatarOptions');
|
|
avatarOptions.innerHTML = avatars.map(avatar => `
|
|
<img src="${avatar}" alt="头像选项" onclick="selectAvatar('${avatar}')" class="avatar-option">
|
|
`).join('');
|
|
} catch (error) {
|
|
console.error(i18n('loadAvatarOptionsError'), error);
|
|
}
|
|
}
|
|
|
|
// 选择头像
|
|
function selectAvatar(avatarUrl) {
|
|
document.getElementById('currentAvatar').src = avatarUrl;
|
|
document.getElementById('userAvatar').src = avatarUrl;
|
|
closeAvatarModal();
|
|
updateUserAvatar(avatarUrl); // 添加这行来保存头像更改
|
|
}
|
|
|
|
async function updateUserAvatar(avatarUrl) {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/me`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ avatar: avatarUrl })
|
|
});
|
|
if (response.ok) {
|
|
console.log(i18n('avatarUpdateSuccess'));
|
|
updateAllAvatars(avatarUrl);
|
|
} else {
|
|
const errorData = await response.json();
|
|
console.error(i18n('avatarUpdateFailed'), errorData);
|
|
alert(`${i18n('avatarUpdateFailed')}${errorData.detail || i18n('unknownError')}`);
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('avatarUpdateError'), error);
|
|
alert(i18n('avatarUpdateError'));
|
|
}
|
|
}
|
|
// 关闭头像选择模态框
|
|
function closeAvatarModal() {
|
|
const modal = document.querySelector('.avatar-modal');
|
|
if (modal) {
|
|
modal.remove();
|
|
}
|
|
}
|
|
|
|
async function updateProfile(event) {
|
|
event.preventDefault();
|
|
const email = document.getElementById('email').value;
|
|
const phone_number = document.getElementById('phone_number').value;
|
|
const avatar = document.getElementById('currentAvatar').src;
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/me`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
},
|
|
body: JSON.stringify({ email, phone_number, avatar })
|
|
});
|
|
if (response.ok) {
|
|
alert(i18n('profileUpdateSuccess'));
|
|
} else {
|
|
const errorData = await response.json();
|
|
alert(`${i18n('profileUpdateFailed')}${errorData.detail || i18n('unknownError')}`);
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('profileUpdateError'), error);
|
|
alert(i18n('profileUpdateError'));
|
|
}
|
|
}
|
|
|
|
|
|
// 遮蔽 API 密钥
|
|
function maskApiKey(key) {
|
|
if (!key) return i18n('invalidApiKey');
|
|
return key.substring(0, 4) + '*'.repeat(Math.max(0, key.length - 8)) + key.substring(Math.max(0, key.length - 4));
|
|
}
|
|
|
|
// 加载 API 密钥
|
|
async function loadApiKeys() {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api-keys`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
|
|
'Cache-Control': 'no-cache'
|
|
}
|
|
});
|
|
if (response.ok) {
|
|
const apiKeys = await response.json();
|
|
const apiKeyContent = document.getElementById('apiKeyContent');
|
|
apiKeyContent.innerHTML = `
|
|
<table class="api-key-table">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>${i18n("apiKeyTable")}</th>
|
|
<th>${i18n("createdAt")}</th>
|
|
<th>${i18n("expiresAt")}</th>
|
|
<th>${i18n("operation")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="apiKeyTableBody">
|
|
${apiKeys.map((key, index) => {
|
|
const actualKey = key.key.replace('api_key:', '');
|
|
return `
|
|
<tr>
|
|
<td>
|
|
<i class="fas fa-eye toggle-visibility" onclick="toggleApiKeyVisibility(${index}, '${actualKey}')"></i>
|
|
</td>
|
|
<td>
|
|
<span id="apiKey${index}" class="api-key-value" onclick="copyToClipboard('${actualKey}')">${maskApiKey(actualKey)}</span>
|
|
</td>
|
|
<td>${new Date(key.created_at).toLocaleString()}</td>
|
|
<td>${new Date(key.expires_at).toLocaleString()}</td>
|
|
<td>
|
|
<button class="btn-delete" onclick="deleteApiKey('${actualKey}')">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('')}
|
|
</tbody>
|
|
</table>
|
|
<button class="btn-generate-key" onclick="generateNewApiKey()">${i18n("createNewApiKey")}</button>
|
|
<button class="btn-refresh" onclick="refreshApiKeys()">${i18n("refreshList")}</button>
|
|
`;
|
|
} else {
|
|
console.error(i18n('loadApiKeysError'), response.status, response.statusText);
|
|
const apiKeyContent = document.getElementById('apiKeyContent');
|
|
apiKeyContent.innerHTML = `<p>${i18n('loadApiKeysFailed')}</p>`;
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('loadApiKeysError'), error);
|
|
const apiKeyContent = document.getElementById('apiKeyContent');
|
|
apiKeyContent.innerHTML = `<p>${i18n('loadApiKeysFailed')}</p>`;
|
|
}
|
|
}
|
|
|
|
// 切换 API 密钥可见性
|
|
function toggleApiKeyVisibility(index, fullKey) {
|
|
const keyElement = document.getElementById(`apiKey${index}`);
|
|
if (keyElement.textContent === fullKey) {
|
|
keyElement.textContent = maskApiKey(fullKey);
|
|
} else {
|
|
keyElement.textContent = fullKey;
|
|
}
|
|
}
|
|
|
|
// 复制到剪贴板
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
alert(i18n('apiKeyCopied'));
|
|
}).catch(err => {
|
|
console.error(i18n('copyTextFailed'), err);
|
|
});
|
|
}
|
|
|
|
// 生成新的 API 密钥
|
|
async function generateNewApiKey() {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api-keys`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
}
|
|
});
|
|
if (response.ok) {
|
|
const newKey = await response.json();
|
|
alert(`${i18n('newApiKeyGenerated')}${newKey.api_key}\n${i18n('expirationTime')}${new Date(newKey.expires_at).toLocaleString()}`);
|
|
loadApiKeys(); // 重新加载 API 密钥列表
|
|
} else {
|
|
const errorData = await response.json();
|
|
alert(`${i18n('generateNewApiKeyFailed')}${errorData.detail || i18n('unknownError')}`);
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('generateNewApiKeyError'), error);
|
|
alert(i18n('generateNewApiKeyFailed'));
|
|
}
|
|
}
|
|
|
|
// 修改 deleteApiKey 函数
|
|
async function deleteApiKey(keyId) {
|
|
const confirmed = confirm(i18n('confirmDeleteApiKey'));
|
|
if (confirmed) {
|
|
try {
|
|
const encodedKeyId = encodeURIComponent(keyId);
|
|
const response = await fetch(`${BASE_URL}/api-keys/${encodedKeyId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
}
|
|
});
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
alert(data.message);
|
|
} else {
|
|
const errorData = await response.json();
|
|
alert(`${i18n('deleteApiKeyFailed')}${errorData.detail || i18n('unknownError')}`);
|
|
}
|
|
if (data.action === 'clear_api_info') {
|
|
await loadApiKeys(); // 重新加载API密钥列表
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('deleteApiKeyError'), error);
|
|
alert(i18n('deleteApiKeyFailed'));
|
|
} finally {
|
|
await loadApiKeys(); // 无论成功与否，都重新加载API密钥列表
|
|
}
|
|
}
|
|
}
|
|
|
|
// 新增清除缓存并重新加载的函数
|
|
// 确保 refreshApiKeys 函数被正确定义
|
|
async function refreshApiKeys() {
|
|
try {
|
|
await fetch(`${BASE_URL}/clear-cache`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
}
|
|
});
|
|
console.log(i18n('cacheCleared'));
|
|
} catch (error) {
|
|
console.error(i18n('clearCacheFailed'), error);
|
|
} finally {
|
|
await loadApiKeys();
|
|
console.log(i18n('apiKeyListRefreshed'));
|
|
}
|
|
}
|
|
|
|
// 加载模型调用信息
|
|
async function loadapiUsage() {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api-usage`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
}
|
|
});
|
|
if (response.ok) {
|
|
const usageData = await response.json();
|
|
const apiUsageContent = document.getElementById('apiUsageContent');
|
|
|
|
apiUsageContent.innerHTML = `
|
|
<div class="usage-tabs">
|
|
<h3 id="apiUsageBtn" class="tab-btn active" onclick="showApiUsage()">${i18n("apiUsage")}</h3>
|
|
<h3 id="modelUsageBtn" class="tab-btn" onclick="showModelUsage()">${i18n("modelUsage")}</h3>
|
|
</div>
|
|
<div id="apiUsageTable" class="tab-content active">
|
|
<table class="rate-limit-table">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>API KEY</th>
|
|
<th>${i18n("tokensUsed")}</th>
|
|
<th>${i18n("totalTokens")}</th>
|
|
<th>${i18n("lastUsedAt")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="apiUsageTableBody">
|
|
${Object.keys(usageData).length === 0 ?
|
|
`<tr><td colspan="5">${i18n("noUsageRecord")}</td></tr>` :
|
|
Object.entries(usageData).map(([key, usage], index) => `
|
|
<tr>
|
|
<td>
|
|
<i class="fas fa-eye toggle-visibility" onclick="toggleApiKeyVisibility(${index}, '${key}')"></i>
|
|
</td>
|
|
<td>
|
|
<span id="apiKey${index}" class="api-key-value">${maskApiKey(key)}</span>
|
|
</td>
|
|
<td>${usage.tokens_used || 0} token</td>
|
|
<td>${usage.total_tokens || 0} token</td>
|
|
<td>${usage.last_used_at ? new Date(usage.last_used_at).toLocaleString() : i18n("unused")}</td>
|
|
</tr>
|
|
`).join('')
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="modelUsageTable" class="tab-content">
|
|
<p>加载中...</p>
|
|
</div>
|
|
`;
|
|
|
|
// 初始显示API使用情况
|
|
showApiUsage();
|
|
} else {
|
|
console.error(i18n('loadModelCallInfoError'), response.status, response.statusText);
|
|
const apiUsageContent = document.getElementById('apiUsageContent');
|
|
apiUsageContent.innerHTML = `<p>${i18n('loadModelCallInfoFailed')}</p>`;
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('loadModelCallInfoError'), error);
|
|
const apiUsageContent = document.getElementById('apiUsageContent');
|
|
apiUsageContent.innerHTML = `
|
|
<p>${i18n('loadModelCallInfoFailed')}</p>
|
|
<button onclick="loadapiUsage()">${i18n('reload')}</button>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// 显示 API 使用情况
|
|
function showApiUsage() {
|
|
document.getElementById('apiUsageBtn').classList.add('active');
|
|
document.getElementById('modelUsageBtn').classList.remove('active');
|
|
document.getElementById('apiUsageTable').classList.add('active');
|
|
document.getElementById('modelUsageTable').classList.remove('active');
|
|
|
|
// 添加动画效果
|
|
document.getElementById('apiUsageTable').style.animation = 'none';
|
|
setTimeout(() => {
|
|
document.getElementById('apiUsageTable').style.animation = 'fadeIn 0.5s ease-in-out';
|
|
}, 10);
|
|
|
|
}
|
|
|
|
// 显示模型使用情况
|
|
async function showModelUsage() {
|
|
document.getElementById('apiUsageBtn').classList.remove('active');
|
|
document.getElementById('modelUsageBtn').classList.add('active');
|
|
document.getElementById('apiUsageTable').classList.remove('active');
|
|
document.getElementById('modelUsageTable').classList.add('active');
|
|
// 添加动画效果
|
|
document.getElementById('modelUsageTable').style.animation = 'none';
|
|
setTimeout(() => {
|
|
document.getElementById('modelUsageTable').style.animation = 'fadeIn 0.5s ease-in-out';
|
|
}, 10);
|
|
// 加载模型使用情况数据
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/model-usage`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
}
|
|
});
|
|
if (response.ok) {
|
|
const modelUsageData = await response.json();
|
|
const modelUsageTable = document.getElementById('modelUsageTable');
|
|
|
|
modelUsageTable.innerHTML = `
|
|
<table class="rate-limit-table">
|
|
<thead>
|
|
<tr>
|
|
<th>${i18n("modelName")}</th>
|
|
<th>${i18n("lastCallTime")}</th>
|
|
<th>${i18n("usage")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${Object.entries(modelUsageData).map(([model, usage]) => `
|
|
<tr>
|
|
<td>${model}</td>
|
|
<td>${usage.last_called_at ? new Date(usage.last_called_at).toLocaleString() : '未使用'}</td>
|
|
<td>${usage.calls} token</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
} else {
|
|
console.error(i18n('loadModelUsageFailed'), response.status, response.statusText);
|
|
}
|
|
} catch (error) {
|
|
console.error(i18n('loadModelUsageError'), error);
|
|
document.getElementById('modelUsageTable').innerHTML = `
|
|
<p>${i18n('loadModelUsageFailed')}</p>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// 初始化用户中心
|
|
function initUserCenter() {
|
|
const navButtons = document.querySelectorAll('.user-center-nav-btn');
|
|
navButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const target = button.getAttribute('data-target');
|
|
showUserCenterSection(target);
|
|
});
|
|
});
|
|
|
|
// 加载用户信息并更新头像
|
|
fetch(`${BASE_URL}/me`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('access_token')}`
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(userData => {
|
|
updateAllAvatars(userData.avatar);
|
|
if (!userData.email_verified) {
|
|
const sendVerificationEmailBtn = document.getElementById('sendVerificationEmail');
|
|
const submitVerificationCodeBtn = document.getElementById('submitVerificationCode');
|
|
if (sendVerificationEmailBtn) {
|
|
sendVerificationEmailBtn.addEventListener('click', sendVerificationEmail);
|
|
}
|
|
if (submitVerificationCodeBtn) {
|
|
submitVerificationCodeBtn.addEventListener('click', submitVerificationCode);
|
|
}
|
|
}
|
|
})
|
|
.catch(error => console.error(i18n('getUserInfoFailed'), error));
|
|
}
|
|
|
|
// 页面加载完成后初始化用户中心
|
|
window.addEventListener('load', initUserCenter);
|
|
|
|
// 将 showUserCenterSection 函数添加到全局作用域
|
|
window.showUserCenterSection = showUserCenterSection;
|
|
window.generateNewApiKey = generateNewApiKey;
|
|
window.deleteApiKey = deleteApiKey;
|
|
window.copyToClipboard = copyToClipboard;
|
|
window.refreshApiKeys = refreshApiKeys;
|
|
window.loadapiUsage = loadapiUsage;
|
|
window.showApiUsage = showApiUsage;
|
|
window.showModelUsage = showModelUsage;
|
|
window.toggleApiKeyVisibility = toggleApiKeyVisibility;
|
|
window.openAvatarModal = openAvatarModal;
|
|
window.selectAvatar = selectAvatar;
|
|
window.closeAvatarModal = closeAvatarModal;
|
|
window.showUserCenterSection = showUserCenterSection;
|
|
|
|
|
|
window.sendPhoneVerification = sendPhoneVerification;
|
|
window.submitPhoneVerificationCode = submitPhoneVerificationCode;
|
|
window.sendVerificationEmail = sendVerificationEmail;
|
|
window.submitVerificationCode = submitVerificationCode;
|
|
|
|
|
|
// 获取用户信息的函数
|
|
async function fetchUserInfo() {
|
|
try {
|
|
const token = localStorage.getItem('access_token');
|
|
if (!token) {
|
|
console.error(i18n('noAccessTokenFound'));
|
|
return null;
|
|
}
|
|
|
|
const response = await fetch(`${BASE_URL}/me`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
console.error(i18n('failedToFetchUserInfo'));
|
|
return null;
|
|
}
|
|
|
|
const userInfo = await response.json();
|
|
return userInfo;
|
|
|
|
} catch (error) {
|
|
console.error(i18n('errorFetchingUserInfo'), error);
|
|
// 可以在这里处理错误，比如清除 token 并重定向到登录页面
|
|
localStorage.removeItem('access_token');
|
|
window.location.href = 'login.html'; // 重定向到登录页面
|
|
return null;
|
|
}
|
|
} |