63 lines
3.3 KiB
Markdown
63 lines
3.3 KiB
Markdown
# 页面设计: 认证流程 (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。
|