feat: image lightbox and curl|bash Ubuntu deploy

Add click-to-zoom for uploaded images, move manage.sh to deploy/ for
curl|bash bootstrap, and remove Windows docs and PowerShell scripts.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-17 20:43:54 +08:00
parent 3e52b8eb87
commit 83fd9c1fd9
11 changed files with 505 additions and 455 deletions
+59 -2
View File
@@ -79,8 +79,27 @@
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.img-preview { max-width: 220px; max-height: 160px; border-radius: 6px; border: 1px solid var(--border); margin-top: 8px; display: block; }
.img-preview {
max-width: 220px; max-height: 160px; border-radius: 6px; border: 1px solid var(--border);
margin-top: 8px; display: block; cursor: zoom-in;
}
.img-preview.lg { max-width: 320px; max-height: 240px; }
.lightbox {
position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.88);
display: flex; align-items: center; justify-content: center; padding: 24px;
cursor: zoom-out;
}
.lightbox.hidden { display: none !important; }
.lightbox img {
max-width: min(96vw, 1200px); max-height: 92vh; object-fit: contain;
border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5); cursor: default;
}
.lightbox-close {
position: absolute; top: 16px; right: 16px; background: transparent;
border: 1px solid var(--border); color: var(--text); border-radius: 6px;
padding: 6px 12px; cursor: pointer; font-size: 0.85rem;
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
.backup-info { font-size: 0.82rem; color: var(--muted); line-height: 1.7; margin: 10px 0 16px; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
</style>
@@ -232,6 +251,11 @@
<div id="toast" class="toast"></div>
<div id="lightbox" class="lightbox hidden" role="dialog" aria-modal="true" aria-label="图片预览">
<button type="button" class="lightbox-close" id="lightboxClose">关闭</button>
<img id="lightboxImg" alt="放大预览">
</div>
<script>
const EX_LABEL = { binance: "Binance", okx: "OKX", gate: "Gate" };
@@ -271,6 +295,37 @@
toast._t = setTimeout(() => t.classList.remove("on"), 1800);
}
function openLightbox(src) {
if (!src) return;
$("lightboxImg").src = src;
$("lightbox").classList.remove("hidden");
document.body.style.overflow = "hidden";
}
function closeLightbox() {
$("lightbox").classList.add("hidden");
$("lightboxImg").src = "";
document.body.style.overflow = "";
}
$("lightboxClose").onclick = (e) => { e.stopPropagation(); closeLightbox(); };
$("lightbox").onclick = (e) => {
if (e.target === $("lightbox") || e.target === $("lightboxClose")) closeLightbox();
};
$("lightboxImg").onclick = (e) => e.stopPropagation();
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && !$("lightbox").classList.contains("hidden")) closeLightbox();
});
function bindZoom(img) {
img.title = "点击放大";
img.onclick = (e) => {
e.preventDefault();
e.stopPropagation();
openLightbox(img.src);
};
}
function isSensitive(fd) {
if (!fd) return false;
if (fd.secret || fd.type === "secret") return true;
@@ -413,6 +468,7 @@
file.id = "fld_" + fd.key;
const preview = document.createElement("img");
preview.className = "img-preview hidden";
bindZoom(preview);
const status = document.createElement("p");
status.className = "sub";
status.style.marginTop = "6px";
@@ -424,7 +480,7 @@
imageDrafts[fd.key] = data.path;
preview.src = data.url;
preview.classList.remove("hidden");
status.textContent = "已上传";
status.textContent = "已上传 · 点击图片可放大";
} catch (e) {
status.textContent = e.message || "上传失败";
status.className = "err";
@@ -530,6 +586,7 @@
img.className = "img-preview lg";
img.src = `/api/uploads/${encodeURIComponent(val)}`;
img.alt = fd.label;
bindZoom(img);
v.appendChild(img);
row.appendChild(v);
card.appendChild(row);