SD_AI_APP/pages/chat/chat.vue

<template>
	<view class="chat-container">
		<!-- 消息列表 -->
		<!-- :style="{ height: messageListHeight + 'px' }" -->
		<scroll-view scroll-y class="message-list">
			<block v-for="(item, index) in messages" :key="index">
				<view :class="['message-item', item.sender === 'user' ? 'user-message' : 'ai-message']">
					<image class="avatar" :src="item.avatar"></image>
					<view class="message-content">
						{{ item.content }}
						<view v-if="item.sender === 'ai'" class="ai-hint">
							<text class="quote-icon">▌▌引用来源：{{ item.source }}</text>
							<view class="ai-actions">
								<text class="ai-text">回答由AI生成</text>
								<view class="icon-group">
									<img src="/static/voice.svg" class="button-icon" />
									<img src="/static/good.svg" class="button-icon" />
									<img src="/static/tread.svg" class="button-icon" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>

		<!-- 输入框和发送按钮 -->
		<view class="input-container">
			<input type="text" v-model="inputMessage" placeholder="输入消息..." @confirm="sendMessage"
				confirm-type="send" />
			<img src="/static/send.png" class="btn-icon" @click="sendMessage" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputMessage: '',
				messages: [],
				messageListHeight: 0 // 动态计算消息列表高度
			};
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			// 修改这里：计算消息列表高度时减去输入框的高度（假设输入框高度为60px）
			this.messageListHeight = systemInfo.windowHeight - 60;
			this.initConversation();
		},
		methods: {
			initConversation() {
				// 初始化对话，添加第一条AI消息
				this.messages.push({
					sender: 'ai',
					avatar: '/static/AI.png',
					content: '你好！我是你的 AI 助手，有什么我可以帮你的吗？',
					isAI: true // 标记为 AI 回复
				});
			},
			sendMessage() {
				if (this.inputMessage.trim() === '') return;

				// 添加用户消息
				this.messages.push({
					sender: 'user',
					avatar: '/static/yonghu.png',
					content: this.inputMessage
				});

				// 清空输入框
				this.inputMessage = '';

				// 模拟AI回复
				setTimeout(() => {
					this.messages.push({
						sender: 'ai',
						avatar: '/static/AI.png',
						content: '根据最新数据显示，消费市场正在逐步恢复，线上零售增长显著。特别是在数字化服务、智能设备和健康产品领域，消费需求持续上升。建议关注这些领域的投资机会。',
						source: '123123123'
					});
				}, 1000);
			},

			handleVoiceClick() {
				// 实现语音功能的逻辑
			},
			handleThumbUpClick() {
				// 实现点赞功能的逻辑
			},
			handleThumbDownClick() {
				// 实现踩功能的逻辑
			}
		}
	};
</script>

<style scoped>
	.chat-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.message-list {
		height: 90vh;
		flex: 1;
		padding: 10px;
		background-color: #f5f5f5;
	}

	.message-item {
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		/* height: 95vh; */
	}

	.user-message {
		flex-direction: row-reverse;
		/* 反转子元素的排列顺序 */
		margin-right: 20px;
	}

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

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-left: 10px;
		/* 调整头像与消息内容的间距 */
	}

	.message-content {
		max-width: 70%;
		padding: 10px;
		border-radius: 10px;
		background-color: #fff;
		margin-left: 10px;
	}

	.user-message .message-content {
		background-color: #007aff;
		color: #fff;
		margin-left: 10px;
		/* 添加左侧间距 */
	}

	.input-container {
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: #fff;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		position: fixed;
		width: 95%;
		height: 40px;
		bottom: 0;
		left: 0;
		z-index: 10;
		padding-top: 10px;
	}

	input {
		flex: 1;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 20px;
		margin-right: 10px;
	}

	button {
		padding: 0 20px;
		border: none;
		border-radius: 5px;
		background-color: #007aff;
		color: #fff;
	}

	.btn-icon {
		width: 20px;
		height: 20px;
	}

	/* AI 提示语样式 */
	.ai-hint {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.source-quote {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
		display: flex;
		align-items: center;
	}

	.quote-icon {
		font-weight: bold;
		margin-right: 5px;
		background: #f5f5f5;
		border-radius: 5px;
	}

	.ai-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 文字靠左，图标靠右 */
		margin-top: 5px;
	}

	.ai-text {
		font-size: 12px;
		color: #999;
		margin-right: 10px;
		/* 文字和图标之间留点空隙 */
	}

	.button-icon {
		width: 15px;
		height: 15px;
		margin-left: 8px;
		/* 图标之间的小间距 */
		cursor: pointer;
	}

	.icon-group {
		display: flex;
		align-items: center;
	}
</style>