46 lines
948 B
TypeScript
46 lines
948 B
TypeScript
import { RouterProvider } from "react-router-dom";
|
|
import { Suspense } from "react";
|
|
import router from "./router";
|
|
import { ScaleProvider, useScale } from "./contexts/ScaleContext";
|
|
import { RotateHint } from "./components/RotateHint";
|
|
|
|
/**
|
|
* 应用内容组件
|
|
* 使用 useScale 获取缩放样式
|
|
*/
|
|
function AppContent() {
|
|
const { scaleStyle } = useScale();
|
|
|
|
return (
|
|
<>
|
|
<div className="relative w-screen h-screen overflow-hidden">
|
|
<div
|
|
style={{
|
|
...scaleStyle,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
<RouterProvider router={router} />
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
<RotateHint />
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 应用根组件
|
|
* ScaleProvider 自动处理所有缩放逻辑
|
|
*/
|
|
function App() {
|
|
return (
|
|
<ScaleProvider>
|
|
<AppContent />
|
|
</ScaleProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|