feat: support multi payload generate

web/src/components/code-viewer.tsx

@@ -1,7 +1,6 @@
 import { Button, ButtonProps } from "@/components/ui/button.tsx";
-import { cn } from "@/lib/utils.ts";
 import { Check, Copy } from "lucide-react";
-import { HTMLProps, useEffect, useState } from "react";
+import { HTMLProps, ReactNode, useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { materialDark } from "react-syntax-highlighter/dist/esm/styles/prism";
@@ -31,15 +30,8 @@ export function CopyButton({ value, className, src, variant = "ghost", ...props
         toast.success("复制成功", { duration: 1000 });
       }}
     >
-      <Button
-        size="icon"
-        type="button"
-        variant={variant}
-        className={cn("relative z-10 h-8 w-8 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50", className)}
-        {...props}
-      >
-        <span className="sr-only">Copy</span>
-        {hasCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+      <Button variant="ghost" size="icon" type="button" className="h-7 w-7 [&_svg]:h-4 [&_svg]:w-4">
+        {hasCopied ? <Check /> : <Copy />}
       </Button>
     </CopyToClipboard>
   );
@@ -47,41 +39,57 @@ export function CopyButton({ value, className, src, variant = "ghost", ...props
 
 export function CodeViewer({
   code,
+  header,
   language,
+  height,
   showLineNumbers = true,
-  wrapLongLines = false,
-  height = 500,
-}: {
-  code: string;
-  language: string;
-  showLineNumbers?: boolean;
-  wrapLongLines?: boolean;
-  height?: number;
-}) {
+  wrapLongLines = true,
+}: CodeViewerProps) {
   const lineProps: lineTagPropsFunction | HTMLProps<HTMLElement> | undefined = wrapLongLines
     ? { style: { overflowWrap: "break-word", whiteSpace: "pre-wrap" } }
     : undefined;
   return (
-    <div className="relative overflow-hidden text-xs wrap-all">
-      <CopyButton value={code} className="absolute right-4 top-2" />
-      <SyntaxHighlighter
-        language={language}
-        style={materialDark}
-        showLineNumbers={showLineNumbers}
-        wrapLongLines={wrapLongLines}
-        lineProps={lineProps}
-        customStyle={{
-          margin: 0,
-          paddingRight: showLineNumbers ? 0 : 24,
-          paddingLeft: showLineNumbers ? 0 : 24,
-          borderRadius: "var(--radius)",
-          height: height,
-          whiteSpace: wrapLongLines ? "pre-wrap" : "pre",
-          overflowWrap: wrapLongLines ? "normal" : "break-word",
-        }}
-      >
-        {code}
-      </SyntaxHighlighter>
+    <div className="rounded-lg border">
+      {header && (
+        <div className="flex items-center justify-between border-b p-2">
+          {header}
+          <CopyButton value={code} variant="ghost" size="sm" />
+        </div>
+      )}
+      {!header && (
+        <div className="flex items-center justify-end border-b p-2">
+          <CopyButton value={code} variant="ghost" size="sm" />
+        </div>
+      )}
+      <div className="relative overflow-hidden text-xs wrap-all">
+        <SyntaxHighlighter
+          language={language}
+          style={materialDark}
+          showLineNumbers={showLineNumbers}
+          wrapLongLines={wrapLongLines}
+          lineProps={lineProps}
+          customStyle={{
+            margin: 0,
+            padding: showLineNumbers ? 0 : "1em 1em",
+            borderRadius: "0 0 var(--radius) var(--radius)",
+            height: height,
+            whiteSpace: wrapLongLines ? "pre-wrap" : "pre",
+            overflowWrap: wrapLongLines ? "normal" : "break-word",
+          }}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
     </div>
   );
 }
+
+interface CodeViewerProps {
+  code: string;
+  language: string;
+  header?: ReactNode;
+  height?: string | number;
+  showLineNumbers?: boolean;
+  wrapLongLines?: boolean;
+  lineProps?: (lineNumber: number) => React.HTMLProps<HTMLElement>;
+}