This commit is contained in:
truewhile
2026-10-02 18:44:07 +08:00
parent f3b88fad7c
commit c4e9926352
9 changed files with 505 additions and 25 deletions
+4 -2
View File
@@ -245,11 +245,13 @@ export const readerAPI = {
setSourceVariable: (id: string, variable: string) => api.put(`/reader/sources/${id}/variable`, { variable }),
// ── 搜索 / 详情 / 目录 / 正文 ──
search: (key: string) =>
// 多源聚合搜索。sourceIds 为空表示搜索范围=全部启用书源(默认);
// 非空则只搜这些书源(后端会忽略其中已删除/停用的,全部失效时退回全部启用)。
search: (key: string, sourceIds: string[] = []) =>
api
.post<{ books: ReaderSearchBook[] | null; skipped: ReaderSearchSkipped[] | null }>(
'/reader/search',
{ key },
{ key, source_ids: sourceIds },
longOpts,
)
.then((r) => r.data),
+118 -7
View File
@@ -1,14 +1,32 @@
import { useEffect, useRef, useState } from 'react'
import { useEffect, useMemo, useRef, useState } from 'react'
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
import toast from 'react-hot-toast'
import { AlertTriangle, ArrowLeft, ChevronDown, ChevronRight, Loader2, Plus, Search } from 'lucide-react'
import { AlertTriangle, ArrowLeft, ChevronDown, ChevronRight, ListFilter, Loader2, Plus, Search } from 'lucide-react'
import { readerAPI, type ReaderSearchBook, type ReaderSearchSkipped } from '../../api/reader'
import { readerAPI, type ReaderSearchBook, type ReaderSearchSkipped, type ReaderSource } from '../../api/reader'
import ReaderBookCover from '../../components/ReaderBookCover'
import { useReaderSettingsStore } from '../../stores/readerSettings'
import { splitKindTags } from '../../utils/kindTags'
import { SearchScopeDialog } from './SearchScopeDialog'
import { SourcePickerDialog } from './SourcePickerDialog'
// 多源聚合搜索页(仿 legado SearchActivity:结果流 + 失败书源列表)。
// 搜索前可按书源收敛范围(对应 legado 的搜索范围):默认全选已启用书源。
// 搜索结果会剔除已在书架里的书——这里的搜索是用来发现新书的。
/** 书架命中键:与搜索结果一致按「书名 + 作者」聚合;作者缺省时只用书名(同 legado isInBookShelf)。 */
function shelfBookKey(name: string, author: string): string {
const n = name.trim()
const a = author.trim()
return a ? `${n}|${a}` : n
}
/** 这本书是否已在书架:优先按书名+作者,其次按书本身/任一命中书源的地址(换源后地址会变)。 */
function isOnShelf(book: ReaderSearchBook, shelf: Set<string>): boolean {
if (shelf.has(shelfBookKey(book.name, book.author))) return true
if (book.book_url && shelf.has(book.book_url)) return true
return book.origins.some((o) => !!o.book_url && shelf.has(o.book_url))
}
export default function ReaderSearchPage() {
const navigate = useNavigate()
@@ -23,13 +41,60 @@ export default function ReaderSearchPage() {
const [adding, setAdding] = useState('')
const inputRef = useRef<HTMLInputElement>(null)
// 搜索范围(设备级持久化,见 readerSettings store):空数组 = 全部启用书源。
const scopeIds = useReaderSettingsStore((s) => s.searchScopeIds)
const setSearchScopeIds = useReaderSettingsStore((s) => s.setSearchScopeIds)
const [sources, setSources] = useState<ReaderSource[]>([])
const [showScope, setShowScope] = useState(false)
const enabledSources = useMemo(() => sources.filter((s) => s.enabled), [sources])
// 已保存范围里仍有效的书源(删源/停源后自动剔除,全失效时等同于全部)。
const activeScopeIds = useMemo(
() => scopeIds.filter((id) => enabledSources.some((s) => s.id === id)),
[scopeIds, enabledSources],
)
// 书源列表还没加载完(sources 为空)时不能判断有效性,先按已存 ID 数显示,
// 避免已保存子集在加载瞬间被错标成「全部书源」。
const scopeAll = scopeIds.length === 0 || (sources.length > 0 && activeScopeIds.length === 0)
const scopeLabel = scopeAll ? '全部书源' : `已选 ${activeScopeIds.length || scopeIds.length} 个书源`
useEffect(() => {
readerAPI.listSources().then(setSources).catch(() => undefined)
}, [])
// 书架命中集合:已在书架的书不参与结果展示(这里只找新书)。
const [shelfKeys, setShelfKeys] = useState<Set<string>>(() => new Set())
useEffect(() => {
readerAPI
.listBooks()
.then((books) => {
const keys = new Set<string>()
for (const b of books) {
keys.add(shelfBookKey(b.name, b.author))
if (b.book_url) keys.add(b.book_url)
}
setShelfKeys(keys)
})
.catch(() => undefined)
}, [])
// 展示用结果 = 原始结果剔除已在书架的书。用派生值而不是在 doSearch 里过滤:
// 书架是异步加载的,派生能保证「书架先到还是结果先到」都能正确隐藏,
// 且刚加进书架的书也会立刻从列表消失。
const visibleBooks = useMemo(
() => (books === null ? null : books.filter((b) => !isOnShelf(b, shelfKeys))),
[books, shelfKeys],
)
const hiddenOnShelf = books === null ? 0 : books.length - (visibleBooks?.length ?? 0)
const doSearch = async () => {
const kw = key.trim()
if (!kw || searching) return
setSearching(true)
setShowSkipped(false)
try {
const res = await readerAPI.search(kw)
// 直接把已保存范围交给后端:它只搜其中仍启用的书源,全部失效时退回全部启用,
// 因此这里不必等书源列表加载完,也能正确处理「换设备后书源尚未同步」的情况。
const res = await readerAPI.search(kw, scopeIds)
setBooks(res.books ?? [])
// 后端在「没有书源失败」时会把空列表编码成 null,这里兜底成数组,
// 否则下面 skipped.length 会直接抛 TypeError 把整页打崩。
@@ -52,12 +117,20 @@ export default function ReaderSearchPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const addToShelf = async (book: ReaderSearchBook) => { const origin = book.origins[0]
const addToShelf = async (book: ReaderSearchBook) => {
const origin = book.origins[0]
if (!origin) return
setAdding(book.book_url)
try {
await readerAPI.addBook({ origin, name: book.name, author: book.author, cover_url: book.cover_url })
toast.success(`《${book.name}》已加入书架`)
// 立刻并入书架命中集合:这本「刚加的书」应从「搜索新书」的结果里消失。
setShelfKeys((prev) => {
const next = new Set(prev)
next.add(shelfBookKey(book.name, book.author))
if (origin.book_url) next.add(origin.book_url)
return next
})
} catch (e) {
const msg = (e as { response?: { data?: { error?: string } } })?.response?.data?.error ?? '加入书架失败'
toast.error(msg)
@@ -113,6 +186,22 @@ export default function ReaderSearchPage() {
</button>
</div>
{/* 搜索范围:默认「全部书源」(全选已启用),点开可收敛到指定书源 */}
<div className="mt-3 flex items-center gap-2">
<button
type="button"
onClick={() => setShowScope(true)}
className="inline-flex items-center gap-1.5 rounded-full border border-[var(--app-border)] bg-[var(--app-panel)] px-3 py-1.5 text-2xs font-bold text-[var(--app-muted)] transition hover:border-brand-500/40 hover:text-brand-600"
>
<ListFilter size={13} />
搜索范围
<span className="text-brand-600">{scopeLabel}</span>
</button>
{scopeAll && enabledSources.length > 0 && (
<span className="text-2xs text-[var(--app-subtle)]">共 {enabledSources.length} 个启用书源</span>
)}
</div>
{searching && (
<div className="flex flex-col items-center gap-2 py-24 text-[var(--app-muted)]">
<Loader2 className="animate-spin" size={22} />
@@ -120,9 +209,19 @@ export default function ReaderSearchPage() {
</div>
)}
{!searching && books !== null && (
{!searching && visibleBooks !== null && (
<div className="mt-6 space-y-3">
{books.map((book) => (
{hiddenOnShelf > 0 && visibleBooks.length > 0 && (
<p className="rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-3 py-2 text-2xs text-[var(--app-muted)]">
已隐藏 {hiddenOnShelf} 本已在书架里的书
</p>
)}
{visibleBooks.length === 0 && (
<p className="py-16 text-center text-xs text-[var(--app-muted)]">
{hiddenOnShelf > 0 ? '搜到的书都已经在书架里了' : '没有找到结果'}
</p>
)}
{visibleBooks.map((book) => (
<div
key={`${book.name}|${book.author}`}
className="flex gap-4 rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel)] p-4"
@@ -225,6 +324,18 @@ export default function ReaderSearchPage() {
onClose={() => setPicker(null)}
/>
)}
{showScope && (
<SearchScopeDialog
sources={sources}
selectedIds={scopeIds}
onConfirm={(ids) => {
setSearchScopeIds(ids)
setShowScope(false)
}}
onClose={() => setShowScope(false)}
/>
)}
</div>
)
}
+219
View File
@@ -0,0 +1,219 @@
import { useMemo, useState } from 'react'
import { Check, Minus, Search, X } from 'lucide-react'
import type { ReaderSource } from '../../api/reader'
/**
* SearchScopeDialog 搜索范围弹窗(对应 legado 搜索页的 SearchScopeDialog)。
*
* 只列出书源维度:默认全选所有「已启用」书源(对应 legado SearchScope("") 的
* 「全部书源」语义),取消勾选即可把本次搜索收敛到指定书源。已停用的书源会显示
* 但不可勾选,让用户知道它们不会被搜索。分组标题支持整组勾选/取消(kind 批量选择)。
*
* 确认时若「全部启用书源」都被选中,回传空数组表示「全部」——与后端
* enabledSourcesForScope 的空范围语义一致,也让后续新增的书源自动纳入搜索。
*/
export function SearchScopeDialog({
sources,
selectedIds,
onConfirm,
onClose,
}: {
sources: ReaderSource[]
/** 已保存的搜索范围;空数组 = 全部启用书源(默认全选)。 */
selectedIds: string[]
onConfirm: (ids: string[]) => void
onClose: () => void
}) {
const enabled = useMemo(() => sources.filter((s) => s.enabled), [sources])
const enabledIds = useMemo(() => enabled.map((s) => s.id), [enabled])
// 初始选中:保存过范围就用它(过滤掉已删除/停用的),否则默认全选已启用。
const [selected, setSelected] = useState<Set<string>>(() => {
const valid = selectedIds.filter((id) => enabledIds.includes(id))
return new Set(valid.length > 0 ? valid : enabledIds)
})
const [filter, setFilter] = useState('')
const keyword = filter.trim().toLowerCase()
const visible = useMemo(
() =>
sources.filter(
(s) => !keyword || s.name.toLowerCase().includes(keyword) || (s.group ?? '').toLowerCase().includes(keyword),
),
[sources, keyword],
)
// 按分组聚合并保持书源原顺序(ListSources 已按 customOrder 排好)。
const groups = useMemo(() => {
const map = new Map<string, ReaderSource[]>()
for (const s of visible) {
const key = (s.group ?? '').trim() || '未分组'
const list = map.get(key)
if (list) list.push(s)
else map.set(key, [s])
}
return [...map.entries()].map(([name, items]) => ({ name, items }))
}, [visible])
const pickedCount = enabledIds.filter((id) => selected.has(id)).length
const allSelected = pickedCount === enabledIds.length && enabledIds.length > 0
const toggle = (id: string) =>
setSelected((prev) => {
const next = new Set(prev)
if (next.has(id)) next.delete(id)
else next.add(id)
return next
})
const toggleGroup = (ids: string[]) =>
setSelected((prev) => {
const next = new Set(prev)
const allIn = ids.every((id) => next.has(id))
ids.forEach((id) => (allIn ? next.delete(id) : next.add(id)))
return next
})
// 全选/清空只作用于当前可见(可能被搜索词过滤)的已启用书源。
const visibleEnabledIds = visible.filter((s) => s.enabled).map((s) => s.id)
const selectVisible = () => setSelected((prev) => new Set([...prev, ...visibleEnabledIds]))
const clearVisible = () =>
setSelected((prev) => {
const next = new Set(prev)
visibleEnabledIds.forEach((id) => next.delete(id))
return next
})
const confirm = () => {
const picked = enabledIds.filter((id) => selected.has(id))
// 全选(含边界:启用源为空)→ 空数组 = 全部,新增书源自动纳入。
onConfirm(picked.length === enabledIds.length ? [] : picked)
}
return (
<div
className="fixed inset-0 z-[110] flex items-center justify-center bg-black/35 p-4 backdrop-blur-sm"
onClick={onClose}
>
<div
role="dialog"
aria-modal="true"
className="flex max-h-[80vh] w-full max-w-lg flex-col overflow-hidden rounded-3xl border border-[var(--app-border)] bg-[var(--app-panel)] shadow-2xl"
onClick={(event) => event.stopPropagation()}
>
<div className="flex items-center justify-between border-b border-[var(--app-border)] px-5 py-4">
<div className="min-w-0">
<h3 className="text-sm font-bold text-[var(--app-text)]">搜索范围</h3>
<p className="mt-0.5 text-2xs text-[var(--app-muted)]">
默认搜索全部启用书源 · 已启用 {enabledIds.length} 个
</p>
</div>
<button
type="button"
onClick={onClose}
className="rounded-xl p-1.5 text-[var(--app-muted)] hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]"
title="关闭"
>
<X size={18} />
</button>
</div>
<div className="flex items-center gap-2 border-b border-[var(--app-border)] px-4 py-3">
<div className="flex flex-1 items-center gap-2 rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-3 py-1.5">
<Search size={13} className="shrink-0 text-[var(--app-muted)]" />
<input
value={filter}
onChange={(e) => setFilter(e.target.value)}
placeholder="过滤书源名 / 分组"
className="w-full bg-transparent text-xs text-[var(--app-text)] outline-none placeholder:text-[var(--app-muted)]"
/>
</div>
<button type="button" onClick={selectVisible} className="btn-outline text-2xs">
全选
</button>
<button type="button" onClick={clearVisible} className="btn-outline text-2xs">
清空
</button>
</div>
<div className="min-h-[160px] flex-1 overflow-y-auto p-2">
{sources.length === 0 ? (
<p className="py-12 text-center text-xs text-[var(--app-muted)]">还没有书源,先去书源管理导入</p>
) : groups.length === 0 ? (
<p className="py-12 text-center text-xs text-[var(--app-muted)]">没有匹配「{filter.trim()}」的书源</p>
) : (
<div className="space-y-2">
{groups.map((group) => {
const groupEnabledIds = group.items.filter((s) => s.enabled).map((s) => s.id)
const groupChecked = groupEnabledIds.length > 0 && groupEnabledIds.every((id) => selected.has(id))
const groupPartial = !groupChecked && groupEnabledIds.some((id) => selected.has(id))
return (
<div key={group.name}>
<button
type="button"
disabled={groupEnabledIds.length === 0}
onClick={() => toggleGroup(groupEnabledIds)}
className="flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left hover:bg-[var(--app-hover)] disabled:cursor-default"
>
<CheckMark checked={groupChecked} partial={groupPartial} disabled={groupEnabledIds.length === 0} />
<span className="min-w-0 flex-1 truncate text-2xs font-bold uppercase tracking-wide text-[var(--app-muted)]">
{group.name}
</span>
<span className="shrink-0 text-2xs text-[var(--app-subtle)]">{group.items.length}</span>
</button>
<div className="mt-0.5 space-y-0.5">
{group.items.map((src) => (
<button
key={src.id}
type="button"
disabled={!src.enabled}
onClick={() => toggle(src.id)}
className="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left transition hover:bg-[var(--app-hover)] disabled:cursor-default disabled:opacity-50"
>
<CheckMark checked={src.enabled && selected.has(src.id)} disabled={!src.enabled} />
<span className="min-w-0 flex-1 truncate text-xs text-[var(--app-text)]">{src.name}</span>
{!src.enabled && (
<span className="shrink-0 rounded bg-[var(--app-hover)] px-1.5 py-0.5 text-2xs font-bold text-[var(--app-muted)]">
已禁用
</span>
)}
</button>
))}
</div>
</div>
)
})}
</div>
)}
</div>
<div className="flex items-center gap-3 border-t border-[var(--app-border)] px-5 py-3">
<span className="flex-1 text-2xs text-[var(--app-muted)]">
{allSelected ? '全部书源' : `已选 ${pickedCount} / ${enabledIds.length} 个书源`}
</span>
<button type="button" onClick={onClose} className="btn-outline text-xs">
取消
</button>
<button type="button" onClick={confirm} disabled={pickedCount === 0} className="btn-primary text-xs disabled:opacity-50">
确定
</button>
</div>
</div>
</div>
)
}
/** 勾选标记(纯展示,点击由外层按钮承载,避免交互元素嵌套)。 */
function CheckMark({ checked, partial = false, disabled = false }: { checked: boolean; partial?: boolean; disabled?: boolean }) {
return (
<span
aria-hidden
className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border transition ${
checked || partial ? 'border-brand-500 bg-brand-500 text-white' : 'border-[var(--app-border)] bg-[var(--app-panel-soft)]'
} ${disabled ? 'opacity-40' : ''}`}
>
{checked && <Check size={11} strokeWidth={3} />}
{!checked && partial && <Minus size={11} strokeWidth={3} />}
</span>
)
}
+12
View File
@@ -81,6 +81,15 @@ interface ReaderSettingsState {
comicDoublePage: boolean
setComicDoublePage: (on: boolean) => void
// ── 搜索范围(对应 legado 搜索页的 SearchScopeDialog / AppConfig.searchScope)──
/**
* 已选书源 ID;空数组表示「全部启用书源」(默认)。只影响书籍搜索的并发范围。
* 和 comicDoublePage 一样是设备级偏好:刻意不参与账号同步(legado 也把
* searchScope 存在本机 AppConfig),换设备重新默认全选即可。
*/
searchScopeIds: string[]
setSearchScopeIds: (ids: string[]) => void
fontSize: number
setFontSize: (size: number) => void
@@ -147,6 +156,9 @@ export const useReaderSettingsStore = create<ReaderSettingsState>()(
comicDoublePage: true,
setComicDoublePage: (comicDoublePage) => set({ comicDoublePage }),
searchScopeIds: [],
setSearchScopeIds: (ids) => set({ searchScopeIds: [...new Set(ids)] }),
fontSize: 20,
setFontSize: (fontSize) => set({ fontSize: Math.min(32, Math.max(14, fontSize)) }),