From 1fb2942246dba23086d3b94b44a1b72b1d4e8352 Mon Sep 17 00:00:00 2001
From: ReaJason <reajason1225@gmail.com>
Date: Sat, 13 Dec 2025 11:42:57 +0800
Subject: [PATCH] feat: add tooltip for paramName

---
 web/app/components/memshell/shell-result.tsx  |  7 +++---
 .../components/memshell/tabs/command-tab.tsx  | 23 +++++++++++++++----
 .../probeshell/main-config-card.tsx           | 16 ++++++++++---
 .../components/probeshell/shell-result.tsx    |  4 ++--
 web/app/i18n/common/en.json                   |  1 +
 web/app/i18n/common/zh-CN.json                |  1 +
 web/app/routes/memshell.tsx                   |  2 +-
 web/app/routes/probeshell.tsx                 |  4 ++--
 8 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/web/app/components/memshell/shell-result.tsx b/web/app/components/memshell/shell-result.tsx
index 918494c2..3c03f6e2 100644
--- a/web/app/components/memshell/shell-result.tsx
+++ b/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"
         />
diff --git a/web/app/components/memshell/tabs/command-tab.tsx b/web/app/components/memshell/tabs/command-tab.tsx
index 59b98aba..caf92d4e 100644
--- a/web/app/components/memshell/tabs/command-tab.tsx
+++ b/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}
diff --git a/web/app/components/probeshell/main-config-card.tsx b/web/app/components/probeshell/main-config-card.tsx
index f96f1ae6..9f638d7b 100644
--- a/web/app/components/probeshell/main-config-card.tsx
+++ b/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>
diff --git a/web/app/components/probeshell/shell-result.tsx b/web/app/components/probeshell/shell-result.tsx
index 077ad2e7..6531e3e5 100644
--- a/web/app/components/probeshell/shell-result.tsx
+++ b/web/app/components/probeshell/shell-result.tsx
@@ -22,7 +22,7 @@ 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">
@@ -30,7 +30,7 @@ export default function ShellResult({
           {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
diff --git a/web/app/i18n/common/en.json b/web/app/i18n/common/en.json
index f31c59e1..2d5e7bed 100644
--- a/web/app/i18n/common/en.json
+++ b/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",
diff --git a/web/app/i18n/common/zh-CN.json b/web/app/i18n/common/zh-CN.json
index 2bd58cc9..69ff090c 100644
--- a/web/app/i18n/common/zh-CN.json
+++ b/web/app/i18n/common/zh-CN.json
@@ -23,6 +23,7 @@
   "packerConfig.title": "打包配置",
   "packerMethod": "打包方式",
   "paramName": "参数名称",
+  "paramName.description": "支持请求参数 param 或请求头 header 传值",
   "placeholders.input": "请输入",
   "placeholders.select": "请选择",
   "ProbeShellGenerator": "探测马生成器",
diff --git a/web/app/routes/memshell.tsx b/web/app/routes/memshell.tsx
index 7942f53d..87c80c99 100644
--- a/web/app/routes/memshell.tsx
+++ b/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}
diff --git a/web/app/routes/probeshell.tsx b/web/app/routes/probeshell.tsx
index f7d91f87..8b3c554a 100644
--- a/web/app/routes/probeshell.tsx
+++ b/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}