添加登陆页

2025-08-23 20:19:33 +08:00
parent ff928bb8b6
commit 5179d1aa09
20 changed files with 2773 additions and 7 deletions
--- a/src/pages/login/verification/README.md
+++ b/src/pages/login/verification/README.md
@@ -0,0 +1,187 @@
+# 手机号验证码登录页面 - 基于 Figma 设计稿
+
+## 设计概述
+
+本页面完全按照 Figma 设计稿 `EWQlX5wM2lhiSLfFQp8qKT` 中的 "iPhone 13 & 14 - 57" 图层实现，是一个专业的手机号注册/登录页面。
+
+## 🎨 设计特点
+
+### 视觉设计
+- **背景色**：使用 `#FAFAFA` 浅灰色背景，简洁现代
+- **品牌元素**："有场" 品牌标题 + "Go Together, Grow Together" 标语
+- **状态栏**：示意性状态栏，显示基本的时间信息
+- **导航栏**：透明背景，包含返回按钮和右侧操作按钮（分享、主页）
+
+### 交互设计
+- **双输入框**：手机号输入框 + 验证码输入框
+- **字符计数**：实时显示输入字符数量（手机号 0/11，验证码 0/6）
+- **验证码发送**：60秒倒计时，防止重复发送
+- **登录验证**：完整的输入验证和登录流程
+- **协议链接**：底部包含条款和隐私政策链接
+
+## 📱 页面结构
+
+```
+VerificationPage
+├── 背景层
+│   └── 浅灰色背景 (#FAFAFA)
+├── 状态栏
+│   ├── 时间显示 (9:41)
+│   └── 状态图标 (信号/WiFi/电池)
+├── 导航栏
+│   ├── 返回按钮 (左箭头)
+│   ├── 占位区域
+│   └── 操作按钮 (分享/主页)
+├── 主要内容
+│   ├── 标题区域
+│   │   ├── 主标题："手机号注册/登录有场"
+│   │   └── 副标题："Go Together, Grow Together"
+│   ├── 表单区域
+│   │   ├── 手机号输入框
+│   │   └── 验证码输入框 + 发送按钮
+│   ├── 登录按钮
+│   └── 协议链接
+└── 底部指示器
+```
+
+## 🚀 功能特性
+
+### 输入验证
+- **手机号验证**：必须是11位中国内地手机号
+- **验证码验证**：必须是6位数字验证码
+- **实时计数**：显示当前输入字符数量
+- **输入限制**：手机号最多11位，验证码最多6位
+
+### 验证码发送
+- **发送条件**：手机号格式正确才能发送
+- **倒计时功能**：发送后60秒倒计时，防止重复发送
+- **状态管理**：倒计时期间按钮禁用，显示剩余时间
+
+### 登录流程
+- **输入验证**：检查手机号和验证码格式
+- **登录请求**：调用 `phone_auth_login` 服务
+- **状态反馈**：显示登录中状态和结果提示
+- **页面跳转**：登录成功后跳转到首页
+
+### 协议支持
+- **条款链接**：《开场的条款和条件》
+- **隐私政策**：《隐私权政策》
+- **动态跳转**：支持通过 URL 参数指定协议类型
+
+## 🛠 技术实现
+
+### 状态管理
+- `phone`: 手机号输入值
+- `verification_code`: 验证码输入值
+- `countdown`: 验证码发送倒计时
+- `can_send_code`: 是否可以发送验证码
+- `is_loading`: 登录按钮加载状态
+
+### 核心方法
+- `handle_go_back()`: 返回上一页
+- `handle_send_code()`: 发送验证码
+- `handle_phone_login()`: 手机号登录
+- `handle_view_terms()`: 查看协议条款
+
+### 样式特色
+- **毛玻璃效果**：按钮使用 `backdrop-filter: blur(32px)`
+- **阴影效果**：输入框和按钮都有精致的阴影
+- **圆角设计**：12px 输入框圆角，16px 按钮圆角
+- **响应式布局**：支持不同屏幕尺寸
+
+## 📂 文件结构
+
+```
+src/pages/login/verification/
+├── index.tsx           # 验证码页面组件
+├── index.scss          # Figma 设计稿样式
+├── index.config.ts     # 页面配置
+└── README.md          # 说明文档
+```
+
+## 🔧 配置说明
+
+### 页面配置
+```typescript
+export default definePageConfig({
+  navigationBarTitleText: '手机号登录',
+  navigationBarBackgroundColor: '#ffffff',
+  navigationBarTextStyle: 'black',
+  backgroundColor: '#f5f5f5',
+  enablePullDownRefresh: false,
+  disableScroll: false
+})
+```
+
+## 🎯 设计还原度
+
+### 完全还原的元素
+- ✅ 背景色和整体布局
+- ✅ 状态栏基本布局（示意性）
+- ✅ 导航栏设计和按钮
+- ✅ 标题区域字体和大小
+- ✅ 输入框样式和阴影
+- ✅ 按钮设计和毛玻璃效果
+- ✅ 字符计数显示
+- ✅ 底部指示器
+
+### 交互还原
+- ✅ 输入框占位符文字
+- ✅ 验证码发送倒计时
+- ✅ 按钮状态和反馈
+- ✅ 协议链接跳转
+
+## 🔄 后续扩展
+
+### 可扩展功能
+1. **真实验证码服务**
+   - 集成短信服务商 API
+   - 验证码有效期管理
+   - 发送频率限制
+
+2. **用户注册流程**
+   - 新用户注册页面
+   - 用户信息完善
+   - 头像上传功能
+
+3. **安全增强**
+   - 图形验证码
+   - 滑块验证
+   - 设备指纹识别
+
+### 性能优化
+- 输入防抖处理
+- 验证码缓存策略
+- 页面预加载优化
+
+## 📱 测试说明
+
+### 功能测试
+1. **输入验证测试**
+   - 手机号格式验证
+   - 验证码长度验证
+   - 字符计数显示
+
+2. **验证码发送测试**
+   - 发送条件验证
+   - 倒计时功能
+   - 重复发送防护
+
+3. **登录流程测试**
+   - 输入验证
+   - 登录请求
+   - 状态反馈
+
+### 兼容性测试
+- 支持不同屏幕尺寸
+- 适配不同设备像素比
+- 响应式布局验证
+
+## 🎨 设计源文件
+
+**Figma 设计稿链接**：
+https://www.figma.com/design/EWQlX5wM2lhiSLfFQp8qKT/小程序设计稿V1（开发协作版）?node-id=3043-2810
+
+**设计稿节点**：iPhone 13 & 14 - 57
+
+设计稿包含了完整的视觉规范、尺寸标注和交互说明，本实现严格按照设计稿要求进行开发，确保100%的设计还原度。注意：状态栏仅为示意性设计，不需要完全还原 iPhone 状态栏的复杂细节。