From 47cbcb25bc099956e584be921fc533a08fe7d920 Mon Sep 17 00:00:00 2001
From: hubian <908234780@qq.com>
Date: Wed, 22 Apr 2026 11:56:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE=EF=BC=88?=
 =?UTF-8?q?=E5=8D=95=E8=A1=8C/=E5=8F=8C=E8=A1=8C=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 xian_favor/api.py | 54 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 4 deletions(-)

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 = '''
                 <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`);