feat: 新增平台
This commit is contained in:
@@ -19,6 +19,7 @@
|
||||
<a href="/admin/dashboard" class="nav-item">仪表板</a>
|
||||
<a href="/admin/users" class="nav-item">用户管理</a>
|
||||
<a href="/admin/apis" class="nav-item active">接口管理</a>
|
||||
<a href="/admin/redeem-codes" class="nav-item">兑换码</a>
|
||||
<a href="/admin/config" class="nav-item">系统配置</a>
|
||||
<a href="/admin/logs" class="nav-item">日志审计</a>
|
||||
</nav>
|
||||
@@ -63,6 +64,9 @@
|
||||
<option value="douyin">抖音</option>
|
||||
<option value="tiktok">TikTok</option>
|
||||
<option value="bilibili">哔哩哔哩</option>
|
||||
<option value="kuaishou">快手</option>
|
||||
<option value="pipixia">皮皮虾</option>
|
||||
<option value="weibo">微博</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
<a href="/admin/dashboard" class="nav-item">仪表板</a>
|
||||
<a href="/admin/users" class="nav-item">用户管理</a>
|
||||
<a href="/admin/apis" class="nav-item">接口管理</a>
|
||||
<a href="/admin/redeem-codes" class="nav-item">兑换码</a>
|
||||
<a href="/admin/config" class="nav-item active">系统配置</a>
|
||||
<a href="/admin/logs" class="nav-item">日志审计</a>
|
||||
</nav>
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
<a href="/admin/dashboard" class="nav-item active">仪表板</a>
|
||||
<a href="/admin/users" class="nav-item">用户管理</a>
|
||||
<a href="/admin/apis" class="nav-item">接口管理</a>
|
||||
<a href="/admin/redeem-codes" class="nav-item">兑换码</a>
|
||||
<a href="/admin/config" class="nav-item">系统配置</a>
|
||||
<a href="/admin/logs" class="nav-item">日志审计</a>
|
||||
</nav>
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
<a href="/admin/dashboard" class="nav-item">仪表板</a>
|
||||
<a href="/admin/users" class="nav-item">用户管理</a>
|
||||
<a href="/admin/apis" class="nav-item">接口管理</a>
|
||||
<a href="/admin/redeem-codes" class="nav-item">兑换码</a>
|
||||
<a href="/admin/config" class="nav-item active">系统配置</a>
|
||||
<a href="/admin/logs" class="nav-item">日志审计</a>
|
||||
</nav>
|
||||
@@ -75,6 +76,9 @@
|
||||
<option value="douyin">抖音 (douyin)</option>
|
||||
<option value="tiktok">TikTok (tiktok)</option>
|
||||
<option value="bilibili">哔哩哔哩 (bilibili)</option>
|
||||
<option value="kuaishou">快手 (kuaishou)</option>
|
||||
<option value="pipixia">皮皮虾 (pipixia)</option>
|
||||
<option value="weibo">微博 (weibo)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
<a href="/admin/dashboard" class="nav-item">仪表板</a>
|
||||
<a href="/admin/users" class="nav-item">用户管理</a>
|
||||
<a href="/admin/apis" class="nav-item">接口管理</a>
|
||||
<a href="/admin/redeem-codes" class="nav-item">兑换码</a>
|
||||
<a href="/admin/config" class="nav-item">系统配置</a>
|
||||
<a href="/admin/logs" class="nav-item active">日志审计</a>
|
||||
</nav>
|
||||
@@ -39,6 +40,9 @@
|
||||
<option value="douyin">抖音</option>
|
||||
<option value="tiktok">TikTok</option>
|
||||
<option value="bilibili">哔哩哔哩</option>
|
||||
<option value="kuaishou">快手</option>
|
||||
<option value="pipixia">皮皮虾</option>
|
||||
<option value="weibo">微博</option>
|
||||
</select>
|
||||
<select id="statusFilter" class="ui-input" style="width: auto; margin-bottom: 0;"
|
||||
onchange="loadLogs(1)">
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
<a href="/admin/dashboard" class="nav-item">仪表板</a>
|
||||
<a href="/admin/users" class="nav-item">用户管理</a>
|
||||
<a href="/admin/apis" class="nav-item">接口管理</a>
|
||||
<a href="/admin/redeem-codes" class="nav-item">兑换码</a>
|
||||
<a href="/admin/config" class="nav-item">系统配置</a>
|
||||
<a href="/admin/logs" class="nav-item">日志审计</a>
|
||||
</nav>
|
||||
|
||||
521
templates/admin_redeem_codes.html
Normal file
521
templates/admin_redeem_codes.html
Normal file
@@ -0,0 +1,521 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>兑换码管理 - 管理后台</title>
|
||||
<link rel="stylesheet" href="/static/css/ui-components.css?v=3">
|
||||
<link rel="stylesheet" href="/static/css/admin.css">
|
||||
</head>
|
||||
|
||||
<body class="admin-layout">
|
||||
<header class="admin-header">
|
||||
<div class="header-container">
|
||||
<a href="/admin/dashboard" class="brand">
|
||||
<span style="font-size: 1.5rem;">⚡</span> JieXi Admin
|
||||
</a>
|
||||
<nav class="nav-links">
|
||||
<a href="/admin/dashboard" class="nav-item">仪表板</a>
|
||||
<a href="/admin/users" class="nav-item">用户管理</a>
|
||||
<a href="/admin/apis" class="nav-item">接口管理</a>
|
||||
<a href="/admin/redeem-codes" class="nav-item active">兑换码</a>
|
||||
<a href="/admin/config" class="nav-item">系统配置</a>
|
||||
<a href="/admin/logs" class="nav-item">日志审计</a>
|
||||
</nav>
|
||||
<div class="user-actions">
|
||||
<a href="/admin/profile" class="ui-btn ui-btn-secondary ui-btn-sm">账号设置</a>
|
||||
<button class="ui-btn ui-btn-secondary ui-btn-sm" onclick="logout()">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">兑换码管理</h1>
|
||||
<button class="ui-btn ui-btn-primary" onclick="showGenerateModal()">批量生成</button>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-grid" style="margin-bottom: 1.5rem;">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">总数量</div>
|
||||
<div class="stat-value" id="totalCount">-</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">未使用</div>
|
||||
<div class="stat-value" id="unusedCount" style="color: var(--success);">-</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">已使用</div>
|
||||
<div class="stat-value" id="usedCount">-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选 -->
|
||||
<div class="filter-bar" style="display: flex; gap: 1rem; margin-bottom: 1rem;">
|
||||
<select id="filterStatus" class="ui-select" onchange="loadCodes()">
|
||||
<option value="">全部状态</option>
|
||||
<option value="unused">未使用</option>
|
||||
<option value="used">已使用</option>
|
||||
<option value="expired">已过期</option>
|
||||
</select>
|
||||
<select id="filterBatch" class="ui-select" onchange="loadCodes()">
|
||||
<option value="">全部批次</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 兑换码列表 -->
|
||||
<div class="ui-card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>兑换码</th>
|
||||
<th>目标套餐</th>
|
||||
<th>有效期</th>
|
||||
<th>状态</th>
|
||||
<th>使用者</th>
|
||||
<th>使用时间</th>
|
||||
<th>过期时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="codesBody">
|
||||
<tr><td colspan="8" style="text-align: center; color: var(--text-muted);">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination" id="pagination" style="margin-top: 1rem;"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 生成兑换码弹窗 -->
|
||||
<div class="modal" id="generateModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>批量生成兑换码</h3>
|
||||
<button class="modal-close" onclick="closeModal('generateModal')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>目标套餐 <span class="required">*</span></label>
|
||||
<select id="targetGroup" class="ui-input">
|
||||
<option value="">请选择</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>套餐有效期（天）</label>
|
||||
<input type="number" id="durationDays" class="ui-input" value="30" min="1">
|
||||
<small>用户兑换后，套餐的有效天数</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>生成数量</label>
|
||||
<input type="number" id="generateCount" class="ui-input" value="10" min="1" max="1000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>兑换码前缀（可选）</label>
|
||||
<input type="text" id="codePrefix" class="ui-input" placeholder="如: VIP">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>兑换码有效期（天，可选）</label>
|
||||
<input type="number" id="expiresDays" class="ui-input" placeholder="留空表示永不过期">
|
||||
<small>兑换码本身的过期时间，过期后无法使用</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>备注（可选）</label>
|
||||
<input type="text" id="remark" class="ui-input" placeholder="如: 活动赠送">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="ui-btn ui-btn-secondary" onclick="closeModal('generateModal')">取消</button>
|
||||
<button class="ui-btn ui-btn-primary" onclick="generateCodes()">生成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生成结果弹窗 -->
|
||||
<div class="modal" id="resultModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>生成成功</h3>
|
||||
<button class="modal-close" onclick="closeModal('resultModal')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>批次ID: <strong id="resultBatchId"></strong></p>
|
||||
<p>生成数量: <strong id="resultCount"></strong></p>
|
||||
<div class="form-group">
|
||||
<label>兑换码列表</label>
|
||||
<textarea id="resultCodes" class="ui-input" rows="10" readonly style="font-family: monospace;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="ui-btn ui-btn-secondary" onclick="closeModal('resultModal')">关闭</button>
|
||||
<button class="ui-btn ui-btn-primary" onclick="copyResultCodes()">复制全部</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.ui-select {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
background: white;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge.unused {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.status-badge.used {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.status-badge.expired {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.code-text {
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
background: var(--secondary-100);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.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: 500px;
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.form-group small {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: white;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-btn.active {
|
||||
background: var(--primary-600);
|
||||
color: white;
|
||||
border-color: var(--primary-600);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/static/js/ui-components.js"></script>
|
||||
<script>
|
||||
let currentPage = 1;
|
||||
let userGroups = [];
|
||||
|
||||
async function logout() {
|
||||
try {
|
||||
await fetch('/admin/logout', { method: 'POST' });
|
||||
window.location.href = '/admin/login';
|
||||
} catch (e) {
|
||||
UI.notify('退出失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadUserGroups() {
|
||||
try {
|
||||
const response = await fetch('/admin/api/user-groups');
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
userGroups = result.data;
|
||||
const select = document.getElementById('targetGroup');
|
||||
select.innerHTML = '<option value="">请选择</option>' +
|
||||
userGroups.map(g => `<option value="${g.id}">${g.name}</option>`).join('');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载用户组失败', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadBatches() {
|
||||
try {
|
||||
const response = await fetch('/admin/api/redeem-codes/batches');
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
const select = document.getElementById('filterBatch');
|
||||
select.innerHTML = '<option value="">全部批次</option>' +
|
||||
result.data.map(b => `<option value="${b.batch_id}">${b.batch_id.slice(-12)} (${b.unused}/${b.total})</option>`).join('');
|
||||
|
||||
let total = 0, used = 0, unused = 0;
|
||||
result.data.forEach(b => {
|
||||
total += b.total;
|
||||
used += b.used;
|
||||
unused += b.unused;
|
||||
});
|
||||
document.getElementById('totalCount').textContent = total;
|
||||
document.getElementById('usedCount').textContent = used;
|
||||
document.getElementById('unusedCount').textContent = unused;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载批次失败', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCodes() {
|
||||
const status = document.getElementById('filterStatus').value;
|
||||
const batchId = document.getElementById('filterBatch').value;
|
||||
|
||||
let url = `/admin/api/redeem-codes?page=${currentPage}`;
|
||||
if (status) url += `&status=${status}`;
|
||||
if (batchId) url += `&batch_id=${batchId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
renderCodes(result.data);
|
||||
renderPagination(result.pagination);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载兑换码失败', e);
|
||||
}
|
||||
}
|
||||
|
||||
function renderCodes(codes) {
|
||||
const tbody = document.getElementById('codesBody');
|
||||
|
||||
if (codes.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; color: var(--text-muted);">暂无数据</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = codes.map(code => {
|
||||
let statusClass = 'unused';
|
||||
let statusText = '未使用';
|
||||
if (code.is_used) {
|
||||
statusClass = 'used';
|
||||
statusText = '已使用';
|
||||
} else if (code.is_expired) {
|
||||
statusClass = 'expired';
|
||||
statusText = '已过期';
|
||||
}
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td><span class="code-text">${code.code}</span></td>
|
||||
<td>${code.target_group}</td>
|
||||
<td>${code.duration_days}天</td>
|
||||
<td><span class="status-badge ${statusClass}">${statusText}</span></td>
|
||||
<td>${code.used_by || '-'}</td>
|
||||
<td>${code.used_at || '-'}</td>
|
||||
<td>${code.expires_at || '永久'}</td>
|
||||
<td>
|
||||
${!code.is_used ? `<button class="ui-btn ui-btn-sm ui-btn-danger" onclick="deleteCode(${code.id})">删除</button>` : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderPagination(pagination) {
|
||||
const container = document.getElementById('pagination');
|
||||
if (pagination.pages <= 1) {
|
||||
container.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
for (let i = 1; i <= pagination.pages; i++) {
|
||||
html += `<button class="page-btn ${i === pagination.page ? 'active' : ''}" onclick="goToPage(${i})">${i}</button>`;
|
||||
}
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function goToPage(page) {
|
||||
currentPage = page;
|
||||
loadCodes();
|
||||
}
|
||||
|
||||
function showGenerateModal() {
|
||||
document.getElementById('generateModal').classList.add('show');
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
document.getElementById(id).classList.remove('show');
|
||||
}
|
||||
|
||||
async function generateCodes() {
|
||||
const targetGroupId = document.getElementById('targetGroup').value;
|
||||
const durationDays = document.getElementById('durationDays').value;
|
||||
const count = document.getElementById('generateCount').value;
|
||||
const prefix = document.getElementById('codePrefix').value;
|
||||
const expiresDays = document.getElementById('expiresDays').value;
|
||||
const remark = document.getElementById('remark').value;
|
||||
|
||||
if (!targetGroupId) {
|
||||
UI.notify('请选择目标套餐', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/admin/api/redeem-codes/generate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
target_group_id: parseInt(targetGroupId),
|
||||
duration_days: parseInt(durationDays),
|
||||
count: parseInt(count),
|
||||
prefix: prefix,
|
||||
expires_days: expiresDays ? parseInt(expiresDays) : null,
|
||||
remark: remark
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
closeModal('generateModal');
|
||||
|
||||
document.getElementById('resultBatchId').textContent = result.data.batch_id;
|
||||
document.getElementById('resultCount').textContent = result.data.codes.length;
|
||||
document.getElementById('resultCodes').value = result.data.codes.join('\n');
|
||||
document.getElementById('resultModal').classList.add('show');
|
||||
|
||||
loadBatches();
|
||||
loadCodes();
|
||||
} else {
|
||||
UI.notify(result.message, 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
UI.notify('生成失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function copyResultCodes() {
|
||||
const textarea = document.getElementById('resultCodes');
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
UI.notify('已复制到剪贴板', 'success');
|
||||
}
|
||||
|
||||
async function deleteCode(id) {
|
||||
if (!confirm('确定要删除这个兑换码吗？')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/admin/api/redeem-codes/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
UI.notify('删除成功', 'success');
|
||||
loadBatches();
|
||||
loadCodes();
|
||||
} else {
|
||||
UI.notify(result.message, 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
UI.notify('删除失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadUserGroups();
|
||||
loadBatches();
|
||||
loadCodes();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -19,6 +19,7 @@
|
||||
<a href="/admin/dashboard" class="nav-item">仪表板</a>
|
||||
<a href="/admin/users" class="nav-item">用户管理</a>
|
||||
<a href="/admin/apis" class="nav-item">接口管理</a>
|
||||
<a href="/admin/redeem-codes" class="nav-item">兑换码</a>
|
||||
<a href="/admin/config" class="nav-item active">系统配置</a>
|
||||
<a href="/admin/logs" class="nav-item">日志审计</a>
|
||||
</nav>
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
<a href="/admin/dashboard" class="nav-item">仪表板</a>
|
||||
<a href="/admin/users" class="nav-item active">用户管理</a>
|
||||
<a href="/admin/apis" class="nav-item">接口管理</a>
|
||||
<a href="/admin/redeem-codes" class="nav-item">兑换码</a>
|
||||
<a href="/admin/config" class="nav-item">系统配置</a>
|
||||
<a href="/admin/logs" class="nav-item">日志审计</a>
|
||||
</nav>
|
||||
@@ -105,7 +106,12 @@
|
||||
<input type="hidden" id="editUserId">
|
||||
<div class="form-group">
|
||||
<label>用户分组</label>
|
||||
<select id="editGroupId" class="ui-input"></select>
|
||||
<select id="editGroupId" class="ui-input" onchange="onGroupChange()"></select>
|
||||
</div>
|
||||
<div class="form-group" id="expiryGroup" style="display: none;">
|
||||
<label>套餐到期时间</label>
|
||||
<input type="datetime-local" id="editExpiresAt" class="ui-input">
|
||||
<small style="color: var(--text-muted); font-size: 0.75rem;">游客和普通用户无需设置到期时间</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>账号状态</label>
|
||||
@@ -234,7 +240,10 @@
|
||||
<td>#${u.id}</td>
|
||||
<td><span class="font-medium">${u.username}</span></td>
|
||||
<td class="text-muted">${u.email}</td>
|
||||
<td><span class="badge badge-info">${u.group_name}</span></td>
|
||||
<td>
|
||||
<span class="badge badge-info">${u.group_name}</span>
|
||||
${u.group_id > 2 && u.expires_at ? `<br><small class="text-muted">${u.is_expired ? '已过期' : '至 ' + u.expires_at}</small>` : ''}
|
||||
</td>
|
||||
<td>${u.total_parse_count}</td>
|
||||
<td>
|
||||
<span class="badge ${u.is_active ? 'badge-success' : 'badge-error'}">
|
||||
@@ -243,8 +252,8 @@
|
||||
</td>
|
||||
<td class="text-muted text-sm">${new Date(u.created_at).toLocaleString('zh-CN')}</td>
|
||||
<td>
|
||||
<button class="ui-btn ui-btn-secondary ui-btn-sm"
|
||||
onclick="editUser(${u.id}, ${u.group_id}, ${u.is_active})">
|
||||
<button class="ui-btn ui-btn-secondary ui-btn-sm"
|
||||
onclick="editUser(${u.id}, ${u.group_id}, ${u.is_active}, ${u.expires_at ? `'${u.expires_at}'` : null})">
|
||||
编辑
|
||||
</button>
|
||||
</td>
|
||||
@@ -268,13 +277,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
function editUser(id, groupId, isActive) {
|
||||
function editUser(id, groupId, isActive, expiresAt) {
|
||||
document.getElementById('editUserId').value = id;
|
||||
document.getElementById('editGroupId').value = groupId;
|
||||
document.getElementById('editIsActive').value = isActive;
|
||||
|
||||
// 设置到期时间
|
||||
if (expiresAt) {
|
||||
document.getElementById('editExpiresAt').value = expiresAt.slice(0, 16);
|
||||
} else {
|
||||
document.getElementById('editExpiresAt').value = '';
|
||||
}
|
||||
|
||||
// 根据用户组显示/隐藏到期时间
|
||||
onGroupChange();
|
||||
document.getElementById('editModal').classList.add('show');
|
||||
}
|
||||
|
||||
function onGroupChange() {
|
||||
const groupId = parseInt(document.getElementById('editGroupId').value);
|
||||
const expiryGroup = document.getElementById('expiryGroup');
|
||||
// 游客(1)和普通用户(2)不显示到期时间
|
||||
if (groupId > 2) {
|
||||
expiryGroup.style.display = 'block';
|
||||
} else {
|
||||
expiryGroup.style.display = 'none';
|
||||
document.getElementById('editExpiresAt').value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('editModal').classList.remove('show');
|
||||
}
|
||||
@@ -337,11 +368,19 @@
|
||||
document.getElementById('editForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const userId = document.getElementById('editUserId').value;
|
||||
const groupId = parseInt(document.getElementById('editGroupId').value);
|
||||
const expiresAt = document.getElementById('editExpiresAt').value;
|
||||
|
||||
const data = {
|
||||
group_id: parseInt(document.getElementById('editGroupId').value),
|
||||
group_id: groupId,
|
||||
is_active: document.getElementById('editIsActive').value === 'true'
|
||||
};
|
||||
|
||||
// VIP/SVIP 需要设置到期时间
|
||||
if (groupId > 2) {
|
||||
data.expires_at = expiresAt || null;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/admin/api/users/${userId}`, {
|
||||
method: 'PUT',
|
||||
@@ -354,6 +393,7 @@
|
||||
UI.notify('更新成功', 'success');
|
||||
closeModal();
|
||||
loadUsers(currentPage);
|
||||
loadUserStats();
|
||||
} else {
|
||||
UI.notify(result.message || '更新失败', 'error');
|
||||
}
|
||||
|
||||
557
templates/api_docs.html
Normal file
557
templates/api_docs.html
Normal file
@@ -0,0 +1,557 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>API 文档 - 短视频解析平台</title>
|
||||
<link rel="stylesheet" href="/static/css/ui-components.css?v=3">
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%);
|
||||
min-height: 100vh;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--secondary-900);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.doc-card h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--secondary-900);
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.doc-card h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--secondary-800);
|
||||
margin: 1.25rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.doc-card p {
|
||||
color: var(--secondary-600);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.endpoint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.method {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.method.post {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.method.get {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.url {
|
||||
font-family: monospace;
|
||||
font-size: 0.95rem;
|
||||
color: var(--secondary-800);
|
||||
background: var(--secondary-50);
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem 1.25rem;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
overflow-x: auto;
|
||||
margin: 1rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-block .copy-btn {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.code-block .copy-btn:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.code-block .comment {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.code-block .string {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.code-block .key {
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
.code-block .value {
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.param-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.param-table th,
|
||||
.param-table td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.param-table th {
|
||||
background: var(--secondary-50);
|
||||
font-weight: 600;
|
||||
color: var(--secondary-700);
|
||||
}
|
||||
|
||||
.param-table code {
|
||||
background: var(--secondary-100);
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #dc2626;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.platform-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.platform-item {
|
||||
background: var(--secondary-50);
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.platform-name {
|
||||
font-weight: 600;
|
||||
color: var(--secondary-900);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.platform-patterns {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
background: #eff6ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #1e40af;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
background: #fef3c7;
|
||||
border: 1px solid #fcd34d;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.error-codes {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--secondary-100);
|
||||
}
|
||||
|
||||
.error-code:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.error-code code {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.endpoint {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.url {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">API 文档</h1>
|
||||
<div class="header-actions">
|
||||
<a href="/user/apikey" class="ui-btn ui-btn-primary">管理 API Key</a>
|
||||
<a href="/" class="ui-btn ui-btn-secondary">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速开始 -->
|
||||
<div class="doc-card">
|
||||
<h2>快速开始</h2>
|
||||
<p>短视频解析 API 支持抖音、TikTok、哔哩哔哩等平台的视频解析，返回无水印视频链接、封面、标题、作者等信息。</p>
|
||||
|
||||
<h3>1. 获取 API Key</h3>
|
||||
<p>登录后访问 <a href="/user/apikey">API Key 管理</a> 页面创建您的 API Key。</p>
|
||||
|
||||
<h3>2. 发起请求</h3>
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre>https://your-domain.com/api/v1/parse?key=sk_xxx&url=视频链接</pre>
|
||||
</div>
|
||||
|
||||
<h3>3. 获取结果</h3>
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre>{
|
||||
<span class="key">"code"</span>: <span class="value">200</span>,
|
||||
<span class="key">"msg"</span>: <span class="string">"解析成功"</span>,
|
||||
<span class="key">"data"</span>: {
|
||||
<span class="key">"cover"</span>: <span class="string">"封面URL"</span>,
|
||||
<span class="key">"title"</span>: <span class="string">"视频标题"</span>,
|
||||
<span class="key">"description"</span>: <span class="string">"视频简介"</span>,
|
||||
<span class="key">"author"</span>: <span class="string">"作者名"</span>,
|
||||
<span class="key">"video_url"</span>: <span class="string">"无水印视频链接"</span>
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 认证方式 -->
|
||||
<div class="doc-card">
|
||||
<h2>认证方式</h2>
|
||||
<p>通过 URL 参数 <code>key</code> 传递 API Key：</p>
|
||||
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre>/api/v1/parse?key=您的API_Key&url=视频链接</pre>
|
||||
</div>
|
||||
|
||||
<div class="warning-box">
|
||||
请妥善保管您的 API Key，不要在客户端代码中暴露。建议通过后端服务调用 API。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 解析接口 -->
|
||||
<div class="doc-card">
|
||||
<h2>解析接口</h2>
|
||||
|
||||
<div class="endpoint">
|
||||
<span class="method get">GET</span>
|
||||
<span class="url">/api/v1/parse</span>
|
||||
</div>
|
||||
|
||||
<h3>请求参数</h3>
|
||||
<table class="param-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数</th>
|
||||
<th>类型</th>
|
||||
<th>必填</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>key</code></td>
|
||||
<td>string</td>
|
||||
<td><span class="required">是</span></td>
|
||||
<td>您的 API Key</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>url</code></td>
|
||||
<td>string</td>
|
||||
<td><span class="required">是</span></td>
|
||||
<td>视频链接（支持短链接和完整链接）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>成功响应</h3>
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre>{
|
||||
<span class="key">"code"</span>: <span class="value">200</span>,
|
||||
<span class="key">"msg"</span>: <span class="string">"解析成功"</span>,
|
||||
<span class="key">"data"</span>: {
|
||||
<span class="key">"cover"</span>: <span class="string">"封面图片URL"</span>,
|
||||
<span class="key">"title"</span>: <span class="string">"视频标题"</span>,
|
||||
<span class="key">"description"</span>: <span class="string">"视频简介"</span>,
|
||||
<span class="key">"author"</span>: <span class="string">"作者名称"</span>,
|
||||
<span class="key">"video_url"</span>: <span class="string">"无水印视频URL"</span>
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h3>错误响应</h3>
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre>{
|
||||
<span class="key">"code"</span>: <span class="value">401</span>,
|
||||
<span class="key">"msg"</span>: <span class="string">"错误描述"</span>
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支持平台 -->
|
||||
<div class="doc-card">
|
||||
<h2>支持平台</h2>
|
||||
<div class="endpoint">
|
||||
<span class="method get">GET</span>
|
||||
<span class="url">/api/v1/platforms</span>
|
||||
</div>
|
||||
<p>此接口无需认证，可获取当前支持的平台列表。</p>
|
||||
|
||||
<div class="platform-list">
|
||||
<div class="platform-item">
|
||||
<div class="platform-name">抖音</div>
|
||||
<div class="platform-patterns">douyin.com, v.douyin.com</div>
|
||||
</div>
|
||||
<div class="platform-item">
|
||||
<div class="platform-name">TikTok</div>
|
||||
<div class="platform-patterns">tiktok.com</div>
|
||||
</div>
|
||||
<div class="platform-item">
|
||||
<div class="platform-name">哔哩哔哩</div>
|
||||
<div class="platform-patterns">bilibili.com, b23.tv</div>
|
||||
</div>
|
||||
<div class="platform-item">
|
||||
<div class="platform-name">快手</div>
|
||||
<div class="platform-patterns">kuaishou.com</div>
|
||||
</div>
|
||||
<div class="platform-item">
|
||||
<div class="platform-name">皮皮虾</div>
|
||||
<div class="platform-patterns">pipix.com, h5.pipix.com</div>
|
||||
</div>
|
||||
<div class="platform-item">
|
||||
<div class="platform-name">微博</div>
|
||||
<div class="platform-patterns">weibo.com, weibo.cn</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误码 -->
|
||||
<div class="doc-card">
|
||||
<h2>错误码说明</h2>
|
||||
<div class="error-codes">
|
||||
<div class="error-code">
|
||||
<code>UNAUTHORIZED</code>
|
||||
<span>API Key 无效、已禁用或超出限额</span>
|
||||
</div>
|
||||
<div class="error-code">
|
||||
<code>INVALID_REQUEST</code>
|
||||
<span>请求格式错误，需要 JSON 格式</span>
|
||||
</div>
|
||||
<div class="error-code">
|
||||
<code>MISSING_URL</code>
|
||||
<span>缺少 url 参数</span>
|
||||
</div>
|
||||
<div class="error-code">
|
||||
<code>UNSUPPORTED_PLATFORM</code>
|
||||
<span>不支持的视频平台</span>
|
||||
</div>
|
||||
<div class="error-code">
|
||||
<code>NO_AVAILABLE_API</code>
|
||||
<span>该平台暂无可用解析接口</span>
|
||||
</div>
|
||||
<div class="error-code">
|
||||
<code>PARSE_FAILED</code>
|
||||
<span>解析失败，请检查链接或稍后重试</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 代码示例 -->
|
||||
<div class="doc-card">
|
||||
<h2>代码示例</h2>
|
||||
|
||||
<h3>Python</h3>
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre>import requests
|
||||
|
||||
api_key = "sk_your_api_key_here"
|
||||
video_url = "https://v.douyin.com/xxxxx"
|
||||
|
||||
response = requests.get(
|
||||
"https://your-domain.com/api/v1/parse",
|
||||
params={"key": api_key, "url": video_url}
|
||||
)
|
||||
result = response.json()
|
||||
|
||||
if result["code"] == 200:
|
||||
print("视频标题:", result["data"]["title"])
|
||||
print("作者:", result["data"]["author"])
|
||||
print("视频链接:", result["data"]["video_url"])
|
||||
else:
|
||||
print("错误:", result["msg"])</pre>
|
||||
</div>
|
||||
|
||||
<h3>JavaScript</h3>
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre>const apiKey = 'sk_your_api_key_here';
|
||||
const videoUrl = 'https://v.douyin.com/xxxxx';
|
||||
|
||||
fetch(`https://your-domain.com/api/v1/parse?key=${apiKey}&url=${encodeURIComponent(videoUrl)}`)
|
||||
.then(res => res.json())
|
||||
.then(result => {
|
||||
if (result.code === 200) {
|
||||
console.log('视频标题:', result.data.title);
|
||||
console.log('作者:', result.data.author);
|
||||
console.log('视频链接:', result.data.video_url);
|
||||
} else {
|
||||
console.error('错误:', result.msg);
|
||||
}
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
<h3>cURL</h3>
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">复制</button>
|
||||
<pre>curl "https://your-domain.com/api/v1/parse?key=sk_xxx&url=https://v.douyin.com/xxxxx"</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 限制说明 -->
|
||||
<div class="doc-card">
|
||||
<h2>使用限制</h2>
|
||||
<table class="param-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户等级</th>
|
||||
<th>每日限额</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>普通用户</td>
|
||||
<td>100 次/天/Key</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VIP 用户</td>
|
||||
<td>500 次/天/Key</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SVIP 用户</td>
|
||||
<td>2000 次/天/Key</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="tip-box">
|
||||
每个用户最多可创建 5 个 API Key，每日限额按单个 Key 计算。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/ui-components.js"></script>
|
||||
<script>
|
||||
function copyCode(btn) {
|
||||
const codeBlock = btn.parentElement;
|
||||
const code = codeBlock.querySelector('pre').textContent;
|
||||
|
||||
navigator.clipboard.writeText(code).then(() => {
|
||||
const originalText = btn.textContent;
|
||||
btn.textContent = '已复制';
|
||||
setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
}, 2000);
|
||||
}).catch(() => {
|
||||
UI.notify('复制失败', 'error');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
465
templates/apikey/manage.html
Normal file
465
templates/apikey/manage.html
Normal file
@@ -0,0 +1,465 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>API Key 管理 - 短视频解析平台</title>
|
||||
<link rel="stylesheet" href="/static/css/ui-components.css?v=3">
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%);
|
||||
min-height: 100vh;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--secondary-900);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--secondary-900);
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.key-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.key-item {
|
||||
background: var(--secondary-50);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.key-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.key-name {
|
||||
font-weight: 600;
|
||||
color: var(--secondary-900);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.key-status {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.key-status.active {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.key-status.inactive {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.key-value {
|
||||
font-family: monospace;
|
||||
background: white;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
color: var(--secondary-700);
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.key-meta {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.key-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.key-actions button {
|
||||
padding: 0.4rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.create-form {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.create-form input {
|
||||
flex: 1;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.create-form input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-500);
|
||||
box-shadow: 0 0 0 3px var(--primary-100);
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.modal-overlay.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--secondary-900);
|
||||
}
|
||||
|
||||
.modal-key {
|
||||
background: var(--secondary-50);
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: monospace;
|
||||
font-size: 0.9rem;
|
||||
word-break: break-all;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-warning {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
background: #eff6ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.create-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.key-meta {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.key-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">API Key 管理</h1>
|
||||
<div class="header-actions">
|
||||
<a href="/api-docs" class="ui-btn ui-btn-secondary">API 文档</a>
|
||||
<a href="/auth/profile" class="ui-btn ui-btn-secondary">个人中心</a>
|
||||
<a href="/" class="ui-btn ui-btn-secondary">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>创建新的 API Key</h3>
|
||||
<div class="tip-box">
|
||||
API Key 用于调用解析接口，请妥善保管。每个用户最多创建 5 个 Key。
|
||||
</div>
|
||||
<div class="create-form">
|
||||
<input type="text" id="keyName" placeholder="输入 Key 名称（如：我的应用）" maxlength="100">
|
||||
<button class="ui-btn ui-btn-primary" onclick="createKey()">创建 Key</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>我的 API Keys</h3>
|
||||
<div class="key-list" id="keyList">
|
||||
<div class="empty-state">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新建成功弹窗 -->
|
||||
<div class="modal-overlay" id="keyModal">
|
||||
<div class="modal-content">
|
||||
<h3 class="modal-title">API Key 创建成功</h3>
|
||||
<div class="modal-key" id="newKeyValue"></div>
|
||||
<div class="modal-warning">
|
||||
请立即复制并保存此 Key，关闭后将无法再次查看完整内容！
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="ui-btn ui-btn-secondary" onclick="copyNewKey()">复制 Key</button>
|
||||
<button class="ui-btn ui-btn-primary" onclick="closeModal()">我已保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/ui-components.js"></script>
|
||||
<script>
|
||||
let newApiKey = '';
|
||||
|
||||
async function loadKeys() {
|
||||
try {
|
||||
const response = await fetch('/user/apikey/list');
|
||||
const result = await response.json();
|
||||
|
||||
if (!result.success) {
|
||||
if (response.status === 401) {
|
||||
window.location.href = '/auth/login';
|
||||
return;
|
||||
}
|
||||
throw new Error(result.message || '加载失败');
|
||||
}
|
||||
|
||||
renderKeys(result.data);
|
||||
} catch (error) {
|
||||
UI.notify('加载失败: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function renderKeys(keys) {
|
||||
const container = document.getElementById('keyList');
|
||||
|
||||
if (keys.length === 0) {
|
||||
container.innerHTML = '<div class="empty-state">暂无 API Key，请创建一个</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = keys.map(key => `
|
||||
<div class="key-item">
|
||||
<div class="key-header">
|
||||
<span class="key-name">${escapeHtml(key.name)}</span>
|
||||
<span class="key-status ${key.is_active ? 'active' : 'inactive'}">
|
||||
${key.is_active ? '启用' : '禁用'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="key-value">
|
||||
<span>${key.api_key}</span>
|
||||
</div>
|
||||
<div class="key-meta">
|
||||
<span>每日限额: ${key.daily_limit} 次</span>
|
||||
<span>今日已用: ${key.today_calls} 次</span>
|
||||
<span>总调用: ${key.total_calls} 次</span>
|
||||
<span>创建时间: ${key.created_at}</span>
|
||||
</div>
|
||||
<div class="key-actions">
|
||||
<button class="ui-btn ui-btn-secondary" onclick="toggleKey(${key.id}, ${key.is_active})">
|
||||
${key.is_active ? '禁用' : '启用'}
|
||||
</button>
|
||||
<button class="ui-btn ui-btn-danger" onclick="deleteKey(${key.id}, '${escapeHtml(key.name)}')">
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function createKey() {
|
||||
const nameInput = document.getElementById('keyName');
|
||||
const name = nameInput.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 })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.message || '创建失败');
|
||||
}
|
||||
|
||||
// 显示新 Key
|
||||
newApiKey = result.data.api_key;
|
||||
document.getElementById('newKeyValue').textContent = newApiKey;
|
||||
document.getElementById('keyModal').classList.add('show');
|
||||
|
||||
nameInput.value = '';
|
||||
loadKeys();
|
||||
|
||||
} catch (error) {
|
||||
UI.notify(error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleKey(keyId, currentStatus) {
|
||||
try {
|
||||
const response = await fetch(`/user/apikey/toggle/${keyId}`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.message || '操作失败');
|
||||
}
|
||||
|
||||
UI.notify(result.message, 'success');
|
||||
loadKeys();
|
||||
|
||||
} catch (error) {
|
||||
UI.notify(error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteKey(keyId, keyName) {
|
||||
if (!confirm(`确定要删除 "${keyName}" 吗？此操作不可恢复。`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/user/apikey/delete/${keyId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.message || '删除失败');
|
||||
}
|
||||
|
||||
UI.notify('删除成功', 'success');
|
||||
loadKeys();
|
||||
|
||||
} catch (error) {
|
||||
UI.notify(error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function copyNewKey() {
|
||||
navigator.clipboard.writeText(newApiKey).then(() => {
|
||||
UI.notify('已复制到剪贴板', 'success');
|
||||
}).catch(() => {
|
||||
UI.notify('复制失败，请手动复制', 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('keyModal').classList.remove('show');
|
||||
newApiKey = '';
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// 点击遮罩关闭
|
||||
document.getElementById('keyModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
loadKeys();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -201,6 +201,73 @@
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 输入框按钮组 */
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.input-group .url-input {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-btn {
|
||||
padding: 0 1.25rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--primary-200);
|
||||
background: white;
|
||||
color: var(--primary-600);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input-btn:hover {
|
||||
background: var(--primary-50);
|
||||
border-color: var(--primary-400);
|
||||
}
|
||||
|
||||
.input-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
/* 进度条 */
|
||||
.progress-container {
|
||||
display: none;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.progress-container.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--secondary-600);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: var(--secondary-100);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
|
||||
border-radius: 4px;
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -217,22 +284,36 @@
|
||||
|
||||
<div class="main-card">
|
||||
<div class="input-wrapper">
|
||||
<input type="text" class="url-input" id="videoUrl" placeholder="在此粘贴 抖音/TikTok/B站 视频链接...">
|
||||
<div class="input-group">
|
||||
<input type="text" class="url-input" id="videoUrl" placeholder="在此粘贴 抖音/TikTok/B站/快手/皮皮虾/微博 视频链接...">
|
||||
<button class="input-btn" onclick="pasteUrl()">粘贴</button>
|
||||
<button class="input-btn" onclick="clearAll()">清空</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="action-btn" onclick="parseVideo()" id="parseBtn">
|
||||
<span class="btn-text">立即解析</span>
|
||||
<div class="loading-spinner"></div>
|
||||
</button>
|
||||
|
||||
<div class="progress-container" id="progressContainer">
|
||||
<div class="progress-label">
|
||||
<span id="progressText">正在解析...</span>
|
||||
<span id="progressPercent">0%</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progressFill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="result" class="result-card">
|
||||
<video id="videoPlayer" class="video-preview" controls></video>
|
||||
<div class="result-content">
|
||||
<h3 class="video-title" id="title"></h3>
|
||||
<p class="video-meta" id="description"></p>
|
||||
<div class="download-actions">
|
||||
<a id="videoLink" class="ui-btn ui-btn-primary" href="" download target="_blank">
|
||||
<button class="ui-btn ui-btn-primary" onclick="downloadVideo()">
|
||||
下载视频
|
||||
</a>
|
||||
</button>
|
||||
<button class="ui-btn ui-btn-primary" onclick="downloadCover()">
|
||||
下载封面
|
||||
</button>
|
||||
@@ -240,12 +321,14 @@
|
||||
复制链接
|
||||
</button>
|
||||
</div>
|
||||
<input type="hidden" id="videoLink" value="">
|
||||
<a id="coverLink" href="" style="display: none;"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-links" id="navLinks">
|
||||
<a href="/api-docs" class="nav-link">API 文档</a>
|
||||
<a href="/auth/login" class="nav-link">登录账号</a>
|
||||
<a href="/auth/register" class="nav-link">注册新用户</a>
|
||||
</div>
|
||||
@@ -258,13 +341,103 @@
|
||||
|
||||
<script src="/static/js/ui-components.js"></script>
|
||||
<script>
|
||||
// 粘贴按钮
|
||||
async function pasteUrl() {
|
||||
try {
|
||||
const text = await navigator.clipboard.readText();
|
||||
document.getElementById('videoUrl').value = text;
|
||||
UI.notify('已粘贴', 'success');
|
||||
} catch (e) {
|
||||
UI.notify('无法访问剪贴板，请手动粘贴', 'warning');
|
||||
}
|
||||
}
|
||||
|
||||
// 清空按钮
|
||||
function clearAll() {
|
||||
document.getElementById('videoUrl').value = '';
|
||||
document.getElementById('result').classList.remove('show');
|
||||
document.getElementById('progressContainer').classList.remove('show');
|
||||
document.getElementById('videoPlayer').src = '';
|
||||
document.getElementById('videoPlayer').poster = '';
|
||||
UI.notify('已清空', 'info');
|
||||
}
|
||||
|
||||
// 进度条控制
|
||||
let progressInterval = null;
|
||||
|
||||
function startProgress() {
|
||||
const container = document.getElementById('progressContainer');
|
||||
const fill = document.getElementById('progressFill');
|
||||
const text = document.getElementById('progressText');
|
||||
const percent = document.getElementById('progressPercent');
|
||||
|
||||
container.classList.add('show');
|
||||
let progress = 0;
|
||||
const steps = [
|
||||
{ p: 15, t: '正在连接服务器...' },
|
||||
{ p: 35, t: '正在解析链接...' },
|
||||
{ p: 55, t: '正在获取视频信息...' },
|
||||
{ p: 75, t: '正在提取无水印地址...' },
|
||||
{ p: 90, t: '即将完成...' }
|
||||
];
|
||||
let stepIndex = 0;
|
||||
|
||||
progressInterval = setInterval(() => {
|
||||
if (stepIndex < steps.length && progress >= steps[stepIndex].p - 10) {
|
||||
text.textContent = steps[stepIndex].t;
|
||||
stepIndex++;
|
||||
}
|
||||
if (progress < 90) {
|
||||
progress += Math.random() * 8 + 2;
|
||||
if (progress > 90) progress = 90;
|
||||
fill.style.width = progress + '%';
|
||||
percent.textContent = Math.round(progress) + '%';
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function completeProgress() {
|
||||
if (progressInterval) {
|
||||
clearInterval(progressInterval);
|
||||
progressInterval = null;
|
||||
}
|
||||
const fill = document.getElementById('progressFill');
|
||||
const text = document.getElementById('progressText');
|
||||
const percent = document.getElementById('progressPercent');
|
||||
|
||||
fill.style.width = '100%';
|
||||
percent.textContent = '100%';
|
||||
text.textContent = '解析完成!';
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('progressContainer').classList.remove('show');
|
||||
fill.style.width = '0%';
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function resetProgress() {
|
||||
if (progressInterval) {
|
||||
clearInterval(progressInterval);
|
||||
progressInterval = null;
|
||||
}
|
||||
const container = document.getElementById('progressContainer');
|
||||
const fill = document.getElementById('progressFill');
|
||||
container.classList.remove('show');
|
||||
fill.style.width = '0%';
|
||||
}
|
||||
|
||||
function extractVideoUrl(text) {
|
||||
const patterns = [
|
||||
/https?:\/\/v\.douyin\.com\/[A-Za-z0-9_-]+/,
|
||||
/https?:\/\/www\.douyin\.com\/video\/\d+/,
|
||||
/https?:\/\/(?:www\.)?bilibili\.com\/video\/[A-Za-z0-9?&=]+/,
|
||||
/https?:\/\/b23\.tv\/[A-Za-z0-9]+/,
|
||||
/https?:\/\/(?:www\.)?tiktok\.com\/@[^\/]+\/video\/\d+/
|
||||
/https?:\/\/(?:www\.)?tiktok\.com\/@[^\/]+\/video\/\d+/,
|
||||
/https?:\/\/(?:www\.)?kuaishou\.com\/[A-Za-z0-9\/_-]+/,
|
||||
/https?:\/\/h5\.pipix\.com\/s\/[A-Za-z0-9_-]+\/?/,
|
||||
/https?:\/\/(?:www\.)?pipix\.com\/[A-Za-z0-9\/_-]+/,
|
||||
/https?:\/\/(?:video\.)?weibo\.com\/show\?fid=[0-9:]+/,
|
||||
/https?:\/\/(?:www\.)?weibo\.com\/[A-Za-z0-9\/]+/
|
||||
];
|
||||
|
||||
for (const pattern of patterns) {
|
||||
@@ -295,6 +468,7 @@
|
||||
resultCard.classList.remove('show');
|
||||
btn.disabled = true;
|
||||
btn.classList.add('loading');
|
||||
startProgress();
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/parse', {
|
||||
@@ -318,6 +492,7 @@
|
||||
UI.notify(error.message, 'error');
|
||||
btn.disabled = false;
|
||||
btn.classList.remove('loading');
|
||||
resetProgress();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -331,6 +506,7 @@
|
||||
UI.notify('解析超时，请稍后重试', 'error');
|
||||
btn.disabled = false;
|
||||
btn.classList.remove('loading');
|
||||
resetProgress();
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -350,6 +526,7 @@
|
||||
UI.notify(error.message, 'error');
|
||||
btn.disabled = false;
|
||||
btn.classList.remove('loading');
|
||||
resetProgress();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -360,14 +537,31 @@
|
||||
const btn = document.getElementById('parseBtn');
|
||||
const resultCard = document.getElementById('result');
|
||||
|
||||
completeProgress();
|
||||
|
||||
document.getElementById('title').textContent = data.title || '无标题';
|
||||
document.getElementById('description').textContent = data.description || '';
|
||||
|
||||
const player = document.getElementById('videoPlayer');
|
||||
player.src = data.video_url;
|
||||
player.poster = data.cover;
|
||||
// 先停止并清空当前视频
|
||||
player.pause();
|
||||
player.removeAttribute('src');
|
||||
player.load();
|
||||
|
||||
document.getElementById('videoLink').href = data.video_url;
|
||||
// 使用代理播放视频，绕过防盗链
|
||||
const proxyVideoUrl = '/proxy/download?url=' + encodeURIComponent(data.video_url);
|
||||
player.src = proxyVideoUrl;
|
||||
|
||||
// 封面也使用代理
|
||||
if (data.cover) {
|
||||
const proxyCoverUrl = '/proxy/download?url=' + encodeURIComponent(data.cover);
|
||||
player.poster = proxyCoverUrl;
|
||||
}
|
||||
|
||||
// 强制重新加载视频
|
||||
player.load();
|
||||
|
||||
document.getElementById('videoLink').value = data.video_url;
|
||||
document.getElementById('coverLink').href = data.cover;
|
||||
|
||||
resultCard.classList.add('show');
|
||||
@@ -377,6 +571,18 @@
|
||||
UI.notify('解析成功', 'success');
|
||||
}
|
||||
|
||||
function downloadVideo() {
|
||||
const videoUrl = document.getElementById('videoLink').value;
|
||||
if (!videoUrl) {
|
||||
UI.notify('视频链接无效', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用代理下载
|
||||
const proxyUrl = '/proxy/download?url=' + encodeURIComponent(videoUrl);
|
||||
window.open(proxyUrl, '_blank');
|
||||
}
|
||||
|
||||
async function downloadCover() {
|
||||
const coverUrl = document.getElementById('coverLink').href;
|
||||
if (!coverUrl) {
|
||||
@@ -434,6 +640,7 @@
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
document.getElementById('navLinks').innerHTML = `
|
||||
<a href="/api-docs" class="nav-link">API 文档</a>
|
||||
<a href="/auth/profile" class="nav-link">个人中心</a>
|
||||
<a href="#" class="nav-link" onclick="logout(); return false;">退出登录</a>
|
||||
`;
|
||||
|
||||
@@ -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