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

<div class="consultation-order-panel">
  <!-- 面板头部 -->
  <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>

  <!-- 可滚动内容区域 -->
  <div class="panel-content">
    <!-- 客户信息栏 -->
    <section class="customer-info-section">
      <h2 class="section-title">客户信息</h2>
      
      @if (!selectedCustomer) {
        <!-- 客户搜索 -->
        <div class="search-container">
          <input 
            type="text" 
            [(ngModel)]="searchKeyword" 
            (ngModelChange)="searchCustomer()"
            placeholder="输入客户姓名或手机号搜索..."
            class="search-input"
            autocomplete="off"
          />
          <button class="search-btn" (click)="searchCustomer()">搜索</button>
        </div>
        
        <!-- 搜索结果 -->
        @if (searchResults.length > 0) {
          <div class="search-results">
            @for (customer of searchResults; track customer.id) {
              <div class="result-item" (click)="selectCustomer(customer)">
                <div class="customer-name">{{ customer.name }}</div>
                <div class="customer-info">{{ customer.phone }}</div>
              </div>
            }
          </div>
        }
      } @else {
        <!-- 已选择客户 -->
        <div class="selected-customer">
          <div class="customer-details">
            <div class="customer-name">{{ selectedCustomer.name }}</div>
            <div class="customer-phone">{{ selectedCustomer.phone }}</div>
          </div>
          <button class="clear-btn" (click)="clearSelectedCustomer()">重新选择</button>
        </div>
      }
    </section>

    <!-- 新客户表单 -->
    @if (!selectedCustomer) {
      <section class="new-customer-form">
        <h3 class="form-title">新客户信息</h3>
        <form [formGroup]="customerForm">
          <div class="form-row">
            <div class="form-group">
              <label for="wechat">微信号</label>
              <input type="text" id="wechat" formControlName="wechat" placeholder="请输入微信号（选填）">
            </div>
            <div class="form-group">
              <label for="customerType">客户类型</label>
              <select id="customerType" formControlName="customerType">
                <option value="">请选择客户类型</option>
                <option value="新客户">新客户</option>
                <option value="老客户">老客户</option>
                <option value="转介绍">转介绍</option>
              </select>
            </div>
          </div>
        </form>
      </section>
    }

    <!-- 项目需求卡片 -->
    <section class="requirements-card">
      <div class="card-header" (click)="isRequirementCardExpanded = !isRequirementCardExpanded">
        <h3 class="card-title">项目需求</h3>
        <span class="toggle-icon" [class.expanded]="isRequirementCardExpanded">▼</span>
      </div>
      
      @if (isRequirementCardExpanded) {
        <div class="card-content">
          <form [formGroup]="requirementForm">
            <!-- 基本信息 - 两列布局 -->
            <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 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 two-columns">
              <div class="form-group">
                <label for="area">房屋面积 <span class="required">*</span></label>
                <input type="number" id="area" formControlName="area" placeholder="请输入房屋面积（平方米）">
              </div>
              <div class="form-group">
                <label for="houseType">房屋类型</label>
                <input type="text" id="houseType" formControlName="houseType" placeholder="如：三室两厅">
              </div>
            </div>

            <div class="form-row two-columns">
              <div class="form-group">
                <label for="smallImageTime">小图时间</label>
                <input type="date" id="smallImageTime" formControlName="smallImageTime">
              </div>
              <div class="form-group">
                <label for="largeImageTime">大图时间</label>
                <input type="date" id="largeImageTime" formControlName="largeImageTime">
              </div>
            </div>

            <!-- 详细需求 - 单列布局 -->
            <div class="form-row single-column">
              <div class="form-group">
                <label for="spaceRequirements">涉及空间</label>
                <textarea 
                  id="spaceRequirements" 
                  formControlName="spaceRequirements" 
                  rows="3" 
                  placeholder="请描述涉及的空间，如：客厅、卧室、厨房等"
                ></textarea>
              </div>
            </div>

            <div class="form-row single-column">
              <div class="form-group">
                <label for="designAngles">设计角度</label>
                <textarea 
                  id="designAngles" 
                  formControlName="designAngles" 
                  rows="3" 
                  placeholder="请明确各个空间的展示角度"
                ></textarea>
              </div>
            </div>

            <div class="form-row single-column">
              <div class="form-group">
                <label for="specialAreaHandling">特殊区域处理</label>
                <textarea 
                  id="specialAreaHandling" 
                  formControlName="specialAreaHandling" 
                  rows="3" 
                  placeholder="请描述特殊区域的处理要求"
                ></textarea>
              </div>
            </div>

            <div class="form-row single-column">
              <div class="form-group">
                <label for="materialRequirements">材质要求</label>
                <textarea 
                  id="materialRequirements" 
                  formControlName="materialRequirements" 
                  rows="3" 
                  placeholder="请描述对材质的具体要求"
                ></textarea>
              </div>
            </div>

            <div class="form-row single-column">
              <div class="form-group">
                <label for="lightingRequirements">灯光要求</label>
                <textarea 
                  id="lightingRequirements" 
                  formControlName="lightingRequirements" 
                  rows="3" 
                  placeholder="请描述对灯光的具体要求"
                ></textarea>
              </div>
            </div>

            <!-- 偏好标签 -->
            <div class="tags-section">
              <h4 class="tags-title">偏好标签</h4>
              <div class="tags-container">
                @for (tag of preferenceTags; track tag) {
                  <span class="tag">
                    {{ tag }}
                    <button type="button" class="remove-tag" (click)="removePreferenceTag(tag)">×</button>
                  </span>
                }
              </div>
              <div class="tag-input-container">
                <input 
                  type="text" 
                  [(ngModel)]="newTag" 
                  placeholder="添加偏好标签"
                  class="tag-input"
                  (keyup.enter)="addPreferenceTag(newTag)"
                />
                <button type="button" class="add-tag-btn" (click)="addPreferenceTag(newTag)">添加</button>
              </div>
            </div>
          </form>
        </div>
      }
    </section>
  </div>

  <!-- 底部提交区域 -->
  <div class="panel-footer">
    <button 
      class="submit-btn" 
      (click)="submitForm()"
      [disabled]="isSubmitting || !isFormValid()"
      [class.disabled]="isSubmitting || !isFormValid()"
    >
      @if (isSubmitting) {
        <span>分配团队中...</span>
      } @else {
        <span>创建订单</span>
      }
    </button>
    
    <!-- 表单验证提示 -->
    @if (!isFormValid()) {
      <div class="validation-hint">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="12"></line>
          <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </svg>
        请填写完整的项目信息
      </div>
    }
  </div>
</div>

<!-- 团队分配弹窗 -->
<app-team-assignment-modal
  [isVisible]="showTeamAssignmentModal"
  (closeModal)="closeTeamAssignmentModal()"
  (confirmAssignment)="confirmTeamAssignment($event)">
</app-team-assignment-modal>