oms/omsapp/src/app/pages/message-dashboard.component.html

<nz-card nzTitle="消息推送统计概览" [nzBordered]="false">
  <div class="filter-controls">
    <nz-range-picker
      [(ngModel)]="dateRange"
      (ngModelChange)="refreshData()"
      style="width: 300px; margin-right: 16px"
    ></nz-range-picker>
    <!-- 新增策略筛选下拉框 -->
    <nz-select
      [(ngModel)]="selectedStrategy"
      (ngModelChange)="refreshData()"
      style="width: 300px; margin-right: 16px"
      nzPlaceHolder="选择策略"
    >
      <nz-option nzValue="" nzLabel="全部策略"></nz-option>
      <nz-option
        *ngFor="let strategy of strategies"
        [nzValue]="strategy"
        [nzLabel]="strategy"
      ></nz-option>
    </nz-select>
    <button
      nz-button
      nzType="primary"
      (click)="refreshData()"
      [nzLoading]="isLoading"
    >
      <span nz-icon nzType="sync"></span>刷新数据
    </button>
  </div>

  <nz-spin [nzSpinning]="isLoading">
    <!-- 整体统计卡片 -->
    <nz-card nzTitle="整体统计" style="margin-top: 16px">
      <div nz-row [nzGutter]="16" *ngIf="overallStats">
        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="总发送量"
            [nzValue]="overallStats.totalRecords || 0"
          ></nz-statistic>
        </div>

        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="发送成功率"
            [nzValue]="formatPercentage(overallStats.sentSuccessRate || 0)"
          ></nz-statistic>
          <div class="statistic-subtext">
            成功数: {{ overallStats.sent || 0 }}
          </div>
        </div>

        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="送达率"
            [nzValue]="formatPercentage(overallStats.deliveredRate || 0)"
          ></nz-statistic>
          <div class="statistic-subtext">
            送达数: {{ overallStats.delivered || 0 }}
          </div>
        </div>

        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="展示率"
            [nzValue]="formatPercentage(overallStats.displayRate || 0)"
          ></nz-statistic>
          <div class="statistic-subtext">
            展示数: {{ overallStats.displayCount || 0 }}
          </div>
        </div>

        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="点击率"
            [nzValue]="formatPercentage(overallStats.clickThroughRate || 0)"
          ></nz-statistic>
        </div>

        <div nz-col [nzSpan]="4">
          <nz-statistic
            nzTitle="失败率"
            [nzValue]="
              formatPercentage(overallStats.tokenInvalidationRate || 0)
            "
          ></nz-statistic>
          <div class="statistic-subtext">
            失败数: {{ overallStats.failed || 0 }}
          </div>
        </div>
      </div>
    </nz-card>

    <!-- 图表区域 -->
    <div nz-row [nzGutter]="16" style="margin-top: 16px">
      <div nz-col [nzSpan]="24">
        <nz-card nzTitle="每日消息量与转化率">
          <div class="chart-container">
            <canvas
              baseChart
              [type]="'bar'"
              [data]="combinedChartData"
              [options]="combinedChartOptions"
            ></canvas>
          </div>
          <div class="chart-legend">
            <div>
              <span
                class="legend-color"
                style="background-color: #1890ff"
              ></span>
              总发送量
            </div>
            <div>
              <span
                class="legend-color"
                style="background-color: #52c41a"
              ></span>
              成功发送
            </div>
            <div>
              <span
                class="legend-color"
                style="background-color: #13c2c2"
              ></span>
              已送达
            </div>
            <div>
              <span
                class="legend-color"
                style="background-color: #722ed1"
              ></span>
              已打开
            </div>
            <div>
              <span
                class="legend-color"
                style="background-color: #faad14"
              ></span>
              展示数
            </div>
            <div>
              <span
                class="legend-color"
                style="background-color: #f5222d"
              ></span>
              失败数
            </div>
            <div>
              <span class="legend-line" style="border-color: #13c2c2"></span>
              送达率
            </div>
            <div>
              <span class="legend-line" style="border-color: #faad14"></span>
              展示率
            </div>
            <div>
              <span class="legend-line" style="border-color: #722ed1"></span>
              点击率
            </div>
          </div>
        </nz-card>
      </div>
    </div>

    <!-- 统计表格标签页 -->
    <nz-tabset [(nzSelectedIndex)]="activeTab" style="margin-top: 16px">
      <!-- 按策略统计表格 -->
      <nz-tab nzTitle="按策略统计">
        <nz-table
          #strategyTable
          [nzData]="strategyStats"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          [nzBordered]="true"
          [nzSize]="'small'"
          nzTableLayout="fixed"
        >
          <thead>
            <tr>
              <th nzWidth="50px"></th>
              <th (click)="sortStrategyTable('strategyName')">
                策略名称
                <span *ngIf="strategySortField === 'strategyName'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortStrategyTable('totalRecords')">
                总发送量
                <span *ngIf="strategySortField === 'totalRecords'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortStrategyTable('sent')">
                成功数
                <span *ngIf="strategySortField === 'sent'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortStrategyTable('delivered')">
                送达数
                <span *ngIf="strategySortField === 'delivered'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortStrategyTable('displayCount')">
                展示数
                <span *ngIf="strategySortField === 'displayCount'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortStrategyTable('opened')">
                打开数
                <span *ngIf="strategySortField === 'opened'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortStrategyTable('failed')">
                失败数
                <span *ngIf="strategySortField === 'failed'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortStrategyTable('deliveredRate')">
                送达率
                <span *ngIf="strategySortField === 'deliveredRate'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortStrategyTable('displayRate')">
                展示率
                <span *ngIf="strategySortField === 'displayRate'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortStrategyTable('clickThroughRate')">
                点击率
                <span *ngIf="strategySortField === 'clickThroughRate'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortStrategyTable('tokenInvalidationRate')">
                失败率
                <span *ngIf="strategySortField === 'tokenInvalidationRate'">
                  <i
                    nz-icon
                    [nzType]="
                      strategySortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
            </tr>
          </thead>
          <tbody>
            <ng-template ngFor let-item [ngForOf]="strategyTable.data">
              <tr>
                <td
                  (click)="toggleExpand(item, 'strategy')"
                  class="expand-icon-cell"
                >
                  <i
                    nz-icon
                    [nzType]="item.expanded ? 'down' : 'right'"
                    class="expand-icon"
                  ></i>
                </td>
                <td class="strategy-name-col">
                  <a
                    (click)="navigateToStrategy(item.strategyName)"
                    *ngIf="item.strategyName"
                  >
                    {{ item.strategyName || "-" }}
                  </a>
                  <span *ngIf="!item.strategyName">-</span>
                </td>
                <td>{{ item.totalRecords || 0 }}</td>
                <td>{{ item.sent || 0 }}</td>
                <td>{{ item.delivered || 0 }}</td>
                <td>{{ item.displayCount || 0 }}</td>
                <td>{{ item.opened || 0 }}</td>
                <td>{{ item.failed || 0 }}</td>
                <td>{{ formatPercentage(item.deliveredRate || 0) }}</td>
                <td>{{ formatPercentage(item.displayRate || 0) }}</td>
                <td>{{ formatPercentage(item.clickThroughRate || 0) }}</td>
                <td>{{ formatPercentage(item.tokenInvalidationRate || 0) }}</td>
              </tr>
              <tr [nzExpand]="item.expanded">
                <td colspan="12" *ngIf="item.expanded" class="expanded-row">
                  <div *ngIf="item.loading" class="loading-container">
                    <nz-spin></nz-spin>
                  </div>
                  <div
                    *ngIf="item.dailyData && !item.loading"
                    class="expanded-content"
                  >
                    <nz-table
                      class="expanded-table"
                      [nzData]="item.dailyData"
                      [nzShowPagination]="false"
                      [nzSize]="'small'"
                      nzBordered
                    >
                      <thead>
                        <tr>
                          <th>日期</th>
                          <th>总发送量</th>
                          <th>成功数</th>
                          <th>送达数</th>
                          <th>展示数</th>
                          <th>打开数</th>
                          <th>失败数</th>
                          <th>送达率</th>
                          <th>展示率</th>
                          <th>点击率</th>
                          <th>失败率</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let daily of item.dailyData">
                          <td>{{ formatDate(daily.date) }}</td>
                          <td>{{ daily.totalRecords || 0 }}</td>
                          <td>{{ daily.sent || 0 }}</td>
                          <td>{{ daily.delivered || 0 }}</td>
                          <td>{{ daily.displayCount || 0 }}</td>
                          <td>{{ daily.opened || 0 }}</td>
                          <td>{{ daily.failed || 0 }}</td>
                          <td>
                            {{ formatPercentage(daily.deliveredRate || 0) }}
                          </td>
                          <td>
                            {{ formatPercentage(daily.displayRate || 0) }}
                          </td>
                          <td>
                            {{ formatPercentage(daily.clickThroughRate || 0) }}
                          </td>
                          <td>
                            {{
                              formatPercentage(daily.tokenInvalidationRate || 0)
                            }}
                          </td>
                        </tr>
                      </tbody>
                    </nz-table>
                  </div>
                </td>
              </tr>
            </ng-template>
          </tbody>
        </nz-table>
        <nz-empty *ngIf="strategyStats.length === 0 && !isLoading"></nz-empty>
      </nz-tab>

      <!-- 按模板统计表格 -->
      <nz-tab nzTitle="按模板统计">
        <nz-table
          #templateTable
          [nzData]="templateStats"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          [nzBordered]="true"
          [nzSize]="'small'"
          nzTableLayout="fixed"
        >
          <thead>
            <tr>
              <th nzWidth="50px"></th>
              <th (click)="sortTemplateTable('templateName')">
                模板名称
                <span *ngIf="templateSortField === 'templateName'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortTemplateTable('totalRecords')">
                总发送量
                <span *ngIf="templateSortField === 'totalRecords'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortTemplateTable('sent')">
                成功数
                <span *ngIf="templateSortField === 'sent'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortTemplateTable('delivered')">
                送达数
                <span *ngIf="templateSortField === 'delivered'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortTemplateTable('displayCount')">
                展示数
                <span *ngIf="templateSortField === 'displayCount'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortTemplateTable('opened')">
                打开数
                <span *ngIf="templateSortField === 'opened'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortTemplateTable('failed')">
                失败数
                <span *ngIf="templateSortField === 'failed'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortTemplateTable('deliveredRate')">
                送达率
                <span *ngIf="templateSortField === 'deliveredRate'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortTemplateTable('displayRate')">
                展示率
                <span *ngIf="templateSortField === 'displayRate'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortTemplateTable('clickThroughRate')">
                点击率
                <span *ngIf="templateSortField === 'clickThroughRate'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortTemplateTable('tokenInvalidationRate')">
                失败率
                <span *ngIf="templateSortField === 'tokenInvalidationRate'">
                  <i
                    nz-icon
                    [nzType]="
                      templateSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
            </tr>
          </thead>
          <tbody>
            <ng-template ngFor let-item [ngForOf]="templateTable.data">
              <tr>
                <td
                  (click)="toggleExpand(item, 'template')"
                  class="expand-icon-cell"
                >
                  <i
                    nz-icon
                    [nzType]="item.expanded ? 'down' : 'right'"
                    class="expand-icon"
                  ></i>
                </td>
                <td class="template-name-col">
                  <a
                    (click)="navigateToTemplate(item.templateName)"
                    *ngIf="item.templateName"
                  >
                    {{ item.templateName || "-" }}
                  </a>
                  <span *ngIf="!item.templateName">-</span>
                </td>
                <td>{{ item.totalRecords || 0 }}</td>
                <td>{{ item.sent || 0 }}</td>
                <td>{{ item.delivered || 0 }}</td>
                <td>{{ item.displayCount || 0 }}</td>
                <td>{{ item.opened || 0 }}</td>
                <td>{{ item.failed || 0 }}</td>
                <td>{{ formatPercentage(item.deliveredRate || 0) }}</td>
                <td>{{ formatPercentage(item.displayRate || 0) }}</td>
                <td>{{ formatPercentage(item.clickThroughRate || 0) }}</td>
                <td>{{ formatPercentage(item.tokenInvalidationRate || 0) }}</td>
              </tr>
              <tr [nzExpand]="item.expanded">
                <td colspan="12" *ngIf="item.expanded" class="expanded-row">
                  <div *ngIf="item.loading" class="loading-container">
                    <nz-spin></nz-spin>
                  </div>
                  <div
                    *ngIf="item.dailyData && !item.loading"
                    class="expanded-content"
                  >
                    <nz-table
                      class="expanded-table"
                      [nzData]="item.dailyData"
                      [nzShowPagination]="false"
                      [nzSize]="'small'"
                      nzBordered
                    >
                      <thead>
                        <tr>
                          <th>日期</th>
                          <th>总发送量</th>
                          <th>成功数</th>
                          <th>送达数</th>
                          <th>展示数</th>
                          <th>打开数</th>
                          <th>失败数</th>
                          <th>送达率</th>
                          <th>展示率</th>
                          <th>点击率</th>
                          <th>失败率</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let daily of item.dailyData">
                          <td>{{ formatDate(daily.date) }}</td>
                          <td>{{ daily.totalRecords || 0 }}</td>
                          <td>{{ daily.sent || 0 }}</td>
                          <td>{{ daily.delivered || 0 }}</td>
                          <td>{{ daily.displayCount || 0 }}</td>
                          <td>{{ daily.opened || 0 }}</td>
                          <td>{{ daily.failed || 0 }}</td>
                          <td>
                            {{ formatPercentage(daily.deliveredRate || 0) }}
                          </td>
                          <td>
                            {{ formatPercentage(daily.displayRate || 0) }}
                          </td>
                          <td>
                            {{ formatPercentage(daily.clickThroughRate || 0) }}
                          </td>
                          <td>
                            {{
                              formatPercentage(daily.tokenInvalidationRate || 0)
                            }}
                          </td>
                        </tr>
                      </tbody>
                    </nz-table>
                  </div>
                </td>
              </tr>
            </ng-template>
          </tbody>
        </nz-table>
        <nz-empty *ngIf="templateStats.length === 0 && !isLoading"></nz-empty>
      </nz-tab>

      <!-- 按国家统计表格 -->
      <nz-tab nzTitle="按国家统计">
        <nz-table
          #ccTable
          [nzData]="ccStats"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          [nzBordered]="true"
          [nzSize]="'small'"
          nzTableLayout="fixed"
        >
          <thead>
            <tr>
              <th nzWidth="50px"></th>
              <th (click)="sortCcTable('cc')">
                国家/地区
                <span *ngIf="ccSortField === 'cc'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortCcTable('totalRecords')">
                总发送量
                <span *ngIf="ccSortField === 'totalRecords'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortCcTable('sent')">
                成功数
                <span *ngIf="ccSortField === 'sent'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortCcTable('delivered')">
                送达数
                <span *ngIf="ccSortField === 'delivered'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortCcTable('displayCount')">
                展示数
                <span *ngIf="ccSortField === 'displayCount'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortCcTable('opened')">
                打开数
                <span *ngIf="ccSortField === 'opened'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortCcTable('failed')">
                失败数
                <span *ngIf="ccSortField === 'failed'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortCcTable('deliveredRate')">
                送达率
                <span *ngIf="ccSortField === 'deliveredRate'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortCcTable('displayRate')">
                展示率
                <span *ngIf="ccSortField === 'displayRate'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortCcTable('clickThroughRate')">
                点击率
                <span *ngIf="ccSortField === 'clickThroughRate'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortCcTable('tokenInvalidationRate')">
                失败率
                <span *ngIf="ccSortField === 'tokenInvalidationRate'">
                  <i
                    nz-icon
                    [nzType]="
                      ccSortDirection === 'ascend' ? 'caret-up' : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
            </tr>
          </thead>
          <tbody>
            <ng-template ngFor let-item [ngForOf]="ccTable.data">
              <tr>
                <td (click)="toggleExpand(item, 'cc')" class="expand-icon-cell">
                  <i
                    nz-icon
                    [nzType]="item.expanded ? 'down' : 'right'"
                    class="expand-icon"
                  ></i>
                </td>
                <td>
                  {{ formatCountry(item.cc) }}
                </td>
                <td>{{ item.totalRecords || 0 }}</td>
                <td>{{ item.sent || 0 }}</td>
                <td>{{ item.delivered || 0 }}</td>
                <td>{{ item.displayCount || 0 }}</td>
                <td>{{ item.opened || 0 }}</td>
                <td>{{ item.failed || 0 }}</td>
                <td>{{ formatPercentage(item.deliveredRate || 0) }}</td>
                <td>{{ formatPercentage(item.displayRate || 0) }}</td>
                <td>{{ formatPercentage(item.clickThroughRate || 0) }}</td>
                <td>{{ formatPercentage(item.tokenInvalidationRate || 0) }}</td>
              </tr>
              <tr [nzExpand]="item.expanded">
                <td colspan="12" *ngIf="item.expanded" class="expanded-row">
                  <div *ngIf="item.loading" class="loading-container">
                    <nz-spin></nz-spin>
                  </div>
                  <div
                    *ngIf="item.dailyData && !item.loading"
                    class="expanded-content"
                  >
                    <nz-table
                      class="expanded-table"
                      [nzData]="item.dailyData"
                      [nzShowPagination]="false"
                      [nzSize]="'small'"
                      nzBordered
                    >
                      <thead>
                        <tr>
                          <th>日期</th>
                          <th>总发送量</th>
                          <th>成功数</th>
                          <th>送达数</th>
                          <th>展示数</th>
                          <th>打开数</th>
                          <th>失败数</th>
                          <th>送达率</th>
                          <th>展示率</th>
                          <th>点击率</th>
                          <th>失败率</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let daily of item.dailyData">
                          <td>{{ formatDate(daily.date) }}</td>
                          <td>{{ daily.totalRecords || 0 }}</td>
                          <td>{{ daily.sent || 0 }}</td>
                          <td>{{ daily.delivered || 0 }}</td>
                          <td>{{ daily.displayCount || 0 }}</td>
                          <td>{{ daily.opened || 0 }}</td>
                          <td>{{ daily.failed || 0 }}</td>
                          <td>
                            {{ formatPercentage(daily.deliveredRate || 0) }}
                          </td>
                          <td>
                            {{ formatPercentage(daily.displayRate || 0) }}
                          </td>
                          <td>
                            {{ formatPercentage(daily.clickThroughRate || 0) }}
                          </td>
                          <td>
                            {{
                              formatPercentage(daily.tokenInvalidationRate || 0)
                            }}
                          </td>
                        </tr>
                      </tbody>
                    </nz-table>
                  </div>
                </td>
              </tr>
            </ng-template>
          </tbody>
        </nz-table>
        <nz-empty *ngIf="ccStats.length === 0 && !isLoading"></nz-empty>
      </nz-tab>

      <!-- 按图片统计表格 -->
      <nz-tab nzTitle="按图片统计">
        <nz-table
          #imageTable
          [nzData]="imageStats"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          [nzBordered]="true"
          [nzSize]="'small'"
          nzTableLayout="fixed"
        >
          <thead>
            <tr>
              <th nzWidth="50px"></th>
              <th>图片</th>
              <th (click)="sortImageTable('totalRecords')">
                总发送量
                <span *ngIf="imageSortField === 'totalRecords'">
                  <i
                    nz-icon
                    [nzType]="
                      imageSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortImageTable('sent')">
                成功数
                <span *ngIf="imageSortField === 'sent'">
                  <i
                    nz-icon
                    [nzType]="
                      imageSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortImageTable('delivered')">
                送达数
                <span *ngIf="imageSortField === 'delivered'">
                  <i
                    nz-icon
                    [nzType]="
                      imageSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortImageTable('displayCount')">
                展示数
                <span *ngIf="imageSortField === 'displayCount'">
                  <i
                    nz-icon
                    [nzType]="
                      imageSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortImageTable('opened')">
                打开数
                <span *ngIf="imageSortField === 'opened'">
                  <i
                    nz-icon
                    [nzType]="
                      imageSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortImageTable('failed')">
                失败数
                <span *ngIf="imageSortField === 'failed'">
                  <i
                    nz-icon
                    [nzType]="
                      imageSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortImageTable('deliveredRate')">
                送达率
                <span *ngIf="imageSortField === 'deliveredRate'">
                  <i
                    nz-icon
                    [nzType]="
                      imageSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortImageTable('displayRate')">
                展示率
                <span *ngIf="imageSortField === 'displayRate'">
                  <i
                    nz-icon
                    [nzType]="
                      imageSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortImageTable('clickThroughRate')">
                点击率
                <span *ngIf="imageSortField === 'clickThroughRate'">
                  <i
                    nz-icon
                    [nzType]="
                      imageSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
              <th (click)="sortImageTable('tokenInvalidationRate')">
                失败率
                <span *ngIf="imageSortField === 'tokenInvalidationRate'">
                  <i
                    nz-icon
                    [nzType]="
                      imageSortDirection === 'ascend'
                        ? 'caret-up'
                        : 'caret-down'
                    "
                  ></i>
                </span>
              </th>
            </tr>
          </thead>
          <tbody>
            <ng-template ngFor let-item [ngForOf]="imageTable.data">
              <tr>
                <td
                  (click)="toggleExpand(item, 'image')"
                  class="expand-icon-cell"
                >
                  <i
                    nz-icon
                    [nzType]="item.expanded ? 'down' : 'right'"
                    class="expand-icon"
                  ></i>
                </td>
                <td>
                  <img
                    nz-image
                    width="80px"
                    height="80px"
                    *ngIf="item.image"
                    nzSrc="{{ item.image }}"
                    alt="统计图片"
                  />
                  <span *ngIf="!item.image">-</span>
                </td>
                <td>{{ item.totalRecords || 0 }}</td>
                <td>{{ item.sent || 0 }}</td>
                <td>{{ item.delivered || 0 }}</td>
                <td>{{ item.displayCount || 0 }}</td>
                <td>{{ item.opened || 0 }}</td>
                <td>{{ item.failed || 0 }}</td>
                <td>{{ formatPercentage(item.deliveredRate || 0) }}</td>
                <td>{{ formatPercentage(item.displayRate || 0) }}</td>
                <td>{{ formatPercentage(item.clickThroughRate || 0) }}</td>
                <td>{{ formatPercentage(item.tokenInvalidationRate || 0) }}</td>
              </tr>
              <tr [nzExpand]="item.expanded">
                <td colspan="12" *ngIf="item.expanded" class="expanded-row">
                  <div *ngIf="item.loading" class="loading-container">
                    <nz-spin></nz-spin>
                  </div>
                  <div
                    *ngIf="item.dailyData && !item.loading"
                    class="expanded-content"
                  >
                    <nz-table
                      class="expanded-table"
                      [nzData]="item.dailyData"
                      [nzShowPagination]="false"
                      [nzSize]="'small'"
                      nzBordered
                    >
                      <thead>
                        <tr>
                          <th>日期</th>
                          <th>总发送量</th>
                          <th>成功数</th>
                          <th>送达数</th>
                          <th>展示数</th>
                          <th>打开数</th>
                          <th>失败数</th>
                          <th>送达率</th>
                          <th>展示率</th>
                          <th>点击率</th>
                          <th>失败率</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let daily of item.dailyData">
                          <td>{{ formatDate(daily.date) }}</td>
                          <td>{{ daily.totalRecords || 0 }}</td>
                          <td>{{ daily.sent || 0 }}</td>
                          <td>{{ daily.delivered || 0 }}</td>
                          <td>{{ daily.displayCount || 0 }}</td>
                          <td>{{ daily.opened || 0 }}</td>
                          <td>{{ daily.failed || 0 }}</td>
                          <td>
                            {{ formatPercentage(daily.deliveredRate || 0) }}
                          </td>
                          <td>
                            {{ formatPercentage(daily.displayRate || 0) }}
                          </td>
                          <td>
                            {{ formatPercentage(daily.clickThroughRate || 0) }}
                          </td>
                          <td>
                            {{
                              formatPercentage(daily.tokenInvalidationRate || 0)
                            }}
                          </td>
                        </tr>
                      </tbody>
                    </nz-table>
                  </div>
                </td>
              </tr>
            </ng-template>
          </tbody>
        </nz-table>
        <nz-empty *ngIf="imageStats.length === 0 && !isLoading"></nz-empty>
      </nz-tab>
    </nz-tabset>
  </nz-spin>
</nz-card>