feat: 代码调整

pages/chat/ChatCardAI.vue

@@ -1,14 +1,13 @@
 <template>
 	<view class="chat-ai">
-		<!-- <text>{{ text }}</text> -->
-		<!-- <XMarkdown :markdown="text"/> -->
-		<ua-markdown :source="text" />
+		<ChatMarkdown :text="text"></ChatMarkdown>
 		<slot></slot>
 	</view>
 </template>
 
 <script setup>
 	import { defineProps } from "vue";
+	import ChatMarkdown from "./ChatMarkdown.vue";
 	
 	defineProps({
 	  text: {

pages/chat/ChatCardOther.vue

@@ -0,0 +1,37 @@
+<template>
+	<view class="chat-other">
+		<text>{{ text }}</text>
+		<slot></slot>
+	</view>
+</template>
+
+<script setup>
+	import { defineProps } from "vue";
+	defineProps({
+	  text: {
+	    type: String,
+	    default: ''
+	  }
+	})
+</script>
+
+<style lang="scss" scoped>
+	.chat-other {
+		display: flex;
+		justify-content: center;
+		background-color: white;
+		margin: 6px 12px;
+		padding: 8px 24px;
+		border-radius: 4px;
+		font-size: 14px;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+		
+		text {
+			font-family: PingFang SC, PingFang SC;
+			font-weight: 400;
+			font-size: 14px;
+			color: #333333;
+		}
+		
+	}
+</style>

pages/chat/ChatMainList.vue

@@ -23,19 +23,20 @@
 			
 			  <view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">				  
 				  <template v-if="item.msgType === MessageRole.AI">
-					  <ChatCardAI class="message-item message-item-ai" :text="item.msg">  
+					  <ChatCardAI class="message-item-ai" :text="item.msg">  
 					  	<image v-if="item.msgContent && item.msgContent.type === MessageType.IMAGE" src="/static/logo.png" style="width: 100px;height: 100px;"></image>
 					  </ChatCardAI>			  
 				  </template>
 				  
 				  <template v-else-if="item.msgType === MessageRole.ME">
-					  <ChatCardMine class="message-item message-item-mine" :text="item.msg">
+					  <ChatCardMine class="message-item-mine" :text="item.msg">
 					  </ChatCardMine>  
 				  </template>
 				  <template v-else>
-					  <text class="message-item message-item-other">{{item.msg}}</text>
+					  <ChatCardOther class="message-item-other" :text="item.msg"></ChatCardOther>
 				  </template>	 
 			  </view>
+			  
 			  <!-- 底部锚点（用于滚动到底部） -->
 			  <view :id="lastMsgId"></view>
 			</scroll-view>
@@ -65,6 +66,7 @@
 	import ChatTopNavBar from './ChatTopNavBar.vue';
 	import ChatCardAI from './ChatCardAI.vue';
 	import ChatCardMine from './ChatCardMine.vue';
+	import ChatCardOther from './ChatCardOther.vue';
 	import ChatQuickAccess from './ChatQuickAccess.vue';
 	import ChatMoreTips from './ChatMoreTips.vue';
 	import ChatInputArea from './ChatInputArea.vue'
@@ -167,10 +169,9 @@
 
 		}
 		chatMsgList.value.push(newMsg)
-	
-		sendChat('酒店一共有哪些温泉？')
-		
 		console.log("发送的新消息：",JSON.stringify(newMsg))
+	
+		sendChat(text)	
 	}
 	
 	const scrollToBottom = () => {

pages/chat/ChatMarkdown.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		<ua-markdown :source="text" />
+	</view>
+</template>
+
+<script setup>
+	import { defineProps } from "vue";
+	
+	defineProps({
+	  text: {
+	    type: String,
+	    default: ''
+	  }
+	})
+</script>
+
+<style>
+</style>

pages/chat/styles/ChatMainList.scss

@@ -54,33 +54,19 @@
 				}
 			}
 			
-			.message-item {
-			    display: flex;
-			}
-			
 			.message-item-ai {
+				display: flex;
 				justify-content: flex-start;
 			}
 			
 			.message-item-mine {
+				display: flex;
 				justify-content: flex-end;
 			}
 			
 			.message-item-other {
+				display: flex;
 				justify-content: center;
-				background-color: white;
-				margin: 6px 12px;
-				padding: 8px 24px;
-				border-radius: 4px;
-				font-size: 14px;
-				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-				
-				text {
-					font-family: PingFang SC, PingFang SC;
-					font-weight: 400;
-					font-size: 14px;
-					color: #333333;
-				}
 			}
 		}
 	}