|
|
@@ -267,8 +267,250 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 需求信息展示区域 -->
|
|
|
- @if (areRequiredStagesCompleted()) {
|
|
|
+ <!-- 素材解析状态 -->
|
|
|
+ @if (isAnalyzing) {
|
|
|
+ <div class="analysis-progress">
|
|
|
+ <div class="progress-header">
|
|
|
+ <h4>正在解析素材...</h4>
|
|
|
+ <span class="progress-percentage">{{ analysisProgress.toFixed(0) }}%</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress-fill" [style.width.%]="analysisProgress"></div>
|
|
|
+ </div>
|
|
|
+ <p class="progress-description">AI正在分析您的需求，生成专属设计方案</p>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+
|
|
|
+ <!-- 方案展示区域 -->
|
|
|
+ @if (proposalAnalysis && !isAnalyzing) {
|
|
|
+ <div class="proposal-display">
|
|
|
+ <!-- 方案概览 -->
|
|
|
+ <div class="proposal-overview">
|
|
|
+ <div class="overview-header">
|
|
|
+ <h3>{{ proposalAnalysis.name }}</h3>
|
|
|
+ <div class="proposal-meta">
|
|
|
+ <span class="version">{{ proposalAnalysis.version }}</span>
|
|
|
+ <span class="feasibility-score">可行性: {{ proposalAnalysis.feasibility.overall }}%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 快速摘要 -->
|
|
|
+ <div class="quick-summary">
|
|
|
+ <div class="summary-item">
|
|
|
+ <span class="label">设计风格</span>
|
|
|
+ <span class="value">{{ getStyleSummary() }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="summary-item">
|
|
|
+ <span class="label">色彩方案</span>
|
|
|
+ <span class="value">{{ getColorSummary() }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="summary-item">
|
|
|
+ <span class="label">空间效率</span>
|
|
|
+ <span class="value">{{ getSpaceEfficiency() }}%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 详细方案内容 -->
|
|
|
+ <div class="proposal-details">
|
|
|
+ <!-- 材质规格与分类 -->
|
|
|
+ <div class="detail-section">
|
|
|
+ <div class="section-header">
|
|
|
+ <h4>材质规格与分类</h4>
|
|
|
+ <span class="section-count">{{ proposalAnalysis.materials.length }} 类材质</span>
|
|
|
+ </div>
|
|
|
+ <div class="materials-grid">
|
|
|
+ @for (material of proposalAnalysis.materials; track material.category) {
|
|
|
+ <div class="material-card" [class]="material.usage.priority">
|
|
|
+ <div class="material-header">
|
|
|
+ <h5>{{ material.category }}</h5>
|
|
|
+ <span class="usage-percentage">{{ material.usage.percentage }}%</span>
|
|
|
+ </div>
|
|
|
+ <div class="material-specs">
|
|
|
+ <div class="spec-item">
|
|
|
+ <span class="spec-label">类型</span>
|
|
|
+ <span class="spec-value">{{ material.specifications.type }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="spec-item">
|
|
|
+ <span class="spec-label">等级</span>
|
|
|
+ <span class="spec-value">{{ material.specifications.grade }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="spec-item">
|
|
|
+ <span class="spec-label">应用区域</span>
|
|
|
+ <span class="spec-value">{{ material.usage.area }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="material-properties">
|
|
|
+ <span class="property-tag">{{ material.properties.texture }}</span>
|
|
|
+ <span class="property-tag">{{ material.properties.color }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 设计风格特征 -->
|
|
|
+ <div class="detail-section">
|
|
|
+ <div class="section-header">
|
|
|
+ <h4>设计风格特征</h4>
|
|
|
+ <span class="style-name">{{ proposalAnalysis.designStyle.primaryStyle }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="style-elements">
|
|
|
+ @for (element of proposalAnalysis.designStyle.styleElements; track element.element) {
|
|
|
+ <div class="style-element">
|
|
|
+ <div class="element-header">
|
|
|
+ <span class="element-name">{{ element.element }}</span>
|
|
|
+ <span class="influence-score">{{ element.influence }}%</span>
|
|
|
+ </div>
|
|
|
+ <div class="element-description">{{ element.description }}</div>
|
|
|
+ <div class="influence-bar">
|
|
|
+ <div class="influence-fill" [style.width.%]="element.influence"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <div class="style-characteristics">
|
|
|
+ @for (char of proposalAnalysis.designStyle.characteristics; track char.feature) {
|
|
|
+ <div class="characteristic-item" [class]="char.importance">
|
|
|
+ <span class="char-feature">{{ char.feature }}</span>
|
|
|
+ <span class="char-value">{{ char.value }}</span>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 色彩搭配方案及占比分析 -->
|
|
|
+ <div class="detail-section">
|
|
|
+ <div class="section-header">
|
|
|
+ <h4>色彩搭配方案及占比分析</h4>
|
|
|
+ <span class="harmony-type">{{ proposalAnalysis.colorScheme.harmony.type }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="color-palette">
|
|
|
+ @for (color of proposalAnalysis.colorScheme.palette; track color.hex) {
|
|
|
+ <div class="color-item" [class]="color.role">
|
|
|
+ <div class="color-swatch" [style.background-color]="color.hex"></div>
|
|
|
+ <div class="color-info">
|
|
|
+ <div class="color-name">{{ color.color }}</div>
|
|
|
+ <div class="color-percentage">{{ color.percentage }}%</div>
|
|
|
+ <div class="color-role">{{ color.role }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="color-codes">
|
|
|
+ <span class="hex-code">{{ color.hex }}</span>
|
|
|
+ <span class="rgb-code">RGB({{ color.rgb }})</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <div class="color-psychology">
|
|
|
+ <div class="psychology-item">
|
|
|
+ <span class="label">氛围营造</span>
|
|
|
+ <span class="value">{{ proposalAnalysis.colorScheme.psychology.mood }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="psychology-item">
|
|
|
+ <span class="label">空间感受</span>
|
|
|
+ <span class="value">{{ proposalAnalysis.colorScheme.psychology.atmosphere }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 空间尺寸数据及功能分区 -->
|
|
|
+ <div class="detail-section">
|
|
|
+ <div class="section-header">
|
|
|
+ <h4>空间尺寸数据及功能分区</h4>
|
|
|
+ <span class="total-area">总面积 {{ proposalAnalysis.spaceLayout.dimensions.area }}㎡</span>
|
|
|
+ </div>
|
|
|
+ <div class="space-dimensions">
|
|
|
+ <div class="dimension-item">
|
|
|
+ <span class="dim-label">长度</span>
|
|
|
+ <span class="dim-value">{{ proposalAnalysis.spaceLayout.dimensions.length }}m</span>
|
|
|
+ </div>
|
|
|
+ <div class="dimension-item">
|
|
|
+ <span class="dim-label">宽度</span>
|
|
|
+ <span class="dim-value">{{ proposalAnalysis.spaceLayout.dimensions.width }}m</span>
|
|
|
+ </div>
|
|
|
+ <div class="dimension-item">
|
|
|
+ <span class="dim-label">层高</span>
|
|
|
+ <span class="dim-value">{{ proposalAnalysis.spaceLayout.dimensions.height }}m</span>
|
|
|
+ </div>
|
|
|
+ <div class="dimension-item">
|
|
|
+ <span class="dim-label">体积</span>
|
|
|
+ <span class="dim-value">{{ proposalAnalysis.spaceLayout.dimensions.volume }}m³</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="functional-zones">
|
|
|
+ @for (zone of proposalAnalysis.spaceLayout.functionalZones; track zone.zone) {
|
|
|
+ <div class="zone-card">
|
|
|
+ <div class="zone-header">
|
|
|
+ <h5>{{ zone.zone }}</h5>
|
|
|
+ <div class="zone-stats">
|
|
|
+ <span class="zone-area">{{ zone.area }}㎡</span>
|
|
|
+ <span class="zone-percentage">{{ zone.percentage }}%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="zone-requirements">
|
|
|
+ <div class="requirements-label">功能需求</div>
|
|
|
+ <div class="requirements-tags">
|
|
|
+ @for (req of zone.requirements; track req) {
|
|
|
+ <span class="requirement-tag">{{ req }}</span>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="zone-furniture">
|
|
|
+ <div class="furniture-label">家具配置</div>
|
|
|
+ <div class="furniture-list">
|
|
|
+ @for (furniture of zone.furniture; track furniture; let isLast = $last) {
|
|
|
+ {{ furniture }}@if (!isLast) {、}
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 预算与时间线 -->
|
|
|
+ <div class="detail-section">
|
|
|
+ <div class="section-header">
|
|
|
+ <h4>预算与时间线</h4>
|
|
|
+ <span class="total-budget">总预算 ¥{{ proposalAnalysis.budget.total.toLocaleString() }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="budget-breakdown">
|
|
|
+ @for (item of proposalAnalysis.budget.breakdown; track item.category) {
|
|
|
+ <div class="budget-item">
|
|
|
+ <div class="budget-category">{{ item.category }}</div>
|
|
|
+ <div class="budget-amount">¥{{ item.amount.toLocaleString() }}</div>
|
|
|
+ <div class="budget-percentage">{{ item.percentage }}%</div>
|
|
|
+ <div class="budget-bar">
|
|
|
+ <div class="budget-fill" [style.width.%]="item.percentage"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <div class="timeline">
|
|
|
+ @for (phase of proposalAnalysis.timeline; track phase.phase) {
|
|
|
+ <div class="timeline-item">
|
|
|
+ <div class="phase-name">{{ phase.phase }}</div>
|
|
|
+ <div class="phase-duration">{{ phase.duration }}天</div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 方案操作按钮 -->
|
|
|
+ <div class="proposal-actions">
|
|
|
+ <button class="confirm-btn primary" (click)="confirmProposal()">
|
|
|
+ 确认此方案
|
|
|
+ </button>
|
|
|
+ <button class="adjust-btn secondary" (click)="startMaterialAnalysis()">
|
|
|
+ 重新分析
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+
|
|
|
+ <!-- 需求信息展示区域（原有内容，当没有方案分析时显示） -->
|
|
|
+ @if (areRequiredStagesCompleted() && !proposalAnalysis && !isAnalyzing) {
|
|
|
<div class="info-grid">
|
|
|
<!-- 色调信息 -->
|
|
|
@if (requirementKeyInfo.colorAtmosphere.description) {
|
|
|
@@ -347,13 +589,13 @@
|
|
|
}
|
|
|
</div>
|
|
|
|
|
|
- <!-- 确认方案按钮 -->
|
|
|
+ <!-- 开始分析按钮 -->
|
|
|
<div class="proposal-actions">
|
|
|
- <button class="confirm-btn" (click)="confirmProposal()">
|
|
|
- 确认方案
|
|
|
+ <button class="confirm-btn" (click)="startMaterialAnalysis()">
|
|
|
+ 开始素材解析
|
|
|
</button>
|
|
|
</div>
|
|
|
- } @else {
|
|
|
+ } @else if (!areRequiredStagesCompleted()) {
|
|
|
<!-- 等待状态 -->
|
|
|
<div class="waiting-state">
|
|
|
<div class="waiting-content">
|
