yss-project/src/app/pages/team-leader/project-review/project-review.html

<header class="project-review-header">
  <h1>项目评审</h1>
</header>

<main class="project-review-main">
  <!-- 效果图可行性测试 -->
  <section class="feasibility-section">
    <div class="section-header">
      <h2>效果图可行性测试</h2>
    </div>
    
    <div class="test-form">
      <div class="form-group">
        <label>客户需求对图描述</label>
        <textarea [(ngModel)]="testForm.description" placeholder="请输入客户需求描述..."></textarea>
      </div>
      
      <div class="form-group">
        <label>上传效果图</label>
        <div class="file-upload">
          <input type="file" (change)="onFileSelected($event)" accept="image/png, image/jpeg">
          <div class="upload-placeholder">
            <span class="upload-icon">+</span>
            <p>点击或拖拽图片到此处上传</p>
            <p class="upload-hint">支持 PNG、JPG 格式</p>
          </div>
        </div>
        
        <div *ngIf="selectedImage" class="image-preview">
          <img [src]="selectedImage" alt="效果图预览">
          <button (click)="removeImage()" class="btn-remove">移除</button>
        </div>
      </div>
      
      <button (click)="runFeasibilityTest()" class="btn-run-test" [disabled]="!testForm.description || !selectedImage">
        运行可行性测试
      </button>
    </div>
    
    <!-- 测试结果 -->
    <div *ngIf="testResult" class="test-result">
      <div class="result-header">
        <h3>测试结果分析</h3>
        <div class="result-tags">
          <span [class]="'tag ' + (testResult.overallStatus === 'pass' ? 'pass' : testResult.overallStatus === 'warning' ? 'warning' : 'fail')">
            {{ testResult.overallStatus === 'pass' ? '通过' : testResult.overallStatus === 'warning' ? '需修改' : '不通过' }}
          </span>
        </div>
      </div>
      
      <div class="result-content">
        <div class="result-section">
          <h4>技术角度评估</h4>
          <ul class="evaluation-list">
            <li *ngFor="let item of testResult.technicalEvaluation">
              <span class="eval-label">{{ item.name }}:</span>
              <span [class]="'eval-value ' + item.status">{{ item.value }}%</span>
              <span class="eval-status">{{ getStatusLabel(item.status) }}</span>
            </li>
          </ul>
        </div>
        
        <div class="result-section">
          <h4>需求角度评估</h4>
          <p class="requirement-match">{{ testResult.requirementMatch }}</p>
          <div class="suggestions">
            <h5>修改建议:</h5>
            <ul>
              <li *ngFor="let suggestion of testResult.modificationSuggestions">{{ suggestion }}</li>
            </ul>
          </div>
        </div>
        
        <div class="reference-images">
          <h4>参考案例</h4>
          <div class="image-grid">
            <div *ngFor="let ref of testResult.referenceImages" class="reference-item">
              <img [src]="ref.url" alt="参考案例">
              <p class="reference-hint">{{ ref.hint }}</p>
            </div>
          </div>
        </div>
        
        <div class="result-actions">
          <button (click)="submitToQualityManagement()" class="btn-submit">提交至质量管理</button>
        </div>
      </div>
    </div>
  </section>

  <!-- 项目分配审核与执行 -->
  <section class="assignment-section">
    <div class="section-header">
      <h2>项目分配审核与执行</h2>
    </div>
    
    <div class="assignment-form">
      <div class="form-group">
        <label>项目名称</label>
        <select [(ngModel)]="assignmentForm.projectId">
          <option value="">请选择项目</option>
          <option *ngFor="let project of availableProjects" [value]="project.id">{{ project.name }}</option>
        </select>
      </div>
      
      <div class="form-group">
        <label>分配方式</label>
        <select [(ngModel)]="assignmentForm.assignmentType" (change)="onAssignmentTypeChange()">
          <option value="customer-service">客服指定</option>
          <option value="system-recommend">系统推荐</option>
        </select>
      </div>
      
      <!-- 客服指定分配 -->
      <div *ngIf="assignmentForm.assignmentType === 'customer-service'" class="specified-assignment">
        <div class="form-group">
          <label>客服指定设计师</label>
          <select [(ngModel)]="assignmentForm.specifiedDesignerId" (change)="checkDesignerWorkload()">
            <option value="">请选择设计师</option>
            <option *ngFor="let designer of designers" [value]="designer.id">{{ designer.name }}</option>
          </select>
        </div>
        
        <div *ngIf="designerWorkloadStatus" class="workload-status">
          <span [class]="'status ' + designerWorkloadStatus.status">
            {{ designerWorkloadStatus.message }}
          </span>
          
          <div *ngIf="designerWorkloadStatus.status === 'busy'" class="alternative-suggestions">
            <p>推荐备选设计师:</p>
            <div class="designer-suggestions">
              <div *ngFor="let suggestion of alternativeDesigners" class="designer-card">
                <p class="designer-name">{{ suggestion.name }}</p>
                <p class="designer-skill">擅长: {{ suggestion.skills }}</p>
                <p class="designer-workload">工作量: {{ suggestion.workload }}%</p>
                <button (click)="selectAlternativeDesigner(suggestion.id)" class="btn-select">选择</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 系统推荐分配 -->
      <div *ngIf="assignmentForm.assignmentType === 'system-recommend'" class="recommended-assignment">
        <div *ngIf="recommendedDesigners.length > 0" class="designer-recommendations">
          <p>系统推荐设计师 (按能力匹配度排序):</p>
          <div class="designer-cards">
            <div *ngFor="let designer of recommendedDesigners" class="designer-card">
              <div class="card-header">
                <p class="designer-name">{{ designer.name }}</p>
                <p class="match-score">匹配度: {{ designer.matchScore }}%</p>
              </div>
              <div class="card-body">
                <p class="designer-skill">擅长: {{ designer.skills }}</p>
                <p class="designer-workload">工作量: {{ designer.workload }}%</p>
                <div class="designer-stats">
                  <div class="stat-item">
                    <span class="stat-label">完成率</span>
                    <span class="stat-value">{{ designer.completionRate }}%</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">满意度</span>
                    <span class="stat-value">{{ designer.satisfactionRate }}%</span>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <button (click)="confirmAssignment(designer.id)" class="btn-assign">确认分配</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <button (click)="executeAssignment()" class="btn-execute" [disabled]="!canExecuteAssignment()">
        执行分配
      </button>
    </div>
    
    <!-- 分配结果 -->
    <div *ngIf="assignmentResult" class="assignment-result">
      <div class="result-content">
        <div class="result-icon success">✓</div>
        <h3>分配成功</h3>
        <p>{{ assignmentResult.message }}</p>
        <div class="result-details">
          <p><strong>项目:</strong> {{ assignmentResult.projectName }}</p>
          <p><strong>分配给:</strong> {{ assignmentResult.designerName }}</p>
                <p><strong>分配时间:</strong> {{ assignmentResult.assignTime | date:'yyyy-MM-dd HH:mm' }}</p>
        </div>
      </div>
    </div>
  </section>
</main>