diff --git a/src/api/login.ts b/src/api/user.ts
similarity index 83%
rename from src/api/login.ts
rename to src/api/user.ts
index d4ee3c9..01726bb 100644
--- a/src/api/login.ts
+++ b/src/api/user.ts
@@ -91,3 +91,20 @@ export const GetUserInfo = () => {
 		loading: true,
 	})
 }
+
+/**
+ * 更新用户拓展信息
+ * @param data 更新用户拓展信息的参数
+ * @param data.base 基础信息
+ * @param data.vibe 风格特点
+ * @param data.role 角色类型
+ * @returns 更新用户拓展信息成功的响应
+*/
+export const UpdateUserProfile = (data) => {
+	return request({
+		url: '/api/user/profile',
+		method: 'put',
+		data
+	})
+}
+
diff --git a/src/components/Canvas/FlowCanvas/components/cards/cards-select.vue b/src/components/Canvas/FlowCanvas/components/cards/cards-select.vue
index 510288e..ab4499e 100644
--- a/src/components/Canvas/FlowCanvas/components/cards/cards-select.vue
+++ b/src/components/Canvas/FlowCanvas/components/cards/cards-select.vue
@@ -14,6 +14,7 @@
 	import { ref, inject } from 'vue'
 	import { NODE_DATATYPE } from '../../tools/index.d'
 	const nodeManager = inject('nodeManager') as any
+	const stateManager = inject('stateManager') as any
 	const props = defineProps({
 		node: { required: true, type: Object }
 	})
@@ -46,9 +47,10 @@
 	const onClickItem = (v) => {
 		const id = props.node.id
 		if (!id) return
-		nodeManager.deleteNode(id)
+		stateManager.deleteNode(id)
 		nodeManager.createCardNode({ data: { type: v.type } })
 	}
+
 	defineExpose({})
 </script>
 
diff --git a/src/components/Canvas/FlowCanvas/components/cards/index.vue b/src/components/Canvas/FlowCanvas/components/cards/index.vue
index bde4e04..dc761cc 100644
--- a/src/components/Canvas/FlowCanvas/components/cards/index.vue
+++ b/src/components/Canvas/FlowCanvas/components/cards/index.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-	import { computed, ref, useAttrs } from 'vue'
+	import { computed, ref, useAttrs, onMounted, inject } from 'vue'
 	import CardsSelect from './cards-select.vue'
 	import ToRealStyle from './to-real-style.vue'
 	import SurfaceEdit from './surface-edit.vue'
@@ -32,9 +32,9 @@
 	import To3View from './to-3view.vue'
 	import To3DModel from './to-3d-model.vue'
 
-	import ToVideo from './to-video.vue'
-	import AddPrint from './add-print.vue'
-	import ToCAD from './to-cad.vue'
+	// import ToVideo from './to-video.vue'
+	// import AddPrint from './add-print.vue'
+	// import ToCAD from './to-cad.vue'
 	const components = [
 		{
 			type: 'cards-select',
@@ -73,23 +73,8 @@
 			title: 'To 3D Model',
 			component: To3DModel
 		}
-		// {
-		// 	type: 'to-video',
-		// 	title: 'To Video',
-		// 	component: ToVideo
-		// },
-		// {
-		// 	type: 'to-cad',
-		// 	title: 'To CAD',
-		// 	component: ToCAD
-		// },
-		// {
-		// 	type: 'add-print',
-		// 	title: 'Add Print',
-		// 	component: AddPrint
-		// }
 	]
-	const emit = defineEmits(['add', 'generate'])
+	const nodeManager = inject('nodeManager') as any
 	const props = defineProps({
 		type: {
 			type: String as () =>
@@ -101,6 +86,10 @@
 				| 'to-3d-model'
 				| 'to-3view',
 			default: 'to-real-style'
+		},
+		data: {
+			type: Object,
+			default: () => ({})
 		}
 	})
 	const attrs = useAttrs()
@@ -111,8 +100,21 @@
 	const onGenerateClick = () => {
 		const data = { ...componentRef.value.data }
 		console.log(data)
-		emit('generate')
+		nodeManager.createResultNode({
+			data: {
+				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__'
+				}
+			}
+		})
 	}
+	onMounted(() => {
+		for (const key in props.data) {
+			if (componentRef.value?.data?.hasOwnProperty(key)) {
+				componentRef.value.data[key] = props.data[key]
+			}
+		}
+	})
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/Canvas/FlowCanvas/components/header-tools.vue b/src/components/Canvas/FlowCanvas/components/header-tools.vue
index f72a80f..97eb499 100644
--- a/src/components/Canvas/FlowCanvas/components/header-tools.vue
+++ b/src/components/Canvas/FlowCanvas/components/header-tools.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="header-tools">
-		<span class="icon"><svg-icon name="c-mouse" size="16" /></span>
-		<span class="icon"><svg-icon name="c-hand" size="18" /></span>
-		<span class="icon"><svg-icon name="c-t" size="18" /></span>
+		<span class="icon" @click="emit('mouse')"><svg-icon name="c-mouse" size="16" /></span>
+		<span class="icon" @click="emit('hand')"><svg-icon name="c-hand" size="18" /></span>
+		<span class="icon" @click="emit('t')"><svg-icon name="c-t" size="18" /></span>
 		<span class="line"></span>
-		<span class="icon"><svg-icon name="c-undo" size="18" /></span>
-		<span class="icon"><svg-icon name="c-redo" size="18" /></span>
-		<button class="export">
+		<span class="icon" @click="emit('undo')"><svg-icon name="c-undo" size="18" /></span>
+		<span class="icon" @click="emit('redo')"><svg-icon name="c-redo" size="18" /></span>
+		<button class="export" @click="emit('export')">
 			<span class="icon"><svg-icon name="export" size="11" /></span>
 			<span class="text">Export</span>
 		</button>
@@ -19,7 +19,7 @@
 		zoom: { default: 1, type: Number },
 		step: { default: 0.1, type: Number }
 	})
-	const emit = defineEmits(['add', 'sub'])
+	const emit = defineEmits(['mouse', 'hand', 't', 'undo', 'redo', 'export'])
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/Canvas/FlowCanvas/components/node.vue b/src/components/Canvas/FlowCanvas/components/node.vue
index eba942a..c954e22 100644
--- a/src/components/Canvas/FlowCanvas/components/node.vue
+++ b/src/components/Canvas/FlowCanvas/components/node.vue
@@ -1,10 +1,31 @@
+<template>
+	<div class="node start" :class="{ center: posCenter }">
+		<template v-if="type === NODE_TYPE.INPUT">
+			<Handle type="source" id="Right" :position="Position.Right" />
+		</template>
+		<template v-else-if="type === NODE_TYPE.SECONDARY">
+			<Handle type="target" id="Left" :position="Position.Left" />
+			<Handle type="source" id="Right" :position="Position.Right" />
+		</template>
+		<template v-else-if="type === NODE_TYPE.OUTPUT">
+			<Handle type="target" id="Left" :position="Position.Left" />
+		</template>
+		<div class="item">
+			<slot></slot>
+		</div>
+		<div class="add" @mousedown.stop v-if="isAdd" @click="onAdd">
+			<svg-icon name="add" size="14" size-unit="px" />
+		</div>
+	</div>
+</template>
 <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 { computed } from 'vue'
 	const props = defineProps({
 		type: {
-			type: String as () => 'InputNode' | 'SecondaryNode',
+			type: String,
 			default: 'InputNode'
 		},
 		node: {
@@ -19,41 +40,29 @@
 	const nodes = computed(() => props.stateManager.nodes.value)
 	const firstNode = computed(() => nodes.value[0])
 	const lastNode = computed(() => nodes.value[nodes.value.length - 1])
-	const notAddNodeTypes = [NODE_DATATYPE.CARDS_SELECT]
 	const isAdd = computed(
-		() => props.node.id === lastNode.value.id && !notAddNodeTypes.includes(props.node.data.type)
+		() => props.node.id === lastNode.value.id && NODE_DATATYPE.RESULT_IMAGE === props.node.data.type
 	)
 	const onAdd = () => {
 		props.stateManager.nodeManager.createCardsSelect()
 	}
+	const posCenter = computed(() => {
+		const arr = [NODE_DATATYPE.RESULT_IMAGE]
+		return arr.includes(props.node?.data?.type)
+	})
 </script>
 
-<template>
-	<div class="node start">
-		<template v-if="type === 'InputNode'">
-			<Handle type="source" id="Right" :position="Position.Right" />
-		</template>
-		<template v-else-if="type === 'SecondaryNode'">
-			<Handle type="target" id="Left" :position="Position.Left" />
-			<Handle type="source" id="Right" :position="Position.Right" />
-		</template>
-		<div class="item">
-			<slot></slot>
-		</div>
-		<div class="add" @mousedown.stop v-if="isAdd" @click="onAdd">
-			<svg-icon name="add" size="14" size-unit="px" />
-		</div>
-	</div>
-</template>
-
 <style lang="less" scoped>
 	.node {
 		position: relative;
+		--top: 50px;
 		.vue-flow__handle {
-			width: 5px;
-			height: 5px;
-			top: 50px;
+			width: 12px;
+			height: 12px;
+			top: var(--top);
 			z-index: 10;
+			background: #b5b5b5;
+			border: 1px solid #ffffff;
 		}
 		> .item {
 			position: relative;
@@ -63,9 +72,8 @@
 			width: 32px;
 			height: 32px;
 			border: 2px solid #fff;
-			// bottom: -16px;
+			top: var(--top);
 			right: -16px;
-			top: 50%;
 			transform: translateY(-50%);
 			background-color: #ed8936;
 			border-radius: 50%;
@@ -78,5 +86,8 @@
 			cursor: pointer;
 			z-index: 20;
 		}
+		&.center {
+			--top: 50%;
+		}
 	}
 </style>
diff --git a/src/components/Canvas/FlowCanvas/components/result/result-image.vue b/src/components/Canvas/FlowCanvas/components/result/result-image.vue
index 2a69cf3..d99338b 100644
--- a/src/components/Canvas/FlowCanvas/components/result/result-image.vue
+++ b/src/components/Canvas/FlowCanvas/components/result/result-image.vue
@@ -16,10 +16,7 @@
 				<span class="text">Edit</span>
 			</button>
 		</div>
-		<img
-			class="image"
-			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__"
-		/>
+		<img class="image" :src="data.url" />
 		<div class="more" @click="showMenu = !showMenu" @mousedown.stop>
 			<svg-icon name="more" size="24" size-unit="px" color="#C9C9C9" />
 		</div>
@@ -40,10 +37,19 @@
 </template>
 
 <script setup lang="ts">
-	import { reactive, ref, onBeforeUnmount } from 'vue'
-	const showHeader = ref(true)
+	import { reactive, ref, onBeforeUnmount, useAttrs } from 'vue'
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: () => ({})
+		}
+	})
+	const attrs = useAttrs()
+	const showHeader = ref(!!attrs.node?.data?.isHeader)
 	const showMenu = ref(false)
-	const data = reactive({})
+	const data = reactive({
+		url: props.data?.url || ''
+	})
 	const menus = ref([
 		{ label: 'Copy', tip: 'Ctrl+C', on: () => {} },
 		{ label: 'Paste', tip: 'Ctrl+V', on: () => {} },
diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue
index 201466b..15fec53 100644
--- a/src/components/Canvas/FlowCanvas/flow-canvas.vue
+++ b/src/components/Canvas/FlowCanvas/flow-canvas.vue
@@ -11,27 +11,19 @@
 			@node-drag-stop="(e) => eventManager.handleNodeDragStop(e)"
 			@viewport-change="(e) => eventManager.handleViewportChange(e)"
 		>
-			<template #node-InputNode="nodeProps">
-				<node type="InputNode" :stateManager="stateManager" :node="nodeProps">
-					<component
-						:is="nodeProps.data.component"
-						:node="nodeProps"
-						v-bind="nodeProps.data"
-					/>
-				</node>
-			</template>
-			<template #node-SecondaryNode="nodeProps">
-				<node type="SecondaryNode" :stateManager="stateManager" :node="nodeProps">
+			<template v-for="v in nodeTypes" :key="v" #[`node-${v}`]="nodeProps">
+				<node :type="v" :stateManager="stateManager" :node="nodeProps">
 					<component
 						:is="nodeProps.data.component"
 						:node="nodeProps"
+						:data="nodeProps.data.data"
 						v-bind="nodeProps.data"
 					/>
 				</node>
 			</template>
 		</VueFlow>
 	</div>
-	<header-tools />
+	<header-tools @export="exportFlow" />
 	<zoom
 		:zoom="stateManager.zoom.value"
 		:step="0.1"
@@ -43,6 +35,7 @@
 <script setup lang="ts">
 	import { VueFlow, useVueFlow } from '@vue-flow/core'
 	import { useLayout } from '@/utils/treeDiagram'
+	import { NODE_TYPE } from './tools/index.d'
 	// 组件
 	import headerTools from './components/header-tools.vue'
 	import zoom from '../components/zoom.vue'
@@ -56,6 +49,7 @@
 	import { NodeManager } from './manager/NodeManager'
 
 	const vueFlow = ref<any>()
+	const nodeTypes = ref([NODE_TYPE.INPUT, NODE_TYPE.SECONDARY, NODE_TYPE.OUTPUT])
 
 	// 状态管理器
 	const stateManager = new StateManager({ vueFlow })
@@ -96,12 +90,22 @@
 		}, 0)
 	}
 
+	const exportFlow = () => {
+		// flowManager.exportFlow()
+		console.log(flowManager.exportFlow())
+	}
+
 	onMounted(() => {
-		window.vueFlow = vueFlow
-		window.nodes = nodes
-		nodeManager.createResultNode()
-		// nodeManager.createCardsSelect()
-		// nodeManager.createResultNode()
+		// window['vueFlow'] = vueFlow
+		// window['nodes'] = nodes
+		nodeManager.createResultNode({
+			data: {
+				isHeader: false,
+				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__'
+				}
+			}
+		})
 	})
 </script>
 <style lang="less">
diff --git a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
index 941ef3b..a67b651 100644
--- a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
@@ -21,7 +21,11 @@ export class NodeManager {
 
 	/** 删除节点 */
 	deleteNode(id: string) {
-		this.stateManager.nodes.value = this.stateManager.nodes.value.filter((node: any) => node.id !== id)
+		this.stateManager.deleteNode(id)
+	}
+	/** 添加节点 */
+	addNode(node: any) {
+		this.stateManager.addNode(node)
 	}
 
 	/** 创建节点 */
@@ -33,46 +37,47 @@ export class NodeManager {
 		const position = options.position ||
 			!lastNode ? { x: positionX, y: positionY } :
 			{ x: lastNode.position.x + lastNode.dimensions.width + 50 + positionX, y: lastNode.position.y + positionY }
-		const data = { ...(options?.data || {}) }
+		const data = options?.data || {}
 		data['component'] = options.component
 		const options_ = {
 			id,
 			position,
 			data
 		}
-		this.stateManager.nodes.value.push(options_)
+		this.addNode(options_)
 		return options_;
 	}
 	/** 创建结果节点 */
 	createResultNode(options?: NodeOptions) {
 		const options_ = {
+			...(options ? options : {}),
 			component: resultImage,
 			data: {
 				type: NODE_DATATYPE.RESULT_IMAGE,
+				isHeader: true,
 				...(options?.data || {}),
 			},
-			...(options ? options : {}),
 		}
 		return this.createNode(options_)
 	}
 	/** 创建卡片选择节点 */
 	createCardsSelect(options?: NodeOptions) {
 		const options_ = {
+			...(options ? options : {}),
 			component: card,
 			positionY: 50,
 			data: {
 				type: NODE_DATATYPE.CARDS_SELECT,
 				...(options?.data || {}),
 			},
-			...(options ? options : {}),
 		}
 		return this.createNode(options_)
 	}
 	/** 创建卡片节点 */
 	createCardNode(options?: NodeOptions) {
 		const options_ = {
-			component: card,
 			...(options ? options : {}),
+			component: card,
 		}
 		return this.createNode(options_)
 	}
diff --git a/src/components/Canvas/FlowCanvas/manager/StateManager.ts b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
index 27f36ab..601243f 100644
--- a/src/components/Canvas/FlowCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
@@ -1,5 +1,13 @@
 import { ref, computed } from "vue";
+import { NODE_TYPE } from '../tools/index.d'
 
+export interface NodesItem {
+	id: string
+	type: string
+	class: string
+	position: { x: number, y: number }
+	data: { component: any, type: string }
+}
 export class StateManager {
 	vueFlow: any
 	nodes: any
@@ -18,15 +26,7 @@ export class StateManager {
 	}
 	constructor(options) {
 		this.vueFlow = options.vueFlow
-		this.nodes = ref<any[]>([
-			// {
-			// 	id: '8',
-			// 	type: 'SecondaryNode',
-			// 	class: 'custom-node',
-			// 	position: { x: 0, y: 0 },
-			// 	data: { component: card, type: 'edit-material' }
-			// }
-		]);
+		this.nodes = ref<NodesItem[]>([]);
 		this.nodes_ = computed(() => {
 			return this.nodes.value.map((node, index) => {
 				const obj = {
@@ -34,10 +34,13 @@ export class StateManager {
 				}
 				if (index === 0) {
 					obj.class = 'custom-node start';
-					obj.type = 'InputNode';
+					obj.type = NODE_TYPE.INPUT;
+				} else if (index === this.nodes.value.length - 1) {
+					obj.class = 'custom-node end';
+					obj.type = NODE_TYPE.OUTPUT;
 				} else {
 					obj.class = 'custom-node';
-					obj.type = 'SecondaryNode';
+					obj.type = NODE_TYPE.SECONDARY;
 				}
 				return obj
 			})
@@ -53,7 +56,7 @@ export class StateManager {
 						id: `el-${id}-${target}`,
 						source: id,
 						target: target,
-						type: 'smoothstep'
+						type: 'output'
 					})
 				}
 			})
@@ -62,6 +65,14 @@ export class StateManager {
 
 		this.zoom = ref(1)
 	}
+	/** 添加节点 */
+	addNode(node: NodesItem) {
+		this.nodes.value.push(node)
+	}
+	/** 删除节点 */
+	deleteNode(id: string) {
+		this.nodes.value = this.nodes.value.filter((node: NodesItem) => node.id !== id)
+	}
 	getLastNode() {
 		return this.nodes.value[this.nodes.value.length - 1]
 	}
diff --git a/src/components/Canvas/FlowCanvas/tools/index.d.ts b/src/components/Canvas/FlowCanvas/tools/index.d.ts
index 8f01613..4e33fe6 100644
--- a/src/components/Canvas/FlowCanvas/tools/index.d.ts
+++ b/src/components/Canvas/FlowCanvas/tools/index.d.ts
@@ -1,3 +1,12 @@
+/**
+ * 节点类型
+ */
+export const NODE_TYPE = {
+	INPUT: 'InputNode',
+	SECONDARY: 'SecondaryNode',
+	OUTPUT: 'OutputNode',
+}
+
 /**
  * 节点数据类型
  */
@@ -10,4 +19,4 @@ export const NODE_DATATYPE = {
 	COLOR_PALETTE: 'color-palette',
 	TO_3VIEW: 'to-3view',
 	TO_3D_MODEL: 'to-3d-model',
-}
\ No newline at end of file
+}
diff --git a/src/ignoredWarning.ts b/src/ignoredWarning.ts
new file mode 100644
index 0000000..aa98087
--- /dev/null
+++ b/src/ignoredWarning.ts
@@ -0,0 +1,20 @@
+// 定义要忽略的警告关键词列表
+const ignoredWarnings = [
+	'`markRaw` or using `shallowRef` instead of `ref`',
+]
+
+/** 忽略组件响应式警告 */
+export default function (app) {
+	// 只忽略组件响应式警告
+	app.config.warnHandler = (msg, instance, trace) => {
+		// 检查是否包含要忽略的关键词
+		const shouldIgnore = ignoredWarnings.some(warning =>
+			msg.includes(warning)
+		)
+		// 如果不应该忽略，才输出警告
+		if (!shouldIgnore) {
+			console.warn(msg, instance, trace)
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 72485ab..f630064 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,7 +15,11 @@ import "./router/router-config"  // 路由守卫，做动态路由的地方
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
+import ignoredWarning from './ignoredWarning'
+
+
 const app = createApp(App)
+ignoredWarning(app)
 app.use(router)
 	.use(ElementPlus)
 	.use(store)
diff --git a/src/stores/userInfo.ts b/src/stores/userInfo.ts
index 00ba9ab..08e9b0b 100644
--- a/src/stores/userInfo.ts
+++ b/src/stores/userInfo.ts
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { removeLocal, setLocal } from '@/utils/local'
 import MyEvent from '@/utils/myEvent'
-import { Logout, GetUserInfo } from '@/api/login'
+import { Logout, GetUserInfo } from '@/api/user'
 export const useUserInfoStore = defineStore('userInfo', () => {
 	const state = ref({
 		userInfo: {},
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2c22a5e..72a467b 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -47,6 +47,7 @@
 		overflow: hidden;
 		display: flex;
 		user-select: none;
+
 		> .right-main {
 			flex: 1;
 			display: flex;
@@ -61,8 +62,10 @@
 			}
 		}
 	}
+
 	.bg-1 {
 		z-index: -1;
+		background: #f8f7f5;
 		animation: opacity-in 0.5s ease-in-out 1 both;
 	}
 	.bg-2 {
@@ -73,7 +76,6 @@
 		width: 100%;
 		height: 100%;
 		overflow: hidden;
-		// background-color: rgba(248, 247, 245, 1);
 		> * {
 			position: absolute;
 			border-radius: 50%;
diff --git a/src/views/home/setting/Profile.vue b/src/views/home/setting/Profile.vue
index a9f784c..0d6f1f0 100644
--- a/src/views/home/setting/Profile.vue
+++ b/src/views/home/setting/Profile.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="label">Region</div>
-		<dropdown-menu v-model="region" :list="regions" @change="changeRegion" />
+		<dropdown-menu v-model="base" :list="baseList" @change="changeBase" />
 	</div>
 	<div>
 		<div class="label">Role</div>
@@ -25,9 +25,10 @@
 	import dropdownMenu from '@/components/dropdown-menu.vue'
 	import { useUserInfoStore } from '@/stores'
 	import { useI18n } from 'vue-i18n'
+	const userInfoStore = useUserInfoStore()
 	const { locale } = useI18n()
-	const region = ref('China')
-	const regions = ref([
+	const base = ref(userInfoStore.state.userInfo.base)
+	const baseList = ref([
 		{ label: 'United States', value: 'United States' },
 		{ label: 'Singapore', value: 'Singapore' },
 		{ label: 'Australia', value: 'Australia' },
@@ -39,16 +40,17 @@
 		{ label: 'Canada', value: 'Canada' },
 		{ label: 'Germany', value: 'Germany' }
 	])
-	const changeRegion = (value: string) => {
+	const changeBase = (value: string) => {
 		console.log(value)
 	}
 
-	const role = ref('Designer')
+	const role = ref(userInfoStore.state.userInfo.role)
 	const roles = ref([
 		{ label: 'Designer', value: 'Designer' },
 		{ label: 'Student', value: 'Student' },
 		{ label: 'Teacher', value: 'Teacher' },
-		{ label: 'Parent', value: 'Parent' }
+		{ label: 'Parent', value: 'Parent' },
+		{ value: 'Other', label: 'Other' }
 	])
 	const changeRole = (value: string) => {
 		console.log(value)
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index cc20264..2835e1f 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -64,7 +64,7 @@
 
 <script setup lang="ts">
 	import md5 from 'md5'
-	import { Login } from '@/api/login'
+	import { Login } from '@/api/user'
 	import { computed, reactive, ref } from 'vue'
 	import { useRouter } from 'vue-router'
 	import { validateEmail, validatePass, validatePrivacy } from './tools'
diff --git a/src/views/login/register.vue b/src/views/login/register.vue
index 9582dd6..178961b 100644
--- a/src/views/login/register.vue
+++ b/src/views/login/register.vue
@@ -67,7 +67,7 @@
 
 <script setup lang="ts">
 	import md5 from 'md5'
-	import { Register } from '@/api/login'
+	import { Register } from '@/api/user'
 	import { computed, reactive, ref } from 'vue'
 	import { useRouter } from 'vue-router'
 	import { validateName, validateEmail, validatePass, validatePrivacy } from './tools'
diff --git a/src/views/login/retrieve-password.vue b/src/views/login/retrieve-password.vue
index 3199af3..0ecbe51 100644
--- a/src/views/login/retrieve-password.vue
+++ b/src/views/login/retrieve-password.vue
@@ -55,7 +55,7 @@
 
 <script setup lang="ts">
 	import md5 from 'md5'
-	import { ForgotPassword } from '@/api/login'
+	import { ForgotPassword } from '@/api/user'
 	import { computed, reactive, ref } from 'vue'
 	import { useRouter } from 'vue-router'
 	import { validateEmail, validatePass } from './tools'
diff --git a/src/views/login/visible-code.vue b/src/views/login/visible-code.vue
index 5687930..37c5f05 100644
--- a/src/views/login/visible-code.vue
+++ b/src/views/login/visible-code.vue
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 	import md5 from 'md5'
 	import { ElMessage } from 'element-plus'
-	import { SendVerificationCode } from '@/api/login'
+	import { SendVerificationCode } from '@/api/user'
 	import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 	import { CountDown } from '@/utils/tools'
 	import InputCode from '@/components/input-code.vue'
diff --git a/src/views/nuic/index.vue b/src/views/nuic/index.vue
index 9114474..618a849 100644
--- a/src/views/nuic/index.vue
+++ b/src/views/nuic/index.vue
@@ -32,6 +32,7 @@
 
 <script setup lang="ts">
 	import { computed, ref, markRaw } from 'vue'
+	import { UpdateUserProfile } from '@/api/user'
 	import nuic1 from './nuic-1.vue'
 	import nuic2 from './nuic-2.vue'
 	import nuic3 from './nuic-3.vue'
@@ -44,16 +45,38 @@
 	const onClose = () => {
 		router.push({ name: 'mainInput' })
 	}
-	const onNext = () => {
+	const onNext = (value) => {
 		const index = active.value + 1
-		if (index < list.length) {
-			router.push({ query: { index } })
-		} else {
-			loading.value = true
-			setTimeout(() => {
-				router.push({ name: 'mainInput' })
-			}, 5000)
+		const data = {
+			...route.query,
+			...(value ? value : {})
 		}
+		delete data.index
+		if (index < list.length) {
+			router.push({
+				query: {
+					...data,
+					index
+				}
+			})
+		} else {
+			onSubmit(data)
+		}
+	}
+	const onSubmit = (data) => {
+		loading.value = true
+		const stime = Date.now()
+		UpdateUserProfile(data)
+			.then((res) => {
+				if (!res) return (loading.value = false)
+				const time = stime - Date.now() + 3000
+				setTimeout(() => {
+					router.push({ name: 'mainInput' })
+				}, time)
+			})
+			.catch((err) => {
+				loading.value = false
+			})
 	}
 </script>
 
diff --git a/src/views/nuic/nuic-2.vue b/src/views/nuic/nuic-2.vue
index d461e78..1b6b85b 100644
--- a/src/views/nuic/nuic-2.vue
+++ b/src/views/nuic/nuic-2.vue
@@ -10,7 +10,7 @@
 			</div>
 		</div>
 		<div class="btns">
-			<button class="next" @click="emit('next')">{{ $t('Nuic.next') }}</button>
+			<button class="next" @click="onNext">{{ $t('Nuic.next') }}</button>
 			<button class="more" @click="onLoadMore">
 				<span>{{ $t('Nuic.loadMore') }}</span>
 				<div><svg-icon name="refresh-single" size="24" /></div>
@@ -34,6 +34,15 @@
 		{ id: 7, url: '/image/nuic/style-7.png', title: '沙发', active: false },
 		{ id: 8, url: '/image/nuic/style-8.png', title: '桌子', active: false }
 	])
+	const onNext = () => {
+		const data = {
+			vibe: list.value
+				.filter((v) => v.active)
+				.map((v) => v.id)
+				.join(',')
+		}
+		emit('next', data)
+	}
 	const onLoadMore = () => {}
 </script>
 
diff --git a/src/views/nuic/nuic-3.vue b/src/views/nuic/nuic-3.vue
index a7a4241..c27cc16 100644
--- a/src/views/nuic/nuic-3.vue
+++ b/src/views/nuic/nuic-3.vue
@@ -4,10 +4,10 @@
 
 		<div class="select-item">
 			<div class="title">{{ $t('Nuic.basedIn') }}</div>
-			<el-select v-model="data.based">
+			<el-select v-model="data.base">
 				<el-option
 					class="el-select__option"
-					v-for="v in data.basedList"
+					v-for="v in data.baseList"
 					:key="v.value"
 					:label="v.label"
 					:value="v.value"
@@ -27,7 +27,7 @@
 			</el-select>
 		</div>
 		<div class="btns">
-			<button class="next" @click="emit('next')">{{ $t('Nuic.allSet') }}</button>
+			<button class="next" @click="onNext">{{ $t('Nuic.allSet') }}</button>
 		</div>
 	</div>
 </template>
@@ -38,21 +38,35 @@
 	const router = useRouter()
 	const emit = defineEmits(['next'])
 	const data = reactive({
-		basedList: [
-			{ value: '1', label: 'Student' },
-			{ value: '2', label: 'Teacher' },
-			{ value: '3', label: 'Parent' },
-			{ value: '4', label: 'Other' }
+		baseList: [
+			{ label: 'United States', value: 'United States' },
+			{ label: 'Singapore', value: 'Singapore' },
+			{ label: 'Australia', value: 'Australia' },
+			{ label: 'South Korea', value: 'South Korea' },
+			{ label: 'China', value: 'China' },
+			{ label: 'Italy', value: 'Italy' },
+			{ label: 'France', value: 'France' },
+			{ label: 'Japan', value: 'Japan' },
+			{ label: 'Canada', value: 'Canada' },
+			{ label: 'Germany', value: 'Germany' }
 		],
 		roleList: [
-			{ value: '1', label: 'Student' },
-			{ value: '2', label: 'Teacher' },
-			{ value: '3', label: 'Parent' },
-			{ value: '4', label: 'Other' }
+			{ label: 'Designer', value: 'Designer' },
+			{ value: 'Student', label: 'Student' },
+			{ value: 'Teacher', label: 'Teacher' },
+			{ value: 'Parent', label: 'Parent' },
+			{ value: 'Other', label: 'Other' }
 		],
-		based: '',
-		role: ''
+		base: 'China',
+		role: 'Student'
 	})
+	const onNext = () => {
+		const data_ = {
+			base: data.base,
+			role: data.role
+		}
+		emit('next', data_)
+	}
 </script>
 
 <style lang="less" scoped>