Initial commit

2026-03-25 13:20:39 +08:00
commit c1ecce9719
8 changed files with 992 additions and 0 deletions
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>我的书架 — Ecliptic Pathfinder</title>
+    <meta name="description" content="个人图书阅读管理 — 阅读进度与书库展示">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>{{CSS}}</style>
+</head>
+<body>
+
+<header class="hero">
+    <div class="hero-inner">
+        <h1>📚 我的书架</h1>
+        <p class="hero-sub">阅读是最好的投资</p>
+    </div>
+</header>
+
+<!-- 统计面板 -->
+<section class="stats-bar">
+    <div class="stat">
+        <span class="stat-num">{{TOTAL}}</span>
+        <span class="stat-label">总计</span>
+    </div>
+    <div class="stat stat--reading">
+        <span class="stat-num">{{READING}}</span>
+        <span class="stat-label">在读</span>
+    </div>
+    <div class="stat stat--read">
+        <span class="stat-num">{{READ}}</span>
+        <span class="stat-label">已读</span>
+    </div>
+    <div class="stat stat--to-read">
+        <span class="stat-num">{{TO_READ}}</span>
+        <span class="stat-label">待读</span>
+    </div>
+    <div class="stat stat--paper">
+        <span class="stat-num">{{PAPER}}</span>
+        <span class="stat-label">纸质</span>
+    </div>
+    <div class="stat stat--ebook">
+        <span class="stat-num">{{EBOOK}}</span>
+        <span class="stat-label">电子</span>
+    </div>
+</section>
+
+<!-- 视图切换 -->
+<nav class="view-nav">
+    <button class="view-btn active" data-view="progress">📖 阅读进度</button>
+    <button class="view-btn" data-view="library">📚 书库</button>
+    <button class="view-btn" data-view="tags">🏷️ 主题</button>
+</nav>
+
+<!-- 进度视图的子筛选 -->
+<nav class="filter-nav" id="filter-progress">
+    <button class="filter-btn active" data-filter="all">全部</button>
+    <button class="filter-btn" data-filter="reading">在读</button>
+    <button class="filter-btn" data-filter="read">已读</button>
+    <button class="filter-btn" data-filter="to-read">待读</button>
+</nav>
+
+<!-- 书库视图的子筛选 -->
+<nav class="filter-nav hidden" id="filter-library">
+    <button class="filter-btn active" data-filter="all">全部</button>
+    <button class="filter-btn" data-filter="paper">📕 纸质书</button>
+    <button class="filter-btn" data-filter="ebook">📱 电子书</button>
+</nav>
+
+<!-- 标签视图的按钮 -->
+<nav class="filter-nav hidden" id="filter-tags">
+    <button class="filter-btn tag-btn active" data-tag="">全部</button>
+    {{TAG_BUTTONS}}
+</nav>
+
+<!-- 书目卡片列表 -->
+<main class="book-grid">
+    {{BOOK_CARDS}}
+</main>
+
+<footer class="footer">
+    <p>Ecliptic Pathfinder · 生成于 <span id="gen-time"></span></p>
+</footer>
+
+<script>
+document.getElementById('gen-time').textContent = new Date().toLocaleDateString('zh-CN');
+
+const cards = document.querySelectorAll('.book-card');
+const viewBtns = document.querySelectorAll('.view-btn');
+const filterNavs = {
+    progress: document.getElementById('filter-progress'),
+    library: document.getElementById('filter-library'),
+    tags: document.getElementById('filter-tags'),
+};
+
+let currentView = 'progress';
+let currentFilter = 'all';
+let currentTag = '';
+
+function applyFilters() {
+    cards.forEach(card => {
+        let show = true;
+        if (currentView === 'progress' && currentFilter !== 'all') {
+            show = card.dataset.status === currentFilter;
+        } else if (currentView === 'library' && currentFilter !== 'all') {
+            show = card.dataset.format === currentFilter;
+        } else if (currentView === 'tags' && currentTag) {
+            const cardTags = card.dataset.tags.split(',').map(t => t.trim());
+            show = cardTags.includes(currentTag);
+        }
+        card.style.display = show ? '' : 'none';
+    });
+}
+
+viewBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        viewBtns.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentView = btn.dataset.view;
+        currentFilter = 'all';
+        currentTag = '';
+        Object.values(filterNavs).forEach(n => n.classList.add('hidden'));
+        if (filterNavs[currentView]) filterNavs[currentView].classList.remove('hidden');
+        // reset sub-filter active state
+        filterNavs[currentView]?.querySelectorAll('.filter-btn').forEach((b, i) => {
+            b.classList.toggle('active', i === 0);
+        });
+        applyFilters();
+    });
+});
+
+document.querySelectorAll('.filter-nav').forEach(nav => {
+    nav.addEventListener('click', e => {
+        const btn = e.target.closest('.filter-btn');
+        if (!btn) return;
+        nav.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        if (btn.dataset.tag !== undefined) {
+            currentTag = btn.dataset.tag;
+            currentFilter = 'all';
+        } else {
+            currentFilter = btn.dataset.filter;
+        }
+        applyFilters();
+    });
+});
+</script>
+</body>
+</html>