perf(components): 优化“折线图”组件文本溢出显示样式

src/components/LineChart.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import VChart from 'vue-echarts';
 import { LineChart, PieChart } from 'echarts/charts';
 import {
@@ -143,6 +143,22 @@ const option = computed(() => {
   };
 });
 
+const textContainer = ref<HTMLElement | null>(null);
+const shouldShowEllipsis = ref(false);
+
+// 判断是否溢出
+const checkOverflow = () => {
+  if (!textContainer.value) return;
+
+  const element = textContainer.value;
+  shouldShowEllipsis.value = element.scrollWidth > element.clientWidth;
+};
+
+// 自动响应式处理
+const handleResize = () => {
+  checkOverflow();
+};
+
 const editorMonitoring = (id: number) => {
   emit('editorClick', id);
 };
@@ -150,12 +166,28 @@ const editorMonitoring = (id: number) => {
 const addHistoricalData = (data: MonitoringPointData) => {
   emit('historicalDataClick', data);
 };
+
+// 生命周期钩子
+onMounted(() => {
+  checkOverflow();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
 </script>
 
 <template>
   <div :class="monitoringId === data.id ? 'line-chart-content choose-content-border' : 'line-chart-content'">
     <AFlex justify="space-between" align="center">
-      <div class="line-chart-header-text">{{ data.name }}</div>
+      <APopover v-if="shouldShowEllipsis">
+        <template #content>
+          {{ data.name }}
+        </template>
+        <div ref="textContainer" class="line-chart-header-text">{{ data.name }}</div>
+      </APopover>
+      <div v-else ref="textContainer" class="line-chart-header-text">{{ data.name }}</div>
       <SvgIcon v-if="iconShow" class="line-chart-header-icon" @click="editorMonitoring(data.id)" name="adjustment" />
     </AFlex>
     <div @click="addHistoricalData(data)" class="chart-container" style="cursor: pointer">
@@ -253,12 +285,16 @@ const addHistoricalData = (data: MonitoringPointData) => {
 }
 
 .line-chart-header-text {
+  max-width: 160px;
+  overflow: hidden; /* 隐藏溢出内容 */
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
   color: rgb(0 0 0 / 85%);
   text-align: left;
+  text-overflow: ellipsis; /* 显示省略号 */
+  white-space: nowrap; /* 强制不换行 */
 }
 
 .line-chart-content {