FiDA_Front/src/views/canvas/components/cards/scene-composition.vue

<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>