优化后台UI与开放文档排版设计

frontend/src/openapi/EndpointDoc.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { useState, type ReactNode } from 'react'
 import { Space, Table, Tag, Typography } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import type { EndpointSpec, ParamSpec } from './types'
@@ -53,17 +53,35 @@ function highlightJson(json: string): string {
   )
 }
 
-function JsonBlock({ code }: { code: string }) {
-  return <pre className="api-docs__code" dangerouslySetInnerHTML={{ __html: highlightJson(code) }} />
+function JsonBlock({ code, title = 'JSON Response' }: { code: string; title?: string }) {
+  const [copied, setCopied] = useState(false)
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
+  }
+  return (
+    <div className="doc-code-card">
+      <div className="doc-code-header">
+        <span className="doc-code-title">{title}</span>
+        <button className="doc-code-copy" type="button" onClick={handleCopy}>
+          {copied ? '已复制 ✓' : '复制 JSON'}
+        </button>
+      </div>
+      <pre className="api-docs__code" dangerouslySetInnerHTML={{ __html: highlightJson(code) }} />
+    </div>
+  )
 }
 
 function MethodPathBlock({ method, path }: { method: string; path: string }) {
   return (
-    <pre className="api-docs__endpoint-line">
-      <span className="api-docs__method" style={{ color: methodText[method] }}>{method}</span>
-      {' '}
-      <span className="api-docs__path">{path}</span>
-    </pre>
+    <div className="api-docs__endpoint-line">
+      <span className={`api-docs__method-badge api-docs__method-badge--${method.toLowerCase()}`}>
+        {method}
+      </span>
+      <span className="api-docs__path-text">{path}</span>
+    </div>
   )
 }