refactor(message/chat): 优化聊天页面

pages/message/chat/index.vue

@@ -1,7 +1,9 @@
 <template>
 	<view class="container">
 		<scroll-view class="chat-messages" scroll-y="true" :scroll-with-animation="true"
-			:scroll-into-view="scrollToView" >
+			:scroll-into-view="scrollToView"
+			:style="{ width: $scrollViewWidth + 'px', padding: $viewPadding + 'px',maxHeight: $viewMaxHeight + 'px'}">
+			<!-- 循环渲染消息 -->
 			<view v-for="(message, index) in messages" :key="index" :id="'msg' + index" style="clear: both;">
 				<view :class="['message', message.sender === 'user' ? 'user-message' : 'ai-message']">
 					<text>{{ message.content }}</text>
@@ -9,7 +11,8 @@
 			</view>
 		</scroll-view>
 		<view class="chat-input">
-			<textarea @linechange="chatMsgMaxHeightChange" auto-height v-model="inputMessage" placeholder="输入消息..." class="input-field"/>
+			<textarea @linechange="chatMsgMaxHeightChange" auto-height v-model="inputMessage" placeholder="输入消息..."
+				class="input-field" />
 			<button class="send-button" @click="sendMessage">发送</button>
 		</view>
 	</view>
@@ -18,7 +21,8 @@
 <script setup>
 	import {
 		ref,
-		nextTick
+		nextTick,
+		onMounted
 	} from 'vue';
 
 	const inputMessage = ref('');
@@ -28,8 +32,9 @@
 		},
 
 	]);
-	const scrollToView = ref('');
+	const scrollToView = ref('');// 滚动到特定消息的标识
 
+	// 发送消息函数
 	function sendMessage() {
 		if (inputMessage.value.trim() === '') {
 			return;
@@ -38,41 +43,61 @@
 			sender: 'user',
 			content: inputMessage.value
 		});
-		inputMessage.value = '';
-		scrollToBottom();
-		getAIResponse();
+		inputMessage.value = ''; // 清空输入框
+		scrollToBottom(); // 滚动到底部
+		getAIResponse(); // 获取AI的回复
 	};
 
+	// 获取AI回复的函数
 	function getAIResponse() {
 		// 这里调用AI客服接口，获取回复
 		uni.request({
 			url: 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=' + messages.value[messages.value.length -
 				1].content,
-			success: function(res) {
+			success: (res) => {
 				messages.value.push({
 					sender: 'ai',
 					content: res.data.content
 				});
+			},
+			fail: (err) => {
+				console.log(err);
+				messages.value.push({
+					sender: 'ai',
+					content: '小客服不在线'
+				});
+			},
+			complete: () => {
 				scrollToBottom();
 			}
 		})
 	};
 
+	// 滚动到底部的函数
 	function scrollToBottom() {
 		nextTick(() => {
-			scrollToView.value = 'msg' + (messages.value.length - 1);
+			scrollToView.value = 'msg' + (messages.value.length - 1); // 更新滚动到的消息
 		});
 	};
-	
-    const $maxHeight = ref(0); // 初始化为0
-    
-    // 使用 onMounted 钩子在组件挂载后获取窗口高度
-    // onMounted(() => {
-    //     const screenHeight = window.innerHeight; // 安全地获取当前窗口的高度
-    //     $maxHeight.value = screenHeight - 200; // 减去200，单位可以为px
-    // });
-	function chatMsgMaxHeightChange(e){
-		console.log(e);
+
+	const $scrollViewWidth = ref(0); // 滚动视图宽度
+	const $viewMaxHeight = ref(0); // 滚动视图最大高度
+	const $viewPadding = ref(10); // 滚动视图内边距
+	const $windowHeight = ref(0); // 窗口高度
+
+	// 使用 onMounted 钩子在组件挂载后获取窗口高度
+	onMounted(() => {
+		const res = uni.getWindowInfo();
+		// 计算滚动视图宽度
+		$scrollViewWidth.value = res.windowWidth - $viewPadding.value * 2;
+		$windowHeight.value = res.windowHeight;
+		$viewMaxHeight.value = res.windowHeight - 100;
+	});
+
+	// 输入框行数变化时更新最大高度
+	function chatMsgMaxHeightChange(e) {
+		console.log($windowHeight,e.detail.height);
+		$viewMaxHeight.value = $windowHeight.value - e.detail.height - 70;
 	}
 </script>
 
@@ -88,11 +113,9 @@
 
 	.chat-messages {
 		flex: 1;
-		padding: 10px;
 		background-color: #f3f3f3;
 		overflow-y: auto;
-		/* 确保消息区域可以滚动 */
-		max-height: calc(100vh - 200rpx);
+		
 	}
 
 	.message {
@@ -108,7 +131,6 @@
 		background-color: #DCF8C6;
 		align-self: flex-end;
 		float: right;
-		margin-right: 40rpx;
 	}
 
 	.ai-message {
@@ -122,17 +144,16 @@
 		background-color: #FFFFFF;
 		border-top: 1px solid #E0E0E0;
 		position: absolute;
-		bottom: 0;	
-		left: 0;	
+		bottom: 0;
+		left: 0;
 		right: 0;
-		
 	}
 
 	.input-field {
 		flex: 1;
 		border: 1px solid #E0E0E0;
 		border-radius: 20px;
-		padding: 10px;
+		padding: 12px;
 		margin-right: 10px;
 	}
 
@@ -142,6 +163,6 @@
 		padding: 0 20px;
 		background-color: #007AFF;
 		color: white;
-		height: 90rpx;
+		height: 46px;
 	}
 </style>