refactor: 横屏提示与缩放改为组件标签（OrientationGuard）

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/pages/Components/index.tsx

@@ -5,8 +5,8 @@ import { Button } from "@/components/ui/button";
 import { Overlay, type OverlayProps } from "@/components/ui/overlay";
 import { Portal } from "@/components/ui/portal";
 import { useToast } from "@/components/ui/toast";
+import { useCourseCanvas } from "@/course-runtime/canvas";
 import { useSpotlightStore } from "@/stores";
-import { useScale } from "@/utils";
 import { DragDropDemo } from "./DragDropDemo";
 
 type OverlayDemoKey =
@@ -113,7 +113,7 @@ export default function Components() {
 			? customRootRef
 			: getAppPortalRoot;
 	const toast = useToast();
-	const scale = useScale();
+	const { scale } = useCourseCanvas();
 
 	const startGuideSpotlight = () => {
 		useSpotlightStore.getState().startSpotlight({