ng-code/backup-original/app/components/project-tab.component.html

<div class="project-tab-container" [style.gridTemplateColumns]="leftWidth + 'px 8px ' + middleWidth + 'px 8px 1fr'">
  <!-- 左侧面板：项目信息和步骤列表 -->
  <div class="left-panel">
    @if (project) {
      <!-- 项目信息卡片 -->
      <mat-card class="project-info-card">
        <mat-card-header>
          <mat-card-title>{{ project.title }}</mat-card-title>
          <mat-card-subtitle>
            <span class="agent-chip">{{ getAgentDisplayName(project.agent_name) }}</span>
            <span class="status-chip" [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>person</mat-icon>
              <span>{{ project.user_id || '未知用户' }}</span>
            </div>
            <div class="meta-item">
              <mat-icon>calendar_today</mat-icon>
              <span>{{ formatDate(project.created_at) }}</span>
            </div>
          </div>
          
          <!-- 进度条 -->
          <div class="progress-section">
            <div class="progress-label">项目进度</div>
            <mat-progress-bar 
              mode="determinate" 
              [value]="getProgressValue(project.status)">
            </mat-progress-bar>
            <div class="progress-text">{{ getProgressText(project.status) }}</div>
          </div>
          
          <!-- 最新日志 -->
          <div class="latest-log">
            <div class="log-header">
              <mat-icon>info</mat-icon>
              <span>最新日志</span>
            </div>
            <div class="log-content">项目已创建，等待需求文档输入</div>
          </div>
        </mat-card-content>
      </mat-card>
      
      <!-- 步骤列表 -->
      <mat-accordion class="steps-accordion" multi>
        <!-- 需求文档 -->
        <mat-expansion-panel [expanded]="project.status === 'requirement_document'">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>description</mat-icon>
              <span>需求文档</span>
            </mat-panel-title>
            <mat-panel-description>
              @if (project.status === 'requirement_document') {
                <span class="current-step">当前步骤</span>
              }
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="step-content">
            <p>详细描述项目需求和目标</p>
            <button mat-button color="primary" (click)="focusRequirementInput()">
              <mat-icon>edit</mat-icon>
              编辑需求
            </button>
          </div>
        </mat-expansion-panel>
        
        <!-- 技术文档 -->
        <mat-expansion-panel [expanded]="project.status === 'technical_document'">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>code</mat-icon>
              <span>技术文档</span>
            </mat-panel-title>
            <mat-panel-description>
              @if (project.status === 'technical_document') {
                <span class="current-step">当前步骤</span>
              }
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="step-content">
            <p>技术架构和实现方案</p>
            <div class="step-status">待完成</div>
          </div>
        </mat-expansion-panel>
        
        <!-- 代码开发 -->
        <mat-expansion-panel [expanded]="project.status === 'code'">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>terminal</mat-icon>
              <span>代码开发</span>
            </mat-panel-title>
            <mat-panel-description>
              @if (project.status === 'code') {
                <span class="current-step">当前步骤</span>
              }
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="step-content">
            <p>自动生成的代码步骤</p>
            <mat-list dense>
              <mat-list-item>
                <mat-icon matListItemIcon>looks_one</mat-icon>
                <div matListItemTitle>步骤1: 数据模型设计</div>
              </mat-list-item>
              <mat-list-item>
                <mat-icon matListItemIcon>looks_two</mat-icon>
                <div matListItemTitle>步骤2: API接口开发</div>
              </mat-list-item>
              <mat-list-item>
                <mat-icon matListItemIcon>looks_3</mat-icon>
                <div matListItemTitle>步骤3: 前端页面实现</div>
              </mat-list-item>
            </mat-list>
          </div>
        </mat-expansion-panel>
        
        <!-- 测试 -->
        <mat-expansion-panel [expanded]="project.status === 'test'">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>bug_report</mat-icon>
              <span>测试</span>
            </mat-panel-title>
            <mat-panel-description>
              @if (project.status === 'test') {
                <span class="current-step">当前步骤</span>
              }
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="step-content">
            <p>功能测试和验证</p>
            <div class="step-status">待完成</div>
          </div>
        </mat-expansion-panel>
        
        <!-- 发布 -->
        <mat-expansion-panel [expanded]="project.status === 'release'">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>rocket_launch</mat-icon>
              <span>发布</span>
            </mat-panel-title>
            <mat-panel-description>
              @if (project.status === 'release') {
                <span class="current-step">当前步骤</span>
              }
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="step-content">
            <p>部署和发布上线</p>
            <div class="step-status">待完成</div>
          </div>
        </mat-expansion-panel>
       </mat-accordion>
       
       <!-- 文档列表 -->
       <div class="document-list-section">
         <app-document-list 
           [documents]="documentSessions"
           [defaultExpanded]="false">
         </app-document-list>
       </div>
    } @else {
      <div class="no-project">
        <mat-icon>error</mat-icon>
        <p>未找到项目信息</p>
      </div>
    }
  </div>
  
  <!-- 左侧分割线（调整左侧宽度） -->
  <div class="splitter left-splitter"
       (mousedown)="startDrag($event)"
       [class.dragging]="isDragging">
    <div class="splitter-handle"></div>
  </div>
  
  <!-- 中间面板：对话区域 -->
  <div class="middle-panel">
    @if (project) {
      <div class="conversation-wrapper">
         <app-conversation 
          [instanceId]="effectiveInstanceId"
          [sessionId]="project.id"
          [independentEventService]="independentEventService">
        </app-conversation>
      </div>
    } @else {
      <div class="loading-placeholder">
        <mat-spinner diameter="40"></mat-spinner>
        <p>加载项目对话...</p>
      </div>
    }
  </div>
  
  <!-- 中间分割线（调整中间宽度） -->
  <div class="splitter middle-splitter"
       (mousedown)="startMiddleDrag($event)"
       [class.dragging]="isDraggingMiddle">
    <div class="splitter-handle"></div>
  </div>
  
  <!-- 右侧面板：AI回复显示框 -->
  <div class="right-panel">
    @if (project) {
      <div class="ai-response-wrapper">
         <app-ai-response
          [multipleSessionIds]="getDocumentSessionIds()"
          [sessionId]="project.id"
          [independentEventService]="independentEventService">
        </app-ai-response>
      </div>
    } @else {
      <div class="loading-placeholder">
        <p>加载AI响应...</p>
      </div>
    }
  </div>
</div>