web-backset.cn/apps/web-main/src/view/Course/index.tsx

import "./index.less";
import Player from "../../components/Player";
import { useMount } from "../../hook";
import {
  Select,
  Message,
  Space,
  Tooltip,
  Dropdown,
  Button,
  Menu,
} from "@arco-design/web-react";
import BsCard from "../../components/Card";
import TimeScroll, { IOnScrollParam } from "../../components/TimeScroll";
import Tab20Regular from "@ricons/fluent/Tab20Regular";
import Table20Regular from "@ricons/fluent/Table20Regular";
import Filter20Regular from "@ricons/fluent/Filter20Regular";
import { useRef, useState } from "react";
import { recommendListDefault, courseTimeListDefault } from "./mock";
import { Icon } from "@ricons/utils";

export default function Index() {
  const scrollContainerRef = useRef<HTMLElement | null>(null);

  const dropList = (
    <Menu>
      <Menu.Item key="1">全部</Menu.Item>
      <Menu.Item key="2">最新的</Menu.Item>
    </Menu>
  );

  const [actions, setActions] = useState([
    {
      key: "tab",
      icon: <Tab20Regular />,
      active: false,
      tip: "单格排列",
    },
    {
      key: "table",
      icon: <Table20Regular />,
      active: true,
      tip: "缩略",
    },
  ]);

  const [recommendList, setRecommendList] = useState(recommendListDefault);

  const [courseTimeList, setCourseTimeList] = useState(courseTimeListDefault);

  const onClickActionItem = (action: any) => {
    setActions((p) => p.map((a) => ({ ...a, active: a.key === action.key })));
  };

  const onTimeScroll = (p: IOnScrollParam) => {
    const { top, height } = p;
    //左侧区域高度
    const { scrollHeight, clientHeight } = scrollContainerRef.current!;
    const ratio = (scrollHeight - clientHeight) / height;
    scrollContainerRef.current!.scrollTop = top * ratio;
  };

  return (
    <div className="container course">
      <div className="recommends">
        {recommendList.map((item, index) => (
          <BsCard {...item} key={index} />
        ))}
      </div>

      <div className="action-bar">
        <div className="table-action">
          <Space>
            {actions.map((action) => (
              <Tooltip key={action.key} content={action.tip}>
                <Button
                  type="text"
                  className={action.active ? "active" : ""}
                  onClick={() => onClickActionItem(action)}
                  icon={
                    <Icon size={20} color="var(--color-text-2)">
                      {action.icon}
                    </Icon>
                  }
                />
              </Tooltip>
            ))}
            <Dropdown droplist={dropList} position="bl">
              <Button
                type="text"
                icon={
                  <Icon size={20} color="var(--color-text-2)">
                    <Filter20Regular />
                  </Icon>
                }
              />
            </Dropdown>
          </Space>
        </div>
      </div>
      <div className="timeline">
        <div className="thumbnail">
          <article ref={scrollContainerRef}>
            {courseTimeList.map((item, index) => (
              <section key={index}>
                <div className="time">
                  {item.year}年{item.month}月
                </div>
                <div className="statistic">{item.data.length} 个视频</div>
                <div className="grid">
                  {item.data.map((d: any) => (
                    <BsCard key={d.time} imgUrl={d.img} title={d.title} />
                  ))}
                </div>
              </section>
            ))}
          </article>
        </div>
        <TimeScroll
          className="timescroll"
          data={courseTimeList}
          onScroll={onTimeScroll}
        />
      </div>
    </div>
  );
}