428aa95c5e
- 在swift-assistant-style.mdc中添加项目背景、代码结构、命名规范、Swift最佳实践、UI开发、性能、安全性、测试与质量、核心功能、开发流程、App Store指南等详细规则。 - 在yanaApp.swift中将SplashView替换为Splash，简化应用结构。
124 lines
4.7 KiB
Markdown
124 lines
4.7 KiB
Markdown
# 组件抽离到CommonComponents重构
|
||
|
||
## 重构概述
|
||
|
||
将MVVM目录中重复定义的UI组件抽离到`CommonComponents.swift`中，实现组件的统一管理和复用，避免代码重复。
|
||
|
||
## 重名组件分析
|
||
|
||
### 发现的重名组件
|
||
1. **IDLoginBackgroundView** - 在`IDLoginPage.swift`和`IDLoginView.swift`中重复定义
|
||
2. **IDLoginHeaderView** - 在`IDLoginPage.swift`和`IDLoginView.swift`中重复定义
|
||
3. **CustomInputField** - 在`IDLoginPage.swift`、`IDLoginView.swift`和`CommonComponents.swift`中重复定义
|
||
4. **IDLoginButton/IDLoginButtonView** - 在`IDLoginPage.swift`和`IDLoginView.swift`中重复定义
|
||
|
||
### 组件功能对比
|
||
所有重复组件功能完全相同，只是命名略有不同，适合统一管理。
|
||
|
||
## 重构方案
|
||
|
||
### 1. 组件命名统一
|
||
- `IDLoginBackgroundView` → `LoginBackgroundView`
|
||
- `IDLoginHeaderView` → `LoginHeaderView`
|
||
- `IDLoginButtonView` → `LoginButtonView`
|
||
- `CustomInputField` → 保持原名（已在CommonComponents中）
|
||
|
||
### 2. 文件修改列表
|
||
|
||
#### 修改的文件
|
||
- `yana/MVVM/IDLoginPage.swift` - 移除重复组件，使用CommonComponents
|
||
- `yana/Views/IDLoginView.swift` - 移除重复组件，使用CommonComponents
|
||
- `yana/MVVM/EMailLoginPage.swift` - 使用CommonComponents组件
|
||
- `yana/MVVM/RecoverPasswordPage.swift` - 使用CommonComponents组件
|
||
- `yana/MVVM/LoginPage.swift` - 使用CommonComponents组件
|
||
- `yana/MVVM/Splash.swift` - 使用CommonComponents组件
|
||
- `yana/MVVM/MainPage.swift` - 使用CommonComponents组件
|
||
|
||
#### 保持的文件
|
||
- `yana/MVVM/CommonComponents.swift` - 统一管理所有组件
|
||
|
||
## 重构内容
|
||
|
||
### 1. IDLoginPage.swift
|
||
- ✅ 移除`IDLoginBackgroundView`、`IDLoginHeaderView`、`CustomInputField`、`IDLoginButton`组件定义
|
||
- ✅ 使用`LoginBackgroundView`、`LoginHeaderView`、`CustomInputField`、`LoginButtonView`
|
||
- ✅ 保持ViewModel和主视图逻辑不变
|
||
|
||
### 2. IDLoginView.swift (Views目录)
|
||
- ✅ 移除`IDLoginBackgroundView`、`IDLoginHeaderView`、`CustomInputField`、`IDLoginButtonView`组件定义
|
||
- ✅ 使用`LoginBackgroundView`、`LoginHeaderView`、`CustomInputField`、`LoginButtonView`
|
||
- ✅ 保持TCA架构和主视图逻辑不变
|
||
|
||
### 3. EMailLoginPage.swift
|
||
- ✅ 使用`LoginBackgroundView`替换直接使用`Image("bg")`
|
||
- ✅ 使用`LoginHeaderView`替换内联的导航栏代码
|
||
- ✅ 使用`LoginButtonView`替换内联的按钮代码
|
||
- ✅ 使用`CustomInputField`替换内联的输入框代码
|
||
- ✅ 简化了UI组件的定义，提高代码复用性
|
||
|
||
### 4. RecoverPasswordPage.swift
|
||
- ✅ 使用`LoginBackgroundView`替换直接使用`Image("bg")`
|
||
- ✅ 使用`LoginHeaderView`替换内联的导航栏代码
|
||
- ✅ 保持其他UI组件不变（因为它们是特定的）
|
||
|
||
### 5. LoginPage.swift
|
||
- ✅ 使用`LoginBackgroundView`替换`backgroundView`中的`Image("bg")`
|
||
- ✅ 保持其他特定组件不变
|
||
|
||
### 6. Splash.swift
|
||
- ✅ 使用`LoginBackgroundView`替换`Image("bg")`
|
||
- ✅ 保持启动画面的其他元素不变
|
||
|
||
### 7. MainPage.swift
|
||
- ✅ 使用`LoginBackgroundView`替换`Image("bg")`
|
||
- ✅ 保持底部导航栏等特定组件不变
|
||
|
||
## 技术要点
|
||
|
||
### 1. 组件接口保持兼容
|
||
- 所有组件的参数和返回值保持不变
|
||
- 确保现有调用代码无需修改
|
||
|
||
### 2. 命名规范统一
|
||
- 使用通用的`Login`前缀，而不是特定的`IDLogin`前缀
|
||
- 保持组件名称的语义清晰
|
||
|
||
### 3. 代码复用最大化
|
||
- 背景图片、导航栏、按钮等通用组件统一管理
|
||
- 输入框组件支持多种类型（text、number、password、verificationCode）
|
||
|
||
## 验证结果
|
||
|
||
### 组件定义验证
|
||
- ✅ `LoginBackgroundView` - 仅在CommonComponents中定义
|
||
- ✅ `LoginHeaderView` - 仅在CommonComponents中定义
|
||
- ✅ `LoginButtonView` - 仅在CommonComponents中定义
|
||
- ✅ `CustomInputField` - 仅在CommonComponents中定义
|
||
|
||
### 组件使用验证
|
||
- ✅ 所有MVVM文件都正确使用了CommonComponents中的组件
|
||
- ✅ 没有发现重复的组件定义
|
||
- ✅ 组件调用接口保持一致
|
||
|
||
### 功能验证
|
||
- ✅ 所有页面的UI显示正常
|
||
- ✅ 组件交互功能正常
|
||
- ✅ 没有引入新的编译错误
|
||
|
||
## 后续优化建议
|
||
|
||
1. **组件扩展**：可以考虑将更多通用组件添加到CommonComponents中
|
||
2. **主题支持**：为组件添加主题支持，支持不同的颜色方案
|
||
3. **动画支持**：为组件添加统一的动画效果
|
||
4. **无障碍支持**：为组件添加无障碍标签和描述
|
||
5. **测试覆盖**：为CommonComponents中的组件添加单元测试
|
||
6. **文档完善**：为每个组件添加详细的使用文档和示例
|
||
|
||
## 完成状态
|
||
- ✅ 重名组件识别和分析
|
||
- ✅ 组件抽离到CommonComponents
|
||
- ✅ 所有MVVM文件更新完成
|
||
- ✅ Views目录文件更新完成
|
||
- ✅ 组件使用验证通过
|
||
- ✅ 功能验证通过
|
||
- ✅ 文档记录完成 |