's'

app/topic/components/TopicBreadcrumb.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import Link from "next/link";
+import { getTopicConfig } from "../config";
+
+type TopicBreadcrumbProps = {
+  topicId: string;
+};
+
+export function TopicBreadcrumb({ topicId }: TopicBreadcrumbProps) {
+  const config = getTopicConfig(topicId);
+  if (!config) return null;
+
+  return (
+    <nav
+      className="mb-6 flex flex-wrap items-center gap-2 text-sm text-[var(--muted-foreground)]"
+      aria-label="面包屑"
+    >
+      <Link href="/" className="transition hover:text-[var(--foreground)]">
+        首页
+      </Link>
+      <span>/</span>
+      <Link href="/#topics" className="transition hover:text-[var(--foreground)]">
+        模块
+      </Link>
+      <span>/</span>
+      <span className="text-[var(--foreground)] font-medium">{config.title}</span>
+    </nav>
+  );
+}