Auth UI Implementation Details

Date: 2025-12-23 Author: Senior Frontend Engineer Module: Auth (src/modules/auth)

1. 概述 (Overview)

本文档记录了登录 (/login) 和注册 (/register) 页面的前端实现细节。遵循 Vertical Slice Architecture 和 Pixel-Perfect UI 规范。

2. 架构设计 (Architecture)

2.1 目录结构

所有认证相关的业务逻辑和组件均封装在 src/modules/auth 下，保持了高内聚。

src/
├── app/
│   └── (auth)/             # 路由层 (Server Components)
│       ├── layout.tsx      # 统一的 AuthLayout 容器
│       ├── login/page.tsx
│       └── register/page.tsx
│
├── modules/
│   └── auth/               # 业务模块
│       └── components/     # 模块私有组件
│           ├── auth-layout.tsx  # 左右分屏布局
│           ├── login-form.tsx   # 登录表单 (Client Component)
│           └── register-form.tsx # 注册表单 (Client Component)

2.2 渲染策略

Server Components: 页面入口 (page.tsx) 和布局 (layout.tsx) 默认为服务端组件，负责元数据 (Metadata) 和静态结构渲染。
Client Components: 表单组件 (*-form.tsx) 标记为 'use client'，处理交互逻辑（状态管理、表单提交、Loading 状态）。

3. UI/UX 细节

3.1 布局 (Layout)

采用 Split Screen (分屏) 设计：

左侧 (Desktop Only):
- 深色背景 (bg-zinc-900)，强调品牌沉浸感。
- 包含 Logo (Next_Edu) 和用户证言 (Blockquote)。
- 使用 hidden lg:flex 实现响应式显隐。
右侧:
- 居中对齐的表单容器。
- 移动端优先 (w-full)，桌面端限制最大宽度 (sm:w-[350px])。

3.2 交互 (Interactions)

Loading State: 表单提交时按钮进入 disabled 状态并显示 Loader2 旋转动画。
Micro-animations:
- 按钮 Hover 效果。
- 链接 Hover 下划线 (hover:underline).
Feedback: 模拟了 3 秒的异步请求延迟，用于演示加载状态。

4. 错误处理 (Error Handling)

4.1 模块级错误边界

Scoped Error Boundary: src/app/(auth)/error.tsx 仅处理 Auth 模块内的运行时错误。
- 显示友好的 "Authentication Error" 提示。
- 提供 "Try again" 按钮重置状态。

4.2 模块级 404

Scoped Not Found: src/app/(auth)/not-found.tsx 处理 Auth 模块内的无效路径。
- 引导用户返回 /login 页面，防止用户迷失。

5. 组件复用

使用了 src/shared/components/ui 中的标准 Shadcn 组件：
- Button, Input, Label (新增).
图标库统一使用 lucide-react.

5. 后续计划 (Next Steps)

集成 next-auth (Auth.js) 进行实际的身份验证。
添加 Zod Schema 进行前端表单验证。
对接后端 API (src/modules/auth/actions.ts).

3.0 KiB Raw Blame History Unescape Escape