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

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

src/App.tsx

@@ -1,17 +1,13 @@
 import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
+import { appConfig } from "@/app.config";
 import { ToastProvider, ToastViewport } from "@/components/ui/toast";
 import { CourseCanvas, useCourseCanvas } from "@/course-runtime/canvas";
+import { OrientationGuard } from "@/course-runtime/orientation";
 import { Navigation } from "./components/business";
-import { LandscapePrompt } from "./components/common";
 import { registerAppPortalRoot } from "./components/common/canvasPortal";
 import { useUserStore } from "./stores";
-import {
-	DESIGN_HEIGHT,
-	DESIGN_WIDTH,
-	isVideoAjaxAvailable,
-	useOrientation,
-} from "./utils";
+import { isVideoAjaxAvailable } from "./utils";
 
 function CourseShell() {
 	const { portalContainer } = useCourseCanvas();
@@ -30,8 +26,6 @@ function CourseShell() {
 }
 
 function App() {
-	const isPortrait = useOrientation();
-
 	useEffect(() => {
 		const params = new URLSearchParams(window.location.search);
 		const courseId = params.get("courseId") ?? params.get("courseid");
@@ -69,10 +63,10 @@ function App() {
 
 	return (
 		<>
-			{isPortrait && <LandscapePrompt />}
+			<OrientationGuard />
 			<CourseCanvas
-				width={DESIGN_WIDTH}
-				height={DESIGN_HEIGHT}
+				width={appConfig.design.width}
+				height={appConfig.design.height}
 				className="bg-gray-900"
 				canvasClassName="flex flex-col overflow-hidden bg-white"
 			>