diff --git a/src/views/canvas/components/card.vue b/src/views/canvas/components/cards/index.vue
similarity index 81%
rename from src/views/canvas/components/card.vue
rename to src/views/canvas/components/cards/index.vue
index 705c087..5bbe685 100644
--- a/src/views/canvas/components/card.vue
+++ b/src/views/canvas/components/cards/index.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="card">
 		<div class="header">
-			<svg-icon :name="currentComponent.type" color="#fff" />
-			<span>{{ currentComponent.title }}</span>
+			<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" />
+			<component :is="currentComponent?.component" ref="componentRef" />
 		</div>
 		<div class="footer">
 			<button @click="onGenerateClick">
@@ -19,15 +19,15 @@
 
 <script setup lang="ts">
 	import { computed, ref, markRaw, onMounted } from 'vue'
-	import ToRealStyle from './cards/to-real-style.vue'
-	import SceneComposition from './cards/scene-composition.vue'
-	import ColorPalette from './cards/color-palette.vue'
-	import ToVideo from './cards/to-video.vue'
-	import To3DModel from './cards/to-3d-model.vue'
-	import AddPrint from './cards/add-print.vue'
-	import ToCAD from './cards/to-cad.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 './cards/edit-material.vue'
+	import EditMaterial from './edit-material.vue'
 	const components = [
 		{
 			type: 'to-real-style',
@@ -73,7 +73,15 @@
 	const emit = defineEmits(['add', 'generate'])
 	const props = defineProps({
 		type: {
-			type: String,
+			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'
 		}
 	})
diff --git a/src/views/canvas/components/tools/offset-tool.vue b/src/views/canvas/components/tools/offset-tool.vue
index 9d9c237..0bf804f 100644
--- a/src/views/canvas/components/tools/offset-tool.vue
+++ b/src/views/canvas/components/tools/offset-tool.vue
@@ -23,10 +23,10 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, defineProps, defineEmits, watch, computed } from 'vue'
+	import { ref, watch, computed } from 'vue'
 	import MyInput from './my-input.vue'
 	const props = defineProps({
-		modelValue: { type: Object },
+		modelValue: { type: Object as () => { x: number; y: number } },
 		showInput: {
 			type: Boolean,
 			default: true
diff --git a/src/views/canvas/index.vue b/src/views/canvas/index.vue
index ed8ba68..80e7178 100644
--- a/src/views/canvas/index.vue
+++ b/src/views/canvas/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-	import card from './components/card.vue'
+	import card from './components/cards/index.vue'
 	import { computed, ref, markRaw, onMounted } from 'vue'
 	import { useGlobalStore } from '@/stores'
 	import { useRouter, useRoute } from 'vue-router'