深度画布初始化loading

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

@@ -53,7 +53,7 @@
 		zoom: { default: 1, type: Number },
 		step: { default: 0.1, type: Number }
 	})
-	const emit = defineEmits(['export', 'export-local', 'import-local', 'export-close', 'workbench'])
+	const emit = defineEmits(['export', 'workbench'])
 	const importLocalImage = inject('importLocalImage') as (isRecord?: boolean) => void
 	const stateManager = inject('stateManager') as any
 	const toolManager = inject('toolManager') as any

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

@@ -6,12 +6,7 @@
 		<template v-if="isReady">
 			<layer-panel />
 			<details-panel />
-			<depth-header-tools
+			<depth-header-tools @export="exportCanvas" @workbench="(v) => emit('workbench', v)" />
-				@export="exportCanvas"
-				@export-local="exportCanvasToLocalStorage"
-				@import-local="importCanvasFromLocalStorage"
-				@workbench="(v) => emit('workbench', v)"
-			/>
 			<brush-control-panel :currentTool="toolManager.currentTool.value" />
 			<zoom
 				:zoom="canvasManager.currentZoom.value / 100"
@@ -44,6 +39,9 @@
 	import { KeyEventManager } from './manager/events/KeyEventManager'
 	import { ObjectManager } from './manager/ObjectManager'
 
+	import { useGlobalStore } from '@/stores'
+	const globalStore = useGlobalStore()
+
 	const emit = defineEmits(['workbench', 'close'])
 	const props = defineProps({
 		config: {
@@ -88,6 +86,7 @@
 
 	const observer = ref(null)
 	onMounted(async () => {
+		globalStore.setLoading(true)
 		keyEventManager.registerEvents()
 		const url = props.config.url || ''
 		const json = props.config.json || ''
@@ -100,6 +99,7 @@
 			url: json ? '' : url
 		})
 		if (json) await canvasManager.loadJSON(json)
+		globalStore.setLoading(false)
 
 		stateManager.onMounted()
 		canvasManager.onMounted()
@@ -162,38 +162,20 @@
 
 	const exportCanvas = () => {
 		// 导出图片
-		// exportCanvasToImage(canvasManager.canvas).then((url) => {
+		exportCanvasToImage(canvasManager.canvas).then((url) => {
-		// 	const a = document.createElement('a')
+			const a = document.createElement('a')
-		// 	a.href = url
+			a.href = url
-		// 	a.download = 'canvas.png'
+			a.download = 'canvas.png'
-		// 	a.click()
+			a.click()
-		// })
+		})
 
-		console.log(canvasManager.getCanvasJSON())
+		// console.log(canvasManager.getCanvasJSON())
 
 		// const object = canvasManager.getCanvasDisUrlJSON()
 		// console.log(object)
 		// const canvas = canvasManager.processCanvasDisUrlJSON(object)
 		// console.log(canvas)
 	}
-	// 导出到本地存储
-	const exportCanvasToLocalStorage = () => {
-		const json = canvasManager.getCanvasJSON()
-		localStorage.setItem('canvasJSON', json)
-	}
-	// 从本地存储导入
-	const importCanvasFromLocalStorage = () => {
-		const json = localStorage.getItem('canvasJSON')
-		if (!json) return
-		canvasManager.loadJSON(json).then((success) => {
-			if (success) {
-				console.log('导入成功')
-			} else {
-				console.log('导入失败')
-			}
-			stateManager.clearState(true)
-		})
-	}
 </script>
 <style lang="less">
 	@import '@vue-flow/core/dist/style.css';

src/components/Canvas/DepthCanvas/index.vue

@@ -28,7 +28,7 @@
 		dialogVisible.value = false
 		const json = options.json
 		sessionStorage.setItem('canvasJson_' + config.value.id, json)
-		config.value.onWorkbench?.({ url: options.url, json })
+		config.value.onWorkbench?.({ url: options.url })
 	}
 	// 关闭
 	const onClose = () => {