sionrui/frontend/app/web-gold/src/views/kling/IdentifyFace.vue

<template>
  <FullWidthLayout :show-padding="false">
    <div class="digital-human-page">
      <!-- 左侧配置区 -->
      <section class="config-panel">

        <!-- 步骤1：输入文案 -->
        <div class="config-card">
          <div class="step-indicator">1</div>
          <h3 class="card-title">输入播文案</h3>

          <a-textarea
            v-model:value="store.text"
            :placeholder="placeholder"
            :rows="4"
            :maxlength="4000"
            :show-count="true"
            class="text-input"
            :bordered="false"
          />

          <div class="input-meta">
            <span>当前字数：{{ store.text?.length || 0 }}字</span>
          </div>
        </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="store.text"
                :speech-rate="store.speechRate"
                @select="store.setVoice"
              />
            </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': store.videoSource === 'upload' }"
              @click="store.selectUploadMode"
            >
              <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': store.videoSource === 'select' }"
              @click="store.selectLibraryMode"
            >
              <div class="video-option-icon">
                <PictureOutlined />
              </div>
              <div class="video-option-content">
                <h4>从素材库选择</h4>
                <p>选择已上传的视频</p>
              </div>
            </div>
          </div>

          <!-- 已选择视频预览 -->
          <div v-if="store.selectedVideo" class="selected-video">
            <div class="video-preview-thumb">
              <img
                :src="getVideoPreviewUrl(store.selectedVideo)"
                :alt="store.selectedVideo.fileName"
              />
            </div>
            <div class="video-preview-info">
              <div class="video-name">{{ store.selectedVideo.fileName }}</div>
              <div class="video-meta">{{ formatDuration(store.selectedVideo.duration) }}</div>
            </div>
            <button class="change-video-btn" @click="store.reset">更换</button>
          </div>

          <!-- 上传区域 -->
          <div
            v-if="store.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="handleFileSelect" />

            <div v-if="!store.videoPreviewUrl" 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="store.videoPreviewUrl"
                controls
                playsinline
                preload="metadata"
                class="preview-video-player"
              ></video>
              <p class="upload-filename">{{ store.videoFile?.name }}</p>
              <button class="change-video-btn" @click="store.reset">更换</button>
            </div>
          </div>
        </div>

        <!-- 进度显示 -->
        <div v-if="store.isBusy || store.isFailed || store.isDone" class="progress-card">
          <div class="progress-header">
            <span class="progress-label">{{ store.stepLabel }}</span>
            <span class="progress-percent">{{ store.progress }}%</span>
          </div>
          <a-progress :percent="store.progress" :status="progressStatus" :show-info="false" />

          <div v-if="store.isFailed" class="error-actions">
            <span class="error-text">{{ store.error }}</span>
            <a-button size="small" @click="store.retry">重试</a-button>
          </div>

          <div v-if="store.isDone" class="success-actions">
            <span class="success-text">任务已提交成功</span>
            <a-button size="small" @click="store.reset">重新生成</a-button>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-section">
          <a-button
            v-if="!store.isDone"
            type="primary"
            size="large"
            :disabled="!store.canGenerate"
            :loading="store.isBusy"
            block
            @click="store.generate"
            class="action-btn"
          >
            {{ store.isBusy ? store.stepLabel + '...' : '生成数字人视频' }}
          </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">{{ estimatedPoints }} 积分</span>
            </div>
            <div class="meta-row">
              <span class="meta-label">当前余额</span>
              <span class="meta-value">{{ userStore.remainingPoints.toLocaleString() }} 积分</span>
            </div>
          </div>
        </div>
      </aside>

    </div>

    <!-- 视频选择器弹窗 -->
    <VideoSelector
      v-model:open="store.videoSelectorVisible"
      @select="store.selectVideo"
    />
  </FullWidthLayout>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { CloudUploadOutlined, CrownFilled, PictureOutlined } from '@ant-design/icons-vue'
import { useVoiceCopyStore } from '@/stores/voiceCopy'
import { useUserStore } from '@/stores/user'
import { usePointsConfigStore } from '@/stores/pointsConfig'
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'
import { useDigitalHumanStore } from './stores/useDigitalHumanStore'

// ==================== Store ====================
const store = useDigitalHumanStore()
const voiceStore = useVoiceCopyStore()
const userStore = useUserStore()
const pointsConfigStore = usePointsConfigStore()

// ==================== 本地状态 ====================
const dragOver = ref(false)
const fileInput = ref<HTMLInputElement | null>(null)

// ==================== 计算属性 ====================
const placeholder = computed(() => {
  if (store.faceDurationMs > 0) {
    const maxChars = Math.floor(store.faceDurationMs / 1000 * 4)
    return `请输入文案，建议不超过${maxChars}字以确保与视频匹配`
  }
  return '请输入你想让角色说话的内容'
})

const progressStatus = computed(() => {
  if (store.isFailed) return 'exception'
  if (store.isDone) return 'success'
  return 'active'
})

// 预计消耗积分（从配置获取 kling 模型积分）
const estimatedPoints = computed(() => {
  const points = pointsConfigStore.getConsumePoints('kling')
  return points ?? 150 // 默认 150 积分
})

// ==================== 方法 ====================
function triggerFileSelect() {
  fileInput.value?.click()
}

function handleFileSelect(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0]
  if (file) store.handleFileUpload(file)
}

function handleDrop(e: DragEvent) {
  dragOver.value = false
  const file = e.dataTransfer?.files[0]
  if (file) store.handleFileUpload(file)
}

function handleVideoLoaded(_url: string) {
  // 可用于更新预览
}

function formatDuration(seconds: number): string {
  if (!seconds) return '--:--'
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
}

function getVideoPreviewUrl(video: any): string {
  if (video.coverBase64) {
    return video.coverBase64.startsWith('data:')
      ? video.coverBase64
      : `data:image/jpeg;base64,${video.coverBase64}`
  }
  return video.previewUrl || video.coverUrl || ''
}

// ==================== 生命周期 ====================
onMounted(async () => {
  await Promise.all([
    voiceStore.refresh(),
    userStore.fetchUserProfile(),
    pointsConfigStore.loadConfig()
  ])
})
</script>

<style scoped lang="less">
.digital-human-page {
  min-height: 100vh;
  background: #F8FAFC;
  display: flex;
  flex-direction: row;
  gap: 24px;
  padding: 24px;
}

.config-panel {
  flex: 1;
  padding: 0 20px;
  max-width: 100%;
}

.preview-panel {
  width: 400px;
  background: #fff;
  border-left: 1px solid #E2E8F0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  @media (max-width: 1200px) {
    width: 100%;
    border-left: none;
    border-top: 1px solid #E2E8F0;
    order: -1;
  }
}

.config-card {
  position: relative;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  overflow: hidden;
}

.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;
    }
  }
}

.input-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #94A3B8;
  margin-top: 12px;
}

.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);
  }
}

.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: 14px 16px;
  border: 2px dashed #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    border-color: #3B82F6;
    background: #EFF6FF;
  }

  &--selected {
    border-style: solid;
    border-color: #2563EB;
    background: #EFF6FF;
  }
}

.video-option-icon {
  font-size: 20px;
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 6px;
  flex-shrink: 0;
}

.video-option-content {
  flex: 1;

  h4 {
    font-size: 13px;
    font-weight: 500;
    color: #1E293B;
    margin: 0 0 4px 0;
  }

  p {
    font-size: 11px;
    color: #94A3B8;
    margin: 0;
  }
}

.selected-video {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #F1F5F9;
  border-radius: 8px;
}

.video-preview-thumb {
  width: 70px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: #1E293B;
  flex-shrink: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.video-preview-info {
  flex: 1;
  min-width: 0;
}

.video-name {
  font-size: 13px;
  font-weight: 500;
  color: #1E293B;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-meta {
  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: #3B82F6;
  }
}

.upload-zone {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
  transition: all 0.2s ease;

  &--dragover {
    border-color: #3B82F6;
    background: #EFF6FF;
  }
}

.file-input {
  display: none;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.upload-icon {
  font-size: 28px;
  color: #94A3B8;
}

.upload-text {
  font-size: 13px;
  font-weight: 500;
  color: #1E293B;
}

.upload-hint {
  font-size: 11px;
  color: #94A3B8;
}

.select-file-btn {
  margin-top: 12px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #3B82F6;
  border: 1px solid #3B82F6;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(59, 130, 246, 0.1);
  }
}

.upload-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.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;
}

// 进度卡片
.progress-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 14px;
  font-weight: 500;
  color: #1E293B;
}

.progress-percent {
  font-size: 14px;
  color: #64748B;
}

.error-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #FEE2E2;
}

.error-text {
  font-size: 13px;
  color: #DC2626;
}

.success-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #86EFAC;
}

.success-text {
  font-size: 13px;
  color: #166534;
}

// 操作按钮
.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, #3B82F6 0%, #2563EB 100%);
    border: none;

    &:hover:not(:disabled) {
      box-shadow: 0 4px 12px rgba(59, 130, 246, 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-value {
  font-weight: 600;
  color: #1E293B;
}

// 响应式
@media (max-width: 1024px) {
  .digital-human-page {
    flex-direction: column;
  }

  .config-panel {
    max-width: 100%;
    padding: 16px;
  }

  .preview-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid #E2E8F0;
    order: -1;
    padding: 16px;
  }

  .preview-card {
    position: static;
  }

  .preview-screen {
    min-height: 200px;
  }
}
</style>