ng-code/backup-original/app/components/home.component.html

    <div class="home-container">
      <!-- 顶部工具栏 -->
      <div class="toolbar">
        <h1>项目列表</h1>
      </div>
      
      <!-- 项目卡片网格 -->
      @if (isLoading) {
        <div class="loading-state">
          <mat-spinner diameter="40"></mat-spinner>
          <p>加载项目中...</p>
        </div>
      } @else if (projects.length === 0) {
        <div class="empty-state">
          <mat-icon class="empty-icon">inbox</mat-icon>
          <h3>暂无项目</h3>
          <p>点击"新建项目"按钮创建第一个项目</p>
        </div>
      } @else {
        <div class="projects-grid">
          @for (project of projects; track project.project_id) {
            <mat-card class="project-card">
              <mat-card-header>
                <mat-card-title>{{ project.title }}</mat-card-title>
                <mat-card-subtitle>
                  <span class="agent-badge">{{ getAgentDisplayName(project.agent_name) }}</span>
                  <span class="status-badge" [class]="getStatusClass(project.status)">
                    {{ getStatusDisplayName(project.status) }}
                  </span>
                </mat-card-subtitle>
              </mat-card-header>
              
              <mat-card-content>
                @if (project.description) {
                  <p class="project-description">{{ project.description }}</p>
                }
                
                <div class="project-meta">
                  <div class="meta-item">
                    <mat-icon>calendar_today</mat-icon>
                    <span>{{ formatDate(project.created_at) }}</span>
                  </div>
                  <div class="meta-item">
                    <mat-icon>update</mat-icon>
                    <span>{{ formatDate(project.updated_at) }}</span>
                  </div>
                </div>
                
                <!-- 最新AI对话预览 -->
                <div class="log-preview">
                  <mat-icon>chat</mat-icon>
                  <span class="log-text">最新对话：{{ getProjectLatestMessage(project.project_id || project.id) }}</span>
                </div>
              </mat-card-content>
              
              <mat-card-actions>
                <button mat-button color="primary" (click)="runProject(project)">
                  <mat-icon>play_arrow</mat-icon>
                  运行
                </button>
                <button mat-button (click)="editProject(project)" [disabled]="isProjectLoading(project.project_id || project.id)">
                  @if (isProjectLoading(project.project_id || project.id)) {
                    <mat-spinner diameter="20" class="inline-spinner"></mat-spinner>
                  } @else {
                    <mat-icon>edit</mat-icon>
                  }
                  编辑
                </button>
                <button mat-button color="warn" (click)="deleteProject(project)">
                  <mat-icon>delete</mat-icon>
                  删除
                </button>
              </mat-card-actions>
            </mat-card>
          }
        </div>
      }
    </div>