feat: 优化细节

src/app/shop/admin/data/report/components/report-chart.vue

@@ -95,10 +95,13 @@
       <div v-if="description" class="chart-description">
         <el-text type="info" size="small">{{ description }}</el-text>
       </div>
+
+      <!-- 全屏时的提示框容器 -->
+      <div v-if="isFullscreen" ref="fullscreenTipsContainerRef" class="fullscreen-tips-container"></div>
     </el-card>
 
-    <!-- 图表提示框组件 - 使用 Teleport 传送到 body -->
-    <Teleport to="body">
+    <!-- 图表提示框组件 - 根据全屏状态动态选择传送位置 -->
+    <Teleport :to="teleportTarget">
       <ChartTipsBox :visible="tipsBoxVisible" :data="tipsBoxData" @close="closeTipsBox" />
     </Teleport>
   </div>
@@ -219,6 +222,7 @@ const emit = defineEmits(['refresh', 'dateChange', 'chartClick', 'typeChange'])
 // 响应式数据
 const chartRef = ref()
 const reportChartRef = ref() // 添加图表容器的引用
+const fullscreenTipsContainerRef = ref() // 全屏提示框容器引用
 const currentType = ref(props.type)
 const dateRange = ref([])
 const isFullscreen = ref(false)
@@ -256,6 +260,16 @@ const chartStyle = computed(() => {
   }
 })
 
+// 动态Teleport目标
+const teleportTarget = computed(() => {
+  // 如果当前组件处于全屏状态，将提示框传送到全屏容器
+  if (isFullscreen.value && fullscreenTipsContainerRef.value) {
+    return fullscreenTipsContainerRef.value
+  }
+  // 否则传送到body
+  return 'body'
+})
+
 const chartOption = computed(() => {
   if (!props.data || props.data.length === 0) {
     return {}
@@ -740,6 +754,15 @@ watch(isFullscreen, () => {
       if (chartRef.value) {
         chartRef.value.resize()
       }
+
+      // 如果提示框正在显示，需要重新定位
+      if (tipsBoxVisible.value) {
+        // 强制重新渲染提示框以适应新的容器
+        tipsBoxVisible.value = false
+        nextTick(() => {
+          tipsBoxVisible.value = true
+        })
+      }
     }, 300) // 等待全屏动画完成
   })
 })
@@ -908,4 +931,21 @@ defineExpose({
   border-radius: 6px;
   min-height: calc(100vh - 120px);
 }
+
+/* 全屏时的提示框容器 */
+.fullscreen-tips-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10000;
+}
+
+/* 确保提示框在全屏容器中正确显示 */
+.fullscreen-tips-container .chart-tips-box {
+  pointer-events: auto;
+  z-index: 10001;
+}
 </style>