mirror of
https://github.com/KingHWJ/WeReadBoard.git
synced 2026-11-03 18:24:58 +08:00
feat: add global search bar, fix search cover blur, shelf title search + category tags
1. Fix hdCover() to also replace s_ prefix (search results use s_ not t6_) 2. Add persistent search bar below navbar, switches to discover tab on search 3. Shelf search now supports book title and author search (new keyword param) 4. Add category tag pills above book grid, click to filter by category 5. Update /api/shelf backend: keyword param for title/author, category for exact match 6. Mobile responsive styles for search bar and category tags
This commit is contained in:
1 parent
7c918140b3
commit
4c916eceb7
4 files changed
+194
-9
No files matched your search
@@ -271,6 +271,103 @@ body {
|
||||
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
|
||||
[data-theme="dark"] .theme-toggle { color: var(--toggle-icon-sun); }
|
||||
|
||||
/* ===== 顶部常驻搜索框 ===== */
|
||||
.global-search-bar {
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
z-index: 90;
|
||||
background: var(--nav-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 10px 0;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.global-search-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.global-search-icon {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
font-size: 15px;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.global-search-input {
|
||||
flex: 1;
|
||||
padding: 9px 16px 9px 40px;
|
||||
border: 1px solid var(--border);
|
||||
border-right: none;
|
||||
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
|
||||
font-size: 14px;
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.global-search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-bg);
|
||||
}
|
||||
|
||||
.global-search-btn {
|
||||
padding: 9px 20px;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.global-search-btn:hover {
|
||||
background: var(--accent-dark);
|
||||
}
|
||||
|
||||
/* ===== 书架分类标签 ===== */
|
||||
.shelf-categories {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.shelf-category-tag {
|
||||
padding: 5px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-card);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.shelf-category-tag:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
}
|
||||
|
||||
.shelf-category-tag.active {
|
||||
border-color: var(--accent);
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ===== Hero 区 ===== */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
@@ -1730,6 +1827,19 @@ body {
|
||||
.nav-update {
|
||||
display: none;
|
||||
}
|
||||
.global-search-wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
.shelf-search {
|
||||
width: 140px;
|
||||
}
|
||||
.shelf-categories {
|
||||
gap: 6px;
|
||||
}
|
||||
.shelf-category-tag {
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.back-to-top {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
|
||||
Reference in new issue
Block a user