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 中添加：

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行）：

原代码:

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

新代码:

<!-- 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行）：

原代码:

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

新代码:

<!-- 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 中添加：

// 处理文件预览事件
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：并行运行（推荐）

保留原有代码
添加新组件，使用特性开关控制显示
充分测试后切换到新组件

删除旧代码

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

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

方案B：直接替换

备份当前代码
直接用新组件替换旧代码
测试所有功能
修复问题

✅ 测试清单

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：组件无法导入

解决: 确保组件是standalone组件，且已在imports数组中声明

问题2：样式丢失

解决: 检查ViewEncapsulation设置，确保继承父组件样式

问题3：事件未触发

解决: 检查@Output装饰器和EventEmitter配置

问题4：状态不同步

解决: 确保@Input数据正确传递，使用ChangeDetectorRef.markForCheck()

stage-requirements-phase1-integration.md 5.7 KB History Raw