# 确认需求功能优化方案文档 ## 📋 项目背景 ### 当前功能概述本文档针对**需求沟通阶段**的**确认需求**功能模块进行全面分析和优化建议。该模块位于设计师项目详情页面中，是整个项目流程中的关键环节。 ### 相关代码文件 - **主组件**：`src/app/shared/components/requirements-confirm-card/requirements-confirm-card.ts` - **模板文件**：`src/app/shared/components/requirements-confirm-card/requirements-confirm-card.html` - **样式文件**：`src/app/shared/components/requirements-confirm-card/requirements-confirm-card.scss` - **父组件集成**：`src/app/pages/designer/project-detail/project-detail.ts` ### 当前功能架构确认需求模块采用**四标签页**架构： 1. **素材解析** - 文本、图片、CAD上传及分析 2. **需求映射** - 基于固定场景的参数映射和氛围预览 3. **协作验证** - 需求列表、评论、优先级管理 4. **进度管理** - 整体进度跟踪和历史状态管理 --- ## 📊 功能对比矩阵 ### 需求文档要求 vs 当前实现对比 | 功能模块 | 需求文档要求 | 当前实现状态 | 优先级 | 完成度 | |---------|------------|------------|-------|-------| | **素材分析** | | 色彩分析 | 补充色轮图标，完整展示色彩信息 | 有基础数据，缺少可视化 | 🔴 高 | 60% | | 形体分析 | 整体形体+软装形体选择 | 只有分析数据，无选择功能 | 🔴 高 | 40% | | 质感分析 | 质感、材质、亮光/哑光对比 | 有材质分类，展示不直观 | 🟡 中 | 50% | | 纹理分析 | 图案可视化展示 | 只有文字标签 | 🟡 中 | 40% | | 灯光分析 | 光色、光比、光质、光占比 | 有光色和光质，缺光比和光占比 | 🔴 高 | 50% | | 完全展示所有信息 | 核心要求 | 信息折叠，展示简化 | 🔴 高 | 50% | | **需求映射** | | 功能定位 | 隐藏功能，后台自动生成 | 独立标签页，用户可见 | 🟡 中 | 需调整 | | **协作验证** | | 五维度验证 | 色彩、形体、质感、纹理、灯光分类 | 通用需求列表 | 🔴 高 | 20% | | 素材关联 | 关联参考图、CAD、文字说明 | 无关联机制 | 🔴 高 | 0% | | 选择和标注 | 交互式标注工具 | 无标注功能 | 🔴 高 | 0% | | 区域细分 | 支持不同区域（客厅、婴儿房等） | 只有整体方案 | 🔴 高 | 0% | | 分工人员 | 不同区域分配不同人员 | 只有角色标识 | 🟡 中 | 10% | --- ## 🎯 详细优化点清单 ## A. 素材分析标签页优化 ### A1. 色彩分析增强 🔴 高优先级 #### 当前问题 - 只显示简单的SVG图标 - 色彩数据展示不够直观 - 缺少交互式色轮可视化 #### 优化方案 **1. 交互式色轮可视化组件** ```typescript // 新建组件：src/app/shared/components/color-wheel-visualizer/ interface ColorWheelConfig { colors: Array<{ hue: number; // 色调角度 0-360 saturation: number; // 饱和度 0-100 brightness: number; // 亮度 0-100 percentage: number; // 占比 hex: string; }>; interactive: boolean; // 是否可交互 } ``` **功能特性：** - SVG绘制的色轮，显示360度色相环 - 在色轮上标注主要颜色的位置 - 鼠标悬停显示详细信息（RGB、HEX、HSB值） - 显示色彩分布饼图 - 色彩和谐度可视化（单色、类似色、互补色等） **2. 色彩详情卡片** ```html

主色调

{{ primaryHue }}°

饱和度

{{ saturation }}%

色温

{{ temperature }}K ({{ temperatureDesc }})

色彩心理学

{{ effect }}

``` **3. 技术实施细节** - 使用D3.js或纯SVG实现色轮 - 响应式设计，适配不同屏幕尺寸 - 动画过渡效果 - 支持导出色板 --- ### A2. 形体分析补充 🔴 高优先级 #### 当前问题 - 只展示形体复杂度和视觉冲击的数值 - 缺少软装形体的分类和选择功能 - 无法针对特定形体进行标注 #### 优化方案 **1. 形体分类展示** ```typescript interface FormCategory { overall: { lineType: 'straight' | 'curved' | 'mixed'; // 直线/曲线/混合 complexity: number; // 复杂度 0-100 symmetry: 'symmetric' | 'asymmetric'; // 对称/不对称 }; furniture: { dominant: string[]; // 主要家具形体 style: string; // 风格（简约、古典、现代等） proportion: number; // 占比 }; } ``` **2. 软装形体选择器** ```html

形体分析

线条类型：

对称性：

软装形体选择

形体比例分析

``` **3. 数据模型扩展** ```typescript interface FurnitureFormItem { id: string; name: string; category: 'sofa' | 'table' | 'chair' | 'cabinet' | 'bed' | 'decoration'; formType: 'geometric' | 'organic' | 'linear' | 'curved'; preview: string; selected: boolean; dominance: number; // 视觉主导性 } ``` --- ### A3. 质感分析优化 🟡 中优先级 #### 当前问题 - 只显示材质类别和粗糙度等级文字 - 亮光/哑光对比不明显 - 缺少质感的视觉化展示 #### 优化方案 **1. 亮光/哑光对比卡片** ```html

质感分析

哑光

{{ matteLevel }}/10

柔和 · 低反射 · 温暖

亮光

{{ glossyLevel }}/10

明亮 · 高反射 · 现代

粗糙度

反射率

{{ reflectivity }}%

质感层次

材质类型

{{ primaryMaterial }} {{ mat.name }} ({{ mat.percentage }}%)

``` **2. 质感预览组件** 使用3D渲染或高质量图片展示不同质感效果： - 木质（哑光/亮光） - 金属（拉丝/抛光） - 织物（粗糙/光滑） - 石材（天然/磨光） --- ### A4. 纹理分析增强 🟡 中优先级 #### 当前问题 - 只有纹理类型的文字标签 - 缺少图案的可视化展示 - 无法直观了解纹理重复规律 #### 优化方案 **1. 纹理图案可视化** ```html

纹理分析

{{ pattern.type }} {{ pattern.coverage }}%

复杂度: {{ pattern.complexity }} 尺度: {{ pattern.scale }}

重复规律

重复类型： {{ repetitionType }}

间距：横向 {{ spacingH }}mm · 纵向 {{ spacingV }}mm

对称性： {{ symmetryType }} (强度 {{ symmetryStrength }}%)

纹理族系

建议材质： {{ mat }}

``` **2. 技术实施** - 使用Canvas API提取纹理样本 - 傅里叶变换分析重复模式 - 提供纹理缩放预览 - 支持纹理导出 --- ### A5. 灯光分析补充 🔴 高优先级 #### 当前问题 - 只有光源类型、亮度、情绪 - **缺少光比数据** - **缺少光占比数据** - 光质展示不够直观 #### 优化方案 **1. 完整的灯光分析面板** ```typescript interface CompleteLightingAnalysis { // 现有数据 lightSource: { type: string; intensity: number; mood: string; }; // 新增：光比 lightingRatio: { keyToFill: number; // 主光与补光比例 (如 3:1) contrast: number; // 明暗对比度 description: string; // 高反差/低反差/中等 }; // 新增：光占比 lightDistribution: { natural: number; // 自然光占比 % artificial: number; // 人工光占比 % ambient: number; // 环境光占比 % direct: number; // 直射光占比 % indirect: number; // 间接光占比 % }; // 光质 lightQuality: { softness: number; // 柔和度 diffusion: number; // 漫射度 directionality: number; // 方向性 }; } ``` **2. 灯光分析UI** ```html

灯光分析

{{ source.subtype }} 强度 {{ source.intensity }}%

光比分析

主光 {{ keyLightRatio }}%

补光 {{ fillLightRatio }}%

光占比

自然光 {{ naturalLight }}%

人工光 {{ artificialLight }}%

环境光 {{ ambientLight }}%

光质

柔和度

{{ softness }}%

漫射度

{{ diffusion }}%

方向性

{{ directionality }}%

色温

{{ colorTemp }}K

灯光情绪 {{ lightingMood }}

``` **3. 服务层扩展** 修改 `src/app/shared/services/lighting-analysis.service.ts`： ```typescript // 新增光比计算方法 calculateLightingRatio(image: File): Observable { // 分析图像的亮度分布 // 识别主光源和补光源 // 计算光比 } // 新增光占比计算方法 calculateLightDistribution(lightingData: any): LightDistribution { // 根据光源识别结果计算各类光源占比 } ``` --- ### A6. 全展示模式 🔴 高优先级 #### 当前问题 - 分析结果折叠显示，用户需要点击展开 - 无法一次性查看所有素材的完整分析 - 核心要求是"完全展示所有采集的参考信息" #### 优化方案 **1. 展开/折叠控制** ```html

已上传素材

``` **2. 完整展示模式布局** ```scss .material-cards.expanded { .material-card { .analysis-section { display: block !important; // 强制展开所有分析部分 .color-wheel-visualizer, .form-analysis-section, .texture-analysis-section, .pattern-analysis-section, .lighting-analysis-section { max-height: none; overflow: visible; } } } } ``` **3. 打印/导出功能** ```typescript // 新增导出分析报告功能 exportAnalysisReport(materialId: string, format: 'pdf' | 'excel' | 'json') { const material = this.materials.find(m => m.id === materialId); // 生成完整的分析报告 } // 批量导出所有素材 exportAllMaterials() { // 导出所有素材的完整分析数据 } ``` --- ## B. 需求映射调整 🟡 中优先级 ### 当前问题 - 需求映射作为独立标签页展示给用户 - 文档要求：应该是隐藏功能，在后台自动生成 ### 优化方案 **1. 移除"需求映射"标签页** 修改 `requirements-confirm-card.html`： ```html ``` **2. 自动触发映射机制** ```typescript // 在素材分析完成后自动触发 private onMaterialAnalysisComplete(material: MaterialFile): void { // 检查是否所有素材都已分析完成 const allAnalyzed = this.materials.every(m => m.analysis); if (allAnalyzed) { console.log('所有素材分析完成，自动触发需求映射'); this.triggerBackgroundMapping(); } } // 后台映射生成 private triggerBackgroundMapping(): void { this.isGeneratingMapping = true; // 收集所有分析结果 const analysisResults = this.materials .filter(m => m.type === 'image') .map(m => this.convertToColorAnalysisResult(m)); // 自动生成需求映射（不显示给用户） this.requirementMappingService.generateRequirementMapping( this.mergeAnalysisResults(analysisResults), SceneTemplate.LIVING_ROOM_MODERN ).subscribe({ next: (mapping) => { this.requirementMapping = mapping; this.isGeneratingMapping = false; // 静默保存，不弹窗提示 console.log('需求映射已自动生成:', mapping); // 发送映射数据到父组件（用于方案确认阶段展示） this.emitMappingDataUpdate(); }, error: (error) => { console.error('自动映射生成失败:', error); this.isGeneratingMapping = false; } }); } ``` **3. 保留数据接口** ```typescript // 保留映射数据的访问接口，供其他模块使用 public getMappingData(): RequirementMapping | null { return this.requirementMapping; } // 提供重新生成映射的方法（调试用） public regenerateMapping(): void { this.triggerBackgroundMapping(); } ``` **4. 在开发模式下保留可见性（可选）** ```typescript // 环境配置 showMappingTab = environment.production ? false : true; ``` ```html ``` --- ## C. 协作验证重构 🔴 高优先级（核心）这是最重要的优化模块，需要完全重构当前的协作验证功能。 ### C1. 五维验证模块设计 #### 当前问题 - 只有通用的需求列表（色彩氛围、空间布局、材质选择） - 没有按照五个维度（色彩、形体、质感、纹理、灯光）分类 - 无法针对特定维度进行深度验证 #### 优化方案 **1. 数据模型重构** ```typescript // 新建接口：src/app/models/collaboration-verification.interface.ts export interface DimensionVerification { id: string; dimension: 'color' | 'form' | 'texture' | 'pattern' | 'lighting'; dimensionName: string; status: 'pending' | 'in-review' | 'confirmed' | 'rejected'; // 关联的素材 linkedMaterials: LinkedMaterial[]; // 验证项 verificationItems: VerificationItem[]; // 标注 annotations: Annotation[]; // 协作信息 assignedTo?: string; comments: Comment[]; // 区域（如果是区域细分） areaId?: string; lastUpdated: Date; } export interface LinkedMaterial { materialId: string; materialType: 'image' | 'cad' | 'text'; materialName: string; relevance: number; // 相关度 0-100 highlightAreas?: Array<{x: number; y: number; width: number; height: number}>; } export interface VerificationItem { id: string; title: string; description: string; status: 'pending' | 'confirmed' | 'rejected'; priority: 'high' | 'medium' | 'low'; tags: string[]; } export interface Annotation { id: string; type: 'text' | 'arrow' | 'highlight' | 'circle' | 'rectangle'; content?: string; position: {x: number; y: number}; size?: {width: number; height: number}; color: string; author: string; timestamp: Date; linkedMaterialId: string; } ``` **2. 五维验证UI布局** ```html

协作验证

``` **3. 新建维度验证组件** 创建 `src/app/shared/components/dimension-verification/` ```typescript @Component({ selector: 'app-dimension-verification', templateUrl: './dimension-verification.component.html', styleUrls: ['./dimension-verification.component.scss'] }) export class DimensionVerificationComponent implements OnInit { @Input() dimension!: 'color' | 'form' | 'texture' | 'pattern' | 'lighting'; @Input() materials: MaterialFile[] = []; @Input() verificationData?: DimensionVerification; @Output() materialLinked = new EventEmitter(); @Output() annotationAdded = new EventEmitter(); @Output() statusChanged = new EventEmitter<{dimension: string; status: string}>(); // 组件逻辑... } ``` --- ### C2. 素材关联系统 #### 功能设计 **1. 拖拽关联** ```html

素材库

已关联素材 - {{ dimensionName }}

{{ linked.materialName }} 相关度: {{ linked.relevance }}%

``` **2. 下拉选择关联** ```html

关联参考图：

``` **3. 关联逻辑实现** ```typescript onMaterialDropped(event: CdkDragDrop) { if (event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); } else { transferArrayItem( event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex ); // 创建关联 const material = event.container.data[event.currentIndex]; this.createMaterialLink(material); } } private createMaterialLink(material: MaterialFile): void { const linked: LinkedMaterial = { materialId: material.id, materialType: material.type, materialName: material.name, relevance: this.calculateRelevance(material), // 自动计算相关度 highlightAreas: [] }; this.materialLinked.emit(linked); } // 计算素材与当前维度的相关度 private calculateRelevance(material: MaterialFile): number { // 根据维度和素材分析结果计算相关度 switch(this.dimension) { case 'color': return material.analysis?.enhancedColorAnalysis ? 90 : 50; case 'form': return material.analysis?.formAnalysis ? 85 : 40; case 'texture': return material.analysis?.textureAnalysis ? 88 : 45; case 'pattern': return material.analysis?.patternAnalysis ? 82 : 35; case 'lighting': return material.analysis?.lightingAnalysis ? 92 : 50; default: return 50; } } ``` --- ### C3. 标注工具集成 #### 功能设计 **1. 标注工具栏** ```html ``` **2. 标注画布** ```html

标注列表

``` **3. 标注逻辑实现** ```typescript export class AnnotationToolComponent { activeTool: 'text' | 'arrow' | 'highlight' | 'circle' | 'rectangle' | null = null; annotationColor = '#FF0000'; annotations: Annotation[] = []; isDrawing = false; currentAnnotation: Partial | null = null; startAnnotation(event: MouseEvent): void { if (!this.activeTool) return; this.isDrawing = true; const rect = (event.target as HTMLElement).getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; this.currentAnnotation = { id: this.generateId(), type: this.activeTool, position: { x, y }, color: this.annotationColor, author: this.getCurrentUser(), timestamp: new Date() }; } continueAnnotation(event: MouseEvent): void { if (!this.isDrawing || !this.currentAnnotation) return; const rect = (event.target as HTMLElement).getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; // 根据工具类型更新标注 if (this.activeTool === 'arrow') { this.currentAnnotation.end = { x, y }; } else if (['highlight', 'rectangle'].includes(this.activeTool!)) { this.currentAnnotation.size = { width: x - this.currentAnnotation.position!.x, height: y - this.currentAnnotation.position!.y }; } else if (this.activeTool === 'circle') { const dx = x - this.currentAnnotation.position!.x; const dy = y - this.currentAnnotation.position!.y; this.currentAnnotation.radius = Math.sqrt(dx * dx + dy * dy); } } finishAnnotation(event: MouseEvent): void { if (!this.isDrawing || !this.currentAnnotation) return; this.isDrawing = false; // 如果是文字工具，弹出输入框 if (this.activeTool === 'text') { const text = prompt('请输入标注内容：'); if (text) { this.currentAnnotation.content = text; this.annotations.push(this.currentAnnotation as Annotation); this.annotationAdded.emit(this.currentAnnotation as Annotation); } } else { this.annotations.push(this.currentAnnotation as Annotation); this.annotationAdded.emit(this.currentAnnotation as Annotation); } this.currentAnnotation = null; } deleteAnnotation(id: string): void { const index = this.annotations.findIndex(a => a.id === id); if (index !== -1) { this.annotations.splice(index, 1); } } clearAnnotations(): void { if (confirm('确定清除所有标注吗？')) { this.annotations = []; } } } ``` --- ### C4. 区域细分管理 #### 功能设计 **1. 区域管理面板** ```html

区域细分管理

整体方案

默认统一风格设计

责任人： {{ area.assignedTo || '未分配' }}

五维验证： {{ getCompletedDimensions(area) }}/5

``` **2. 区域数据模型** ```typescript export interface Area { id: string; name: string; icon: string; // emoji或图标 color: string; // 区域标识颜色 styleDescription: string; // 风格描述 status: 'pending' | 'in-progress' | 'completed'; // 分工 assignedTo?: string; // 责任人ID assignedRole?: string; // 角色 // 五维验证数据 dimensionVerifications: { color?: DimensionVerification; form?: DimensionVerification; texture?: DimensionVerification; pattern?: DimensionVerification; lighting?: DimensionVerification; }; // 特殊需求 specialRequirements?: string[]; // 参考素材（区域专属） dedicatedMaterials?: string[]; // 素材ID列表 createdAt: Date; updatedAt: Date; } ``` **3. 区域添加/编辑对话框** ```html

``` **4. 区域预设配置** ```typescript const areaPresets: AreaPreset[] = [ { id: 'living-room', name: '客厅', icon: '🛋️', color: '#4A90E2', styleDescription: '现代简约，明亮开阔', defaultRequirements: ['开放式布局', '充足采光', '舒适氛围'] }, { id: 'baby-room', name: '婴儿房', icon: '👶', color: '#FFB6C1', styleDescription: '色彩丰富，童趣温馨', defaultRequirements: ['安全环保', '柔和色彩', '储物充足', '易于清洁'] }, { id: 'master-bedroom', name: '主卧', icon: '🛏️', color: '#9B59B6', styleDescription: '宁静优雅，私密舒适', defaultRequirements: ['隔音效果', '柔和灯光', '收纳空间'] }, { id: 'kitchen', name: '厨房', icon: '🍳', color: '#E67E22', styleDescription: '实用高效，易于清洁', defaultRequirements: ['动线合理', '台面充足', '通风良好', '防油防水'] }, { id: 'bathroom', name: '卫生间', icon: '🚿', color: '#3498DB', styleDescription: '清新明亮，干湿分离', defaultRequirements: ['防水防滑', '通风除湿', '储物空间'] }, { id: 'study', name: '书房', icon: '📚', color: '#27AE60', styleDescription: '安静专注，书香氛围', defaultRequirements: ['采光充足', '隔音效果', '书柜充足'] }, { id: 'dining', name: '餐厅', icon: '🍽️', color: '#F39C12', styleDescription: '温馨舒适，聚餐氛围', defaultRequirements: ['空间适中', '照明充足', '易于清洁'] }, { id: 'custom', name: '自定义', icon: '✏️', color: '#95A5A6', styleDescription: '', defaultRequirements: [] } ]; ``` **5. 区域切换与对比视图** ```html

区域参数对比

维度/区域	{{ area.name }}
色彩	{{ getStatusText(area.dimensionVerifications.color?.status) }}
形体	{{ getStatusText(area.dimensionVerifications.form?.status) }}
质感	{{ getStatusText(area.dimensionVerifications.texture?.status) }}
纹理	{{ getStatusText(area.dimensionVerifications.pattern?.status) }}
灯光	{{ getStatusText(area.dimensionVerifications.lighting?.status) }}

``` --- ### C5. 分工和人员系统 #### 功能设计 **1. 人员角色定义** ```typescript export interface CollaborationUser { id: string; name: string; role: 'designer' | 'customer-service' | 'team-leader' | 'client'; avatar?: string; permissions: { canEditColor: boolean; canEditForm: boolean; canEditTexture: boolean; canEditPattern: boolean; canEditLighting: boolean; canApprove: boolean; }; } ``` **2. 分工面板** ```html

分工管理

区域责任人

协作状态

{{ getUserTaskCount(user.id) }} 项任务 {{ getUserCompletion(user.id) }}% 完成

``` **3. 审批流程** ```html

审批流程

审批人： {{ step.assignee?.name || '待分配' }}

``` **4. 审批逻辑** ```typescript interface ApprovalStep { id: string; title: string; description: string; assignee?: CollaborationUser; status: 'pending' | 'in-progress' | 'completed'; result?: 'approved' | 'rejected'; completedAt?: Date; comments?: string; } const approvalSteps: ApprovalStep[] = [ { id: 'dimension-verification', title: '五维验证审核', description: '设计师完成五个维度的验证', status: 'pending' }, { id: 'customer-service-review', title: '客服审核', description: '客服确认需求理解正确', status: 'pending' }, { id: 'team-leader-approval', title: '组长审批', description: '组长审批整体方案', status: 'pending' }, { id: 'client-confirmation', title: '客户确认', description: '客户最终确认', status: 'pending' } ]; approveStep(stepId: string): void { const step = this.approvalSteps.find(s => s.id === stepId); if (step) { step.status = 'completed'; step.result = 'approved'; step.completedAt = new Date(); // 自动启动下一步 const nextStepIndex = this.approvalSteps.indexOf(step) + 1; if (nextStepIndex < this.approvalSteps.length) { this.approvalSteps[nextStepIndex].status = 'in-progress'; } // 检查是否所有步骤都完成 const allApproved = this.approvalSteps.every(s => s.result === 'approved'); if (allApproved) { this.onAllStepsApproved(); } } } rejectStep(stepId: string): void { const step = this.approvalSteps.find(s => s.id === stepId); if (step) { const reason = prompt('请输入驳回原因：'); if (reason) { step.status = 'completed'; step.result = 'rejected'; step.comments = reason; step.completedAt = new Date(); // 通知相关人员 this.notifyRejection(step); } } } ``` --- ## 4. 技术实施建议 ### 需要新增的组件 ``` src/app/shared/components/ ├── color-wheel-visualizer/ # 色轮可视化组件 │ ├── color-wheel-visualizer.component.ts │ ├── color-wheel-visualizer.component.html │ └── color-wheel-visualizer.component.scss │ ├── dimension-verification/ # 维度验证组件 │ ├── dimension-verification.component.ts │ ├── dimension-verification.component.html │ └── dimension-verification.component.scss │ ├── annotation-tool/ # 标注工具组件 │ ├── annotation-tool.component.ts │ ├── annotation-tool.component.html │ └── annotation-tool.component.scss │ ├── area-management/ # 区域管理组件 │ ├── area-management.component.ts │ ├── area-management.component.html │ └── area-management.component.scss │ ├── furniture-form-selector/ # 软装形体选择器 │ ├── furniture-form-selector.component.ts │ ├── furniture-form-selector.component.html │ └── furniture-form-selector.component.scss │ ├── texture-comparison/ # 质感对比组件 │ ├── texture-comparison.component.ts │ ├── texture-comparison.component.html │ └── texture-comparison.component.scss │ ├── pattern-visualizer/ # 纹理可视化组件 │ ├── pattern-visualizer.component.ts │ ├── pattern-visualizer.component.html │ └── pattern-visualizer.component.scss │ └── lighting-distribution-chart/ # 光占比图表组件 ├── lighting-distribution-chart.component.ts ├── lighting-distribution-chart.component.html └── lighting-distribution-chart.component.scss ``` ### 需要修改的现有文件 **1. requirements-confirm-card.ts** - 移除需求映射标签页相关代码 - 添加五维验证数据结构 - 添加区域管理逻辑 - 集成标注工具 - 实现分工和审批流程 **2. requirements-confirm-card.html** - 重构协作验证标签页 - 增强素材分析展示 - 添加区域管理UI - 集成新组件 **3. requirements-confirm-card.scss** - 新增五维验证样式 - 标注工具样式 - 区域管理样式 - 响应式布局优化 ### 数据模型调整 **新建接口文件：** ``` src/app/models/ ├── collaboration-verification.interface.ts # 协作验证相关接口 ├── annotation.interface.ts # 标注相关接口 ├── area-management.interface.ts # 区域管理相关接口 └── approval-workflow.interface.ts # 审批流程相关接口 ``` ### API接口需求 ```typescript // 需要后端提供的API接口 // 1. 灯光分析增强 POST /api/analysis/lighting/ratio // 计算光比 POST /api/analysis/lighting/distribution // 计算光占比 // 2. 标注管理 POST /api/annotations // 创建标注 GET /api/annotations/:projectId // 获取项目标注 PUT /api/annotations/:id // 更新标注 DELETE /api/annotations/:id // 删除标注 // 3. 区域管理 POST /api/areas // 创建区域 GET /api/areas/:projectId // 获取项目区域 PUT /api/areas/:id // 更新区域 DELETE /api/areas/:id // 删除区域 // 4. 分工管理 POST /api/assignments // 分配任务 GET /api/assignments/:projectId // 获取项目分工 PUT /api/assignments/:id // 更新分工 // 5. 审批流程 POST /api/approvals/:stepId/approve // 审批通过 POST /api/approvals/:stepId/reject // 审批驳回 GET /api/approvals/:projectId/status // 获取审批状态 ``` --- ## 5. 实施分阶段建议 ### 阶段1：素材分析增强（预计5-7天） **优先级：高** **任务清单：** - [ ] 创建色轮可视化组件 - [ ] 实现软装形体选择器 - [ ] 优化质感对比展示 - [ ] 增强纹理图案可视化 - [ ] 补充灯光分析（光比、光占比） - [ ] 实现全展示模式切换 - [ ] 添加分析报告导出功能 **验收标准：** - 色轮能正确显示色彩分布 - 软装形体可选择并保存 - 质感亮光/哑光对比清晰 - 灯光分析包含光比和光占比数据 - 全展示模式能展开所有分析细节 --- ### 阶段2：需求映射隐藏（预计1-2天） **优先级：中** **任务清单：** - [ ] 移除需求映射标签页UI - [ ] 实现后台自动触发机制 - [ ] 保留映射数据接口 - [ ] 测试自动映射功能 - [ ] 添加开发模式可见性（可选） **验收标准：** - 需求映射标签页不可见 - 素材分析完成后自动生成映射 - 映射数据正确传递给父组件 - 不影响方案确认阶段的显示 --- ### 阶段3：协作验证重构（预计10-14天） **优先级：高（核心）** **子阶段3.1：五维验证模块（3-4天）** - [ ] 创建维度验证数据模型 - [ ] 实现五维验证UI布局 - [ ] 创建dimension-verification组件 - [ ] 实现维度切换逻辑 - [ ] 添加验证状态管理 **子阶段3.2：素材关联系统（2-3天）** - [ ] 实现拖拽关联功能（使用CDK Drag&Drop） - [ ] 实现下拉选择关联 - [ ] 添加相关度计算 - [ ] 实现素材高亮显示 **子阶段3.3：标注工具集成（3-4天）** - [ ] 创建annotation-tool组件 - [ ] 实现SVG标注层 - [ ] 支持文字、箭头、高亮、圆圈、矩形标注 - [ ] 实现标注保存和加载 - [ ] 添加标注列表管理 **子阶段3.4：区域细分管理（2-3天）** - [ ] 创建area-management组件 - [ ] 实现区域添加/编辑对话框 - [ ] 配置区域预设 - [ ] 实现区域切换逻辑 - [ ] 添加区域对比视图 **子阶段3.5：分工和人员系统（2-3天）** - [ ] 定义用户角色和权限 - [ ] 实现分工管理面板 - [ ] 实现协作状态跟踪 - [ ] 实现审批流程 - [ ] 添加通知机制 **验收标准：** - 五个维度可独立验证 - 素材能正确关联到各维度 - 标注工具功能完整且流畅 - 区域可添加、编辑、删除 - 分工和审批流程正常运行 --- ## 6. 验收标准 ### 功能完整性验收 **素材分析模块：** - ✅ 所有五个维度（色彩、形体、质感、纹理、灯光）都有完整的分析数据 - ✅ 色轮可视化正确展示色彩分布 - ✅ 灯光分析包含光比和光占比 - ✅ 可切换精简视图和完整展示模式 - ✅ 可导出分析报告（PDF/Excel/JSON） **协作验证模块：** - ✅ 五维验证模块独立可操作 - ✅ 素材能通过拖拽或选择关联到维度 - ✅ 标注工具支持5种标注类型 - ✅ 区域可自由添加和管理 - ✅ 分工分配正常，审批流程完整 **系统集成：** - ✅ 需求映射在后台自动生成 - ✅ 数据正确传递给父组件 - ✅ 不影响其他模块功能 ### 用户体验标准 **交互体验：** - 响应时间 < 200ms（标注工具除外） - 拖拽操作流畅无卡顿 - 标注绘制实时反馈 - 表单验证及时提示 **视觉设计：** - UI风格与整体系统一致 - 色彩搭配和谐 - 图标清晰易识别 - 布局合理不拥挤 **易用性：** - 操作步骤明确，不超过3步 - 提供操作提示和帮助文档 - 支持键盘快捷键（标注工具） - 错误提示友好明确 **性能要求：** - 素材列表加载 < 1s - 色轮渲染 < 500ms - 标注保存 < 300ms - 区域切换 < 200ms ### 数据准确性 - ✅ 分析数据与实际图片内容相符 - ✅ 光比计算误差 < 10% - ✅ 色彩提取准确率 > 90% - ✅ 关联关系正确保存和加载 ### 兼容性 - ✅ 支持Chrome、Edge、Firefox最新版本 - ✅ 响应式设计适配1366px及以上分辨率 - ✅ 支持触摸屏操作（标注工具） --- ## 7. 风险评估与建议 ### 潜在风险 **技术风险：** 1. **色轮可视化性能** - 大量颜色数据可能影响渲染性能 - 建议：使用Canvas替代SVG，实现虚拟滚动 2. **标注工具复杂度** - SVG操作和状态管理复杂 - 建议：使用成熟的库如Fabric.js或Konva.js 3. **拖拽关联稳定性** - CDK Drag&Drop可能有兼容性问题 - 建议：充分测试，准备降级方案 **业务风险：** 1. **区域细分粒度** - 过细可能导致操作复杂 - 建议：限制最大区域数量（如10个） 2. **审批流程僵化** - 固定流程可能不适合所有项目 - 建议：支持自定义审批流程 ### 优化建议 **性能优化：** - 使用虚拟滚动加载大量素材 - 图片懒加载和预加载策略 - 标注数据分页加载 - 实施增量更新策略 **用户体验优化：** - 添加操作引导（首次使用） - 提供快捷键支持 - 实现撤销/重做功能 - 添加实时保存提示 **扩展性建议：** - 标注工具支持插件扩展 - 区域类型可配置 - 审批流程可自定义 - 支持第三方集成（如AI分析） --- ## 8. 总结本优化方案围绕三个核心目标： 1. **素材分析完全展示** - 通过增强色彩、形体、质感、纹理、灯光五个维度的可视化和数据完整性，确保所有采集的参考信息都能充分展示。 2. **需求映射后台化** - 将用户不需要直接操作的需求映射功能隐藏，改为自动触发，简化用户流程。 3. **协作验证深度重构** - 这是最核心的改进，通过五维验证、素材关联、标注工具、区域细分、分工管理等功能，实现真正的协作式需求验证。实施建议采用分阶段推进，优先完成素材分析增强和协作验证重构，这两个是高优先级且用户价值最大的功能。 --- ## 附录 ### A. 相关技术栈 - **Angular**: v16+ - **Angular CDK**: Drag&Drop模块 - **D3.js**: 色轮可视化 - **ECharts**: 图表绘制 - **Fabric.js/Konva.js**: 标注工具（可选） - **RxJS**: 响应式数据流 ### B. 参考资源 - [Angular CDK Drag and Drop](https://material.angular.io/cdk/drag-drop/overview) - [D3.js Color Wheel Tutorial](https://observablehq.com/@d3/color-wheel) - [ECharts Pie Chart](https://echarts.apache.org/examples/en/editor.html?c=pie-simple) - [Fabric.js Documentation](http://fabricjs.com/docs/) ### C. 联系与支持如有疑问或需要进一步讨论，请联系： - 项目负责人：[待填写] - 技术负责人：[待填写] - 设计负责人：[待填写] --- **文档版本**: v1.0 **创建日期**: {{ currentDate }} **最后更新**: {{ currentDate }} **状态**: 待审核