ng-code/backup-original/app/pages/project/project-page.component.html

<div class="independent-project-page">
  @if (isLoading) {
    <div class="loading">
      <mat-spinner diameter="40"></mat-spinner>
      <p>加载项目中...</p>
    </div>
  } @else if (error) {
    <div class="error">
      <mat-icon class="error-icon">error</mat-icon>
      <h3>加载失败</h3>
      <p>{{ error }}</p>
      <button mat-raised-button color="primary" (click)="goBack()">返回首页</button>
    </div>
  } @else if (project && projectId) {
    <!-- 独立子页页头：无主页菜单，简洁设计 -->
    <header class="independent-page-header">
      <div class="header-left">
        <button mat-icon-button class="back-button" (click)="goBack()" matTooltip="返回主页">
          <mat-icon>arrow_back</mat-icon>
        </button>
        <div class="project-info">
          <h1 class="project-title">{{ project.title }}</h1>
          <div class="project-meta">
            <span class="project-id">ID: {{ projectId }}</span>
            <span class="project-status">
              <mat-icon class="status-icon">circle</mat-icon>
              <span>独立连接</span>
            </span>
          </div>
        </div>
      </div>
      <div class="header-right">
        <!-- 独立连接状态指示器 -->
        <div class="connection-status" matTooltip="独立SSE连接状态">
          <mat-icon [class.connected]="independentEventService.isConnectedStatus()" 
                   [class.disconnected]="!independentEventService.isConnectedStatus()">
            {{ independentEventService.isConnectedStatus() ? 'wifi' : 'wifi_off' }}
          </mat-icon>
          <span class="status-text">
            {{ independentEventService.isConnectedStatus() ? '已连接' : '断开' }}
          </span>
        </div>
      </div>
    </header>
    
    <!-- 项目内容区域 -->
    <main class="independent-project-content">
      <app-project-tab 
        [independentEventService]="independentEventService"
        [projectId]="projectId">
      </app-project-tab>
    </main>
  }
</div>