0210348-ai聊天界面优化

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

@@ -1,24 +1,18 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>ai-chat</ion-title>
+<ion-header>
+  <ion-toolbar class="title">
+    <ion-title >历史聊天</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Chat</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
+<ion-content [fullscreen]="true" class="history">
   <!-- Displaying chat history -->
   <div *ngIf="chatHistory.length > 0; else noChats">
     <ion-list>
       <ion-item *ngFor="let chat of chatHistory" (click)="goToChat(chat.chatId)" class="chat-item">
         <div class="avatar">{{ chat.username[0].toUpperCase() }}</div>
         <ion-label>
-          <h2>{{ chat.username }}</h2>
-          <p>{{ chat.userChat }}</p>
+          <h2>{{ chat.userChat.slice(0,18) }}</h2>
+          <p>{{ chat.aiChat.slice(0,18) }}</p>
         </ion-label>
       </ion-item>
     </ion-list>

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

@@ -1,3 +1,17 @@
+.title{
+  font-size: 32px;
+  text-align: center;
+  font-weight: bold;
+  padding-top: 4px;
+  height:50px;
+}
+
+.history{
+  margin-top: 1px;
+}
+
+
+
 .chat-item {
   display: flex;
   align-items: center;
@@ -7,6 +21,7 @@
   border-radius: 10px;
   background-color: #ffffff; /* 更改为白色背景 */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  border: 1.5px solid #d2cccc; /* 添加边框 */;
 
   .avatar {
     display: flex;
@@ -18,7 +33,7 @@
     background-color: #007bff; /* 蓝色头像背景 */
     color: white;
     font-size: 1.5rem;
-    margin-right: 10px;
+    margin-right: 14px;
     text-transform: uppercase;
   }
 

src/app/tab2/tab2.page.html

@@ -1,6 +1,6 @@
 <ion-header>
-  <ion-toolbar>
-    <ion-title>Chat</ion-title>
+  <ion-toolbar class="title">
+    <ion-title >聊天</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -22,8 +22,8 @@
 <ion-footer>
   <ion-toolbar>
     <ion-item>
-      <ion-input [(ngModel)]="userInput" placeholder="Type a message..."></ion-input>
-      <ion-button (click)="sendMessage()">Send</ion-button>
+      <ion-input [(ngModel)]="userInput" placeholder="输入消息..."></ion-input>
+      <ion-button (click)="sendMessage()" class="sendutton">发送</ion-button>
     </ion-item>
   </ion-toolbar>
 </ion-footer>

src/app/tab2/tab2.page.scss

@@ -1,3 +1,11 @@
+.title{
+  font-size: 32px;
+  text-align: center;
+  font-weight: bold;
+  padding-top: 4px;
+  height:50px;
+}
+
 .chat-container {
   display: flex;
   flex-direction: column;
@@ -29,16 +37,16 @@
   padding: 10px;
   border-radius: 5px;
   word-break: break-word; /* 处理消息内容换行问题 */
-  max-width: 330px; /* 设置消息内容的最大宽度，超过这个宽度会自动换行 */
+  max-width: 310px; /* 设置消息内容的最大宽度，超过这个宽度会自动换行 */
 }
 
 
 .user-message .message-content {
-  background-color: #e0f7fa; /* 更合适的用户消息背景颜色 */
+  background-color: #ffecb3; /* 更合适的用户消息背景颜色 */
 }
 
 .ai-message .message-content {
-  background-color: #ffecb3; /* 更合适的AI消息背景颜色 */
+  background-color: #e0f7fa; /* 更合适的AI消息背景颜色 */
 }
 
 .avatar1 {
@@ -69,10 +77,14 @@
 
 .user-message .avatar1 {
   background-color: #007bff;
-  color: white;
+  color: rgb(255, 255, 255);
 }
 
 .ai-message .avatar2 {
   background-color: #007bff;
-  color: white;
+  color: rgb(255, 255, 255);
 }
+
+.sendButton{
+  width:60px;
+}