Refactor TimelineContainer and TimelinePanel components to remove duplicate...

Refactor TimelineContainer and TimelinePanel components to remove duplicate logic and use shared utilities

frontend/src/components/TimelineContainer.vue

+<template>
+  <TimelinePanel
+    :events="events"
+    :getEventTypeLabel="getEventTypeLabel"
+    :formatTime="formatTime"
+    :getExpandedState="getExpandedState"
+    :toggleExpand="toggleExpand"
+    :isToolEventType="isToolEventType"
+    :hasValidToolInput="hasValidToolInput"
+    :hasValidToolOutput="hasValidToolOutput"
+    :onClearTimeline="handleClearTimeline"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+import TimelinePanel from './TimelinePanel.vue'
+import { TimelineEventStateManager } from '../services/timelineEventStateManager'
+import { CacheService } from '../services/CacheService'
+import type { TimelineEvent } from '../types/timeline'
+import { eventTypeLabels } from '../types/timeline'
+import { isToolEventType, hasValidToolInput, hasValidToolOutput } from '../utils/timelineUtils'
+import { UnifiedEventProcessor } from '../services/UnifiedEventProcessor'
+
+// 状态管理器
+const stateManager = new TimelineEventStateManager();
+
+// 缓存服务
+const cacheService = new CacheService();
+
+// 统一事件处理器
+const eventProcessor = new UnifiedEventProcessor();
+
+// 事件数据
+const events = ref<TimelineEvent[]>([]);
+
+// 注册事件处理器
+eventProcessor.registerHandler((event: TimelineEvent) => {
+  // 添加事件到列表
+  events.value.push(event);
+  console.log('[TimelineContainer] 成功添加事件:', event.type, event.title);
+});
+
+// 添加时间轴事件
+const addEvent = (event: any) => {
+  // 使用统一事件处理器处理并分发事件
+  eventProcessor.processAndDispatch(event);
+};
+
+// 获取事件类型标签
+const getEventTypeLabel = (type: string): string => {
+  return cacheService.getCachedEventTypeLabel(type, eventTypeLabels, 
+    (labels, t) => labels[t] || t);
+};
+
+// 格式化时间
+const formatTime = (timestamp: number): string => {
+  return cacheService.getCachedFormattedTime(timestamp, (t) => {
+    const date = new Date(t);
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+  });
+};
+
+// 获取事件的展开状态
+const getExpandedState = (index: number): boolean => {
+  return stateManager.getExpandedState(index);
+};
+
+// 切换事件详细信息的展开状态
+const toggleExpand = (index: number) => {
+  stateManager.toggleExpand(index);
+};
+
+// 清除时间轴
+const handleClearTimeline = () => {
+  events.value = [];
+  eventProcessor.clearProcessedEvents();
+  stateManager.clearAllStates();
+  cacheService.clearAllCaches();
+};
+
+// 暴露方法供父组件调用
+defineExpose({
+  addEvent,
+  clearTimeline: handleClearTimeline
+});
+
+// 组件卸载时清理资源
+onUnmounted(() => {
+  stateManager.clearAllStates();
+  cacheService.clearAllCaches();
+});
+</script>
+
+<style scoped>
+.timeline-container-wrapper {
+  height: 100%;
+}
+</style>
\ No newline at end of file