feat:community and aichat

tailor-app/myapp/src/app/aichat/aichat.component.html

@@ -0,0 +1,11 @@
+<ion-content>
+    <!-- 文本域：生成提示词 -->
+     <h1>AI客服</h1>
+    <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" autoGrow="true"></ion-textarea>
+  
+    <!-- 按钮：执行消息生成函数 -->
+    <ion-button (click)="sendMessage()" expand="block">发送消息</ion-button>
+    
+    <!-- 展示：返回消息内容 -->
+    <div>{{responseMsg}}</div>
+  </ion-content>

tailor-app/myapp/src/app/aichat/aichat.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonInput, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonTextarea } from '@ionic/angular/standalone';
+import { FmodeChatCompletion } from 'fmode-ng';
+
+@Component({
+  selector: 'app-aichat',
+  templateUrl: './aichat.component.html',
+  styleUrls: ['./aichat.component.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,
+    IonTextarea,IonInput
+    ],
+})
+export class AIchatComponent  implements OnInit {
+
+  constructor() {}
+  ngOnInit(){}
+  // 用户输入提示词
+   userPrompt:string = "请问您有什么问题吗"
+  promptInput(ev:any){
+    this.userPrompt = ev.detail.value;
+  }
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg:any = ""
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  sendMessage(){
+    console.log("create")
+    let PromptTemple = `
+    您作为一名专业的服装设计师，请您根据客户描述的问题或需求，给出详细的解答。
+    以下是用户的描述：${this.userPrompt}`
+    let completion = new FmodeChatCompletion([
+      {role:"system",content:""},
+      {role:"user",content:PromptTemple}
+    ])
+    completion.sendCompletion().subscribe((message:any)=>{
+      // 打印消息体
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+    })
+  }
+
+}

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

@@ -0,0 +1,30 @@
+<!-- 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-button>
+    </ion-item>
+  </ion-content>

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

@@ -1,118 +1,69 @@
-ion-title {
-  flex: 1; // 使标题占据可用空间
-  text-align: left; // 确保文字左对齐
-  margin-left: 16px; // 左侧边距，可以根据需要调整
-  margin-top: 5px;
-  color: rgb(71, 68, 68);
-}
-
+/* community.page.scss */
 ion-header {
-  background-color: #3880ff; // 设置头部背景色
-}
-
-
-ion-card {
-  margin: 10px; // 设置卡片之间的间距
-  border-radius: 10px; // 设置卡片圆角
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
+  background-color: #4a90e2; /* 设置页头背景色 */
+  color: white;
 }
 
-ion-card-header {
-  background-color: #d8e5fa; // 设置头部背景色
-  color: white; // 设置头部文字颜色
+ion-toolbar {
+  --background: #4a90e2; /* 设置工具栏背景色 */
 }
 
-ion-card-title {
-  font-size: 1.2em; // 设置卡片标题字体大小
-  font-weight: bold; // 设置卡片标题字体加粗
+ion-title {
+  font-weight: bold;
 }
 
-ion-item {
-  --ion-item-background: transparent; // 设置列表项背景透明
+ion-content {
+  background-color: #f5f5f5; /* 设置内容背景色 */
 }
 
-ion-label {
-  color: #333; // 设置标签文字颜色
+ion-card {
+  margin: 10px 0;
+  border-radius: 10px; /* 圆角 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  background-color: white; /* 卡片背景色 */
 }
 
-
-
-h2 {
-  font-size: 1em; // 设置二级标题字体大小
-  margin: 0; // 去掉默认外边距
+ion-card-header {
+  background-color: #e1f5fe; /* 卡片头部背景色 */
+  border-top-left-radius: 10px; /* 圆角 */
+  border-top-right-radius: 10px; /* 圆角 */
+  padding: 10px; /* 内边距 */
 }
 
-p {
-  font-size: 0.9em; // 设置段落字体大小
-  color: #666; // 设置段落文字颜色
+ion-card-title {
+  font-size: 1.2em; /* 标题字体大小 */
+  color: #007aff; /* 标题颜色 */
 }
 
-ion-list {
-  padding: 0; // 去掉列表内边距
+ion-card-subtitle {
+  font-size: 0.9em; /* 副标题字体大小 */
+  color: #666; /* 副标题颜色 */
 }
 
 ion-card-content {
-  padding: 10px; // 设置卡片内容内边距
+  margin-top: 20px;
+  font-size: 1em; /* 内容字体大小 */
+  color: #333; /* 内容颜色 */
 }
 
-ion-button {
-  --background: #3880ff; // 设置按钮背景色
-  --color: white; // 设置按钮文字颜色
-  margin-top: 10px; // 设置按钮与上方内容的间距
-  border-radius: 20px; // 设置按钮圆角
+ion-item {
+  padding: 10px;
+  background-color: #fff; /* 输入框背景色 */
+  border-radius: 5px; /* 圆角 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
 }
 
-
-.chat-partner-area {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  padding: 15px;
-
-  .avatar {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    margin-right: 15px;
-  }
-
-  .description {
-    flex-grow: 1;
-  }
-
-  ion-button {
-    border-radius: 20px;
-  }
+ion-input {
+  flex: 1;
 }
 
-.role-interaction-area {
-  h2 {
-    margin-bottom: 15px;
-  }
-
-  .role-container {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-    border: 1px solid #ccc;
-    border-radius: 10px;
-    padding: 15px;
-
-    .avatar {
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-      margin-right: 10px;
-    }
-
-    .role-description {
-      flex-grow: 1;
-    }
+ion-button {
+  --background: #4a90e2; /* 按钮背景色 */
+  --color: white; /* 按钮文字颜色 */
+  border-radius: 5px; /* 按钮圆角 */
+  margin-left: 5px; /* 按钮与输入框的间距 */
+}
 
-    ion-button {
-      border-radius: 20px;
-    }
-  }
+ion-icon {
+  color: white; /* 图标颜色 */
 }

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

@@ -1,8 +1,39 @@
 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 { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+@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
+    ],
+})
 export class CommunityPage implements OnInit {
+  comments: { username: string; date: Date; text: string }[] = [];
+  newComment: string = '';
 
-  constructor() { }
+  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 = ''; // 清空输入框
+    }
+  }
 
   ngOnInit() {
     

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

@@ -4,9 +4,6 @@
   <div class="header-space"></div>
 
   <!-- 用户信息区域 -->
-    <ion-avatar>
-      <img src="assets/avatar.png" alt="用户头像"/>
-    </ion-avatar>
     <ion-content>
       <!-- 用户信息 -->
       <ion-item lines="none" class="user-info">

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

@@ -7,6 +7,7 @@ import { openUserLoginModal } from 'src/lib/user/user-login/user-login.component
 import { IonNote } from '@ionic/angular/standalone';
 import { IonToolbar } from '@ionic/angular/standalone';
 import { ModalController } from '@ionic/angular/standalone';
+import { Router } from '@angular/router';
 
 addIcons({ add })
 @Component({
@@ -26,7 +27,7 @@ export class MePage implements OnInit {
     avatar: 'assets/img'  // 默认头像路径
   };
 
-  constructor(private navCtrl: NavController, private modalCtrl: ModalController) {
+  constructor(private navCtrl: NavController, private modalCtrl: ModalController,private router: Router) {
     this.currentUser = new CloudUser();
   }
 
@@ -63,7 +64,7 @@ export class MePage implements OnInit {
     
   }
   AIchat(){
-    
+    this.router.navigate(['/tabs/aichat']);
   }
   ngOnInit() {}
 }

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

@@ -31,7 +31,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../yiyun/yiyun.page').then((m) => m.YiyunPage),
       },
-
+      {
+        path: 'aichat',
+        loadComponent: () =>
+          import('../aichat/aichat.component').then((m) => m.AIchatComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/yiyun',