fix: new files

fashion-app/src/app/app.routes.ts

@@ -5,17 +5,7 @@ export const routes: Routes = [
     path: '',
     loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
   },
-   // 聊天模块
-   {
-    path: "chat/session/role/:roleId",
-    loadComponent: () => import('./test-chat-panel/test-chat-panel.component').then(m => m.TestChatPanelComponent),
-    runGuardsAndResolvers: "always",
-},
-{
-    path: "chat/session/chat/:chatId",
-    loadComponent: () => import('./test-chat-panel/test-chat-panel.component').then(m => m.TestChatPanelComponent),
-    runGuardsAndResolvers: "always",
-},
+ 
 {
     path: 'chat/pro/chat/:chatId',
     redirectTo: '/chat/session/chat/:chatId',

fashion-app/src/app/page-ai-chat/page-ai-chat.component.html

@@ -1,23 +1,7 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>AI 聊天</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <div class="chat-container">
-    <div class="user-message">{{this.userMessage}}</div>
-    <div class="ai-message">{{this.currentAiMessage }}</div>
-
-  </div>
-</ion-content>
-
-<ion-footer>
-  <ion-toolbar>
-    <ion-input [(ngModel)]="userPrompt" placeholder="输入您的消息..."></ion-input>
-    <ion-button (click)="sendMessage()">发送</ion-button>
-  </ion-toolbar>
-</ion-footer>
+<div class="button-container">
+  <ion-button fill="clear" (click)="openChat()" class="chat-button">开始新聊天</ion-button>
+  <ion-button fill="clear" (click)="restoreChat(chatId)" class="chat-button">继续上次聊天</ion-button>
+</div>
 
 
 

fashion-app/src/app/page-ai-chat/page-ai-chat.component.scss

@@ -1,18 +1,24 @@
-.chat-container {
-    padding: 10px;
-    max-height: 70vh;
-    overflow-y: auto;
+.button-container {
+  display: flex;
+  flex-direction: column; // 使按钮垂直排列
+  align-items: center; // 水平居中对齐
+  margin: 20px; // 给容器添加外边距
+}
+
+.chat-button {
+  background-color: white; // 背景色为白色
+  border-radius: 12px; // 圆角矩形
+  border: 1px solid #ccc; // 添加边框
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); // 添加阴影效果
+  padding: 12px 24px; // 内边距
+  font-size: 16px; // 字体大小
+  width: 200px; // 设置固定宽度以确保整齐
+  margin: 10px 0; // 上下按钮之间的间距
+  transition: background-color 0.3s, transform 0.3s; // 添加过渡效果
+  
+  // 悬停效果
+  &:hover {
+    background-color: #f0f0f0; // 悬停时背景颜色变化
+    transform: translateY(-2px); // 悬停时轻微上移
   }
-  .message {
-    margin: 5px 0;
-    padding: 10px;
-    border-radius: 10px;
-  }
-  .user-message {
-    background-color: #dcf8c6;
-    align-self: flex-end;
-  }
-  .ai-message {
-    background-color: #f1f0f0;
-    align-self: flex-start;
-  }
+}

fashion-app/src/app/page-ai-chat/page-ai-chat.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
-import { IonButton, IonContent, IonFooter, IonHeader, IonInput, IonTitle, IonToolbar } from '@ionic/angular/standalone';
-import { FmodeChatCompletion,MarkdownPreviewModule  } from 'fmode-ng';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonFooter, IonHeader, IonInput, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+import { ChatPanelOptions, FmodeChat, FmodeChatCompletion,FmodeChatMessage,MarkdownPreviewModule, openChatPanelModal  } from 'fmode-ng';
 import { CommonModule } from '@angular/common';
 import { FormsModule,} from '@angular/forms'; // 导入 FormsModule
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-page-ai-chat',
@@ -13,41 +14,65 @@ import { FormsModule,} from '@angular/forms'; // 导入 FormsModule
 })
 export class PageAiChatComponent  implements OnInit {
   
-  constructor() { }
+  constructor(private modalCtrl:ModalController,
+    private router:Router, private cdRef:ChangeDetectorRef) { }
 
   ngOnInit() {}
-  userPrompt: string = ""; // 输入框内容
-  userMessage: string = ""; // 当前用户输入的消息
-  messages: { sender: string, content: string }[] = []; // 存储聊天记录
-  currentAiMessage: string = ""; // 当前AI消息内容
+  chatId:any= null;
+  //AI聊天
+openChat(){
+  localStorage.setItem("company","E4KpGvTEto")
+  let options:ChatPanelOptions = {
+    roleId:"2DXJkRsjXK",
+    onChatInit:(chat:FmodeChat)=>{
+      console.log("onChatInit");
+            console.log("预设角色",chat.role);
+            chat.role.set("name","小马");
+            chat.role.set("title","时尚顾问");
+            chat.role.set("desc","一名亲切和蔼的时尚顾问，小马，年龄28岁");
+            chat.role.set("tags",["穿搭","时尚"]);
+            chat.role.set("avatar","https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/qz3QJnQqfb-0.png")
+            chat.role.set("prompt",`
+#角色设定
+您是一名时尚顾问，名叫小马，年龄28岁，热爱时尚，擅长根据用户的需求和个性推荐穿搭方案。您的风格亲切、幽默，旨在帮助用户找到最适合他们的服装搭配。
 
-  sendMessage() {
-    // 将用户输入的消息添加到消息列表
-    this.messages.push({ sender: 'user', content: this.userPrompt });
-    this.userMessage=this.userPrompt;
-    this.userPrompt = ''; // 清空用户输入框
-    // 创建AI请求
-    let completion = new FmodeChatCompletion([
-      { role: "system", content: "" },
-      { role: "user", content: this.userMessage }
-    ]);
-
-
-
-    // 清空当前AI消息
-    this.currentAiMessage = '';
-
-    // 订阅AI消息
-    completion.sendCompletion().subscribe((message: any) => {
-      if (message.content) {
-        this.currentAiMessage = message.content; // 直接更新为最新的AI回复内容
-      }
-      if (message?.complete) {
-        this.messages.push({ sender: 'ai', content: this.currentAiMessage }); // 将完整的AI回复添加到消息列表
-          
-   
+#对话环节
+0破冰,跟用户打招呼，并引导用户聊穿搭话题，可以慢慢引导，不要太突兀，比如：
+“今天的心情怎么样？”
+1拓展话题
+“你平时喜欢什么样的穿搭风格呢？有没有特别喜欢的颜色或者品牌？”
+“如果有一个场合，你希望我帮你推荐搭配，比如约会、工作或休闲，你会选择哪个呢？”
+“你觉得在穿搭上，最让你困扰的是什么？是搭配技巧还是风格选择呢？”
+“有没有什么服装是你一直想尝试但还没有机会的？我们可以一起聊聊！”
+2引导收尾
+“今天聊得很开心呢！如果你还有其他问题或者想法，随时可以告诉我哦。”
+“如果你觉得今天的聊天已经足够了，我也很乐意下次再和你聊更多时尚的话题！”
+“希望你能找到自己喜欢的穿搭风格，期待下次再见！”`);
+    },
+    onMessage:(chat:FmodeChat,message:FmodeChatMessage)=>{
+      console.log("onMessage",message)
+      let content:any = message?.content
+      if(typeof content == "string"){
+        if(content?.indexOf("[完成]")>-1){
+          console.log("聊天已完成")
+        }
       }
-    });
+    },
+    onChatSaved:(chat:FmodeChat)=>{
+      // chat?.chatSession?.id 本次会话的 chatId
+      console.log("onChatSaved",chat,chat?.chatSession,chat?.chatSession?.id)
+      this.chatId = chat?.chatSession?.id
+    }
   }
+  openChatPanelModal(this.modalCtrl,options)
+}
+
 
+restoreChat(chatId:string){
+  let options:ChatPanelOptions = {
+    roleId:"2DXJkRsjXK",
+    chatId:chatId
+  }
+  openChatPanelModal(this.modalCtrl,options)
+}
 }

fashion-app/src/app/tab3/tab3.page.html

@@ -121,16 +121,40 @@
   </div>
   
   <div *ngIf="selectedSegment === 'ai-chat'">
-    <ion-button (click)="openChat()">开始新聊天</ion-button>
-  <ion-button (click)="restoreChat('OUFEKTbBd6')">恢复会话</ion-button>
+<app-page-ai-chat></app-page-ai-chat>
   </div>
   
   <div *ngIf="selectedSegment === 'test'">
     <h2>这是测试页面</h2>
   </div>
-  
+
   <div *ngIf="selectedSegment === 'evaluate'">
-    <h2>这是评价AI页面</h2>
+    <div class="rating-container">
+      <span class="rating-label">评分:</span>
+      <edit-rating-star 
+        [score]="currentScore" 
+        [scoreMax]="5" 
+        (onScoreChange)="handleScoreChange($event)">
+      </edit-rating-star>
+      <span class="actual-score">{{ getScoreDescription(currentScore) }}</span>
+    </div>
+    <div class="textbox">
+    <ion-textarea  placeholder="你可以从AI的使用体验、速度、准确性、实用性、创新性以及全面性等方面进行评价，晒图分享你的使用体验~"[autoGrow]="true"></ion-textarea>
+  </div>
+
+ 
+  <div class="imgbox">
+    <img src="../../assets/images/1..jpg" alt="" srcset="">
+  </div>
+
+    <!-- 提交评价按钮 -->
+<ion-button fill="clear"
+class="analysis-button" 
+(click)="submitEvaluation()">
+  提交评价
+</ion-button>
+
+
 
   </div>
 

fashion-app/src/app/tab3/tab3.page.scss

@@ -152,3 +152,69 @@
   }
   
 
+//AI评价
+.evaluation-content {
+  display: flex; /* 使用 flexbox 布局 */
+  flex-direction: column; /* 垂直方向排列 */
+  align-items: center; /* 水平方向居中 */
+  justify-content: center; /* 垂直方向居中 */
+  padding: 16px;
+  height: 100%; /* 填充整个内容区域 */
+}
+
+ion-textarea {
+  width: 100%; /* 使文本区域宽度适应父容器 */
+  max-width: 500px; /* 设置最大宽度 */
+  min-height: 150px; /* 设置最小高度 */
+  margin-bottom: 16px; /* 文本区域和按钮之间的间距 */
+}
+
+.submit-button {
+  background-color: orange; /* 橙色背景 */
+  color: white !important; /* 强制设置文字颜色为白色 */
+  border-radius: 20px; /* 椭圆形 */
+  padding: 6px 12px; /* 调整内边距以缩小按钮 */
+  font-size: 16px; /* 调整字体大小 */
+  height: auto; /* 自适应高度 */
+  min-width: 80px; /* 最小宽度 */
+}
+.rating-container {
+  display: flex; /* 使用 flexbox 布局 */
+ 
+ height:90px;
+ padding-left: 16px;
+  border-bottom: 1px solid grey; /* 只显示底部边框，设置为黑色 */
+  margin-bottom: 10px; /* 评分容器与文本之间的间距 */
+  margin-top: 0;
+}
+
+.rating-label {
+  display: flex; /* 使用 flexbox 布局 */
+  padding-top: 7px;
+  font-weight: bold; /* 加粗评分文本 */
+  font-size: 22px; /* 调整字体大小 */
+  margin-right: 7px; /* 评分文本与星星之间的间距 */
+}
+
+.actual-score {
+  display: flex; /* 使用 flexbox 布局 */
+  padding-top: 12px;
+  margin-left: 50px; /* 分数与星星之间的间距 */
+  font-size: 15px; /* 调整字体大小 */
+  color: grey;
+}
+
+.textbox{
+  width: 100%; /* 使文本区域宽度适应父容器 */
+  height: 300px; /* 设置最大宽度 */
+  border-bottom: 1px solid grey; /* 只显示底部边框，设置为黑色 */
+}
+
+.imgbox{
+  width: 100%; /* 使文本区域宽度适应父容器 */
+  height: 150px; /* 设置最大宽度 */
+  background-size: contain; /* 图像填充方式 */
+background-position: center; /* 图像居中 */
+background-repeat: no-repeat; /* 不重复图像 */
+margin-top: 50px;
+}

fashion-app/src/app/tab3/tab3.page.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonList, IonSelect, IonSelectOption, IonLabel, IonButton, IonTextarea, AlertController, IonSegment, IonSegmentButton, ModalController } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonList, IonSelect, IonSelectOption, IonLabel, IonButton, IonTextarea, AlertController, IonSegment, IonSegmentButton, ModalController, IonAlert, IonButtons } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms'; // 导入 FormsModule
@@ -7,6 +7,9 @@ import { FormsModule } from '@angular/forms'; // 导入 FormsModule
 import { ChatPanelOptions, FmChatModalInput, FmodeChat, FmodeChatCompletion, FmodeChatMessage, MarkdownPreviewModule, openChatPanelModal } from 'fmode-ng';
 import { Router } from '@angular/router'; // 导入 Router
 import { DalleOptions, ImagineWork } from 'fmode-ng';
+import { PageAiChatComponent } from '../page-ai-chat/page-ai-chat.component';
+import { PageEvaluateComponent } from '../page-evaluate/page-evaluate.component';
+import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
 
 @Component({
   selector: 'app-tab3',
@@ -15,7 +18,7 @@ import { DalleOptions, ImagineWork } from 'fmode-ng';
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,IonItem,IonList,IonSelect,IonSelectOption,IonButton,CommonModule,IonTextarea,FormsModule,
     MarkdownPreviewModule,IonSegment,IonSegmentButton,IonLabel,// ASR语音输入模块
-    FmChatModalInput,],
+    FmChatModalInput,PageAiChatComponent,PageEvaluateComponent,EditRatingStarComponent,IonAlert,IonButtons],
 })
 export class Tab3Page {
   placeholderText: string = "职业：非必填\n喜好：非必填\n天气：非必填\n温度：非必填\n其他需求：显高显瘦？儒雅甜美？等";
@@ -48,6 +51,7 @@ export class Tab3Page {
     return this.selectedSegment === segment; // 判断当前导航项是否被激活
   }
 
+//AI穿搭
   selectGender(gender: string) {
     this.selectedGender = gender; // 更新选中的性别
   }
@@ -66,6 +70,7 @@ export class Tab3Page {
     this.countdownTimer = 0; // 重置计时器
     this.imagineWork=undefined;
     this.images = []; // 清空原来的图片数组
+
     this.userPrompt =`有一位${this.selectedGender}用户，该用户${this.age}岁，身高${this.height}cm，体重${this.weight}kg，该用户的补充说明是
     ${this.comments}，请你作为一名专业的服装穿搭大师并严格按照给定的例子格式，为该用户给出适合的服装搭配建议,再给出具体穿搭方案时里面的衣服颜色和类型一定要唯一，不要出现类似白色或绿色之类的句子。
     例子：嘿，兄弟，你的信息我收到了，让我来帮你计算一下BMI值，再给你一些穿搭方面的建议吧！
@@ -111,7 +116,7 @@ BMI是衡量身体状况的一个标准，计算方法是体重除以身高的
            // 图片生成
         this.startTimer(); // 启动计时器
         this.imagineWork = new ImagineWork();
-        let PicturePrompt = `描述：${this.responseMsg}\n请你作为一名专业的服装绘制大师，根据描述中的方案一生成对应的服装图片。`
+        let PicturePrompt = `描述：${this.responseMsg}\n请你作为一名专业的服装绘制大师，根据描述中的方案一描述严格生成对应的服装图片，颜色要一致。`
         let options:DalleOptions = {prompt:PicturePrompt}
         this.imagineWork?.draw(options).subscribe(work=>{
             console.log("imagineWork",work?.toJSON())
@@ -139,60 +144,44 @@ stopTimer() {
   clearInterval(this.timerInterval); // 清除定时器
 }
 
-openChat(){
-  localStorage.setItem("company","E4KpGvTEto")
-  let options:ChatPanelOptions = {
-    roleId:"2DXJkRsjXK",
-    onChatInit:(chat:FmodeChat)=>{
-      console.log("onChatInit");
-            console.log("预设角色",chat.role);
-            chat.role.set("name","小马");
-            chat.role.set("title","时尚顾问");
-            chat.role.set("desc","一名亲切和蔼的时尚顾问，小马，年龄28岁");
-            chat.role.set("tags",["全科","门诊"]);
-            chat.role.set("avatar","https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/Q4Zif7fTbK-0.png")
-            chat.role.set("prompt",`
-#角色设定
-您是一名时尚顾问，名叫晓晓，年龄28岁，热爱时尚，擅长根据用户的需求和个性推荐穿搭方案。您的风格亲切、幽默，旨在帮助用户找到最适合他们的服装搭配。
-
-#对话环节
-0破冰,跟用户打招呼，并引导用户聊穿搭话题，可以慢慢引导，不要太突兀，比如：
-“今天的心情怎么样？”
-1拓展话题
-“你平时喜欢什么样的穿搭风格呢？有没有特别喜欢的颜色或者品牌？”
-“如果有一个场合，你希望我帮你推荐搭配，比如约会、工作或休闲，你会选择哪个呢？”
-“你觉得在穿搭上，最让你困扰的是什么？是搭配技巧还是风格选择呢？”
-“有没有什么服装是你一直想尝试但还没有机会的？我们可以一起聊聊！”
-2引导收尾
-“今天聊得很开心呢！如果你还有其他问题或者想法，随时可以告诉我哦。”
-“如果你觉得今天的聊天已经足够了，我也很乐意下次再和你聊更多时尚的话题！”
-“希望你能找到自己喜欢的穿搭风格，期待下次再见！”`);
-    },
-    onMessage:(chat:FmodeChat,message:FmodeChatMessage)=>{
-      console.log("onMessage",message)
-      let content:any = message?.content
-      if(typeof content == "string"){
-        if(content?.indexOf("[完成]")>-1){
-          console.log("聊天已完成")
-        }
-      }
-    },
-    onChatSaved:(chat:FmodeChat)=>{
-      // chat?.chatSession?.id 本次会话的 chatId
-      console.log("onChatSaved",chat,chat?.chatSession,chat?.chatSession?.id)
-    }
-  }
-  openChatPanelModal(this.modalCtrl,options)
-}
 
+//AI评价
+async submitEvaluation() {
+  // 处理评价提交逻辑
+  console.log('发表评价');
+  // 这里可以添加您希望执行的代码，例如将评价发送到服务器
+  // 弹出提示框
+  const alert = await this.alertController.create({
+    header: '提交成功，感谢你的评价！',
+    buttons: ['确定'] // 按钮
+  });
 
-restoreChat(chatId:string){
-  let options:ChatPanelOptions = {
-    roleId:"2DXJkRsjXK",
-    chatId:chatId
-  }
-  openChatPanelModal(this.modalCtrl,options)
+  await alert.present(); // 显示弹出框
 }
 
+//星星打分
+currentScore: number = 0; // 初始分值
+
+handleScoreChange(newScore: number) {
+this.currentScore = newScore;
+console.log('新分值:', newScore); // 处理分值变化
+}
 
+getScoreDescription(score: number): string {
+switch (score) {
+  case 1:
+    return '很差';
+  case 2:
+    return '差';
+  case 3:
+    return '一般';
+  case 4:
+    return '还不错';
+  case 5:
+    return '很满意';
+  default:
+    return ''; // 默认返回空字符串
+}
+}
+alertButtons = ['退出'];
 }