init
This commit is contained in:
tao.chen
@@ -0,0 +1,874 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>临时文件上传 · TTL 24h</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f1115;
|
||||
--panel: #1a1d24;
|
||||
--panel-2: #232732;
|
||||
--border: #2c3140;
|
||||
--text: #e6e8ee;
|
||||
--text-dim: #8a92a3;
|
||||
--primary: #5b8cff;
|
||||
--primary-hover: #4a7af0;
|
||||
--success: #4ade80;
|
||||
--danger: #f87171;
|
||||
--warning: #fbbf24;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
padding: 40px 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.container { max-width: 880px; margin: 0 auto; }
|
||||
header { text-align: center; margin-bottom: 32px; }
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(90deg, #5b8cff, #a78bfa);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.subtitle { color: var(--text-dim); font-size: 14px; }
|
||||
.badge {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
padding: 2px 8px;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--warning);
|
||||
-webkit-text-fill-color: var(--warning);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* Drop zone */
|
||||
.dropzone {
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 48px 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: var(--panel-2);
|
||||
user-select: none;
|
||||
}
|
||||
.dropzone:hover, .dropzone.dragover, .dropzone:focus-visible {
|
||||
border-color: var(--primary);
|
||||
background: rgba(91, 140, 255, 0.05);
|
||||
outline: none;
|
||||
}
|
||||
.dropzone .icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.dropzone .hint { color: var(--text-dim); font-size: 13px; margin-top: 6px; }
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn:hover { background: var(--primary-hover); }
|
||||
.btn:disabled { background: var(--text-dim); cursor: not-allowed; }
|
||||
.btn.ghost { background: var(--panel-2); }
|
||||
.btn.danger { background: var(--danger); }
|
||||
.btn-row { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
|
||||
|
||||
/* Progress */
|
||||
.progress-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
|
||||
.progress-item {
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.progress-item.done { border-color: var(--success); }
|
||||
.progress-item.error { border-color: var(--danger); }
|
||||
.progress-item-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
.progress-item-head .name {
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.progress-item-head .size-info { font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||||
.progress-item-head .status {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.progress-item.done .status { background: var(--success); color: #0f1115; }
|
||||
.progress-item.error .status { background: var(--danger); color: #0f1115; }
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar > div {
|
||||
height: 100%;
|
||||
background: var(--primary);
|
||||
width: 0%;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
.progress-item.done .progress-bar > div { background: var(--success); width: 100% !important; }
|
||||
.progress-item.error .progress-bar > div { background: var(--danger); }
|
||||
.progress-item-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.progress-item-actions button {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
border-radius: 4px;
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.progress-item-actions button:hover { color: var(--text); border-color: var(--text-dim); }
|
||||
|
||||
/* File list */
|
||||
.files-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
.files-header h2 { font-size: 16px; font-weight: 600; }
|
||||
.files-header .meta { font-size: 12px; color: var(--text-dim); }
|
||||
|
||||
/* Quota */
|
||||
.quota-wrap { margin-bottom: 16px; }
|
||||
.quota-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.quota-row .quota-text strong { color: var(--text); font-variant-numeric: tabular-nums; }
|
||||
.quota-row .quota-text.warn strong { color: var(--warning); }
|
||||
.quota-row .quota-text.danger strong { color: var(--danger); }
|
||||
.quota-bar {
|
||||
height: 6px;
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.quota-bar > div {
|
||||
height: 100%;
|
||||
background: var(--success);
|
||||
width: 0%;
|
||||
transition: width 0.3s, background 0.3s;
|
||||
}
|
||||
.quota-bar.warn > div { background: var(--warning); }
|
||||
.quota-bar.danger > div { background: var(--danger); }
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.file-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
background: var(--panel);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.file-info { flex: 1; min-width: 0; }
|
||||
.file-name {
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.file-meta .ttl { color: var(--warning); font-variant-numeric: tabular-nums; }
|
||||
.file-meta .ttl.danger { color: var(--danger); }
|
||||
.file-actions { display: flex; gap: 6px; }
|
||||
.icon-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon-btn:hover { background: var(--primary); border-color: var(--primary); }
|
||||
.icon-btn.danger:hover { background: var(--danger); border-color: var(--danger); }
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
}
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, var(--panel-2) 0%, var(--border) 50%, var(--panel-2) 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
border-radius: 6px;
|
||||
height: 56px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transition: all 0.2s;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
max-width: 360px;
|
||||
}
|
||||
.toast.show { opacity: 1; transform: translateY(0); }
|
||||
.toast.success { border-left: 3px solid var(--success); }
|
||||
.toast.error { border-left: 3px solid var(--danger); }
|
||||
.toast.info { border-left: 3px solid var(--primary); }
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.total-progress {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
min-width: 120px;
|
||||
}
|
||||
.total-progress > div {
|
||||
height: 100%;
|
||||
background: var(--primary);
|
||||
width: 0%;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
.total-label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>临时文件传输<span class="badge">TTL 24h</span></h1>
|
||||
<div class="subtitle">上传后 24 小时内有效 · 被下载会自动续期 · 自动清理</div>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
<div class="dropzone" id="dropzone" tabindex="0" role="button" aria-label="选择或拖拽文件上传">
|
||||
<div class="icon">⬆</div>
|
||||
<div><strong>点击选择文件</strong> 或将文件拖拽到此处</div>
|
||||
<div class="hint">支持多文件 · 受配额限制</div>
|
||||
</div>
|
||||
<input type="file" id="fileInput" multiple hidden />
|
||||
|
||||
<div class="progress-list" id="progressList"></div>
|
||||
|
||||
<div class="btn-row" id="actionRow" style="display:none">
|
||||
<div class="total-progress" id="totalProgress" style="display:none"><div></div></div>
|
||||
<span class="total-label" id="totalLabel" style="display:none"></span>
|
||||
<button class="btn" id="uploadBtn">开始上传</button>
|
||||
<button class="btn ghost" id="clearBtn">清空</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="files-header">
|
||||
<h2>文件列表</h2>
|
||||
<span class="meta" id="filesMeta">加载中...</span>
|
||||
</div>
|
||||
<div class="quota-wrap" id="quotaWrap" style="display:none">
|
||||
<div class="quota-row">
|
||||
<span class="quota-text" id="quotaText">--</span>
|
||||
<span id="quotaPercent">--</span>
|
||||
</div>
|
||||
<div class="quota-bar" id="quotaBar"><div></div></div>
|
||||
</div>
|
||||
<div id="filesList">
|
||||
<div class="skeleton"></div>
|
||||
<div class="skeleton"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>每个文件 TTL 默认 24 小时, 后台每小时扫描清理 · 每次下载会重置过期时间</footer>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const $ = id => document.getElementById(id);
|
||||
|
||||
const dropzone = $('dropzone');
|
||||
const fileInput = $('fileInput');
|
||||
const progressList = $('progressList');
|
||||
const actionRow = $('actionRow');
|
||||
const uploadBtn = $('uploadBtn');
|
||||
const clearBtn = $('clearBtn');
|
||||
const filesList = $('filesList');
|
||||
const filesMeta = $('filesMeta');
|
||||
const quotaWrap = $('quotaWrap');
|
||||
const quotaText = $('quotaText');
|
||||
const quotaPercent = $('quotaPercent');
|
||||
const quotaBar = $('quotaBar');
|
||||
const toastEl = $('toast');
|
||||
const totalProgress= $('totalProgress');
|
||||
const totalLabel = $('totalLabel');
|
||||
|
||||
// pending[i] = { id, file, xhr, status: 'pending'|'uploading'|'done'|'error'|'cancelled', progress, error }
|
||||
let pending = [];
|
||||
let nextId = 1;
|
||||
let isUploading = false;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Toast
|
||||
// ---------------------------------------------------------------------------
|
||||
let toastTimer = null;
|
||||
function toast(msg, type) {
|
||||
toastEl.textContent = msg;
|
||||
toastEl.className = 'toast show ' + (type || 'info');
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => toastEl.classList.remove('show'), 2400);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Drop zone (用 counter 解决子元素上 dragleave 反复触发的 bug)
|
||||
// ---------------------------------------------------------------------------
|
||||
let dragCounter = 0;
|
||||
dropzone.addEventListener('dragenter', e => {
|
||||
e.preventDefault();
|
||||
dragCounter++;
|
||||
dropzone.classList.add('dragover');
|
||||
});
|
||||
dropzone.addEventListener('dragover', e => e.preventDefault());
|
||||
dropzone.addEventListener('dragleave', e => {
|
||||
e.preventDefault();
|
||||
dragCounter--;
|
||||
if (dragCounter <= 0) {
|
||||
dragCounter = 0;
|
||||
dropzone.classList.remove('dragover');
|
||||
}
|
||||
});
|
||||
dropzone.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
dragCounter = 0;
|
||||
dropzone.classList.remove('dragover');
|
||||
if (e.dataTransfer && e.dataTransfer.files) addFiles(e.dataTransfer.files);
|
||||
});
|
||||
fileInput.addEventListener('change', e => {
|
||||
addFiles(e.target.files);
|
||||
// reset 后允许重复选择同一文件
|
||||
e.target.value = '';
|
||||
});
|
||||
|
||||
// 点击 / 键盘 触发文件选择
|
||||
dropzone.addEventListener('click', () => fileInput.click());
|
||||
dropzone.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
fileInput.click();
|
||||
}
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Pending list
|
||||
// ---------------------------------------------------------------------------
|
||||
function addFiles(fileList) {
|
||||
for (const f of fileList) {
|
||||
pending.push({
|
||||
id: nextId++,
|
||||
file: f,
|
||||
xhr: null,
|
||||
status: 'pending',
|
||||
progress: 0,
|
||||
loaded: 0,
|
||||
});
|
||||
}
|
||||
renderPending();
|
||||
}
|
||||
|
||||
function renderPending() {
|
||||
progressList.innerHTML = '';
|
||||
if (pending.length === 0) {
|
||||
actionRow.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
actionRow.style.display = 'flex';
|
||||
|
||||
pending.forEach(item => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'progress-item';
|
||||
if (item.status === 'done') div.classList.add('done');
|
||||
else if (item.status === 'error') div.classList.add('error');
|
||||
|
||||
const statusChar =
|
||||
item.status === 'done' ? '✓' :
|
||||
item.status === 'error' ? '✗' :
|
||||
item.status === 'cancelled' ? '⊘' : '';
|
||||
|
||||
const sizeInfo = item.file.size > 0
|
||||
? `${formatSize(item.loaded)} / ${formatSize(item.file.size)}`
|
||||
: formatSize(item.file.size);
|
||||
|
||||
div.innerHTML = `
|
||||
<div class="progress-item-head">
|
||||
<span class="name" title="${escapeHtml(item.file.name)}">${escapeHtml(item.file.name)}</span>
|
||||
<span class="size-info">${sizeInfo}</span>
|
||||
<span class="status">${statusChar}</span>
|
||||
</div>
|
||||
<div class="progress-bar"><div style="width:${item.progress}%"></div></div>
|
||||
<div class="progress-item-actions"></div>
|
||||
`;
|
||||
const actions = div.querySelector('.progress-item-actions');
|
||||
|
||||
if (item.status === 'pending' || item.status === 'uploading') {
|
||||
const cancel = document.createElement('button');
|
||||
cancel.textContent = item.status === 'uploading' ? '取消' : '移除';
|
||||
cancel.onclick = () => cancelItem(item.id);
|
||||
actions.appendChild(cancel);
|
||||
} else if (item.status === 'error' || item.status === 'cancelled') {
|
||||
const retry = document.createElement('button');
|
||||
retry.textContent = '重试';
|
||||
retry.onclick = () => {
|
||||
item.status = 'pending';
|
||||
item.progress = 0;
|
||||
item.loaded = 0;
|
||||
item.error = null;
|
||||
renderPending();
|
||||
};
|
||||
const remove = document.createElement('button');
|
||||
remove.textContent = '移除';
|
||||
remove.onclick = () => removeItem(item.id);
|
||||
actions.appendChild(retry);
|
||||
actions.appendChild(remove);
|
||||
} else if (item.status === 'done') {
|
||||
const remove = document.createElement('button');
|
||||
remove.textContent = '移除';
|
||||
remove.onclick = () => removeItem(item.id);
|
||||
actions.appendChild(remove);
|
||||
}
|
||||
progressList.appendChild(div);
|
||||
});
|
||||
|
||||
// 总进度
|
||||
const total = pending.length;
|
||||
const finished = pending.filter(p => p.status === 'done').length;
|
||||
if (isUploading && total > 0) {
|
||||
totalProgress.style.display = 'block';
|
||||
totalLabel.style.display = 'inline';
|
||||
const pct = Math.round(finished / total * 100);
|
||||
totalProgress.firstElementChild.style.width = pct + '%';
|
||||
totalLabel.textContent = `${finished} / ${total} · ${pct}%`;
|
||||
} else {
|
||||
totalProgress.style.display = 'none';
|
||||
totalLabel.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function cancelItem(id) {
|
||||
const item = pending.find(p => p.id === id);
|
||||
if (!item) return;
|
||||
if (item.xhr) {
|
||||
item.xhr.abort();
|
||||
item.status = 'cancelled';
|
||||
} else {
|
||||
removeItem(id);
|
||||
return;
|
||||
}
|
||||
renderPending();
|
||||
}
|
||||
|
||||
function removeItem(id) {
|
||||
const item = pending.find(p => p.id === id);
|
||||
if (item && item.xhr && item.xhr.readyState !== XMLHttpRequest.DONE) {
|
||||
item.xhr.abort();
|
||||
}
|
||||
pending = pending.filter(p => p.id !== id);
|
||||
renderPending();
|
||||
}
|
||||
|
||||
clearBtn.addEventListener('click', () => {
|
||||
// 取消所有进行中的上传
|
||||
pending.forEach(p => {
|
||||
if (p.xhr && p.xhr.readyState !== XMLHttpRequest.DONE) p.xhr.abort();
|
||||
});
|
||||
pending = [];
|
||||
isUploading = false;
|
||||
renderPending();
|
||||
uploadBtn.disabled = false;
|
||||
uploadBtn.textContent = '开始上传';
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Upload
|
||||
// ---------------------------------------------------------------------------
|
||||
uploadBtn.addEventListener('click', async () => {
|
||||
if (isUploading) return;
|
||||
const queue = pending.filter(p => p.status === 'pending' || p.status === 'error' || p.status === 'cancelled');
|
||||
if (queue.length === 0) {
|
||||
toast('没有可上传的文件', 'error');
|
||||
return;
|
||||
}
|
||||
await loadFiles();
|
||||
const totalSize = queue.reduce((s, i) => s + i.file.size, 0);
|
||||
if (quotaState.cap > 0 && totalSize > quotaState.cap - quotaState.used) {
|
||||
toast(`队列总大小 ${formatSize(totalSize)} 超过剩余配额 ${formatSize(quotaState.cap - quotaState.used)}`, 'error');
|
||||
return;
|
||||
}
|
||||
isUploading = true;
|
||||
uploadBtn.disabled = true;
|
||||
uploadBtn.textContent = '上传中...';
|
||||
|
||||
const tasks = queue.map(item => async () => {
|
||||
if (item.status !== 'pending' && item.status !== 'error' && item.status !== 'cancelled') return;
|
||||
item.status = 'uploading';
|
||||
item.progress = 0;
|
||||
item.loaded = 0;
|
||||
item.error = null;
|
||||
renderPending();
|
||||
try {
|
||||
await uploadOne(item);
|
||||
item.status = 'done';
|
||||
item.progress = 100;
|
||||
} catch (err) {
|
||||
if (err.name !== 'AbortError') {
|
||||
item.status = 'error';
|
||||
item.error = err && err.message || 'unknown';
|
||||
toast(`上传失败: ${item.file.name} - ${item.error}`, 'error');
|
||||
}
|
||||
}
|
||||
renderPending();
|
||||
});
|
||||
await runWithLimit(tasks, 3);
|
||||
|
||||
isUploading = false;
|
||||
uploadBtn.disabled = false;
|
||||
uploadBtn.textContent = '开始上传';
|
||||
await loadFiles();
|
||||
// 已完成的进度条 2.5s 后从 pending 移除, 避免列表里堆一堆"已完成"
|
||||
const doneItems = pending.filter(p => p.status === 'done');
|
||||
if (doneItems.length > 0) {
|
||||
setTimeout(() => {
|
||||
const doneIds = new Set(doneItems.map(p => p.id));
|
||||
pending = pending.filter(p => !doneIds.has(p.id));
|
||||
renderPending();
|
||||
}, 2500);
|
||||
}
|
||||
});
|
||||
|
||||
async function runWithLimit(tasks, limit) {
|
||||
const workers = Array.from({ length: limit }, async () => {
|
||||
while (true) {
|
||||
const t = tasks.shift();
|
||||
if (!t) return;
|
||||
await t();
|
||||
}
|
||||
});
|
||||
await Promise.all(workers);
|
||||
}
|
||||
|
||||
function uploadOne(item) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
item.xhr = xhr;
|
||||
const fd = new FormData();
|
||||
fd.append('file', item.file);
|
||||
xhr.open('POST', '/upload');
|
||||
xhr.upload.onprogress = e => {
|
||||
if (e.lengthComputable) {
|
||||
item.progress = Math.round(e.loaded / e.total * 100);
|
||||
item.loaded = e.loaded;
|
||||
renderPending();
|
||||
}
|
||||
};
|
||||
xhr.onload = () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
try { resolve(JSON.parse(xhr.responseText)); }
|
||||
catch { resolve({}); }
|
||||
} else {
|
||||
let msg = 'HTTP ' + xhr.status;
|
||||
try { msg = JSON.parse(xhr.responseText).error || msg; } catch {}
|
||||
reject(new Error(msg));
|
||||
}
|
||||
};
|
||||
xhr.onerror = () => reject(new Error('network error'));
|
||||
xhr.onabort = () => { const e = new Error('aborted'); e.name = 'AbortError'; reject(e); };
|
||||
xhr.send(fd);
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// File list
|
||||
// ---------------------------------------------------------------------------
|
||||
let loadSeq = 0;
|
||||
let quotaState = { cap: 0, used: 0 };
|
||||
async function loadFiles() {
|
||||
const my = ++loadSeq;
|
||||
try {
|
||||
const r = await fetch('/files');
|
||||
if (my !== loadSeq) return;
|
||||
const data = await r.json();
|
||||
filesMeta.textContent = `共 ${data.count} 个文件 · TTL ${data.ttl}`;
|
||||
renderQuota(data.quota);
|
||||
quotaState = data.quota;
|
||||
if (!data.files || data.files.length === 0) {
|
||||
filesList.innerHTML = '<div class="empty">暂无文件</div>';
|
||||
return;
|
||||
}
|
||||
filesList.innerHTML = '';
|
||||
data.files.sort((a, b) => new Date(b.mod_time) - new Date(a.mod_time));
|
||||
data.files.forEach(f => filesList.appendChild(fileRow(f)));
|
||||
} catch (e) {
|
||||
filesMeta.textContent = '加载失败';
|
||||
}
|
||||
}
|
||||
|
||||
function renderQuota(q) {
|
||||
if (!q || !q.cap) {
|
||||
quotaWrap.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
quotaWrap.style.display = 'block';
|
||||
const pct = q.cap > 0 ? Math.min(100, (q.used / q.cap) * 100) : 0;
|
||||
quotaText.innerHTML = `已用 <strong>${q.used_str || formatSize(q.used)}</strong> / ${q.cap_str || formatSize(q.cap)}`;
|
||||
quotaPercent.textContent = pct.toFixed(1) + '%';
|
||||
quotaBar.firstElementChild.style.width = pct + '%';
|
||||
// 颜色随占用率
|
||||
quotaBar.classList.remove('warn', 'danger');
|
||||
quotaText.classList.remove('warn', 'danger');
|
||||
if (pct >= 95) { quotaBar.classList.add('danger'); quotaText.classList.add('danger'); }
|
||||
else if (pct >= 80) { quotaBar.classList.add('warn'); quotaText.classList.add('warn'); }
|
||||
}
|
||||
|
||||
function fileRow(f) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'file-item';
|
||||
const ext = (f.filename.split('.').pop() || '').toLowerCase();
|
||||
const ttlHtml = `<span class="ttl" data-expires="${f.expires_at}">${formatRemain(f.expires_at)}</span>`;
|
||||
div.innerHTML = `
|
||||
<div class="file-icon">${iconFor(ext)}</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name" title="${escapeHtml(f.filename)}">${escapeHtml(f.filename)}</div>
|
||||
<div class="file-meta">
|
||||
<span>${formatSize(f.size)}</span>
|
||||
<span>·</span>
|
||||
${ttlHtml}
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<button class="icon-btn" title="复制链接" data-url="${escapeHtml(f.url)}">⎘</button>
|
||||
<a class="icon-btn" title="下载" href="${escapeHtml(f.url)}" download>↓</a>
|
||||
<button class="icon-btn danger" title="删除" data-delete="${escapeHtml(f.filename)}">✕</button>
|
||||
</div>
|
||||
`;
|
||||
div.querySelector('[data-url]').onclick = () => copyToClipboard(location.origin + f.url);
|
||||
div.querySelector('[data-delete]').onclick = () => deleteFile(f.filename, div);
|
||||
return div;
|
||||
}
|
||||
|
||||
async function deleteFile(filename, rowEl) {
|
||||
if (!confirm(`确定删除 "${filename}" 吗? 该操作不可撤销.`)) return;
|
||||
rowEl.style.opacity = '0.4';
|
||||
rowEl.style.pointerEvents = 'none';
|
||||
try {
|
||||
const r = await fetch('/files/' + encodeURIComponent(filename), { method: 'DELETE' });
|
||||
if (r.status === 404) {
|
||||
toast('文件已不存在 (可能已过期被清理)', 'error');
|
||||
await loadFiles();
|
||||
return;
|
||||
}
|
||||
if (!r.ok) {
|
||||
let msg = 'HTTP ' + r.status;
|
||||
try { msg = (await r.json()).error || msg; } catch {}
|
||||
throw new Error(msg);
|
||||
}
|
||||
toast(`已删除: ${filename}`, 'success');
|
||||
await loadFiles();
|
||||
} catch (e) {
|
||||
rowEl.style.opacity = '';
|
||||
rowEl.style.pointerEvents = '';
|
||||
toast('删除失败: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function copyToClipboard(text) {
|
||||
// 兼容 HTTP 环境: clipboard API 不可用时用 fallback
|
||||
try {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
toast('链接已复制', 'success');
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
// fallback: 临时 textarea
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.style.position = 'fixed';
|
||||
ta.style.opacity = '0';
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try {
|
||||
const ok = document.execCommand('copy');
|
||||
toast(ok ? '链接已复制' : '复制失败, 请手动复制', ok ? 'success' : 'error');
|
||||
} catch {
|
||||
toast('复制失败, 请手动复制', 'error');
|
||||
} finally {
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 倒计时: 每秒刷新一次剩余时间
|
||||
// ---------------------------------------------------------------------------
|
||||
setInterval(() => {
|
||||
document.querySelectorAll('[data-expires]').forEach(el => {
|
||||
el.textContent = formatRemain(el.dataset.expires);
|
||||
el.classList.toggle('danger', isAlmostExpired(el.dataset.expires));
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
function isAlmostExpired(iso) {
|
||||
const ms = new Date(iso).getTime() - Date.now();
|
||||
return ms > 0 && ms < 60 * 60 * 1000; // < 1h
|
||||
}
|
||||
|
||||
function formatRemain(iso) {
|
||||
const ms = new Date(iso).getTime() - Date.now();
|
||||
if (ms <= 0) return '已过期';
|
||||
const s = Math.floor(ms / 1000);
|
||||
if (s < 60) return `剩 ${s} 秒`;
|
||||
const m = Math.floor(s / 60);
|
||||
if (m < 60) return `剩 ${m} 分钟`;
|
||||
const h = Math.floor(m / 60);
|
||||
if (h < 24) return `剩 ${h} 小时${m % 60 ? ' ' + (m % 60) + ' 分' : ''}`;
|
||||
const d = Math.floor(h / 24);
|
||||
return `剩 ${d} 天${h % 24 ? ' ' + (h % 24) + ' 小时' : ''}`;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
function iconFor(ext) {
|
||||
const map = { pdf:'📄', zip:'📦', rar:'📦', '7z':'📦', txt:'📄', md:'📄',
|
||||
png:'🖼', jpg:'🖼', jpeg:'🖼', gif:'🖼', webp:'🖼', svg:'🖼',
|
||||
mp4:'🎬', mov:'🎬', avi:'🎬', mkv:'🎬',
|
||||
mp3:'🎵', wav:'🎵', flac:'🎵',
|
||||
xls:'📊', xlsx:'📊', csv:'📊',
|
||||
doc:'📃', docx:'📃', ppt:'📽', pptx:'📽' };
|
||||
return map[ext] || '📁';
|
||||
}
|
||||
|
||||
function formatSize(b) {
|
||||
if (b == null || isNaN(b)) return '-';
|
||||
if (b < 1024) return b + ' B';
|
||||
if (b < 1024 * 1024) return (b / 1024).toFixed(1) + ' KB';
|
||||
if (b < 1024 * 1024 * 1024) return (b / 1024 / 1024).toFixed(2) + ' MB';
|
||||
return (b / 1024 / 1024 / 1024).toFixed(2) + ' GB';
|
||||
}
|
||||
|
||||
function formatTime(iso) {
|
||||
const d = new Date(iso);
|
||||
const pad = n => String(n).padStart(2, '0');
|
||||
return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Boot
|
||||
// ---------------------------------------------------------------------------
|
||||
loadFiles();
|
||||
setInterval(loadFiles, 30000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user