feat: 图片上传

src/views/home/agent/components/Agent.vue

@@ -113,11 +113,11 @@
 	const handleSendMessage = async (
 		message: {
 			text: string
-			images: Array<{ url: string; name: string }>
+			images: Array<{ url: string; name: string }>,
+			tempImages: any[]
 		},
 		skipUserMessage = false
 	) => {
-		// console.log('Message sent:', message)
 		isPaused.value = false
 		isGenerating.value = true
 		params.message = message.text
@@ -128,7 +128,8 @@
 			messageList.value.push({
 				id: messageList.value.length + 1,
 				text: message.text,
-				isUser: true
+				isUser: true,
+				imageUrls:message.tempImages
 			})
 		}
 

src/views/home/agent/components/Item.vue

@@ -8,6 +8,14 @@
 				class="message-context"
 				v-show="!content.loading && !content.thinking && !content.streaming"
 			>
+				<div class="img-list flex">
+					<img
+						v-for="(item, index) in imageList"
+						:key="'img-' + index"
+						:src="item"
+						class="img-item"
+					/>
+				</div>
 				<div class="message-txt markdown-body">
 					<div v-html="formatMessage"></div>
 				</div>
@@ -51,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, onMounted, computed } from 'vue'
+	import { ref, onMounted, computed, watch } from 'vue'
 	import { useI18n } from 'vue-i18n'
 	import gsap from 'gsap'
 	import userThumb from '@/assets/images/user-thumb.jpg'
@@ -66,18 +74,22 @@
 		content: Object
 	}>()
 
+	const imageList = computed(() => {
+		const { imageUrls } = props.content
+		const list = []
+		if (!imageUrls || imageUrls.length === 0) return list
+		imageUrls.forEach((item) => {
+			if (typeof item === 'string') {
+				list.push(item)
+			} else if (typeof item === 'object' && item.url) {
+				list.push(item.url)
+			}
+		})
+		return list
+	})
+
 	const formatMessage = computed(() => {
-		// MARKDOWN.renderer.rules.link_open = (tokens, idx, options, env, self) => {
-		// 	const aIndex = tokens[idx].attrIndex('target')
-		// 	if (aIndex < 0) {
-		// 		tokens[idx].attrPush(['target', '_blank'])
-		// 	} else {
-		// 		tokens[idx].attrs[aIndex][1] = '_blank'
-		// 	}
-		// 	return self.renderToken(tokens, idx, options, env, self)
-		// }
 		const str = md.render(props.content.text)
-		// console.log('str',str)
 		return str
 	})
 
@@ -180,6 +192,16 @@
 			}
 		}
 	}
+	.img-list {
+		column-gap: 1rem;
+		margin-bottom: 1.4rem;
+		.img-item {
+			width: 6.8rem;
+			height: 6.8rem;
+			border: 0.1rem solid #cdcdcd;
+			border-radius: 1.5rem;
+		}
+	}
 
 	.generating {
 		font-family: 'GeneralBold';

src/views/home/agent/index.vue

@@ -37,7 +37,6 @@
 	const agentRef = ref()
 	const sketchList = ref([])
 	const updateSketchList = (newVal) => {
-		console.log('newVal', newVal)
 		sketchList.value = newVal
 		// VersionTreeIndexRef.value.getVersionTree()
 	}

src/views/home/components/Input.vue

@@ -230,23 +230,24 @@
 				if (file.type.startsWith('image/')) {
 					const formData = new FormData()
 					formData.append('file', file)
-					uploadImage(formData).then((res) => {
-						console.log(res)
 
-						const reader = new FileReader()
+					uploadImage(formData).then((res) => {
-						reader.onload = (e) => {
+					const reader = new FileReader()
-							uploadedImages.value.push({
+					reader.onload = (e) => {
-								url: e.target?.result as string,
+						uploadedImages.value.push({
-								name: file.name,
+							url: e.target?.result as string,
-								path: res
+							name: file.name,
-							})
+							path: res
-						}
+						})
-						reader.readAsDataURL(file)
+					}
+					reader.readAsDataURL(file)
 					})
 				}
 			})
 		}
-		// 清空input的value，允许重复选择同一文件
+		nextTick(() => {
+			editorRef.value?.focus()
+		})
 		input.value = ''
 	}
 
@@ -481,9 +482,14 @@
 		if (!inputValue.value.trim()) return
 		const imageUrlList = uploadedImages.value.map((item) => item.path)
 
-		const payload = { text: inputValue.value.trim(), images: imageUrlList }
+		const payload = {
+			text: inputValue.value.trim(),
+			images: imageUrlList,
+			tempImages: uploadedImages.value
+		}
 		emits('send', payload)
-
+		// 发送后清空图片列表
+		uploadedImages.value = []
 		// 发送后清空输入框
 		if (editorRef.value) {
 			editorRef.value.innerHTML = ''
@@ -572,12 +578,14 @@
 		// 保存初始数据到 store
 		agentStore.setInitialProjectData({
 			text: inputValue.value.trim(),
-			images: uploadedImages.value,
+			images: uploadedImages.value.map((item) => item.path),
+			tempImages: uploadedImages.value,
 			...params
 		})
 
 		// console.log('Create project with:', params)
 		router.push(`/home/agent/${projectres}`, { query: params })
+		uploadedImages.value = []
 	}
 
 	// 暴露方法给父组件
@@ -793,6 +801,7 @@
 				max-height: initial;
 				padding: 0;
 				height: 100%;
+				min-height: 5rem;
 			}
 		}
 		.operate {