diff --git a/src/api/login.ts b/src/api/login.ts
index a5aa808..9669560 100644
--- a/src/api/login.ts
+++ b/src/api/login.ts
@@ -5,6 +5,8 @@ import request from '@/utils/request'
  * 发送验证码
  * @param params 发送验证码的参数
  * @param params.email 邮箱
+ * @param params.type 验证码类型
+ * @param params.password 密码
  * @returns 验证码发送成功的响应
  */
 export const SendVerificationCode = (params) => {
@@ -36,7 +38,7 @@ export const Register = (data) => {
 /**
  * 登录用户
  * @param data 登录用户的参数
- * @param data.username 姓名
+ * @param data.email 邮箱
  * @param data.password 密码
  * @param data.verificationCode 验证码
  * @returns 登录成功后的token
@@ -48,4 +50,20 @@ export const Login = (data) => {
 		loading: true,
 		data
 	})
-}
\ No newline at end of file
+}
+/**
+ * 忘记密码
+ * @param data 忘记密码的参数
+ * @param data.email 邮箱
+ * @param data.password 密码
+ * @param data.verificationCode 验证码
+ * @returns 忘记密码成功后的token
+*/
+export const ForgetPassword = (data) => {
+	return request({
+		url: '/api/user/forget-password',
+		method: 'post',
+		loading: true,
+		data
+	})
+}
diff --git a/src/components/Canvas/CanvasTest.vue b/src/components/Canvas/CanvasTest.vue
index 332d77c..4967af9 100644
--- a/src/components/Canvas/CanvasTest.vue
+++ b/src/components/Canvas/CanvasTest.vue
@@ -9,6 +9,9 @@
 					transform: `scale(${data.scale})`
 				}"
 			>
+
+				<result-image />
+				
 				<card type="cards-select" />
 
 				<card type="to-real-style" />
diff --git a/src/components/Canvas/FlowCanvas/components/cards/cards-select.vue b/src/components/Canvas/FlowCanvas/components/cards/cards-select.vue
index eb81762..ec0eb8e 100644
--- a/src/components/Canvas/FlowCanvas/components/cards/cards-select.vue
+++ b/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">
+		<div v-for="v in list" :key="v.type" @click="onClickItem(v)">
 			<span class="icon">
 				<svg-icon :name="v.type + '-2'" size="15" size-unit="px" />
 			</span>
@@ -38,16 +38,21 @@
 			title: 'To 3D Model'
 		}
 	])
-
+	const onClickItem = (v) => {
+		console.log(v.type)
+	}
 	defineExpose({})
 </script>
 
 <style lang="less" scoped>
 	.cards-select {
+		--cards-item-margin-bottom: 8px;
+		user-select: none;
 		> div {
 			display: flex;
 			align-items: center;
-			padding: 6px 5px;
+			padding: 0 5px;
+			height: 30px;
 			border-radius: 5px;
 			cursor: pointer;
 			&:hover {
diff --git a/src/components/Canvas/FlowCanvas/components/cards/index.vue b/src/components/Canvas/FlowCanvas/components/cards/index.vue
index 8b18096..89cdc12 100644
--- a/src/components/Canvas/FlowCanvas/components/cards/index.vue
+++ b/src/components/Canvas/FlowCanvas/components/cards/index.vue
@@ -170,7 +170,7 @@
 			&:deep(> *) {
 				width: 100%;
 				> * {
-					margin-bottom: 10px;
+					margin-bottom: var(--cards-item-margin-bottom, 10px);
 					&:last-child {
 						margin-bottom: 0;
 					}
diff --git a/src/components/Canvas/FlowCanvas/components/result/result-image.vue b/src/components/Canvas/FlowCanvas/components/result/result-image.vue
new file mode 100644
index 0000000..c711139
--- /dev/null
+++ b/src/components/Canvas/FlowCanvas/components/result/result-image.vue
@@ -0,0 +1,33 @@
+<template>
+	<!-- 转3-View -->
+	<div class="to-3view">
+		<p class="label">3D Model</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=""
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted } from 'vue'
+	const data = reactive({})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.to-3view {
+		> .image {
+			padding: 18px;
+			border-radius: 10px;
+			background-color: #f0f0f0;
+			> img {
+				width: 100%;
+				height: auto;
+			}
+		}
+	}
+</style>
diff --git a/src/components/Canvas/FlowCanvas/manager/StateManager.ts b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
index 44cf7ac..08f57f2 100644
--- a/src/components/Canvas/FlowCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
@@ -9,62 +9,62 @@ export class StateManager {
 	constructor(options) {
 		this.vueFlow = options.vueFlow
 		this.nodes = ref<any[]>([
-			{
-				id: '1',
-				type: 'InputNode',
-				class: 'custom-node start',
-				position: { x: 0, y: 0 },
-				data: { component: card, type: 'to-real-style' }
-			},
-			{
-				id: '2',
-				type: 'SecondaryNode',
-				class: 'custom-node',
-				position: { x: 0, y: 0 },
-				data: { component: card, type: 'scene-composition' }
-			},
-			{
-				id: '3',
-				type: 'SecondaryNode',
-				class: 'custom-node',
-				position: { x: 0, y: 0 },
-				data: { component: card, type: 'color-palette' }
-			},
-			{
-				id: '4',
-				type: 'SecondaryNode',
-				class: 'custom-node',
-				position: { x: 0, y: 0 },
-				data: { component: card, type: 'to-video' }
-			},
-			{
-				id: '5',
-				type: 'SecondaryNode',
-				class: 'custom-node',
-				position: { x: 0, y: 0 },
-				data: { component: card, type: 'to-3d-model' }
-			},
-			{
-				id: '6',
-				type: 'SecondaryNode',
-				class: 'custom-node',
-				position: { x: 0, y: 0 },
-				data: { component: card, type: 'to-cad' }
-			},
-			{
-				id: '7',
-				type: 'SecondaryNode',
-				class: 'custom-node',
-				position: { x: 0, y: 0 },
-				data: { component: card, type: 'add-print' }
-			},
-			{
-				id: '8',
-				type: 'SecondaryNode',
-				class: 'custom-node',
-				position: { x: 0, y: 0 },
-				data: { component: card, type: 'edit-material' }
-			}
+			// {
+			// 	id: '1',
+			// 	type: 'InputNode',
+			// 	class: 'custom-node start',
+			// 	position: { x: 0, y: 0 },
+			// 	data: { component: card, type: 'to-real-style' }
+			// },
+			// {
+			// 	id: '2',
+			// 	type: 'SecondaryNode',
+			// 	class: 'custom-node',
+			// 	position: { x: 0, y: 0 },
+			// 	data: { component: card, type: 'scene-composition' }
+			// },
+			// {
+			// 	id: '3',
+			// 	type: 'SecondaryNode',
+			// 	class: 'custom-node',
+			// 	position: { x: 0, y: 0 },
+			// 	data: { component: card, type: 'color-palette' }
+			// },
+			// {
+			// 	id: '4',
+			// 	type: 'SecondaryNode',
+			// 	class: 'custom-node',
+			// 	position: { x: 0, y: 0 },
+			// 	data: { component: card, type: 'to-video' }
+			// },
+			// {
+			// 	id: '5',
+			// 	type: 'SecondaryNode',
+			// 	class: 'custom-node',
+			// 	position: { x: 0, y: 0 },
+			// 	data: { component: card, type: 'to-3d-model' }
+			// },
+			// {
+			// 	id: '6',
+			// 	type: 'SecondaryNode',
+			// 	class: 'custom-node',
+			// 	position: { x: 0, y: 0 },
+			// 	data: { component: card, type: 'to-cad' }
+			// },
+			// {
+			// 	id: '7',
+			// 	type: 'SecondaryNode',
+			// 	class: 'custom-node',
+			// 	position: { x: 0, y: 0 },
+			// 	data: { component: card, type: 'add-print' }
+			// },
+			// {
+			// 	id: '8',
+			// 	type: 'SecondaryNode',
+			// 	class: 'custom-node',
+			// 	position: { x: 0, y: 0 },
+			// 	data: { component: card, type: 'edit-material' }
+			// }
 		]);
 
 		this.edges = computed(() => {
diff --git a/src/lang/en.ts b/src/lang/en.ts
index a64e2bc..63a3e50 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1,5 +1,6 @@
 export default {
 	AlphaVersion: '2026 Alpha Version',
+	submit: 'Submit',
 	Login: {
 		login: 'Log in',
 		register: 'Register',
@@ -35,6 +36,7 @@ export default {
 		wechatLogin: 'Sign in with Wechat',
 		indexTip: 'A multi-agent canvas for rapid, trend driven design iteration.',
 		sendCodeError: 'Send code error',
+		retrievePassword: 'Retrieve password',
 	},
 	Nuic: {
 		hiName: 'Hi, {name}. This is Fiphant.',
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index fa4b632..4ff6823 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -1,5 +1,6 @@
 export default {
 	AlphaVersion: '2026版本',
+	submit: '提交',
 	Login: {
 		login: '登录',
 		register: '注册',
@@ -36,6 +37,7 @@ export default {
 		wechatLogin: '使用微信登录',
 		indexTip: '一个多智能体画布，用于快速、趋势驱动的设计迭代。',
 		sendCodeError: '发送验证码失败',
+		retrievePassword: '找回密码',
 	},
 	Nuic: {
 		hiName: '你好，{name}。这是 Fiphant。',
diff --git a/src/router/index.ts b/src/router/index.ts
index db533f1..ad76b18 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -29,6 +29,11 @@ const router = createRouter({
 			name: 'register',
 			component: () => import('../views/login/register.vue')
 		},
+		{
+			path: '/retrievepass',
+			name: 'retrievepass',
+			component: () => import('../views/login/retrieve-password.vue')
+		},
 		{
 			path: '/nuic',
 			name: 'nuic',
@@ -69,7 +74,7 @@ const router = createRouter({
 			component: () => import('../components/Canvas/CanvasTest.vue')
 		},
 
-        {
+		{
 			path: '/:pathMatch(.*)',
 			name: '404',
 			component: () => import('../views/404.vue')
diff --git a/src/views/login/css/style.css b/src/views/login/css/style.css
index 8614e4e..5287b37 100644
--- a/src/views/login/css/style.css
+++ b/src/views/login/css/style.css
@@ -1,3 +1,4 @@
+.retrieve-password,
 .register,
 .login {
   width: 100%;
@@ -6,6 +7,7 @@
   display: flex;
   user-select: none;
 }
+.retrieve-password > .left,
 .register > .left,
 .login > .left {
   flex: 1;
@@ -13,12 +15,14 @@
   position: relative;
   overflow: hidden;
 }
+.retrieve-password > .left > .bg,
 .register > .left > .bg,
 .login > .left > .bg {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
+.retrieve-password > .left > .logo,
 .register > .left > .logo,
 .login > .left > .logo {
   position: absolute;
@@ -27,12 +31,14 @@
   width: auto;
   height: 2.5rem;
 }
+.retrieve-password > .left > .logo > span,
 .register > .left > .logo > span,
 .login > .left > .logo > span {
   font-weight: 600;
   font-size: 3.3rem;
   font-family: SemiBold;
 }
+.retrieve-password > .right,
 .register > .right,
 .login > .right {
   width: 99rem;
@@ -44,11 +50,13 @@
   background-position: left center;
   background-repeat: no-repeat;
 }
+.retrieve-password > .right > .top,
 .register > .right > .top,
 .login > .right > .top {
   display: flex;
   padding: 3rem 0 0 3rem;
 }
+.retrieve-password > .right > .top > .back,
 .register > .right > .top > .back,
 .login > .right > .top > .back {
   width: 5rem;
@@ -58,6 +66,7 @@
   background-color: transparent;
   cursor: pointer;
 }
+.retrieve-password > .right > .box,
 .register > .right > .box,
 .login > .right > .box {
   min-width: 50rem;
@@ -68,17 +77,20 @@
   flex-direction: column;
   align-items: center;
 }
+.retrieve-password > .right > .box > img,
 .register > .right > .box > img,
 .login > .right > .box > img {
   width: auto;
   height: 12rem;
   margin-top: 2rem;
 }
+.retrieve-password > .right > .box > .visible-code,
 .register > .right > .box > .visible-code,
 .login > .right > .box > .visible-code {
   margin-top: 1.7rem;
   margin-bottom: 7.2rem;
 }
+.retrieve-password > .right > .box > .title,
 .register > .right > .box > .title,
 .login > .right > .box > .title {
   font-weight: 600;
@@ -88,12 +100,14 @@
   justify-content: center;
   color: #252727;
 }
+.retrieve-password > .right > .box > .title:deep(*),
 .register > .right > .box > .title:deep(*),
 .login > .right > .box > .title:deep(*) {
   margin-left: 1rem;
   font-family: LBold;
   margin-bottom: -1rem;
 }
+.retrieve-password > .right > .box > .tip,
 .register > .right > .box > .tip,
 .login > .right > .box > .tip {
   font-weight: 400;
@@ -102,16 +116,19 @@
   color: #666;
   margin-top: 0.5rem;
 }
+.retrieve-password > .right > .box:deep(.el-form),
 .register > .right > .box:deep(.el-form),
 .login > .right > .box:deep(.el-form) {
   margin-top: 5rem;
   width: 100%;
   font-family: Regular;
 }
+.retrieve-password > .right > .box:deep(.el-form) .el-form-item,
 .register > .right > .box:deep(.el-form) .el-form-item,
 .login > .right > .box:deep(.el-form) .el-form-item {
   margin-bottom: 2rem;
 }
+.retrieve-password > .right > .box:deep(.el-form) .el-form-item__label,
 .register > .right > .box:deep(.el-form) .el-form-item__label,
 .login > .right > .box:deep(.el-form) .el-form-item__label {
   color: #252727;
@@ -119,6 +136,7 @@
   margin-bottom: 0.8rem;
   font-family: Medium;
 }
+.retrieve-password > .right > .box:deep(.el-form) .el-input,
 .register > .right > .box:deep(.el-form) .el-input,
 .login > .right > .box:deep(.el-form) .el-input {
   --el-input-height: 5rem;
@@ -127,6 +145,7 @@
   --el-border-color: #dfdfdf;
   font-size: 1.4rem;
 }
+.retrieve-password > .right > .box:deep(.el-form) .forgetPassword,
 .register > .right > .box:deep(.el-form) .forgetPassword,
 .login > .right > .box:deep(.el-form) .forgetPassword {
   margin-top: -1.2rem;
@@ -137,27 +156,32 @@
   cursor: pointer;
   text-decoration: underline;
 }
+.retrieve-password > .right > .box:deep(.el-form) .privacy,
 .register > .right > .box:deep(.el-form) .privacy,
 .login > .right > .box:deep(.el-form) .privacy {
   --el-checkbox-height: auto;
   margin-bottom: 4rem;
 }
+.retrieve-password > .right > .box:deep(.el-form) .privacy .el-checkbox__label,
 .register > .right > .box:deep(.el-form) .privacy .el-checkbox__label,
 .login > .right > .box:deep(.el-form) .privacy .el-checkbox__label {
   font-size: 1.6rem;
   color: #666666;
   font-weight: 400;
 }
+.retrieve-password > .right > .box:deep(.el-form) .privacy .el-checkbox__label > div > span,
 .register > .right > .box:deep(.el-form) .privacy .el-checkbox__label > div > span,
 .login > .right > .box:deep(.el-form) .privacy .el-checkbox__label > div > span {
   text-decoration: underline;
   cursor: pointer;
 }
+.retrieve-password > .right > .box:deep(.el-form) .el-form-item__error,
 .register > .right > .box:deep(.el-form) .el-form-item__error,
 .login > .right > .box:deep(.el-form) .el-form-item__error {
   padding-top: 1px;
   font-size: 1.4rem;
 }
+.retrieve-password > .right > .box:deep(.el-form) .submit,
 .register > .right > .box:deep(.el-form) .submit,
 .login > .right > .box:deep(.el-form) .submit {
   width: 100%;
@@ -169,6 +193,7 @@
   font-weight: 600;
   font-family: SemiBold;
 }
+.retrieve-password > .right > .box > .tip-2,
 .register > .right > .box > .tip-2,
 .login > .right > .box > .tip-2 {
   font-weight: 400;
@@ -176,12 +201,14 @@
   color: #666;
   font-family: Regular;
 }
+.retrieve-password > .right > .box > .tip-2:deep(span),
 .register > .right > .box > .tip-2:deep(span),
 .login > .right > .box > .tip-2:deep(span) {
   text-decoration: underline;
   color: #FF7A50;
   cursor: pointer;
 }
+.retrieve-password > .right > .box > .other-login,
 .register > .right > .box > .other-login,
 .login > .right > .box > .other-login {
   margin-top: 5rem;
diff --git a/src/views/login/less/style.less b/src/views/login/less/style.less
index 544a68a..9e6867a 100644
--- a/src/views/login/less/style.less
+++ b/src/views/login/less/style.less
@@ -1,3 +1,4 @@
+.retrieve-password,
 .register,
 .login {
 	width: 100%;
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index bd6cbeb..0ba000c 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -33,7 +33,7 @@
 							/>
 						</el-form-item>
 						<div class="forgetPassword">
-							<span>{{ $t('Login.forgetPassword') }}</span>
+							<span @click="onForgetPassword">{{ $t('Login.forgetPassword') }}</span>
 						</div>
 						<el-form-item prop="privacy" class="privacy">
 							<el-checkbox v-model="formData.privacy">
@@ -92,6 +92,9 @@
 			router.back()
 		}
 	}
+	const onForgetPassword = () => {
+		router.push({ name: 'retrievepass' })
+	}
 	const visibleCodeRef = ref(null)
 	const onSubmit = () => {
 		formRef.value?.validate?.((valid) => {
diff --git a/src/views/login/retrieve-password.vue b/src/views/login/retrieve-password.vue
new file mode 100644
index 0000000..260f9f7
--- /dev/null
+++ b/src/views/login/retrieve-password.vue
@@ -0,0 +1,121 @@
+<template>
+	<div class="retrieve-password">
+		<div class="left">
+			<img class="bg" src="@/assets/images/login/left-bg.png" />
+			<img class="logo" src="@/assets/images/logo-1.png" />
+		</div>
+		<div class="right">
+			<div class="top">
+				<button class="back" @click="onBack">
+					<svg-icon name="arrow-left" size="37" />
+				</button>
+			</div>
+			<div class="box">
+				<img src="@/assets/images/login/elephant.png" />
+				<template v-if="!isVisible">
+					<div class="title">{{ $t('Login.retrievePassword') }}</div>
+					<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
+						<el-form-item :label="$t('Login.email')" prop="email">
+							<el-input
+								v-model="formData.email"
+								:placeholder="$t('Login.enterEmail')"
+								name="email"
+							/>
+						</el-form-item>
+						<el-form-item :label="$t('Login.password')" prop="password">
+							<el-input
+								v-model="formData.password"
+								:placeholder="$t('Login.enterPassword')"
+								type="password"
+								show-password
+								name="password"
+							/>
+						</el-form-item>
+						<br />
+						<br />
+						<el-form-item>
+							<el-button class="submit" type="primary" @click="onSubmit">{{
+								$t('submit')
+							}}</el-button>
+						</el-form-item>
+					</el-form>
+				</template>
+				<visible-code
+					v-show="isVisible"
+					type="FORGOT_PWD"
+					ref="visibleCodeRef"
+					:email="formData.email"
+					@submit="onVerifyCode"
+				/>
+				<other-login />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import md5 from 'md5'
+	import { ForgetPassword } from '@/api/login'
+	import { computed, reactive, ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	import { validateEmail, validatePass } from './tools'
+	import OtherLogin from './other-login.vue'
+	import VisibleCode from './visible-code.vue'
+	import { useUserInfoStore } from '@/stores'
+	const userInfoStore = useUserInfoStore()
+	const router = useRouter()
+	const ruleForm = reactive({
+		email: [{ validator: validateEmail, trigger: 'blur' }],
+		password: [{ validator: validatePass, trigger: 'blur' }]
+	})
+	const isVisible = ref(false)
+	const formData = reactive({
+		email: '',
+		password: ''
+	})
+	const formRef = ref(null)
+	const onBack = () => {
+		if (isVisible.value) {
+			isVisible.value = false
+		} else {
+			router.back()
+		}
+	}
+	const visibleCodeRef = ref(null)
+	const onSubmit = () => {
+		formRef.value?.validate?.((valid) => {
+			if (valid) {
+				// console.log('submit!')
+				visibleCodeRef.value?.onSendCode().then(() => {
+					isVisible.value = true
+				})
+			} else {
+				console.warn('error submit!')
+			}
+		})
+	}
+	const onVerifyCode = (code: string) => {
+		// console.log(code)
+		ForgetPassword({
+			email: formData.email,
+			password: md5(formData.password),
+			verificationCode: code
+		})
+			.then((res) => {
+				if (res) {
+					// userInfoStore.setToken(res)
+					// userInfoStore.setUserInfo({
+					// 	email: formData.email
+					// })
+					// router.push({ name: 'mainInput' })
+				}
+			})
+			.catch((error) => {
+				console.warn(error)
+			})
+	}
+</script>
+
+<style lang="less" scoped>
+	@import './less/style.less';
+</style>
diff --git a/src/views/login/visible-code.vue b/src/views/login/visible-code.vue
index c6c5ff4..5687930 100644
--- a/src/views/login/visible-code.vue
+++ b/src/views/login/visible-code.vue
@@ -25,7 +25,10 @@
 	const emit = defineEmits(['submit'])
 	const props = defineProps({
 		email: { type: String, required: true },
-		type: { default: 'LOGIN', type: String as () => 'LOGIN' | 'REGISTER' },
+		type: {
+			type: String as () => 'LOGIN' | 'REGISTER' | 'FORGOT_PWD',
+			required: true
+		},
 		password: { type: String, default: '' }
 	})
 	const code = ref('')