chenzhilong/TenantDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增外链管理功能，完善外链创建、删除和获取接口，优化扫码登录逻辑，添加到期时间支持，更新前端页面以增强用户体验，确保外链使用次数和有效期的正确管理。

Browse Source
This commit is contained in:
dockermen
2025-04-11 18:16:21 +08:00
parent 47839acb75
commit aad2182d0c
13 changed files with 1413 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

621
templates/admin.html
View File

@ -138,8 +138,8 @@
<td><span class="badge bg-success">正常</span></td>
<td>1.5TB / 2TB</td>
<td>
<button class="btn btn-sm btn-info" id="editudrivebtn" data-bs-toggle="modal" data-bs-target="#editudriveModal" tid="{{ user_drive.id }}"><i class="bi bi-pencil"></i></button>
<button class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></button>
<button class="btn btn-sm btn-info editudrivebtn" data-bs-toggle="modal" data-bs-target="#editudriveModal" tid="{{ user_drive.id }}"><i class="bi bi-pencil"></i></button>
<button class="btn btn-sm btn-danger deleteudrivebtn" tid="{{ user_drive.id }}"><i class="bi bi-trash"></i></button>
</td>
{% endfor %}
</tr>
@ -242,7 +242,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="saveAccount">保存</button>
<button type="button" class="btn btn-primary" id="saveNewAccount">保存</button>
</div>
</div>
</div>
@ -298,28 +298,32 @@
<form id="addExlinkForm">
<div class="mb-3">
<label class="form-label">网盘类型</label>
<select class="form-select" name="disk_type" required>
<select class="form-select" name="disk_type" id="exlinkDriveType" required>
<option value="">请选择网盘类型</option>
<option value="aliyun">阿里云盘</option>
<option value="baidu">百度网盘</option>
{% for provider in providers %}
<option value="{{ provider.provider_name }}">{{ provider.provider_name }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label class="form-label">账号</label>
<select class="form-select" name="account_id" required>
<option value="">请选择账号</option>
<!-- 这里应该通过JavaScript动态填充账号列表 -->
<option value="aliyun">阿里云盘</option>
<option value="baidu">百度网盘</option>
<select class="form-select" name="account_id" id="exlinkAccountId" required>
<option value="">请先选择网盘类型</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">剩余次数</label>
<input type="number" class="form-control" name="remaining_count" required>
<label class="form-label">使用次数限制</label>
<input type="number" class="form-control" name="total_quota" required min="1" value="3">
<div class="form-text">设置此外链可以被使用的最大次数</div>
</div>
<div class="mb-3">
<label class="form-label">有效期</label>
<input type="date" class="form-control" name="expiry_date" required>
<label class="form-label">到期时间</label>
<input type="datetime-local" class="form-control" name="expiry_time" id="exlinkExpiryTime" required>
<div class="form-text">设置此外链的有效期限，超过时间后将无法访问</div>
</div>
<div class="mb-3">
<label class="form-label">备注说明</label>
<input type="text" class="form-control" name="remarks" placeholder="可选">
</div>
</form>
</div>
@ -331,6 +335,25 @@
</div>
</div>
<!-- 删除确认对话框 -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">确认删除</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>确定要删除此网盘账号吗？此操作不可恢复。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@ -411,57 +434,6 @@
// showMessage('错误信息', 'error');
// showMessage('提示信息', 'info');
//添加保存外链事件
$('#saveExlink').on('click', function() {
// 获取表单数据
const formData = new FormData(document.querySelector('#addExlinkModal form'));
const formValues = {
disk_type: formData.get('disk_type'),
account_id: formData.get('account_id'),
remaining_count: formData.get('remaining_count'),
expiry_date: formData.get('expiry_date')
};
// 检查表单是否填写完整
if (!formValues.disk_type || !formValues.remaining_count || !formValues.account_id || !formValues.expiry_date) {
showMessage('请填写所有必填字段！', 'error');
return; // 停止提交
}
// 表单数据准备发送
const submitData = {
account_id: formValues.account_id,
remaining_count: formValues.remaining_count,
access_token: formValues.access_token
};
console.log('准备提交的数据:', submitData);
// 发送数据到服务器
$.ajax({
url: '/admin/exlink',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
data: formValues
}),
success: function(data) {
if (data.status) {
showMessage('账号保存成功',"success");
// 清空表单
$('#accountName').val('');
$('#accountToken').val('');
} else {
showMessage('账号保存失败: ' + data.message,"warning");
}
},
error: function(error) {
console.error('保存账号出错:', error);
showMessage('保存账号时发生错误，请查看控制台',"error");
}
});
});
// 初始化图表
const accessCtx = document.getElementById('accessChart').getContext('2d');
new Chart(accessCtx, {
@ -559,6 +531,11 @@
document.addEventListener('DOMContentLoaded', function() {
setupJsonEditors(); // 初始化所有编辑器
bindEditButtonEvents(); // 初始化编辑按钮事件
bindDeleteButtonEvents(); // 初始化删除按钮事件
bindAddAccountEvent(); // 初始化添加账号事件
bindAddExlinkEvents(); // 初始化添加外链事件
loadExternalLinks(); // 加载外链列表
});
// 设置默认JSON模板 (Add Modal specific)
@ -586,36 +563,74 @@
}
});
// 设置编辑用户驱动JSON模板 (Edit Modal specific)
document.querySelectorAll('#editudrivebtn').forEach(button => {
button.addEventListener('click', function() {
const editModalEditorArea = document.querySelector('#editudriveModal .json-editor-area');
const editorElement = editModalEditorArea.querySelector('.ace-editor');
const editor = ace.edit(editorElement); // Get the Ace editor instance
const selectedtid = this.getAttribute('tid');
if (selectedtid) {
let defaultJson = {};
// 解析返回的JSON字符串为JavaScript对象
const allUserDrivesStr = '{{ alluser_drives | tojson | safe }}';
const user_drives = JSON.parse(allUserDrivesStr); // Use safe filter
const selectedUdrive = user_drives.find(user_drive => user_drive.id == selectedtid);
if (selectedUdrive && selectedUdrive.login_config) {
defaultJson = selectedUdrive.login_config;
} else {
defaultJson = {
"provider_name": selectedtid, // Keep provider_name for context if no config
"config": { "api_key": "", "secret_key": "", "redirect_uri": "" },
"auth": { "token": "", "expires_in": 0 }
};
}
editor.setValue(JSON.stringify(defaultJson, null, 2), -1);
// 绑定编辑按钮事件
function bindEditButtonEvents() {
document.querySelectorAll('.editudrivebtn').forEach(button => {
button.addEventListener('click', function() {
const editModalEditorArea = document.querySelector('#editudriveModal .json-editor-area');
const editorElement = editModalEditorArea.querySelector('.ace-editor');
const editor = ace.edit(editorElement); // Get the Ace editor instance
const selectedtid = this.getAttribute('tid');
// Store the selected ID in a data attribute for the save button to access
document.querySelector('#editudriveModal #saveAccount').setAttribute('data-tid', selectedtid);
}
if (selectedtid) {
// 获取最新的账号信息
$.ajax({
url: '/admin/user_drive/get',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ id: selectedtid }),
success: function(response) {
if (response.status && response.data) {
let selectedUdrive = null;
// 查找匹配的用户驱动
if (Array.isArray(response.data)) {
selectedUdrive = response.data.find(drive => drive.id == selectedtid);
} else if (response.data.id == selectedtid) {
selectedUdrive = response.data;
}
if (selectedUdrive && selectedUdrive.login_config) {
let configData = selectedUdrive.login_config;
// 如果是字符串格式，解析为对象
if (typeof configData === 'string') {
try {
configData = JSON.parse(configData);
} catch (e) {
console.error('解析配置JSON失败:', e);
}
}
editor.setValue(JSON.stringify(configData, null, 2), -1);
} else {
const defaultJson = {
"provider_name": selectedtid,
"config": { "api_key": "", "secret_key": "", "redirect_uri": "" },
"auth": { "token": "", "expires_in": 0 }
};
editor.setValue(JSON.stringify(defaultJson, null, 2), -1);
}
// 存储选中的ID
document.querySelector('#editudriveModal #saveAccount').setAttribute('data-tid', selectedtid);
}
},
error: function(error) {
console.error('获取账号信息出错:', error);
showMessage('获取账号信息时发生错误', 'error');
// 使用默认值
const defaultJson = {
"provider_name": selectedtid,
"config": { "api_key": "", "secret_key": "", "redirect_uri": "" },
"auth": { "token": "", "expires_in": 0 }
};
editor.setValue(JSON.stringify(defaultJson, null, 2), -1);
document.querySelector('#editudriveModal #saveAccount').setAttribute('data-tid', selectedtid);
}
});
}
});
});
});
}
// 编辑用户驱动保存事件
$('#editudriveModal #saveAccount').on('click', function() {
@ -645,8 +660,8 @@
// 清空并关闭模态框
editor.setValue(configJson, -1);
$('#editudriveModal').modal('hide');
// 如果需要，可以在这里刷新页面或表格数据
// 局部刷新表格内容
// 刷新网盘账号列表
refreshAccountsList();
} else {
showMessage('配置更新失败: ' + response.message, 'error');
}
@ -664,6 +679,418 @@
editorElement.classList.add('border-danger');
}
});
// 绑定删除按钮事件
function bindDeleteButtonEvents() {
let selectedDriveId = null;
const deleteConfirmModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
// 为所有删除按钮添加点击事件
document.querySelectorAll('.deleteudrivebtn').forEach(button => {
button.addEventListener('click', function() {
selectedDriveId = this.getAttribute('tid');
// 重置对话框内容
document.querySelector('#deleteConfirmModal .modal-body p').textContent =
'确定要删除此网盘账号吗？此操作不可恢复。';
deleteConfirmModal.show(); // 显示确认对话框
});
});
// 确认删除按钮点击事件
document.getElementById('confirmDelete').addEventListener('click', function() {
if (selectedDriveId) {
// 发送删除请求
$.ajax({
url: '/admin/user_drive/delete',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ id: selectedDriveId }),
success: function(response) {
if (response.status) {
deleteConfirmModal.hide(); // 只有成功时才隐藏对话框
showMessage('网盘账号删除成功', 'success');
// 刷新网盘账号列表
refreshAccountsList();
} else {
// 显示错误消息在对话框中
document.querySelector('#deleteConfirmModal .modal-body p').textContent =
response.message || '网盘账号删除失败';
showMessage(response.message || '网盘账号删除失败', 'error');
}
},
error: function(error) {
// 显示错误消息在对话框中
document.querySelector('#deleteConfirmModal .modal-body p').textContent =
'删除网盘账号时发生错误，请稍后重试。';
console.error('删除网盘账号出错:', error);
showMessage('删除网盘账号时发生错误，请查看控制台', 'error');
}
});
}
});
}
// 刷新网盘账号列表函数也需要更新，确保新添加的行的删除按钮也有事件绑定
function refreshAccountsList() {
$.ajax({
url: '/admin/user_drive/get',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({}),
success: function(response) {
// 清空现有表格内容
const accountsTableBody = $('#accounts table tbody');
accountsTableBody.empty();
if (response.status) {
// 检查是否有数据，如果没有也显示空表格而不是错误
if (response.data && response.data.length > 0) {
// 添加新的行
response.data.forEach(function(drive) {
const row = $('<tr></tr>');
row.append(`<td>${drive.provider_name}</td>`);
row.append(`<td>${drive.provider_name}</td>`);
row.append(`<td><span class="badge bg-success">正常</span></td>`);
row.append(`<td>1.5TB / 2TB</td>`);
row.append(`
<td>
<button class="btn btn-sm btn-info editudrivebtn" data-bs-toggle="modal" data-bs-target="#editudriveModal" tid="${drive.id}">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger deleteudrivebtn" tid="${drive.id}">
<i class="bi bi-trash"></i>
</button>
</td>
`);
accountsTableBody.append(row);
});
// 重新绑定编辑和删除按钮事件
bindEditButtonEvents();
bindDeleteButtonEvents();
} else {
// 如果没有数据，显示一个提示行
const emptyRow = $('<tr></tr>');
emptyRow.append(`<td colspan="5" class="text-center">暂无网盘账号，请添加。</td>`);
accountsTableBody.append(emptyRow);
}
} else {
// 如果API返回失败，显示错误消息
showMessage(response.message || '获取网盘账号列表失败', 'error');
const errorRow = $('<tr></tr>');
errorRow.append(`<td colspan="5" class="text-center text-danger">获取数据失败，请刷新页面重试。</td>`);
accountsTableBody.append(errorRow);
}
},
error: function(error) {
console.error('获取网盘账号列表出错:', error);
showMessage('获取网盘账号列表时发生错误', 'error');
// 显示错误消息在表格中
const accountsTableBody = $('#accounts table tbody');
accountsTableBody.empty();
const errorRow = $('<tr></tr>');
errorRow.append(`<td colspan="5" class="text-center text-danger">获取数据失败，请刷新页面重试。</td>`);
accountsTableBody.append(errorRow);
}
});
}
// 添加网盘账号保存事件
function bindAddAccountEvent() {
document.getElementById('saveNewAccount').addEventListener('click', function() {
const addModalEditorArea = document.querySelector('#addAccountModal .json-editor-area');
const editorElement = addModalEditorArea.querySelector('.ace-editor');
const editor = ace.edit(editorElement);
const configJson = editor.getValue();
const driveType = document.getElementById('driveType').value;
if (!driveType) {
showMessage('请选择网盘类型', 'error');
return;
}
try {
// 验证JSON格式
const configData = JSON.parse(configJson);
// 发送数据到服务器
$.ajax({
url: '/admin/user_drive/add',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
provider_name: driveType,
login_config: configData,
remarks: driveType + "的账号"
}),
success: function(response) {
if (response.status) {
showMessage('网盘账号添加成功', 'success');
// 清空并关闭模态框
document.getElementById('driveType').value = '';
editor.setValue('', -1);
$('#addAccountModal').modal('hide');
// 刷新网盘账号列表
refreshAccountsList();
} else {
showMessage('网盘账号添加失败: ' + (response.message || '未知错误'), 'error');
}
},
error: function(error) {
console.error('添加网盘账号出错:', error);
showMessage('添加网盘账号时发生错误，请查看控制台', 'error');
}
});
} catch (e) {
showMessage('无效的JSON格式: ' + e.message, 'error');
const errorDisplay = addModalEditorArea.closest('.mb-3').querySelector('.json-error');
errorDisplay.textContent = '无效的JSON格式: ' + e.message;
errorDisplay.style.display = 'block';
editorElement.classList.add('border-danger');
}
});
}
// 加载外链列表
function loadExternalLinks() {
$.ajax({
url: '/admin/exlink/get',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({}),
success: function(response) {
const linksTableBody = $('#links table tbody');
linksTableBody.empty();
if (response.status) {
if (response.data && response.data.length > 0) {
response.data.forEach(function(link) {
const row = $('<tr></tr>');
row.append(`<td>${link.link_uuid}</td>`);
row.append(`<td>${link.drive_id}</td>`);
// 创建时间和过期时间
row.append(`<td>-</td>`);
if (link.expiry_time) {
const expiryDate = new Date(link.expiry_time);
const formattedDate = expiryDate.toLocaleString();
row.append(`<td>${formattedDate}</td>`);
} else {
row.append(`<td>-</td>`);
}
// 剩余次数
const usedQuota = link.used_quota || 0;
const totalQuota = link.total_quota || 0;
const remainingCount = totalQuota - usedQuota;
row.append(`<td>${remainingCount} / ${totalQuota}</td>`);
// 状态
let statusBadge = '';
if (remainingCount <= 0) {
statusBadge = '<span class="badge bg-danger">已禁用</span>';
} else {
statusBadge = '<span class="badge bg-success">正常</span>';
}
row.append(`<td>${statusBadge}</td>`);
// 操作按钮
row.append(`
<td>
<a href="/exlink/${link.link_uuid}" target="_blank" class="btn btn-sm btn-info">
<i class="bi bi-box-arrow-up-right"></i>
</a>
<button class="btn btn-sm btn-danger deleteExlinkBtn" data-uuid="${link.link_uuid}">
<i class="bi bi-trash"></i>
</button>
</td>
`);
linksTableBody.append(row);
});
// 绑定删除外链按钮事件
bindDeleteExlinkEvents();
} else {
// 如果没有数据，显示一个提示行
const emptyRow = $('<tr></tr>');
emptyRow.append(`<td colspan="7" class="text-center">暂无外链数据，请添加。</td>`);
linksTableBody.append(emptyRow);
}
} else {
showMessage('获取外链列表失败: ' + (response.message || '未知错误'), 'error');
const errorRow = $('<tr></tr>');
errorRow.append(`<td colspan="7" class="text-center text-danger">获取数据失败，请刷新页面重试。</td>`);
linksTableBody.append(errorRow);
}
},
error: function(error) {
console.error('获取外链列表出错:', error);
showMessage('获取外链列表时发生错误', 'error');
// 显示错误消息在表格中
const linksTableBody = $('#links table tbody');
linksTableBody.empty();
const errorRow = $('<tr></tr>');
errorRow.append(`<td colspan="7" class="text-center text-danger">获取数据失败，请刷新页面重试。</td>`);
linksTableBody.append(errorRow);
}
});
}
// 绑定添加外链相关事件
function bindAddExlinkEvents() {
// 当选择网盘类型时，加载对应的账号列表
document.getElementById('exlinkDriveType').addEventListener('change', function() {
const selectedType = this.value;
const accountSelect = document.getElementById('exlinkAccountId');
// 清空当前选项
accountSelect.innerHTML = '<option value="">加载中...</option>';
if (selectedType) {
// 加载对应类型的网盘账号
$.ajax({
url: '/admin/user_drive/get',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ provider_name: selectedType }),
success: function(response) {
accountSelect.innerHTML = '<option value="">请选择账号</option>';
if (response.status && response.data && response.data.length > 0) {
response.data.forEach(function(drive) {
const option = document.createElement('option');
option.value = drive.id;
option.textContent = drive.provider_name + (drive.remarks ? ` (${drive.remarks})` : '');
accountSelect.appendChild(option);
});
} else {
accountSelect.innerHTML = '<option value="">没有可用的账号，请先添加</option>';
}
},
error: function(error) {
console.error('获取网盘账号出错:', error);
accountSelect.innerHTML = '<option value="">加载失败，请重试</option>';
}
});
} else {
accountSelect.innerHTML = '<option value="">请先选择网盘类型</option>';
}
});
// 设置默认到期时间为当前时间后24小时
function setDefaultExpiryTime() {
const expiryTimeInput = document.getElementById('exlinkExpiryTime');
if (expiryTimeInput) {
const now = new Date();
now.setHours(now.getHours() + 24);
// 格式化为datetime-local输入所需的格式：YYYY-MM-DDThh:mm
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const formattedDateTime = `${year}-${month}-${day}T${hours}:${minutes}`;
expiryTimeInput.value = formattedDateTime;
}
}
// 初始化表单时设置默认到期时间
setDefaultExpiryTime();
// 每次打开模态框时重置到期时间
$('#addExlinkModal').on('show.bs.modal', function() {
setDefaultExpiryTime();
});
// 绑定保存外链按钮点击事件
document.getElementById('saveExlink').addEventListener('click', function() {
// 获取表单数据
const formData = new FormData(document.getElementById('addExlinkForm'));
const drive_id = formData.get('account_id');
const total_quota = formData.get('total_quota');
const expiry_time = formData.get('expiry_time');
const remarks = formData.get('remarks') || '';
if (!drive_id || !total_quota || !expiry_time) {
showMessage('请填写必要的信息', 'error');
return;
}
// 转换日期时间格式：从YYYY-MM-DDThh:mm到YYYY-MM-DD hh:mm:ss
const expiryDate = new Date(expiry_time);
const formattedExpiryTime = expiryDate.toISOString().replace('T', ' ').substring(0, 19);
// 发送创建外链请求
$.ajax({
url: '/admin/exlink/create',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
drive_id: drive_id,
total_quota: total_quota,
expiry_time: formattedExpiryTime,
remarks: remarks
}),
success: function(response) {
if (response.status) {
showMessage('外链创建成功', 'success');
// 清空表单
document.getElementById('exlinkDriveType').value = '';
document.getElementById('exlinkAccountId').innerHTML = '<option value="">请先选择网盘类型</option>';
document.querySelector('[name="total_quota"]').value = '3';
document.querySelector('[name="remarks"]').value = '';
// 关闭模态框
$('#addExlinkModal').modal('hide');
// 重新加载外链列表
loadExternalLinks();
} else {
showMessage('外链创建失败: ' + (response.message || '未知错误'), 'error');
}
},
error: function(error) {
console.error('创建外链出错:', error);
showMessage('创建外链时发生错误，请查看控制台', 'error');
}
});
});
}
// 绑定删除外链按钮事件
function bindDeleteExlinkEvents() {
document.querySelectorAll('.deleteExlinkBtn').forEach(button => {
button.addEventListener('click', function() {
const uuid = this.getAttribute('data-uuid');
if (confirm('确定要删除此外链吗？此操作不可恢复。')) {
$.ajax({
url: '/admin/exlink/delete',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ link_uuid: uuid }),
success: function(response) {
if (response.status) {
showMessage('外链删除成功', 'success');
loadExternalLinks(); // 重新加载外链列表
} else {
showMessage('外链删除失败: ' + (response.message || '未知错误'), 'error');
}
},
error: function(error) {
console.error('删除外链出错:', error);
showMessage('删除外链时发生错误，请查看控制台', 'error');
}
});
}
});
});
}
</script>
</body>
</html>
</html>

81
templates/exlink_error.html Normal file
View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>访问失败 - 网盘外链</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
<style>
body {
background-color: #f5f5f5;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 0;
}
.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
.card-header {
background-color: #dc3545;
color: white;
font-weight: bold;
padding: 15px 20px;
}
.error-icon {
font-size: 4rem;
color: #dc3545;
margin-bottom: 1rem;
}
.footer {
text-align: center;
padding: 20px;
background-color: #f8f9fa;
color: #6c757d;
}
</style>
</head>
<body>
<div class="container main-content">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<div class="card">
<div class="card-header">
<span>访问失败</span>
</div>
<div class="card-body text-center">
<div class="error-icon">
<i class="bi bi-exclamation-circle"></i>
</div>
<h5 class="card-title">无法访问网盘外链</h5>
<p class="card-text">{{ message }}</p>
<div class="d-grid gap-2 mt-4">
<a href="/" class="btn btn-primary">
<i class="bi bi-house me-2"></i>返回首页
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="mb-0">网盘租户系统 &copy; 2023</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

465
templates/exlink_view.html Normal file
View File

@ -0,0 +1,465 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ drive_info.provider_name }} 扫码登录</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 15px;
}
.card {
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
border-radius: 12px;
border: none;
background-color: white;
}
.card-body {
padding: 2rem;
}
.footer {
text-align: center;
padding: 15px;
background-color: #e9ecef;
color: #6c757d;
font-size: 0.85rem;
}
.header-info {
font-size: 0.9rem;
color: #6c757d;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
text-align: center;
}
.header-info span {
margin: 0 8px;
white-space: nowrap;
}
.header-info .value {
color: #0d6efd;
font-weight: 500;
margin-left: 4px;
}
.scan-area {
position: relative;
width: 100%;
padding-top: 75%;
margin-top: 1rem;
margin-bottom: 1.5rem;
border: 1px solid #e9ecef;
border-radius: 8px;
overflow: hidden;
background-color: #f8f9fa;
}
#camera-container, #scan-placeholder, #scan-result {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
}
#camera-container {
display: none;
padding: 0;
}
#scan-result {
display: none;
}
#scan-placeholder p {
margin-bottom: 0.5rem;
color: #6c757d;
}
#video {
width: 100%;
height: 100%;
object-fit: cover;
}
#canvas {
display: none;
}
.card-title {
text-align: center;
color: #343a40;
font-weight: 600;
font-size: 1.5rem;
margin-bottom: 0;
}
.btn {
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 500;
}
.btn-primary {
background-color: #0d6efd;
border-color: #0d6efd;
}
.btn-danger {
background-color: #dc3545;
border-color: #dc3545;
}
@media (max-width: 576px) {
.card-body {
padding: 1.5rem;
}
.card-title {
font-size: 1.25rem;
}
.header-info {
font-size: 0.8rem;
}
.btn {
font-size: 0.9rem;
padding: 0.6rem 0.8rem;
}
.scan-area {
margin-bottom: 1rem;
}
}
</style>
</head>
<body>
<div class="container main-content">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6 col-xl-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ drive_info.provider_name }}扫码登录</h5>
<div class="header-info">
<span>
<i class="bi bi-arrow-repeat"></i> 剩余次数:<span class="value" id="remaining-count">{{ remaining_count }}</span>
</span>
<span>
<i class="bi bi-clock"></i> 剩余时间:<span class="value" id="countdown">计算中...</span>
</span>
</div>
<div class="scan-area">
<div id="camera-container">
<video id="video" playsinline></video>
<canvas id="canvas"></canvas>
</div>
<div id="scan-placeholder">
<i class="bi bi-qr-code-scan fs-1 text-muted mb-3"></i>
<p class="mb-1 fw-bold">点击下方按钮启动扫码</p>
<p class="text-muted small">请将摄像头对准{{ drive_info.provider_name }} PC端的二维码</p>
</div>
<div id="scan-result">
<i class="bi bi-check-circle-fill fs-1 text-success mb-3"></i>
<p class="text-success fw-bold mb-2">扫码成功！</p>
<div id="result-content" class="text-center text-muted"></div>
</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary" id="scan-button">
<i class="bi bi-camera-video me-1"></i>开始扫码
</button>
<button class="btn btn-danger" id="stop-button" style="display: none;">
<i class="bi bi-stop-circle me-1"></i>停止扫码
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="mb-0">网盘租户系统 &copy; 2023</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const scanButton = document.getElementById('scan-button');
const stopButton = document.getElementById('stop-button');
const cameraContainer = document.getElementById('camera-container');
const scanPlaceholder = document.getElementById('scan-placeholder');
const scanResult = document.getElementById('scan-result');
const resultContent = document.getElementById('result-content');
const remainingCountEl = document.getElementById('remaining-count');
const countdownEl = document.getElementById('countdown');
let scanning = false;
let stream = null;
let qrCodeToken = null;
let remainingCount = parseInt("{{ remaining_count }}") || 0;
const expiryTimeString = "{{ expiry_time }}";
const expiryTime = expiryTimeString ? new Date(expiryTimeString.replace(/-/g, '/')) : null;
let countdownInterval = null;
function updateCountdown() {
if (!expiryTime || isNaN(expiryTime.getTime())) {
countdownEl.textContent = "未设置";
return;
}
const now = new Date();
const diff = expiryTime - now;
if (diff <= 0) {
countdownEl.textContent = "已过期";
if(countdownInterval) clearInterval(countdownInterval);
scanButton.disabled = true;
scanButton.classList.add('disabled');
return;
}
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
let timeText = "";
if (days > 0) {
timeText += `${days}天`;
}
timeText += `${String(hours).padStart(2, '0')}时${String(minutes).padStart(2, '0')}分${String(seconds).padStart(2, '0')}秒`;
countdownEl.textContent = timeText;
}
updateCountdown();
if (expiryTime && !isNaN(expiryTime.getTime())) {
countdownInterval = setInterval(updateCountdown, 1000);
}
function showMessage(message, type = 'info') {
const messageContainer = document.body;
const messageDiv = document.createElement('div');
let bgColor = 'bg-info';
let textColor = 'text-white';
switch(type) {
case 'success': bgColor = 'bg-success'; break;
case 'error': bgColor = 'bg-danger'; break;
case 'warning': bgColor = 'bg-warning'; textColor = 'text-dark'; break;
}
messageDiv.className = `alert ${bgColor} ${textColor} position-fixed top-0 start-50 translate-middle-x mt-3 p-2 rounded shadow-sm fade show`;
messageDiv.style.zIndex = '1055';
messageDiv.style.minWidth = '200px';
messageDiv.style.textAlign = 'center';
messageDiv.setAttribute('role', 'alert');
messageDiv.textContent = message;
messageContainer.appendChild(messageDiv);
setTimeout(() => {
messageDiv.classList.remove('show');
setTimeout(() => messageDiv.remove(), 150);
}, 3000);
console.log(`${type}: ${message}`);
}
scanButton.addEventListener('click', startScanning);
stopButton.addEventListener('click', stopScanning);
function startScanning() {
if (scanning) return;
if (remainingCount <= 0) {
showMessage('剩余次数已用完，无法继续扫码', 'warning');
return;
}
if (!expiryTime || isNaN(expiryTime.getTime()) || expiryTime <= new Date()) {
showMessage('此外链已过期或无效，无法扫码', 'warning');
return;
}
cameraContainer.style.display = 'flex';
scanPlaceholder.style.display = 'none';
scanResult.style.display = 'none';
scanButton.style.display = 'none';
stopButton.style.display = 'block';
navigator.mediaDevices.getUserMedia({
video: {
facingMode: 'environment',
width: { ideal: 1920 },
height: { ideal: 1080 }
}
})
.then(function(mediaStream) {
stream = mediaStream;
video.srcObject = mediaStream;
video.setAttribute('playsinline', true);
video.play();
scanning = true;
requestAnimationFrame(tick);
})
.catch(function(error) {
console.error('无法访问摄像头: ', error);
if (error.name === 'NotAllowedError') {
showMessage('请授予摄像头访问权限', 'error');
} else if (error.name === 'NotFoundError' || error.name === 'DevicesNotFoundError') {
showMessage('未找到可用的摄像头设备', 'error');
} else {
showMessage('无法启动摄像头', 'error');
}
resetScanUI();
});
}
function stopScanning() {
if (!scanning) return;
if (stream) {
stream.getTracks().forEach(track => {
track.stop();
});
stream = null;
}
scanning = false;
resetScanUI();
}
function resetScanUI() {
cameraContainer.style.display = 'none';
scanPlaceholder.style.display = 'flex';
scanResult.style.display = 'none';
stopButton.style.display = 'none';
scanButton.style.display = 'block';
if (remainingCount > 0 && expiryTime && expiryTime > new Date()) {
scanButton.disabled = false;
scanButton.classList.remove('disabled');
}
}
function tick() {
if (!scanning || !video.srcObject || video.paused || video.ended) return;
if (video.readyState === video.HAVE_ENOUGH_DATA) {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
if (code && code.data) {
handleScanResult(code.data);
stopScanning();
return;
}
}
requestAnimationFrame(tick);
}
function handleScanResult(data) {
cameraContainer.style.display = 'none';
scanPlaceholder.style.display = 'none';
scanResult.style.display = 'flex';
resultContent.textContent = "正在验证...";
try {
const urlParams = new URLSearchParams(data.substring(data.indexOf('?') + 1));
qrCodeToken = urlParams.get('token');
if (qrCodeToken) {
callLoginAPI(qrCodeToken);
} else {
console.error("无法从二维码中提取token: ", data);
showMessage("二维码格式无效或无法识别", 'error');
resultContent.textContent = "二维码格式无效";
setTimeout(resetScanUI, 2000);
}
} catch (e) {
console.error("处理二维码内容失败:", e, "Data:", data);
showMessage("处理二维码内容失败", 'error');
resultContent.textContent = "无法处理扫描内容";
setTimeout(resetScanUI, 2000);
}
}
function callLoginAPI(token) {
resultContent.textContent = "正在登录...";
fetch('/login', {
method: 'POST',
headers: {
"Content-Type": "application/json; charset=utf-8"
},
body: JSON.stringify({"token": token, "link_uuid": "{{ link_info.link_uuid }}"}),
})
.then(response => {
if (!response.ok) {
return response.json().then(errData => {
throw new Error(errData.message || `HTTP error! status: ${response.status}`);
}).catch(() => {
throw new Error(`HTTP error! status: ${response.status}`);
});
}
return response.json();
})
.then(data => {
if (data && data.status) {
remainingCount--;
remainingCountEl.textContent = parseInt(remainingCount);
resultContent.textContent = "登录成功！";
showMessage("登录成功！", 'success');
if (remainingCount <= 0) {
scanButton.disabled = true;
scanButton.classList.add('disabled');
showMessage("剩余次数已用完", 'warning');
}
} else {
resultContent.textContent = "登录失败: " + (data.message || "未知错误");
showMessage("登录失败: " + (data.message || "未知错误"), 'error');
setTimeout(resetScanUI, 3000);
}
})
.catch(error => {
console.error("登录请求失败:", error);
resultContent.textContent = "登录请求失败";
showMessage(`登录请求失败: ${error.message}`, 'error');
setTimeout(resetScanUI, 3000);
});
}
if (remainingCount <= 0) {
scanButton.disabled = true;
scanButton.classList.add('disabled');
showMessage("此链接剩余次数已用完", "warning");
}
if (expiryTime && expiryTime <= new Date()) {
scanButton.disabled = true;
scanButton.classList.add('disabled');
}
});
</script>
</body>
</html>

6
templates/index.html
View File

@ -155,13 +155,13 @@
</div>
</footer>
<!-- 引入Element UI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script src="static/js/app.js"></script>
<script>
var vConsole = new window.VConsole();
//var vConsole = new window.VConsole();
//将控制台输出重定向到我们的调试容器
vConsole.execInContext(document.getElementById('debug-output'));
//vConsole.execInContext(document.getElementById('debug-output'));
</script>
</body>
</html>