yss-project/docs/stage-requirements-componentization-plan.md

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

@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

@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

@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策略，避免不必要的变更检测