feat: support command probe template

web/app/components/probeshell/main-config-card.tsx

@@ -156,6 +156,51 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
     [form.control, t],
   );
 
+  const CommandTemplateField = useMemo(
+    () => (
+      <>
+        <div className="space-y-2 pt-4 border-t mt-4">
+          <FormField
+            control={form.control}
+            name="reqParamName"
+            render={({ field }) => (
+              <FormFieldItem>
+                <FormFieldLabel>{t("common:paramName")}</FormFieldLabel>
+                <FormControl>
+                  <Input placeholder={t("placeholders.input")} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormFieldItem>
+            )}
+          />
+        </div>
+        <div className="space-y-2">
+          <FormField
+            control={form.control}
+            name="commandTemplate"
+            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>
+            )}
+          />
+        </div>
+      </>
+    ),
+    [form.control, t],
+  );
+
   const SleepFields = useMemo(
     () => (
       <div className="space-y-2 pt-4 border-t mt-4">
@@ -216,6 +261,9 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
     const isServerContent = watchedProbeContent === "Server";
 
     if (isBodyMethod && needParam) {
+      if (watchedProbeContent === "Command") {
+        return CommandTemplateField;
+      }
       return RequestParamField;
     }
 
@@ -224,7 +272,13 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
     }
 
     return null;
-  }, [watchedProbeMethod, watchedProbeContent, RequestParamField, SleepFields]);
+  }, [
+    watchedProbeMethod,
+    watchedProbeContent,
+    RequestParamField,
+    SleepFields,
+    CommandTemplateField,
+  ]);
 
   const DNSLogSection = useMemo(
     () => (

web/app/components/ui/select.tsx

@@ -52,6 +52,7 @@ function SelectContent({
   className,
   children,
   position = "popper",
+  align = "center",
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
   return (
@@ -65,6 +66,7 @@ function SelectContent({
           className,
         )}
         position={position}
+        align={align}
         {...props}
       >
         <SelectScrollUpButton />

web/app/components/ui/tabs.tsx

@@ -40,7 +40,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

web/app/types/probeshell.ts

@@ -26,6 +26,7 @@ export interface ProbeContentConfig {
   sleepServer?: string;
   server?: string;
   reqParamName?: string;
+  commandTemplate?: string;
 }
 
 export interface DNSLogConfig {

web/app/types/schema.ts

@@ -160,6 +160,7 @@ export const probeShellFormSchema = yup.object().shape({
   host: yup.string().optional(),
   server: yup.string().optional(),
   reqParamName: yup.string().optional(),
+  commandTemplate: yup.string().optional(),
   seconds: yup.number().optional(),
   sleepServer: yup.string().optional(),
   packingMethod: yup.string().required(),

web/app/utils/transformer.ts

@@ -67,6 +67,7 @@ export function transformToProbePostData(formValue: ProbeShellFormSchema) {
     sleepServer: formValue.sleepServer,
     server: formValue.server,
     reqParamName: formValue.reqParamName,
+    commandTemplate: formValue.commandTemplate,
   };
 
   return {