From ea32a16e5d420c72e69480b18bf492092aa47beb Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Wed, 15 Oct 2025 21:38:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B0=86=E5=AE=A2=E6=88=B7=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E5=8F=82=E6=95=B0=E4=BB=8Ename=E6=94=B9=E4=B8=BAphone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改客户聊天和通话记录的查询参数，从使用客户姓名改为使用电话号码，以匹配后端接口的变更需求
---
 my-vue-app/package-lock.json                  |    2 +-
 .../components/SalesTimelineWithTaskList.vue  | 1846 +++--------------
 my-vue-app/src/views/person/sale.vue          |    4 +-
 3 files changed, 308 insertions(+), 1544 deletions(-)

diff --git a/my-vue-app/package-lock.json b/my-vue-app/package-lock.json
index 83ead4c..91af3e6 100644
--- a/my-vue-app/package-lock.json
+++ b/my-vue-app/package-lock.json
@@ -4664,7 +4664,7 @@
     },
     "node_modules/markdown-it": {
       "version": "14.1.0",
-      "resolved": "https://registry.npmmirror.com/markdown-it/-/markdown-it-14.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
       "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
       "license": "MIT",
       "dependencies": {
diff --git a/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue b/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue
index cc02a0d..8397810 100644
--- a/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue
+++ b/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue
@@ -6,7 +6,7 @@
         <span style="font-size: 14px;">客户转化全流程跟踪</span>
       </div>
   <div>
-    <button @click="handleUnassignedRecordingsClick" class="unassigned-recordings-btn">无归属录音</button>
+    <button @click="handleUnassignedRecordingsClick" class="unassigned-recordings-btn">尚未归属录音</button>
   </div>
     </div>
          
@@ -309,24 +309,37 @@
 
     <!-- 无归属录音弹窗 -->
     <div v-if="showUnassignedRecordingsModal" class="modal-overlay" @click="showUnassignedRecordingsModal = false">
-      <div class="modal-content" @click.stop>
+      <div class="modal-content recordings-modal" @click.stop>
         <div class="modal-header">
-          <h3>无归属录音</h3>
+          <h3>尚未归属录音</h3>
           <button class="close-btn" @click="showUnassignedRecordingsModal = false">×</button>
         </div>
         <div class="modal-body">
-          <div v-if="!unassignedRecordings || unassignedRecordings.length === 0" class="no-messages">
-            暂无录音
+          <!-- 新增的Tab栏 -->
+          <div class="modal-tabs">
+            <button
+              v-for="category in recordingCategories"
+              :key="category"
+              class="tab-btn"
+              :class="{ 'active': selectedCategory === category }"
+              @click="selectedCategory = category"
+            >
+              {{ category }} ({{ categorizedRecordings[category]?.length || 0 }})
+            </button>
+          </div>
+
+          <div v-if="!filteredRecordings || filteredRecordings.length === 0" class="no-messages">
+            该分类下暂无录音
           </div>
           <div v-else class="recordings-list">
-            <div class="recording-item" v-for="recording in unassignedRecordings" :key="recording.id">
+            <div class="recording-item" v-for="recording in filteredRecordings" :key="recording.id">
               <div class="recording-info">
                 <div class="recording-header">
                   <span class="recording-name">{{ recording.name }}</span>
                   <span class="recording-score">分数: {{ recording.score }}</span>
                 </div>
                 <span class="recording-time">{{ recording.time }}</span>
-                <div class="recording-details" style="display: flex; justify-content: space-between; align-items: center;gap: 8px;">
+                <div class="recording-details" style="display: flex; justify-content: space-between;">
                   <span class="recording-duration">时长: {{ recording.duration }}</span>
                   <span class="recording-type">{{ recording.type }}</span>
                 </div>
@@ -350,29 +363,9 @@
         </div>
         <div class="modal-body">
           <div class="report-content">
-            <div class="report-field">
-              <label>录音名称:</label>
-              <span>{{ reportData.name }}</span>
-            </div>
-            <div class="report-field">
-              <label>录音时间:</label>
-              <span>{{ reportData.time }}</span>
-            </div>
-            <div class="report-field">
-              <label>录音类型:</label>
-              <span>{{ reportData.type }}</span>
-            </div>
-            <div class="report-field">
-              <label>录音时长:</label>
-              <span>{{ reportData.duration }}</span>
-            </div>
-            <div class="report-field">
-              <label>录音分数:</label>
-              <span>{{ reportData.score }}</span>
-            </div>
             <div class="report-field">
               <label>详细信息:</label>
-              <span style="white-space: pre-wrap; max-height: 300px; overflow-y: auto;">{{ reportData.details }}</span>
+              <div class="report-details" v-html="reportData.detailsHtml"></div>
             </div>
           </div>
         </div>
@@ -382,27 +375,62 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router'; // 引入 useRouter
 import axios from 'axios';
 import { useUserStore } from "@/stores/user";
+import MarkdownIt from 'markdown-it';
+
+const md = new MarkdownIt();
+const router = useRouter(); // 实例化 useRouter
 
 // 弹窗相关的响应式数据
 const showModal = ref(false);
 const modalMessages = ref([]);
 
-// 无归属录音弹窗
+// --- 无归属录音弹窗相关状态 ---
 const showUnassignedRecordingsModal = ref(false);
-const unassignedRecordings = ref([]); // 初始化为空数组
+const categorizedRecordings = ref({}); // **修改**: 用于存储分类后的录音
+const recordingCategories = ref([]); // **新增**: 存储所有分类名称 (用于生成Tab)
+const selectedCategory = ref(null); // **新增**: 存储当前选中的分类
+
+// **新增**: 计算属性，根据选中的分类返回对应的录音列表
+const filteredRecordings = computed(() => {
+  if (!selectedCategory.value || !categorizedRecordings.value[selectedCategory.value]) {
+    return [];
+  }
+  return categorizedRecordings.value[selectedCategory.value];
+});
 
 // 报告弹窗相关数据
 const showReportModal = ref(false);
 const reportData = ref({});
 
-// 处理无归属录音按钮点击事件
+
+// --- 新增：获取通用请求参数的函数 ---
+const getRequestParams = () => {
+  const params = {}
+  // 只从路由参数获取
+  const routeUserLevel = router.currentRoute.value.query.user_level || router.currentRoute.value.params.user_level
+  const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
+  // 如果路由有参数，使用路由参数
+  if (routeUserLevel) {
+    params.user_level = routeUserLevel.toString()
+  }
+  if (routeUserName) {
+    params.user_name = routeUserName
+  }
+  return params
+}
+
+// --- 修改：处理无归属录音按钮点击事件 ---
 const handleUnassignedRecordingsClick = async () => {
   try {
     const userStore = useUserStore();
-    const user_name = userStore.userInfo?.username || 'example_user';
+    const routeParams = getRequestParams(); // 获取路由参数
+
+    // 优先使用路由参数，其次是 Pinia store 中的用户信息，最后是备用值
+    const user_name = routeParams.user_name || userStore.userInfo?.username || 'example_user';
     
     const response = await axios.post('https://mldash.nycjy.cn/api/v1/sales_timeline/get_sale_call_info', {
       user_name: user_name
@@ -410,41 +438,43 @@ const handleUnassignedRecordingsClick = async () => {
     
     console.log('API Response:', response.data.data);
 
-    // --- 开始数据处理逻辑 ---
-
+    // --- 数据处理逻辑，以支持分类 ---
     const apiData = response.data.data;
-    const processedRecordings = [];
+    const tempCategorizedData = {}; // 临时对象
     let uniqueId = 0; 
 
-    // 1. 遍历API返回数据中的每个分类 (例如 "20分钟通话", "视频通话" 等)
     for (const category in apiData) {
       if (Object.prototype.hasOwnProperty.call(apiData, category)) {
         const categoryData = apiData[category];
+        tempCategorizedData[category] = []; // 为每个分类创建一个空数组
         
-        // 2. 遍历该分类下的 'records' 数组
         if (categoryData && Array.isArray(categoryData.records)) {
           categoryData.records.forEach(record => {
-            // 3. 将每个API返回的录音记录转换成前端模板需要的格式
-            processedRecordings.push({
-              id: uniqueId++, // 使用自增ID作为v-for的key
-              name: `录音 ${uniqueId}`, // API没有提供名称，我们创建一个
-              time: new Date(record.record_create_time).toLocaleString('zh-CN'), // 格式化时间
-              type: record.record_tag, // 使用 record_tag 作为类型
-              downloadUrl: record.record_file_addr, // 使用 record_file_addr 作为下载链接
-              duration: record.call_duration ? `${record.call_duration} 分钟` : '未知', // 使用 call_duration 并添加单位
-              score: record.score || '暂无', // 使用 score 字段
-              details: record.report_content || '暂无详细报告内容。' // 存储报告内容
+            tempCategorizedData[category].push({ // 将记录添加到对应的分类数组中
+              id: uniqueId++,
+              name: `录音 ${uniqueId}`,
+              time: new Date(record.record_create_time).toLocaleString('zh-CN'),
+              type: record.record_tag,
+              downloadUrl: record.record_file_addr,
+              duration: record.call_duration ? `${record.call_duration} 分钟` : '未知',
+              score: record.score || '暂无',
+              details: record.report_content || '暂无详细报告内容。'
             });
           });
         }
       }
     }
 
-    // 4. 将处理好的数据赋值给 unassignedRecordings
-    unassignedRecordings.value = processedRecordings;
+    // 更新状态
+    categorizedRecordings.value = tempCategorizedData;
+    recordingCategories.value = Object.keys(tempCategorizedData);
+    // 默认选中第一个Tab
+    if (recordingCategories.value.length > 0) {
+      selectedCategory.value = recordingCategories.value[0];
+    } else {
+      selectedCategory.value = null;
+    }
     
-    // --- 数据处理逻辑结束 ---
-
     showUnassignedRecordingsModal.value = true;
   } catch (error) {
     console.error('API请求失败:', error);
@@ -452,23 +482,17 @@ const handleUnassignedRecordingsClick = async () => {
   }
 };
 
-// 查看报告函数
+// 查看报告函数 (无需修改)
 const viewReport = (recording) => {
-  // 设置报告数据，直接从传入的recording对象中获取
-  reportData.value = {
-    name: recording.name,
-    time: recording.time,
-    type: recording.type,
-    duration: recording.duration,
-    score: recording.score,
-    details: recording.details // 直接使用我们处理好的 details 字段
+  reportData.value = { 
+    details: recording.details,
+    detailsHtml: md.render(recording.details || '暂无详细报告内容。')
   };
-  // 显示报告弹窗
   showReportModal.value = true;
 };
 
+// ... 您其他的 props, computed, methods 等代码保持不变 ...
 
-// 定义props
 const props = defineProps({
   data: {
     type: Object,
@@ -511,237 +535,109 @@ const props = defineProps({
 const emit = defineEmits(['stage-select', 'select-contact', 'sub-stage-select']);
 
 const totalCustomers = computed(() => {
-  // 全部阶段的数量就是前6个阶段的数量
   if (props.customersList?.length > 0) return props.customersList.length;
-    
-  // 如果没有实际数据，使用props.data中的数据作为后备
   if (props.data['全部']) return props.data['全部'];
-  
   const baseStages = [
-    props.data['未加微'] || 0,
-    props.data['已加微'] || 0,
-    props.data['已入群'] || 0,
-    props.data['已填表单'] || 0,
-    props.data['课1-4'] || 0,
-    props.data['点击未支付'] || 0,
-    props.data['付定金'] || 0,
-    props.data['定价转化'] || 0,
-    props.data['成交'] || 0
+    props.data['未加微'] || 0, props.data['已加微'] || 0, props.data['已入群'] || 0,
+    props.data['已填表单'] || 0, props.data['课1-4'] || 0, props.data['点击未支付'] || 0,
+    props.data['付定金'] || 0, props.data['定价转化'] || 0, props.data['成交'] || 0
   ];
   return Math.max(...baseStages, 1);
 });
 
 const getStageCount = (stageType) => {
-  // 成交阶段从payMoneyCustomersList获取数量
   if (stageType === '成交') {
     return props.payMoneyCustomersCount || (props.payMoneyCustomersList?.length || 0);
   }
-  
-  // 课1-4阶段从courseCustomers获取数量
   if (stageType === '课1-4' && props.courseCustomers?.['课1-4']) {
     return props.courseCustomers['课1-4'].length;
   }
-  
-  // 后3个阶段从courseCustomers中筛选
   if (['点击未支付', '付定金', '定金转化'].includes(stageType)) {
     if (props.courseCustomers?.['课1-4']) {
       return props.courseCustomers['课1-4'].filter(customer => customer.type === stageType).length;
     }
     return 0;
   }
-  
-  // 待填表单阶段特殊处理：筛选customer_occupation或customer_child_education字段为'未知'的客户
   if (stageType === '待填表单') {
     if (props.customersList?.length) {
-      return props.customersList.filter(customer => {
-        return (customer.customer_occupation === '未知' || !customer.customer_occupation) ||
-               (customer.customer_child_education === '未知' || !customer.customer_child_education);
-      }).length;
+      return props.customersList.filter(customer => (customer.customer_occupation === '未知' || !customer.customer_occupation) || (customer.customer_child_education === '未知' || !customer.customer_child_education)).length;
     }
     return 0;
   }
-  
-  // 待到课阶段特殊处理：筛选没有到课数据的客户
   if (stageType === '待到课') {
     if (props.customersList?.length) {
       return props.customersList.filter(customer => {
         const classNum = customer.class_num;
         const classSituation = customer.class_situation;
-        
-        // 优先检查class_num字段
-        if (classNum && Array.isArray(classNum) && classNum.length > 0) {
-          return false; // 有class_num数据，不是待到课
-        }
-        
-        // 检查class_situation字段
-        if (!classSituation) return true; // 没有class_situation，是待到课
-        
-        if (Array.isArray(classSituation)) {
-          return classSituation.length === 0; // 空数组，是待到课
-        }
-        
+        if (classNum && Array.isArray(classNum) && classNum.length > 0) return false;
+        if (!classSituation) return true;
+        if (Array.isArray(classSituation)) return classSituation.length === 0;
         if (typeof classSituation === 'object') {
-          const lessonNumbers = Object.keys(classSituation)
-            .map(key => parseInt(key))
-            .filter(num => !isNaN(num));
-          return lessonNumbers.length === 0; // 没有有效的课程数据，是待到课
+          const lessonNumbers = Object.keys(classSituation).map(key => parseInt(key)).filter(num => !isNaN(num));
+          return lessonNumbers.length === 0;
         }
-        
-        return true; // 其他情况默认为待到课
+        return true;
       }).length;
     }
     return 0;
   }
-  
-  // 前6个阶段从customersList中筛选
   if (props.customersList?.length) {
     return props.customersList.filter(customer => customer.type === stageType).length;
   }
-  
-  // 如果没有数据，使用props.data中的数据
   return props.data[stageType] || 0;
 };
 
 const stages = computed(() => {
-  // 全部阶段的数量就是前6个阶段的数量
   const totalCount = props.customersList?.length || 0;
-  
-  const stageList = [
-    { id: 0, name: '全部', displayName: '全部', count: totalCount, color: '#f3f4f6' },
-    { id: 1, name: '待加微', displayName: '待加微', count: getStageCount('待加微'), color: '#e3f2fd' },
-    { id: 2, name: '待填表单', displayName: '待填表单', count: getStageCount('待填表单'), color: '#90caf9' },
-    { id: 3, name: '待入群', displayName: '待入群', count: getStageCount('待入群'), color: '#bbdefb' },
-    { id: 4, name: '待联系', displayName: '待联系', count: getStageCount('待联系'), color: '#bbdefb' },
-    { id: 5, name: '待到课', displayName: '待到课', count: getStageCount('待到课'), color: '#bbdefb'},
-    { id: 6, name: '课1-4', displayName: '课1-4', count: getStageCount('课1-4'), color: '#81c784' },
-    { id: 7, name: '点击未支付', displayName: '点击未付', count: getStageCount('点击未支付'), color: '#42a5f5' },
-    { id: 8, name: '付定金', displayName: '付定金', count: getStageCount('付定金'), color: '#2196f3' },
-    { id: 9, name: '定金转化', displayName: '定金转化', count: getStageCount('定金转化'), color: '#1e88e5' },
-    { id: 10, name: '成交', displayName: '成交', count: getStageCount('成交'), color: '#1976d2' }
+  return [
+    { id: 0, name: '全部', displayName: '全部', count: totalCount },
+    { id: 1, name: '待加微', displayName: '待加微', count: getStageCount('待加微') },
+    { id: 2, name: '待填表单', displayName: '待填表单', count: getStageCount('待填表单') },
+    { id: 3, name: '待入群', displayName: '待入群', count: getStageCount('待入群') },
+    { id: 4, name: '待联系', displayName: '待联系', count: getStageCount('待联系') },
+    { id: 5, name: '待到课', displayName: '待到课', count: getStageCount('待到课') },
+    { id: 6, name: '课1-4', displayName: '课1-4', count: getStageCount('课1-4') },
+    { id: 7, name: '点击未支付', displayName: '点击未付', count: getStageCount('点击未支付') },
+    { id: 8, name: '付定金', displayName: '付定金', count: getStageCount('付定金') },
+    { id: 9, name: '定金转化', displayName: '定金转化', count: getStageCount('定金转化') },
+    { id: 10, name: '成交', displayName: '成交', count: getStageCount('成交') }
   ];
-  
-  return stageList;
 });
 
-
 const getPercentage = (count, stageId, stageName) => {
   if (totalCustomers.value === 0) return 0;
-  
-  // 待填表单阶段特殊计算：(总数-有数据人数)/总数
-  if (stageName === '待填表单') {
+  if (stageName === '待填表单' || (stageId >= 1 && stageId <= 5)) {
     return Math.round((totalCustomers.value - count) / totalCustomers.value * 100);
   }
-  
-  // 待入群阶段特殊计算：(总数-待加微人数-待入群人数)/总数
-  if (stageName === '待入群') {
-    const waitAddWechatCount = getStageCount('待加微');
-    const waitJoinGroupCount = getStageCount('待入群');
-    return Math.round((totalCustomers.value - waitAddWechatCount - waitJoinGroupCount) / totalCustomers.value * 100);
-  }
-  
-  // 待联系阶段特殊计算：(总数-待加微人数-待联系人数)/总数
-  if (stageName === '待联系') {
-    const waitAddWechatCount = getStageCount('待加微');
-    const waitContactCount = getStageCount('待联系');
-    return Math.round((totalCustomers.value - waitAddWechatCount - waitContactCount) / totalCustomers.value * 100);
-  }
-  
-  // 待到课阶段特殊计算：(总数-有到课数据人数)/总数
-  if (stageName === '待到课') {
-    return Math.round((totalCustomers.value - count) / totalCustomers.value * 100);
-  }
-  
-  // 阶段1-5使用现在的算法（转化率）
-  if (stageId >= 1 && stageId <= 5) {
-    return Math.round((totalCustomers.value - count) / totalCustomers.value * 100);
-  }
-  
-  // 阶段5-13使用直接数量除以总数
-  if (stageId >5 && stageId <= 13) {
+  if (stageId > 5 && stageId <= 13) {
     return Math.round((count / totalCustomers.value) * 100);
   }
-  
-  // 其他阶段保持原有逻辑
   return Math.round((totalCustomers.value - count) / totalCustomers.value * 100);
 };
 
-
 const selectStage = (stageName) => {
   let filteredCustomers = [];
-  
   if (stageName === '全部') {
-    // 全部阶段只显示前6个阶段的客户数据
     filteredCustomers = props.customersList || [];
   } else if (stageName === '课1-4' && props.courseCustomers?.['课1-4']) {
-    emit('stage-select', stageName, {
-      isCourseStage: true,
-      courseData: props.courseCustomers['课1-4'],
-      filteredCustomers: props.courseCustomers['课1-4']
-    });
+    emit('stage-select', stageName, { isCourseStage: true, courseData: props.courseCustomers['课1-4'], filteredCustomers: props.courseCustomers['课1-4'] });
     return;
-
   } else if (stageName === '成交') {
-    // 成交阶段使用payMoneyCustomersList数据
     if (props.payMoneyCustomersList && props.payMoneyCustomersList.length > 0) {
-      filteredCustomers = props.payMoneyCustomersList.map(customer => ({
-        customer_name: customer.customer_name,
-        phone: customer.phone,
-        customer_occupation: customer.customer_occupation,
-        customer_child_education: customer.customer_child_education,
-        latest_message_time: customer.latest_message_time,
-        customer_avatar_url: customer.customer_avatar_url,
-        type: '成交'
-      }));
+      filteredCustomers = props.payMoneyCustomersList.map(c => ({ ...c, type: '成交' }));
     }
   } else if (['点击未支付', '付定金', '定金转化'].includes(stageName)) {
-    // 后3个阶段从courseCustomers中筛选
     if (props.courseCustomers?.['课1-4']) {
-      filteredCustomers = props.courseCustomers['课1-4'].filter(customer => customer.type === stageName);
+      filteredCustomers = props.courseCustomers['课1-4'].filter(c => c.type === stageName);
     }
   } else if (stageName === '待填表单') {
-    // 待填表单阶段：筛选customer_occupation或customer_child_education字段为'未知'的客户
-    filteredCustomers = props.customersList.filter(customer => {
-      return (customer.customer_occupation === '未知' || !customer.customer_occupation) ||
-             (customer.customer_child_education === '未知' || !customer.customer_child_education);
-    });
+    filteredCustomers = props.customersList.filter(c => (c.customer_occupation === '未知' || !c.customer_occupation) || (c.customer_child_education === '未知' || !c.customer_child_education));
   } else if (stageName === '待到课') {
-    // 待到课阶段：筛选没有到课数据的客户
-    filteredCustomers = props.customersList.filter(customer => {
-      // 根据getAttendedLessons函数的逻辑判断是否为'未到课'
-      const classNum = customer.class_num;
-      const classSituation = customer.class_situation;
-      
-      // 优先检查class_num字段
-      if (classNum && Array.isArray(classNum) && classNum.length > 0) {
-        return false; // 有class_num数据，不是待到课
-      }
-      
-      // 检查class_situation字段
-      if (!classSituation) return true; // 没有class_situation，是待到课
-      
-      if (Array.isArray(classSituation)) {
-        return classSituation.length === 0; // 空数组，是待到课
-      }
-      
-      if (typeof classSituation === 'object') {
-        const lessonNumbers = Object.keys(classSituation)
-          .map(key => parseInt(key))
-          .filter(num => !isNaN(num));
-        return lessonNumbers.length === 0; // 没有有效的课程数据，是待到课
-      }
-      
-      return true; // 其他情况默认为待到课
-    });
+    filteredCustomers = props.customersList.filter(c => getAttendedLessons(c.class_situation, c.class_num) === '未到课');
   } else {
-    // 前6个阶段从customersList中筛选
-    filteredCustomers = props.customersList.filter(customer => customer.type === stageName);
+    filteredCustomers = props.customersList.filter(c => c.type === stageName);
   }
-  
-  emit('stage-select', stageName, {
-    filteredCustomers,
-    stageType: stageName,
-    customerCount: filteredCustomers.length
-  });
+  emit('stage-select', stageName, { filteredCustomers, stageType: stageName, customerCount: filteredCustomers.length });
 };
 
 const selectedContactDetails = computed(() => {
@@ -749,195 +645,92 @@ const selectedContactDetails = computed(() => {
   return props.contacts.find(contact => contact.id === props.selectedContactId);
 });
 
-const selectContact = (id) => {
-  emit('select-contact', id);
-};
-
-// 显示发言内容弹框
-const showSpeakMessages = (speakMessages) => {
-  modalMessages.value = speakMessages || [];
+const selectContact = (id) => emit('select-contact', id);
+const showSpeakMessages = (messages) => {
+  modalMessages.value = messages || [];
   showModal.value = true;
 };
-
 const closeModal = () => {
   showModal.value = false;
   modalMessages.value = [];
 };
 
-// 获取课程阶段数量
 const getCourseStageCount = (courseNumber, stageType) => {
   if (!props.customersList && !props.courseCustomers) return 0;
-  
-  // 根据课程号和阶段类型筛选客户
   let filteredCustomers = [];
-  
   if (stageType === `课${courseNumber}`) {
-    // 课程阶段：筛选有对应课程到课记录的客户
-    filteredCustomers = props.customersList.filter(customer => {
-      const classNum = customer.class_num;
-      const classSituation = customer.class_situation;
-      
-      // 检查class_num字段
-      if (classNum && Array.isArray(classNum)) {
-        return classNum.includes(courseNumber);
+    filteredCustomers = props.customersList.filter(c => (c.class_num?.includes(courseNumber)) || (c.class_situation && c.class_situation.hasOwnProperty(courseNumber.toString())));
+  } else if (props.courseCustomers?.['课1-4']) {
+    filteredCustomers = props.courseCustomers['课1-4'].filter(c => {
+      let hasPaymentInCourse = c.time_and_camp_stage?.some(r => r.camp_stage === `课${courseNumber}` && r.pay_status === stageType);
+      if (!hasPaymentInCourse) {
+        hasPaymentInCourse = c.class_num?.includes(courseNumber) && c.type === stageType;
       }
-      
-      // 检查class_situation字段
-      if (classSituation) {
-        if (Array.isArray(classSituation)) {
-          return classSituation.includes(courseNumber);
-        }
-        if (typeof classSituation === 'object') {
-          return classSituation.hasOwnProperty(courseNumber.toString());
-        }
-      }
-      
-      return false;
+      return hasPaymentInCourse;
     });
-  } else {
-    // 其他阶段：从courseCustomers['课1-4']中筛选
-    if (props.courseCustomers?.['课1-4']) {
-      filteredCustomers = props.courseCustomers['课1-4'].filter(customer => {
-        // 检查客户的付款行为是否发生在指定课程阶段并且类型匹配
-        let hasPaymentInCourse = false;
-        
-        // 优先使用time_and_camp_stage字段判断付款行为发生的课程阶段
-        if (customer.time_and_camp_stage && Array.isArray(customer.time_and_camp_stage)) {
-          hasPaymentInCourse = customer.time_and_camp_stage.some(record => {
-            return record.camp_stage === `课${courseNumber}` && record.pay_status === stageType;
-          });
-        }
-        
-        // 如果time_and_camp_stage没有匹配的记录，则回退到class_num字段
-        if (!hasPaymentInCourse) {
-          const hasAttendedCourse = customer.class_num && Array.isArray(customer.class_num) && customer.class_num.includes(courseNumber);
-          hasPaymentInCourse = hasAttendedCourse && customer.type === stageType;
-        }
-        
-        return hasPaymentInCourse;
-      });
-    }
   }
-  
   return filteredCustomers.length;
 };
 
-// 获取课程转化率
 const getCourseConversionRate = (courseNumber) => {
   const courseStageCount = getCourseStageCount(courseNumber, `课${courseNumber}`);
   const depositCount = getCourseStageCount(courseNumber, '付定金');
-  
   if (courseStageCount === 0) return 0;
   return Math.round((depositCount / courseStageCount) * 100);
 };
 
 const getAttendedLessons = (classSituation, classNum) => {
-  // 优先使用 class_num 字段
   if (classNum && Array.isArray(classNum) && classNum.length > 0) {
-    const filteredClassNum = classNum.filter(num => num !== -1);
-    return filteredClassNum.length > 0 ? filteredClassNum.sort((a, b) => a - b).join(' ') : '未到课';
+    const filtered = classNum.filter(n => n !== -1);
+    return filtered.length > 0 ? filtered.sort((a, b) => a - b).join(' ') : '未到课';
   }
-  
-  // 如果没有 class_num，则使用 class_situation
   if (!classSituation) return '未到课';
-  
   if (Array.isArray(classSituation)) {
-    const filteredSituation = classSituation.filter(item => item !== -1);
-    return filteredSituation.length > 0 ? filteredSituation.join(' ') : '未到课';
+    const filtered = classSituation.filter(i => i !== -1);
+    return filtered.length > 0 ? filtered.join(' ') : '未到课';
   }
   if (typeof classSituation === 'object') {
-    const lessonNumbers = Object.keys(classSituation)
-      .map(key => parseInt(key))
-      .filter(num => !isNaN(num) && num !== -1)
-      .sort((a, b) => a - b);
-    return lessonNumbers.length > 0 ? lessonNumbers.join(' ') : '未到课';
+    const lessons = Object.keys(classSituation).map(k => parseInt(k)).filter(n => !isNaN(n) && n !== -1).sort((a, b) => a - b);
+    return lessons.length > 0 ? lessons.join(' ') : '未到课';
   }
-  
   return '未到课';
 };
 
-// 获取健康度对应的CSS类
 const getHealthClass = (health) => {
   if (!health && health !== 0) return '';
-  
   const healthValue = parseFloat(health);
-  
-  if (healthValue >= 80) {
-    return 'health-good';
-  } else if (healthValue >= 60) {
-    return 'health-normal';
-  } else if (healthValue >= 40) {
-    return 'health-warning';
-  } else {
-    return 'health-danger';
-  }
+  if (healthValue >= 80) return 'health-good';
+  if (healthValue >= 60) return 'health-normal';
+  if (healthValue >= 40) return 'health-warning';
+  return 'health-danger';
 };
 
-// 选择课程阶段
 const selectCourseStage = (courseNumber, stageType) => {
   let filteredCustomers = [];
-  
   if (stageType === `课${courseNumber}`) {
-    // 课程阶段：从customersList中筛选
-    filteredCustomers = props.customersList.filter(customer => {
-      const classNum = customer.class_num;
-      const classSituation = customer.class_situation;
-      
-      // 检查class_num字段
-      if (classNum && Array.isArray(classNum)) {
-        return classNum.includes(courseNumber);
+    filteredCustomers = props.customersList.filter(c => (c.class_num?.includes(courseNumber)) || (c.class_situation && c.class_situation.hasOwnProperty(courseNumber.toString())));
+  } else if (props.courseCustomers?.['课1-4']) {
+    filteredCustomers = props.courseCustomers['课1-4'].filter(c => {
+      let hasPaymentInCourse = c.time_and_camp_stage?.some(r => r.camp_stage === `课${courseNumber}` && r.pay_status === stageType);
+      if (!hasPaymentInCourse) {
+        hasPaymentInCourse = c.class_num?.includes(courseNumber) && c.type === stageType;
       }
-      
-      // 检查class_situation字段
-      if (classSituation) {
-        if (Array.isArray(classSituation)) {
-          return classSituation.includes(courseNumber);
-        }
-        if (typeof classSituation === 'object') {
-          return classSituation.hasOwnProperty(courseNumber.toString());
-        }
-      }
-      
-      return false;
+      return hasPaymentInCourse;
     });
-  } else {
-    // 其他阶段：从courseCustomers中筛选
-    if (props.courseCustomers?.['课1-4']) {
-      filteredCustomers = props.courseCustomers['课1-4'].filter(customer => {
-        // 检查客户的付款行为是否发生在指定课程阶段并且类型匹配
-        let hasPaymentInCourse = false;
-        
-        // 优先使用time_and_camp_stage字段判断付款行为发生的课程阶段
-        if (customer.time_and_camp_stage && Array.isArray(customer.time_and_camp_stage)) {
-          hasPaymentInCourse = customer.time_and_camp_stage.some(record => {
-            return record.camp_stage === `课${courseNumber}` && record.pay_status === stageType;
-          });
-        }
-        
-        // 如果time_and_camp_stage没有匹配的记录，则回退到class_num字段
-        if (!hasPaymentInCourse) {
-          const hasAttendedCourse = customer.class_num && customer.class_num.includes(courseNumber);
-          hasPaymentInCourse = hasAttendedCourse && customer.type === stageType;
-        }
-        
-        return hasPaymentInCourse;
-      });
-    }
   }
-  
-  // 发送子时间轴选择事件给父组件，使用不同的事件名称避免与主轴冲突
   emit('sub-stage-select', {
     filteredCustomers,
     stageType: `课${courseNumber}-${stageType}`,
     customerCount: filteredCustomers.length,
     courseNumber,
     originalStageType: stageType,
-    keepSubTimeline: true // 标识保持子时间轴显示
+    keepSubTimeline: true
   });
 };
 </script>
 
 <style lang="scss" scoped>
+
 // Color Variables
 $slate-50: #f8fafc;
 $slate-100: #f1f5f9;
@@ -949,1216 +742,187 @@ $slate-600: #475569;
 $slate-700: #334155;
 $slate-800: #1e293b;
 $white: #ffffff;
-
 $primary: #3b82f6;
 $success: #22c55e;
 $warning: #f59e0b;
 $danger: #ef4444;
 $indigo: #4f46e5;
 
-// 到课详情区域样式
-.course-details {
-  background: $white;
-  border-radius: 0.75rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  margin-top: 1rem;
-  overflow: hidden;
-  
-  .course-details-header {
-    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
-    padding: 0.75rem 1rem;
-    border-bottom: 1px solid $slate-200;
-    
-    h4 {
-      margin: 0;
-      font-size: 0.875rem;
-      font-weight: 600;
-      color: $slate-700;
-    }
-  }
-  
-  .course-details-content {
-    padding: 1rem;
-    max-height: 200px;
-    overflow-y: auto;
-    
-    .no-data {
-      text-align: center;
-      color: $slate-500;
-      font-size: 0.875rem;
-      padding: 1rem 0;
-    }
-    
-    .course-lessons {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      gap: 0.75rem;
-      
-      .lesson-item {
-        background: $slate-50;
-        border-radius: 0.5rem;
-        padding: 0.75rem;
-        
-        .lesson-header {
-          margin-bottom: 0.5rem;
-          
-          .lesson-number {
-            font-size: 0.875rem;
-            font-weight: 600;
-            color: $slate-700;
-          }
-        }
-        
-        .lesson-details {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 1rem;
-          
-          .detail-item {
-            display: flex;
-            align-items: center;
-            gap: 0.25rem;
-            
-            .detail-label {
-              font-size: 0.75rem;
-              color: $slate-500;
-              font-weight: 500;
-            }
-            
-            .detail-value {
-              font-size: 0.875rem;
-              color: $slate-700;
-              font-weight: 600;
-            }
-          }
-        }
-      }
-    }
-  }
-  
-  @media (max-width: 768px) {
-    margin-top: 0.75rem;
-    
-    .course-details-header {
-      padding: 0.625rem 0.75rem;
-      
-      h4 {
-        font-size: 0.8125rem;
-      }
-    }
-    
-    .course-details-content {
-      padding: 0.75rem;
-      max-height: 150px;
-      
-      .course-lessons {
-        gap: 0.5rem;
-        
-        .lesson-item {
-          padding: 0.625rem;
-          
-          .lesson-details {
-            gap: 0.75rem;
-            
-            .detail-item {
-              .detail-label {
-                font-size: 0.6875rem;
-              }
-              
-              .detail-value {
-                font-size: 0.8125rem;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.sales-timeline-with-task-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-// Sales Timeline Styles
-.sales-timeline {
-  padding: 1.5rem;
-  background: $white;
-  border-radius: 1rem;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  
-  @media (max-width: 768px) {
-    padding: 1rem;
-  }
-}
-
-.timeline-container {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  overflow-x: auto;
-  padding: 2rem 1rem 1rem 1rem;
-  
-  @media (max-width: 768px) {
-    padding: 1.5rem 0.5rem 0.5rem 0.5rem;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-  
-  @media (max-width: 480px) {
-    padding: 1rem 0.25rem 0.25rem 0.25rem;
-  }
-}
-
-.timeline-line {
-  position: absolute;
-  top: 4rem;
-  left: 2rem;
-  right: 2rem;
-  height: 3px;
-  background: linear-gradient(to right, $primary, $success);
-  border-radius: 2px;
-  
-  @media (max-width: 768px) {
-    top: 3rem;
-    left: 1.5rem;
-    right: 1.5rem;
-  }
-}
-
-.timeline-stage {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-  min-width: 0;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border-radius: 8px;
-  padding: 0.5rem 8px;
-  
-  @media (max-width: 768px) {
-    gap: 0.75rem;
-    min-width: 120px;
-  }
-  
-  @media (max-width: 480px) {
-    gap: 0.5rem;
-    min-width: 100px;
-    padding: 0.25rem 4px;
-  }
-  
-  &:hover {
-    background-color: rgba(59, 130, 246, 0.05);
-    transform: translateY(-2px);
-    
-    .marker-circle {
-      border-color: $primary;
-      transform: scale(1.1);
-    }
-  }
-  
-  &.selected {
-    background-color: rgba(59, 130, 246, 0.1);
-    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
-    
-    .marker-circle {
-      border-color: $primary;
-      background: $primary;
-      transform: scale(1.2);
-      
-      .stage-number {
-        color: $white;
-      }
-    }
-  }
-  
-  &.active {
-    .marker-circle {
-      background: linear-gradient(135deg, $primary, $success);
-      color: $white;
-      transform: scale(1.1);
-      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
-    }
-    
-    .stage-content {
-      .stage-title {
-        font-size: 1rem;
-        color: $slate-800;
-        font-weight: 500;
-      }
-      
-      .stage-count {
-        color: $primary;
-        font-weight: 700;
-      }
-    }
-  }
-}
-
-.stage-marker {
-  position: relative;
-  z-index: 3;
-  
-  .marker-circle {
-    width: 4rem;
-    height: 4rem;
-    border-radius: 50%;
-    background: $slate-200;
-    border: 3px solid $white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    position: relative;
-    z-index: 3;
-    
-    @media (max-width: 768px) {
-      width: 3rem;
-      height: 3rem;
-    }
-  
-    .stage-number {
-      font-size: 1.125rem;
-      font-weight: 700;
-      color: $slate-600;
-      
-      @media (max-width: 768px) {
-        font-size: 1rem;
-      }
-    }
-  }
-}
-
-.stage-content {
-  text-align: center;
-  width: 100%;
-  
-  .stage-title {
-    font-size: 1rem;
-    font-weight: 500;
-    color: $slate-700;
-    margin: 0 0 0.75rem 0;
-    
-    @media (max-width: 768px) {
-      font-size: 0.875rem;
-    }
-  }
-  
-  .stage-stats {
-    display: flex;
-    align-items: baseline;
-    justify-content: center;
-    gap: 0.5rem;
-    margin-bottom: 0.5rem;
-    
-    .stage-count {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: $slate-600;
-      line-height: 1;
-      
-      @media (max-width: 768px) {
-        font-size: 1.25rem;
-      }
-    }
-    
-    .stage-label {
-      font-size: 0.75rem;
-      color: $slate-500;
-      font-weight: 500;
-    }
-  }
-  
-  .stage-percentage {
-    font-size: 0.75rem;
-    color: $slate-400;
-    font-weight: 500;
-    background: $slate-100;
-    padding: 0.25rem 0.75rem;
-    border-radius: 1rem;
-    display: inline-block;
-  }
-}
-
-// Task List Styles
-.task-body {
-  padding: 1rem;
-  min-height: 15vh;
-  max-height: 50vh;
-  background: $white;
-  border-radius: 1rem;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  overflow-y: auto;
-  
-  @media (max-width: 768px) {
-    padding: 0 1rem;
-  }
-  
-  @media (max-width: 480px) {
-    padding: 0 0.75rem;
-  }
-}
-
-// Unassigned Recordings Button Styles
-.unassigned-recordings-btn {
-  background-color: $primary;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s ease;
-  
-  &:hover {
-    background-color: darken($primary, 10%);
-  }
-  
-  &:focus {
-    outline: 2px solid lighten($primary, 20%);
-    outline-offset: 2px;
-  }
-}
-
-// Unassigned Recordings Modal Styles
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  backdrop-filter: blur(2px);
-}
-
-.modal-content {
-  background: $white;
-  border-radius: 12px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-  width: 90%;
-  max-width: 500px;
-  max-height: 60vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  animation: modalFadeIn 0.3s ease-out;
-}
-
-@keyframes modalFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-  border-bottom: 1px solid $slate-200;
-  background: linear-gradient(135deg, $slate-50, $white);
-  
-  h3 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: $slate-800;
-  }
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: $slate-500;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: all 0.2s ease;
-  
-  &:hover {
-    background-color: $slate-200;
-    color: $slate-700;
-  }
-}
-
-.modal-body {
-  padding: 20px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.no-messages {
-  text-align: center;
-  color: $slate-500;
-  font-size: 1rem;
-  padding: 2rem 0;
-  background-color: $slate-50;
-  border-radius: 8px;
-  margin: 10px 0;
-}
-
-.recordings-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.recording-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  background-color: $slate-50;
-  border-radius: 8px;
-  transition: all 0.2s ease;
-  
-  &:hover {
-    background-color: $slate-100;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
-  }
-}
-
-.recording-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-}
-
-.recording-name {
-  font-weight: 500;
-  color: $slate-800;
-  font-size: 0.95rem;
-}
-
-.recording-time {
-  font-size: 0.8rem;
-  color: $slate-600;
-}
-
-.recording-type {
-  font-size: 0.75rem;
-  color: $slate-500;
-  background-color: $slate-200;
-  padding: 2px 8px;
-  border-radius: 12px;
-  display: inline-flex;
-  width: fit-content;
-  margin-top: 4px;
-}
-
-.recording-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.recording-score {
-  font-size: 0.8rem;
-  color: #f59e0b;
-  font-weight: 600;
-}
-
-.recording-duration {
-  font-size: 0.8rem;
-  color: $slate-600;
-}
-
-.recording-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.report-link {
-  background-color: #10b981;
-  color: white;
-  border: none;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  
-  &:hover {
-    background-color: darken(#10b981, 10%);
-  }
-}
-
-.download-link {
-  background-color: $primary;
-  color: white;
-  text-decoration: none;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 0.85rem;
-  transition: background-color 0.2s ease;
-  
-  &:hover {
-    background-color: darken($primary, 10%);
-  }
-}
-
-.report-modal {
-  max-width: 600px;
-  max-height: 80vh;
-}
-
-.report-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.report-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
+.sales-timeline-with-task-list { display: flex; flex-direction: column; gap: 1rem; }
+.sales-timeline { padding: 1.5rem; background: $white; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
+.timeline-container { position: relative; display: flex; justify-content: space-between; align-items: flex-start; overflow-x: auto; padding: 2rem 1rem 1rem 1rem; }
+.timeline-line { position: absolute; top: 4rem; left: 2rem; right: 2rem; height: 3px; background: linear-gradient(to right, $primary, $success); border-radius: 2px; }
+.timeline-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; flex: 1; min-width: 120px; cursor: pointer; transition: all 0.3s ease; border-radius: 8px; padding: 0.5rem 8px; &:hover { background-color: rgba(59, 130, 246, 0.05); transform: translateY(-2px); .marker-circle { border-color: $primary; transform: scale(1.1); } } &.selected { background-color: rgba(59, 130, 246, 0.1); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); .marker-circle { border-color: $primary; background: $primary; transform: scale(1.2); .stage-number { color: $white; } } } &.active { .marker-circle { background: linear-gradient(135deg, $primary, $success); color: $white; transform: scale(1.1); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); } .stage-content { .stage-title { color: $slate-800; } .stage-count { color: $primary; font-weight: 700; } } } }
+.stage-marker { position: relative; z-index: 3; .marker-circle { width: 4rem; height: 4rem; border-radius: 50%; background: $slate-200; border: 3px solid $white; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); .stage-number { font-size: 1.125rem; font-weight: 700; color: $slate-600; } } }
+.stage-content { text-align: center; width: 100%; .stage-title { font-size: 1rem; font-weight: 500; color: $slate-700; margin: 0 0 0.75rem 0; } .stage-stats { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; .stage-count { font-size: 1.5rem; font-weight: 700; color: $slate-600; line-height: 1; } .stage-label { font-size: 0.75rem; color: $slate-500; } } .stage-percentage { font-size: 0.75rem; color: $slate-400; background: $slate-100; padding: 0.25rem 0.75rem; border-radius: 1rem; display: inline-block; } }
+.course-details { background: $white; border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin-top: 1rem; .course-details-header { background: linear-gradient(135deg, #f8fafc, #e2e8f0); padding: 0.75rem 1rem; border-bottom: 1px solid $slate-200; h4 { margin: 0; font-size: 0.875rem; font-weight: 600; color: $slate-700; } } .course-details-content { padding: 1rem; max-height: 200px; overflow-y: auto; .no-data { text-align: center; color: $slate-500; padding: 1rem 0; } .course-lessons { display: flex; flex-direction: row; gap: 0.75rem; .lesson-item { background: $slate-50; border-radius: 0.5rem; padding: 0.75rem; .lesson-header .lesson-number { font-weight: 600; } .lesson-details { display: flex; flex-wrap: wrap; gap: 1rem; .detail-item .detail-label { color: $slate-500; } .detail-item .detail-value { font-weight: 600; } } } } } }
+.task-body { padding: 1rem; max-height: 50vh; background: $white; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow-y: auto; }
+.actionable-list { display: flex; flex-direction: column; }
+.items-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 250px)); gap: 0.45rem; justify-content: center; }
+.action-item { background-color: $white; padding: 0.25rem; border-radius: 0.5rem; border: 1px solid $slate-200; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; &:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); } &.active { background-color: #eef2ff; border-color: $indigo; } .item-content { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; } .avatar-section .avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; background-color: $slate-200; .avatar-img { width: 100%; height: 100%; object-fit: cover; } } .info-section { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } .item-header { display: flex; justify-content: space-between; align-items: flex-start; } .item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-time { font-size: 0.75rem; color: $slate-500; flex-shrink: 0; } .profession-education { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; .profession, .education, .course-type, .course-attendance { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 0.3rem; font-weight: 500; } .profession { background-color: #e0f2fe; color: #0277bd; } .education { background-color: #f3e5f5; color: #7b1fa2; } .course-type { background-color: #e8f5e8; color: #2e7d32; } .course-attendance { background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1565c0; border: 1px solid #90caf9; } } }
+.unassigned-recordings-btn { background-color: $primary; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; &:hover { background-color: darken($primary, 10%); } }
+.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; backdrop-filter: blur(2px); }
+.modal-content { background: $white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); width: 90%; max-width: 500px; max-height: 70vh; overflow: hidden; display: flex; flex-direction: column; animation: modalFadeIn 0.3s ease-out; }
+.recordings-modal { max-width: 800px; /* 增大弹窗宽度以容纳多列 */ }
+@keyframes modalFadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
+.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid $slate-200; h3 { margin: 0; font-size: 1.25rem; font-weight: 600; } }
+.close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: $slate-500; transition: all 0.2s ease; &:hover { background-color: $slate-200; color: $slate-700; } }
+.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
+.no-messages { text-align: center; color: $slate-500; padding: 2rem 0; }
+.recordings-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
+.recording-item { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 16px; background-color: $slate-50; border-radius: 8px; transition: all 0.2s ease; &:hover { background-color: $slate-100; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } }
+.recording-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
+.recording-header { display: flex; justify-content: space-between; align-items: center; }
+.recording-name { font-weight: 500; color: $slate-800; }
+.recording-time { font-size: 0.8rem; color: $slate-600; }
+.recording-type { font-size: 0.75rem; color: $slate-500; background-color: $slate-200; padding: 2px 8px; border-radius: 12px; display: inline-block; width: fit-content; }
+.recording-score { font-size: 0.8rem; color: $warning; font-weight: 600; }
+.recording-duration { font-size: 0.8rem; color: $slate-600; }
+.recording-actions { display: flex; gap: 8px; margin-top: 8px; }
+.report-link, .download-link { color: white; border: none; padding: 6px 10px; border-radius: 4px; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease; text-decoration: none; text-align: center; }
+.report-link { background-color: $success; &:hover { background-color: darken($success, 10%); } }
+.download-link { background-color: $primary; &:hover { background-color: darken($primary, 10%); } }
+.report-modal { max-width: 600px; }
+.report-content { display: flex; flex-direction: column; gap: 12px; }
 .report-field label {
   font-weight: 600;
-  color: $slate-700;
 }
 
-.report-field span {
-  color: $slate-600;
-  padding: 8px 12px;
+.report-details {
+  color: $slate-700;
+  padding: 12px;
   background-color: $slate-50;
   border-radius: 4px;
-  border: 1px solid $slate-200;
+  max-height: 500px;
+  overflow-y: auto;
 }
 
-.actionable-list {
+/* Markdown内容样式 */
+.report-details h1,
+.report-details h2,
+.report-details h3 {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  color: $slate-800;
+}
+
+.report-details h1 {
+  font-size: 1.5rem;
+  border-bottom: 1px solid $slate-200;
+  padding-bottom: 8px;
+}
+
+.report-details h2 {
+  font-size: 1.3rem;
+  border-bottom: 1px solid $slate-200;
+  padding-bottom: 6px;
+}
+
+.report-details h3 {
+  font-size: 1.1rem;
+}
+
+.report-details p {
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+.report-details ul,
+.report-details ol {
+  padding-left: 20px;
+  margin-bottom: 8px;
+}
+
+.report-details li {
+  margin-bottom: 4px;
+}
+
+.report-details code {
+  background-color: $slate-100;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: monospace;
+}
+
+.report-details pre {
+  background-color: $slate-100;
+  padding: 12px;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin-bottom: 12px;
+}
+
+.report-details pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+.report-details blockquote {
+  border-left: 4px solid $slate-300;
+  padding-left: 12px;
+  margin-left: 0;
+  color: $slate-600;
+}
+
+.report-details table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 12px;
+}
+
+.report-details th,
+.report-details td {
+  border: 1px solid $slate-300;
+  padding: 8px;
+  text-align: left;
+}
+
+.report-details th {
+  background-color: $slate-100;
+  font-weight: bold;
+} 
+.clickable { cursor: pointer; color: #1976d2; text-decoration: underline; &:hover { color: #1565c0; } }
+.messages-list { display: flex; flex-direction: column; gap: 12px; .message-item { display: flex; gap: 8px; padding: 12px; background-color: #f9fafb; border-radius: 6px; border-left: 3px solid $primary; } .message-number { font-weight: 600; color: $primary; } }
+.course-sub-timeline { margin: 16px 0; padding: 12px; background-color: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; }
+.sub-timeline-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
+.course-timeline { background: white; border-radius: 6px; padding: 8px 12px; border: 1px solid #e5e7eb; }
+.course-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.course-title { font-weight: 600; }
+.course-conversion { font-size: 12px; color: $slate-500; background-color: $slate-100; padding: 2px 6px; border-radius: 4px; }
+.mini-timeline { display: flex; align-items: flex-start; gap: 4px; position: relative; padding-top: 6px; &::before { content: ''; position: absolute; top: 12px; left: 6px; right: 6px; height: 2px; background-color: $slate-200; z-index: 1; } }
+.mini-stage { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; flex: 1; min-width: 0; .mini-marker { width: 12px; height: 12px; border-radius: 50%; background-color: $slate-200; border: 2px solid white; transition: all 0.3s ease; margin-bottom: 4px; } &.active .mini-marker { background-color: $primary; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } .mini-content { display: flex; flex-direction: column; align-items: center; } .mini-title { font-size: 11px; color: $slate-500; } &.active .mini-title { color: $slate-800; font-weight: 600; } .mini-count { font-size: 12px; font-weight: 600; color: $slate-500; background-color: $slate-100; padding: 1px 4px; border-radius: 3px; } &.active .mini-count { background-color: #dbeafe; color: #1d4ed8; } }
+
+/* --- 新增：Tab栏样式 --- */
+.modal-tabs {
   display: flex;
-  flex-direction: column;
+  gap: 8px;
+  border-bottom: 1px solid $slate-200;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  overflow-x: auto; /* 在移动端允许横向滚动 */
 }
 
-.items-grid {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 250px));
-  gap: 0.45rem;
-  justify-content: center;
-  
-  @media (max-width: 768px) {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.5rem;
-  }
-  
-  @media (max-width: 480px) {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.375rem;
-  }
-}
-
-.action-item {
-  background-color: $white;
-  padding: 0.25rem;
-  border-radius: 0.5rem;
-  border: 1px solid $slate-200;
+.tab-btn {
+  padding: 8px 16px;
+  background-color: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  min-height: 50px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  
-  @media (max-width: 768px) {
-    padding: 0.75rem;
-    min-height: 90px;
-  }
-  
-  @media (max-width: 480px) {
-    padding: 0.625rem;
-    min-height: 50px;
-  }
+  font-size: 14px;
+  font-weight: 500;
+  color: $slate-600;
+  transition: all 0.3s ease;
+  white-space: nowrap; /* 防止Tab文字换行 */
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
-    
-    @media (max-width: 768px) {
-      transform: none;
-    }
-  }
-  
-  @media (max-width: 768px) {
-    &:active {
-      transform: scale(0.98);
-      background-color: $slate-50;
-    }
+    background-color: $slate-100;
+    color: $slate-800;
   }
 
   &.active {
-    background-color: #eef2ff;
-    border-color: $indigo;
-  }
-
-  .item-content {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.75rem;
-    width: 100%;
-    
-    @media (max-width: 768px) {
-      gap: 0.5rem;
-    }
-    
-    @media (max-width: 480px) {
-      gap: 0.375rem;
-    }
-  }
-
-  .avatar-section {
-    flex-shrink: 0;
-    
-    .avatar {
-      width: 2.5rem;
-      height: 2.5rem;
-      border-radius: 50%;
-      overflow: hidden;
-      background-color: $slate-200;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      
-      @media (max-width: 768px) {
-        width: 2.25rem;
-        height: 2.25rem;
-      }
-      
-      @media (max-width: 480px) {
-        width: 2rem;
-        height: 2rem;
-      }
-      
-      .avatar-img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 50%;
-      }
-    }
-  }
-
-  .info-section {
-    flex: 1;
-    min-width: 0; // 允许flex项目收缩
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    
-    @media (max-width: 768px) {
-      gap: 0.375rem;
-    }
-    
-    @media (max-width: 480px) {
-      gap: 0.25rem;
-    }
-  }
-
-  .item-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 0.5rem;
-  }
-  
-  .item-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    
-    @media (max-width: 768px) {
-      gap: 0.375rem;
-    }
-    
-    @media (max-width: 480px) {
-      gap: 0.25rem;
-    }
-  }
-
-  .item-name-group {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    min-width: 0; // 允许收缩
-    
-    .icon {
-      margin-right: 0.5rem;
-      flex-shrink: 0;
-    }
-    
-    .item-name {
-      font-weight: 600;
-      font-size: 0.875rem;
-      line-height: 1.3;
-      color: $slate-800;
-      
-      // 处理名字过长的情况
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 100%;
-      
-      @media (max-width: 768px) {
-        font-size: 0.75rem;
-      }
-      
-      @media (max-width: 480px) {
-        font-size: 0.75rem;
-      }
-    }
-  }
-
-  .item-time {
-    font-size: 0.75rem;
-    color: $slate-500;
-    flex-shrink: 0;
-    white-space: nowrap;
-    
-    @media (max-width: 768px) {
-      font-size: 0.6875rem;
-    }
-    
-    @media (max-width: 480px) {
-      font-size: 0.625rem;
-    }
-  }
-
-  .health-status {
-    font-size: 0.75rem;
-    font-weight: bold;
-    
-    @media (max-width: 768px) {
-      font-size: 0.6875rem;
-    }
-    
-    @media (max-width: 480px) {
-      font-size: 0.625rem;
-    }
+    color: $primary;
+    border-bottom-color: $primary;
+    font-weight: 600;
   }
 }
-
-// Profession and Education
-.profession-education {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-  flex-wrap: wrap;
-  
-  @media (max-width: 480px) {
-    gap: 0.5rem;
-  }
-  
-  .profession, .education {
-    font-size: 0.75rem;
-    border-radius: 0.3rem;
-    font-weight: 500;
-    
-    @media (max-width: 768px) {
-      font-size: 0.75rem;
-      padding: 0.1875rem 0.375rem;
-    }
-    
-    @media (max-width: 480px) {
-      font-size: 0.75rem;
-      padding: 0.125rem 0.25rem;
-    }
-  }
-  
-  .profession {
-    background-color: #e0f2fe;
-    color: #0277bd;
-  }
-  
-  .education {
-    background-color: #f3e5f5;
-    color: #7b1fa2;
-  }
-  
-  .course-type {
-    background-color: #e8f5e8;
-    color: #2e7d32;
-    font-size: 0.75rem;
-    padding: 0.1rem 0.5rem;
-    border-radius: 0.3rem;
-    font-weight: 500;
-    display: inline-block;
-    
-    @media (max-width: 768px) {
-      font-size: 0.75rem;
-      padding: 0.1875rem 0.375rem;
-    }
-    
-    @media (max-width: 480px) {
-      font-size: 0.75rem;
-      padding: 0.125rem 0.25rem;
-      margin-left: 0.375rem;
-    }
-  }
-  
-  .course-attendance {
-    display: inline-block;
-    // margin-top: 0.25rem;
-    padding: 0.1rem 0.25rem;
-    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
-    border-radius: 0.3rem;
-    font-size: 0.75rem;
-    color: #1565c0;
-    font-weight: 500;
-    border: 1px solid #90caf9;
-    
-    @media (max-width: 768px) {
-      font-size: 0.75rem;
-      padding: 0.1875rem 0.375rem;
-    }
-    
-    @media (max-width: 480px) {
-      font-size: 0.75rem;
-      padding: 0.125rem 0.25rem;
-    }
-  }
-}
-
-
-// Health status styles
-
-// Clickable styles
-.clickable {
-  cursor: pointer;
-  color: #1976d2;
-  text-decoration: underline;
-  transition: color 0.2s ease;
-  
-  &:hover {
-    color: #1565c0;
-    text-decoration: none;
-  }
-}
-
-/* 弹窗样式 */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  background: white;
-  border-radius: 8px;
-  width: 90%;
-  max-width: 700px;
-  max-height: 70vh; /* 增加高度 */
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #f9fafb;
-  flex-shrink: 0;
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #374151;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #6b7280;
-  padding: 0;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: background-color 0.2s;
-}
-
-.close-btn:hover {
-  background-color: #e5e7eb;
-  color: #374151;
-}
-
-.modal-body {
-  padding: 20px;
-  overflow-y: auto;
-  flex-grow: 1;
-}
-
-.no-messages {
-  text-align: center;
-  color: #6b7280;
-  font-size: 16px;
-  padding: 40px 20px;
-}
-
-.messages-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.message-item {
-  display: flex;
-  gap: 8px;
-  padding: 12px;
-  background-color: #f9fafb;
-  border-radius: 6px;
-  border-left: 3px solid #3b82f6;
-}
-
-.message-number {
-  font-weight: 600;
-  color: #3b82f6;
-  min-width: 20px;
-}
-
-.message-content {
-  flex: 1;
-  line-height: 1.5;
-  color: #374151;
-}
-
-/* 课1-4子时间轴样式 */
-.course-sub-timeline {
-  margin: 16px 0;
-  padding: 12px;
-  background-color: #f8fafc;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-}
-
-.sub-timeline-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  gap: 8px;
-}
-
-.course-timeline {
-  background: white;
-  border-radius: 6px;
-  padding: 8px 12px;
-  border: 1px solid #e5e7eb;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.course-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid #f1f5f9;
-}
-
-.course-title {
-  font-weight: 600;
-  color: #1e293b;
-  font-size: 14px;
-}
-
-.course-conversion {
-  font-size: 12px;
-  color: #64748b;
-  background-color: #f1f5f9;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.mini-timeline {
-  display: flex;
-  align-items: flex-start;
-  gap: 4px;
-  position: relative;
-  padding-top: 6px;
-}
-
-.mini-timeline::before {
-  content: '';
-  position: absolute;
-  top: 12px;
-  left: 6px;
-  right: 6px;
-  height: 2px;
-  background-color: #e2e8f0;
-  z-index: 1;
-}
-
-.mini-stage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  z-index: 2;
-  flex: 1;
-  min-width: 0;
-}
-
-.mini-marker {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: #e2e8f0;
-  border: 2px solid white;
-  transition: all 0.3s ease;
-  margin-bottom: 4px;
-  position: relative;
-}
-
-.mini-stage.active .mini-marker {
-  background-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-}
-
-.mini-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.mini-title {
-  font-size: 11px;
-  color: #64748b;
-  font-weight: 500;
-  line-height: 1.2;
-  margin-bottom: 2px;
-  word-break: break-all;
-}
-
-.mini-stage.active .mini-title {
-  color: #1e293b;
-  font-weight: 600;
-}
-
-.mini-count {
-  font-size: 12px;
-  font-weight: 600;
-  color: #64748b;
-  background-color: #f1f5f9;
-  padding: 1px 4px;
-  border-radius: 3px;
-  min-width: 16px;
-  text-align: center;
-}
-
-.mini-stage.active .mini-count {
-  background-color: #dbeafe;
-  color: #1d4ed8;
-}
-
-/* --- 无归属录音弹窗样式 --- */
-.recordings-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 响应式布局 */
-  gap: 16px;
-}
-
-.recording-item {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 8px;
-  background-color: #f9fafb;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
-  transition: box-shadow 0.2s, transform 0.2s;
-}
-
-.recording-item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.recording-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.recording-name {
-  font-weight: 600;
-  color: #374151;
-  font-size: 1rem;
-  word-break: break-all;
-}
-
-.recording-time {
-  font-size: 0.8rem;
-  color: #6b7280;
-}
-
-.recording-type {
-  background-color: #e5e7eb;
-  color: #4b5563;
-  padding: 2px 8px;
-  border-radius: 10px;
-  align-self: flex-start;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-/* 响应式布局 */
-@media (max-width: 768px) {
-  .modal-content {
-    max-width: 95%;
-  }
-  .recordings-list {
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  }
-}
-
 </style>
\ No newline at end of file
diff --git a/my-vue-app/src/views/person/sale.vue b/my-vue-app/src/views/person/sale.vue
index 144bec4..6831484 100644
--- a/my-vue-app/src/views/person/sale.vue
+++ b/my-vue-app/src/views/person/sale.vue
@@ -597,7 +597,7 @@ async function getCustomerChat() {
   const routeParams = getRequestParams()
   const params = {
     user_name: routeParams.user_name || userStore.userInfo.username,
-    customer_name: selectedContact.value.name,
+    phone: selectedContact.value.phone,
   }
   try {
     const res = await getCustomerChatInfo(params)
@@ -618,7 +618,7 @@ async function getCustomerCall() {
   const routeParams = getRequestParams()
   const params = {
     user_name: routeParams.user_name || userStore.userInfo.username,
-    customer_name: selectedContact.value.name,
+  phone: selectedContact.value.phone,
   }
   try {
     const res = await getCustomerCallInfo(params)