feat: rebuild CSP practice workflow, UX and automation

frontend/src/app/api-docs/page.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useMemo } from "react";
+
+import { API_BASE } from "@/lib/api";
+
+const SwaggerUI = dynamic(() => import("swagger-ui-react"), { ssr: false });
+
+export default function ApiDocsPage() {
+  const specUrl = useMemo(() => `${API_BASE}/api/openapi.json`, []);
+
+  return (
+    <main className="mx-auto max-w-7xl px-6 py-6">
+      <h1 className="mb-4 text-2xl font-semibold">API 文档（Swagger）</h1>
+      <div className="rounded-xl border bg-white p-2">
+        <SwaggerUI url={specUrl} docExpansion="list" defaultModelsExpandDepth={1} />
+      </div>
+    </main>
+  );
+}