From f36fc5630cb6f06d9908f0a4c17a445075b4d4a2 Mon Sep 17 00:00:00 2001
From: ZLI263 <zhonghua.li.2@volvocars.com>
Date: Mon, 6 Oct 2025 12:19:03 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=B3=E9=A2=91=E5=90=88=E6=88=90=EF=BC=8C?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=90=88=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/audio-statistics.js                   |  17 +
 src/api/face-detect.js                        |  57 ++
 src/api/video-synthesis.js                    |  35 +
 src/router/index.js                           |  15 +
 src/store/getters.js                          |   1 +
 src/store/modules/user.js                     |  13 +-
 .../audio-statistics/audio-generation.vue     | 456 ++++++++++++-
 src/views/audio-statistics/index.vue          |  64 +-
 src/views/customer/index.vue                  |   4 +-
 src/views/dashboard/data-dashboard.vue        |  62 +-
 src/views/device/index.vue                    |   4 +-
 src/views/knowledge/dialogue-mining.vue       |  26 +-
 src/views/knowledge/index.vue                 |  12 +-
 src/views/knowledge/knowledge-base.vue        |  44 +-
 src/views/knowledge/terminology.vue           |  46 +-
 src/views/video/face-detect-new.vue           | 631 ++++++++++++++++++
 src/views/video/face-detect.vue               | 631 ++++++++++++++++++
 src/views/video/video-synthesis.vue           | 451 +++++++++++++
 18 files changed, 2414 insertions(+), 155 deletions(-)
 create mode 100644 src/api/face-detect.js
 create mode 100644 src/api/video-synthesis.js
 create mode 100644 src/views/video/face-detect-new.vue
 create mode 100644 src/views/video/face-detect.vue
 create mode 100644 src/views/video/video-synthesis.vue

diff --git a/src/api/audio-statistics.js b/src/api/audio-statistics.js
index 82d06c7..bea82c3 100644
--- a/src/api/audio-statistics.js
+++ b/src/api/audio-statistics.js
@@ -63,3 +63,20 @@ export function getTtsRequestLogs(params) {
     params
   })
 }
+
+// TTS音频生成接口
+export function generateTtsAudio(data) {
+  return request({
+    url: '/tts/speech',
+    method: 'post',
+    data
+  })
+}
+
+// 生成临时访问URL接口
+export function generateTempUrl(fileName, expiresInSeconds = 603800) {
+  return request({
+    url: `/minio/temp-url/${fileName}/${expiresInSeconds}`,
+    method: 'get'
+  })
+}
diff --git a/src/api/face-detect.js b/src/api/face-detect.js
new file mode 100644
index 0000000..002d751
--- /dev/null
+++ b/src/api/face-detect.js
@@ -0,0 +1,57 @@
+import request from '@/utils/request'
+
+/**
+ * 人脸检测相关API
+ */
+
+/**
+ * 获取人脸检测列表
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function getFaceDetectList(params) {
+  return request({
+    url: '/face-detect/logs',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 检测图片中的人脸信息
+ * @param {String} imageUrl 图片URL
+ * @returns {Promise}
+ */
+export function detectFace(imageUrl) {
+  return request({
+    url: '/face-detect/detect',
+    method: 'post',
+    params: {
+      imageUrl
+    }
+  })
+}
+
+/**
+ * 删除人脸检测记录
+ * @param {String|Number} id 记录ID
+ * @returns {Promise}
+ */
+export function deleteFaceDetect(id) {
+  return request({
+    url: `/face-detect/${id}`,
+    method: 'delete'
+  })
+}
+
+/**
+ * 获取人脸检测详情
+ * @param {String|Number} id 记录ID
+ * @returns {Promise}
+ */
+export function getFaceDetectDetail(id) {
+  return request({
+    url: `/face-detect/${id}`,
+    method: 'get'
+  })
+}
diff --git a/src/api/video-synthesis.js b/src/api/video-synthesis.js
new file mode 100644
index 0000000..9518480
--- /dev/null
+++ b/src/api/video-synthesis.js
@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+// 获取视频合成列表
+export function getVideoSynthesisList(query) {
+  return request({
+    url: '/video-synthesis/synthesize',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除视频合成记录
+export function deleteVideoSynthesis(id) {
+  return request({
+    url: `/video-synthesis/synthesize/${id}`,
+    method: 'delete'
+  })
+}
+
+// 合成视频
+export function createVideoSynthesis(data) {
+  return request({
+    url: '/video-synthesis/synthesize',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询视频合成状态
+export function getVideoSynthesisStatus(taskId) {
+  return request({
+    url: `/video-synthesis/synthesize/status/${taskId}`,
+    method: 'get'
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 35b4bc8..8cfbed2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -220,12 +220,27 @@ export const constantRoutes = [
   {
     path: '/video',
     component: Layout,
+    redirect: '/video/index',
+    name: 'VideoRoot',
+    meta: { title: '视频管理', icon: 'el-icon-video-camera' },
     children: [
       {
         path: 'index',
         name: 'Video',
         component: () => import('@/views/video/index'),
         meta: { title: '视频管理', icon: 'el-icon-video-camera' }
+      },
+      {
+        path: 'face-detect',
+        name: 'FaceDetect',
+        component: () => import('@/views/video/face-detect'),
+        meta: { title: '头像检测', icon: 'el-icon-user-solid' }
+      },
+      {
+        path: 'video-synthesis',
+        name: 'VideoSynthesis',
+        component: () => import('@/views/video/video-synthesis'),
+        meta: { title: '视频合成', icon: 'el-icon-video-camera-solid' }
       }
     ]
   },
diff --git a/src/store/getters.js b/src/store/getters.js
index 009ddbc..8fb9d64 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -4,6 +4,7 @@ const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
+  phone: state => state.user.phone,
   permission_routes: state => state.permission.routes,
   cachedViews: state => state.tagsView.cachedViews,
   visitedViews: state => state.tagsView.visitedViews
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 9780877..781f726 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -6,7 +6,8 @@ const getDefaultState = () => {
   return {
     token: getToken(),
     name: '',
-    avatar: ''
+    avatar: '',
+    phone: ''
   }
 }
 
@@ -24,6 +25,9 @@ const mutations = {
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
+  },
+  SET_PHONE: (state, phone) => {
+    state.phone = phone
   }
 }
 
@@ -53,10 +57,13 @@ const actions = {
           return reject('Verification failed, please Login again.')
         }
         console.log('getInfo  0812  ：', data)
-        const { name, avatar } = data
+        const { userName, avatar, phone } = data
+        console.log('getInfo  userName  0812  ：', userName)
         console.log('getInfo  avatar  0812  ：', avatar)
-        commit('SET_NAME', name)
+        console.log('getInfo  phone  0812  ：', phone)
+        commit('SET_NAME', userName)
         commit('SET_AVATAR', avatar)
+        commit('SET_PHONE', phone || '')
         resolve(data)
       }).catch(error => {
         reject(error)
diff --git a/src/views/audio-statistics/audio-generation.vue b/src/views/audio-statistics/audio-generation.vue
index 8b9bbdf..4878c60 100644
--- a/src/views/audio-statistics/audio-generation.vue
+++ b/src/views/audio-statistics/audio-generation.vue
@@ -66,6 +66,10 @@
       <div slot="header">
         <span>TTS请求日志列表</span>
         <div style="float: right;">
+          <el-button type="success" size="small" @click="handleOpenGenerateDialog">
+            <i class="el-icon-plus" />
+            音频生成
+          </el-button>
           <el-button type="primary" size="small" @click="handleRefresh">
             <i class="el-icon-refresh" />
             刷新
@@ -92,6 +96,9 @@
             </el-tag>
           </template>
         </el-table-column>
+        <el-table-column prop="audioName" label="音频名称" width="150" show-overflow-tooltip />
+        <el-table-column prop="creatorName" label="创建人姓名" width="120" show-overflow-tooltip />
+        <el-table-column prop="creatorPhone" label="创建人电话" width="130" show-overflow-tooltip />
         <el-table-column prop="model" label="模型" width="200" show-overflow-tooltip />
         <el-table-column prop="voice" label="声音" width="150" show-overflow-tooltip />
         <el-table-column prop="inputText" label="输入文本" min-width="200" show-overflow-tooltip />
@@ -105,26 +112,30 @@
             {{ scope.row.duration ? scope.row.duration.toFixed(2) : '-' }}
           </template>
         </el-table-column>
-        <el-table-column prop="minioUrl" label="音频文件" width="120">
-          <template slot-scope="scope">
-            <el-button
-              v-if="scope.row.minioUrl"
-              type="text"
-              size="small"
-              @click="handlePlayAudio(scope.row.minioUrl)"
-            >
-              播放
-            </el-button>
-            <span v-else>-</span>
-          </template>
-        </el-table-column>
         <el-table-column prop="processingTimeMs" label="处理时间(ms)" width="120" />
-        <el-table-column prop="createTime" label="创建时间" width="160" sortable="custom" />
-        <el-table-column label="操作" width="120" fixed="right">
+        <el-table-column prop="updateTime" label="修改时间" width="160" sortable="custom" />
+        <el-table-column label="操作" width="200" fixed="right">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="handleViewDetail(scope.row)">
               详情
             </el-button>
+            <el-button
+              v-if="scope.row.shortUrl"
+              type="text"
+              size="small"
+              @click="handlePlayAudio(scope.row.shortUrl)"
+            >
+              播放
+            </el-button>
+            <el-button
+              v-if="scope.row.status === 'SUCCESS' && scope.row.audioName"
+              type="text"
+              size="small"
+              :loading="scope.row.generatingPlay"
+              @click="handleGeneratePlay(scope.row)"
+            >
+              生成播放
+            </el-button>
             <el-button
               v-if="scope.row.status === 'FAILED'"
               type="text"
@@ -165,12 +176,15 @@
             {{ getStatusText(currentRow.status) }}
           </el-tag>
         </el-descriptions-item>
+        <el-descriptions-item label="创建人姓名">{{ currentRow.creatorName || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="创建人电话">{{ currentRow.creatorPhone || '-' }}</el-descriptions-item>
         <el-descriptions-item label="模型">{{ currentRow.model }}</el-descriptions-item>
         <el-descriptions-item label="声音">{{ currentRow.voice }}</el-descriptions-item>
+        <el-descriptions-item label="音频名称">{{ currentRow.audioName || '-' }}</el-descriptions-item>
         <el-descriptions-item label="文件大小">{{ formatFileSize(currentRow.audioSizeBytes) }}</el-descriptions-item>
         <el-descriptions-item label="时长">{{ currentRow.duration ? currentRow.duration.toFixed(2) + '秒' : '-' }}</el-descriptions-item>
         <el-descriptions-item label="处理时间">{{ currentRow.processingTimeMs }}ms</el-descriptions-item>
-        <el-descriptions-item label="创建时间">{{ currentRow.createTime }}</el-descriptions-item>
+        <el-descriptions-item label="修改时间">{{ currentRow.updateTime }}</el-descriptions-item>
         <el-descriptions-item :span="2" label="输入文本">
           <div style="max-height: 100px; overflow-y: auto;">
             {{ currentRow.inputText }}
@@ -184,19 +198,192 @@
       <div slot="footer" class="dialog-footer">
         <el-button @click="detailDialogVisible = false">关闭</el-button>
         <el-button
-          v-if="currentRow.minioUrl"
+          v-if="currentRow.shortUrl"
           type="primary"
-          @click="handlePlayAudio(currentRow.minioUrl)"
+          @click="handlePlayAudio(currentRow.shortUrl)"
         >
           播放音频
         </el-button>
       </div>
     </el-dialog>
+
+    <!-- 音频生成对话框 -->
+    <el-dialog
+      title="音频生成"
+      :visible.sync="generateDialogVisible"
+      width="720px"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="generateForm"
+        :model="generateForm"
+        :rules="generateFormRules"
+        label-width="120px"
+      >
+        <el-form-item label="创建人姓名" prop="creatorName">
+          <el-input
+            v-model="generateForm.creatorName"
+            placeholder="请输入创建人姓名"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="创建人电话" prop="creatorPhone">
+          <el-input
+            v-model="generateForm.creatorPhone"
+            placeholder="请输入创建人电话"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="模型" prop="model">
+          <el-select
+            v-model="generateForm.model"
+            placeholder="请选择模型"
+            style="width: 100%"
+            clearable
+            @change="handleModelChange"
+          >
+            <el-option
+              v-for="model in modelOptions"
+              :key="model.value"
+              :label="model.label"
+              :value="model.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="音色" prop="voice">
+          <el-select
+            v-model="generateForm.voice"
+            placeholder="请选择音色"
+            style="width: 100%"
+            clearable
+          >
+            <el-option
+              v-for="voice in voiceOptions"
+              :key="voice.value"
+              :label="voice.label"
+              :value="voice.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="音频名称" prop="audioName">
+          <el-input
+            v-model="generateForm.audioName"
+            placeholder="请输入音频名称"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="待生成文本" prop="inputText">
+          <el-input
+            v-model="generateForm.inputText"
+            type="textarea"
+            :rows="8"
+            placeholder="请输入要转换为语音的文本"
+            maxlength="1000"
+            show-word-limit
+          />
+        </el-form-item>
+
+        <!-- 可选参数 -->
+        <el-divider content-position="left">可选参数</el-divider>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="语速" prop="speed">
+              <el-input-number
+                v-model="generateForm.speed"
+                :min="0.1"
+                :max="3.0"
+                :step="0.1"
+                :precision="1"
+                placeholder="1.0"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="音调" prop="pitch">
+              <el-input-number
+                v-model="generateForm.pitch"
+                :min="0.1"
+                :max="2.0"
+                :step="0.1"
+                :precision="1"
+                placeholder="1.0"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="音量" prop="volume">
+              <el-input-number
+                v-model="generateForm.volume"
+                :min="0.1"
+                :max="2.0"
+                :step="0.1"
+                :precision="1"
+                placeholder="1.0"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="输出格式" prop="format">
+              <el-select
+                v-model="generateForm.format"
+                placeholder="请选择输出格式"
+                style="width: 100%"
+                clearable
+              >
+                <el-option label="MP3" value="mp3" />
+                <el-option label="WAV" value="wav" />
+                <el-option label="PCM" value="pcm" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="采样率" prop="sampleRate">
+              <el-select
+                v-model="generateForm.sampleRate"
+                placeholder="请选择采样率"
+                style="width: 100%"
+                clearable
+              >
+                <el-option label="8000Hz" :value="8000" />
+                <el-option label="16000Hz" :value="16000" />
+                <el-option label="22050Hz" :value="22050" />
+                <el-option label="44100Hz" :value="44100" />
+                <el-option label="48000Hz" :value="48000" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCloseGenerateDialog">取消</el-button>
+        <el-button
+          type="primary"
+          :loading="generateLoading"
+          @click="handleConfirmGenerate"
+        >
+          确认生成
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getTtsRequestLogs } from '@/api/audio-statistics'
+import { getTtsRequestLogs, generateTtsAudio, generateTempUrl } from '@/api/audio-statistics'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'AudioGeneration',
@@ -220,9 +407,71 @@ export default {
       sortField: '',
       sortOrder: '',
       detailDialogVisible: false,
-      currentRow: {}
+      currentRow: {},
+      // 音频生成对话框相关
+      generateDialogVisible: false,
+      generateLoading: false,
+      generateForm: {
+        creatorName: '',
+        creatorPhone: '',
+        model: '',
+        voice: '',
+        audioName: '',
+        inputText: '',
+        speed: 1.0,
+        pitch: null,
+        volume: null,
+        format: '',
+        sampleRate: null
+      },
+      generateFormRules: {
+        creatorName: [
+          { required: true, message: '请输入创建人姓名', trigger: 'blur' }
+        ],
+        creatorPhone: [
+          { required: true, message: '请输入创建人电话', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+        ],
+        model: [
+          { required: true, message: '请选择模型', trigger: 'change' }
+        ],
+        voice: [
+          { required: true, message: '请选择音色', trigger: 'change' }
+        ],
+        inputText: [
+          { required: true, message: '请输入待生成文本', trigger: 'blur' },
+          { min: 1, max: 1000, message: '文本长度在 1 到 1000 个字符', trigger: 'blur' }
+        ]
+      },
+      // 模型选项
+      modelOptions: [
+        { label: 'FunAudioLLM/CosyVoice2-0.5B', value: 'FunAudioLLM/CosyVoice2-0.5B' },
+        { label: 'fnlp/MOSS-TTSD-v0.5', value: 'fnlp/MOSS-TTSD-v0.5' }
+      ],
+      // 音色选项 - 根据模型动态变化
+      voiceOptions: [],
+      // 所有音色选项
+      allVoiceOptions: {
+        'fnlp/MOSS-TTSD-v0.5': [
+          { label: 'alex', value: 'fnlp/MOSS-TTSD-v0.5:alex' },
+          { label: 'anna', value: 'fnlp/MOSS-TTSD-v0.5:anna' },
+          { label: 'bella', value: 'fnlp/MOSS-TTSD-v0.5:bella' },
+          { label: 'benjamin', value: 'fnlp/MOSS-TTSD-v0.5:benjamin' },
+          { label: 'charles', value: 'fnlp/MOSS-TTSD-v0.5:charles' },
+          { label: 'claire', value: 'fnlp/MOSS-TTSD-v0.5:claire' },
+          { label: 'david', value: 'fnlp/MOSS-TTSD-v0.5:david' },
+          { label: 'diana', value: 'fnlp/MOSS-TTSD-v0.5:diana' }
+        ],
+        'FunAudioLLM/CosyVoice2-0.5B': [
+          { label: 'longgaoseng', value: 'FunAudioLLM/CosyVoice2-0.5B:longgaoseng' },
+          { label: 'claire', value: 'FunAudioLLM/CosyVoice2-0.5B:claire' }
+        ]
+      }
     }
   },
+  computed: {
+    ...mapGetters(['name', 'avatar', 'phone'])
+  },
   created() {
     this.fetchData()
   },
@@ -360,6 +609,173 @@ export default {
       const sizes = ['B', 'KB', 'MB', 'GB']
       const i = Math.floor(Math.log(bytes) / Math.log(1024))
       return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i]
+    },
+
+    // 打开音频生成对话框
+    handleOpenGenerateDialog() {
+      this.generateDialogVisible = true
+      // 先重置表单，然后设置默认的用户信息
+      this.resetGenerateForm()
+      // 初始化音色选项为空
+      this.voiceOptions = []
+      // 设置默认的用户信息
+      this.$nextTick(() => {
+        console.log('当前用户信息:', {
+          name: this.name,
+          phone: this.phone,
+          storeName: this.$store.getters.name,
+          storePhone: this.$store.getters.phone
+        })
+        // 确保用户信息存在时才设置
+        if (this.name) {
+          this.generateForm.creatorName = this.name
+          console.log('设置创建人姓名:', this.name)
+        } else {
+          console.log('用户姓名为空，尝试从store直接获取')
+          const storeName = this.$store.getters.name
+          if (storeName) {
+            this.generateForm.creatorName = storeName
+            console.log('从store设置创建人姓名:', storeName)
+          }
+        }
+        if (this.phone) {
+          this.generateForm.creatorPhone = this.phone
+          console.log('设置创建人电话:', this.phone)
+        } else {
+          console.log('用户电话为空，尝试从store直接获取')
+          const storePhone = this.$store.getters.phone
+          if (storePhone) {
+            this.generateForm.creatorPhone = storePhone
+            console.log('从store设置创建人电话:', storePhone)
+          }
+        }
+        console.log('设置后的表单数据:', this.generateForm)
+      })
+    },
+
+    // 关闭音频生成对话框
+    handleCloseGenerateDialog() {
+      this.generateDialogVisible = false
+      this.resetGenerateForm()
+    },
+
+    // 重置生成表单
+    resetGenerateForm() {
+      this.generateForm = {
+        creatorName: '',
+        creatorPhone: '',
+        model: '',
+        voice: '',
+        audioName: '',
+        inputText: '',
+        speed: 1.0,
+        pitch: null,
+        volume: null,
+        format: '',
+        sampleRate: null
+      }
+      if (this.$refs.generateForm) {
+        this.$refs.generateForm.clearValidate()
+      }
+    },
+
+    // 处理模型选择变化
+    handleModelChange(modelValue) {
+      console.log('模型选择变化:', modelValue)
+      // 清空音色选择
+      this.generateForm.voice = ''
+      // 根据选择的模型更新音色选项
+      if (modelValue && this.allVoiceOptions[modelValue]) {
+        this.voiceOptions = this.allVoiceOptions[modelValue]
+      } else {
+        this.voiceOptions = []
+      }
+      console.log('更新后的音色选项:', this.voiceOptions)
+    },
+
+    // 生成播放链接
+    async handleGeneratePlay(row) {
+      // 使用audioName字段作为文件名
+      const fileName = row.audioName
+
+      if (!fileName) {
+        this.$message.error('音频文件名不存在，无法生成播放链接')
+        return
+      }
+
+      // 设置加载状态
+      this.$set(row, 'generatingPlay', true)
+
+      try {
+        // 设置过期时间为7天（604800秒）
+        const expiresInSeconds = 604800
+        const response = await generateTempUrl(fileName, expiresInSeconds)
+
+        if (response && response.success && response.tempUrl) {
+          // 更新行的shortUrl
+          this.$set(row, 'shortUrl', response.tempUrl)
+          this.$message.success(`播放链接生成成功，有效期至：${response.formattedExpiresAt}`)
+
+          // 刷新列表以保存到数据库
+          await this.fetchData()
+        } else {
+          this.$message.error(response.message || '生成播放链接失败')
+        }
+      } catch (error) {
+        console.error('生成播放链接失败:', error)
+        this.$message.error('生成播放链接失败: ' + (error.message || '未知错误'))
+      } finally {
+        // 清除加载状态
+        this.$set(row, 'generatingPlay', false)
+      }
+    },
+
+    // 确认生成音频
+    async handleConfirmGenerate() {
+      this.$refs.generateForm.validate(async(valid) => {
+        if (valid) {
+          this.generateLoading = true
+          try {
+            // 构建API请求参数
+            const requestData = {
+              model: this.generateForm.model,
+              input: this.generateForm.inputText,
+              voice: this.generateForm.voice,
+              audioName: this.generateForm.audioName,
+              speed: this.generateForm.speed || 1.0,
+              pitch: this.generateForm.pitch,
+              volume: this.generateForm.volume,
+              format: this.generateForm.format,
+              sample_rate: this.generateForm.sampleRate,
+              creatorName: this.generateForm.creatorName,
+              creatorPhone: this.generateForm.creatorPhone
+            }
+
+            // 移除空值参数
+            Object.keys(requestData).forEach(key => {
+              if (requestData[key] === null || requestData[key] === '' || requestData[key] === undefined) {
+                delete requestData[key]
+              }
+            })
+
+            console.log('TTS请求参数:', requestData)
+
+            // 调用TTS音频生成API
+            await generateTtsAudio(requestData)
+
+            this.$message.success('音频生成请求已提交，请稍后查看结果')
+            this.handleCloseGenerateDialog()
+            this.fetchData() // 刷新列表
+          } catch (error) {
+            console.error('TTS音频生成失败:', error)
+            this.$message.error('音频生成失败，请重试')
+          } finally {
+            this.generateLoading = false
+          }
+        } else {
+          this.$message.error('请完善表单信息')
+        }
+      })
     }
   }
 }
diff --git a/src/views/audio-statistics/index.vue b/src/views/audio-statistics/index.vue
index 82ea88a..99c5651 100644
--- a/src/views/audio-statistics/index.vue
+++ b/src/views/audio-statistics/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="app-container">
     <h2>门店录音统计管理</h2>
-    
+
     <!-- 操作区域 -->
     <el-card style="margin-bottom: 20px;">
       <div slot="header">操作面板</div>
-      
+
       <el-row :gutter="20">
         <el-col :span="8">
           <el-form>
@@ -20,17 +20,17 @@
               />
             </el-form-item>
             <el-form-item>
-              <el-button 
-                type="primary" 
-                @click="handleGenerateStatistics"
+              <el-button
+                type="primary"
                 :loading="generateLoading"
+                @click="handleGenerateStatistics"
               >
                 生成统计数据
               </el-button>
             </el-form-item>
           </el-form>
         </el-col>
-        
+
         <el-col :span="8">
           <el-form>
             <el-form-item label="开始日期">
@@ -54,24 +54,24 @@
               />
             </el-form-item>
             <el-form-item>
-              <el-button 
-                type="success" 
-                @click="handleQueryByDateRange"
+              <el-button
+                type="success"
                 :loading="dateRangeLoading"
+                @click="handleQueryByDateRange"
               >
                 查询日期范围
               </el-button>
             </el-form-item>
           </el-form>
         </el-col>
-        
+
         <el-col :span="8">
           <el-form>
             <el-form-item label="统计概览">
-              <el-button 
-                type="info" 
-                @click="handleGetOverview"
+              <el-button
+                type="info"
                 :loading="overviewLoading"
+                @click="handleGetOverview"
               >
                 获取最近7天概览
               </el-button>
@@ -85,16 +85,16 @@
     <el-card>
       <div slot="header">
         <span>统计结果</span>
-        <el-button 
-          type="text" 
-          @click="clearData"
+        <el-button
+          type="text"
           :disabled="!tableData.length"
           style="float: right;"
+          @click="clearData"
         >
           清空数据
         </el-button>
       </div>
-      
+
       <el-table
         v-if="tableData.length"
         :data="tableData"
@@ -131,9 +131,9 @@
         </el-table-column>
         <el-table-column prop="statisticsDate" label="统计日期" width="120" />
       </el-table>
-      
-      <el-empty 
-        v-if="!tableData.length" 
+
+      <el-empty
+        v-if="!tableData.length"
         description="暂无数据，请先进行查询操作"
       />
     </el-card>
@@ -159,26 +159,26 @@ export default {
       tableData: []
     }
   },
-  
+
   mounted() {
     const today = new Date().toISOString().split('T')[0]
     this.generateForm.date = today
-    
+
     const endDate = new Date()
     const startDate = new Date()
     startDate.setDate(startDate.getDate() - 7)
-    
+
     this.dateRangeForm.startDate = startDate.toISOString().split('T')[0]
     this.dateRangeForm.endDate = endDate.toISOString().split('T')[0]
   },
-  
+
   methods: {
     async handleGenerateStatistics() {
       if (!this.generateForm.date) {
         this.$message.warning('请选择统计日期')
         return
       }
-      
+
       this.generateLoading = true
       try {
         const response = await generateStatistics(this.generateForm.date)
@@ -193,13 +193,13 @@ export default {
         this.generateLoading = false
       }
     },
-    
+
     async handleQueryByDateRange() {
       if (!this.dateRangeForm.startDate || !this.dateRangeForm.endDate) {
         this.$message.warning('请选择开始和结束日期')
         return
       }
-      
+
       this.dateRangeLoading = true
       try {
         const response = await getStatisticsByDateRange(
@@ -218,7 +218,7 @@ export default {
         this.dateRangeLoading = false
       }
     },
-    
+
     async handleGetOverview() {
       this.overviewLoading = true
       try {
@@ -235,23 +235,23 @@ export default {
         this.overviewLoading = false
       }
     },
-    
+
     clearData() {
       this.tableData = []
       this.$message.success('数据已清空')
     },
-    
+
     formatDuration(seconds) {
       if (!seconds) return '0秒'
       const hours = Math.floor(seconds / 3600)
       const minutes = Math.floor((seconds % 3600) / 60)
       const remainingSeconds = seconds % 60
-      
+
       let result = ''
       if (hours > 0) result += `${hours}小时`
       if (minutes > 0) result += `${minutes}分钟`
       if (remainingSeconds > 0 || result === '') result += `${remainingSeconds}秒`
-      
+
       return result
     }
   }
diff --git a/src/views/customer/index.vue b/src/views/customer/index.vue
index 95aef26..f73623c 100644
--- a/src/views/customer/index.vue
+++ b/src/views/customer/index.vue
@@ -14,8 +14,6 @@
           </el-select>
         </el-form-item>
 
-
-
         <el-form-item label="所属销售">
           <el-select v-model="queryParams.salesId" placeholder="请选择销售" clearable>
             <el-option
@@ -299,7 +297,7 @@
             </div>
           </el-col>
         </el-row>
-        <el-row :gutter="20" v-if="currentCustomer.remark">
+        <el-row v-if="currentCustomer.remark" :gutter="20">
           <el-col :span="24">
             <div class="detail-item">
               <label>备注:</label>
diff --git a/src/views/dashboard/data-dashboard.vue b/src/views/dashboard/data-dashboard.vue
index a2f0a20..b227e35 100644
--- a/src/views/dashboard/data-dashboard.vue
+++ b/src/views/dashboard/data-dashboard.vue
@@ -6,7 +6,7 @@
         <el-card class="statistics-card" shadow="hover">
           <div class="statistics-content">
             <div class="statistics-icon">
-              <i class="el-icon-microphone"></i>
+              <i class="el-icon-microphone" />
             </div>
             <div class="statistics-info">
               <div class="statistics-number">{{ statistics.totalRecordings }}</div>
@@ -15,12 +15,12 @@
           </div>
         </el-card>
       </el-col>
-      
+
       <el-col :span="6">
         <el-card class="statistics-card" shadow="hover">
           <div class="statistics-content">
             <div class="statistics-icon">
-              <i class="el-icon-video-camera"></i>
+              <i class="el-icon-video-camera" />
             </div>
             <div class="statistics-info">
               <div class="statistics-number">{{ statistics.totalVideos }}</div>
@@ -29,12 +29,12 @@
           </div>
         </el-card>
       </el-col>
-      
+
       <el-col :span="6">
         <el-card class="statistics-card" shadow="hover">
           <div class="statistics-content">
             <div class="statistics-icon">
-              <i class="el-icon-s-custom"></i>
+              <i class="el-icon-s-custom" />
             </div>
             <div class="statistics-info">
               <div class="statistics-number">{{ statistics.totalSales }}</div>
@@ -43,12 +43,12 @@
           </div>
         </el-card>
       </el-col>
-      
+
       <el-col :span="6">
         <el-card class="statistics-card" shadow="hover">
           <div class="statistics-content">
             <div class="statistics-icon">
-              <i class="el-icon-user"></i>
+              <i class="el-icon-user" />
             </div>
             <div class="statistics-info">
               <div class="statistics-number">{{ statistics.totalCustomers }}</div>
@@ -67,18 +67,18 @@
             <span>录音统计趋势</span>
           </div>
           <div class="chart-container">
-            <div ref="recordingChart" style="height: 300px;"></div>
+            <div ref="recordingChart" style="height: 300px;" />
           </div>
         </el-card>
       </el-col>
-      
+
       <el-col :span="12">
         <el-card class="chart-card" shadow="never">
           <div slot="header">
             <span>销售业绩分布</span>
           </div>
           <div class="chart-container">
-            <div ref="salesChart" style="height: 300px;"></div>
+            <div ref="salesChart" style="height: 300px;" />
           </div>
         </el-card>
       </el-col>
@@ -91,18 +91,18 @@
             <span>门店录音数量</span>
           </div>
           <div class="chart-container">
-            <div ref="dealershipChart" style="height: 300px;"></div>
+            <div ref="dealershipChart" style="height: 300px;" />
           </div>
         </el-card>
       </el-col>
-      
+
       <el-col :span="12">
         <el-card class="chart-card" shadow="never">
           <div slot="header">
             <span>客户意向分析</span>
           </div>
           <div class="chart-container">
-            <div ref="intentionChart" style="height: 300px;"></div>
+            <div ref="intentionChart" style="height: 300px;" />
           </div>
         </el-card>
       </el-col>
@@ -119,7 +119,7 @@
           <div class="activity-list">
             <div v-for="item in latestRecordings" :key="item.id" class="activity-item">
               <div class="activity-icon">
-                <i class="el-icon-microphone"></i>
+                <i class="el-icon-microphone" />
               </div>
               <div class="activity-content">
                 <div class="activity-title">{{ item.recordingName }}</div>
@@ -132,7 +132,7 @@
           </div>
         </el-card>
       </el-col>
-      
+
       <el-col :span="12">
         <el-card class="activity-card" shadow="never">
           <div slot="header">
@@ -142,7 +142,7 @@
           <div class="activity-list">
             <div v-for="item in latestVideos" :key="item.id" class="activity-item">
               <div class="activity-icon">
-                <i class="el-icon-video-camera"></i>
+                <i class="el-icon-video-camera" />
               </div>
               <div class="activity-content">
                 <div class="activity-title">{{ item.videoName }}</div>
@@ -218,6 +218,12 @@ export default {
   mounted() {
     this.initCharts()
   },
+  beforeDestroy() {
+    // 销毁图表实例
+    Object.values(this.charts).forEach(chart => {
+      chart.dispose()
+    })
+  },
   methods: {
     initCharts() {
       this.initRecordingChart()
@@ -225,7 +231,7 @@ export default {
       this.initDealershipChart()
       this.initIntentionChart()
     },
-    
+
     initRecordingChart() {
       const chart = echarts.init(this.$refs.recordingChart)
       const option = {
@@ -258,7 +264,7 @@ export default {
       chart.setOption(option)
       this.charts.recording = chart
     },
-    
+
     initSalesChart() {
       const chart = echarts.init(this.$refs.salesChart)
       const option = {
@@ -294,7 +300,7 @@ export default {
       chart.setOption(option)
       this.charts.sales = chart
     },
-    
+
     initDealershipChart() {
       const chart = echarts.init(this.$refs.dealershipChart)
       const option = {
@@ -322,7 +328,7 @@ export default {
       chart.setOption(option)
       this.charts.dealership = chart
     },
-    
+
     initIntentionChart() {
       const chart = echarts.init(this.$refs.intentionChart)
       const option = {
@@ -339,9 +345,9 @@ export default {
             type: 'pie',
             radius: '50%',
             data: [
-              { value: 1048, name: '有意向', itemStyle: { color: '#67C23A' } },
-              { value: 735, name: '无意向', itemStyle: { color: '#F56C6C' } },
-              { value: 580, name: '待跟进', itemStyle: { color: '#E6A23C' } }
+              { value: 1048, name: '有意向', itemStyle: { color: '#67C23A' }},
+              { value: 735, name: '无意向', itemStyle: { color: '#F56C6C' }},
+              { value: 580, name: '待跟进', itemStyle: { color: '#E6A23C' }}
             ],
             emphasis: {
               itemStyle: {
@@ -356,20 +362,14 @@ export default {
       chart.setOption(option)
       this.charts.intention = chart
     },
-    
+
     viewMoreRecordings() {
       this.$router.push('/audio')
     },
-    
+
     viewMoreVideos() {
       this.$router.push('/video')
     }
-  },
-  beforeDestroy() {
-    // 销毁图表实例
-    Object.values(this.charts).forEach(chart => {
-      chart.dispose()
-    })
   }
 }
 </script>
diff --git a/src/views/device/index.vue b/src/views/device/index.vue
index 4bfa2e9..bb25936 100644
--- a/src/views/device/index.vue
+++ b/src/views/device/index.vue
@@ -141,7 +141,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="所属项目" prop="projectId">
-          <el-select v-model="deviceForm.projectId"  placeholder="请选择所属项目" style="width: 100%">
+          <el-select v-model="deviceForm.projectId" placeholder="请选择所属项目" style="width: 100%">
             <el-option
               v-for="item in projectOptions"
               :key="item.value"
@@ -181,7 +181,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="选择项目" prop="projectId">
-          <el-select v-model="batchAssignForm.projectId"  placeholder="请选择项目" style="width: 100%">
+          <el-select v-model="batchAssignForm.projectId" placeholder="请选择项目" style="width: 100%">
             <el-option
               v-for="item in projectOptions"
               :key="item.value"
diff --git a/src/views/knowledge/dialogue-mining.vue b/src/views/knowledge/dialogue-mining.vue
index 104a2f8..0b10977 100644
--- a/src/views/knowledge/dialogue-mining.vue
+++ b/src/views/knowledge/dialogue-mining.vue
@@ -10,7 +10,7 @@
             style="width: 300px"
           />
         </el-form-item>
-        
+
         <el-form-item label="销售姓名">
           <el-input
             v-model="queryParams.salesName"
@@ -19,7 +19,7 @@
             style="width: 200px"
           />
         </el-form-item>
-        
+
         <el-form-item label="挖掘类型">
           <el-select v-model="queryParams.miningType" placeholder="请选择挖掘类型" clearable>
             <el-option label="话术技巧" value="script" />
@@ -28,7 +28,7 @@
             <el-option label="异议处理" value="objection" />
           </el-select>
         </el-form-item>
-        
+
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" @click="handleQuery">挖掘分析</el-button>
           <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
@@ -41,7 +41,7 @@
         <span>挖掘结果</span>
         <el-button style="float: right; padding: 3px 0" type="text" @click="exportResults">导出结果</el-button>
       </div>
-      
+
       <el-table
         v-loading="loading"
         :data="miningResults"
@@ -71,7 +71,7 @@
           </template>
         </el-table-column>
       </el-table>
-      
+
       <el-pagination
         :current-page="queryParams.current"
         :page-sizes="[10, 20, 50, 100]"
@@ -163,12 +163,12 @@ export default {
         this.loading = false
       }, 1000)
     },
-    
+
     handleQuery() {
       this.queryParams.current = 1
       this.getMiningResults()
     },
-    
+
     resetQuery() {
       this.$refs.queryForm.resetFields()
       this.queryParams = {
@@ -180,17 +180,17 @@ export default {
       }
       this.getMiningResults()
     },
-    
+
     handleSizeChange(val) {
       this.queryParams.size = val
       this.getMiningResults()
     },
-    
+
     handleCurrentChange(val) {
       this.queryParams.current = val
       this.getMiningResults()
     },
-    
+
     getMiningTypeTag(type) {
       const typeMap = {
         '话术技巧': 'success',
@@ -200,16 +200,16 @@ export default {
       }
       return typeMap[type] || 'info'
     },
-    
+
     viewDetail(row) {
       this.currentDetail = row
       this.detailVisible = true
     },
-    
+
     addToKnowledge(row) {
       this.$message.success('已添加到知识库')
     },
-    
+
     exportResults() {
       this.$message.success('导出成功')
     }
diff --git a/src/views/knowledge/index.vue b/src/views/knowledge/index.vue
index 2e0eee2..67c1b11 100644
--- a/src/views/knowledge/index.vue
+++ b/src/views/knowledge/index.vue
@@ -5,12 +5,12 @@
         <span class="header-title">知识中心</span>
         <span class="header-subtitle">Knowledge Center</span>
       </div>
-      
+
       <el-row :gutter="20">
         <el-col :span="8">
           <el-card class="feature-card" shadow="hover" @click.native="goToDialogueMining">
             <div class="feature-icon">
-              <i class="el-icon-chat-dot-round"></i>
+              <i class="el-icon-chat-dot-round" />
             </div>
             <div class="feature-content">
               <h3>对话挖掘</h3>
@@ -19,11 +19,11 @@
             </div>
           </el-card>
         </el-col>
-        
+
         <el-col :span="8">
           <el-card class="feature-card" shadow="hover" @click.native="goToKnowledgeBase">
             <div class="feature-icon">
-              <i class="el-icon-document"></i>
+              <i class="el-icon-document" />
             </div>
             <div class="feature-content">
               <h3>知识库</h3>
@@ -32,11 +32,11 @@
             </div>
           </el-card>
         </el-col>
-        
+
         <el-col :span="8">
           <el-card class="feature-card" shadow="hover" @click.native="goToTerminology">
             <div class="feature-icon">
-              <i class="el-icon-collection"></i>
+              <i class="el-icon-collection" />
             </div>
             <div class="feature-content">
               <h3>汽车术语库</h3>
diff --git a/src/views/knowledge/knowledge-base.vue b/src/views/knowledge/knowledge-base.vue
index e409f87..60016aa 100644
--- a/src/views/knowledge/knowledge-base.vue
+++ b/src/views/knowledge/knowledge-base.vue
@@ -10,7 +10,7 @@
             style="width: 250px"
           />
         </el-form-item>
-        
+
         <el-form-item label="知识分类">
           <el-select v-model="queryParams.category" placeholder="请选择分类" clearable>
             <el-option label="销售技巧" value="sales" />
@@ -19,7 +19,7 @@
             <el-option label="行业资讯" value="industry" />
           </el-select>
         </el-form-item>
-        
+
         <el-form-item label="创建人">
           <el-input
             v-model="queryParams.creator"
@@ -28,7 +28,7 @@
             style="width: 150px"
           />
         </el-form-item>
-        
+
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
           <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
@@ -77,7 +77,7 @@
           </template>
         </el-table-column>
       </el-table>
-      
+
       <el-pagination
         :current-page="queryParams.current"
         :page-sizes="[10, 20, 50, 100]"
@@ -101,7 +101,7 @@
         <el-form-item label="知识标题" prop="title">
           <el-input v-model="knowledgeForm.title" placeholder="请输入知识标题" />
         </el-form-item>
-        
+
         <el-form-item label="知识分类" prop="category">
           <el-select v-model="knowledgeForm.category" placeholder="请选择分类" style="width: 100%">
             <el-option label="销售技巧" value="销售技巧" />
@@ -110,7 +110,7 @@
             <el-option label="行业资讯" value="行业资讯" />
           </el-select>
         </el-form-item>
-        
+
         <el-form-item label="知识内容" prop="content">
           <el-input
             v-model="knowledgeForm.content"
@@ -119,11 +119,11 @@
             placeholder="请输入知识内容"
           />
         </el-form-item>
-        
+
         <el-form-item label="关键词" prop="keywords">
           <el-input v-model="knowledgeForm.keywords" placeholder="请输入关键词，用逗号分隔" />
         </el-form-item>
-        
+
         <el-form-item label="状态" prop="status">
           <el-radio-group v-model="knowledgeForm.status">
             <el-radio label="已发布">已发布</el-radio>
@@ -245,12 +245,12 @@ export default {
         this.loading = false
       }, 1000)
     },
-    
+
     handleQuery() {
       this.queryParams.current = 1
       this.getKnowledgeList()
     },
-    
+
     resetQuery() {
       this.$refs.queryForm.resetFields()
       this.queryParams = {
@@ -262,21 +262,21 @@ export default {
       }
       this.getKnowledgeList()
     },
-    
+
     handleSelectionChange(selection) {
       this.selectedIds = selection.map(item => item.id)
     },
-    
+
     handleSizeChange(val) {
       this.queryParams.size = val
       this.getKnowledgeList()
     },
-    
+
     handleCurrentChange(val) {
       this.queryParams.current = val
       this.getKnowledgeList()
     },
-    
+
     getCategoryTag(category) {
       const tagMap = {
         '销售技巧': 'success',
@@ -286,7 +286,7 @@ export default {
       }
       return tagMap[category] || 'info'
     },
-    
+
     handleAdd() {
       this.isEdit = false
       this.knowledgeForm = {
@@ -299,18 +299,18 @@ export default {
       }
       this.dialogVisible = true
     },
-    
+
     handleEdit(row) {
       this.isEdit = true
       this.knowledgeForm = { ...row }
       this.dialogVisible = true
     },
-    
+
     handleView(row) {
       this.currentKnowledge = row
       this.viewVisible = true
     },
-    
+
     handleDelete(row) {
       this.$confirm('确认删除该知识?', '提示', {
         confirmButtonText: '确定',
@@ -321,7 +321,7 @@ export default {
         this.getKnowledgeList()
       })
     },
-    
+
     handleSubmit() {
       this.$refs.knowledgeForm.validate(valid => {
         if (valid) {
@@ -331,15 +331,15 @@ export default {
         }
       })
     },
-    
+
     handleDialogClose() {
       this.$refs.knowledgeForm?.resetFields()
     },
-    
+
     handleImport() {
       this.$message.info('批量导入功能待实现')
     },
-    
+
     handleExport() {
       this.$message.success('导出成功')
     }
diff --git a/src/views/knowledge/terminology.vue b/src/views/knowledge/terminology.vue
index dd1ce8e..541643f 100644
--- a/src/views/knowledge/terminology.vue
+++ b/src/views/knowledge/terminology.vue
@@ -10,7 +10,7 @@
             style="width: 250px"
           />
         </el-form-item>
-        
+
         <el-form-item label="术语分类">
           <el-select v-model="queryParams.category" placeholder="请选择分类" clearable>
             <el-option label="发动机" value="engine" />
@@ -20,7 +20,7 @@
             <el-option label="车身" value="body" />
           </el-select>
         </el-form-item>
-        
+
         <el-form-item label="语言">
           <el-select v-model="queryParams.language" placeholder="请选择语言" clearable>
             <el-option label="中文" value="zh" />
@@ -29,7 +29,7 @@
             <el-option label="德文" value="de" />
           </el-select>
         </el-form-item>
-        
+
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
           <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
@@ -78,7 +78,7 @@
           </template>
         </el-table-column>
       </el-table>
-      
+
       <el-pagination
         :current-page="queryParams.current"
         :page-sizes="[10, 20, 50, 100]"
@@ -111,7 +111,7 @@
             </el-form-item>
           </el-col>
         </el-row>
-        
+
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="术语分类" prop="category">
@@ -135,7 +135,7 @@
             </el-form-item>
           </el-col>
         </el-row>
-        
+
         <el-form-item label="术语定义" prop="definition">
           <el-input
             v-model="terminologyForm.definition"
@@ -144,7 +144,7 @@
             placeholder="请输入术语定义"
           />
         </el-form-item>
-        
+
         <el-form-item label="应用场景" prop="application">
           <el-input
             v-model="terminologyForm.application"
@@ -153,7 +153,7 @@
             placeholder="请输入应用场景"
           />
         </el-form-item>
-        
+
         <el-form-item label="相关术语" prop="relatedTerms">
           <el-input v-model="terminologyForm.relatedTerms" placeholder="请输入相关术语，用逗号分隔" />
         </el-form-item>
@@ -277,12 +277,12 @@ export default {
         this.loading = false
       }, 1000)
     },
-    
+
     handleQuery() {
       this.queryParams.current = 1
       this.getTerminologyList()
     },
-    
+
     resetQuery() {
       this.$refs.queryForm.resetFields()
       this.queryParams = {
@@ -294,21 +294,21 @@ export default {
       }
       this.getTerminologyList()
     },
-    
+
     handleSelectionChange(selection) {
       this.selectedIds = selection.map(item => item.id)
     },
-    
+
     handleSizeChange(val) {
       this.queryParams.size = val
       this.getTerminologyList()
     },
-    
+
     handleCurrentChange(val) {
       this.queryParams.current = val
       this.getTerminologyList()
     },
-    
+
     getCategoryTag(category) {
       const tagMap = {
         '发动机': 'danger',
@@ -319,7 +319,7 @@ export default {
       }
       return tagMap[category] || 'info'
     },
-    
+
     getLanguageTag(language) {
       const tagMap = {
         '中文': 'success',
@@ -329,7 +329,7 @@ export default {
       }
       return tagMap[language] || 'info'
     },
-    
+
     handleAdd() {
       this.isEdit = false
       this.terminologyForm = {
@@ -344,18 +344,18 @@ export default {
       }
       this.dialogVisible = true
     },
-    
+
     handleEdit(row) {
       this.isEdit = true
       this.terminologyForm = { ...row }
       this.dialogVisible = true
     },
-    
+
     handleView(row) {
       this.currentTerminology = row
       this.viewVisible = true
     },
-    
+
     handleDelete(row) {
       this.$confirm('确认删除该术语?', '提示', {
         confirmButtonText: '确定',
@@ -366,7 +366,7 @@ export default {
         this.getTerminologyList()
       })
     },
-    
+
     handleSubmit() {
       this.$refs.terminologyForm.validate(valid => {
         if (valid) {
@@ -376,15 +376,15 @@ export default {
         }
       })
     },
-    
+
     handleDialogClose() {
       this.$refs.terminologyForm?.resetFields()
     },
-    
+
     handleImport() {
       this.$message.info('批量导入功能待实现')
     },
-    
+
     handleExport() {
       this.$message.success('导出成功')
     }
diff --git a/src/views/video/face-detect-new.vue b/src/views/video/face-detect-new.vue
new file mode 100644
index 0000000..37cd690
--- /dev/null
+++ b/src/views/video/face-detect-new.vue
@@ -0,0 +1,631 @@
+<template>
+  <div class="app-container">
+    <!-- 查询条件区域 -->
+    <el-card class="filter-container" shadow="never">
+      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
+        <!-- 第一行 -->
+        <el-form-item label="请求ID">
+          <el-input
+            v-model="queryParams.requestId"
+            placeholder="请输入请求ID"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+
+        <el-form-item label="模型">
+          <el-select v-model="queryParams.model" placeholder="请选择模型" clearable>
+            <el-option
+              v-for="item in modelOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <el-select v-model="queryParams.success" placeholder="请选择状态" clearable>
+            <el-option label="成功" :value="true" />
+            <el-option label="失败" :value="false" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 第二行 -->
+        <el-form-item label="检测数量">
+          <el-input
+            v-model="queryParams.faceCount"
+            placeholder="请输入人脸数量"
+            clearable
+            style="width: 150px"
+            type="number"
+          />
+        </el-form-item>
+
+        <el-form-item label="处理时间(ms)">
+          <el-input
+            v-model="queryParams.minProcessingTime"
+            placeholder="最小处理时间"
+            clearable
+            style="width: 150px"
+            type="number"
+          />
+        </el-form-item>
+
+        <el-form-item label="至">
+          <el-input
+            v-model="queryParams.maxProcessingTime"
+            placeholder="最大处理时间"
+            clearable
+            style="width: 150px"
+            type="number"
+          />
+        </el-form-item>
+
+        <!-- 第三行 -->
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="queryParams.createdAtRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          />
+        </el-form-item>
+      </el-form>
+
+      <!-- 按钮区域 - 独立于表单 -->
+      <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        <el-button type="success" icon="el-icon-upload" @click="handleDetect">头像URL检测</el-button>
+        <el-button type="info" icon="el-icon-upload2" @click="handleUploadAvatar">上传并检测</el-button>
+      </div>
+    </el-card>
+
+    <!-- 数据表格区域 -->
+    <el-card class="table-container" shadow="never">
+      <el-table
+        v-loading="loading"
+        :data="avatarDetectList"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="序号" type="index" width="50" />
+        <el-table-column label="请求ID" prop="requestId" min-width="200" show-overflow-tooltip />
+        <el-table-column label="模型" prop="model" width="150" />
+        <el-table-column label="图片URL" prop="imageUrl" min-width="200" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <el-link v-if="scope.row.imageUrl" :href="scope.row.imageUrl" target="_blank" type="primary">
+              查看图片
+            </el-link>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="检测数量" prop="faceCount" width="100" align="center" />
+        <el-table-column label="状态" prop="success" width="80" align="center">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.success ? 'success' : 'danger'">
+              {{ scope.row.success ? '成功' : '失败' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="处理时间(ms)" prop="processingTimeMs" width="120" align="center" />
+        <el-table-column label="请求时间" prop="requestTime" width="160" />
+        <el-table-column label="响应时间" prop="responseTime" width="160" />
+        <el-table-column label="创建时间" prop="createdAt" width="160" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleView(scope.row)">查看</el-button>
+            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination
+        :current-page="queryParams.current"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="queryParams.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top: 20px; text-align: right;"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+
+    <!-- 头像URL检测对话框 -->
+    <el-dialog
+      title="头像URL检测"
+      :visible.sync="detectDialogVisible"
+      width="600px"
+      @close="handleDetectDialogClose"
+    >
+      <el-form ref="detectForm" :model="detectForm" :rules="detectRules" label-width="100px">
+        <el-form-item label="图片URL" prop="imageUrl">
+          <el-input
+            v-model="detectForm.imageUrl"
+            placeholder="请输入图片URL"
+            type="textarea"
+            :rows="3"
+          />
+        </el-form-item>
+        <el-form-item label="模型" prop="model">
+          <el-select v-model="detectForm.model" placeholder="请选择模型" style="width: 100%">
+            <el-option
+              v-for="item in modelOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detectDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="detectLoading" @click="handleDetectSubmit">检测</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getFaceDetectList, detectFace, deleteFaceDetect } from '@/api/face-detect'
+
+export default {
+  name: 'AvatarUrlDetect',
+  data() {
+    return {
+      loading: false,
+      avatarDetectList: [],
+      total: 0,
+      selectedIds: [],
+      detectDialogVisible: false,
+      detectLoading: false,
+      detailVisible: false,
+      currentRecord: null,
+      // 上传头像相关
+      uploadAvatarDialogVisible: false,
+      uploadFileList: [],
+      uploadAction: '/api/face-detect/avatar/upload',
+      uploadHeaders: {},
+      uploadData: {
+        type: 'avatar',
+        avatarName: ''
+      },
+      uploadedImageUrl: '',
+      uploadedModel: '',
+      uploadSuccessDialogVisible: false,
+      uploadForm: {
+        model: 'default',
+        avatarName: ''
+      },
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+        requestId: '',
+        model: '',
+        success: '',
+        faceCount: '',
+        minProcessingTime: '',
+        maxProcessingTime: '',
+        createdAtRange: []
+      },
+      // 检测表单
+      detectForm: {
+        imageUrl: '',
+        model: 'liveportrait-detect'
+      },
+      // 表单验证规则
+      detectRules: {
+        imageUrl: [
+          { required: true, message: '请输入图片URL', trigger: 'blur' }
+        ],
+        model: [
+          { required: true, message: '请选择模型', trigger: 'change' }
+        ]
+      },
+      // 模型选项
+      modelOptions: [
+        { value: 'liveportrait-detect', label: 'LivePortrait Detect' },
+        { value: 'face-detect-v1', label: 'Face Detect V1' },
+        { value: 'face-detect-v2', label: 'Face Detect V2' }
+      ]
+    }
+  },
+  // 监听头像名称变化，更新上传数据
+  watch: {
+    'uploadForm.avatarName': {
+      handler(newVal) {
+        this.uploadData.avatarName = newVal
+      },
+      immediate: true
+    }
+  },
+  created() {
+    // 设置上传请求头
+    this.uploadHeaders = {
+      'Authorization': 'Bearer ' + this.$store.getters.token
+    }
+    this.getList()
+  },
+  methods: {
+    // 上传头像对话框打开
+    handleUploadAvatarDialogOpen() {
+      console.log('上传头像对话框打开')
+      // 清空上传组件
+      this.$nextTick(() => {
+        if (this.$refs.avatarUpload) {
+          this.$refs.avatarUpload.clearFiles()
+        }
+      })
+    },
+
+    // 上传头像
+    handleUploadAvatar() {
+      this.uploadFileList = []
+      this.uploadData.avatarName = ''
+      this.uploadAvatarDialogVisible = true
+    },
+
+    // 上传头像对话框关闭
+    handleUploadAvatarDialogClose() {
+      console.log('上传头像对话框关闭 - 重置文件列表')
+      this.uploadFileList = []
+    },
+
+    // 上传前检查文件大小和类型
+    beforeAvatarUpload(file) {
+      console.log('上传前检查 - 文件:', file)
+
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isLt5M) {
+        this.$message.error('上传文件大小不能超过 5MB!')
+        return false
+      }
+
+      const isImage = /\.(jpg|jpeg|png|gif)$/.test(file.name.toLowerCase())
+      if (!isImage) {
+        this.$message.error('只能上传图片格式的文件!')
+        return false
+      }
+
+      return true
+    },
+
+    // 上传成功
+    handleUploadAvatarSuccess(response, file, fileList) {
+      console.log('上传成功 - 响应:', response)
+      // 检查响应格式
+      if (response && (response.code === 20000 || response.code === 200 || response.success)) {
+        // 保存返回的图片URL和所选模型
+        this.uploadedImageUrl = response.data?.fileUrl || response.url || ''
+        this.uploadedModel = this.uploadForm.model
+        if (this.uploadedImageUrl) {
+          this.uploadAvatarDialogVisible = false
+          this.uploadSuccessDialogVisible = true
+        } else {
+          this.$message.error('上传成功，但未返回图片URL')
+        }
+      } else {
+        this.$message.error(response?.message || '头像上传失败')
+      }
+    },
+
+    // 上传失败
+    handleUploadAvatarError(err, file, fileList) {
+      console.error('上传失败 - 错误:', err)
+      this.$message.error('头像上传失败: ' + (err.message || err.statusText || '未知错误'))
+    },
+
+    // 文件变化处理
+    handleFileChange(file, fileList) {
+      console.log('文件变化 - 文件:', file)
+      console.log('文件变化 - 文件列表:', fileList)
+      this.uploadFileList = fileList
+    },
+
+    // 文件移除处理
+    handleFileRemove(file, fileList) {
+      console.log('文件移除 - 文件:', file)
+      console.log('文件移除 - 文件列表:', fileList)
+      this.uploadFileList = fileList
+    },
+
+    // 上传进度
+    handleUploadAvatarProgress(event, file, fileList) {
+      console.log('上传进度 - 事件:', event)
+    },
+
+    // 复制图片URL
+    copyImageUrl() {
+      const input = document.createElement('input')
+      input.value = this.uploadedImageUrl
+      document.body.appendChild(input)
+      input.select()
+      document.execCommand('copy')
+      document.body.removeChild(input)
+      this.$message.success('链接已复制到剪贴板')
+    },
+
+    // 获取列表数据
+    getList() {
+      this.loading = true
+      const params = { ...this.queryParams }
+
+      // 处理时间范围
+      if (params.createdAtRange && params.createdAtRange.length === 2) {
+        params.createdAtStart = params.createdAtRange[0]
+        params.createdAtEnd = params.createdAtRange[1]
+      }
+      delete params.createdAtRange
+
+      // 移除空值
+      Object.keys(params).forEach(key => {
+        if (params[key] === '' || params[key] === null || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      getFaceDetectList(params).then(response => {
+        console.log('API响应:', response)
+        if (response.code === 20000) {
+          this.avatarDetectList = response.data || []
+          this.total = response.total || 0
+        } else {
+          this.$message.error(response.message || '查询失败')
+        }
+        this.loading = false
+      }).catch((error) => {
+        console.log('API错误:', error)
+        // 开发环境使用模拟数据
+        this.avatarDetectList = [
+          {
+            id: 2,
+            requestId: 'a344c2cd-f647-41c7-b558-aa605e0e3297',
+            model: 'liveportrait-detect',
+            imageUrl: 'http://101.35.52.237:19006/api/v1/download-shared-object',
+            requestTime: '2025-10-05T16:27:47',
+            responseTime: '2025-10-05T16:27:49',
+            statusCode: 200,
+            success: true,
+            faceCount: 0,
+            responseData: '{"output":{"message":"","pass":true},"usage":{"image_count":1},"request_id":"88fd6554-a840-461c-840a-476bd20087b6"}',
+            errorMessage: null,
+            processingTimeMs: 2304,
+            createdAt: '2025-10-05T08:27:48',
+            updatedAt: '2025-10-05T08:27:48'
+          },
+          {
+            id: 1,
+            requestId: 'dfb14ab4-e8e0-4fcb-8ea1-45eac41ae983',
+            model: 'liveportrait-detect',
+            imageUrl: '',
+            requestTime: '2025-10-05T16:10:35',
+            responseTime: '2025-10-05T16:10:37',
+            statusCode: 200,
+            success: true,
+            faceCount: 0,
+            responseData: '{"output":{"message":"","pass":true},"usage":{"image_count":1},"request_id":"ee4a54ca-c190-4594-990e-d9546cbbd5ed"}',
+            errorMessage: null,
+            processingTimeMs: 2104,
+            createdAt: '2025-10-05T08:10:37',
+            updatedAt: '2025-10-05T08:10:37'
+          }
+        ]
+        this.total = this.avatarDetectList.length
+        this.loading = false
+      })
+    },
+
+    // 查询
+    handleQuery() {
+      this.queryParams.current = 1
+      this.getList()
+    },
+
+    // 重置查询
+    resetQuery() {
+      this.$refs.queryForm.resetFields()
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        requestId: '',
+        model: '',
+        success: '',
+        faceCount: '',
+        minProcessingTime: '',
+        maxProcessingTime: '',
+        createdAtRange: []
+      }
+      this.getList()
+    },
+
+    // 选择变化
+    handleSelectionChange(selection) {
+      this.selectedIds = selection.map(item => item.id)
+    },
+
+    // 分页大小变化
+    handleSizeChange(val) {
+      this.queryParams.size = val
+      this.getList()
+    },
+
+    // 当前页变化
+    handleCurrentChange(val) {
+      this.queryParams.current = val
+      this.getList()
+    },
+
+    // 查看详情
+    handleView(row) {
+      this.currentRecord = row
+      this.detailVisible = true
+    },
+
+    // 删除记录
+    handleDelete(row) {
+      this.$confirm('确认删除该记录?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteFaceDetect(row.id).then(response => {
+          if (response.success) {
+            this.$message.success('删除成功')
+            this.getList()
+          } else {
+            this.$message.error(response.message || '删除失败')
+          }
+        }).catch(() => {
+          this.$message.success('删除成功')
+          this.getList()
+        })
+      })
+    },
+
+    // 人脸检测
+    handleDetect() {
+      this.detectForm = {
+        imageUrl: '',
+        model: 'liveportrait-detect'
+      }
+      this.detectDialogVisible = true
+    },
+
+    // 提交检测
+    handleDetectSubmit() {
+      this.$refs.detectForm.validate(valid => {
+        if (valid) {
+          this.detectLoading = true
+          detectFace(this.detectForm.imageUrl).then(response => {
+            if (response.code === 20000) {
+              this.$message.success('检测成功')
+              this.detectDialogVisible = false
+              this.getList()
+            } else {
+              this.$message.error(response.message || '检测失败')
+            }
+            this.detectLoading = false
+          }).catch(error => {
+            console.error('检测错误:', error)
+            this.$message.error('检测失败')
+            this.detectLoading = false
+          })
+        }
+      })
+    },
+
+    // 检测对话框关闭
+    handleDetectDialogClose() {
+      this.$refs.detectForm.resetFields()
+    },
+
+    // 格式化响应数据
+    formatResponseData(data) {
+      try {
+        const parsed = JSON.parse(data)
+        return JSON.stringify(parsed, null, 2)
+      } catch (e) {
+        return data
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.filter-container {
+  margin-bottom: 20px;
+}
+
+.table-container {
+  margin-top: 20px;
+}
+
+.el-form-item {
+  margin-bottom: 15px;
+}
+
+.detail-content {
+  padding: 20px 0;
+}
+
+.detail-item {
+  display: flex;
+  margin-bottom: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.detail-item label {
+  width: 100px;
+  color: #909399;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.detail-item span {
+  color: #303133;
+  flex: 1;
+}
+
+.response-data {
+  background-color: #f5f7fa;
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  max-height: 200px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* 上传头像样式 */
+.upload-container {
+  padding: 20px;
+  text-align: center;
+}
+
+.upload-demo {
+  width: 100%;
+}
+
+.upload-demo .el-upload {
+  width: 100%;
+}
+
+.upload-demo .el-upload-dragger {
+  width: 100%;
+  height: 200px;
+}
+
+/* 上传成功对话框样式 */
+.upload-success-container {
+  text-align: center;
+  padding: 20px 0;
+}
+
+.upload-success-icon {
+  font-size: 48px;
+  color: #67c23a;
+  margin-bottom: 15px;
+}
+
+.upload-success-container p {
+  margin-bottom: 20px;
+  color: #303133;
+  font-size: 16px;
+}
+
+.upload-success-url {
+  text-align: left;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/video/face-detect.vue b/src/views/video/face-detect.vue
new file mode 100644
index 0000000..37cd690
--- /dev/null
+++ b/src/views/video/face-detect.vue
@@ -0,0 +1,631 @@
+<template>
+  <div class="app-container">
+    <!-- 查询条件区域 -->
+    <el-card class="filter-container" shadow="never">
+      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
+        <!-- 第一行 -->
+        <el-form-item label="请求ID">
+          <el-input
+            v-model="queryParams.requestId"
+            placeholder="请输入请求ID"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+
+        <el-form-item label="模型">
+          <el-select v-model="queryParams.model" placeholder="请选择模型" clearable>
+            <el-option
+              v-for="item in modelOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <el-select v-model="queryParams.success" placeholder="请选择状态" clearable>
+            <el-option label="成功" :value="true" />
+            <el-option label="失败" :value="false" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 第二行 -->
+        <el-form-item label="检测数量">
+          <el-input
+            v-model="queryParams.faceCount"
+            placeholder="请输入人脸数量"
+            clearable
+            style="width: 150px"
+            type="number"
+          />
+        </el-form-item>
+
+        <el-form-item label="处理时间(ms)">
+          <el-input
+            v-model="queryParams.minProcessingTime"
+            placeholder="最小处理时间"
+            clearable
+            style="width: 150px"
+            type="number"
+          />
+        </el-form-item>
+
+        <el-form-item label="至">
+          <el-input
+            v-model="queryParams.maxProcessingTime"
+            placeholder="最大处理时间"
+            clearable
+            style="width: 150px"
+            type="number"
+          />
+        </el-form-item>
+
+        <!-- 第三行 -->
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="queryParams.createdAtRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          />
+        </el-form-item>
+      </el-form>
+
+      <!-- 按钮区域 - 独立于表单 -->
+      <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        <el-button type="success" icon="el-icon-upload" @click="handleDetect">头像URL检测</el-button>
+        <el-button type="info" icon="el-icon-upload2" @click="handleUploadAvatar">上传并检测</el-button>
+      </div>
+    </el-card>
+
+    <!-- 数据表格区域 -->
+    <el-card class="table-container" shadow="never">
+      <el-table
+        v-loading="loading"
+        :data="avatarDetectList"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="序号" type="index" width="50" />
+        <el-table-column label="请求ID" prop="requestId" min-width="200" show-overflow-tooltip />
+        <el-table-column label="模型" prop="model" width="150" />
+        <el-table-column label="图片URL" prop="imageUrl" min-width="200" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <el-link v-if="scope.row.imageUrl" :href="scope.row.imageUrl" target="_blank" type="primary">
+              查看图片
+            </el-link>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="检测数量" prop="faceCount" width="100" align="center" />
+        <el-table-column label="状态" prop="success" width="80" align="center">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.success ? 'success' : 'danger'">
+              {{ scope.row.success ? '成功' : '失败' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="处理时间(ms)" prop="processingTimeMs" width="120" align="center" />
+        <el-table-column label="请求时间" prop="requestTime" width="160" />
+        <el-table-column label="响应时间" prop="responseTime" width="160" />
+        <el-table-column label="创建时间" prop="createdAt" width="160" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleView(scope.row)">查看</el-button>
+            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination
+        :current-page="queryParams.current"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="queryParams.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top: 20px; text-align: right;"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+
+    <!-- 头像URL检测对话框 -->
+    <el-dialog
+      title="头像URL检测"
+      :visible.sync="detectDialogVisible"
+      width="600px"
+      @close="handleDetectDialogClose"
+    >
+      <el-form ref="detectForm" :model="detectForm" :rules="detectRules" label-width="100px">
+        <el-form-item label="图片URL" prop="imageUrl">
+          <el-input
+            v-model="detectForm.imageUrl"
+            placeholder="请输入图片URL"
+            type="textarea"
+            :rows="3"
+          />
+        </el-form-item>
+        <el-form-item label="模型" prop="model">
+          <el-select v-model="detectForm.model" placeholder="请选择模型" style="width: 100%">
+            <el-option
+              v-for="item in modelOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detectDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="detectLoading" @click="handleDetectSubmit">检测</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getFaceDetectList, detectFace, deleteFaceDetect } from '@/api/face-detect'
+
+export default {
+  name: 'AvatarUrlDetect',
+  data() {
+    return {
+      loading: false,
+      avatarDetectList: [],
+      total: 0,
+      selectedIds: [],
+      detectDialogVisible: false,
+      detectLoading: false,
+      detailVisible: false,
+      currentRecord: null,
+      // 上传头像相关
+      uploadAvatarDialogVisible: false,
+      uploadFileList: [],
+      uploadAction: '/api/face-detect/avatar/upload',
+      uploadHeaders: {},
+      uploadData: {
+        type: 'avatar',
+        avatarName: ''
+      },
+      uploadedImageUrl: '',
+      uploadedModel: '',
+      uploadSuccessDialogVisible: false,
+      uploadForm: {
+        model: 'default',
+        avatarName: ''
+      },
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+        requestId: '',
+        model: '',
+        success: '',
+        faceCount: '',
+        minProcessingTime: '',
+        maxProcessingTime: '',
+        createdAtRange: []
+      },
+      // 检测表单
+      detectForm: {
+        imageUrl: '',
+        model: 'liveportrait-detect'
+      },
+      // 表单验证规则
+      detectRules: {
+        imageUrl: [
+          { required: true, message: '请输入图片URL', trigger: 'blur' }
+        ],
+        model: [
+          { required: true, message: '请选择模型', trigger: 'change' }
+        ]
+      },
+      // 模型选项
+      modelOptions: [
+        { value: 'liveportrait-detect', label: 'LivePortrait Detect' },
+        { value: 'face-detect-v1', label: 'Face Detect V1' },
+        { value: 'face-detect-v2', label: 'Face Detect V2' }
+      ]
+    }
+  },
+  // 监听头像名称变化，更新上传数据
+  watch: {
+    'uploadForm.avatarName': {
+      handler(newVal) {
+        this.uploadData.avatarName = newVal
+      },
+      immediate: true
+    }
+  },
+  created() {
+    // 设置上传请求头
+    this.uploadHeaders = {
+      'Authorization': 'Bearer ' + this.$store.getters.token
+    }
+    this.getList()
+  },
+  methods: {
+    // 上传头像对话框打开
+    handleUploadAvatarDialogOpen() {
+      console.log('上传头像对话框打开')
+      // 清空上传组件
+      this.$nextTick(() => {
+        if (this.$refs.avatarUpload) {
+          this.$refs.avatarUpload.clearFiles()
+        }
+      })
+    },
+
+    // 上传头像
+    handleUploadAvatar() {
+      this.uploadFileList = []
+      this.uploadData.avatarName = ''
+      this.uploadAvatarDialogVisible = true
+    },
+
+    // 上传头像对话框关闭
+    handleUploadAvatarDialogClose() {
+      console.log('上传头像对话框关闭 - 重置文件列表')
+      this.uploadFileList = []
+    },
+
+    // 上传前检查文件大小和类型
+    beforeAvatarUpload(file) {
+      console.log('上传前检查 - 文件:', file)
+
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isLt5M) {
+        this.$message.error('上传文件大小不能超过 5MB!')
+        return false
+      }
+
+      const isImage = /\.(jpg|jpeg|png|gif)$/.test(file.name.toLowerCase())
+      if (!isImage) {
+        this.$message.error('只能上传图片格式的文件!')
+        return false
+      }
+
+      return true
+    },
+
+    // 上传成功
+    handleUploadAvatarSuccess(response, file, fileList) {
+      console.log('上传成功 - 响应:', response)
+      // 检查响应格式
+      if (response && (response.code === 20000 || response.code === 200 || response.success)) {
+        // 保存返回的图片URL和所选模型
+        this.uploadedImageUrl = response.data?.fileUrl || response.url || ''
+        this.uploadedModel = this.uploadForm.model
+        if (this.uploadedImageUrl) {
+          this.uploadAvatarDialogVisible = false
+          this.uploadSuccessDialogVisible = true
+        } else {
+          this.$message.error('上传成功，但未返回图片URL')
+        }
+      } else {
+        this.$message.error(response?.message || '头像上传失败')
+      }
+    },
+
+    // 上传失败
+    handleUploadAvatarError(err, file, fileList) {
+      console.error('上传失败 - 错误:', err)
+      this.$message.error('头像上传失败: ' + (err.message || err.statusText || '未知错误'))
+    },
+
+    // 文件变化处理
+    handleFileChange(file, fileList) {
+      console.log('文件变化 - 文件:', file)
+      console.log('文件变化 - 文件列表:', fileList)
+      this.uploadFileList = fileList
+    },
+
+    // 文件移除处理
+    handleFileRemove(file, fileList) {
+      console.log('文件移除 - 文件:', file)
+      console.log('文件移除 - 文件列表:', fileList)
+      this.uploadFileList = fileList
+    },
+
+    // 上传进度
+    handleUploadAvatarProgress(event, file, fileList) {
+      console.log('上传进度 - 事件:', event)
+    },
+
+    // 复制图片URL
+    copyImageUrl() {
+      const input = document.createElement('input')
+      input.value = this.uploadedImageUrl
+      document.body.appendChild(input)
+      input.select()
+      document.execCommand('copy')
+      document.body.removeChild(input)
+      this.$message.success('链接已复制到剪贴板')
+    },
+
+    // 获取列表数据
+    getList() {
+      this.loading = true
+      const params = { ...this.queryParams }
+
+      // 处理时间范围
+      if (params.createdAtRange && params.createdAtRange.length === 2) {
+        params.createdAtStart = params.createdAtRange[0]
+        params.createdAtEnd = params.createdAtRange[1]
+      }
+      delete params.createdAtRange
+
+      // 移除空值
+      Object.keys(params).forEach(key => {
+        if (params[key] === '' || params[key] === null || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      getFaceDetectList(params).then(response => {
+        console.log('API响应:', response)
+        if (response.code === 20000) {
+          this.avatarDetectList = response.data || []
+          this.total = response.total || 0
+        } else {
+          this.$message.error(response.message || '查询失败')
+        }
+        this.loading = false
+      }).catch((error) => {
+        console.log('API错误:', error)
+        // 开发环境使用模拟数据
+        this.avatarDetectList = [
+          {
+            id: 2,
+            requestId: 'a344c2cd-f647-41c7-b558-aa605e0e3297',
+            model: 'liveportrait-detect',
+            imageUrl: 'http://101.35.52.237:19006/api/v1/download-shared-object',
+            requestTime: '2025-10-05T16:27:47',
+            responseTime: '2025-10-05T16:27:49',
+            statusCode: 200,
+            success: true,
+            faceCount: 0,
+            responseData: '{"output":{"message":"","pass":true},"usage":{"image_count":1},"request_id":"88fd6554-a840-461c-840a-476bd20087b6"}',
+            errorMessage: null,
+            processingTimeMs: 2304,
+            createdAt: '2025-10-05T08:27:48',
+            updatedAt: '2025-10-05T08:27:48'
+          },
+          {
+            id: 1,
+            requestId: 'dfb14ab4-e8e0-4fcb-8ea1-45eac41ae983',
+            model: 'liveportrait-detect',
+            imageUrl: '',
+            requestTime: '2025-10-05T16:10:35',
+            responseTime: '2025-10-05T16:10:37',
+            statusCode: 200,
+            success: true,
+            faceCount: 0,
+            responseData: '{"output":{"message":"","pass":true},"usage":{"image_count":1},"request_id":"ee4a54ca-c190-4594-990e-d9546cbbd5ed"}',
+            errorMessage: null,
+            processingTimeMs: 2104,
+            createdAt: '2025-10-05T08:10:37',
+            updatedAt: '2025-10-05T08:10:37'
+          }
+        ]
+        this.total = this.avatarDetectList.length
+        this.loading = false
+      })
+    },
+
+    // 查询
+    handleQuery() {
+      this.queryParams.current = 1
+      this.getList()
+    },
+
+    // 重置查询
+    resetQuery() {
+      this.$refs.queryForm.resetFields()
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        requestId: '',
+        model: '',
+        success: '',
+        faceCount: '',
+        minProcessingTime: '',
+        maxProcessingTime: '',
+        createdAtRange: []
+      }
+      this.getList()
+    },
+
+    // 选择变化
+    handleSelectionChange(selection) {
+      this.selectedIds = selection.map(item => item.id)
+    },
+
+    // 分页大小变化
+    handleSizeChange(val) {
+      this.queryParams.size = val
+      this.getList()
+    },
+
+    // 当前页变化
+    handleCurrentChange(val) {
+      this.queryParams.current = val
+      this.getList()
+    },
+
+    // 查看详情
+    handleView(row) {
+      this.currentRecord = row
+      this.detailVisible = true
+    },
+
+    // 删除记录
+    handleDelete(row) {
+      this.$confirm('确认删除该记录?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteFaceDetect(row.id).then(response => {
+          if (response.success) {
+            this.$message.success('删除成功')
+            this.getList()
+          } else {
+            this.$message.error(response.message || '删除失败')
+          }
+        }).catch(() => {
+          this.$message.success('删除成功')
+          this.getList()
+        })
+      })
+    },
+
+    // 人脸检测
+    handleDetect() {
+      this.detectForm = {
+        imageUrl: '',
+        model: 'liveportrait-detect'
+      }
+      this.detectDialogVisible = true
+    },
+
+    // 提交检测
+    handleDetectSubmit() {
+      this.$refs.detectForm.validate(valid => {
+        if (valid) {
+          this.detectLoading = true
+          detectFace(this.detectForm.imageUrl).then(response => {
+            if (response.code === 20000) {
+              this.$message.success('检测成功')
+              this.detectDialogVisible = false
+              this.getList()
+            } else {
+              this.$message.error(response.message || '检测失败')
+            }
+            this.detectLoading = false
+          }).catch(error => {
+            console.error('检测错误:', error)
+            this.$message.error('检测失败')
+            this.detectLoading = false
+          })
+        }
+      })
+    },
+
+    // 检测对话框关闭
+    handleDetectDialogClose() {
+      this.$refs.detectForm.resetFields()
+    },
+
+    // 格式化响应数据
+    formatResponseData(data) {
+      try {
+        const parsed = JSON.parse(data)
+        return JSON.stringify(parsed, null, 2)
+      } catch (e) {
+        return data
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.filter-container {
+  margin-bottom: 20px;
+}
+
+.table-container {
+  margin-top: 20px;
+}
+
+.el-form-item {
+  margin-bottom: 15px;
+}
+
+.detail-content {
+  padding: 20px 0;
+}
+
+.detail-item {
+  display: flex;
+  margin-bottom: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.detail-item label {
+  width: 100px;
+  color: #909399;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.detail-item span {
+  color: #303133;
+  flex: 1;
+}
+
+.response-data {
+  background-color: #f5f7fa;
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  max-height: 200px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* 上传头像样式 */
+.upload-container {
+  padding: 20px;
+  text-align: center;
+}
+
+.upload-demo {
+  width: 100%;
+}
+
+.upload-demo .el-upload {
+  width: 100%;
+}
+
+.upload-demo .el-upload-dragger {
+  width: 100%;
+  height: 200px;
+}
+
+/* 上传成功对话框样式 */
+.upload-success-container {
+  text-align: center;
+  padding: 20px 0;
+}
+
+.upload-success-icon {
+  font-size: 48px;
+  color: #67c23a;
+  margin-bottom: 15px;
+}
+
+.upload-success-container p {
+  margin-bottom: 20px;
+  color: #303133;
+  font-size: 16px;
+}
+
+.upload-success-url {
+  text-align: left;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/video/video-synthesis.vue b/src/views/video/video-synthesis.vue
new file mode 100644
index 0000000..5569e23
--- /dev/null
+++ b/src/views/video/video-synthesis.vue
@@ -0,0 +1,451 @@
+<template>
+  <div class="app-container">
+    <!-- 查询条件区域 -->
+    <el-card class="filter-container" shadow="never">
+      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
+        <el-form-item label="请求ID">
+          <el-input
+            v-model="queryParams.requestId"
+            placeholder="请输入请求ID"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="任务ID">
+          <el-input
+            v-model="queryParams.taskId"
+            placeholder="请输入任务ID"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="queryParams.success" placeholder="请选择状态" clearable>
+            <el-option label="成功" :value="true" />
+            <el-option label="失败" :value="false" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="任务状态">
+          <el-input
+            v-model="queryParams.taskStatus"
+            placeholder="请输入任务状态"
+            clearable
+            style="width: 150px"
+          />
+        </el-form-item>
+        <el-form-item label="所有者">
+          <el-input
+            v-model="queryParams.ownerName"
+            placeholder="请输入所有者名称"
+            clearable
+            style="width: 150px"
+          />
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="queryParams.createdAtRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          />
+        </el-form-item>
+      </el-form>
+
+      <!-- 按钮区域 -->
+      <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </div>
+    </el-card>
+
+    <!-- 数据表格区域 -->
+    <el-card class="table-container" shadow="never">
+      <el-table
+        v-loading="loading"
+        :data="videoSynthesisList"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="序号" type="index" width="50" />
+        <el-table-column label="请求ID" prop="requestId" min-width="200" show-overflow-tooltip />
+        <el-table-column label="任务ID" prop="taskId" min-width="200" show-overflow-tooltip />
+        <el-table-column label="状态" prop="success" width="80" align="center">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.success ? 'success' : 'danger'">
+              {{ scope.row.success ? '成功' : '失败' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="任务状态" prop="taskStatus" width="120" />
+        <el-table-column label="视频时长(秒)" prop="videoDuration" width="120" align="center" />
+        <el-table-column label="视频比例" prop="videoRatio" width="100" align="center" />
+        <el-table-column label="处理时间(ms)" prop="processingTimeMs" width="120" align="center" />
+        <el-table-column label="所有者" prop="ownerName" width="120" />
+        <el-table-column label="联系电话" prop="ownerPhone" width="120" />
+        <el-table-column label="模型提供方" prop="modelProvider" width="120" />
+        <el-table-column label="创建时间" prop="createdAt" width="160" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleView(scope.row)">查看</el-button>
+            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination
+        :current-page="queryParams.current"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="queryParams.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top: 20px; text-align: right;"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+
+    <!-- 详情对话框 -->
+    <el-dialog
+      title="视频合成详情"
+      :visible.sync="detailVisible"
+      width="800px"
+    >
+      <div v-if="currentRecord" class="detail-content">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>请求ID:</label>
+              <span>{{ currentRecord.requestId }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>任务ID:</label>
+              <span>{{ currentRecord.taskId }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>状态:</label>
+              <el-tag :type="currentRecord.success ? 'success' : 'danger'">
+                {{ currentRecord.success ? '成功' : '失败' }}
+              </el-tag>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>任务状态:</label>
+              <span>{{ currentRecord.taskStatus }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <div class="detail-item">
+              <label>视频URL:</label>
+              <el-link v-if="currentRecord.videoUrl" :href="currentRecord.videoUrl" target="_blank" type="primary">
+                {{ currentRecord.videoUrl }}
+              </el-link>
+              <span v-else>-</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>视频时长:</label>
+              <span>{{ currentRecord.videoDuration }}秒</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>视频比例:</label>
+              <span>{{ currentRecord.videoRatio }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>处理时间:</label>
+              <span>{{ currentRecord.processingTimeMs }}ms</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>图片ID:</label>
+              <span>{{ currentRecord.imageId }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>音频ID:</label>
+              <span>{{ currentRecord.audioId }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>模型提供方:</label>
+              <span>{{ currentRecord.modelProvider }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>所有者:</label>
+              <span>{{ currentRecord.ownerName }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="detail-item">
+              <label>联系电话:</label>
+              <span>{{ currentRecord.ownerPhone }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-if="currentRecord.errorMessage" :gutter="20">
+          <el-col :span="24">
+            <div class="detail-item">
+              <label>错误信息:</label>
+              <span style="color: #f56c6c;">{{ currentRecord.errorMessage }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-if="currentRecord.message" :gutter="20">
+          <el-col :span="24">
+            <div class="detail-item">
+              <label>消息:</label>
+              <span>{{ currentRecord.message }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detailVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getVideoSynthesisList, deleteVideoSynthesis } from '@/api/video-synthesis'
+
+export default {
+  name: 'VideoSynthesis',
+  data() {
+    return {
+      loading: false,
+      videoSynthesisList: [],
+      total: 0,
+      selectedIds: [],
+      detailVisible: false,
+      currentRecord: null,
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+        requestId: '',
+        taskId: '',
+        success: '',
+        taskStatus: '',
+        ownerName: '',
+        createdAtRange: []
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取列表数据
+    getList() {
+      this.loading = true
+      const params = { ...this.queryParams }
+
+      // 处理时间范围
+      if (params.createdAtRange && params.createdAtRange.length === 2) {
+        params.createdAtStart = params.createdAtRange[0]
+        params.createdAtEnd = params.createdAtRange[1]
+      }
+      delete params.createdAtRange
+
+      // 移除空值
+      Object.keys(params).forEach(key => {
+        if (params[key] === '' || params[key] === null || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      getVideoSynthesisList(params).then(response => {
+        if (response.code === 20000) {
+          this.videoSynthesisList = response.data || []
+          this.total = response.total || 0
+        } else {
+          this.$message.error(response.message || '查询失败')
+        }
+        this.loading = false
+      }).catch((error) => {
+        console.error('API错误:', error)
+        // 开发环境使用模拟数据
+        this.videoSynthesisList = [
+          {
+            id: 1,
+            requestId: 'req-20251008-001',
+            taskId: 'task-20251008-001',
+            success: true,
+            message: '视频合成成功',
+            taskStatus: 'completed',
+            videoUrl: 'http://example.com/videos/synthesized-001.mp4',
+            videoDuration: 15,
+            videoRatio: '16:9',
+            processingTimeMs: 3500,
+            imageId: 'img-123456',
+            audioId: 'audio-789012',
+            ownerName: '张三',
+            ownerPhone: '13800138000',
+            modelProvider: 'AI Lab',
+            errorMessage: null,
+            createdAt: '2025-10-08T10:30:00',
+            updatedAt: '2025-10-08T10:30:05'
+          },
+          {
+            id: 2,
+            requestId: 'req-20251008-002',
+            taskId: 'task-20251008-002',
+            success: false,
+            message: '视频合成失败',
+            taskStatus: 'failed',
+            videoUrl: '',
+            videoDuration: 0,
+            videoRatio: '',
+            processingTimeMs: 1200,
+            imageId: 'img-123457',
+            audioId: 'audio-789013',
+            ownerName: '李四',
+            ownerPhone: '13900139000',
+            modelProvider: 'AI Lab',
+            errorMessage: '音频文件格式不支持',
+            createdAt: '2025-10-08T10:35:00',
+            updatedAt: '2025-10-08T10:35:02'
+          }
+        ]
+        this.total = this.videoSynthesisList.length
+        this.loading = false
+      })
+    },
+
+    // 查询
+    handleQuery() {
+      this.queryParams.current = 1
+      this.getList()
+    },
+
+    // 重置查询
+    resetQuery() {
+      this.$refs.queryForm.resetFields()
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        requestId: '',
+        taskId: '',
+        success: '',
+        taskStatus: '',
+        ownerName: '',
+        createdAtRange: []
+      }
+      this.getList()
+    },
+
+    // 选择变化
+    handleSelectionChange(selection) {
+      this.selectedIds = selection.map(item => item.id)
+    },
+
+    // 分页大小变化
+    handleSizeChange(val) {
+      this.queryParams.size = val
+      this.getList()
+    },
+
+    // 当前页变化
+    handleCurrentChange(val) {
+      this.queryParams.current = val
+      this.getList()
+    },
+
+    // 查看详情
+    handleView(row) {
+      this.currentRecord = row
+      this.detailVisible = true
+    },
+
+    // 删除记录
+    handleDelete(row) {
+      this.$confirm('确认删除该记录?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteVideoSynthesis(row.id).then(response => {
+          if (response.success) {
+            this.$message.success('删除成功')
+            this.getList()
+          } else {
+            this.$message.error(response.message || '删除失败')
+          }
+        }).catch(() => {
+          this.$message.success('删除成功')
+          this.getList()
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.filter-container {
+  margin-bottom: 20px;
+}
+
+.table-container {
+  margin-top: 20px;
+}
+
+.el-form-item {
+  margin-bottom: 15px;
+}
+
+.detail-content {
+  padding: 20px 0;
+}
+
+.detail-item {
+  display: flex;
+  margin-bottom: 16px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.detail-item label {
+  width: 100px;
+  color: #909399;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.detail-item span {
+  color: #303133;
+  flex: 1;
+}
+</style>