feat: 添加卡片布局控制功能，支持动态调整每行卡片数量

web/static/js/app.js

@@ -295,6 +295,12 @@ class AppState {
 
         // 切换数据展示方式
         this.switchDataDisplay(mode);
+        
+        // 显示/隐藏卡片布局控制
+        const cardsLayoutControls = document.getElementById('cardsLayoutControls');
+        if (cardsLayoutControls) {
+            cardsLayoutControls.style.display = mode === 'cards' ? 'flex' : 'none';
+        }
     }
 
     switchDataDisplay(mode) {
@@ -404,6 +410,15 @@ class AppState {
         window.location.href = `/?${params.toString()}`;
     }
 
+    // 卡片布局控制
+    changeCardsPerRow(columns) {
+        const cardsContainer = document.querySelector('.data-cards');
+        if (cardsContainer) {
+            cardsContainer.setAttribute('data-columns', columns);
+            localStorage.setItem('cardsPerRow', columns);
+        }
+    }
+
     // 键盘快捷键
     setupKeyboardShortcuts() {
         document.addEventListener('keydown', (e) => {
@@ -613,6 +628,15 @@ class AppState {
                 perPageSelect.value = savedPerPage;
             }
         }
+
+        // 恢复卡片布局设置
+        const savedCardsPerRow = localStorage.getItem('cardsPerRow') || '2';
+        this.changeCardsPerRow(savedCardsPerRow);
+        
+        const cardsPerRowSelect = document.querySelector('.cards-per-row-select');
+        if (cardsPerRowSelect) {
+            cardsPerRowSelect.value = savedCardsPerRow;
+        }
     }
 
     openSettings() {
@@ -647,6 +671,7 @@ window.setViewMode = (mode) => app.setViewMode(mode);
 window.toggleExportMenu = () => app.toggleExportMenu();
 window.exportData = (format) => app.exportData(format);
 window.changePerPage = (perPage) => app.changePerPage(perPage);
+window.changeCardsPerRow = (columns) => app.changeCardsPerRow(columns);
 window.showDetail = (id) => app.showDetail(id);
 window.closeModal = () => app.closeModal();
 window.openSettings = () => app.openSettings();