Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front

2026-03-23 16:43:09 +08:00
parent eccc00dc53 ab47d944ee
commit e0305551fa
20 changed files with 268 additions and 128 deletions
--- a/src/assets/icons/arrowDown.svg
+++ b/src/assets/icons/arrowDown.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.167367 0.183059C0.390523 -0.0610191 0.752332 -0.0610197 0.975489 0.183058L4.00001 3.49112L7.02451 0.183059C7.24767 -0.0610191 7.60948 -0.0610197 7.83263 0.183058C8.05579 0.427135 8.05579 0.822863 7.83263 1.06694L4.40407 4.81694C4.29691 4.93415 4.15156 5 4.00001 5C3.84846 5 3.70311 4.93415 3.59595 4.81694L0.167368 1.06694C-0.0557889 0.822865 -0.0557895 0.427137 0.167367 0.183059Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/checked.svg
+++ b/src/assets/icons/checked.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6ZM8.4453 3.55932C8.1743 3.36861 7.80002 3.43371 7.60932 3.7047L5.19026 7.14232L4.19396 6.0464C3.97106 5.8012 3.59159 5.78313 3.3464 6.00604C3.1012 6.22894 3.08313 6.60841 3.30604 6.8536L4.80604 8.5036C4.92853 8.63835 5.1056 8.71017 5.28736 8.69884C5.46911 8.6875 5.63588 8.59423 5.74068 8.4453L8.59068 4.3953C8.78139 4.1243 8.71629 3.75002 8.4453 3.55932Z" fill="currentColor"/>
+</svg>
--- a/src/assets/images/sketch-card.png
+++ b/src/assets/images/sketch-card.png
--- a/src/components/Canvas/FlowCanvas/components/node-el.vue
+++ b/src/components/Canvas/FlowCanvas/components/node-el.vue
@@ -11,15 +11,12 @@
 		<div class="item" @mousedown="(e) => stateManager.setActiveNodeID(node.id)">
 			<slot></slot>
 		</div>
-		<div class="add" @mousedown.stop v-if="isAdd" @click="onAdd">
-			<svg-icon name="add" size="14" size-unit="px" />
-		</div>
 		<div class="mask" v-show="mask"></div>
 	</div>
 </template>
 <script lang="ts" setup>
 	import { Handle, Position } from '@vue-flow/core'
-	import { NODE_DATATYPE, NODE_DATATIER, NODE_TYPE } from '../tools/index.d'
+	import { NODE_DATATYPE, NODE_TYPE } from '../tools/index.d'
 	import { computed, ref, inject } from 'vue'
 	const handles = ref({
 		[NODE_TYPE.INPUT]: [{ id: 'Right', type: 'source', position: Position.Right }],
@@ -48,38 +45,6 @@
 			default: false
 		}
 	})
-	const stateManager = inject('stateManager') as any
-	const nodes = computed(() => props.stateManager.nodes.value)
-	const isSubord = computed(() => nodes.value.some((v) => v.data.superiorID === props.node.id))
-	const tier = computed(() => Number(props.node?.data?.tier || 0))
-	//只有3d模型才有三级菜单,目前三级菜单内容少直接禁用按钮
-	const isAdd3d = computed(() => (tier.value === 2 && props.node?.data?.superiorNodeType === NODE_DATATYPE.TO_3D_MODEL) || tier.value != 2)
-	const isReturned = computed(() => {
-		return (
-			props.node.data.type == NODE_DATATYPE.RESULT_IMAGE &&
-			props.node.data.data.imageProcessTasks[0].status == 'RETURNED'
-		)
-	})
-	const isAdd = computed(
-		() =>
-			!isSubord.value &&
-			NODE_DATATYPE.RESULT_IMAGE === props.node.data.type &&
-			!(tier.value === NODE_DATATIER.TO_3VIEW) &&
-			isReturned.value && 
-			isAdd3d.value
-	)
-	const onAdd = () => {
-		const tier_ = tier.value + 1
-		// 从data中获取originalImage
-		let nodeData = props.node?.data?.data.imageProcessTasks.filter(
-			(v) => v.taskId === props.node?.data?.data.selectTaskId
-		)
-		const originalImage = nodeData[0]?.url
-		if (!originalImage) console.log('originalImage 找不到原始图片')
-		props.stateManager.nodeManager.createCardsSelect({
-			data: { tier: tier_, superiorID: props.node.id, originalImage }
-		})
-	}
 	const posCenter = computed(() => {
 		const arr = [NODE_DATATYPE.RESULT_IMAGE]
 		return arr.includes(props.node?.data?.type)
@@ -105,25 +70,6 @@
 		> .item {
 			position: relative;
 		}
-		> .add {
-			position: absolute;
-			width: 32px;
-			height: 32px;
-			border: 2px solid #fff;
-			top: var(--top);
-			right: -16px;
-			transform: translateY(-50%);
-			background-color: #ed8936;
-			border-radius: 50%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			color: #fff;
-			font-size: 25px;
-			box-shadow: 0 8px 20px 0 #71809633;
-			cursor: pointer;
-			z-index: 20;
-		}
 		&.center {
 			--top: 50%;
 		}
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue
@@ -69,28 +69,31 @@
 	const onClickItem = (v) => {
 		const id = props.node.id
 		if (!id) return
-		stateManager.deleteNode(id)
-		console.log(props.node)
+		const superiorID = props.node.data.superiorID
 		if(v.secondaryMenu){
 			nodeManager.createCardsSelect({
 				data: { 
 					tier: props.node.data?.tier, 
-					superiorID: props.node.data?.superiorID, 
+					superiorID, 
+					isActive: props.node.data?.isActive,
 					originalImage: props.node.data?.originalImage,
-					secondaryMenu: v.secondaryMenu
+					secondaryMenu: v.secondaryMenu,
+					createIndexPosition: props.node.data.createIndexPosition,
 				}
 			})
 		}else{
-			const superiorID = props.node.data.superiorID
 			nodeManager.createCardNode({
 				data: {
 					tier: v.tier,
 					type: v.type,
 					superiorID,
+					isActive: props.node.data?.isActive,
+					createIndexPosition: props.node.data.createIndexPosition,
 					originalImage: props.node.data?.originalImage,
 				}
 			})
 		}
+		stateManager.deleteNode(id)
 	}

 	defineExpose({})
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
@@ -143,7 +143,6 @@
 	
 	const onGenerateClick = async () => {
 		const data = componentRef.value?.getApiData?.() || {}
-		const subordNode = stateManager.getSubordNodeById(attrs.node.id)
 		const subordNodes = stateManager.getSubordNodes(attrs.node.id)
 		emit('update-data', componentRef.value?.data)
 		if(!attrs.node?.data?.originalImage)console.log('originalImage 找不到原始图片')
@@ -160,7 +159,7 @@
 		// if (!subordNode) {
 		
 		//如果是添加印花的结果就作为一级节点可以再次选择添加印花或者生成真实图
-		let tier = NODE_DATATIER.Fast_MODE == currentComponent.value.tier?0:currentComponent.value.tier
+		let tier = (NODE_DATATIER.Fast_MODE == currentComponent.value.tier && currentComponent.value.type == NODE_DATATYPE.Fast_MODE)?0:currentComponent.value.tier
 		taskList.forEach((item,index) => {
 			nodeManager.createResultNode({
 				data: {
--- a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
@@ -4,10 +4,10 @@
 		<div class="result-image" 
 			v-for="(item, i) in data.imageProcessTasks" 
 			:key="item.taskId" 
-			:class="{'active': config.isActive}"
+			:class="{'active': node.id == stateManager.activeNodeID.value}"
 			@click="setSelectTaskId(item.taskId)"
 		>
-			<div class="header" v-if="item.status == 'RETURNED'" v-show="showHeader && config.isActive" @mousedown.stop>
+			<div class="header" v-if="item.status == 'RETURNED'" v-show="showHeader && node.id == stateManager.activeNodeID.value" @mousedown.stop>
 				<span class="icon">
 					<svg-icon name="chat-compose" size="20" size-unit="px" />
 				</span>
@@ -53,6 +53,9 @@
 				</div>
 			</div>
 		</div>
+		<div class="add" @mousedown.stop v-if="isAdd" @click="onAdd">
+			<svg-icon name="add" size="14" size-unit="px" />
+		</div>
 	 </div>
 </template>

@@ -61,7 +64,7 @@
 	import { downloadImage } from '../../../tools/tools'
 	import { reactive, ref, onBeforeUnmount, useAttrs, inject, watch, computed, onMounted } from 'vue'
 	import HighlightAdmin from '@/components/highlightAdmin.vue'
-	import { NODE_DATATYPE } from '../../tools/index.d'
+	import { NODE_DATATIER, NODE_DATATYPE } from '../../tools/index.d'
 	const openImagePreview = inject('openImagePreview') as (url: string) => void
 	const openThreeModelPreview = inject('openThreeModelPreview') as (url: string) => void
 	const props = defineProps({
@@ -86,7 +89,8 @@
 		'update-data'
 	])
 	// const attrs = useAttrs()
-	const showHeader = ref(!!props.node?.data?.isHeader)
+	const showHeader = ref(true)
+	// const showHeader = ref(!!props.node?.data?.isHeader)
 	const showMenu = ref(false)
 	const clickTaskId = ref('')
 	const generateManager = inject('generateManager') as any
@@ -228,6 +232,45 @@
 		eventManager.removeEvents()
 		myEvent.emit('openDepthCanvas', data)
 	}
+
+	const isSubord = computed(() => props.node.id == stateManager.activeNodeID.value)
+	const tier = computed(() => Number(props.node?.data?.tier || 0))
+	//只有3d模型才有三级菜单,目前三级菜单内容少直接禁用按钮
+	const isAdd3d = computed(() => (tier.value === 2 && props.node?.data?.superiorNodeType === NODE_DATATYPE.TO_3D_MODEL) || props.node?.data?.superiorNodeType !== NODE_DATATYPE.TO_3D_MODEL)
+	const isReturned = computed(() => {
+		return (
+			props.node.data.type == NODE_DATATYPE.RESULT_IMAGE &&
+			props.node.data.data.imageProcessTasks[0].status == 'RETURNED'
+		)
+	})
+	const isAdd = computed(
+		() =>
+			NODE_DATATYPE.RESULT_IMAGE === props.node.data.type &&
+			!(tier.value === NODE_DATATIER.TO_3VIEW) &&
+			isReturned.value && 
+			isAdd3d.value && 
+			isSubord.value
+	)
+	const onAdd = () => {
+		const tier_ = tier.value + 1
+		// 从data中获取originalImage
+		let nodeData = props.node?.data?.data.imageProcessTasks.filter(
+			(v) => v.taskId === props.node?.data?.data.selectTaskId
+		)
+		const subordNodes = stateManager.getSubordNodes(props.node.id)
+		const originalImage = nodeData[0]?.url
+		if (!originalImage) console.log('originalImage 找不到原始图片')
+		stateManager.nodeManager.createCardsSelect({
+			data: { 
+				tier: tier_, 
+				superiorID: props.node.id, 
+				originalImage, 
+				createIndexPosition: subordNodes.length + 1,
+				isActive: subordNodes.length == 0
+			}
+		})
+		stateManager.setActiveNodeID('')
+	}
 	document.addEventListener('mousedown', hideMenu)
 	onBeforeUnmount(() => {
 		document.removeEventListener('mousedown', hideMenu)
@@ -249,6 +292,25 @@
 			gap: 8px;
 		}
 	}
+	.add {
+		position: absolute;
+		width: 32px;
+		height: 32px;
+		border: 2px solid #fff;
+		top: var(--top);
+		right: -16px;
+		transform: translateY(-50%);
+		background-color: #ed8936;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+		font-size: 25px;
+		box-shadow: 0 8px 20px 0 #71809633;
+		cursor: pointer;
+		z-index: 20;
+	}
 	.result-image {
 		width: 244px;
 		border-radius: 16px;
--- a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
@@ -45,24 +45,27 @@ export class NodeManager {
 	/** 创建节点 */
 	createNode(options: NodeOptions) {
 		const superiorID = options?.data?.superiorID
-		const snode = superiorID ? this.stateManager.flowManager.getNodeById(superiorID) : this.stateManager.flowManager.getLastNode();
 		//获取上级节点所生成的最后一个node，设置位置为最后一个节点的xy 加上 节点间距
 		const superiorGenerateNodes = this.stateManager.getSubordNodes(superiorID)
+		const currentNode = superiorGenerateNodes.find((node) => {
+			return node.data.createIndexPosition === options?.data?.createIndexPosition
+		})
 		const endGenerateNode = superiorGenerateNodes.reduce((max, current) => {
 			return current.data.createIndexPosition > max.data.createIndexPosition ? current : max
 		}, superiorGenerateNodes[0])
+		const snode = superiorID ? this.stateManager.flowManager.getNodeById(superiorID) : this.stateManager.flowManager.getLastNode();
 		const id = options.id || createId()
 		const positionX = options.positionX || 0
 		const positionY = options.positionY || 0
 		const position = options.position ||
 			(
-				endGenerateNode?
+				currentNode ?
+				currentNode.position :
+				endGenerateNode ?
 				{
 					x: endGenerateNode.position.x + positionX,
 					y: endGenerateNode.position.y + positionY + this.ranksep + 200
 				} :
-				!snode ?
-				{ x: positionX, y: positionY } :
 				{
 					x: snode.position.x + snode.dimensions.width + this.nodesep + positionX,
 					y: snode.position.y + positionY
@@ -103,6 +106,7 @@ export class NodeManager {
 			data: {
 				tier: NODE_DATATIER.CARDS_SELECT,
 				type: NODE_DATATYPE.CARDS_SELECT,
+				createIndexPosition: options?.data?.createIndexPosition || 1,
 				...(options?.data || {}),
 			},
 		}
@@ -113,7 +117,7 @@ export class NodeManager {
 		const options_ = {
 			...(options ? options : {}),
 			component: NODE_COMPONENT.CARD,
-			data: {
+				data: {
 				...(options?.data || {}),
 			}
 		}
--- a/src/components/Canvas/FlowCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
@@ -101,7 +101,7 @@ export class StateManager {
 						source: source,
 						target: target,
 						selectable: false,
-						visible: (node.data.type !== NODE_DATATYPE.RESULT_IMAGE || node.data.isActive),
+						visible: (node.data.isActive),
 						type: 'default'
 					})
 				}
@@ -223,8 +223,7 @@ export class StateManager {
 	/** 显示指定子节点和父节点连接线，隐藏父节点和其他子节点链接线， */
 	showNodeConnections(id: string) {
 		const node = this.getNodeById(id)
-		if(node.data.component != NODE_DATATYPE.RESULT_IMAGE && node.data.superiorID) return
-		let edges_ = JSON.parse(JSON.stringify(this.edges.value))
+		if(!node.data.superiorID) return
 		this.nodes.value.forEach((nodeItem) => {
 			if(node.data.superiorID === nodeItem.data.superiorID && nodeItem.id == id) {
 				nodeItem.data.isActive = true
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -15,7 +15,8 @@ import { computed } from "vue";
 const props = defineProps({
  name: {
    type: String,
-    required: true,
+    default: "",
+    // required: true,
  },
  color: {
    type: String,
@@ -30,7 +31,7 @@ const props = defineProps({
    default: 'rem',
  }
 });
-const iconName = computed(() => `#icon-${props.name}`);
+const iconName = computed(() => `#icon-${props?.name}`);
 const svgClass = computed(() => {
  if (props.name) return `svg-icon icon-${props.name}`;
  return "svg-icon";
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -154,6 +154,7 @@ export default {
 		Download: 'Download',
 		deleteSuccess: 'Successfully deleted',
 		thinking: 'Thinking...',
+		thinkComplete: 'Thinking complete.',
 	},

 	// Version Tree
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -148,7 +148,8 @@ export default {
 			'复制失败。您的浏览器可能限制了剪贴板访问,请允许浏览器访问剪贴板或尝试手动复制。',
 		Download: '下载',
 		deleteSuccess: '删除成功',
-		thinking:'已思考'
+		thinking:'已思考',
+		thinkComplete: '思考完成。'
 	},

 	// Version Tree
--- a/src/views/home/agent/components/Agent.vue
+++ b/src/views/home/agent/components/Agent.vue
@@ -156,7 +156,6 @@
 			loading: true,
 			thinking: false,
 			thinkingText: '',
-			thinkingCollapsed: false,
 			streaming: true
 		})
 		messageList.value.push(aiMessage)
@@ -309,7 +308,7 @@
 						// }

 						if (eventName === 'tool') {
-							MyEvent.emit('loading-sketch')
+							MyEvent.emit('loading-sketch', sketchList.value.length)
 						}

 						if (dataLines.length === 0) continue
@@ -330,7 +329,10 @@
 								sketchList.value.push({
 									[Object.keys(jsonData)[0]]: jsonData[Object.keys(jsonData)[0]]
 								})
+								// 通知 Preview 有新 sketch 正在加载，传入 sketch 索引
+								MyEvent.emit('loading-sketch', sketchList.value.length - 1)
 								MyEvent.emit('OpenSketch')
+								contentBody += `<slot slot-name="sketch"></slot>`
 							}
 							if (eventName === 'report') {
 								reportsContent.value += jsonData.report
@@ -575,6 +577,15 @@

 		// 延迟设置新数据，确保 UI 有时间响应清空操作
 		nextTick(() => {
+			// 找到每个 sessionId 对应的最后一项，插入sketch卡片
+			const sessionLastIndexMap = new Map<string, number>()
+			ancestorsList.forEach((item, index) => {
+				sessionLastIndexMap.set(item.sessionId, index)
+			})
+			sessionLastIndexMap.forEach((lastIndex) => {
+				ancestorsList[lastIndex].text += '<slot slot-name="sketch"></slot>'
+			})
+
 			messageList.value = [...ancestorsList]
 			params.versionID = current?.id
 			sketchList.value = imgList
--- a/src/views/home/agent/components/Item.vue
+++ b/src/views/home/agent/components/Item.vue
@@ -16,22 +16,40 @@
 						class="img-item"
 					/>
 				</div>
-				<div class="message-context" v-show="content.thinkingText?.length > 0">
+				<!-- <div class="thinking-wrapper" v-show="content.thinkingText?.length > 0">
 					<div class="thinking">
 						<div
-							class="thinking-header flex align-center"
+							class="thinking-header flex align-center space-between"
 							@click="toggleThinkingCollapsed"
 						>
-							<span>{{ t('agent.thinking') }}</span>
-							<!-- <SvgIcon :name="content.thinkingCollapsed ? 'arrowDown' : 'arrowUp'" size="16" color="#666" /> -->
+							<div class="left flex align-center">
+								<span class="think-title" v-show="content.thinking">{{
+									t('agent.thinking')
+								}}</span>
+								<SvgIcon
+									v-show="!content.thinking"
+									class="think-icon"
+									name="checked"
+									size="12"
+									color="#FF7A51"
+								/>
+								<span class="think-title" v-show="!content.thinking">{{
+									t('agent.thinkComplete')
+								}}</span>
+							</div>
+							<SvgIcon
+								:class="{ reverse: thinkingCollapsed }"
+								name="arrowDown"
+								size="16"
+								color="#FF7A51"
+							/>
 						</div>
-						<div class="thinking-content" v-show="!content.thinkingCollapsed">
+						<div class="thinking-content" v-show="!thinkingCollapsed">
 							<pre>{{ content.thinkingText }}</pre>
 						</div>
 					</div>
-				</div>
+				</div> -->
 				<div class="message-txt markdown-body flex flex-col">
-					<!-- <div v-html="formatMessage"></div> -->
 					<VueMarkdown
 						:custom-attrs="customAttrs"
 						:markdown="content.text"
@@ -43,6 +61,9 @@
 						<template v-slot:s-url="{ children: children }">
 							<Url :list="content.webAddress" @click.native="handleClickUrls" />
 						</template>
+						<template v-slot:s-sketch="{ children: children }">
+							<Sketch @click.native="handleClickSketch" />
+						</template>
 					</VueMarkdown>
 					<div
 						class="web-address flex align-center"
@@ -94,6 +115,7 @@
 	import agentThumb from '@/assets/images/agent-thumb.png'
 	import Card from './ReportCard.vue'
 	import Url from './UrlCard.vue'
+	import Sketch from './SketchCard.vue'
 	import { VueMarkdown } from '@crazydos/vue-markdown'
 	import type { CustomAttrs } from '@crazydos/vue-markdown'
 	import rehypeRaw from 'rehype-raw'
@@ -228,9 +250,9 @@
 			})
 		}
 	}
-
+	const thinkingCollapsed = ref(true)
 	const toggleThinkingCollapsed = () => {
-		props.content.thinkingCollapsed = !props.content.thinkingCollapsed
+		thinkingCollapsed.value = !thinkingCollapsed.value
 	}

 	const handleClickReport = () => {
@@ -241,6 +263,9 @@
 		MyEvent.emit('openUrls', props.content.webAddress)
 		// 点击显示来源
 	}
+	const handleClickSketch = () => {
+		MyEvent.emit('openSketch')
+	}
 </script>

 <style lang="less" scoped>
@@ -327,24 +352,42 @@
 	}

 	.thinking {
-		border: 1px solid #ddd;
-		border-radius: 8px;
-		padding: 1rem;
-		background-color: #f9f9f9;
+		color: #ff7a51;
+		font-family: 'Medium';
+		margin-bottom: 1.6rem;
+		border: 0.1rem solid transparent;
+		border-radius: 0.4rem;
+		background: linear-gradient(#fffcf4, #fffcf4),
+			linear-gradient(
+				119.03deg,
+				rgba(233, 121, 60, 0.3) 1.61%,
+				rgba(255, 207, 144, 0.3) 101.01%
+			);
+		background-origin: padding-box, border-box;
+		background-clip: padding-box, border-box;

 		.thinking-header {
 			cursor: pointer;
-			font-weight: bold;
-			justify-content: space-between;
+			padding: 0.8rem 1.2rem;
+			.think-icon {
+				margin-right: 0.6rem;
+			}
+			.reverse {
+				transform: rotate(180deg);
+				transition: transform 0.3s ease-in-out;
+			}
 		}

 		.thinking-content {
-			margin-top: 0.5rem;
+			padding: 0 1.4rem 1.6rem;
 			pre {
+				color: #f6a478;
+				margin: 0;
+				border-left: 0.035rem solid #f6a478;
 				white-space: pre-wrap;
 				font-family: inherit;
 				font-size: 1.2rem;
-				color: #666;
+				padding-left: 1.2rem;
 			}
 		}
 	}
--- a/src/views/home/agent/components/List.vue
+++ b/src/views/home/agent/components/List.vue
@@ -32,7 +32,8 @@

 	watch(
 		() => props.messageList,
-		() => {
+		(val) => {
+			console.log('messageList',val)
 			scrollToBottom()
 		},
 		{ deep: true }
--- a/src/views/home/agent/components/Preview.vue
+++ b/src/views/home/agent/components/Preview.vue
@@ -5,7 +5,6 @@
 	>
 		<template v-if="type === 'sketch'">
 			<div
-				v-show="!showLoading"
 				class="sketch-item"
 				v-for="(item, index) in sketchList"
 				:key="'sketch-item-' + index"
@@ -41,14 +40,16 @@
 					<div>Edit</div>
 					<img src="@/assets/images/arrow-top-right.png" />
 				</div>
+				<!-- 已加载完成的 sketch 显示实际图片 -->
 				<img
-					:src="getImageSrc(item, index)"
-					:alt="'sketch-' + index"
+					v-show="!pendingSketchIndexes.includes(index)"
+					v-img-loading="getImageSrc(item, index)"
 					@load="handleImageLoad(index)"
 				/>
-			</div>
-			<div v-show="showLoading" class="sketch-item loading-gif">
-				<img src="@/assets/images/sketch-loading.gif" alt="loading" />
+				<!-- 正在加载的 sketch 显示 loading gif overlay -->
+				<div v-if="pendingSketchIndexes.includes(index)" class="loading-wrapper">
+					<img src="@/assets/images/sketch-loading.gif" alt="loading" />
+				</div>
 			</div>
 		</template>
 		<template v-else-if="type === 'url'">
@@ -113,7 +114,10 @@
 	const emits = defineEmits(['deleteSketch'])

 	// 存储每个图片的加载状态
-	const loadedStatus = ref<boolean>(false)
+	const loadedStatus = ref<boolean[]>([])
+
+	// 存储正在加载的 sketch 索引
+	const pendingSketchIndexes = ref<number[]>([])

 	const props = withDefaults(
 		defineProps<{
@@ -176,8 +180,14 @@

 	// 图片加载完成时触发
 	const handleImageLoad = (index: number) => {
-		loadedStatus[index] = true
-		showLoading.value = false
+		loadedStatus.value[index] = true
+		pendingSketchIndexes.value = pendingSketchIndexes.value.filter((i) => i !== index)
+	}
+
+	// 图片加载失败时触发
+	const handleImageError = (index: number) => {
+		pendingSketchIndexes.value = pendingSketchIndexes.value.filter((i) => i !== index)
+		console.error(`Failed to load sketch at index ${index}`)
 	}

 	// 获取当前显示的图片源
@@ -235,23 +245,42 @@
 	}

 	const showLoading = ref(false)
-	const handleLoadingSketch = () => {
+	const handleLoadingSketch = (sketchIndex?: number) => {
 		showLoading.value = true
+		// 记录正在加载的 sketch 索引
+		if (sketchIndex !== undefined) {
+			pendingSketchIndexes.value.push(sketchIndex)
+		}
 	}

-	const handleClickUrl = (item: { url: string, title: string }) => {
+	const handleClickUrl = (item: { url: string; title: string }) => {
 		window.open(item.url, '_blank')
 	}

-	// watch(
-	// 	() => props.sketchList,
-	// 	(val) => {
-	// 		if (val.length > 0) {
-	// 			showLoading.value = false
-	// 		}
-	// 	},
-	// 	{ deep: true }
-	// )
+	const vImgLoading = {
+		mounted(el, binding) {
+			// 1. 设置初始状态：显示 Loading 图（或者你可以从 binding.arg 传进来）
+			const loadingUrl = LoadingImg
+			const finalSrc = binding.value // 真正要加载的图
+
+			el.src = loadingUrl
+
+			// 2. 预加载真实图片
+			const img = new Image()
+			img.src = finalSrc
+			img.onload = () => {
+				// 3. 加载完成后替换
+				el.src = finalSrc
+				el.style.opacity = 1
+			}
+		}
+		// 关键：如果图片地址是动态变化的，需要监听更新
+		// updated(el, binding) {
+		// 	if (binding.value !== binding.oldValue) {
+		// 		// 重复上面的加载逻辑...
+		// 	}
+		// }
+	}
 	onMounted(() => {
 		MyEvent.add('loading-sketch', handleLoadingSketch)
 	})
@@ -284,6 +313,19 @@
 				height: 100%;
 				border-radius: 1.6rem;
 			}
+			.loading-wrapper {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 1.6rem;
+				img {
+					width: 100%;
+					height: 100%;
+					border-radius: 1.6rem;
+				}
+			}
 			:deep(.menu-btn) {
 				position: absolute;
 				top: 2.1rem;
--- a/src/views/home/agent/components/ReportCard.vue
+++ b/src/views/home/agent/components/ReportCard.vue
@@ -1,15 +1,15 @@
 <template>
-	<div class="report-card" :class="{ 'is-url': isUrl }">
+	<div class="report-card" :class="{ 'is-url': isUrl, 'is-sketch': isSketch }">
 		<div class="report-card-header">
-			<span v-if="!isUrl">{{ title }}</span>
+			<span v-if="!isUrl && !isSketch">{{ report.title }}</span>
 			<div v-else class="web-sources flex align-center">
-				<span>Web Sources</span>
+				<span>{{ report.title }}</span>
 				<img src="@/assets/images/link.png" class="link-icon" />
 			</div>
 		</div>
 		<div class="report-card-content">
-			<span v-if="!isUrl">markdown.md</span>
-			<span v-else>Destination URL</span>
+			<span v-if="!isUrl && !isSketch">{{ report.content || 'markdown.md' }}</span>
+			<span v-else>{{ report.content }}</span>
 		</div>
 	</div>
 </template>
@@ -25,11 +25,17 @@
 			title?: string
 			content?: string
 			isUrl?: boolean
+			isSketch?: boolean
+			report: {
+				title: ''
+				content: ''
+			}
 		}>(),
 		{
 			isUrl: false,
 			title: '',
-			content: ''
+			content: '',
+			isSketch: false
 		}
 	)
 </script>
@@ -48,6 +54,10 @@
 			background: url('@/assets/images/link-card.png') no-repeat;
 			background-size: 100% 100%;
 		}
+		&.is-sketch {
+			background: url('@/assets/images/sketch-card.png') no-repeat;
+			background-size: 100% 100%;
+		}
 		// &:first-of-type{
 		// 	margin-top: 0;
 		// }
--- a/src/views/home/agent/components/SketchCard.vue
+++ b/src/views/home/agent/components/SketchCard.vue
@@ -0,0 +1,10 @@
+<template>
+  <ReportCard is-sketch :report="{title: 'Sketches Results', content: 'JPG file'}"/>
+</template>
+
+<script setup lang="ts">
+import ReportCard from './ReportCard.vue'
+</script>
+
+<style lang="less" scoped>
+</style>
--- a/src/views/home/agent/components/versionTree/index.vue
+++ b/src/views/home/agent/components/versionTree/index.vue
@@ -58,6 +58,9 @@ const setVersionsList = (res)=>{
 	}
 	traverseArray(res,'',(item,i,father)=>{
 		item.versionId = father?`${father.versionId}-${i+1}`:'1'
+		if(item.id == projectStore.state.nodeId){
+			selectItem.value = {...item}
+		}
 	})
 	versionsList.value = res
 }
@@ -110,10 +113,6 @@ const versionDelete = (versionDetail)=>{
 	treeKey.value++
 }

-watch(()=>projectStore.state.nodeId,(newVal,oldVal)=>{
-	if(!newVal || newVal === selectItem?.value?.id)return
-	selectItem.value = {id:newVal}
-})

 let data = reactive({})
 // onMounted(() => {setVersionsList('')})
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -465,7 +465,7 @@

 		// 打字机效果显示placeholder文本
 		const placeholderText =
-			'Generate a furniture trending report for 2025, including popular styles and design directions.'
+			'Generate a furniture trending report for 2026, including popular styles and design directions.'
 		typeWriterEffect(placeholderSpan, placeholderText)

 		const removePlaceholderOnInput = () => {
@@ -1378,6 +1378,7 @@
 		.agent-modal {
 			// width: 14.6rem;
 			// height: 8.5rem;
+			
 			row-gap: 1.2rem;
 			font-family: 'Medium';
 			font-weight: 500;
@@ -1388,6 +1389,7 @@
 			box-shadow: 0px 6.53px 32.63px 0px #0000000d;
 			border-radius: 1rem;
 			padding: 1.2rem 1.4rem;
+			transform: translateX(calc(50% - 1.6rem));
 			.c-svg {
 				width: initial;
 				width: 1rem;