sec commit
This commit is contained in:
593
shared/designs/user-auth-design.md
Normal file
593
shared/designs/user-auth-design.md
Normal file
@@ -0,0 +1,593 @@
|
||||
# 用户注册登录模块 UI 设计规范
|
||||
|
||||
> 版本：v1.0 | 日期：2026-03-28 | 设计风格：简约·现代·可信
|
||||
|
||||
---
|
||||
|
||||
## 1. 页面列表
|
||||
|
||||
| 页面 | 路由 | 说明 |
|
||||
|------|------|------|
|
||||
| 登录页 | `/login` | 手机号 + 验证码登录 |
|
||||
| 注册页 | `/register` | 手机号注册账号 |
|
||||
| 修改密码页 | `/reset-password` | 通过验证码重置密码 |
|
||||
| 设备管理页 | `/devices` | 查看 & 管理已登录设备 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 页面布局 — ASCII 线框图
|
||||
|
||||
### 2.1 登录页 `/login`
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ [状态栏 44px] │ ← 沉浸式状态栏（背景色延伸）
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────┐ │
|
||||
│ │ LOGO │ │ ← 品牌 Logo（居中，距顶部 12%）
|
||||
│ └─────────────┘ │
|
||||
│ │
|
||||
│ APP 名称 │ ← H1，36px，居中
|
||||
│ 欢迎回来，请登录 │ ← 副标题，28px，#666
|
||||
│ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 📱 +86 ▾ │ │ ← 国家区号选择（左图标 20px）
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 请输入手机号 │ │ ← 输入框 高度 48px，圆角 12px
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────┐ ┌─────┐ │
|
||||
│ │ 请输入验证码 │ │获取 │ │ ← 验证码输入框 + 倒计时按钮
|
||||
│ └───────────────────┘ └─────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 登 录 │ │ ← 主按钮，高度 48px，圆角 24px
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ ☐ 同意《用户协议》和《隐私政策》 │ ← 复选框 + 法律文本，14px
|
||||
│ │
|
||||
│ 还没有账号？注册 → │ ← 底部链接，#1A73E8
|
||||
│ │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 2.2 注册页 `/register`
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ [状态栏 44px] │
|
||||
├─────────────────────────────────┤
|
||||
│ ← 返回 │ ← 顶部导航栏，左返回右空白
|
||||
│ │
|
||||
│ 新用户注册 │ ← H1，36px
|
||||
│ 完成以下步骤创建账号 │ ← 副标题，28px
|
||||
│ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 📱 +86 ▾ │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 请输入手机号 │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────┐ ┌─────┐ │
|
||||
│ │ 请输入验证码 │ │获取 │ │
|
||||
│ └───────────────────┘ └─────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 设置密码（8-20位） │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 确认密码 │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 注 册 │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ ☐ 同意《用户协议》和《隐私政策》 │
|
||||
│ │
|
||||
│ 已有账号？登录 → │
|
||||
│ │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 2.3 修改密码页 `/reset-password`
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ [状态栏 44px] │
|
||||
├─────────────────────────────────┤
|
||||
│ ← 返回 │
|
||||
│ │
|
||||
│ 忘记密码 │ ← H1，36px
|
||||
│ 通过绑定手机号重置密码 │ ← 副标题，28px
|
||||
│ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 📱 +86 ▾ │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 请输入手机号 │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────┐ ┌─────┐ │
|
||||
│ │ 请输入验证码 │ │获取 │ │
|
||||
│ └───────────────────┘ └─────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 设置新密码（8-20位） │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 确认新密码 │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 确 认 │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ 想起密码了？登录 → │
|
||||
│ │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 2.4 设备管理页 `/devices`
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ [状态栏 44px] │
|
||||
├─────────────────────────────────┤
|
||||
│ ← 返回 设备管理 │ ← 顶部导航栏
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ 当前设备 │ ← Section Header
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 📱 鸿蒙手机 · HarmonyOS │ │ ← 设备卡片（高亮边框 #1A73E8）
|
||||
│ │ Chrome 122 · 192.168.1.5 │ │
|
||||
│ │ 当前位置：上海 · 1小时前活跃 │ │
|
||||
│ │ [当前] │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ 其他设备（3） │ ← Section Header
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 💻 Windows PC · Win 11 │ │
|
||||
│ │ Chrome 122 · 10.0.0.2 │ │
|
||||
│ │ 北京 · 3天前活跃 │ │
|
||||
│ │ [移除] │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 📱 iPhone 15 · iOS 17 │ │
|
||||
│ │ Safari 17 · 10.0.0.8 │ │
|
||||
│ │ 上海 · 7天前活跃 │ │
|
||||
│ │ [移除] │ │
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────┐ │
|
||||
│ │ 退出所有其他设备 │ │ ← 危险操作按钮
|
||||
│ └───────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 颜色规范
|
||||
|
||||
### 3.1 色彩系统
|
||||
|
||||
```
|
||||
主色（Primary）
|
||||
├─ Primary-500 #1A73E8 ← 主按钮背景、链接文字、选中态
|
||||
├─ Primary-400 #4285F4 ← Hover/Pressed 态
|
||||
├─ Primary-100 #D2E3FC ← 浅色背景、标签填充
|
||||
└─ Primary-50 #EBF5FF ← 极浅背景
|
||||
|
||||
辅色（Secondary）
|
||||
├─ Secondary-500 #34A853 ← 成功状态、验证通过
|
||||
└─ Secondary-100 #E6F4EA ← 成功背景
|
||||
|
||||
强调色（Accent）
|
||||
└─ Accent-500 #FBBC04 ← 警示、提示
|
||||
|
||||
危险色（Danger）
|
||||
├─ Danger-500 #EA4335 ← 错误状态、危险操作
|
||||
└─ Danger-100 #FCE8E6 ← 错误背景
|
||||
|
||||
中性色（Neutral）
|
||||
├─ Neutral-900 #202124 ← 主标题文字
|
||||
├─ Neutral-700 #5F6368 ← 正文文字
|
||||
├─ Neutral-500 #9AA0A6 ← 次要文字
|
||||
├─ Neutral-200 #E8EAED ← 分割线、边框
|
||||
└─ Neutral-100 #F1F3F4 ← 输入框背景
|
||||
|
||||
背景色（Background）
|
||||
├─ Bg-Page #FFFFFF ← 页面背景（默认模式）
|
||||
├─ Bg-Card #FFFFFF ← 卡片背景
|
||||
└─ Bg-Input #F8F9FA ← 输入框默认背景
|
||||
```
|
||||
|
||||
### 3.2 状态色速查
|
||||
|
||||
| 状态 | 颜色 | 使用场景 |
|
||||
|------|------|----------|
|
||||
| 默认（Default） | #5F6368 | 未输入时 placeholder |
|
||||
| 聚焦（Focus） | #1A73E8 | 输入框边框、标签 |
|
||||
| 成功（Success） | #34A853 | 校验通过、确认成功 |
|
||||
| 警告（Warning） | #FBBC04 | 验证码倒计时警告（<10s） |
|
||||
| 错误（Error） | #EA4335 | 校验失败、错误提示 |
|
||||
| 禁用（Disabled） | #DADCE0 | 禁用按钮背景 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 字体规范
|
||||
|
||||
### 4.1 字体家族
|
||||
|
||||
```
|
||||
主字体（Primary Font）
|
||||
└─ "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif
|
||||
— iOS/Android 系统中文优化字体栈
|
||||
|
||||
代码/数字（Mono）
|
||||
└─ "SF Mono", "Menlo", monospace
|
||||
— 验证码、密码显示
|
||||
```
|
||||
|
||||
### 4.2 字号层级
|
||||
|
||||
```
|
||||
┌──────────┬────────┬─────────────────────────────┐
|
||||
│ 层级 │ 字号 │ 使用场景 │
|
||||
├──────────┼────────┼─────────────────────────────┤
|
||||
│ H1 │ 36px │ 页面主标题 │
|
||||
│ H2 │ 24px │ 卡片标题、设备名称 │
|
||||
│ H3 │ 18px │ 区域标题、Section Header │
|
||||
│ Body-L │ 16px │ 主要正文内容 │
|
||||
│ Body-M │ 14px │ 次要说明、法律文本 │
|
||||
│ Body-S │ 12px │ 辅助说明、时间戳、设备详情 │
|
||||
│ Button │ 16px │ 按钮文字（加粗） │
|
||||
│ Caption │ 11px │ 极端次要信息 │
|
||||
└──────────┴────────┴─────────────────────────────┘
|
||||
|
||||
行高规则：
|
||||
- 标题：行高 = 字号 × 1.3
|
||||
- 正文：行高 = 字号 × 1.5
|
||||
- 紧凑列表：行高 = 字号 × 1.2
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 组件规范
|
||||
|
||||
### 5.1 输入框（TextInput）
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ Label（如有） │ ← 14px，#5F6368，间距 4px
|
||||
│ ┌──────────────────────────────────┐ │
|
||||
│ │ 👆 前置图标（可选） 后置图标 ▾ │ │ ← 内容区 48px 高
|
||||
│ └──────────────────────────────────┘ │
|
||||
│ ↑ 聚焦时边框 #1A73E8，2px 实线 │
|
||||
└──────────────────────────────────────┘
|
||||
|
||||
状态样式：
|
||||
Default：边框 #E8EAED，背景 #F8F9FA
|
||||
Focus： 边框 #1A73E8，背景 #FFFFFF，阴影 0 0 0 3px rgba(26,115,232,0.15)
|
||||
Error： 边框 #EA4335，背景 #FCE8E6
|
||||
Success：边框 #34A853（输入完成且通过校验时）
|
||||
Disabled：背景 #F1F3F4，文字 #9AA0A6，不可交互
|
||||
|
||||
尺寸：
|
||||
高度：48px（移动端最佳触控高度 ≥ 44px）
|
||||
圆角：12px
|
||||
内边距：左右 16px
|
||||
边框：1px solid
|
||||
```
|
||||
|
||||
### 5.2 主按钮（Primary Button）
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ 登 录 │ ← 16px Bold，白色或主色
|
||||
└──────────────────────────────────────┘
|
||||
|
||||
尺寸：
|
||||
高度：48px
|
||||
圆角：24px（全圆角按钮）
|
||||
宽度：100%（撑满父容器，左右边距 24px）
|
||||
|
||||
状态样式：
|
||||
Default： 背景 #1A73E8，文字 #FFFFFF
|
||||
Hover： 背景 #1557B0
|
||||
Pressed： 背景 #0D47A1，缩放 scale(0.98)
|
||||
Loading： 背景 #1A73E8，显示 spinner + "登录中..."
|
||||
Disabled： 背景 #DADCE0，文字 #5F6368
|
||||
|
||||
动画：
|
||||
Hover/Press：transition 150ms ease-out
|
||||
Loading spinner：旋转动画，360°/s 线性
|
||||
```
|
||||
|
||||
### 5.3 次按钮（Secondary Button）
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ Outline 样式 [移除] │
|
||||
└──────────────────────────────────────┘
|
||||
|
||||
状态样式：
|
||||
Default： 边框 #E8EAED，背景透明，文字 #5F6368
|
||||
Hover： 背景 #F1F3F4
|
||||
Pressed： 背景 #E8EAED
|
||||
Danger： 边框 #EA4335，文字 #EA4335
|
||||
```
|
||||
|
||||
### 5.4 验证码图片 / 滑动验证
|
||||
|
||||
> 说明：当风控判定需要图形验证时，展示滑动拼图或点选验证。
|
||||
> 此处规范由前端 FE 接入第三方组件（如 GeoEdge / Tencent防水墙），UI 层仅提供容器规范。
|
||||
|
||||
```
|
||||
容器规范：
|
||||
尺寸：宽度 100%，高度 200px（16:9 比例）
|
||||
圆角：12px
|
||||
边框：1px solid #E8EAED
|
||||
背景：#F8F9FA
|
||||
错误态：边框 #EA4335，背景 #FCE8E6
|
||||
```
|
||||
|
||||
### 5.5 手机号输入（PhoneInput）
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ ┌──────────┐ ┌────────────────────┐ │
|
||||
│ │ 📱 +86 ▾ │ │ 请输入手机号 │ │
|
||||
│ └──────────┘ └────────────────────┘ │
|
||||
└──────────────────────────────────────┘
|
||||
|
||||
区号选择器：
|
||||
宽度：72px（固定）
|
||||
右侧分隔线：1px solid #E8EAED
|
||||
点击展开下拉列表（最多显示 10 个常用国家）
|
||||
当前选中项：加粗显示
|
||||
|
||||
输入框：
|
||||
键盘类型：number（数字键盘）
|
||||
最大长度：11 位
|
||||
自动格式化：无（直接输入数字）
|
||||
```
|
||||
|
||||
### 5.6 倒计时按钮（Countdown Button）
|
||||
|
||||
```
|
||||
获取验证码 → 点击后变为： 59s 后重试
|
||||
|
||||
样式规则：
|
||||
默认态：边框 #1A73E8，文字 #1A73E8，背景透明
|
||||
倒计时中：边框 #E8EAED，文字 #9AA0A6，背景透明
|
||||
警告态（<10s）：文字 #FBBC04（橙色提示）
|
||||
可重发时：边框 #1A73E8，文字 #1A73E8 恢复
|
||||
|
||||
冷却时间：60 秒（不可配置）
|
||||
|
||||
尺寸：
|
||||
宽度：96px（固定）
|
||||
高度：48px
|
||||
圆角：12px
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 交互规范
|
||||
|
||||
### 6.1 输入校验反馈
|
||||
|
||||
```
|
||||
实时校验规则（以登录为例）：
|
||||
|
||||
手机号：
|
||||
├─ 空：显示 placeholder，不触发校验
|
||||
├─ 输入中（<11位）：不触发校验
|
||||
├─ 完成（11位且合法）：边框变绿 ✓，下方显示"手机号格式正确"
|
||||
└─ 完成（格式错误）：边框变红 ✗，下方显示"请输入正确的手机号"
|
||||
|
||||
验证码：
|
||||
├─ 空：显示 placeholder
|
||||
├─ 输入中：不变
|
||||
├─ 4位输入完成：触发后端校验
|
||||
│ ├─ 正确：边框变绿，显示"验证通过"
|
||||
│ └─ 错误：边框变红，显示"验证码错误，请重新输入"，清空输入框
|
||||
└─ 超时（5分钟）：显示"验证码已过期，请重新获取"
|
||||
|
||||
密码：
|
||||
├─ 空：显示 placeholder
|
||||
├─ <8位：显示"密码长度至少8位"
|
||||
├─ 8-20位：显示密码强度指示条（弱/中/强）
|
||||
└─ >20位：边框变红，显示"密码长度不能超过20位"
|
||||
|
||||
确认密码：
|
||||
├─ 空：不校验
|
||||
├─ 与密码一致：边框变绿
|
||||
└─ 不一致：边框变红，显示"两次输入的密码不一致"
|
||||
|
||||
错误提示：
|
||||
位置：输入框正下方，距输入框 4px
|
||||
字号：12px
|
||||
颜色：#EA4335
|
||||
动画：淡入（opacity 0→1，200ms ease-in）
|
||||
```
|
||||
|
||||
### 6.2 按钮 Loading 状态
|
||||
|
||||
```
|
||||
触发条件：点击主按钮后至接口返回前
|
||||
|
||||
表现：
|
||||
1. 按钮文字替换为加载动画 + "处理中..."
|
||||
2. 按钮不可再次点击（pointer-events: none）
|
||||
3. 背景色保持主色，但明度降低 10%
|
||||
4. 输入框同时禁用（防止数据不一致）
|
||||
5. 页面其他区域显示半透明遮罩（可选，避免双次提交）
|
||||
|
||||
Loading 动画规格：
|
||||
样式：旋转圆环（Spinner）
|
||||
尺寸：16px × 16px
|
||||
颜色：白色（主按钮上）或 #1A73E8（次按钮上）
|
||||
动画：360° 线性旋转，1s/圈
|
||||
|
||||
返回后：
|
||||
成功 → 显示成功提示后跳转
|
||||
失败 → 恢复按钮，错误提示显示在按钮下方
|
||||
```
|
||||
|
||||
### 6.3 错误提示位置规则
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ ┌──────────────────────────────┐ │
|
||||
│ │ 输入框 │ │
|
||||
│ └──────────────────────────────┘ │
|
||||
│ ↑ │
|
||||
│ │ 间距 4px │
|
||||
│ ↓ │
|
||||
│ ✗ 错误提示文字（12px，红色） │
|
||||
│ │
|
||||
└──────────────────────────────────────┘
|
||||
|
||||
错误提示展示规则：
|
||||
1. 表单顶部（页面级错误）：固定在页面顶部，向下滑出，3s 后自动消失
|
||||
2. 字段级错误：跟随对应输入框，保留至下次输入
|
||||
3. Toast 错误：用于接口返回的全局错误，出现在页面中部，3s 后消失
|
||||
4. 不使用 Alert（模态对话框）打断用户操作流程
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 移动端适配
|
||||
|
||||
### 7.1 核心布局规则
|
||||
|
||||
```
|
||||
Viewport：
|
||||
├─ 设置：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
└─ 安全区域：使用 env(safe-area-inset-*) 适配刘海屏 / 圆角屏
|
||||
|
||||
页面结构：
|
||||
顶部安全区 + 页面内容 + 底部安全区
|
||||
|
||||
内容区：
|
||||
├─ 最大宽度：428px（覆盖主流全面屏手机）
|
||||
├─ 左右边距：24px（防止内容贴边）
|
||||
├─ 内容垂直居中或顶部对齐（登录类建议垂直居中，注册类顶部对齐）
|
||||
└─ 键盘弹出时：页面整体上移，输入框保持可见
|
||||
|
||||
触控目标：
|
||||
├─ 所有可点击元素：最小 44px × 44px
|
||||
├─ 按钮高度：固定 48px（略大于最小值，提升手感）
|
||||
└─ 元素间距：至少 8px（防止误触）
|
||||
```
|
||||
|
||||
### 7.2 键盘弹出时的布局处理
|
||||
|
||||
```
|
||||
场景：点击输入框，软键盘弹出
|
||||
|
||||
iOS（Safari / WKWebView）：
|
||||
├─ 输入框自动滚动到可视区（由浏览器自动处理）
|
||||
├─ 页面高度变化：window.innerHeight 减小
|
||||
└─ 建议：使用 scrollIntoViewIfNeeded 或 smooth scroll
|
||||
|
||||
Android：
|
||||
├─ 监听 resize 事件，重新计算布局
|
||||
├─ 输入框滚动至可视区上方（留出键盘高度空间）
|
||||
└─ 避免 fixed 定位元素被键盘遮挡
|
||||
|
||||
推荐实现：
|
||||
const handleFocus = (e) => {
|
||||
setTimeout(() => {
|
||||
e.target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 300); // 等待键盘动画完成
|
||||
};
|
||||
```
|
||||
|
||||
### 7.3 横屏处理
|
||||
|
||||
```
|
||||
策略：强制竖屏（推荐）
|
||||
|
||||
若需支持横屏：
|
||||
├─ 内容最大宽度：568px（竖屏基准）
|
||||
├─ 表单居中，两侧留白
|
||||
└─ 不做两栏布局（移动端无必要性）
|
||||
```
|
||||
|
||||
### 7.4 深色模式（Dark Mode）
|
||||
|
||||
```
|
||||
检测：prefers-color-scheme: dark
|
||||
|
||||
色彩映射（Dark Mode）：
|
||||
Background-Page： #121212
|
||||
Background-Card： #1E1E1E
|
||||
Background-Input： #2C2C2C
|
||||
Neutral-900： #E8EAED （主标题）
|
||||
Neutral-700： #BDC1C6 （正文）
|
||||
Neutral-500： #9AA0A6 （次要文字不变）
|
||||
Primary-500： #8AB4F8 （主色降低亮度保持辨识度）
|
||||
Danger-500： #F28B82 （危险色降低亮度）
|
||||
边框色： #3C4043 （比亮色模式边框更明显）
|
||||
|
||||
注：深色模式不改变字号层级和组件结构，仅调整色彩值。
|
||||
```
|
||||
|
||||
### 7.5 高频问题标注
|
||||
|
||||
```
|
||||
❗ 输入框获取焦点时，页面不要抖动
|
||||
→ 避免使用 height: 100vh，改用 min-height
|
||||
|
||||
❗ 验证码倒计时期间，切忌刷新页面丢失状态
|
||||
→ 使用 localStorage 或 sessionStorage 存储倒计时剩余秒数
|
||||
|
||||
❗ 登录/注册接口返回 429（频繁请求）时
|
||||
→ 按钮显示"操作过于频繁，请稍后再试"，倒计时延长至 300s
|
||||
|
||||
❗ 弱网环境下，loading 时长超过 3s 应显示网络提示
|
||||
→ "网络较慢，请检查网络连接"
|
||||
|
||||
❗ iOS 输入框 autocomplete=off 可能不生效
|
||||
→ 额外使用 autocomplete="tel" 和 CSS -webkit-text-security 防护
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. 组件清单汇总
|
||||
|
||||
| 组件 | 组件名 | 规范章节 |
|
||||
|------|--------|----------|
|
||||
| 输入框 | TextInput | 5.1 |
|
||||
| 主按钮 | PrimaryButton | 5.2 |
|
||||
| 次按钮 | SecondaryButton | 5.3 |
|
||||
| 图形验证容器 | CaptchaContainer | 5.4 |
|
||||
| 手机号输入 | PhoneInput | 5.5 |
|
||||
| 倒计时按钮 | CountdownButton | 5.6 |
|
||||
| 设备卡片 | DeviceCard | 2.4 |
|
||||
| 法律文本链接 | LegalLinks | — |
|
||||
|
||||
---
|
||||
|
||||
## 9. 设计资源
|
||||
|
||||
```
|
||||
图标库：推荐使用 Lucide Icons 或 Feather Icons（开源、一致性强）
|
||||
圆角基准：8px（微圆角）/ 12px（输入框）/ 16px（卡片）/ 24px（主按钮）
|
||||
阴影规范：
|
||||
卡片阴影：0 2px 8px rgba(0,0,0,0.08)
|
||||
浮层阴影：0 4px 16px rgba(0,0,0,0.12)
|
||||
输入框聚焦：0 0 0 3px rgba(26,115,232,0.15)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
> 设计规范完毕。如有疑问请在共享目录 designs/ 下提交 Issue。
|
||||
Reference in New Issue
Block a user