画布卡片

src/views/canvas/components/card.vue

@@ -21,6 +21,10 @@
 	import { computed, ref, markRaw, onMounted } from 'vue'
 	import ToRealStyle from './cards/to-real-style.vue'
 	import SceneComposition from './cards/scene-composition.vue'
+	import ColorPalette from './cards/color-palette.vue'
+	import ToVideo from './cards/to-video.vue'
+	import To3DModel from './cards/to-3d-model.vue'
+	import EditMaterial from './cards/edit-material.vue'
 	const components = [
 		{
 			type: 'to-real-style',
@@ -35,17 +39,17 @@
 		{
 			type: 'color-palette',
 			title: 'Color Palette',
-			component: SceneComposition
+			component: ColorPalette
 		},
 		{
 			type: 'to-video',
 			title: 'To Video',
-			component: SceneComposition
+			component: ToVideo
 		},
 		{
 			type: 'to-3d-model',
 			title: 'To 3D Model',
-			component: SceneComposition
+			component: To3DModel
 		},
 		{
 			type: 'add-print',
@@ -55,7 +59,7 @@
 		{
 			type: 'edit-material',
 			title: 'Edit Material',
-			component: SceneComposition
+			component: EditMaterial
 		}
 	]
 	const emit = defineEmits(['add', 'generate'])
@@ -121,6 +125,20 @@
 		}
 		> .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;

src/views/canvas/components/cards/color-palette.vue

@@ -0,0 +1,64 @@
+<template>
+	<!-- 颜色调色板 -->
+	<div class="color-palette">
+		<p class="label">Choose Color</p>
+		<div class="color-list">
+			<div
+				class="color-item"
+				v-for="(v, i) in data.colors"
+				:key="i"
+				:style="{ background: v }"
+			></div>
+			<div class="add" @click="addColor">
+				<svg-icon name="add" size="12rem" color="#fff" />
+				<input type="color" ref="colorInput" @change="changeColor" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted, ref } from 'vue'
+	const data = reactive({
+		colors: ['#FF4747', '#F96060', '#FFB1B1', '#FA7B7B', '#FF9090']
+	})
+	const colorInput = ref<HTMLInputElement>()
+	// 添加颜色
+	const addColor = () => {
+		colorInput.value?.click()
+	}
+	const changeColor = (e: Event) => {
+		const target = e.target as HTMLInputElement
+		data.colors.push(target.value)
+	}
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.color-palette {
+		> .color-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.5rem;
+			> div {
+				width: 3.5rem;
+				height: 3.5rem;
+			}
+			> .add {
+				border: 0.1rem solid rgba(0, 0, 0, 0.1);
+				background-color: rgba(0, 0, 0, 0.1);
+				position: relative;
+				> input {
+					position: absolute;
+					width: 0;
+					height: 0;
+					border: none;
+					padding: 0;
+					top: 0;
+					left: 0;
+				}
+			}
+		}
+	}
+</style>

src/views/canvas/components/cards/edit-material.vue

@@ -0,0 +1,26 @@
+<template>
+	<!-- 编辑素材 -->
+	<div class="edit-material">
+		<p class="label">Material</p>
+		<upload-file v-model="data.file" />
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted } from 'vue'
+	import myTextarea from '../my-textarea.vue'
+	import uploadFile from '../upload-file.vue'
+	const data = reactive({
+		prompt: '',
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.edit-material {
+	}
+</style>

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

@@ -5,18 +5,9 @@
 
 <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-3d-model.vue

@@ -0,0 +1,26 @@
+<template>
+	<!-- 转3D模型 -->
+	<div class="to-3d-model">
+		<p class="label">Image</p>
+		<upload-file v-model="data.file" />
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, onMounted } from 'vue'
+	import myTextarea from '../my-textarea.vue'
+	import uploadFile from '../upload-file.vue'
+	const data = reactive({
+		prompt: '',
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.to-3d-model {
+	}
+</style>

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

@@ -1,27 +1,20 @@
 <template>
 	<!-- 转换为真实图 -->
 	<div class="to-real-style">
+		<p class="label">Prompt</p>
 		<my-textarea v-model="data.prompt" />
+		<p class="label">Size</p>
 		<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 { computed, ref, reactive, onMounted } 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',
+		prompt: '',
 		pixelRatio: '1:1',
 		file: null
 	})
@@ -31,9 +24,5 @@
 
 <style lang="less" scoped>
 	.to-real-style {
-		width: 100%;
-		> * {
-			margin-bottom: 1rem;
-		}
 	}
 </style>

src/views/canvas/components/cards/to-video.vue

@@ -0,0 +1,91 @@
+<template>
+	<!-- 转视频 -->
+	<div class="to-video">
+		<p class="label">Frames</p>
+		<div class="frames">
+			<upload-file v-model="data.first_file" tip="First Frame" />
+			<upload-file v-model="data.last_file" tip="Last Frame" />
+		</div>
+		<p class="label">Size</p>
+		<pixel-ratio-selection v-model="data.pixelRatio" />
+		<div class="label">
+			<span>Aspect Ratio</span>
+			<span>Time</span>
+		</div>
+		<div class="select">
+			<el-select v-model="data.aspectRatio">
+				<el-option v-for="v in aspectRatioList" :key="v" :label="v" :value="v" />
+			</el-select>
+			<el-select v-model="data.time">
+				<el-option v-for="v in timeList" :key="v" :label="v" :value="v" />
+			</el-select>
+		</div>
+		<p class="label">Prompt</p>
+		<my-textarea v-model="data.prompt" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, ref } from 'vue'
+	import myTextarea from '../my-textarea.vue'
+	import uploadFile from '../upload-file.vue'
+	import pixelRatioSelection from '../pixel-ratio-selection.vue'
+	const aspectRatioList = ref(['720p', '1080p', '1440p', '2160p', '1k', '2k'])
+	const timeList = ref(['5s', '10s', '15s', '20s', '30s', '60s'])
+	const data = reactive({
+		first_file: null,
+		last_file: null,
+		pixelRatio: '1:1',
+		aspectRatio: '720p',
+		time: '5s',
+		prompt: ''
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.to-video {
+		> .frames {
+			display: flex;
+			gap: 0.5rem;
+		}
+		> .select,
+		> div.label {
+			display: flex;
+			gap: 1.3rem;
+			> * {
+				flex: 1;
+			}
+		}
+		> .select {
+			&:deep(.el-select) {
+				--el-select-input-font-size: 1.2rem;
+				.el-select__wrapper {
+					font-size: 1.2rem;
+					min-height: 0;
+					height: 2.8rem;
+					padding: 0 0.8rem;
+				}
+				.el-select__selected-item,
+				.el-select__input-wrapper,
+				.el-select__placeholder {
+					line-height: normal;
+				}
+				.el-select__input {
+					height: 2.4rem;
+				}
+			}
+		}
+	}
+	.el-popper{
+		.el-select-dropdown{
+			li{
+				padding-left: 0.8rem;
+				height: 3rem;
+				line-height: 3rem;;
+				font-size: 1.2rem;
+			}
+		}
+	}
+</style>

src/views/canvas/components/upload-file.vue

@@ -1,26 +1,44 @@
 <template>
 	<div class="upload-file">
-		<div class="icon"><svg-icon name="upload" size="17" /></div>
-		<span class="txt">Upload your files</span>
-		<button class="btn">Select File</button>
+		<div class="preview" v-if="url">
+			<img :src="url" @error="onChange(null)" />
+			<div class="close" @click="onChange(null)">
+				<svg-icon name="close-border" size="16" />
+			</div>
+		</div>
+		<div class="control" v-else>
+			<div class="icon"><svg-icon name="upload" size="17" /></div>
+			<p class="txt">{{ tip }}</p>
+			<button @click="onSelectFile">Select File</button>
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { reactive, defineExpose } from 'vue'
+	import { reactive, computed } from 'vue'
 	const emit = defineEmits(['update:modelValue', 'change'])
 	const props = defineProps({
-		modelValue: { type: String },
-		list: {
-			type: Array,
-			default: () => ['1:1', '4:3', '3:4', '16:9']
-		}
+		modelValue: { type: [File, null] },
+		tip: { type: String, default: 'Upload your files' }
 	})
-	const data = reactive({})
+	const data = reactive({
+		file: null
+	})
+	const url = computed(() => (props.modelValue ? URL.createObjectURL(props.modelValue) : ''))
 	const onChange = (v) => {
 		emit('update:modelValue', v)
 		emit('change', v)
 	}
+	const onSelectFile = () => {
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.accept = 'image/png, image/jpeg, image/jpg'
+		input.addEventListener('change', (e) => {
+			const file = e.target.files[0]
+			if (file) onChange(file)
+		})
+		input.click()
+	}
 	defineExpose({ data })
 </script>
 
@@ -30,29 +48,49 @@
 		height: 9.9rem;
 		border-radius: 1rem;
 		background-color: #f0f0f0;
+		// padding: 0 1.7rem;
 		display: flex;
-		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		// padding: 0 1.7rem;
-		> .txt {
-			margin-top: 0.6rem;
-			margin-bottom: 0.8rem;
-			font-size: 0.8rem;
-			color: #7c7c7c;
+		> .control {
+			text-align: center;
+			> .txt {
+				margin-top: 0.6rem;
+				margin-bottom: 0.8rem;
+				font-size: 0.8rem;
+				color: #7c7c7c;
+			}
+			> button {
+				box-shadow: 0px 0.75px 0px 0px #00000005;
+				min-width: 3.9rem;
+				height: 1.3rem;
+				border-radius: 0.23rem;
+				background-color: #fff;
+				font-size: 0.6rem;
+				color: #000;
+				border: 0.05rem solid #d9d9d9;
+				cursor: pointer;
+				&:active {
+					opacity: 0.6;
+				}
+			}
 		}
-		> button {
-			box-shadow: 0px 0.75px 0px 0px #00000005;
-			min-width: 3.9rem;
-			height: 1.3rem;
-			border-radius: 0.23rem;
-			background-color: #fff;
-			font-size: 0.6rem;
-			color: #000;
-			border: 0.05rem solid #d9d9d9;
-			cursor: pointer;
-			&:active {
-				opacity: 0.6;
+		> .preview {
+			width: 8rem;
+			height: 8rem;
+			position: relative;
+			> img {
+				height: 100%;
+				width: 100%;
+				object-fit: contain;
+			}
+			> .close {
+				position: absolute;
+				top: 0.01rem;
+				right: 0.01rem;
+				border-radius: 50%;
+				background-color: #fff;
+				cursor: pointer;
 			}
 		}
 	}

src/views/canvas/index.vue

@@ -29,6 +29,7 @@
 		display: flex;
 		flex-wrap: wrap;
 		align-content: flex-start;
+		align-items: flex-start;
 		padding: 2rem;
 		gap: 2rem;
 	}