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

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

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

No files matched your search

legacy/classic/static/css/style.css
+106 -25
View File
@@ -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;
}
}
}
legacy/classic/static/js/app.js
+12 -6
View File
@@ -476,11 +476,13 @@ async function loadYearlyTrend() {
barWidth: "50%",
itemStyle: {
borderRadius: [8, 8, 0, 0],
color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1,
color: {
type: "linear", x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: c.accentLight },
{ offset: 1, color: c.accent },
] },
]
},
},
label: { show: true, position: "top", color: c.label, fontSize: 12, formatter: "{c}h" },
}],
@@ -538,11 +540,13 @@ async function loadTimeDistribution() {
lineStyle: { width: 2, color: c.accent },
itemStyle: { color: c.accent },
areaStyle: {
color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1,
color: {
type: "linear", x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: c.accent + "4D" },
{ offset: 1, color: c.accent + "05" },
] },
]
},
},
}],
});
@@ -650,11 +654,13 @@ async function loadAuthors() {
barWidth: "50%",
itemStyle: {
borderRadius: [0, 6, 6, 0],
color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0,
color: {
type: "linear", x: 0, y: 0, x2: 1, y2: 0,
colorStops: [
{ offset: 0, color: c.accentLight },
{ offset: 1, color: c.accent },
] },
]
},
},
label: { show: true, position: "right", color: c.label, fontSize: 12, formatter: "{c}本" },
}],
legacy/classic/templates/index.html
+16 -7
View File
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,7 +9,7 @@
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<!-- 防闪烁：在 CSS 加载后、页面渲染前设置主题 -->
<script>
(function() {
(function () {
var saved = localStorage.getItem('theme');
if (saved) {
document.documentElement.setAttribute('data-theme', saved);
@@ -18,6 +19,7 @@
})();
</script>
</head>
<body>
<!-- 数据库连接告警横幅（MySQL 连接失败时显示） -->
<div id="dbAlertBanner" class="db-alert-banner" style="display:none;">
@@ -56,7 +58,8 @@
<div class="container">
<div class="global-search-wrapper">
<span class="global-search-icon">🔍</span>
<input type="text" id="globalSearchInput" class="global-search-input" placeholder="搜索图书..." onkeydown="if(event.key==='Enter')globalSearch()">
<input type="text" id="globalSearchInput" class="global-search-input" placeholder="搜索图书..."
onkeydown="if(event.key==='Enter')globalSearch()">
<button class="global-search-btn" onclick="globalSearch()">搜索</button>
</div>
</div>
@@ -125,7 +128,8 @@
<label class="filter-checkbox">
<input type="checkbox" id="finishedOnly"> 仅看已读完
</label>
<button class="shelf-refresh-btn" id="shelfRefreshBtn" onclick="refreshShelf()" title="重新加载书架数据">
<button class="shelf-refresh-btn" id="shelfRefreshBtn" onclick="refreshShelf()"
title="重新加载书架数据">
<span class="btn-icon">⟳</span>
<span class="btn-text">刷新</span>
</button>
@@ -152,7 +156,8 @@
<div class="container" style="padding-top:40px;padding-bottom:60px">
<h2 class="section-title">🔍 推荐发现</h2>
<div class="discover-tabs">
<button class="discover-tab active" id="tabRecommend" onclick="switchDiscoverTab('recommend')">为你推荐</button>
<button class="discover-tab active" id="tabRecommend"
onclick="switchDiscoverTab('recommend')">为你推荐</button>
<button class="discover-tab" id="tabSearch" onclick="switchDiscoverTab('search')">搜索书籍</button>
</div>
<div id="recommendPanel" class="discover-panel">
@@ -164,7 +169,8 @@
</div>
<div id="searchPanel" class="discover-panel" style="display:none">
<div class="search-box">
<input type="text" id="searchInput" class="search-input" placeholder="输入书名、作者或关键词..." onkeydown="if(event.key==='Enter')doSearch()">
<input type="text" id="searchInput" class="search-input" placeholder="输入书名、作者或关键词..."
onkeydown="if(event.key==='Enter')doSearch()">
<button class="btn-primary" onclick="doSearch()">搜索</button>
</div>
<div class="discover-grid" id="searchGrid"></div>
@@ -183,7 +189,9 @@
</div>
</div>
<div class="container thoughts-content" id="thoughtsContent">
<div class="loading"><div class="loading-spinner"></div></div>
<div class="loading">
<div class="loading-spinner"></div>
</div>
</div>
</div>
@@ -208,4 +216,5 @@
<script src="/static/js/app.js"></script>
</body>
</html>
</html>