2023-02-27 15:41:19 +08:00
|
|
|
import "./index.less";
|
|
|
|
import Player from "../../components/Player";
|
|
|
|
import { useMount } from "../../hook";
|
2023-02-28 23:33:16 +08:00
|
|
|
import {
|
|
|
|
Select,
|
|
|
|
Message,
|
|
|
|
Space,
|
|
|
|
Tooltip,
|
|
|
|
Dropdown,
|
|
|
|
Button,
|
|
|
|
Menu,
|
|
|
|
} from "@arco-design/web-react";
|
2023-02-27 18:01:37 +08:00
|
|
|
import BsCard from "../../components/Card";
|
2023-02-28 23:33:16 +08:00
|
|
|
import TimeScroll, { IOnScrollParam } from "../../components/TimeScroll";
|
2023-02-28 17:58:30 +08:00
|
|
|
import Tab20Regular from "@ricons/fluent/Tab20Regular";
|
|
|
|
import Table20Regular from "@ricons/fluent/Table20Regular";
|
2023-02-28 23:33:16 +08:00
|
|
|
import Filter20Regular from "@ricons/fluent/Filter20Regular";
|
|
|
|
import { useRef, useState } from "react";
|
2023-02-28 17:58:30 +08:00
|
|
|
import { recommendListDefault, courseTimeListDefault } from "./mock";
|
2023-02-28 23:33:16 +08:00
|
|
|
import { Icon } from "@ricons/utils";
|
2023-02-27 15:41:19 +08:00
|
|
|
|
|
|
|
export default function Index() {
|
2023-02-28 23:33:16 +08:00
|
|
|
const scrollContainerRef = useRef<HTMLElement | null>(null);
|
2023-02-28 23:58:50 +08:00
|
|
|
const ratioRef = useRef<number>(1);
|
|
|
|
const [timescroll, setTimescroll] = useState({
|
|
|
|
top: -4,
|
|
|
|
});
|
2023-02-28 23:33:16 +08:00
|
|
|
|
|
|
|
const dropList = (
|
|
|
|
<Menu>
|
|
|
|
<Menu.Item key="1">全部</Menu.Item>
|
|
|
|
<Menu.Item key="2">最新的</Menu.Item>
|
|
|
|
</Menu>
|
|
|
|
);
|
2023-02-27 15:41:19 +08:00
|
|
|
|
2023-02-28 17:58:30 +08:00
|
|
|
const [actions, setActions] = useState([
|
|
|
|
{
|
|
|
|
key: "tab",
|
2023-02-28 23:33:16 +08:00
|
|
|
icon: <Tab20Regular />,
|
2023-02-28 17:58:30 +08:00
|
|
|
active: false,
|
|
|
|
tip: "单格排列",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "table",
|
2023-02-28 23:33:16 +08:00
|
|
|
icon: <Table20Regular />,
|
2023-02-28 17:58:30 +08:00
|
|
|
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 })));
|
|
|
|
};
|
|
|
|
|
2023-02-28 23:33:16 +08:00
|
|
|
const onTimeScroll = (p: IOnScrollParam) => {
|
|
|
|
const { top, height } = p;
|
|
|
|
//左侧区域高度
|
|
|
|
const { scrollHeight, clientHeight } = scrollContainerRef.current!;
|
2023-02-28 23:58:50 +08:00
|
|
|
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 });
|
2023-02-28 23:33:16 +08:00
|
|
|
};
|
|
|
|
|
2023-02-27 15:41:19 +08:00
|
|
|
return (
|
|
|
|
<div className="container course">
|
2023-02-27 23:38:41 +08:00
|
|
|
<div className="recommends">
|
2023-02-28 17:58:30 +08:00
|
|
|
{recommendList.map((item, index) => (
|
|
|
|
<BsCard {...item} key={index} />
|
|
|
|
))}
|
2023-02-27 23:38:41 +08:00
|
|
|
</div>
|
2023-02-28 17:58:30 +08:00
|
|
|
|
|
|
|
<div className="action-bar">
|
|
|
|
<div className="table-action">
|
2023-02-28 23:33:16 +08:00
|
|
|
<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>
|
2023-02-28 17:58:30 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="timeline">
|
|
|
|
<div className="thumbnail">
|
2023-02-28 23:58:50 +08:00
|
|
|
<article ref={scrollContainerRef} onScroll={onScroll}>
|
2023-02-28 23:33:16 +08:00
|
|
|
{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>
|
2023-02-28 17:58:30 +08:00
|
|
|
</div>
|
2023-02-28 23:33:16 +08:00
|
|
|
<TimeScroll
|
|
|
|
className="timescroll"
|
|
|
|
data={courseTimeList}
|
|
|
|
onScroll={onTimeScroll}
|
2023-02-28 23:58:50 +08:00
|
|
|
model={{ top: timescroll.top }}
|
2023-02-28 23:33:16 +08:00
|
|
|
/>
|
2023-02-27 18:01:37 +08:00
|
|
|
</div>
|
2023-02-27 15:41:19 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|