feat(视图组件): 添加指标提示功能

在secondTop.vue和DetailedDataTable.vue中添加工具提示组件，当用户悬停在指标标签上时显示计算方式的详细说明

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

@@ -42,11 +42,11 @@
           <thead>
             <tr>
               <th>人员</th>
-              <th @click="sortBy('conversion_rate')" class="sortable">成交率 <span class="sort-icon" :class="{ active: sortField === 'conversion_rate' }">{{ sortOrder === 'desc' ? '↓' : '↑' }}</span></th>
-              <th @click="sortBy('total_deals')" class="sortable">成交单数 <span class="sort-icon" :class="{ active: sortField === 'total_deals' }">{{ sortOrder === 'desc' ? '↓' : '↑' }}</span></th>
-              <th>加微率</th>
-              <th>入群率</th>
-              <th>表单填写率</th>
+              <th @click="sortBy('conversion_rate')" class="sortable">成交率 <i class="info-icon" @mouseenter="showTooltip($event, 'conversionRate')" @mouseleave="hideTooltip" @click.stop>ⓘ</i> <span class="sort-icon" :class="{ active: sortField === 'conversion_rate' }">{{ sortOrder === 'desc' ? '↓' : '↑' }}</span></th>
+              <th @click="sortBy('total_deals')" class="sortable">成交单数 <i class="info-icon" @mouseenter="showTooltip($event, 'totalDeals')" @mouseleave="hideTooltip" @click.stop>ⓘ</i> <span class="sort-icon" :class="{ active: sortField === 'total_deals' }">{{ sortOrder === 'desc' ? '↓' : '↑' }}</span></th>
+              <th>加微率 <i class="info-icon" @mouseenter="showTooltip($event, 'plusVRate')" @mouseleave="hideTooltip">ⓘ</i></th>
+              <th>入群率 <i class="info-icon" @mouseenter="showTooltip($event, 'groupRate')" @mouseleave="hideTooltip">ⓘ</i></th>
+              <th>表单填写率 <i class="info-icon" @mouseenter="showTooltip($event, 'formFillingRate')" @mouseleave="hideTooltip">ⓘ</i></th>
             </tr>
           </thead>
           <tbody>
@@ -74,12 +74,22 @@
         </table>
       </div>
     </div>
+    
+    <!-- Tooltip 组件 -->
+    <Tooltip 
+      :visible="tooltip.visible" 
+      :x="tooltip.x" 
+      :y="tooltip.y" 
+      :title="tooltip.title" 
+      :description="tooltip.description" 
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
+import Tooltip from '@/components/Tooltip.vue';
 
 const props = defineProps({
    tableData: { type: Array, required: true },
@@ -93,6 +103,56 @@ const filters = ref({ centerLeader: '', advancedManager: '', manager: '', dealSt
 const sortField = ref('conversion_rate');
 const sortOrder = ref('desc');
 
+// Tooltip 状态管理
+const tooltip = reactive({
+  visible: false,
+  x: 0,
+  y: 0,
+  title: '',
+  description: ''
+});
+
+// 指标计算方式描述
+const metricDescriptions = {
+  conversionRate: {
+    title: '成交率计算方式',
+    description: '成交单数 ÷ 总线索数 × 100%，反映销售人员将潜在客户转化为实际成交的能力。'
+  },
+  totalDeals: {
+    title: '成交单数计算方式',
+    description: '统计销售人员在选定时间范围内成功签约的订单总数，包括所有已确认的成交订单。'
+  },
+  plusVRate: {
+    title: '加微率计算方式',
+    description: '成功添加微信的客户数 ÷ 总接触客户数 × 100%，反映客户对销售人员的初步信任度。'
+  },
+  groupRate: {
+    title: '入群率计算方式',
+    description: '成功邀请进入微信群的客户数 ÷ 已添加微信的客户数 × 100%，反映客户的参与积极性。'
+  },
+  formFillingRate: {
+    title: '表单填写率计算方式',
+    description: '完成表单填写的客户数 ÷ 总邀请填写表单的客户数 × 100%，反映客户的配合度和意向强度。'
+  }
+};
+
+// 显示工具提示
+const showTooltip = (event, metricType) => {
+  const metric = metricDescriptions[metricType];
+  if (metric) {
+    tooltip.title = metric.title;
+    tooltip.description = metric.description;
+    tooltip.x = event.clientX;
+    tooltip.y = event.clientY;
+    tooltip.visible = true;
+  }
+};
+
+// 隐藏工具提示
+const hideTooltip = () => {
+  tooltip.visible = false;
+};
+
 const centerLeaders = computed(() => {
    return props.levelTree?.level_tree?.center_leaders || [];
  });
@@ -227,6 +287,8 @@ th { background: #f7fafc; padding: 12px 16px; text-align: left; font-weight: 600
 th.sortable { cursor: pointer; }
 .sort-icon { margin-left: 4px; opacity: 0.5; }
 .sort-icon.active { opacity: 1; color: #4299e1; }
+.info-icon { margin-left: 4px; color: #666; cursor: pointer; font-style: normal; font-size: 12px; transition: color 0.2s; }
+.info-icon:hover { color: #409eff; }
 td { padding: 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
 tr { cursor: pointer; transition: background-color 0.2s ease; }
 tr:hover { background-color: #f8fafc; }