feat(project-detail): 添加客户信息卡片折叠功能及样式优化

- 实现客户信息卡片的展开/收起功能，添加状态管理
- 优化卡片样式，包括交互效果和响应式布局
- 新增重置方案分析状态的方法
- 重构提案确认卡片样式，增强视觉层次和可读性

src/app/pages/designer/project-detail/debug-styles.scss

@@ -201,6 +201,43 @@
   border: 1px solid #eaeaea !important;
 }
 
+/* 客户信息卡片样式优化 */
+.left-column .project-info-card {
+  background: white !important;
+  border-radius: 8px !important;
+  padding: 12px !important;
+  margin-bottom: 16px !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+  border: 1px solid #eaeaea !important;
+}
+
+/* 客户信息卡片标题栏交互效果 */
+.left-column .project-info-card .card-header {
+  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
+  border-radius: 6px !important;
+  padding: 8px 12px !important;
+  margin: -8px -8px 8px -8px !important;
+}
+
+.left-column .project-info-card .card-header:hover {
+  background-color: #f8f9fa !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+}
+
+.left-column .project-info-card .card-header:active {
+  background-color: #e9ecef !important;
+  transform: translateY(1px) !important;
+}
+
+/* 箭头图标动画效果 */
+.left-column .project-info-card .toggle-icon {
+  transition: transform 0.3s ease !important;
+}
+
+.left-column .project-info-card .toggle-icon.expanded {
+  transform: rotate(180deg) !important;
+}
+
 /* 客户信息卡片内部元素优化 */
 .left-column .project-info-card .info-grid {
   display: grid !important;
@@ -556,19 +593,24 @@
 .left-column .project-info-card .info-grid.collapsed {
   max-height: 0 !important;
   opacity: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: none !important;
 }
 
 .left-column .project-info-card .tags-container {
   max-height: 1000px !important;
   overflow: hidden !important;
-  transition: max-height 0.3s ease, opacity 0.3s ease !important;
+  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease !important;
   opacity: 1 !important;
 }
 
 .left-column .project-info-card .tags-container.collapsed {
   max-height: 0 !important;
   opacity: 0 !important;
-  margin-top: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
 }
 
 @keyframes spin {
@@ -1494,8 +1536,8 @@
   align-items: stretch !important;
 }
 
-/* 客户信息卡片设定统一的最低高度以填补左侧空白 */
-.left-column .project-info-card.card {
+/* 客户信息卡片设定统一的最低高度以填补左侧空白 - 仅在展开状态下应用 */
+.left-column .project-info-card.card:not(.collapsed-card) {
   min-height: 420px !important;
 }
 
@@ -1510,45 +1552,72 @@
 
 /* 根据屏幕尺寸微调高度，保证在大屏下更饱满，在小屏下不压迫 */
 @media (min-width: 1920px) {
-  .left-column .project-info-card.card { min-height: 480px !important; }
+  .left-column .project-info-card.card:not(.collapsed-card) { min-height: 480px !important; }
   .right-column .stage-progress-container:has(#stage-requirements-talk):has(#stage-proposal-confirm) .vertical-stage-block { min-height: 480px !important; }
 }
 
 @media (max-width: 1365px) {
-  .left-column .project-info-card.card { min-height: 360px !important; }
+  .left-column .project-info-card.card:not(.collapsed-card) { min-height: 360px !important; }
   .right-column .stage-progress-container:has(#stage-requirements-talk):has(#stage-proposal-confirm) .vertical-stage-block { min-height: 360px !important; }
 
 /* 方案确认卡片样式 - 与客户信息卡片保持一致 */
+/* 方案确认卡片样式 - 独立样式，不继承通用卡片样式 */
 .left-column .proposal-confirm-card {
   background-color: white !important;
-  border-radius: 8px !important;
-  padding: 16px !important;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-  border: 1px solid #eaeaea !important;
-  margin-top: 16px !important;
+  border-radius: 16px !important; /* 与客户信息卡片区分 */
+  padding: 28px !important; /* 更大的内边距 */
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important; /* 更深的阴影 */
+  border: 2px solid #f0f0f0 !important; /* 更粗的边框 */
+  margin-top: 24px !important;
+  margin-bottom: 24px !important;
+  max-height: 650px !important;
+  overflow-y: auto !important;
+  position: relative !important;
+  
+  /* 添加独特的视觉标识 */
+  &::before {
+    content: "" !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    height: 6px !important;
+    background: linear-gradient(90deg, #4CAF50, #2196F3) !important;
+    border-top-left-radius: 14px !important;
+    border-top-right-radius: 14px !important;
+  }
 }
 
+/* 方案确认卡片头部样式 - 独立设计 */
 .left-column .proposal-confirm-card .card-header {
   display: flex !important;
   justify-content: space-between !important;
   align-items: center !important;
-  margin-bottom: 16px !important;
-  padding-bottom: 12px !important;
-  border-bottom: 1px solid #f0f0f0 !important;
+  margin-bottom: 24px !important;
+  padding-bottom: 20px !important;
+  border-bottom: 2px solid #f5f5f5 !important; /* 更粗的分割线 */
+  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%) !important;
+  border-radius: 12px !important;
+  padding: 16px 20px !important;
+  margin: -8px -8px 24px -8px !important;
 }
 
+/* 方案确认卡片标题样式 - 独立设计 */
 .left-column .proposal-confirm-card .card-header h2 {
   margin: 0 !important;
-  font-size: 18px !important;
-  font-weight: 600 !important;
-  color: #262626 !important;
+  font-size: 22px !important; /* 更大的字体 */
+  font-weight: 700 !important; /* 更粗的字体 */
+  color: #2c3e50 !important; /* 独特的颜色 */
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+  line-height: 1.4 !important;
 }
 
 .left-column .proposal-confirm-card .sync-status {
   display: flex !important;
   align-items: center !important;
-  font-size: 12px !important;
+  font-size: 13px !important;
   color: #8c8c8c !important;
+  font-weight: 500 !important;
 }
 
 .left-column .proposal-confirm-card .info-grid {
@@ -1631,9 +1700,435 @@
   line-height: 1.4 !important;
 }
 
-.left-column .proposal-confirm-card .progress-info {
+/* 方案展示区域样式 */
+.left-column .proposal-confirm-card .proposal-display {
+  margin-top: 16px !important;
+}
+
+.left-column .proposal-confirm-card .proposal-overview {
+  margin-bottom: 24px !important;
+  padding: 16px !important;
+  background: #f8f9fa !important;
+  border-radius: 8px !important;
+  border: 1px solid #e9ecef !important;
+}
+
+.left-column .proposal-confirm-card .overview-header {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: flex-start !important;
+  margin-bottom: 16px !important;
+}
+
+.left-column .proposal-confirm-card .overview-header h3 {
+  margin: 0 !important;
+  font-size: 18px !important;
+  font-weight: 600 !important;
+  color: #262626 !important;
+  line-height: 1.4 !important;
+}
+
+.left-column .proposal-confirm-card .proposal-meta {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: flex-end !important;
+  gap: 4px !important;
+}
+
+.left-column .proposal-confirm-card .proposal-meta .version,
+.left-column .proposal-confirm-card .proposal-meta .feasibility-score {
+  font-size: 12px !important;
+  padding: 4px 8px !important;
+  border-radius: 4px !important;
+  font-weight: 500 !important;
+}
+
+.left-column .proposal-confirm-card .proposal-meta .version {
+  background: #e6f7ff !important;
+  color: #1890ff !important;
+}
+
+.left-column .proposal-confirm-card .proposal-meta .feasibility-score {
+  background: #f6ffed !important;
+  color: #52c41a !important;
+}
+
+.left-column .proposal-confirm-card .quick-summary {
+  display: grid !important;
+  grid-template-columns: 1fr !important;
+  gap: 8px !important;
+}
+
+.left-column .proposal-confirm-card .summary-item {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 8px 12px !important;
+  background: white !important;
+  border-radius: 6px !important;
+  border: 1px solid #e9ecef !important;
+}
+
+.left-column .proposal-confirm-card .summary-item .label {
+  font-size: 13px !important;
+  color: #6c757d !important;
+  font-weight: 500 !important;
+}
+
+.left-column .proposal-confirm-card .summary-item .value {
+  font-size: 13px !important;
+  color: #212529 !important;
+  font-weight: 600 !important;
+}
+
+/* 详细方案内容样式 */
+.left-column .proposal-confirm-card .proposal-details {
+  margin-top: 20px !important;
+}
+
+.left-column .proposal-confirm-card .detail-section {
+  margin-bottom: 24px !important;
+  padding: 16px !important;
+  background: white !important;
+  border: 1px solid #e9ecef !important;
+  border-radius: 8px !important;
+}
+
+.left-column .proposal-confirm-card .section-header {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  margin-bottom: 16px !important;
+  padding-bottom: 12px !important;
+  border-bottom: 1px solid #f0f0f0 !important;
+}
+
+.left-column .proposal-confirm-card .section-header h4 {
+  margin: 0 !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  color: #262626 !important;
+  line-height: 1.4 !important;
+}
+
+.left-column .proposal-confirm-card .section-count,
+.left-column .proposal-confirm-card .style-name,
+.left-column .proposal-confirm-card .harmony-type,
+.left-column .proposal-confirm-card .total-area {
+  font-size: 12px !important;
+  padding: 4px 8px !important;
+  background: #f0f0f0 !important;
+  color: #595959 !important;
+  border-radius: 4px !important;
+  font-weight: 500 !important;
+}
+
+/* 材质网格样式 */
+.left-column .proposal-confirm-card .materials-grid {
+  display: grid !important;
+  grid-template-columns: 1fr !important;
+  gap: 12px !important;
+}
+
+.left-column .proposal-confirm-card .material-card {
+  padding: 12px !important;
+  background: #f8f9fa !important;
+  border: 1px solid #e9ecef !important;
+  border-radius: 6px !important;
+}
+
+.left-column .proposal-confirm-card .material-header {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  margin-bottom: 8px !important;
+}
+
+.left-column .proposal-confirm-card .material-header h5 {
+  margin: 0 !important;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  color: #262626 !important;
+}
+
+.left-column .proposal-confirm-card .usage-percentage {
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  color: #1890ff !important;
+}
+
+.left-column .proposal-confirm-card .material-specs {
+  display: grid !important;
+  grid-template-columns: 1fr 1fr !important;
+  gap: 6px !important;
+  margin-bottom: 8px !important;
+}
+
+.left-column .proposal-confirm-card .spec-item {
+  display: flex !important;
+  justify-content: space-between !important;
+  font-size: 11px !important;
+}
+
+.left-column .proposal-confirm-card .spec-label {
+  color: #6c757d !important;
+  font-weight: 500 !important;
+}
+
+.left-column .proposal-confirm-card .spec-value {
+  color: #212529 !important;
+  font-weight: 600 !important;
+}
+
+.left-column .proposal-confirm-card .material-properties {
+  display: flex !important;
+  gap: 6px !important;
+  flex-wrap: wrap !important;
+}
+
+.left-column .proposal-confirm-card .property-tag {
+  font-size: 10px !important;
+  padding: 2px 6px !important;
+  background: #e6f7ff !important;
+  color: #1890ff !important;
+  border-radius: 3px !important;
+  font-weight: 500 !important;
+}
+
+/* 设计风格特征样式 */
+.left-column .proposal-confirm-card .style-elements {
+  margin-bottom: 16px !important;
+}
+
+.left-column .proposal-confirm-card .style-element {
+  margin-bottom: 12px !important;
+  padding: 10px !important;
+  background: #f8f9fa !important;
+  border-radius: 6px !important;
+  border: 1px solid #e9ecef !important;
+}
+
+.left-column .proposal-confirm-card .element-header {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  margin-bottom: 6px !important;
+}
+
+.left-column .proposal-confirm-card .element-name {
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  color: #262626 !important;
+}
+
+.left-column .proposal-confirm-card .influence-score {
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  color: #1890ff !important;
+}
+
+.left-column .proposal-confirm-card .element-description {
+  font-size: 11px !important;
+  color: #6c757d !important;
+  margin-bottom: 6px !important;
+  line-height: 1.4 !important;
+}
+
+.left-column .proposal-confirm-card .influence-bar {
+  height: 4px !important;
+  background: #e9ecef !important;
+  border-radius: 2px !important;
+  overflow: hidden !important;
+}
+
+.left-column .proposal-confirm-card .influence-fill {
+  height: 100% !important;
+  background: #1890ff !important;
+  transition: width 0.3s ease !important;
+}
+
+.left-column .proposal-confirm-card .style-characteristics {
+  display: grid !important;
+  grid-template-columns: 1fr !important;
+  gap: 6px !important;
+}
+
+.left-column .proposal-confirm-card .characteristic-item {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 6px 10px !important;
+  background: white !important;
+  border-radius: 4px !important;
+  border: 1px solid #e9ecef !important;
+  font-size: 11px !important;
+}
+
+.left-column .proposal-confirm-card .char-feature {
+  color: #6c757d !important;
+  font-weight: 500 !important;
+}
+
+.left-column .proposal-confirm-card .char-value {
+  color: #212529 !important;
+  font-weight: 600 !important;
+}
+
+/* 色彩搭配方案样式 */
+.left-column .proposal-confirm-card .color-palette {
+  display: grid !important;
+  grid-template-columns: 1fr !important;
+  gap: 10px !important;
+  margin-bottom: 16px !important;
+}
+
+.left-column .proposal-confirm-card .color-item {
+  display: flex !important;
+  align-items: center !important;
+  padding: 10px !important;
+  background: #f8f9fa !important;
+  border-radius: 6px !important;
+  border: 1px solid #e9ecef !important;
+  gap: 12px !important;
+}
+
+.left-column .proposal-confirm-card .color-swatch {
+  width: 32px !important;
+  height: 32px !important;
+  border-radius: 4px !important;
+  border: 1px solid #ddd !important;
+  flex-shrink: 0 !important;
+}
+
+.left-column .proposal-confirm-card .color-info {
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 2px !important;
+}
+
+.left-column .proposal-confirm-card .color-name {
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  color: #262626 !important;
+}
+
+.left-column .proposal-confirm-card .color-percentage {
   font-size: 12px !important;
+  font-weight: 600 !important;
+  color: #1890ff !important;
+}
+
+.left-column .proposal-confirm-card .color-role {
+  font-size: 11px !important;
+  color: #6c757d !important;
+}
+
+.left-column .proposal-confirm-card .color-codes {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 2px !important;
+  font-size: 10px !important;
+  color: #8c8c8c !important;
+  font-family: monospace !important;
+}
+
+.left-column .proposal-confirm-card .color-psychology {
+  display: grid !important;
+  grid-template-columns: 1fr 1fr !important;
+  gap: 8px !important;
+}
+
+.left-column .proposal-confirm-card .psychology-item {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 8px 10px !important;
+  background: white !important;
+  border-radius: 4px !important;
+  border: 1px solid #e9ecef !important;
+  font-size: 11px !important;
+}
+
+.left-column .proposal-confirm-card .psychology-item .label {
+  color: #6c757d !important;
+  font-weight: 500 !important;
+}
+
+.left-column .proposal-confirm-card .psychology-item .value {
+  color: #212529 !important;
+  font-weight: 600 !important;
+}
+
+/* 空间尺寸数据样式 */
+.left-column .proposal-confirm-card .space-dimensions {
+  display: grid !important;
+  grid-template-columns: 1fr 1fr !important;
+  gap: 8px !important;
+  margin-bottom: 16px !important;
+}
+
+.left-column .proposal-confirm-card .dimension-item {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 8px 10px !important;
+  background: #f8f9fa !important;
+  border-radius: 4px !important;
+  border: 1px solid #e9ecef !important;
+  font-size: 11px !important;
+}
+
+.left-column .proposal-confirm-card .dim-label {
+  color: #6c757d !important;
+  font-weight: 500 !important;
+}
+
+.left-column .proposal-confirm-card .dim-value {
+  color: #212529 !important;
+  font-weight: 600 !important;
+}
+
+.left-column .proposal-confirm-card .functional-zones {
+  display: grid !important;
+  grid-template-columns: 1fr !important;
+  gap: 10px !important;
+}
+
+.left-column .proposal-confirm-card .zone-card {
+  padding: 12px !important;
+  background: #f8f9fa !important;
+  border-radius: 6px !important;
+  border: 1px solid #e9ecef !important;
+}
+
+.left-column .proposal-confirm-card .zone-header {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  margin-bottom: 8px !important;
+}
+
+.left-column .proposal-confirm-card .zone-header h5 {
+  margin: 0 !important;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  color: #262626 !important;
+}
+
+.left-column .proposal-confirm-card .zone-stats {
+  display: flex !important;
+  gap: 8px !important;
+  font-size: 11px !important;
+}
+
+.left-column .proposal-confirm-card .zone-area {
   color: #1890ff !important;
+  font-weight: 600 !important;
+}
+
+.left-column .proposal-confirm-card .zone-percentage {
+  color: #6c757d !important;
   font-weight: 500 !important;
 }
 }

src/app/pages/designer/project-detail/project-detail.html

@@ -190,7 +190,7 @@
         <div class="main-content-layout">
           <!-- 左侧保留 -->
           <div class="left-column">
-            <div class="project-info-card card">
+            <div class="project-info-card card" [class.collapsed-card]="!isCustomerInfoExpanded">
               <div class="card-header" (click)="toggleCustomerInfo()" style="cursor: pointer;">
                 <h2>客户信息</h2>
                 <div class="header-actions">

src/app/pages/designer/project-detail/project-detail.ts

@@ -217,7 +217,7 @@ export class ProjectDetail implements OnInit, OnDestroy {
   // 客户信息卡片展开/收起状态
   isCustomerInfoExpanded: boolean = false;
   
-  // 新增：方案分析数据
+  // 新增：方案分析相关数据
   proposalAnalysis: ProposalAnalysis | null = null;
   isAnalyzing: boolean = false;
   analysisProgress: number = 0;
@@ -423,6 +423,9 @@ export class ProjectDetail implements OnInit, OnDestroy {
     // 初始化需求关键信息数据
     this.ensureRequirementData();
     
+    // 重置方案分析状态，确保需求信息展示区域能够显示
+    this.resetProposalAnalysis();
+    
     this.route.paramMap.subscribe(params => {
       this.projectId = params.get('id') || '';
       // 根据当前URL检测视图上下文
@@ -2639,12 +2642,18 @@ export class ProjectDetail implements OnInit, OnDestroy {
     this.isCustomerInfoExpanded = !this.isCustomerInfoExpanded;
   }
 
+  // 新增：重置方案分析状态的方法
+  resetProposalAnalysis(): void {
+    this.proposalAnalysis = null;
+    this.isAnalyzing = false;
+    this.analysisProgress = 0;
+    console.log('方案分析状态已重置');
+  }
+
   // 新增：模拟素材解析方法
   startMaterialAnalysis(): void {
     this.isAnalyzing = true;
     this.analysisProgress = 0;
-    
-    // 模拟分析进度
     const progressInterval = setInterval(() => {
       this.analysisProgress += Math.random() * 15;
       if (this.analysisProgress >= 100) {