画布功能卡片

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

@@ -1,13 +1,86 @@
 <template>
 	<!-- 场景构图 -->
-	<div class="scene-composition"></div>
+	<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, markRaw, onMounted } from 'vue'
+	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>