goddonebianu/learn-languages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

补全翻译

Browse Source
This commit is contained in:
goddonebianu
2026-01-06 16:04:53 +08:00
parent 37e221d8b8
commit b093ed2b4f
13 changed files with 282 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(features)/dictionary/DictionaryEntry.tsx
View File

@@ -17,7 +17,7 @@ export function DictionaryEntry({ entry }: DictionaryEntryProps) {
<div className="flex items-center gap-3 mb-3">
{wordEntry.ipa && (
<span className="text-gray-600 text-lg">
{wordEntry.ipa}
[{wordEntry.ipa}]
</span>
)}
{wordEntry.partOfSpeech && (

28
src/app/(features)/dictionary/DictionaryPage.tsx
View File

@@ -10,8 +10,11 @@ import { getFoldersByUserId } from "@/lib/server/services/folderService";
import { DictLookUpResponse, isDictErrorResponse } from "./types";
import { SearchForm } from "./SearchForm";
import { SearchResult } from "./SearchResult";
import { useTranslations } from "next-intl";
import { POPULAR_LANGUAGES } from "./constants";
export default function Dictionary() {
const t = useTranslations("dictionary");
const [searchQuery, setSearchQuery] = useState("");
const [searchResult, setSearchResult] = useState<DictLookUpResponse | null>(null);
const [isSearching, setIsSearching] = useState(false);
@@ -36,6 +39,11 @@ export default function Dictionary() {
}
}, [session, selectedFolderId]);
// 将 code 转换为 nativeName
const getNativeName = (code: string) => {
return POPULAR_LANGUAGES.find(l => l.code === code)?.nativeName || code;
};
const handleSearch = async (e: React.FormEvent) => {
e.preventDefault();
if (!searchQuery.trim()) return;
@@ -45,12 +53,11 @@ export default function Dictionary() {
setSearchResult(null);
try {
// 使用查询语言和释义语言
// const result = await lookUp(searchQuery, queryLang, definitionLang);
// 使用查询语言和释义语言的 nativeName
const result = await lookUp({
text: searchQuery,
definitionLang: definitionLang,
queryLang: queryLang,
definitionLang: getNativeName(definitionLang),
queryLang: getNativeName(queryLang),
forceRelook: false
})
@@ -63,7 +70,7 @@ export default function Dictionary() {
}
} catch (error) {
console.error("词典查询失败:", error);
toast.error("查询失败，请稍后重试");
toast.error(t("lookupFailed"));
setSearchResult(null);
} finally {
setIsSearching(false);
@@ -94,14 +101,14 @@ export default function Dictionary() {
{isSearching && (
<div className="text-center py-8">
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
<p className="mt-4 text-white">加载中...</p>
<p className="mt-4 text-white">{t("loading")}</p>
</div>
)}
{!isSearching && hasSearched && !searchResult && (
<div className="text-center py-12 bg-white/20 rounded-lg">
<p className="text-gray-800 text-xl">未找到结果</p>
<p className="text-gray-600 mt-2">尝试其他单词或短语</p>
<p className="text-gray-800 text-xl">{t("noResults")}</p>
<p className="text-gray-600 mt-2">{t("tryOtherWords")}</p>
</div>
)}
@@ -116,14 +123,15 @@ export default function Dictionary() {
onFolderSelect={setSelectedFolderId}
onResultUpdate={setSearchResult}
onSearchingChange={setIsSearching}
getNativeName={getNativeName}
/>
)}
{!hasSearched && (
<div className="text-center py-12 bg-white/20 rounded-lg">
<div className="text-6xl mb-4">📚</div>
<p className="text-gray-800 text-xl mb-2">欢迎使用词典</p>
<p className="text-gray-600">在上方搜索框中输入单词或短语开始查询</p>
<p className="text-gray-800 text-xl mb-2">{t("welcomeTitle")}</p>
<p className="text-gray-600">{t("welcomeHint")}</p>
</div>
)}
</Container>

31
src/app/(features)/dictionary/SearchForm.tsx
View File

@@ -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>

26
src/app/(features)/dictionary/SearchResult.tsx
View File

@@ -13,6 +13,7 @@ import {
} from "./types";
import { DictionaryEntry } from "./DictionaryEntry";
import { POPULAR_LANGUAGES } from "./constants";
import { useTranslations } from "next-intl";
interface SearchResultProps {
searchResult: DictWordResponse | DictPhraseResponse;
@@ -24,6 +25,7 @@ interface SearchResultProps {
onFolderSelect: (folderId: number | null) => void;
onResultUpdate: (newResult: DictWordResponse | DictPhraseResponse) => void;
onSearchingChange: (isSearching: boolean) => void;
getNativeName: (code: string) => string;
}
export function SearchResult({
@@ -36,7 +38,9 @@ export function SearchResult({
onFolderSelect,
onResultUpdate,
onSearchingChange,
getNativeName,
}: SearchResultProps) {
const t = useTranslations("dictionary");
const { data: session } = authClient.useSession();
const handleRelookup = async () => {
@@ -45,8 +49,8 @@ export function SearchResult({
try {
const result = await lookUp({
text: searchQuery,
definitionLang: definitionLang,
queryLang: queryLang,
definitionLang: getNativeName(definitionLang),
queryLang: getNativeName(queryLang),
forceRelook: true
});
@@ -54,11 +58,11 @@ export function SearchResult({
toast.error(result.error);
} else {
onResultUpdate(result);
toast.success("已重新查询");
toast.success(t("relookupSuccess"));
}
} catch (error) {
console.error("词典重新查询失败:", error);
toast.error("查询失败，请稍后重试");
toast.error(t("lookupFailed"));
} finally {
onSearchingChange(false);
}
@@ -66,11 +70,11 @@ export function SearchResult({
const handleSave = () => {
if (!session) {
toast.error("请先登录");
toast.error(t("pleaseLogin"));
return;
}
if (!selectedFolderId) {
toast.error("请先创建文件夹");
toast.error(t("pleaseCreateFolder"));
return;
}
@@ -88,11 +92,11 @@ export function SearchResult({
},
})
.then(() => {
const folderName = folders.find(f => f.id === selectedFolderId)?.name;
toast.success(`已保存到文件夹：${folderName}`);
const folderName = folders.find(f => f.id === selectedFolderId)?.name || "Unknown";
toast.success(t("savedToFolder", { folderName }));
})
.catch(() => {
toast.error("保存失败，请稍后重试");
toast.error(t("saveFailed"));
});
};
@@ -123,7 +127,7 @@ export function SearchResult({
<button
onClick={handleSave}
className="hover:bg-gray-200 hover:cursor-pointer rounded-4xl border border-gray-200 w-10 h-10 flex justify-center items-center shrink-0"
title="保存到文件夹"
title={t("saveToFolder")}
>
<Plus />
</button>
@@ -146,7 +150,7 @@ export function SearchResult({
className="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
>
<RefreshCw className="w-4 h-4" />
重新查询
{t("relookup")}
</button>
</div>
</div>

14
src/app/(features)/dictionary/constants.ts
View File

@@ -1,10 +1,8 @@
export const POPULAR_LANGUAGES = [
{ code: "english", name: "英语" },
{ code: "chinese", name: "中文" },
{ code: "japanese", name: "日语" },
{ code: "korean", name: "韩语" },
{ code: "french", name: "法语" },
{ code: "german", name: "德语" },
{ code: "italian", name: "意大利语" },
{ code: "spanish", name: "西班牙语" },
{ code: "english", name: "英语", nativeName: "English" },
{ code: "chinese", name: "中文", nativeName: "中文" },
{ code: "japanese", name: "日语", nativeName: "日本語" },
{ code: "korean", name: "韩语", nativeName: "한국어" },
{ code: "italian", name: "意大利语", nativeName: "Italiano" },
{ code: "uyghur", name: "维吾尔语", nativeName: "ئۇيغۇرچە" },
] as const;