diff --git a/templates_full.txt b/templates_full.txt index 85ca0e0..b7fbabb 100644 --- a/templates_full.txt +++ b/templates_full.txt @@ -67,6 +67,9 @@ .history-item.toggle { border-left-color: #8b5cf6; } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50; display: flex; align-items: center; justify-content: center; } .modal-content { max-width: 600px; width: 90%; max-height: 80vh; overflow: auto; } + .section-header { cursor: pointer; user-select: none; } + .section-header:hover { opacity: 0.85; } + .chevron { display: inline-block; transition: transform 0.2s ease; font-size: 14px; } @@ -555,20 +558,20 @@ -

- 容器列表 +

+ 容器列表

-
+
加载中...
-

- 镜像列表 +

+ 镜像列表

-
+
加载中...
@@ -935,6 +938,40 @@ let thresholds = { cpu: 80, cpu_temp: 80, memory: 85, disk: 90, interval: 60 }; let desktopNotifyEnabled = false; + // ==================== 折叠/展开 ==================== + function getCollapsedState() { + const stored = localStorage.getItem('collapsedSections'); + return stored ? JSON.parse(stored) : {}; + } + function saveCollapsedState(state) { + localStorage.setItem('collapsedSections', JSON.stringify(state)); + } + function toggleSection(sectionId, chevronEl) { + const grid = document.getElementById(sectionId); + if (!grid) return; + const state = getCollapsedState(); + if (grid.classList.contains('hidden')) { + grid.classList.remove('hidden'); + if (chevronEl) chevronEl.style.transform = 'rotate(0deg)'; + state[sectionId] = false; + } else { + grid.classList.add('hidden'); + if (chevronEl) chevronEl.style.transform = 'rotate(-90deg)'; + state[sectionId] = true; + } + saveCollapsedState(state); + } + function applyCollapsedState(sectionId, gridEl, chevronEl) { + const state = getCollapsedState(); + if (state[sectionId]) { + gridEl.classList.add('hidden'); + if (chevronEl) chevronEl.style.transform = 'rotate(-90deg)'; + } else { + gridEl.classList.remove('hidden'); + if (chevronEl) chevronEl.style.transform = 'rotate(0deg)'; + } + } + function switchTab(tab) { currentTab = tab; document.querySelectorAll('.tab-btn').forEach(btn => { @@ -1445,23 +1482,38 @@ const archivedProjs = projs.filter(p => activeStatus[p.id] === false); if (activeProjs.length > 0) { - html += `

${typeInfo.name}(${activeProjs.length})

`; + const secId = 'section-web-active'; + html += `

${typeInfo.name}(${activeProjs.length})

`; activeProjs.forEach(p => { html += renderProjectCard(p, true); }); html += '
'; } if (archivedProjs.length > 0) { - html += `

归档服务(${archivedProjs.length})

`; + const secId = 'section-web-archived'; + html += `

归档服务(${archivedProjs.length})

`; archivedProjs.forEach(p => { html += renderProjectCard(p, false); }); html += '
'; } } else { - html += `

${typeInfo.name}(${projs.length})

`; + const secId = 'section-' + type; + html += `

${typeInfo.name}(${projs.length})

`; projs.forEach(p => { html += renderProjectCard(p, true); }); html += '
'; } } list.innerHTML = html; + // 应用已保存的折叠状态 + setTimeout(() => { + const state = getCollapsedState(); + for (const [secId, collapsed] of Object.entries(state)) { + const grid = document.getElementById(secId); + const chevron = grid?.parentElement?.querySelector('.chevron'); + if (grid && collapsed) { + grid.classList.add('hidden'); + if (chevron) chevron.style.transform = 'rotate(-90deg)'; + } + } + }, 10); } function getActiveStatus() { @@ -2828,7 +2880,7 @@ } function renderDockerContainers(containers) { - const list = document.getElementById('dockerContainersList'); + const list = document.getElementById('docker-containers-grid'); if (containers.length === 0) { list.innerHTML = '
暂无容器
'; return; @@ -2860,7 +2912,7 @@ } function renderDockerImages(images) { - const list = document.getElementById('dockerImagesList'); + const list = document.getElementById('docker-images-grid'); if (images.length === 0) { list.innerHTML = '
暂无镜像
'; return;