ng-code/src/app/modules/editor/editor.component.html

<div class="editor-container">
  <!-- 顶部工具栏 -->
  <mat-toolbar color="primary" class="editor-toolbar">
    <button mat-icon-button (click)="goBack()" aria-label="返回">
      <mat-icon>arrow_back</mat-icon>
    </button>
    <span class="toolbar-title">
      @if (project) {
        {{ project.title }}
        <span class="project-subtitle">{{ project.agent_name }}</span>
      } @else {
        项目编辑器
      }
    </span>
    
    <span class="spacer"></span>
    
    <!-- SSE连接状态 -->
    <span class="sse-status" [class.connected]="sseConnected" [class.disconnected]="!sseConnected">
      <mat-icon>{{ sseConnected ? 'wifi' : 'wifi_off' }}</mat-icon>
      <span class="sse-text">{{ sseConnected ? '已连接' : '已断开' }}</span>
    </span>
    
    @if (isLoading) {
      <mat-spinner diameter="24" class="toolbar-spinner"></mat-spinner>
    }
  </mat-toolbar>
  
  <!-- 错误提示 -->
  @if (showError) {
    <div class="error-banner">
      <mat-icon class="error-icon">warning</mat-icon>
      <div class="error-content">
        <div class="error-title">{{ errorTitle }}</div>
        <div class="error-message">{{ errorMessage }}</div>
      </div>
    </div>
  }
  
  <!-- 主内容区域 -->
  <div class="editor-content">
    @if (!project) {
      <div class="loading-state">
        @if (isLoading) {
          <mat-spinner diameter="40"></mat-spinner>
          <p>加载项目中...</p>
        } @else {
          <div class="error-state">
            <mat-icon class="error-icon">error_outline</mat-icon>
            <h3>项目不存在或无法加载</h3>
            <button mat-raised-button color="primary" (click)="goBack()">返回首页</button>
          </div>
        }
      </div>
    } @else {
      <!-- 消息容器 -->
      <div class="messages-container" #messagesContainer>
        @for (message of messages; track message.id) {
          <app-chat-message [message]="message"></app-chat-message>
        }
        
        @if (messages.length === 0) {
          <div class="empty-messages">
            <mat-icon class="empty-icon">chat</mat-icon>
            <h3>开始对话</h3>
            <p>发送消息开始与AI助手对话</p>
          </div>
        }
      </div>
      
      <!-- 输入区域 -->
      <div class="input-container">
        <mat-form-field appearance="outline" class="message-input">
          <mat-label>输入消息...</mat-label>
          <textarea 
            matInput 
            #messageInput
            [(ngModel)]="userInput" 
            (keydown)="onSendMessage($event)"
            [disabled]="isSending"
            rows="2"
            placeholder="输入消息，按Enter发送，Shift+Enter换行"
          ></textarea>
          <button 
            mat-icon-button 
            matSuffix 
            (click)="sendMessage()"
            [disabled]="!userInput.trim() || isSending"
            aria-label="发送消息"
          >
            @if (isSending) {
              <mat-spinner diameter="20"></mat-spinner>
            } @else {
              <mat-icon>send</mat-icon>
            }
          </button>
        </mat-form-field>
      </div>
    }
  </div>
</div>