feat(客户数据展示): 实现聊天记录展示功能并优化表单数据显示

- 在RawDataCards组件中添加chatInfo prop用于接收聊天数据
- 实现聊天记录列表展示功能，使用实际API返回的数据格式
- 优化表单数据显示逻辑，合并相关字段提升可读性
- 添加聊天记录查看功能，完善数据加载和错误处理

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

@@ -70,10 +70,10 @@
                   <span class="content-time">最新: {{ chatData.lastMessage }}</span>
                 </div>
                 <div class="message-list">
-                  <div v-for="(message, index) in chatMessages" :key="index" class="message-item">
+                  <div v-for="(message, index) in props.chatInfo.messages" :key="index" class="message-item">
                     <div class="message-header">
-                      <span class="message-sender">{{ message.sender }}</span>
-                      <span class="message-time">{{ message.time }}</span>
+                      <span class="message-sender">{{ message.format_direction }}</span>
+                      <span class="message-time">{{ message.format_add_time }}</span>
                     </div>
                     <div class="message-text">{{ message.content }}</div>
                   </div>
@@ -117,12 +117,21 @@ const props = defineProps({
   formInfo: {
     type: Object,
     default: () => ({})
+  },
+  chatInfo: {
+    type: Object,
+    default: () => ({})
   }
 })
 
 // 当前激活的tab
 const activeTab = ref('chat')
 
+// 聊天消息列表
+const chatMessages = computed(() => {
+  return props.chatInfo?.messages || []
+})
+
 // 表单字段数据
 const formFields = computed(() => {
   const formData = props.formInfo
@@ -135,55 +144,55 @@ const formFields = computed(() => {
     ]
   }
   
+  let fields = []
+  
   // 检查是否为第一种格式（包含name, mobile等字段）
-  if (formData.name || formData.mobile || formData.child_name) {
-    const fields = [
-      { label: '客户姓名', value: formData.name || '暂无' },
-      { label: '联系方式', value: formData.mobile || '暂无' },
-      { label: '孩子姓名', value: formData.child_name || '暂无' },
-      { label: '孩子性别', value: formData.child_gender || '暂无' },
-      { label: '孩子教育', value: formData.child_education || '暂无' },
-      { label: '关系', value: formData.child_relation || '暂无' },
-      { label: '职业', value: formData.occupation || '暂无' },
-      { label: '地区', value: formData.territory || '暂无' }
-    ]
-    
-    // 如果有additional_info，添加前3个问题
-    if (formData.additional_info && Array.isArray(formData.additional_info)) {
-      formData.additional_info.slice(0, 3).forEach((item, index) => {
-        fields.push({
-          label: `问题${index + 1}`,
-          value: `${item.topic}: ${item.answer}`
-        })
-      })
-    }
-    
-    return fields
-  }
+   if (formData.name || formData.mobile || formData.child_name) {
+     const customerInfo = [formData.name, formData.mobile, formData.child_relation, formData.occupation].filter(item => item && item !== '暂无').join(' | ')
+     const childInfo = [formData.child_name, formData.child_gender, formData.child_education].filter(item => item && item !== '暂无').join(' | ')
+     
+     fields = [
+       { label: '客户信息', value: customerInfo || '暂无' },
+       { label: '孩子信息', value: childInfo || '暂无' },
+       { label: '地区', value: formData.territory || '暂无' }
+     ]
+     
+     // 如果有additional_info，添加所有问题
+       if (formData.additional_info && Array.isArray(formData.additional_info)) {
+         formData.additional_info.forEach((item) => {
+           fields.push({
+             label: item.topic,
+             value: item.answer
+           })
+         })
+       }
+   } else {
+     // 第二种格式（expandXXX字段）
+     const customerInfo = [formData.expandTwentyOne, formData.expandOne].filter(item => item && item !== '暂无').join(' | ')
+     const childInfo = [formData.expandTwentyNine, formData.expandTwentyFive, formData.expandTwo].filter(item => item && item !== '暂无').join(' | ')
+     
+     fields = [
+       { label: '客户信息', value: customerInfo || '暂无' },
+       { label: '孩子信息', value: childInfo || '暂无' },
+       { label: '学习状态', value: formData.expandFive || '暂无' },
+       { label: '沟通情况', value: formData.expandEight || '暂无' },
+       { label: '主要问题', value: formData.expandTwentySeven || '暂无' },
+       { label: '关注领域', value: formData.expandFifteen || '暂无' },
+       { label: '学习成绩', value: formData.expandFourteen || '暂无' },
+       { label: '孩子数量', value: formData.expandTwenty || '暂无' },
+       { label: '预期时间', value: formData.expandThirty || '暂无' }
+     ]
+   }  
+  // 合并表单数据和聊天数据
+  const allFields = [...fields]
   
-  // 第二种格式（expandXXX字段）
-  const fields = [
-    { label: '孩子姓名', value: formData.expandTwentyNine || '暂无' },
-    { label: '孩子性别', value: formData.expandTwentyFive || '暂无' },
-    { label: '孩子教育', value: formData.expandTwo || '暂无' },
-    { label: '关系', value: formData.expandTwentyOne || '暂无' },
-    { label: '职业', value: formData.expandOne || '暂无' },
-    { label: '学习状态', value: formData.expandFive || '暂无' },
-    { label: '沟通情况', value: formData.expandEight || '暂无' },
-    { label: '主要问题', value: formData.expandTwentySeven || '暂无' },
-    { label: '关注领域', value: formData.expandFifteen || '暂无' },
-    { label: '学习成绩', value: formData.expandFourteen || '暂无' },
-    { label: '孩子数量', value: formData.expandTwenty || '暂无' },
-    { label: '预期时间', value: formData.expandThirty || '暂无' }
-  ]
-  
-  return fields.filter(field => field.value !== '暂无' && field.value !== null)
+  return allFields
 })
 
 // 聊天数据
 const chatData = computed(() => ({
-  count: props.selectedContact?.chatCount || 127,
-  lastMessage: props.selectedContact?.lastMessage || '1小时前'
+  count: props.chatInfo?.messages?.length || 0,
+  lastMessage: props.chatInfo?.update_time || '1小时前'
 }))
 
 // 通话数据
@@ -192,37 +201,6 @@ const callData = computed(() => ({
   totalDuration: props.selectedContact?.totalCallDuration || '45分钟'
 }))
 
-// 聊天消息列表
-const chatMessages = computed(() => {
-  return [
-    {
-      sender: '客户',
-      time: '今天 14:30',
-      content: '你好，我想了解一下数学课程的具体安排和费用情况。'
-    },
-    {
-      sender: '我',
-      time: '今天 14:32',
-      content: '您好！我们的数学课程分为基础班和提高班，根据孩子的年龄和基础来安排。费用方面，基础班是6000元/期，提高班是8000元/期。'
-    },
-    {
-      sender: '客户',
-      time: '今天 14:35',
-      content: '孩子现在8岁，数学基础一般，应该选择哪个班级比较合适？'
-    },
-    {
-      sender: '我',
-      time: '今天 14:37',
-      content: '建议先从基础班开始，我们会有专业的测评来确定孩子的具体水平，然后制定个性化的学习方案。'
-    },
-    {
-      sender: '客户',
-      time: '今天 15:20',
-      content: '好的，那什么时候可以安排试听课呢？'
-    }
-  ]
-})
-
 // 通话记录列表
 const callRecords = computed(() => {
   return [