tailor-app/myapp/deploy.ps1

@@ -1,18 +0,0 @@
-# 打包项目，携带应用前缀（index.html中相对路径将自动修复为/dev/jxnu/<学号>前缀）
-# /dev/ 项目测试版上传路径
-# /dev/jxnu/<学号> nova-crm项目预留路径
-set NODE_OPTIONS=–max_old_space_size=16000;
-node ./node_modules/@angular/cli/bin/ng build --base-href="/dev/jxnu/20222670101/"
-
-# 清空旧文件目录
-obsutil rm obs://nova-cloud/dev/jxnu/20222670101 -r -f -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com"
-
-# 同步文件目录
-obsutil sync ./www obs://nova-cloud/dev/jxnu/20222670101  -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com" -acl=public-read
-
-
-# 授权公开可读
-obsutil chattri obs://nova-cloud/dev/jxnu/20222670101 -r -f -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com" -acl=public-read
-
-# 列举对象
-obsutil ls obs://nova-cloud/dev/jxnu/20222670101  -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com"

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/customization/customization.page.ts

@@ -36,7 +36,6 @@ addIcons({ camera, trendingUpOutline, sparklesOutline, cloudyOutline, diceOutlin
 export class CustomizationPage implements OnInit {
   public buffer = 0.06;
   public progress = 0;
-  newObjectId: string | null="";
   opentianqi(){
     this.router.navigate(['/tianqi']);
   }
@@ -47,14 +46,12 @@ export class CustomizationPage implements OnInit {
 
   // 修改需求分析
   async modifyRequire() {
+    this.requireComplete=false
   
     let a = await openCommentPostModal(this.modalCtrl, { "title": "需求修改", "title2": "修改" });
     if (a == null) {
       a = "";
-      return
     }
-    this.requireComplete=false
-
     let prompt = `你是一名专业服装设计师，这是你的上次回答：
     ${this.gptre}
     基于你上次回答，我想做一些修改，修改如下：
@@ -121,14 +118,12 @@ export class CustomizationPage implements OnInit {
 
   }
   async modifyDetail() {
+    this.isComplete=false
     
     let a = await openCommentPostModal(this.modalCtrl, { "title": "细节修改", "title2": "修改" });
     if (a == null) {
       a = "";
-      return
     }
-    this.isComplete=false
-
     let prompt = `你是一名专业服装设计师，这是你的上次回答：
     ${this.picdetail}
     基于你上次回答，我想做一些修改，修改如下：
@@ -213,7 +208,7 @@ export class CustomizationPage implements OnInit {
         console.log("json:", this.JSONdes);
 
         this.imagineWork = new ImagineWork();
-        let options: DalleOptions = { prompt: `${this.picdetail}` }
+        let options: DalleOptions = { prompt: `我要求你以写实的画风画服装，以下是服装细节${this.picdetail}` }
         this.imagineWork.draw(options).subscribe(async work => {
           console.log("imagineWork", work?.toJSON())
           console.log("images", work?.get("images"))
@@ -260,9 +255,6 @@ export class CustomizationPage implements OnInit {
             }
             let newObject = new CloudObject("Designs")
             newObject.set(newDsign)
-            if(this.newObject){
-              newObject.id=this.newObject.id
-            }
             newObject.id = (await newObject.save()).id
             this.newObject = newObject;
             console.log("添加成功");
@@ -376,7 +368,7 @@ export class CustomizationPage implements OnInit {
 
 # 对话环节
 0.引导（根据用户基本情况，引导其描述需要定制的服装）
-1.预设的问询方式：询问顾客定制服装的目的（如婚礼、晚会、日常穿着等），这个一定要问。
+1.预设的问询方式：询问顾客定制服装的目的（如婚礼、晚会、日常穿着等）。
 
 - 打招呼，以用户自述为主
 - 当信息充足时候，根据用户定制服装目的做出一些推荐服装来引导用户，并进入下一个环节
@@ -552,24 +544,29 @@ ${userPrompt}
 
   imagineWork: ImagineWork | undefined
   images: Array<string> = []
-  public gptre = `### 服装细节描述
-
-1. **裙型**：这是一款优雅的长裙，采用流畅的A字裙设计，能够完美地勾勒出女性的曲线，展现出优雅与高贵的气质。裙摆自然垂落，增添了一份飘逸感，适合晚会的氛围。
-
-2. **颜色**：裙子的主色调为柔和的浅蓝色，给人一种清新、优雅的感觉。这种颜色通常与宁静和优雅相联系，能够使穿着者在晚会上显得格外出众。
-
-3. **面料**：选用高档丝绸面料，丝绸的光泽感与柔软的触感使得整件裙子更加奢华，适合正式场合。面料的轻盈特性也使得裙子在行走时能够轻松摆动，增添了动态美感。
-
-4. **细节设计**：
-   - **拉链**：隐形拉链的设计使得裙子更加简洁，保持了整体的流畅感，不会干扰视觉效果。
-   - **领口**：裙子的领口可能采用优雅的V字形设计，既能拉长颈部线条，又能展现出迷人的锁骨，增添了一丝性感的气息。
-   - **袖子**：可选配薄纱或蕾丝的短袖设计，既保留了优雅感，又增添了一些浪漫的细节。
-
-5. **尺码**：根据用户的三围尺寸（胸围85cm，腰围65cm，臀围90cm），设计师推荐了M或L尺码，确保裙子能够合身且舒适。
-
-6. **配饰**：设计师建议搭配一条精致的项链和耳环，可能是银色或金色的饰品，能够与浅蓝色裙子形成优雅的对比，提升整体造型的华丽感。
-
-7. **整体造型**：整件裙子注重线条的流畅与优雅，配合适当的配饰，使得穿着者在晚会上能够展现出高贵而不失亲和力的形象。`
+  public gptre = `在这段对话中，我们可以分析出用户的需求和服装的细节设计。以下是详细分析：
+
+### 1. 用户对于定制服装的需求
+- **场合**：用户明确表示需要定制服装的场合是婚礼，这意味着服装需要正式且优雅。
+- **风格选择**：用户希望设计师帮忙选择风格，并没有明确的偏好，这表明用户可能对婚礼服装的具体风格不太了解或者希望设计师提供专业建议。
+- **颜色和材质**：用户在颜色和材质方面也没有特别要求，完全依赖设计师的选择，这显示出用户对设计师的信任。
+- **尺码和身体特征**：用户提供了身高和体重，并提到“胸围大点”，这意味着在服装的剪裁上需要特别注意胸部的合身度。
+- **售后服务**：用户希望有售后服务，特别是调整和清洗服务，显示出用户对服装的长期使用和维护的关注。
+
+### 2. 联想并补全服装的细节
+- **服装类型**：选择了经典的燕尾服，适合正式的婚礼场合。
+- **颜色**：选择了经典的黑色，符合婚礼的正式氛围。
+- **材质**：选择了丝绸，因其光泽感和柔软度，适合高档场合。
+- **配饰**：选择了黑色领结和白色口袋巾，经典而优雅，能够提升整体形象。
+- **辅料**：选择了黑色纽扣和丝绸衬里，确保整体风格统一且高档。
+- **定制周期**：设定为3周，符合一般定制的时间要求。
+- **尺码**：根据用户的身高和体重，推荐XXL尺码，特别注意胸围的合身。
+- **鞋子类型**：建议42-43码的皮鞋，符合用户的身高体重。
+- **售后服务**：包括免费调整和清洗服务，确保用户在婚礼后也能保持服装的最佳状态。
+- **备注**：用户希望随时联系，表明用户对沟通的重视。
+
+### 总结
+通过对用户需求的分析和对服装细节的补全，我们可以为用户提供一套完整的婚礼燕尾服定制方案。这不仅满足了用户对正式场合服装的需求，也考虑到了用户的个人特征和售后服务的期望。这样的定制方案将有助于用户在婚礼上展现最佳形象。`
   messageList: string[] = []
   title: string = "123"
   chatID = ""

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),
+      },
     ],
   },
   {

tailor-app/myapp/src/lib/user/modal-comment-post/modal-comment-post.component.html

@@ -9,7 +9,7 @@
    </ion-card-header>
  <ion-card-content>
 
-  <ion-textarea  placeholder="Type something here" [(ngModel)]="text" style="min-height: 300px;" [autoGrow]="true" ></ion-textarea>
+  <ion-textarea label="Regular textarea" placeholder="Type something here" [(ngModel)]="text" style="min-height: 300px;" [autoGrow]="true" ></ion-textarea>
  
   <ion-button expand="block" (click)="save()">保存</ion-button>
   <ion-button expand="block" (click)="cancel()">取消</ion-button>