tihao-ai/src/app/pages/delivery-page.component.html

<section class="plain-view delivery-view">
  <header class="page-hero">
    <div class="page-hero-copy">
      <p class="eyebrow">名单交付</p>
      <h2>对客输出讲价值，内部复核看风险</h2>
      <small>同一份名单分客户版和内部复核版，避免把供应商、风险和规则细节直接暴露给客户。</small>
      <div class="page-guide">
        <span><b>目标</b>生成可发客户的推荐表</span>
        <span><b>操作</b>切换版本、检查字段、导出名单</span>
        <span><b>产出</b>客户版 / 内部版 Excel</span>
      </div>
    </div>
    <div class="page-actions segmented-actions">
      <button type="button" class="ghost-button" [class.active]="state.previewAudience === '内部复核版'" (click)="state.setPreviewAudience('内部复核版')">内部复核版</button>
      <button type="button" class="ghost-button" [class.active]="state.previewAudience === '客户版'" (click)="state.setPreviewAudience('客户版')">客户版</button>
      <button type="button" class="ghost-button" (click)="state.toggleAdvancedWorkspace()">
        {{ state.showAdvancedWorkspace ? '收起细节' : '展开细节' }}
      </button>
      <button type="button" class="primary-button compact" (click)="state.exportRecommendations()">导出名单</button>
    </div>
  </header>

  <section class="delivery-top" [class.no-version]="state.simpleMode && !state.showAdvancedWorkspace">
    <article class="readiness-panel delivery-readiness">
      <div class="section-mini-head">
        <div>
          <strong>交付准备度</strong>
          <small>字段映射、规则、候选和采样共同计算</small>
        </div>
        <b>{{ state.exportReadiness }}%</b>
      </div>
      <div class="progress large"><i [style.width.%]="state.exportReadiness"></i></div>
      <div class="gap-list" *ngIf="state.deliveryGaps.length > 0; else ready">
        <span *ngFor="let gap of state.deliveryGaps">{{ gap }}</span>
      </div>
      <ng-template #ready>
        <p class="empty-state">当前名单已经可以作为客户版导出。</p>
      </ng-template>
    </article>

    <article class="field-config">
      <div class="section-mini-head">
        <strong>导出字段</strong>
        <small>{{ state.previewAudience }} · {{ state.selectedDeliveryFields.length }} 个字段</small>
      </div>
      <div class="field-chip-grid">
        <label *ngFor="let field of state.deliveryFields" [class.disabled]="state.previewAudience === '客户版' && !field.customer">
          <input type="checkbox" [(ngModel)]="field.selected" [disabled]="state.previewAudience === '客户版' && !field.customer" />
          <span>{{ field.label }}</span>
        </label>
      </div>
    </article>

    <article class="version-list" *ngIf="!state.simpleMode || state.showAdvancedWorkspace">
      <div class="section-mini-head">
        <strong>版本历史</strong>
        <small>需求、名单、反馈可追溯</small>
      </div>
      <section *ngFor="let version of state.deliveryVersions">
        <span>{{ version.version }}</span>
        <div>
          <strong>{{ version.title }}</strong>
          <p>{{ version.summary }}</p>
          <small>{{ version.owner }} · {{ version.time }} · {{ version.status }}</small>
        </div>
      </section>
    </article>
  </section>

  <section class="delivery-control-grid">
    <article class="delivery-checklist">
      <div class="section-mini-head">
        <div>
          <strong>交付检查清单</strong>
          <small>{{ state.deliveryChecklistDoneCount }}/{{ state.deliveryChecklist.length }} 已完成</small>
        </div>
      </div>
      <button
        type="button"
        *ngFor="let item of state.deliveryChecklist"
        [class.done]="item.done"
        (click)="state.toggleDeliveryChecklist(item)"
      >
        <span>{{ item.done ? '✓' : '·' }}</span>
        <div>
          <strong>{{ item.label }}</strong>
          <small>{{ item.detail }}</small>
        </div>
      </button>
    </article>

    <article class="delivery-copy-panel">
      <div class="section-mini-head">
        <strong>客户版摘要</strong>
        <small>可直接用于导出前口径确认</small>
      </div>
      <p>
        本次名单保留 {{ state.selectedCandidateList.length }} 个账号，主推 {{ state.strongRecommendationCount }} 个；
        推荐理由聚焦真实测评、通勤生活和轻专业成分表达。
      </p>
      <div class="tag-row">
        <span *ngFor="let field of state.selectedDeliveryFields.slice(0, 6)">{{ field }}</span>
      </div>
    </article>

    <article class="delivery-review-queue">
      <div class="section-mini-head">
        <strong>内部待处理</strong>
        <small>{{ state.reviewQueueCandidates.length }} 个账号</small>
      </div>
      <button type="button" *ngFor="let candidate of state.reviewQueueCandidates" (click)="state.openRecommendationReview(candidate)">
        <span>{{ candidate.status }}</span>
        <div>
          <strong>{{ candidate.name }}</strong>
          <small>{{ candidate.risk }}</small>
        </div>
      </button>
    </article>
  </section>

  <section class="delivery-preview">
    <div class="section-mini-head">
      <div>
        <strong>{{ state.previewAudience }}预览</strong>
        <small>展示当前已选账号，客户版隐藏内部风险字段</small>
      </div>
      <em>{{ state.selectedCandidateList.length }} 个账号</em>
    </div>

    <div class="delivery-table">
      <div class="delivery-head">
        <span>账号</span>
        <span>报价/粉丝</span>
        <span>推荐理由</span>
        <span>内容证据</span>
        <span *ngIf="state.previewAudience === '内部复核版'">内部风险</span>
      </div>
      <article *ngFor="let candidate of state.selectedCandidateList">
        <div>
          <strong>{{ candidate.name }}</strong>
          <small>{{ candidate.platform }} · {{ candidate.category || candidate.tags[0] }}</small>
        </div>
        <div>
          <strong>{{ candidate.price | currency: 'CNY' : 'symbol-narrow' : '1.0-0' }}</strong>
          <small>{{ candidate.fans }}粉丝</small>
        </div>
        <p>{{ candidate.reason }}</p>
        <div>
          <strong>{{ candidate.styleMatch }}% 风格匹配</strong>
          <small>{{ candidate.recentNotes[0].title }} · {{ candidate.recentNotes[0].match }}%</small>
        </div>
        <p *ngIf="state.previewAudience === '内部复核版'" class="risk">{{ candidate.risk }}</p>
        <div class="delivery-row-actions" *ngIf="state.previewAudience === '内部复核版'">
          <button type="button" class="text-button" (click)="state.updateCandidateStatus(candidate, '备选')">转备选</button>
          <button type="button" class="text-button" (click)="state.openRecommendationReview(candidate)">看证据</button>
        </div>
      </article>
    </div>
  </section>

  <section class="handoff-grid" *ngIf="!state.simpleMode || state.showAdvancedWorkspace">
    <article>
      <strong>客户版话术</strong>
      <p>推荐理由聚焦“为什么适合品牌”，使用真实测评、通勤生活、成分科普等可理解证据，不展示内部剔除逻辑。</p>
    </article>
    <article>
      <strong>内部复核动作</strong>
      <p>媒介在导出前确认报价、档期、供应商、风险和近 10 条内容样本，所有修改进入决策日志。</p>
    </article>
    <article>
      <strong>复盘沉淀</strong>
      <p>客户反馈进入反馈学习页，先生成待确认规则，再决定是本次任务生效、单客户生效还是长期入库。</p>
    </article>
  </section>
</section>