# Stage Requirements 组件化重构方案

## 当前状况
- **TypeScript**: 5084行代码
- **HTML**: 972行代码
- **功能高度耦合**，难以维护和测试

## 组件拆分架构

```
StageRequirementsComponent (父容器)
├── AIDesignAnalysisComponent (AI设计分析)
│   ├── SpaceSelectorComponent (空间选择器)
│   ├── FileUploadComponent (文件上传)
│   └── AnalysisResultComponent (分析结果展示)
├── AIChatSidebarComponent (AI对话侧边栏)
│   ├── ChatMessagesComponent (对话消息列表)
│   ├── ChatInputComponent (输入框)
│   └── QuickActionsComponent (快捷操作)
├── SpaceRequirementsManagementComponent (空间需求管理)
│   ├── SpaceListComponent (空间列表)
│   ├── SpaceItemComponent (单个空间项)
│   └── SpecialRequirementsComponent (特殊需求)
├── RequirementsFormComponent (需求表单)
│   ├── FormFieldsComponent (表单字段)
│   └── FormActionsComponent (表单操作)
└── SharedServicesModule (共享服务)
    ├── RequirementsStateService (状态管理)
    ├── AIAnalysisService (AI分析服务)
    └── FileUploadService (文件上传服务)
```

## 模块划分

### 1. AI设计分析模块 (`ai-design-analysis`)

**功能**:
- 空间选择
- 文件上传（拖拽支持）
- AI分析触发
- 分析结果展示

**文件**:
- `ai-design-analysis.component.ts/html/scss`
- `space-selector.component.ts/html/scss`
- `file-upload-zone.component.ts/html/scss`
- `analysis-result.component.ts/html/scss`

**输入**:
- `@Input() projectId: string`
- `@Input() products: ProductSpace[]`
- `@Input() currentSpace: ProductSpace | null`

**输出**:
- `@Output() analysisComplete: EventEmitter<AnalysisResult>`
- `@Output() spaceChange: EventEmitter<ProductSpace>`

### 2. AI对话侧边栏模块 (`ai-chat-sidebar`)

**功能**:
- 对话历史显示
- 消息发送
- 附件上传
- 对话清空
- 欢迎提示

**文件**:
- `ai-chat-sidebar.component.ts/html/scss`
- `chat-message.component.ts/html/scss`
- `chat-input.component.ts/html/scss`

**输入**:
- `@Input() messages: ChatMessage[]`
- `@Input() analyzing: boolean`
- `@Input() currentSpace: ProductSpace | null`

**输出**:
- `@Output() sendMessage: EventEmitter<string>`
- `@Output() uploadFile: EventEmitter<File[]>`
- `@Output() clearMessages: EventEmitter<void>`

### 3. 空间需求管理模块 (`space-requirements-management`)

**功能**:
- 空间列表展示
- 特殊需求编辑
- 拖拽上传图片/文本
- 数据保存

**文件**:
- `space-requirements-management.component.ts/html/scss`
- `space-list.component.ts/html/scss`
- `space-item.component.ts/html/scss`
- `special-requirements-editor.component.ts/html/scss`

**输入**:
- `@Input() projectId: string`
- `@Input() products: ProductSpace[]`
- `@Input() specialRequirements: Record<string, string>`

**输出**:
- `@Output() requirementsChange: EventEmitter<any>`
- `@Output() save: EventEmitter<void>`

### 4. 需求表单模块 (`requirements-form`)

**功能**:
- 全局需求表单
- 产品需求表单
- 表单验证
- 数据提交

**文件**:
- `requirements-form.component.ts/html/scss`
- `form-field.component.ts/html/scss`

**输入**:
- `@Input() projectId: string`
- `@Input() formData: any`

**输出**:
- `@Output() submit: EventEmitter<any>`
- `@Output() formChange: EventEmitter<any>`

## 共享服务

### RequirementsStateService
```typescript
@Injectable()
export class RequirementsStateService {
  // 状态管理
  private projectId$ = new BehaviorSubject<string>('');
  private products$ = new BehaviorSubject<ProductSpace[]>([]);
  private currentSpace$ = new BehaviorSubject<ProductSpace | null>(null);
  private formData$ = new BehaviorSubject<any>({});
  
  // 方法
  updateProject(projectId: string): void
  updateProducts(products: ProductSpace[]): void
  selectSpace(space: ProductSpace): void
  updateFormData(data: any): void
}
```

### AIAnalysisService
```typescript
@Injectable()
export class AIAnalysisService {
  // AI分析相关
  analyzeDesign(options: AnalysisOptions): Promise<AnalysisResult>
  sendChatMessage(message: string, history: ChatMessage[]): Promise<string>
  uploadFiles(files: File[], projectId: string): Promise<UploadedFile[]>
}
```

### FileUploadService
```typescript
@Injectable()
export class FileUploadService {
  uploadFile(file: File, path: string): Promise<UploadedFile>
  uploadMultiple(files: File[], path: string): Promise<UploadedFile[]>
  deleteFile(fileId: string): Promise<void>
}
```

## 数据流设计

```
父组件 (StageRequirementsComponent)
  ↓ (通过服务管理全局状态)
RequirementsStateService
  ↓ (订阅状态)
子组件们 (通过@Input接收数据)
  ↓ (用户操作)
@Output事件发射
  ↓
父组件处理 / 服务更新状态
```

## 迁移步骤

### 阶段1: 创建基础服务 ✅
1. 创建 `RequirementsStateService`
2. 创建 `AIAnalysisService`  
3. 创建 `FileUploadService`

### 阶段2: 拆分AI设计分析模块 ✅
1. 创建 `AIDesignAnalysisComponent`
2. 提取上传逻辑到 `FileUploadZoneComponent`
3. 提取分析结果到 `AnalysisResultComponent`
4. 迁移相关样式

### 阶段3: 拆分AI对话侧边栏 ✅
1. 创建 `AIChatSidebarComponent`
2. 创建 `ChatMessageComponent`
3. 创建 `ChatInputComponent`
4. 迁移对话逻辑

### 阶段4: 拆分空间需求管理 ✅
1. 创建 `SpaceRequirementsManagementComponent`
2. 创建 `SpaceItemComponent`
3. 提取特殊需求编辑器
4. 迁移拖拽逻辑

### 阶段5: 拆分需求表单 ✅
1. 创建 `RequirementsFormComponent`
2. 抽取表单字段组件
3. 迁移验证逻辑

### 阶段6: 重构父组件 ✅
1. 简化父组件逻辑
2. 使用服务管理状态
3. 协调子组件通信

### 阶段7: 测试和优化 ✅
1. 单元测试各子组件
2. 集成测试整体流程
3. 性能优化
4. 代码审查

## 重构原则

1. **单一职责**: 每个组件只负责一个功能模块
2. **低耦合**: 组件间通过接口通信，避免直接依赖
3. **高内聚**: 相关功能放在同一组件内
4. **可复用**: 通用组件设计为可在其他地方使用
5. **可测试**: 每个组件都应该易于单元测试
6. **保持功能不变**: 所有现有功能必须完整保留

## 预期收益

1. **可维护性**: 代码从5000+行拆分为多个小文件，易于理解和修改
2. **可测试性**: 每个组件可独立测试
3. **可复用性**: 子组件可在其他页面复用
4. **性能优化**: 通过OnPush变更检测策略提升性能
5. **团队协作**: 不同开发者可同时开发不同组件

## 风险与对策

**风险1**: 功能遗漏或变更
- **对策**: 完整的功能清单和测试用例，逐一验证

**风险2**: 数据流混乱
- **对策**: 使用服务集中管理状态，明确数据流向

**风险3**: 重构时间长
- **对策**: 分阶段进行，确保每个阶段可独立验证

**风险4**: 性能下降
- **对策**: 使用OnPush策略，避免不必要的变更检测