From a03e14492b4bd208833e1ba0427d7c30bec05d5c Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Thu, 12 Feb 2026 23:35:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/agents/ChatDrawer.vue      |   38 +-
 .../web-gold/src/views/kling/IdentifyFace.vue | 1137 +++++++++--------
 2 files changed, 637 insertions(+), 538 deletions(-)

diff --git a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
index 8563015b5c..e3de8c9f3e 100644
--- a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
+++ b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
@@ -105,13 +105,13 @@
               </div>
             </div>
             <div class="input-wrapper">
-              <a-textarea
-                v-model:value="inputText"
+              <textarea
+                v-model="inputText"
                 class="chat-input"
                 placeholder="在这里输入你的需求，例如：帮我写一段关于..."
-                :auto-size="{ minRows: 3, maxRows: 5 }"
+                rows="3"
                 @keydown="handleKeyDown"
-              />
+              ></textarea>
               <button class="send-btn" :disabled="!inputText.trim() || loading" @click="handleSend">
                 <SendOutlined />
               </button>
@@ -595,18 +595,28 @@ watch(() => props.visible, (newVal) => {
 
 .chat-input {
   width: 100%;
+  padding: 14px 44px 14px 16px;
+  border: none;
+  border-radius: 12px;
+  font-size: 14px;
+  color: #1E293B;
+  background: #F8FAFC;
+  outline: none;
+  resize: none;
+  transition: all 0.2s ease;
+  font-family: inherit;
 
-  :deep(.ant-input) {
-    padding-right: 44px;
-    border-radius: 12px;
-    border: 1px solid #E2E8F0;
-    font-size: 14px;
+  &::placeholder {
+    color: #94A3B8;
+  }
 
-    &:focus,
-    &:hover {
-      border-color: #7C3AED;
-      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
-    }
+  &:focus {
+    background: #fff;
+    box-shadow: 0 0 0 1px #E2E8F0;
+  }
+
+  &:hover {
+    background: #fff;
   }
 }
 
diff --git a/frontend/app/web-gold/src/views/kling/IdentifyFace.vue b/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
index ec4c06ae34..0cd39ad2d3 100644
--- a/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
+++ b/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
@@ -1,226 +1,220 @@
 <template>
   <FullWidthLayout :show-padding="false">
-    <div class="kling-page">
-      <div class="kling-content">
-        <!-- 左侧配置 -->
-        <div class="upload-panel">
-          <!-- 文案输入 -->
-          <div class="section">
-            <h3>文案</h3>
-            <a-textarea
-              v-model:value="ttsText"
-              :placeholder="textareaPlaceholder"
-              :rows="4"
-              :maxlength="maxTextLength"
-              :show-count="true"
-              class="tts-textarea"
-            />
-          </div>
+    <div class="digital-human-page">
+      <!-- 左侧配置区 -->
+      <section class="config-panel">
 
-          <!-- 音色选择 -->
-          <div class="section">
-            <h3>音色</h3>
-            <VoiceSelector
-              :synth-text="ttsText"
-              :speech-rate="speechRate"
-              @select="handleVoiceSelect"
-            />
-          </div>
+        <!-- 步骤1：输入文案 -->
+        <div class="config-card">
+          <div class="step-indicator">1</div>
+          <h3 class="card-title">输入播文案</h3>
 
-          <!-- TTS 控制 -->
-          <div class="section">
-            <h3>语音控制</h3>
-            <div class="control-group">
-              <div class="control-label">语速</div>
-              <div class="slider-card">
-                <div class="slider-info">
-                  <div class="slider-value">{{ speechRateDisplay }}</div>
-                  <button class="reset-btn" @click="speechRate = 1">重置</button>
-                </div>
-                <a-slider
-                  v-model:value="speechRate"
-                  :min="0.5"
-                  :max="2"
-                  :step="0.1"
-                  :marks="speechRateMarks"
-                  :tooltip-open="false"
-                />
-              </div>
-            </div>
-          </div>
-
-          <!-- 视频选择 -->
-          <div class="section">
-            <h3>视频</h3>
-
-            <!-- 双选项卡片 -->
-            <div class="video-selection-cards">
-              <!-- 上传选项 -->
-              <div
-                class="video-option-card"
-                :class="{ selected: videoState.videoSource === 'upload' }"
-                @click="handleSelectUpload"
-              >
-                <div class="card-icon">
-                  <UploadOutlined />
-                </div>
-                <div class="card-content">
-                  <h4>点击上传新视频</h4>
-                  <p>支持 MP4、MOV 格式</p>
-                </div>
-              </div>
-
-              <!-- 选择选项 -->
-              <div
-                class="video-option-card"
-                :class="{ selected: videoState.videoSource === 'select' }"
-                @click="handleSelectFromLibrary"
-              >
-                <div class="card-icon">
-                  <PictureOutlined />
-                </div>
-                <div class="card-content">
-                  <h4>从素材库选择</h4>
-                  <p>选择已上传的视频</p>
-                </div>
-              </div>
-            </div>
-
-            <!-- 已选择视频的预览 -->
-            <div v-if="videoState.selectedVideo" class="selected-video-preview">
-              <div class="preview-thumbnail">
-                <img
-                  :src="getVideoPreviewUrl(videoState.selectedVideo)"
-                  :alt="videoState.selectedVideo.fileName"
-                />
-                <div class="video-duration-badge">
-                  {{ formatDuration(videoState.selectedVideo.duration) }}
-                </div>
-              </div>
-              <div class="preview-info">
-                <div class="video-title">{{ videoState.selectedVideo.fileName }}</div>
-                <div class="video-meta">
-                  <span>{{ formatFileSize(videoState.selectedVideo.fileSize) }}</span>
-                  <span>{{ formatDuration(videoState.selectedVideo.duration) }}</span>
-                </div>
-              </div>
-              <a-button type="link" size="small" @click="replaceVideo">
-                更换
-              </a-button>
-            </div>
-
-            <!-- 上传区域（仅在选择上传时显示） -->
-            <div
-              v-if="videoState.videoSource === 'upload'"
-              class="upload-zone"
-              @drop.prevent="handleDrop"
-              @dragover.prevent="dragOver = true"
-              @dragleave.prevent="dragOver = false"
-            >
-              <input ref="fileInput" type="file" accept=".mp4,.mov" style="display: none" @change="handleFileSelect" />
-
-              <div v-if="!videoState.uploadedVideo" class="upload-placeholder">
-                <h3>拖拽或点击上传视频文件</h3>
-                <p>支持 MP4、MOV</p>
-                <a-button type="primary" size="large" @click="triggerFileSelect">
-                  选择文件
-                </a-button>
-              </div>
-
-              <div v-else class="video-preview">
-                <video :src="videoState.uploadedVideo" controls class="preview-video"></video>
-                <p>{{ videoState.videoFile?.name }}</p>
-                <a-button type="link" size="small" @click="replaceVideo">
-                  更换
-                </a-button>
-              </div>
-            </div>
-          </div>
-
-          <!-- 配音生成（仅在 Pipeline 到达 ready 状态后显示） -->
-          <div v-if="isPipelineReady" class="section audio-section">
-            <!-- 已生成音频 -->
-            <div v-if="audioState.generated" class="audio-generated">
-              <div class="audio-header">
-                <span class="audio-title">配音</span>
-                <span class="audio-duration">{{ audioDurationSec }}秒</span>
-              </div>
-
-              <!-- 音频播放器 -->
-              <div v-if="audioUrl" class="audio-player-wrapper">
-                <audio :src="audioUrl" controls class="audio-player" />
-              </div>
-
-              <!-- 校验失败提示 -->
-              <div v-if="!validationPassed" class="validation-warning">
-                <span class="warning-icon">⚠️</span>
-                <span class="warning-text">音频时长({{ audioDurationSec }}秒)超过视频人脸区间({{ faceDurationSec }}秒)，请缩短文案或调整语速</span>
-              </div>
-
-              <!-- 重新生成 -->
-              <a-button type="link" size="small" :loading="audioState.generating" @click="generateAudio">
-                重新生成
-              </a-button>
-            </div>
-          </div>
-
-          <!-- Pipeline 进度条 -->
-          <PipelineProgress
-            v-if="isPipelineBusy || isPipelineReady || isPipelineFailed || isPipelineCompleted"
-            :state="pipelineState"
-            :progress="pipelineProgress"
-            :is-busy="isPipelineBusy"
-            :is-ready="isPipelineReady"
-            :is-failed="isPipelineFailed"
-            :is-completed="isPipelineCompleted"
-            :error="pipelineError"
-            @retry="retryPipeline"
-            @reset="resetPipeline"
+          <a-textarea
+            v-model:value="ttsText"
+            :placeholder="textareaPlaceholder"
+            :rows="4"
+            :maxlength="maxTextLength"
+            :show-count="true"
+            class="text-input"
+            :bordered="false"
           />
 
-          <!-- 按钮组 -->
-          <div class="action-buttons">
-            <!-- 准备阶段：先运行到 ready -->
-            <a-button
-              v-if="!isPipelineReady"
-              type="primary"
-              size="large"
-              :disabled="!canGenerate"
-              :loading="isPipelineBusy"
-              block
-              @click="generateAudio"
-            >
-              {{ isPipelineBusy ? '处理中...' : '生成配音并验证' }}
-            </a-button>
-
-            <!-- Ready 后：生成数字人视频 -->
-            <a-button
-              v-else
-              type="primary"
-              size="large"
-              :loading="isPipelineBusy"
-              block
-              @click="generateDigitalHuman"
-            >
-              {{ isPipelineBusy ? '处理中...' : '生成数字人视频' }}
-            </a-button>
-
+          <div class="input-meta">
+            <span>当前字数：{{ ttsText?.length || 0 }}字</span>
+            <span>预计音频时长：<span class="meta-value">{{ audioDurationSec }}秒</span></span>
           </div>
         </div>
 
-        <!-- 右侧结果 -->
-        <ResultPanel @videoLoaded="handleVideoLoaded" />
-      </div>
+        <!-- 步骤2：语音设置 -->
+        <div class="config-card">
+          <div class="step-indicator">2</div>
+          <h3 class="card-title">语音设置</h3>
+
+          <div class="voice-settings">
+            <div class="setting-group">
+              <label class="setting-label">选择音色</label>
+              <VoiceSelector
+                :synth-text="ttsText"
+                :speech-rate="speechRate"
+                @select="handleVoiceSelect"
+              />
+            </div>
+
+            <div class="setting-group">
+              <label class="setting-label">合成模型等级</label>
+              <div class="model-options">
+                <button
+                  class="model-btn"
+                  :class="{ 'model-btn--active': speechRate <= 1 }"
+                >
+                  标准版 (1x积分)
+                </button>
+                <button
+                  class="model-btn model-btn--pro"
+                  :class="{ 'model-btn--active': speechRate > 1 }"
+                >
+                  Pro 旗舰版 (3x积分)
+                  <CrownFilled class="pro-icon" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 步骤3：上传视频 -->
+        <div class="config-card">
+          <div class="step-indicator">3</div>
+          <h3 class="card-title">上传/选择视频素材</h3>
+
+          <div class="video-options">
+            <!-- 上传新视频 -->
+            <div
+              class="video-option-card"
+              :class="{ 'video-option-card--selected': videoState.videoSource === 'upload' }"
+              @click="handleSelectUpload"
+            >
+              <div class="video-option-icon">
+                <CloudUploadOutlined />
+              </div>
+              <div class="video-option-content">
+                <h4>点击上传新视频</h4>
+                <p>支持 MP4、MOV (需 >3秒)</p>
+              </div>
+            </div>
+
+            <!-- 从素材库选择 -->
+            <div
+              class="video-option-card"
+              :class="{ 'video-option-card--selected': videoState.videoSource === 'select' }"
+              @click="handleSelectFromLibrary"
+            >
+              <div class="video-option-icon">
+                <PictureOutlined />
+              </div>
+              <div class="video-option-content">
+                <h4>从素材库选择</h4>
+                <p>选择已上传的视频</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 已选择视频预览 -->
+          <div v-if="videoState.selectedVideo" class="selected-video">
+            <div class="video-preview-thumb">
+              <img
+                :src="getVideoPreviewUrl(videoState.selectedVideo)"
+                :alt="videoState.selectedVideo.fileName"
+              />
+            </div>
+            <div class="video-preview-info">
+              <div class="video-name">{{ videoState.selectedVideo.fileName }}</div>
+              <div class="video-meta">{{ formatDuration(videoState.selectedVideo.duration) }}</div>
+            </div>
+            <button class="change-video-btn" @click="replaceVideo">更换</button>
+          </div>
+
+          <!-- 上传区域 -->
+          <div
+            v-if="videoState.videoSource === 'upload'"
+            class="upload-zone"
+            :class="{ 'upload-zone--dragover': dragOver }"
+            @drop.prevent="handleDrop"
+            @dragover.prevent="dragOver = true"
+            @dragleave.prevent="dragOver = false"
+          >
+            <input ref="fileInput" type="file" accept=".mp4,.mov" class="file-input" @change="handleFileSelectWrapper" />
+
+            <div v-if="!videoState.uploadedVideo" class="upload-placeholder">
+              <CloudUploadOutlined class="upload-icon" />
+              <span class="upload-text">点击上传新视频</span>
+              <span class="upload-hint">支持 MP4、MOV (需 >3秒)</span>
+              <button class="select-file-btn" @click="triggerFileSelect">选择文件</button>
+            </div>
+
+            <div v-else class="upload-preview">
+              <video :src="videoState.uploadedVideo" controls class="preview-video-player"></video>
+              <p class="upload-filename">{{ videoState.videoFile?.name }}</p>
+              <button class="change-video-btn" @click="replaceVideo">更换</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Pipeline 进度 -->
+        <PipelineProgress
+          v-if="isPipelineBusy || isPipelineReady || isPipelineFailed || isPipelineCompleted"
+          :state="pipelineState"
+          :progress="pipelineProgress"
+          :is-busy="isPipelineBusy"
+          :is-ready="isPipelineReady"
+          :is-failed="isPipelineFailed"
+          :is-completed="isPipelineCompleted"
+          :error="pipelineError"
+          @retry="retryPipeline"
+          @reset="resetPipeline"
+        />
+
+        <!-- 操作按钮 -->
+        <div class="action-section">
+          <a-button
+            v-if="!isPipelineReady"
+            type="primary"
+            size="large"
+            :disabled="!canGenerate"
+            :loading="isPipelineBusy"
+            block
+            @click="generateAudio"
+            class="action-btn"
+          >
+            {{ isPipelineBusy ? '处理中...' : '生成配音并验证' }}
+          </a-button>
+
+          <a-button
+            v-else
+            type="primary"
+            size="large"
+            :loading="isPipelineBusy"
+            block
+            @click="generateDigitalHuman"
+            class="action-btn"
+          >
+            {{ isPipelineBusy ? '处理中...' : '生成数字人视频' }}
+          </a-button>
+        </div>
+
+      </section>
+
+      <!-- 右侧预览区 -->
+      <aside class="preview-panel">
+        <div class="preview-card">
+          <h3 class="preview-title">合成预览</h3>
+
+          <div class="preview-screen">
+            <ResultPanel @videoLoaded="handleVideoLoaded" />
+          </div>
+
+          <div class="preview-meta">
+            <div class="meta-row">
+              <span class="meta-label">预计消耗积分</span>
+              <span class="meta-value">150 积分</span>
+            </div>
+            <div class="meta-row">
+              <span class="meta-label">当前余额</span>
+              <span class="meta-value">2,450 积分</span>
+            </div>
+          </div>
+        </div>
+      </aside>
 
-      <!-- 视频选择器弹窗 -->
-      <VideoSelector v-model:open="videoState.selectorVisible" @select="handleVideoSelect" />
     </div>
+
+    <!-- 视频选择器弹窗 -->
+    <VideoSelector v-model:open="videoState.selectorVisible" @select="handleVideoSelect" />
   </FullWidthLayout>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { UploadOutlined, PictureOutlined } from '@ant-design/icons-vue'
+import { ref } from 'vue'
+import { CloudUploadOutlined, CrownFilled } from '@ant-design/icons-vue'
 import { useVoiceCopyStore } from '@/stores/voiceCopy'
 import VideoSelector from '@/components/VideoSelector.vue'
 import VoiceSelector from '@/components/VoiceSelector.vue'
@@ -244,7 +238,6 @@ const {
   // 语音生成相关
   ttsText,
   speechRate,
-  audioState,
   generateAudio,
 
   // 数字人生成相关
@@ -255,12 +248,7 @@ const {
   canGenerate,
   maxTextLength,
   textareaPlaceholder,
-  speechRateMarks,
-  speechRateDisplay,
-  faceDurationSec,
   audioDurationSec,
-  audioUrl,
-  validationPassed,
 
   // Pipeline 状态（单一状态源）
   pipelineState,
@@ -275,9 +263,7 @@ const {
 
   // 事件处理方法
   handleVoiceSelect,
-  handleFileSelect,
   handleDrop,
-  triggerFileSelect,
   handleSelectUpload,
   handleSelectFromLibrary,
   handleVideoSelect,
@@ -287,426 +273,529 @@ const {
 
   // UI 辅助方法
   formatDuration,
-  formatFileSize,
 } = controller
 
 // ==================== 生命周期 ====================
 
+// 引用 fileInput 用于手动触发点击
+const fileInput = ref<HTMLInputElement | null>(null)
+
+// 触发文件选择
+const triggerFileSelect = () => {
+  fileInput.value?.click()
+}
+
+// 覆盖 controller 中的方法，使用 ref
+const handleFileSelectWrapper = (e: Event) => {
+  controller.handleFileSelect(e)
+}
+
+// ==================== 生命周期 ====================
+
+import { onMounted } from 'vue'
 onMounted(async () => {
   await voiceStore.refresh()
 })
 </script>
 
 <style scoped lang="less">
-
-/* ========== 页面布局 ========== */
-.kling-page {
-  padding: 0;
-  background: var(--bg-secondary);
+.digital-human-page {
   min-height: 100vh;
+  background: #F8FAFC;
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  padding: 24px;
 }
 
-.kling-content {
-  display: grid;
-  grid-template-columns: 480px 1fr;
-  gap: 32px;
-  margin: 0 auto;
+// 布局容器
+.config-panel {
+  flex: 1;
+  padding: 20px;
+  max-width: 100%;
 }
 
-/* 优化左侧配置面板 */
-.upload-panel {
-  background: var(--bg-primary);
-  border-radius: 16px;
-  padding: 28px;
-  height: fit-content;
-  position: sticky;
-  top: 24px;
-  max-height: calc(100vh - 48px);
-  overflow-y: auto;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+.preview-panel {
+  width: 400px;
+  background: #fff;
+  border-left: 1px solid #E2E8F0;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
 
-  /* 自定义滚动条 */
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--border-light);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--text-secondary);
+  @media (max-width: 1200px) {
+    width: 100%;
+    border-left: none;
+    border-top: 1px solid #E2E8F0;
+    order: -1;
   }
 }
 
-/* ========== 基础组件 ========== */
-.section {
-  margin-bottom: 24px;
-}
-
-.section h3 {
-  color: var(--text-primary);
-  margin-bottom: 12px;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.card-content h4 {
-  color: var(--text-primary);
-  font-size: 14px;
-  margin-bottom: 12px;
-}
-
-.card-content p {
-  color: var(--text-secondary);
-  font-size: 13px;
-  margin: 0;
-}
-
-/* ========== 表单控件 ========== */
-.tts-textarea {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-light);
-  border-radius: 8px;
-  color: var(--text-primary);
-
-  :deep(.ant-input) {
-    background: transparent;
-    border: none;
-    color: var(--text-primary);
-  }
-}
-
-.control-group {
+// 配置卡片
+.config-card {
+  position: relative;
+  background: #fff;
+  border: 1px solid #E2E8F0;
+  border-radius: 12px;
+  padding: 20px;
   margin-bottom: 16px;
+  overflow: hidden;
 }
 
-.control-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 8px;
-}
-
-.slider-card {
-  border: 1px solid var(--border-light);
-  border-radius: 8px;
-  padding: 12px 16px;
-  background: var(--bg-secondary);
-}
-
-.slider-info {
+.step-indicator {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+  color: #fff;
+  border-radius: 8px 0 12px 0;
   display: flex;
   align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1E293B;
+  margin: 0 0 12px 12px;
+  padding-left: 44px;
+}
+
+// 文案输入
+.text-input {
+  width: 100%;
+
+  :deep(.ant-input) {
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    padding: 16px 12px;
+    background: #F8FAFC;
+
+    &:focus {
+      background: #fff;
+      box-shadow: 0 0 0 1px #E2E8F0;
+    }
+
+    :deep(.ant-input-textarea-show-count) {
+      bottom: 8px;
+    }
+  }
+}
+
+.input-meta {
+  display: flex;
   justify-content: space-between;
   font-size: 12px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
+  color: #94A3B8;
+  margin-top: 12px;
 }
 
-.slider-value {
-  font-size: 14px;
+.meta-value {
   font-weight: 600;
-  color: var(--color-primary);
+  color: #1E293B;
 }
 
-.reset-btn {
-  padding: 4px 12px;
-  border: 1px solid var(--border-light);
-  background: var(--bg-primary);
-  color: var(--text-secondary);
-  border-radius: 4px;
-  cursor: pointer;
+// 语音设置
+.voice-settings {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.setting-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.setting-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #64748B;
+}
+
+.model-options {
+  display: flex;
+  background: #F1F5F9;
+  border-radius: 6px;
+  padding: 2px;
+  gap: 2px;
+}
+
+.model-btn {
+  flex: 1;
+  padding: 8px 10px;
+  border-radius: 6px;
   font-size: 12px;
+  font-weight: 500;
+  color: #64748B;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  &--active {
+    background: #fff;
+    color: #22C55E;
+    font-weight: 600;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
 }
 
-/* ========== 视频选择 ========== */
-.video-selection-cards {
+.pro-icon {
+  font-size: 12px;
+  color: #EAB308;
+}
+
+// 视频选项
+.video-options {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-bottom: 16px;
+
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+  }
 }
 
 .video-option-card {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 16px;
-  border: 1px solid var(--border-light);
-  border-radius: 8px;
-  background: var(--bg-primary);
+  padding: 14px 16px;
+  border: 2px dashed #E2E8F0;
+  border-radius: 10px;
+  background: #F8FAFC;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
 
   &:hover {
-    border-color: var(--color-primary);
-    background: var(--bg-secondary);
+    border-color: #22C55E;
+    background: #F0FDF4;
   }
 
-  &.selected {
-    border-color: var(--color-primary);
-    background: rgba(var(--color-primary), 0.1);
+  &--selected {
+    border-style: solid;
+    border-color: #22C55E;
+    background: #F0FDF4;
   }
 }
 
-.card-icon {
-  font-size: 24px;
-  color: var(--color-primary);
+.video-option-icon {
+  font-size: 20px;
+  color: #94A3B8;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: rgba(var(--color-primary), 0.1);
-  border-radius: 8px;
+  width: 36px;
+  height: 36px;
+  background: #fff;
+  border-radius: 6px;
   flex-shrink: 0;
 }
 
-/* ========== 视频预览 ========== */
-.selected-video-preview {
+.video-option-content {
+  flex: 1;
+}
+
+.video-option-content h4 {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1E293B;
+  margin: 0 0 4px 0;
+}
+
+.video-option-content p {
+  font-size: 11px;
+  color: #94A3B8;
+  margin: 0;
+}
+
+// 已选择视频
+.selected-video {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-light);
+  gap: 10px;
+  padding: 10px;
+  background: #F1F5F9;
   border-radius: 8px;
-  margin-bottom: 16px;
 }
-.preview-thumbnail {
-  position: relative;
-  width: 80px;
-  height: 45px;
+
+.video-preview-thumb {
+  width: 70px;
+  height: 40px;
   border-radius: 6px;
   overflow: hidden;
-  background: #374151;
+  background: #1E293B;
   flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
-.preview-thumbnail img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.video-duration-badge {
-  position: absolute;
-  bottom: 4px;
-  right: 4px;
-  background: rgba(0, 0, 0, 0.8);
-  color: var(--text-primary);
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: 600;
-}
-.preview-info {
+
+.video-preview-info {
   flex: 1;
   min-width: 0;
 }
-.video-title {
-  color: var(--text-primary);
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 4px;
+
+.video-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1E293B;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .video-meta {
-  display: flex;
-  gap: 12px;
-  font-size: 12px;
-  color: var(--text-secondary);
+  font-size: 11px;
+  color: #94A3B8;
 }
 
-/* ========== 上传区域 ========== */
+.change-video-btn {
+  padding: 4px 10px;
+  font-size: 11px;
+  color: #64748B;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-decoration: underline;
+  flex-shrink: 0;
+
+  &:hover {
+    color: #22C55E;
+  }
+}
+
+// 上传区域
 .upload-zone {
-  min-height: 280px;
+  min-height: 160px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px dashed var(--border-light);
-  border-radius: 8px;
-  background: var(--bg-secondary);
+  border: 2px dashed #E2E8F0;
+  border-radius: 10px;
+  background: #F8FAFC;
+  transition: all 0.2s ease;
 
-  &.drag-over {
-    border-color: var(--color-primary);
-    background: rgba(var(--color-primary), 0.1);
+  &--dragover {
+    border-color: #22C55E;
+    background: #F0FDF4;
   }
 }
 
+.file-input {
+  display: none;
+}
+
 .upload-placeholder {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 40px 20px;
-  text-align: center;
-
-  h3 {
-    color: var(--text-primary);
-    font-size: 16px;
-    font-weight: 600;
-    margin: 0;
-  }
-
-  p {
-    color: var(--text-secondary);
-    font-size: 14px;
-    margin: 0;
-  }
-
-  .ant-btn {
-    padding: 8px 24px;
-    font-size: 14px;
-    border-radius: 6px;
-  }
-}
-
-.video-preview {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 20px;
-  text-align: center;
-
-  p {
-    color: var(--text-secondary);
-    font-size: 14px;
-    margin: 0;
-    padding: 8px 16px;
-    background: var(--bg-primary);
-    border-radius: 6px;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.preview-video {
-  width: 100%;
-  max-height: 280px;
-  border-radius: 8px;
-}
-
-/* ========== 音频区域 ========== */
-.audio-section {
-  margin-bottom: 24px;
-}
-
-.audio-generated {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.audio-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.audio-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.audio-duration {
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.audio-player-wrapper {
-  width: 100%;
-}
-
-.audio-player {
-  width: 100%;
-  height: 36px;
-}
-
-.validation-warning {
-  display: flex;
-  align-items: flex-start;
   gap: 8px;
-  padding: 10px 12px;
-  background: rgba(var(--color-warning), 0.1);
-  border: 1px solid rgba(var(--color-warning), 0.3);
-  border-radius: 6px;
+}
+
+.upload-icon {
+  font-size: 28px;
+  color: #94A3B8;
+}
+
+.upload-text {
   font-size: 13px;
+  font-weight: 500;
+  color: #1E293B;
 }
 
-.warning-icon {
-  flex-shrink: 0;
-  font-size: 14px;
+.upload-hint {
+  font-size: 11px;
+  color: #94A3B8;
 }
 
-.warning-text {
-  color: var(--text-secondary);
-  line-height: 1.4;
+.select-file-btn {
+  margin-top: 12px;
+  padding: 6px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #22C55E;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border: 1px solid #22C55E;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(34, 197, 94, 0.1);
+  }
 }
 
-.audio-prompt {
-  text-align: center;
-  padding: 20px;
-  background: var(--bg-secondary);
-  border-radius: 8px;
-  border: 1px dashed var(--border-light);
-}
-
-.audio-prompt p {
-  margin: 0 0 16px 0;
-  font-size: 14px;
-  color: var(--text-secondary);
-}
-
-/* ========== 操作按钮 ========== */
-.action-buttons {
+.upload-preview {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin-top: 24px;
-  padding-top: 20px;
-  border-top: 1px solid var(--border-light);
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
 }
 
-.action-buttons .ant-btn[type="primary"] {
-  height: 48px;
+.preview-video-player {
+  width: 100%;
+  max-height: 140px;
+  border-radius: 8px;
+}
+
+.upload-filename {
+  font-size: 12px;
+  color: #64748B;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 6px 10px;
+  background: #F1F5F9;
+  border-radius: 6px;
+}
+
+// 操作按钮区
+.action-section {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #E2E8F0;
+}
+
+.action-btn {
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 8px;
+
+  &.ant-btn-primary {
+    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
+    border: none;
+
+    &:hover:not(:disabled) {
+      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
+    }
+
+    &:disabled {
+      background: #D1D5DB;
+    }
+  }
+}
+
+// 预览面板
+.preview-card {
+  position: sticky;
+  top: 24px;
+}
+
+.preview-title {
   font-size: 16px;
   font-weight: 600;
+  color: #1E293B;
+  margin: 0 0 16px 0;
+}
+
+.preview-screen {
+  aspect-ratio: 9/16;
+  background: #1E293B;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::after {
+    content: '预览画面不可用';
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    font-size: 13px;
+  }
+
+  :deep(.result-panel) {
+    height: 100%;
+  }
+}
+
+.preview-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  background: #F8FAFC;
   border-radius: 8px;
 }
 
-/* ========== 响应式 ========== */
+.meta-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.meta-label {
+  color: #64748B;
+}
+
+.meta-row .meta-value {
+  font-weight: 600;
+  color: #1E293B;
+}
+
+// 响应式
 @media (max-width: 1024px) {
-  .kling-content {
-    grid-template-columns: 1fr;
+  .digital-human-page {
+    flex-direction: column;
+  }
+
+  .config-panel {
+    max-width: 100%;
     padding: 16px;
-    gap: 20px;
   }
 
-  .upload-panel {
+  .preview-panel {
+    width: 100%;
+    border-left: none;
+    border-top: 1px solid #E2E8F0;
+    order: -1;
+    padding: 16px;
+  }
+
+  .preview-card {
     position: static;
-    padding: 20px;
   }
 
-  .video-selection-cards {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-
-  .upload-zone {
-    min-height: 240px;
+  .preview-screen {
+    min-height: 200px;
   }
 }
 </style>