feat: add tooltip for paramName

Author: ReaJason

web/app/components/memshell/shell-result.tsx

@@ -26,6 +26,7 @@ export default function ShellResult({
   if (!generateResult) {
     return <QuickUsage />;
   }
+  const height = 800;
   return (
     <Tabs defaultValue="packResult">
       <TabsList className="grid w-full grid-cols-3">
@@ -37,7 +38,7 @@ export default function ShellResult({
           {t("memshell:injectorClass")}
         </TabsTrigger>
       </TabsList>
-      <TabsContent value="packResult" className="my-2 space-y-4">
+      <TabsContent value="packResult" className="space-y-2">
         <BasicInfo generateResult={generateResult} />
         <ResultComponent
           packResult={packResult}
@@ -75,7 +76,7 @@ export default function ShellResult({
             </Button>
           }
           wrapLongLines={true}
-          height={600}
+          height={height}
           code={generateResult?.shellBytesBase64Str ?? ""}
           language="text"
         />
@@ -107,7 +108,7 @@ export default function ShellResult({
               <DownloadIcon className="h-4 w-4" />
             </Button>
           }
-          height={600}
+          height={height}
           code={generateResult?.injectorBytesBase64Str ?? ""}
           language="text"
         />

web/app/components/memshell/tabs/command-tab.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight, InfoIcon } from "lucide-react";
 import { useState } from "react";
 import { FormProvider, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -24,6 +24,11 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { TabsContent } from "@/components/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { env } from "@/config";
 import type { MemShellFormSchema } from "@/types/schema";
 import { OptionalClassFormField } from "./classname-field";
@@ -64,9 +69,19 @@ export function CommandTabContent({
               name="commandParamName"
               render={({ field }) => (
                 <FormFieldItem>
-                  <FormFieldLabel>
-                    {t("common:paramName")} {t("common:optional")}
-                  </FormFieldLabel>
+                  <div className="flex items-center gap-1">
+                    <FormFieldLabel>
+                      {t("common:paramName")} {t("common:optional")}
+                    </FormFieldLabel>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{t("common:paramName.description")}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
                   <FormControl>
                     <Input
                       {...field}

web/app/components/probeshell/main-config-card.tsx

@@ -147,9 +147,19 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
           name="reqParamName"
           render={({ field }) => (
             <FormFieldItem>
-              <FormFieldLabel>
-                {t("common:paramName")} {t("common:optional")}
-              </FormFieldLabel>
+              <div className="flex items-center gap-1">
+                <FormFieldLabel>
+                  {t("common:paramName")} {t("common:optional")}
+                </FormFieldLabel>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("common:paramName.description")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
               <FormControl>
                 <Input placeholder={t("placeholders.input")} {...field} />
               </FormControl>

web/app/components/probeshell/shell-result.tsx

@@ -22,15 +22,15 @@ export default function ShellResult({
     return <QuickUsage />;
   }
   const showCode = packMethod === "JSP";
-  const height = 550;
+  const height = 600;
   return (
     <Tabs defaultValue="packResult">
       <TabsList className="grid w-full grid-cols-1">
         <TabsTrigger value="packResult">
           {t("common:generateResult")}
         </TabsTrigger>
       </TabsList>
-      <TabsContent value="packResult" className="my-2 space-y-4">
+      <TabsContent value="packResult" className="space-y-2">
         <BasicInfo generateResult={generateResult} />
         {allPackResults && (
           <MultiPackResult

web/app/i18n/common/en.json

@@ -23,6 +23,7 @@
   "packerConfig.title": "Package Config",
   "packerMethod": "Package Method",
   "paramName": "ParamName",
+  "paramName.description": "Supports passing values via request parameter (param) or request header (header)",
   "placeholders.input": "Please input",
   "placeholders.select": "Please select",
   "ProbeShellGenerator": "ProbeShellGenerator",

web/app/i18n/common/zh-CN.json

@@ -23,6 +23,7 @@
   "packerConfig.title": "打包配置",
   "packerMethod": "打包方式",
   "paramName": "参数名称",
+  "paramName.description": "支持请求参数 param 或请求头 header 传值",
   "placeholders.input": "请输入",
   "placeholders.select": "请选择",
   "ProbeShellGenerator": "探测马生成器",

web/app/routes/memshell.tsx

@@ -150,7 +150,7 @@ export default function MemShellPage() {
                 {t("memshell:buttons.generate")}
               </Button>
             </div>
-            <div className="w-full xl:w-1/2 flex flex-col gap-4">
+            <div className="w-full xl:w-1/2 flex flex-col gap-2">
               <ShellResult
                 packMethod={packMethod}
                 generateResult={generateResult}

web/app/routes/probeshell.tsx

@@ -110,7 +110,7 @@ export default function ProbeShellGenerator() {
             onSubmit={form.handleSubmit(onSubmit)}
             className="flex flex-col xl:flex-row gap-6"
           >
-            <div className="w-full xl:w-1/2 flex flex-col gap-4">
+            <div className="w-full xl:w-1/2 flex flex-col gap-2">
               <MainConfigCard form={form} servers={serverConfig} />
               <PackageConfigCard form={form} packerConfig={packerConfig} />
               <Button
@@ -126,7 +126,7 @@ export default function ProbeShellGenerator() {
                 {t("probeshell:buttons.generate")}
               </Button>
             </div>
-            <div className="w-full xl:w-1/2 flex flex-col gap-4">
+            <div className="w-full xl:w-1/2 flex flex-col gap-2">
               <ShellResult
                 packMethod={packMethod}
                 generateResult={generateResult}