上传头像 部分卡片加入模型选择

src/components/Canvas/FlowCanvas/components/nodes/cards/color-palette.vue

@@ -1,6 +1,8 @@
 <template>
 	<!-- 颜色调色板 -->
 	<div class="color-palette">
+		<p class="label">Mode</p>
+		<my-select v-model="data.mode" :list="modeList" />
 		<p class="label">Choose Color</p>
 		<div class="color-list">
 			<div
@@ -24,7 +26,8 @@
 <script setup lang="ts">
 	import { reactive, onMounted, ref } from 'vue'
 	const data = reactive({
-		colors: []
+		colors: [],
+		mode: 'Advanced',
 	})
 	const emit = defineEmits(['update-data'])
 	const maxColor = 5
@@ -41,11 +44,15 @@
 		const target = e.target as HTMLInputElement
 		data.colors.push(target.value)
 	}
-
+	const modeList = ref([
+		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Normal', label: 'Normal' }
+	])
 	const getApiData = ()=>{
 		return {
 			variantCount: '2',
-			colors: data.colors
+			colors: data.colors,
+			mode: data.mode,
 		}
 	}
 

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

@@ -36,7 +36,7 @@
 	import To3View from './to-3view.vue'
 	import To3DModel from './to-3d-model.vue'
 
-	import { toRealStyleApi, toColorPaletteApi, toSceneCompositionApi } from '@/api/flow-canvas'
+	import { toRealStyleApi, toColorPaletteApi, toSceneCompositionApi, sketchAddPrintApi, sketchToThreeApi, threeToThreeViewsApi } from '@/api/flow-canvas'
 
 	// import ToVideo from './to-video.vue'
 	// import AddPrint from './add-print.vue'
@@ -62,6 +62,7 @@
 			type: NODE_DATATYPE.SURFACE_EDIT,
 			title: 'Surface Edit',
 			component: SurfaceEdit,
+			api: sketchAddPrintApi
 		},
 		{
 			tier: NODE_DATATIER.SCENE_COMPOSITION,
@@ -81,13 +82,15 @@
 			tier: NODE_DATATIER.TO_3D_MODEL,
 			type: NODE_DATATYPE.TO_3D_MODEL,
 			title: 'To 3D Model',
-			component: To3DModel
+			component: To3DModel,
+			api:sketchToThreeApi
 		},
 		{
 			tier: NODE_DATATIER.TO_3VIEW,
 			type: NODE_DATATYPE.TO_3VIEW,
 			title: 'To 3-View',
-			component: To3View
+			component: To3View,
+			api:threeToThreeViewsApi
 		}
 	]
 	const nodeManager = inject('nodeManager') as any
@@ -133,7 +136,7 @@
 			...data,
 		}
 		const taskList = await currentComponent.value.api(apiData).then((rv)=>{
-			return rv
+			return [rv]
 		}) || []
 		// const taskList = [{taskId:'123'}]
 		// if (!subordNode) {

src/components/Canvas/FlowCanvas/components/nodes/cards/scene-composition.vue

@@ -3,6 +3,8 @@
 	<div class="scene-composition">
 		<p class="label">Prompt</p>
 		<my-textarea v-model="data.prompt" />
+		<p class="label">Mode</p>
+		<my-select v-model="data.mode" :list="modeList" />
 		<p class="label">Choose Style</p>
 		<div class="style-list">
 			<div
@@ -47,8 +49,13 @@
 	])
 	const data = reactive({
 		prompt: '',
-		styles: ['Colorful', 'Modernist']
+		styles: ['Colorful', 'Modernist'],
+		mode: 'Advanced',
 	})
+	const modeList = ref([
+		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Normal', label: 'Normal' }
+	])
 	const onClickStyle = (value: string) => {
 		if (data.styles.includes(value)) {
 			data.styles = data.styles.filter((v) => v !== value)
@@ -60,6 +67,7 @@
 		return {
 			styles: data.styles,
 			userPrompt: data.prompt,
+			mode: data.mode,
 		}
 	}
 	defineExpose({ data, getApiData })

src/components/Canvas/FlowCanvas/components/nodes/cards/surface-edit.vue

@@ -3,21 +3,35 @@
 	<div class="surface-edit">
 		<p class="label">Image</p>
 		<upload-file v-model="data.file" />
+		<p class="label">Mode</p>
+		<my-select v-model="data.mode" :list="modeList" />
 		<p class="label">Prompt</p>
 		<my-textarea v-model="data.prompt" />
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { reactive, onMounted } from 'vue'
+	import { reactive, ref, onMounted } from 'vue'
 	import myTextarea from '../../tools/my-textarea.vue'
 	import uploadFile from '../../tools/upload-file.vue'
+	import mySelect from '../../tools/my-select.vue'
 	const data = reactive({
 		prompt: '',
-		file: null
+		file: null,
+		mode: 'Advanced',
 	})
-
-	defineExpose({ data })
+	const modeList = ref([
+		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Normal', label: 'Normal' }
+	])
+	const getApiData = ()=>{
+		return {
+			mode: data.mode,
+			surFaceUrl: data.file,
+			userPrompt: data.prompt,
+		}
+	}
+	defineExpose({ data,getApiData })
 </script>
 
 <style lang="less" scoped>

src/components/Canvas/FlowCanvas/components/nodes/cards/to-3d-model.vue

@@ -3,30 +3,38 @@
 	<div class="to-3d-model">
 		<p class="label">Image</p>
 		<div class="image">
-			<img src="https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__" alt="">
+			<img :src="data.url" alt="">
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { reactive, onMounted } from 'vue'
+	import { reactive, onMounted, useAttrs } from 'vue'
 	import uploadFile from '../../tools/upload-file.vue'
-	const data = reactive({
-		file: null
-	})
+	const attrs = useAttrs()
 
-	defineExpose({ data })
+	const data = reactive({
+		url: attrs.node?.data?.originalImage,
+	})
+	const getApiData = ()=>{
+		return {
+			imageUrls: [data.url],
+		}
+	}
+	defineExpose({ data,getApiData })
 </script>
 
 <style lang="less" scoped>
 	.to-3d-model {
 		> .image {
-			padding: 18px;
+			padding: 6px;
 			border-radius: 10px;
 			background-color: #f0f0f0;
 			>img{
 				width: 100%;
 				height: auto;
+				max-height: 87px;
+				object-fit: contain;
 			}
 		}
 	}

src/components/Canvas/FlowCanvas/components/nodes/cards/to-real-style.vue

@@ -48,13 +48,13 @@
 		}
 	])
 	const modeList = ref([
-		{ value: 'Fast', label: 'Fast' },
+		{ value: 'Advanced', label: 'Advanced' },
 		{ value: 'Normal', label: 'Normal' }
 	])
 	const data = reactive({
 		prompt: '',
 		pixelRatio: '1:1',
-		mode: 'Normal',
+		mode: 'Advanced',
 	})
 
 	const getApiData = ()=>{

src/components/Canvas/FlowCanvas/components/tools/upload-file.vue

@@ -16,6 +16,7 @@
 
 <script setup lang="ts">
 	import { reactive, computed } from 'vue'
+	import { uploadImage } from '@/api/upload'
 	const emit = defineEmits(['update:modelValue', 'change'])
 	const props = defineProps({
 		modelValue: { type: [File, Object, String, null] },
@@ -44,7 +45,12 @@
 		input.accept = 'image/png, image/jpeg, image/jpg'
 		input.addEventListener('change', (e) => {
 			const file = e.target.files[0]
-			if (file) onChange(file)
+			const formData = new FormData()
+			formData.append('file', file)
+
+			uploadImage(formData).then((res) => {
+				if (res) onChange(res)
+			})
 		})
 		input.click()
 	}

src/components/Canvas/FlowCanvas/index.vue

@@ -16,7 +16,7 @@
 	const open = async (options) => {
 		let json = []
 		await new Promise((resolve) => {
-			getSketchFlowCanvas({ id: options.imgId }).then((res:any) => {
+			getSketchFlowCanvas({ id: options.imgId },true).then((res:any) => {
 				if (res) {
 					json = JSON.parse(res)
 				}
@@ -34,7 +34,7 @@
 		await new Promise((resolve) => {
 			putSketchFlowCanvas({ 
 				id: config.value.imgId,
-				canvasData: str }).then(() => {
+				canvasData: str },true).then(() => {
 				resolve(true)
 			}).catch(() => {
 				resolve(true)

src/components/MyInfo.vue

@@ -13,7 +13,7 @@
 			popper-style="width:auto; min-width: 22rem; padding: 0.8rem; border-radius: 1.4rem;"
 		>
 			<template #reference>
-				<img class="pic" src="@/assets/images/pic.jpg" />
+				<img class="pic" :src="userInfoStore.state.userInfo?.avatar || '@/assets/images/pic.jpg'" />
 			</template>
 			<div class="menu-box">
 				<div>
@@ -97,6 +97,7 @@
 			width: 4.65rem;
 			height: 4.65rem;
 			border-radius: 50%;
+			object-fit: cover;
 		}
 	}
 	.menu-box {