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

## 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. 支持明暗主题切换