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

---
 frontend/app/web-gold/src/views/dh/Video.vue  | 1550 -----------------
 .../service/AiUsageStatsServiceImpl.java      |    2 +-
 .../vo/AiUsageStatsPageReqVO.java             |    3 +
 .../pointrecord/mapper/PointRecordMapper.java |    4 +-
 .../src/api/muye/aiusagestats/index.ts        |    1 +
 .../muye/aiusage/components/AppStatsPanel.vue |  360 ++++
 .../aiusage/components/UserStatsPanel.vue     |  370 ++++
 .../src/views/muye/aiusage/index.vue          |  126 +-
 8 files changed, 745 insertions(+), 1671 deletions(-)
 delete mode 100644 frontend/app/web-gold/src/views/dh/Video.vue
 create mode 100644 yudao-ui-admin-vue3/src/views/muye/aiusage/components/AppStatsPanel.vue
 create mode 100644 yudao-ui-admin-vue3/src/views/muye/aiusage/components/UserStatsPanel.vue

diff --git a/frontend/app/web-gold/src/views/dh/Video.vue b/frontend/app/web-gold/src/views/dh/Video.vue
deleted file mode 100644
index 51f0a73904..0000000000
--- a/frontend/app/web-gold/src/views/dh/Video.vue
+++ /dev/null
@@ -1,1550 +0,0 @@
-<script setup>
-/**
- * 数字人视频生成页面
- * 功能：用户上传视频，选择音色和文案，生成数字人视频
- * 优化：移除冗余状态、统一试听逻辑、优化错误处理、清理废弃代码
- * 试听优化：添加缓存机制，同一参数下第二次试听直接播放缓存，无需重复调用API
- */
-defineOptions({ name: 'DigitalVideoPage' })
-import { ref, computed, onMounted, watch, onUnmounted } from 'vue'
-import { message } from 'ant-design-vue'
-import { InboxOutlined, SoundOutlined, LoadingOutlined } from '@ant-design/icons-vue'
-import { VoiceService } from '@/api/voice'
-import { MaterialService } from '@/api/material'
-import { createDigitalHumanTask, getDigitalHumanTask, cancelTask, retryTask } from '@/api/digitalHuman'
-import { useUpload } from '@/composables/useUpload'
-import { DEFAULT_VOICE_PROVIDER } from '@/config/voiceConfig'
-
-// 导入 voiceStore 用于获取用户音色
-import { useVoiceCopyStore } from '@/stores/voiceCopy'
-import { usePointsConfigStore } from '@/stores/pointsConfig'
-const voiceStore = useVoiceCopyStore()
-const pointsConfigStore = usePointsConfigStore()
-
-// 状态管理
-const uploadedVideo = ref('')
-const uploadedVideoFile = ref(null) // 存储原始文件对象
-const previewVideoUrl = ref('')
-const isGenerating = ref(false)
-const generationProgress = ref(0)
-const currentTaskId = ref(null)
-const currentTaskStatus = ref('')
-const currentTaskStep = ref('')
-const isSynthesizing = ref(false)
-const synthesizedAudio = ref(null)
-const previewLoadingVoiceId = ref('')
-const playingPreviewVoiceId = ref('') // 当前正在试听的音色ID
-const isPlayingSynthesized = ref(false) // 是否正在播放已合成的音频
-const pollingInterval = ref(null) // 轮询间隔ID
-
-// 音频播放实例
-let previewAudio = null
-let previewObjectUrl = ''
-
-// Upload Hook
-const { upload } = useUpload()
-
-// 试听音频缓存 - 按音色ID缓存，避免重复API调用
-const previewAudioCache = new Map()
-const MAX_PREVIEW_CACHE_SIZE = 50 // 最多缓存50个音色的试听音频
-
-// TTS 配置
-const ttsText = ref('')
-const selectedTtsVoice = ref('')
-const speechRate = ref(1.0)
-const instruction = ref('neutral') // 指令参数，用于控制音色风格
-const emotion = ref('neutral') // 情感参数
-const emotionActive = ref(false) // 是否激活情感tab（false为指令，true为情感）
-const voiceSource = ref('user') // 音色来源：user 或 system
-
-// 系统音色库（使用CosyVoice v3-flash模型）
-const SYSTEM_VOICES = [
-  { id: 'sys-pro-01', name: '星悦·知性女声', gender: 'female', category: '职业', description: '温柔专业', voiceId: 'cosyvoice-v3-flash-sys-pro-01', defaultInstruction: '请用温柔专业的语调朗读' },
-  { id: 'sys-boy-01', name: '澄澄·少男音', gender: 'male', category: '少男', description: '年轻清爽', voiceId: 'cosyvoice-v3-flash-sys-boy-01', defaultInstruction: '请用年轻清爽的语调朗读' },
-  { id: 'sys-girl-01', name: '沁雪·少女音', gender: 'female', category: '少女', description: '活泼甜美', voiceId: 'cosyvoice-v3-flash-sys-girl-01', defaultInstruction: '请用活泼甜美的语调朗读' },
-  { id: 'sys-man-01', name: '寰宇·男青年', gender: 'male', category: '男青年', description: '磁性沉稳', voiceId: 'cosyvoice-v3-flash-sys-man-01', defaultInstruction: '请用磁性沉稳的语调朗读' }
-]
-
-// 用户音色列表
-const userVoiceCards = computed(() =>
-  (voiceStore.profiles || []).map(profile => ({
-    id: `user-${profile.id}`,
-    rawId: profile.id,
-    name: profile.name || '未命名',
-    category: '',
-    gender: profile.gender || 'female',
-    description: profile.note || '我的配音',
-    fileUrl: profile.fileUrl,
-    transcription: profile.transcription || '',
-    source: 'user',
-    voiceId: profile.voiceId
-  }))
-)
-
-const displayedVoices = computed(() => {
-  if (voiceSource.value === 'system') {
-    return SYSTEM_VOICES.map(voice => ({
-      ...voice,
-      source: 'system'
-    }))
-  }
-  return userVoiceCards.value
-})
-
-const selectedVoiceMeta = computed(() =>
-  displayedVoices.value.find(voice => `${voice.source}-${voice.id}` === selectedTtsVoice.value)
-)
-
-// UI 状态
-const speechRateMarks = { 0.5: '0.5x', 1: '1x', 1.5: '1.5x', 2: '2x' }
-const speechRateDisplay = computed(() => `${speechRate.value.toFixed(1)}x`)
-
-// 生成数字人的条件：选中了音色 + 上传了视频 + 没有正在生成
-// 注意：不需要先合成语音，可以直接使用音色配置
-const canGenerate = computed(() => {
-  const hasText = ttsText.value.trim() // 文案必填
-  const hasVoice = selectedVoiceMeta.value // 必须选中音色
-  const hasVideo = uploadedVideo.value // 必须上传视频
-  const notGenerating = !isGenerating.value // 不能正在生成
-  return !!(hasText && hasVoice && hasVideo && notGenerating)
-})
-
-// 音色选择
-const setVoiceSource = (source) => {
-  if (voiceSource.value === source) return
-  voiceSource.value = source
-  selectedTtsVoice.value = ''
-  if (source === 'user' && userVoiceCards.value.length > 0) {
-    selectVoiceProfile(userVoiceCards.value[0])
-  } else if (source === 'system' && SYSTEM_VOICES.length > 0) {
-    selectVoiceProfile({ ...SYSTEM_VOICES[0], source: 'system' })
-  }
-}
-
-const selectVoiceProfile = (voice) => {
-  selectedTtsVoice.value = `${voice.source}-${voice.id}`
-  // 选系统音色时也更新对应的instruction
-  if (voice.source === 'system' && voice.defaultInstruction) {
-    instruction.value = voice.defaultInstruction
-  }
-}
-
-// 音频试听 - 统一入口
-const playVoiceSample = async (voice) => {
-  if (!voice) return
-  // 防止重复点击同一个音色
-  if (previewLoadingVoiceId.value === voice.id || playingPreviewVoiceId.value === voice.id) {
-    return
-  }
-  // 如果正在播放其他音色，先停止
-  if (playingPreviewVoiceId.value && playingPreviewVoiceId.value !== voice.id) {
-    try {
-      previewAudio?.pause?.()
-      previewAudio = null
-    } catch {}
-  }
-
-  previewLoadingVoiceId.value = voice.id
-  playingPreviewVoiceId.value = voice.id
-
-  // 生成缓存key
-  const cacheKey = generatePreviewCacheKey(voice)
-  const cachedAudio = previewAudioCache.get(cacheKey)
-
-  // 如果有缓存，直接播放
-  if (cachedAudio) {
-    console.log('使用缓存音频:', voice.name)
-    playCachedAudio(cachedAudio, resetPreviewState)
-    return
-  }
-
-  // 没有缓存，调用API
-  try {
-    const params = buildPreviewParams(voice)
-    if (!params) return resetPreviewState()
-
-    // 调试：打印试听参数
-    console.log(`试听音色: ${voice.name}, voiceId: ${voice.voiceId || voice.rawId}`)
-
-    const res = await VoiceService.preview(params)
-    if (res.code !== 0) {
-      message.error(res.msg || '试听失败')
-      return resetPreviewState()
-    }
-
-    // 调试：打印返回的音频信息
-    if (res.data?.audioBase64) {
-      console.log(`返回音频base64前32位: ${res.data.audioBase64.substring(0, 32)}...`)
-    }
-
-    // 根据返回类型播放音频并缓存
-    if (res.data?.audioUrl) {
-      // URL方式暂不缓存
-      playAudioPreview(res.data.audioUrl, { onEnded: resetPreviewState })
-    } else if (res.data?.audioBase64) {
-      const audioData = await decodeAndCacheBase64(res.data.audioBase64, res.data.format, cacheKey)
-      playCachedAudio(audioData, resetPreviewState)
-    } else {
-      message.error('试听失败')
-      resetPreviewState()
-    }
-  } catch (error) {
-    console.error('preview error:', error)
-    message.error('试听失败')
-    resetPreviewState()
-  }
-}
-
-// 生成试听缓存key
-const generatePreviewCacheKey = (voice) => {
-  const voiceId = voice.voiceId || voice.rawId || voice.id
-  const text = ttsText.value.trim()
-  const rate = speechRate.value
-  const inst = instruction.value
-  const emo = emotion.value
-  return `${voiceId}:${text}:${rate}:${inst}:${emo}`
-}
-
-// 解码base64并缓存
-const decodeAndCacheBase64 = async (audioBase64, format = 'mp3', cacheKey) => {
-  const byteCharacters = window.atob(audioBase64)
-  const byteNumbers = new Array(byteCharacters.length)
-  for (let i = 0; i < byteCharacters.length; i++) {
-    byteNumbers[i] = byteCharacters.charCodeAt(i)
-  }
-  const mime = format === 'mp3' ? 'audio/mpeg' : `audio/${format}`
-  const blob = new Blob([new Uint8Array(byteNumbers)], { type: mime })
-  const objectUrl = URL.createObjectURL(blob)
-
-  const audioData = { blob, objectUrl, format }
-
-  // 缓存音频数据
-  previewAudioCache.set(cacheKey, audioData)
-
-  // 管理缓存大小
-  if (previewAudioCache.size > MAX_PREVIEW_CACHE_SIZE) {
-    const firstKey = previewAudioCache.keys().next().value
-    const oldData = previewAudioCache.get(firstKey)
-    URL.revokeObjectURL(oldData.objectUrl)
-    previewAudioCache.delete(firstKey)
-  }
-
-  return audioData
-}
-
-// 播放缓存的音频
-const playCachedAudio = (audioData, onEnded) => {
-  // 清理旧的previewObjectUrl
-  if (previewObjectUrl && previewObjectUrl !== audioData.objectUrl) {
-    URL.revokeObjectURL(previewObjectUrl)
-  }
-  previewObjectUrl = audioData.objectUrl
-
-  playAudioPreview(previewObjectUrl, {
-    revokeOnEnd: false, // 缓存音频不释放，保留给下次播放
-    onEnded: () => {
-      onEnded && onEnded()
-    }
-  })
-}
-
-// 重置试听状态
-const resetPreviewState = () => {
-  previewLoadingVoiceId.value = ''
-  playingPreviewVoiceId.value = ''
-}
-
-const buildPreviewParams = (voice) => {
-  // 公共参数
-  const baseParams = {
-    inputText: ttsText.value,
-    speechRate: speechRate.value || 1.0,
-    audioFormat: 'mp3',
-    timestamp: Date.now(),
-    providerType: DEFAULT_VOICE_PROVIDER
-  }
-
-  if (voice.source === 'user') {
-    // 用户音色：使用voiceConfigId
-    const configId = voice.rawId || extractIdFromString(voice.id)
-    if (!configId) {
-      message.error('配音配置无效')
-      return null
-    }
-    return { ...baseParams, voiceConfigId: configId }
-  }
-
-  // 系统音色：使用voiceId，可能包含instruction/emotion
-  const params = { ...baseParams, voiceId: voice.voiceId }
-
-  // instruction和emotion只能选一个传递
-  if (instruction.value && instruction.value !== 'neutral') {
-    params.instruction = instruction.value
-  } else if (emotion.value && emotion.value !== 'neutral') {
-    params.emotion = emotion.value
-  } else if (voice.defaultInstruction) {
-    params.instruction = voice.defaultInstruction
-  }
-
-  return params
-}
-
-const extractIdFromString = (idStr) => {
-  if (typeof idStr !== 'string' || !idStr.startsWith('user-')) return null
-  const extractedId = parseInt(idStr.replace('user-', ''))
-  return Number.isNaN(extractedId) ? null : extractedId
-}
-
-// 语音合成
-const handleSynthesizeVoice = async () => {
-  if (!ttsText.value.trim()) return message.warning('请输入文本')
-  const voice = selectedVoiceMeta.value
-  if (!voice) return message.warning('请选择音色')
-
-  isSynthesizing.value = true
-  try {
-    const params = {
-      inputText: ttsText.value,
-      speechRate: speechRate.value,
-      audioFormat: 'mp3',
-      providerType: DEFAULT_VOICE_PROVIDER
-    }
-
-    if (voice.source === 'user') {
-      // 用户音色：使用voiceConfigId，不传instruction
-      const configId = voice.rawId || extractIdFromString(voice.id)
-      if (!configId) {
-        message.warning('音色配置无效')
-        return
-      }
-      params.voiceConfigId = configId
-    } else {
-      // 系统音色：使用voiceId，根据是否选择instruction或emotion来决定传递哪个参数
-      const voiceId = voice.voiceId || voice.rawId
-      if (!voiceId) {
-        message.warning('音色配置无效')
-        return
-      }
-      params.voiceId = voiceId
-
-      // instruction和emotion只能选一个传递
-      if (instruction.value && instruction.value !== 'neutral') {
-        params.instruction = instruction.value
-      } else if (emotion.value && emotion.value !== 'neutral') {
-        params.emotion = emotion.value
-      } else if (voice.defaultInstruction) {
-        params.instruction = voice.defaultInstruction
-      }
-    }
-
-    const res = await VoiceService.synthesize(params)
-
-    if (res.code === 0) {
-      synthesizedAudio.value = res.data
-      message.success('语音合成成功')
-    } else {
-      message.error(res.message || '合成失败')
-    }
-  } catch (error) {
-    console.error('synthesize error:', error)
-    message.error('语音合成失败')
-  } finally {
-    isSynthesizing.value = false
-  }
-}
-
-const playSynthesizedAudio = () => {
-  // 防止重复点击
-  if (isPlayingSynthesized.value || !synthesizedAudio.value) {
-    return
-  }
-
-  isPlayingSynthesized.value = true
-
-  // 优先使用Base64数据（安全方案）
-  if (synthesizedAudio.value.audioBase64) {
-    playAudioFromBase64(synthesizedAudio.value.audioBase64, synthesizedAudio.value.format, () => {
-      isPlayingSynthesized.value = false
-    })
-  }
-  // 兼容旧的audioUrl方式（已废弃）
-  else if (synthesizedAudio.value.audioUrl) {
-    playAudioPreview(synthesizedAudio.value.audioUrl, {
-      onEnded: () => {
-        isPlayingSynthesized.value = false
-      }
-    })
-  } else {
-    message.warning('暂无可播放的音频')
-    isPlayingSynthesized.value = false
-  }
-}
-
-// 视频处理
-const handleVideoUpload = async (file) => {
-  if (!file.type.startsWith('video/')) {
-    message.error('请上传视频文件')
-    return false
-  }
-
-  try {
-    uploadedVideo.value = await toDataURL(file)
-    uploadedVideoFile.value = file // 保存文件对象
-    message.success('视频上传成功')
-  } catch (error) {
-    console.error('视频上传失败:', error)
-    message.error('视频上传失败')
-  }
-  return false
-}
-
-const handleVideoDrop = (e) => console.log('Video drop:', e)
-const clearVideo = () => {
-  uploadedVideo.value = ''
-  uploadedVideoFile.value = null
-  previewVideoUrl.value = ''
-  message.info('已清除视频')
-}
-
-const downloadPreview = () => {
-  if (!previewVideoUrl.value) return message.warning('没有可下载的视频')
-  const link = document.createElement('a')
-  link.href = previewVideoUrl.value
-  link.download = `数字人视频_${Date.now()}.mp4`
-  link.click()
-}
-
-// 视频生成
-const generateVideo = async () => {
-  if (!canGenerate.value) return message.warning('请先完成配置')
-  if (!ttsText.value.trim()) return message.warning('请输入文本')
-  const voice = selectedVoiceMeta.value
-  if (!voice) return message.warning('请选择音色')
-
-  isGenerating.value = true
-  generationProgress.value = 0
-  currentTaskStatus.value = 'PENDING'
-  currentTaskStep.value = 'prepare_files'
-
-  try {
-    // 1. 上传视频文件（只上传视频，音频由后端实时合成）
-    message.loading('正在上传视频...', 0)
-    const videoFileId = await uploadVideoFile(uploadedVideoFile.value)
-    if (!videoFileId) {
-      throw new Error('视频上传失败')
-    }
-
-    message.destroy()
-
-    // 2. 创建数字人任务
-    const taskData = {
-      taskName: `数字人任务_${Date.now()}`,
-      videoFileId: videoFileId,
-      inputText: ttsText.value,
-      speechRate: speechRate.value,
-      volume: 0,
-      guidanceScale: 1,
-      seed: 8888
-    }
-
-    if (voice.source === 'user') {
-      // 用户音色：使用voiceConfigId，不传instruction
-      const configId = voice.rawId || extractIdFromString(voice.id)
-      if (!configId) {
-        message.warning('音色配置无效')
-        return
-      }
-      taskData.voiceConfigId = configId
-    } else {
-      // 系统音色：使用voiceId，根据是否选择instruction或emotion来决定传递哪个参数
-      taskData.voiceId = voice.voiceId
-
-      // instruction和emotion只能选一个传递
-      if (instruction.value && instruction.value !== 'neutral') {
-        taskData.instruction = instruction.value
-      } else if (emotion.value && emotion.value !== 'neutral') {
-        taskData.emotion = emotion.value
-      } else if (voice.defaultInstruction) {
-        taskData.instruction = voice.defaultInstruction
-      } else {
-        taskData.emotion = 'neutral'
-      }
-    }
-
-    message.loading('正在创建任务...', 0)
-    const createRes = await createDigitalHumanTask(taskData)
-    message.destroy()
-
-    if (createRes.code === 0) {
-      currentTaskId.value = createRes.data
-      // 保存到本地存储，方便刷新页面后恢复
-      localStorage.setItem('digital_human_last_task_id', createRes.data)
-      message.success('任务创建成功，开始处理')
-
-      // 3. 开始轮询任务状态
-      startPollingTask()
-    } else {
-      throw new Error(createRes.msg || '任务创建失败')
-    }
-  } catch (error) {
-    console.error('generateVideo error:', error)
-    message.destroy()
-    message.error(error.message || '视频生成失败')
-    isGenerating.value = false
-    currentTaskStatus.value = ''
-    currentTaskStep.value = ''
-  }
-}
-
-// 上传视频文件到后端
-const uploadVideoFile = async (file) => {
-  try {
-    // 使用useUpload Hook上传文件
-    const fileId = await upload(file, {
-      fileCategory: 'video',
-      groupId: null, // 数字人视频模块不使用groupId
-      onStart: () => {},
-      onProgress: () => {},
-      onSuccess: (id) => {
-        message.success('文件上传成功')
-      },
-      onError: (error) => {
-        message.error(error.message || '上传失败')
-      }
-    })
-
-    return fileId
-  } catch (error) {
-    console.error('uploadVideoFile error:', error)
-    throw error
-  }
-}
-
-// 加载最近一次任务结果
-const loadLastTask = async () => {
-  try {
-    const lastTaskId = localStorage.getItem('digital_human_last_task_id')
-    if (!lastTaskId) return
-
-    const res = await getDigitalHumanTask(lastTaskId)
-    if (res.code === 0 && res.data) {
-      const task = res.data
-      currentTaskId.value = lastTaskId
-
-      // 如果任务是成功状态，显示结果
-      if (task.status === 'SUCCESS' && task.resultVideoUrl) {
-        previewVideoUrl.value = task.resultVideoUrl
-        currentTaskStatus.value = 'SUCCESS'
-      } else if (task.status === 'PROCESSING') {
-        // 如果任务还在处理中，继续轮询
-        currentTaskStatus.value = 'PROCESSING'
-        currentTaskStep.value = task.currentStep
-        generationProgress.value = task.progress || 0
-        startPollingTask()
-      }
-    }
-  } catch (error) {
-    console.error('loadLastTask error:', error)
-    // 清理无效的缓存
-    localStorage.removeItem('digital_human_last_task_id')
-  }
-}
-
-// 开始轮询任务状态
-const startPollingTask = () => {
-  if (pollingInterval.value) {
-    clearInterval(pollingInterval.value)
-  }
-
-  pollingInterval.value = setInterval(async () => {
-    if (!currentTaskId.value) {
-      clearInterval(pollingInterval.value)
-      return
-    }
-
-    try {
-      const res = await getDigitalHumanTask(currentTaskId.value)
-      if (res.code === 0 && res.data) {
-        const task = res.data
-        currentTaskStatus.value = task.status
-        currentTaskStep.value = task.currentStep
-        generationProgress.value = task.progress || 0
-
-        // 如果任务完成或失败，停止轮询
-        if (task.status === 'SUCCESS') {
-          clearInterval(pollingInterval.value)
-          pollingInterval.value = null
-          previewVideoUrl.value = task.resultVideoUrl
-          isGenerating.value = false
-          currentTaskStatus.value = 'SUCCESS'
-          // 保存成功的任务ID
-          localStorage.setItem('digital_human_last_task_id', currentTaskId.value)
-          message.success('视频生成成功！')
-        } else if (task.status === 'FAILED') {
-          clearInterval(pollingInterval.value)
-          pollingInterval.value = null
-          isGenerating.value = false
-          currentTaskStatus.value = 'FAILED'
-          // 失败时清除缓存
-          localStorage.removeItem('digital_human_last_task_id')
-          message.error(`任务失败：${task.errorMessage || '未知错误'}`)
-        } else if (task.status === 'CANCELED') {
-          clearInterval(pollingInterval.value)
-          pollingInterval.value = null
-          isGenerating.value = false
-          currentTaskStatus.value = 'CANCELED'
-          // 取消时也清除缓存
-          localStorage.removeItem('digital_human_last_task_id')
-          message.info('任务已取消')
-        }
-      }
-    } catch (error) {
-      console.error('polling error:', error)
-    }
-  }, 10000) // 每10秒轮询一次
-}
-
-// 取消任务
-const handleCancelTask = async () => {
-  if (!currentTaskId.value) return
-  
-  try {
-    const res = await cancelTask(currentTaskId.value)
-    if (res.code === 0) {
-      message.success('任务已取消')
-      if (pollingInterval.value) {
-        clearInterval(pollingInterval.value)
-        pollingInterval.value = null
-      }
-      isGenerating.value = false
-    } else {
-      message.error(res.msg || '取消失败')
-    }
-  } catch (error) {
-    console.error('cancelTask error:', error)
-    message.error('取消任务失败')
-  }
-}
-
-// 重试任务
-const handleRetryTask = async () => {
-  if (!currentTaskId.value) return
-  
-  try {
-    const res = await retryTask(currentTaskId.value)
-    if (res.code === 0) {
-      message.success('任务已重启')
-      currentTaskStatus.value = 'PENDING'
-      currentTaskStep.value = 'prepare_files'
-      isGenerating.value = true
-      startPollingTask()
-    } else {
-      message.error(res.msg || '重试失败')
-    }
-  } catch (error) {
-    console.error('retryTask error:', error)
-    message.error('重试任务失败')
-  }
-}
-
-// 工具函数
-const toDataURL = (file) => new Promise((resolve, reject) => {
-  const reader = new FileReader()
-  reader.onload = () => resolve(reader.result)
-  reader.onerror = reject
-  reader.readAsDataURL(file)
-})
-
-// 状态描述映射
-const getStatusText = (status) => {
-  const statusMap = {
-    'PENDING': '等待处理',
-    'PROCESSING': '处理中',
-    'SUCCESS': '已完成',
-    'FAILED': '失败',
-    'CANCELED': '已取消'
-  }
-  return statusMap[status] || status
-}
-
-const getStepText = (step) => {
-  const stepMap = {
-    'prepare_files': '准备文件',
-    'synthesize_voice': '语音合成',
-    'sync_lip': '口型同步',
-    'finishing': '完成处理',
-    'canceled': '已取消'
-  }
-  return stepMap[step] || step
-}
-
-const playAudioPreview = (url, options = {}) => {
-  if (!url) return message.warning('暂无可试听的音频')
-
-  // 暂停之前的音频
-  try {
-    previewAudio?.pause?.()
-    previewAudio = null
-  } catch {}
-
-  const audio = new Audio(url)
-  const cleanup = () => {
-    if (options.revokeOnEnd && url.startsWith('blob:')) {
-      URL.revokeObjectURL(url)
-      previewObjectUrl === url && (previewObjectUrl = '')
-    }
-    previewAudio = null
-    options.onEnded && options.onEnded()
-  }
-
-  audio.play()
-    .then(() => {
-      previewAudio = audio
-      audio.onended = cleanup
-      audio.onerror = () => {
-        console.error('播放失败')
-        cleanup()
-        message.error('播放失败')
-      }
-    })
-    .catch(err => {
-      console.error('播放失败:', err)
-      cleanup()
-      message.error('播放失败')
-    })
-}
-
-// 播放Base64音频（用于合成音频播放）
-const playAudioFromBase64 = (audioBase64, format = 'mp3', onEnded = null) => {
-  try {
-    // 解码base64并创建blob
-    const byteCharacters = window.atob(audioBase64)
-    const byteNumbers = new Array(byteCharacters.length)
-    for (let i = 0; i < byteCharacters.length; i++) {
-      byteNumbers[i] = byteCharacters.charCodeAt(i)
-    }
-    const mime = format === 'mp3' ? 'audio/mpeg' : `audio/${format}`
-    const blob = new Blob([new Uint8Array(byteNumbers)], { type: mime })
-    const objectUrl = URL.createObjectURL(blob)
-
-    // 清理旧的previewObjectUrl
-    if (previewObjectUrl) {
-      URL.revokeObjectURL(previewObjectUrl)
-    }
-    previewObjectUrl = objectUrl
-
-    playAudioPreview(previewObjectUrl, {
-      revokeOnEnd: true, // 合成音频播放结束后释放URL
-      onEnded: () => {
-        onEnded && onEnded()
-      }
-    })
-  } catch (error) {
-    console.error('Base64播放失败:', error)
-    message.error('音频播放失败')
-    onEnded && onEnded()
-  }
-}
-
-// 生命周期
-onMounted(async () => {
-  // 加载积分配置
-  pointsConfigStore.loadConfig()
-
-  await voiceStore.refresh()
-  // 默认选择第一个音色
-  if (voiceSource.value === 'user' && userVoiceCards.value.length > 0) {
-    selectVoiceProfile(userVoiceCards.value[0])
-  } else if (voiceSource.value === 'system' && SYSTEM_VOICES.length > 0) {
-    selectVoiceProfile({ ...SYSTEM_VOICES[0], source: 'system' })
-  }
-
-  // 加载最近一次任务结果
-  await loadLastTask()
-})
-
-
-
-onUnmounted(() => {
-  // 停止音频播放
-  previewAudio?.pause?.()
-  previewAudio = null
-
-  // 清理音频URL
-  previewObjectUrl && URL.revokeObjectURL(previewObjectUrl)
-
-  // 清理试听缓存
-  previewAudioCache.forEach(audioData => {
-    URL.revokeObjectURL(audioData.objectUrl)
-  })
-  previewAudioCache.clear()
-
-  // 重置播放状态
-  resetPreviewState()
-  isPlayingSynthesized.value = false
-
-  // 清理轮询
-  if (pollingInterval.value) {
-    clearInterval(pollingInterval.value)
-    pollingInterval.value = null
-  }
-})
-
-// 监听器
-watch(voiceSource, () => {
-  selectedTtsVoice.value = ''
-  if (voiceSource.value === 'user' && userVoiceCards.value.length > 0) {
-    selectVoiceProfile(userVoiceCards.value[0])
-  } else if (voiceSource.value === 'system' && SYSTEM_VOICES.length > 0) {
-    selectVoiceProfile({ ...SYSTEM_VOICES[0], source: 'system' })
-  }
-})
-
-watch(() => voiceStore.profiles, () => {
-  if (voiceSource.value === 'user' && userVoiceCards.value.length > 0 && !selectedTtsVoice.value) {
-    selectVoiceProfile(userVoiceCards.value[0])
-  }
-})
-
-watch([ttsText, selectedTtsVoice], () => {
-  synthesizedAudio.value = null
-})
-
-// 监听试听相关参数变化，清除缓存
-watch([ttsText, speechRate, instruction, emotion], () => {
-  // 清除试听缓存
-  previewAudioCache.forEach(audioData => {
-    URL.revokeObjectURL(audioData.objectUrl)
-  })
-  previewAudioCache.clear()
-  console.log('试听参数已变化，清除缓存')
-})
-
-</script>
-
-<template>
-  <div class="digital-video-page">
-    <div class="digital-video-grid">
-      <!-- 左侧配置 -->
-      <section class="digital-video-left">
-        <!-- 文本输入 -->
-        <div class="tts-section">
-          <div class="section-label">文案</div>
-          <a-textarea
-            v-model:value="ttsText"
-            placeholder="请输入你想让角色说话的内容"
-            :rows="6"
-            class="tts-textarea"
-          />
-
-          <!-- 音色选择 -->
-          <div class="voice-selection">
-            <div class="section-label">音色</div>
-
-            <div class="voice-source-toggle">
-              <button
-                v-for="source in ['user']"
-                :key="source"
-                class="source-btn"
-                :class="{ active: voiceSource === source }"
-                @click="setVoiceSource(source)"
-              >
-                {{ source === 'system' ? '系统音色' : '我的音色' }}
-              </button>
-            </div>
-
-            <div v-if="displayedVoices.length === 0" class="empty-voices">
-              {{ voiceSource === 'user' ? '还没有配音，可先在"配音管理"中上传' : '暂无可用的系统音色' }}
-            </div>
-
-            <div class="voice-list">
-              <div
-                v-for="voice in displayedVoices"
-                :key="voice.id"
-                class="voice-list-item"
-                :class="{ selected: selectedTtsVoice === `${voice.source}-${voice.id}` }"
-                @click="selectVoiceProfile(voice)"
-              >
-                <div class="voice-item-info">
-                  <div class="voice-avatar">{{ voice.gender === 'male' ? '👨' : '👩' }}</div>
-                  <div class="voice-item-text">
-                    <div class="voice-name">{{ voice.name }}</div>
-                    <div class="voice-desc">{{ voice.description }}</div>
-                  </div>
-                </div>
-                <div class="voice-item-meta">
-                  <a-button
-                    size="small"
-                    type="link"
-                    class="preview-btn"
-                    :disabled="previewLoadingVoiceId === voice.id"
-                    @click.stop="playVoiceSample(voice)"
-                  >
-                    <template #icon>
-                      <SoundOutlined
-                        v-if="!previewLoadingVoiceId && !playingPreviewVoiceId"
-                        class="preview-icon"
-                      />
-                      <LoadingOutlined
-                        v-else-if="previewLoadingVoiceId === voice.id"
-                        class="preview-icon spinning"
-                      />
-                      <SoundOutlined
-                        v-else-if="playingPreviewVoiceId === voice.id"
-                        class="preview-icon playing"
-                      />
-                      <SoundOutlined
-                        v-else
-                        class="preview-icon idle"
-                      />
-                    </template>
-                  </a-button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- TTS 控制 -->
-          <div class="tts-controls">
-            <div class="control-group">
-              <div class="control-label">语速</div>
-              <div class="slider-card">
-                <div class="slider-info">
-                  <div class="slider-value">{{ speechRateDisplay }}</div>
-                  <button class="reset-btn" @click="speechRate = 1">重置</button>
-                </div>
-                <a-slider
-                  v-model:value="speechRate"
-                  :min="0.5"
-                  :max="2"
-                  :step="0.1"
-                  :marks="speechRateMarks"
-                  :tooltip-open="false"
-                />
-              </div>
-            </div>
-
-            <div v-if="voiceSource === 'system'" class="control-group">
-              <div class="control-label">情感</div>
-              <div class="control-tabs">
-                <button
-                  :class="['tab-btn', { active: !emotionActive }]"
-                  @click="emotionActive = false"
-                >
-                  语调
-                </button>
-                <button
-                  :class="['tab-btn', { active: emotionActive }]"
-                  @click="emotionActive = true"
-                >
-                  情感
-                </button>
-              </div>
-              <div class="emotion-buttons">
-                <button
-                  v-if="!emotionActive"
-                  v-for="inst in [
-                    { value: 'neutral', label: '中性' },
-                    { value: '请用自然流畅的语调朗读', label: '自然' },
-                    { value: '请用温柔专业的语调朗读', label: '温柔' },
-                    { value: '请用热情洋溢的语调朗读', label: '热情' },
-                    { value: '请用低沉磁性的语调朗读', label: '磁性' },
-                    { value: '请用活泼生动的语调朗读', label: '活泼' }
-                  ]"
-                  :key="inst.value"
-                  class="emotion-btn"
-                  :class="{ active: instruction === inst.value }"
-                  @click="instruction = inst.value"
-                >
-                  {{ inst.label }}
-                </button>
-                <button
-                  v-else
-                  v-for="emo in [
-                    { value: 'neutral', label: '中性' },
-                    { value: 'happy', label: '开心' },
-                    { value: 'sad', label: '悲伤' },
-                    { value: 'angry', label: '愤怒' },
-                    { value: 'excited', label: '兴奋' },
-                    { value: 'calm', label: '平静' }
-                  ]"
-                  :key="emo.value"
-                  class="emotion-btn"
-                  :class="{ active: emotion === emo.value }"
-                  @click="emotion = emo.value"
-                >
-                  {{ emo.label }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 视频上传 -->
-        <div class="video-section">
-          <div class="section-label">视频</div>
-
-          <a-upload-dragger
-            accept="video/*"
-            :before-upload="handleVideoUpload"
-            :show-upload-list="false"
-            @drop="handleVideoDrop"
-          >
-            <InboxOutlined class="upload-icon" />
-            <p class="upload-text">点击或拖拽上传视频</p>
-            <p class="upload-hint">
-              支持格式：MP4、MOV、AVI、WMV、FLV | 建议分辨率 ≥ 720p
-            </p>
-          </a-upload-dragger>
-
-          <div v-if="uploadedVideo" class="uploaded-video-preview">
-            <div class="preview-header">
-              <span>已上传视频</span>
-              <a-button type="link" danger size="small" @click="clearVideo">清除</a-button>
-            </div>
-            <video :src="uploadedVideo" controls />
-          </div>
-        </div>
-
-        <!-- 生成按钮 -->
-        <div class="generate-section">
-          <div v-if="!currentTaskId || currentTaskStatus === 'SUCCESS' || currentTaskStatus === 'FAILED' || currentTaskStatus === 'CANCELED'" class="generate-actions">
-            <a-button
-              type="primary"
-              size="large"
-              block
-              :disabled="!canGenerate"
-              :loading="isGenerating"
-              @click="generateVideo"
-            >
-              {{ isGenerating ? '生成中...' : '生成视频' }}
-            </a-button>
-            <p class="points-hint">生成视频将消耗积分，消耗量与视频时长相关</p>
-          </div>
-
-          <div v-else class="task-actions">
-            <div class="task-status">
-              <div class="status-row">
-                <span class="status-label">状态：</span>
-                <span class="status-value">{{ getStatusText(currentTaskStatus) }}</span>
-              </div>
-              <div class="status-row">
-                <span class="status-label">步骤：</span>
-                <span class="status-value">{{ getStepText(currentTaskStep) }}</span>
-              </div>
-            </div>
-          </div>
-
-          <a-progress
-            v-if="isGenerating"
-            :percent="generationProgress"
-            :show-info="true"
-            :status="currentTaskStatus === 'FAILED' ? 'exception' : 'active'"
-          />
-        </div>
-      </section>
-
-      <!-- 右侧预览 -->
-      <section class="digital-video-right">
-        <div class="preview-title">视频预览</div>
-
-        <div class="preview-area">
-          <div v-if="!previewVideoUrl" class="preview-placeholder">
-            <div class="placeholder-icon">📹</div>
-            <div class="placeholder-text">生成的视频将在这里显示</div>
-            <div class="placeholder-hint">请先完成配置，然后点击生成</div>
-          </div>
-
-          <div v-else class="preview-content">
-            <video :src="previewVideoUrl" controls class="preview-video" />
-            <div class="preview-actions">
-              <a-button type="primary" @click="downloadPreview">下载视频</a-button>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.digital-video-page {
-  min-height: calc(100vh - 70px);
-  background: var(--color-bg);
-}
-
-.digital-video-grid {
-  display: grid;
-  grid-template-columns: 500px 1fr;
-  gap: 16px;
-}
-
-.digital-video-left {
-  background: var(--color-surface);
-  border: 1px solid rgba(59, 130, 246, 0.1);
-  border-radius: var(--radius-card);
-  padding: 16px;
-  min-height: 600px;
-  position: sticky;
-  top: 86px;
-  max-height: calc(100vh - 102px);
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.digital-video-right {
-  background: var(--color-surface);
-  border: 1px solid rgba(59, 130, 246, 0.1);
-  border-radius: var(--radius-card);
-  padding: 16px;
-  min-height: 600px;
-}
-
-.tts-textarea {
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  border-radius: var(--radius-card);
-  padding: 12px;
-}
-
-.tts-hint {
-  margin-top: 8px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-.voice-selection {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.voice-source-toggle {
-  display: inline-flex;
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  border-radius: 24px;
-  overflow: hidden;
-}
-
-.source-btn {
-  padding: 6px 16px;
-  border: none;
-  background: transparent;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-}
-
-.source-btn.active {
-  background: rgba(59, 130, 246, 0.2);
-  color: var(--color-text);
-}
-
-.empty-voices {
-  padding: 8px 12px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px dashed rgba(59, 130, 246, 0.3);
-  border-radius: var(--radius-card);
-}
-
-.voice-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.voice-list-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 14px;
-  border: 1px solid rgba(59, 130, 246, 0.15);
-  border-radius: 10px;
-  background: rgba(0, 0, 0, 0.35);
-  cursor: pointer;
-}
-
-.voice-list-item:hover {
-  border-color: rgba(59, 130, 246, 0.5);
-}
-
-.voice-list-item.selected {
-  border-color: var(--color-primary);
-  background: rgba(59, 130, 246, 0.2);
-}
-
-.voice-item-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.voice-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: var(--color-surface);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-}
-
-.voice-item-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.voice-name {
-  font-size: 13px;
-  color: var(--color-text);
-  font-weight: 600;
-}
-
-.voice-desc {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-.voice-item-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.preview-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-
-.preview-icon {
-  font-size: 18px;
-  color: var(--color-text);
-  transition: all 0.3s;
-}
-
-/* 空闲状态（当前没有试听但有其他试听在进行） */
-.preview-icon.idle {
-  opacity: 0.5;
-}
-
-/* 加载中旋转动画 */
-.preview-icon.spinning {
-  animation: spin 1s linear infinite;
-  color: var(--color-text);
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* 播放中脉冲动画 */
-.preview-icon.playing {
-  animation: pulse 1.5s ease-in-out infinite;
-  color: var(--color-text);
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.1);
-    opacity: 0.7;
-  }
-}
-
-.voice-tag {
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: 20px;
-  padding: 2px 10px;
-  font-size: 11px;
-  color: var(--color-text-secondary);
-}
-
-.tts-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.control-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.control-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-.slider-card {
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  border-radius: 12px;
-  padding: 10px 12px;
-  background: rgba(0, 0, 0, 0.25);
-}
-
-.slider-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  margin-bottom: 8px;
-}
-
-.slider-value {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-.reset-btn {
-  padding: 4px 12px;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-text);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.emotion-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.control-tabs {
-  display: inline-flex;
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  border-radius: 20px;
-  overflow: hidden;
-  margin-bottom: 8px;
-}
-
-.tab-btn {
-  padding: 6px 20px;
-  border: none;
-  background: transparent;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.tab-btn.active {
-  background: rgba(59, 130, 246, 0.2);
-  color: var(--color-text);
-}
-
-.emotion-btn {
-  padding: 8px 16px;
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  border-radius: 20px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  background: rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.emotion-btn:hover {
-  border-color: rgba(59, 130, 246, 0.5);
-  background: rgba(59, 130, 246, 0.1);
-}
-
-.emotion-btn.active {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: white;
-}
-
-.video-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.upload-icon {
-  font-size: 48px;
-  color: var(--color-primary);
-}
-
-.upload-text {
-  font-size: 16px;
-  font-weight: 500;
-  margin: 16px 0 8px;
-}
-
-.upload-hint {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-.uploaded-video-preview {
-  padding: 12px;
-  background: var(--color-bg);
-  border-radius: var(--radius-card);
-  border: 1px solid var(--color-border);
-}
-
-.preview-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.uploaded-video-preview video {
-  width: 100%;
-}
-
-.generate-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.generate-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.points-hint {
-  text-align: center;
-  font-size: 12px;
-  color: #94a3b8;
-  margin: 0;
-}
-
-.task-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.task-status {
-  padding: 12px;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  border-radius: var(--radius-card);
-}
-
-.status-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.status-row:last-child {
-  margin-bottom: 0;
-}
-
-.status-label {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  font-weight: 600;
-}
-
-.status-value {
-  font-size: 13px;
-  color: var(--color-text);
-}
-
-.action-buttons {
-  display: flex;
-  gap: 8px;
-}
-
-.action-buttons .ant-btn {
-  flex: 1;
-}
-
-.preview-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  margin-bottom: 16px;
-}
-
-.preview-area {
-  width: 100%;
-  min-height: 500px;
-}
-
-.preview-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 500px;
-  background: rgba(0, 0, 0, 0.3);
-  border: 2px dashed rgba(59, 130, 246, 0.3);
-  border-radius: var(--radius-card);
-}
-
-.placeholder-icon {
-  font-size: 64px;
-  margin-bottom: 16px;
-  opacity: 0.5;
-}
-
-.placeholder-text {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--color-text);
-  margin-bottom: 8px;
-}
-
-.placeholder-hint {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-.preview-content {
-  width: 100%;
-}
-
-.preview-video {
-  width: 100%;
-  max-height: 600px;
-  border-radius: var(--radius-card);
-  background: #000;
-}
-
-.preview-actions {
-  margin-top: 16px;
-  display: flex;
-  justify-content: center;
-}
-
-@media (max-width: 1400px) {
-  .digital-video-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .digital-video-left {
-    position: static;
-    max-height: none;
-  }
-}
-</style>
diff --git a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/aiusagestats/service/AiUsageStatsServiceImpl.java b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/aiusagestats/service/AiUsageStatsServiceImpl.java
index 0db0364f77..8ace06c3ea 100644
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/aiusagestats/service/AiUsageStatsServiceImpl.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/aiusagestats/service/AiUsageStatsServiceImpl.java
@@ -96,7 +96,7 @@ public class AiUsageStatsServiceImpl implements AiUsageStatsService {
     public PageResult<AiUsageUserStatsRespVO> getUserStatsPage(AiUsageStatsPageReqVO reqVO) {
         // 查询用户统计数据
         List<Map<String, Object>> userStatsList = pointRecordMapper.selectUserStats(
-                reqVO.getStartTime(), reqVO.getEndTime(), reqVO.getBizType(), reqVO.getUserId());
+                reqVO.getStartTime(), reqVO.getEndTime(), reqVO.getBizType(), reqVO.getUserId(), reqVO.getMobile());
 
         // 计算总数
         long total = userStatsList.size();
diff --git a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/aiusagestats/vo/AiUsageStatsPageReqVO.java b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/aiusagestats/vo/AiUsageStatsPageReqVO.java
index 34d37340ba..368a3406de 100644
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/aiusagestats/vo/AiUsageStatsPageReqVO.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/aiusagestats/vo/AiUsageStatsPageReqVO.java
@@ -34,6 +34,9 @@ public class AiUsageStatsPageReqVO extends SortablePageParam {
     @Schema(description = "用户ID")
     private Long userId;
 
+    @Schema(description = "手机号")
+    private String mobile;
+
     @Schema(description = "服务标识")
     private String serviceCode;
 
diff --git a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/pointrecord/mapper/PointRecordMapper.java b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/pointrecord/mapper/PointRecordMapper.java
index eb52f5f688..59663b7a1f 100644
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/pointrecord/mapper/PointRecordMapper.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/muye/pointrecord/mapper/PointRecordMapper.java
@@ -78,13 +78,15 @@ public interface PointRecordMapper extends BaseMapperX<PointRecordDO> {
             "<if test='endTime != null'> AND create_time &lt;= #{endTime}</if>" +
             "<if test='bizType != null and bizType != \"\"'> AND biz_type = #{bizType}</if>" +
             "<if test='userId != null'> AND user_id = #{userId}</if>" +
+            "<if test='mobile != null and mobile != \"\"'> AND mobile LIKE CONCAT('%', #{mobile}, '%')</if>" +
             "GROUP BY user_id, mobile " +
             "ORDER BY consumePoints DESC" +
             "</script>")
     List<Map<String, Object>> selectUserStats(@Param("startTime") LocalDateTime startTime,
                                                @Param("endTime") LocalDateTime endTime,
                                                @Param("bizType") String bizType,
-                                               @Param("userId") Long userId);
+                                               @Param("userId") Long userId,
+                                               @Param("mobile") String mobile);
 
     /**
      * 按应用统计
diff --git a/yudao-ui-admin-vue3/src/api/muye/aiusagestats/index.ts b/yudao-ui-admin-vue3/src/api/muye/aiusagestats/index.ts
index b5d278b429..dfb9228407 100644
--- a/yudao-ui-admin-vue3/src/api/muye/aiusagestats/index.ts
+++ b/yudao-ui-admin-vue3/src/api/muye/aiusagestats/index.ts
@@ -68,6 +68,7 @@ export const getAiUsageUserStatsPage = (params: {
   endTime?: string
   bizType?: string
   userId?: number
+  mobile?: string
 }) => {
   return request.get({ url: '/muye/ai-usage-stats/user-stats', params })
 }
diff --git a/yudao-ui-admin-vue3/src/views/muye/aiusage/components/AppStatsPanel.vue b/yudao-ui-admin-vue3/src/views/muye/aiusage/components/AppStatsPanel.vue
new file mode 100644
index 0000000000..a3e59cd3a6
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/muye/aiusage/components/AppStatsPanel.vue
@@ -0,0 +1,360 @@
+<template>
+  <div class="app-stats-panel">
+    <!-- 筛选条件 -->
+    <el-form :model="queryParams" :inline="true" class="mb-16px">
+      <el-form-item label="应用">
+        <el-select
+          v-model="queryParams.serviceCode"
+          placeholder="全部应用"
+          clearable
+          filterable
+          class="!w-200px"
+          @change="handleQuery"
+        >
+          <el-option
+            v-for="app in appOptions"
+            :key="app.serviceCode"
+            :label="app.serviceName || app.serviceCode"
+            :value="app.serviceCode"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">
+          <Icon icon="ep:search" class="mr-4px" /> 查询
+        </el-button>
+        <el-button @click="handleReset">
+          <Icon icon="ep:refresh" class="mr-4px" /> 重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 统计卡片 -->
+    <el-row :gutter="16" class="mb-16px">
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="stat-card">
+            <div class="stat-icon bg-blue">
+              <Icon icon="ep:menu" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">应用数量</div>
+              <div class="stat-value">{{ summary.appCount?.toLocaleString() || 0 }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="stat-card">
+            <div class="stat-icon bg-green">
+              <Icon icon="ep:phone" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">总调用次数</div>
+              <div class="stat-value">{{ summary.totalCallCount?.toLocaleString() || 0 }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="stat-card">
+            <div class="stat-icon bg-orange">
+              <Icon icon="ep:coin" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">总消耗积分</div>
+              <div class="stat-value">{{ summary.totalConsumePoints?.toLocaleString() || 0 }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="stat-card">
+            <div class="stat-icon bg-purple">
+              <Icon icon="ep:data-analysis" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">平均积分/应用</div>
+              <div class="stat-value">{{ avgPointsPerApp }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 图表区域 -->
+    <el-row :gutter="16" class="mb-16px">
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span>应用积分消耗排行 TOP10</span>
+            </div>
+          </template>
+          <div ref="rankChartRef" class="chart-container"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span>平台占比分布</span>
+            </div>
+          </template>
+          <div ref="pieChartRef" class="chart-container"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 数据表格 -->
+    <el-card shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span>应用详细统计</span>
+        </div>
+      </template>
+      <el-table v-loading="loading" :data="filteredDataList" :stripe="true">
+        <el-table-column label="服务标识" align="center" prop="serviceCode" width="150" />
+        <el-table-column label="服务名称" align="center" prop="serviceName" />
+        <el-table-column label="平台" align="center" prop="platform" width="100" />
+        <el-table-column label="调用次数" align="center" prop="callCount" sortable>
+          <template #default="{ row }">{{ row.callCount?.toLocaleString() }}</template>
+        </el-table-column>
+        <el-table-column label="消耗积分" align="center" prop="consumePoints" sortable>
+          <template #default="{ row }">{{ row.consumePoints?.toLocaleString() }}</template>
+        </el-table-column>
+        <el-table-column label="总Token" align="center" prop="totalTokens" sortable>
+          <template #default="{ row }">{{ row.totalTokens?.toLocaleString() || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="平均积分/次" align="center" prop="avgPointsPerCall" sortable>
+          <template #default="{ row }">{{ row.avgPointsPerCall?.toFixed(2) }}</template>
+        </el-table-column>
+        <el-table-column label="平均Token/次" align="center" prop="avgTokensPerCall" sortable>
+          <template #default="{ row }">{{ row.avgTokensPerCall?.toFixed(2) }}</template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getAiUsageAppStats, type AiUsageAppStats } from '@/api/muye/aiusagestats'
+
+interface Props {
+  timeRange: string[]
+  bizType: string
+}
+
+const props = defineProps<Props>()
+
+// 查询参数
+const queryParams = reactive({
+  serviceCode: undefined as string | undefined
+})
+
+// 数据
+const loading = ref(false)
+const dataList = ref<AiUsageAppStats[]>([])
+const appOptions = ref<{ serviceCode: string; serviceName: string }[]>([])
+
+// 筛选后的数据
+const filteredDataList = computed(() => {
+  if (!queryParams.serviceCode) return dataList.value
+  return dataList.value.filter(d => d.serviceCode === queryParams.serviceCode)
+})
+
+// 汇总数据
+const summary = computed(() => {
+  const data = filteredDataList.value
+  const appCount = data.length
+  const totalCallCount = data.reduce((sum, item) => sum + (item.callCount || 0), 0)
+  const totalConsumePoints = data.reduce((sum, item) => sum + (item.consumePoints || 0), 0)
+  return { appCount, totalCallCount, totalConsumePoints }
+})
+
+const avgPointsPerApp = computed(() => {
+  if (summary.value.appCount === 0) return '0'
+  return (summary.value.totalConsumePoints / summary.value.appCount).toFixed(2)
+})
+
+// 图表
+const rankChartRef = ref<HTMLElement>()
+const pieChartRef = ref<HTMLElement>()
+let rankChart: echarts.ECharts | null = null
+let pieChart: echarts.ECharts | null = null
+
+const initCharts = () => {
+  if (rankChartRef.value && !rankChart) {
+    rankChart = echarts.init(rankChartRef.value)
+  }
+  if (pieChartRef.value && !pieChart) {
+    pieChart = echarts.init(pieChartRef.value)
+  }
+}
+
+const drawCharts = () => {
+  initCharts()
+  const data = filteredDataList.value
+
+  // 积分消耗排行 TOP10
+  const topByPoints = [...data]
+    .sort((a, b) => (b.consumePoints || 0) - (a.consumePoints || 0))
+    .slice(0, 10)
+
+  if (rankChart && topByPoints.length > 0) {
+    rankChart.setOption({
+      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+      grid: { left: 120, right: 20, top: 20, bottom: 20 },
+      xAxis: { type: 'value', name: '积分' },
+      yAxis: {
+        type: 'category',
+        data: topByPoints.map(d => d.serviceName || d.serviceCode).reverse(),
+        axisLabel: { width: 100, overflow: 'truncate' }
+      },
+      series: [{
+        type: 'bar',
+        data: topByPoints.map(d => d.consumePoints).reverse(),
+        itemStyle: { color: '#e6a23c' }
+      }]
+    })
+  }
+
+  // 平台占比饼图
+  const platformStats = new Map<string, number>()
+  data.forEach(item => {
+    const platform = item.platform || '未知'
+    platformStats.set(platform, (platformStats.get(platform) || 0) + (item.consumePoints || 0))
+  })
+
+  const pieData = Array.from(platformStats.entries())
+    .map(([name, value]) => ({ name, value }))
+    .sort((a, b) => b.value - a.value)
+
+  if (pieChart && pieData.length > 0) {
+    pieChart.setOption({
+      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+      legend: { orient: 'vertical', left: 'left', top: 'center' },
+      series: [{
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['60%', '50%'],
+        data: pieData,
+        emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }},
+        label: { show: false }
+      }]
+    })
+  }
+}
+
+// 获取数据
+const getDataList = async () => {
+  loading.value = true
+  try {
+    const [startTime, endTime] = props.timeRange || []
+    const res = await getAiUsageAppStats({
+      startTime,
+      endTime,
+      bizType: props.bizType
+    })
+    dataList.value = res || []
+
+    // 构建应用选项
+    appOptions.value = (res || []).map(item => ({
+      serviceCode: item.serviceCode,
+      serviceName: item.serviceName || item.serviceCode
+    }))
+
+    await nextTick()
+    drawCharts()
+  } finally {
+    loading.value = false
+  }
+}
+
+// 查询
+const handleQuery = () => {
+  nextTick(() => drawCharts())
+}
+
+// 重置
+const handleReset = () => {
+  queryParams.serviceCode = undefined
+  handleQuery()
+}
+
+// 监听外部参数变化
+watch(() => [props.timeRange, props.bizType], () => {
+  getDataList()
+}, { deep: true })
+
+// 窗口大小变化
+const handleResize = () => {
+  rankChart?.resize()
+  pieChart?.resize()
+}
+
+onMounted(() => {
+  getDataList()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  rankChart?.dispose()
+  pieChart?.dispose()
+})
+</script>
+
+<style scoped lang="scss">
+.app-stats-panel {
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+
+    .stat-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      color: #fff;
+      margin-right: 16px;
+
+      &.bg-blue { background: linear-gradient(135deg, #409eff, #3375b9); }
+      &.bg-orange { background: linear-gradient(135deg, #e6a23c, #cf9236); }
+      &.bg-green { background: linear-gradient(135deg, #67c23a, #529b2e); }
+      &.bg-purple { background: linear-gradient(135deg, #909399, #73767a); }
+    }
+
+    .stat-content {
+      .stat-label {
+        font-size: 14px;
+        color: #909399;
+        margin-bottom: 4px;
+      }
+      .stat-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+  }
+
+  .card-header {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .chart-container {
+    height: 280px;
+  }
+}
+</style>
diff --git a/yudao-ui-admin-vue3/src/views/muye/aiusage/components/UserStatsPanel.vue b/yudao-ui-admin-vue3/src/views/muye/aiusage/components/UserStatsPanel.vue
new file mode 100644
index 0000000000..2b855e7025
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/muye/aiusage/components/UserStatsPanel.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="user-stats-panel">
+    <!-- 筛选条件 -->
+    <el-form :model="queryParams" :inline="true" class="mb-16px">
+      <el-form-item label="手机号">
+        <el-input
+          v-model="queryParams.mobile"
+          placeholder="请输入手机号"
+          clearable
+          class="!w-200px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">
+          <Icon icon="ep:search" class="mr-4px" /> 查询
+        </el-button>
+        <el-button @click="handleReset">
+          <Icon icon="ep:refresh" class="mr-4px" /> 重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 统计卡片 -->
+    <el-row :gutter="16" class="mb-16px">
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="stat-card">
+            <div class="stat-icon bg-blue">
+              <Icon icon="ep:user" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">活跃用户数</div>
+              <div class="stat-value">{{ summary.activeUserCount?.toLocaleString() || 0 }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="stat-card">
+            <div class="stat-icon bg-green">
+              <Icon icon="ep:phone" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">总调用次数</div>
+              <div class="stat-value">{{ summary.totalCallCount?.toLocaleString() || 0 }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="stat-card">
+            <div class="stat-icon bg-orange">
+              <Icon icon="ep:coin" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">总消耗积分</div>
+              <div class="stat-value">{{ summary.totalConsumePoints?.toLocaleString() || 0 }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div class="stat-card">
+            <div class="stat-icon bg-purple">
+              <Icon icon="ep:data-analysis" />
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">平均积分/用户</div>
+              <div class="stat-value">{{ avgPointsPerUser }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 图表区域 -->
+    <el-row :gutter="16" class="mb-16px">
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span>用户积分消耗排行 TOP10</span>
+            </div>
+          </template>
+          <div ref="rankChartRef" class="chart-container"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span>用户调用次数排行 TOP10</span>
+            </div>
+          </template>
+          <div ref="callChartRef" class="chart-container"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 数据表格 -->
+    <el-card shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span>用户详细统计</span>
+        </div>
+      </template>
+      <el-table v-loading="loading" :data="dataList" :stripe="true">
+        <el-table-column label="用户ID" align="center" prop="userId" width="100" />
+        <el-table-column label="手机号" align="center" prop="mobile" width="130" />
+        <el-table-column label="调用次数" align="center" prop="callCount" sortable>
+          <template #default="{ row }">{{ row.callCount?.toLocaleString() }}</template>
+        </el-table-column>
+        <el-table-column label="消耗积分" align="center" prop="consumePoints" sortable>
+          <template #default="{ row }">{{ row.consumePoints?.toLocaleString() }}</template>
+        </el-table-column>
+        <el-table-column label="输入Token" align="center" prop="inputTokens" sortable>
+          <template #default="{ row }">{{ row.inputTokens?.toLocaleString() || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="输出Token" align="center" prop="outputTokens" sortable>
+          <template #default="{ row }">{{ row.outputTokens?.toLocaleString() || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="总Token" align="center" prop="totalTokens" sortable>
+          <template #default="{ row }">{{ row.totalTokens?.toLocaleString() || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="平均积分/次" align="center" prop="avgPointsPerCall" sortable>
+          <template #default="{ row }">{{ row.avgPointsPerCall?.toFixed(2) }}</template>
+        </el-table-column>
+      </el-table>
+      <Pagination
+        v-model:page="pageParams.pageNo"
+        v-model:limit="pageParams.pageSize"
+        :total="pageParams.total"
+        @pagination="getDataList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getAiUsageUserStatsPage, type AiUsageUserStats } from '@/api/muye/aiusagestats'
+
+interface Props {
+  timeRange: string[]
+  bizType: string
+}
+
+const props = defineProps<Props>()
+
+// 查询参数
+const queryParams = reactive({
+  mobile: undefined as string | undefined
+})
+
+// 分页参数
+const pageParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  total: 0
+})
+
+// 数据
+const loading = ref(false)
+const dataList = ref<AiUsageUserStats[]>([])
+const allUserData = ref<AiUsageUserStats[]>([])
+
+// 汇总数据
+const summary = computed(() => {
+  const activeUserCount = allUserData.value.length
+  const totalCallCount = allUserData.value.reduce((sum, item) => sum + (item.callCount || 0), 0)
+  const totalConsumePoints = allUserData.value.reduce((sum, item) => sum + (item.consumePoints || 0), 0)
+  return { activeUserCount, totalCallCount, totalConsumePoints }
+})
+
+const avgPointsPerUser = computed(() => {
+  if (summary.value.activeUserCount === 0) return '0'
+  return (summary.value.totalConsumePoints / summary.value.activeUserCount).toFixed(2)
+})
+
+// 图表
+const rankChartRef = ref<HTMLElement>()
+const callChartRef = ref<HTMLElement>()
+let rankChart: echarts.ECharts | null = null
+let callChart: echarts.ECharts | null = null
+
+const initCharts = () => {
+  if (rankChartRef.value && !rankChart) {
+    rankChart = echarts.init(rankChartRef.value)
+  }
+  if (callChartRef.value && !callChart) {
+    callChart = echarts.init(callChartRef.value)
+  }
+}
+
+const drawCharts = () => {
+  initCharts()
+
+  // 积分消耗排行 TOP10
+  const topByPoints = [...allUserData.value]
+    .sort((a, b) => (b.consumePoints || 0) - (a.consumePoints || 0))
+    .slice(0, 10)
+
+  if (rankChart && topByPoints.length > 0) {
+    rankChart.setOption({
+      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+      grid: { left: 100, right: 20, top: 20, bottom: 20 },
+      xAxis: { type: 'value', name: '积分' },
+      yAxis: {
+        type: 'category',
+        data: topByPoints.map(d => d.mobile || `用户${d.userId}`).reverse(),
+        axisLabel: { width: 80, overflow: 'truncate' }
+      },
+      series: [{
+        type: 'bar',
+        data: topByPoints.map(d => d.consumePoints).reverse(),
+        itemStyle: { color: '#e6a23c' }
+      }]
+    })
+  }
+
+  // 调用次数排行 TOP10
+  const topByCalls = [...allUserData.value]
+    .sort((a, b) => (b.callCount || 0) - (a.callCount || 0))
+    .slice(0, 10)
+
+  if (callChart && topByCalls.length > 0) {
+    callChart.setOption({
+      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+      grid: { left: 100, right: 20, top: 20, bottom: 20 },
+      xAxis: { type: 'value', name: '次数' },
+      yAxis: {
+        type: 'category',
+        data: topByCalls.map(d => d.mobile || `用户${d.userId}`).reverse(),
+        axisLabel: { width: 80, overflow: 'truncate' }
+      },
+      series: [{
+        type: 'bar',
+        data: topByCalls.map(d => d.callCount).reverse(),
+        itemStyle: { color: '#409eff' }
+      }]
+    })
+  }
+}
+
+// 获取数据
+const getDataList = async () => {
+  loading.value = true
+  try {
+    const [startTime, endTime] = props.timeRange || []
+    const res = await getAiUsageUserStatsPage({
+      pageNo: pageParams.pageNo,
+      pageSize: pageParams.pageSize,
+      startTime,
+      endTime,
+      bizType: props.bizType,
+      mobile: queryParams.mobile
+    })
+    dataList.value = res?.list || []
+    pageParams.total = res?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取全部数据用于图表
+const getAllDataForChart = async () => {
+  const [startTime, endTime] = props.timeRange || []
+  const res = await getAiUsageUserStatsPage({
+    pageNo: 1,
+    pageSize: 100,
+    startTime,
+    endTime,
+    bizType: props.bizType,
+    mobile: queryParams.mobile
+  })
+  allUserData.value = res?.list || []
+
+  await nextTick()
+  drawCharts()
+}
+
+// 查询
+const handleQuery = () => {
+  pageParams.pageNo = 1
+  getDataList()
+  getAllDataForChart()
+}
+
+// 重置
+const handleReset = () => {
+  queryParams.mobile = undefined
+  handleQuery()
+}
+
+// 监听外部参数变化
+watch(() => [props.timeRange, props.bizType], () => {
+  handleQuery()
+}, { deep: true })
+
+// 窗口大小变化
+const handleResize = () => {
+  rankChart?.resize()
+  callChart?.resize()
+}
+
+onMounted(() => {
+  handleQuery()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  rankChart?.dispose()
+  callChart?.dispose()
+})
+</script>
+
+<style scoped lang="scss">
+.user-stats-panel {
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+
+    .stat-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      color: #fff;
+      margin-right: 16px;
+
+      &.bg-blue { background: linear-gradient(135deg, #409eff, #3375b9); }
+      &.bg-orange { background: linear-gradient(135deg, #e6a23c, #cf9236); }
+      &.bg-green { background: linear-gradient(135deg, #67c23a, #529b2e); }
+      &.bg-purple { background: linear-gradient(135deg, #909399, #73767a); }
+    }
+
+    .stat-content {
+      .stat-label {
+        font-size: 14px;
+        color: #909399;
+        margin-bottom: 4px;
+      }
+      .stat-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+  }
+
+  .card-header {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .chart-container {
+    height: 280px;
+  }
+}
+</style>
diff --git a/yudao-ui-admin-vue3/src/views/muye/aiusage/index.vue b/yudao-ui-admin-vue3/src/views/muye/aiusage/index.vue
index 87c020025e..288b3e95b6 100644
--- a/yudao-ui-admin-vue3/src/views/muye/aiusage/index.vue
+++ b/yudao-ui-admin-vue3/src/views/muye/aiusage/index.vue
@@ -29,7 +29,7 @@
 
   <!-- Tab 切换 -->
   <ContentWrap>
-    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+    <el-tabs v-model="activeTab">
       <!-- 概览 Tab -->
       <el-tab-pane label="概览" name="overview">
         <!-- 统计卡片 -->
@@ -136,58 +136,12 @@
 
       <!-- 用户统计 Tab -->
       <el-tab-pane label="用户统计" name="user">
-        <el-table v-loading="userLoading" :data="userStatsList" :stripe="true">
-          <el-table-column label="用户ID" align="center" prop="userId" />
-          <el-table-column label="手机号" align="center" prop="mobile" />
-          <el-table-column label="调用次数" align="center" prop="callCount">
-            <template #default="{ row }">{{ row.callCount?.toLocaleString() }}</template>
-          </el-table-column>
-          <el-table-column label="消耗积分" align="center" prop="consumePoints">
-            <template #default="{ row }">{{ row.consumePoints?.toLocaleString() }}</template>
-          </el-table-column>
-          <el-table-column label="输入Token" align="center" prop="inputTokens">
-            <template #default="{ row }">{{ row.inputTokens?.toLocaleString() || '-' }}</template>
-          </el-table-column>
-          <el-table-column label="输出Token" align="center" prop="outputTokens">
-            <template #default="{ row }">{{ row.outputTokens?.toLocaleString() || '-' }}</template>
-          </el-table-column>
-          <el-table-column label="总Token" align="center" prop="totalTokens">
-            <template #default="{ row }">{{ row.totalTokens?.toLocaleString() || '-' }}</template>
-          </el-table-column>
-          <el-table-column label="平均积分/次" align="center" prop="avgPointsPerCall">
-            <template #default="{ row }">{{ row.avgPointsPerCall?.toFixed(2) }}</template>
-          </el-table-column>
-        </el-table>
-        <Pagination
-          v-model:page="userPageParams.pageNo"
-          v-model:limit="userPageParams.pageSize"
-          :total="userPageParams.total"
-          @pagination="getUserStatsList"
-        />
+        <UserStatsPanel v-if="activeTab === 'user'" :time-range="queryParams.timeRange" :biz-type="queryParams.bizType" />
       </el-tab-pane>
 
       <!-- 应用统计 Tab -->
       <el-tab-pane label="应用统计" name="app">
-        <el-table v-loading="appLoading" :data="appStatsList" :stripe="true">
-          <el-table-column label="服务标识" align="center" prop="serviceCode" />
-          <el-table-column label="服务名称" align="center" prop="serviceName" />
-          <el-table-column label="平台" align="center" prop="platform" />
-          <el-table-column label="调用次数" align="center" prop="callCount">
-            <template #default="{ row }">{{ row.callCount?.toLocaleString() }}</template>
-          </el-table-column>
-          <el-table-column label="消耗积分" align="center" prop="consumePoints">
-            <template #default="{ row }">{{ row.consumePoints?.toLocaleString() }}</template>
-          </el-table-column>
-          <el-table-column label="总Token" align="center" prop="totalTokens">
-            <template #default="{ row }">{{ row.totalTokens?.toLocaleString() || '-' }}</template>
-          </el-table-column>
-          <el-table-column label="平均积分/次" align="center" prop="avgPointsPerCall">
-            <template #default="{ row }">{{ row.avgPointsPerCall?.toFixed(2) }}</template>
-          </el-table-column>
-          <el-table-column label="平均Token/次" align="center" prop="avgTokensPerCall">
-            <template #default="{ row }">{{ row.avgTokensPerCall?.toFixed(2) }}</template>
-          </el-table-column>
-        </el-table>
+        <AppStatsPanel v-if="activeTab === 'app'" :time-range="queryParams.timeRange" :biz-type="queryParams.bizType" />
       </el-tab-pane>
     </el-tabs>
   </ContentWrap>
@@ -198,13 +152,11 @@ import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 import {
   getAiUsageOverview,
-  getAiUsageUserStatsPage,
-  getAiUsageAppStats,
   getAiUsageTrend,
-  type AiUsageOverview,
-  type AiUsageUserStats,
-  type AiUsageAppStats
+  type AiUsageOverview
 } from '@/api/muye/aiusagestats'
+import UserStatsPanel from './components/UserStatsPanel.vue'
+import AppStatsPanel from './components/AppStatsPanel.vue'
 
 defineOptions({ name: 'AiUsageStats' })
 
@@ -254,19 +206,6 @@ const activeTab = ref('overview')
 // 概览数据
 const overviewData = ref<AiUsageOverview>({} as AiUsageOverview)
 
-// 用户统计
-const userLoading = ref(false)
-const userStatsList = ref<AiUsageUserStats[]>([])
-const userPageParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  total: 0
-})
-
-// 应用统计
-const appLoading = ref(false)
-const appStatsList = ref<AiUsageAppStats[]>([])
-
 // 图表
 const trendChartRef = ref<HTMLElement>()
 const pieChartRef = ref<HTMLElement>()
@@ -303,10 +242,8 @@ const getTrendData = async () => {
     type: 'day'
   })
 
-  // 确保 DOM 已渲染
   await nextTick()
 
-  // 初始化图表
   if (!initTrendChart()) {
     console.warn('趋势图表容器未找到')
     return
@@ -342,7 +279,6 @@ const initPieChart = () => {
 
 // 绘制饼图
 const drawPieChart = () => {
-  // 初始化图表
   if (!initPieChart()) {
     console.warn('饼图容器未找到')
     return
@@ -367,61 +303,13 @@ const drawPieChart = () => {
   }
 }
 
-// 获取用户统计列表
-const getUserStatsList = async () => {
-  userLoading.value = true
-  try {
-    const [startTime, endTime] = queryParams.timeRange || []
-    const res = await getAiUsageUserStatsPage({
-      pageNo: userPageParams.pageNo,
-      pageSize: userPageParams.pageSize,
-      startTime,
-      endTime,
-      bizType: queryParams.bizType
-    })
-    userStatsList.value = res?.list || []
-    userPageParams.total = res?.total || 0
-  } finally {
-    userLoading.value = false
-  }
-}
-
-// 获取应用统计列表
-const getAppStatsList = async () => {
-  appLoading.value = true
-  try {
-    const [startTime, endTime] = queryParams.timeRange || []
-    const res = await getAiUsageAppStats({
-      startTime,
-      endTime,
-      bizType: queryParams.bizType
-    })
-    appStatsList.value = res || []
-  } finally {
-    appLoading.value = false
-  }
-}
-
 // 查询
 const handleQuery = async () => {
+  if (activeTab.value !== 'overview') return
   await getOverviewData()
   await getTrendData()
   await nextTick()
   drawPieChart()
-  if (activeTab.value === 'user') {
-    getUserStatsList()
-  } else if (activeTab.value === 'app') {
-    getAppStatsList()
-  }
-}
-
-// Tab 切换
-const handleTabChange = (tab: string) => {
-  if (tab === 'user') {
-    getUserStatsList()
-  } else if (tab === 'app') {
-    getAppStatsList()
-  }
 }
 
 // 窗口大小变化时重绘图表