123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- import { Component, OnInit, OnDestroy } from '@angular/core';
- import { CommonModule } from '@angular/common';
- import { FormsModule } from '@angular/forms';
- import { Subscription } from 'rxjs';
- import { RequirementMappingService } from '../../services/requirement-mapping.service';
- import { ColorAnalysisService, ColorAnalysisResult } from '../../shared/services/color-analysis.service';
- import { RequirementMapping, SceneTemplate } from '../../models/requirement-mapping.interface';
- import { UploadSuccessModalComponent, UploadedFile } from '../../shared/components/upload-success-modal/upload-success-modal.component';
- @Component({
- selector: 'app-test-requirement-mapping',
- standalone: true,
- imports: [CommonModule, FormsModule, UploadSuccessModalComponent],
- templateUrl: './test-requirement-mapping.component.html',
- styleUrls: ['./test-requirement-mapping.component.scss']
- })
- export class TestRequirementMappingComponent implements OnInit, OnDestroy {
- // 测试状态
- isUploading = false;
- isAnalyzing = false;
- isGeneratingMapping = false;
-
- // 上传的文件
- uploadedFiles: UploadedFile[] = [];
-
- // 分析结果
- analysisResult: ColorAnalysisResult | undefined = undefined;
- analysisError: string | null = null;
-
- // 需求映射结果
- requirementMapping: RequirementMapping | null = null;
- mappingError: string | null = null;
-
- // 模态框状态
- showUploadModal = false;
-
- // 测试步骤状态
- testSteps = [
- { id: 'upload', name: '图片上传', status: 'pending' as 'pending' | 'in-progress' | 'completed' | 'error' },
- { id: 'analysis', name: '图片分析', status: 'pending' as 'pending' | 'in-progress' | 'completed' | 'error' },
- { id: 'mapping', name: '需求映射', status: 'pending' as 'pending' | 'in-progress' | 'completed' | 'error' },
- { id: 'preview', name: '氛围预览', status: 'pending' as 'pending' | 'in-progress' | 'completed' | 'error' }
- ];
-
- private subscriptions: Subscription[] = [];
- constructor(
- private requirementMappingService: RequirementMappingService,
- private colorAnalysisService: ColorAnalysisService
- ) {}
- ngOnInit(): void {
- this.resetTest();
- }
- ngOnDestroy(): void {
- this.subscriptions.forEach(sub => sub.unsubscribe());
- // 清理对象URL
- this.uploadedFiles.forEach(file => {
- if (file.url.startsWith('blob:')) {
- URL.revokeObjectURL(file.url);
- }
- });
- }
- // 重置测试
- resetTest(): void {
- this.isUploading = false;
- this.isAnalyzing = false;
- this.isGeneratingMapping = false;
- this.uploadedFiles = [];
- this.analysisResult = undefined;
- this.analysisError = null;
- this.requirementMapping = null;
- this.mappingError = null;
- this.showUploadModal = false;
-
- this.testSteps.forEach(step => {
- step.status = 'pending';
- });
- }
- // 文件上传处理
- onFileSelected(event: Event): void {
- const input = event.target as HTMLInputElement;
- if (!input.files || input.files.length === 0) return;
- this.updateStepStatus('upload', 'in-progress');
- this.isUploading = true;
- try {
- const files = Array.from(input.files);
- this.uploadedFiles = files.map(file => ({
- id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
- name: file.name,
- url: URL.createObjectURL(file),
- size: file.size,
- type: 'image' as const,
- preview: URL.createObjectURL(file)
- }));
- // 模拟上传延迟
- setTimeout(() => {
- this.isUploading = false;
- this.updateStepStatus('upload', 'completed');
- this.showUploadModal = true;
- }, 1000);
- } catch (error) {
- console.error('文件上传失败:', error);
- this.isUploading = false;
- this.updateStepStatus('upload', 'error');
- }
- }
- // 开始分析
- startAnalysis(): void {
- if (this.uploadedFiles.length === 0) return;
- this.updateStepStatus('analysis', 'in-progress');
- this.isAnalyzing = true;
- this.analysisError = null;
- // 使用第一个文件进行分析
- const firstFile = this.uploadedFiles[0];
-
- // 添加null检查和错误处理
- if (!firstFile) {
- this.analysisError = '未找到有效的文件';
- this.isAnalyzing = false;
- this.updateStepStatus('analysis', 'error');
- return;
- }
- try {
- const analysisSubscription = this.colorAnalysisService.analyzeImage(firstFile).subscribe({
- next: (result: ColorAnalysisResult) => {
- if (result) {
- this.analysisResult = result;
- this.isAnalyzing = false;
- this.updateStepStatus('analysis', 'completed');
-
- // 自动开始需求映射
- this.startRequirementMapping();
- } else {
- this.analysisError = '分析结果为空';
- this.isAnalyzing = false;
- this.updateStepStatus('analysis', 'error');
- }
- },
- error: (error: any) => {
- console.error('分析失败:', error);
- this.analysisError = '图片分析失败,请重试';
- this.isAnalyzing = false;
- this.updateStepStatus('analysis', 'error');
- }
- });
- this.subscriptions.push(analysisSubscription);
- } catch (error) {
- console.error('启动分析失败:', error);
- this.analysisError = '启动分析失败,请重试';
- this.isAnalyzing = false;
- this.updateStepStatus('analysis', 'error');
- }
- }
- // 开始需求映射
- startRequirementMapping(): void {
- if (!this.analysisResult) {
- console.warn('分析结果为空,无法开始需求映射');
- return;
- }
- this.updateStepStatus('mapping', 'in-progress');
- this.isGeneratingMapping = true;
- this.mappingError = null;
- try {
- const mappingSubscription = this.requirementMappingService.generateRequirementMapping(
- this.analysisResult,
- SceneTemplate.LIVING_ROOM_MODERN
- ).subscribe({
- next: (mapping) => {
- if (mapping) {
- this.requirementMapping = mapping;
- this.isGeneratingMapping = false;
- this.updateStepStatus('mapping', 'completed');
- this.updateStepStatus('preview', 'completed');
-
- console.log('=== 需求映射测试完成 ===');
- console.log('映射结果:', this.requirementMapping);
- } else {
- this.mappingError = '需求映射结果为空';
- this.isGeneratingMapping = false;
- this.updateStepStatus('mapping', 'error');
- }
- },
- error: (error) => {
- console.error('需求映射生成失败:', error);
- this.mappingError = '需求映射生成失败,请重试';
- this.isGeneratingMapping = false;
- this.updateStepStatus('mapping', 'error');
- }
- });
- this.subscriptions.push(mappingSubscription);
- } catch (error) {
- console.error('启动需求映射失败:', error);
- this.mappingError = '启动需求映射失败,请重试';
- this.isGeneratingMapping = false;
- this.updateStepStatus('mapping', 'error');
- }
- }
- // 更新步骤状态
- private updateStepStatus(stepId: string, status: 'pending' | 'in-progress' | 'completed' | 'error'): void {
- const step = this.testSteps.find(s => s.id === stepId);
- if (step) {
- step.status = status;
- } else {
- console.warn(`未找到步骤: ${stepId}`);
- }
- }
- // 辅助方法:获取步骤图标
- getStepIcon(status: string): string {
- switch (status) {
- case 'completed': return '✅';
- case 'in-progress': return '⏳';
- case 'error': return '❌';
- default: return '⭕';
- }
- }
- // 辅助方法:从HSL值生成颜色字符串
- getColorFromHSL(hue: number, saturation: number, brightness: number): string {
- return `hsl(${hue}, ${saturation}%, ${brightness}%)`;
- }
- // 获取步骤状态类名
- getStepClass(status: string): string {
- return `step-${status}`;
- }
- // 模态框事件处理
- onCloseModal(): void {
- this.showUploadModal = false;
- }
- onAnalyzeColors(files: UploadedFile[]): void {
- this.startAnalysis();
- }
- onViewReport(result: ColorAnalysisResult): void {
- console.log('查看报告:', result);
- }
- onGenerateRequirementMapping(mapping: RequirementMapping): void {
- console.log('需求映射生成完成:', mapping);
- }
- // 手动重试分析
- retryAnalysis(): void {
- this.analysisError = null;
- this.startAnalysis();
- }
- // 手动重试映射
- retryMapping(): void {
- this.mappingError = null;
- this.startRequirementMapping();
- }
- // 下载测试结果
- downloadTestResult(): void {
- if (!this.requirementMapping) return;
- const testResult = {
- timestamp: new Date().toISOString(),
- uploadedFiles: this.uploadedFiles.map(f => ({
- name: f.name,
- size: f.size,
- type: f.type
- })),
- analysisResult: this.analysisResult,
- requirementMapping: this.requirementMapping,
- testSteps: this.testSteps
- };
- const blob = new Blob([JSON.stringify(testResult, null, 2)], { type: 'application/json' });
- const url = URL.createObjectURL(blob);
- const link = document.createElement('a');
- link.href = url;
- link.download = `requirement-mapping-test-${Date.now()}.json`;
- link.click();
- URL.revokeObjectURL(url);
- }
- }
|