feat(forum): 添加论坛帖子功能

novel-app/src/app/chat/chat.component.html

@@ -1,3 +1,6 @@
-<p>
-  chat works!
-</p>
+<ion-header>
+  
+    <ion-title>论坛</ion-title>
+   
+</ion-header>
+

novel-app/src/app/chat/chat.component.ts

@@ -1,15 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { IonHeader, IonToolbar, IonTitle, IonButtons, IonIcon, IonContent, IonicSlides, IonList, IonItem,IonButton } from '@ionic/angular/standalone';
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router'; // 导入 Router
+import { IonCard, IonCardContent, IonCardHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-chat',
   templateUrl: './chat.component.html',
   styleUrls: ['./chat.component.scss'],
-  standalone: true
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonButtons,IonIcon,IonContent,IonList,IonItem,IonicModule,CommonModule,IonButton]
+   
 })
 export class ChatComponent  implements OnInit {
+  posts = [
+    { id: 1, title: '帖子标题1', author: '作者1', date: '2024-12-01', likes: 10, comments: 5 },
+    { id: 2, title: '帖子标题2', author: '作者2', date: '2024-12-02', likes: 20, comments: 3 },
+    // 其他帖子...
+  ];
+  ngOnInit(): void {
+    // 初始化逻辑
+  }
+  constructor(private router: Router) {}
 
-  constructor() { }
+  goToPostDetail(post: any) {
+    // 跳转到帖子详情页
+    this.router.navigate(['/post-detail', post.id]);
+  }
 
-  ngOnInit() {}
+  loadMorePosts(event: any) {
+    // 模拟加载更多帖子
+    setTimeout(() => {
+      const newPosts = [
+        { id: 3, title: '帖子标题3', author: '作者3', date: '2024-12-03', likes: 5, comments: 2 },
+        { id: 4, title: '帖子标题4', author: '作者4', date: '2024-12-04', likes: 15, comments: 8 },
+        // 更多帖子...
+      ];
+      this.posts.push(...newPosts);
+      event.target.complete();
+
+      // 如果没有更多数据，可以调用 event.target.disabled = true;
+    }, 500);
+  }
 
 }

novel-app/src/app/forum/forum.page.html

@@ -1,17 +1,31 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      forum
-    </ion-title>
+    <ion-title>论坛帖子</ion-title>
+    <ion-searchbar placeholder="搜索帖子..." (ionInput)="filterPosts($event)"></ion-searchbar>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">forum</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="forum page"></app-explore-container>
-</ion-content>
+<ion-content>
+  <ion-grid>
+    <ion-row class="ion-justify-content-center">
+      <ion-col size="12" size-md="6" *ngFor="let post of posts">
+        <ion-card (click)="openPostDetail(post)">
+          <ion-card-header>
+            <ion-card-title>{{ post.title }}</ion-card-title>
+            <ion-card-subtitle>作者: {{ post.author }} | 发布时间: {{ post.publishDate | date:'short' }}</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            <p>点赞数: {{ post.likes }} | 评论数: {{ post.comments }}</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+    <div *ngIf="posts.length === 0">
+      <p>没有找到帖子。</p>
+    </div>
+  </ion-grid>
+  
+  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadMorePosts($event)">
+    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多..."></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+</ion-content>

novel-app/src/app/forum/forum.page.ts

@@ -1,14 +1,66 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+ import { CommonModule } from '@angular/common';
+  import { Component } from '@angular/core';
+import { InfiniteScrollCustomEvent, IonicModule } from '@ionic/angular';
+//import { IonCardSubtitle } from '@ionic/angular/standalone';
+
+// import { IonHeader, IonToolbar, IonTitle,IonCardHeader, IonContent,IonInfiniteScroll,IonCardContent, InfiniteScrollCustomEvent } from '@ionic/angular/standalone';
+// import { IonSearchbar } from '@ionic/angular/standalone/directives';
+// import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
   selector: 'app-forum',
   templateUrl: 'forum.page.html',
   styleUrls: ['forum.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [CommonModule,IonicModule],
 })
+ //IonHeader,IonSearchbar, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,IonInfiniteScroll,IonCardContent,IonCardHeader,
 export class ForumPage {
-  constructor() { }
+
+  posts: Array<{ title: string; author: string; publishDate: Date; likes: number; comments: number }> = [];
+  allPosts: Array<{ title: string; author: string; publishDate: Date; likes: number; comments: number }> = [];
+  pageSize: number = 10;
+  currentPage: number = 0;
+
+  constructor() {
+    // 假设这里是从服务获取的初始数据
+    this.allPosts = this.getPosts();
+    this.loadMorePosts();
+  }
+
+  ngOnInit() {}
+
+  getPosts() {
+    // 这里应该是调用API获取数据
+    return [
+      { title: '帖子1', author: '用户A', publishDate: new Date(), likes: 10, comments: 5 },
+      { title: '帖子2', author: '用户B', publishDate: new Date(), likes: 20, comments: 10 },
+      // 更多帖子...
+    ];
+  }
+
+  loadMorePosts(event?: InfiniteScrollCustomEvent) {
+    const nextPosts = this.allPosts.slice(this.currentPage * this.pageSize, (this.currentPage + 1) * this.pageSize);
+    console.log('加载的帖子:', nextPosts); // 检查加载的帖子
+    this.posts.push(...nextPosts);
+    console.log('当前帖子数量:', this.posts.length); // 确保帖子数量更新
+    this.currentPage++;
+  
+    if (event) {
+      event.target.complete();
+      if (nextPosts.length < this.pageSize) {
+        event.target.disabled = true; // 禁用无限滚动
+      }
+    }
+  }
+
+  filterPosts(event: any) {
+    const query = event.target.value.toLowerCase();
+    this.posts = this.allPosts.filter(post => post.title.toLowerCase().includes(query));
+    console.log('过滤后的帖子:', this.posts); // 检查过滤后的帖子
+  }
+  openPostDetail(post: any) {
+    // 在这里处理打开帖子详情的逻辑
+    console.log('打开帖子详情:', post);
+  }
 }