完成AI辅导员的聊天页面修改

pages/aiChat/simple_chat.vue

@@ -94,6 +94,16 @@
 				{{ sending ? '发送中...' : '发送' }}
 			</button>
 		</view>
+
+		<!-- 图片预览弹窗 -->
+		<view v-if="showImagePreview" class="image-preview-overlay" @click="closeImagePreview">
+			<view class="image-preview-container" @click.stop>
+				<image :src="previewImageUrl" class="preview-image" mode="aspectFit" />
+				<view class="close-button" @click="closeImagePreview">
+					<text class="close-icon">×</text>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -113,6 +123,11 @@ const md = new MarkdownIt({
 // DOMPurify安全配置
 DOMPurify.addHook('afterSanitizeAttributes', node => {
 	if (node.tagName === 'A') node.setAttribute('rel', 'noopener noreferrer');
+	if (node.tagName === 'IMG') {
+		node.setAttribute('style', 'max-width: 100%; height: auto; cursor: pointer;');
+		node.setAttribute('class', 'markdown-image');
+		node.setAttribute('data-preview', 'true');
+	}
 });
 
 export default {
@@ -146,7 +161,11 @@ export default {
 					earliestMessageId: null,
 
 					// 引用信息展示控制
-					showSingleReference: {}
+					showSingleReference: {},
+
+					// 图片预览相关
+					showImagePreview: false,
+					previewImageUrl: ''
 			};
 	},
 
@@ -175,7 +194,43 @@ export default {
 		}
 	},
 
+	mounted() {
+		// 添加图片点击事件监听
+		this.$nextTick(() => {
+			this.addImageClickListeners();
+		});
+	},
+
+	updated() {
+		// 每次更新后重新添加图片点击事件监听
+		this.$nextTick(() => {
+			this.addImageClickListeners();
+		});
+	},
+
 	methods: {
+		/**
+		 * 添加图片点击事件监听
+		 */
+		addImageClickListeners() {
+			const images = document.querySelectorAll('.markdown-image[data-preview="true"]');
+			images.forEach(img => {
+				// 移除之前的事件监听器（如果有的话）
+				img.removeEventListener('click', this.handleImageClick);
+				// 添加新的事件监听器
+				img.addEventListener('click', this.handleImageClick);
+			});
+		},
+
+		/**
+		 * 处理图片点击事件
+		 */
+		handleImageClick(event) {
+			const imageUrl = event.target.src;
+			if (imageUrl) {
+				this.openImagePreview(imageUrl);
+			}
+		},
 		/**
 		 * 初始化聊天 - 获取历史记录
 		 */
@@ -637,6 +692,22 @@ export default {
 			this.$set(this.showSingleReference[msgIdx], refIdx, !current);
 		},
 
+		/**
+		 * 打开图片预览
+		 */
+		openImagePreview(imageUrl) {
+			this.previewImageUrl = imageUrl;
+			this.showImagePreview = true;
+		},
+
+		/**
+		 * 关闭图片预览
+		 */
+		closeImagePreview() {
+			this.showImagePreview = false;
+			this.previewImageUrl = '';
+		},
+
 		/**
 		 * 显示提示
 		 */
@@ -647,6 +718,12 @@ export default {
 };
 </script>
 
+<style>
+	.markdown-content img{
+		max-width: 100% !important;
+	}
+</style>
+
 <style scoped>
 /* 整体容器 */
 .chat-container {
@@ -944,4 +1021,62 @@ export default {
 .markdown-content li {
 	margin: 2px 0;
 }
+
+/* 图片预览样式 */
+.image-preview-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.8);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 9999;
+}
+
+.image-preview-container {
+	position: relative;
+	max-width: 90%;
+	max-height: 90%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.preview-image {
+	max-width: 100%;
+	max-height: 100%;
+	border-radius: 8px;
+}
+
+.close-button {
+	position: absolute;
+	top: -40px;
+	right: 0;
+	width: 40px;
+	height: 40px;
+	background-color: rgba(255, 255, 255, 0.8);
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+}
+
+.close-icon {
+	font-size: 24px;
+	color: #333;
+	font-weight: bold;
+}
+
+/* 图片悬停效果 */
+.markdown-image {
+	transition: opacity 0.2s ease;
+}
+
+.markdown-image:hover {
+	opacity: 0.8;
+}
 </style>