login/page.tsx - 登录页

login/page.tsx - 登录页

基本信息

属性值
路径src/app/(auth)/login/page.tsx
类型Next.js 页面组件 (Server Component)
功能用户登录页面

功能描述

提供用户登录入口，支持多种认证方式（凭证登录、OAuth）。根据配置动态显示不同的登录选项和说明文字。

导入依赖

import { Metadata } from "next";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { getConfig } from "@/lib/config";
import { AuthContent } from "@/components/auth/auth-content";

元数据

export const metadata: Metadata = {
  title: "Login",
  description: "Login to your account",
};

辅助函数

getProviders(config)

从配置中提取认证提供者列表，兼容新旧配置格式。

参数类型说明
configAwaited<ReturnType<typeof getConfig>>应用配置对象

返回值: string[] - 认证提供者数组（默认 ["credentials"]）

配置兼容性:

  • 优先使用 config.auth.providers 数组
  • 兼容旧的 config.auth.provider 单值
  • 默认回退到凭证登录

组件逻辑

主组件: LoginPage

异步数据获取:

  1. 获取国际化翻译（auth 命名空间）
  2. 获取应用配置
  3. 解析认证提供者列表

状态判断:

  • hasCredentials: 是否启用凭证登录
  • hasOnlyCredentials: 是否仅启用凭证登录（无 OAuth）
  • useCloneBranding: 是否使用克隆品牌标识

UI 结构

Container (flex, min-h, centered)
├── max-w-sm wrapper
│   ├── Header (centered)
│   │   ├── Title: "登录"
│   │   └── Description (动态: loginDescription / loginDescriptionOAuth)
│   ├── AuthContent (bordered box)
│   │   └── providers, mode="login", useCloneBranding
│   └── Footer Link (条件渲染)
│       └── "没有账号？注册" → /register

翻译键值

键值用途
auth.login页面标题
auth.loginDescription仅凭证登录时的描述
auth.loginDescriptionOAuth含 OAuth 时的描述
auth.noAccount"还没有账号" 文本
auth.register"注册" 链接文本

相关组件

  • AuthContent (@/components/auth/auth-content) - 认证表单主体

路由

路径说明
/login登录页面
/register注册页面（链接跳转）

配置依赖

  • config.auth.providers / config.auth.provider - 认证提供者
  • config.homepage.useCloneBranding - 品牌标识设置
← 返回目录