MoeNovaClient/pages/makedetail/intelligentLifeChart.vue

<template>
	<view class="dialog-generation">
		<view class="subject-matter-ofText" :style="{ paddingBottom: keyboardHeight + 'px' }">
			<!-- 顶部导航栏 -->
			<div class="navbar">
				<view class="navbar-left">
					<image @click="goBack()" class="back" src="../../static/vip/hy_icon_jiantou.png"></image>
					<view class="elf-name">精灵·小萌</view>
					<image class="deepseek" src="../../static/makedetail/deepseek-logo.png"></image>
				</view>
				<view class="navbar-right">
					<image @click="switchToNormal()" class="primary" src="../../static/makedetail/primary.png"></image>
					<image @click="newChar()" class="createChat" src="../../static/makedetail/createChat.png"></image>
				</view>
			</div>

			<!-- <view class="navbar-reserveASeat"> </view>  -->
			<!-- 聊天内容区 -->
			<scroll-view class="chat-content" :scroll-into-view="toView" scroll-y
				:style="{ height: `calc(100% - ${370 + textareaHeight}rpx)` }" @scroll="onChatScroll">
				<template v-if="messages && messages.length > 0">
					<!-- <scroll-view class="chat-content" scroll-y> -->
					<view v-for="(msg, idx) in messages" :key="idx" :class="['chat-bubble', msg.role]">
						<template v-if="msg.role === 'user'">
							{{ msg.content }}
						</template>
						<template v-else-if="msg.role === 'ai'">
							<view class="ai-bubble-row">
								<view class="ai-avatar">
									<image src="../../static/makedetail/characterProfilePicture.png" mode="aspectFill">
									</image>
								</view>
								<view class="ai-bubble-content" v-if="!msg.isStartGenerating">
									<template v-if="idx === lastAiIndex && isLoading">
										<text>{{ displayText }}</text>
										<text v-if="isLoading" class="loading-dot">...</text>
									</template>
									<template v-else>
										<text>{{ msg.content }}</text>
									</template>
								</view>
								<view v-else class="ai-bubble-content">
									<text>OK!~小萌正在根据你的描述生成形象中</text><br>
									<div v-if="msg.isStartGenerating && msg.startGeneratingId == 0" class="btn-box">
										点击查看
										({{ countdown }}) s</div>
									<div v-else
										@click="goPage(`/pages/makedetail/makeImgDetail?id=${msg.startGeneratingId}`)"
										class="btn-box"> 点击查看
									</div>
								</view>
							</view>
						</template>
					</view>
					<view id="bottom-anchor"></view>
					<view v-if="error" class="chat-bubble ai error">{{ error }}</view>

					<image v-if="showToBottomBtn && keyboardHeight === 0" class="to-bottom-btn" @click="scrollToBottom"
						src="../../static/makedetail/toBottomBtn.png"></image>
				</template>
				<template v-else>
					<view class="chat-content-empty">
						<image src="../../static/makedetail/characterProfilePicture.png" mode="aspectFill"></image>
						<view class="chat-content-empty-title">嗨！我是创梦精灵</view>
						<view class="chat-content-empty-desc">与我聊聊你想要生成的角色吧！</view>
					</view>
				</template>
				<view style="width: 100%;height: 200rpx;"></view>
			</scroll-view>
			<!-- <view class="bom-reserveASeat"></view> -->

			<view class="bom-box" :style="{ bottom: 0 + 'px', height: `${190 + textareaHeight}rpx` }">
				<view class="bom-box-bg">
					<c-lottie ref="cLottieRef" :src='"/static/lottie/xiaomeng.json"' class="icon-img" height="108rpx"
						width="112rpx" :loop="true" :autoPlay="false"></c-lottie>

				</view>
				<!-- 底部输入区 -->
				<view class="input-bar">
					<!-- <image class="icon-img" src="../../static/makedetail/characterProfilePicture.png" mode="aspectFill">
					</image> -->


					<textarea :autoHeight="true" class="input-box" :adjust-position="false" v-model="question"
						:disabled="isLoading" placeholder="给我发送消息吧..." maxlength="400" @input="onTextareaInput"
						confirm-type="search" @confirm="onSend" rows="1"
						style="overflow-y:auto;max-height:176rpx;min-height:44rpx;" />
					<!-- <button class="send-btn" :disabled="isLoading || !question.trim()" @click="onSend">{{ isLoading ?
						'生成中...' :
						'发送' }}</button> -->
					<image v-if="isLoading" class="stop" src="../../static/makedetail/stop.png" mode=""
						@click="stopStreamAnswer" />
					<image v-else-if="!isLoading && !question.trim() && keyboardHeight === 0" class="keyboard"
						src="../../static/makedetail/keyboard.png" mode="" />

					<image v-else-if="!isLoading && question.trim() && keyboardHeight !== 0" class="send"
						src="../../static/makedetail/send.png" mode="" @click="onSend" />
				</view>
				<!-- 底部提示 -->
				<view class="footer-tip">内容由AI生成，禁用相关功能请联系管理员。</view>
			</view>
		</view>

		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>
<script>
	import websocket from '@/common/websocket.js';

	export default {
		data() {
			return {
				question: '',
				answer: '',
				displayText: '',
				isComplete: false,
				isLoading: false,
				error: null,
				retryCount: 0,
				maxRetries: 3,
				timer: null,
				lastResponseTime: 0,
				timeout: 30000,
				typingSpeed: 50,
				messages: [],
				lastAiIndex: -1,
				keyboardHeight: 0,
				statusBarHeight: 0,
				windowBottom: 0,
				toView: '',
				showToBottomBtn: false,
				textareaHeight: 0,
				isConnected: false,
				isStartGenerating: false,
				countdown: 0,
			};
		},
		methods: {
			scrollToBottom() {
				this.toView = '';
				this.$nextTick(() => {
					this.toView = 'bottom-anchor';
				});
			},
			async initWebSocket() {
				if (this.isConnected) return;

				try {
					await websocket.connect('wss://e.zhichao.art/Gapi/Work/streamAnswer', {
						uuid: getApp().globalData.uuid
					});

					this.isConnected = true;

					// 设置消息处理回调
					websocket.onMessage((data) => {
						console.log("data:", data);
						if (this.isLoading) {
							if (data.includes('[DONE]')) {
								this.completeAnswer();
							} else if (data == 'PING' || data == 'PONG') {
								// 心跳消息   忽略
							} else if (data.includes('ID:')) {
								// 提取ID
								const aiMsg = this.messages[this.lastAiIndex];
								if (aiMsg) {
									aiMsg.startGeneratingId = data.split(':')[1];
								}
							} else if (data.includes('OKOKOK')) {
								const aiMsg = this.messages[this.lastAiIndex];
								if (aiMsg) {
									aiMsg.isStartGenerating = true;
								}
								this.isStartGenerating = true;
								this.countdownFun(20);
							} else {
								const aiMsg = this.messages[this.lastAiIndex];
								if (aiMsg) {
									aiMsg.isStartGenerating = false;
									this.displayText += data;
									this.answer += data;
									aiMsg.content += data;
									this.retryCount = 0;
									this.lastResponseTime = Date.now();
									this.scrollToBottom();
								}
							}
						}
					});

					// 设置错误处理回调
					websocket.onError((error) => {
						console.error('WebSocket错误:', error);
						this.isConnected = false;
						this.handleError(error);
					});

					// 设置关闭处理回调
					websocket.onClose(() => {
						console.log('WebSocket已关闭');
						this.isConnected = false;
						this.isLoading = false;
					});

				} catch (error) {
					console.error('WebSocket初始化失败:', error);
					this.isConnected = false;
					this.handleError(error);
				}
			},
			async startStreamAnswer(content) {
				if (!content.trim()) {
					uni.showToast({
						title: '请输入问题',
						icon: 'none'
					});
					return;
				}

				// 检查连接状态，如果断开则重连
				if (!this.isConnected) {
					try {
						await this.initWebSocket();
					} catch (error) {
						console.error('重连失败:', error);
						uni.showToast({
							title: '连接已断开，请重试',
							icon: 'none'
						});
						return;
					}
				}

				this.resetState();
				this.messages.push({
					role: 'user',
					content
				});

				try {
					this.isLoading = true;
					let aiMsg = {
						role: 'ai',
						content: '',
						isStartGenerating: false,
						startGeneratingId: 0
					};
					this.messages.push(aiMsg);
					this.lastAiIndex = this.messages.length - 1;

					// 发送消息
					websocket.send(content);

				} catch (error) {
					console.error('发送消息失败:', error);
					this.handleError(error);
				}
			},
			onSend() {
				if (!this.question.trim() || this.isLoading) return;
				this.startStreamAnswer(this.question);
				this.question = '';
			},
			resetState() {
				this.answer = '';
				this.displayText = '';
				this.isComplete = false;
				this.error = null;
				this.retryCount = 0;
				this.lastResponseTime = Date.now();
			},
			handleError(error) {
				if (this.retryCount < this.maxRetries) {
					this.retryCount++;
					this.retryRequest();
				} else {
					this.error = '请求失败，请稍后重试';
					this.isLoading = false;
					uni.showToast({
						title: this.error,
						icon: 'none'
					});
				}
			},
			retryRequest() {
				uni.showToast({
					title: `正在重试 (${this.retryCount}/${this.maxRetries})`,
					icon: 'none'
				});
				setTimeout(() => {
					this.startStreamAnswer(this.question);
				}, 1000 * this.retryCount);
			},
			completeAnswer() {
				this.isComplete = true;
				this.isLoading = false;
			},
			stopStreamAnswer() {
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
				}
				this.isLoading = false;
			},
			checkTimeout() {
				if (Date.now() - this.lastResponseTime > this.timeout) {
					this.handleError(new Error('请求超时'));
				}
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			onChatScroll(e) {
				const threshold = 600; // 离底部100px以内不显示按钮
				const {
					scrollHeight,
					scrollTop
				} = e.detail;
				const clientHeight = e.detail.clientHeight || e.detail.height || 0;
				if (scrollHeight - scrollTop - clientHeight > threshold) {
					this.showToBottomBtn = true;
				} else {
					this.showToBottomBtn = false;
				}
			},
			onTextareaInput(e) {
				console.log(e.detail);

				// 获取textarea的实际高度
				const query = uni.createSelectorQuery().in(this);
				query.select('.input-box').boundingClientRect(data => {
					if (data) {
						// 将px转换为rpx (假设设计稿是750rpx宽度)
						const height = (data.height * 750) / uni.getSystemInfoSync().windowWidth;
						// 减去基础高度90rpx，得到额外增加的高度
						this.textareaHeight = Math.max(0, height - 90);
						// 滚动到底部
						this.scrollToBottom();
					}
				}).exec();
			},
			retrieveHistoricalRecords() {
				uni.request({
					url: this.$apiHost + '/Work/streamAnswerLast',
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'sign': getApp().globalData.headerSign
					},
					data: {
						uuid: getApp().globalData.uuid,
						task_type: 2
					},
					success: (res) => {
						console.log("获取历史记录：", res.data.list);
						if (res.data.success === "yes" && res.data.list) {
							this.messages = res.data.list
							if (res && res.data && res.data.list && res.data.list.length > 0) {
								this.showToBottomBtn = true
							}
						} else {
							this.messages = []
						}
					},
					fail: (err) => {
						console.log('获取历史记录失败', err);
						uni.showToast({
							title: '获取历史记录失败',
							icon: 'none'
						});
					}
				})
			},
			// 重新计算元素高度
			recalculateHeights() {
				// 重新计算textarea高度
				const query = uni.createSelectorQuery().in(this);
				query.select('.input-box').boundingClientRect(data => {
					if (data) {
						const height = (data.height * 750) / uni.getSystemInfoSync().windowWidth;
						this.textareaHeight = Math.max(0, height - 90);
					}
				}).exec();
			},
			countdownFun(n) {
				if (this.timer) {
					clearInterval(this.timer);
				}
				this.countdown = n;
				// 倒计时
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.timer);
					}
				}, 1000);
			},
			goPage(page) {
				uni.navigateTo({
					url: page,
				});
			},
			newChar() {
				this.$refs["DialogBox"]
					.confirm({
						title: "是否创建新对话",
						content: "立即结束当前对话内容，开启新的对话?",
						DialogType: "inquiry",
						btn1: "取消",
						btn2: "确定",
						animation: 0,
					})
					.then(() => {
						websocket.send('clear');
						this.retrieveHistoricalRecords()
					});

			},
			switchToNormal() {
				this.$refs["DialogBox"]
					.confirm({
						title: "是否切回常规模式",
						content: "切换至普通常规模式进行创作?",
						DialogType: "inquiry",
						btn1: "取消",
						btn2: "确定",
						animation: 0,
					})
					.then(() => {
						this.goPage('/pages/makedetail/makeImgDetail')
					});

			}
		},
		async created() {
			await this.initWebSocket();
			this.retrieveHistoricalRecords();
			this.timer = setInterval(() => {
				if (this.isLoading) {
					this.checkTimeout();
				}
			}, 1000);

			uni.onKeyboardHeightChange(res => {
				this.keyboardHeight = res.height;
				if (res.height === 0) {
					this.$refs.cLottieRef.call('stop')
				} else {
					this.$refs.cLottieRef.call('play')

				}
				this.$nextTick(() => {
					this.recalculateHeights();
					this.scrollToBottom();
				});
			});

			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			this.windowBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
		},

		beforeDestroy() {
			websocket.close();
			this.stopStreamAnswer();
		}
	}
</script>

<style lang="scss">
	@import './intelligentLifeChart.scss';

	.to-bottom-btn {
		position: fixed;
		right: 50%;
		transform: translateX(50%);
		bottom: 20rpx;
		width: 60rpx;
		height: 60rpx;
		bottom: 220rpx;
		z-index: 999;
		opacity: .75;
		transition: opacity 0.2s;
	}

	.ai-bubble-row {
		display: flex;
		align-items: flex-start;
	}

	.ai-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		border: solid 2rpx rgba(238, 238, 238, .3);
		display: flex;
		align-items: flex-end;
		justify-content: center;

		image {
			width: 52rpx;
			height: 52rpx;
		}
	}

	.ai-bubble-content {
		flex: 1;
	}
</style>tyle>