refactor: enhance web ux

web/src/components/code-viewer.tsx

@@ -1,6 +1,6 @@
 import { Button, ButtonProps } from "@/components/ui/button.tsx";
 import { cn } from "@/lib/utils.ts";
-import { CheckIcon, ClipboardIcon } from "lucide-react";
+import { Check, Copy } from "lucide-react";
 import { HTMLProps, useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -35,11 +35,11 @@ export function CopyButton({ value, className, src, variant = "ghost", ...props
         size="icon"
         type="button"
         variant={variant}
-        className={cn("relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50", className)}
+        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 ? <CheckIcon /> : <ClipboardIcon />}
+        {hasCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
       </Button>
     </CopyToClipboard>
   );
@@ -50,11 +50,13 @@ export function CodeViewer({
   language,
   showLineNumbers = true,
   wrapLongLines = false,
+  height = 500,
 }: {
   code: string;
   language: string;
   showLineNumbers?: boolean;
   wrapLongLines?: boolean;
+  height?: number;
 }) {
   const lineProps: lineTagPropsFunction | HTMLProps<HTMLElement> | undefined = wrapLongLines
     ? { style: { overflowWrap: "break-word", whiteSpace: "pre-wrap" } }
@@ -73,7 +75,7 @@ export function CodeViewer({
           paddingRight: showLineNumbers ? 0 : 24,
           paddingLeft: showLineNumbers ? 0 : 24,
           borderRadius: "var(--radius)",
-          height: 500,
+          height: height,
           whiteSpace: wrapLongLines ? "pre-wrap" : "pre",
           overflowWrap: wrapLongLines ? "normal" : "break-word",
         }}

web/src/components/copyable-field.tsx

@@ -8,10 +8,10 @@ import { toast } from "sonner";
 interface CopyableFieldProps {
   label: string;
   value?: string;
-  size?: number;
+  text?: string;
 }
 
-export function CopyableField({ label, value, size }: CopyableFieldProps) {
+export function CopyableField({ label, value, text }: CopyableFieldProps) {
   const [copied, setCopied] = useState(false);
 
   const copyToClipboard = useCallback(() => {
@@ -27,18 +27,18 @@ export function CopyableField({ label, value, size }: CopyableFieldProps) {
   }, [value, label]);
 
   return (
-    <div className="flex items-center justify-between">
+    <div className="flex items-center justify-between h-9">
       <div className="flex items-center space-x-2 text-sm">
-        <Label className="w-24 text-right">{label}：</Label>
-        <p>
-          {value} {size != null && `(${size} bytes)`}
-        </p>
+        <Label className="w-32 text-right">{label}：</Label>
+        <p>{text}</p>
       </div>
-      <CopyToClipboard text={value as string} onCopy={copyToClipboard}>
-        <Button variant="ghost" size="icon" type="button">
-          {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-        </Button>
-      </CopyToClipboard>
+      {value && (
+        <CopyToClipboard text={value as string} onCopy={copyToClipboard}>
+          <Button variant="ghost" size="icon" type="button">
+            {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+          </Button>
+        </CopyToClipboard>
+      )}
     </div>
   );
 }

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

@@ -1,15 +1,17 @@
 import { UrlPatternTip } from "@/components/tips/url-pattern-tip.tsx";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
 import { Input } from "@/components/ui/input.tsx";
 import { Label } from "@/components/ui/label.tsx";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.tsx";
-import { Separator } from "@/components/ui/separator.tsx";
 import { Switch } from "@/components/ui/switch.tsx";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { FormSchema } from "@/types/schema.ts";
 import { MainConfig } from "@/types/shell.ts";
-import { ServerIcon } from "lucide-react";
 
+import { JreTip } from "@/components/tips/jre-tip.tsx";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
+import { cn } from "@/lib/utils.ts";
+import { ArrowUpRightIcon, ServerIcon } from "lucide-react";
 import { useState } from "react";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 
@@ -32,14 +34,23 @@ export function MainConfigCard({
   servers?: string[];
 }) {
   const [shellToolMap, setShellToolMap] = useState<{ [toolName: string]: string[] }>();
-  const [shellTools, setShellTools] = useState<string[]>([]);
+  const [shellTools, setShellTools] = useState<string[]>(["Behinder", "Godzilla", "Command"]);
   const [shellTypes, setShellTypes] = useState<string[]>([]);
+  const shellTool = form.watch("shellTool");
 
   const handleServerChange = (value: string) => {
     if (mainConfig) {
-      setShellToolMap(mainConfig[value]);
-      setShellTools(Object.keys(mainConfig[value]));
-      setShellTypes([]);
+      const newShellToolMap = mainConfig[value];
+      setShellToolMap(newShellToolMap);
+      const newShellTools = Object.keys(newShellToolMap);
+      setShellTools(newShellTools);
+      if (newShellTools.length > 0) {
+        const firstTool = newShellTools[0];
+        setShellTypes(newShellToolMap[firstTool]);
+        form.setValue("shellTool", firstTool);
+      } else {
+        setShellTypes([]);
+      }
       form.resetField("shellTool");
       form.resetField("shellType");
     }
@@ -66,6 +77,9 @@ export function MainConfigCard({
     if (shellToolMap) {
       setShellTypes(shellToolMap[value]);
       form.resetField("urlPattern");
+      form.resetField("shellType");
+      form.resetField("shellClassName");
+      form.resetField("injectorClassName");
       if (value === "Godzilla") {
         resetGodzilla();
       } else if (value === "Behinder") {
@@ -74,17 +88,18 @@ export function MainConfigCard({
         resetCommand();
       }
     }
+    form.setValue("shellTool", value);
   };
 
   return (
-    <Card className="w-full">
-      <CardHeader className="pb-1">
-        <CardTitle className="text-md flex items-center gap-2">
-          <ServerIcon className="h-5" />
-          <span>核心配置</span>
-        </CardTitle>
-      </CardHeader>
-      <FormProvider {...form}>
+    <FormProvider {...form}>
+      <Card>
+        <CardHeader className="pb-1">
+          <CardTitle className="text-md flex items-center gap-2">
+            <ServerIcon className="h-5" />
+            <span>生成配置</span>
+          </CardTitle>
+        </CardHeader>
         <CardContent>
           <div className="grid grid-cols-2 gap-2">
             <FormField
@@ -113,6 +128,18 @@ export function MainConfigCard({
                       ))}
                     </SelectContent>
                   </Select>
+                  <FormDescription className="flex items-center">
+                    下拉列表找不到目标服务 ？
+                    <a
+                      href="https://github.com/ReaJason/MemShellParty/issues/new?template=%E8%AF%B7%E6%B1%82%E9%80%82%E9%85%8D.md"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="flex items-center underline"
+                    >
+                      请求适配
+                      <ArrowUpRightIcon className="h-4" />
+                    </a>
+                  </FormDescription>
                 </FormItem>
               )}
             />
@@ -120,8 +147,10 @@ export function MainConfigCard({
               control={form.control}
               name="targetJdkVersion"
               render={({ field }) => (
-                <FormItem className="space-y-1">
-                  <FormLabel>JRE(可选)</FormLabel>
+                <FormItem className="flex flex-col mt-1">
+                  <Label className="flex items-center">
+                    目标 JRE 版本(可选) <JreTip />
+                  </Label>
                   <Select
                     onValueChange={(v) => {
                       if (Number.parseInt(v) >= 53) {
@@ -150,7 +179,7 @@ export function MainConfigCard({
               )}
             />
           </div>
-          <div className="flex items-center space-x-4 mt-2">
+          <div className="flex gap-4 mt-4">
             <FormField
               control={form.control}
               name="debug"
@@ -171,234 +200,252 @@ export function MainConfigCard({
                   <FormControl>
                     <Switch id="bypassJavaModule" checked={field.value} onCheckedChange={field.onChange} />
                   </FormControl>
-                  <Label htmlFor="bypassJavaModule">bypassJavaModule</Label>
-                </FormItem>
-              )}
-            />
-            <div className="flex items-center space-x-2">
-              <Switch id="lambda" disabled />
-              <Label htmlFor="lambda">Lambda 类名 (WIP)</Label>
-            </div>
-            <div className="flex items-center space-x-2">
-              <Switch id="obfuscate" disabled />
-              <Label htmlFor="obfuscate">开启混淆 (WIP)</Label>
-            </div>
-          </div>
-          <Separator className="mt-4 mb-2" />
-          <FormField
-            control={form.control}
-            name="shellClassName"
-            render={({ field }) => (
-              <FormItem className="space-y-1">
-                <FormLabel>内存马类名（可选）</FormLabel>
-                <Input id="shellClassName" {...field} placeholder="请输入" className="h-8" />
-              </FormItem>
-            )}
-          />
-          <div className="grid grid-cols-3 gap-2 mt-2">
-            <FormField
-              control={form.control}
-              name="shellTool"
-              render={({ field }) => (
-                <FormItem className="space-y-1">
-                  <FormLabel>内存马工具类型</FormLabel>
-                  <Select
-                    value={field.value}
-                    onValueChange={(value: string) => {
-                      field.onChange(value);
-                      handleShellToolChange(value);
-                    }}
-                  >
-                    <FormControl>
-                      <SelectTrigger className="h-8">
-                        <SelectValue placeholder="请选择" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {shellTools.length ? (
-                        shellTools.map((v) => (
-                          <SelectItem key={v} value={v}>
-                            {v}
-                          </SelectItem>
-                        ))
-                      ) : (
-                        <SelectItem value=" ">请先选择目标服务</SelectItem>
-                      )}
-                    </SelectContent>
-                  </Select>
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="shellType"
-              render={({ field }) => (
-                <FormItem className="space-y-1">
-                  <FormLabel>内存马挂载类型</FormLabel>
-                  <Select onValueChange={field.onChange} value={field.value}>
-                    <FormControl>
-                      <SelectTrigger className="h-8">
-                        <SelectValue placeholder="请选择" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {shellTypes.length ? (
-                        shellTypes.map((v) => (
-                          <SelectItem key={v} value={v}>
-                            {v}
-                          </SelectItem>
-                        ))
-                      ) : (
-                        <SelectItem value=" ">请先选择内存马工具类型</SelectItem>
-                      )}
-                    </SelectContent>
-                  </Select>
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="urlPattern"
-              render={({ field }) => (
-                <FormItem className="flex flex-col mt-1">
-                  <Label className="flex items-center">
-                    请求路径 <UrlPatternTip />
-                  </Label>
-                  <Input {...field} placeholder="请输入" className="h-8" />
+                  <Label htmlFor="bypassJavaModule">绕过 Java 模块系统限制</Label>
                 </FormItem>
               )}
             />
           </div>
-          <div className="mt-2">
-            {form.getValues().shellTool === "Godzilla" && (
-              <div className="space-y-1">
-                <Label>Godzilla 配置</Label>
-                <div className="grid grid-cols-2 gap-2">
-                  <FormField
-                    control={form.control}
-                    name="godzillaPass"
-                    render={({ field }) => (
-                      <FormItem className="space-y-1 flex items-center justify-start">
-                        <Label className="text-xs whitespace-nowrap w-1/2">密码：</Label>
-                        <Input {...field} placeholder="Pass" className="h-8" />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="godzillaKey"
-                    render={({ field }) => (
-                      <FormItem className="space-y-1 flex items-center justify-start">
-                        <Label className="text-xs whitespace-nowrap w-1/2">密钥：</Label>
-                        <Input {...field} placeholder="Key" className="h-8" />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="godzillaHeaderName"
-                    render={({ field }) => (
-                      <FormItem className="space-y-1 flex items-center justify-start">
-                        <Label className="text-xs whitespace-nowrap w-1/2">请求头键：</Label>
-                        <Input {...field} placeholder="Header Name" className="h-8" />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="godzillaHeaderValue"
-                    render={({ field }) => (
-                      <FormItem className="space-y-1 flex items-center justify-start">
-                        <Label className="text-xs whitespace-nowrap w-1/2">请求头值：</Label>
-                        <Input {...field} placeholder="Header Value" className="h-8" />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-              </div>
-            )}
-            {form.getValues().shellTool === "Behinder" && (
-              <div className="space-y-1">
-                <Label>Behinder 配置</Label>
-                <div className="grid grid-cols-2 gap-2">
-                  <FormField
-                    control={form.control}
-                    name="behinderPass"
-                    render={({ field }) => (
-                      <FormItem className="space-y-1 flex items-center justify-start">
-                        <Label className="text-xs whitespace-nowrap w-1/2">密码：</Label>
-                        <Input {...field} placeholder="Pass" className="h-8" />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="behinderHeaderName"
-                    render={({ field }) => (
-                      <FormItem className="space-y-1 flex items-center justify-start">
-                        <Label className="text-xs whitespace-nowrap w-1/2">请求头键：</Label>
-                        <Input {...field} placeholder="Header Name" className="h-8" />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="behinderHeaderValue"
-                    render={({ field }) => (
-                      <FormItem className="space-y-1 flex items-center justify-start">
-                        <Label className="text-xs whitespace-nowrap w-1/2">请求头值：</Label>
-                        <Input {...field} placeholder="Header Value" className="h-8" />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-              </div>
-            )}
-            {form.getValues().shellTool === "Command" && (
+        </CardContent>
+      </Card>
+      <Tabs
+        value={shellTool}
+        onValueChange={(v) => {
+          handleShellToolChange(v);
+        }}
+        className="w-full"
+      >
+        <TabsList className={cn("grid w-full", `grid-cols-${shellTools.length}`)}>
+          {shellTools.map((shellTool) => (
+            <TabsTrigger key={shellTool} value={shellTool}>
+              {shellTool}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        <BehinderTabContent form={form} shellTypes={shellTypes} />
+        <GodzillaTabContent form={form} shellTypes={shellTypes} />
+        <CommandTabContent form={form} shellTypes={shellTypes} />
+      </Tabs>
+    </FormProvider>
+  );
+}
+
+function ShellTypeFormField({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  return (
+    <FormProvider {...form}>
+      <FormField
+        control={form.control}
+        name="shellType"
+        render={({ field }) => (
+          <FormItem className="space-y-1">
+            <FormLabel>内存马挂载类型</FormLabel>
+            <Select onValueChange={field.onChange} value={field.value}>
+              <FormControl>
+                <SelectTrigger className="h-8">
+                  <SelectValue placeholder="请选择" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent key={shellTypes.join(",")}>
+                {shellTypes.length ? (
+                  shellTypes.map((v) => (
+                    <SelectItem key={v} value={v}>
+                      {v}
+                    </SelectItem>
+                  ))
+                ) : (
+                  <SelectItem value=" ">请先选择内存马工具类型</SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+          </FormItem>
+        )}
+      />
+    </FormProvider>
+  );
+}
+
+function UrlPatternFormField({ form }: { form: UseFormReturn<FormSchema> }) {
+  return (
+    <FormProvider {...form}>
+      <FormField
+        control={form.control}
+        name="urlPattern"
+        render={({ field }) => (
+          <FormItem className="flex flex-col mt-1">
+            <Label className="flex items-center">
+              请求路径 <UrlPatternTip />
+            </Label>
+            <Input {...field} placeholder="请输入" className="h-8" />
+          </FormItem>
+        )}
+      />
+    </FormProvider>
+  );
+}
+
+function OptionalClassFormField({ form }: { form: UseFormReturn<FormSchema> }) {
+  return (
+    <FormProvider {...form}>
+      <FormField
+        control={form.control}
+        name="shellClassName"
+        render={({ field }) => (
+          <FormItem className="space-y-1">
+            <FormLabel>内存马类名（可选）</FormLabel>
+            <Input id="shellClassName" {...field} placeholder="请输入" className="h-8" />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="injectorClassName"
+        render={({ field }) => (
+          <FormItem className="space-y-1">
+            <FormLabel>注入器类名（可选）</FormLabel>
+            <Input id="injectorClassName" {...field} placeholder="请输入" className="h-8" />
+          </FormItem>
+        )}
+      />
+    </FormProvider>
+  );
+}
+
+function BehinderTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Behinder">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <FormField
+              control={form.control}
+              name="behinderPass"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel>连接密码</FormLabel>
+                  <Input {...field} placeholder="Pass" className="h-8" />
+                </FormItem>
+              )}
+            />
+            <div className="grid grid-cols-2 gap-2">
               <FormField
                 control={form.control}
-                name="commandParamName"
+                name="behinderHeaderName"
                 render={({ field }) => (
                   <FormItem className="space-y-1">
-                    <FormLabel>请求参数</FormLabel>
-                    <FormControl>
-                      <Input {...field} placeholder="请输入" className="h-8" />
-                    </FormControl>
-                    <FormDescription>填写接收命令的请求参数，例如填 cmd 即 `?cmd=whoami` 来执行命令</FormDescription>
+                    <FormLabel>请求头键</FormLabel>
+                    <Input {...field} placeholder="Header Name" className="h-8" />
                   </FormItem>
                 )}
               />
-            )}
-          </div>
-          <Separator className="mt-4 mb-2" />
-          <FormField
-            control={form.control}
-            name="injectorClassName"
-            render={({ field }) => (
-              <FormItem className="space-y-1">
-                <FormLabel>注入器类名（可选）</FormLabel>
-                <Input id="injectorClassName" {...field} placeholder="请输入" className="h-8" />
-              </FormItem>
-            )}
-          />
-          <div className="space-y-1 mt-2">
-            <Label htmlFor="interface" className="flex items-center gap-2">
-              注入器类继承（可选）(WIP)
-            </Label>
-            <Select disabled>
-              <SelectTrigger id="interface" className="h-8">
-                <SelectValue placeholder="请选择" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="JDK_AbstractTranslet">JDK_AbstractTranslet</SelectItem>
-                <SelectItem value="XALAN_AbstractTranslet">XALAN_AbstractTranslet</SelectItem>
-                <SelectItem value="FASTJSON_GroovyASTTransformation">FASTJSON_GroovyASTTransformation</SelectItem>
-                <SelectItem value="SnakeYaml_ScriptEngineFactory">SnakeYaml_ScriptEngineFactory</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </CardContent>
-      </FormProvider>
-    </Card>
+              <FormField
+                control={form.control}
+                name="behinderHeaderValue"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>请求头值</FormLabel>
+                    <Input {...field} placeholder="Header Value" className="h-8" />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}
+
+function GodzillaTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Godzilla">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="godzillaPass"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>密码</FormLabel>
+                    <Input {...field} placeholder="Pass" className="h-8" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="godzillaKey"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>密钥</FormLabel>
+                    <Input {...field} placeholder="Key" className="h-8" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="godzillaHeaderName"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>请求头键</FormLabel>
+                    <Input {...field} placeholder="Header Name" className="h-8" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="godzillaHeaderValue"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>请求头值</FormLabel>
+                    <Input {...field} placeholder="Header Value" className="h-8" />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}
+
+function CommandTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Command">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <FormField
+              control={form.control}
+              name="commandParamName"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel>请求参数</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="请输入" className="h-8" />
+                  </FormControl>
+                  <FormDescription>填写接收命令的请求参数，例如填 cmd 即 `?cmd=whoami` 来执行命令</FormDescription>
+                </FormItem>
+              )}
+            />
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
   );
 }

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

@@ -4,6 +4,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group.tsx";
 import { FormSchema } from "@/types/schema.ts";
 import { PackerConfig } from "@/types/shell.ts";
 import { PackageIcon } from "lucide-react";
+import { useEffect, useState } from "react";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 
 export function PackageConfigCard({
@@ -13,6 +14,26 @@ export function PackageConfigCard({
   packerConfig: PackerConfig | undefined;
   form: UseFormReturn<FormSchema>;
 }) {
+  const [options, setOptions] = useState<Array<Array<string>>>([]);
+
+  const shellType = form.watch("shellType");
+
+  useEffect(() => {
+    const filteredOptions = Object.entries(packerConfig ?? {}).filter(([name, _]) => {
+      if (!shellType || shellType === " ") {
+        return true;
+      }
+      if (shellType.startsWith("Agent")) {
+        return name.startsWith("Agent");
+      }
+      return !name.startsWith("Agent");
+    });
+    setOptions(filteredOptions);
+    if (filteredOptions.length > 0) {
+      form.setValue("packingMethod", filteredOptions[0][0]);
+    }
+  }, [form, packerConfig, shellType]); // Add shellType to the dependency array
+
   return (
     <Card className="w-full">
       <CardHeader className="pb-1">
@@ -30,8 +51,8 @@ export function PackageConfigCard({
               <FormItem className="space-y-3">
                 <FormLabel>打包方式</FormLabel>
                 <FormControl>
-                  <RadioGroup onValueChange={field.onChange} defaultValue={field.value} className="grid grid-cols-3">
-                    {Object.entries(packerConfig ?? {}).map(([name, value]) => (
+                  <RadioGroup onValueChange={field.onChange} value={field.value} className="grid grid-cols-3">
+                    {options.map(([name, value]) => (
                       <FormItem key={value} className="flex items-center space-x-3 space-y-0">
                         <FormControl>
                           <RadioGroupItem value={value} id={value} />

web/src/components/quick-usage.tsx

@@ -0,0 +1,20 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
+
+export function QuickUsage() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>快速使用</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ol className="list-decimal list-inside space-y-4 text-sm">
+          <li>选择目标服务</li>
+          <li>选择内存马功能，Godzilla、Behinder 或者其他</li>
+          <li>选择内存马挂载类型，Filter、Listener 或者其他</li>
+          <li>选择打包方式</li>
+          <li>点击生成内存马</li>
+        </ol>
+      </CardContent>
+    </Card>
+  );
+}

web/src/components/shell-result.tsx

@@ -1,57 +1,194 @@
 import { CodeViewer } from "@/components/code-viewer.tsx";
 import { CopyableField } from "@/components/copyable-field.tsx";
+import { QuickUsage } from "@/components/quick-usage.tsx";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 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";
-import { Label } from "@/components/ui/label.tsx";
 import { Separator } from "@/components/ui/separator.tsx";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs.tsx";
 import { downloadBytes } from "@/lib/utils.ts";
-import { GenerateResult } from "@/types/shell.ts";
-import { TicketsIcon, TriangleAlertIcon } from "lucide-react";
+import {
+  BehinderShellToolConfig,
+  CommandShellToolConfig,
+  GenerateResult,
+  GodzillaShellToolConfig,
+} from "@/types/shell.ts";
+import { CircleHelpIcon, TriangleAlertIcon } from "lucide-react";
+import { Fragment } from "react";
 
 function AgentResult({ packResult, generateResult }: { packResult: string; generateResult?: GenerateResult }) {
   return (
-    <section>
-      <ol className="list-decimal list-inside space-y-4">
-        <li className="flex items-center justify-between">
-          <span>下载 MemShellAgent.jar</span>
-          <Button
-            size="sm"
-            variant="outline"
-            className="w-28"
-            type="button"
+    <Card>
+      <CardHeader>
+        <CardTitle>使用方法</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ol className="list-decimal list-inside space-y-4 text-sm">
+          <li className="flex items-center justify-between">
+            <span>下载 MemShellAgent.jar</span>
+            <Button
+              size="sm"
+              variant="outline"
+              className="w-28"
+              type="button"
+              onClick={() =>
+                downloadBytes(
+                  packResult,
+                  undefined,
+                  `${generateResult?.shellConfig.server}${generateResult?.shellConfig.shellTool}MemShellAgent`,
+                )
+              }
+            >
+              下载 Jar
+            </Button>
+          </li>
+          <li className="flex items-center justify-between">
+            <span>下载 Jattach 工具（后期考虑直接封装在 Jar 中）</span>
+            <Button
+              size="sm"
+              variant="outline"
+              className="w-28"
+              type="button"
+              onClick={() => window.open("https://github.com/jattach/jattach/releases")}
+            >
+              下载 Jattach
+            </Button>
+          </li>
+          <Separator />
+          <li>将 MemShellAgent.jar 和 jattach 移动到容器中（如果测试环境使用容器部署）</li>
+          <li>获取目标 jvm 的进程 pid （使用 jps 或 ps）</li>
+          <li>执行命令进行注入：/path/to/jattach pid load instrument false /path/to/agent.jar</li>
+          <li>尝试利用内存马</li>
+        </ol>
+      </CardContent>
+    </Card>
+  );
+}
+
+function FeedbackAlert() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline" type="button">
+          <CircleHelpIcon /> 内存马利用失败 ？
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>内存马利用失败 ？</AlertDialogTitle>
+          <AlertDialogDescription>
+            <ol>
+              <li>1. 尝试开启调试模式，重新生成内存马并注入，查看控制台或日志</li>
+              <li>2. 如果出现异常堆栈信息，或未见异常，请截图当前生成界面以及异常日志，并尽可能描述目标环境进行反馈</li>
+            </ol>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction
             onClick={() =>
-              downloadBytes(
-                packResult,
-                undefined,
-                `${generateResult?.shellConfig.server}${generateResult?.shellConfig.shellTool}MemShellAgent`,
+              window.open(
+                "https://github.com/ReaJason/MemShellParty/issues/new?template=%E5%86%85%E5%AD%98%E9%A9%AC%E7%94%9F%E6%88%90-bug-%E4%B8%8A%E6%8A%A5.md",
               )
             }
           >
-            下载 Jar
-          </Button>
-        </li>
-        <li className="flex items-center justify-between">
-          <span>下载 Jattach 工具（后期考虑直接封装在 Jar 中）</span>
-          <Button
-            size="sm"
-            variant="outline"
-            className="w-28"
-            type="button"
-            onClick={() => window.open("https://github.com/jattach/jattach/releases")}
-          >
-            下载 Jattach
-          </Button>
-        </li>
-        <Separator />
-        <h2 className="text-2xl font-bold mb-4">使用方法：</h2>
-        <li>将 MemShellAgent.jar 和 jattach 移动到容器中（如果测试环境使用容器部署）</li>
-        <li>获取目标 jvm 的进程 pid （使用 jps 或 ps）</li>
-        <li>执行命令进行注入：/path/to/jattach pid load instrument false /path/to/agent.jar</li>
-        <li>尝试连接测试</li>
-      </ol>
-    </section>
+            反馈
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function BasicInfo({ generateResult }: { generateResult?: GenerateResult }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          基础信息
+          <FeedbackAlert />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2">
+          <CopyableField label="目标服务" text={generateResult?.shellConfig.server} />
+          <CopyableField label="内存马功能" text={generateResult?.shellConfig.shellTool} />
+        </div>
+        <CopyableField label="内存马挂载类型" text={generateResult?.shellConfig.shellType} />
+        <CopyableField
+          label="请求路径"
+          text={generateResult?.injectorConfig.urlPattern}
+          value={generateResult?.injectorConfig.urlPattern}
+        />
+        {generateResult?.shellConfig.shellTool === "Behinder" && (
+          <Fragment>
+            <CopyableField label="脚本类型" text="jsp" />
+            <CopyableField label="加密类型" text="默认" />
+            <CopyableField
+              label="连接密码"
+              text={(generateResult?.shellToolConfig as BehinderShellToolConfig).pass}
+              value={(generateResult?.shellToolConfig as BehinderShellToolConfig).pass}
+            />
+            <CopyableField
+              label="自定义请求头"
+              text={`${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerValue}`}
+              value={`${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerValue}`}
+            />
+          </Fragment>
+        )}
+        {generateResult?.shellConfig.shellTool === "Godzilla" && (
+          <Fragment>
+            <CopyableField
+              label="密码"
+              text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
+              value={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
+            />
+            <CopyableField
+              label="密钥"
+              text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).key}
+              value={(generateResult?.shellToolConfig as GodzillaShellToolConfig).key}
+            />
+            <CopyableField label="有效载荷" text="JavaDynamicPayload" />
+            <CopyableField label="加密器" text="JAVA_AES_BASE64" />
+            <CopyableField
+              label="请求配置 -> 请求头"
+              text={`${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerValue}`}
+              value={`${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerValue}`}
+            />
+          </Fragment>
+        )}
+        {generateResult?.shellConfig.shellTool === "Command" && (
+          <Fragment>
+            <CopyableField
+              label="接收命令请求参数"
+              text={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
+              value={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
+            />
+          </Fragment>
+        )}
+        <CopyableField
+          label="注入器类名"
+          value={generateResult?.injectorClassName}
+          text={`${generateResult?.injectorClassName} (${generateResult?.injectorSize} bytes)`}
+        />
+        <CopyableField
+          label="内存马类名"
+          value={generateResult?.shellClassName}
+          text={`${generateResult?.shellClassName} (${generateResult?.shellSize} bytes)`}
+        />
+      </CardContent>
+    </Card>
   );
 }
 
@@ -63,125 +200,80 @@ export function ShellResult({
   const showCode = packMethod === "JSP";
   const isAgent = packMethod.startsWith("Agent");
   return (
-    <Card className="h-full">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-md flex items-center gap-2">
-          <TicketsIcon className="h-5" />
-          FBI
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Tabs defaultValue="packResult">
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="packResult">打包结果</TabsTrigger>
-            <TabsTrigger value="shell">内存马类</TabsTrigger>
-            <TabsTrigger value="injector">注入器类</TabsTrigger>
-          </TabsList>
-          <TabsContent value="packResult" className="mt-4">
-            {generateResult && !isAgent && (
-              <div className="gap-4 my-2">
-                <CopyableField
-                  label="注入器类名"
-                  value={generateResult?.injectorClassName}
-                  size={generateResult?.injectorSize}
-                />
-                <CopyableField
-                  label="内存马类名"
-                  value={generateResult?.shellClassName}
-                  size={generateResult?.shellSize}
-                />
-              </div>
-            )}
-            {!isAgent && (
-              <CodeViewer
-                code={packResult}
-                wrapLongLines={!showCode}
-                showLineNumbers={showCode}
-                language={showCode ? "java" : "text"}
-              />
-            )}
-            {isAgent && <AgentResult packResult={packResult} generateResult={generateResult} />}
-          </TabsContent>
-          <TabsContent value="shell" className="mt-4">
-            <Alert>
-              <TriangleAlertIcon className="h-4 w-4" />
-              <AlertTitle>Warning</AlertTitle>
-              <AlertDescription>反编译还在开发中，因此当前仅能看到 base64 编码格式</AlertDescription>
-            </Alert>
-            <div className="gap-4 my-2 flex items-center justify-between">
-              {generateResult && (
-                <div>
-                  <div className="flex items-center text-sm">
-                    <Label>内存马类名：</Label>
-                    <p>{generateResult?.shellClassName}</p>
-                  </div>
-                  <div className="flex items-center text-sm">
-                    <Label>内存马字节码大小：</Label>
-                    <p>{generateResult?.shellSize ?? 0} bytes</p>
-                  </div>
-                </div>
-              )}
-              {generateResult && (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className="w-28"
-                  type="button"
-                  onClick={() => downloadBytes(generateResult?.shellBytesBase64Str, generateResult?.shellClassName)}
-                >
-                  下载 Class
-                </Button>
-              )}
-            </div>
-            <CodeViewer
-              showLineNumbers={false}
-              wrapLongLines={true}
-              code={generateResult?.shellBytesBase64Str ?? ""}
-              language="text"
-            />
-          </TabsContent>
-          <TabsContent value="injector" className="mt-4">
-            <Alert>
-              <TriangleAlertIcon className="h-4 w-4" />
-              <AlertTitle>Warning</AlertTitle>
-              <AlertDescription>反编译还在开发中，因此当前仅能看到 base64 编码格式</AlertDescription>
-            </Alert>
-            <div className="gap-4 my-2 flex items-center justify-between">
-              {generateResult && (
-                <div>
-                  <div className="flex items-center text-sm">
-                    <Label>注入器类名：</Label>
-                    <p>{generateResult?.injectorClassName}</p>
-                  </div>
-                  <div className="flex items-center text-sm">
-                    <Label>注入器字节码大小：</Label>
-                    <p>{generateResult?.injectorSize ?? 0} bytes</p>
-                  </div>
-                </div>
-              )}
-              {generateResult && (
-                <Button
-                  size="sm"
-                  className="w-28"
-                  variant="outline"
-                  type="button"
-                  onClick={() =>
-                    downloadBytes(generateResult?.injectorBytesBase64Str, generateResult?.injectorClassName)
-                  }
-                >
-                  下载 Class
-                </Button>
-              )}
-            </div>
-            <CodeViewer
-              showLineNumbers={false}
-              wrapLongLines={true}
-              code={generateResult?.injectorBytesBase64Str ?? ""}
-              language="text"
-            />
-          </TabsContent>
-        </Tabs>
-      </CardContent>
-    </Card>
+    <Tabs defaultValue="packResult">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="packResult">打包结果</TabsTrigger>
+        <TabsTrigger value="shell">内存马类</TabsTrigger>
+        <TabsTrigger value="injector">注入器类</TabsTrigger>
+      </TabsList>
+      <TabsContent value="packResult" className="my-4">
+        <div className="mb-4">
+          {generateResult && <BasicInfo generateResult={generateResult} />}
+          {!generateResult && <QuickUsage />}
+        </div>
+        {!isAgent && (
+          <CodeViewer
+            code={packResult}
+            wrapLongLines={!showCode}
+            showLineNumbers={showCode}
+            language={showCode ? "java" : "text"}
+            height={400}
+          />
+        )}
+        {isAgent && <AgentResult packResult={packResult} generateResult={generateResult} />}
+      </TabsContent>
+      <TabsContent value="shell" className="mt-4">
+        <Alert>
+          <TriangleAlertIcon className="h-4 w-4" />
+          <AlertTitle>Warning</AlertTitle>
+          <AlertDescription>反编译还在开发中，因此当前仅能看到 base64 编码格式</AlertDescription>
+        </Alert>
+        <div className="gap-4 my-2 flex items-center justify-end">
+          {generateResult && (
+            <Button
+              size="sm"
+              variant="outline"
+              className="w-28"
+              type="button"
+              onClick={() => downloadBytes(generateResult?.shellBytesBase64Str, generateResult?.shellClassName)}
+            >
+              下载 Class
+            </Button>
+          )}
+        </div>
+        <CodeViewer
+          showLineNumbers={false}
+          wrapLongLines={true}
+          code={generateResult?.shellBytesBase64Str ?? ""}
+          language="text"
+        />
+      </TabsContent>
+      <TabsContent value="injector" className="mt-4">
+        <Alert>
+          <TriangleAlertIcon className="h-4 w-4" />
+          <AlertTitle>Warning</AlertTitle>
+          <AlertDescription>反编译还在开发中，因此当前仅能看到 base64 编码格式</AlertDescription>
+        </Alert>
+        <div className="gap-4 my-2 flex items-center justify-end">
+          {generateResult && (
+            <Button
+              size="sm"
+              className="w-28"
+              variant="outline"
+              type="button"
+              onClick={() => downloadBytes(generateResult?.injectorBytesBase64Str, generateResult?.injectorClassName)}
+            >
+              下载 Class
+            </Button>
+          )}
+        </div>
+        <CodeViewer
+          showLineNumbers={false}
+          wrapLongLines={true}
+          code={generateResult?.injectorBytesBase64Str ?? ""}
+          language="text"
+        />
+      </TabsContent>
+    </Tabs>
   );
 }

web/src/components/tips/jre-tip.tsx

@@ -1,15 +1,15 @@
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip.tsx";
 import { InfoIcon } from "lucide-react";
 
-export function JRETip() {
+export function JreTip() {
   return (
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <InfoIcon className="cursor-pointer h-3" />
+          <InfoIcon className="cursor-pointer h-4" />
         </TooltipTrigger>
         <TooltipContent>
-          <p>目标 JRE 版本，一般而言为了最大的兼容性，默认 Java 6 即可。</p>
+          <p>目标 JRE 版本，一般而言为了最大的兼容性，默认 Java 6 即可，Java 高版本能加载低版本的字节码。</p>
           <p>特定情况下，例如 JDK8 才能使用 lambda 表达式，JDK9 以上存在模块限制时才需要选择特定的版本。</p>
         </TooltipContent>
       </Tooltip>