feat: 完善课程模板通用能力

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

src/course/interactions/guide-spotlight/DefaultGuideSpotlightPanel.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@/components/ui/button";
+import styles from "./GuideSpotlight.module.css";
+import type { GuideSpotlightRenderState } from "./GuideSpotlight.types";
+
+export interface DefaultGuideSpotlightPanelProps {
+	spotlight: GuideSpotlightRenderState;
+}
+
+export function DefaultGuideSpotlightPanel({
+	spotlight,
+}: DefaultGuideSpotlightPanelProps) {
+	const { step, progress, status, actions, labels } = spotlight;
+
+	return (
+		<>
+			{step.title && <h2 className={styles.title}>{step.title}</h2>}
+			{step.description && (
+				<div className={styles.description}>{step.description}</div>
+			)}
+
+			<div className={styles.footer}>
+				<span className={styles.counter}>
+					{progress.current} / {progress.total}
+				</span>
+				<div className={styles.actions}>
+					<Button variant="ghost" size="sm" onClick={actions.skip}>
+						{labels.skip}
+					</Button>
+					{!status.isFirst && (
+						<Button variant="secondary" size="sm" onClick={actions.prev}>
+							{labels.prev}
+						</Button>
+					)}
+					<Button size="sm" onClick={actions.primary}>
+						{labels.primary}
+					</Button>
+				</div>
+			</div>
+		</>
+	);
+}