2.9 KiB

Raw Blame History

实现独立邀请码组件并集成到登录表单

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 确保邀请码组件在各种屏幕尺寸下正常显示

适配移动端、平板端和桌面端
确保在不同主题下正常显示

实现步骤

创建独立的InviteCodeInput.vue组件
更新LoginForm.vue，引入并使用InviteCodeInput组件
更新Login.vue，添加邀请码状态管理和Google登录按钮的禁用逻辑
实现样式隔离和响应式设计
测试所有功能，确保邀请码功能正常工作，且Google登录按钮只有在填写邀请码后才能使用

预期效果

登录表单下方新增邀请码输入组件，用divider隔离
邀请码为必填项，有实时验证和错误提示
Google登录按钮初始禁用，填写邀请码后启用
邀请码组件样式与现有表单保持一致
支持响应式设计和国际化
支持明暗主题切换