🎁 买Hostinger主机，免费获得此源码 | zuofuye8.cn

阅读书单管理

轻松记录与追踪你的阅读旅程

📖
添加书籍，记录阅读状态
未读 · 阅读中 · 已读完
📊
查看阅读统计
总数量、完成率一目了然
🌙
深色模式支持
舒适阅读，昼夜皆宜
💾
数据本地存储
隐私安全，无需联网
阅读书单管理
0
总书籍
0
未读
0
阅读中
0
已读完
0%
完成率
➕ 添加新书

适合哪些人用？

👥 爱读书的人、想养成阅读习惯的人、知识管理爱好者

核心功能亮点

为什么选择自建而不用现成App？

📊 微信读书：只能记电子书；印象笔记：功能杂乱；自建书单管理：专注阅读追踪，笔记与书目绑定，数据完全自有

常见问题

❓ 可以记录纸质书吗？
支持所有格式，纸质书、电子书、有声书都可以添加并记录进度。
❓ 读书笔记可以搜索吗？
支持关键词搜索，快速找到某本书的笔记或某个知识点。
❓ 可以分享书单给朋友吗？
你的书单是一个网页，分享链接即可，朋友打开就能看到你的推荐书单。

3步部署到你的网站

  1. 购买 Hostinger 主机（约¥17/月起，支付宝可付）
  2. 联系 QQ：2445964978，购买后免费获取 阅读书单管理 完整源码
  3. 上传 index.html 到网站目录，访问域名即可直接使用

🎁 购买主机 · 免费领取完整源码

购买 Hostinger 主机后联系我，获取源码打包下载链接

扫码加QQ

📱 QQ：2445964978

📧 [email protected]

📖 完整建站图文教程 →

🚀 立即购买 Hostinger
border-radius: 6px; font-size: 0.8rem; font-weight: 500; } .book-status.to-read { background: var(--surface-alt); color: var(--text-muted); } .book-status.reading { background: var(--warning-light); color: var(--warning); } .book-status.finished { background: var(--success-light); color: var(--success); } .book-status.abandoned { background: var(--danger-light); color: var(--danger); } .book-rating { display: flex; gap: 2px; } .book-star { font-size: 0.9rem; color: var(--text-faint); cursor: pointer; transition: color 0.15s; } .book-star.filled { color: var(--warning); } .book-star:hover { color: var(--warning); } .book-date { font-size: 0.8rem; color: var(--text-faint); font-family: 'IBM Plex Mono', monospace; } .book-actions { display: flex; gap: 8px; flex-shrink: 0; } .book-action-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--text-muted); transition: all 0.15s; } .book-action-btn:hover { background: var(--surface-alt); color: var(--text); } .book-action-btn.danger:hover { background: var(--danger-light); color: var(--danger); border-color: var(--danger); } /* Book Notes */ .book-notes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .book-notes-toggle { font-size: 0.8rem; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; } .book-notes-toggle:hover { text-decoration: underline; } .book-notes-content { margin-top: 12px; display: none; } .book-notes-content.visible { display: block; } .book-notes-textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-family: 'IBM Plex Serif', serif; font-size: 0.9rem; line-height: 1.6; background: var(--bg); color: var(--text); resize: vertical; } .book-notes-textarea:focus { outline: none; border-color: var(--accent); } /* Status Dropdown */ .status-dropdown { position: relative; } .status-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow-lg); z-index: 50; min-width: 140px; display: none; } .status-dropdown-menu.visible { display: block; } .status-option { padding: 10px 14px; font-size: 0.85rem; cursor: pointer; transition: background 0.15s; display: flex; align-items: center; gap: 8px; } .status-option:first-child { border-radius: 8px 8px 0 0; } .status-option:last-child { border-radius: 0 0 8px 8px; } .status-option:hover { background: var(--surface-alt); } /* Empty State */ .empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); } .empty-state-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; } .empty-state-text { font-size: 1rem; margin-bottom: 8px; } .empty-state-sub { font-size: 0.9rem; color: var(--text-faint); } /* Reading Goal */ .goal-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 24px; } .goal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .goal-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .goal-edit-btn { font-size: 0.8rem; color: var(--accent); background: none; border: none; cursor: pointer; font-family: inherit; } .goal-progress { display: flex; align-items: center; gap: 16px; } .goal-bar { flex: 1; height: 12px; background: var(--surface-alt); border-radius: 6px; overflow: hidden; } .goal-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width 0.3s; } .goal-text { font-size: 1rem; font-weight: 600; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; } .goal-input-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; display: none; } .goal-input-row.visible { display: flex; } .goal-input { width: 80px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; text-align: center; background: var(--bg); color: var(--text); } .goal-input:focus { outline: none; border-color: var(--accent); } .goal-save-btn { padding: 8px 16px; border-radius: 6px; border: none; background: var(--accent); color: white; font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; } /* Settings Modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: all 0.2s; } .modal-overlay.visible { opacity: 1; visibility: visible; } .modal { background: var(--surface); border-radius: 16px; padding: 24px; max-width: 400px; width: 100%; max-height: 80vh; overflow-y: auto; } .modal-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 20px; } .modal-section { margin-bottom: 20px; } .modal-section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 12px; } .modal-btn { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 0.9rem; cursor: pointer; margin-bottom: 8px; text-align: left; transition: all 0.15s; } .modal-btn:hover { background: var(--surface-alt); } .modal-btn.danger { color: var(--danger); border-color: var(--danger-light); } .modal-btn.danger:hover { background: var(--danger-light); } .modal-close { width: 100%; padding: 12px; border-radius: 8px; border: none; background: var(--accent); color: white; font-family: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; margin-top: 12px; } /* Toast */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 8px; font-size: 0.9rem; z-index: 1000; transform: translateY(100px); opacity: 0; transition: all 0.3s; } .toast.visible { transform: translateY(0); opacity: 1; } /* Responsive */ @media (max-width: 600px) { .container { padding: 16px; } .book-card { flex-direction: column; } .book-cover { width: 100%; height: 120px; } .book-header { flex-direction: column; } .book-actions { margin-top: 12px; } }

Shelf

Your personal reading list. Track what you read, capture what you learn.

📚
Reading List
To-read, reading, finished, abandoned
📝
Book Notes
Capture highlights and thoughts
🎯
Reading Goals
Set and track your yearly goal
⭐
Ratings
Rate books when you finish them
Shelf
⌂
0
Total Books
0
Finished
0
This Year
0
Books/Month
2025 Reading Goal
0 / 12
Add a Book
Saved