fix: new files

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

@@ -0,0 +1,73 @@
+<!--头部内容-->
+<ion-header>
+  <ion-toolbar class="custom-toolbar" >
+    <ion-buttons slot="start">
+      <ion-button (click)="goBack()">  <!--返回按钮-->
+        <ion-icon name="chevron-back-sharp" style="color: black; font-size:27px"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>聊天内容</ion-title>  <!--AI名称-->
+    <ion-buttons slot="end">
+      <ion-button >   <!--更多按钮-->
+        <ion-icon name="ellipsis-horizontal" style="color: black; font-size:27px"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<!--聊天区域：聊天内容保存在messages-->
+<ion-content>
+  <div class="chat-container">
+    <div *ngFor="let message of selectedChat" class="message-container">
+      <!-- 用户消息 -->
+      <div *ngIf="message.sender === 'user'" class="message-content user-message-content">
+        <div class="message-bubble user-message">
+          {{ message.text }}
+        </div>
+        <div class="user-avatar">
+          <img src="../../assets/images/touxiang.jpg" alt="用户头像" />
+        </div>
+      </div>
+    
+      <!-- AI消息 -->
+      <div *ngIf="message.sender === 'ai'" class="message-content ai-message-content">
+        <div class="ai-avatar">
+          <img src="../../assets/images/cxtouxiang.jpg" alt="AI头像" />
+        </div>
+        <div class="message-bubble ai-message">
+          {{ message.text }}
+        </div>
+      </div>
+    </div>
+  </div>
+</ion-content>
+
+<!--底部内容-->
+<ion-footer style="background-color: #99d75c;">
+  <ion-toolbar>
+    <div class="footer-content">
+
+      <ion-buttons>  <!--语音输入-->
+        <ion-button  fill="clear" >
+          <ion-icon name="mic-circle-outline" style="color: white; font-size: 40px;"></ion-icon>
+        </ion-button>
+        
+      </ion-buttons>
+<!--文本输入框-->
+      <ion-input placeholder="输入消息..." class="input-box" disabled>
+        <ion-button  fill="clear" slot="end">
+          <ion-icon name="happy-outline" style="color:#99d75c; font-size: 30px;" ></ion-icon> <!--表情符号-->
+
+        </ion-button>
+      </ion-input>
+
+      <ion-buttons>
+        <ion-button  fill="clear">  <!--发送按钮-->
+          <div class="circle">
+          <ion-icon name="paper-plane" style="color: white; font-size: 27px;"></ion-icon>
+        </div>
+        </ion-button>
+      </ion-buttons>
+    </div>
+  </ion-toolbar>
+</ion-footer>

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

@@ -0,0 +1,417 @@
+ion-toolbar {
+    height: 70px; /* 设置你想要的高度 */
+    --min-height: 60px; /* 设置最小高度 */
+    padding: 0; /* 去掉内边距 */
+    display: flex; /* 使用Flexbox布局 */
+    align-items: center; /* 垂直居中对齐 */
+    --background: transparent; /* 去除背景色 */
+  }
+  //头部样式
+  ion-header{
+    background-color: #99d75c ;
+    --background: transparent; /* 去除背景色 */
+  }
+  //头部标题
+  ion-title {
+    margin: 0; /* 去掉默认的外边距 */
+    flex: 1; /* 让标题占据剩余空间 */
+    text-align: center; /* 让标题文本居中 */
+    font-size: 24px;
+  }
+
+/* 文本输入框样式 */
+.input-box {
+  background-color: white; /* 设置输入框背景为白色 */
+  border-radius: 8px; /* 圆角 */
+ 
+  height: 40px; /* 高度 */
+  flex: 1; /* 让输入框占据剩余空间 */
+}
+
+/* 底部内容容器 */
+.footer-content {
+  display: flex; /* 使用Flexbox布局 */
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: center; /* 水平居中对齐 */
+  width: 100%; /* 宽度100% */
+}
+//底部按钮样式
+ion-buttons {
+  margin: 0 5px; /* 按钮之间的间距 */
+}
+//底部发送按钮圆圈样式
+.circle{
+width: 35px;
+height: 35px;
+border-radius: 50%;
+border:2px white solid;
+display: flex; /* 使用Flexbox布局 */
+align-items: center; /* 垂直居中对齐 */
+justify-content: center; /* 水平居中对齐 */
+}
+
+//聊天内容容器样式
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: 10px;
+}
+//聊天内容样式（包括头像和消息）
+.message-container {
+  display: flex; /* 使用Flexbox布局 */
+  justify-content: flex-end; /* 用户消息在右边，AI消息在左边 */
+  margin: 10px 0; /* 消息之间的间距 */
+}
+//消息内容样式
+.message-content {
+  display: flex; /* 使用Flexbox布局 */
+  
+}
+//用户消息和头像样式
+.user-message-content {
+  justify-content: flex-end; /* 用户消息和头像在右边 */
+}
+//AI消息和头像样式
+.ai-message-content {
+  justify-content: flex-start; /* AI消息和头像在左边 */
+}
+/* 气泡样式 */
+.message-bubble {
+  background-color: #99d75c; /* 绿色气泡的背景色 */
+  color: white; /* 字体颜色 */
+  border-radius: 15px; /* 圆角 */
+  padding: 10px 15px; /* 内边距 */
+  max-width: 70%; /* 最大宽度 */
+  white-space: normal; /* 允许换行 */
+  overflow-wrap: break-word; /* 允许在单词边界换行 */
+}
+
+/* 用户消息样式 */
+.user-message {
+  background-color: #99d75c; /* 用户消息的颜色 */
+  margin-left: 10px; /* 与头像之间的间距 */
+}
+
+/* AI消息样式 */
+.ai-message {
+  background-color: white; /* AI消息的气泡颜色 */
+  color: black; /* 字体颜色 */
+  border: 1px solid black; /* 添加黑色边框 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
+  margin-right: 10px; /* 与头像之间的间距 */
+}
+//用户头像样式
+.user-avatar {
+  width: 40px; /* 头像宽度 */
+  height: 40px; /* 头像高度 */
+  border-radius: 50%; /* 圆形 */
+  overflow: hidden; /* 超出部分隐藏 */
+  display: flex; /* 使用Flexbox布局 */
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: center; /* 水平居中对齐 */
+  background-color: #f0f0f0; /* 背景色 */
+  border: 2px solid #99d75c; /* 边框颜色 */
+  margin-left: 5px; /* 与消息之间的间距 */
+}
+//AI头像样式
+.ai-avatar {
+  width: 40px; /* 头像宽度 */
+  height: 40px; /* 头像高度 */
+  border-radius: 50%; /* 圆形 */
+  overflow: hidden; /* 超出部分隐藏 */
+  display: flex; /* 使用Flexbox布局 */
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: center; /* 水平居中对齐 */
+  background-color: #f0f0f0; /* 背景色 */
+  border: 2px solid #99d75c; /* 边框颜色 */
+  margin-right: 5px; /* 与消息之间的间距 */
+}
+//用户头像图片样式
+.user-avatar img {
+  width: 100%; /* 使图片适应头像框 */
+  height: 100%; /* 使图片适应头像框 */
+  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
+}
+//AI头像图片样式
+.ai-avatar img {
+  width: 100%; /* 使图片适应头像框 */
+  height: 100%; /* 使图片适应头像框 */
+  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
+}
+//语音框
+.yuyinframe{
+  --background: transparent; 
+  background-color: #99d75c; 
+  display: flex; 
+  flex-direction: column; 
+  justify-content: center; 
+  align-items: center;
+}
+.modal-content {
+  display: flex;
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: center; /* 水平居中对齐 */
+  width: 100%; /* 宽度100% */
+  height: 25%;
+}
+//语音框中间内容框
+.timer-container {
+  height: 100%;
+  flex-direction: column; /* 垂直排列 */
+  
+  justify-content: center; /* 水平居中对齐 */
+
+}
+//计时器样式
+#timer{
+  width: 100%;
+  margin-top: 30px; /* 可根据需要调整这个值 */
+  text-align: center; /* 确保文本居中 */
+  margin-bottom: 10px;
+}
+
+/*语音取消按钮的样式 */
+.cancle-button {
+  font-size: 75px;
+  display: flex; /* 使用Flexbox布局 */
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: center; /* 水平居中对齐 */
+  color: white;
+  background-color: #99d75c; 
+  margin-right: 20px;
+}
+
+/*语音发送按钮的样式 */
+.send-button {
+  height:60px ;
+  width: 60px;
+  border-radius: 50%;//圆
+  display: flex; /* 使用Flexbox布局 */
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: center; /* 水平居中对齐 */
+  color: white;
+  background-color: #99d75c; 
+  border: 5px solid white;
+  margin-left: 20px;
+}
+
+
+//音律跳动
+.light {
+  width: 100%;
+  height: 90px;
+  display: flex;
+}
+
+.light span {
+  width: 10px;
+  border-radius: 18px;
+  margin-right: 20px;
+}
+
+.light span:nth-child(1) {
+  animation: bar1 2s 0.2s infinite linear;
+}
+
+.light span:nth-child(2) {
+  animation: bar2 2s 0.4s infinite linear;
+}
+
+.light span:nth-child(3) {
+  animation: bar3 2s 0.6s infinite linear;
+}
+
+.light span:nth-child(4) {
+  animation: bar4 2s 0.8s infinite linear;
+}
+
+.light span:nth-child(5) {
+  animation: bar5 2s 1.0s infinite linear;
+}
+
+.light span:nth-child(6) {
+  animation: bar6 2s 1.2s infinite linear;
+}
+
+.light span:nth-child(7) {
+  animation: bar7 2s 1.4s infinite linear;
+}
+
+.light span:nth-child(8) {
+  animation: bar8 2s 1.6s infinite linear;
+}
+
+.light span:nth-child(9) {
+  animation: bar9 2s 1.8s infinite linear;
+}
+//第一条音律加载动画
+@keyframes bar1 {
+  0% {
+      background: #f677b0;
+      margin-top: 25%;
+      height: 10%;
+  }
+
+  50% {
+      background: #f677b0;
+      height: 100%;
+      margin-top: 0%;
+  }
+
+  100% {
+      background: #f677b0;
+      height: 10%;
+      margin-top: 25%;
+  }
+}
+//第二条音律加载动画
+@keyframes bar2 {
+  0% {
+      background: #df7ff2;
+      margin-top: 25%;
+      height: 10%;
+  }
+
+  50% {
+      background: #df7ff2;
+      height: 100%;
+      margin-top: 0%;
+  }
+
+  100% {
+      background: #df7ff2;
+      height: 10%;
+      margin-top: 25%;
+  }
+}
+//第三条音律加载动画
+@keyframes bar3 {
+  0% {
+      background: #8c7ff2;
+      margin-top: 25%;
+      height: 10%;
+  }
+
+  50% {
+      background: #8c7ff2;
+      height: 100%;
+      margin-top: 0%;
+  }
+
+  100% {
+      background: #8c7ff2;
+      height: 10%;
+      margin-top: 25%;
+  }
+}
+//第四条音律加载动画
+@keyframes bar4 {
+  0% {
+      background: #024b6a;
+      margin-top: 25%;
+      height: 10%;
+  }
+
+  50% {
+      background: #024b6a;
+      height: 100%;
+      margin-top: 0%;
+  }
+
+  100% {
+      background: #024b6a;
+      height: 10%;
+      margin-top: 25%;
+  }
+}
+//第五条音律加载动画
+@keyframes bar5 {
+  0% {
+      background: #7ff2d3;
+      margin-top: 25%;
+      height: 10%;
+  }
+
+  50% {
+      background: #7ff2d3;
+      height: 100%;
+      margin-top: 0%;
+  }
+
+  100% {
+      background: #7ff2d3;
+      height: 10%;
+      margin-top: 25%;
+  }
+}
+//三个点的加载动画
+.loading-dots {
+  display: flex;
+  align-items: center;
+  margin-left: 10px; /* 气泡与点之间的间距 */
+}
+
+.loading-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #99d75c; /* 点的颜色 */
+  margin: 0 2px; /* 点之间的间距 */
+  animation: loading 1s infinite; /* 加载动画 */
+}
+//第一个点
+.loading-dot:nth-child(1) {
+  animation-delay: 0s;
+}
+//第二个点
+.loading-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+//第三个点
+.loading-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+//加载动画
+@keyframes loading {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+
+/* 表情选择器样式 */
+.emoji-picker {
+  --background: transparent; /* 去除默认样式 */
+  background-color: #99d75c; /* 背景颜色 */
+  padding: 10px;
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  overflow: hidden; /* 隐藏多余内容 */
+}
+
+/* 表情容器用于支持滚动 */
+.emoji-container {
+  display: flex;
+  flex-wrap: wrap; /* 允许换行 */
+  overflow-y: auto; /* 允许纵向滚动 */
+  max-height: 70vh; /* 最大高度，防止超出屏幕 */
+  width: 100%; /* 容器宽度 */
+}
+
+/* 表情按钮 */
+.emoji-button {
+  margin: 5px; /* 每个表情与顶部的间距 */
+  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; /* 去掉边框 */
+}

fashion-app/src/app/chat-content/chat-content.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ChatContentComponent } from './chat-content.component';
+
+describe('ChatContentComponent', () => {
+  let component: ChatContentComponent;
+  let fixture: ComponentFixture<ChatContentComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ChatContentComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChatContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonButtons, IonHeader, IonToolbar,IonButton, IonIcon, IonTitle, IonInput, IonFooter, IonContent, AlertController, IonCardContent, IonList, IonItem, IonLabel, IonCard, IonCardHeader, IonCardTitle, NavController,  } from '@ionic/angular/standalone';
+@Component({
+  selector: 'app-chat-content',
+  templateUrl: './chat-content.component.html',
+  styleUrls: ['./chat-content.component.scss'],
+  standalone: true,
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,IonList,IonItem,IonLabel,CommonModule,IonCard,IonCardHeader,IonCardTitle,
+      IonButton,IonCardContent,IonIcon,IonButtons,IonInput,IonFooter,IonInput,IonContent,],
+  
+})
+export class ChatContentComponent  implements OnInit {
+
+  chat: any;
+  selectedChat: any; // 存储当前选择的聊天记录,json字符串
+
+  constructor(private router: Router,private navCtrl: NavController) {
+    const navigation = this.router.getCurrentNavigation();
+    if (navigation && navigation.extras.state) {
+       // 使用类型断言
+       this.chat = (navigation.extras.state as { chat: any }).chat;
+       console.log(this.chat);
+    }
+  }
+
+  ngOnInit() {
+    this.handle()
+  }
+
+
+  handle(){
+       this.selectedChat = this.chat.data.content; // 更新当前选择的聊天记录
+    console.log("选择聊天记录", this.selectedChat);
+    // 解析 JSON 字符串为对象数组
+ this.selectedChat = JSON.parse(this.selectedChat);
+console.log("解析后的聊天记录", this.selectedChat);
+  }
+
+  goBack() {
+
+    this.navCtrl.back(); // 返回上一页
+  
+    }
+
+}

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

@@ -1,6 +1,6 @@
 
-<div *ngIf="!selectedChat" class="history-frame">
-<ion-header *ngIf="!selectedChat">
+
+<ion-header >
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-button (click)="goBack()">  <!--返回按钮-->
@@ -23,52 +23,5 @@
       </ion-label>
     </ion-item>
   </ion-list>
-</div>
-
-<div *ngIf="selectedChat">
-<!--头部内容-->
-<ion-header>
-  <ion-toolbar class="custom-toolbar" >
-    <ion-buttons slot="start">
-      <ion-button (click)="clearSelection()">  <!--返回按钮-->
-        <ion-icon name="chevron-back-sharp" style="color: black; font-size:27px"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>聊天内容</ion-title>  <!--名称-->
-    <ion-buttons slot="end">
-      <ion-button >   <!--更多按钮-->
-        <ion-icon name="ellipsis-horizontal" style="color: black; font-size:27px"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<!--聊天区域：聊天内容保存在messages-->
-
-  <div class="chat-container">
-    <div *ngFor="let message of selectedChat" class="message-container">
-      <!-- 用户消息 -->
-      <div *ngIf="message.sender === 'user'" class="message-content user-message-content">
-        <div class="message-bubble user-message">
-          {{ message.text }}
-        </div>
-        <div class="user-avatar">
-          <img src="../../assets/images/touxiang.jpg" alt="用户头像" />
-        </div>
-      </div>
-    
-      <!-- AI消息 -->
-      <div *ngIf="message.sender === 'ai'" class="message-content ai-message-content">
-        <div class="ai-avatar">
-          <img src="../../assets/images/cxtouxiang.jpg" alt="AI头像" />
-        </div>
-        <div class="message-bubble ai-message">
-          {{ message.text }}
-        </div>
-      </div>
-    </div>
-
-  </div>
-
 
 

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

@@ -1,417 +0,0 @@
-ion-toolbar {
-    height: 70px; /* 设置你想要的高度 */
-    --min-height: 60px; /* 设置最小高度 */
-    padding: 0; /* 去掉内边距 */
-    display: flex; /* 使用Flexbox布局 */
-    align-items: center; /* 垂直居中对齐 */
-    --background: transparent; /* 去除背景色 */
-  }
-  //头部样式
-  ion-header{
-    background-color: #99d75c ;
-    --background: transparent; /* 去除背景色 */
-  }
-  //头部标题
-  ion-title {
-    margin: 0; /* 去掉默认的外边距 */
-    flex: 1; /* 让标题占据剩余空间 */
-    text-align: center; /* 让标题文本居中 */
-    font-size: 24px;
-  }
-
-/* 文本输入框样式 */
-.input-box {
-  background-color: white; /* 设置输入框背景为白色 */
-  border-radius: 8px; /* 圆角 */
- 
-  height: 40px; /* 高度 */
-  flex: 1; /* 让输入框占据剩余空间 */
-}
-
-/* 底部内容容器 */
-.footer-content {
-  display: flex; /* 使用Flexbox布局 */
-  align-items: center; /* 垂直居中对齐 */
-  justify-content: center; /* 水平居中对齐 */
-  width: 100%; /* 宽度100% */
-}
-//底部按钮样式
-ion-buttons {
-  margin: 0 5px; /* 按钮之间的间距 */
-}
-//底部发送按钮圆圈样式
-.circle{
-width: 35px;
-height: 35px;
-border-radius: 50%;
-border:2px white solid;
-display: flex; /* 使用Flexbox布局 */
-align-items: center; /* 垂直居中对齐 */
-justify-content: center; /* 水平居中对齐 */
-}
-
-//聊天内容容器样式
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  padding-top: 10px;
-}
-//聊天内容样式（包括头像和消息）
-.message-container {
-  display: flex; /* 使用Flexbox布局 */
-  justify-content: flex-end; /* 用户消息在右边，AI消息在左边 */
-  margin: 10px 0; /* 消息之间的间距 */
-}
-//消息内容样式
-.message-content {
-  display: flex; /* 使用Flexbox布局 */
-  
-}
-//用户消息和头像样式
-.user-message-content {
-  justify-content: flex-end; /* 用户消息和头像在右边 */
-}
-//AI消息和头像样式
-.ai-message-content {
-  justify-content: flex-start; /* AI消息和头像在左边 */
-}
-/* 气泡样式 */
-.message-bubble {
-  background-color: #99d75c; /* 绿色气泡的背景色 */
-  color: white; /* 字体颜色 */
-  border-radius: 15px; /* 圆角 */
-  padding: 10px 15px; /* 内边距 */
-  max-width: 70%; /* 最大宽度 */
-  white-space: normal; /* 允许换行 */
-  overflow-wrap: break-word; /* 允许在单词边界换行 */
-}
-
-/* 用户消息样式 */
-.user-message {
-  background-color: #99d75c; /* 用户消息的颜色 */
-  margin-left: 10px; /* 与头像之间的间距 */
-}
-
-/* AI消息样式 */
-.ai-message {
-  background-color: white; /* AI消息的气泡颜色 */
-  color: black; /* 字体颜色 */
-  border: 1px solid black; /* 添加黑色边框 */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
-  margin-right: 10px; /* 与头像之间的间距 */
-}
-//用户头像样式
-.user-avatar {
-  width: 40px; /* 头像宽度 */
-  height: 40px; /* 头像高度 */
-  border-radius: 50%; /* 圆形 */
-  overflow: hidden; /* 超出部分隐藏 */
-  display: flex; /* 使用Flexbox布局 */
-  align-items: center; /* 垂直居中对齐 */
-  justify-content: center; /* 水平居中对齐 */
-  background-color: #f0f0f0; /* 背景色 */
-  border: 2px solid #99d75c; /* 边框颜色 */
-  margin-left: 5px; /* 与消息之间的间距 */
-}
-//AI头像样式
-.ai-avatar {
-  width: 40px; /* 头像宽度 */
-  height: 40px; /* 头像高度 */
-  border-radius: 50%; /* 圆形 */
-  overflow: hidden; /* 超出部分隐藏 */
-  display: flex; /* 使用Flexbox布局 */
-  align-items: center; /* 垂直居中对齐 */
-  justify-content: center; /* 水平居中对齐 */
-  background-color: #f0f0f0; /* 背景色 */
-  border: 2px solid #99d75c; /* 边框颜色 */
-  margin-right: 5px; /* 与消息之间的间距 */
-}
-//用户头像图片样式
-.user-avatar img {
-  width: 100%; /* 使图片适应头像框 */
-  height: 100%; /* 使图片适应头像框 */
-  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
-}
-//AI头像图片样式
-.ai-avatar img {
-  width: 100%; /* 使图片适应头像框 */
-  height: 100%; /* 使图片适应头像框 */
-  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
-}
-//语音框
-.yuyinframe{
-  --background: transparent; 
-  background-color: #99d75c; 
-  display: flex; 
-  flex-direction: column; 
-  justify-content: center; 
-  align-items: center;
-}
-.modal-content {
-  display: flex;
-  align-items: center; /* 垂直居中对齐 */
-  justify-content: center; /* 水平居中对齐 */
-  width: 100%; /* 宽度100% */
-  height: 25%;
-}
-//语音框中间内容框
-.timer-container {
-  height: 100%;
-  flex-direction: column; /* 垂直排列 */
-  
-  justify-content: center; /* 水平居中对齐 */
-
-}
-//计时器样式
-#timer{
-  width: 100%;
-  margin-top: 30px; /* 可根据需要调整这个值 */
-  text-align: center; /* 确保文本居中 */
-  margin-bottom: 10px;
-}
-
-/*语音取消按钮的样式 */
-.cancle-button {
-  font-size: 75px;
-  display: flex; /* 使用Flexbox布局 */
-  align-items: center; /* 垂直居中对齐 */
-  justify-content: center; /* 水平居中对齐 */
-  color: white;
-  background-color: #99d75c; 
-  margin-right: 20px;
-}
-
-/*语音发送按钮的样式 */
-.send-button {
-  height:60px ;
-  width: 60px;
-  border-radius: 50%;//圆
-  display: flex; /* 使用Flexbox布局 */
-  align-items: center; /* 垂直居中对齐 */
-  justify-content: center; /* 水平居中对齐 */
-  color: white;
-  background-color: #99d75c; 
-  border: 5px solid white;
-  margin-left: 20px;
-}
-
-
-//音律跳动
-.light {
-  width: 100%;
-  height: 90px;
-  display: flex;
-}
-
-.light span {
-  width: 10px;
-  border-radius: 18px;
-  margin-right: 20px;
-}
-
-.light span:nth-child(1) {
-  animation: bar1 2s 0.2s infinite linear;
-}
-
-.light span:nth-child(2) {
-  animation: bar2 2s 0.4s infinite linear;
-}
-
-.light span:nth-child(3) {
-  animation: bar3 2s 0.6s infinite linear;
-}
-
-.light span:nth-child(4) {
-  animation: bar4 2s 0.8s infinite linear;
-}
-
-.light span:nth-child(5) {
-  animation: bar5 2s 1.0s infinite linear;
-}
-
-.light span:nth-child(6) {
-  animation: bar6 2s 1.2s infinite linear;
-}
-
-.light span:nth-child(7) {
-  animation: bar7 2s 1.4s infinite linear;
-}
-
-.light span:nth-child(8) {
-  animation: bar8 2s 1.6s infinite linear;
-}
-
-.light span:nth-child(9) {
-  animation: bar9 2s 1.8s infinite linear;
-}
-//第一条音律加载动画
-@keyframes bar1 {
-  0% {
-      background: #f677b0;
-      margin-top: 25%;
-      height: 10%;
-  }
-
-  50% {
-      background: #f677b0;
-      height: 100%;
-      margin-top: 0%;
-  }
-
-  100% {
-      background: #f677b0;
-      height: 10%;
-      margin-top: 25%;
-  }
-}
-//第二条音律加载动画
-@keyframes bar2 {
-  0% {
-      background: #df7ff2;
-      margin-top: 25%;
-      height: 10%;
-  }
-
-  50% {
-      background: #df7ff2;
-      height: 100%;
-      margin-top: 0%;
-  }
-
-  100% {
-      background: #df7ff2;
-      height: 10%;
-      margin-top: 25%;
-  }
-}
-//第三条音律加载动画
-@keyframes bar3 {
-  0% {
-      background: #8c7ff2;
-      margin-top: 25%;
-      height: 10%;
-  }
-
-  50% {
-      background: #8c7ff2;
-      height: 100%;
-      margin-top: 0%;
-  }
-
-  100% {
-      background: #8c7ff2;
-      height: 10%;
-      margin-top: 25%;
-  }
-}
-//第四条音律加载动画
-@keyframes bar4 {
-  0% {
-      background: #024b6a;
-      margin-top: 25%;
-      height: 10%;
-  }
-
-  50% {
-      background: #024b6a;
-      height: 100%;
-      margin-top: 0%;
-  }
-
-  100% {
-      background: #024b6a;
-      height: 10%;
-      margin-top: 25%;
-  }
-}
-//第五条音律加载动画
-@keyframes bar5 {
-  0% {
-      background: #7ff2d3;
-      margin-top: 25%;
-      height: 10%;
-  }
-
-  50% {
-      background: #7ff2d3;
-      height: 100%;
-      margin-top: 0%;
-  }
-
-  100% {
-      background: #7ff2d3;
-      height: 10%;
-      margin-top: 25%;
-  }
-}
-//三个点的加载动画
-.loading-dots {
-  display: flex;
-  align-items: center;
-  margin-left: 10px; /* 气泡与点之间的间距 */
-}
-
-.loading-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #99d75c; /* 点的颜色 */
-  margin: 0 2px; /* 点之间的间距 */
-  animation: loading 1s infinite; /* 加载动画 */
-}
-//第一个点
-.loading-dot:nth-child(1) {
-  animation-delay: 0s;
-}
-//第二个点
-.loading-dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-//第三个点
-.loading-dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-//加载动画
-@keyframes loading {
-  0%, 100% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-
-/* 表情选择器样式 */
-.emoji-picker {
-  --background: transparent; /* 去除默认样式 */
-  background-color: #99d75c; /* 背景颜色 */
-  padding: 10px;
-  display: flex;
-  justify-content: center; /* 水平居中 */
-  overflow: hidden; /* 隐藏多余内容 */
-}
-
-/* 表情容器用于支持滚动 */
-.emoji-container {
-  display: flex;
-  flex-wrap: wrap; /* 允许换行 */
-  overflow-y: auto; /* 允许纵向滚动 */
-  max-height: 70vh; /* 最大高度，防止超出屏幕 */
-  width: 100%; /* 容器宽度 */
-}
-
-/* 表情按钮 */
-.emoji-button {
-  margin: 5px; /* 每个表情与顶部的间距 */
-  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; /* 去掉边框 */
-}

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

@@ -19,7 +19,7 @@ addIcons({ chevronBackSharp,ellipsisHorizontal,micCircleOutline,happyOutline,pap
 export class ChatHistoryComponent  implements OnInit {
 
   chatHistories: any[] = []; // 存储聊天记录
-  selectedChat: any; // 存储当前选择的聊天记录,json字符串
+
 
 
   constructor(private router: Router,private navCtrl: NavController) {}
@@ -45,18 +45,9 @@ export class ChatHistoryComponent  implements OnInit {
 
   // 选择聊天记录
   selectChatHistory(chat: any) {
-    this.selectedChat = chat.data.content; // 更新当前选择的聊天记录
-    console.log("选择聊天记录", this.selectedChat);
-    // 解析 JSON 字符串为对象数组
- this.selectedChat = JSON.parse(this.selectedChat);
-
-
+    this.router.navigate(['tabs/chatcontent'], { state: { chat: chat } });
   }
 
-  // 清除选择
-  clearSelection() {
-    this.selectedChat = null; // 清除选择
-  }
 
   goBack() {
 

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

@@ -56,6 +56,10 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../chat-history/chat-history.component').then((m) => m.ChatHistoryComponent),
       },
+     { path: 'chatcontent',
+      loadComponent: () =>
+        import('../chat-content/chat-content.component').then((m) => m.ChatContentComponent),
+    },
       
       {
         path: '',