feat(frontend): wire pages to shadcn bridge and modular helpers

vite-frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { Route, Routes, useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import IndexPage from "@/pages/index";
 import ChangePasswordPage from "@/pages/change-password";
@@ -19,50 +19,7 @@ import H5Layout from "@/layouts/h5";
 import H5SimpleLayout from "@/layouts/h5-simple";
 import { isLoggedIn } from "@/utils/auth";
 import { siteConfig } from "@/config/site";
-
-// 检测是否为H5模式
-const useH5Mode = () => {
-  // 立即检测H5模式，避免初始渲染时的闪屏
-  const getInitialH5Mode = () => {
-    // 检测移动设备或小屏幕
-    const isMobile = window.innerWidth <= 768;
-    // 检测是否为移动端浏览器
-    const isMobileBrowser =
-      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-        navigator.userAgent,
-      );
-    // 检测URL参数是否包含h5模式
-    const urlParams = new URLSearchParams(window.location.search);
-    const isH5Param = urlParams.get("h5") === "true";
-
-    return isMobile || isMobileBrowser || isH5Param;
-  };
-
-  const [isH5, setIsH5] = useState(getInitialH5Mode);
-
-  useEffect(() => {
-    const checkH5Mode = () => {
-      // 检测移动设备或小屏幕
-      const isMobile = window.innerWidth <= 768;
-      // 检测是否为移动端浏览器
-      const isMobileBrowser =
-        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-          navigator.userAgent,
-        );
-      // 检测URL参数是否包含h5模式
-      const urlParams = new URLSearchParams(window.location.search);
-      const isH5Param = urlParams.get("h5") === "true";
-
-      setIsH5(isMobile || isMobileBrowser || isH5Param);
-    };
-
-    window.addEventListener("resize", checkH5Mode);
-
-    return () => window.removeEventListener("resize", checkH5Mode);
-  }, []);
-
-  return isH5;
-};
+import { useH5Mode } from "@/hooks/useH5Mode";
 
 // 简化的路由保护组件 - 使用 React Router 导航避免循环
 const ProtectedRoute = ({
@@ -99,15 +56,8 @@ const ProtectedRoute = ({
   }
 
   // 根据模式和页面类型选择布局
-  let Layout;
-
-  if (isH5 && useSimpleLayout) {
-    Layout = H5SimpleLayout;
-  } else if (isH5) {
-    Layout = H5Layout;
-  } else {
-    Layout = AdminLayout;
-  }
+  const Layout =
+    isH5 && useSimpleLayout ? H5SimpleLayout : isH5 ? H5Layout : AdminLayout;
 
   return <Layout>{children}</Layout>;
 };