feat:update aichat

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

@@ -58,6 +58,18 @@
   </div>
 </ion-content>
 
+<!--表情模拟框-->
+<ion-modal [isOpen]="isEmojiPickerOpen" (didDismiss)="closeEmojiPicker()"  [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]"
+ handleBehavior="cycle" >
+  <ng-template>
+    <ion-content class="emoji-picker" >
+        <div *ngFor="let emoji of emojis" (click)="addEmoji(emoji)" fill="clean" class="emoji-button"> <!--表情按钮-->
+          {{ emoji }}
+        </div>
+    </ion-content>
+  </ng-template>
+</ion-modal>
+
 <!--底部内容-->
 <ion-footer style="background-color: #99d75c;">
   <ion-toolbar>
@@ -69,7 +81,8 @@
         </ion-button>
         
      <!--语音输入模态框 -->
-<ion-modal trigger="open-modal" [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]" handleBehavior="cycle">
+<ion-modal [isOpen]="isVoiceModalOpen" (didDismiss)="cancleVoice()" [initialBreakpoint]="0.25" [breakpoints]="[0, 0.25, 0.5, 0.75]" handleBehavior="cycle"
+[backdropDismiss]="false">
   <ng-template>
     <ion-content class="yuyinframe">
       <div class="modal-content">
@@ -104,6 +117,7 @@
       <ion-input placeholder="输入消息..." class="input-box" [(ngModel)]="userMessage">
         <ion-button (click)="openEmojiPicker()" fill="clear" slot="end">
           <ion-icon name="happy-outline" style="color:#99d75c; font-size: 30px;" ></ion-icon> <!--表情符号-->
+
         </ion-button>
       </ion-input>
 

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

@@ -377,3 +377,33 @@ justify-content: center; /* 水平居中对齐 */
   }
 }
 
+
+
+
+/* 表情选择器样式 */
+.emoji-picker {
+  --background: transparent; //去除默认样式
+  background-color: #99d75c; /* 背景颜色 */
+  display: flex;
+  flex-wrap: wrap; /* 允许换行 */
+  padding: 10px;
+  justify-content: flex-start; /* 左对齐 */
+  overflow-y: scroll; /* 允许纵向滚动 */
+  height: 200px;
+}
+//表情按钮
+.emoji-button {
+  margin: 9px; /* 每个表情与顶部的间距 */
+  cursor: pointer; /* 鼠标悬停时显示为指针 */
+  font-size: 28px; /* 字体大小 */
+  height: 40px; /* 按钮高度 */
+  width: 40px; /* 按钮宽度 */
+  display: flex; /* 使用 flexbox 对齐 */
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  --background: transparent; /* 背景透明 */
+  --box-shadow: none; /* 去掉阴影 */
+  --outline: none; /* 去掉轮廓 */
+  border: none; /* 去掉边框 */
+  float: left;
+}

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

@@ -38,7 +38,7 @@ export class AiChatComponentComponent  implements OnInit {
   interval: any; // 用于存储定时器的引用
   elapsedSeconds: number = 0; // 计时器的秒数
   isLoading: boolean = true; // AI生成文本加载状态,刚开始AI向你打招呼，所以处于加载状态
- 
+  isVoiceModalOpen=false; // 语音识别modal默认关闭
 
   constructor(private navCtrl: NavController,private alertController: AlertController) {
     // 初始化语音识别
@@ -59,7 +59,7 @@ initSpeechRecognition() {
     // 处理识别结果
 this.recognition.onresult = (event: any) => {
   this.recognizedContent += event.results[event.results.length - 1][0].transcript; // 追加识别结果
-  this.userMessage = this.recognizedContent; // 实时更新 userMessage
+  
   console.log("识别到的内容:", this.recognizedContent); // 打印识别到的内容
 };
 
@@ -78,6 +78,7 @@ this.recognition.onresult = (event: any) => {
 
 // 启动语音识别
 startVoice() {
+  this.isVoiceModalOpen=true; 
   if (this.recognition && this.recognition.state !== 'active') { // 检查识别状态
     this.recognition.start(); // 启动语音识别
     console.log('语音识别启动...');
@@ -87,6 +88,10 @@ startVoice() {
   }
 }
 
+cancleVoice() {
+  this.isVoiceModalOpen=false; 
+}
+
   // 启动计时器
   startTimer() {
     this.elapsedSeconds = 0; // 重置秒数
@@ -112,7 +117,7 @@ cancelVoiceInput() {
     this.timer = '00:00'; // 重置计时器显示
     this.recognizedContent = ''; // 清空识别内容
   }
-
+  this.isVoiceModalOpen=false; 
 }
 
 // 发送语音输入
@@ -124,10 +129,11 @@ sendVoiceInput() {
     this.timer = '00:00'; // 重置计时器显示
 
     // 将识别到的内容传到输入框中
-    this.userMessage = this.recognizedContent.trim(); // 将识别内容赋值给输入框，并去除多余空格
+    this.userMessage += this.recognizedContent.trim(); // 将识别内容赋值给输入框，并去除多余空格
 
     this.recognizedContent = ''; // 清空识别内容
   }
+  this.isVoiceModalOpen=false; 
 }
   goBack() {
     this.navCtrl.back(); // 返回上一页
@@ -229,10 +235,32 @@ sendVoiceInput() {
       });
     }
   }
+
+  isEmojiPickerOpen: boolean = false; // 控制表情选择器的打开状态
+  emojis: string[] = ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '🫠', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘',
+     '😗', '☺️', '😚', '😙', '🥲', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🫢', '🫣', '🤫', '🤔', '🫡', '🤐', '🤨', '😐',
+      '😑', '😶', '🫥', '😶‍🌫️', '😏', '😒', '🙄', '😬', '😮‍💨', '🤥', '🫨', '🙂‍↔️', '🙂‍↕️', '😌', '😔', '😪', '🤤', '😴', '🫩', '😷', 
+      '🤒', '🤕', '🤢', '🤮', '🤧', '🥵', '🥶', '🥴', '😵', '😵‍💫', '🤯', '🤠', '🥳', '🥸', '😎', '🤓', '🧐', '😕', '🫤', '😟', 
+      '🙁', '☹️', '😮', '😯', '😲', '😳', '🥺', '🥹', '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖', '😣', '😞', '😓', 
+      '😩', '😫', '🥱', '😤', '😡', '😠', '🤬', '😈', '👿', '💀', '☠️', '💩', '🤡', '👹', '👺', '👻', '👽', '👾', '🤖', '😺', 
+      '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾', '🙈', '🙉', '🙊', '💌', '💘', '❤️', '🖤', '💋', '💯', '💢', '💥', '💫', 
+      '💦', '💤']; // 表情数组
 // 打开表情选择器
-  openEmojiPicker() {
-    console.log("打开表情选择器");
-    
-  }
+openEmojiPicker() {
+  this.isEmojiPickerOpen = true; // 打开模态框
+}
+
+// 关闭表情选择器
+closeEmojiPicker() {
+  this.isEmojiPickerOpen = false; // 关闭模态框
+}
+
+// 添加表情到输入框
+addEmoji(emoji: string) {
+  this.userMessage += emoji; // 将选中的表情添加到输入框
+  this.closeEmojiPicker(); // 关闭模态框
+}
+
+
 
 }