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[]>>(
 		{},