feat: add copy button for className

web/src/components/code-viewer.tsx

@@ -31,10 +31,7 @@ export function CopyButton({ value, className, src, variant = "ghost", ...props
       size="icon"
       type="button"
       variant={variant}
-      className={cn(
+      className={cn("relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50", className)}
-        "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3",
-        className,
-      )}
       onClick={() => {
         copyToClipboardWithMeta(value);
         setHasCopied(true);

web/src/components/copyable-field.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Check, Copy } from "lucide-react";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+
+interface CopyableFieldProps {
+  label: string;
+  value?: string;
+  size?: number;
+}
+
+export function CopyableField({ label, value, size }: CopyableFieldProps) {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = useCallback(() => {
+    if (typeof value === "string") {
+      navigator.clipboard.writeText(value).then(() => {
+        setCopied(true);
+        toast.success(`复制${label}成功`);
+        setTimeout(() => setCopied(false), 2000);
+      });
+    }
+  }, [value, label]);
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center space-x-2">
+        <Label className="w-24 text-right">{label}：</Label>
+        <p>
+          {value} {size != null && `(${size} bytes)`}
+        </p>
+      </div>
+      <Button variant="ghost" size="icon" type="button" onClick={copyToClipboard}>
+        {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+      </Button>
+    </div>
+  );
+}

web/src/components/main-config-card.tsx

@@ -34,6 +34,47 @@ export function MainConfigCard({
   const [shellTools, setShellTools] = useState<string[]>([]);
   const [shellTypes, setShellTypes] = useState<string[]>([]);
 
+  const handleServerChange = (value: string) => {
+    if (mainConfig) {
+      setShellToolMap(mainConfig[value]);
+      setShellTools(Object.keys(mainConfig[value]));
+      setShellTypes([]);
+      form.resetField("shellTool");
+      form.resetField("shellType");
+    }
+  };
+
+  const handleShellToolChange = (value: string) => {
+    const resetCommand = () => {
+      form.resetField("commandParamName");
+    };
+
+    const resetGodzilla = () => {
+      form.resetField("godzillaKey");
+      form.resetField("godzillaPass");
+      form.resetField("godzillaHeaderName");
+      form.resetField("godzillaHeaderValue");
+    };
+
+    const resetBehinder = () => {
+      form.resetField("behinderPass");
+      form.resetField("behinderHeaderName");
+      form.resetField("behinderHeaderValue");
+    };
+
+    if (shellToolMap) {
+      setShellTypes(shellToolMap[value]);
+      form.resetField("urlPattern");
+      if (value === "Godzilla") {
+        resetGodzilla();
+      } else if (value === "Behinder") {
+        resetBehinder();
+      } else if (value === "Command") {
+        resetCommand();
+      }
+    }
+  };
+
   return (
     <Card className="w-full">
       <CardHeader className="pb-1">
@@ -54,11 +95,7 @@ export function MainConfigCard({
                   <Select
                     onValueChange={(v) => {
                       field.onChange(v);
-                      if (mainConfig) {
+                      handleServerChange(v);
-                        setShellToolMap(mainConfig[v]);
-                        setShellTools(Object.keys(mainConfig[v]));
-                        setShellTypes([]);
-                      }
                     }}
                     value={field.value}
                   >
@@ -158,9 +195,7 @@ export function MainConfigCard({
                     value={field.value}
                     onValueChange={(value: string) => {
                       field.onChange(value);
-                      if (shellToolMap) {
+                      handleShellToolChange(value);
-                        setShellTypes(shellToolMap[value]);
-                      }
                     }}
                   >
                     <FormControl>

web/src/components/shell-result.tsx

@@ -1,4 +1,5 @@
 import { CodeViewer } from "@/components/code-viewer.tsx";
+import { CopyableField } from "@/components/copyable-field.tsx";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
 import { Button } from "@/components/ui/button.tsx";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
@@ -30,20 +31,20 @@ export function ShellResult({
             <TabsTrigger value="injector">注入器类</TabsTrigger>
           </TabsList>
           <TabsContent value="packResult" className="mt-4">
+            {generateResult && (
               <div className="gap-4 my-2">
-              <div className="flex items-center">
+                <CopyableField
-                <Label>注入器类名：</Label>
+                  label="注入器类名"
-                <p>
+                  value={generateResult?.injectorClassName}
-                  {generateResult?.injectorClassName} ({generateResult?.injectorSize ?? 0} bytes)
+                  size={generateResult?.injectorSize}
-                </p>
+                />
-              </div>
+                <CopyableField
-              <div className="flex items-center">
+                  label="内存马类名"
-                <Label>内存马类名：</Label>
+                  value={generateResult?.shellClassName}
-                <p>
+                  size={generateResult?.shellSize}
-                  {generateResult?.shellClassName} ({generateResult?.shellSize ?? 0} bytes)
+                />
-                </p>
-              </div>
               </div>
+            )}
             <CodeViewer
               code={packResult}
               wrapLongLines={!showCode}
@@ -58,6 +59,7 @@ export function ShellResult({
               <AlertDescription>反编译还在开发中，因此当前仅能看到 base64 编码格式</AlertDescription>
             </Alert>
             <div className="gap-4 my-2 flex items-center justify-between">
+              {generateResult && (
                 <div>
                   <div className="flex items-center">
                     <Label>内存马类名：</Label>
@@ -68,6 +70,7 @@ export function ShellResult({
                     <p>{generateResult?.shellSize ?? 0} bytes</p>
                   </div>
                 </div>
+              )}
               <Button
                 size="sm"
                 className="h-8 gap-1"
@@ -91,6 +94,7 @@ export function ShellResult({
               <AlertDescription>反编译还在开发中，因此当前仅能看到 base64 编码格式</AlertDescription>
             </Alert>
             <div className="gap-4 my-2 flex items-center justify-between">
+              {generateResult && (
                 <div>
                   <div className="flex items-center">
                     <Label>注入器类名：</Label>
@@ -101,6 +105,7 @@ export function ShellResult({
                     <p>{generateResult?.injectorSize ?? 0} bytes</p>
                   </div>
                 </div>
+              )}
               <Button
                 size="sm"
                 className="h-8 gap-1"

web/src/routes/index.tsx

@@ -114,7 +114,7 @@ function IndexComponent() {
           </Alert>
         )}
 
-        {data && (
+        {!isError && data && (
           <Alert>
             <ActivityIcon className="h-4 w-4" />
             <AlertTitle>It Work!</AlertTitle>