77 lines
3.0 KiB
Markdown
77 lines
3.0 KiB
Markdown
# 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`).
|