# 页面设计: 认证流程 (Auth)

> **路由**: `/auth/login` (合并登录与注册)
> **布局**: `LayoutAuth` (全屏居中大卡片，内部左右分栏)

## 1. 布局结构 (Centered Split Layout)

采用屏幕居中的大尺寸卡片布局，将品牌展示与操作表单完美融合。

- **外层容器**: `min-h-screen bg-slate-50 flex items-center justify-center p-4`
- **主卡片**: `w-full max-w-4xl bg-white rounded-2xl shadow-2xl overflow-hidden flex min-h-[550px]`
  - **左侧 (品牌区 - Brand Area)**: `w-1/2 hidden md:flex bg-slate-900 relative p-12 flex-col justify-between text-white`
    - **顶部**: Logo 展示。
    - **中部**: 
      - `h1`: "探索内容的无限可能" (text-4xl font-bold leading-tight)
      - `p`: "专业的租户管理与内容交付平台，连接创作者与用户。" (text-slate-400 mt-4)
    - **底部**: `text-xs text-slate-500`: "© 2025 Quyun. All rights reserved."
  - **右侧 (表单区 - Form Area)**: `w-full md:w-1/2 p-8 sm:p-12 flex flex-col justify-center`

---

## 2. 核心交互流程 (手机号 OTP 登录/注册)

页面不区分登录和注册，统一通过手机号验证码进入。若手机号未注册，验证通过后后台自动创建账号。

### 2.1 第一步：输入手机号
- **标题**: "欢迎回来" (text-2xl font-bold text-slate-900)
- **描述**: "未注册的手机号验证后将自动创建账号" (text-sm text-slate-500 mt-2 mb-8)
- **表单元素**:
  - **手机号输入**: `flex` 结构。前置国家代码 `+86` (不可选或下拉)，后接 Input。
    - 样式: `border-slate-200 focus:border-primary-500 rounded-lg`
  - **协议勾选**: 位于按钮上方。
    - `[ ] 我已阅读并同意《用户协议》和《隐私政策》`
    - **交互**: 协议名称点击后 **新窗口打开** (`target="_blank"`)。
  - **提交按钮**: "获取验证码" (Primary Button, Full Width, `h-12`)。
- **第三方登录 (Footer)**: 
  - 分隔线: "其他方式登录" (text-xs text-slate-400)
  - 图标组: 微信、GitHub 等圆型图标按钮。

### 2.2 第二步：输入验证码 (OTP Input)
*用户点击获取验证码成功后，表单区域平滑切换（或水平滑入）至验证码输入界面。*

- **提示**: "验证码已发送至 +86 138****8888" (含返回修改图标)。
- **验证码输入框**: 
  - **连体样式**: 单个 Input，但通过 CSS `letter-spacing` 或背景装饰模拟 6 位网格感，或者使用标准的 6 位连体窄间距输入框。
  - **交互**: 自动聚焦，仅限数字，长度 6 位。
- **辅助操作**:
  - **倒计时**: "59s 后重新获取" (不可点击) -> "重新获取验证码" (可点击)。
- **确认按钮**: "登录 / 进入 QuYun"。

---

## 3. 逻辑与细节

- **自动注册逻辑**: 验证码校验通过后，由后端判断 `is_new_user`。
- **跳转逻辑**: 登录/注册成功后，统一跳转回 **首页 (`/`)** 或 **来源页 (redirect_url)**。不强制跳转完善资料页。
- **校验规则**:
  - 手机号: 必须符合中国大陆 11 位手机号格式。
  - 协议: 未勾选时点击“获取验证码”，按钮执行“抖动”动画，并在下方显示红色提示“请先同意用户协议”。
- **加载状态**:
  - 发送验证码时，按钮进入 `loading` 状态，防止重复点击。
  - 登录校验时，全屏或区域遮罩 Loading。