<div class="api-integrations">
  <!-- 页面标题 -->
  <div class="page-header">
    <h2 class="page-title">API集成管理</h2>
    <p class="page-description">配置与渲染农场等第三方服务的接口集成</p>
  </div>

  <!-- 标签页导航 -->
  <div class="tab-navigation">
    <button class="tab-btn" [class.active]="activeTab === 'integrations'"
            (click)="switchTab('integrations')">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
      </svg>
      API集成列表
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'logs'"
            (click)="switchTab('logs')">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <line x1="16" y1="13" x2="8" y2="13"></line>
        <line x1="16" y1="17" x2="8" y2="17"></line>
        <polyline points="10 9 9 9 8 9"></polyline>
      </svg>
      API调用日志
    </button>
  </div>

  <!-- API集成列表标签内容 -->
  <div *ngIf="activeTab === 'integrations'" class="tab-content">
    <!-- 搜索和筛选区域 -->
    <div class="search-filter-section">
      <div class="search-input-wrapper">
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input matInput type="text" placeholder="搜索集成名称、描述或端点..."
               [(ngModel)]="integrationSearchTerm" (keyup.enter)="onIntegrationSearch()"
               class="search-input">
        <button mat-button *ngIf="integrationSearchTerm" class="clear-search-btn"
                (click)="integrationSearchTerm = ''; onIntegrationSearch()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      
      <div class="filter-controls">
        <div class="filter-wrapper">
          <mat-select [(ngModel)]="integrationTypeFilter" (selectionChange)="onIntegrationFilterChange()"
                     placeholder="集成类型" class="filter-select">
            <mat-option value="">全部类型</mat-option>
            <mat-option *ngFor="let type of integrationTypes" [value]="type">
              {{ type }}
            </mat-option>
          </mat-select>
        </div>
        
        <div class="filter-wrapper">
          <mat-select [(ngModel)]="integrationStatusFilter" (selectionChange)="onIntegrationFilterChange()"
                     placeholder="状态" class="filter-select">
            <mat-option value="">全部状态</mat-option>
            <mat-option *ngFor="let status of integrationStatuses" [value]="status.value">
              {{ status.label }}
            </mat-option>
          </mat-select>
        </div>
        
        <button mat-button class="filter-btn" (click)="onIntegrationSearch()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
          筛选
        </button>
        
        <button mat-button class="clear-filter-btn" (click)="clearIntegrationFilters()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
          清除
        </button>
        
        <button mat-raised-button color="primary" class="create-btn"
                (click)="openApiDialog()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          添加集成
        </button>
      </div>
    </div>

    <!-- 集成统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-value">{{ apiIntegrations().length }}</div>
        <div class="stat-label">总集成数</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ activeIntegrationsCount }}</div>
        <div class="stat-label">已激活</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ inactiveIntegrationsCount }}</div>
        <div class="stat-label">已禁用</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ errorIntegrationsCount }}</div>
        <div class="stat-label">有错误</div>
      </div>
    </div>

    <!-- API集成列表 -->
    <div class="integrations-list">
      <div *ngFor="let integration of paginatedIntegrations" class="integration-item">
        <mat-accordion class="integration-accordion">
          <!-- 集成头部 -->
          <mat-expansion-panel class="integration-panel">
            <mat-expansion-panel-header class="integration-header">
              <div class="header-left">
                <div class="status-badge" [style.backgroundColor]="statusColors[integration.status]">
                  <mat-icon class="status-icon">{{ statusIcons[integration.status] }}</mat-icon>
                  {{ getStatusText(integration.status) }}
                </div>
                <div class="integration-info">
                  <h3 class="integration-name">{{ integration.name }}</h3>
                  <div class="integration-meta">
                    <span class="meta-item type">{{ integration.type }}</span>
                    <span class="meta-item auth">{{ integration.authentication }}</span>
                    <span class="meta-item last-tested" *ngIf="integration.lastTested">
                      最后测试：{{ formatDate(integration.lastTested) }}
                    </span>
                  </div>
                </div>
              </div>
              
              <div class="header-right">
                <div class="action-buttons">
                  <button mat-icon-button class="action-btn" color="primary"
                          title="测试集成"
                          (click)="testIntegration(integration.id); $event.stopPropagation()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M14 2H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z"></path>
                      <polyline points="14 2 14 8 20 8"></polyline>
                      <line x1="16" y1="13" x2="8" y2="13"></line>
                      <line x1="16" y1="17" x2="8" y2="17"></line>
                      <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                  </button>
                  <button mat-icon-button class="action-btn" color="primary"
                          title="编辑集成"
                          (click)="openApiDialog(integration); $event.stopPropagation()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                    </svg>
                  </button>
                  <button mat-icon-button class="action-btn" color="warn"
                          title="删除集成"
                          (click)="deleteIntegration(integration.id); $event.stopPropagation()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <polyline points="3,6 5,6 21,6"></polyline>
                      <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                    </svg>
                  </button>
                </div>
              </div>
            </mat-expansion-panel-header>
            
            <!-- 集成详情 -->
            <div class="integration-content">
              <div class="detail-section">
                <h4 class="section-title">基本信息</h4>
                <div class="detail-grid">
                  <div class="detail-item">
                    <label>API端点：</label>
                    <span class="detail-value">{{ integration.endpoint }}</span>
                  </div>
                  <div class="detail-item">
                    <label>认证方式：</label>
                    <span class="detail-value">{{ integration.authentication }}</span>
                  </div>
                  <div class="detail-item">
                    <label>创建人：</label>
                    <span class="detail-value">{{ integration.createdBy }}</span>
                  </div>
                  <div class="detail-item">
                    <label>创建时间：</label>
                    <span class="detail-value">{{ formatDate(integration.createdAt) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>更新时间：</label>
                    <span class="detail-value">{{ formatDate(integration.updatedAt) }}</span>
                  </div>
                </div>
              </div>
              
              <div class="detail-section">
                <h4 class="section-title">描述</h4>
                <p class="description-text">{{ integration.description }}</p>
              </div>
              
              <div class="detail-section">
                <h4 class="section-title">配置详情</h4>
                <div class="configuration-details">
                  <div class="config-item" *ngFor="let item of objectEntries(integration.configuration)">
                    <label>{{ item[0] }}：</label>
                    <span class="config-value">{{ item[1] }}</span>
                  </div>
                </div>
              </div>
              
              <div class="detail-section actions">
                <div class="status-toggle-wrapper">
                  <mat-slide-toggle
                    [checked]="integration.status === 'active'"
                    (change)="toggleIntegrationStatus(integration.id, $event.source.checked ? 'active' : 'inactive');"
                    class="status-toggle">
                    <span class="toggle-label">{{ integration.status === 'active' ? '禁用集成' : '启用集成' }}</span>
                  </mat-slide-toggle>
                </div>
                
                <button mat-button color="primary" class="test-btn"
                        (click)="testIntegration(integration.id)">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                    <polyline points="10 9 9 9 8 9"></polyline>
                  </svg>
                  测试连接
                </button>
              </div>
            </div>
          </mat-expansion-panel>
        </mat-accordion>
      </div>
    </div>

    <!-- 无数据状态 -->
    <div *ngIf="paginatedIntegrations.length === 0" class="empty-state">
      <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
      </svg>
      <p>没有找到符合条件的API集成</p>
      <button mat-button color="primary" (click)="clearIntegrationFilters()">
        清除筛选条件
      </button>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-controls">
      <div class="pagination-info">
        显示 {{ mathMin(integrationCurrentPage * integrationPageSize + 1, filteredIntegrations().length) }} -
        {{ mathMin((integrationCurrentPage + 1) * integrationPageSize, filteredIntegrations().length) }} 共 
        {{ filteredIntegrations().length }} 项
      </div>
      <div class="pagination-buttons">
        <button mat-button [disabled]="integrationCurrentPage === 0" (click)="onIntegrationPageChange(0)">
          首页
        </button>
        <button mat-button [disabled]="integrationCurrentPage === 0" (click)="onIntegrationPageChange(integrationCurrentPage - 1)">
          上一页
        </button>
        
        <!-- 页码按钮 -->
        <div class="page-numbers">
          <button mat-button *ngFor="let page of getPageNumbers()" [class.active]="page === integrationCurrentPage"
                  (click)="onIntegrationPageChange(page)">
            {{ page + 1 }}
          </button>
        </div>
        
        <button mat-button [disabled]="integrationCurrentPage === totalIntegrationPages - 1" (click)="onIntegrationPageChange(integrationCurrentPage + 1)">
          下一页
        </button>
        <button mat-button [disabled]="integrationCurrentPage === totalIntegrationPages - 1" (click)="onIntegrationPageChange(totalIntegrationPages - 1)">
          末页
        </button>
      </div>
    </div>
  </div>

  <!-- API调用日志标签内容 -->
  <div *ngIf="activeTab === 'logs'" class="tab-content">
    <!-- 搜索和筛选区域 -->
    <div class="search-filter-section">
      <div class="search-input-wrapper">
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input matInput type="text" placeholder="搜索集成名称、请求地址或错误信息..."
               [(ngModel)]="logSearchTerm" (keyup.enter)="onLogSearch()"
               class="search-input">
        <button mat-button *ngIf="logSearchTerm" class="clear-search-btn"
                (click)="logSearchTerm = ''; onLogSearch()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      
      <div class="filter-controls">
        <div class="filter-wrapper">
          <mat-select [(ngModel)]="logIntegrationFilter" (selectionChange)="onLogFilterChange()"
                     placeholder="API集成" class="filter-select">
            <mat-option value="">全部集成</mat-option>
            <mat-option *ngFor="let integration of integrationIdOptions" [value]="integration.id">
              {{ integration.name }}
            </mat-option>
          </mat-select>
        </div>
        
        <div class="filter-wrapper">
          <mat-select [(ngModel)]="logStatusFilter" (selectionChange)="onLogFilterChange()"
                     placeholder="状态" class="filter-select">
            <mat-option value="">全部状态</mat-option>
            <mat-option *ngFor="let status of logStatuses" [value]="status.value">
              {{ status.label }}
            </mat-option>
          </mat-select>
        </div>
        
        <div class="date-filter-wrapper">
          <mat-form-field appearance="outline" class="date-field">
            <mat-label>开始日期</mat-label>
            <input matInput [matDatepicker]="startDatePicker" [(ngModel)]="logStartDate" (dateChange)="onLogFilterChange()">
            <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #startDatePicker></mat-datepicker>
          </mat-form-field>
        </div>
        
        <div class="date-filter-wrapper">
          <mat-form-field appearance="outline" class="date-field">
            <mat-label>结束日期</mat-label>
            <input matInput [matDatepicker]="endDatePicker" [(ngModel)]="logEndDate" (dateChange)="onLogFilterChange()">
            <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #endDatePicker></mat-datepicker>
          </mat-form-field>
        </div>
        
        <button mat-button class="filter-btn" (click)="onLogSearch()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
          筛选
        </button>
        
        <button mat-button class="clear-filter-btn" (click)="clearLogFilters()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
          清除
        </button>
        
        <button mat-raised-button color="primary" class="export-btn"
                (click)="exportLogs()" [disabled]="filteredLogs().length === 0">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="7 10 12 15 17 10"></polyline>
            <line x1="12" y1="15" x2="12" y2="3"></line>
          </svg>
          导出日志
        </button>
      </div>
    </div>

    <!-- 日志统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-value">{{ totalApiLogsCount }}</div>
        <div class="stat-label">总调用次数</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ successLogsCount }}</div>
        <div class="stat-label">成功调用</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ errorLogsCount }}</div>
        <div class="stat-label">失败调用</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ averageResponseTime }}ms</div>
        <div class="stat-label">平均响应时间</div>
      </div>
    </div>

    <!-- 日志表格 -->
    <div class="logs-table-container">
      <table mat-table [dataSource]="paginatedLogs" class="logs-table">
        <!-- 时间戳列 -->
        <ng-container matColumnDef="timestamp">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onLogSort('timestamp')">
            <div class="header-content">
              <span>时间戳</span>
              <div class="sort-icon">
                <svg *ngIf="logSortColumn === 'timestamp'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let log" class="table-cell">
            {{ formatDate(log.timestamp) }}
          </td>
        </ng-container>

        <!-- 集成列 -->
        <ng-container matColumnDef="integrationName">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onLogSort('integrationName')">
            <div class="header-content">
              <span>API集成</span>
              <div class="sort-icon">
                <svg *ngIf="logSortColumn === 'integrationName'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let log" class="table-cell">
            <div class="integration-name">{{ log.integrationName }}</div>
          </td>
        </ng-container>

        <!-- 请求方法列 -->
        <ng-container matColumnDef="requestMethod">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onLogSort('requestMethod')">
            <div class="header-content">
              <span>请求方法</span>
              <div class="sort-icon">
                <svg *ngIf="logSortColumn === 'requestMethod'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let log" class="table-cell">
            <div class="method-badge">{{ log.requestMethod }}</div>
          </td>
        </ng-container>

        <!-- 请求URL列 -->
        <ng-container matColumnDef="requestUrl">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onLogSort('requestUrl')">
            <div class="header-content">
              <span>请求地址</span>
              <div class="sort-icon">
                <svg *ngIf="logSortColumn === 'requestUrl'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let log" class="table-cell">
            <div class="url-content" [title]="log.requestUrl">{{ log.requestUrl }}</div>
          </td>
        </ng-container>

        <!-- 状态码列 -->
        <ng-container matColumnDef="statusCode">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onLogSort('statusCode')">
            <div class="header-content">
              <span>状态码</span>
              <div class="sort-icon">
                <svg *ngIf="logSortColumn === 'statusCode'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let log" class="table-cell">
            <div class="status-code-badge" [class.success]="log.statusCode >= 200 && log.statusCode < 300" [class.error]="log.statusCode >= 400">
              {{ log.statusCode }}
            </div>
          </td>
        </ng-container>

        <!-- 响应时间列 -->
        <ng-container matColumnDef="duration">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onLogSort('duration')">
            <div class="header-content">
              <span>响应时间</span>
              <div class="sort-icon">
                <svg *ngIf="logSortColumn === 'duration'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let log" class="table-cell">
            <div class="duration-value">{{ log.duration }}ms</div>
          </td>
        </ng-container>

        <!-- 状态列 -->
        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef class="table-header"
              (click)="onLogSort('status')">
            <div class="header-content">
              <span>状态</span>
              <div class="sort-icon">
                <svg *ngIf="logSortColumn === 'status'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let log" class="table-cell">
            <div class="log-status-badge" [class.success]="log.status === 'success'" [class.error]="log.status === 'error'">
              {{ log.status === 'success' ? '成功' : '失败' }}
            </div>
            <div class="error-message" *ngIf="log.errorMessage">
              {{ log.errorMessage }}
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['timestamp', 'integrationName', 'requestMethod', 'requestUrl', 'statusCode', 'duration', 'status']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['timestamp', 'integrationName', 'requestMethod', 'requestUrl', 'statusCode', 'duration', 'status']"></tr>
      </table>

      <!-- 无数据状态 -->
      <div *ngIf="paginatedLogs.length === 0" class="empty-state">
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
          <path d="M14 2H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
          <line x1="16" y1="13" x2="8" y2="13"></line>
          <line x1="16" y1="17" x2="8" y2="17"></line>
          <polyline points="10 9 9 9 8 9"></polyline>
        </svg>
        <p>没有找到符合条件的API日志记录</p>
        <button mat-button color="primary" (click)="clearLogFilters()">
          清除筛选条件
        </button>
      </div>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-controls">
      <div class="pagination-info">
        显示 {{ mathMin(logCurrentPage * logPageSize + 1, filteredLogs().length) }} -
        {{ mathMin((logCurrentPage + 1) * logPageSize, filteredLogs().length) }} 共 
        {{ filteredLogs().length }} 项
      </div>
      <div class="pagination-buttons">
        <button mat-button [disabled]="logCurrentPage === 0" (click)="onLogPageChange(0)">
          首页
        </button>
        <button mat-button [disabled]="logCurrentPage === 0" (click)="onLogPageChange(logCurrentPage - 1)">
          上一页
        </button>
        
        <!-- 页码按钮 -->
        <div class="page-numbers">
          <button mat-button *ngFor="let page of getPageNumbers()" [class.active]="page === logCurrentPage"
                  (click)="onLogPageChange(page)">
            {{ page + 1 }}
          </button>
        </div>
        
        <button mat-button [disabled]="logCurrentPage === totalLogPages - 1" (click)="onLogPageChange(logCurrentPage + 1)">
          下一页
        </button>
        <button mat-button [disabled]="logCurrentPage === totalLogPages - 1" (click)="onLogPageChange(totalLogPages - 1)">
          末页
        </button>
      </div>
    </div>
  </div>
</div>