画布卡片

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="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>
-		<span class="txt">Upload your files</span>
-		<button class="btn">Select File</button>
+			<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,11 +48,12 @@
 		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;
+		> .control {
+			text-align: center;
 			> .txt {
 				margin-top: 0.6rem;
 				margin-bottom: 0.8rem;
@@ -56,4 +75,23 @@
 				}
 			}
 		}
+		> .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;
+			}
+		}
+	}
 </style>

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

src/views/home/left-nav.vue

@@ -7,7 +7,7 @@
 				<svg-icon name="shouqi" size="24" />
 			</div>
 		</div>
-		<button class="create-btn">
+		<button class="create-btn" @click="onCreateProject">
 			<span class="icon"><svg-icon name="add" size="16" /></span>
 			<span v-show="!isCollapse" class="text">{{ $t('Home.newProject') }}</span>
 		</button>
@@ -104,15 +104,21 @@
 			name: 'Conversation Item 5'
 		}
 	])
-	const onHome = () => {
-		console.log('onHome')
+	const onCreateProject = () => {
+		router.push({ name: 'mainInput' })
 	}
+	const onHome = () => {}
 	const onCanvas = () => {
 		router.push({ name: 'canvas' })
 	}
 	const onHistory = () => {
+		if (isCollapse.value) {
+			globalStore.setHomeLeftNavCollapse(false)
+			showHistory.value = true
+		} else {
 			showHistory.value = !showHistory.value
 		}
+	}
 	const onClickHistoryItem = (item: any) => {
 		router.push({ name: 'test', params: { id: item.id } })
 	}

src/views/login/css/style.css

@@ -88,8 +88,8 @@
   justify-content: center;
   color: #252727;
 }
-.register > .right > .box > .title::v-deep > *,
-.login > .right > .box > .title::v-deep > * {
+.register > .right > .box > .title:deep(*),
+.login > .right > .box > .title:deep(*) {
   margin-left: 1rem;
   font-family: LBold;
   margin-bottom: -1rem;
@@ -102,36 +102,33 @@
   color: #666;
   margin-top: 0.5rem;
 }
-.register > .right > .box > .el-form,
-.login > .right > .box > .el-form {
+.register > .right > .box:deep(.el-form),
+.login > .right > .box:deep(.el-form) {
   margin-top: 5rem;
   width: 100%;
-}
-.register > .right > .box > .el-form::v-deep,
-.login > .right > .box > .el-form::v-deep {
   font-family: Regular;
 }
-.register > .right > .box > .el-form::v-deep .el-form-item,
-.login > .right > .box > .el-form::v-deep .el-form-item {
+.register > .right > .box:deep(.el-form) .el-form-item,
+.login > .right > .box:deep(.el-form) .el-form-item {
   margin-bottom: 2rem;
 }
-.register > .right > .box > .el-form::v-deep .el-form-item__label,
-.login > .right > .box > .el-form::v-deep .el-form-item__label {
+.register > .right > .box:deep(.el-form) .el-form-item__label,
+.login > .right > .box:deep(.el-form) .el-form-item__label {
   color: #252727;
   font-size: 1.8rem;
   margin-bottom: 0.8rem;
   font-family: Medium;
 }
-.register > .right > .box > .el-form::v-deep .el-input,
-.login > .right > .box > .el-form::v-deep .el-input {
+.register > .right > .box:deep(.el-form) .el-input,
+.login > .right > .box:deep(.el-form) .el-input {
   --el-input-height: 5rem;
   --el-input-border-radius: 0.8rem;
   --el-input-text-color: #252727;
   --el-border-color: #dfdfdf;
   font-size: 1.4rem;
 }
-.register > .right > .box > .el-form::v-deep .forgetPassword,
-.login > .right > .box > .el-form::v-deep .forgetPassword {
+.register > .right > .box:deep(.el-form) .forgetPassword,
+.login > .right > .box:deep(.el-form) .forgetPassword {
   margin-top: -1.2rem;
   margin-bottom: 2rem;
   font-size: 1.6rem;
@@ -140,29 +137,29 @@
   cursor: pointer;
   text-decoration: underline;
 }
-.register > .right > .box > .el-form::v-deep .privacy,
-.login > .right > .box > .el-form::v-deep .privacy {
+.register > .right > .box:deep(.el-form) .privacy,
+.login > .right > .box:deep(.el-form) .privacy {
   --el-checkbox-height: auto;
   margin-bottom: 4rem;
 }
-.register > .right > .box > .el-form::v-deep .privacy .el-checkbox__label,
-.login > .right > .box > .el-form::v-deep .privacy .el-checkbox__label {
+.register > .right > .box:deep(.el-form) .privacy .el-checkbox__label,
+.login > .right > .box:deep(.el-form) .privacy .el-checkbox__label {
   font-size: 1.6rem;
   color: #666666;
   font-weight: 400;
 }
-.register > .right > .box > .el-form::v-deep .privacy .el-checkbox__label > div > span,
-.login > .right > .box > .el-form::v-deep .privacy .el-checkbox__label > div > span {
+.register > .right > .box:deep(.el-form) .privacy .el-checkbox__label > div > span,
+.login > .right > .box:deep(.el-form) .privacy .el-checkbox__label > div > span {
   text-decoration: underline;
   cursor: pointer;
 }
-.register > .right > .box > .el-form::v-deep .el-form-item__error,
-.login > .right > .box > .el-form::v-deep .el-form-item__error {
+.register > .right > .box:deep(.el-form) .el-form-item__error,
+.login > .right > .box:deep(.el-form) .el-form-item__error {
   padding-top: 1px;
   font-size: 1.4rem;
 }
-.register > .right > .box > .el-form::v-deep .submit,
-.login > .right > .box > .el-form::v-deep .submit {
+.register > .right > .box:deep(.el-form) .submit,
+.login > .right > .box:deep(.el-form) .submit {
   width: 100%;
   height: 6rem;
   background: #252727;
@@ -179,8 +176,8 @@
   color: #666;
   font-family: Regular;
 }
-.register > .right > .box > .tip-2::v-deep > span,
-.login > .right > .box > .tip-2::v-deep > span {
+.register > .right > .box > .tip-2:deep(span),
+.login > .right > .box > .tip-2:deep(span) {
   text-decoration: underline;
   color: #FF7A50;
   cursor: pointer;

src/views/login/index.vue

@@ -41,7 +41,10 @@
 			width: 100%;
 			display: flex;
 			justify-content: center;
-			// align-items: center;
+			> * {
+				position: relative;
+				z-index: 1;
+			}
 			> .tip {
 				position: absolute;
 				width: 100%;
@@ -51,6 +54,7 @@
 				text-align: center;
 				font-family: Regular;
 				color: #fff;
+				z-index: 0;
 			}
 			> .logo {
 				width: auto;

src/views/login/less/style.less

@@ -85,7 +85,7 @@
 				justify-content: center;
 				color: #252727;
 
-				&::v-deep>* {
+				&:deep(*) {
 					margin-left: 1rem;
 					font-family: LBold;
 					margin-bottom: -1rem;
@@ -100,11 +100,9 @@
 				margin-top: 0.5rem;
 			}
 
-			>.el-form {
+			&:deep(.el-form) {
 				margin-top: 5rem;
 				width: 100%;
-
-				&::v-deep {
 				font-family: Regular;
 
 				.el-form-item {
@@ -171,7 +169,6 @@
 					font-family: SemiBold;
 				}
 			}
-			}
 
 			>.tip-2 {
 				font-weight: 400;
@@ -179,7 +176,7 @@
 				color: #666;
 				font-family: Regular;
 
-				&::v-deep>span {
+				&:deep(span) {
 					text-decoration: underline;
 					color: #FF7A50;
 					cursor: pointer;

src/views/login/visible-code.vue

@@ -73,7 +73,7 @@
 			font-size: 1.8rem;
 			color: #666;
 			font-family: Regular;
-			&::v-deep > span {
+			&:deep(span) {
 				color: #252727;
 				font-family: Medium;
 			}

src/views/nuic/index.vue

@@ -110,7 +110,7 @@
 				}
 			}
 		}
-		&::v-deep > .view {
+		&:deep(.view) {
 			margin-top: 5rem;
 			display: flex;
 			flex-direction: column;

src/views/nuic/nuic-1.vue

@@ -37,7 +37,7 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 2rem;
-			&::v-deep > b {
+			&:deep(b) {
 				font-size: 4.8rem;
 				font-family: MBold;
 			}

src/views/nuic/nuic-2.vue

@@ -43,7 +43,7 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 6rem;
-			&::v-deep > b {
+			&:deep(b) {
 				font-size: 4.8rem;
 				font-family: MBold;
 			}

src/views/nuic/nuic-3.vue

@@ -61,7 +61,7 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 9.8rem;
-			&::v-deep > b {
+			&:deep(b) {
 				font-size: 4.8rem;
 				font-family: MBold;
 			}
@@ -80,7 +80,7 @@
 			> .el-select {
 				width: 100%;
 				--el-border-radius-base: 0.8rem;
-				&::v-deep {
+				&:deep {
 					font-family: Regular;
 					.el-select__wrapper {
 						min-height: auto;