feat: 文件浏览页 + 共享白板 + 白板管理页(含补登记分片上传/隧道历史改动)
本次提交包含两批改动(7月2日遗留未入库 + 本次新功能),分述如下:
【补登记:7月2日已上线但未提交的功能】
- 分片上传:chunk_upload_controller/service/dao + UploadSession model/schema,
支持 4MiB 分片、乱序、断点续传、去重、幂等 complete;后台 reaper 清理过期会话。
- 反向隧道:tunnel_controller/service/dao + TunnelSession model/schema,
SSH remote forward 经 /api/userPort/{userName} 反代到 user 本地服务。
- 上传页:views/upload_html.py(拖拽/多文件/分片/断点续传 UI)。
- config.py:StorageConfig.chunk_session_dir/ttl、TunnelConfig;
requirements.txt 加 httpx;start.sh 清理 .work/ 残留;
schema.sql 加 upload_session/tunnel_session 表;sftp_server 承载隧道转发。
【本次新功能】
- 文件浏览页:GET /files(Basic Auth 同 docs)+ /api/admin/files(list/get/download/DELETE)。
硬删除(DB 行 + 磁盘文件),删除后列表不再显示。前端 static/file_browser.*。
- 共享白板:GET /whiteboard/{id}(公开,不存在则新建)+ WS /ws/whiteboard/{id}。
MySQL 持久化(whiteboard 表),Canvas 实时同步,心跳 3s/5 次失活移除,
清空/复制按钮,移动端兼容。WhiteboardHub 管理 {board_id: set[Connection]},
disconnect 幂等 + 空 set 清理防泄漏,broadcast 失败连接自动移除。
- 白板管理页:GET /whiteboard-admin(Basic Auth)+ /api/admin/whiteboards(list/DELETE)。
删除时 hub.close_board 踢出在线连接。
- 清理:合并 UploadService.get_out_with_disk_path(下载/删除复用,消除重复 DB 读),
移除无用 resolve_disk_path。
- config.py:WhiteboardConfig(heartbeat/threshold/board_id 长度/list_limit);
schema.sql 加 whiteboard 表;README 补新接口与心跳/内存说明。
- 验证:tests/manual_whiteboard_hub.py / _ws.py / _kick.py 全部通过。
This commit is contained in:
94
static/file_browser.js
Normal file
94
static/file_browser.js
Normal file
@@ -0,0 +1,94 @@
|
||||
/* 文件浏览页:拉取 /api/admin/files、渲染表格、下载/删除/复制 sha。
|
||||
每次进入或删除后重新拉取,前端不缓存列表,保证已删除文件不显示。 */
|
||||
(function () {
|
||||
"use strict";
|
||||
const { el, toast, copyText, fmtBytes, fmtTime, api } = window.ZK;
|
||||
const listEl = document.getElementById("list");
|
||||
const countEl = document.getElementById("count");
|
||||
const refreshBtn = document.getElementById("refresh");
|
||||
|
||||
refreshBtn.addEventListener("click", load);
|
||||
|
||||
async function load() {
|
||||
listEl.innerHTML = '<div class="skel">加载中…</div>';
|
||||
countEl.textContent = "";
|
||||
try {
|
||||
const res = await api("/api/admin/files?limit=500&offset=0");
|
||||
if (!res.ok) throw new Error("HTTP " + res.status);
|
||||
const body = await res.json();
|
||||
render(body.items || []);
|
||||
countEl.textContent = `共 ${body.total} 个文件`;
|
||||
} catch (e) {
|
||||
listEl.innerHTML = '<div class="empty">加载失败:' + (e.message || e) + "</div>";
|
||||
}
|
||||
}
|
||||
|
||||
function render(items) {
|
||||
if (!items.length) {
|
||||
listEl.innerHTML = '<div class="empty">还没有文件。去 <a class="link" href="/upload">上传</a> 一个吧。</div>';
|
||||
return;
|
||||
}
|
||||
const table = el("table", { class: "files-table" });
|
||||
const thead = el("thead", null,
|
||||
el("tr", null,
|
||||
el("th", { class: "col-name" }, "文件名 / SHA-256"),
|
||||
el("th", { class: "col-size" }, "大小"),
|
||||
el("th", { class: "col-src" }, "来源"),
|
||||
el("th", { class: "col-time" }, "上传时间"),
|
||||
el("th", { class: "col-act" }, "操作")
|
||||
)
|
||||
);
|
||||
const tbody = el("tbody", null);
|
||||
for (const f of items) {
|
||||
const row = el("tr", null,
|
||||
el("td", { class: "col-name" },
|
||||
el("div", { class: "fname" }, f.original_filename),
|
||||
el("span", { class: "sha mono sha-short", title: "点击复制完整 SHA-256" },
|
||||
shortSha(f.sha256))
|
||||
),
|
||||
el("td", { class: "col-size mono" }, fmtBytes(f.size_bytes)),
|
||||
el("td", { class: "col-src" }, el("span", { class: "tag" }, f.source || "-")),
|
||||
el("td", { class: "col-time muted" }, fmtTime(f.uploaded_at)),
|
||||
el("td", { class: "col-act" },
|
||||
el("a", { class: "btn primary", href: `/api/admin/files/${f.id}/download`, download: "" }, "下载"),
|
||||
el("button", { class: "btn danger", onclick: () => remove(f, row) }, "删除")
|
||||
)
|
||||
);
|
||||
const shaNode = row.querySelector(".sha-short");
|
||||
shaNode.addEventListener("click", async () => {
|
||||
const ok = await copyText(f.sha256);
|
||||
toast(ok ? "已复制 SHA-256" : "复制失败");
|
||||
});
|
||||
tbody.appendChild(row);
|
||||
}
|
||||
table.appendChild(thead);
|
||||
table.appendChild(tbody);
|
||||
listEl.innerHTML = "";
|
||||
listEl.appendChild(table);
|
||||
}
|
||||
|
||||
function shortSha(sha) {
|
||||
if (!sha) return "-";
|
||||
return sha.length > 16 ? sha.slice(0, 12) + "…" + sha.slice(-4) : sha;
|
||||
}
|
||||
|
||||
async function remove(f, row) {
|
||||
if (!confirm(`确定删除「${f.original_filename}」?\n此操作不可恢复,将同时删除磁盘文件。`)) return;
|
||||
try {
|
||||
const res = await api(`/api/admin/files/${f.id}`, { method: "DELETE" });
|
||||
if (!res.ok) throw new Error("HTTP " + res.status);
|
||||
const body = await res.json();
|
||||
if (!body.deleted) { toast("文件已不存在"); }
|
||||
row.classList.add("row-removed");
|
||||
setTimeout(() => row.remove(), 250);
|
||||
toast("已删除");
|
||||
// 更新计数
|
||||
const m = (countEl.textContent || "").match(/(\d+)/);
|
||||
if (m) countEl.textContent = `共 ${Math.max(0, Number(m[1]) - 1)} 个文件`;
|
||||
} catch (e) {
|
||||
toast("删除失败:" + (e.message || e), "err");
|
||||
}
|
||||
}
|
||||
|
||||
load();
|
||||
})();
|
||||
Reference in New Issue
Block a user