xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-04-14 07:04:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Suno PC 端页面重构完成

Browse Source
This commit is contained in:
RockYang
2025-08-07 14:00:09 +08:00
parent 5f24df6cee
commit eab8265b9c
5 changed files with 653 additions and 793 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/service/suno/service.go
View File

@@ -230,7 +230,7 @@ func (s *Service) Upload(task types.SunoTask) (RespVo, error) {
return RespVo{}, errors.New("no available API KEY for Suno")
}
reqBody := map[string]interface{}{
reqBody := map[string]any{
"url": task.AudioURL,
}

857
web/src/assets/css/suno.scss
View File

@@ -1,380 +1,456 @@
.page-suno {
display: flex;
height: 100%;
background-color: #f8fafc;
background-color: var(--theme-bg-color);
overflow: auto;
.left-bar {
max-width: 400px;
min-width: 400px;
padding: 20px;
background-color: #f8fafc;
background-color: var(--theme-bg-color);
overflow-y: auto;
.bar-top {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
.upload-music {
.iconfont {
margin-right: 5px;
font-size: 14px;
}
.space-y-6 {
> * + * {
margin-top: 1.5rem;
}
}
.params {
padding: 20px 0;
color: var(--text-theme-color);
position: relative;
.setting-card {
background: var(--card-bg);
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid var(--el-border-color-light);
.pure-music {
position: absolute;
right: 0;
top: 24px;
display: flex;
.text {
margin-top: 5px;
margin-left: 5px;
}
.card-title {
color: var(--theme-text-color-primary);
font-weight: 600;
font-size: 14px;
}
.label {
padding: 10px 0;
.text {
margin-right: 10px;
}
.el-icon {
top: 2px;
}
}
.item {
margin-bottom: 20px;
position: relative;
.create-btn {
margin: 20px 0;
background-image: url('~@/assets/img/suno-create-bg.svg');
background-size: cover;
background-position: 50% 50%;
transition: background 1s ease-in-out;
overflow: hidden;
font-size: 16px;
width: 100%;
padding: 16px;
border-radius: 25px;
border: none;
cursor: pointer;
img {
position: relative;
top: 3px;
margin-right: 5px;
}
&:hover {
opacity: 0.9;
}
}
.song {
display: flex;
padding: 10px;
background-color: var(--el-bg-color);
border-radius: 10px;
margin-bottom: 10px;
font-size: 14px;
position: relative;
.el-image {
width: 50px;
height: 50px;
border-radius: 10px;
}
.icon-mp3 {
font-size: 42px;
color: #a85295;
}
.title {
display: flex;
margin-left: 10px;
align-items: center;
color: var(--el-color-primary);
}
.el-button--info {
position: absolute;
right: 20px;
top: 20px;
}
}
.extend-secs {
padding: 10px 0;
font-size: 14px;
input {
width: 50px;
text-align: center;
padding: 8px 10px;
font-size: 14px;
background: none;
border: 1px solid #8f8f8f;
margin: 0 10px;
border-radius: 10px;
outline: none;
transition: border-color 0.5s ease, box-shadow 0.5s ease;
&:focus {
border-color: #0f7a71;
box-shadow: 0 0 5px #0f7a71;
}
}
}
.btn-lyric {
position: absolute;
left: 10px;
bottom: 10px;
font-size: 12px;
padding: 2px 5px;
background-color: var(--sm-btn-bg);
color: #fff;
}
.card-description {
color: var(--theme-text-color-secondary);
font-size: 12px;
margin-top: 4px;
}
.tag-select {
position: relative;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
-ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
width: 100%;
.card-label {
color: var(--theme-text-color-primary);
font-weight: 500;
font-size: 14px;
}
::-webkit-scrollbar {
display: block !important;
}
.help-icon {
color: var(--theme-text-color-secondary);
cursor: help;
font-size: 16px;
}
}
.inner {
display: flex;
flex-flow: row;
padding-bottom: 10px;
.extend-song-card {
border-left: 4px solid #f97316;
}
.tag {
margin-right: 10px;
word-break: keep-all;
background: var(--card-bg);
color: var(--theme-text-color-primary);
opacity: 0.7;
border-radius: 8px;
padding: 3px 6px;
cursor: pointer;
font-size: 13px;
border: none;
outline: none;
&:hover {
color: var(--el-color-primary);
}
}
}
.lyric-btn {
padding: 6px 12px;
background: var(--el-color-primary);
color: white;
font-size: 12px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 4px;
&:hover:not(:disabled) {
background: var(--el-color-primary-dark-2);
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
.tag-btn {
padding: 6px 12px;
font-size: 12px;
border: 1px solid var(--el-color-primary-light-5);
color: var(--el-color-primary);
border-radius: 20px;
background: transparent;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: var(--el-color-primary-light-9);
border-color: var(--el-color-primary);
}
}
.remove-btn {
padding: 6px 12px;
font-size: 12px;
background: #fef2f2;
color: #dc2626;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #fee2e2;
}
}
.extend-input {
width: 100%;
padding: 12px;
border: 1px solid var(--el-border-color);
border-radius: 8px;
background: var(--el-bg-color);
color: var(--theme-text-color-primary);
outline: none;
transition: border-color 0.2s;
&:focus {
border-color: var(--el-color-primary);
}
&::placeholder {
color: var(--theme-text-color-secondary);
}
}
.create-btn {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, var(--el-color-primary) 0%, #8b5cf6 100%);
color: white;
font-weight: 600;
border-radius: 12px;
border: none;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
&:hover:not(:disabled) {
background: linear-gradient(135deg, var(--el-color-primary-dark-2) 0%, #7c3aed 100%);
transform: translateY(-1px);
}
&:disabled {
background: var(--el-fill-color);
color: var(--el-text-color-disabled);
cursor: not-allowed;
transform: none;
}
}
.upload-tips {
margin-top: 12px;
font-size: 12px;
color: var(--theme-text-color-secondary);
line-height: 1.5;
p {
margin: 4px 0;
}
}
}
.right-box {
width: 100%;
color: #374151;
flex: 1;
color: var(--theme-text-color-primary);
overflow: auto;
background: #f8fafc;
background: var(--theme-bg-color);
padding: 20px;
.list-box {
padding: 0;
.item {
display: flex;
flex-flow: row;
padding: 5px 0;
cursor: pointer;
margin-bottom: 10px;
.song-card {
background: var(--card-bg);
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid var(--el-border-color-light);
margin-bottom: 16px;
.left {
.container {
width: 60px;
height: 90px;
position: relative;
.song-cover {
position: relative;
width: 64px;
height: 64px;
border-radius: 8px;
overflow: hidden;
background: var(--el-fill-color-light);
.el-image {
height: 90px;
border-radius: 5px;
width: 100%;
}
.cover-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--el-fill-color-light);
}
.duration {
position: absolute;
bottom: 0;
right: 0;
background-color: rgba(14, 8, 8, 0.7);
padding: 0 3px;
font-family: 'Input Sans';
font-size: 14px;
font-weight: 700;
border-radius: 0.125rem;
}
.play {
position: absolute;
width: 56px;
height: 100%;
top: 0;
left: 50%;
border: none;
border-radius: 5px;
background: rgba(100, 100, 100, 0.3);
cursor: pointer;
color: #ffffff;
opacity: 0;
transform: translate(-50%, 0px);
transition: opacity 0.3s ease 0s;
display: flex;
justify-content: center;
align-items: center;
}
.play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.2s;
border: none;
cursor: pointer;
&:hover {
.play {
opacity: 1;
// display: block;
}
opacity: 1;
}
}
.progress-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(59, 130, 246, 0.2);
}
.error-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(239, 68, 68, 0.2);
}
}
.song-title {
color: var(--theme-text-color-primary);
font-weight: 600;
font-size: 16px;
margin-bottom: 4px;
.song-link {
color: var(--el-color-primary);
text-decoration: none;
transition: color 0.2s;
&:hover {
color: var(--el-color-primary-dark-2);
}
}
}
.center {
width: 100%;
// border: 1px solid saddlebrown;
display: flex;
justify-content: center;
align-items: flex-start;
flex-flow: column;
height: 90px;
padding: 0 20px;
.title {
padding: 6px 0;
font-size: 16px;
font-weight: 700;
a {
color: var(--a-link-color);
&:hover {
text-decoration: underline;
}
}
.model {
color: #8f8f8f;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
font-weight: normal;
font-size: 12px;
padding: 1px 3px;
border-radius: 5px;
margin-left: 10px;
.iconfont {
font-size: 12px;
}
}
}
.tags {
font-size: 14px;
color: var(--text-fb);
padding: 3px 0;
}
}
.right {
min-width: 350px;
.song-description {
color: var(--theme-text-color-secondary);
font-size: 14px;
padding: 0 0 0 15px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.task-status {
display: flex;
justify-content: right;
align-items: center;
gap: 8px;
font-size: 12px;
.tools {
.status-error {
color: #dc2626;
display: flex;
justify-content: right;
align-items: center;
flex-flow: row;
height: 90px;
gap: 4px;
}
.btn-publish {
padding: 2px 10px;
.status-loading {
color: var(--el-color-primary);
display: flex;
align-items: center;
gap: 4px;
// .text {
// margin-right: 10px;
// }
.loading-spinner {
width: 12px;
height: 12px;
border: 1px solid var(--el-color-primary);
border-top: 1px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
}
}
.btn-icon {
background: none;
padding: 6px;
transition: background 0.6s ease 0s;
color: #919191;
.song-tags {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
.model-tag,
.upload-tag,
.full-song-tag,
.extend-tag {
padding: 2px 8px;
font-size: 10px;
border-radius: 12px;
font-weight: 500;
}
.model-tag {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.upload-tag {
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
}
.full-song-tag {
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
}
.extend-tag {
background: rgba(168, 85, 247, 0.1);
color: #a855f7;
}
}
.song-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
.action-buttons {
display: flex;
gap: 8px;
}
.action-btn {
padding: 6px 12px;
font-size: 12px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 4px;
&.play-btn {
background: var(--el-color-primary);
color: white;
&:hover {
// background: #5f5958;
// color: #e1e1e1;
color: var(--el-color-primary);
background: var(--el-color-primary-dark-2);
}
}
&.download-btn {
background: #22c55e;
color: white;
&:hover:not(:disabled) {
background: #16a34a;
}
.downloading {
width: 16px;
&:disabled {
background: var(--el-fill-color);
color: var(--el-text-color-disabled);
cursor: not-allowed;
}
}
&.merge-btn {
background: #a855f7;
color: white;
&:hover {
background: #9333ea;
}
}
&.extend-btn {
background: #f59e0b;
color: white;
&:hover {
background: #d97706;
}
}
&.edit-btn {
background: #6b7280;
color: white;
&:hover {
background: #4b5563;
}
}
&.delete-btn {
background: #fef2f2;
color: #dc2626;
&:hover {
background: #fee2e2;
}
}
}
}
}
.task {
height: 100px;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
border-radius: 5px;
display: flex;
margin-bottom: 10px;
.left {
display: flex;
justify-content: left;
align-items: center;
padding: 20px;
width: 320px;
.title {
font-size: 14px;
color: var(--el-text-color-primary);
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
}
}
.center {
display: flex;
width: 100%;
justify-content: center;
.failed {
.progress-bar {
margin-top: 16px;
.progress-info {
display: flex;
align-items: center;
color: #e4696b;
font-size: 14px;
justify-content: space-between;
font-size: 12px;
color: var(--theme-text-color-secondary);
margin-bottom: 4px;
}
.progress-track {
width: 100%;
height: 8px;
background: var(--el-fill-color-light);
border-radius: 4px;
overflow: hidden;
.progress-fill {
height: 100%;
background: var(--el-color-primary);
border-radius: 4px;
transition: width 0.3s ease;
}
}
}
.right {
display: flex;
width: 100px;
justify-content: center;
align-items: center;
.error-message {
margin-top: 16px;
padding: 12px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
.error-text {
color: #dc2626;
font-size: 12px;
}
}
}
}
@@ -384,6 +460,7 @@
display: flex;
justify-content: center;
}
.music-player {
width: 100%;
position: fixed;
@@ -392,28 +469,82 @@
padding: 20px 0;
}
}
}
.btn {
margin-right: 10px;
color: var((--theme-text-color-primary));
border: none;
border-radius: 5px;
padding: 5px 10px;
// 文本颜色变量
.text-primary {
color: var(--theme-text-color-primary);
}
.text-secondary {
color: var(--theme-text-color-secondary);
}
// 动画
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
// 自定义上传组件样式
.custom-upload {
width: 100%;
:deep(.el-upload-dragger) {
width: 100%;
height: auto;
border: 2px dashed var(--el-border-color);
border-radius: 12px;
background: var(--el-bg-color);
transition: all 0.3s ease;
cursor: pointer;
background: var(--btn-bg);
padding: 0;
overflow: hidden;
&:hover {
opacity: 0.8;
border-color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
&.is-dragover {
border-color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
transform: scale(1.02);
}
}
.upload-btn {
background: var(--el-color-primary) !important;
border-color: var(--el-color-primary) !important;
width: 100%;
&:hover {
background: var(--el-color-primary-dark-2) !important;
border-color: var(--el-color-primary-dark-2) !important;
}
}
}
.submit-btn {
display: flex;
align-items: center;
margin: 20px 0;
justify-content: center;
.el-button {
width: 200px;
// 表单样式
.form {
.form-item {
margin-bottom: 20px;
.label {
margin-bottom: 8px;
font-weight: 500;
color: var(--theme-text-color-primary);
}
}
}
@@ -423,14 +554,62 @@
gap: 10px;
}
.form {
.form-item {
margin-bottom: 20px;
// 深色主题适配
:root[data-theme='dark'] {
.page-suno {
.setting-card,
.song-card {
background: var(--card-bg);
border-color: var(--el-border-color-light);
}
.label {
margin-bottom: 8px;
font-weight: 500;
color: var(--el-text-color-primary);
.remove-btn {
background: rgba(239, 68, 68, 0.1);
color: #fca5a5;
&:hover {
background: rgba(239, 68, 68, 0.2);
}
}
.error-message {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
.error-text {
color: #fca5a5;
}
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: #fca5a5;
&:hover {
background: rgba(239, 68, 68, 0.2);
}
}
}
}
// 响应式设计
@media (max-width: 768px) {
.page-suno {
flex-direction: column;
.left-bar {
max-width: none;
min-width: auto;
padding: 16px;
}
.right-box {
padding: 16px;
.music-player {
left: 0;
padding: 16px;
}
}
}
}

572
web/src/views/Suno.vue
View File

@@ -1,83 +1,62 @@
<template>
<div class="page-suno">
<div class="left-bar">
<!-- 顶部工具栏 -->
<div class="bg-white rounded-xl p-4 shadow-sm mb-6">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<el-tooltip content="定义模式" placement="top">
<div class="flex items-center space-x-2">
<span class="text-gray-700 font-medium">自定义模式</span>
<el-switch v-model="store.custom" size="large" />
</div>
</el-tooltip>
</div>
<div class="flex items-center space-x-3">
<el-tooltip
content="请上传6-60秒的原始音频，检测到人声的音频将仅设为私人音频。"
placement="bottom-end"
>
<el-upload
class="avatar-uploader"
:auto-upload="true"
:show-file-list="false"
:http-request="store.uploadAudio"
accept=".wav,.mp3"
>
<el-button
class="bg-blue-600 hover:bg-blue-700 text-white border-0"
round
type="primary"
>
<i class="iconfont icon-upload mr-2"></i>
<span>上传音乐</span>
</el-button>
</el-upload>
</el-tooltip>
<el-select v-model="store.data.model" placeholder="请选择模型" class="w-32">
<el-option
v-for="model in store.models"
:key="model.value"
:label="model.label"
:value="model.value"
/>
</el-select>
</div>
</div>
</div>
<!-- 参数设置区域 -->
<div class="space-y-6">
<!-- 自定义开关 -->
<div class="bg-white rounded-xl p-4 shadow-sm">
<div class="setting-card">
<div class="flex items-center justify-between">
<div>
<span class="text-gray-900 font-medium">自定义模式</span>
<p class="text-sm text-gray-500 mt-1">使用自定义模式，可以更精确地控制生成内容</p>
<span class="card-title">自定义模式</span>
<p class="card-description">可以更精确地控制生成内容</p>
</div>
<el-switch v-model="store.data.instrumental" size="default" />
<el-switch v-model="store.custom" size="large" />
</div>
</div>
<div class="setting-card">
<div class="flex items-center justify-between mb-3">
<label class="card-label">选择模型</label>
<el-popover
placement="right"
:width="200"
trigger="hover"
content="选择不同的模型，可以获得不同的生成效果"
>
<template #reference>
<el-icon class="help-icon">
<InfoFilled />
</el-icon>
</template>
</el-popover>
</div>
<el-select v-model="store.data.model" placeholder="请选择模型" class="w-full">
<el-option
v-for="model in store.models"
:key="model.value"
:label="model.label"
:value="model.value"
/>
</el-select>
</div>
<!-- 纯音乐开关 -->
<div class="bg-white rounded-xl p-4 shadow-sm">
<div class="setting-card">
<div class="flex items-center justify-between">
<div>
<span class="text-gray-900 font-medium">纯音乐</span>
<p class="text-sm text-gray-500 mt-1">生成不包含人声的音乐</p>
<span class="card-title">纯音乐</span>
<p class="card-description">生成不包含人声的音乐</p>
</div>
<el-switch v-model="store.data.instrumental" size="default" />
<el-switch v-model="store.data.instrumental" size="large" />
</div>
</div>
<!-- 自定义模式内容 -->
<div v-if="store.custom" class="space-y-6">
<!-- 歌词输入 -->
<div v-if="!store.data.instrumental" class="bg-white rounded-xl p-4 shadow-sm">
<div v-if="!store.data.instrumental" class="setting-card">
<div class="flex items-center justify-between mb-3">
<label class="text-gray-700 font-medium">歌词</label>
<label class="card-label">歌词</label>
<el-popover
placement="right"
:width="200"
@@ -85,17 +64,13 @@
content="自己写歌词或寻求 AI 的帮助。使用两节歌词（8 行）可获得最佳效果。"
>
<template #reference>
<el-icon class="text-gray-400 cursor-help">
<el-icon class="help-icon">
<InfoFilled />
</el-icon>
</template>
</el-popover>
</div>
<div
class="relative"
v-loading="store.isGenerating"
element-loading-text="正在生成歌词..."
>
<div class="relative">
<el-input
v-model="store.data.lyrics"
type="textarea"
@@ -106,20 +81,23 @@
resize="none"
class="mb-3"
/>
<button
@click="store.createLyric"
class="absolute bottom-3 right-3 px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-1"
>
<i class="iconfont icon-magic text-xs"></i>
<span>生成歌词</span>
</button>
<div class="flex justify-end">
<button @click="store.createLyric" class="lyric-btn" :disabled="store.isGenerating">
<i class="iconfont icon-magic text-xs"></i>
<span v-if="!store.isGenerating">生成歌词</span>
<span v-else class="flex items-center space-x-1">
<i class="iconfont icon-loading animate-spin text-xs"></i>
<span>生成中...</span>
</span>
</button>
</div>
</div>
</div>
<!-- 音乐风格 -->
<div class="bg-white rounded-xl p-4 shadow-sm">
<div class="setting-card">
<div class="flex items-center justify-between mb-3">
<label class="text-gray-700 font-medium">音乐风格</label>
<label class="card-label">音乐风格</label>
<el-popover
placement="right"
:width="200"
@@ -127,7 +105,7 @@
content="描述您想要的音乐风格（例如：原声流行音乐）。Sunos 模特无法识别艺术家的名字，但能够理解音乐流派和氛围。"
>
<template #reference>
<el-icon class="text-gray-400 cursor-help">
<el-icon class="help-icon">
<InfoFilled />
</el-icon>
</template>
@@ -149,7 +127,7 @@
v-for="tag in store.tags"
:key="tag.value"
@click="store.selectTag(tag)"
class="px-3 py-1.5 text-sm border border-blue-200 text-blue-600 rounded-full hover:bg-blue-50 transition-colors hover:border-blue-300"
class="tag-btn"
>
{{ tag.label }}
</button>
@@ -157,9 +135,9 @@
</div>
<!-- 歌曲名称 -->
<div class="bg-white rounded-xl p-4 shadow-sm">
<div class="setting-card">
<div class="flex items-center justify-between mb-3">
<label class="text-gray-700 font-medium">歌曲名称</label>
<label class="card-label">歌曲名称</label>
<el-popover
placement="right"
:width="200"
@@ -167,7 +145,7 @@
content="给你的歌曲起一个标题，以便于分享、发现和组织。"
>
<template #reference>
<el-icon class="text-gray-400 cursor-help">
<el-icon class="help-icon">
<InfoFilled />
</el-icon>
</template>
@@ -183,21 +161,9 @@
</div>
<!-- 简单模式内容 -->
<div v-else class="bg-white rounded-xl p-4 shadow-sm">
<div v-else class="setting-card">
<div class="flex items-center justify-between mb-3">
<label class="text-gray-700 font-medium">歌曲描述</label>
<el-popover
placement="right"
:width="200"
trigger="hover"
content="描述您想要的音乐风格和主题（例如：关于假期的流行音乐）。请使用流派和氛围，而不是特定的艺术家和歌曲风格，AI无法识别。"
>
<template #reference>
<el-icon class="text-gray-400 cursor-help">
<InfoFilled />
</el-icon>
</template>
</el-popover>
<label class="card-label">歌曲描述</label>
</div>
<el-input
v-model="store.data.prompt"
@@ -206,53 +172,54 @@
:maxlength="1024"
:show-word-limit="true"
resize="none"
placeholder="例如：一首关于爱情的摇滚歌曲..."
placeholder="描述您想要的音乐风格和主题（例如：关于假期的流行音乐）。请使用流派和氛围，而不是特定的艺术家和歌曲风格，AI无法识别。"
/>
</div>
<!-- 续写歌曲 -->
<div
v-if="store.refSong"
class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-orange-400"
>
<div v-if="store.refSong" class="setting-card extend-song-card">
<div class="flex items-center justify-between mb-3">
<h3 class="text-gray-900 font-medium">续写歌曲</h3>
<button
@click="store.removeRefSong"
class="px-3 py-1.5 text-sm bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-colors"
>
移除
</button>
<h3 class="card-title">续写歌曲</h3>
<button @click="store.removeRefSong" class="remove-btn">移除</button>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-600">歌曲名称：</span>
<span class="text-gray-900 font-medium">{{ store.refSong.title }}</span>
<span class="text-secondary">歌曲名称：</span>
<span class="text-primary font-medium">{{ store.refSong.title }}</span>
</div>
<div>
<label class="block text-gray-700 font-medium mb-2">续写开始时间(秒)</label>
<label class="block text-secondary font-medium mb-2">续写开始时间(秒)</label>
<input
v-model="store.refSong.extend_secs"
type="number"
placeholder="从第几秒开始续写"
class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
class="extend-input"
/>
</div>
</div>
</div>
<!-- 生成按钮 -->
<div class="setting-card">
<button @click="store.create" :disabled="store.loading" class="create-btn">
<i v-if="store.loading" class="iconfont icon-loading animate-spin"></i>
<i v-else class="iconfont icon-chuangzuo"></i>
<span>{{ store.loading ? '创作中...' : store.btnText }}</span>
</button>
</div>
<!-- 上传音乐 -->
<div class="bg-white rounded-xl p-4 shadow-sm">
<div class="setting-card">
<div class="flex items-center justify-between mb-3">
<label class="text-gray-700 font-medium">上传音乐文件</label>
<label class="card-label">上传音乐文件</label>
<el-popover
placement="right"
:width="200"
trigger="hover"
content="支持 .wav, .mp3 格式，文件大小不超过 50MB"
content="上传你自己的音乐文件，然后进行二次创作"
>
<template #reference>
<el-icon class="text-gray-400 cursor-help">
<el-icon class="help-icon">
<InfoFilled />
</el-icon>
</template>
@@ -260,114 +227,46 @@
</div>
<!-- 上传区域 -->
<div
class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer relative"
@click="triggerFileInput"
@drop="handleDrop"
@dragover.prevent
@dragenter.prevent
<el-upload
class="custom-upload"
drag
:auto-upload="true"
:show-file-list="false"
:http-request="store.uploadAudio"
accept=".wav,.mp3"
:limit="1"
>
<input
ref="fileInput"
type="file"
accept=".wav,.mp3"
@change="handleFileSelect"
class="hidden"
/>
<!-- 上传中状态 -->
<div v-if="uploading" class="flex flex-col items-center space-y-3">
<div
class="w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin"
></div>
<div class="text-center">
<p class="text-gray-700 font-medium">正在上传...</p>
<p class="text-sm text-gray-500">{{ uploadProgress }}%</p>
<template #trigger>
<div class="p-2">
<el-button class="upload-btn" size="large" type="primary">
<i class="iconfont icon-upload mr-2"></i>
<span>上传音乐</span>
</el-button>
</div>
</div>
<!-- 默认状态 -->
<div
v-else-if="!uploadedFile"
@click="triggerFileInput"
class="flex flex-col items-center space-y-3"
>
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
<i class="iconfont icon-upload text-blue-500 text-2xl"></i>
</div>
<div class="text-center">
<p class="text-gray-700 font-medium">点击或拖拽上传音乐文件</p>
<p class="text-sm text-gray-500 mt-1">支持 .wav, .mp3 格式，最大 10MB</p>
</div>
</div>
<!-- 已上传文件预览 -->
<div v-else class="flex items-center space-x-4 w-full">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<i class="iconfont icon-mp3 text-blue-500 text-xl"></i>
</div>
</div>
<div class="flex-1 text-left">
<p class="text-gray-700 font-medium truncate">{{ uploadedFile.name }}</p>
<p class="text-sm text-gray-500">{{ formatFileSize(uploadedFile.size) }}</p>
</div>
<div class="flex space-x-2">
<button
@click.stop="playUploadedFile"
class="p-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition-colors"
title="播放"
>
<i class="iconfont icon-play text-sm"></i>
</button>
<button
@click.stop="removeUploadedFile"
class="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-colors"
title="移除"
>
<i class="iconfont icon-remove text-sm"></i>
</button>
</div>
</div>
</div>
</template>
</el-upload>
<!-- 上传提示 -->
<div class="mt-3 text-sm text-gray-500">
<div class="upload-tips">
<p>• 上传你自己的音乐文件，然后进行二次创作</p>
<p>• 请上传6-60秒的原始音频</p>
<p>• 支持格式：WAV, MP3, 最大 10MB</p>
<p>• 检测到人声的音频将仅设为私人音频</p>
</div>
</div>
<!-- 生成按钮 -->
<div class="bg-white rounded-xl p-4 shadow-sm">
<button
@click="store.create"
:disabled="store.loading"
class="w-full py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center space-x-2"
>
<i v-if="store.loading" class="iconfont icon-loading animate-spin"></i>
<span>{{ store.loading ? '创作中...' : store.btnText }}</span>
</button>
</div>
</div>
</div>
<!-- 右侧作品列表 -->
<div
class="right-box h-dvh"
class="right-box"
v-loading="store.loading"
element-loading-background="rgba(100,100,100,0.3)"
>
<div class="list-box" v-if="!store.noData">
<div
v-for="item in store.list"
:key="item.id"
class="bg-white rounded-xl p-4 shadow-sm mb-4"
>
<div v-for="item in store.list" :key="item.id" class="song-card">
<div class="flex space-x-4">
<div class="flex-shrink-0">
<div class="relative w-16 h-16 rounded-lg overflow-hidden bg-gray-100">
<div class="song-cover">
<el-image
:src="item.cover_url"
fit="cover"
@@ -375,31 +274,21 @@
:preview-disabled="true"
>
<template #error>
<div class="w-full h-full flex items-center justify-center bg-gray-100">
<div class="cover-placeholder">
<i class="iconfont icon-mp3 text-gray-400 text-xl"></i>
</div>
</template>
</el-image>
<!-- 音乐播放按钮 -->
<button
v-if="item.progress === 100"
@click="play(item)"
class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity"
>
<button v-if="item.progress === 100" @click="play(item)" class="play-overlay">
<i class="iconfont icon-play text-white text-xl"></i>
</button>
<!-- 进度动画 -->
<div
v-if="item.progress < 100 && item.progress !== 101"
class="absolute inset-0 flex items-center justify-center bg-blue-500 bg-opacity-20"
>
<div v-if="item.progress < 100 && item.progress !== 101" class="progress-overlay">
<i class="iconfont icon-loading animate-spin text-blue-500 text-xl"></i>
</div>
<!-- 失败状态 -->
<div
v-if="item.progress === 101"
class="absolute inset-0 flex items-center justify-center bg-red-500 bg-opacity-20"
>
<div v-if="item.progress === 101" class="error-overlay">
<i class="iconfont icon-warning text-red-500 text-xl"></i>
</div>
</div>
@@ -407,25 +296,18 @@
<div class="flex-1 min-w-0">
<div class="flex items-start justify-between">
<div class="flex-1">
<h3 class="text-gray-900 font-medium truncate">
<a
:href="'/song/' + item.song_id"
target="_blank"
class="hover:text-blue-600 transition-colors"
>
<h3 class="song-title">
<a :href="'/song/' + item.song_id" target="_blank" class="song-link">
{{ item.title || '未命名歌曲' }}
</a>
</h3>
<p class="text-gray-500 text-sm mt-1 line-clamp-2">
<p class="song-description">
{{ item.tags || item.prompt }}
</p>
</div>
<!-- 任务状态 -->
<div v-if="item.progress < 100" class="flex items-center space-x-2 text-sm">
<div
v-if="item.progress === 101"
class="text-red-600 flex items-center space-x-1"
>
<div v-if="item.progress < 100" class="task-status">
<div v-if="item.progress === 101" class="status-error">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
@@ -436,38 +318,24 @@
</svg>
<span>失败</span>
</div>
<div v-else class="text-blue-600 flex items-center space-x-1">
<div
class="w-3 h-3 border border-blue-600 border-t-transparent rounded-full animate-spin"
></div>
<div v-else class="status-loading">
<div class="loading-spinner"></div>
<span>生成中</span>
</div>
</div>
</div>
<!-- 标签 -->
<div class="flex items-center space-x-2 mt-2">
<span
v-if="item.major_model_version"
class="px-2 py-1 text-xs bg-blue-100 text-blue-600 rounded-full"
>
<div class="song-tags">
<span v-if="item.major_model_version" class="model-tag">
{{ item.major_model_version }}
</span>
<span
v-if="item.type === 4"
class="px-2 py-1 text-xs bg-green-100 text-green-600 rounded-full"
>
<span v-if="item.type === 4" class="upload-tag">
<i class="iconfont icon-upload mr-1"></i>用户上传
</span>
<span
v-if="item.type === 3"
class="px-2 py-1 text-xs bg-yellow-100 text-yellow-600 rounded-full"
>
<span v-if="item.type === 3" class="full-song-tag">
<i class="iconfont icon-mp3 mr-1"></i>完整歌曲
</span>
<span
v-if="item.ref_song"
class="px-2 py-1 text-xs bg-purple-100 text-purple-600 rounded-full"
>
<span v-if="item.ref_song" class="extend-tag">
<i class="iconfont icon-link mr-1"></i>续写
</span>
</div>
@@ -475,13 +343,9 @@
</div>
<!-- 操作按钮 -->
<div class="flex items-center justify-between mt-4">
<div class="flex space-x-2">
<button
v-if="item.progress === 100"
@click="play(item)"
class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-1"
>
<div class="song-actions">
<div class="action-buttons">
<button v-if="item.progress === 100" @click="play(item)" class="action-btn play-btn">
<i class="iconfont icon-play text-xs"></i>
<span>播放</span>
</button>
@@ -489,7 +353,7 @@
v-if="item.progress === 100"
@click="store.download(item)"
:disabled="item.downloading"
class="px-3 py-1.5 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition-colors disabled:bg-gray-400 flex items-center space-x-1"
class="action-btn download-btn"
>
<svg
v-if="item.downloading"
@@ -517,31 +381,30 @@
<button
v-if="item.progress === 100 && item.ref_song"
@click="store.merge(item)"
class="px-3 py-1.5 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors flex items-center space-x-1"
class="action-btn merge-btn"
>
<i class="iconfont icon-concat text-xs"></i>
<span>合并</span>
</button>
<button
v-if="item.progress !== 101"
@click="store.extend(item)"
class="px-3 py-1.5 bg-orange-600 text-white text-sm rounded-lg hover:bg-orange-700 transition-colors flex items-center space-x-1"
class="action-btn extend-btn"
>
<i class="iconfont icon-edit text-xs"></i>
<span>续写</span>
</button>
</div>
<div class="flex space-x-2">
<div class="action-buttons">
<button
v-if="item.progress !== 101"
@click="store.update(item)"
class="px-3 py-1.5 bg-gray-600 text-white text-sm rounded-lg hover:bg-gray-700 transition-colors flex items-center space-x-1"
class="action-btn edit-btn"
>
<i class="iconfont icon-edit text-xs"></i>
<span>编辑</span>
</button>
<button
@click="store.removeJob(item)"
class="px-3 py-1.5 bg-red-100 text-red-600 text-sm rounded-lg hover:bg-red-200 transition-colors flex items-center space-x-1"
>
<button @click="store.removeJob(item)" class="action-btn delete-btn">
<i class="iconfont icon-remove text-xs"></i>
<span>删除</span>
</button>
@@ -549,27 +412,21 @@
</div>
<!-- 进度条 -->
<div v-if="item.progress < 100 && item.progress !== 101" class="mt-4">
<div class="flex justify-between text-sm text-gray-600 mb-1">
<div v-if="item.progress < 100 && item.progress !== 101" class="progress-bar">
<div class="progress-info">
<span>生成进度</span>
<span>{{ item.progress }}%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div
class="bg-blue-600 h-2 rounded-full transition-all duration-300"
:style="{ width: item.progress + '%' }"
></div>
<div class="progress-track">
<div class="progress-fill" :style="{ width: item.progress + '%' }"></div>
</div>
</div>
<!-- 错误信息 -->
<div
v-if="item.progress === 101"
class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg"
>
<div v-if="item.progress === 101" class="error-message">
<div class="flex items-start space-x-2">
<div>
<p class="text-red-600 text-sm">{{ item.err_msg || '未知错误' }}</p>
<p class="error-text">{{ item.err_msg || '未知错误' }}</p>
</div>
</div>
</div>
@@ -587,7 +444,6 @@
<el-pagination
v-if="store.total > store.pageSize"
background
style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
layout="total,prev, pager, next"
:hide-on-single-page="true"
:current-page="store.page"
@@ -660,7 +516,6 @@ import MusicPlayer from '@/components/MusicPlayer.vue'
import { checkSession } from '@/store/cache'
import { useSunoStore } from '@/store/suno'
import { InfoFilled } from '@element-plus/icons-vue'
import Clipboard from 'clipboard'
import { ElMessage } from 'element-plus'
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -669,12 +524,6 @@ const store = useSunoStore()
// 组件内部状态
const playerRef = ref(null)
const clipboard = ref(null)
const fileInput = ref(null)
const uploading = ref(false)
const uploadProgress = ref(0)
const uploadedFile = ref(null)
const uploadedAudioUrl = ref('')
// 播放音乐
const play = (item) => {
@@ -683,108 +532,6 @@ const play = (item) => {
nextTick(() => playerRef.value.play())
}
// 文件上传相关方法
const triggerFileInput = () => {
fileInput.value?.click()
}
const formatFileSize = (bytes) => {
if (bytes === 0) return '0 Bytes'
const k = 1024
const sizes = ['Bytes', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
const handleFileSelect = (event) => {
const file = event.target.files[0]
if (file) {
validateAndUploadFile(file)
}
}
const handleDrop = (event) => {
event.preventDefault()
const files = event.dataTransfer.files
if (files.length > 0) {
validateAndUploadFile(files[0])
}
}
const validateAndUploadFile = (file) => {
// 验证文件类型
const allowedTypes = ['audio/wav', 'audio/mp3', 'audio/mpeg']
if (!allowedTypes.includes(file.type)) {
ElMessage.error('只支持 WAV 和 MP3 格式的音频文件')
return
}
// 验证文件大小 (50MB)
const maxSize = 50 * 1024 * 1024
if (file.size > maxSize) {
ElMessage.error('文件大小不能超过 50MB')
return
}
uploadedFile.value = file
uploadFile(file)
}
const uploadFile = async (file) => {
uploading.value = true
uploadProgress.value = 0
try {
const formData = new FormData()
formData.append('file', file)
// 模拟上传进度
const progressInterval = setInterval(() => {
if (uploadProgress.value < 90) {
uploadProgress.value += Math.random() * 10
}
}, 200)
// 只上传文件，不创建任务
const { httpPost } = await import('@/utils/http')
const res = await httpPost('/api/upload', formData)
clearInterval(progressInterval)
uploadProgress.value = 100
// 保存上传的音频URL
uploadedAudioUrl.value = res.data.url
ElMessage.success('文件上传成功')
// 延迟重置状态
setTimeout(() => {
uploading.value = false
uploadProgress.value = 0
}, 1000)
} catch (error) {
uploading.value = false
uploadProgress.value = 0
uploadedFile.value = null
ElMessage.error('文件上传失败：' + error.message)
}
}
const playUploadedFile = () => {
if (uploadedAudioUrl.value) {
const audio = new Audio(uploadedAudioUrl.value)
audio.play()
}
}
const removeUploadedFile = () => {
uploadedFile.value = null
uploadedAudioUrl.value = ''
if (fileInput.value) {
fileInput.value.value = ''
}
}
// 监听器
watch(
() => store.custom,
@@ -797,15 +544,6 @@ watch(
// 生命周期
onMounted(() => {
// 初始化剪贴板
clipboard.value = new Clipboard('.copy-link')
clipboard.value.on('success', () => {
ElMessage.success('复制歌曲链接成功！')
})
clipboard.value.on('error', () => {
ElMessage.error('复制失败！')
})
// 检查会话并初始化数据
checkSession()
.then(() => {
@@ -817,54 +555,10 @@ onMounted(() => {
onUnmounted(() => {
// 清理资源
if (clipboard.value) {
clipboard.value.destroy()
}
store.stopTaskPolling()
})
</script>
<style lang="scss" scoped>
@use '../assets/css/suno.scss' as *;
/* 文本截断 */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 动画 */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
/* 自定义滚动条 */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
@import '../assets/css/suno.scss';
</style>

12
web/src/views/mobile/pages/JimengCreate.vue
View File

@@ -724,17 +724,7 @@ const imageToVideoParams = ref({
aspect_ratio: '16:9',
})
// 选项数据
const imageSizeOptions = ['512x512', '768x768', '1024x1024', '1024x1536', '1536x1024']
const videoAspectRatioOptions = ['16:9', '9:16', '1:1', '4:3']
const imageEffectsTemplateOptions = [
'acrylic_ornaments',
'angel_figurine',
'felt_3d_polaroid',
'watercolor_illustration',
]
// 选项数据 - 已在上方定义，这里删除重复声明
// 页面数据
const page = ref(1)

3
web/src/views/mobile/pages/SunoCreate.vue
View File

@@ -455,9 +455,6 @@
</div>
</div>
</div>
<!-- 删除确认对话框 -->
<!-- 已移除，改为 van showConfirmDialog 方式 -->
</div>
</template>