画布图片预览

src/components/Canvas/FlowCanvas/components/header-tools.vue

@@ -102,7 +102,7 @@
 			border-radius: 0.4rem;
 			&:not(.disabled).active,
 			&:not(.disabled):hover {
-				background-color: #dfdfdf;
+				background-color: #ebebeb;
 			}
 			&.disabled {
 				opacity: 0.5;

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

@@ -1,22 +1,26 @@
 <template>
 	<!-- 结果图片 -->
 	<div class="result-image">
-		<div class="header" v-show="showHeader">
+		<div class="header" v-show="showHeader" @mousedown.stop>
 			<span class="icon">
-				<svg-icon name="chat-compose" size="24" size-unit="px" />
+				<svg-icon name="chat-compose" size="20" size-unit="px" />
 			</span>
-			<span class="icon">
-				<svg-icon name="expand-lg" size="24" size-unit="px" />
+			<span class="icon" @click="onPreview">
+				<svg-icon name="expand-lg" size="20" size-unit="px" />
 			</span>
-			<span class="icon">
-				<svg-icon name="download" size="24" size-unit="px" />
+			<span class="icon" @click="onDownload">
+				<svg-icon name="download" size="20" size-unit="px" />
 			</span>
 			<button class="edit">
 				<span class="icon"><svg-icon name="edit" size="11" /></span>
 				<span class="text">Edit</span>
 			</button>
 		</div>
-		<img class="image" :src="data.url" :style="{transform: `scale(${data?.scale?.x || 1}, ${data?.scale?.y || 1})`}" />
+		<img
+			class="image"
+			:src="data.url"
+			:style="{ transform: `scale(${data?.scale?.x || 1}, ${data?.scale?.y || 1})` }"
+		/>
 		<div class="more" @click="showMenu = !showMenu" @mousedown.stop>
 			<svg-icon name="more" size="24" size-unit="px" color="#C9C9C9" />
 		</div>
@@ -37,7 +41,9 @@
 </template>
 
 <script setup lang="ts">
+	import { downloadImage } from '../../../tools/tools'
 	import { reactive, ref, onBeforeUnmount, useAttrs, inject, watch } from 'vue'
+	const openImagePreview = inject('openImagePreview') as (url: string) => void
 	const props = defineProps({
 		config: {
 			type: Object,
@@ -48,13 +54,19 @@
 			default: () => ({})
 		}
 	})
-	const emit = defineEmits(['delete-node', 'copy-node', 'bring-to-font', 'send-to-back', 'update-data'])
+	const emit = defineEmits([
+		'delete-node',
+		'copy-node',
+		'bring-to-font',
+		'send-to-back',
+		'update-data'
+	])
 	const attrs = useAttrs()
 	const showHeader = ref(!!attrs.node?.data?.isHeader)
 	const showMenu = ref(false)
 	const data = reactive({
 		url: props.data?.url || '',
-		scale: props.data?.scale || { x:1,y:1 }
+		scale: props.data?.scale || { x: 1, y: 1 }
 	})
 	watch(
 		() => props.data.url,
@@ -71,12 +83,44 @@
 			disabled: !!props.config?.disableDelete
 		},
 		{ isDivide: true },
-		{ label: 'Bring to font', tip: '', on: () => {emit('bring-to-font')} },
-		{ label: 'Send to back', tip: '', on: () => {emit('send-to-back')} },
+		{
+			label: 'Bring to font',
+			tip: '',
+			on: () => {
+				emit('bring-to-font')
+			}
+		},
+		{
+			label: 'Send to back',
+			tip: '',
+			on: () => {
+				emit('send-to-back')
+			}
+		},
 		{ isDivide: true },
-		{ label: 'Flip horizontal', tip: '', on: () => {data.scale.x = -data.scale.x; emit('update-data',data)} },
-		{ label: 'Flip vertical', tip: '', on: () => {data.scale.y = -data.scale.y; emit('update-data',data)} }
+		{
+			label: 'Flip horizontal',
+			tip: '',
+			on: () => {
+				data.scale.x = -data.scale.x
+				emit('update-data', data)
+			}
+		},
+		{
+			label: 'Flip vertical',
+			tip: '',
+			on: () => {
+				data.scale.y = -data.scale.y
+				emit('update-data', data)
+			}
+		}
 	])
+	const onPreview = () => {
+		openImagePreview(data.url)
+	}
+	const onDownload = () => {
+		downloadImage(data.url, 'image.png')
+	}
 	const onMenuItem = (v) => {
 		if (v.disabled) return
 		v.on && v.on()
@@ -101,7 +145,7 @@
 		padding: 25px 6px;
 		user-select: none;
 		background-color: #fff;
-		&.active{
+		&.active {
 			box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05), 0 0 0 2px #d9d9d9;
 		}
 		> .header {
@@ -126,12 +170,12 @@
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				width: 30px;
-				height: 30px;
+				width: 32px;
+				height: 32px;
 				--svg-icon-color: #000;
-				border-radius: 4px;
+				border-radius: 3px;
 				&:hover {
-					background-color: #dfdfdf;
+					background-color: #ebebeb;
 				}
 			}
 			> .edit {

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

@@ -52,6 +52,7 @@
 		@sub="(e) => flowManager.setZoom(e)"
 		@home="() => fitView({ maxZoom: 1 })"
 	/>
+	<image-preview ref="imagePreviewRef" />
 </template>
 
 <script setup lang="ts">
@@ -62,6 +63,7 @@
 	// 组件
 	import headerTools from './components/header-tools.vue'
 	import zoom from '../components/zoom.vue'
+	import imagePreview from '../components/image-preview.vue'
 	// 节点
 	import node from './components/node.vue'
 	import resultImage from './components/nodes/result-image.vue'
@@ -181,6 +183,13 @@
 		}
 	}
 
+	const imagePreviewRef = ref<any>()
+	/** 打开图片预览 */
+	const openImagePreview = (url: string) => {
+		imagePreviewRef.value.open(url)
+	}
+	provide('openImagePreview', openImagePreview)
+
 	onMounted(() => {
 		// window['vueFlow'] = vueFlow
 		// window['nodes'] = nodes