feat: 重构页面、路由与业务组件，新增课程演示

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

src/App.tsx

@@ -1,15 +1,84 @@
+import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
+import { ToastProvider, ToastViewport } from "@/components/ui/toast";
+import { CourseCanvas, useCourseCanvas } from "@/course-runtime/canvas";
 import { Navigation } from "./components/business";
-import { cn } from "./utils";
+import { LandscapePrompt } from "./components/common";
+import { registerAppPortalRoot } from "./components/common/canvasPortal";
+import { useUserStore } from "./stores";
+import {
+	DESIGN_HEIGHT,
+	DESIGN_WIDTH,
+	isVideoAjaxAvailable,
+	useOrientation,
+} from "./utils";
+
+function CourseShell() {
+	const { portalContainer } = useCourseCanvas();
+
+	useEffect(() => registerAppPortalRoot(portalContainer), [portalContainer]);
 
-function App() {
 	return (
-		<div className={cn("min-h-screen flex flex-col")}>
+		<ToastProvider>
 			<Navigation />
-			<main className={cn("flex-1 p-8")}>
+			<main className="flex-1 overflow-auto p-8">
 				<Outlet />
 			</main>
-		</div>
+			<ToastViewport container={portalContainer} />
+		</ToastProvider>
+	);
+}
+
+function App() {
+	const isPortrait = useOrientation();
+
+	useEffect(() => {
+		const params = new URLSearchParams(window.location.search);
+		const courseId = params.get("courseId") ?? params.get("courseid");
+		const uid = params.get("uid");
+		const forceYiban = params.get("yiban") === "1";
+		const hasYibanParams = !!(courseId || uid);
+		const hasVideoAjax = isVideoAjaxAvailable();
+		const isYibanEnv = import.meta.env.DEV
+			? hasYibanParams && forceYiban
+			: hasYibanParams;
+		const storageMode = isYibanEnv && hasVideoAjax ? "yiban" : "session";
+		const userStore = useUserStore.getState();
+
+		userStore.setYibanConnectionStatus(
+			storageMode === "yiban" ? "connected" : "disconnected",
+		);
+		if (courseId) userStore.setCourseId(courseId);
+		if (uid) userStore.setUserInfo({ userId: uid });
+
+		console.info(
+			storageMode === "yiban"
+				? "[yiban] initialized"
+				: "[yiban] use session storage fallback",
+			{
+				courseId,
+				uid,
+				isDev: import.meta.env.DEV,
+				forceYiban,
+				hasYibanParams,
+				hasVideoAjax,
+				storageMode,
+			},
+		);
+	}, []);
+
+	return (
+		<>
+			{isPortrait && <LandscapePrompt />}
+			<CourseCanvas
+				width={DESIGN_WIDTH}
+				height={DESIGN_HEIGHT}
+				className="bg-gray-900"
+				canvasClassName="flex flex-col overflow-hidden bg-white"
+			>
+				<CourseShell />
+			</CourseCanvas>
+		</>
 	);
 }