feat: 回车检测&restore添加标签

src/views/home/components/Input.vue

@@ -22,7 +22,7 @@
 				:placeholder="$t('Input.placeholder')"
 				@input="handleEditorInput"
 				@paste="handleEditorPaste"
-				@keypress="handleKeyPress"
+				@keydown="handleKeyDown"
 			></div>
 		</div>
 		<div class="operate flex align-center space-between">
@@ -184,6 +184,8 @@
 	import { useAgentStore, useProjectStore } from '@/stores'
 	import lightIcon from '@/assets/images/light-icon.png'
 	import closeIcon from '@/assets/images/close-icon.png'
+	import restoreIcon from '@/assets/images/restore.png'
+	import restoreCloseIcon from '@/assets/images/tag-close.png'
 	import { createProject } from '@/api/agent'
 	import { getStyleImage } from './style'
 	// import Tag from './Tag.vue'
@@ -265,22 +267,35 @@
 	const inputValue = ref<string>('')
 
 	const reportTags = ref([])
-	const addReportTag = () => {
+	// 导出给父组件调用的方法
+	const addReportTag = (text?: string) => {
+		// 使用传入的文本，如果没有传入则使用默认的翻译文本
+		const tagText = text || t('Input.trendingReport')
+
 		// create container matching static structure: <div class="editor-tag report-btn flex-center" contenteditable="false">...
 		const tag = document.createElement('div')
-		tag.className = 'editor-tag report-btn flex-center'
 		tag.contentEditable = 'false'
-
 		const imgLeft = document.createElement('img')
-		imgLeft.className = 'light-icon'
-		imgLeft.src = lightIcon as unknown as string
-
-		const textSpan = document.createElement('span')
-		textSpan.innerText = t('Input.trendingReport')
-
 		const imgClose = document.createElement('img')
+		const textSpan = document.createElement('span')
 		imgClose.className = 'close-icon'
-		imgClose.src = closeIcon as unknown as string
+		if (text) {
+			tag.className = 'editor-tag restore flex-center'
+			imgLeft.className = 'restore-icon'
+			imgLeft.src = restoreIcon as unknown as string
+			imgClose.src = restoreCloseIcon as unknown as string
+			imgClose.className = 'close-icon restore'
+			textSpan.className = 'restore-text'
+		} else {
+			tag.className = 'editor-tag report-btn flex-center'
+			imgLeft.className = 'light-icon'
+			imgLeft.src = lightIcon as unknown as string
+			imgClose.src = closeIcon as unknown as string
+		}
+
+		
+		textSpan.innerText = tagText
+
 		imgClose.addEventListener('click', (ev) => {
 			ev.stopPropagation()
 			// remove tag when close clicked
@@ -398,11 +413,17 @@
 		}
 	}
 
-	const handleKeyPress = (e) => {
+	const handleKeyDown = (e) => {
 		// 检测回车
 		if (e.key === 'Enter') {
+			console.log('11111111111')
+
 			e.preventDefault()
-			handleSendAgent()
+			if (props.isAgentMode) {
+				handleSendAgent()
+			} else {
+				handleCreateProject()
+			}
 			return
 		}
 		if (e.key === 'Backspace') {
@@ -446,12 +467,20 @@
 	}
 
 	const handleSendAgent = async () => {
+		console.log('发送信息--------')
+
 		if (props.generating) {
 			emits('pause')
 			return
 		}
 		if (!inputValue.value.trim()) return
-		emits('send', { text: inputValue.value.trim(), images: uploadedImages.value })
+		console.log('222222')
+
+		const payload = { text: inputValue.value.trim(), images: uploadedImages.value }
+		console.log('准备发送 send 事件', payload)
+		emits('send', payload)
+		console.log('send 事件已发送')
+
 		// 发送后清空输入框
 		if (editorRef.value) {
 			editorRef.value.innerHTML = ''
@@ -534,7 +563,7 @@
 			temperature: 0.7
 		}
 		const projectres = await createProject(params)
-		console.log('projectres', projectres)
+		// console.log('projectres', projectres)
 		projectStore.setId(projectres)
 		// 保存初始数据到 store
 		agentStore.setInitialProjectData({
@@ -543,9 +572,14 @@
 			...params
 		})
 
-		console.log('Create project with:', params)
+		// console.log('Create project with:', params)
 		router.push('/home/agent', { query: params })
 	}
+
+	// 暴露方法给父组件
+	defineExpose({
+		addReportTag
+	})
 </script>
 
 <style lang="less" scoped>
@@ -983,9 +1017,32 @@
 		margin: 0 0.5rem;
 		vertical-align: middle;
 		border-radius: 2.2rem;
+		&.restore {
+			width: auto;
+			max-width: 100%;
+			display: inline-flex;
+			border: none;
+			border-radius: 0.4rem;
+			background-color: rgba(0, 0, 0, 0.05);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 0.9rem 0 0.7rem;
+			box-sizing: border-box;
+		}
 
 		span {
 			margin: 0 0.7rem 0 1.2rem;
+			&.restore-text {
+				flex: 1;
+				min-width: 0;
+				max-width: 52rem;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 		}
 
 		.light-icon {
@@ -999,6 +1056,15 @@
 			height: 1rem;
 			cursor: pointer;
 			flex-shrink: 0;
+			&.restore{
+				width: 0.5rem;
+				height: 0.5rem;
+			}
 		}
+		.restore-icon{
+			width: 1.2rem;
+			height: 1.2rem;
+		}
+		
 	}
 </style>