feat: 编辑收藏时支持更改类型，动态显示对应字段

README.md

@@ -136,6 +136,17 @@ xian-favor/
 
 ## 版本历史
 
+- v1.6.0 (2026-04-13): 标签管理添加编辑功能，支持修改标签名称
+- v1.5.1 (2026-04-13): 标签管理添加搜索功能，实时过滤标签列表
+- v1.5.0 (2026-04-13): 首页添加分页功能，每页20条记录
+- v1.4.0 (2026-04-13): 首页添加导出按钮，一键导出所有收藏为JSON文件
+- v1.3.2 (2026-04-13): 编辑和添加模态框改为大尺寸(modal-lg)
+- v1.3.1 (2026-04-13): 备注改名为详情，支持换行显示，扩大输入框
+- v1.3.0 (2026-04-13): 标签管理功能和输入自动提示
+  - 侧边栏新增"标签管理"入口
+  - 标签管理页面：显示所有标签、使用条目数、创建/删除标签
+  - 添加/编辑时标签输入支持自动提示（输入时显示匹配的已有标签）
+  - 点击提示标签快速添加
 - v1.2.1 (2026-04-13): 卡片显示两行，第二行显示内容预览
 - v1.2.0 (2026-04-13): 压缩首页卡片高度，更紧凑的列表布局
 - v1.1.1 (2026-04-13): 编辑备注改为多行输入框

xian_favor/api.py

@@ -132,6 +132,23 @@ def create_tag():
         return jsonify({'success': False, 'error': str(e)}), 500
 
 
+@app.route('/api/tags/<int:tag_id>', methods=['PUT'])
+def update_tag(tag_id):
+    """更新标签"""
+    data = request.get_json()
+    name = data.get('name', '').strip()
+    
+    if not name:
+        return jsonify({'success': False, 'error': '标签名不能为空'}), 400
+    
+    try:
+        if db.update_tag(tag_id, name):
+            return jsonify({'success': True, 'data': {'id': tag_id, 'name': name}})
+        return jsonify({'success': False, 'error': '标签不存在或名称已存在'}), 404
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
 @app.route('/api/tags/<int:tag_id>', methods=['DELETE'])
 def delete_tag(tag_id):
     """删除标签"""
@@ -246,6 +263,9 @@ INDEX_TEMPLATE = '''
                         <option value="todo">待办</option>
                     </select>
                 </div>
+                <button class="btn btn-outline-success me-2" onclick="exportData()" title="导出JSON">
+                    <i class="bi bi-download"></i> 导出
+                </button>
                 <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
                     <i class="bi bi-plus-lg"></i> 添加
                 </button>
@@ -289,13 +309,16 @@ INDEX_TEMPLATE = '''
             
             <!-- 列表 -->
             <div id="itemList"></div>
+            
+            <!-- 分页 -->
+            <div id="pagination" class="d-flex justify-content-center mt-3"></div>
         </div>
     </div>
 </div>
 
 <!-- 添加模态框 -->
 <div class="modal fade" id="addModal" tabindex="-1">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">添加条目</h5>
@@ -360,8 +383,8 @@ INDEX_TEMPLATE = '''
                         <div id="addTagSuggestions" class="mt-1"></div>
                     </div>
                     <div class="mb-3">
-                        <label class="form-label">备注</label>
-                        <input type="text" id="addNote" class="form-control">
+                        <label class="form-label">详情/备注</label>
+                        <textarea id="addNote" class="form-control" rows="5"></textarea>
                     </div>
                 </form>
             </div>
@@ -398,7 +421,7 @@ INDEX_TEMPLATE = '''
 
 <!-- 编辑模态框 -->
 <div class="modal fade" id="editModal" tabindex="-1">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">编辑条目</h5>
@@ -409,7 +432,12 @@ INDEX_TEMPLATE = '''
                     <input type="hidden" id="editId">
                     <div class="mb-3">
                         <label class="form-label">类型</label>
-                        <input type="text" id="editType" class="form-control" readonly>
+                        <select id="editType" class="form-select">
+                            <option value="text">📝 文本</option>
+                            <option value="link">🔗 链接</option>
+                            <option value="column">📰 专栏</option>
+                            <option value="todo">✅ 待办</option>
+                        </select>
                     </div>
                     <div class="mb-3">
                         <label class="form-label">标题</label>
@@ -458,8 +486,8 @@ INDEX_TEMPLATE = '''
                         <div id="editTagSuggestions" class="mt-1"></div>
                     </div>
                     <div class="mb-3">
-                        <label class="form-label">备注</label>
-                        <textarea id="editNote" class="form-control" rows="3"></textarea>
+                        <label class="form-label">详情/备注</label>
+                        <textarea id="editNote" class="form-control" rows="5"></textarea>
                     </div>
                 </form>
             </div>
@@ -480,10 +508,18 @@ INDEX_TEMPLATE = '''
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
-                <div class="mb-3">
-                    <div class="input-group">
-                        <input type="text" id="newTagName" class="form-control" placeholder="新标签名称">
-                        <button class="btn btn-primary" onclick="createTag()"><i class="bi bi-plus"></i> 创建</button>
+                <div class="row mb-3">
+                    <div class="col">
+                        <div class="input-group">
+                            <input type="text" id="tagSearch" class="form-control" placeholder="搜索标签...">
+                            <button class="btn btn-outline-secondary" onclick="loadTagManagerList()"><i class="bi bi-search"></i></button>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="input-group">
+                            <input type="text" id="newTagName" class="form-control" placeholder="新标签名称">
+                            <button class="btn btn-primary" onclick="createTag()"><i class="bi bi-plus"></i> 创建</button>
+                        </div>
                     </div>
                 </div>
                 <div id="tagListContainer">
@@ -503,15 +539,18 @@ const API_BASE = '/api';
 let currentFilter = { type: '', status: '' };
 
 // 初始化
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
+    await loadStats(); // 先加载统计，确保总数可用
     loadItems();
-    loadStats();
     loadTags();
     
     // 标签输入自动提示
     document.getElementById('addTags').addEventListener('input', showTagSuggestions);
     document.getElementById('editTags').addEventListener('input', showTagSuggestionsEdit);
     
+    // 标签搜索实时过滤
+    document.getElementById('tagSearch')?.addEventListener('input', debounce(loadTagManagerList, 300));
+    
     // 类型切换时显示/隐藏字段
     document.getElementById('addType').addEventListener('change', (e) => {
         const type = e.target.value;
@@ -521,6 +560,11 @@ document.addEventListener('DOMContentLoaded', () => {
         document.getElementById('todoFields').style.display = type === 'todo' ? 'block' : 'none';
     });
     
+    // 编辑时类型切换
+    document.getElementById('editType').addEventListener('change', (e) => {
+        updateEditFieldsByType(e.target.value);
+    });
+    
     // 搜索
     document.getElementById('searchInput').addEventListener('input', debounce(loadItems, 300));
     
@@ -551,9 +595,13 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 // 加载列表
-async function loadItems() {
+let currentPage = 1;
+const pageSize = 20;
+
+async function loadItems(page = 1) {
+    currentPage = page;
     const keyword = document.getElementById('searchInput').value;
-    let url = `${API_BASE}/items?limit=100`;
+    let url = `${API_BASE}/items?limit=${pageSize}&offset=${(page-1)*pageSize}`;
     if (currentFilter.type) url += `&type=${currentFilter.type}`;
     if (currentFilter.status) url += `&status=${currentFilter.status}`;
     if (keyword) url += `&keyword=${encodeURIComponent(keyword)}`;
@@ -563,6 +611,7 @@ async function loadItems() {
     
     if (data.success) {
         renderItems(data.data);
+        renderPagination(data.data.length, page);
     }
 }
 
@@ -599,6 +648,53 @@ function renderItems(items) {
     `).join('');
 }
 
+// 渲染分页
+function renderPagination(itemCount, page) {
+    const container = document.getElementById('pagination');
+    const total = parseInt(document.getElementById('statTotal').textContent);
+    const totalPages = Math.ceil(total / pageSize);
+    
+    if (totalPages <= 1) {
+        container.innerHTML = '';
+        return;
+    }
+    
+    let html = '<nav><ul class="pagination">';
+    
+    // 上一页
+    html += `<li class="page-item ${page === 1 ? 'disabled' : ''}">
+        <a class="page-link" href="#" onclick="loadItems(${page-1}); return false;">«</a>
+    </li>`;
+    
+    // 页码（最多显示5个）
+    const startPage = Math.max(1, page - 2);
+    const endPage = Math.min(totalPages, page + 2);
+    
+    if (startPage > 1) {
+        html += `<li class="page-item"><a class="page-link" href="#" onclick="loadItems(1); return false;">1</a></li>`;
+        if (startPage > 2) html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
+    }
+    
+    for (let p = startPage; p <= endPage; p++) {
+        html += `<li class="page-item ${p === page ? 'active' : ''}">
+            <a class="page-link" href="#" onclick="loadItems(${p}); return false;">${p}</a>
+        </li>`;
+    }
+    
+    if (endPage < totalPages) {
+        if (endPage < totalPages - 1) html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
+        html += `<li class="page-item"><a class="page-link" href="#" onclick="loadItems(${totalPages}); return false;">${totalPages}</a></li>`;
+    }
+    
+    // 下一页
+    html += `<li class="page-item ${page === totalPages ? 'disabled' : ''}">
+        <a class="page-link" href="#" onclick="loadItems(${page+1}); return false;">»</a>
+    </li>`;
+    
+    html += '</ul></nav>';
+    container.innerHTML = html;
+}
+
 // 加载统计
 async function loadStats() {
     const res = await fetch(`${API_BASE}/stats`);
@@ -611,6 +707,12 @@ async function loadStats() {
     }
 }
 
+// 刷新数据（统计+列表）
+async function refreshData() {
+    await loadStats();
+    loadItems(currentPage);
+}
+
 // 添加条目
 async function addItem() {
     const type = document.getElementById('addType').value;
@@ -636,24 +738,21 @@ async function addItem() {
     if (res.ok) {
         bootstrap.Modal.getInstance(document.getElementById('addModal')).hide();
         document.getElementById('addForm').reset();
-        loadItems();
-        loadStats();
+        refreshData();
     }
 }
 
 // 完成待办
 async function completeItem(id) {
     await fetch(`${API_BASE}/items/${id}/done`, { method: 'POST' });
-    loadItems();
-    loadStats();
+    refreshData();
 }
 
 // 删除条目
 async function deleteItem(id) {
     if (!confirm('确认删除?')) return;
     await fetch(`${API_BASE}/items/${id}`, { method: 'DELETE' });
-    loadItems();
-    loadStats();
+    refreshData();
 }
 
 // 当前查看的条目ID
@@ -698,7 +797,7 @@ async function showDetail(id) {
     }
     
     if (item.note) {
-        html += `<div class="mb-3"><strong>备注:</strong> ${escapeHtml(item.note)}</div>`;
+        html += `<div class="mb-3"><strong>详情/备注:</strong><br><div class="border rounded p-3 bg-light" style="white-space: pre-wrap; word-break: break-all;">${escapeHtml(item.note)}</div></div>`;
     }
     
     html += `<div class="text-muted small"><strong>创建时间:</strong> ${formatDate(item.created_at)}<br><strong>更新时间:</strong> ${formatDate(item.updated_at)}</div>`;
@@ -726,14 +825,11 @@ async function openEditModal(id) {
     const type = item.type;
     
     document.getElementById('editId').value = id;
-    document.getElementById('editType').value = getTypeLabel(type);
+    document.getElementById('editType').value = type;
     document.getElementById('editTitle').value = item.title || '';
     
     // 根据类型显示/隐藏字段
-    document.getElementById('editContentGroup').style.display = type === 'text' ? 'block' : 'none';
-    document.getElementById('editUrlGroup').style.display = ['link', 'column'].includes(type) ? 'block' : 'none';
-    document.getElementById('editSourceGroup').style.display = type === 'column' ? 'block' : 'none';
-    document.getElementById('editTodoFields').style.display = type === 'todo' ? 'block' : 'none';
+    updateEditFieldsByType(type);
     
     document.getElementById('editContent').value = item.content || '';
     document.getElementById('editUrl').value = item.url || '';
@@ -750,16 +846,21 @@ async function openEditModal(id) {
     new bootstrap.Modal(document.getElementById('editModal')).show();
 }
 
+// 根据类型更新编辑表单字段显示
+function updateEditFieldsByType(type) {
+    document.getElementById('editContentGroup').style.display = type === 'text' ? 'block' : 'none';
+    document.getElementById('editUrlGroup').style.display = ['link', 'column'].includes(type) ? 'block' : 'none';
+    document.getElementById('editSourceGroup').style.display = type === 'column' ? 'block' : 'none';
+    document.getElementById('editTodoFields').style.display = type === 'todo' ? 'block' : 'none';
+}
+
 // 保存编辑
 async function saveEdit() {
     const id = document.getElementById('editId').value;
-    
-    // 获取当前条目的类型
-    const detailRes = await fetch(`${API_BASE}/items/${currentDetailId}`);
-    const detailData = await detailRes.json();
-    const type = detailData.data.type;
+    const type = document.getElementById('editType').value;  // 从下拉框获取新类型
     
     const data = {
+        type: type,  // 包含类型变更
         title: document.getElementById('editTitle').value,
         content: type === 'text' ? document.getElementById('editContent').value : null,
         url: ['link', 'column'].includes(type) ? document.getElementById('editUrl').value : null,
@@ -779,8 +880,7 @@ async function saveEdit() {
     
     if (res.ok) {
         bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
-        loadItems();
-        loadStats();
+        refreshData();
     }
 }
 
@@ -904,20 +1004,42 @@ async function loadTagManagerList() {
     if (!data.success) return;
     
     const container = document.getElementById('tagListContainer');
-    if (!data.data.length) {
+    
+    // 搜索过滤
+    const searchKeyword = document.getElementById('tagSearch').value.trim().toLowerCase();
+    let tags = data.data;
+    if (searchKeyword) {
+        tags = tags.filter(t => t.name.toLowerCase().includes(searchKeyword));
+    }
+    
+    if (!tags.length) {
         container.innerHTML = '<div class="text-center text-muted py-3">暂无标签</div>';
         return;
     }
     
-    container.innerHTML = data.data.map(tag => `
-        <div class="d-flex justify-content-between align-items-center p-2 border-bottom">
-            <div>
+    container.innerHTML = tags.map(tag => `
+        <div class="d-flex justify-content-between align-items-center p-2 border-bottom" id="tag-row-${tag.id}">
+            <div id="tag-display-${tag.id}">
                 <span class="badge bg-secondary">${tag.name}</span>
                 <span class="text-muted small ms-2">${tag.item_count || 0} 个条目</span>
             </div>
-            <button class="btn btn-sm btn-outline-danger" onclick="deleteTagManager(${tag.id}, '${tag.name}')">
-                <i class="bi bi-trash"></i>
-            </button>
+            <div id="tag-edit-${tag.id}" style="display:none;">
+                <input type="text" class="form-control form-control-sm" id="edit-tag-name-${tag.id}" value="${tag.name}" style="width:150px;">
+            </div>
+            <div class="btn-group btn-group-sm">
+                <button class="btn btn-outline-primary" id="tag-edit-btn-${tag.id}" onclick="showEditTag(${tag.id})" title="编辑">
+                    <i class="bi bi-pencil"></i>
+                </button>
+                <button class="btn btn-outline-success" id="tag-save-btn-${tag.id}" style="display:none;" onclick="saveEditTag(${tag.id})" title="保存">
+                    <i class="bi bi-check"></i>
+                </button>
+                <button class="btn btn-outline-secondary" id="tag-cancel-btn-${tag.id}" style="display:none;" onclick="cancelEditTag(${tag.id}, '${tag.name}')" title="取消">
+                    <i class="bi bi-x"></i>
+                </button>
+                <button class="btn btn-outline-danger" onclick="deleteTagManager(${tag.id}, '${tag.name}')" title="删除">
+                    <i class="bi bi-trash"></i>
+                </button>
+            </div>
         </div>
     `).join('');
 }
@@ -948,6 +1070,68 @@ async function deleteTagManager(id, name) {
     loadItems();
 }
 
+// 编辑标签
+function showEditTag(id) {
+    document.getElementById(`tag-display-${id}`).style.display = 'none';
+    document.getElementById(`tag-edit-${id}`).style.display = 'block';
+    document.getElementById(`tag-edit-btn-${id}`).style.display = 'none';
+    document.getElementById(`tag-save-btn-${id}`).style.display = 'inline-block';
+    document.getElementById(`tag-cancel-btn-${id}`).style.display = 'inline-block';
+    document.getElementById(`edit-tag-name-${id}`).focus();
+}
+
+function cancelEditTag(id, oldName) {
+    document.getElementById(`edit-tag-name-${id}`).value = oldName;
+    document.getElementById(`tag-display-${id}`).style.display = 'block';
+    document.getElementById(`tag-edit-${id}`).style.display = 'none';
+    document.getElementById(`tag-edit-btn-${id}`).style.display = 'inline-block';
+    document.getElementById(`tag-save-btn-${id}`).style.display = 'none';
+    document.getElementById(`tag-cancel-btn-${id}`).style.display = 'none';
+}
+
+async function saveEditTag(id) {
+    const newName = document.getElementById(`edit-tag-name-${id}`).value.trim();
+    if (!newName) return;
+    
+    const res = await fetch(`${API_BASE}/tags/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: newName })
+    });
+    
+    if (res.ok) {
+        loadTagManagerList();
+        loadTags();
+        loadItems();
+    } else {
+        const data = await res.json();
+        alert(data.error || '更新失败');
+    }
+}
+
+// 导出数据
+async function exportData() {
+    const res = await fetch(`${API_BASE}/items?limit=1000`);
+    const data = await res.json();
+    
+    if (!data.success) {
+        alert('导出失败');
+        return;
+    }
+    
+    // 格式化JSON
+    const jsonStr = JSON.stringify(data.data, null, 2);
+    
+    // 创建下载
+    const blob = new Blob([jsonStr], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `xian_favor_export_${new Date().toISOString().slice(0,10)}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+
 function debounce(fn, delay) {
     let timer;
     return function(...args) {

xian_favor/db.py

@@ -244,6 +244,18 @@ class Database:
             """)
             return [dict(row) for row in cursor.fetchall()]
     
+    def update_tag(self, tag_id: int, name: str) -> bool:
+        """更新标签名称"""
+        with self.get_conn() as conn:
+            cursor = conn.cursor()
+            # 检查名称是否已存在（排除自己）
+            cursor.execute("SELECT id FROM tags WHERE name = ? AND id != ?", (name, tag_id))
+            if cursor.fetchone():
+                return False  # 名称已存在
+            cursor.execute("UPDATE tags SET name = ? WHERE id = ?", (name, tag_id))
+            conn.commit()
+            return cursor.rowcount > 0
+    
     def delete_tag(self, tag_id: int = None, name: str = None) -> bool:
         """删除标签"""
         with self.get_conn() as conn: