From 5b3f929c394ff5680342f3a528c4d4734cdc0b3e Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Tue, 28 Feb 2023 23:58:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TimeScroll/index.tsx       |  9 +++++++++
 apps/web-main/src/view/Course/index.less      |  2 +-
 apps/web-main/src/view/Course/index.tsx       | 19 ++++++++++++++++---
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/apps/web-main/src/components/TimeScroll/index.tsx b/apps/web-main/src/components/TimeScroll/index.tsx
index 6f8fd16..233310b 100644
--- a/apps/web-main/src/components/TimeScroll/index.tsx
+++ b/apps/web-main/src/components/TimeScroll/index.tsx
@@ -7,10 +7,15 @@ export interface IOnScrollParam {
   height: number;
 }
 
+export interface IModel {
+  top: number;
+}
+
 interface IProps {
   className: string;
   data: any;
   onScroll?: (p: IOnScrollParam) => void;
+  model?: IModel;
 }
 
 /**
@@ -62,6 +67,10 @@ function TimeScroll(props: IProps) {
       setCursorActive((p) => ({ ...p, top: mouseY - orbitClient.top - 4 }));
   };
 
+  useEffect(() => {
+    setCursorStatic((p) => ({ ...p, top: props.model!.top }));
+  }, [props.model]);
+
   useEffect(() => {
     if (props.onScroll)
       props.onScroll({
diff --git a/apps/web-main/src/view/Course/index.less b/apps/web-main/src/view/Course/index.less
index e3a7fa5..18d408d 100644
--- a/apps/web-main/src/view/Course/index.less
+++ b/apps/web-main/src/view/Course/index.less
@@ -5,7 +5,7 @@
   height: 100vh;
   .recommends {
     display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
+    grid-template-columns: 1fr 1.5fr 1fr;
     grid-column-gap: 20px;
   }
 
diff --git a/apps/web-main/src/view/Course/index.tsx b/apps/web-main/src/view/Course/index.tsx
index 673e347..00b8031 100644
--- a/apps/web-main/src/view/Course/index.tsx
+++ b/apps/web-main/src/view/Course/index.tsx
@@ -21,6 +21,10 @@ import { Icon } from "@ricons/utils";
 
 export default function Index() {
   const scrollContainerRef = useRef<HTMLElement | null>(null);
+  const ratioRef = useRef<number>(1);
+  const [timescroll, setTimescroll] = useState({
+    top: -4,
+  });
 
   const dropList = (
     <Menu>
@@ -56,8 +60,16 @@ export default function Index() {
     const { top, height } = p;
     //左侧区域高度
     const { scrollHeight, clientHeight } = scrollContainerRef.current!;
-    const ratio = (scrollHeight - clientHeight) / height;
-    scrollContainerRef.current!.scrollTop = top * ratio;
+    ratioRef.current = (scrollHeight - clientHeight) / height;
+    scrollContainerRef.current!.scrollTop = top * ratioRef.current;
+  };
+
+  const onScroll = () => {
+    const { scrollHeight, scrollTop } = scrollContainerRef.current!;
+    const isTop = scrollTop === 0;
+    const isBottom = scrollTop === scrollHeight;
+    const top = scrollTop / ratioRef.current;
+    setTimescroll({ top: isTop ? -4 : top });
   };
 
   return (
@@ -100,7 +112,7 @@ export default function Index() {
       </div>
       <div className="timeline">
         <div className="thumbnail">
-          <article ref={scrollContainerRef}>
+          <article ref={scrollContainerRef} onScroll={onScroll}>
             {courseTimeList.map((item, index) => (
               <section key={index}>
                 <div className="time">
@@ -120,6 +132,7 @@ export default function Index() {
           className="timescroll"
           data={courseTimeList}
           onScroll={onTimeScroll}
+          model={{ top: timescroll.top }}
         />
       </div>
     </div>