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

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

src/pages/Components/DragDropDemo.tsx

@@ -6,8 +6,8 @@ import {
 	Droppable,
 } from "@/components/course-interactions/drag-drop";
 import { Button } from "@/components/ui/button";
+import { useCourseCanvas } from "@/course-runtime/canvas";
 import { cn } from "@/lib/cn";
-import { useScale } from "@/utils";
 import type {
 	DragDemoItem,
 	DragDemoZone,
@@ -153,7 +153,7 @@ const renderPlacedItem = (item: DragDemoItem) => (
 );
 
 export function DragDropDemo() {
-	const scale = useScale();
+	const { scale } = useCourseCanvas();
 	const [dropResult, setDropResult] = useState<DragDropDemoResult>(null);
 	const [placedItemIds, setPlacedItemIds] = useState<Record<string, string[]>>(
 		{},

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({