feat: 模板适配层、易班能力与全局状态

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

src/components/common/GuideSpotlight/GuideSpotlight.tsx

@@ -0,0 +1,62 @@
+import { useCallback } from "react";
+import {
+	type GuideSpotlightProps,
+	GuideSpotlight as RegistryGuideSpotlight,
+} from "@/components/course-interactions/guide-spotlight";
+import { useCourseCanvas } from "@/course-runtime/canvas";
+import { useSpotlightStore } from "@/stores";
+import { getAppPortalRoot } from "../canvasPortal";
+
+export function GuideSpotlight({
+	children,
+	onFinish,
+	onSkip,
+	container = getAppPortalRoot,
+	viewport,
+	...props
+}: Omit<GuideSpotlightProps, "actions" | "state"> & {
+	onFinish?: () => void;
+	onSkip?: () => void;
+}) {
+	const {
+		open,
+		steps,
+		current,
+		nextStep,
+		prevStep,
+		finishSpotlight,
+		skipSpotlight,
+	} = useSpotlightStore();
+	const { viewport: canvasViewport } = useCourseCanvas();
+
+	const finish = useCallback(() => {
+		finishSpotlight();
+		onFinish?.();
+	}, [finishSpotlight, onFinish]);
+
+	const skip = useCallback(() => {
+		skipSpotlight();
+		onSkip?.();
+	}, [onSkip, skipSpotlight]);
+
+	return (
+		<RegistryGuideSpotlight
+			state={{
+				open,
+				steps,
+				current,
+			}}
+			actions={{
+				next: nextStep,
+				prev: prevStep,
+				skip,
+				finish,
+			}}
+			container={container}
+			viewport={viewport ?? canvasViewport}
+			{...props}
+		>
+			{children}
+		</RegistryGuideSpotlight>
+	);
+}