fix

src/views/canvas/components/cards/index.vue

@@ -0,0 +1,187 @@
+<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>