feet:customer10

src/app/pages/customer-service/consultation-order/consultation-order.html

@@ -80,171 +80,161 @@
       </button>
     </div>
 
-    <!-- 客户信息卡片 -->
-    <section class="info-card customer-card">
-      <div class="card-header">
-        <div class="header-left">
-          <div class="icon-wrapper customer-icon">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-              <circle cx="12" cy="7" r="4"></circle>
-            </svg>
-          </div>
-          <div class="header-text">
-            <h2>客户信息</h2>
-            <p>搜索或新建客户档案</p>
-          </div>
-        </div>
-        <div class="header-actions">
-          <div class="order-time" *ngIf="orderTime()">
-            <span class="time-label">下单时间：</span>
-            <span class="time-value">{{ orderTime() }}</span>
-          </div>
-          <button 
-            *ngIf="orderCreationMethod() === 'miniprogram'" 
-            class="btn-primary btn-sm sync-btn" 
-            (click)="syncMiniprogramCustomerInfo()"
-            [disabled]="isSyncing()"
-          >
-            <mat-spinner *ngIf="isSyncing()" diameter="16" class="sync-spinner"></mat-spinner>
-            <svg *ngIf="!isSyncing()" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="23 4 23 10 17 10"></polyline>
-              <polyline points="1 20 1 14 7 14"></polyline>
-              <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
-            </svg>
-            {{ isSyncing() ? '同步中...' : '同步客户信息' }}
-          </button>
-          <button *ngIf="selectedCustomer()" class="btn-ghost btn-sm" (click)="clearSelectedCustomer()">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="18" y1="6" x2="6" y2="18"></line>
-              <line x1="6" y1="6" x2="18" y2="18"></line>
-            </svg>
-            清除
-          </button>
-        </div>
-      </div>
-      
-      <div class="card-content">
-        <!-- 客户搜索区域 -->
-        <div *ngIf="!selectedCustomer() && orderCreationMethod() === 'manual'" class="customer-search-section">
-          <div class="search-container">
-            <div class="search-input-wrapper">
-              <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="11" cy="11" r="8"></circle>
-                <path d="m21 21-4.35-4.35"></path>
-              </svg>
+    <!-- 客户信息长条栏 -->
+    <section class="customer-info-bar">
+      <div class="customer-bar-container">
+        <!-- 左侧客户搜索和信息 -->
+        <div class="customer-search-area">
+          @if (!selectedCustomer()) {
+            <div class="search-input-container">
+              <div class="search-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                  <circle cx="12" cy="7" r="4"></circle>
+                </svg>
+              </div>
               <input 
                 type="text" 
                 [ngModel]="searchKeyword()" 
                 (ngModelChange)="searchKeyword.set($event); searchCustomer()"
-                placeholder="输入客户姓名或手机号快速填写..."
-                class="search-input"
+                placeholder="输入客户姓名或手机号快速匹配老客户..."
+                class="customer-search-input"
                 autocomplete="off"
                 (keyup.enter)="quickFillCustomerInfo(searchKeyword())"
               />
               <button 
-                class="quick-fill-btn"
+                class="search-action-btn"
                 (click)="quickFillCustomerInfo(searchKeyword())"
                 [disabled]="!searchKeyword().trim() || isSyncing()"
               >
-                <mat-spinner *ngIf="isSyncing()" diameter="16"></mat-spinner>
-                <span *ngIf="!isSyncing()">快速填写</span>
+                @if (isSyncing()) {
+                  <mat-spinner diameter="16"></mat-spinner>
+                } @else {
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M9 11l3 3 8-8"></path>
+                    <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c1.51 0 2.93.37 4.18 1.03"></path>
+                  </svg>
+                  匹配
+                }
               </button>
             </div>
-            <div class="search-hint">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10"></circle>
-                <path d="m9 12 2 2 4-4"></path>
-              </svg>
-              <span>直接输入姓名/手机号，按回车或点击"快速填写"自动匹配客户信息</span>
-            </div>
-          </div>
-          
-          <!-- 搜索结果 -->
-          <div *ngIf="searchResults().length > 0" class="search-results">
-            <div class="results-header">
-              <span class="results-count">找到 {{ searchResults().length }} 位客户</span>
-            </div>
-            <div class="customer-list">
-              <div *ngFor="let customer of searchResults()" class="customer-item" (click)="selectCustomer(customer)">
-                <div class="customer-avatar">
-                  <img [src]="customer.avatar" [alt]="customer.name" *ngIf="customer.avatar">
-                  <div *ngIf="!customer.avatar" class="avatar-placeholder">
-                    {{ customer.name.charAt(0) }}
-                  </div>
+            
+            <!-- 搜索结果下拉 -->
+            @if (searchResults().length > 0) {
+              <div class="search-dropdown">
+                <div class="dropdown-header">
+                  <span>找到 {{ searchResults().length }} 位客户</span>
                 </div>
-                <div class="customer-info">
-                  <div class="customer-name">{{ customer.name }}</div>
-                  <div class="customer-phone">{{ customer.phone }}</div>
-                  <div class="customer-tags" *ngIf="customer.customerType || customer.source">
-                    <span *ngIf="customer.customerType" class="tag type-tag">{{ customer.customerType }}</span>
-                    <span *ngIf="customer.source" class="tag source-tag">{{ customer.source }}</span>
+                @for (customer of searchResults(); track customer.id) {
+                  <div class="customer-option" (click)="selectCustomer(customer)">
+                    <div class="customer-avatar-sm">
+                      @if (customer.avatar) {
+                        <img [src]="customer.avatar" [alt]="customer.name">
+                      } @else {
+                        <span>{{ customer.name.charAt(0) }}</span>
+                      }
+                    </div>
+                    <div class="customer-details">
+                      <div class="customer-name">{{ customer.name }}</div>
+                      <div class="customer-phone">{{ customer.phone }}</div>
+                    </div>
+                    <div class="customer-tags">
+                      @if (customer.customerType) {
+                        <span class="tag">{{ customer.customerType }}</span>
+                      }
+                    </div>
                   </div>
-                </div>
-                <div class="select-indicator">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polyline points="9 18 15 12 9 6"></polyline>
-                  </svg>
-                </div>
+                }
               </div>
-            </div>
-          </div>
-        </div>
-        <!-- 客户信息表单 -->
-        <form [formGroup]="customerForm" class="customer-form">
-          <!-- 基本信息组 -->
-          <div class="form-section">
-            <h3 class="section-title">基本信息</h3>
-            <div class="form-grid">
-              <div class="form-field">
-                <label for="name" class="field-label">客户姓名 <span class="required">*</span></label>
-                <input type="text" id="name" formControlName="name" placeholder="请输入客户姓名" class="field-input">
+            }
+          } @else {
+            <!-- 已选择客户信息展示 -->
+            <div class="selected-customer-info">
+              <div class="customer-avatar-lg">
+                @if (selectedCustomer()?.avatar) {
+                  <img [src]="selectedCustomer()?.avatar" [alt]="selectedCustomer()?.name">
+                } @else {
+                  <span>{{ selectedCustomer()?.name?.charAt(0) }}</span>
+                }
               </div>
-              <div class="form-field">
-                <label for="phone" class="field-label">手机号码 <span class="required">*</span></label>
-                <input type="tel" id="phone" formControlName="phone" placeholder="请输入手机号码" class="field-input">
+              <div class="customer-main-info">
+                <div class="customer-name-lg">{{ selectedCustomer()?.name }}</div>
+                <div class="customer-contact">
+                  <span class="phone">{{ selectedCustomer()?.phone }}</span>
+                  @if (selectedCustomer()?.wechat) {
+                    <span class="wechat">微信: {{ selectedCustomer()?.wechat }}</span>
+                  }
+                </div>
               </div>
-              <div class="form-field">
-                <label for="wechat" class="field-label">微信账号 <span class="optional">（可选）</span></label>
-                <input type="text" id="wechat" formControlName="wechat" placeholder="请输入微信账号" class="field-input">
+              <div class="customer-history">
+                <div class="history-item">
+                  <span class="label">合作项目:</span>
+                  <span class="value">3个项目</span>
+                </div>
+                <div class="history-item">
+                  <span class="label">历史反馈:</span>
+                  <span class="value">满意度95%</span>
+                </div>
               </div>
             </div>
-          </div>
-          
-          <!-- 分类信息组 -->
-          <div class="form-section">
-            <h3 class="section-title">分类信息 <span class="section-subtitle">（可选填写，便于客户管理）</span></h3>
-            <div class="form-grid">
-              <div class="form-field">
-                <label for="customerType" class="field-label">客户类型 <span class="optional">（可选）</span></label>
-                <select id="customerType" formControlName="customerType" class="field-select">
-                  <option value="">请选择客户类型</option>
-                  <option value="新客户">新客户</option>
-                  <option value="老客户">老客户</option>
-                  <option value="VIP客户">VIP客户</option>
-                </select>
-              </div>
+          }
+        </div>
+        
+        <!-- 右侧操作按钮 -->
+        <div class="customer-actions">
+          @if (selectedCustomer()) {
+            <button class="action-btn secondary" (click)="clearSelectedCustomer()">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M3 6h18"></path>
+                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+              </svg>
+              重新选择
+            </button>
+          }
+          @if (orderCreationMethod() === 'miniprogram') {
+            <button 
+              class="action-btn primary" 
+              (click)="syncMiniprogramCustomerInfo()"
+              [disabled]="isSyncing()"
+            >
+              @if (isSyncing()) {
+                <mat-spinner diameter="16"></mat-spinner>
+              } @else {
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="23 4 23 10 17 10"></polyline>
+                  <polyline points="1 20 1 14 7 14"></polyline>
+                  <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                </svg>
+              }
+              {{ isSyncing() ? '同步中...' : '同步小程序' }}
+            </button>
+          }
+        </div>
+      </div>
+    </section>
 
-              <div class="form-field">
-                <label for="demandType" class="field-label">需求类型 <span class="optional">（可选）</span></label>
-                <select id="demandType" formControlName="demandType" class="field-select">
-                  <option value="">请选择需求类型</option>
-                  <option *ngFor="let type of demandTypes" [value]="type.value">{{ type.label }}</option>
-                </select>
-              </div>
-              <div class="form-field">
-                <label for="followUpStatus" class="field-label">跟进状态 <span class="optional">（可选）</span></label>
-                <select id="followUpStatus" formControlName="followUpStatus" class="field-select">
-                  <option value="">请选择跟进状态</option>
-                  <option *ngFor="let status of followUpStatus" [value]="status.value">{{ status.label }}</option>
-                </select>
-              </div>
+    <!-- 新客户快速填写表单 -->
+    @if (!selectedCustomer() && orderCreationMethod() === 'manual') {
+      <section class="new-customer-form">
+        <div class="form-header">
+          <h3>新客户信息</h3>
+          <p>仅需填写基本信息，其他信息可通过企业微信聊天记录补充</p>
+        </div>
+        <form [formGroup]="customerForm" class="simple-customer-form">
+          <div class="form-row">
+            <div class="form-field">
+              <label for="name" class="field-label">客户姓名 <span class="required">*</span></label>
+              <input type="text" id="name" formControlName="name" placeholder="请输入客户姓名" class="field-input">
+            </div>
+            <div class="form-field">
+              <label for="phone" class="field-label">手机号码 <span class="required">*</span></label>
+              <input type="tel" id="phone" formControlName="phone" placeholder="请输入手机号码" class="field-input">
             </div>
           </div>
-          
         </form>
-      </div>
-    </section>
+      </section>
+    }
 
     <!-- 项目需求卡片（可折叠） -->
     <section class="info-card requirement-card" *ngIf="isRequirementCardExpanded()">
@@ -258,7 +248,7 @@
           </div>
           <div class="header-text">
             <h2>项目需求</h2>
-            <p>项目需求、风格、小组匹配等信息</p>
+            <p>项目基本信息配置</p>
           </div>
         </div>
         <div class="header-actions">
@@ -277,176 +267,39 @@
       </div>
 
       <div class="card-content">
-
-       <form [formGroup]="requirementForm" class="requirement-form">
-          <!-- 基础需求组 -->
-          <div class="form-section">
-            <h3 class="section-title">基础需求</h3>
-            <div class="form-grid">
-              <div class="form-field">
-                <label for="style" class="field-label">装修风格 <span class="required">*</span></label>
-                <select id="style" formControlName="style" class="field-select">
-                  <option value="">请选择装修风格</option>
-                  <option *ngFor="let style of styleOptions" [value]="style">{{ style }}</option>
-                </select>
-              </div>
-              <div class="form-field">
-                <label for="budget" class="field-label">预算范围 <span class="required">*</span></label>
-                <select id="budget" formControlName="budget" class="field-select">
-                  <option value="">请选择预算范围</option>
-                  <option value="5-10万">5-10万</option>
-                  <option value="10-20万">10-20万</option>
-                  <option value="20-30万">20-30万</option>
-                  <option value="30-50万">30-50万</option>
-                  <option value="50万以上">50万以上</option>
-                </select>
-              </div>
+        <form [formGroup]="requirementForm" class="requirement-form">
+          <div class="form-grid">
+            <div class="form-field">
+              <label for="style" class="field-label">装修风格 <span class="required">*</span></label>
+              <select id="style" formControlName="style" class="field-select">
+                <option value="">请选择装修风格</option>
+                <option *ngFor="let style of styleOptions" [value]="style">{{ style }}</option>
+              </select>
             </div>
-          </div>
-          
-          
-          <!-- 项目管理组 -->
-          <div class="form-section">
-            <h3 class="section-title">项目管理</h3>
-            <div class="form-grid">
-              <div class="form-field">
-                <label for="projectGroup" class="field-label">项目小组 <span class="required">*</span></label>
-                <select id="projectGroup" formControlName="projectGroup" class="field-select">
-                  <option value="">请选择项目小组</option>
-                  <option *ngFor="let group of projectGroupOptions" [value]="group">{{ group }}</option>
-                </select>
-              </div>
-              <div class="form-field">
-                <label for="firstDraftDate" class="field-label">首稿时间 <span class="required">*</span></label>
-                <input type="date" id="firstDraftDate" formControlName="firstDraftDate" class="field-input">
-              </div>
-              <div class="form-field">
-                <label for="downPayment" class="field-label">首付款 <span class="required">*</span></label>
-                <div class="input-with-unit">
-                  <input type="number" id="downPayment" formControlName="downPayment" placeholder="请输入首付款金额" class="field-input">
-                  <span class="input-unit">元</span>
-                </div>
-              </div>
+            <div class="form-field">
+              <label for="projectGroup" class="field-label">项目小组 <span class="required">*</span></label>
+              <select id="projectGroup" formControlName="projectGroup" class="field-select">
+                <option value="">请选择项目小组</option>
+                <option *ngFor="let group of projectGroupOptions" [value]="group">{{ group }}</option>
+              </select>
             </div>
-            <div class="form-field full-width">
-              <label for="priceDetails" class="field-label">价格明细</label>
-              <textarea id="priceDetails" formControlName="priceDetails" rows="4" placeholder="可通过聊天或复制聊天记录提取价格明细信息" class="field-textarea"></textarea>
+            <div class="form-field">
+              <label for="firstDraftDate" class="field-label">首稿时间 <span class="required">*</span></label>
+              <input type="date" id="firstDraftDate" formControlName="firstDraftDate" class="field-input">
             </div>
-          </div>
-
-          <!-- 其他需求组 -->
-          <div class="form-section">
-            <h3 class="section-title">其他需求</h3>
-            <div class="form-grid">
-              <div class="form-field">
-                <label for="preferredDesigner" class="field-label">意向设计师</label>
-                <input type="text" id="preferredDesigner" formControlName="preferredDesigner" placeholder="请输入意向设计师姓名" class="field-input">
+            <div class="form-field">
+              <label for="downPayment" class="field-label">首付款 <span class="required">*</span></label>
+              <div class="input-with-unit">
+                <input type="number" id="downPayment" formControlName="downPayment" placeholder="请输入首付款金额" class="field-input">
+                <span class="input-unit">元</span>
               </div>
             </div>
-            <div class="form-field full-width">
-              <label for="specialRequirements" class="field-label">特殊需求</label>
-              <textarea id="specialRequirements" formControlName="specialRequirements" rows="4" placeholder="请详细描述特殊需求或关注点" class="field-textarea"></textarea>
-            </div>
           </div>
         </form>
       </div>
     </section>
 
-    <!-- 报价与案例匹配卡片 -->
-    <section class="info-card price-match-card">
-      <div class="card-header">
-        <div class="header-left">
-          <div class="icon-wrapper price-icon">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <rect x="2" y="6" width="20" height="12" rx="2"></rect>
-              <path d="M12 6v4"></path>
-              <path d="M2 10h20"></path>
-            </svg>
-          </div>
-          <div class="header-text">
-            <h2>报价与案例匹配</h2>
-            <p>智能匹配相似案例和预估报价</p>
-          </div>
-        </div>
-      </div>
-      
-      <div class="card-content">
-        <!-- 预估报价区域 -->
-        <div class="price-section">
-          <div class="price-card">
-            <div class="price-header">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10"></circle>
-                <path d="M12 6v6l4 2"></path>
-              </svg>
-              <span>预估报价范围</span>
-            </div>
-            <div class="price-value">
-              {{ estimatedPriceRange() || '请填写需求信息以获取报价' }}
-            </div>
-          </div>
-        </div>
-        
-        <!-- 匹配案例区域 -->
-        <div class="cases-section" *ngIf="matchedCases().length > 0">
-          <div class="section-header">
-            <h3>推荐案例</h3>
-            <span class="section-subtitle">点击选择参考案例</span>
-          </div>
-          <div class="cases-grid">
-            <div *ngFor="let caseItem of matchedCases()" class="case-card" (click)="selectReferenceCase(caseItem)">
-              <div class="case-image-wrapper">
-                <img [src]="caseItem.imageUrl" [alt]="caseItem.name" class="case-image">
-                <div class="similarity-badge">{{ caseItem.similarity }}%</div>
-              </div>
-              <div class="case-content">
-                <h4 class="case-name">{{ caseItem.name }}</h4>
-                <div class="case-meta">
-                  <span class="case-designer">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                      <circle cx="12" cy="7" r="4"></circle>
-                    </svg>
-                    {{ caseItem.designer }}
-                  </span>
-                  <span class="case-area">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-                    </svg>
-                    {{ caseItem.area }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <!-- 已选案例区域 -->
-        <div *ngIf="requirementForm.get('referenceCases')?.value.length > 0" class="selected-cases-section">
-          <div class="section-header">
-            <h3>已选参考案例</h3>
-            <span class="section-subtitle">{{ requirementForm.get('referenceCases')?.value.length }} 个案例</span>
-          </div>
-          <div class="selected-cases-list">
-            <div *ngFor="let caseId of requirementForm.get('referenceCases')?.value" class="selected-case-item">
-              <div class="case-info">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M9 11l3 3 8-8"></path>
-                  <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c1.51 0 2.93.37 4.18 1.03"></path>
-                </svg>
-                <span>案例 #{{ caseId }}</span>
-              </div>
-              <button class="remove-case-btn" (click)="removeReferenceCase(caseId)">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <line x1="18" y1="6" x2="6" y2="18"></line>
-                  <line x1="6" y1="6" x2="18" y2="18"></line>
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
+
 
     <section class="action-section">
       <div class="action-buttons">

src/app/pages/customer-service/consultation-order/consultation-order.scss

@@ -36,6 +36,542 @@ $card-padding: 16px;
   }
 }
 
+// 客户信息长条栏样式
+.customer-info-bar {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  padding: 24px;
+  margin-bottom: 24px;
+  border: 1px solid rgba(0, 122, 255, 0.1);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+    transform: translateY(-1px);
+  }
+  
+  .customer-bar-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    
+    @media (max-width: 768px) {
+      flex-direction: column;
+      gap: 16px;
+    }
+  }
+  
+  .customer-search-area {
+    flex: 1;
+    position: relative;
+    
+    .search-input-container {
+      display: flex;
+      align-items: center;
+      background: #ffffff;
+      border: 2px solid #e5e5ea;
+      border-radius: 12px;
+      padding: 12px 16px;
+      transition: all 0.3s ease;
+      
+      &:focus-within {
+        border-color: #007AFF;
+        box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
+      }
+      
+      .search-icon {
+        color: #8e8e93;
+        margin-right: 12px;
+        
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+      }
+      
+      .customer-search-input {
+        flex: 1;
+        border: none;
+        outline: none;
+        font-size: 16px;
+        color: #1d1d1f;
+        background: transparent;
+        
+        &::placeholder {
+          color: #8e8e93;
+        }
+      }
+      
+      .search-action-btn {
+        background: #007AFF;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 16px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        
+        &:hover {
+          background: #0062CC;
+          transform: translateY(-1px);
+        }
+        
+        &:disabled {
+          background: #d1d1d6;
+          cursor: not-allowed;
+          transform: none;
+        }
+      }
+    }
+    
+    // 搜索结果下拉
+    .search-dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+      border: 1px solid #e5e5ea;
+      margin-top: 8px;
+      z-index: 1000;
+      max-height: 300px;
+      overflow-y: auto;
+      
+      .dropdown-header {
+        padding: 12px 16px;
+        border-bottom: 1px solid #f2f2f7;
+        font-size: 14px;
+        color: #8e8e93;
+        font-weight: 500;
+      }
+      
+      .customer-option {
+        display: flex;
+        align-items: center;
+        padding: 12px 16px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        
+        &:hover {
+          background: #f2f2f7;
+        }
+        
+        .customer-avatar-sm {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: #007AFF;
+          color: white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 600;
+          margin-right: 12px;
+          
+          img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            object-fit: cover;
+          }
+        }
+        
+        .customer-details {
+          flex: 1;
+          
+          .customer-name {
+            font-weight: 600;
+            color: #1d1d1f;
+            margin-bottom: 2px;
+          }
+          
+          .customer-phone {
+            font-size: 14px;
+            color: #8e8e93;
+          }
+        }
+        
+        .customer-tags {
+          .tag {
+            background: #e5f4ff;
+            color: #007AFF;
+            padding: 4px 8px;
+            border-radius: 6px;
+            font-size: 12px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+    
+    // 已选择客户信息展示
+    .selected-customer-info {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      
+      .customer-avatar-lg {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        background: #007AFF;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 24px;
+        
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          object-fit: cover;
+        }
+      }
+      
+      .customer-main-info {
+        flex: 1;
+        
+        .customer-name-lg {
+          font-size: 20px;
+          font-weight: 700;
+          color: #1d1d1f;
+          margin-bottom: 4px;
+        }
+        
+        .customer-contact {
+          display: flex;
+          gap: 16px;
+          
+          .phone, .wechat {
+            font-size: 14px;
+            color: #8e8e93;
+          }
+        }
+      }
+      
+      .customer-history {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        
+        .history-item {
+          display: flex;
+          gap: 8px;
+          font-size: 14px;
+          
+          .label {
+            color: #8e8e93;
+            font-weight: 500;
+          }
+          
+          .value {
+            color: #007AFF;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+  
+  .customer-actions {
+    display: flex;
+    gap: 12px;
+    
+    .action-btn {
+      padding: 10px 16px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      border: none;
+      
+      &.primary {
+        background: #007AFF;
+        color: white;
+        
+        &:hover {
+          background: #0062CC;
+          transform: translateY(-1px);
+        }
+      }
+      
+      &.secondary {
+        background: #f2f2f7;
+        color: #8e8e93;
+        
+        &:hover {
+          background: #e5e5ea;
+          color: #1d1d1f;
+        }
+      }
+      
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        transform: none;
+      }
+    }
+  }
+}
+
+// 新客户表单样式
+.new-customer-form {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  padding: 24px;
+  margin-bottom: 24px;
+  border: 1px solid #f2f2f7;
+  max-width: 100%;
+  overflow: hidden; // 防止内容溢出
+  
+  .form-header {
+    margin-bottom: 20px;
+    
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #1d1d1f;
+      margin: 0 0 6px 0;
+    }
+    
+    p {
+      font-size: 14px;
+      color: #8e8e93;
+      margin: 0;
+      line-height: 1.4;
+    }
+  }
+  
+  .simple-customer-form {
+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+      align-items: start;
+      width: 100%;
+      
+      @media (max-width: 992px) {
+        gap: 16px;
+      }
+      
+      @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+        gap: 16px;
+      }
+      
+      @media (max-width: 480px) {
+        gap: 12px;
+      }
+    }
+    
+    .form-field {
+      display: flex;
+      flex-direction: column;
+      min-width: 0; // 防止flex项目溢出
+      
+      .field-label {
+        display: block;
+        font-size: 14px;
+        font-weight: 500;
+        color: #1d1d1f;
+        margin-bottom: 8px;
+        white-space: nowrap;
+        
+        .required {
+          color: #ff3b30;
+        }
+      }
+      
+      .field-input {
+        width: 100%;
+        min-width: 0; // 防止输入框溢出
+        padding: 12px 16px;
+        border: 2px solid #e5e5ea;
+        border-radius: 8px;
+        font-size: 16px;
+        transition: all 0.3s ease;
+        background: white;
+        box-sizing: border-box; // 确保padding不会导致溢出
+        
+        &:focus {
+          outline: none;
+          border-color: #007AFF;
+          box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
+        }
+        
+        &::placeholder {
+          color: #8e8e93;
+        }
+        
+        &:invalid {
+          border-color: #ff3b30;
+        }
+      }
+    }
+  }
+}
+
+// 项目配置卡片样式
+.project-config-card {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  padding: 24px;
+  margin-bottom: 24px;
+  border: 1px solid rgba(0, 122, 255, 0.1);
+  
+  .config-header {
+    margin-bottom: 24px;
+    
+    h2 {
+      font-size: 20px;
+      font-weight: 700;
+      color: #1d1d1f;
+      margin: 0 0 4px 0;
+    }
+    
+    p {
+      font-size: 14px;
+      color: #8e8e93;
+      margin: 0;
+    }
+  }
+  
+  .project-config-form {
+    .config-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 20px;
+      
+      @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+      }
+    }
+    
+    .config-item {
+      background: #f8f9fa;
+      border-radius: 12px;
+      padding: 16px;
+      border: 1px solid #e5e5ea;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        border-color: #007AFF;
+        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.1);
+      }
+      
+      .config-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 12px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #1d1d1f;
+        
+        svg {
+          color: #007AFF;
+        }
+      }
+      
+      .config-select, .config-input {
+        width: 100%;
+        padding: 10px 12px;
+        border: 1px solid #d1d1d6;
+        border-radius: 8px;
+        font-size: 14px;
+        background: white;
+        transition: all 0.3s ease;
+        
+        &:focus {
+          outline: none;
+          border-color: #007AFF;
+          box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
+        }
+      }
+      
+      .payment-input-group {
+        display: flex;
+        align-items: center;
+        background: white;
+        border: 1px solid #d1d1d6;
+        border-radius: 8px;
+        overflow: hidden;
+        transition: all 0.3s ease;
+        
+        &:focus-within {
+          border-color: #007AFF;
+          box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
+        }
+        
+        .payment-input {
+          flex: 1;
+          border: none;
+          padding: 10px 12px;
+          
+          &:focus {
+            outline: none;
+            box-shadow: none;
+          }
+        }
+        
+        .currency-unit {
+          padding: 10px 12px;
+          background: #f2f2f7;
+          color: #8e8e93;
+          font-size: 14px;
+          font-weight: 500;
+        }
+      }
+      
+      .confirmation-group {
+        .confirmation-checkbox {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          cursor: pointer;
+          
+          input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            accent-color: #007AFF;
+          }
+          
+          .checkbox-text {
+            font-size: 14px;
+            color: #1d1d1f;
+          }
+        }
+      }
+      
+      .payment-details {
+        display: flex;
+        gap: 8px;
+        
+        .small {
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
 // 主表单容器 - dashboard卡片风格
 .order-form {
   background-color: #ffffff;
@@ -462,6 +998,9 @@ $card-padding: 16px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
   position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   
   &::after {
     content: '';
@@ -488,6 +1027,38 @@ $card-padding: 16px;
     gap: 12px;
   }
   
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+    
+    @media (max-width: 768px) {
+      gap: 8px;
+      flex-direction: column-reverse;
+      align-items: flex-end;
+    }
+    
+    @media (max-width: 480px) {
+      flex-direction: row;
+      gap: 6px;
+      
+      .btn-sm {
+        padding: 6px 12px;
+        font-size: 13px;
+        
+        svg {
+          width: 14px;
+          height: 14px;
+        }
+        
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+  
   .icon-wrapper {
     width: 32px;
     height: 32px;
@@ -1633,6 +2204,172 @@ $card-padding: 16px;
   }
 }
 
+// 现代化按钮样式
+.btn-ghost {
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  color: #6b7280;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(8px);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    transition: left 0.5s ease;
+  }
+  
+  &:hover {
+    background: rgba(248, 250, 252, 0.95);
+    border-color: rgba(0, 0, 0, 0.12);
+    color: #374151;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    
+    &::before {
+      left: 100%;
+    }
+  }
+  
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+  }
+}
+
+.btn-sm {
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover svg {
+    transform: scale(1.1);
+  }
+}
+
+// 专门的收起按钮样式
+.btn-ghost.btn-sm {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    color: #ef4444;
+    border-color: rgba(239, 68, 68, 0.2);
+    background: rgba(254, 242, 242, 0.8);
+    
+    svg {
+      transform: rotate(90deg) scale(1.1);
+    }
+  }
+  
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  }
+  
+  &:active {
+    transform: translateY(0) scale(0.98);
+    
+    svg {
+      transform: rotate(90deg) scale(1.05);
+    }
+  }
+}
+
+// 专门的提取按钮样式
+.btn-primary.btn-sm {
+  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.5s ease;
+  }
+  
+  &:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+    
+    &::before {
+      left: 100%;
+    }
+  }
+  
+  &:active:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  }
+  
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 2px 8px rgba(59, 130, 246, 0.25);
+  }
+  
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
+    
+    &::before {
+      display: none;
+    }
+  }
+  
+  mat-spinner {
+    width: 16px !important;
+    height: 16px !important;
+    
+    ::ng-deep circle {
+      stroke: white;
+      stroke-width: 3;
+    }
+  }
+  
+  // 加载状态的脉冲效果
+  &:disabled mat-spinner {
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
 // iOS风格操作按钮区域
 .action-section {
   background-color: $background-tertiary;

src/app/pages/customer-service/consultation-order/consultation-order.ts

@@ -113,23 +113,36 @@ export class ConsultationOrder {
   requirementForm: FormGroup;
   // 客户表单
   customerForm: FormGroup;
+  // 项目配置表单
+  projectForm: FormGroup;
 
   // 样式选项
   styleOptions = [
     '现代简约', '北欧风', '工业风', '新中式', '法式轻奢', '日式', '美式', '混搭'
   ];
   
-  // 户型选项
-  houseTypeOptions = [
-    '一室一厅', '两室一厅', '两室两厅', '三室一厅', '三室两厅', '四室两厅', '复式', '别墅', '其他'
-  ];
-  
-  // 装修类型选项
-  decorationTypeOptions = [
-    '全包', '半包', '清包', '旧房翻新', '局部改造'
+  // 装修风格选项（用于项目配置）
+  decorationStyles = [
+    { value: 'modern', label: '现代简约' },
+    { value: 'nordic', label: '北欧风' },
+    { value: 'industrial', label: '工业风' },
+    { value: 'chinese', label: '新中式' },
+    { value: 'french', label: '法式轻奢' },
+    { value: 'japanese', label: '日式' },
+    { value: 'american', label: '美式' },
+    { value: 'mixed', label: '混搭' }
   ];
 
   // 项目小组选项
+  projectGroups = [
+    { value: 'design1', label: '设计一组' },
+    { value: 'design2', label: '设计二组' },
+    { value: 'design3', label: '设计三组' },
+    { value: 'premium', label: '高端定制组' },
+    { value: 'soft', label: '软装设计组' }
+  ];
+
+  // 项目小组选项（兼容性）
   projectGroupOptions = [
     '设计一组', '设计二组', '设计三组', '高端定制组', '软装设计组'
   ];
@@ -148,7 +161,7 @@ export class ConsultationOrder {
     private snackBar: MatSnackBar,
     private dialog: MatDialog
   ) {
-    // 初始化需求表单
+    // 初始化需求表单（保留兼容性）
     this.requirementForm = this.fb.group({
       style: ['', Validators.required],
       budget: ['', Validators.required],
@@ -178,6 +191,16 @@ export class ConsultationOrder {
       followUpStatus: ['']
     });
 
+    // 初始化项目配置表单
+    this.projectForm = this.fb.group({
+      style: ['', Validators.required], // 风格选择
+      projectGroup: ['', Validators.required], // 项目组匹配
+      downPaymentSetting: ['', Validators.required], // 首付款设置
+      downPaymentAmount: ['', [Validators.required, Validators.min(0)]], // 首付款填写
+      firstDraftConfirm: [false, Validators.requiredTrue], // 首稿时间确认
+      firstDraftDate: ['', Validators.required] // 首稿时间设置
+    });
+
     // 自动生成下单时间
     this.orderTime.set(new Date().toLocaleString('zh-CN', {
       year: 'numeric',
@@ -262,6 +285,12 @@ export class ConsultationOrder {
       source: customer.source || '',
       remark: customer.remark || ''
     });
+    
+    // 如果是老客户，自动填充历史信息
+    if (customer.customerType === '老客户' || customer.customerType === 'VIP客户') {
+      this.loadCustomerHistory(customer.id);
+    }
+    
     // 清空搜索结果
     this.searchResults.set([]);
     this.searchKeyword.set('');
@@ -624,4 +653,102 @@ export class ConsultationOrder {
       this.snackBar.open('客户信息填写完成', '确定', { duration: 2000 });
     }, 1000);
   }
+
+  // 加载客户历史信息
+  loadCustomerHistory(customerId: string) {
+    // 模拟加载客户历史信息
+    const mockHistory = {
+      projects: [
+        { id: '1', name: '三室两厅装修', style: '现代简约', status: '已完成' },
+        { id: '2', name: '厨房改造', style: '北欧风', status: '进行中' }
+      ],
+      feedback: [
+        '对设计师服务很满意',
+        '希望能加快施工进度',
+        '材料质量很好'
+      ],
+      preferences: {
+        style: 'modern',
+        projectGroup: 'design1'
+      }
+    };
+
+    // 根据历史偏好预填充项目配置
+    if (mockHistory.preferences) {
+      this.projectForm.patchValue({
+        style: mockHistory.preferences.style,
+        projectGroup: mockHistory.preferences.projectGroup
+      });
+    }
+
+    this.snackBar.open('已自动填充客户历史偏好信息', '关闭', {
+      duration: 3000,
+      horizontalPosition: 'center',
+      verticalPosition: 'top'
+    });
+  }
+
+  // 创建新客户
+  createNewCustomer() {
+    // 重置表单为新客户状态
+    this.selectedCustomer.set(null);
+    this.customerForm.reset({
+      customerType: '新客户'
+    });
+    this.projectForm.reset();
+    this.searchKeyword.set('');
+    this.searchResults.set([]);
+  }
+
+  // 验证项目配置表单
+  isProjectFormValid(): boolean {
+    return this.projectForm.valid && this.customerForm.valid;
+  }
+
+  // 获取首付款设置选项
+  getDownPaymentOptions() {
+    return [
+      { value: '30', label: '30%' },
+      { value: '50', label: '50%' },
+      { value: '70', label: '70%' },
+      { value: 'custom', label: '自定义' }
+    ];
+  }
+
+  // 提交简化的订单
+  submitSimplifiedOrder() {
+    if (!this.isProjectFormValid()) {
+      this.snackBar.open('请完善必填信息', '关闭', {
+        duration: 3000,
+        horizontalPosition: 'center',
+        verticalPosition: 'top'
+      });
+      return;
+    }
+
+    this.isSubmitting.set(true);
+
+    const orderData = {
+      customer: this.customerForm.value,
+      project: this.projectForm.value,
+      orderTime: this.orderTime()
+    };
+
+    // 模拟提交
+    setTimeout(() => {
+      this.isSubmitting.set(false);
+      this.showSuccessMessage.set(true);
+      
+      this.snackBar.open('订单创建成功！', '关闭', {
+        duration: 3000,
+        horizontalPosition: 'center',
+        verticalPosition: 'top'
+      });
+
+      // 3秒后隐藏成功消息
+      setTimeout(() => {
+        this.showSuccessMessage.set(false);
+      }, 3000);
+    }, 2000);
+  }
 }