Files
leaudit-platform-frontend/app/root.tsx
T
2025-04-25 14:12:36 +08:00

139 lines
4.2 KiB
TypeScript

// import React from 'react';
import {
Links,
// LiveReload, // 不再需要,使用Vite时会与内置HMR冲突
Meta,
Outlet,
Scripts,
ScrollRestoration,
isRouteErrorResponse,
useRouteError,
type MetaFunction
} from "@remix-run/react";
import { Layout } from "~/components/layout/Layout";
import { ErrorBoundary as AppErrorBoundary } from "~/components/error/ErrorBoundary";
import { MessageModalProvider } from "~/components/ui/MessageModal";
import { ToastProvider } from "~/components/ui/Toast";
import "remixicon/fonts/remixicon.css";
// 导入样式
import styles from "~/styles/main.css?url";
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";
// 添加客户端hydration错误处理
// if (typeof window !== "undefined") {
// window.addEventListener("error", (event) => {
// if (event.message && event.message.includes("Hydration failed")) {
// console.warn("Hydration error detected, refreshing page...");
// setTimeout(() => {
// window.location.reload();
// }, 100);
// event.preventDefault();
// }
// });
// }
export const meta: MetaFunction = () => {
return [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width,initial-scale=1" },
{ title: "中国烟草AI合同及卷宗审核系统" },
{ name: "description", content: "专业的AI合同及卷宗评查系统,提供智能审核、风险评估和规范化建议" },
{ name: "robots", content: "noindex,nofollow" } // 内部系统,防止被搜索引擎索引
];
};
// 使用links函数为应用加载CSS和其他资源
export function links() {
return [
{ rel: "stylesheet", href: styles },
{ rel: "stylesheet", href: messageModalStyles },
{ rel: "stylesheet", href: toastStyles },
// { rel: "preconnect", href: "https://fonts.googleapis.com" },
// { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
// { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" }
];
}
export default function App() {
return (
<html lang="zh-CN">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style dangerouslySetInnerHTML={{ __html: `
:root {
--color-primary: #00684a;
--color-primary-hover: #005a3f;
--color-primary-light: rgba(0, 104, 74, 0.1);
--primary-color: #00684a;
/* 成功、警告、错误颜色 */
--color-success: #52c41a;
--color-warning: #faad14;
--color-error: #f5222d;
}
` }} />
<Meta />
<Links />
</head>
<body className="font-sans">
<MessageModalProvider>
<ToastProvider>
<Layout>
<Outlet />
</Layout>
<RouteChangeLoader />
</ToastProvider>
</MessageModalProvider>
<ScrollRestoration />
<Scripts />
<LoadingBarContainer />
</body>
</html>
);
}
export function ErrorBoundary() {
const error = useRouteError();
if (isRouteErrorResponse(error)) {
return (
<html lang="zh-CN">
<head>
<Meta />
<Links />
<title> {error.status}</title>
</head>
<body>
<AppErrorBoundary
status={error.status}
statusText={error.statusText}
message={error.data?.message || "发生了一个错误,请稍后重试"}
/>
<Scripts />
</body>
</html>
);
}
return (
<html lang="zh-CN">
<head>
<Meta />
<Links />
<title></title>
</head>
<body>
<AppErrorBoundary
status={500}
statusText="服务器错误"
message="服务器发生了意外错误,请稍后重试"
/>
<Scripts />
</body>
</html>
);
}