From ecf928691e9f4e368109b4b54b3ae58b1e7fe0bf Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Fri, 20 Mar 2026 09:46:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=94=BB=E5=B8=83=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/depth-canvas.ts                       | 41 +++++++++++++++++++
 .../components/depth-header-tools.vue         |  4 +-
 .../Canvas/DepthCanvas/depth-canvas.vue       |  9 ++--
 src/components/Canvas/DepthCanvas/index.vue   | 41 ++++++++++++++-----
 .../DepthCanvas/manager/CanvasManager.ts      | 18 ++++----
 5 files changed, 90 insertions(+), 23 deletions(-)
 create mode 100644 src/api/depth-canvas.ts

diff --git a/src/api/depth-canvas.ts b/src/api/depth-canvas.ts
new file mode 100644
index 0000000..76a1db7
--- /dev/null
+++ b/src/api/depth-canvas.ts
@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+/**
+ * 获取深度画布
+ * @param id depth id
+ * @returns 深度画布数据
+ */
+export const getDepthCanvas = (id: string) => {
+	return request({
+		url: `/api/deep-canvas/${id}`,
+		method: 'get',
+		loading: true,
+	})
+}
+
+/**
+ * 保存深度画布
+ * @param data 保存depth的画布数据
+ * @returns 保存结果
+ */
+export const saveDepthCanvas = (data: object) => {
+	return request({
+		url: `/api/deep-canvas/update`,
+		method: 'put',
+		data,
+		loading: true,
+	})
+}
+
+/**
+ * 删除深度画布
+ * @param id depth id
+ * @returns 删除结果
+ */
+export const deleteDepthCanvas = (id: string) => {
+	return request({
+		url: `/api/deep-canvas/${id}`,
+		method: 'delete',
+		loading: true,
+	})
+}
diff --git a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
index 0b0457b..0407255 100644
--- a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
+++ b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
@@ -178,8 +178,8 @@
 	}
 	const onWorkbench = async () => {
 		exportCanvasToImage(canvasManager.canvas).then((url) => {
-			const json = canvasManager.getCanvasJSON()
-			emit('workbench', { url, json })
+			const { canvas, images } = canvasManager.getCanvasDisUrlJSON()
+			emit('workbench', { url, canvas, images })
 		})
 	}
 </script>
diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue
index 35855ac..66e569c 100644
--- a/src/components/Canvas/DepthCanvas/depth-canvas.vue
+++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue
@@ -89,16 +89,19 @@
 		globalStore.setLoading(true)
 		keyEventManager.registerEvents()
 		const url = props.config.url || ''
-		const json = props.config.json || ''
+		const canvasData = props.config.canvasData || ''
 		await canvasManager.initCanvas({
 			canvasRef,
 			canvasViewWidth: canvasContainerRef.value.clientWidth,
 			canvasViewHeight: canvasContainerRef.value.clientHeight,
 			canvasWidth: props.config.width || 750,
 			canvasHeight: props.config.height || 600,
-			url: json ? '' : url
+			url: canvasData ? '' : url
 		})
-		if (json) await canvasManager.loadJSON(json)
+		if (canvasData) {
+			const json = canvasManager.processCanvasDisUrlJSON(canvasData)
+			await canvasManager.loadJSON(json)
+		}
 		globalStore.setLoading(false)
 
 		stateManager.onMounted()
diff --git a/src/components/Canvas/DepthCanvas/index.vue b/src/components/Canvas/DepthCanvas/index.vue
index f560050..d53a8ba 100644
--- a/src/components/Canvas/DepthCanvas/index.vue
+++ b/src/components/Canvas/DepthCanvas/index.vue
@@ -9,33 +9,54 @@
 <script setup lang="ts">
 	import { base64Tofile } from '../tools/tools'
 	import { uploadImage } from '@/api/upload'
+	import { getDepthCanvas, saveDepthCanvas } from '@/api/depth-canvas'
 	import FullscreenDialog from '../components/fullscreen-dialog.vue'
 	import depthCanvas from './depth-canvas.vue'
 	import { ref } from 'vue'
 	const dialogVisible = ref(false)
 	const config = ref({
-		id: '',
+		canvasId: '',
+		sketchId: '',
 		url: '',
-		json: ''
+		canvasData: '' as any,
+		onWorkbench(options) {},
+		onClose() {}
 	})
 
-	const open = (options) => {
+	const open = async (options) => {
 		config.value = options
-		console.log(config.value)
-		config.value.json = sessionStorage.getItem('canvasJson_' + config.value.id)
+		if (config.value.canvasId) {
+			const res = await getDepthCanvas(config.value.canvasId)
+			const canvas = res.deepCanvasDetail
+			const images = res.images
+			if (canvas && images) {
+				config.value.canvasData = { canvas: JSON.stringify(canvas), images }
+			} else {
+				config.value.canvasData = null
+			}
+		}
+
 		dialogVisible.value = true
 	}
 	// 工作区
 	const onWorkbench = async (options) => {
-		const json = options.json
-
-		sessionStorage.setItem('canvasJson_' + config.value.id, json)
-
+		// 保存画布数据
+		const data = {
+			deepCanvasDetail: JSON.parse(options.canvas),
+			images: options.images,
+			sketchId: config.value.sketchId,
+			id: config.value.canvasId || null
+		}
+		const sData = await saveDepthCanvas(data)
+		console.log(sData)
+		const canvasId = sData.id
+		// base64 转 file 上传转换为 url
 		const file = base64Tofile(options.url, 'canvas.png')
 		const formData = new FormData()
 		formData.append('file', file)
 		const url = await uploadImage(formData)
-		config.value.onWorkbench?.({ url })
+		config.value.onWorkbench?.({ url, canvasId })
+
 		dialogVisible.value = false
 	}
 	// 关闭
diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
index dc5684c..c958adf 100644
--- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -293,12 +293,12 @@ export class CanvasManager {
 	/** 导出画布为处理图片的JSON */
 	getCanvasDisUrlJSON() {
 		const canvas = this.canvas.toJSON()
-		const images = [];
+		const images = {};
 		var i = 0;
 		const create = (url) => {
-			const logo = `xxxxxxxx_${i++}_xxxxxxxx`;
-			images.push({ index: logo, url })
-			return logo
+			const key = `xxxxxxxx_${i++}_xxxxxxxx`;
+			images[key] = url
+			return key
 		}
 		canvas.objects.forEach((object: any) => {
 			if (object.thumbnail) {
@@ -317,11 +317,13 @@ export class CanvasManager {
 		return { canvas: JSON.stringify(canvas), images }
 	}
 	/** 处理JSON为正常画布 */
-	processCanvasDisUrlJSON(obj: { canvas: string, images: Object[] }) {
+	processCanvasDisUrlJSON(obj: { canvas: string, images: Object }) {
 		var json = obj.canvas;
-		const images = obj.images || []
-		images.forEach((v: any) => json = json.replace(new RegExp(v.index), v.url))
-		return JSON.parse(json)
+		const images = obj.images || {}
+		for (const key in images) {
+			json = json.replace(new RegExp(key), images[key])
+		}
+		return json
 	}
 	dispose() {
 		this.animationManager?.dispose()