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

在个人仪表盘、团队报表和统计指标组件中添加工具提示功能,当用户悬停在指标信息图标上时显示详细说明
创建新的Tooltip组件用于显示指标说明
更新API基础路径配置
This commit is contained in:
2025-08-22 18:13:42 +08:00
parent 8b63ab6123
commit 9b61620b86
5 changed files with 363 additions and 58 deletions

View File

@@ -0,0 +1,53 @@
<template>
<Teleport to="body">
<div v-if="visible" class="stat-tooltip" :style="{ left: x + 'px', top: y + 'px' }">
<div class="tooltip-title">
{{ title }}
</div>
<div class="tooltip-description">
<p>{{ description }}</p>
</div>
</div>
</Teleport>
</template>
<script setup>
defineProps({
visible: Boolean,
x: Number,
y: Number,
title: String,
description: String
});
</script>
<style scoped>
.stat-tooltip {
position: fixed;
z-index: 9999;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
max-width: 300px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.tooltip-title {
font-weight: 600;
margin-bottom: 4px;
color: #fff;
}
.tooltip-description {
font-size: 13px;
color: #e0e0e0;
line-height: 1.4;
}
.tooltip-description p {
margin: 0;
}
</style>