页签切换可以了-优化过一次

src/app/app.component.html

@@ -28,9 +28,13 @@
           @for (tab of (tabs$ | async); track tab.id) {
             <div class="tab-item" 
                  [class.active]="(activeTabId$ | async) === tab.id"
+                 [class.loading]="loadingTabId === tab.id"
                  (click)="openProjectTab(tab.id)">
               <mat-icon class="tab-icon">folder</mat-icon>
               <span class="tab-title">{{ tab.title || '未命名项目' }}</span>
+              @if (loadingTabId === tab.id) {
+                <mat-spinner diameter="16" class="tab-loading-spinner"></mat-spinner>
+              }
               <button mat-icon-button 
                       class="tab-close"
                       (click)="closeProjectTab(tab.id, $event)">

src/app/app.component.scss

@@ -366,4 +366,27 @@
       color: white;
     }
   }
+  
+  &.loading {
+    cursor: wait;
+    opacity: 0.7;
+    background: #f0f9ff;
+    border-color: #93c5fd;
+    
+    .tab-title {
+      margin-right: 4px;
+    }
+    
+    .tab-loading-spinner {
+      margin-left: 4px;
+      
+      ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
+        stroke: #3b82f6;
+      }
+    }
+    
+    .tab-close {
+      display: none;
+    }
+  }
 }

src/app/app.component.ts

@@ -29,6 +29,7 @@ export class AppComponent implements OnInit, OnDestroy {
   tabs$: Observable<any>;
   activeTabId$: Observable<string | null>;
   showNewProjectModal = false;
+  loadingTabId: string | null = null; // 正在加载的页签ID
   
   private subscriptions: Subscription = new Subscription();
   isEventStreamConnected = false;
@@ -185,43 +186,34 @@ export class AppComponent implements OnInit, OnDestroy {
 
   // 打开项目标签页 - 导航到实例页面
   openProjectTab(projectId: string) {
+    console.time(`[页签切换-总耗时] ${projectId}`);
+    console.log('📊 [页签切换] 开始切换页签:', projectId);
+    
+    // 设置加载状态
+    this.loadingTabId = projectId;
+    
     const tab = this.tabService.getTabByProjectId(projectId);
     if (!tab) {
       console.error('找不到对应的标签页:', projectId);
       // 回退到项目页面
       this.router.navigate(['/project', projectId]);
       this.tabService.setActiveTab(projectId);
+      this.loadingTabId = null;
+      console.timeEnd(`[页签切换-总耗时] ${projectId}`);
       return;
     }
 
-    // 获取会话的菜单项ID
-    this.menuService.getMenuItemBySessionId(tab.session.id).subscribe({
-      next: (menuItemId) => {
-        console.log('找到菜单项ID:', menuItemId, '为会话:', tab.session.id);
-        // 创建或获取实例
-        this.instanceService.createInstance({ menuItemId, title: tab.session.title }).subscribe({
-          next: (instance) => {
-            console.log('实例创建/获取成功:', instance.id);
-            // 确保当前会话ID添加到实例中（用于标签页同步）
-            this.instanceService.addSessionToInstance(instance.id, tab.session.id);
-            // 导航到实例页面
-            this.router.navigate(['/instance', instance.id]);
-            this.tabService.setActiveTab(projectId);
-          },
-          error: (error) => {
-            console.error('创建实例失败:', error);
-            // 回退到项目页面
-            this.router.navigate(['/project', projectId]);
-            this.tabService.setActiveTab(projectId);
-          }
-        });
-      },
-      error: (error) => {
-        console.error('获取菜单项失败:', error);
-        // 回退到项目页面
-        this.router.navigate(['/project', projectId]);
-        this.tabService.setActiveTab(projectId);
-      }
+    // 注释：跳过菜单项查询，直接导航到项目页面
+    console.log('📊 [页签切换] 跳过菜单项查询，直接导航到项目页面');
+    
+    // 直接导航到项目页面
+    console.time(`[页签切换-导航] ${projectId}`);
+    this.router.navigate(['/project', projectId]).then(() => {
+      console.timeEnd(`[页签切换-导航] ${projectId}`);
+      this.tabService.setActiveTab(projectId);
+      this.loadingTabId = null;
+      console.timeEnd(`[页签切换-总耗时] ${projectId}`);
+      console.log('📊 [页签切换] 切换完成，页面已导航');
     });
   }
 

src/app/components/conversation.component.ts

@@ -7,7 +7,8 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { FormsModule } from '@angular/forms';
-import { Subscription } from 'rxjs';
+import { Subject, Subscription, of } from 'rxjs';
+import { distinctUntilChanged, switchMap, takeUntil, tap, catchError } from 'rxjs/operators';
 import { ConversationService } from '../services/conversation.service';
 import { SessionService } from '../services/session.service';
 import { EventService } from '../services/event.service';
@@ -48,6 +49,12 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
   private shouldScroll = false;
   private isInThinking = false; // 是否正在思考过程中
   private thinkingStartIndex = 0; // 思考内容的起始位置（在消息内容中的索引）
+  
+  // RxJS Subjects for reactive session management
+  private destroy$ = new Subject<void>();
+  private sessionChanged$ = new Subject<string>();
+  private currentLoadingSession: string | null = null;
+  private isLoadingMessages = false;
 
   constructor(
     private conversationService: ConversationService,
@@ -56,9 +63,31 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
   ) {}
 
   ngOnInit() {
-    // 订阅活动会话变化
+    console.log('🔍 [ConversationComponent] 初始化，instanceId:', this.instanceId);
+    
+    // 立即检查当前是否有活动会话（处理组件在会话设置后初始化的情况）
+    const currentSession = this.sessionService.getActiveSession();
+    if (currentSession) {
+      console.log('🔍 [ConversationComponent] 初始化时已有活动会话:', currentSession.id);
+      this.activeSession = currentSession;
+      this.loadMessages(currentSession.id);
+      if (this.instanceId) {
+        this.eventService.registerSessionInstanceMapping(currentSession.id, this.instanceId);
+      }
+      this.subscribeToSessionEvents(currentSession.id);
+    }
+    
+    // 订阅活动会话变化 - 使用响应式管道避免重复加载
     this.subscriptions.add(
-      this.sessionService.activeSession$.subscribe(session => {
+      this.sessionService.activeSession$.pipe(
+        takeUntil(this.destroy$),
+        // 避免相同会话重复触发
+        distinctUntilChanged((prev, curr) => {
+          const prevId = prev?.id;
+          const currId = curr?.id;
+          return prevId === currId;
+        })
+      ).subscribe(session => {
         console.log('🔍 [ConversationComponent] 活动会话变化:', session?.id);
         
         // 会话切换时取消当前正在进行的流式请求
@@ -69,6 +98,7 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
         
         this.activeSession = session;
         if (session) {
+          console.log('🔍 [ConversationComponent] 加载会话消息:', session.id);
           this.loadMessages(session.id);
           // 如果实例ID存在，注册会话-实例映射
           if (this.instanceId) {
@@ -77,6 +107,7 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
           // 订阅该会话的事件
           this.subscribeToSessionEvents(session.id);
         } else {
+          console.log('🔍 [ConversationComponent] 无活动会话，清空消息');
           this.messages = [];
           // 取消会话事件订阅
           this.unsubscribeFromSessionEvents();
@@ -260,6 +291,17 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
   ngOnDestroy() {
     this.subscriptions.unsubscribe();
     this.cancelCurrentStream();
+    
+    // 清理消息加载订阅
+    if (this.loadMessagesSubscription) {
+      this.loadMessagesSubscription.unsubscribe();
+      this.loadMessagesSubscription = null;
+    }
+    
+    // 清理RxJS Subjects
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.sessionChanged$.complete();
   }
 
   // 取消当前的流式请求
@@ -289,30 +331,76 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
     this.isInThinking = false;
     this.thinkingStartIndex = 0;
   }
+  
+  // 安全的计时器函数，避免重复计时器错误
+  private safeTimeStart(label: string) {
+    try { 
+      console.timeEnd(label); 
+    } catch(e) {
+      // 忽略计时器不存在的错误
+    }
+    console.time(label);
+  }
+  
+  private safeTimeEnd(label: string) {
+    try { 
+      console.timeEnd(label); 
+    } catch(e) {
+      // 忽略计时器不存在的错误
+    }
+  }
 
+  private loadMessagesSubscription: Subscription | null = null;
+  
   loadMessages(sessionId: string) {
-    console.log('🔍 [ConversationComponent] 加载会话消息，sessionId:', sessionId);
+    console.log('🔍 [ConversationComponent] loadMessages 被调用，sessionId:', sessionId);
+    
+    // 取消之前的加载请求
+    if (this.loadMessagesSubscription) {
+      console.log('🔍 [ConversationComponent] 取消之前的消息加载请求');
+      this.loadMessagesSubscription.unsubscribe();
+      this.loadMessagesSubscription = null;
+    }
+    
+    // 安全地开始计时器
+    this.safeTimeStart(`[对话消息-加载] ${sessionId}`);
+    console.log('📊 [对话消息] 开始加载会话消息，sessionId:', sessionId);
+    
     this.messages = [];
     
     // 从服务加载历史消息
-    this.subscriptions.add(
-      this.conversationService.getHistory(sessionId, 50).subscribe({
-        next: (historyMessages) => {
-          console.log('🔍 [ConversationComponent] 收到历史消息数量:', historyMessages.length);
-          this.messages = historyMessages;
-          
-          // 按时间排序（最早的在前）
-          this.messages.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-          
-          this.shouldScroll = true;
-        },
-        error: (error) => {
-          console.error('🔍 [ConversationComponent] 加载历史消息失败:', error);
-          // 历史消息加载失败，但页面仍然可以正常工作
-          // 用户仍然可以发送新消息
-        }
-      })
-    );
+    this.loadMessagesSubscription = this.conversationService.getHistory(sessionId, 50).subscribe({
+      next: (historyMessages) => {
+        this.safeTimeEnd(`[对话消息-加载] ${sessionId}`);
+        console.log('📊 [对话消息] 收到历史消息数量:', historyMessages.length);
+        
+        // 开始消息处理和渲染计时
+        this.safeTimeStart(`[对话消息-处理] ${sessionId}`);
+        
+        this.messages = historyMessages;
+        
+        // 按时间排序（最早的在前）
+        this.messages.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+        
+        this.shouldScroll = true;
+        
+        // 使用setTimeout估算渲染完成时间
+        setTimeout(() => {
+          this.safeTimeEnd(`[对话消息-处理] ${sessionId}`);
+          console.log('📊 [对话消息] 消息处理和渲染完成，会话:', sessionId);
+        }, 0);
+        
+        // 清理订阅引用
+        this.loadMessagesSubscription = null;
+      },
+      error: (error) => {
+        this.safeTimeEnd(`[对话消息-加载] ${sessionId}`);
+        console.error('📊 [对话消息] 加载历史消息失败:', error);
+        // 历史消息加载失败，但页面仍然可以正常工作
+        // 用户仍然可以发送新消息
+        this.loadMessagesSubscription = null;
+      }
+    });
   }
 
   // 订阅会话事件