hz4th_coder
4d1fffccd1
- 创建 /library 内容库独立页面 - 支持文章列表展示、搜索、分类筛选 - 支持查看详情、编辑、删除 - 支持批量选择和批量删除 - 支持导出为 JSON 文件 - 分页显示 - 主页内容库区域改为入口链接
162 lines
7.0 KiB
HTML
162 lines
7.0 KiB
HTML
<!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> |