Skip to content

Commit 0e5f8cc

Browse files
ReaJasonReaJason
committed
refactor: simplify component
1 parent a34b677 commit 0e5f8cc

18 files changed

+250
-184
lines changed

‎web/src/components/copyable-field.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export function CopyableField({ label, value, text }: Readonly<CopyableFieldProp
3939
<div className="flex items-center justify-between gap-2 h-8">
4040
<Label className="text-sm text-muted-foreground">{label}：</Label>
4141
{value && (
42-
<CopyToClipboard text={value as string} onCopy={handleCopy}>
42+
<CopyToClipboard text={value} onCopy={handleCopy}>
4343
<Button variant="ghost" size="icon" type="button" className="h-8 w-8" disabled={hasCopied}>
4444
{hasCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
4545
</Button>

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

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
1+
import {
2+
FormControl,
3+
FormDescription,
4+
FormField,
5+
FormFieldItem,
6+
FormFieldLabel,
7+
FormItem,
8+
FormLabel,
9+
} from "@/components/ui/form.tsx";
210
import { Label } from "@/components/ui/label.tsx";
311
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.tsx";
412
import { Switch } from "@/components/ui/switch.tsx";
@@ -203,8 +211,8 @@ export function MainConfigCard({
203211
control={form.control}
204212
name="server"
205213
render={({ field }) => (
206-
<FormItem className="gap-1">
207-
<FormLabel className="h-6 flex items-center">{t("mainConfig.server")}</FormLabel>
214+
<FormFieldItem>
215+
<FormFieldLabel>{t("mainConfig.server")}</FormFieldLabel>
208216
<Select
209217
onValueChange={(v) => {
210218
field.onChange(v);
@@ -213,7 +221,7 @@ export function MainConfigCard({
213221
value={field.value}
214222
>
215223
<FormControl>
216-
<SelectTrigger className="h-8">
224+
<SelectTrigger>
217225
<SelectValue placeholder={t("placeholders.select")} />
218226
</SelectTrigger>
219227
</FormControl>
@@ -237,17 +245,17 @@ export function MainConfigCard({
237245
<ArrowUpRightIcon className="h-4" />
238246
</a>
239247
</FormDescription>
240-
</FormItem>
248+
</FormFieldItem>
241249
)}
242250
/>
243251
<FormField
244252
control={form.control}
245253
name="targetJdkVersion"
246254
render={({ field }) => (
247-
<FormItem className="gap-1">
248-
<FormLabel className="h-6 flex items-center gap-1">
255+
<FormFieldItem>
256+
<FormFieldLabel>
249257
{t("mainConfig.jre")} {t("optional")} <JreTip />
250-
</FormLabel>
258+
</FormFieldLabel>
251259
<Select
252260
onValueChange={(v) => {
253261
if (Number.parseInt(v) >= 53) {
@@ -260,7 +268,7 @@ export function MainConfigCard({
260268
value={field.value}
261269
>
262270
<FormControl>
263-
<SelectTrigger className="h-8">
271+
<SelectTrigger>
264272
<SelectValue placeholder={t("placeholders.select")} />
265273
</SelectTrigger>
266274
</FormControl>
@@ -272,7 +280,7 @@ export function MainConfigCard({
272280
))}
273281
</SelectContent>
274282
</Select>
275-
</FormItem>
283+
</FormFieldItem>
276284
)}
277285
/>
278286
</div>

‎web/src/components/package-config-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export function PackageConfigCard({
7070
name="packingMethod"
7171
render={({ field }) => (
7272
<FormItem className="space-y-3">
73-
<FormLabel className="h-6 flex items-center gap-1">{t("packageConfig.title")}</FormLabel>
73+
<FormLabel>{t("packageConfig.title")}</FormLabel>
7474
<FormControl>
7575
<RadioGroup
7676
onValueChange={field.onChange}

‎web/src/components/results/multi-packer.tsx‎

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import { TFunction } from "i18next";
22
import { useEffect, useState } from "react";
3-
import { Fragment } from "react/jsx-runtime";
43
import { CodeViewer } from "../code-viewer";
54
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
65

76
export function MultiPackResult({
87
allPackResults,
98
packMethod,
109
t,
11-
}: {
10+
}: Readonly<{
1211
allPackResults: object | undefined;
1312
packMethod: string;
1413
t: TFunction;
15-
}) {
14+
}>) {
1615
const showCode = packMethod === "JSP";
1716
const packMethods = Object.keys(allPackResults ?? {});
1817
const [selectedMethod, setSelectedMethod] = useState(packMethods[0]);
@@ -26,38 +25,36 @@ export function MultiPackResult({
2625
}, [allPackResults]);
2726

2827
return (
29-
<Fragment>
30-
<CodeViewer
31-
code={packResult ?? ""}
32-
header={
33-
<div className="flex items-center justify-between text-xs gap-2">
34-
<Select
35-
onValueChange={(value) => {
36-
setSelectedMethod(value);
37-
setPackResult(allPackResults?.[value as keyof typeof allPackResults] ?? "");
38-
}}
39-
value={selectedMethod}
40-
>
41-
<SelectTrigger className="h-7 text-xs [&_svg]:h-4 [&_svg]:w-4">
42-
<span className="text-muted-foreground">{t("packageConfig.title")}:&nbsp;</span>
43-
<SelectValue />
44-
</SelectTrigger>
45-
<SelectContent>
46-
{packMethods.map((method) => (
47-
<SelectItem key={method} value={method} className="text-xs">
48-
{method}
49-
</SelectItem>
50-
))}
51-
</SelectContent>
52-
</Select>
53-
<span className="text-muted-foreground">({packResult?.length})</span>
54-
</div>
55-
}
56-
wrapLongLines={!showCode}
57-
showLineNumbers={showCode}
58-
language={showCode ? "java" : "text"}
59-
height={350}
60-
/>
61-
</Fragment>
28+
<CodeViewer
29+
code={packResult ?? ""}
30+
header={
31+
<div className="flex items-center justify-between text-xs gap-2">
32+
<Select
33+
onValueChange={(value) => {
34+
setSelectedMethod(value);
35+
setPackResult(allPackResults?.[value as keyof typeof allPackResults] ?? "");
36+
}}
37+
value={selectedMethod}
38+
>
39+
<SelectTrigger className="h-7 text-xs [&_svg]:h-4 [&_svg]:w-4">
40+
<span className="text-muted-foreground">{t("packageConfig.title")}:&nbsp;</span>
41+
<SelectValue />
42+
</SelectTrigger>
43+
<SelectContent>
44+
{packMethods.map((method) => (
45+
<SelectItem key={method} value={method} className="text-xs">
46+
{method}
47+
</SelectItem>
48+
))}
49+
</SelectContent>
50+
</Select>
51+
<span className="text-muted-foreground">({packResult?.length})</span>
52+
</div>
53+
}
54+
wrapLongLines={!showCode}
55+
showLineNumbers={showCode}
56+
language={showCode ? "java" : "text"}
57+
height={350}
58+
/>
6259
);
6360
}

‎web/src/components/shell-result.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function ShellResult({
3232
<TabsTrigger value="shell">{t("generateResult.title2")}</TabsTrigger>
3333
<TabsTrigger value="injector">{t("generateResult.title3")}</TabsTrigger>
3434
</TabsList>
35-
<TabsContent value="packResult" className="my-4 space-y-4">
35+
<TabsContent value="packResult" className="my-2 space-y-4">
3636
<BasicInfo generateResult={generateResult} />
3737
<ResultComponent
3838
packResult={packResult}

‎web/src/components/tools/antsword-tab.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FormSchema } from "@/types/schema";
22
import { FormProvider, UseFormReturn } from "react-hook-form";
33
import { useTranslation } from "react-i18next";
44
import { Card, CardContent } from "../ui/card";
5-
import { FormField, FormItem, FormLabel } from "../ui/form";
5+
import { FormField, FormFieldItem, FormFieldLabel } from "../ui/form";
66
import { Input } from "../ui/input";
77
import { TabsContent } from "../ui/tabs";
88
import { OptionalClassFormField } from "./classname-field";
@@ -27,35 +27,35 @@ export function AntSwordTabContent({
2727
control={form.control}
2828
name="antSwordPass"
2929
render={({ field }) => (
30-
<FormItem className="gap-1">
31-
<FormLabel className="h-6 flex items-center gap-1">
30+
<FormFieldItem>
31+
<FormFieldLabel>
3232
{t("shellToolConfig.antSwordPass")} {t("optional")}
33-
</FormLabel>
34-
<Input {...field} placeholder={t("placeholders.input")} className="h-8" />
35-
</FormItem>
33+
</FormFieldLabel>
34+
<Input {...field} placeholder={t("placeholders.input")} />
35+
</FormFieldItem>
3636
)}
3737
/>
3838
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
3939
<FormField
4040
control={form.control}
4141
name="headerName"
4242
render={({ field }) => (
43-
<FormItem className="gap-1">
44-
<FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
45-
<Input {...field} placeholder={t("placeholders.input")} className="h-8" />
46-
</FormItem>
43+
<FormFieldItem>
44+
<FormFieldLabel>{t("shellToolConfig.headerName")}</FormFieldLabel>
45+
<Input {...field} placeholder={t("placeholders.input")} />
46+
</FormFieldItem>
4747
)}
4848
/>
4949
<FormField
5050
control={form.control}
5151
name="headerValue"
5252
render={({ field }) => (
53-
<FormItem className="gap-1">
54-
<FormLabel className="h-6 flex items-center gap-1">
53+
<FormFieldItem>
54+
<FormFieldLabel>
5555
{t("shellToolConfig.headerValue")} {t("optional")}
56-
</FormLabel>
57-
<Input {...field} placeholder={t("placeholders.input")} className="h-8" />
58-
</FormItem>
56+
</FormFieldLabel>
57+
<Input {...field} placeholder={t("placeholders.input")} />
58+
</FormFieldItem>
5959
)}
6060
/>
6161
</div>

‎web/src/components/tools/behinder-tab.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FormSchema } from "@/types/schema";
22
import { FormProvider, UseFormReturn } from "react-hook-form";
33
import { useTranslation } from "react-i18next";
44
import { Card, CardContent } from "../ui/card";
5-
import { FormField, FormItem, FormLabel } from "../ui/form";
5+
import { FormField, FormFieldItem, FormFieldLabel } from "../ui/form";
66
import { Input } from "../ui/input";
77
import { TabsContent } from "../ui/tabs";
88
import { OptionalClassFormField } from "./classname-field";
@@ -27,35 +27,35 @@ export function BehinderTabContent({
2727
control={form.control}
2828
name="behinderPass"
2929
render={({ field }) => (
30-
<FormItem className="gap-1">
31-
<FormLabel className="h-6 flex items-center gap-1">
30+
<FormFieldItem>
31+
<FormFieldLabel>
3232
{t("shellToolConfig.behinderPass")} {t("optional")}
33-
</FormLabel>
34-
<Input {...field} placeholder={t("placeholders.input")} className="h-8" />
35-
</FormItem>
33+
</FormFieldLabel>
34+
<Input {...field} placeholder={t("placeholders.input")} />
35+
</FormFieldItem>
3636
)}
3737
/>
3838
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
3939
<FormField
4040
control={form.control}
4141
name="headerName"
4242
render={({ field }) => (
43-
<FormItem className="gap-1">
44-
<FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
45-
<Input {...field} placeholder={t("placeholders.input")} className="h-8" />
46-
</FormItem>
43+
<FormFieldItem>
44+
<FormFieldLabel>{t("shellToolConfig.headerName")}</FormFieldLabel>
45+
<Input {...field} placeholder={t("placeholders.input")} />
46+
</FormFieldItem>
4747
)}
4848
/>
4949
<FormField
5050
control={form.control}
5151
name="headerValue"
5252
render={({ field }) => (
53-
<FormItem className="gap-1">
54-
<FormLabel className="h-6 flex items-center gap-1">
53+
<FormFieldItem>
54+
<FormFieldLabel>
5555
{t("shellToolConfig.headerValue")} {t("optional")}
56-
</FormLabel>
57-
<Input {...field} placeholder={t("placeholders.input")} className="h-8" />
58-
</FormItem>
56+
</FormFieldLabel>
57+
<Input {...field} placeholder={t("placeholders.input")} />
58+
</FormFieldItem>
5959
)}
6060
/>
6161
</div>

‎web/src/components/tools/classname-field.tsx‎

Lines changed: 48 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,58 @@
1-
import { FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
1+
import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form.tsx";
22
import { Input } from "@/components/ui/input.tsx";
33
import { FormSchema } from "@/types/schema.ts";
4+
import { ChevronDown, ChevronUp, Settings } from "lucide-react";
5+
import { Fragment, useState } from "react";
46
import { FormProvider, UseFormReturn } from "react-hook-form";
57
import { useTranslation } from "react-i18next";
8+
import { Button } from "../ui/button";
69

710
export function OptionalClassFormField({ form }: Readonly<{ form: UseFormReturn<FormSchema> }>) {
811
const { t } = useTranslation();
12+
const [showAdvanced, setShowAdvanced] = useState(false);
913
return (
10-
<FormProvider {...form}>
11-
<FormField
12-
control={form.control}
13-
name="shellClassName"
14-
render={({ field }) => (
15-
<FormItem className="gap-1">
16-
<FormLabel className="h-6 flex items-center gap-1">
17-
{t("mainConfig.shellClassName")} {t("optional")}
18-
</FormLabel>
19-
<Input id="shellClassName" {...field} placeholder={t("placeholders.input")} className="h-8" />
20-
</FormItem>
21-
)}
22-
/>
23-
<FormField
24-
control={form.control}
25-
name="injectorClassName"
26-
render={({ field }) => (
27-
<FormItem className="gap-1">
28-
<FormLabel className="h-6 flex items-center gap-1">
29-
{t("mainConfig.injectorClassName")} {t("optional")}
30-
</FormLabel>
31-
<Input id="injectorClassName" {...field} placeholder={t("placeholders.input")} className="h-8" />
32-
</FormItem>
33-
)}
34-
/>
35-
</FormProvider>
14+
<Fragment>
15+
<div className="pt-2">
16+
<Button
17+
type="button"
18+
variant="outline"
19+
size="sm"
20+
onClick={() => setShowAdvanced(!showAdvanced)}
21+
className="flex items-center gap-2"
22+
>
23+
<Settings className="h-4 w-4" />
24+
{t("classNameOptions")}
25+
{showAdvanced ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
26+
</Button>
27+
</div>
28+
{showAdvanced && (
29+
<FormProvider {...form}>
30+
<FormField
31+
control={form.control}
32+
name="shellClassName"
33+
render={({ field }) => (
34+
<FormFieldItem>
35+
<FormFieldLabel>
36+
{t("mainConfig.shellClassName")} {t("optional")}
37+
</FormFieldLabel>
38+
<Input id="shellClassName" {...field} placeholder={t("placeholders.input")} />
39+
</FormFieldItem>
40+
)}
41+
/>
42+
<FormField
43+
control={form.control}
44+
name="injectorClassName"
45+
render={({ field }) => (
46+
<FormFieldItem>
47+
<FormFieldLabel>
48+
{t("mainConfig.injectorClassName")} {t("optional")}
49+
</FormFieldLabel>
50+
<Input id="injectorClassName" {...field} placeholder={t("placeholders.input")} />
51+
</FormFieldItem>
52+
)}
53+
/>
54+
</FormProvider>
55+
)}
56+
</Fragment>
3657
);
3758
}

0 commit comments

Comments
 (0)