web/WeReadBoard
1
0 Fork 0
mirror of https://github.com/KingHWJ/WeReadBoard.git synced 2026-11-03 18:24:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 格式化 CSS、JS 和 HTML 代码

Browse Source
This commit is contained in:
admin committed 2026-09-22 09:31:55 +08:00
1 parent 40b00a8b40
commit 69bfe3ce0e
7 files changed
+3325 -158
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

legacy/classic/static/css/style.css
+99 -18
View File
@@ -154,12 +154,32 @@ body {
}
/* 所有主题相关元素平滑过渡 */
.navbar, .nav-link, .stat-card, .chart-card, .top-book-card, .book-card,
.book-cover-wrapper, .notebook-card, .note-stat, .discover-card, .discover-tab,
.modal-content, .modal-overlay, .footer, .db-alert-banner, .page-btn,
.btn-primary, .btn-secondary, .search-input, .shelf-search, .highlight-item,
.review-item, .detail-progress-info, .top-book-cover-wrapper,
.theme-toggle, .loading-spinner {
.navbar,
.nav-link,
.stat-card,
.chart-card,
.top-book-card,
.book-card,
.book-cover-wrapper,
.notebook-card,
.note-stat,
.discover-card,
.discover-tab,
.modal-content,
.modal-overlay,
.footer,
.db-alert-banner,
.page-btn,
.btn-primary,
.btn-secondary,
.search-input,
.shelf-search,
.highlight-item,
.review-item,
.detail-progress-info,
.top-book-cover-wrapper,
.theme-toggle,
.loading-spinner {
transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
@@ -264,12 +284,25 @@ body {
transform: scale(1.08);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun {
display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle { color: var(--toggle-icon-sun); }
.theme-toggle .icon-moon {
display: block;
}
[data-theme="dark"] .theme-toggle .icon-sun {
display: block;
}
[data-theme="dark"] .theme-toggle .icon-moon {
display: none;
}
[data-theme="dark"] .theme-toggle {
color: var(--toggle-icon-sun);
}
/* ===== 顶部常驻搜索框 ===== */
.global-search-bar {
@@ -403,8 +436,15 @@ body {
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.shelf-cat-sub {
@@ -617,8 +657,15 @@ body {
}
@keyframes fadeInTab {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== 读书排行（竖向列表） ===== */
@@ -1111,8 +1158,15 @@ body {
}
@keyframes slideDown {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ===== 加载动画 ===== */
@@ -1133,7 +1187,9 @@ body {
}
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
/* ===== 推荐发现区 ===== */
@@ -1964,78 +2020,100 @@ body {
.nav-links {
display: none;
}
.hero-title {
font-size: 24px;
}
.hero-stats {
gap: 24px;
}
.hero-stat-value {
font-size: 32px;
}
.charts-grid {
grid-template-columns: 1fr;
}
.chart-card.large {
grid-column: auto;
}
.book-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 12px;
}
.top-books-list {
gap: 8px;
}
.top-book-row {
padding: 8px 12px;
gap: 10px;
}
.top-book-mini-cover {
width: 36px;
height: 48px;
}
.top-book-rank-num {
width: 28px;
height: 28px;
font-size: 13px;
}
.nav-update {
display: none;
}
.global-search-wrapper {
max-width: 100%;
}
.thoughts-toolbar {
flex-direction: column;
align-items: stretch;
}
.thoughts-controls {
flex-direction: column;
gap: 8px;
}
.thoughts-search-input {
width: 100%;
}
.thoughts-sort-select {
width: 100%;
}
.shelf-search {
width: 140px;
}
.shelf-categories {
gap: 6px;
}
.shelf-cat-parent {
font-size: 12px;
padding: 4px 10px;
}
.shelf-cat-sub {
font-size: 11px;
padding: 3px 9px;
}
.shelf-cat-subs {
padding-left: 10px;
}
.back-to-top {
bottom: 20px;
right: 20px;
@@ -2043,13 +2121,16 @@ body {
height: 40px;
font-size: 18px;
}
.thoughts-page-header {
top: 0;
}
.thoughts-book-cover {
width: 48px;
height: 64px;
}
.thoughts-book-title {
font-size: 16px;
}
legacy/classic/static/js/app.js
+12 -6
View File
@@ -476,11 +476,13 @@ async function loadYearlyTrend() {
barWidth: "50%",
itemStyle: {
borderRadius: [8, 8, 0, 0],
color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1,
color: {
type: "linear", x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: c.accentLight },
{ offset: 1, color: c.accent },
] },
]
},
},
label: { show: true, position: "top", color: c.label, fontSize: 12, formatter: "{c}h" },
}],
@@ -538,11 +540,13 @@ async function loadTimeDistribution() {
lineStyle: { width: 2, color: c.accent },
itemStyle: { color: c.accent },
areaStyle: {
color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1,
color: {
type: "linear", x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: c.accent + "4D" },
{ offset: 1, color: c.accent + "05" },
] },
]
},
},
}],
});
@@ -650,11 +654,13 @@ async function loadAuthors() {
barWidth: "50%",
itemStyle: {
borderRadius: [0, 6, 6, 0],
color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0,
color: {
type: "linear", x: 0, y: 0, x2: 1, y2: 0,
colorStops: [
{ offset: 0, color: c.accentLight },
{ offset: 1, color: c.accent },
] },
]
},
},
label: { show: true, position: "right", color: c.label, fontSize: 12, formatter: "{c}本" },
}],
legacy/classic/templates/index.html
+14 -5
View File
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -18,6 +19,7 @@
})();
</script>
</head>
<body>
<!-- 数据库连接告警横幅（MySQL 连接失败时显示） -->
<div id="dbAlertBanner" class="db-alert-banner" style="display:none;">
@@ -56,7 +58,8 @@
<div class="container">
<div class="global-search-wrapper">
<span class="global-search-icon">🔍</span>
<input type="text" id="globalSearchInput" class="global-search-input" placeholder="搜索图书..." onkeydown="if(event.key==='Enter')globalSearch()">
<input type="text" id="globalSearchInput" class="global-search-input" placeholder="搜索图书..."
onkeydown="if(event.key==='Enter')globalSearch()">
<button class="global-search-btn" onclick="globalSearch()">搜索</button>
</div>
</div>
@@ -125,7 +128,8 @@
<label class="filter-checkbox">
<input type="checkbox" id="finishedOnly"> 仅看已读完
</label>
<button class="shelf-refresh-btn" id="shelfRefreshBtn" onclick="refreshShelf()" title="重新加载书架数据">
<button class="shelf-refresh-btn" id="shelfRefreshBtn" onclick="refreshShelf()"
title="重新加载书架数据">
<span class="btn-icon">⟳</span>
<span class="btn-text">刷新</span>
</button>
@@ -152,7 +156,8 @@
<div class="container" style="padding-top:40px;padding-bottom:60px">
<h2 class="section-title">🔍 推荐发现</h2>
<div class="discover-tabs">
<button class="discover-tab active" id="tabRecommend" onclick="switchDiscoverTab('recommend')">为你推荐</button>
<button class="discover-tab active" id="tabRecommend"
onclick="switchDiscoverTab('recommend')">为你推荐</button>
<button class="discover-tab" id="tabSearch" onclick="switchDiscoverTab('search')">搜索书籍</button>
</div>
<div id="recommendPanel" class="discover-panel">
@@ -164,7 +169,8 @@
</div>
<div id="searchPanel" class="discover-panel" style="display:none">
<div class="search-box">
<input type="text" id="searchInput" class="search-input" placeholder="输入书名、作者或关键词..." onkeydown="if(event.key==='Enter')doSearch()">
<input type="text" id="searchInput" class="search-input" placeholder="输入书名、作者或关键词..."
onkeydown="if(event.key==='Enter')doSearch()">
<button class="btn-primary" onclick="doSearch()">搜索</button>
</div>
<div class="discover-grid" id="searchGrid"></div>
@@ -183,7 +189,9 @@
</div>
</div>
<div class="container thoughts-content" id="thoughtsContent">
<div class="loading"><div class="loading-spinner"></div></div>
<div class="loading">
<div class="loading-spinner"></div>
</div>
</div>
</div>
@@ -208,4 +216,5 @@
<script src="/static/js/app.js"></script>
</body>
</html>
static/css/style.css
+100 -18
View File
@@ -154,12 +154,32 @@ body {
}
/* 所有主题相关元素平滑过渡 */
.navbar, .nav-link, .stat-card, .chart-card, .top-book-card, .book-card,
.book-cover-wrapper, .notebook-card, .note-stat, .discover-card, .discover-tab,
.modal-content, .modal-overlay, .footer, .db-alert-banner, .page-btn,
.btn-primary, .btn-secondary, .search-input, .shelf-search, .highlight-item,
.review-item, .detail-progress-info, .top-book-cover-wrapper,
.theme-toggle, .loading-spinner {
.navbar,
.nav-link,
.stat-card,
.chart-card,
.top-book-card,
.book-card,
.book-cover-wrapper,
.notebook-card,
.note-stat,
.discover-card,
.discover-tab,
.modal-content,
.modal-overlay,
.footer,
.db-alert-banner,
.page-btn,
.btn-primary,
.btn-secondary,
.search-input,
.shelf-search,
.highlight-item,
.review-item,
.detail-progress-info,
.top-book-cover-wrapper,
.theme-toggle,
.loading-spinner {
transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
@@ -264,12 +284,25 @@ body {
transform: scale(1.08);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun {
display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle { color: var(--toggle-icon-sun); }
.theme-toggle .icon-moon {
display: block;
}
[data-theme="dark"] .theme-toggle .icon-sun {
display: block;
}
[data-theme="dark"] .theme-toggle .icon-moon {
display: none;
}
[data-theme="dark"] .theme-toggle {
color: var(--toggle-icon-sun);
}
/* ===== 顶部常驻搜索框 ===== */
.global-search-bar {
@@ -403,8 +436,15 @@ body {
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.shelf-cat-sub {
@@ -617,8 +657,15 @@ body {
}
@keyframes fadeInTab {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== 读书排行（竖向列表） ===== */
@@ -1122,8 +1169,15 @@ body {
}
@keyframes slideDown {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ===== 加载动画 ===== */
@@ -1144,7 +1198,9 @@ body {
}
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
/* ===== 推荐发现区 ===== */
@@ -1975,81 +2031,104 @@ body {
.nav-links {
display: none;
}
.hero-title {
font-size: 24px;
}
.hero-stats {
gap: 24px;
}
.hero-stat-value {
font-size: 32px;
}
.charts-grid {
grid-template-columns: 1fr;
}
.chart-card.large {
grid-column: auto;
}
.book-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 12px;
}
.top-books-list {
gap: 8px;
}
.top-book-row {
padding: 8px 12px;
gap: 10px;
}
.top-book-mini-cover {
width: 36px;
height: 48px;
}
.top-book-rank-num {
width: 28px;
height: 28px;
font-size: 13px;
}
.nav-update {
display: none;
}
.global-search-wrapper {
max-width: 100%;
}
.thoughts-toolbar {
flex-direction: column;
align-items: stretch;
}
.thoughts-controls {
flex-direction: column;
gap: 8px;
}
.thoughts-search-input {
width: 100%;
}
.thoughts-sort-select {
width: 100%;
}
.shelf-search {
width: 140px;
}
.shelf-filters {
gap: 10px;
}
.shelf-categories {
gap: 6px;
}
.shelf-cat-parent {
font-size: 12px;
padding: 4px 10px;
}
.shelf-cat-sub {
font-size: 11px;
padding: 3px 9px;
}
.shelf-cat-subs {
padding-left: 10px;
}
.back-to-top {
bottom: 20px;
right: 20px;
@@ -2057,13 +2136,16 @@ body {
height: 40px;
font-size: 18px;
}
.thoughts-page-header {
top: 0;
}
.thoughts-book-cover {
width: 48px;
height: 64px;
}
.thoughts-book-title {
font-size: 16px;
}
static/css/styles.css
+2932 -98
View File
File diff suppressed because it is too large. Load diff
templates/index.html
+156 -11
View File
@@ -1,20 +1,165 @@
<!doctype html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="csrf-token" content="{{ csrf_token() }}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>阅间 · 微信读书看板</title>
<link rel="stylesheet" href="/static/css/styles.css">
<style>
.footer{flex-wrap:wrap;gap:12px}.footer-meta{display:flex;align-items:center;gap:12px}.icp-link{color:inherit;text-decoration:none}.icp-link:hover{color:var(--accent)}
@media(max-width:600px){.footer-state{display:none}}
.footer {
flex-wrap: wrap;
gap: 12px
}
.footer-meta {
display: flex;
align-items: center;
gap: 12px
}
.icp-link {
color: inherit;
text-decoration: none
}
.icp-link:hover {
color: var(--accent)
}
@media(max-width:600px) {
.footer-state {
display: none
}
}
</style>
</head>
<body>
<svg style="display:none" aria-hidden="true"><defs>
<symbol id="book" viewBox="0 0 24 24"><path d="M3 4c4-1 6 0 9 2 3-2 5-3 9-2v15c-4-1-6 0-9 2-3-2-5-3-9-2zM12 6v15"/></symbol><symbol id="grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></symbol><symbol id="note" viewBox="0 0 24 24"><path d="M13 4H5v16h14v-8M11 13l1-4 7-7 3 3-7 7z"/></symbol><symbol id="search-icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6.5"/><path d="m15 15 6 6"/></symbol><symbol id="chart" viewBox="0 0 24 24"><path d="M4 3v17h17M8 15v-4m5 4V7m5 8V4"/></symbol><symbol id="clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/></symbol><symbol id="moon" viewBox="0 0 24 24"><path d="M20 14A9 9 0 0 1 10 3a9 9 0 1 0 10 11Z"/></symbol><symbol id="sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1 1m12 12 1 1M5 19l1-1M18 6l1-1"/></symbol><symbol id="sync" viewBox="0 0 24 24"><path d="M20 7v5h-5M4 17v-5h5M6 6a8 8 0 0 1 14 6M4 12a8 8 0 0 0 14 6"/></symbol><symbol id="flag" viewBox="0 0 24 24"><path d="M5 21V3c5-4 9 4 14 0v11c-5 4-9-4-14 0"/></symbol>
</defs></svg>
<aside class="sidebar"><div class="logo"><div class="logo-mark"><svg><use href="#book"/></svg></div><div>阅间<small>READING SPACE</small></div></div><div class="navlabel">我的阅读空间</div><nav class="nav" aria-label="主导航"><button class="active" data-page="overview" title="阅读概览"><svg><use href="#grid"/></svg><span>阅读概览</span></button><button data-page="shelf" title="我的书架"><svg><use href="#book"/></svg><span>我的书架</span><em>8</em></button><button data-page="goals" title="阅读目标"><svg><use href="#flag"/></svg><span>阅读目标</span></button><button data-page="notes" title="笔记与划线"><svg><use href="#note"/></svg><span>笔记与划线</span></button><button data-page="discover" title="发现好书"><svg><use href="#search-icon"/></svg><span>发现好书</span></button></nav><div class="sidebar-bottom"><div class="connection"><span class="dot"></span>微信读书 · 个人空间<small>让每一页，都留下痕迹</small></div><div class="profile"><div class="avatar">读</div><div>我的阅读空间<small>数据来自你的微信读书账号</small></div></div></div></aside>
<main class="main"><header class="topbar"><div class="breadcrumb">我的空间 <span>/ &nbsp; <b id="crumb" style="font-weight:400">阅读概览</b></span></div><div class="top-actions"><label class="searchbox"><svg><use href="#search-icon"/></svg><input id="global-search" placeholder="搜索书籍、书单…" aria-label="全局搜索"><span class="key">⌘ K</span></label><button class="iconbtn" id="theme" aria-label="切换至暗色主题"><svg><use href="#moon"/></svg></button><div class="avatar">L</div><form method="post" action="{{ url_for('auth.logout') }}"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><button class="text-button logout-button" type="submit">退出</button></form></div></header><div class="demo-banner"><span><span class="dot"></span><span id="conn-state">正在连接微信读书…</span></span><span>阅读目标跨浏览器保存</span></div><div id="page-content"></div><footer class="footer"><span>阅间 · 与好书相伴，与自己相遇</span><div class="footer-meta"><span class="footer-state" id="footer-state">数据来自微信读书个人账号</span><a class="icp-link" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">浙ICP备202607916号-1</a></div></footer></main>
<dialog id="detail" aria-label="内容详情"><div class="dialog-top"><h2 id="detail-title">书籍详情</h2><button class="iconbtn" data-action="close-detail" aria-label="关闭详情">✕</button></div><div id="detail-content"></div></dialog>
<dialog id="goal-editor" aria-label="编辑阅读目标"><form id="goal-form"><div class="dialog-top"><div><div class="eyebrow">MAKE ROOM FOR READING</div><h2 id="editor-title">新建阅读目标</h2></div><button type="button" class="iconbtn" data-action="close-editor" aria-label="关闭目标编辑">✕</button></div><label class="field">目标名称<input id="goal-name" maxlength="60" placeholder="例如：秋季文学计划" required></label><div class="date-fields"><label class="field">开始日期<input id="goal-start" type="date" required></label><label class="field">结束日期<input id="goal-end" type="date" required></label></div><div class="section-head picker-head"><h3>想读些什么？</h3><span id="selection-count" class="pill"></span></div><p class="hint">选择书籍或加入书单当前书目，重复书籍只算一本，已读完直接计入完成。</p><label class="field"><input id="picker-search" placeholder="筛选书名、作者或书单…" aria-label="筛选目标书目"></label><div id="goal-picker"></div><p id="goal-error" class="form-error" role="alert"></p><div class="editor-footer"><span>保存后可在其他浏览器查看</span><button class="primary" type="submit">保存阅读目标</button></div></form></dialog>
<div id="toast" class="hidden" role="status"></div><script src="/static/js/weapi.js"></script><script src="/static/js/app.js"></script></body></html>
<svg style="display:none" aria-hidden="true">
<defs>
<symbol id="book" viewBox="0 0 24 24">
<path d="M3 4c4-1 6 0 9 2 3-2 5-3 9-2v15c-4-1-6 0-9 2-3-2-5-3-9-2zM12 6v15" />
</symbol>
<symbol id="grid" viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1.5" />
<rect x="14" y="3" width="7" height="7" rx="1.5" />
<rect x="3" y="14" width="7" height="7" rx="1.5" />
<rect x="14" y="14" width="7" height="7" rx="1.5" />
</symbol>
<symbol id="note" viewBox="0 0 24 24">
<path d="M13 4H5v16h14v-8M11 13l1-4 7-7 3 3-7 7z" />
</symbol>
<symbol id="search-icon" viewBox="0 0 24 24">
<circle cx="10" cy="10" r="6.5" />
<path d="m15 15 6 6" />
</symbol>
<symbol id="chart" viewBox="0 0 24 24">
<path d="M4 3v17h17M8 15v-4m5 4V7m5 8V4" />
</symbol>
<symbol id="clock" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="9" />
<path d="M12 6v6l4 2" />
</symbol>
<symbol id="moon" viewBox="0 0 24 24">
<path d="M20 14A9 9 0 0 1 10 3a9 9 0 1 0 10 11Z" />
</symbol>
<symbol id="sun" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1 1m12 12 1 1M5 19l1-1M18 6l1-1" />
</symbol>
<symbol id="sync" viewBox="0 0 24 24">
<path d="M20 7v5h-5M4 17v-5h5M6 6a8 8 0 0 1 14 6M4 12a8 8 0 0 0 14 6" />
</symbol>
<symbol id="flag" viewBox="0 0 24 24">
<path d="M5 21V3c5-4 9 4 14 0v11c-5 4-9-4-14 0" />
</symbol>
</defs>
</svg>
<aside class="sidebar">
<div class="logo">
<div class="logo-mark"><svg>
<use href="#book" />
</svg></div>
<div>阅间<small>READING SPACE</small></div>
</div>
<div class="navlabel">我的阅读空间</div>
<nav class="nav" aria-label="主导航"><button class="active" data-page="overview" title="阅读概览"><svg>
<use href="#grid" />
</svg><span>阅读概览</span></button><button data-page="shelf" title="我的书架"><svg>
<use href="#book" />
</svg><span>我的书架</span><em>8</em></button><button data-page="goals" title="阅读目标"><svg>
<use href="#flag" />
</svg><span>阅读目标</span></button><button data-page="notes" title="笔记与划线"><svg>
<use href="#note" />
</svg><span>笔记与划线</span></button><button data-page="discover" title="发现好书"><svg>
<use href="#search-icon" />
</svg><span>发现好书</span></button></nav>
<div class="sidebar-bottom">
<div class="connection"><span class="dot"></span>微信读书 · 个人空间<small>让每一页，都留下痕迹</small></div>
<div class="profile">
<div class="avatar">读</div>
<div>我的阅读空间<small>数据来自你的微信读书账号</small></div>
</div>
</div>
</aside>
<main class="main">
<header class="topbar">
<div class="breadcrumb">我的空间 <span>/ &nbsp; <b id="crumb" style="font-weight:400">阅读概览</b></span></div>
<div class="top-actions"><label class="searchbox"><svg>
<use href="#search-icon" />
</svg><input id="global-search" placeholder="搜索书籍、书单…" aria-label="全局搜索"><span class="key">⌘
K</span></label><button class="iconbtn" id="theme" aria-label="切换至暗色主题"><svg>
<use href="#moon" />
</svg></button>
<div class="avatar">L</div>
<form method="post" action="{{ url_for('auth.logout') }}"><input type="hidden" name="csrf_token"
value="{{ csrf_token() }}"><button class="text-button logout-button" type="submit">退出</button>
</form>
</div>
</header>
<div class="demo-banner"><span><span class="dot"></span><span
id="conn-state">正在连接微信读书…</span></span><span>阅读目标跨浏览器保存</span></div>
<div id="page-content"></div>
<footer class="footer"><span>阅间 · 与好书相伴，与自己相遇</span>
<div class="footer-meta"><span class="footer-state" id="footer-state">数据来自微信读书个人账号</span><a class="icp-link"
href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">浙ICP备202607916号-1</a>
</div>
</footer>
</main>
<dialog id="detail" aria-label="内容详情">
<div class="dialog-top">
<h2 id="detail-title">书籍详情</h2><button class="iconbtn" data-action="close-detail"
aria-label="关闭详情">✕</button>
</div>
<div id="detail-content"></div>
</dialog>
<dialog id="goal-editor" aria-label="编辑阅读目标">
<form id="goal-form">
<div class="dialog-top">
<div>
<div class="eyebrow">MAKE ROOM FOR READING</div>
<h2 id="editor-title">新建阅读目标</h2>
</div><button type="button" class="iconbtn" data-action="close-editor" aria-label="关闭目标编辑">✕</button>
</div><label class="field">目标名称<input id="goal-name" maxlength="60" placeholder="例如：秋季文学计划"
required></label>
<div class="date-fields"><label class="field">开始日期<input id="goal-start" type="date" required></label><label
class="field">结束日期<input id="goal-end" type="date" required></label></div>
<div class="section-head picker-head">
<h3>想读些什么？</h3><span id="selection-count" class="pill"></span>
</div>
<p class="hint">选择书籍或加入书单当前书目，重复书籍只算一本，已读完直接计入完成。</p><label class="field"><input id="picker-search"
placeholder="筛选书名、作者或书单…" aria-label="筛选目标书目"></label>
<div id="goal-picker"></div>
<p id="goal-error" class="form-error" role="alert"></p>
<div class="editor-footer"><span>保存后可在其他浏览器查看</span><button class="primary" type="submit">保存阅读目标</button>
</div>
</form>
</dialog>
<div id="toast" class="hidden" role="status"></div>
<script src="/static/js/weapi.js"></script>
<script src="/static/js/app.js"></script>
</body>
</html>
templates/login.html
+12 -2
View File
@@ -1,5 +1,6 @@
<!doctype html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -7,9 +8,16 @@
<title>登录 · 阅间</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body class="login-page">
<main class="login-shell">
<div class="logo login-logo"><div class="logo-mark"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4c4-1 6 0 8 2 2-2 4-3 8-2v15c-4-1-6 0-8 2-2-2-4-3-8-2zM12 6v15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div>阅间<small>READING SPACE</small></div></div>
<div class="logo login-logo">
<div class="logo-mark"><svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 4c4-1 6 0 8 2 2-2 4-3 8-2v15c-4-1-6 0-8 2-2-2-4-3-8-2zM12 6v15" fill="none" stroke="currentColor"
stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
</svg></div>
<div>阅间<small>READING SPACE</small></div>
</div>
<section class="login-panel card">
<div class="eyebrow">YOUR READING SPACE</div>
<h1>{{ '服务暂不可用' if unavailable else ('首次设置' if not initialized else '欢迎回来') }}</h1>
@@ -21,7 +29,8 @@
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<label>一次性初始化口令<input name="setup_token" type="password" autocomplete="off" required autofocus></label>
<label>管理员账号<input name="username" maxlength="64" autocomplete="username" required></label>
<label>设置密码<input name="password" type="password" minlength="12" maxlength="256" autocomplete="new-password" required></label>
<label>设置密码<input name="password" type="password" minlength="12" maxlength="256" autocomplete="new-password"
required></label>
<button class="primary" type="submit" {% if not setup_enabled %}disabled{% endif %}>创建账号并进入</button>
</form>
{% elif not unavailable %}
@@ -36,4 +45,5 @@
<p class="login-foot">阅间 · 与好书相伴，与自己相遇</p>
</main>
</body>
</html>