From 52a1094144e0683821249c89a7d996d2ec4fa806 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Thu, 5 Mar 2026 23:43:27 +0800
Subject: [PATCH] feat(kling): add validation error display in timeline panel
 and update UI components

- Remove unused audio base64 reference and error message in VoiceSelector
- Rename CSS class from 'result-banner' to 'result-inline' and update button styling
- Pass validationError prop from GenerateStep to TimelinePanel
- Add validation error display in TimelinePanel with error state styling
- Update conditional rendering to show either validation error or duration diff
- Add CloseCircleOutlined icon for error status display
---
 .../web-gold/src/components/VoiceSelector.vue |  3 --
 .../web-gold/src/views/kling/IdentifyFace.vue | 17 +--------
 .../views/kling/components/GenerateStep.vue   |  1 +
 .../views/kling/components/TimelinePanel.vue  | 16 +++++++-
 .../kling/components/VoiceConfigStep.vue      |  1 +
 .../kling/stores/useDigitalHumanStore.ts      | 15 +++++++-
 .../digital-human-task/index.vue              | 17 ++-------
 .../service/TikUserVoiceServiceImpl.java      | 37 -------------------
 8 files changed, 36 insertions(+), 71 deletions(-)

diff --git a/frontend/app/web-gold/src/components/VoiceSelector.vue b/frontend/app/web-gold/src/components/VoiceSelector.vue
index b286625487..6a17f4894b 100644
--- a/frontend/app/web-gold/src/components/VoiceSelector.vue
+++ b/frontend/app/web-gold/src/components/VoiceSelector.vue
@@ -103,7 +103,6 @@ const playerContainer = ref(null)
 const audioUrl = ref('')
 const currentVoiceName = ref('')
 const isPlayerInitializing = ref(false)
-const currentAudioBase64 = ref('')  // 保存当前音频的 base64 数据
 
 // 默认封面图片（音频波形图标）
 const defaultCover = `data:image/svg+xml;base64,${btoa(`
@@ -208,7 +207,6 @@ const handlePlayVoiceSample = (voice) => {
     (data) => {
       const url = data.audioUrl || data.objectUrl
       if (!url) return
-      currentAudioBase64.value = data.audioBase64 || ''
       initPlayer(url)
     },
     undefined, // 错误静默处理
@@ -259,7 +257,6 @@ const initPlayer = (url) => {
 
       player.on('error', (e) => {
         console.error('APlayer 播放错误:', e)
-        message.error('音频播放失败，请重试')
       })
 
       player.on('canplay', () => {
diff --git a/frontend/app/web-gold/src/views/kling/IdentifyFace.vue b/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
index 656900da37..cb2d481d6b 100644
--- a/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
+++ b/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
@@ -850,7 +850,7 @@ onMounted(async () => {
   justify-content: flex-end;
 }
 
-.result-banner {
+.result-inline {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -870,17 +870,7 @@ onMounted(async () => {
     color: @accent-red;
   }
 
-  .banner-icon {
-    font-size: 16px;
-    flex-shrink: 0;
-  }
-
-  .banner-text {
-    flex: 1;
-    text-align: right;
-  }
-
-  .retry-btn {
+  .inline-btn {
     padding: 4px 12px;
     border-radius: 6px;
     border: 1px solid currentColor;
@@ -890,9 +880,6 @@ onMounted(async () => {
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 4px;
 
     &:hover {
       background: rgba(16, 185, 129, 0.1);
diff --git a/frontend/app/web-gold/src/views/kling/components/GenerateStep.vue b/frontend/app/web-gold/src/views/kling/components/GenerateStep.vue
index 4a83eda996..893c124f31 100644
--- a/frontend/app/web-gold/src/views/kling/components/GenerateStep.vue
+++ b/frontend/app/web-gold/src/views/kling/components/GenerateStep.vue
@@ -55,6 +55,7 @@
       :audio-duration-ms="store.timeline.audioDurationMs"
       :face-start-time="store.timeline.faceStartTime"
       :face-end-time="store.timeline.faceEndTime"
+      :validation-error="store.validationError"
     />
 
     <!-- 积分预估 -->
diff --git a/frontend/app/web-gold/src/views/kling/components/TimelinePanel.vue b/frontend/app/web-gold/src/views/kling/components/TimelinePanel.vue
index 61c2cd900f..e953973c6c 100644
--- a/frontend/app/web-gold/src/views/kling/components/TimelinePanel.vue
+++ b/frontend/app/web-gold/src/views/kling/components/TimelinePanel.vue
@@ -72,8 +72,13 @@
       </div>
     </div>
 
+    <!-- 校验错误提示 -->
+    <div v-if="validationError" class="timeline-diff error">
+      <CloseCircleOutlined class="diff-icon" />
+      <span>{{ validationError }}</span>
+    </div>
     <!-- 时长差异提示 -->
-    <div v-if="audioDurationMs > 0" class="timeline-diff" :class="diffStatus">
+    <div v-else-if="audioDurationMs > 0" class="timeline-diff" :class="diffStatus">
       <template v-if="diffStatus === 'match'">
         <CheckCircleOutlined class="diff-icon" />
         <span>时长匹配良好，可以生成</span>
@@ -92,7 +97,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { CheckCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'
+import { CheckCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
 import { formatDurationMs } from '../utils/format'
 
 interface Props {
@@ -100,11 +105,13 @@ interface Props {
   audioDurationMs: number
   faceStartTime?: number
   faceEndTime?: number
+  validationError?: string | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
   faceStartTime: 0,
   faceEndTime: 0,
+  validationError: null,
 })
 
 const maxDuration = computed(() => {
@@ -393,5 +400,10 @@ const formatDuration = formatDurationMs
     background: rgba(245, 158, 11, 0.08);
     color: @accent-orange;
   }
+
+  &.error {
+    background: rgba(239, 68, 68, 0.12);
+    color: @accent-red;
+  }
 }
 </style>
diff --git a/frontend/app/web-gold/src/views/kling/components/VoiceConfigStep.vue b/frontend/app/web-gold/src/views/kling/components/VoiceConfigStep.vue
index c9310afcf1..7dc5d7f816 100644
--- a/frontend/app/web-gold/src/views/kling/components/VoiceConfigStep.vue
+++ b/frontend/app/web-gold/src/views/kling/components/VoiceConfigStep.vue
@@ -56,6 +56,7 @@
       :audio-duration-ms="store.timeline.audioDurationMs"
       :face-start-time="store.timeline.faceStartTime"
       :face-end-time="store.timeline.faceEndTime"
+      :validation-error="store.validationError"
     />
 
     <!-- 生成音频按钮 -->
diff --git a/frontend/app/web-gold/src/views/kling/stores/useDigitalHumanStore.ts b/frontend/app/web-gold/src/views/kling/stores/useDigitalHumanStore.ts
index a43db8a38b..b841d110ab 100644
--- a/frontend/app/web-gold/src/views/kling/stores/useDigitalHumanStore.ts
+++ b/frontend/app/web-gold/src/views/kling/stores/useDigitalHumanStore.ts
@@ -126,10 +126,22 @@ export const useDigitalHumanStore = defineStore('digitalHuman', () => {
   const canGenerate = computed(() => {
     if (!isVideoReady.value || !isAudioReady.value) return false
     if (!timeline.value) return false
-    // 音频时长不能超过人脸时长
+    // 1. 人脸区间至少2秒
+    if (timeline.value.videoDurationMs < 2000) return false
+    // 2. 音频时长不能超过人脸时长
     return timeline.value.audioDurationMs <= timeline.value.videoDurationMs
   })
 
+  /** 校验失败原因 */
+  const validationError = computed(() => {
+    if (!timeline.value) return '请先完成视频识别'
+    if (!isVideoReady.value) return '请先完成视频识别'
+    if (!isAudioReady.value) return '请先生成音频'
+    if (timeline.value.videoDurationMs < 2000) return '人脸区间不足2秒，无法生成对口型视频'
+    if (timeline.value.audioDurationMs > timeline.value.videoDurationMs) return '音频时长超过人脸时长，请缩短文案'
+    return null
+  })
+
   /** 时间轴匹配状态 */
   const timelineMatch = computed(() => {
     if (!timeline.value || timeline.value.audioDurationMs === 0) return 'none'
@@ -658,6 +670,7 @@ export const useDigitalHumanStore = defineStore('digitalHuman', () => {
     isAudioReady,
     canGoNext,
     canGenerate,
+    validationError,
     timelineMatch,
     faceDurationMs,
     audioDurationMs,
diff --git a/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue b/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
index d712657adc..e278b83c5f 100644
--- a/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
@@ -101,7 +101,7 @@
                   type="link"
                   size="small"
                   class="action-btn action-btn--primary"
-                  @click="handlePreview(record)"
+                  @click="openVideoUrl(record)"
                 >
                   <PlayCircleOutlined /> 预览
                 </a-button>
@@ -111,7 +111,7 @@
                   type="link"
                   size="small"
                   class="action-btn action-btn--success"
-                  @click="handleDownload(record)"
+                  @click="openVideoUrl(record)"
                 >
                   <DownloadOutlined /> 下载
                 </a-button>
@@ -170,17 +170,8 @@ const rowSelection = {
 // 状态判断
 const isStatus = (status, target) => status === target || status === target.toUpperCase()
 
-// 预览视频（直接打开链接）
-const handlePreview = (record) => {
-  if (!record.resultVideoUrl) {
-    message.warning('该任务暂无视频结果，请稍后再试')
-    return
-  }
-  window.open(record.resultVideoUrl, '_blank')
-}
-
-// 下载视频
-const handleDownload = (record) => {
+// 打开视频链接（预览/下载共用）
+const openVideoUrl = (record) => {
   if (!record.resultVideoUrl) {
     message.warning('该任务暂无视频结果，请稍后再试')
     return
diff --git a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/voice/service/TikUserVoiceServiceImpl.java b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/voice/service/TikUserVoiceServiceImpl.java
index d0d6e9f8ac..baead9f423 100644
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/voice/service/TikUserVoiceServiceImpl.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/voice/service/TikUserVoiceServiceImpl.java
@@ -580,43 +580,6 @@ public class TikUserVoiceServiceImpl implements TikUserVoiceService {
                 StrUtil.blankToDefault(requestFormat, getDefaultFormat()));
     }
 
-    private String buildFileName(String voiceId, String format) {
-        String safeVoice = StrUtil.blankToDefault(voiceId, "voice")
-                .replaceAll("[^a-zA-Z0-9_-]", "");
-        return safeVoice + "-" + System.currentTimeMillis() + "." + format;
-    }
-
-    private String resolveContentType(String format) {
-        if (format == null) {
-            return "audio/mpeg";
-        }
-        return switch (format.toLowerCase()) {
-            case "wav" -> "audio/wav";
-            case "flac" -> "audio/flac";
-            default -> "audio/mpeg";
-        };
-    }
-
-    private String determineSynthesisText(String transcriptionText, String inputText, boolean allowFallback) {
-        StringBuilder builder = new StringBuilder();
-        if (StrUtil.isNotBlank(transcriptionText)) {
-            builder.append(transcriptionText.trim());
-        }
-        if (StrUtil.isNotBlank(inputText)) {
-            if (builder.length() > 0) {
-                builder.append("\n");
-            }
-            builder.append(inputText.trim());
-        }
-        if (builder.length() > 0) {
-            return builder.toString();
-        }
-        if (allowFallback) {
-            return getPreviewText();
-        }
-        throw exception(VOICE_TTS_FAILED, "请提供需要合成的文本内容");
-    }
-
     /**
      * 从URL中提取原始URL（去除查询参数和锚点）
      */