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

<section class="plain-view">
  <header class="page-hero">
    <div class="page-hero-copy">
      <p class="eyebrow">资源库</p>
      <h2>把本地媒体表变成 AI 能读懂的资源池</h2>
      <small>媒介维护表格，AI 负责识别平台、字段、报价、缺失项和可用账号。</small>
      <div class="page-guide">
        <span><b>目标</b>检查资源是否可用</span>
        <span><b>操作</b>同步、确认映射、处理缺口</span>
        <span><b>产出</b>可召回账号资源池</span>
      </div>
    </div>
    <div class="page-actions">
      <button type="button" class="ghost-button" (click)="state.confirmAllMappings()">确认全部映射</button>
      <button type="button" class="primary-button compact" (click)="state.runResourceSync()">同步资源库</button>
    </div>
  </header>

  <div class="path-box">
    <span>本地资源目录</span>
    <strong>{{ state.resourcePath }}</strong>
    <small>若目录不存在，Demo 使用内置样例；正式版会扫描《4月份媒体推荐资源表.xlsx》并自动做字段映射。</small>
  </div>

  <section class="resource-health-grid">
    <article *ngFor="let item of state.resourceHealthItems">
      <span>{{ item.label }}</span>
      <strong>{{ item.value }}%</strong>
      <div class="progress"><i [style.width.%]="item.value"></i></div>
      <small>{{ item.detail }}</small>
    </article>
  </section>

  <div class="resource-grid">
    <article
      *ngFor="let resource of state.resources"
      [class.active]="state.selectedResourcePlatform === resource.platform"
      (click)="state.selectResourcePlatform(resource.platform)"
    >
      <strong>{{ resource.platform }}</strong>
      <span>{{ resource.status }}</span>
      <div class="progress"><i [style.width.%]="resource.fresh"></i></div>
      <small>资源 {{ resource.total }} 条 · 匹配 {{ resource.matched }} 条 · 新鲜度 {{ resource.fresh }}%</small>
    </article>
  </div>

  <section class="resource-detail-panel">
    <div class="section-mini-head">
      <div>
        <strong>{{ state.selectedResource.platform }} 平台详情</strong>
        <small>资源文件、样例账号和字段缺口联动展示</small>
      </div>
      <button type="button" class="ghost-button compact" (click)="state.rescanSelectedResource()">重新扫描该平台</button>
    </div>

    <div class="resource-detail-grid">
      <article class="resource-file-list">
        <strong>资源文件</strong>
        <section *ngFor="let file of state.selectedResourceFiles">
          <span>{{ file.name }}</span>
          <small>{{ file.owner }} · {{ file.updateTime }} · {{ file.rows }} 行</small>
          <div class="tag-row">
            <em *ngFor="let missing of file.missingFields">{{ missing }}</em>
          </div>
        </section>
      </article>

      <article class="resource-issue-list">
        <strong>待处理问题</strong>
        <section *ngFor="let issue of state.selectedResourceIssues">
          <header>
            <span [class.danger]="issue.level === '高'">{{ issue.level }}</span>
            <button type="button" class="text-button" (click)="state.resolveResourceIssue(issue)" [disabled]="issue.resolved">
              {{ issue.resolved ? '已处理' : '标记处理' }}
            </button>
          </header>
          <h4>{{ issue.title }}</h4>
          <p>{{ issue.detail }}</p>
          <small>{{ issue.action }}</small>
        </section>
        <p class="empty-state" *ngIf="state.selectedResourceIssues.length === 0">当前平台暂无待处理问题。</p>
      </article>

      <article class="resource-sample-list">
        <strong>匹配样例账号</strong>
        <button type="button" *ngFor="let candidate of state.selectedResourceCandidates" (click)="state.openCandidate(candidate); state.setView('workspace')">
          <span>{{ candidate.name }}</span>
          <small>{{ candidate.fans }}粉丝 · {{ candidate.price | currency: 'CNY' : 'symbol-narrow' : '1.0-0' }} · {{ candidate.styleMatch }}% 风格</small>
        </button>
      </article>
    </div>
  </section>

  <section class="resource-fix-board">
    <div class="section-mini-head">
      <div>
        <strong>资源修复队列</strong>
        <small>优先处理会阻断推荐和导出的字段问题</small>
      </div>
      <button type="button" class="ghost-button compact" (click)="state.runBusinessShortcut('review-risk')">只看风险</button>
    </div>
    <div class="resource-fix-list">
      <article *ngFor="let issue of state.resourceFixQueue">
        <span [class.danger]="issue.level === '高'">{{ issue.level }}</span>
        <div>
          <strong>{{ issue.platform }} · {{ issue.title }}</strong>
          <p>{{ issue.detail }}</p>
          <small>{{ issue.action }}</small>
        </div>
        <button type="button" class="text-button" (click)="state.resolveResourceIssue(issue)">标记处理</button>
      </article>
    </div>
  </section>

  <section class="mapping-area">
    <div class="section-mini-head">
      <strong>字段映射确认</strong>
      <small>{{ state.confirmedMappingsCount }}/{{ state.fieldMappings.length }} 已确认</small>
    </div>
    <div class="mapping-grid">
      <article *ngFor="let mapping of state.fieldMappings" [class.confirmed]="mapping.confirmed">
        <label>
          <input type="checkbox" [(ngModel)]="mapping.confirmed" />
          <span></span>
        </label>
        <div>
          <strong>{{ mapping.source }}</strong>
          <small>映射到 {{ mapping.target }}</small>
        </div>
        <em>{{ mapping.confidence }}%</em>
        <button type="button" class="text-button" (click)="state.confirmMapping(mapping)">确认</button>
      </article>
    </div>
  </section>

  <section class="resource-impact-grid">
    <article>
      <strong>缺报价</strong>
      <p>账号不能进入客户版主推，只能作为待询价备选。</p>
    </article>
    <article>
      <strong>缺主页链接</strong>
      <p>无法做近10条内容采样，风格匹配分需要人工复核。</p>
    </article>
    <article>
      <strong>缺互动数据</strong>
      <p>爆文率、阅读单价和历史表现分会降权。</p>
    </article>
    <article>
      <strong>缺供应商</strong>
      <p>履约风险升高，导出前必须绑定媒介负责人。</p>
    </article>
  </section>
</section>