From 870710d043a738712cbd0ef8953dfdd7c86f8f5a Mon Sep 17 00:00:00 2001
From: lifegpc <root@lifegpc.com>
Date: Tue, 3 Mar 2026 14:59:27 +0800
Subject: [PATCH] use data-chapter-id to replace id

---
 src/manage/qd/VolumesList.module.css |  2 +-
 src/manage/qd/VolumesList.tsx        | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/manage/qd/VolumesList.module.css b/src/manage/qd/VolumesList.module.css
index 2275995..468e5fd 100644
--- a/src/manage/qd/VolumesList.module.css
+++ b/src/manage/qd/VolumesList.module.css
@@ -44,7 +44,7 @@
     right: 30px;
     bottom: 50px;
     padding: 4px;
-    background: white;
+    background: lightblue;
     border-radius: 8px;
     cursor: pointer;
 }
diff --git a/src/manage/qd/VolumesList.tsx b/src/manage/qd/VolumesList.tsx
index 85f204f..eb94c6f 100644
--- a/src/manage/qd/VolumesList.tsx
+++ b/src/manage/qd/VolumesList.tsx
@@ -5,7 +5,7 @@ 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, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import LocationSearchingTwotone from "../../../node_modules/@material-icons/svg/svg/location_searching/twotone.svg";
 
 export type VolumesListProps = {
@@ -31,6 +31,7 @@ async function open_in_qidian(bookId: number, chapterId: number) {
 }
 
 export default function VolumesList({ volumes, bookId, oneLine, current }: VolumesListProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
     const currentVolumeId = useMemo(() => {
         if (!current) return null;
         return volumes.find(v => v.chapters.some(ch => ch.id === current))?.id ?? null;
@@ -39,12 +40,14 @@ export default function VolumesList({ volumes, bookId, oneLine, current }: Volum
     const [activeKeys, setActiveKeys] = useState<string[]>([]);
 
     const scrollToCurrent = () => {
-        if (!current || !currentVolumeId) return;
+        if (!current || !currentVolumeId || !containerRef.current) return;
+
+        const findChapterEl = () => containerRef.current?.querySelector<HTMLElement>(`[data-chapter-id="${current}"]`);
 
         if (!activeKeys.includes(currentVolumeId)) {
             setActiveKeys(prev => [...prev, currentVolumeId]);
             function checkChapterInView() {
-                const el = document.getElementById(`chapter-${current}`);
+                const el = findChapterEl();
                 if (el && el.offsetParent) {
                     // Wait for the collapse animation to finish before scrolling
                     setTimeout(() => {
@@ -56,7 +59,7 @@ export default function VolumesList({ volumes, bookId, oneLine, current }: Volum
             }
             setTimeout(checkChapterInView, 20);
         } else {
-            const el = document.getElementById(`chapter-${current}`);
+            const el = findChapterEl();
             if (el) {
                 el.scrollIntoView({ behavior: 'smooth', block: 'start' });
             }
@@ -65,7 +68,7 @@ export default function VolumesList({ volumes, bookId, oneLine, current }: Volum
 
     const items = useMemo<CollapseProps['items']>(() => volumes.map(v => {
         const children = v.chapters.map(chapter => (
-            <Flex className={oneLine ? styles.chone : styles.ch} key={chapter.id} id={`chapter-${chapter.id}`}>
+            <Flex className={oneLine ? styles.chone : styles.ch} key={chapter.id} data-chapter-id={chapter.id}>
                 <Link to={`/qd/book/${bookId}/chapter/${chapter.id}`}>{chapter.name}</Link>
                 <Flex className={styles.action}>
                     {chapter.isSaved && <CheckCircleOutlined className={styles.saved} />}
@@ -87,7 +90,7 @@ export default function VolumesList({ volumes, bookId, oneLine, current }: Volum
             </Flex>
         }
     }), [volumes, bookId, oneLine]);
-    return (<div className={styles.c}>
+    return (<div className={styles.c} ref={containerRef}>
         <div className={styles.cl}><Collapse
             key={bookId}
             activeKey={activeKeys}