Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

src/stores/index.ts

@@ -9,3 +9,4 @@ export * from './global'
 export * from './userInfo'
 export * from './projectData'
 export * from './agent'
+export * from './versionTree'

src/stores/versionTree.ts

@@ -3,11 +3,25 @@ import { ref, computed } from 'vue'
 export const useVersionTreeStore = defineStore('versionTree', () => {
 	const state = ref({
 		nodeDetail: {
-
+			createTime:'',
+			userEndChat:{
+				content:'',
+				createTime:'',
+				image_url:'',
+			},
+			generateEndChat:{
+				content:'',
+				createTime:'',
+				image_url:'',
+			},
 		},// 节点详情
 	})
 
-	const setNodeDetail = (v: any) => { state.value.nodeDetail = v }
+	const setNodeDetail = (v: any) => { 
+		for(let key in v){
+			state.value.nodeDetail[key] = v[key]
+		}
+	 }
 
 	return {
 		state,

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

@@ -10,6 +10,7 @@
 		<div class="agent-body flex-1 flex flex-col">
 			<List ref="listRef" :message-list="messageList" @regenerate="handleRegenerate" />
 			<Input
+				ref="inputRef"
 				is-agent-mode
 				:generating="isGenerating"
 				@send="handleSendMessage"
@@ -20,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, reactive, computed, onUnmounted, onMounted, nextTick,watch } from 'vue'
+	import { ref, reactive, computed, onUnmounted, onMounted, nextTick, watch } from 'vue'
 	import List from './List.vue'
 	import Input from '../../components/Input.vue'
 	import { fetchAgentReply } from '@/api/agent'
@@ -45,6 +46,7 @@
 	const messageList = ref([])
 
 	const listRef = ref()
+	const inputRef = ref()
 	const isGenerating = ref(false)
 	const isPaused = ref(false) // 标记是否为主动暂停
 	const params = reactive<AgentParamsType>({
@@ -62,11 +64,15 @@
 	})
 
 	const sketchList = ref([])
-watch(sketchList, (newVal) => {
-		console.log('添加图片链接--------');
+	watch(
+		sketchList,
+		(newVal) => {
+			console.log('添加图片链接--------')
 
 			emits('update:sketchList', newVal)
-	}, { deep: true })
+		},
+		{ deep: true }
+	)
 
 	// 每次请求时创建新的 AbortController
 	let abort: AbortController
@@ -255,7 +261,7 @@ watch(sketchList, (newVal) => {
 
 						try {
 							const jsonData = JSON.parse(jsonText)
-							console.log('jsonData', jsonData);
+							console.log('jsonData', jsonData)
 
 							// 赋值 project_id 和 version_id
 							// if (jsonData.project_id) params.projectID = jsonData.project_id
@@ -354,6 +360,10 @@ watch(sketchList, (newVal) => {
 			true
 		)
 	}
+
+	defineExpose({
+		inputRef
+	})
 </script>
 
 <style lang="less" scoped>

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

@@ -167,7 +167,7 @@
 					border-radius: 50%;
 				}
 			}
-      .message-context{
+			.message-context {
 				line-height: 2rem;
 				font-size: 1.4rem;
 			}
@@ -215,3 +215,11 @@
 		}
 	}
 </style>
+
+<style lang="less">
+	.message-txt {
+		ul {
+			list-style-position: inside;
+		}
+	}
+</style>

src/views/home/agent/components/versionTree/detail/chatDetail.vue

@@ -10,6 +10,14 @@ const props = defineProps({
 		type: String,
 		default: 'user'
 	},
+	chatDetail: {
+		type: Object,
+		default: () => ({
+			content:'',
+			creatTime:'',
+			image_url:'',
+		})
+	},
 })
 //const emit = defineEmits([
 //])
@@ -30,12 +38,13 @@ const {} = toRefs(data);
 				<span>{{ type == 'user'? $t('VersionTree.input'): $t('VersionTree.sketch') }}</span>
 			</div>
 			<div class="time">
-				<span>12:00:00</span>
+				<span>{{ new Date(chatDetail.createTime * 1000).toLocaleString() }}</span>
 			</div>
 		</div>
 		<div class="infoTitle">{{ type == 'user'? $t('VersionTree.userRequest'): $t('VersionTree.generateResult') }}</div>
 		<div class="history">
-		  	Design a modern yellow sofa that combines comfort, elegance, and contemporary aesthetics.
 The sofa features a warm, soft yellow tone (mustard or light ochre), with a minimalist silhouette and clean lines.
 Upholstered in high-quality fabric with a subtle texture, offering a cozy and inviting feel.
 The seat is deep and plush, with generous cushioning for relaxation, while the backrest and armrests are softly rounded to enhance comfort.
+			<span>{{ chatDetail.content }}</span>
+			<img v-if="chatDetail.image_url" :src="chatDetail.image_url" alt="">
 		</div>
 	</div>
 </template>
@@ -90,6 +99,16 @@ const {} = toRefs(data);
 			flex: 1;
 			overflow-y: auto;
 			margin-left: 3rem;
+			> span{
+
+			}
+			> img{
+				width: 100%;
+				height: auto;
+				margin-top: 1.2rem;
+				border-radius: 1.3rem;
+				border: 1px solid #C9C9C9;
+			}
 			&::-webkit-scrollbar {
 				width: 4px;
 			}

src/views/home/agent/components/versionTree/detail/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, watch } from "vue";
+import { ref, onMounted, onUnmounted, computed, watch } from "vue";
 import VersionDetail from './versionDetail.vue'
 import ChatDetail from './chatDetail.vue'
-import { useProjectStore } from '@/stores'
+import { useProjectStore, useVersionTreeStore } from '@/stores'
 import { getChatNodeDetail, getNodeAncestors } from '@/api/versitonTree'
 
 //const props = defineProps({
@@ -11,35 +11,57 @@ const emit = defineEmits([
 ])
 
 const projectStore = useProjectStore()
+const versiontreeStore = useVersionTreeStore()
 
 const detailData = ref({
-	id:1,
-	versionDetail:{
-		version:'1.0.0',
-		versionTime:'2023-08-01 10:00:00',
-		versionSketch:'Version 1 - Sketch',
-		versionSketchTime:'2023-08-01 10:00:00',
-	},
-	userChatDetail:{
-
-	}
+	chatEndDetail:computed(()=>{
+		return versiontreeStore.state.nodeDetail
+	}),
+	loading:false,
 })
 
 watch(()=>projectStore.state.nodeId, (newVal, oldVal) => {
-	console.log(newVal)
 	if(newVal){
+		detailData.value.loading = true
+
 		getChatNodeDetail({
 			projectId: projectStore.state.id,
 			id: newVal
-		}).then(res => {
-			console.log(res)
+		}).then((res:any) => {
+			let userEndChat = {
+				content:'',
+				createTime:'',
+				image_url:'',
+			}
+			let generateEndChat = {
+				content:'',
+				createTime:'',
+				image_url:'',
+			}
+			res.dialogue.forEach(item => {
+				if(item.role == 'user'){
+					if(item.content){
+						userEndChat.content += item.content
+						userEndChat.createTime = item.createTime
+					}
+				}else if(item.role == "assistant"){
+					if(item.content){
+						generateEndChat.content += item.content
+						generateEndChat.createTime = item.createTime
+						if(item.image_url)generateEndChat.image_url = item.image_url
+					}
+				}
 			})
-		getNodeAncestors({
-			projectId: projectStore.state.id,
-			id: newVal
-		}).then(res => {
-			console.log(res)
+			versiontreeStore.setNodeDetail({createTime:res.createTime,userEndChat,generateEndChat})
+			detailData.value.loading = false
 		})
+
+		// getNodeAncestors({
+		// 	projectId: projectStore.state.id,
+		// 	id: newVal
+		// }).then(res => {
+		// 	console.log(res)
+		// })
 	}
 },{ immediate: true })
 onMounted(()=>{
@@ -53,15 +75,16 @@ defineExpose({})
 	<div class="detailBox">
 		<div class="versionDetail">
 			<VersionDetail 
-				:versionDetail="detailData.versionDetail"
+				:versionDetail="detailData.chatEndDetail"
 			></VersionDetail>
 		</div>
 		<div class="useInput">
-			<ChatDetail type="user"></ChatDetail>
+			<ChatDetail type="user" :chatDetail="detailData.chatEndDetail.userEndChat"></ChatDetail>
 		</div>
 		<div class="systemInput">
-			<ChatDetail type="robot"></ChatDetail>
+			<ChatDetail type="robot" :chatDetail="detailData.chatEndDetail.generateEndChat"></ChatDetail>
 		</div>
+		<div class="loading" v-if="detailData.loading" v-loading="true"></div>
 	</div>
 </template>
 <style lang="less" scoped>
@@ -71,7 +94,15 @@ defineExpose({})
 		position: relative;
 		display: flex;
 		flex-direction: column;
-		> div{
+		> .loading{
+			position: absolute;
+			z-index: 999999999;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+		> .versionDetail,> .useInput,> .systemInput{
 			border-radius: var(--border-radius, 1rem);
 			border: 1px solid #D9D9D9;
 			background-color: #f7f7f7;

src/views/home/agent/components/versionTree/detail/versionDetail.vue

@@ -5,7 +5,12 @@ const { t: $t } = useI18n()
 const props = defineProps({
 	versionDetail: {
 		type: Object,
-		default: () => ({})
+		default: () => ({
+			version:'1.0.0',
+			createTime:'',
+			versionSketch:'Version 1 - Sketch',
+			versionSketchTime:'2023-08-01 10:00:00',
+		})
 	}
 })
 const emit = defineEmits([
@@ -29,10 +34,10 @@ const {} = toRefs(data);
 				{{ $t('VersionTree.versionInformation') }}
 			</span>
 		</div>
-		<div class="version">{{versionDetail.version}}</div>
-		<div class="time marBott1">{{versionDetail.versionTime}}</div>
-		<div class="version gray">{{versionDetail.versionSketch}}</div>
-		<div class="time gray">{{versionDetail.versionSketchTime}}</div>
+		<div class="version">{{versionDetail.version || '1.0.0'}}</div>
+		<div class="time marBott1">{{ new Date(versionDetail.createTime * 1000).toLocaleString() }}</div>
+		<div class="version gray">{{versionDetail.versionSketch || 'Version 1 - Sketch'}}</div>
+		<div class="time gray">{{versionDetail.versionSketchTime || '2023-08-01 10:00:00'}}</div>
 	</div>
 </template>
 <style lang="less" scoped>

src/views/home/agent/components/versionTree/index.vue

@@ -19,8 +19,9 @@ const props = defineProps({
 	}
 })
 
-//const emit = defineEmits([
-//])
+const emit = defineEmits([
+	'restore'
+])
 
 const versionsList = ref([])
 
@@ -47,7 +48,7 @@ const setVersionsList = (res)=>{
 	function traverseArray(items,father, callback) {
 		for (let i = 0; i < items.length; i++) {
 			const item = items[i]
-			if(!item.url)continue
+			// if(!item?.url)continue
 			callback(item, i,father)
 			if (item.children && Array.isArray(item.children) && item.children.length > 0) {
 				traverseArray(item.children, item, callback)
@@ -70,7 +71,8 @@ const openTree = (state)=>{
 	treeState.value = state
 }
 
-const versionRestore = ()=>{
+const versionRestore = () => {
+	
 	let id = ''
 	if(selectItem.value?.children?.length > 0){
 		function findMaxForYourFormat(items) {
@@ -99,6 +101,7 @@ const versionRestore = ()=>{
 	findAndAddChild(versionsList.value, selectItem.value?.versionId, addObj)
 	selectItem.value = {...addObj}
 	treeKey.value++
+	emit('restore')
 }
 const versionDelete = (versionDetail)=>{
 	if(!selectItem.value?.versionId)return

src/views/home/agent/components/versionTree/tree/index.vue

@@ -73,7 +73,7 @@ const initialize = ()=>{
 const setSelectItem = (item)=>{
 	if(!item.versionId)return
 	console.log(item)
-	// projectStore.setProject({latestNodeId: item.id})
+	projectStore.setProject({nodeId: item.id})
 	emit('update:selectItem', {...item})
 }
 

src/views/home/agent/components/versionTree/tree/view2/index.vue

@@ -198,7 +198,10 @@ defineExpose({push})
 				overflow: hidden;
 				&.active{
 					// background-color: var(--treeItem-active-background);
-					border: 2px solid #000;
+					border: 2px solid #d9d9d9;
+					.mask{
+						display: none;
+					}
 				}
 				&.start{
 					background-color: #7A7A7A;

src/views/home/agent/components/versionTree/tree/view2/secondaryNode.vue

@@ -25,7 +25,8 @@ const props = defineProps<{
 		<!-- <div>{{ props.data.id }}</div> -->
 		<div class="item">
 			<!-- {{ props.data.url }} -->
-			<img :src="props.data.url" />
+			<img :src="props.data?.url" />
+			<div class="mask"></div>
 		</div>
 	</div>
 </template>
@@ -35,11 +36,20 @@ const props = defineProps<{
 	.item{
 		width: 100%;
 		height: 100%;
+		position: relative;
 		img{
 			width: 100%;
 			height: 100%;
 			object-fit: contain;
 		}
 	}
+	.mask{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.3);
+	}
 }
 </style>

src/views/home/agent/index.vue

@@ -4,12 +4,16 @@
 			<div class="btn" @click="versionTreeData.drawer = true">Version Tree</div>
 		</div>
 		<div class="content-wrapper">
-			<Agent :title="agentTitle" @update:sketchList="updateSketchList" />
+			<Agent ref="agentRef" :title="agentTitle" @update:sketchList="updateSketchList" />
 			<div class="preview-wrapper">
 				<Preview :type="previewType" :sketchList="sketchList" />
 			</div>
 		</div>
-		<VersionTreeIndex ref="VersionTreeIndexRef" v-model:versionTreeData="versionTreeData" />
+		<VersionTreeIndex
+			ref="VersionTreeIndexRef"
+			v-model:versionTreeData="versionTreeData"
+			@restore="handleRestore"
+		/>
 	</div>
 </template>
 
@@ -21,12 +25,11 @@
 	import { useProjectStore } from '@/stores'
 	import { getProjectInfo } from '@/api/agent'
 
-
 	const agentTitle = ref('Retro Sofa Sketch')
 	const previewType = ref<'sketch' | 'report'>('sketch')
 
 	const VersionTreeIndexRef = ref()
-
+	const agentRef = ref()
 	const sketchList = ref([])
 	const updateSketchList = (newVal) => {
 		console.log('newVal', newVal)
@@ -35,21 +38,30 @@
 	}
 
 	const versionTreeData = ref({
-		drawer: false,
+		drawer: false
 	})
 
+	const handleRestore = () => {
+		console.log('-----------', agentRef.value.inputRef.addReportTag)
+
+		agentRef.value?.inputRef?.addReportTag('Restore')
+	}
+
 	const projectStore = useProjectStore()
-	watch(()=>projectStore.state.id, (newVal, oldVal) => {
-		if(newVal){
-			getProjectInfo({ id: newVal }).then(res => {
+	watch(
+		() => projectStore.state.id,
+		(newVal, oldVal) => {
+			if (newVal) {
+				getProjectInfo({ id: newVal }).then((res) => {
 					projectStore.setProject(res.project)
 				})
 			}
-	})
+		}
+	)
 
-	onMounted(()=>{
-		if(projectStore.state.id){
-			getProjectInfo({ id: projectStore.state.id }).then(res => {
+	onMounted(() => {
+		if (projectStore.state.id) {
+			getProjectInfo({ id: projectStore.state.id }).then((res) => {
 				projectStore.setProject(res.project)
 			})
 		}

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')
+		const imgClose = document.createElement('img')
+		const textSpan = document.createElement('span')
+		imgClose.className = 'close-icon'
+		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
-
-		const textSpan = document.createElement('span')
-		textSpan.innerText = t('Input.trendingReport')
-
-		const imgClose = document.createElement('img')
-		imgClose.className = 'close-icon'
 			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()
+			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>

src/views/home/components/style.ts

@@ -25,35 +25,15 @@ function slugify(str) {
  * @returns { string | null }  返回可直接用于 <img :src=""> 的 URL
  */
 export function getStyleImage(types, style) {
-  
 	if (!types) types = 'Sofa'
 	const type = types.toLowerCase()
 	const map = imagesMaps[type]
 
 	const fileName = `${slugify(style)}.png`
 	const key = `/src/assets/images/${type}/${fileName}`
-  console.log('types',types, 'style',style, 'fileName',fileName, 'key',key);
 
 	if (map[key]) {
 		return map[key].default
 	}
 	return ''
 }
-
-const styleList = [
-	'Venetian Modern',
-	'Coastal',
-	'Maximalism',
-	'Memphis',
-	'Verdant',
-	'Century Chrome',
-	'Modern Revival',
-	'Transitional',
-	"Tuscan 2000's",
-	'Kitsch-core',
-	'Bauhaus',
-	'Constructivism',
-	'Nordic Noir',
-	'Dopamine',
-	'Squiggle'
-]