feat(v4.4.0): 详情弹框添加导航按钮和固定底部操作栏

- 右侧固定显示向上/向下导航按钮
- 底部操作栏（转为待办、编辑、关闭）固定悬浮

xian_favor/api.py

@@ -1087,18 +1087,38 @@ INDEX_TEMPLATE = '''
         .folder-list a i { margin-right: 5px; }
         .folder-list .folder-item {
             display: flex;
+            align-items: center;
             padding: 6px 10px;
+            position: relative;
         }
         .folder-list .folder-item a {
-            padding: 0 10px;
+            padding: 6px 10px;
             flex-grow: 1;
+            display: flex;
+            align-items: center;
         }
         .folder-list .folder-actions {
+            position: absolute;
+            right: 10px;
             display: none;
+            gap: 4px;
+            background: #343a40;
+            padding: 4px 8px;
+            border-radius: 4px;
         }
         .folder-list .folder-item:hover .folder-actions {
             display: flex;
-            gap: 2px;
+        }
+        .folder-list .folder-actions .btn {
+            padding: 2px 6px;
+            font-size: 12px;
+            line-height: 1;
+        }
+        .folder-list .folder-item:hover {
+            background: #495057;
+        }
+        .folder-list .folder-item:hover a {
+            color: #fff;
         }
         .folder-action { 
             font-size: 12px; 
@@ -1206,6 +1226,36 @@ INDEX_TEMPLATE = '''
         .quick-insert-area:active {
             background: #e8f4ff;
         }
+        /* 详情弹框样式 */
+        .detail-modal-body {
+            max-height: 60vh;
+            overflow-y: auto;
+            padding-bottom: 20px;
+        }
+        .detail-nav-buttons {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            z-index: 10;
+        }
+        .detail-nav-buttons .btn {
+            padding: 8px 12px;
+        }
+        .detail-modal-footer {
+            position: sticky;
+            bottom: 0;
+            background: #fff;
+            border-top: 1px solid #dee2e6;
+            z-index: 10;
+        }
+        /* 解决底部按钮被遮挡的问题 */
+        .modal-dialog-scrollable .modal-body {
+            overflow-y: auto;
+        }
         .star-btn { font-size: 11px; }
         .status-pending { color: #ffc107; }
         .status-in_progress { color: #17a2b8; }
@@ -1489,6 +1539,12 @@ INDEX_TEMPLATE = '''
                             </label>
                         </div>
                     </div>
+                    <div class="mb-3">
+                        <label class="form-label">所属文件夹</label>
+                        <select id="addFolder" class="form-select">
+                            <option value="">未分类（根目录）</option>
+                        </select>
+                    </div>
                 </form>
             </div>
             <div class="modal-footer">
@@ -1501,18 +1557,27 @@ INDEX_TEMPLATE = '''
 
 <!-- 详情模态框 -->
 <div class="modal fade" id="detailModal" tabindex="-1">
-    <div class="modal-dialog modal-lg">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title"><span id="detailTypeIcon"></span> <span id="detailTitle"></span></h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
-            <div class="modal-body">
+            <div class="modal-body detail-modal-body">
+                <!-- 导航按钮 -->
+                <div class="detail-nav-buttons">
+                    <button class="btn btn-sm btn-outline-secondary" onclick="scrollDetailToTop()" title="回到顶部">
+                        <i class="bi bi-arrow-up"></i>
+                    </button>
+                    <button class="btn btn-sm btn-outline-secondary" onclick="scrollDetailToBottom()" title="去到底部">
+                        <i class="bi bi-arrow-down"></i>
+                    </button>
+                </div>
                 <div id="detailContent">
                     <!-- 动态填充 -->
                 </div>
             </div>
-            <div class="modal-footer">
+            <div class="modal-footer detail-modal-footer">
                 <button type="button" class="btn btn-outline-secondary" id="detailConvertBtn" onclick="showConvertModalFromDetail()" style="display:none;">
                     <i class="bi bi-arrow-repeat"></i> 转为待办
                 </button>
@@ -1603,6 +1668,12 @@ INDEX_TEMPLATE = '''
                             </label>
                         </div>
                     </div>
+                    <div class="mb-3">
+                        <label class="form-label">所属文件夹</label>
+                        <select id="editFolder" class="form-select">
+                            <option value="">未分类（根目录）</option>
+                        </select>
+                    </div>
                 </form>
             </div>
             <div class="modal-footer">
@@ -2193,6 +2264,8 @@ document.addEventListener('DOMContentLoaded', async () => {
     // 编辑时类型切换
     document.getElementById('editType').addEventListener('change', (e) => {
         updateEditFieldsByType(e.target.value);
+        // 切换类型时更新文件夹列表
+        loadFolderSelect(e.target.value, 'editFolder');
     });
     
     // 搜索 - 直接绑定，不用 debounce
@@ -2664,6 +2737,9 @@ function showAddModal(type) {
     // 设置类型
     document.getElementById('addType').value = type;
     
+    // 重置文件夹ID（从顶部按钮添加时不指定文件夹）
+    currentAddFolderId = null;
+    
     // 只有不是编辑草稿时才重置
     // currentDraftId 在 editDraft 中已设置，不要覆盖
     
@@ -2693,6 +2769,9 @@ function showAddModal(type) {
     // 打开弹窗
     new bootstrap.Modal(document.getElementById('addModal')).show();
     
+    // 加载该类型下的文件夹列表
+    loadFolderSelect(type, 'addFolder', currentAddFolderId);
+    
     // 启动自动保存
     startAutoSave();
     
@@ -2720,7 +2799,8 @@ async function addItem() {
         due_date: type === 'todo' ? document.getElementById('addDueDate').value : null,
         note: document.getElementById('addNote').value,
         tags: document.getElementById('addTags').value.split(',').map(t => t.trim()).filter(t => t),
-        is_starred: document.getElementById('addStarred').checked
+        is_starred: document.getElementById('addStarred').checked,
+        folder_id: document.getElementById('addFolder').value ? parseInt(document.getElementById('addFolder').value) : currentAddFolderId
     };
     
     const res = await fetch(`${API_BASE}/items`, {
@@ -2741,6 +2821,7 @@ async function addItem() {
         
         stopAutoSave();
         hideDraftIndicator();
+        currentAddFolderId = null;  // 重置文件夹ID
         refreshData();
     }
 }
@@ -3217,6 +3298,21 @@ function showConvertModalFromDetail() {
     setTimeout(() => showConvertModal(currentDetailId), 300);
 }
 
+// 详情弹框导航
+function scrollDetailToTop() {
+    const modalBody = document.querySelector('.detail-modal-body');
+    if (modalBody) {
+        modalBody.scrollTop = 0;
+    }
+}
+
+function scrollDetailToBottom() {
+    const modalBody = document.querySelector('.detail-modal-body');
+    if (modalBody) {
+        modalBody.scrollTop = modalBody.scrollHeight;
+    }
+}
+
 // 从详情页打开编辑
 function openEditModalFromDetail() {
     bootstrap.Modal.getInstance(document.getElementById('detailModal')).hide();
@@ -3282,6 +3378,9 @@ async function openEditModal(id) {
     // 设置重点关注状态
     document.getElementById('editStarred').checked = item.is_starred === 1;
     
+    // 加载文件夹列表并设置当前文件夹
+    await loadFolderSelect(type, 'editFolder', item.folder_id);
+    
     // 保存原始数据用于比较
     window.editOriginalData = {
         type,
@@ -3370,7 +3469,8 @@ async function saveEdit() {
         due_date: type === 'todo' ? document.getElementById('editDueDate').value : null,
         note: document.getElementById('editNote').value,
         tags: document.getElementById('editTags').value.split(',').map(t => t.trim()).filter(t => t),
-        is_starred: document.getElementById('editStarred').checked ? 1 : 0
+        is_starred: document.getElementById('editStarred').checked ? 1 : 0,
+        folder_id: document.getElementById('editFolder').value ? parseInt(document.getElementById('editFolder').value) : null
     };
     
     try {
@@ -4194,10 +4294,13 @@ function renderFolderList(type) {
                 <i class="bi bi-folder"></i> ${f.name} <small class="text-muted">(${f.item_count || 0})</small>
             </a>
             <div class="folder-actions">
-                <button class="btn btn-sm btn-outline-secondary py-0 px-1" onclick="event.stopPropagation(); showEditFolderModal(${f.id}, '${f.name}'); return false;" title="重命名">
+                <button class="btn btn-outline-success" onclick="event.stopPropagation(); showAddToFolderModal('${type}', ${f.id}); return false;" title="新增数据到此文件夹">
+                    <i class="bi bi-plus"></i>
+                </button>
+                <button class="btn btn-outline-secondary" onclick="event.stopPropagation(); showEditFolderModal(${f.id}, '${f.name}'); return false;" title="重命名">
                     <i class="bi bi-pencil"></i>
                 </button>
-                <button class="btn btn-sm btn-outline-danger py-0 px-1" onclick="event.stopPropagation(); deleteFolderConfirm(${f.id}, '${f.name}'); return false;" title="删除">
+                <button class="btn btn-outline-danger" onclick="event.stopPropagation(); deleteFolderConfirm(${f.id}, '${f.name}'); return false;" title="删除">
                     <i class="bi bi-trash"></i>
                 </button>
             </div>
@@ -4327,6 +4430,76 @@ async function deleteFolderConfirm(folderId, folderName) {
     }
 }
 
+// 显示新增数据到文件夹的模态框
+function showAddToFolderModal(type, folderId) {
+    // 离线检查
+    if (!checkOnlineBeforeAction('添加数据')) return;
+    
+    // 设置类型
+    document.getElementById('addType').value = type;
+    document.getElementById('editFolderId').value = '';  // 重置编辑ID
+    
+    // 设置弹窗标题和图标
+    const typeInfo = {
+        text: { icon: '📝', title: '添加文本' },
+        link: { icon: '🔗', title: '添加链接' },
+        column: { icon: '📰', title: '添加专栏' },
+        todo: { icon: '✅', title: '添加待办' }
+    };
+    
+    document.getElementById('addModalIcon').textContent = typeInfo[type].icon;
+    document.getElementById('addModalTitle').textContent = typeInfo[type].title;
+    
+    // 显示/隐藏对应字段
+    document.getElementById('contentGroup').style.display = type === 'text' ? 'block' : 'none';
+    document.getElementById('urlGroup').style.display = ['link', 'column'].includes(type) ? 'block' : 'none';
+    document.getElementById('sourceGroup').style.display = type === 'column' ? 'block' : 'none';
+    document.getElementById('todoFields').style.display = type === 'todo' ? 'block' : 'none';
+    
+    // 清空表单
+    document.getElementById('addForm').reset();
+    hideDraftIndicator();
+    
+    // 设置默认文件夹（隐藏字段，需要在提交时带上）
+    currentAddFolderId = folderId;
+    
+    // 打开弹窗
+    new bootstrap.Modal(document.getElementById('addModal')).show();
+    
+    // 加载该类型下的文件夹列表，并选中指定文件夹
+    loadFolderSelect(type, 'addFolder', folderId);
+    
+    // 启动自动保存
+    startAutoSave();
+    
+    // 弹框关闭时停止自动保存并重置文件夹ID
+    document.getElementById('addModal').addEventListener('hidden.bs.modal', () => {
+        stopAutoSave();
+        currentAddFolderId = null;
+    }, { once: true });
+}
+
+// 当前新增时的文件夹ID
+let currentAddFolderId = null;
+
+// 加载文件夹选择列表
+async function loadFolderSelect(type, selectId, selectedFolderId = null) {
+    const res = await fetch(`${API_BASE}/folders?type=${type}`);
+    const data = await res.json();
+    
+    const select = document.getElementById(selectId);
+    if (!select) return;
+    
+    select.innerHTML = '<option value="">未分类（根目录）</option>';
+    
+    if (data.success && data.data.length > 0) {
+        data.data.forEach(f => {
+            const selected = f.id == selectedFolderId ? 'selected' : '';
+            select.innerHTML += `<option value="${f.id}" ${selected}>${f.name}</option>`;
+        });
+    }
+}
+
 function filterByFolder(type, folderId) {
     // 更新侧边栏选中状态
     document.querySelectorAll('.sidebar a').forEach(a => a.classList.remove('active'));

xian_favor/db.py

@@ -391,7 +391,7 @@ class Database:
     
     def update_item(self, item_id: int, **kwargs) -> bool:
         """更新条目"""
-        allowed_fields = ['type', 'title', 'content', 'url', 'source', 'status', 'priority', 'due_date', 'note', 'is_starred']
+        allowed_fields = ['type', 'title', 'content', 'url', 'source', 'status', 'priority', 'due_date', 'note', 'is_starred', 'folder_id']
         update_fields = {k: v for k, v in kwargs.items() if k in allowed_fields}
         
         # 只有 tags 变化也算有效更新