s202226701049/AIart-app/src/app/tab4/tab4.page.html

<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <div class="header-container">
      <ion-title class="page-title">AI学习助手</ion-title>
      <ion-icon name="help-circle-outline" class="help-icon"></ion-icon>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <div class="content-container">
    <!-- 欢迎部分 -->
    <div class="welcome-section">
      <h1>个性化学习分析</h1>
      <p class="subtitle">让AI助手帮你分析兴趣，定制专属学习计划</p>
    </div>

    <!-- 操作按钮区 -->
    <div class="action-buttons">
      <ion-button expand="block" class="main-button" (click)="openInquiry()">
        <ion-icon name="chatbubbles-outline" slot="start"></ion-icon>
        开始兴趣分析
      </ion-button>
      <ion-button expand="block" fill="outline" class="secondary-button" (click)="restoreChat('EpfDIz4WeE')">
        <ion-icon name="refresh-outline" slot="start"></ion-icon>
        恢复上次分析
      </ion-button>
    </div>

    <!-- 思维导图展示区 -->
    <div class="markmap-container">
      @if(!planMessage?.complete){
      <div class="empty-state">
        <ion-icon name="bulb-outline"></ion-icon>
        <h3>等待分析结果</h3>
        <p>开始兴趣分析后，AI将为你生成个性化的学习计划思维导图</p>
      </div>
      }
      @if(planMessage?.complete){
      <div class="result-section">
        <h2>你的个性化学习计划</h2>
        <div class="markmap-wrapper">
          <comp-markmap [markdown]="markmapResult"></comp-markmap>
        </div>
      </div>
      }
    </div>
  </div>
</ion-content>