s202226701010/src/app/tab2/tab2.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title class="header-title">窑忆</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" style="--background: url('/assets/images/background.jpg') no-repeat center/cover;">
  <!-- 左上角图标：控制左边栏 -->
  <div class="icon top_left" (click)="toggleSidebar()">
    <ion-icon [name]="isSidebarVisible ? 'chevron-back-outline' : 'menu-outline'"></ion-icon>
  </div>
  <!-- 左边栏 -->
  <div class="left_sidebar" [ngClass]="{ hidden: !isSidebarVisible }">
    <!-- 右上角图标：创建新对话 -->
    <div class="icon top_right" (click)="createNewChat()">
    <ion-icon name="add-circle-outline"></ion-icon>
  </div>
    <div class="sidebar_box">
    <!-- 动态显示对话列表 -->
      <div class="left_sidebar_content" *ngIf="isSidebarVisible">
        <ul>
          <li *ngFor="let conversation of conversations" (click)="switchConversation(conversation.id)" [ngClass]="{'active': conversation.id === currentConversationId}">
            <div class="conversation-item">
              <span>{{ conversation.title || '新对话' }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 导出当前对话 -->
      <div class="transparent_box" (click)="exportConversation()">
        <!-- 左侧图标 -->
        <div class="export_icon">
          <ion-icon name="download-outline"></ion-icon>
        </div>
        <!-- 右侧文字 -->
        <div class="export_text">
          导出对话
        </div>
      </div>
  </div>
    <!-- 右侧对话区域 -->
  <div class="chat_area" [ngStyle]="{'margin-left': isSidebarVisible ? '30%' : '0'}">
    <!-- 对话内容显示框 -->
    <div class="chat-container">
      <div *ngFor="let message of currentMessages" class="message-row" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'other'}">
        <!-- 用户消息内容 -->
        <div class="user-bubble" *ngIf="message.role === 'user'">
          {{ message.content}}
        </div>
        <!-- AI 消息内容 -->
        <div class="ai-message-row" *ngIf="message.role === 'other'">
          <div class="ai-bubble">
            <!-- 如果有图片，显示图片 -->
            <div *ngIf="message.image" class="ai-image">
              <img [src]="message.image" alt="生成图片" />
            </div>
            <!-- 如果是实时生成的内容，显示内容 -->
            <div *ngIf="message.content" class="ai-text">
              <div>{{ message.content }}</div>
            </div>
          </div>
        </div>
        <!-- 用户头像 -->
        <div *ngIf="message.role === 'user'" class="user-avatar">
          <img src="/assets/images/user.jpg" class="avatar" alt="用户头像">
        </div>
      </div>
    </div>
    <!-- 问题输入框 -->
    <div class="input_box">
      <!-- 语音输入图标 -->
      <ion-button (click)="startSpeechRecognition()" class="voice_button">
        <ion-icon name="mic-outline"></ion-icon>
      </ion-button>
      <!-- 输入框 -->
      <ion-input [(ngModel)]="userMessage" placeholder="输入问题..." clearInput></ion-input>
      <!-- 发送/终止按钮 -->
      <ion-button *ngIf="isGenerating; else sendButton" (click)="stopGeneration()" class="stop_button">
        <ion-icon name="pause-circle-outline"></ion-icon>
      </ion-button>
      <ng-template #sendButton>
        <ion-button (click)="sendMessage()" class="send_button">
          <ion-icon name="arrow-forward-circle-outline"></ion-icon>
        </ion-button>
      </ng-template>
    </div>
  </div>
</ion-content>