feat:update post

fashion-app/src/app/post/post.component.html

@@ -28,7 +28,7 @@
 
      <!-- 按钮区域 -->
      <div class="button-container">
-      <ion-button fill="clear" class="action-button">
+      <ion-button fill="clear" class="action-button" >
         <ion-icon name="share-social-outline" class=""></ion-icon>
         <span>分享</span>
       </ion-button>
@@ -36,8 +36,8 @@
         <ion-icon name="chatbubble-outline"></ion-icon>
         <span>评论</span>
       </ion-button>
-      <ion-button fill="clear" class="action-button">
-        <ion-icon name="heart-outline"></ion-icon>
+      <ion-button fill="clear" class="action-button" (click)="toggleLike()">
+        <ion-icon name="heart-outline" [name]="isLiked ? 'heart' : 'heart-outline'" [style.color]="isLiked ? 'red' : 'black'"></ion-icon>
         <span>点赞</span>
       </ion-button>
     </div>

fashion-app/src/app/post/post.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { IonButton, IonContent, IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { bookmarkOutline, chatbubbleOutline, ellipsisHorizontal, heartOutline, shareSocialOutline, } from 'ionicons/icons';
+import { bookmarkOutline, chatbubbleOutline, ellipsisHorizontal, heart, heartOutline, shareSocialOutline, } from 'ionicons/icons';
 
-addIcons({ellipsisHorizontal,bookmarkOutline,shareSocialOutline,chatbubbleOutline,heartOutline})
+addIcons({ellipsisHorizontal,bookmarkOutline,shareSocialOutline,chatbubbleOutline,heartOutline,heart})
 
 @Component({
   selector: 'app-post',
@@ -19,4 +19,12 @@ export class PostComponent  implements OnInit {
 
   ngOnInit() {}
 
+   // 用于跟踪点赞状态
+   isLiked: boolean = false;
+
+   // 切换点赞状态
+   toggleLike() {
+     this.isLiked = !this.isLiked; // 切换状态
+   }
+
 }