补全翻译

src/app/(features)/dictionary/SearchForm.tsx

@@ -1,5 +1,6 @@
 import { LightButton } from "@/components/ui/buttons";
 import { POPULAR_LANGUAGES } from "./constants";
+import { useTranslations } from "next-intl";
 
 interface SearchFormProps {
     searchQuery: string;
@@ -22,15 +23,17 @@ export function SearchForm({
     definitionLang,
     onDefinitionLangChange,
 }: SearchFormProps) {
+    const t = useTranslations("dictionary");
+
     return (
         <>
             {/* 页面标题 */}
             <div className="text-center mb-8">
                 <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
-                    词典
+                    {t("title")}
                 </h1>
                 <p className="text-gray-700 text-lg">
-                    查询单词和短语，提供详细的释义和例句
+                    {t("description")}
                 </p>
             </div>
 
@@ -40,7 +43,7 @@ export function SearchForm({
                     type="text"
                     value={searchQuery}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchQueryChange(e.target.value)}
-                    placeholder="输入要查询的单词或短语..."
+                    placeholder={t("searchPlaceholder")}
                     className="flex-1 px-4 py-3 text-lg text-gray-800 focus:outline-none border-b-2 border-gray-600 bg-white/90 rounded"
                 />
                 <LightButton
@@ -48,21 +51,21 @@ export function SearchForm({
                     disabled={isSearching || !searchQuery.trim()}
                     className="px-6 py-3"
                 >
-                    {isSearching ? "查询中..." : "查询"}
+                    {isSearching ? t("searching") : t("search")}
                 </LightButton>
             </form>
 
             {/* 语言设置 */}
             <div className="mt-4 bg-white/20 rounded-lg p-4">
                 <div className="mb-3">
-                    <span className="text-gray-800 font-semibold">语言设置</span>
+                    <span className="text-gray-800 font-semibold">{t("languageSettings")}</span>
                 </div>
 
                 <div className="space-y-4">
                         {/* 查询语言 */}
                         <div>
                             <label className="block text-gray-700 text-sm mb-2">
-                                查询语言 (你要查询的单词/短语是什么语言)
+                                {t("queryLanguage")} ({t("queryLanguageHint")})
                             </label>
                             <div className="flex flex-wrap gap-2 mb-2">
                                 {POPULAR_LANGUAGES.map((lang) => (
@@ -72,7 +75,7 @@ export function SearchForm({
                                         onClick={() => onQueryLangChange(lang.code)}
                                         className="text-sm px-3 py-1"
                                     >
-                                        {lang.name}
+                                        {lang.nativeName}
                                     </LightButton>
                                 ))}
                             </div>
@@ -80,7 +83,7 @@ export function SearchForm({
                                 type="text"
                                 value={queryLang}
                                 onChange={(e) => onQueryLangChange(e.target.value)}
-                                placeholder="或输入其他语言..."
+                                placeholder={t("otherLanguagePlaceholder")}
                                 className="w-full px-3 py-2 text-sm text-gray-800 focus:outline-none border-b-2 border-gray-600 bg-white/90 rounded"
                             />
                         </div>
@@ -88,7 +91,7 @@ export function SearchForm({
                         {/* 释义语言 */}
                         <div>
                             <label className="block text-gray-700 text-sm mb-2">
-                                释义语言 (你希望用什么语言查看释义)
+                                {t("definitionLanguage")} ({t("definitionLanguageHint")})
                             </label>
                             <div className="flex flex-wrap gap-2 mb-2">
                                 {POPULAR_LANGUAGES.map((lang) => (
@@ -98,7 +101,7 @@ export function SearchForm({
                                         onClick={() => onDefinitionLangChange(lang.code)}
                                         className="text-sm px-3 py-1"
                                     >
-                                        {lang.name}
+                                        {lang.nativeName}
                                     </LightButton>
                                 ))}
                             </div>
@@ -106,15 +109,17 @@ export function SearchForm({
                                 type="text"
                                 value={definitionLang}
                                 onChange={(e) => onDefinitionLangChange(e.target.value)}
-                                placeholder="或输入其他语言..."
+                                placeholder={t("otherLanguagePlaceholder")}
                                 className="w-full px-3 py-2 text-sm text-gray-800 focus:outline-none border-b-2 border-gray-600 bg-white/90 rounded"
                             />
                         </div>
 
                         {/* 当前设置显示 */}
                         <div className="text-center text-gray-700 text-sm pt-2 border-t border-gray-300">
-                            当前设置：查询 <span className="font-semibold">{POPULAR_LANGUAGES.find(l => l.code === queryLang)?.name || queryLang}</span>
-                            ，释义 <span className="font-semibold">{POPULAR_LANGUAGES.find(l => l.code === definitionLang)?.name || definitionLang}</span>
+                            {t("currentSettings", {
+                                queryLang: POPULAR_LANGUAGES.find(l => l.code === queryLang)?.nativeName || queryLang,
+                                definitionLang: POPULAR_LANGUAGES.find(l => l.code === definitionLang)?.nativeName || definitionLang
+                            })}
                         </div>
                     </div>
             </div>