feet:custoernew

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

@@ -178,15 +178,12 @@
                 <div class="info-grid">
                   <!-- 显示订单创建时填写的客户信息，如果有的话 -->
                   @if (orderCreationData?.customerInfo) {
-                    <div class="info-item key-info"><label>客户姓名</label><span>{{ orderCreationData.customerInfo.name }}</span></div>
-                    <div class="info-item key-info"><label>手机号码</label><span>{{ orderCreationData.customerInfo.phone }}</span></div>
                     @if (orderCreationData.customerInfo.wechat) {
                       <div class="info-item"><label>微信号</label><span>{{ orderCreationData.customerInfo.wechat }}</span></div>
                     }
                     <div class="info-item"><label>客户类型</label><span>{{ orderCreationData.customerInfo.customerType }}</span></div>
                   } @else {
                     <!-- 默认显示项目信息 -->
-                    <div class="info-item key-info"><label>客户姓名</label><span>{{ project.customerName }}</span></div>
                     <div class="info-item key-info"><label>项目负责人</label><span>{{ project.assigneeName }}</span></div>
                   }
                   <div class="info-item"><label>项目创建</label><span>{{ formatDate(project.createdAt) }}</span></div>
@@ -220,28 +217,40 @@
                         <div class="order-requirement-info">
                           <h5>订单创建阶段需求</h5>
                           <div class="key-info-grid">
-                            @if (orderCreationData.requirementInfo.decorationType) {
+                            @if (orderCreationData.requirementInfo.downPayment) {
                               <div class="info-item">
-                                <span class="info-label">装修类型</span>
-                                <span class="info-value">{{ orderCreationData.requirementInfo.decorationType }}</span>
+                                <span class="info-label">定金金额</span>
+                                <span class="info-value">¥{{ orderCreationData.requirementInfo.downPayment }}</span>
                               </div>
                             }
-                            @if (orderCreationData.requirementInfo.downPayment) {
+                            @if (orderCreationData.requirementInfo.budget) {
                               <div class="info-item">
-                                <span class="info-label">首付款</span>
-                                <span class="info-value">¥{{ orderCreationData.requirementInfo.downPayment }}</span>
+                                <span class="info-label">预算范围</span>
+                                <span class="info-value">¥{{ orderCreationData.requirementInfo.budget }}</span>
+                              </div>
+                            }
+                            @if (orderCreationData.requirementInfo.area) {
+                              <div class="info-item">
+                                <span class="info-label">房屋面积</span>
+                                <span class="info-value">{{ orderCreationData.requirementInfo.area }}㎡</span>
+                              </div>
+                            }
+                            @if (orderCreationData.requirementInfo.houseType) {
+                              <div class="info-item">
+                                <span class="info-label">房屋类型</span>
+                                <span class="info-value">{{ orderCreationData.requirementInfo.houseType }}</span>
                               </div>
                             }
-                            @if (orderCreationData.requirementInfo.firstDraftDate) {
+                            @if (orderCreationData.requirementInfo.smallImageTime) {
                               <div class="info-item">
-                                <span class="info-label">首稿时间</span>
-                                <span class="info-value">{{ orderCreationData.requirementInfo.firstDraftDate }}</span>
+                                <span class="info-label">小图时间</span>
+                                <span class="info-value">{{ formatDate(orderCreationData.requirementInfo.smallImageTime) }}</span>
                               </div>
                             }
-                            @if (orderCreationData.requirementInfo.style) {
+                            @if (orderCreationData.requirementInfo.largeImageTime) {
                               <div class="info-item">
-                                <span class="info-label">装修风格</span>
-                                <span class="info-value">{{ orderCreationData.requirementInfo.style }}</span>
+                                <span class="info-label">大图时间</span>
+                                <span class="info-value">{{ formatDate(orderCreationData.requirementInfo.largeImageTime) }}</span>
                               </div>
                             }
                             @if (orderCreationData.requirementInfo.spaceRequirements) {
@@ -250,6 +259,30 @@
                                 <span class="info-value">{{ orderCreationData.requirementInfo.spaceRequirements }}</span>
                               </div>
                             }
+                            @if (orderCreationData.requirementInfo.designAngles) {
+                              <div class="info-item">
+                                <span class="info-label">设计角度</span>
+                                <span class="info-value">{{ orderCreationData.requirementInfo.designAngles }}</span>
+                              </div>
+                            }
+                            @if (orderCreationData.requirementInfo.specialAreaHandling) {
+                              <div class="info-item">
+                                <span class="info-label">特殊区域处理</span>
+                                <span class="info-value">{{ orderCreationData.requirementInfo.specialAreaHandling }}</span>
+                              </div>
+                            }
+                            @if (orderCreationData.requirementInfo.materialRequirements) {
+                              <div class="info-item">
+                                <span class="info-label">材质要求</span>
+                                <span class="info-value">{{ orderCreationData.requirementInfo.materialRequirements }}</span>
+                              </div>
+                            }
+                            @if (orderCreationData.requirementInfo.lightingRequirements) {
+                              <div class="info-item">
+                                <span class="info-label">灯光要求</span>
+                                <span class="info-value">{{ orderCreationData.requirementInfo.lightingRequirements }}</span>
+                              </div>
+                            }
                           </div>
                           
                           <!-- 显示偏好标签 -->
@@ -872,7 +905,25 @@
                         </div>
                         @if (canEditSection('aftercare')) {
                           <div class="upload-actions">
-                            <button class="primary-btn" (click)="confirmSettlement()">确认尾款结算完成</button>
+                            <button 
+                              class="primary-btn" 
+                              [class.completed]="isSettlementCompleted"
+                              [disabled]="isConfirmingSettlement"
+                              (click)="confirmSettlement()">
+                              @if (isConfirmingSettlement) {
+                                <span class="loading-spinner"></span>
+                                确认中...
+                              } @else if (isSettlementCompleted) {
+                                <span class="check-icon">✓</span>
+                                已确认完成
+                              } @else {
+                                确认尾款结算完成
+                              }
+                            </button>
+                            <button class="secondary-btn" (click)="uploadPaymentProof()">
+                              <span class="upload-icon">📎</span>
+                              上传支付凭证
+                            </button>
                           </div>
                         }
                       } @else if (stage === '客户评价') {

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

@@ -2161,63 +2161,126 @@
     margin-top: 16px;
     
     .secondary-btn {
-      // 保持原有的按钮样式，但调整为辅助按钮
+      // 参考售后板块的按钮样式设计
       padding: 8px 16px !important;
       min-height: 36px;
       font-size: 14px !important;
       font-weight: 500 !important;
       
-      background: #f6f8fa !important;
-      color: #24292f !important;
-      border: 1px solid #d0d7de !important;
-      border-radius: 8px !important;
+      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
+      color: #495057 !important;
+      border: 1px solid rgba(0, 122, 255, 0.2) !important;
+      border-radius: 12px !important;
       
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+      box-shadow: 
+        0 2px 8px rgba(0, 0, 0, 0.08),
+        0 1px 3px rgba(0, 0, 0, 0.1) !important;
       
-      transition: all 0.2s ease !important;
+      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+      cursor: pointer;
+      
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      
+      .upload-icon {
+        font-size: 16px;
+        color: #007aff;
+      }
       
       &:hover {
-        background: #f3f4f6 !important;
-        border-color: #c7c7c7 !important;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
+        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
+        border-color: #007aff !important;
+        box-shadow: 
+          0 4px 16px rgba(0, 122, 255, 0.15),
+          0 2px 8px rgba(0, 0, 0, 0.1) !important;
+        transform: translateY(-2px);
+        color: #007aff !important;
       }
       
       &:active {
-        transform: translateY(1px) !important;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+        transform: translateY(0px) !important;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
       }
     }
     
     .primary-btn {
+      // 参考售后板块的主要按钮样式
       padding: 8px 16px;
       min-height: 36px;
       font-size: 14px;
-      font-weight: 500;
+      font-weight: 600;
       
-      background: #4A90E2;
+      background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
       color: white;
-      border: 1px solid #4A90E2;
-      border-radius: 8px;
+      border: 1px solid #007aff;
+      border-radius: 12px;
       
-      box-shadow: 0 1px 3px rgba(74, 144, 226, 0.3);
+      box-shadow: 
+        0 2px 8px rgba(0, 122, 255, 0.3),
+        0 1px 3px rgba(0, 122, 255, 0.2);
       
-      transition: all 0.2s ease;
+      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
       cursor: pointer;
       
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      
+      .loading-spinner {
+        width: 14px;
+        height: 14px;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        border-top: 2px solid white;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+      
+      .check-icon {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      
+      &.completed {
+        background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
+        border-color: #34c759;
+        box-shadow: 
+          0 2px 8px rgba(52, 199, 89, 0.3),
+          0 1px 3px rgba(52, 199, 89, 0.2);
+        
+        &:hover:not(:disabled) {
+          background: linear-gradient(135deg, #30d158 0%, #32d74b 100%);
+          border-color: #30d158;
+          transform: translateY(-2px);
+          box-shadow: 
+            0 4px 16px rgba(52, 199, 89, 0.4),
+            0 2px 8px rgba(52, 199, 89, 0.3);
+        }
+      }
+      
       &:hover:not(:disabled) {
-        background: #357ABD;
-        border-color: #357ABD;
-        box-shadow: 0 2px 6px rgba(74, 144, 226, 0.4);
+        background: linear-gradient(135deg, #0056b3 0%, #4a9eff 100%);
+        border-color: #0056b3;
+        transform: translateY(-2px);
+        box-shadow: 
+          0 4px 16px rgba(0, 122, 255, 0.4),
+          0 2px 8px rgba(0, 122, 255, 0.3);
       }
       
       &:disabled {
-        background: #e9ecef;
+        background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
         color: #6c757d;
         border-color: #dee2e6;
         cursor: not-allowed;
         box-shadow: none;
+        transform: none;
       }
     }
+    
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
   }
 }
 

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

@@ -84,6 +84,11 @@ export class ProjectDetail implements OnInit, OnDestroy {
   projects: {id: string, name: string, status: string}[] = [];
   showDropdown: boolean = false;
   currentStage: string = '';
+  
+  // 新增：尾款结算完成状态
+  isSettlementCompleted: boolean = false;
+  isConfirmingSettlement: boolean = false;
+  
   // 新增：10阶段顺序（串式流程）
   stageOrder: ProjectStage[] = ['订单创建', '需求沟通', '方案确认', '建模', '软装', '渲染', '后期', '尾款结算', '客户评价', '投诉处理'];
   // 新增：阶段展开状态（默认全部收起，当前阶段在数据加载后自动展开）
@@ -1414,7 +1419,21 @@ export class ProjectDetail implements OnInit, OnDestroy {
 
   // 新增：尾款结算阶段确认并自动进入下一阶段（客户评价）
   confirmSettlement(): void {
-    this.advanceToNextStage('尾款结算');
+    if (this.isConfirmingSettlement) return;
+    
+    this.isConfirmingSettlement = true;
+    
+    // 模拟API调用延迟
+    setTimeout(() => {
+      this.isSettlementCompleted = true;
+      this.isConfirmingSettlement = false;
+      
+      // 显示成功提示
+      alert('尾款结算已确认完成！');
+      
+      // 进入下一阶段
+      this.advanceToNextStage('尾款结算');
+    }, 1500);
   }
 
   // 新增：客户评价阶段确认并自动进入下一阶段（投诉处理）
@@ -1976,17 +1995,24 @@ export class ProjectDetail implements OnInit, OnDestroy {
     this.cdr.detectChanges();
   }
 
-  // 新增：更新客户信息显示
+  // 新增：更新客户信息显示 - 优化后只更新实际存在的字段
   private updateCustomerInfoDisplay(formData: any): void {
     if (formData.customerInfo) {
-      // 更新项目对象中的客户信息
+      // 更新项目对象中的客户信息 - 只更新实际存在的字段
       if (this.project) {
-        this.project.customerName = formData.customerInfo.name;
-        this.project.customerPhone = formData.customerInfo.phone;
-        this.project.customerWechat = formData.customerInfo.wechat;
-        this.project.customerType = formData.customerInfo.customerType;
-        this.project.customerSource = formData.customerInfo.source;
-        this.project.customerRemark = formData.customerInfo.remark;
+        // 由于已移除客户姓名和手机号字段，只更新微信和客户类型
+        if (formData.customerInfo.wechat) {
+          this.project.customerWechat = formData.customerInfo.wechat;
+        }
+        if (formData.customerInfo.customerType) {
+          this.project.customerType = formData.customerInfo.customerType;
+        }
+        if (formData.customerInfo.source) {
+          this.project.customerSource = formData.customerInfo.source;
+        }
+        if (formData.customerInfo.remark) {
+          this.project.customerRemark = formData.customerInfo.remark;
+        }
       }
       
       // 更新客户标签
@@ -1997,15 +2023,22 @@ export class ProjectDetail implements OnInit, OnDestroy {
         } as any;
       }
       
-      // 更新需求信息
+      // 更新需求信息 - 只更新实际存在的字段
       if (formData.requirementInfo) {
         this.project = {
           ...this.project,
-          decorationType: formData.requirementInfo.decorationType,
+          // 移除已删除的字段：decorationType, firstDraftDate, style
           downPayment: formData.requirementInfo.downPayment,
-          firstDraftDate: formData.requirementInfo.firstDraftDate,
-          style: formData.requirementInfo.style,
-          spaceRequirements: formData.requirementInfo.spaceRequirements
+          budget: formData.requirementInfo.budget,
+          area: formData.requirementInfo.area,
+          houseType: formData.requirementInfo.houseType,
+          smallImageTime: formData.requirementInfo.smallImageTime,
+          largeImageTime: formData.requirementInfo.largeImageTime,
+          spaceRequirements: formData.requirementInfo.spaceRequirements,
+          designAngles: formData.requirementInfo.designAngles,
+          specialAreaHandling: formData.requirementInfo.specialAreaHandling,
+          materialRequirements: formData.requirementInfo.materialRequirements,
+          lightingRequirements: formData.requirementInfo.lightingRequirements
         } as any;
       }
       
@@ -2145,4 +2178,54 @@ export class ProjectDetail implements OnInit, OnDestroy {
       console.log('客户信息已实时更新');
     }
   }
+
+  // 新增：上传支付凭证功能
+  uploadPaymentProof(): void {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*,.pdf';
+    input.multiple = false;
+    
+    input.onchange = (event: any) => {
+      const file = event.target.files[0];
+      if (file) {
+        // 验证文件大小（限制为5MB）
+        if (file.size > 5 * 1024 * 1024) {
+          alert('文件大小不能超过5MB');
+          return;
+        }
+        
+        // 验证文件类型
+        const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf'];
+        if (!allowedTypes.includes(file.type)) {
+          alert('只支持图片文件（JPG、PNG、GIF）和PDF文件');
+          return;
+        }
+        
+        // 模拟上传过程
+        this.handlePaymentProofUpload(file);
+      }
+    };
+    
+    input.click();
+  }
+
+  private handlePaymentProofUpload(file: File): void {
+    // 显示上传进度
+    const uploadingMessage = `正在上传支付凭证：${file.name}...`;
+    console.log(uploadingMessage);
+    
+    // 模拟上传API调用
+    setTimeout(() => {
+      // 模拟成功上传
+      const successMessage = `支付凭证上传成功：${file.name}`;
+      alert(successMessage);
+      console.log('支付凭证上传完成', {
+        fileName: file.name,
+        fileSize: file.size,
+        fileType: file.type,
+        uploadTime: new Date().toISOString()
+      });
+    }, 2000);
+  }
 }

src/app/services/project.service.ts

@@ -185,9 +185,11 @@ export class ProjectService {
   ];
 
   private settlements: Settlement[] = [
+    // 项目3的结算记录
     {
       id: 's1',
       projectId: '3',
+      projectName: '欧式风格厨房设计',
       stage: '建模',
       amount: 3000,
       percentage: 30,
@@ -198,6 +200,7 @@ export class ProjectService {
     {
       id: 's2',
       projectId: '3',
+      projectName: '欧式风格厨房设计',
       stage: '渲染',
       amount: 5000,
       percentage: 50,
@@ -208,6 +211,7 @@ export class ProjectService {
     {
       id: 's3',
       projectId: '3',
+      projectName: '欧式风格厨房设计',
       stage: '后期',
       amount: 2000,
       percentage: 20,
@@ -215,14 +219,91 @@ export class ProjectService {
       createdAt: new Date('2025-09-02'),
       settledAt: new Date('2025-09-05')
     },
+    // 项目1的结算记录（当前项目）
     {
       id: 's4',
-      projectId: '1',
+      projectId: 'proj-001',
+      projectName: '现代风格客厅设计',
       stage: '建模',
-      amount: 3000,
+      amount: 4500,
       percentage: 30,
+      status: '已结算',
+      createdAt: new Date('2025-09-01'),
+      settledAt: new Date('2025-09-03')
+    },
+    {
+      id: 's5',
+      projectId: 'proj-001',
+      projectName: '现代风格客厅设计',
+      stage: '软装',
+      amount: 3500,
+      percentage: 25,
+      status: '已结算',
+      createdAt: new Date('2025-09-05'),
+      settledAt: new Date('2025-09-08')
+    },
+    {
+      id: 's6',
+      projectId: 'proj-001',
+      projectName: '现代风格客厅设计',
+      stage: '渲染',
+      amount: 4000,
+      percentage: 30,
+      status: '待结算',
+      createdAt: new Date('2025-09-10')
+    },
+    {
+      id: 's7',
+      projectId: 'proj-001',
+      projectName: '现代风格客厅设计',
+      stage: '后期',
+      amount: 2000,
+      percentage: 15,
+      status: '待结算',
+      createdAt: new Date('2025-09-12')
+    },
+    // 添加一些逾期的结算项
+    {
+      id: 's8',
+      projectId: 'proj-001',
+      projectName: '现代风格客厅设计',
+      stage: '尾款结算',
+      amount: 6000,
+      percentage: 40,
+      status: '待结算',
+      createdAt: new Date('2025-08-15') // 超过30天，算作逾期
+    },
+    {
+      id: 's9',
+      projectId: 'proj-001',
+      projectName: '现代风格客厅设计',
+      stage: '方案确认',
+      amount: 1500,
+      percentage: 10,
+      status: '待结算',
+      createdAt: new Date('2025-08-20') // 逾期项目
+    },
+    // 项目2的结算记录
+    {
+      id: 's10',
+      projectId: '2',
+      projectName: '宋式风格卧室设计',
+      stage: '建模',
+      amount: 3200,
+      percentage: 30,
+      status: '已结算',
+      createdAt: new Date('2025-09-03'),
+      settledAt: new Date('2025-09-05')
+    },
+    {
+      id: 's11',
+      projectId: '2',
+      projectName: '宋式风格卧室设计',
+      stage: '软装',
+      amount: 2800,
+      percentage: 25,
       status: '待结算',
-      createdAt: new Date('2025-09-06')
+      createdAt: new Date('2025-09-08')
     }
   ];
 

src/app/shared/components/consultation-order-panel/consultation-order-panel.component.html

@@ -3,6 +3,41 @@
   <div class="panel-header">
     <h1 class="panel-title">创建咨询订单</h1>
     <p class="panel-subtitle">填写客户信息和项目需求</p>
+    
+    <!-- 紧凑型流程进度卡片 -->
+    <div class="compact-stage-indicators">
+      <div class="stage-chain">
+        <div class="stage-dot" [class]="getStageStatusClass('customerInfo')" 
+             title="客户信息 - {{ getStageStatusText('customerInfo') }}">
+          <span class="stage-number">1</span>
+        </div>
+        <div class="stage-connector" [class]="stageCompletionStatus.customerInfo ? 'completed' : 'pending'"></div>
+        
+        <div class="stage-dot" [class]="getStageStatusClass('projectRequirements')" 
+             title="项目需求 - {{ getStageStatusText('projectRequirements') }}">
+          <span class="stage-number">2</span>
+        </div>
+        <div class="stage-connector" [class]="stageCompletionStatus.projectRequirements ? 'completed' : 'pending'"></div>
+        
+        <div class="stage-dot" [class]="getStageStatusClass('teamAssignment')" 
+             title="团队分配 - {{ getStageStatusText('teamAssignment') }}">
+          <span class="stage-number">3</span>
+        </div>
+        <div class="stage-connector" [class]="stageCompletionStatus.teamAssignment ? 'completed' : 'pending'"></div>
+        
+        <div class="stage-dot" [class]="getStageStatusClass('orderConfirmation')" 
+             title="订单确认 - {{ getStageStatusText('orderConfirmation') }}">
+          <span class="stage-number">4</span>
+        </div>
+      </div>
+    </div>
+    
+    <div class="progress-indicator">
+      <div class="progress-bar">
+        <div class="progress-fill" [style.width.%]="getProgressPercentage()"></div>
+      </div>
+      <span class="progress-text">{{ getProgressPercentage() | number:'1.0-0' }}% 完成</span>
+    </div>
   </div>
 
   <!-- 可滚动内容区域 -->
@@ -53,16 +88,6 @@
       <section class="new-customer-form">
         <h3 class="form-title">新客户信息</h3>
         <form [formGroup]="customerForm">
-          <div class="form-row">
-            <div class="form-group">
-              <label for="name">客户姓名 <span class="required">*</span></label>
-              <input type="text" id="name" formControlName="name" placeholder="请输入客户姓名">
-            </div>
-            <div class="form-group">
-              <label for="phone">手机号码 <span class="required">*</span></label>
-              <input type="tel" id="phone" formControlName="phone" placeholder="请输入手机号码">
-            </div>
-          </div>
           <div class="form-row">
             <div class="form-group">
               <label for="wechat">微信号</label>
@@ -92,36 +117,19 @@
       @if (isRequirementCardExpanded) {
         <div class="card-content">
           <form [formGroup]="requirementForm">
-            <!-- 基本信息 -->
-            <div class="form-row">
-              <div class="form-group">
-                <label for="decorationType">装修类型 <span class="required">*</span></label>
-                <select id="decorationType" formControlName="decorationType">
-                  <option value="">请选择装修类型</option>
-                  <option value="全包">全包</option>
-                  <option value="半包">半包</option>
-                  <option value="清包">清包</option>
-                  <option value="软装">软装</option>
-                </select>
-              </div>
+            <!-- 基本信息 - 两列布局 -->
+            <div class="form-row two-columns">
               <div class="form-group">
                 <label for="downPayment">定金金额 <span class="required">*</span></label>
                 <input type="number" id="downPayment" formControlName="downPayment" placeholder="请输入定金金额">
               </div>
-            </div>
-
-            <div class="form-row">
-              <div class="form-group">
-                <label for="firstDraftDate">初稿时间 <span class="required">*</span></label>
-                <input type="date" id="firstDraftDate" formControlName="firstDraftDate">
-              </div>
               <div class="form-group">
                 <label for="budget">预算范围 <span class="required">*</span></label>
                 <input type="number" id="budget" formControlName="budget" placeholder="请输入预算金额">
               </div>
             </div>
 
-            <div class="form-row">
+            <div class="form-row two-columns">
               <div class="form-group">
                 <label for="area">房屋面积 <span class="required">*</span></label>
                 <input type="number" id="area" formControlName="area" placeholder="请输入房屋面积（平方米）">
@@ -132,19 +140,7 @@
               </div>
             </div>
 
-            <div class="form-row">
-              <div class="form-group">
-                <label for="style">装修风格</label>
-                <select id="style" formControlName="style">
-                  <option value="">请选择装修风格</option>
-                  @for (style of styleOptions; track style) {
-                    <option [value]="style">{{ style }}</option>
-                  }
-                </select>
-              </div>
-            </div>
-
-            <div class="form-row">
+            <div class="form-row two-columns">
               <div class="form-group">
                 <label for="smallImageTime">小图时间</label>
                 <input type="date" id="smallImageTime" formControlName="smallImageTime">
@@ -155,8 +151,8 @@
               </div>
             </div>
 
-            <!-- 详细需求 -->
-            <div class="form-row">
+            <!-- 详细需求 - 单列布局 -->
+            <div class="form-row single-column">
               <div class="form-group">
                 <label for="spaceRequirements">涉及空间</label>
                 <textarea 
@@ -168,7 +164,7 @@
               </div>
             </div>
 
-            <div class="form-row">
+            <div class="form-row single-column">
               <div class="form-group">
                 <label for="designAngles">设计角度</label>
                 <textarea 
@@ -180,7 +176,7 @@
               </div>
             </div>
 
-            <div class="form-row">
+            <div class="form-row single-column">
               <div class="form-group">
                 <label for="specialAreaHandling">特殊区域处理</label>
                 <textarea 
@@ -192,26 +188,26 @@
               </div>
             </div>
 
-            <div class="form-row">
+            <div class="form-row single-column">
               <div class="form-group">
                 <label for="materialRequirements">材质要求</label>
                 <textarea 
                   id="materialRequirements" 
                   formControlName="materialRequirements" 
                   rows="3" 
-                  placeholder="请描述具体的材质要求"
+                  placeholder="请描述对材质的具体要求"
                 ></textarea>
               </div>
             </div>
 
-            <div class="form-row">
+            <div class="form-row single-column">
               <div class="form-group">
                 <label for="lightingRequirements">灯光要求</label>
                 <textarea 
                   id="lightingRequirements" 
                   formControlName="lightingRequirements" 
                   rows="3" 
-                  placeholder="请描述灯光设计要求"
+                  placeholder="请描述对灯光的具体要求"
                 ></textarea>
               </div>
             </div>
@@ -253,7 +249,7 @@
       [class.disabled]="isSubmitting || !isFormValid()"
     >
       @if (isSubmitting) {
-        <span>创建中...</span>
+        <span>分配团队中...</span>
       } @else {
         <span>创建订单</span>
       }

src/app/shared/components/consultation-order-panel/consultation-order-panel.component.scss

@@ -365,11 +365,38 @@ $ios-spacing-xl: 32px;
         gap: $ios-spacing-md;
         margin-bottom: $ios-spacing-md;
 
+        // 优化布局：移除字段后调整间距和对齐
+        &:last-child {
+          margin-bottom: 0;
+        }
+
         @media (max-width: 768px) {
           flex-direction: column;
           gap: $ios-spacing-sm;
         }
 
+        // 针对不同行数的表单组进行优化
+        &.two-columns {
+          .form-group {
+            flex: 1;
+            min-width: calc(50% - #{$ios-spacing-md / 2});
+          }
+        }
+
+        &.three-columns {
+          .form-group {
+            flex: 1;
+            min-width: calc(33.333% - #{$ios-spacing-md * 2 / 3});
+          }
+        }
+
+        &.single-column {
+          .form-group {
+            flex: 1;
+            width: 100%;
+          }
+        }
+
         .form-group {
           flex: 1;
 
@@ -517,6 +544,109 @@ $ios-spacing-xl: 32px;
     }
   }
 
+  // 紧凑型流程进度指示器
+  .compact-stage-indicators {
+    margin: $ios-spacing-md 0;
+    
+    .stage-chain {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: $ios-spacing-xs;
+    }
+    
+    .stage-dot {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      position: relative;
+      
+      .stage-number {
+        color: white;
+        font-size: 12px;
+      }
+      
+      &.stage-pending {
+        background: #D1D1D6;
+        border: 2px solid #8E8E93;
+        
+        .stage-number {
+          color: $ios-text-secondary;
+        }
+      }
+      
+      &.stage-in-progress {
+        background: $ios-primary;
+        border: 2px solid $ios-primary-dark;
+        box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
+        
+        .stage-number {
+          color: white;
+        }
+      }
+      
+      &.stage-completed {
+        background: $ios-success;
+        border: 2px solid color.adjust($ios-success, $lightness: -10%);
+        
+        .stage-number {
+          color: white;
+        }
+      }
+    }
+    
+    .stage-connector {
+      width: 24px;
+      height: 2px;
+      transition: all 0.3s ease;
+      
+      &.pending {
+        background: #D1D1D6;
+      }
+      
+      &.completed {
+        background: $ios-success;
+      }
+    }
+  }
+  
+  // 进度指示器
+  .progress-indicator {
+    display: flex;
+    align-items: center;
+    gap: $ios-spacing-sm;
+    margin-top: $ios-spacing-sm;
+    
+    .progress-bar {
+      flex: 1;
+      height: 6px;
+      background: $ios-background-secondary;
+      border-radius: 3px;
+      overflow: hidden;
+      
+      .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, $ios-primary, color.adjust($ios-primary, $lightness: 10%));
+        border-radius: 3px;
+        transition: width 0.3s ease;
+      }
+    }
+    
+    .progress-text {
+      font-size: 14px;
+      color: $ios-text-secondary;
+      font-weight: 500;
+      min-width: 60px;
+      text-align: right;
+    }
+  }
+
   // 底部提交区域
   .panel-footer {
     padding: $ios-spacing-md $ios-spacing-lg;

src/app/shared/components/consultation-order-panel/consultation-order-panel.component.ts

@@ -35,7 +35,7 @@ interface Customer {
   templateUrl: './consultation-order-panel.component.html',
   styleUrls: ['./consultation-order-panel.component.scss']
 })
-export class ConsultationOrderPanelComponent {
+export class ConsultationOrderPanelComponent implements OnInit {
   @Output() orderCreated = new EventEmitter<any>();
   @Output() projectCreated = new EventEmitter<any>(); // 新增项目创建成功事件
 
@@ -86,11 +86,7 @@ export class ConsultationOrderPanelComponent {
   constructor(private fb: FormBuilder) {
     // 初始化需求表单
     this.requirementForm = this.fb.group({
-      decorationType: ['', Validators.required],
       downPayment: ['', [Validators.required, Validators.min(0)]],
-      firstDraftDate: ['', Validators.required],
-      style: [''],
-      projectGroup: [''],
       budget: ['', Validators.required],
       area: ['', [Validators.required, Validators.min(1)]],
       smallImageTime: [''],
@@ -111,8 +107,6 @@ export class ConsultationOrderPanelComponent {
 
     // 初始化客户表单
     this.customerForm = this.fb.group({
-      name: ['', Validators.required],
-      phone: ['', [Validators.required, Validators.pattern(/^(1[3-9]\d{9}|1[3-9]\d{1}\*{4}\d{4})$/)]],
       wechat: [''],
       customerType: ['新客户'],
       source: [''],
@@ -122,6 +116,20 @@ export class ConsultationOrderPanelComponent {
     });
   }
 
+  ngOnInit(): void {
+    // 监听表单变化，实时更新阶段状态
+    this.customerForm.valueChanges.subscribe(() => {
+      this.checkStageCompletion();
+    });
+    
+    this.requirementForm.valueChanges.subscribe(() => {
+      this.checkStageCompletion();
+    });
+    
+    // 初始检查阶段状态
+    this.checkStageCompletion();
+  }
+
   // 搜索客户
   searchCustomer() {
     if (this.searchKeyword.length >= 2) {
@@ -189,28 +197,92 @@ export class ConsultationOrderPanelComponent {
     }
   }
 
+  // 流程状态管理
+  stageCompletionStatus = {
+    customerInfo: false,
+    projectRequirements: false,
+    teamAssignment: false,
+    orderConfirmation: false
+  };
+
+  // 获取阶段状态文本
+  getStageStatusText(stage: keyof typeof this.stageCompletionStatus): string {
+    if (this.stageCompletionStatus[stage]) {
+      return '已完成';
+    } else {
+      // 检查是否为未开始状态
+      const stages = ['customerInfo', 'projectRequirements', 'teamAssignment', 'orderConfirmation'];
+      const currentIndex = stages.indexOf(stage);
+      
+      // 检查前面的阶段是否都已完成
+      let allPreviousCompleted = true;
+      for (let i = 0; i < currentIndex; i++) {
+        if (!this.stageCompletionStatus[stages[i] as keyof typeof this.stageCompletionStatus]) {
+          allPreviousCompleted = false;
+          break;
+        }
+      }
+      
+      return allPreviousCompleted ? '进行中' : '未进行';
+    }
+  }
+
+  // 获取阶段状态类名
+  getStageStatusClass(stage: keyof typeof this.stageCompletionStatus): string {
+    if (this.stageCompletionStatus[stage]) {
+      return 'stage-completed';
+    } else {
+      // 检查是否为未开始状态
+      const stages = ['customerInfo', 'projectRequirements', 'teamAssignment', 'orderConfirmation'];
+      const currentIndex = stages.indexOf(stage);
+      
+      // 检查前面的阶段是否都已完成
+      let allPreviousCompleted = true;
+      for (let i = 0; i < currentIndex; i++) {
+        if (!this.stageCompletionStatus[stages[i] as keyof typeof this.stageCompletionStatus]) {
+          allPreviousCompleted = false;
+          break;
+        }
+      }
+      
+      return allPreviousCompleted ? 'stage-in-progress' : 'stage-pending';
+    }
+  }
+
+  // 获取进度百分比
+  getProgressPercentage(): number {
+    const completedStages = Object.values(this.stageCompletionStatus).filter(status => status).length;
+    return Math.round((completedStages / 4) * 100);
+  }
+
+  // 检查阶段完成状态
+  private checkStageCompletion(): void {
+    // 检查客户信息阶段 - 客户信息表单有效
+    this.stageCompletionStatus.customerInfo = this.customerForm.valid;
+    
+    // 检查项目需求阶段 - 需求表单有效
+    this.stageCompletionStatus.projectRequirements = this.requirementForm.valid;
+    
+    // 检查团队分配阶段 - 已选择设计师
+    this.stageCompletionStatus.teamAssignment = !!this.selectedDesigner;
+    
+    // 检查订单确认阶段 - 所有前面阶段都完成
+    this.stageCompletionStatus.orderConfirmation = this.stageCompletionStatus.customerInfo && 
+      this.stageCompletionStatus.projectRequirements && 
+      this.stageCompletionStatus.teamAssignment;
+  }
+
   // 检查表单是否有效
   isFormValid(): boolean {
     return this.customerForm.valid && this.requirementForm.valid;
   }
 
-  // 提交表单
+  // 提交表单 - 优化流程：直接进入团队分配
   submitForm() {
     if (this.isFormValid()) {
       this.isSubmitting = true;
       
-      const formData = {
-        customerInfo: this.customerForm.value,
-        requirementInfo: this.requirementForm.value,
-        preferenceTags: this.preferenceTags,
-        roleContext: this.roleContext, // 添加角色上下文信息
-        createdAt: new Date()
-      };
-
-      // 直接触发订单创建事件，不需要延迟
-      this.orderCreated.emit(formData);
-      
-      // 立即显示团队分配弹窗
+      // 直接显示团队分配弹窗，无需先触发订单创建事件
       this.showTeamAssignmentModal = true;
     }
   }
@@ -220,13 +292,24 @@ export class ConsultationOrderPanelComponent {
     this.showTeamAssignmentModal = false;
   }
 
-  // 确认团队分配
+  // 确认团队分配 - 优化流程：同时触发订单创建和项目创建事件
   confirmTeamAssignment(designer: Designer) {
     this.selectedDesigner = designer;
     this.showTeamAssignmentModal = false;
     this.isSubmitting = false; // 重置提交状态
     
-    // 发出项目创建成功事件
+    // 更新阶段状态
+    this.checkStageCompletion();
+    
+    // 构建完整的项目数据
+    const formData = {
+      customerInfo: this.customerForm.value,
+      requirementInfo: this.requirementForm.value,
+      preferenceTags: this.preferenceTags,
+      roleContext: this.roleContext, // 添加角色上下文信息
+      createdAt: new Date()
+    };
+    
     const projectData = {
       customerInfo: this.customerForm.value,
       requirementInfo: this.requirementForm.value,
@@ -235,6 +318,10 @@ export class ConsultationOrderPanelComponent {
       createdAt: new Date()
     };
     
+    // 先触发订单创建事件（用于数据同步）
+    this.orderCreated.emit(formData);
+    
+    // 再触发项目创建成功事件（用于阶段推进）
     this.projectCreated.emit(projectData);
     
     // 重置表单

src/app/shared/components/settlement-card/settlement-card.scss

@@ -75,9 +75,11 @@
     margin-bottom: 20px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 16px;
 
     .search-bar {
+      width: 100%;
+
       .search-input {
         width: 100%;
         padding: 10px 16px;
@@ -86,6 +88,7 @@
         font-size: 14px;
         background: white;
         transition: border-color 0.2s ease;
+        box-sizing: border-box;
 
         &:focus {
           outline: none;
@@ -103,6 +106,8 @@
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
+      width: 100%;
+      justify-content: flex-start;
 
       .filter-btn {
         padding: 8px 16px;
@@ -113,6 +118,7 @@
         font-size: 14px;
         cursor: pointer;
         transition: all 0.2s ease;
+        white-space: nowrap; // 防止按钮文字换行
 
         &:hover {
           background: #f8f9fa;