feat: 添加 OEM 设置功能并统一 API 统计页面样式

- 添加 OEM 设置管理功能,支持自定义网站名称和图标
- 支持图标文件上传和 Base64 编码存储
- 实现动态更新网站标题和 favicon
- 统一 API 统计页面与管理页面的样式和布局
- 修复文本颜色显示问题,提升可读性
- 优化错误处理和默认值回退机制
- 移除测试文件和冗余代码

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Edric Li
2025-07-27 23:20:44 +08:00
parent 1e51a367b6
commit 9193d64d2a
5 changed files with 587 additions and 37 deletions

View File

@@ -25,7 +25,14 @@ const app = createApp({
// 分时间段的统计数据
dailyStats: null,
monthlyStats: null
monthlyStats: null,
// OEM设置
oemSettings: {
siteName: 'Claude Relay Service',
siteIcon: '',
siteIconData: ''
}
};
},
@@ -375,6 +382,60 @@ const app = createApp({
this.statsPeriod = 'daily'; // 重置为默认值
},
// 加载OEM设置
async loadOemSettings() {
try {
const response = await fetch('/admin/oem-settings', {
headers: {
'Content-Type': 'application/json'
}
});
if (response.ok) {
const result = await response.json();
if (result && result.success && result.data) {
this.oemSettings = { ...this.oemSettings, ...result.data };
// 应用设置到页面
this.applyOemSettings();
}
}
} catch (error) {
console.error('Error loading OEM settings:', error);
// 静默失败,使用默认值
}
},
// 应用OEM设置
applyOemSettings() {
// 更新网站标题
document.title = `API Key 统计 - ${this.oemSettings.siteName}`;
// 应用网站图标
const iconData = this.oemSettings.siteIconData || this.oemSettings.siteIcon;
if (iconData && iconData.trim()) {
// 移除现有的favicon
const existingFavicons = document.querySelectorAll('link[rel*="icon"]');
existingFavicons.forEach(link => link.remove());
// 添加新的favicon
const link = document.createElement('link');
link.rel = 'icon';
// 根据数据类型设置适当的type
if (iconData.startsWith('data:')) {
// Base64数据
link.href = iconData;
} else {
// URL
link.type = 'image/x-icon';
link.href = iconData;
}
document.head.appendChild(link);
}
},
// 🔄 刷新数据
async refreshData() {
if (this.statsData && this.apiKey) {
@@ -475,6 +536,9 @@ const app = createApp({
// 页面加载完成后的初始化
console.log('User Stats Page loaded');
// 加载OEM设置
this.loadOemSettings();
// 检查 URL 参数是否有预填的 API Key用于开发测试
const urlParams = new URLSearchParams(window.location.search);
const presetApiKey = urlParams.get('apiKey');