diff --git a/src/views/canvas1/components/cards/add-print.vue b/src/views/canvas1/components/cards/add-print.vue
new file mode 100644
index 0000000..c1907f9
--- /dev/null
+++ b/src/views/canvas1/components/cards/add-print.vue
@@ -0,0 +1,116 @@
+<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
new file mode 100644
index 0000000..e4ee1ee
--- /dev/null
+++ b/src/views/canvas1/components/cards/color-palette.vue
@@ -0,0 +1,65 @@
+<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
new file mode 100644
index 0000000..e2ec238
--- /dev/null
+++ b/src/views/canvas1/components/cards/edit-material.vue
@@ -0,0 +1,26 @@
+<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
new file mode 100644
index 0000000..a82e11f
--- /dev/null
+++ b/src/views/canvas1/components/cards/index.vue
@@ -0,0 +1,186 @@
+<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
new file mode 100644
index 0000000..65ae059
--- /dev/null
+++ b/src/views/canvas1/components/cards/scene-composition.vue
@@ -0,0 +1,86 @@
+<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
new file mode 100644
index 0000000..7cb286f
--- /dev/null
+++ b/src/views/canvas1/components/cards/to-3d-model.vue
@@ -0,0 +1,26 @@
+<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
new file mode 100644
index 0000000..c84d459
--- /dev/null
+++ b/src/views/canvas1/components/cards/to-cad.vue
@@ -0,0 +1,26 @@
+<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
new file mode 100644
index 0000000..a6f4e2b
--- /dev/null
+++ b/src/views/canvas1/components/cards/to-real-style.vue
@@ -0,0 +1,74 @@
+<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
new file mode 100644
index 0000000..8328e03
--- /dev/null
+++ b/src/views/canvas1/components/cards/to-video.vue
@@ -0,0 +1,91 @@
+<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
new file mode 100644
index 0000000..cce43fc
--- /dev/null
+++ b/src/views/canvas1/components/node/InputNode.vue
@@ -0,0 +1,26 @@
+<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/node/secondaryNode.vue b/src/views/canvas1/components/node/secondaryNode.vue
new file mode 100644
index 0000000..ca2d09e
--- /dev/null
+++ b/src/views/canvas1/components/node/secondaryNode.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+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="source" id="Right" :position="Position.Right" />
+		<Handle type="target" id="Left" :position="Position.Left" /> -->
+		<!-- <div>{{ props.data.id }}</div> -->
+		<div class="item">
+			<slot name="content"></slot>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+.node{
+	.item{
+	}
+}
+</style>
diff --git a/src/views/canvas1/components/tools/my-input.vue b/src/views/canvas1/components/tools/my-input.vue
new file mode 100644
index 0000000..a413a07
--- /dev/null
+++ b/src/views/canvas1/components/tools/my-input.vue
@@ -0,0 +1,79 @@
+<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
new file mode 100644
index 0000000..f62a6c2
--- /dev/null
+++ b/src/views/canvas1/components/tools/my-textarea.vue
@@ -0,0 +1,84 @@
+<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
new file mode 100644
index 0000000..0bf804f
--- /dev/null
+++ b/src/views/canvas1/components/tools/offset-tool.vue
@@ -0,0 +1,217 @@
+<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
new file mode 100644
index 0000000..7643e36
--- /dev/null
+++ b/src/views/canvas1/components/tools/pixel-ratio-selection.vue
@@ -0,0 +1,67 @@
+<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
new file mode 100644
index 0000000..46cd80a
--- /dev/null
+++ b/src/views/canvas1/components/tools/slider.vue
@@ -0,0 +1,172 @@
+<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
new file mode 100644
index 0000000..eb5c28b
--- /dev/null
+++ b/src/views/canvas1/components/tools/upload-file.vue
@@ -0,0 +1,97 @@
+<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
new file mode 100644
index 0000000..04abcd3
--- /dev/null
+++ b/src/views/canvas1/index.vue
@@ -0,0 +1,143 @@
+<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/vite.config.ts.timestamp-1771986020299-a3f2241cb00dd.mjs b/vite.config.ts.timestamp-1771986020299-a3f2241cb00dd.mjs
new file mode 100644
index 0000000..c1cd602
--- /dev/null
+++ b/vite.config.ts.timestamp-1771986020299-a3f2241cb00dd.mjs
@@ -0,0 +1,84 @@
+// vite.config.ts
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig, loadEnv } from "file:///D:/project/FiDA_Front/node_modules/vite/dist/node/index.js";
+import vue from "file:///D:/project/FiDA_Front/node_modules/@vitejs/plugin-vue/dist/index.mjs";
+import AutoImport from "file:///D:/project/FiDA_Front/node_modules/unplugin-auto-import/dist/vite.js";
+import Components from "file:///D:/project/FiDA_Front/node_modules/unplugin-vue-components/dist/vite.mjs";
+import DefineOptions from "file:///D:/project/FiDA_Front/node_modules/unplugin-vue-define-options/dist/vite.js";
+import { createSvgIconsPlugin } from "file:///D:/project/FiDA_Front/node_modules/vite-plugin-svg-icons/dist/index.mjs";
+import path from "path";
+import { ElementPlusResolver } from "file:///D:/project/FiDA_Front/node_modules/unplugin-vue-components/dist/resolvers.mjs";
+var __vite_injected_original_dirname = "D:\\project\\FiDA_Front";
+var __vite_injected_original_import_meta_url = "file:///D:/project/FiDA_Front/vite.config.ts";
+var vite_config_default = defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+  return {
+    plugins: [
+      vue(),
+      DefineOptions(),
+      // ...
+      AutoImport({
+        resolvers: [ElementPlusResolver()]
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()]
+      }),
+      createSvgIconsPlugin({
+        // 指定需要缓存的图标文件夹
+        iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
+        // 指定symbolId格式
+        symbolId: "icon-[dir]-[name]",
+        inject: "body-last"
+        // 注入位置优化
+      })
+    ],
+    define: {
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
+    },
+    css: {
+      preprocessorOptions: {
+        less: {
+          modifyVars: {
+            "primary-color": "#ec6800"
+          },
+          javascriptEnabled: true,
+          // 全局导入less变量文件
+          additionalData: `@import "${path.resolve(__vite_injected_original_dirname, "src/assets/css/style.less")}";`
+        }
+      }
+    },
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", __vite_injected_original_import_meta_url)),
+        _c: fileURLToPath(new URL("./src/components", __vite_injected_original_import_meta_url))
+      }
+    },
+    server: {
+      host: "0.0.0.0",
+      // 允许局域网内的IP访问
+      port: 8060,
+      // 根据环境设置端口
+      open: false,
+      // 自动打开浏览器
+      strictPort: true,
+      // 如果端口已被占用，则尝试下一个可用端口
+      hmr: {
+        overlay: true
+      },
+      proxy: {
+        "/api": {
+          //'/api'是自行设置的请求前缀
+          target: env.VITE_APP_URL,
+          changeOrigin: true,
+          //用于控制请求头中的host值
+          rewrite: (path2) => path2.replace(/^\/api/, "/api")
+          //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
+        }
+      }
+    }
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJEOlxcXFxwcm9qZWN0XFxcXEZpREFfRnJvbnRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkQ6XFxcXHByb2plY3RcXFxcRmlEQV9Gcm9udFxcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vRDovcHJvamVjdC9GaURBX0Zyb250L3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZmlsZVVSTFRvUGF0aCwgVVJMIH0gZnJvbSAnbm9kZTp1cmwnXHJcblxyXG5pbXBvcnQgeyBkZWZpbmVDb25maWcsIGxvYWRFbnYgfSBmcm9tICd2aXRlJ1xyXG5pbXBvcnQgdnVlIGZyb20gJ0B2aXRlanMvcGx1Z2luLXZ1ZSdcclxuaW1wb3J0IEF1dG9JbXBvcnQgZnJvbSAndW5wbHVnaW4tYXV0by1pbXBvcnQvdml0ZSdcclxuaW1wb3J0IENvbXBvbmVudHMgZnJvbSAndW5wbHVnaW4tdnVlLWNvbXBvbmVudHMvdml0ZSdcclxuaW1wb3J0IERlZmluZU9wdGlvbnMgZnJvbSAndW5wbHVnaW4tdnVlLWRlZmluZS1vcHRpb25zL3ZpdGUnXHJcbmltcG9ydCB7IGNyZWF0ZVN2Z0ljb25zUGx1Z2luIH0gZnJvbSAndml0ZS1wbHVnaW4tc3ZnLWljb25zJ1xyXG5pbXBvcnQgcGF0aCBmcm9tICdwYXRoJ1xyXG5pbXBvcnQgeyBFbGVtZW50UGx1c1Jlc29sdmVyIH0gZnJvbSAndW5wbHVnaW4tdnVlLWNvbXBvbmVudHMvcmVzb2x2ZXJzJ1xyXG5cclxuLy8gY29uc29sZS5sb2cocHJvY2VzcylcclxuLy8gY29uc29sZS5sb2coaW1wb3J0Lm1ldGEuZW52LlZJVEVfQVBQX1VSTClcclxuXHJcbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXHJcblxyXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XHJcblx0Y29uc3QgZW52ID0gbG9hZEVudihtb2RlLCBwcm9jZXNzLmN3ZCgpKVxyXG5cclxuXHRyZXR1cm4ge1xyXG5cdFx0cGx1Z2luczogW1xyXG5cdFx0XHR2dWUoKSxcclxuXHRcdFx0RGVmaW5lT3B0aW9ucygpLFxyXG5cdFx0XHQvLyAuLi5cclxuXHRcdFx0QXV0b0ltcG9ydCh7XHJcblx0XHRcdFx0cmVzb2x2ZXJzOiBbRWxlbWVudFBsdXNSZXNvbHZlcigpXSxcclxuXHRcdFx0fSksXHJcblx0XHRcdENvbXBvbmVudHMoe1xyXG5cdFx0XHRcdHJlc29sdmVyczogW0VsZW1lbnRQbHVzUmVzb2x2ZXIoKV0sXHJcblx0XHRcdH0pLFxyXG5cdFx0XHRjcmVhdGVTdmdJY29uc1BsdWdpbih7XHJcblx0XHRcdFx0Ly8gXHU2MzA3XHU1QjlBXHU5NzAwXHU4OTgxXHU3RjEzXHU1QjU4XHU3Njg0XHU1NkZFXHU2ODA3XHU2NTg3XHU0RUY2XHU1OTM5XHJcblx0XHRcdFx0aWNvbkRpcnM6IFtwYXRoLnJlc29sdmUocHJvY2Vzcy5jd2QoKSwgJ3NyYy9hc3NldHMvaWNvbnMnKV0sXHJcblx0XHRcdFx0Ly8gXHU2MzA3XHU1QjlBc3ltYm9sSWRcdTY4M0NcdTVGMEZcclxuXHRcdFx0XHRzeW1ib2xJZDogJ2ljb24tW2Rpcl0tW25hbWVdJyxcclxuXHRcdFx0XHRpbmplY3Q6ICdib2R5LWxhc3QnIC8vIFx1NkNFOFx1NTE2NVx1NEY0RFx1N0Y2RVx1NEYxOFx1NTMxNlxyXG5cdFx0XHR9KVxyXG5cdFx0XSxcclxuXHRcdGRlZmluZToge1xyXG5cdFx0XHRfX1ZVRV9QUk9EX0hZRFJBVElPTl9NSVNNQVRDSF9ERVRBSUxTX186IGZhbHNlLFxyXG5cdFx0fSxcclxuXHRcdGNzczoge1xyXG5cdFx0XHRwcmVwcm9jZXNzb3JPcHRpb25zOiB7XHJcblx0XHRcdFx0bGVzczoge1xyXG5cdFx0XHRcdFx0bW9kaWZ5VmFyczoge1xyXG5cdFx0XHRcdFx0XHQncHJpbWFyeS1jb2xvcic6ICcjZWM2ODAwJ1xyXG5cdFx0XHRcdFx0fSxcclxuXHRcdFx0XHRcdGphdmFzY3JpcHRFbmFibGVkOiB0cnVlLFxyXG5cdFx0XHRcdFx0Ly8gXHU1MTY4XHU1QzQwXHU1QkZDXHU1MTY1bGVzc1x1NTNEOFx1OTFDRlx1NjU4N1x1NEVGNlxyXG5cdFx0XHRcdFx0YWRkaXRpb25hbERhdGE6IGBAaW1wb3J0IFwiJHtwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnc3JjL2Fzc2V0cy9jc3Mvc3R5bGUubGVzcycpfVwiO2BcclxuXHRcdFx0XHR9XHJcblx0XHRcdH1cclxuXHRcdH0sXHJcblx0XHRyZXNvbHZlOiB7XHJcblx0XHRcdGFsaWFzOiB7XHJcblx0XHRcdFx0J0AnOiBmaWxlVVJMVG9QYXRoKG5ldyBVUkwoJy4vc3JjJywgaW1wb3J0Lm1ldGEudXJsKSksXHJcblx0XHRcdFx0X2M6IGZpbGVVUkxUb1BhdGgobmV3IFVSTCgnLi9zcmMvY29tcG9uZW50cycsIGltcG9ydC5tZXRhLnVybCkpXHJcblx0XHRcdH1cclxuXHRcdH0sXHJcblx0XHRzZXJ2ZXI6IHtcclxuXHRcdFx0aG9zdDogJzAuMC4wLjAnLCAvLyBcdTUxNDFcdThCQjhcdTVDNDBcdTU3REZcdTdGNTFcdTUxODVcdTc2ODRJUFx1OEJCRlx1OTVFRVxyXG5cdFx0XHRwb3J0OiA4MDYwLCAvLyBcdTY4MzlcdTYzNkVcdTczQUZcdTU4ODNcdThCQkVcdTdGNkVcdTdBRUZcdTUzRTNcclxuXHRcdFx0b3BlbjogZmFsc2UsIC8vIFx1ODFFQVx1NTJBOFx1NjI1M1x1NUYwMFx1NkQ0Rlx1ODlDOFx1NTY2OFxyXG5cdFx0XHRzdHJpY3RQb3J0OiB0cnVlLCAvLyBcdTU5ODJcdTY3OUNcdTdBRUZcdTUzRTNcdTVERjJcdTg4QUJcdTUzNjBcdTc1MjhcdUZGMENcdTUyMTlcdTVDMURcdThCRDVcdTRFMEJcdTRFMDBcdTRFMkFcdTUzRUZcdTc1MjhcdTdBRUZcdTUzRTNcclxuXHRcdFx0aG1yOiB7XHJcblx0XHRcdFx0b3ZlcmxheTogdHJ1ZVxyXG5cdFx0XHR9LFxyXG5cdFx0XHRwcm94eToge1xyXG5cdFx0XHRcdCcvYXBpJzoge1xyXG5cdFx0XHRcdFx0Ly8nL2FwaSdcdTY2MkZcdTgxRUFcdTg4NENcdThCQkVcdTdGNkVcdTc2ODRcdThCRjdcdTZDNDJcdTUyNERcdTdGMDBcclxuXHRcdFx0XHRcdHRhcmdldDogZW52LlZJVEVfQVBQX1VSTCxcclxuXHRcdFx0XHRcdGNoYW5nZU9yaWdpbjogdHJ1ZSwgLy9cdTc1MjhcdTRFOEVcdTYzQTdcdTUyMzZcdThCRjdcdTZDNDJcdTU5MzRcdTRFMkRcdTc2ODRob3N0XHU1MDNDXHJcblx0XHRcdFx0XHRyZXdyaXRlOiAocGF0aCkgPT4gcGF0aC5yZXBsYWNlKC9eXFwvYXBpLywgJy9hcGknKSAvL1x1OERFRlx1NUY4NFx1OTFDRFx1NTE5OVx1RkYwQ1x1RkYwOFx1NkI2M1x1NTIxOVx1RkYwOVx1NTMzOVx1OTE0RFx1NEVFNWFwaVx1NUYwMFx1NTkzNFx1NzY4NFx1OERFRlx1NUY4NFx1NEUzQVx1N0E3QVx1RkYwOFx1NUMwNlx1OEJGN1x1NkM0Mlx1NTI0RFx1N0YwMFx1NTIyMFx1OTY2NFx1RkYwOVxyXG5cdFx0XHRcdH1cclxuXHRcdFx0fVxyXG5cdFx0fVxyXG5cdH1cclxufSlcclxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUF1UCxTQUFTLGVBQWUsV0FBVztBQUUxUixTQUFTLGNBQWMsZUFBZTtBQUN0QyxPQUFPLFNBQVM7QUFDaEIsT0FBTyxnQkFBZ0I7QUFDdkIsT0FBTyxnQkFBZ0I7QUFDdkIsT0FBTyxtQkFBbUI7QUFDMUIsU0FBUyw0QkFBNEI7QUFDckMsT0FBTyxVQUFVO0FBQ2pCLFNBQVMsMkJBQTJCO0FBVHBDLElBQU0sbUNBQW1DO0FBQThHLElBQU0sMkNBQTJDO0FBZ0J4TSxJQUFPLHNCQUFRLGFBQWEsQ0FBQyxFQUFFLEtBQUssTUFBTTtBQUN6QyxRQUFNLE1BQU0sUUFBUSxNQUFNLFFBQVEsSUFBSSxDQUFDO0FBRXZDLFNBQU87QUFBQSxJQUNOLFNBQVM7QUFBQSxNQUNSLElBQUk7QUFBQSxNQUNKLGNBQWM7QUFBQTtBQUFBLE1BRWQsV0FBVztBQUFBLFFBQ1YsV0FBVyxDQUFDLG9CQUFvQixDQUFDO0FBQUEsTUFDbEMsQ0FBQztBQUFBLE1BQ0QsV0FBVztBQUFBLFFBQ1YsV0FBVyxDQUFDLG9CQUFvQixDQUFDO0FBQUEsTUFDbEMsQ0FBQztBQUFBLE1BQ0QscUJBQXFCO0FBQUE7QUFBQSxRQUVwQixVQUFVLENBQUMsS0FBSyxRQUFRLFFBQVEsSUFBSSxHQUFHLGtCQUFrQixDQUFDO0FBQUE7QUFBQSxRQUUxRCxVQUFVO0FBQUEsUUFDVixRQUFRO0FBQUE7QUFBQSxNQUNULENBQUM7QUFBQSxJQUNGO0FBQUEsSUFDQSxRQUFRO0FBQUEsTUFDUCx5Q0FBeUM7QUFBQSxJQUMxQztBQUFBLElBQ0EsS0FBSztBQUFBLE1BQ0oscUJBQXFCO0FBQUEsUUFDcEIsTUFBTTtBQUFBLFVBQ0wsWUFBWTtBQUFBLFlBQ1gsaUJBQWlCO0FBQUEsVUFDbEI7QUFBQSxVQUNBLG1CQUFtQjtBQUFBO0FBQUEsVUFFbkIsZ0JBQWdCLFlBQVksS0FBSyxRQUFRLGtDQUFXLDJCQUEyQjtBQUFBLFFBQ2hGO0FBQUEsTUFDRDtBQUFBLElBQ0Q7QUFBQSxJQUNBLFNBQVM7QUFBQSxNQUNSLE9BQU87QUFBQSxRQUNOLEtBQUssY0FBYyxJQUFJLElBQUksU0FBUyx3Q0FBZSxDQUFDO0FBQUEsUUFDcEQsSUFBSSxjQUFjLElBQUksSUFBSSxvQkFBb0Isd0NBQWUsQ0FBQztBQUFBLE1BQy9EO0FBQUEsSUFDRDtBQUFBLElBQ0EsUUFBUTtBQUFBLE1BQ1AsTUFBTTtBQUFBO0FBQUEsTUFDTixNQUFNO0FBQUE7QUFBQSxNQUNOLE1BQU07QUFBQTtBQUFBLE1BQ04sWUFBWTtBQUFBO0FBQUEsTUFDWixLQUFLO0FBQUEsUUFDSixTQUFTO0FBQUEsTUFDVjtBQUFBLE1BQ0EsT0FBTztBQUFBLFFBQ04sUUFBUTtBQUFBO0FBQUEsVUFFUCxRQUFRLElBQUk7QUFBQSxVQUNaLGNBQWM7QUFBQTtBQUFBLFVBQ2QsU0FBUyxDQUFDQSxVQUFTQSxNQUFLLFFBQVEsVUFBVSxNQUFNO0FBQUE7QUFBQSxRQUNqRDtBQUFBLE1BQ0Q7QUFBQSxJQUNEO0FBQUEsRUFDRDtBQUNELENBQUM7IiwKICAibmFtZXMiOiBbInBhdGgiXQp9Cg==