87 lines
2.9 KiB
Markdown
87 lines
2.9 KiB
Markdown
# 实现独立邀请码组件并集成到登录表单
|
||
|
||
## 1. 创建独立的邀请码组件
|
||
|
||
### 1.1 创建 InviteCodeInput.vue 组件
|
||
- 组件路径：`src/components/auth/InviteCodeInput.vue`
|
||
- 实现邀请码输入框，包含label、input和错误提示
|
||
- 使用与现有表单相同的样式和结构
|
||
- 添加邀请码的必填验证逻辑
|
||
- 支持实时验证和错误提示
|
||
- 支持加载状态
|
||
|
||
### 1.2 组件功能设计
|
||
- 支持v-model双向绑定
|
||
- 支持自定义placeholder和label
|
||
- 支持错误信息显示
|
||
- 支持禁用状态
|
||
- 支持聚焦和失焦事件
|
||
|
||
## 2. 更新 LoginForm.vue 组件
|
||
|
||
### 2.1 引入并使用 InviteCodeInput 组件
|
||
- 在LoginForm.vue中引入InviteCodeInput组件
|
||
- 在登录按钮下方添加一个div容器，使用`divider`类名进行隔离
|
||
- 在div容器中使用InviteCodeInput组件
|
||
- 传递必要的props和事件
|
||
|
||
### 2.2 更新表单数据和验证
|
||
- 在form对象中添加inviteCode字段
|
||
- 在rules中添加inviteCode的必填验证
|
||
- 添加inviteCodeError状态变量
|
||
- 更新表单有效性判断，包含inviteCode验证
|
||
|
||
## 3. 更新 Login.vue 页面
|
||
|
||
### 3.1 添加邀请码状态管理
|
||
- 在Login.vue中添加inviteCode状态变量
|
||
- 添加inviteCodeError状态变量
|
||
- 添加validateInviteCode函数
|
||
|
||
### 3.2 更新Google登录按钮逻辑
|
||
- 将inviteCode状态传递给GoogleOAuthButton组件
|
||
- 更新GoogleOAuthButton的disabled属性，只有inviteCode有效时才启用
|
||
- 确保Google登录流程能够获取到邀请码信息
|
||
|
||
## 4. 实现样式隔离
|
||
|
||
### 4.1 使用divider进行样式隔离
|
||
- 在LoginForm组件和InviteCodeInput组件之间添加divider
|
||
- 确保视觉上的清晰分隔
|
||
- 保持与现有分割线一致的样式
|
||
|
||
## 5. 实现Google登录与邀请码的关联
|
||
|
||
### 5.1 共享邀请码状态
|
||
- 确保LoginForm和Google登录按钮使用同一个邀请码状态
|
||
- 实现跨组件的状态同步
|
||
- 确保Google登录时能够传递邀请码信息到后端
|
||
|
||
## 6. 国际化支持
|
||
|
||
### 6.1 添加邀请码相关的i18n翻译
|
||
- 在i18n配置文件中添加邀请码相关的翻译文本
|
||
- 确保中英文都有对应的翻译
|
||
|
||
## 7. 响应式设计
|
||
|
||
### 7.1 确保邀请码组件在各种屏幕尺寸下正常显示
|
||
- 适配移动端、平板端和桌面端
|
||
- 确保在不同主题下正常显示
|
||
|
||
## 实现步骤
|
||
|
||
1. 创建独立的InviteCodeInput.vue组件
|
||
2. 更新LoginForm.vue，引入并使用InviteCodeInput组件
|
||
3. 更新Login.vue，添加邀请码状态管理和Google登录按钮的禁用逻辑
|
||
4. 实现样式隔离和响应式设计
|
||
5. 测试所有功能，确保邀请码功能正常工作，且Google登录按钮只有在填写邀请码后才能使用
|
||
|
||
## 预期效果
|
||
|
||
1. 登录表单下方新增邀请码输入组件，用divider隔离
|
||
2. 邀请码为必填项，有实时验证和错误提示
|
||
3. Google登录按钮初始禁用，填写邀请码后启用
|
||
4. 邀请码组件样式与现有表单保持一致
|
||
5. 支持响应式设计和国际化
|
||
6. 支持明暗主题切换 |