yss-project/src/app/shared/components/customer-review-card/customer-review-card.html

<div class="customer-review-card">
  <!-- 统计数据概览 -->
  <div class="stats-overview">
    <h4>客户评价概览</h4>
    <div class="stats-grid">
      <div class="stat-item total">
        <div class="stat-value">{{ stats().totalCount }}</div>
        <div class="stat-label">总评价数</div>
      </div>
      <div class="stat-item score">
        <div class="stat-value">{{ stats().averageScore }}<span class="score-suffix">/5</span></div>
        <div class="stat-label">平均评分</div>
        <div class="star-display">
          @for (star of getStarRating(stats().averageScore); track $index) {
            <span class="star">{{ star }}</span>
          }
        </div>
      </div>
      <div class="stat-item satisfied">
        <div class="stat-value">{{ stats().satisfiedCount }}</div>
        <div class="stat-label">满意评价</div>
      </div>
      <div class="stat-item pending">
        <div class="stat-value">{{ stats().pendingCount }}</div>
        <div class="stat-label">待处理</div>
      </div>
    </div>
  </div>

  <!-- 分类统计 -->
  <div class="category-stats">
    <h5>问题分类统计</h5>
    <div class="category-grid">
      @for (category of categories; track category.value) {
        <div class="category-item">
          <span class="category-label">{{ category.label }}</span>
          <span class="category-count">{{ stats().categoryStats[category.value] || 0 }}</span>
        </div>
      }
    </div>
  </div>

  <!-- 筛选区域 -->
  <div class="filter-section">
    <div class="filter-row">
      <div class="filter-group">
        <label>状态筛选：</label>
        <div class="filter-buttons">
          <button 
            class="filter-btn"
            [class.active]="statusFilter() === 'all'"
            (click)="updateStatusFilter('all')">
            全部
          </button>
          <button 
            class="filter-btn pending"
            [class.active]="statusFilter() === '待处理'"
            (click)="updateStatusFilter('待处理')">
            待处理
          </button>
          <button 
            class="filter-btn satisfied"
            [class.active]="statusFilter() === 'satisfied'"
            (click)="updateStatusFilter('satisfied')">
            满意
          </button>
          <button 
            class="filter-btn unsatisfied"
            [class.active]="statusFilter() === 'unsatisfied'"
            (click)="updateStatusFilter('unsatisfied')">
            不满意
          </button>
        </div>
      </div>
    </div>
    
    <div class="filter-row">
      <div class="filter-group">
        <label>分类筛选：</label>
        <select 
          class="filter-select"
          [value]="categoryFilter()"
          (change)="updateCategoryFilter($event)">
          <option value="all">全部分类</option>
          @for (category of categories; track category.value) {
            <option [value]="category.value">{{ category.label }}</option>
          }
        </select>
      </div>
      
      <div class="filter-group">
        <label>评分筛选：</label>
        <select 
          class="filter-select"
          [value]="scoreFilter()"
          (change)="updateScoreFilter($event)">
          <option value="all">全部评分</option>
          <option value="high">高分 (4-5分)</option>
          <option value="medium">中等 (2-4分)</option>
          <option value="low">低分 (1-2分)</option>
        </select>
      </div>
    </div>
  </div>

  <!-- 评价列表 -->
  <div class="reviews-list">
    @if (filteredFeedbacks() && filteredFeedbacks().length > 0) {
      <div class="list-body">
        @for (feedback of filteredFeedbacks(); track feedback.id) {
          <div class="review-item" [class]="getStatusClass(feedback)">
            <div class="review-header">
              <div class="customer-info">
                <span class="customer-name">{{ feedback.customerName || '客户' }}</span>
                <span class="category-tag">{{ getCategoryLabel(getFeedbackCategory(feedback)) }}</span>
              </div>
              <div class="review-meta">
                @if (feedback.rating !== undefined) {
                  <div class="score-display" [class]="getScoreClass(feedback.rating)">
                    <div class="score-stars">
                      @for (star of getStarRating(feedback.rating); track $index) {
                        <span class="star">{{ star }}</span>
                      }
                    </div>
                    <span class="score-number">{{ feedback.rating }}/5</span>
                  </div>
                }
                <span class="status-badge" [class]="getStatusClass(feedback)">
                  {{ feedback.status }}
                </span>
              </div>
            </div>
            
            <div class="review-content">
              <p class="feedback-text">{{ feedback.content }}</p>
              @if (feedback.problemLocation) {
                <div class="problem-location">
                  <strong>问题位置：</strong>{{ feedback.problemLocation }}
                </div>
              }
              @if (feedback.referenceCase) {
                <div class="reference-case">
                  <strong>参考案例：</strong>{{ feedback.referenceCase }}
                </div>
              }
            </div>
            
            <div class="review-footer">
              <div class="time-info">
                <span class="created-time">{{ feedback.createdAt | date:'yyyy-MM-dd HH:mm' }}</span>
                @if (feedback.updatedAt && feedback.updatedAt !== feedback.createdAt) {
                  <span class="updated-time">更新于 {{ feedback.updatedAt | date:'yyyy-MM-dd HH:mm' }}</span>
                }
              </div>
              
              <!-- 处理按钮区域 -->
              <div class="action-buttons">
                @if (feedback.status === '待处理') {
                  <button 
                    class="action-btn process-btn"
                    (click)="startProcessing(feedback.id)">
                    开始处理
                  </button>
                  <button 
                    class="action-btn reply-btn"
                    (click)="openReplyModal(feedback)">
                    回复客户
                  </button>
                } @else if (feedback.status === '处理中') {
                  <button 
                    class="action-btn complete-btn"
                    (click)="markAsResolved(feedback.id)">
                    标记完成
                  </button>
                  <button 
                    class="action-btn reply-btn"
                    (click)="openReplyModal(feedback)">
                    回复客户
                  </button>
                } @else {
                  <button 
                    class="action-btn view-btn"
                    (click)="viewDetails(feedback)">
                    查看详情
                  </button>
                }
              </div>
              
              @if (feedback.response) {
                <div class="response-section">
                  <strong>处理回复：</strong>
                  <p class="response-text">{{ feedback.response }}</p>
                </div>
              }
            </div>
          </div>
        }
      </div>
    } @else {
      <div class="empty-state">
        <div class="empty-icon">💬</div>
        <div class="empty-title">暂无客户评价</div>
        <div class="empty-desc">当前筛选条件下没有找到相关的客户评价记录</div>
      </div>
    }
  </div>
</div>