画布 选择卡片层级

src/api/user.ts

@@ -100,10 +100,11 @@ export const GetUserInfo = () => {
  * @param data.role 角色类型
  * @returns 更新用户拓展信息成功的响应
 */
-export const UpdateUserProfile = (data) => {
+export const UpdateUserProfile = (data, loading = false) => {
 	return request({
 		url: '/api/user/profile',
 		method: 'put',
+		loading,
 		data
 	})
 }

src/components/Canvas/FlowCanvas/components/cards/cards-select.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 高级工具选择 -->
 	<div class="cards-select">
-		<div v-for="v in list" :key="v.type" @click="onClickItem(v)">
+		<div v-for="v in list" :key="v.type" @click="onClickItem(v)" v-show="v.tier === tier">
 			<span class="icon">
 				<svg-icon :name="v.type + '-2'" size="15" size-unit="px" />
 			</span>
@@ -11,36 +11,44 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, inject } from 'vue'
+	import { ref, inject, computed } from 'vue'
-	import { NODE_DATATYPE } from '../../tools/index.d'
+	import { NODE_DATATYPE, NODE_DATATIER } from '../../tools/index.d'
 	const nodeManager = inject('nodeManager') as any
 	const stateManager = inject('stateManager') as any
 	const props = defineProps({
-		node: { required: true, type: Object }
+		node: { required: true, type: Object },
+		tier: { default: 1, type: Number }
 	})
+	console.log(props.tier, props.node)
 	const list = ref([
 		{
+			tier: NODE_DATATIER.TO_REAL_STYLE,
 			type: NODE_DATATYPE.TO_REAL_STYLE,
 			title: 'To Real Style'
 		},
 		{
+			tier: NODE_DATATIER.SURFACE_EDIT,
 			type: NODE_DATATYPE.SURFACE_EDIT,
 			title: 'Surface Edit'
 		},
 		{
+			tier: NODE_DATATIER.SCENE_COMPOSITION,
 			type: NODE_DATATYPE.SCENE_COMPOSITION,
 			title: 'Scene Composition'
 		},
 		{
+			tier: NODE_DATATIER.COLOR_PALETTE,
 			type: NODE_DATATYPE.COLOR_PALETTE,
 			title: 'Color Palette'
 		},
 		{
+			tier: NODE_DATATIER.TO_3VIEW,
 			type: NODE_DATATYPE.TO_3VIEW,
 			title: 'To 3-View'
 		},
 		{
-			type: 'to-3d-model',
+			tier: NODE_DATATIER.TO_3D_MODEL,
+			type: NODE_DATATYPE.TO_3D_MODEL,
 			title: 'To 3D Model'
 		}
 	])

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

@@ -23,6 +23,7 @@
 </template>
 
 <script setup lang="ts">
+	import { NODE_DATATYPE, NODE_DATATIER } from '../../tools/index.d'
 	import { computed, ref, useAttrs, onMounted, inject } from 'vue'
 	import CardsSelect from './cards-select.vue'
 	import ToRealStyle from './to-real-style.vue'
@@ -37,39 +38,46 @@
 	// import ToCAD from './to-cad.vue'
 	const components = [
 		{
-			type: 'cards-select',
+			tier: NODE_DATATIER.CARDS_SELECT,
+			type: NODE_DATATYPE.CARDS_SELECT,
 			title: 'Advanced Tools',
 			component: CardsSelect,
 			hideFooter: true,
 			hideIcon: true
 		},
 		{
-			type: 'to-real-style',
+			tier: NODE_DATATIER.TO_REAL_STYLE,
+			type: NODE_DATATYPE.TO_REAL_STYLE,
 			title: 'To Real Style',
 			component: ToRealStyle
 		},
 		{
-			type: 'surface-edit',
+			tier: NODE_DATATIER.SURFACE_EDIT,
+			type: NODE_DATATYPE.SURFACE_EDIT,
 			title: 'Surface Edit',
 			component: SurfaceEdit
 		},
 		{
-			type: 'scene-composition',
+			tier: NODE_DATATIER.SCENE_COMPOSITION,
+			type: NODE_DATATYPE.SCENE_COMPOSITION,
 			title: 'Scene Composition',
 			component: SceneComposition
 		},
 		{
-			type: 'color-palette',
+			tier: NODE_DATATIER.COLOR_PALETTE,
+			type: NODE_DATATYPE.COLOR_PALETTE,
 			title: 'Color Palette',
 			component: ColorPalette
 		},
 		{
-			type: 'to-3view',
+			tier: NODE_DATATIER.TO_3VIEW,
+			type: NODE_DATATYPE.TO_3VIEW,
 			title: 'To 3-View',
 			component: To3View
 		},
 		{
-			type: 'to-3d-model',
+			tier: NODE_DATATIER.TO_3D_MODEL,
+			type: NODE_DATATYPE.TO_3D_MODEL,
 			title: 'To 3D Model',
 			component: To3DModel
 		}
@@ -99,9 +107,9 @@
 	const componentRef = ref(null)
 	const onGenerateClick = () => {
 		const data = { ...componentRef.value.data }
-		console.log(data)
 		nodeManager.createResultNode({
 			data: {
+				tier: currentComponent.value.tier,
 				data: {
 					url: '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__'
 				}

src/components/Canvas/FlowCanvas/components/node.vue

@@ -21,7 +21,7 @@
 <script lang="ts" setup>
 	import { Handle, Position } from '@vue-flow/core'
 	import { NODE_TYPE } from '../tools/index.d'
-	import { NODE_DATATYPE } from '../tools/index.d'
+	import { NODE_DATATYPE, NODE_DATATIER } from '../tools/index.d'
 	import { computed } from 'vue'
 	const props = defineProps({
 		type: {
@@ -40,11 +40,16 @@
 	const nodes = computed(() => props.stateManager.nodes.value)
 	const firstNode = computed(() => nodes.value[0])
 	const lastNode = computed(() => nodes.value[nodes.value.length - 1])
+	const tier = computed(() => Number(props.node?.data?.tier || 0))
 	const isAdd = computed(
-		() => props.node.id === lastNode.value.id && NODE_DATATYPE.RESULT_IMAGE === props.node.data.type
+		() =>
+			props.node.id === lastNode.value.id &&
+			NODE_DATATYPE.RESULT_IMAGE === props.node.data.type &&
+			!(tier.value === NODE_DATATIER.TO_3D_MODEL)
 	)
 	const onAdd = () => {
-		props.stateManager.nodeManager.createCardsSelect()
+		const tier_ = tier.value + 1
+		props.stateManager.nodeManager.createCardsSelect({ data: { tier: tier_ } })
 	}
 	const posCenter = computed(() => {
 		const arr = [NODE_DATATYPE.RESULT_IMAGE]

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

@@ -48,6 +48,7 @@
 	const showHeader = ref(!!attrs.node?.data?.isHeader)
 	const showMenu = ref(false)
 	const data = reactive({
+		tier: props.data?.tier || 0,
 		url: props.data?.url || ''
 	})
 	const menus = ref([

src/components/Canvas/FlowCanvas/manager/NodeManager.ts

@@ -53,6 +53,7 @@ export class NodeManager {
 			...(options ? options : {}),
 			component: resultImage,
 			data: {
+				tier: 0,
 				type: NODE_DATATYPE.RESULT_IMAGE,
 				isHeader: true,
 				...(options?.data || {}),
@@ -67,6 +68,7 @@ export class NodeManager {
 			component: card,
 			positionY: 50,
 			data: {
+				tier: 1,
 				type: NODE_DATATYPE.CARDS_SELECT,
 				...(options?.data || {}),
 			},

src/components/Canvas/FlowCanvas/tools/index.d.ts

@@ -20,3 +20,16 @@ export const NODE_DATATYPE = {
 	TO_3VIEW: 'to-3view',
 	TO_3D_MODEL: 'to-3d-model',
 }
+/**
+ * 节点数据层级
+ */
+export const NODE_DATATIER = {
+	RESULT_IMAGE: 0,
+	CARDS_SELECT: 0,
+	TO_REAL_STYLE: 1,
+	SURFACE_EDIT: 1,
+	SCENE_COMPOSITION: 2,
+	COLOR_PALETTE: 2,
+	TO_3VIEW: 2,
+	TO_3D_MODEL: 3,
+}

src/views/home/setting/Profile.vue

@@ -24,6 +24,7 @@
 	import { computed, ref, onBeforeUnmount, inject } from 'vue'
 	import dropdownMenu from '@/components/dropdown-menu.vue'
 	import { useUserInfoStore } from '@/stores'
+	import { UpdateUserProfile } from '@/api/user'
 	import { useI18n } from 'vue-i18n'
 	const userInfoStore = useUserInfoStore()
 	const { locale } = useI18n()
@@ -41,7 +42,7 @@
 		{ label: 'Germany', value: 'Germany' }
 	])
 	const changeBase = (value: string) => {
-		console.log(value)
+		onSubmit({ base: value })
 	}
 
 	const role = ref(userInfoStore.state.userInfo.role)
@@ -53,17 +54,28 @@
 		{ value: 'Other', label: 'Other' }
 	])
 	const changeRole = (value: string) => {
-		console.log(value)
+		onSubmit({ role: value })
 	}
 
-	const agent = ref('Partner')
+	const agent = ref("Partner")
 	const agents = ref([
 		{ label: 'Partner', value: 'Partner' },
 		{ label: 'Observer', value: 'Observer' },
 		{ label: 'Mentor', value: 'Mentor' }
 	])
 	const changeAgent = (value: string) => {
-		console.log(value)
+		// onSubmit({ agent: value })
+	}
+	const onSubmit = (value = {}) => {
+		const data = {
+			// base: userInfoStore.state.userInfo.base,
+			// role: userInfoStore.state.userInfo.role,
+			// vibe: userInfoStore.state.userInfo.vibe,
+			...value
+		}
+		UpdateUserProfile(data, true)
+			.then((res) => {})
+			.catch((err) => {})
 	}
 </script>