yss-project/src/app/shared/components/requirements-confirm-card/requirements-confirm-card-alternative.html

<!-- 备选方案：美观的卡片式布局 -->
<div class="materials-section alternative-layout">
  <!-- 文本输入区域 - 独立一行 -->
  <div class="text-upload-section">
    <div class="upload-item text-item">
      <h5>文本描述</h5>
      <form [formGroup]="materialUploadForm" (ngSubmit)="onTextSubmit()">
        <textarea 
          formControlName="textContent" 
          placeholder="请描述您的装修需求，如：希望温馨的暖木色调，适合亲子家庭，需要瑜伽区收纳..."
          rows="4">
        </textarea>
        <button type="submit" class="btn-primary btn-sm" [disabled]="!materialUploadForm.get('textContent')?.value">
          解析文本
        </button>
      </form>
    </div>
  </div>

  <!-- 参考图片和CAD图纸 - 美观卡片式并排布局 -->
  <div class="file-upload-cards">
    <!-- 参考图片上传卡片 -->
    <div class="upload-card image-card">
      <div class="card-header">
        <div class="card-icon image-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <circle cx="8.5" cy="8.5" r="1.5"></circle>
            <polyline points="21,15 16,10 5,21"></polyline>
          </svg>
        </div>
        <h5>参考图片</h5>
      </div>
      <div class="card-body">
        <div class="file-upload-zone" (click)="imageInput.click()">
          <div class="upload-content">
            <div class="upload-icon">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7,10 12,15 17,10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
              </svg>
            </div>
            <p>点击上传参考图片</p>
            <span class="hint">支持多张图片，自动分析色调和材质</span>
          </div>
        </div>
        <input #imageInput type="file" multiple accept="image/*" (change)="onFileSelected($event, 'image')" style="display: none;">
      </div>
    </div>

    <!-- CAD图纸上传卡片 -->
    <div class="upload-card cad-card">
      <div class="card-header">
        <div class="card-icon cad-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14,2 14,8 20,8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
          </svg>
        </div>
        <h5>CAD图纸</h5>
      </div>
      <div class="card-body">
        <div class="file-upload-zone" (click)="cadInput.click()">
          <div class="upload-content">
            <div class="upload-icon">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7,10 12,15 17,10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
              </svg>
            </div>
            <p>点击上传CAD图纸</p>
            <span class="hint">自动识别结构和空间尺寸</span>
          </div>
        </div>
        <input #cadInput type="file" accept=".dwg,.dxf,.pdf" (change)="onFileSelected($event, 'cad')" style="display: none;">
      </div>
    </div>
  </div>
</div>