save

.gitignore

@@ -26,3 +26,4 @@ yarn.lock
 pnpm-lock.yaml
 package-lock.json
 .env
+public/video/banner.mp4

src/App.tsx

@@ -1,5 +1,5 @@
 // App.js
-import { BrowserRouter as Router, useRoutes } from 'react-router-dom';
+import { BrowserRouter as Router, RouterProvider, useRoutes } from 'react-router-dom';
 import "./App.css"
 import routes from "@/Routes";
 import { useCallback, useEffect, useState } from "react";
@@ -8,9 +8,9 @@ import { useStore } from "@/store";
 import { parsePageConfig } from "@/utils/parsePageConfig";
 import type { I18nData, SupportLocale } from "@/type";
 
-function AppRoutes() {
+// function AppRoutes() {
-    return useRoutes(routes);
+//     return useRoutes(routes);
-}
+// }
 
 function App() {
     const [init, setInit] = useState(false);
@@ -87,9 +87,7 @@ function App() {
     return (
         <>
             <div>
-                <Router>
+            <RouterProvider router={routes} />
-                    <AppRoutes />
-                </Router>
             </div>
         </>
     );

src/Routes.tsx

@@ -1,7 +1,16 @@
 import Home from "@/pages/Home/index";
 import MainLayout from "@/layouts/MainLayout";
-import { Navigate, type RouteObject } from "react-router-dom";
+import { Navigate, createBrowserRouter } from "react-router-dom";
+import { lazy, Suspense } from "react";
+import { KeepAlive } from "react-activation";
 
+
+import TermsOfUse from "@/pages/Others/TermsOfUse";
+import PrivacyPolicy from "@/pages/Others/PrivacyPolicy";
+import AuditReport from "@/pages/Others/AuditReport";
+import SiteMap from "@/pages/Others/SiteMap";
+import Search from "@/pages/Others/Search";
+import NavigateReplace from "@/utils/NavigateReplace";
 import About from "@/pages/About/overview";
 import AboutHistory from "@/pages/About/History";
 import AboutFounder from "@/pages/About/Founder";
@@ -20,57 +29,255 @@ import JoinCulture from "@/pages/Join/Culture";
 import JoinCampus from "@/pages/Join/Campus";
 import JoinCampusDetail from "@/pages/Join/CampusDetail";
 import PropertyService from "@/pages/PropertyService/index";
-import TermsOfUse from "@/pages/Others/TermsOfUse";
-import PrivacyPolicy from "@/pages/Others/PrivacyPolicy";
-import AuditReport from "@/pages/Others/AuditReport";
-import SiteMap from "@/pages/Others/SiteMap";
-import Search from "@/pages/Others/Search";
-import NavigateReplace from "@/utils/NavigateReplace";
 
-
+const routes = createBrowserRouter([
-const routes: RouteObject[] = [
     {
         path: "/",
         element: <MainLayout></MainLayout>,
         children: [
-            { index: true, element: <Home /> },
+            { index: true, element: <KeepAlive id="home"><Home /></KeepAlive> },
             // 关于银泰
-            { path: "about", element: <NavigateReplace path="/about/overview"><About /></NavigateReplace> },
+            {
-            { path: "about/overview", element: <About /> }, //集团概览
+                path: "about",
-            { path: "about/history", element: <AboutHistory /> },
+                element: (
-            { path: "about/founder", element: <AboutFounder /> },
+                    <NavigateReplace path="/about/overview">
+                            <About />
+                    </NavigateReplace>
+                ),
+            },
+            {
+                path: "about/overview",
+                element: (
+                    <KeepAlive id="about-overview">
+                        <Suspense fallback={null}>
+                            <About />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "about/history",
+                element: (
+                    <KeepAlive id="about-history">
+                        <Suspense fallback={null}>
+                            <AboutHistory />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "about/founder",
+                element: (
+                    <KeepAlive id="about-founder">
+                        <Suspense fallback={null}>
+                            <AboutFounder />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
             // 集团业务
-            { path: "business", element: <NavigateReplace path="/business/commercial-group"><BusinessCommercialGroup /></NavigateReplace> },
+            {
-            { path: "business/commercial-group", element: <BusinessCommercialGroup /> },
+                path: "business",
-            { path: "business/commercial-group/:detailType", element: <BusinessCommercialGroupDetail /> },
+                element: (
-            { path: "business/base-group", element: <BusinessBaseGroup /> },
+                    <NavigateReplace path="/business/commercial-group">
-            { path: "business/realty-group", element: <BusinessRealtyGroup /> },
+                        <Suspense fallback={null}>
-            { path: "business/invest-group", element: <BusinessInvestGroup /> },
+                            <BusinessCommercialGroup />
-            { path: "business/ruijing-group", element: <BusinessRujingGroup /> },
+                        </Suspense>
+                    </NavigateReplace>
+                ),
+            },
+            {
+                path: "business/commercial-group",
+                element: (
+                    <KeepAlive id="business-commercial-group">
+                        <Suspense fallback={null}>
+                            <BusinessCommercialGroup />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "business/commercial-group/:detailType",
+                element: (
+                    <KeepAlive id="business-commercial-group-detail">
+                        <Suspense fallback={null}>
+                            <BusinessCommercialGroupDetail />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "business/base-group",
+                element: (
+                    <KeepAlive id="business-base-group">
+                        <Suspense fallback={null}>
+                            <BusinessBaseGroup />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "business/realty-group",
+                element: (
+                    <KeepAlive id="business-realty-group">
+                        <Suspense fallback={null}>
+                            <BusinessRealtyGroup />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "business/invest-group",
+                element: (
+                    <KeepAlive id="business-invest-group">
+                        <Suspense fallback={null}>
+                            <BusinessInvestGroup />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "business/ruijing-group",
+                element: (
+                    <KeepAlive id="business-ruijing-group">
+                        <Suspense fallback={null}>
+                            <BusinessRujingGroup />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
             // 社会责任
-            { path: "social", element: <NavigateReplace path="/social/sustainability"><SocialSustainability /></NavigateReplace> },
+            {
-            { path: "social/sustainability", element: <SocialSustainability /> },
+                path: "social",
-            { path: "social/foundation", element: <SocialFoundation /> },
+                element: (
+                    <NavigateReplace path="/social/sustainability">
+                        <Suspense fallback={null}>
+                            <SocialSustainability />
+                        </Suspense>
+                    </NavigateReplace>
+                ),
+            },
+            {
+                path: "social/sustainability",
+                element: (
+                    <KeepAlive id="social-sustainability">
+                        <Suspense fallback={null}>
+                            <SocialSustainability />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "social/foundation",
+                element: (
+                    <KeepAlive id="social-foundation">
+                        <Suspense fallback={null}>
+                            <SocialFoundation />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
             // 新闻中心
-            { path: "news", element: <NavigateReplace path="/news/public"><NewsPublic /></NavigateReplace> },
+            {
-            { path: "news/public", element: <NewsPublic /> },
+                path: "news",
-            { path: "news/media", element: <NewsMedia /> },
+                element: (
-            { path: "news/detail/:id", element: <NewsDetail /> },
+                    <NavigateReplace path="/news/public">
+                        <Suspense fallback={null}>
+                            <NewsPublic />
+                        </Suspense>
+                    </NavigateReplace>
+                ),
+            },
+            {
+                path: "news/public",
+                element: (
+                    <KeepAlive id="news-public">
+                        <Suspense fallback={null}>
+                            <NewsPublic />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "news/media",
+                element: (
+                    <KeepAlive id="news-media">
+                        <Suspense fallback={null}>
+                            <NewsMedia />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "news/detail/:id",
+                element: (
+                    <KeepAlive id="news-detail">
+                        <Suspense fallback={null}>
+                            <NewsDetail />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
             // 加入银泰
-            { path: "join", element: <NavigateReplace path="/join/culture"><JoinCulture /></NavigateReplace> },
+            {
-            { path: "join/culture", element: <JoinCulture /> },
+                path: "join",
-            { path: "join/campus", element: <JoinCampus /> },
+                element: (
-            { path: "join/campus/detail/:id", element: <JoinCampusDetail /> },
+                    <NavigateReplace path="/join/culture">
+                        <Suspense fallback={null}>
+                            <JoinCulture />
+                        </Suspense>
+                    </NavigateReplace>
+                ),
+            },
+            {
+                path: "join/culture",
+                element: (
+                    <KeepAlive id="join-culture">
+                        <Suspense fallback={null}>
+                            <JoinCulture />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "join/campus",
+                element: (
+                    <KeepAlive id="join-campus">
+                        <Suspense fallback={null}>
+                            <JoinCampus />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
+            {
+                path: "join/campus/detail/:id",
+                element: (
+                    <KeepAlive id="join-campus-detail">
+                        <Suspense fallback={null}>
+                            <JoinCampusDetail />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
             // 其它
             // 物业服务
-            { path: "/property-service", element: <PropertyService /> },
+            {
+                path: "/property-service",
+                element: (
+                    <KeepAlive id="property-service">
+                        <Suspense fallback={null}>
+                            <PropertyService />
+                        </Suspense>
+                    </KeepAlive>
+                ),
+            },
             // 搜索
-            { path: "/search", element: <Search /> },
+            { path: "/search", element: <KeepAlive id="search"><Search /></KeepAlive> },
             // 使用条款 隐私保护 审计举报 网站地图
-            { path: "/terms-of-use", element: <TermsOfUse /> },
+            { path: "/terms-of-use", element: <KeepAlive id="terms-of-use"><TermsOfUse /></KeepAlive> },
-            { path: "/privacy-policy", element: <PrivacyPolicy /> },
+            { path: "/privacy-policy", element: <KeepAlive id="privacy-policy"><PrivacyPolicy /></KeepAlive> },
-            { path: "/audit-report", element: <AuditReport /> },
+            { path: "/audit-report", element: <KeepAlive id="audit-report"><AuditReport /></KeepAlive> },
-            { path: "/site-map", element: <SiteMap /> },
+            { path: "/site-map", element: <KeepAlive id="site-map"><SiteMap /></KeepAlive> },
             { path: "/contact-us", element: <Navigate to="/news/media"></Navigate> },
         ],
     },
@@ -78,6 +285,6 @@ const routes: RouteObject[] = [
         path: '*',
         element: <div>404 Not Found</div>
     }
-];
+])
 
 export default routes;

src/components/Banner.module.css

@@ -31,6 +31,16 @@
   background-position: center;
 }
 
+/* 视频铺满：等价于背景图 cover，需配合父级有明确宽高（.hero / .bgSwiper 已占满） */
+.bgVideo {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
 .heroOverlay {
   position: absolute;
   inset: 0;

src/components/banner.tsx

@@ -100,6 +100,8 @@ export default function Banner({
             </ScrollReveal>
         </div>
     );
+
+    const videoExtension = ["mp4", "webm", "ogg"];
     return (
         <section
             className={styles.hero}
@@ -114,19 +116,32 @@ export default function Banner({
                     className={styles.bgSwiper}
                     modules={[Autoplay, EffectFade]}
                     effect="slide"
-                    autoplay={{ delay: 3000, disableOnInteraction: false }}
+                    autoplay={{ delay: 5000, disableOnInteraction: true }}
                     allowTouchMove={false}
                     slidesPerView={1}
                     loop={true}
                 >
                     {images.map((img, i) => (
                         <SwiperSlide key={i}>
+                            {/* 图片后缀 */}
+                            {videoExtension.includes(img.split(".").pop() ?? "") ? (
+                                <video
+                                    src={img}
+                                    className={styles.bgVideo}
+                                    autoPlay
+                                    muted
+                                    loop
+                                    playsInline
+                                />
+                            ) : (
                                 <div
                                     className={styles.bgSlide}
                                     style={{
                                         backgroundImage: `url(${img}), ${FALLBACK_GRADIENT}`,
                                     }}
                                 />
+                            )}
+                            {/* 视频 */}
                         </SwiperSlide>
                     ))}
                 </Swiper>

src/index.tsx

@@ -8,9 +8,7 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
   <App />
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/layouts/MainLayout.tsx

@@ -17,7 +17,9 @@ export default function MainLayout() {
         <div className="layout">
             <Header />
             <main className="container">
+                <AliveScope>
                     <Outlet />
+                </AliveScope>
             </main>
             <Footer />
         </div>