jimmychen/PoemClassify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

所有功能已完成，运行OK

Browse Source
This commit is contained in:
JimmysAIPG
2026-03-23 22:31:48 +08:00
commit 44fd84d380
8 changed files with 3495 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
frontend/index.html Normal file
View File

@@ -0,0 +1,193 @@
<!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="style.css">
</head>
<body>
<!-- 顶部导航 -->
<header class="header">
<div class="header-inner">
<div class="brand">
<span class="brand-icon">詩</span>
<div>
<h1>古诗词阅读网</h1>
<p class="tagline">品读经典 · 感悟人生</p>
</div>
</div>
<nav class="nav">
<a href="#" class="nav-item active" data-view="all">全部诗词</a>
<a href="#" class="nav-item" data-view="unread">未读</a>
<a href="#" class="nav-item" data-view="read">已读</a>
<a href="#" class="nav-item" data-action="random">随机一首</a>
</nav>
</div>
</header>
<!-- 主容器 -->
<main class="main">
<!-- 侧边栏 -->
<aside class="sidebar">
<!-- 统计面板 -->
<div class="card stats-card">
<h3 class="card-title">阅读统计</h3>
<div class="stats-grid">
<div class="stat-item">
<span class="stat-value" id="totalPoems">0</span>
<span class="stat-label">总数</span>
</div>
<div class="stat-item read">
<span class="stat-value" id="readCount">0</span>
<span class="stat-label">已读</span>
</div>
<div class="stat-item unread">
<span class="stat-value" id="unreadCount">0</span>
<span class="stat-label">未读</span>
</div>
</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-fill" style="width: 0%"></div>
</div>
<div class="progress-text">
<span>进度：<span id="progressPercent">0</span>%</span>
<span><span id="progressText">0/0</span>首</span>
</div>
</div>
</div>
<!-- 上传面板 -->
<div class="card upload-card">
<h3 class="card-title">导入诗词</h3>
<div class="upload-area" id="uploadArea">
<input type="file" id="fileInput" accept=".json,.jsonl" />
<label for="fileInput" class="upload-label">
<svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
<span class="upload-text">点击或拖拽上传</span>
<span class="upload-hint">支持 JSON / JSONL 格式</span>
</label>
</div>
<button class="btn btn-primary btn-block" onclick="uploadFile()">导入</button>
<div id="uploadStatus" class="status-msg"></div>
</div>
<!-- 搜索 -->
<div class="card search-card">
<h3 class="card-title">搜索</h3>
<div class="search-box">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
<input type="text" id="searchInput" class="search-input" placeholder="搜索标题、作者..." />
</div>
</div>
<!-- 分类筛选 -->
<div class="card filter-card">
<h3 class="card-title">分类筛选</h3>
<div id="categoryTabs" class="category-tabs"></div>
<div id="tagCloud" class="tag-cloud"></div>
<div class="selected-filters" id="selectedFilters"></div>
<button class="btn btn-ghost btn-sm" onclick="clearFilters()" id="clearFiltersBtn" style="display:none">清除筛选</button>
</div>
</aside>
<!-- 内容区 -->
<div class="content">
<!-- 结果头部 -->
<div class="content-header">
<h2 id="resultsTitle">诗词列表</h2>
<span class="badge" id="resultCount">0 首</span>
</div>
<!-- 诗词网格 -->
<div id="poemGrid" class="poem-grid"></div>
<!-- 分页控件 -->
<div id="pagination" class="pagination" style="display:none">
<button class="page-btn" id="prevPage" onclick="goToPage(state.currentPage - 1)">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="15 18 9 12 15 6"/>
</svg>
上一页
</button>
<div class="page-info">
<span id="pageInfo">第 1 / 1 页</span>
</div>
<button class="page-btn" id="nextPage" onclick="goToPage(state.currentPage + 1)">
下一页
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</button>
</div>
<!-- 空状态 -->
<div id="emptyState" class="empty-state" style="display:none">
<div class="empty-icon">
<svg viewBox="0 0 120 120" fill="none">
<circle cx="60" cy="60" r="50" fill="#f8f5f0" stroke="#d4c5a9" stroke-width="1"/>
<path d="M40 45 L60 35 L80 45 L80 80 L40 80 Z" fill="#ede8df" stroke="#c4b5a0" stroke-width="1"/>
<line x1="50" y1="52" x2="70" y2="52" stroke="#c4b5a0" stroke-width="1"/>
<line x1="50" y1="60" x2="70" y2="60" stroke="#c4b5a0" stroke-width="1"/>
<line x1="50" y1="68" x2="65" y2="68" stroke="#c4b5a0" stroke-width="1"/>
</svg>
</div>
<h3>暂无诗词</h3>
<p>上传 JSON / JSONL 格式的诗词文件开始阅读</p>
</div>
<!-- 加载状态 -->
<div id="loading" class="loading" style="display:none">
<div class="spinner"></div>
<p>加载中...</p>
</div>
</div>
</main>
<!-- 诗词详情弹窗 -->
<div id="poemModal" class="modal" style="display:none">
<div class="modal-backdrop" onclick="closeModal()"></div>
<div class="modal-panel">
<div class="modal-header">
<div>
<h3 id="modalTitle" class="modal-title"></h3>
<p class="modal-author">作者：<span id="modalAuthor"></span></p>
</div>
<button class="modal-close" onclick="closeModal()" aria-label="关闭">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
<div class="modal-body">
<div class="modal-content" id="modalContent"></div>
<div class="modal-section">
<h4 class="section-title">分类标签</h4>
<div id="modalTags" class="modal-tags"></div>
</div>
</div>
<div class="modal-footer">
<label class="read-checkbox">
<input type="checkbox" id="modalReadCheck" onchange="toggleModalRead()" />
<span>标记为已读</span>
</label>
<button class="btn btn-primary" onclick="closeModal()">关闭</button>
</div>
</div>
</div>
<!-- 提示消息 -->
<div id="toast" class="toast" style="display:none">
<span id="toastMessage"></span>
</div>
<script src="script.js"></script>
</body>
</html>