feat:community&aichat

tailor-app/myapp/src/app/app.routes.ts

@@ -1,6 +1,11 @@
-import { Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule,Routes } from '@angular/router';
+import { PostPageComponent } from './post-page/post-page.component'; // 导入 PostPage 组件
+import { CommunityPage } from './community/community.page';
+import { SharePageComponent } from './share-page/share-page.component';
 
 export const routes: Routes = [
+ 
   {
     path: '',
     loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
@@ -44,6 +49,17 @@ export const routes: Routes = [
   {
     path: 'testPage',
     loadComponent: () =>import('./test-page/test-page.component').then((m) => m.TestPageComponent)
-      
-  },
+  }, 
+  { path: '', redirectTo: 'community', pathMatch: 'full' },
+  { path: 'community', component: CommunityPage },
+  { path: 'post-page/:id', component: PostPageComponent }, // 动态详情页面的路由
+  { path: 'share', component: SharePageComponent },
 ];
+
+
+
+  @NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+  })
+  export class AppRoutingModule { }

tailor-app/myapp/src/app/community/community.page.html

@@ -1,30 +1,26 @@
-<!-- community.page.html -->
 <ion-header>
-    <ion-toolbar>
-      <ion-title>社区</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  
-  <ion-content>
-    <ion-list>
-      <!-- 评论列表 -->
-      <ion-card *ngFor="let comment of comments">
-        <ion-card-header>
-          <ion-card-title>{{ comment.username }}</ion-card-title>
-          <ion-card-subtitle>{{ comment.date | date:'short' }}</ion-card-subtitle>
-        </ion-card-header>
-        <ion-card-content>
-          <p>{{ comment.text }}</p>
-        </ion-card-content>
-      </ion-card>
-    </ion-list>
-  
-    <!-- 评论输入区域 -->
-    <ion-item>
-      <ion-input [(ngModel)]="newComment" placeholder="写下你的评论..."></ion-input>
-      <ion-button (click)="addComment()" color="primary">
-        <ion-icon slot="icon-only" name="send"></ion-icon>
-        <ion-label>发送</ion-label>
+  <ion-toolbar>
+    <ion-title>发现</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="sharePost()" color="primary">
+        <ion-icon name="add"></ion-icon>
       </ion-button>
-    </ion-item>
-  </ion-content>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="spacer"></div> <!-- 空白区域 -->
+  <div class="post-grid">
+    <!-- 动态列表 -->
+    <ion-card *ngFor="let post of posts" (click)="viewPost(post.id)" class="post-card">
+      <ion-card-header>
+        <ion-card-subtitle>{{ post.date | date:'short' }}</ion-card-subtitle> <!-- 使用日期管道 -->
+      </ion-card-header>
+      <ion-card-content>
+        <img [src]="post.imageUrl" *ngIf="post.imageUrl" alt="动态图片" class="post-image" />
+        <p>{{ post.text }}</p>
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>

tailor-app/myapp/src/app/community/community.page.scss

@@ -1,69 +1,23 @@
-/* community.page.scss */
-ion-header {
-  background-color: #4a90e2; /* 设置页头背景色 */
-  color: white;
+.spacer {
+  height: 50px; /* 设置空白区域的高度 */
 }
 
-ion-toolbar {
-  --background: #4a90e2; /* 设置工具栏背景色 */
+.post-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 每行两个动态 */
+  gap: 16px; /* 每个动态之间的间距 */
+  padding: 6px; /* 页面内边距 */
 }
 
-ion-title {
-  font-weight: bold;
+.post-card {
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer; /* 鼠标悬停时显示为可点击 */
 }
 
-ion-content {
-  background-color: #f5f5f5; /* 设置内容背景色 */
-}
-
-ion-card {
-  margin: 10px 0;
-  border-radius: 10px; /* 圆角 */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
-  background-color: white; /* 卡片背景色 */
-}
-
-ion-card-header {
-  background-color: #e1f5fe; /* 卡片头部背景色 */
-  border-top-left-radius: 10px; /* 圆角 */
-  border-top-right-radius: 10px; /* 圆角 */
-  padding: 10px; /* 内边距 */
-}
-
-ion-card-title {
-  font-size: 1.2em; /* 标题字体大小 */
-  color: #007aff; /* 标题颜色 */
-}
-
-ion-card-subtitle {
-  font-size: 0.9em; /* 副标题字体大小 */
-  color: #666; /* 副标题颜色 */
-}
-
-ion-card-content {
-  margin-top: 20px;
-  font-size: 1em; /* 内容字体大小 */
-  color: #333; /* 内容颜色 */
-}
-
-ion-item {
-  padding: 10px;
-  background-color: #fff; /* 输入框背景色 */
-  border-radius: 5px; /* 圆角 */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
-}
-
-ion-input {
-  flex: 1;
-}
-
-ion-button {
-  --background: #4a90e2; /* 按钮背景色 */
-  --color: white; /* 按钮文字颜色 */
-  border-radius: 5px; /* 按钮圆角 */
-  margin-left: 5px; /* 按钮与输入框的间距 */
-}
-
-ion-icon {
-  color: white; /* 图标颜色 */
+.post-image {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+  margin-bottom: 2px;
 }

tailor-app/myapp/src/app/community/community.page.ts

@@ -1,42 +1,49 @@
 import { Component, OnInit } from '@angular/core';
-import { IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular/standalone';
-import { IonCardContent,IonLabel } from '@ionic/angular/standalone';
+import { IonAvatar, IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { NavigationExtras, Router } from '@angular/router';
+import { PostService } from '../post.service'; // 导入服务
+import { IonButtons } from '@ionic/angular/standalone';
+import { IonCardContent } from '@ionic/angular/standalone';
+
 @Component({
   selector: 'app-community',
   templateUrl: './community.page.html',
   styleUrls: ['./community.page.scss'],
   standalone: true,
-  imports: [IonHeader,IonToolbar,IonTitle,IonContent,IonList,IonCard,IonCardHeader,
-    IonCardTitle,IonCardSubtitle,IonItem,IonInput,IonButton,IonIcon,IonCardContent,
-    FormsModule,CommonModule,IonLabel
+  imports: [IonHeader,IonToolbar,IonButtons,IonIcon,IonButton,IonContent,IonCard,IonCardHeader,
+    IonItem,IonAvatar,IonCardTitle,IonCardSubtitle,FormsModule,CommonModule,IonCardContent,IonTitle
     ],
 })
 export class CommunityPage implements OnInit {
-  comments: { username: string; date: Date; text: string }[] = [];
-  newComment: string = '';
+  posts: { id: number; username: string; date: Date; text: string; imageUrl?: string; avatarUrl?: string }[] = [];
 
-  constructor() {
-    this.comments = [
-      { username: '用户1', date: new Date(), text: '这件衣服真好看！' },
-      { username: '用户2', date: new Date(), text: '我也想要一件！' },
-    ];
-  }
-  addComment() {
-    if (this.newComment.trim()) {
-      const newCommentObj = {
-        username: '当前用户', // 可以替换为实际的用户名
-        date: new Date(),
-        text: this.newComment,
-      };
-      this.comments.push(newCommentObj);
-      this.newComment = ''; // 清空输入框
-    }
+  constructor(private router: Router,private postService: PostService) {
   }
 
   ngOnInit() {
+    this.posts = this.postService.getPosts(); // 从服务中获取动态数据// 这里可以进行数据的初始化或获取
+  }
+
+  // viewPost(postId: number) {
+
+  //   const state: any = {  postId:  postId }; // 你要传递的对象数据
+  //   const navigationExtras: NavigationExtras = {
+  //     state: state
+  //   };
+  //   console.log("state::",state);
     
-    
+   
+  //   this.router.navigate(['/tabs/post-page', postId]);
+
+  //   // this.router.navigate(['/tabs/post-page', postId]); // 导航到动态详情页面
+  // }
+  viewPost(postId: number) {
+    // 直接导航到动态详情页面
+    this.router.navigate(['/tabs/post-page', postId]);
+  }
+  sharePost() {
+    this.router.navigate(['/tabs/share-page']); // 导航到分享动态页面
   }
 }

tailor-app/myapp/src/app/me/me.page.ts

@@ -51,7 +51,7 @@ export class MePage implements OnInit {
   }
   
   customizations(){
-
+    this.router.navigate(['tabs/customization'])
   }
   favorites(){
 

tailor-app/myapp/src/app/post-page/post-page.component.html

@@ -0,0 +1,41 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/community"></ion-back-button>
+    </ion-buttons>
+    <ion-title>动态详情</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-card *ngIf="post">
+    <ion-card-header>
+      <ion-item>
+        <ion-avatar slot="start">
+          <img [src]="post.avatarUrl" *ngIf="post.avatarUrl" alt="用户头像" />
+        </ion-avatar>
+        <ion-card-title>{{ post.username }}</ion-card-title>
+        <ion-card-subtitle>{{ post.date | date:'short' }}</ion-card-subtitle>
+      </ion-item>
+    </ion-card-header>
+    <ion-card-content>
+      <img [src]="post.imageUrl" *ngIf="post.imageUrl" alt="动态图片" class="post-image" />
+      <p>{{ post.text }}</p>
+      <ion-button (click)="likePost()" [color]="liked ? 'danger' : 'light'">
+        <ion-icon name="heart" slot="icon-only"></ion-icon>
+        {{ liked ? '已点赞' : '点赞' }}
+      </ion-button>
+    </ion-card-content>
+    <ion-item>
+      <ion-input [(ngModel)]="newComment" placeholder="写下你的评论..."></ion-input>
+      <ion-button (click)="addComment()" color="primary">
+        <ion-icon slot="icon-only" name="send"></ion-icon>
+      </ion-button>
+    </ion-item>
+    <ion-list>
+      <ion-item *ngFor="let comment of comments">
+        <ion-label>{{ comment.username }}: {{ comment.text }}</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-card>
+</ion-content>

tailor-app/myapp/src/app/post-page/post-page.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PostPageComponent } from './post-page.component';
+
+describe('PostPageComponent', () => {
+  let component: PostPageComponent;
+  let fixture: ComponentFixture<PostPageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PostPageComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PostPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tailor-app/myapp/src/app/post-page/post-page.component.ts

@@ -0,0 +1,87 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonAvatar, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonBackButton } from '@ionic/angular/standalone';
+import { IonIcon } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { PostService } from '../post.service'; // 导入服务
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-post-page',
+  templateUrl: './post-page.component.html',
+  styleUrls: ['./post-page.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonButtons,IonBackButton,IonTitle,IonContent,
+    IonCard,IonCardHeader,IonItem,IonAvatar,IonCardTitle,IonCardSubtitle,IonCardContent,
+    IonButton,IonIcon,IonItem,IonInput,IonList,IonLabel,FormsModule,CommonModule
+    ],
+})
+export class PostPageComponent  implements OnInit {
+  post: any;
+  liked: boolean = false;
+  newComment: string = '';
+  comments: { username: string; text: string }[] = [];
+  postId: any;
+
+  constructor(private router: Router,private route: ActivatedRoute,private postService: PostService) {}
+
+  ngOnInit() {
+    // this.loadDaata();
+    // console.log(this.post);
+     // 使用 route.params 订阅参数变化
+      // 获取动态 ID
+      this.route.params.subscribe(params => {
+        const postId = Number(params['postId']); // 获取动态 ID
+        if (!isNaN(postId)) {
+          this.post = this.postService.getPostById(postId); // 根据 ID 获取动态内容
+        } else {
+          console.error('Invalid post ID');
+        }
+      });
+  
+      // 这里可以添加逻辑来根据 postId 更新页面内容
+
+    
+
+    // const postId = Number(this.route.snapshot.paramMap.get('id')); // 获取动态 ID
+    // 根据 ID 获取动态内容
+    
+     
+  }
+  // ngDoCheck(){
+  //   this.loadDaata();
+  //   console.log(this.post);
+  // }
+  // async loadDaata(){
+  //   const navigation = this.router.getCurrentNavigation();
+  //   if (navigation && navigation.extras && navigation.extras.state) {
+  //     const state = navigation.extras.state;
+  //     console.log(state['postId']); // 访问传递的对象数据
+  //     const postId=state['postId']
+  //     this.post =await this.postService.getPostById(postId);
+  //      if (postId !== null) {
+  //     this.post =await this.postService.getPostById(postId); // 根据 ID 获取动态内容
+  //   } else {
+  //     console.error('Invalid post ID'); // 处理无效的 ID
+  //   }
+  //   }
+
+  // }
+
+  likePost() {
+    this.liked = !this.liked;
+  }
+
+  addComment() {
+    if (this.newComment.trim()) {
+      const newCommentObj = {
+        username: '当前用户', // 可以替换为实际的用户名
+        text: this.newComment,
+      };
+      this.comments.push(newCommentObj);
+      this.newComment = ''; // 清空输入框
+    }
+  }
+
+}

tailor-app/myapp/src/app/post.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PostService } from './post.service';
+
+describe('PostService', () => {
+  let service: PostService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PostService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

tailor-app/myapp/src/app/share-page/share-page.component.html

@@ -0,0 +1,26 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/community"></ion-back-button>
+    </ion-buttons>
+    <ion-title>分享动态</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-item>
+    <ion-input [(ngModel)]="newPost.text" placeholder="写下你的动态..."></ion-input>
+  </ion-item>
+  
+  <ion-item>
+    <input type="file" (change)="onFileSelected($event)" accept="image/*" />
+  </ion-item>
+  
+  <ion-item>
+    <ion-button (click)="submitPost()" color="primary">发布</ion-button>
+  </ion-item>
+  
+  <div *ngIf="imagePreview" class="image-preview">
+    <img [src]="imagePreview" alt="Image Preview" />
+  </div>
+</ion-content>

tailor-app/myapp/src/app/share-page/share-page.component.scss

@@ -0,0 +1,9 @@
+.image-preview {
+    margin: 16px 0;
+  }
+  
+  .image-preview img {
+    max-width: 100%; /* 确保图片不会超出容器 */
+    height: auto; /* 保持图片的纵横比 */
+    border-radius: 8px; /* 可选：添加圆角 */
+  }

tailor-app/myapp/src/app/share-page/share-page.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { SharePageComponent } from './share-page.component';
+
+describe('SharePageComponent', () => {
+  let component: SharePageComponent;
+  let fixture: ComponentFixture<SharePageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SharePageComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SharePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tailor-app/myapp/src/app/share-page/share-page.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { PostService } from '../post.service'; // 导入服务
+import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-share-page',
+  templateUrl: './share-page.component.html',
+  styleUrls: ['./share-page.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonButtons,IonBackButton,IonContent,IonItem,IonInput,
+    IonButton,FormsModule,CommonModule,IonTitle
+    ],
+})
+export class SharePageComponent  implements OnInit {
+
+  newPost: { text: string } = { text: '' };
+  selectedFile: File | null = null; // 存储选择的文件
+  imagePreview: string | null = null; // 存储图片预览的 URL
+
+  constructor(private router: Router,private postService: PostService) {}
+
+  onFileSelected(event: Event) {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files.length > 0) {
+      this.selectedFile = target.files[0]; // 获取选择的文件
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.imagePreview = reader.result as string; // 设置图片预览
+      };
+      reader.readAsDataURL(this.selectedFile); // 读取文件为 Data URL
+    }
+  }
+
+  submitPost() {
+    if (this.newPost.text.trim()) {
+      const newPostObj = {
+        id: Math.floor(Math.random() * 10000), // 生成一个随机 ID，实际应用中可以使用更可靠的方式
+        username: '当前用户', // 可以替换为实际的用户名
+        date: new Date(),
+        text: this.newPost.text,
+        imageUrl: this.imagePreview?this.imagePreview:" ", // 将图片 URL 添加到新动态中
+      };
+      this.postService.addPost(newPostObj); // 使用服务添加新动态
+      this.router.navigate(['/community']); // 发布后返回社区页面
+    }
+  }
+
+  ngOnInit() {}
+
+}

tailor-app/myapp/src/app/tabs/tabs.routes.ts

@@ -41,6 +41,16 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../aichat/aichat.component').then((m) => m.AIchatComponent),
       },
+      {
+        path: 'post-page',
+        loadComponent: () =>
+          import('../post-page/post-page.component').then((m) => m.PostPageComponent),
+      },
+      {
+        path: 'share-page',
+        loadComponent: () =>
+          import('../share-page/share-page.component').then((m) => m.SharePageComponent),
+      },
     ],
   },
   {