refactor: enhance web ux

web/package.json

@@ -13,21 +13,21 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@tanstack/router-plugin": "^1.93.0",
+    "@tanstack/router-plugin": "^1.97.1",
-    "@types/node": "^22.10.3",
+    "@types/node": "^22.10.7",
-    "@types/react": "^19.0.2",
+    "@types/react": "^19.0.7",
-    "@types/react-dom": "^19.0.2",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
-    "vite": "^6.0.6"
+    "vite": "^6.0.7"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.1",
+    "@hookform/resolvers": "^3.10.0",
     "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
@@ -39,19 +39,19 @@
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
-    "@tanstack/react-query": "^5.62.11",
+    "@tanstack/react-query": "^5.64.1",
-    "@tanstack/react-router": "^1.93.0",
+    "@tanstack/react-router": "^1.97.1",
-    "@tanstack/router-devtools": "^1.93.0",
+    "@tanstack/router-devtools": "^1.97.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.469.0",
+    "lucide-react": "^0.473.0",
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-syntax-highlighter": "^15.6.1",
-    "sonner": "^1.7.1",
+    "sonner": "^1.7.2",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.24.1"

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>
+        <Label className="w-32 text-right">{label}：</Label>
-        <p>
+        <p>{text}</p>
-          {value} {size != null && `(${size} bytes)`}
-        </p>
       </div>
+      {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]);
+      const newShellToolMap = mainConfig[value];
-      setShellTools(Object.keys(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">
+    <FormProvider {...form}>
+      <Card>
         <CardHeader className="pb-1">
           <CardTitle className="text-md flex items-center gap-2">
             <ServerIcon className="h-5" />
-          <span>核心配置</span>
+            <span>生成配置</span>
           </CardTitle>
         </CardHeader>
-      <FormProvider {...form}>
         <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">
+                <FormItem className="flex flex-col mt-1">
-                  <FormLabel>JRE(可选)</FormLabel>
+                  <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,64 +200,38 @@ export function MainConfigCard({
                   <FormControl>
                     <Switch id="bypassJavaModule" checked={field.value} onCheckedChange={field.onChange} />
                   </FormControl>
-                  <Label htmlFor="bypassJavaModule">bypassJavaModule</Label>
+                  <Label htmlFor="bypassJavaModule">绕过 Java 模块系统限制</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">
+        </CardContent>
-              <Switch id="obfuscate" disabled />
+      </Card>
-              <Label htmlFor="obfuscate">开启混淆 (WIP)</Label>
+      <Tabs
-            </div>
+        value={shellTool}
-          </div>
+        onValueChange={(v) => {
-          <Separator className="mt-4 mb-2" />
+          handleShellToolChange(v);
-          <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);
         }}
+        className="w-full"
       >
-                    <FormControl>
+        <TabsList className={cn("grid w-full", `grid-cols-${shellTools.length}`)}>
-                      <SelectTrigger className="h-8">
+          {shellTools.map((shellTool) => (
-                        <SelectValue placeholder="请选择" />
+            <TabsTrigger key={shellTool} value={shellTool}>
-                      </SelectTrigger>
+              {shellTool}
-                    </FormControl>
+            </TabsTrigger>
-                    <SelectContent>
+          ))}
-                      {shellTools.length ? (
+        </TabsList>
-                        shellTools.map((v) => (
+        <BehinderTabContent form={form} shellTypes={shellTypes} />
-                          <SelectItem key={v} value={v}>
+        <GodzillaTabContent form={form} shellTypes={shellTypes} />
-                            {v}
+        <CommandTabContent form={form} shellTypes={shellTypes} />
-                          </SelectItem>
+      </Tabs>
-                        ))
+    </FormProvider>
-                      ) : (
+  );
-                        <SelectItem value=" ">请先选择目标服务</SelectItem>
+}
-                      )}
+
-                    </SelectContent>
+function ShellTypeFormField({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
-                  </Select>
+  return (
-                </FormItem>
+    <FormProvider {...form}>
-              )}
-            />
       <FormField
         control={form.control}
         name="shellType"
@@ -241,7 +244,7 @@ export function MainConfigCard({
                   <SelectValue placeholder="请选择" />
                 </SelectTrigger>
               </FormControl>
-                    <SelectContent>
+              <SelectContent key={shellTypes.join(",")}>
                 {shellTypes.length ? (
                   shellTypes.map((v) => (
                     <SelectItem key={v} value={v}>
@@ -256,6 +259,13 @@ export function MainConfigCard({
           </FormItem>
         )}
       />
+    </FormProvider>
+  );
+}
+
+function UrlPatternFormField({ form }: { form: UseFormReturn<FormSchema> }) {
+  return (
+    <FormProvider {...form}>
       <FormField
         control={form.control}
         name="urlPattern"
@@ -268,75 +278,64 @@ export function MainConfigCard({
           </FormItem>
         )}
       />
-          </div>
+    </FormProvider>
-          <div className="mt-2">
+  );
-            {form.getValues().shellTool === "Godzilla" && (
+}
-              <div className="space-y-1">
+
-                <Label>Godzilla 配置</Label>
+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">
-                  <FormField
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
-                    control={form.control}
+              <UrlPatternFormField form={form} />
-                    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">
+                <FormItem className="space-y-1">
-                        <Label className="text-xs whitespace-nowrap w-1/2">密码：</Label>
+                  <FormLabel>连接密码</FormLabel>
                   <Input {...field} placeholder="Pass" className="h-8" />
                 </FormItem>
               )}
             />
+            <div className="grid grid-cols-2 gap-2">
               <FormField
                 control={form.control}
                 name="behinderHeaderName"
                 render={({ field }) => (
-                      <FormItem className="space-y-1 flex items-center justify-start">
+                  <FormItem className="space-y-1">
-                        <Label className="text-xs whitespace-nowrap w-1/2">请求头键：</Label>
+                    <FormLabel>请求头键</FormLabel>
                     <Input {...field} placeholder="Header Name" className="h-8" />
                   </FormItem>
                 )}
@@ -345,16 +344,91 @@ export function MainConfigCard({
                 control={form.control}
                 name="behinderHeaderValue"
                 render={({ field }) => (
-                      <FormItem className="space-y-1 flex items-center justify-start">
+                  <FormItem className="space-y-1">
-                        <Label className="text-xs whitespace-nowrap w-1/2">请求头值：</Label>
+                    <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>
                 )}
-            {form.getValues().shellTool === "Command" && (
+              />
+              <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"
@@ -368,37 +442,10 @@ export function MainConfigCard({
                 </FormItem>
               )}
             />
-            )}
+            <OptionalClassFormField form={form} />
-          </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>
+      </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">
+                  <RadioGroup onValueChange={field.onChange} value={field.value} className="grid grid-cols-3">
-                    {Object.entries(packerConfig ?? {}).map(([name, value]) => (
+                    {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,19 +1,40 @@
 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 {
-import { TicketsIcon, TriangleAlertIcon } from "lucide-react";
+  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>
+    <Card>
-      <ol className="list-decimal list-inside space-y-4">
+      <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
@@ -45,13 +66,129 @@ function AgentResult({ packResult, generateResult }: { packResult: string; gener
             </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>
+          <li>尝试利用内存马</li>
         </ol>
-    </section>
+      </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={() =>
+              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",
+              )
+            }
+          >
+            反馈
+          </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,41 +200,24 @@ 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">
+      <TabsContent value="packResult" className="my-4">
-            {generateResult && !isAgent && (
+        <div className="mb-4">
-              <div className="gap-4 my-2">
+          {generateResult && <BasicInfo generateResult={generateResult} />}
-                <CopyableField
+          {!generateResult && <QuickUsage />}
-                  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"}
+            height={400}
           />
         )}
         {isAgent && <AgentResult packResult={packResult} generateResult={generateResult} />}
@@ -108,19 +228,7 @@ export function ShellResult({
           <AlertTitle>Warning</AlertTitle>
           <AlertDescription>反编译还在开发中，因此当前仅能看到 base64 编码格式</AlertDescription>
         </Alert>
-            <div className="gap-4 my-2 flex items-center justify-between">
+        <div className="gap-4 my-2 flex items-center justify-end">
-              {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"
@@ -146,28 +254,14 @@ export function ShellResult({
           <AlertTitle>Warning</AlertTitle>
           <AlertDescription>反编译还在开发中，因此当前仅能看到 base64 编码格式</AlertDescription>
         </Alert>
-            <div className="gap-4 my-2 flex items-center justify-between">
+        <div className="gap-4 my-2 flex items-center justify-end">
-              {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={() =>
+              onClick={() => downloadBytes(generateResult?.injectorBytesBase64Str, generateResult?.injectorClassName)}
-                    downloadBytes(generateResult?.injectorBytesBase64Str, generateResult?.injectorClassName)
-                  }
             >
               下载 Class
             </Button>
@@ -181,7 +275,5 @@ export function ShellResult({
         />
       </TabsContent>
     </Tabs>
-      </CardContent>
-    </Card>
   );
 }

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>

web/src/config.ts

@@ -2,16 +2,20 @@ import * as z from "zod";
 
 const EnvSchema = z.object({
   API_URL: z.optional(z.string()),
+  MODE: z.string(),
 });
 
 const createEnv = () => {
   // @ts-ignore
   const envVars = Object.entries(import.meta.env).reduce<Record<string, string>>((acc, curr) => {
     const [key, value] = curr;
-    if (key.startsWith("VITE_APP_")) {
     if (typeof value === "string") {
+      if (key.startsWith("VITE_APP_")) {
         acc[key.replace("VITE_APP_", "")] = value;
       }
+      if (key === "MODE") {
+        acc[key] = value;
+      }
     }
     return acc;
   }, {});

web/src/main.tsx

@@ -4,6 +4,7 @@ import { routeTree } from "./routeTree.gen";
 import "./index.css";
 import { TailwindIndicator } from "@/components/tailwind-indicator.tsx";
 import { Toaster } from "@/components/ui/sonner.tsx";
+import { env } from "@/config.ts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const queryClient = new QueryClient();
@@ -27,7 +28,7 @@ if (!rootElement.innerHTML) {
     <QueryClientProvider client={queryClient}>
       <Toaster />
       <RouterProvider router={router} />
-      <TailwindIndicator />
+      {env.MODE !== "production" && <TailwindIndicator />}
     </QueryClientProvider>,
   );
 }

web/src/routes/index.tsx

@@ -1,7 +1,6 @@
 import { MainConfigCard } from "@/components/main-config-card.tsx";
 import { PackageConfigCard } from "@/components/package-config-card.tsx";
 import { ShellResult } from "@/components/shell-result.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
 import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form.tsx";
 import { env } from "@/config.ts";
@@ -11,7 +10,7 @@ import { transformToPostData } from "@/utils/transformer.ts";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { ActivityIcon, LoaderCircle, ServerOffIcon, WandSparklesIcon } from "lucide-react";
+import { LoaderCircle, WandSparklesIcon } from "lucide-react";
 import { useState, useTransition } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -21,7 +20,7 @@ export const Route = createFileRoute("/")({
 });
 
 function IndexComponent() {
-  const { isPending, isError, data } = useQuery<ConfigResponseType>({
+  const { data } = useQuery<ConfigResponseType>({
     queryKey: ["config"],
     queryFn: async () => {
       const response = await fetch(`${env.API_URL}/config`);
@@ -36,7 +35,7 @@ function IndexComponent() {
       debug: false,
       bypassJavaModule: false,
       shellClassName: "",
-      shellTool: "",
+      shellTool: "Behinder",
       shellType: "",
       urlPattern: "/*",
       godzillaPass: "pass",
@@ -123,39 +122,14 @@ function IndexComponent() {
   }
 
   return (
-    <div className="mt-4">
-      <div className="px-4">
-        {isPending && (
-          <Alert>
-            <LoaderCircle className="animate-spin h-4 w-4" />
-            <AlertTitle>Pending</AlertTitle>
-            <AlertDescription>正在全力搜索可用的后端服务~</AlertDescription>
-          </Alert>
-        )}
-        {isError && (
-          <Alert variant="destructive">
-            <ServerOffIcon className="h-4 w-4" />
-            <AlertTitle>Not Work!</AlertTitle>
-            <AlertDescription>未检测到可用后端服务，生成功能暂不可用.</AlertDescription>
-          </Alert>
-        )}
-
-        {!isError && data && (
-          <Alert>
-            <ActivityIcon className="h-4 w-4" />
-            <AlertTitle>It Work!</AlertTitle>
-            <AlertDescription>Let's start the party! 🎉</AlertDescription>
-          </Alert>
-        )}
-      </div>
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col  xl:flex-row gap-4 p-4">
-          <div className="w-full xl:w-1/2 space-y-2">
+        <div className="w-full xl:w-1/2 space-y-4">
           <MainConfigCard servers={data?.servers} mainConfig={data?.core} form={form} />
           <PackageConfigCard packerConfig={data?.packers} form={form} />
           <Button className="w-full" type="submit" disabled={isActionPending}>
             {isActionPending ? <LoaderCircle className="animate-spin" /> : <WandSparklesIcon />}
-              Generate
+            生成内存马
           </Button>
         </div>
         <div className="w-full xl:w-1/2 space-y-4">
@@ -163,6 +137,5 @@ function IndexComponent() {
         </div>
       </form>
     </Form>
-    </div>
   );
 }

web/src/types/shell.ts

@@ -33,8 +33,16 @@ export interface GodzillaShellToolConfig {
   headerValue?: string;
 }
 
+export interface BehinderShellToolConfig {
+  shellClassName?: string;
+  pass?: string;
+  headerName?: string;
+  headerValue?: string;
+}
+
 export interface InjectorConfig {
   className?: string;
+  classInheritance?: string;
   urlPattern?: string;
 }
 
@@ -71,6 +79,6 @@ export interface GenerateResult {
   injectorSize: number;
   injectorBytesBase64Str: string;
   shellConfig: ShellConfig;
-  shellToolConfig: CommandShellToolConfig | GodzillaShellToolConfig;
+  shellToolConfig: CommandShellToolConfig | GodzillaShellToolConfig | BehinderShellToolConfig;
   injectorConfig: InjectorConfig;
 }

web/src/utils/transformer.ts

@@ -6,6 +6,7 @@ export function transformToPostData(formValue: FormSchema) {
     server: formValue.server,
     shellTool: formValue.shellTool,
     shellType: formValue.shellType,
+    debug: formValue.debug,
     targetJreVersion: formValue.targetJdkVersion,
     byPassJavaModule: formValue.bypassJavaModule,
   };

web/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/config.ts","./src/main.tsx","./src/routetree.gen.ts","./src/components/code-viewer.tsx","./src/components/main-config-card.tsx","./src/components/mode-toggle.tsx","./src/components/package-config-card.tsx","./src/components/shell-result.tsx","./src/components/tailwind-indicator.tsx","./src/components/theme-provider.tsx","./src/components/tips/jre-tip.tsx","./src/components/tips/url-pattern-tip.tsx","./src/components/ui/alert.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/form.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/radio-group.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/sonner.tsx","./src/components/ui/switch.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/tooltip.tsx","./src/lib/utils.ts","./src/routes/__root.tsx","./src/routes/index.tsx","./src/types/schema.ts","./src/types/shell.ts","./src/utils/transformer.ts"],"version":"5.7.2"}
+{"root":["./src/config.ts","./src/main.tsx","./src/routetree.gen.ts","./src/components/code-viewer.tsx","./src/components/copyable-field.tsx","./src/components/main-config-card.tsx","./src/components/mode-toggle.tsx","./src/components/package-config-card.tsx","./src/components/quick-usage.tsx","./src/components/shell-result.tsx","./src/components/tailwind-indicator.tsx","./src/components/theme-provider.tsx","./src/components/tips/jre-tip.tsx","./src/components/tips/url-pattern-tip.tsx","./src/components/ui/alert-dialog.tsx","./src/components/ui/alert.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/form.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/radio-group.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/sonner.tsx","./src/components/ui/switch.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/tooltip.tsx","./src/lib/utils.ts","./src/routes/__root.tsx","./src/routes/index.tsx","./src/types/schema.ts","./src/types/shell.ts","./src/utils/transformer.ts"],"version":"5.7.3"}

web/tsconfig.node.tsbuildinfo

@@ -1 +1 @@
-{"root":["./vite.config.ts"],"version":"5.7.2"}
+{"root":["./vite.config.ts"],"version":"5.7.3"}