sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 功能优化

Browse Source
This commit is contained in:
sion123
2026-01-17 19:54:57 +08:00
parent 091e3d2d05
commit fe91226727
3 changed files with 409 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

597
frontend/app/web-gold/src/views/kling/IdentifyFace.vue
View File

@@ -1,288 +1,290 @@
<template>
<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 v-if="identifyState.identified && faceDuration > 0" class="text-hint">
<span class="hint-icon">💡</span>
<span>视频中人脸出现时长约 {{ (faceDuration / 1000).toFixed(1) }} 秒，建议文案不超过 {{ suggestedMaxChars }} 字</span>
</div>
</div>
<!-- 音色选择 -->
<div class="section">
<h3>音色</h3>
<VoiceSelector ref="voiceSelectorRef" @select="handleVoiceSelect" />
</div>
<!-- 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"
/>
<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 v-if="identifyState.identified && faceDuration > 0" class="text-hint">
<span class="hint-icon">💡</span>
<span>视频中人脸出现时长约 {{ (faceDuration / 1000).toFixed(1) }} 秒，建议文案不超过 {{ suggestedMaxChars }} 字</span>
</div>
</div>
</div>
<!-- 视频选择 -->
<div class="section">
<h3>视频</h3>
<!-- 音色选择 -->
<div class="section">
<h3>音色</h3>
<VoiceSelector ref="voiceSelectorRef" @select="handleVoiceSelect" />
</div>
<!-- 双选项卡片 -->
<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>
<!-- 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 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 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 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 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>
</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>
<!-- 素材校验结果 -->
<div v-if="materialValidation.videoDuration > 0 && materialValidation.audioDuration > 0" class="section">
<h3>素材校验</h3>
<div class="validation-result" :class="{ 'validation-passed': materialValidation.isValid, 'validation-failed': !materialValidation.isValid }">
<div class="validation-status">
<span class="status-icon">{{ materialValidation.isValid ? '✅' : '❌' }}</span>
<span class="status-text">{{ materialValidation.isValid ? '校验通过' : '校验失败' }}</span>
</div>
<!-- 时长对比进度条 -->
<div class="duration-comparison">
<div class="duration-bar">
<div class="duration-label">
<span>音频时长</span>
<span class="duration-value">{{ (materialValidation.audioDuration / 1000).toFixed(1) }}s</span>
</div>
<div class="progress-bar audio-bar">
<div
class="progress-fill"
:style="{ width: `${(materialValidation.audioDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
></div>
</div>
</div>
<div class="duration-bar">
<div class="duration-label">
<span>视频时长</span>
<span class="duration-value">{{ (materialValidation.videoDuration / 1000).toFixed(1) }}s</span>
</div>
<div class="progress-bar video-bar">
<div
class="progress-fill"
:class="{ 'success': materialValidation.isValid, 'error': !materialValidation.isValid }"
:style="{ width: `${(materialValidation.videoDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
></div>
</div>
</div>
</div>
<!-- 失败提示和建议 -->
<div v-if="!materialValidation.isValid" class="validation-error">
<p class="error-message">
视频时长必须大于音频时长才能生成数字人视频
</p>
<div class="quick-actions">
<a-button size="small" @click="replaceVideo">更换视频</a-button>
<a-button size="small" @click="handleSimplifyScript">精简文案</a-button>
</div>
</div>
</div>
</div>
<!-- 配音生成与校验（仅在识别后显示） -->
<div v-if="identifyState.identified" class="section audio-generation-section">
<h3>配音生成与校验</h3>
<!-- 生成配音按钮 -->
<div class="generate-audio-row">
<a-button
type="default"
size="large"
:disabled="!canGenerateAudio"
:loading="audioState.generating"
block
@click="generateAudio"
<!-- 上传区域（仅在选择上传时显示） -->
<div
v-if="videoState.videoSource === 'upload'"
class="upload-zone"
@drop.prevent="handleDrop"
@dragover.prevent="dragOver = true"
@dragleave.prevent="dragOver = false"
>
{{ audioState.generating ? '生成中...' : '生成配音（用于校验时长）' }}
</a-button>
<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>
<!-- 音频预览（生成后显示） -->
<div v-if="audioState.generated" class="audio-preview">
<div class="audio-info">
<h4>生成的配音</h4>
<div class="duration-info">
<span class="label">音频时长：</span>
<span class="value">{{ (audioState.durationMs / 1000).toFixed(1) }} 秒</span>
<!-- 素材校验结果 -->
<div v-if="materialValidation.videoDuration > 0 && materialValidation.audioDuration > 0" class="section">
<h3>素材校验</h3>
<div class="validation-result" :class="{ 'validation-passed': materialValidation.isValid, 'validation-failed': !materialValidation.isValid }">
<div class="validation-status">
<span class="status-icon">{{ materialValidation.isValid ? '✅' : '❌' }}</span>
<span class="status-text">{{ materialValidation.isValid ? '校验通过' : '校验失败' }}</span>
</div>
<div class="duration-info">
<span class="label">人脸区间：</span>
<span class="value">{{ (faceDuration / 1000).toFixed(1) }} 秒</span>
<!-- 时长对比进度条 -->
<div class="duration-comparison">
<div class="duration-bar">
<div class="duration-label">
<span>音频时长</span>
<span class="duration-value">{{ (materialValidation.audioDuration / 1000).toFixed(1) }}s</span>
</div>
<div class="progress-bar audio-bar">
<div
class="progress-fill"
:style="{ width: `${(materialValidation.audioDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
></div>
</div>
</div>
<div class="duration-bar">
<div class="duration-label">
<span>视频时长</span>
<span class="duration-value">{{ (materialValidation.videoDuration / 1000).toFixed(1) }}s</span>
</div>
<div class="progress-bar video-bar">
<div
class="progress-fill"
:class="{ 'success': materialValidation.isValid, 'error': !materialValidation.isValid }"
:style="{ width: `${(materialValidation.videoDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
></div>
</div>
</div>
</div>
<div class="duration-info" :class="{ 'validation-passed': audioState.validationPassed, 'validation-failed': !audioState.validationPassed }">
<span class="label">校验结果：</span>
<span class="value">
{{ audioState.validationPassed ? '✅ 通过' : '❌ 不通过（需至少2秒重合）' }}
</span>
<!-- 失败提示和建议 -->
<div v-if="!materialValidation.isValid" class="validation-error">
<p class="error-message">
视频时长必须大于音频时长才能生成数字人视频
</p>
<div class="quick-actions">
<a-button size="small" @click="replaceVideo">更换视频</a-button>
<a-button size="small" @click="handleSimplifyScript">精简文案</a-button>
</div>
</div>
</div>
</div>
<!-- 音频播放器 -->
<div class="audio-player">
<audio
v-if="audioState.generated.audioBase64"
:src="`data:audio/mp3;base64,${audioState.generated.audioBase64}`"
controls
class="audio-element"
/>
<audio
v-else-if="audioState.generated.audioUrl"
:src="audioState.generated.audioUrl"
controls
class="audio-element"
/>
</div>
<!-- 配音生成与校验（仅在识别后显示） -->
<div v-if="identifyState.identified" class="section audio-generation-section">
<h3>配音生成与校验</h3>
<!-- 重新生成按钮 -->
<div class="regenerate-row">
<!-- 生成配音按钮 -->
<div class="generate-audio-row">
<a-button
type="link"
size="small"
@click="generateAudio"
type="default"
size="large"
:disabled="!canGenerateAudio"
:loading="audioState.generating"
block
@click="generateAudio"
>
重新生成
{{ audioState.generating ? '生成中...' : '生成配音（用于校验时长）' }}
</a-button>
</div>
<!-- 音频预览（生成后显示） -->
<div v-if="audioState.generated" class="audio-preview">
<div class="audio-info">
<h4>生成的配音</h4>
<div class="duration-info">
<span class="label">音频时长：</span>
<span class="value">{{ (audioState.durationMs / 1000).toFixed(1) }} 秒</span>
</div>
<div class="duration-info">
<span class="label">人脸区间：</span>
<span class="value">{{ (faceDuration / 1000).toFixed(1) }} 秒</span>
</div>
<div class="duration-info" :class="{ 'validation-passed': audioState.validationPassed, 'validation-failed': !audioState.validationPassed }">
<span class="label">校验结果：</span>
<span class="value">
{{ audioState.validationPassed ? '✅ 通过' : '❌ 不通过（需至少2秒重合）' }}
</span>
</div>
</div>
<!-- 音频播放器 -->
<div class="audio-player">
<audio
v-if="audioState.generated.audioBase64"
:src="`data:audio/mp3;base64,${audioState.generated.audioBase64}`"
controls
class="audio-element"
/>
<audio
v-else-if="audioState.generated.audioUrl"
:src="audioState.generated.audioUrl"
controls
class="audio-element"
/>
</div>
<!-- 重新生成按钮 -->
<div class="regenerate-row">
<a-button
type="link"
size="small"
@click="generateAudio"
:loading="audioState.generating"
>
重新生成
</a-button>
</div>
</div>
</div>
<!-- 按钮组 -->
<div class="action-buttons">
<a-button
type="primary"
size="large"
:disabled="!canGenerate"
block
@click="generateDigitalHuman"
>
生成数字人视频
</a-button>
<!-- 添加提示信息 -->
<div v-if="canGenerate && !audioState.validationPassed" class="generate-hint">
<span class="hint-icon">⚠️</span>
<span>请先生成配音并通过时长校验</span>
</div>
</div>
</div>
<!-- 按钮组 -->
<div class="action-buttons">
<a-button
type="primary"
size="large"
:disabled="!canGenerate"
block
@click="generateDigitalHuman"
>
生成数字人视频
</a-button>
<!-- 添加提示信息 -->
<div v-if="canGenerate && !audioState.validationPassed" class="generate-hint">
<span class="hint-icon">⚠️</span>
<span>请先生成配音并通过时长校验</span>
</div>
</div>
<!-- 右侧结果 -->
<ResultPanel @videoLoaded="handleVideoLoaded" />
</div>
<!-- 右侧结果 -->
<ResultPanel @videoLoaded="handleVideoLoaded" />
<!-- 视频选择器弹窗 -->
<VideoSelector v-model:open="videoState.selectorVisible" @select="handleVideoSelect" />
</div>
<!-- 视频选择器弹窗 -->
<VideoSelector v-model:open="videoState.selectorVisible" @select="handleVideoSelect" />
</div>
</FullWidthLayout>
</template>
<script setup lang="ts">
@@ -292,6 +294,7 @@ import { useVoiceCopyStore } from '@/stores/voiceCopy'
import VideoSelector from '@/components/VideoSelector.vue'
import VoiceSelector from '@/components/VoiceSelector.vue'
import ResultPanel from '@/components/ResultPanel.vue'
import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
// Controller Hook
import { useIdentifyFaceController } from './hooks/useIdentifyFaceController'
@@ -363,34 +366,33 @@ onMounted(async () => {
<style scoped lang="less">
// ========== 公共变量 ==========
@primary-color: var(--color-blue-500);
@primary-bg-10: rgba(59, 130, 246, 0.1);
@primary-bg-15: rgba(59, 130, 246, 0.15);
@primary-bg-20: rgba(59, 130, 246, 0.2);
@primary-bg-30: rgba(59, 130, 246, 0.3);
@primary-bg-50: rgba(59, 130, 246, 0.5);
@primary-color: var(--primary-color, #1677ff);
@primary-bg-10: rgba(22, 119, 255, 0.1);
@primary-bg-15: rgba(22, 119, 255, 0.15);
@primary-bg-20: rgba(22, 119, 255, 0.2);
@primary-bg-30: rgba(22, 119, 255, 0.3);
@primary-bg-50: rgba(22, 119, 255, 0.5);
@success-color: var(--color-green-500);
@error-color: var(--color-red-500);
@warning-color: var(--color-yellow-500);
@surface-bg: var(--color-surface);
@surface-bg-25: var(--color-surface);
@surface-bg-30: var(--color-surface);
@text-primary: var(--color-text);
@text-secondary: var(--color-text-secondary);
@panel-bg: var(--color-surface);
@surface-bg: var(--bg-primary);
@surface-bg-25: var(--bg-primary);
@surface-bg-30: var(--bg-secondary);
@text-primary: var(--text-primary);
@text-secondary: var(--text-secondary);
@panel-bg: var(--bg-primary);
/* ========== 页面布局 ========== */
.kling-page { padding: 24px; min-height: 100vh; }
.kling-page { padding: 0; }
.kling-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 0 auto;
}
.upload-panel,
.result-panel {
background: @panel-bg;
border-radius: 16px;
border-radius: 12px;
padding: 24px;
}
@@ -401,7 +403,8 @@ onMounted(async () => {
.audio-info h4 {
color: @text-primary;
margin-bottom: 12px;
font-size: 18px;
font-size: 16px;
font-weight: 600;
}
.section h3 { margin-bottom: 12px; }
.card-content h4, .audio-info h4 { margin-bottom: 12px; font-size: 14px; }
@@ -410,9 +413,8 @@ onMounted(async () => {
/* ========== 表单控件 ========== */
.tts-textarea {
background: @surface-bg-30;
border: 1px solid @primary-bg-20;
border-radius: 8px;
background: var(--bg-primary);
border-radius: 6px;
padding: 12px;
color: @text-primary;
}
@@ -423,8 +425,8 @@ onMounted(async () => {
gap: 6px;
margin-top: 8px;
padding: 8px 12px;
background: @primary-bg-10;
border: 1px solid @primary-bg-20;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: 6px;
font-size: 13px;
color: @text-secondary;
@@ -440,10 +442,10 @@ onMounted(async () => {
margin-bottom: 8px;
}
.slider-card {
border: 1px solid @primary-bg-20;
border-radius: 12px;
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 10px 12px;
background: @surface-bg-25;
background: var(--bg-primary);
}
.slider-info {
display: flex;
@@ -460,9 +462,9 @@ onMounted(async () => {
}
.reset-btn {
padding: 4px 12px;
border: 1px solid #d9d9d9;
background: #ffffff;
color: #000000;
border: 1px solid var(--border-light);
background: var(--bg-primary);
color: @text-primary;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
@@ -480,31 +482,29 @@ onMounted(async () => {
align-items: center;
gap: 16px;
padding: 20px;
border: 2px dashed @primary-bg-30;
border-radius: 12px;
background: @surface-bg;
border: 1px solid var(--border-light);
border-radius: 8px;
background: var(--bg-primary);
cursor: pointer;
transition: all 0.3s;
}
.video-option-card:hover {
border-color: @primary-bg-50;
background: @primary-bg-10;
border-color: @primary-color;
background: var(--bg-secondary);
}
.video-option-card.selected {
border-color: @primary-color;
background: @primary-bg-10;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.card-icon {
font-size: 32px;
font-size: 24px;
color: @primary-color;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
width: 40px;
height: 40px;
background: @primary-bg-10;
border-radius: 50%;
border-radius: 8px;
}
/* ========== 视频预览 ========== */
@@ -513,8 +513,8 @@ onMounted(async () => {
align-items: center;
gap: 12px;
padding: 12px;
background: @surface-bg-30;
border: 1px solid @primary-bg-20;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: 8px;
margin-bottom: 16px;
}
@@ -569,8 +569,8 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed @primary-bg-30;
border-radius: 12px;
border: 2px dashed var(--border-light);
border-radius: 8px;
}
.upload-placeholder {
text-align: center;
@@ -591,9 +591,9 @@ onMounted(async () => {
/* ========== 验证结果 ========== */
.validation-result {
padding: 16px;
background: @surface-bg;
background: var(--bg-primary);
border-radius: 8px;
border: 1px solid @primary-bg-20;
border: 1px solid var(--border-light);
}
.validation-result.validation-passed {
border-color: rgba(82, 196, 26, 0.3);
@@ -638,7 +638,6 @@ onMounted(async () => {
}
.progress-fill {
height: 100%;
transition: width 0.3s;
border-radius: 4px;
}
.audio-bar .progress-fill {
@@ -654,8 +653,8 @@ onMounted(async () => {
/* ========== 错误提示 ========== */
.validation-error {
padding: 12px;
background: rgba(255, 77, 79, 0.1);
border: 1px solid rgba(255, 77, 79, 0.3);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: 6px;
}
.error-message {
@@ -669,14 +668,14 @@ onMounted(async () => {
.audio-generation-section {
margin-bottom: 24px;
padding: 16px;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border: 1px solid @primary-bg-15;
background: var(--bg-secondary);
border-radius: 8px;
border: 1px solid var(--border-light);
}
.generate-audio-row { margin-bottom: 16px; }
.audio-preview {
padding: 16px;
background: @surface-bg;
background: var(--bg-primary);
border-radius: 8px;
}
.duration-info {