diff --git a/index.html b/index.html index f4aef46..3567089 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,39 @@
+ diff --git a/src/apis/Model.ts b/src/apis/Model.ts index ebf43cf..91b3cb1 100644 --- a/src/apis/Model.ts +++ b/src/apis/Model.ts @@ -6,6 +6,9 @@ export const textvideo = (data:D):Promise =>post('/llmage/vidu_inference // 图生视频 export const imagetovideo = (data:D):Promise =>post('/llmage/vidu_inference.dspy',data) +// 参考生视频 +export const referencevideo = (data:D):Promise =>post('/llmage/video',data) + // 获取所有模型 export const AllModel = (data:D):Promise =>get('/llmage/get_type_llms.dspy',data) diff --git a/src/assets/images/loginBg.mp4 b/src/assets/images/loginBg.mp4 new file mode 100644 index 0000000..36b0ba8 Binary files /dev/null and b/src/assets/images/loginBg.mp4 differ diff --git a/src/assets/less/Recharge/Recharge.less b/src/assets/less/Recharge/Recharge.less index f3c7243..a06e9f9 100644 --- a/src/assets/less/Recharge/Recharge.less +++ b/src/assets/less/Recharge/Recharge.less @@ -368,7 +368,7 @@ .custom-dialog { width: 100%; - max-width: 420px; + max-width: 600px; background: linear-gradient(180deg, rgba(23, 26, 37, 0.98), rgba(15, 18, 27, 0.99)); backdrop-filter: blur(18px); border-radius: 24px; @@ -381,7 +381,7 @@ display: flex; justify-content: space-between; align-items: center; - padding: 20px 30px; + margin: 20px 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); h3 { diff --git a/src/assets/less/Video/refernce/refernce.less b/src/assets/less/Video/refernce/refernce.less new file mode 100644 index 0000000..b08db28 --- /dev/null +++ b/src/assets/less/Video/refernce/refernce.less @@ -0,0 +1,426 @@ +.reference-to-video { + height: auto; + min-height: 100%; + display: flex; + flex-direction: column; + gap: 16px!important; + overflow: visible; +} + +:deep(.el-select__wrapper) { + + width: 100% !important; + border: none !important; + background-color: rgba(0, 0, 0, 0.32) !important; + box-shadow: none !important; + border-radius: 0 !important; + font-size: 14px; + color: #fff !important; + resize: vertical; + outline: none !important; + border-radius: 10px !important; + color: #fff; + } + :deep(.el-select__selected-item){ + color: #fff!important; + } + :deep(.el-textarea) { + + .el-textarea__inner { + + border: none !important; + background-color: rgba(0, 0, 0, 0.32) !important; + box-shadow: none !important; + border-radius: 0 !important; + padding: 12px 0 !important; + font-size: 14px; + line-height: 1.5; + color: #fff !important; + resize: vertical; + outline: none !important; + border-radius: 10px !important; + color: #fff; + backdrop-filter: blur(30px); + padding: 14px 16px !important; + + &:focus { + border: none !important; + box-shadow: none !important; + outline: none !important; + } + + &::placeholder { + color: #ffffff7a !important; + font-size: 14px; + } + } + + // 确保没有任何附加的边框或装饰出现 + .el-input__count { + background: transparent; + color: #ffffff7a; + } + } + + .card { + width: 100%; + background-color: #1a1c20; + border: none; + flex: 0 0 auto; + min-height: fit-content; + margin-bottom: 16px; + padding: 16px; + border-radius: 12px; + display: flex; + flex-direction: column; + overflow: visible; + + :deep(.el-card__body) { + height: auto; + padding: 12px 16px; + overflow: visible; + } + } + + .reference-container { + flex: none; + gap: 20px; + color: #fff; + overflow: visible; + } + + .reference-header { + display: flex; + flex-direction: column; + gap: 18px; + padding: 8px 0 4px; + flex-shrink: 0; + } + + .reference-header__copy { + display: flex; + flex-direction: column; + gap: 8px; + } + + .reference-header__title { + font-size: 22px; + line-height: 1.35; + font-weight: 700; + color: #fff; + } + + .reference-header__desc { + font-size: 15px; + line-height: 1.5; + color: rgba(255, 255, 255, 0.72); + } + + .reference-header__actions { + display: flex; + align-items: center; + gap: 12px; + flex-wrap: wrap; + } + + .hidden-upload-input { + display: none; + } + + .reference-action-btn { + display: inline-flex; + align-items: center; + gap: 10px; + height: 46px; + padding: 0 22px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 14px; + background: rgba(255, 255, 255, 0.04); + color: #fff; + font-size: 16px; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.18); + } + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + } + } + + .reference-action-btn__icon { + font-size: 26px; + line-height: 1; + font-weight: 300; + } + + .reference-assets { + display: flex; + gap: 12px; + flex-wrap: wrap; + } + + .reference-asset-card { + width: 180px; + overflow: hidden; + border-radius: 12px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + } + + .reference-asset-card__image { + display: block; + width: 100%; + height: 110px; + object-fit: cover; + background: rgba(0, 0, 0, 0.24); + } + + .reference-asset-card--audio { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .reference-asset-card__audio { + display: flex; + align-items: center; + gap: 12px; + min-height: 110px; + padding: 16px; + } + + .reference-asset-card__audio-icon { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + border-radius: 12px; + background: rgba(255, 255, 255, 0.12); + color: #fff; + font-weight: 600; + } + + .reference-asset-card__audio-info { + min-width: 0; + display: flex; + flex-direction: column; + gap: 4px; + } + + .reference-asset-card__audio-title { + font-size: 14px; + color: #fff; + } + + .reference-asset-card__audio-name { + max-width: 100px; + font-size: 12px; + color: rgba(255, 255, 255, 0.64); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .dialog-preview-media { + display: block; + width: 100%; + max-height: 70vh; + object-fit: contain; + } + + .dialog-preview-audio { + display: block; + width: 100%; + } + + .reference-asset-card__meta { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 10px 12px; + } + + .reference-asset-card__label { + font-size: 13px; + color: rgba(255, 255, 255, 0.8); + } + + .reference-asset-card__actions { + display: flex; + align-items: center; + gap: 8px; + } + + .input { + flex: 1; + width: 100%; + display: flex; + flex-direction: column; + + :deep(.el-textarea) { + flex: 1; + display: flex; + flex-direction: column; + } + + :deep(.el-textarea__inner) { + flex: 1; + min-height: 150px; + } + + :deep(.el-input__inner) { + background-color: rgba(0, 0, 0, 0.32); + border: none; + border-radius: 10px; + color: #fff; + backdrop-filter: blur(30px); + padding: 14px 16px; + font-size: 14px; + line-height: 24px; + + &::placeholder { + color: rgba(255, 255, 255, 0.36); + } + + &:focus { + box-shadow: none; + border-color: transparent; + } + } + } + + .btmcard { + width: 100%; + background-color: #1a1c20; + border: none; + flex-shrink: 0; + padding: 16px; + border-radius: 12px; + overflow: visible; + + :deep(.el-card__body) { + padding: 12px 16px; + } + } + + .select { + display: flex; + flex-direction: column; + gap: 16px; + } + + .select-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 0; + } + + .select-title { + width: 50%; + font-size: 14px; + color: #fff; + padding-right: 12px; + } + + .required-star { + margin-left: 4px; + color: #ff8f8f; + } + + .select-content { + width: 50%; + display: flex; + gap: 8px; + } + + :deep(.el-input-number) { + width: 100%; + + .el-input__wrapper { + background-color: rgba(0, 0, 0, 0.32) !important; + border: none !important; + box-shadow: none !important; + border-radius: 10px !important; + } + + .el-input__inner { + color: #fff !important; + background-color: transparent !important; + } + + .el-input-number__decrease, + .el-input-number__increase { + background-color: rgba(255, 255, 255, 0.08); + color: #fff; + border: none; + } + } + + .radio-group { + width: 50%; + display: flex; + background-color: rgba(255, 255, 255, 0.04); + border-radius: 8px; + overflow: hidden; + } + + .and { + color: #ffffff66; + margin: 0 4px; + } + + .radio-item { + flex: 1; + height: 36px; + border: none; + background: transparent; + color: white; + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; + } + + .radio-item.selected { + background-color: rgba(255, 255, 255, 0.08); + position: relative; + } + + .radio-item.premium { + background-clip: text; + -webkit-background-clip: text; + color: transparent; + background-image: linear-gradient(to bottom, #7280FF, #DADFFF); + font-weight: 600; + } + + .uploaded-action { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.12); + color: #fff; + cursor: pointer; + transition: background-color 0.2s ease; + + &:hover { + background-color: rgba(255, 255, 255, 0.24); + } + + .el-icon { + font-size: 16px; + } + } \ No newline at end of file diff --git a/src/components/Header/Header.vue b/src/components/Header/Header.vue index a984e9c..4010b9c 100644 --- a/src/components/Header/Header.vue +++ b/src/components/Header/Header.vue @@ -43,10 +43,10 @@ 用户名: {{ loginStore.userInfo?.user?.name || loginStore.userInfo?.user?.username }} -
+
@@ -62,9 +62,9 @@ -
+
diff --git a/src/components/RightResult/RightResult.vue b/src/components/RightResult/RightResult.vue index d986dbb..a5c11ae 100644 --- a/src/components/RightResult/RightResult.vue +++ b/src/components/RightResult/RightResult.vue @@ -16,11 +16,11 @@ - - - - - + + + + +
@@ -88,7 +88,7 @@
-
+
{{ getStatusText(task.status) }}
@@ -189,7 +189,7 @@ const filteredTasks = computed(() => { // 筛选进行中的任务 if (showProcessing.value) { - tasks = tasks.filter(task => task.status === 'processing'); + tasks = tasks.filter(task => isInProgressStatus(task.status)); } // 筛选特定状态的任务 @@ -213,6 +213,27 @@ const filteredTasks = computed(() => { */ const handleFilterChange = () => {}; +const normalizeTaskStatus = (status?: string): string => { + const upperStatus = String(status || '').toUpperCase(); + const statusMap: Record = { + CREATED: 'CREATED', + PENDING: 'PENDING', + QUEUEING: 'PENDING', + RUNNING: 'RUNNING', + PROCESSING: 'RUNNING', + SUCCEEDED: 'SUCCEEDED', + COMPLETED: 'SUCCEEDED', + FAILED: 'FAILED' + }; + + return statusMap[upperStatus] || upperStatus; +}; + +const isInProgressStatus = (status?: string) => { + const normalizedStatus = normalizeTaskStatus(status); + return normalizedStatus === 'CREATED' || normalizedStatus === 'PENDING' || normalizedStatus === 'RUNNING'; +}; + const getPreviewBgStyle = (coverUrl?: string) => { if (!coverUrl) { return {}; @@ -229,16 +250,14 @@ const getPreviewBgStyle = (coverUrl?: string) => { */ const getStatusText = (status: string): string => { const statusMap: Record = { - 'created': '已创建', - 'processing': '处理中', - 'running': '处理中', - 'queueing': '排队中', - 'succeeded': '已完成', - 'completed': '已完成', - 'failed': '失败', - 'PENDING': '处理中' + 'CREATED': '已创建', + 'PENDING': '排队中', + 'RUNNING': '运行中', + 'SUCCEEDED': '成功', + 'FAILED': '失败' }; - return statusMap[status] || status; + const normalizedStatus = normalizeTaskStatus(status); + return statusMap[normalizedStatus] || normalizedStatus; }; /** @@ -247,16 +266,14 @@ const getStatusText = (status: string): string => { */ const getStatusClass = (status: string): string => { const classMap: Record = { - 'created': 'status-created', - 'processing': 'status-processing', - 'running': 'status-processing', - 'queueing': 'status-queueing', - 'succeeded': 'status-succeeded', - 'completed': 'status-completed', - 'failed': 'status-failed', - 'PENDING': 'status-processing' + 'CREATED': 'status-created', + 'PENDING': 'status-queueing', + 'RUNNING': 'status-processing', + 'SUCCEEDED': 'status-succeeded', + 'FAILED': 'status-failed' }; - return classMap[status] || ''; + const normalizedStatus = normalizeTaskStatus(status); + return classMap[normalizedStatus] || ''; }; /** @@ -369,7 +386,7 @@ const updateTaskStatus = async (taskId: string) => { const taskIndex = taskList.value.findIndex(t => t.taskid === taskId); if (taskIndex !== -1) { // 更新状态（从 res.data.resposne.status 获取） - const newStatus = res.data.resposne.status?.toLowerCase() || taskList.value[taskIndex].status; + const newStatus = normalizeTaskStatus(res.data.resposne.status || taskList.value[taskIndex].status); taskList.value[taskIndex].status = newStatus; // 如果返回了新的视频地址，更新视频地址（从 res.data.resposne 获取） @@ -391,13 +408,7 @@ const updateTaskStatus = async (taskId: string) => { */ const pollTasksStatus = () => { // 获取所有进行中的任务 - const processingTasks = taskList.value.filter(task => - task.status === 'created' || - task.status === 'processing' || - task.status === 'queueing' || - task.status === 'running' || - task.status === 'PENDING' - ); + const processingTasks = taskList.value.filter(task => isInProgressStatus(task.status)); if (processingTasks.length === 0) { // 如果没有进行中的任务，停止轮询 @@ -457,7 +468,7 @@ const loadTaskList = async () => { return { taskid: task.taskid, - status: task.status?.toLowerCase() || finalOutput.status?.toLowerCase() || 'created', + status: normalizeTaskStatus(task.status || finalOutput.status || 'CREATED'), prompt: input.prompt, cover_url: finalOutput.image || undefined, video_url: finalOutput.video || undefined, @@ -471,13 +482,7 @@ const loadTaskList = async () => { }); // 加载完成后，启动轮询（如果有进行中的任务） - const hasProcessingTasks = taskList.value.some(task => - task.status === 'created' || - task.status === 'processing' || - task.status === 'queueing' || - task.status === 'running' || - task.status === 'PENDING' - ); + const hasProcessingTasks = taskList.value.some(task => isInProgressStatus(task.status)); if (hasProcessingTasks) { startPolling(); diff --git a/src/components/index/StencilTabs.vue b/src/components/index/StencilTabs.vue index 3b7c817..78cae0f 100644 --- a/src/components/index/StencilTabs.vue +++ b/src/components/index/StencilTabs.vue @@ -73,6 +73,8 @@ const handleTabClick = (type: string) => { .stencil-item { cursor: pointer; + position: relative; + padding-bottom: 8px; } .stencil-item.active .item-title { @@ -80,6 +82,18 @@ const handleTabClick = (type: string) => { font-weight: bold; } +.stencil-item.active::after { + content: ''; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + width: 24px; + height: 2px; + border-radius: 999px; + background-color: #fff; +} + .item-title { font-size: 16px; color: rgba(255, 255, 255, 0.7); diff --git a/src/components/index/StencilWaterfall.vue b/src/components/index/StencilWaterfall.vue index 0cfdb74..03a7aaf 100644 --- a/src/components/index/StencilWaterfall.vue +++ b/src/components/index/StencilWaterfall.vue @@ -3,7 +3,7 @@
-
+