# 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`).