画布卡片
This commit is contained in:
64
src/views/canvas/components/cards/color-palette.vue
Normal file
64
src/views/canvas/components/cards/color-palette.vue
Normal file
@@ -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>
|
||||
26
src/views/canvas/components/cards/edit-material.vue
Normal file
26
src/views/canvas/components/cards/edit-material.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
26
src/views/canvas/components/cards/to-3d-model.vue
Normal file
26
src/views/canvas/components/cards/to-3d-model.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
91
src/views/canvas/components/cards/to-video.vue
Normal file
91
src/views/canvas/components/cards/to-video.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user