yss-project/src/modules/project/components/project-bottom-card/project-bottom-card.component.html

<div class="project-bottom-card">
  <!-- 加载状态 -->
  @if (loading) {
    <div class="card-skeleton">
      <div class="title-skeleton"></div>
      <div class="buttons-skeleton">
        <div class="button-skeleton"></div>
        <div class="button-skeleton"></div>
      </div>
    </div>
  } @else {
    <!-- 项目内容 -->
    <div class="card-content">
      <!-- 左侧：项目标题和状态 -->
      <div class="project-info">
        <h2 class="project-title">{{ getProjectTitle() }}</h2>
        <div class="project-meta">
          <span class="status-badge" [class]="getStatusClass()">
            {{ getProjectStatus() }}
          </span>
          @if (project?.get('deadline')) {
            <span class="deadline">
              截止: {{ project!.get('deadline') | date:'MM-dd' }}
            </span>
          }
        </div>
      </div>

      <!-- 右侧：操作按钮 -->
      <div class="action-buttons">
        <button
          class="action-button files-button"
          (click)="onShowFiles()"
          [disabled]="loading">
          <div class="button-content">
            <svg class="button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 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>
            <span class="button-text">文件</span>
            @if (fileCount > 0) {
              <span class="button-badge">{{ fileCount }}</span>
            }
          </div>
        </button>

        <button
          class="action-button members-button"
          (click)="onShowMembers()"
          [disabled]="loading">
          <div class="button-content">
            <svg class="button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
            <span class="button-text">成员</span>
            @if (memberCount > 0) {
              <span class="button-badge">{{ memberCount }}</span>
            }
          </div>
        </button>
      </div>
    </div>
  }
</div>