diff --git a/legacy/classic/static/css/style.css b/legacy/classic/static/css/style.css index 92e4e86..58d9767 100644 --- a/legacy/classic/static/css/style.css +++ b/legacy/classic/static/css/style.css @@ -146,7 +146,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", - "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; @@ -154,14 +154,34 @@ 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; + color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; } .container { @@ -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 { @@ -382,7 +415,7 @@ body { } .shelf-cat-parent.active .shelf-cat-count { - background: rgba(255,255,255,0.25); + background: rgba(255, 255, 255, 0.25); color: #fff; } @@ -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 { @@ -443,7 +483,7 @@ body { } .shelf-cat-sub.active .shelf-cat-count-sm { - background: rgba(255,255,255,0.25); + background: rgba(255, 255, 255, 0.25); color: #fff; } @@ -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); + } } /* ===== 读书排行（竖向列表） ===== */ @@ -1090,7 +1137,7 @@ body { color: var(--alert-text); font-size: 14px; font-weight: 500; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); animation: slideDown 0.3s ease-out; } @@ -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); + } } /* ===== 推荐发现区 ===== */ @@ -1756,7 +1812,7 @@ body { } .thought-filter-btn.active .filter-count { - background: rgba(255,255,255,0.25); + background: rgba(255, 255, 255, 0.25); color: #fff; } @@ -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,14 +2121,17 @@ body { height: 40px; font-size: 18px; } + .thoughts-page-header { top: 0; } + .thoughts-book-cover { width: 48px; height: 64px; } + .thoughts-book-title { font-size: 16px; } -} +} \ No newline at end of file diff --git a/legacy/classic/static/js/app.js b/legacy/classic/static/js/app.js index daf6e68..50a57d0 100644 --- a/legacy/classic/static/js/app.js +++ b/legacy/classic/static/js/app.js @@ -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}本" }, }], diff --git a/legacy/classic/templates/index.html b/legacy/classic/templates/index.html index 803e317..ceb5c79 100644 --- a/legacy/classic/templates/index.html +++ b/legacy/classic/templates/index.html @@ -1,5 +1,6 @@ + @@ -8,7 +9,7 @@ + @@ -208,4 +216,5 @@ - + + \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 6d475a0..c4b1199 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -146,7 +146,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", - "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; @@ -154,14 +154,34 @@ 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; + color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; } .container { @@ -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 { @@ -382,7 +415,7 @@ body { } .shelf-cat-parent.active .shelf-cat-count { - background: rgba(255,255,255,0.25); + background: rgba(255, 255, 255, 0.25); color: #fff; } @@ -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 { @@ -443,7 +483,7 @@ body { } .shelf-cat-sub.active .shelf-cat-count-sm { - background: rgba(255,255,255,0.25); + background: rgba(255, 255, 255, 0.25); color: #fff; } @@ -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); + } } /* ===== 读书排行（竖向列表） ===== */ @@ -1101,7 +1148,7 @@ body { color: var(--alert-text); font-size: 14px; font-weight: 500; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); animation: slideDown 0.3s ease-out; } @@ -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); + } } /* ===== 推荐发现区 ===== */ @@ -1767,7 +1823,7 @@ body { } .thought-filter-btn.active .filter-count { - background: rgba(255,255,255,0.25); + background: rgba(255, 255, 255, 0.25); color: #fff; } @@ -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,14 +2136,17 @@ body { height: 40px; font-size: 18px; } + .thoughts-page-header { top: 0; } + .thoughts-book-cover { width: 48px; height: 64px; } + .thoughts-book-title { font-size: 16px; } -} +} \ No newline at end of file diff --git a/static/css/styles.css b/static/css/styles.css index 9ce8ac1..a0b96f6 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,106 +1,2940 @@ +:root { + --bg: #f7f8fa; + --panel: #fff; + --text: #242a34; + --muted: #9298a4; + --line: #edf0f3; + --accent: #356ce5; + --soft: #edf3ff; + --sidebar: #fff; + --shadow: 0 8px 32px #24355005; + --quote: #f8f6f1; + --green: #449682 +} + +[data-theme=dark] { + --bg: #14171e; + --panel: #1d222c; + --text: #e7eaf0; + --muted: #8892a4; + --line: #2c323f; + --accent: #80a5ff; + --soft: #26344e; + --sidebar: #191d26; + --shadow: 0 8px 32px #0001; + --quote: #292820; + --green: #75c6ac; + color-scheme: dark +} + +* { + box-sizing: border-box +} + +body { + margin: 0; + background: var(--bg); + color: var(--text); + font-family: "PingFang SC", "Microsoft YaHei", sans-serif; + font-size: 14px; + transition: background .25s, color .25s +} + +button, +input { + font: inherit +} + +button { + cursor: pointer; + color: inherit +} + +button:focus-visible, +a:focus-visible, +input:focus-visible { + outline: 3px solid var(--accent); + outline-offset: 4px +} + +button { + border: 0; + background: none +} + +svg { + width: 20px; + height: 20px; + fill: none; + stroke: currentColor; + stroke-width: 1.7; + stroke-linecap: round; + stroke-linejoin: round; + vertical-align: middle +} + +.sidebar { + position: fixed; + inset: 0 auto 0 0; + width: 218px; + padding: 39px 23px 24px; + background: var(--sidebar); + border-right: 1px solid var(--line); + display: flex; + flex-direction: column; + z-index: 5 +} + +.logo { + display: flex; + align-items: center; + gap: 11px; + font-size: 24px; + font-weight: 650; + letter-spacing: 2px +} + +.logo-mark { + background: #356ce5; + color: white; + width: 37px; + height: 37px; + display: grid; + place-items: center; + border-radius: 12px +} + +.logo-mark svg { + width: 25px; + height: 25px +} + +.logo small { + display: block; + letter-spacing: 2px; + font-size: 9px; + color: var(--muted); + margin-top: 3px; + font-weight: 500 +} + +.navlabel { + font-size: 10px; + color: var(--muted); + letter-spacing: 1.7px; + margin: 53px 14px 15px +} + +.nav { + display: flex; + flex-direction: column; + gap: 9px +} + +.nav button { + text-align: left; + padding: 14px 17px; + border-radius: 9px; + display: flex; + align-items: center; + gap: 13px; + color: #818997 +} + +.nav button.active { + color: var(--accent); + background: var(--soft); + font-weight: 600 +} + +.nav button:hover { + background: var(--soft) +} + +.nav em { + margin-left: auto; + font-size: 10px; + font-style: normal; + background: var(--line); + padding: 2px 6px; + border-radius: 4px +} + +.sidebar-bottom { + margin-top: auto +} + +.connection { + padding: 16px 12px; + border: 1px solid var(--line); + border-radius: 10px; + font-size: 12px; + line-height: 1.9 +} + +.dot { + display: inline-block; + background: var(--green); + width: 6px; + height: 6px; + border-radius: 50%; + margin-right: 7px +} + +.connection small { + display: block; + font-size: 10px; + color: var(--muted) +} + +.profile { + display: flex; + align-items: center; + gap: 10px; + margin-top: 24px; + padding: 0 8px +} + +.avatar { + width: 33px; + height: 33px; + border-radius: 50%; + display: grid; + place-items: center; + background: #e4eadf; + color: #5e7252; + font-family: Georgia; + font-size: 18px +} + +.profile small { + display: block; + font-size: 10px; + color: var(--muted); + margin-top: 4px +} + +.main { + margin-left: 218px; + padding: 0 40px 32px; + max-width: 1800px +} + +.topbar { + height: 91px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid var(--line) +} + +.breadcrumb { + font-size: 12px; + color: var(--muted) +} + +.breadcrumb span { + color: var(--text); + margin-left: 12px +} + +.top-actions { + display: flex; + align-items: center; + gap: 20px +} + +.searchbox { + display: flex; + align-items: center; + gap: 10px; + color: var(--muted); + background: var(--panel); + border: 1px solid var(--line); + border-radius: 8px; + padding: 9px 12px +} + +.searchbox input { + background: none; + border: 0; + outline: none; + width: 180px; + color: var(--text); + font-size: 11px +} + +.key { + font-size: 10px; + border: 1px solid var(--line); + border-radius: 4px; + padding: 2px 4px +} + +.iconbtn { + padding: 7px; + border: 1px solid var(--line); + border-radius: 8px; + background: var(--panel) +} + +.welcome { + display: flex; + justify-content: space-between; + align-items: center; + margin: 33px 0 27px +} + +.eyebrow { + font-size: 10px; + letter-spacing: 2px; + color: var(--muted); + margin-bottom: 10px +} + +h1 { + font-size: 27px; + letter-spacing: .5px; + margin: 0 0 10px; + font-weight: 600 +} + +h1 span { + font-family: Georgia; + font-size: 25px; + color: #c3a977 +} + +p { + margin: 0; + color: var(--muted); + font-size: 12px; + line-height: 1.8 +} + +.welcome-right { + display: flex; + gap: 12px; + align-items: center +} + +.demo-tag { + font-size: 10px; + padding: 6px 9px; + background: var(--quote); + border: 1px solid var(--line); + border-radius: 5px; + color: var(--muted) +} + +.primary { + background: #356ce5; + color: white; + padding: 11px 16px; + border-radius: 7px; + font-size: 12px +} + +.primary svg { + width: 15px; + height: 15px; + margin-right: 6px +} + +.stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 18px; + margin-bottom: 23px +} + +.card { + background: var(--panel); + border: 1px solid var(--line); + border-radius: 12px; + box-shadow: var(--shadow) +} + +.stat { + padding: 21px 23px +} + +.stat-label { + display: flex; + justify-content: space-between; + align-items: center; + color: var(--muted); + font-size: 12px +} + +.stat-label svg { + width: 17px; + height: 17px; + color: #9aa8bf +} + +.stat-value { + font-family: Georgia, serif; + font-size: 34px; + letter-spacing: -1px; + margin: 14px 0 12px +} + +.stat-value small { + font-family: "PingFang SC", sans-serif; + font-size: 11px; + color: var(--muted); + letter-spacing: 0; + margin-left: 5px +} + +.stat-foot { + font-size: 10px; + color: var(--muted) +} + +.stat-foot b { + color: var(--green); + font-weight: 500; + margin-right: 7px +} + +.columns { + display: grid; + grid-template-columns: minmax(0, 1fr) 296px; + gap: 23px +} + +.section-head { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 24px +} + +.section-head h2 { + font-size: 15px; + font-weight: 600; + margin: 0 +} + +.section-head h2 small { + font-weight: 400; + color: var(--muted); + font-size: 10px; + margin-left: 10px +} + +.text-button { + font-size: 11px; + color: var(--muted); + padding: 3px +} + +.text-button:hover { + color: var(--accent) +} + +.trend { + padding: 24px 25px; + margin-bottom: 23px +} + +.segmented { + background: var(--bg); + padding: 3px; + display: flex; + border-radius: 6px +} + +.segmented button { + font-size: 10px; + padding: 5px 12px; + color: var(--muted); + border-radius: 4px +} + +.segmented button.active { + background: var(--panel); + color: var(--accent); + box-shadow: 0 1px 5px #0001 +} + +.trend-total { + font-family: Georgia; + font-size: 25px; + margin-bottom: 10px +} + +.trend-total small { + font-family: "PingFang SC"; + font-size: 10px; + color: var(--muted); + margin-left: 9px +} + +.chart { + height: 130px; + position: relative; + padding-left: 30px +} + +.gridlines { + position: absolute; + inset: 0 0 15px 30px; + display: flex; + flex-direction: column; + justify-content: space-between +} + +.gridlines i { + border-top: 1px dashed var(--line); + position: relative +} + +.gridlines i:before { + content: attr(data-label); + position: absolute; + left: -29px; + top: -6px; + color: var(--muted); + font-size: 9px; + font-style: normal +} + +.bars { + display: flex; + align-items: end; + justify-content: space-around; + height: 100%; + gap: 14px; + position: relative; + padding-bottom: 15px +} + +.bar { + height: var(--h); + max-width: 33px; + flex: 1; + background: #dbe6fc; + border-radius: 4px 4px 0 0; + position: relative; + transition: height .35s +} + +.bar:nth-child(5) { + background: #4d7ce7 +} + +.bar span { + position: absolute; + top: calc(100% + 9px); + left: 50%; + transform: translateX(-50%); + font-size: 9px; + color: var(--muted); + white-space: nowrap +} + +.bar:hover { + background: #7199ef +} + +.bar:hover:before { + content: attr(data-tip); + position: absolute; + bottom: calc(100% + 6px); + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + background: var(--text); + color: var(--panel); + padding: 5px 7px; + font-size: 10px; + border-radius: 4px +} + +.shelf { + padding: 24px 25px +} + +.tabs { + display: flex; + gap: 25px; + border-bottom: 1px solid var(--line); + margin-top: -4px; + margin-bottom: 24px +} + +.tabs button { + padding: 0 0 12px; + font-size: 11px; + color: var(--muted); + border-bottom: 2px solid transparent +} + +.tabs button.active { + color: var(--accent); + border-bottom-color: var(--accent) +} + +.books { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 23px +} + +.book { + text-align: left; + padding: 0; + min-width: 0; + transition: transform .2s +} + +.book:hover { + transform: translateY(-5px) +} + +.cover { + height: 160px; + width: 112px; + max-width: 100%; + border-radius: 2px 5px 5px 2px; + position: relative; + padding: 15px 12px; + overflow: hidden; + box-shadow: 5px 8px 13px #17212c20, inset 4px 0 3px #ffffff25; + display: flex; + flex-direction: column; + color: #fff +} + +.cover:after { + content: ""; + position: absolute; + inset: 0; + border-left: 4px solid #0002; + pointer-events: none +} + +.cover .tiny { + font-size: 6px; + letter-spacing: 1px; + opacity: .8 +} + +.cover .title { + font-family: "Songti SC", "STSong", serif; + line-height: 1.3; + font-size: 22px; + margin-top: 15px; + font-weight: 700 +} + +.cover .author { + font-size: 7px; + margin-top: 10px +} + +.cover .publisher { + font-size: 6px; + margin-top: auto; + letter-spacing: 1px +} + +.c1 { + background: #efe9d8; + color: #374432 +} + +.c1 .title { + font-size: 19px; + letter-spacing: 1px; + margin-top: 15px; + z-index: 1 +} + +.c1:before { + content: ""; + position: absolute; + width: 130px; + height: 110px; + border: 1px solid #73876a66; + border-radius: 50%; + left: -29px; + bottom: -24px; + box-shadow: 0 0 0 8px #72826313, 0 0 0 18px #72826313, 0 0 0 30px #72826313 +} + +.c2 { + background: #182b3b +} + +.c2 .title { + font-size: 37px; + letter-spacing: 6px +} + +.c2:before { + content: ""; + position: absolute; + left: 20px; + bottom: -42px; + width: 115px; + height: 115px; + border: 1px solid #b8855144; + border-radius: 50%; + box-shadow: 0 0 0 8px #b8855122, 0 0 0 17px #b8855111 +} + +.c3 { + background: #db502e +} + +.c3 .title { + font-size: 19px; + color: #fff3d7 +} + +.c3:before { + content: ""; + position: absolute; + width: 60px; + height: 60px; + background: #f4c66a; + bottom: 13px; + right: -8px; + border-radius: 50% +} + +.c4 { + background: #f0eee2; + color: #282722 +} + +.c4 .title { + font-size: 24px +} + +.c4:before { + content: ""; + position: absolute; + width: 90px; + height: 90px; + bottom: -24px; + right: -25px; + background: repeating-linear-gradient(45deg, #3d6274 0 5px, transparent 5px 10px); + transform: rotate(-15deg) +} + +.book h3 { + font-size: 12px; + font-weight: 500; + margin: 14px 0 5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis +} + +.book p { + font-size: 10px +} + +.progress { + height: 3px; + background: var(--line); + border-radius: 3px; + margin-top: 13px +} + +.progress i { + display: block; + height: 100%; + background: #8aa7d8; + width: var(--progress) +} + +.book-meta { + font-size: 9px; + color: var(--muted); + display: flex; + justify-content: space-between; + margin-top: 7px +} + +.rightcol { + display: flex; + flex-direction: column; + gap: 23px +} + +.goal { + padding: 24px +} + +.goal-ring { + margin: 12px auto 16px; + width: 142px; + height: 142px; + border-radius: 50%; + background: conic-gradient(#679483 0 216deg, var(--line) 216deg); + padding: 9px; + transform: rotate(-90deg) +} + +.ring-inner { + width: 100%; + height: 100%; + border-radius: 50%; + background: var(--panel); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transform: rotate(90deg) +} + +.ring-inner strong { + font-family: Georgia; + font-size: 36px; + font-weight: 400 +} + +.ring-inner small { + color: var(--muted); + font-size: 10px; + margin-top: 5px +} + +.goal-caption { + text-align: center; + font-size: 11px; + margin-bottom: 18px +} + +.goal-caption span { + color: var(--green) +} + +.goal-footer { + padding-top: 15px; + border-top: 1px solid var(--line); + display: flex; + justify-content: space-between; + font-size: 10px; + color: var(--muted) +} + +.goal-footer b { + color: var(--text); + font-weight: 500 +} + +.notes { + padding: 24px +} + +.note { + border-left: 2px solid #d7bd7e; + padding-left: 13px; + margin: 0 0 19px +} + +.note blockquote { + font-family: "Songti SC", "STSong", serif; + font-size: 13px; + line-height: 1.9; + margin: 0 0 11px +} + +.note small { + font-size: 9px; + color: var(--muted) +} + +.note:last-child { + margin-bottom: 0 +} + +.quote { + padding: 20px 24px; + background: var(--quote); + border-radius: 12px; + position: relative +} + +.quote .eyebrow { + font-size: 9px; + letter-spacing: 1.5px +} + +.quote p { + font-family: "Songti SC", serif; + color: var(--text); + font-size: 13px; + line-height: 1.9 +} + +.quote small { + display: block; + text-align: right; + margin-top: 12px; + color: var(--muted); + font-size: 9px +} + +.footer { + display: flex; + justify-content: space-between; + margin-top: 24px; + font-size: 9px; + color: var(--muted) +} + +.empty { + padding: 40px; + text-align: center; + color: var(--muted); + grid-column: 1/-1 +} + +.notes-page { + display: grid; + gap: 20px +} + +.notes-page .note { + padding: 20px; + margin: 0 +} + +.hidden { + display: none !important +} + +dialog { + border: 1px solid var(--line); + background: var(--panel); + color: var(--text); + border-radius: 18px; + padding: 32px; + width: 520px; + max-width: 90vw; + box-shadow: 0 30px 100px #0003 +} + +dialog::backdrop { + background: #10182877; + backdrop-filter: blur(5px) +} + +.dialog-top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px +} + +.dialog-top h2 { + margin: 0; + font-size: 18px +} + +.detail-body { + display: flex; + gap: 26px; + margin-bottom: 22px +} + +.detail-info { + flex: 1 +} + +.detail-info h3 { + font-size: 22px; + margin: 8px 0 +} + +.detail-info p { + margin: 8px 0 +} + +.detail-desc { + font-size: 13px; + line-height: 2; + color: var(--muted) +} + +#toast { + position: fixed; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + background: var(--text); + color: var(--panel); + padding: 13px 23px; + border-radius: 10px; + z-index: 30; + font-size: 12px +} + +.fade { + animation: fade .5s ease both +} + +@keyframes fade { + from { + opacity: 0; + transform: translateY(7px) + } + + to { + opacity: 1; + transform: translateY(0) + } +} + +@media(min-width:1500px) { + .main { + padding-left: 55px; + padding-right: 55px + } + + .columns { + grid-template-columns: minmax(0, 1fr) 330px + } + + .cover { + height: 185px; + width: 130px + } + + .chart { + height: 160px + } +} + +@media(max-width:1150px) { + .sidebar { + width: 180px; + padding-left: 16px; + padding-right: 16px + } + + .main { + margin-left: 180px; + padding: 0 24px 24px + } + + .columns { + grid-template-columns: minmax(0, 1fr) 250px; + gap: 16px + } + + .books { + gap: 12px + } + + .cover { + height: 140px + } + + .stats { + gap: 12px + } + + .stat { + padding: 18px 15px + } + + .shelf, + .trend { + padding: 20px + } + + .searchbox input { + width: 130px + } + + .welcome-right .demo-tag { + display: none + } +} + +@media(max-width:900px) { + .stats { + grid-template-columns: repeat(2, 1fr) + } + + .sidebar { + width: 76px; + padding: 28px 12px + } + + .logo { + justify-content: center + } + + .logo>div:last-child, + .navlabel, + .nav button span, + .nav em, + .sidebar-bottom { + display: none + } + + .nav { + margin-top: 45px + } + + .nav button { + padding: 14px; + justify-content: center + } + + .main { + margin-left: 76px; + padding: 0 22px 24px + } + + .columns { + grid-template-columns: 1fr + } + + .rightcol { + display: grid; + grid-template-columns: 1fr 1fr + } + + .quote { + grid-column: 1/-1 + } + + .cover { + height: 165px + } + + .welcome-right .primary { + font-size: 0 + } + + .welcome-right .primary svg { + margin: 0 + } + + .stat-value { + font-size: 28px + } + + .topbar { + height: 75px + } +} + +@media(max-width:600px) { + .main { + padding: 0 16px 20px; + margin-left: 60px + } + + .sidebar { + width: 60px; + padding: 25px 6px + } + + .logo-mark { + width: 33px; + height: 33px + } + + .nav button { + padding: 12px + } + + .searchbox { + padding: 8px + } + + .searchbox input { + width: 112px + } + + .key, + .breadcrumb, + .top-actions>.avatar { + display: none + } + + .top-actions { + width: 100%; + justify-content: space-between; + gap: 8px + } + + .welcome { + margin-top: 25px + } + + h1 { + font-size: 21px + } + + .welcome p { + font-size: 10px + } + + .eyebrow { + font-size: 8px + } + + .stats { + grid-template-columns: repeat(2, 1fr) + } + + .stat { + padding: 16px + } + + .stat-value { + margin: 10px 0 + } + + .rightcol { + display: flex + } + + .books { + grid-template-columns: repeat(2, 1fr); + gap: 24px 15px + } + + .cover { + height: 160px; + width: 112px + } + + .section-head h2 small { + display: none + } + + .tabs { + gap: 18px + } + + .footer { + font-size: 8px + } + + .footer span:last-child { + display: none + } + + .detail-body { + gap: 16px + } + + .detail-info h3 { + font-size: 18px + } +} + +@media(prefers-reduced-motion:reduce) { + + *, + *:before, + *:after { + animation: none !important; + transition: none !important + } +} -:root{--bg:#f7f8fa;--panel:#fff;--text:#242a34;--muted:#9298a4;--line:#edf0f3;--accent:#356ce5;--soft:#edf3ff;--sidebar:#fff;--shadow:0 8px 32px #24355005;--quote:#f8f6f1;--green:#449682} -[data-theme=dark]{--bg:#14171e;--panel:#1d222c;--text:#e7eaf0;--muted:#8892a4;--line:#2c323f;--accent:#80a5ff;--soft:#26344e;--sidebar:#191d26;--shadow:0 8px 32px #0001;--quote:#292820;--green:#75c6ac;color-scheme:dark} -*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;transition:background .25s,color .25s}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{border:0;background:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.sidebar{position:fixed;inset:0 auto 0 0;width:218px;padding:39px 23px 24px;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:5}.logo{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:650;letter-spacing:2px}.logo-mark{background:#356ce5;color:white;width:37px;height:37px;display:grid;place-items:center;border-radius:12px}.logo-mark svg{width:25px;height:25px}.logo small{display:block;letter-spacing:2px;font-size:9px;color:var(--muted);margin-top:3px;font-weight:500}.navlabel{font-size:10px;color:var(--muted);letter-spacing:1.7px;margin:53px 14px 15px}.nav{display:flex;flex-direction:column;gap:9px}.nav button{text-align:left;padding:14px 17px;border-radius:9px;display:flex;align-items:center;gap:13px;color:#818997}.nav button.active{color:var(--accent);background:var(--soft);font-weight:600}.nav button:hover{background:var(--soft)}.nav em{margin-left:auto;font-size:10px;font-style:normal;background:var(--line);padding:2px 6px;border-radius:4px}.sidebar-bottom{margin-top:auto}.connection{padding:16px 12px;border:1px solid var(--line);border-radius:10px;font-size:12px;line-height:1.9}.dot{display:inline-block;background:var(--green);width:6px;height:6px;border-radius:50%;margin-right:7px}.connection small{display:block;font-size:10px;color:var(--muted)}.profile{display:flex;align-items:center;gap:10px;margin-top:24px;padding:0 8px}.avatar{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#e4eadf;color:#5e7252;font-family:Georgia;font-size:18px}.profile small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.main{margin-left:218px;padding:0 40px 32px;max-width:1800px}.topbar{height:91px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.breadcrumb{font-size:12px;color:var(--muted)}.breadcrumb span{color:var(--text);margin-left:12px}.top-actions{display:flex;align-items:center;gap:20px}.searchbox{display:flex;align-items:center;gap:10px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 12px}.searchbox input{background:none;border:0;outline:none;width:180px;color:var(--text);font-size:11px}.key{font-size:10px;border:1px solid var(--line);border-radius:4px;padding:2px 4px}.iconbtn{padding:7px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.welcome{display:flex;justify-content:space-between;align-items:center;margin:33px 0 27px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted);margin-bottom:10px}h1{font-size:27px;letter-spacing:.5px;margin:0 0 10px;font-weight:600}h1 span{font-family:Georgia;font-size:25px;color:#c3a977}p{margin:0;color:var(--muted);font-size:12px;line-height:1.8}.welcome-right{display:flex;gap:12px;align-items:center}.demo-tag{font-size:10px;padding:6px 9px;background:var(--quote);border:1px solid var(--line);border-radius:5px;color:var(--muted)}.primary{background:#356ce5;color:white;padding:11px 16px;border-radius:7px;font-size:12px}.primary svg{width:15px;height:15px;margin-right:6px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:23px}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.stat{padding:21px 23px}.stat-label{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.stat-label svg{width:17px;height:17px;color:#9aa8bf}.stat-value{font-family:Georgia,serif;font-size:34px;letter-spacing:-1px;margin:14px 0 12px}.stat-value small{font-family:"PingFang SC",sans-serif;font-size:11px;color:var(--muted);letter-spacing:0;margin-left:5px}.stat-foot{font-size:10px;color:var(--muted)}.stat-foot b{color:var(--green);font-weight:500;margin-right:7px}.columns{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:23px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.section-head h2{font-size:15px;font-weight:600;margin:0}.section-head h2 small{font-weight:400;color:var(--muted);font-size:10px;margin-left:10px}.text-button{font-size:11px;color:var(--muted);padding:3px}.text-button:hover{color:var(--accent)}.trend{padding:24px 25px;margin-bottom:23px}.segmented{background:var(--bg);padding:3px;display:flex;border-radius:6px}.segmented button{font-size:10px;padding:5px 12px;color:var(--muted);border-radius:4px}.segmented button.active{background:var(--panel);color:var(--accent);box-shadow:0 1px 5px #0001}.trend-total{font-family:Georgia;font-size:25px;margin-bottom:10px}.trend-total small{font-family:"PingFang SC";font-size:10px;color:var(--muted);margin-left:9px}.chart{height:130px;position:relative;padding-left:30px}.gridlines{position:absolute;inset:0 0 15px 30px;display:flex;flex-direction:column;justify-content:space-between}.gridlines i{border-top:1px dashed var(--line);position:relative}.gridlines i:before{content:attr(data-label);position:absolute;left:-29px;top:-6px;color:var(--muted);font-size:9px;font-style:normal}.bars{display:flex;align-items:end;justify-content:space-around;height:100%;gap:14px;position:relative;padding-bottom:15px}.bar{height:var(--h);max-width:33px;flex:1;background:#dbe6fc;border-radius:4px 4px 0 0;position:relative;transition:height .35s}.bar:nth-child(5){background:#4d7ce7}.bar span{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);font-size:9px;color:var(--muted);white-space:nowrap}.bar:hover{background:#7199ef}.bar:hover:before{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--text);color:var(--panel);padding:5px 7px;font-size:10px;border-radius:4px}.shelf{padding:24px 25px}.tabs{display:flex;gap:25px;border-bottom:1px solid var(--line);margin-top:-4px;margin-bottom:24px}.tabs button{padding:0 0 12px;font-size:11px;color:var(--muted);border-bottom:2px solid transparent}.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}.books{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:23px}.book{text-align:left;padding:0;min-width:0;transition:transform .2s}.book:hover{transform:translateY(-5px)}.cover{height:160px;width:112px;max-width:100%;border-radius:2px 5px 5px 2px;position:relative;padding:15px 12px;overflow:hidden;box-shadow:5px 8px 13px #17212c20,inset 4px 0 3px #ffffff25;display:flex;flex-direction:column;color:#fff}.cover:after{content:"";position:absolute;inset:0;border-left:4px solid #0002;pointer-events:none}.cover .tiny{font-size:6px;letter-spacing:1px;opacity:.8}.cover .title{font-family:"Songti SC","STSong",serif;line-height:1.3;font-size:22px;margin-top:15px;font-weight:700}.cover .author{font-size:7px;margin-top:10px}.cover .publisher{font-size:6px;margin-top:auto;letter-spacing:1px}.c1{background:#efe9d8;color:#374432}.c1 .title{font-size:19px;letter-spacing:1px;margin-top:15px;z-index:1}.c1:before{content:"";position:absolute;width:130px;height:110px;border:1px solid #73876a66;border-radius:50%;left:-29px;bottom:-24px;box-shadow:0 0 0 8px #72826313,0 0 0 18px #72826313,0 0 0 30px #72826313}.c2{background:#182b3b}.c2 .title{font-size:37px;letter-spacing:6px}.c2:before{content:"";position:absolute;left:20px;bottom:-42px;width:115px;height:115px;border:1px solid #b8855144;border-radius:50%;box-shadow:0 0 0 8px #b8855122,0 0 0 17px #b8855111}.c3{background:#db502e}.c3 .title{font-size:19px;color:#fff3d7}.c3:before{content:"";position:absolute;width:60px;height:60px;background:#f4c66a;bottom:13px;right:-8px;border-radius:50%}.c4{background:#f0eee2;color:#282722}.c4 .title{font-size:24px}.c4:before{content:"";position:absolute;width:90px;height:90px;bottom:-24px;right:-25px;background:repeating-linear-gradient(45deg,#3d6274 0 5px,transparent 5px 10px);transform:rotate(-15deg)}.book h3{font-size:12px;font-weight:500;margin:14px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book p{font-size:10px}.progress{height:3px;background:var(--line);border-radius:3px;margin-top:13px}.progress i{display:block;height:100%;background:#8aa7d8;width:var(--progress)}.book-meta{font-size:9px;color:var(--muted);display:flex;justify-content:space-between;margin-top:7px}.rightcol{display:flex;flex-direction:column;gap:23px}.goal{padding:24px}.goal-ring{margin:12px auto 16px;width:142px;height:142px;border-radius:50%;background:conic-gradient(#679483 0 216deg,var(--line) 216deg);padding:9px;transform:rotate(-90deg)}.ring-inner{width:100%;height:100%;border-radius:50%;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(90deg)}.ring-inner strong{font-family:Georgia;font-size:36px;font-weight:400}.ring-inner small{color:var(--muted);font-size:10px;margin-top:5px}.goal-caption{text-align:center;font-size:11px;margin-bottom:18px}.goal-caption span{color:var(--green)}.goal-footer{padding-top:15px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.goal-footer b{color:var(--text);font-weight:500}.notes{padding:24px}.note{border-left:2px solid #d7bd7e;padding-left:13px;margin:0 0 19px}.note blockquote{font-family:"Songti SC","STSong",serif;font-size:13px;line-height:1.9;margin:0 0 11px}.note small{font-size:9px;color:var(--muted)}.note:last-child{margin-bottom:0}.quote{padding:20px 24px;background:var(--quote);border-radius:12px;position:relative}.quote .eyebrow{font-size:9px;letter-spacing:1.5px}.quote p{font-family:"Songti SC",serif;color:var(--text);font-size:13px;line-height:1.9}.quote small{display:block;text-align:right;margin-top:12px;color:var(--muted);font-size:9px}.footer{display:flex;justify-content:space-between;margin-top:24px;font-size:9px;color:var(--muted)}.empty{padding:40px;text-align:center;color:var(--muted);grid-column:1/-1}.notes-page{display:grid;gap:20px}.notes-page .note{padding:20px;margin:0}.hidden{display:none!important}dialog{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:18px;padding:32px;width:520px;max-width:90vw;box-shadow:0 30px 100px #0003}dialog::backdrop{background:#10182877;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.dialog-top h2{margin:0;font-size:18px}.detail-body{display:flex;gap:26px;margin-bottom:22px}.detail-info{flex:1}.detail-info h3{font-size:22px;margin:8px 0}.detail-info p{margin:8px 0}.detail-desc{font-size:13px;line-height:2;color:var(--muted)}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--panel);padding:13px 23px;border-radius:10px;z-index:30;font-size:12px}.fade{animation:fade .5s ease both}@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){.main{padding-left:55px;padding-right:55px}.columns{grid-template-columns:minmax(0,1fr) 330px}.cover{height:185px;width:130px}.chart{height:160px}}@media(max-width:1150px){.sidebar{width:180px;padding-left:16px;padding-right:16px}.main{margin-left:180px;padding:0 24px 24px}.columns{grid-template-columns:minmax(0,1fr) 250px;gap:16px}.books{gap:12px}.cover{height:140px}.stats{gap:12px}.stat{padding:18px 15px}.shelf,.trend{padding:20px}.searchbox input{width:130px}.welcome-right .demo-tag{display:none}}@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.sidebar{width:76px;padding:28px 12px}.logo{justify-content:center}.logo>div:last-child,.navlabel,.nav button span,.nav em,.sidebar-bottom{display:none}.nav{margin-top:45px}.nav button{padding:14px;justify-content:center}.main{margin-left:76px;padding:0 22px 24px}.columns{grid-template-columns:1fr}.rightcol{display:grid;grid-template-columns:1fr 1fr}.quote{grid-column:1/-1}.cover{height:165px}.welcome-right .primary{font-size:0}.welcome-right .primary svg{margin:0}.stat-value{font-size:28px}.topbar{height:75px}}@media(max-width:600px){.main{padding:0 16px 20px;margin-left:60px}.sidebar{width:60px;padding:25px 6px}.logo-mark{width:33px;height:33px}.nav button{padding:12px}.searchbox{padding:8px}.searchbox input{width:112px}.key,.breadcrumb,.top-actions>.avatar{display:none}.top-actions{width:100%;justify-content:space-between;gap:8px}.welcome{margin-top:25px}h1{font-size:21px}.welcome p{font-size:10px}.eyebrow{font-size:8px}.stats{grid-template-columns:repeat(2,1fr)}.stat{padding:16px}.stat-value{margin:10px 0}.rightcol{display:flex}.books{grid-template-columns:repeat(2,1fr);gap:24px 15px}.cover{height:160px;width:112px}.section-head h2 small{display:none}.tabs{gap:18px}.footer{font-size:8px}.footer span:last-child{display:none}.detail-body{gap:16px}.detail-info h3{font-size:18px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}} /* 阅读目标与内容页：与既有主题变量共用色彩。 */ -:root{--muted:#717b8b}[data-theme=dark]{--muted:#a2adbf}h3{font-size:14px;margin:0}button:disabled{opacity:.45;cursor:not-allowed}.demo-banner{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:18px}.welcome{margin-top:26px}.page-actions{display:flex;align-items:center;gap:10px}.secondary{padding:10px 15px;border:1px solid var(--line);background:var(--panel);border-radius:7px;font-size:12px}.pill{display:inline-block;padding:5px 8px;font-size:10px;border-radius:5px;background:var(--soft);color:var(--accent);white-space:nowrap}.pill.green{background:#6a9a8219;color:var(--green)}.pill.amber{background:#c3923919;color:#b78a3f}.hint{font-size:11px;color:var(--muted);line-height:1.8}.panel{padding:24px}.panel+.panel{margin-top:20px}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 22px}.toolbar .tabs{margin:0;flex-wrap:wrap}.toolbar input,.toolbar select,.field input,select{border:1px solid var(--line);border-radius:7px;padding:10px 12px;background:var(--panel);color:var(--text);font:inherit;font-size:12px}.toolbar select{max-width:100%}.field{display:flex;flex-direction:column;gap:8px;font-size:12px;margin-bottom:18px}.field input{width:100%;background:var(--bg)}.date-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.metrics-row{display:flex;gap:24px;padding:18px 0;margin-bottom:10px;color:var(--muted);font-size:11px}.metrics-row strong{font-family:Georgia;font-size:28px;color:var(--text);margin-right:6px;font-weight:400}.goals-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.goal-card{padding:25px;position:relative;overflow:hidden}.goal-card:before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--green)}.goal-card h3{font-size:19px;margin:17px 0 8px;word-break:break-word}.goal-card .section-head{margin-bottom:0}.goal-date{font-size:11px;color:var(--muted)}.cover-stack{display:flex;gap:0;margin:24px 0 20px;height:92px;padding-left:4px}.mini-cover{width:66px;height:92px;padding:10px 8px;border-radius:2px 4px 4px 2px;box-shadow:4px 5px 10px #0002;display:flex;flex-direction:column;flex-shrink:0;position:relative;overflow:hidden;border-left:3px solid #0002}.cover-stack .mini-cover{margin-left:-4px;transform:rotate(-3deg);transform-origin:bottom}.cover-stack .mini-cover:nth-child(2n){transform:rotate(4deg)}.mini-cover b{font-family:'Songti SC',serif;font-size:12px;position:relative;z-index:1;line-height:1.5}.mini-cover small{font-size:6px;position:relative;margin-top:auto}.stack-more{align-self:center;margin-left:18px;color:var(--muted);font-size:12px}.goal-progress{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin:12px 0 9px}.goal-progress strong{font-size:22px;color:var(--text);font-family:Georgia;font-weight:400}.goal-card .progress{height:5px;margin:0 0 19px}.goal-card .progress i{background:var(--green)}.goal-card-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px}.goal-card-footer small{font-size:10px;color:var(--muted)}.goal-card-footer button{font-size:11px;color:var(--accent)}.goal-intro{display:grid;grid-template-columns:1fr auto;gap:28px;background:var(--quote);padding:26px 30px;margin-bottom:24px;border:1px solid var(--line);border-radius:12px}.goal-intro h2{font-family:'Songti SC',serif;font-size:23px;font-weight:500;margin:0 0 10px}.goal-intro p{max-width:500px}.goal-intro .symbol{font-family:Georgia;font-size:65px;align-self:center;color:#819583}.goal-summary-row{display:block;text-align:left;width:100%;padding:16px 0;border-top:1px solid var(--line)}.goal-summary-row strong{font-size:12px;font-weight:500}.goal-summary-row small{display:block;margin-top:7px;color:var(--muted);font-size:10px}.goal-summary-row .progress{margin-top:10px}.list-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.list-card{padding:21px;display:block;text-align:left;transition:transform .2s}.list-card:hover{transform:translateY(-3px)}.list-art{height:117px;display:flex;align-items:center;justify-content:center;background:var(--quote);border-radius:7px;margin-bottom:18px}.list-art .mini-cover:nth-child(2){transform:translateY(-5px);margin:0 -4px;z-index:1}.list-card h3{font-size:15px;margin-bottom:8px}.list-card p{font-size:11px}.list-card>small{display:block;color:var(--muted);font-size:10px;margin-top:15px}.full-books{grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}.full-books .cover{height:168px;width:118px}.row-list{display:flex;flex-direction:column}.book-row{display:flex;align-items:center;gap:15px;padding:14px 0;border-bottom:1px solid var(--line)}.book-row:last-child{border:0}.book-row .mini-cover{width:42px;height:58px;padding:5px}.book-row .mini-cover b{font-size:8px}.book-row .mini-cover small{display:none}.book-row-text{flex:1;min-width:0}.book-row-text b{font-size:12px;font-weight:500}.book-row-text p{font-size:10px;margin-top:4px}.book-row .text-button{color:var(--accent)}.book-row-status{font-size:11px;color:var(--green)}.book-row .progress{max-width:200px}.notebook-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px}.notebook-menu button{display:block;width:100%;text-align:left;border-radius:8px;padding:16px;margin-bottom:7px;border:1px solid transparent}.notebook-menu button.active{background:var(--soft);border-color:var(--line)}.notebook-menu button b{font-size:12px;font-weight:500}.notebook-menu button small{display:block;font-size:10px;margin-top:6px;color:var(--muted)}.note-content{padding:22px;margin:0 0 15px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.note-content blockquote{margin:15px 0;font-family:'Songti SC',serif;font-size:16px;line-height:1.9}.note-content small{color:var(--muted);font-size:10px}.note-original{background:var(--quote);border-left:2px solid #b6a475;padding:12px;font-size:12px;line-height:1.9;margin-top:12px}.detail-tabs{display:flex;gap:19px;border-bottom:1px solid var(--line);margin:25px 0 18px;overflow:auto}.detail-tabs button{white-space:nowrap;font-size:12px;color:var(--muted);padding:0 0 12px;border-bottom:2px solid transparent}.detail-tabs button.active{color:var(--accent);border-color:var(--accent)}#detail{width:760px;max-height:90vh}#goal-editor{width:700px;max-height:90vh}.picker-head{margin:22px 0 10px}.picker-list{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-top:12px}.pick-row{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line);cursor:pointer}.pick-row:last-child{border:0}.pick-row input{accent-color:#356ce5;width:16px;height:16px}.pick-row b{font-size:12px;font-weight:500}.pick-row small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.pick-row .pill{margin-left:auto}.picker-lists{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.picker-lists button{border:1px solid var(--line);border-radius:6px;font-size:11px;padding:8px;background:var(--bg)}.picker-lists button.active{background:var(--soft);color:var(--accent)}.editor-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:20px;margin-top:12px}.editor-footer>span{font-size:10px;color:var(--muted)}.form-error{color:#bd5151;font-size:12px;margin:12px 0}.insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}.insight h3{margin-bottom:20px}.insight-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;color:var(--muted);font-size:11px}.insight-line b{color:var(--text);font-weight:500}.insight .progress{margin-top:5px}.section-space{margin-top:24px}.discovery-hero{padding:27px;background:var(--quote);border-radius:10px;margin-bottom:24px}.discovery-hero h2{font-family:'Songti SC',serif;font-size:22px;font-weight:500;margin:0 0 8px}.status-box{text-align:center;padding:65px 20px}.status-box h3{margin:12px}.status-box button{margin-top:18px}.type-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.type-chips button{padding:8px 11px;font-size:11px;border-radius:7px;border:1px solid var(--line)}.type-chips button.active{background:var(--soft);color:var(--accent);border-color:transparent}.review-row{border-bottom:1px solid var(--line);padding:18px 0}.review-row p{font-size:13px;color:var(--text);margin-top:12px}.review-row .meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}.detail-subtitle{margin:15px 0}.book-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px}.book-details-grid span{color:var(--muted)}.chapter-row{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px}.media-card{display:flex;gap:18px;align-items:center;padding:24px}.media-icon{width:65px;height:65px;flex-shrink:0;background:var(--soft);color:var(--accent);border-radius:14px;display:grid;place-items:center;font-size:27px}.hour-bars{height:58px;display:flex;align-items:end;gap:3px}.hour-bars i{height:var(--height);flex:1;background:#84a4d8;border-radius:2px 2px 0 0}.insight-detail{margin-top:20px}.insight-detail summary{cursor:pointer;font-size:12px;color:var(--accent);padding:15px 0}.source-tag{font-size:10px;color:var(--muted);margin:8px 0}.goal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}.detail-empty{padding:35px;color:var(--muted);font-size:12px;text-align:center}.cover .title{flex-shrink:0}.cover .tiny{font-size:5px}.c1 .title,.c3 .title{font-size:17px}.cover .author{font-size:6px}.cover .publisher{font-size:5px}.trend-total small{display:inline-block;font-size:11px}.trend{margin-bottom:0}.shelf{margin-top:22px}.list-index{color:var(--muted);font-size:10px;margin-right:5px}.summary-goals{margin-bottom:0} -@media(max-width:1200px){.full-books{grid-template-columns:repeat(4,minmax(0,1fr))}.list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:900px){.goals-grid{grid-template-columns:1fr}.columns>.rightcol{display:flex}.notebook-grid{grid-template-columns:1fr}.notebook-menu{display:flex;overflow:auto}.notebook-menu button{min-width:160px}.full-books{grid-template-columns:repeat(3,minmax(0,1fr))}.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar .nav{gap:9px}.welcome{align-items:flex-start;gap:15px}.welcome h1{line-height:1.4}.welcome .primary{white-space:nowrap}.goal-intro{padding:22px}.demo-banner>span:last-child{display:none}}@media(max-width:600px){.full-books{grid-template-columns:repeat(2,minmax(0,1fr))}.list-grid,.insight-grid{grid-template-columns:1fr}.goal-intro{grid-template-columns:1fr}.goal-intro .symbol{display:none}.goal-card{padding:20px}.welcome{flex-direction:column}.welcome .page-actions{align-self:flex-end}.panel{padding:18px}.date-fields{grid-template-columns:1fr;gap:0}.detail-body>.cover{width:95px;flex-shrink:0}.detail-body{gap:15px}.detail-info h3{font-size:18px}.book-details-grid{grid-template-columns:1fr}.toolbar input{width:100%}.metrics-row{gap:16px;flex-wrap:wrap}.metrics-row strong{font-size:23px}.goal-intro h2{font-size:20px}.cover-stack .mini-cover{width:57px}.stack-more{font-size:10px;margin-left:10px}.demo-banner{font-size:9px}.goal-card h3{font-size:17px}dialog{padding:20px}.editor-footer{gap:10px}.book-row{gap:9px}.book-row-text b{font-size:11px}} -.compact-value{font-family:Georgia,'PingFang SC',sans-serif;font-size:25px;line-height:1.5;letter-spacing:-.5px}.stat-foot{line-height:1.7}.insight-detail .insight-grid{margin-top:0}.sidebar .nav button[aria-current=page]{color:var(--accent)} -@media(max-width:600px){.compact-value{font-size:20px}.list-art .mini-cover{width:56px}.full-books .cover{width:105px;height:159px}.goal-card .section-head{gap:10px}.book-row .mini-cover{display:none}.detail-tabs{gap:16px}.date-fields input{min-height:40px}.detail-info .primary{font-size:11px;padding:9px}} -.mini-cover.c2,.mini-cover.c3{color:#fff5df} -.export-preview{width:100%;height:320px;margin-top:20px;border:1px solid var(--line);border-radius:8px;padding:18px;background:var(--bg);color:var(--text);font:12px/1.9 'PingFang SC',sans-serif;resize:vertical} -.real-cover{display:block;width:118px;height:168px;object-fit:cover;border-radius:4px;box-shadow:4px 5px 10px #0002;background:var(--quote)} -.mini-real-cover{width:66px;height:92px;flex-shrink:0} -.book-row .mini-real-cover{width:42px;height:58px} +:root { + --muted: #717b8b +} + +[data-theme=dark] { + --muted: #a2adbf +} + +h3 { + font-size: 14px; + margin: 0 +} + +button:disabled { + opacity: .45; + cursor: not-allowed +} + +.demo-banner { + display: flex; + justify-content: space-between; + color: var(--muted); + font-size: 10px; + margin-top: 18px +} + +.welcome { + margin-top: 26px +} + +.page-actions { + display: flex; + align-items: center; + gap: 10px +} + +.secondary { + padding: 10px 15px; + border: 1px solid var(--line); + background: var(--panel); + border-radius: 7px; + font-size: 12px +} + +.pill { + display: inline-block; + padding: 5px 8px; + font-size: 10px; + border-radius: 5px; + background: var(--soft); + color: var(--accent); + white-space: nowrap +} + +.pill.green { + background: #6a9a8219; + color: var(--green) +} + +.pill.amber { + background: #c3923919; + color: #b78a3f +} + +.hint { + font-size: 11px; + color: var(--muted); + line-height: 1.8 +} + +.panel { + padding: 24px +} + +.panel+.panel { + margin-top: 20px +} + +.toolbar { + display: flex; + gap: 10px; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + margin: 0 0 22px +} + +.toolbar .tabs { + margin: 0; + flex-wrap: wrap +} + +.toolbar input, +.toolbar select, +.field input, +select { + border: 1px solid var(--line); + border-radius: 7px; + padding: 10px 12px; + background: var(--panel); + color: var(--text); + font: inherit; + font-size: 12px +} + +.toolbar select { + max-width: 100% +} + +.field { + display: flex; + flex-direction: column; + gap: 8px; + font-size: 12px; + margin-bottom: 18px +} + +.field input { + width: 100%; + background: var(--bg) +} + +.date-fields { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px +} + +.metrics-row { + display: flex; + gap: 24px; + padding: 18px 0; + margin-bottom: 10px; + color: var(--muted); + font-size: 11px +} + +.metrics-row strong { + font-family: Georgia; + font-size: 28px; + color: var(--text); + margin-right: 6px; + font-weight: 400 +} + +.goals-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 20px +} + +.goal-card { + padding: 25px; + position: relative; + overflow: hidden +} + +.goal-card:before { + content: ''; + position: absolute; + inset: 0 auto 0 0; + width: 3px; + background: var(--green) +} + +.goal-card h3 { + font-size: 19px; + margin: 17px 0 8px; + word-break: break-word +} + +.goal-card .section-head { + margin-bottom: 0 +} + +.goal-date { + font-size: 11px; + color: var(--muted) +} + +.cover-stack { + display: flex; + gap: 0; + margin: 24px 0 20px; + height: 92px; + padding-left: 4px +} + +.mini-cover { + width: 66px; + height: 92px; + padding: 10px 8px; + border-radius: 2px 4px 4px 2px; + box-shadow: 4px 5px 10px #0002; + display: flex; + flex-direction: column; + flex-shrink: 0; + position: relative; + overflow: hidden; + border-left: 3px solid #0002 +} + +.cover-stack .mini-cover { + margin-left: -4px; + transform: rotate(-3deg); + transform-origin: bottom +} + +.cover-stack .mini-cover:nth-child(2n) { + transform: rotate(4deg) +} + +.mini-cover b { + font-family: 'Songti SC', serif; + font-size: 12px; + position: relative; + z-index: 1; + line-height: 1.5 +} + +.mini-cover small { + font-size: 6px; + position: relative; + margin-top: auto +} + +.stack-more { + align-self: center; + margin-left: 18px; + color: var(--muted); + font-size: 12px +} + +.goal-progress { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 11px; + color: var(--muted); + margin: 12px 0 9px +} + +.goal-progress strong { + font-size: 22px; + color: var(--text); + font-family: Georgia; + font-weight: 400 +} + +.goal-card .progress { + height: 5px; + margin: 0 0 19px +} + +.goal-card .progress i { + background: var(--green) +} + +.goal-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1px solid var(--line); + padding-top: 16px +} + +.goal-card-footer small { + font-size: 10px; + color: var(--muted) +} + +.goal-card-footer button { + font-size: 11px; + color: var(--accent) +} + +.goal-intro { + display: grid; + grid-template-columns: 1fr auto; + gap: 28px; + background: var(--quote); + padding: 26px 30px; + margin-bottom: 24px; + border: 1px solid var(--line); + border-radius: 12px +} + +.goal-intro h2 { + font-family: 'Songti SC', serif; + font-size: 23px; + font-weight: 500; + margin: 0 0 10px +} + +.goal-intro p { + max-width: 500px +} + +.goal-intro .symbol { + font-family: Georgia; + font-size: 65px; + align-self: center; + color: #819583 +} + +.goal-summary-row { + display: block; + text-align: left; + width: 100%; + padding: 16px 0; + border-top: 1px solid var(--line) +} + +.goal-summary-row strong { + font-size: 12px; + font-weight: 500 +} + +.goal-summary-row small { + display: block; + margin-top: 7px; + color: var(--muted); + font-size: 10px +} + +.goal-summary-row .progress { + margin-top: 10px +} + +.list-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 18px +} + +.list-card { + padding: 21px; + display: block; + text-align: left; + transition: transform .2s +} + +.list-card:hover { + transform: translateY(-3px) +} + +.list-art { + height: 117px; + display: flex; + align-items: center; + justify-content: center; + background: var(--quote); + border-radius: 7px; + margin-bottom: 18px +} + +.list-art .mini-cover:nth-child(2) { + transform: translateY(-5px); + margin: 0 -4px; + z-index: 1 +} + +.list-card h3 { + font-size: 15px; + margin-bottom: 8px +} + +.list-card p { + font-size: 11px +} + +.list-card>small { + display: block; + color: var(--muted); + font-size: 10px; + margin-top: 15px +} + +.full-books { + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 26px +} + +.full-books .cover { + height: 168px; + width: 118px +} + +.row-list { + display: flex; + flex-direction: column +} + +.book-row { + display: flex; + align-items: center; + gap: 15px; + padding: 14px 0; + border-bottom: 1px solid var(--line) +} + +.book-row:last-child { + border: 0 +} + +.book-row .mini-cover { + width: 42px; + height: 58px; + padding: 5px +} + +.book-row .mini-cover b { + font-size: 8px +} + +.book-row .mini-cover small { + display: none +} + +.book-row-text { + flex: 1; + min-width: 0 +} + +.book-row-text b { + font-size: 12px; + font-weight: 500 +} + +.book-row-text p { + font-size: 10px; + margin-top: 4px +} + +.book-row .text-button { + color: var(--accent) +} + +.book-row-status { + font-size: 11px; + color: var(--green) +} + +.book-row .progress { + max-width: 200px +} + +.notebook-grid { + display: grid; + grid-template-columns: 230px minmax(0, 1fr); + gap: 24px +} + +.notebook-menu button { + display: block; + width: 100%; + text-align: left; + border-radius: 8px; + padding: 16px; + margin-bottom: 7px; + border: 1px solid transparent +} + +.notebook-menu button.active { + background: var(--soft); + border-color: var(--line) +} + +.notebook-menu button b { + font-size: 12px; + font-weight: 500 +} + +.notebook-menu button small { + display: block; + font-size: 10px; + margin-top: 6px; + color: var(--muted) +} + +.note-content { + padding: 22px; + margin: 0 0 15px; + background: var(--panel); + border: 1px solid var(--line); + border-radius: 10px +} + +.note-content blockquote { + margin: 15px 0; + font-family: 'Songti SC', serif; + font-size: 16px; + line-height: 1.9 +} + +.note-content small { + color: var(--muted); + font-size: 10px +} + +.note-original { + background: var(--quote); + border-left: 2px solid #b6a475; + padding: 12px; + font-size: 12px; + line-height: 1.9; + margin-top: 12px +} + +.detail-tabs { + display: flex; + gap: 19px; + border-bottom: 1px solid var(--line); + margin: 25px 0 18px; + overflow: auto +} + +.detail-tabs button { + white-space: nowrap; + font-size: 12px; + color: var(--muted); + padding: 0 0 12px; + border-bottom: 2px solid transparent +} + +.detail-tabs button.active { + color: var(--accent); + border-color: var(--accent) +} + +#detail { + width: 760px; + max-height: 90vh +} + +#goal-editor { + width: 700px; + max-height: 90vh +} + +.picker-head { + margin: 22px 0 10px +} + +.picker-list { + max-height: 280px; + overflow: auto; + border: 1px solid var(--line); + border-radius: 8px; + margin-top: 12px +} + +.pick-row { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 15px; + border-bottom: 1px solid var(--line); + cursor: pointer +} + +.pick-row:last-child { + border: 0 +} + +.pick-row input { + accent-color: #356ce5; + width: 16px; + height: 16px +} + +.pick-row b { + font-size: 12px; + font-weight: 500 +} + +.pick-row small { + display: block; + color: var(--muted); + font-size: 10px; + margin-top: 4px +} + +.pick-row .pill { + margin-left: auto +} + +.picker-lists { + display: flex; + gap: 7px; + flex-wrap: wrap; + margin: 12px 0 +} + +.picker-lists button { + border: 1px solid var(--line); + border-radius: 6px; + font-size: 11px; + padding: 8px; + background: var(--bg) +} + +.picker-lists button.active { + background: var(--soft); + color: var(--accent) +} + +.editor-footer { + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid var(--line); + padding-top: 20px; + margin-top: 12px +} + +.editor-footer>span { + font-size: 10px; + color: var(--muted) +} + +.form-error { + color: #bd5151; + font-size: 12px; + margin: 12px 0 +} + +.insight-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 18px; + margin-top: 22px +} + +.insight h3 { + margin-bottom: 20px +} + +.insight-line { + display: flex; + justify-content: space-between; + gap: 12px; + padding: 10px 0; + color: var(--muted); + font-size: 11px +} + +.insight-line b { + color: var(--text); + font-weight: 500 +} + +.insight .progress { + margin-top: 5px +} + +.section-space { + margin-top: 24px +} + +.discovery-hero { + padding: 27px; + background: var(--quote); + border-radius: 10px; + margin-bottom: 24px +} + +.discovery-hero h2 { + font-family: 'Songti SC', serif; + font-size: 22px; + font-weight: 500; + margin: 0 0 8px +} + +.status-box { + text-align: center; + padding: 65px 20px +} + +.status-box h3 { + margin: 12px +} + +.status-box button { + margin-top: 18px +} + +.type-chips { + display: flex; + gap: 8px; + flex-wrap: wrap; + margin-bottom: 20px +} + +.type-chips button { + padding: 8px 11px; + font-size: 11px; + border-radius: 7px; + border: 1px solid var(--line) +} + +.type-chips button.active { + background: var(--soft); + color: var(--accent); + border-color: transparent +} + +.review-row { + border-bottom: 1px solid var(--line); + padding: 18px 0 +} + +.review-row p { + font-size: 13px; + color: var(--text); + margin-top: 12px +} + +.review-row .meta { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 11px; + color: var(--muted) +} + +.detail-subtitle { + margin: 15px 0 +} + +.book-details-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + font-size: 12px +} + +.book-details-grid span { + color: var(--muted) +} + +.chapter-row { + padding: 14px 0; + border-bottom: 1px solid var(--line); + display: flex; + justify-content: space-between; + font-size: 12px +} + +.media-card { + display: flex; + gap: 18px; + align-items: center; + padding: 24px +} + +.media-icon { + width: 65px; + height: 65px; + flex-shrink: 0; + background: var(--soft); + color: var(--accent); + border-radius: 14px; + display: grid; + place-items: center; + font-size: 27px +} + +.hour-bars { + height: 58px; + display: flex; + align-items: end; + gap: 3px +} + +.hour-bars i { + height: var(--height); + flex: 1; + background: #84a4d8; + border-radius: 2px 2px 0 0 +} + +.insight-detail { + margin-top: 20px +} + +.insight-detail summary { + cursor: pointer; + font-size: 12px; + color: var(--accent); + padding: 15px 0 +} + +.source-tag { + font-size: 10px; + color: var(--muted); + margin: 8px 0 +} + +.goal-actions { + display: flex; + gap: 10px; + justify-content: flex-end; + margin-top: 22px +} + +.detail-empty { + padding: 35px; + color: var(--muted); + font-size: 12px; + text-align: center +} + +.cover .title { + flex-shrink: 0 +} + +.cover .tiny { + font-size: 5px +} + +.c1 .title, +.c3 .title { + font-size: 17px +} + +.cover .author { + font-size: 6px +} + +.cover .publisher { + font-size: 5px +} + +.trend-total small { + display: inline-block; + font-size: 11px +} + +.trend { + margin-bottom: 0 +} + +.shelf { + margin-top: 22px +} + +.list-index { + color: var(--muted); + font-size: 10px; + margin-right: 5px +} + +.summary-goals { + margin-bottom: 0 +} + +@media(max-width:1200px) { + .full-books { + grid-template-columns: repeat(4, minmax(0, 1fr)) + } + + .list-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) + } + + .insight-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) + } +} + +@media(max-width:900px) { + .goals-grid { + grid-template-columns: 1fr + } + + .columns>.rightcol { + display: flex + } + + .notebook-grid { + grid-template-columns: 1fr + } + + .notebook-menu { + display: flex; + overflow: auto + } + + .notebook-menu button { + min-width: 160px + } + + .full-books { + grid-template-columns: repeat(3, minmax(0, 1fr)) + } + + .insight-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) + } + + .sidebar .nav { + gap: 9px + } + + .welcome { + align-items: flex-start; + gap: 15px + } + + .welcome h1 { + line-height: 1.4 + } + + .welcome .primary { + white-space: nowrap + } + + .goal-intro { + padding: 22px + } + + .demo-banner>span:last-child { + display: none + } +} + +@media(max-width:600px) { + .full-books { + grid-template-columns: repeat(2, minmax(0, 1fr)) + } + + .list-grid, + .insight-grid { + grid-template-columns: 1fr + } + + .goal-intro { + grid-template-columns: 1fr + } + + .goal-intro .symbol { + display: none + } + + .goal-card { + padding: 20px + } + + .welcome { + flex-direction: column + } + + .welcome .page-actions { + align-self: flex-end + } + + .panel { + padding: 18px + } + + .date-fields { + grid-template-columns: 1fr; + gap: 0 + } + + .detail-body>.cover { + width: 95px; + flex-shrink: 0 + } + + .detail-body { + gap: 15px + } + + .detail-info h3 { + font-size: 18px + } + + .book-details-grid { + grid-template-columns: 1fr + } + + .toolbar input { + width: 100% + } + + .metrics-row { + gap: 16px; + flex-wrap: wrap + } + + .metrics-row strong { + font-size: 23px + } + + .goal-intro h2 { + font-size: 20px + } + + .cover-stack .mini-cover { + width: 57px + } + + .stack-more { + font-size: 10px; + margin-left: 10px + } + + .demo-banner { + font-size: 9px + } + + .goal-card h3 { + font-size: 17px + } + + dialog { + padding: 20px + } + + .editor-footer { + gap: 10px + } + + .book-row { + gap: 9px + } + + .book-row-text b { + font-size: 11px + } +} + +.compact-value { + font-family: Georgia, 'PingFang SC', sans-serif; + font-size: 25px; + line-height: 1.5; + letter-spacing: -.5px +} + +.stat-foot { + line-height: 1.7 +} + +.insight-detail .insight-grid { + margin-top: 0 +} + +.sidebar .nav button[aria-current=page] { + color: var(--accent) +} + +@media(max-width:600px) { + .compact-value { + font-size: 20px + } + + .list-art .mini-cover { + width: 56px + } + + .full-books .cover { + width: 105px; + height: 159px + } + + .goal-card .section-head { + gap: 10px + } + + .book-row .mini-cover { + display: none + } + + .detail-tabs { + gap: 16px + } + + .date-fields input { + min-height: 40px + } + + .detail-info .primary { + font-size: 11px; + padding: 9px + } +} + +.mini-cover.c2, +.mini-cover.c3 { + color: #fff5df +} + +.export-preview { + width: 100%; + height: 320px; + margin-top: 20px; + border: 1px solid var(--line); + border-radius: 8px; + padding: 18px; + background: var(--bg); + color: var(--text); + font: 12px/1.9 'PingFang SC', sans-serif; + resize: vertical +} + +.real-cover { + display: block; + width: 118px; + height: 168px; + object-fit: cover; + border-radius: 4px; + box-shadow: 4px 5px 10px #0002; + background: var(--quote) +} + +.mini-real-cover { + width: 66px; + height: 92px; + flex-shrink: 0 +} + +.book-row .mini-real-cover { + width: 42px; + height: 58px +} + /* 紧凑内容布局：压缩页面介绍，保留正文、书封和操作的可读尺寸。 */ -.topbar{height:58px} -.top-actions{gap:16px} -.demo-banner{margin-top:10px;gap:16px;line-height:1.5} -.welcome{margin:8px 0 10px;gap:14px;align-items:center} -.welcome h1{font-size:23px;line-height:1.35;margin-bottom:3px} -.welcome p{line-height:1.55} -.welcome .eyebrow,.goal-intro .eyebrow,.goal-intro .symbol{display:none} -.page-actions{flex-shrink:0} -.page-actions:empty{display:none} -.toolbar{margin-bottom:10px;gap:8px 16px} -#page-content>.type-chips{margin:0 0 10px;gap:8px} -.toolbar .type-chips{margin:0} -#page-content>.type-chips button,.toolbar .type-chips button{min-height:36px;padding:8px 12px} -.stats{gap:14px;margin-bottom:14px} -.stat{padding:14px 18px;min-width:0} -.stat-value{margin:8px 0} -.compact-value{font-size:24px;overflow-wrap:anywhere} -.columns,.rightcol{gap:16px} -.shelf,.trend,.summary-goals{padding:18px} -.panel{padding:18px} -.section-head{margin-bottom:14px;gap:12px} -.shelf{margin-top:16px} -.books{gap:18px} -.full-books{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:22px 18px} -.book .real-cover{max-width:100%;height:auto;aspect-ratio:118/168} -.book h3{margin:10px 0 4px} -.book p{line-height:1.45} -.book .progress{margin-top:9px} -.summary-goals .status-box{padding:18px 10px;text-align:left} -.summary-goals .status-box h3{margin:6px 0;font-size:13px} -.summary-goals .status-box button{margin-top:10px} -.goal-intro{display:block;padding:12px 16px;margin-bottom:14px} -.goal-intro>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center} -.goal-intro h2{font-size:16px;margin:0 0 2px} -.goal-intro p{font-size:10px;line-height:1.6} -.goal-intro .metrics-row{grid-column:2;grid-row:1/3;margin:0;padding:0;gap:16px;white-space:nowrap} -.goal-intro .metrics-row span{display:flex;flex-direction:column;gap:2px} -.goal-intro .metrics-row strong{font-size:20px;line-height:1.2;margin:0} -.goals-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;align-items:start} -.goal-card{padding:18px} -.goal-card h3{font-size:17px;margin:10px 0 5px} -.goal-card .cover-stack{margin:14px 0;height:66px} -.goal-card .mini-cover,.goal-card .mini-real-cover{width:47px;height:66px} -.goal-card .progress{margin-bottom:12px} -.goal-card-footer{padding-top:12px;gap:12px;flex-wrap:wrap} -.goal-card-footer button{min-height:32px} -.goal-summary-row{padding:12px 0} -@media(max-width:1500px){.full-books{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:20px 16px}} -@media(max-width:1200px){.full-books{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:18px 14px}} -@media(max-width:900px){.full-books{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:16px 12px}} -@media(max-width:1150px){ - .goal-intro>div{grid-template-columns:1fr;gap:4px} - .goal-intro .metrics-row{grid-column:auto;grid-row:auto;margin-top:8px;flex-wrap:wrap} - .goal-intro .metrics-row span{display:block} - .goal-intro .metrics-row strong{margin-right:6px} +.topbar { + height: 58px } -@media(max-width:600px){ - .topbar{height:56px} - .demo-banner{margin-top:8px} - .welcome{align-items:flex-start;gap:12px} - .welcome h1{font-size:20px} - .welcome p{font-size:11px} - .welcome .page-actions{align-self:flex-start} - .primary,.secondary,.iconbtn{min-height:40px} - .stats{gap:12px} - .stat{padding:12px} - .compact-value{font-size:20px} - .shelf,.trend,.summary-goals,.goal-card,.panel{padding:14px} - .full-books{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px} - .goal-intro{padding:16px} - .goal-intro .metrics-row{gap:12px} - .goal-intro .metrics-row strong{font-size:22px} - .goal-card .section-head{flex-wrap:wrap} - .goal-card .cover-stack{gap:0} - .goal-card .mini-cover,.goal-card .mini-real-cover{width:44px;height:62px} - .goal-card .cover-stack{height:62px} - .stack-more{margin-left:8px;white-space:nowrap} + +.top-actions { + gap: 16px +} + +.demo-banner { + margin-top: 10px; + gap: 16px; + line-height: 1.5 +} + +.welcome { + margin: 8px 0 10px; + gap: 14px; + align-items: center +} + +.welcome h1 { + font-size: 23px; + line-height: 1.35; + margin-bottom: 3px +} + +.welcome p { + line-height: 1.55 +} + +.welcome .eyebrow, +.goal-intro .eyebrow, +.goal-intro .symbol { + display: none +} + +.page-actions { + flex-shrink: 0 +} + +.page-actions:empty { + display: none +} + +.toolbar { + margin-bottom: 10px; + gap: 8px 16px +} + +#page-content>.type-chips { + margin: 0 0 10px; + gap: 8px +} + +.toolbar .type-chips { + margin: 0 +} + +#page-content>.type-chips button, +.toolbar .type-chips button { + min-height: 36px; + padding: 8px 12px +} + +.stats { + gap: 14px; + margin-bottom: 14px +} + +.stat { + padding: 14px 18px; + min-width: 0 +} + +.stat-value { + margin: 8px 0 +} + +.compact-value { + font-size: 24px; + overflow-wrap: anywhere +} + +.columns, +.rightcol { + gap: 16px +} + +.shelf, +.trend, +.summary-goals { + padding: 18px +} + +.panel { + padding: 18px +} + +.section-head { + margin-bottom: 14px; + gap: 12px +} + +.shelf { + margin-top: 16px +} + +.books { + gap: 18px +} + +.full-books { + grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); + gap: 22px 18px +} + +.book .real-cover { + max-width: 100%; + height: auto; + aspect-ratio: 118/168 +} + +.book h3 { + margin: 10px 0 4px +} + +.book p { + line-height: 1.45 +} + +.book .progress { + margin-top: 9px +} + +.summary-goals .status-box { + padding: 18px 10px; + text-align: left +} + +.summary-goals .status-box h3 { + margin: 6px 0; + font-size: 13px +} + +.summary-goals .status-box button { + margin-top: 10px +} + +.goal-intro { + display: block; + padding: 12px 16px; + margin-bottom: 14px +} + +.goal-intro>div { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + column-gap: 20px; + align-items: center +} + +.goal-intro h2 { + font-size: 16px; + margin: 0 0 2px +} + +.goal-intro p { + font-size: 10px; + line-height: 1.6 +} + +.goal-intro .metrics-row { + grid-column: 2; + grid-row: 1/3; + margin: 0; + padding: 0; + gap: 16px; + white-space: nowrap +} + +.goal-intro .metrics-row span { + display: flex; + flex-direction: column; + gap: 2px +} + +.goal-intro .metrics-row strong { + font-size: 20px; + line-height: 1.2; + margin: 0 +} + +.goals-grid { + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 16px; + align-items: start +} + +.goal-card { + padding: 18px +} + +.goal-card h3 { + font-size: 17px; + margin: 10px 0 5px +} + +.goal-card .cover-stack { + margin: 14px 0; + height: 66px +} + +.goal-card .mini-cover, +.goal-card .mini-real-cover { + width: 47px; + height: 66px +} + +.goal-card .progress { + margin-bottom: 12px +} + +.goal-card-footer { + padding-top: 12px; + gap: 12px; + flex-wrap: wrap +} + +.goal-card-footer button { + min-height: 32px +} + +.goal-summary-row { + padding: 12px 0 +} + +@media(max-width:1500px) { + .full-books { + grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); + gap: 20px 16px + } +} + +@media(max-width:1200px) { + .full-books { + grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); + gap: 18px 14px + } +} + +@media(max-width:900px) { + .full-books { + grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); + gap: 16px 12px + } +} + +@media(max-width:1150px) { + .goal-intro>div { + grid-template-columns: 1fr; + gap: 4px + } + + .goal-intro .metrics-row { + grid-column: auto; + grid-row: auto; + margin-top: 8px; + flex-wrap: wrap + } + + .goal-intro .metrics-row span { + display: block + } + + .goal-intro .metrics-row strong { + margin-right: 6px + } +} + +@media(max-width:600px) { + .topbar { + height: 56px + } + + .demo-banner { + margin-top: 8px + } + + .welcome { + align-items: flex-start; + gap: 12px + } + + .welcome h1 { + font-size: 20px + } + + .welcome p { + font-size: 11px + } + + .welcome .page-actions { + align-self: flex-start + } + + .primary, + .secondary, + .iconbtn { + min-height: 40px + } + + .stats { + gap: 12px + } + + .stat { + padding: 12px + } + + .compact-value { + font-size: 20px + } + + .shelf, + .trend, + .summary-goals, + .goal-card, + .panel { + padding: 14px + } + + .full-books { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 18px 12px + } + + .goal-intro { + padding: 16px + } + + .goal-intro .metrics-row { + gap: 12px + } + + .goal-intro .metrics-row strong { + font-size: 22px + } + + .goal-card .section-head { + flex-wrap: wrap + } + + .goal-card .cover-stack { + gap: 0 + } + + .goal-card .mini-cover, + .goal-card .mini-real-cover { + width: 44px; + height: 62px + } + + .goal-card .cover-stack { + height: 62px + } + + .stack-more { + margin-left: 8px; + white-space: nowrap + } +} + +.login-page { + min-height: 100vh; + display: grid; + place-items: center; + padding: 24px +} + +.login-shell { + width: min(100%, 420px) +} + +.login-logo { + justify-content: center; + margin-bottom: 26px +} + +.login-logo .logo-mark { + border-radius: 9px +} + +.login-logo svg { + width: 24px; + height: 24px +} + +.login-panel { + padding: 30px +} + +.login-panel h1 { + font-size: 23px; + margin: 0 0 8px +} + +.login-panel>p { + margin-bottom: 23px +} + +.login-form { + display: grid; + gap: 16px; + margin-top: 22px +} + +.login-form label { + display: grid; + gap: 7px; + font-size: 12px; + color: var(--text) +} + +.login-form input { + width: 100%; + min-height: 42px; + border: 1px solid var(--line); + border-radius: 7px; + background: var(--bg); + color: var(--text); + padding: 10px 12px +} + +.login-form input:focus { + border-color: var(--accent) +} + +.login-form .primary { + width: 100%; + min-height: 42px; + margin-top: 4px +} + +.login-error { + margin-top: 16px; + padding: 10px 12px; + border: 1px solid #e6b9b5; + border-radius: 7px; + background: #fff5f4; + color: #a8443c; + font-size: 12px; + line-height: 1.6 +} + +.login-foot { + text-align: center; + margin-top: 20px +} + +.top-actions form { + margin: 0 +} + +.logout-button { + white-space: nowrap +} + +@media(max-width:600px) { + .login-page { + padding: 18px + } + + .login-panel { + padding: 24px + } + + .top-actions { + gap: 9px + } + + .logout-button { + font-size: 10px + } } -.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-shell{width:min(100%,420px)}.login-logo{justify-content:center;margin-bottom:26px}.login-logo .logo-mark{border-radius:9px}.login-logo svg{width:24px;height:24px}.login-panel{padding:30px}.login-panel h1{font-size:23px;margin:0 0 8px}.login-panel>p{margin-bottom:23px}.login-form{display:grid;gap:16px;margin-top:22px}.login-form label{display:grid;gap:7px;font-size:12px;color:var(--text)}.login-form input{width:100%;min-height:42px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);padding:10px 12px}.login-form input:focus{border-color:var(--accent)}.login-form .primary{width:100%;min-height:42px;margin-top:4px}.login-error{margin-top:16px;padding:10px 12px;border:1px solid #e6b9b5;border-radius:7px;background:#fff5f4;color:#a8443c;font-size:12px;line-height:1.6}.login-foot{text-align:center;margin-top:20px}.top-actions form{margin:0}.logout-button{white-space:nowrap}@media(max-width:600px){.login-page{padding:18px}.login-panel{padding:24px}.top-actions{gap:9px}.logout-button{font-size:10px}} /* 书架分页与排序 */ -.shelf-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;flex-wrap:wrap} -.shelf-sort-control{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--muted);font-size:11px} -.shelf-sort-control select{min-width:140px} -.shelf-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:18px;flex-wrap:wrap} -.shelf-pagination .page-btn{min-width:36px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text);font:inherit;font-size:11px;cursor:pointer} -.shelf-pagination .page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} -.shelf-pagination .page-btn:disabled{opacity:.45;cursor:not-allowed} -.shelf-pagination .page-btn.active{border-color:var(--accent);background:var(--accent);color:#fff} -@media(max-width:600px){.shelf-toolbar{align-items:flex-start}.shelf-pagination{gap:4px}.shelf-pagination .page-btn{min-width:32px;padding:7px 8px}} +.shelf-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin: 0 0 14px; + flex-wrap: wrap +} + +.shelf-sort-control { + display: flex; + align-items: center; + gap: 8px; + margin-left: auto; + color: var(--muted); + font-size: 11px +} + +.shelf-sort-control select { + min-width: 140px +} + +.shelf-pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 6px; + margin-top: 18px; + flex-wrap: wrap +} + +.shelf-pagination .page-btn { + min-width: 36px; + padding: 8px 10px; + border: 1px solid var(--line); + border-radius: 7px; + background: var(--panel); + color: var(--text); + font: inherit; + font-size: 11px; + cursor: pointer +} + +.shelf-pagination .page-btn:hover:not(:disabled) { + border-color: var(--accent); + color: var(--accent) +} + +.shelf-pagination .page-btn:disabled { + opacity: .45; + cursor: not-allowed +} + +.shelf-pagination .page-btn.active { + border-color: var(--accent); + background: var(--accent); + color: #fff +} + +@media(max-width:600px) { + .shelf-toolbar { + align-items: flex-start + } + + .shelf-pagination { + gap: 4px + } + + .shelf-pagination .page-btn { + min-width: 32px; + padding: 7px 8px + } +} \ No newline at end of file diff --git a/static/js/app.js b/static/js/app.js index 9a669c7..a66f058 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -587,12 +587,12 @@ function renderNotes() { ? statusBox('error', '暂时无法读取笔记', loadError.notes[noteBook] || '', 'retry-notes') : statusBox('loading', '正在读取笔记内容…', '划线、想法与书签数量。')) : `
${counts.highlights + counts.thoughts + counts.bookmarks}条笔记划线 ${counts.highlights}想法 ${counts.thoughts}书签 ${counts.bookmarks}
` + - tabs([['all', '全部内容'], ['highlight', '划线'], ['thought', '想法 / 个人点评'], ['bookmark', '书签数量']], noteType, 'note-type') + - (noteType === 'bookmark' - ? `
${counts.bookmarks} 个书签 · 微信读书接口只提供书签数量，不提供书签内容。
` - : (noteSlice.map(noteCard).join('') || '
当前筛选没有笔记。
')) + - (noteType !== 'bookmark' && shownNotes.length > noteSlice.length ? `` : '') + - `

${noteBook === 'all' ? `「全部笔记本」聚合了笔记最多的 ${payload.aggregated_books || 0} 本，切换左侧笔记本可查看单本全部内容。` : '内容来自微信读书划线与个人想法。'}总笔记数包含书签；导出包含划线和想法，不含公开点评及书签内容。

`; + tabs([['all', '全部内容'], ['highlight', '划线'], ['thought', '想法 / 个人点评'], ['bookmark', '书签数量']], noteType, 'note-type') + + (noteType === 'bookmark' + ? `
${counts.bookmarks} 个书签 · 微信读书接口只提供书签数量，不提供书签内容。
` + : (noteSlice.map(noteCard).join('') || '
当前筛选没有笔记。
')) + + (noteType !== 'bookmark' && shownNotes.length > noteSlice.length ? `` : '') + + `

${noteBook === 'all' ? `「全部笔记本」聚合了笔记最多的 ${payload.aggregated_books || 0} 本，切换左侧笔记本可查看单本全部内容。` : '内容来自微信读书划线与个人想法。'}总笔记数包含书签；导出包含划线和想法，不含公开点评及书签内容。

`; return welcome('把读过的，留在心里', `${notebooksData.totals.books} 本书留下过笔记，共 ${notebooksData.totals.notes} 条。`, '') + `
${body}
`; diff --git a/static/js/demo-data.js b/static/js/demo-data.js index ea9740a..04dcba6 100644 --- a/static/js/demo-data.js +++ b/static/js/demo-data.js @@ -1,25 +1,25 @@ // 所有数据均为设计示例，不来自真实账号。 -const books = [{title:'也许你该找个人聊聊',short:'也许你该\n找个人\n聊聊',author:'洛莉·戈特利布',en:'MAYBE YOU SHOULD TALK TO SOMEONE',cover:'c1',progress:68,status:'reading',score:'9.1',desc:'一位心理治疗师的回忆录。跟随几个普通人的故事，理解关系、失去与成长，也重新认识自己。'},{title:'三体',short:'三体',author:'刘慈欣',en:'THE THREE-BODY PROBLEM',cover:'c2',progress:42,status:'reading',score:'9.4',desc:'从一段隐秘的往事出发，走进人类与宇宙文明的宏大故事。科学、想象与命运交织，打开另一种观看世界的尺度。'},{title:'蛤蟆先生去看心理医生',short:'蛤蟆先生\n去看\n心理医生',author:'罗伯特·戴博德',en:'COUNSELLING FOR TOADS',cover:'c3',progress:85,status:'reading',score:'8.8',desc:'借由蛤蟆先生与心理咨询师的对话，探索情绪与行为背后的原因。这是一次关于理解自己、为自己负责的旅程。'},{title:'人生海海',short:'人生\n海海',author:'麦家',en:'LIFE IS A VAST SEA',cover:'c4',progress:26,status:'reading',score:'9.0',desc:'在复杂的时代与人情之中，讲述一个人的秘密与命运。人生如海，有暗流，也有让人继续前行的力量。'},{title:'活着',short:'活着',author:'余华',en:'TO LIVE',cover:'c3',progress:100,status:'done',score:'9.5',desc:'一个人与时代相遇的故事，关于生命的韧性与日常的重量。'},{title:'被讨厌的勇气',short:'被讨厌\n的勇气',author:'岸见一郎 / 古贺史健',en:'THE COURAGE TO BE DISLIKED',cover:'c1',progress:100,status:'done',score:'8.6',desc:'以对话的方式讨论人际关系、自我接纳与选择的自由。'},{title:'悉达多',short:'悉达多',author:'赫尔曼·黑塞',en:'SIDDHARTHA',cover:'c4',progress:0,status:'wish',score:'9.2',desc:'一个寻找自我的人，穿过不同的人生经验，在河流边学会倾听。'},{title:'置身事内',short:'置身\n事内',author:'兰小欢',en:'INSIDE THE SYSTEM',cover:'c2',progress:0,status:'wish',score:'9.3',desc:'从具体的经济生活出发，理解政府与经济发展的关系。'}]; +const books = [{ title: '也许你该找个人聊聊', short: '也许你该\n找个人\n聊聊', author: '洛莉·戈特利布', en: 'MAYBE YOU SHOULD TALK TO SOMEONE', cover: 'c1', progress: 68, status: 'reading', score: '9.1', desc: '一位心理治疗师的回忆录。跟随几个普通人的故事，理解关系、失去与成长，也重新认识自己。' }, { title: '三体', short: '三体', author: '刘慈欣', en: 'THE THREE-BODY PROBLEM', cover: 'c2', progress: 42, status: 'reading', score: '9.4', desc: '从一段隐秘的往事出发，走进人类与宇宙文明的宏大故事。科学、想象与命运交织，打开另一种观看世界的尺度。' }, { title: '蛤蟆先生去看心理医生', short: '蛤蟆先生\n去看\n心理医生', author: '罗伯特·戴博德', en: 'COUNSELLING FOR TOADS', cover: 'c3', progress: 85, status: 'reading', score: '8.8', desc: '借由蛤蟆先生与心理咨询师的对话，探索情绪与行为背后的原因。这是一次关于理解自己、为自己负责的旅程。' }, { title: '人生海海', short: '人生\n海海', author: '麦家', en: 'LIFE IS A VAST SEA', cover: 'c4', progress: 26, status: 'reading', score: '9.0', desc: '在复杂的时代与人情之中，讲述一个人的秘密与命运。人生如海，有暗流，也有让人继续前行的力量。' }, { title: '活着', short: '活着', author: '余华', en: 'TO LIVE', cover: 'c3', progress: 100, status: 'done', score: '9.5', desc: '一个人与时代相遇的故事，关于生命的韧性与日常的重量。' }, { title: '被讨厌的勇气', short: '被讨厌\n的勇气', author: '岸见一郎 / 古贺史健', en: 'THE COURAGE TO BE DISLIKED', cover: 'c1', progress: 100, status: 'done', score: '8.6', desc: '以对话的方式讨论人际关系、自我接纳与选择的自由。' }, { title: '悉达多', short: '悉达多', author: '赫尔曼·黑塞', en: 'SIDDHARTHA', cover: 'c4', progress: 0, status: 'wish', score: '9.2', desc: '一个寻找自我的人，穿过不同的人生经验，在河流边学会倾听。' }, { title: '置身事内', short: '置身\n事内', author: '兰小欢', en: 'INSIDE THE SYSTEM', cover: 'c2', progress: 0, status: 'wish', score: '9.3', desc: '从具体的经济生活出发，理解政府与经济发展的关系。' }]; books.forEach((book, index) => { book.id = `b${index}`; }); const booklists = [ - {id:'l1',name:'在故事里，读懂人生',source:'我的书单',description:'从别人的故事里，找到自己生活的回声。',ids:['b3','b4','b6']}, - {id:'l2',name:'心理学，向内走一程',source:'我的书单',description:'理解情绪与关系，也练习温柔地对待自己。',ids:['b0','b2','b5']}, - {id:'l3',name:'重新认识这个世界',source:'公开书单 · 示例',description:'从宇宙到日常，拓宽理解世界的尺度。',ids:['b1','b7','b6']}, - {id:'l4',name:'适合慢慢读的夜晚',source:'公开书单 · 示例',description:'把时间留给文学，让心绪落在书页之间。',ids:['b4','b6','b0']} + { id: 'l1', name: '在故事里，读懂人生', source: '我的书单', description: '从别人的故事里，找到自己生活的回声。', ids: ['b3', 'b4', 'b6'] }, + { id: 'l2', name: '心理学，向内走一程', source: '我的书单', description: '理解情绪与关系，也练习温柔地对待自己。', ids: ['b0', 'b2', 'b5'] }, + { id: 'l3', name: '重新认识这个世界', source: '公开书单 · 示例', description: '从宇宙到日常，拓宽理解世界的尺度。', ids: ['b1', 'b7', 'b6'] }, + { id: 'l4', name: '适合慢慢读的夜晚', source: '公开书单 · 示例', description: '把时间留给文学，让心绪落在书页之间。', ids: ['b4', 'b6', 'b0'] } ]; const initialGoals = [ - {id:'g1',name:'秋季文学计划',start:'2026-09-01',end:'2026-11-30',ids:['b3','b4','b6','b1'],sources:['在故事里，读懂人生']}, - {id:'g2',name:'给内心一点生长的空间',start:'2026-09-01',end:'2026-10-31',ids:['b0','b2','b5'],sources:['心理学，向内走一程']}, - {id:'g3',name:'读完的书，成为自己的底气',start:'2026-08-01',end:'2026-08-31',ids:['b4','b5'],sources:[]} + { id: 'g1', name: '秋季文学计划', start: '2026-09-01', end: '2026-11-30', ids: ['b3', 'b4', 'b6', 'b1'], sources: ['在故事里，读懂人生'] }, + { id: 'g2', name: '给内心一点生长的空间', start: '2026-09-01', end: '2026-10-31', ids: ['b0', 'b2', 'b5'], sources: ['心理学，向内走一程'] }, + { id: 'g3', name: '读完的书，成为自己的底气', start: '2026-08-01', end: '2026-08-31', ids: ['b4', 'b5'], sources: [] } ]; const personalNotes = [ - {id:'n1',bookId:'b0',type:'thought',text:'把注意力还给生活本身，让平凡的日子有迹可循。',date:'2026-09-11'}, - {id:'n2',bookId:'b1',type:'highlight',text:'在辽阔的未知面前，每一个问题都值得被认真对待。',date:'2026-09-10'}, - {id:'n3',bookId:'b2',type:'thought',text:'允许情绪出现，也给自己一些理解它的时间。',date:'2026-09-08'}, - {id:'n4',bookId:'b3',type:'highlight',text:'人生的答案，或许藏在继续向前的日子里。',date:'2026-09-06'} + { id: 'n1', bookId: 'b0', type: 'thought', text: '把注意力还给生活本身，让平凡的日子有迹可循。', date: '2026-09-11' }, + { id: 'n2', bookId: 'b1', type: 'highlight', text: '在辽阔的未知面前，每一个问题都值得被认真对待。', date: '2026-09-10' }, + { id: 'n3', bookId: 'b2', type: 'thought', text: '允许情绪出现，也给自己一些理解它的时间。', date: '2026-09-08' }, + { id: 'n4', bookId: 'b3', type: 'highlight', text: '人生的答案，或许藏在继续向前的日子里。', date: '2026-09-06' } ]; const publicReviews = [ - {id:'r1',name:'山间来信',rating:5,type:'推荐',text:'适合放慢速度去读。最打动我的，是读完之后还会不断回想的那些问题。',date:'2026-09-10'}, - {id:'r2',name:'晚风书屋',rating:3,type:'一般',text:'有一些有趣的视角，也有需要耐心消化的地方。每个人会读出不同的感受。',date:'2026-09-09'}, - {id:'r3',name:'一页一页',rating:1,type:'不行',text:'这次阅读没有找到共鸣，可能还不是适合我当下阅读的书。',date:'2026-09-08'} + { id: 'r1', name: '山间来信', rating: 5, type: '推荐', text: '适合放慢速度去读。最打动我的，是读完之后还会不断回想的那些问题。', date: '2026-09-10' }, + { id: 'r2', name: '晚风书屋', rating: 3, type: '一般', text: '有一些有趣的视角，也有需要耐心消化的地方。每个人会读出不同的感受。', date: '2026-09-09' }, + { id: 'r3', name: '一页一页', rating: 1, type: '不行', text: '这次阅读没有找到共鸣，可能还不是适合我当下阅读的书。', date: '2026-09-08' } ]; diff --git a/templates/index.html b/templates/index.html index adb62b6..00311f3 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,20 +1,165 @@ + - -阅间 · 微信读书看板 - - + + + + 阅间 · 微信读书看板 + + + - - -
我的空间 /   阅读概览
L
正在连接微信读书…阅读目标跨浏览器保存
-

书籍详情

 -
MAKE ROOM FOR READING

新建阅读目标

想读些什么？

选择书籍或加入书单当前书目，重复书籍只算一本，已读完直接计入完成。

保存后可在其他浏览器查看
 - + + +
+
+
我的空间 /   阅读概览
+
+
L
+
+
+
+
+
正在连接微信读书…阅读目标跨浏览器保存
+
+ +
+ +
+

书籍详情

+
+
+ + +
+
+
+
MAKE ROOM FOR READING
+

新建阅读目标

+
+
+
+
+

想读些什么？

+
+

选择书籍或加入书单当前书目，重复书籍只算一本，已读完直接计入完成。

+
+ +
保存后可在其他浏览器查看 +
+
+ + + + + + + \ No newline at end of file diff --git a/templates/login.html b/templates/login.html index 445ac0f..f25f288 100644 --- a/templates/login.html +++ b/templates/login.html @@ -1,39 +1,49 @@ + - - - -登录 · 阅间 - + + + + 登录 · 阅间 + + -
- -
-
YOUR READING SPACE
-

{{ '服务暂不可用' if unavailable else ('首次设置' if not initialized else '欢迎回来') }}

-

{{ '请检查服务配置或数据库连接。' if unavailable else ('创建管理员账号以启用访问保护。' if not initialized else '登录后继续你的阅读旅程。') }}

- {% if error %}{% endif %} - {% if not unavailable and not initialized %} - {% if not setup_enabled %}{% endif %} - - {% elif not unavailable %} - - {% endif %} -
-

阅间 · 与好书相伴，与自己相遇

-
+
+ +
+
YOUR READING SPACE
+

{{ '服务暂不可用' if unavailable else ('首次设置' if not initialized else '欢迎回来') }}

+

{{ '请检查服务配置或数据库连接。' if unavailable else ('创建管理员账号以启用访问保护。' if not initialized else '登录后继续你的阅读旅程。') }}

+ {% if error %}{% endif %} + {% if not unavailable and not initialized %} + {% if not setup_enabled %}{% endif %} + + {% elif not unavailable %} + + {% endif %} +
+

阅间 · 与好书相伴，与自己相遇

+
- + + \ No newline at end of file