暂无App
'; - return; - } - - appList.innerHTML = ''; - apps.forEach(app => { - const appItem = document.createElement('div'); - appItem.className = 'app-item'; - - const appInfo = document.createElement('div'); - appInfo.className = 'app-info'; - - const appName = document.createElement('h3'); - appName.textContent = app.name; - - const appDate = document.createElement('p'); - appDate.textContent = `上传时间：${app.date}`; - - const downloadBtn = document.createElement('button'); - downloadBtn.className = 'download-btn'; - downloadBtn.textContent = '下载'; - downloadBtn.onclick = () => downloadApp(app.id, app.fileName); - - const copyLinkBtn = document.createElement('button'); - copyLinkBtn.className = 'download-btn'; - copyLinkBtn.textContent = '复制直链'; - copyLinkBtn.onclick = () => copyDirectLink(app.id, app.fileName); - - 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(copyLinkBtn); - - appItem.appendChild(buttonsContainer); - appList.appendChild(appItem); - }); - }) - .catch(error => { - console.error('获取App列表失败:', error); - appList.innerHTML = '获取App列表失败
'; + try { + showLoading(); + + 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 = '暂无App
'; + return; + } + + appList.innerHTML = ''; + apps.forEach(app => { + const appItem = document.createElement('div'); + appItem.className = 'app-item'; + + const appInfo = document.createElement('div'); + appInfo.className = 'app-info'; + + const appName = document.createElement('h3'); + appName.textContent = app.name; + + const appDate = document.createElement('p'); + appDate.textContent = `上传时间：${app.date}`; + + const downloadBtn = document.createElement('button'); + downloadBtn.className = 'download-btn'; + downloadBtn.textContent = '下载'; + downloadBtn.onclick = () => downloadApp(app.id, app.fileName); + + const copyLinkBtn = document.createElement('button'); + copyLinkBtn.className = 'download-btn'; + copyLinkBtn.textContent = '复制直链'; + copyLinkBtn.onclick = () => copyDirectLink(app.id, app.fileName); + + 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(copyLinkBtn); + + appItem.appendChild(buttonsContainer); + appList.appendChild(appItem); + }); + } catch (error) { + console.error('获取App列表失败:', error); + appList.innerHTML = `获取App列表失败：${error.message}
`; + } finally { + hideLoading(); + } } // 上传App -function uploadApp() { +async function uploadApp() { let appName = document.getElementById('appName').value; const appFile = document.getElementById('appFile').files[0]; const message = document.getElementById('uploadMessage'); @@ -135,15 +181,25 @@ function uploadApp() { formData.append('name', appName); formData.append('file', appFile); - fetch(`${API_BASE_URL}/apps`, { - method: 'POST', - body: formData - }) - .then(response => response.json()) - .then(result => { + try { + message.textContent = '上传中...'; + message.style.color = '#0000ff'; + + 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 = '#0000ff'; + message.style.color = '#008000'; loadAppList(); // 清空表单 document.getElementById('appName').value = ''; @@ -152,22 +208,26 @@ function uploadApp() { message.textContent = '上传失败：' + (result.message || '未知错误'); message.style.color = '#ff0000'; } - }) - .catch(error => { + } catch (error) { console.error('上传失败:', error); - message.textContent = '上传失败，请重试！'; + message.textContent = '上传失败：' + error.message; message.style.color = '#ff0000'; - }); + } } // 下载App function downloadApp(appId, fileName) { - 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); + 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); + } } // 复制直链 @@ -202,6 +262,7 @@ function copyDirectLink(appId, fileName) { }) .catch(err => { console.error('复制失败:', err); + alert('复制失败：' + err.message); }); } diff --git a/style.css b/style.css index 9c764c3..726c318 100644 --- a/style.css +++ b/style.css @@ -50,6 +50,16 @@ button { padding: 10px 20px; cursor: pointer; font-size: 14px; + background-color: #fff; + transition: background-color 0.2s; +} + +button:hover { + background-color: #f0f0f0; +} + +button:active { + background-color: #e0e0e0; } p { @@ -90,6 +100,12 @@ p { font-size: 12px; } +#loadingIndicator { + font-size: 12px; + color: #666; +} + +/* 响应式设计 */ @media (max-width: 600px) { .container { margin: 10px; @@ -108,4 +124,9 @@ p { .download-btn { margin-top: 10px; } + + /* 刷新按钮和加载状态在移动端的适配 */ + #downloadSection h2 { + margin-bottom: 10px; + } } \ No newline at end of file