FiDA_Front/src/views/canvas/components/card.vue

<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 './cards/to-real-style.vue'
	import SceneComposition from './cards/scene-composition.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: SceneComposition
		},
		{
			type: 'to-video',
			title: 'To Video',
			component: SceneComposition
		},
		{
			type: 'to-3d-model',
			title: 'To 3D Model',
			component: SceneComposition
		},
		{
			type: 'add-print',
			title: 'Add Print',
			component: SceneComposition
		},
		{
			type: 'edit-material',
			title: 'Edit Material',
			component: SceneComposition
		}
	]
	const emit = defineEmits(['add', 'generate'])
	const props = defineProps({
		type: {
			type: String,
			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;
		}
		> .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>