From dd913f4d14c2713dd42e0adaed4166d75476d9a4 Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Wed, 27 Aug 2025 11:13:48 +0800
Subject: [PATCH] =?UTF-8?q?fix(GoodMusic):=20=E4=BF=AE=E5=A4=8D=E4=BC=98?=
 =?UTF-8?q?=E7=A7=80=E5=BD=95=E9=9F=B3=E7=BB=84=E4=BB=B6=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(GoodMusic): 重构组件为Composition API风格
style(PeriodStage): 移除无用图例代码
chore(https): 更新API基础路径为本地测试地址
---
 my-vue-app/src/utils/https.js                 |    3 +-
 .../views/secondTop/components/GoodMusic.vue  | 1063 ++++++++---------
 my-vue-app/src/views/secondTop/secondTop.vue  |   44 +-
 .../views/topOne/components/PeriodStage.vue   |   14 -
 4 files changed, 495 insertions(+), 629 deletions(-)

diff --git a/my-vue-app/src/utils/https.js b/my-vue-app/src/utils/https.js
index b793261..a747212 100644
--- a/my-vue-app/src/utils/https.js
+++ b/my-vue-app/src/utils/https.js
@@ -5,7 +5,8 @@ import { useUserStore } from '@/stores/user'
 
 // 创建axios实例
 const service = axios.create({
-  baseURL: 'https://mldash.nycjy.cn/' || '', // API基础路径，支持完整URL
+  // baseURL: 'https://mldash.nycjy.cn/' || '', // API基础路径，支持完整URL
+    baseURL: 'http://192.168.15.121:8890' || '', // API基础路径，支持完整URL
   timeout: 100000, // 请求超时时间
   headers: {
     'Content-Type': 'application/json;charset=UTF-8'
diff --git a/my-vue-app/src/views/secondTop/components/GoodMusic.vue b/my-vue-app/src/views/secondTop/components/GoodMusic.vue
index 4367faa..b2817e4 100644
--- a/my-vue-app/src/views/secondTop/components/GoodMusic.vue
+++ b/my-vue-app/src/views/secondTop/components/GoodMusic.vue
@@ -4,23 +4,15 @@
       <div class="chart-container">
         <div class="chart-header">
           <h3>优秀录音</h3>
-          <button class="upload-icon-btn" @click="triggerFileUpload" title="上传录音">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              <line x1="12" y1="18" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              <polyline points="9,15 12,12 15,15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </button>
         </div>
         <div class="chart-content">
           <div class="recording-section">
             
             <!-- 录音文件列表 -->
             <div v-if="!showTranscriptView">
-              <div class="recording-list" v-if="processedRecordings.length > 0">
+              <div class="recording-list" v-if="recordings.length > 0">
                 <div 
-                  v-for="(recording, index) in processedRecordings" 
+                  v-for="(recording, index) in recordings" 
                   :key="index"
                   class="recording-item"
                   :class="{ active: selectedRecording === index }"
@@ -29,10 +21,7 @@
                   <div class="recording-info">
                     <div class="recording-name" :title="recording.name">{{ recording.name.length > 10 ? recording.name.substring(0, 10) + '...' : recording.name }}</div>
                     <div class="recording-meta">
-                      <span v-if="recording.sale_name" class="sale-name">{{ recording.sale_name }}</span>
-                      <span v-if="recording.score" class="score">评分: {{ recording.score }}</span>
-                      <span class="file-size">{{ formatFileSize(recording.size) }}</span>
-                      <span class="upload-time">{{ recording.uploadTime || recording.date }}</span>
+                      <span class="upload-time">{{ recording.uploadTime }}</span>
                     </div>
                   </div>
                   <div class="recording-actions">
@@ -69,9 +58,8 @@
               <div class="result-header">
                 <button class="back-btn" @click="backToRecordings">
                   <i class="el-icon-arrow-left"></i>
-                  返回录音列表
+                  返回
                 </button>
-                <h4>{{ isConverting ? '正在转换...' : (currentViewType === 'transcript' ? '转换文本' : '录音分析') }}</h4>
                 <div class="header-actions">
                   <!-- 视图切换按钮 -->
                   <div class="view-toggle" v-if="currentTranscript && !isConverting">
@@ -92,7 +80,7 @@
                   </div>
                   <button class="expand-btn" @click="showExpandDialog" v-if="(currentTranscript && currentViewType === 'transcript') || (analysisResult && currentViewType === 'analysis')">
                     <i class="el-icon-full-screen"></i>
-                    展开查看
+                    展开
                   </button>
                   <button class="copy-btn" @click="copyText" v-if="currentTranscript && currentViewType === 'transcript'">
                     <i class="el-icon-document-copy"></i>
@@ -176,289 +164,315 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
 import { SimpleChatService } from '@/utils/ChatService.js'
 import MarkdownIt from 'markdown-it'
-import axios from 'axios'
 
-export default {
-  name: 'GoodMusic',
-  props: {
-    recordData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      recordings: [      ],
-      selectedRecording: null,
-      currentAudio: null,
-      showTranscriptView: false,
+// Props定义
+const props = defineProps({
+  qualityCalls: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// 响应式数据
+const staticRecordings = ref([
+  {
+    id: 1,
+    name: '常家硕-张三丰-亮剑二部-20分钟通话-25-07-16_18-23-04-44196-215.mp3',
+    size: 2048576, // 2MB
+    duration: '00:03:45',
+    date: '2024-01-15',
+    url: '/recordings/sample_call_1.mp3',
+    transcription: null
+  }
+])
+
+const selectedRecording = ref(null)
+const currentAudio = ref(null)
+const showTranscriptView = ref(false)
+const isConverting = ref(false)
+const currentTranscript = ref(null)
+const showDialog = ref(false)
+// 录音分析相关
+const showAnalysisView = ref(false)
+const isAnalyzing = ref(false)
+const analysisResult = ref('')
+const currentViewType = ref('transcript') // 'transcript' 或 'analysis'
+// Dify API配置
+const DIFY_API_KEY_02 = 'app-h4uBo5kOGoiYhjuBF1AHZi8b' // 通话录音分析
+const chatService_02 = ref(null)
+const md = ref(null)
+
+// 初始化服务
+onMounted(() => {
+  chatService_02.value = new SimpleChatService(DIFY_API_KEY_02)
+  md.value = new MarkdownIt({
+    html: true,
+    linkify: true,
+    typographer: true
+  })
+})
+// 计算属性
+// 处理传入的录音数据
+const recordings = computed(() => {
+  if (!props.qualityCalls ) {
+    return staticRecordings.value;
+  }
+  
+  const recordingsList = [];
+  Object.keys(props.qualityCalls).forEach(userName => {
+    props.qualityCalls[userName].forEach((record, index) => {
+      recordingsList.push({
+        id: recordingsList.length + 1,
+        name: record.obj_file_name ? record.obj_file_name.split('/').pop() : `${record.sale_name}-录音-${index + 1}`,
+        date: new Date().toISOString().split('T')[0],
+        url: record.obj_file_name,
+        transcription: record.context || null,
+        score: record.score,
+        sop: record.sop,
+        sale_name: record.sale_name,
+        size: 2048576, // 默认文件大小 2MB
+        uploadTime: new Date().toLocaleDateString('zh-CN')
+      });
+    });
+  });
+  
+  return recordingsList;
+})
+
+// 格式化分析结果
+const formattedAnalysisResult = computed(() => {
+  if (!analysisResult.value) return ''
+  return md.value.render(analysisResult.value)
+})
+// 生命周期钩子
+onBeforeUnmount(() => {
+  if (currentAudio.value) {
+    currentAudio.value.pause()
+    currentAudio.value = null
+  }
+})
+// 方法定义
+// 录音文件选择
+const handleFileSelect = (event) => {
+  const file = event.target.files[0]
+  if (file) {
+    const recording = {
+      name: file.name,
+      size: file.size,
+      uploadTime: new Date().toLocaleString(),
+      url: URL.createObjectURL(file),
+      isPlaying: false,
       isConverting: false,
-      currentTranscript: null,
-      showDialog: false,
-      // 录音分析相关
-      showAnalysisView: false,
-      isAnalyzing: false,
-      analysisResult: '',
-      currentViewType: 'transcript', // 'transcript' 或 'analysis'
-      // Dify API配置
-      DIFY_API_KEY_02: 'app-h4uBo5kOGoiYhjuBF1AHZi8b', // 通话录音分析
-      chatService_02: null,
-      md: null
+      transcript: null
     }
-  },
-  created() {
-    // 初始化服务
-    this.chatService_02 = new SimpleChatService(this.DIFY_API_KEY_02)
-    this.md = new MarkdownIt({
-      html: true,
-      linkify: true,
-      typographer: true
-    })
-  },
-  computed: {
-    // 格式化分析结果
-    formattedAnalysisResult() {
-      if (!this.analysisResult) return ''
-      return this.md.render(this.analysisResult)
-    },
-    // 处理外部传入的录音数据
-    processedRecordings() {
-      let externalRecordings = []
-      
-      // 处理外部传入的数据
-      if (this.recordData && this.recordData.excellent_record_list) {
-        const recordList = this.recordData.excellent_record_list
-        
-        // 遍历每个销售人员的录音
-        Object.keys(recordList).forEach(saleName => {
-          recordList[saleName].forEach((record, index) => {
-            externalRecordings.push({
-              id: `${saleName}_${index}`,
-              name: record.obj_file_name ? record.obj_file_name.split('/').pop() : `${record.sale_name}的录音`,
-              size: 2048576, // 默认大小
-              duration: '未知',
-              date: new Date().toLocaleDateString(),
-              url: record.obj_file_name,
-              transcription: record.context || null,
-              score: record.score,
-              sale_name: record.sale_name,
-              sop: record.sop,
-              isPlaying: false,
-              isConverting: false
-            })
-          })
-        })
-      }
-      
-      // 合并外部数据和本地数据
-      return [...externalRecordings, ...this.recordings]
-    }
-  },
-  beforeUnmount() {
-    if (this.currentAudio) {
-      this.currentAudio.pause()
-      this.currentAudio = null
-    }
-  },
-  methods: {
-    // 录音文件选择
-    handleFileSelect(event) {
-      const file = event.target.files[0]
-      if (file) {
-        const recording = {
-          name: file.name,
-          size: file.size,
-          uploadTime: new Date().toLocaleString(),
-          url: URL.createObjectURL(file),
-          isPlaying: false,
-          isConverting: false,
-          transcript: null
-        }
-        // 如果没有外部数据，则添加到本地recordings数组
-        if (!this.recordData || !this.recordData.excellent_record_list) {
-          this.recordings.push(recording)
-        } else {
-          // 如果有外部数据，可以触发事件通知父组件或其他处理逻辑
-          this.$emit('file-uploaded', recording)
-        }
-        // 清空input以便重复选择同一文件
-        event.target.value = ''
-      }
-    },
-    // 选择录音
-    selectRecording(index) {
-      this.selectedRecording = index
-    },
-    // 播放/暂停录音
-    togglePlay(index) {
-      const recording = this.processedRecordings[index]
-      
-      // 停止当前播放的音频
-      if (this.currentAudio) {
-        this.currentAudio.pause()
-        this.processedRecordings.forEach(r => r.isPlaying = false)
-      }
-      
-      if (!recording.isPlaying) {
-        this.currentAudio = new Audio(recording.url)
-        this.currentAudio.play()
-        recording.isPlaying = true
-        
-        this.currentAudio.onended = () => {
-          recording.isPlaying = false
-          this.currentAudio = null
-        }
-      }
-    },    
-    // 开始通话录音分析
-    async startRecordingAnalysis(recording) {
-      this.isAnalyzing = true
-      this.analysisResult = ''
-      
-      // 构建通话录音分析查询
-      const recordingQuery = `请对录音文件 ${recording.name} 进行通话录音分析，包括：
-1. 通话质量评估
-2. 客户情绪分析
-3. 沟通效果评价
-4. 关键信息提取
-5. 改进建议
+    staticRecordings.value.push(recording)
+    // 清空input以便重复选择同一文件
+    event.target.value = ''
+  }
+}
 
-录音信息：
-文件名：${recording.name}
-文件大小：${this.formatFileSize(recording.size)}
-转换文本：${recording.transcription}`
-      
-      try {
-        await this.chatService_02.sendMessage(
-          recordingQuery,
-          (update) => {
-            // 实时更新通话录音分析结果
-            this.analysisResult = update.content
-          },
-          () => {
-            // 流结束回调
-            console.log('通话录音分析完成')
-            this.isAnalyzing = false
-          }
-        )
-      } catch (error) {
-        console.error('通话录音分析失败:', error)
-        this.analysisResult = '通话录音分析失败，请重试。'
-        this.isAnalyzing = false
-      }
-    },
+// 选择录音
+const selectRecording = (index) => {
+  selectedRecording.value = index
+}
+
+// 播放/暂停录音
+const togglePlay = (index) => {
+  const recording = recordings.value[index]
+  
+  // 停止当前播放的音频
+  if (currentAudio.value) {
+    currentAudio.value.pause()
+    recordings.value.forEach(r => r.isPlaying = false)
+  }
+  
+  if (!recording.isPlaying) {
+    currentAudio.value = new Audio(recording.url)
+    currentAudio.value.play()
+    recording.isPlaying = true
     
-    // 切换视图类型
-    switchViewType(type) {
-      this.currentViewType = type
-    },
+    currentAudio.value.onended = () => {
+      recording.isPlaying = false
+      currentAudio.value = null
+    }
+  }
+}
+// 转换为文字
+const convertToText = async (index) => {
+  const recording = recordings.value[index]
+  selectedRecording.value = index
+  showTranscriptView.value = true
+  isConverting.value = true
+  currentTranscript.value = null
+  currentViewType.value = 'transcript'
+  
+  try {
+    // 模拟转换过程
+    await new Promise(resolve => setTimeout(resolve, 1000))
     
-    // 返回录音列表
-    backToRecordings() {
-      this.showTranscriptView = false
-      this.currentTranscript = null
-      this.analysisResult = ''
-      this.currentViewType = 'transcript'
-      this.isAnalyzing = false
-    },
-    // 复制文本
-    copyText() {
-      if (this.currentTranscript) {
-        navigator.clipboard.writeText(this.currentTranscript)
+    // 使用从API获取的transcription数据
+    if (recording.transcription) {
+      recording.transcript = recording.transcription
+      currentTranscript.value = recording.transcription
+    } else {
+      // 如果没有transcription数据，显示提示信息
+      recording.transcript = '暂无转换文本数据'
+      currentTranscript.value = '暂无转换文本数据'
+    }
+    
+    // 添加转换完成的动画效果
+    const resultElement = document.querySelector('.conversion-result')
+    if (resultElement) {
+      resultElement.classList.add('show-result')
+      setTimeout(() => {
+        resultElement.classList.remove('show-result')
+      }, 1000)
+    }
+  } catch (error) {
+    console.error('转换失败:', error)
+    alert('转换失败，请重试')
+    showTranscriptView.value = false
+  } finally {
+    isConverting.value = false
+  }
+}
+    
+// 开始通话录音分析
+const startRecordingAnalysis = async (recording) => {
+  isAnalyzing.value = true
+  
+  try {
+    // 使用从API获取的sop数据作为录音分析结果
+    if (recording.sop) {
+      analysisResult.value = recording.sop
+    } else {
+      analysisResult.value = '暂无录音分析数据'
+    }
+    
+    // 模拟分析过程
+    await new Promise(resolve => setTimeout(resolve, 500))
+    
+    console.log('录音分析完成')
+  } catch (error) {
+    console.error('录音分析失败:', error)
+    analysisResult.value = '录音分析失败，请重试。'
+  } finally {
+    isAnalyzing.value = false
+  }
+}
+    
+// 切换视图类型
+const switchViewType = (type) => {
+  currentViewType.value = type
+  
+  // 如果切换到录音分析视图，且还没有分析结果，则开始分析
+  if (type === 'analysis' && !analysisResult.value && selectedRecording.value !== null) {
+    const recording = recordings.value[selectedRecording.value]
+    startRecordingAnalysis(recording)
+  }
+}
+
+// 返回录音列表
+const backToRecordings = () => {
+  showTranscriptView.value = false
+  currentTranscript.value = null
+  analysisResult.value = ''
+  currentViewType.value = 'transcript'
+  isAnalyzing.value = false
+}
+
+// 复制文本
+const copyText = async () => {
+  if (currentTranscript.value) {
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(currentTranscript.value)
+        alert('文本已复制到剪贴板')
+      } else {
+        // 降级方案：使用传统的复制方法
+        const textArea = document.createElement('textarea')
+        textArea.value = currentTranscript.value
+        document.body.appendChild(textArea)
+        textArea.select()
+        document.execCommand('copy')
+        document.body.removeChild(textArea)
         alert('文本已复制到剪贴板')
       }
-    },
-    // 复制分析结果
-    copyAnalysisText() {
-      if (this.analysisResult) {
-        navigator.clipboard.writeText(this.analysisResult)
+    } catch (error) {
+      console.error('复制失败:', error)
+      alert('复制失败，请手动复制')
+    }
+  }
+}
+
+// 复制分析结果
+const copyAnalysisText = async () => {
+  if (analysisResult.value) {
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(analysisResult.value)
+        alert('分析结果已复制到剪贴板')
+      } else {
+        // 降级方案：使用传统的复制方法
+        const textArea = document.createElement('textarea')
+        textArea.value = analysisResult.value
+        document.body.appendChild(textArea)
+        textArea.select()
+        document.execCommand('copy')
+        document.body.removeChild(textArea)
         alert('分析结果已复制到剪贴板')
       }
-    },
-    // 显示展开弹框
-    showExpandDialog() {
-      this.showDialog = true
-    },
-    // 关闭弹框
-    closeDialog() {
-      this.showDialog = false
-    },
-    // 格式化文件大小
-    formatFileSize(bytes) {
-      if (bytes === 0) return '0 Bytes'
-      const k = 1024
-      const sizes = ['Bytes', 'KB', 'MB', 'GB']
-      const i = Math.floor(Math.log(bytes) / Math.log(k))
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-    },
-    triggerFileUpload() {
-      const fileInput = document.createElement('input')
-      fileInput.type = 'file'
-      fileInput.accept = 'audio/*'
-      fileInput.style.display = 'none'
-      fileInput.addEventListener('change', this.handleFileSelect)
-      document.body.appendChild(fileInput)
-      fileInput.click()
-      document.body.removeChild(fileInput)
-    },
-    // 转换为文字
-    convertToText(index) {
-      const recording = this.processedRecordings[index]
-      if (recording.isConverting) return
-      
-      // 如果有外部传入的transcription，直接显示
-      if (recording.transcription) {
-        this.currentTranscript = recording.transcription
-        this.showTranscriptView = true
-        this.currentViewType = 'transcript'
-        
-        // 开始录音分析
-        this.switchViewType('analysis')
-        this.startRecordingAnalysis(recording)
-        return
-      }
-      
-      recording.isConverting = true
-      this.isConverting = true
-      this.showTranscriptView = true
-      this.currentViewType = 'transcript'
-      
-      // 模拟转换过程（用于本地上传的文件）
-      setTimeout(() => {
-        const transcriptText = `这是录音 "${recording.name}" 的转录文本内容。这里会显示实际的语音转文字结果。`
-        recording.transcription = transcriptText
-        this.currentTranscript = transcriptText
-        recording.isConverting = false
-        this.isConverting = false
-        
-        // 开始录音分析
-        this.startRecordingAnalysis(recording)
-      }, 2000)
-    },
-    downloadRecording(index) {
-      const recording = this.processedRecordings[index]
-      
-      // 使用obj_file_name字段作为下载链接
-      const downloadUrl = recording.url
-      
-      if (!downloadUrl) {
-        alert('录音文件不可用')
-        return
-      }
-      
-      const link = document.createElement('a')
-      link.href = downloadUrl
-      link.download = recording.name
-      link.style.display = 'none'
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
+    } catch (error) {
+      console.error('复制失败:', error)
+      alert('复制失败，请手动复制')
     }
   }
 }
+
+// 显示展开弹框
+const showExpandDialog = () => {
+  showDialog.value = true
+}
+
+// 关闭弹框
+const closeDialog = () => {
+  showDialog.value = false
+}
+// 格式化文件大小
+const formatFileSize = (bytes) => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+const triggerFileUpload = () => {
+  const fileInput = document.createElement('input')
+  fileInput.type = 'file'
+  fileInput.accept = 'audio/*'
+  fileInput.style.display = 'none'
+  fileInput.addEventListener('change', handleFileSelect)
+  document.body.appendChild(fileInput)
+  fileInput.click()
+  document.body.removeChild(fileInput)
+}
+
+const downloadRecording = (index) => {
+  const recording = recordings.value[index]
+  if (recording && recording.url) {
+    const link = document.createElement('a')
+    link.href = recording.url
+    link.download = recording.name
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
+}
 </script>
 
 <style scoped>
@@ -491,7 +505,7 @@ export default {
   background: white;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  min-height: 420px;
+  height: 400px;
 }
 
 .chart-header {
@@ -540,8 +554,8 @@ export default {
 
 .recording-section {
   width: 100%;
-  min-height: 300px;
-  max-height: 500px;
+  min-height: 200px;
+  max-height: 300px;
   overflow-y: auto;
 }
 
@@ -595,16 +609,6 @@ export default {
   color: #909399;
 }
 
-.sale-name {
-  color: #409eff;
-  font-weight: 500;
-}
-
-.score {
-  color: #67c23a;
-  font-weight: 500;
-}
-
 .recording-actions {
   display: flex;
   gap: 12px;
@@ -715,160 +719,98 @@ export default {
   100% { transform: scale(1); box-shadow: 0 0 0 rgba(0, 123, 255, 0); }
 }
 
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .result-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
-  background: #f5f7fa;
+  padding: 16px 20px;
+  background: #f8f9fa;
   border-bottom: 1px solid #ebeef5;
+  flex-shrink: 0;
+}
+
+.result-header h4 {
+  margin: 0;
+  color: #303133;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .header-actions {
   display: flex;
-  gap: 8px;
+  gap: 12px;
   align-items: center;
 }
 
 .view-toggle {
   display: flex;
-  background: #f5f7fa;
+  background: #e9ecef;
   border-radius: 6px;
-  padding: 2px;
+  overflow: hidden;
   margin-right: 12px;
 }
 
 .toggle-btn {
-  padding: 6px 12px;
+  padding: 8px 16px;
   border: none;
   background: transparent;
-  color: #606266;
   cursor: pointer;
-  border-radius: 4px;
-  font-size: 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #6c757d;
   transition: all 0.2s ease;
-  white-space: nowrap;
 }
 
 .toggle-btn.active {
-  background: #409eff;
+  background: #007bff;
   color: white;
-  box-shadow: 0 1px 3px rgba(64, 158, 255, 0.3);
 }
 
-.toggle-btn:not(.active):hover {
-  background: #ecf5ff;
-  color: #409eff;
+.toggle-btn:hover:not(.active) {
+  background: #dee2e6;
 }
 
-.back-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  background: white;
+.back-btn, .expand-btn, .copy-btn {
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background: #6c757d;
+  color: white;
   cursor: pointer;
   font-size: 13px;
-  color: #606266;
-  transition: all 0.2s ease;
-}
-
-.back-btn:hover {
-  border-color: #409eff;
-  color: #409eff;
-}
-
-.result-header h4 {
-  margin: 0;
-  font-size: 14px;
-  color: #303133;
-}
-
-.copy-btn, .expand-btn {
+  font-weight: 500;
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  background: white;
-  cursor: pointer;
-  font-size: 12px;
-  color: #606266;
+  gap: 6px;
   transition: all 0.2s ease;
 }
 
-.copy-btn:hover, .expand-btn:hover {
-  border-color: #409eff;
-  color: #409eff;
-}
-
-.expand-btn {
-  background: #f0f9ff;
-  border-color: #409eff;
-  color: #409eff;
-}
-
-.expand-btn:hover {
-  background: #409eff;
-  color: white;
+.back-btn:hover, .expand-btn:hover, .copy-btn:hover {
+  background: #5a6268;
+  transform: translateY(-1px);
 }
 
 .transcript-text {
-  padding: 8px;
+  padding: 20px;
   line-height: 1.6;
-  color: #303133;
+  color: #495057;
   background: white;
   flex: 1;
-  max-height: 200px;
-
   overflow-y: auto;
-  animation: fadeIn 0.5s ease;
+  white-space: pre-wrap;
+  word-wrap: break-word;
 }
 
 .analysis-result {
-  /* padding: 20px; */
-  /* margin: 0 20px 20px; */
-  max-height: 270px;
+  padding: 20px;
+  flex: 1;
   overflow-y: auto;
-}
-
-.analysis-content {
-  line-height: 1.8;
-  color: #303133;
-  font-size: 14px;
-  background: #fafafa;
-  border-radius: 4px;
-  padding: 8px;
-  max-height: 200px;
-
-}
-
-.analysis-content h1,
-.analysis-content h2,
-.analysis-content h3,
-.analysis-content h4,
-.analysis-content h5,
-.analysis-content h6 {
-  color: #409eff;
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-
-.analysis-content p {
-  margin-bottom: 12px;
-}
-
-.analysis-content ul,
-.analysis-content ol {
-  margin-bottom: 12px;
-  padding-left: 20px;
-}
-
-.analysis-content li {
-  margin-bottom: 6px;
+  background: white;
 }
 
 .analysis-loading {
@@ -876,81 +818,89 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px;
-  color: #909399;
-  text-align: center;
+  height: 200px;
+  color: #6c757d;
 }
 
-.analysis-loading p {
-  margin: 16px 0 0 0;
+.loading-animation {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 16px;
+}
+
+.loading-animation span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #007bff;
+  animation: bounce 1.4s ease-in-out infinite both;
+}
+
+.loading-animation span:nth-child(1) { animation-delay: -0.32s; }
+.loading-animation span:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+.analysis-content {
+  line-height: 1.6;
+  color: #495057;
+}
+
+.analysis-content h1, .analysis-content h2, .analysis-content h3 {
+  color: #343a40;
+  margin-top: 24px;
+  margin-bottom: 12px;
+}
+
+.analysis-content h1 { font-size: 24px; }
+.analysis-content h2 { font-size: 20px; }
+.analysis-content h3 { font-size: 18px; }
+
+.analysis-content p {
+  margin-bottom: 12px;
+}
+
+.analysis-content ul, .analysis-content ol {
+  margin-bottom: 12px;
+  padding-left: 24px;
+}
+
+.analysis-content li {
+  margin-bottom: 6px;
+}
+
+.analysis-content strong {
+  color: #343a40;
+  font-weight: 600;
+}
+
+.analysis-content code {
+  background: #f8f9fa;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
   font-size: 14px;
 }
 
 .no-analysis {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px;
-  color: #909399;
-  text-align: center;
-}
-
-.no-analysis p {
-  margin: 0;
-  font-size: 14px;
+  height: 200px;
+  color: #6c757d;
+  font-style: italic;
 }
 
 .transcript-loading {
-  padding: 30px 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: white;
-}
-
-.transcript-loading p {
-  margin-top: 16px;
-  color: #606266;
-  font-size: 14px;
-}
-
-.loading-animation {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-}
-
-.loading-animation span {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  background-color: #409eff;
-  border-radius: 50%;
-  animation: bounce 1.4s infinite ease-in-out both;
-}
-
-.loading-animation span:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.loading-animation span:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-@keyframes bounce {
-  0%, 80%, 100% { 
-    transform: scale(0);
-  } 40% { 
-    transform: scale(1.0);
-  }
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  height: 200px;
+  color: #6c757d;
 }
 
 .empty-state {
@@ -958,9 +908,9 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px;
+  height: 300px;
   color: #909399;
-  text-align: center;
+  font-size: 16px;
 }
 
 .empty-state i {
@@ -969,13 +919,6 @@ export default {
   opacity: 0.5;
 }
 
-.empty-state p {
-  margin: 0;
-  font-size: 14px;
-}
-
-/* 响应式设计 */
-/* 弹框样式 */
 .dialog-overlay {
   position: fixed;
   top: 0;
@@ -993,7 +936,6 @@ export default {
 .dialog-content {
   background: white;
   border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   width: 90%;
   max-width: 800px;
   max-height: 80vh;
@@ -1003,14 +945,8 @@ export default {
 }
 
 @keyframes slideIn {
-  from {
-    transform: translateY(-50px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
+  from { transform: translateY(-20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
 }
 
 .dialog-header {
@@ -1019,8 +955,6 @@ export default {
   align-items: center;
   padding: 20px;
   border-bottom: 1px solid #ebeef5;
-  background: #f8f9fa;
-  border-radius: 8px 8px 0 0;
 }
 
 .dialog-header h3 {
@@ -1033,9 +967,9 @@ export default {
 .close-btn {
   background: none;
   border: none;
-  font-size: 18px;
-  color: #909399;
+  font-size: 20px;
   cursor: pointer;
+  color: #909399;
   padding: 4px;
   border-radius: 4px;
   transition: all 0.2s ease;
@@ -1047,133 +981,59 @@ export default {
 }
 
 .dialog-body {
-  flex: 1;
   padding: 20px;
+  flex: 1;
   overflow-y: auto;
-  max-height: 60vh;
 }
 
-.expanded-transcript {
-  line-height: 1.8;
-  color: #303133;
-  font-size: 14px;
+.expanded-transcript, .expanded-analysis {
+  line-height: 1.6;
+  color: #495057;
   white-space: pre-wrap;
   word-wrap: break-word;
 }
 
-.expanded-analysis {
-  line-height: 1.8;
-  color: #303133;
-  font-size: 14px;
-}
-
-.expanded-analysis .analysis-content {
-  background: #fafafa;
-  border-radius: 4px;
-  padding: 20px;
-  margin: 0;
-}
-
-.expanded-analysis .analysis-content h1,
-.expanded-analysis .analysis-content h2,
-.expanded-analysis .analysis-content h3,
-.expanded-analysis .analysis-content h4,
-.expanded-analysis .analysis-content h5,
-.expanded-analysis .analysis-content h6 {
-  color: #409eff;
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-
-.expanded-analysis .analysis-content p {
-  margin-bottom: 12px;
-}
-
-.expanded-analysis .analysis-content ul,
-.expanded-analysis .analysis-content ol {
-  margin-bottom: 12px;
-  padding-left: 20px;
-}
-
-.expanded-analysis .analysis-content li {
-  margin-bottom: 6px;
-}
-
-.expanded-analysis .no-analysis {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  color: #909399;
-  text-align: center;
-}
-
-.expanded-analysis .no-analysis p {
-  margin: 0;
-  font-size: 14px;
-}
-
 .dialog-footer {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   padding: 20px;
   border-top: 1px solid #ebeef5;
-  background: #f8f9fa;
-  border-radius: 0 0 8px 8px;
 }
 
 .dialog-copy-btn, .dialog-close-btn {
-  padding: 8px 16px;
+  padding: 10px 20px;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
+  font-weight: 500;
   transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 4px;
 }
 
 .dialog-copy-btn {
-  background: #409eff;
+  background: #007bff;
   color: white;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .dialog-copy-btn:hover {
-  background: #337ecc;
+  background: #0056b3;
 }
 
 .dialog-close-btn {
-  background: #f5f7fa;
-  color: #606266;
-  border: 1px solid #dcdfe6;
+  background: #6c757d;
+  color: white;
 }
 
 .dialog-close-btn:hover {
-  background: #ecf5ff;
-  border-color: #409eff;
-  color: #409eff;
+  background: #5a6268;
 }
 
+/* 响应式设计 */
 @media (max-width: 768px) {
-  .group-rank {
-    padding: 15px 10px;
-  }
-  
-  .dashboard-header {
-    padding: 15px;
-  }
-  
-  .dashboard-header h2 {
-    font-size: 20px;
-  }
-  
-  .chart-content {
-    padding: 15px;
-  }
-  
   .recording-item {
     flex-direction: column;
     align-items: flex-start;
@@ -1185,15 +1045,26 @@ export default {
     justify-content: flex-end;
   }
   
+  .result-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  
+  .header-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+  
+  .view-toggle {
+    margin-right: 0;
+  }
+  
   .dialog-content {
     width: 95%;
     max-height: 90vh;
   }
   
-  .dialog-header, .dialog-body, .dialog-footer {
-    padding: 15px;
-  }
-  
   .dialog-footer {
     flex-direction: column;
   }
@@ -1203,4 +1074,40 @@ export default {
     justify-content: center;
   }
 }
+
+/* 滚动条样式 */
+.recording-list::-webkit-scrollbar,
+.recording-section::-webkit-scrollbar,
+.transcript-text::-webkit-scrollbar,
+.analysis-result::-webkit-scrollbar,
+.dialog-body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.recording-list::-webkit-scrollbar-track,
+.recording-section::-webkit-scrollbar-track,
+.transcript-text::-webkit-scrollbar-track,
+.analysis-result::-webkit-scrollbar-track,
+.dialog-body::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.recording-list::-webkit-scrollbar-thumb,
+.recording-section::-webkit-scrollbar-thumb,
+.transcript-text::-webkit-scrollbar-thumb,
+.analysis-result::-webkit-scrollbar-thumb,
+.dialog-body::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.recording-list::-webkit-scrollbar-thumb:hover,
+.recording-section::-webkit-scrollbar-thumb:hover,
+.transcript-text::-webkit-scrollbar-thumb:hover,
+.analysis-result::-webkit-scrollbar-thumb:hover,
+.dialog-body::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
 </style>
\ No newline at end of file
diff --git a/my-vue-app/src/views/secondTop/secondTop.vue b/my-vue-app/src/views/secondTop/secondTop.vue
index 3962501..e916218 100644
--- a/my-vue-app/src/views/secondTop/secondTop.vue
+++ b/my-vue-app/src/views/secondTop/secondTop.vue
@@ -50,7 +50,7 @@
         <!--客户类型占比-->
         <CustomerType :customer-data="customerTypeDistribution" @category-change="handleCustomerTypeChange" />
         <!-- 优秀录音 -->
-        <GoodMusic :record-data="goodRecord" />
+        <GoodMusic :quality-calls="excellentRecord" />
         <!-- 客户问题排行 -->
         <ProblemRanking :ranking-data="formattedUrgentNeedData" />
       </div>
@@ -709,7 +709,7 @@ const conversionRateVsAverage = ref({})
     })
   }
   // 获取优秀录音
-  const goodRecord = ref([])
+const excellentRecord = ref({});
   // 获取优秀录音文件
   async function getGoodRecord() {
     const params = getRequestParams()
@@ -719,46 +719,18 @@ const conversionRateVsAverage = ref({})
     } : {
     }
     try {
-      const res = await getExcellentRecordFile(requestParams)
-      if (res.code === 200) {
-        goodRecord.value = res.data
-        /**
-         * "data": {
-        "user_name": "张三丰",
-        "user_level": 4,
-        "excellent_record_list": {
-            "马然": [
-                {
-                    "sale_name": "马然",
-                    "sop": null,
-                    "context": "[4.61s - 324.55s] Speaker 1: 哎，星宇吗？能看到常老师吧。嗯嗯，好，老师也把摄像头翻转过来，带您看一下咱们平台。嗯，你看能看到吧啊，可以看到嗯，咱们规模够大吧啊，我们是全国也是全互联网规模最大的解决青少年心理问题的平台。所以为什么一开始就跟您说孩子问题不用担心，不用害怕。对于您来说，现在不知道该怎么去跟孩子沟通了，我们也能够感受到孩子也很痛苦，他也想改变，他也想让自己变优秀，但是到底怎么引导着孩子，让他成为一个优秀的自己呢？我们每天去处理的都是这样的事情。因为我刚刚跟您说的很多的各种阶段的、初中的、高中的，甚至说进入大学的孩子，也是本来也是一一个很优秀的孩子，真的就是面对这些问题，面对这些困难，他不知道怎么去处理我们家长到底如何给予孩子帮助？你看这个这是央视的品牌，中国，咱们是重点推荐品牌，这是央视的力量栏目组。咱们是受邀专访企业，这是咱们赵院长去年去参加腾讯的育儿盛典，给他们颁发的综合实力。家庭教育品牌这边呢是咱们前台暖洋葱，家庭教育能看到吧啊，看到了嗯，你看咱们的规模都是非常大的。我们的愿景就是让咱们孩子开心快乐的去主动学习自己，能够把精力放在学习上，我们也不用再去天天担心孩子了，孩子也能够有个更好的发展。咱们的使命就是改善我们的家庭教育，影响幸福代人孩只是孩子一一个成绩，有一良好的发展，更多多也孩孩子一个良好的品良良好心心态，够够自己己人生生展展，是咱们这几天上课的，也是说赵世杰、赵院长还记得吧？中科院的高级心理咨询师，也是我们暖阳村教研中心的主任课就在他那里买的。对对，然后最擅长的就是解决提升孩子这些学习力内驱力，让他主动学习，提升成绩，解决这些各种原因，厌学休学，不想上学，不想学习依赖手机沉迷游戏的问题。可以说，赵院孩子问题，赵院长眼中中等程度算不上，非常好解决，又不是说真的去割动脉了。那孩子也有这样一个行为，但是划破皮是不是？但是我们也需要重视视，毕竟现在是发的就是这个对，也是有这样一个感觉自己心理上的痛苦，当心理上的痛苦，他无法承受的时候，他就只能通过伤害自身身体来缓解内心的这种压力了。这边呢是咱们一个发展历程。你看我们是零九年的时候建立的，当时在北京、北京十七个家里面，九位老师都是如何高无一例外，孩子学习能力是有的，包括甚至小学的时候都非常听话，也非常开朗。但是你会发现，一旦进入初中，一旦进入高中，各种各样的情况，各种各样的问题就开始出现了。比如说跟咱们孩子一样，学校里面老师批评了孩子自尊心受到打击了，都甚至同学矛盾、矛盾，甚至到校园霸凌的程度。好，有的也是爸爸妈妈长期在家里面吵架，甚至说长期的对于孩子缺乏陪伴，孩子没有安全感，是不是那孩子的这个性格方面就肯定爸爸爸。嗯嗯，这一点咱们对于孩子做的还是很好的，但孩子面对的问题是各种各样的，从来没从来没挑战。嗯，有一个幸福的家庭，那这样已经也是超过大部分的来来解决的这些家长了。那关键就是孩子在面对其他问题的时候，我们到底能够给予到孩子一个什么样的帮助。由于孩子他没有一个解决的问题，他孩子就是孩子他不知道该怎么办，他的想法都是非常幼稚的，非常单纯的。我们家长到底如何引导着孩子给到他力量温暖和引导，让他去解决这些问题，对不对？你们这一开始咱们就是洋葱互助会的形式成立的。零九年到一三年，咱们互助会就累计帮助了数万人了。到一五年，我们正式成立了暖洋葱家庭教育。一七年两年的时间，咱们迅速发展，当时已经是非常大的规模了，能看到吧？很多人，你看你看现在国家也开始重视青少年的心理健康了，要求学校里面搭建什么校园心理工作室？我们想让孩子长大之后成为一个优秀的人。首先，他得能够心理健康的长大吧，对不对？那他们需要找到专业的平台呀，对，那就找到咱们咱们去帮助全国多所学校搭建校园经理工作室。二二年，全国多家媒体登门进行独家的专访。二三年抖音平台家庭教育板块给咱们颁发新锐领学官的证书，什么意思呢？孩子妈妈家庭教育这个板块，我们要说自己是第二的话，那就没人有资格说自己是第一了。领学官领学官领了在家学习的人才叫领学官。这个是二四年央视的两个栏目，对我们进行独家专访的原因。我们也成功的帮助，数万组家庭走向幸福。孩子们现在对我们洋葱有一个大概的了解了吧？啊嗯所以说专业的事情交给专业的人。咱们这些问题呢，我会反馈咱们赵院长让他去进行针对性的讲课。我稍后也整理一下咱们机构的资料，包括跟您孩子类似的他们的一些成长改变发给咱们，咱们可以了解一下课程。开始之前我也会提醒咱们有问题了，随时联系我，好吧，可以可以可以。那那老师今天就咱们沟通到这里，他的妈妈再见。好的好的好的嗯，\n[324.71s - 325.87s] Speaker 0: 好的，好，谢谢啊。\n",
-                    "obj_file_name": "http://192.168.3.112:5000/api/record/download/马然-20分钟通话-25-08-20_20-17-36-347230-987.mp3",
-                    "score": 25.0
-                },
-                {
-                    "sale_name": "马然",
-                    "sop": null,
-                    "context": "[8.79s - 22.35s] Speaker 0: 我刚在给你打电话接话啊，我可以给初二给人打电话，给喂我的妈妈刚刚玩一下就行。现是进入直播间学习上班哦，\n[27.25s - 34.91s] Speaker 0: 但是这个哎新宇妈妈一个月开始十分钟吗？\n[34.91s - 36.13s] Speaker 1: 啊，能听到吗？\n[36.13s - 37.81s] Speaker 0: 稍等一下哈哦哦，\n[38.15s - 197.56s] Speaker 1: 等一下他在忙是吧，不能不能听得到。你说嗯信号怎么好哦，行行行，是咱们第三节直播已经开始十多分钟了，是来提醒了们上课的，看到没有？我刚才没听没有没有嗯嗯，老师今天晚上都忙，没时间吗？这几天赶货比较忙哦，赶货干啊，刚吃饭厂里上班的哦哦哦，厂里上班咱们就是刚休息是吗？一会儿是还要去吗？对，刚吃饭回来。对，哎呦，虽然我上课这两天上课都是边上班边听的。嗯嗯嗯，对，咱们可以戴个耳机边上班边听。嗯啊对对对，孩子这两天咱们跟孩子沟通情况怎么样啊，孩子没回来了，还在学校。嗯，嗯，哦咱们这两天也没给他发消息是吧？呃，手机没说，反正嗯手机没有嗯对手机收了。嗯，那郑院长昨天也提到了咱们的一对一指导，帮助孩子去解决这样一个问题。不管是心理方面了，还是对于学习这些的，咱们是呃怎么考虑的呢？我刚今天又听了我今天的那个课听差不多了。嗯，嗯，那个有点贵呀。嗯，好的，妈妈两个月的一对一指导啊。咱们如果说了解的话，平时都是一万以上的，也只有咱们这一天赵院长给我们的一个优惠名额是六千八。咱们也而且还是你抢到这个名额优惠名额有三百抵三千。今天晚上价值五千九百八的证件训练，也是截止赠送了三个六千八。说实话，孩孩子这样一个情况，我们这种情况，我们这种家庭嗯嗯非常啊对我非常理解咱们这样一个心情，对不对？但是如果说你孩子这样一个问题，你想两个月的老师这样一堆指导，你要是我我给你找一个一千块的让你报名，你想的是啥样的，老师给他们指导啊，对不对？哎，对于孩子来说，家家庭太困难了，我们哎，太难了，反正先写在外面的事。没事没事，咱们先嗯今天晚上依然该听课听课。好吧，有很多家长都是刚刚还没进去，没没去，刚刚吃饭有点忙。嗯，行行，刚刚回来，我就是稍后把链接发给咱们。然后晚上的时候，我也我我嗯整理跟咱们家庭情况比较相似的，都可以发给咱们，咱们可以看一看了解一下，好吧，我都还没没来得及看。你昨天给我发了好多，我都没没仔细看。哎呦啊，那都是时间太忙，工作太忙。那行，咱们先进直播间签到打卡吧，行吧，进直播间签到打卡，结果回放。嗯，好谢行吧，再见。好好好好好再见嗯，拜拜。\n",
-                    "obj_file_name": "http://192.168.3.112:5000/api/record/download/马然-20分钟通话-25-08-20_20-24-43-653520-759.mp3",
-                    "score": 55.0
-                }
-            ]
-        }
-    }
-         */
-      }
-    } catch (error) {
-      console.error('获取优秀录音失败:', error)
-    }
+    const res = await getExcellentRecordFile(requestParams)
+    excellentRecord.value = res.data.excellent_record_list
+    console.log(111111,res.data.excellent_record_list)
+  } catch (error) {
+    console.error("获取优秀录音失败:", error);
+  }
   }
 
 
   onMounted(async () => {
     try {
       isLoading.value = true
-      
-      // 判断页面进入方式：如果是通过路由跳转进入（URL中有user_name和user_level参数），则不发送CenterCampPeriodAdmin请求
-      // 如果是直接登录进入页面，则发送请求
       const currentQuery = router.currentRoute.value.query
       const isFromRoute = currentQuery.fromRoute || 
                          sessionStorage.getItem('fromRoute') || 
diff --git a/my-vue-app/src/views/topOne/components/PeriodStage.vue b/my-vue-app/src/views/topOne/components/PeriodStage.vue
index de5d882..cac895b 100644
--- a/my-vue-app/src/views/topOne/components/PeriodStage.vue
+++ b/my-vue-app/src/views/topOne/components/PeriodStage.vue
@@ -2,20 +2,6 @@
   <div class="period-stage-container">
     <div class="period-stage-header">
       <h3>各中心营期阶段</h3>
-      <div class="stage-legend">
-        <span class="legend-item">
-          <span class="legend-dot active"></span>
-          进行中
-        </span>
-        <span class="legend-item">
-          <span class="legend-dot completed"></span>
-          已完成
-        </span>
-        <span class="legend-item">
-          <span class="legend-dot pending"></span>
-          未开始
-        </span>
-      </div>
     </div>
     
     <div class="period-stage-content">