refactor(components): 重构通话记录卡片布局和样式

- 移除调试用的console.log语句
- 重新组织通话记录卡片的结构，将用户信息、标签和分数整合到更清晰的布局中
- 新增通话时长格式化方法和分数样式分类方法
- 优化移动端布局和交互效果
- 改进标签和按钮的视觉样式，增加悬停效果

my-vue-app/src/views/person/components/RawDataCards.vue

@@ -89,13 +89,23 @@
                 <div class="call-list">
                   <div v-for="(call, index) in callRecords" :key="index" class="call-item">
                     <div class="call-header">
-                      <span class="call-type">用户: {{ call.user_name }}</span>
+                      <div class="header-main" style="display: flex; flex-direction: row;">
-                      <span class="call-duration">客户: {{ call.customer_name }}</span>
+                        <div class="user-info">
-                      <span class="call-tag" :class="{
+                          <span class="call-type">用户: {{ call.user_name }}</span>
-                         'tag-20min': call.record_tag === '20分钟通话',
+                        </div>
-                         'tag-other': call.record_tag === '其他'
+                        <div class="header-tags">
-                       }" v-if="call.record_tag">{{ call.record_tag }}</span>
+                          <span class="call-tag" :class="{
+                            'tag-20min': call.record_tag === '20分钟通话',
+                            'tag-invalid': call.record_tag === '无效通话',
+                            'tag-other': call.record_tag !== '20分钟通话' && call.record_tag !== '无效通话'
+                          }" v-if="call.record_tag">{{ call.record_tag }}</span>
+                          <!-- 分数移到类型标签后面 -->
+                          <span class="stat-value" :class="getScoreClass(call.score)">{{ call.score }}分</span>
+                        </div>
+                      </div>
+                      <div class="call-time">{{ formatDateTime(call.record_create_time) }}</div>
                     </div>
+
                     <div class="call-actions">
                       <div class="action-buttons">
                         <button class="action-btn download-btn" @click="downloadRecording(call)">
@@ -106,9 +116,8 @@
                           <i class="icon-view"></i>
                           查看原文
                         </button>
-                      </div>
+                        <!-- 时长移到操作按钮后面 -->
-                      <div class="call-time-info">
+                        <span class="call-duration">{{ formatCallDuration(call.call_duration) }}</span>
-                        <span class="call-duration">{{ formatDateTime(call.record_create_time) }}</span>
                       </div>
                     </div>
                   </div>
@@ -120,8 +129,6 @@
       </div>
     </div>
   </div>
-
-
 </template>
 
 <script setup>
@@ -149,13 +156,11 @@ const props = defineProps({
 })
 
 // Emits
-const emit = defineEmits(['analyze-sop', 'show-modal'])
+const emit = defineEmits(['analyze-sop', 'show-modal', 'show-download-modal'])
 
 // 当前激活的tab
 const activeTab = ref('chat')
 
-
-
 // 聊天消息列表
 const chatMessages = computed(() => {
   return props.chatInfo?.messages || []
@@ -232,7 +237,6 @@ const callData = computed(() => ({
 
 // 通话记录列表
 const callRecords = computed(() => {
-  
   // 从 props.callInfo 中获取真实的通话记录数据
   if (props.callInfo && Array.isArray(props.callInfo)) {
     console.log('通话记录:', props.callInfo)
@@ -252,6 +256,28 @@ const callRecords = computed(() => {
   return []
 })
 
+// 新增：格式化通话时长的方法
+const formatCallDuration = (durationInMinutes) => {
+  if (typeof durationInMinutes !== 'number' || durationInMinutes < 0) {
+    return '暂无';
+  }
+  const totalSeconds = Math.round(durationInMinutes * 60);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}分${seconds}秒`;
+};
+
+// 新增：根据分数获取CSS类的方法
+const getScoreClass = (score) => {
+  if (score >= 80) {
+    return 'score-high';
+  } else if (score >= 60) {
+    return 'score-medium';
+  } else {
+    return 'score-low';
+  }
+};
+
 // 录音下载方法
 const downloadRecording = async (call) => {
   console.log('下载录音:', call)
@@ -595,54 +621,113 @@ const formatDateTime = (dateTimeString) => {
 .call-list {
   .call-item {
     margin-bottom: 16px;
-    padding: 16px;
+    padding: 20px;
-    border-radius: 8px;
+    border-radius: 12px;
-    background: #f9fafb;
+    background: #ffffff;
-    border-left: 4px solid #3b82f6;
+    border: 1px solid #e5e7eb;
+    transition: all 0.3s ease;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    
+    &:hover {
+        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
+        transform: translateY(-2px);
+    }
 
     .call-header {
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: flex-start;
-      margin-bottom: 8px;
+      .header-main {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        flex: 1;
 
-      .call-type {
+        .user-info {
-        font-size: 12px;
+          display: flex;
-        font-weight: 600;
+          gap: 12px;
-        padding: 4px 8px;
+          flex-wrap: wrap;
-        border-radius: 4px;
-        background: #dbeafe;
-        color: #3b82f6;
-      }
           
-      .call-duration {
+          .call-type {
-        font-size: 12px;
+            font-size: 13px;
-        font-weight: 500;
+            font-weight: 600;
-        color: #6b7280;
+            padding: 5px 10px;
+            border-radius: 20px;
+            background: #dbeafe;
+            color: #3b82f6;
+          }
+
+          .call-customer {
+            font-size: 13px;
+            font-weight: 500;
+            color: #6b7280;
+            align-self: center;
+          }
+        }
+
+        .header-tags {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          flex-wrap: wrap;
+
+          .call-tag {
+            font-size: 12px;
+            font-weight: 600;
+            padding: 4px 10px;
+            border-radius: 20px;
+
+            &.tag-20min {
+              background: #dcfce7;
+              color: #16a34a;
+              border: 1px solid #bbf7d0;
+            }
+            
+            &.tag-invalid {
+                background: #fee2e2;
+                color: #dc2626;
+                border: 1px solid #fecaca;
+            }
+
+            &.tag-other {
+              background: #fef3c7;
+              color: #d97706;
+              border: 1px solid #fed7aa;
+            }
+          }
+          
+          // 分数样式
+          .stat-value {
+            font-size: 14px;
+            font-weight: 700;
+            padding: 4px 10px;
+            border-radius: 20px;
+            
+            &.score-high {
+              color: #16a34a; // 绿色
+              background-color: #dcfce7;
+            }
+            &.score-medium {
+              color: #d97706; // 橙色
+              background-color: #fef3c7;
+            }
+            &.score-low {
+              color: #dc2626; // 红色
+              background-color: #fee2e2;
+            }
+          }
+        }
       }
 
       .call-time {
         font-size: 12px;
         color: #9ca3af;
-      }
+        font-weight: 500;
-      
+        white-space: nowrap;
-      .call-tag {
+        padding: 4px 8px;
-        font-size: 11px;
+        background: #f9fafb;
-        font-weight: 600;
+        border-radius: 4px;
-        padding: 3px 8px;
+        align-self: flex-start;
-        border-radius: 12px;
-        
-        &.tag-20min {
-          background: #dcfce7;
-          color: #16a34a;
-          border: 1px solid #bbf7d0;
-        }
-        
-        &.tag-other {
-          background: #fef3c7;
-          color: #d97706;
-          border: 1px solid #fed7aa;
-        }
       }
     }
 
@@ -651,70 +736,77 @@ const formatDateTime = (dateTimeString) => {
       justify-content: space-between;
       align-items: center;
       margin-top: 12px;
-      padding-top: 8px;
-      border-top: 1px solid #f3f4f6;
 
       .action-buttons {
         display: flex;
-        gap: 8px;
+        gap: 12px;
-      }
-      
-      .action-btn {
-        display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 6px 10px;
-        border: none;
-        border-radius: 6px;
-        font-size: 11px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.2s ease;
         
-        &.download-btn {
+        .action-btn {
-          background: #dbeafe;
+          display: flex;
-          color: #3b82f6;
+          align-items: center;
+          gap: 6px;
+          padding: 8px 14px;
+          border: none;
+          border-radius: 8px;
+          font-size: 13px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
-          &:hover {
+          &.download-btn {
-            background: #bfdbfe;
+            background: #dbeafe;
-            transform: translateY(-1px);
+            color: #3b82f6;
-            box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
+
+            &:hover {
+              background: #bfdbfe;
+              transform: translateY(-2px);
+              box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
+            }
+            
+            &:active {
+              transform: translateY(0);
+            }
+          }
+
+          &.view-btn {
+            background: #d1fae5;
+            color: #059669;
+
+            &:hover {
+              background: #a7f3d0;
+              transform: translateY(-2px);
+              box-shadow: 0 4px 6px rgba(5, 150, 105, 0.2);
+            }
+            
+            &:active {
+              transform: translateY(0);
+            }
+          }
+
+          i {
+            font-style: normal;
+            font-size: 14px;
+            
+            &.icon-download::before {
+              content: '⬇';
+            }
+
+            &.icon-view::before {
+              content: '👁';
+            }
           }
         }
         
-        &.view-btn {
+        // 通话时长样式
-          background: #d1fae5;
-          color: #059669;
-          
-          &:hover {
-            background: #a7f3d0;
-            transform: translateY(-1px);
-            box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
-          }
-        }
-        
-        i {
-          width: 12px;
-          height: 12px;
-          
-          &.icon-download::before {
-            content: '⬇';
-          }
-          
-          &.icon-view::before {
-            content: '👁';
-          }
-        }
-      }
-      
-      .call-time-info {
         .call-duration {
-          font-size: 11px;
+          font-size: 13px;
           color: #6b7280;
           font-weight: 500;
           background: #f9fafb;
-          padding: 4px 8px;
+          padding: 6px 12px;
-          border-radius: 4px;
+          border-radius: 20px;
           border: 1px solid #e5e7eb;
         }
       }
@@ -722,77 +814,6 @@ const formatDateTime = (dateTimeString) => {
   }
 }
 
-.card-content {
-  margin-bottom: 20px;
-}
-
-.card-description {
-  color: #6b7280;
-  font-size: 14px;
-  margin: 0 0 16px 0;
-  line-height: 1.5;
-}
-
-.card-stats {
-  display: flex;
-  gap: 20px;
-  
-  @media (max-width: 480px) {
-    flex-direction: column;
-    gap: 12px;
-  }
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.stat-label {
-  font-size: 12px;
-  color: #9ca3af;
-  font-weight: 500;
-}
-
-.stat-value {
-  font-size: 14px;
-  color: #111827;
-  font-weight: 600;
-}
-
-.card-action {
-  border-top: 1px solid #f3f4f6;
-  padding-top: 16px;
-  margin-top: 16px;
-}
-
-.view-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: none;
-  border: none;
-  color: #6b7280;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  padding: 8px 0;
-  transition: color 0.2s ease;
-  
-  &:hover {
-    color: #111827;
-  }
-  
-  svg {
-    transition: transform 0.2s ease;
-  }
-  
-  &:hover svg {
-    transform: translateX(2px);
-  }
-}
-
 @media (max-width: 768px) {
   .raw-data-cards {
     margin: 20px 0;
@@ -840,11 +861,10 @@ const formatDateTime = (dateTimeString) => {
     font-size: 14px;
   }
   
-  .card-description {
+  .call-actions {
-    font-size: 13px;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 10px;
   }
 }
-
-// 弹框样式
-
 </style>

my-vue-app/src/views/person/sale.vue

@@ -624,8 +624,6 @@ async function getCustomerCall() {
     const res = await getCustomerCallInfo(params)
     if(res.code === 200) {
       callRecords.value = res.data
-      console.log('Call Records Data from API:', res.data)
-      console.log('callRecords.value after assignment:', callRecords.value)
     }
   } catch (error) {
     // 静默处理错误