diff --git a/Cargo.lock b/Cargo.lock index f69e4ce..3519592 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1952,6 +1952,7 @@ dependencies = [ "serde", "serde_json", "tokio", + "tokio-util", "tracing", "uuid", ] diff --git a/apps/video2slides/Cargo.toml b/apps/video2slides/Cargo.toml index 0577649..f9d7df4 100644 --- a/apps/video2slides/Cargo.toml +++ b/apps/video2slides/Cargo.toml @@ -15,3 +15,4 @@ serde_json = { workspace = true } tracing = { workspace = true } image = { workspace = true } uuid = { workspace = true } +tokio-util = { version = "0.7", features = ["io"] } diff --git a/apps/video2slides/frontend/index.html b/apps/video2slides/frontend/index.html index a30cfd7..5835af8 100644 --- a/apps/video2slides/frontend/index.html +++ b/apps/video2slides/frontend/index.html @@ -52,13 +52,21 @@ /* 网格 */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} - .card{background:var(--panel);border:2px solid transparent;border-radius:10px;overflow:hidden;transition:opacity .15s,border-color .15s,filter .15s;cursor:pointer} - .card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000} + .card{position:relative;background:var(--panel);border:2px solid transparent;border-radius:10px;overflow:hidden;transition:opacity .15s,border-color .15s;cursor:pointer} + .card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000;transition:filter .15s} .card .cap{display:flex;justify-content:space-between;padding:5px 8px;font-size:11px;color:var(--mut)} .card .cap .d{font-variant-numeric:tabular-nums} .card.keep{border-color:var(--keep)} - .card.dim{opacity:.4;filter:grayscale(1)} - .card.dim:hover{opacity:.85;filter:grayscale(0)} + .card.dim{opacity:.45} + .card.dim img{filter:grayscale(1)} + .card.dim:hover{opacity:.92} + .card.dim:hover img{filter:grayscale(0)} + /* 手动 use/discard 标记 —— 放图片上层、保持彩色(不被 dim 灰化),不挡点击 */ + .card .pin{position:absolute;top:6px;left:6px;font-size:10px;line-height:1;padding:3px 6px;border-radius:6px;font-weight:700;display:none;z-index:2;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.4)} + .card.pinned .pin{display:block} + .card .pin.use{background:var(--keep);color:#1a1500} + .card .pin.discard{background:var(--err);color:#fff} + .card.pinned{box-shadow:0 0 0 2px rgba(255,255,255,.12) inset} /* 悬停大图预览 */ #preview{position:fixed;z-index:100;pointer-events:none;display:none;border:2px solid var(--accent);border-radius:10px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.6);background:#000} @@ -86,6 +94,10 @@ .row{display:flex;gap:10px;align-items:center} .err{color:var(--err);font-size:12px} .pager{display:flex;gap:6px;align-items:center} + #expmask{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center} + #expmask.on{display:flex} + #expmask .box2{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 30px;text-align:center} + #ebar{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));width:0;transition:width .15s} .pager .pg{padding:4px 9px;background:var(--panel);border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:12px} .pager .pg.cur{background:var(--accent);color:#1a1500;border-color:var(--accent)} .switch{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);cursor:pointer;user-select:none} @@ -111,6 +123,11 @@