Saas-voc/src/modules/domestic-voc/framework/domestic-product-development.component.html

<section class="framework-page">
  @if (loading) {
    <div class="framework-state"><app-loading-spinner size="lg" text="正在加载新品开发框架..."></app-loading-spinner></div>
  } @else if (error) {
    <div class="framework-state"><app-error-state [description]="error"></app-error-state></div>
  } @else if (dataset && summary) {
    <app-page-header
      [title]="title"
      eyebrow="Product Development"
      [description]="description"
      icon="△"
      [badges]="[{ label: '国内通用框架', tone: 'blue' }, { label: dataset.summary.reviewCount ? 'VOC 已接入' : 'VOC 待接入', tone: dataset.summary.reviewCount ? 'green' : 'amber' }]"
      [meta]="[{ label: '案例', value: dataset.caseName }, { label: '商品', value: dataset.summary.metricProducts }, { label: '竞品关系', value: dataset.summary.relations }]">
    </app-page-header>

    <app-board-tabs class="framework-tabs" [tabs]="tabs" [activeKey]="section" density="compact"></app-board-tabs>

    @if (section === 'definition' || section === 'lifecycle') {
      <div class="context-strip"><app-voc-product-picker></app-voc-product-picker></div>
    }

    @if (section === 'trend') {
      <div class="metric-grid">
        <app-summary-metric-card label="成交金额" [value]="currency(summary.gmv)" icon="¥" tone="blue" [description]="dataset.dailyTotals.length + ' 天经营周期'"></app-summary-metric-card>
        <app-summary-metric-card label="经营商品" [value]="number(dataset.summary.metricProducts)" icon="□" tone="green" [description]="dataset.summary.category2Count + ' 个二级类目'"></app-summary-metric-card>
        <app-summary-metric-card label="成交件数" [value]="number(summary.soldUnits)" icon="▣" tone="purple" [description]="number(summary.transactionOrders) + ' 笔订单'"></app-summary-metric-card>
        <app-summary-metric-card label="竞品关系" [value]="number(dataset.summary.relations)" icon="↔" tone="amber" [description]="dataset.summary.uniqueCompetitorProducts + ' 个唯一竞品'"></app-summary-metric-card>
      </div>

      <div class="two-column">
        <app-content-card title="类目经营信号" subtitle="成交金额与退款金额，仅代表当前数据周期" tone="blue">
          <div echarts class="chart" [options]="categoryOptions"></div>
        </app-content-card>
        <app-content-card title="类目机会观察" subtitle="按当前成交金额排序" tone="green">
          <div class="rank-list">
            @for (item of categories.slice(0, 6); track item.category) {
              <div class="rank-row"><div class="rank-copy"><strong>{{ item.category }}</strong><span>{{ item.productCount }} 个商品 · 转化 {{ percent(item.conversionRate) }}</span></div><span class="rank-value">{{ currency(item.gmv) }}</span></div>
            }
          </div>
        </app-content-card>
      </div>

      <app-data-table-shell title="成交商品表现" subtitle="用于识别当前周期的重点商品，不代表新品生命周期" [count]="topProducts.length">
        <table class="data-table"><thead><tr><th class="product-cell">商品</th><th>类目</th><th>成交金额</th><th>成交件数</th><th>转化率</th></tr></thead><tbody>
          @for (product of topProducts; track product.productId) {
            <tr><td class="product-cell"><app-product-identity [title]="product.title" [asin]="product.productId" [productSku]="product.model" [showImage]="false" size="xs" [detailRoute]="['/voc-insight/detail']" [detailQueryParams]="{ productId: product.productId }"></app-product-identity></td><td>{{ product.category2 || product.category1 }}</td><td>{{ currency(product.summary.gmv) }}</td><td>{{ number(product.summary.soldUnits) }}</td><td>{{ percent(product.summary.conversionRate) }}</td></tr>
          }
        </tbody></table>
      </app-data-table-shell>
    }

    @if (section === 'requirement') {
      <div class="metric-grid">
        <app-summary-metric-card label="评论样本" [value]="dataset.summary.reviewCount" icon="▤" tone="default" description="需求原声来源"></app-summary-metric-card>
        <app-summary-metric-card label="需求主题" value="-" icon="◉" tone="purple" description="等待评论主题"></app-summary-metric-card>
        <app-summary-metric-card label="未满足需求" value="-" icon="!" tone="amber" description="等待痛点证据"></app-summary-metric-card>
        <app-summary-metric-card label="使用场景" value="-" icon="⌖" tone="blue" description="等待场景原声"></app-summary-metric-card>
      </div>
      <app-alert-card title="需求挖掘框架已迁入，当前没有用户原声" description="经营指标可以反映销售和转化，但不能替代用户需求、场景或痛点证据。" primaryMetric="0 条评论" icon="!" tone="amber"></app-alert-card>
      <div class="two-column equal-column">
        <app-content-card title="显性需求" subtitle="用户明确提出的功能、规格和体验要求" variant="dashed" tone="blue"><app-empty-state variant="low-sample" title="暂无显性需求样本" description="接入评论正文后展示需求主题、频次和代表性原声。"></app-empty-state></app-content-card>
        <app-content-card title="隐性需求与机会" subtitle="从痛点、场景和期望差中提炼" variant="dashed" tone="purple"><app-empty-state title="暂无隐性需求证据" description="当前不根据经营数据猜测用户需求。"></app-empty-state></app-content-card>
      </div>
    }

    @if (section === 'benchmark') {
      <div class="metric-grid">
        <app-summary-metric-card label="已映射本品" [value]="number(dataset.mappingGroups.length)" icon="□" tone="blue" description="存在竞品配置的自营商品"></app-summary-metric-card>
        <app-summary-metric-card label="竞品关系" [value]="number(dataset.summary.relations)" icon="↔" tone="green" description="有效商品关系"></app-summary-metric-card>
        <app-summary-metric-card label="唯一竞品" [value]="number(dataset.summary.uniqueCompetitorProducts)" icon="◇" tone="purple" description="去重竞品商品"></app-summary-metric-card>
        <app-summary-metric-card label="缺失竞品" [value]="number(dataset.quality.mappingsWithoutCompetitor.length)" icon="!" [tone]="dataset.quality.mappingsWithoutCompetitor.length ? 'amber' : 'green'" description="映射质量检查"></app-summary-metric-card>
      </div>
      <app-data-table-shell title="竞品对标清单" subtitle="保留原竞品对标框架，当前展示已核验的商品关系" [count]="benchmarkGroups.length">
        <table class="data-table"><thead><tr><th>本品型号</th><th>本品商品ID</th><th>对标类目</th><th>竞品品牌</th><th>竞品数</th></tr></thead><tbody>
          @for (group of benchmarkGroups; track group.ownProductId) {
            <tr><td><strong>{{ group.model || '-' }}</strong></td><td>{{ group.ownProductId }}</td><td>{{ group.category }}</td><td>{{ relationBrands(group) }}</td><td>{{ group.competitors.length }}</td></tr>
          }
        </tbody></table>
      </app-data-table-shell>
    }

    @if (section === 'definition' && selectedProduct) {
      <div class="metric-grid">
        <app-summary-metric-card label="平均成交单价" [value]="currency(selectedProduct.summary.averageUnitPrice)" icon="¥" tone="blue" description="当前周期"></app-summary-metric-card>
        <app-summary-metric-card label="成交件数" [value]="number(selectedProduct.summary.soldUnits)" icon="▣" tone="green" description="真实经营数据"></app-summary-metric-card>
        <app-summary-metric-card label="访客转化率" [value]="percent(selectedProduct.summary.conversionRate)" icon="◎" tone="purple" description="成交客户 / 访客"></app-summary-metric-card>
        <app-summary-metric-card label="退款金额占比" [value]="percent(selectedProduct.summary.refundToGmvRate)" icon="↩" [tone]="selectedProduct.summary.refundToGmvRate >= 0.12 ? 'red' : 'amber'" description="退款金额 / 成交金额"></app-summary-metric-card>
      </div>
      <div class="two-column equal-column">
        <app-content-card title="产品定义底稿" subtitle="来自标准商品身份与类目数据" tone="blue">
          <app-product-identity [title]="selectedProduct.title" [asin]="selectedProduct.productId" [productSku]="selectedProduct.model" [subtitle]="selectedProduct.category3 || selectedProduct.category2" [showImage]="false" size="md"></app-product-identity>
          <div class="info-list">
            <div class="info-row"><div class="info-copy"><strong>品牌</strong><span>产品归属</span></div><span class="info-value">{{ selectedProduct.brand }}</span></div>
            <div class="info-row"><div class="info-copy"><strong>二级类目</strong><span>产品线</span></div><span class="info-value">{{ selectedProduct.category2 || '-' }}</span></div>
            <div class="info-row"><div class="info-copy"><strong>三级类目</strong><span>细分类目</span></div><span class="info-value">{{ selectedProduct.category3 || '-' }}</span></div>
            <div class="info-row"><div class="info-copy"><strong>竞品关系</strong><span>当前对标覆盖</span></div><span class="info-value">{{ selectedProduct.relationCount }} 条</span></div>
          </div>
        </app-content-card>
        <app-content-card title="VOC 定义输入" subtitle="需要评论证据才能补充的定义字段" variant="dashed" tone="amber">
          <app-empty-state variant="low-sample" title="暂无用户需求输入" description="卖点优先级、功能满意度、场景和痛点需在评论接入后补齐。"></app-empty-state>
        </app-content-card>
      </div>
    }

    @if (section === 'lifecycle' && selectedProduct) {
      <div class="metric-grid">
        <app-summary-metric-card label="周期成交金额" [value]="currency(selectedProduct.summary.gmv)" icon="¥" tone="blue" [description]="selectedProduct.trend.length + ' 个日度点'"></app-summary-metric-card>
        <app-summary-metric-card label="周期成交件数" [value]="number(selectedProduct.summary.soldUnits)" icon="▣" tone="green" description="当前数据周期"></app-summary-metric-card>
        <app-summary-metric-card label="退款金额" [value]="currency(selectedProduct.summary.refundAmount)" icon="↩" tone="amber" [description]="percent(selectedProduct.summary.refundToGmvRate) + ' 成交金额占比'"></app-summary-metric-card>
        <app-summary-metric-card label="评论样本" [value]="dataset.summary.reviewCount" icon="▤" tone="default" description="生命周期 VOC 证据"></app-summary-metric-card>
      </div>
      <app-alert-card title="当前仅支持短周期经营复盘" description="数据覆盖 2026-07-14 至 2026-07-20，不能据此判断完整上市、增长、成熟或衰退阶段。" [primaryMetric]="selectedProduct.model || selectedProduct.productId" icon="i" tone="blue"></app-alert-card>
      <app-content-card title="单商品周期趋势" subtitle="成交金额与成交件数" tone="blue"><div echarts class="chart" [options]="lifecycleOptions"></div></app-content-card>
    }
  }
</section>