feat: 代码片段功能与 Markdown 内嵌片段渲染、文档截图等

frontend/components/SnippetCommentCountChip.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
+
+export function snippetCommentCountEvent(snippetId: number) {
+  return `j13:snippet:${snippetId}:comment-count`;
+}
+
+/**
+ * 片段详情顶部的评论计数 chip：
+ * 初始值来自 SSR，评论区增删后通过 window CustomEvent 同步。
+ */
+export default function SnippetCommentCountChip({
+  snippetId,
+  initial,
+  icon,
+  label,
+}: {
+  snippetId: number;
+  initial: number;
+  icon: ReactNode;
+  label: string;
+}) {
+  const [count, setCount] = useState(initial);
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const next = (e as CustomEvent<number>).detail;
+      if (typeof next === "number") setCount(next);
+    };
+    const name = snippetCommentCountEvent(snippetId);
+    window.addEventListener(name, handler);
+    return () => window.removeEventListener(name, handler);
+  }, [snippetId]);
+
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 h-7 px-2.5 rounded-full text-[11.5px] tabular-nums"
+      style={{ background: "var(--panel-2)", color: "var(--ink-3)", border: "1px solid var(--line)" }}
+      title={`${count} ${label}`}
+    >
+      <span style={{ color: "var(--ink-3)" }}>{icon}</span>
+      {count}
+      <span className="hidden sm:inline">{label}</span>
+    </span>
+  );
+}