From 95f736df76b056a499db9e63d689db6c04489c70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=B4=C3=B3=C2=B8=C3=A7?= <zpli@aidlab.hk>
Date: Wed, 25 Feb 2026 13:45:55 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=94=BB=E5=B8=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FlowCanvas/components/cards/add-print.vue |   8 +-
 .../components/cards/color-palette.vue        |  12 +-
 .../FlowCanvas/components/cards/index.vue     |  58 ++---
 .../components/cards/scene-composition.vue    |  16 +-
 .../components/cards/to-real-style.vue        |  10 +-
 .../FlowCanvas/components/cards/to-video.vue  |  22 +-
 .../FlowCanvas/components/tools/my-input.vue  |  28 +--
 .../components/tools/my-textarea.vue          |  28 +--
 .../components/tools/offset-tool.vue          |  38 +--
 .../tools/pixel-ratio-selection.vue           |  22 +-
 .../FlowCanvas/components/tools/slider.vue    |  28 +--
 .../components/tools/upload-file.vue          |  35 ++-
 src/components/Canvas/FlowCanvas/index.vue    | 205 ++++++++++-------
 .../Canvas/components/fullscreen-dialog.vue   |   2 +-
 .../Canvas/components/node/InputNode.vue      |  27 +++
 .../Canvas}/components/node/secondaryNode.vue |  30 ++-
 src/components/SvgIcon/index.vue              |   6 +-
 src/main.ts                                   |  11 +-
 src/utils/treeDiagram.js                      |   3 +-
 .../canvas1/components/cards/add-print.vue    | 116 ----------
 .../components/cards/color-palette.vue        |  65 ------
 .../components/cards/edit-material.vue        |  26 ---
 src/views/canvas1/components/cards/index.vue  | 186 ---------------
 .../components/cards/scene-composition.vue    |  86 -------
 .../canvas1/components/cards/to-3d-model.vue  |  26 ---
 src/views/canvas1/components/cards/to-cad.vue |  26 ---
 .../components/cards/to-real-style.vue        |  74 ------
 .../canvas1/components/cards/to-video.vue     |  91 --------
 .../canvas1/components/node/InputNode.vue     |  26 ---
 .../canvas1/components/tools/my-input.vue     |  79 -------
 .../canvas1/components/tools/my-textarea.vue  |  84 -------
 .../canvas1/components/tools/offset-tool.vue  | 217 ------------------
 .../tools/pixel-ratio-selection.vue           |  67 ------
 src/views/canvas1/components/tools/slider.vue | 172 --------------
 .../canvas1/components/tools/upload-file.vue  |  97 --------
 src/views/canvas1/index.vue                   | 143 ------------
 .../versionTree/tree/view2/index.vue          |   2 -
 37 files changed, 337 insertions(+), 1835 deletions(-)
 create mode 100644 src/components/Canvas/components/node/InputNode.vue
 rename src/{views/canvas1 => components/Canvas}/components/node/secondaryNode.vue (52%)
 delete mode 100644 src/views/canvas1/components/cards/add-print.vue
 delete mode 100644 src/views/canvas1/components/cards/color-palette.vue
 delete mode 100644 src/views/canvas1/components/cards/edit-material.vue
 delete mode 100644 src/views/canvas1/components/cards/index.vue
 delete mode 100644 src/views/canvas1/components/cards/scene-composition.vue
 delete mode 100644 src/views/canvas1/components/cards/to-3d-model.vue
 delete mode 100644 src/views/canvas1/components/cards/to-cad.vue
 delete mode 100644 src/views/canvas1/components/cards/to-real-style.vue
 delete mode 100644 src/views/canvas1/components/cards/to-video.vue
 delete mode 100644 src/views/canvas1/components/node/InputNode.vue
 delete mode 100644 src/views/canvas1/components/tools/my-input.vue
 delete mode 100644 src/views/canvas1/components/tools/my-textarea.vue
 delete mode 100644 src/views/canvas1/components/tools/offset-tool.vue
 delete mode 100644 src/views/canvas1/components/tools/pixel-ratio-selection.vue
 delete mode 100644 src/views/canvas1/components/tools/slider.vue
 delete mode 100644 src/views/canvas1/components/tools/upload-file.vue
 delete mode 100644 src/views/canvas1/index.vue

diff --git a/src/components/Canvas/FlowCanvas/components/cards/add-print.vue b/src/components/Canvas/FlowCanvas/components/cards/add-print.vue
index c1907f9..34b1ac2 100644
--- a/src/components/Canvas/FlowCanvas/components/cards/add-print.vue
+++ b/src/components/Canvas/FlowCanvas/components/cards/add-print.vue
@@ -88,11 +88,11 @@
 <style lang="less" scoped>
 	.add-print {
 		> .settings {
-			margin: 0 1.1rem;
+			margin: 0 11px;
 			> div {
 				display: flex;
 				align-items: center;
-				margin-bottom: 1rem;
+				margin-bottom: 10px;
 				&:last-child {
 					margin-bottom: 0;
 				}
@@ -100,8 +100,8 @@
 					justify-content: center;
 				}
 				> .label {
-					width: 5.5rem;
-					font-size: 1rem;
+					width: 55px;
+					font-size: 10px;
 				}
 				&:not(.offset) > div {
 					flex: 1;
diff --git a/src/components/Canvas/FlowCanvas/components/cards/color-palette.vue b/src/components/Canvas/FlowCanvas/components/cards/color-palette.vue
index e4ee1ee..5ef858f 100644
--- a/src/components/Canvas/FlowCanvas/components/cards/color-palette.vue
+++ b/src/components/Canvas/FlowCanvas/components/cards/color-palette.vue
@@ -10,7 +10,7 @@
 				:style="{ background: v }"
 			></div>
 			<div class="add" @click="addColor">
-				<svg-icon name="add" size="12rem" color="#fff" />
+				<svg-icon name="add" size="12" size-unit="px" color="#fff" />
 				<input type="color" ref="colorInput" @change="changeColor" />
 			</div>
 		</div>
@@ -37,17 +37,17 @@
 
 <style lang="less" scoped>
 	.color-palette {
-		min-height: 14rem;
+		min-height: 140px;
 		> .color-list {
 			display: flex;
 			flex-wrap: wrap;
-			gap: 0.5rem;
+			gap: 5px;
 			> div {
-				width: 3.5rem;
-				height: 3.5rem;
+				width: 35px;
+				height: 35px;
 			}
 			> .add {
-				border: 0.1rem solid rgba(0, 0, 0, 0.1);
+				border: 1px solid rgba(0, 0, 0, 0.1);
 				background-color: rgba(0, 0, 0, 0.1);
 				position: relative;
 				> input {
diff --git a/src/components/Canvas/FlowCanvas/components/cards/index.vue b/src/components/Canvas/FlowCanvas/components/cards/index.vue
index a82e11f..aef62ca 100644
--- a/src/components/Canvas/FlowCanvas/components/cards/index.vue
+++ b/src/components/Canvas/FlowCanvas/components/cards/index.vue
@@ -1,16 +1,18 @@
 <template>
 	<div class="card">
 		<div class="header">
-			<svg-icon :name="currentComponent?.type" color="#fff" />
+			<svg-icon :name="currentComponent?.type" color="#fff" size="16" size-unit="px" />
 			<span>{{ currentComponent?.title }}</span>
-			<div class="add" @click="emit('add')"><svg-icon name="add" size="14" /></div>
+			<div class="add" @click="emit('add')">
+				<svg-icon name="add" size="14" size-unit="px" />
+			</div>
 		</div>
 		<div class="body">
 			<component :is="currentComponent?.component" ref="componentRef" />
 		</div>
 		<div class="footer">
 			<button @click="onGenerateClick">
-				<svg-icon name="xingxing" size="16" />
+				<svg-icon name="xingxing" size="16" size-unit="px" />
 				<span>Generate</span>
 			</button>
 		</div>
@@ -97,79 +99,83 @@
 
 <style lang="less" scoped>
 	.card {
-		width: 25rem;
+		width: 250px;
 		height: auto;
-		--border-radius: 1.6rem;
+		--border-radius: 16px;
 		border-radius: var(--border-radius);
 		background-color: #fff;
+		box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05);
+		display: flex;
+		flex-direction: column;
+
 		> .header {
 			border-radius: var(--border-radius) var(--border-radius) 0 0;
-			height: 5rem;
+			height: 50px;
 			background: #ff7a51;
 			display: flex;
 			align-items: center;
-			padding-left: 1.6rem;
+			padding-left: 16px;
 			position: relative;
 			> .c-svg {
 				width: auto;
 				height: auto;
-				margin-right: 0.6rem;
+				margin-right: 6px;
 			}
 			> span {
 				font-family: Semibold;
-				font-size: 1.6rem;
+				font-size: 16px;
 				color: #fff;
 			}
 			> .add {
 				position: absolute;
-				width: 3.2rem;
-				height: 3.2rem;
-				border: 0.2rem solid #fff;
-				bottom: -1.6rem;
-				right: -1.6rem;
+				width: 32px;
+				height: 32px;
+				border: 2px solid #fff;
+				bottom: -16px;
+				right: -16px;
 				background-color: #ed8936;
 				border-radius: 50%;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				color: #fff;
-				font-size: 2.5rem;
-				box-shadow: 0 0.8rem 2rem 0 #71809633;
+				font-size: 25px;
+				box-shadow: 0 8px 20px 0 #71809633;
 				cursor: pointer;
 			}
 		}
 		> .body {
-			padding: 1.6rem 1.3rem;
+			padding: 16px 13px;
 			&:deep(> *) {
 				width: 100%;
 				> * {
-					margin-bottom: 1rem;
+					margin-bottom: 10px;
 					&:last-child {
 						margin-bottom: 0;
 					}
 				}
 				> .label {
-					font-size: 1.2rem;
+					font-size: 12px;
 					font-family: Medium;
 					color: #000;
 				}
 			}
 		}
 		> .footer {
-			margin-bottom: 1.6rem;
+			margin-bottom: 16px;
 			display: flex;
 			flex-direction: row-reverse;
-			padding: 0 1.3rem;
+			padding: 0 13px;
 			> button {
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				width: 11rem;
-				height: 2.8rem;
-				border-radius: 0.5rem;
+				width: 110px;
+				height: 28px;
+				border-radius: 5px;
 				background-color: #fffcf4;
 				border: 1px solid #ffcf90;
-				font-size: 1.2rem;
+				font-size: 12px;
 				font-family: SemiBold;
 				cursor: pointer;
 				&:active {
@@ -178,7 +184,7 @@
 				> .c-svg {
 					width: auto;
 					height: auto;
-					margin-right: 0.4rem;
+					margin-right: 4px;
 				}
 			}
 		}
diff --git a/src/components/Canvas/FlowCanvas/components/cards/scene-composition.vue b/src/components/Canvas/FlowCanvas/components/cards/scene-composition.vue
index 65ae059..86e1718 100644
--- a/src/components/Canvas/FlowCanvas/components/cards/scene-composition.vue
+++ b/src/components/Canvas/FlowCanvas/components/cards/scene-composition.vue
@@ -12,7 +12,9 @@
 				:class="{ active: data.styles.includes(v.value) }"
 				@click="onClickStyle(v.value)"
 			>
-				<span class="icon"><svg-icon name="add" color="#0D0D0D" size="8" /></span>
+				<span class="icon">
+					<svg-icon name="add" color="#0D0D0D" size="8" size-unit="px" />
+				</span>
 				<span class="label">{{ v.label }}</span>
 			</div>
 		</div>
@@ -62,19 +64,19 @@
 		> .style-list {
 			display: flex;
 			flex-wrap: wrap;
-			gap: 0.829rem 0.55rem;
+			gap: 8.29px 5.5px;
 			> .item {
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				padding: 0.5rem 0.7rem;
+				padding: 5px 7px;
 				font-family: Medium;
-				border-radius: 2rem;
-				font-size: 0.829rem;
-				border: 0.05rem solid #e4e4e7;
+				border-radius: 20px;
+				font-size: 8.29px;
+				border: 1px solid #e4e4e7;
 				color: #000;
 				> .icon {
-					margin-right: 0.4rem;
+					margin-right: 4px;
 				}
 				&.active {
 					border-color: #0095ff;
diff --git a/src/components/Canvas/FlowCanvas/components/cards/to-real-style.vue b/src/components/Canvas/FlowCanvas/components/cards/to-real-style.vue
index a6f4e2b..b1df662 100644
--- a/src/components/Canvas/FlowCanvas/components/cards/to-real-style.vue
+++ b/src/components/Canvas/FlowCanvas/components/cards/to-real-style.vue
@@ -58,15 +58,15 @@
 		> .shortcut-list {
 			display: flex;
 			flex-wrap: wrap;
-			gap: 1rem 0.4rem;
+			gap: 10px 4px;
 			> .item {
 				display: flex;
 				align-items: center;
-				padding: 0.5rem 0.3rem;
+				padding: 5px 3px;
 				font-family: Medium;
-				border-radius: 0.3rem;
-				font-size: 1rem;
-				border: 0.05rem solid #e4e4e7;
+				border-radius: 3px;
+				font-size: 10px;
+				border: 1px solid #e4e4e7;
 				background: #f0f0f0;
 			}
 		}
diff --git a/src/components/Canvas/FlowCanvas/components/cards/to-video.vue b/src/components/Canvas/FlowCanvas/components/cards/to-video.vue
index 8328e03..b5d1072 100644
--- a/src/components/Canvas/FlowCanvas/components/cards/to-video.vue
+++ b/src/components/Canvas/FlowCanvas/components/cards/to-video.vue
@@ -48,24 +48,24 @@
 	.to-video {
 		> .frames {
 			display: flex;
-			gap: 0.5rem;
+			gap: 5px;
 		}
 		> .select,
 		> div.label {
 			display: flex;
-			gap: 1.3rem;
+			gap: 13px;
 			> * {
 				flex: 1;
 			}
 		}
 		> .select {
 			&:deep(.el-select) {
-				--el-select-input-font-size: 1.2rem;
+				--el-select-input-font-size: 12px;
 				.el-select__wrapper {
-					font-size: 1.2rem;
+					font-size: 12px;
 					min-height: 0;
-					height: 2.8rem;
-					padding: 0 0.8rem;
+					height: 28px;
+					padding: 0 8px;
 				}
 				.el-select__selected-item,
 				.el-select__input-wrapper,
@@ -73,7 +73,7 @@
 					line-height: normal;
 				}
 				.el-select__input {
-					height: 2.4rem;
+					height: 24px;
 				}
 			}
 		}
@@ -81,10 +81,10 @@
 	.el-popper{
 		.el-select-dropdown{
 			li{
-				padding-left: 0.8rem;
-				height: 3rem;
-				line-height: 3rem;;
-				font-size: 1.2rem;
+				padding-left: 8px;
+				height: 30px;
+				line-height: 30px;
+				font-size: 12px;
 			}
 		}
 	}
diff --git a/src/components/Canvas/FlowCanvas/components/tools/my-input.vue b/src/components/Canvas/FlowCanvas/components/tools/my-input.vue
index a413a07..9d421df 100644
--- a/src/components/Canvas/FlowCanvas/components/tools/my-input.vue
+++ b/src/components/Canvas/FlowCanvas/components/tools/my-input.vue
@@ -2,7 +2,7 @@
 	<div class="my-input">
 		<span class="decorate"></span>
 		<span v-show="icon" class="icon">
-			<svg-icon :name="icon" :size="iconSize" />
+			<svg-icon :name="icon" :size="iconSize" size-unit="px" />
 		</span>
 		<span v-show="before" class="before">{{ before }}</span>
 		<input v-bind="attrs" :value="modelValue" @input="onInput" />
@@ -34,33 +34,33 @@
 		align-items: center;
 		width: 100%;
 		border: 1px solid rgba(230, 230, 231, 1);
-		border-radius: 0.17rem;
-		height: 1.7rem;
-		padding: 0 0.4rem 0 0.2rem;
+		border-radius: 1.7px;
+		height: 17px;
+		padding: 0 4px 0 2px;
 		> .decorate {
-			width: 0.2rem;
+			width: 2px;
 			background-color: rgba(230, 230, 231, 1);
-			border-radius: 0.3rem;
+			border-radius: 3px;
 			height: 85%;
-			margin-right: 0.4rem;
+			margin-right: 4px;
 		}
 		> .iconfont {
-			font-size: 1rem;
+			font-size: 12px;
 			color: #000;
-			margin-right: 0.2rem;
+			margin-right: 2px;
 		}
 		> .before {
-			font-size: 1rem;
+			font-size: 12px;
 			color: #000;
-			margin-right: 0.2rem;
+			margin-right: 2px;
 		}
 		> .after {
-			font-size: 1rem;
+			font-size: 12px;
 			color: #000;
-			margin-left: 0.1rem;
+			margin-left: 1px;
 		}
 		> input {
-			font-size: 1rem;
+			font-size: 12px;
 			width: 0;
 			flex: 1;
 			text-align: right;
diff --git a/src/components/Canvas/FlowCanvas/components/tools/my-textarea.vue b/src/components/Canvas/FlowCanvas/components/tools/my-textarea.vue
index f62a6c2..a4d6983 100644
--- a/src/components/Canvas/FlowCanvas/components/tools/my-textarea.vue
+++ b/src/components/Canvas/FlowCanvas/components/tools/my-textarea.vue
@@ -7,7 +7,7 @@
 			@change="onChange"
 		></textarea>
 		<div class="bths">
-			<button><svg-icon name="mobang" size="10" /></button>
+			<button><svg-icon name="mobang" size="10" size-unit="px" /></button>
 		</div>
 	</div>
 </template>
@@ -35,44 +35,44 @@
 <style lang="less" scoped>
 	.my-textarea {
 		width: 100%;
-		height: 11.5rem;
-		border: 0.1rem solid #e4e4e7;
-		border-radius: 1rem;
-		padding: 1rem 0.5rem;
+		height: 115px;
+		border: 1px solid #e4e4e7;
+		border-radius: 10px;
+		padding: 10px 5px;
 		display: flex;
 		flex-direction: column;
 		> textarea {
-			padding: 0 0.5rem;
+			padding: 0 5px;
 			width: 100%;
 			flex: 1;
 			border: none;
 			outline: none;
 			resize: none;
 			font-family: Medium;
-			font-size: 1rem;
+			font-size: 10px;
 			color: #333;
 			&::placeholder {
 				color: #c9c9c9;
 			}
 			&::-webkit-scrollbar {
-				width: 0.4rem;
+				width: 4px;
 			}
 			&::-webkit-scrollbar-thumb {
-				border-radius: 0.4rem;
+				border-radius: 4px;
 				background: rgba(0, 0, 0, 0.2);
 			}
 			&::-webkit-scrollbar-track {
-				border-radius: 0.4rem;
+				border-radius: 4px;
 				background: rgba(0, 0, 0, 0.1);
 			}
 		}
 		> .bths {
-			padding: 0.5rem 0.5rem 0;
+			padding: 5px 5px 0;
 			> button {
-				width: 2rem;
-				height: 2rem;
+				width: 20px;
+				height: 20px;
 				padding: 0;
-				border-radius: 0.4rem;
+				border-radius: 4px;
 				background-color: #f0f0f0;
 				border: 1px solid #e4e4e7;
 				&:active {
diff --git a/src/components/Canvas/FlowCanvas/components/tools/offset-tool.vue b/src/components/Canvas/FlowCanvas/components/tools/offset-tool.vue
index 0bf804f..5732251 100644
--- a/src/components/Canvas/FlowCanvas/components/tools/offset-tool.vue
+++ b/src/components/Canvas/FlowCanvas/components/tools/offset-tool.vue
@@ -134,47 +134,47 @@
 			justify-content: center;
 			> * {
 				flex: 1;
-				margin-right: 1rem;
+				margin-right: 10px;
 				&:last-child {
 					margin-right: 0;
 				}
 			}
 		}
 		> .dish {
-			width: 11.5rem;
-			height: 11.5rem;
-			border: 0.1rem solid #eaeaea;
-			border-radius: 0.34rem;
+			width: 115px;
+			height: 115px;
+			border: 1px solid #eaeaea;
+			border-radius: 3.4px;
 			cursor: pointer;
 			position: relative;
 			background-color: #f6f6f6;
-			margin-top: 2rem;
+			margin-top: 20px;
 			> * {
 				position: absolute;
 				pointer-events: none;
 				user-select: none;
 			}
 			> img {
-				width: 1.2rem;
-				height: 1.2rem;
-				bottom: 0.35rem;
-				right: 0.35rem;
+				width: 12px;
+				height: 12px;
+				bottom: 3.5px;
+				right: 3.5px;
 			}
 			> .ball {
 				top: 50%;
 				left: 50%;
 				transform: translate(-50%, -50%);
-				width: 0.85rem;
-				height: 0.85rem;
-				border: 0.1rem solid #fff;
+				width: 8.5px;
+				height: 8.5px;
+				border: 1px solid #fff;
 				background-color: #333;
 				border-radius: 50%;
-				box-shadow: 0px 0.068rem 0.17px 0px rgba(0, 0, 0, 0.26);
+				box-shadow: 0px 0.68px 0.17px 0px rgba(0, 0, 0, 0.26);
 			}
 			> .tip {
-				font-size: 0.85rem;
+				font-size: 8.5px;
 				color: #000;
-				line-height: 2.4rem;
+				line-height: 24px;
 				&.x {
 					top: 50%;
 					right: 0%;
@@ -198,15 +198,15 @@
 				transform: translate(-50%, -50%);
 				&.x {
 					width: 100%;
-					border-top-width: 0.1rem;
+					border-top-width: 1px;
 				}
 				&.y {
 					height: 100%;
-					border-left-width: 0.1rem;
+					border-left-width: 1px;
 				}
 				&.z {
 					width: 50%;
-					border-top-width: 0.1rem;
+					border-top-width: 1px;
 					border-color: #454754;
 					transform: translate(0%, -50%) rotateZ(var(--rotateZ));
 					transform-origin: left center;
diff --git a/src/components/Canvas/FlowCanvas/components/tools/pixel-ratio-selection.vue b/src/components/Canvas/FlowCanvas/components/tools/pixel-ratio-selection.vue
index 7643e36..5fae90f 100644
--- a/src/components/Canvas/FlowCanvas/components/tools/pixel-ratio-selection.vue
+++ b/src/components/Canvas/FlowCanvas/components/tools/pixel-ratio-selection.vue
@@ -33,33 +33,33 @@
 <style lang="less" scoped>
 	.pixel-ratio-selection {
 		width: 100%;
-		height: 3.4rem;
-		border-radius: 0.6rem;
+		height: 34px;
+		border-radius: 6px;
 		background-color: #f0f0f0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 0 1.7rem;
+		padding: 0 17px;
 		> div {
 			text-align: center;
-			font-size: 1.2rem;
+			font-size: 12px;
 			color: #7c7c7c;
-			height: 2.1rem;
+			height: 21px;
 			flex: 1;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			&.active {
-				border-radius: 0.4rem;
+				border-radius: 4px;
 				background-color: #fff;
 			}
 			&::before {
 				content: '';
-				border-radius: 0.1rem;
-				border: 0.1rem solid #7c7c7c;
-				width: calc(var(--w) / max(var(--w), var(--h)) * 1rem);
-				height: calc(var(--h) / max(var(--w), var(--h)) * 1rem);
-				margin-right: 0.4rem;
+				border-radius: 1px;
+				border: 1px solid #7c7c7c;
+				width: calc(var(--w) / max(var(--w), var(--h)) * 10px);
+				height: calc(var(--h) / max(var(--w), var(--h)) * 10px);
+				margin-right: 4px;
 				box-sizing: border-box;
 			}
 		}
diff --git a/src/components/Canvas/FlowCanvas/components/tools/slider.vue b/src/components/Canvas/FlowCanvas/components/tools/slider.vue
index 46cd80a..eff883f 100644
--- a/src/components/Canvas/FlowCanvas/components/tools/slider.vue
+++ b/src/components/Canvas/FlowCanvas/components/tools/slider.vue
@@ -86,7 +86,7 @@
 		position: relative;
 		display: flex;
 		align-items: center;
-		--input-thumb-size: 0.8rem;
+		--input-thumb-size: 8px;
 		--backcolor1: var(--slider-thumb-color1, #4285f4);
 		--backcolor2: var(--slider-thumb-color2, rgba(0, 0, 0, 0.1));
 		&:hover {
@@ -102,8 +102,8 @@
 				width: 100%;
 				-webkit-appearance: none;
 				appearance: none;
-				height: 0.339rem;
-				border-radius: 0.3rem;
+				height: 3px;
+				border-radius: 3px;
 				outline: none;
 				background: linear-gradient(
 					to right,
@@ -121,7 +121,7 @@
 					background: var(--backcolor1); /* 蓝色滑块 */
 					cursor: pointer;
 					transition: all 0.2s;
-					box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
+					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 				}
 				&::-webkit-slider-thumb:hover {
 					transform: scale(1.1);
@@ -129,20 +129,20 @@
 			}
 			> .tip {
 				position: absolute;
-				font-size: 1rem;
+				font-size: 10px;
 				pointer-events: none;
 				user-select: none;
 				color: #666;
-				top: calc(var(--input-thumb-size) / -2 - 0.35rem);
+				top: calc(var(--input-thumb-size) / -2 - 3.5px);
 				left: calc(
 					(100% - var(--input-thumb-size)) * var(--progress) + var(--input-thumb-size) / 2
 				);
 				transform: translate(-50%, -100%);
 				background-color: rgba(0, 0, 0, 0.7);
 				color: white;
-				padding: 0.3rem 0.5rem;
-				border-radius: 0.4rem;
-				font-size: 1rem;
+				padding: 3px 5px;
+				border-radius: 4px;
+				font-size: 10px;
 				white-space: nowrap;
 				pointer-events: none;
 				display: none;
@@ -154,17 +154,17 @@
 					transform: translateX(-50%);
 					width: 0;
 					height: 0;
-					border-left: 0.5rem solid transparent;
-					border-right: 0.5rem solid transparent;
-					border-top: 0.5rem solid rgba(0, 0, 0, 0.8);
+					border-left: 5px solid transparent;
+					border-right: 5px solid transparent;
+					border-top: 5px solid rgba(0, 0, 0, 0.8);
 				}
 			}
 		}
 		> .input {
 			flex: 1;
-			margin-left: 1rem;
+			margin-left: 10px;
 			> input {
-				border-radius: 0.3rem;
+				border-radius: 3px;
 				width: 100%;
 			}
 		}
diff --git a/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue b/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue
index eb5c28b..a078577 100644
--- a/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue
+++ b/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue
@@ -3,12 +3,12 @@
 		<div class="preview" v-if="url">
 			<img :src="url" @error="onChange(null)" />
 			<div class="close" @click="onChange(null)">
-				<svg-icon name="close-border" size="16" />
+				<svg-icon name="close-border" size="16" size-unit="px" />
 			</div>
 		</div>
 		<div class="control" v-else>
-			<div class="icon"><svg-icon name="upload" size="17" /></div>
-			<p class="txt">{{ tip }}</p>
+			<div class="icon"><svg-icon name="upload" size="17" size-unit="px" /></div>
+			<div class="txt">{{ tip }}</div>
 			<button @click="onSelectFile">Select File</button>
 		</div>
 	</div>
@@ -45,30 +45,29 @@
 <style lang="less" scoped>
 	.upload-file {
 		width: 100%;
-		height: 9.9rem;
-		border-radius: 1rem;
+		height: 99px;
+		border-radius: 10px;
 		background-color: #f0f0f0;
-		// padding: 0 1.7rem;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		> .control {
 			text-align: center;
 			> .txt {
-				margin-top: 0.6rem;
-				margin-bottom: 0.8rem;
-				font-size: 0.8rem;
+				margin-top: 6px;
+				margin-bottom: 8px;
+				font-size: 8px;
 				color: #7c7c7c;
 			}
 			> button {
 				box-shadow: 0px 0.75px 0px 0px #00000005;
-				min-width: 3.9rem;
-				height: 1.3rem;
-				border-radius: 0.23rem;
+				min-width: 39px;
+				height: 13px;
+				border-radius: 2.3px;
 				background-color: #fff;
-				font-size: 0.6rem;
+				font-size: 6px;
 				color: #000;
-				border: 0.05rem solid #d9d9d9;
+				border: 1px solid #d9d9d9;
 				cursor: pointer;
 				&:active {
 					opacity: 0.6;
@@ -76,8 +75,8 @@
 			}
 		}
 		> .preview {
-			width: 8rem;
-			height: 8rem;
+			width: 80px;
+			height: 80px;
 			position: relative;
 			> img {
 				height: 100%;
@@ -86,8 +85,8 @@
 			}
 			> .close {
 				position: absolute;
-				top: 0.01rem;
-				right: 0.01rem;
+				top: 0.1px;
+				right: 0.1px;
 				border-radius: 50%;
 				background-color: #fff;
 				cursor: pointer;
diff --git a/src/components/Canvas/FlowCanvas/index.vue b/src/components/Canvas/FlowCanvas/index.vue
index d303a14..5fd75b5 100644
--- a/src/components/Canvas/FlowCanvas/index.vue
+++ b/src/components/Canvas/FlowCanvas/index.vue
@@ -1,100 +1,151 @@
 <template>
 	<fullscreen-dialog v-model="dialogVisible">
 		<div class="flow-canvas">
-			<div
-				class="canvas-main"
-				ref="canvasMain"
-				@mousedown="onMouseDown"
-				@wheel="onMouseWheel"
+			<VueFlow
+				ref="vueFlow"
+				:nodes="nodes"
+				:edges="edges"
+				:nodes-draggable="true"
+				@nodes-initialized="layoutGraph('LR')"
+				@node-drag-stop="handleNodeDragStop"
 			>
-				<div
-					class="canvas-content"
-					:style="{
-						top: `${data.y}px`,
-						left: `${data.x}px`,
-						transform: `scale(${data.scale})`
-					}"
-				>
-					<card type="to-real-style" />
-					<card type="scene-composition" />
-					<card type="color-palette" />
-					<card type="to-video" />
-					<card type="to-3d-model" />
-					<card type="to-cad" />
-					<card type="add-print" />
-					<card type="edit-material" />
-				</div>
-			</div>
+				<template #node-InputNode="nodeProps">
+					<inputNode v-bind="nodeProps">
+						<template v-slot:content>
+							<component
+								:is="nodeProps.data.component"
+								:type="nodeProps.data.type_"
+							/>
+						</template>
+					</inputNode>
+				</template>
+				<template #node-SecondaryNode="nodeProps">
+					<secondaryNode v-bind="nodeProps">
+						<template v-slot:content>
+							<component
+								:is="nodeProps.data.component"
+								:type="nodeProps.data.type_"
+							/>
+						</template>
+					</secondaryNode>
+				</template>
+			</VueFlow>
 		</div>
 	</fullscreen-dialog>
 </template>
 
 <script setup lang="ts">
+	import { VueFlow, useVueFlow } from '@vue-flow/core'
+	import { useLayout } from '@/utils/treeDiagram'
+	import secondaryNode from '../components/node/secondaryNode.vue'
+	import inputNode from '../components/node/InputNode.vue'
 	import FullscreenDialog from '../components/fullscreen-dialog.vue'
-	import MyInfo from '@/components/MyInfo.vue'
 	import card from './components/cards/index.vue'
-	import { computed, ref, markRaw, onMounted, reactive } from 'vue'
+	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
 	import { useGlobalStore } from '@/stores'
 	const globalStore = useGlobalStore()
-	const dialogVisible = ref(true)
-	window.dialogVisible = dialogVisible
-	const data = reactive({
-		x: 100,
-		y: 200,
-		scale: 1
-	})
-	const canvasMain = ref<HTMLDivElement>()
-	const onMouseDown = (e: MouseEvent) => {
-		if (e.button !== 1) return
-		const ox = data.x
-		const oy = data.y
-		const X = e.clientX
-		const Y = e.clientY
-		const onMouseMove = (e: MouseEvent) => {
-			const dx = e.clientX - X
-			const dy = e.clientY - Y
-			data.x = ox + dx
-			data.y = oy + dy
-		}
-		const onMouseUp = (e: MouseEvent) => {
-			document.removeEventListener('mousemove', onMouseMove)
-			document.removeEventListener('mouseup', onMouseUp)
-		}
-		document.addEventListener('mousemove', onMouseMove)
-		document.addEventListener('mouseup', onMouseUp)
-	}
-	const onMouseWheel = (e: WheelEvent) => {
-		var delta = e.deltaY
-		var scale = data.scale - delta / 1000
-		if (scale < 0.2) scale = 0.2
-		if (scale > 10) scale = 10
-		data.scale = scale
-	}
-	onMounted(() => {
-		globalStore.setHomeLeftNavCollapse(true)
-	})
-</script>
+	const dialogVisible = ref(false)
+	const position = { x: 0, y: 0 }
 
+	const 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_: 'to-3d-model' }
+		}
+	])
+	const edges = computed(() => {
+		const arr = []
+		nodes.value.forEach((node, index) => {
+			if (index < nodes.value.length - 1) {
+				const id = node.id
+				const target = nodes.value[index + 1].id
+				arr.push({
+					id: `el-${id}-${target}`,
+					source: id,
+					target: target,
+					type: 'smoothstep'
+				})
+			}
+		})
+		return arr
+	})
+	const vueFlow = ref<any>()
+	onMounted(() => {
+		window.vueFlow = vueFlow
+		window.nodes = nodes
+		window.test = () => {
+			return vueFlow.value
+		}
+		window.addaaaaa = () => {
+			const lastNode = vueFlow.value.getNode(nodes.value[nodes.value.length - 1].id)
+			const width = lastNode.dimensions.width
+			const x = lastNode.position.x
+			const y = lastNode.position.y
+			nodes.value.push({
+				id: '4',
+				type: 'SecondaryNode',
+				class: 'custom-node',
+				data: { id: '主 1', component: card, type_: 'to-3d-model' },
+				position: {
+					x: width + x + 50,
+					y: y
+				}
+			})
+		}
+	})
+	const handleNodeDragStop = (e: any) => {
+		const { node } = e
+		const { id, position } = node
+		nodes.value.forEach((item) => {
+			if (item.id === id) {
+				item.position.x = position.x
+				item.position.y = position.y
+			}
+		})
+	}
+	const { fitView } = useVueFlow()
+	const { layout } = useLayout()
+	const index = ref(0)
+	async function layoutGraph(direction) {
+		if (index.value > 0) return
+		index.value++
+		setTimeout(() => {
+			nodes.value = layout(nodes.value, edges.value, direction)
+			console.log(nodes.value)
+			nextTick(() => {
+				fitView()
+			})
+		}, 0)
+	}
+</script>
+<style lang="less">
+	@import '@vue-flow/core/dist/style.css';
+	@import '@vue-flow/core/dist/theme-default.css';
+</style>
 <style lang="less" scoped>
 	.flow-canvas {
 		width: 100%;
 		height: 100%;
-		background-color: #fcf8f1;
-		position: relative;
-		overflow: hidden;
-		> .canvas-main {
+		> .vue-flow {
 			width: 100%;
 			height: 100%;
-			position: relative;
-			> .canvas-content {
-				position: absolute;
-				width: auto;
-				height: auto;
-				display: flex;
-				align-items: flex-start;
-				gap: 5rem;
-				transform-origin: top left;
-			}
 		}
 	}
 </style>
diff --git a/src/components/Canvas/components/fullscreen-dialog.vue b/src/components/Canvas/components/fullscreen-dialog.vue
index b2c2fc6..b58726b 100644
--- a/src/components/Canvas/components/fullscreen-dialog.vue
+++ b/src/components/Canvas/components/fullscreen-dialog.vue
@@ -55,7 +55,7 @@
 		left: 0;
 		overflow: hidden;
 		z-index: 1000;
-		background-color: rgba(0, 0, 0, 0);
+		background-color: #FFFCF4;
 		transition: opacity var(--transition-time);
 		opacity: 0;
 		&.show {
diff --git a/src/components/Canvas/components/node/InputNode.vue b/src/components/Canvas/components/node/InputNode.vue
new file mode 100644
index 0000000..ce5ae2f
--- /dev/null
+++ b/src/components/Canvas/components/node/InputNode.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+	import { Handle, Position } from '@vue-flow/core'
+	import { ref } from 'vue'
+	const props = defineProps<{
+		data: {
+			type: Object
+			default: () => {
+				id: ''
+			}
+		}
+	}>()
+</script>
+
+<template>
+	<div class="node start">
+		<Handle type="source" style="top: 40px" id="Right" :position="Position.Right" />
+		<div class="item">
+			<slot name="content"></slot>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+	.node {
+		cursor: initial;
+	}
+</style>
diff --git a/src/views/canvas1/components/node/secondaryNode.vue b/src/components/Canvas/components/node/secondaryNode.vue
similarity index 52%
rename from src/views/canvas1/components/node/secondaryNode.vue
rename to src/components/Canvas/components/node/secondaryNode.vue
index ca2d09e..e423cfb 100644
--- a/src/views/canvas1/components/node/secondaryNode.vue
+++ b/src/components/Canvas/components/node/secondaryNode.vue
@@ -1,21 +1,20 @@
 <script lang="ts" setup>
-import { Handle, Position } from '@vue-flow/core'
-import { ref } from 'vue'
-const props = defineProps<{
-	data: {
-		type: Object,
-		default: () => ({
-			id: '',
-		})
-	},
-}>()
-
+	import { Handle, Position } from '@vue-flow/core'
+	import { ref } from 'vue'
+	const props = defineProps<{
+		data: {
+			type: Object
+			default: () => {
+				id: ''
+			}
+		}
+	}>()
 </script>
 <!-- source输入，target输出 -->
 <template>
 	<div class="node">
-		<Handle type="target" style="top: 40px;" id="Left" :position="Position.Left" />
-		<Handle type="source" style="top: 40px;" id="Right" :position="Position.Right" />
+		<Handle type="target" style="top: 40px" id="Left" :position="Position.Left" />
+		<Handle type="source" style="top: 40px" id="Right" :position="Position.Right" />
 		<!-- <Handle type="source" id="Right" :position="Position.Right" />
 		<Handle type="target" id="Left" :position="Position.Left" /> -->
 		<!-- <div>{{ props.data.id }}</div> -->
@@ -26,8 +25,7 @@ const props = defineProps<{
 </template>
 
 <style lang="less" scoped>
-.node{
-	.item{
+	.node {
+		cursor: initial;
 	}
-}
 </style>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index e00e238..5b303ce 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -3,7 +3,7 @@
     <svg
       :class="svgClass"
       v-bind="$attrs"
-      :style="{ color: color, fontSize: size/10 + 'rem' }"
+      :style="{ color: color, fontSize: sizeUnit === 'rem' ? size/10 + 'rem' : size + sizeUnit }"
     >
       <use :href="iconName"></use>
     </svg>
@@ -25,6 +25,10 @@ const props = defineProps({
     type: [Number, String],
     default: 16,
   },
+  sizeUnit: {
+    type: String,
+    default: 'rem',
+  }
 });
 const iconName = computed(() => `#icon-${props.name}`);
 const svgClass = computed(() => {
diff --git a/src/main.ts b/src/main.ts
index d148cc9..72485ab 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,7 +9,6 @@ import SvgIcon from "@/components/SvgIcon/index.vue";
 import "virtual:svg-icons-register";
 
 import i18n from "./lang/index";
-
 import flexible from "./utils/flexible.js";
 
 import "./router/router-config"  // 路由守卫，做动态路由的地方
@@ -18,11 +17,11 @@ import 'element-plus/dist/index.css'
 
 const app = createApp(App)
 app.use(router)
-.use(ElementPlus)
-.use(store)
-.component("SvgIcon", SvgIcon)
-.use(i18n)
-.mount('#app')
+	.use(ElementPlus)
+	.use(store)
+	.component("SvgIcon", SvgIcon)
+	.use(i18n)
+	.mount('#app')
 
 
 flexible();
diff --git a/src/utils/treeDiagram.js b/src/utils/treeDiagram.js
index d827306..e1f26ff 100644
--- a/src/utils/treeDiagram.js
+++ b/src/utils/treeDiagram.js
@@ -47,7 +47,7 @@ export function useLayout() {
 		}
 
 		dagre.layout(dagreGraph)
-
+		
 		// set nodes with updated positions
 		return nodes.map((node) => {
 			const nodeWithPosition = dagreGraph.node(node.id)
@@ -75,7 +75,6 @@ export function useLayout() {
 					targetPosition = Position.Top
 					sourcePosition = Position.Bottom
 			}
-
 			return {
 				...node,
 				targetPosition,
diff --git a/src/views/canvas1/components/cards/add-print.vue b/src/views/canvas1/components/cards/add-print.vue
deleted file mode 100644
index c1907f9..0000000
--- a/src/views/canvas1/components/cards/add-print.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-	<!-- 添加印花 -->
-	<div class="add-print">
-		<p class="label">Print</p>
-		<upload-file v-model="data.file" />
-		<p class="label">Settings</p>
-		<div class="settings">
-			<div>
-				<p class="label">Angle</p>
-				<my-input
-					v-model="data.setting.angle"
-					type="number"
-					after="°"
-					:min="-180"
-					:max="180"
-					icon="angle"
-					icon-size="8"
-				/>
-			</div>
-			<div>
-				<span class="label">Scale</span>
-				<slider
-					:min="1"
-					:max="1000"
-					:tipFormatter="(v) => `${v}%`"
-					v-model="data.setting.scale"
-				/>
-			</div>
-			<div>
-				<span class="label">Gap X</span>
-				<slider
-					:min="0"
-					:max="1000"
-					:tipFormatter="(v) => `${v}px`"
-					v-model="data.setting.gap.x"
-				/>
-			</div>
-			<div>
-				<span class="label">Gap Y</span>
-				<slider
-					:min="0"
-					:max="1000"
-					:tipFormatter="(v) => `${v}px`"
-					v-model="data.setting.gap.y"
-				/>
-			</div>
-			<div>
-				<span class="label">Offset</span>
-				<offset-tool v-model="data.setting.offset" :show-dish="false" />
-			</div>
-			<div class="offset">
-				<offset-tool v-model="data.setting.offset" :show-input="false" />
-			</div>
-		</div>
-		<p class="label">Prompt</p>
-		<my-textarea v-model="data.prompt" />
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, onMounted } from 'vue'
-	import myTextarea from '../tools/my-textarea.vue'
-	import uploadFile from '../tools/upload-file.vue'
-	import myInput from '../tools/my-input.vue'
-	import offsetTool from '../tools/offset-tool.vue'
-	import slider from '../tools/slider.vue'
-
-	const data = reactive({
-		prompt: '',
-		setting: {
-			angle: 0,
-			scale: 100,
-			gap: {
-				x: 0,
-				y: 0
-			},
-			offset: {
-				x: 50,
-				y: 50
-			}
-		},
-		file: null
-	})
-
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.add-print {
-		> .settings {
-			margin: 0 1.1rem;
-			> div {
-				display: flex;
-				align-items: center;
-				margin-bottom: 1rem;
-				&:last-child {
-					margin-bottom: 0;
-				}
-				&.offset {
-					justify-content: center;
-				}
-				> .label {
-					width: 5.5rem;
-					font-size: 1rem;
-				}
-				&:not(.offset) > div {
-					flex: 1;
-				}
-				> .slider {
-					--slider-thumb-color1: #000;
-					--slider-thumb-color2: #eee;
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/cards/color-palette.vue b/src/views/canvas1/components/cards/color-palette.vue
deleted file mode 100644
index e4ee1ee..0000000
--- a/src/views/canvas1/components/cards/color-palette.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-	<!-- 颜色调色板 -->
-	<div class="color-palette">
-		<p class="label">Choose Color</p>
-		<div class="color-list">
-			<div
-				class="color-item"
-				v-for="(v, i) in data.colors"
-				:key="i"
-				:style="{ background: v }"
-			></div>
-			<div class="add" @click="addColor">
-				<svg-icon name="add" size="12rem" color="#fff" />
-				<input type="color" ref="colorInput" @change="changeColor" />
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, onMounted, ref } from 'vue'
-	const data = reactive({
-		colors: ['#FF4747', '#F96060', '#FFB1B1', '#FA7B7B', '#FF9090']
-	})
-	const colorInput = ref<HTMLInputElement>()
-	// 添加颜色
-	const addColor = () => {
-		colorInput.value?.click()
-	}
-	const changeColor = (e: Event) => {
-		const target = e.target as HTMLInputElement
-		data.colors.push(target.value)
-	}
-
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.color-palette {
-		min-height: 14rem;
-		> .color-list {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 0.5rem;
-			> div {
-				width: 3.5rem;
-				height: 3.5rem;
-			}
-			> .add {
-				border: 0.1rem solid rgba(0, 0, 0, 0.1);
-				background-color: rgba(0, 0, 0, 0.1);
-				position: relative;
-				> input {
-					position: absolute;
-					width: 0;
-					height: 0;
-					border: none;
-					padding: 0;
-					top: 0;
-					left: 0;
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/cards/edit-material.vue b/src/views/canvas1/components/cards/edit-material.vue
deleted file mode 100644
index e2ec238..0000000
--- a/src/views/canvas1/components/cards/edit-material.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<!-- 编辑素材 -->
-	<div class="edit-material">
-		<p class="label">Material</p>
-		<upload-file v-model="data.file" />
-		<p class="label">Prompt</p>
-		<my-textarea v-model="data.prompt" />
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, onMounted } from 'vue'
-	import myTextarea from '../tools/my-textarea.vue'
-	import uploadFile from '../tools/upload-file.vue'
-	const data = reactive({
-		prompt: '',
-		file: null
-	})
-
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.edit-material {
-	}
-</style>
diff --git a/src/views/canvas1/components/cards/index.vue b/src/views/canvas1/components/cards/index.vue
deleted file mode 100644
index a82e11f..0000000
--- a/src/views/canvas1/components/cards/index.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-	<div class="card">
-		<div class="header">
-			<svg-icon :name="currentComponent?.type" color="#fff" />
-			<span>{{ currentComponent?.title }}</span>
-			<div class="add" @click="emit('add')"><svg-icon name="add" size="14" /></div>
-		</div>
-		<div class="body">
-			<component :is="currentComponent?.component" ref="componentRef" />
-		</div>
-		<div class="footer">
-			<button @click="onGenerateClick">
-				<svg-icon name="xingxing" size="16" />
-				<span>Generate</span>
-			</button>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { computed, ref, markRaw, onMounted } from 'vue'
-	import ToRealStyle from './to-real-style.vue'
-	import SceneComposition from './scene-composition.vue'
-	import ColorPalette from './color-palette.vue'
-	import ToVideo from './to-video.vue'
-	import To3DModel from './to-3d-model.vue'
-	import AddPrint from './add-print.vue'
-	import ToCAD from './to-cad.vue'
-	import EditMaterial from './edit-material.vue'
-	const components = [
-		{
-			type: 'to-real-style',
-			title: 'To Real Style',
-			component: ToRealStyle
-		},
-		{
-			type: 'scene-composition',
-			title: 'Scene Composition',
-			component: SceneComposition
-		},
-		{
-			type: 'color-palette',
-			title: 'Color Palette',
-			component: ColorPalette
-		},
-		{
-			type: 'to-video',
-			title: 'To Video',
-			component: ToVideo
-		},
-		{
-			type: 'to-3d-model',
-			title: 'To 3D Model',
-			component: To3DModel
-		},
-		{
-			type: 'to-cad',
-			title: 'To CAD',
-			component: ToCAD
-		},
-		{
-			type: 'add-print',
-			title: 'Add Print',
-			component: AddPrint
-		},
-		{
-			type: 'edit-material',
-			title: 'Edit Material',
-			component: EditMaterial
-		}
-	]
-	const emit = defineEmits(['add', 'generate'])
-	const props = defineProps({
-		type: {
-			type: String as () =>
-				| 'to-real-style'
-				| 'scene-composition'
-				| 'color-palette'
-				| 'to-video'
-				| 'to-3d-model'
-				| 'to-cad'
-				| 'add-print'
-				| 'edit-material',
-			default: 'to-real-style'
-		}
-	})
-	const currentComponent = computed(() => {
-		return components.find((item) => item.type === props.type)
-	})
-	const componentRef = ref(null)
-	const onGenerateClick = () => {
-		const data = { ...componentRef.value.data }
-		console.log(data)
-		emit('generate')
-	}
-</script>
-
-<style lang="less" scoped>
-	.card {
-		width: 25rem;
-		height: auto;
-		--border-radius: 1.6rem;
-		border-radius: var(--border-radius);
-		background-color: #fff;
-		> .header {
-			border-radius: var(--border-radius) var(--border-radius) 0 0;
-			height: 5rem;
-			background: #ff7a51;
-			display: flex;
-			align-items: center;
-			padding-left: 1.6rem;
-			position: relative;
-			> .c-svg {
-				width: auto;
-				height: auto;
-				margin-right: 0.6rem;
-			}
-			> span {
-				font-family: Semibold;
-				font-size: 1.6rem;
-				color: #fff;
-			}
-			> .add {
-				position: absolute;
-				width: 3.2rem;
-				height: 3.2rem;
-				border: 0.2rem solid #fff;
-				bottom: -1.6rem;
-				right: -1.6rem;
-				background-color: #ed8936;
-				border-radius: 50%;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: #fff;
-				font-size: 2.5rem;
-				box-shadow: 0 0.8rem 2rem 0 #71809633;
-				cursor: pointer;
-			}
-		}
-		> .body {
-			padding: 1.6rem 1.3rem;
-			&:deep(> *) {
-				width: 100%;
-				> * {
-					margin-bottom: 1rem;
-					&:last-child {
-						margin-bottom: 0;
-					}
-				}
-				> .label {
-					font-size: 1.2rem;
-					font-family: Medium;
-					color: #000;
-				}
-			}
-		}
-		> .footer {
-			margin-bottom: 1.6rem;
-			display: flex;
-			flex-direction: row-reverse;
-			padding: 0 1.3rem;
-			> button {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: 11rem;
-				height: 2.8rem;
-				border-radius: 0.5rem;
-				background-color: #fffcf4;
-				border: 1px solid #ffcf90;
-				font-size: 1.2rem;
-				font-family: SemiBold;
-				cursor: pointer;
-				&:active {
-					opacity: 0.5;
-				}
-				> .c-svg {
-					width: auto;
-					height: auto;
-					margin-right: 0.4rem;
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/cards/scene-composition.vue b/src/views/canvas1/components/cards/scene-composition.vue
deleted file mode 100644
index 65ae059..0000000
--- a/src/views/canvas1/components/cards/scene-composition.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-	<!-- 场景构图 -->
-	<div class="scene-composition">
-		<p class="label">Prompt</p>
-		<my-textarea v-model="data.prompt" />
-		<p class="label">Choose Style</p>
-		<div class="style-list">
-			<div
-				class="item"
-				v-for="v in styleList"
-				:key="v.value"
-				:class="{ active: data.styles.includes(v.value) }"
-				@click="onClickStyle(v.value)"
-			>
-				<span class="icon"><svg-icon name="add" color="#0D0D0D" size="8" /></span>
-				<span class="label">{{ v.label }}</span>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { computed, ref, reactive, onMounted } from 'vue'
-	import myTextarea from '../tools/my-textarea.vue'
-	const styleList = ref([
-		{ label: 'Colorful', value: 'Colorful' },
-		{ label: 'Minimalist', value: 'Minimalist' },
-		{ label: 'Modernist', value: 'Modernist' },
-		{ label: 'Bauhaus', value: 'Bauhaus' },
-		{ label: 'Mintage', value: 'Mintage' },
-		{ label: 'Industrial', value: 'Industrial' },
-		{ label: 'Futuristic', value: 'Futuristic' },
-		{ label: 'Elegant', value: 'Elegant' },
-		{ label: 'Organic', value: 'Organic' },
-		{ label: 'Calm', value: 'Calm' },
-		{ label: 'Abstract', value: 'Abstract' },
-		{ label: 'Kitsch-core', value: 'Kitsch-core' },
-		{ label: 'Sophisticated', value: 'Sophisticated' },
-		{ label: 'Maximalism', value: 'Maximalism' },
-		{ label: 'Clean', value: 'Clean' },
-		{ label: 'Bright Colors', value: 'Bright Colors' },
-		{ label: 'Luxurious', value: 'Luxurious' },
-		{ label: 'Bold Colors', value: 'Bold Colors' },
-		{ label: 'Brutalism', value: 'Brutalism' }
-	])
-	const data = reactive({
-		prompt: '',
-		styles: ['Colorful', 'Modernist']
-	})
-	const onClickStyle = (value: string) => {
-		if (data.styles.includes(value)) {
-			data.styles = data.styles.filter((v) => v !== value)
-		} else {
-			data.styles.push(value)
-		}
-	}
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.scene-composition {
-		> .style-list {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 0.829rem 0.55rem;
-			> .item {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 0.5rem 0.7rem;
-				font-family: Medium;
-				border-radius: 2rem;
-				font-size: 0.829rem;
-				border: 0.05rem solid #e4e4e7;
-				color: #000;
-				> .icon {
-					margin-right: 0.4rem;
-				}
-				&.active {
-					border-color: #0095ff;
-					background-color: rgba(0, 149, 255, 0.05);
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/cards/to-3d-model.vue b/src/views/canvas1/components/cards/to-3d-model.vue
deleted file mode 100644
index 7cb286f..0000000
--- a/src/views/canvas1/components/cards/to-3d-model.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<!-- 转3D模型 -->
-	<div class="to-3d-model">
-		<p class="label">Image</p>
-		<upload-file v-model="data.file" />
-		<p class="label">Prompt</p>
-		<my-textarea v-model="data.prompt" />
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, onMounted } from 'vue'
-	import myTextarea from '../tools/my-textarea.vue'
-	import uploadFile from '../tools/upload-file.vue'
-	const data = reactive({
-		prompt: '',
-		file: null
-	})
-
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.to-3d-model {
-	}
-</style>
diff --git a/src/views/canvas1/components/cards/to-cad.vue b/src/views/canvas1/components/cards/to-cad.vue
deleted file mode 100644
index c84d459..0000000
--- a/src/views/canvas1/components/cards/to-cad.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<!-- 转CAD -->
-	<div class="to-cad">
-		<p class="label">3D Model</p>
-		<upload-file v-model="data.file" />
-		<p class="label">Prompt</p>
-		<my-textarea v-model="data.prompt" />
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, onMounted } from 'vue'
-	import myTextarea from '../tools/my-textarea.vue'
-	import uploadFile from '../tools/upload-file.vue'
-	const data = reactive({
-		prompt: '',
-		file: null
-	})
-
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.to-cad {
-	}
-</style>
diff --git a/src/views/canvas1/components/cards/to-real-style.vue b/src/views/canvas1/components/cards/to-real-style.vue
deleted file mode 100644
index a6f4e2b..0000000
--- a/src/views/canvas1/components/cards/to-real-style.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-	<!-- 转换为真实图 -->
-	<div class="to-real-style">
-		<p class="label">Prompt</p>
-		<my-textarea v-model="data.prompt" />
-		<div class="shortcut-list">
-			<div
-				class="item"
-				v-for="v in shortcutList"
-				:key="v.value"
-				@click="data.prompt = v.value"
-			>
-				{{ v.label }}
-			</div>
-		</div>
-		<p class="label">Size</p>
-		<pixel-ratio-selection v-model="data.pixelRatio" />
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { computed, ref, reactive, onMounted } from 'vue'
-	import myTextarea from '../tools/my-textarea.vue'
-	import pixelRatioSelection from '../tools/pixel-ratio-selection.vue'
-	const shortcutList = ref([
-		{
-			label: 'Change the...',
-			value: 'Change the...'
-		},
-		{
-			label: 'Bright Colors...',
-			value: 'Bright Colors...'
-		},
-		{
-			label: 'Make the...',
-			value: 'Make the...'
-		},
-		{
-			label: 'Imagine...',
-			value: 'Imagine...'
-		},
-		{
-			label: 'Wood Materials with...',
-			value: 'Wood Materials with...'
-		}
-	])
-	const data = reactive({
-		prompt: '',
-		pixelRatio: '1:1',
-		file: null
-	})
-
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.to-real-style {
-		> .shortcut-list {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 1rem 0.4rem;
-			> .item {
-				display: flex;
-				align-items: center;
-				padding: 0.5rem 0.3rem;
-				font-family: Medium;
-				border-radius: 0.3rem;
-				font-size: 1rem;
-				border: 0.05rem solid #e4e4e7;
-				background: #f0f0f0;
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/cards/to-video.vue b/src/views/canvas1/components/cards/to-video.vue
deleted file mode 100644
index 8328e03..0000000
--- a/src/views/canvas1/components/cards/to-video.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-	<!-- 转视频 -->
-	<div class="to-video">
-		<p class="label">Frames</p>
-		<div class="frames">
-			<upload-file v-model="data.first_file" tip="First Frame" />
-			<upload-file v-model="data.last_file" tip="Last Frame" />
-		</div>
-		<p class="label">Size</p>
-		<pixel-ratio-selection v-model="data.pixelRatio" />
-		<div class="label">
-			<span>Aspect Ratio</span>
-			<span>Time</span>
-		</div>
-		<div class="select">
-			<el-select v-model="data.aspectRatio">
-				<el-option v-for="v in aspectRatioList" :key="v" :label="v" :value="v" />
-			</el-select>
-			<el-select v-model="data.time">
-				<el-option v-for="v in timeList" :key="v" :label="v" :value="v" />
-			</el-select>
-		</div>
-		<p class="label">Prompt</p>
-		<my-textarea v-model="data.prompt" />
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, ref } from 'vue'
-	import myTextarea from '../tools/my-textarea.vue'
-	import uploadFile from '../tools/upload-file.vue'
-	import pixelRatioSelection from '../tools/pixel-ratio-selection.vue'
-	const aspectRatioList = ref(['720p', '1080p', '1440p', '2160p', '1k', '2k'])
-	const timeList = ref(['5s', '10s', '15s', '20s', '30s', '60s'])
-	const data = reactive({
-		first_file: null,
-		last_file: null,
-		pixelRatio: '1:1',
-		aspectRatio: '720p',
-		time: '5s',
-		prompt: ''
-	})
-
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.to-video {
-		> .frames {
-			display: flex;
-			gap: 0.5rem;
-		}
-		> .select,
-		> div.label {
-			display: flex;
-			gap: 1.3rem;
-			> * {
-				flex: 1;
-			}
-		}
-		> .select {
-			&:deep(.el-select) {
-				--el-select-input-font-size: 1.2rem;
-				.el-select__wrapper {
-					font-size: 1.2rem;
-					min-height: 0;
-					height: 2.8rem;
-					padding: 0 0.8rem;
-				}
-				.el-select__selected-item,
-				.el-select__input-wrapper,
-				.el-select__placeholder {
-					line-height: normal;
-				}
-				.el-select__input {
-					height: 2.4rem;
-				}
-			}
-		}
-	}
-	.el-popper{
-		.el-select-dropdown{
-			li{
-				padding-left: 0.8rem;
-				height: 3rem;
-				line-height: 3rem;;
-				font-size: 1.2rem;
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/node/InputNode.vue b/src/views/canvas1/components/node/InputNode.vue
deleted file mode 100644
index cce43fc..0000000
--- a/src/views/canvas1/components/node/InputNode.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts" setup>
-import { Handle, Position } from '@vue-flow/core'
-import { ref } from 'vue'
-const props = defineProps<{
-	data: {
-		type: Object,
-		default: () => ({
-			id: '',
-		})
-	}
-}>()
-
-</script>
-
-<template>
-	<div class="node start">
-		<Handle type="source" style="top: 40px;" id="Right" :position="Position.Right" />
-		<div class="item">
-			<slot name="content"></slot>
-		</div>
-	</div>
-</template>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/src/views/canvas1/components/tools/my-input.vue b/src/views/canvas1/components/tools/my-input.vue
deleted file mode 100644
index a413a07..0000000
--- a/src/views/canvas1/components/tools/my-input.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-	<div class="my-input">
-		<span class="decorate"></span>
-		<span v-show="icon" class="icon">
-			<svg-icon :name="icon" :size="iconSize" />
-		</span>
-		<span v-show="before" class="before">{{ before }}</span>
-		<input v-bind="attrs" :value="modelValue" @input="onInput" />
-		<span v-show="after" class="after">{{ after }}</span>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { ref, useAttrs, watch } from 'vue'
-	const props = defineProps({
-		modelValue: { type: [String, Number] },
-		icon: { default: '', type: String },
-		iconSize: { default: '10', type: [Number, String] },
-		before: { default: '', type: String },
-		after: { default: '', type: String }
-	})
-	const attrs = useAttrs()
-	const emit = defineEmits(['update:modelValue', 'input'])
-	const onInput = (e) => {
-		var value = e.target.value
-		if (attrs.type === 'number') value = Number(value)
-		emit('update:modelValue', value)
-		emit('input', value)
-	}
-</script>
-<style scoped lang="less">
-	.my-input {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		border: 1px solid rgba(230, 230, 231, 1);
-		border-radius: 0.17rem;
-		height: 1.7rem;
-		padding: 0 0.4rem 0 0.2rem;
-		> .decorate {
-			width: 0.2rem;
-			background-color: rgba(230, 230, 231, 1);
-			border-radius: 0.3rem;
-			height: 85%;
-			margin-right: 0.4rem;
-		}
-		> .iconfont {
-			font-size: 1rem;
-			color: #000;
-			margin-right: 0.2rem;
-		}
-		> .before {
-			font-size: 1rem;
-			color: #000;
-			margin-right: 0.2rem;
-		}
-		> .after {
-			font-size: 1rem;
-			color: #000;
-			margin-left: 0.1rem;
-		}
-		> input {
-			font-size: 1rem;
-			width: 0;
-			flex: 1;
-			text-align: right;
-			outline: none;
-			border: none;
-			background-color: transparent;
-			padding: 0;
-			-moz-appearance: textfield; /* Firefox */
-			&::-webkit-outer-spin-button,
-			&::-webkit-inner-spin-button {
-				-webkit-appearance: none;
-				margin: 0;
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/tools/my-textarea.vue b/src/views/canvas1/components/tools/my-textarea.vue
deleted file mode 100644
index f62a6c2..0000000
--- a/src/views/canvas1/components/tools/my-textarea.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-	<div class="my-textarea">
-		<textarea
-			:placeholder="placeholder"
-			:value="modelValue"
-			@input="onInput"
-			@change="onChange"
-		></textarea>
-		<div class="bths">
-			<button><svg-icon name="mobang" size="10" /></button>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { computed, ref, markRaw, onMounted } from 'vue'
-	const emit = defineEmits(['update:modelValue', 'input', 'change'])
-	const props = defineProps({
-		modelValue: { type: String },
-		placeholder: {
-			type: String,
-			default: 'Enter the scene you want to describe...'
-		}
-	})
-	const onInput = (e) => {
-		const value = e.target.value
-		emit('update:modelValue', value)
-		emit('input', value)
-	}
-	const onChange = (e) => {
-		emit('change', e.target.value)
-	}
-</script>
-
-<style lang="less" scoped>
-	.my-textarea {
-		width: 100%;
-		height: 11.5rem;
-		border: 0.1rem solid #e4e4e7;
-		border-radius: 1rem;
-		padding: 1rem 0.5rem;
-		display: flex;
-		flex-direction: column;
-		> textarea {
-			padding: 0 0.5rem;
-			width: 100%;
-			flex: 1;
-			border: none;
-			outline: none;
-			resize: none;
-			font-family: Medium;
-			font-size: 1rem;
-			color: #333;
-			&::placeholder {
-				color: #c9c9c9;
-			}
-			&::-webkit-scrollbar {
-				width: 0.4rem;
-			}
-			&::-webkit-scrollbar-thumb {
-				border-radius: 0.4rem;
-				background: rgba(0, 0, 0, 0.2);
-			}
-			&::-webkit-scrollbar-track {
-				border-radius: 0.4rem;
-				background: rgba(0, 0, 0, 0.1);
-			}
-		}
-		> .bths {
-			padding: 0.5rem 0.5rem 0;
-			> button {
-				width: 2rem;
-				height: 2rem;
-				padding: 0;
-				border-radius: 0.4rem;
-				background-color: #f0f0f0;
-				border: 1px solid #e4e4e7;
-				&:active {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/tools/offset-tool.vue b/src/views/canvas1/components/tools/offset-tool.vue
deleted file mode 100644
index 0bf804f..0000000
--- a/src/views/canvas1/components/tools/offset-tool.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<template>
-	<div class="offset-tool">
-		<div class="input" v-show="showInput">
-			<my-input v-model="left" type="number" before="X" after="%" :min="-100" :max="100" />
-			<my-input v-model="top" type="number" before="Y" after="%" :min="-100" :max="100" />
-		</div>
-		<div
-			class="dish"
-			@mousedown="mousedown"
-			@touchstart="mousedown"
-			ref="dishRef"
-			v-show="showDish"
-		>
-			<img src="/src/assets/images/icon/xyz.png" />
-			<span class="ball" :style="ballStyle"></span>
-			<span class="tip x">X: {{ left }}%</span>
-			<span class="tip y">Y: {{ top }}%</span>
-			<span class="line x"></span>
-			<span class="line y"></span>
-			<span class="line z" :style="lineZStyle"></span>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { ref, watch, computed } from 'vue'
-	import MyInput from './my-input.vue'
-	const props = defineProps({
-		modelValue: { type: Object as () => { x: number; y: number } },
-		showInput: {
-			type: Boolean,
-			default: true
-		},
-		showDish: {
-			type: Boolean,
-			default: true
-		}
-	})
-	const emit = defineEmits(['update:modelValue', 'change', 'input'])
-	// 工具的实际坐标 -100 ~ 100
-	const top = ref(Math.round(props.modelValue.y))
-	const left = ref(Math.round(props.modelValue.x))
-
-	// 原点的坐标 0 ~ 100
-	const ballStyle = computed(() => ({
-		top: 50 + top.value / 2 + '%',
-		left: 50 + left.value / 2 + '%'
-	}))
-	watch(
-		() => props.modelValue.x,
-		(v) => (left.value = v)
-	)
-	watch(
-		() => props.modelValue.y,
-		(v) => (top.value = v)
-	)
-	const dishRef = ref<HTMLDivElement>()
-	const mousedown = (e: MouseEvent | TouchEvent) => {
-		if (!dishRef.value) return
-		const mousemove = (e: MouseEvent | TouchEvent) => {
-			if (!dishRef.value) return
-			const rect = dishRef.value.getBoundingClientRect()
-			const X = e.clientX || (e as TouchEvent).touches[0].clientX
-			const Y = e.clientY || (e as TouchEvent).touches[0].clientY
-			var x = ((X - rect.left) / rect.width) * 100
-			var y = ((Y - rect.top) / rect.height) * 100
-			if (x < 0) x = 0
-			if (x > 100) x = 100
-			if (y < 0) y = 0
-			if (y > 100) y = 100
-			left.value = Math.round((x - 50) * 2)
-			top.value = Math.round((y - 50) * 2)
-			onInput()
-		}
-		mousemove(e)
-		const mouseup = () => {
-			onChange()
-			document.removeEventListener('mousemove', mousemove)
-			document.removeEventListener('touchmove', mousemove)
-			document.removeEventListener('mouseup', mouseup)
-			document.removeEventListener('touchend', mouseup)
-		}
-		document.addEventListener('mousemove', mousemove)
-		document.addEventListener('touchmove', mousemove)
-		document.addEventListener('mouseup', mouseup)
-		document.addEventListener('touchend', mouseup)
-	}
-	const onInput = () => {
-		const value = {
-			x: left.value,
-			y: top.value
-		}
-		emit('update:modelValue', value)
-		emit('input', value)
-	}
-	var changeTime: any = null
-	const onChange = () => {
-		clearTimeout(changeTime)
-		changeTime = setTimeout(() => {
-			const value = {
-				x: left.value,
-				y: top.value
-			}
-			emit('update:modelValue', value)
-			emit('change', value)
-		}, 500)
-	}
-	const lineZStyle = computed(() => ({
-		'--rotateZ': calculateAngle(0, 0, left.value, top.value) + 'deg',
-		width: calculateDistance(0, 0, left.value, top.value) / 2 + '%'
-	}))
-	// 计算角度
-	function calculateAngle(x1: number, y1: number, x2: number, y2: number) {
-		const deltaX = x2 - x1
-		const deltaY = y1 - y2
-		let angle = Math.atan2(deltaX, deltaY) * (180 / Math.PI) - 90
-		return angle
-	}
-	// 计算距离
-	function calculateDistance(x1: number, y1: number, x2: number, y2: number) {
-		const deltaX = x2 - x1
-		const deltaY = y2 - y1
-		const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-		return distance
-	}
-</script>
-
-<style scoped lang="less">
-	.offset-tool {
-		position: relative;
-		> .input {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			> * {
-				flex: 1;
-				margin-right: 1rem;
-				&:last-child {
-					margin-right: 0;
-				}
-			}
-		}
-		> .dish {
-			width: 11.5rem;
-			height: 11.5rem;
-			border: 0.1rem solid #eaeaea;
-			border-radius: 0.34rem;
-			cursor: pointer;
-			position: relative;
-			background-color: #f6f6f6;
-			margin-top: 2rem;
-			> * {
-				position: absolute;
-				pointer-events: none;
-				user-select: none;
-			}
-			> img {
-				width: 1.2rem;
-				height: 1.2rem;
-				bottom: 0.35rem;
-				right: 0.35rem;
-			}
-			> .ball {
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				width: 0.85rem;
-				height: 0.85rem;
-				border: 0.1rem solid #fff;
-				background-color: #333;
-				border-radius: 50%;
-				box-shadow: 0px 0.068rem 0.17px 0px rgba(0, 0, 0, 0.26);
-			}
-			> .tip {
-				font-size: 0.85rem;
-				color: #000;
-				line-height: 2.4rem;
-				&.x {
-					top: 50%;
-					right: 0%;
-					transform: translate(100%, -50%);
-					padding-left: 6px;
-				}
-				&.y {
-					top: 0%;
-					left: 50%;
-					transform: translate(-50%, -100%);
-				}
-			}
-			> .line {
-				border-color: #d9d9d9;
-				border-style: dashed;
-				border-width: 0;
-				width: 0;
-				height: 0;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				&.x {
-					width: 100%;
-					border-top-width: 0.1rem;
-				}
-				&.y {
-					height: 100%;
-					border-left-width: 0.1rem;
-				}
-				&.z {
-					width: 50%;
-					border-top-width: 0.1rem;
-					border-color: #454754;
-					transform: translate(0%, -50%) rotateZ(var(--rotateZ));
-					transform-origin: left center;
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/tools/pixel-ratio-selection.vue b/src/views/canvas1/components/tools/pixel-ratio-selection.vue
deleted file mode 100644
index 7643e36..0000000
--- a/src/views/canvas1/components/tools/pixel-ratio-selection.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-	<div class="pixel-ratio-selection">
-		<div
-			v-for="v in list"
-			:key="v"
-			:class="{ active: v === modelValue }"
-			@click="onChange(v)"
-			:style="{ '--w': v.split(':')[0], '--h': v.split(':')[1] }"
-		>
-			{{ v }}
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, defineExpose } from 'vue'
-	const emit = defineEmits(['update:modelValue', 'change'])
-	const props = defineProps({
-		modelValue: { type: String },
-		list: {
-			type: Array,
-			default: () => ['1:1', '4:3', '3:4', '16:9']
-		}
-	})
-	const data = reactive({})
-	const onChange = (v) => {
-		emit('update:modelValue', v)
-		emit('change', v)
-	}
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.pixel-ratio-selection {
-		width: 100%;
-		height: 3.4rem;
-		border-radius: 0.6rem;
-		background-color: #f0f0f0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 1.7rem;
-		> div {
-			text-align: center;
-			font-size: 1.2rem;
-			color: #7c7c7c;
-			height: 2.1rem;
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			&.active {
-				border-radius: 0.4rem;
-				background-color: #fff;
-			}
-			&::before {
-				content: '';
-				border-radius: 0.1rem;
-				border: 0.1rem solid #7c7c7c;
-				width: calc(var(--w) / max(var(--w), var(--h)) * 1rem);
-				height: calc(var(--h) / max(var(--w), var(--h)) * 1rem);
-				margin-right: 0.4rem;
-				box-sizing: border-box;
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/tools/slider.vue b/src/views/canvas1/components/tools/slider.vue
deleted file mode 100644
index 46cd80a..0000000
--- a/src/views/canvas1/components/tools/slider.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-	<div class="slider" :disabled="disabled">
-		<div
-			class="input-range"
-			:style="{
-				'--progress': (value - props.min) / (props.max - props.min)
-			}"
-		>
-			<span class="tip">{{ props.tipFormatter(value) }}</span>
-			<input
-				type="range"
-				v-model="value"
-				v-bind="$attrs"
-				@input="onInput"
-				@change="onChange"
-				:disabled="disabled"
-				:min="props.min"
-				:max="props.max"
-			/>
-		</div>
-		<div class="input" v-show="isInput">
-			<my-input
-				type="number"
-				v-model="value"
-				v-bind="$attrs"
-				@input="onInput"
-				@change="onChange"
-				:disabled="disabled"
-				:min="props.min"
-				:max="props.max"
-			/>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { ref, defineProps, defineEmits, watch } from 'vue'
-	import MyInput from './my-input.vue'
-	const props = defineProps({
-		modelValue: { type: Number },
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		min: {
-			type: Number,
-			default: 0
-		},
-		max: {
-			type: Number,
-			default: 100
-		},
-		tipFormatter: {
-			type: Function,
-			default: (v) => v
-		},
-		isInput: {
-			type: Boolean,
-			default: true
-		}
-	})
-	const emit = defineEmits(['update:modelValue', 'change', 'input'])
-	watch(
-		() => props.modelValue,
-		(v) => {
-			value.value = v
-		}
-	)
-	const value = ref(props.modelValue)
-	const onInput = () => {
-		if (props.disabled) return
-		const v = Number(value.value)
-		emit('update:modelValue', v)
-		emit('input', v)
-	}
-	const onChange = () => {
-		if (props.disabled) return
-		const v = Number(value.value)
-		emit('update:modelValue', v)
-		emit('change', v)
-	}
-</script>
-
-<style scoped lang="less">
-	.slider {
-		position: relative;
-		display: flex;
-		align-items: center;
-		--input-thumb-size: 0.8rem;
-		--backcolor1: var(--slider-thumb-color1, #4285f4);
-		--backcolor2: var(--slider-thumb-color2, rgba(0, 0, 0, 0.1));
-		&:hover {
-			> .input-range > .tip {
-				display: block;
-			}
-		}
-		> .input-range {
-			position: relative;
-			flex: 2;
-			display: flex;
-			> input {
-				width: 100%;
-				-webkit-appearance: none;
-				appearance: none;
-				height: 0.339rem;
-				border-radius: 0.3rem;
-				outline: none;
-				background: linear-gradient(
-					to right,
-					var(--backcolor1) 0%,
-					var(--backcolor1) calc(var(--progress) * 100%),
-					var(--backcolor2) calc(var(--progress) * 100%),
-					var(--backcolor2) 100%
-				);
-				&::-webkit-slider-thumb {
-					-webkit-appearance: none;
-					appearance: none;
-					width: var(--input-thumb-size);
-					height: var(--input-thumb-size);
-					border-radius: 50%;
-					background: var(--backcolor1); /* 蓝色滑块 */
-					cursor: pointer;
-					transition: all 0.2s;
-					box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
-				}
-				&::-webkit-slider-thumb:hover {
-					transform: scale(1.1);
-				}
-			}
-			> .tip {
-				position: absolute;
-				font-size: 1rem;
-				pointer-events: none;
-				user-select: none;
-				color: #666;
-				top: calc(var(--input-thumb-size) / -2 - 0.35rem);
-				left: calc(
-					(100% - var(--input-thumb-size)) * var(--progress) + var(--input-thumb-size) / 2
-				);
-				transform: translate(-50%, -100%);
-				background-color: rgba(0, 0, 0, 0.7);
-				color: white;
-				padding: 0.3rem 0.5rem;
-				border-radius: 0.4rem;
-				font-size: 1rem;
-				white-space: nowrap;
-				pointer-events: none;
-				display: none;
-				&::after {
-					content: '';
-					position: absolute;
-					top: 97%;
-					left: 50%;
-					transform: translateX(-50%);
-					width: 0;
-					height: 0;
-					border-left: 0.5rem solid transparent;
-					border-right: 0.5rem solid transparent;
-					border-top: 0.5rem solid rgba(0, 0, 0, 0.8);
-				}
-			}
-		}
-		> .input {
-			flex: 1;
-			margin-left: 1rem;
-			> input {
-				border-radius: 0.3rem;
-				width: 100%;
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/components/tools/upload-file.vue b/src/views/canvas1/components/tools/upload-file.vue
deleted file mode 100644
index eb5c28b..0000000
--- a/src/views/canvas1/components/tools/upload-file.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-	<div class="upload-file">
-		<div class="preview" v-if="url">
-			<img :src="url" @error="onChange(null)" />
-			<div class="close" @click="onChange(null)">
-				<svg-icon name="close-border" size="16" />
-			</div>
-		</div>
-		<div class="control" v-else>
-			<div class="icon"><svg-icon name="upload" size="17" /></div>
-			<p class="txt">{{ tip }}</p>
-			<button @click="onSelectFile">Select File</button>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { reactive, computed } from 'vue'
-	const emit = defineEmits(['update:modelValue', 'change'])
-	const props = defineProps({
-		modelValue: { type: [File, null] },
-		tip: { type: String, default: 'Upload your files' }
-	})
-	const data = reactive({
-		file: null
-	})
-	const url = computed(() => (props.modelValue ? URL.createObjectURL(props.modelValue) : ''))
-	const onChange = (v) => {
-		emit('update:modelValue', v)
-		emit('change', v)
-	}
-	const onSelectFile = () => {
-		const input = document.createElement('input')
-		input.type = 'file'
-		input.accept = 'image/png, image/jpeg, image/jpg'
-		input.addEventListener('change', (e) => {
-			const file = e.target.files[0]
-			if (file) onChange(file)
-		})
-		input.click()
-	}
-	defineExpose({ data })
-</script>
-
-<style lang="less" scoped>
-	.upload-file {
-		width: 100%;
-		height: 9.9rem;
-		border-radius: 1rem;
-		background-color: #f0f0f0;
-		// padding: 0 1.7rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		> .control {
-			text-align: center;
-			> .txt {
-				margin-top: 0.6rem;
-				margin-bottom: 0.8rem;
-				font-size: 0.8rem;
-				color: #7c7c7c;
-			}
-			> button {
-				box-shadow: 0px 0.75px 0px 0px #00000005;
-				min-width: 3.9rem;
-				height: 1.3rem;
-				border-radius: 0.23rem;
-				background-color: #fff;
-				font-size: 0.6rem;
-				color: #000;
-				border: 0.05rem solid #d9d9d9;
-				cursor: pointer;
-				&:active {
-					opacity: 0.6;
-				}
-			}
-		}
-		> .preview {
-			width: 8rem;
-			height: 8rem;
-			position: relative;
-			> img {
-				height: 100%;
-				width: 100%;
-				object-fit: contain;
-			}
-			> .close {
-				position: absolute;
-				top: 0.01rem;
-				right: 0.01rem;
-				border-radius: 50%;
-				background-color: #fff;
-				cursor: pointer;
-			}
-		}
-	}
-</style>
diff --git a/src/views/canvas1/index.vue b/src/views/canvas1/index.vue
deleted file mode 100644
index 04abcd3..0000000
--- a/src/views/canvas1/index.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-	<div class="canvas">
-		<!-- <div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
-			<div
-				class="canvas-content"
-				:style="{
-					top: `${data.y}px`,
-					left: `${data.x}px`,
-					transform: `scale(${data.scale})`
-				}"
-			>
-				<card type="to-real-style" />
-				<card type="scene-composition" />
-				<card type="color-palette" />
-				<card type="to-video" />
-				<card type="to-3d-model" />
-				<card type="to-cad" />
-				<card type="add-print" />
-				<card type="edit-material" />
-			</div>
-		</div> -->
-
-		<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="" :nodes-draggable="true">
-			<template #node-InputNode="nodeProps">
-				<inputNode v-bind="nodeProps" >
-					<template v-slot:content>{{ nodeProps.type }}
-						<card type="to-real-style" />
-					</template> 	
-				</inputNode>
-			</template>
-			<template #node-SecondaryNode="nodeProps">
-				<secondaryNode v-bind="nodeProps" >
-					<template v-slot:content>
-						<card type="scene-composition" />
-					</template> 
-				</secondaryNode>
-			</template>
-		</VueFlow>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import card from './components/cards/index.vue'
-	import { useLayout } from '@/utils/treeDiagram'
-	import { VueFlow, useVueFlow } from '@vue-flow/core'
-	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
-	import { useGlobalStore } from '@/stores'
-	import secondaryNode from './components/node/secondaryNode.vue'
-	import inputNode from './components/node/InputNode.vue'
-	const globalStore = useGlobalStore()
-	const data = reactive({
-		x: 100,
-		y: 200,
-		scale: 1
-	})
-	const canvasMain = ref<HTMLDivElement>()
-	const onMouseDown = (e: MouseEvent) => {
-		if (e.button !== 1) return
-		const ox = data.x
-		const oy = data.y
-		const X = e.clientX
-		const Y = e.clientY
-		const onMouseMove = (e: MouseEvent) => {
-			const dx = e.clientX - X
-			const dy = e.clientY - Y
-			data.x = ox + dx
-			data.y = oy + dy
-		}
-		const onMouseUp = (e: MouseEvent) => {
-			document.removeEventListener('mousemove', onMouseMove)
-			document.removeEventListener('mouseup', onMouseUp)
-		}
-		document.addEventListener('mousemove', onMouseMove)
-		document.addEventListener('mouseup', onMouseUp)
-	}
-	const onMouseWheel = (e: WheelEvent) => {
-		var delta = e.deltaY
-		var scale = data.scale - delta / 1000
-		if (scale < 0.2) scale = 0.2
-		if (scale > 10) scale = 10
-		data.scale = scale
-	}
-	const position = { x: 0, y: 0 }
-
-	const nodes = ref<Node[]>([
-		  { id: '1', type: 'InputNode', label: 'Node 1', class: 'custom-node start', position },
-		  { id: '2', type: 'SecondaryNode', class: 'custom-node', data: { id: '主 1' }, position },
-	])
-	const edges = ref<Edge[]>([
-		  { id: 'e1-3', source: '1', target: '2', type: 'smoothstep', },
-	])
-	const { fitView } = useVueFlow()
-	const { layout } = useLayout()
-	async function layoutGraph(direction) {
-		setTimeout(() => {
-			nodes.value = layout(nodes.value, edges.value, direction)
-			console.log(nodes.value)
-			nextTick(() => {
-				fitView()
-			})
-		}, 0)
-	}
-
-	onMounted(() => {
-		globalStore.setHomeLeftNavCollapse(true)
-	})
-</script>
-<style lang="less">
-@import "@vue-flow/core/dist/style.css";
-@import "@vue-flow/core/dist/theme-default.css";
-</style>
-<style lang="less" scoped>
-	.canvas {
-		// overflow-y: auto;
-		// display: flex;
-		// flex-wrap: wrap;
-		// align-content: flex-start;
-		// align-items: flex-start;
-		// padding: 2rem;
-		// gap: 2rem;
-		background-color: #fcf8f1;
-		position: relative;
-		overflow: hidden;
-		> .canvas-main {
-			width: 100%;
-			height: 100%;
-			position: relative;
-			> .canvas-content {
-				position: absolute;
-				width: auto;
-				height: auto;
-				display: flex;
-				align-items: flex-start;
-				gap: 5rem;
-				transform-origin: top left;
-			}
-		}
-		> .vue-flow{
-			width: 100%;
-			height: 100%;
-		}
-	}
-</style>
diff --git a/src/views/home/agent/components/versionTree/tree/view2/index.vue b/src/views/home/agent/components/versionTree/tree/view2/index.vue
index 1c49695..efced12 100644
--- a/src/views/home/agent/components/versionTree/tree/view2/index.vue
+++ b/src/views/home/agent/components/versionTree/tree/view2/index.vue
@@ -167,8 +167,6 @@ defineExpose({push})
 	</div>
 </template>
 <style lang="less">
-@import "@vue-flow/core/dist/style.css";
-@import "@vue-flow/core/dist/theme-default.css";
 </style>
 <style lang="less" scoped>
 	.view2{

From 99ee2036a1704885ead8455d86835943eb661b7a Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Wed, 25 Feb 2026 15:10:03 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E5=AF=B9=E8=AF=9D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BAsketch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/agent/components/Agent.vue   |  50 ++++-
 src/views/home/agent/components/Preview.vue | 215 +++++++++++---------
 src/views/home/agent/index.vue              |  32 +--
 3 files changed, 178 insertions(+), 119 deletions(-)

diff --git a/src/views/home/agent/components/Agent.vue b/src/views/home/agent/components/Agent.vue
index 32a7f7b..7b7b7ea 100644
--- a/src/views/home/agent/components/Agent.vue
+++ b/src/views/home/agent/components/Agent.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, reactive, computed, onUnmounted, onMounted, nextTick } from 'vue'
+	import { ref, reactive, computed, onUnmounted, onMounted, nextTick,watch } from 'vue'
 	import List from './List.vue'
 	import Input from '../../components/Input.vue'
 	import { fetchAgentReply } from '@/api/agent'
@@ -31,6 +31,8 @@
 	const userStore = useUserInfoStore()
 	const agentStore = useAgentStore()
 	const projectStore = useProjectStore()
+
+	const emits = defineEmits(['update:sketchList'])
 	const props = withDefaults(
 		defineProps<{
 			title: string
@@ -41,6 +43,7 @@
 	)
 
 	const messageList = ref([])
+
 	const listRef = ref()
 	const isGenerating = ref(false)
 	const isPaused = ref(false) // 标记是否为主动暂停
@@ -58,6 +61,13 @@
 		imageUrlList: []
 	})
 
+	const sketchList = ref([])
+watch(sketchList, (newVal) => {
+		console.log('添加图片链接--------');
+		
+		emits('update:sketchList', newVal)
+	}, { deep: true })
+
 	// 每次请求时创建新的 AbortController
 	let abort: AbortController
 
@@ -81,9 +91,9 @@
 		if (initialData) {
 			// 等待页面渲染完成后自动发送初始消息
 			params.configParams = {
-				type: initialData.type ,
+				type: initialData.type,
 				region: initialData.area,
-				style: initialData.style ,
+				style: initialData.style,
 				temperature: 0.7
 			}
 			handleSendMessage({
@@ -97,10 +107,13 @@
 		}
 	})
 
-	const handleSendMessage = async (message: {
-		text: string
-		images: Array<{ url: string; name: string }>
-	}, skipUserMessage = false) => {
+	const handleSendMessage = async (
+		message: {
+			text: string
+			images: Array<{ url: string; name: string }>
+		},
+		skipUserMessage = false
+	) => {
 		console.log('Message sent:', message)
 		isPaused.value = false
 		isGenerating.value = true
@@ -197,6 +210,7 @@
 						console.log('传输结束 end---', contentBody)
 						aiMessage.streaming = false
 						aiMessage.loading = false
+						isGenerating.value = false
 						flag = false
 						break
 					}
@@ -217,12 +231,21 @@
 							isNodeIdEvent = true
 							// continue
 						}
+						console.log('event', event)
+						if (event.includes('error')) {
+							aiMessage.text = '出现错误,请重试'
+							aiMessage.streaming = false
+							aiMessage.loading = false
+							isGenerating.value = false
+							flag = false
+							break
+						}
 
 						const dataLines = event
 							.split(/\n/)
 							.filter((line) => line.startsWith('data:'))
 							.map((line) => line.replace(/^data:\s*/, '').trim())
-						console.log('dataLInes', dataLines)
+						// console.log('dataLInes', dataLines)
 						if (isNodeIdEvent) {
 							params.versionID = dataLines[0]
 						}
@@ -232,10 +255,14 @@
 
 						try {
 							const jsonData = JSON.parse(jsonText)
-
+							console.log('jsonData', jsonData);
+							
 							// 赋值 project_id 和 version_id
-							if (jsonData.project_id) params.projectID = jsonData.project_id
-							if (jsonData.version_id) params.versionID = jsonData.version_id
+							// if (jsonData.project_id) params.projectID = jsonData.project_id
+							// if (jsonData.version_id) params.versionID = jsonData.version_id
+							if (jsonData.image_url) {
+								sketchList.value.push(jsonData.image_url)
+							}
 							if (
 								jsonData.content &&
 								jsonData.content.length > 0 &&
@@ -243,6 +270,7 @@
 							) {
 								contentBody += jsonData.content
 								aiMessage.text = contentBody
+								aiMessage.loading = false
 							}
 							if (jsonData.type === 'end') {
 								aiMessage.streaming = false
diff --git a/src/views/home/agent/components/Preview.vue b/src/views/home/agent/components/Preview.vue
index 5a60cd7..69e7e72 100644
--- a/src/views/home/agent/components/Preview.vue
+++ b/src/views/home/agent/components/Preview.vue
@@ -4,13 +4,21 @@
 		:class="type === 'sketch' ? 'sketch-preview' : 'report-preview'"
 	>
 		<template v-if="type === 'sketch'">
-			<div class="sketch-item" v-for="item in 12">
+			<div
+				class="sketch-item"
+				v-for="(item, index) in sketchList"
+				:key="'sketch-item-' + index"
+			>
 				<Menu class="menu-btn" @click="handleClickMenu" />
 				<div class="edit-btn flex align-center space-between" @click="handleClickEdit">
 					<div>Edit</div>
-					<img src="@/assets/images/arrow-top-right.png" alt="" />
+					<img src="@/assets/images/arrow-top-right.png" />
 				</div>
-				<img :src="LoadingImg" alt="" />
+				<img
+					:src="getImageSrc(item, index)"
+					:alt="'sketch-' + index"
+					@load="handleImageLoad(index)"
+				/>
 			</div>
 		</template>
 		<div v-else class="reportBorder">
@@ -28,116 +36,127 @@
 						</div>
 					</div>
 					<div class="content">
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
-						<br />				
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  
+						# 一级标题
+						<br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题
 					</div>
 				</div>
 			</div>
-			
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, reactive } from 'vue'
 	import Menu from './Menu.vue'
-  import LoadingImg from '@/assets/images/sketch-loading.gif'
-  import reportNull from '@/assets/images/reportNull.png'
+	import LoadingImg from '@/assets/images/sketch-loading.gif'
+	import reportNull from '@/assets/images/reportNull.png'
+
+	// 存储每个图片的加载状态
+	const loadedStatus = reactive<Record<number, boolean>>({})
 
 	const props = withDefaults(
 		defineProps<{
 			type: 'sketch' | 'report'
+			sketchList: Array<string>
 		}>(),
 		{
-			type: 'sketch'
+			type: 'sketch',
+			sketchList: []
 		}
 	)
 
+	// 图片加载完成时触发
+	const handleImageLoad = (index: number) => {
+		loadedStatus[index] = true
+	}
 
-  const handleClickEdit = () => {
-    // 编辑按钮点击逻辑
-    console.log('Edit button clicked')
-  }
-  const handleClickMenu = () => {
-    // 菜单按钮点击逻辑
-    console.log('Menu button clicked')
-  }
-
+	// 获取当前显示的图片源
+	const getImageSrc = (item: string, index: number) => {
+		return loadedStatus[index] ? item : LoadingImg
+	}
 
+	const handleClickEdit = () => {
+		// 编辑按钮点击逻辑
+		console.log('Edit button clicked')
+	}
+	const handleClickMenu = () => {
+		// 菜单按钮点击逻辑
+		console.log('Menu button clicked')
+	}
 </script>
 
 <style lang="less" scoped>
@@ -172,13 +191,13 @@
 				font-size: 1.4rem;
 				padding: 0 0.9rem 0 1.4rem;
 				cursor: pointer;
-				img{
+				img {
 					width: 1.8rem;
 					height: 1.8rem;
 				}
 			}
 		}
-		.reportBorder{
+		.reportBorder {
 			position: relative;
 			display: flex;
 			align-items: center;
@@ -190,7 +209,11 @@
 			&::before {
 				content: '';
 				position: absolute;
-				background: linear-gradient(119.03deg, rgba(233, 121, 60, 0.3) 1.61%, rgba(255, 207, 144, 0.3) 101.01%);
+				background: linear-gradient(
+					119.03deg,
+					rgba(233, 121, 60, 0.3) 1.61%,
+					rgba(255, 207, 144, 0.3) 101.01%
+				);
 				border-radius: 2.3rem;
 				z-index: -1;
 				width: 100%;
@@ -205,20 +228,20 @@
 				height: calc(100% - var(--border-width) * 2);
 				border-radius: 2rem;
 				display: flex;
-				.report-content-null{
+				.report-content-null {
 					flex: 1;
 					display: flex;
 					align-items: center;
 					justify-content: center;
 				}
-				.report-content{
+				.report-content {
 					flex: 1;
 					display: flex;
 					flex-direction: column;
 					overflow: hidden;
-					.downBtnBox{
+					.downBtnBox {
 						padding: 2.2rem 5.2rem 0;
-						.downBtn{
+						.downBtn {
 							display: flex;
 							width: 11.2rem;
 							justify-content: center;
@@ -228,16 +251,16 @@
 							background-color: #ff7a51;
 							color: #fff;
 							cursor: pointer;
-							.icon{
-								margin-right: .02rem;
+							.icon {
+								margin-right: 0.02rem;
 							}
-							span{
+							span {
 								font-weight: 500;
 								font-size: 1.2rem;
 							}
 						}
 					}
-					.content{
+					.content {
 						word-break: break-word;
 						white-space: pre-wrap;
 						overflow-y: auto;
diff --git a/src/views/home/agent/index.vue b/src/views/home/agent/index.vue
index 8f916d1..bc48b74 100644
--- a/src/views/home/agent/index.vue
+++ b/src/views/home/agent/index.vue
@@ -1,14 +1,12 @@
 <template>
 	<div class="agent-wrapper flex space-between">
 		<div class="openVersionTree">
-			<div class="btn" @click="versionTreeData.drawer = true">
-				Version Tree
-			</div>
+			<div class="btn" @click="versionTreeData.drawer = true">Version Tree</div>
 		</div>
 		<div class="content-wrapper">
-			<Agent :title="agentTitle" />
+			<Agent :title="agentTitle" @update:sketchList="updateSketchList" />
 			<div class="preview-wrapper">
-				<Preview :type="previewType" />
+				<Preview :type="previewType" :sketchList="sketchList" />
 			</div>
 		</div>
 		<VersionTreeIndex v-model:versionTreeData="versionTreeData" />
@@ -22,11 +20,17 @@
 	import VersionTreeIndex from './components/versionTree/index.vue'
 
 	const agentTitle = ref('Retro Sofa Sketch')
-	const previewType = ref<'sketch' | 'report'>('report')
+	const previewType = ref<'sketch' | 'report'>('sketch')
+
+	const sketchList = ref([])
+	const updateSketchList = (newVal) => {
+		console.log('newVal', newVal)
+		sketchList.value = newVal
+	}
 
 	const versionTreeData = ref({
-		drawer:false,
-		list:computed(()=>{
+		drawer: false,
+		list: computed(() => {
 			return []
 		})
 	})
@@ -39,13 +43,13 @@
 		border-top: 0.1rem solid #c9c9c9;
 		padding: 0rem 2.3rem 6rem 2.8rem;
 		flex-direction: column;
-		.openVersionTree{
+		.openVersionTree {
 			padding: 2rem 0rem;
 			width: 100%;
 			display: flex;
 			justify-content: flex-end;
 			height: min-content;
-			> .btn{
+			> .btn {
 				padding: 1.5rem 1.45rem;
 				font-weight: 500;
 				font-size: 1.4rem;
@@ -57,14 +61,18 @@
 					content: '';
 					position: absolute;
 					inset: -1px;
-					background: linear-gradient(119.03deg, rgba(233, 121, 60, 0.8) 1.61%, rgba(255, 207, 144, 0.8) 101.01%);
+					background: linear-gradient(
+						119.03deg,
+						rgba(233, 121, 60, 0.8) 1.61%,
+						rgba(255, 207, 144, 0.8) 101.01%
+					);
 					border-radius: 2.2rem;
 					z-index: -1;
 				}
 			}
 		}
 
-		.content-wrapper{
+		.content-wrapper {
 			display: flex;
 			flex: 1;
 			justify-content: space-between;