diff --git a/xian_favor/api.py b/xian_favor/api.py index 6752a3e..23861b3 100644 --- a/xian_favor/api.py +++ b/xian_favor/api.py @@ -873,6 +873,8 @@ INDEX_TEMPLATE = ''' margin-left: 200px; padding: 20px; padding-top: 0; /* 顶部按钮栏有 sticky,这里去掉顶部 padding */ + width: -webkit-fill-available; + width: fill-available; } /* 顶部操作栏固定在主内容区顶部 */ @@ -1036,22 +1038,36 @@ INDEX_TEMPLATE = ''' /* 卡片内容自适应布局 */ .item-card .card-content { display: flex; - flex-wrap: wrap; + align-items: flex-start; gap: 8px; } .item-card .card-main { flex: 1; - min-width: 150px; + min-width: 0; } .item-card .card-actions { display: flex; align-items: center; gap: 2px; - flex-wrap: wrap; + flex-shrink: 0; } .item-card .card-actions .btn { white-space: nowrap; } + /* 单行显示模式 */ + .item-card.compact .card-content { + align-items: center; + } + .item-card.compact .card-main h6 { + margin-bottom: 0; + } + .item-card.compact .card-main p { + display: none; + } + /* 双行显示模式(默认) */ + .item-card.double-line .card-main p { + display: block; + } .type-text { border-left: 4px solid #17a2b8; } .type-link { border-left: 4px solid #28a745; } .type-column { border-left: 4px solid #6f42c1; } @@ -1202,6 +1218,9 @@ INDEX_TEMPLATE = ''' + @@ -1926,6 +1945,9 @@ document.addEventListener('DOMContentLoaded', async () => { // 启动连接状态检测 startConnectionCheck(); + // 初始化显示模式 + updateDisplayMode(); + // 确保初始状态清空 document.getElementById('searchInput').value = ''; document.getElementById('typeFilter').value = ''; @@ -2023,8 +2045,10 @@ function renderItems(items) { return; } + const modeClass = displayMode === 'single' ? 'compact' : 'double-line'; + container.innerHTML = items.map(item => ` -
+
@@ -2108,6 +2132,28 @@ function renderPagination(total, page) { container.innerHTML = html; } +// 显示模式:single(单行)或 double(双行) +let displayMode = localStorage.getItem('displayMode') || 'double'; + +// 切换显示模式 +function toggleDisplayMode() { + displayMode = displayMode === 'single' ? 'double' : 'single'; + localStorage.setItem('displayMode', displayMode); + updateDisplayMode(); + renderItems(currentItems); +} + +// 更新显示模式按钮图标 +function updateDisplayMode() { + const btn = document.getElementById('displayModeBtn'); + if (btn) { + btn.innerHTML = displayMode === 'single' + ? '' + : ''; + btn.title = displayMode === 'single' ? '当前:单行(点击切换双行)' : '当前:双行(点击切换单行)'; + } +} + // 加载统计 async function loadStats() { const res = await fetch(`${API_BASE}/stats`);