refactor(ui): separate each component into single file

2026-09-22 23:11:52 +08:00 · 2025-02-28 22:40:45 +08:00
parent 30a141c8d4
commit fefe25cbce
22 changed files with 925 additions and 749 deletions
@@ -0,0 +1,60 @@
+import { downloadBytes } from "@/lib/utils";
+import { GenerateResult } from "@/types/shell";
+import { Separator } from "@radix-ui/react-dropdown-menu";
+import { ScrollTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "../ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+
+export function AgentResult({ packResult, generateResult }: { packResult: string; generateResult?: GenerateResult }) {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardHeader>
+        <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>{t("download")} MemShellAgent.jar</span>
+            <Button
+              size="sm"
+              variant="outline"
+              className="w-28"
+              type="button"
+              onClick={() =>
+                downloadBytes(
+                  packResult,
+                  undefined,
+                  `${generateResult?.shellConfig.server}${generateResult?.shellConfig.shellTool}MemShellAgent`,
+                )
+              }
+            >
+              {t("download")} Jar
+            </Button>
+          </li>
+          <li className="flex items-center justify-between">
+            <span>{t("tips.download-jattach")}</span>
+            <Button
+              size="sm"
+              variant="outline"
+              className="w-28"
+              type="button"
+              onClick={() => window.open("https://github.com/jattach/jattach/releases")}
+            >
+              {t("download")} Jattach
+            </Button>
+          </li>
+          <Separator />
+          <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>
+  );
+}
@@ -0,0 +1,140 @@
+import {
+  AntSwordShellToolConfig,
+  BehinderShellToolConfig,
+  CommandShellToolConfig,
+  GenerateResult,
+  GodzillaShellToolConfig,
+  Suo5ShellToolConfig,
+} from "@/types/shell";
+import { Separator } from "@radix-ui/react-dropdown-menu";
+import { FileTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Fragment } from "react/jsx-runtime";
+import { CopyableField } from "../copyable-field";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { FeedbackAlert } from "./feedback-alert";
+
+export function BasicInfo({ generateResult }: { generateResult?: GenerateResult }) {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <div className="text-md flex items-center gap-2">
+            <FileTextIcon className="h-5" />
+            <span>{t("generateResult.basicInfo")}</span>
+          </div>
+          <FeedbackAlert />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <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>
+        <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>
+        )}
+        <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>
+  );
+}
@@ -0,0 +1,49 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@radix-ui/react-alert-dialog";
+import { CircleHelpIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { AlertDialogFooter, AlertDialogHeader } from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+
+export function FeedbackAlert() {
+  const { t } = useTranslation();
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline" type="button">
+          <CircleHelpIcon /> {t("shellNotWork.title")}
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t("shellNotWork.title")}</AlertDialogTitle>
+          <AlertDialogDescription>
+            <ol>
+              <li>{t("shellNotWork.step1")}</li>
+              <li>{t("shellNotWork.step2")}</li>
+            </ol>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t("cancel")}</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",
+              )
+            }
+          >
+            {t("feedback")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
@@ -0,0 +1,24 @@
+import { downloadBytes } from "@/lib/utils";
+import { GenerateResult } from "@/types/shell";
+import { useTranslation } from "react-i18next";
+import { Button } from "../ui/button";
+
+export function JarResult({ packResult, generateResult }: { packResult: string; generateResult?: GenerateResult }) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex items-center justify-center">
+      <Button
+        type="button"
+        onClick={() =>
+          downloadBytes(
+            packResult,
+            undefined,
+            `${generateResult?.shellConfig.server}${generateResult?.shellConfig.shellTool}MemShell`,
+          )
+        }
+      >
+        {t("download")} Jar
+      </Button>
+    </div>
+  );
+}
@@ -0,0 +1,63 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@radix-ui/react-select";
+import { TFunction } from "i18next";
+import { useEffect, useState } from "react";
+import { Fragment } from "react/jsx-runtime";
+import { CodeViewer } from "../code-viewer";
+
+export function MultiPackResult({
+  allPackResults,
+  packMethod,
+  t,
+}: {
+  allPackResults: object | undefined;
+  packMethod: string;
+  t: TFunction;
+}) {
+  const showCode = packMethod === "JSP";
+  const packMethods = Object.keys(allPackResults ?? {});
+  const [selectedMethod, setSelectedMethod] = useState(packMethods[0]);
+  const [packResult, setPackResult] = useState(allPackResults?.[selectedMethod as keyof typeof allPackResults] ?? "");
+
+  useEffect(() => {
+    const methods = Object.keys(allPackResults ?? {});
+    const firstMethod = methods[0];
+    setSelectedMethod(firstMethod);
+    setPackResult(allPackResults?.[firstMethod as keyof typeof allPackResults] ?? "");
+  }, [allPackResults]);
+
+  return (
+    <Fragment>
+      <CodeViewer
+        code={packResult ?? ""}
+        header={
+          <div className="flex items-center justify-between text-xs gap-2">
+            <Select
+              onValueChange={(value) => {
+                setSelectedMethod(value);
+                setPackResult(allPackResults?.[value as keyof typeof allPackResults] ?? "");
+              }}
+              value={selectedMethod}
+            >
+              <SelectTrigger className="h-7 text-xs [&_svg]:h-4 [&_svg]:w-4">
+                <span className="text-muted-foreground">{t("packageConfig.title")}:&nbsp;</span>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {packMethods.map((method) => (
+                  <SelectItem key={method} value={method} className="text-xs">
+                    {method}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span className="text-muted-foreground">({packResult?.length})</span>
+          </div>
+        }
+        wrapLongLines={!showCode}
+        showLineNumbers={showCode}
+        language={showCode ? "java" : "text"}
+        height={350}
+      />
+    </Fragment>
+  );
+}
@@ -0,0 +1,57 @@
+import { GenerateResult } from "@/types/shell";
+import { TFunction } from "i18next";
+import { Fragment } from "react/jsx-runtime";
+import { CodeViewer } from "../code-viewer";
+import { AgentResult } from "./agent";
+import { JarResult } from "./jar-result";
+import { MultiPackResult } from "./multi-packer";
+
+export function ResultComponent({
+  packResult,
+  allPackResults,
+  packMethod,
+  t,
+  generateResult,
+}: {
+  packResult: string | undefined;
+  allPackResults: Map<string, string> | undefined;
+  packMethod: string;
+  t: TFunction;
+  generateResult?: GenerateResult;
+}) {
+  const showCode = packMethod === "JSP";
+  const isAgent = packMethod.startsWith("Agent");
+  const isJar = packMethod === "Jar";
+  if (allPackResults) {
+    return <MultiPackResult allPackResults={allPackResults} packMethod={packMethod} t={t} />;
+  }
+
+  if (isAgent) {
+    return <AgentResult packResult={packResult ?? ""} generateResult={generateResult} />;
+  }
+  if (isJar) {
+    return <JarResult packResult={packResult ?? ""} generateResult={generateResult} />;
+  }
+  if (!isAgent && !isJar) {
+    return (
+      <Fragment>
+        <CodeViewer
+          code={packResult ?? ""}
+          header={
+            <div className="flex items-center justify-between text-xs gap-2">
+              <span>
+                {t("packageConfig.title")}：{packMethod}
+              </span>
+              <span className="text-muted-foreground">({packResult?.length})</span>
+            </div>
+          }
+          wrapLongLines={!showCode}
+          showLineNumbers={showCode}
+          language={showCode ? "java" : "text"}
+          height={350}
+        />
+      </Fragment>
+    );
+  }
+  return null;
+}