feat: 添加显示模式切换按钮（单行/双行）

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 = '''
                 <button class="btn btn-outline-info me-2" onclick="showAIAddModal()" title="AI自动添加">
                     <i class="bi bi-robot"></i> AI添加
                 </button>
+                <button class="btn btn-outline-secondary me-1" onclick="toggleDisplayMode()" title="切换显示模式" id="displayModeBtn">
+                    <i class="bi bi-layout-text-sidebar"></i>
+                </button>
                 <button class="btn btn-outline-secondary me-1" onclick="showAddModal('text')" title="添加文本">
                     <i class="bi bi-file-text"></i>
                 </button>
@@ -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 => `
-        <div class="card type-${item.type} item-card ${item.is_starred ? 'is-starred' : ''}" style="cursor: pointer;" onclick="showDetail(${item.id})">
+        <div class="card type-${item.type} item-card ${modeClass} ${item.is_starred ? 'is-starred' : ''}" style="cursor: pointer;" onclick="showDetail(${item.id})">
             <div class="card-body">
                 <div class="card-content">
                     <div class="card-main">
@@ -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' 
+            ? '<i class="bi bi-layout-text-sidebar-reverse"></i>' 
+            : '<i class="bi bi-layout-text-sidebar"></i>';
+        btn.title = displayMode === 'single' ? '当前：单行（点击切换双行）' : '当前：双行（点击切换单行）';
+    }
+}
+
 // 加载统计
 async function loadStats() {
     const res = await fetch(`${API_BASE}/stats`);