feat:init

src/App.tsx

@@ -1,28 +1,43 @@
 import { RouterProvider } from "react-router-dom";
+import { Suspense } from "react";
 import router from "./router";
-import { usePageScale } from "./hooks/usePageScale";
-import { ScaleProvider } from "./contexts/ScaleContext";
+import { ScaleProvider, useScale } from "./contexts/ScaleContext";
+import { RotateHint } from "./components/RotateHint";
 
-function App() {
-  const { scaleStyle, scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } =
-    usePageScale();
+/**
+ * 应用内容组件
+ * 使用 useScale 获取缩放样式
+ */
+function AppContent() {
+  const { scaleStyle } = useScale();
 
   return (
-    <ScaleProvider
-      value={{ scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT }}
-    >
-      <div
-        style={{
-          position: "relative",
-          width: "100vw",
-          height: "100vh",
-          overflow: "hidden",
-        }}
-      >
-        <div style={scaleStyle}>
-          <RouterProvider router={router} />
+    <>
+      <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>
   );
 }