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

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

src/course/interactions/guide-dialog/GuideDialog.module.css

@@ -0,0 +1,101 @@
+@reference "tailwindcss";
+
+.mask {
+	@apply pointer-events-auto absolute inset-0 block h-full w-full border-0 p-0;
+	animation: dialog-fade-in 220ms ease-out both;
+}
+
+.panelContainer {
+	@apply pointer-events-auto absolute;
+	animation: dialog-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
+	transition:
+		left 260ms cubic-bezier(0.16, 1, 0.3, 1),
+		top 260ms cubic-bezier(0.16, 1, 0.3, 1),
+		transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
+		opacity 180ms ease;
+	will-change: left, top, transform, opacity;
+}
+
+.panel {
+	@apply pointer-events-auto absolute w-[520px] rounded-3xl bg-white p-6 text-gray-900 shadow-2xl;
+	animation: dialog-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
+	transition:
+		left 260ms cubic-bezier(0.16, 1, 0.3, 1),
+		top 260ms cubic-bezier(0.16, 1, 0.3, 1),
+		transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
+		opacity 180ms ease;
+	will-change: left, top, transform, opacity;
+}
+
+.measurePanel {
+	left: -9999px;
+	top: -9999px;
+	visibility: hidden;
+	animation: none;
+	pointer-events: none;
+}
+
+.character {
+	@apply mb-4 flex items-center gap-3;
+}
+
+.avatar {
+	@apply flex h-14 w-14 items-center justify-center rounded-full bg-blue-100 text-3xl;
+}
+
+.name {
+	@apply text-sm font-semibold text-blue-600;
+}
+
+.title {
+	@apply text-2xl font-bold;
+}
+
+.description {
+	@apply mt-3 text-base leading-7 text-gray-600;
+}
+
+.options {
+	@apply mt-5 grid gap-2;
+}
+
+.footer {
+	@apply mt-6 flex items-center justify-between gap-3;
+}
+
+.counter {
+	@apply text-xs text-gray-400;
+}
+
+.actions {
+	@apply flex items-center gap-2;
+}
+
+@keyframes dialog-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes dialog-panel-in {
+	from {
+		opacity: 0;
+		transform: translate3d(0, 12px, 0) scale(0.98);
+	}
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0) scale(1);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.mask,
+	.panel,
+	.panelContainer {
+		animation: none;
+		transition: none;
+	}
+}