refactor: simplify component

web/src/components/copyable-field.tsx

@@ -39,7 +39,7 @@ export function CopyableField({ label, value, text }: Readonly<CopyableFieldProp
       <div className="flex items-center justify-between gap-2 h-8">
         <Label className="text-sm text-muted-foreground">{label}：</Label>
         {value && (
-          <CopyToClipboard text={value as string} onCopy={handleCopy}>
+          <CopyToClipboard text={value} 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>

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

@@ -1,4 +1,12 @@
-import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form.tsx";
 import { Label } from "@/components/ui/label.tsx";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.tsx";
 import { Switch } from "@/components/ui/switch.tsx";
@@ -203,8 +211,8 @@ export function MainConfigCard({
               control={form.control}
               name="server"
               render={({ field }) => (
-                <FormItem className="gap-1">
+                <FormFieldItem>
-                  <FormLabel className="h-6 flex items-center">{t("mainConfig.server")}</FormLabel>
+                  <FormFieldLabel>{t("mainConfig.server")}</FormFieldLabel>
                   <Select
                     onValueChange={(v) => {
                       field.onChange(v);
@@ -213,7 +221,7 @@ export function MainConfigCard({
                     value={field.value}
                   >
                     <FormControl>
-                      <SelectTrigger className="h-8">
+                      <SelectTrigger>
                         <SelectValue placeholder={t("placeholders.select")} />
                       </SelectTrigger>
                     </FormControl>
@@ -237,17 +245,17 @@ export function MainConfigCard({
                       <ArrowUpRightIcon className="h-4" />
                     </a>
                   </FormDescription>
-                </FormItem>
+                </FormFieldItem>
               )}
             />
             <FormField
               control={form.control}
               name="targetJdkVersion"
               render={({ field }) => (
-                <FormItem className="gap-1">
+                <FormFieldItem>
-                  <FormLabel className="h-6 flex items-center gap-1">
+                  <FormFieldLabel>
                     {t("mainConfig.jre")} {t("optional")} <JreTip />
-                  </FormLabel>
+                  </FormFieldLabel>
                   <Select
                     onValueChange={(v) => {
                       if (Number.parseInt(v) >= 53) {
@@ -260,7 +268,7 @@ export function MainConfigCard({
                     value={field.value}
                   >
                     <FormControl>
-                      <SelectTrigger className="h-8">
+                      <SelectTrigger>
                         <SelectValue placeholder={t("placeholders.select")} />
                       </SelectTrigger>
                     </FormControl>
@@ -272,7 +280,7 @@ export function MainConfigCard({
                       ))}
                     </SelectContent>
                   </Select>
-                </FormItem>
+                </FormFieldItem>
               )}
             />
           </div>

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

@@ -70,7 +70,7 @@ export function PackageConfigCard({
               name="packingMethod"
               render={({ field }) => (
                 <FormItem className="space-y-3">
-                  <FormLabel className="h-6 flex items-center gap-1">{t("packageConfig.title")}</FormLabel>
+                  <FormLabel>{t("packageConfig.title")}</FormLabel>
                   <FormControl>
                     <RadioGroup
                       onValueChange={field.onChange}

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

@@ -1,6 +1,5 @@
 import { TFunction } from "i18next";
 import { useEffect, useState } from "react";
-import { Fragment } from "react/jsx-runtime";
 import { CodeViewer } from "../code-viewer";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
@@ -8,11 +7,11 @@ export function MultiPackResult({
   allPackResults,
   packMethod,
   t,
-}: {
+}: Readonly<{
   allPackResults: object | undefined;
   packMethod: string;
   t: TFunction;
-}) {
+}>) {
   const showCode = packMethod === "JSP";
   const packMethods = Object.keys(allPackResults ?? {});
   const [selectedMethod, setSelectedMethod] = useState(packMethods[0]);
@@ -26,38 +25,36 @@ export function MultiPackResult({
   }, [allPackResults]);
 
   return (
-    <Fragment>
+    <CodeViewer
-      <CodeViewer
+      code={packResult ?? ""}
-        code={packResult ?? ""}
+      header={
-        header={
+        <div className="flex items-center justify-between text-xs gap-2">
-          <div className="flex items-center justify-between text-xs gap-2">
+          <Select
-            <Select
+            onValueChange={(value) => {
-              onValueChange={(value) => {
+              setSelectedMethod(value);
-                setSelectedMethod(value);
+              setPackResult(allPackResults?.[value as keyof typeof allPackResults] ?? "");
-                setPackResult(allPackResults?.[value as keyof typeof allPackResults] ?? "");
+            }}
-              }}
+            value={selectedMethod}
-              value={selectedMethod}
+          >
-            >
+            <SelectTrigger className="h-7 text-xs [&_svg]:h-4 [&_svg]:w-4">
-              <SelectTrigger className="h-7 text-xs [&_svg]:h-4 [&_svg]:w-4">
+              <span className="text-muted-foreground">{t("packageConfig.title")}:&nbsp;</span>
-                <span className="text-muted-foreground">{t("packageConfig.title")}:&nbsp;</span>
+              <SelectValue />
-                <SelectValue />
+            </SelectTrigger>
-              </SelectTrigger>
+            <SelectContent>
-              <SelectContent>
+              {packMethods.map((method) => (
-                {packMethods.map((method) => (
+                <SelectItem key={method} value={method} className="text-xs">
-                  <SelectItem key={method} value={method} className="text-xs">
+                  {method}
-                    {method}
+                </SelectItem>
-                  </SelectItem>
+              ))}
-                ))}
+            </SelectContent>
-              </SelectContent>
+          </Select>
-            </Select>
+          <span className="text-muted-foreground">({packResult?.length})</span>
-            <span className="text-muted-foreground">({packResult?.length})</span>
+        </div>
-          </div>
+      }
-        }
+      wrapLongLines={!showCode}
-        wrapLongLines={!showCode}
+      showLineNumbers={showCode}
-        showLineNumbers={showCode}
+      language={showCode ? "java" : "text"}
-        language={showCode ? "java" : "text"}
+      height={350}
-        height={350}
+    />
-      />
-    </Fragment>
   );
 }

web/src/components/shell-result.tsx

@@ -32,7 +32,7 @@ export function ShellResult({
         <TabsTrigger value="shell">{t("generateResult.title2")}</TabsTrigger>
         <TabsTrigger value="injector">{t("generateResult.title3")}</TabsTrigger>
       </TabsList>
-      <TabsContent value="packResult" className="my-4 space-y-4">
+      <TabsContent value="packResult" className="my-2 space-y-4">
         <BasicInfo generateResult={generateResult} />
         <ResultComponent
           packResult={packResult}

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

@@ -2,7 +2,7 @@ import { FormSchema } from "@/types/schema";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
-import { FormField, FormItem, FormLabel } from "../ui/form";
+import { FormField, FormFieldItem, FormFieldLabel } from "../ui/form";
 import { Input } from "../ui/input";
 import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
@@ -27,12 +27,12 @@ export function AntSwordTabContent({
               control={form.control}
               name="antSwordPass"
               render={({ field }) => (
-                <FormItem className="gap-1">
+                <FormFieldItem>
-                  <FormLabel className="h-6 flex items-center gap-1">
+                  <FormFieldLabel>
                     {t("shellToolConfig.antSwordPass")} {t("optional")}
-                  </FormLabel>
+                  </FormFieldLabel>
-                  <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                  <Input {...field} placeholder={t("placeholders.input")} />
-                </FormItem>
+                </FormFieldItem>
               )}
             />
             <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
@@ -40,22 +40,22 @@ export function AntSwordTabContent({
                 control={form.control}
                 name="headerName"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
+                    <FormFieldLabel>{t("shellToolConfig.headerName")}</FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
               <FormField
                 control={form.control}
                 name="headerValue"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">
+                    <FormFieldLabel>
                       {t("shellToolConfig.headerValue")} {t("optional")}
-                    </FormLabel>
+                    </FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
             </div>

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

@@ -2,7 +2,7 @@ import { FormSchema } from "@/types/schema";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
-import { FormField, FormItem, FormLabel } from "../ui/form";
+import { FormField, FormFieldItem, FormFieldLabel } from "../ui/form";
 import { Input } from "../ui/input";
 import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
@@ -27,12 +27,12 @@ export function BehinderTabContent({
               control={form.control}
               name="behinderPass"
               render={({ field }) => (
-                <FormItem className="gap-1">
+                <FormFieldItem>
-                  <FormLabel className="h-6 flex items-center gap-1">
+                  <FormFieldLabel>
                     {t("shellToolConfig.behinderPass")} {t("optional")}
-                  </FormLabel>
+                  </FormFieldLabel>
-                  <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                  <Input {...field} placeholder={t("placeholders.input")} />
-                </FormItem>
+                </FormFieldItem>
               )}
             />
             <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
@@ -40,22 +40,22 @@ export function BehinderTabContent({
                 control={form.control}
                 name="headerName"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
+                    <FormFieldLabel>{t("shellToolConfig.headerName")}</FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
               <FormField
                 control={form.control}
                 name="headerValue"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">
+                    <FormFieldLabel>
                       {t("shellToolConfig.headerValue")} {t("optional")}
-                    </FormLabel>
+                    </FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
             </div>

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

@@ -1,37 +1,58 @@
-import { FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
+import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form.tsx";
 import { Input } from "@/components/ui/input.tsx";
 import { FormSchema } from "@/types/schema.ts";
+import { ChevronDown, ChevronUp, Settings } from "lucide-react";
+import { Fragment, useState } from "react";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { Button } from "../ui/button";
 
 export function OptionalClassFormField({ form }: Readonly<{ form: UseFormReturn<FormSchema> }>) {
   const { t } = useTranslation();
+  const [showAdvanced, setShowAdvanced] = useState(false);
   return (
-    <FormProvider {...form}>
+    <Fragment>
-      <FormField
+      <div className="pt-2">
-        control={form.control}
+        <Button
-        name="shellClassName"
+          type="button"
-        render={({ field }) => (
+          variant="outline"
-          <FormItem className="gap-1">
+          size="sm"
-            <FormLabel className="h-6 flex items-center gap-1">
+          onClick={() => setShowAdvanced(!showAdvanced)}
-              {t("mainConfig.shellClassName")} {t("optional")}
+          className="flex items-center gap-2"
-            </FormLabel>
+        >
-            <Input id="shellClassName" {...field} placeholder={t("placeholders.input")} className="h-8" />
+          <Settings className="h-4 w-4" />
-          </FormItem>
+          {t("classNameOptions")}
-        )}
+          {showAdvanced ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-      />
+        </Button>
-      <FormField
+      </div>
-        control={form.control}
+      {showAdvanced && (
-        name="injectorClassName"
+        <FormProvider {...form}>
-        render={({ field }) => (
+          <FormField
-          <FormItem className="gap-1">
+            control={form.control}
-            <FormLabel className="h-6 flex items-center gap-1">
+            name="shellClassName"
-              {t("mainConfig.injectorClassName")} {t("optional")}
+            render={({ field }) => (
-            </FormLabel>
+              <FormFieldItem>
-            <Input id="injectorClassName" {...field} placeholder={t("placeholders.input")} className="h-8" />
+                <FormFieldLabel>
-          </FormItem>
+                  {t("mainConfig.shellClassName")} {t("optional")}
-        )}
+                </FormFieldLabel>
-      />
+                <Input id="shellClassName" {...field} placeholder={t("placeholders.input")} />
-    </FormProvider>
+              </FormFieldItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="injectorClassName"
+            render={({ field }) => (
+              <FormFieldItem>
+                <FormFieldLabel>
+                  {t("mainConfig.injectorClassName")} {t("optional")}
+                </FormFieldLabel>
+                <Input id="injectorClassName" {...field} placeholder={t("placeholders.input")} />
+              </FormFieldItem>
+            )}
+          />
+        </FormProvider>
+      )}
+    </Fragment>
   );
 }

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

@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
-import { FormControl, FormField, FormItem, FormLabel } from "../ui/form";
+import { FormControl, FormField, FormFieldItem, FormFieldLabel } from "../ui/form";
 import { Input } from "../ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { TabsContent } from "../ui/tabs";
@@ -34,30 +34,30 @@ export function CommandTabContent({
               <ShellTypeFormField form={form} shellTypes={shellTypes} />
               <UrlPatternFormField form={form} />
             </div>
+            <FormField
+              control={form.control}
+              name="commandParamName"
+              render={({ field }) => (
+                <FormFieldItem>
+                  <FormFieldLabel>
+                    {t("shellToolConfig.paramName")} {t("optional")}
+                  </FormFieldLabel>
+                  <FormControl>
+                    <Input {...field} placeholder={t("placeholders.input")} />
+                  </FormControl>
+                </FormFieldItem>
+              )}
+            />
             <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-              <FormField
-                control={form.control}
-                name="commandParamName"
-                render={({ field }) => (
-                  <FormItem className="gap-1">
-                    <FormLabel className="h-6 flex items-center gap-1">
-                      {t("shellToolConfig.paramName")} {t("optional")}
-                    </FormLabel>
-                    <FormControl>
-                      <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
               <FormField
                 control={form.control}
                 name="encryptor"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center">{t("shellToolConfig.encryptor")}</FormLabel>
+                    <FormFieldLabel>{t("shellToolConfig.encryptor")}</FormFieldLabel>
                     <Select onValueChange={field.onChange} value={field.value} defaultValue="RAW">
                       <FormControl>
-                        <SelectTrigger className="h-8">
+                        <SelectTrigger>
                           <SelectValue placeholder={t("placeholders.select")} />
                         </SelectTrigger>
                       </FormControl>
@@ -69,18 +69,18 @@ export function CommandTabContent({
                         ))}
                       </SelectContent>
                     </Select>
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
               <FormField
                 control={form.control}
                 name="implementationClass"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center">{t("shellToolConfig.implementationClass")}</FormLabel>
+                    <FormFieldLabel>{t("shellToolConfig.implementationClass")}</FormFieldLabel>
                     <Select onValueChange={field.onChange} value={field.value} defaultValue="RuntimeExec">
                       <FormControl>
-                        <SelectTrigger className="h-8">
+                        <SelectTrigger>
                           <SelectValue placeholder={t("placeholders.select")} />
                         </SelectTrigger>
                       </FormControl>
@@ -92,7 +92,7 @@ export function CommandTabContent({
                         ))}
                       </SelectContent>
                     </Select>
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
             </div>

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

@@ -4,7 +4,7 @@ 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 { FormControl, FormField, FormFieldItem, FormFieldLabel, FormMessage } from "../ui/form";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
@@ -32,8 +32,8 @@ export default function CustomTabContent({
               control={form.control}
               name="shellClassBase64"
               render={({ field }) => (
-                <FormItem className="gap-1">
+                <FormFieldItem>
-                  <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.base64String")}</FormLabel>
+                  <FormFieldLabel>{t("shellToolConfig.base64String")}</FormFieldLabel>
                   <RadioGroup
                     value={isFile ? "file" : "base64"}
                     onValueChange={(value) => {
@@ -73,7 +73,8 @@ export default function CustomTabContent({
                       <Textarea {...field} placeholder={t("placeholders.input")} className="h-24" />
                     )}
                   </FormControl>
-                </FormItem>
+                  <FormMessage />
+                </FormFieldItem>
               )}
             />
             <OptionalClassFormField form={form} />

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

@@ -2,7 +2,7 @@ import { FormSchema } from "@/types/schema";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
-import { FormField, FormItem, FormLabel } from "../ui/form";
+import { FormField, FormFieldItem, FormFieldLabel } from "../ui/form";
 import { Input } from "../ui/input";
 import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
@@ -28,46 +28,46 @@ export function GodzillaTabContent({
                 control={form.control}
                 name="godzillaPass"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">
+                    <FormFieldLabel>
                       {t("shellToolConfig.pass")} {t("optional")}
-                    </FormLabel>
+                    </FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
               <FormField
                 control={form.control}
                 name="godzillaKey"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">
+                    <FormFieldLabel>
                       {t("shellToolConfig.key")} {t("optional")}
-                    </FormLabel>
+                    </FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
               <FormField
                 control={form.control}
                 name="headerName"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
+                    <FormFieldLabel>{t("shellToolConfig.headerName")}</FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
               <FormField
                 control={form.control}
                 name="headerValue"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">
+                    <FormFieldLabel>
                       {t("shellToolConfig.headerValue")} {t("optional")}
-                    </FormLabel>
+                    </FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
             </div>

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

@@ -2,7 +2,7 @@ import { FormSchema } from "@/types/schema";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
-import { FormField, FormItem, FormLabel } from "../ui/form";
+import { FormField, FormFieldItem, FormFieldLabel } from "../ui/form";
 import { Input } from "../ui/input";
 import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
@@ -28,22 +28,22 @@ export function NeoRegTabContent({
                 control={form.control}
                 name="headerName"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
+                    <FormFieldLabel>{t("shellToolConfig.headerName")}</FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
               <FormField
                 control={form.control}
                 name="headerValue"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">
+                    <FormFieldLabel>
                       {t("shellToolConfig.headerValue")} {t("optional")}
-                    </FormLabel>
+                    </FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
             </div>

web/src/components/tools/shelltype-field.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
+import { FormControl, FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form.tsx";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.tsx";
 import { FormSchema } from "@/types/schema.ts";
 
@@ -16,11 +16,17 @@ export function ShellTypeFormField({
         control={form.control}
         name="shellType"
         render={({ field }) => (
-          <FormItem className="gap-1">
+          <FormFieldItem>
-            <FormLabel className="h-6 flex items-center">{t("mainConfig.shellMountType")}</FormLabel>
+            <FormFieldLabel>{t("mainConfig.shellMountType")}</FormFieldLabel>
-            <Select onValueChange={field.onChange} value={field.value}>
+            <Select
+              onValueChange={(e) => {
+                form.resetField("urlPattern");
+                field.onChange(e);
+              }}
+              value={field.value}
+            >
               <FormControl>
-                <SelectTrigger className="h-8">
+                <SelectTrigger>
                   <SelectValue placeholder={t("placeholders.select")} />
                 </SelectTrigger>
               </FormControl>
@@ -36,7 +42,7 @@ export function ShellTypeFormField({
                 )}
               </SelectContent>
             </Select>
-          </FormItem>
+          </FormFieldItem>
         )}
       />
     </FormProvider>

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

@@ -2,7 +2,7 @@ import { FormSchema } from "@/types/schema";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
-import { FormField, FormItem, FormLabel } from "../ui/form";
+import { FormField, FormFieldItem, FormFieldLabel } from "../ui/form";
 import { Input } from "../ui/input";
 import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
@@ -28,22 +28,22 @@ export function Suo5TabContent({
                 control={form.control}
                 name="headerName"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
+                    <FormFieldLabel>{t("shellToolConfig.headerName")}</FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
               <FormField
                 control={form.control}
                 name="headerValue"
                 render={({ field }) => (
-                  <FormItem className="gap-1">
+                  <FormFieldItem>
-                    <FormLabel className="h-6 flex items-center gap-1">
+                    <FormFieldLabel>
                       {t("shellToolConfig.headerValue")} {t("optional")}
-                    </FormLabel>
+                    </FormFieldLabel>
-                    <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                    <Input {...field} placeholder={t("placeholders.input")} />
-                  </FormItem>
+                  </FormFieldItem>
                 )}
               />
             </div>

web/src/components/ui/form.tsx

@@ -77,6 +77,16 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+function FormFieldItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div data-slot="form-item" className={cn("flex flex-col gap-1", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+}
+
 function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
   const { error, formItemId } = useFormField();
 
@@ -91,6 +101,20 @@ function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPri
   );
 }
 
+function FormFieldLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive h-6", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
@@ -133,4 +157,15 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
   );
 }
 
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormFieldItem,
+  FormLabel,
+  FormFieldLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

web/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-8 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,

web/src/components/ui/select.tsx

@@ -29,7 +29,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "h-8 border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

web/src/components/ui/tabs.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";