refactor: migrate radix-ui to base-ui

This commit is contained in:
ReaJason
2025-12-16 21:55:21 +08:00
parent 0f473311f9
commit 930edbc8b0
55 changed files with 2117 additions and 3269 deletions
@@ -1,12 +1,7 @@
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import {
FormControl,
FormField,
FormFieldItem,
FormFieldLabel,
} from "@/components/ui/form";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { TabsContent } from "@/components/ui/tabs";
import type { MemShellFormSchema } from "@/types/schema";
@@ -23,65 +18,61 @@ export function AntSwordTabContent({
}>) {
const { t } = useTranslation(["memshell", "common"]);
return (
<FormProvider {...form}>
<TabsContent value="AntSword">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<FormField
<TabsContent value="AntSword">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<Controller
control={form.control}
name="antSwordPass"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>
{t("shellToolConfig.antSword.pass")} {t("common:optional")}
</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<Controller
control={form.control}
name="antSwordPass"
name="headerName"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("shellToolConfig.antSword.pass")} {t("common:optional")}
</FormFieldLabel>
<Field className="gap-1">
<FieldLabel>{t("common:headerName")}</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
</Field>
)}
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<FormField
control={form.control}
name="headerName"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>{t("common:headerName")}</FormFieldLabel>
<FormControl>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormControl>
</FormFieldItem>
)}
/>
<FormField
control={form.control}
name="headerValue"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("common:headerValue")} {t("common:optional")}
</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
</div>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
</FormProvider>
<Controller
control={form.control}
name="headerValue"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>
{t("common:headerValue")} {t("common:optional")}
</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
</div>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
);
}
@@ -1,7 +1,7 @@
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { TabsContent } from "@/components/ui/tabs";
import type { MemShellFormSchema } from "@/types/schema";
@@ -18,63 +18,61 @@ export function BehinderTabContent({
}>) {
const { t } = useTranslation(["memshell", "common"]);
return (
<FormProvider {...form}>
<TabsContent value="Behinder">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<FormField
<TabsContent value="Behinder">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<Controller
control={form.control}
name="behinderPass"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>
{t("shellToolConfig.behinder.pass")} {t("common:optional")}
</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<Controller
control={form.control}
name="behinderPass"
name="headerName"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("shellToolConfig.behinder.pass")} {t("common:optional")}
</FormFieldLabel>
<Field className="gap-1">
<FieldLabel>{t("common:headerName")}</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
</Field>
)}
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<FormField
control={form.control}
name="headerName"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>{t("common:headerName")}</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
<FormField
control={form.control}
name="headerValue"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("common:headerValue")} {t("common:optional")}
</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
</div>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
</FormProvider>
<Controller
control={form.control}
name="headerValue"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>
{t("common:headerValue")} {t("common:optional")}
</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
</div>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
);
}
@@ -1,8 +1,8 @@
import { Shuffle } from "lucide-react";
import { Fragment, useEffect, useState } from "react";
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import type { MemShellFormSchema } from "@/types/schema";
@@ -72,44 +72,43 @@ export function OptionalClassFormField({
onCheckedChange={handleToggleRandomClass}
/>
</div>
<FormProvider {...form}>
{!useRandomClassName && (
<FormField
control={form.control}
name="shellClassName"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel htmlFor="shellClassName">
{t("mainConfig.shellClassName")} {t("common:optional")}
</FormFieldLabel>
<Input
id="shellClassName"
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
)}
{!useRandomClassName && (
<FormField
control={form.control}
name="injectorClassName"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel htmlFor="injectClassName">
{t("mainConfig.injectorClassName")} {t("common:optional")}
</FormFieldLabel>
<Input
id="injectClassName"
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
)}
</FormProvider>
{!useRandomClassName && (
<Controller
control={form.control}
name="shellClassName"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel htmlFor="shellClassName">
{t("mainConfig.shellClassName")} {t("common:optional")}
</FieldLabel>
<Input
id="shellClassName"
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
)}
{!useRandomClassName && (
<Controller
control={form.control}
name="injectorClassName"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel htmlFor="injectClassName">
{t("mainConfig.injectorClassName")} {t("common:optional")}
</FieldLabel>
<Input
id="injectClassName"
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
)}
</Fragment>
);
}
+120 -137
View File
@@ -1,7 +1,7 @@
import { useQuery } from "@tanstack/react-query";
import { ChevronDown, ChevronRight, InfoIcon } from "lucide-react";
import { useState } from "react";
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import {
@@ -9,12 +9,7 @@ import {
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
FormControl,
FormField,
FormFieldItem,
FormFieldLabel,
} from "@/components/ui/form";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
Select,
@@ -56,141 +51,129 @@ export function CommandTabContent({
});
return (
<FormProvider {...form}>
<TabsContent value="Command">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<FormField
control={form.control}
name="commandParamName"
render={({ field }) => (
<FormFieldItem>
<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}
placeholder={t("common:placeholders.input")}
/>
</FormControl>
</FormFieldItem>
)}
/>
<Collapsible open={isAdvancedOpen} onOpenChange={setIsAdvancedOpen}>
<CollapsibleTrigger className="flex items-center gap-2 w-full py-2 text-sm font-medium hover:underline">
{isAdvancedOpen ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
{t("common:advancedConfig")}
</CollapsibleTrigger>
<CollapsibleContent className="space-y-2 pt-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<FormField
control={form.control}
name="encryptor"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>{t("common:encryptor")}</FormFieldLabel>
<Select
onValueChange={field.onChange}
value={field.value}
defaultValue="RAW"
>
<FormControl>
<SelectTrigger>
<SelectValue
placeholder={t("common:placeholders.select")}
/>
</SelectTrigger>
</FormControl>
<SelectContent>
{data?.encryptors?.map((v) => (
<SelectItem key={v} value={v}>
{v}
</SelectItem>
))}
</SelectContent>
</Select>
</FormFieldItem>
)}
/>
<FormField
control={form.control}
name="implementationClass"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("common:implementationClass")}
</FormFieldLabel>
<Select
onValueChange={field.onChange}
value={field.value}
defaultValue="RuntimeExec"
>
<FormControl>
<SelectTrigger>
<SelectValue
placeholder={t("common:placeholders.select")}
/>
</SelectTrigger>
</FormControl>
<SelectContent>
{data?.implementationClasses?.map((v) => (
<SelectItem key={v} value={v}>
{v}
</SelectItem>
))}
</SelectContent>
</Select>
</FormFieldItem>
)}
/>
<TabsContent value="Command">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<Controller
control={form.control}
name="commandParamName"
render={({ field }) => (
<Field className="gap-1">
<div className="flex items-center gap-1">
<FieldLabel>
{t("common:paramName")} {t("common:optional")}
</FieldLabel>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent>
<p>{t("common:paramName.description")}</p>
</TooltipContent>
</Tooltip>
</div>
<FormField
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
<Collapsible open={isAdvancedOpen} onOpenChange={setIsAdvancedOpen}>
<CollapsibleTrigger className="flex items-center gap-2 w-full py-2 text-sm font-medium hover:underline">
{isAdvancedOpen ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
{t("common:advancedConfig")}
</CollapsibleTrigger>
<CollapsibleContent className="space-y-2 pt-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<Controller
control={form.control}
name="commandTemplate"
name="encryptor"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("common:commandTemplate")} {t("common:optional")}
</FormFieldLabel>
<FormControl>
<Input
{...field}
placeholder={t("common:commandTemplate.placeholder")}
/>
</FormControl>
<p className="text-xs text-muted-foreground mt-1">
{t("common:commandTemplate.description")}
</p>
</FormFieldItem>
<Field className="gap-1">
<FieldLabel>{t("common:encryptor")}</FieldLabel>
<Select
onValueChange={field.onChange}
value={field.value}
defaultValue="RAW"
>
<SelectTrigger>
<SelectValue
data-placeholder={t("common:placeholders.select")}
/>
</SelectTrigger>
<SelectContent>
{data?.encryptors?.map((v) => (
<SelectItem key={v} value={v}>
{v}
</SelectItem>
))}
</SelectContent>
</Select>
</Field>
)}
/>
</CollapsibleContent>
</Collapsible>
<Controller
control={form.control}
name="implementationClass"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>{t("common:implementationClass")}</FieldLabel>
<Select
onValueChange={field.onChange}
value={field.value}
defaultValue="RuntimeExec"
>
<SelectTrigger>
<SelectValue
data-placeholder={t("common:placeholders.select")}
/>
</SelectTrigger>
<SelectContent>
{data?.implementationClasses?.map((v) => (
<SelectItem key={v} value={v}>
{v}
</SelectItem>
))}
</SelectContent>
</Select>
</Field>
)}
/>
</div>
<Controller
control={form.control}
name="commandTemplate"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>
{t("common:commandTemplate")} {t("common:optional")}
</FieldLabel>
<Input
{...field}
placeholder={t("common:commandTemplate.placeholder")}
/>
<p className="text-xs text-muted-foreground mt-1">
{t("common:commandTemplate.description")}
</p>
</Field>
)}
/>
</CollapsibleContent>
</Collapsible>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
</FormProvider>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
);
}
+68 -77
View File
@@ -1,15 +1,9 @@
import { useEffect, useRef, useState } from "react";
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import { Card, CardContent } from "@/components/ui/card";
import {
FormControl,
FormField,
FormFieldItem,
FormFieldLabel,
FormMessage,
} from "@/components/ui/form";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
@@ -90,74 +84,71 @@ export default function CustomTabContent({
}, [classNameEndpoint, form, shellClassBase64, t]);
return (
<FormProvider {...form}>
<TabsContent value="Custom">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<FormField
control={form.control}
name="shellClassBase64"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>{t("shellClass")}</FormFieldLabel>
<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="optionOne" />
<Label htmlFor="optionOne">Base64</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="file" id="optionTwo" />
<Label htmlFor="optionTwo">File</Label>
</div>
</RadioGroup>
<FormControl className="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("common:placeholders.input")}
type="file"
/>
) : (
<Textarea
{...field}
placeholder={t("common:placeholders.input")}
className="h-24"
/>
)}
</FormControl>
<FormMessage />
</FormFieldItem>
)}
/>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
</FormProvider>
<TabsContent value="Custom">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<Controller
control={form.control}
name="shellClassBase64"
render={({ field, fieldState }) => (
<Field className="gap-1">
<FieldLabel>{t("shellClass")}</FieldLabel>
<RadioGroup
value={isFile ? "file" : "base64"}
onValueChange={(value) => {
field.onChange("");
setIsFile(value === "file");
}}
className="flex items-center"
>
<div className="flex items-center">
<RadioGroupItem value="base64" id="optionOne" />
<Label htmlFor="optionOne">Base64</Label>
</div>
<div className="flex items-center">
<RadioGroupItem value="file" id="optionTwo" />
<Label htmlFor="optionTwo">File</Label>
</div>
</RadioGroup>
<div className="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("common:placeholders.input")}
type="file"
/>
) : (
<Textarea
{...field}
placeholder={t("common:placeholders.input")}
className="h-24"
/>
)}
</div>
{fieldState.error && <FieldError errors={[fieldState.error]} />}
</Field>
)}
/>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
);
}
@@ -1,7 +1,7 @@
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { TabsContent } from "@/components/ui/tabs";
import type { MemShellFormSchema } from "@/types/schema";
@@ -18,79 +18,76 @@ export function GodzillaTabContent({
}>) {
const { t } = useTranslation(["memshell", "common"]);
return (
<FormProvider {...form}>
<TabsContent value="Godzilla">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<FormField
control={form.control}
name="godzillaPass"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("shellToolConfig.godzilla.pass")}{" "}
{t("common:optional")}
</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
<FormField
control={form.control}
name="godzillaKey"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("shellToolConfig.godzilla.key")} {t("common:optional")}
</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
<FormField
control={form.control}
name="headerName"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>{t("common:headerName")}</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
<FormField
control={form.control}
name="headerValue"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("common:headerValue")} {t("common:optional")}
</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
</div>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
</FormProvider>
<TabsContent value="Godzilla">
<Card>
<CardContent className="flex flex-col gap-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<Controller
control={form.control}
name="godzillaPass"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>
{t("shellToolConfig.godzilla.pass")} {t("common:optional")}
</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
<Controller
control={form.control}
name="godzillaKey"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>
{t("shellToolConfig.godzilla.key")} {t("common:optional")}
</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
<Controller
control={form.control}
name="headerName"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>{t("common:headerName")}</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
<Controller
control={form.control}
name="headerValue"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>
{t("common:headerValue")} {t("common:optional")}
</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
</div>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
);
}
+43 -45
View File
@@ -1,7 +1,7 @@
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { TabsContent } from "@/components/ui/tabs";
import type { MemShellFormSchema } from "@/types/schema";
@@ -18,48 +18,46 @@ export function NeoRegTabContent({
}>) {
const { t } = useTranslation(["memshell", "common"]);
return (
<FormProvider {...form}>
<TabsContent value="NeoreGeorg">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<FormField
control={form.control}
name="headerName"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>{t("common:headerName")}</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
<FormField
control={form.control}
name="headerValue"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("common:headerValue")} {t("common:optional")}
</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
</div>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
</FormProvider>
<TabsContent value="NeoreGeorg">
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<Controller
control={form.control}
name="headerName"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>{t("common:headerName")}</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
<Controller
control={form.control}
name="headerValue"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>
{t("common:headerValue")} {t("common:optional")}
</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
</div>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
);
}
@@ -1,11 +1,6 @@
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import {
FormControl,
FormField,
FormFieldItem,
FormFieldLabel,
} from "@/components/ui/form";
import { Field, FieldLabel } from "@/components/ui/field";
import {
Select,
SelectContent,
@@ -24,42 +19,38 @@ export function ShellTypeFormField({
}>) {
const { t } = useTranslation(["memshell", "common"]);
return (
<FormProvider {...form}>
<FormField
control={form.control}
name="shellType"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>{t("mainConfig.shellMountType")}</FormFieldLabel>
<Select
onValueChange={(e) => {
form.resetField("urlPattern");
field.onChange(e);
}}
value={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={t("common:placeholders.select")} />
</SelectTrigger>
</FormControl>
<SelectContent key={shellTypes?.join(",")}>
{shellTypes?.length ? (
shellTypes.map((v) => (
<SelectItem key={v} value={v}>
{v}
</SelectItem>
))
) : (
<SelectItem value=" ">
{t("tips.shellToolNotSelected")}
<Controller
control={form.control}
name="shellType"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>{t("mainConfig.shellMountType")}</FieldLabel>
<Select
onValueChange={(e) => {
form.resetField("urlPattern");
field.onChange(e);
}}
value={field.value}
>
<SelectTrigger>
<SelectValue data-placeholder={t("common:placeholders.select")} />
</SelectTrigger>
<SelectContent key={shellTypes?.join(",")}>
{shellTypes?.length ? (
shellTypes.map((v) => (
<SelectItem key={v} value={v}>
{v}
</SelectItem>
)}
</SelectContent>
</Select>
</FormFieldItem>
)}
/>
</FormProvider>
))
) : (
<SelectItem value=" ">
{t("tips.shellToolNotSelected")}
</SelectItem>
)}
</SelectContent>
</Select>
</Field>
)}
/>
);
}
+43 -45
View File
@@ -1,7 +1,7 @@
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { TabsContent } from "@/components/ui/tabs";
import type { MemShellFormSchema } from "@/types/schema";
@@ -20,48 +20,46 @@ export function Suo5TabContent({
}>) {
const { t } = useTranslation(["memshell", "common"]);
return (
<FormProvider {...form}>
<TabsContent value={tabValue}>
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<FormField
control={form.control}
name="headerName"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>{t("common:headerName")}</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
<FormField
control={form.control}
name="headerValue"
render={({ field }) => (
<FormFieldItem>
<FormFieldLabel>
{t("common:headerValue")} {t("common:optional")}
</FormFieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</FormFieldItem>
)}
/>
</div>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
</FormProvider>
<TabsContent value={tabValue}>
<Card>
<CardContent className="space-y-2 mt-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<ShellTypeFormField form={form} shellTypes={shellTypes} />
<UrlPatternFormField form={form} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<Controller
control={form.control}
name="headerName"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>{t("common:headerName")}</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
<Controller
control={form.control}
name="headerValue"
render={({ field }) => (
<Field className="gap-1">
<FieldLabel>
{t("common:headerValue")} {t("common:optional")}
</FieldLabel>
<Input
{...field}
placeholder={t("common:placeholders.input")}
/>
</Field>
)}
/>
</div>
<OptionalClassFormField form={form} />
</CardContent>
</Card>
</TabsContent>
);
}
@@ -1,13 +1,8 @@
import { FormProvider, type UseFormReturn } from "react-hook-form";
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import {
FormField,
FormFieldItem,
FormFieldLabel,
FormMessage,
} from "@/components/ui/form";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { shouldHidden } from "@/lib/utils";
import { cn, shouldHidden } from "@/lib/utils";
import type { MemShellFormSchema } from "@/types/schema";
export function UrlPatternFormField({
@@ -16,20 +11,19 @@ export function UrlPatternFormField({
const { t } = useTranslation("common");
const shellType = form.watch("shellType");
return (
<FormProvider {...form}>
<FormField
control={form.control}
name="urlPattern"
render={({ field }) => (
<FormFieldItem
className={shouldHidden(shellType) ? "hidden" : "grid"}
>
<FormFieldLabel>{t("urlPattern")}</FormFieldLabel>
<Input {...field} placeholder={t("placeholders.input")} />
<FormMessage />
</FormFieldItem>
)}
/>
</FormProvider>
<Controller
control={form.control}
name="urlPattern"
render={({ field, fieldState }) => (
<Field
className={cn("gap-1", shouldHidden(shellType) ? "hidden" : "grid")}
data-invalid={fieldState.invalid}
>
<FieldLabel>{t("urlPattern")}</FieldLabel>
<Input {...field} placeholder={t("placeholders.input")} />
{fieldState.error && <FieldError errors={[fieldState.error]} />}
</Field>
)}
/>
);
}