84 lines
2.0 KiB
Vue
84 lines
2.0 KiB
Vue
|
<template>
|
|||
|
|
<div class="">
|
|||
|
|
<Title title="歌词" desc="自己编写歌词或使用Ai生成歌词，两节/8行效果最佳">
|
|||
|
|
<el-input
|
|||
|
|
v-model="formData.lyric"
|
|||
|
|
:autosize="{ minRows: 6, maxRows: 6}"
|
|||
|
|
resize="none"
|
|||
|
|
type="textarea"
|
|||
|
|
maxlength="1200"
|
|||
|
|
show-word-limit
|
|||
|
|
placeholder="请输入您自己的歌词"
|
|||
|
|
/>
|
|||
|
|
</Title>
|
|||
|
|
|
|||
|
|
<Title title="音乐风格">
|
|||
|
|
<el-space class="flex-wrap">
|
|||
|
|
<el-tag v-for="tag in tags" :key="tag" round class="mb-8px">{{tag}}</el-tag>
|
|||
|
|
</el-space>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
:type="showCustom ? 'primary': 'default'"
|
|||
|
|
round
|
|||
|
|
size="small"
|
|||
|
|
class="mb-6px"
|
|||
|
|
@click="showCustom = !showCustom"
|
|||
|
|
>自定义风格
|
|||
|
|
</el-button>
|
|||
|
|
</Title>
|
|||
|
|
|
|||
|
|
<Title v-show="showCustom" desc="描述您想要的音乐风格，Suno无法识别艺术家的名字，但可以理解流派和氛围" class="-mt-12px">
|
|||
|
|
<el-input
|
|||
|
|
v-model="formData.style"
|
|||
|
|
:autosize="{ minRows: 4, maxRows: 4}"
|
|||
|
|
resize="none"
|
|||
|
|
type="textarea"
|
|||
|
|
maxlength="256"
|
|||
|
|
show-word-limit
|
|||
|
|
placeholder="输入音乐风格(英文)"
|
|||
|
|
/>
|
|||
|
|
</Title>
|
|||
|
|
|
|||
|
|
<Title title="音乐/歌曲名称">
|
|||
|
|
<el-input v-model="formData.name" placeholder="请输入音乐/歌曲名称"/>
|
|||
|
|
</Title>
|
|||
|
|
|
|||
|
|
<Title title="版本">
|
|||
|
|
<el-select v-model="formData.version" placeholder="请选择">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in [{
|
|||
|
|
value: '3',
|
|||
|
|
label: 'V3'
|
|||
|
|
}, {
|
|||
|
|
value: '2',
|
|||
|
|
label: 'V2'
|
|||
|
|
}]"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</Title>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import Title from '../title/index.vue'
|
|||
|
|
defineOptions({ name: 'Lyric' })
|
|||
|
|
|
|||
|
|
const tags = ['rock', 'punk', 'jazz', 'soul', 'country', 'kidsmusic', 'pop']
|
|||
|
|
|
|||
|
|
const showCustom = ref(false)
|
|||
|
|
|
|||
|
|
const formData = reactive({
|
|||
|
|
lyric: '',
|
|||
|
|
style: '',
|
|||
|
|
name: '',
|
|||
|
|
version: ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
formData
|
|||
|
|
})
|
|||
|
|
</script>
|