From 6cf7e3aa191f7a565a8f9646b30ad408c562a9ba Mon Sep 17 00:00:00 2001
From: lifegpc <root@lifegpc.com>
Date: Sun, 1 Mar 2026 23:51:56 +0800
Subject: [PATCH] Add support to scroll to current chapter in volume list

---
 src/manage/qd/BookChapter.tsx        |  2 +-
 src/manage/qd/VolumesList.module.css | 23 ++++++++++++
 src/manage/qd/VolumesList.tsx        | 53 ++++++++++++++++++++++++----
 3 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/src/manage/qd/BookChapter.tsx b/src/manage/qd/BookChapter.tsx
index af311ce..fa214bf 100644
--- a/src/manage/qd/BookChapter.tsx
+++ b/src/manage/qd/BookChapter.tsx
@@ -132,7 +132,7 @@ export default function BookChapter() {
             <Splitter.Panel min='20%' max='40%' defaultSize='30%' collapsible className={styles.chs}>
                 {bookStatus.chapterShowMode != ChapterShowMode.All && listErr && <Result status="error" title="加载章节列表失败" subTitle={listErr} extra={<Button type="primary" onClick={handle_list_load}>重试</Button>} />}
                 {bookStatus.chapterShowMode != ChapterShowMode.All && !bookStatus.chapterLists && !listErr && <Skeleton active />}
-                {vols.length > 0 && <VolumesList bookId={bookInfo.id} volumes={vols} oneLine key={bookInfo.id} />}
+                {vols.length > 0 && <VolumesList bookId={bookInfo.id} volumes={vols} oneLine key={bookInfo.id} current={id} />}
             </Splitter.Panel>
             <Splitter.Panel className={styles.chc}>
                 {err && <Result
diff --git a/src/manage/qd/VolumesList.module.css b/src/manage/qd/VolumesList.module.css
index 9770f78..2275995 100644
--- a/src/manage/qd/VolumesList.module.css
+++ b/src/manage/qd/VolumesList.module.css
@@ -1,3 +1,16 @@
+.c {
+    position: relative;
+    overflow-y: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.cl {
+    overflow-y: auto;
+    flex: 1;
+}
+
 .ch {
     margin: 4px 8px;
     width: min(calc((100% - 40px) / 4), 300px);
@@ -25,3 +38,13 @@
 .open:hover {
     color: inherit;
 }
+
+.current {
+    position: absolute;
+    right: 30px;
+    bottom: 50px;
+    padding: 4px;
+    background: white;
+    border-radius: 8px;
+    cursor: pointer;
+}
diff --git a/src/manage/qd/VolumesList.tsx b/src/manage/qd/VolumesList.tsx
index 0542bb5..85f204f 100644
--- a/src/manage/qd/VolumesList.tsx
+++ b/src/manage/qd/VolumesList.tsx
@@ -5,12 +5,14 @@ import { Link } from "react-router";
 import { CheckCircleOutlined } from "@ant-design/icons";
 import OpenInNewTab from "../../../node_modules/@material-icons/svg/svg/open_in_new/twotone.svg";
 import Icon from "../../components/Icon";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import LocationSearchingTwotone from "../../../node_modules/@material-icons/svg/svg/location_searching/twotone.svg";
 
 export type VolumesListProps = {
     volumes: Volume[];
     bookId: number;
     oneLine?: boolean;
+    current?: number;
 }
 
 async function open_in_qidian(bookId: number, chapterId: number) {
@@ -28,10 +30,42 @@ async function open_in_qidian(bookId: number, chapterId: number) {
     }
 }
 
-export default function VolumesList({ volumes, bookId, oneLine }: VolumesListProps) {
+export default function VolumesList({ volumes, bookId, oneLine, current }: VolumesListProps) {
+    const currentVolumeId = useMemo(() => {
+        if (!current) return null;
+        return volumes.find(v => v.chapters.some(ch => ch.id === current))?.id ?? null;
+    }, [volumes, current]);
+
+    const [activeKeys, setActiveKeys] = useState<string[]>([]);
+
+    const scrollToCurrent = () => {
+        if (!current || !currentVolumeId) return;
+
+        if (!activeKeys.includes(currentVolumeId)) {
+            setActiveKeys(prev => [...prev, currentVolumeId]);
+            function checkChapterInView() {
+                const el = document.getElementById(`chapter-${current}`);
+                if (el && el.offsetParent) {
+                    // Wait for the collapse animation to finish before scrolling
+                    setTimeout(() => {
+                        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    }, 300);
+                } else {
+                    setTimeout(checkChapterInView, 100);
+                }
+            }
+            setTimeout(checkChapterInView, 20);
+        } else {
+            const el = document.getElementById(`chapter-${current}`);
+            if (el) {
+                el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        }
+    };
+
     const items = useMemo<CollapseProps['items']>(() => volumes.map(v => {
         const children = v.chapters.map(chapter => (
-            <Flex className={oneLine ? styles.chone : styles.ch} key={chapter.id}>
+            <Flex className={oneLine ? styles.chone : styles.ch} key={chapter.id} id={`chapter-${chapter.id}`}>
                 <Link to={`/qd/book/${bookId}/chapter/${chapter.id}`}>{chapter.name}</Link>
                 <Flex className={styles.action}>
                     {chapter.isSaved && <CheckCircleOutlined className={styles.saved} />}
@@ -53,8 +87,13 @@ export default function VolumesList({ volumes, bookId, oneLine }: VolumesListPro
             </Flex>
         }
     }), [volumes, bookId, oneLine]);
-    return (<Collapse
-        key={bookId}
-        items={items}
-    />);
+    return (<div className={styles.c}>
+        <div className={styles.cl}><Collapse
+            key={bookId}
+            activeKey={activeKeys}
+            onChange={(keys) => setActiveKeys(keys as string[])}
+            items={items}
+        /></div>
+        {current && <Tooltip title="定位到当前章节" placement="left"><Icon cls={styles.current}><LocationSearchingTwotone fill="currentColor" onClick={scrollToCurrent} /></Icon></Tooltip>}
+    </div>);
 }