355 lines
12 KiB
JavaScript
355 lines
12 KiB
JavaScript
// 配置常量定义
|
||
const ADMIN_PASSWORD = 'admin123'; // 管理员密码
|
||
const API_BASE_URL = 'http://localhost:6903/api'; // 后端API基础URL
|
||
|
||
// 初始化函数，页面加载完成后执行
|
||
function init() {
|
||
checkLoginStatus(); // 检查登录状态
|
||
loadAppList(); // 加载App列表
|
||
getDoc(); // 获取文档内容
|
||
}
|
||
|
||
// 检查登录状态函数
|
||
function checkLoginStatus() {
|
||
// 从本地存储获取登录状态
|
||
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
|
||
if (isLoggedIn) {
|
||
showUploadSection(); // 如果已登录，显示上传区域
|
||
}
|
||
}
|
||
|
||
// 登录功能函数
|
||
function login() {
|
||
const password = document.getElementById('password').value; // 获取输入的密码
|
||
const message = document.getElementById('loginMessage'); // 获取登录消息元素
|
||
|
||
// 验证密码是否为空
|
||
if (!password.trim()) {
|
||
message.textContent = '密码不能为空！';
|
||
message.style.color = '#ff0000';
|
||
return;
|
||
}
|
||
|
||
// 验证密码是否正确
|
||
if (password === ADMIN_PASSWORD) {
|
||
localStorage.setItem('isLoggedIn', 'true'); // 保存登录状态到本地存储
|
||
showUploadSection(); // 显示上传区域
|
||
message.textContent = '登录成功！';
|
||
message.style.color = '#008000';
|
||
document.getElementById('password').value = ''; // 清空密码输入框
|
||
} else {
|
||
message.textContent = '密码错误，请重试！';
|
||
message.style.color = '#ff0000';
|
||
}
|
||
}
|
||
|
||
// 显示上传区域函数
|
||
function showUploadSection() {
|
||
document.getElementById('loginSection').style.display = 'none'; // 隐藏登录区域
|
||
document.getElementById('uploadSection').style.display = 'block'; // 显示上传区域
|
||
const loginSection = document.getElementById('loginSection');
|
||
|
||
// 检查是否已经添加了退出按钮，避免重复添加
|
||
if (!loginSection.querySelector('.logout-btn')) {
|
||
const logoutBtn = document.createElement('button'); // 创建退出按钮
|
||
logoutBtn.textContent = '退出登录';
|
||
logoutBtn.className = 'logout-btn';
|
||
logoutBtn.onclick = logout; // 绑定退出登录事件
|
||
loginSection.appendChild(logoutBtn); // 添加按钮到登录区域
|
||
}
|
||
}
|
||
|
||
// 退出登录函数
|
||
function logout() {
|
||
localStorage.removeItem('isLoggedIn'); // 清除本地存储中的登录状态
|
||
location.reload(); // 刷新页面
|
||
}
|
||
|
||
// 显示加载状态函数
|
||
function showLoading() {
|
||
const loadingIndicator = document.getElementById('loadingIndicator');
|
||
if (loadingIndicator) {
|
||
loadingIndicator.style.display = 'inline'; // 显示加载指示器
|
||
}
|
||
}
|
||
|
||
// 隐藏加载状态函数
|
||
function hideLoading() {
|
||
const loadingIndicator = document.getElementById('loadingIndicator');
|
||
if (loadingIndicator) {
|
||
loadingIndicator.style.display = 'none'; // 隐藏加载指示器
|
||
}
|
||
}
|
||
|
||
// 刷新App列表函数
|
||
function refreshAppList() {
|
||
loadAppList(); // 调用加载App列表函数
|
||
}
|
||
|
||
// 加载App列表函数
|
||
async function loadAppList() {
|
||
const appList = document.getElementById('appList'); // 获取App列表容器
|
||
|
||
try {
|
||
showLoading(); // 显示加载状态
|
||
|
||
// 发送GET请求获取App列表
|
||
const response = await fetch(`${API_BASE_URL}/apps`, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Accept': 'application/json'
|
||
},
|
||
timeout: 10000 // 10秒超时设置
|
||
});
|
||
|
||
// 检查响应状态
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP错误！状态：${response.status}`);
|
||
}
|
||
|
||
const apps = await response.json(); // 解析响应数据
|
||
|
||
// 处理空列表情况
|
||
if (apps.length === 0) {
|
||
appList.innerHTML = '<p style="text-align: center;">暂无App</p>';
|
||
return;
|
||
}
|
||
|
||
// 清空列表并重新渲染
|
||
appList.innerHTML = '';
|
||
apps.forEach(app => {
|
||
const appItem = document.createElement('div'); // 创建App项元素
|
||
appItem.className = 'app-item';
|
||
|
||
const appInfo = document.createElement('div'); // 创建App信息容器
|
||
appInfo.className = 'app-info';
|
||
|
||
const appName = document.createElement('h3'); // 创建App名称元素
|
||
appName.textContent = app.name;
|
||
|
||
const appDate = document.createElement('p'); // 创建App日期元素
|
||
appDate.textContent = `上传时间：${app.date}`;
|
||
|
||
const downloadBtn = document.createElement('button'); // 创建下载按钮
|
||
downloadBtn.className = 'download-btn';
|
||
downloadBtn.textContent = '下载';
|
||
downloadBtn.onclick = () => downloadApp(app.id, app.fileName);
|
||
|
||
const deleteBtn = document.createElement('button'); // 创建删除按钮
|
||
deleteBtn.className = 'download-btn';
|
||
deleteBtn.textContent = '删除';
|
||
deleteBtn.onclick = () => deleteApp(app.id);
|
||
|
||
const copyLinkBtn = document.createElement('button'); // 创建复制直链按钮
|
||
copyLinkBtn.className = 'download-btn';
|
||
copyLinkBtn.textContent = '复制直链';
|
||
copyLinkBtn.onclick = () => copyDirectLink(app.id, app.fileName);
|
||
|
||
// 组装App项
|
||
appInfo.appendChild(appName);
|
||
appInfo.appendChild(appDate);
|
||
appItem.appendChild(appInfo);
|
||
|
||
// 创建按钮容器并添加按钮
|
||
const buttonsContainer = document.createElement('div');
|
||
buttonsContainer.style.display = 'flex';
|
||
buttonsContainer.style.gap = '10px';
|
||
buttonsContainer.appendChild(downloadBtn);
|
||
buttonsContainer.appendChild(deleteBtn);
|
||
buttonsContainer.appendChild(copyLinkBtn);
|
||
|
||
appItem.appendChild(buttonsContainer);
|
||
appList.appendChild(appItem);
|
||
});
|
||
} catch (error) {
|
||
console.error('获取App列表失败:', error);
|
||
appList.innerHTML = `<p style="color: #ff0000; text-align: center;">获取App列表失败：${error.message}</p>`;
|
||
} finally {
|
||
hideLoading(); // 无论成功失败，都隐藏加载状态
|
||
}
|
||
}
|
||
|
||
// 上传App函数
|
||
async function uploadApp() {
|
||
let appName = document.getElementById('appName').value; // 获取App名称
|
||
const appFile = document.getElementById('appFile').files[0]; // 获取选择的文件
|
||
const message = document.getElementById('uploadMessage'); // 获取上传消息元素
|
||
|
||
// 验证文件是否选择
|
||
if (!appFile) {
|
||
message.textContent = '请选择文件！';
|
||
message.style.color = '#ff0000';
|
||
return;
|
||
}
|
||
|
||
// 验证文件大小（限制1GB）
|
||
if (appFile.size > 100 * 1024 * 1024 * 1024) { // 限制1000MB
|
||
message.textContent = '文件大小不能超过1GB！';
|
||
message.style.color = '#ff0000';
|
||
return;
|
||
}
|
||
|
||
// 如果App名称为空，使用文件名作为默认值
|
||
if (!appName.trim()) {
|
||
// 去除文件扩展名
|
||
appName = appFile.name.replace(/\.[^/.]+$/, '');
|
||
}
|
||
|
||
// 创建FormData对象，用于发送文件
|
||
const formData = new FormData();
|
||
formData.append('name', appName);
|
||
formData.append('file', appFile);
|
||
|
||
try {
|
||
message.textContent = '上传中...';
|
||
message.style.color = '#0000ff';
|
||
|
||
// 发送POST请求上传文件
|
||
const response = await fetch(`${API_BASE_URL}/apps`, {
|
||
method: 'POST',
|
||
body: formData,
|
||
timeout: 30000 // 30秒超时设置
|
||
});
|
||
|
||
// 检查响应状态
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP错误！状态：${response.status}`);
|
||
}
|
||
|
||
const result = await response.json(); // 解析响应数据
|
||
|
||
// 处理上传结果
|
||
if (result.success) {
|
||
message.textContent = '上传成功！';
|
||
message.style.color = '#008000';
|
||
loadAppList(); // 重新加载App列表
|
||
// 清空表单
|
||
document.getElementById('appName').value = '';
|
||
document.getElementById('appFile').value = '';
|
||
} else {
|
||
message.textContent = '上传失败：' + (result.message || '未知错误');
|
||
message.style.color = '#ff0000';
|
||
}
|
||
} catch (error) {
|
||
console.error('上传失败:', error);
|
||
message.textContent = '上传失败：' + error.message;
|
||
message.style.color = '#ff0000';
|
||
}
|
||
}
|
||
|
||
// 删除App函数
|
||
function deleteApp(appId) {
|
||
// 显示确认对话框，包含特殊问题验证
|
||
if (!confirm('如果确定删除此APP,请将矩阵 A = [[3,1,0],[1,2,1],[0,1,1]]的特征值、特征向量，并验证A是正定矩阵的解题步骤做出来，然后我也没做')) {
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 下载App函数
|
||
function downloadApp(appId, fileName) {
|
||
try {
|
||
// 创建下载链接并触发点击
|
||
const link = document.createElement('a');
|
||
link.href = `${API_BASE_URL}/apps/${appId}`;
|
||
link.download = fileName;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
} catch (error) {
|
||
console.error('下载失败:', error);
|
||
alert('下载失败：' + error.message);
|
||
}
|
||
}
|
||
|
||
// 复制直链函数
|
||
function copyDirectLink(appId, fileName) {
|
||
const directLink = `${API_BASE_URL}/apps/${appId}`; // 生成直链URL
|
||
|
||
// 复制到剪贴板
|
||
navigator.clipboard.writeText(directLink)
|
||
.then(() => {
|
||
// 显示复制成功提示
|
||
const message = document.createElement('div');
|
||
message.textContent = '直链已复制到剪贴板！';
|
||
message.style.cssText = `
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: #000;
|
||
color: #fff;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
font-size: 14px;
|
||
z-index: 1000;
|
||
`;
|
||
|
||
document.body.appendChild(message);
|
||
|
||
// 3秒后移除提示
|
||
setTimeout(() => {
|
||
document.body.removeChild(message);
|
||
}, 3000);
|
||
})
|
||
.catch(err => {
|
||
console.error('复制失败:', err);
|
||
alert('复制失败：' + err.message);
|
||
});
|
||
}
|
||
|
||
// 获取文档内容的API调用函数
|
||
async function getDocApi() {
|
||
try {
|
||
showLoading(); // 显示加载状态
|
||
|
||
const docContent = document.getElementById('docContent'); // 获取文档内容容器
|
||
docContent.innerHTML = ``; // 清空现有内容
|
||
|
||
// 发送GET请求获取文档
|
||
const response = await fetch(`${API_BASE_URL}/docs`, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Accept': 'application/json'
|
||
},
|
||
timeout: 10000 // 10秒超时设置
|
||
});
|
||
|
||
// 检查响应状态
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP错误！状态：${response.status}`);
|
||
}
|
||
|
||
const docs = await response.json(); // 解析响应数据
|
||
|
||
// 处理空文档情况
|
||
if (docs.length === 0) {
|
||
docContent.innerHTML = '<p style="text-align: center;">暂无文档</p>';
|
||
return;
|
||
}
|
||
|
||
// 渲染文档列表
|
||
for (let i = 0; i < docs.length; i++) {
|
||
const doc = docs[i];
|
||
const docItem = document.createElement('div'); // 创建文档项元素
|
||
docItem.className = 'doc-item';
|
||
docItem.innerHTML = `
|
||
<p>${doc.docBody}</p>
|
||
`;
|
||
docContent.appendChild(docItem); // 添加到文档容器
|
||
}
|
||
|
||
}
|
||
catch (error) {
|
||
console.error('获取文档失败:', error);
|
||
docContent.innerHTML = '<p style="text-align: center;">获取文档失败：' + error.message + '</p>';
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 获取文档内容的入口函数
|
||
function getDoc() {
|
||
getDocApi(); // 调用API获取文档
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
window.onload = init; |