ui调整

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

@@ -0,0 +1,22 @@
+<template>
+	<!-- 场景构图 -->
+	<div class="scene-composition"></div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, markRaw, onMounted } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	import { useRouter, useRoute } from 'vue-router'
+	const router = useRouter()
+	const route = useRoute()
+	const globalStore = useGlobalStore()
+	onMounted(() => {
+		globalStore.setHomeLeftNavCollapse(true)
+	})
+</script>
+
+<style lang="less" scoped>
+	.scene-composition {
+		width: 100%;
+	}
+</style>

src/views/canvas/components/cards/to-real-style.vue

@@ -0,0 +1,39 @@
+<template>
+	<!-- 转换为真实图 -->
+	<div class="to-real-style">
+		<my-textarea v-model="data.prompt" />
+		<pixel-ratio-selection v-model="data.pixelRatio" />
+		<upload-file v-model="data.file" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, reactive, onMounted, defineExpose } from 'vue'
+	import myTextarea from '../my-textarea.vue'
+	import pixelRatioSelection from '../pixel-ratio-selection.vue'
+	import uploadFile from '../upload-file.vue'
+	import { useGlobalStore } from '@/stores'
+	import { useRouter, useRoute } from 'vue-router'
+	const router = useRouter()
+	const route = useRoute()
+	const globalStore = useGlobalStore()
+	onMounted(() => {
+		globalStore.setHomeLeftNavCollapse(true)
+	})
+	const data = reactive({
+		prompt: '123123',
+		pixelRatio: '1:1',
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.to-real-style {
+		width: 100%;
+		> * {
+			margin-bottom: 1rem;
+		}
+	}
+</style>