feat: support custom shell generator (#49)

web/src/components/main-config-card.tsx

@@ -4,7 +4,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Switch } from "@/components/ui/switch.tsx";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { FormSchema } from "@/types/schema.ts";
-import { JDKVersion, MainConfig, ShellToolType } from "@/types/shell.ts";
+import { JDKVersion, MainConfig, ServerConfig, ShellToolType } from "@/types/shell.ts";
 
 import { JreTip } from "@/components/tips/jre-tip.tsx";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
@@ -17,6 +17,7 @@ import {
   ShieldOffIcon,
   SwordIcon,
   WaypointsIcon,
+  ZapIcon,
 } from "lucide-react";
 import { JSX, useState } from "react";
 import { FormProvider, UseFormReturn } from "react-hook-form";
@@ -24,6 +25,7 @@ import { useTranslation } from "react-i18next";
 import { AntSwordTabContent } from "./tools/antsword-tab";
 import { BehinderTabContent } from "./tools/behinder-tab";
 import { CommandTabContent } from "./tools/command-tab";
+import CustomTabContent from "./tools/custom-tab";
 import { GodzillaTabContent } from "./tools/godzilla-tab";
 import { NeoRegTabContent } from "./tools/neoreg-tab";
 import { Suo5TabContent } from "./tools/suo5-tab";
@@ -35,17 +37,18 @@ const shellToolIcons: Record<ShellToolType, JSX.Element> = {
   [ShellToolType.AntSword]: <SwordIcon className="h-4 w-4" />,
   [ShellToolType.Suo5]: <WaypointsIcon className="h-4 w-4" />,
   [ShellToolType.NeoreGeorg]: <NetworkIcon className="h-4 w-4" />,
+  [ShellToolType.Custom]: <ZapIcon className="h-4 w-4" />,
 };
 
 export function MainConfigCard({
   mainConfig,
   form,
   servers,
-}: {
+}: Readonly<{
   mainConfig: MainConfig | undefined;
   form: UseFormReturn<FormSchema>;
-  servers?: string[];
-}) {
+  servers?: ServerConfig;
+}>) {
   const [shellToolMap, setShellToolMap] = useState<{
     [toolName: string]: string[];
   }>();
@@ -56,6 +59,7 @@ export function MainConfigCard({
     ShellToolType.Command,
     ShellToolType.Suo5,
     ShellToolType.NeoreGeorg,
+    ShellToolType.Custom,
   ]);
   const [shellTypes, setShellTypes] = useState<string[]>([]);
   const shellTool = form.watch("shellTool");
@@ -66,7 +70,7 @@ export function MainConfigCard({
       const newShellToolMap = mainConfig[value];
       setShellToolMap(newShellToolMap);
       const newShellTools = Object.keys(newShellToolMap);
-      setShellTools(newShellTools.map((tool) => tool as ShellToolType));
+      setShellTools([...newShellTools.map((tool) => tool as ShellToolType), ShellToolType.Custom]);
       if (newShellTools.length > 0) {
         const firstTool = newShellTools[0];
         setShellTypes(newShellToolMap[firstTool]);
@@ -124,8 +128,17 @@ export function MainConfigCard({
       form.resetField("headerValue");
     };
 
+    const resetCustom = () => {
+      form.resetField("shellClassBase64");
+    };
+
     if (shellToolMap) {
-      setShellTypes(shellToolMap[value]);
+      if (value === ShellToolType.Custom) {
+        setShellTypes(servers?.[form.getValues("server")] as string[]);
+      } else {
+        setShellTypes(shellToolMap[value]);
+      }
+
       form.resetField("urlPattern");
       form.resetField("shellType");
       form.resetField("shellClassName");
@@ -142,6 +155,8 @@ export function MainConfigCard({
         resetAntSword();
       } else if (value === ShellToolType.NeoreGeorg) {
         resetNeoreGeorg();
+      } else if (value === ShellToolType.Custom) {
+        resetCustom();
       }
     }
     form.setValue("shellTool", value);
@@ -177,7 +192,7 @@ export function MainConfigCard({
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {servers?.map((server: string) => (
+                      {Object.keys(servers ?? {}).map((server: string) => (
                         <SelectItem key={server} value={server}>
                           {server}
                         </SelectItem>
@@ -291,7 +306,7 @@ export function MainConfigCard({
                 className="flex-1 min-w-24 data-[state=active]:bg-background"
               >
                 <span className="flex items-center gap-2">
-                  {shellToolIcons[shellTool as ShellToolType]}
+                  {shellToolIcons[shellTool]}
                   {shellTool}
                 </span>
               </TabsTrigger>
@@ -305,6 +320,7 @@ export function MainConfigCard({
         <AntSwordTabContent form={form} shellTypes={shellTypes} />
         <Suo5TabContent form={form} shellTypes={shellTypes} />
         <NeoRegTabContent form={form} shellTypes={shellTypes} />
+        <CustomTabContent form={form} shellTypes={shellTypes} />
       </Tabs>
     </FormProvider>
   );

web/src/components/results/basic-info.tsx

@@ -10,13 +10,12 @@ import {
 } from "@/types/shell";
 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 { Separator } from "../ui/separator";
 import { FeedbackAlert } from "./feedback-alert";
 
-export function BasicInfo({ generateResult }: { generateResult?: GenerateResult }) {
+export function BasicInfo({ generateResult }: Readonly<{ generateResult?: GenerateResult }>) {
   const { t } = useTranslation();
   return (
     <Card>
@@ -40,7 +39,7 @@ export function BasicInfo({ generateResult }: { generateResult?: GenerateResult
             value={generateResult?.injectorConfig.urlPattern}
           />
         </div>
-        <Separator className="my-2" />
+        {generateResult?.shellConfig.shellTool !== ShellToolType.Custom && <Separator className="my-2" />}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
           {generateResult?.shellConfig.shellTool === ShellToolType.Behinder && (
             <>
@@ -62,7 +61,7 @@ export function BasicInfo({ generateResult }: { generateResult?: GenerateResult
             </>
           )}
           {generateResult?.shellConfig.shellTool === ShellToolType.Godzilla && (
-            <Fragment>
+            <>
               <CopyableField
                 label={t("shellToolConfig.pass")}
                 text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
@@ -80,28 +79,24 @@ export function BasicInfo({ generateResult }: { generateResult?: GenerateResult
                 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 === ShellToolType.Command && (
-            <Fragment>
-              <CopyableField
-                label={t("shellToolConfig.paramName")}
-                text={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
-                value={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
-              />
-            </Fragment>
+            <CopyableField
+              label={t("shellToolConfig.paramName")}
+              text={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
+              value={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
+            />
           )}
           {generateResult?.shellConfig.shellTool === ShellToolType.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>
+            <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}`}
+            />
           )}
           {generateResult?.shellConfig.shellTool === ShellToolType.AntSword && (
-            <Fragment>
+            <>
               <CopyableField
                 label={t("shellToolConfig.antSwordPass")}
                 text={(generateResult?.shellToolConfig as AntSwordShellToolConfig).pass}
@@ -112,17 +107,17 @@ export function BasicInfo({ generateResult }: { generateResult?: GenerateResult
                 text={`${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerValue}`}
                 value={`${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerValue}`}
               />
-            </Fragment>
+            </>
           )}
           {generateResult?.shellConfig.shellTool === ShellToolType.NeoreGeorg && (
-            <Fragment>
+            <>
               <CopyableField label={t("shellToolConfig.neoreGeorgKey")} text="key" value="key" />
               <CopyableField
                 label={t("shellToolConfig.neoreGeorgHeader")}
                 text={`${(generateResult?.shellToolConfig as NeoreGeorgShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as NeoreGeorgShellToolConfig).headerValue}`}
                 value={`${(generateResult?.shellToolConfig as NeoreGeorgShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as NeoreGeorgShellToolConfig).headerValue}`}
               />
-            </Fragment>
+            </>
           )}
         </div>
         <Separator className="my-2" />

web/src/components/tools/custom-tab.tsx

@@ -0,0 +1,85 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { TabsContent } from "@/components/ui/tabs";
+import { FormSchema } from "@/types/schema";
+import { t } from "i18next";
+import { useState } from "react";
+import { FormProvider, UseFormReturn } from "react-hook-form";
+import { FormControl, FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
+import { Textarea } from "../ui/textarea";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
+
+export default function CustomTabContent({
+  form,
+  shellTypes,
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
+  const [isFile, setIsFile] = useState(false);
+
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Custom">
+        <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="shellClassBase64"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.base64String")}</FormLabel>
+                  <RadioGroup
+                    value={isFile ? "file" : "base64"}
+                    onValueChange={(value) => {
+                      field.onChange("");
+                      setIsFile(value === "file");
+                    }}
+                    className="flex items-center space-x-2"
+                  >
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="base64" id="option-one" />
+                      <Label htmlFor="option-one">Base64</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="file" id="option-two" />
+                      <Label htmlFor="option-two">File</Label>
+                    </div>
+                  </RadioGroup>
+                  <FormControl className="pt-2 mt-2">
+                    {isFile ? (
+                      <Input
+                        onChange={(e) => {
+                          const file = e.target.files?.[0];
+                          if (file) {
+                            const reader = new FileReader();
+                            reader.onload = (event) => {
+                              const base64String = (event.target?.result as string)?.split(",")[1] || "";
+                              field.onChange(base64String);
+                            };
+                            reader.readAsDataURL(file);
+                          }
+                        }}
+                        accept=".class"
+                        placeholder={t("placeholders.input")}
+                        type="file"
+                      />
+                    ) : (
+                      <Textarea {...field} placeholder={t("placeholders.input")} className="h-24" />
+                    )}
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}