瀏覽代碼

feat(message/chat): 未接收到返回结果时显示加载动画

wangpx 1 年之前
父節點
當前提交
efe8f33860
共有 3 個文件被更改,包括 104 次插入35 次删除
  1. 1 0
      api/AI.js
  2. 1 1
      config_hnyz.js
  3. 102 34
      pages/message/chat/index.vue

+ 1 - 0
api/AI.js

@@ -4,6 +4,7 @@ const preUrl = '/clientServices.do?iscrypt=1'
 export function sendMessageToAI(message) {
 	return request({
 		url: preUrl,
+		timeout: 100000, //请求超时 延长为100s
 		method: 'post',
 		data: {
 			serviceId: 'miniapp_ai_getReceive',

+ 1 - 1
config_hnyz.js

@@ -2,7 +2,7 @@ export default {
 	baseUrl: 'https://api.hnyunzhu.com:2443/ynet/',
 	baseUrlPre:'https://api.hnyunzhu.com:2443',
 	logoSrc: `https://api.hnyunzhu.com:2443/shares/document/yz/20250215/T_Company/412314635407140.png`,
-	companyName: '湖南韫珠',
+	companyName: '韫珠科技',
 	companyCode: 'yz',
 	mapKey: 'CEBBZ-ASFKI-GZ2GU-UBGBO-MM6PZ-VTF3E',
 	timeout: 10000,

+ 102 - 34
pages/message/chat/index.vue

@@ -1,4 +1,5 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view class="container">
 		<scroll-view class="chat-messages" scroll-y="true" :scroll-with-animation="true"
 			:scroll-into-view="scrollToView"
@@ -9,11 +10,17 @@
 					<text :user-select="true" :selectable="true">{{ message.content }}</text>
 				</view>
 			</view>
+			<!-- 加载中 -->
+			<view style="clear: both;" v-if="loadingButton">
+				<view class="message ai-message">
+					<button :loading="true" class="loading_button" type="default"></button>
+				</view>
+			</view>
 		</scroll-view>
 		<view class="chat-input">
 			<textarea @linechange="chatMsgMaxHeightChange" auto-height v-model="inputMessage" placeholder="输入消息..."
 				class="input-field" />
-			<button class="send-button" :disabled="!button_state" @click="sendMessage">发送</button>
+			<button class="send-button" :disabled="!buttonState" @click="sendMessage">发送</button>
 		</view>
 	</view>
 	<view class="fab_button">
@@ -26,41 +33,45 @@
 		<uni-drawer ref="showLeftDrawer" :width="220">
 			<view>
 				<scroll-view scroll-y="true" :style="{height: '100vh'}">
-					<uni-list>
-						<uni-list-item title="新建会话" :clickable="true" @click="createSession()">
-							<template v-slot:footer>
-								<uni-icons type="plus-filled" size="24"></uni-icons>
-							</template>
-						</uni-list-item>
-						<view v-for="(session,index) in sessionList" :key="index">
-							<uni-list-item :title="session.sessionName" :clickable="true"
-								@click="changeSession(session.sessionId)" :ellipsis="2">
+					<view class="list_container">
+						<uni-list>
+							<uni-list-item title="新建会话" :clickable="true" @click="createSession()">
 								<template v-slot:footer>
-									<uni-icons type="compose" size="24"
-										@click.stop.prevent="toEditSession(session)"></uni-icons>
+									<uni-icons type="plus-filled" size="24"></uni-icons>
 								</template>
 							</uni-list-item>
-						</view>
-					</uni-list>
+							<view v-for="(session,index) in sessionList" :key="index">
+								<uni-list-item :title="session.sessionName" :clickable="true"
+									@click="changeSession(session.sessionId)" :ellipsis="2">
+									<template v-slot:footer>
+										<uni-icons type="compose" size="24"
+											@click.stop.prevent="toEditSession(session)"></uni-icons>
+									</template>
+								</uni-list-item>
+							</view>
+						</uni-list>
+					</view>
 				</scroll-view>
 			</view>
 		</uni-drawer>
 	</view>
 	<view class="edit_popup">
 		<uni-popup ref="editPopup" type="center" :mask-click="true">
-			<uni-card title="编辑会话信息">
-				<uni-forms ref="editForm" :modelValue="editSession" :rules="rules">
-					<uni-forms-item label="会话名" name="sessionName">
-						<uni-easyinput type="text" v-model="editSession.sessionName" placeholder="请输入会话名" />
-					</uni-forms-item>
-					<uni-forms-item>
-						<button type="primary" :disabled="!editButtonState" @click="submitEditSession()">确认</button>
-					</uni-forms-item>
-					<uni-forms-item>
-						<button type="warn" :disabled="!editButtonState" @click="deleteSession()">删除</button>
-					</uni-forms-item>
-				</uni-forms>
-			</uni-card>
+			<view class="edit_session_container">
+				<uni-card title="编辑会话信息">
+					<uni-forms ref="editForm" :modelValue="editSession" :rules="rules">
+						<uni-forms-item label="会话名" name="sessionName">
+							<uni-easyinput type="textarea" v-model="editSession.sessionName" placeholder="请输入会话名" />
+						</uni-forms-item>
+						<uni-forms-item>
+							<button type="primary" :disabled="!editButtonState" @click="submitEditSession()">确认</button>
+						</uni-forms-item>
+						<uni-forms-item>
+							<button type="warn" :disabled="!editButtonState" @click="deleteSession()">删除</button>
+						</uni-forms-item>
+					</uni-forms>
+				</uni-card>
+			</view>
 		</uni-popup>
 	</view>
 </template>
@@ -162,26 +173,29 @@ function initHistoryMessage(sessionId) {
 				content: item.receiveContent
 			})
 		}
+		scrollToBottom(); // 滚动到底部
 	})
 }
 
 	const thisSessionId = ref(0);
 	const inputMessage = ref('');
 	const scrollToView = ref('');// 滚动到特定消息的标识
-	const button_state = ref(true)
+	const buttonState = ref(true)
+	const loadingButton = ref(false)
 
 	// 发送消息函数
 	function sendMessage() {
-		button_state.value = false
+		buttonState.value = false
 		if (inputMessage.value.trim() === '') {
-			button_state.value = true
+			buttonState.value = true
 			return;
 		}
 		messages.push({
 			sender: 'user',
 			content: inputMessage.value
 		});
-		
+		loadingButton.value = true
+		scrollToBottom(); // 滚动到底部
 		const message = {
 			sessionId: thisSessionId.value,
 			prompt: inputMessage.value,
@@ -200,8 +214,9 @@ function initHistoryMessage(sessionId) {
 				initHistorySession()
 			}
 			inputMessage.value = ''; // 清空输入框
+			loadingButton.value = false
 			if (thisSessionId.value != returnParams.sessionId) {
-				button_state.value = true;
+				buttonState.value = true;
 				return
 			}
 			let content = ""
@@ -210,7 +225,6 @@ function initHistoryMessage(sessionId) {
 				sender: 'assistant',
 				content: content
 			});
-			scrollToBottom(); // 滚动到底部
 			let i = 0
 			const charLength = 3 // 每次显示字数
 			const messageLength = returnParams.receiveContent.length
@@ -221,7 +235,7 @@ function initHistoryMessage(sessionId) {
 					i += charLength;
 				} else {
 					clearInterval(interval);
-					button_state.value = true;
+					buttonState.value = true;
 				}
 			}, 50); // 50ms 一次
 		})
@@ -272,6 +286,13 @@ function initHistoryMessage(sessionId) {
 	word-wrap: break-word;
 }
 
+.loading_button {
+	background-color: #ECECEC !important;
+}
+.loading_button::after {
+	border: 0px;
+}
+
 .user-message {
 	background-color: #DCF8C6;
 	align-self: flex-end;
@@ -316,6 +337,53 @@ function initHistoryMessage(sessionId) {
 			.uni-fab__circle {
 				bottom: 100px !important;
 			}
+			.uni-fab__circle {
+				width: calc(55px + .5*(1rem - 16px)) !important;
+				height: calc(55px + .5*(1rem - 16px)) !important;
+			
+				.uni-icons {
+					font-size: calc(32px + .5*(1rem - 16px)) !important;
+				}
+			}
+		}
+	}
+	.drawer_container {
+		::v-deep .list_container {
+			.uni-list-item__content {
+				.uni-list-item__content-title {
+					font-size: calc(14px + .5*(1rem - 16px)) !important;
+				}
+			}
+			.uni-icons {
+				font-size: calc(24px + .5*(1rem - 16px)) !important;
+			}
+		}
+	}
+	.edit_popup {
+		::v-deep .edit_session_container {
+			.uni-card__header {
+				.uni-card__header-content-title {
+					font-size: calc(15px + .5*(1rem - 16px)) !important;
+				}
+			}
+			.uni-card__content {
+				.uni-forms-item {
+					.uni-forms-item__label {
+						font-size: calc(14px + .5*(1rem - 16px)) !important;
+					}
+					.uni-forms-item__content {
+						.uni-easyinput {
+							.uni-easyinput__content-textarea {
+								font-size: calc(14px + .5*(1rem - 16px)) !important;
+								min-width: 200px;
+							}
+							.uni-icons {
+								font-size: calc(24px + .5*(1rem - 16px)) !important;
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 </style>