feat(会员详情): 新增通话分类统计模块

添加通话分类统计功能，包括API接口调用和前端展示组件。该模块会显示不同通话标签的统计数据和平均时长，帮助分析会员的通话行为模式。同时优化了折叠动画和响应式布局，提升用户体验。

my-vue-app/src/views/maneger/components/MemberDetails.vue

@@ -10,43 +10,76 @@
     </div>
     <div class="details-content">
       <div class="details-grid" v-show="!isDetailsCollapsed" :class="{ 'collapsing': isDetailsCollapsed }">
-      <div class="detail-card">
-        <div class="detail-label">
-          总通话次数
-          <span class="info-icon" @mouseenter="showTooltip($event, 'totalCalls')" @mouseleave="hideTooltip">ⓘ</span>
+        <div class="detail-card">
+          <div class="detail-label">
+            总通话次数
+            <span class="info-icon" @mouseenter="showTooltip($event, 'totalCalls')" @mouseleave="hideTooltip">ⓘ</span>
+          </div>
+          <div class="detail-value">{{ memberDetails?.call_count || 0 }} 次</div>
         </div>
-        <div class="detail-value">{{ memberDetails?.call_count || 0 }} 次</div>
-      </div>
-      <div class="detail-card">
-        <div class="detail-label">
-          通话时长
-          <span class="info-icon" @mouseenter="showTooltip($event, 'callTime')" @mouseleave="hideTooltip">ⓘ</span>
+        <div class="detail-card">
+          <div class="detail-label">
+            通话时长
+            <span class="info-icon" @mouseenter="showTooltip($event, 'callTime')" @mouseleave="hideTooltip">ⓘ</span>
+          </div>
+          <div class="detail-value">{{ memberDetails?.total_call_duration_hour || 0 }} 小时</div>
         </div>
-        <div class="detail-value">{{ memberDetails?.total_call_duration_hour || 0 }} 小时</div>
-      </div>
-      <div class="detail-card">
-        <div class="detail-label">
-          新增客户
-          <span class="info-icon" @mouseenter="showTooltip($event, 'newClients')" @mouseleave="hideTooltip">ⓘ</span>
+        <div class="detail-card">
+          <div class="detail-label">
+            新增客户
+            <span class="info-icon" @mouseenter="showTooltip($event, 'newClients')" @mouseleave="hideTooltip">ⓘ</span>
+          </div>
+          <div class="detail-value">{{ memberDetails?.add_customer_count || 0 }} 人</div>
         </div>
-        <div class="detail-value">{{ memberDetails?.add_customer_count || 0 }} 人</div>
-      </div>
-      <div class="detail-card">
-        <div class="detail-label">
-          成交单数
-          <span class="info-icon" @mouseenter="showTooltip($event, 'deals')" @mouseleave="hideTooltip">ⓘ</span>
+        <div class="detail-card">
+          <div class="detail-label">
+            成交单数
+            <span class="info-icon" @mouseenter="showTooltip($event, 'deals')" @mouseleave="hideTooltip">ⓘ</span>
+          </div>
+          <div class="detail-value">{{ memberDetails?.month_order_count || 0 }} 单</div>
         </div>
-        <div class="detail-value">{{ memberDetails?.month_order_count || 0 }} 单</div>
-      </div>
-      <div class="detail-card">
-        <div class="detail-label">
-          转化率
-          <span class="info-icon" @mouseenter="showTooltip($event, 'conversionRate')" @mouseleave="hideTooltip">ⓘ</span>
+        <div class="detail-card">
+          <div class="detail-label">
+            转化率
+            <span class="info-icon" @mouseenter="showTooltip($event, 'conversionRate')" @mouseleave="hideTooltip">ⓘ</span>
+          </div>
+          <div class="detail-value">{{ selectedMember?.conversion_rate || selectedMember?.conversion || '0%' }}</div>
         </div>
-        <div class="detail-value">{{ selectedMember?.conversion_rate || selectedMember?.conversion || '0%' }}</div>
       </div>
     </div>
+
+    <!-- 【新增】通话分类统计模块 -->
+    <div class="call-analysis-section">
+      <div class="analysis-header" @click="toggleCallAnalysisCollapse">
+        <h3>📊 通话分类统计</h3>
+        <div class="collapse-toggle" :class="{ 'collapsed': isCallAnalysisCollapsed }">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M8 4l4 4H4l4-4z"/>
+          </svg>
+        </div>
+      </div>
+      <div class="analysis-content" v-show="!isCallAnalysisCollapsed" :class="{ 'collapsing': isCallAnalysisCollapsed }">
+        <div v-if="processedCallStats.length > 0" class="analysis-list">
+          <div v-for="stat in processedCallStats" :key="stat.tag" class="analysis-item">
+            <div class="analysis-label">
+              <span class="tag-name">{{ stat.tag }}</span>
+              <span class="call-count">{{ stat.count }} 次</span>
+            </div>
+            <div class="progress-bar-container">
+              <div class="progress-bar" :style="{ width: stat.percentage + '%' }"></div>
+            </div>
+            <div class="analysis-stats">
+              <span class="percentage">{{ stat.percentage.toFixed(1) }}%</span>
+              <span class="avg-time">均长: {{ stat.avgTime.toFixed(1) }} 分钟</span>
+            </div>
+          </div>
+        </div>
+        <div v-else class="no-data">
+          <p>暂无通话分类数据</p>
+        </div>
+      </div>
     </div>
+    <!-- 【新增】模块结束 -->
     
     <!-- 指导建议 -->
     <div class="guidance-section">
@@ -90,45 +123,6 @@
         </div>
       </div>
     </div>
-    
-    <!-- 录音列表 -->
-    <!-- <div class="recordings-section" >
-      <div class="recordings-header" @click="toggleRecordingsCollapse">
-        <h3>🎧 通话录音</h3>
-        <div class="collapse-toggle" :class="{ 'collapsed': isRecordingsCollapsed }">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M8 4l4 4H4l4-4z"/>
-          </svg>
-        </div>
-      </div>
-      <div class="recordings-content" v-show="!isRecordingsCollapsed" :class="{ 'collapsing': isRecordingsCollapsed }">
-        <div class="recordings-list" v-if="getRecordingsForMember(selectedMember).length > 0">
-          <div class="recording-item" v-for="(recording, index) in getRecordingsForMember(selectedMember)" :key="index">
-            <div class="recording-info">
-              <div class="recording-title">{{ recording.title }}</div>
-              <div class="recording-meta">
-                <span class="recording-date">{{ recording.date }}</span>
-                <span class="recording-duration">{{ recording.duration }}</span>
-                <span class="recording-type" :class="recording.type">{{ recording.typeLabel }}</span>
-              </div>
-            </div>
-            <button class="download-btn" @click="downloadRecording(recording)">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                <path d="M8 12l-4-4h3V4h2v4h3l-4 4z"/>
-                <path d="M2 14h12v1H2z"/>
-              </svg>
-              下载
-            </button>
-          </div>
-        </div>
-        <div class="no-recordings" v-else>
-          <div class="no-data-icon">📞</div>
-          <h4>暂无录音</h4>
-          <p>{{ selectedMember?.user_name || selectedMember?.name || '张三' }} 还没有通话录音记录</p>
-        </div>
-      </div>
-    </div> -->
-    
     <!-- Tooltip 组件 -->
     <Tooltip 
       :visible="tooltip.visible"
@@ -141,9 +135,9 @@
 </template>
 
 <script setup>
-import { ref, defineProps, watch, nextTick, reactive, onMounted } from 'vue'
+import { ref, defineProps, watch, nextTick, reactive, computed } from 'vue'
 import Tooltip from '@/components/Tooltip.vue'
-import { GetSecondOrderAnalysisReport } from '@/api/manager.js'
+import { GetSecondOrderAnalysisReport, getMemberCallClassify } from '@/api/manager.js'
 import { SimpleChatService } from '@/utils/ChatService.js'
 
 // 定义props
@@ -164,8 +158,14 @@ const isDetailsCollapsed = ref(false)
 // 指导建议折叠状态（默认展开）
 const isGuidanceCollapsed = ref(false)
 
-// 录音列表折叠状态（默认展开）
-const isRecordingsCollapsed = ref(true)
+// 【新增】通话分类统计折叠状态
+const isCallAnalysisCollapsed = ref(false)
+
+// 【修改】存放通话分类API数据的内部状态
+const callClassificationData = ref({
+  call_count_by_tag: {},
+  call_avg_time: {}
+});
 
 // 分析周期
 const analysisPeriod = ref('day') // 默认周期为当日
@@ -184,26 +184,11 @@ const tooltip = reactive({
 
 // 指标描述
 const metricDescriptions = {
-  totalCalls: {
-    title: '总通话次数计算方式',
-    description: '统计在选定时间范围内的所有外呼和接听通话的总次数，包括有效通话和无效通话。'
-  },
-  callTime: {
-    title: '通话时长计算方式',
-    description: '累计所有有效通话的时长，以小时为单位显示，精确到小数点后一位。'
-  },
-  newClients: {
-    title: '新增客户计算方式',
-    description: '在选定时间范围内新建档的客户数量，不包括重复录入的客户。'
-  },
-  deals: {
-    title: '成交单数计算方式',
-    description: '在选定时间范围内成功签约的订单数量，包括全款和定金订单。'
-  },
-  conversionRate: {
-    title: '转化率计算方式',
-    description: '成交单数 ÷ 新增客户数 × 100%'
-  }
+  totalCalls: { title: '总通话次数计算方式', description: '统计在选定时间范围内的所有外呼和接听通话的总次数，包括有效通话和无效通话。' },
+  callTime: { title: '通话时长计算方式', description: '累计所有有效通话的时长，以小时为单位显示，精确到小数点后一位。' },
+  newClients: { title: '新增客户计算方式', description: '在选定时间范围内新建档的客户数量，不包括重复录入的客户。' },
+  deals: { title: '成交单数计算方式', description: '在选定时间范围内成功签约的订单数量，包括全款和定金订单。' },
+  conversionRate: { title: '转化率计算方式', description: '成交单数 ÷ 新增客户数 × 100%' }
 }
 
 // 切换详细数据折叠状态
@@ -211,54 +196,71 @@ const toggleDetailsCollapse = () => {
   isDetailsCollapsed.value = !isDetailsCollapsed.value
 }
 
+// 【新增】切换通话分析折叠状态
+const toggleCallAnalysisCollapse = () => {
+  isCallAnalysisCollapsed.value = !isCallAnalysisCollapsed.value
+}
+
+
+// 【修改】处理通话统计数据的 computed 属性，现在它依赖于内部状态
+const processedCallStats = computed(() => {
+  const counts = callClassificationData.value?.call_count_by_tag;
+  const avgs = callClassificationData.value?.call_avg_time;
+
+  if (!counts || !avgs || Object.keys(counts).length === 0) {
+    return [];
+  }
+
+  const totalCalls = Object.values(counts).reduce((sum, count) => sum + count, 0);
+  if (totalCalls === 0) {
+    return [];
+  }
+
+  return Object.keys(counts).map(tag => ({
+    tag: tag,
+    count: counts[tag],
+    avgTime: avgs[tag] || 0,
+    percentage: (counts[tag] / totalCalls) * 100,
+  })).sort((a, b) => b.count - a.count); // 按通话次数降序排列
+});
+
+
 // 切换分析周期
 const switchAnalysisPeriod = (period) => {
   analysisPeriod.value = period
-  // 切换周期后重新获取分析报告
-  CenterGetSecondOrderAnalysisReport(analysisPeriod.value )
+  CenterGetSecondOrderAnalysisReport(analysisPeriod.value)
 }
 
 // 获取二阶分析报告
 async function CenterGetSecondOrderAnalysisReport(time) {
-  // 如果聊天服务实例不存在，则创建一个新的实例
   if (!chatService_02.value) {
-    // 注意：这里使用与PersonalDashboard.vue相同的API密钥
     chatService_02.value = new SimpleChatService('app-MGaBOx5QFblsMZ7dSkxKJDKm')
   }
   
-  // 设置加载状态
   isReportLoading.value = true
   analysisReport.value = ''
   
   try {
-    // 准备请求参数
     const params = {
-      user_name:props.memberDetails?.user_name,
-      time: time // 使用当前选择的周期
+      user_name: props.memberDetails?.user_name,
+      time: time
     }
-    // 调用API获取分析报告数据
     const response = await GetSecondOrderAnalysisReport(params)
     
-    // 检查数据是否为空
     if (!response.data.records || response.data.records.length === 0) {
-      console.error('数据为空')
-      analysisReport.value = '数据为空'
+      analysisReport.value = '当前周期暂无数据可供分析。'
       isReportLoading.value = false
       return
     }
     
-    // 将记录数组转换为字符串
     const records = response.data.records.join('\n')
     
-    // 使用聊天服务发送消息并处理流式响应
     chatService_02.value.sendMessage(
-      records, // 使用API返回的文本数据
+      records,
       (update) => {
-        // 实时更新报告内容
         analysisReport.value = update.content
       },
       () => {
-        // 流结束时的操作
         isReportLoading.value = false
       }
     )
@@ -274,11 +276,6 @@ const toggleGuidanceCollapse = () => {
   isGuidanceCollapsed.value = !isGuidanceCollapsed.value
 }
 
-// 切换录音列表折叠状态
-const toggleRecordingsCollapse = () => {
-  isRecordingsCollapsed.value = !isRecordingsCollapsed.value
-}
-
 // 显示工具提示
 const showTooltip = (event, metricType) => {
   const metric = metricDescriptions[metricType]
@@ -296,137 +293,70 @@ const hideTooltip = () => {
   tooltip.visible = false
 }
 
-// 格式化金额
-const formatAmount = (amount) => {
-  if (typeof amount === 'number') {
-    return amount.toLocaleString()
-  }
-  return amount || '0'
-}
-
-// 获取成员录音列表
-const getRecordingsForMember = (member) => {
-  // 模拟录音数据，实际项目中应该从API获取
-  const recordings = []
-  
-  // 根据成员ID返回对应的录音，这里简化处理
-  return recordings.slice(0, Math.min(3, member?.call_count || 0))
-}
-
-// 下载录音文件
-const downloadRecording = (recording) => {
-  // 创建下载链接
-  const link = document.createElement('a')
-  link.href = recording.fileUrl
-  link.download = `${recording.title}_${recording.date.replace(/[:\s]/g, '_')}.m4a`
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-  // 实际项目中可能需要调用API来获取下载链接
-  console.log('下载录音:', recording.title)
-}
-
 // 获取成员指导建议
 const getGuidanceForMember = (member) => {
   const guidance = []
-  
-  // 检查member是否存在
-  if (!member) {
-    return guidance
-  }
-  
+  if (!member) return guidance;
+
   // 业绩相关建议
   if (member.month_order_count === 0) {
-    guidance.push({
-      type: 'urgent',
-      icon: '🚨',
-      title: '业绩突破',
-      description: '当前还未有成交记录，需要重点关注转化技巧和客户跟进。',
-      action: '建议参加销售技巧培训，加强客户需求挖掘'
-    })
+    guidance.push({ type: 'urgent', icon: '🚨', title: '业绩突破', description: '当前还未有成交记录，需要重点关注转化技巧和客户跟进。', action: '建议参加销售技巧培训，加强客户需求挖掘' })
   } else if (member.month_order_count < 5) {
-    guidance.push({
-      type: 'warning',
-      icon: '📈',
-      title: '业绩提升',
-      description: '业绩有提升空间，可以通过优化沟通策略来提高转化率。',
-      action: '分析高业绩同事的沟通技巧，制定个人提升计划'
-    })
+    guidance.push({ type: 'warning', icon: '📈', title: '业绩提升', description: '业绩有提升空间，可以通过优化沟通策略来提高转化率。', action: '分析高业绩同事的沟通技巧，制定个人提升计划' })
   }
   
   // 转化率相关建议
   if (member.conversion < 3.0) {
-    guidance.push({
-      type: 'urgent',
-      icon: '🎯',
-      title: '转化率优化',
-      description: '转化率偏低，需要提升客户沟通和需求挖掘能力。',
-      action: '重点学习客户心理分析和异议处理技巧'
-    })
-  } else if (member.conversion < 6.0) {
-    guidance.push({
-      type: 'info',
-      icon: '💬',
-      title: '沟通技巧',
-      description: '转化率还有提升空间，建议优化沟通话术和客户关系维护。',
-      action: '观摩优秀同事的通话录音，学习有效沟通技巧'
-    })
+    guidance.push({ type: 'urgent', icon: '🎯', title: '转化率优化', description: '转化率偏低，需要提升客户沟通和需求挖掘能力。', action: '重点学习客户心理分析和异议处理技巧' })
   }
   
   // 通话相关建议
   if (member.call_count < 100) {
-    guidance.push({
-      type: 'warning',
-      icon: '📞',
-      title: '通话量提升',
-      description: '通话量偏少，增加客户接触频次有助于提升业绩。',
-      action: '制定每日通话计划，确保充足的客户接触量'
-    })
+    guidance.push({ type: 'warning', icon: '📞', title: '通话量提升', description: '通话量偏少，增加客户接触频次有助于提升业绩。', action: '制定每日通话计划，确保充足的客户接触量' })
   }
-  
-  // 客户开发建议
-  if (member.add_customer_count < 5) {
-    guidance.push({
-      type: 'info',
-      icon: '👥',
-      title: '客户开发',
-      description: '新客户开发数量较少，可以拓展更多潜在客户渠道。',
-      action: '利用社交媒体和转介绍扩大客户来源'
-    })
+
+  return guidance.slice(0, 3);
+}
+
+// 【修改】函数现在从API获取数据并更新内部状态
+async function updateCallClassificationData() {
+  if (props.selectedMember && props.selectedMember.user_name) {
+    try {
+      const response = await getMemberCallClassify({
+        user_name: props.selectedMember.user_name
+      });
+      // 将获取到的数据赋值给内部状态
+      callClassificationData.value = {
+          call_count_by_tag: response.call_count_by_tag || {},
+          call_avg_time: response.call_avg_time || {}
+      };
+    } catch (error) {
+      console.error('获取通话分类失败:', error);
+      // 出错时清空数据
+      callClassificationData.value = { call_count_by_tag: {}, call_avg_time: {} };
+    }
+  } else {
+    // 如果没有选中的成员，则清空数据
+    callClassificationData.value = { call_count_by_tag: {}, call_avg_time: {} };
   }
-  
-  // 平均单价建议
-  if (member.avgDealValue > 0 && member.avgDealValue < 25000) {
-    guidance.push({
-      type: 'success',
-      icon: '💰',
-      title: '客单价提升',
-      description: '可以尝试推荐更高价值的课程套餐，提升平均客单价。',
-      action: '学习产品组合销售技巧，挖掘客户更深层次需求'
-    })
-  }
-  
-  return guidance.slice(0, 3) // 最多显示3个建议
 }
 
 // 监听selectedMember变化
 watch(() => props.selectedMember, (newMember) => {
   if (newMember) {
+    // 成员变化时，获取新的通话分类数据
+    updateCallClassificationData();
+    // 同时获取新的分析报告
+    CenterGetSecondOrderAnalysisReport(analysisPeriod.value);
+    
     // 重置滚动位置
     nextTick(() => {
       const container = document.querySelector('.member-details')
-      if (container) {
-        container.scrollTop = 0
-      }
+      if (container) container.scrollTop = 0;
     })
   }
-})
+}, { immediate: true, deep: true }) // 使用 immediate: true 和 deep: true
 
-// 组件挂载时初始化分析报告
-onMounted(() => {
-  // 初始化时获取当日的分析报告
-  CenterGetSecondOrderAnalysisReport()
-})
 </script>
 
 <style lang="scss" scoped>
@@ -563,7 +493,7 @@ onMounted(() => {
   }
 }
 
-.details-grid {
+.details-grid, .analysis-content, .guidance-content { // 【修改】统一折叠动画
   transition: all 0.3s ease;
   
   &.collapsing {
@@ -572,172 +502,117 @@ onMounted(() => {
   }
 }
 
-// 录音列表样式
-.recordings-section {
+/* 【新增】通话分类统计样式 */
+.call-analysis-section {
   margin-top: 1.5rem;
-}
 
-.recordings-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid #e2e8f0;
-  margin-bottom: 1rem;
-  transition: all 0.2s ease;
-  
-  &:hover {
-    background-color: #f8fafc;
-    border-radius: 4px;
-    padding: 0.5rem;
-    margin: 0 -0.5rem 1rem -0.5rem;
-  }
-  
-  h3 {
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #1e293b;
-    margin: 0;
+  .analysis-header {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-  }
-}
+    justify-content: space-between;
+    cursor: pointer;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 1rem;
+    transition: all 0.2s ease;
 
-.recordings-content {
-  transition: all 0.3s ease;
-  
-  &.collapsing {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-}
+    &:hover {
+      background-color: #f8fafc;
+      border-radius: 4px;
+      padding: 0.5rem;
+      margin: 0 -0.5rem 1rem -0.5rem;
+    }
 
-.recordings-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.recording-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  transition: all 0.2s ease;
-  
-  &:hover {
-    background: #f1f5f9;
-    border-color: #cbd5e1;
+    h3 {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: #1e293b;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
   }
-}
 
-.recording-info {
-  flex: 1;
-}
+  .analysis-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
 
-.recording-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: #1e293b;
-  margin-bottom: 0.5rem;
-}
+  .analysis-item {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "label stats"
+      "progress progress";
+    gap: 0.25rem 1rem;
+    align-items: center;
+  }
 
-.recording-meta {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  font-size: 0.8rem;
-}
-
-.recording-date {
-  color: #64748b;
-}
-
-.recording-duration {
-  color: #475569;
-  font-weight: 500;
-}
-
-.recording-type {
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  
-  &.consultation {
-    background: #dbeafe;
-    color: #1e40af;
-  }
-  
-  &.followup {
-    background: #fef3c7;
-    color: #92400e;
-  }
-  
-  &.deal {
-    background: #d1fae5;
-    color: #065f46;
-  }
-}
-
-.download-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: #3b82f6;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.85rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  
-  &:hover {
-    background: #2563eb;
-    transform: translateY(-1px);
-  }
-  
-  &:active {
-    transform: translateY(0);
-  }
-  
-  svg {
-    flex-shrink: 0;
-  }
-}
-
-.no-recordings {
-  text-align: center;
-  padding: 2rem 1rem;
-  background: #f8fafc;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-  
-  .no-data-icon {
-    font-size: 2rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  h4 {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #64748b;
-    margin: 0 0 0.5rem 0;
-  }
-  
-  p {
+  .analysis-label {
+    grid-area: label;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
     font-size: 0.9rem;
+    color: #334155;
+    
+    .tag-name {
+      font-weight: 500;
+    }
+
+    .call-count {
+      font-size: 0.8rem;
+      color: #64748b;
+    }
+  }
+
+  .progress-bar-container {
+    grid-area: progress;
+    width: 100%;
+    background-color: #e2e8f0;
+    border-radius: 4px;
+    height: 8px;
+    overflow: hidden;
+  }
+
+  .progress-bar {
+    height: 100%;
+    background-color: #3b82f6;
+    border-radius: 4px;
+    transition: width 0.3s ease-in-out;
+  }
+
+  .analysis-stats {
+    grid-area: stats;
+    display: flex;
+    align-items: baseline;
+    gap: 0.75rem;
+    font-size: 0.85rem;
+
+    .percentage {
+      font-weight: 600;
+      color: #1e293b;
+      min-width: 45px;
+      text-align: right;
+    }
+
+    .avg-time {
+      color: #64748b;
+    }
+  }
+  
+  .no-data {
+    text-align: center;
+    padding: 1.5rem;
+    background: #f8fafc;
+    border-radius: 8px;
     color: #94a3b8;
-    margin: 0;
   }
 }
+/* 【新增】样式结束 */
+
 
 // 指导建议样式
 .guidance-section {
@@ -922,32 +797,6 @@ onMounted(() => {
   }
 }
 
-.no-guidance {
-  text-align: center;
-  padding: 2rem 1rem;
-  background: white;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-  
-  .celebration-icon {
-    font-size: 2rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  h4 {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #059669;
-    margin: 0 0 0.5rem 0;
-  }
-  
-  p {
-    font-size: 0.9rem;
-    color: #64748b;
-    margin: 0;
-  }
-}
-
 // 移动端适配
 @media (max-width: 768px) {
   .member-details {
@@ -977,69 +826,33 @@ onMounted(() => {
       }
     }
   }
-  
-  // 录音列表适配
-  .recordings-section {
+
+  /* 【新增】通话分类统计响应式样式 */
+  .call-analysis-section {
     margin-top: 1rem;
-    
-    .recordings-header {
-      h3 {
-        font-size: 1rem;
-      }
+    .analysis-header h3 {
+      font-size: 1rem;
     }
-    
-    .recordings-list {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
+    .analysis-item {
+      grid-template-areas: 
+        "label label"
+        "progress stats";
       gap: 0.5rem;
     }
-    
-    .recording-item {
-      flex-direction: column;
-      align-items: stretch;
-      gap: 0.5rem;
-      padding: 0.75rem;
+    .analysis-label {
+      .tag-name { font-size: 0.85rem; }
+      .call-count { font-size: 0.75rem; }
     }
-    
-    .recording-info {
-      .recording-title {
-        font-size: 0.8rem;
-        margin-bottom: 0.25rem;
-        line-height: 1.3;
-      }
-      
-      .recording-meta {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.25rem;
-        
-        .recording-date {
-          font-size: 0.7rem;
-        }
-        
-        .recording-duration {
-          font-size: 0.7rem;
-        }
-        
-        .recording-type {
-          align-self: flex-start;
-          font-size: 0.65rem;
-          padding: 0.2rem 0.4rem;
-        }
-      }
-    }
-    
-    .download-btn {
-      align-self: center;
-      padding: 0.5rem 0.8rem;
+    .analysis-stats {
       font-size: 0.75rem;
-      
-      svg {
-        width: 12px;
-        height: 12px;
+      gap: 0.5rem;
+      justify-content: flex-end;
+      .percentage {
+        min-width: 40px;
       }
     }
   }
+  /* 【新增】响应式样式结束 */
   
   // 指导建议适配
 .guidance-section {
@@ -1092,33 +905,4 @@ onMounted(() => {
   }
 }
 }
-
-@media (max-width: 480px) {
-  .member-details {
-    padding: 0.75rem;
-    border-radius: 8px;
-  }
-  
-  .recording-item {
-    padding: 0.6rem;
-    
-    .recording-meta {
-      gap: 0.25rem;
-      font-size: 0.75rem;
-    }
-    
-    .download-btn {
-      padding: 0.5rem 1rem;
-      font-size: 0.75rem;
-    }
-  }
-  
-  .guidance-item {
-    .guidance-icon {
-      width: 24px;
-      height: 24px;
-      font-size: 0.8rem;
-    }
-  }
-}
 </style>