Add performance monitoring to TimelineContainer component

frontend/src/components/TimelineContainer.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onUnmounted } from 'vue'
+import { ref, onUnmounted, onMounted } from 'vue'
 import TimelinePanel from './TimelinePanel.vue'
 import { TimelineEventStateManager } from '../services/timelineEventStateManager'
 import { CacheService } from '../services/CacheService'
@@ -82,10 +82,18 @@ const handleClearTimeline = () => {
   cacheService.clearAllCaches();
 };
 
+// 显示性能统计信息
+const showPerformanceStats = () => {
+  const stats = eventProcessor.getPerformanceStats();
+  console.log('[TimelineContainer] 性能统计:', stats);
+  alert(`总处理事件数: ${stats.totalProcessed}\n重用事件数: ${stats.totalReused}\n重用率: ${stats.reuseRate}%`);
+};
+
 // 暴露方法供父组件调用
 defineExpose({
   addEvent,
-  clearTimeline: handleClearTimeline
+  clearTimeline: handleClearTimeline,
+  showPerformanceStats
 });
 
 // 组件卸载时清理资源
@@ -93,6 +101,20 @@ onUnmounted(() => {
   stateManager.clearAllStates();
   cacheService.clearAllCaches();
 });
+
+// 组件挂载时启动定期性能监控
+onMounted(() => {
+  // 每30秒输出一次性能统计
+  const perfInterval = setInterval(() => {
+    const stats = eventProcessor.getPerformanceStats();
+    console.log('[TimelineContainer] 定期性能统计:', stats);
+  }, 30000);
+  
+  // 组件卸载时清除定时器
+  onUnmounted(() => {
+    clearInterval(perfInterval);
+  });
+});
 </script>
 
 <style scoped>