feat(views): 添加双击跳转功能并优化样式

- 在DetailedDataTable.vue中添加双击人员跳转功能
- 优化表格和卡片头部样式
- 移除模拟数据并启用初始化API调用
- 修复performance显示格式问题

my-vue-app/src/views/topOne/components/DetailedDataTable.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="dashboard-card table-section">
-    <div class="card-header">
+    <div class="card-header" style="margin-left: 1rem;">
+
       <h3>详细数据表格</h3>
     </div>
     <div class="data-table-container">
@@ -49,7 +50,7 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(person, index) in displayTableData" :key="index" @click="$emit('update:selectedPerson', person)" :class="{ selected: selectedPerson && (selectedPerson.sale_name === person.sale_name || selectedPerson.leader_name === person.leader_name) }">
+            <tr v-for="(person, index) in displayTableData" :key="index" @click="$emit('update:selectedPerson', person)" @dblclick="handlePersonDoubleClick(person)" :class="{ selected: selectedPerson && (selectedPerson.sale_name === person.sale_name || selectedPerson.leader_name === person.leader_name) }">
               <td>
                 <div class="person-info">
                   <div class="person-avatar">{{ (person.sale_name || person.leader_name).charAt(0) }}</div>
@@ -78,6 +79,7 @@
 
 <script setup>
 import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
 
 const props = defineProps({
    tableData: { type: Array, required: true },
@@ -85,6 +87,7 @@ const props = defineProps({
    levelTree: { type: Object, default: () => ({}) }
  });
 const emit = defineEmits(['update:selectedPerson', 'filter-change']);
+const router = useRouter();
 
 const filters = ref({ centerLeader: '', advancedManager: '', manager: '', dealStatus: '' });
 const sortField = ref('conversion_rate');
@@ -165,12 +168,57 @@ const getRateClass = (rate) => {
 const getRateColor = (rate) => {
   if (rate >= 80) return '#4CAF50'; if (rate >= 60) return '#FF9800'; return '#f44336';
 };
+
+// 处理人员双击事件
+const handlePersonDoubleClick = (person) => {
+  let userLevel = 4; // 默认级别
+  const userName = person.sale_name || person.leader_name;
+  
+  // 根据筛选器选择状态确定user_level
+  if (filters.value.manager) {
+    userLevel = 1; // 选中经理
+  } else if (filters.value.advancedManager) {
+    userLevel = 2; // 选中高级经理
+  } else if (filters.value.centerLeader) {
+    userLevel = 3; // 选中中心领导
+  }
+  // 如果什么都没选，userLevel保持为4
+  
+  // 根据user_level确定跳转路径
+  let targetPath = '';
+  switch (userLevel) {
+    case 4:
+      targetPath = '/second-top';
+      break;
+    case 3:
+      targetPath = '/senior-manager';
+      break;
+    case 2:
+      targetPath = '/manager';
+      break;
+    case 1:
+      targetPath = '/sale';
+      break;
+    default:
+      targetPath = '/second-top';
+  }
+  
+  // 路由跳转
+  router.push({
+    path: targetPath,
+    query: {
+      user_name: userName,
+      user_level: userLevel
+    }
+  });
+};
+
 // 移除formatDuration函数，不再需要
 </script>
 
 <style scoped>
 .table-section { height: 600px; }
-.data-table-container { height: calc(100% - 60px); overflow-y: auto; padding: 24px; }
+.data-table-container { height: calc(100% - 60px); overflow-y: auto; padding: 0.5rem; }
 .table-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; padding: 16px; background: #f8fafc; border-radius: 8px; }
 .filter-group { display: flex; flex-direction: column; gap: 4px; }
 .filter-group label { font-size: 12px; font-weight: 600; color: #4a5568; }