完成智慧法务前端调整20250522，还有登录和主页需要完善

2025-05-27 23:48:28 +08:00
parent 742a789244
commit 690d369f57
30 changed files with 1557 additions and 292 deletions
@@ -8,8 +8,15 @@ import {
  ScrollRestoration,
  isRouteErrorResponse,
  useRouteError,
-  type MetaFunction
+  type MetaFunction,
+  // useLoaderData
 } from "@remix-run/react";
+// import { 
+//   LoaderFunctionArgs, 
+//   redirect, 
+//   createCookieSessionStorage, 
+//   ActionFunctionArgs 
+// } from "@remix-run/node";
 import { Layout } from "~/components/layout/Layout";
 import { ErrorBoundary as AppErrorBoundary } from "~/components/error/ErrorBoundary";
 import { MessageModalProvider } from "~/components/ui/MessageModal";
@@ -21,6 +28,104 @@ import messageModalStyles from "~/styles/components/message-modal.css?url";
 import toastStyles from "~/styles/components/toast.css?url";
 import LoadingBarContainer from "~/components/ui/LoadingBar";
 import RouteChangeLoader from "~/components/ui/RouteChangeLoader";
+// import { useState, useEffect } from "react";
+
+// 创建基于Cookie的会话存储
+// 在实际应用中，应该使用环境变量来设置密钥
+// const sessionStorage = createCookieSessionStorage({
+//   cookie: {
+//     name: "__session",
+//     httpOnly: true,
+//     path: "/",
+//     sameSite: "lax",
+//     secrets: ["s3cr3t"], // 应该从环境变量读取
+//     secure: process.env.NODE_ENV === "production",
+//   },
+// });
+
+// // 获取会话对象
+// export async function getSession(request: Request) {
+//   const cookie = request.headers.get("Cookie");
+//   return sessionStorage.getSession(cookie);
+// }
+
+// // 获取用户登录状态
+// export async function getUserSession(request: Request) {
+//   const session = await getSession(request);
+//   return {
+//     isAuthenticated: session.get("isAuthenticated") === true,
+//   };
+// }
+
+// // 创建登录会话
+// export async function createUserSession(isAuthenticated: boolean, redirectTo: string) {
+//   const session = await sessionStorage.getSession();
+//   session.set("isAuthenticated", isAuthenticated);
+  
+//   return redirect(redirectTo, {
+//     headers: {
+//       "Set-Cookie": await sessionStorage.commitSession(session),
+//     },
+//   });
+// }
+
+// // 销毁会话（登出）
+// export async function logout(request: Request) {
+//   const session = await getSession(request);
+  
+//   return redirect("/login", {
+//     headers: {
+//       "Set-Cookie": await sessionStorage.destroySession(session),
+//     },
+//   });
+// }
+
+// // 添加action处理登录/登出请求
+// export async function action({ request }: ActionFunctionArgs) {
+//   const formData = await request.formData();
+//   const intent = formData.get("intent");
+  
+//   if (intent === "logout") {
+//     return logout(request);
+//   }
+  
+//   return null;
+// }
+
+// // 添加loader函数进行全局认证检查
+// export async function loader({ request }: LoaderFunctionArgs) {
+//   // 获取当前路径
+//   const url = new URL(request.url);
+//   const pathname = url.pathname;
+  
+//   // 排除不需要登录验证的路径
+//   const publicPaths = ['/login', '/favicon.ico'];
+//   const isPublicPath = publicPaths.some(path => pathname.startsWith(path));
+  
+//   // 获取用户会话
+//   const { isAuthenticated } = await getUserSession(request);
+  
+//   // 如果访问需要认证的路径但未登录，重定向到登录页
+//   if (!isPublicPath && !isAuthenticated) {
+//     // 保存请求的URL，以便登录后重定向回来
+//     const session = await getSession(request);
+//     session.set("redirectTo", pathname);
+    
+//     return redirect("/login", {
+//       headers: {
+//         "Set-Cookie": await sessionStorage.commitSession(session),
+//       },
+//     });
+//   }
+  
+//   // 如果已登录且访问登录页，重定向到首页
+//   if (pathname === "/login" && isAuthenticated) {
+//     return redirect("/home");
+//   }
+  
+//   // 向组件传递认证状态和当前路径
+//   return Response.json({ isAuthenticated, pathname });
+// }

 // 添加客户端hydration错误处理
 // if (typeof window !== "undefined") {
@@ -58,6 +163,12 @@ export function links() {
 }

 export default function App() {
+  // const { pathname } = useLoaderData<typeof loader>();
+  
+  // // 确定哪些路径不需要Layout
+  // const noLayoutPaths = ['/login', '/home'];
+  // const needsLayout = !noLayoutPaths.includes(pathname);
+  
  return (
    <html lang="zh-CN">
      <head>
@@ -82,9 +193,18 @@ export default function App() {
      <body className="font-sans">
        <MessageModalProvider>
          <ToastProvider>
-            <Layout>
+            {/* {needsLayout ? (
+              <Layout>
+                <Outlet />
+              </Layout>
+            ) : (
              <Outlet />
-            </Layout>
+            )} */}
+
+              <Layout>
+                <Outlet />
+              </Layout>
+
            <RouteChangeLoader />
          </ToastProvider>
        </MessageModalProvider>