AI/myapp/src/app/tab2/management/scream-room/scream-room.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>情绪发泄室</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div class="scream-container">
    <h2>释放你的情绪</h2>
    <p>对着手机大声喊出来吧！我们会将你的声音转化为艺术</p>
    
    <div class="visualizer-container">
      <canvas #visualizerCanvas class="visualizer"></canvas>
    </div>
    
    <div class="controls">
      <ion-button (click)="startRecording()" [disabled]="isRecording" shape="round" color="danger">
        <ion-icon name="mic" slot="start"></ion-icon>
        开始吼叫
      </ion-button>
      
      <ion-button (click)="stopRecording()" [disabled]="!isRecording" shape="round" color="medium">
        <ion-icon name="square" slot="start"></ion-icon>
        停止
      </ion-button>
    </div>
    
    <div class="volume-display">
      <ion-progress-bar [value]="volumeLevel" color="danger"></ion-progress-bar>
      <p>当前音量: {{volumePercentage}}%</p>
    </div>
    
    <div class="result" *ngIf="waveformImage">
      <h3>你的声波艺术画</h3>
      <img [src]="waveformImage" alt="声波艺术">
      <ion-button (click)="saveArtwork()" expand="block" color="success">
        <ion-icon name="download" slot="start"></ion-icon>
        保存作品
      </ion-button>
    </div>
  </div>
</ion-content>