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

.env.development

@@ -1,5 +1,5 @@
 # VITE_APP_URL = http://192.168.31.82:8771
 VITE_APP_URL = http://18.167.251.121:10015
 # VITE_APP_URL = http://192.168.31.118:8080
-# VITE_APP_URL = http://192.168.31.82:8755
+VITE_APP_URL = http://192.168.31.82:8755
 VITE_GOOGLE_CLIENT_ID = 216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com

src/App.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- <RouteCache /> -->
 	<router-view></router-view>
-	<div id="loading" v-if="loading" v-loading="true"></div>
+	<div id="loading" v-show="loading" v-loading="true"></div>
 </template>
 
 <script setup lang="ts">

src/api/agent.ts

@@ -47,7 +47,8 @@ export const getProjectList = (params) => {
 	return request({
 		url: `/api/project/list`,
 		method: 'get',
-		params
+		params,
+		loading: true,
 	})
 }
 
@@ -66,7 +67,8 @@ export const updateProject = (id: string, data: Object) => {
 	return request({
 		url: `/api/project/${id}`,
 		method: 'put',
-		data
+		data,
+		loading: true,
 	})
 }
 /**
@@ -77,7 +79,8 @@ export const updateProject = (id: string, data: Object) => {
 export const deleteProject = (id: string) => {
 	return request({
 		url: `/api/project/${id}`,
-		method: 'delete'
+		method: 'delete',
+		loading: true,
 	})
 }
 

src/components/Canvas/DepthCanvas/components/depth-header-tools.vue

@@ -38,10 +38,10 @@
 		<button class="export" @click="emit('import-local')">
 			<span class="text">本地导入</span>
 		</button> -->
-		<button class="workbench" @click="onWorkbench">
+		<!-- <button class="workbench" @click="onWorkbench">
 			<span class="icon"><svg-icon name="dc-workbench" size="20" /></span>
 			<span class="text">{{ $t('DepthCanvas.save') }}</span>
-		</button>
+		</button> -->
 	</div>
 </template>
 
@@ -183,11 +183,8 @@
 		if (!activeLayerId.value) return
 		layerManager.deleteLayerById(activeLayerId.value)
 	}
-	const onWorkbench = async () => {
+	const onWorkbench = () => {
-		exportCanvasToImage(canvasManager.canvas).then((url) => {
+		emit('workbench')
-			const { canvas, images } = canvasManager.getCanvasDisUrlJSON()
-			emit('workbench', { url, canvas, images })
-		})
 	}
 </script>
 

src/components/Canvas/DepthCanvas/depth-canvas.vue

@@ -8,7 +8,7 @@
 			<details-panel />
 			<brush-control-panel :currentTool="toolManager.currentTool.value" />
 			<ai-selectbox-panel :currentTool="toolManager.currentTool.value" />
-			<depth-header-tools @export="exportCanvas" @workbench="(v) => emit('workbench', v)" />
+			<depth-header-tools @export="exportCanvas" @workbench="onWorkbench" />
 
 			<zoom
 				:zoom="canvasManager.currentZoom.value / 100"
@@ -52,6 +52,12 @@
 			default: () => ({})
 		}
 	})
+	const onWorkbench = async () => {
+		exportCanvasToImage(canvasManager.canvas).then((url) => {
+			const { canvas, images } = canvasManager.getCanvasDisUrlJSON()
+			emit('workbench', { url, canvas, images })
+		})
+	}
 
 	// 准备就绪
 	const isReady = ref(false)
@@ -78,7 +84,7 @@
 	provide('toolManager', toolManager)
 
 	//键盘事件管理器
-	const keyEventManager = new KeyEventManager({ stateManager })
+	const keyEventManager = new KeyEventManager({ stateManager, onWorkbench })
 	stateManager.setManager({ keyEventManager })
 	provide('keyEventManager', keyEventManager)
 
@@ -183,6 +189,10 @@
 		// const canvas = canvasManager.processCanvasDisUrlJSON(object)
 		// console.log(canvas)
 	}
+
+	defineExpose({
+		onWorkbench
+	})
 </script>
 <style lang="less">
 	@import '@vue-flow/core/dist/style.css';

src/components/Canvas/DepthCanvas/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<fullscreen-dialog v-model="dialogVisible" @close="onClose" hide-destroy>
 		<div class="canvas-box">
-			<depth-canvas :config="config" @workbench="onWorkbench" />
+			<depth-canvas ref="depthCanvasRef" :config="config" @workbench="onWorkbench" />
 		</div>
 	</fullscreen-dialog>
 </template>
@@ -22,6 +22,7 @@
 		onWorkbench(options) {},
 		onClose() {}
 	})
+	const depthCanvasRef = ref(null)
 
 	const open = async (options) => {
 		config.value = options
@@ -61,8 +62,9 @@
 	}
 	// 关闭
 	const onClose = () => {
-		dialogVisible.value = false
+		depthCanvasRef.value.onWorkbench()
-		config.value.onClose?.()
+		// dialogVisible.value = false
+		// config.value.onClose?.()
 	}
 
 	defineExpose({

src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts

@@ -100,6 +100,7 @@ export class AISelectboxToolManager {
 		this.demoObject = null
 	}
 	createIndicatorObject() {
+		this.clearIndicatorObject()
 		const rect = new fabric.Rect({
 			left: this.startX,
 			top: this.startY,
@@ -198,8 +199,8 @@ export class AISelectboxToolManager {
 		if (!this.isDragging) return;
 		this.isDragging = false;
 		const object = this.indicatorObject.toJSON("evented")
-		if (object.width === 0) object.width = 100
+		// if (object.width === 0) object.width = 100
-		if (object.height === 0) object.height = 100
+		// if (object.height === 0) object.height = 100
 		this.clearIndicatorObject()
 		this.canvasManager.canvas.renderAll()
 

src/components/Canvas/DepthCanvas/manager/CanvasManager.ts

@@ -15,13 +15,13 @@ fabric.Object.prototype.toObject_ = fabric.Object.prototype.toObject
 fabric.Object.prototype.toObject = function () {
 	const args = [...arguments]
 	const arr = [...fabric.Object.prototype.customProperties]
-	args.forEach(v => {
+	args.forEach(v => (Array.isArray(v) ? arr.push(...v) : arr.push(v)))
-		if (typeof v === 'string') {
+	if (this.fill?.source === null) {
-			arr.push(v)
+		let image = new Image()
-		} else if (Array.isArray(v)) {
+		image.crossOrigin = 'anonymous'
-			arr.push(...v)
+		image.src = this.info?.fill?.source
-		}
+		this.fill.source = image
-	})
+	}
 	const object = this.toObject_(arr)
 	if (object.info) {
 		let lock = !!object.info.lock
@@ -153,6 +153,7 @@ export class CanvasManager {
 		this.canvas.add(obj)
 		const id = obj?.info?.id || ""
 		if (id) {
+			this.sortActiveObject(obj)
 			await this.layerManager.updateLayers(!!obj.info.parentId)
 			this.renderAll()
 			await this.layerManager.updateLayerThumbnailsById(id)
@@ -167,6 +168,19 @@ export class CanvasManager {
 			this.renderAll()
 		}
 	}
+	/** 根据激活对象排序当前对象 */
+	async sortActiveObject(object: any) {
+		const activeID = this.layerManager.activeID.value;
+		if (!activeID) return
+		const activeObject = this.getObjectById(activeID)
+		if (!activeObject) return
+		const parentId = activeObject.info?.parentId
+		if (!object.info.parentId) object.info.parentId = parentId
+		const index = this.getObjects().indexOf(activeObject)
+		this.canvas.moveTo(object, index + 1)
+		// await this.sortObjectByIds(ids, isRecord)
+	}
+
 
 	/** 更新子图层裁剪区域 */
 	async updateSubLayerClipPath() {

src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts

@@ -1,7 +1,9 @@
 export class KeyEventManager {
 	stateManager: any
+	onWorkbench: any
 	constructor(options) {
 		this.stateManager = options.stateManager;
+		this.onWorkbench = options.onWorkbench;
 		this._handleKeyDown = this.handleKeyDown.bind(this)
 	}
 	onMounted() { }
@@ -9,6 +11,7 @@ export class KeyEventManager {
 	/** 处理键盘事件 */
 	_handleKeyDown: any
 	handleKeyDown(event: any) {
+		event.preventDefault()
 		const activeID = this.stateManager.layerManager.activeID.value
 		const ctrl = event.ctrlKey ? 'ctrl-' : "";
 		const shift = event.shiftKey ? 'shift-' : "";
@@ -18,6 +21,7 @@ export class KeyEventManager {
 			{ key: "ctrl-c", handler: () => this.stateManager.layerManager.copyLayerById(activeID) },
 			{ key: "delete", handler: () => this.stateManager.layerManager.deleteLayerById(activeID) },
 			{ key: "ctrl-z", handler: () => this.stateManager.undoState() },
+			{ key: "ctrl-s", handler: () => this.onWorkbench() },
 			{ key: "ctrl-shift-z", handler: () => this.stateManager.redoState() },
 		]
 		list.forEach((v: any) => {

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

@@ -6,7 +6,7 @@
 		<template v-if="type === 'sketch'">
 			<div
 				class="sketch-item"
-				v-for="(item, index) in sketchList"
+				v-for="(item, index) in combineSketchList"
 				:key="'sketch-item-' + index"
 			>
 				<el-dropdown trigger="click" class="menu-btn">
@@ -97,7 +97,7 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
+	import { ref, reactive, onMounted, onUnmounted, watch, computed } from 'vue'
 	import { deleteSketchFlowCanvas } from '@/api/flow-canvas'
 	import { useProjectStore } from '@/stores'
 	import { useI18n } from 'vue-i18n'
@@ -125,7 +125,7 @@
 	const props = withDefaults(
 		defineProps<{
 			type: 'sketch' | 'report' | 'url'
-			sketchList: Array<string>
+			sketchList: Array<Record<string, string>>
 		}>(),
 		{
 			type: 'sketch',
@@ -133,6 +133,25 @@
 		}
 	)
 
+	watch(
+		() => props.sketchList,
+		() => {
+			// 当 sketchList 变化时，重置加载状态
+			loadedStatus.value = new Array(combineSketchList.value.length).fill(false)
+			pendingSketchIndexes.value = []
+		}
+	)
+
+	const combineSketchList = computed(() => {
+		const res: Array<{ id: string; url: string }> = []
+		props.sketchList.forEach((group) => {
+			Object.entries(group).forEach(([id, url]) => {
+				res.push({ id, url })
+			})
+		})
+		return res
+	})
+
 	const customAttrs: CustomAttrs = {
 		heading: {
 			style: {
@@ -201,36 +220,19 @@
 	}
 
 	// 获取当前显示的图片源
-	const getImageSrc = (item: string, index: number) => {
+	const getImageSrc = (item: { id: string; url: string }, index: number) => {
-		if (item === null) {
+		return item.url
-			return null
-		}
-		if (typeof item === 'string') {
-			return item
-		}
-		if (typeof item === 'object') {
-			return Object.values(item)[0]
-		}
 	}
 
-	const handleClickEdit = (item: string | Object) => {
+	const handleClickEdit = (item: { id: string; url: string }) => {
-		let url = ''
+		const url = item.url
-		let imgId = ''
+		const imgId = item.id
-		let nodeId = ''
+		const nodeId = projectStore.state.nodeId
-		if (typeof item === 'string') {
-			url = item
-		}
-		if (typeof item === 'object') {
-			url = Object.values(item)[0]
-			imgId = Object.keys(item)[0]
-			nodeId = projectStore.state.nodeId
-		}
 		myEvent.emit('openFlowCanvas', { url, imgId, nodeId })
 	}
 
-	const handleClickQuote = (item) => {
+	const handleClickQuote = (item: { id: string; url: string }) => {
-		// console.log(item)
+		const url = item.url
-		const url = Object.values(item)[0]
 		MyEvent.emit('quote', url)
 	}
 
@@ -289,13 +291,28 @@
 				el.src = finalSrc
 				el.style.opacity = 1
 			}
-		}
+		},
 		// 关键：如果图片地址是动态变化的，需要监听更新
-		// updated(el, binding) {
+		updated(el, binding) {
-		// 	if (binding.value !== binding.oldValue) {
+			if (binding.value !== binding.oldValue) {
-		// 		// 重复上面的加载逻辑...
+				console.log('value', binding.value, 'oldValue', binding.oldValue)
-		// 	}
+
-		// }
+				// 重复上面的加载逻辑...
+				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
+				}
+			}
+		}
 	}
 	onMounted(() => {
 		MyEvent.add('loading-sketch', handleLoadingSketch)

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

@@ -2,7 +2,7 @@
 	<div class="report-card" :class="{ 'is-url': isUrl, 'is-sketch': isSketch }">
 		<div class="report-card-header">
 			<!-- <span v-if="!isUrl && !isSketch">{{ title || '' }}</span> -->
-			<div  class="web-sources flex align-center">
+			<div class="web-sources flex">
 				<span>{{ title || '' }}</span>	
 				<img src="@/assets/images/link.png" class="link-icon" />
 			</div>
@@ -69,11 +69,13 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 			display: -webkit-box;
-			-webkit-line-clamp: 3;
+			-webkit-line-clamp: 2;
 			-webkit-box-orient: vertical;
-			line-clamp: 3;
+			line-clamp: 2;
 			.web-sources {
 				column-gap: 0.8rem;
+				align-items: flex-start;
+				word-break: break-all;
 				.link-icon {
 					width: 1.6rem;
 					height: 1.6rem;

src/views/home/left-nav.vue

@@ -23,7 +23,7 @@
 			</span>
 		</div>
 		<div class="history-list mini-scrollbar" v-show="!isCollapse && showHistory">
-			<div v-for="item in list" :key="item.name" class="history-item">
+			<div v-for="item in list" :key="item.id" class="history-item">
 				<div v-if="item.title" class="title">{{ item.name }}</div>
 				<div
 					v-else
@@ -43,18 +43,18 @@
 					/>
 					<span class="label" v-show="!item.edit">{{ item.name }}</span>
 					<el-popover
+						ref="popoverRef"
 						placement="right"
-						trigger="contextmenu"
+						trigger="click"
 						width="10rem"
 						popper-style="
 							padding: .6rem 0.7rem;
 							border-radius: 1rem;
 							min-width: 10rem;
 						"
-						v-model:visible="item.visible"
 					>
 						<template #reference>
-							<span @click.stop="openPopover(item)" class="icon">
+							<span @click.stop class="icon">
 								<svg-icon name="more" size="16" />
 							</span>
 						</template>
@@ -119,8 +119,12 @@
 		router.push({ name: 'agent', params: { id: item.id } })
 	}
 	const inputRef = ref(null)
+	const popoverRef = ref(null)
+	const hidePopover = () => {
+		popoverRef.value.forEach((v: any) => v.hide())
+	}
 	const onRenameHistoryItem = (item: any) => {
-		item.visible = false
+		hidePopover()
 		item.edit = true
 		nextTick(() => {
 			inputRef.value.forEach((v: any) => {
@@ -142,7 +146,7 @@
 		})
 	}
 	const onDeleteHistoryItem = (item: any) => {
-		item.visible = false
+		hidePopover()
 		deleteProject(item.id).then(() => {
 			GetProjectList()
 			if (item.id == id.value) {
@@ -165,7 +169,7 @@
 		const yesterdayList = []
 		const earlierChatList = []
 		arr.forEach((item: any) => {
-			const obj = { ...item, edit: false, visible: false }
+			const obj = { ...item, edit: false }
 			const date = FormatDate(obj.updateTime * 1000, str)
 			if (date == today) {
 				todayList.push(obj)
@@ -177,6 +181,7 @@
 		})
 		if (todayList.length > 0) {
 			list.value.push({
+				id: 'today',
 				title: true,
 				name: $t('Home.today')
 			})
@@ -184,6 +189,7 @@
 		}
 		if (yesterdayList.length > 0) {
 			list.value.push({
+				id: 'yesterday',
 				title: true,
 				name: $t('Home.yesterday')
 			})
@@ -191,6 +197,7 @@
 		}
 		if (earlierChatList.length > 0) {
 			list.value.push({
+				id: 'earlierChat',
 				title: true,
 				name: $t('Home.earlierChat')
 			})
@@ -207,12 +214,6 @@
 			}
 		})
 	}
-	const openPopover = (item: any) => {
-		list.value.forEach((item: any) => {
-			item.visible = false
-		})
-		item.visible = !item.visible
-	}
 	onMounted(() => {
 		MyEvent.add('newTitle', replaceTitle)
 	})