ng-code/backup-original/app/components/log-display.component.html

<div class="log-container">
  <!-- 日志头部控制 -->
  <div class="log-header">
    <h3 class="text-lg font-semibold">系统日志</h3>
    <div class="log-controls">
      <mat-form-field appearance="outline" class="level-filter">
        <mat-label>日志级别</mat-label>
        <mat-select [(ngModel)]="selectedLevel" (selectionChange)="applyFilters()">
          <mat-option value="all">全部</mat-option>
          <mat-option value="debug">调试</mat-option>
          <mat-option value="info">信息</mat-option>
          <mat-option value="warn">警告</mat-option>
          <mat-option value="error">错误</mat-option>
        </mat-select>
      </mat-form-field>
      
      <mat-form-field appearance="outline" class="session-filter" *ngIf="availableSessions.length > 0">
        <mat-label>会话过滤</mat-label>
        <mat-select [(ngModel)]="selectedSessionId" (selectionChange)="applyFilters()">
          <mat-option value="all">全部会话</mat-option>
          <mat-option *ngFor="let session of availableSessions" [value]="session.id">
            {{ session.title }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      
      <div class="log-actions">
        <button mat-icon-button (click)="toggleAutoScroll()" matTooltip="自动滚动">
          <mat-icon>{{ autoScroll ? 'pause' : 'play_arrow' }}</mat-icon>
        </button>
        <button mat-icon-button (click)="clearLogs()" matTooltip="清空日志">
          <mat-icon>delete_sweep</mat-icon>
        </button>
        <button mat-icon-button (click)="togglePause()" matTooltip="{{ isPaused ? '继续' : '暂停' }}">
          <mat-icon>{{ isPaused ? 'play_arrow' : 'pause' }}</mat-icon>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 日志内容区域 -->
  <div class="log-content" #logContent>
    <div *ngFor="let log of filteredLogs" class="log-entry" [class]="'log-level-' + log.level">
      <div class="log-timestamp">{{ log.timestamp | date:'HH:mm:ss' }}</div>
      <div class="log-level" [class]="'level-' + log.level">
        {{ getLevelLabel(log.level) }}
      </div>
      <div class="log-message">{{ log.message }}</div>
      <div class="log-session" *ngIf="log.sessionID">
        <mat-icon class="session-icon">chat</mat-icon>
        {{ getSessionTitle(log.sessionID) }}
      </div>
    </div>
    
    <div *ngIf="filteredLogs.length === 0" class="empty-logs">
      <mat-icon>info</mat-icon>
      <p>暂无日志数据</p>
    </div>
  </div>
  
  <!-- 状态栏 -->
  <div class="log-status">
    <span>日志数量: {{ filteredLogs.length }} / {{ allLogs.length }}</span>
    <span *ngIf="selectedSessionId !== 'all'"> | 已过滤会话</span>
    <span *ngIf="selectedLevel !== 'all'"> | 级别: {{ selectedLevel }}</span>
    <span *ngIf="isPaused" class="paused-indicator"> | 已暂停</span>
  </div>
</div>