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

src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue

@@ -132,7 +132,6 @@
 			imageUrl: attrs.node?.data?.originalImage,
 			...data,
 		}
-		console.log(subordNode)
 		const taskList = await currentComponent.value.api(apiData).then((rv)=>{
 			return rv
 		}) || []
@@ -143,6 +142,7 @@
 				positionY: (index + subordNodes.length) * (50 + 250),
 				data: {
 					superiorID: attrs.node.id,
+					superiorNodeType: attrs.node?.data?.type,
 					createIndexPosition: index,
 					tier: currentComponent.value.tier,
 					isActive: index == 0 && subordNodes.length == 0,

src/components/Canvas/FlowCanvas/components/nodes/result-image.vue

@@ -7,7 +7,7 @@
 			:class="{'active': config.isActive}"
 			@click="setSelectTaskId(item.taskId)"
 		>
-			<div class="header" v-if="item.status == 'RETURNED'" v-show="showHeader && item.taskId === data.selectTaskId" @mousedown.stop>
+			<div class="header" v-if="item.status == 'RETURNED'" v-show="showHeader && config.isActive" @mousedown.stop>
 				<span class="icon">
 					<svg-icon name="chat-compose" size="20" size-unit="px" />
 				</span>
@@ -61,7 +61,9 @@
 	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'
 	const openImagePreview = inject('openImagePreview') as (url: string) => void
+	const openThreeModelPreview = inject('openThreeModelPreview') as (url: string) => void
 	const props = defineProps({
 		node: {
 			type: Object,
@@ -83,8 +85,8 @@
 		'send-to-back',
 		'update-data'
 	])
-	const attrs = useAttrs()
+	// const attrs = useAttrs()
-	const showHeader = ref(!!attrs.node?.data?.isHeader)
+	const showHeader = ref(!!props.node?.data?.isHeader)
 	const showMenu = ref(false)
 	const clickTaskId = ref('')
 	const generateManager = inject('generateManager') as any
@@ -97,6 +99,7 @@
 	const data = reactive({
 		selectTaskId: props.data?.selectTaskId || '',
 		imageProcessTasks: props.data?.imageProcessTasks,
+		superiorNodeType: props?.node?.data?.superiorNodeType,
 		isActive: props.data?.isActive || false,
 	})
 	const setSelectTaskId = (taskId: string) => {
@@ -171,7 +174,11 @@
 		}
 	])
 	const onPreview = (url: string) => {
-		openImagePreview(url)
+		if(data.superiorNodeType == NODE_DATATYPE.TO_3D_MODEL){
+			openThreeModelPreview(url)
+		}else{
+			openImagePreview(url)
+		}
 	}
 	const onDownload = (url: string) => {
 		downloadImage(url, 'image.png')

src/components/Canvas/FlowCanvas/components/tools/threeModel/detail.vue

@@ -62,6 +62,7 @@ const {} = toRefs(data);
 				</div>
 			</div>
 		</div>
+		<div class="download">{{ $t('threeModel.download') }}</div>
 	</div>
 </template>
 <style lang="less" scoped>
@@ -76,6 +77,20 @@ const {} = toRefs(data);
 			line-height: 2.7rem;
 			color: #000;
 		}
+		> .download{
+			margin-left: 4.2rem;
+			margin-top: 24.8rem;
+			line-height: 3rem;
+			width: 20rem;
+			border-radius: 1.5rem;
+			color: #fff;
+			background-color: #ff7a51;
+			font-weight: 600;
+			font-style: Semibold;
+			font-size: 1.2rem;
+			text-align: center;
+			cursor: pointer;
+		}
 		> .detail{
 			> .name{
 				> .title{

src/components/Canvas/FlowCanvas/components/tools/threeModel/index.vue

@@ -1,18 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import threeGlb from '@/assets/images/three/sample.glb'
 
 import model from './model.vue'
 import detail from './detail.vue'
 
-//const props = defineProps({
+const props = defineProps({
-//})
+	currentUrl: {
+		type: String,
+		default: ''
+	}
+})
 //const emit = defineEmits([
 //])
 let data = reactive({
 })
+
 const modelRef = ref(null)
 onMounted(()=>{
-	modelRef.value.open()
+	console.log(props.currentUrl)
+	modelRef.value.open(threeGlb)
 })
 onUnmounted(()=>{
 })

src/components/Canvas/FlowCanvas/components/tools/threeModel/model.vue

@@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n'
 import gsap from 'gsap';
 import * as THREE from 'three';
 import { initThree,clearModel,addModel,getModelInfo,calculateCameraPosition } from './threeTool'
-import threeGlb from '@/assets/images/three/sample.glb'
 
 //const props = defineProps({
 //})
@@ -134,7 +133,7 @@ const setModel = async (url:any)=>{
 	await addModel(url,controls,camera,pointLight,group,load)
 	// addMaterial()
 }
-const open = async ()=>{
+const open = async (url)=>{
 	load.value.state = true
 	await nextTick(()=>{
 		init()
@@ -152,7 +151,7 @@ const open = async ()=>{
 		// composer.render();
 	};
 	animate();
-	await setModel(threeGlb)
+	await setModel(url)
 	load.value.state = false
 }
 

src/components/Canvas/FlowCanvas/flow-canvas.vue

@@ -56,7 +56,9 @@
 	/>
 	<image-preview ref="imagePreviewRef" />
 	<baseModal ref="threeModelRef">
-		<threeModel />
+		<template v-slot="{ currentUrl }">
+			<threeModel :currentUrl="currentUrl" />
+		</template>
 	</baseModal>
 </template>
 
@@ -215,7 +217,12 @@
 	const openImagePreview = (url: string) => {
 		imagePreviewRef.value.open(url)
 	}
+	/** 打开3D预览 */
+	const openThreeModelPreview = (url: string) => {
+		threeModelRef.value.open(url)
+	}
 	provide('openImagePreview', openImagePreview)
+	provide('openThreeModelPreview', openThreeModelPreview)
 
 	onMounted(async () => {
 		// window['vueFlow'] = vueFlow

src/components/Canvas/FlowCanvas/manager/NodeManager.ts

@@ -7,6 +7,7 @@ interface NodeData {
 	tier?: string// 节点层级
 	isHeader?: boolean// 是否显示头
 	superiorID?: string// 上级节点ID
+	superiorNodeType?: string// 上级节点类型
 	disableDelete?: boolean// 是否禁用删除
 	disableCopy?: boolean// 是否禁用复制
 	originalImage?: string// 要进行生成的图片

src/components/Canvas/components/base-modal.vue

@@ -13,7 +13,7 @@
 			</div>
 		</template>
 		<div class="modal-box">
-			<slot></slot>
+			<slot v-if="currentUrl" :currentUrl="currentUrl"></slot>
 		</div>
 	</el-dialog>
 </template>
@@ -27,11 +27,14 @@
 		}
 	})
 	const showDialog = ref(false)
+	let currentUrl = ref('')
 	const open = (url_: any) => {
+		currentUrl.value = url_
 		showDialog.value = true
 	}
 	const close = () => {
 		showDialog.value = false
+		currentUrl.value = ''
 	}
 
 	defineExpose({

src/lang/en.ts

@@ -151,7 +151,8 @@ export default {
 		copySuccess: 'Text copied to clipboard',
 		copyFaild: 'Copy failed. Your browser may be restricting clipboard access. Please try copying manually.',
 		Download: 'Download',
-		deleteSuccess: 'Successfully deleted'
+		deleteSuccess: 'Successfully deleted',
+		thinking: 'Thinking...',
 	},
 
 	// Version Tree
@@ -191,5 +192,6 @@ export default {
 	//3d面板
 	threeModel: {
 		loading: 'Loading',
+		download: 'Download',
 	}
 }

src/lang/zh-cn.ts

@@ -146,7 +146,8 @@ export default {
 		copyFaild:
 			'复制失败。您的浏览器可能限制了剪贴板访问,请允许浏览器访问剪贴板或尝试手动复制。',
 		Download: '下载',
-		deleteSuccess:'删除成功'
+		deleteSuccess: '删除成功',
+		thinking:'已思考'
 	},
 
 	// Version Tree
@@ -186,5 +187,6 @@ export default {
 	//3d面板
 	threeModel: {
 		loading: '加载中',
+		download: '下载'
 	}
 }

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

@@ -146,7 +146,7 @@
 			id: messageList.value.length + 1,
 			text: '',
 			isUser: false,
-			sessionId: 'projectStore.state.id',
+			sessionId: projectStore.state.id,
 			loading: true,
 			thinking: false,
 			thinkingText: '',
@@ -210,7 +210,6 @@
 			// 流式响应处理
 			let contentBody = ''
 			let buffer = ''
-			const webAddressList = []
 			const reader = response.body?.getReader()
 			if (!reader) throw new Error('无法获取流读取器')
 
@@ -248,10 +247,8 @@
 								?.trim() || ''
 
 						if (!hasReportStarted && eventName === 'report') {
-							console.log('开始生成报告--------')
-
 							isGeneratingReport.value = true
-							contentBody += `<slot slot-name="card" title="123">123</slot>`
+							contentBody += `<slot slot-name="card" title="123" content="123">123</slot>`
 							hasReportStarted = true
 						}
 
@@ -261,7 +258,7 @@
 							reportsContent.value
 						) {
 							isGeneratingReport.value = false
-							localStorage.setItem(
+							sessionStorage.setItem(
 								'reportsContent_' + projectStore.state.id,
 								reportsContent.value
 							)
@@ -286,7 +283,7 @@
 
 						let isNodeIdEvent = eventName === 'nodeId'
 
-						let hasSketch = eventName === 'sketch'
+						let hasSketch = eventName === 'sketchIDAndUrl'
 
 						const dataLines = event
 							.split(/\n/)
@@ -295,12 +292,18 @@
 							.filter((content) => content.startsWith('{') || content.startsWith('['))
 						// console.log('dataLInes', dataLines)
 						if (isNodeIdEvent) {
-							params.versionID = dataLines[0]
+							const versionID = event.split(/\n/)
-							projectStore.setProject({ nodeId: dataLines[0] })
+							.filter((line) => line.startsWith('data:'))
-						}
+							.map((line) => line.replace(/^data:\s*/, ''))[0]
-						if (eventName === 'webAddress') {
+							
-							console.log('webAddress-----', eventName, dataLines)
+							debugger
+							params.versionID = versionID
+							projectStore.setProject({ nodeId: versionID })
 						}
+						// if (eventName === 'webAddress') {
+						// 	console.log('webAddress111111111111111', eventName, dataLines)
+						// 	debugger
+						// }
 
 						if (eventName === 'tool') {
 							MyEvent.emit('loading-sketch')
@@ -313,7 +316,8 @@
 							const jsonData = JSON.parse(jsonText)
 							// console.log('jsonData', jsonData)
 							if (jsonData.webAddress) {
-								console.log('webAddress-----', jsonData)
+								aiMessage.webAddress = JSON.parse(jsonData.webAddress)
+								contentBody += `<slot slot-name="url">123</slot>`
 							}
 							if (jsonData.title) {
 								emits('setTitle', jsonData.title)
@@ -323,6 +327,7 @@
 								sketchList.value.push({
 									[Object.keys(jsonData)[0]]: jsonData[Object.keys(jsonData)[0]]
 								})
+								MyEvent.emit('OpenSketch')
 							}
 							if (eventName === 'report') {
 								reportsContent.value += jsonData.report
@@ -439,7 +444,6 @@
 
 		while (i < dialogue.length) {
 			const item = dialogue[i]
-
 			if (item.role === 'user') {
 				// user 角色直接添加
 				result.push({
@@ -496,7 +500,7 @@
 			for (let i = 0; i < session.dialogue.length; i++) {
 				if (session.dialogue[i].report) {
 					session.dialogue[i].content =
-						`<slot slot-name="card" title="123">123</slot>` +
+						`<slot slot-name="card" title="123" content="123">123</slot>` +
 						(session.dialogue[i].content || '')
 					break
 				}
@@ -511,12 +515,12 @@
 			}
 		})
 		if (reportStr && session.id) {
-			localStorage.setItem(`reportsContent_${session.id}`, reportStr)
+			sessionStorage.setItem(`reportsContent_${session.id}`, reportStr)
 		}
 
 		// 3. 收集 sketchIDAndUrl 到 imgList
 		if (session.sketchIDAndUrl) {
-			imgList.push(...session.sketchIDAndUrl)
+			imgList.push(session.sketchIDAndUrl)
 		}
 
 		// 4. 处理 dialogue

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

@@ -22,7 +22,7 @@
 							class="thinking-header flex align-center"
 							@click="toggleThinkingCollapsed"
 						>
-							<span>思考中</span>
+							<span>{{ t('agent.thinking') }}</span>
 							<!-- <SvgIcon :name="content.thinkingCollapsed ? 'arrowDown' : 'arrowUp'" size="16" color="#666" /> -->
 						</div>
 						<div class="thinking-content" v-show="!content.thinkingCollapsed">
@@ -40,10 +40,20 @@
 						<template v-slot:s-card="{ children: children, ...attrs }">
 							<Card :title="attrs.title" @click.native="handleClickReport" />
 						</template>
+						<template v-slot:s-url="{ children: children }">
+							<Url :list="content.webAddress" @click.native="handleClickUrls" />
+						</template>
 					</VueMarkdown>
+					<div
+						class="web-address flex align-center"
+						v-show="content.webAddress?.length > 0"
+					>
+						<img src="@/assets/images/search.png" class="search-icon" />
+						<span>{{ content.webAddress?.length }} web pages have been retrieved.</span>
+					</div>
 				</div>
 				<div
-					v-show="!content.thinking"
+					v-show="!content.streaming"
 					class="operate flex"
 					:class="{ 'is-user': content.isUser }"
 				>
@@ -96,13 +106,13 @@
 		isLast: Boolean
 	}>()
 
-	watch(
+	// watch(
-		() => props.content,
+	// 	() => props.content,
-		(newVal) => {
+	// 	(newVal) => {
-			console.log('newVal-----', newVal)
+	// 		console.log('newVal-----', newVal)
-		},
+	// 	},
-		{ immediate: true }
+	// 	{ immediate: true }
-	)
+	// )
 
 	const emit = defineEmits(['regenerate'])
 
@@ -215,6 +225,7 @@
 		// 点击显示报告
 	}
 	const handleClickUrls = (data) => {
+		MyEvent.emit('openUrls', props.content.webAddress)
 		// 点击显示来源
 	}
 </script>
@@ -260,6 +271,24 @@
 				width: fit-content;
 				max-width: 82%;
 			}
+			.web-address {
+				width: fit-content;
+				min-width: 22.5rem;
+				line-height: 2.6rem;
+				padding: 0 1rem;
+				border-radius: 1.5rem;
+				color: #000000a6;
+				border: 0.1rem solid #0000001a;
+				font-family: 'Regular';
+				font-weight: 400;
+				font-size: 1.2rem;
+				margin-top: 1rem;
+				column-gap: 0.8rem;
+				.search-icon {
+					width: 1.4rem;
+					height: 1.4rem;
+				}
+			}
 		}
 		.operate {
 			margin-top: 1.3rem;

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

@@ -50,29 +50,42 @@
 				<img src="@/assets/images/sketch-loading.gif" alt="loading" />
 			</div>
 		</template>
+		<template v-else-if="type === 'url'">
+			<div class="url-list flex">
+				<div class="url-item" v-for="item in urlList" :key="item">
+					<div class="url-title" @click="handleClickUrl(item)">
+						{{ item }}
+						<img src="@/assets/images/link-outer.png" class="link-outer" />
+					</div>
+					<div class="url-link">{{ item }}</div>
+				</div>
+			</div>
+		</template>
 		<div v-else class="reportBorder">
 			<div class="report">
-				<div v-if="false" class="report-content-null">
+				<!-- <div v-if="false" class="report-content-null">
 					<img :src="reportNull" alt="" />
-				</div>
+				</div> -->
-				<div v-else class="report-content">
+				<template v-if="reportType === 'report'">
-					<div class="downBtnBox">
+					<div class="report-content">
-						<div class="downBtn" @click="handleDownloadMd">
+						<div class="downBtnBox">
-							<div class="icon">
+							<div class="downBtn" @click="handleDownloadMd">
-								<SvgIcon name="reportDown" size="16"></SvgIcon>
+								<div class="icon">
+									<SvgIcon name="reportDown" size="16"></SvgIcon>
+								</div>
+								<span>{{ $t('agent.Download') }}</span>
 							</div>
-							<span>{{ $t('agent.Download') }}</span>
+						</div>
+						<div class="content">
+							<VueMarkdown
+								:custom-attrs="customAttrs"
+								:markdown="markdownContent"
+								:rehype-plugins="[rehypeRaw]"
+							>
+							</VueMarkdown>
 						</div>
 					</div>
-					<div class="content">
+				</template>
-						<VueMarkdown
-							:custom-attrs="customAttrs"
-							:markdown="markdownContent"
-							:rehype-plugins="[rehypeRaw]"
-						>
-						</VueMarkdown>
-					</div>
-				</div>
 			</div>
 		</div>
 	</div>
@@ -101,7 +114,7 @@
 
 	const props = withDefaults(
 		defineProps<{
-			type: 'sketch' | 'report'
+			type: 'sketch' | 'report' | 'url'
 			sketchList: Array<string>
 		}>(),
 		{
@@ -125,17 +138,26 @@
 
 	const sessionId = ref('')
 	const markdownContent = ref('')
-const setSessionId = (id: string) => {
+	const urlList = ref([])
-		
+	const reportType = ref<'report' | 'urls'>('report')
+	const setSessionId = (id: string) => {
+		reportType.value = 'report'
 		sessionId.value = id
 	}
+	const setUrls = (list: string[]) => {
+		reportType.value = 'urls'
+		urlList.value = list
+		// urlList.value = [
+		// 	'https://furnitureindustrynews.substack.com/p/what-2026-really-looks-like-for-furniture',
+		// 	'https://furnitureindustrynews.substack.com/p/what-2026-really-looks-like-for-furniture',
+		// 	'https://furnitureindustrynews.substack.com/p/what-2026-really-looks-like-for-furniture'
+		// ]
+	}
 	watch(
 		() => sessionId.value,
 		(newVal) => {
 			if (newVal) {
-				markdownContent.value = localStorage.getItem(`reportsContent_${newVal}`)
+				markdownContent.value = sessionStorage.getItem(`reportsContent_${newVal}`)
-				console.log('markdownContent-----', markdownContent.value);
-				
 			}
 		}
 	)
@@ -143,9 +165,7 @@ const setSessionId = (id: string) => {
 	// 图片加载完成时触发
 	const handleImageLoad = (index: number) => {
 		loadedStatus[index] = true
-		if (index === props.sketchList.length - 1) {
+		showLoading.value = false
-			showLoading.value = false
-		}
 	}
 
 	// 获取当前显示的图片源
@@ -206,15 +226,20 @@ const setSessionId = (id: string) => {
 	const handleLoadingSketch = () => {
 		showLoading.value = true
 	}
-	watch(
+
-		() => props.sketchList,
+	const handleClickUrl = (item: string) => {
-		(val) => {
+		window.open(item, '_blank')
-			if (val.length > 0) {
+	}
-				showLoading.value = false
+
-			}
+	// watch(
-		},
+	// 	() => props.sketchList,
-		{ deep: true }
+	// 	(val) => {
-	)
+	// 		if (val.length > 0) {
+	// 			showLoading.value = false
+	// 		}
+	// 	},
+	// 	{ deep: true }
+	// )
 	onMounted(() => {
 		MyEvent.add('loading-sketch', handleLoadingSketch)
 	})
@@ -223,7 +248,8 @@ const setSessionId = (id: string) => {
 	})
 
 	defineExpose({
-		setSessionId
+		setSessionId,
+		setUrls
 	})
 </script>
 
@@ -280,6 +306,38 @@ const setSessionId = (id: string) => {
 				}
 			}
 		}
+		.url-list {
+			flex: 1;
+			flex-wrap: wrap;
+			column-gap: 4rem;
+			row-gap: 3rem;
+			.url-item {
+				width: 24rem;
+				height: 28.7rem;
+				word-break: break-all;
+				background: url('@/assets/images/web-card.png') no-repeat;
+				background-size: 100% 100%;
+				padding: 5rem 1.5rem;
+				.url-title {
+					cursor: pointer;
+					font-family: 'Medium';
+					font-size: 1.6rem;
+					color: #232323;
+					padding-bottom: 0.6rem;
+					.link-outer {
+						width: 1.2rem;
+						height: 1.2rem;
+					}
+				}
+				.url-link {
+					font-family: 'Medium';
+					font-style: italic;
+					font-size: 1.2rem;
+					color: #7c7c7c;
+					user-select: text;
+				}
+			}
+		}
 		.reportBorder {
 			position: relative;
 			display: flex;
@@ -289,6 +347,7 @@ const setSessionId = (id: string) => {
 			flex: 1;
 			overflow: hidden;
 			height: 100%;
+
 			&::before {
 				content: '';
 				position: absolute;
@@ -348,6 +407,7 @@ const setSessionId = (id: string) => {
 						white-space: pre-wrap;
 						overflow-y: auto;
 						margin: 2rem;
+						padding: 0 8.8rem 8.8rem;
 					}
 				}
 			}

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

@@ -1,49 +1,79 @@
 <template>
-	<div class="report-card">
+	<div class="report-card" :class="{ 'is-url': isUrl }">
 		<div class="report-card-header">
-			<span>{{ title }}</span>
+			<span v-if="!isUrl">{{ title }}</span>
+			<div v-else class="web-sources flex align-center">
+				<span>Web Sources</span>
+				<img src="@/assets/images/link.png" class="link-icon" />
+			</div>
 		</div>
 		<div class="report-card-content">
-			<span>{{ title }}</span>
+			<span v-if="!isUrl">markdown.md</span>
+			<span v-else>Destination URL</span>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	const props = defineProps<{
+	// const props = defineProps<{
-		title: string
+	// 	title: string
-	}>()
+	// 	isUrl?: boolean
+	// }>()
+
+	const props = withDefaults(
+		defineProps<{
+			title?: string
+			content?: string
+			isUrl?: boolean
+		}>(),
+		{
+			isUrl: false,
+			title: '',
+			content: ''
+		}
+	)
 </script>
 
 <style lang="less" scoped>
 	.report-card {
 		cursor: pointer;
-		width:100%;
+		width: 100%;
 		margin: 2.4rem 0;
 		min-height: 11.2rem;
 		background: url('@/assets/images/report-card.png') no-repeat;
 		background-size: 100% 100%;
-    padding: 2.9rem;
+		padding: 2.9rem;
 		overflow: hidden;
+		&.is-url {
+			background: url('@/assets/images/link-card.png') no-repeat;
+			background-size: 100% 100%;
+		}
 		// &:first-of-type{
 		// 	margin-top: 0;
 		// }
 		&-header {
 			font-family: 'Medium';
-      font-size: 1.6rem;
+			font-size: 1.6rem;
-      margin-bottom: 1.3rem;
+			margin-bottom: 1.3rem;
-      overflow: hidden;
+			overflow: hidden;
-      text-overflow: ellipsis;
+			text-overflow: ellipsis;
-      display: -webkit-box;
+			display: -webkit-box;
-      -webkit-line-clamp: 3;
+			-webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
+			-webkit-box-orient: vertical;
-      line-clamp: 3;
+			line-clamp: 3;
+			.web-sources {
+				column-gap: 0.8rem;
+				.link-icon {
+					width: 1.6rem;
+					height: 1.6rem;
+				}
+			}
+		}
+		&-content {
+			font-family: 'Regular';
+			font-weight: 300;
+			font-size: 1.6rem;
+			color: #7c7c7c;
 		}
-    &-content{
-      font-family: 'Regular';
-      font-weight: 300;
-      font-size: 1.6rem;
-      color: #7c7c7c;
-    }
 	}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <ReportCard :report="{title: 'WebSources', content: 'Destination URL'}"/>
+  <ReportCard is-url :report="{title: 'WebSources', content: 'Destination URL'}"/>
 </template>
 
 <script setup lang="ts">

src/views/home/agent/index.vue

@@ -103,11 +103,16 @@
 
 	const proJectId = computed(() => route.params.id)
 
-const handleOpenReport = (data) => {
+	const handleOpenReport = (data, isUrls = false) => {
 		previewRef.value.setSessionId(data)
 		previewType.value = 'report'
 	}
 
+	const handleOpenUrls = (data) => {
+		previewRef.value.setUrls(data)
+		previewType.value = 'url'
+	}
+
 	watch(
 		() => proJectId.value,
 		(newVal, oldVal) => {
@@ -120,6 +125,10 @@ const handleOpenReport = (data) => {
 
 	onMounted(() => {
 		MyEvent.add('openReport', handleOpenReport)
+		MyEvent.add('openUrls', handleOpenUrls)
+		MyEvent.add('OpenSketch', ()=>{
+			previewType.value = 'sketch'
+		})
 		projectStore.clearProject()
 		if (proJectId.value) {
 			handleGetProjectInfoAndHistory()
@@ -127,6 +136,10 @@ const handleOpenReport = (data) => {
 	})
 	onUnmounted(() => {
 		MyEvent.remove('openReport', handleOpenReport)
+		MyEvent.remove('openUrls', handleOpenUrls)
+		MyEvent.remove('OpenSketch', ()=>{
+			previewType.value = 'sketch'
+		})
 	})
 </script>