# Stage Requirements 组件化 - 阶段1集成指南

## ✅ 已完成的组件

### 1. AIDesignAnalysisV2Component
**路径**: `src/modules/project/pages/project-detail/stages/components/ai-design-analysis-v2/`

**功能**:
- 空间选择器
- 文件上传（支持拖拽）
- 文件预览和管理
- AI分析触发

### 2. AIChatSidebarV2Component
**路径**: `src/modules/project/pages/project-detail/stages/components/ai-chat-sidebar-v2/`

**功能**:
- 对话消息显示
- 输入框和发送
- 快捷提示词
- 清空对话

## 📝 集成步骤

### 步骤1：在父组件中导入新组件

在 `stage-requirements.component.ts` 中添加：

```typescript
import { AIDesignAnalysisV2Component } from './components/ai-design-analysis-v2/ai-design-analysis-v2.component';
import { AIChatSidebarV2Component } from './components/ai-chat-sidebar-v2/ai-chat-sidebar-v2.component';

@Component({
  // ...
  imports: [
    // ...existing imports
    AIDesignAnalysisV2Component,
    AIChatSidebarV2Component
  ]
})
```

### 步骤2：在HTML中使用新组件

替换原有的AI设计分析区域（第55-176行）：

**原代码**:
```html
<!-- AI设计分析区域 - 页面顶部 -->
<div class="ai-design-analysis-section">
  <!-- 大量HTML代码... -->
</div>
```

**新代码**:
```html
<!-- AI设计分析区域 - 使用组件化版本 -->
<app-ai-design-analysis-v2
  [projectId]="projectId"
  [products]="projectProducts"
  [currentSpace]="aiDesignCurrentSpace"
  [uploadedFiles]="aiDesignUploadedFiles"
  [analysisResult]="aiDesignAnalysisResult"
  [analyzing]="aiDesignAnalyzing"
  [dragOver]="aiDesignDragOver"
  (spaceSelected)="selectAISpace($event)"
  (filesUploaded)="handleAIFileUpload($event)"
  (fileDrop)="onAIFileDrop($event)"
  (fileDragOver)="onAIFileDragOver($event)"
  (fileDragLeave)="onAIFileDragLeave($event)"
  (fileRemoved)="removeAIDialogImage($event)"
  (filePreview)="previewFileOrImage($event)"
  (startAnalysis)="startAIDesignAnalysis()"
  (triggerFileInput)="triggerAIDialogFileInput()">
</app-ai-design-analysis-v2>
```

替换AI对话区域（第177-336行）：

**原代码**:
```html
<!-- AI对话区域 -->
<div class="ai-chat-container">
  <!-- 大量HTML代码... -->
</div>
```

**新代码**:
```html
<!-- AI对话侧边栏 - 使用组件化版本 -->
<app-ai-chat-sidebar-v2
  [messages]="aiChatMessages"
  [analyzing]="aiDesignAnalyzing"
  [inputText]="aiChatInput"
  [hasFiles]="aiDesignUploadedFiles.length > 0"
  (sendMessage)="sendAIChatMessage()"
  (inputChange)="onChatInputTextChange($event)"
  (useQuickPrompt)="useQuickPrompt($event)"
  (clearMessages)="clearChat()"
  (copyMessage)="copyMessage($event)"
  (uploadAttachment)="openAttachmentDialog()">
</app-ai-chat-sidebar-v2>
```

### 步骤3：添加辅助方法

在 `stage-requirements.component.ts` 中添加：

```typescript
// 处理文件预览事件
previewFileOrImage(event: { file: any; index?: number }): void {
  if (event.index !== undefined) {
    this.previewImage(event.file.url, event.index);
  } else {
    this.previewFile(event.file);
  }
}

// 处理聊天输入文本变化
onChatInputTextChange(text: string): void {
  this.aiChatInput = text;
}
```

## 🎯 渐进式迁移策略

### 方案A：并行运行（推荐）
1. 保留原有代码
2. 添加新组件，使用特性开关控制显示
3. 充分测试后切换到新组件
4. 删除旧代码

```typescript
// 在组件中添加开关
useV2Components = false; // 设为true启用新组件

// 在HTML中
@if (useV2Components) {
  <app-ai-design-analysis-v2 ...></app-ai-design-analysis-v2>
} @else {
  <!-- 原有代码 -->
}
```

### 方案B：直接替换
1. 备份当前代码
2. 直接用新组件替换旧代码
3. 测试所有功能
4. 修复问题

## ✅ 测试清单

### AI设计分析组件测试
- [ ] 空间切换功能正常
- [ ] 文件上传（点击）正常
- [ ] 文件上传（拖拽）正常
- [ ] 企业微信拖拽内容正常
- [ ] 文件预览功能正常
- [ ] 文件移除功能正常
- [ ] 开始分析按钮正常
- [ ] 分析结果显示正常

### AI对话侧边栏测试
- [ ] 欢迎页面显示正常
- [ ] 快捷提示词功能正常
- [ ] 消息发送功能正常
- [ ] 消息显示（用户/AI）正常
- [ ] 消息复制功能正常
- [ ] 清空对话功能正常
- [ ] 输入框Enter发送正常
- [ ] 加载状态显示正常

## 📊 预期效果

### 代码行数对比
- **原父组件**: 5084行 TypeScript + 972行 HTML
- **新父组件**: ~4500行 TypeScript + ~800行 HTML  
- **AI设计分析组件**: ~100行 TypeScript + ~120行 HTML
- **AI对话侧边栏组件**: ~110行 TypeScript + ~130行 HTML

### 性能提升
- ✅ 使用OnPush策略，减少变更检测
- ✅ 组件独立，不影响其他部分的渲染
- ✅ 更好的代码组织和维护性

## 🚀 下一步计划

### 阶段2：空间需求管理组件化
- 完善现有的 `SpaceRequirementsManagementComponent`
- 提取特殊需求编辑器
- 迁移拖拽逻辑

### 阶段3：表单组件化和状态管理
- 创建需求表单组件
- 引入状态管理服务
- 简化父组件逻辑

## 💡 注意事项

1. **保持功能完整**: 所有现有功能必须正常工作
2. **样式继承**: 新组件继承父组件样式，避免重复代码
3. **事件委托**: 复杂逻辑仍在父组件处理，子组件只负责展示和事件发射
4. **测试优先**: 每次集成后立即测试，确保功能正常

## 🔧 故障排除

### 问题1：组件无法导入
**解决**: 确保组件是standalone组件，且已在imports数组中声明

### 问题2：样式丢失
**解决**: 检查ViewEncapsulation设置，确保继承父组件样式

### 问题3：事件未触发
**解决**: 检查@Output装饰器和EventEmitter配置

### 问题4：状态不同步
**解决**: 确保@Input数据正确传递，使用ChangeDetectorRef.markForCheck()