nongxiaoyu/pages/knowledge/ai-chat/index.vue

<template>
	<view class="container">
		<!-- 聊天记录区域 -->
		<scroll-view class="chat-container" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true"
			@scroll="onScroll" :style="{ 
        height: `calc(100vh - ${inputHeight}px)`,
        marginTop: '0'
      }">
			<view class="chat-list">
				<view v-for="(message, index) in chatMessages" :key="index" class="message-item"
					:class="{ 'message-ai': message.sender === 'ai', 'message-user': message.sender === 'user' }">
					<!-- AI消息 -->
					<template v-if="message.sender === 'ai'">
						<view class="avatar-container">
							<image class="avatar" src="/static/icons/ai.png" mode="aspectFill"></image>
						</view>
						<view class="message-content">
							<view class="message-bubble ai-bubble"
								:class="{'typing': message.isTyping, 'welcome': message.isWelcome || index === 0}">
								<view v-if="message.isTyping" class="typing-indicator">
									<view class="typing-dot"></view>
									<view class="typing-dot"></view>
									<view class="typing-dot"></view>
								</view>
								<text v-else class="message-text"
									:class="{'highlight': containsKeywords(message.content)}">
									{{ message.content }}
								</text>
							</view>
							<text class="message-time">{{ message.time }}</text>
						</view>
					</template>

					<!-- 用户消息 -->
					<template v-else>
						<view class="message-content user-content">
							<text class="message-time">{{ message.time }}</text>
							<view class="message-bubble user-bubble">
								<text class="message-text">{{ message.content }}</text>
							</view>
						</view>
						<view class="avatar-container">
							<image class="avatar" src="/static/images/user-avatar.svg" mode="aspectFill"></image>
						</view>
					</template>
				</view>
			</view>
		</scroll-view>

		<!-- 底部输入区 -->
		<view class="input-container" :style="{ paddingBottom: `${isIOS ? safeAreaBottom : 20}rpx` }">
			<!-- 问题建议区 -->
			<scroll-view v-if="chatMessages.length <= 3 && !inputMessage" class="suggested-questions" scroll-x>
				<view v-for="(question, index) in suggestedQuestions" :key="index" class="question-chip"
					@click="useQuestion(question)">
					<text>{{ question }}</text>
				</view>
			</scroll-view>

			<view class="input-wrapper">
				<textarea class="message-input" v-model="inputMessage" placeholder="请输入您的问题..." :disabled="isProcessing"
					auto-height :maxlength="300" :style="{ maxHeight: '120rpx' }" @focus="onInputFocus"
					@confirm="submitQuestion" />
				<view class="send-button" :class="{ 'disabled': !inputMessage.trim() || isProcessing }"
					@click="submitQuestion" hover-class="button-hover">
					<image class="send-icon-image"
						:src="inputMessage.trim() && !isProcessing ? '/static/icons/chat.png' : '/static/icons/chat_off.png'"
						mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/config/api.js";
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				inputMessage: '', // 输入框消息
				chatMessages: [{
					sender: 'ai',
					content: '您好！我是农小禹，您的智能农业助手🌱 我可以帮您解答农业种植、病虫害防治、农产品管理等方面的问题。有什么可以帮助您的吗？',
					time: this.getFormattedTime(new Date()),
					timestamp: Date.now(),
					isWelcome: true
				}],
				scrollTop: 0,
				inputHeight: 110,
				isProcessing: false,
				requestTask: null,
				currentTypingMessage: null, // 当前正在输入的消息索引
				suggestedQuestions: [
					'水稻插秧后如何管理？',
					'果树夏季修剪技巧？',
					'如何防治蔬菜常见病虫害？',
					'农药使用注意事项？',
					'有机肥和化肥怎么搭配使用？'
				],
				statusBarHeight: 20,
				safeAreaBottom: 34,
				isIOS: false,
				typingInterval: 100, // 打字速度配置
				typingTimers: [] // 用于存储定时器
			}
		},
		// 设置页面标题
		onNavigationBarButtonTap(e) {
			console.log("导航栏按钮点击：", e);
		},
		created() {
			this.debouncedSubmitQuestion = this.debounce(this.submitQuestion, 300)
		},
		mounted() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 20;
			this.isIOS = systemInfo.platform === 'ios';
			this.safeAreaBottom = systemInfo.safeAreaInsets ? (systemInfo.safeAreaInsets.bottom || 0) : 0;

			// 初始化消息
			this.initMessages();

			// 滚动到底部
			this.$nextTick(() => {
				this.scrollToBottom();
			});
		},
		methods: {
			// 处理消息发送的方法
			makeStreamRequest(message) {
				if (this.requestTask) {
					this.requestTask.abort();
				}

				const url = api.dify + '/dify/chat/stream';

				// 添加一个临时的"正在输入"消息
				const typingMessageIndex = this.chatMessages.push({
					sender: 'ai',
					content: '',
					time: this.getCurrentTime(),
					isTyping: true
				}) - 1;

				this.currentTypingMessage = typingMessageIndex;

				this.requestTask = uni.request({
					url: url,
					method: 'POST',
					data: message,
					responseType: 'text',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data) {
							const lines = res.data.split('\n');
							this.processSSELines(lines, typingMessageIndex);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
						this.handleError(err);
						// 移除"正在输入"消息
						if (this.currentTypingMessage !== null) {
							this.chatMessages.splice(this.currentTypingMessage, 1);
						}
					},
					complete: () => {
						this.requestTask = null;
						this.isProcessing = false;
						this.scrollToBottom();
					}
				});
			},

			// 处理 SSE 数据行
			processSSELines(lines, typingMessageIndex) {
				let accumulatedText = this.chatMessages[typingMessageIndex]?.content || '';

				lines.forEach(line => {
					if (!line.trim()) return;

					if (line.startsWith('data:')) {
						try {
							const jsonData = JSON.parse(line.slice(5).trim());
							if (jsonData.eventType === 'AGENT_MESSAGE' && jsonData.answer) {
								accumulatedText += jsonData.answer;
								// 使用新的打字机效果更新消息内容
								this.typewriterEffect(accumulatedText, (text) => {
									this.$set(this.chatMessages[typingMessageIndex], 'content', text);
									// 滚动到底部，确保用户看到最新内容
									this.scrollToBottom();
								});
							} else if (jsonData.eventType === 'MESSAGE_END') {
								// 消息结束时停止打字效果
								this.currentTypingMessage = null;
								this.$set(this.chatMessages[typingMessageIndex], 'isTyping', false);
								// 确保完整内容显示
							}
						} catch (e) {
							console.error('解析数据出错:', e);
						}
					}
				});
			},

			// 实现打字机效果的方法
			typewriterEffect(text, callback) {
				let index = 0;
				const length = text.length;
				const interval = 50; // 打字间隔时间

				// 清除之前的打字机效果定时器
				this.typingTimers.forEach(timer => clearTimeout(timer));
				this.typingTimers = [];

				const type = () => {
					if (index <= length) {
						callback(text.slice(0, index));
						index++;
						const timer = setTimeout(type, interval);
						this.typingTimers.push(timer);
					}
				};

				type();
			},

			// 发送消息
			submitQuestion() {
				if (!storage.getHasLogin()) {
					// 使用 uni.showModal 显示登录提示框
					uni.showModal({
						title: '提示',
						content: '您还未登录，请先登录',
						confirmText: '去登录',
						cancelText: '取消',
						success: function(res) {
							if (res.confirm) {
								// 点击确定按钮，跳转到登录页面
								uni.navigateTo({
									url: '/pages/login/index'
								});
							}
						},
					});
					return;
				}
				if (!this.inputMessage.trim() || this.isProcessing) return;

				this.isProcessing = true;

				// 添加用户消息
				this.chatMessages.push({
					sender: 'user',
					content: this.inputMessage,
					time: this.getCurrentTime()
				});

				const message = {
					query: this.inputMessage,
					user: 'user_' + Date.now()
				};

				this.inputMessage = '';
				this.scrollToBottom();
				this.makeStreamRequest(message);
			},

			// 添加错误处理方法
			handleError(error) {
				let errorMessage = '发生错误'
				if (error.errMsg) {
					errorMessage = error.errMsg
				} else if (error.message) {
					errorMessage = error.message
				}

				uni.showToast({
					title: errorMessage,
					icon: 'none',
					duration: 2000
				})
			},

			// 添加防抖函数
			debounce(func, wait) {
				let timeout
				return (...args) => {
					clearTimeout(timeout)
					timeout = setTimeout(() => {
						func.apply(this, args)
					}, wait)
				}
			},
			onInputFocus() {
				// 输入框获取焦点时，确保滚动到底部
				this.$nextTick(() => {
					this.scrollToBottom();
				});
			},
			// 滚动到底部
			scrollToBottom() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.chat-list').boundingClientRect(data => {
						if (data) {
							this.scrollTop = data.height + 1000
						}
					}).exec()
				})
			},

			// 错误处理
			handleError(error) {
				let errorMessage = '发生错误'
				if (error.errMsg) {
					errorMessage = error.errMsg
				} else if (error.message) {
					errorMessage = error.message
				}

				uni.showToast({
					title: errorMessage,
					icon: 'none',
					duration: 2000
				})
			},
			onScroll(e) {
				// 可以添加滚动事件处理
			},
			getCurrentTime() {
				return this.getFormattedTime(new Date());
			},
			getFormattedTime(date) {
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				return `${hours}:${minutes}`;
			},
			/*    submitQuestion() {
			      if (!this.inputMessage.trim() || this.isProcessing) return;
			      
			      this.isProcessing = true;
			      
			      // 添加用户消息
			      this.chatMessages.push({
			        sender: 'user',
			        content: this.inputMessage,
			        time: this.getCurrentTime()
			      });
			      
			      const userQuestion = this.inputMessage;
			      this.inputMessage = '';
			      
			      // 滚动到底部
			      this.scrollToBottom();
			      
			      // 先添加一个"正在输入"的消息
			      this.chatMessages.push({
			        sender: 'ai',
			        content: '正在思考...',
			        time: this.getCurrentTime(),
			        isTyping: true
			      });
			      
			      // 模拟AI回复（实际项目中替换为API调用）
			      setTimeout(() => {
			        // 删除"正在输入"消息
			        this.chatMessages.pop();
			        
			        // 模拟回复
			        let aiResponse = "感谢您的提问！作为您的农技助理，我很高兴能帮助您解决农业相关问题。您询问的内容我已收到，我们团队正在研究适合的解决方案。";
			        
			        if (userQuestion.includes('水稻')) {
			          aiResponse = "水稻种植需要注意水肥管理和病虫害防治。目前南方地区水稻插秧时间已到，建议您选择抗病性强的品种，如'中优84'。插秧后7天开始浅水促根，分蘖期保持3-5cm水层。";
			        } else if (userQuestion.includes('蔬菜')) {
			          aiResponse = "夏季蔬菜种植需注意遮阳和水分管理。建议种植耐热品种如空心菜、苋菜、茄子等。可以采用遮阳网减少强光照射，早晚浇水避开高温时段。";
			        } else if (userQuestion.includes('果树')) {
			          aiResponse = "果树现在应注意夏季修剪和病虫害防治。柑橘类果树可以进行夏季修剪，去除徒长枝和内膛枝。同时注意柑橘黄龙病和炭疽病的预防，建议定期喷施药剂保护。";
			        }
			        
			        this.chatMessages.push({
			          sender: 'ai',
			          content: aiResponse,
			          time: this.getCurrentTime()
			        });
			        
			        this.scrollToBottom();
			        this.isProcessing = false;
			      }, 2000);
			    }, */
			useQuestion(question) {
				this.inputMessage = question;
			},
			containsKeywords(text) {
				const keywords = ['水稻', '小麦', '玉米', '病虫害', '农药', '化肥', '有机肥', '种植技术'];
				return keywords.some(keyword => text.includes(keyword));
			},
			formatMessage(text) {
				// 将文本中的换行符转换为<br>标签
				return text.replace(/\n/g, '<br>');
			},
			initMessages() {
				// 确保消息有时间戳
				this.chatMessages.forEach(msg => {
					if (!msg.timestamp) {
						msg.timestamp = new Date().getTime();
					}
				});

				// 按时间排序
				this.chatMessages.sort((a, b) => a.timestamp - b.timestamp);
			},
			showDateSeparator(index) {
				// 判断是否需要显示日期分割线
				if (index === 0) return true;

				const currentMsg = this.chatMessages[index];
				const prevMsg = this.chatMessages[index - 1];

				// 如果两条消息相隔超过30分钟，或者是不同日期，显示日期分割线
				return this.isDifferentDay(currentMsg.timestamp, prevMsg.timestamp) ||
					(currentMsg.timestamp - prevMsg.timestamp > 30 * 60 * 1000);
			},
			isDifferentDay(timestamp1, timestamp2) {
				const date1 = new Date(timestamp1);
				const date2 = new Date(timestamp2);

				return date1.getDate() !== date2.getDate() ||
					date1.getMonth() !== date2.getMonth() ||
					date1.getFullYear() !== date2.getFullYear();
			},
			formatDateSeparator(timestamp) {
				const now = new Date();
				const msgDate = new Date(timestamp);

				// 今天
				if (this.isSameDay(msgDate, now)) {
					return '今天 ' + this.getFormattedTime(msgDate);
				}

				// 昨天
				const yesterday = new Date(now);
				yesterday.setDate(now.getDate() - 1);
				if (this.isSameDay(msgDate, yesterday)) {
					return '昨天 ' + this.getFormattedTime(msgDate);
				}

				// 一周内
				const oneWeekAgo = new Date(now);
				oneWeekAgo.setDate(now.getDate() - 7);
				if (msgDate >= oneWeekAgo) {
					const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
					return weekdays[msgDate.getDay()] + ' ' + this.getFormattedTime(msgDate);
				}

				// 其他日期
				return msgDate.getFullYear() + '年' + (msgDate.getMonth() + 1) + '月' + msgDate.getDate() + '日 ' +
					this
					.getFormattedTime(msgDate);
			},
			isSameDay(date1, date2) {
				return date1.getDate() === date2.getDate() &&
					date1.getMonth() === date2.getMonth() &&
					date1.getFullYear() === date2.getFullYear();
			}
		},
		// 组件销毁时清理资源
		beforeDestroy() {
			// 清理所有打字机效果的定时器
			this.typingTimers.forEach(timer => clearTimeout(timer));
			// 清理请求
			if (this.requestTask) {
				this.requestTask.abort();
				this.requestTask = null;
			}
		}
	}
</script>

<style>
	/* 容器样式 */
	.container {
		position: relative;
		min-height: 100vh;
		background-color: #f5f5f5;
		overflow: hidden;
		/* 防止内容溢出 */
	}

	/* 聊天容器 */
	.chat-container {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #f8f8f8;
		background-image: url('/static/images/chat-bg-pattern.png');
		background-size: 300rpx;
		background-blend-mode: overlay;
		background-opacity: 0.05;
		-webkit-overflow-scrolling: touch;
		/* 增强iOS滚动体验 */
	}

	.chat-list {
		padding-bottom: 30rpx;
	}

	/* 消息项 */
	.message-item {
		display: flex;
		margin-bottom: 30rpx;
		position: relative;
	}

	.message-ai {
		justify-content: flex-start;
	}

	.message-user {
		justify-content: flex-end;
	}

	/* 头像 */
	.avatar-container {
		width: 90rpx;
		height: 90rpx;
		flex-shrink: 0;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: #e0e0e0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		object-fit: cover;
	}

	/* 消息内容 */
	.message-content {
		max-width: 70%;
		margin: 0 20rpx;
		display: flex;
		flex-direction: column;
	}

	.user-content {
		align-items: flex-end;
	}

	.message-bubble {
		padding: 24rpx;
		border-radius: 24rpx;
		position: relative;
		margin-bottom: 10rpx;
		word-wrap: break-word;
		min-width: 80rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		max-width: 100%;
	}

	.ai-bubble {
		background-color: #e8f5e9;
		border-top-left-radius: 4rpx;
	}

	.user-bubble {
		background-color: #e3f2fd;
		border-top-right-radius: 4rpx;
	}

	.message-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		word-break: break-all;
	}

	.message-time {
		font-size: 22rpx;
		color: #999;
	}

	/* 输入区域 */
	.input-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		z-index: 10;
	}

	.input-wrapper {
		display: flex;
		align-items: flex-end;
	}

	.message-input {
		flex: 1;
		min-height: 70rpx;
		max-height: 120rpx;
		border-radius: 35rpx;
		background-color: #f5f5f5;
		padding: 15rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		border: 1rpx solid #e0e0e0;
		line-height: 1.4;
	}

	.send-button {
		margin-left: 16rpx;
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		background-color: transparent;
		background-image: none;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
		position: relative;
		align-self: center;
	}

	.send-button.disabled {
		background-color: transparent;
		background-image: none;
		opacity: 1;
	}

	.button-hover {
		transform: scale(0.95);
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.95);
		}

		100% {
			transform: scale(1);
		}
	}

	.send-button:active:not(.disabled) {
		animation: pulse 0.3s ease-in-out;
	}

	/* 删除或注释掉之前的样式 */
	.send-icon {
		display: none;
	}

	.send-icon:before {
		display: none;
	}

	.send-icon-text {
		display: none;
	}

	/* 推荐问题区域 */
	.suggested-questions {
		display: flex;
		white-space: nowrap;
		margin-bottom: 15rpx;
		padding: 5rpx 0;
	}

	.question-chip {
		display: inline-block;
		padding: 12rpx 20rpx;
		margin-right: 15rpx;
		background-color: #e8f5e9;
		color: #4CAF50;
		font-size: 24rpx;
		border-radius: 30rpx;
		border: 1rpx solid #a5d6a7;
	}

	/* AI正在输入的样式 */
	.message-bubble.ai-bubble.typing {
		background-color: #f0f0f0;
	}

	.typing-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
		padding: 0 20rpx;
	}

	.typing-dot {
		width: 10rpx;
		height: 10rpx;
		margin: 0 5rpx;
		background-color: #4CAF50;
		border-radius: 50%;
		opacity: 0.5;
		animation: typingAnimation 1.4s infinite both;
	}

	.typing-dot:nth-child(2) {
		animation-delay: 0.2s;
	}

	.typing-dot:nth-child(3) {
		animation-delay: 0.4s;
	}

	@keyframes typingAnimation {
		0% {
			opacity: 0.3;
			transform: translateY(0);
		}

		50% {
			opacity: 1;
			transform: translateY(-5rpx);
		}

		100% {
			opacity: 0.3;
			transform: translateY(0);
		}
	}

	/* 关键词高亮 */
	.message-text.highlight {
		color: #2E7D32;
		font-weight: 500;
	}

	/* 欢迎消息特殊样式 */
	.welcome {
		background-color: #e3f2fd !important;
		border-left: none !important;
		border-radius: 24rpx !important;
	}

	/* 日期分割线样式 */
	.date-separator {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
	}

	.date-separator text {
		background-color: rgba(0, 0, 0, 0.1);
		color: #666;
		font-size: 24rpx;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
	}

	/* 纸飞机图标 */
	.plane-svg {
		display: none;
	}

	.send-icon-image {
		width: 76rpx;
		height: 76rpx;
	}

	.material-icon {
		font-family: 'Material Icons';
		font-weight: normal;
		font-style: normal;
		font-size: 48rpx;
		line-height: 1;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-smoothing: antialiased;
		color: white;
	}

	/* 删除不需要的导航栏样式 */
	.custom-navbar {
		display: none;
	}

	.navbar-bg,
	.navbar-content,
	.navbar-left,
	.navbar-title,
	.navbar-right,
	.back-icon,
	.arrow-left {
		display: none;
	}
</style>