From 9b132082d298012458e01376ca28647fae204b63 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Thu, 5 Mar 2026 22:58:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-gold/src/components/VoiceSelector.vue |  167 ++-
 .../app/web-gold/src/composables/useTTS.js    |    2 +-
 .../web-gold/src/views/kling/IdentifyFace.vue | 1238 ++++++++++-------
 .../kling/components/TextGeneratePopup.vue    |  515 +++++++
 .../views/kling/components/TimelinePanel.vue  |  253 ++--
 .../kling/stores/useDigitalHumanStore.ts      |   65 +-
 .../service/DigitalHumanTaskServiceImpl.java  |   12 +-
 7 files changed, 1514 insertions(+), 738 deletions(-)
 create mode 100644 frontend/app/web-gold/src/views/kling/components/TextGeneratePopup.vue

diff --git a/frontend/app/web-gold/src/components/VoiceSelector.vue b/frontend/app/web-gold/src/components/VoiceSelector.vue
index a0de85b083..bdd5bfa5b7 100644
--- a/frontend/app/web-gold/src/components/VoiceSelector.vue
+++ b/frontend/app/web-gold/src/components/VoiceSelector.vue
@@ -96,13 +96,14 @@ const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
 
 const voiceStore = useVoiceCopyStore()
 
-const emit = defineEmits(['select'])
+const emit = defineEmits(['select', 'audioGenerated'])
 
 let player = null
 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(`
@@ -182,9 +183,7 @@ const handleVoiceChange = (value, option) => {
 }
 
 const handleSynthesize = () => {
-  if (!selectedVoiceId.value) return
-  // 防止在播放器初始化过程中重复点击
-  if (isPlayerInitializing.value) return
+  if (!selectedVoiceId.value || isPlayerInitializing.value) return
 
   const voice = userVoiceCards.value.find(v => v.id === selectedVoiceId.value)
   if (!voice) return
@@ -209,12 +208,11 @@ const handlePlayVoiceSample = (voice) => {
     (data) => {
       const url = data.audioUrl || data.objectUrl
       if (!url) return
+      currentAudioBase64.value = data.audioBase64 || ''
       initPlayer(url)
     },
-    (error) => {
-      // 音频播放失败，静默处理
-    },
-    { autoPlay: false }  // 禁用自动播放，由 APlayer 控制
+    undefined, // 错误静默处理
+    { autoPlay: false }
   )
 }
 
@@ -266,6 +264,14 @@ const initPlayer = (url) => {
 
       player.on('canplay', () => {
         isPlayerInitializing.value = false
+        // 发送音频时长和 base64 数据给父组件
+        const durationMs = Math.floor(player.audio.duration * 1000)
+        if (durationMs > 0) {
+          emit('audioGenerated', {
+            durationMs,
+            audioBase64: currentAudioBase64.value
+          })
+        }
       })
     } catch (e) {
       console.error('APlayer 初始化失败:', e)
@@ -276,29 +282,21 @@ const initPlayer = (url) => {
   })
 }
 
-/**
- * 下载音频
- */
 const downloadAudio = () => {
   if (!audioUrl.value) return
 
-  const filename = `${currentVoiceName.value || '语音合成'}.mp3`
   const link = document.createElement('a')
   link.href = audioUrl.value
-  link.download = filename
+  link.download = `${currentVoiceName.value || '语音合成'}.mp3`
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
 }
 
-/**
- * 销毁播放器
- */
 const destroyPlayer = () => {
   isPlayerInitializing.value = false
   if (player) {
     try {
-      // 先暂停播放，防止销毁过程中出错
       player.pause()
       player.destroy()
     } catch (e) {
@@ -306,8 +304,7 @@ const destroyPlayer = () => {
     }
     player = null
   }
-  // 只对 blob URL 调用 revokeObjectURL
-  if (audioUrl.value && audioUrl.value.startsWith('blob:')) {
+  if (audioUrl.value?.startsWith('blob:')) {
     URL.revokeObjectURL(audioUrl.value)
   }
   audioUrl.value = ''
@@ -338,25 +335,25 @@ onBeforeUnmount(() => {
 .voice-selector-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 14px;
 }
 
-/* 音色卡片 */
+/* 音色卡片 - 柔和风格 */
 .voice-card {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
-  border: 1px solid rgba(59, 130, 246, 0.15);
-  border-radius: 12px;
-  padding: 16px;
-  transition: all 0.3s ease;
+  background: rgba(59, 130, 246, 0.03);
+  border: 1px solid rgba(59, 130, 246, 0.1);
+  border-radius: 10px;
+  padding: 14px;
+  transition: all 0.25s ease;
 
   &:hover {
-    border-color: rgba(59, 130, 246, 0.3);
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+    border-color: rgba(59, 130, 246, 0.18);
+    background: rgba(59, 130, 246, 0.05);
   }
 
   &.has-audio {
-    border-color: rgba(59, 130, 246, 0.4);
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
+    border-color: rgba(59, 130, 246, 0.2);
+    background: rgba(59, 130, 246, 0.06);
   }
 }
 
@@ -365,40 +362,40 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-bottom: 14px;
+  margin-bottom: 12px;
 }
 
 .header-icon {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  background: rgba(59, 130, 246, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: #3b82f6;
 
   svg {
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
   }
 }
 
 .header-title {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   color: var(--color-text);
 }
 
 .header-badge {
   margin-left: auto;
-  padding: 2px 10px;
-  background: rgba(59, 130, 246, 0.1);
-  border-radius: 12px;
-  font-size: 12px;
+  padding: 2px 8px;
+  background: rgba(59, 130, 246, 0.08);
+  border-radius: 10px;
+  font-size: 11px;
   color: #3b82f6;
   font-weight: 500;
-  max-width: 120px;
+  max-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -407,7 +404,7 @@ onBeforeUnmount(() => {
 /* 卡片主体 */
 .voice-card-body {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   align-items: stretch;
 }
 
@@ -416,73 +413,73 @@ onBeforeUnmount(() => {
 
   :deep(.ant-select) {
     width: 100%;
-    height: 40px;
+    height: 36px;
 
     .ant-select-selector {
-      height: 40px !important;
-      border-radius: 10px !important;
-      border-color: rgba(59, 130, 246, 0.2) !important;
-      background: rgba(255, 255, 255, 0.8) !important;
-      transition: all 0.3s ease !important;
+      height: 36px !important;
+      border-radius: 8px !important;
+      border-color: rgba(59, 130, 246, 0.12) !important;
+      background: rgba(255, 255, 255, 0.9) !important;
+      transition: all 0.2s ease !important;
 
       &:hover {
-        border-color: #3b82f6 !important;
+        border-color: rgba(59, 130, 246, 0.25) !important;
       }
     }
 
     &.ant-select-focused .ant-select-selector {
-      border-color: #3b82f6 !important;
-      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+      border-color: rgba(59, 130, 246, 0.3) !important;
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.06) !important;
     }
 
     .ant-select-selection-item {
-      line-height: 38px !important;
+      line-height: 34px !important;
+      font-size: 13px;
     }
 
     .ant-select-selection-placeholder {
-      line-height: 38px !important;
+      line-height: 34px !important;
+      font-size: 13px;
     }
   }
 }
 
 .select-arrow {
-  color: #3b82f6;
+  color: #94a3b8;
   transition: transform 0.3s ease;
 }
 
-/* 合成按钮 */
+/* 合成按钮 - 柔和风格 */
 .synthesize-btn {
-  height: 40px;
-  padding: 0 20px;
-  border-radius: 10px;
+  height: 36px;
+  padding: 0 16px;
+  border-radius: 8px;
   border: none;
-  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
+  background: rgba(59, 130, 246, 0.08);
   color: #64748b;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 6px;
-  transition: all 0.3s ease;
+  transition: all 0.25s ease;
   white-space: nowrap;
 
   &:hover:not(:disabled) {
-    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
-    transform: translateY(-1px);
+    background: rgba(59, 130, 246, 0.12);
+    color: #475569;
   }
 
   &:disabled {
-    opacity: 0.6;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 
   &.btn-active {
-    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-    color: white;
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+    background: rgba(59, 130, 246, 0.15);
+    color: #3b82f6;
 
     &:hover:not(:disabled) {
-      background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
-      box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
+      background: rgba(59, 130, 246, 0.2);
     }
   }
 
@@ -493,46 +490,46 @@ onBeforeUnmount(() => {
 
 /* 播放器区域 */
 .player-section {
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 12px;
-  padding: 14px;
-  border: 1px solid rgba(59, 130, 246, 0.1);
+  background: rgba(59, 130, 246, 0.03);
+  border-radius: 10px;
+  padding: 12px;
+  border: 1px solid rgba(59, 130, 246, 0.08);
 }
 
 .aplayer-container {
   :deep(.aplayer) {
-    border-radius: 10px;
+    border-radius: 8px;
     box-shadow: none;
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    border: 1px solid rgba(0, 0, 0, 0.04);
 
     .aplayer-body {
-      border-radius: 10px;
+      border-radius: 8px;
     }
   }
 }
 
 .player-actions {
-  margin-top: 10px;
+  margin-top: 8px;
   display: flex;
   justify-content: flex-end;
 }
 
 .download-btn {
-  color: #3b82f6;
+  color: #94a3b8;
   font-size: 12px;
   padding: 4px 8px;
   height: auto;
   transition: all 0.2s ease;
 
   &:hover {
-    color: #2563eb;
-    background: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+    background: rgba(59, 130, 246, 0.06);
   }
 }
 
 /* 动画 */
 .slide-fade-enter-active {
-  transition: all 0.3s ease-out;
+  transition: all 0.25s ease-out;
 }
 
 .slide-fade-leave-active {
@@ -540,12 +537,12 @@ onBeforeUnmount(() => {
 }
 
 .slide-fade-enter-from {
-  transform: translateY(-10px);
+  transform: translateY(-8px);
   opacity: 0;
 }
 
 .slide-fade-leave-to {
-  transform: translateY(-10px);
+  transform: translateY(-8px);
   opacity: 0;
 }
 </style>
diff --git a/frontend/app/web-gold/src/composables/useTTS.js b/frontend/app/web-gold/src/composables/useTTS.js
index cbf2e36dc9..c049906bb7 100644
--- a/frontend/app/web-gold/src/composables/useTTS.js
+++ b/frontend/app/web-gold/src/composables/useTTS.js
@@ -250,7 +250,7 @@ export function useTTS(options = {}) {
       // 处理 Base64 音频
       if (res.data?.audioBase64) {
         const { blob, objectUrl } = decodeBase64Audio(res.data.audioBase64, res.data.format)
-        const audioData = { blob, objectUrl, format: res.data.format }
+        const audioData = { blob, objectUrl, format: res.data.format, audioBase64: res.data.audioBase64 }
         cacheAudio(cacheKey, audioData)
         resetPreviewState()
         if (opts.autoPlay !== false) playCachedAudio(audioData)
diff --git a/frontend/app/web-gold/src/views/kling/IdentifyFace.vue b/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
index ad94c0d52c..f4bce64326 100644
--- a/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
+++ b/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
@@ -1,265 +1,235 @@
 <template>
   <FullWidthLayout :show-padding="false">
-    <div class="digital-human-page">
-      <!-- 主内容区域：左右布局 -->
+    <div class="notion-page">
+      <!-- 主内容区域 -->
       <div class="main-content">
         <!-- 左侧：视频模块 -->
-        <section class="video-panel">
-          <div class="panel-card">
-            <div class="panel-header">
-              <VideoCameraOutlined class="panel-icon" />
-              <h3>视频素材</h3>
-            </div>
+        <section class="content-block">
+          <div class="block-header">
+            <span class="block-emoji">📹</span>
+            <h3 class="block-title">视频素材</h3>
+          </div>
 
-            <!-- 视频来源选项 -->
-            <div class="video-options">
-              <div
-                class="video-option-card"
-                :class="{ selected: store.videoSource === 'upload' }"
-                @click="store.selectUploadMode"
-              >
-                <CloudUploadOutlined />
-                <span>上传新视频</span>
-              </div>
-              <div
-                class="video-option-card"
-                :class="{ selected: store.videoSource === 'select' }"
-                @click="store.selectLibraryMode"
-              >
-                <FolderOutlined />
-                <span>素材库选择</span>
-              </div>
-            </div>
-
-            <!-- 上传区域 -->
-            <div
-              v-if="store.videoSource === 'upload'"
-              class="upload-zone"
-              :class="{ dragover: dragOver }"
-              @drop.prevent="handleDrop"
-              @dragover.prevent="dragOver = true"
-              @dragleave.prevent="dragOver = false"
+          <!-- 视频来源选项 -->
+          <div class="source-toggle">
+            <button
+              class="toggle-btn"
+              :class="{ active: store.videoSource === 'upload' }"
+              @click="store.selectUploadMode"
             >
-              <input
-                ref="fileInput"
-                type="file"
-                accept=".mp4,.mov"
-                class="file-input"
-                @change="handleFileSelect"
-              />
+              <CloudUploadOutlined />
+              <span>上传视频</span>
+            </button>
+            <button
+              class="toggle-btn"
+              :class="{ active: store.videoSource === 'select' }"
+              @click="store.selectLibraryMode"
+            >
+              <FolderOutlined />
+              <span>素材库</span>
+            </button>
+          </div>
 
-              <div v-if="!store.videoPreviewUrl" class="upload-placeholder" @click="triggerFileSelect">
+          <!-- 上传区域 -->
+          <div
+            v-if="store.videoSource === 'upload'"
+            class="upload-area"
+            :class="{ dragover: dragOver, 'has-video': store.videoPreviewUrl }"
+            @drop.prevent="handleDrop"
+            @dragover.prevent="dragOver = true"
+            @dragleave.prevent="dragOver = false"
+          >
+            <input
+              ref="fileInput"
+              type="file"
+              accept=".mp4,.mov"
+              class="hidden-input"
+              @change="handleFileSelect"
+            />
+
+            <div v-if="!store.videoPreviewUrl" class="upload-empty" @click="triggerFileSelect">
+              <div class="upload-icon-wrapper">
                 <CloudUploadOutlined class="upload-icon" />
-                <span class="upload-text">点击或拖拽上传视频</span>
-                <span class="upload-hint">支持 MP4、MOV 格式（需 >3秒）</span>
-              </div>
-
-              <div v-else class="upload-preview">
-                <video
-                  :src="store.videoPreviewUrl"
-                  controls
-                  playsinline
-                  preload="metadata"
-                  class="preview-video"
-                ></video>
-                <button class="change-btn" @click="clearVideo">
-                  <ReloadOutlined /> 更换视频
-                </button>
               </div>
+              <div class="upload-text">点击上传或拖拽文件到此处</div>
+              <div class="upload-hint">支持 MP4、MOV 格式，视频需大于 3 秒</div>
             </div>
 
-            <!-- 已选视频预览（素材库） -->
-            <div v-if="store.selectedVideo && store.videoSource === 'select'" class="selected-preview">
-              <div class="preview-thumb">
-                <img
-                  :src="getVideoPreviewUrl(store.selectedVideo)"
-                  :alt="store.selectedVideo.fileName"
-                />
-              </div>
-              <div class="preview-info">
-                <div class="preview-name">{{ store.selectedVideo.fileName }}</div>
-                <div class="preview-meta">
-                  <span>{{ formatDuration(store.selectedVideo.duration) }}</span>
-                  <span class="divider">|</span>
-                  <span>{{ formatFileSize(store.selectedVideo.fileSize) }}</span>
-                </div>
-              </div>
-              <button class="change-btn" @click="clearVideo">
-                <ReloadOutlined /> 更换
+            <div v-else class="upload-preview">
+              <video
+                :src="store.videoPreviewUrl"
+                controls
+                playsinline
+                preload="metadata"
+                class="preview-video"
+              ></video>
+              <button class="replace-btn" @click="clearVideo">
+                <ReloadOutlined />
+                <span>更换视频</span>
               </button>
             </div>
+          </div>
 
-            <!-- 识别状态 -->
-            <div v-if="store.videoStep !== 'idle'" class="recognize-status" :class="store.videoStep">
-              <div v-if="store.videoStep === 'uploading'" class="status-content loading">
-                <a-spin size="small" />
-                <span>正在上传视频...</span>
-              </div>
-              <div v-else-if="store.videoStep === 'recognizing'" class="status-content loading">
-                <a-spin size="small" />
-                <span>正在识别人脸...</span>
-              </div>
-              <div v-else-if="store.videoStep === 'recognized'" class="status-content success">
-                <CheckCircleOutlined />
-                <span>识别成功！人脸时长: {{ formatDurationMs(store.faceDurationMs) }}</span>
-              </div>
-              <div v-else-if="store.videoStep === 'error'" class="status-content error">
-                <ExclamationCircleOutlined />
-                <span>{{ store.error }}</span>
-                <a-button size="small" type="link" @click="store.retry">重试</a-button>
+          <!-- 已选视频预览（素材库） -->
+          <div v-if="store.selectedVideo && store.videoSource === 'select'" class="library-preview">
+            <video
+              v-if="store.videoPreviewUrl"
+              :src="store.videoPreviewUrl"
+              controls
+              playsinline
+              preload="metadata"
+              class="preview-video"
+            ></video>
+            <div class="video-meta">
+              <div class="video-name" :title="store.selectedVideo.fileName">{{ store.selectedVideo.fileName }}</div>
+              <div class="video-info">
+                {{ formatDuration(store.selectedVideo.duration) }} · {{ formatFileSize(store.selectedVideo.fileSize) }}
               </div>
             </div>
+            <button class="replace-btn" @click="clearVideo">
+              <ReloadOutlined />
+              <span>更换</span>
+            </button>
+          </div>
+
+          <!-- 识别状态 -->
+          <div v-if="store.videoStep !== 'idle'" class="process-status" :class="store.videoStep">
+            <div v-if="store.videoStep === 'uploading'" class="status-row">
+              <a-spin size="small" />
+              <span>正在上传视频...</span>
+            </div>
+            <div v-else-if="store.videoStep === 'recognizing'" class="status-row">
+              <a-spin size="small" />
+              <span>正在识别人脸...</span>
+            </div>
+            <div v-else-if="store.videoStep === 'recognized'" class="status-row success">
+              <CheckCircleOutlined />
+              <span>识别成功 · 人脸时长 {{ formatDurationMs(store.faceDurationMs) }}</span>
+            </div>
+            <div v-else-if="store.videoStep === 'error'" class="status-row error">
+              <ExclamationCircleOutlined />
+              <span>{{ store.error }}</span>
+              <button class="link-btn" @click="store.retry">重试</button>
+            </div>
+          </div>
+
+          <!-- 生成按钮 - 放在左侧面板底部 -->
+          <div class="generate-action">
+            <!-- 成功状态 -->
+            <div v-if="store.isDone" class="result-inline success">
+              <CheckCircleFilled />
+              <span>任务已提交</span>
+              <button class="inline-btn" @click="store.reset">重新生成</button>
+            </div>
+
+            <!-- 错误状态 -->
+            <div v-else-if="store.createStep === 'error'" class="result-inline error">
+              <ExclamationCircleFilled />
+              <span>{{ store.error }}</span>
+              <button class="link-btn" @click="store.retry">重试</button>
+            </div>
+
+            <!-- 生成按钮 -->
+            <button
+              v-else
+              class="generate-btn"
+              :class="{ disabled: !store.canGenerate }"
+              :disabled="!store.canGenerate"
+              @click="store.createTask"
+            >
+              <div class="btn-glow"></div>
+              <div class="btn-left">
+                <template v-if="store.createStep === 'creating'">
+                  <LoadingOutlined class="btn-spin" spin />
+                  <span>正在创建...</span>
+                </template>
+                <template v-else>
+                  <PlayCircleOutlined class="btn-icon" />
+                  <span>生成视频</span>
+                </template>
+              </div>
+              <div class="btn-right">
+                <span class="cost-num">{{ estimatedPoints }}</span>
+                <span class="cost-label">积分</span>
+              </div>
+            </button>
           </div>
         </section>
 
         <!-- 右侧：配音文案模块 -->
-        <section class="voice-panel">
-          <div class="panel-card">
-            <div class="panel-header">
-              <SoundOutlined class="panel-icon" />
-              <h3>配音文案</h3>
+        <section class="content-block">
+          <div class="block-header">
+            <span class="block-emoji">🎙️</span>
+            <h3 class="block-title">配音文案</h3>
+          </div>
+
+          <!-- 文案输入 -->
+          <div class="input-section">
+            <div class="label-row">
+              <label class="input-label">播报文案</label>
+              <button class="generate-text-btn" @click="openTextGeneratePopup">
+                <EditOutlined />
+                <span>AI 生成</span>
+              </button>
             </div>
-
-            <!-- 文案输入 -->
-            <div class="text-section">
-              <label class="section-label">播报文案</label>
-              <a-textarea
-                v-model:value="store.text"
-                :placeholder="placeholder"
-                :rows="5"
-                :maxlength="4000"
-                :show-count="true"
-                class="text-input"
-                :bordered="false"
-              />
-              <div class="text-meta">
-                <span>当前：{{ store.text?.length || 0 }} 字</span>
-                <span>建议：{{ suggestedChars }} 字</span>
-              </div>
+            <a-textarea
+              v-model:value="store.text"
+              :placeholder="placeholder"
+              :rows="6"
+              :maxlength="4000"
+              :show-count="true"
+              class="notion-textarea"
+              :bordered="false"
+            />
+            <div class="input-footer">
+              <span>{{ store.text?.length || 0 }} 字</span>
+              <span v-if="store.faceDurationMs > 0">· 建议 {{ suggestedChars }} 字</span>
             </div>
+          </div>
 
-            <!-- 音色选择 -->
-            <div class="voice-section">
-              <label class="section-label">选择音色</label>
-              <VoiceSelector
-                :synth-text="store.text"
-                :speech-rate="store.speechRate"
-                @select="store.setVoice"
-              />
-            </div>
+          <!-- 文案生成浮窗 -->
+          <TextGeneratePopup
+            v-model:visible="textGenerateVisible"
+            @success="handleTextGenerated"
+          />
 
-            <!-- 语速调节 -->
-            <div class="rate-section">
-              <label class="section-label">语速调节</label>
-              <div class="rate-control">
-                <a-slider
-                  v-model:value="store.speechRate"
-                  :min="0.5"
-                  :max="2.0"
-                  :step="0.1"
-                  :marks="rateMarks"
-                  class="rate-slider"
-                />
-                <span class="rate-value">{{ store.speechRate.toFixed(1) }}x</span>
-              </div>
-            </div>
-
-            <!-- 生成音频按钮 -->
-            <div class="audio-action">
-              <a-button
-                type="default"
-                size="large"
-                :loading="store.audioStep === 'generating'"
-                :disabled="!canGenerateAudio"
-                block
-                @click="store.generateAudio"
-                class="audio-btn"
-              >
-                <template v-if="store.audioStep === 'generated'">
-                  <ReloadOutlined /> 重新生成音频
-                </template>
-                <template v-else>
-                  <SoundOutlined /> 生成音频预览
-                </template>
-              </a-button>
-
-              <div v-if="store.audioStep === 'generated'" class="audio-result">
-                <CheckCircleOutlined class="success-icon" />
-                <span>音频已生成，时长: {{ formatDurationMs(store.audioDurationMs) }}</span>
-              </div>
-
-              <div v-if="store.audioStep === 'error'" class="audio-error">
-                <ExclamationCircleOutlined class="error-icon" />
-                <span>{{ store.error }}</span>
-                <a-button size="small" type="link" @click="store.retry">重试</a-button>
-              </div>
-            </div>
-
-            <!-- 时间轴对比 -->
-            <TimelinePanel
-              v-if="store.timeline"
-              :face-duration-ms="store.timeline.videoDurationMs"
-              :audio-duration-ms="store.timeline.audioDurationMs"
-              :face-start-time="store.timeline.faceStartTime"
-              :face-end-time="store.timeline.faceEndTime"
+          <!-- 音色选择 -->
+          <div class="input-section">
+            <label class="input-label">选择音色</label>
+            <VoiceSelector
+              :synth-text="store.text"
+              :speech-rate="store.speechRate"
+              @select="store.setVoice"
+              @audio-generated="handleAudioGenerated"
             />
           </div>
+
+          <!-- 语速调节 -->
+          <div class="input-section">
+            <label class="input-label">语速调节</label>
+            <div class="rate-control">
+              <a-slider
+                v-model:value="store.speechRate"
+                :min="0.5"
+                :max="2.0"
+                :step="0.1"
+                :marks="rateMarks"
+                class="rate-slider"
+              />
+              <span class="rate-value">{{ store.speechRate.toFixed(1) }}x</span>
+            </div>
+          </div>
+
+          <!-- 时间轴对比 -->
+          <TimelinePanel
+            v-if="store.timeline"
+            :face-duration-ms="store.timeline.videoDurationMs"
+            :audio-duration-ms="store.timeline.audioDurationMs"
+            :face-start-time="store.timeline.faceStartTime"
+            :face-end-time="store.timeline.faceEndTime"
+          />
         </section>
       </div>
-
-      <!-- 底部操作栏 -->
-      <div class="action-bar">
-        <div class="points-info">
-          <div class="points-row">
-            <span class="points-label">预计消耗</span>
-            <span class="points-value">{{ estimatedPoints }} 积分</span>
-          </div>
-          <div class="points-row">
-            <span class="points-label">当前余额</span>
-            <span class="points-value">{{ userStore.remainingPoints.toLocaleString() }} 积分</span>
-          </div>
-        </div>
-
-        <div class="action-buttons">
-          <a-button
-            v-if="store.isDone"
-            type="primary"
-            size="large"
-            @click="store.reset"
-          >
-            重新生成
-          </a-button>
-          <a-button
-            v-else
-            type="primary"
-            size="large"
-            :disabled="!store.canGenerate"
-            :loading="store.createStep === 'creating'"
-            @click="store.createTask"
-            class="generate-btn"
-          >
-            <template v-if="store.createStep === 'creating'">
-              正在创建任务...
-            </template>
-            <template v-else>
-              <PlayCircleOutlined /> 生成数字人视频
-            </template>
-          </a-button>
-        </div>
-
-        <!-- 成功状态 -->
-        <div v-if="store.isDone" class="success-message">
-          <CheckCircleFilled class="success-icon" />
-          <span>任务已提交成功，请在任务中心查看生成进度</span>
-        </div>
-
-        <!-- 错误状态 -->
-        <div v-if="store.createStep === 'error'" class="error-message">
-          <ExclamationCircleFilled class="error-icon" />
-          <span>{{ store.error }}</span>
-          <a-button size="small" type="link" @click="store.retry">重试</a-button>
-        </div>
-      </div>
     </div>
 
     <!-- 视频选择器弹窗 -->
@@ -276,9 +246,8 @@ import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
 import VideoSelector from '@/components/VideoSelector.vue'
 import VoiceSelector from '@/components/VoiceSelector.vue'
 import TimelinePanel from './components/TimelinePanel.vue'
+import TextGeneratePopup from './components/TextGeneratePopup.vue'
 import {
-  VideoCameraOutlined,
-  SoundOutlined,
   CloudUploadOutlined,
   FolderOutlined,
   CheckCircleOutlined,
@@ -287,6 +256,8 @@ import {
   PlayCircleOutlined,
   CheckCircleFilled,
   ExclamationCircleFilled,
+  LoadingOutlined,
+  EditOutlined,
 } from '@ant-design/icons-vue'
 import { useDigitalHumanStore } from './stores/useDigitalHumanStore'
 import { useUserStore } from '@/stores/user'
@@ -301,6 +272,7 @@ const voiceStore = useVoiceCopyStore()
 
 const dragOver = ref(false)
 const fileInput = ref<HTMLInputElement | null>(null)
+const textGenerateVisible = ref(false)
 
 const estimatedPoints = computed(() => {
   const points = pointsConfigStore.getConsumePoints('kling')
@@ -311,16 +283,11 @@ const suggestedChars = computed(() => {
   return Math.floor((store.faceDurationMs || 10000) / 1000 * 4)
 })
 
-const placeholder = computed(() => {
-  if (store.faceDurationMs > 0) {
-    return `请输入播报文案，建议不超过 ${suggestedChars.value} 字以确保与视频匹配`
-  }
-  return '请输入你想让角色说话的内容'
-})
-
-const canGenerateAudio = computed(() => {
-  return store.text.trim() && store.voice && store.isVideoReady
-})
+const placeholder = computed(() =>
+  store.faceDurationMs > 0
+    ? `请输入播报文案，建议不超过 ${suggestedChars.value} 字以确保与视频匹配`
+    : '请输入你想让角色说话的内容'
+)
 
 const rateMarks = {
   0.5: '0.5x',
@@ -359,13 +326,26 @@ function clearVideo() {
   store.resetProcess()
 }
 
-function getVideoPreviewUrl(video: any): string {
-  if (video.coverBase64) {
-    return video.coverBase64.startsWith('data:')
-      ? video.coverBase64
-      : `data:image/jpeg;base64,${video.coverBase64}`
+function handleAudioGenerated(data: { durationMs: number; audioBase64: string }) {
+  if (store.timeline && data.durationMs > 0) {
+    store.timeline.audioDurationMs = data.durationMs
   }
-  return video.imgUrl || video.coverUrl || ''
+  if (data.audioBase64) {
+    store.audioData = {
+      audioBase64: data.audioBase64,
+      format: 'mp3',
+      durationMs: data.durationMs
+    }
+    store.audioStep = 'generated'
+  }
+}
+
+function openTextGeneratePopup() {
+  textGenerateVisible.value = true
+}
+
+function handleTextGenerated(text: string) {
+  store.text = text
 }
 
 onMounted(async () => {
@@ -378,206 +358,294 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="less">
-.digital-human-page {
+// ========================================
+// Notion + VoiceSelector 蓝紫主题
+// ========================================
+
+// Color Palette - 与 VoiceSelector 协调
+@bg-page: #fafbfc;
+@bg-block: #ffffff;
+@text-primary: #1e293b;
+@text-secondary: #64748b;
+@text-tertiary: #94a3b8;
+@border-light: rgba(59, 130, 246, 0.1);
+@border-medium: rgba(59, 130, 246, 0.2);
+
+// 蓝紫渐变主题色 (与 VoiceSelector 一致)
+@accent-blue: #3b82f6;
+@accent-purple: #8b5cf6;
+@accent-gradient: linear-gradient(135deg, @accent-blue 0%, @accent-purple 100%);
+@accent-green: #10b981;
+@accent-red: #ef4444;
+@accent-orange: #f59e0b;
+
+// Shadows - 柔和蓝调
+@shadow-sm: 0 1px 2px rgba(59, 130, 246, 0.04);
+@shadow-md: 0 4px 12px rgba(59, 130, 246, 0.08);
+@shadow-lg: 0 8px 24px rgba(59, 130, 246, 0.12);
+
+// Typography
+@font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif;
+
+.notion-page {
   min-height: 100vh;
-  background: #f8fafc;
-  padding: 24px;
-}
-
-.page-header {
-  margin-bottom: 24px;
-
-  h1 {
-    font-size: 24px;
-    font-weight: 700;
-    color: #1e293b;
-    margin: 0 0 8px 0;
-  }
-
-  p {
-    font-size: 14px;
-    color: #64748b;
-    margin: 0;
-  }
-}
-
-.main-content {
-  display: flex;
-  gap: 24px;
-  margin-bottom: 24px;
+  background: @bg-page;
+  padding: 48px 64px;
+  max-width: 1400px;
+  margin: 0 auto;
 
   @media (max-width: 1024px) {
-    flex-direction: column;
+    padding: 32px 24px;
   }
 }
 
-.video-panel {
-  flex: 1;
-  min-width: 0;
+// Page Header
+.page-header {
+  margin-bottom: 40px;
+
+  .header-icon {
+    font-size: 56px;
+    margin-bottom: 16px;
+    line-height: 1;
+  }
+
+  .header-title {
+    font-family: @font-sans;
+    font-size: 40px;
+    font-weight: 700;
+    color: @text-primary;
+    margin: 0 0 8px 0;
+    letter-spacing: -0.5px;
+    line-height: 1.2;
+  }
+
+  .header-desc {
+    font-size: 16px;
+    color: @text-secondary;
+    margin: 0;
+    line-height: 1.5;
+  }
 }
 
-.voice-panel {
-  flex: 1;
-  min-width: 0;
+// Main Content Layout
+.main-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-bottom: 32px;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+  }
 }
 
-.panel-card {
-  background: #fff;
-  border: 1px solid #e2e8f0;
+// Content Block
+.content-block {
+  background: @bg-block;
   border-radius: 12px;
-  padding: 20px;
-  height: 100%;
+  padding: 24px;
+  box-shadow: @shadow-md;
+  border: 1px solid @border-light;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    box-shadow: @shadow-lg;
+    border-color: rgba(59, 130, 246, 0.2);
+  }
 }
 
-.panel-header {
+// Block Header
+.block-header {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #e2e8f0;
+  padding-bottom: 14px;
+  border-bottom: 1px solid rgba(59, 130, 246, 0.08);
 
-  .panel-icon {
+  .block-emoji {
     font-size: 20px;
-    color: #3b82f6;
+    line-height: 1;
   }
 
-  h3 {
-    font-size: 16px;
+  .block-title {
+    font-size: 15px;
     font-weight: 600;
-    color: #1e293b;
+    color: @text-primary;
     margin: 0;
   }
 }
 
-.video-options {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin-bottom: 16px;
+// Source Toggle
+.source-toggle {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  background: @bg-page;
+  padding: 4px;
+  border-radius: 6px;
 }
 
-.video-option-card {
+.toggle-btn {
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 12px;
-  border: 2px dashed #e2e8f0;
+  padding: 10px 16px;
+  border: none;
+  background: transparent;
   border-radius: 8px;
-  background: #f8fafc;
+  font-size: 13px;
+  font-weight: 500;
+  color: @text-secondary;
   cursor: pointer;
   transition: all 0.2s ease;
-  font-size: 13px;
-  color: #64748b;
 
   &:hover {
-    border-color: #3b82f6;
-    background: #eff6ff;
+    color: @text-primary;
+    background: rgba(59, 130, 246, 0.05);
   }
 
-  &.selected {
-    border-style: solid;
-    border-color: #3b82f6;
-    background: #eff6ff;
-    color: #3b82f6;
+  &.active {
+    background: @bg-block;
+    color: @accent-blue;
+    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
   }
 }
 
-.upload-zone {
+// Upload Area
+.upload-area {
   min-height: 200px;
-  border: 2px dashed #e2e8f0;
+  border: 1.5px dashed rgba(59, 130, 246, 0.2);
   border-radius: 10px;
-  background: #f8fafc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
+  background: rgba(59, 130, 246, 0.02);
+  transition: all 0.25s ease;
 
   &.dragover {
-    border-color: #3b82f6;
-    background: #eff6ff;
+    border-color: @accent-blue;
+    background: rgba(59, 130, 246, 0.06);
+  }
+
+  &.has-video {
+    border-style: solid;
+    border-color: rgba(59, 130, 246, 0.1);
+    background: @bg-block;
   }
 }
 
-.file-input {
+.hidden-input {
   display: none;
 }
 
-.upload-placeholder {
+.upload-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 20px;
+  justify-content: center;
+  min-height: 200px;
   cursor: pointer;
+  padding: 24px;
 }
 
-.upload-icon {
-  font-size: 36px;
-  color: #94a3b8;
+.upload-icon-wrapper {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(59, 130, 246, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 14px;
+  transition: all 0.25s ease;
+
+  .upload-icon {
+    font-size: 24px;
+    color: @accent-blue;
+  }
+}
+
+.upload-empty:hover .upload-icon-wrapper {
+  background: rgba(59, 130, 246, 0.12);
+  transform: scale(1.05);
 }
 
 .upload-text {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 500;
-  color: #1e293b;
+  color: @text-primary;
+  margin-bottom: 6px;
 }
 
 .upload-hint {
-  font-size: 12px;
-  color: #94a3b8;
+  font-size: 13px;
+  color: @text-tertiary;
 }
 
 .upload-preview {
-  width: 100%;
-  padding: 12px;
+  padding: 16px;
 }
 
 .preview-video {
   width: 100%;
-  max-height: 240px;
-  border-radius: 8px;
-  background: #1e293b;
+  max-height: 260px;
+  border-radius: 4px;
+  background: #191919;
 }
 
-.change-btn {
-  display: flex;
+.replace-btn {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: 6px;
-  width: 100%;
   margin-top: 12px;
-  padding: 8px;
+  padding: 8px 14px;
   font-size: 13px;
-  color: #64748b;
-  border: 1px solid #e2e8f0;
-  background: #fff;
-  border-radius: 6px;
+  font-weight: 500;
+  color: @text-secondary;
+  background: transparent;
+  border: 1px solid rgba(59, 130, 246, 0.15);
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
 
   &:hover {
-    color: #3b82f6;
-    border-color: #3b82f6;
+    color: @accent-blue;
+    border-color: @accent-blue;
+    background: rgba(59, 130, 246, 0.05);
   }
 }
 
-.selected-preview {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: #f1f5f9;
-  border-radius: 8px;
+// Library Video Preview
+.library-preview {
+  padding: 16px;
+  background: rgba(59, 130, 246, 0.03);
+  border-radius: 10px;
+  border: 1px solid rgba(59, 130, 246, 0.1);
+
+  .preview-video {
+    width: 100%;
+    max-height: 260px;
+    border-radius: 4px;
+    background: #191919;
+  }
+
+  .video-meta {
+    margin-top: 12px;
+  }
+
+  .replace-btn {
+    margin-top: 8px;
+  }
 }
 
-.preview-thumb {
-  width: 100px;
-  height: 56px;
-  border-radius: 6px;
+.video-thumbnail {
+  width: 120px;
+  height: 68px;
+  border-radius: 4px;
   overflow: hidden;
-  background: #1e293b;
+  background: #191919;
   flex-shrink: 0;
 
   img {
@@ -587,109 +655,153 @@ onMounted(async () => {
   }
 }
 
-.preview-info {
+.video-meta {
   flex: 1;
   min-width: 0;
 }
 
-.preview-name {
-  font-size: 13px;
+.video-name {
+  font-size: 14px;
   font-weight: 500;
-  color: #1e293b;
+  color: @text-primary;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-bottom: 4px;
+  max-width: 180px;
 }
 
-.preview-meta {
-  font-size: 11px;
-  color: #94a3b8;
-  margin-top: 2px;
-
-  .divider {
-    margin: 0 6px;
-  }
+.video-info {
+  font-size: 12px;
+  color: @text-tertiary;
 }
 
-.recognize-status {
-  margin-top: 16px;
+// Process Status
+.process-status {
+  margin-top: 14px;
   padding: 12px 16px;
+  background: rgba(59, 130, 246, 0.04);
   border-radius: 8px;
-  background: #f8fafc;
 
   &.recognized {
-    background: #dcfce7;
+    background: rgba(16, 185, 129, 0.08);
   }
 
   &.error {
-    background: #fee2e2;
+    background: rgba(239, 68, 68, 0.08);
   }
 }
 
-.status-content {
+.status-row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   font-size: 13px;
-
-  &.loading {
-    color: #64748b;
-  }
+  color: @text-secondary;
 
   &.success {
-    color: #166534;
+    color: @accent-green;
   }
 
   &.error {
-    color: #dc2626;
+    color: @accent-red;
   }
 }
 
-.section-label {
-  display: block;
+.link-btn {
+  margin-left: auto;
+  padding: 0;
   font-size: 13px;
   font-weight: 500;
-  color: #64748b;
-  margin-bottom: 8px;
+  color: @accent-blue;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
-.text-section {
-  margin-bottom: 20px;
+// Input Section
+.input-section {
+  margin-bottom: 24px;
 }
 
-.text-input {
+.input-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: @text-secondary;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.notion-textarea {
   width: 100%;
 
   :deep(.ant-input) {
     border: none;
     border-radius: 8px;
     font-size: 14px;
-    padding: 16px 12px;
-    background: #f8fafc;
+    line-height: 1.6;
+    padding: 14px 16px;
+    background: rgba(59, 130, 246, 0.03);
+    color: @text-primary;
+
+    &::placeholder {
+      color: @text-tertiary;
+    }
 
     &:focus {
-      background: #fff;
-      box-shadow: 0 0 0 1px #e2e8f0;
+      background: @bg-block;
+      box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
     }
   }
+
+  :deep(.ant-input-data-count) {
+    color: @text-tertiary;
+    font-size: 12px;
+  }
 }
 
-.text-meta {
+.input-footer {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
   font-size: 12px;
-  color: #94a3b8;
+  color: @text-tertiary;
   margin-top: 8px;
 }
 
-.voice-section {
-  margin-bottom: 20px;
-}
-
-.rate-section {
-  margin-bottom: 20px;
+.generate-text-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  background: transparent;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: @accent-blue;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(59, 130, 246, 0.06);
+    border-color: rgba(59, 130, 246, 0.3);
+  }
 }
 
+// Rate Control
 .rate-control {
   display: flex;
   align-items: center;
@@ -699,158 +811,212 @@ onMounted(async () => {
 .rate-slider {
   flex: 1;
 
+  :deep(.ant-slider-rail) {
+    background: rgba(59, 130, 246, 0.1);
+  }
+
+  :deep(.ant-slider-track) {
+    background: @accent-gradient;
+  }
+
+  :deep(.ant-slider-handle) {
+    border-color: @accent-blue;
+
+    &:hover, &:focus {
+      border-color: @accent-blue;
+      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+    }
+  }
+
   :deep(.ant-slider-mark-text) {
-    font-size: 10px;
-    color: #94a3b8;
+    font-size: 11px;
+    color: @text-tertiary;
   }
 }
 
 .rate-value {
   font-size: 14px;
   font-weight: 600;
-  color: #1e293b;
+  color: @text-primary;
   min-width: 40px;
   text-align: right;
 }
 
-.audio-action {
-  margin-bottom: 16px;
-}
-
-.audio-btn {
-  height: 42px;
-  font-size: 14px;
-  font-weight: 500;
-  border-radius: 8px;
-}
-
-.audio-result {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 12px;
-  padding: 10px 12px;
-  background: #dcfce7;
-  border-radius: 6px;
-  font-size: 13px;
-  color: #166534;
-
-  .success-icon {
-    font-size: 16px;
-  }
-}
-
-.audio-error {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 12px;
-  padding: 10px 12px;
-  background: #fee2e2;
-  border-radius: 6px;
-  font-size: 13px;
-  color: #dc2626;
-
-  .error-icon {
-    font-size: 16px;
-  }
-}
-
-.action-bar {
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  gap: 24px;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-
-.points-info {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 160px;
-}
-
-.points-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 13px;
-}
-
-.points-label {
-  color: #64748b;
-}
-
-.points-value {
-  font-weight: 600;
-  color: #1e293b;
-}
-
-.action-buttons {
-  flex: 1;
+// 生成按钮 - 左右布局，右下角
+.generate-action {
+  margin-top: auto;
+  padding-top: 16px;
   display: flex;
   justify-content: flex-end;
 }
 
+.result-banner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+
+  &.success {
+    background: rgba(16, 185, 129, 0.08);
+    color: @accent-green;
+  }
+
+  &.error {
+    background: rgba(239, 68, 68, 0.08);
+    color: @accent-red;
+  }
+
+  .banner-icon {
+    font-size: 16px;
+    flex-shrink: 0;
+  }
+
+  .banner-text {
+    flex: 1;
+    text-align: right;
+  }
+
+  .retry-btn {
+    padding: 4px 12px;
+    border-radius: 6px;
+    border: 1px solid currentColor;
+    background: transparent;
+    color: inherit;
+    font-size: 12px;
+    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);
+    }
+  }
+}
+
 .generate-btn {
-  min-width: 180px;
-  height: 44px;
-  font-size: 15px;
-  font-weight: 600;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
   border: none;
-
-  &:hover:not(:disabled) {
-    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
-  }
-
-  &:disabled {
-    background: #d1d5db;
-  }
-}
-
-.success-message {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: #f0fdf4;
   border-radius: 8px;
-  font-size: 14px;
-  color: #166534;
+  background: @accent-gradient;
+  color: white;
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.25s ease;
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
 
-  .success-icon {
-    font-size: 20px;
+  &:hover:not(.disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
+  }
+
+  &:active:not(.disabled) {
+    transform: translateY(0);
+  }
+
+  &.disabled {
+    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
+    cursor: not-allowed;
+    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.25);
+  }
+
+  .btn-glow {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.15),
+      transparent
+    );
+    animation: glow-slide 3s ease-in-out infinite;
+  }
+
+  .btn-left {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    position: relative;
+    z-index: 1;
+  }
+
+  .btn-icon {
+    font-size: 15px;
+  }
+
+  .btn-spin {
+    font-size: 13px;
+    animation: spin 1s linear infinite;
+  }
+
+  .btn-right {
+    display: flex;
+    align-items: baseline;
+    gap: 2px;
+    padding: 2px 8px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 10px;
+    font-size: 10px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .cost-num {
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  .cost-label {
+    opacity: 0.9;
   }
 }
 
-.error-message {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: #fee2e2;
-  border-radius: 8px;
-  font-size: 14px;
-  color: #dc2626;
-
-  .error-icon {
-    font-size: 20px;
+@keyframes glow-slide {
+  0% {
+    left: -100%;
+  }
+  50%, 100% {
+    left: 100%;
   }
 }
 
-@media (max-width: 1024px) {
-  .digital-human-page {
-    padding: 16px;
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.link-btn {
+  padding: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+
+  &:hover {
+    opacity: 0.8;
   }
 }
 </style>
diff --git a/frontend/app/web-gold/src/views/kling/components/TextGeneratePopup.vue b/frontend/app/web-gold/src/views/kling/components/TextGeneratePopup.vue
new file mode 100644
index 0000000000..ddebb4c9e1
--- /dev/null
+++ b/frontend/app/web-gold/src/views/kling/components/TextGeneratePopup.vue
@@ -0,0 +1,515 @@
+<template>
+  <Teleport to="body">
+    <transition name="popover-fade">
+      <div
+        v-if="visible"
+        class="popover-overlay"
+        @click.self="handleClose"
+        @mousedown.self="handleClose"
+      >
+        <div
+          class="popover-card"
+          :style="popoverStyle"
+          @click.stop
+        >
+          <!-- 头部 -->
+          <div class="popover-header">
+            <span class="popover-title">AI 文案生成</span>
+            <button class="close-btn" @click="handleClose">
+              <CloseOutlined />
+            </button>
+          </div>
+
+          <!-- 内容区 -->
+          <div class="popover-body">
+            <!-- 智能体选择 -->
+            <div class="form-item">
+              <label class="form-label">选择智能体</label>
+              <a-select
+                v-model:value="selectedAgentId"
+                :loading="loadingAgents"
+                placeholder="请选择智能体"
+                class="agent-select"
+                :bordered="false"
+                size="small"
+              >
+                <a-select-option
+                  v-for="agent in agentList"
+                  :key="agent.id"
+                  :value="agent.id"
+                >
+                  <div class="agent-option">
+                    <img v-if="agent.icon" :src="agent.icon" class="agent-icon" />
+                    <span class="agent-name">{{ agent.agentName }}</span>
+                  </div>
+                </a-select-option>
+              </a-select>
+            </div>
+
+            <!-- 主题输入 -->
+            <div class="form-item">
+              <label class="form-label">文案主题</label>
+              <input
+                v-model="theme"
+                type="text"
+                class="theme-input"
+                placeholder="如：产品介绍、活动推广..."
+                :disabled="isGenerating"
+                @keydown.enter="handleGenerate"
+              />
+            </div>
+
+            <!-- 生成结果预览 -->
+            <div v-if="generatedText" class="result-preview">
+              <div class="result-content">
+                {{ generatedText }}
+                <span v-if="isGenerating" class="cursor-blink">|</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部按钮 -->
+          <div class="popover-footer">
+            <button class="btn btn-cancel" @click="handleClose">取消</button>
+            <button
+              class="btn btn-primary"
+              :disabled="!canGenerate || isGenerating"
+              @click="handleGenerate"
+            >
+              <LoadingOutlined v-if="isGenerating" class="spin" />
+              <span>{{ isGenerating ? '生成中...' : '生成' }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { CloseOutlined, LoadingOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import { getAgentList, sendChatStream } from '@/api/agent'
+
+// Props
+const props = defineProps<{
+  visible: boolean
+  theme?: string
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'success': [text: string]
+  'error': [msg: string]
+}>()
+
+// 状态
+const agentList = ref<any[]>([])
+const loadingAgents = ref(false)
+const selectedAgentId = ref<number | null>(null)
+const theme = ref('')
+const generatedText = ref('')
+const isGenerating = ref(false)
+const abortController = ref<AbortController | null>(null)
+const popoverStyle = ref<Record<string, string>>({})
+
+// 计算属性
+const canGenerate = computed(() => {
+  return selectedAgentId.value && theme.value.trim().length > 0
+})
+
+// 获取智能体列表
+const fetchAgents = async () => {
+  loadingAgents.value = true
+  try {
+    const res = await getAgentList()
+    if (res.code === 0 && res.data) {
+      agentList.value = res.data
+      // 默认选中第一个
+      if (res.data.length > 0 && !selectedAgentId.value) {
+        selectedAgentId.value = res.data[0].id
+      }
+    }
+  } catch (error) {
+    console.error('获取智能体列表失败:', error)
+  } finally {
+    loadingAgents.value = false
+  }
+}
+
+// 更新气泡位置
+const updatePosition = () => {
+  // 找到触发按钮
+  const triggerBtn = document.querySelector('.generate-text-btn')
+  if (triggerBtn) {
+    const rect = triggerBtn.getBoundingClientRect()
+    const popoverWidth = 320
+    const popoverHeight = 280
+
+    // 计算位置，确保不超出视口
+    let left = rect.right - popoverWidth
+    let top = rect.bottom + 8
+
+    // 边界检测
+    if (left < 16) left = 16
+    if (left + popoverWidth > window.innerWidth - 16) {
+      left = window.innerWidth - popoverWidth - 16
+    }
+    if (top + popoverHeight > window.innerHeight - 16) {
+      top = rect.top - popoverHeight - 8
+    }
+
+    popoverStyle.value = {
+      position: 'fixed',
+      left: `${left}px`,
+      top: `${top}px`,
+      width: `${popoverWidth}px`,
+    }
+  }
+}
+
+// 生成文案
+const handleGenerate = async () => {
+  if (!canGenerate.value || isGenerating.value) return
+
+  const selectedAgent = agentList.value.find(a => a.id === selectedAgentId.value)
+  if (!selectedAgent) {
+    message.warning('请选择智能体')
+    return
+  }
+
+  isGenerating.value = true
+  generatedText.value = ''
+  abortController.value = new AbortController()
+
+  const prompt = `请根据以下主题生成一段播报文案，要求：
+1. 语言流畅自然，适合口播
+2. 内容简洁有吸引力
+3. 不要使用markdown格式，直接输出纯文本
+
+主题：${theme.value}`
+
+  try {
+    await sendChatStream({
+      agentId: selectedAgent.id,
+      content: prompt,
+      ctrl: abortController.value,
+      onMessage: (result: { event: string; content?: string; errorMessage?: string }) => {
+        if (result.event === 'message' && result.content) {
+          generatedText.value += result.content
+        } else if (result.event === 'error') {
+          message.error(result.errorMessage || '生成出错')
+          isGenerating.value = false
+        }
+      },
+      onError: () => {
+        message.error('生成失败，请重试')
+        isGenerating.value = false
+      },
+      onClose: () => {
+        isGenerating.value = false
+        // 生成完成，触发成功回调
+        if (generatedText.value) {
+          emit('success', generatedText.value.trim())
+        }
+      }
+    })
+  } catch (error: any) {
+    if (error.name !== 'AbortError') {
+      message.error('生成失败')
+    }
+    isGenerating.value = false
+  }
+}
+
+// 关闭弹窗
+const handleClose = () => {
+  if (isGenerating.value) {
+    abortController.value?.abort()
+    isGenerating.value = false
+  }
+  generatedText.value = ''
+  theme.value = ''
+  emit('update:visible', false)
+}
+
+// 监听 visible 变化
+watch(() => props.visible, (val) => {
+  if (val) {
+    fetchAgents()
+    updatePosition()
+    // 监听窗口大小变化
+    window.addEventListener('resize', updatePosition)
+  } else {
+    window.removeEventListener('resize', updatePosition)
+  }
+})
+
+// 清理
+onUnmounted(() => {
+  window.removeEventListener('resize', updatePosition)
+  if (abortController.value) {
+    abortController.value.abort()
+  }
+})
+</script>
+
+<style scoped lang="less">
+// Notion 风格配色
+@bg-popover: #ffffff;
+@bg-hover: #f7f6f3;
+@text-primary: #37352f;
+@text-secondary: #787774;
+@text-tertiary: #b4b4b4;
+@border-color: #e9e9e7;
+@primary-color: #2e75cc;
+@primary-hover: #1f63cb;
+
+// 过渡动画
+.popover-fade-enter-active,
+.popover-fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.popover-fade-enter-from,
+.popover-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+// 遮罩层（透明，仅用于点击外部关闭）
+.popover-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+
+// 气泡卡片
+.popover-card {
+  background: @bg-popover;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1);
+  border: 1px solid @border-color;
+  overflow: hidden;
+  z-index: 1001;
+}
+
+// 头部
+.popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-bottom: 1px solid @border-color;
+}
+
+.popover-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: @text-primary;
+}
+
+.close-btn {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: @text-tertiary;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: @bg-hover;
+    color: @text-secondary;
+  }
+}
+
+// 内容区
+.popover-body {
+  padding: 14px;
+}
+
+.form-item {
+  margin-bottom: 14px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.form-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: @text-secondary;
+  margin-bottom: 6px;
+}
+
+.agent-select {
+  width: 100%;
+
+  :deep(.ant-select-selector) {
+    background: @bg-hover !important;
+    border-radius: 6px !important;
+    padding: 4px 10px !important;
+    min-height: 32px !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  :deep(.ant-select-selection-item) {
+    font-size: 13px;
+    color: @text-primary;
+    line-height: 24px !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+}
+
+.agent-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.agent-icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.agent-name {
+  font-size: 13px;
+  color: @text-primary;
+}
+
+.theme-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid @border-color;
+  border-radius: 6px;
+  font-size: 13px;
+  color: @text-primary;
+  background: @bg-hover;
+  outline: none;
+  transition: all 0.15s ease;
+
+  &::placeholder {
+    color: @text-tertiary;
+  }
+
+  &:focus {
+    border-color: @primary-color;
+    box-shadow: 0 0 0 2px rgba(46, 117, 204, 0.1);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+// 生成结果预览
+.result-preview {
+  margin-top: 12px;
+  padding: 10px;
+  background: @bg-hover;
+  border-radius: 6px;
+  max-height: 120px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: @text-tertiary;
+    border-radius: 2px;
+  }
+}
+
+.result-content {
+  font-size: 13px;
+  line-height: 1.5;
+  color: @text-primary;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.cursor-blink {
+  color: @primary-color;
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+// 底部按钮
+.popover-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 14px;
+  border-top: 1px solid @border-color;
+}
+
+.btn {
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  &.btn-cancel {
+    background: transparent;
+    border: none;
+    color: @text-secondary;
+
+    &:hover {
+      background: @bg-hover;
+      color: @text-primary;
+    }
+  }
+
+  &.btn-primary {
+    background: @primary-color;
+    border: none;
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background: @primary-hover;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.spin {
+  font-size: 12px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
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 4d70146364..61c2cd900f 100644
--- a/frontend/app/web-gold/src/views/kling/components/TimelinePanel.vue
+++ b/frontend/app/web-gold/src/views/kling/components/TimelinePanel.vue
@@ -2,10 +2,11 @@
   <div class="timeline-panel">
     <div class="timeline-header">
       <span class="timeline-title">时间轴对比</span>
-      <span v-if="showDurations" class="duration-info">
-        人脸: {{ formatDuration(faceDurationMs) }}
+      <span v-if="showDurations" class="duration-badge">
+        人脸 {{ formatDuration(faceDurationMs) }}
         <template v-if="audioDurationMs > 0">
-          | 音频: {{ formatDuration(audioDurationMs) }}
+          <span class="divider"></span>
+          音频 {{ formatDuration(audioDurationMs) }}
         </template>
       </span>
     </div>
@@ -21,28 +22,42 @@
         <span class="ruler-label">{{ mark.label }}</span>
         <span class="ruler-tick"></span>
       </div>
+
+      <!-- 音频结束位置标记 -->
+      <div
+        v-if="audioDurationMs > 0 && isExceed"
+        class="audio-end-marker"
+        :style="{ left: audioEndPosition + '%' }"
+      >
+        <span class="audio-marker-label">{{ (audioDurationMs / 1000).toFixed(1) }}s</span>
+        <span class="audio-marker-line"></span>
+      </div>
     </div>
 
     <!-- 轨道区域 -->
     <div class="timeline-tracks">
       <!-- 视频轨道 -->
-      <div class="track video-track">
-        <span class="track-icon">📹</span>
-        <span class="track-label">视频</span>
+      <div class="track">
+        <div class="track-info">
+          <span class="track-icon">📹</span>
+          <span class="track-label">视频</span>
+        </div>
         <div class="track-bar">
           <div
             class="track-fill video-fill"
             :style="{ width: videoBarWidth + '%' }"
           >
-            <span class="track-time">{{ formatDuration(faceDurationMs) }}</span>
+            <span v-if="videoBarWidth > 15" class="track-time">{{ formatDuration(faceDurationMs) }}</span>
           </div>
         </div>
       </div>
 
       <!-- 音频轨道 -->
-      <div class="track audio-track">
-        <span class="track-icon">🎵</span>
-        <span class="track-label">音频</span>
+      <div class="track">
+        <div class="track-info">
+          <span class="track-icon">🎙️</span>
+          <span class="track-label">音频</span>
+        </div>
         <div class="track-bar">
           <div
             v-if="audioDurationMs > 0"
@@ -50,7 +65,7 @@
             :class="{ 'audio-exceed': isExceed }"
             :style="{ width: audioBarWidth + '%' }"
           >
-            <span class="track-time">{{ formatDuration(audioDurationMs) }}</span>
+            <span v-if="audioBarWidth > 15" class="track-time">{{ formatDuration(audioDurationMs) }}</span>
           </div>
           <span v-else class="track-placeholder">等待生成音频</span>
         </div>
@@ -61,11 +76,11 @@
     <div v-if="audioDurationMs > 0" class="timeline-diff" :class="diffStatus">
       <template v-if="diffStatus === 'match'">
         <CheckCircleOutlined class="diff-icon" />
-        <span>时长匹配良好</span>
+        <span>时长匹配良好，可以生成</span>
       </template>
       <template v-else-if="diffStatus === 'exceed'">
         <ExclamationCircleOutlined class="diff-icon" />
-        <span>音频超出 {{ formatDuration(diffMs) }}，请缩短文案</span>
+        <span>音频超出 {{ formatDuration(diffMs) }}，建议缩短文案</span>
       </template>
       <template v-else-if="diffStatus === 'short'">
         <InfoCircleOutlined class="diff-icon" />
@@ -105,6 +120,10 @@ const audioBarWidth = computed(() =>
   Math.min(100, (props.audioDurationMs / maxDuration.value) * 100)
 )
 
+const audioEndPosition = computed(() =>
+  Math.min(100, (props.audioDurationMs / maxDuration.value) * 100)
+)
+
 const isExceed = computed(() => props.audioDurationMs > props.faceDurationMs)
 
 const diffMs = computed(() => Math.abs(props.audioDurationMs - props.faceDurationMs))
@@ -151,11 +170,25 @@ const formatDuration = formatDurationMs
 </script>
 
 <style scoped lang="less">
+// 蓝紫主题配色 - 与主页面协调
+@text-primary: #1e293b;
+@text-secondary: #64748b;
+@text-tertiary: #94a3b8;
+@bg-subtle: rgba(59, 130, 246, 0.04);
+@bg-hover: rgba(59, 130, 246, 0.08);
+@border-light: rgba(59, 130, 246, 0.1);
+@border-medium: rgba(59, 130, 246, 0.15);
+@accent-blue: #3b82f6;
+@accent-purple: #8b5cf6;
+@accent-green: #10b981;
+@accent-red: #ef4444;
+@accent-orange: #f59e0b;
+
 .timeline-panel {
-  background: #f8fafc;
+  background: @bg-subtle;
   border-radius: 10px;
-  padding: 16px;
-  margin-top: 16px;
+  padding: 14px 18px;
+  margin-top: 8px;
 }
 
 .timeline-header {
@@ -163,25 +196,37 @@ const formatDuration = formatDurationMs
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
+}
 
-  .timeline-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #1e293b;
-  }
+.timeline-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: @text-secondary;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
 
-  .duration-info {
-    font-size: 12px;
-    color: #64748b;
+.duration-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: @text-tertiary;
+
+  .divider {
+    width: 4px;
+    height: 4px;
+    background: @border-medium;
+    border-radius: 50%;
   }
 }
 
 // 刻度尺
 .timeline-ruler {
   position: relative;
-  height: 20px;
-  margin-bottom: 8px;
-  margin-left: 70px; // 为图标和标签留空间
+  height: 18px;
+  margin-bottom: 10px;
+  margin-left: 80px;
 }
 
 .ruler-mark {
@@ -194,7 +239,7 @@ const formatDuration = formatDurationMs
 
 .ruler-label {
   font-size: 10px;
-  color: #94a3b8;
+  color: @text-tertiary;
   margin-bottom: 2px;
 }
 
@@ -202,7 +247,35 @@ const formatDuration = formatDurationMs
   display: block;
   width: 1px;
   height: 4px;
-  background: #cbd5e1;
+  background: @border-medium;
+}
+
+// 音频结束位置标记
+.audio-end-marker {
+  position: absolute;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 10;
+  top: 0;
+}
+
+.audio-marker-label {
+  font-size: 9px;
+  font-weight: 600;
+  color: @accent-red;
+  background: rgba(235, 87, 87, 0.1);
+  padding: 1px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+  margin-bottom: 2px;
+}
+
+.audio-marker-line {
+  width: 1px;
+  height: 6px;
+  background: @accent-red;
 }
 
 // 轨道区域
@@ -215,100 +288,110 @@ const formatDuration = formatDurationMs
 .track {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
+}
 
-  .track-icon {
-    font-size: 14px;
-    width: 20px;
-    text-align: center;
-  }
+.track-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 68px;
+  flex-shrink: 0;
+}
 
-  .track-label {
-    width: 34px;
-    font-size: 12px;
-    color: #64748b;
-    flex-shrink: 0;
-  }
+.track-icon {
+  font-size: 14px;
+  line-height: 1;
+}
 
-  .track-bar {
-    flex: 1;
-    height: 24px;
-    background: #e2e8f0;
-    border-radius: 4px;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-  }
+.track-label {
+  font-size: 12px;
+  color: @text-secondary;
+  font-weight: 500;
+}
 
-  .track-fill {
-    height: 100%;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: width 0.3s ease;
-  }
+.track-bar {
+  flex: 1;
+  height: 22px;
+  background: rgba(55, 53, 47, 0.06);
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
 
-  .track-time {
-    font-size: 11px;
-    color: white;
-    font-weight: 500;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  }
+.track-fill {
+  height: 100%;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
 
-  .track-placeholder {
-    font-size: 11px;
-    color: #94a3b8;
-    padding-left: 12px;
-  }
+.track-time {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.95);
+  font-weight: 600;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  letter-spacing: 0.3px;
+}
+
+.track-placeholder {
+  font-size: 11px;
+  color: @text-tertiary;
+  padding-left: 14px;
 }
 
 .video-fill {
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  background: linear-gradient(90deg, @accent-blue 0%, @accent-purple 100%);
 }
 
 .audio-fill {
-  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  background: linear-gradient(90deg, @accent-green 0%, #059669 100%);
 
   &.audio-exceed {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-    animation: pulse 1.5s ease-in-out infinite;
+    background: linear-gradient(90deg, @accent-red 0%, #dc2626 100%);
+    animation: pulse-warning 2s ease-in-out infinite;
   }
 }
 
-@keyframes pulse {
+@keyframes pulse-warning {
   0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
+  50% { opacity: 0.75; }
 }
 
 // 差异提示
 .timeline-diff {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   margin-top: 12px;
-  padding: 8px 12px;
-  border-radius: 6px;
+  padding: 10px 14px;
+  border-radius: 8px;
   font-size: 12px;
+  font-weight: 500;
 
   .diff-icon {
     font-size: 14px;
+    flex-shrink: 0;
   }
 
   &.match {
-    background: #dcfce7;
-    color: #166534;
+    background: rgba(16, 185, 129, 0.08);
+    color: @accent-green;
   }
 
   &.exceed {
-    background: #fee2e2;
-    color: #dc2626;
+    background: rgba(239, 68, 68, 0.08);
+    color: @accent-red;
   }
 
   &.short {
-    background: #fef3c7;
-    color: #92400e;
+    background: rgba(245, 158, 11, 0.08);
+    color: @accent-orange;
   }
 }
 </style>
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 e00136a86e..8f2529401c 100644
--- a/frontend/app/web-gold/src/views/kling/stores/useDigitalHumanStore.ts
+++ b/frontend/app/web-gold/src/views/kling/stores/useDigitalHumanStore.ts
@@ -239,8 +239,20 @@ export const useDigitalHumanStore = defineStore('digitalHuman', () => {
     videoFile.value = null
     videoSource.value = 'select'
     videoSelectorVisible.value = false
-    // 素材列表返回的 fileUrl 已带签名，直接使用
-    videoPreviewUrl.value = video.fileUrl
+
+    // 获取带签名的视频播放URL
+    try {
+      const urlRes = await MaterialService.getVideoPlayUrl(Number(video.id))
+      if (urlRes.code !== 0 || !urlRes.data) {
+        throw new Error(urlRes.msg || '获取播放链接失败')
+      }
+      videoPreviewUrl.value = urlRes.data
+    } catch (err: any) {
+      videoStep.value = 'error'
+      error.value = err.message || '获取播放链接失败'
+      message.error(error.value)
+      return
+    }
 
     // 自动识别
     await recognizeVideo()
@@ -306,8 +318,8 @@ export const useDigitalHumanStore = defineStore('digitalHuman', () => {
 
   /** 识别已存在的视频 */
   async function recognizeExistingVideo(video: Video): Promise<IdentifyData> {
-    // 素材列表返回的 fileUrl 已带签名，直接使用
-    return performFaceRecognition(video.id, video.fileUrl, false)
+    // 使用已获取的带签名预览URL
+    return performFaceRecognition(video.id, videoPreviewUrl.value, false)
   }
 
   /** 执行人脸识别 */
@@ -421,7 +433,9 @@ export const useDigitalHumanStore = defineStore('digitalHuman', () => {
 
       const taskRes = await createLipSyncTask({
         taskName: `数字人任务_${Date.now()}`,
-        videoFileId: identifyData.value.fileId,
+        // 根据视频来源选择传递方式
+        videoUrl: videoSource.value === 'select' ? videoPreviewUrl.value : undefined,
+        videoFileId: videoSource.value === 'upload' ? identifyData.value.fileId : undefined,
         inputText: text.value,
         speechRate: speechRate.value,
         volume: 0,
@@ -570,24 +584,23 @@ export const useDigitalHumanStore = defineStore('digitalHuman', () => {
       const blob = new Blob([bytes], { type: 'audio/mp3' })
       const audio = new Audio()
       const objectUrl = URL.createObjectURL(blob)
-
-      const timeoutId = setTimeout(() => {
-        cleanup()
-        reject(new Error('音频解析超时'))
-      }, 15000)
-
       let resolved = false
       let lastDuration = 0
 
-      function cleanup() {
+      const timeoutId = setTimeout(() => {
+        if (!resolved) {
+          cleanup()
+          reject(new Error('音频解析超时'))
+        }
+      }, 15000)
+
+      const cleanup = () => {
         clearTimeout(timeoutId)
         URL.revokeObjectURL(objectUrl)
       }
 
-      function tryResolve(duration: number, source: string) {
-        if (resolved) return
-        if (!isFinite(duration) || duration <= 0) return
-
+      const tryResolve = (duration: number, source: string) => {
+        if (resolved || !isFinite(duration) || duration <= 0) return
         lastDuration = duration
 
         if (source === 'canplaythrough') {
@@ -601,15 +614,14 @@ export const useDigitalHumanStore = defineStore('digitalHuman', () => {
       audio.oncanplay = () => tryResolve(audio.duration, 'canplay')
       audio.oncanplaythrough = () => tryResolve(audio.duration, 'canplaythrough')
       audio.onerror = () => {
-        if (!resolved) {
-          if (lastDuration > 0) {
-            resolved = true
-            cleanup()
-            resolve(Math.floor(lastDuration * 1000) - 200)
-          } else {
-            cleanup()
-            reject(new Error('音频解析失败'))
-          }
+        if (resolved) return
+        if (lastDuration > 0) {
+          resolved = true
+          cleanup()
+          resolve(Math.floor(lastDuration * 1000) - 200)
+        } else {
+          cleanup()
+          reject(new Error('音频解析失败'))
         }
       }
 
@@ -693,6 +705,5 @@ export const useDigitalHumanStore = defineStore('digitalHuman', () => {
 // ========== 工具函数 ==========
 
 function extractId(str: string): string {
-  const match = str.match(/[\w-]+$/)
-  return match ? match[0] : str
+  return str.match(/[\w-]+$/)?.[0] ?? str
 }
diff --git a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/voice/service/DigitalHumanTaskServiceImpl.java b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/voice/service/DigitalHumanTaskServiceImpl.java
index 822cae24e2..1283c985db 100644
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/voice/service/DigitalHumanTaskServiceImpl.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/voice/service/DigitalHumanTaskServiceImpl.java
@@ -370,7 +370,7 @@ public class DigitalHumanTaskServiceImpl implements DigitalHumanTaskService {
      */
     private void validateUserFile(Long fileId, Long userId, String fileType) {
         TikUserFileDO userFile = userFileMapper.selectOne(new LambdaQueryWrapperX<TikUserFileDO>()
-                .eq(TikUserFileDO::getFileId, fileId)  // 查询fileId字段（指向infra_file.id）
+                .eq(TikUserFileDO::getId, fileId)  // 用主键ID查询（前端传递的是userFileId）
                 .eq(TikUserFileDO::getUserId, userId));
         if (userFile == null) {
             throw ServiceExceptionUtil.exception(ErrorCodeConstants.FILE_NOT_EXISTS, fileType + "文件不存在");
@@ -525,9 +525,13 @@ public class DigitalHumanTaskServiceImpl implements DigitalHumanTaskService {
 
         // 处理视频文件（音频由实时TTS生成，无需准备）
         if (task.getVideoFileId() != null) {
-            FileDO videoFile = fileMapper.selectById(task.getVideoFileId());
-            if (videoFile != null) {
-                task.setVideoUrl(fileApi.presignGetUrl(videoFile.getUrl(), PRESIGN_URL_EXPIRATION_SECONDS));
+            // 先查询 tik_user_file 获取 infra_file.id，再查询 infra_file
+            TikUserFileDO userFile = userFileMapper.selectById(task.getVideoFileId());
+            if (userFile != null && userFile.getFileId() != null) {
+                FileDO videoFile = fileMapper.selectById(userFile.getFileId());
+                if (videoFile != null) {
+                    task.setVideoUrl(fileApi.presignGetUrl(videoFile.getUrl(), PRESIGN_URL_EXPIRATION_SECONDS));
+                }
             }
         }