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:
+59
-2
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user