对齐历史频道的交互:card-hd 整行可点,箭头 ▾ 旋转, 折叠时 card-hd border-bottom 去掉避免多余分隔线。 已完成卡片的分页器 done-pager 跟 card-bd 联动隐藏。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -194,6 +194,10 @@
|
|||||||
}
|
}
|
||||||
.card-hd-badge { font-size: 11px; font-weight: 400; color: var(--muted); }
|
.card-hd-badge { font-size: 11px; font-weight: 400; color: var(--muted); }
|
||||||
.card-bd { padding: 12px 14px; }
|
.card-bd { padding: 12px 14px; }
|
||||||
|
/* 可折叠的 card-hd */
|
||||||
|
.card-hd.collapsible { cursor: pointer; user-select: none; }
|
||||||
|
.card-hd.collapsed { border-bottom: none; }
|
||||||
|
.card-hd-left { display: flex; align-items: center; gap: 6px; }
|
||||||
|
|
||||||
/* 任务队列总览 */
|
/* 任务队列总览 */
|
||||||
.task-banner {
|
.task-banner {
|
||||||
@@ -1042,8 +1046,11 @@
|
|||||||
|
|
||||||
<!-- 正在下载 -->
|
<!-- 正在下载 -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-hd">
|
<div class="card-hd collapsible" id="dl-head" onclick="toggleDl()">
|
||||||
|
<div class="card-hd-left">
|
||||||
|
<span class="hist-arrow" id="dl-arrow">▾</span>
|
||||||
<span>正在下载</span>
|
<span>正在下载</span>
|
||||||
|
</div>
|
||||||
<span class="card-hd-badge" id="dl-badge">0 个文件</span>
|
<span class="card-hd-badge" id="dl-badge">0 个文件</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-bd" id="dl-list">
|
<div class="card-bd" id="dl-list">
|
||||||
@@ -1060,8 +1067,11 @@
|
|||||||
|
|
||||||
<!-- 已完成 -->
|
<!-- 已完成 -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-hd">
|
<div class="card-hd collapsible" id="done-head" onclick="toggleDone()">
|
||||||
|
<div class="card-hd-left">
|
||||||
|
<span class="hist-arrow" id="done-arrow">▾</span>
|
||||||
<span>已完成</span>
|
<span>已完成</span>
|
||||||
|
</div>
|
||||||
<span class="card-hd-badge" id="done-badge">0 个文件</span>
|
<span class="card-hd-badge" id="done-badge">0 个文件</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-bd" id="done-list">
|
<div class="card-bd" id="done-list">
|
||||||
@@ -1082,6 +1092,8 @@
|
|||||||
let dlState = '{{ download_state }}';
|
let dlState = '{{ download_state }}';
|
||||||
let validatedChannel = null;
|
let validatedChannel = null;
|
||||||
let histOpen = true;
|
let histOpen = true;
|
||||||
|
let dlOpen = true;
|
||||||
|
let doneOpen = true;
|
||||||
let setupStatus = {};
|
let setupStatus = {};
|
||||||
let wizStep = 0;
|
let wizStep = 0;
|
||||||
let donePage = 1;
|
let donePage = 1;
|
||||||
@@ -1174,6 +1186,29 @@
|
|||||||
document.getElementById('hist-arrow').className = 'hist-arrow' + (histOpen ? '' : ' closed');
|
document.getElementById('hist-arrow').className = 'hist-arrow' + (histOpen ? '' : ' closed');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── 正在下载 / 已完成 折叠 ──
|
||||||
|
function toggleDl() {
|
||||||
|
dlOpen = !dlOpen;
|
||||||
|
document.getElementById('dl-list').style.display = dlOpen ? '' : 'none';
|
||||||
|
document.getElementById('dl-arrow').className = 'hist-arrow' + (dlOpen ? '' : ' closed');
|
||||||
|
document.getElementById('dl-head').classList.toggle('collapsed', !dlOpen);
|
||||||
|
}
|
||||||
|
function toggleDone() {
|
||||||
|
doneOpen = !doneOpen;
|
||||||
|
document.getElementById('done-list').style.display = doneOpen ? '' : 'none';
|
||||||
|
document.getElementById('done-arrow').className = 'hist-arrow' + (doneOpen ? '' : ' closed');
|
||||||
|
document.getElementById('done-head').classList.toggle('collapsed', !doneOpen);
|
||||||
|
// 分页器跟 done-list 联动,仅在展开且本来就显示时才恢复
|
||||||
|
const pager = document.getElementById('done-pager');
|
||||||
|
if (!doneOpen) {
|
||||||
|
pager.dataset.hiddenByToggle = pager.style.display !== 'none' ? '1' : '';
|
||||||
|
pager.style.display = 'none';
|
||||||
|
} else if (pager.dataset.hiddenByToggle === '1') {
|
||||||
|
pager.style.display = '';
|
||||||
|
pager.dataset.hiddenByToggle = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function loadHistory() {
|
function loadHistory() {
|
||||||
fetch('/api/channel_history').then(r => r.json()).then(d => {
|
fetch('/api/channel_history').then(r => r.json()).then(d => {
|
||||||
const list = document.getElementById('hist-list');
|
const list = document.getElementById('hist-list');
|
||||||
@@ -1649,7 +1684,13 @@
|
|||||||
if (total_pages <= 1) {
|
if (total_pages <= 1) {
|
||||||
pager.style.display = 'none';
|
pager.style.display = 'none';
|
||||||
} else {
|
} else {
|
||||||
|
// 卡片被折叠时不显示分页器,但记下"原本该显示"的状态,展开后由 toggleDone 恢复
|
||||||
|
if (doneOpen) {
|
||||||
pager.style.display = 'flex';
|
pager.style.display = 'flex';
|
||||||
|
} else {
|
||||||
|
pager.style.display = 'none';
|
||||||
|
pager.dataset.hiddenByToggle = '1';
|
||||||
|
}
|
||||||
document.getElementById('done-pager-info').textContent =
|
document.getElementById('done-pager-info').textContent =
|
||||||
`第 ${page} / ${total_pages} 页,共 ${total} 条`;
|
`第 ${page} / ${total_pages} 页,共 ${total} 条`;
|
||||||
document.getElementById('pg-prev').disabled = page <= 1;
|
document.getElementById('pg-prev').disabled = page <= 1;
|
||||||
|
|||||||
Reference in New Issue
Block a user