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

<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <div class="header-container">
      <!-- 菜单按钮，只有在搜索未激活时显示 -->
      <ion-menu-button *ngIf="!isSearchActive" class="menu-icon"></ion-menu-button>

      <!-- 导航项，只有在搜索未激活时显示 -->
      <div *ngIf="!isSearchActive" class="nav-links">
        <span class="nav-item" (click)="red_underline('关注')" data-id="关注">关注</span>
        <span class="nav-item" (click)="red_underline('发现')" data-id="发现">发现</span>
        <span class="nav-item" (click)="red_underline('附近')" data-id="附近">附近</span>
      </div>

      <!-- 搜索图标，点击时切换搜索框 -->
      <div>
        <ion-icon name="search-outline" class="search-icon" (click)="onSearchIconClick()"></ion-icon>
      </div>

      <!-- 搜索框，只有在搜索激活时显示 -->
      <!-- 搜索框 -->
      <div class="search-bar-container" *ngIf="isSearchActive">
        <ion-searchbar [(ngModel)]="searchQuery" debounce="300" (ionInput)="onSearchInput()" placeholder="搜索描述..."
          class="custom-searchbar" [showCancelButton]="false" showClearButton="never"></ion-searchbar>
        <button class="close-btn" (click)="onCloseSearch()">返回</button>
      </div>
    </div>
  </ion-toolbar>
</ion-header>


<ion-content [fullscreen]="true">
  <!-- 分类导航 -->
  <div class="category-nav">
    <ion-toolbar>
      <ion-tabs>
        <ion-tab-bar slot="top">
          <ion-tab-button tab="home">
            <ion-icon name="home-outline" slot="start"></ion-icon>
            <ion-label>推荐</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="psychology">
            <ion-icon name="film-outline" slot="start"></ion-icon>
            <ion-label>视频</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="course">
            <ion-icon name="brush-outline" slot="start"></ion-icon>
            <ion-label>绘画</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="test">
            <ion-icon name="shirt-outline" slot="start"></ion-icon>
            <ion-label>穿搭</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="ebook">
            <ion-icon name="dance-outline" slot="start"></ion-icon>
            <ion-label>舞蹈</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    </ion-toolbar>
  </div>
  <!-- 内容网格 -->
  <div class="content-grid">
    <div class="content-card" (click)="goToDetail(artwork.WorkId)" style="cursor: pointer;"
      *ngFor="let artwork of displayedArtworks;trackBy: trackByFn">
      <img [src]="artwork.fileUrl" [alt]="artwork.title" class="card-image">
      <div class="card-content">
        <div class="title">{{artwork.title}}</div>
        <div class="description">{{artwork.description}}</div>
        <div class="user-info">
          <div class="user">
            <img [src]="artwork.avatarUrl" [alt]="artwork.userName" class="avatar">
            <div class="info">
              <span class="name" style="font-size: 12px;">{{artwork.userName}}</span>
              <span class="date">{{artwork.updatedAt| date:'MM-dd'}}</span>
            </div>
          </div>
          <div class="likes">
            <ion-icon name="heart-outline"></ion-icon>
            <span>{{artwork.likesCount}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>


</ion-content>

<!-- 添加侧边菜单 -->
<ion-menu contentId="main-content" side="start">
  <ion-content class="menu-content">
    <div class="menu-header">
      <h2>个人中心</h2>
    </div>

    <ion-list lines="none">
      <ion-item button detail>
        <ion-icon name="create-outline" slot="start"></ion-icon>
        <ion-label>创作中心</ion-label>
      </ion-item>

      <ion-item button detail>
        <ion-icon name="document-outline" slot="start"></ion-icon>
        <ion-label>我的草稿</ion-label>
      </ion-item>

      <ion-item button detail>
        <ion-icon name="chatbubble-outline" slot="start"></ion-icon>
        <ion-label>我的评论</ion-label>
      </ion-item>

      <ion-item button detail>
        <ion-icon name="heart-outline" slot="start"></ion-icon>
        <ion-label>我的收藏</ion-label>
      </ion-item>

      <ion-item button detail>
        <ion-icon name="time-outline" slot="start"></ion-icon>
        <ion-label>浏览记录</ion-label>
      </ion-item>

    </ion-list>
  </ion-content>
</ion-menu>

<!-- 主内容区域添加 id -->
<div class="ion-page" id="main-content">
  <!-- 其他内容持不变 -->
</div>