项目-方案深化.md 56 KB
项目管理 - 方案深化阶段 PRD (基于Project表AI增强设计)
1. 功能概述
1.1 阶段定位
方案深化阶段包含"需求沟通"和"方案确认"两个子环节，是连接订单分配与交付执行的关键桥梁。该阶段通过AI辅助深度分析工具深入理解客户需求，并将抽象需求转化为可执行的设计方案，特别强调多模态AI分析能力的应用。
1.2 核心目标
- AI驱动的多产品设计需求分析：基于大模型深度分析客户需求，支持图片、CAD、文字等多模态输入
- 智能设计方案生成：AI辅助生成符合客户需求的初步设计方案
- 多产品一致性协调：确保多产品项目的设计风格和功能协调性
- 方案审核与优化：基于AI分析的方案质量评估和优化建议
- 建立需求与设计方案之间的智能映射关系
1.3 涉及角色
- 客服人员：协助收集客户需求材料、使用AI工具初步分析需求
- 设计师：主导AI分析结果解读、方案设计优化、客户沟通确认
- 组长：审核AI分析结果、把控设计方案质量、协调资源
- AI智能体：深度需求分析、方案生成、质量评估
1.4 AI增强特性
- 多模态输入支持：图片、CAD图纸、文字描述的智能识别和分析
- 智能需求提取：从客户输入中自动提取设计关键要素
- 方案自动生成：基于需求分析结果生成初步设计方案
- 质量智能评估：AI评估方案的可行性、美观度、实用性
2. AI驱动的产品需求分析系统
2.1 多模态AI分析引擎
2.1.1 图片智能分析服务
class ImageAnalysisService {
private model = 'fmode-1.6-cn'; // 多模态大模型
/**
* 参考图片深度分析
* 基于agents-image.md的图片识别能力，进行家装设计相关的多维度分析
*/
async analyzeReferenceImage(options: {
images: string[]; // Base64格式图片数组
productId: string;
analysisType: 'style' | 'color' | 'layout' | 'material' | 'comprehensive';
onProgress?: (progress: string) => void;
}): Promise<ImageAnalysisResult> {
return new Promise(async (resolve, reject) => {
try {
// 1. 构建家装设计专用分析提示词
const prompt = this.generateDesignAnalysisPrompt(options.analysisType);
// 2. 定义输出格式（基于agents.md的JSON输出能力）
const outputSchema = this.getOutputSchema(options.analysisType);
// 3. 调用多模态大模型（基于agents-image.md的vision能力）
const analysisResult = await completionJSON(
prompt,
outputSchema,
(content) => {
options.onProgress?.(`正在分析图片...已生成${content.length}字符`);
},
2, // 重试次数
{
model: this.model,
vision: true, // 启用视觉识别
images: options.images // 传入图片数组
}
);
// 4. 结果验证和后处理
if (!analysisResult || !analysisResult.analysis) {
throw new Error('图片分析结果为空');
}
// 5. 保存分析结果到Product表
await this.saveImageAnalysisResult(options.productId, analysisResult);
resolve(analysisResult);
} catch (error) {
reject(new Error(`图片分析失败：${error.message}`));
}
});
}
/**
* 生成家装设计分析提示词
*/
private generateDesignAnalysisPrompt(analysisType: string): string {
const basePrompt = `作为一名专业的室内设计师，请分析上传的家装设计参考图片。`;
switch (analysisType) {
case 'style':
return `${basePrompt}
请重点分析以下设计风格要素：
1. 整体设计风格（现代简约、北欧、中式、美式等）
2. 色彩搭配方案（主色调、辅助色、点缀色）
3. 家具风格和布局特点
4. 装饰元素和材质特点
5. 空间层次和氛围营造
请按以下JSON格式输出分析结果：`;
case 'color':
return `${basePrompt}
请重点分析以下色彩设计要素：
1. 主色调色值（HEX格式）
2. 色彩搭配比例
3. 色彩情感和氛围
4. 色彩与空间的协调性
5. 推荐的配色方案
请按以下JSON格式输出分析结果：`;
case 'layout':
return `${basePrompt}
请重点分析以下空间布局要素：
1. 空间功能分区
2. 家具布局和动线设计
3. 空间利用效率
4. 收纳和储物设计
5. 照明布局
请按以下JSON格式输出分析结果：`;
case 'material':
return `${basePrompt}
请重点分析以下材质设计要素：
1. 主要材质类型和特点
2. 材质搭配和质感
3. 材质与风格的协调性
4. 预估材质成本等级
5. 环保和耐用性考虑
请按以下JSON格式输出分析结果：`;
case 'comprehensive':
return `${basePrompt}
请进行全面的家装设计分析，包括：
1. 整体设计风格评估
2. 色彩搭配方案
3. 空间布局分析
4. 材质选择建议
5. 适合的空间类型和面积
6. 预估设计难度和成本
7. 改进建议和注意事项
请按以下JSON格式输出分析结果：`;
default:
return basePrompt;
}
}
/**
* 获取输出格式Schema
*/
private getOutputSchema(analysisType: string): string {
switch (analysisType) {
case 'style':
return `{
"analysisType": "style",
"overallStyle": {
"primaryStyle": "主要风格",
"secondaryStyles": ["次要风格1", "次要风格2"],
"styleScore": 8.5,
"description": "风格描述"
},
"colorScheme": {
"primaryColor": "#FFFFFF",
"secondaryColors": ["#F5F5F5", "#333333"],
"accentColors": ["#FF6B6B"],
"temperature": "暖色调/冷色调/中性调"
},
"furnitureStyle": {
"style": "家具风格",
"layout": "布局特点",
"keyPieces": ["关键家具1", "关键家具2"]
},
"decorativeElements": {
"lighting": "照明特点",
"textiles": "纺织品特点",
"accessories": "装饰品特点"
},
"spatialAtmosphere": {
"mood": "空间氛围",
"functionality": "功能性",
"comfort": "舒适度"
},
"applicability": {
"suitableSpaces": ["适用空间类型"],
"areaRange": "适用面积范围",
"budgetLevel": "预算等级"
}
}`;
case 'color':
return `{
"analysisType": "color",
"colorPalette": {
"primaryColor": {
"hex": "#FFFFFF",
"name": "颜色名称",
"percentage": 60,
"psychology": "色彩心理学"
},
"secondaryColors": [
{
"hex": "#F5F5F5",
"name": "颜色名称",
"percentage": 30
}
],
"accentColors": [
{
"hex": "#FF6B6B",
"name": "颜色名称",
"percentage": 10
}
]
},
"colorHarmony": {
"scheme": "配色方案类型",
"contrast": "对比度等级",
"balance": "色彩平衡度"
},
"psychologicalImpact": {
"mood": "情绪影响",
"energy": "能量水平",
"perception": "空间感知"
},
"recommendations": {
"variations": ["变化建议1", "变化建议2"],
"combinations": ["搭配建议1", "搭配建议2"]
}
}`;
default:
return `{
"analysisType": "comprehensive",
"summary": "分析总结",
"keyFindings": ["关键发现1", "关键发现2"],
"recommendations": ["建议1", "建议2"]
}`;
}
}
/**
* CAD图纸智能分析
*/
async analyzeCADDrawing(options: {
cadImages: string[];
productId: string;
drawingType: 'floor_plan' | 'elevation' | 'section' | 'detail';
onProgress?: (progress: string) => void;
}): Promise<CADAnalysisResult> {
return new Promise(async (resolve, reject) => {
try {
const prompt = `作为专业的建筑设计师，请分析上传的CAD图纸。
图纸类型：${options.drawingType}
请重点分析：
1. 空间尺寸和比例
2. 结构要素（墙体、门窗、柱子等）
3. 功能区域划分
4. 动线设计
5. 设备和管线位置
6. 设计亮点和问题点
7. 改进建议
请按JSON格式输出分析结果。`;
const outputSchema = `{
"analysisType": "cad",
"drawingType": "${options.drawingType}",
"dimensions": {
"totalArea": 0,
"roomDimensions": [
{
"room": "房间名称",
"length": 0,
"width": 0,
"height": 0,
"area": 0
}
]
},
"structuralElements": {
"walls": ["墙体信息"],
"doors": ["门窗信息"],
"windows": ["窗户信息"],
"columns": ["柱子信息"]
},
"functionalZones": [
{
"zone": "功能区域",
"area": 0,
"purpose": "用途",
"features": ["特征"]
}
],
"circulation": {
"mainPaths": ["主要动线"],
"flowEfficiency": "动线效率评分",
"accessibility": "无障碍设计"
},
"technicalElements": {
"electrical": ["电气信息"],
"plumbing": ["给排水信息"],
"hvac": ["暖通信息"]
},
"designAssessment": {
"strengths": ["优点"],
"weaknesses": ["不足"],
"opportunities": ["改进机会"],
"constraints": ["限制条件"]
},
"recommendations": [
{
"category": "建议类别",
"description": "建议描述",
"priority": "优先级",
"impact": "影响评估"
}
]
}`;
const result = await completionJSON(
prompt,
outputSchema,
(content) => {
options.onProgress?.(`正在分析CAD图纸...已生成${content.length}字符`);
},
2,
{
model: this.model,
vision: true,
images: options.cadImages
}
);
await this.saveCADAnalysisResult(options.productId, result);
resolve(result);
} catch (error) {
reject(new Error(`CAD分析失败：${error.message}`));
}
});
}
}
interface ImageAnalysisResult {
analysisType: string;
analysis: any; // 根据analysisType的不同结构
confidence: number;
processingTime: number;
suggestions: string[];
applicableProducts: string[];
}
interface CADAnalysisResult {
analysisType: 'cad';
drawingType: string;
dimensions: any;
structuralElements: any;
functionalZones: any[];
circulation: any;
technicalElements: any;
designAssessment: any;
recommendations: any[];
}
2.1.2 智能需求分析服务
class RequirementAnalysisService {
/**
* 综合需求智能分析
* 整合客户文字需求、参考图片、CAD图纸等多源数据
*/
async analyzeComprehensiveRequirements(options: {
productId: string;
textRequirements?: string;
referenceImages?: string[];
cadDrawings?: string[];
budgetConstraint?: number;
timelineConstraint?: number;
onProgress?: (progress: string) => void;
}): Promise<ComprehensiveRequirementAnalysis> {
return new Promise(async (resolve, reject) => {
try {
const analysisResults: any = {};
// 1. 文字需求分析
if (options.textRequirements) {
options.onProgress?.('正在分析文字需求...');
analysisResults.textAnalysis = await this.analyzeTextRequirements(
options.textRequirements,
options.productId
);
}
// 2. 参考图片分析
if (options.referenceImages && options.referenceImages.length > 0) {
options.onProgress?.('正在分析参考图片...');
analysisResults.imageAnalysis = await this.analyzeReferenceImages(
options.referenceImages,
options.productId
);
}
// 3. CAD图纸分析
if (options.cadDrawings && options.cadDrawings.length > 0) {
options.onProgress?.('正在分析CAD图纸...');
analysisResults.cadAnalysis = await this.analyzeCADDrawings(
options.cadDrawings,
options.productId
);
}
// 4. 综合分析生成
options.onProgress?.('正在生成综合需求分析...');
const comprehensiveAnalysis = await this.generateComprehensiveAnalysis(
analysisResults,
options.productId,
options.budgetConstraint,
options.timelineConstraint
);
resolve(comprehensiveAnalysis);
} catch (error) {
reject(new Error(`综合需求分析失败：${error.message}`));
}
});
}
/**
* 文字需求AI分析
*/
private async analyzeTextRequirements(text: string, productId: string): Promise<TextRequirementAnalysis> {
const prompt = `作为专业的室内设计师，请分析客户的文字需求描述：
客户需求：${text}
请提取以下关键信息：
1. 设计风格偏好
2. 色彩要求
3. 功能需求
4. 材质偏好
5. 预算范围
6. 时间要求
7. 特殊要求和限制条件
请按JSON格式输出分析结果。`;
const outputSchema = `{
"stylePreference": {
"primaryStyle": "主要风格",
"secondaryStyles": ["次要风格"],
"styleKeywords": ["风格关键词"]
},
"colorRequirements": {
"preferredColors": ["偏好颜色"],
"avoidColors": ["避免颜色"],
"colorTemperature": "色温偏好"
},
"functionalRequirements": {
"primaryFunctions": ["主要功能"],
"secondaryFunctions": ["次要功能"],
"specialNeeds": ["特殊需求"]
},
"materialPreferences": {
"preferredMaterials": ["偏好材质"],
"avoidMaterials": ["避免材质"],
"qualityRequirements": "质量要求"
},
"constraints": {
"budgetRange": {
"min": 0,
"max": 0,
"currency": "CNY"
},
"timeline": {
"preferredStart": "2025-01-01",
"deadline": "2025-12-31"
},
"structuralConstraints": ["结构限制"]
},
"lifestyle": {
"familyComposition": "家庭构成",
"dailyRoutine": "日常作息",
"hobbies": ["兴趣爱好"],
"workFromHome": false
},
"psychologicalProfile": {
"personality": "性格特征",
"values": ["价值观"],
"priorities": ["优先考虑的因素"]
}
}`;
const result = await completionJSON(prompt, outputSchema);
return result;
}
/**
* 综合分析生成
*/
private async generateComprehensiveAnalysis(
analysisResults: any,
productId: string,
budgetConstraint?: number,
timelineConstraint?: number
): Promise<ComprehensiveRequirementAnalysis> {
const prompt = `基于以下分析结果，生成综合需求分析报告：
文字需求分析：${JSON.stringify(analysisResults.textAnalysis || {})}
图片分析：${JSON.stringify(analysisResults.imageAnalysis || {})}
CAD分析：${JSON.stringify(analysisResults.cadAnalysis || {})}
预算约束：${budgetConstraint || '无'}
时间约束：${timelineConstraint || '无'}
请生成以下综合分析：
1. 设计风格建议（综合考虑所有输入）
2. 色彩搭配方案
3. 空间布局建议
4. 材质选择建议
5. 功能规划方案
6. 预算分配建议
7. 时间规划建议
8. 潜在风险和解决方案
请按JSON格式输出。`;
const outputSchema = `{
"analysisSummary": {
"overallStyle": "整体推荐风格",
"complexity": "simple|medium|complex",
"confidence": 0.95,
"keyInsights": ["关键洞察1", "关键洞察2"]
},
"designRecommendations": {
"style": {
"primaryStyle": "主要风格",
"styleElements": ["风格要素"],
"colorScheme": {
"primaryColor": "#FFFFFF",
"secondaryColors": ["#F5F5F5"],
"accentColors": ["#FF6B6B"]
}
},
"layout": {
"spacePlanning": "空间规划建议",
"furnitureLayout": "家具布局建议",
"functionalZones": ["功能分区建议"]
},
"materials": {
"primaryMaterials": ["主要材质"],
"accentMaterials": ["点缀材质"],
"budgetOptimization": "预算优化建议"
},
"lighting": {
"naturalLight": "自然光利用",
"artificialLighting": "人工照明方案",
"moodLighting": "氛围照明"
}
},
"functionalAnalysis": {
"spaceUtilization": {
"efficiency": 0.85,
"optimization": "优化建议"
},
"storageSolutions": ["储物方案"],
"trafficFlow": "动线优化"
},
"budgetAnalysis": {
"estimatedTotal": 0,
"breakdown": {
"design": 0,
"materials": 0,
"labor": 0,
"contingency": 0
},
"optimizations": ["预算优化建议"]
},
"timelineAnalysis": {
"estimatedDuration": 0,
"phases": [
{
"phase": "阶段名称",
"duration": 0,
"dependencies": ["依赖关系"]
}
]
},
"riskAssessment": {
"potentialRisks": ["潜在风险"],
"mitigationStrategies": ["缓解策略"],
"contingencyPlans": ["应急计划"]
},
"nextSteps": [
"下一步行动1",
"下一步行动2"
]
}`;
const result = await completionJSON(prompt, outputSchema);
// 保存到Product表
await this.saveComprehensiveAnalysis(productId, result);
return result;
}
}
interface ComprehensiveRequirementAnalysis {
analysisSummary: {
overallStyle: string;
complexity: 'simple' | 'medium' | 'complex';
confidence: number;
keyInsights: string[];
};
designRecommendations: {
style: any;
layout: any;
materials: any;
lighting: any;
};
functionalAnalysis: {
spaceUtilization: any;
storageSolutions: string[];
trafficFlow: string;
};
budgetAnalysis: {
estimatedTotal: number;
breakdown: any;
optimizations: string[];
};
timelineAnalysis: {
estimatedDuration: number;
phases: any[];
};
riskAssessment: {
potentialRisks: string[];
mitigationStrategies: string[];
contingencyPlans: string[];
};
nextSteps: string[];
}
2.2 AI方案生成服务
2.2.1 智能方案生成
class AIDesignProposalService {
/**
* 基于需求分析生成设计方案
*/
async generateDesignProposal(options: {
productId: string;
requirementAnalysis: ComprehensiveRequirementAnalysis;
proposalType: 'concept' | 'detailed' | 'alternative';
onProgress?: (progress: string) => void;
}): Promise<AIDesignProposal> {
return new Promise(async (resolve, reject) => {
try {
options.onProgress?.('正在生成设计方案...');
const prompt = `基于以下需求分析结果，生成${options.proposalType}设计方案：
需求分析：${JSON.stringify(options.requirementAnalysis)}
请生成包含以下内容的设计方案：
1. 设计概念和理念
2. 空间规划方案
3. 色彩搭配方案
4. 材质选择方案
5. 家具配置方案
6. 照明设计方案
7. 软装搭配方案
8. 预算估算
9. 实施时间计划
10. 设计亮点和创新点
请按JSON格式输出。`;
const outputSchema = `{
"proposalType": "${options.proposalType}",
"designConcept": {
"theme": "设计主题",
"concept": "设计理念",
"style": "设计风格",
"innovation": "创新点"
},
"spatialDesign": {
"layoutPlan": "空间布局规划",
"functionalZones": [
{
"zone": "功能区域",
"area": 0,
"purpose": "用途",
"design": "设计方案"
}
],
"trafficFlow": "动线设计",
"spaceOptimization": "空间优化"
},
"colorScheme": {
"primaryPalette": {
"colors": ["#FFFFFF", "#F5F5F5"],
"proportions": [60, 40],
"psychology": "色彩心理学"
},
"accentColors": ["#FF6B6B"],
"mood": "色彩氛围"
},
"materialScheme": {
"primaryMaterials": [
{
"material": "材质名称",
"application": "应用区域",
"properties": ["特性"],
"estimatedCost": "成本等级"
}
],
"sustainability": "可持续性考虑"
},
"furniturePlan": {
"keyPieces": [
{
"item": "家具名称",
"quantity": 1,
"specifications": "规格",
"placement": "放置位置",
"estimatedCost": 0
}
],
"layout": "布局方案"
},
"lightingDesign": {
"naturalLight": "自然光利用",
"artificialLighting": {
"ambient": "环境照明",
"task": "功能照明",
"accent": "重点照明"
},
"controls": "控制方案"
},
"softFurnishings": {
"textiles": ["纺织品"],
"decorations": ["装饰品"],
"artwork": "艺术作品",
"plants": ["植物配置"]
},
"budgetEstimate": {
"total": 0,
"breakdown": {
"design": 0,
"materials": 0,
"furniture": 0,
"lighting": 0,
"softFurnishings": 0,
"labor": 0,
"contingency": 0
}
},
"implementationPlan": {
"totalDuration": 0,
"phases": [
{
"phase": "阶段名称",
"duration": 0,
"tasks": ["任务列表"],
"dependencies": ["依赖关系"]
}
]
},
"uniqueFeatures": [
"独特功能1",
"独特功能2"
],
"visualization": {
"renderingViews": ["渲染视角"],
"keyHighlights": ["重点展示"]
}
}`;
const result = await completionJSON(prompt, outputSchema);
// 保存方案到Product表
await this.saveDesignProposal(options.productId, result);
resolve(result);
} catch (error) {
reject(new Error(`方案生成失败：${error.message}`));
}
});
}
/**
* 方案优化和迭代
*/
async optimizeProposal(options: {
productId: string;
currentProposal: AIDesignProposal;
feedback: string;
optimizationType: 'cost' | 'timeline' | 'quality' | 'functionality';
onProgress?: (progress: string) => void;
}): Promise<AIOptimizedProposal> {
const prompt = `基于客户反馈优化设计方案：
当前方案：${JSON.stringify(options.currentProposal)}
客户反馈：${options.feedback}
优化方向：${options.optimizationType}
请生成优化后的方案，重点改进：
1. 根据反馈调整设计
2. 优化${options.optimizationType}
3. 保持整体设计理念
4. 提供多个备选方案
请按JSON格式输出。`;
const result = await completionJSON(prompt, this.getOptimizationSchema());
return result;
}
}
interface AIDesignProposal {
proposalType: string;
designConcept: any;
spatialDesign: any;
colorScheme: any;
materialScheme: any;
furniturePlan: any;
lightingDesign: any;
softFurnishings: any;
budgetEstimate: any;
implementationPlan: any;
uniqueFeatures: string[];
visualization: any;
}
interface AIOptimizedProposal extends AIDesignProposal {
optimizationChanges: {
modified: string[];
improved: string[];
tradeoffs: string[];
};
alternatives: AIDesignProposal[];
}
3. 方案审核页面设计
3.1 页面整体架构
<!-- 方案审核主页面 -->
<div class="proposal-review-container">
<!-- 页面头部 -->
<div class="page-header">
<div class="header-left">
<h2>方案审核 - {{ project.title }}</h2>
<div class="project-summary">
<span class="product-count">{{ projectProducts.length }}个产品</span>
<span class="current-stage">当前阶段：方案深化</span>
<span class="progress">进度：{{ overallProgress }}%</span>
</div>
</div>
<div class="header-right">
<div class="ai-status">
<div class="ai-indicator" [class.active]="isAIAnalyzing">
<i class="icon-ai"></i>
<span>{{ isAIAnalyzing ? 'AI分析中...' : 'AI就绪' }}</span>
</div>
</div>
<div class="header-actions">
<button class="btn-secondary" (click)="showAnalysisHistory = true">
<i class="icon-history"></i> 分析历史
</button>
<button class="btn-primary" (click)="startComprehensiveAnalysis">
<i class="icon-magic"></i> 综合AI分析
</button>
</div>
</div>
</div>
<!-- 主要内容区 -->
<div class="main-content">
<!-- 左侧产品列表 -->
<div class="product-sidebar">
<div class="sidebar-header">
<h3>产品设计</h3>
<div class="view-toggle">
<button class="toggle-btn" [class.active]="viewMode === 'list'" (click)="viewMode = 'list'">
<i class="icon-list"></i>
</button>
<button class="toggle-btn" [class.active]="viewMode === 'grid'" (click)="viewMode = 'grid'">
<i class="icon-grid"></i>
</button>
</div>
</div>
<div class="product-list" [class.list-view]="viewMode === 'list'" [class.grid-view]="viewMode === 'grid'">
@for (product of projectProducts; track product.id) {
<div class="product-item"
[class.active]="selectedProductId === product.id"
[class.has-analysis]="hasAIAnalysis(product.id)"
[class.analysis-complete]="isAnalysisComplete(product.id)"
(click)="selectProduct(product.id)">
<div class="product-icon">
<i class="icon-{{ getProductIcon(product.type) }}"></i>
@if (isAIAnalyzing && selectedProductId === product.id) {
<div class="analyzing-indicator">
<div class="spinner"></div>
</div>
}
</div>
<div class="product-info">
<h4>{{ product.name }}</h4>
<span class="product-type">{{ getProductTypeName(product.type) }}</span>
@if (product.area) {
<span class="product-area">{{ product.area }}m²</span>
}
</div>
<div class="product-status">
@if (hasAIAnalysis(product.id)) {
<div class="analysis-status">
<span class="status-badge analysis">AI分析</span>
<span class="confidence">{{ getAnalysisConfidence(product.id) }}%</span>
</div>
}
@if (getDesignProposal(product.id)) {
<span class="status-badge proposal">方案已生成</span>
}
</div>
</div>
}
</div>
</div>
<!-- 右侧内容区 -->
<div class="content-area">
@if (selectedProductId) {
<div class="product-detail">
<!-- AI分析标签页 -->
<div class="analysis-tabs">
<button class="tab-btn"
[class.active]="activeAnalysisTab === 'comprehensive'"
(click)="activeAnalysisTab = 'comprehensive'">
<i class="icon-dashboard"></i>
综合分析
</button>
<button class="tab-btn"
[class.active]="activeAnalysisTab === 'images'"
(click)="activeAnalysisTab = 'images'"
[disabled]="!hasReferenceImages(selectedProductId)">
<i class="icon-images"></i>
图片分析
</button>
<button class="tab-btn"
[class.active]="activeAnalysisTab === 'cad'"
(click)="activeAnalysisTab = 'cad'"
[disabled]="!hasCADDrawings(selectedProductId)">
<i class="icon-cad"></i>
CAD分析
</button>
<button class="tab-btn"
[class.active]="activeAnalysisTab === 'proposal'"
(click)="activeAnalysisTab = 'proposal'"
[disabled]="!getDesignProposal(selectedProductId)">
<i class="icon-design"></i>
设计方案
</button>
<button class="tab-btn"
[class.active]="activeAnalysisTab === 'review'"
(click)="activeAnalysisTab = 'review'">
<i class="icon-check"></i>
质量评估
</button>
</div>
<!-- 综合分析标签页 -->
<div class="tab-content" *ngIf="activeAnalysisTab === 'comprehensive'">
<app-comprehensive-analysis-view
[productId]="selectedProductId"
[analysisData]="getComprehensiveAnalysis(selectedProductId)"
[requirements]="getProductRequirements(selectedProductId)"
(analysisStart)="handleAnalysisStart($event)"
(analysisComplete)="handleAnalysisComplete($event)"
(generateProposal)="handleGenerateProposal($event)">
</app-comprehensive-analysis-view>
</div>
<!-- 图片分析标签页 -->
<div class="tab-content" *ngIf="activeAnalysisTab === 'images'">
<app-image-analysis-view
[productId]="selectedProductId"
[referenceImages]="getReferenceImages(selectedProductId)"
[analysisResults]="getImageAnalysisResults(selectedProductId)"
(uploadImages)="handleImageUpload($event)"
(analyzeImage)="handleImageAnalysis($event)">
</app-image-analysis-view>
</div>
<!-- CAD分析标签页 -->
<div class="tab-content" *ngIf="activeAnalysisTab === 'cad'">
<app-cad-analysis-view
[productId]="selectedProductId"
[cadDrawings]="getCADDrawings(selectedProductId)"
[analysisResults]="getCADAnalysisResults(selectedProductId)"
(uploadCAD)="handleCADUpload($event)"
(analyzeCAD)="handleCADAnalysis($event)">
</app-cad-analysis-view>
</div>
<!-- 设计方案标签页 -->
<div class="tab-content" *ngIf="activeAnalysisTab === 'proposal'">
<app-design-proposal-view
[productId]="selectedProductId"
[proposal]="getDesignProposal(selectedProductId)"
[alternatives]="getProposalAlternatives(selectedProductId)"
(editProposal)="handleEditProposal($event)"
(generateAlternative)="handleGenerateAlternative($event)"
(saveProposal)="handleSaveProposal($event)">
</app-design-proposal-view>
</div>
<!-- 质量评估标签页 -->
<div class="tab-content" *ngIf="activeAnalysisTab === 'review'">
<app-quality-assessment-view
[productId]="selectedProductId"
[proposal]="getDesignProposal(selectedProductId)"
[analysisData]="getComprehensiveAnalysis(selectedProductId)"
(assessmentComplete)="handleAssessmentComplete($event)"
(approveProposal)="handleApproveProposal($event)"
(requestRevision)="handleRequestRevision($event)">
</app-quality-assessment-view>
</div>
</div>
} @else {
<div class="empty-state">
<i class="icon-design"></i>
<h3>请选择一个产品设计</h3>
<p>选择左侧的产品开始AI分析和方案设计</p>
</div>
}
</div>
</div>
<!-- AI分析进度弹窗 -->
<div class="analysis-progress-modal" *ngIf="showAnalysisProgress">
<div class="modal-overlay"></div>
<div class="modal-content">
<div class="modal-header">
<h3>AI分析进行中</h3>
<button class="btn-icon" (click)="cancelAnalysis">
<i class="icon-close"></i>
</button>
</div>
<div class="modal-body">
<div class="progress-steps">
@for (step of analysisSteps; track step.id) {
<div class="progress-step"
[class.active]="step.status === 'active'"
[class.completed]="step.status === 'completed'"
[class.pending]="step.status === 'pending'">
<div class="step-icon">
@if (step.status === 'completed') {
<i class="icon-check"></i>
} @else if (step.status === 'active') {
<div class="step-spinner"></div>
} @else {
<i class="icon-pending"></i>
}
</div>
<div class="step-info">
<span class="step-name">{{ step.name }}</span>
<span class="step-description">{{ step.description }}</span>
</div>
</div>
}
</div>
<div class="progress-bar">
<div class="progress-fill" [style.width.%]="analysisProgress"></div>
</div>
<div class="current-status">
<p>{{ currentAnalysisStatus }}</p>
</div>
</div>
</div>
</div>
<!-- AI对话助手 -->
<div class="ai-assistant" [class.expanded]="showAIAssistant">
<div class="assistant-toggle" (click)="toggleAIAssistant()">
<i class="icon-ai"></i>
<span>AI助手</span>
</div>
@if (showAIAssistant) {
<div class="assistant-panel">
<div class="assistant-header">
<h4>AI设计助手</h4>
<button class="btn-icon" (click)="showAIAssistant = false">
<i class="icon-minimize"></i>
</button>
</div>
<div class="assistant-content">
<app-ai-chat-interface
[context]="getAIChatContext()"
[suggestions]="getAISuggestions()"
(messageSent)="handleAIMessage($event)">
</app-ai-chat-interface>
</div>
</div>
}
</div>
</div>
3.2 综合分析视图组件
<!-- 综合分析视图 -->
<div class="comprehensive-analysis-view">
<!-- 分析控制面板 -->
<div class="analysis-control-panel">
<div class="control-section">
<h4>数据输入</h4>
<div class="input-sources">
<div class="input-source" [class.active]="hasTextRequirements">
<i class="icon-text"></i>
<span>文字需求</span>
<div class="status-indicator" [class.complete]="hasTextRequirements"></div>
</div>
<div class="input-source" [class.active]="hasReferenceImages">
<i class="icon-images"></i>
<span>参考图片 ({{ referenceImages.length }})</span>
<div class="status-indicator" [class.complete]="hasReferenceImages"></div>
</div>
<div class="input-source" [class.active]="hasCADDrawings">
<i class="icon-cad"></i>
<span>CAD图纸 ({{ cadDrawings.length }})</span>
<div class="status-indicator" [class.complete]="hasCADDrawings"></div>
</div>
</div>
<div class="input-actions">
<button class="btn-secondary" (click)="showTextRequirementDialog = true">
<i class="icon-plus"></i> 添加文字需求
</button>
<button class="btn-secondary" (click)="triggerImageUpload()">
<i class="icon-upload"></i> 上传图片
</button>
<button class="btn-secondary" (click)="triggerCADUpload()">
<i class="icon-upload"></i> 上传CAD
</button>
</div>
</div>
<div class="control-section">
<h4>分析设置</h4>
<div class="analysis-options">
<div class="option-group">
<label>分析深度</label>
<select [(ngModel)]="analysisDepth">
<option value="basic">基础分析</option>
<option value="detailed">详细分析</option>
<option value="comprehensive">全面分析</option>
</select>
</div>
<div class="option-group">
<label>预算约束</label>
<input type="number" [(ngModel)]="budgetConstraint" placeholder="无限制">
</div>
<div class="option-group">
<label>时间约束</label>
<input type="number" [(ngModel)]="timelineConstraint" placeholder="天数">
</div>
</div>
<button class="btn-primary"
[disabled]="!canStartAnalysis || isAnalyzing"
(click)="startComprehensiveAnalysis()">
<i class="icon-magic"></i>
{{ isAnalyzing ? '分析中...' : '开始AI分析' }}
</button>
</div>
</div>
<!-- 分析结果展示 -->
@if (analysisData) {
<div class="analysis-results">
<!-- 分析概览 -->
<div class="analysis-overview">
<h4>分析概览</h4>
<div class="overview-cards">
<div class="overview-card">
<div class="card-icon">
<i class="icon-style"></i>
</div>
<div class="card-content">
<h5>推荐风格</h5>
<p>{{ analysisData.analysisSummary.overallStyle }}</p>
<span class="confidence">置信度: {{ Math.round(analysisData.analysisSummary.confidence * 100) }}%</span>
</div>
</div>
<div class="overview-card">
<div class="card-icon">
<i class="icon-complexity"></i>
</div>
<div class="card-content">
<h5>设计复杂度</h5>
<p>{{ getComplexityLabel(analysisData.analysisSummary.complexity) }}</p>
<div class="complexity-indicator" [class.complexity-{{ analysisData.analysisSummary.complexity }}]"></div>
</div>
</div>
<div class="overview-card">
<div class="card-icon">
<i class="icon-insight"></i>
</div>
<div class="card-content">
<h5>关键洞察</h5>
<ul>
@for (insight of analysisData.analysisSummary.keyInsights; track insight) {
<li>{{ insight }}</li>
}
</ul>
</div>
</div>
</div>
</div>
<!-- 设计建议 -->
<div class="design-recommendations">
<h4>设计建议</h4>
<div class="recommendation-tabs">
<button class="tab-btn" [class.active]="activeRecommendationTab === 'style'" (click)="activeRecommendationTab = 'style'">
风格色彩
</button>
<button class="tab-btn" [class.active]="activeRecommendationTab === 'layout'" (click)="activeRecommendationTab = 'layout'">
空间布局
</button>
<button class="tab-btn" [class.active]="activeRecommendationTab === 'materials'" (click)="activeRecommendationTab = 'materials'">
材质选择
</button>
<button class="tab-btn" [class.active]="activeRecommendationTab === 'lighting'" (click)="activeRecommendationTab = 'lighting'">
照明设计
</button>
</div>
<!-- 风格色彩建议 -->
<div class="tab-content" *ngIf="activeRecommendationTab === 'style'">
<div class="style-recommendations">
<div class="color-palette">
<h5>色彩搭配</h5>
<div class="palette-display">
@for (color of analysisData.designRecommendations.style.colorScheme.primaryColor.colors; track color) {
<div class="color-swatch" [style.background-color]="color">
<span class="color-label">{{ color }}</span>
</div>
}
</div>
<p class="color-psychology">{{ analysisData.designRecommendations.style.colorScheme.psychology }}</p>
</div>
<div class="style-elements">
<h5>风格要素</h5>
<ul>
@for (element of analysisData.designRecommendations.style.styleElements; track element) {
<li>{{ element }}</li>
}
</ul>
</div>
</div>
</div>
<!-- 空间布局建议 -->
<div class="tab-content" *ngIf="activeRecommendationTab === 'layout'">
<div class="layout-recommendations">
<div class="space-planning">
<h5>空间规划</h5>
<p>{{ analysisData.designRecommendations.layout.spacePlanning }}</p>
</div>
<div class="functional-zones">
<h5>功能分区</h5>
@for (zone of analysisData.designRecommendations.layout.functionalZones; track zone) {
<div class="zone-item">
<span class="zone-name">{{ zone }}</span>
</div>
}
</div>
</div>
</div>
<!-- 材质选择建议 -->
<div class="tab-content" *ngIf="activeRecommendationTab === 'materials'">
<div class="material-recommendations">
<div class="primary-materials">
<h5>主要材质</h5>
@for (material of analysisData.designRecommendations.materials.primaryMaterials; track material) {
<div class="material-item">
<span class="material-name">{{ material }}</span>
</div>
}
</div>
<div class="sustainability">
<h5>可持续性</h5>
<p>{{ analysisData.designRecommendations.materials.sustainability }}</p>
</div>
</div>
</div>
<!-- 照明设计建议 -->
<div class="tab-content" *ngIf="activeRecommendationTab === 'lighting'">
<div class="lighting-recommendations">
<div class="natural-light">
<h5>自然光利用</h5>
<p>{{ analysisData.designRecommendations.lighting.naturalLight }}</p>
</div>
<div class="artificial-lighting">
<h5>人工照明</h5>
<div class="lighting-types">
<div class="lighting-type">
<span class="type-name">环境照明</span>
<span class="type-description">{{ analysisData.designRecommendations.lighting.artificialLighting.ambient }}</span>
</div>
<div class="lighting-type">
<span class="type-name">功能照明</span>
<span class="type-description">{{ analysisData.designRecommendations.lighting.artificialLighting.task }}</span>
</div>
<div class="lighting-type">
<span class="type-name">重点照明</span>
<span class="type-description">{{ analysisData.designRecommendations.lighting.artificialLighting.accent }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 功能分析 -->
<div class="functional-analysis">
<h4>功能分析</h4>
<div class="analysis-grid">
<div class="analysis-item">
<h5>空间利用率</h5>
<div class="efficiency-meter">
<div class="meter-fill" [style.width.%]="analysisData.functionalAnalysis.spaceUtilization.efficiency * 100"></div>
<span class="efficiency-value">{{ Math.round(analysisData.functionalAnalysis.spaceUtilization.efficiency * 100) }}%</span>
</div>
<p>{{ analysisData.functionalAnalysis.spaceUtilization.optimization }}</p>
</div>
<div class="analysis-item">
<h5>储物方案</h5>
<ul>
@for (solution of analysisData.functionalAnalysis.storageSolutions; track solution) {
<li>{{ solution }}</li>
}
</ul>
</div>
<div class="analysis-item">
<h5>动线优化</h5>
<p>{{ analysisData.functionalAnalysis.trafficFlow }}</p>
</div>
</div>
</div>
<!-- 预算分析 -->
<div class="budget-analysis">
<h4>预算分析</h4>
<div class="budget-overview">
<div class="total-budget">
<span class="label">预估总预算</span>
<span class="amount">¥{{ analysisData.budgetAnalysis.estimatedTotal.toLocaleString() }}</span>
</div>
<div class="budget-breakdown">
@for (item of getBudgetBreakdownItems(analysisData.budgetAnalysis.breakdown); track item.type) {
<div class="budget-item">
<span class="item-type">{{ item.label }}</span>
<div class="item-bar">
<div class="bar-fill" [style.width.%]="item.percentage"></div>
<span class="item-amount">¥{{ item.amount.toLocaleString() }}</span>
</div>
</div>
}
</div>
<div class="budget-optimizations">
<h5>优化建议</h5>
<ul>
@for (optimization of analysisData.budgetAnalysis.optimizations; track optimization) {
<li>{{ optimization }}</li>
}
</ul>
</div>
</div>
</div>
<!-- 风险评估 -->
<div class="risk-assessment">
<h4>风险评估</h4>
<div class="risk-categories">
<div class="risk-category">
<h5>潜在风险</h5>
<ul>
@for (risk of analysisData.riskAssessment.potentialRisks; track risk) {
<li class="risk-item">{{ risk }}</li>
}
</ul>
</div>
<div class="risk-category">
<h5>缓解策略</h5>
<ul>
@for (strategy of analysisData.riskAssessment.mitigationStrategies; track strategy) {
<li class="strategy-item">{{ strategy }}</li>
}
</ul>
</div>
<div class="risk-category">
<h5>应急计划</h5>
<ul>
@for (plan of analysisData.riskAssessment.contingencyPlans; track plan) {
<li class="plan-item">{{ plan }}</li>
}
</ul>
</div>
</div>
</div>
<!-- 后续步骤 -->
<div class="next-steps">
<h4>后续步骤</h4>
<div class="steps-list">
@for (step of analysisData.nextSteps; track step) {
<div class="step-item">
<div class="step-number">{{ $index + 1 }}</div>
<span class="step-description">{{ step }}</span>
</div>
}
</div>
<div class="action-buttons">
<button class="btn-primary" (click)="generateDesignProposal()">
<i class="icon-design"></i> 生成设计方案
</button>
<button class="btn-secondary" (click)="exportAnalysisReport()">
<i class="icon-download"></i> 导出分析报告
</button>
</div>
</div>
</div>
}
</div>
3.3 质量评估视图组件
<!-- 质量评估视图 -->
<div class="quality-assessment-view">
<div class="assessment-header">
<h4>设计方案质量评估</h4>
<div class="assessment-actions">
<button class="btn-secondary" (click)="runQualityAssessment()">
<i class="icon-refresh"></i> 重新评估
</button>
<button class="btn-primary" (click)="approveProposal" [disabled]="!assessmentComplete">
<i class="icon-check"></i> 批准方案
</button>
</div>
</div>
@if (assessmentResult) {
<div class="assessment-results">
<!-- 总体评分 -->
<div class="overall-score">
<div class="score-circle">
<svg width="120" height="120">
<circle cx="60" cy="60" r="50" fill="none" stroke="#e0e0e0" stroke-width="8"/>
<circle cx="60" cy="60" r="50" fill="none"
[attr.stroke]="getScoreColor(assessmentResult.overallScore)"
stroke-width="8"
[attr.stroke-dasharray]="circumference"
[attr.stroke-dashoffset]="scoreOffset"/>
</svg>
<div class="score-text">
<span class="score-value">{{ assessmentResult.overallScore }}</span>
<span class="score-label">总体评分</span>
</div>
</div>
<div class="score-summary">
<p class="score-description">{{ getScoreDescription(assessmentResult.overallScore) }}</p>
<div class="confidence-indicator">
<span>评估置信度: {{ assessmentResult.confidence }}%</span>
</div>
</div>
</div>
<!-- 详细评分 -->
<div class="detailed-scores">
<h5>详细评分</h5>
<div class="score-items">
@for (score of assessmentResult.detailedScores; track score.category) {
<div class="score-item">
<div class="score-header">
<span class="score-category">{{ score.category }}</span>
<span class="score-value" [style.color]="getScoreColor(score.score)">{{ score.score }}</span>
</div>
<div class="score-bar">
<div class="bar-fill"
[style.width.%]="score.score"
[style.background-color]="getScoreColor(score.score)">
</div>
</div>
<p class="score-commentary">{{ score.commentary }}</p>
</div>
}
</div>
</div>
<!-- 优势分析 -->
<div class="strengths-analysis">
<h5>设计优势</h5>
<div class="strengths-grid">
@for (strength of assessmentResult.strengths; track strength.aspect) {
<div class="strength-card">
<div class="strength-icon">
<i class="icon-{{ strength.icon }}"></i>
</div>
<div class="strength-content">
<h6>{{ strength.aspect }}</h6>
<p>{{ strength.description }}</p>
<div class="strength-score">
<span class="score">{{ strength.score }}/10</span>
</div>
</div>
</div>
}
</div>
</div>
<!-- 改进建议 -->
<div class="improvement-suggestions">
<h5>改进建议</h5>
<div class="suggestions-list">
@for (suggestion of assessmentResult.suggestions; track suggestion.id) {
<div class="suggestion-item" [class.priority-high]="suggestion.priority === 'high'">
<div class="suggestion-header">
<span class="suggestion-title">{{ suggestion.title }}</span>
<span class="suggestion-priority">{{ suggestion.priority }}</span>
</div>
<p class="suggestion-description">{{ suggestion.description }}</p>
<div class="suggestion-impact">
<span class="impact-label">预期影响:</span>
<span class="impact-value">{{ suggestion.impact }}</span>
</div>
</div>
}
</div>
</div>
<!-- 技术可行性 -->
<div class="technical-feasibility">
<h5>技术可行性</h5>
<div class="feasibility-items">
@for (item of assessmentResult.technicalFeasibility; track item.aspect) {
<div class="feasibility-item">
<div class="feasibility-header">
<span class="aspect-name">{{ item.aspect }}</span>
<span class="feasibility-score" [class.feasible]="item.feasible">{{ item.score }}/10</span>
</div>
<p class="feasibility-description">{{ item.description }}</p>
@if (!item.feasible) {
<div class="feasibility-concerns">
<span class="concern-label">关注点:</span>
<ul>
@for (concern of item.concerns; track concern) {
<li>{{ concern }}</li>
}
</ul>
</div>
}
</div>
}
</div>
</div>
<!-- 客户匹配度 -->
<div class="customer-match">
<h5>客户需求匹配度</h5>
<div class="match-overview">
<div class="match-score">
<span class="match-value">{{ assessmentResult.customerMatch.overallMatch }}%</span>
<span class="match-label">总体匹配度</span>
</div>
<p class="match-summary">{{ assessmentResult.customerMatch.summary }}</p>
</div>
<div class="match-details">
@for (match of assessmentResult.customerMatch.requirements; track match.requirement) {
<div class="match-item">
<span class="requirement-name">{{ match.requirement }}</span>
<div class="match-bar">
<div class="bar-fill" [style.width.%]="match.match"></div>
<span class="match-percentage">{{ match.match }}%</span>
</div>
</div>
}
</div>
</div>
<!-- 评估总结 -->
<div class="assessment-summary">
<h5>评估总结</h5>
<div class="summary-content">
<p>{{ assessmentResult.summary }}</p>
<div class="recommendation">
<span class="recommendation-label">最终建议:</span>
<span class="recommendation-value" [class.approve]="assessmentResult.recommendation === 'approve'">
{{ assessmentResult.recommendation === 'approve' ? '批准方案' : '需要修改' }}
</span>
</div>
</div>
</div>
</div>
}
</div>
4. 技术实现要点
4.1 AI分析流程优化
- 并行分析：图片分析、CAD分析、文字分析可并行进行
- 增量更新：新增数据时只分析变化部分
- 结果缓存：缓存分析结果，避免重复计算
- 错误处理：完善的AI调用失败处理和重试机制
4.2 多模态数据处理
- 图片预处理：自动调整图片大小、格式转换
- CAD图纸识别：支持多种CAD格式的智能识别
- 数据标准化：将不同来源的数据转换为统一格式
4.3 用户体验优化
- 实时进度：AI分析过程中显示详细进度
- 智能推荐：基于历史数据推荐分析选项
- 交互式优化：支持与AI对话进行方案调整
4.4 数据持久化
- 分析结果存储：将AI分析结果保存到Product表
- 版本管理：支持分析结果的历史版本
- 数据同步：确保多产品项目的数据一致性
文档版本: v4.0 (AI增强的Project表方案深化) 更新日期: 2025-10-20 维护者: YSS Development Team