fix: scroll to marks

src/Page/PageContent/EssayMarks/BrightSpot/BrightSpot.css

@@ -77,8 +77,7 @@
 }
 
 .BrightSpot__goodSent--selected {
-  border: 2px solid #EF9F6C;
-  box-shadow: 0 0 10px rgba(239, 159, 108, 0.3);
+  background: rgba(211, 214, 216, 0.38);
 }
 
 .BrightSpot__goodSent__text {

src/Page/PageContent/EssayMarks/BrightSpot/BrightSpot.tsx

@@ -8,6 +8,7 @@ import TypewriterAnimationForString from 'src/Page/_components/TypewriterAnimati
 import shortenSent from '../shortenSent';
 
 import './BrightSpot.css';
+import { useScrollToMark } from 'src/hooks/useScrollToMark';
 
 export function judgeRhetoric(label: string) {
   switch (label) {
@@ -28,14 +29,16 @@ export default function BrightSpot() {
   const selectedSentence = useEssay(store => store.selectedSentence);
   const setSelectedSentence = useEssay(store => store.setSelectedSentence);
 
-  const goodWords = good_words.map(({ paragraph_id, sent_id, start, end }) => (
-    <div className="BrightSpot__goodWord" key={`${paragraph_id} ${sent_id}`}>
-      <div className="BrightSpot__goodWord__title">好词</div>
-      <div className="BrightSpot__goodWord__content">
-        {sents[paragraph_id][sent_id].substring(start, end)}
+  const goodWords = useMemo(() => {
+    return good_words.map(({ paragraph_id, sent_id, start, end }) => (
+      <div className="BrightSpot__goodWord" key={`${paragraph_id} ${sent_id}`}>
+        <div className="BrightSpot__goodWord__title">好词</div>
+        <div className="BrightSpot__goodWord__content">
+          {sents[paragraph_id][sent_id].substring(start, end)}
+        </div>
       </div>
-    </div>
-  ));
+    ));
+  }, [good_words, sents]);
 
   const goodSentsList = useMemo(() => {
     return good_sents_arranged.map((goodSentsInParagraph, paragraphId) => (
@@ -77,6 +80,8 @@ export default function BrightSpot() {
     });
   }, [selectedSentence]);
 
+  useScrollToMark(selectedSentence, '.BrightSpot__goodSent', '.BrightSpot');
+
   return (
     <div className="BrightSpot">
       <TypewriterAnimation duration={1} list={goodWords} key="goodWords" />

src/Page/PageContent/EssayMarks/SickExpression/SickExpression.css

@@ -62,8 +62,7 @@
 }
 
 .SickExpression__sickSent--selected {
-  border: 2px solid #EF9F6C;
-  box-shadow: 0 0 10px rgba(239, 159, 108, 0.3);
+  background: rgba(211, 214, 216, 0.38);
 }
 
 .SickExpression__sickSent__header {

src/Page/PageContent/EssayMarks/SickExpression/SickExpression.tsx

@@ -6,6 +6,7 @@ import { useEssay } from '@store';
 import TypewriterAnimation from 'src/Page/_components/TypewriterAnimation/TypewriterAnimation';
 
 import './SickExpression.css';
+import { useScrollToMark } from 'src/hooks/useScrollToMark';
 
 export default function SickExpression() {
   const { sick_sents_arranged, textCorrections_arranged, sents } = useEssay(store => store.essay);
@@ -80,6 +81,9 @@ export default function SickExpression() {
     });
   }, [selectedSentence]);
 
+  // 添加滚动功能
+  useScrollToMark(selectedSentence, '.SickExpression__sickSent', '.SickExpression');
+
   return (
     <div className="SickExpression">
       <TypewriterAnimation duration={1} list={sickSentsList} key="sickSents" />

src/hooks/useScrollToMark.ts

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+
+export function useScrollToMark(
+  selectedSentence: { paragraphId: number; sentId: number } | null,
+  selector: string,
+  containerSelector: string
+) {
+  useEffect(() => {
+    if (!selectedSentence) return;
+
+    const container = document.querySelector(containerSelector) as HTMLElement;
+    if (!container) return;
+
+    const elements = container.querySelectorAll(selector);
+    elements.forEach(el => {
+      const element = el as HTMLElement;  // 添加类型断言
+      const paragraphId = Number(element.getAttribute('data-paragraph-id'));
+      const sentId = Number(element.getAttribute('data-sent-id'));
+
+      if (selectedSentence.paragraphId === paragraphId && 
+          selectedSentence.sentId === sentId) {
+        // 计算元素相对于容器的位置
+        const elementTop = element.offsetTop;
+        const containerHeight = container.clientHeight;
+        const scrollTop = elementTop - containerHeight / 2 + element.offsetHeight / 2;
+
+        container.scrollTo({
+          top: scrollTop,
+          behavior: 'smooth'
+        });
+      }
+    });
+  }, [selectedSentence]);
+}