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

<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <div class="header-container">
      <div class="search-box">
        <ion-searchbar placeholder="搜索计划" mode="ios" class="custom-searchbar"></ion-searchbar>
      </div>
      <div class="header-icons">
        <ion-icon name="bookmark-outline" class="action-icon"></ion-icon>
        <ion-icon name="notifications-outline" class="action-icon"></ion-icon>
      </div>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding-horizontal">
  @if(mapListOnline.length > 0){
  <div class="content-container">
    <!-- 标题部分 -->
    <div class="page-title">
      <h1>学习计划</h1>
      <p class="subtitle">探索你的学习之旅</p>
    </div>

    <!-- 计划卡片 -->
    <ion-card class="plan-card">
      <ion-card-header>
        <div class="card-header-content">
          <div>
            <ion-card-title>
              {{currentTitle}}
            </ion-card-title>
            <ion-card-subtitle>
              计划 {{currentIndex + 1}} / {{ mapListOnline.length }}
            </ion-card-subtitle>
          </div>
          <div class="header-actions">
            <ion-button fill="clear" class="edit-button" (click)="editPlan()">
              <ion-icon name="create-outline"></ion-icon>
              编辑计划
            </ion-button>
            <ion-button fill="clear" class="delete-button" (click)="confirmDelete()">
              <ion-icon name="trash-outline"></ion-icon>
              删除计划
            </ion-button>
          </div>
        </div>
      </ion-card-header>
      <ion-card-content>
        @if(!isEditing) {
        <comp-markmap [height]="'45vh'" [markdown]="mapListOnline[currentIndex].get('markmap')"
          [nodeStates]="nodeStates" (titleExtracted)="onTitleExtracted($event)"
          (nodeStateChange)="onNodeStateChange($event)"></comp-markmap>
        } @else {
        <div class="edit-container">
          <ion-textarea [(ngModel)]="editingMarkdown" rows="10" class="markdown-editor"
            placeholder="在此编辑你的学习计划..."></ion-textarea>
          <div class="edit-actions">
            <ion-button fill="outline" (click)="cancelEdit()">
              取消
            </ion-button>
            <ion-button (click)="savePlan()">
              保存
            </ion-button>
          </div>
        </div>
        }
      </ion-card-content>
    </ion-card>

    <!-- 导航按钮 -->
    <div class="navigation-buttons">
      <ion-button fill="clear" (click)="previousPlan()" [disabled]="currentIndex === 0" class="nav-button">
        <ion-icon name="chevron-back-outline"></ion-icon>
        <span>上一个</span>
      </ion-button>
      <ion-button fill="clear" (click)="nextPlan()" [disabled]="currentIndex === mapListOnline.length - 1"
        class="nav-button">
        <span>下一个</span>
        <ion-icon name="chevron-forward-outline"></ion-icon>
      </ion-button>
    </div>
  </div>
  }
  @else {
  <div class="no-plans">
    <ion-icon name="documents-outline"></ion-icon>
    <h2>暂无计划内容</h2>
    <p>开始创建你的第一个学习计划吧</p>
  </div>
  }
</ion-content>


<!-- <edit-tag></edit-tag>
<h1>星星打分组件演示：分值{{currentScore}}</h1>
<edit-rating-star [score]="currentScore" [scoreMax]="5" (onScoreChange)="handleScoreChange($event)">
</edit-rating-star> -->