add

src/components/skill-example-content.tsx

@@ -0,0 +1,42 @@
+import { site } from "@/content/site";
+
+type Report = (typeof site.intelligentReport.reports)[number];
+
+type SkillExampleContentProps = {
+  report: Report;
+};
+
+/**
+ * 示例报告内容渲染 — 卡片弹窗与详情页「示例报告」tab 共用同一套结构与样式。
+ * 外层（overlay/dialog/footer）由各自调用方自行包裹。
+ */
+export function SkillExampleContent({ report }: SkillExampleContentProps) {
+  return (
+    <div className="report-example-content">
+      <header className="report-example-content__header flex flex-col gap-3">
+        <p className="type-mono-caps-label text-body">{report.audience}</p>
+        <h3 className="report-example-content__title type-display-lg text-balance text-ink">
+          {report.example.title}
+        </h3>
+        <p className="type-mono-caption text-body">{report.example.meta}</p>
+      </header>
+      <div className="report-example-content__body">
+        {report.example.sections.map((sec) => (
+          <section key={sec.heading} className="report-example-section">
+            <h4 className="type-caption-strong text-ink">{sec.heading}</h4>
+            {"body" in sec && sec.body ? (
+              <p className="type-body-md text-body">{sec.body}</p>
+            ) : null}
+            {"bullets" in sec && sec.bullets ? (
+              <ul className="report-example-list">
+                {sec.bullets.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
+            ) : null}
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}