💄 style(custom): 视频页内容区修改样式

src/routers/video/hooks.tsx

@@ -0,0 +1,3 @@
+import { useAppSelector } from "@store/hooks";
+import { selectVideoLoadingState } from "@store/loading/index";
+export const useVideoLoading = () => useAppSelector(selectVideoLoadingState);

src/routers/video/masonry.tsx

@@ -1,25 +1,27 @@
-import { useState, useEffect, FC, memo } from "react";
+import { useState, useEffect, FC, memo, ReactElement } from "react";
 import { VideoRouterImageCardType, VideoRouterMasonryType } from "./videotype";
-import { Unstable_Grid2 as Grid } from "@mui/material";
+import { SxProps, Theme, Unstable_Grid2 as Grid } from "@mui/material";
 import { VideoRouterImageCard } from "./item";
 import { Skeleton } from "@mui/material";
 import { nanoid } from "nanoid";
 import styles from "./video.module.less";
 import { fetchVideohandler, PickVideoRouterImageCardType } from "./tools";
-import { useAppSelector, useAppDispatch } from "@store/hooks";
-import { changeLoading, selectVideoLoadingState } from "@store/loading/index";
+import { useAppDispatch } from "@store/hooks";
+import { changeLoading } from "@store/loading/index";
+import { useVideoLoading } from "./hooks";
+import { useScreenSize } from "@components/proview/screenSize";
+type VideoListType = (VideoRouterImageCardType & { id: string })[];
 /**
  * @description 该组件负责渲染视频图片的瀑布流
  */
 export default function VideoMasonry(props: VideoRouterMasonryType) {
-  const [lists, setLists] = useState<
-    (VideoRouterImageCardType & { id: string })[]
-  >([]);
-  const isLoading = useAppSelector(selectVideoLoadingState),
-    dispatch = useAppDispatch(),
+  const [lists, setLists] = useState<VideoListType>([]);
+  const dispatch = useAppDispatch(),
     handerChangeLoading = (state: boolean) =>
       dispatch(changeLoading({ stateName: "videoIsLoading", Tostate: state }));
   useEffect(() => {
+    setLists([]);
+    handerChangeLoading(true);
     // 在内部定义fetchHandler，保证拿到的是同步的
     const fetchHandler = async (page: number = 1) => {
       const data = await fetchVideohandler(page, props);
@@ -41,19 +43,84 @@ export default function VideoMasonry(props: VideoRouterMasonryType) {
         }),
       ]);
     };
-    setLists([]);
-    handerChangeLoading(true);
     fetchHandler(1).then(() => handerChangeLoading(false));
   }, [props]);
   return (
     <div className='feedContainer'>
+      <VideoContent data={lists} />
+    </div>
+  );
+}
+
+const VideoContent: FC<{ data: VideoListType }> = memo((props) => {
+  const { lg, md, sm } = useScreenSize(),
+    rightLen = (lg ? (md ? (sm ? 0 : 2) : 4) : 6) + 1;
+  const data = props.data,
+    loading = useVideoLoading(),
+    isEmpty = data.length < 1,
+    shouldNoShowHeroLine = data.length < rightLen + 1 + 10;
+  const heroItem = data.slice(0, 1),
+    rightItem = data.slice(1, rightLen),
+    resItems = shouldNoShowHeroLine ? data : data.slice(rightLen);
+  return (
+    <>
       <Grid
         container
         spacing={{
           lg: 2,
-          md: 1,
           sm: 1,
-          xs: 1,
+        }}
+        sx={{
+          marginBottom: "30px",
+        }}
+        rowSpacing={2}
+        columns={{
+          md: 10,
+          sm: 6,
+          xs: 4,
+        }}
+      >
+        <Grid xs={4} sm={4} md={5} lg={4} className={styles["hero-content"]}>
+          {loading ? (
+            <LoadingSkeleton />
+          ) : shouldNoShowHeroLine ? (
+            <></>
+          ) : (
+            <VideoRouterImageCard data={heroItem[0]} />
+          )}
+        </Grid>
+        {!sm && (
+          <Grid sm={2} md={5} lg={6} sx={{ padding: 0 }}>
+            <Grid
+              container
+              columns={{
+                lg: 6,
+                md: 4,
+                sm: 2,
+              }}
+            >
+              {loading ? (
+                Array.from({ length: rightLen - 1 }, (value, key) => (
+                  <Grid xs={2} key={key}>
+                    <LoadingSkeleton />
+                  </Grid>
+                ))
+              ) : shouldNoShowHeroLine ? (
+                <></>
+              ) : (
+                rightItem.map((item) => (
+                  <MemoItems key={item.id} {...item}></MemoItems>
+                ))
+              )}
+            </Grid>
+          </Grid>
+        )}
+      </Grid>
+      <Grid
+        container
+        spacing={{
+          lg: 2,
+          md: 1,
         }}
         rowSpacing={2}
         columns={{
@@ -62,16 +129,26 @@ export default function VideoMasonry(props: VideoRouterMasonryType) {
           sm: 6,
           xs: 4,
         }}
-        className={styles["container"]}
       >
-        {lists.map((item) => (
-          <MemoItems key={item.id} {...item} />
-        ))}
-        {isLoading && <LoadingSkeleton num={20} />}
+        {loading ? (
+          Array.from({ length: 20 }, (value, key) => (
+            <Grid xs={2} key={key}>
+              <LoadingSkeleton />
+            </Grid>
+          ))
+        ) : isEmpty ? (
+          <EmptyItem />
+        ) : (
+          resItems.map((item) => <MemoItems key={item.id} {...item} />)
+        )}
       </Grid>
-    </div>
+    </>
   );
-}
+});
+const EmptyItem = () => (
+  <div className='text-gray-500 ml-auto mr-auto'>暂无数据</div>
+);
+
 const MemoItems: FC<VideoRouterImageCardType> = memo((props) => {
   return (
     <Grid xs={2}>
@@ -80,24 +157,18 @@ const MemoItems: FC<VideoRouterImageCardType> = memo((props) => {
   );
 });
 
-const LoadingSkeleton: FC<{ num: number }> = ({ num = 0 }) => {
-  return (
-    <>
-      {...Array.from({ length: num }, (v, key) => (
-        <Grid xs={2} key={key}>
-          <Skeleton
-            variant='rounded'
-            animation='wave'
-            className={styles["skeleton-img"]}
-          />
-          <Skeleton animation='wave' height={20} />
-          <Skeleton animation='wave' width={"50%"} height={20} />
-          <div className={styles["skeleton-content"]}>
-            <Skeleton animation='wave' width={40} height={25} />
-            <Skeleton animation='wave' width={"60%"} height={20} />
-          </div>
-        </Grid>
-      ))}
-    </>
-  );
-};
+const LoadingSkeleton = () => (
+  <>
+    <Skeleton
+      variant='rounded'
+      animation='wave'
+      className={styles["skeleton-img"]}
+    />
+    <Skeleton animation='wave' height={20} />
+    <Skeleton animation='wave' width={"50%"} height={20} />
+    <div className={styles["skeleton-content"]}>
+      <Skeleton animation='wave' width={40} height={25} />
+      <Skeleton animation='wave' width={"60%"} height={20} />
+    </div>
+  </>
+);

src/routers/video/video.module.less

@@ -13,13 +13,39 @@
     }
 }
 
-.container:empty {
-    display: flex;
-    justify-content: center;
+.hero-content {
+    &>section:only-child {
+        &>a:first-child {
+            flex-grow: 1;
+
+            img {
+                height: 100%;
+            }
+
+            img+div {
+                padding: 16px;
+
+                span {
+                    font-size: 16px !important;
+                }
+            }
+        }
+
+        &>div:last-child {
+            justify-content: flex-start;
+
+        }
 
-    &::before {
-        margin-top: 50px;
-        content: "暂无数据";
-        color: #c1c1c1;
     }
-}
+}
+
+// .container:empty {
+//     display: flex;
+//     justify-content: center;
+
+//     &::before {
+//         margin-top: 50px;
+//         content: "暂无数据";
+//         color: #c1c1c1;
+//     }
+// }