feat: enhance responsive layout and improve i18n support (#39)

2026-09-22 07:00:43 +08:00 · 2025-02-19 22:21:17 +08:00
parent 328fee0286
commit bfae5e10d3
12 changed files with 505 additions and 354 deletions
@@ -1,7 +1,8 @@
 import { Button, type ButtonProps } from "@/components/ui/button.tsx";
 import { Check, Copy } from "lucide-react";
-import { type HTMLProps, type ReactNode, useEffect, useState } from "react";
+import { type HTMLProps, type ReactNode, useCallback, useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
+import { useTranslation } from "react-i18next";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { materialDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { toast } from "sonner";
@@ -13,24 +14,33 @@ interface CopyButtonProps extends ButtonProps {

 export function CopyButton({ value }: CopyButtonProps) {
  const [hasCopied, setHasCopied] = useState(false);
+  const { t } = useTranslation();

  useEffect(() => {
    if (hasCopied) {
-      setTimeout(() => {
+      const timer = setTimeout(() => {
        setHasCopied(false);
      }, 1000);
+      return () => clearTimeout(timer);
    }
  }, [hasCopied]);

+  const handleCopy = useCallback(() => {
+    if (!hasCopied) {
+      setHasCopied(true);
+      toast.success(t("copySuccess"), { duration: 1000 });
+    }
+  }, [hasCopied, t]);
+
  return (
-    <CopyToClipboard
-      text={value}
-      onCopy={() => {
-        setHasCopied(true);
-        toast.success("复制成功", { duration: 1000 });
-      }}
-    >
-      <Button variant="ghost" size="icon" type="button" className="h-7 w-7 [&_svg]:h-4 [&_svg]:w-4">
+    <CopyToClipboard text={value} onCopy={handleCopy}>
+      <Button
+        variant="ghost"
+        size="icon"
+        type="button"
+        className="h-7 w-7 [&_svg]:h-4 [&_svg]:w-4"
+        disabled={hasCopied}
+      >
        {hasCopied ? <Check /> : <Copy />}
      </Button>
    </CopyToClipboard>
@@ -1,8 +1,9 @@
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Check, Copy } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";

 interface CopyableFieldProps {
@@ -13,30 +14,39 @@ interface CopyableFieldProps {

 export function CopyableField({ label, value, text }: CopyableFieldProps) {
  const [hasCopied, setHasCopied] = useState(false);
+  const { t } = useTranslation();

-  const copyToClipboard = useCallback(() => {
-    setHasCopied(true);
-    toast.success(`复制${label}成功`, {
-      duration: 1000,
-    });
-    setTimeout(() => {
-      setHasCopied(false);
-    }, 1000);
-  }, [label]);
+  useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => {
+        setHasCopied(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [hasCopied]);
+
+  const handleCopy = useCallback(() => {
+    if (!hasCopied) {
+      setHasCopied(true);
+      toast.success(t("copyLabelSuccess", { label }), {
+        duration: 1000,
+      });
+    }
+  }, [hasCopied, label, t]);

  return (
-    <div className="flex items-center justify-between h-9">
-      <div className="flex items-center space-x-2 text-sm">
-        <Label className="w-32 text-right">{label}：</Label>
-        <p>{text}</p>
+    <div className="flex flex-col gap-1 py-1">
+      <div className="flex items-center justify-between gap-2">
+        <Label className="text-sm text-muted-foreground">{label}：</Label>
+        {value && (
+          <CopyToClipboard text={value as string} onCopy={handleCopy}>
+            <Button variant="ghost" size="icon" type="button" className="h-8 w-8" disabled={hasCopied}>
+              {hasCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+            </Button>
+          </CopyToClipboard>
+        )}
      </div>
-      {value && (
-        <CopyToClipboard text={value as string} onCopy={copyToClipboard}>
-          <Button variant="ghost" size="icon" type="button">
-            {hasCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-          </Button>
-        </CopyToClipboard>
-      )}
+      <p className="text-sm break-all">{text}</p>
    </div>
  );
 }
@@ -10,9 +10,17 @@ import { MainConfig } from "@/types/shell.ts";

 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 {
+  ArrowUpRightIcon,
+  AxeIcon,
+  CommandIcon,
+  NetworkIcon,
+  ServerIcon,
+  ShieldOffIcon,
+  SwordIcon,
+  WaypointsIcon,
+} from "lucide-react";
+import { JSX, useState } from "react";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";

@@ -25,6 +33,17 @@ const JDKVersion = [
  { name: "Java21", value: "65" },
 ];

+type ShellToolType = "Behinder" | "Godzilla" | "Command" | "AntSword" | "Suo5" | "Neo-reGeorg";
+
+const shellToolIcons: Record<ShellToolType, JSX.Element> = {
+  Behinder: <ShieldOffIcon className="h-4 w-4" />,
+  Godzilla: <AxeIcon className="h-4 w-4" />,
+  Command: <CommandIcon className="h-4 w-4" />,
+  AntSword: <SwordIcon className="h-4 w-4" />,
+  Suo5: <WaypointsIcon className="h-4 w-4" />,
+  "Neo-reGeorg": <NetworkIcon className="h-4 w-4" />,
+};
+
 export function MainConfigCard({
  mainConfig,
  form,
@@ -101,6 +120,12 @@ export function MainConfigCard({
      form.resetField("headerValue");
    };

+    const resetAntSword = () => {
+      form.resetField("antSwordPass");
+      form.resetField("headerName");
+      form.resetField("headerValue");
+    };
+
    if (shellToolMap) {
      setShellTypes(shellToolMap[value]);
      form.resetField("urlPattern");
@@ -115,6 +140,8 @@ export function MainConfigCard({
        resetCommand();
      } else if (value === "Suo5") {
        resetSuo5();
+      } else if (value === "AntSword") {
+        resetAntSword();
      }
    }
    form.setValue("shellTool", value);
@@ -130,7 +157,7 @@ export function MainConfigCard({
          </CardTitle>
        </CardHeader>
        <CardContent>
-          <div className="grid grid-cols-2 gap-2">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
            <FormField
              control={form.control}
              name="server"
@@ -243,15 +270,23 @@ export function MainConfigCard({
        }}
        className="w-full"
      >
-        <TabsList
-          className={cn("grid w-full", shellTools.length > 3 ? "grid-flow-col" : `grid-cols-${shellTools.length}`)}
-        >
-          {shellTools.map((shellTool) => (
-            <TabsTrigger key={shellTool} value={shellTool}>
-              {shellTool}
-            </TabsTrigger>
-          ))}
-        </TabsList>
+        <div className="relative bg-muted rounded-lg">
+          <TabsList className="flex flex-wrap gap-1 w-full bg-transparent tabs-list">
+            {shellTools.map((shellTool) => (
+              <TabsTrigger
+                key={shellTool}
+                value={shellTool}
+                className="flex-1 min-w-24 data-[state=active]:bg-background"
+              >
+                <span className="flex items-center gap-2">
+                  {shellToolIcons[shellTool as ShellToolType]}
+                  {shellTool}
+                </span>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+
        <BehinderTabContent form={form} shellTypes={shellTypes} />
        <GodzillaTabContent form={form} shellTypes={shellTypes} />
        <CommandTabContent form={form} shellTypes={shellTypes} />
@@ -69,7 +69,11 @@ export function PackageConfigCard({
              <FormItem className="space-y-3">
                <FormLabel className="h-6 flex items-center gap-1">{t("packageConfig.title")}</FormLabel>
                <FormControl>
-                  <RadioGroup onValueChange={field.onChange} value={field.value} className="grid grid-cols-3">
+                  <RadioGroup
+                    onValueChange={field.onChange}
+                    value={field.value}
+                    className="grid grid-cols-2 md:grid-cols-3"
+                  >
                    {options.map(({ name, value }) => (
                      <FormItem key={value} className="flex items-center space-x-3 space-y-0">
                        <FormControl>
@@ -28,21 +28,25 @@ import {
  Suo5ShellToolConfig,
 } from "@/types/shell.ts";
 import { TFunction } from "i18next";
-import { CircleHelpIcon, TicketCheckIcon, TriangleAlertIcon } from "lucide-react";
+import { CircleHelpIcon, FileTextIcon, ScrollTextIcon, TriangleAlertIcon } from "lucide-react";
 import { Fragment, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";

 function AgentResult({ packResult, generateResult }: { packResult: string; generateResult?: GenerateResult }) {
+  const { t } = useTranslation();
  return (
    <Card>
      <CardHeader>
-        <CardTitle>使用方法</CardTitle>
+        <CardTitle className="text-md flex items-center gap-2">
+          <ScrollTextIcon className="h-5" />
+          <span>{t("generateResult.usage")}</span>
+        </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>
+            <span>{t("download")} MemShellAgent.jar</span>
            <Button
              size="sm"
              variant="outline"
@@ -56,11 +60,11 @@ function AgentResult({ packResult, generateResult }: { packResult: string; gener
                )
              }
            >
-              下载 Jar
+              {t("download")} Jar
            </Button>
          </li>
          <li className="flex items-center justify-between">
-            <span>下载 Jattach 工具（后期考虑直接封装在 Jar 中）</span>
+            <span>{t("tips.download-jattach")}</span>
            <Button
              size="sm"
              variant="outline"
@@ -68,14 +72,14 @@ function AgentResult({ packResult, generateResult }: { packResult: string; gener
              type="button"
              onClick={() => window.open("https://github.com/jattach/jattach/releases")}
            >
-              下载 Jattach
+              {t("download")} 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>
+          <li>{t("tips.move-to-container")}</li>
+          <li>{t("tips.get-pid")}</li>
+          <li>{t("tips.execute-command")}</li>
+          <li>{t("tips.try-to-use-shell")}</li>
        </ol>
      </CardContent>
    </Card>
@@ -145,105 +149,119 @@ function BasicInfo({ generateResult }: { generateResult?: GenerateResult }) {
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <div className="text-md flex items-center gap-2">
-            <TicketCheckIcon className="h-5" />
+            <FileTextIcon className="h-5" />
            <span>{t("generateResult.basicInfo")}</span>
          </div>
          <FeedbackAlert />
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="grid grid-cols-2">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
          <CopyableField label={t("mainConfig.server")} text={generateResult?.shellConfig.server} />
          <CopyableField label={t("mainConfig.shellTool")} text={generateResult?.shellConfig.shellTool} />
+          <CopyableField label={t("mainConfig.shellMountType")} text={generateResult?.shellConfig.shellType} />
+          <CopyableField
+            label={t("mainConfig.urlPattern")}
+            text={generateResult?.injectorConfig.urlPattern}
+            value={generateResult?.injectorConfig.urlPattern}
+          />
        </div>
-        <CopyableField label={t("mainConfig.shellMountType")} text={generateResult?.shellConfig.shellType} />
-        <CopyableField
-          label={t("mainConfig.urlPattern")}
-          text={generateResult?.injectorConfig.urlPattern}
-          value={generateResult?.injectorConfig.urlPattern}
-        />
-        {generateResult?.shellConfig.shellTool === "Behinder" && (
-          <Fragment>
-            <CopyableField label={t("shellToolConfig.behinderScriptType")} text="jsp" />
-            <CopyableField
-              label={t("shellToolConfig.behinderEncryptType")}
-              text={t("shellToolConfig.behinderDefaultEncryptType")}
-            />
-            <CopyableField
-              label={t("shellToolConfig.behinderPass")}
-              text={(generateResult?.shellToolConfig as BehinderShellToolConfig).pass}
-              value={(generateResult?.shellToolConfig as BehinderShellToolConfig).pass}
-            />
-            <CopyableField
-              label={t("shellToolConfig.customHeader")}
-              text={`${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerValue}`}
-              value={`${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerValue}`}
-            />
-          </Fragment>
+        <Separator className="my-2" />
+
+        {(generateResult?.shellConfig.shellTool === "Behinder" ||
+          generateResult?.shellConfig.shellTool === "Godzilla" ||
+          generateResult?.shellConfig.shellTool === "Command" ||
+          generateResult?.shellConfig.shellTool === "AntSword" ||
+          generateResult?.shellConfig.shellTool === "Suo5") && (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            {/* Tool-specific fields */}
+            {generateResult?.shellConfig.shellTool === "Behinder" && (
+              <>
+                <CopyableField label={t("shellToolConfig.behinderScriptType")} text="jsp" />
+                <CopyableField
+                  label={t("shellToolConfig.behinderEncryptType")}
+                  text={t("shellToolConfig.behinderDefaultEncryptType")}
+                />
+                <CopyableField
+                  label={t("shellToolConfig.behinderPass")}
+                  text={(generateResult?.shellToolConfig as BehinderShellToolConfig).pass}
+                  value={(generateResult?.shellToolConfig as BehinderShellToolConfig).pass}
+                />
+                <CopyableField
+                  label={t("shellToolConfig.customHeader")}
+                  text={`${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerValue}`}
+                  value={`${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerValue}`}
+                />
+              </>
+            )}
+            {generateResult?.shellConfig.shellTool === "Godzilla" && (
+              <Fragment>
+                <CopyableField
+                  label={t("shellToolConfig.pass")}
+                  text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
+                  value={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
+                />
+                <CopyableField
+                  label={t("shellToolConfig.key")}
+                  text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).key}
+                  value={(generateResult?.shellToolConfig as GodzillaShellToolConfig).key}
+                />
+                <CopyableField label={t("shellToolConfig.godzillaPayload")} text="JavaDynamicPayload" />
+                <CopyableField label={t("shellToolConfig.godzillaEncryptor")} text="JAVA_AES_BASE64" />
+                <CopyableField
+                  label={t("shellToolConfig.godzillaHeader")}
+                  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={t("shellToolConfig.paramName")}
+                  text={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
+                  value={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
+                />
+              </Fragment>
+            )}
+            {generateResult?.shellConfig.shellTool === "Suo5" && (
+              <Fragment>
+                <CopyableField
+                  label={t("shellToolConfig.suo5Header")}
+                  text={`${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerValue}`}
+                  value={`${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerValue}`}
+                />
+              </Fragment>
+            )}
+            {generateResult?.shellConfig.shellTool === "AntSword" && (
+              <Fragment>
+                <CopyableField
+                  label={t("shellToolConfig.antSwordPass")}
+                  text={(generateResult?.shellToolConfig as AntSwordShellToolConfig).pass}
+                  value={(generateResult?.shellToolConfig as AntSwordShellToolConfig).pass}
+                />
+                <CopyableField
+                  label={t("shellToolConfig.httpHeader")}
+                  text={`${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerValue}`}
+                  value={`${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerValue}`}
+                />
+              </Fragment>
+            )}
+          </div>
        )}
-        {generateResult?.shellConfig.shellTool === "Godzilla" && (
-          <Fragment>
-            <CopyableField
-              label={t("shellToolConfig.pass")}
-              text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
-              value={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
-            />
-            <CopyableField
-              label={t("shellToolConfig.key")}
-              text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).key}
-              value={(generateResult?.shellToolConfig as GodzillaShellToolConfig).key}
-            />
-            <CopyableField label={t("shellToolConfig.godzillaPayload")} text="JavaDynamicPayload" />
-            <CopyableField label={t("shellToolConfig.godzillaEncryptor")} text="JAVA_AES_BASE64" />
-            <CopyableField
-              label={t("shellToolConfig.godzillaHeader")}
-              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={t("shellToolConfig.paramName")}
-              text={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
-              value={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
-            />
-          </Fragment>
-        )}
-        {generateResult?.shellConfig.shellTool === "Suo5" && (
-          <Fragment>
-            <CopyableField
-              label={t("shellToolConfig.suo5Header")}
-              text={`${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerValue}`}
-              value={`${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerValue}`}
-            />
-          </Fragment>
-        )}
-        {generateResult?.shellConfig.shellTool === "AntSword" && (
-          <Fragment>
-            <CopyableField
-              label={t("shellToolConfig.antSwordPass")}
-              text={(generateResult?.shellToolConfig as AntSwordShellToolConfig).pass}
-              value={(generateResult?.shellToolConfig as AntSwordShellToolConfig).pass}
-            />
-            <CopyableField
-              label={t("shellToolConfig.httpHeader")}
-              text={`${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerValue}`}
-              value={`${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerValue}`}
-            />
-          </Fragment>
-        )}
-        <CopyableField
-          label={t("mainConfig.injectorClassName")}
-          value={generateResult?.injectorClassName}
-          text={`${generateResult?.injectorClassName} (${generateResult?.injectorSize} bytes)`}
-        />
-        <CopyableField
-          label={t("mainConfig.shellClassName")}
-          value={generateResult?.shellClassName}
-          text={`${generateResult?.shellClassName} (${generateResult?.shellSize} bytes)`}
-        />
+        <Separator className="my-2" />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          <CopyableField
+            label={t("mainConfig.injectorClassName")}
+            value={generateResult?.injectorClassName}
+            text={`${generateResult?.injectorClassName} (${generateResult?.injectorSize} bytes)`}
+          />
+          <CopyableField
+            label={t("mainConfig.shellClassName")}
+            value={generateResult?.shellClassName}
+            text={`${generateResult?.shellClassName} (${generateResult?.shellSize} bytes)`}
+          />
+        </div>
      </CardContent>
    </Card>
  );