feat:init

src/components/RotateHint.tsx

@@ -0,0 +1,34 @@
+import { useScale } from "@/contexts/ScaleContext";
+
+/**
+ * 横屏提示组件
+ * 在移动端竖屏时显示提示，引导用户横屏观看
+ */
+export function RotateHint() {
+  const { isMobilePortrait } = useScale();
+
+  if (!isMobilePortrait) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        background:
+          "rgba(0,0,0,0.55) radial-gradient(circle at center, rgba(255,255,255,0.1), rgba(0,0,0,0.6))",
+        color: "#fff",
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        padding: "24px",
+        fontSize: "20px",
+        lineHeight: 1.5,
+      }}
+    >
+      请横屏观看，以获得最佳体验
+    </div>
+  );
+}
+