feat(组件): 添加指标说明工具提示功能

在个人仪表盘、团队报表和统计指标组件中添加工具提示功能，当用户悬停在指标信息图标上时显示详细说明
创建新的Tooltip组件用于显示指标说明
更新API基础路径配置

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

@@ -13,27 +13,27 @@
         <div class="kpi-grid">
           <div class="kpi-item">
             <div class="kpi-value">{{ props.kpiData.totalCalls }}</div>
-            <p>今日通话</p>
+            <p>今日通话 <i class="info-icon" @mouseenter="showTooltip('totalCalls', $event)" @mouseleave="hideTooltip">ⓘ</i></p>
           </div>
           <div class="kpi-item">
             <div class="kpi-value">{{ props.kpiData.successRate }}%</div>
-            <p>电话接通率</p>
+            <p>电话接通率 <i class="info-icon" @mouseenter="showTooltip('successRate', $event)" @mouseleave="hideTooltip">ⓘ</i></p>
           </div>
           <div class="kpi-item">
             <div class="kpi-value">{{ props.kpiData.avgDuration }}<span class="kpi-unit">min</span></div>
-            <p>平均通话时长</p>
+            <p>平均通话时长 <i class="info-icon" @mouseenter="showTooltip('avgDuration', $event)" @mouseleave="hideTooltip">ⓘ</i></p>
           </div>
           <div class="kpi-item">
             <div class="kpi-value">{{ props.kpiData.conversionRate }}</div>
-            <p>成交转化率</p>
+            <p>成交转化率 <i class="info-icon" @mouseenter="showTooltip('conversionRate', $event)" @mouseleave="hideTooltip">ⓘ</i></p>
           </div>
           <div class="kpi-item">
             <div class="kpi-value">{{ props.kpiData.assignedData }}</div>
-            <p>本期分配数据</p>
+            <p>本期分配数据 <i class="info-icon" @mouseenter="showTooltip('assignedData', $event)" @mouseleave="hideTooltip">ⓘ</i></p>
           </div>
           <div class="kpi-item">
             <div class="kpi-value">{{ props.kpiData.wechatAddRate }}</div>
-            <p>加微率</p>
+            <p>加微率 <i class="info-icon" @mouseenter="showTooltip('wechatAddRate', $event)" @mouseleave="hideTooltip">ⓘ</i></p>
           </div>
         </div>
       </div>
@@ -95,10 +95,21 @@
         </div>
       </div>
     </div>
+    
+    <!-- 指标说明 Tooltip -->
+    <Tooltip
+      :visible="tooltip.visible"
+      :x="tooltip.x"
+      :y="tooltip.y"
+      :title="tooltip.title"
+      :description="tooltip.description"
+    />
+    
   </div>
 </template>
 
 <script setup>
+import Tooltip from '@/components/Tooltip.vue';
 import { ref, reactive, onMounted, onBeforeUnmount, computed, watch } from 'vue';
 import StatisticData from './StatisticData.vue';
 import * as echarts from 'echarts';
@@ -155,6 +166,35 @@ const chartInstances = {};
 const personalFunnelChartCanvas = ref(null);
 const contactTimeChartCanvas = ref(null);
 
+// Tooltip 相关数据
+const tooltip = reactive({
+  visible: false,
+  x: 0,
+  y: 0,
+  title: '',
+  description: ''
+});
+
+// 指标说明配置
+const kpiDescriptions = {
+  successRate: {
+    title: '电话接通率',
+    description: '拨通电话 ÷ 拨打的电话'
+  },
+  avgDuration: {
+    title: '平均通话时长',
+    description: '所有通话总时长 ÷ 拨打电话次数。'
+  },
+  conversionRate: {
+    title: '成交转化率',
+    description: '成交人数 ÷ 本期总数据。'
+  },
+  wechatAddRate: {
+    title: '加微率',
+    description: '加微人数 ÷ 本期数据总人数'
+  }
+};
+
 // Chart.js 数据 - 使用props传递的数据
 const funnelData = computed(() => props.funnelData);
 const contactTimeData = computed(() => props.contactTimeData);
@@ -250,6 +290,22 @@ const getPercentage = (value) => {
 const getRankingClass = (index) => ({ 'rank-first': index === 0, 'rank-second': index === 1, 'rank-third': index === 2, 'rank-other': index > 2 });
 const getRankBadgeClass = (index) => ({ 'badge-gold': index === 0, 'badge-silver': index === 1, 'badge-bronze': index === 2, 'badge-default': index > 2 });
 
+// Tooltip 相关方法
+const showTooltip = (kpiType, event) => {
+  const description = kpiDescriptions[kpiType];
+  if (description) {
+    tooltip.title = description.title;
+    tooltip.description = description.description;
+    tooltip.x = event.clientX + 10;
+    tooltip.y = event.clientY - 10;
+    tooltip.visible = true;
+  }
+};
+
+const hideTooltip = () => {
+  tooltip.visible = false;
+};
+
 
 
 watch(() => props.contactTimeData, () => {
@@ -433,6 +489,8 @@ $white: #ffffff;
 }
 
 
+
+
 // --- 图表区域 ---
 .charts-section {
   display: grid;
@@ -649,4 +707,32 @@ $white: #ffffff;
   
 
 }
+
+
+
+
+.info-icon {
+  font-style: normal;
+  color: $blue;
+  font-size: 12px;
+  margin-left: 4px;
+  opacity: 0.7;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    opacity: 1;
+    color: #007bff;
+    transform: scale(1.2);
+  }
+}
+
+.kpi-item:hover .info-icon {
+  opacity: 1;
+}
+
+.kpi-item {
+  position: relative;
+  transition: all 0.2s ease;
+}
 </style>