AI/myapp/src/app/tab2/tab2.page.html

<ion-header [translucent]="true">
  <ion-toolbar class="header-toolbar">
    <div class="header-container">
      <!-- 搜索栏 -->
      <div class="search-container">
        <ion-icon name="search-outline" class="search-icon"></ion-icon>
        <ion-input 
          class="search-input" 
          placeholder="负面情绪禁止过夜——现在立刻销毁"
          placeholder-class="search-placeholder">
        </ion-input>
      </div>
      
      <!-- 添加按钮 -->
      <ion-button 
        class="add-button" 
        fill="clear" 
        (click)="addDynamic()">
        <ion-icon name="add-circle-outline" slot="icon-only"></ion-icon>
      </ion-button>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="app-content">
  <!-- 功能板块 -->
  <div class="function-grid">
    <div class="function-card card-1">
      <div class="card-content">
        <ion-icon name="heart-outline" class="card-icon"></ion-icon>
        <span class="card-title">树洞</span>
      </div>
    </div>
    <div class="function-card card-2" (click)="goThankslist('清单')">
      <div class="card-content">
        <ion-icon name="list-outline" class="card-icon"></ion-icon>
        <span class="card-title">感恩清单</span>
      </div>
    </div>
    <div class="function-card card-3">
      <div class="card-content">
        <ion-icon name="water-outline" class="card-icon"></ion-icon>
        <span class="card-title">漂流瓶</span>
      </div>
    </div>
    <div class="function-card card-4" (click)="goToManage()">
      <div class="card-content">
        <ion-icon name="flash-outline" class="card-icon"></ion-icon>
        <span class="card-title">情绪发泄室</span>
      </div>
    </div>
  </div>
  
  <!-- 动态日记标题栏 -->
  <div class="tab-container">
    <div class="tab-bar">
      <div class="tab-item" 
          *ngFor="let tab of tabs; let i = index" 
          [class.active]="activeTab === tab.id"
          (click)="switchTab(tab.id)">
        {{ tab.title }}
      </div>
      <div class="tab-indicator" [style.transform]="'translateX(' + (activeTab * 100) + '%)'"></div>
    </div>
  </div>
  
  <!-- 动态日记列表 -->
  <div class="diary-list">
    <!-- 动态项 -->
    <div class="diary-card" *ngFor="let dynamic of dynamics">
      <!-- 用户信息 -->
      <div class="user-header">
        <div class="user-avatar">{{ dynamic.get('author')?.get('username')?.charAt(0) || 'U' }}</div>
        <div class="user-meta">
          <div class="user-name">{{ dynamic.get('author')?.get('username') || '1nGXJSoOgN' }}</div>
          <!-- <div class="post-time">2小时前</div> -->
          <div class="post-time">{{ dynamic.createdAt | date:'yyyy-MM-dd HH:mm' }}</div>
        </div>
        <ion-button fill="clear" class="more-button">
          <ion-icon name="ellipsis-horizontal"></ion-icon>
        </ion-button>
      </div>
      
      <!-- 日记内容 -->
      <div class="diary-content" (click)="goToDynamic(dynamic.id)">
        <p class="content-text">{{ dynamic.get('content') }}</p>
        <div class="content-image" *ngIf="dynamic.get('images')?.length > 0">
          <img [src]="dynamic.get('images')[0]" alt="动态图片">
        </div>
      </div>
      
      <!-- 互动操作栏 -->
      <div class="action-bar">
        <ion-button fill="clear" class="action-button" (click)="toggleLike(dynamic)">
          <ion-icon 
            [name]="userInteractions[dynamic.id]?.liked ? 'heart' : 'heart-outline'" 
            [color]="userInteractions[dynamic.id]?.liked ? 'danger' : 'medium'">
          </ion-icon>
          <span class="action-count">{{ dynamic.get('likeCount') || 0 }}</span>
        </ion-button>
        
        <ion-button fill="clear" class="action-button" (click)="addComment(dynamic)">
          <ion-icon name="chatbubble-outline" color="medium"></ion-icon>
          <span class="action-count">{{ dynamic.get('commentCount') || 0 }}</span>
        </ion-button>
        
        <ion-button fill="clear" class="action-button" (click)="shareDynamic(dynamic)">
          <ion-icon name="arrow-redo-outline" color="medium"></ion-icon>
          <span class="action-count">{{ dynamic.get('shareCount') || 0 }}</span>
        </ion-button>
      </div>
    </div>
  </div>
  
  <!-- 空状态 -->
  <div class="empty-state" *ngIf="dynamics.length === 0">
    <ion-icon name="document-text-outline"></ion-icon>
    <p class="empty-text">暂无动态，点击右上角添加</p>
  </div>
</ion-content>