feat: support i18n namespace

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

@@ -5,7 +5,9 @@ import { FeedbackAlert } from "@/components/memshell/results/feedback-alert";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { ProbeShellResult } from "@/types/probeshell";
 
-export function BasicInfo({ generateResult }: Readonly<{ generateResult?: ProbeShellResult }>) {
+export function BasicInfo({
+  generateResult,
+}: Readonly<{ generateResult?: ProbeShellResult }>) {
   const { t } = useTranslation();
   return (
     <Card>
@@ -13,7 +15,7 @@ export function BasicInfo({ generateResult }: Readonly<{ generateResult?: ProbeS
         <CardTitle className="flex items-center justify-between">
           <div className="text-md flex items-center gap-2">
             <FileTextIcon className="h-5" />
-            <span>{t("generateResult.basicInfo")}</span>
+            <span>{t("common:basicInfo")}</span>
           </div>
           <FeedbackAlert />
         </CardTitle>
@@ -21,7 +23,7 @@ export function BasicInfo({ generateResult }: Readonly<{ generateResult?: ProbeS
       <CardContent>
         <div className="grid grid-cols-1 gap-2">
           <CopyableField
-            label={t("mainConfig.shellClassName")}
+            label={t("probeshell:shellClassName")}
             value={generateResult?.shellClassName}
             text={`${generateResult?.shellClassName} (${generateResult?.shellSize} bytes)`}
           />

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

@@ -14,18 +14,23 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import type { ServerConfig } from "@/types/memshell";
 import type { ProbeShellFormSchema } from "@/types/schema";
 import { Separator } from "../ui/separator";
 
-// 常量提取到组件外部
 const PROBE_OPTIONS = [
-  { value: "Server" as const, label: "中间件类型" },
-  { value: "JDK" as const, label: "JDK 信息" },
-  { value: "Command" as const, label: "命令执行" },
-  { value: "Bytecode" as const, label: "自定义字节码执行" },
+  { value: "Server" as const, label: "server" },
+  { value: "JDK" as const, label: "jdk" },
+  { value: "Command" as const, label: "command" },
+  { value: "Bytecode" as const, label: "bytecode" },
 ] as const;
 
 const MIDDLEWARE_OPTIONS = [
@@ -45,12 +50,11 @@ const MIDDLEWARE_OPTIONS = [
 ] as const;
 
 const PROBE_METHOD_OPTIONS = [
-  { value: "Sleep", label: "Sleep 延迟探测" },
+  { value: "Sleep", label: "Sleep" },
   { value: "DNSLog", label: "DNSLog" },
   { value: "ResponseBody", label: "ResponseBody" },
 ] as const;
 
-// 默认值配置
 const DEFAULT_FORM_VALUES = {
   reqParamName: "payload",
   reqHeaderName: "X-PAYLOAD",
@@ -64,7 +68,7 @@ interface MainConfigCardProps {
 }
 
 export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
-  const { t } = useTranslation();
+  const { t } = useTranslation(["common", "probeshell"]);
   const watchedProbeMethod = form.watch("probeMethod");
   const watchedProbeContent = form.watch("probeContent");
 
@@ -75,12 +79,13 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
       Sleep: ["Server"],
     } as const;
 
-    const allowedValues = filterMap[watchedProbeMethod as keyof typeof filterMap];
-    
+    const allowedValues =
+      filterMap[watchedProbeMethod as keyof typeof filterMap];
+
     if (!allowedValues) return PROBE_OPTIONS;
-    
-    return PROBE_OPTIONS.filter(opt => 
-      allowedValues.includes(opt.value as never)
+
+    return PROBE_OPTIONS.filter((opt) =>
+      allowedValues.includes(opt.value as never),
     );
   }, [watchedProbeMethod]);
 
@@ -100,64 +105,70 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
     resetFormValues();
   }, [resetFormValues]);
 
-  const ContentOptionsSelect = useMemo(() => (
-    <FormField
-      control={form.control}
-      name="probeContent"
-      render={({ field }) => (
-        <FormFieldItem>
-          <FormFieldLabel>探测内容</FormFieldLabel>
-          <Select onValueChange={field.onChange} value={field.value || ""}>
-            <FormControl>
-              <SelectTrigger>
-                <SelectValue placeholder="请选择要探测的内容..." />
-              </SelectTrigger>
-            </FormControl>
-            <SelectContent>
-              {filteredOptions.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <FormMessage />
-        </FormFieldItem>
-      )}
-    />
-  ), [form.control, filteredOptions]);
-
-  const RequestParamField = useMemo(() => (
-    <div className="space-y-4 pt-4 border-t mt-4">
+  const ContentOptionsSelect = useMemo(
+    () => (
       <FormField
         control={form.control}
-        name="reqParamName"
+        name="probeContent"
         render={({ field }) => (
           <FormFieldItem>
-            <FormFieldLabel>Request Param Name</FormFieldLabel>
-            <FormControl>
-              <Input placeholder="例如: cmd, data, ..." {...field} />
-            </FormControl>
+            <FormFieldLabel>{t("probeshell:probeContent")}</FormFieldLabel>
+            <Select onValueChange={field.onChange} value={field.value || ""}>
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder={t("common:placeholders.select")} />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {filteredOptions.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {t(`probeshell:probeContent.${opt.label}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
             <FormMessage />
           </FormFieldItem>
         )}
       />
-    </div>
-  ), [form.control]);
+    ),
+    [form.control, filteredOptions, t],
+  );
 
-  const SleepFields = useMemo(() => (
-    <div className="space-y-4 pt-4 border-t mt-4">
-      <div className="space-y-4">
+  const RequestParamField = 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>
+    ),
+    [form.control, t],
+  );
+
+  const SleepFields = useMemo(
+    () => (
+      <div className="space-y-2 pt-4 border-t mt-4">
         <FormField
           control={form.control}
           name="sleepServer"
           render={({ field }) => (
             <FormFieldItem>
-              <FormFieldLabel>探测中间件</FormFieldLabel>
+              <FormFieldLabel>{t("probeshell:sleepServer")}</FormFieldLabel>
               <Select onValueChange={field.onChange} value={field.value || ""}>
                 <FormControl>
                   <SelectTrigger>
-                    <SelectValue placeholder="选择中间件..." />
+                    <SelectValue placeholder={t("placeholders.select")} />
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
@@ -177,11 +188,11 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
           name="seconds"
           render={({ field }) => (
             <FormFieldItem>
-              <FormFieldLabel>命中延迟时间 (秒)</FormFieldLabel>
+              <FormFieldLabel>{t("probeshell:sleepSeconds")}</FormFieldLabel>
               <FormControl>
                 <Input
                   type="number"
-                  placeholder="例如: 5"
+                  placeholder={t("placeholders.input")}
                   {...field}
                   onChange={(event) => field.onChange(+event.target.value)}
                 />
@@ -191,12 +202,14 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
           )}
         />
       </div>
-    </div>
-  ), [form.control]);
+    ),
+    [form.control, t],
+  );
 
   const renderDynamicFields = useCallback(() => {
     const isBodyMethod = watchedProbeMethod === "ResponseBody";
-    const isCommandOrBytecode = watchedProbeContent === "Command" || watchedProbeContent === "Bytecode";
+    const isCommandOrBytecode =
+      watchedProbeContent === "Command" || watchedProbeContent === "Bytecode";
     const isSleepMethod = watchedProbeMethod === "Sleep";
     const isServerContent = watchedProbeContent === "Server";
 
@@ -211,90 +224,110 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
     return null;
   }, [watchedProbeMethod, watchedProbeContent, RequestParamField, SleepFields]);
 
-
-  const DNSLogSection = useMemo(() => (
+  const DNSLogSection = useMemo(
+    () => (
       <FormField
         control={form.control}
         name="host"
         render={({ field }) => (
           <FormFieldItem>
-            <FormFieldLabel>DNSLog 地址</FormFieldLabel>
+            <FormFieldLabel>{t("probeshell:dnslog.host")}</FormFieldLabel>
             <FormControl>
-              <Input placeholder="例如: abcde.DNSLog.cn" {...field} />
+              <Input placeholder={t("placeholders.input")} {...field} />
             </FormControl>
             <FormMessage />
           </FormFieldItem>
         )}
       />
-  ), [form.control]);
+    ),
+    [form.control, t],
+  );
 
-  const MiddlewareSelect = useMemo(() => (
-    <FormField
-      control={form.control}
-      name="server"
-      render={({ field }) => (
-        <FormFieldItem>
-          <FormFieldLabel>中间件类型</FormFieldLabel>
-          <Select onValueChange={field.onChange} defaultValue={field.value}>
-            <FormControl>
-              <SelectTrigger>
-                <SelectValue placeholder="选择中间件..." />
-              </SelectTrigger>
-            </FormControl>
-            <SelectContent>
-              {Object.keys(servers ?? {}).map((server: string) => (
-                <SelectItem key={server} value={server}>
-                  {server}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <FormMessage />
-        </FormFieldItem>
-      )}
-    />
-  ), [form.control, servers]);
+  const MiddlewareSelect = useMemo(
+    () => (
+      <FormField
+        control={form.control}
+        name="server"
+        render={({ field }) => (
+          <FormFieldItem>
+            <FormFieldLabel>{t("server")}</FormFieldLabel>
+            <Select onValueChange={field.onChange} defaultValue={field.value}>
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder={t("placeholders.select")} />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {Object.keys(servers ?? {}).map((server: string) => (
+                  <SelectItem key={server} value={server}>
+                    {server}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormFieldItem>
+        )}
+      />
+    ),
+    [form.control, servers, t],
+  );
 
-  const SwitchGroup = useMemo(() => (
-    <div className="flex gap-4 mt-4 flex-col sm:flex-row">
-      <FormField
-        control={form.control}
-        name="debug"
-        render={({ field }) => (
-          <FormItem className="flex items-center space-x-2 space-y-0">
-            <FormControl>
-              <Switch id="debug" checked={field.value} onCheckedChange={field.onChange} />
-            </FormControl>
-            <FormLabel htmlFor="debug">{t("mainConfig.debug")}</FormLabel>
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name="byPassJavaModule"
-        render={({ field }) => (
-          <FormItem className="flex items-center space-x-2 space-y-0">
-            <FormControl>
-              <Switch id="bypass" checked={field.value} onCheckedChange={field.onChange} />
-            </FormControl>
-            <Label htmlFor="bypass">{t("mainConfig.byPassJavaModule")}</Label>
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name="shrink"
-        render={({ field }) => (
-          <FormItem className="flex items-center space-x-2 space-y-0">
-            <FormControl>
-              <Switch id="shrink" checked={field.value} onCheckedChange={field.onChange} />
-            </FormControl>
-            <Label htmlFor="shrink">{t("mainConfig.shrink")}</Label>
-          </FormItem>
-        )}
-      />
-    </div>
-  ), [form.control, t]);
+  const SwitchGroup = useMemo(
+    () => (
+      <div className="flex gap-4 mt-4 flex-col sm:flex-row">
+        <FormField
+          control={form.control}
+          name="debug"
+          render={({ field }) => (
+            <FormItem className="flex items-center space-x-2 space-y-0">
+              <FormControl>
+                <Switch
+                  id="debug"
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <FormLabel htmlFor="debug">{t("debug")}</FormLabel>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="byPassJavaModule"
+          render={({ field }) => (
+            <FormItem className="flex items-center space-x-2 space-y-0">
+              <FormControl>
+                <Switch
+                  id="bypass"
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <Label htmlFor="bypass">{t("byPassJavaModule")}</Label>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="shrink"
+          render={({ field }) => (
+            <FormItem className="flex items-center space-x-2 space-y-0">
+              <FormControl>
+                <Switch
+                  id="shrink"
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <Label htmlFor="shrink">{t("shrink")}</Label>
+            </FormItem>
+          )}
+        />
+      </div>
+    ),
+    [form.control, t],
+  );
 
   return (
     <FormProvider {...form}>
@@ -302,17 +335,20 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
         <CardHeader className="pb-1">
           <CardTitle className="text-md flex items-center gap-2">
             <ServerIcon className="h-5 w-5" />
-            <span>{t("configs.main-config")}</span>
+            <span>{t("mainConfig.title")}</span>
           </CardTitle>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent className="space-y-2">
           <FormField
             control={form.control}
             name="probeMethod"
             render={({ field }) => (
               <FormFieldItem>
-                <FormFieldLabel>探测方式</FormFieldLabel>
-                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormFieldLabel>{t("probeshell:probeMethod")}</FormFieldLabel>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                >
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue />
@@ -343,9 +379,13 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
             render={({ field }) => (
               <FormFieldItem>
                 <FormFieldLabel htmlFor="shellClassName">
-                  {t("mainConfig.shellClassName")} {t("optional")}
+                  {t("probeshell:shellClassName")} {t("optional")}
                 </FormFieldLabel>
-                <Input id="shellClassName" {...field} placeholder={t("placeholders.input")} />
+                <Input
+                  id="shellClassName"
+                  {...field}
+                  placeholder={t("placeholders.input")}
+                />
               </FormFieldItem>
             )}
           />
@@ -353,4 +393,4 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
       </Card>
     </FormProvider>
   );
-}
+}

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

@@ -2,8 +2,18 @@ import { PackageIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { FormProvider, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
-import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form.tsx";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group.tsx";
 import type { PackerConfig } from "@/types/memshell";
 import type { ProbeShellFormSchema } from "@/types/schema";
@@ -21,7 +31,7 @@ export default function PackageConfigCard({
   form: UseFormReturn<ProbeShellFormSchema>;
 }>) {
   const [options, setOptions] = useState<Array<Option>>([]);
-  const { t } = useTranslation();
+  const { t } = useTranslation("common");
 
   useEffect(() => {
     const filteredOptions = (packerConfig ?? []).filter((name) => {
@@ -30,24 +40,27 @@ export default function PackageConfigCard({
 
     const mappedOptions = filteredOptions.map((name) => {
       return {
-        name: t(`packageConfig.packer.${name}`),
+        name: name,
         value: name,
       };
     });
 
     setOptions(mappedOptions);
     const currentValue = form.getValues("packingMethod");
-    if (filteredOptions.length > 0 && (!currentValue || !filteredOptions.includes(currentValue))) {
+    if (
+      filteredOptions.length > 0 &&
+      (!currentValue || !filteredOptions.includes(currentValue))
+    ) {
       form.setValue("packingMethod", filteredOptions[0]);
     }
-  }, [form, packerConfig, t]);
+  }, [form, packerConfig]);
 
   return (
     <Card className="w-full">
       <CardHeader className="pb-1">
         <CardTitle className="text-md flex items-center gap-2">
           <PackageIcon className="h-5" />
-          <span>{t("configs.package-config")}</span>
+          <span>{t("packerConfig.title")}</span>
         </CardTitle>
       </CardHeader>
       <CardContent>
@@ -58,7 +71,7 @@ export default function PackageConfigCard({
               name="packingMethod"
               render={({ field }) => (
                 <FormItem className="space-y-3">
-                  <FormLabel>{t("packageConfig.title")}</FormLabel>
+                  <FormLabel>{t("packerMethod")}</FormLabel>
                   <FormControl>
                     <RadioGroup
                       onValueChange={field.onChange}
@@ -66,7 +79,10 @@ export default function PackageConfigCard({
                       className="grid grid-cols-2 md:grid-cols-3"
                     >
                       {options.map(({ name, value }) => (
-                        <FormItem key={value} className="flex items-center space-x-3 space-y-0">
+                        <FormItem
+                          key={value}
+                          className="flex items-center space-x-3 space-y-0"
+                        >
                           <FormControl>
                             <RadioGroupItem value={value} id={value} />
                           </FormControl>
@@ -84,7 +100,9 @@ export default function PackageConfigCard({
         ) : (
           <div className="flex items-center justify-center p-4 space-x-2">
             <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-            <span className="text-sm text-muted-foreground">{t("loading")}</span>
+            <span className="text-sm text-muted-foreground">
+              {t("loading")}
+            </span>
           </div>
         )}
       </CardContent>

web/src/components/probeshell/quick-usage.tsx

@@ -1,24 +1,27 @@
 import { ScrollTextIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
 
 export function QuickUsage() {
-  const { t } = useTranslation();
+  const { t } = useTranslation(["common", "probeshell"]);
   return (
     <Card>
       <CardHeader>
         <CardTitle className="text-md flex items-center gap-2">
           <ScrollTextIcon className="h-5" />
-          <span>{t("quickUsage.title")}</span>
+          <span>{t("common:quickUsage.title")}</span>
         </CardTitle>
       </CardHeader>
       <CardContent>
         <ol className="list-decimal list-inside space-y-4 text-sm">
-          <li>{t("quickUsage.step1")}</li>
-          <li>{t("quickUsage.step2")}</li>
-          <li>{t("quickUsage.step3")}</li>
-          <li>{t("quickUsage.step4")}</li>
-          <li>{t("quickUsage.step5")}</li>
+          <li>{t("probeshell:quickUsage.step1")}</li>
+          <li>{t("probeshell:quickUsage.step2")}</li>
+          <li>{t("probeshell:quickUsage.step3")}</li>
         </ol>
       </CardContent>
     </Card>

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

@@ -1,6 +1,11 @@
 import { useTranslation } from "react-i18next";
 import { QuickUsage } from "@/components/probeshell/quick-usage";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs.tsx";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs.tsx";
 import type { ProbeShellResult } from "@/types/probeshell";
 import CodeViewer from "../code-viewer";
 import { MultiPackResult } from "../memshell/results/multi-packer";
@@ -25,32 +30,37 @@ export default function ShellResult({
   return (
     <Tabs defaultValue="packResult">
       <TabsList className="grid w-full grid-cols-1">
-        <TabsTrigger value="packResult">{t("generateResult.title1")}</TabsTrigger>
+        <TabsTrigger value="packResult">
+          {t("common:generateResult")}
+        </TabsTrigger>
       </TabsList>
       <TabsContent value="packResult" className="my-2 space-y-4">
         <BasicInfo generateResult={generateResult} />
-        {
-          allPackResults && <MultiPackResult allPackResults={allPackResults} packMethod={packMethod} />
-        }
-        {
-          packResult && (
-                <CodeViewer
-                  code={packResult}
-                  header={
-                    <div className="flex items-center justify-between text-xs gap-2">
-                      <span>
-                        {t("packageConfig.title")}：{packMethod}
-                      </span>
-                      <span className="text-muted-foreground">({packResult?.length})</span>
-                    </div>
-                  }
-                  wrapLongLines={!showCode}
-                  showLineNumbers={showCode}
-                  language={showCode ? "java" : "text"}
-                  height={350}
-                />
-              )
-        }
+        {allPackResults && (
+          <MultiPackResult
+            allPackResults={allPackResults}
+            packMethod={packMethod}
+          />
+        )}
+        {packResult && (
+          <CodeViewer
+            code={packResult}
+            header={
+              <div className="flex items-center justify-between text-xs gap-2">
+                <span>
+                  {t("common:packerMethod")}：{packMethod}
+                </span>
+                <span className="text-muted-foreground">
+                  ({packResult?.length})
+                </span>
+              </div>
+            }
+            wrapLongLines={!showCode}
+            showLineNumbers={showCode}
+            language={showCode ? "java" : "text"}
+            height={350}
+          />
+        )}
       </TabsContent>
     </Tabs>
   );