新增独立内容库页面

- 创建 /library 内容库独立页面
- 支持文章列表展示、搜索、分类筛选
- 支持查看详情、编辑、删除
- 支持批量选择和批量删除
- 支持导出为 JSON 文件
- 分页显示
- 主页内容库区域改为入口链接

app.py

@@ -43,6 +43,11 @@ def index():
 def search_page():
     return render_template('search.html')
 
+# 内容库页面
+@app.route('/library')
+def library_page():
+    return render_template('library.html')
+
 # API首页
 @app.route('/api')
 def api_index():

static/css/library.css

@@ -0,0 +1,327 @@
+/* 内容库页面专用样式 */
+
+.library-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* 头部 */
+.library-header {
+    background: white;
+    padding: 20px 30px;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.back-link {
+    color: #667eea;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 14px;
+}
+
+.back-link:hover {
+    text-decoration: underline;
+}
+
+.library-header h1 {
+    color: #333;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.stats-info {
+    font-size: 14px;
+    color: #666;
+}
+
+/* 工具栏 */
+.toolbar {
+    background: white;
+    padding: 15px 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.toolbar-left {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+}
+
+.search-box {
+    position: relative;
+}
+
+.search-box i {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #999;
+}
+
+.search-box input {
+    padding: 10px 15px 10px 35px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 14px;
+    width: 300px;
+}
+
+.search-box input:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.category-select {
+    padding: 10px 15px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 14px;
+    background: white;
+    cursor: pointer;
+}
+
+.toolbar-right {
+    display: flex;
+    gap: 10px;
+}
+
+/* 文章列表区域 */
+.articles-section {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.articles-header {
+    padding: 15px 20px;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e9ecef;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.checkbox-wrapper input {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+
+.batch-actions {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+#selected-count {
+    font-size: 14px;
+    color: #666;
+}
+
+.articles-body {
+    padding: 20px;
+}
+
+.articles-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+/* 文章卡片 */
+.article-card {
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 20px;
+    transition: all 0.2s;
+}
+
+.article-card:hover {
+    border-color: #667eea;
+    background: #f8f9fa;
+}
+
+.article-card.selected {
+    border-color: #667eea;
+    background: #f0f4ff;
+}
+
+.article-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 10px;
+}
+
+.article-select {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+
+.article-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    cursor: pointer;
+    flex: 1;
+}
+
+.article-title:hover {
+    color: #667eea;
+}
+
+.article-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.article-meta {
+    display: flex;
+    gap: 15px;
+    font-size: 13px;
+    color: #666;
+    margin-bottom: 10px;
+}
+
+.article-meta span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.article-category {
+    background: #e0e7ff;
+    color: #3730a3;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+
+.article-summary {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.6;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.article-tags {
+    display: flex;
+    gap: 6px;
+    margin-top: 10px;
+}
+
+.article-tag {
+    background: #f3f4f6;
+    color: #6b7280;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+
+/* 分页 */
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    margin-top: 20px;
+}
+
+#page-info {
+    font-size: 14px;
+    color: #666;
+}
+
+/* 空状态 */
+.empty-text {
+    text-align: center;
+    color: #999;
+    padding: 40px;
+}
+
+.loading-text {
+    text-align: center;
+    color: #666;
+    padding: 40px;
+}
+
+/* 详情模态框 */
+#detail-body .detail-section {
+    margin-bottom: 20px;
+}
+
+#detail-body .detail-section h4 {
+    color: #667eea;
+    margin-bottom: 10px;
+    font-size: 16px;
+}
+
+#detail-body .detail-content {
+    white-space: pre-wrap;
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 8px;
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+    .toolbar {
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .toolbar-left, .toolbar-right {
+        width: 100%;
+        flex-wrap: wrap;
+    }
+
+    .search-box input {
+        width: 100%;
+    }
+
+    .article-card-header {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .article-actions {
+        width: 100%;
+        justify-content: flex-end;
+    }
+}

static/css/style.css

@@ -768,4 +768,37 @@ body {
 .search-entrance-link small {
     font-size: 13px;
     opacity: 0.8;
+}
+
+/* 内容库入口链接 */
+.library-entrance-link {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+    padding: 40px 80px;
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    color: white;
+    text-decoration: none;
+    border-radius: 12px;
+    transition: all 0.3s;
+}
+
+.library-entrance-link:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
+}
+
+.library-entrance-link i {
+    font-size: 48px;
+}
+
+.library-entrance-link span {
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.library-entrance-link small {
+    font-size: 13px;
+    opacity: 0.8;
 }

static/js/library.js

@@ -0,0 +1,482 @@
+// API基础地址
+const API_BASE = '';
+
+// 状态
+let articles = [];
+let currentPage = 1;
+let pageSize = 20;
+let totalCount = 0;
+let selectedIds = new Set();
+let currentArticleId = null;
+
+// 页面加载
+document.addEventListener('DOMContentLoaded', () => {
+    loadArticles();
+    loadCategories();
+    
+    // 搜索防抖
+    let searchTimeout;
+    document.getElementById('search-input').addEventListener('input', (e) => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+            currentPage = 1;
+            loadArticles();
+        }, 300);
+    });
+    
+    // 分类筛选
+    document.getElementById('category-filter').addEventListener('change', () => {
+        currentPage = 1;
+        loadArticles();
+    });
+});
+
+// 加载文章列表
+async function loadArticles() {
+    const keyword = document.getElementById('search-input').value.trim();
+    const category = document.getElementById('category-filter').value;
+    
+    const params = new URLSearchParams({
+        limit: pageSize,
+        offset: (currentPage - 1) * pageSize
+    });
+    
+    if (keyword) {
+        const response = await fetch(`${API_BASE}/api/articles/search?q=${encodeURIComponent(keyword)}${category ? '&category=' + encodeURIComponent(category) : ''}`);
+        const data = await response.json();
+        
+        if (data.success) {
+            articles = data.articles;
+            totalCount = data.count;
+        }
+    } else {
+        const response = await fetch(`${API_BASE}/api/articles?${params.toString()}`);
+        const data = await response.json();
+        
+        if (data.success) {
+            articles = data.articles;
+            totalCount = data.count;
+        }
+    }
+    
+    displayArticles();
+    updatePagination();
+    updateStats();
+}
+
+// 加载分类列表
+async function loadCategories() {
+    try {
+        const response = await fetch(`${API_BASE}/api/articles?limit=1000`);
+        const data = await response.json();
+        
+        if (data.success) {
+            const categories = new Set();
+            data.articles.forEach(a => {
+                if (a.category) categories.add(a.category);
+            });
+            
+            const select = document.getElementById('category-filter');
+            select.innerHTML = '<option value="">全部分类</option>' + 
+                Array.from(categories).map(c => `<option value="${escapeHtml(c)}">${escapeHtml(c)}</option>`).join('');
+        }
+    } catch (error) {
+        console.error('加载分类失败:', error);
+    }
+}
+
+// 显示文章列表
+function displayArticles() {
+    const container = document.getElementById('articles-list');
+    
+    if (articles.length === 0) {
+        container.innerHTML = '<div class="empty-text">暂无文章</div>';
+        return;
+    }
+    
+    container.innerHTML = articles.map(article => {
+        const productNames = safeParseJSON(article.product_names, []);
+        const keywords = safeParseJSON(article.keywords, []);
+        
+        return `
+            <div class="article-card ${selectedIds.has(article.id) ? 'selected' : ''}" id="article-${article.id}">
+                <div class="article-card-header">
+                    <label class="checkbox-wrapper">
+                        <input type="checkbox" class="article-select" 
+                            ${selectedIds.has(article.id) ? 'checked' : ''} 
+                            onchange="toggleSelect(${article.id})">
+                    </label>
+                    <div class="article-title" onclick="showDetail(${article.id})">
+                        ${escapeHtml(productNames.join(', ') || '未命名')}
+                    </div>
+                    <div class="article-actions">
+                        <button onclick="editArticle(${article.id})" class="btn btn-sm btn-secondary">
+                            <i class="ri-edit-line"></i>
+                        </button>
+                        <button onclick="deleteArticle(${article.id})" class="btn btn-sm btn-danger">
+                            <i class="ri-delete-bin-line"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="article-meta">
+                    ${article.category ? `<span class="article-category">${escapeHtml(article.category)}</span>` : ''}
+                    <span><i class="ri-link"></i> ${escapeHtml(article.source || '未知来源')}</span>
+                    <span><i class="ri-calendar-line"></i> ${formatDate(article.fetch_date)}</span>
+                </div>
+                <div class="article-summary">${escapeHtml(article.summary || '')}</div>
+                ${keywords.length > 0 ? `
+                    <div class="article-tags">
+                        ${keywords.slice(0, 5).map(k => `<span class="article-tag">${escapeHtml(k)}</span>`).join('')}
+                    </div>
+                ` : ''}
+            </div>
+        `;
+    }).join('');
+}
+
+// 更新分页
+function updatePagination() {
+    const totalPages = Math.ceil(totalCount / pageSize);
+    document.getElementById('page-info').textContent = `第 ${currentPage} / ${totalPages || 1} 页`;
+    
+    document.getElementById('prev-btn').disabled = currentPage <= 1;
+    document.getElementById('next-btn').disabled = currentPage >= totalPages;
+}
+
+// 更新统计
+function updateStats() {
+    document.getElementById('total-count').textContent = `${totalCount} 篇文章`;
+}
+
+// 上一页
+function prevPage() {
+    if (currentPage > 1) {
+        currentPage--;
+        loadArticles();
+    }
+}
+
+// 下一页
+function nextPage() {
+    const totalPages = Math.ceil(totalCount / pageSize);
+    if (currentPage < totalPages) {
+        currentPage++;
+        loadArticles();
+    }
+}
+
+// 刷新列表
+function refreshList() {
+    loadArticles();
+}
+
+// 全选/取消全选
+function toggleSelectAll() {
+    const checked = document.getElementById('select-all').checked;
+    
+    if (checked) {
+        articles.forEach(a => selectedIds.add(a.id));
+    } else {
+        selectedIds.clear();
+    }
+    
+    displayArticles();
+    updateBatchActions();
+}
+
+// 切换单个选择
+function toggleSelect(id) {
+    if (selectedIds.has(id)) {
+        selectedIds.delete(id);
+    } else {
+        selectedIds.add(id);
+    }
+    
+    updateBatchActions();
+}
+
+// 更新批量操作按钮
+function updateBatchActions() {
+    const batchActions = document.getElementById('batch-actions');
+    
+    if (selectedIds.size > 0) {
+        batchActions.style.display = 'flex';
+        document.getElementById('selected-count').textContent = `已选 ${selectedIds.size} 篇`;
+    } else {
+        batchActions.style.display = 'none';
+    }
+}
+
+// 显示详情
+async function showDetail(id) {
+    currentArticleId = id;
+    const article = articles.find(a => a.id === id);
+    
+    if (!article) {
+        const response = await fetch(`${API_BASE}/api/articles/${id}`);
+        const data = await response.json();
+        if (data.success) {
+            Object.assign(article, data.article);
+        }
+    }
+    
+    const productNames = safeParseJSON(article.product_names, []);
+    const keywords = safeParseJSON(article.keywords, []);
+    
+    const body = document.getElementById('detail-body');
+    body.innerHTML = `
+        <div class="detail-section">
+            <h4><i class="ri-price-tag-3-line"></i> 产品名称</h4>
+            <p>${escapeHtml(productNames.join(', '))}</p>
+        </div>
+        <div class="detail-meta" style="display: flex; gap: 20px; background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
+            <div><strong>分类:</strong> ${escapeHtml(article.category || '未分类')}</div>
+            <div><strong>来源:</strong> ${escapeHtml(article.source)}</div>
+            <div><strong>时间:</strong> ${formatDate(article.fetch_date)}</div>
+        </div>
+        ${article.url ? `<div class="detail-section"><h4><i class="ri-link"></i> 原文链接</h4><a href="${escapeHtml(article.url)}" target="_blank">${escapeHtml(article.url)}</a></div>` : ''}
+        ${keywords.length > 0 ? `<div class="detail-section"><h4><i class="ri-keyword-line"></i> 关键词</h4><p>${escapeHtml(keywords.join(', '))}</p></div>` : ''}
+        <div class="detail-section">
+            <h4><i class="ri-file-text-line"></i> 摘要</h4>
+            <p>${escapeHtml(article.summary || '无')}</p>
+        </div>
+        <div class="detail-section">
+            <h4><i class="ri-align-left"></i> 内容</h4>
+            <div class="detail-content">${escapeHtml(article.content || '无内容')}</div>
+        </div>
+    `;
+    
+    document.getElementById('detail-modal').classList.add('active');
+}
+
+// 显示添加模态框
+function showAddModal() {
+    currentArticleId = null;
+    document.getElementById('modal-title').innerHTML = '<i class="ri-file-add-line"></i> 添加文章';
+    document.getElementById('article-form').reset();
+    document.getElementById('article-modal').classList.add('active');
+}
+
+// 编辑文章
+function editArticle(id) {
+    const article = articles.find(a => a.id === id);
+    if (!article) return;
+    
+    currentArticleId = id;
+    document.getElementById('modal-title').innerHTML = '<i class="ri-edit-line"></i> 编辑文章';
+    
+    const productNames = safeParseJSON(article.product_names, []);
+    const keywords = safeParseJSON(article.keywords, []);
+    
+    document.getElementById('article-id').value = id;
+    document.getElementById('article-products').value = productNames.join(', ');
+    document.getElementById('article-category').value = article.category || '';
+    document.getElementById('article-keywords').value = keywords.join(', ');
+    document.getElementById('article-summary').value = article.summary || '';
+    document.getElementById('article-content').value = article.content || '';
+    document.getElementById('article-source').value = article.source || '';
+    document.getElementById('article-url').value = article.url || '';
+    
+    document.getElementById('article-modal').classList.add('active');
+}
+
+// 编辑当前文章
+function editCurrentArticle() {
+    if (currentArticleId) {
+        closeModal('detail-modal');
+        editArticle(currentArticleId);
+    }
+}
+
+// 保存文章
+async function saveArticle() {
+    const id = document.getElementById('article-id').value;
+    const products = document.getElementById('article-products').value.trim();
+    const summary = document.getElementById('article-summary').value.trim();
+    const content = document.getElementById('article-content').value.trim();
+    const source = document.getElementById('article-source').value.trim();
+    
+    if (!products || !summary || !content || !source) {
+        showToast('请填写必填字段', 'error');
+        return;
+    }
+    
+    const articleData = {
+        product_names: products.split(',').map(p => p.trim()),
+        category: document.getElementById('article-category').value.trim(),
+        keywords: document.getElementById('article-keywords').value.split(',').map(k => k.trim()).filter(k => k),
+        summary: summary,
+        content: content,
+        source: source,
+        url: document.getElementById('article-url').value.trim()
+    };
+    
+    try {
+        if (id) {
+            // 更新 - 先删除再添加
+            await fetch(`${API_BASE}/api/articles/${id}`, { method: 'DELETE' });
+        }
+        
+        const response = await fetch(`${API_BASE}/api/articles`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(articleData)
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            showToast(id ? '文章已更新' : '文章已添加', 'success');
+            closeModal('article-modal');
+            loadArticles();
+        } else {
+            showToast('保存失败: ' + data.error, 'error');
+        }
+    } catch (error) {
+        showToast('保存出错', 'error');
+    }
+}
+
+// 删除文章
+async function deleteArticle(id) {
+    if (!confirm('确定要删除这篇文章吗？')) return;
+    
+    try {
+        const response = await fetch(`${API_BASE}/api/articles/${id}`, {
+            method: 'DELETE'
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            showToast('文章已删除', 'success');
+            loadArticles();
+        } else {
+            showToast('删除失败', 'error');
+        }
+    } catch (error) {
+        showToast('删除出错', 'error');
+    }
+}
+
+// 删除当前文章
+function deleteCurrentArticle() {
+    if (currentArticleId) {
+        deleteArticle(currentArticleId);
+        closeModal('detail-modal');
+    }
+}
+
+// 批量删除
+async function batchDelete() {
+    if (selectedIds.size === 0) return;
+    
+    if (!confirm(`确定要删除选中的 ${selectedIds.size} 篇文章吗？`)) return;
+    
+    let deleted = 0;
+    for (const id of selectedIds) {
+        try {
+            await fetch(`${API_BASE}/api/articles/${id}`, { method: 'DELETE' });
+            deleted++;
+        } catch (error) {
+            console.error(`删除 ${id} 失败:`, error);
+        }
+    }
+    
+    selectedIds.clear();
+    showToast(`已删除 ${deleted} 篇文章`, 'success');
+    loadArticles();
+}
+
+// 导出文章
+async function exportArticles() {
+    const keyword = document.getElementById('search-input').value.trim();
+    const category = document.getElementById('category-filter').value;
+    
+    let exportArticles = articles;
+    
+    // 如果有搜索条件，获取全部匹配的
+    if (keyword || category) {
+        const params = new URLSearchParams();
+        if (keyword) params.append('q', keyword);
+        if (category) params.append('category', category);
+        
+        const response = await fetch(`${API_BASE}/api/articles/search?${params.toString()}`);
+        const data = await response.json();
+        if (data.success) {
+            exportArticles = data.articles;
+        }
+    }
+    
+    if (exportArticles.length === 0) {
+        showToast('没有可导出的文章', 'error');
+        return;
+    }
+    
+    // 导出为 JSON
+    const exportData = exportArticles.map(a => ({
+        product_names: safeParseJSON(a.product_names, []),
+        category: a.category,
+        keywords: safeParseJSON(a.keywords, []),
+        summary: a.summary,
+        content: a.content,
+        source: a.source,
+        url: a.url
+    }));
+    
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `articles_${new Date().toISOString().split('T')[0]}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    
+    showToast(`已导出 ${exportArticles.length} 篇文章`, 'success');
+}
+
+// 关闭模态框
+function closeModal(modalId) {
+    document.getElementById(modalId).classList.remove('active');
+}
+
+// 显示提示
+function showToast(message, type = '') {
+    const toast = document.getElementById('toast');
+    toast.textContent = message;
+    toast.className = `toast active ${type}`;
+    
+    setTimeout(() => {
+        toast.classList.remove('active');
+    }, 3000);
+}
+
+// HTML转义
+function escapeHtml(text) {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// 安全解析JSON
+function safeParseJSON(str, defaultVal) {
+    try {
+        return JSON.parse(str || JSON.stringify(defaultVal));
+    } catch {
+        return defaultVal;
+    }
+}
+
+// 日期格式化
+function formatDate(dateString) {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}

templates/index.html

@@ -97,21 +97,17 @@
                 </div>
             </div>
 
-            <!-- 右侧：内容库 -->
+            <!-- 右侧：内容库入口 -->
             <div class="panel">
                 <div class="panel-header">
                     <h2><i class="ri-folder-line"></i> 内容库文章</h2>
-                    <div class="panel-actions">
-                        <input type="text" id="article-search" placeholder="搜索文章..." class="search-input">
-                        <button onclick="showAddArticleModal()" class="btn btn-primary">
-                            <i class="ri-add-line"></i> 添加文章
-                        </button>
-                    </div>
                 </div>
-                <div class="panel-body">
-                    <div class="articles-list" id="articles-list">
-                        <div class="empty-text">暂无文章</div>
-                    </div>
+                <div class="panel-body" style="text-align: center; padding: 40px;">
+                    <a href="/library" class="library-entrance-link">
+                        <i class="ri-folder-line"></i>
+                        <span>点击进入内容库页面</span>
+                        <small>查看、编辑、导出所有文章</small>
+                    </a>
                 </div>
             </div>
         </div>

templates/library.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>内容库 - 参数数据自动化管理系统</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <link rel="stylesheet" href="/static/css/library.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
+</head>
+<body>
+    <div class="library-container">
+        <!-- 头部 -->
+        <header class="library-header">
+            <div class="header-left">
+                <a href="/" class="back-link">
+                    <i class="ri-arrow-left-line"></i> 返回主页
+                </a>
+                <h1><i class="ri-folder-line"></i> 内容库</h1>
+            </div>
+            <div class="header-right">
+                <div class="stats-info">
+                    <span id="total-count">0 篇文章</span>
+                </div>
+            </div>
+        </header>
+
+        <!-- 工具栏 -->
+        <div class="toolbar">
+            <div class="toolbar-left">
+                <div class="search-box">
+                    <i class="ri-search-line"></i>
+                    <input type="text" id="search-input" placeholder="搜索标题、内容、来源...">
+                </div>
+                <select id="category-filter" class="category-select">
+                    <option value="">全部分类</option>
+                </select>
+            </div>
+            <div class="toolbar-right">
+                <button onclick="showAddModal()" class="btn btn-primary">
+                    <i class="ri-add-line"></i> 添加文章
+                </button>
+                <button onclick="exportArticles()" class="btn btn-secondary">
+                    <i class="ri-download-line"></i> 导出
+                </button>
+                <button onclick="refreshList()" class="btn btn-secondary">
+                    <i class="ri-refresh-line"></i> 刷新
+                </button>
+            </div>
+        </div>
+
+        <!-- 文章列表 -->
+        <div class="articles-section">
+            <div class="articles-header">
+                <label class="checkbox-wrapper">
+                    <input type="checkbox" id="select-all" onchange="toggleSelectAll()">
+                    <span>全选</span>
+                </label>
+                <div class="batch-actions" id="batch-actions" style="display: none;">
+                    <span id="selected-count">已选 0 篇</span>
+                    <button onclick="batchDelete()" class="btn btn-danger btn-sm">
+                        <i class="ri-delete-bin-line"></i> 批量删除
+                    </button>
+                </div>
+            </div>
+            <div class="articles-body">
+                <div id="articles-list" class="articles-list">
+                    <div class="loading-text">加载中...</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" id="pagination">
+            <button onclick="prevPage()" class="btn btn-secondary btn-sm" id="prev-btn">上一页</button>
+            <span id="page-info">第 1 页</span>
+            <button onclick="nextPage()" class="btn btn-secondary btn-sm" id="next-btn">下一页</button>
+        </div>
+    </div>
+
+    <!-- 添加/编辑文章模态框 -->
+    <div id="article-modal" class="modal">
+        <div class="modal-content large">
+            <div class="modal-header">
+                <h3 id="modal-title"><i class="ri-file-add-line"></i> 添加文章</h3>
+                <button onclick="closeModal('article-modal')" class="close-btn">
+                    <i class="ri-close-line"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form id="article-form">
+                    <input type="hidden" id="article-id">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>产品名称 *（多个用逗号分隔）</label>
+                            <input type="text" id="article-products" required placeholder="GPT-4o, Claude 3">
+                        </div>
+                        <div class="form-group">
+                            <label>分类</label>
+                            <input type="text" id="article-category" placeholder="AI模型">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>关键词（多个用逗号分隔）</label>
+                        <input type="text" id="article-keywords" placeholder="大模型, 多模态">
+                    </div>
+                    <div class="form-group">
+                        <label>摘要总结 *</label>
+                        <textarea id="article-summary" rows="3" required placeholder="文章简要总结..."></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>具体内容 *</label>
+                        <textarea id="article-content" rows="12" required placeholder="文章详细内容..."></textarea>
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>来源 *</label>
+                            <input type="text" id="article-source" required placeholder="官方网站">
+                        </div>
+                        <div class="form-group">
+                            <label>URL</label>
+                            <input type="url" id="article-url" placeholder="https://...">
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button onclick="closeModal('article-modal')" class="btn btn-secondary">取消</button>
+                <button onclick="saveArticle()" class="btn btn-primary">保存</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 文章详情模态框 -->
+    <div id="detail-modal" class="modal">
+        <div class="modal-content large">
+            <div class="modal-header">
+                <h3><i class="ri-file-text-line"></i> 文章详情</h3>
+                <button onclick="closeModal('detail-modal')" class="close-btn">
+                    <i class="ri-close-line"></i>
+                </button>
+            </div>
+            <div class="modal-body" id="detail-body">
+            </div>
+            <div class="modal-footer">
+                <button onclick="closeModal('detail-modal')" class="btn btn-secondary">关闭</button>
+                <button onclick="editCurrentArticle()" class="btn btn-primary">
+                    <i class="ri-edit-line"></i> 编辑
+                </button>
+                <button onclick="deleteCurrentArticle()" class="btn btn-danger">
+                    <i class="ri-delete-bin-line"></i> 删除
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 提示消息 -->
+    <div id="toast" class="toast"></div>
+
+    <script src="/static/js/library.js"></script>
+</body>
+</html>