Saas-voc/src/modules/listing-ai/components/listing-overview-table/listing-overview-table.component.html

<section aria-labelledby="overview-table-title">
  <div class="table-heading">
    <div><h2 id="overview-table-title">Listing 评分列表</h2><p>默认按可提升分降序，商品 ID 始终作为稳定次级排序键。</p></div>
    @if (currentCursor) { <button type="button" class="page-action" (click)="firstPage.emit()">回到第一页</button> }
  </div>

  <div class="desktop-table">
    <table>
      <thead><tr>
        <th scope="col">商品</th><th scope="col">分类 / 状态</th>
        <th scope="col"><button type="button" (click)="toggleSort('overallScore')">总分 {{ sortIndicator('overallScore') }}</button></th>
        @for (dimension of dimensions; track dimension.key) { <th scope="col"><button type="button" (click)="toggleSort(dimension.key)">{{ dimension.label }} {{ sortIndicator(dimension.key) }}</button></th> }
        <th scope="col">最弱维度</th><th scope="col"><button type="button" (click)="toggleSort('improvementPotential')">可提升分 {{ sortIndicator('improvementPotential') }}</button></th><th scope="col">覆盖率 / 版本</th><th scope="col">优先级</th>
        <th scope="col">评分性质</th><th scope="col"><button type="button" (click)="toggleSort('scoredAt')">评分时间 {{ sortIndicator('scoredAt') }}</button></th><th scope="col">操作</th>
      </tr></thead>
      <tbody>
        @for (item of items; track item.productId) {
          <tr [class.simulation-row]="item.scoreNature === 'simulation'">
            <td><div class="product-cell">@if (item.imageUrl) { <img [src]="item.imageUrl" [alt]="item.title || '商品图片'"> } @else { <span class="image-placeholder" aria-label="无商品图片">无图</span> }<div><strong>{{ item.title || '暂无商品标题' }}</strong><span>ID {{ item.productId }}</span></div></div></td>
            <td><strong>{{ item.categoryName || '未分类' }}</strong><small>{{ item.categoryPath.length ? item.categoryPath.join(' / ') : item.itemStatusLabel }}</small><span class="status-text">{{ item.itemStatusLabel }}</span></td>
            <td class="overall-cell"><strong class="overall-score" [class.missing]="item.overallScore === null">{{ overallText(item) }}</strong></td>
            @for (dimension of dimensions; track dimension.key) { <td><strong [class.zero-score]="dimensionValue(item,dimension.key)?.score === 0" [class.missing]="dimensionValue(item,dimension.key)?.score === null">{{ dimensionText(item, dimension.key) }}</strong><small>{{ rateText(dimensionValue(item,dimension.key)?.rate ?? null) }}</small></td> }
            <td>{{ item.weakestDimension ? dimensionLabels[item.weakestDimension] : '无法判断' }}</td>
            <td><strong>{{ item.improvementPotential === null ? '未知' : item.improvementPotential + ' 分' }}</strong></td>
            <td><strong>{{ item.coveragePercent === null || item.coveragePercent === undefined ? '未知' : item.coveragePercent + '%' }}</strong><small>{{ item.rubricVersion || '未评分版本' }}</small></td><td><span class="priority-cell">{{ item.priority || '—' }}</span></td>
            <td><span class="nature-badge" [class.simulation]="item.scoreNature === 'simulation'">{{ item.scoreNatureLabel }}</span>@if (item.scoreNature === 'simulation') { <small class="simulation-note">非正式业务评分</small> }</td>
            <td><time [attr.datetime]="item.scoredAt || null">{{ item.scoredAt ? (item.scoredAt | date:'yyyy-MM-dd HH:mm') : '尚未评分' }}</time><small>同步 {{ item.syncedAt | date:'MM-dd HH:mm' }}</small></td>
            <td><a class="detail-link" [routerLink]="['/listing-ai/workbench', item.productId]" [queryParams]="{ returnTo: returnTo }" (click)="detailOpen.emit()">查看详情</a></td>
          </tr>
        }
      </tbody>
    </table>
  </div>

  <div class="mobile-list" aria-label="移动端 Listing 评分列表">
    @for (item of items; track item.productId) {
      <article class="mobile-card" [class.simulation-row]="item.scoreNature === 'simulation'">
        <header><div><strong>{{ item.title || '暂无商品标题' }}</strong><span>ID {{ item.productId }} · {{ item.categoryName || '未分类' }}</span></div><strong class="mobile-score">{{ overallText(item) }}{{ item.overallScore === null ? '' : ' 分' }}</strong></header>
        <div class="mobile-meta"><span>{{ item.itemStatusLabel }}</span><span>{{ item.coveragePercent === null || item.coveragePercent === undefined ? '覆盖未知' : '覆盖 ' + item.coveragePercent + '%' }}</span><span class="nature-badge" [class.simulation]="item.scoreNature === 'simulation'">{{ item.scoreNatureLabel }}{{ item.scoreNature === 'simulation' ? ' · 非正式业务评分' : '' }}</span><span>{{ item.priority || '无优先级' }}</span></div>
        <div class="mobile-dimensions">@for (dimension of dimensions; track dimension.key) { <span><small>{{ dimension.label }}</small><strong>{{ dimensionText(item, dimension.key) }}</strong><small>{{ rateText(dimensionValue(item,dimension.key)?.rate ?? null) }}</small></span> }</div>
        <footer><span>最弱：{{ item.weakestDimension ? dimensionLabels[item.weakestDimension] : '无法判断' }}</span><span>可提升：{{ item.improvementPotential === null ? '未知' : item.improvementPotential + ' 分' }}</span><a [routerLink]="['/listing-ai/workbench', item.productId]" [queryParams]="{ returnTo: returnTo }" (click)="detailOpen.emit()">查看详情</a></footer>
      </article>
    }
  </div>

  <div class="pagination" aria-label="游标分页">
    @if (currentCursor) { <button type="button" (click)="firstPage.emit()" [disabled]="loading">第一页</button> }
    @if (nextCursor) { <button type="button" class="next" (click)="nextPage.emit()" [disabled]="loading">{{ loading ? '加载中…' : '下一页' }}</button> }
    @if (!nextCursor && items.length) { <span>已到当前筛选结果末页</span> }
  </div>
</section>