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

fix(i18n): 补充页面缺失的中英文翻译并修复登录重定向循环

Browse Source 
- 补充 login/signup/dictionary/srt-player/alphabet 页面的翻译
- 修复登录页面邮箱登录时 password 参数错误
- 修复登录/注册页面的无限重定向循环问题
- 调整登录/注册卡片宽度为 w-96
This commit is contained in:
goddonebianu
2026-03-09 18:41:41 +08:00
parent 719aef5a7f
commit 020744b353
10 changed files with 110 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/(auth)/login/page.tsx
View File

@@ -1,17 +1,18 @@
"use client";
import { useState } from "react";
import { useState, useEffect } from "react";
import { authClient } from "@/lib/auth-client";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import { toast } from "sonner";
import { useTranslations } from "next-intl";
import { Card, CardBody } from "@/design-system/base/card";
import { Input } from "@/design-system/base/input";
import { PrimaryButton } from "@/design-system/base/button";
import { VStack } from "@/design-system/layout/stack";
export default function LoginPage() {
const t = useTranslations("auth");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
@@ -19,18 +20,18 @@ export default function LoginPage() {
const searchParams = useSearchParams();
const redirectTo = searchParams.get("redirect");
const session = authClient.useSession().data;
const { data: session, isPending } = authClient.useSession();
const router = useRouter();
useEffect(() => {
if (session) {
router.push(redirectTo ?? "/profile");
if (!isPending && session?.user?.username && !redirectTo) {
router.push("/folders");
}
}, [session, router, redirectTo]);
}, [session, isPending, router, redirectTo]);
const handleLogin = async () => {
if (!username || !password) {
toast.error("请输入用户名和密码");
toast.error(t("enterCredentials"));
return;
}
@@ -39,7 +40,7 @@ export default function LoginPage() {
if (username.includes("@")) {
await authClient.signIn.email({
email: username,
password: username
password: password,
});
} else {
await authClient.signIn.username({
@@ -47,9 +48,9 @@ export default function LoginPage() {
password: password,
});
}
router.push(redirectTo ?? "/profile");
router.push(redirectTo ?? "/folders");
} catch (error) {
toast.error("登录失败");
toast.error(t("loginFailed"));
} finally {
setLoading(false);
}
@@ -57,21 +58,21 @@ export default function LoginPage() {
return (
<div className="flex justify-center items-center min-h-screen">
<Card className="w-80">
<Card className="w-96">
<CardBody>
<VStack gap={4} align="center" justify="center">
<h1 className="text-3xl font-bold text-center w-full">登录</h1>
<h1 className="text-3xl font-bold text-center w-full">{t("title")}</h1>
<VStack gap={0} align="center" justify="center" className="w-full">
<Input
placeholder="用户名或邮箱地址"
placeholder={t("usernameOrEmailPlaceholder")}
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<Input
type="password"
placeholder="密码"
placeholder={t("passwordPlaceholder")}
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
@@ -82,14 +83,14 @@ export default function LoginPage() {
loading={loading}
fullWidth
>
确认
{t("confirm")}
</PrimaryButton>
<Link
href={"/signup" + (redirectTo ? `?redirect=${redirectTo}` : "")}
className="text-center text-primary-500 hover:underline"
>
没有账号？去注册
{t("noAccountLink")}
</Link>
</VStack>
</CardBody>

4
src/app/(auth)/profile/page.tsx
View File

@@ -5,9 +5,9 @@ import { headers } from "next/headers";
export default async function ProfilePage() {
const session = await auth.api.getSession({ headers: await headers() });
if (!session) {
if (!session?.user?.id) {
redirect("/login?redirect=/profile");
}
redirect(`/users/${session.user.username}`);
redirect(session.user.username ? `/users/${session.user.username}` : "/folders");
}

30
src/app/(auth)/signup/page.tsx
View File

@@ -6,12 +6,14 @@ import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import { toast } from "sonner";
import { useTranslations } from "next-intl";
import { Card, CardBody } from "@/design-system/base/card";
import { Input } from "@/design-system/base/input";
import { PrimaryButton } from "@/design-system/base/button";
import { VStack } from "@/design-system/layout/stack";
export default function SignUpPage() {
const t = useTranslations("auth");
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
@@ -20,18 +22,18 @@ export default function SignUpPage() {
const searchParams = useSearchParams();
const redirectTo = searchParams.get("redirect");
const session = authClient.useSession().data;
const { data: session, isPending } = authClient.useSession();
const router = useRouter();
useEffect(() => {
if (session) {
router.push(redirectTo ?? "/profile");
if (!isPending && session?.user?.username && !redirectTo) {
router.push("/folders");
}
}, [session, router, redirectTo]);
}, [session, isPending, router, redirectTo]);
const handleSignUp = async () => {
if (!username || !email || !password) {
toast.error("请填写所有字段");
toast.error(t("fillAllFields"));
return;
}
@@ -43,9 +45,9 @@ export default function SignUpPage() {
username: username,
password: password,
});
router.push(redirectTo ?? "/profile");
router.push(redirectTo ?? "/folders");
} catch (error) {
toast.error("注册失败");
toast.error(t("signUpFailed"));
} finally {
setLoading(false);
}
@@ -53,28 +55,28 @@ export default function SignUpPage() {
return (
<div className="flex justify-center items-center min-h-screen">
<Card className="w-80">
<Card className="w-96">
<CardBody>
<VStack gap={4} align="center" justify="center">
<h1 className="text-3xl font-bold text-center w-full">注册</h1>
<h1 className="text-3xl font-bold text-center w-full">{t("signUpTitle")}</h1>
<VStack gap={0} align="center" justify="center" className="w-full">
<Input
placeholder="用户名"
placeholder={t("usernamePlaceholder")}
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<Input
type="email"
placeholder="邮箱地址"
placeholder={t("emailPlaceholder")}
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<Input
type="password"
placeholder="密码"
placeholder={t("passwordPlaceholder")}
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
@@ -85,14 +87,14 @@ export default function SignUpPage() {
loading={loading}
fullWidth
>
确认
{t("confirm")}
</PrimaryButton>
<Link
href={"/login" + (redirectTo ? `?redirect=${redirectTo}` : "")}
className="text-center text-primary-500 hover:underline"
>
已有账号？去登录
{t("hasAccountLink")}
</Link>
</VStack>
</CardBody>

2
src/app/(auth)/users/[username]/page.tsx
View File

@@ -42,7 +42,7 @@ export default async function UserPage({ params }: UserPageProps) {
<div className="bg-white rounded-lg shadow-md p-6 mb-6">
<div className="flex items-center justify-between mb-4">
<div></div>
{isOwnProfile && <LinkButton href="/logout">登出</LinkButton>}
{isOwnProfile && <LinkButton href="/logout">{t("logout")}</LinkButton>}
</div>
<div className="flex items-center space-x-6">
{/* Avatar */}

4
src/app/(features)/alphabet/page.tsx
View File

@@ -54,8 +54,8 @@ export default function Alphabet() {
{t("chooseCharacters")}
</h1>
{/* 副标题说明 */}
<p className="text-gray-600 mb-8 text-lg">
选择一种语言的字母表开始学习
<p className="text-lg text-gray-600 text-center">
{t("chooseAlphabetHint")}
</p>
{/* 语言选择按钮网格 */}

3
src/app/(features)/dictionary/DictionaryClient.tsx
View File

@@ -133,10 +133,11 @@ export function DictionaryClient({ initialFolders }: DictionaryClientProps) {
placeholder={t("searchPlaceholder")}
variant="search"
required
containerClassName="flex-1"
/>
<LightButton
type="submit"
className="px-6 py-3 whitespace-nowrap text-center sm:min-w-30"
className="h-10 px-6 rounded-full whitespace-nowrap"
loading={isSearching}
>
{t("search")}

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

@@ -1,13 +1,15 @@
import { TSharedEntry } from "@/shared/dictionary-type";
import { useTranslations } from "next-intl";
interface DictionaryEntryProps {
entry: TSharedEntry;
}
export function DictionaryEntry({ entry }: DictionaryEntryProps) {
const t = useTranslations("dictionary");
return (
<div>
{/* 音标和词性 */}
<div className="flex items-center gap-3 mb-3">
{entry.ipa && (
<span className="text-gray-600 text-lg">
@@ -21,19 +23,17 @@ export function DictionaryEntry({ entry }: DictionaryEntryProps) {
)}
</div>
{/* 释义 */}
<div className="mb-3">
<h3 className="text-sm font-semibold text-gray-700 mb-1">
释义
{t("definition")}
</h3>
<p className="text-gray-800">{entry.definition}</p>
</div>
{/* 例句 */}
{entry.example && (
<div>
<h3 className="text-sm font-semibold text-gray-700 mb-1">
例句
{t("example")}
</h3>
<p className="text-gray-700 pl-4 border-l-4 border-[#35786f]">
{entry.example}

8
src/app/(features)/srt-player/page.tsx
View File

@@ -127,21 +127,21 @@ export default function SrtPlayerPage() {
<div className="border-gray-200 border-2 flex items p-2 justify-between items-center rounded gap-8">
<div className="flex items-center flex-col">
<Video size={16} />
<span className="text-sm">视频文件</span>
<span className="text-sm">{srtT("videoFile")}</span>
</div>
<LightButton onClick={handleVideoUpload} disabled={!!videoUrl}>
{videoUrl ? '已上传' : '上传视频'}
{videoUrl ? srtT("uploaded") : srtT("uploadVideoButton")}
</LightButton>
</div>
<div className="border-gray-200 border-2 flex items p-2 justify-between items-center rounded gap-8">
<div className="flex items-center flex-col">
<FileText size={16} />
<span className="text-sm">
{subtitleData.length > 0 ? `字幕已上传 (${subtitleData.length} 条)` : "字幕未上传"}
{subtitleData.length > 0 ? srtT("subtitleUploaded", { count: subtitleData.length }) : srtT("subtitleNotUploaded")}
</span>
</div>
<LightButton onClick={handleSubtitleUpload} disabled={!!subtitleUrl}>
{subtitleUrl ? '已上传' : '上传字幕'}
{subtitleUrl ? srtT("uploaded") : srtT("uploadSubtitleButton")}
</LightButton>
</div>
</div>