feat:tab1 tab4

FilmDraw-app/src/app/homepage/myposts/myposts.page.html

@@ -15,19 +15,52 @@
           <ion-item slot="header" color="light">
             <ion-label>发布的帖子</ion-label>
           </ion-item>
-          <div class="ion-padding" slot="content">帖子内容</div>
+          <div class="ion-padding" slot="content">
+      <ion-label>
+        <div class="card-section" *ngFor="let post of userPosts">
+          <ion-card>
+          <h1 class="title">帖子标题：{{ post?.get('title') }}</h1>
+          <div class="post-content-container">
+            <p class="post-content" [class.collapsed]="post?.get('content').length > 200" (click)="toggleContent(post)">
+              {{ showFullContent(post) }}
+            </p>
+            <p *ngIf="post?.get('content').length > 200" class="view-more" (click)="toggleContent(post)">
+              {{ isContentCollapsed(post) ? '查看更多' : '收起' }}
+            </p>
+          </div>
+          <img *ngIf="post?.get('avatar') !== 'undefined'" class="post-avatar" src="{{ post?.get('avatar') }}" />
+        </ion-card>
+        </div>
+      </ion-label>
+        </div>
         </ion-accordion>
+  
+
         <ion-accordion value="second">
           <ion-item slot="header" color="light">
             <ion-label>发表的评论</ion-label>
           </ion-item>
-          <div class="ion-padding" slot="content">评论内容</div>
-        </ion-accordion>
-        <ion-accordion value="third">
-          <ion-item slot="header" color="light">
-            <ion-label>未发布的帖子</ion-label>
-          </ion-item>
-          <div class="ion-padding" slot="content">草稿</div>
+           <div class="ion-padding" slot="content">
+            <ion-label>
+              <div  class="card-section" *ngFor="let comment of userComments">
+                <ion-card>
+                <div class="comment">
+                <ion-label class="mycomment">我的评论：{{ comment.get('content') }}</ion-label>
+              </div>
+              <div class="post">
+                <ng-container *ngIf="getPostByComment(comment)">
+                  <h1 class="title">帖子标题: {{ getPostByComment(comment)?.get('title') }}</h1>
+                  <p class="post-content">帖子内容: {{ getPostByComment(comment)?.get('content') }}</p>
+                  <img *ngIf="getPostByComment(comment)?.get('avatar') !== 'undefined'" class="post-avatar" src="{{ getPostByComment(comment)?.get('avatar') }}" />
+                
+                </ng-container>
+            </div>
+          </ion-card>
+              </div>
+            </ion-label>
+          </div>
+                 
+
         </ion-accordion>
 </ion-accordion-group>
 </ion-content> 

FilmDraw-app/src/app/homepage/myposts/myposts.page.scss

@@ -0,0 +1,92 @@
+ion-accordion-group {
+    margin-top: 16px;
+  }
+  
+  ion-item {
+    --inner-padding-end: 16px;
+    --inner-padding-start: 16px;
+  }
+  
+  ion-label {
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+
+  .topic {
+    color: #888;
+    font-size: 0.9em;
+  }
+  
+  .ion-padding{
+    max-height: 800px;
+  overflow-y: auto; /* 添加垂直滚动条 */
+  padding: 10px;
+}
+  .title {
+    padding: 10px;
+    font-size: 1.2rem; /* Adjust as needed */
+    font-weight: bold;
+  }
+  
+  .post-content-container {
+    margin-top: 8px; /* Space between title and content */
+  }
+  
+  .card-section {
+    flex: 1; /* 让每个卡片占据相同的空间 */
+    margin: 0 1px; /* 卡片之间的水平间距 */
+    width: 400px; /* 设置宽度，以确保在小屏幕上不会过于拥挤 */
+    flex-direction: column; /* 使卡片内容垂直排列 */
+    max-height: 500px; /* 确保卡片高度相同 */
+    overflow-y: auto;
+  }
+  .mycomment{
+
+    padding: 10px;
+    font-size: 1rem; /* Adjust as needed */
+    font-weight: bold;
+  }
+
+ .comment{
+padding: 10px;
+
+  }
+  .post{
+    padding: 10px;
+    
+      }
+  .post-content {
+    padding: 10;
+    white-space: pre-wrap; /* Ensures whitespace and line breaks are preserved */
+    margin: 8px 0;
+    transition: max-height 0.3s ease;
+    // max-height: 1000px; /* 设置最大高度，可以根据需要调整 */
+    overflow-y: auto; /* 添加垂直滚动条 */
+}
+  
+  .post-content.collapsed {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    --webkit-line-clamp: 3; /* Number of lines to show */
+    -webkit-box-orient: vertical;
+  }
+  
+  .view-more {
+    cursor: pointer;
+    color: #2a3b4e; /* Ionic's primary color */
+    text-align: right;
+  }
+ 
+.post-avatar{
+    /* 基本样式 */
+  max-width: 70%; /* 确保照片不会超过其父容器的宽度 */
+  height: auto;    /* 保持照片的宽高比 */
+  border-radius: 8px; /* 可选：给照片添加圆角 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可选：给照片添加阴影 */
+  margin-bottom: 20px; /* 可选：给照片下方添加一些间距 */
+  display: block; /* 确保照片是块级元素，以便应用margin等属性 */
+  margin-left: left; /* 水平居中（与margin-right: auto;一起使用） */ 
+  margin-right: auto;
+  }
+  

FilmDraw-app/src/app/homepage/myposts/myposts.page.ts

@@ -1,11 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, } from '@angular/forms';
 import { IonAccordion, IonAccordionGroup, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel,
+   IonList,IonCard ,
    IonTitle, IonToolbar, 
    NavController} from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { close } from 'ionicons/icons';
+import { CloudComment, CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
+
 
 @Component({
   selector: 'app-myposts',
@@ -14,14 +17,22 @@ import { close } from 'ionicons/icons';
   standalone: true,
   imports:[IonContent, IonHeader, IonTitle, IonToolbar, CommonModule,
   IonAccordionGroup, FormsModule,IonItem,IonLabel,IonAccordion,
-  IonButton,IonButtons,IonIcon,
+  IonButton,IonButtons,IonIcon,IonList,FormsModule,IonCard,
 ]
   
 })
 export class MypostsPage implements OnInit {
+  currentUser:CloudUser|undefined
+  userPosts: CloudObject[] = [];
+  userComments: CloudObject[] = [];
+  private contentStates: { [key: string]: boolean } = {}; // 存储帖子内容展开/收起状态
+  postsMap = new Map<string, CloudObject[]>();
+
+
 
   constructor(private navCtrl:NavController) {
-    addIcons({close})
+    addIcons({close});
+    this.currentUser = new CloudUser();
    }
 
 
@@ -31,7 +42,62 @@ export class MypostsPage implements OnInit {
 
 
   ngOnInit() {
+    this.fetchUserPosts();
+    this.fetchUserComments();
+  }
+  async fetchUserPosts() {
+    const query = new CloudQuery('FilmPost');
+    query.equalTo('author', this.currentUser?.toPointer());
+    this.userPosts = await query.find();
+// 初始化内容状态
+this.userPosts.forEach(post => {
+  this.contentStates[post?.id?.toString() || ''] = true; 
+});
+  }
+   // 切换帖子内容展开/收起状态的函数
+ toggleContent(post: CloudObject) {
+  const postId = post?.id?.toString() || '';
+  this.contentStates[postId] = !this.contentStates[postId];
+}
+
+  // 显示帖子完整内容的函数
+  showFullContent(post: CloudObject): string {
+    const content = post?.get('content') as string;
+    const postId = post.id?.toString() || '';
+    return this.contentStates[postId] ? `${content.slice(0, 200)}` :content ;
+  }
+ 
+  // 判断帖子内容是否已折叠的函数
+  isContentCollapsed(post: CloudObject): boolean {
+    const postId = post.id?.toString() || '';
+    return this.contentStates[postId];
   }
 
+  async fetchUserComments() {
+    const query = new CloudQuery('FilmPostComment');
+    query.equalTo('user', this.currentUser?.toPointer());
+    this.userComments = await query.find();
 
-}
+    // 获取每个评论对应的帖子信息
+    for (const comment of this.userComments) {
+      const postId = comment?.get('postId');
+      if (postId) {
+        const postQuery = new CloudQuery('FilmPost');
+        postQuery.equalTo('objectId', postId);
+        try {
+          const results: Array<CloudObject> = await postQuery.find();
+          console.log(results);
+          this.postsMap.set(postId, results);
+        } catch (error) {
+          console.error('查询出错:', error);
+        }
+      }
+    }
+  }
+
+  getPostByComment(comment: CloudObject): CloudObject | undefined {
+    const postId = comment?.get('postId');
+    const posts = this.postsMap.get(postId);
+    return posts ? posts[0] : undefined; // 假设每个postId对应一个帖子
+  }
+  }

FilmDraw-app/src/app/tab1/tab1.page.html

@@ -27,10 +27,10 @@
       </ion-card-header>
       <ion-card-content class="scrollable-content">
        <ion-list>
-        <ion-item *ngFor="let topic of filmpostList">
+        <ion-item *ngFor="let label of (labelCount|keyvalue)">
          <ion-label>
-          <h2>{{topic?.get('label')}}</h2>
-          <p>参与人数:1 👤| 热度:10086🔥 </p>
+          <h2>{{ label.key }}</h2>
+          <p>参与人数 👤| 热度:{{ label.value }}</p>
          </ion-label>
         </ion-item>
        </ion-list>
@@ -49,7 +49,7 @@
         <ion-item *ngFor="let post of filmpostList">
          <ion-label>
           <h2>{{post?.get('title')}} </h2>
-          <p>作者:{{post?.get('author')?.username}} | 评论数: {{filmpostList.length}}| 热度:</p>
+          <p>作者:{{post?.get('author')?.username}} |评论:</p>
          </ion-label>
         </ion-item>
        </ion-list>
@@ -86,7 +86,7 @@
             {{ isContentCollapsed(post) ? '查看更多' : '收起' }}
           </p>
         </div>
-            <img *ngIf="post?.get('avatar')!='undefined'" class="post-avatar"  src="{{post?.get('avatar')}}" />
+            <img *ngIf="post?.get('avatar')!='undefined'" class="post-avatar"  src="{{post?.get('avatar')}}||avatarUrl" />
         <div class="post-actions">
             <ion-button fill="clear" (click)="likePost()">👍 </ion-button>
           <ion-button fill="clear" (click)="commentPost(post?.id!)">💬</ion-button>

FilmDraw-app/src/app/tab1/tab1.page.ts

@@ -36,6 +36,8 @@ export class Tab1Page {
   private contentStates: { [key: string]: boolean } = {}; // 存储帖子内容展开/收起状态
   selectedPostId: string | undefined; // 新增属性，用于存储当前选中帖子的 ID
   avatarUrl: string = 'assets/img/default.png'; // 默认头像路径
+  labelCount: Record<string, number> = {}; // 存储标签及其数量
+  hasLiked: boolean = false; // 用户是否已点赞
 
   constructor(private modalCtrl:ModalController){
     this.currentUser=new CloudUser();
@@ -46,10 +48,9 @@ export class Tab1Page {
     ngOnInit() {
       // 生命周期：页面加载后，运行帖子列表，加载函数
       this.loadFilmPostList()
+     
     }
-  
 
-   
 
     // 查询并加载列表的函数
     async loadFilmPostList(){
@@ -61,8 +62,22 @@ export class Tab1Page {
     this.filmpostList.forEach(post => {
       this.contentStates[post?.id?.toString() || ''] = true; 
     });
+    this.calculateLabelCount(); // 在构造函数中计算标签数量
     }
     
+     //话题热度
+    calculateLabelCount() {
+      this.filmpostList.forEach(post => {
+        const label = post.get?.('label');
+        console.log(label);
+        if (this.labelCount[label]) {
+          this.labelCount[label]++;
+        } else {
+          this.labelCount[label] = 1;
+        }
+      });
+      console.log(this.labelCount);
+    }
     
 
 async openPublishModal(){
@@ -95,8 +110,15 @@ if(this.currentUser?.id){
   }
  
 
- async likePost() {
 
+  // 检查用户是否已点赞
+  async checkIfLiked() {
+    this.hasLiked = this.post?.data["likedBy"].includes(this.currentUser); // 检查当前用户是否在点赞数组中
+  }
+
+  // 点赞帖子
+  async likePost() {
+   
   }
 
  async commentPost(postId: string) {
@@ -111,7 +133,5 @@ await openPostCommentModal(this.modalCtrl, this.selectedPostId);
         // 在这里添加搜索逻辑，例如过滤列表或导航到搜索结果页面
       }
 
-
-
   
 }

FilmDraw-app/src/lib/ncloud.ts

@@ -416,7 +416,7 @@ export class CloudPost extends CloudObject {
 
     // 点赞帖子
     async likePost() {
-           }
+    }
 
     // 更新帖子数据
     async updatePost(postData: PostData) {
@@ -551,7 +551,7 @@ export class CloudFeedback extends CloudObject {
         return await this.save(); // 保存更新
     }
 
-    // 删除帖子
+    // 删除反馈
     async deleteFeedback() {
         return await this.destroy(); // 调用父类的 destroy 方法
     }

FilmDraw-app/src/lib/public/post-comment/post-comment.component.html

@@ -9,13 +9,15 @@
     <div *ngFor="let comment of commentList">
       <div>
       <div class="avatar-container">
-
+<ng-container *ngIf="getuserByComment(comment)">
           <ion-avatar class="avatar">
-          <img [src]="comment?.get('user')?.avatar || avatarUrl" alt="avatar">
+          <img [src]="getuserByComment(comment)?.get('avatar') || avatarUrl" alt="avatar">
           </ion-avatar>
             <div class="user-info">
-          <ion-label class="username">{{ comment?.get('user')?.username ||'unkown user'}}</ion-label>
+          <ion-label class="username">{{   getuserByComment(comment)?.get('username') ||'unkown user'}}</ion-label>
         </div>
+</ng-container>
+
         </div>
         <div class="content">
         <p>{{ comment?.get('content') }}</p>

FilmDraw-app/src/lib/public/post-comment/post-comment.component.ts

@@ -1,8 +1,8 @@
-import { NgFor } from '@angular/common';
+import { CommonModule, NgFor } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IonList,IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonTitle, IonToolbar, ModalController, IonToast, ToastController, IonAvatar } from '@ionic/angular/standalone';
-import { CloudComment, CloudQuery, CloudUser } from 'src/lib/ncloud';
+import { CloudComment, CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 
 
 @Component({
@@ -12,7 +12,7 @@ import { CloudComment, CloudQuery, CloudUser } from 'src/lib/ncloud';
   standalone: true,
    imports: [
      IonContent,IonList,IonItem,NgFor,IonItem,IonLabel,IonInput,IonButton,
-     IonHeader,IonToolbar,IonButtons,IonTitle,FormsModule,IonToast,IonAvatar,
+     IonHeader,IonToolbar,IonButtons,IonTitle,FormsModule,IonToast,IonAvatar,CommonModule,
      ]
 })
 export class PostCommentComponent  implements OnInit {
@@ -20,6 +20,7 @@ export class PostCommentComponent  implements OnInit {
   @Input() postId!: string; // 接收帖子 ID
   currentUser: CloudUser; // 当前用户实例
   avatarUrl: string = 'assets/img/default.png'; // 默认头像路径
+  usersMap = new Map<string, CloudObject[]>();
 
   constructor( private toastController: ToastController) {
       this.currentUser = new CloudUser(); // 初始化当前用户
@@ -31,13 +32,33 @@ export class PostCommentComponent  implements OnInit {
 
   // 加载评论
   async loadComments() {
-      let commentQuery = new CloudQuery('FilmPostComment');
-      let comments=commentQuery.equalTo('post', { "__type": "Pointer", "className": "FilmPost", "objectId": this.postId }).find();
-      try {
-          this.commentList = await comments;
-      } catch (error) {
-          console.error("Error loading commentList:", error);
+      const commentQuery = new CloudQuery('FilmPostComment');
+      commentQuery.equalTo('post', { "__type": "Pointer", "className": "FilmPost", "objectId": this.postId });
+          this.commentList = await commentQuery.find();
+       
+          // 获取每个评论对应的用户信息
+    for (const comment of this.commentList) {
+      const userId = comment?.get('user')?.objectId;
+      console.log(userId);
+      if (userId) {
+        const query= new CloudQuery('_User');
+        query.equalTo('objectId', userId);
+        try {
+          const results: Array<CloudObject> = await query.find();
+          console.log(results);
+          this.usersMap.set(userId, results);
+        } catch (error) {
+          console.error('查询出错:', error);
+        }
       }
+    }
+
+  }
+
+   getuserByComment(comment: CloudObject): CloudObject | undefined {
+    const userId = comment?.get('user')?.objectId;
+    const users = this.usersMap.get(userId);
+    return users ? users[0] : undefined; // 假设每个一个帖子对应userId
   }