Module Update

docs/design/001_auth_ui_implementation.md

@@ -0,0 +1,76 @@
+# 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`).