feats

src/layouts/AuthLayout/components/Container.jsx

@@ -7,18 +7,18 @@ import Footer from './Footer';
 const { Content } = Layout;
 
 export default (props) => {  
-  const containerRef = useRef();
-  const [minHeight, setMinHeight] = useState(0);
-  const contentStyle = useMemo(() => ({ minHeight: `${minHeight}px` }), [minHeight]);
+  const [footerHeight, setFooterHeight] = useState(0);
+
+  // 24 是 marginTop 的值
+  const contentStyle = useMemo(() => ({ height: footerHeight > 0 ? `calc(100% - ${footerHeight + 24}px)` : '100%' }), [footerHeight]);
   
   useEffect(() => {
-    const containerHeight = containerRef.current.offsetHeight;
     const footerHeight = (document.querySelector('.ant-layout-footer') || {}).offsetHeight || 0;
-    setMinHeight(containerHeight - footerHeight);
-  }, []);
+    setFooterHeight(footerHeight);
+  });
 
   return (
-    <div className='layout-container' ref={containerRef}>
+    <div className='layout-container'>
       <Content style={contentStyle}>
         {/* <PageTransition location={props.location}> */}
           <Outlet />

src/layouts/AuthLayout/index.jsx

@@ -33,9 +33,9 @@ export default (props) => {
           noLayout
             ? <Outlet />
             : (
-              <Layout style={{ minHeight: '100vh' }}>
+              <Layout style={{ height: '100vh' }}>
                 <Header theme={theme} menus={splitMenus} location={location} />
-                <Layout>
+                <Layout style={{ height: 'calc(100vh - var(--header-height))' }}>
                   { !noSiderBar && <SiderBar theme={theme} menus={siderMenus} location={location} /> }
                   <Container location={location} noFooter={noFooter} />
                 </Layout>

src/layouts/AuthLayout/style.less

@@ -94,6 +94,7 @@
 }
 
 .layout-container {
+  height: 100%;
   flex: 1;
 
   overflow-y: auto;

src/pages/sample/home/components/Banner.jsx

@@ -1,127 +0,0 @@
-import { Row, Col, Card, Statistic, Carousel } from "antd";
-import {
-  ArrowDownOutlined,
-  ArrowUpOutlined,
-  LikeOutlined,
-} from "@ant-design/icons";
-import React, { useState } from "react";
-import { getBannerList } from "@/services/rotationChart";
-
-import { useRef } from "react";
-import { useEffect } from "react";
-import moment from "moment";
-import VideoPlay from "./VideoPlay.jsx";
-import { floatDivide } from "@/utils";
-
-const contentStyle = {
-  height: "760px",
-  margin: "0 auto",
-  width: "100%",
-  // color: "#fff",
-  // lineHeight: "160px",
-  // textAlign: "center",
-  // background: "#364d79",
-};
-
-export default (props) => {
-  const [autoPlay, setAutoPlay] = useState(true);
-  const [current, setCurrent] = useState(0);
-  const [mouse, setMouse] = useState(false);
-  const [mediaList, setMediaList] = useState([]);
-
-  const ref = useRef();
-
-  const mouseRef = useRef(false);
-  const isVideoRef = useRef(false);
-  const isVideoPlayRef = useRef(false);
-  useEffect(() => {
-    getBannerList().then((res) => {
-   
-
-      setMediaList(
-        res?.records?.map((x) => {
-          if (x.type === "2") {
-            return {
-              ...x,
-              type: "video",
-              url: x.video,
-            };
-          } else {
-            return {
-              ...x,
-              type: "image",
-              url: x.image,
-            };
-          }
-        })
-      );
-    });
-    handNext();
-  }, []);
-
-  const handNext = () => {
-    setTimeout(() => {
-
-      if (!mouseRef.current && !isVideoRef.current && !isVideoPlayRef.current) {
-        ref.current?.next();
-      }
-      handNext();
-    }, 3000);
-  };
-
-  const onMouseEnter = () => {
-   
-    mouseRef.current = true;
-  };
-  const onMouseLeave = () => {
-    mouseRef.current = false;
-  };
-
-  return (
-    <>
-      <div
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        style={{ height: 800 }}
-      >
-        <Carousel
-          ref={ref}
-          afterChange={(cur) => {
-            setCurrent(cur);
-          }}
-        >
-          {mediaList?.map((x, index) => {
-            if (x.type === "image") {
-              return (
-                <div className="abc" key={index}>
-                  <div style={{ overflow: "hidden" }}>
-                    <img src={x.url} style={contentStyle}></img>
-                  </div>
-                </div>
-              );
-            }
-            if (x.type === "video") {
-
-              return (
-                <div key={index}>
-                  <VideoPlay
-                    url={x.url}
-                    isVideoPlayRef={isVideoPlayRef}
-                    index={index}
-                    current={current}
-                    contentStyle={contentStyle}
-                  ></VideoPlay>
-                </div>
-              );
-            }
-          })}
-        </Carousel>
-      </div>
-
-      {/* <div>
-
-        <video autoPlay src={video2} ></video>
-      </div> */}
-    </>
-  );
-};

src/pages/sample/home/components/VideoPlay.jsx

@@ -13,7 +13,7 @@ import { useEffect } from "react";
 
 // https://image.baidu.com/search/albumsdetail?tn=albumsdetail&word=%E5%9F%8E%E5%B8%82%E5%BB%BA%E7%AD%91%E6%91%84%E5%BD%B1%E4%B8%93%E9%A2%98&fr=searchindex_album%20&album_tab=%E5%BB%BA%E7%AD%91&album_id=7&rn=30
 const VideoPlay = (props) => {
-  const { url, index, current, isVideoPlayRef, contentStyle } = props;
+  const { url, index, current, isVideoPlayRef, style } = props;
 
   const ref = useRef();
 
@@ -37,19 +37,15 @@ const VideoPlay = (props) => {
   useEffect(() => {}, []);
 
   return (
-    <>
-      <div style={contentStyle}>
-        <video
-          ref={ref}
-          autoPlay={false}
-          src={url}
-          onEnded={() => {
-            isVideoPlayRef.current = false;
-          }}
-          style={{ width: "100%", height: "100%", objectFit: "fill" }}
-        ></video>
-      </div>
-    </>
+    <video
+      ref={ref}
+      autoPlay={false}
+      src={url}
+      onEnded={() => {
+        isVideoPlayRef.current = false;
+      }}
+      style={style}
+    ></video>
   );
 };
 export default VideoPlay;

src/pages/sample/home/index.jsx

@@ -1,19 +1,107 @@
-import React from 'react';
-import { Row, Col, Card, Space, Statistic } from 'antd';
-import Container from '@/components/page/Container';
-import Banner from './components/Banner';
+import { Carousel } from "antd";
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import { getBannerList } from "@/services/rotationChart";
+
+import VideoPlay from "./components/VideoPlay";
+
+const height = "100%";
+const contentStyle = {
+  height,
+  margin: "0 auto",
+  width: "100%",
+};
 
 export default (props) => {
+  const [height, setHeight] = useState('100%');
+  const [current, setCurrent] = useState(0);
+  const [mouse, setMouse] = useState(false);
+  const [mediaList, setMediaList] = useState([]);
 
-  const chartStyle = {
-    height: '360px',
+  const ref = useRef();
+  const boxRef = useRef();
+  const mouseRef = useRef(false);
+  const isVideoRef = useRef(false);
+  const isVideoPlayRef = useRef(false);
+
+  const itemStyle = useMemo(() => ({
+    height,
+    overflow: 'hidden',
     width: '100%',
-  }
+    objectFit: 'fill',
+  }), [height]);
 
-  return (
-    <Container>
-      <Banner />
+  useEffect(() => {
+    getBannerList().then((res) => {
+      setMediaList(
+        res?.records?.map((x) => {
+          if (x.type === "2") {
+            return {
+              ...x,
+              type: "video",
+              url: x.video,
+            };
+          } else {
+            return {
+              ...x,
+              type: "image",
+              url: x.image,
+            };
+          }
+        })
+      );
+    });
+    handNext();
 
-    </Container>
-  )
-}
+    
+    const boxHeight = boxRef.current.offsetHeight;
+    setHeight(boxHeight ? `${boxHeight}px` : '100%');
+  }, []);
+
+  const handNext = () => {
+    setTimeout(() => {
+      if (!mouseRef.current && !isVideoRef.current && !isVideoPlayRef.current) {
+        ref.current?.next();
+      }
+      handNext();
+    }, 3000);
+  };
+
+  const onMouseEnter = () => {
+   
+    mouseRef.current = true;
+  };
+  const onMouseLeave = () => {
+    mouseRef.current = false;
+  };
+
+  return (
+    <div
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      style={{ height, overflow: "hidden" }}
+      ref={boxRef}
+    >
+      <Carousel
+        ref={ref}
+        afterChange={(cur) => {
+          setCurrent(cur);
+        }}
+      >
+          {mediaList?.map((x, index) => (
+            <div key={index}>
+              { x.type === "image" && <img src={x.url} style={itemStyle}></img> }
+              { x.type === "video" && (
+                <VideoPlay
+                  url={x.url}
+                  isVideoPlayRef={isVideoPlayRef}
+                  index={index}
+                  current={current}
+                  style={itemStyle}
+                />
+              )}
+            </div>
+          ))}
+      </Carousel>
+    </div>
+  );
+};

src/routes/routes.jsx

@@ -429,7 +429,7 @@ export const defaultRoutes = [
     children: [
       {
         index: true,
-        element: <Home />,
+        element: <Navigate to="home" replace />,
       },
       {
         path: "home",
@@ -437,6 +437,8 @@ export const defaultRoutes = [
         meta: {
           title: "首页",
           icon: <DesktopOutlined />,
+          noSiderBar: true,
+          noFooter: true,
         },
       },
       {