feat: 新增平台
This commit is contained in:
@@ -251,6 +251,132 @@
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* API Key 管理样式 */
|
||||
.api-key-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--secondary-100);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.api-key-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.api-key-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.api-key-name {
|
||||
font-weight: 500;
|
||||
color: var(--secondary-800);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.api-key-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.api-key-status {
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.api-key-status.active {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.api-key-status.inactive {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.api-key-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--secondary-700);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -299,6 +425,10 @@
|
||||
<span class="info-label">用户组</span>
|
||||
<span class="info-value" id="groupName">-</span>
|
||||
</div>
|
||||
<div class="info-row" id="expiryRow" style="display: none;">
|
||||
<span class="info-label">套餐到期</span>
|
||||
<span class="info-value" id="expiryTime">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">注册时间</span>
|
||||
<span class="info-value" id="createdAt">-</span>
|
||||
@@ -312,6 +442,74 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 兑换码 -->
|
||||
<div class="info-card">
|
||||
<h3>兑换码</h3>
|
||||
<p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1rem;">
|
||||
输入兑换码升级您的账户套餐
|
||||
</p>
|
||||
<div style="display: flex; gap: 0.75rem;">
|
||||
<input type="text" id="redeemCode" class="ui-input" placeholder="请输入兑换码" style="flex: 1; text-transform: uppercase;">
|
||||
<button class="ui-btn ui-btn-primary" onclick="redeemCode()">兑换</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API Key 管理 -->
|
||||
<div class="info-card">
|
||||
<h3 style="display: flex; justify-content: space-between; align-items: center;">
|
||||
API Key 管理
|
||||
<button class="ui-btn ui-btn-primary ui-btn-sm" onclick="showCreateKeyModal()">创建 Key</button>
|
||||
</h3>
|
||||
<p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1rem;">
|
||||
通过 API Key 可以在您的应用中调用视频解析接口（最多5个）
|
||||
</p>
|
||||
<div id="apiKeyList">
|
||||
<p style="color: var(--text-muted); text-align: center;">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 创建 API Key 弹窗 -->
|
||||
<div class="modal" id="createKeyModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>创建 API Key</h3>
|
||||
<button class="modal-close" onclick="closeModal('createKeyModal')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Key 名称</label>
|
||||
<input type="text" id="keyName" class="ui-input" placeholder="如：我的应用">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="ui-btn ui-btn-secondary" onclick="closeModal('createKeyModal')">取消</button>
|
||||
<button class="ui-btn ui-btn-primary" onclick="createApiKey()">创建</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 显示新 Key 弹窗 -->
|
||||
<div class="modal" id="newKeyModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>API Key 创建成功</h3>
|
||||
<button class="modal-close" onclick="closeModal('newKeyModal')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p style="color: #dc2626; font-size: 0.875rem; margin-bottom: 1rem;">
|
||||
请立即复制保存，此 Key 只显示一次！
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<label>API Key</label>
|
||||
<input type="text" id="newKeyValue" class="ui-input" readonly style="font-family: monospace;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="ui-btn ui-btn-primary" onclick="copyNewKey()">复制 Key</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 解析记录 -->
|
||||
<div class="logs-card">
|
||||
<div class="logs-header">
|
||||
@@ -368,6 +566,15 @@
|
||||
const groupBadge = getGroupBadge(data.group.name);
|
||||
document.getElementById('groupName').innerHTML = groupBadge;
|
||||
|
||||
// 显示套餐到期时间（在账户信息卡片中）
|
||||
if (data.group.expires_at) {
|
||||
document.getElementById('expiryRow').style.display = 'flex';
|
||||
const expiryText = data.group.is_expired
|
||||
? `<span style="color: #dc2626;">${data.group.expires_at}（已过期）</span>`
|
||||
: data.group.expires_at;
|
||||
document.getElementById('expiryTime').innerHTML = expiryText;
|
||||
}
|
||||
|
||||
// 使用进度
|
||||
const usagePercent = data.usage.daily_limit > 0
|
||||
? Math.round((data.usage.today_used / data.usage.daily_limit) * 100)
|
||||
@@ -440,7 +647,167 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function redeemCode() {
|
||||
const code = document.getElementById('redeemCode').value.trim();
|
||||
if (!code) {
|
||||
UI.notify('请输入兑换码', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/auth/api/redeem', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code: code })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
UI.notify(result.message, 'success');
|
||||
document.getElementById('redeemCode').value = '';
|
||||
loadProfile();
|
||||
} else {
|
||||
UI.notify(result.message, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
UI.notify('兑换失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('redeemCode').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') redeemCode();
|
||||
});
|
||||
|
||||
// ==================== API Key 管理 ====================
|
||||
async function loadApiKeys() {
|
||||
try {
|
||||
const response = await fetch('/user/apikey/list');
|
||||
const result = await response.json();
|
||||
|
||||
const container = document.getElementById('apiKeyList');
|
||||
|
||||
if (!result.success) {
|
||||
container.innerHTML = '<p style="color: var(--text-muted); text-align: center;">加载失败</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.data.length === 0) {
|
||||
container.innerHTML = '<p style="color: var(--text-muted); text-align: center;">暂无 API Key</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = result.data.map(key => `
|
||||
<div class="api-key-item">
|
||||
<div class="api-key-info">
|
||||
<div class="api-key-name">${key.name || '未命名'}</div>
|
||||
<div class="api-key-meta">
|
||||
<span>Key: ${key.api_key}</span>
|
||||
<span>调用: ${key.total_calls || 0}次</span>
|
||||
<span class="api-key-status ${key.is_active ? 'active' : 'inactive'}">${key.is_active ? '启用' : '禁用'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-key-actions">
|
||||
<button class="ui-btn ui-btn-sm ${key.is_active ? 'ui-btn-secondary' : 'ui-btn-primary'}" onclick="toggleApiKey(${key.id})">
|
||||
${key.is_active ? '禁用' : '启用'}
|
||||
</button>
|
||||
<button class="ui-btn ui-btn-sm ui-btn-danger" onclick="deleteApiKey(${key.id})">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
} catch (error) {
|
||||
document.getElementById('apiKeyList').innerHTML = '<p style="color: var(--text-muted); text-align: center;">加载失败</p>';
|
||||
}
|
||||
}
|
||||
|
||||
function showCreateKeyModal() {
|
||||
document.getElementById('keyName').value = '';
|
||||
document.getElementById('createKeyModal').classList.add('show');
|
||||
}
|
||||
|
||||
function closeModal(modalId) {
|
||||
document.getElementById(modalId).classList.remove('show');
|
||||
}
|
||||
|
||||
async function createApiKey() {
|
||||
const name = document.getElementById('keyName').value.trim();
|
||||
|
||||
if (!name) {
|
||||
UI.notify('请输入 Key 名称', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/user/apikey/create', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: name })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
closeModal('createKeyModal');
|
||||
document.getElementById('newKeyValue').value = result.data.api_key;
|
||||
document.getElementById('newKeyModal').classList.add('show');
|
||||
loadApiKeys();
|
||||
} else {
|
||||
UI.notify(result.message, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
UI.notify('创建失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function copyNewKey() {
|
||||
const input = document.getElementById('newKeyValue');
|
||||
input.select();
|
||||
document.execCommand('copy');
|
||||
UI.notify('已复制到剪贴板', 'success');
|
||||
}
|
||||
|
||||
async function toggleApiKey(keyId) {
|
||||
try {
|
||||
const response = await fetch(`/user/apikey/toggle/${keyId}`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
UI.notify(result.message, 'success');
|
||||
loadApiKeys();
|
||||
} else {
|
||||
UI.notify(result.message, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
UI.notify('操作失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteApiKey(keyId) {
|
||||
if (!confirm('确定要删除这个 API Key 吗？')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/user/apikey/delete/${keyId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
UI.notify('删除成功', 'success');
|
||||
loadApiKeys();
|
||||
} else {
|
||||
UI.notify(result.message, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
UI.notify('删除失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
loadProfile();
|
||||
loadApiKeys();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user